/* ===========================================================================
   Redwood Pizzeria - Run 005
   Global shell stylesheet. Tokens = DESIGN.md v2 (the cross-section contract).
   Section bodies are scaffold placeholders, filled in Phase 4 (per-section loop).
   =========================================================================== */

/* ---- Design tokens (DESIGN.md v2) ---------------------------------------- */
:root {
  /* Brand core */
  --c-ink:        oklch(0.22 0.030 52);   /* Charred Oak */
  --c-canvas:     oklch(0.94 0.030 85);   /* Hearth Cream */
  --c-primary:    oklch(0.55 0.185 28);   /* Marinara Red */
  --c-terracotta: oklch(0.68 0.150 45);   /* Sunset Terracotta */
  --c-gold:       oklch(0.77 0.140 78);   /* Toasted Gold */
  --c-basil:      oklch(0.48 0.115 140);  /* Basil (deepened for AA on small dietary marks) */

  /* Warm neutrals */
  --c-paper:      oklch(0.97 0.015 85);
  --c-cream-sink: oklch(0.90 0.030 84);
  --c-line:       oklch(0.85 0.028 80);
  --c-ink-muted:  oklch(0.42 0.030 50);

  /* On-color text */
  --c-on-ink:     oklch(0.94 0.030 85);
  --c-on-primary: oklch(0.96 0.020 85);
  --c-primary-press: oklch(0.48 0.180 28);
  --c-primary-text:  oklch(0.50 0.185 28);  /* darker red for small text on cream (eyebrows, panel labels) -> AA 4.5:1 */

  /* Fonts */
  --font-display: "Patua One", "Bevan", Georgia, serif;
  --font-body: "Hanken Grotesk", "Figtree", system-ui, sans-serif;

  /* Type scale (fluid) */
  --t-display: clamp(2.75rem, 8vw, 6rem);
  --t-h1:      clamp(2.25rem, 5vw, 3.5rem);
  --t-h2:      clamp(1.75rem, 3.5vw, 2.5rem);
  --t-h3:      1.5rem;
  --t-body-lg: 1.1875rem;
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --t-caption: 0.8125rem;

  /* Spacing */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-6: 1.5rem;  --s-8: 2rem;   --s-12: 3rem;   --s-16: 4rem;
  --s-24: 6rem;   --s-32: 8rem;
  --section-y: clamp(4rem, 9vh, 8rem);
  --container: 72rem;
  --container-narrow: 42rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Radii + elevation */
  --r-sm: 6px; --r-md: 10px; --r-lg: 18px; --r-pill: 999px;
  --shadow-offset: 4px 4px 0 var(--c-ink);
  --shadow-soft: 0 6px 20px oklch(0.22 0.03 52 / 0.14);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms;

  --nav-h: 4.25rem;
}

