/* =====================================================================
   OSP Reach — marketing landing styles
   Mobile-first. System font base. Light/dold via custom properties swapped
   by prefers-color-scheme. No build step, no framework.
   ===================================================================== */

/* ---------- Custom properties / design tokens ---------- */
:root {
  /* Brand greens (DO NOT use #25D366 for text — fails contrast on white) */
  --green-900: #075E54;  /* AAA on white — headings, buttons, links */
  --green-700: #128C7E;  /* large text / UI accents */
  --green-500: #25D366;  /* DECORATIVE ONLY — icon fills, dots, underlines */

  /* Neutrals (light) */
  --bg: #ffffff;
  --bg-alt: #f3f7f6;
  --surface: #ffffff;
  --surface-2: #f7faf9;
  --text: #14211f;
  --text-muted: #51635f;
  --border: #e2eae8;
  --border-strong: #cdd9d6;

  /* Interactive */
  --btn-primary-bg: var(--green-900);
  --btn-primary-fg: #ffffff;
  --btn-primary-bg-hover: #0b6d62;
  --btn-ghost-fg: var(--green-900);
  --btn-ghost-border: var(--border-strong);
  --accent: var(--green-900);
  --accent-soft: rgba(7, 94, 84, 0.10);

  /* Hero image fallback bg (so a failed load never breaks layout) */
  --media-bg: #dfe9e6;

  --ring: rgba(7, 94, 84, 0.45);

  /* Layout */
  --container: 1140px;
  --container-narrow: 760px;
  --header-h: 76px;
  --header-h-condensed: 60px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(16, 36, 33, 0.06), 0 1px 1px rgba(16,36,33,0.04);
  --shadow-md: 0 8px 24px rgba(16, 36, 33, 0.08);
  --shadow-lg: 0 18px 50px rgba(16, 36, 33, 0.12);

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Devanagari", sans-serif;
  --fz-base: 1rem;
  --fz-h1: clamp(2rem, 1.2rem + 3.6vw, 3.2rem);
  --fz-h2: clamp(1.6rem, 1.1rem + 2.2vw, 2.3rem);
  --fz-h3: clamp(1.15rem, 1rem + 0.5vw, 1.3rem);
  --fz-lead: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);

  color-scheme: light dark;
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --green-900: #2A9D8F;   /* lightened teal for text/links on dark */
    --green-700: #34b8a9;
    --green-500: #4CED7A;   /* lightened accent */

    --bg: #0E1416;
    --bg-alt: #121819;
    --surface: #182021;
    --surface-2: #1d2627;
    --text: #ECEFF1;
    --text-muted: #a7b8b6;
    --border: #2a3435;
    --border-strong: #3a4744;

    --btn-primary-bg: #075E54;   /* keep dark teal so white text stays AAA */
    --btn-primary-fg: #ffffff;
    --btn-primary-bg-hover: #0b6d62;
    --btn-ghost-fg: #4CED7A;
    --btn-ghost-border: #3a4744;
    --accent: #4CED7A;
    --accent-soft: rgba(76, 237, 122, 0.12);

    --media-bg: #1d2627;

    --ring: rgba(76, 237, 122, 0.5);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55);
  }
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fz-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Break long unbreakable strings (e.g. the WhatsApp pricing doc URL in the
     estimator disclaimer) so they never cause horizontal scroll on phones.
     No effect on normal text, which already wraps at spaces. */
  overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 4px;
}
h1, h2, h3, h4 { line-height: 1.18; color: var(--text); margin: 0 0 .5em; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding: 0; }
strong { color: var(--text); }

/* Section anchors: keep headings clear of the sticky header */
:where(section, [id]) { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
.container-narrow { max-width: var(--container-narrow); }
.section { padding-block: clamp(48px, 8vw, 88px); }
.section-head { max-width: 720px; margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .08em; font-size: .8rem;
  font-weight: 700; color: var(--accent); margin: 0 0 .5rem;
}
.section-sub { font-size: var(--fz-lead); color: var(--text-muted); margin: 0; }
.badge {
  display: inline-block; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--accent-soft); color: var(--accent);
  padding: .18rem .5rem; border-radius: 999px; vertical-align: middle;
}

