/* Assembled page styles. Each source section's CSS is nested under its mount id so every
   section keeps the class names it was built with (.sec, .g, .head, .mq-* all recur across
   files). Only :root custom properties, @keyframes and html/body rules are hoisted. */
:root{--mq-cw:196px;--mq-gap:14px;--bar:52px}
@keyframes mqDown{from{transform:translateY(calc(-1 * var(--shift,50%)))}to{transform:translateY(0)}}
@keyframes crawl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:860px){:root{--mq-cw:150px;--mq-gap:10px}}
@keyframes drl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes drr{from{transform:translateX(-50%)}to{transform:translateX(0)}}
:root{--mq-cw:196px;--mq-gap:14px}

/* ================= §01 ================= */
#mount-01{
.top-bar{position:fixed;top:0;left:0;right:0;height:var(--bar);display:flex;align-items:center;justify-content:space-between;padding:0 48px;background:var(--black);z-index:20}
.top-bar img{height:18px;display:block}
.top-nav{display:flex;gap:28px}
.top-nav a{border-bottom:none;color:var(--text-secondary)}
.top-nav a:hover{color:var(--white)}
.hero{position:relative;margin-top:var(--bar);min-height:calc(100svh - var(--bar));display:flex;flex-direction:column;justify-content:center;overflow:hidden}
/* ---- field: APPROVED §01 geometry. locked - do not change perspective, angle or offsets
   without confirming first. scoped to .hero so §07's mirrored field stays independent. ---- */
.hero .mq-zone{position:absolute;top:0;bottom:0;right:0;left:auto;width:min(58.334%,900px);overflow:hidden;border-left:1px solid var(--hairline);z-index:0}
.hero .mq-stage{position:absolute;inset:0;perspective:300px;perspective-origin:50% 50%}
.hero .mq-plane{position:absolute;top:-135%;right:-9%;width:max-content;height:calc(340% + 20vw);transform:translateX(-160px) translateY(0px) translateZ(-30px) rotateX(20deg) rotateY(-10deg) rotateZ(20deg);transform-origin:50% 50%;display:flex;gap:var(--mq-gap)}
.hero .mq-col{position:relative}
/* the fade lives INSIDE the plane, so it inherits the 3D transform and runs diagonally along the far column */
.hero .mq-col.fade::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,#000 0%,rgba(0,0,0,.94) 30%,rgba(0,0,0,.62) 62%,rgba(0,0,0,.18) 88%,transparent 100%);pointer-events:none;z-index:3}
.mq-zone{position:absolute;top:0;bottom:0;right:0;left:auto;width:min(58.334%,900px);overflow:hidden;border-left:1px solid var(--hairline);z-index:0}
.mq-stage{position:absolute;inset:0;perspective:425px;perspective-origin:70% 36%}
.mq-plane{position:absolute;top:-170%;right:-26%;width:max-content;height:calc(400% + 60vw);transform:translateX(-100px) translateZ(-100px) rotateX(20deg) rotateY(-10deg) rotateZ(20deg);transform-origin:75% 30%;display:flex;gap:var(--mq-gap)}
.mq-col{width:var(--mq-cw);flex:0 0 var(--mq-cw);overflow:hidden;height:100%}
.mq-track{will-change:transform;animation:mqDown var(--dur,90s) linear infinite}
.mq-col.rev .mq-track{animation-direction:reverse}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none!important}}
/* ---- card: square corners, no fill, hairline rules only ---- */
.mq-pc{margin:0 0 var(--mq-gap);border-radius:0;background:none;border:none}
.mq-pc-img{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;border:1px solid var(--hairline);border-bottom:none}
.hero .mq-pc-img{border:none}
/* the tile image lives ONLY on ::before so the hairline border stays unfiltered.
   DEVIATION from the DS (imagery is B/W there): tiles run in full colour by request. */
.mq-pc-img::before{content:"";position:absolute;inset:0;background-image:var(--tile,none);background-size:cover;background-position:center top}
.mq-pc-img.is-placeholder::before{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 1px,transparent 1px 9px);filter:none}
.mq-pc-img span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);color:var(--grey-50)}
.mq-pc-body{padding:10px 0 0;border-top:1px solid var(--hairline-strong)}
.hero .mq-pc-body{border-top:none}
.mq-pc-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.mq-pc-h,.mq-pc-v{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:var(--tracking-label);color:var(--white)}
.mq-pc-h{text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq-pc-v{flex:0 0 auto}
.mq-pc-v small{font-size:var(--text-micro);color:var(--grey-50);letter-spacing:var(--tracking-label);margin-left:5px}
.mq-pc-cap{margin-top:6px;font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--grey-50);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.mq-pc-eng{margin-top:6px;display:flex;gap:14px;font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:.06em;color:var(--grey-50)}
/* ---- copy block: cols 1-5, real space ---- */
.hero-copy{position:relative;z-index:2;padding:0 48px;width:41.666%;display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.hero-copy h1{font-size:clamp(34px,3.4vw,50px)}
.hero-copy .sub{margin:0;color:var(--text-secondary);max-width:34em}
.ctas{display:flex;gap:14px;flex-wrap:wrap}
.proof-line{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.06em;color:var(--text-tertiary);margin:0}
.proof-line b{color:var(--white);font-weight:400}
/* ---- ticker ---- */
.ticker-lead{display:block;padding:14px 48px;color:var(--text-secondary)}
.ticker{position:relative;overflow:hidden;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:var(--black)}
.ticker-track{display:flex;width:max-content;animation:crawl 90s linear infinite}
.ticker-track.rev{animation-direction:reverse}
.ticker + .ticker{border-top:0}
.ticker-track span{display:flex;align-items:center;height:52px;white-space:nowrap;padding-right:44px}
.ticker-track span::after{content:"";width:1px;height:14px;background:var(--hairline);margin-left:44px}
.ticker-track img{display:block;width:auto;opacity:.78}
/* the mark is trimmed to its ink, so the hanging g pushes the letterforms above optical centre */
.ticker-track img[src$="gamma.png"]{transform:translateY(4px)}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}
.ticker-foot{display:flex;justify-content:space-between;padding:14px 48px}
@media (max-width:860px){.top-bar{padding:0 16px}.top-nav{display:none}.hero{min-height:auto;padding-bottom:0}.hero-copy{width:100%;padding:36px 16px 0;gap:20px}.mq-zone{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;height:52vh;margin:32px 0 0 16px;border-left:1px solid var(--hairline);border-top:1px solid var(--hairline)}.hero .mq-stage{perspective:300px;perspective-origin:50% 50%}.hero .mq-plane{top:-110%;right:-46%;height:calc(300% + 60vw);transform:translateX(-40px) translateZ(-100px) rotateX(20deg) rotateY(-10deg) rotateZ(20deg);transform-origin:50% 50%}.mq-stage{perspective:120svh;perspective-origin:58% 30%}.mq-plane{top:-110%;right:-28%;height:calc(300% + 60vw);transform:rotateX(15deg) rotateY(-8deg) rotateZ(15deg);transform-origin:74% 30%}.ctas{width:100%;flex-direction:column}.ctas button{width:100%;justify-content:center}.ticker-lead,.ticker-foot{padding:12px 16px}}
}

/* ================= §02 ================= */
#mount-02{
.sec{padding:96px 48px 0}
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.meta{margin-bottom:40px}
/* --- upper zone: text left (cols 1-4), image dominant (cols 5-11) --- */
.upper{align-items:start}
.copy{grid-column:1/5;align-self:stretch}
/* the left column pins while the figure scrolls past, releasing at the foot of the upper zone -
   i.e. just above the hairline over the three page types. the figure is untouched. */
