/* ============================================================
 * GLOBAL TEXT-WRAP SAFETY — prevents heading overflow on narrow screens
 * ============================================================ */
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
@media (max-width: 480px) {
  h1, h2, h3 {
    text-wrap: balance;
    overflow-wrap: anywhere;
  }
}

/* ============================================================
 * SCROLL PROGRESS BAR — top edge, gold, ultra-thin (high-end touch)
 * ============================================================ */
.bft-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-200));
  z-index: 10000;
  transition: width 0.05s linear;
  pointer-events: none;
}

/* ============================================================
 * SMOOTH MICRO-INTERACTIONS — buttons, cards, links
 * ============================================================ */
.btn-primary, .btn-whatsapp {
  position: relative;
  overflow: hidden;
}
.btn-primary::after,
.btn-whatsapp::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.25), transparent 60%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.btn-primary:hover::after,
.btn-whatsapp:hover::after { opacity: 1; }
.btn-primary:active,
.btn-whatsapp:active { transform: scale(0.98); }

/* Service / pricing cards lift on hover (desktop) and tap-feedback (mobile) */
.service-card-mini, .price-card, .feature-card {
  transition: transform 0.3s var(--ease-out, ease), box-shadow 0.3s ease;
}
@media (hover: hover) {
  .service-card-mini:hover, .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  }
}
@media (max-width: 900px) {
  .service-card-mini:active, .feature-card:active, .price-card:active {
    transform: scale(0.985);
  }
}

/* ============================================================
 * REDUCED MOTION RESPECT
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .bft-scroll-progress { transition: none !important; }
}

/* ============================================================
 * MOBILE-FIXES.CSS — comprehensive mobile UX overrides
 *
 * Loaded AFTER main.css to enforce single-column layout on phones,
 * fix inline-style grid leaks, add modern mobile-only patterns.
 * ============================================================ */

/* ===== Phone: collapse all multi-column grids to 1 ===== */
@media (max-width: 700px) {
  /* Force-collapse common grid classes */
  .persona-grid,
  .related-grid,
  .fleet-grid,
  .tour-grid,
  .pricing-grid,
  .price-grid,
  .features-grid,
  .feedback-themes-grid,
  .why-grid,
  .about-stats-grid,
  .contact-grid,
  .contact-cards-grid,
  .blog-grid,
  .reviews-grid,
  .lang-grid,
  .hotel-grid,
  .heli-grid,
  .lounge-grid,
  .dinner-grid,
  .healing-grid,
  .classic-grid,
  .bus-grid,
  .addon-grid,
  .benefit-grid,
  .process-grid,
  .arrival-steps-grid,
  .evoa-rules,
  .evoa-steps,
  .b211-steps,
  .sim-compare,
  .rental-compare,
  .services-directory-grid,
  .booking-info-grid,
  .trust-signals-grid,
  .author-share-grid,
  .booking-layout,
  .service-hero-layout,
  .footer-grid,
  .about-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Catch inline style grids via attribute selector */
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns:1fr 420px"],
  [style*="grid-template-columns:280px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Pricing card on mobile: less aggressive scaling, no transform */
  .price-card.featured,
  .pricing-grid .price-card.featured {
    transform: none !important;
    margin: 0 !important;
  }
}

/* ===== Tablet: 2-col for most, 1-col for hero layouts ===== */
@media (min-width: 701px) and (max-width: 900px) {
  .persona-grid,
  .related-grid,
  .fleet-grid,
  .tour-grid,
  .pricing-grid,
  .features-grid,
  .feedback-themes-grid,
  .why-grid,
  .about-stats-grid,
  .contact-grid,
  .blog-grid,
  .hotel-grid,
  .evoa-rules,
  .b211-steps,
  .services-directory-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .service-hero-layout,
  .booking-layout,
  .about-layout {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Phone: typography and spacing tightening ===== */
@media (max-width: 600px) {
  body { font-size: 15.5px; }
  h1 { font-size: clamp(28px, 8vw, 40px) !important; line-height: 1.18 !important; }
  h2.section-title { font-size: clamp(24px, 6vw, 32px) !important; line-height: 1.22 !important; }
  h3 { font-size: 18px !important; line-height: 1.3 !important; }

  /* Section padding */
  section { padding-left: 4px; padding-right: 4px; }
  .container { padding-inline: 18px !important; }

  /* Tighten outsized inline padding */
  [style*="padding:40px"] { padding: 24px !important; }
  [style*="padding: 40px"] { padding: 24px !important; }
  [style*="padding:32px"] { padding: 22px !important; }
  [style*="padding:48px"] { padding: 28px !important; }

  /* Buttons full-width */
  .btn-primary,
  .btn-whatsapp,
  .btn-tier,
  .btn-tier.solid {
    width: 100% !important;
    justify-content: center !important;
    padding: 16px 22px !important;
    font-size: 13px !important;
  }
  .hero-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* Service-card mini compact */
  .service-card-mini {
    padding: 14px 16px !important;
  }

  /* Hero stats: collapse to 2x2 grid for breathing room */
  .hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
    text-align: left !important;
  }
  .hero-stat .number { font-size: 22px !important; }
  .hero-stat .label  { font-size: 11px !important; }

  /* Trust bar: 2x2 */
  .trust-bar .trust-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .trust-item { padding: 10px !important; }
  .trust-value { font-size: 14px !important; }

  /* Pricing cards: full width, generous padding */
  .price-card {
    padding: 28px 22px !important;
    margin-bottom: 4px;
  }
  .price-amount { font-size: 56px !important; }

  /* Service category headers */
  .service-category-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .service-category-header h3 { font-size: 18px !important; }

  /* Booking form: tighter labels */
  .booking-layout > div > div {
    padding: 24px !important;
  }
  .booking-info-grid {
    grid-template-columns: 1fr !important;
  }

  /* FAQ items: tap-friendly padding */
  .faq-question { padding: 18px 20px !important; font-size: 15px !important; }
  .faq-answer p { padding: 0 20px 18px !important; font-size: 14px !important; line-height: 1.7 !important; }

  /* Hero image cards corner bleed */
  figure img { border-radius: 12px !important; }

  /* Reduce massive section padding */
  section[style*="padding:var(--section-pad)"],
  section[style*="padding: var(--section-pad)"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Tables responsive: scroll horizontally */
  .post-content table,
  .entry-content table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    font-size: 13px !important;
  }

  /* Hide language switcher; use mobile menu instead */
  .nav-lang-switch { display: none !important; }
}

/* ============================================================
 * STICKY MOBILE CTA BAR — bottom of screen, instant action
 * Visible on all pages except booking/contact (where users are
 * already converting).
 * ============================================================ */
.bft-mobile-cta {
  display: none;
}
@media (max-width: 900px) {
  .bft-mobile-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 14, 26, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(160, 138, 78, 0.25);
    gap: 10px;
    box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.45);
  }
  .bft-mobile-cta a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .15s ease, filter .15s ease;
  }
  .bft-mobile-cta a:active { transform: scale(0.97); filter: brightness(0.92); }
  .bft-mobile-cta .bft-cta-book {
    background: linear-gradient(135deg, var(--gold-400), var(--gold-200));
    color: var(--navy-950);
  }
  .bft-mobile-cta .bft-cta-wa {
    background: #075c27; /* WCAG AA 4.5+ contrast with white */
    color: #fff;
  }
  /* Body padding so content isn't hidden behind sticky bar */
  body.has-mobile-cta {
    padding-bottom: 76px;
  }
  /* Hide free-floating WhatsApp button on mobile (sticky bar replaces it) */
  .whatsapp-float { display: none !important; }
  /* Hide pages where sticky bar shouldn't appear (booking, contact) */
  body.page-template-page-booking .bft-mobile-cta,
  body.page-template-page-contact .bft-mobile-cta { display: none; }
}

/* ============================================================
 * SWIPE CAROUSEL — services on homepage, mobile only
 * Uses CSS scroll-snap; no JS required.
 * ============================================================ */
@media (max-width: 700px) {
  /* Convert services-grid-compact to swipeable horizontal scroll */
  .services-grid-compact {
    grid-template-columns: none !important;
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
    margin: 0 -18px !important;
    padding: 4px 18px 12px !important;
    gap: 12px !important;
  }
  .services-grid-compact::-webkit-scrollbar { display: none; }
  .services-grid-compact .service-card-mini {
    flex: 0 0 78%;
    scroll-snap-align: start;
    min-width: 240px;
  }
  .services-grid-compact .service-card-mini::after {
    content: '';
  }

  /* Carousel hint */
  .service-category::after {
    content: '← swipe to see all →';
    display: block;
    text-align: center;
    font-size: 11px;
    color: var(--white-50);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 8px;
    opacity: 0.65;
  }
}

