/* Rosenthal Sportswear — built to the approved storyboard (mockups/storyboard.html). Tokens only (css/theme.css). */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: rgb(var(--ink-rgb)); color: var(--fg); font: 400 17px/1.6 var(--fb); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--acc); color: rgb(var(--chrome-rgb)); padding: 10px 16px; font-weight: 600; }
.skip:focus { top: 12px; }
.mono { font-family: var(--fm); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
em { font-style: inherit; }

/* ---------------------------------------------------------------- the continuous background */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 90% at 70% 10%, rgb(var(--panel-rgb)) 0%, rgb(var(--ink-rgb)) 55%, rgb(var(--shadow-rgb) / .9) 120%); }
.bg > * { position: absolute; will-change: transform; }
.bg__glow { border-radius: 50%; filter: blur(60px); }
.bg__glow--a { width: 70vw; height: 70vw; left: -20vw; top: -25vw; background: radial-gradient(circle, rgb(var(--line-rgb) / .55), transparent 65%); }
.bg__glow--b { width: 60vw; height: 60vw; right: -22vw; top: 30vh; background: radial-gradient(circle, rgb(var(--accent-rgb) / .16), transparent 62%); }
.bg__glow--c { width: 80vw; height: 50vw; left: 10vw; bottom: -30vw; background: radial-gradient(ellipse, rgb(var(--panel-rgb) / .9), transparent 65%); }
/* soft red light shards on the logo's angle, as on the flex: wide and blurred, never a hard line */
.bg__shard { height: 22vh; width: 70vw; filter: blur(18px); }
.bg__shard--a { right: -24vw; top: 6vh; rotate: -24deg; background: linear-gradient(90deg, transparent, rgb(var(--accent-rgb) / .22) 60%, transparent); }
.bg__shard--b { left: -30vw; bottom: 8vh; rotate: -24deg; background: linear-gradient(90deg, transparent, rgb(var(--accent-rgb) / .14) 55%, transparent); }
.bg__shard--c { right: -10vw; bottom: -6vh; rotate: -24deg; height: 10vh; background: linear-gradient(90deg, transparent, rgb(var(--accent-rgb) / .12), transparent); }
.bg__spot { left: 0; top: 0; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; background: radial-gradient(circle, rgb(var(--mut-rgb) / .12), transparent 60%); transform: translate(var(--mx, 50vw), var(--my, 40vh)); }
.bg__grain { inset: 0; opacity: .06; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
main, .foot { position: relative; z-index: 2; }

/* ---------------------------------------------------------------- type */
.title { font: 850 italic clamp(46px, 6.8vw, 120px)/.86 var(--fd); font-stretch: var(--fd-stretch); text-transform: uppercase; margin: 0; letter-spacing: -.005em; text-wrap: balance;
  background: linear-gradient(180deg, rgb(var(--chrome-rgb)) 25%, rgb(var(--mut-rgb)) 115%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
.title em { color: var(--acc); -webkit-text-fill-color: var(--acc); }
.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--mut); margin: 0 0 18px; }
.eyebrow span { color: var(--acc); font-weight: 500; }
.eyebrow::before { content: ""; width: 30px; height: 3px; background: var(--acc); transform: skewX(var(--cut)); }
.note { color: var(--mut); margin: 14px 0 0; font-size: 12px; font-family: var(--fm); letter-spacing: .02em; }

/* ---------------------------------------------------------------- buttons, tags */
.btn { --b: var(--line); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border: 0; background: none; cursor: pointer; text-decoration: none; font-weight: 600; font-size: 15px; isolation: isolate; color: rgb(var(--chrome-rgb)); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--cut)); border: 1px solid var(--b); background: var(--bf, transparent); transition: background-color .35s, border-color .35s, transform .35s; }
.btn:hover::before { transform: skewX(var(--cut)) scaleX(1.04); }
.btn--red { --bf: var(--acc); --b: var(--acc); }
.btn--red:hover { --bf: rgb(var(--accent-d-rgb)); }
.btn--ghost { --b: rgb(var(--chrome-rgb) / .4); }
.btn--ghost:hover { --bf: rgb(var(--chrome-rgb) / .08); }
.btn--lg { min-height: 60px; padding: 0 40px; font-size: 18px; }
.btn[aria-pressed="true"] { --bf: rgb(var(--ok-rgb)); --b: rgb(var(--ok-rgb)); }
.tag { font: 500 12px/1 var(--fm); letter-spacing: .08em; text-transform: uppercase; padding: 13px 22px; position: relative; isolation: isolate; white-space: nowrap; color: rgb(var(--chrome-rgb)); }
.tag::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid rgb(var(--chrome-rgb) / .3); background: rgb(var(--ink-rgb) / .6); transform: skewX(var(--cut)); backdrop-filter: blur(8px); }
.tag--red { color: rgb(var(--accent-rgb)); }
.tag--red::before { border-color: var(--acc); background: rgb(var(--accent-rgb) / .1); }
.iconbtn { width: 48px; height: 48px; border: 0; background: none; cursor: pointer; font-size: 22px; color: rgb(var(--chrome-rgb)); }
.iconbtn:hover { color: var(--acc); }