/* ---------- Buttons ---------- */
.btn {
  --bh: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--bh); padding-inline: 22px;
  font: inherit; font-weight: 700; line-height: 1;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn-primary:hover { background: var(--btn-primary-bg-hover); color: var(--btn-primary-fg); }
.btn-ghost { background: transparent; color: var(--btn-ghost-fg); border-color: var(--btn-ghost-border); }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-large { --bh: 54px; padding-inline: 30px; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: 12px; top: -64px; z-index: 200;
  background: var(--bg); color: var(--accent); padding: 10px 16px;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* ---------- Visually hidden / utility ---------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
  /* transitions target the wrapper, never push content (no layout shift) */
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: var(--container); margin-inline: auto; padding-block: 14px; padding-inline: 20px;
  transition: padding-block .2s ease;
}
.site-header.is-condensed .header-inner { padding-block: 6px; }
.site-header.is-condensed .logo-mark { transform: scale(.92); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; }
.brand:hover { text-decoration: none; }
.brand .logo-mark { transition: transform .2s ease; border-radius: 8px; flex: none; }
.brand .wordmark { font-size: 1.12rem; letter-spacing: -0.01em; }

.primary-nav { display: flex; }
.nav-list {
  list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0;
}
.nav-list a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px;
  color: var(--text); font-weight: 600; border-radius: var(--radius-sm);
}
.nav-list a:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.nav-list .nav-cta {
  background: var(--btn-primary-bg); color: var(--btn-primary-fg); min-height: 44px; margin-left: 8px;
}
.nav-list .nav-cta:hover { background: var(--btn-primary-bg-hover); color: var(--btn-primary-fg); }

/* Hamburger (mobile only) */
.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0; background: transparent;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer;
  position: relative;
}
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 20px; height: 2px; background: var(--text); border-radius: 2px;
  transform: translate(-50%, -50%); transition: transform .2s ease, opacity .15s ease;
}
.nav-toggle-bar::before { transform: translate(-50%, -7px); }
.nav-toggle-bar::after { transform: translate(-50%, 7px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translate(-50%, 0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: translate(-50%, 0) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(28px, 5vw, 56px); }
.hero-grid {
  display: grid; gap: clamp(28px, 5vw, 56px); align-items: center;
  grid-template-columns: 1fr;
}
.hero-copy h1 { font-size: var(--fz-h1); margin-bottom: .6rem; }
.hero-copy .lead { font-size: var(--fz-lead); color: var(--text-muted); max-width: 52ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 16px; }
.trust-line {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  color: var(--text-muted); font-size: .9rem; font-weight: 600; margin: 0;
}
.trust-line span { display: inline-flex; align-items: center; }
.hero-media { order: -1; }
.hero-image-frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--media-bg); box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3; border: 1px solid var(--border);
}
.hero-image-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Card grids ---------- */
.card-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.card h3 { font-size: var(--fz-h3); margin-bottom: .35rem; }
.card p { margin: 0; color: var(--text-muted); }
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 12px;
  background: var(--accent-soft); color: var(--accent);
}
.problem-grid .card-icon { background: var(--accent-soft); }

/* Steps */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0;
  display: grid; gap: 18px; grid-template-columns: 1fr; }
.step {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 22px 22px; box-shadow: var(--shadow-sm);
}
.step-num {
  position: absolute; top: -14px; left: 22px;
  width: 30px; height: 30px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-900); color: #fff; font-weight: 800; font-size: .9rem;
}
.step h3 { margin-top: 6px; font-size: var(--fz-h3); }
.step p { margin: 0; color: var(--text-muted); }
.step .card-icon { background: var(--accent-soft); color: var(--accent); }

