/* Curls Done Wright — Salon Editorial (locked 2026-08-01)
   Tokens from brand-kit/design.md LOCKED DIRECTION. Motion contract: brand-kit/interactions.md. */

/* ---------- fonts (self-hosted, §6b) ---------- */
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-roman-var.woff2') format('woff2');
  font-weight:300 500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-italic-var.woff2') format('woff2');
  font-weight:300 400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Hanken Grotesk';
  src:url('../fonts/hanken-grotesk-var.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Caveat';
  src:url('../fonts/caveat-600-latin.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
/* metric-matched fallbacks so any swap is invisible (§6b.4) */
@font-face{
  font-family:'Fraunces Fallback';
  src:local('Georgia');
  size-adjust:104%;ascent-override:92%;descent-override:24%;line-gap-override:0%;
}
@font-face{
  font-family:'Hanken Grotesk Fallback';
  src:local('Arial');
  size-adjust:99%;ascent-override:98%;descent-override:26%;line-gap-override:0%;
}

/* ---------- tokens ---------- */
:root{
  --bg:#F6EDE7;
  --surface:#FFFFFF;
  --ink:#241A17;
  --ink-soft:#6E6058;
  --accent:#9A4A2C;
  --accent-deep:#7C3B22;
  --accent-on:#FBF5F0;
  --radius:4px;
  --hairline:color-mix(in srgb, var(--ink) 12%, transparent);
  --hairline-strong:color-mix(in srgb, var(--ink) 22%, transparent);
  --sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:40px;--sp-5:64px;--sp-6:96px;
  --font-display:'Fraunces','Fraunces Fallback',serif;
  --font-body:'Hanken Grotesk','Hanken Grotesk Fallback',system-ui,sans-serif;
  --ease-settle:cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-out-lux:cubic-bezier(0.165,0.84,0.44,1);
  --dur-hover:.3s;--dur-settle:.8s;--dur-hero:1s;
  --nav-h:72px;
}

/* ---------- reset + base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:clip}
body{
  font-family:var(--font-body);font-size:16px;line-height:1.65;
  background:var(--bg);color:var(--ink);
  font-synthesis:none;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
  /* W9: short pages (blog shell) bottom the footer out instead of leaving a
     background strip under it. No-op on pages taller than the viewport;
     footer + sections are padding-driven so no margin-collapse delta. */
  min-height:100svh;display:flex;flex-direction:column;
}
main{flex:1 0 auto}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{text-wrap:balance}
/* P-005 extension: heading-adjacent short text balances too */
.hero__sub,.scrolly-sub,.lede,.sec-head .lede,.subhero .lede,.quote blockquote,.glass-card blockquote{text-wrap:balance}
/* long-form prose prefers pretty, never balance (2.10) */
.prose p,.prose li,.blog-prose p{text-wrap:pretty}
.serif{font-family:var(--font-display)}
.container{max-width:1160px;margin-inline:auto;padding-inline:clamp(22px,5vw,64px)}

/* motion system (interactions.md; visible-by-default without JS) */
html.js-motion .reveal{opacity:0;transform:translateY(24px)}
html.js-motion .reveal.is-visible{opacity:1;transform:none;transition:opacity var(--dur-settle) var(--ease-settle),transform var(--dur-settle) var(--ease-settle)}
/* entrance choreography is CSS-driven at parse time (perf pass: LCP guard — the old
   deferred-JS trigger held the subhero lede invisible until main.js ran, registering
   LCP at ~2s lab. Same stagger (100ms + i*150ms), same curve, same duration, same
   travel — only the trigger moved from JS to CSS so the LCP text paints with FCP. */
@keyframes enter-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes enter-in-l{from{opacity:.35;transform:translateY(22px)}to{opacity:1;transform:none}}
.enter{animation:enter-in var(--dur-hero) var(--ease-settle) both;animation-delay:calc(100ms + var(--i,0)*150ms)}
.hero h1 .l.enter{animation-name:enter-in-l}
@media (prefers-reduced-motion:reduce){
  .enter{animation:none !important}
  html.js-motion .reveal{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ---------- buttons ---------- */
/* 8.6: button labels are conversion text — 14px floor (was 12px), tracking eased to compensate */
.btn{
  display:inline-block;font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  padding:16px 28px;border-radius:var(--radius);text-decoration:none;text-align:center;
  border:1px solid transparent;cursor:pointer;
  transition:transform var(--dur-hover) var(--ease-out-lux),background var(--dur-hover) var(--ease-out-lux),color var(--dur-hover) var(--ease-out-lux),border-color var(--dur-hover) var(--ease-out-lux),filter var(--dur-hover) var(--ease-out-lux);
  touch-action:manipulation;
}
/* 3.6/3.7: primary buttons carry a subtle same-hue gradient (never flat-fill) + a deep
   soft shadow that sharpens on hover. Kept inside the accent family per design.md restraint. */
.btn--solid{
  background:linear-gradient(180deg, #A85735 0%, var(--accent) 55%, #8A4226 100%);
  color:var(--accent-on);
  box-shadow:0 16px 28px -16px color-mix(in srgb, var(--accent) 58%, transparent);
  transition:transform var(--dur-hover) var(--ease-out-lux),filter var(--dur-hover) var(--ease-out-lux),box-shadow var(--dur-hover) var(--ease-out-lux);
}
.btn--light{
  background:linear-gradient(180deg, #FFFFFF 0%, #F7EDE5 100%);
  color:var(--accent);
  box-shadow:0 16px 28px -16px rgba(36,26,23,.55);
  transition:transform var(--dur-hover) var(--ease-out-lux),box-shadow var(--dur-hover) var(--ease-out-lux);
}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--hairline-strong)}
.btn--ghost-inv{background:transparent;color:var(--accent-on);border-color:color-mix(in srgb, var(--accent-on) 55%, transparent)}
@media (hover:hover){
  .btn--solid:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 14px 24px -12px color-mix(in srgb, var(--accent) 78%, transparent)}
  .btn--light:hover{transform:translateY(-2px);box-shadow:0 14px 24px -12px rgba(36,26,23,.6)}
  .btn--ghost:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-on)}
  .btn--ghost-inv:hover{background:var(--accent-on);color:var(--accent)}
}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* 3.4: universal focus rings — 2px accent, 4px offset, on every focusable element */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:4px;
}
/* on accent / dark grounds the accent ring disappears — swap to the light ink */
.hero__panel :focus-visible,.position :focus-visible,.closer :focus-visible,
.subhero :focus-visible,.site-footer :focus-visible,.sticky-cta :focus-visible,
.site-header:not(.is-scrolled):not(.is-open) :focus-visible{outline-color:var(--accent-on)}

.eyebrow{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--accent);
}

/* ---------- header (P-003 transparent → solid) ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;
  padding-top:env(safe-area-inset-top);
  transition:background var(--dur-hover) ease,box-shadow var(--dur-hover) ease;
  background:transparent;
}
.site-header.is-scrolled,.site-header.is-open{
  background:var(--surface);
  box-shadow:0 1px 0 var(--hairline),0 8px 24px -18px rgba(36,26,23,.35);
}
.site-header .bar{
  width:100%;max-width:1400px;margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding-inline:clamp(18px,3.5vw,44px);
}
/* W22 (§12b): the customer's own brush-script lockup replaces the generated curl glyph +
   letter-spaced caps. The curl glyph is retired from the nav and survives as the favicon.
   Two ground variants (light for the transparent-over-photo header, ink for every solid or
   scrimmed ground) sit in ONE grid cell and cross-fade on opacity, so the swap rides the
   header's existing 0.3s transition with no JS, no flash and no reflow. */
.wordmark{display:block;text-decoration:none;line-height:0;
  transition:opacity var(--dur-hover) ease;
  padding:10px 8px;margin:-10px -8px} /* 8.4: 44px tap target without moving the bar layout */
@media (hover:hover){.wordmark:hover{opacity:.82}}
.wordmark__lock{display:grid;width:clamp(150px,17vw,180px)}
.wordmark .wm{grid-area:1/1;display:block;transition:opacity var(--dur-hover) ease}
.wordmark .wm img{display:block;width:100%;height:auto}
/* P-002: the light lockup sits over the hero photograph while the bar is transparent. A single
   soft shadow only — the ground itself is handled by the hero's top scrim (see .hero__visual).
   Tight 1px halos and hard keylines were both measured and both muddied the brush strokes. */
.wordmark .wm--light img{filter:drop-shadow(0 1px 6px rgba(36,26,23,.42))}
.wordmark .wm--ink{opacity:0}
.site-header.is-scrolled .wordmark .wm--ink,
.site-header.is-open .wordmark .wm--ink,
.site-header.over-method:not(.is-open) .wordmark .wm--ink{opacity:1}
.site-header.is-scrolled .wordmark .wm--light,
.site-header.is-open .wordmark .wm--light,
.site-header.over-method:not(.is-open) .wordmark .wm--light{opacity:0}
.nav-toggle span{box-shadow:0 1px 4px rgba(36,26,23,.3)} /* P-002: hamburger over photo on mobile */
.site-header.is-scrolled .nav-toggle span,.site-header.is-open .nav-toggle span{box-shadow:none}
.site-nav{display:flex;align-items:center;gap:26px}
.site-nav a{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;font-weight:600;
  color:color-mix(in srgb, var(--accent-on) 82%, transparent);
  text-shadow:0 1px 8px rgba(36,26,23,.25);
  transition:color var(--dur-hover) ease;
}
.site-header.is-scrolled .site-nav a,.site-header.is-open .site-nav a{color:var(--ink-soft);text-shadow:none}
@media (hover:hover){
  .site-nav a:hover{color:var(--accent-on)}
  .site-header.is-scrolled .site-nav a:hover,.site-header.is-open .site-nav a:hover{color:var(--ink)}
}
.site-header .btn{padding:12px 20px}
/* over the transparent hero the book button is a light hairline frame; solid accent once scrolled */
.header-book{display:inline-block;background:transparent;color:var(--accent-on);border-color:color-mix(in srgb, var(--accent-on) 55%, transparent)}
@media (hover:hover){.header-book:hover{background:var(--accent-on);color:var(--accent)}}
.site-header.is-scrolled .header-book,.site-header.is-open .header-book{background:linear-gradient(180deg, #A85735 0%, var(--accent) 55%, #8A4226 100%);color:var(--accent-on);border-color:transparent}
@media (hover:hover){.site-header.is-scrolled .header-book:hover{filter:brightness(1.07)}}
@media (max-width:1080px){.site-nav,.header-book{display:none}}

/* W21: while #method occupies the viewport the header goes TRANSPARENT with the
   on-light ink treatment, regardless of scroll position (engine-toggled via an
   IntersectionObserver on the section; the drawer-open state still wins). The
   existing background/color transitions carry the handoff at both section edges. */
/* Transparent over the method canvas (operator: no opaque bar in this section), but the
   scrub runs dark curls directly under the ink nav at points in the timeline. A soft
   top-down light scrim keeps every nav item legible without reading as a bar: it has no
   edge, no shadow, and fades to nothing well above the section's text beats. */
.site-header.over-method:not(.is-open){
  background:linear-gradient(to bottom,
    rgba(246,237,231,.82) 0%, rgba(246,237,231,.74) 38%, rgba(246,237,231,.52) 62%,
    rgba(246,237,231,.26) 82%, rgba(246,237,231,0) 100%);
  box-shadow:none;
}
/* W22: the wordmark's ink/light cross-fade for this state lives with the other .wordmark rules */
.site-header.over-method:not(.is-open) .site-nav a{color:var(--ink-soft);text-shadow:none}
@media (hover:hover){.site-header.over-method:not(.is-open) .site-nav a:hover{color:var(--ink)}}
.site-header.over-method:not(.is-open) .header-book{background:transparent;color:var(--ink);border-color:var(--hairline-strong)}
@media (hover:hover){.site-header.over-method:not(.is-open) .header-book:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-on);filter:none}}
.site-header.over-method:not(.is-open) .nav-toggle span{background:var(--ink);box-shadow:none}
.site-header.over-method:not(.is-open) :focus-visible{outline-color:var(--accent)}