/* ---------------------------------------------------------------- 00 loader (frame 00) */
.loader { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
.loader__plate { position: absolute; inset: 0; overflow: hidden; background: rgb(var(--ink-rgb)); }
.loader__plate img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
.loader__plate--a { clip-path: polygon(0 0, 100% 0, 100% var(--sy2, 4%), 0 var(--sy1, 66%)); }
.loader__plate--b { clip-path: polygon(0 var(--sy1, 66%), 100% var(--sy2, 4%), 100% 100%, 0 100%); }
.loader__line { position: absolute; left: var(--gut); bottom: 30px; color: rgb(var(--chrome-rgb) / .8); margin: 0; }
.loader__count { position: absolute; right: var(--gut); bottom: 30px; margin: 0; color: rgb(var(--chrome-rgb)); font-size: 14px; }
.loader.is-gone, .motion-off .loader { display: none; }

/* ---------------------------------------------------------------- header */
.hdr { position: fixed; z-index: 90; top: 0; left: 0; right: 0; height: var(--hdr); display: flex; align-items: center; gap: 28px; padding: env(safe-area-inset-top, 0px) var(--gut) 0; color: rgb(var(--chrome-rgb)); transition: transform .5s cubic-bezier(.2, .8, .2, 1), background-color .4s; }
.hdr.is-solid { background: rgb(var(--ink-rgb) / .72); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgb(var(--line-rgb) / .8); }
.hdr.is-hidden { transform: translateY(-110%); }
.hdr__logo img { width: 168px; height: auto; }
.hdr__nav { display: flex; gap: 30px; margin-left: 28px; }
.hdr__nav a { text-decoration: none; font-size: 15px; opacity: .86; }
.hdr__nav a:hover { opacity: 1; }
.hdr__cut { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--mut); }
.hdr__cut b { color: rgb(var(--chrome-rgb)); font-weight: 500; }
.hdr__slash { display: block; width: 3px; height: 22px; background: var(--acc); transform: skewX(var(--cut)); }
.hdr__menu { gap: 12px; }
.burger { width: 18px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }

/* ---------------------------------------------------------------- menu */
.menu { position: fixed; inset: 0; z-index: 85; background: rgb(var(--ink-rgb) / .97); color: rgb(var(--chrome-rgb)); overflow-y: auto; padding: calc(var(--hdr) + 32px) var(--gut) 40px; }
.menu__inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr .9fr; gap: 40px; }
.menu__h { color: var(--acc); margin: 0 0 14px; }
.menu__list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 4px; }
.menu__list--cols { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.menu__list a { font: 700 italic 22px/1.25 var(--fd); font-stretch: 85%; text-transform: uppercase; text-decoration: none; display: inline-block; padding: 4px 0; }
.menu__list a:hover { color: var(--acc); }
.menu__contact { color: var(--mut); font-size: 15px; }
.menu__preview { margin: 0; aspect-ratio: 4/5; overflow: hidden; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); }
.menu__preview img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- 3D stage (chapters 02-03 only) */
.stage { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: block; opacity: 0; transition: opacity .6s; }
.stage.is-on { opacity: 1; }
.stage.is-interactive { pointer-events: auto; cursor: grab; }
.stage-ui { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.leaders { display: none; }
.ch { position: relative; }

/* ---------------------------------------------------------------- 01 hero (frame 01) */
.ch--hero { height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; }
.hero__media { position: absolute; inset: -3%; will-change: transform; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--ink-rgb) / .9) 0%, rgb(var(--ink-rgb) / .5) 30%, transparent 52%), linear-gradient(0deg, rgb(var(--ink-rgb)) 0%, transparent 22%); }
.hero__copy { position: absolute; left: var(--gut); top: 50%; translate: 0 -54%; width: min(44vw, 640px); z-index: 2; }
.hero__title { font: 850 italic clamp(50px, 6.4vw, 118px)/.88 var(--fd); font-stretch: var(--fd-stretch); text-transform: uppercase; margin: 0; }
.hero__title .line { display: block; background: linear-gradient(180deg, rgb(var(--chrome-rgb)) 30%, rgb(var(--mut-rgb)) 130%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero__title em { color: var(--acc); -webkit-text-fill-color: var(--acc); }
.hero__lede { max-width: 30em; margin: 24px 0 0; color: rgb(var(--chrome-rgb) / .86); font-size: 18px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 30px; }
.facts { position: absolute; left: var(--gut); right: 140px; bottom: 34px; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 22px; z-index: 2; }
.hero__scroll { position: absolute; right: var(--gut); bottom: 30px; margin: 0; display: grid; justify-items: center; gap: 10px; color: var(--mut); z-index: 2; }
.hero__scroll i { width: 1px; height: 46px; background: linear-gradient(var(--acc), transparent); animation: drip 2s infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------------------------------------------------------------- 02 layers */
.ch--layers { height: 420vh; }
.layers__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 30rem) 1fr; gap: 24px; padding: calc(var(--hdr) + 3vh) var(--gut) 4vh; align-items: center; }
.layers__copy { position: relative; z-index: 2; }
.layers__lede { color: var(--mut); margin: 18px 0; max-width: 30em; font-size: 16px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px 4px; margin-bottom: 14px; }
.tab { position: relative; isolation: isolate; border: 0; background: none; padding: 9px 14px; min-height: 40px; cursor: pointer; font: 500 12px/1 var(--fm); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.tab::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--cut)); background: rgb(var(--panel-rgb)); border: 1px solid var(--line); transition: background-color .3s; }
.tab[aria-selected="true"] { color: rgb(var(--chrome-rgb)); }
.tab[aria-selected="true"]::before { background: var(--acc); border-color: var(--acc); }
.ba { position: relative; margin: 0 0 16px; width: min(100%, 300px); aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); user-select: none; }
.ba__img { position: absolute; inset: 0; }
.ba__img img { width: 100%; height: 100%; object-fit: cover; }
.ba__img--after { clip-path: inset(0 0 0 var(--ba, 55%)); }
.ba::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--ba, 55%); width: 2px; background: var(--acc); pointer-events: none; }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 8px 10px; background: linear-gradient(transparent, rgb(var(--ink-rgb) / .8)); color: rgb(var(--chrome-rgb)); pointer-events: none; font-size: 11px; }
.layers__list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); list-style: none; margin: 0; padding: 0; }
.layer { display: grid; grid-template-columns: 34px 1fr; gap: 2px 10px; padding: 12px 14px; border-left: 2px solid var(--acc); background: rgb(var(--ink-rgb) / .85); }
.layer b { font: 500 12px/1.4 var(--fm); color: var(--acc); grid-row: span 2; }
.layer span { font: 700 italic 19px/1.1 var(--fd); font-stretch: 85%; text-transform: uppercase; }
.layer small { color: var(--mut); font-size: 13px; line-height: 1.35; }
.parts { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.parts.is-on { opacity: 1; }
.part { position: absolute; left: 0; top: 0; display: grid; grid-template-columns: auto auto; gap: 2px 8px; align-items: baseline; white-space: nowrap; translate: -50% -100%; padding: 6px 10px 7px; transition: opacity .35s; isolation: isolate; color: rgb(var(--chrome-rgb)); }
.part::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--cut)); background: rgb(var(--ink-rgb) / .72); border: 1px solid rgb(var(--chrome-rgb) / .18); backdrop-filter: blur(6px); }
.part b { font: 500 11px/1 var(--fm); color: var(--acc); letter-spacing: .06em; }
.part span { font: 800 italic 17px/1 var(--fd); font-stretch: 85%; text-transform: uppercase; }
.part small { grid-column: 1 / -1; font: 400 12px/1.35 var(--fb); color: rgb(var(--chrome-rgb) / .9); display: none; white-space: normal; max-width: 220px; }
.part.is-side { translate: 0 -50%; }
.part.is-below { translate: -50% 0; }
.part.is-active::before { background: var(--acc); border-color: var(--acc); }
.part.is-active b { color: rgb(var(--chrome-rgb)); }
.part.is-active small { display: block; }
.part.is-dim { opacity: .55; }

