/* ==========================================================
   STUDIO 1123 — site styles
   Brand: Ink #0B0B0C · Bone #F2EFE8 · Signal #FF4D1A
   Type: Archivo Expanded (display) · Inter (text) · JetBrains Mono (timecode)
   ========================================================== */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --ink: #0B0B0C;
  --ink-2: #141416;
  --ink-3: #1D1D20;
  --line: #2A2A2E;
  --bone: #F2EFE8;
  --bone-2: #C9C5BD;
  --smoke: #9A968F;
  --signal: #FF4D1A;
  --display: "Archivo", "Arial Black", sans-serif;
  --text: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --pad: clamp(20px, 5vw, 72px);
  --radius: clamp(18px, 2vw, 28px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--ink); color: var(--bone);
  font-family: var(--text); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.is-loading { overflow: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--signal); color: var(--ink); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--pad); }
.eyebrow { margin: 0 0 22px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--smoke); display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 3px; height: 14px; background: var(--signal); border-radius: 2px; }
.h2 { margin: 0; font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: clamp(36px, 5.2vw, 84px); line-height: .98; letter-spacing: -.025em; max-width: 15ch; }
em { font-style: normal; color: var(--signal); }

/* ---------- buttons ---------- */
.btn {
  --h: 54px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 28px; border-radius: 999px; border: 0; cursor: pointer;
  font: 600 16px/1 var(--text); text-decoration: none; letter-spacing: -.005em; overflow: hidden; isolation: isolate;
  transition: color .5s var(--ease);
}
.btn--sm { --h: 44px; padding: 0 20px; font-size: 14.5px; }
.btn--lg { --h: 62px; padding: 0 36px; font-size: 17px; }
.btn--signal { background: var(--signal); color: var(--ink); }
.btn--signal::after { content: ""; position: absolute; inset: 0; background: var(--bone); transform: translateY(101%); border-radius: inherit; transition: transform .55s var(--ease); z-index: -1; }
.btn--signal:hover::after { transform: translateY(0); }
.btn--ghost { color: var(--bone); box-shadow: inset 0 0 0 1px #3d3d42; }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--bone); }
.round { width: 54px; height: 54px; border-radius: 50%; border: 1px solid #3d3d42; background: transparent; color: var(--bone); display: grid; place-items: center; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.round svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.round:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }

/* ---------- grain + cursor ---------- */
.grain { pointer-events: none; position: fixed; inset: -50%; z-index: 90; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-2%)} 60%{transform:translate(-2%,-4%)} 80%{transform:translate(4%,2%)} 100%{transform:translate(0,0)} }

.cursor { position: fixed; left: 0; top: 0; z-index: 100; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--bone); pointer-events: none; mix-blend-mode: difference; display: grid; place-items: center; transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background .3s; opacity: 0; }
.cursor__label { font: 600 12px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity .2s; }
.cursor.is-link { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.cursor.is-media { width: 92px; height: 92px; margin: -46px 0 0 -46px; mix-blend-mode: normal; background: var(--signal); }
.cursor.is-media .cursor__label { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 200; background: var(--ink); display: grid; place-items: center; }
.loader__inner { width: min(560px, 84vw); }
.loader__tc { font-family: var(--mono); font-size: clamp(34px, 7vw, 72px); letter-spacing: -.02em; color: var(--bone); font-variant-numeric: tabular-nums; }
.loader__bar { position: relative; height: 2px; background: #26262a; margin: 22px 0 14px; }
.loader__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--signal); }
.loader__head { position: absolute; top: -12px; left: 0; width: 2px; height: 26px; background: var(--signal); }
.loader__head::before { content: ""; position: absolute; top: -6px; left: -6px; border: 7px solid transparent; border-top: 9px solid var(--signal); border-bottom: 0; }
.loader__meta { display: flex; justify-content: space-between; font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--smoke); }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 80; display: flex; align-items: center; gap: 32px; padding: 18px var(--pad); transition: transform .6s var(--ease), background .4s; }
.nav.is-scrolled { background: rgba(11,11,12,.72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.nav.is-hidden { transform: translateY(-110%); }
.nav__logo img { height: 30px; width: auto; }
.nav__links { display: flex; gap: 34px; margin-left: auto; }
.nav__links a { position: relative; text-decoration: none; font-size: 15px; color: var(--bone-2); padding: 10px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--signal); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav__links a:hover { color: var(--bone); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__burger { display: none; margin-left: auto; width: 48px; height: 48px; border-radius: 50%; border: 1px solid #3d3d42; background: transparent; cursor: pointer; position: relative; }
.nav__burger span { position: absolute; left: 14px; right: 14px; height: 2px; background: var(--bone); transition: transform .4s var(--ease); }
.nav__burger span:first-child { top: 19px; } .nav__burger span:last-child { top: 27px; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 70; background: var(--ink); display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 var(--pad); clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease); }
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu a { font-family: var(--display); font-stretch: 115%; font-weight: 900; font-size: clamp(44px, 12vw, 80px); text-decoration: none; text-transform: uppercase; line-height: 1.05; letter-spacing: -.02em; }
.menu a:hover { color: var(--signal); }
@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding: 140px var(--pad) clamp(48px, 8vh, 96px); overflow: hidden; }
.hero__rec { position: absolute; top: 96px; right: var(--pad); z-index: 3; font: 500 13px var(--mono); letter-spacing: .12em; color: var(--bone-2); display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.hero__rec .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.hero__media { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.vbox { position: absolute; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--ink-3); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.vbox video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); }
.vbox--a { width: clamp(140px, 14vw, 240px); aspect-ratio: 4/5; right: 36%; top: 9%; }
.vbox--b { width: clamp(180px, 22vw, 380px); aspect-ratio: 16/10; right: var(--pad); top: 13%; }
.vbox--c { width: clamp(110px, 11vw, 190px); aspect-ratio: 1; right: var(--pad); top: 63%; }
.vbox--d { width: clamp(120px, 12vw, 210px); aspect-ratio: 9/14; right: 20%; top: 70%; }
.hero__content { position: relative; z-index: 2; max-width: 1440px; width: 100%; margin: 0 auto; }
.hero__title { margin: 0 0 28px; font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: clamp(64px, 13.5vw, 236px); line-height: .84; letter-spacing: -.04em; text-transform: uppercase; }
.line { display: block; overflow: hidden; padding-bottom: .04em; }
.line > span { display: inline-block; will-change: transform; }
.hero__sub { max-width: 520px; margin: 0 0 32px; font-size: clamp(17px, 1.4vw, 20px); color: var(--bone-2); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__scroll { position: absolute; z-index: 2; right: var(--pad); bottom: clamp(48px, 8vh, 96px); display: flex; flex-direction: column; align-items: center; gap: 12px; font: 500 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--smoke); }
.hero__scroll i { width: 1px; height: 56px; background: linear-gradient(var(--signal) 0 0) no-repeat 0 0/100% 40%, #333; animation: drip 2s var(--ease) infinite; }
@keyframes drip { 0% { background-position: 0 -60%; } 100% { background-position: 0 220%; } }
@media (max-width: 860px) {
  .vbox--a { right: 6%; top: 15%; } .vbox--b { right: -12%; top: 33%; width: 52vw; }
  .vbox--c { right: 52%; top: 22%; } .vbox--d { display: none; }
  .hero__scroll, .hero__rec { display: none; }
  .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,11,12,0) 30%, rgba(11,11,12,.92) 70%); }
}

