/* ==========================================================================
   The Twinzzo — Home, Style 01 · Dark Duotone
   Tokens come straight from the Figma variables (color/*).
   ========================================================================== */

@property --split {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

:root {
  --lavender: #e8e7f7;   /* color/lavender-white */
  --pink: #fe0156;       /* color/hot-pink — Twin A */
  --purple: #674fff;     /* color/purple — Twin B */
  --yellow: #ffd302;     /* color/yellow — together */
  --black: #0f0e0e;      /* color/black */
  --raised: #181719;     /* color/surface-raised */

  --muted: rgba(232, 231, 247, 0.5);
  --rule: rgba(232, 231, 247, 0.18);
  --muted-dark: rgba(15, 14, 14, 0.5);
  --rule-dark: rgba(15, 14, 14, 0.16);

  --display: "Space Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --body: "Inter", system-ui, sans-serif;

  --pad: clamp(16px, 3.334vw, 48px);
  --gap: 24px;
  --nav-h: 88px;
  --ease: cubic-bezier(0.65, 0, 0.2, 1);
  --dur: 0.7s;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--black);
  color: var(--lavender);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

/* Nothing may widen the page sideways on phones (the loader doors and hero art slide out past the edge) */
html { overflow-x: hidden; overflow-x: clip; }

img { display: block; max-width: 100%; }
/* Work isn't for taking: no dragging images out, no long-press save on phones */
img,
video { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
p, h1, h2, h3, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: var(--yellow); color: var(--black); }

:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--yellow); color: var(--black);
  padding: 10px 14px; font: 500 12px var(--mono); text-transform: uppercase;
}
.skip:focus { top: 16px; }

/* ---------- Type primitives ---------- */
.mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.label { font-size: 12px; color: var(--muted); white-space: pre; }
.muted { color: var(--muted); }
.yellow { color: var(--yellow); }
.pink { color: var(--pink); }
.purple { color: var(--purple); }
.dot--pink { color: var(--pink); }
.dot--purple { color: var(--purple); }
.dot--yellow { color: var(--yellow); }

.display-l {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(48px, 8.889vw, 160px);
  line-height: 0.92;
  letter-spacing: -0.04em;
}
.display-xl {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(52px, 12.222vw, 220px);
  line-height: 0.88;
  letter-spacing: -0.045em;
}

.wrap { padding-inline: var(--pad); }
.rule { height: 1px; width: 100%; background: var(--rule); }

/* ---------- Tags (Tag/Twin A · Twin B · Together) ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.tag img { width: 11.16px; height: 12px; flex: none; }

/* ---------- Buttons (Button/Primary · Button/Ghost) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 22px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.5s var(--ease);
}
.btn span { font-size: 14px; transition: transform 0.3s var(--ease); }
.btn:hover span { transform: translateX(4px); }
.btn--primary { background: var(--yellow); color: var(--black); }
.btn--primary:hover { background: var(--lavender); }
.btn--ghost { border-color: var(--lavender); color: var(--lavender); }
.btn--ghost:hover { background: var(--lavender); color: var(--black); }
.btn--dark { background: var(--black); color: var(--lavender); }
.btn--dark:hover { background: var(--lavender); color: var(--black); }
.btn--lg { padding: 18.75px 27.5px; gap: 15px; font-size: 16.25px; }
.btn--lg span { font-size: 17.5px; }
.btn--xl { padding: 20.25px 29.7px; gap: 16.2px; font-size: 17.55px; }
.btn--xl span { font-size: 18.9px; }

/* ---------- Duotone engraving (grey ink × colour, screened onto black) ---------- */
.duo { position: absolute; mix-blend-mode: screen; pointer-events: none; }
.duo img,
.duo video { display: block; width: 100%; height: auto; }
.duo--pink::after,
.duo--purple::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
}
.duo--pink::after { background: var(--pink); }
.duo--purple::after { background: var(--purple); }

/* ==========================================================================
   Nav/Desktop
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-inline: var(--pad);
  transition: background-color 0.35s, border-color 0.35s, height 0.35s, transform 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  height: 72px;
  background: rgba(15, 14, 14, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--rule);
}
.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__brand img { width: 44px; height: 29.25px; }
.nav__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.nav__tm { font-size: 10px; }
.nav__links { display: flex; gap: 40px; margin-left: auto; }
.nav__links a { font-size: 12px; position: relative; }
.nav__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { margin-left: 16px; }

/* Burger + mobile menu (built by main.js) */
.nav__burger {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  margin-left: 12px;
  flex: none;
  background: none;
  border: 1px solid var(--rule);
  cursor: pointer;
}
.nav__burger span {
  position: absolute;
  left: 12px; right: 12px;
  height: 2px;
  background: var(--lavender);
  transition: transform 0.4s var(--ease), top 0.4s var(--ease);
}
.nav__burger span:first-child { top: 16px; }
.nav__burger span:last-child { top: 24px; }
.menu-open .nav__burger span:first-child { top: 20px; transform: rotate(45deg); }
.menu-open .nav__burger span:last-child { top: 20px; transform: rotate(-45deg); }
.menu-open,
.menu-open body { overflow: hidden; }
.menu-open .nav { background: var(--black); border-bottom-color: var(--rule); transform: none; }
.menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: calc(var(--nav-h) + 32px) var(--pad) calc(28px + env(safe-area-inset-bottom));
  background: var(--black);
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block: 14px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 11vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), color 0.2s;
}
.menu__links a .mono { font-size: 11px; font-weight: 400; letter-spacing: 0.04em; color: var(--muted); }
.menu__links a[aria-current="page"],
.menu__links a:hover { color: var(--yellow); }
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu.is-open .menu__links a:nth-child(2) { transition-delay: 0.04s; }
.menu.is-open .menu__links a:nth-child(3) { transition-delay: 0.08s; }
.menu.is-open .menu__links a:nth-child(4) { transition-delay: 0.12s; }
.menu.is-open .menu__links a:nth-child(5) { transition-delay: 0.16s; }
.menu__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.menu__foot .btn { width: 100%; justify-content: center; }
.menu__mail { color: var(--muted); }
@media (min-width: 961px) { .menu { display: none !important; } }

/* ==========================================================================
   Hero — Split 50/50 · Hover Twin A (70/30) · Hover Twin B (30/70)
   Everything is laid out on the 1440 × 900 Figma frame: 1u = 1 design px.
   ========================================================================== */
.hero {
  --split: 50%;
  position: relative;
  container-type: inline-size;
  height: max(560px, min(62.5vw, 100vh));
  height: max(560px, min(62.5vw, 100svh));
  overflow: hidden;
  background: var(--black);
  transition: --split var(--dur) var(--ease);
}
.hero[data-active="a"] { --split: 70%; }
.hero[data-active="b"] { --split: 30%; }

.hero * { --u: calc(100cqw / 1440); }