/* ---------------------------------------------------------------- 03 lab (frame 03) */
.lab__grid { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 27rem) 1fr minmax(0, 19rem); gap: 24px; padding: calc(var(--hdr) + 4vh) var(--gut) 8vh; align-items: center; }
.lab__panel, .ticket { position: relative; z-index: 2; }
.ticket { grid-column: 3; }
.field-set { border: 0; padding: 0; margin: 22px 0 0; }
.field-set legend { color: var(--mut); margin-bottom: 10px; padding: 0; }
.field-set legend span { color: rgb(var(--chrome-rgb)); }
.lab__lib { color: var(--mut) !important; text-transform: none; letter-spacing: .02em; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { width: 50px; height: 40px; border: 1px solid var(--line); cursor: pointer; transform: skewX(var(--cut)); padding: 0; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); }
.swatch[aria-pressed="true"] { outline: 2px solid var(--acc); outline-offset: 3px; }
.designs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.design { border: 1px solid var(--line); background: rgb(var(--panel-rgb)); padding: 0; cursor: pointer; aspect-ratio: 1.25; overflow: hidden; }
.design img { width: 100%; height: 100%; object-fit: cover; }
.design[aria-pressed="true"] { outline: 2px solid var(--acc); outline-offset: 1px; }
.lab__fields { display: grid; grid-template-columns: 1fr 96px; gap: 12px; margin-top: 20px; }
.field { display: grid; gap: 6px; margin-top: 14px; }
.field span { color: var(--mut); }
.field input, .field textarea { width: 100%; min-height: 50px; border: 1px solid var(--line); background: rgb(var(--panel-rgb) / .75); padding: 12px 14px; border-radius: 0; font-size: 16px; }
.field input:focus, .field textarea:focus { border-color: var(--acc); outline: none; }
.lab__fields .field { margin-top: 0; }
#labName, #labNum { font: 700 22px/1 var(--fk); letter-spacing: .04em; text-transform: uppercase; }
.lab__upload { margin-top: 16px; min-height: 44px; font-size: 13px; }
.lab__hint { color: var(--mut); margin-top: 12px; }
.ticket { border: 1px solid var(--line); background: rgb(var(--panel-rgb) / .8); padding: 26px 26px 24px 34px; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
.ticket::before { content: ""; position: absolute; left: 14px; top: 30px; width: 5px; height: 52px; background: var(--acc); transform: skewX(var(--cut)); }
.ticket__h { color: var(--mut); margin: 0; }
.ticket__v { font: 800 italic 26px/1.05 var(--fd); font-stretch: 82%; text-transform: uppercase; margin: 10px 0 20px; }

/* ---------------------------------------------------------------- 04 any sport (frame 04): full-width arc */
.ch--sports { height: 380vh; }
.sports__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--hdr) + 2vh) 0 3vh; }
.sports__head { position: relative; z-index: 3; padding: 0 var(--gut); }
.sports__ghost { position: absolute; left: 50%; top: 31%; margin: 0; font: 900 italic clamp(110px, 17vw, 330px)/.8 var(--fd); font-stretch: 76%; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgb(var(--chrome-rgb) / .2); pointer-events: none; translate: -50% -50%; }
.arc { position: relative; perspective: 1400px; display: flex; align-items: center; cursor: grab; touch-action: pan-y; }
.arc.is-dragging { cursor: grabbing; }
.arc__track { list-style: none; margin: 0; padding: 0 44vw; display: flex; gap: .9vw; align-items: center; will-change: transform; transform-style: preserve-3d; }
.arc__card { flex: 0 0 12vw; aspect-ratio: 9/16; max-height: 62vh; position: relative; }
.arc__card a { position: absolute; inset: 0; display: block; overflow: hidden; text-decoration: none; border: 1px solid rgb(var(--chrome-rgb) / .14); background: rgb(var(--panel-rgb)); box-shadow: 0 30px 50px rgb(var(--shadow-rgb) / .5); transition: border-color .35s; }
.arc__card img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .5s; filter: saturate(.7) brightness(.78); pointer-events: none; }
.arc__card a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 58%, rgb(var(--ink-rgb) / .95)); }
.arc__card span { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 1; text-align: center; font: 600 11px/1.2 var(--fm); letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--chrome-rgb)); }
.arc__card.is-front a, .arc__card:hover a { border-color: var(--acc); }
.arc__card.is-front img, .arc__card:hover img { filter: saturate(1.05) brightness(1); transform: scale(1.14); }
.arc__card.is-front span { font-size: 14px; bottom: 16px; }
.arc__foot { display: flex; align-items: center; justify-content: center; gap: 18px; position: relative; z-index: 3; padding: 0 var(--gut); }
.arc__cap { margin: 0; color: var(--mut); min-width: 15em; text-align: center; }
.arc__cap span { color: rgb(var(--chrome-rgb)); }
.arc__n { position: absolute; right: var(--gut); margin: 0; color: rgb(var(--chrome-rgb)); }

