/* Product Garage · polish layer. Visual only, no copy. Remove the two <link>/<script> tags to revert. */
:root{--lap:28px}
html{scrollbar-width:thin;scrollbar-color:#3a352f var(--oil)}

/* ---- scroll progress hairline ---- */
.pgbar{position:fixed;left:0;top:0;width:100%;height:2px;z-index:120;background:var(--red);transform:scaleX(0);transform-origin:left;pointer-events:none;will-change:transform}

/* ---- header adapts to the surface underneath it ---- */
.hdr .logo,.hdr .nav a,.hdr .tog{transition:color .4s,border-color .4s,background .4s}
.hdr[data-tone=light].on{background:rgba(243,238,229,.82);border-color:var(--line-d)}
.hdr[data-tone=light] .logo{color:var(--oil)}
.hdr[data-tone=light] .nav a{color:#5a544b}
.hdr[data-tone=light] .nav a:hover,.hdr[data-tone=light] .nav a[aria-current]{color:var(--oil)}
.hdr[data-tone=light] .tog{color:#5a544b;border-color:rgba(23,21,18,.24)}
.hdr[data-tone=light] .tog:hover{color:var(--oil);border-color:var(--oil)}
.hdr[data-tone=light] .tog[aria-pressed=true]{color:var(--oil);border-color:var(--red)}
.hdr[data-tone=light] .btn.chalk{--bg:var(--oil);--fg:var(--chalk);--hv:var(--red);--hf:#fff}
.hdr[data-tone=red].on{background:rgba(168,44,25,.8);border-color:rgba(255,255,255,.22)}
.hdr[data-tone=red] .nav a{color:#F6DCD5}
.hdr[data-tone=red] .nav a:hover,.hdr[data-tone=red] .nav a[aria-current]{color:#fff}
.hdr[data-tone=red] .nav a::after{background:#fff}
.hdr[data-tone=red] .tog{border-color:rgba(255,255,255,.34);color:#F6DCD5}
.hdr[data-tone=red] .tog:hover,.hdr[data-tone=red] .tog[aria-pressed=true]{border-color:#fff;color:#fff}
.hdr[data-tone=red] .btn.chalk{--bg:var(--oil);--fg:var(--chalk);--hv:var(--chalk);--hf:var(--oil)}

/* ---- sections stack like sheets instead of hard cuts ---- */
.sec{z-index:3;margin-top:calc(var(--lap) * -1);border-radius:2px 2px 0 0;box-shadow:0 -26px 48px -28px rgba(0,0,0,.6)}
.sec.lt{box-shadow:0 -24px 44px -30px rgba(23,21,18,.34)}
.proof+.sec,main>.sec:first-child{margin-top:0;border-radius:0}

/* ---- cinematic backdrops behind dark sections ---- */
.bgimg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--oil)}
.bgimg img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;opacity:.62;will-change:transform}
.bgimg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(23,21,18,.9) 0%,rgba(23,21,18,.68) 42%,rgba(23,21,18,.55) 100%),
  linear-gradient(180deg,var(--oil) 0%,rgba(23,21,18,0) 20%,rgba(23,21,18,0) 76%,var(--oil) 100%)}


/* ---- cursor ring (fine pointers only) ---- */
.cur{position:fixed;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid rgba(243,238,229,.85);border-radius:50%;pointer-events:none;z-index:180;mix-blend-mode:difference;opacity:0;will-change:transform;transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),opacity .3s,background .3s}
.cur.on{opacity:1}
.cur.big{width:68px;height:68px;margin:-34px 0 0 -34px;background:rgba(243,238,229,.14)}
.cur.hid{opacity:0}
.sec.dk::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:1;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(243,238,229,.3) 50%,transparent)}
.sec.rd::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:1;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5) 50%,transparent)}

/* ---- hero scroll cue (graphic only) ---- */
.cue{position:absolute;left:50%;bottom:20px;z-index:4;width:1px;height:54px;margin-left:-.5px;background:rgba(243,238,229,.16);overflow:hidden;pointer-events:none}
.cue i{display:block;width:100%;height:100%;background:var(--red);transform-origin:top;animation:cue 2.4s var(--ease-io) infinite}

/* ---- marquee: soft edges + speed-reactive skew ---- */
.proof::before,.proof::after{content:"";position:absolute;top:0;bottom:0;width:min(14vw,180px);z-index:2;pointer-events:none}
.proof::before{left:0;background:linear-gradient(90deg,var(--ink),rgba(13,12,10,0))}
.proof::after{right:0;background:linear-gradient(270deg,var(--ink),rgba(13,12,10,0))}
.mq>div{transform:skewX(var(--sk,0deg));will-change:transform}

/* ---- pointer spotlight on cards and panels ---- */
.cards .card:not(.cta){background-image:radial-gradient(380px circle at var(--mx,-500px) var(--my,-500px),rgba(210,58,34,.09),transparent 65%)}
.panel{background-image:radial-gradient(460px circle at var(--mx,-500px) var(--my,-500px),rgba(243,238,229,.06),transparent 65%)}
.lt .panel{background-image:radial-gradient(460px circle at var(--mx,-500px) var(--my,-500px),rgba(210,58,34,.07),transparent 65%)}
.fld:focus-within label{color:var(--red)}
.panel:focus-within{border-color:rgba(210,58,34,.55);box-shadow:0 0 0 1px rgba(210,58,34,.25),0 30px 80px -40px rgba(210,58,34,.45);transition:border-color .4s,box-shadow .6s}

/* ---- badge: specular sheen follows the pointer ---- */
.badge::after{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;opacity:var(--go,0);transition:opacity .45s;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.75),rgba(255,255,255,0) 55%);mix-blend-mode:soft-light}

/* ---- small screens: keep the header on one line ---- */
.tog{white-space:nowrap}
@media (max-width:520px){
  .hdr .w{gap:10px}
  .tog[data-sound] .tl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tog[data-sound]{padding:0 12px}
}
@media (max-width:900px){:root{--lap:18px}}

@media (prefers-reduced-motion:reduce){.cue i{animation:none;transform:none}}
html.nomo .cue i{animation:none;transform:none}

/* =====================================================================
   Brand Book 3.1 alignment
   Tokens: Oil #171512, Chalk #F3EEE5, Signal #D23A22, Steel #2B2824,
   Concrete #8F8A80, Graphite #5A564F, Paper #E9E2D7,
   Signal on Oil #F07D66, Deep Signal on Chalk #A82A18.
   ===================================================================== */
:root{
  --disp:"Melodrama","Bodoni Moda",Georgia,serif;
  --body:"Switzer",Arial,sans-serif;
  --mono:"Switzer",Arial,sans-serif;
  --mute:#C6BFB4; --mute-d:#5A564F; --paper:#E9E2D7; --steel:#2B2824;
  --sig-on-oil:#F07D66; --sig-on-chalk:#A82A18;
}

/* labels are Switzer SemiBold, 12-14px, tracked .14em (never a mono) */
.mono,.eb,.tog,.rail span,.wc .mono,.badge .fo span,.badge .top .mono,.stampx,.story .stamp,.stages li b,.portrait span,.jst .dotn,.story .card .mono,.story .card li b,.pre .mono{font-weight:600;letter-spacing:.14em}
.eb,.tog,.mono{font-size:12px}
.rail span,.story .card .mono,.wc .mono,.badge .top .mono,.badge .fo span,.portrait span,.story .card li b{font-size:11px}
.rail span{color:rgba(243,238,229,.52)}

/* display type: Medium for display and headlines, tighter tracking, real kerning; no synthesised italics */
.disp{letter-spacing:-.03em;font-kerning:normal;font-feature-settings:"kern","liga";text-rendering:optimizeLegibility}
.h1,.h2,.date,.badge .big .disp{font-weight:500}
.h1{letter-spacing:-.045em}
.h2{letter-spacing:-.04em}
em.it,.get p em,.date em,.foot .wm .a{font-style:normal}
.get p .w8{color:var(--mute)}
.get p em{font-weight:500}
.get p em .w8{color:var(--chalk)}
.foot .wm{letter-spacing:-.05em}

/* red marks a decision or an active point. It never fills the main button */
.btn,.btn.chalk,.btn.oil{border-radius:2px}
.btn{--bg:var(--chalk);--fg:var(--oil);--hv:var(--sig-on-chalk);--hf:var(--chalk)}
.lt .btn:not(.chalk),.btn.oil{--bg:var(--oil);--fg:var(--chalk);--hv:var(--sig-on-chalk);--hf:var(--chalk)}
.btn.chalk{--bg:var(--chalk);--fg:var(--oil);--hv:var(--sig-on-chalk);--hf:var(--chalk)}
.card.cta .btn{--bg:var(--chalk);--fg:var(--oil);--hv:var(--sig-on-chalk);--hf:var(--chalk)}
.hdr[data-tone=light] .btn.chalk{--bg:var(--oil);--fg:var(--chalk);--hv:var(--sig-on-chalk);--hf:var(--chalk)}
.hdr[data-tone=red] .btn.chalk{--bg:var(--oil);--fg:var(--chalk);--hv:var(--chalk);--hf:var(--oil)}
.rd .btn.oil{--hv:var(--chalk);--hf:var(--oil)}

.fld:focus-within label{color:var(--sig-on-oil)}
.lt .fld:focus-within label{color:var(--sig-on-chalk)}
.err{color:var(--sig-on-oil)}
.lt .err{color:var(--sig-on-chalk)}
:focus-visible{outline:2px solid var(--sig-on-oil);outline-offset:4px}
.lt :focus-visible{outline-color:var(--sig-on-chalk)}
.rd :focus-visible{outline-color:var(--chalk)}

