/* ==========================================================================
   RKNKT site (homepage v7)
   Dark, clear, one idea per section. Amber is the only accent (--lime holds it).
   ========================================================================== */

:root {
  --bg: #0f0d09;
  --bg-2: #1b1812;
  --fg: #f3efe6;
  --muted: #97907f;
  --lime: #ffb020;
  --line: color-mix(in srgb, var(--fg) 14%, transparent);
  --page-fg: var(--fg);
  --lime-bright: #ffb020;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 2.8vw, 44px);
  /* Pages run behind the phone's gesture bar (viewport-fit=cover), so bottom text stays above it */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } /* no blue box when tapping on phones */
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
::selection { background: var(--lime); color: var(--bg); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.label { margin: 0 0 28px; color: var(--muted); }
.h2 { margin: 0; font-weight: 700; font-size: clamp(36px, min(5.6vw, 10svh), 96px); line-height: .95; letter-spacing: -0.045em; }
section { position: relative; }

/* ---------- Buttons ---------- */

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 15px; white-space: nowrap; transition: background .3s, color .3s, border-color .3s; }
.btn-lime { background: var(--lime); color: var(--bg); }
.btn-lime:hover { background: var(--fg); }
.btn-ghost { border: 1px solid color-mix(in srgb, var(--fg) 35%, transparent); }
.btn-ghost:hover { border-color: var(--fg); background: var(--fg); color: var(--bg); }
.btn-dark { background: var(--bg); color: var(--fg); }
.btn-dark:hover { background: var(--fg); color: var(--bg); }
.btn-lg { padding: 17px 30px; font-size: 16px; }
.btn-xl { padding: 22px 38px; font-size: 18px; }
/* Calm hover, used by every big button: it only grows a little, keeps its colours and stays in place */
.btn-grow { transition: border-color .3s, scale .3s var(--ease); }
.btn-grow:hover { scale: 1.06; }
.btn-lime.btn-grow:hover { background: var(--lime); }
.btn-ghost.btn-grow:hover { background: transparent; color: inherit; border-color: var(--fg); }
.btn-dark.btn-grow:hover { background: var(--bg); color: var(--fg); }

/* ---------- Header ---------- */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px var(--gutter); transition: background .4s, translate .6s var(--ease), opacity .5s;
}
.site-header.solid { background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.site-header.hide { translate: 0 -100%; }
.logo-m { display: block; aspect-ratio: 1600 / 544; background: currentColor; -webkit-mask: var(--logo-letters) center / 100% 100% no-repeat; mask: var(--logo-letters) center / 100% 100% no-repeat; }
.brand { color: var(--fg); }
.brand .logo-m { height: 22px; }
.nav { display: flex; gap: 30px; font-size: 15px; color: var(--muted); }
.nav a:hover { color: var(--fg); }
/* A thin lime line slides in under the menu word on hover (and stays under the current page) */
.nav a { position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--lime); scale: 0 1; transform-origin: left; transition: scale .35s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { scale: 1 1; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 22px; font-size: 15px; }
.link { color: var(--muted); transition: color .2s; }
.link:hover { color: var(--fg); }
.menu-toggle { display: none; justify-self: end; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); align-items: center; justify-content: center; }
.menu-toggle span, .menu-toggle span::before { display: block; width: 18px; height: 1.5px; background: var(--fg); content: ""; position: relative; transition: transform .4s var(--ease); }
.menu-toggle span { top: -3px; }
.menu-toggle span::before { position: absolute; top: 6px; }
.menu-open .menu-toggle span { transform: translateY(3px) rotate(45deg); }
.menu-open .menu-toggle span::before { transform: translateY(-6px) rotate(-90deg); }

/* ---------- Hero intro ----------
   Steps are classes on <body>, set by home.js:
   intro       white letters and the three words come in
   .reveal     the white fades, the video plays inside the letters
   .dive       the logo grows until only the video is left
   .done       message and header come in, scrolling is unlocked
   Without JS or with reduced motion, the end state shows straight away. */

.hero { position: relative; height: 100vh; height: 100dvh; /* dvh: follows the phone address bar, so the photo always fills the screen */ min-height: 480px; overflow: hidden; background: var(--bg); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: 1.12; transition: scale 2.6s var(--ease); }
/* Photo look for the big photos. Every page uses "tilt" (data-fx="tilt" on <html>); without
   data-fx it's "film". Effects use the accent colour,
   so they follow the colour scheme. .photo-fx sits on the photo and draws the overlays. */
.photo-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.photo-fx::before, .photo-fx::after { content: ""; position: absolute; inset: 0; }
:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } 100% { transform: translate(0, 0); } }
@keyframes roll { from { transform: translateY(-100%); } to { transform: translateY(400%); } }
@keyframes leak { 0%, 100% { opacity: .55; transform: translateX(0); } 50% { opacity: .85; transform: translateX(-6%); } }

/* 1 Film: black and white, accent glow from the top right, moving grain and scanlines */
:root:not([data-fx]) :is(.hero-photo, .brand-hero-img), [data-fx="film"] :is(.hero-photo, .brand-hero-img) { filter: grayscale(1) contrast(1.3) brightness(.78); }
:root:not([data-fx]) .photo-fx::before, [data-fx="film"] .photo-fx::before {
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--lime) 55%, transparent), color-mix(in srgb, var(--lime) 12%, transparent) 45%, transparent 70%),
              linear-gradient(180deg, transparent 40%, rgba(16, 40, 24, .55));
  mix-blend-mode: color; opacity: .9;
}
:root:not([data-fx]) .photo-fx::after, [data-fx="film"] .photo-fx::after {
  inset: -50%; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px), var(--grain);
  opacity: .22; mix-blend-mode: overlay; animation: grain 1.2s steps(4) infinite;
}

/* 2 Duotone: shadows in the background colour, highlights in the accent */
[data-fx="duotone"] :is(.hero-photo, .brand-hero-img) { filter: grayscale(1) contrast(1.2) brightness(.95); }
[data-fx="duotone"] .photo-fx::before { background: var(--lime); mix-blend-mode: multiply; }
[data-fx="duotone"] .photo-fx::after { background: var(--bg); mix-blend-mode: lighten; }

/* 3 Noir: hard black and white with a heavy vignette */
[data-fx="noir"] :is(.hero-photo, .brand-hero-img) { filter: grayscale(1) contrast(1.7) brightness(.72); }
[data-fx="noir"] .photo-fx::before { background: radial-gradient(75% 75% at 55% 45%, transparent 35%, rgba(0, 0, 0, .85)); }
[data-fx="noir"] .photo-fx::after { inset: -50%; background: var(--grain); opacity: .14; mix-blend-mode: overlay; animation: grain 1.2s steps(4) infinite; }

/* 4 Cinema: colour kept, teal shadows and warm highlights, letterbox bars */
[data-fx="cinema"] :is(.hero-photo, .brand-hero-img) { filter: saturate(1.15) contrast(1.15) brightness(.85); }
[data-fx="cinema"] .photo-fx::before { background: linear-gradient(200deg, rgba(255, 150, 60, .55), rgba(0, 110, 130, .7)); mix-blend-mode: soft-light; }
[data-fx="cinema"] .photo-fx::after { background: linear-gradient(#000 0 7%, transparent 7% 93%, #000 93%); opacity: .9; }

/* 5 Halftone: print dots over a black and white photo */
[data-fx="halftone"] :is(.hero-photo, .brand-hero-img) { filter: grayscale(1) contrast(1.4) brightness(.9); }
[data-fx="halftone"] .photo-fx::before { background: radial-gradient(circle, transparent 1.2px, rgba(0, 0, 0, .75) 2.4px) 0 0 / 6px 6px; }
[data-fx="halftone"] .photo-fx::after { background: radial-gradient(110% 80% at 0% 100%, color-mix(in srgb, var(--lime) 40%, transparent), transparent 60%); mix-blend-mode: color; }

/* 6 CRT: old screen, thick scanlines, a slow rolling band, a bit oversaturated */
[data-fx="crt"] :is(.hero-photo, .brand-hero-img) { filter: saturate(1.6) contrast(1.25) brightness(.8) blur(.4px); }
[data-fx="crt"] .photo-fx::before { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .45) 0 2px, transparent 2px 4px), radial-gradient(90% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .7)); }
[data-fx="crt"] .photo-fx::after { bottom: auto; height: 25%; background: linear-gradient(transparent, rgba(255, 255, 255, .07), transparent); animation: roll 6s linear infinite; }

/* 7 Vintage: faded, warm, with a light leak drifting at the edge */
[data-fx="vintage"] :is(.hero-photo, .brand-hero-img) { filter: sepia(.35) saturate(.85) contrast(.92) brightness(.82); }
[data-fx="vintage"] .photo-fx::before { background: linear-gradient(rgba(40, 20, 60, .25), rgba(255, 190, 120, .2)); mix-blend-mode: screen; }
[data-fx="vintage"] .photo-fx::after { inset: 0 -10%; background: radial-gradient(40% 70% at 95% 30%, rgba(255, 110, 40, .55), transparent 70%); mix-blend-mode: screen; animation: leak 7s ease-in-out infinite; }

/* 8 Grid: black and white with a thin accent grid, like a blueprint */
[data-fx="grid"] :is(.hero-photo, .brand-hero-img) { filter: grayscale(1) contrast(1.2) brightness(.7); }
[data-fx="grid"] .photo-fx::before { background: linear-gradient(color-mix(in srgb, var(--lime) 22%, transparent) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, color-mix(in srgb, var(--lime) 22%, transparent) 1px, transparent 1px) 0 0 / 64px 64px; }
[data-fx="grid"] .photo-fx::after { background: radial-gradient(100% 100% at 50% 50%, transparent 40%, rgba(0, 0, 0, .6)); }

/* 9 Tilt shift: sharp in the middle, blurred top and bottom, colours pushed */
[data-fx="tilt"] :is(.hero-photo, .brand-hero-img) { filter: saturate(1.4) contrast(1.1) brightness(.82); }
[data-fx="tilt"] .photo-fx::before { -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); -webkit-mask: linear-gradient(#000, transparent 35% 65%, #000); mask: linear-gradient(#000, transparent 35% 65%, #000); }

/* 10 Tint: the whole photo in the accent colour */
[data-fx="tint"] :is(.hero-photo, .brand-hero-img) { filter: grayscale(1) contrast(1.25) brightness(.8); }
[data-fx="tint"] .photo-fx::before { background: var(--lime); mix-blend-mode: color; opacity: .85; }
[data-fx="tint"] .photo-fx::after { background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .55)); }