/* ---------------------------------------------------------------- 05 street (frame 05) */
.ch--street { padding-bottom: 10vh; }
.street__pin { height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; padding: calc(var(--hdr) + 3vh) 0 3vh; }
.street__head { padding: 0 var(--gut); }
.street__head .title { display: flex; align-items: center; gap: 18px; }
.street__head .eyebrow { display: none; }
.rail { position: relative; margin-top: 3vh; }
.rail__bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, rgb(var(--chrome-rgb) / .2), rgb(var(--chrome-rgb) / .6), rgb(var(--chrome-rgb) / .2)); box-shadow: 0 2px 6px rgb(var(--shadow-rgb) / .6); }
.rail__track { list-style: none; margin: 0; padding: 0 var(--gut); display: flex; gap: clamp(8px, 1.2vw, 24px); width: max-content; height: 100%; }
.rail__item { width: clamp(190px, 16vw, 290px); display: grid; grid-template-rows: auto auto; gap: 10px; transform-origin: 50% 0; }
.rail__item figure { margin: 0; height: 56vh; display: grid; place-items: start center; }
.rail__item img { height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 26px 30px rgb(var(--shadow-rgb) / .55)); }
.rail__item { position: relative; }
.rail__link { position: absolute; inset: 0; z-index: 2; }
.rail__item p { margin: 0; text-align: center; font: 500 12px/1.2 var(--fm); letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--chrome-rgb) / .8); }
.rail__item small { display: none; }
.index { padding: 6vh var(--gut) 0; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; max-width: var(--max); margin: 0 auto; }
.index__list { list-style: none; margin: 0; padding: 0; }
.index__list a { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; font: 800 italic clamp(24px, 2.8vw, 42px)/1 var(--fd); font-stretch: 80%; text-transform: uppercase; }
.index__list a .mono { font-style: normal; color: var(--mut); font-weight: 400; }
.index__list a i { display: none; }
.index__list a::after { content: "→"; font-style: normal; font-size: 22px; }
.index__list a:hover, .index__list a.is-on { color: var(--acc); }
.index__img { margin: 0; height: 52vh; display: grid; place-items: center; overflow: hidden; }
.index__img img { height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 30px 40px rgb(var(--shadow-rgb) / .6)); transition: opacity .3s; }

/* ---------------------------------------------------------------- 06 fabric (frame 06) */
.ch--fabric { padding: 4vh 0 10vh; }
.fabric__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 3.4vw, 64px); align-items: center; }
.macro { margin: 0; position: relative; height: min(88vh, 900px); overflow: hidden; cursor: crosshair; background: rgb(var(--panel-rgb)); }
.macro img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1.15)); }
.macro__loupe { position: absolute; left: 0; top: 0; width: 240px; height: 240px; border-radius: 50%; border: 2px solid rgb(var(--chrome-rgb) / .85); box-shadow: 0 20px 50px rgb(var(--shadow-rgb) / .55), inset 0 0 30px rgb(var(--shadow-rgb) / .35); background-repeat: no-repeat; pointer-events: none; transform: translate(var(--lx, 40%), var(--ly, 30%)); }
.macro figcaption { position: absolute; left: 18px; bottom: 18px; background: rgb(var(--ink-rgb) / .8); padding: 8px 12px; color: rgb(var(--chrome-rgb)); border: 1px solid rgb(var(--chrome-rgb) / .2); }
.fabric__side { padding-right: var(--gut); }
.fabric__lede { color: var(--mut); max-width: 32em; margin: 16px 0 24px; }
.fabric__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: center; }
.drawers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.drawer { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 14px; border: 0; background: rgb(var(--panel-rgb) / .9); box-shadow: inset 0 0 0 1px rgb(var(--line-rgb)), 0 10px 18px rgb(var(--shadow-rgb) / .35); cursor: pointer; transform: translateX(var(--dx, 0)); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; width: 100%; text-align: left; padding: 6px 12px 6px 6px; }
.drawer:hover, .drawer[aria-pressed="true"] { --dx: 14px; box-shadow: inset 0 0 0 1px var(--acc), 0 10px 18px rgb(var(--shadow-rgb) / .35); }
.drawer i { display: block; height: 52px; background-size: cover; background-position: center; border-radius: 3px 3px 6px 6px; box-shadow: inset 0 -8px 10px rgb(var(--shadow-rgb) / .35); }
.drawer b { display: block; font: 600 12px/1.2 var(--fm); letter-spacing: .08em; text-transform: uppercase; }
.drawer small { color: var(--mut); font-size: 12px; line-height: 1.3; display: block; }
.fabric__fan img { width: 100%; filter: drop-shadow(0 26px 30px rgb(var(--shadow-rgb) / .55)); }
.fabric__claim { color: rgb(var(--chrome-rgb)); margin: 18px 0 0; display: flex; gap: 10px; align-items: center; }
.fabric__claim::before { content: ""; width: 4px; height: 18px; background: var(--acc); transform: skewX(var(--cut)); }