.hero__panel { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.hero__panel--a { left: 0; width: var(--split); }
.hero__panel--b { left: var(--split); right: 0; }

/* Claw / wing art. Base box = the 50/50 frame (1600u wide); hover = 2100u. */
.hero__art {
  width: calc(1600 * var(--u));
  transform-origin: 0 0;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.hero__panel--a .hero__art { left: calc(-560 * var(--u)); top: 0; }
.hero__panel--b .hero__art { left: calc(-566 * var(--u)); top: calc(24 * var(--u)); }

.hero[data-active="a"] .hero__panel--a .hero__art { transform: translateY(calc(-280.8 * var(--u))) scale(1.3125); }
.hero[data-active="a"] .hero__panel--b .hero__art { transform: translateX(calc(-34 * var(--u))); opacity: 0.3; }
.hero[data-active="b"] .hero__panel--b .hero__art { transform: translate(calc(-34 * var(--u)), calc(-304.8 * var(--u))) scale(1.3125); }
.hero[data-active="b"] .hero__panel--a .hero__art { transform: translateX(calc(-40 * var(--u))); opacity: 0.3; }

.hero__fade {
  position: absolute;
  inset: auto 0 0;
  height: calc(380 * var(--u));
  background: linear-gradient(180deg, rgba(15, 14, 14, 0) 0%, rgba(15, 14, 14, 0.9) 75%, #0f0e0e 100%);
  pointer-events: none;
  transition: height var(--dur) var(--ease);
}
.hero[data-active="a"] .hero__fade,
.hero[data-active="b"] .hero__fade {
  height: calc(420 * var(--u));
  background: linear-gradient(180deg, rgba(15, 14, 14, 0) 0%, rgba(15, 14, 14, 0.88) 70%, #0f0e0e 100%);
}

/* Split line + dragon lockup, riding the split */
.hero__split { position: absolute; inset: 0; pointer-events: none; }
.hero__line {
  position: absolute;
  left: var(--split);
  width: 1px;
  background: rgba(232, 231, 247, 0.3);
  transform: translateX(-50%);
  transition: background-color var(--dur) var(--ease), width 0.3s, height var(--dur) var(--ease), top var(--dur) var(--ease);
}
.hero__line--top { top: 0; height: calc(264 * var(--u)); }
.hero__line--bottom { top: calc(524 * var(--u)); bottom: calc(72 * var(--u)); }
.hero[data-active="a"] .hero__line,
.hero[data-active="b"] .hero__line { width: 2px; }
.hero[data-active="a"] .hero__line { background: var(--pink); }
.hero[data-active="b"] .hero__line { background: var(--purple); }
.hero[data-active="a"] .hero__line--top,
.hero[data-active="b"] .hero__line--top { height: calc(300 * var(--u)); }
.hero[data-active="a"] .hero__line--bottom,
.hero[data-active="b"] .hero__line--bottom { top: calc(470 * var(--u)); }

.hero__logo {
  position: absolute;
  left: var(--split);
  top: calc(320 * var(--u));
  width: calc(200 * var(--u));
  height: auto;
  transform: translateX(-50%) scaleX(var(--face, 1));
  transition: width var(--dur) var(--ease), top var(--dur) var(--ease), transform 0.6s var(--ease);
}
.hero[data-active="a"] .hero__logo,
.hero[data-active="b"] .hero__logo { width: calc(140 * var(--u)); top: calc(338 * var(--u)); }

.hero__lockup {
  position: absolute;
  left: var(--split);
  color: var(--muted);
  white-space: nowrap;
  transition: opacity 0.35s;
}
.hero__lockup--s26 { top: calc(284 * var(--u)); transform: translateX(-50%); }
.hero__lockup--est { top: calc(378 * var(--u)); transform: translateX(calc(-149 * var(--u))); }
.hero__lockup--tm { top: calc(378 * var(--u)); transform: translateX(calc(128 * var(--u))); }
.hero__lockup--studio { top: calc(488 * var(--u)); transform: translateX(-50%); }
.hero[data-active="a"] .hero__lockup,
.hero[data-active="b"] .hero__lockup { opacity: 0; }

/* Eyebrows */
.hero__eyebrow {
  position: absolute;
  top: calc(124 * var(--u));
  font-size: 12px;
  color: var(--muted);
  white-space: pre;
  pointer-events: none;
  transition: opacity 0.4s;
}
.hero__eyebrow--a { left: var(--pad); }
.hero__eyebrow--b { right: var(--pad); }
.hero[data-active="a"] .hero__eyebrow--b,
.hero[data-active="b"] .hero__eyebrow--a { opacity: 0; }

/* Default headline: TWO MINDS. —— ONE VISION. */
.hero__intro {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(104 * var(--u));
  height: calc(96 * var(--u));
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(104 * var(--u));
  line-height: 0.92;
  letter-spacing: -0.03em;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
}
.hero__intro-a { position: absolute; left: calc(48 * var(--u)); top: 0; }
.hero__intro-b { position: absolute; left: calc(847 * var(--u)); top: 0; }
.hero__connector {
  position: absolute;
  left: calc(643 * var(--u));
  top: calc(50 * var(--u));
  width: calc(184 * var(--u));
  height: max(2px, calc(4 * var(--u)));
  background: var(--yellow);
}
.hero[data-active="a"] .hero__intro,
.hero[data-active="b"] .hero__intro { opacity: 0; transform: translateY(24px); }

/* Hover reveal: TWIN A. / TWIN B. */
.hero__reveal {
  position: absolute;
  bottom: calc(108 * var(--u));
  pointer-events: none;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.45s var(--ease), transform 0.7s var(--ease);
}
.hero__reveal--a { left: var(--pad); }
.hero__reveal--b { right: var(--pad); text-align: right; }
.hero__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(216 * var(--u));
  line-height: 0.88;
  letter-spacing: -0.05em;
  white-space: nowrap;
  margin-bottom: calc(16 * var(--u));
}
.hero__row { display: flex; align-items: center; gap: 32px; }
.hero__reveal--b .hero__row { justify-content: flex-end; }
.hero__desc { width: 330px; max-width: 32vw; text-align: left; color: var(--muted); }
.hero[data-active="a"] .hero__reveal--a,
.hero[data-active="b"] .hero__reveal--b { opacity: 1; transform: none; transition-delay: 0.12s; }
.hero[data-active="a"] .hero__reveal--a .btn,
.hero[data-active="b"] .hero__reveal--b .btn { pointer-events: auto; }

/* "Hover to switch" ghost on the passive side */
.hero__ghost {
  position: absolute;
  bottom: calc(108 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(9 * var(--u));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.hero__ghost--a { left: var(--pad); }
.hero__ghost--b { right: var(--pad); align-items: flex-end; }
.hero__ghost p.mono { color: var(--muted); }
.hero__ghost-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(56 * var(--u));
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: rgba(232, 231, 247, 0.35);
  white-space: nowrap;
}
.hero[data-active="a"] .hero__ghost--b,
.hero[data-active="b"] .hero__ghost--a { opacity: 1; transition-delay: 0.15s; }

/* Static cursor hint — shown until a real pointer takes over */
.hero__hint {
  position: absolute;
  z-index: 3;
  left: calc(1004 * var(--u));
  top: calc(228 * var(--u));
  pointer-events: none;
  transition: left var(--dur) var(--ease), top var(--dur) var(--ease), opacity 0.25s;
}
.hero[data-active="a"] .hero__hint { left: calc(560 * var(--u)); top: calc(250 * var(--u)); }
.hero[data-active="b"] .hero__hint { left: calc(900 * var(--u)); top: calc(250 * var(--u)); }
.hero.has-pointer .hero__hint { opacity: 0; }

/* Meta bar */
.hero__meta {
  position: absolute;
  inset: auto 0 0;
  height: max(56px, calc(72 * var(--u)));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-inline: var(--pad);
  border-top: 1px solid var(--rule);
  pointer-events: none;
}
.hero__meta-side { display: flex; align-items: center; gap: 20px; }

/* Touch / keyboard switch */
.hero__switch {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(max(56px, calc(72 * var(--u))) + 16px);
  display: flex;
  border: 1px solid var(--rule);
  background: rgba(15, 14, 14, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transform: translateX(-50%);
}
.hero__switch button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: none; border: 0; cursor: pointer;
  color: var(--muted);
}
.hero__switch button[aria-pressed="true"] { color: var(--black); background: var(--yellow); }
.hero__switch button img { width: 11px; height: 12px; }
@media (hover: hover) and (pointer: fine) {
  .hero__switch:not(:focus-within) {
    clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; border: 0; padding: 0;
  }
}

/* ==========================================================================
   Hero, option 2 — the production reel full screen, a clean line over it
   ========================================================================== */
.rhero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--black);
}
.rhero[hidden] { display: none; }
.rhero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: rhero-zoom 14s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
@keyframes rhero-zoom { from { transform: scale(1.12); } }
.rhero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 14, 14, 0.55) 0%, rgba(15, 14, 14, 0) 22%, rgba(15, 14, 14, 0) 45%, rgba(15, 14, 14, 0.88) 100%),
    radial-gradient(ellipse at 30% 70%, rgba(15, 14, 14, 0.35), rgba(15, 14, 14, 0) 60%);
}
.rhero__content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 28px); padding-bottom: clamp(28px, 3vw, 44px); }
.rhero__eyebrow { display: flex; align-items: center; gap: 12px; color: rgba(232, 231, 247, 0.75); }
.rhero__eyebrow img { width: 30px; height: auto; }
.rhero__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(64px, 11.5vw, 220px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  transform: translate3d(var(--rx, 0px), var(--ry, 0px), 0);
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rhero__line { display: block; overflow: hidden; padding-top: 0.04em; }
.rhero__line > span { display: inline-block; animation: rhero-rise 1.2s var(--ease) both; }
.rhero__line:nth-child(2) > span { animation-delay: 0.12s; padding-left: clamp(0px, 12vw, 260px); }
@keyframes rhero-rise { from { transform: translateY(105%); } }
.is-loading .rhero__line > span,
.is-loading .rhero__sub,
.is-loading .rhero__ctas,
.is-loading .rhero__services,
.is-loading .rhero__video { animation-play-state: paused; }
.rhero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.rhero__sub { max-width: 440px; margin: 0; font-size: clamp(16px, 1.25vw, 19px); color: rgba(232, 231, 247, 0.85); animation: fade-in 1s 0.5s both; }
.rhero__ctas { display: flex; gap: 12px; flex-wrap: wrap; animation: fade-in 1s 0.65s both; }
.rhero__services { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; animation: fade-in 1s 0.8s both; }
.rhero__services li { position: relative; padding-left: 16px; color: rgba(232, 231, 247, 0.45); transition: color 0.5s; }
.rhero__services li::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-radius: 50%; background: currentColor; transition: background-color 0.5s, transform 0.5s; }
.rhero__services li.is-on { color: var(--lavender); }
.rhero__services li.is-on::before { background: var(--yellow); transform: scale(1.3); }
.rhero__bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 56px;
  padding-inline: var(--pad);
  border-top: 1px solid var(--rule);
  background: rgba(15, 14, 14, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.rhero__now span:last-child { color: var(--lavender); }
.rhero__now [data-rhero-client].is-new { display: inline-block; animation: rise 0.6s var(--ease); }
.rhero__now:hover span:last-child,
.rhero__scroll:hover { color: var(--yellow); }
.rhero__tc { color: var(--muted); font-variant-numeric: tabular-nums; }
.rhero__tc::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--pink); vertical-align: 1px; animation: rec 1.6s steps(2) infinite; }
.rhero__scroll { color: var(--muted); transition: color 0.3s; }
@media (max-width: 760px) {
  .rhero { min-height: 560px; }
  .rhero__title { font-size: 17vw; }
  .rhero__line:nth-child(2) > span { padding-left: 0; }
  .rhero__ctas { width: 100%; }
  .rhero__ctas .btn { flex: 1; justify-content: center; }
  .rhero__services { gap: 6px 18px; font-size: 10px; }
  .rhero__tc { display: none; }
}