.copy .pin{position:sticky;top:calc(var(--bar) + 40px);display:flex;flex-direction:column;gap:22px}
.copy h2{font-size:clamp(24px,2vw,30px);max-width:20ch}
.copy p{margin:0;color:var(--text-secondary);font-size:var(--text-body);line-height:var(--leading-body)}
.copy p b{color:var(--white);font-weight:400}
.fig{grid-column:5/12;margin:0}
.fig img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.15) brightness(.92)}
.figmeta{grid-column:12/13;text-align:right;white-space:nowrap}
/* --- base block: three columns on one baseline. UNCHANGED geometry - the stagger is driven by
   the block's own travel through the viewport, so it costs no extra scroll distance and adds
   no void at either end. --- */
.base{margin-top:56px;border-top:1px solid var(--hairline-strong);padding-top:22px}
.card{display:flex;flex-direction:column;gap:12px;padding-right:24px;transform:translateY(calc((1 - var(--t,1)) * 96px));opacity:calc(.12 + var(--t,1) * .88);will-change:transform}
.card+.card{border-left:1px solid var(--hairline);padding-left:24px}
.card h3{font-size:20px}
.card p{margin:0;color:var(--text-secondary);font-size:13.5px;line-height:1.5}
.spec{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:14px;border-top:1px solid var(--hairline)}
.spec span{display:grid;grid-template-columns:88px 1fr;gap:10px;font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-tertiary)}
.spec span i{font-style:normal;opacity:.62}
.closing{margin-top:28px;padding-bottom:96px}
.closing p{grid-column:6/13;margin:0;font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.05em;line-height:1.7;color:var(--text-tertiary);text-align:right}
@media (prefers-reduced-motion:reduce){.card{transform:none!important;opacity:1!important}}
@media (max-width:860px){.sec{padding:56px 16px 0}/* at this width the three columns stack, so there is no row to arrive into - the stagger is
   dropped entirely and the cards sit static */
.card{transform:none!important;opacity:1!important}.g{grid-template-columns:repeat(4,1fr);gap:12px}.meta{margin-bottom:24px}.copy{grid-column:1/5}.copy .pin{position:static;top:auto;gap:18px}.fig{grid-column:1/5;margin-top:28px}.figmeta{grid-column:1/5;text-align:left;margin-top:8px}.base{margin-top:36px;padding-top:18px}.card{grid-column:1/5;padding:0 0 20px}.card+.card{border-left:none;border-top:1px solid var(--hairline);padding:20px 0 0}.closing{margin-top:22px;padding-bottom:56px}.closing p{grid-column:1/5;text-align:left}}
}

/* ================= §03 ================= */
#mount-03{
a{color:var(--white);text-decoration:none}
a:hover{color:var(--grey-70)}
.sec{padding:0 0 0 48px;position:relative}
.top{border-top:1px solid var(--hairline);padding:16px 48px 0 0;display:flex;justify-content:space-between}
.top span{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-tertiary)}
/* --- the spine: one grid, left cell ruled on its right edge, so the rule is continuous for the
   whole section by construction and every rung starts exactly on it. --- */
.eng{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);margin-top:44px}
.side{border-right:1px solid var(--hairline);padding:0 32px 0 0}
.sticky{position:sticky;top:44px;padding:36px 0 64px;display:flex;flex-direction:column;gap:20px}
.sticky h2{margin:0;font-size:clamp(28px,2.6vw,38px)}
.sticky .intro{margin:0;color:var(--text-secondary);font-size:var(--text-body);line-height:var(--leading-body);max-width:30ch}
.sticky .count{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-tertiary);line-height:1.6}
.stages{min-width:0}
/* rungs: border-top on each stage, flush to the spine at x=0 and running to the page edge */
.stage{border-top:1px solid var(--hairline);padding:34px 48px 56px 32px;display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 24px;align-items:start}
.stage:first-child{border-top:0}
/* each step pins under the bar while the next scrolls up over it. the full-height cell and the
   opaque ground are what make the hand-off clean - without them a short step peeks out below
   the one covering it. later steps paint over earlier ones by DOM order. */
.stage{position:sticky;top:44px;background:var(--black);min-height:calc(100svh - 44px);align-content:start}
.num{font-family:var(--font-display-flat);font-weight:var(--weight-ultralight);font-size:clamp(30px,3.1vw,44px);line-height:.8;letter-spacing:-.02em;color:var(--grey-30)}
.txt h3{font-size:22px;margin:0 0 12px}
.txt p{margin:0;color:var(--text-secondary);font-size:14px;line-height:1.6;max-width:56ch}
.metrics{display:flex;flex-direction:column;gap:4px;margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline);max-width:56ch}
.metrics span{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-tertiary)}
.fig{grid-column:2/3;margin:26px 0 0}
.fig img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.15) brightness(.9)}
.cap{margin-top:10px}
/* --- scroll reveal: FIGURES ONLY. The diagram resolves as one unit - it arrives fractionally
   low and fractionally under-scale and settles, like a plate being registered. Copy never
   animates: §03 has to survive a fast skim. Fires once, on first entry. --- */
.fig{opacity:0;transform:translateY(18px) scale(.985);transform-origin:50% 100%;will-change:opacity,transform}
.fig.in{opacity:1;transform:none;transition:opacity 380ms linear,transform 520ms cubic-bezier(.16,.7,.3,1)}
@media (prefers-reduced-motion:reduce){.fig{opacity:1;transform:none}.fig.in{transition:none}}
/* --- scale arc: the figures widen as the system compounds, with one deliberate compression at
   3.3 so the run has a beat instead of a ramp. 3.5 breaks the right margin and closes it. --- */
.s1 .fig{width:58%}
.s1 .fig img{opacity:.7}
.s2 .fig{width:68%}
.s3 .fig{width:44%;margin-left:auto}
.s4 .fig{width:70%}
.s5 .fig{width:62%}
.s5 .fig img{aspect-ratio:4/3;object-fit:cover;object-position:center}
@media (max-width:1180px){.eng{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
@media (max-width:860px){/* no sticky at this width: the spine turns horizontal, the block sits at the top of the run
   and scrolls away normally, and every rung runs the full measure */
.sec{padding:0 0 0 16px}.top{padding-right:16px}.eng{display:block;margin-top:26px}.side{border-right:0;border-bottom:1px solid var(--hairline);padding:0 16px 0 0}.sticky{position:static;top:auto;padding:0 0 28px;gap:14px}.sticky .intro{max-width:none}.stage{position:static;top:auto;min-height:0;padding:24px 16px 40px 0;grid-template-columns:40px minmax(0,1fr);gap:0 14px}.stage:first-child{border-top:1px solid var(--hairline)}.txt h3{font-size:18px}.fig{margin-top:20px}.s1 .fig,.s2 .fig,.s3 .fig,.s4 .fig{width:100%;margin-left:0}.s5 .fig{width:100%}}
}

/* ================= §04 ================= */
#mount-04{
a{color:var(--white);text-decoration:none;border-bottom:1px solid var(--hairline)}
a:hover{border-bottom-color:var(--white)}
.sec{padding:0 48px 120px}
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
/* --- entry reset: hairline + a deliberately empty band after five pinned viewports --- */
.reset{border-top:1px solid var(--hairline);min-height:20svh;align-content:start;padding-top:16px}
.reset .ref{grid-column:12/13;text-align:right;white-space:nowrap;color:var(--text-tertiary)}
.meta{margin-bottom:36px}
/* --- head: statement left, argument right --- */
.head{align-items:start;margin-bottom:80px}
.head h2{grid-column:1/6;font-size:clamp(24px,2vw,30px);max-width:20ch}
.body{grid-column:7/12;display:flex;flex-direction:column;gap:18px}
.body p{margin:0;font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-secondary)}
.body p.concl{color:var(--white)}
/* --- comparison: two identical cells, one shared rule, one dividing rule --- */
.cmp{border-top:1px solid var(--hairline-strong);gap:0}
.side{grid-column:span 6;display:flex;flex-direction:column;padding:16px 24px 0 0}
.side+.side{border-left:1px solid var(--hairline);padding:16px 0 0 24px}
.side figure{margin:0}
.side img,.side video{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;filter:grayscale(1) contrast(1.08);background:var(--black)}
.cap{margin-top:16px;padding:12px 0 0;border-top:1px solid var(--hairline);font-family:var(--font-mono);font-size:12.5px;letter-spacing:.05em;line-height:1.4;color:var(--white)}
@media (max-width:860px){.sec{padding:0 16px 64px}.g{grid-template-columns:repeat(4,1fr);gap:12px}.reset{min-height:12svh;padding-top:12px}.reset .ref{grid-column:1/5;text-align:left}.meta{margin-bottom:22px}.head{margin-bottom:44px}.head h2,.body{grid-column:1/5}.body{margin-top:20px;gap:14px}/* side-by-side is the mechanic — it holds at 390, just smaller */
.cmp{gap:0}.side{grid-column:span 2;padding:12px 8px 0 0}.side+.side{padding:12px 0 0 8px}.side>.ds-index-label,.side>*:first-child{flex-direction:column;align-items:flex-start;gap:2px}.side>*:first-child>*{white-space:nowrap}.cap{margin-top:10px;padding-top:8px;font-size:11px;letter-spacing:.03em}}
}

/* ================= §05 ================= */
#mount-05{
a{color:var(--white);text-decoration:none}
.sec{padding:0 0 120px}
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:0 48px}
.top{border-top:1px solid var(--hairline);padding-top:16px;margin-bottom:36px}
.meta{margin-bottom:44px}
.head{align-items:end;margin-bottom:56px}
.head h2{grid-column:1/7;font-size:clamp(24px,2vw,30px);max-width:22ch}
.head .count{grid-column:10/13;text-align:right;white-space:nowrap;color:var(--text-tertiary)}
/* --- index of four: one table, four rows. quiet by construction --- */
.rows{border-top:1px solid var(--hairline-strong)}
.row{display:grid;grid-template-columns:44px minmax(200px,3fr) minmax(240px,4fr) 116px;gap:24px;align-items:start;padding:22px 48px;border-bottom:1px solid var(--hairline);transition:background-color 120ms linear,color 120ms linear}
.row:hover,.row:focus-visible{background:var(--white);color:var(--black);outline:none}
.row .idx{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);color:var(--text-tertiary);padding-top:5px}
.row:hover .idx,.row:focus-visible .idx{color:var(--black);opacity:.5}
.nm h3{font-size:clamp(20px,1.7vw,26px);margin:0}
.nm .path{display:block;margin-top:8px;font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-tertiary)}
.row:hover .nm .path,.row:focus-visible .nm .path{color:var(--black);opacity:.5}
.row p{margin:0;font-size:13.5px;line-height:1.55;color:var(--text-secondary);max-width:44ch}
.row:hover p,.row:focus-visible p{color:var(--black);opacity:.7}
.th{width:116px;aspect-ratio:1/1;display:block;position:relative;overflow:hidden}
.th img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.95)}
.th.empty{border:1px solid var(--hairline);display:flex;align-items:flex-end;padding:8px}
.row:hover .th.empty,.row:focus-visible .th.empty{border-color:rgba(0,0,0,.3)}
.th.empty span{font-family:var(--font-mono);font-size:9px;letter-spacing:var(--tracking-label);line-height:1.3;text-transform:uppercase;color:var(--text-tertiary)}
.row:hover .th.empty span,.row:focus-visible .th.empty span{color:var(--black);opacity:.55}
@media (prefers-reduced-motion:reduce){.row{transition:none}}
@media (max-width:860px){.sec{padding:0 0 64px}.g{grid-template-columns:repeat(4,1fr);gap:12px;padding:0 16px}.top{padding-top:12px;margin-bottom:22px}.meta{margin-bottom:26px}.head{margin-bottom:32px}.head h2{grid-column:1/5}.head .count{grid-column:1/5;text-align:left;margin-top:12px}.row{grid-template-columns:78px 1fr;gap:14px;padding:18px 16px;align-items:start}.row .idx{grid-column:1/2;grid-row:1;padding-top:2px}.nm{grid-column:2/3;grid-row:1}.th{grid-column:1/2;grid-row:2;width:78px;margin-top:14px}.row p{grid-column:2/3;grid-row:2;margin-top:14px;font-size:13px}.nm h3{font-size:19px}.th.empty span{font-size:8px}}
}

/* ================= §06 ================= */
#mount-06{
a{color:var(--white);text-decoration:none}
.sec{padding:0 0 120px}
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:0 48px}
.top{border-top:1px solid var(--hairline);padding-top:14px;margin-bottom:22px}
.meta{margin-bottom:24px}
.head{align-items:start;margin-bottom:26px}
.head h2{grid-column:1/6;font-size:clamp(24px,2vw,30px);max-width:18ch}
.head .body{grid-column:7/12;margin:0;font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-secondary)}
.head .count{grid-column:12/13;text-align:right;white-space:nowrap;color:var(--text-tertiary)}
/* --- A. FIVE counter-scrolling reels. The BAND is a full viewport tall and splits five ways,
   so the rows are as large as one screen allows; the head scrolls above it.
   --tile-art is written from JS off the measured row height; it is deliberately NOT called
   --art, which is the per-element background-image variable on .tile .art. --- */
.reels{height:100svh;display:flex;flex-direction:column;border-top:1px solid var(--hairline)}
.reels.is-tight .mx{display:none}
.reel{flex:1;min-height:0;overflow:hidden;border-bottom:1px solid var(--hairline);padding:12px 0 0 48px}
.track{display:flex;width:max-content;will-change:transform}
.reel.a .track{animation:drl 108s linear infinite}
.reel.b .track{animation:drr 122s linear infinite;margin-left:-62px}
.reel.c .track{animation:drl 136s linear infinite;margin-left:-104px}
.reel.d .track{animation:drr 150s linear infinite;margin-left:-30px}
.reel.e .track{animation:drl 164s linear infinite;margin-left:-136px}
.tile{flex:0 0 var(--tile-art,108px);margin-right:12px}
.tile .art{position:relative;width:var(--tile-art,108px);aspect-ratio:1/1;border:1px solid var(--hairline);display:flex;align-items:flex-end;padding:8px;overflow:hidden}
/* artwork sits on ::before so the hairline stays unfiltered.
   DEVIATION from the DS (imagery is B/W there): campaign artwork runs in full colour by request. */
.tile .art::before{content:"";position:absolute;inset:0;background-image:var(--art,none);background-size:cover;background-position:center}
.tile .art span{font-family:var(--font-mono);font-size:9px;letter-spacing:var(--tracking-label);line-height:1.3;text-transform:uppercase;color:var(--text-tertiary)}
.tile .mx{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);text-transform:uppercase;line-height:1.5;padding-bottom:6px}
/* artist name in the display face - set at 17px so it holds against the 176px tile without
   crowding the mono metrics line beneath it */
/* one line only at this scale - names ellipsis rather than wrap, so every row's metrics
   line sits on the same baseline and the band stays inside one screen */