/* ---- Reset / base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; }
p { max-width: 68ch; }
a { color: var(--c-primary); text-underline-offset: 0.15em; }

:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 2px; border-radius: 2px; }

/* ---- Layout helpers ------------------------------------------------------ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); }
.band-cream { background: var(--c-canvas); }
.band-sink  { background: var(--c-cream-sink); }
.band-dark  { background: var(--c-ink); color: var(--c-on-ink); }
.band-dark h1, .band-dark h2, .band-dark h3 { color: var(--c-on-ink); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-primary-text);
}

.skip-link {
  position: absolute; left: var(--s-4); top: -100%;
  background: var(--c-ink); color: var(--c-on-ink);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); z-index: 100;
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: var(--s-4); }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--font-body); font-weight: 700; font-size: var(--t-small);
  padding: var(--s-3) var(--s-6); border-radius: var(--r-pill);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.btn-primary { background: var(--c-primary); color: var(--c-on-primary); box-shadow: var(--shadow-offset); }
.btn-primary:hover { background: var(--c-primary-press); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--c-ink); }
.btn-primary:active { transform: translate(0, 0); box-shadow: 2px 2px 0 var(--c-ink); }
.btn-secondary { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn-secondary:hover { background: var(--c-cream-sink); }
.band-dark .btn-secondary { color: var(--c-on-ink); border-color: var(--c-on-ink); }
.band-dark .btn-secondary:hover { background: oklch(0.94 0.03 85 / 0.12); }

/* ---- Site header / nav --------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--c-canvas); border-bottom: 1px solid var(--c-line); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); height: var(--nav-h); }
.brand { font-family: var(--font-display); font-size: 1.6rem; color: var(--c-ink); text-decoration: none; white-space: nowrap; }
.nav-right { display: flex; align-items: center; gap: var(--s-8); }
.nav-links { display: flex; align-items: center; gap: var(--s-6); list-style: none; }
.nav-links a {
  font-family: var(--font-body); font-weight: 600; font-size: var(--t-small);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-ink); text-decoration: none;
}
.nav-links a:hover { color: var(--c-primary); }
.nav-call { font-size: var(--t-small); padding: var(--s-2) var(--s-4); }
.nav-toggle { display: none; }

/* ---- Section scaffold placeholders (REMOVED as each section is built) ---- */
.scaffold {
  min-height: 48vh; display: grid; place-content: center; text-align: center;
  gap: var(--s-2); color: var(--c-ink-muted);
}
#hero.scaffold, #visit.scaffold { min-height: 70vh; }
.scaffold__tag { font-family: var(--font-display); font-size: var(--t-h2); color: inherit; }
.scaffold__meta { font-size: var(--t-small); text-transform: uppercase; letter-spacing: 0.1em; }
.band-dark .scaffold { color: oklch(0.94 0.03 85 / 0.6); }

/* ---- Hero (Lane 1: single continuous illustration; transparent cream strip overlays the Story) */
.hero { position: relative; z-index: 2; }   /* on top; no bg so the transparent strip reveals what's behind */
.hero__art { display: block; width: 100%; height: auto; }   /* proportional so the baked cut aligns */
/* (No full-width scrim: it shaded the Bigfoot. Contrast comes from the baked dark band + a soft text-shadow on the copy only, below.) */
.hero__content {
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: 17%;            /* centered block in the dark band (matches mock: headline ~58%, cut ~84.5%) */
  margin-inline: auto; max-width: 54rem; padding-inline: 1.25rem;
  text-align: center;
}
.hero__title { color: var(--c-on-ink); font-size: clamp(1.7rem, 3.6vw, 2.9rem); line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
.hero__subtitle { color: var(--c-on-ink); font-size: var(--t-body-lg); max-width: none; margin: var(--s-2) auto 0; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4); margin-top: var(--s-6); }
.hero__trust { color: var(--c-on-ink); font-size: var(--t-small); letter-spacing: 0.03em; margin: var(--s-4) auto 0; opacity: 0.92; }
.hero__title, .hero__subtitle, .hero__trust { text-shadow: 0 2px 14px oklch(0.10 0.02 50 / 0.55); }  /* legibility insurance, copy only */
.btn-on-dark { background: transparent; color: var(--c-on-ink); border-color: var(--c-on-ink); }
.btn-on-dark:hover { background: oklch(0.94 0.03 85 / 0.14); transform: translate(-2px, -2px); }
#story { margin-top: 0; }   /* hero's transparent strip overlays this; cream is all one HTML color */

@media (max-width: 48rem) {
  /* mobile uses the portrait hero (2:3) via <picture>; centered text in its dark mid-zone */
  .hero__content { bottom: 25%; padding-inline: 1.25rem; }
  .hero__title { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  .hero__subtitle { font-size: var(--t-body); max-width: 40ch; }
}

/* ---- Story (Lane 0 text + Lane 3 full-bleed illustration) ---------------- */
.story { position: relative; z-index: 1; background: var(--c-canvas); }   /* beneath the hero; image underlaps up behind it (no overflow clip) */
.story__text {
  width: 50%;
  padding-block: clamp(0.75rem, 2vh, 1.5rem);   /* Story runs short so the square image's box is near-square (minimal side-crop) */
  padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); /* align to site content column */
  padding-right: clamp(1.5rem, 4vw, 4rem);
}
.story__title { font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin-top: var(--s-2); }
.story__text > p { margin-top: var(--s-3); max-width: 46ch; }
.story__chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); padding: 0; }
.story__chips li {
  font-family: var(--font-body); font-weight: 600; font-size: var(--t-caption);
  text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--c-paper); border: 1px solid var(--c-line); color: var(--c-ink);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
}
/* full-bleed right column, pulled UP to underlap behind the hero's transparent strip
   (the hero's opaque dark masks the overlap, so the visible top edge = the hero's baked cut line) */