/* ---------------------------------------------------------------- 07 process (frame 07) */
.ch--process { padding: 6vh 0 12vh; }
.process__head { padding: 0 var(--gut) 4vh; max-width: var(--max); margin: 0 auto; }
.process__board { position: relative; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.process__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.process__line path { fill: none; stroke: var(--acc); stroke-width: 2.5; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgb(var(--accent-rgb) / .6)); }
.process__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 9vh 26px; position: relative; z-index: 1; }
.proc { position: relative; }
.proc figure { margin: 0 0 12px; aspect-ratio: 3/2; overflow: hidden; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); background: rgb(var(--panel-rgb)); }
.proc img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.proc.is-in img { transform: scale(1); }
.proc h3 { margin: 0; display: flex; align-items: baseline; gap: 10px; font: 800 italic 22px/1 var(--fd); font-stretch: 82%; text-transform: uppercase; }
.proc h3 b { font-size: 30px; }
.proc p { margin: 6px 0 0; color: var(--mut); font-size: 14px; }

/* ---------------------------------------------------------------- 08 services: the cut */
.ch--services { height: 560vh; }
.svx { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); gap: clamp(28px, 4vw, 80px); align-items: center; padding: calc(var(--hdr) + 3vh) var(--gut) 5vh; max-width: 1560px; margin: 0 auto; }
.svx__title { font-size: clamp(44px, 4.6vw, 84px); }
.svx__list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 2px; }
.svx__item button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 38px 1fr; align-items: baseline; width: 100%; padding: 12px 0 14px; position: relative; color: rgb(var(--chrome-rgb) / .34); transition: color .5s; }
.svx__item button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.svx__item b { font: 500 12px/1 var(--fm); letter-spacing: .08em; color: inherit; transition: color .5s; }
.svx__item span { font: 850 italic clamp(24px, 2.1vw, 34px)/1 var(--fd); font-stretch: 82%; text-transform: uppercase; }
.svx__item i { position: absolute; left: 38px; right: 0; bottom: 0; height: 2px; background: rgb(var(--chrome-rgb) / .1); overflow: hidden; }
.svx__item i::after { content: ""; position: absolute; inset: 0; background: var(--acc); transform-origin: left; transform: scaleX(var(--f, 0)); }
.svx__item.is-on button { color: rgb(var(--chrome-rgb)); }
.svx__item.is-on b { color: var(--acc); }
.svx__item.is-done button { color: rgb(var(--chrome-rgb) / .6); }
.svx__copy { position: relative; margin-top: 26px; min-height: 150px; }
.svx__copy > div { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.svx__copy > div.is-on { opacity: 1; transform: none; pointer-events: auto; }
.svx__copy p { color: var(--mut); margin: 0 0 18px; max-width: 30em; }
.svx__copy .meter { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: rgb(var(--chrome-rgb)); }
.svx__copy .meter__bar { width: 150px; }

.svx__stage { position: relative; perspective: 1600px; }
.svx__ghost { position: absolute; right: -1vw; top: -7vh; margin: 0; font: 900 italic clamp(160px, 22vw, 400px)/.8 var(--fd); font-stretch: 76%; color: transparent; -webkit-text-stroke: 1.5px rgb(var(--chrome-rgb) / .12); pointer-events: none; will-change: transform; }
.svx__frame { position: relative; aspect-ratio: 16 / 10; max-height: 72vh; margin-left: auto; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out;
  clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 44px 100%, 0 calc(100% - 44px)); box-shadow: 0 40px 80px rgb(var(--shadow-rgb) / .55); background: rgb(var(--panel-rgb)); }
/* one panel per service; a panel arrives by slicing in along the cut (--in), then the blade sweeps it (--x) */
.svx__panel { position: absolute; inset: 0; --L: calc(120% - var(--in, 0) * 140%);
  clip-path: polygon(var(--L) 0, 140% 0, 140% 100%, calc(var(--L) - 22%) 100%); }
.svx__panel:first-child { --in: 1; }
.svx__img { position: absolute; inset: 0; overflow: hidden; }
.svx__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.12 - var(--in, 0) * .1)); }
.svx__after { --X: calc(var(--x, 0) * 124% - 2%);
  clip-path: polygon(0 0, var(--X) 0, calc(var(--X) - 22%) 100%, 0 100%); }
.svx__after img { transform: scale(calc(1.06 - var(--x, 0) * .06)); }
.svx__blade { position: absolute; top: -10%; bottom: -10%; width: 4px; left: calc(var(--x, 0) * 124% - 13%); background: var(--acc); transform: rotate(12.4deg); box-shadow: 0 0 34px 8px rgb(var(--accent-rgb) / .7), 0 0 3px 1px rgb(var(--chrome-rgb) / .9); opacity: calc(var(--in, 0) * (1 - var(--x, 0) * var(--x, 0))); pointer-events: none; }
.svx__lab { position: absolute; bottom: 18px; padding: 8px 12px; font: 500 11px/1 var(--fm); letter-spacing: .1em; text-transform: uppercase; background: rgb(var(--ink-rgb) / .75); border: 1px solid rgb(var(--chrome-rgb) / .18); color: rgb(var(--chrome-rgb)); backdrop-filter: blur(6px); }
.svx__lab--b { right: 54px; opacity: calc(1 - var(--x, 0) * 1.4); }
.svx__lab--a { left: 18px; opacity: calc(var(--x, 0) * 1.6 - .3); }
.svx__lab--a::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--acc); margin-right: 8px; vertical-align: 1px; }
.svx__name { position: absolute; left: 22px; top: 18px; font: 850 italic clamp(20px, 1.8vw, 30px)/1 var(--fd); font-stretch: 82%; text-transform: uppercase; color: rgb(var(--chrome-rgb)); text-shadow: 0 2px 16px rgb(var(--shadow-rgb) / .7); }
.svx__bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 18px; max-width: 100%; }
.svx__bar i { height: 3px; background: rgb(var(--chrome-rgb) / .12); position: relative; overflow: hidden; transform: skewX(var(--cut)); }
.svx__bar i::after { content: ""; position: absolute; inset: 0; background: var(--acc); transform-origin: left; transform: scaleX(var(--f, 0)); }