/* ---------- reel ---------- */
.reel { position: relative; }
.reel__pin { height: 100vh; display: grid; place-items: center; position: relative; overflow: hidden; }
.reel__frame { position: relative; width: 100vw; height: 100vh; overflow: hidden; border-radius: 0; background: var(--ink-3); will-change: clip-path; clip-path: inset(22% 26% round 28px); }
.reel__frame video { width: 100%; height: 100%; object-fit: cover; }
.reel__ui { position: absolute; left: 0; right: 0; bottom: 44px; padding: 0 var(--pad); display: flex; justify-content: space-between; align-items: center; }
.reel__label { font-family: var(--display); font-stretch: 115%; font-weight: 800; text-transform: uppercase; font-size: clamp(18px, 2vw, 28px); letter-spacing: -.01em; }
.reel__label b { color: var(--signal); }
.reel__sound { min-height: 44px; padding: 0 18px; border-radius: 999px; background: rgba(11,11,12,.5); color: var(--bone); border: 1px solid rgba(242,239,232,.3); font: 500 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.reel__timeline { position: absolute; left: var(--pad); right: var(--pad); bottom: 24px; height: 2px; background: rgba(242,239,232,.2); }
.reel__timeline span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--signal); }
.reel__caption { position: absolute; z-index: 2; pointer-events: none; margin: 0; text-align: center; font-family: var(--display); font-stretch: 125%; font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 6vw, 104px); line-height: .9; letter-spacing: -.03em; mix-blend-mode: difference; }
.reel__caption span { display: block; }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; background: var(--ink); }
.marquee__track { display: flex; align-items: center; gap: 44px; width: max-content; will-change: transform; }
.marquee span { font-family: var(--display); font-stretch: 125%; font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 5vw, 76px); letter-spacing: -.02em; white-space: nowrap; line-height: 1; }
.marquee span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1.5px var(--bone); }
.marquee i { flex: none; width: 4px; height: .8em; font-size: clamp(34px, 5vw, 76px); background: var(--signal); position: relative; }
.marquee i::before { content: ""; position: absolute; top: -.18em; left: -.14em; width: .32em; height: .2em; background: var(--signal); clip-path: polygon(0 0, 100% 0, 100% 40%, 62% 100%, 38% 100%, 0 40%); }