/* hamburger */
.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;padding:11px;margin-right:-11px; /* 8.4: 22px bars + 11px padding = 44px wide */
  touch-action:manipulation;
}
.nav-toggle span{
  display:block;width:22px;height:2px;background:var(--accent-on);margin:5px 0;
  transition:transform var(--dur-hover) ease,opacity var(--dur-hover) ease,background var(--dur-hover) ease;
}
.site-header.is-scrolled .nav-toggle span,.site-header.is-open .nav-toggle span{background:var(--ink)}
@media (max-width:1080px){.nav-toggle{display:block}}
.site-header.is-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.is-open .nav-toggle span:nth-child(2){opacity:0}
.site-header.is-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* drawer (§7a: top-level fixed scroller) */
.drawer{
  position:fixed;left:0;right:0;bottom:0;top:var(--drawer-top,var(--nav-h));z-index:55;
  background:var(--surface);
  overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;
  transform:translateX(105%);transition:transform .35s var(--ease-settle);
  padding:28px 26px calc(28px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:4px;
}
.drawer.is-open{transform:none}
@media (prefers-reduced-motion:reduce){.drawer{transition:none}}
.drawer a.link{
  font-family:var(--font-display);font-weight:400;font-size:1.5rem;text-decoration:none;color:var(--ink);
  padding:14px 2px;border-bottom:1px solid var(--hairline);
  transition:color var(--dur-hover) ease;
}
@media (hover:hover){.drawer a.link:hover{color:var(--accent)}}
.drawer .drawer-ctas{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:26px}
.drawer .meta{margin-top:22px;font-size:12px;color:var(--ink-soft);line-height:1.8}

/* ---------- W46 loader: white wordmark write-on → S-curve → fly to nav ----------
   The exact white wordmark PNG is complete under an SVG mask; pen-walk strokes
   traced from the ink skeleton (Zhang-Suen) reveal it in writing order (0.05%
   coverage error). Then the long terracotta-section S-curve draws beneath in
   cream, the background lets go, and the mark FLIPs up into its nav slot. */
.loader{position:fixed;inset:0;z-index:1000;background:var(--accent);display:none;align-items:center;justify-content:center;flex-direction:column;gap:0;transition:background .5s ease .1s}
html.js-motion .loader.armed,html.pre-loader .loader{display:flex}
.loader-art{width:min(86vw,560px);aspect-ratio:380/67;line-height:0;flex:0 0 auto;will-change:transform}
.loader-art svg{width:100%;height:100%;display:block;overflow:visible}
/* dash offsets driven by main.js rAF — CSS keyframes on paths inside <mask> are flaky */
.loader-art .wm-reveal{stroke-dasharray:1;stroke-dashoffset:1}
/* W50: S-curve tucked tight under the letters */
.loader-scurve{width:min(46vw,320px);margin-top:-10px;color:var(--accent-on);opacity:.92}
.loader-scurve svg{width:100%;height:auto;display:block;overflow:visible}
.loader-scurve-path{stroke-dasharray:1;stroke-dashoffset:1}
.loader.swoosh .loader-scurve-path{stroke-dashoffset:0;transition:stroke-dashoffset .7s cubic-bezier(.33,.09,.24,1)}
.loader.fly{background:transparent;pointer-events:none}
.loader.fly .loader-scurve{opacity:0;transition:opacity .3s ease}
.loader.done{display:none!important}
/* nav wordmark stays hidden until the flying mark lands in its slot */
html.pre-loader .site-header .wordmark__lock{opacity:0}
@media (prefers-reduced-motion:reduce){.loader{display:none!important}}

/* ---------- hero (split editorial; photo still per §12d) ----------
   W18: restored verbatim from the Wave 16 state (operator-directed) after the
   W17 scrolly-as-hero experiment; the scrolly moved down-page (see below).
   W48d: cinematic home hero + milky nav reverted per operator. */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;min-height:100dvh}
.hero__visual{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden}
.hero__visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 30%}
.hero__visual::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(36,26,23,.46) 0px, rgba(36,26,23,.42) 58px, rgba(36,26,23,.24) 112px, rgba(36,26,23,0) 196px),
    linear-gradient(180deg, transparent 52%, rgba(36,26,23,.34) 100%)}
.hero__panel{
  background:var(--accent);color:var(--accent-on);
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--nav-h) + 40px) clamp(28px,4.5vw,72px) clamp(56px,8vh,96px);
  position:relative;isolation:isolate;
}
.hero__panel::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 74% 52% at 50% 36%, color-mix(in srgb, #FFFFFF 9%, transparent), transparent 72%);
}
.hero__inner{max-width:640px;text-align:center}
.hero__eyebrow{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;opacity:.8;margin-bottom:26px}
.hero h1{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(3rem,6vw,5.6rem);line-height:1.06;letter-spacing:.005em;
}
.hero h1 .l{display:inline-block}
.hero h1 em{font-style:italic;font-weight:300}
.hero__sub{margin:24px auto 34px;max-width:46ch;line-height:1.7;opacity:.88}
.hero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero__scrollcue{
  margin-top:46px;display:inline-flex;width:46px;height:46px;border-radius:50%;
  border:1px solid color-mix(in srgb, var(--accent-on) 45%, transparent);
  align-items:center;justify-content:center;font-size:15px;opacity:.85;text-decoration:none;color:var(--accent-on);
  transition:background var(--dur-hover) var(--ease-out-lux),opacity var(--dur-hover) var(--ease-out-lux);
  animation:cue-pulse 3.2s var(--ease-settle) 2.4s infinite;
}
@keyframes cue-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent-on) 30%, transparent)}
  60%{box-shadow:0 0 0 10px transparent}
  100%{box-shadow:0 0 0 10px transparent}
}
@media (hover:hover){.hero__scrollcue:hover{background:color-mix(in srgb, var(--accent-on) 12%, transparent);opacity:1}}
@media (prefers-reduced-motion:reduce){.hero__scrollcue{animation:none}}
.hero__scrollcue svg{width:15px;height:15px}

.glass-card{
  position:absolute;z-index:1;left:clamp(18px,3vw,38px);bottom:clamp(18px,4.5vh,44px);
  max-width:min(300px,calc(100% - 36px));margin:0;
  background:color-mix(in srgb, #241A17 40%, transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb, var(--accent-on) 26%, transparent);
  border-radius:var(--radius);color:var(--accent-on);padding:16px 20px;
  text-shadow:0 1px 6px rgba(36,26,23,.35);
}
.glass-card blockquote{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:1.02rem;line-height:1.5}
.glass-card figcaption{margin-top:8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.82}
@media (max-width:880px){
  .hero{grid-template-columns:1fr}
  .hero__visual{min-height:54vh;min-height:54dvh}
  .hero__visual img{object-position:62% 22%}
  .hero__panel{min-height:auto;padding-top:52px}
}

/* ---------- W18: method scrolly — the curl-by-curl story, rehomed ----------
   The W17 two-act canvas scrub, now a mid-page brand-narrative section after the
   proof strip, MERGED into ONE sticky stage: one canvas, one 290-frame virtual
   timeline (ladder a 1-145, then ladder b reversed as 146-290), seam dissolved
   by a globalAlpha crossfade in the engine (assets/js/scrolly.js). The DEFAULT
   DOM/CSS state below is the dignified static three-panel narrative (before
   still + stacked beats + after still, all copy visible) — the no-JS AND
   reduced-motion fallback. The engine adds html.scrolly-on and the scrub layout
   takes over. P-009: ancestors use overflow-x:clip (never hidden), so
   position:sticky survives. The payoff line is display-styled text, NOT a
   heading — the page's one h1 lives in the hero. */
.scrolly{position:relative}
/* W21: the standalone intro band between the marquee and the stage is gone — the
   section header lives ON the stage. Static state: a sec-head-styled block at the
   top of the narrative column (order 0, real h2 in DOM order). Scrub state: an
   engine-faded overlay above her head at p=0 (see html.scrolly-on below). */
.scrolly__head{order:0;text-align:center;max-width:840px;margin-inline:auto;width:100%;
  padding:clamp(84px,13vh,150px) clamp(22px,5vw,64px) clamp(40px,6vh,72px)}
.scrolly__head h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.1rem,4vw,3.4rem);line-height:1.14;margin-top:14px;
}
.scrolly__head h2 em{font-style:italic;color:var(--accent)}
.scrolly__stage{display:flex;flex-direction:column;background:var(--bg)}
.scrolly__media{position:relative;margin:0}
.scrolly__media img{width:100%;height:auto;display:block}
.scrolly__canvas{display:none}
.scrolly__cue{display:none}
.scrolly__beats{display:contents}
.beat{width:100%;max-width:820px;margin-inline:auto;text-align:center;
  padding:clamp(48px,8vh,84px) clamp(22px,5vw,64px)}
/* static narrative order: head → before still → intro pair → steps → resolution →
   after still → W21 side-by-side compare → payoff */
.scrolly__media--a{order:1}
.beat--intro-l{order:2}
.beat--intro-r{order:3}
.beat--s1{order:4}
.beat--why{order:5}
.beat--s2{order:6}
.beat--s3{order:7}
.beat--res{order:8}
.scrolly__media--b{order:9}
.scrolly__finale{order:10}
.beat--payoff{order:11}
/* the intro pair reads as one thought split across two lines — tighten the gap */
.beat--intro-l{padding-bottom:clamp(18px,3vh,32px)}
.beat--intro-r{padding-top:0}
/* W21 finale — STATIC (no-JS / reduced-motion) state: an in-flow side-by-side
   before/after under the narrative, split by the 1px hairline motif. No captions;
   the before-r ghost panel is scrub-only. */