.story__media { position: absolute; top: -10vw; right: 0; bottom: 0; width: 50%; }
.story__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 48rem) {
  .story__text { width: 100%; padding-inline: var(--gutter); padding-block: var(--section-y) var(--s-8); }
  .story__media { position: static; width: 100%; }   /* full-bleed band below the text */
  .story__media img { height: clamp(260px, 62vw, 440px); }
}

/* ---- Pizzas (Lane 3 illustrated pie cards) ------------------------------- */
.pizzas { text-align: center; }
.pizzas__title { font-size: var(--t-h1); margin-top: var(--s-2); }
.pizzas__lead { max-width: 54ch; margin: var(--s-4) auto 0; color: var(--c-ink-muted); font-size: var(--t-body-lg); }
.pie-grid { list-style: none; padding: 0; margin: var(--s-12) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8); }
.pie-card { background: var(--c-canvas); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-4) var(--s-4) var(--s-6); box-shadow: var(--shadow-soft); text-align: center; }
.pie-card__img { width: 100%; height: auto; border-radius: var(--r-md); }
.pie-card__name { font-size: var(--t-h3); margin-top: var(--s-4); display: flex; align-items: center; justify-content: center; gap: var(--s-2); flex-wrap: wrap; }
.pie-card__desc { font-size: var(--t-small); color: var(--c-ink-muted); margin: var(--s-2) auto 0; max-width: 34ch; }
.pizzas__byo { max-width: 60ch; margin: var(--s-12) auto 0; color: var(--c-ink-muted); font-size: var(--t-small); }
.pizzas__cta { margin-top: var(--s-8); max-width: none; } /* button-only: drop the 68ch text cap so text-align:center truly centers it */
.tag { font-family: var(--font-body); font-weight: 700; font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.06em; padding: 0.2em 0.6em; border-radius: var(--r-pill); }
.tag--veg { background: var(--c-basil); color: var(--c-on-ink); }
@media (max-width: 60rem) { .pie-grid { grid-template-columns: repeat(2, 1fr); max-width: 40rem; margin-inline: auto; } }
@media (max-width: 38rem) { .pie-grid { grid-template-columns: 1fr; } }
/* Pizzas side-border pattern (redwoods + pizza slices), per the mock */
#pizzas { position: relative; overflow: hidden; }
#pizzas::before, #pizzas::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  /* fill the margin+gutter only — stop at the cards so the pattern is never clipped under them */
  width: clamp(0px, calc((100vw - var(--container)) / 2 + var(--gutter)), 180px);
  background-image: url("images/pizzas-border.webp?v=5");
  background-repeat: repeat-y;
  /* tile spans the full strip width => exactly 3 motifs across; both edges fall in the tile's margin (clean, uncut icons) */
  background-size: 100% auto;
  opacity: 0.5;
}
/* fade the pattern from the outer (screen) edge toward the content => dense outside, dissolves to cream at the inner edge (matches mock) */
#pizzas::before {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 60%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0%, #000 60%, transparent 100%);
}
#pizzas::after {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 60%, transparent 100%);
          mask-image: linear-gradient(to left, #000 0%, #000 60%, transparent 100%);
}
#pizzas > .container { position: relative; z-index: 1; }
@media (max-width: 75rem) { #pizzas::before, #pizzas::after { display: none; } }

/* ---- Menu (Lane 0: hairline rows grouped by subhead) -------------------- */
.menu__title { font-size: var(--t-h1); margin-top: var(--s-2); }
.menu__lead { max-width: 70ch; margin: var(--s-4) 0 var(--s-6); color: var(--c-ink-muted); font-size: var(--t-body); }
.menu__legend { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: center; margin: 0 0 var(--s-16); font-size: var(--t-small); color: var(--c-ink-muted); }
.legend-item { display: inline-flex; align-items: center; gap: var(--s-2); }
.tag--vegan { background: var(--c-basil); color: var(--c-on-ink); }
.tag--gf { background: var(--c-gold); color: var(--c-ink); }
.menu-org { font-size: var(--t-caption); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-basil); }

/* two-column flow; groups stay intact */
.menu-cols { columns: 2; column-gap: var(--s-16); }
.menu-group { break-inside: avoid; margin: 0 0 var(--s-12); }
.menu-group--wide { margin: 0 0 var(--s-12); }   /* full-width blocks (BYO, toppings) */
.menu-group__title {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4);
  font-family: var(--font-display); font-size: var(--t-h3); color: var(--c-primary);
  margin: 0 0 var(--s-2); padding-bottom: var(--s-2); border-bottom: 2px solid var(--c-line);
}
.menu-group__price { font-family: var(--font-body); font-weight: 600; font-size: var(--t-small); color: var(--c-ink-muted); }
.menu-group__note { margin: 0 0 var(--s-3); font-size: var(--t-small); color: var(--c-ink-muted); }

.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-item { padding: var(--s-3) 0; border-bottom: 1px solid var(--c-line); }
.menu-item:last-child { border-bottom: none; }
.menu-item__head { display: flex; align-items: baseline; gap: var(--s-2); }
.menu-item__name { font-weight: 700; color: var(--c-ink); }
.menu-item__name .tag, .menu-item__name .menu-org { margin-left: 0.35em; }
.leader { flex: 1 1 auto; min-width: var(--s-8); align-self: stretch; border-bottom: 2px dotted var(--c-line); transform: translateY(-0.32em); }
.menu-item__price { flex: 0 0 auto; font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-item__desc { margin: var(--s-1) 0 0; max-width: 60ch; font-size: var(--t-small); color: var(--c-ink-muted); }
.menu-list--pies .menu-item__name { display: inline-block; }

.menu__cta { max-width: none; text-align: center; margin: var(--s-16) 0 0; }
.menu__footnotes { list-style: none; margin: var(--s-12) 0 0; padding: var(--s-8) 0 0; border-top: 1px solid var(--c-line); columns: 2; column-gap: var(--s-16); font-size: var(--t-caption); color: var(--c-ink-muted); }
.menu__footnotes li { margin: 0 0 var(--s-2); break-inside: avoid; }
@media (max-width: 48rem) {
  .menu-cols, .menu__footnotes { columns: 1; }
}

/* ---- Visit (Lane 1: full-bleed dusk storefront + info panel) ------------ */
.visit { position: relative; isolation: isolate; display: flex; align-items: center; overflow: hidden; min-height: clamp(34rem, 50vw, 46rem); background: var(--c-ink); }
.visit__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% center; z-index: -1; }
.visit__inner { width: 100%; display: flex; justify-content: flex-end; padding-block: var(--section-y); }
.visit__panel {
  width: min(27rem, 100%); background: var(--c-canvas); color: var(--c-ink);
  border: 2px solid var(--c-ink); border-radius: var(--r-lg); box-shadow: var(--shadow-offset);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
}
.visit__title { font-size: var(--t-h2); margin: var(--s-1) 0 var(--s-3); }
.visit__body { font-size: var(--t-small); color: var(--c-ink-muted); margin: 0 0 var(--s-6); }
.visit__facts { margin: 0 0 var(--s-6); display: grid; gap: var(--s-3); }
.visit__fact dt { font-family: var(--font-body); font-weight: 700; font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-primary-text); margin-bottom: 0.15em; }
.visit__fact dd { margin: 0; font-size: var(--t-small); line-height: 1.5; }
.visit__fact dd a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.visit__fact dd a:hover { color: var(--c-primary); }
.visit__muted { color: var(--c-ink-muted); }
.visit__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); }
.visit__detail { margin: 0; font-size: var(--t-caption); color: var(--c-ink-muted); }

@media (max-width: 48rem) {
  .visit { display: block; min-height: 0; background: var(--c-canvas); }
  .visit__art { position: static; width: 100%; height: 40vh; z-index: auto; }
  .visit__inner { justify-content: stretch; padding-block: var(--s-12); }
  .visit__panel { width: 100%; border: none; box-shadow: none; padding-inline: 0; border-radius: 0; background: transparent; }
}

/* ---- Footer (Lane 0 contact columns + Lane 3 mascot & badges) ----------- */
.footer { background: var(--c-ink); color: var(--c-on-ink); --footer-pad: clamp(2.25rem, 4.5vh, 3.5rem); }
/* padding-bottom is 0 so the marks group (mascot) sits flush on the bottom-bar divider line; columns re-add the gap via margin-bottom */
.footer__inner { display: flex; flex-wrap: nowrap; gap: var(--s-8) var(--s-12); align-items: flex-end; justify-content: space-between; padding-block: var(--footer-pad) 0; }
.footer__cols { flex: 1 1 auto; min-width: 0; margin-bottom: var(--footer-pad); display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-12); }
.footer__wordmark { font-family: var(--font-display); font-size: var(--t-h3); color: var(--c-on-ink); }
.footer__tagline { margin-top: var(--s-1); font-size: var(--t-small); letter-spacing: 0.06em; color: var(--c-gold); }
.footer__social { margin-top: var(--s-3); font-size: var(--t-small); line-height: 1.8; }
.footer__social a { display: block; color: var(--c-on-ink); text-decoration: none; }
.footer__social a:hover { color: var(--c-gold); text-decoration: underline; text-underline-offset: 2px; }
.footer__col { font-size: var(--t-small); line-height: 1.6; }
.footer__col p { margin: 0 0 var(--s-2); color: oklch(0.94 0.03 85 / 0.82); }
.footer .footer__h { font-family: var(--font-body); font-weight: 700; font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-gold); margin: 0 0 var(--s-3); }
.footer__col a { color: var(--c-on-ink); text-decoration: none; }
.footer__col a:hover { color: var(--c-gold); text-decoration: underline; text-underline-offset: 2px; }
.footer__muted { color: oklch(0.94 0.03 85 / 0.55); }

.footer__marks { flex: 0 0 auto; display: flex; align-items: flex-end; gap: var(--s-6); }
.footer__mascot { height: clamp(104px, 11vw, 132px); width: auto; }
.footer__badges { list-style: none; display: flex; gap: var(--s-4); margin: 0 0 var(--footer-pad); padding: 0; } /* lift badges back up to the content baseline; mascot stays on the divider */
.footer__badges img { width: clamp(64px, 7vw, 80px); height: auto; }

.footer__bar { border-top: 1px solid oklch(0.94 0.03 85 / 0.15); }
.footer__bar-inner { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-8); justify-content: space-between; padding-block: var(--s-6); }
.footer__bar-inner p { margin: 0; font-size: var(--t-caption); color: oklch(0.94 0.03 85 / 0.6); }

@media (max-width: 48rem) {
  .footer__inner { flex-wrap: wrap; gap: var(--s-12); align-items: flex-start; }
  .footer__marks { width: 100%; justify-content: flex-start; }
}

/* ---- Responsive nav ------------------------------------------------------ */
@media (max-width: 48rem) {
  .nav-toggle {
    display: inline-flex; flex-direction: column; gap: 5px; justify-content: center;
    width: 44px; height: 44px; padding: 10px; background: transparent; border: 0; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2.5px; width: 100%; background: var(--c-ink); border-radius: 2px; transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .nav-right {
    position: absolute; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: var(--s-4);
    background: var(--c-canvas); border-bottom: 1px solid var(--c-line);
    padding: var(--s-6) var(--gutter); transform: translateY(-130%);
    transition: transform var(--dur) var(--ease-out); box-shadow: var(--shadow-soft);
  }
  .nav-right[data-open="true"] { transform: translateY(0); }
  .nav-links { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .nav-call { align-self: flex-start; }
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}