/* ---------- services ---------- */
.services { padding: clamp(80px, 10vw, 160px) 0; position: relative; }
.svc { list-style: none; margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; border-top: 1px solid var(--line); }
.svc__row { position: relative; display: grid; grid-template-columns: 80px 1fr minmax(0, 380px); align-items: center; gap: 24px; padding: clamp(26px, 3vw, 44px) 0; border-bottom: 1px solid var(--line); cursor: default; }
.svc__no { font: 500 14px var(--mono); color: var(--signal); transition: color .4s; }
.svc__name { margin: 0; font-family: var(--display); font-stretch: 120%; font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 5vw, 80px); line-height: 1; letter-spacing: -.025em; transition: transform .6s var(--ease), color .4s; }
.svc__desc { margin: 0; color: var(--bone-2); font-size: 16px; transition: color .4s; }
@media (max-width: 860px) {
  .svc__row { grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- numbers ---------- */
.numbers { background: var(--signal); color: var(--ink); padding: clamp(72px, 9vw, 140px) 0; }
.numbers__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; }
.num { display: flex; flex-direction: column; gap: 12px; border-top: 2px solid var(--ink); padding-top: 24px; }
.num__big { font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: clamp(80px, 11vw, 176px); line-height: .85; letter-spacing: -.045em; display: flex; align-items: flex-start; gap: 6px; font-variant-numeric: tabular-nums; }
.num__big small { font-size: .32em; letter-spacing: -.01em; margin-top: .12em; }
.num__label { font-size: 17px; font-weight: 500; max-width: 26ch; }

/* ---------- process / timeline ---------- */
.process { position: relative; }
.process__pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 120px 0 80px; }
.process__head { margin-bottom: clamp(40px, 5vw, 64px); width: 100%; }
.tl { position: relative; margin: 0 var(--pad); padding: 54px 0 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2); overflow: hidden; }
.tl__ruler { position: absolute; top: 0; left: 0; right: 0; height: 30px; border-bottom: 1px solid var(--line);
  background-image: repeating-linear-gradient(90deg, #3a3a40 0 1px, transparent 1px 20px), repeating-linear-gradient(90deg, #5a5a62 0 1px, transparent 1px 100px);
  background-size: 100% 8px, 100% 16px; background-position: 0 100%, 0 100%; background-repeat: repeat-x; }
.tl__tc { position: absolute; top: 5px; right: 16px; font: 500 12px var(--mono); color: var(--signal); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.tl__tracks { display: flex; flex-direction: column; gap: 6px; padding: 0 16px 0 56px; }
.tl__track { position: relative; height: 34px; }
.tl__track em { position: absolute; left: -44px; top: 50%; transform: translateY(-50%); font: 500 11px var(--mono); color: var(--smoke); font-style: normal; }
.tl__track i { position: absolute; top: 0; bottom: 0; border-radius: 7px; background: #2c3a8c; border: 1px solid rgba(255,255,255,.12); }
.tl__track:nth-child(1) i { background: #6b3fd4; }
.tl__track--audio i { background: repeating-linear-gradient(90deg, #1f6b52 0 3px, #2a8a6a 3px 5px); height: 100%; }
.tl__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); margin-top: 22px; }
.step { padding: 28px 24px 34px; border-right: 1px solid var(--line); opacity: .32; transition: opacity .5s; }
.step:last-child { border-right: 0; }
.step.is-on { opacity: 1; }
.step__no { font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 46px; line-height: 1; color: var(--signal); }
.step h3 { margin: 14px 0 8px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.step p { margin: 0; color: var(--bone-2); font-size: 15.5px; }
.tl__head { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--signal); z-index: 3; pointer-events: none; box-shadow: 0 0 24px rgba(255,77,26,.6); }
.tl__head::before { content: ""; position: absolute; top: 0; left: -8px; width: 18px; height: 16px; background: var(--signal); clip-path: polygon(0 0, 100% 0, 100% 45%, 50% 100%, 0 45%); }
@media (max-width: 860px) {
  .tl__head { bottom: auto; height: 186px; }
  .tl__steps { grid-template-columns: 1fr 1fr; }
  .step:nth-child(2) { border-right: 0; }
  .step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .tl__steps { grid-template-columns: 1fr; }
  .step { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ---------- contact ---------- */
.contact { position: relative; padding: clamp(100px, 12vw, 180px) 0; overflow: hidden; border-top: 1px solid var(--line); }
.contact__bg { position: absolute; inset: 0; opacity: .28; }
.contact__bg video { width: 100%; height: 100%; object-fit: cover; }
.contact__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 40%, rgba(11,11,12,.2), var(--ink) 70%); }
.contact__grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(48px, 6vw, 96px); align-items: start; }
.contact__title { margin: 0 0 26px; font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: clamp(40px, 4.8vw, 88px); line-height: .9; letter-spacing: -.035em; text-transform: uppercase; }
.contact__lead { margin: 0 0 18px; color: var(--bone-2); max-width: 40ch; }
.contact__mail { font-family: var(--display); font-stretch: 110%; font-weight: 700; font-size: clamp(20px, 2vw, 28px); text-decoration: none; border-bottom: 2px solid var(--signal); padding-bottom: 4px; }
.form { display: flex; flex-direction: column; gap: 22px; background: rgba(20,20,22,.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 3vw, 44px); }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span, .chips legend { font-size: 13.5px; font-weight: 500; color: var(--bone-2); }
.field input, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid #44444a; color: var(--bone); font: 400 18px var(--text); padding: 10px 0 12px; border-radius: 0; resize: vertical; transition: border-color .3s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--signal); }
.field textarea::placeholder { color: #77736d; }
.chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips legend { padding: 0; margin-bottom: 12px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; }
.chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid #44444a; font-size: 15px; transition: background .3s, color .3s, border-color .3s; }
.chips input:checked + span { background: var(--signal); border-color: var(--signal); color: var(--ink); font-weight: 600; }
.chips input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 3px; }
.form .btn { align-self: flex-start; }
.form__note { margin: 0; min-height: 1.4em; font-size: 15px; color: var(--bone-2); }

/* ---------- footer ---------- */
.footer { padding: 56px 0 0; border-top: 1px solid var(--line); overflow: hidden; }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 40px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.footer__links a { text-decoration: none; color: var(--bone-2); padding: 10px 0; }
.footer__links a:hover { color: var(--signal); }
.footer__copy { font-size: 14px; color: var(--smoke); }
.footer__mark { width: calc(100% - 2 * var(--pad)); margin: clamp(40px, 6vw, 80px) auto 0; height: auto; transform: translateY(14%); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reel__frame { clip-path: inset(6% 4% round 28px); height: 80vh; }
  .step { opacity: 1; }
}

/* ==========================================================
   NEXT-LEVEL LAYER
   ========================================================== */

/* WebGL orbs */
.orbs { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.hero .orbs { opacity: .95; }
.orbs--contact { opacity: .85; }

/* loader shutter */
.loader { background: transparent; }
.loader__inner { position: relative; z-index: 2; }
.loader__shutter { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--ink); z-index: 1; }
.loader__shutter--top { top: 0; } .loader__shutter--bottom { bottom: 0; }

/* split characters */
.ch { display: inline-block; will-change: transform; transform-origin: 50% 100%; backface-visibility: hidden; }
.wd { display: inline-block; white-space: nowrap; }
[data-chars] { perspective: 900px; }
.hero__title .line, .contact__title .line { overflow: visible; }

/* hero 3D */
.hero { perspective: 1400px; }
.hero__media { transform-style: preserve-3d; will-change: transform; }
.vbox { transform-style: preserve-3d; }
.vbox::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); pointer-events: none; }

/* services: names fill as you scroll */
.svc__name[data-fillscrub] { color: transparent; -webkit-text-stroke: 1.5px rgba(242,239,232,.3);
  background-image: linear-gradient(90deg, var(--bone) 0 50%, transparent 50% 100%); background-size: 200.5% 100%; background-position: 100% 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; transition: -webkit-text-stroke-color .4s; }
.svc__row { overflow: hidden; }
.svc__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.svc__row:hover::after { transform: scaleX(1); }
.svc__row:hover .svc__no { color: var(--bone); }

/* rolling digits */
.dg { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; line-height: 1; }
.dg__col { display: flex; flex-direction: column; will-change: transform; }
.dg__col span { display: block; height: 1em; line-height: 1; }
.num__big { line-height: 1; }

/* footer curtain reveal */
main { position: relative; z-index: 1; background: var(--ink); box-shadow: 0 40px 80px rgba(0,0,0,.6); }
.footer { position: sticky; bottom: 0; z-index: 0; }

/* skew target */
[data-skew] { will-change: transform; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num__big { position: relative; }
.reel__label--sm { font-family: var(--mono); font-stretch: 100%; font-weight: 500; font-size: 13px; letter-spacing: .12em; color: var(--bone-2); }

/* ===== v5 refinements ===== */

/* hero: just type + orbs + a live ruler */
.hero__media, .vbox { display: none !important; }
.hero__ruler { position: absolute; z-index: 2; left: var(--pad); right: var(--pad); bottom: 22px; height: 26px; pointer-events: none; }
.hero__ticks { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(242,239,232,.18) 0 1px, transparent 1px 16px), repeating-linear-gradient(90deg, rgba(242,239,232,.38) 0 1px, transparent 1px 80px); background-size: 100% 7px, 100% 14px; background-position: 0 100%, 0 100%; background-repeat: repeat-x; border-bottom: 1px solid rgba(242,239,232,.18); }
.hero__ph { position: absolute; bottom: 0; left: 0; width: 2px; height: 30px; background: var(--signal); box-shadow: 0 0 18px rgba(255,77,26,.7); will-change: transform; }
.hero__ph::before { content: ""; position: absolute; top: -8px; left: -7px; width: 16px; height: 12px; background: var(--signal); clip-path: polygon(0 0, 100% 0, 100% 45%, 50% 100%, 0 45%); }
.hero__ph span { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); font: 500 11px var(--mono); letter-spacing: .08em; color: var(--signal); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hero { padding-bottom: clamp(80px, 12vh, 130px); }
.hero__scroll { bottom: clamp(90px, 13vh, 140px); }

/* reel: caption sits clear above the footage */
.reel__pin { display: block; }
.reel__caption { position: absolute; z-index: 1; top: 13vh; left: 0; right: 0; mix-blend-mode: normal; color: var(--bone); font-size: clamp(34px, 6vw, 96px); line-height: .92; }
.reel__caption .line { display: block; overflow: visible; }
.reel__frame { position: absolute; inset: 0; width: auto; height: auto; z-index: 2; }

/* channels carousel: curved, face-first cards */
.work { padding: clamp(96px, 13vw, 190px) 0 clamp(70px, 9vw, 130px); }
.work__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: clamp(36px, 4vw, 60px); }
.work__controls { display: flex; gap: 10px; }
.carousel { overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; padding: 40px 0 20px; }
.carousel.is-dragging { cursor: grabbing; }
.carousel__track { display: flex; gap: clamp(14px, 1.6vw, 26px); width: max-content; padding-left: var(--pad); will-change: transform; }
.card { flex: none; width: clamp(200px, 19vw, 290px); transform-style: preserve-3d; will-change: transform; }
.card__media { position: relative; aspect-ratio: 4/5; border-radius: 22px; overflow: hidden; background: var(--ink-3); box-shadow: 0 24px 60px rgba(0,0,0,.45); transition: transform .6s var(--ease); }
.card__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); background: linear-gradient(180deg, transparent 60%, rgba(11,11,12,.35)); pointer-events: none; }
.card__media video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.card:hover .card__media { transform: translateY(-10px); }
.card__meta { display: flex; flex-direction: column; gap: 5px; padding: 16px 4px 0; }
.card__tag { font: 500 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--smoke); }
.card h3 { margin: 0; font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: clamp(19px, 1.6vw, 24px); letter-spacing: -.015em; line-height: 1.05; }
.work__note { margin-top: clamp(28px, 3vw, 44px); }
.work__note p { margin: 0; display: inline-flex; align-items: center; gap: 12px; font: 500 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bone-2); }
.work__note .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); animation: blink 1.2s steps(2) infinite; }
@media (max-width: 860px) { .card { width: 58vw; } }
.reel__caption span { display: inline-block; }
.reel__caption .line { display: block; }
.reel__caption .ch { display: inline-block; }

/* ===== v6: calmer, cleaner ===== */
.grain { opacity: .035; }
.cursor { display: none !important; }

/* channels: bigger face-first cards, names on the card */
.carousel { padding: 10px 0 10px; }
.card { width: clamp(270px, 29vw, 430px); }
.card__media { border-radius: 26px; box-shadow: 0 30px 70px rgba(0,0,0,.4); }
.card__media::after { background: linear-gradient(180deg, transparent 50%, rgba(11,11,12,.85) 100%); }
.card__media video { transition: transform 1.2s var(--ease); }
.card:hover .card__media { transform: none; }
.card:hover .card__media video { transform: scale(1.04); }
.card__meta { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 22px 24px 24px; }
.card__tag { color: rgba(242,239,232,.75); }
.card h3 { font-size: clamp(24px, 2.2vw, 32px); color: var(--bone); }
@media (max-width: 860px) { .card { width: 74vw; } .card__meta { padding: 18px 20px 20px; } }

/* numbers: quiet, on dark */
.numbers { background: var(--ink); color: var(--bone); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.num { border-top: 0; padding-top: 0; }
.num__big small { color: var(--signal); }
.num__label { color: var(--bone-2); font-weight: 400; }

/* process: no pin, just a clean block */
.process__pin { min-height: 0; padding: clamp(90px, 11vw, 160px) 0; }

/* services spacing */
.services { padding-top: clamp(70px, 8vw, 120px); }

/* ===== v7: snapping slider, big stats, businesses ===== */
.work__head { margin-bottom: clamp(32px, 4vw, 52px); }
.slider { list-style: none; margin: 0; padding: 0 var(--pad); display: flex; gap: clamp(14px, 1.6vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.slider::-webkit-scrollbar { display: none; }
.slider::after { content: ""; flex: 0 0 1px; }
.slide { flex: none; width: clamp(280px, 29vw, 430px); scroll-snap-align: start; }
.slide__media { position: relative; aspect-ratio: 4/5; border-radius: 26px; overflow: hidden; background: var(--ink-3); }
.slide__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); background: linear-gradient(180deg, transparent 52%, rgba(11,11,12,.85)); pointer-events: none; }
.slide__media video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.slide:hover .slide__media video { transform: scale(1.04); }
.slide { position: relative; }
.slide__meta { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 6px; }
.slide__tag { font: 500 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(242,239,232,.75); }
.slide h3 { margin: 0; font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.015em; line-height: 1.05; color: var(--bone); }
.slider__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 32px; margin-top: clamp(24px, 3vw, 36px); }
.slider__note { margin: 0; display: inline-flex; align-items: center; gap: 12px; font: 500 12.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bone-2); }
.slider__note .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); flex: none; }
.slider__ctrl { display: flex; align-items: center; gap: 14px; }
.slider__count { font: 500 13px var(--mono); letter-spacing: .08em; color: var(--bone-2); font-variant-numeric: tabular-nums; }
.slider__count b { color: var(--bone); font-weight: 500; }
.slider__progress { position: relative; width: clamp(80px, 12vw, 180px); height: 2px; background: rgba(242,239,232,.15); border-radius: 2px; overflow: hidden; }
.slider__progress span { position: absolute; inset: 0 auto 0 0; width: 12.5%; background: var(--signal); transition: width .5s var(--ease); }
@media (max-width: 860px) { .slide { width: 78vw; } .slider__progress { display: none; } }