/* ==========================================================================
   Cursor — wing shard + label (follows the pointer over hero + work)
   ========================================================================== */
.cursor,
.hero__hint { display: block; }
.cursor {
  position: fixed;
  left: 0; top: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  transition: opacity 0.2s;
}
.cursor.is-on { opacity: 1; }
.cursor img,
.hero__hint img { width: 24.18px; height: 26px; }
.cursor__label {
  position: absolute;
  left: 26px; top: 28px;
  padding: 6px 10px;
  background: var(--yellow);
  color: var(--black);
  font-weight: 500;
  white-space: nowrap;
}
@media not ((hover: hover) and (pointer: fine)) { .cursor { display: none; } }

/* ==========================================================================
   Marquee — statements
   ========================================================================== */
.marquee {
  background: var(--yellow);
  color: var(--black);
  height: 84px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee__track span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__track img { width: 20.46px; height: 22px; flex: none; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   Manifesto
   ========================================================================== */
.manifesto {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 7.778vw, 112px);
  padding-block: clamp(96px, 11.112vw, 160px);
}
.manifesto__statement,
.caps__inner,
.contact__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.manifesto__text {
  grid-column: span 2;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 3.889vw, 70px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 18em;
}
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.pillar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.pillar__top { display: flex; justify-content: space-between; align-items: center; }
.pillar__top .mono { font-size: 12px; }
.pillar__shards { display: flex; gap: 4px; }
.pillar__shards img { width: 18.6px; height: 20px; }
.pillar__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 2.778vw, 48px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.pillar__body { max-width: 360px; color: var(--muted); }

/* ==========================================================================
   Selected Work
   ========================================================================== */
.work { padding-bottom: clamp(96px, 11.112vw, 160px); }
.work__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 0 40px;
}
.work__title { display: flex; flex-direction: column; gap: 28px; }
.work__filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
}
.work__filter-list { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.filter {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--lavender);
  text-underline-offset: 3px;
}
.filter[aria-pressed="true"] { text-decoration: underline; }
.filter:hover { color: var(--yellow); }

.work__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 72px var(--gap);
  padding-top: 48px;
}
.card { display: flex; flex-direction: column; gap: 20px; transition: opacity 0.4s, filter 0.4s; }
.work__grid > .card { grid-column: span 2; }
.card--wide,
.work__grid > .card--wide { grid-column: span 4; }
.work__grid > .card--half { grid-column: span 3; }
.work__grid > .card--full { grid-column: 1 / -1; }
.work__grid > .card--half .card__cover,
.work__grid > .card--full .card__cover { height: auto; aspect-ratio: 16 / 9; }
.card__cover {
  position: relative;
  height: clamp(300px, 38.889vw, 700px);
  overflow: hidden;
}
.card__cover--ink { background: var(--raised); }
.card__cover--purple { background: var(--purple); }
.card__cover--yellow { background: var(--yellow); }
.card__img { position: absolute; inset: -4%; width: 108%; max-width: none; height: 108%; object-fit: cover; }
.card__meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.card__meta > div { display: flex; flex-direction: column; gap: 10px; }
.card__name {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.02em;
}
.card__name .mono { font-size: 12px; }
.work[data-filter="a"] .card:not([data-lead="a"]),
.work[data-filter="b"] .card:not([data-lead="b"]),
.work[data-filter="together"] .card:not([data-lead="together"]) { opacity: 0.18; filter: grayscale(1); }

/* ==========================================================================
   Capabilities (light)
   ========================================================================== */
.caps { background: var(--lavender); color: var(--black); }
.caps__inner { padding-block: clamp(96px, 9.723vw, 140px); }
.caps .label { color: var(--muted-dark); }
.caps__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.caps__intro > img { width: 132px; height: 87.74px; }
.caps__lede {
  max-width: 340px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.caps__list { grid-column: span 2; border-top: 1px solid var(--rule-dark); }
.caps__list li { border-bottom: 1px solid var(--rule-dark); }
.service {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 26px 0;
  transition: background-color 0.3s var(--ease), padding 0.4s var(--ease);
}
.service > .mono { font-size: 12px; color: var(--muted-dark); }
.service__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 4.445vw, 80px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.service__lead { margin-left: auto; }
.service__arrow {
  font-family: var(--mono);
  font-size: 20px;
  width: 0;
  margin-left: -32px;
  overflow: hidden;
  opacity: 0;
  transition: width 0.4s var(--ease), margin 0.4s var(--ease), opacity 0.3s;
}
.service:hover,
.service:focus-visible { background: var(--yellow); padding-inline: 24px; }
.service:hover .service__arrow,
.service:focus-visible .service__arrow { width: 20px; margin-left: -12px; opacity: 1; }
.service:hover .service__lead img,
.service:focus-visible .service__lead img { filter: brightness(0); }

/* ==========================================================================
   The Twins
   ========================================================================== */
.twins {
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding-block: clamp(96px, 11.112vw, 160px);
}
.twins__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.twins__note { max-width: 280px; }
.twins__split {
  position: relative;
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.twin { display: flex; flex-direction: column; gap: 28px; transition: opacity 0.5s var(--ease); }
.twins__split:has(.twin:hover) .twin:not(:hover) { opacity: 0.45; }
.twin__portrait {
  position: relative;
  aspect-ratio: 660 / 600;
  background: var(--raised);
  overflow: hidden;
}
.twin__art { transform-origin: 50% 40%; }
/* Portraits: tinted in the twin's colour, true colour on hover */
.twin__photo { inset: -4%; }
.twin__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(1.1); transition: filter 0.8s var(--ease); }
.twin__photo::after { transition: opacity 0.8s var(--ease); }
.twin:hover .twin__photo { mix-blend-mode: normal; }
.twin:hover .twin__photo img { filter: none; }
.twin:hover .twin__photo::after { opacity: 0; }
.twin__label { position: absolute; left: 20px; top: 20px; padding: 6px 10px; font-weight: 500; }
.twin__label--a { background: var(--pink); }
.twin__label--b { background: var(--purple); }
.twin__name { display: flex; justify-content: space-between; align-items: center; }
.twin__name h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(48px, 6.667vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.04em;
}
.twin__name img { width: clamp(36px, 4.133vw, 60px); height: auto; }
.twin__info { display: flex; gap: 24px; }
.twin__role { width: 206px; flex: none; display: flex; flex-direction: column; gap: 12px; }
.twin__role dd { font-size: 12px; line-height: 1.6; letter-spacing: 0.04em; }
.twin__bio { display: flex; flex-direction: column; gap: 24px; font-size: 18px; }
.twin__link { font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.twin__link--a { color: var(--pink); }
.twin__link--b { color: var(--purple); }
.twin__link:hover { color: var(--lavender); }
.twins__badge {
  position: absolute;
  left: 50%;
  top: calc((100cqw - var(--gap)) / 4.4);
  width: clamp(88px, 9.167vw, 132px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--yellow);
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) rotate(calc(var(--spin, 0deg) + var(--tilt, 0deg)));
  transition: transform 0.3s linear;
}
.twins__badge img { width: 63.6%; height: auto; }
.twins__split:has(.twin[data-twin="a"]:hover) .twins__badge { --tilt: -14deg; }
.twins__split:has(.twin[data-twin="b"]:hover) .twins__badge { --tilt: 14deg; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 6.667vw, 96px);
  padding-top: clamp(64px, 11.112vw, 160px);
  padding-bottom: clamp(96px, 9.723vw, 140px);
  scroll-margin-top: 24px;
}
.contact__headline { display: flex; flex-direction: column; gap: 36px; }
.contact__direct { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.contact__email {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 1.945vw, 28px);
  letter-spacing: -0.02em;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.contact__email:hover { color: var(--yellow); }
.contact__social { display: flex; flex-direction: column; gap: 12px; font-size: 12px; }
.contact__social a:hover { color: var(--yellow); }

.form { grid-column: span 2; display: flex; flex-direction: column; }
.field {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 22px;
}
.field input {
  width: 100%;
  padding: 0 0 22px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(20px, 1.945vw, 28px);
  letter-spacing: -0.02em;
  outline: none;
  transition: border-color 0.25s;
}
.field input::placeholder { color: var(--muted); }
.field input:focus { border-bottom-color: var(--yellow); }
.field input.is-invalid { border-bottom-color: var(--pink); }
.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 40px;
}
.need { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; border: 0; margin: 0; padding: 0; }
.need legend { float: left; margin-right: 14px; }
.need__opt { position: relative; padding: 6px 10px; border: 1px solid transparent; cursor: pointer; transition: border-color 0.25s; }
.need__opt:hover { border-color: var(--rule); }
.need__opt input { position: absolute; opacity: 0; pointer-events: none; }
.need__opt:has(input:checked), .need__opt.is-checked { border-color: var(--yellow); }
.need__opt:has(input:focus-visible) { outline: 2px solid var(--yellow); outline-offset: 3px; }
.form__status { min-height: 1em; padding-top: 16px; color: var(--muted); text-transform: none; }