/* ---------- Cost estimator ---------- */
.estimator {
  display: grid; gap: 24px;
  grid-template-columns: 1fr;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow-md);
}
.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.field-head label, .field > label { font-weight: 700; color: var(--text); }
.field-value { font-weight: 800; color: var(--accent); font-size: 1.05rem; }
.range {
  width: 100%; height: 8px; appearance: none; -webkit-appearance: none;
  background: var(--border-strong); border-radius: 999px; outline-offset: 4px; cursor: pointer;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 999px;
  background: var(--green-900); border: 3px solid var(--bg); box-shadow: var(--shadow-sm); cursor: pointer;
}
.range::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 999px; background: var(--green-900);
  border: 3px solid var(--bg); box-shadow: var(--shadow-sm); cursor: pointer;
}
.num-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.num-input, .lead-form select, .lead-form textarea, .lead-form input[type="text"], .lead-form input[type="tel"] {
  width: 100%; font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 12px 14px; min-height: 46px;
}
.num-input { width: auto; max-width: 180px; }
.field-help { font-size: .85rem; color: var(--text-muted); margin: 6px 0 0; }

.estimator-outputs {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
}
.line-items { margin: 0; display: grid; gap: 8px; }
.line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.line:last-of-type { border-bottom: 0; }
.line dt { color: var(--text-muted); font-weight: 600; }
.line dd { margin: 0; font-weight: 700; color: var(--text); }
.tier-tag {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--accent-soft); color: var(--accent); padding: .1rem .4rem; border-radius: 999px; margin-left: 6px;
}
.total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--border-strong);
}
.total-label { font-weight: 800; color: var(--text); }
.total-value { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); font-weight: 800; color: var(--accent); }
.disclaimer { font-size: .8rem; color: var(--text-muted); margin: 14px 0 0; }

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
.price-card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 22px; box-shadow: var(--shadow-sm);
}
.price-card-featured { border: 2px solid var(--green-900); box-shadow: var(--shadow-md); }
.price-tag {
  position: absolute; top: -13px; left: 22px;
  background: var(--green-900); color: #fff; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; padding: .25rem .6rem; border-radius: 999px;
}
.price-card h3 { font-size: var(--fz-h3); }
.price { font-size: 2rem; font-weight: 800; color: var(--text); margin: .2rem 0; display: inline-flex; align-items: baseline; gap: 2px; }
.price-curr { font-size: 1.1rem; }
.price-per { font-size: .95rem; font-weight: 600; color: var(--text-muted); }
.price-note { color: var(--text-muted); font-size: .9rem; margin: 0 0 14px; }
.price-custom { font-size: 1.6rem; }
.price-features { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.price-features li { position: relative; padding-left: 26px; color: var(--text-muted); }
.price-features li::before {
  content: ""; position: absolute; left: 2px; top: .45em; width: 14px; height: 8px;
  border-left: 2px solid var(--green-500); border-bottom: 2px solid var(--green-500);
  transform: rotate(-45deg);
}
.price-card .btn { margin-top: auto; }
.pricing-foot { text-align: center; color: var(--text-muted); font-size: .85rem; margin-top: 20px; }

/* ---------- FAQ accordion ---------- */
.accordion { display: grid; gap: 10px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.faq-item h3 { margin: 0; font-size: var(--fz-h3); }
.faq-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; min-height: 60px; padding: 16px 18px; text-align: left;
  background: transparent; border: 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--text);
}
.faq-trigger:hover { background: var(--accent-soft); }
.faq-chevron { flex: none; transition: transform .2s ease; color: var(--accent); }
.faq-trigger[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-panel { padding: 0 18px; }
.faq-panel > :last-child { padding-bottom: 18px; }
.faq-panel p { color: var(--text-muted); margin: 0 0 .8rem; }

/* ---------- Lead form ---------- */
.lead-form {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow-md); text-align: left;
}
.alert {
  background: color-mix(in srgb, #b00020 12%, var(--surface));
  border: 1px solid #b00020; color: #b00020; padding: 12px 14px; border-radius: var(--radius-sm);
  margin-bottom: 16px; font-weight: 600;
}
.form-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.field-full { grid-column: 1 / -1; }
.lead-form label { display: block; margin-bottom: 6px; font-weight: 700; color: var(--text); }
.checkbox { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; margin-bottom: 0; }
.checkbox input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--green-900); }
.checkbox span { font-weight: 500; color: var(--text); }
.req { color: #b00020; font-weight: 800; }
.lead-form input[aria-invalid="true"],
.lead-form textarea[aria-invalid="true"],
.lead-form select[aria-invalid="true"] {
  border-color: #b00020; box-shadow: 0 0 0 3px rgba(176, 0, 32, 0.15);
}
.field-error { color: #b00020; font-size: .82rem; font-weight: 600; margin: 6px 0 0; }
textarea { resize: vertical; min-height: 80px; }
.form-actions { margin-top: 20px; display: flex; justify-content: flex-start; }
.form-foot { font-size: .82rem; color: var(--text-muted); margin: 14px 0 0; }

/* Honeypot — visually hidden but present for bots */
.hp-field {
  position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-alt); border-top: 1px solid var(--border); margin-top: 40px; }
.footer-grid {
  display: grid; gap: 28px; grid-template-columns: 1fr;
  padding-block: 40px 28px;
}
.footer-brand .brand { color: var(--text); }
.footer-tag { color: var(--text-muted); margin: 10px 0 0; max-width: 38ch; }
.footer-nav ul, .footer-legal ul { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.footer-nav a, .footer-legal a { color: var(--text); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.footer-legal a:hover { color: var(--accent); }
.footer-legal { font-size: .9rem; }
.trademark { color: var(--text-muted); font-size: .82rem; margin: 8px 0; }
.copyright { color: var(--text-muted); font-size: .82rem; margin: 0; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 24px);
  background: var(--text); color: var(--bg);
  padding: 14px 20px; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  font-weight: 600; max-width: min(92vw, 440px); z-index: 300;
  opacity: 0; transition: transform .2s ease, opacity .2s ease;
}
.toast[data-visible="true"] { transform: translate(-50%, 0); opacity: 1; }
.toast a { color: inherit; text-decoration: underline; }
.toast:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

/* ---------- Scroll reveal (progressive enhancement) ---------- */
.reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in-view { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .problem-grid { grid-template-columns: repeat(2, 1fr); }
  .card-wide { grid-column: 1 / -1; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-grid { grid-template-areas: "brand brand brand" "nav legal legal"; }
  .footer-brand { grid-area: brand; }
  .footer-nav { grid-area: nav; }
  .footer-legal { grid-area: legal; }
}
@media (min-width: 880px) {
  .hero-grid { grid-template-columns: 1.05fr 1fr; }
  .hero-media { order: 0; }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .problem-grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .estimator { grid-template-columns: 1fr 1fr; align-items: start; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .price-card-featured { grid-row: span 1; }
}
@media (min-width: 1080px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
  .pricing-grid { grid-template-columns: repeat(4, 1fr); align-items: stretch; }
  .price-card-featured { transform: scale(1.02); }
}

/* Mobile nav: collapse the menu under the breakpoint */
@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--bg); border-bottom: 1px solid var(--border);
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
    box-shadow: var(--shadow-md);
  }
  .primary-nav.is-open { max-height: 80vh; overflow-y: auto; }
  /* When the header has condensed on scroll, keep the open menu flush with it
     instead of leaving a gap of page content between header and menu. */
  .site-header.is-condensed .primary-nav { top: calc(var(--header-h-condensed) + env(safe-area-inset-top)); }
  .nav-list {
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 16px;
  }
  .nav-list li { width: 100%; }
  .nav-list a { min-height: 52px; width: 100%; padding-block: 14px; }
  .nav-list .nav-cta { margin: 8px 0 0; }
}

/* Safe-area padding for notched devices */
@supports (padding: max(0px)) {
  /* viewport-fit=cover extends the page under the status bar / dynamic island.
     Reserve that strip at the top of the sticky header (filled by its bg) and
     fold it into --header-h so the mobile menu + scroll-margin-top stay aligned. */
  :root { --header-h: calc(76px + env(safe-area-inset-top)); }
  .site-header { padding-top: env(safe-area-inset-top); }
  .header-inner { padding-inline: max(20px, env(safe-area-inset-left)); }
  .container { padding-inline: max(20px, env(safe-area-inset-right)); }
  .toast { bottom: max(24px, env(safe-area-inset-bottom)); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Show all reveal content immediately — JS also short-circuits this. */
  .reveal { opacity: 1 !important; transform: none !important; }
}