/* big stats */
.stats { padding: clamp(80px, 11vw, 170px) 0; border-top: 1px solid var(--line); }
.stat { display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--line); }
.stat:first-child { padding-top: 0; }
.stat__big { font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: clamp(28px, 10.2vw, 200px); line-height: .9; letter-spacing: -.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat__big em { color: var(--signal); font-style: normal; }
.stat__label { font-size: clamp(16px, 1.4vw, 20px); color: var(--bone-2); max-width: 40ch; }
.stats__small { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px 48px; padding-top: clamp(28px, 3vw, 44px); }
.stats__small div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.stats__small b { font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: clamp(40px, 4.5vw, 72px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stats__small small { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--signal); margin-left: -6px; }
.stats__small span { flex-basis: 100%; color: var(--bone-2); font-size: 16px; }

/* for businesses */
.biz { padding: clamp(80px, 11vw, 170px) 0; background: var(--ink-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.biz__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 64px; margin-bottom: clamp(40px, 5vw, 72px); }
.biz__lead { margin: 0; max-width: 44ch; color: var(--bone-2); font-size: clamp(16px, 1.3vw, 19px); }
.biz__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.biz__card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px 28px 34px; border-radius: 22px; background: var(--ink); border: 1px solid var(--line); overflow: hidden; transition: transform .6s var(--ease), border-color .4s; }
.biz__card::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.biz__card:hover { transform: translateY(-6px); border-color: #3a3a40; }
.biz__card:hover::before { transform: scaleX(1); }
.biz__no { font: 500 13px var(--mono); color: var(--signal); }
.biz__icon { width: 34px; height: 34px; fill: none; stroke: var(--bone); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-top: 12px; }
.biz__card h3 { margin: 6px 0 0; font-family: var(--display); font-stretch: 110%; font-weight: 800; font-size: 23px; letter-spacing: -.01em; }
.biz__card p { margin: 0; color: var(--bone-2); font-size: 15.5px; }
.biz__cta { margin-top: clamp(32px, 4vw, 52px); }

/* ===== v8: richer landing ===== */
.hero { flex-direction: column; align-items: stretch; justify-content: flex-end; padding-bottom: clamp(28px, 5vh, 56px); }
.hero__content { margin: 0; max-width: none; }
.hero__strip { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; margin-top: clamp(40px, 7vh, 80px); padding-top: 22px; border-top: 1px solid rgba(242,239,232,.14); }
.hero__strip div { display: flex; flex-direction: column; gap: 6px; }
.hero__strip b { font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: clamp(24px, 2.4vw, 38px); line-height: 1; letter-spacing: -.02em; }
.hero__strip span { font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bone-2); }

.hero__show { position: absolute; z-index: 2; right: var(--pad); top: 50%; width: clamp(240px, 22vw, 350px); transform: translateY(-58%); display: none; }
.hero__segs { display: flex; gap: 5px; margin-bottom: 12px; }
.hero__segs i { flex: 1; height: 2px; border-radius: 2px; background: rgba(242,239,232,.18); overflow: hidden; }
.hero__segs b { display: block; height: 100%; width: 0; background: var(--bone); }
.hero__segs i.is-done b { width: 100%; }
.hero__screen { position: relative; aspect-ratio: 4/5; border-radius: 26px; overflow: hidden; background: var(--ink-3); box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07); }
.hero__screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1s var(--ease), transform 4.5s linear; }
.hero__screen video.is-on { opacity: 1; transform: scale(1); }
.hero__screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(11,11,12,.6)); pointer-events: none; }
.hero__chip { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: rgba(11,11,12,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(242,239,232,.14); }
.hero__chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); flex: none; animation: blink 1.2s steps(2) infinite; }
.hero__chip-label { font: 500 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-2); flex: none; }
.hero__chip b { font-family: var(--display); font-stretch: 110%; font-weight: 800; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 981px) {
  .hero__show { display: block; }
  .hero__rec { display: none; }
  .hero__title { font-size: clamp(64px, 10.4vw, 190px); }
  .hero__content { max-width: calc(100% - clamp(240px, 22vw, 350px) - 40px); }
}
@media (max-width: 640px) {
  .hero__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .hero__strip span { font-size: 9.5px; letter-spacing: .06em; }
}
/* hero grid: headline left, showcase right, numbers strip underneath */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: clamp(32px, 4vw, 72px); }
.hero__content { grid-column: 1; grid-row: 1; align-self: end; }
.hero__strip { grid-column: 1 / -1; grid-row: 2; }
@media (min-width: 981px) {
  .hero { grid-template-columns: minmax(0, 1fr) auto; }
  .hero__content { max-width: none; }
  .hero__show { position: relative; grid-column: 2; grid-row: 1; align-self: end; top: auto; right: auto; transform: none;
    width: min(22vw, 340px, calc((100svh - 360px) * .78)); min-width: 200px; }
}