/* case tags: red is reserved for the decision */
.story .card .mono{color:var(--mute-d)}
.story .card:nth-child(3) .mono{color:var(--sig-on-chalk)}
.story .card li.pick b{color:var(--mute-d)}
.story .card .strike::after{background:var(--oil)}
.cards .card .mono.red{color:var(--mute-d)}
.cards .card:nth-child(6) .mono.red{color:var(--sig-on-chalk)}
.cards .card.done{border-color:var(--oil)}
.cards .card.done .dot{background:var(--oil)}
.cards .card:nth-child(6).done{border-color:var(--red)}
.cards .card:nth-child(6).done .dot{background:var(--red)}

/* surfaces on Chalk are Paper, and corners stay square (2px) */
.lt .tile,.lt .cards .card:not(.cta),.lt .panel,.brief{background-color:var(--paper)}
.lt .panel,.lt .tile,.lt .cards .card{border-color:rgba(23,21,18,.16)}
.card,.tile,.panel,.jpanel,.tpanel,.portrait,.empty,.brief,.story .card{border-radius:2px}
.badge{border-radius:4px}
.badge::after{border-radius:4px}
.badge .clip{border-radius:2px;background:#CFC6B7}
.badge .seats{border-radius:2px}
.badge .tbl u{background:#D9D0C1}
.cards .card:not(.cta){background-image:radial-gradient(360px circle at var(--mx,-500px) var(--my,-500px),rgba(255,255,255,.7),rgba(255,255,255,0) 65%)}
.lt .panel{background-image:radial-gradient(460px circle at var(--mx,-500px) var(--my,-500px),rgba(255,255,255,.65),rgba(255,255,255,0) 65%)}
.card textarea::placeholder{color:#6B655B}

/* cut: rib wallpaper behind text and decorative stripes. Placeholders use the brand's dashed frame */
.slats-bg{display:none}
.rd{box-shadow:inset 0 0 220px rgba(23,21,18,.28)}
.portrait{background:var(--steel);border:1px dashed rgba(243,238,229,.3)}
.portrait::before,.portrait::after{display:none}
.portrait .ini{color:rgba(243,238,229,.1)}


/* ---- the room door: a roller shutter over "What you get" lifts as you arrive ---- */
.gate{display:none}
.gate.live{display:block;position:absolute;left:0;right:0;top:0;height:100vh;height:100svh;z-index:4;overflow:hidden;pointer-events:none}
html.nomo .gate{display:none}
.gate .curtain{position:absolute;inset:0;will-change:transform;
  background:
    radial-gradient(90% 70% at 18% 0%,rgba(255,222,180,.07),rgba(255,222,180,0) 60%),
    linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,0) 12%,rgba(0,0,0,0) 88%,rgba(0,0,0,.35)),
    repeating-linear-gradient(180deg,#3a352f 0 1px,#2e2a25 1px 4px,#27231f 50%,#1d1a17 calc(100% - 5px),#0d0c0a calc(100% - 3px) 100%) 0 0/100% 64px;
  box-shadow:0 24px 50px rgba(0,0,0,.55)}
.gate .seams{position:absolute;inset:0;opacity:0;mix-blend-mode:screen;
  background:repeating-linear-gradient(180deg,transparent 0 61px,rgba(255,196,130,.55) 61px 62px,transparent 62px 64px) 0 0/100% 64px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.gate .rail{position:absolute;left:0;right:0;bottom:0;height:26px;background:linear-gradient(180deg,#403a33 0,#2a2622 2px,#1b1815 70%,#0c0b0a 100%);border-top:1px solid rgba(243,238,229,.16)}
.gate .rail::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;background:#080706}
.gate .rail i{position:absolute;left:50%;top:9px;width:96px;height:7px;margin-left:-48px;border-radius:2px;background:linear-gradient(180deg,#b3ada2,#6d685f);box-shadow:0 2px 3px rgba(0,0,0,.6)}
.gate .spill{position:absolute;left:-10%;right:-10%;top:100%;height:48vh;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(60% 100% at 50% 0%,rgba(255,206,148,.34),rgba(255,206,148,.08) 45%,rgba(255,206,148,0) 75%)}
.gate .spill::before{content:"";position:absolute;left:8%;right:8%;top:4px;height:2px;background:rgba(255,226,186,.7);filter:blur(2px)}
.gate .lintel{position:absolute;left:0;right:0;top:0;height:22px;z-index:2;background:linear-gradient(180deg,#2d2924,#171512);border-bottom:1px solid rgba(243,238,229,.1);box-shadow:0 6px 14px rgba(0,0,0,.55)}
.gate .guide{position:absolute;top:0;bottom:0;width:10px;z-index:1;background:linear-gradient(90deg,#0f0e0c,#2a2622 40%,#0f0e0c)}
.gate .guide.l{left:0}.gate .guide.r{right:0}
@media (max-width:900px){.gate .curtain,.gate .seams{background-size:100% 46px,100% 46px,100% 46px}.gate .seams{background:repeating-linear-gradient(180deg,transparent 0 43px,rgba(255,196,130,.55) 43px 44px,transparent 44px 46px)}.gate .guide{width:6px}}

/* =====================================================================
   The arrival: a letterboxed title sequence (home, once per visit)
   ===================================================================== */
.pre{padding:0;display:none;background:#070605;transition:background-color 1.1s ease-out}
html.preload .pre,html.intro .pre,html.outro .pre{display:block}
.pre::before,.pre::after{content:"";position:absolute;left:0;right:0;height:12vh;background:#070605;z-index:1;transition:transform .7s var(--ease)}
.pre::before{top:0;transform-origin:top}
.pre::after{bottom:0;transform-origin:bottom}
.pre .row:nth-child(2){display:none}
.pre .row:first-child{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(6vh - 7px);z-index:2;transition:opacity .5s ease-out}
.pre .row .mono{font-size:11px;color:rgba(243,238,229,.55)}
.pre .bar{position:absolute;left:0;right:0;bottom:12vh;margin:0;height:1px;z-index:2;background:rgba(243,238,229,.07);transition:opacity .4s}
.pre .bar i{background:var(--red)}
html.intro .pre{background-color:rgba(7,6,5,0);pointer-events:auto;cursor:default}
html.outro .pre{background-color:rgba(7,6,5,0);pointer-events:none}
html.outro .pre::before,html.outro .pre::after{transform:scaleY(0)}
html.outro .pre .row,html.outro .pre .bar{opacity:0}

/* the page waits in the dark until the frame opens */
.hdr,.hero3d .hcopy,.hero3d .rail,.hero3d .cue,.pgbar{transition:opacity .7s var(--ease)}
html.preload .hdr,html.intro .hdr{opacity:0;pointer-events:none}
html.preload .hero3d .hcopy,html.intro .hero3d .hcopy,html.preload .hero3d .rail,html.intro .hero3d .rail,html.preload .hero3d .cue,html.intro .hero3d .cue,html.intro .pgbar{opacity:0 !important}
html.outro .hdr{transition-delay:.25s}
html.intro .cur{opacity:0}

/* ---- you hold the lamp ---- */
.bgimg .lit{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;z-index:1;pointer-events:none;will-change:transform;
  filter:brightness(2.1) contrast(1.08) saturate(1.05) sepia(.12);
  -webkit-mask-image:radial-gradient(circle var(--lr,360px) at var(--lx,80%) var(--ly,20%),#000 0,rgba(0,0,0,.5) 38%,transparent 100%);
  mask-image:radial-gradient(circle var(--lr,360px) at var(--lx,80%) var(--ly,20%),#000 0,rgba(0,0,0,.5) 38%,transparent 100%)}
.bgimg .haze{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:screen}

/* =====================================================================
   Liquid glass carousel (Community: what members get)
   ===================================================================== */
.lg{position:relative;user-select:none;-webkit-user-select:none}
.lg-vp{position:relative;touch-action:pan-y;cursor:grab;outline:none}
.lg-vp:active{cursor:grabbing}
.lg-vp:focus-visible{outline:2px solid var(--sig-on-oil);outline-offset:10px}
.lg-track{display:flex;gap:28px;margin:0;padding:0;list-style:none;will-change:transform}
.lg-card{--w:min(540px,80vw);position:relative;flex:none;width:var(--w);min-height:clamp(300px,34vw,400px);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;justify-content:space-between;
  border-radius:6px;border:0;background:rgba(243,238,229,.045);
  -webkit-backdrop-filter:blur(16px) saturate(1.5) brightness(1.08);backdrop-filter:blur(16px) saturate(1.5) brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(255,244,228,.22),inset 0 -1px 0 rgba(0,0,0,.45),0 40px 70px -30px rgba(0,0,0,.75);
  transform-origin:50% 60%;will-change:transform,opacity;transition:opacity .5s var(--ease)}
.lg-svg .lg-card{backdrop-filter:url(#pg-lg) blur(1.6px) saturate(1.55) brightness(1.1)}
.lg-card .lg-n{font:600 11px/1 var(--body);letter-spacing:.14em;color:rgba(243,238,229,.6)}
.lg-card .lg-t{position:relative;z-index:1;font:500 clamp(28px,2.9vw,44px)/1.06 var(--disp);letter-spacing:-.03em;color:var(--chalk);text-wrap:balance;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.lg-rim,.lg-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.lg-rim{padding:1.5px;background:linear-gradient(var(--la,135deg),rgba(255,236,210,.9),rgba(255,236,210,.1) 28%,rgba(255,236,210,0) 50%,rgba(255,236,210,.08) 72%,rgba(255,236,210,.32));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.lg-glare{background:radial-gradient(circle at var(--gx,30%) var(--gy,10%),rgba(255,240,220,.2),rgba(255,240,220,0) 46%);mix-blend-mode:screen}
.lg-ui{display:flex;align-items:center;gap:18px;margin-top:34px}
.lg-ui button{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(243,238,229,.22);border-radius:2px;background:rgba(23,21,18,.4);color:var(--chalk);cursor:pointer;transition:border-color .25s,background .25s,opacity .25s}
.lg-ui button:hover{border-color:var(--chalk)}
.lg-ui button[disabled]{opacity:.3;cursor:default}
.lg-dots{display:flex;gap:8px;margin-left:8px}
.lg-dots i{display:block;width:34px;height:2px;background:rgba(243,238,229,.2);transition:background .4s,width .5s var(--ease)}
.lg-dots i.on{background:var(--red);width:56px}
.lg-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- departures-board date ---- */
.date.odo-on{display:flex;align-items:flex-end;line-height:1.4;margin:-.3em 0 -.3em}
.date .odo{display:inline-block;height:1.4em;overflow-x:visible;overflow-y:clip}
.date .odo-c{display:block}
.date .odo-c i{display:flex;justify-content:center;height:1.4em;font-style:normal}
.date .odo-c b{font-weight:inherit;white-space:nowrap}
.date em .odo-c i{color:var(--red)}
.date .odo-sp{display:inline-block;flex:none;width:.24em;min-width:.24em}
.date em{display:inline-flex;align-items:flex-end}

/* ---- founders: stages light in sequence ---- */
.stages.seq li{position:relative;opacity:.42;transition:opacity .6s var(--ease)}
.stages.seq li::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.stages.seq li.on{opacity:1}
.stages.seq li.on::after{transform:scaleX(1)}

/* ---- footer finale: fitted wordmark, lit by the lamp ---- */
.nw{white-space:nowrap}
.foot .top .disp{text-wrap:balance}
.foot .wm{position:relative;font-size:clamp(56px,12.6vw,240px);line-height:1;padding:.06em 0 .24em;margin-left:-.035em;letter-spacing:-.045em}
.foot .wm:hover span{transform:none}
.foot .wm span{transition:none}
.foot .wm.lamp span{color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:radial-gradient(circle 1.7em at calc(var(--fx,-400px) - var(--ox,0px)) var(--fy,50%),#FFF7EC 0%,#F3EEE5 26%,#B4AEA3 60%,#6A645B 100%)}
.foot .wm.lamp .a{background-image:radial-gradient(circle 1.7em at calc(var(--fx,-400px) - var(--ox,0px)) var(--fy,50%),#FF7A5C 0%,#D23A22 30%,#A5341F 62%,#7A2E20 100%)}

/* ---- details from the audit ---- */
.cur.drag{width:84px;height:84px;margin:-42px 0 0 -42px;background:rgba(243,238,229,.06)}
.badge .top{flex-direction:column;gap:5px}
.badge .stampx{top:auto;bottom:112px;right:16px}
.tog[aria-pressed=true]{border-color:rgba(243,238,229,.6);color:var(--chalk)}
.hdr[data-tone=light] .tog[aria-pressed=true]{border-color:var(--oil);color:var(--oil)}
.hdr[data-tone=red] .tog[aria-pressed=true]{border-color:#fff;color:#fff}
.stages{counter-reset:st}
.stages li{counter-increment:st}
.stages li:not(:has(b))::before{content:"0" counter(st);font:600 11px/1 var(--body);letter-spacing:.14em;opacity:.8}

/* ---- buttons: a single glint of light crosses on hover ---- */
.btn::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 62%);mix-blend-mode:soft-light;transform:translateX(-130%)}
.btn:hover::after{transform:translateX(130%);transition:transform .7s var(--ease)}

.lg-card .lg-n{display:flex;align-items:baseline;gap:14px}
.lg-card .lg-k{font:500 clamp(22px,1.9vw,28px)/1 var(--disp);letter-spacing:-.02em;text-transform:none;color:var(--chalk)}
.bul li b[data-k]{font-weight:600;margin-right:.3em}

/* ---- the badge hangs from its lanyard ---- */
.badge-wrap{transform-origin:50% 0;will-change:transform}

/* ---- small screens: the date and the seat map always fit ---- */
.date{font-size:min(24vw,clamp(110px,14.5vw,250px))}
@media (max-width:520px){
  .badge{padding:22px}
  .badge .seats{gap:8px;padding:16px 12px}
  .badge .tbl .ds{gap:4px}
  .badge .tbl i{width:11px;height:11px}
  .badge .fo span{font-size:9px}
}

/* ---- split headings: room for descenders (g, y, p, j) inside the reveal mask ---- */
.ln{padding-bottom:.2em;margin-bottom:-.2em}

/* ---- text over photographs keeps a soft shadow for legibility ---- */
.sec:has(> .bgimg) .w :is(h2,p,li,summary,label,.lede,.tl){text-shadow:0 1px 22px rgba(12,11,10,.6)}
.sec:has(> .bgimg) .panel :is(p,label){text-shadow:none}

/* ---- steps without a note use the full row ---- */
.step:has(> p:empty) h3{grid-column:span 2}
.step > p:empty{display:none}

/* ---- labels are neutral; red stays for the decision ---- */
.mono.red{color:var(--mute)}
.lt .mono.red{color:var(--mute-d)}
.cards .card:nth-child(6) .mono.red{color:var(--sig-on-chalk)}

/* ---- community: three ways in, aligned; the strongest way is the dark tile ---- */
.ways{align-items:stretch}
.ways .tile:nth-child(2){margin-top:0}
.ways .tile:last-child{background:var(--oil);border-color:var(--oil);color:var(--chalk)}
.ways .tile:last-child .muted{color:var(--mute)}
.ways .tile:last-child::before{background:var(--sig-on-chalk)}
.ways .tile:last-child:hover .muted{color:#fff}

/* ---- FAQ marks turn red only when open; the brief is taped with plain masking tape ---- */
.faq summary .pl::before,.faq summary .pl::after{background:var(--mute)}
.faq details[open] summary .pl::before,.faq details[open] summary .pl::after{background:var(--sig-on-oil)}
.lt .faq summary .pl::before,.lt .faq summary .pl::after{background:var(--mute-d)}
.brief::before{background:rgba(214,200,172,.8);box-shadow:0 1px 2px rgba(23,21,18,.12)}

/* ---- phones: team in two columns, tiles sized to their content ---- */
@media (max-width:900px){
  .g4:has(> .person){grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}
  .person figcaption .disp{font-size:clamp(28px,7.5vw,34px)}
  .person .portrait .ini{font-size:88px}
  .ways .tile{min-height:220px;gap:32px}
}

/* ---- type weights exactly as Brand Book 3.1: Melodrama Medium for display, Switzer 400 reading / 600 labels ---- */
.step .n,.drawer nav a,.tpanel .n,.tile .big,.jst .lab{font-weight:500}
.mq>div{font-size:clamp(28px,2.6vw,40px)}
.nav a,.fld label,.badge .stampx,.story .stamp,.mq>div .sl,.story .card .mono b{font-weight:600}
/* headline sizes (40px and up) are Melodrama Medium; subheads (28-36px) stay Regular */
.step h3,.get p,.foot .top .disp,.foot .wm,.who li .disp,.gains .disp,.rows .disp,.tpanel p,.jpanel p,.next .say,.brief .dec,.ok h3,.lg-t,.g2 > p.disp,.g2 p.disp,.found .h2{font-weight:500}
.faq summary{font-size:clamp(28px,2.4vw,36px)}
/* Melodrama never below 28px, never synthesised bold */
.next .say{font-size:clamp(28px,2.2vw,34px) !important}
.disp .tl,.say .tl,.who .disp .tl{font-weight:inherit}
.lg-card .lg-k{font-size:clamp(28px,2.2vw,32px)}
.portrait .ini{font-weight:500}

/* =====================================================================
   Hero case file: sheets pile up, a clear step bar, the decision plays out
   ===================================================================== */
.story{width:min(500px,86vw)}
.story .card{transform-origin:40% 60%;will-change:transform,opacity;box-shadow:0 30px 60px -24px rgba(0,0,0,.85),0 2px 0 rgba(255,255,255,.35) inset;background:rgba(243,238,229,.97)}
.story .card .disp{font-size:clamp(30px,2.6vw,38px)}

.story .rail.steps-bar{position:absolute;left:0;right:auto;top:-230px;transform:none;flex-direction:row;align-items:center;gap:26px;counter-reset:stp;transition:opacity .4s}
.story .rail.steps-bar span{counter-increment:stp;flex-direction:row;gap:10px;font-size:12px;color:rgba(243,238,229,.42)}
.story .rail.steps-bar span::before{content:"0" counter(stp);width:auto;height:auto;background:none;color:inherit;font:600 11px/1 var(--body);letter-spacing:.14em;padding:5px 7px;border:1px solid currentColor;border-radius:2px;transition:background .4s,color .4s,border-color .4s}
.story .rail.steps-bar span.done{color:rgba(243,238,229,.8)}
.story .rail.steps-bar span.on{color:var(--chalk)}
.story .rail.steps-bar span.on::before{width:auto;background:var(--chalk);color:var(--oil);border-color:var(--chalk)}
.story .rail.steps-bar span + span{position:relative}
.story .rail.steps-bar span + span::after{content:"";position:absolute;left:-20px;top:50%;width:14px;height:1px;background:rgba(243,238,229,.3)}

/* the options sheet: A and B get struck, C gets the red mark (red marks the decision) */
.story .card li{position:relative;transition:color .35s}
.story .card li.pick{font-weight:400}
.story .card li.x{color:var(--mute-d);text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:var(--oil)}
.story .card li.on{font-weight:600}
.story .card li.on b{color:var(--sig-on-chalk)}
.story .card li.pick::after{content:"";position:absolute;left:0;right:20%;bottom:6px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.story .card li.pick.on::after{transform:scaleX(1)}
.story .stamp{z-index:2}
.story .card{background:#F1ECE3}
@media (max-width:900px){
  .story{top:57%;bottom:auto;width:calc(100vw - 2*var(--gut) - 22px)}
  .story .card .disp{font-size:28px}
}

/* =====================================================================
   Hyper-real objects: paper, card stock, ink, lamination, steel.
   Light comes from above (the room's lamps), so shadows fall downward.
   ===================================================================== */
:root{
  --lift-lt:0 1px 1px rgba(23,21,18,.1),0 2px 4px rgba(23,21,18,.08),0 10px 18px -8px rgba(23,21,18,.22),0 34px 60px -30px rgba(23,21,18,.38);
  --lift-dk:0 1px 1px rgba(0,0,0,.35),0 4px 8px rgba(0,0,0,.25),0 18px 30px -12px rgba(0,0,0,.55),0 50px 80px -36px rgba(0,0,0,.8);
  --sheen:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(120,100,70,.12);
}

/* chalk sections are card stock, not flat colour */
.tex .sec.lt{background-image:var(--tex-stock);background-size:256px}

/* hero case-file sheets: laid paper, edges catching the lamp */
.tex .story .card{background:var(--tex-paper) 0 0/256px,linear-gradient(172deg,#F7F3EB 0%,#EFE9DE 60%,#E7E0D3 100%);
  box-shadow:var(--sheen),inset 0 0 40px -18px rgba(120,96,60,.35),var(--lift-dk)}

/* pencil marks on the options sheet */
.story .card li .tx{position:relative}
.story .card li.x{text-decoration:none}
.story .card li.x .tx::after{content:"";position:absolute;left:-4px;right:-6px;top:50%;height:8px;margin-top:-4px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5 C18 3.4 34 5.6 52 4 S84 3.2 99 4.6' stroke='%232b2622' stroke-width='1.5' fill='none' stroke-linecap='round' opacity='.82'/%3E%3Cpath d='M3 4.4 C30 4.9 60 3.6 97 4' stroke='%232b2622' stroke-width='.6' fill='none' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  transform-origin:left;animation:pencil .45s var(--ease) both}
.story .card li.pick::after{display:none}
.story .card li.pick .tx::before{content:"";position:absolute;left:-6px;right:-10px;bottom:-9px;height:12px;pointer-events:none;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C24 4 50 9 78 5.6 S108 4.4 118 6.2' stroke='%23D23A22' stroke-width='2.2' fill='none' stroke-linecap='round' opacity='.9'/%3E%3Cpath d='M8 9.2 C40 7 76 9.4 112 7.4' stroke='%23D23A22' stroke-width='1.1' fill='none' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.story .card li.pick.on .tx::before{transform:scaleX(1)}
@keyframes pencil{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* stamps: rubber-stamp ink, uneven and worn */
.tex .story .stamp,.tex .badge .stampx{-webkit-mask-image:var(--tex-ink);mask-image:var(--tex-ink);-webkit-mask-size:160px;mask-size:160px}
.story .stamp{background:rgba(251,248,242,.4);mix-blend-mode:multiply}

/* decision board: index cards with ruled lines under your writing */
.tex .cards .card:not(.cta){background-color:#F3EEE4;
  background-image:radial-gradient(360px circle at var(--mx,-500px) var(--my,-500px),rgba(255,255,255,.55),rgba(255,255,255,0) 65%),var(--tex-paper),linear-gradient(172deg,rgba(255,255,255,.4),rgba(255,255,255,0) 45%);
  background-size:auto,256px,auto;border-color:rgba(23,21,18,.1);box-shadow:var(--sheen),var(--lift-lt)}
.cards .card textarea{line-height:23.2px;background-image:linear-gradient(to bottom,transparent calc(100% - 1px),rgba(143,138,128,.34) calc(100% - 1px));background-size:100% 23.2px;background-position:0 12px;background-attachment:local}
.cards .card:hover{box-shadow:var(--sheen),0 2px 3px rgba(23,21,18,.1),0 18px 30px -12px rgba(23,21,18,.3),0 50px 70px -36px rgba(23,21,18,.45)}

/* seat badge: laminated card, punched slot, woven lanyard, metal clasp */
.tex .badge{background:linear-gradient(118deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 24%,rgba(255,255,255,0) 70%,rgba(255,255,255,.18) 100%),var(--tex-paper) 0 0/256px,#F4EFE6;
  box-shadow:0 0 0 1px rgba(23,21,18,.08),inset 0 0 0 3px rgba(255,255,255,.45),inset 0 0 0 4px rgba(23,21,18,.04),var(--lift-lt)}
.badge .clip{background:#D8D0C2;box-shadow:inset 0 2px 3px rgba(23,21,18,.55),inset 0 -1px 0 rgba(255,255,255,.4),0 1px 0 rgba(255,255,255,.9)}
.strap{background:repeating-linear-gradient(90deg,rgba(0,0,0,.1) 0 1px,transparent 1px 3px),repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 2px),linear-gradient(90deg,#8F2414 0%,#C9361F 22%,#D23A22 50%,#C23420 78%,#8A2312 100%);
  box-shadow:inset 0 -10px 12px -8px rgba(0,0,0,.35),0 6px 10px -4px rgba(0,0,0,.25)}
.strap::after{content:"";position:absolute;left:50%;bottom:18px;width:24px;height:18px;margin-left:-12px;border-radius:3px;
  background:linear-gradient(180deg,#F1EEE8 0%,#B9B2A6 45%,#7C766C 100%);box-shadow:0 2px 3px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 2px rgba(0,0,0,.2)}

/* the brief: taped paper; masking tape with torn ends */
.tex .brief{background:var(--tex-paper) 0 0/256px,linear-gradient(178deg,#FBF8F2,#EFE9DE);box-shadow:var(--sheen),var(--lift-lt)}
.tex .brief::before{background:var(--tex-paper) 0 0/128px,rgba(222,208,178,.84);box-shadow:none;mix-blend-mode:multiply;
  clip-path:polygon(0 12%,3% 0,6% 14%,9% 2%,91% 0,94% 12%,97% 1%,100% 10%,98% 30%,100% 52%,97% 70%,100% 88%,96% 100%,92% 90%,8% 100%,4% 88%,0 100%,2% 72%,0 52%,3% 34%)}

/* community tiles are card stock */
.tex .lt .tile:not(:last-child){background-image:var(--tex-paper);background-size:256px;box-shadow:var(--sheen),var(--lift-lt)}
.tex .ways .tile:last-child{box-shadow:var(--lift-lt)}

/* the roller door: brushed steel slats with rivets */
.gate .curtain::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 20px 30px,rgba(255,238,214,.45) 0 1.1px,rgba(10,9,8,.7) 1.9px 2.8px,transparent 3.4px) 0 0/100% 64px repeat-y,
    radial-gradient(circle at calc(100% - 20px) 30px,rgba(255,238,214,.45) 0 1.1px,rgba(10,9,8,.7) 1.9px 2.8px,transparent 3.4px) 0 0/100% 64px repeat-y,
    var(--tex-steel) 0 0/512px 64px}
@media (max-width:900px){.gate .curtain::after{background-size:100% 46px,100% 46px,512px 46px;background-position:0 -8px,0 -8px,0 0}}

/* no open challenge: a painted pegboard shadow board with the tools missing */
.tex .empty{background-color:#E4DCCF;
  background-image:radial-gradient(circle at calc(50% + .9px) calc(50% + .9px),rgba(255,255,255,.75) 0 3px,transparent 3.6px),
    radial-gradient(circle at 50% 50%,#2f2923 0 2.3px,rgba(47,41,35,.5) 2.9px,transparent 3.5px),
    var(--tex-paper),radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,.45),rgba(255,255,255,0) 60%);
  background-size:28px 28px,28px 28px,256px,auto;
  box-shadow:inset 0 0 0 1px rgba(23,21,18,.1),inset 0 -40px 60px -40px rgba(23,21,18,.28),var(--lift-lt)}
.tex .empty svg g{animation:none;stroke-dasharray:none;stroke:rgba(23,21,18,.2);stroke-width:5;stroke-linejoin:round;fill:rgba(23,21,18,.16)}

/* the recommendation is stamped onto the sheet itself */
.story .stamp{right:26px;bottom:18px;background:transparent}

/* header: nav labels never wrap; tighter spacing on mid-size laptops */
.nav a{white-space:nowrap}
@media (max-width:1400px){ .nav a{padding:12px 9px;font-size:14px} .nav a::after{left:9px;right:9px} .hdr .w{gap:18px} }
@media (max-width:1279px){ .nav,.hdr-r .hide-m{display:none} .menu{display:inline-flex} }