/* 11 Xerox: photocopy look, crushed blacks, blown whites, heavy grain */
[data-fx="xerox"] :is(.hero-photo, .brand-hero-img) { filter: grayscale(1) contrast(2.4) brightness(.95); }
[data-fx="xerox"] .photo-fx::before { background: rgba(0, 0, 0, .35); }
[data-fx="xerox"] .photo-fx::after { inset: -50%; background: var(--grain); opacity: .45; mix-blend-mode: overlay; animation: grain .8s steps(3) infinite; }

/* 12 Original: the photo as it is */
[data-fx="none"] .photo-fx { display: none; }

.js .intro:not(.reveal) .photo-fx { opacity: 0; }
.hero-dim { position: absolute; inset: 0; background: rgb(5, 6, 5); opacity: .5; transition: opacity 1.4s var(--ease); }

.mark { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
/* On short, wide windows the height sets the size, so the words below still fit */
.mark-zoom { position: relative; width: min(86vw, 1500px, 130vh); aspect-ratio: 1600 / 544; transform-origin: 44% 26.5%; will-change: transform; }
/* The frame fills everything around the logo, the cut fills the logo box except the letters */
.mark-frame { position: absolute; inset: 1px; box-shadow: 0 0 0 200vmax var(--bg); }
.mark-cut { position: absolute; inset: 0; background: var(--bg); -webkit-mask: var(--logo-knock) center / 100% 100% no-repeat; mask: var(--logo-knock) center / 100% 100% no-repeat; }
.mark-white { position: absolute; inset: 0; background: var(--page-fg); -webkit-mask: var(--logo-letters) center / 100% 100% no-repeat; mask: var(--logo-letters) center / 100% 100% no-repeat; }

.words {
  position: absolute; left: 0; right: 0; top: calc(50% + min(14.6vw, 255px, 22.1vh) + clamp(18px, 3.4vh, 40px));
  margin: 0; text-align: center; font-family: var(--mono); font-size: clamp(12px, 1.15vw, 17px); letter-spacing: .32em; text-transform: uppercase; color: var(--page-fg);
}
.words span { display: inline-block; margin: 0 .6em; }

.hero-after { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(11vh + var(--safe-bottom)); }
.hero-after .mono { color: var(--lime); margin: 0 0 18px; }
.hero-big { margin: 0 0 36px; max-width: 1100px; font-weight: 700; font-size: clamp(40px, 6.2vw, 108px); line-height: .95; letter-spacing: -0.045em; }
.hero-big span { color: color-mix(in srgb, var(--fg) 55%, transparent); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }


.skip { position: absolute; right: var(--gutter); bottom: calc(26px + var(--safe-bottom)); padding: 8px 0; border: 0; background: none; color: color-mix(in srgb, var(--page-fg) 60%, transparent); display: none; }
.skip:hover { color: var(--fg); }

/* The intro itself (only with JS) */
.js .intro { overflow: hidden; }
.js .intro .skip { display: block; animation: fade-in .6s .8s both; }
@keyframes fade-in { from { opacity: 0; } }

.js .intro .mark { display: grid; }
.js .intro .hero-dim { opacity: 0; }
.js .intro .hero-video { scale: 1.12; }
.js .intro .mark-zoom { transform: scale(1); transition: transform 1.4s cubic-bezier(.7, 0, .84, 0); }
.js .intro .mark-white { opacity: 1; transition: opacity .9s cubic-bezier(.45, 0, .2, 1), scale 1.4s var(--ease), filter .8s var(--ease); }
/* The video stays hidden until the white fades, so the letters start clean white */
.js .intro:not(.reveal) .hero-video { opacity: 0; }
.js .intro .words span { opacity: 1; transition: opacity .7s var(--ease), transform .9s var(--ease), letter-spacing 1.2s var(--ease); }

/* Before the first step: a dark screen, the white letters wait */
.js .intro:not(.go) .mark-white { opacity: 0; scale: .96; filter: blur(10px); }
.js .intro:not(.go) .words span { opacity: 0; transform: translateY(14px); }
.js .intro.go .words span:nth-child(1) { transition-delay: .3s; }
.js .intro.go .words span:nth-child(2) { transition-delay: .45s; }
.js .intro.go .words span:nth-child(3) { transition-delay: .6s; }

.js .intro.reveal .mark-white { opacity: 0; }
.js .intro.reveal .words span { opacity: 0; transform: translateY(-10px); transition-delay: 0s; }

.js .intro.dive .mark-zoom { transform: scale(42); }
.js .intro.dive .hero-video { scale: 1.02; }

/* Hidden during the intro, they come in at the end */
.js .intro .hero-after > * { opacity: 0; transform: translateY(30px); }
.js .intro .site-header { opacity: 0; translate: 0 -24px; pointer-events: none; }
.js .hero-after > * { transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.js .hero-after > :nth-child(2) { transition-delay: .12s; }
.js .hero-after > :nth-child(3) { transition-delay: .24s; }
.js .hero-after > :nth-child(4) { transition-delay: .36s; }
.js .site-header { transition: background .4s, translate .9s var(--ease), opacity .8s var(--ease); }
.js body:not(.intro) .mark, .no-js .mark, .no-js .words { display: none; }
.js body:not(.intro) .words { display: none; }

/* On top of photos and video the text stays light, whatever the colour scheme */
.hero, .brand-hero, .px, .photo-top .site-header:not(.solid) { --fg: #f3f1ea; --muted: rgba(243, 241, 234, .72); --lime: var(--lime-bright); }
[data-tone="light"] :is(.hero, .brand-hero, .px, .photo-top .site-header:not(.solid)) .btn-lime { color: #111; }
.hero .chip { background: rgba(11, 12, 11, .55); }
[data-tone="light"] .ed h1 { mix-blend-mode: normal; }

/* ---------- Statement ---------- */

.statement { padding: clamp(120px, 15vw, 220px) var(--gutter); max-width: 1500px; }
.statement-text { margin: 0; font-weight: 600; font-size: clamp(32px, 4.6vw, 76px); line-height: 1.08; letter-spacing: -0.04em; color: color-mix(in srgb, var(--fg) 38%, transparent); }
.statement-text mark {
  color: inherit; background: linear-gradient(var(--lime), var(--lime)) no-repeat 0 100% / 0% 100%;
  padding: 0 .08em; margin: 0 -.04em; border-radius: .08em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 1.1s var(--ease), color .5s;
}
.statement-text mark.on { background-size: 100% 100%; color: var(--bg); }


.accent { color: var(--lime); }
.muted { color: var(--muted); }
.lead { margin: 0; font-size: clamp(22px, 2vw, 30px); line-height: 1.25; letter-spacing: -0.02em; font-weight: 500; }
.text-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; border-bottom: 1px solid var(--line); padding-bottom: 4px; transition: border-color .3s, color .3s, gap .4s var(--ease); }
.text-link::after { content: "\2192"; }
.text-link:hover { color: var(--lime); border-color: var(--lime); gap: 16px; }
.sec { padding: clamp(100px, 12vw, 170px) var(--gutter) 0; }
.sec-top { padding-top: 30px; border-top: 1px solid var(--line); }
.sec-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: clamp(24px, min(5vw, 5svh), 70px); }
.sec-aside { margin: 0; max-width: 340px; color: var(--muted); }
.ico { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* Header: the page you're on */
.nav a[aria-current="page"] { color: var(--fg); }

/* Hero lines come in sharp from a blur (pages without the intro) */
.hl { display: block; }
.js .hl { opacity: 0; filter: blur(14px); transform: translateY(35px) scale(.97); transition: opacity .9s var(--ease), filter .9s var(--ease), transform 1.1s var(--ease); }
.js .loaded .hl { opacity: 1; filter: none; transform: none; }
.js .loaded .hl:nth-child(2) { transition-delay: .08s; }
.js .loaded .hl:nth-child(3) { transition-delay: .16s; }

/* ---------- Home hero (after the intro) ---------- */

.hero-big .accent { color: var(--lime); }
.hero-sub { margin: -14px 0 32px; max-width: 600px; color: color-mix(in srgb, var(--fg) 78%, transparent); font-size: 18px; }
.film-bar { position: absolute; right: var(--gutter); bottom: 26px; display: flex; align-items: center; gap: 8px; }
.film-bar .mono { color: var(--muted); margin-right: 10px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid color-mix(in srgb, var(--fg) 30%, transparent); border-radius: 999px; background: var(--bg); font-size: 14px; font-weight: 600; transition: background .3s, color .3s, border-color .3s; }
.chip:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip svg { width: 14px; height: 14px; fill: currentColor; }
.js .intro .film-bar { opacity: 0; transform: translateY(30px); }
.js .film-bar { transition: opacity 1s .5s var(--ease), transform 1.2s .5s var(--ease); }

/* Corner labels: the three words bottom left, "Agency" bottom right, gone once you scroll */
.hero-tags { position: absolute; left: var(--gutter); bottom: calc(34px + var(--safe-bottom)); margin: 0; color: color-mix(in srgb, var(--fg) 80%, transparent); letter-spacing: .22em; }
.hero-tags span { margin-right: .9em; }
.hero-agency { margin-left: 14px; color: color-mix(in srgb, var(--fg) 55%, transparent); letter-spacing: .22em; }
.hero-corner { transition: opacity .6s var(--ease), transform .8s var(--ease); }
.js .intro .hero-tags { opacity: 0; transform: translateY(30px); }
.js .hero-tags { transition: opacity 1s .5s var(--ease), transform 1.2s .5s var(--ease); }
.js body.scrolled .hero-corner { opacity: 0; transform: translateY(12px); transition-delay: 0s; transition-duration: .5s; }

.film-box { width: min(92vw, 1100px); max-height: 90vh; padding: 0; border: 0; border-radius: 18px; background: #000; color: var(--fg); overflow: hidden; }
.film-box::backdrop { background: rgba(5, 6, 5, .88); }
.film-box video { width: 100%; max-height: 90vh; }
.film-close { position: absolute; top: 14px; right: 14px; z-index: 2; }

/* Not ready yet (PRELAUNCH in home.js): the email popup and buttons that do nothing */
/* overflow hidden: the hidden honeypot field sits far off to the left and would add a scrollbar */
.soon-box { width: min(92vw, 520px); max-height: none; padding: 56px 32px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-2); color: var(--fg); overflow: hidden; }
.soon-box::backdrop { background: rgba(5, 6, 5, .88); }
.soon-box h2 { margin: 0 0 10px; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -0.02em; }
.soon-text { margin: 0 0 24px; color: var(--muted); }
.soon-box .form-status { min-height: 1.5em; margin: 12px 0 0; color: var(--lime); font-size: 14px; font-weight: 600; }
.soon-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--fg); transition: background .3s, color .3s; }
.soon-close:hover { background: var(--fg); color: var(--bg); }
.soon-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.prelaunch-off { pointer-events: none; cursor: default; }
.news-none { margin: 0; padding: 14px 0; border-top: 1px solid var(--line); color: var(--muted); }

/* ---------- Home: find your people ---------- */

.home-statement { margin-top: clamp(28px, 3.5vw, 56px); }
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(60px, 7vw, 100px); }
.path {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 60px; min-height: 340px; padding: 34px;
  border: 1px solid var(--line); border-radius: 20px; background: var(--bg-2); overflow: hidden; transition: color .5s, border-color .5s;
}
.path::before { content: ""; position: absolute; inset: 0; background: var(--lime); clip-path: circle(0% at 100% 100%); transition: clip-path .9s var(--ease); }
.path > * { position: relative; }
.path .mono { margin: 0 0 -40px; color: var(--muted); transition: color .5s; }
/* Test: the photo fills the card behind the text, dark so the text stays readable,
   and zooms in slowly on hover. The lime fill is off on these cards. */