/* ===== v9: tasteful motion layer ===== */
/* scroll progress: a playhead along the top of the screen */
.progress { position: fixed; z-index: 85; top: 0; left: 0; right: 0; height: 2px; pointer-events: none; }
.progress span { position: absolute; inset: 0 auto 0 0; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, rgba(255,77,26,.25), var(--signal)); }
.progress i { position: absolute; top: 0; left: 0; width: 2px; height: 10px; background: var(--signal); box-shadow: 0 0 12px rgba(255,77,26,.8); will-change: transform; }
.progress em { position: absolute; top: 12px; left: 6px; font: 500 10px var(--mono); font-style: normal; letter-spacing: .06em; color: var(--signal); white-space: nowrap; opacity: 0; transition: opacity .4s; font-variant-numeric: tabular-nums; }
.progress.is-moving em { opacity: 1; }

/* eyebrow tick draws into a line */
.eyebrow::before { transform-origin: left center; }
.eyebrow.is-drawn::after { transform: scaleX(1); }
.eyebrow::after { content: ""; width: 36px; height: 1px; background: rgba(242,239,232,.25); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .15s; order: 3; }

/* nav: active section marker */
.nav__links a.is-active { color: var(--bone); }
.nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }

/* slides: clip reveal + inner parallax + soft tilt */
.slide__media { will-change: clip-path; }
.slide__media video { transform: scale(1.12); }
.slide { transform-style: preserve-3d; }

/* stats: rule draws under each number */
.stat__rule { display: block; width: 100%; height: 1px; background: linear-gradient(90deg, var(--signal), rgba(255,77,26,0) 70%); transform: scaleX(0); transform-origin: left; margin: 6px 0 4px; }
.stat__big em { display: inline-block; }

/* business icons draw themselves */
.biz__icon * { stroke-dasharray: var(--len, 100); stroke-dashoffset: var(--len, 100); transition: stroke-dashoffset 1.6s var(--ease); }
.biz__card.is-in .biz__icon * { stroke-dashoffset: 0; }
.biz__card.is-in .biz__icon { stroke: var(--signal); transition: stroke 1s .9s; }
.biz__card:hover .biz__icon { stroke: var(--bone); }
.biz__card { --mx: 50%; --my: 0%; }
.biz__card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(400px circle at var(--mx) var(--my), rgba(255,77,26,.10), transparent 60%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.biz__card:hover::after { opacity: 1; }

/* timeline clips build in */
.tl__track i { transform-origin: left; }

@media (prefers-reduced-motion: reduce) {
  .biz__icon * { stroke-dashoffset: 0; }
  .eyebrow::after { transform: scaleX(1); }
}

/* ===== roster page ===== */
.page-roster main { padding-top: 0; }
.nav__cta--back { margin-left: 0; }
.rhero { position: relative; min-height: 78vh; display: flex; align-items: flex-end; padding: 150px 0 clamp(60px, 9vh, 110px); overflow: hidden; }
.rhero__inner { position: relative; z-index: 2; width: 100%; }
.rhero__title { margin: 0 0 26px; max-width: 13ch; font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: clamp(48px, 8.4vw, 150px); line-height: .9; letter-spacing: -.04em; text-transform: uppercase; }
.rhero__lead { margin: 0; max-width: 56ch; font-size: clamp(17px, 1.4vw, 20px); color: var(--bone-2); }
.standards { padding: clamp(80px, 10vw, 150px) 0; border-top: 1px solid var(--line); }
.standards__head { margin-bottom: clamp(36px, 4vw, 60px); }
.standards__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.std { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 20px; padding: clamp(24px, 3vw, 36px) 0; border-bottom: 1px solid var(--line); }
.std__no { font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: clamp(28px, 3vw, 44px); line-height: 1; color: var(--signal); }
.std h3 { margin: 0 0 8px; font-family: var(--display); font-stretch: 110%; font-weight: 800; font-size: clamp(22px, 2vw, 30px); letter-spacing: -.01em; }
.std p { margin: 0; max-width: 62ch; color: var(--bone-2); }
.apply { padding: clamp(80px, 10vw, 150px) 0; background: var(--ink-2); border-top: 1px solid var(--line); }
.apply__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(40px, 6vw, 96px); align-items: start; }
.apply__copy { margin: 22px 0 28px; color: var(--bone-2); max-width: 42ch; }
.apply__note { display: flex; gap: 14px; padding: 20px 22px; border-radius: 18px; border: 1px solid rgba(255,77,26,.35); background: rgba(255,77,26,.06); }
.apply__note p { margin: 0; font-size: 15px; color: var(--bone-2); }
.apply__note strong { color: var(--bone); font-weight: 600; }
.apply__note-icon { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--signal); color: var(--ink); display: grid; place-items: center; font: 700 14px var(--text); }
.field select { width: 100%; background: transparent; border: 0; border-bottom: 1px solid #44444a; color: var(--bone); font: 400 18px var(--text); padding: 10px 0 12px; border-radius: 0; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--bone-2) 50%), linear-gradient(135deg, var(--bone-2) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.field select:focus { outline: none; border-color: var(--signal); }
.field select option { background: var(--ink-2); color: var(--bone); }
.agree { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--bone-2); cursor: pointer; }
.agree input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--signal); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note.is-ok { color: var(--bone); }
.form__note.is-err { color: #ff8a65; }
.footer__roster { color: var(--bone); text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--signal); }
.footer__roster:hover { color: var(--signal); }
.form.is-sent { text-align: left; }
.sent { display: flex; flex-direction: column; gap: 14px; padding: 12px 0; }
.sent b { font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: clamp(36px, 4vw, 54px); line-height: .95; text-transform: uppercase; }
.sent b em { color: var(--signal); font-style: normal; }
.sent p { margin: 0; color: var(--bone-2); }
@media (max-width: 860px) { .nav__cta--back { display: inline-flex; margin-left: auto; } .page-roster .nav__burger { display: none; } .std { grid-template-columns: 56px minmax(0, 1fr); } }
@media (max-width: 860px) { .rhero .orbs { opacity: .45; } }

