/* Custard Point — independent concept. Shaping-bay journey. */
:root{
  color-scheme:light;
  --navy:#10364a;--deep:#0a2736;--cream:#f6e8cc;--paper:#fbf3df;--orange:#ef6b3b;--rust:#a93d17;
  --sky:#9dd4d6;--foam:#d7ecea;--header:64px;--pad:clamp(20px,5vw,80px);
  --focus:#10364a;
  --display:"Arial Black","Helvetica Neue",Arial,Helvetica,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--header) + 16px);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--deep);font-family:Arial,Helvetica,sans-serif;line-height:1.5;overflow-wrap:break-word}
h1,h2,h3,p,ol,ul,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
.hero :focus-visible,.anatomy :focus-visible,.close :focus-visible,.site-footer :focus-visible{--focus:#ffd9a8}
.passage :focus-visible,.ticket :focus-visible{--focus:#0a2736}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip,.skip-inline{position:fixed;left:12px;top:-120px;z-index:200;background:#fff;color:var(--deep);padding:12px 16px;font-weight:700}
.skip:focus,.skip-inline:focus{top:calc(var(--header) + 8px)}
.skip-inline{position:absolute;left:var(--pad);top:auto;bottom:calc(100% - 4px);opacity:0;pointer-events:none}
.skip-inline:focus{opacity:1;pointer-events:auto;position:fixed;top:calc(var(--header) + 8px);left:12px}

/* ── Header: direct child of body, sticky, one row ── */
.site-header{position:sticky;top:0;z-index:60;height:var(--header);display:flex;align-items:center;gap:clamp(12px,2vw,28px);padding:0 var(--pad);background:var(--cream);border-bottom:2px solid var(--deep)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:900 13px/.92 var(--display);letter-spacing:.02em;text-transform:uppercase;margin-right:auto}
.brand-mark{display:grid;place-items:center;width:40px;height:40px;background:var(--navy);border-radius:8px}
.brand-mark svg{width:24px;height:24px;fill:var(--orange);stroke:var(--cream);stroke-width:2}
.brand-mark path:last-child{fill:none}
.site-nav{display:flex;flex-wrap:wrap;gap:4px clamp(14px,2.2vw,30px)}
.site-nav a{text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:12px 2px;min-height:44px;display:inline-flex;align-items:center}
.site-nav a:hover{text-decoration:underline;text-underline-offset:5px}
.header-call{background:var(--deep);color:#fff;text-decoration:none;font-weight:900;font-size:13px;letter-spacing:.06em;text-transform:uppercase;min-height:44px;min-width:76px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px}
.menu-toggle{display:none;font:inherit;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;min-height:44px;min-width:76px;padding:0 14px;background:transparent;border:2px solid var(--deep);color:var(--deep);cursor:pointer}
.menu-toggle[hidden]{display:none}
.concept-note{background:var(--deep);color:var(--cream);font-size:13px;text-align:center;padding:9px var(--pad)}
.eyebrow{font:900 11px/1.4 Arial,Helvetica,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 22px;border:2px solid transparent;font:900 13px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;cursor:pointer;color:inherit;background:none}
.button.primary{background:var(--orange);color:var(--deep)}
.button.ghost{border-color:currentColor}
.button.dark{background:var(--deep);color:#fff}
.button.outline{border-color:currentColor}
.button.outline-light{border-color:var(--cream);color:var(--cream)}
.button:hover{transform:translateY(-2px)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.section-label{display:flex;justify-content:space-between;gap:12px;border-top:2px solid currentColor;padding-top:12px;margin-bottom:clamp(28px,5vw,60px);font-size:11px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
h2{font:900 clamp(40px,8cqi,120px)/.88 var(--display);letter-spacing:-.045em;text-transform:uppercase;text-wrap:balance;hyphens:auto}
h2 i{font:italic 400 1em/1 var(--serif);letter-spacing:-.05em;text-transform:none}
section{container-type:inline-size;position:relative}

/* ── Hero ── */
.hero{background:var(--navy);color:var(--cream);padding:clamp(24px,4vw,56px) var(--pad) clamp(36px,5vw,70px);overflow:clip;min-height:calc(100svh - var(--header) - 36px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(12px,3vw,48px);align-items:center;min-height:min(640px,calc(100svh - var(--header) - 140px))}
.hero-copy{container-type:inline-size}
.hero h1{font:900 clamp(46px,17cqi,128px)/.86 var(--display);letter-spacing:-.05em;text-transform:uppercase;margin:18px 0 22px;text-wrap:balance}
.hero h1 em{font:italic 400 1em/1 var(--serif);letter-spacing:-.06em;color:var(--orange);text-transform:none}
.hero h1 .dot{color:var(--orange)}
.hero-deck{font-size:clamp(16px,1.5vw,20px);max-width:46ch}
.facts{display:grid;gap:0;margin-top:22px;max-width:560px;border-top:1px solid #73919a}
.facts div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid #73919a;font-size:14px}
.facts dt{font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:11px;padding-top:2px;color:var(--sky)}
.hero .button.ghost{color:var(--cream)}
.hero-art{position:relative;aspect-ratio:1/1.05;max-height:620px;display:grid;place-items:center;justify-self:center;width:100%}
.sun{position:absolute;width:74%;aspect-ratio:1;border-radius:50%;background:var(--orange);top:6%;right:0;transform:translateY(calc(var(--q,0) * 70px))}
.hero-board-entry{position:relative;z-index:2;width:34%;min-width:96px}
.hero-board-scroll{transform:rotate(calc(-20deg + var(--q,0) * 18deg)) translateY(calc(var(--q,0) * -26px));filter:drop-shadow(14px 14px 0 #072433);transform-origin:50% 60%}
.hero-board-scroll svg{display:block;width:100%;height:auto}
.wave{position:absolute;left:-12%;width:128%;height:15%;border:4px solid var(--sky);border-radius:50%;transform:rotate(-8deg) translateX(calc(var(--q,0) * -40px))}
.wave-1{bottom:20%}.wave-2{bottom:9%;border-color:var(--orange);transform:rotate(-8deg) translateX(calc(var(--q,0) * 30px))}.wave-3{bottom:-2%;border-color:var(--cream)}
.stamp{position:absolute;right:0;bottom:2%;z-index:3;border:2px solid var(--cream);padding:8px 10px;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;background:var(--navy);transform:rotate(6deg)}

/* ── Range ── */
.range{padding:clamp(56px,8vw,110px) var(--pad);background:var(--cream)}
.range-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:end}
.range-head p{max-width:42ch;font-size:17px}
.range-list{margin-top:clamp(30px,5vw,60px);border-top:3px solid var(--deep)}
.range-list li{display:grid;grid-template-columns:48px minmax(120px,240px) minmax(0,1fr);gap:clamp(12px,3vw,40px);align-items:center;padding:20px 0;border-bottom:2px solid var(--deep)}
.range-no{font-weight:900;font-size:13px;letter-spacing:.1em}
.range-list svg{width:100%;height:auto;overflow:visible}
.range-list path.draw{fill:#f8e7c6;stroke:var(--deep);stroke-width:3;stroke-linejoin:round}
.range-list path.dashed{fill:none;stroke-dasharray:6 5}
.range-list path.tick{fill:none;stroke:var(--deep);stroke-width:2}
.range-list h3{font:900 clamp(22px,3.4cqi,38px)/1 var(--display);letter-spacing:-.03em;text-transform:uppercase}
.range-list p{margin-top:6px;max-width:52ch}
.range-link{margin-top:26px}
.range-link a{display:inline-flex;align-items:center;min-height:44px;font-weight:800;border-bottom:2px solid currentColor;text-decoration:none}

/* ── Your line (chooser) ── */
.line{background:var(--sky);padding:clamp(56px,8vw,110px) var(--pad);--focus:#0a2736}
.line-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:end;margin-bottom:clamp(28px,4vw,50px)}
.line-head p{max-width:44ch;font-size:17px}
.line-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);border:3px solid var(--deep);background:var(--sky)}
.chooser{padding:clamp(16px,2.4vw,28px);border-right:3px solid var(--deep);display:grid;gap:18px;align-content:start}
.chooser fieldset{border:0;margin:0;padding:0;min-width:0}
.chooser legend{font-size:11px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;margin-bottom:8px;padding:0}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.choices.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.choice{position:relative;display:block}
.choice input{position:absolute;opacity:0;inset:0;margin:0;width:100%;height:100%;cursor:pointer;scroll-margin-top:calc(var(--header) + 16px)}
.choice span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:52px;padding:8px;text-align:center;border:2px solid var(--deep);background:transparent;font-size:14px;line-height:1.15}
.choice input:checked + span{background:var(--deep);color:var(--cream);text-decoration:underline;text-underline-offset:4px}
.choice input:checked + span::before{content:"✓" / ""}
.choice input:focus-visible + span{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px var(--deep)}
.check{display:flex;gap:10px;align-items:center;min-height:44px;font-size:14px;font-weight:700;cursor:pointer}
.check input{width:22px;height:22px;accent-color:var(--deep);flex:none}
.note-field{font-size:13px;font-weight:700}
.note-field span{font-weight:400}
#note{font:inherit;font-size:16px;min-height:48px;padding:10px 12px;border:2px solid var(--deep);background:#fff;color:var(--deep);width:100%}
.stage{background:var(--orange);padding:clamp(16px,2.4vw,28px);display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:360px}
.stage-caption{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.stage svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 14px 0 #b8431a)}
.stage-board{fill:#f6e5c3;stroke:var(--deep);stroke-width:6;stroke-linejoin:round}
.stringer{stroke:var(--deep);stroke-width:3;stroke-dasharray:8 10;fill:none}
.stage-info{display:flex;justify-content:space-between;align-items:end;gap:16px;border-top:2px solid var(--deep);padding-top:12px}
.stage-info strong{font:900 20px/1.1 var(--display);text-transform:uppercase}
.stage-info p{max-width:30ch;font-size:14px}
.brief{margin-top:clamp(22px,3vw,36px);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px 40px;padding-bottom:6px}
.brief-text .eyebrow{margin-bottom:8px}
.question{font-size:clamp(17px,1.9cqi,22px);line-height:1.4;font-family:var(--serif);user-select:all;-webkit-user-select:all}
.ready{margin-top:12px;font-size:14px;max-width:60ch}
.brief-actions{display:flex;flex-wrap:wrap;gap:10px;align-content:start}
.honest{grid-column:1/-1;font-size:13px;max-width:70ch}

/* ── Read the board (sticky walkthrough) ── */
.anatomy{background:var(--navy);color:var(--cream);overflow:visible}
.anatomy-stick{padding:clamp(20px,4vh,40px) var(--pad);display:flex;flex-direction:column;gap:clamp(12px,2vh,24px)}
.anatomy .section-label{margin-bottom:12px}
.anatomy h2{font-size:clamp(32px,7.2cqi,96px)}
.anatomy h2 i{color:var(--orange)}
.chips{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.chips li{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border:2px solid #73919a;color:#c9d6d8}
.chips li.on{border-color:var(--orange);background:var(--orange);color:var(--deep)}
.anatomy-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(16px,3vw,48px);align-items:center;flex:1;min-height:0}
.anatomy-art svg{width:100%;height:auto;max-height:58svh;overflow:visible}
.a-board{fill:#f6e5c3;stroke:var(--cream);stroke-width:5;stroke-linejoin:round;fill-opacity:.12}
.a-rail{fill:none;stroke:var(--orange);stroke-width:3;stroke-dasharray:3 9;stroke-linecap:round;opacity:.15;transition:opacity .5s}
.a-outline,.a-rail-inset,.a-tail,.a-fins{opacity:.15;transition:opacity .5s}
.a-outline line{stroke:var(--orange);stroke-width:3}
.a-outline path{stroke:var(--orange);stroke-width:3;fill:none}
.anatomy text{fill:var(--cream);font:700 15px Arial,Helvetica,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.a-rail-inset text{font-size:12px}.a-tail text,.a-fins text{font-size:13px}
.a-rail-inset rect{fill:none;stroke:#73919a;stroke-width:2}
.a-rail-inset path{fill:#f6e5c3;fill-opacity:.15;stroke:var(--cream);stroke-width:3}
.a-tail circle,.a-fins rect{fill:none;stroke:var(--orange);stroke-width:4;stroke-dasharray:6 6}
.a-fins path{fill:var(--orange)}
.stage-list{position:relative;display:grid}
.stage-item{grid-area:1/1;opacity:0;transform:translateY(24px);transition:opacity .45s,transform .45s;pointer-events:none}
.stage-item.is-on{opacity:1;transform:none;pointer-events:auto}
.stage-no{display:block;font:900 clamp(60px,9cqi,130px)/.9 var(--display);color:var(--orange);letter-spacing:-.06em}
.stage-item h3{font:900 clamp(26px,3.6cqi,48px)/1 var(--display);text-transform:uppercase;letter-spacing:-.03em;margin:6px 0 10px}
.stage-item p{font-size:clamp(16px,1.6cqi,20px);max-width:38ch}
.stage-item a{display:inline-block;margin-top:10px;color:var(--cream);font-weight:800;padding:10px 0}
/* stage highlights */
[data-stage="0"] .a-outline,[data-stage="1"] .a-rail,[data-stage="1"] .a-rail-inset,[data-stage="2"] .a-tail,[data-stage="3"] .a-fins{opacity:1}
[data-stage="3"] .a-tail{opacity:.5}
/* sticky only when JS motion is on and the screen is tall enough */
@media (min-height:561px){
  .js.motion .anatomy-track{height:430svh}
  .js.motion .anatomy-stick{position:sticky;top:var(--header);height:calc(100svh - var(--header));overflow:clip}
}
/* static layout (no JS, reduced motion, short screens): all four stages listed */
html:not(.motion) .stage-list,.static-stages .stage-list{display:block}
html:not(.motion) .stage-item,.static-stages .stage-item{opacity:1;transform:none;pointer-events:auto;margin-bottom:24px}
html:not(.motion) .a-outline,html:not(.motion) .a-rail,html:not(.motion) .a-rail-inset,html:not(.motion) .a-tail,html:not(.motion) .a-fins{opacity:1}
@media (max-height:560px){
  .stage-list{display:block}.stage-item{opacity:1;transform:none;pointer-events:auto;margin-bottom:20px}
  .a-outline,.a-rail,.a-rail-inset,.a-tail,.a-fins{opacity:1}
}

/* ── Passage ── */
.passage{background:var(--orange);color:var(--deep);padding:clamp(60px,10vw,120px) var(--pad) 0;text-align:center;overflow:clip;min-height:min(80svh,720px)}
.passage-from{font:900 clamp(22px,4cqi,52px)/1 var(--display);letter-spacing:-.04em;text-transform:uppercase}
.passage-from span{font:italic 400 1em/1 var(--serif);text-transform:none;color:var(--navy)}
.passage-to{font:900 clamp(40px,12cqi,170px)/.9 var(--display);letter-spacing:-.05em;text-transform:uppercase;margin-top:8px}
.passage-svg{display:block;width:100%;height:auto;margin-top:clamp(10px,3vw,40px);overflow:visible}
#passage-wave,#close-wave{stroke:var(--navy);stroke-width:9;stroke-linecap:round}
.mini-board{fill:#f6e5c3;stroke:var(--deep);stroke-width:9;stroke-linejoin:round}

/* ── Shop (proof) ── */
.shop{background:var(--paper);padding:clamp(56px,8vw,110px) var(--pad) 0;overflow:clip}
.shop-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start}
.shop h2{font-size:clamp(36px,5.6cqi,84px)}
.shop h2 i,.visit h2 i,.line h2 i,.range h2 i{color:var(--rust)}
.line h2 i{color:var(--deep)}
.lede{font-size:clamp(17px,1.8cqi,22px);margin-top:22px;max-width:48ch}
.proof{border-top:3px solid var(--deep)}
.proof li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:2px solid var(--deep)}
.proof b{font-size:11px;letter-spacing:.15em;text-transform:uppercase;padding-top:4px}
.tape{margin:clamp(50px,7vw,90px) calc(var(--pad) * -1) 0;background:var(--deep);color:var(--cream);overflow:clip;padding:16px 0}
.tape-run{display:flex;gap:40px;white-space:nowrap;font:900 clamp(26px,4cqi,56px)/1 var(--display);text-transform:uppercase;letter-spacing:-.04em;transform:translateX(calc(var(--tape,0) * -45%));width:max-content}

/* ── Visit (the calm chapter) ── */
.visit{background:var(--foam);padding:clamp(56px,8vw,110px) var(--pad)}
.visit-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,6vw,90px);align-items:center}
.ticket{background:var(--orange);border:3px solid var(--deep);padding:clamp(22px,3.4vw,44px);box-shadow:12px 14px 0 var(--deep);display:grid;gap:16px;max-width:520px;justify-self:center;width:100%}
.ticket-kicker{font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.ticket strong{font:900 clamp(40px,8cqi,80px)/.9 var(--display);letter-spacing:-.05em;text-transform:uppercase}
.ticket-lines{height:40px;background:repeating-linear-gradient(90deg,var(--deep) 0 4px,transparent 4px 9px)}
.ticket dl{display:grid;gap:6px;font-size:14px}
.ticket dl div{display:grid;grid-template-columns:60px minmax(0,1fr);gap:10px}
.ticket dt{font-weight:900;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding-top:2px}
.ticket a{font-weight:800;overflow-wrap:anywhere}
.ticket-link{display:inline-flex;align-items:center;min-height:44px}

/* ── Close ── */
.close{background:var(--navy);color:var(--cream);padding:clamp(56px,8vw,110px) var(--pad);overflow:clip}
.close h2 i{color:var(--orange)}
.close-svg{display:block;width:100%;height:auto;margin:clamp(14px,3vw,36px) 0;overflow:visible}
.close #close-wave{stroke:var(--sky)}
.close .mini-board{stroke:var(--cream);fill:var(--orange)}
.close-line{font:clamp(20px,3cqi,34px)/1.3 var(--serif);max-width:34em;margin-top:8px}
.close-line b{color:var(--orange);font-weight:700}
.close .honest{margin-top:20px;color:#c9d6d8}

/* ── Owner + footer ── */
.owner{padding:clamp(40px,6vw,70px) var(--pad);background:#e6d5b7;border-top:4px solid var(--deep)}
.owner h2{font:900 clamp(24px,3.2vw,40px)/1.1 Arial,Helvetica,sans-serif;letter-spacing:0;text-transform:none;max-width:24em;margin:8px 0 12px}
.owner p{max-width:62ch;margin-top:10px}
.owner-kicker{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.owner-url{font-size:13px;overflow-wrap:anywhere}
.site-footer{background:var(--navy);color:var(--cream);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px;padding:36px var(--pad) calc(36px + env(safe-area-inset-bottom));font-size:13px}
.site-footer p+p{margin-top:10px}
.site-footer a{overflow-wrap:anywhere}
.to-top{display:inline-flex;align-items:center;min-height:44px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}

/* ── Reveals: only hidden under the JS-added .motion class ── */
.motion [data-reveal]{transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),clip-path .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.motion [data-reveal="rise"]:not(.in){opacity:.05;transform:translateY(44px)}
.motion [data-reveal="wipe"]:not(.in){clip-path:inset(0 0 105% 0);transform:translateY(30px)}
.motion [data-reveal="wipe"].in{clip-path:inset(-10% -10% -10% -10%)}
.motion .range-list li .draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s ease .2s,fill-opacity .6s ease 1s;fill-opacity:0}
.motion .range-list li.in .draw{stroke-dashoffset:0;fill-opacity:1}
.motion .range-list li .draw.dashed{stroke-dasharray:6 5;stroke-dashoffset:0;fill-opacity:1;opacity:0;transition:opacity .8s ease .3s}
.motion .range-list li.in .draw.dashed{opacity:1}
/* hero entry */
.motion [data-hero]{animation:heroIn .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 110ms)}
.motion [data-hero="1"]{--i:0}.motion [data-hero="2"]{--i:1}.motion [data-hero="3"]{--i:2}.motion [data-hero="4"]{--i:3}.motion [data-hero="5"]{--i:4}
@keyframes heroIn{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
.motion .hero-board-entry{animation:boardIn 1.3s cubic-bezier(.2,.8,.2,1) both .15s}
@keyframes boardIn{from{opacity:0;transform:translateY(120px) rotate(14deg)}to{opacity:1;transform:none}}
.motion .sun{animation:sunUp 1.4s ease-out both}
@keyframes sunUp{from{opacity:0;margin-top:60px}to{opacity:1;margin-top:0}}

/* ── Breakpoints ── */
@media (max-width:900px){
  .site-header{gap:10px}
  .js .menu-toggle:not([hidden]){display:inline-flex;align-items:center;justify-content:center}
  .js .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--cream);border-bottom:2px solid var(--deep);padding:8px var(--pad) 14px;flex-direction:column;flex-wrap:nowrap}
  .js .site-header.is-open .site-nav{display:flex}
  .site-nav a{min-height:48px;font-size:14px}
  .hero-grid,.range-head,.line-head,.line-layout,.brief,.anatomy-body,.shop-grid,.visit-grid,.site-footer{grid-template-columns:minmax(0,1fr)}
  .hero-art{aspect-ratio:1/.8;max-height:380px}
  .chooser{border-right:0;border-bottom:3px solid var(--deep)}
  .range-list li{grid-template-columns:36px minmax(0,1fr)}
  .range-list li svg{grid-column:2;max-width:200px}
  .range-list li div{grid-column:2}
  .anatomy-body{gap:12px;align-items:start}
  .anatomy-art svg{max-height:30svh}
  .anatomy h2{font-size:clamp(26px,8cqi,44px)}
  .stage-no{font-size:44px}
  .stage-item h3{font-size:24px;margin:2px 0 6px}
  .stage-item p{font-size:15px}
  .chips{margin-top:8px}
  .anatomy .section-label{margin-bottom:6px}
}
@media (max-width:560px){
  :root{--pad:18px}
  .brand-name{font-size:12px}
  .header-call{min-width:64px;padding:0 12px}
  .choices.three{grid-template-columns:minmax(0,1fr)}
  .stage-info{flex-direction:column;align-items:flex-start}
  .stamp{display:none}
  .proof li{grid-template-columns:minmax(0,1fr);gap:2px}
  .actions .button,.brief-actions .button{width:100%}
  .hero h1{font-size:clamp(46px,17cqi,72px)}
}

/* ── Accessibility modes ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important}
  .stage-item,.a-rail,.a-outline,.a-rail-inset,.a-tail,.a-fins{transition:none}
}
@media (forced-colors:active){
  .choice input:checked + span{border-width:4px;text-decoration:underline}
  .choice input:focus-visible + span{outline:3px solid Highlight}
  .stage-board,.a-board,.mini-board{stroke:CanvasText}
}
@media print{
  .site-header,.skip,.skip-inline{position:static}
  .motion [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  .anatomy-track{height:auto!important}.anatomy-stick{position:static!important;height:auto!important}
  .stage-item{opacity:1!important;transform:none!important;margin-bottom:16px}
  .hero,.anatomy,.close,.site-footer{background:#fff!important;color:#000!important}
}