/* ==========================================================================
   Contact — meet in the middle (yellow)
   ========================================================================== */
.meet {
  background: var(--yellow);
  color: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 4.445vw, 64px);
  padding: clamp(80px, 8.334vw, 120px) var(--pad);
  text-align: center;
  overflow: hidden;
}
.meet > img { width: 150px; height: 99.7px; }
.meet__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(56px, 14.445vw, 260px);
  line-height: 0.86;
  letter-spacing: -0.05em;
}
.meet__lede {
  max-width: 560px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(19px, 1.667vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.015em;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--black); }
.footer__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 28px var(--pad);
  border-top: 1px solid var(--rule);
}
.footer__legal { display: flex; align-items: center; gap: 14px; }
.footer__legal img { width: 36px; height: 23.93px; }
.footer__links { display: flex; gap: 40px; }
.footer__links a:hover,
.footer__top:hover { color: var(--yellow); }
.footer__top { justify-self: end; }
.footer__mark {
  position: relative;
  height: 12.987vw;
  overflow: hidden;
}
.footer__mark p {
  position: absolute;
  left: -2.014vw;
  top: -1.459vw;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18.056vw;
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

/* ==========================================================================
   Loader — counts up, then the screen splits open on the hero's seam
   ========================================================================== */
.loader { display: none; }
.js .loader {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;
  --door: cubic-bezier(0.77, 0, 0.18, 1);
  animation: loader-failsafe 0.01s 10s forwards;
}
.loader-lock,
.loader-lock body { overflow: hidden; }
@keyframes loader-failsafe { to { visibility: hidden; } }

.loader__half {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  overflow: hidden;
  background: var(--black);
  transition: transform 1.15s var(--door);
  will-change: transform;
}
.loader__half--a { left: 0; }
.loader__half--b { right: 0; }
.loader__inner {
  position: absolute;
  top: 0; bottom: 0;
  width: 200%;
  transition: transform 1.15s var(--door);
}
.loader__half--a .loader__inner { left: 0; }
.loader__half--b .loader__inner { right: 0; }
.loader.is-split .loader__half--a { transform: translateX(-101%); }
.loader.is-split .loader__half--b { transform: translateX(101%); }
.loader.is-split .loader__half--a .loader__inner { transform: translateX(35%); }
.loader.is-split .loader__half--b .loader__inner { transform: translateX(-35%); }

.loader__corner { position: absolute; top: 32px; color: var(--muted); animation: fade-in 0.8s 0.1s both; }
.loader__corner--tl { left: var(--pad); }
.loader__corner--tr { right: var(--pad); }
.loader__logo {
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(110px, 10vw, 150px);
  height: auto;
  transform: translate(-50%, -50%);
  animation: loader-logo 1s var(--ease) both;
}
@keyframes loader-logo { from { opacity: 0; transform: translate(-50%, -40%) scale(0.92); } }
.loader__line {
  position: absolute;
  left: calc(50% - 1px);
  width: 1px;
  background: rgba(232, 231, 247, 0.3);
  transform: scaleY(var(--p, 0));
  transition: background-color 0.3s, width 0.3s;
}
.loader__line--top { top: 0; bottom: calc(50% + clamp(64px, 6vw, 92px)); transform-origin: 50% 100%; }
.loader__line--bottom {
  top: calc(50% + clamp(64px, 6vw, 92px));
  bottom: calc(var(--pad) + clamp(60px, 8.5vw, 128px) + 24px);
  transform-origin: 50% 0;
}
.loader.is-done .loader__line { background: var(--yellow); width: 2px; left: calc(50% - 2px); }
.loader__count {
  position: absolute;
  left: 50%;
  bottom: var(--pad);
  transform: translateX(-50%);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(72px, 10vw, 150px);
  line-height: 0.8;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.loader__tag { position: absolute; bottom: var(--pad); animation: fade-in 0.8s 0.2s both; }
.loader__tag--a { left: var(--pad); }
.loader__tag--b { right: var(--pad); }
@keyframes fade-in { from { opacity: 0; } }

/* Hero entrance, played while the doors open */
.is-entering .hero__panel--a { animation: art-in-a 1.7s 0.1s var(--ease) backwards; }
.is-entering .hero__panel--b { animation: art-in-b 1.7s 0.1s var(--ease) backwards; }
.is-entering .hero__split { animation: fade-in 0.9s 0.55s backwards; }
.is-entering .hero__intro-a { animation: rise 1s 0.5s var(--ease) backwards; }
.is-entering .hero__intro-b { animation: rise 1s 0.62s var(--ease) backwards; }
.is-entering .hero__connector { animation: draw 0.9s 0.85s var(--ease) backwards; }
.is-entering .hero__eyebrow,
.is-entering .hero__meta,
.is-entering .hero__hint { animation: fade-in 0.8s 0.9s backwards; }
.is-entering .nav { animation: drop 0.8s 0.8s var(--ease) backwards; }
@keyframes art-in-a { from { opacity: 0; transform: translateX(-6%) scale(1.06); } }
@keyframes art-in-b { from { opacity: 0; transform: translateX(6%) scale(1.06); } }
@keyframes rise { from { opacity: 0; transform: translateY(45%); } }
@keyframes draw { from { transform: scaleX(0); } }
@keyframes drop { from { opacity: 0; transform: translateY(-16px); } }

/* ==========================================================================
   Interaction layer
   ========================================================================== */

/* Nav tucks away while scrolling down, returns on the way up */
.nav.is-tucked { transform: translateY(-100%); }

/* Hero: art drifts with the pointer, the dragon turns to face the active twin */
.hero__art > * { transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hero[data-active="a"] .hero__panel--a .hero__art > *,
.hero[data-active="b"] .hero__panel--b .hero__art > * { transform: translate3d(var(--hx, 0px), var(--hy, 0px), 0); }
.hero[data-active="b"] { --face: -1; }

/* Headlines: lines slide up out of a mask */
.js [data-reveal] .line { display: block; overflow: hidden; padding-top: 0.06em; margin-top: -0.06em; }
.js [data-reveal] .line__inner { display: block; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.js [data-reveal] .line:nth-child(2) .line__inner { transition-delay: 0.08s; }
.js [data-reveal].is-in .line__inner { transform: none; }

/* Manifesto: words light up as you read down */
.js [data-scrub] .w { opacity: 0.16; transition: opacity 0.35s; }
.js [data-scrub] .w.is-lit { opacity: 1; }

/* Marquee: driven by scroll velocity once JS takes over */
.marquee.is-live .marquee__track { animation: none; will-change: transform; }

/* Pillars: the shards flick on hover */
.pillar__shards img { transition: transform 0.6s var(--ease); }
.pillar:hover .pillar__shards img { transform: rotate(-24deg) translateY(-3px); }
.pillar:hover .pillar__shards img + img { transform: rotate(24deg) translateY(-3px); transition-delay: 0.05s; }

/* Work + twins: covers tilt toward the pointer, art drifts the other way */
.card__cover,
.twin__portrait {
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.7s var(--ease);
}
.card__cover > *,
.twin__art {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(var(--s, 1));
  transition: transform 0.9s var(--ease);
}
.card:hover,
.twin:hover { --s: 1.06; }

/* Capabilities: the lead twin's artwork follows the pointer down the list */
.caps__preview {
  position: fixed;
  left: 0; top: 0;
  z-index: 40;
  width: 240px;
  height: 300px;
  pointer-events: none;
  opacity: 0;
  translate: var(--px, -999px) var(--py, -999px);
  rotate: var(--pr, 0deg);
  scale: 0.6;
  transition: opacity 0.3s, scale 0.5s var(--ease);
}
.caps__preview.is-on { opacity: 1; scale: 1; }
.caps__preview > div {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--black);
  opacity: 0;
  transition: opacity 0.25s;
}
.caps__preview > div.is-on { opacity: 1; }
.caps__preview .duo { width: 330%; }
.caps__preview [data-for="a"] .duo { left: -150%; top: -30%; }
.caps__preview [data-for="b"] .duo { left: -120%; top: -36%; }
.caps__preview [data-for="together"] { background: var(--yellow); }
.caps__preview [data-for="together"] img { position: absolute; width: 230%; max-width: none; left: -16%; top: -10%; }
@media not ((hover: hover) and (pointer: fine)) { .caps__preview { display: none; } }

/* Meet in the middle: the two lines slide in from opposite sides and meet */
.meet__line { display: block; will-change: transform; }
.meet__line:first-child { transform: translateX(calc(var(--gap, 0px) * -1)); }
.meet__line:last-child { transform: translateX(var(--gap, 0px)); }
.meet > img { transform: rotate(var(--logo-r, 0deg)); }

/* Footer wordmark: letters rise toward the pointer */
.footer__mark .ch { display: inline-block; transform: translateY(calc(var(--lift, 0) * -18%)); transition: transform 0.5s var(--ease); }

/* ==========================================================================
   Inner pages — shared head
   ========================================================================== */
.page { padding-top: var(--nav-h); }
.page-head {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: clamp(48px, 7vw, 112px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
.page-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.page-head__lede { max-width: 420px; color: var(--muted); }
.page-head__count {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.32em;
  letter-spacing: -0.02em;
  vertical-align: top;
  color: var(--yellow);
  margin-left: 0.1em;
}

/* ==========================================================================
   Work page
   ========================================================================== */
/* Work hero — full-screen reel of the work itself */
.whero {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  background: var(--black);
}
.whero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: whero-in 1.6s var(--ease) both; }
@keyframes whero-in { from { opacity: 0; transform: scale(1.08); } }
.whero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 14, 14, 0.6) 0%, rgba(15, 14, 14, 0.1) 30%, rgba(15, 14, 14, 0.55) 62%, #0f0e0e 100%),
    linear-gradient(90deg, rgba(15, 14, 14, 0.45) 0%, rgba(15, 14, 14, 0) 60%);
}
.whero__content { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; gap: 24px; padding-bottom: clamp(72px, 8vw, 120px); }
.whero__title { font-size: clamp(72px, 17vw, 300px); line-height: 0.82; }
.whero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.whero__lede { max-width: 420px; color: rgba(232, 231, 247, 0.78); }
.whero__now { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-width: 260px; text-align: right; }
.whero__now-client {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  transition: color 0.3s;
}
.whero__now-client.is-new { animation: rise 0.6s var(--ease); }
.whero__now:hover .whero__now-client { color: var(--yellow); }
.whero__bar { width: 100%; height: 2px; background: rgba(232, 231, 247, 0.2); overflow: hidden; }
.whero__bar span { display: block; height: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: left; }
.whero__scroll {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 24px;
  display: inline-flex;
  gap: 8px;
  color: var(--muted);
  transform: translateX(-50%);
}
.whero__scroll span { display: inline-block; animation: nudge 1.6s ease-in-out infinite; }
.whero__scroll:hover { color: var(--yellow); }
@keyframes nudge { 50% { transform: translateY(4px); } }
.works-area { scroll-margin-top: 0; }

/* Work filter: one row of type chips, sticky under the nav */
.wfilter {
  position: sticky;
  top: 72px;
  z-index: 30;
  background: rgba(15, 14, 14, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transition: top 0.5s var(--ease);
}
body:has(.nav.is-tucked) .wfilter, .nav-tucked .wfilter { top: 0; }
.wfilter__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; }
.wfilter__chips { display: flex; align-items: center; gap: 4px 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.wfilter__chips::-webkit-scrollbar { display: none; }
.wfilter__count { white-space: nowrap; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: none;
  border: 1px solid transparent;
  color: var(--lavender);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.chip img { width: 11.16px; height: 12px; }
.chip:hover { border-color: var(--rule); }
.chip[aria-pressed="true"] { border-color: var(--yellow); }
.chip[aria-pressed="true"]:not([data-value="all"]) { background: rgba(255, 211, 2, 0.08); }
.chip--client { border-color: var(--yellow); background: var(--yellow); color: var(--black); }
.chip--client:hover { border-color: var(--yellow); }
.chip sup { font-size: 9px; color: var(--muted); margin-left: 2px; }

/* One page of work: sections of tiles */
.gal { padding-top: 48px; padding-bottom: clamp(96px, 11vw, 160px); }
.gal__group + .gal__group { margin-top: clamp(88px, 9vw, 144px); }
.works__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-bottom: 20px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}
.works__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.works__n { margin-left: auto; color: var(--yellow); }
.gal__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.gal__grid--kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile[hidden], .case-row[hidden], .gal__foot[hidden] { display: none; }
.gal__foot, .case-more { display: flex; justify-content: center; margin-top: clamp(28px, 3vw, 44px); }
.gal__more-n { margin-left: 6px; opacity: 0.6; font-size: 0.85em; }

.tile {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--raised);
  scroll-margin-top: 150px;
}
.gal__grid--kv .tile { aspect-ratio: 16 / 9; }
.gal__grid--sq .tile { aspect-ratio: 1 / 1; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease), opacity 0.6s; }
.tile__cap {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 40px 16px 14px;
  background: linear-gradient(180deg, rgba(15, 14, 14, 0) 0%, rgba(15, 14, 14, 0.85) 100%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s, transform 0.35s var(--ease);
}
.tile__client { font-family: var(--display); font-weight: 500; font-size: 18px; letter-spacing: -0.01em; }
.tile__cap .mono { color: rgba(232, 231, 247, 0.7); font-size: 10px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile:hover img,
.tile:focus-visible img { transform: scale(1.04); }
.tile:hover .tile__cap,
.tile:focus-visible .tile__cap { opacity: 1; transform: none; }
.js .tile:not(.is-in) img { opacity: 0; }
.tile.is-hit::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--yellow); animation: hit 2.4s var(--ease) forwards; pointer-events: none; }
@keyframes hit { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }

/* Projects at the top of Work */
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.pcard { display: flex; flex-direction: column; gap: 14px; }
.pcard__img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--raised); }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.pcard:hover .pcard__img img { transform: scale(1.04); }
.pcard__meta { display: flex; flex-direction: column; gap: 6px; }
.pcard__title { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.4vw, 36px); line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; transition: color 0.3s; }
.pcard:hover .pcard__title { color: var(--yellow); }

/* Project page */
.case-head { display: flex; flex-direction: column; gap: 20px; padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(32px, 4vw, 56px); }
.case-head__back { color: var(--muted); transition: color 0.3s; }
.case-head__back:hover { color: var(--yellow); }
.case-head__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.case-head__logo img { width: auto; max-width: 180px; max-height: 52px; object-fit: contain; opacity: 0.85; transition: opacity 0.3s; }
.case-head__logo a:hover img { opacity: 1; }
.case-head__title { font-size: clamp(54px, 9vw, 160px); line-height: 0.86; text-transform: uppercase; }
.case-head__row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: start; margin-top: 12px; }
.case-head__details { display: flex; flex-direction: column; gap: 14px; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; color: rgba(232, 231, 247, 0.85); }
.case-head__details p { margin: 0; }
.case-head__facts { display: flex; flex-direction: column; margin: 0; border-top: 1px solid var(--rule); }
.case-head__facts div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.case-head__facts dt { font-size: 11px; padding-top: 3px; }
.case-head__facts dd { margin: 0; }
.case-head__facts dd .pills { margin-top: -2px; }
.case-film { margin-bottom: clamp(32px, 4vw, 56px); }
.case-film__player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.case-film__player iframe,
.case-film__player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.case-film__cap { margin-top: 12px; }
.case-gal { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 24px); padding-bottom: clamp(64px, 8vw, 120px); }
.case-row { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); align-items: start; }
.case-row[data-n="1"] { --n: 1; }
.case-row[data-n="2"] { --n: 2; }
.case-row[data-n="3"] { --n: 3; }
.case-row[data-n="4"] { --n: 4; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { padding: 5px 11px; border: 1px solid var(--rule); border-radius: 999px; font-size: 11px; color: var(--lavender); }
.case-cover { margin: 0 auto clamp(32px, 4vw, 56px); }
.case-cover img { width: 100%; height: auto; }
.case-story { display: flex; flex-direction: column; margin-bottom: clamp(40px, 5vw, 72px); border-top: 1px solid var(--rule); }
.case-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(20px, 4vw, 72px); padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--rule); opacity: 0; transform: translateY(16px); transition: opacity 0.8s var(--ease), transform 0.9s var(--ease); }
.case-sec.is-in { opacity: 1; transform: none; }
.case-sec__label { display: flex; align-items: baseline; gap: 14px; margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.2vw, 34px); line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; }
.case-sec__label .mono { font-size: 11px; font-weight: 400; letter-spacing: 0.04em; }
.case-sec__text { display: flex; flex-direction: column; gap: 12px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; color: rgba(232, 231, 247, 0.85); }
.case-sec__text p { margin: 0; }
.case-gal__item { display: block; padding: 0; border: 0; background: var(--raised); cursor: zoom-in; opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.9s var(--ease); }
.case-gal__item.is-in { opacity: 1; transform: none; }
.case-gal__item img { width: 100%; height: auto; }
.case-next { padding-bottom: clamp(64px, 8vw, 120px); }
.case-next__link { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(160px, 24vw, 360px); grid-template-rows: auto 1fr; gap: 8px 32px; align-items: end; padding-top: 28px; border-top: 1px solid var(--rule); }
.case-next__link img { grid-column: 2; grid-row: 1 / 3; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.case-next__title { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 5vw, 80px); line-height: 0.9; letter-spacing: -0.03em; text-transform: uppercase; transition: color 0.3s; }
.case-next__link:hover .case-next__title { color: var(--yellow); }
@media (max-width: 760px) {
  .pcards { grid-template-columns: 1fr; }
  .case-head__row { grid-template-columns: 1fr; }
  .case-head__title { font-size: 14vw; }
  .case-head__logo img { max-width: 120px; max-height: 36px; }
  .case-row[data-n="3"],
  .case-row[data-n="4"] { --n: 2; }
  .case-sec { grid-template-columns: 1fr; gap: 12px; }
  .case-next__link { grid-template-columns: 1fr; }
  .case-next__link img { grid-column: auto; grid-row: auto; }
}

/* Viewer */
.lb-open,
.lb-open body { overflow: hidden; }
.lb {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 64px clamp(16px, 6vw, 96px) 72px;
  background: rgba(10, 9, 9, 0.96);
  opacity: 0;
  transition: opacity 0.3s;
}
.lb[hidden] { display: none; }
/* Film player (Production) */
.fp__body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: end; width: min(1400px, 100%); }
.fp__player { position: relative; aspect-ratio: 16 / 9; width: 100%; max-height: calc(100vh - 160px); max-height: calc(100svh - 160px); background: #000; }
.fp__player iframe,
.fp__player video,
.fp__player img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; }
.fp__info { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
.fp__title { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 2.6vw, 40px); line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; }
.fp__desc { color: rgba(232, 231, 247, 0.75); font-size: 15px; }
.fp__credits { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); }
.fp__credits:empty { display: none; }
.fp__credits div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; font-size: 13px; }
.fp__credits dt { font-size: 10px; padding-top: 2px; }
.fp__credits dd { margin: 0; }
@media (max-width: 960px) {
  .fp__body { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .fp__info { padding-inline: var(--pad); }
}
.lb.is-open { opacity: 1; }
.lb__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; height: 100%; min-height: 0; justify-content: center; }
.lb__img { max-width: 100%; max-height: calc(100% - 48px); width: auto; height: auto; object-fit: contain; }
.lb__cap { display: flex; align-items: baseline; gap: 14px; }
.lb__client { font-family: var(--display); font-weight: 500; font-size: 20px; }
.lb__close { position: absolute; top: 20px; right: var(--pad); padding: 8px 12px; background: none; border: 1px solid var(--rule); color: var(--lavender); cursor: pointer; }
.lb__close:hover { border-color: var(--yellow); color: var(--yellow); }
.lb__nav {
  position: absolute;
  top: 50%;
  width: 52px; height: 52px;
  margin-top: -26px;
  background: rgba(15, 14, 14, 0.6);
  border: 1px solid var(--rule);
  color: var(--lavender);
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.lb__nav:hover { background: var(--yellow); color: var(--black); }
.lb__nav--prev { left: clamp(8px, 2vw, 28px); }
.lb__nav--next { right: clamp(8px, 2vw, 28px); }
.lb__count { position: absolute; top: 28px; left: var(--pad); color: var(--muted); }

.preview {
  position: fixed;
  left: 0; top: 0;
  z-index: 40;
  width: 280px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  translate: var(--px, -999px) var(--py, -999px);
  rotate: var(--pr, 0deg);
  scale: 0.6;
  background: var(--raised);
  transition: opacity 0.3s, scale 0.5s var(--ease);
}
.preview.is-on { opacity: 1; scale: 1; }
.preview img { width: 100%; height: 100%; object-fit: cover; }
@media not ((hover: hover) and (pointer: fine)) { .preview { display: none; } }

/* ==========================================================================
   Project page — /work/<slug>
   ========================================================================== */
.crumbs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.crumbs a { display: inline-flex; gap: 8px; transition: color 0.3s; }
.crumbs a span { transition: transform 0.4s var(--ease); }
.crumbs a:hover { color: var(--yellow); }
.crumbs a:hover span { transform: translateX(-4px); }
.crumbs > * + *::before { content: "/"; margin-right: 18px; color: var(--rule); }

.project__head {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px var(--gap);
  padding-top: clamp(40px, 5vw, 80px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
.project__title-wrap { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 24px; }
.project__tag { display: flex; align-items: center; gap: 16px; }
.project__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(48px, 9vw, 160px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  animation: rise 1s 0.1s var(--ease) backwards;
}
.project__meta { display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; align-content: start; }
.project__meta dt { color: var(--muted); }
.project__desc {
  grid-column: span 2;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.project__story[hidden] { display: none; }
.project__hero { margin: 0; animation: fade-in 1.2s 0.3s backwards; }
.project__hero img { width: 100%; height: auto; }
.project__hero.is-portrait { display: flex; justify-content: center; background: var(--raised); padding-block: clamp(32px, 5vw, 72px); }
.project__hero.is-portrait img { width: min(520px, 80%); }

/* Story — sticky section index on the left, text that lights up as you read on the right */
.project__story {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  padding-block: clamp(72px, 9vw, 140px);
}
.story__nav {
  position: sticky;
  top: 112px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.story__nav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.story__nav a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: rgba(232, 231, 247, 0.32);
  transition: color 0.4s var(--ease), transform 0.5s var(--ease);
}
.story__nav a .mono { font-size: 11px; color: inherit; }
.story__nav a::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background-color 0.4s, border-color 0.4s, transform 0.4s var(--ease);
}
.story__nav a:hover { color: var(--lavender); }
.story__nav a.is-active { color: var(--lavender); transform: translateX(6px); }
.story__nav a.is-active::before { background: var(--yellow); border-color: var(--yellow); transform: scale(1.25); }
.story__progress { width: 100%; max-width: 240px; height: 2px; background: var(--rule); overflow: hidden; }
.story__progress span { display: block; height: 100%; background: var(--yellow); transform: scaleX(var(--sp, 0)); transform-origin: left; }

.story__body { grid-column: span 2; display: flex; flex-direction: column; }
.story__sec {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-block: clamp(48px, 6vw, 88px);
  border-top: 1px solid var(--rule);
  scroll-margin-top: 96px;
}
.story__sec:first-child { padding-top: 0; border-top: 0; }
.story__sec .label { transition: color 0.4s; }
.story__sec.is-active .label { color: var(--yellow); }
.story__text {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 48px);
  line-height: 1.16;
  letter-spacing: -0.025em;
  max-width: 20em;
}
.js .story__text .w { opacity: 0.16; transition: opacity 0.35s; }
.js .story__text .w.is-lit { opacity: 1; }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.fact { display: flex; flex-direction: column; gap: 18px; padding: 28px; border: 1px solid var(--rule); }
.fact--role { background: var(--raised); }
.fact__big { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 2.8vw, 44px); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; }
.fact__tags { display: flex; flex-wrap: wrap; gap: 18px; margin-top: auto; }
.fact__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fact__chips li { padding: 8px 12px; border: 1px solid var(--rule); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }

.credits-wrap { display: flex; flex-direction: column; gap: 18px; padding-top: 12px; }
.credits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--rule); }
.credit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 16px 18px 0;
  border-bottom: 1px solid var(--rule);
}
.credit dt { color: var(--muted); }
.credit dd { margin: 0; font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; }
.credit--us dt { color: var(--lavender); }
.js .credit { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.js .credits.is-in .credit { opacity: 1; transform: none; }

.project__gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); padding-bottom: clamp(80px, 9vw, 140px); }
.project__gallery figure { margin: 0; grid-column: span 2; background: var(--raised); overflow: hidden; }
.project__gallery figure.is-wide { grid-column: 1 / -1; }
.project__gallery figure.is-half { grid-column: span 3; }
.project__gallery img { width: 100%; height: auto; transition: transform 1.2s var(--ease); }
.project__gallery figure:hover img { transform: scale(1.02); }

/* Production hero — letterboxed, graded, with a running timecode */
.phero {
  position: relative;
  display: flex;
  align-items: center;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: #000;
  --bar: clamp(56px, 11vh, 120px);
}
.phero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: whero-in 2s var(--ease) both; }
.phero__shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.55) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 65%); }
.phero__bar {
  position: absolute;
  left: 0; right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--bar);
  padding-inline: var(--pad);
  background: #000;
  animation: bar-in 1.4s 0.2s var(--ease) both;
}
.phero__bar--top { top: 0; height: calc(var(--nav-h) + 36px); align-items: flex-end; padding-bottom: 14px; transform-origin: top; }
.phero__bar--bottom { bottom: 0; align-items: flex-start; padding-top: 16px; transform-origin: bottom; }
@keyframes bar-in { from { transform: scaleY(0); } }
.phero__bar .mono { color: var(--muted); }
.phero__tc { color: var(--lavender) !important; font-variant-numeric: tabular-nums; }
.phero__tc::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--pink); vertical-align: 1px; animation: rec 1.6s steps(2) infinite; }
@keyframes rec { 50% { opacity: 0.2; } }
.phero__now span:last-child { color: var(--lavender); transition: color 0.3s; }
.phero__now:hover span:last-child { color: var(--yellow); }
.phero__content { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 40px; }
.phero__title { font-size: clamp(64px, 13vw, 240px); line-height: 0.84; }
.phero__lede { max-width: 440px; color: rgba(232, 231, 247, 0.8); }
.films { scroll-margin-top: 96px; padding-top: clamp(64px, 7vw, 112px); }
@media (max-width: 760px) {
  .phero__title { font-size: 15.5vw; }
  .phero__bar--top .mono:first-child { display: none; }
  .phero__bar--top { justify-content: flex-end; }
}

/* Films */
.project__hero.is-film { background: none; }
.player { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.player iframe,
.player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.gallery-head { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--rule); }
.gallery-head:not(:first-child) { margin-top: 48px; }
.gallery-head__link:hover { color: var(--yellow); }
.pn-split.is-single .pn--prev { display: none; }

.films { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px var(--gap); padding-bottom: clamp(96px, 11vw, 160px); }
.film { display: flex; flex-direction: column; gap: 20px; }
.film--feature { grid-column: 1 / -1; }
.film__cover { height: auto; aspect-ratio: 16 / 9; background: #000; }
.film--feature .film__cover { aspect-ratio: 21 / 9; }
.film__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 14, 14, 0) 55%, rgba(15, 14, 14, 0.6) 100%); pointer-events: none; }
.film__play {
  position: absolute;
  z-index: 1;
  left: 50%; top: 50%;
  display: grid;
  place-items: center;
  width: clamp(64px, 6vw, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--black);
  transform: translate(-50%, -50%) scale(0.9);
  transition: transform 0.6s var(--ease), background-color 0.3s;
}
.film__play svg { width: 34%; height: auto; margin-left: 6%; }
.film:hover .film__play { transform: translate(-50%, -50%) scale(1.08); background: var(--lavender); }
.film__dur { position: absolute; z-index: 1; right: 16px; bottom: 14px; padding: 4px 8px; background: rgba(15, 14, 14, 0.75); }

/* Previous / next — a split, like the hero: the side you're on opens up */
.pn-split { display: flex; height: clamp(360px, 40vw, 600px); border-top: 1px solid var(--rule); overflow: hidden; }
.pn {
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 32px var(--pad);
  overflow: hidden;
  transition: flex-grow 0.8s var(--ease);
}
.pn + .pn { border-left: 1px solid var(--rule); }
.pn--next { align-items: flex-end; text-align: right; }
.pn__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.4);
  transform: scale(1.08);
  transition: filter 0.8s var(--ease), transform 1.4s var(--ease);
}
.pn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15, 14, 14, 0.55) 0%, rgba(15, 14, 14, 0.1) 45%, rgba(15, 14, 14, 0.85) 100%); }
.pn::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease);
}
.pn--next::before { transform-origin: right; }
.pn[data-lead="a"]::before { background: var(--pink); }
.pn[data-lead="b"]::before { background: var(--purple); }
.pn__label { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); transition: color 0.3s; }
.pn__arrow { display: inline-block; transition: transform 0.5s var(--ease); }
.pn__info { display: flex; flex-direction: column; gap: 14px; }
.pn--next .pn__info { align-items: flex-end; }
.pn__client {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 5.5vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.pn__title { color: rgba(232, 231, 247, 0.7); }
.pn-split:hover .pn:hover { flex-grow: 1.7; }
.pn:hover .pn__img,
.pn:focus-visible .pn__img { filter: none; transform: scale(1); }
.pn:hover::before,
.pn:focus-visible::before { transform: scaleX(1); }
.pn:hover .pn__label { color: var(--lavender); }
.pn--prev:hover .pn__arrow { transform: translateX(-6px); }
.pn--next:hover .pn__arrow { transform: translateX(6px); }
.pn-split:hover .pn:not(:hover) .pn__client { opacity: 0.5; }
.pn__client { transition: opacity 0.5s; }

/* ==========================================================================
   About page
   ========================================================================== */
.about-intro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); padding-bottom: clamp(64px, 8vw, 120px); }
.about-intro .manifesto__text { grid-column: 2 / span 2; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); padding-bottom: clamp(96px, 11vw, 160px); }
.stat { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 1px solid var(--rule); }
.stat strong { font-family: var(--display); font-weight: 700; font-size: clamp(56px, 6.7vw, 112px); line-height: 0.9; letter-spacing: -0.04em; }
.stat strong span { color: var(--yellow); }

.bios { display: flex; flex-direction: column; gap: 64px; padding-bottom: clamp(96px, 11vw, 160px); scroll-margin-top: 72px; }
.bios__split { position: relative; container-type: inline-size; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.bio { display: flex; flex-direction: column; gap: 28px; }
.bio .twin__portrait { aspect-ratio: 4 / 5; }
.bio__name { font-family: var(--display); font-weight: 700; font-size: clamp(48px, 6.7vw, 112px); line-height: 0.88; letter-spacing: -0.045em; }
.bio__role { color: var(--muted); }
.bio__text { font-size: 18px; max-width: 34em; }
.bio__links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.bio__links a { text-decoration: underline; text-underline-offset: 3px; }
.bio__links a:hover { color: var(--yellow); }
.bios__split .twins__badge { top: calc((100cqw - var(--gap)) / 2 * 1.25 / 2); }

.journey { padding-bottom: clamp(96px, 11vw, 160px); }
.journey__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 56px; }
.tl { position: relative; --tl: 0; }
.tl::before,
.tl::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule);
}
.tl::after { width: 2px; margin-left: -0.5px; background: var(--yellow); transform: scaleY(var(--tl)); transform-origin: top; }
.tl__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1fr);
  align-items: center;
  padding: 28px 0;
}
.tl__year {
  position: relative;
  z-index: 1;
  justify-self: center;
  padding: 6px 10px;
  background: var(--black);
  border: 1px solid var(--rule);
  color: var(--lavender);
  white-space: nowrap;
}
.tl__row--both .tl__year { background: var(--yellow); border-color: var(--yellow); color: var(--black); }
.tl__cell { display: flex; flex-direction: column; gap: 8px; }
.tl__cell--a { text-align: right; align-items: flex-end; padding-right: 8px; }
.tl__cell--b { padding-left: 8px; }
.tl__row--both .tl__cell--a { grid-column: 1; }
.tl__co { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.6vw, 40px); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; }
.tl__cell .mono { color: var(--muted); }
.tl__row { opacity: 0.35; transition: opacity 0.6s var(--ease); }
.tl__row.is-in { opacity: 1; }

.clients { padding-bottom: clamp(96px, 11vw, 160px); }
.clients__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 48px; }
.clients > .rule + .clients__head { padding-top: 32px; }

/* Client logos: rows drifting in opposite directions, faded at the edges */
.logos {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vw, 16px);
  padding-block: clamp(24px, 3vw, 40px);
  border-block: 1px solid var(--rule);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos__row { overflow: hidden; }