/* ===== v11: fan hero ===== */
.hero--fan { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding-top: clamp(120px, 17vh, 170px); padding-bottom: clamp(28px, 5vh, 56px); min-height: 100svh; }
.hero--fan .hero__center { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; max-width: 1100px; }
.eyebrow--center { justify-content: center; }
.hero--fan .hero__title { font-size: clamp(54px, 9.2vw, 168px); margin-bottom: 22px; }
.hero--fan .hero__sub { margin: 0 auto 30px; max-width: 46ch; }
.hero--fan .hero__ctas { justify-content: center; }
.fan { position: relative; z-index: 2; width: 100%; height: clamp(260px, 30vw, 420px); margin-top: clamp(36px, 6vh, 64px); perspective: 1400px; }
.fan__card { position: absolute; left: 50%; top: 0; width: clamp(150px, 15vw, 236px); margin: 0 0 0 calc(clamp(150px, 15vw, 236px) / -2); aspect-ratio: 4/5; border-radius: 22px; overflow: hidden; background: var(--ink-3); box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); transform-origin: 50% 120%; will-change: transform; cursor: default; }
.fan__card video { width: 100%; height: 100%; object-fit: cover; }
.fan__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11,11,12,.8)); pointer-events: none; }
.fan__card figcaption { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; text-align: left; font-family: var(--display); font-stretch: 110%; font-weight: 800; font-size: clamp(13px, 1.1vw, 17px); letter-spacing: -.01em; color: var(--bone); }
.hero--fan .hero__strip { width: 100%; text-align: left; margin-top: clamp(28px, 5vh, 56px); }
@media (max-width: 860px) {
  .fan { height: 62vw; }
  .fan__card { width: 36vw; margin-left: -18vw; }
  .fan__card[data-i="0"], .fan__card[data-i="4"] { display: none; }
}