.tile .nm{margin-top:7px;font-family:var(--font-display);font-weight:var(--weight-semibold,600);font-size:14px;letter-spacing:-.02em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--white)}
.tile .mx{display:flex;white-space:nowrap;color:var(--white)}
.tile .mx b{font-weight:inherit;font-size:1.25em;line-height:0}
/* --- B. featured case --- */
.feat{padding:0 48px;margin-top:64px}
.feat .cap{display:flex;justify-content:space-between;border-top:1px solid var(--hairline-strong);padding-top:14px;margin-bottom:20px}
.feat .cap span{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase}
.feat .cap .l{color:var(--white)}
.feat .cap .r{color:var(--text-tertiary)}
.fgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.fart{position:relative;grid-column:1/7;aspect-ratio:4/5;border:1px solid var(--hairline);display:flex;align-items:flex-end;padding:14px;overflow:hidden}
.fart::before{content:"";position:absolute;inset:0;background-image:var(--art,none);background-size:cover;background-position:center 22%}
.fart span{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);line-height:1.5;text-transform:uppercase;color:var(--text-tertiary)}
.fmeta{grid-column:7/13;display:flex;flex-direction:column}
.fmeta h3{font-size:clamp(28px,2.9vw,40px);margin:0}
/* top five: chart listing. mono only, hairline between rows */
.five{margin-top:auto}
.five .hd{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-tertiary);border-bottom:1px solid var(--hairline-strong);padding-bottom:10px}
.five ol{list-style:none;margin:0;padding:0}
.five li{display:flex;justify-content:space-between;gap:24px;padding:12px 0;border-bottom:1px solid var(--hairline);font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--white)}
.five li i{font-style:normal;color:var(--text-tertiary);padding-right:14px}
.five li b{font-weight:400;white-space:nowrap}
/* four stats: one ruled band, hairline dividers only */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hairline-strong);margin-top:28px}
.stats div{padding:20px 24px 0 0}
.stats div+div{border-left:1px solid var(--hairline);padding-left:24px}
.stats div:last-child{padding-right:0}
.stats .n{position:relative;display:inline-block;font-family:var(--font-display-flat);font-weight:var(--weight-ultralight);font-size:clamp(38px,4vw,58px);line-height:.82;letter-spacing:-.02em;color:var(--white);font-variant-numeric:tabular-nums}
/* the final value sizes the box and stays invisible, so counting through narrower numbers
   cannot reflow the band. the live value is painted over it. */
.stats .n i{font-style:normal}
.stats .n .ghost{visibility:hidden}
.stats .n .live{position:absolute;left:0;right:0;top:0;white-space:nowrap;text-align:right}
.stats .k{display:block;margin-top:12px;font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-tertiary)}
/* --- C. see more: the closing rule --- */
.more{position:relative;isolation:isolate;display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-top:40px;border-top:1px solid var(--hairline-strong);padding:64px 48px;transition:background-color 120ms linear,color 120ms linear}
.more::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.78) 22%,rgba(0,0,0,.4) 48%,rgba(0,0,0,.88) 82%,rgba(0,0,0,.95) 100%),url(/assets/imagery/cta-texture.webp) 50% 38%/cover no-repeat #000}
.more:hover,.more:focus-visible{background:var(--white);color:var(--black);outline:none}
.more:hover::before,.more:focus-visible::before{opacity:0}
.more .ct{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-tertiary)}
.more:hover .ct,.more:focus-visible .ct{color:var(--black);opacity:.5}
.more .lb{font-size:clamp(20px,1.8vw,26px);font-family:var(--font-display);font-weight:var(--weight-semibold,600);letter-spacing:-.02em}
@media (prefers-reduced-motion:reduce){.reel .track{animation:none}.more{transition:none}}
@media (max-width:860px){.sec{padding:0 0 64px}.g{grid-template-columns:repeat(4,1fr);gap:12px;padding:0 16px}.top{padding-top:12px;margin-bottom:22px}.meta{margin-bottom:24px}.head{margin-bottom:28px}.head h2,.head .body{grid-column:1/5}.head .body{margin-top:16px}.head .count{grid-column:1/5;text-align:left;margin-top:12px}.reel{padding:12px 0 12px 16px}.track{margin-right:0}.reel.b .track{margin-left:-64px}.reel{padding-left:16px}.tile{margin-right:8px}.tile .nm{font-size:12px}.feat{padding:0 16px;margin-top:40px}.fgrid{grid-template-columns:repeat(4,1fr);gap:12px}.fart{grid-column:1/5;aspect-ratio:1/1}.fmeta{grid-column:1/5;margin-top:20px}.fmeta h3{font-size:24px}.five{margin-top:24px}.stats{grid-template-columns:1fr 1fr;margin-top:24px}.stats div{padding:14px 12px 14px 0}.stats div+div{padding-left:12px}.stats div:nth-child(3){border-left:none;padding-left:0;border-top:1px solid var(--hairline)}.stats div:nth-child(4){border-top:1px solid var(--hairline)}.stats .n{font-size:32px}.stats .k{margin-top:8px}.more{margin-top:26px;padding:18px 16px}.more .lb{font-size:19px}}
}

/* ================= §06b ================= */
#mount-06b{
a{color:var(--white);text-decoration:none}
/* --- 06b: a held breath. 244px tall, full-bleed texture, ruled top and bottom --- */
.band{position:relative;border-top:1px solid var(--hairline-strong);border-bottom:1px solid var(--hairline-strong);min-height:244px;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.band .bg{position:absolute;inset:0;z-index:-2}
.band .bg img{width:100%;height:100%;object-fit:cover;object-position:center 62%;filter:grayscale(1) contrast(1.05)}
.band .ov{position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.62)}
.inner{position:relative;width:100%;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:0 48px;align-items:center}
.txt{grid-column:1/8}
.line{margin:0;font-family:var(--font-display);font-size:clamp(18px,1.5vw,22px);line-height:1.25;letter-spacing:-.01em;text-wrap:pretty;max-width:30ch}
.crumb{margin:14px 0 0;font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:.1em;text-transform:uppercase;line-height:1.7;white-space:nowrap;color:var(--text-tertiary)}
.act{grid-column:10/13;display:flex;justify-content:flex-end}
.act button{white-space:nowrap}
@media (max-width:860px){.band{min-height:0;padding:34px 0;align-items:stretch}.inner{grid-template-columns:repeat(4,1fr);gap:0;padding:0 16px}.txt{grid-column:1/5}.line{font-size:19px;max-width:none}.act{grid-column:1/5;margin-top:20px}.act button{width:100%;justify-content:center}.crumb{margin-top:18px;padding-top:14px;border-top:1px solid var(--hairline);white-space:normal}}
}

