/* ── Mobile responsiveness ─────────────────────────────────────────────────
   The pages are built with React inline styles, which can't contain media
   queries. These !important rules override those inline styles on small
   screens so the fixed multi-column layouts collapse cleanly.               */

/* Desktop defaults: hamburger + mobile menu hidden, desktop nav shown. */
.nav-burger { display: none; }
.nav-mobile-menu { display: none; }

/* ── Client logo marquee (auto-scrolling, seamless loop) ─────────────────── */
.logo-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logo-track { display: flex; width: max-content; animation: logo-scroll 38s linear infinite; }
.logo-group { display: flex; align-items: center; gap: 56px; padding-right: 56px; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; }
}

@media (max-width: 860px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  img, svg, video { max-width: 100%; }

  /* Collapse every multi-column grid to a single column */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  /* Comfortable, uniform section + footer padding */
  section, footer { padding-top: 60px !important; padding-bottom: 60px !important; padding-left: 22px !important; padding-right: 22px !important; }

  /* Sticky header row: tighter padding */
  [style*="position: sticky"] > div,
  [style*="position:sticky"] > div {
    padding-left: 20px !important; padding-right: 20px !important;
  }

  /* Swap the desktop nav for the hamburger */
  .nav-desktop { display: none !important; }
  .nav-burger { display: flex !important; }
  .nav-mobile-menu { display: block !important; }

  /* Fluid headings that never overflow the viewport */
  h1 { font-size: clamp(32px, 8.5vw, 60px) !important; line-height: 1.05 !important; }
  h2 { font-size: clamp(26px, 7vw, 46px) !important; line-height: 1.08 !important; }
  h3 { font-size: clamp(20px, 5.5vw, 32px) !important; }

  /* Comparison matrix keeps its columns and scrolls sideways instead of stacking */
  .cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cmp-matrix { min-width: 620px; }
  .cmp-matrix [style*="grid-template-columns"] {
    grid-template-columns: 1.6fr 1fr 1fr 1fr !important;
    gap: 0 !important;
  }

  /* Booking calendar must keep its 7-column week grid */
  .cal { padding: 24px 16px !important; border-right: none !important; }
  .cal [style*="grid-template-columns"] {
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 2px !important;
  }

  /* Logo marquee: tighter spacing + slightly smaller names on phones */
  .logo-group { gap: 36px !important; padding-right: 36px !important; }
  .logo-group span { font-size: 15px !important; }

  /* Approach cards: drop the left-border dividers so the three read as peers, not nested */
  [style*="grid-template-columns"].approach-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .approach-card { border-left: none !important; padding: 32px 0 !important; }
  .approach-card:first-child { padding-top: 28px !important; }
  .approach-card + .approach-card { border-top: 1px solid #D3C9B6 !important; }
}

/* Narrow phones: give the header a clean stacked look */
@media (max-width: 560px) {
  /* Tame very large statement numbers/text set on plain divs */
  [style*="font-size: 88px"], [style*="font-size: 84px"], [style*="font-size: 76px"],
  [style*="font-size: 72px"], [style*="font-size: 68px"], [style*="font-size: 64px"] {
    font-size: clamp(40px, 12vw, 64px) !important;
    line-height: 1.02 !important;
  }
}