/* ===== v11: business, light ===== */
.btn--ink { background: var(--ink); color: var(--bone); }
.btn--ink::after { content: ""; position: absolute; inset: 0; background: var(--signal); transform: translateY(101%); border-radius: inherit; transition: transform .55s var(--ease); z-index: -1; }
.btn--ink:hover::after { transform: translateY(0); }
.btn--ink:hover { color: var(--ink); }
.biz--light { background: var(--bone); color: var(--ink); border: 0; }
.biz--light ::selection { background: var(--ink); color: var(--bone); }
.biz--light .eyebrow { color: #615d56; }
.biz--light .eyebrow::after { background: rgba(11,11,12,.25); }
.biz__top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(36px, 5vw, 80px); align-items: center; margin-bottom: clamp(56px, 7vw, 110px); }
.biz--light .h2 { color: var(--ink); max-width: 16ch; }
.biz--light .biz__lead { margin: 24px 0 32px; color: #45423d; max-width: 46ch; }
.biz--light .biz__cta { margin-top: 0; }
.biz__photo { position: relative; margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 4/3; background: #ddd8cc; box-shadow: 0 30px 70px rgba(11,11,12,.18); }
.biz__photo img { width: 100%; height: 115%; object-fit: cover; will-change: transform; }
.biz__photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(11,11,12,.06); pointer-events: none; }
.biz__group { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); padding: clamp(32px, 4vw, 52px) 0; border-top: 1px solid #cfc9bc; }
.biz__label span { font: 500 13px var(--mono); color: #c2340a; }
.biz__label h3 { margin: 8px 0 8px; font-family: var(--display); font-stretch: 115%; font-weight: 900; font-size: clamp(26px, 2.3vw, 36px); line-height: 1; letter-spacing: -.025em; text-transform: uppercase; color: var(--ink); }
.biz__label p { margin: 0; color: #45423d; font-size: 15.5px; }
.biz--light .biz__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 14px; }
.biz--light .biz__card { background: #fbfaf6; border-color: #ddd8cc; padding: 26px 24px 28px; gap: 10px; box-shadow: 0 1px 0 rgba(11,11,12,.03); }
.biz--light .biz__card:hover { border-color: #c9c2b3; box-shadow: 0 20px 40px rgba(11,11,12,.08); }
.biz--light .biz__card::after { background: radial-gradient(360px circle at var(--mx) var(--my), rgba(255,77,26,.10), transparent 60%); }
.biz--light .biz__icon { stroke: var(--ink); margin-top: 0; }
.biz--light .biz__card.is-in .biz__icon { stroke: #c2340a; }
.biz--light .biz__card:hover .biz__icon { stroke: var(--ink); }
.biz--light .biz__card h4 { margin: 8px 0 0; font-family: var(--display); font-stretch: 110%; font-weight: 800; font-size: 20px; letter-spacing: -.01em; color: var(--ink); }
.biz--light .biz__card p { margin: 0; color: #45423d; font-size: 15px; }
@media (max-width: 860px) { .biz__group { grid-template-columns: 1fr; } }

/* ===== business: animated campaign graphic ===== */
.biz__visual { position: relative; margin: 0; padding: 0; border-radius: 28px; background: var(--ink); color: var(--bone); box-shadow: 0 40px 80px rgba(11,11,12,.22), 0 0 0 1px rgba(11,11,12,.08); overflow: hidden; display: flex; flex-direction: column; }
.viz__bar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.viz__dots { display: flex; gap: 6px; } .viz__dots i { width: 9px; height: 9px; border-radius: 50%; background: #2e2e33; }
.viz__title { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bone-2); }
.viz__live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bone); padding: 5px 10px; border-radius: 999px; background: rgba(255,77,26,.14); border: 1px solid rgba(255,77,26,.35); }
.viz__live em { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); animation: blink 1.2s steps(2) infinite; }
.viz__body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; padding: 18px; }
.viz__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.viz__days span { font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--smoke); text-align: center; }
.viz__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.viz__cell { position: relative; aspect-ratio: 1 / 1.15; border-radius: 9px; background: #151517; border: 1px solid #222226; display: grid; place-items: center; padding: 3px; }
.viz__chip { width: 100%; padding: 5px 2px; border-radius: 6px; font: 600 clamp(8px, .72vw, 11px)/1 var(--text); text-align: center; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.viz__chip--reel { background: var(--signal); color: var(--ink); }
.viz__chip--post { background: #6b3fd4; }
.viz__chip--story { background: #3d57e0; }
.viz__chip--ad { background: #1f8f6c; }
.viz__phone { position: relative; border-radius: 22px; border: 2px solid #2b2b30; background: #0f0f11; padding: 22px 8px 8px; overflow: hidden; max-height: 100%; }
.viz__notch { position: absolute; top: 7px; left: 50%; width: 38%; height: 8px; margin-left: -19%; border-radius: 99px; background: #2b2b30; }
.viz__feed { display: flex; flex-direction: column; gap: 8px; }
.viz__post { position: relative; border-radius: 10px; background: #18181b; overflow: hidden; }
.viz__thumb { position: relative; aspect-ratio: 16 / 10; }
.viz__thumb--a { background: linear-gradient(135deg, #ff4d1a, #ff9a5a 60%, #ffd3b0); }
.viz__thumb--b { background: linear-gradient(135deg, #3d57e0, #6b3fd4 70%, #b07cff); }
.viz__thumb--c { background: linear-gradient(135deg, #1f8f6c, #3fd1a0 70%, #c9f5e4); }
.viz__thumb--d { background: linear-gradient(135deg, #2a1206, #ff4d1a 70%, #ffb38a); }
.viz__play { position: absolute; left: 8px; bottom: 7px; width: 16px; height: 16px; fill: rgba(255,255,255,.9); }
.viz__meta { display: flex; flex-direction: column; gap: 4px; padding: 7px 26px 8px 8px; }
.viz__meta i { height: 4px; border-radius: 3px; background: #2e2e33; } .viz__meta i:last-child { width: 60%; }
.viz__heart { position: absolute; right: 7px; bottom: 7px; width: 14px; height: 14px; fill: none; stroke: #6a6a72; stroke-width: 2; }
.viz__heart.is-liked { fill: var(--signal); stroke: var(--signal); }
.viz__ad { display: flex; align-items: center; gap: 16px; margin: 0 18px 18px; padding: 12px 16px; border-radius: 14px; background: #141416; border: 1px solid var(--line); }
.viz__ad-txt { display: flex; flex-direction: column; gap: 3px; flex: none; font-size: 13px; color: var(--bone); }
.viz__tag { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #3fd1a0; }
.viz__spark { flex: 1; height: 40px; min-width: 0; }
.viz__line { fill: none; stroke: var(--signal); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.viz__area { fill: rgba(255,77,26,.14); }
@media (max-width: 520px) {
  .viz__body { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 10px; padding: 12px; }
  .viz__days span { font-size: 8px; } .viz__grid, .viz__days { gap: 3px; } .viz__cell { border-radius: 6px; padding: 2px; }
  .viz__chip { font-size: 7px; padding: 3px 1px; border-radius: 4px; }
  .viz__ad { margin: 0 12px 12px; } .viz__title { display: none; }
}
.viz__cal { display: flex; flex-direction: column; gap: 12px; }
.viz__days { margin-bottom: -4px; }
.viz__cal .viz__ad { margin: 4px 0 0; flex: 1; align-items: center; }
.viz__plats { display: flex; flex-wrap: wrap; gap: 6px; }
.viz__plats span { font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bone-2); padding: 6px 10px; border-radius: 999px; border: 1px solid #2e2e33; }
.viz__thumb { aspect-ratio: 16 / 9; }
@media (max-width: 520px) { .viz__cal { gap: 8px; } .viz__ad { padding: 8px 10px; gap: 8px; } .viz__ad-txt { font-size: 10px; } .viz__plats span { font-size: 8px; padding: 4px 6px; } .viz__spark { height: 28px; } }
.viz__cal .viz__ad { flex-direction: column; align-items: stretch; justify-content: space-between; gap: 10px; padding: 14px 16px 12px;
  background: linear-gradient(#141416, #141416) padding-box, repeating-linear-gradient(180deg, transparent 0 23px, rgba(242,239,232,.05) 23px 24px); }
.viz__cal .viz__ad { background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(242,239,232,.045) 27px 28px); background-color: #141416; }
.viz__cal .viz__spark { flex: 1; height: auto; min-height: 56px; width: 100%; }

/* ---------- performance (Safari) ---------- */
.grain { display: none !important; animation: none; }
.nav.is-scrolled { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(11,11,12,.94); }
.orbs { image-rendering: auto; }