/* ================= §07 ================= */
#mount-07{
/* --- §07 = §01's wall device, MIRRORED. zone left, copy right; rotY/rotZ signs flipped --- */
.feed{position:relative;min-height:78svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.mq-zone{position:absolute;top:0;bottom:0;left:0;right:auto;width:min(58.334%,900px);overflow:hidden;border-right:1px solid var(--hairline);z-index:0}
.mq-stage{position:absolute;inset:0;perspective:425px;perspective-origin:30% 36%}
.mq-plane{position:absolute;top:-170%;left:-26%;width:max-content;height:calc(400% + 60vw);transform:translateX(100px) translateZ(-100px) rotateX(20deg) rotateY(10deg) rotateZ(-20deg);transform-origin:25% 30%;display:flex;gap:var(--mq-gap)}
.mq-col{width:var(--mq-cw);flex:0 0 var(--mq-cw);overflow:hidden;height:100%}
.mq-track{will-change:transform;animation:mqDown var(--dur,90s) linear infinite}
.mq-col.rev .mq-track{animation-direction:reverse}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none!important}}
/* ---- comment card: §01 tile precedent - square corners, no fill, hairline rules only ---- */
.mq-cc{margin:0 0 var(--mq-gap);border:1px solid var(--hairline);padding:12px}
.mq-cc-c{margin:12px 0 0;font-family:var(--font-grotesk);font-size:13.5px;letter-spacing:0;line-height:1.42;color:var(--white);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.mq-cc-top{display:flex;align-items:center;gap:8px;margin-top:0}
.mq-cc-av{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background-size:cover;background-position:center}
.mq-cc-av.is-placeholder{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 1px,transparent 1px 9px);box-shadow:inset 0 0 0 1px var(--hairline)}
.mq-cc-u{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ---- copy block: cols 7-12, real space (mirror of §01's cols 1-5) ---- */
.feed-copy{position:relative;z-index:2;align-self:flex-end;width:41.666%;padding:0 48px;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.feed-copy h2{font-size:clamp(24px,2vw,30px);max-width:18ch}
.feed-copy .intro{margin:0;color:var(--text-secondary);font-size:var(--text-body);line-height:var(--leading-body)}
@media (max-width:860px){.feed{min-height:0;padding-bottom:0}.feed-copy{width:100%;align-self:auto;padding:36px 16px 0;gap:18px}.mq-zone{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;height:52vh;margin:32px 16px 0 0;border-right:1px solid var(--hairline);border-top:1px solid var(--hairline)}.mq-stage{perspective:120svh;perspective-origin:42% 30%}.mq-plane{top:-110%;left:-28%;height:calc(300% + 60vw);transform:rotateX(15deg) rotateY(8deg) rotateZ(-15deg);transform-origin:26% 30%}}
}

/* ================= §08 ================= */
#mount-08{
a{color:var(--white);text-decoration:none}
.sec{padding:0 0 120px;overflow:hidden}
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:0 48px}
.top{border-top:1px solid var(--hairline);padding-top:16px;margin-bottom:36px}
.meta{margin-bottom:40px}
/* --- plate: the product surface is a specimen on the page's own black, not a framed screenshot --- */
.body-grid{align-items:start}
.copy{grid-column:1/5;align-self:stretch}
/* the left column pins while the figure scrolls past, releasing at the foot of the upper zone -
   i.e. just above the hairline over the three page types. the figure is untouched. */
.copy .pin{position:sticky;top:calc(var(--bar) + 40px);display:flex;flex-direction:column;gap:22px}
.copy h2{font-size:clamp(24px,2vw,30px);max-width:13ch;text-wrap:balance}
.copy p{margin:0;font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-secondary)}
.plate{grid-column:5/13;margin:0;position:relative}
/* bleeds off the right edge: the surface is bigger than the page */
.plate img{display:block;width:calc((100% + 48px) * 1.15);height:auto;filter:grayscale(1) contrast(1.04)}
.plate .cap{margin-top:20px;padding-top:14px;border-top:1px solid var(--hairline)}
/* every field the client sees, named. transparency argued as an inventory, not as features */
.fields{grid-column:1/13;margin-top:40px;border-top:1px solid var(--hairline-strong);padding-top:16px;display:flex;flex-wrap:wrap;gap:0 28px}
.fields span{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;line-height:1.9;color:var(--white)}
.fields span.lead{color:var(--text-tertiary)}
@media (max-width:860px){.sec{padding:0 0 64px}.g{grid-template-columns:repeat(4,1fr);gap:12px;padding:0 16px}.top{padding-top:12px;margin-bottom:22px}.meta{margin-bottom:24px}.copy{grid-column:1/5}.copy .pin{position:static;top:auto;gap:18px}.plate{grid-column:1/5;margin-top:28px}.plate img{width:calc((100% + 16px) * 1.12)}.plate .cap{margin-top:14px}.fields{grid-column:1/5;margin-top:26px;gap:0 18px}}
}

/* ================= §09 ================= */
#mount-09{
a{color:var(--white);text-decoration:none}
.sec{padding:84px 0 0;position:relative}
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:0 48px}
.top{border-top:1px solid var(--hairline);padding-top:16px;margin-bottom:28px}
/* --- heading: the wordmark IS the section head, full measure, above the index --- */
.head{margin-bottom:48px}
.head figure{grid-column:1/9;margin:0}
.head img{display:block;width:100%;height:auto}
/* --- accordion: FULL BLEED, per §05. rows sit outside the grid; padding lives on the row --- */
.acc{border-top:1px solid var(--hairline);position:relative;z-index:1}
.row{border-bottom:1px solid var(--hairline);transition:background-color 120ms linear}
.q{width:100%;display:grid;grid-template-columns:52px minmax(0,1fr) 22px;gap:24px;align-items:start;background:none;border:0;padding:22px 48px;margin:0;text-align:left;color:inherit;font:inherit;cursor:pointer}
.q .ix{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);color:var(--text-tertiary);padding-top:5px;transition:color 120ms linear,opacity 120ms linear}
.q .lb{font-family:var(--font-display);font-weight:var(--weight-semibold,600);font-size:clamp(17px,1.45vw,21px);line-height:1.25;letter-spacing:-.01em;color:var(--white);text-wrap:pretty;transition:color 120ms linear}
.q .pm{font-family:var(--font-mono);font-size:15px;line-height:1;text-align:right;color:var(--text-tertiary);padding-top:5px;transition:color 120ms linear,opacity 120ms linear}
/* §05 mechanic exactly: the ROW inverts, one transition, no geometry change */
.row:hover,.row:has(.q:focus-visible),.row.open{background:var(--white)}
.row:hover .lb,.row:has(.q:focus-visible) .lb,.row.open .lb{color:var(--black)}
.row:hover .ix,.row:has(.q:focus-visible) .ix,.row.open .ix,.row:hover .pm,.row:has(.q:focus-visible) .pm,.row.open .pm{color:var(--black);opacity:.5}
.q:focus-visible{outline:none}
.a{display:grid;grid-template-rows:0fr;transition:grid-template-rows 160ms linear}
.row.open .a{grid-template-rows:1fr}
.a>div{overflow:hidden}
.a p{margin:0;padding:0 48px 24px 124px;max-width:62ch;font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-secondary);opacity:0;transition:opacity 120ms linear}
.row.open .a p{opacity:1;color:var(--black)}
.foot{grid-column:1/13;margin-top:22px;display:flex;justify-content:space-between;gap:24px;position:relative;z-index:1}
.form-below{display:none}
.foot span{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-tertiary)}
/* --- abstract form: out of flow entirely. anchored above the accordion so opening a row
   cannot move it. offset descends by breakpoint; below 860 it drops into flow --- */
.anchor{position:relative;height:0}
.form{margin:0;position:absolute;right:0;top:340px;width:50vw;z-index:0}
.form img{display:block;width:100%;height:auto}
.sec{padding-bottom:260px}
@media (max-width:1439px){.sec{padding-bottom:300px}.form{top:420px;width:54vw}}
@media (max-width:1279px){.sec{padding-bottom:320px}.form{top:480px;width:58vw}}
@media (max-width:1023px){.sec{padding-bottom:340px}.form{top:540px;width:64vw}}
@media (prefers-reduced-motion:reduce){.a,.a p,.row,.q .lb,.q .ix,.q .pm{transition:none}}
@media (max-width:860px){.sec{padding-bottom:64px}.g{grid-template-columns:repeat(4,1fr);gap:12px;padding:0 16px}.top{padding-top:12px;margin-bottom:18px}.head{margin-bottom:28px}.head figure{grid-column:1/5}.foot{grid-column:1/5;flex-direction:column;gap:6px}/* ≤860: the form leaves the section's lower right entirely and sits below the stack, in flow */
.anchor{display:none}.form-below{display:block}.form{position:static;width:100%;margin-top:40px;top:auto}.q{grid-template-columns:38px minmax(0,1fr) 18px;gap:12px;padding:18px 16px}.q .lb{font-size:16px}.a p{padding:0 16px 20px 66px}}
}