/* ============================================================
 * SAFE-AREA / NOTCH HANDLING for iOS
 * ============================================================ */
@supports (padding: max(0px)) {
  .site-header { padding-top: max(1rem, env(safe-area-inset-top)) !important; }
}

/* ============================================================
 * MOBILE-ONLY: hero text doesn't overlap into top safe-area
 * ============================================================ */
@media (max-width: 600px) {
  .hero {
    padding-top: max(86px, calc(80px + env(safe-area-inset-top))) !important;
  }
}

/* ============================================================
 * ACCORDION POLISH — better tap targets, animation
 * ============================================================ */
.faq-question {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: rgba(160, 138, 78, 0.18);
}
.faq-question[aria-expanded="true"] {
  color: var(--gold-400);
}
.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}
.faq-item.active .faq-answer,
.faq-question[aria-expanded="true"] + .faq-answer {
  max-height: 1500px;
}

/* ============================================================
 * LINK-IN-TEXT-BLOCK — distinguishable inline links (a11y)
 * Lighthouse flags color-only links in body text. Underline them
 * everywhere except buttons/nav/footer.
 * ============================================================ */
.post-content a:not(.btn-primary):not(.btn-whatsapp):not(.btn-tier),
.entry-content a:not(.btn-primary):not(.btn-whatsapp):not(.btn-tier),
.service-summary-text a,
.faq-answer a,
article a:not(.btn-primary):not(.btn-whatsapp):not(.btn-tier):not(.read-more) {
  text-decoration: underline;
  text-decoration-color: rgba(160, 138, 78, 0.45);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.post-content a:hover,
.entry-content a:hover,
article a:hover {
  text-decoration-color: var(--gold-300);
}

/* Breadcrumb + inline-styled body links — override inline color styles */
.breadcrumb-bar nav a,
.service-summary a,
section p a[style*="color:var(--gold"],
section li a[style*="color:var(--gold"],
section span a[style*="color:var(--gold"] {
  text-decoration: underline !important;
  text-decoration-color: rgba(160, 138, 78, 0.55) !important;
  text-underline-offset: 3px !important;
}

/* ============================================================
 * IMPROVED TAP TARGETS (a11y + iOS feel)
 * ============================================================ */
@media (max-width: 900px) {
  a, button, input, select, textarea {
    min-height: 44px; /* Apple HIG recommendation */
  }
  .nav-toggle { padding: 12px !important; }
}

/* ============================================================
 * iOS + ANDROID LUXURY POLISH (added 2026-05-03)
 * Optimizes text rendering, scrolling momentum, tap response,
 * and notch/safe-area handling for premium mobile feel.
 * ============================================================ */

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(160, 138, 78, 0.18);
  text-rendering: optimizeLegibility;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-overflow-scrolling: touch;
}

a, button {
  -webkit-tap-highlight-color: rgba(160, 138, 78, 0.25);
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

img {
  -webkit-user-drag: none;
  user-select: none;
  image-rendering: -webkit-optimize-contrast;
}

/* Use dynamic viewport units on mobile (handles iOS browser chrome correctly) */
@supports (height: 100dvh) {
  @media (max-width: 900px) {
    .hero {
      min-height: 100dvh !important;
    }
  }
}

/* Hero image cinematic gradient overlay for text readability */
@media (max-width: 900px) {
  .hero figure {
    position: relative;
  }
  .hero figure::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 30%;
    background: linear-gradient(to bottom, transparent, var(--navy-900) 90%);
    pointer-events: none;
    border-radius: 0 0 16px 16px;
  }
}

/* iOS safe-area padding for sticky CTA */
@supports (padding: max(0px)) {
  .bft-mobile-cta {
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .site-header {
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}

/* Smoother scroll snap for mobile carousels */
@media (max-width: 700px) {
  .services-grid-compact {
    scroll-padding: 18px;
    scroll-snap-stop: always;
    overscroll-behavior-x: contain;
  }
}

/* iOS rubber-band scroll prevention on body */
html, body {
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
}

/* Improve large title rendering on iOS */
h1, h2, h3 {
  font-feature-settings: 'kern', 'liga', 'calt';
  -webkit-font-feature-settings: 'kern', 'liga', 'calt';
  letter-spacing: -0.01em;
}

/* Better focus ring for keyboard nav (a11y) */
:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Disable text selection on UI chrome elements */
.site-header, .bft-mobile-cta, .nav-toggle, .btn-primary, .btn-whatsapp {
  user-select: none;
  -webkit-user-select: none;
}

/* Allow text selection on content areas */
.hero-description, p, .faq-answer, .service-summary-text {
  user-select: text;
  -webkit-user-select: text;
}

/* ============================================================
 * EXPERIENCE GALLERY — luxury photo grid optimization
 * ============================================================ */
.experience-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.experience-gallery figure {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16/9;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
@media (hover: hover) {
  .experience-gallery figure:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  }
}
.experience-gallery img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  .experience-gallery figure:hover img {
    transform: scale(1.04);
  }
}

/* Mobile: stack gallery images, full-width, smaller gap */
@media (max-width: 700px) {
  .experience-gallery {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-inline: -8px;
  }
  .experience-gallery figure {
    border-radius: 12px;
    aspect-ratio: 4/3 !important;
  }
  .experience-gallery figcaption {
    font-size: 15px !important;
    padding: 16px 18px !important;
  }
}

/* ============================================================
 * iOS-SPECIFIC: smooth momentum scrolling, proper viewport
 * ============================================================ */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari */
  body {
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
  }
  /* Prevent input zoom on focus iOS */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px !important;
  }
  /* iOS safe area for notched devices */
  .site-header {
    padding-top: max(1rem, env(safe-area-inset-top)) !important;
    padding-left: max(0px, env(safe-area-inset-left)) !important;
    padding-right: max(0px, env(safe-area-inset-right)) !important;
  }
  .bft-mobile-cta {
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
}

/* ============================================================
 * ANDROID-SPECIFIC: better tap highlights, no flicker
 * ============================================================ */
@media (hover: none) and (pointer: coarse) {
  a, button, .faq-question, .price-card, .service-card-mini {
    -webkit-tap-highlight-color: rgba(160, 138, 78, 0.18);
    -webkit-touch-callout: none;
  }
  /* Prevent Chrome Android double-tap zoom */
  button, .btn-primary, .btn-whatsapp, .btn-tier {
    touch-action: manipulation;
  }
}

/* ============================================================
 * IMAGE LOADING — smooth blur-up effect for hero images
 * ============================================================ */
.hero img,
section figure img {
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-900) 100%);
  transition: opacity 0.6s ease, filter 0.8s ease;
}
.hero img[loading="eager"] {
  opacity: 0;
  animation: bft-image-fade-in 0.8s 0.1s ease forwards;
}
@keyframes bft-image-fade-in {
  from { opacity: 0; filter: blur(8px); }
  to { opacity: 1; filter: blur(0); }
}

/* ============================================================
 * MOBILE TYPOGRAPHY POLISH — better line-height for kebaya
 * ============================================================ */
@media (max-width: 600px) {
  body { font-size: 16px; line-height: 1.65; }
  .hero-description { font-size: 15px !important; line-height: 1.7 !important; }
  .service-summary-text { font-size: 15px !important; line-height: 1.75 !important; }
  /* Tighter section spacing */
  section { padding-block: max(48px, 8vw); }
  /* Better trust grid on small screens */
  .trust-bar .trust-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .trust-item {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 14px 10px !important;
  }
  .trust-item .trust-icon { margin-bottom: 6px; }
}

/* ============================================================
 * HERO IMAGE FRAMING — luxury polaroid feel
 * ============================================================ */
.hero ~ section figure img,
section.services + section figure img {
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 24px 64px rgba(0, 0, 0, 0.35),
    0 8px 16px rgba(0, 0, 0, 0.25);
}

/* ============================================================
 * REDUCE MOTION ACCESSIBILITY
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .experience-gallery img,
  .experience-gallery figure {
    transition: none !important;
    animation: none !important;
  }
  .hero img[loading="eager"] {
    opacity: 1;
    animation: none !important;
  }
}

/* === FOOTER MOBILE COMPACT 2026-05-04 — accordion + tighter spacing === */
@media (max-width: 700px) {
  /* Brand section: keep open, tighten */
  .site-footer { padding-top: 36px !important; padding-bottom: 24px !important; }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .footer-brand {
    margin-bottom: 28px !important;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(160, 138, 78, 0.15);
  }
  .footer-brand .logo { margin-bottom: 14px; }
  .footer-brand p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--white-70);
    margin-bottom: 14px;
  }

  /* Each footer column → accordion */
  .footer-col {
    border-bottom: 1px solid rgba(160, 138, 78, 0.12);
    margin-bottom: 0;
  }
  .footer-col:last-child { border-bottom: none; }
  .footer-col-title {
    font-family: var(--font-heading) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--gold-300) !important;
    cursor: pointer;
    padding: 16px 0 !important;
    margin: 0 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .footer-col-title::after {
    content: '+';
    font-size: 22px;
    color: var(--gold-400);
    font-weight: 300;
    transition: transform 0.3s ease;
    line-height: 1;
  }
  .footer-col.open .footer-col-title::after {
    content: '‘2';
  }
  .footer-col ul,
  .footer-col .footer-links {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0;
    margin: 0;
  }
  .footer-col.open ul,
  .footer-col.open .footer-links {
    max-height: 720px;
    padding-bottom: 14px;
  }
  .footer-col ul li,
  .footer-col .footer-links a {
    padding: 8px 0;
    font-size: 13.5px;
    line-height: 1.5;
  }

  /* Bottom legal bar */
  .footer-bottom {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
    padding-top: 20px !important;
    margin-top: 28px !important;
    font-size: 12px !important;
  }
  .footer-bottom p, .footer-bottom span { font-size: 12px !important; }
}

/* Footer accordion JS-enhanced (smooth open/close, keyboard accessible) */

/* === MOBILE PAGE LENGTH OPTIMIZATIONS 2026-05-04 === */
@media (max-width: 700px) {
  /* Tighten section vertical padding overall */
  section { padding-top: 48px !important; padding-bottom: 48px !important; }
  .hero { padding-top: 96px !important; padding-bottom: 70px !important; }
  
  /* Services: tighten category spacing + carousel hint smaller */
  .service-category { margin-top: 28px !important; }
  .service-category-header h3 { font-size: 17px !important; margin-bottom: 4px !important; }
  .service-category-header p { font-size: 13px !important; line-height: 1.5 !important; }
  .services-grid-compact { padding: 4px 18px 8px !important; margin-top: 14px !important; }
  .services-grid-compact .service-card-mini { padding: 14px 16px !important; }
  .services-grid-compact .service-card-mini strong { font-size: 14px !important; }
  .services-grid-compact .service-card-mini span { font-size: 11.5px !important; }

  /* Pricing cards: tighter on mobile */
  .pricing-grid { gap: 16px !important; }
  .price-card { padding: 24px 20px !important; }
  .price-card.featured { padding: 24px 20px !important; }
  .price-amount { font-size: 44px !important; margin: 8px 0 !important; }
  .price-features { gap: 6px !important; margin: 14px 0 18px !important; }
  .price-features li { font-size: 13.5px !important; padding: 6px 0 !important; }
  .price-tier { font-size: 11px !important; }
  .price-name { font-size: 22px !important; margin-bottom: 4px !important; }
  .price-per { font-size: 12px !important; }
  
  /* How-it-works: tighten steps */
  .how-it-works .steps-container { gap: 16px !important; margin-top: 24px !important; }
  .step { padding: 20px !important; }
  .step h3 { font-size: 16px !important; margin: 8px 0 6px !important; }
  .step p { font-size: 13.5px !important; line-height: 1.5 !important; }
  .step-number { font-size: 28px !important; }
  
  /* Blog preview: hide on phone (still SEO indexable, just hidden visually) */
  .blog-preview { display: none !important; }
  
  /* CTA banner tighter */
  .cta-banner { padding: 40px 0 !important; }
  .cta-banner h2 { font-size: 22px !important; margin-bottom: 8px !important; }
  .cta-banner p { font-size: 14px !important; margin-bottom: 16px !important; }
  
  /* Testimonials more compact */
  .reviews-grid, .testimonials .reviews-grid { gap: 14px !important; }
  .review-card { padding: 18px 20px !important; }
  .review-text { font-size: 13.5px !important; line-height: 1.6 !important; }
  
  /* FAQ tighter */
  .faq-item { margin-bottom: 8px !important; }
  
  /* Trust bar more compact */
  .trust-bar { padding: 28px 0 !important; }
  
  /* Full-bleed sections: tighter */
  section[class*="reveal"][style*="min-height:520px"] { 
    min-height: 360px !important; 
    padding: 50px 0 !important;
  }
}