.scrolly__finale{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;
  background:var(--hairline-strong);
}
.finale__panel{position:relative;overflow:hidden}
.finale__panel picture{display:contents}
.finale__panel img{display:block;width:100%;height:auto;object-fit:cover;aspect-ratio:3/4}
.finale__panel--before-r{display:none}
.finale__divider{display:none}
/* W21 step eyebrows: the card-numeral language — small Fraunces italic, accent */
.scrolly-step{display:block;font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:15px;letter-spacing:.03em;color:var(--accent);margin-bottom:12px}
/* scrub mode: small italic over live imagery steps to accent-deep for contrast */
html.scrolly-on .scrolly-step{color:var(--accent-deep)}
.scrolly-line{font-family:var(--font-display);font-weight:300;font-size:clamp(1.7rem,3.2vw,2.7rem);line-height:1.22;text-wrap:balance}
.scrolly-sub{margin:14px auto 0;line-height:1.7;color:var(--ink-soft);max-width:46ch}
/* the payoff echoes the hero thesis at the hero h1's visual scale — intentionally a <p> */
.scrolly-payoff{font-family:var(--font-display);font-weight:300;font-size:clamp(2.7rem,5vw,4.8rem);line-height:1.08;letter-spacing:.005em;text-wrap:balance}
.scrolly-payoff em{font-style:italic;font-weight:300}
.scrolly-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.scrolly-cta .btn{text-shadow:none}
/* static mode: the finale CTAs read as the site's standard light-ground pair */
html:not(.scrolly-on) .scrolly-cta .btn--light{
  background:linear-gradient(180deg, #A85735 0%, var(--accent) 55%, #8A4226 100%);
  color:var(--accent-on);
  box-shadow:0 16px 28px -16px color-mix(in srgb, var(--accent) 58%, transparent);
}
.btn--scrolly-ghost{background:transparent;color:var(--ink);border-color:var(--hairline-strong)}
@media (hover:hover){.btn--scrolly-ghost:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-on)}}

/* ----- scrub enhancement (html.scrolly-on; engine-driven) ----- */
html.scrolly-on .scrolly__track{height:1520vh} /* ONE sticky run — no stacked-sticky boundary can exist.
   W20: 900→1170vh bridge. W25: →1350vh intro. W34: →1520vh step dwell.
   W41: back from W38's 2100vh hold-plateau track — continuous scrub again. */
html.scrolly-on .scrolly__stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:block;
  background:#E0C8C0; /* ≈ frame-1 field edge — pre-frame underlay (W39) */
}
html.scrolly-on .scrolly__media{position:absolute;inset:0}
html.scrolly-on .scrolly__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the after-still is the RESOLVED state, wrong at p=0 — hidden in scrub mode; the
   canvas paints the whole 290-frame timeline. The before-poster (= frame a/1)
   stays visible under the canvas as the section's poster until the first draw. */
html.scrolly-on .scrolly__media--b{opacity:0}
html.scrolly-on .scrolly__canvas{
  display:block;position:absolute;inset:0;width:100%;height:100%;
  opacity:0;transition:opacity .5s var(--ease-settle);
}
html.scrolly-on .scrolly__canvas.is-live{opacity:1}
/* W31 finale — W21 left/right split ease, no before ghost-in, no 3rd head:
   canvas holds the finished after until the split. before-l (opaque ground +
   full opacity) pans 0%→-25% while after pans -50%→-25%; divider rides the
   seam. Settled = two full heads side by side. before-r unused. Reversible.
   z-index 4 sits under the beats (5). */
html.scrolly-on .scrolly__finale{
  display:block;position:absolute;inset:0;z-index:4;margin:0;background:none;
  pointer-events:none;visibility:hidden;
}
html.scrolly-on .scrolly__finale.is-active{visibility:visible}
html.scrolly-on .finale__panel{position:absolute;top:0;bottom:0;overflow:hidden}
html.scrolly-on .finale__panel--before-l{left:0;right:50%;background:#E5D0C9} /* opaque ground so the after canvas can't sheen through */
html.scrolly-on .finale__panel--before-r{display:block;left:50%;right:0}
html.scrolly-on .finale__panel--after{left:50%;right:0;background:#E5D0C9}
html.scrolly-on .finale__shift{
  position:absolute;top:0;bottom:0;left:0;width:200%;
  will-change:transform,opacity,filter;transform:translateX(-50%);
}
html.scrolly-on .finale__panel--before-l .finale__shift{opacity:0;transform:translateX(0%)}
html.scrolly-on .finale__panel--before-r .finale__shift{opacity:0;transform:translateX(-50%)}
html.scrolly-on .finale__shift img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto;
}
html.scrolly-on .finale__divider{
  display:block;position:absolute;left:50%;top:0;bottom:0;width:1px;z-index:3;
  background:rgba(36,26,23,.30);opacity:0;
}
html.scrolly-on .scrolly__beats{display:block}
html.scrolly-on .beat{
  position:absolute;left:0;right:0;top:50%;margin-inline:auto;z-index:5;
  padding:0 clamp(22px,5vw,64px);max-width:min(680px,94vw);
  opacity:0;transform:translateY(-50%);transform-origin:center center;
  pointer-events:none;will-change:opacity,transform,filter;
}
/* W21: the section header as a stage overlay — open field above her head at p=0
   (the engine eases in canvas headroom while it shows), engine-faded, reversible.
   Display scale steps down from the static sec-head so it sits inside the field. */
html.scrolly-on .scrolly__head{
  position:absolute;left:50%;top:calc(var(--nav-h) + 14px);transform:translateX(-50%);
  z-index:5;width:100%;max-width:min(780px,94vw);margin:0;
  padding:0 clamp(22px,5vw,64px);text-align:center;
  opacity:1;will-change:opacity;pointer-events:none;
}
html.scrolly-on .scrolly__head h2{font-size:clamp(1.8rem,3vw,2.5rem);margin-top:10px}
/* over the live field the accent tones step to accent-deep so the small eyebrow
   and the italic em hold ≥4.5:1 against the brightest field pixels (measured) */
html.scrolly-on .scrolly__head .eyebrow{color:var(--accent-deep)}
html.scrolly-on .scrolly__head h2 em{color:var(--accent-deep)}
html.scrolly-on .beat--s1{max-width:min(560px,94vw)}
html.scrolly-on .beat--why{max-width:min(620px,94vw);top:46%}
html.scrolly-on .beat--s2{max-width:min(700px,94vw);top:62%} /* the falling curls own the
  top half of every bridge frame across the window — the reset line rides the clean lower field */
html.scrolly-on .beat--s3{max-width:min(480px,94vw);top:42%} /* narrow measure keeps the
  line ends inside the clean center channel between the two floating curl clusters */
html.scrolly-on .beat--res{max-width:min(560px,94vw)}
html.scrolly-on .beat--payoff.is-on{pointer-events:auto}
/* ---- W21 TRUE VIGNETTES: every scrim is a soft elliptical radial glow centered
   on the text block — alpha peaks ~.55 at center and falls to 0 through a
   multi-stop (gaussian-ish) curve BEFORE the pseudo-element's edge, so there is
   no straight edge anywhere. The box extends ~64% of the text height vertically
   and ~30% of its width horizontally beyond the text, keeping glyph-edge alpha
   high enough to hold the measured per-beat contrast. Light glow + ink text over
   light-field beats; ink glow + accent-on where the beat sits over hair mass. */
html.scrolly-on .beat::before{
  content:"";position:absolute;inset:-64% -30%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(246,237,231,.55) 0%, rgba(246,237,231,.53) 24%, rgba(246,237,231,.46) 44%,
    rgba(246,237,231,.34) 60%, rgba(246,237,231,.20) 74%, rgba(246,237,231,.09) 85%,
    rgba(246,237,231,.03) 93%, rgba(246,237,231,0) 100%);
}
/* Tone mapping per what each beat sits over (sRGB compositing is per-channel, so
   a .55 light veil lifts near-black hair to only ~.19 luminance — dark-ground
   beats MUST take the ink glow + accent-on pairing, light-field beats the light
   glow + ink pairing; every combination re-measured worst-case this wave): s1
   (burst crown) + res (assembled hair) ride the ink glow; why/s2/s3 ride light. */
html.scrolly-on .beat--s1::before,
html.scrolly-on .beat--res::before{
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(36,26,23,.55) 0%, rgba(36,26,23,.53) 24%, rgba(36,26,23,.46) 44%,
    rgba(36,26,23,.34) 60%, rgba(36,26,23,.20) 74%, rgba(36,26,23,.09) 85%,
    rgba(36,26,23,.03) 93%, rgba(36,26,23,0) 100%);
}
/* W49: res glow tightened — wide enough for the line, no foggy stadium behind it. */
html.scrolly-on .beat--res::before{
  inset:-28% -10%;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(36,26,23,.70) 0%, rgba(36,26,23,.58) 34%, rgba(36,26,23,.32) 62%,
    rgba(36,26,23,.12) 82%, rgba(36,26,23,0) 100%);
}
html.scrolly-on .beat--why,
html.scrolly-on .beat--s2,
html.scrolly-on .beat--s3{color:var(--ink);text-shadow:0 1px 18px rgba(251,245,240,.65),0 0 2px rgba(251,245,240,.5)}
html.scrolly-on .beat--s1,
html.scrolly-on .beat--res{color:var(--accent-on);text-shadow:0 1px 4px rgba(36,26,23,.45),0 2px 22px rgba(36,26,23,.4)}
html.scrolly-on .beat--s1 .scrolly-sub{color:var(--accent-on);opacity:.9}
html.scrolly-on .beat--s1 .scrolly-step{color:#E8B69C} /* lifted accent for the ink glow */
/* W21 payoff: NO glass, no vignette — legibility is layered per-letter text-shadow
   (tight 1px ink rim + soft wide low-alpha halo) tuned against the split imagery
   (hair mass fills the center of both settled crops). CTAs keep their surfaces. */
html.scrolly-on .beat--payoff{color:var(--accent-on);
  text-shadow:0 0 1px rgba(36,26,23,.95),0 1px 2px rgba(36,26,23,.8),
    0 2px 8px rgba(36,26,23,.7),0 3px 18px rgba(36,26,23,.6),0 0 36px rgba(36,26,23,.45)}
html.scrolly-on .beat--payoff::before{content:none}
/* the ghost CTA earns its own quiet surface now that the payoff glass is gone —
   the hero glass-card language, so its label holds over the light before-crop field */
html.scrolly-on .btn--scrolly-ghost{color:var(--accent-on);border-color:color-mix(in srgb, var(--accent-on) 55%, transparent);
  background:color-mix(in srgb, #241A17 38%, transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html.scrolly-on .beat--payoff :focus-visible{outline-color:var(--accent-on)}
/* Over the split photography a translucent ghost button reads as a grey smudge (caught
   on the finale capture, not by a contrast probe: it passed contrast and still looked
   cheap). In the payoff only, the secondary CTA takes an opaque ink surface so both
   buttons read as deliberate objects against the imagery. */
html.scrolly-on .beat--payoff .btn--scrolly-ghost{
  background:var(--ink);border-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;text-shadow:none;
}
@media (hover:hover){
  html.scrolly-on .beat--payoff .btn--scrolly-ghost:hover{background:var(--accent);border-color:transparent}
}
@media (min-width:1000px){
  /* wide viewports: the intro pair rides the field columns beside her head —
     left-aligned thesis, right-aligned companion arriving a breath later. Narrow
     measures + reduced glow reach (-26% horizontal) so the vignettes stay clear
     of the hair mass at 1440 and 1920 (probe-measured clearance). */
  html.scrolly-on .beat--intro-l,
  html.scrolly-on .beat--intro-r{
    margin:0;padding:0;max-width:min(20vw,360px);
    color:var(--ink);text-shadow:0 1px 18px rgba(251,245,240,.65),0 0 2px rgba(251,245,240,.5);
  }
  html.scrolly-on .beat--intro-l{left:clamp(24px,4vw,96px);right:auto;text-align:left;top:44%;
    max-width:min(28vw,440px)}
  html.scrolly-on .beat--intro-r{right:clamp(24px,4vw,96px);left:auto;text-align:right;top:58%;
    max-width:min(28vw,440px)}
  /* W24: intro lines read larger — held on the calm first frame before the scrub starts */
  html.scrolly-on .beat--intro-l .scrolly-line,
  html.scrolly-on .beat--intro-r .scrolly-line{font-size:clamp(1.95rem,2.9vw,2.85rem);line-height:1.18}
  /* W40: no vignette on the intro pair — they sit on the open field; the glow
     + clip-path roll-up read as a harsh milky rectangle (operator screenshot). */
  html.scrolly-on .beat--intro-l::before,
  html.scrolly-on .beat--intro-r::before{content:none}
}
@media (max-width:999px){
  /* center crop puts the hair mass behind the intro pair — white type + ink glow
     (W42; dark ink was unreadable on curls). Soft vignette OK here: no clip-path. */
  html.scrolly-on .beat--intro-l,
  html.scrolly-on .beat--intro-r{
    color:var(--accent-on);
    text-shadow:0 0 1px rgba(36,26,23,.95),0 1px 2px rgba(36,26,23,.8),
      0 2px 10px rgba(36,26,23,.65),0 4px 22px rgba(36,26,23,.45);
  }
  html.scrolly-on .beat--intro-l{top:38%}
  html.scrolly-on .beat--intro-r{top:58%}
  html.scrolly-on .beat--intro-l .scrolly-line,
  html.scrolly-on .beat--intro-r .scrolly-line{font-size:clamp(1.85rem,5.8vw,2.45rem);line-height:1.18}
  html.scrolly-on .beat--intro-l::before,
  html.scrolly-on .beat--intro-r::before{
    content:"";inset:-70% -36%;
    background:radial-gradient(50% 50% at 50% 50%,
      rgba(36,26,23,.62) 0%, rgba(36,26,23,.55) 28%, rgba(36,26,23,.38) 50%,
      rgba(36,26,23,.18) 70%, rgba(36,26,23,.06) 85%, rgba(36,26,23,0) 100%);
  }
}
@media (max-width:719px){
  html.scrolly-on .scrolly__track{height:1140vh} /* shorter mobile scrub, m ladders
    (W25: 1000vh; W34: 1140vh; W41: restored after W38 plateau track) */
  /* W50b: Step 02 rides too low on phone — center it in the viewport (desktop stays 62%) */
  html.scrolly-on .beat--s2{top:50%}
}
/* scroll cue (scrub only) — the site's circle-chevron, engine-faded on first scrub;
   own keyframes: cue-pulse belongs to the hero scrollcue (accent-on ring) */
html.scrolly-on .scrolly__cue{
  display:flex;position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:6;
  width:46px;height:46px;border-radius:50%;align-items:center;justify-content:center;
  border:1px solid color-mix(in srgb, var(--ink) 35%, transparent);color:var(--ink);
  pointer-events:none;animation:cue-pulse-ink 3.2s var(--ease-settle) 2.4s infinite;
}
html.scrolly-on .scrolly__cue svg{width:15px;height:15px}
@keyframes cue-pulse-ink{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--ink) 22%, transparent)}
  60%{box-shadow:0 0 0 10px transparent}
  100%{box-shadow:0 0 0 10px transparent}
}
@media (prefers-reduced-motion:reduce){.scrolly__cue{animation:none}}