/* ================= §10 ================= */
#mount-10{
a{color:var(--white);text-decoration:none}
.sec{padding:0}
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:0 48px}
.top{border-top:1px solid var(--hairline);padding-top:16px;margin-bottom:36px}
.meta{margin-bottom:56px}
/* --- the statement --- */
.head{align-items:end;margin-bottom:64px}
.head h2{grid-column:1/9;margin:0;font-family:var(--font-display);font-weight:var(--weight-semibold,600);font-size:clamp(34px,5.2vw,76px);line-height:.92;letter-spacing:-.02em}
.head .spec{grid-column:10/13;display:flex;flex-direction:column;gap:6px;text-align:right;align-self:end}
.head .spec span{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-tertiary)}
/* --- booking cell: one ruled cell, the embed anchored inside it. no widget framing --- */
.book{border-top:1px solid var(--hairline);padding-top:0}
.book .g{align-items:start}
/* the band is a flex row, not grid cells: the embed sits at its own width flush to the
   H2's left edge, and the vertical hairline follows it with a 48px gutter either side —
   the same measure as the page's outer margin, so the rule tracks the embed at any width.
   the container hugs the embed (no fixed reserve) and trims Cal's outer vertical padding
   so the calendar sits plush, matching the side gutters. */
.band{display:flex;align-items:stretch;padding:28px 48px 0}
.cal{flex:0 1 1040px;min-width:0;overflow:hidden;background:var(--black);border-radius:0}
.cal iframe{display:block;margin:-6px 0}
.callspec{flex:1 1 0;min-width:180px;margin-left:48px;padding:0 0 0 48px;border-left:1px solid var(--hairline);display:flex;flex-direction:column;gap:7px}
.callspec span{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;line-height:1.5;color:var(--text-tertiary)}
.callspec .strong{color:var(--white)}
.cal *{border-radius:0}
.book-foot{margin-top:0;border-top:1px solid var(--hairline);padding-top:14px;display:flex;justify-content:space-between;gap:24px}
.book-foot span{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-tertiary)}
/* --- footer: link columns above the plate. no rule between them and the image --- */
footer{border-top:1px solid var(--hairline);padding:40px 48px 0;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
footer nav{display:flex;flex-direction:column;gap:7px}
footer .nav-a{grid-column:1/4}
footer .nav-b{grid-column:5/8}
footer .nav-c{grid-column:9/12}
footer a,footer span{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-tertiary)}
footer a{border-bottom:1px solid transparent;transition:color 120ms linear,border-color 120ms linear;width:fit-content}
footer a:hover{color:var(--white);border-bottom-color:var(--white)}
/* --- closing plate: last thing on the page. full viewport width, whole image visible,
   height follows the file's native ratio. nothing sits over the grain. --- */
.plate{margin:0;padding:0}
.plate img{display:block;width:100%;height:auto}
@media (prefers-reduced-motion:reduce){footer a{transition:none}}
@media (max-width:1180px){.cal{flex:1 1 auto}.callspec{min-width:160px}}
@media (max-width:860px){.g{grid-template-columns:repeat(4,1fr);gap:12px;padding:0 16px}.top{padding-top:12px;margin-bottom:22px}.meta{margin-bottom:28px}.head{margin-bottom:36px}.head h2{grid-column:1/5}.head .spec{grid-column:1/5;text-align:left;align-items:flex-start;margin-top:20px}.band{flex-direction:column;padding:20px 16px 0}.callspec{order:-1;flex:0 0 auto;margin-left:0;border-left:0;border-bottom:1px solid var(--hairline);padding:14px 0;margin-bottom:16px}.cal{flex:0 0 auto;margin-bottom:14px}.plate{margin-top:0}.book-foot{flex-direction:column;gap:6px}footer{padding:32px 16px 0;grid-template-columns:repeat(4,1fr);gap:18px}footer .nav-a{grid-column:1/3}footer .nav-b{grid-column:3/5}footer .nav-c{grid-column:1/5;margin-top:14px}}
}

/* anchor targets clear the fixed top bar (--bar hoisted from §01) */
[id]{scroll-margin-top:calc(var(--bar,52px) + 8px)}


/* ================================================================
   V2 RESPONSIVE LAYER - additions only, nothing above this line is
   edited. Section rules above are NESTED under their mount id, so
   every override here is nested the same way to match specificity.
   Tier map:
     >=1801   ultrawide - type scales, field stays capped
     1181-1800          - APPROVED desktop composition (untouched)
     861-1180 md        - the unauthored range: field sheds columns
     <=860    sm        - existing stacked treatment, hit areas fixed
   ================================================================ */
/* NB: no overflow-x:hidden on html/body - it turns the root into a scroll container and kills
   every position:sticky on the page (§02 pin, §03 spine and stages, §09 form). Overflow is
   prevented per-section instead; measured clean at 320-2560. */
img,video{max-width:100%}
#mount-01{
/* md: the copy column takes back width, the field narrows but keeps its angle. perspective is
   lengthened so a narrower zone reads as the same tilt rather than a steeper one. */
@media (min-width:861px) and (max-width:1180px){
& .top-bar{padding:0 24px}
& .top-nav{gap:16px}
& .hero{min-height:calc(100svh - var(--bar))}
& .hero-copy{width:53%;padding:0 24px;gap:20px}
& .hero-copy h1{font-size:clamp(30px,3.9vw,42px)}
& .hero-copy .sub{max-width:30em;font-size:15px}
& .hero .mq-zone{width:47%}
& .hero .mq-stage{perspective:420px}
& .hero .mq-plane{right:-16%;transform:translateX(-70px) translateY(0px) translateZ(-30px) rotateX(20deg) rotateY(-10deg) rotateZ(20deg)}
& .ticker-lead,& .ticker-foot{padding:12px 24px}
& .ticker-track span{padding-right:32px}
& .ticker-track span::after{margin-left:32px}
}
/* ultrawide: the field is capped, so display type carries the extra width. the copy block stays
   left-anchored - it does not centre and it does not stretch to the measure. */
@media (min-width:1801px){
& .top-bar{padding:0 64px}
& .hero-copy{padding:0 64px;max-width:920px}
& .hero-copy h1{font-size:clamp(50px,2.7vw,64px)}
& .ticker-lead,& .ticker-foot{padding:16px 64px}
}
/* small screens: hit areas, not decoration */
@media (max-width:860px){
& .hero .mq-zone{height:48svh}
& .ctas button{min-height:46px}
& .top-bar a,& .top-nav a{min-height:44px;display:flex;align-items:center}
}
@media (max-width:390px){
& .hero-copy{padding:28px 16px 0;gap:16px}
& .hero-copy h1{font-size:clamp(30px,8.6vw,34px)}
& .hero .mq-zone{height:42svh;margin-left:12px}
& .ticker-track span{padding-right:28px}
& .ticker-track span::after{margin-left:28px}
}
/* touch: pause-on-hover has no touch equivalent, so it is dropped rather than half-applied */
@media (hover:none){
& .ticker:hover .ticker-track{animation-play-state:running}
}
/* drawer nav: hairline text marks under the bar. hidden entirely above 860, where the row shows. */
& .nav-toggle{display:none;background:none;border:0;padding:0 2px;color:var(--text-secondary);cursor:pointer;font:inherit;font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase}
& .nav-toggle:hover,& .nav-toggle[aria-expanded="true"]{color:var(--white)}
& .nav-drawer{display:none}
@media (max-width:860px){
& .nav-toggle{display:flex;align-items:center;min-height:44px;min-width:44px;justify-content:flex-end}
& .nav-drawer{position:fixed;top:var(--bar);left:0;right:0;z-index:19;display:none;flex-direction:column;background:var(--black);border-bottom:1px solid var(--hairline)}
& .nav-drawer.open{display:flex}
& .nav-drawer a{display:flex;align-items:center;min-height:48px;padding:0 16px;color:var(--text-secondary);border-top:1px solid var(--hairline)}
& .nav-drawer a:first-child{border-top:0}
& .nav-drawer a:active{background:var(--white);color:var(--black)}
}
}
/* ---- §01/§07 ultrawide: the field grows with the page instead of stranding a void beside it ---- */
@media (min-width:1801px){
#mount-01 .hero .mq-zone{width:min(58.334%,1100px)}
#mount-07 .mq-zone{width:min(58.334%,1100px)}
}
/* ================= md tier, §02-§10 =================
   861-1180 keeps every desktop mechanic - sticky columns, side-by-side comparisons, the reel
   band - and pays for the lost width out of gutters and padding, not out of composition. */