/* === ROUND 2 PAGE-LENGTH OPTS 2026-05-04 === */
@media (max-width: 700px) {
  /* Trust bar: compact */
  .trust-bar { padding: 22px 0 !important; }
  .trust-grid { gap: 10px !important; }
  .trust-item { padding: 10px 8px !important; }
  .trust-icon { width: 32px !important; height: 32px !important; }
  .trust-value { font-size: 12px !important; }
  .trust-item div:last-child > :last-child { font-size: 10.5px !important; line-height: 1.3 !important; }
  
  /* AEO summary: tighter */
  .service-summary { padding: 28px 0 !important; }
  .service-summary-text { font-size: 13.5px !important; line-height: 1.55 !important; }
  
  /* Pricing: stack the 3 cards more compactly */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .price-card { padding: 18px 18px !important; }
  .price-card.featured { transform: none !important; padding: 22px 18px !important; }
  .price-features li { padding: 4px 0 !important; }
  .btn-tier { padding: 12px 22px !important; font-size: 12px !important; }

  /* Full-bleed sections — force 360px min */
  .bft-faq-section, 
  section.reveal[style*="min-height"] {
    min-height: auto !important;
  }
  /* Override inline min-height:520px on the 2 full-bleed sections */
  .reveal[style*="min-height:520px"] {
    min-height: 380px !important;
  }
  
  /* CTA banner: small */
  .cta-banner h2 { font-size: 19px !important; }
  
  /* How-it-works: 2-column for steps on phone (since steps are short) */
  .how-it-works .steps-container { 
    grid-template-columns: 1fr !important; 
    gap: 14px !important;
  }
  .how-it-works { padding: 36px 0 !important; }
}

@media (max-width: 700px) {
  .bft-bleed-section { min-height: 360px !important; padding: 36px 0 !important; }
  .bft-bleed-section h2 { font-size: 24px !important; }
  .bft-bleed-section .container { padding: 30px 22px !important; }
  .bft-bleed-section p { font-size: 14px !important; line-height: 1.55 !important; margin-bottom: 18px !important; }
}

/* === PRICING CAROUSEL 2026-05-04 — luxury horizontal swipe === */
.pricing-swipe-hint {
  display: none;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-300);
  opacity: 0.75;
}

@media (max-width: 700px) {
  .pricing-swipe-hint {
    display: block;
    text-align: center;
  }
  
  .pricing-carousel {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
    margin: 24px -18px 0 !important;
    padding: 8px 18px 20px !important;
    gap: 14px !important;
  }
  .pricing-carousel::-webkit-scrollbar { display: none; }
  
  .pricing-carousel .price-card {
    flex: 0 0 84% !important;
    min-width: 280px !important;
    max-width: 320px !important;
    scroll-snap-align: center !important;
    border-radius: 18px !important;
    border: 1px solid rgba(160, 138, 78, 0.18) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
    padding: 24px 22px !important;
  }
  
  .pricing-carousel .price-card.featured {
    border: 2px solid var(--gold-400) !important;
    background: linear-gradient(180deg, rgba(160, 138, 78, 0.06), rgba(10, 14, 26, 0.85)) !important;
    transform: scale(1.02) !important;
    box-shadow: 0 12px 40px rgba(160, 138, 78, 0.18);
  }
  
  .pricing-carousel .price-card .price-amount {
    font-size: 48px !important;
  }
  .pricing-carousel .price-card .price-features {
    margin-top: 14px !important;
  }
  .pricing-carousel .price-card .btn-tier {
    margin-top: 18px !important;
    padding: 14px 24px !important;
    font-size: 13px !important;
  }
  
  /* Pricing section background — make it visually striking */
  .pricing {
    padding: 36px 0 !important;
    background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 50%, var(--navy-900) 100%) !important;
  }
  .pricing-header {
    margin-bottom: 8px !important;
    padding: 0 18px;
  }
  .pricing-header .section-title {
    font-size: 26px !important;
  }
  .pricing-header .section-subtitle {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}

/* Desktop: keep grid but enhance featured tier slightly */
@media (min-width: 701px) {
  .pricing-carousel {
    /* Desktop uses default grid layout */
  }
}

/* === TESTIMONIALS CAROUSEL 2026-05-04 — auto-slide social proof === */
.reviews-swipe-hint {
  display: none;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-300);
  opacity: 0.75;
}
.reviews-dots { display: none; }

@media (max-width: 700px) {
  .reviews-swipe-hint {
    display: block;
    text-align: center;
  }
  
  .reviews-carousel {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
    margin: 24px -18px 0 !important;
    padding: 6px 18px 16px !important;
    gap: 14px !important;
  }
  .reviews-carousel::-webkit-scrollbar { display: none; }
  
  .reviews-carousel .review-card {
    flex: 0 0 86% !important;
    min-width: 280px !important;
    max-width: 340px !important;
    scroll-snap-align: center !important;
    border-radius: 16px !important;
    border: 1px solid rgba(160, 138, 78, 0.16) !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
    padding: 24px 22px !important;
    background: linear-gradient(180deg, rgba(160, 138, 78, 0.04), rgba(10, 14, 26, 0.7));
  }
  
  .reviews-carousel .review-stars {
    font-size: 18px !important;
    margin-bottom: 12px !important;
    color: var(--gold-400);
  }
  .reviews-carousel .review-text {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    margin-bottom: 16px !important;
    min-height: 130px;
  }
  .reviews-carousel .review-author {
    border-top: 1px solid rgba(160, 138, 78, 0.18);
    padding-top: 14px;
  }
  .reviews-carousel .review-avatar {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }
  
  /* Dots indicator */
  .reviews-dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
  }
  .reviews-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(160, 138, 78, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .reviews-dots .dot.active {
    background: var(--gold-400);
    width: 22px;
    border-radius: 3px;
  }
  
  /* Testimonials section background */
  .testimonials {
    padding: 36px 0 !important;
    background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 50%, var(--navy-900) 100%) !important;
  }
  .testimonials-header { padding: 0 18px; margin-bottom: 0 !important; }
  .testimonials-header .section-title { font-size: 24px !important; }
}

/* === FINAL AUDIT 2026-05-04 — pricing centered + footer iOS === */
@media (max-width: 700px) {
  /* Force pricing into horizontal swipe (override any grid fallback) */
  .pricing .pricing-grid,
  .pricing .pricing-carousel,
  .pricing-grid.pricing-carousel {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
    margin: 18px -16px 0 !important;
    padding: 8px 50% 24px 50% !important;
    gap: 14px !important;
    width: calc(100% + 32px);
  }
  /* The 50% padding centers each card via scroll-snap-align:center */
  
  .pricing .pricing-grid::-webkit-scrollbar,
  .pricing-grid.pricing-carousel::-webkit-scrollbar { display: none; }
  
  .pricing-grid.pricing-carousel > .price-card {
    flex: 0 0 78% !important;
    min-width: 250px !important;
    max-width: 300px !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
  }
  
  /* Featured tier slightly larger but still snap-centered */
  .pricing-grid.pricing-carousel > .price-card.featured {
    flex: 0 0 82% !important;
    min-width: 270px !important;
  }
}

/* === FOOTER iOS SAFE-AREA + COMPACT === */
@supports (padding: env(safe-area-inset-bottom)) {
  .site-footer {
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }
  body.has-mobile-cta {
    padding-bottom: max(76px, calc(76px + env(safe-area-inset-bottom))) !important;
  }
  .bft-mobile-cta {
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
}

/* iOS-specific footer polish */
@media (max-width: 700px) {
  .site-footer {
    padding-top: 32px !important;
  }
  .footer-grid { padding-bottom: 0 !important; }
  
  /* Ensure footer links are tap-friendly (44×44 minimum per Apple HIG) */
  .footer-col ul li a {
    display: block;
    min-height: 32px;
    padding: 6px 0 !important;
    -webkit-tap-highlight-color: rgba(160, 138, 78, 0.18);
  }
  
  /* Footer brand copy slightly smaller for iOS */
  .footer-brand p {
    line-height: 1.55 !important;
  }
  
  /* Bottom legal bar — iOS-safe */
  .footer-bottom {
    padding-top: 24px !important;
    padding-bottom: 0 !important;
    color: rgba(255,255,255,0.5) !important;
    font-size: 11.5px !important;
  }
  
  /* Hide blog-preview entirely (DOM removed but defense) */
  .blog-preview { display: none !important; }
}

/* iOS rubber-band scroll polish */
html, body {
  overscroll-behavior-y: none;
}
@media (max-width: 700px) {
  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}