/* ---------- proof strip (3.5: trust marquee — uppercase, accent dots, pauses on hover) ---------- */
.strip{border-block:1px solid var(--hairline);background:color-mix(in srgb, var(--surface) 45%, var(--bg))}
/* Home: strip sits on the method stage — drop the bottom rule so the field
   reads continuous under the marquee (W39; the 1px hairline read as a seam). */
/* Home proof strip sits on the method field — same ground as the stage so the
   marquee butts the curl-by-curl canvas with no cream/blush hairline (W39). */
.strip:has(+ #method){
  border-bottom:none;
  background:#E0C8C0;
  position:relative;z-index:2;
}
.strip:has(+ #method) + #method .scrolly__stage{margin-top:-1px}
.strip .marquee{display:flex;overflow:hidden}
.strip .marquee__set{
  display:flex;align-items:center;flex:none;
  gap:clamp(20px,3.2vw,44px);padding:18px clamp(10px,1.6vw,22px);
  animation:strip-scroll 34s linear infinite;
}
@keyframes strip-scroll{to{transform:translateX(-100%)}}
@media (hover:hover){.strip .marquee:hover .marquee__set{animation-play-state:paused}}
.strip span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink);white-space:nowrap}
.strip .dot{width:4px;height:4px;border-radius:50%;background:var(--accent);flex:none;padding:0}
@media (prefers-reduced-motion:reduce){
  /* static fallback: one centered wrapping row, no animation, duplicate set hidden */
  .strip .marquee{justify-content:center}
  .strip .marquee__set{animation:none;flex:initial;flex-wrap:wrap;justify-content:center;padding-inline:clamp(22px,5vw,64px)}
  .strip .marquee__set[aria-hidden="true"]{display:none}
  .strip .dot--seam{display:none}
  .strip span{white-space:normal}
}

/* ---------- sections ---------- */
/* W16 premium uplift: block padding + head margin opened up (exemplar air) */
section.block{padding:clamp(84px,13vh,150px) 0}
.sec-head{text-align:center;max-width:840px;margin:0 auto clamp(64px,9vh,92px)}
.sec-head h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.1rem,4vw,3.4rem);line-height:1.14;margin-top:14px;
}
.sec-head h2 em,.accent-em{font-style:italic;color:var(--accent)}
.sec-head .lede{margin:16px auto 0;max-width:60ch;color:var(--ink-soft)}

/* curl-path accent stroke (design.md signature move #2): a 3A S-curve that draws on scroll.
   Used exactly 3 times site-wide (index menu, about philosophy, curl-education) so it stays
   a signature, not a crutch. No-JS / reduced-motion: stroke fully drawn from frame 1. */
.curl-divider{display:flex;justify-content:center;color:var(--accent);margin-top:18px}
.curl-divider svg{width:148px;height:26px;overflow:visible}
html.js-motion .curl-divider .curl-path{stroke-dasharray:1;stroke-dashoffset:1}
html.js-motion .curl-divider.is-visible .curl-path,
html.js-motion .is-visible .curl-divider .curl-path{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s ease-out .25s}
@media (prefers-reduced-motion:reduce){
  html.js-motion .curl-divider .curl-path{stroke-dashoffset:0 !important;transition:none !important}
}

/* inline content links: underline draws in (motion contract §4) over a resting hairline */
.f-card p a,.prose p a,.prose li a,.two-col p a,.action-card p a,.menu-includes a,.faq-item .a a{
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background-image:linear-gradient(var(--accent), var(--accent));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;
  transition:background-size var(--dur-hover) var(--ease-out-lux);
}
@media (hover:hover){
  .f-card p a:hover,.prose p a:hover,.prose li a:hover,.two-col p a:hover,
  .action-card p a:hover,.menu-includes a:hover,.faq-item .a a:hover{background-size:100% 1px}
}

/* mechanism cards */
.f-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
@media (max-width:880px){.f-grid{grid-template-columns:1fr}}
.f-card{
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:var(--sp-4) var(--sp-3);
  transition:transform var(--dur-hover) var(--ease-out-lux),box-shadow var(--dur-hover) var(--ease-out-lux);
  position:relative;overflow:hidden;
}
/* 3.2: gradient top-bar draws in on card hover (this site's card ornament is the italic
   accent numeral, not an icon — the numeral deepens in step with the bar) */
.f-card::before,.action-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, var(--accent), #C97D5B);
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease-out-lux);
}
@media (hover:hover){
  .f-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px color-mix(in srgb, var(--ink) 28%, transparent)}
  .f-card:hover::before,.action-card:hover::before{transform:scaleX(1)}
  .f-card:hover .num{color:var(--accent-deep)}
}
.f-card .num{font-family:var(--font-display);font-style:italic;font-size:15px;color:var(--accent);transition:color var(--dur-hover) var(--ease-out-lux)}
.f-card h3{font-family:var(--font-display);font-weight:500;font-size:1.32rem;margin:12px 0 10px}
.f-card p{font-size:1rem;color:var(--ink-soft)}

/* positioning band (W16: the homepage's oversized italic-serif pull moment) */
.position{background:var(--accent);color:var(--accent-on)}
.position .inner{max-width:920px;margin-inline:auto;text-align:center;padding:clamp(84px,13vh,150px) clamp(22px,5vw,64px)}
.position .eyebrow{color:var(--accent-on);opacity:.75}
.position h2{font-family:var(--font-display);font-weight:300;font-size:clamp(2.4rem,4.6vw,3.8rem);line-height:1.12;margin:14px 0 22px}
.position h2 em{font-style:italic}
.position p{max-width:62ch;margin:0 auto var(--sp-4);opacity:.88;line-height:1.75}

/* menu */
.menu-wrap{max-width:780px;margin-inline:auto}
/* W50: sticky left-rail menu (222 / Cleveland Heath pattern) */
.menu-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.menu-main{min-width:0;display:grid;gap:var(--sp-3)}
.menu-subnav{position:sticky;top:calc(var(--nav-h) + 24px);align-self:start}
.menu-subnav-inner{display:flex;flex-direction:column;gap:2px;padding-right:14px;border-right:1px solid var(--hairline)}
.menu-subnav a{display:block;padding:10px 12px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--ink-soft);text-decoration:none;border-left:2px solid transparent;
  border-radius:3px 0 0 3px;transition:color .15s ease,background .15s ease,border-color .15s ease}
@media (hover:hover){.menu-subnav a:hover{color:var(--ink);background:color-mix(in srgb, var(--accent) 6%, transparent)}}
.menu-subnav a.is-active{color:var(--accent);border-left-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 8%, transparent);font-weight:700}
.menu-card{scroll-margin-top:calc(var(--nav-h) + 28px)}
@media (max-width:880px){
  .menu-layout{grid-template-columns:minmax(0,1fr);gap:20px}
  .menu-subnav{position:sticky;top:var(--nav-h);z-index:40;margin:0 calc(-1 * clamp(18px,4vw,40px));
    background:color-mix(in srgb, var(--bg) 92%, transparent);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--hairline)}
  .menu-subnav-inner{flex-direction:row;gap:4px;padding:0 clamp(18px,4vw,40px);border-right:none;
    overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
  .menu-subnav-inner::-webkit-scrollbar{display:none}
  .menu-subnav a{flex:0 0 auto;padding:12px 12px 10px;border-left:none;border-bottom:2px solid transparent;
    border-radius:0;white-space:nowrap;scroll-snap-align:start;background:transparent}
  .menu-subnav a.is-active{background:transparent;border-left-color:transparent;border-bottom-color:var(--accent)}
  .menu-card{scroll-margin-top:calc(var(--nav-h) + 52px)}
}
.menu-card{
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:clamp(36px,5.5vw,64px) clamp(22px,4.5vw,56px);
}
.menu-card .eyebrow{display:block;text-align:center}
.menu-card h3{font-family:var(--font-display);font-weight:400;font-size:1.8rem;text-align:center;margin:12px 0 6px}
.menu-card .note{text-align:center;color:var(--ink-soft);font-size:1rem;margin-bottom:30px}
.menu-row{display:flex;align-items:baseline;gap:14px;padding:17px 2px;border-bottom:1px solid var(--hairline)}
.menu-row:first-of-type{border-top:1px solid var(--hairline)}
.menu-row .svc{font-weight:500}
.menu-row .dots{flex:1;border-bottom:1px dotted var(--hairline-strong);transform:translateY(-4px);min-width:24px}
.menu-row .price{font-family:var(--font-display);font-style:italic;font-size:1.05rem;color:var(--accent);white-space:nowrap}
.menu-includes{margin-top:26px;text-align:center;color:var(--ink-soft);font-size:1rem;max-width:54ch;margin-inline:auto}
.menu-footnote{text-align:center;padding-inline:clamp(8px,2vw,24px)}
.menu-footnote .menu-includes{margin-top:8px;max-width:52ch}
.menu-confirmed{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);text-align:center;margin-top:16px}
.menu-cta{text-align:center;margin-top:32px}