/* ---------------------------------------------------------------- 09 world (frame 09) */
.ch--world { padding: 6vh 0 8vh; overflow: hidden; }
.world__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: center; padding: 0 var(--gut); max-width: var(--max); margin: 0 auto; }
.world__lede { color: var(--mut); max-width: 30em; margin: 18px 0 24px; font-size: 18px; }
.modes { display: flex; flex-wrap: wrap; gap: 8px 6px; }
.mode { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 0; background: none; cursor: pointer; font: 500 12px/1 var(--fm); letter-spacing: .08em; text-transform: uppercase; }
.mode::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--cut)); border: 1px solid var(--line); background: rgb(var(--panel-rgb)); }
.mode svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.mode[aria-checked="true"]::before { background: var(--acc); border-color: var(--acc); }
.world__mode { color: rgb(var(--chrome-rgb)); margin: 16px 0 0; }
.world__products { width: min(100%, 640px); margin-top: 4vh; filter: drop-shadow(0 26px 30px rgb(var(--shadow-rgb) / .55)); }
.globe { margin: 0; position: relative; aspect-ratio: 1; width: 100%; }
.globe canvas { width: 100%; height: 100%; display: block; }
.globe__labels { position: absolute; inset: 0; pointer-events: none; }
.globe__label { position: absolute; left: 0; top: 0; font: 500 11px/1 var(--fm); letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--chrome-rgb)); background: rgb(var(--ink-rgb) / .7); padding: 5px 7px; white-space: nowrap; transition: opacity .3s; }
.globe__label--origin { background: var(--acc); font-weight: 600; }

