/* SP7 Studios design tokens v1.1. Generated by build.mjs; edit values there. */
:root {
  --sp7-night: #0B0D16;
  --sp7-deep: #12151F;
  --sp7-surface: #1A1E2B;
  --sp7-line: #262B3B;
  --sp7-mist: #9AA0C3;
  --sp7-dim: #5C6285;
  --sp7-white: #F2F4F7;
  --sp7-blue: #1A7CFF;
  --sp7-blue-deep: #1766E6;
  --sp7-blue-soft: #6FA8FF;
  --sp7-violet: #7A3CFF;
  --sp7-paper: #F5F6FA;
  --sp7-ink: #12151F;
  --sp7-slate: #5A607A;
  --sp7-spectrum: linear-gradient(100deg, #1A7CFF, #7A3CFF);      /* gradient words, glows, lines */
  --sp7-spectrum-btn: linear-gradient(100deg, #1766E6, #7A3CFF); /* behind white text */
  --sp7-glow-blue: radial-gradient(circle, rgba(26,124,255,.45), transparent 70%);
  --sp7-glow-violet: radial-gradient(circle, rgba(122,60,255,.36), transparent 70%);
  --sp7-dots: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 28px 28px;

  --sp7-bg: var(--sp7-night);
  --sp7-text: var(--sp7-white);
  --sp7-text-muted: var(--sp7-mist);

  --sp7-font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --sp7-font-body: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --sp7-font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
  --sp7-font-logo: "Jost", "Futura", sans-serif; /* only if you must set the name as live text; use the logo file where you can */
  --sp7-type-display: 800 6rem/0.98 var(--sp7-font-display);
  --sp7-track-display: -0.03em;
  --sp7-type-h1: 800 4rem/1.02 var(--sp7-font-display);
  --sp7-track-h1: -0.03em;
  --sp7-type-h2: 800 2.75rem/1.08 var(--sp7-font-display);
  --sp7-track-h2: -0.025em;
  --sp7-type-h3: 700 1.5rem/1.25 var(--sp7-font-display);
  --sp7-track-h3: -0.01em;
  --sp7-type-lead: 400 1.25rem/1.6 var(--sp7-font-body);
  --sp7-track-lead: 0;
  --sp7-type-body: 400 1rem/1.65 var(--sp7-font-body);
  --sp7-track-body: 0;
  --sp7-type-small: 400 0.875rem/1.5 var(--sp7-font-body);
  --sp7-track-small: 0;
  --sp7-type-label: 500 0.75rem/1.3 var(--sp7-font-mono);
  --sp7-track-label: 0.14em;
  --sp7-space-0: 0px;
  --sp7-space-1: 4px;
  --sp7-space-2: 8px;
  --sp7-space-3: 12px;
  --sp7-space-4: 16px;
  --sp7-space-5: 24px;
  --sp7-space-6: 32px;
  --sp7-space-7: 48px;
  --sp7-space-8: 64px;
  --sp7-space-9: 96px;
  --sp7-space-10: 128px;
  --sp7-space-11: 192px;
  --sp7-radius-card: 16px;
  --sp7-radius-media: 20px;
  --sp7-radius-pill: 999px;
  --sp7-border: 1px solid rgba(255,255,255,.08);
  --sp7-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sp7-dur: 480ms;
}
/* The gradient word: wrap one word per headline. */
.sp7-grad { background: var(--sp7-spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Night ground with the two lights and the dot grid. */
.sp7-night { position: relative; background: var(--sp7-night); isolation: isolate; overflow: hidden; }
.sp7-night::before, .sp7-night::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.sp7-night::before { width: 70vmax; height: 70vmax; left: -20vmax; top: -30vmax; background: var(--sp7-glow-blue); }
.sp7-night::after { width: 60vmax; height: 60vmax; right: -25vmax; bottom: -30vmax; background: var(--sp7-glow-violet); }
.sp7-label { font: var(--sp7-type-label); letter-spacing: var(--sp7-track-label); text-transform: uppercase; color: var(--sp7-blue); display: inline-flex; align-items: center; gap: 12px; }
.sp7-label::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.sp7-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: var(--sp7-radius-pill); background: var(--sp7-spectrum-btn); color: #fff; font: 600 15px var(--sp7-font-body); text-decoration: none; box-shadow: 0 8px 30px rgba(26,124,255,.35); }
.sp7-btn.ghost { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.sp7-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: var(--sp7-radius-pill); border: var(--sp7-border); background: rgba(255,255,255,.03); font: 400 12px var(--sp7-font-mono); color: var(--sp7-mist); }
.sp7-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sp7-blue); box-shadow: 0 0 10px var(--sp7-blue); }
.sp7-card { background: rgba(20,23,33,.5); border: var(--sp7-border); border-radius: var(--sp7-radius-card); }

/* SP7 homepage. Brand tokens (sp7-brand/tokens/sp7.css) are prepended at build time. */

/* ── fluid shapes: every .blob breathes. Registered radii so they animate smoothly. ── */
@property --r1 { syntax: "<percentage>"; inherits: false; initial-value: 42%; }
@property --r2 { syntax: "<percentage>"; inherits: false; initial-value: 58%; }
@property --r3 { syntax: "<percentage>"; inherits: false; initial-value: 62%; }
@property --r4 { syntax: "<percentage>"; inherits: false; initial-value: 38%; }
@property --r5 { syntax: "<percentage>"; inherits: false; initial-value: 46%; }
@property --r6 { syntax: "<percentage>"; inherits: false; initial-value: 42%; }
@property --r7 { syntax: "<percentage>"; inherits: false; initial-value: 58%; }
@property --r8 { syntax: "<percentage>"; inherits: false; initial-value: 54%; }
@property --k { syntax: "<number>"; inherits: true; initial-value: 1; }
@keyframes morph {
  0%   { --r1: 42%; --r2: 58%; --r3: 62%; --r4: 38%; --r5: 46%; --r6: 42%; --r7: 58%; --r8: 54%; }
  33%  { --r1: 63%; --r2: 37%; --r3: 41%; --r4: 59%; --r5: 58%; --r6: 61%; --r7: 39%; --r8: 42%; }
  66%  { --r1: 36%; --r2: 64%; --r3: 55%; --r4: 45%; --r5: 38%; --r6: 52%; --r7: 48%; --r8: 62%; }
  100% { --r1: 55%; --r2: 45%; --r3: 33%; --r4: 67%; --r5: 64%; --r6: 36%; --r7: 66%; --r8: 34%; }
}
.blob {
  border-radius: calc(var(--r1) * var(--k)) calc(var(--r2) * var(--k)) calc(var(--r3) * var(--k)) calc(var(--r4) * var(--k)) / calc(var(--r5) * var(--k)) calc(var(--r6) * var(--k)) calc(var(--r7) * var(--k)) calc(var(--r8) * var(--k));
  animation: morph 16s ease-in-out infinite alternate;
}

/* ── type: Inter Tight for display (Montserrat Black read as stretched at headline sizes) ── */
:root { --disp: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif; }

/* ── base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--sp7-night); }
body { margin: 0; background: var(--sp7-night); color: var(--sp7-white); font: 400 1rem/1.65 var(--sp7-font-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
::selection { background: var(--sp7-blue); color: #fff; }
.grad { background: var(--sp7-spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: #fff; color: var(--sp7-night); padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--sp7-blue-soft); outline-offset: 4px; border-radius: 8px; }
main { position: relative; z-index: 1; }
/* small labels: sentence case, same family as the body. No mono, no all-caps (easier to read, less template-y). */
.label, .meta { font: 500 13px/1.4 var(--sp7-font-body); letter-spacing: 0; color: var(--sp7-mist); margin: 0 0 14px; }
.label { color: rgba(242,244,247,.86); }
.lead { font-size: clamp(1.05rem, 1.25vw, 1.25rem); line-height: 1.6; color: rgba(242,244,247,.78); max-width: 34em; }
.h2 { font: 800 clamp(2.4rem, 5vw, 4.6rem)/1.02 var(--disp); letter-spacing: -0.022em; margin: 0; }
.h3 { font: 800 clamp(1.8rem, 3.2vw, 3rem)/1.05 var(--disp); letter-spacing: -0.022em; margin: 0 0 18px; }
.sec-head { padding: 0 6vw; max-width: 1500px; margin: 0 auto 56px; }
.note { color: var(--sp7-mist); max-width: 40em; margin-top: 18px; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > i { display: inline-block; font-style: normal; }
.grad .w > i { background: var(--sp7-spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: 999px; background: var(--sp7-spectrum-btn); color: #fff; font: 600 15px/1 var(--sp7-font-body); text-decoration: none; border: 0; cursor: pointer; box-shadow: 0 12px 40px rgba(26,124,255,.35); transition: box-shadow .4s, background .4s; will-change: transform; }
.btn:hover { box-shadow: 0 18px 54px rgba(122,60,255,.5); }
.btn.ghost { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); backdrop-filter: blur(8px); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.btn.sm { padding: 11px 18px; font-size: 14px; }
.btn .arr, .lnk .arr, .go .arr { width: 16px; height: 16px; transition: transform .35s; }
.btn:hover .arr, .lnk:hover .arr, .fcard:hover .arr { transform: translateX(4px); }
.pi { width: 15px; height: 15px; flex: none; }

/* ── atmosphere: drifting spectrum shapes + grain ── */
.fluid { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fl { position: absolute; width: 52vw; height: 52vw; filter: blur(90px); opacity: .42; will-change: transform; }
.fa { left: -14vw; top: -18vw; background: radial-gradient(circle at 40% 40%, #1A7CFF, transparent 68%); animation-duration: 19s; }
.fb { right: -18vw; top: 30vh; background: radial-gradient(circle at 50% 50%, #7A3CFF, transparent 66%); animation-duration: 23s; opacity: .36; }
.fc { left: 20vw; bottom: -30vw; width: 60vw; height: 60vw; background: radial-gradient(circle at 50% 50%, #3a52ff, transparent 64%); animation-duration: 27s; opacity: .22; }
.grain { position: absolute; inset: -50%; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-4%,3%); } 40% { transform: translate(3%,-5%); } 60% { transform: translate(-6%,-2%); } 80% { transform: translate(5%,4%); } 100% { transform: translate(0,0); } }

/* ── play badge: every playable frame shows one on hover / focus (replaces the old custom cursor) ── */
.pbadge { position: absolute; z-index: 3; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--sp7-spectrum-btn); box-shadow: 0 10px 40px rgba(26,124,255,.45); opacity: 0; transform: scale(.6); transition: opacity .35s, transform .5s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.pbadge .pi { width: 20px; height: 20px; margin-left: 3px; }
.fr:hover .pbadge, .fr:focus-visible .pbadge, .tile:hover .pbadge, .tile:focus-visible .pbadge, .film:hover .pbadge, .film:focus-visible .pbadge { opacity: 1; transform: none; }
/* touch: no hover, so a small badge sits in the corner where it can't cover the caption */
@media (hover: none) { .pbadge { left: auto; top: 10px; right: 10px; margin: 0; width: 34px; height: 34px; opacity: .95; transform: none; } .pbadge .pi { width: 13px; height: 13px; margin-left: 2px; } }

/* ── nav ── */
.nav { position: fixed; z-index: 60; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 28px; padding: 20px 4vw; transition: transform .5s cubic-bezier(.2,.8,.2,1), background .4s, padding .4s; }
.nav.scrolled { background: rgba(11,13,22,.62); backdrop-filter: blur(16px) saturate(1.3); padding-top: 14px; padding-bottom: 14px; }
.nav.hide { transform: translateY(-110%); }
.brand { color: #fff; display: inline-flex; }
.brand .wm { height: 15px; width: auto; }
.links { display: flex; gap: 26px; margin-left: auto; }
.links a { text-decoration: none; font-size: 14px; color: rgba(242,244,247,.75); transition: color .3s; }
.links a:hover { color: #fff; }
.links a[aria-current] { color: #fff; }
.mwork { display: none; text-decoration: none; font-size: 14px; color: rgba(242,244,247,.85); }
.nav .btn { white-space: nowrap; }
@media (max-width: 820px) { .links { display: none; } .mwork { display: inline; margin-left: auto; } .nav { gap: 18px; } .nav .btn.sm { padding: 10px 14px; font-size: 13px; } }
@media (max-width: 360px) { .nav .btn.sm .arr { display: none; } }

/* ── intro ── */
#intro { position: fixed; inset: 0; z-index: 300; background: var(--sp7-night); display: grid; place-items: center; overflow: hidden; }
#intro[hidden] { display: none; }
#intro .intro-glow { position: absolute; inset: -20%; background: radial-gradient(circle at 25% 20%, rgba(26,124,255,.55), transparent 45%), radial-gradient(circle at 80% 85%, rgba(122,60,255,.5), transparent 45%); opacity: 0; }
#intro .draw { position: relative; width: min(74vw, 1000px); height: auto; color: #fff; overflow: visible; }

/* ── hero ── */
.hero { position: relative; }
.hero-stage { position: relative; height: 100vh; min-height: 620px; overflow: hidden; }
.hero-copy { position: absolute; z-index: 3; left: 6vw; bottom: 13vh; width: min(48vw, 760px); }
.hx { font: 900 clamp(3rem, 6.6vw, 7.2rem)/.94 var(--disp); letter-spacing: -0.022em; margin: 0 0 26px; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-blob { position: absolute; z-index: 2; right: 5vw; top: 13vh; width: 42vw; height: 64vh; overflow: hidden; background: #000; box-shadow: 0 40px 120px rgba(26,124,255,.28); transform: translateZ(0); }
.hero-blob::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11,13,22,.7)); opacity: var(--shade, 0); pointer-events: none; }
.hero-vid { width: 100%; height: 100%; object-fit: cover; }
.float { position: absolute; z-index: 1; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.float img { width: 100%; height: 100%; object-fit: cover; }
.float.f0 { width: 11vw; height: 11vw; left: 44vw; top: 11vh; animation-duration: 12s; }
.float.f1 { width: 8vw; height: 9vw; right: 3vw; bottom: 7vh; animation-duration: 10s; }
.float.f2 { width: 7vw; height: 7vw; left: 30vw; top: 6vh; animation-duration: 14s; opacity: .8; }
@media (max-width: 820px) {
  .hero-stage { height: auto; min-height: 0; padding: 110px 6vw 60px; display: flex; flex-direction: column; gap: 34px; }
  .hero-blob { order: 1; } .hero-copy { order: 2; }
  .hero-copy, .hero-blob { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; }
  .hero-blob { height: 56vw; min-height: 240px; }
  .float { display: none; }
}

/* ── clients ── */
.clients { padding: 9vh 0 6vh; }
.label.c { text-align: center; margin-bottom: 26px; }
.rail { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.track { display: flex; align-items: center; gap: 72px; width: max-content; margin: 0; padding: 10px 0; list-style: none; animation: rail 46s linear infinite; }
.track li { flex: none; }
.track img { height: 58px; width: auto; max-width: 190px; object-fit: contain; opacity: .78; transition: opacity .3s; }
.track img:hover { opacity: 1; }
@keyframes rail { to { transform: translateX(-50%); } }

/* ── the sentence ── */
.say { padding: 14vh 6vw; max-width: 1500px; margin: 0 auto; }
.say-p { word-spacing: .04em; font: 800 clamp(2rem, 4.6vw, 4.6rem)/1.12 var(--disp); letter-spacing: -0.022em; margin: 0; }
.pill { display: inline-block; vertical-align: middle; width: 1.9em; height: .95em; margin: -.12em .12em 0; overflow: hidden; background: var(--sp7-surface); box-shadow: 0 8px 30px rgba(26,124,255,.25); animation-duration: 9s; }
.pill video, .pill img { width: 100%; height: 100%; object-fit: cover; }

/* ── featured spot (Big Star Honda) ── */
.feature { padding: 4vh 0 14vh; }
.ft-frame { --k: .2; position: relative; margin: 0 4vw; aspect-ratio: 16/9; max-height: 86vh; overflow: hidden; background: #000; box-shadow: 0 50px 140px rgba(26,124,255,.3); animation-duration: 12s; }
.ft-vid { width: 100%; height: 100%; object-fit: cover; }
.ft-ui { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 26px 3vw; background: linear-gradient(180deg, transparent, rgba(0,0,0,.55)); }
.lang { display: inline-flex; padding: 5px; border-radius: 999px; background: rgba(11,13,22,.6); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.lang button, .snd { padding: 11px 20px; border-radius: 999px; font: 600 14px/1 var(--sp7-font-body); color: rgba(255,255,255,.75); transition: background .35s, color .35s; }
.lang button.on { background: var(--sp7-spectrum-btn); color: #fff; }
.snd { background: rgba(11,13,22,.6); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); color: #fff; }
.snd .snd-on, .snd[aria-pressed="true"] .snd-off { display: none; }
.snd[aria-pressed="true"] .snd-on { display: inline; }
@media (max-width: 700px) { .ft-frame { --k: .12; margin: 0 4vw; } .ft-ui { padding: 14px; } .lang button, .snd { padding: 9px 13px; font-size: 13px; } }

/* ── chapters ── */
.chapters { position: relative; }
.ch-stage { position: relative; }
.ch { position: relative; padding: 12vh 6vw; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 5vw; align-items: center; }
.hch { font: 900 clamp(3rem, 5.8vw, 6.6rem)/.92 var(--disp); letter-spacing: -0.022em; margin: 0 0 24px; }
.ch-body { color: rgba(242,244,247,.78); font-size: 1.12rem; max-width: 26em; margin: 0 0 30px; }
.ch-frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fr { position: relative; display: block; overflow: hidden; border-radius: 22px; aspect-ratio: 16/10; background: var(--sp7-surface); box-shadow: 0 24px 70px rgba(0,0,0,.45); }
.fr img, .fr video, .tile-media img, .tile-media video, .case-media img, .case-media video:not(.case-logo) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1), opacity .5s; }
.lp { opacity: 0; }
.playing .lp { opacity: 1; }
.fr:hover img, .tile:hover .tile-media img { transform: scale(1.06); }
.cap { position: absolute; left: 14px; bottom: 12px; right: 14px; z-index: 2; font: 600 13px/1.3 var(--sp7-font-body); color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.8); }
.cap em { font-style: normal; color: var(--sp7-blue-soft); }
.fr::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.55)); }
.ch-tabs { display: none; }

/* pinned chapter theatre (desktop, motion on) */
.pinned .ch-stage { height: 100vh; overflow: hidden; }
.pinned .ch { position: absolute; inset: 0; padding: 0 6vw; grid-template-columns: minmax(0, 38%) 1fr; }
.pinned .hch { text-shadow: 0 6px 40px rgba(11,13,22,.7); }
.pinned .ch-copy { position: relative; z-index: 3; }
.pinned .ch-frames { position: absolute; inset: 0; display: block; z-index: 1; pointer-events: none; }
.pinned .fr { position: absolute; pointer-events: auto; aspect-ratio: auto; }
.pinned .fr0 { left: 46vw; top: 12vh; width: 27vw; height: 34vh; }
.pinned .fr1 { left: 74vw; top: 9vh; width: 20vw; height: 27vh; }
.pinned .fr2 { left: 51vw; top: 50vh; width: 23vw; height: 30vh; }
.pinned .fr3 { left: 77vw; top: 40vh; width: 17vw; height: 22vh; }
.pinned .fr4 { left: 40vw; top: 70vh; width: 13vw; height: 18vh; }
.pinned .fr5 { left: 76vw; top: 66vh; width: 19vw; height: 24vh; }
.pinned .ch-short-films .fr0 { left: 46vw; top: 10vh; width: 32vw; height: 40vh; }
.pinned .ch-short-films .fr1 { left: 66vw; top: 50vh; width: 28vw; height: 34vh; }
.pinned .ch-short-films .fr2 { left: 79vw; top: 8vh; width: 17vw; height: 36vh; }
.pinned .ch-short-films .fr3 { left: 45vw; top: 58vh; width: 21vw; height: 28vh; }
.pinned .ch-tabs { display: flex; position: absolute; z-index: 5; left: 50%; bottom: 4.5vh; transform: translateX(-50%); gap: 4px; padding: 5px; border-radius: 999px; background: rgba(18,21,31,.7); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.ch-tabs a { position: relative; z-index: 1; padding: 10px 18px; border-radius: 999px; font-size: 13px; text-decoration: none; color: rgba(242,244,247,.7); transition: color .3s, background .4s; }
.ch-tabs a.on { color: #fff; background: var(--sp7-spectrum-btn); }
.ch-tabs a.all { display: inline-flex; align-items: center; gap: 6px; color: #fff; }
.ch-tabs a.all .arr { width: 14px; height: 14px; }
.ch-more { padding: 0 6vw 4vh; margin: 0; }
.pinned ~ .ch-more, .chapters.pinned .ch-more { display: none; }
@media (max-width: 900px) {
  .ch { grid-template-columns: 1fr; padding: 9vh 6vw; }
  .ch-frames { grid-template-columns: repeat(2, 1fr); }
}

/* ── numbers ── */
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin: 10vh 6vw; border-radius: 28px; overflow: hidden; background: rgba(255,255,255,.06); }
.num { padding: 44px 30px; background: rgba(11,13,22,.9); }
.num b { display: block; font: 900 clamp(2.6rem, 5vw, 4.8rem)/1 var(--disp); letter-spacing: -0.022em; background: var(--sp7-spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.num span { display: block; margin-top: 12px; color: var(--sp7-mist); font-size: .95rem; }
@media (max-width: 820px) { .numbers { grid-template-columns: 1fr 1fr; } }

/* ── case studies: cards stack as you scroll ── */
.cases { padding: 10vh 0 0; }
.case { position: sticky; top: calc(10vh + var(--i) * 22px); padding: 0 4vw; margin-bottom: 9vh; }
.case:last-child { margin-bottom: 0; }
.case-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4vw; align-items: center; min-height: 72vh; padding: 3vw; border-radius: 36px; background: linear-gradient(140deg, rgba(26,30,43,.97), rgba(14,16,26,.97)); box-shadow: 0 -20px 80px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.07); transform-origin: 50% 0; overflow: hidden; }
.tone-blue .case-inner { background: radial-gradient(circle at 0% 100%, rgba(26,124,255,.22), transparent 55%), linear-gradient(140deg, #1a1e2b, #0e101a); }
.tone-violet .case-inner { background: radial-gradient(circle at 100% 0%, rgba(122,60,255,.26), transparent 55%), linear-gradient(140deg, #1a1e2b, #0e101a); }
.case-media { position: relative; display: block; width: 100%; aspect-ratio: 16/10; overflow: hidden; border-radius: 26px; background: #000; }
/* the logo lives OUTSIDE the clipped frame so its strokes can sweep past the edges instead of being cut off */
.case-stage { position: relative; }
.case-logo { position: absolute; z-index: 4; left: 50%; top: 50%; width: 112%; max-width: none; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 8px 40px rgba(0,0,0,.65)); }
.has-logo .case-media img { filter: brightness(.42) saturate(.8); }
.has-logo .case-media.playing img, .has-logo .case-media .lp { filter: none; }
.play-dot { position: absolute; z-index: 3; right: 18px; bottom: 18px; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.14); backdrop-filter: blur(10px); transition: background .35s, transform .35s; }
.play-dot .pi { width: 20px; height: 20px; }
.case-media:hover .play-dot { background: var(--sp7-spectrum-btn); transform: scale(1.08); }
.case-copy p { color: rgba(242,244,247,.8); max-width: 34em; }
.strip { display: flex; gap: 10px; margin: 26px 0; }
.strip img { width: 25%; aspect-ratio: 16/10; object-fit: cover; border-radius: 12px; opacity: .9; }
.case-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 24px; }
.lnk { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1 var(--sp7-font-body); text-decoration: none; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.2); transition: border-color .3s; }
.lnk:hover { border-color: var(--sp7-blue-soft); }
@media (max-width: 900px) { .case { position: relative; top: auto; } .case-inner { grid-template-columns: 1fr; min-height: 0; padding: 22px; border-radius: 26px; } }

/* ── Lightbox work ── */
.lbx { padding: 12vh 0 8vh; }
.lbx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 0 6vw; max-width: 1500px; margin: 0 auto; }
.tile { display: block; }
.tile.wide { grid-column: 1 / -1; }
.tile.wide .tile-media { aspect-ratio: 21/9; }
.tile-media { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; border-radius: 26px; background: var(--sp7-surface); transition: border-radius .6s cubic-bezier(.2,.8,.2,1); }
.tile:hover .tile-media { border-radius: 60px 26px 60px 26px; }
.tile-copy { display: grid; gap: 4px; padding: 18px 6px 0; }
.tile-copy .meta { margin: 0; }
.tile-copy b { font: 800 1.5rem/1.15 var(--disp); letter-spacing: -0.02em; }
.tile-copy small { color: var(--sp7-mist); font-size: .9rem; }
@media (max-width: 820px) { .lbx-grid { grid-template-columns: 1fr; } }

/* ── statement ── */
.statement { position: relative; padding: 22vh 6vw; text-align: center; overflow: hidden; }
.st-blob { position: absolute; left: 50%; top: 50%; width: 46vw; height: 46vw; margin: -23vw 0 0 -23vw; background: var(--sp7-spectrum); filter: blur(70px); opacity: .32; animation-duration: 11s; }
.st-p { position: relative; font: 900 clamp(2.4rem, 6vw, 6.4rem)/1.02 var(--disp); letter-spacing: -0.022em; max-width: 15em; margin: 0 auto; }
.who { position: relative; margin-top: 30px; font: 500 14px var(--sp7-font-body); color: var(--sp7-mist); }
.who a { color: rgba(242,244,247,.9); text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }

/* ── process: one line the steps hang from, drawn as you scroll (no boxes, no step numbers) ── */
.process { padding: 8vh 0 2vh; }
.steps { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4vw; padding: 34px 6vw 0; margin: 0 auto; max-width: 1500px; }
.steps-line { position: absolute; left: 6vw; right: 6vw; top: 0; height: 2px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.steps-line i { position: absolute; inset: 0; background: var(--sp7-spectrum); transform-origin: 0 50%; }
.motion .steps-line i { transform: scaleX(0); }
.step { position: relative; }
.node { position: absolute; left: 0; top: -41px; width: 16px; height: 16px; border-radius: 50%; background: var(--sp7-night); box-shadow: inset 0 0 0 2px var(--sp7-blue-soft), 0 0 0 6px var(--sp7-night); }
.step h3 { font: 800 1.45rem/1.15 var(--disp); letter-spacing: -0.015em; margin: 0 0 12px; }
.step p { margin: 0; color: rgba(242,244,247,.74); font-size: .98rem; max-width: 24em; }
@media (max-width: 1000px) {
  .steps { grid-template-columns: 1fr; gap: 44px; padding: 0 6vw 0 calc(6vw + 40px); }
  .steps-line { left: calc(6vw + 7px); right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .steps-line i { transform-origin: 50% 0; }
  .motion .steps-line i { transform: scaleY(0); }
  .node { left: -40px; top: 4px; }
}

/* ── founder ── */
.founder { padding: 9vh 6vw 12vh; max-width: 1500px; margin: 0 auto; }
.fd-top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 6vw; align-items: center; }
.fd-photo { aspect-ratio: 4/5; overflow: hidden; box-shadow: 0 40px 120px rgba(122,60,255,.25); animation-duration: 18s; }
.fd-photo img { width: 100%; height: 115%; object-fit: cover; }
.fd-copy p:not(.label) { color: rgba(242,244,247,.8); font-size: 1.08rem; max-width: 34em; }
.fd-copy .h2 { margin-bottom: 22px; }
.fd-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto auto; gap: 18px; margin-top: 9vh; }
.fd-cards .fcard.book { grid-column: 1; grid-row: 1 / span 2; }
.fd-cards .fcard:not(.book) { grid-column: 2; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); grid-template-rows: none; }
.fd-cards .fcard:not(.book) .fc-img { aspect-ratio: auto; height: 100%; min-height: 190px; }
.fcard.book .fc-img { aspect-ratio: 4/3.4; }
.fcard { display: grid; grid-template-rows: auto 1fr; text-decoration: none; border-radius: 28px; overflow: hidden; background: rgba(26,30,43,.8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); transition: box-shadow .5s; }
.fcard:hover { box-shadow: inset 0 0 0 1px rgba(111,168,255,.4), 0 30px 70px rgba(0,0,0,.4); }
.fc-img { display: block; aspect-ratio: 16/10; overflow: hidden; background: linear-gradient(140deg, #1A7CFF33, #7A3CFF44); }
.fc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.fcard.book .fc-img { display: grid; place-items: center; padding: 18px 0; }
.fcard.book .fc-img img { width: auto; height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.fcard:hover .fc-img img { transform: scale(1.05); }
.fc-copy { display: grid; gap: 6px; align-content: start; padding: 22px 24px 26px; }
.fc-copy .meta { margin: 0; }
.fc-copy b { font: 800 1.35rem/1.2 var(--disp); letter-spacing: -0.02em; }
.fc-copy > span:not(.meta):not(.go) { color: rgba(242,244,247,.74); font-size: .95rem; }
.go { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font: 600 14px var(--sp7-font-body); color: var(--sp7-blue-soft); }
@media (max-width: 900px) { .fd-top, .fd-cards { grid-template-columns: 1fr; } .fd-photo { max-width: 520px; } .fd-cards .fcard.book, .fd-cards .fcard:not(.book) { grid-column: auto; grid-row: auto; grid-template-columns: none; } .fd-cards .fcard:not(.book) .fc-img { aspect-ratio: 16/10; height: auto; min-height: 0; } }

/* ── contact ── */
.contact { position: relative; margin: 6vh 4vw 0; padding: 14vh 6vw; border-radius: 44px; overflow: hidden; background: linear-gradient(150deg, #141a33, #0f1020); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.ct-blob { position: absolute; right: -12vw; top: -14vw; width: 52vw; height: 52vw; background: var(--sp7-spectrum); filter: blur(60px); opacity: .5; animation-duration: 13s; }
.ct-inner { position: relative; max-width: 900px; }
.hct { font: 900 clamp(2.8rem, 7vw, 7.4rem)/.95 var(--disp); letter-spacing: -0.022em; margin: 0 0 24px; }
.ct-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; }
.ct-form label { display: grid; gap: 8px; font-size: 13px; color: var(--sp7-mist); }
.ct-form .wide { grid-column: 1 / -1; }
.ct-form input, .ct-form textarea { font: 400 1rem var(--sp7-font-body); color: #fff; background: rgba(11,13,22,.55); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 15px 16px; resize: vertical; transition: border-color .3s, background .3s; }
.ct-form input:focus, .ct-form textarea:focus { outline: none; border-color: var(--sp7-blue-soft); background: rgba(11,13,22,.8); }
.ct-form .btn { justify-self: start; }
.form-note { grid-column: 1 / -1; margin: 0; color: var(--sp7-mist); min-height: 1.4em; }
.ct-direct { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 30px; }
.ct-direct a { font: 700 1.2rem var(--disp); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); }
@media (max-width: 700px) { .ct-form { grid-template-columns: 1fr; } .contact { border-radius: 28px; } }

/* ── footer ── */
.foot { position: relative; z-index: 1; padding: 10vh 4vw 4vh; }
.foot-draw { color: #fff; }
.foot-draw .draw { width: 100%; height: auto; }
.foot-draw path { stroke-dashoffset: 0; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 30px; font-size: 13px; color: var(--sp7-mist); }
.foot-links { display: flex; gap: 22px; }
.foot-row a { text-decoration: none; }
.foot-row a:hover { color: #fff; }

/* ── work page: the whole library ── */
.wk-head { position: relative; padding: 22vh 6vw 6vh; max-width: 1500px; margin: 0 auto; }
.wk-blob { position: absolute; z-index: -1; right: 5vw; top: 13vh; width: min(30vw, 440px); aspect-ratio: 4/3; overflow: hidden; box-shadow: 0 40px 120px rgba(26,124,255,.28); animation-duration: 14s; }
.wk-blob video { width: 100%; height: 100%; object-fit: cover; }
.wk-head .hw, .wk-head .lead { max-width: 60vw; }
.nf .wk-blob { display: none; }
.hw { font: 900 clamp(3rem, 7vw, 7rem)/.94 var(--disp); letter-spacing: -0.022em; margin: 0 0 22px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.filters button { padding: 11px 18px; border-radius: 999px; font: 600 14px/1 var(--sp7-font-body); color: rgba(242,244,247,.78); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); transition: background .35s, color .35s, box-shadow .35s; }
.filters button small { margin-left: 4px; font-size: 12px; color: rgba(242,244,247,.5); font-weight: 500; }
.filters button:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.filters button.on { background: var(--sp7-spectrum-btn); color: #fff; box-shadow: none; }
.filters button.on small { color: rgba(255,255,255,.8); }
.wk-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 34px 22px; padding: 2vh 6vw 12vh; max-width: 1500px; margin: 0 auto; }
.film { display: block; position: relative; }
.film.big { grid-column: span 2; }
.film[hidden] { display: none; }
.film-media { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; border-radius: 22px; background: var(--sp7-surface); box-shadow: 0 24px 60px rgba(0,0,0,.35); transition: border-radius .6s cubic-bezier(.2,.8,.2,1); }
.film.big .film-media { aspect-ratio: auto; height: calc(100% - 72px); min-height: 260px; }
.film:hover .film-media { border-radius: 48px 22px 48px 22px; }
.film-media img, .film-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1), opacity .5s; }
.film:hover .film-media img { transform: scale(1.05); }
.film-copy { display: grid; gap: 3px; padding: 14px 4px 0; }
.film-copy b { font: 700 1.12rem/1.25 var(--disp); letter-spacing: -0.01em; }
.film-copy span { color: rgba(242,244,247,.72); font-size: 14px; }
.film-copy small { color: var(--sp7-mist); font-size: 13px; }
.wk-cta { text-align: center; padding: 6vh 6vw 4vh; }
.wk-cta .h2 { margin-bottom: 30px; }
.nf .ctas { margin-top: 30px; }
@media (max-width: 1000px) { .wk-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .wk-blob { display: none; } .wk-head .hw, .wk-head .lead { max-width: none; } }
@media (max-width: 640px) {
  .filters { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; margin: 30px -6vw 0; padding: 2px 6vw 6px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .filters::-webkit-scrollbar { display: none; }
  .filters button { flex: none; scroll-snap-align: start; }
}
@media (max-width: 640px) { .wk-head { padding-top: 130px; } .wk-grid { grid-template-columns: 1fr; gap: 28px; } .film.big { grid-column: auto; } .film.big .film-media { height: auto; aspect-ratio: 16/10; min-height: 0; } }

/* ── video player ── */
.player { width: min(92vw, 1280px); max-width: none; padding: 0; border: 0; background: transparent; color: #fff; overflow: visible; }
.player::backdrop { background: rgba(6,7,12,.86); backdrop-filter: blur(18px); }
.pl-frame { position: relative; aspect-ratio: 16/9; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 40px 140px rgba(26,124,255,.3); }
.pl-frame video, .pl-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pl-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
.pl-title { margin: 0 4px; font: 600 15px var(--sp7-font-body); color: rgba(242,244,247,.86); }
.pl-nav { display: flex; gap: 8px; }
.pl-nav[hidden] { display: none; }
.pl-nav button { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.12); transition: background .3s; }
.pl-nav button:hover { background: var(--sp7-spectrum-btn); }
.pl-nav svg { width: 18px; height: 18px; }
.pl-close { position: absolute; right: -6px; top: -54px; width: 42px; height: 42px; border-radius: 50%; font-size: 26px; line-height: 1; background: rgba(255,255,255,.12); }
.pl-close:hover { background: rgba(255,255,255,.24); }
.player[open] { animation: pop .5s cubic-bezier(.2,.8,.2,1); }
@keyframes pop { from { opacity: 0; transform: scale(.94) translateY(20px); } }

/* ── page-to-page: a soft cross-fade instead of a hard cut ── */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }

/* ── tilt: cards lean toward the pointer (set by JS, fine pointers only) ── */
.tilt { transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .5s cubic-bezier(.2,.8,.2,1), border-radius .6s cubic-bezier(.2,.8,.2,1); }

/* ── reveals (only hidden when the motion layer is running) ── */
.motion [data-reveal] { opacity: 0; transform: translateY(40px); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .blob, .grain, .track { animation: none !important; }
  .tilt { transform: none !important; }
  .motion [data-reveal] { opacity: 1; transform: none; }
}