.path { color: #f3f1ea; isolation: isolate; }
.path::before { display: none; }
.path::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .35)); transition: opacity .9s var(--ease); }
.path > .path-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.path:hover > .path-img { transform: scale(1.12); }
.path:hover::after { opacity: .85; }
.path .mono { color: rgba(243, 241, 234, .7); }
.path h3 { margin: 0; font-size: clamp(34px, 3.6vw, 58px); line-height: .98; letter-spacing: -0.04em; font-weight: 700; }
.path .go, .go-link { font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.path .go i, .go-link i { width: 52px; height: 52px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font-style: normal; font-size: 20px; transition: transform .6s var(--ease), background .4s, color .4s, border-color .4s; }
.path:hover { border-color: var(--lime); }
.path:hover::before { clip-path: circle(150% at 100% 100%); }
.path:hover .go i, .go-link:hover i { transform: rotate(-45deg); background: var(--lime-bright); border-color: var(--lime-bright); color: #111; }

/* ---------- Home: Howest ---------- */

/* Howest on Home: just the photo, the title and a link. The full story is on howest.html */
.howest-comp { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(30px, 5vw, 90px); align-items: center; }
.howest-photo { margin: 0; }
.howest-photo img { display: block; width: 100%; aspect-ratio: 16 / 10; max-height: 60vh; object-fit: cover; border-radius: 20px; }
.howest-photo figcaption { margin-top: 10px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; color: var(--muted); }
.howest-title { margin: 26px 0 34px; font-weight: 700; font-size: clamp(40px, min(4.6vw, 8vh), 84px); line-height: .92; letter-spacing: -0.05em; }
.lockup { display: inline-flex; align-items: center; gap: 12px; padding: 6px 16px 6px 20px; border-radius: 999px; background: #fff; color: #111; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.lockup img { height: 42px; width: auto; }
.lockup span:nth-child(2) { font-weight: 400; color: #888; }
/* Same arrow as the Talent and Brands cards, with a line above it */
.go-link { max-width: 420px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--fg); font-size: 18px; }
/* The Howest page */
.howest-intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 60px; margin-top: clamp(30px, 4vw, 50px); }
.howest-intro .lead { max-width: 640px; color: color-mix(in srgb, var(--fg) 85%, transparent); }
.howest-page .sec { padding-top: clamp(70px, 8vw, 120px); }
.howest-page .creed { margin-top: clamp(90px, 10vw, 150px); }
/* Photo frames. Empty: a soft box with a label. With an <img> inside: the photo fills it. */
.howest-gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; padding: clamp(50px, 6vw, 80px) var(--gutter) 0; }
.howest-gallery-3 { grid-template-columns: repeat(3, 1fr); }
.shot { position: relative; margin: 0; min-height: 240px; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; display: grid; place-items: center; background: var(--bg-2); border: 1px dashed color-mix(in srgb, var(--fg) 22%, transparent); }
.shot > .mono { color: var(--muted); }
.shot:has(img) { border: 0; }
.shot:has(img) > .mono { display: none; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot-wide, .shot-tall { aspect-ratio: auto; height: min(62vh, 600px); }
.shot figcaption { position: absolute; left: 16px; bottom: 14px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.course-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.course-facts > div { padding-top: 22px; border-top: 1px solid var(--line); }
.course-facts .mono { color: var(--lime); }
.course-facts p { margin: 12px 0 0; font-size: clamp(18px, 1.4vw, 22px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); }
.split p { margin: 0 0 16px; color: color-mix(in srgb, var(--fg) 78%, transparent); }
.split .lead { color: var(--fg); }
.topics { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; }
.topics li { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: 14px; }
.final-year { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.final-year .mono { margin: 0 0 16px; }
.final-year .h2 { margin-bottom: 26px; }
.final-year p:not(.mono) { margin: 0 0 16px; color: color-mix(in srgb, var(--fg) 78%, transparent); }
.final-year .lead { color: var(--fg) !important; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(50px, 6vw, 90px); }
.pillars > div { padding: 28px 0 0; border-top: 1px solid var(--line); }
.pillars span { font-family: var(--mono); font-size: 13px; color: var(--lime); }
.pillars h3 { margin: 14px 0 8px; font-size: 24px; letter-spacing: -0.02em; }
.pillars p { margin: 0; color: var(--muted); }

/* ---------- Home: stay in the loop ---------- */

.community { margin-top: clamp(100px, 12vw, 170px); padding: clamp(40px, 5vw, 70px) var(--gutter); background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.community-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.discord-card, .socials-card { justify-content: space-between; gap: 28px; }
.join-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.join-or { color: var(--muted); font-size: 14px; }
.mail-box { position: relative; flex: 1; min-width: 220px; }
.mail-box input { width: 100%; padding: 16px 60px 16px 22px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--fg) 30%, transparent); background: var(--bg); color: var(--fg); font: inherit; }
.mail-box input:focus { outline: none; border-color: var(--lime); }
.mail-box button { position: absolute; right: 6px; top: 50%; translate: 0 -50%; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--fg); color: var(--bg); font-size: 18px; cursor: pointer; transition: background .4s, color .4s, rotate .6s var(--ease); }
.mail-box button:hover { background: var(--lime-bright); color: #111; rotate: -45deg; }
.honeypot { position: absolute; left: -9999px; }
.community .form-status { min-height: 1.5em; margin: -14px 0 0; color: var(--lime); font-size: 14px; font-weight: 600; }
.discord-line { margin: 0; font-size: clamp(20px, 1.6vw, 26px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--fg) !important; }
.loop-card { display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 38px); border-radius: 22px; background: var(--bg); border: 1px solid var(--line); }
/* Social buttons: round icons that fill with the accent on hover */
.social-row { display: flex; flex-wrap: wrap; gap: 10px; }
.social-btn { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); color: var(--fg); transition: background .4s var(--ease), color .4s, border-color .4s, transform .6s var(--ease); }
.social-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.social-btn svg .fill, .social-btn svg.brand { fill: currentColor; stroke: none; }
.social-btn:hover, .social-btn:focus-visible { background: var(--lime-bright); border-color: var(--lime-bright); color: #111; transform: translateY(-3px) rotate(-6deg); }
.community .mono { color: var(--lime); margin: 0 0 18px; }
.community p { color: color-mix(in srgb, var(--fg) 78%, transparent); }

/* ---------- Page heroes (Creators, Brands) ---------- */

.page-hero { padding: 130px var(--gutter) 0; }

/* On a computer the whole hero (title, photo, intro line and button) fits in one screen:
   the title scales with the window height too, and the photo takes the height that's left. */
.ed { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; }
.ed h1 { position: relative; z-index: 2; margin: 0 -14vw 0 0; font-weight: 800; font-size: clamp(56px, min(12.5vw, 15svh), 230px); line-height: .98; letter-spacing: -0.06em; mix-blend-mode: difference; }
.ed figure { margin: 0; }
.ed img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; }
@media (min-width: 961px) {
  .page-hero { display: flex; flex-direction: column; height: 100dvh; min-height: 520px; padding: clamp(80px, 13svh, 130px) var(--gutter) calc(clamp(20px, 4svh, 48px) + var(--safe-bottom)); }
  .page-hero .ed { flex: 1 1 0; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .page-hero .ed figure { height: 100%; min-height: 0; }
  .page-hero .ed img { height: 100%; aspect-ratio: auto; object-position: 50% 35%; }
  .page-hero .ed-bottom { margin-top: clamp(18px, 4svh, 70px); }
}
.ed figcaption { margin-top: 12px; text-align: right; font-family: var(--mono); font-size: 12px; text-transform: uppercase; color: var(--muted); }
.ed-bottom { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: end; margin-top: clamp(40px, 5vw, 70px); }
.ed-bottom p { margin: 0; }
.ed-bottom .soft { color: color-mix(in srgb, var(--fg) 70%, transparent); }
.reassure { margin: 12px 0 0 !important; font-size: 14px; color: var(--muted); }

/* ---------- Creators: roadmap ---------- */

/* The five steps fit in one screen: pick a step on the left and it opens on the right.
   Until you pick one, it moves on by itself while it's on screen. */
.roadmap { display: grid; grid-template-columns: 300px 1fr; gap: clamp(30px, 6vw, 110px); align-items: center; }
.road-map .mono { color: var(--muted); margin: 0; }
.road-map nav { display: grid; gap: 4px; }
.road-map nav button { display: flex; align-items: center; gap: 14px; padding: 9px 0; border: 0; background: none; font: inherit; text-align: left; color: var(--muted); cursor: pointer; transition: color .3s; }
.road-map nav button:hover, .road-map nav button[aria-current] { color: var(--fg); }
.node { flex: none; width: 10px; height: 10px; border: 1px solid var(--muted); border-radius: 2px; rotate: 45deg; transition: background .4s, border-color .4s, scale .4s var(--ease); }
.node.on { background: var(--lime); border-color: var(--lime); }
.road-map nav button[aria-current] .node { scale: 1.4; }
.step-n { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.road-map nav button[aria-current] .step-n { color: var(--lime); }
/* All steps sit on top of each other, so the block keeps the height of the longest one and nothing jumps */
.stages { display: grid; }
.stage { grid-area: 1 / 1; align-self: start; padding: clamp(18px, 3svh, 30px) 0 0; border-top: 1px solid var(--line); opacity: 0; visibility: hidden; translate: 0 16px; transition: opacity .5s var(--ease), translate .6s var(--ease), visibility 0s .5s; }
.stage.on { opacity: 1; visibility: visible; translate: none; transition: opacity .6s var(--ease), translate .7s var(--ease), visibility 0s; }
.no-js .stage { position: static; opacity: 1; visibility: visible; translate: none; }
.stage .ico { width: 34px; height: 34px; color: var(--lime); }
.stage .mono { color: var(--lime); margin: 0 0 14px; }
.stage h2 { margin: 0 0 22px; max-width: 760px; font-weight: 700; font-size: clamp(36px, min(5vw, 10svh), 84px); line-height: .95; letter-spacing: -0.045em; }
.stage-body { max-width: 560px; margin: 0 0 clamp(16px, 3svh, 30px); font-size: clamp(16px, 2.6svh, 19px); color: color-mix(in srgb, var(--fg) 80%, transparent); }

/* ---------- Creators: dashboard preview ---------- */

/* On a computer the heading sits above the scene list on the right, so the dashboard gets the full height
   on the left and the whole tour fits in one screen (home.js scales the dashboard down when needed). */
.dash-wrap { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 420px); grid-template-rows: auto 1fr; column-gap: clamp(24px, 4vw, 60px); align-items: start; }
.dash-wrap .sec-top { grid-column: 2; grid-row: 1; margin-bottom: clamp(16px, 3svh, 28px); }
.dash-wrap .sec-top .h2 { font-size: clamp(34px, min(3.4vw, 8svh), 60px); }
.dash-wrap .sec-aside { max-width: none; }
.dash-stage { grid-column: 1; grid-row: 1 / 3; justify-self: center; }
.ad-scenes { grid-column: 2; grid-row: 2; }
@media (min-width: 961px) and (max-height: 900px) {
  .dash-wrap .ad-scenes button { padding: 12px 16px 14px; }
  .dash-wrap .ad-scenes button:not(.on) p { display: none; }
}
@media (min-width: 961px) and (max-height: 760px) {
  .dash-wrap .ad-scenes { gap: 6px; }
  .dash-wrap .ad-scenes button { padding: 9px 14px 10px; border-radius: 12px; }
  .dash-wrap .ad-scenes b { font-size: 16px; margin: 0; }
  .dash-wrap .ad-scenes button.on p { margin-top: 2px; font-size: 13px; }
  .dash-wrap .sec-top { padding-top: 18px; margin-bottom: 14px; }
  .dash-wrap .sec-aside { font-size: 14px; }
}
@media (min-width: 961px) and (max-height: 600px) {
  .dash-wrap .sec-aside { display: none; }
}
.dash { border-radius: 22px; border: 1px solid var(--line); background: #f6f5f0; color: #16181a; overflow: hidden; box-shadow: 0 50px 120px rgba(0, 0, 0, .5); font-size: 14px; }
.dash-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #e9e8e2; border-bottom: 1px solid #dddcd5; }
.dash-bar i { width: 11px; height: 11px; border-radius: 50%; background: #cfcec7; }
.dash-bar span { margin-left: 14px; padding: 4px 14px; border-radius: 999px; background: #fff; font-family: var(--mono); font-size: 11px; color: #777; }
.dash-body { display: grid; grid-template-columns: 190px 1fr; min-height: 560px; }
.dash-side { padding: 22px 14px; background: #fff; border-right: 1px solid #e6e5df; display: flex; flex-direction: column; gap: 3px; }
.dash-side b { font-size: 17px; letter-spacing: -0.03em; margin: 0 10px 22px; }
.dash-side span { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border-radius: 10px; color: #555; }
.dash-side span.on { background: #16181a; color: #fff; }
.dash-side em { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--lime); color: #16181a; }
.dash-main { padding: 26px; display: grid; gap: 14px; align-content: start; }
.dash-top { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.dash-hi { margin: 0; color: #777; }
.dash-name { margin: 0 0 6px; font-size: 34px; font-weight: 800; letter-spacing: -0.04em; }
.dash-sub { margin: 0; color: #777; font-size: 13px; }
.passport { position: relative; padding: 18px; border-radius: 16px; background: #16181a; color: #fff; overflow: hidden; }
.passport .mono { color: var(--lime); font-size: 11px; margin: 0 0 8px; }
.passport p { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .7); }
.passport-who { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.passport-who i { flex: none; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--lime), #6fd3b0); }
.passport-who b { font-size: 14px; }
.passport-who small { display: block; color: rgba(255, 255, 255, .6); font-size: 11px; }
.verified { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--lime); color: #16181a; font-size: 11px; font-weight: 700; }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.card { padding: 16px; border-radius: 16px; background: #fff; border: 1px solid #e6e5df; }
.card h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; }
.pill { padding: 1px 8px; border-radius: 999px; background: #16181a; color: #fff; font-size: 11px; }
.card b { display: block; }
.small-muted { color: #888; font-size: 12px; }
.offer-meta { display: flex; gap: 10px; align-items: center; margin: 8px 0 12px; font-size: 12px; color: #777; }
.pay { padding: 2px 8px; border-radius: 6px; background: #eef9d0; color: #3e5200; font-weight: 700; }
.mini-btns { display: flex; gap: 6px; }
.mini-btns span { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid #ddd; }
.mini-btns span:first-child { background: #16181a; color: #fff; border-color: #16181a; }
.thread { display: flex; gap: 10px; align-items: center; padding: 7px 0; }
.thread + .thread { border-top: 1px solid #f0efe9; }
.av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; }
.av-team { background: var(--lime); color: #16181a; }
.av-blue { background: #4f7cff; }
.av-orange { background: #ff8a3d; }
.thread b { font-size: 13px; }
.thread .small-muted { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
.typing { display: inline-flex; gap: 3px; padding: 4px 0; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: #aaa; animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.bar { height: 6px; margin: 10px 0 6px; border-radius: 999px; background: #efeee8; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: #16181a; transform-origin: left; }
.w-66 { width: 66%; }
.trip { display: flex; align-items: center; gap: 12px; }
.trip-date { flex: none; padding: 6px 9px; border-radius: 10px; background: #f3f2ec; font-weight: 700; font-size: 12px; text-align: center; line-height: 1.2; }
.ok { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: #e3f6e8; color: #1d7a3a; font-size: 11px; font-weight: 700; }

/* ---------- Creators: the dashboard tour (a short looping ad, home.js plays it) ---------- */

.dash { position: relative; }
.dash-main { position: relative; padding-bottom: 86px; }
.dash-grid .card { min-height: 196px; transition: box-shadow .5s var(--ease), translate .5s var(--ease), opacity .7s var(--ease); }
.card.focus { box-shadow: 0 0 0 2px var(--lime), 0 18px 40px rgba(0, 0, 0, .12); translate: 0 -3px; }
.av-me { background: #16181a; }

/* Progress per scene, like story bars */
.ad-segs { display: flex; gap: 4px; padding: 0 16px 10px; background: #e9e8e2; }
.ad-segs i { flex: 1; height: 3px; border-radius: 3px; background: #d0cfc8; overflow: hidden; }
.ad-segs b { display: block; height: 100%; background: #16181a; transform-origin: left; transform: scaleX(var(--p, 0)); }

/* Cursor and click ripple */
.ad-cursor { position: absolute; left: 0; top: 0; z-index: 6; width: 26px; height: 26px; pointer-events: none; opacity: 0; transition: transform 1s cubic-bezier(.65, 0, .35, 1), opacity .4s; }
.ad-cursor svg { width: 100%; height: 100%; fill: #16181a; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); }
.ad-cursor.on { opacity: 1; }
.ad-cursor::after { content: ""; position: absolute; left: -9px; top: -9px; width: 24px; height: 24px; border-radius: 50%; background: var(--lime); opacity: 0; scale: .2; }
.ad-cursor.click::after { animation: tap .6s var(--ease); }
.ad-cursor.click svg { scale: .85; }
@keyframes tap { 0% { opacity: .9; scale: .2; } 100% { opacity: 0; scale: 2.2; } }

/* Caption, like an ad title */
.ad-caption { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; z-index: 7; pointer-events: none; }
.ad-caption span { display: block; padding: 13px 24px; border-radius: 999px; background: #16181a; color: #fff; font-weight: 700; font-size: clamp(15px, 1.4vw, 19px); letter-spacing: -0.01em; white-space: nowrap; box-shadow: 0 16px 40px rgba(0, 0, 0, .3); }
.ad-caption span:empty { display: none; }
.ad-caption span.swap { animation: cap .6s var(--ease); }
@keyframes cap { from { opacity: 0; transform: translateY(14px) scale(.96); } }

/* Toast */
.ad-toast { position: absolute; bottom: 84px; right: 22px; z-index: 5; max-width: 300px; padding: 12px 16px; border-radius: 14px; background: #16181a; color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 16px 40px rgba(0, 0, 0, .3); opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .6s var(--ease); pointer-events: none; }
.ad-toast b { color: var(--lime); }
.ad-toast.show { opacity: 1; transform: none; }

/* Welcome caret */
.caret { display: inline-block; width: 2px; height: .9em; margin-left: 2px; vertical-align: -.08em; background: currentColor; opacity: 0; }
.typing-now .caret { opacity: 1; animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* Offer */
.empty { margin: 0; color: #999; font-size: 13px; }
.offer, .collab, [data-msg-new], [data-msg-typing], [data-msg-reply] { transition: opacity .5s var(--ease), max-height .6s var(--ease), margin .6s var(--ease); max-height: 160px; overflow: hidden; }
.is-off { opacity: 0; max-height: 0 !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-top: 0 !important; }
.collab + .collab { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0efe9; }
[data-accept] { transition: background .3s, color .3s; }
[data-accept].done { background: var(--lime) !important; color: #16181a !important; border-color: var(--lime) !important; }
[data-collab-bar] { width: 0; transition: width 1.2s var(--ease); }
.pill { transition: scale .4s var(--ease); }
.pill.bump { animation: bump .5s var(--ease); }
@keyframes bump { 50% { scale: 1.35; } }
.dash-side em { transition: scale .4s var(--ease); }

/* Trip and passport buttons */
.trip-btn { margin-left: auto; padding: 5px 12px; border-radius: 999px; border: 1px solid #ddd; font-size: 12px; font-weight: 600; transition: background .3s, color .3s, border-color .3s; }
.trip-btn.done { background: #e3f6e8; color: #1d7a3a; border-color: #e3f6e8; }
.share { position: absolute; top: 14px; right: 14px; padding: 5px 12px; border-radius: 999px; background: #fff; color: #16181a; font-size: 12px; font-weight: 700; transition: background .3s; }
.share.done { background: var(--lime); }
.passport { transition: box-shadow .5s var(--ease); }
.passport.focus { box-shadow: 0 0 0 2px var(--lime), 0 0 40px color-mix(in srgb, var(--lime) 35%, transparent); }

/* The cards build in at the start of each loop */
.dash-welcome, .passport, .dash-grid .card { transition-property: opacity, transform, box-shadow, translate; transition-duration: .7s; transition-timing-function: var(--ease); }
.dash.pre .dash-welcome, .dash.pre .passport, .dash.pre .dash-grid .card { opacity: 0; transform: translateY(18px); }
.dash.pre .passport { transition-delay: .1s; }
.dash .dash-grid .card:nth-child(2) { transition-delay: .08s; }
.dash .dash-grid .card:nth-child(3) { transition-delay: .16s; }
.dash .dash-grid .card:nth-child(4) { transition-delay: .24s; }
.dash.ff, .dash.ff * { transition: none !important; animation: none !important; }

/* Controls and scene list */
.ad-controls { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.ad-controls .mono { color: var(--muted); }
.ad-scenes { display: grid; gap: 8px; counter-reset: scene; }
.ad-scenes button { position: relative; display: block; width: 100%; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 16px; background: none; text-align: left; overflow: hidden; transition: border-color .4s, background .4s; }
.ad-scenes button:hover { border-color: color-mix(in srgb, var(--fg) 35%, transparent); }
.ad-scenes b { display: block; font-size: 18px; letter-spacing: -0.02em; margin-bottom: 4px; transition: color .4s; }
.ad-scenes p { margin: 0; color: var(--muted); font-size: 14px; }
.ad-scenes i { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--lime); transform-origin: left; transform: scaleX(var(--p, 0)); }
.ad-scenes button.on { border-color: color-mix(in srgb, var(--lime) 50%, transparent); background: var(--bg-2); }
.ad-scenes button.on b { color: var(--lime); }

/* ---------- Creators / Brands: closing ---------- */

.outcome { padding: clamp(100px, 12vw, 170px) var(--gutter); text-align: center; }
.outcome .mono { color: var(--muted); margin: 0 0 24px; }
.outcome h2 { margin: 0 0 clamp(32px, 4vw, 48px); font-weight: 800; font-size: clamp(44px, min(8.5vw, 13svh), 150px); line-height: .98; letter-spacing: -0.055em; }
.outcome p { margin: 0 auto 40px; max-width: 560px; color: color-mix(in srgb, var(--fg) 75%, transparent); font-size: 18px; }
.big-link { display: inline-block; font-weight: 800; font-size: clamp(40px, 7vw, 120px); letter-spacing: -0.05em; line-height: 1; border-bottom: 3px solid var(--lime); transition: color .3s; }
.big-link:hover { color: var(--lime); }

/* Tags under a story */
.facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0; }
.facts li { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }

/* ---------- Brands: full width hero ---------- */

.brand-hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: flex-end; overflow: hidden; }
.brand-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; transform: scale(1.12); transition: transform 2.4s var(--ease); }
.loaded .brand-hero-img { transform: scale(1); }
.brand-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 12, 11, .55) 0%, rgba(11, 12, 11, .15) 35%, rgba(11, 12, 11, .55) 60%, rgba(11, 12, 11, .9) 100%); }
.brand-hero-copy { position: relative; width: 100%; padding: 0 var(--gutter) calc(clamp(50px, 7vh, 90px) + var(--safe-bottom)); }
.brand-hero-copy > .mono { display: flex; justify-content: space-between; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); color: color-mix(in srgb, var(--fg) 75%, transparent); }
.brand-hero h1 { margin: 0; font-weight: 700; font-size: clamp(40px, 6.2vw, 108px); line-height: .95; letter-spacing: -0.045em; }
.brand-hero-row { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: end; margin-top: clamp(30px, 4vw, 54px); }
.brand-hero-row p { margin: 0; }
.brand-hero-row .hero-cta { margin-top: -16px; }
.brand-hero-row .soft { color: color-mix(in srgb, var(--fg) 78%, transparent); }
.brand-hero-cap { position: absolute; top: 100px; right: var(--gutter); margin: 0; color: color-mix(in srgb, var(--fg) 70%, transparent); }

/* ---------- Brands: selected work, three panels (the one you hover opens) ---------- */

.work .sec-row { margin-bottom: clamp(40px, 5vw, 70px); }
.px-row { display: flex; gap: 12px; height: clamp(540px, 78vh, 780px); }
/* On a computer the heading and the panels fit in one screen: once the heading reaches the header,
   the panels take the height that's left (header 88px, 16px margin at the bottom). */
@media (min-width: 961px) {
  .work { --pt: clamp(100px, 12vw, 170px); display: grid; grid-template-rows: auto minmax(0, 1fr); height: calc(var(--pt) + 100svh - 104px); min-height: calc(var(--pt) + 420px); padding-top: var(--pt); }
  .work .px-row { height: auto; max-height: 780px; }
}
@media (min-width: 961px) and (max-height: 820px) {
  .work .px-body { padding: 22px 26px; }
  .work .px-body h3 { font-size: clamp(30px, min(3.4vw, 7svh), 56px); }
  .work .px-line { margin: 6px 0 10px !important; font-size: 16px; }
  .work .px-body p { margin-bottom: 8px; font-size: 14px; line-height: 1.45; }
  .work .px-body .facts { margin: 10px 0 12px; }
}
@media (min-width: 961px) and (max-height: 640px) {
  .work .px-body p:not(.px-line) + p { display: none; }
}
.px { position: relative; flex: 1; min-width: 0; border-radius: 22px; overflow: hidden; background: var(--bg-2); transition: flex 0.9s var(--ease); }
.px.on { flex: 5.2; }
.px img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--ease), filter .9s var(--ease); filter: grayscale(.6) brightness(.7); }
.px.on img { transform: scale(1); filter: none; }
.px::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 12, 11, .92) 0%, rgba(11, 12, 11, .7) 38%, rgba(11, 12, 11, .1) 75%); opacity: 0; transition: opacity .8s var(--ease); pointer-events: none; }
.px.on::after { opacity: 1; }

/* Closed: a slim strip with a number and the title running up */
.px-open { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 24px 22px; border: 0; background: none; color: var(--fg); text-align: left; transition: opacity .4s; }
.px.on .px-open { opacity: 0; pointer-events: none; }
.px-n { font-family: var(--mono); font-size: 13px; color: var(--lime); }
.px-tab { writing-mode: vertical-rl; rotate: 180deg; font-weight: 700; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.03em; white-space: nowrap; }
.px:not(.on):hover img { filter: grayscale(.2) brightness(.85); }

/* Open: the story, with a fixed width so it doesn't reflow while the panel grows */
.px-body { position: absolute; left: 0; bottom: 0; z-index: 1; width: min(560px, 100%); padding: clamp(26px, 3vw, 44px); opacity: 0; transform: translateY(24px); transition: opacity .4s, transform .6s var(--ease); pointer-events: none; }
.px.on .px-body { opacity: 1; transform: none; transition: opacity .7s .35s, transform .9s .35s var(--ease); pointer-events: auto; }
.px-body .mono { margin: 0 0 12px; color: var(--lime); }
.px-body h3 { margin: 0; font-weight: 800; font-size: clamp(38px, 4vw, 68px); line-height: .95; letter-spacing: -0.05em; }
.px-line { margin: 10px 0 20px !important; font-size: 19px; color: var(--fg) !important; }
.px-body p { margin: 0 0 12px; color: color-mix(in srgb, var(--fg) 82%, transparent); }
.px-body .facts { margin: 18px 0 20px; }

/* ---------- Brands: start a conversation ---------- */

.cta-band {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(30px, 5vw, 90px); align-items: end;
  margin: clamp(100px, 12vw, 170px) var(--gutter); padding: clamp(36px, 6vw, 90px); border-radius: 28px; background: var(--lime); color: var(--bg);
}
.cta-band h2 { margin: 0; font-weight: 800; font-size: clamp(50px, 7.4vw, 132px); line-height: .98; letter-spacing: -0.055em; }
.cta-band h2 span { color: color-mix(in srgb, var(--bg) 55%, transparent); }
.cta-side > p { margin: 0 0 14px; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.cta-steps { margin: 0 0 30px; }
.cta-steps li { display: flex; gap: 18px; padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--bg) 25%, transparent); font-size: 18px; font-weight: 500; }
.cta-steps li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--bg) 25%, transparent); }
.cta-steps span { font-family: var(--mono); font-size: 13px; padding-top: 4px; opacity: .6; }
/* The arrow travels from the left of the bar to the right; the lime fills in behind it */
.cta-btn { position: relative; display: flex; align-items: center; width: 100%; min-height: 76px; padding: 12px 30px 12px 84px; border-radius: 999px; background: var(--bg); color: var(--fg); font-weight: 700; font-size: 18px; overflow: hidden; }
.cta-btn::before { content: ""; position: absolute; left: 12px; top: 12px; bottom: 12px; width: 52px; border-radius: 999px; background: var(--fg); transition: width .7s var(--ease); }
.cta-btn span { position: relative; z-index: 1; transition: color .4s .1s; }
.cta-btn i { position: absolute; z-index: 2; left: 12px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--lime); color: var(--bg); font-style: normal; font-size: 22px; transition: left .7s var(--ease), background .4s, color .4s; }
.cta-btn:hover::before { width: calc(100% - 24px); }
.cta-btn:hover i { left: calc(100% - 64px); background: var(--bg); color: var(--lime); }
.cta-btn:hover span { color: var(--bg); }

@media (max-width: 960px) {
  .px-row { flex-direction: column; height: auto; }
  .px, .px.on { flex: none; min-height: 520px; }
  .px img { filter: none; transform: none; }
  .px::after { opacity: 1; background: linear-gradient(180deg, rgba(11, 12, 11, .1) 0%, rgba(11, 12, 11, .92) 55%); }
  .px-open { display: none; }
  .px-body { opacity: 1; transform: none; pointer-events: auto; width: 100%; }
  .cta-band { grid-template-columns: 1fr; }
}

/* ---------- Talent: what we do (six services in one screen) ---------- */

.do-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4svh, 44px) clamp(24px, 3vw, 48px); }
.do-grid article { padding-top: clamp(14px, 2.4svh, 22px); border-top: 1px solid var(--line); transition: border-color .4s; }
.do-grid article:hover { border-color: var(--lime); }
.do-grid .mono { display: block; color: var(--lime); }
.do-grid h3 { margin: clamp(8px, 1.6svh, 14px) 0 8px; font-size: clamp(20px, min(2vw, 3.8svh), 28px); letter-spacing: -0.03em; }
.do-grid p { margin: 0; max-width: 400px; color: color-mix(in srgb, var(--fg) 75%, transparent); font-size: clamp(14px, min(1.15vw, 2.5svh), 17px); }
@media (max-width: 960px) { .do-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .do-grid { grid-template-columns: 1fr; } }

/* ---------- Brands: what we bring ---------- */

.bring { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 60px); }
.bring article { padding-top: 26px; border-top: 1px solid var(--line); transition: border-color .4s; }
.bring article:hover { border-color: var(--lime); }
.bring-n { display: block; font-weight: 800; font-size: clamp(64px, 7vw, 120px); line-height: .9; letter-spacing: -0.05em; color: var(--bg-2); -webkit-text-stroke: 1px color-mix(in srgb, var(--fg) 30%, transparent); transition: color .5s, -webkit-text-stroke-color .5s; }
.bring article:hover .bring-n { color: var(--lime); -webkit-text-stroke-color: var(--lime); }
.bring .mono { margin: 22px 0 8px; color: var(--lime); }
.bring h3 { margin: 0 0 10px; font-size: 28px; letter-spacing: -0.03em; }
.bring article > p:last-child { margin: 0; color: color-mix(in srgb, var(--fg) 75%, transparent); }

/* ---------- Brands: where your brand fits (category and the cultural moment, one line each) ---------- */

.fit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.fit li { padding: 16px 0; border-top: 1px solid var(--line); font-weight: 600; font-size: clamp(17px, 1.4vw, 21px); letter-spacing: -0.02em; transition: border-color .4s, color .4s; }
.fit li:hover { border-top-color: var(--lime); color: var(--lime); }
.fit .mono { display: block; margin-bottom: 6px; color: var(--muted); font-weight: 400; }
@media (max-width: 960px) { .fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fit { grid-template-columns: 1fr; } }

@media (max-width: 960px) {
  .brand-hero-row { grid-template-columns: 1fr; gap: 20px; }
  .brand-hero-cap { display: none; }
  .bring { grid-template-columns: 1fr; }
}

/* ---------- About: title and network in one screen ---------- */

/* On a computer the title, the map and the story card share one screen: the title and map on the left,
   the story card on the right at full height. The map takes whatever height is left under the title. */
.net {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 56px); row-gap: clamp(8px, 2svh, 24px);
  height: 100svh; min-height: 480px; padding: clamp(74px, 11svh, 104px) var(--gutter) clamp(16px, 3svh, 32px);
}
.net-title { grid-column: 1; grid-row: 1; margin: 0; font-weight: 800; font-size: clamp(40px, min(5.6vw, 9svh), 124px); line-height: .98; letter-spacing: -0.06em; }
.net-stage { grid-column: 1; grid-row: 2; min-height: 0; container-type: size; display: grid; place-items: center; }
.net-map { --map: min(100cqw, 100cqh, 700px); position: relative; width: var(--map); height: var(--map); }
.net-map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rims line { stroke: color-mix(in srgb, var(--fg) 12%, transparent); stroke-width: .25; stroke-dasharray: .8 1.2; }
.spoke { stroke: color-mix(in srgb, var(--fg) 22%, transparent); stroke-width: .3; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke .5s, stroke-width .5s, stroke-dashoffset 1.6s var(--ease); }
.net-map.in .spoke { stroke-dashoffset: 0; }
.net-map.in .spoke:nth-of-type(2) { transition-delay: 0s, 0s, .1s; }
.net-map.in .spoke:nth-of-type(3) { transition-delay: 0s, 0s, .2s; }
.net-map.in .spoke:nth-of-type(4) { transition-delay: 0s, 0s, .3s; }
.net-map.in .spoke:nth-of-type(5) { transition-delay: 0s, 0s, .4s; }
.net-map.in .spoke:nth-of-type(6) { transition-delay: 0s, 0s, .5s; }
.spoke.on { stroke: var(--lime); stroke-width: .5; }
.pulse { fill: var(--lime); }
.no-js .spoke { stroke-dashoffset: 0; }

.net-core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: var(--lime); display: grid; place-items: center; }
.net-core .logo-m { width: 68%; color: var(--bg); }
.pt { position: absolute; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--muted); }
.n1 { left: 50%; top: 12%; } .n2 { left: 83%; top: 31%; } .n3 { left: 83%; top: 69%; }
.n4 { left: 50%; top: 88%; } .n5 { left: 17%; top: 69%; } .n6 { left: 17%; top: 31%; }
.pt img { width: clamp(40px, calc(var(--map) * .15), 108px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg); outline: 2px solid color-mix(in srgb, var(--fg) 20%, transparent); outline-offset: 0; filter: grayscale(.7) brightness(.8); transition: filter .5s, outline-color .4s, outline-offset .4s var(--ease), transform .5s var(--ease); }
.pt span { font-family: var(--mono); font-size: clamp(10px, calc(var(--map) * .02), 12px); text-transform: uppercase; white-space: nowrap; transition: color .4s; }
.pt:hover img { transform: scale(1.07); filter: none; }
.pt.on img { filter: none; outline-color: var(--lime); outline-offset: 4px; transform: scale(1.1); }
.pt.on span { color: var(--fg); }
.js .pt { opacity: 0; scale: .6; transition: opacity .6s var(--ease), scale .8s var(--ease); }
.js .net-map.in .pt { opacity: 1; scale: 1; }
.js .net-map.in .n2 { transition-delay: .08s; } .js .net-map.in .n3 { transition-delay: .16s; } .js .net-map.in .n4 { transition-delay: .24s; }
.js .net-map.in .n5 { transition-delay: .32s; } .js .net-map.in .n6 { transition-delay: .4s; }

.net-panel { grid-column: 2; grid-row: 1 / 3; align-self: center; display: flex; flex-direction: column; max-height: 100%; min-height: 0; border-radius: 22px; border: 1px solid var(--line); background: var(--bg-2); overflow: hidden; }
.net-panel-head { display: flex; justify-content: space-between; gap: 16px; padding: 14px 22px; border-bottom: 1px solid var(--line); color: var(--muted); }
/* Every story card has the same height. The photo fills the space the text leaves and is cropped around
   its subject (set per story below), so heads and logos stay in view. The text only scrolls inside the card
   as a last resort. */
.net-panel { align-self: stretch; }
.node-story:not([hidden]) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.ns-photo { position: relative; flex: 1 1 0; min-height: 140px; overflow: hidden; background: var(--bg); }
.ns-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.node-story[data-node="frites"] img { object-position: 50% 55%; }
.node-story[data-node="sheep"] .ns-photo { background: #000; }
.node-story[data-node="sheep"] img { object-fit: contain; }
.node-story[data-node="wooloo"] img { object-position: 50% 12%; }
.node-story[data-node="youth"] img { object-position: 50% 4%; }
.node-story[data-node="tribes"] img { object-position: 50% 8%; }
.node-story[data-node="artists"] img { object-position: 50% 32%; }
.node-story .ns-body { flex: 0 0 auto; }
.ns-body { padding: 18px 22px 20px; }
.ns-body > .mono { margin: 0 0 10px; color: var(--lime); }
.ns-body h2 { margin: 0; font-weight: 800; font-size: clamp(28px, 2.6vw, 42px); line-height: .95; letter-spacing: -0.05em; }
.ns-line { margin: 6px 0 10px; font-size: 16px; font-weight: 500; }
.ns-body > p:not(.mono):not(.ns-line) { margin: 0 0 8px; font-size: 15px; line-height: 1.45; color: color-mix(in srgb, var(--fg) 78%, transparent); }
.ns-body .facts { margin: 10px 0 12px; }
.node-story:not([hidden]) { animation: up .6s var(--ease) both; }
.counter { margin: 2px 0 10px; padding: 10px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.counter .mono { color: var(--muted); }
.counter-num { display: block; margin: 4px 0 2px; font-size: clamp(28px, 2.6vw, 42px); font-weight: 800; letter-spacing: -0.04em; color: var(--lime); font-variant-numeric: tabular-nums; }
.counter-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.counter .chip { padding: 6px 12px; font-size: 13px; }
.note { font-size: 12px !important; color: var(--muted) !important; }
.credit { font-size: 12px !important; color: var(--muted) !important; margin-top: 12px !important; }
@keyframes up { from { opacity: 0; transform: translateY(20px); } }

/* ---------- About: founders ---------- */

.crew { padding: clamp(70px, 8vw, 110px) var(--gutter) clamp(90px, 10vw, 150px); }
.crew-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line); margin-bottom: 28px; }
.crew-head .mono { margin: 0; color: var(--muted); order: 2; }
.crew-head h2 { margin: 0; font-weight: 800; font-size: clamp(36px, 4.4vw, 72px); line-height: .95; letter-spacing: -0.05em; }
.crew-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.crew article { display: grid; grid-template-columns: 42% 1fr; gap: 18px; padding: 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-2); transition: border-color .4s; }
.crew article:hover { border-color: color-mix(in srgb, var(--lime) 50%, transparent); }
.crew figure { position: relative; margin: 0; }
.crew img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; border-radius: 14px; filter: grayscale(1); transition: filter .8s var(--ease); }
.crew article:hover img { filter: none; }
.crew figcaption { position: absolute; left: 10px; bottom: 8px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.crew h3 { margin: 4px 0 2px; font-size: 32px; letter-spacing: -0.04em; }
.crew .mono { margin: 0 0 10px; color: var(--lime); }
.crew article p:last-child { margin: 0; font-size: 14px; color: color-mix(in srgb, var(--fg) 75%, transparent); }

/* ---------- About: what holds us together ---------- */

.creed { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 70px); align-items: end; margin: clamp(70px, 8vw, 110px) var(--gutter); padding: clamp(32px, 4.5vw, 64px); border-radius: 28px; background: var(--lime); color: var(--bg); }
.creed h2 { margin: 0; font-weight: 800; font-size: clamp(50px, 7vw, 124px); line-height: .98; letter-spacing: -0.055em; }
.creed h2 span { color: color-mix(in srgb, var(--bg) 55%, transparent); }
.creed .mono { margin: 0 0 12px; opacity: .6; }
.creed p:not(.mono) { margin: 0 0 24px; font-size: 18px; font-weight: 500; }

@media (max-width: 1100px) {
  .crew-row { grid-template-columns: 1fr; }
  .crew img { min-height: 0; aspect-ratio: 1; }
}
@media (max-width: 960px) {
  .net, .creed { grid-template-columns: 1fr; }
  .net { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: clamp(24px, 5vw, 40px); height: auto; min-height: 0; padding: 110px var(--gutter) 0; }
  .net-title { font-size: clamp(48px, 11vw, 96px); }
  .net-stage, .net-panel { grid-column: 1; grid-row: auto; }
  .net-stage { container-type: inline-size; }
  .net-map { --map: min(100cqw, 520px); }
  .net-panel { max-height: none; }
  .ns-photo { flex: none; aspect-ratio: 4 / 3; }
}
@media (min-width: 961px) and (max-height: 760px) {
  .ns-body { padding: 18px 22px 20px; }
  .ns-body h2 { font-size: clamp(28px, 2.6vw, 40px); }
  .ns-line { margin: 6px 0 10px; font-size: 16px; }
  .ns-body > p:not(.mono):not(.ns-line) { margin-bottom: 8px; font-size: 14px; line-height: 1.45; }
  .ns-body .facts { margin: 10px 0 12px; }
  .counter { margin: 2px 0 10px; padding: 10px 14px; }
  .counter-num { font-size: clamp(28px, 2.6vw, 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .js .pt { opacity: 1; scale: 1; transition: none; }
  .spoke { stroke-dashoffset: 0; transition: none; }
  .node-story:not([hidden]) { animation: none; }
}

/* ---------- Footer ---------- */

.site-footer { padding: 60px var(--gutter) calc(24px + var(--safe-bottom)); border-top: 1px solid var(--line); overflow: hidden; }
.footer-cols { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 200px)); gap: 30px; margin-bottom: 70px; }
.footer-cols div { display: flex; flex-direction: column; gap: 6px; }
.footer-cols .mono { margin: 0 0 8px; color: var(--muted); }
.footer-cols a { width: fit-content; transition: color .2s; }
.footer-cols a:hover { color: var(--lime); }
.footer-claim { margin: 0; font-size: clamp(26px, 2.4vw, 36px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; max-width: 340px; }
/* The wordmark sits under the claim: still big, but no longer the full page width. */
.footer-cols .footer-logo { display: block; width: 100%; max-width: 460px; color: var(--lime); }
.js .footer-logo { transform: translateY(40%); opacity: 0; transition: transform 1.4s var(--ease), opacity 1s; }
.site-footer.in .footer-logo { transform: none; opacity: 1; }
.footer-bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.footer-bar a:hover { color: var(--lime); }

/* ---------- Generic reveal ---------- */

.js .rv { opacity: 0; transform: translateY(34px); filter: blur(6px); transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease); }
.js .rv.in { opacity: 1; transform: none; filter: none; }
.js .rv.btn-grow { transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease), scale .3s var(--ease); }

/* ---------- Smaller screens ---------- */

@media (max-width: 960px) {
  .nav, .header-actions { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .menu-toggle { display: inline-flex; }
  .menu-open .site-header { background: var(--bg); }
  .menu-open .nav { display: flex; flex-direction: column; gap: 6px; position: fixed; top: 82px; left: 0; right: 0; padding: 10px var(--gutter) 30px; background: var(--bg); box-shadow: 0 1px 0 var(--line); }
  .menu-open .nav a { color: var(--fg); font-size: 36px; font-weight: 700; letter-spacing: -0.03em; }
    .paths, .howest-comp, .community-grid, .howest-gallery, .split, .final-year { grid-template-columns: 1fr; }
  .course-facts { grid-template-columns: 1fr 1fr; }
  .shot-wide, .shot-tall { height: auto; aspect-ratio: 4 / 3; }
  .pillars { grid-template-columns: 1fr; }
  .ed { grid-template-columns: 1fr; }
  .ed h1 { margin: 0 0 -0.35em; }
  .ed-bottom { grid-template-columns: 1fr; gap: 24px; }
  .roadmap { grid-template-columns: 1fr; }
  .road-map nav { display: flex; gap: 18px; margin: 0; overflow-x: auto; }
  .road-map nav button { white-space: nowrap; font-size: 14px; }
  .dash-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 24px; }
  .dash-wrap .sec-top, .dash-stage, .ad-scenes { grid-column: 1; grid-row: auto; }
  .dash-wrap .sec-top .h2 { font-size: clamp(36px, 8vw, 72px); }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-cols > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .dash-body { grid-template-columns: 1fr; }
  .dash-side { display: none; }
  .dash-top, .dash-grid { grid-template-columns: 1fr; }
  .film-bar .mono { display: none; }
}
@media (max-width: 600px) {
  .mark-zoom { width: 92vw; }
  /* Gaming. Culture. Connection. stay on one line, with some room between the words */
  .words { top: calc(50% + 15.6vw + 18px); font-size: 11px; letter-spacing: .16em; white-space: nowrap; }
  .words span { margin: 0 .5em; }
  .hero-after { bottom: calc(90px + var(--safe-bottom)); }
  .hero-tags { bottom: calc(26px + var(--safe-bottom)); font-size: 11px; letter-spacing: .14em; white-space: nowrap; }
  .hero-tags span { margin-right: 1.1em; }
  /* "Agency" sits just under the RKNKT logo in the header */
  /* The photo shifts left so both players' heads are in the shot */
  .hero-photo { object-position: 60% 50%; }
  .film-bar { top: 60px; bottom: auto; left: var(--gutter); right: auto; }
  .film-bar .mono { display: block; margin: 0; font-size: 10px; }
  .path { min-height: 0; gap: 40px; padding: 28px; }
  .path .mono { margin-bottom: -26px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .hl, .js .footer-logo, .js .film-bar { opacity: 1 !important; transform: none !important; filter: none !important; max-height: none !important; transition: none !important; }
  .statement-text mark { background-size: 100% 100%; color: var(--bg); transition: none; }
  .typing i, .photo-fx::after { animation: none !important; }
}

/* ---------- About: our story (placeholder text for now) ---------- */

.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: center; padding: clamp(130px, 18svh, 200px) var(--gutter) 0; }
.story-head .mono { margin: 0 0 18px; color: var(--lime); }
.story-title { margin: 0; font-weight: 800; font-size: clamp(48px, min(6.4vw, 11svh), 124px); line-height: .98; letter-spacing: -0.06em; }
.story-text p { margin: 0 0 16px; color: color-mix(in srgb, var(--fg) 78%, transparent); }
.story-text .story-lead { font-size: clamp(22px, 2vw, 30px); line-height: 1.25; letter-spacing: -0.02em; font-weight: 500; color: var(--fg); }
@media (max-width: 960px) { .story { grid-template-columns: 1fr; padding-top: 120px; } }
/* The network is no longer the first section, so it gets a line on top like the founders */
.about-page .net { padding-top: clamp(84px, 11svh, 104px); }
.about-page .net-title { padding-top: 24px; border-top: 1px solid var(--line); }

/* ---------- Home: portfolio wheel ----------
   An endless strip of cards that turns slowly and stops under the mouse (the motion is in home.js). Every card opens its own page.
   Without JS or with reduced motion it is a row you scroll sideways. */

.folio { padding-top: clamp(70px, 8vw, 110px); }
.folio-wheel { margin-top: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.folio-wheel::-webkit-scrollbar { display: none; }
.folio-track { display: flex; gap: 16px; width: max-content; }
.folio-track li { flex: 0 0 auto; scroll-snap-align: start; }
.folio-wheel.turning { overflow: hidden; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }

.folio-card { position: relative; display: block; width: clamp(230px, 22vw, 320px); aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); }
.folio-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.75); transition: filter .8s var(--ease), transform 1s var(--ease); }
.folio-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(5, 6, 5, .88)); }
.folio-card > div { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; color: #f3f1ea; }
.folio-card .mono { margin: 0 0 6px; color: var(--lime-bright); }
.folio-card h3 { margin: 0 0 8px; font-size: clamp(22px, 1.9vw, 28px); line-height: 1; letter-spacing: -0.035em; }
.folio-card .go { font-size: 14px; opacity: .8; }
.folio-card .go i { display: inline-block; font-style: normal; transition: transform .4s var(--ease); }
.folio-card:is(:hover, :focus-visible) img { filter: none; transform: scale(1.05); }
.folio-card:is(:hover, :focus-visible) .go i { transform: translateX(5px); }
.folio-card.contain img { object-fit: contain; background: #000; }

/* ---------- Portfolio pages (one per name in the wheel) ---------- */

.case-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); }
.case-body .story-lead { margin: 0 0 22px; font-size: clamp(22px, 2vw, 30px); line-height: 1.25; letter-spacing: -0.02em; font-weight: 500; }
.case-body p { margin: 0 0 16px; color: color-mix(in srgb, var(--fg) 78%, transparent); }
.case-side { align-self: start; padding: 24px 26px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-2); }
.case-side .mono { margin: 0 0 10px; color: var(--muted); }
.case-side .facts { margin: 0 0 20px; }
.case-more { padding-bottom: clamp(90px, 10vw, 150px); }
.case-more .folio-track { flex-wrap: wrap; width: auto; }
.case-more .folio-card { width: clamp(200px, 18vw, 260px); }
.case-hero .brand-hero-img.top { object-position: 50% 15%; }
.case-hero .brand-hero-img.contain { object-fit: contain; background: #000; }
@media (max-width: 960px) { .case-body { grid-template-columns: 1fr; } }

/* ---------- Title position on the big photos: bottom, or data-titles="center" on <html> ---------- */

[data-titles="center"] .hero-after { top: 50%; bottom: auto; translate: 0 -50%; text-align: center; }
[data-titles="center"] :is(.hero-big, .hero-sub) { margin-inline: auto; }
[data-titles="center"] .hero-ctas { justify-content: center; }
[data-titles="center"] .brand-hero { align-items: center; }
[data-titles="center"] .brand-hero-copy { padding-bottom: 0; text-align: center; }
[data-titles="center"] .brand-hero-row { justify-items: center; }
.case-kind { margin: 0 0 18px; color: var(--lime); }
.case-hero h1 { font-size: clamp(56px, 9vw, 170px); }
/* About and Howest: titles without a photo behind them */
[data-titles="center"] .story { grid-template-columns: minmax(0, 1fr); text-align: center; }
[data-titles="center"] .story-text { max-width: 760px; margin-inline: auto; }
[data-titles="center"] .howest-head { text-align: center; }
[data-titles="center"] .howest-intro { flex-direction: column; align-items: center; }

/* ---------- Talent: the five steps are the list beside the dashboard tour ---------- */

.steps-list .step-n { margin-right: 10px; vertical-align: 2px; }
.steps-list button.on .step-n { color: var(--lime); }
/* Only the step that is playing shows its text, so the whole tour fits in one screen */
.js .steps-list button:not(.on) p { display: none; }
.steps-list button.on p { margin-top: 6px; }

/* Hold and drag the portfolio wheel (home.js) */
.folio-wheel.turning { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.folio-wheel.dragging, .folio-wheel.dragging .folio-card { cursor: grabbing; }
.folio-wheel.turning .folio-card { -webkit-user-drag: none; }
/* More room between "What we do" and "How it works", with one line across the full width */
#how-it-works { padding-top: clamp(140px, 16vw, 240px); }
#how-it-works .dash-wrap { padding-top: clamp(28px, 4svh, 48px); border-top: 1px solid var(--line); }
#how-it-works .dash-wrap .sec-top { padding-top: 0; border-top: 0; }
.talent-hero .brand-hero-img { object-position: 50% 35%; }
@media (min-width: 961px) and (max-height: 700px) { .ns-photo { min-height: 80px; } .counter-num { font-size: 30px; } }
/* Portfolio items without a photo yet */
.folio-nophoto { position: absolute; inset: 10px; display: grid; place-items: center; padding-bottom: 30%; border: 1px dashed color-mix(in srgb, var(--fg) 25%, transparent); border-radius: 14px; color: var(--muted); }
.case-hero.no-photo { background: var(--bg-2); }
.case-nophoto { position: absolute; inset: 100px var(--gutter) auto auto; padding: 10px 14px; border: 1px dashed color-mix(in srgb, var(--fg) 30%, transparent); border-radius: 10px; color: var(--muted); }
/* Talent "What we do": the same panels as Brands, six of them. Closed: the number on top, the title at the bottom */
.do-panels .px-open { justify-content: space-between; }
.do-panels .px.on { flex: 4.2; }
.do-panels .px-tab { font-size: clamp(20px, 1.7vw, 26px); }

/* ---------- Brands: "Know the world", one dark card with the three points as rows
   (dark, so it stands apart from the cards above and the accent block below) ---------- */
.know { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 90px); align-items: center; margin: clamp(100px, 12vw, 170px) var(--gutter) 0; padding: clamp(32px, 4.5vw, 64px); border-radius: 28px; background: var(--bg-2); border: 1px solid var(--line); }
.know h2 { margin: 0; font-weight: 800; font-size: clamp(44px, 5.4vw, 96px); line-height: .96; letter-spacing: -0.055em; }
.know h2 span { color: var(--lime); }
.know-list li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 22px 0; border-top: 1px solid var(--line); transition: padding-left .5s var(--ease); }
.know-list li:last-child { border-bottom: 1px solid var(--line); }
.know-list li:hover { padding-left: 10px; }
.know-list .mono { padding-top: 6px; color: var(--lime); }
.know-list h3 { margin: 0 0 4px; font-size: clamp(22px, 1.9vw, 30px); letter-spacing: -0.035em; }
.know-list p { margin: 0; font-size: 16px; color: color-mix(in srgb, var(--fg) 72%, transparent); }
@media (max-width: 960px) { .know { grid-template-columns: 1fr; } }

/* ---------- Brands: "You might think" / "With RKNKT" ---------- */
.myths-head { display: grid; grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1.3fr); margin: 0 0 6px; color: var(--muted); }
.myths-head span:last-child { grid-column: 3; color: var(--lime); }
.myth { display: grid; grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1.3fr); align-items: center; padding: clamp(18px, 2.4vw, 30px) 0; border-top: 1px solid var(--line); }
.myth p { margin: 0; }
.myth-q { font-size: clamp(22px, 2.2vw, 36px); font-weight: 600; letter-spacing: -0.03em; color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--fg) 30%, transparent); transition: color .4s; }
.myth i { font-style: normal; font-size: 22px; color: var(--lime); transition: transform .5s var(--ease); }
.myth-a { font-size: clamp(17px, 1.4vw, 21px); color: var(--fg); }
.myth:hover .myth-q { color: color-mix(in srgb, var(--fg) 45%, transparent); }
.myth:hover i { transform: translateX(8px); }
@media (max-width: 760px) {
  .myths-head { display: none; }
  .myth { grid-template-columns: 1fr; gap: 8px; }
  .myth i { display: none; }
}

/* ---------- Brands: "Gamers don't just game" ---------- */
.brands-statement { margin-top: clamp(28px, 3.5vw, 56px); }
.fit-chips { margin: clamp(30px, 4vw, 50px) 0 0; gap: 8px; }
.fit-chips li { padding: 9px 16px; font-size: 15px; }

/* ---------- About: FAQ (open and close without JS) ---------- */
.faq { padding-bottom: clamp(90px, 10vw, 150px); }
.faq .sec-aside .text-link { margin-top: 10px; }
.faq-list { border-bottom: 1px solid var(--line); }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list summary { position: relative; display: block; padding: clamp(20px, 2.4vw, 30px) 60px clamp(20px, 2.4vw, 30px) 0; cursor: pointer; list-style: none; font-weight: 700; font-size: clamp(22px, 2.2vw, 36px); letter-spacing: -0.035em; transition: color .3s; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 50%; translate: 0 -50%; font-weight: 400; font-size: 34px; color: var(--lime); transition: rotate .4s var(--ease); }
.faq-list details[open] summary::after { rotate: 45deg; }
.faq-list summary:hover { color: var(--lime); }
.faq-list details > div { max-width: 780px; padding: 0 0 clamp(20px, 2.4vw, 30px); }
.faq-list details > div p { margin: 0 0 10px; color: color-mix(in srgb, var(--fg) 78%, transparent); }
.faq-list details > div b { color: var(--fg); }
.faq-list details[open] > div { animation: up .5s var(--ease) both; }
/* Smaller FAQ: a compact title and question rows */
.faq .h2 { font-size: clamp(30px, 2.8vw, 44px); }
.faq .sec-row { margin-bottom: clamp(16px, 2vw, 28px); }
.faq-list { max-width: 960px; }
.faq-list summary { padding: 16px 44px 16px 0; font-size: clamp(17px, 1.3vw, 20px); letter-spacing: -0.02em; }
.faq-list summary::after { font-size: 24px; }
.faq-list details > div { padding-bottom: 18px; }
.faq-list details > div p { font-size: 15px; }
.faq-more { margin: 22px 0 0; color: var(--muted); font-size: 15px; }
/* "How we'll work with you": the button under the title */
.know-head h2 { margin-bottom: clamp(24px, 3vw, 40px); }
.know-list li { padding: 18px 0; }

/* The "Start the conversation" button inside the dark "How we'll work" card: lime instead of dark */
.know .cta-btn { max-width: 380px; background: var(--lime); color: var(--bg); }
.know .cta-btn::before { background: var(--bg); }
.know .cta-btn i { background: var(--bg); color: var(--lime); }
.know .cta-btn:hover span { color: var(--fg); }
.know .cta-btn:hover i { background: var(--lime); color: var(--bg); }
.know:last-child { margin-bottom: clamp(56px, 7vw, 112px); }

/* "In the world of RKNKT": the news card on the homepage, next to the Discord */
.news-card { gap: 22px; }
.news-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.news-list li { border-bottom: 1px solid var(--line); }
.news-list a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 14px 0; transition: color .3s; }
.news-list .mono { grid-column: 1; margin: 0 !important; font-size: 11px; }
.news-list .news-title { grid-column: 1; font-size: clamp(17px, 1.3vw, 20px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--fg); transition: color .3s; }
.news-list i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: 20px; color: var(--lime); transition: transform .4s var(--ease); }
.news-list a:is(:hover, :focus-visible) .news-title { color: var(--lime); }
.news-list a:is(:hover, :focus-visible) i { transform: translateX(5px); }
.news-card .text-link { align-self: flex-start; }
.news-video { display: block; width: 100%; max-height: 80vh; object-fit: contain; margin-top: 28px; border-radius: 18px; border: 1px solid var(--line); background: #000; }

/* Socials in the footer, bottom right */
.footer-end { display: flex; align-items: center; gap: 18px; }
.footer-social { gap: 8px; }
.footer-social .social-btn { width: 40px; height: 40px; }
.footer-social .social-btn svg { width: 18px; height: 18px; }
.footer-bar { align-items: center; }

/* Socials inside "Stay in the loop", under the Discord button */
.loop-social { display: flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid var(--line); }

/* ---------- Legal pages (privacy.html, terms.html, cookies.html) ---------- */
.legal { padding: clamp(120px, 14vw, 170px) var(--gutter) clamp(80px, 10vw, 140px); }
.legal-head { max-width: 1100px; margin: 0 auto clamp(36px, 5vw, 64px); }
.legal-head h1 { margin: 10px 0 14px; font-weight: 700; font-size: clamp(44px, 6vw, 96px); line-height: .95; letter-spacing: -0.045em; }
.legal-head .mono { color: var(--muted); }
.legal-meta { margin: 0; color: var(--muted); }
.legal-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); max-width: 1100px; margin: 0 auto; align-items: start; }
.legal-toc { position: sticky; top: 110px; display: grid; gap: 2px; padding-top: 4px; }
.legal-toc a { padding: 6px 0; color: var(--muted); font-size: 14px; text-decoration: none; transition: color .2s; }
.legal-toc a:hover, .legal-toc a:focus-visible { color: var(--fg); }
.legal-text { max-width: 760px; font-size: 16.5px; line-height: 1.65; color: color-mix(in srgb, var(--fg) 85%, transparent); }
.legal-text section { padding-top: 30px; margin-top: 30px; border-top: 1px solid var(--line); scroll-margin-top: 110px; }
.legal-text section:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.legal-text h2 { margin: 0 0 14px; color: var(--fg); font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: -0.02em; }
.legal-text h3 { margin: 22px 0 8px; color: var(--fg); font-size: 17px; }
.legal-text p { margin: 0 0 14px; }
.legal-text ul { margin: 0 0 14px; padding-left: 20px; list-style: disc; }
.legal-text li { margin: 0 0 6px; }
.legal-text a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.legal-text strong { color: var(--fg); }
.legal-note { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); }
.legal-table { width: 100%; margin: 6px 0 16px; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.legal-table th, .legal-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-table th { color: var(--fg); font-weight: 600; }
.legal-table-wrap { overflow-x: auto; }
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (max-width: 860px) {
  .legal-body { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }