/* Phone layout. Inline styles are the desktop design, so phone overrides need !important.
   Elements are targeted by data-m labels added to the page markup. */

[data-m~="nav-menu"] { display: none; }
[data-m~="nav-menu"] > summary { list-style: none; }
[data-m~="nav-menu"] > summary::-webkit-details-marker { display: none; }

@media (max-width: 760px) {
  /* Menu: logo + "Menu" button, links move into the dropdown */
  nav { padding: 0 8px 0 16px !important; }
  nav > a:first-child { white-space: nowrap; }
  [data-m~="nav-links"], [data-m~="nav-phone"] { display: none !important; }
  [data-m~="nav-menu"] { display: block !important; }

  /* Sections breathe less on a small screen */
  [data-m~="sec"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  [data-m~="page-hero"] { padding-top: 120px !important; }
  [data-m~="stack"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-m~="unstick"] { position: static !important; }

  /* Home hero: text full width, quote card underneath */
  [data-m~="hero"] { min-height: 0 !important; padding-top: 96px !important; gap: 40px; }
  [data-m~="hero-top"] { padding-top: 0 !important; }
  [data-m~="hero-card"] { width: auto !important; }

  /* Home "why" photos: two side by side, no divider column */
  [data-m~="pair"] { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  [data-m~="pair-offset"] { margin-top: 48px !important; }
  [data-m~="hide"] { display: none !important; }
  [data-m~="gap-md"] { gap: 48px !important; }

  [data-m~="marquee-sec"] { padding: 64px 0 80px !important; }

  /* Footer */
  [data-m~="footer"] { border-radius: 32px 32px 0 0 !important; padding-top: 64px !important; margin-top: 40px !important; }
  [data-m~="footer-inner"] { gap: 56px !important; }
}

/* Tablet and small laptop: keep the nav on one line */
@media (min-width: 761px) and (max-width: 1100px) {
  [data-m~="nav-links"] { gap: 18px !important; white-space: nowrap; }
  [data-m~="nav-links"] a, nav > a:first-child { white-space: nowrap; }
  [data-m~="nav-phone"] { display: none !important; }
}

/* Animated brand-colour gradient behind inner page heroes */
[data-hero] { position: relative; overflow: hidden; isolation: isolate; }
[data-hero]::before, [data-hero]::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
[data-hero]::before { inset: -40%; will-change: transform; animation: heroDriftA 22s ease-in-out infinite alternate; }
[data-hero]::after { inset: -40%; will-change: transform; animation: heroDriftB 28s ease-in-out infinite alternate; }
[data-hero="dark"]::before {
  background:
    radial-gradient(38% 42% at 22% 38%, rgba(107,235,126,.42), transparent 70%),
    radial-gradient(34% 40% at 74% 30%, rgba(58,77,79,.95), transparent 72%);
}
[data-hero="dark"]::after {
  background:
    radial-gradient(30% 36% at 70% 72%, rgba(107,235,126,.26), transparent 70%),
    radial-gradient(36% 40% at 30% 78%, rgba(58,77,79,.8), transparent 72%);
}
[data-hero="light"]::before {
  background:
    radial-gradient(36% 42% at 24% 36%, rgba(107,235,126,.38), transparent 70%),
    radial-gradient(34% 40% at 76% 32%, rgba(34,47,48,.10), transparent 72%),
    radial-gradient(30% 36% at 72% 70%, rgba(107,235,126,.28), transparent 70%),
    radial-gradient(34% 38% at 28% 80%, rgba(58,77,79,.10), transparent 72%);
}
[data-hero="light"]::after { inset: 0; animation: none; background: linear-gradient(to bottom, rgba(247,247,245,0) 55%, #F7F7F5 100%); }
@keyframes heroDriftA { 0% { transform: translate3d(-6%, -4%, 0) rotate(0deg) scale(1); } 100% { transform: translate3d(8%, 6%, 0) rotate(14deg) scale(1.12); } }
@keyframes heroDriftB { 0% { transform: translate3d(7%, 5%, 0) rotate(0deg) scale(1.1); } 100% { transform: translate3d(-8%, -6%, 0) rotate(-16deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { [data-hero]::before, [data-hero]::after { animation: none; } }