.logos__track { display: flex; width: max-content; animation: logos-x var(--t, 40s) linear infinite; }
.logos__row--rev .logos__track { animation-direction: reverse; }
.logos__row:hover .logos__track { animation-play-state: paused; }
@keyframes logos-x { to { transform: translateX(-50%); } }
.logos__set { display: flex; align-items: center; }
.logos__set li { display: flex; }
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(76px, 7.5vw, 112px);
  padding-inline: clamp(24px, 3.2vw, 52px);
}
.logo img {
  width: auto;
  height: auto;
  max-width: clamp(120px, 13vw, 200px);
  max-height: clamp(30px, 3.2vw, 48px);
  object-fit: contain;
  opacity: 0.6;
  transition: opacity 0.3s, transform 0.5s var(--ease);
}
.logo__word {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(16px, 1.5vw, 22px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.6;
  transition: opacity 0.3s;
}
.logo:hover img,
.logo:hover .logo__word { opacity: 1; }
a.logo:hover img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .logos__track { animation: none; width: auto; }
  .logos__set { flex-wrap: wrap; justify-content: center; }
  .logos__set[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .nav__links { gap: 28px; }
  .footer__links { gap: 24px; }
}

@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .caps__inner,
  .contact__row { grid-template-columns: 1fr; gap: 56px; }
  .caps__list,
  .form { grid-column: auto; }
  .footer__bar { grid-template-columns: 1fr; justify-items: start; }
  .footer__top { justify-self: start; }
}

@media (max-width: 760px) {
  :root { --nav-h: 68px; }
  .nav.is-scrolled { height: 60px; }
  .nav__brand img { width: 36px; height: 24px; }
  .nav__name { font-size: 16px; }
  .nav__cta { display: none; }

  /* Hero: portrait layout with tap-to-switch */
  .hero { height: max(640px, 100vh); height: max(640px, 100svh); }
  .hero__panel--a .hero__art { left: -86cqw; top: calc(var(--nav-h) + 40px); }
  .hero__panel--b .hero__art { left: -84cqw; top: calc(var(--nav-h) + 90px); }
  .hero__art { width: 240cqw; }
  .hero__art {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
    mask-image: linear-gradient(180deg, transparent 0, #000 22%);
  }
  .hero[data-active="a"] .hero__panel--a .hero__art { transform: translateY(-4%) scale(1.12); }
  .hero[data-active="b"] .hero__panel--b .hero__art { transform: translate(-8cqw, -10%) scale(1.12); }
  .hero[data-active="a"] .hero__panel--b .hero__art,
  .hero[data-active="b"] .hero__panel--a .hero__art { transform: none; }

  .hero__fade,
  .hero[data-active="a"] .hero__fade,
  .hero[data-active="b"] .hero__fade { height: 58%; }
  .hero__line--top,
  .hero[data-active="a"] .hero__line--top,
  .hero[data-active="b"] .hero__line--top { height: calc(var(--nav-h) + 72px); }
  .hero__line--bottom,
  .hero[data-active="a"] .hero__line--bottom,
  .hero[data-active="b"] .hero__line--bottom { top: calc(var(--nav-h) + 160px); bottom: 56px; }
  .hero__logo,
  .hero[data-active="a"] .hero__logo,
  .hero[data-active="b"] .hero__logo { width: 92px; top: calc(var(--nav-h) + 86px); }
  .hero__lockup { display: none; }
  .hero__eyebrow { top: calc(var(--nav-h) + 14px); font-size: 10px; }

  .hero__intro {
    left: var(--pad); right: var(--pad);
    bottom: 92px;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 15.5cqw;
  }
  .hero__intro-a,
  .hero__intro-b { position: static; }
  .hero__intro-b { align-self: flex-end; }
  .hero__connector { position: static; width: 34%; height: 3px; align-self: center; }

  .hero__reveal { bottom: 88px; left: var(--pad); right: var(--pad); text-align: left; }
  .hero__reveal--b { text-align: right; }
  .hero__title { font-size: 21cqw; margin-bottom: 18px; }
  .hero__row,
  .hero__reveal--b .hero__row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero__reveal--b .hero__row { align-items: flex-end; flex-direction: column-reverse; }
  .hero__desc { width: auto; max-width: 300px; font-size: 15px; }
  .hero__reveal--b .hero__desc { text-align: right; }
  .hero__ghost { display: none; }
  .hero__hint,
  .hero[data-active="a"] .hero__hint,
  .hero[data-active="b"] .hero__hint { display: none; }
  /* The meta bar becomes the tap-to-switch bar */
  .hero__meta { display: none; }
  .hero .hero__switch,
  .hero .hero__switch:not(:focus-within) {
    left: 0; right: 0; bottom: 0;
    width: auto; height: 56px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    clip-path: none;
    overflow: visible;
    border: 0;
    border-top: 1px solid var(--rule);
    background: var(--black);
    transform: none;
  }
  .hero__switch button { justify-content: center; white-space: nowrap; }
  .hero__switch button + button { border-left: 1px solid var(--rule); }

  .marquee { height: 64px; }
  .marquee__track span { font-size: 22px; }

  .manifesto__statement { grid-template-columns: 1fr; gap: 28px; }
  .manifesto__text { grid-column: auto; }
  .pillars { grid-template-columns: 1fr; gap: 48px; }

  .work__head { flex-direction: column; align-items: flex-start; }
  .work__filters { flex-direction: column; align-items: flex-start; }
  .work__grid { grid-template-columns: 1fr; gap: 48px; padding-top: 32px; }
  .card--wide,
  .work__grid > .card,
  .work__grid > .card--wide,
  .work__grid > .card--half,
  .work__grid > .card--full { grid-column: auto; }
  .card__cover { height: auto; aspect-ratio: 880 / 560; }
  .card:not(.card--wide) .card__cover { aspect-ratio: 440 / 460; }
  .work__grid > .card--half .card__cover,
  .work__grid > .card--full .card__cover { aspect-ratio: 16 / 9; }
  .card__name { font-size: 22px; }

  .service { gap: 16px; padding-block: 20px; flex-wrap: wrap; }
  .service__lead { margin-left: 0; width: 100%; padding-left: 34px; }
  .service__arrow { display: none; }

  .twins__head { flex-direction: column; align-items: flex-start; }
  .twins__split { grid-template-columns: 1fr; gap: 64px; }
  .twins__badge { display: none; }
  .twins__split:has(.twin:hover) .twin:not(:hover) { opacity: 1; }
  .twin__info { flex-direction: column; }
  .twin__role { width: auto; }
  .twin__bio { font-size: 16px; }

  .form__actions { flex-direction: column; align-items: stretch; }
  .btn--lg { justify-content: center; font-size: 14px; }
  .need legend { width: 100%; margin-bottom: 8px; }

  .btn--xl { font-size: 13px; padding: 16px 20px; gap: 12px; }
  .meet > img { width: 110px; height: auto; }

  .footer__links { flex-wrap: wrap; gap: 16px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* Inner pages — responsive */
@media (max-width: 960px) {
  .project__head { grid-template-columns: 1fr; }
  .project__desc { grid-column: auto; }
  .project__story { grid-template-columns: 1fr; }
  .story__nav { display: none; }
  .story__body { grid-column: auto; }
  .credits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-intro { grid-template-columns: 1fr; }
  .about-intro .manifesto__text { grid-column: auto; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .wfilter { top: 60px; }
  .gal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gal__grid--kv { grid-template-columns: 1fr; gap: 12px; }
  .tile__cap { display: none; }
  .lb { padding: 64px 0 72px; }
  .lb__nav { top: auto; bottom: 14px; margin-top: 0; width: 44px; height: 44px; }
  .lb__cap { flex-direction: column; align-items: center; gap: 4px; padding-inline: 70px; text-align: center; }
  .whero__row { flex-direction: column; align-items: flex-start; }
  .whero__now { align-items: flex-start; text-align: left; min-width: 0; width: 100%; }
  .whero__title { font-size: 21vw; }
  .meet__title { font-size: 12vw; }
  .films { grid-template-columns: 1fr; gap: 48px; }
  .film--feature .film__cover { aspect-ratio: 16 / 9; }
  .works__note { display: none; }
  .project__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .project__gallery figure { grid-column: span 1; }
  .project__gallery figure.is-wide,
  .project__gallery figure.is-half { grid-column: 1 / -1; }
  .facts { grid-template-columns: 1fr; }
  .fact { padding: 22px; }
  .pn-split { flex-direction: column; height: auto; }
  .pn { min-height: 260px; }
  .pn + .pn { border-left: 0; border-top: 1px solid var(--rule); }
  .pn--next { align-items: flex-start; text-align: left; }
  .pn--next .pn__info { align-items: flex-start; }
  .page-head__row,
  .journey__head,
  .clients__head { flex-direction: column; align-items: flex-start; }
  .logo { height: 64px; padding-inline: 22px; }
  .logo img { max-width: 112px; max-height: 26px; }
  .logo__word { font-size: 14px; }
  .bios__split { grid-template-columns: 1fr; gap: 72px; }
  .bios__split .twins__badge { display: none; }
  .tl::before, .tl::after { left: 14px; }
  .tl__row { grid-template-columns: 1fr; gap: 10px; padding: 20px 0 20px 40px; }
  .tl__year { justify-self: start; }
  .tl__cell--a, .tl__cell--b { text-align: left; align-items: flex-start; padding: 0; }
  .tl__cell:empty { display: none; }
}
@media (hover: none) {
  .pn__img { filter: brightness(0.5); transform: none; }
}