/* 8.3: menu dot-leaders draw in as the card reveals — the menu "sets itself" (services +
   both service details; scoped under .subhero so index's menu section, which already owns
   the curl-divider draw, is excluded). clip-path only: zero layout cost, fire-once with the
   reveal system. No-JS: never clipped. Reduced-motion: fully drawn from frame 1. */
html.js-motion .subhero ~ section .menu-card .dots{clip-path:inset(-6px 100% -6px 0)}
html.js-motion .subhero ~ section .menu-card.is-visible .dots,
html.js-motion .subhero ~ section .is-visible .menu-card .dots{
  clip-path:inset(-6px 0% -6px 0);
  transition:clip-path .9s var(--ease-settle) var(--dot-delay,.15s);
}
/* rows cascade like a letterpress menu; adjacency chains restart per row group, which is the point */
.menu-row + .menu-row .dots{--dot-delay:.25s}
.menu-row + .menu-row + .menu-row .dots{--dot-delay:.35s}
.menu-row + .menu-row + .menu-row + .menu-row .dots{--dot-delay:.45s}
.menu-row + .menu-row + .menu-row + .menu-row + .menu-row .dots{--dot-delay:.55s}
@media (prefers-reduced-motion:reduce){
  html.js-motion .subhero ~ section .menu-card .dots{clip-path:none !important;transition:none !important}
}

/* transformations gallery */
/* 7.0c (§7b-2): 6-track grid = 3 visual columns, so a partial final row centers
   instead of left-hugging with dead space (fires on /work's 8-item gallery). */
.gal-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-3)}
.gal-grid > *{grid-column:span 2}
.gal-grid > :nth-child(3n+1):nth-last-child(2){grid-column:2 / span 2} /* 2 orphans: center the pair */
.gal-grid > :nth-child(3n+1):last-child{grid-column:3 / span 2}        /* 1 orphan: center it */
@media (max-width:880px){
  .gal-grid{grid-template-columns:repeat(4,1fr)} /* 2 visual columns */
  .gal-grid > :nth-child(3n+1):nth-last-child(2),
  .gal-grid > :nth-child(3n+1):last-child{grid-column:span 2}
  .gal-grid > :nth-child(2n+1):last-child{grid-column:2 / span 2}      /* odd count at 2-up: center the last */
}
@media (max-width:540px){
  .gal-grid{grid-template-columns:1fr}
  .gal-grid > :nth-child(n):nth-last-child(n){grid-column:auto}
}
.gal-item{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--hairline);background:var(--surface);cursor:zoom-in;
  box-shadow:0 12px 26px -20px color-mix(in srgb, var(--ink) 22%, transparent); /* 4.6: rest-state glow so gallery frames sit with the framed editorial images */
  transition:transform var(--dur-hover) var(--ease-out-lux),box-shadow var(--dur-hover) var(--ease-out-lux)}
/* 3.1: lift + inner image zoom, capped at 1.02 per the motion contract (never past 1.02) */
@media (hover:hover){
  .gal-item:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px color-mix(in srgb, var(--ink) 30%, transparent)}
  .gal-item:hover img{transform:scale(1.02)}
  .gal-item:hover figcaption{color:var(--accent);opacity:1} /* 4.9: caption warms + fades up in step with the zoom (visible at rest — info is never hover-gated) */
}
.gal-item img{aspect-ratio:1/1;object-fit:cover;width:100%;transition:transform .5s var(--ease-out-lux)}
.gal-item figcaption{
  padding:12px 14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  border-top:1px solid var(--hairline);opacity:.85;
  transition:color var(--dur-hover) var(--ease-out-lux),opacity var(--dur-hover) var(--ease-out-lux);
}
.gal-cta{text-align:center;margin-top:var(--sp-4)}
/* 8.3: /work-only gentle vertical stagger (design.md signature move #1 — organic flow that
   mirrors curl patterns). margin, not transform, so the reveal system's transforms are untouched. */
@media (min-width:881px){.gal-grid--stagger > :nth-child(3n+2){margin-top:22px}}
@media (min-width:541px) and (max-width:880px){.gal-grid--stagger > :nth-child(2n){margin-top:18px}}

/* ---------- W46 lightbox: portfolio carousel with zoom ---------- */
.lightbox{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,40px);color:var(--accent-on)}
.lightbox.open{display:flex}
.lightbox__backdrop{position:absolute;inset:0;background:rgba(36,26,23,.88);backdrop-filter:blur(8px)}
.lightbox__stage{position:relative;z-index:1;margin:0;max-width:min(1100px,100%);
  display:flex;flex-direction:column;align-items:center;gap:14px}
.lightbox__frame{max-width:100%;max-height:min(78vh,820px);overflow:hidden;
  border-radius:var(--radius);background:#1a1210;line-height:0;touch-action:none}
.lightbox__img{display:block;max-width:min(96vw,1100px);max-height:min(78vh,820px);
  width:auto;height:auto;object-fit:contain;transform-origin:center center;
  transition:transform .12s ease-out;user-select:none;-webkit-user-drag:none}
.lightbox__cap{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(251,245,240,.78);text-align:center;max-width:48ch}
.lightbox__meta{position:absolute;bottom:clamp(16px,3vh,28px);left:50%;transform:translateX(-50%);
  z-index:2;font-size:12px;letter-spacing:.16em;color:rgba(251,245,240,.7)}
.lightbox__btn{position:absolute;z-index:2;appearance:none;border:1px solid rgba(251,245,240,.28);
  background:rgba(36,26,23,.45);color:var(--accent-on);width:44px;height:44px;border-radius:999px;
  display:grid;place-items:center;cursor:pointer;font-size:22px;line-height:1;
  transition:background .2s ease,border-color .2s ease}
.lightbox__btn:hover{background:rgba(154,74,44,.85);border-color:transparent}
.lightbox__btn:focus-visible{outline:2px solid var(--accent-on);outline-offset:3px}
.lightbox__close{top:clamp(14px,3vh,28px);right:clamp(14px,3vw,28px);font-size:28px}
.lightbox__prev{left:clamp(10px,2.5vw,28px);top:50%;transform:translateY(-50%)}
.lightbox__next{right:clamp(10px,2.5vw,28px);top:50%;transform:translateY(-50%)}
html.lightbox-open,html.lightbox-open body{overflow:hidden}
@media (max-width:640px){
  .lightbox__prev,.lightbox__next{top:auto;bottom:clamp(56px,10vh,88px);transform:none}
  .lightbox__prev{left:clamp(16px,6vw,28px)}
  .lightbox__next{right:clamp(16px,6vw,28px)}
}
@media (prefers-reduced-motion:reduce){.lightbox__img{transition:none}}

/* pull quote */
/* W22: about-page brand moment. Hairline above, a lot of air, mark alone — signage cadence. */
.brand-mark{border-top:1px solid var(--hairline);padding:clamp(72px,11vh,116px) 0}
.brand-mark img{display:block;width:min(300px,74vw);height:auto;margin-inline:auto;opacity:.88}

.quote{border-block:1px solid var(--hairline)}
.quote .inner{max-width:820px;margin-inline:auto;text-align:center;padding:clamp(84px,12vh,140px) clamp(22px,5vw,64px)}
.quote .rule{width:56px;height:1px;background:var(--accent);margin:0 auto 38px}
.quote blockquote{
  font-family:var(--font-display);font-style:italic;font-weight:300;
  font-size:clamp(1.28rem,2.5vw,1.8rem);line-height:1.48;
}
.quote figcaption{margin-top:26px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}

/* founder */
.founder .grid{
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;
  max-width:980px;margin-inline:auto;
}
@media (max-width:820px){.founder .grid{grid-template-columns:1fr;text-align:center}}
.founder img{border-radius:var(--radius);border:1px solid var(--hairline);width:100%}
.founder h2{font-family:var(--font-display);font-weight:400;font-size:clamp(2.1rem,3.6vw,3rem);margin:12px 0 16px}
.founder h2 em{font-style:italic;color:var(--accent)}
.founder p{color:var(--ink-soft);max-width:52ch}
@media (max-width:820px){.founder p{margin-inline:auto}}
.founder .meta{margin:18px 0 26px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);line-height:2}

/* FAQ (§7b centered column, left-aligned content) */
.faq-list{max-width:780px;margin-inline:auto}
.faq-item{border-bottom:1px solid var(--hairline)}
.faq-item:first-of-type{border-top:1px solid var(--hairline)}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 2px;font-weight:600;font-size:1.02rem;
  touch-action:manipulation;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary span:first-child{text-wrap:balance} /* P-005: never split "St. Louis" without touching locked question bytes */
/* audit fix wave: question text is now an h3 (question-phrased heading) — must render byte-identical to the old summary text.
   Inherits balance from the global h1,h2,h3 rule; everything else matches .faq-item summary exactly. */
.faq-item summary h3{font-family:var(--font-body);font-weight:600;font-size:1.02rem;display:inline;margin:0}
/* 2.4: circular accent toggle, CSS-drawn + that morphs to − (never the default triangle) */
.faq-item summary .chev{
  flex:none;position:relative;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--accent);
  transition:background var(--dur-hover) var(--ease-out-lux);
}
.faq-item summary .chev::before,.faq-item summary .chev::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--accent);border-radius:1px;
  transition:transform var(--dur-hover) var(--ease-out-lux),background var(--dur-hover) var(--ease-out-lux);
}
.faq-item summary .chev::before{width:12px;height:1.5px;transform:translate(-50%,-50%)}
.faq-item summary .chev::after{width:1.5px;height:12px;transform:translate(-50%,-50%)}
.faq-item[open] summary .chev{background:var(--accent)}
.faq-item[open] summary .chev::before{background:var(--accent-on)}
.faq-item[open] summary .chev::after{transform:translate(-50%,-50%) scaleY(0)}
@media (hover:hover){.faq-item summary:hover .chev{background:color-mix(in srgb, var(--accent) 10%, transparent)}
  .faq-item[open] summary:hover .chev{background:var(--accent)}}
.faq-item .a{padding:0 2px 22px;color:var(--ink-soft);max-width:68ch}

/* premium stat row (2.3): display-face numerals, accent bar above, small label */
.stat-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);
  max-width:880px;margin:0 auto;text-align:center;
}
@media (max-width:720px){.stat-row{grid-template-columns:1fr;gap:var(--sp-4)}}
.stat-bar{width:34px;height:2px;background:var(--accent);margin:0 auto 16px}
.stat-num{font-family:var(--font-display);font-weight:300;font-size:clamp(2.5rem,4.4vw,3.3rem);line-height:1;color:var(--ink)}
.stat-label{margin-top:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);text-wrap:balance}

/* closer */
.closer{background:var(--accent);color:var(--accent-on)}
.closer .inner{max-width:800px;margin-inline:auto;text-align:center;padding:clamp(88px,13vh,152px) clamp(22px,5vw,64px)}
.closer h2{font-family:var(--font-display);font-weight:300;font-size:clamp(2.2rem,4.2vw,3.5rem);line-height:1.1;margin-bottom:18px}
.closer h2 em{font-style:italic}
.closer p{opacity:.85;margin-bottom:34px}
.closer .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.closer .nap{margin-top:40px;font-size:12px;letter-spacing:.1em;opacity:.75;line-height:2}

/* footer — W50: stacked explore, icon socials, legal in subfooter */
.site-footer{background:#1B1310;color:#CFC4BC;padding:44px 0 36px}
.site-footer .cols{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.7fr) minmax(0,.6fr);
  gap:clamp(28px,4vw,56px);align-items:flex-start}
@media (max-width:720px){.site-footer .cols{grid-template-columns:1fr;gap:28px}}
.site-footer .fm{display:block;line-height:0;text-decoration:none;transition:opacity var(--dur-hover) ease;
  padding:12px 4px;margin:-12px -4px}
@media (hover:hover){.site-footer .fm:hover{opacity:.82}}
.site-footer .fm picture{display:block}
.site-footer .fm img{display:block;width:min(215px,60vw);height:auto}
.site-footer .ft{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:#C97D5B;margin:18px 0 8px}
.site-footer p,.site-footer a{font-size:14px;line-height:1.9}
.site-footer .footer-explore nav{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.site-footer .footer-explore nav a{color:#CFC4BC;text-decoration:none;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  display:inline-block;padding:10px 2px;margin:-4px -2px;line-height:1.4}
@media (hover:hover){.site-footer .footer-explore nav a:hover{color:#fff}}
.site-footer .social-row{display:flex;gap:10px;align-items:center}
.site-footer .social-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  color:#CFC4BC;border:1px solid rgba(255,255,255,.14);border-radius:50%;text-decoration:none;
  transition:color var(--dur-hover) ease,border-color var(--dur-hover) ease,background var(--dur-hover) ease}
@media (hover:hover){.site-footer .social-icon:hover{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06)}}
.site-footer .legal{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font-size:12px;color:#9C9089}
.site-footer .legal-links{display:inline-flex;align-items:center;gap:10px}
.site-footer .legal-links .dot{opacity:.55}
.site-footer .legal a{display:inline-block;padding:13px 3px;margin:-13px -3px;color:#9C9089;text-decoration:none}
@media (hover:hover){.site-footer .legal a:hover{color:#fff}}
.site-footer p a{padding-block:13px;margin-block:-13px}
.site-footer .legal a.lcd{color:var(--accent-on);font-weight:600;text-decoration:underline}
.site-footer .legal a.lcd:hover{color:#fff}
@media (max-width:720px){
  .site-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* ---------- interior pages ---------- */
.subhero{background:var(--accent);color:var(--accent-on);text-align:center;
  padding:calc(var(--nav-h) + clamp(56px,9vh,96px)) clamp(22px,5vw,64px) clamp(56px,9vh,88px);
  position:relative;isolation:isolate}
/* 3.3: same radial halo behind interior-page hero H1s (solid-accent fallback only) */
.subhero:not(.subhero--cine)::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 68% 62% at 50% 46%, color-mix(in srgb, #FFFFFF 9%, transparent), transparent 72%);
}
.subhero .eyebrow{color:var(--accent-on);opacity:.78}
.subhero h1{font-family:var(--font-display);font-weight:300;font-size:clamp(2.6rem,5vw,4.6rem);line-height:1.08;margin-top:14px}
.subhero h1 em{font-style:italic;font-weight:300}
.subhero .lede{max-width:56ch;margin:20px auto 0;opacity:.87;line-height:1.7}
.subhero .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* W46: full-bleed cinematic interior heroes — hi-res atmosphere photograph
   dissolving into the page cream; the type sits inside the dissolve so the band
   melts into the body with no seam. Soft nav band up top, zero black crush.
   Header chrome stays LIGHT over the photo (W48d: milky ink nav reverted). */
.subhero--cine{background:var(--bg);color:var(--ink);display:flex;align-items:flex-end;
  min-height:clamp(520px,68vh,760px);padding:0;text-align:left;overflow:hidden}
.subhero--cine .subhero__media{position:absolute;inset:0;z-index:-1}
.subhero--cine .subhero__media picture{position:absolute;inset:0;display:block}
.subhero--cine .subhero__media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 40%}
/* W50 gold standard (from Work + ~2% white top): subtle cream blend at the bar,
   soft ink cradle under type, cream only at the page seam — no milky fog. */
.subhero--cine .subhero__media::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(246,237,231,.14) 0%, rgba(246,237,231,.06) 58px, transparent 118px)}
.subhero--cine .subhero__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, transparent 42%, rgba(36,26,23,.32) 62%, rgba(36,26,23,.48) 74%, rgba(36,26,23,.28) 86%, transparent 94%),
    linear-gradient(180deg, transparent 88%, color-mix(in srgb, var(--bg) 50%, transparent) 95%, var(--bg) 100%)}
.subhero--cine .subhero__content{position:relative;width:min(1160px,100%);margin-inline:auto;
  padding:calc(var(--nav-h) + clamp(150px,26vh,260px)) clamp(22px,5vw,64px) clamp(26px,4vh,44px)}
.subhero--cine .eyebrow{color:var(--accent);opacity:1}
.subhero--cine h1{margin-top:14px;max-width:20ch}
.subhero--cine .lede{margin:18px 0 0;max-width:54ch;opacity:.92;color:var(--ink)}
.subhero--cine .cta-row{justify-content:flex-start;margin-top:28px}
/* W47: Contact / Transformations / Curl Education were reading short — match About height */
.subhero--cine.subhero--proof,
.subhero--cine.subhero--action,
.subhero--cine.subhero--detail{min-height:clamp(560px,74vh,820px)}
.subhero--cine.subhero--proof .subhero__content,
.subhero--cine.subhero--action .subhero__content,
.subhero--cine.subhero--detail .subhero__content{
  padding-top:calc(var(--nav-h) + clamp(180px,30vh,300px))}
.subhero--cine.subhero--legal{min-height:clamp(360px,48vh,520px)}
.subhero--cine.subhero--legal .subhero__content{padding-top:calc(var(--nav-h) + clamp(90px,16vh,160px))}
@media (max-width:880px){
  .subhero--cine{min-height:clamp(460px,62vh,620px)}
  .subhero--cine.subhero--proof,
  .subhero--cine.subhero--action,
  .subhero--cine.subhero--detail{min-height:clamp(500px,68vh,680px)}
}

/* ---------- W50: Work is the scrim gold standard; nav white on load ---------- */
/* Work: curls left, dark type right, all-white nav chrome on page load */
body.page-work .subhero--cine .subhero__media img{object-position:18% 42%}
body.page-work .subhero--cine{color:var(--ink)}
body.page-work .subhero--cine .eyebrow{color:var(--accent);opacity:1;text-shadow:none}
body.page-work .subhero--cine h1{text-shadow:none}
body.page-work .subhero--cine .lede{color:var(--ink);opacity:.92;text-shadow:none}
body.page-work .subhero--cine h1 em{color:var(--accent)}
body.page-work .subhero__content--right{margin-left:auto;text-align:right;
  display:flex;flex-direction:column;align-items:flex-end}
body.page-work .subhero__content--right .lede{margin-left:auto}
body.page-work .subhero__content--right .cta-row{justify-content:flex-end}
body.page-work .site-header:not(.is-scrolled):not(.is-open) .site-nav a{
  color:var(--accent-on);text-shadow:0 1px 8px rgba(36,26,23,.35)}
@media (hover:hover){
  body.page-work .site-header:not(.is-scrolled):not(.is-open) .site-nav a:hover{color:#fff}
}
body.page-work .site-header:not(.is-scrolled):not(.is-open) .header-book{
  background:transparent;color:var(--accent-on);
  border-color:color-mix(in srgb, var(--accent-on) 55%, transparent)}
@media (hover:hover){
  body.page-work .site-header:not(.is-scrolled):not(.is-open) .header-book:hover{
    background:var(--accent-on);color:var(--accent)}
}

/* Contact: restore the original W48 cine white scrim (pre–scrim-cut).
   Top milky band + cream dissolve the type lives in — not the W50 dark cradle,
   not the later opaque fog plate. */
body.page-contact .subhero--cine .subhero__media img{object-position:78% 40%}
body.page-contact .subhero--cine .subhero__media::before{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 72%, transparent) 0%,
    color-mix(in srgb, var(--bg) 38%, transparent) 70px,
    transparent 160px)}
body.page-contact .subhero--cine .subhero__media::after{
  background:linear-gradient(180deg, transparent 28%,
    color-mix(in srgb, var(--bg) 58%, transparent) 58%,
    var(--bg) 97%)}
body.page-contact .subhero--cine{color:var(--ink)}
body.page-contact .subhero--cine .eyebrow{color:var(--accent);opacity:1;text-shadow:none}
body.page-contact .subhero--cine h1{text-shadow:none}
body.page-contact .subhero--cine .lede{color:var(--ink);opacity:.92;text-shadow:none}
body.page-contact .subhero--cine h1 em{color:var(--accent)}
/* Wordmark sits on pale stucco — ink lockup */
body.page-contact .site-header:not(.is-scrolled):not(.is-open) .wordmark .wm--ink{opacity:1}
body.page-contact .site-header:not(.is-scrolled):not(.is-open) .wordmark .wm--light{opacity:0}
/* About/Services over the pale left → ink; rest stay light */
body.page-contact .site-header:not(.is-scrolled):not(.is-open) .site-nav a:nth-child(1),
body.page-contact .site-header:not(.is-scrolled):not(.is-open) .site-nav a:nth-child(2){
  color:var(--ink);text-shadow:none}
@media (hover:hover){
  body.page-contact .site-header:not(.is-scrolled):not(.is-open) .site-nav a:nth-child(1):hover,
  body.page-contact .site-header:not(.is-scrolled):not(.is-open) .site-nav a:nth-child(2):hover{color:var(--ink)}
}
body.page-contact .site-header:not(.is-scrolled):not(.is-open) .header-book{
  background:var(--accent);border-color:var(--accent);color:var(--accent-on)}
body.page-contact .site-header:not(.is-scrolled):not(.is-open) .nav-toggle span{
  background:var(--ink);box-shadow:none}

/* About / Services / Curl Ed inherit the W50 gold-standard cine scrim (no heavy fog).
   Keep light nav chrome on dark bands; curl-ed pale band still needs ink chrome. */
body.page-curl-education .site-header:not(.is-scrolled):not(.is-open) .wordmark .wm--ink{opacity:1}
body.page-curl-education .site-header:not(.is-scrolled):not(.is-open) .wordmark .wm--light{opacity:0}
body.page-curl-education .site-header:not(.is-scrolled):not(.is-open) .site-nav a{
  color:var(--ink);text-shadow:none}
@media (hover:hover){
  body.page-curl-education .site-header:not(.is-scrolled):not(.is-open) .site-nav a:hover{color:var(--ink)}
}
body.page-curl-education .site-header:not(.is-scrolled):not(.is-open) .header-book{
  background:transparent;color:var(--ink);border-color:var(--hairline-strong)}
@media (hover:hover){
  body.page-curl-education .site-header:not(.is-scrolled):not(.is-open) .header-book:hover{
    background:var(--accent);border-color:var(--accent);color:var(--accent-on)}
}
body.page-curl-education .site-header:not(.is-scrolled):not(.is-open) .nav-toggle span{
  background:var(--ink);box-shadow:none}

/* ---------- 5.3: per-page hero rhythm (same instrument, different tempo) ----------
   One modifier per page purpose so no interior hero is a duplicate of another:
   menu = widest lede · story = tallest pause + largest H1 + reading-width lede ·
   proof = photos sooner · action/legal = slim utility heroes (scheduler/text rides high) ·
   detail = chapter rhythm under the hub. Ground, faces, and ornaments unchanged. */
.subhero--menu .lede{max-width:62ch}
.subhero--story:not(.subhero--cine){padding-top:calc(var(--nav-h) + clamp(72px,12vh,124px));padding-bottom:clamp(68px,11vh,104px)}
.subhero--story h1{font-size:clamp(2.9rem,5.6vw,5.1rem)}
.subhero--story .lede{max-width:52ch}
.subhero--proof:not(.subhero--cine){padding-bottom:clamp(40px,6.5vh,60px)}
.subhero--proof .lede{max-width:48ch}
.subhero--action:not(.subhero--cine){padding-top:calc(var(--nav-h) + clamp(36px,6vh,56px));padding-bottom:clamp(34px,5.5vh,48px)}
.subhero--action h1{font-size:clamp(2.1rem,3.8vw,3.2rem)}
.subhero--legal:not(.subhero--cine){padding-top:calc(var(--nav-h) + clamp(32px,5vh,48px));padding-bottom:clamp(28px,4.5vh,40px)}
.subhero--legal h1{font-size:clamp(1.9rem,3.2vw,2.7rem)}
.subhero--detail:not(.subhero--cine){padding-top:calc(var(--nav-h) + clamp(48px,7.5vh,80px))}
.subhero--detail .lede{max-width:58ch}
.subhero--detail .cta-row{margin-top:26px}

/* ---------- W16: sticky split rail (Salón Soňa architecture, interactions.md §5) ----------
   Left visual column pins (position:sticky) while the right narrative column scrolls past;
   collapses to stacked photo-then-content under 881px. P-009 rule honored: html/body use
   overflow-x:clip (never hidden), and the sticky item is align-self:start so its height
   stays below the grid track height — both conditions sticky needs to engage. */
.split-rail{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,5vw,72px)}
.split-rail__media{margin:0}
.split-rail__media .framed-image{max-width:440px;margin-inline:auto}
.rail-caption{margin-top:16px;text-align:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
.split-rail__flow{min-width:0}
.rail-beat + .rail-beat{margin-top:clamp(56px,9vh,104px)}
.split-rail__flow .sec-head{text-align:left;margin:0 0 clamp(28px,4.5vh,44px);max-width:none}
.split-rail__flow .sec-head h2{font-size:clamp(1.9rem,2.7vw,2.6rem)}
.split-rail__flow .sec-head .lede{margin-left:0;max-width:58ch}
.split-rail__flow .prose{margin:0;max-width:58ch}
.split-rail__flow .stat-row{max-width:none;gap:var(--sp-3)}
.split-rail__flow .f-grid{grid-template-columns:1fr;gap:var(--sp-2)}
.split-rail__flow .beat-copy h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,2.7vw,2.6rem);line-height:1.16;margin:12px 0 14px}
.split-rail__flow .beat-copy h2 em{font-style:italic;color:var(--accent)}
.split-rail__flow .beat-copy p{color:var(--ink-soft);margin-bottom:14px;max-width:58ch}
/* in-flow accent band (the narrative panel over the deep accent ground) */
.rail-band{background:var(--accent);color:var(--accent-on);border-radius:var(--radius);padding:clamp(36px,5vw,60px) clamp(26px,3.5vw,48px)}
.rail-band .eyebrow{color:var(--accent-on);opacity:.75}
.rail-band h2{font-family:var(--font-display);font-weight:300;font-size:clamp(1.8rem,2.6vw,2.5rem);line-height:1.14;margin:12px 0 16px}
.rail-band h2 em{font-style:italic}
.rail-band p{opacity:.88;line-height:1.75;margin-bottom:24px}
.rail-band :focus-visible{outline-color:var(--accent-on)}
/* in-flow pull quote (thin rule + italic serif, the site's quote language at column scale) */
.rail-quote{margin:0}
.rail-quote .rule{width:56px;height:1px;background:var(--accent);margin-bottom:24px}
.rail-quote blockquote{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.5;text-wrap:balance}
.rail-quote figcaption{margin-top:16px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
@media (min-width:881px){
  .split-rail{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
  .split-rail__media{
    position:sticky;top:calc(var(--nav-h) + 16px);align-self:start;
    height:calc(100vh - var(--nav-h) - 32px);height:calc(100dvh - var(--nav-h) - 32px);
    display:flex;flex-direction:column;justify-content:center;
  }
}

/* ---------- W16: draw-on-scroll curl strokes (locked direction signature move #2) ----------
   Large hairline S-curve ornaments at section boundaries: 1.5px stroke, accent at 30%,
   drawn by scroll progress (JS writes stroke-dashoffset; fire-forward only).
   No-JS: fully drawn (hidden start gated on html.js-motion). Reduced motion: fully drawn.
   CLS-safe: absolutely positioned with explicit dimensions, pointer-events none. */
.has-stroke{position:relative}
.has-stroke > .container{position:relative;z-index:1}
.curl-stroke{position:absolute;left:50%;transform:translateX(-50%);pointer-events:none;color:var(--accent);opacity:.3;z-index:0}
.curl-stroke svg{display:block;width:100%;height:100%;overflow:visible}
.curl-stroke--bridge{top:clamp(-46px,-3vw,-18px);width:min(680px,92vw);height:clamp(110px,18vw,190px)}
/* W21 (index only): the mechanism stroke used to straddle the section boundary and
   touched the scrolly stage above — pushed inside the section with breathing room,
   and the section's top padding opens up so the stroke never crowds the heading. */
#mechanism.block{padding-top:clamp(150px,23vh,236px)}
#mechanism .curl-stroke--bridge{top:clamp(28px,2.5vw,44px);height:clamp(96px,15vw,160px)}
.curl-stroke--closer{bottom:2px;width:min(620px,90vw);height:clamp(96px,15vw,160px)}
html.js-motion .curl-stroke .stroke-path{stroke-dasharray:1;stroke-dashoffset:1}
@media (prefers-reduced-motion:reduce){
  html.js-motion .curl-stroke .stroke-path{stroke-dashoffset:0 !important}
}
/* 7.0a (§7b-5): stacked mobile CTA groups equalize to the widest button, centered —
   never ragged widths, never full-bleed. Placed after every .cta-row base rule so the
   grid wins at equal specificity (source order is load-bearing here). */
@media (max-width:540px){
  .hero__cta,.scrolly-cta,.subhero .cta-row,.closer .cta-row{display:grid;grid-template-columns:max-content;justify-content:center}
  .hero__cta .btn,.scrolly-cta .btn,.subhero .cta-row .btn,.closer .cta-row .btn{width:100%}
}

.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;max-width:1080px;margin-inline:auto}
@media (max-width:860px){.two-col{grid-template-columns:1fr}}
.two-col .eyebrow{display:block}
.two-col h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,3.1vw,2.6rem);line-height:1.16;margin:12px 0 14px}
.two-col h2 em{font-style:italic;color:var(--accent)}
.two-col p{color:var(--ink-soft);margin-bottom:14px}
.two-col img{border-radius:var(--radius);border:1px solid var(--hairline)}

/* ---------- 4.6 + 4.7: framed editorial images (two-col splits + founder portraits) ----------
   outer soft glow in the accent family on the frame; light inner ring + warm bottom fade
   on an ::after overlay (inset box-shadow is invisible on a replaced <img>, so the ring
   lives on the wrapping figure) */
.framed-image{position:relative;margin:0;border-radius:var(--radius);
  box-shadow:0 24px 48px -26px color-mix(in srgb, var(--accent) 42%, transparent),
             0 8px 20px -12px color-mix(in srgb, var(--ink) 20%, transparent)}
.framed-image img{display:block;width:100%;height:auto}
.framed-image::after{content:"";position:absolute;inset:0;border-radius:var(--radius);pointer-events:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent-on) 42%, transparent);
  background:linear-gradient(180deg, transparent 68%, color-mix(in srgb, #241A17 14%, transparent) 100%)}

/* 8.2 / W44: signature flourish — adult fountain-pen "Lily" (smooth, connected, not scratched) */
/* W50: real handwriting (Caveat) — Cricket Moves pattern */
.script-accent{font-family:'Caveat',var(--font-display);font-weight:600;
  font-size:clamp(2.4rem,4.5vw,3.2rem);line-height:1;letter-spacing:.01em;color:var(--accent);
  margin:28px 0 0;transform:rotate(-1.4deg);transform-origin:0 60%}
@media (prefers-reduced-motion:reduce){.script-accent{transform:none}}

/* forms (§7c.6: 16px+ inputs, correct types) */
.form{display:grid;gap:16px;max-width:560px;position:relative;padding-top:26px}
/* 7.1: gradient top accent bar on the contact form — same accent family as .btn--solid */
.form::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;border-radius:2px;
  background:linear-gradient(90deg, #A85735 0%, var(--accent) 55%, #8A4226 100%)}
/* 7.1: expectation-setter block above the fields */
.form-expect{color:var(--ink-soft);font-size:16px;line-height:1.75;margin:0}
.form label{font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);display:block;margin-bottom:6px} /* 8.6: form labels are a conversion surface — 14px floor */
.form input,.form textarea{
  width:100%;font-family:var(--font-body);font-size:16px;color:var(--ink);
  background:var(--surface);border:1px solid var(--hairline-strong);border-radius:var(--radius);
  padding:14px;transition:border-color var(--dur-hover) ease;
}
/* 3.8: no bare outline suppression anywhere — fields keep the universal focus ring; border + soft glow layer on top */
.form input:focus,.form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent)}
.form textarea{min-height:130px;resize:vertical}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .ok{display:none;background:color-mix(in srgb, var(--accent) 8%, var(--surface));border:1px solid var(--accent);border-radius:var(--radius);padding:16px;color:var(--ink)}
.form.is-sent .ok{display:block}
.form.is-sent .form-fields{display:none}

/* action-first contact block (utility-page doctrine) */
.action-block{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);max-width:880px;margin-inline:auto}
@media (max-width:720px){.action-block{grid-template-columns:1fr}}
.action-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:var(--sp-4) var(--sp-3);text-align:center;
  position:relative;overflow:hidden;
  transition:transform var(--dur-hover) var(--ease-out-lux),box-shadow var(--dur-hover) var(--ease-out-lux)}
@media (hover:hover){.action-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px color-mix(in srgb, var(--ink) 28%, transparent)}}
.action-card h3{font-family:var(--font-display);font-weight:500;font-size:1.3rem;margin-bottom:10px}
.action-card p{color:var(--ink-soft);font-size:1rem;margin-bottom:18px}

/* legal prose */
.prose{max-width:70ch;margin-inline:auto;color:var(--ink)}
.prose h2{font-family:var(--font-display);font-weight:500;font-size:1.5rem;margin:36px 0 12px}
.prose p,.prose li{color:var(--ink-soft);margin-bottom:12px;line-height:1.75}
.prose ul{padding-left:22px}
.prose .updated{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- mobile callbar (§7a full doctrine) ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:58;
  display:none;
  background:var(--accent-deep);
  padding:12px 16px;
  padding-bottom:max(14px, env(safe-area-inset-bottom));
  box-shadow:0 48px 0 0 var(--accent-deep); /* color-bleed for toolbar collapse */
  transform:translateY(calc(100% + 48px + env(safe-area-inset-bottom,0px)));
  transition:transform .3s ease;
}
.sticky-cta.is-visible{transform:none}
@media (prefers-reduced-motion:reduce){.sticky-cta{transition:none}}
.site-header.is-open ~ .sticky-cta{transform:translateY(calc(100% + 48px + env(safe-area-inset-bottom,0px)))} /* hidden while drawer open */
@media (max-width:720px){.sticky-cta{display:block}}
.sticky-cta .cb-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:520px;margin-inline:auto}
.sticky-cta .btn{padding:14px 10px} /* 8.6: label inherits the 14px .btn floor (was 11px) */
/* ============ Blog (content/blog → /blog/) — LocalCraft blog kit ============
   W9: rewritten onto THIS site's tokens (--sp-*, --radius, --accent-deep,
   --hairline, --font-display, --ease-*, --dur-hover). The original drop-in
   referenced another kit's vocabulary (--s2..--s6, --radius-lg, --ink-deep,
   --accent-2/3, --line, --font-heading) and five phantom classes with no
   rules (.page-hero, .ty-hero, .card, .card-grid, .offer-link) — every var
   resolved to nothing. Shell markup now rides the site's real subhero +
   reveal + sticky-cta systems (scripts/build-blog.mjs, patched same wave). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.band-surface{background:var(--surface);padding:var(--sp-6) 0}
.subhero .blog-meta{color:var(--accent-on);opacity:.72;margin-top:14px;font-size:.95rem}
.blog-kicker-link{color:inherit;text-decoration:none}
.blog-kicker-link:hover{opacity:1}
.blog-measure{max-width:760px}
.blog-hero-figure{margin:var(--sp-4) 0 0}
.blog-hero-figure img{width:100%;height:auto;border-radius:var(--radius);display:block;
  box-shadow:0 18px 40px -18px color-mix(in srgb, var(--accent) 42%, transparent), 0 6px 18px -8px color-mix(in srgb, var(--ink) 20%, transparent)}
.blog-prose{font-size:1.075rem;line-height:1.72;color:var(--ink);margin-top:var(--sp-4)}
.blog-prose > * + *{margin-top:1.1em}
.blog-prose h2{font-family:var(--font-display);font-weight:300;font-size:clamp(1.5rem,2.6vw,1.9rem);line-height:1.2;margin-top:2em}
.blog-prose h3{font-family:var(--font-display);font-weight:400;font-size:1.25rem;margin-top:1.6em}
.blog-prose a{color:var(--accent);text-underline-offset:2px}
.blog-prose ul,.blog-prose ol{padding-left:1.3em}
.blog-prose li + li{margin-top:0.4em}
.blog-prose blockquote{border-left:2px solid var(--accent);padding-left:var(--sp-3);color:var(--ink-soft);font-style:italic}
.blog-prose img{max-width:100%;height:auto;border-radius:var(--radius)}
.blog-prose strong{color:var(--ink)}
/* article cards (index) — surface + hairline, motion-contract hover (-4px, ≤1.02) */
.card-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin-top:var(--sp-4)}
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:var(--sp-4) var(--sp-3)}
.band-surface .card{border-color:var(--hairline-strong)}
a.blog-card{display:block;color:inherit;text-decoration:none;
  transition:transform var(--dur-hover) var(--ease-out-lux),box-shadow var(--dur-hover) var(--ease-out-lux)}
@media (hover:hover){
  a.blog-card:hover{transform:translateY(-4px);
    box-shadow:0 16px 32px -18px color-mix(in srgb, var(--accent) 38%, transparent), 0 6px 16px -10px color-mix(in srgb, var(--ink) 22%, transparent)}
  a.blog-card:hover .offer-link{color:var(--accent-deep)}
}
.blog-card .num{color:var(--accent);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.blog-card h3{font-family:var(--font-display);font-weight:400;font-size:1.3rem;line-height:1.25;margin-top:10px}
.blog-card p{color:var(--ink-soft);margin-top:10px}
.offer-link{display:inline-block;margin-top:14px;color:var(--accent);font-weight:600;
  transition:color var(--dur-hover) var(--ease-out-lux)}
/* post FAQ — same circular +/− language as the site FAQ (W2 2.4) */
.blog-faq{max-width:820px}
.blog-faq-list{margin-top:var(--sp-4);display:flex;flex-direction:column;gap:12px}
.blog-faq-item{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden}
.blog-faq-item summary{cursor:pointer;list-style:none;padding:var(--sp-3);font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3)}
.blog-faq-item summary::-webkit-details-marker{display:none}
.blog-faq-item summary::after{content:"";flex:none;width:28px;height:28px;border:1px solid var(--accent);border-radius:50%;
  background:linear-gradient(var(--accent),var(--accent)) center/12px 1.5px no-repeat,
             linear-gradient(var(--accent),var(--accent)) center/1.5px 12px no-repeat;
  transition:background-color var(--dur-hover) var(--ease-out-lux)}
.blog-faq-item[open] summary::after{background-color:var(--accent);
  background-image:linear-gradient(var(--accent-on),var(--accent-on));
  background-size:12px 1.5px;background-position:center;background-repeat:no-repeat}
.blog-faq-a{padding:0 var(--sp-3) var(--sp-3);color:var(--ink-soft)}
.blog-faq-a p{margin:0}

/* ---------- skip link (audit fix wave) ---------- */
/* Off-screen until keyboard focus, then a solid accent pill pinned top-left above the fixed header (header z-index:60). */
.skip-link{
  position:fixed;top:14px;left:-9999px;z-index:100;
  background:var(--accent);color:var(--accent-on);
  font-family:var(--font-body);font-weight:600;font-size:.95rem;
  padding:12px 22px;border-radius:999px;text-decoration:none;
}
.skip-link:focus-visible{left:14px}

/* ---------- print (W23) ----------
   Someone printing this page wants the words, the prices and the NAP — not the
   fixed chrome, not the scroll cinematic. Three jobs:
   1. drop the interface (header, drawer, sticky call bar, skip link, scroll
      cues, the scrolly canvas, the decorative curl strokes);
   2. undo every scroll-driven hidden state, because paper has no scroll — the
      reveal system, the hero entrance and the engine's INLINE beat opacities
      all resolve to visible (hence !important: the engine writes inline styles);
   3. black ink on white, with link destinations spelled out after the anchor in
      the main content so a printed page is still actionable. */
@media print{
  /* 1 — interface off */
  .site-header,.drawer,.sticky-cta,.skip-link,
  .hero__scrollcue,.scrolly__cue,.scrolly__canvas,
  .curl-stroke,.curl-divider,.map-embed{display:none !important}

  /* 2 — nothing hidden by a scroll position we do not have on paper */
  html.js-motion .reveal{opacity:1 !important;transform:none !important}
  .enter{animation:none !important;opacity:1 !important;transform:none !important}
  /* the marquee prints as a single static line, like its reduced-motion state */
  .strip .marquee{overflow:visible;justify-content:center}
  .strip .marquee__set{animation:none !important;flex:initial;flex-wrap:wrap;justify-content:center}
  .strip .marquee__set[aria-hidden="true"]{display:none !important}
  /* the scrub section reverts to its static narrative column: no 1170vh track,
     no sticky stage, no absolutely-stacked beats at engine-written opacity 0 */
  html.scrolly-on .scrolly__track{height:auto !important}
  html.scrolly-on .scrolly__stage{position:static !important;height:auto !important;overflow:visible !important;display:flex !important}
  html.scrolly-on .scrolly__media{position:relative !important;inset:auto !important}
  html.scrolly-on .scrolly__media img{position:relative !important;inset:auto !important;height:auto !important}
  html.scrolly-on .scrolly__media--b{opacity:1 !important}
  html.scrolly-on .scrolly__beats{display:contents !important}
  html.scrolly-on .scrolly__head,
  html.scrolly-on .beat{position:static !important;opacity:1 !important;transform:none !important;
    max-width:820px !important;margin-inline:auto !important;padding:18px 0 !important}
  html.scrolly-on .beat::before{content:none !important}
  html.scrolly-on .scrolly__finale{position:static !important;display:grid !important;
    grid-template-columns:1fr 1fr;gap:1px;visibility:visible !important;z-index:auto !important}
  /* the scrub panels are absolutely placed by half-viewport offsets — the offsets
     must go with the positioning or the after panel prints 50% off the paper */
  html.scrolly-on .finale__panel{position:relative !important;
    left:auto !important;right:auto !important;top:auto !important;bottom:auto !important}
  html.scrolly-on .finale__panel--before-r,
  html.scrolly-on .finale__divider{display:none !important}
  html.scrolly-on .finale__shift{position:static !important;width:100% !important;
    opacity:1 !important;transform:none !important;filter:none !important}
  html.scrolly-on .finale__shift img{position:relative !important;inset:auto !important;height:auto !important}

  /* 3 — black on white, no ornament */
  html,body{background:#fff !important;color:#000 !important}
  main,main *,.site-footer,.site-footer *{color:#000 !important;
    text-shadow:none !important;box-shadow:none !important;filter:none !important}
  main a,.site-footer a{text-decoration:underline}
  .btn{border:1px solid #000 !important;background:none !important}
  /* The hero photo is a full-viewport decorative crop that costs a whole sheet of
     ink, and the testimonial card only reads because it sits on a dark scrim over
     it — black-on-white would put that quote on top of a dark photograph. So the
     photo drops out on paper and the quote it carries flows as ordinary text. */
  .hero,.hero__visual{min-height:0 !important}
  .hero__panel,.subhero{padding:0 0 clamp(20px,4vh,34px) !important}
  .hero__visual picture,.hero__visual img{display:none !important}
  .hero__visual::after{content:none !important}
  .glass-card{position:static !important;max-width:none !important;
    background:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    border:0 !important;border-left:2px solid #000 !important;
    border-radius:0 !important;padding:0 0 0 14px !important;margin:0 0 18px !important}
  /* link destinations, so a printed page is still usable */
  main a[href^="http"]::after,main a[href^="tel:"]::after,
  main a[href^="sms:"]::after,main a[href^="mailto:"]::after,
  main a[href^="/"]::after{content:" (" attr(href) ")";font-size:11px;font-weight:400;
    letter-spacing:.01em;word-break:break-all;text-decoration:none}
  main a[href^="#"]::after{content:none}

  /* keep the things a printed page is FOR intact and unbroken */
  .nap,.menu-card,.menu-row,.menu-stack,.card,.f-card,.faq-item,
  .gal-item,.action-card,.split-rail__flow>*{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  img{max-width:100% !important;break-inside:avoid}
  @page{margin:14mm}
}