@media (min-width:861px) and (max-width:1180px){
#mount-02{
& .sec{padding:72px 24px 0}
& .g{gap:16px}
& .copy{grid-column:1/6}
& .fig{grid-column:6/13}
& .figmeta{grid-column:1/13;text-align:right;margin-top:10px}
& .card{padding-right:16px}
& .card+.card{padding-left:16px}
& .card h3{font-size:18px}
& .spec span{grid-template-columns:76px 1fr;gap:8px}
& .closing{padding-bottom:72px}
}
#mount-03{
& .sec{padding:0 0 0 24px}
& .top{padding-right:24px}
& .side{padding-right:24px}
& .stage{padding:28px 24px 44px 24px;grid-template-columns:44px minmax(0,1fr)}
& .s1 .fig{width:72%}
& .s2 .fig{width:82%}
& .s3 .fig{width:56%}
& .s4 .fig{width:86%}
& .s5 .fig{width:76%}
}
#mount-04{
& .sec{padding:0 24px 96px}
& .g{gap:16px}
& .head{margin-bottom:56px}
& .head h2{grid-column:1/6}
& .body{grid-column:7/13}
& .side{padding:14px 16px 0 0}
& .side+.side{padding:14px 0 0 16px}
}
#mount-05{
& .g{padding:0 24px}
& .row{grid-template-columns:36px minmax(150px,3fr) minmax(200px,4fr) 96px;gap:16px;padding:20px 24px}
& .th{width:96px}
& .head h2{grid-column:1/8}
}
#mount-06{
& .g{padding:0 24px}
& .reel{padding:12px 0 0 24px}
& .feat{padding:0 24px;margin-top:48px}
& .fgrid{gap:16px}
& .stats div{padding:16px 16px 0 0}
& .stats div+div{padding-left:16px}
& .more{padding:44px 24px}
}
#mount-07{
& .feed-copy{width:53%;padding:0 24px;gap:18px}
& .mq-zone{width:47%}
& .mq-stage{perspective:420px}
/* the mirrored plane's NEAR edge is on the left, so a smaller negative offset (or a positive
   translateX) pulls it inboard and opens a void along the left of the zone. at md it is pushed
   further out instead, and the translate is dropped. */
& .mq-plane{left:-34%;transform:translateZ(-100px) rotateX(20deg) rotateY(10deg) rotateZ(-20deg)}
}
#mount-08{
& .g{padding:0 24px;gap:16px}
& .copy{grid-column:1/6}
& .plate{grid-column:6/13}
& .plate img{width:calc((100% + 24px) * 1.1)}
& .fields{gap:0 20px}
}
#mount-09{
& .g{padding:0 24px}
& .q{grid-template-columns:44px minmax(0,1fr) 20px;gap:16px;padding:20px 24px}
& .a p{padding:0 24px 22px 84px}
& .head figure{grid-column:1/10}
}
#mount-10{
& .g{padding:0 24px}
& .band{padding:24px 24px 0}
& .callspec{margin-left:24px;padding-left:24px}
& footer{padding:36px 24px 0;gap:16px}
}
}
/* ---- touch targets below 860: every interactive row clears 44px ---- */
@media (max-width:860px){
#mount-05 .row{min-height:44px}
#mount-09 .q{min-height:44px}
#mount-06 .more{min-height:44px}
}

/* ---- §05 below 860: sectors are inert, the invert is driven by scroll position instead of
   hover. one row white at a time; .active is set by sec-05.jsx. ---- */
@media (max-width:860px){
#mount-05 .row{pointer-events:none;cursor:default}
#mount-05 .row:hover,#mount-05 .row:focus-visible{background:transparent;color:inherit}
#mount-05 .row:hover .idx,#mount-05 .row:focus-visible .idx,#mount-05 .row:hover .nm .path,#mount-05 .row:focus-visible .nm .path{color:var(--text-tertiary);opacity:1}
#mount-05 .row:hover p,#mount-05 .row:focus-visible p{color:var(--text-secondary);opacity:1}
#mount-05 .row:hover .th.empty,#mount-05 .row:focus-visible .th.empty{border-color:var(--hairline)}
#mount-05 .row.active{background:var(--white);color:var(--black)}
#mount-05 .row.active .idx,#mount-05 .row.active .nm .path{color:var(--black);opacity:.5}
#mount-05 .row.active p{color:var(--black);opacity:.7}
#mount-05 .row.active .th.empty{border-color:rgba(0,0,0,.3)}
#mount-05 .row.active .th.empty span{color:var(--black);opacity:.55}
}

/* ---- v2 fix: §02's three cards were placed by inline grid-column, so the <=860 stack could not
   win the cascade. placement now lives in CSS at every tier. ---- */
#mount-02 .card.c01{grid-column:1/5}
#mount-02 .card.c02{grid-column:5/9}
#mount-02 .card.c03{grid-column:9/13}
@media (max-width:860px){
#mount-02 .card.c01,#mount-02 .card.c02,#mount-02 .card.c03{grid-column:1/5}
}
/* ghost stack: both the start and end values occupy the same cell, so the box is sized by the
   wider of the two and the live value can never paint outside it */
#mount-06 .stats .n .ghost{display:inline-grid}
#mount-06 .stats .n .ghost i{grid-area:1/1;font-style:normal;white-space:nowrap}
/* §07 field: stops compositing entirely when it is off screen */
#mount-07 .mq-zone.is-idle .mq-track{animation-play-state:paused}
/* NB: no content-visibility here - the fill loop measures the live column height, and a skipped
   subtree measures 0, so the field builds empty. The off-screen pause above carries the saving. */

/* ================= §01 below 860: stacked, not split =================
   the two-part composition needs real width on both halves; under 860 there isn't any, so the
   hero stacks - copy first at full page width but held to its own measure, then the field as a
   band beneath it, bleeding off the right edge. NB the base rules are .hero .mq-zone / .mq-zone
   inside the mount block, so these carry the id explicitly to win the cascade. */