/* ---------------------------------------------------------------- 10 brief (frame 10) */
.ch--brief { padding: 6vh 0 10vh; }
.brief__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1.1fr); grid-template-areas: "form tag title"; gap: clamp(20px, 3vw, 48px); align-items: start; padding: 0 var(--gut); max-width: var(--max); margin: 0 auto; }
.brief__title { grid-area: title; position: relative; }
.brief__lede { color: var(--mut); max-width: 26em; margin: 18px 0 0; }
.brief__group { margin-top: 3vh; width: 100%; filter: drop-shadow(0 30px 34px rgb(var(--shadow-rgb) / .55)); }
.quote { grid-area: form; border: 1px solid var(--line); background: rgb(var(--panel-rgb) / .82); padding: clamp(20px, 2.6vw, 36px); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%); }
.quote__top { display: flex; justify-content: space-between; align-items: center; }
.quote__top .eyebrow { margin: 0; }
.quote__step { margin: 0; color: var(--mut); }
.quote__bar { height: 4px; background: var(--line); margin: 16px 0 22px; }
.quote__bar i { display: block; height: 100%; width: calc(var(--p, 1) / 6 * 100%); background: var(--acc); transition: width .5s; }
.step { display: none; border: 0; padding: 0; margin: 0; min-width: 0; }
.step.is-on { display: block; animation: stepIn .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes stepIn { from { opacity: 0; transform: translateX(24px); } }
.quote__q { font: 850 italic clamp(30px, 2.8vw, 42px)/.95 var(--fd); font-stretch: 80%; text-transform: uppercase; padding: 0; margin: 0 0 18px; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { position: relative; isolation: isolate; border: 0; background: none; min-height: 44px; padding: 0 16px; cursor: pointer; font-size: 15px; }
.pick::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--cut)); border: 1px solid var(--line); background: rgb(var(--ink-rgb) / .5); }
.pick[aria-pressed="true"]::before { background: var(--acc); border-color: var(--acc); }
.field--big input { font: 800 italic 54px/1 var(--fd); min-height: 80px; }
.moq { margin-top: 18px; }
.moq__bar { height: 10px; background: var(--line); }
.moq__bar i { display: block; height: 100%; width: 100%; background: var(--ok); transition: width .4s, background-color .4s; }
.moq.is-low .moq__bar i { background: var(--acc); }
.moq p { margin: 10px 0 0; color: var(--ok); }
.moq.is-low p { color: var(--acc); }
.field__err { color: var(--acc); min-height: 1em; margin: 8px 0 0; text-transform: none; letter-spacing: .02em; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; font-size: 14px; color: var(--mut); }
.consent input { width: 22px; height: 22px; accent-color: rgb(var(--accent-rgb)); margin-top: 2px; flex: none; }
.quote__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.quote__done p { color: var(--mut); }
.tag-art { grid-area: tag; position: relative; display: grid; justify-items: center; }
.tag-art__string { width: 2px; height: 70px; background: linear-gradient(rgb(var(--chrome-rgb) / .1), rgb(var(--chrome-rgb) / .7)); }
.swing { width: min(100%, 300px); background: var(--acc); color: rgb(var(--chrome-rgb)); padding: 34px 24px 22px; clip-path: polygon(50% 0, 100% 9%, 100% 100%, 0 100%, 0 9%); transform-origin: 50% 0; position: relative; box-shadow: 0 30px 50px rgb(var(--shadow-rgb) / .4); }
.swing::before { content: ""; position: absolute; left: 50%; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: rgb(var(--ink-rgb)); transform: translateX(-50%); }
.swing__mark { width: 86px; height: auto; margin: 22px auto 16px; filter: drop-shadow(0 4px 8px rgb(var(--shadow-rgb) / .3)); }
.swing__rows { margin: 0; display: grid; gap: 8px; }
.swing__rows div { display: grid; gap: 2px; }
.swing__rows dt { font: 500 10px/1 var(--fm); letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.swing__rows dd { margin: 0; font: 700 15px/1.25 var(--fm); text-transform: uppercase; background: rgb(var(--chrome-rgb) / .16); padding: 6px 8px; min-height: 30px; overflow-wrap: anywhere; }
.swing__foot { font: 500 11px/1 var(--fm); letter-spacing: .06em; margin: 16px 0 0; }
.swing__cut { display: none; }

/* ---------------------------------------------------------------- 11 end (frame 11) + footer */
.ch--end { overflow: hidden; }
.end__stage { min-height: 82vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "title group" "cta group" "next next"; align-content: center; column-gap: 3vw; row-gap: 30px; padding: 12vh var(--gut) 6vh; max-width: var(--max); margin: 0 auto; position: relative; }
.end__title { grid-area: title; margin: 0; font: 900 italic clamp(60px, 8vw, 150px)/.86 var(--fd); font-stretch: var(--fd-stretch); text-transform: uppercase; color: rgb(var(--chrome-rgb)); }
.end__title > span { display: block; position: relative; }
.end__r { display: inline-block; height: .95em; width: auto; vertical-align: -.06em; margin-left: -.12em; filter: drop-shadow(0 10px 20px rgb(var(--shadow-rgb) / .5)); }
.end__title .ch-l { display: inline-block; transition: font-weight .25s, font-stretch .25s; }
.end__stage > .btn { grid-area: cta; justify-self: start; }
.end__group { grid-area: group; align-self: center; width: 100%; filter: drop-shadow(0 30px 40px rgb(var(--shadow-rgb) / .6)); }
.next { grid-area: next; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; margin-top: 4vh; }
.next a { display: grid; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); background: rgb(var(--ink-rgb) / .5); text-decoration: none; font: 700 italic 20px/1.1 var(--fd); font-stretch: 85%; text-transform: uppercase; transition: border-color .3s, background-color .3s; }
.next a .mono { color: var(--acc); font-style: normal; font-weight: 400; }
.next a:hover { border-color: var(--acc); background: rgb(var(--panel-rgb)); }
.foot { border-top: 1px solid var(--line); padding: 60px var(--gut) 28px; color: rgb(var(--chrome-rgb)); background: rgb(var(--ink-rgb) / .7); }
.foot__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.3fr repeat(3, 1fr) 1.3fr; gap: 32px; }
.foot__brand img { width: 220px; height: auto; }
.foot__brand .mono { color: var(--mut); }
.foot__tag { font: 800 italic 24px/1 var(--fd); text-transform: uppercase; font-stretch: 82%; }
.foot__h { color: var(--acc); margin: 0 0 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot ul a { text-decoration: none; color: var(--mut); font-size: 15px; display: inline-block; padding: 3px 0; }
.foot ul a:hover, .foot__contact a:hover { color: rgb(var(--chrome-rgb)); }
.foot__contact p { color: var(--mut); margin: 0 0 12px; font-size: 15px; }
.foot__contact a { color: rgb(var(--chrome-rgb)); }
.foot__bar { max-width: var(--max); margin: 40px auto 0; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; justify-content: space-between; color: var(--mut); }
.foot__bar p { margin: 0; }
.foot__bar b { color: rgb(var(--chrome-rgb)); font-weight: 500; }
.foot__bar a { text-decoration: none; }
.foot__motion { background: none; border: 1px solid var(--line); padding: 10px 14px; min-height: 44px; cursor: pointer; color: var(--mut); }
.foot__motion[aria-pressed="true"] { border-color: var(--acc); color: rgb(var(--chrome-rgb)); }

/* ---------------------------------------------------------------- cursor (never over the fabric loupe) */
.cursor { position: fixed; inset: 0; pointer-events: none; z-index: 150; display: none; transition: opacity .25s; }
@media (hover: hover) and (pointer: fine) { .js:not(.motion-off) .cursor { display: block; } }
.cursor.is-hidden { opacity: 0; }
.cursor__ring { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border: 1px solid rgb(var(--chrome-rgb) / .5); transform: skewX(var(--cut)); transition: width .3s, height .3s, left .3s, top .3s, border-color .3s; }
.cursor__dot { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; background: var(--acc); }
.cursor.is-link .cursor__ring { width: 58px; height: 58px; left: -29px; top: -29px; border-color: var(--acc); }
.cursor__label { display: none; }

/* ---------------------------------------------------------------- reveals */
.js .rv { opacity: 0; transform: translateY(40px); }
.motion-off .rv { opacity: 1 !important; transform: none !important; }

/* grid children may shrink below their content; entrance offsets never widen the page */
.layers__pin > *, .lab__grid > *, .fabric__grid > *, .world__grid > *, .brief__grid > *, .index > *, .sports__stage > *, .street__pin > *, .svx > *, .quote, .fabric__cols > * { min-width: 0; }
main, .ch, .foot { overflow-x: clip; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .hdr__nav { display: none; }
  .brief__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); grid-template-areas: "title title" "form tag"; }
  .foot__grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot__brand, .foot__contact { grid-column: span 3; }
  .menu__inner { grid-template-columns: 1fr 1fr 1fr; }
  .menu__preview { display: none; }
  .fabric__cols { grid-template-columns: 1fr; }
  .fabric__fan { display: none; }
}
@media (max-width: 860px) {
  :root { --hdr: 64px; }
  body { font-size: 16px; }
  .hdr { gap: 12px; }
  .hdr__logo img { width: 128px; }
  .hdr__cut span, .hdr__cta { display: none; }
  .bg__spot { display: none; }

  .ch--hero { height: 100svh; min-height: 640px; }
  .hero__media img { object-position: 64% 50%; }
  .hero__shade { background: linear-gradient(180deg, rgb(var(--ink-rgb) / .92) 0%, rgb(var(--ink-rgb) / .5) 38%, transparent 55%, rgb(var(--ink-rgb) / .9) 100%); }
  .hero__copy { width: auto; right: var(--gut); top: calc(var(--hdr) + 3vh); translate: none; }
  .hero__title { font-size: clamp(42px, 12.5vw, 72px); }
  .hero__lede { font-size: 15px; margin-top: 12px; }
  .hero__ctas { margin-top: 16px; gap: 12px; }
  .hero__ctas .btn { flex: 1 1 140px; padding: 0 16px; }
  .facts { right: var(--gut); gap: 8px 12px; bottom: 18px; }
  .facts .tag { padding: 9px 13px; font-size: 11px; }
  .facts .tag:nth-child(n+5), .hero__scroll { display: none; }

  .ch--layers { height: 360vh; }
  .layers__pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; padding: calc(var(--hdr) + 2vh) var(--gut) 2vh; gap: 8px; align-items: start; }
  .layers__copy .title { font-size: 44px; }
  .layers__lede, .layers__copy .ba, .layers__copy .note, #addTech { display: none; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 10px calc(var(--gut) * -1) 0; padding: 4px var(--gut); }
  .tab { flex: none; }
  .layers__list { position: relative; width: auto; height: 96px; clip: auto; overflow: visible; grid-row: 3; }
  .layers__list .layer { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
  .layers__list .layer.is-on { opacity: 1; }
  .parts { display: none; }

  .lab__grid { grid-template-columns: 1fr; padding-top: calc(var(--hdr) + 2vh); gap: 0; align-items: start; }
  .lab__panel { order: 1; }
  .lab__panel .title { font-size: 46px; }
  .lab__grid::after { content: ""; order: 2; height: 62vh; }
  .ticket { order: 3; grid-column: 1; }

  .ch--sports { height: auto; }
  .sports__stage { position: relative; height: auto; overflow: visible; padding-bottom: 6vh; }
  .sports__ghost { font-size: 26vw; top: 18%; }
  .arc { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; perspective: none; padding: 20px 0 12px; }
  .arc__track { padding: 0 var(--gut); gap: 10px; transform: none !important; }
  .arc__card { flex: 0 0 52vw; max-height: none; scroll-snap-align: center; transform: none !important; }
  .arc__foot .iconbtn, .arc__n { display: none; }

  .street__pin { height: auto; overflow: visible; }
  .rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .rail__track { height: auto; transform: none !important; }
  .rail__item { width: 56vw; scroll-snap-align: center; }
  .rail__item figure { height: 52vh; }
  .index { grid-template-columns: 1fr; }
  .index__img { display: none; }
  .index__list a { grid-template-columns: 34px 1fr auto; font-size: 26px; }

  .fabric__grid, .world__grid { grid-template-columns: 1fr; }
  .macro { height: 70vh; cursor: auto; }
  .macro__loupe { width: 160px; height: 160px; }
  .fabric__side { padding: 0 var(--gut); }

  .process__list { grid-template-columns: 1fr; gap: 26px; padding-left: 34px; }
  .proc { display: grid; grid-template-columns: 42% 1fr; gap: 14px; align-items: center; }
  .proc figure { margin: 0; }
  .proc h3 { font-size: 20px; }

  .ch--services { height: 420vh; }
  .svx { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; gap: 18px; padding-top: calc(var(--hdr) + 2vh); }
  .svx__title { font-size: 40px; }
  .svx__title br { display: none; }
  .svx__list { display: flex; gap: 14px; margin-top: 14px; overflow: hidden; }
  .svx__item { flex: none; }
  .svx__item span { font-size: 18px; }
  .svx__item button { grid-template-columns: 26px auto; padding: 6px 0 10px; }
  .svx__item i { left: 26px; }
  .svx__item:not(.is-on) { display: none; }
  .svx__copy { min-height: 120px; margin-top: 8px; order: 3; }
  .svx__copy p { font-size: 15px; margin-bottom: 12px; }
  .svx__frame { aspect-ratio: 4 / 5; max-height: 46vh; width: 100%; }
  .svx__ghost { font-size: 44vw; top: -6vh; }
  .svx__lab--b { right: auto; left: 18px; bottom: 54px; }

  .brief__grid { grid-template-columns: 1fr; grid-template-areas: "title" "form" "tag"; }
  .tag-art { display: none; }
  .quote__nav .btn { flex: 1; }

  .end__stage { grid-template-columns: 1fr; grid-template-areas: "title" "cta" "group" "next"; }
  .next { grid-template-columns: 1fr 1fr; }
  .end__title { font-size: clamp(52px, 14vw, 100px); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand, .foot__contact { grid-column: span 2; }
  .menu__inner { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 380px) { .hero__ctas .btn { flex-basis: 100%; } .designs { grid-template-columns: repeat(4, 1fr); } }
@media (max-height: 520px) and (orientation: landscape) {
  .ch--layers, .ch--sports, .ch--services { height: auto; }
  .layers__pin, .sports__stage, .svx { position: relative; height: auto; min-height: 100vh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ch--layers, .ch--sports, .ch--services { height: auto; }
  .layers__pin, .sports__stage, .svx { position: relative; height: auto; min-height: 100vh; }
  .loader { display: none; }
}
.motion-off .ch--layers, .motion-off .ch--sports, .motion-off .ch--services { height: auto; }
.motion-off .layers__pin, .motion-off .sports__stage, .motion-off .svx { position: relative; height: auto; min-height: 100vh; }