@media (max-width:860px){
#mount-01 .hero{min-height:auto;padding-bottom:0;justify-content:flex-start}
#mount-01 .hero-copy{width:100%;padding:40px 20px 0;gap:20px;order:1}
/* the wall is first in source (it is the ground on desktop) - stacked, the copy leads */
#mount-01 .hero .mq-zone{order:2}
#mount-01 .hero-copy h1{font-size:clamp(34px,7vw,52px);line-height:.96;max-width:none}
#mount-01 .hero-copy .sub{font-size:16px;line-height:1.5;max-width:44ch}
/* the band is not a box: no top rule, and it rises behind the copy, dissolving into the page
   black under the text rather than starting at a hard edge */
#mount-01 .hero .mq-zone{position:relative;top:auto;right:auto;bottom:auto;left:auto;width:auto;height:70svh;margin:-150px 0 0;border-left:0;border-top:0;z-index:0}
/* mobile hero copy is headline + sub + one CTA: the secondary button and the proof line are
   dropped so the pulled-back field carries the bottom of the frame */
#mount-01 .ctas button:nth-child(2){display:none!important}
#mount-01 .proof-line{display:none}
#mount-01 .hero .mq-zone::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.97) 12%,rgba(0,0,0,.82) 22%,rgba(0,0,0,.42) 34%,transparent 50%)}
/* same 3D read as the desktop field: identical rotations and translateZ. perspective is scaled
   with the band's height - the taper you see depends on how many px of plane depth the visible
   slice spans, so keeping 300px on a 590px band flattens it. */
#mount-01 .hero .mq-stage{perspective:170px;perspective-origin:50% 50%}
#mount-01 .hero .mq-plane{top:-135%;right:-9%;height:calc(340% + 20vw);transform:translateX(-60px) translateY(0px) translateZ(-30px) rotateX(20deg) rotateY(-10deg) rotateZ(20deg);transform-origin:50% 50%}
#mount-01 .ctas{width:auto;flex-direction:row;gap:10px}
#mount-01 .ctas button{width:auto;min-height:44px}
#mount-01 .ticker-lead,#mount-01 .ticker-foot{padding:12px 20px}
}
@media (max-width:600px){
#mount-01 .hero-copy{padding:32px 16px 0;gap:18px}
#mount-01 .hero-copy h1{font-size:clamp(32px,8.4vw,42px)}
#mount-01 .hero-copy .sub{font-size:15px;max-width:40ch}
#mount-01 .hero .mq-zone{height:64svh;margin:-140px 0 0}
#mount-01 .hero .mq-stage{perspective:150px}
#mount-01 .ctas{width:100%;flex-direction:column}
#mount-01 .ctas button{width:100%;justify-content:center}
}

/* ================= §02 <=860: the figure pins, the three cards stack over it =================
   .upper becomes display:contents so the figure's sticky containing block is the SECTION, not the
   upper grid - it stays pinned while the base block scrolls up. each card is opaque and sticks at
   the same offset, so 01 covers the figure, 02 covers 01, 03 covers 02. */
@media (max-width:860px){
#mount-02 .upper{display:contents}
/* the section already carries the 16px page gutter - children add none */
#mount-02 .fig{position:sticky;top:calc(var(--bar) + 12px);z-index:0;margin:28px 0 0}
#mount-02 .figmeta{margin:8px 0 0;text-align:left}
/* row-gap on the inner grid would open a window onto the pinned figure between two stacked
   cards; the trailing space is what gives the LAST card a turn to pin before the section ends */
/* the whole stack sits on its own black ground, so no seam inside it can reveal the pinned
   figure - and the closing line joins it with padding rather than a margin gap */
#mount-02 .base{margin:36px 0 0;padding:0;border-top:0;position:relative;z-index:1;background:var(--black)}
/* the sticky range of a grid item is bounded by the grid's rows, not by container padding - so
   the last card gets its turn to pin only if a real empty ROW follows it */
#mount-02 .base .g{row-gap:0}
/* short, opaque trailing row: enough range for 03 to land, and the pinned figure never shows
   through underneath it */
#mount-02 .base .g::after{content:"";grid-column:1/5;height:14svh;background:var(--black)}
#mount-02 .base .card{position:sticky;top:var(--bar);background:var(--black);border-top:1px solid var(--hairline-strong);padding:18px 0 26px;min-height:44svh;margin:0}
#mount-02 .base .card+.card{border-top:1px solid var(--hairline-strong);padding:18px 0 26px}
/* the last card is sized by its content - a 44svh minimum left a screen of dead space under it */
#mount-02 .base .card:last-child{min-height:0;padding-bottom:22px}
#mount-02 .base .card .spec{margin-top:18px}
#mount-02 .closing{margin-top:0;padding-top:28px;position:relative;z-index:1;background:var(--black)}
}
@media (prefers-reduced-motion:reduce){
#mount-02 .fig,#mount-02 .base .card{position:static}
}

/* §06 <=860: seven rows in the same one-viewport band. rows f and g continue the counter-run
   alternation and the offset march; the art square is derived from the live row height, so it
   shrinks on its own. */
@media (max-width:860px){
#mount-06 .reel.f .track{animation:drr 178s linear infinite;margin-left:-78px}
#mount-06 .reel.g .track{animation:drl 192s linear infinite;margin-left:-46px}
#mount-06 .reel{padding-top:8px}
#mount-06 .tile .nm{font-size:11.5px;margin-top:5px}
#mount-06 .tile .mx{font-size:9px}
}

/* §06 <=860: the closing strip is a band, not a row - the texture needs height to read */
@media (max-width:860px){
#mount-06 .more{min-height:220px;padding:28px 16px;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:0}
#mount-06 .more .lb{font-size:26px;max-width:14ch;line-height:1.05}
#mount-06 .more .ct{order:-1}
}
@media (max-width:600px){
#mount-06 .more{min-height:190px;padding:24px 16px}
#mount-06 .more .lb{font-size:23px}
}

/* ================= §03 <=860: the pinned stage sequence returns =================
   desktop pins each stage under the bar and lets the next scroll up over it. below 860 the base
   layer had dropped that to a plain scroll; here it comes back, with the intro block scrolling
   away above the run rather than staying beside it (there is no room for a spine at this width). */
@media (max-width:860px){
#mount-03 .stages{position:relative;z-index:1}
#mount-03 .stage{position:sticky;top:var(--bar);min-height:calc(100svh - var(--bar));background:var(--black);align-content:start;padding:22px 16px 34px 0;border-top:1px solid var(--hairline)}
#mount-03 .stage:first-child{border-top:1px solid var(--hairline)}
#mount-03 .stage .num{padding-top:2px}
/* the last stage is sized by its content, but it still needs a short run after it or it never
   travels to the top - the spacer is the pin range, kept small so the trailing black stays tight */
#mount-03 .stage:last-child{min-height:0;padding-bottom:20px}
#mount-03 .stages::after{content:"";display:block;height:24svh}
}

/* ================= §07 <=860: the field keeps the wide-view perspective =================
   the base small-screen rules flattened the plane (perspective:120svh, shallower angles) and
   inset the band. here it runs the full display width - no side rules, no margin - and carries
   exactly the geometry of the wide composition, with hairlines only above and below. */
@media (max-width:860px){
#mount-07 .mq-zone{position:relative;top:auto;right:auto;bottom:auto;left:auto;width:auto;height:58svh;margin:0;padding:0;border:0;border-bottom:1px solid var(--hairline)}
#mount-07 .mq-stage{perspective:425px;perspective-origin:30% 36%}
/* the +100px translateX is a small nudge on a 900px zone but a big one on a 390px band, and it
   was pushing the plane off its left edge - at this width the plane is anchored further out and
   the nudge is dropped. angles and perspective are untouched. */
#mount-07 .mq-plane{top:-170%;left:-54%;height:calc(400% + 60vw);transform:translateZ(-100px) rotateX(20deg) rotateY(10deg) rotateZ(-20deg);transform-origin:25% 30%}
#mount-07 .feed-copy{padding:26px 16px 40px}
}

/* §09 >1180: the wordmark plate reads as a heading, not a poster - it spans 7 of 12 rather than
   8, so the held void to its right grows. below 1180 it keeps its existing spans. */
@media (min-width:1181px){
#mount-09 .head figure{grid-column:1/8}
}