/* Conte House — site styles */

/* Fonts are self-hosted (faster, and no visitor data sent to Google). */
@font-face { font-family: 'Anybody'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 50% 150%;
  src: url(/assets/fonts/anybody-latin-standard-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Anybody'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 50% 150%;
  src: url(/assets/fonts/anybody-latin-ext-standard-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/assets/fonts/inter-tight-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/assets/fonts/inter-tight-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2'); }

:root {
  --ink: #0B0B0A; --ink-2: #070706; --raise: #141412;
  --paper: #EDE9E1; --mid: #C9C5BC; --dim: #9A968C; --rule: #2A2925; --rule-2: #3A3934;
  --blue: #1B3BB3; --blue-ink: #EEF1FF; --blue-dim: #C9D3FF;
  --accent: #7C9DFF; --gold: #C9A55C; --amber: #D9A441;
  --display: 'Anybody', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 3.4vw, 48px);
  --max: 1440px;
  --shutter: cubic-bezier(.7, 0, .2, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 400 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
img, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--blue); color: var(--blue-ink); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 9vw, 120px); }
.block { margin-top: clamp(64px, 8vw, 104px); display: flex; flex-direction: column; gap: 24px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--paper); color: var(--ink); padding: 10px 14px; }
.skip:focus { left: 8px; }

/* Type */
.h-display { font-family: var(--display); font-stretch: 150%; font-weight: 600; text-transform: uppercase; letter-spacing: -0.005em; margin: 0; line-height: .9; }
.h1 { font-size: clamp(44px, 7vw, 104px); }
.h1[style*="--w"] { font-size: min(clamp(44px, 7vw, 104px), calc((100vw - 2 * var(--gutter, 20px)) / var(--w) / 1.02)); }
.h2 { font-size: clamp(36px, 5vw, 72px); }
.h3 { font-size: clamp(26px, 3vw, 40px); }
.h-display sup { font-family: var(--mono); font-weight: 400; font-size: 13px; letter-spacing: .04em; vertical-align: top; margin-left: 10px; color: var(--dim); text-transform: none; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.dim { color: var(--dim); }
.accent { color: var(--accent); }
.gold { color: var(--gold); }
.lede { margin: 0; max-width: 640px; font-size: clamp(17px, 1.5vw, 20px); font-weight: 300; line-height: 1.5; color: var(--mid); }
.lede.big { font-size: clamp(20px, 2.2vw, 30px); color: var(--paper); max-width: 900px; }
.tagline { font-family: var(--display); font-stretch: 150%; font-weight: 400; letter-spacing: .34em; text-transform: uppercase; font-size: 11px; }
.client { font-family: var(--display); font-stretch: 150%; font-weight: 600; font-size: 12px; text-transform: uppercase; }
.title { font-family: var(--display); font-stretch: 125%; font-weight: 300; text-transform: uppercase; line-height: 1.05; }
.meta { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.link { padding: 12px 0; display: inline-block; }
.live-dot { display: inline-flex; align-items: center; gap: 10px; }
.live-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.focus-in { animation: focusIn .9s var(--shutter) both; }
@keyframes focusIn { from { filter: blur(14px); opacity: .3; } to { filter: blur(0); opacity: 1; } }

/* Logo: CONT/HOUS + three lines each. Words are trimmed to cap height so the
   lines run exactly from cap top to baseline. */
.logo { display: inline-grid; grid-template-columns: auto auto; column-gap: .08em; row-gap: .2em; font-family: var(--display); font-stretch: 150%; font-weight: 600; line-height: 1; color: inherit; }
.logo__w { display: block; text-box: trim-both cap alphabetic; }
.logo__bars { display: flex; flex-direction: column; justify-content: space-between; width: .95em; }
.logo__bars i { display: block; height: .13em; background: currentColor; transform-origin: left center; }
.logo--live .logo__bars i { animation: bar 6s var(--shutter) infinite; }
.logo--live .logo__bars:nth-of-type(2) i:nth-child(1) { animation-delay: .07s; }
.logo--live .logo__bars:nth-of-type(2) i:nth-child(2) { animation-delay: .14s; }
.logo--live .logo__bars:nth-of-type(2) i:nth-child(3) { animation-delay: .21s; }
.logo--live .logo__bars:nth-of-type(4) i:nth-child(1) { animation-delay: .28s; }
.logo--live .logo__bars:nth-of-type(4) i:nth-child(2) { animation-delay: .35s; }
.logo--live .logo__bars:nth-of-type(4) i:nth-child(3) { animation-delay: .42s; }
@keyframes bar { 0%, 70%, 100% { transform: scaleX(1); } 78% { transform: scaleX(.12); } 88% { transform: scaleX(1); } }

/* Header */
.hdr { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px var(--gutter); background: linear-gradient(var(--ink) 40%, transparent); }
.hdr--over { position: fixed; left: 0; right: 0; background: none; }
.hdr__logo { font-size: 17px; padding: 8px 0; }
.hdr__menu { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; font-family: var(--display); font-stretch: 150%; font-weight: 600; font-size: 14px; text-transform: uppercase; }
.hdr__menu span { font-family: var(--body); font-weight: 300; font-size: 22px; }
.hdr__menu:hover { color: var(--accent); }
.tally { margin-left: auto; display: none; align-items: center; gap: 6px; font: 500 10px var(--mono); letter-spacing: .1em; color: var(--accent); }
.tally i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s infinite; }
body.is-rolling .tally { display: inline-flex; }

/* Frames, slates */
.frame { position: relative; display: block; width: 100%; overflow: hidden; background: repeating-linear-gradient(135deg, #191816 0 14px, #1E1D1A 14px 15px); }
.frame > img, .frame > video, .frame > picture, .frame > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame__vid { opacity: 0; transition: opacity .6s; }
.frame__vid.is-on { opacity: 1; }
.slate { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 14px 16px; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.slate span:first-child { color: var(--mid); }

/* Hero */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; }
.hero__media { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #191816 0 14px, #1E1D1A 14px 15px); }
.hero__media picture, .hero__media img, .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 10, .55), rgba(11, 11, 10, .45) 45%, rgba(11, 11, 10, .8)); }
.hero__vid { animation: focusIn 1.2s var(--shutter) both; }
.hero__c { position: absolute; inset: 0 0 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; text-align: center; padding: 0 var(--gutter); z-index: 1; }
.hero__h { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .5em; font-size: clamp(48px, 8vw, 124px); font-weight: 400; }
.hero__h .tagline { font-size: max(11px, .13em); }
.hero__mk { margin: 0; }
@media (max-width: 560px) { .hero__mk { font-size: 10px; letter-spacing: .06em; } .hero__mk span { display: none; } }
.hero__pause { position: absolute; right: var(--gutter); bottom: 158px; z-index: 2; min-height: 44px; padding: 0 14px; background: rgba(11, 11, 10, .5); border: 1px solid var(--rule-2); cursor: pointer; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.strip { position: absolute; left: 0; right: 0; bottom: 48px; z-index: 1; background: rgba(11, 11, 10, .55); overflow: hidden; }
.strip__track { display: flex; width: max-content; animation: marquee 160s linear infinite; }
.strip:hover .strip__track { animation-play-state: paused; }
.strip__item { display: flex; align-items: center; gap: 16px; padding: 14px 36px 14px 24px; }
.strip__item > span:last-child { display: flex; flex-direction: column; gap: 7px; }
.strip__item .title { font-size: 18px; white-space: nowrap; color: var(--mid); }
.strip__frame { width: 116px; height: 66px; flex: none; }
.strip__frame .slate { padding: 6px; font-size: 8px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Clients */
.clients { border-bottom: 1px solid var(--rule); padding: 22px 0 40px; overflow: hidden; }
.clients__k { margin: 0 0 22px; padding-inline: var(--gutter); color: var(--dim); }
.clients:hover .clients__track { animation-play-state: paused; }
/* Hovered (or touched) strips stop and can be dragged or scrolled sideways. */
.is-held { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.is-held img { -webkit-user-drag: none; }
.is-dragging { cursor: grabbing; }
.is-dragging a { pointer-events: none; }
.clients__track { display: flex; width: max-content; gap: 72px; align-items: center; animation: marquee 70s linear infinite reverse; padding-left: var(--gutter); }
/* The logo strip runs left to right, against the project strip above it. */
.clients__c { font-family: var(--display); font-stretch: 150%; font-weight: 600; font-size: 22px; text-transform: uppercase; color: #8F8B82; white-space: nowrap; }
.clients__c { display: flex; align-items: center; }
.clients__c img { display: block; opacity: .78; }
@media (max-width: 700px) { .clients__c img { zoom: .8; } }

/* Tiles */
.featured { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 32px; }
.tile { display: flex; flex-direction: column; gap: 18px; }
.tile--big, .featured .tile:last-child:nth-child(even) { grid-column: 1 / -1; }
.tile--big .tile__cap { flex-direction: row; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px 24px; }
.featured .tile:last-child:nth-child(even) .frame { aspect-ratio: 21 / 9 !important; }
.tile__cap { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.tile__l { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.tile__l .n { font: 12px var(--mono); color: var(--dim); }
.tile .title { font-size: clamp(22px, 2.2vw, 28px); }
.tile--big .title { font-size: clamp(26px, 2.8vw, 34px); }
.tile:hover .title { color: var(--accent); }

/* Bands, stats, cards */
.band { border-block: 1px solid var(--rule); padding: 72px 0; }
.stats { display: flex; flex-wrap: wrap; gap: 40px; }
.stats--rule { border-block: 1px solid var(--rule); padding: 36px 0; margin-top: 56px; }
.stat { flex: 1 1 240px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.stat__v { font-family: var(--display); font-stretch: 125%; font-weight: 600; font-size: clamp(40px, 4.4vw, 64px); line-height: .95; }
.stat__l { font-size: 15px; color: var(--mid); }
.stat__l.mono { font-size: 11px; color: var(--dim); }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 32px; }
.card { display: flex; flex-direction: column; gap: 20px; }
.card__t { font-family: var(--display); font-stretch: 125%; font-weight: 300; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.05; text-transform: uppercase; }
.card__d { color: var(--mid); max-width: 540px; }
.card--wide { grid-column: 1 / -1; }
.card--wide .frame { aspect-ratio: 21 / 9 !important; }

/* Footer */
.ftr { border-top: 1px solid var(--rule); }
.ftr__in { padding-top: 28px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 56px; }
/* "Start a project": a camera monitor. A darkened loop behind, HUD in the
   corners, and the line pulls focus (AF brackets close in, blur clears)
   when it scrolls into view. */
.ftr__cta { position: relative; overflow: hidden; background: #070706; border-bottom: 1px solid var(--rule); }
.ftr__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ftr__bg.is-on { opacity: .34; }
.ftr__cta::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7, 7, 6, .55), rgba(7, 7, 6, .15) 45%, rgba(7, 7, 6, .75)), repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); }
.ftr__stage { position: relative; z-index: 1; min-height: clamp(380px, 58vh, 620px); display: flex; flex-direction: column; justify-content: center; padding-block: 88px; }
.hud { position: absolute; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mid); display: inline-flex; align-items: center; gap: 8px; }
.hud--tl { top: 28px; left: var(--gutter); } .hud--tr { top: 28px; right: var(--gutter); }
.hud--bl { bottom: 28px; left: var(--gutter); } .hud--br { bottom: 28px; right: var(--gutter); }
.hud b { font-weight: 500; color: var(--amber); }
.ftr__cta.is-locked .hud b { color: var(--accent); }
.hud__rec { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s infinite; }
.ftr__ask { position: relative; }
.ftr__focus { display: inline-block; transition: color .25s, filter .7s var(--shutter) .45s, opacity .7s var(--shutter) .45s; }
.ftr__cta:not(.is-locked) .ftr__focus { filter: blur(10px); opacity: .55; }
.ftr__af { position: absolute; inset: -18px -26px; pointer-events: none; transform: scale(1.18); opacity: 0; transition: transform .5s var(--shutter), opacity .3s; }
.ftr__af i { position: absolute; width: 26px; height: 26px; border: 0 solid var(--paper); }
.ftr__af i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; } .ftr__af i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.ftr__af i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; } .ftr__af i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.ftr__cta.is-hunting .ftr__af { opacity: 1; }
.ftr__cta.is-locked .ftr__af { opacity: 1; transform: scale(1); }
.ftr__cta.is-locked .ftr__af i { border-color: var(--accent); }
.ftr__go { display: inline-block; position: relative; color: inherit; }
.ftr__go:hover .ftr__focus, .ftr__go:focus-visible .ftr__focus { color: var(--accent); }
.ftr__mail { transition: color .2s, border-color .2s; }
.ftr__mail:hover { border-color: var(--accent); }
@media (max-width: 700px) { .hud--tr, .hud--br { display: none; } .ftr__stage { padding-block: 72px; } .ftr__af { inset: -12px -8px; } .ftr__af i { width: 18px; height: 18px; } }
.ftr__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.ftr__ask { margin: 0; font-family: var(--display); font-stretch: 150%; font-weight: 600; text-transform: uppercase; font-size: clamp(40px, 6vw, 92px); line-height: .92; }
.ftr__mail { font-size: clamp(18px, 1.6vw, 22px); font-weight: 300; padding: 10px 0; border-bottom: 1px solid #5E5B53; }
.ftr__row { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--rule); font: 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ftr__links { display: flex; gap: 28px; flex-wrap: wrap; }
.ftr__links a { padding: 12px 0; }
.ftr__legal { color: var(--dim); }

/* Menu */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--blue); color: var(--blue-ink); display: flex; flex-direction: column; padding: 22px clamp(16px, 3vw, 40px) 26px; overflow-y: auto; }
.menu a:hover { color: inherit; }
.menu__top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
.menu__logo { justify-self: center; font-size: 20px; padding: 8px 0; }
.menu__close { justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; background: none; border: 0; cursor: pointer; font-family: var(--display); font-stretch: 150%; font-weight: 600; font-size: 14px; text-transform: uppercase; }
.menu__close span { font-family: var(--body); font-weight: 300; font-size: 22px; }
.menu__body { flex: 1; display: flex; gap: 48px; flex-wrap: wrap; align-items: center; margin-top: 28px; }
.menu__nav { flex: 3 1 640px; min-width: 0; border-top: 1px solid rgba(238, 241, 255, .3); }
.menu__row { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); padding: 10px clamp(10px, 1.5vw, 20px); border-bottom: 1px solid rgba(238, 241, 255, .3); transition: background .25s var(--shutter), color .25s var(--shutter); }
.menu__row.is-active, .menu__row.is-active:hover, .menu__row:focus-visible { background: var(--blue-ink); color: var(--blue); outline: none; }
.menu__n { width: 28px; font: 12px var(--mono); }
.menu__label { font-family: var(--display); font-stretch: 150%; font-weight: 600; text-transform: uppercase; font-size: clamp(28px, 4vw, 58px); line-height: 1.04; }
.menu__count { margin-left: auto; font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.menu__preview { flex: 2 1 340px; display: flex; flex-direction: column; gap: 18px; }
.menu__frame { position: relative; display: block; aspect-ratio: 16 / 10; background: repeating-linear-gradient(135deg, #2244C2 0 12px, #2649C9 12px 13px); overflow: hidden; }
.menu__frame video { opacity: 0; transition: opacity .35s; }
.menu__frame video.is-on { opacity: 1; }
.menu__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.menu__blurb { margin: 0; font-family: var(--display); font-stretch: 125%; font-weight: 300; font-size: clamp(20px, 2vw, 28px); line-height: 1.2; }
.menu__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 22px; font: 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.menu__links { display: flex; gap: 24px; flex-wrap: wrap; }
.menu__links a { padding: 12px 0; }
@media (max-width: 720px) { .menu__preview { display: none; } .menu__top > span:first-child { display: none; } .menu__top { grid-template-columns: 1fr auto; } .menu__logo { justify-self: start; } }

/* Six-bar wipe (page changes + menu) */
.wipe { position: fixed; inset: 0; z-index: 80; pointer-events: none; display: flex; flex-direction: column; }
.wipe i { flex: 1; background: var(--ink); transform: scaleX(0); transform-origin: left center; }
.wipe.is-in i { animation: wipeIn .36s var(--shutter) forwards; }
.wipe.is-out i { transform: scaleX(1); animation: wipeOut .42s var(--shutter) forwards; }
.wipe.is-blue i { background: var(--blue); }
.wipe i:nth-child(2) { animation-delay: .04s !important; } .wipe i:nth-child(3) { animation-delay: .08s !important; }
.wipe i:nth-child(4) { animation-delay: .12s !important; } .wipe i:nth-child(5) { animation-delay: .16s !important; }
.wipe i:nth-child(6) { animation-delay: .2s !important; }
@keyframes wipeIn { to { transform: scaleX(1); } }
@keyframes wipeOut { from { transform: scaleX(1); transform-origin: right center; } to { transform: scaleX(0); transform-origin: right center; } }

/* Intro */
.intro { position: fixed; inset: 0; z-index: 90; background: var(--blue); color: #EAF0FF; display: grid; place-items: center; overflow: hidden; transition: background .4s; }
.intro.is-dark { background: var(--ink-2); color: #D9D6CF; }
.intro__sketch { position: relative; width: min(820px, 86vw); aspect-ratio: 600 / 360; }
.intro__sk { position: absolute; inset: 0; opacity: 0; }
.intro__sk .sk { width: 100%; height: 100%; }
.intro__sk .sk__t { opacity: 0; transition: opacity .2s; }
.intro__sk.is-drawn .sk__t { opacity: 1; }
.intro__stack { position: absolute; inset: 0; pointer-events: none; }
.intro__stack i { position: absolute; display: block; background: currentColor; opacity: 0; }
.intro__logo { position: absolute; display: flex; flex-direction: column; align-items: center; gap: .9em; font-size: clamp(48px, 8vw, 120px); opacity: 0; }
.intro__logo .tagline { font-size: max(11px, .13em); opacity: 0; transition: opacity .4s; }
.intro__logo .logo__w { clip-path: inset(0 0 0 100%); transition: clip-path .5s var(--shutter); }
.intro.is-logo .intro__logo { opacity: 1; }
.intro.is-letters .logo__w { clip-path: inset(0 0 0 0); }
.intro.is-letters .tagline { opacity: 1; }
.intro__logo { z-index: 2; }
.intro__blinds { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.intro__blinds i { height: 0; background: #D9D6CF; }
.intro__skip { position: absolute; right: var(--gutter); bottom: 28px; min-height: 44px; padding: 0 14px; background: none; border: 1px solid currentColor; color: inherit; cursor: pointer; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }

/* Work */
.work-head { padding-top: 40px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--rule-2); background: transparent; cursor: pointer; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.chip span { font: 11px var(--mono); opacity: .7; }
.chip:hover { border-color: var(--paper); color: var(--paper); }
.chip.is-on { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.views { display: flex; gap: 8px; }
.views .chip { font: 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 760px) {
  /* Phones: one view only (the list), and smaller filter chips. */
  .views { display: none; }
  .chips { gap: 6px; }
  .chip { min-height: 34px; padding: 0 12px; font-size: 13px; gap: 6px; }
  .chip span { font-size: 10px; }
}
.count { margin: 24px 0 0; }
.spine { position: relative; padding: 48px 0 160px; }
.spine::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.spine__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 56px; }
/* Markers on the centre line: a tick, the year and the categories, on the
   side away from the title. They light up as the project scrolls past. */
.spine__item { position: relative; }
.spine__mark { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; gap: 4px; pointer-events: none; transform: translateY(-50%); }
.spine__mark i { position: absolute; left: -4px; top: 50%; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: var(--ink); border: 1px solid var(--rule-2); transition: background .3s, border-color .3s, transform .3s var(--shutter); }
.spine__mark b { font: 600 15px var(--display); font-stretch: 125%; letter-spacing: .02em; color: var(--dim); transition: color .3s; }
.spine__mark span { font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #6E6B63; white-space: nowrap; }
.spine__mark b, .spine__mark span { padding-left: 22px; }
.is-r .spine__mark { left: auto; right: 50%; align-items: flex-end; text-align: right; }
.is-r .spine__mark b, .is-r .spine__mark span { padding-left: 0; padding-right: 22px; }
.is-r .spine__mark i { left: auto; right: -5px; }
.spine__item.is-near .spine__mark i { background: var(--accent); border-color: var(--accent); transform: scale(1.3); }
.spine__item.is-near .spine__mark b { color: var(--paper); }
.spine__item.is-near .spine__mark span { color: var(--dim); }
@media (min-width: 761px) { .spine__tags { display: none; } }
.spine__item > a { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; min-height: 150px; }
.spine__txt { display: flex; flex-direction: column; gap: 6px; }
.spine__txt .title { font-size: clamp(20px, 2vw, 28px); color: #B9B5AC; transition: color .3s; }
.spine__item > a:hover .title { color: var(--paper); }
.spine__thumb { width: 100%; max-width: 300px; opacity: 0; transform: translateY(var(--drift, 0)); filter: blur(var(--mblur, 0)); transition: opacity .5s; }
.spine__item.is-near .spine__thumb { opacity: 1; }
.is-l .spine__txt { grid-column: 2; text-align: right; align-items: flex-end; padding-right: 32px; }
.is-l .spine__thumb { grid-column: 4; grid-row: 1; justify-self: end; margin-right: var(--gutter); }
.is-r .spine__txt { grid-column: 3; padding-left: 32px; }
.is-r .spine__thumb { grid-column: 1; grid-row: 1; margin-left: var(--gutter); }
.grid { list-style: none; margin: 40px 0 120px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 48px 32px; }
/* Projects grid: the tile under the cursor stays lit, the rest dim softly. */
@media (hover: hover) and (pointer: fine) {
  .grid .tile { transition: opacity .7s cubic-bezier(.25, .1, .25, 1), filter .7s cubic-bezier(.25, .1, .25, 1); }
  .grid:hover .tile { opacity: .38; filter: saturate(.5); }
  .grid .tile:hover, .grid .tile:focus-visible { opacity: 1; filter: none; transition-duration: .35s; }
}
@media (prefers-reduced-motion: reduce) { .grid .tile { transition: none; } }
@media (max-width: 760px) {
  .spine::before { left: var(--gutter); }
  .spine__mark { left: var(--gutter); right: auto !important; top: 22px; transform: none; }
  .spine__mark b, .spine__mark span { display: none; }
  .is-r .spine__mark i { left: -4px; right: auto; }
  .spine__item > a { grid-template-columns: 1fr; padding-left: calc(var(--gutter) + 20px); padding-right: var(--gutter); gap: 14px; }
  .is-l .spine__txt, .is-r .spine__txt { grid-column: 1; grid-row: 1; text-align: left; align-items: flex-start; padding: 0; }
  .is-l .spine__thumb, .is-r .spine__thumb { grid-column: 1; grid-row: 2; justify-self: start; margin: 0; opacity: 1; transform: none; filter: none; max-width: none; }
  .featured { grid-template-columns: 1fr; }
}

/* Project */
.project { padding-top: 48px; display: flex; flex-direction: column; gap: 56px; }
.project__head { display: flex; flex-direction: column; gap: 18px; }
.player { position: relative; aspect-ratio: 16 / 9; background: repeating-linear-gradient(135deg, #191816 0 14px, #1E1D1A 14px 15px); overflow: hidden; }
.player video, .player iframe, .player__poster { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; border: 0; }
.player__poster, .player > picture, .player > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player > video.frame__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player.is-playing .player__poster, .player.is-playing > picture { display: none; }
.player--tall { height: min(86svh, 1100px); width: auto; max-width: 100%; margin-inline: auto; }
.player--tall video { object-fit: contain; }
.player__tag { position: absolute; left: 16px; bottom: 14px; z-index: 2; padding: 6px 9px; background: rgba(11, 11, 10, .6); font-size: 10px; color: var(--mid); }
.player.is-playing .player__poster { display: none; }
.yt-link { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; margin: 22px 0 0; }
.player__play { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; border: 1px solid var(--paper); background: rgba(11, 11, 10, .5); cursor: pointer; display: grid; place-items: center; z-index: 2; }
.player__play svg { width: 22px; height: 26px; fill: var(--paper); margin-left: 4px; }
.player.is-playing .player__play { display: none; }
.player__iris { position: absolute; inset: 0; background: var(--ink); z-index: 3; pointer-events: none; clip-path: polygon(0 0, 0 0, 0 0); }
.orig-tag { display: inline-block; margin-right: 10px; padding: 3px 7px 2px; border: 1px solid var(--gold); color: var(--gold); font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; vertical-align: 1px; white-space: nowrap; }
.group__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; padding-top: 22px; border-top: 1px solid var(--rule); }
.filmrow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 28px 20px; align-items: flex-start; --rh: clamp(240px, 25vw, 360px); }
.reel-item { flex: 0 0 auto; width: min(100%, calc(var(--rh) * var(--r))); display: flex; flex-direction: column; gap: 10px; }
.reel-btn { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; }
.reel-btn .frame { width: 100%; }
.reel-btn__play { position: absolute; left: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--paper); background: rgba(11, 11, 10, .5); display: grid; place-items: center; opacity: .85; transition: opacity .2s, transform .2s; }
.reel-btn__play svg { width: 10px; height: 12px; fill: var(--paper); margin-left: 2px; }
.reel-btn:hover .reel-btn__play, .reel-btn:focus-visible .reel-btn__play { opacity: 1; transform: scale(1.08); }
.reel-item__t { font-family: var(--display); font-stretch: 125%; font-weight: 300; font-size: 15px; text-transform: uppercase; }
.filmbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100svh; }
.filmbox::backdrop { background: rgba(11, 11, 10, .94); }
.filmbox video { display: block; max-width: min(96vw, 1600px); max-height: 88svh; background: #000; }
.filmbox__frame { display: block; width: min(96vw, 1600px, calc(88svh * 16 / 9)); aspect-ratio: 16 / 9; border: 0; background: #000; }
.filmbox .lightbox__x { position: fixed; top: 18px; right: 18px; }
@media (max-width: 700px) {
  /* Phones: vertical films sit three to a row, so a show isn't a long scroll. */
  .filmrow { --rh: 420px; gap: 20px 8px; }
  .reel-item.is-v { width: calc((100% - 16px) / 3); gap: 6px; }
  .reel-item.is-sq { width: calc((100% - 8px) / 2); gap: 6px; }
  .reel-item.is-sq .reel-item__t { font-size: 12px; }
  .reel-item.is-v .reel-item__t { font-size: 10px; line-height: 1.25; }
  .reel-item.is-v .reel-btn__play { left: 6px; bottom: 6px; width: 26px; height: 26px; }
  .reel-item.is-v .reel-btn__play svg { width: 7px; height: 8px; }
}
.parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 28px 24px; counter-reset: part; }
.part { display: flex; flex-direction: column; gap: 12px; }
.part__t { display: flex; gap: 12px; align-items: baseline; font-family: var(--display); font-stretch: 125%; font-weight: 300; font-size: 18px; text-transform: uppercase; }
.credits { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-top: 1px solid var(--rule); }
.credits div { padding: 22px 24px 22px 0; border-bottom: 1px solid var(--rule); }
.credits dt { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.credits dd { margin: 0; font-size: 18px; }
/* Full film credits under the player (from YouTube), two to four columns. */
.crew { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px 32px; }
.crew div { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--rule); }
.crew dt { font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.crew dd { margin: 0; font-size: 15px; color: var(--mid); }
@media (max-width: 600px) { .crew { grid-template-columns: 1fr 1fr; gap: 14px 16px; } .crew dd { font-size: 14px; } }
.credits__client { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 34px; }
.credits__logo { display: block; width: auto; max-width: 100%; }
.credits__x { color: var(--dim); }
.story { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 48px; }
.story h2 { margin: 0 0 12px; font-family: var(--display); font-stretch: 125%; font-weight: 600; font-size: 20px; text-transform: uppercase; }
.story p { margin: 0; color: var(--mid); }
/* Behind the camera: one still beside the story (e.g. Alex directing). */
.bts { margin: 56px 0 0; max-width: 560px; display: flex; flex-direction: column; gap: 10px; }
.bts img { display: block; width: 100%; height: auto; }
.verticals { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; }
.stills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.still { padding: 0; border: 0; background: var(--raise); cursor: zoom-in; aspect-ratio: 3 / 2; overflow: hidden; }
.still picture { display: block; width: 100%; height: 100%; }
.still img { width: 100%; height: 100%; object-fit: cover; }
.still--hero { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.still--hero img { object-position: var(--pos, 50% 50%); }
/* Portrait stills (posters) show whole, at a sensible size, never cropped. */
.still.is-tall { aspect-ratio: auto; justify-self: center; width: auto; max-width: 100%; height: min(78svh, 960px); background: none; }
.still.is-tall picture { width: auto; }
.still.is-tall img { width: auto; height: 100%; object-fit: contain; }
.still--hero.is-tall { grid-column: 1 / -1; }
.results { display: flex; flex-wrap: wrap; gap: 56px; padding: 36px 0; border-block: 1px solid var(--rule); }
.next { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; padding-block: 72px 120px; }
.next > span { display: flex; flex-direction: column; gap: 10px; }
.next__frame { width: min(420px, 100%); }
.lightbox { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100vh; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(7, 7, 6, .94); }
.lightbox img { width: auto; height: auto; max-width: min(92vw, 1800px); max-height: 84svh; object-fit: contain; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lightbox__x { position: absolute; top: 20px; right: 20px; min-height: 44px; padding: 0 16px; background: var(--paper); color: var(--ink); border: 0; cursor: pointer; font: 500 12px var(--mono); text-transform: uppercase; }

/* Our reach: headline over a drifting wall of the most-viewed films */
.reach { position: relative; overflow: hidden; min-height: clamp(560px, 86svh, 860px); display: flex; align-items: flex-end; margin-top: -88px; padding-top: 88px; }
.reach__wall { position: absolute; inset: -10% 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; transform: rotate(-4deg) scale(1.12); opacity: .62; filter: saturate(.8); }
.reach__col { display: flex; flex-direction: column; gap: 10px; animation: drift 60s linear infinite; }
.reach__col.is-up { animation-direction: reverse; }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.reach__tile { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--raise); }
.reach__tile picture, .reach__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reach::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 70%, rgba(11, 11, 10, .62), rgba(11, 11, 10, .72) 75%), linear-gradient(180deg, var(--ink), rgba(11, 11, 10, .2) 30%, rgba(11, 11, 10, .4) 60%, var(--ink)); }
.reach__c { position: relative; z-index: 1; padding-block: 80px 64px; display: flex; flex-direction: column; gap: 18px; }
.reach__k { color: var(--mid); }
.reach__odo { font-family: var(--display); font-stretch: 125%; font-weight: 600; font-size: clamp(54px, 11vw, 168px); line-height: 1; letter-spacing: -.01em; }
.odo { display: inline-flex; }
.stat__n { display: block; font-family: var(--display); font-stretch: 150%; font-weight: 600; font-size: clamp(30px, 4.4vw, 64px); line-height: 1; font-variant-numeric: tabular-nums; }
.stat--odo { flex: 2 1 420px; }
.stat--odo .odo__d > span { transition-duration: .9s; }
.odo__d { display: inline-block; height: 1em; overflow: hidden; }
.odo__d > span { display: flex; flex-direction: column; transform: translateY(calc(var(--d) * -1em)); transition: transform 2.2s cubic-bezier(.16, 1, .3, 1); }
.odo__d i { display: block; height: 1em; line-height: 1; font-style: normal; text-align: center; font-variant-numeric: tabular-nums; }
.odo.is-armed .odo__d > span { transform: translateY(0); transition: none; }
.odo__s { display: inline-block; width: .32em; color: var(--accent); }
.reach__l { color: var(--paper); margin: 0; }
.proof { padding-bottom: clamp(72px, 9vw, 120px); }
.proof > .block:first-child { margin-top: 56px; }
.yt__row { position: relative; }
.yt__row::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--p) * 100%); background: var(--accent); opacity: .7; transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--shutter); }
.yt__row.is-in::after { transform: scaleX(1); }
@media (max-width: 760px) { .reach__wall { grid-template-columns: repeat(3, 1fr); } .reach__col:nth-child(n+4) { display: none; } }

/* Proof */
.proof .stats--rule .stat { padding-right: 24px; }
.yt { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.yt__row { display: flex; align-items: center; gap: 24px 32px; flex-wrap: wrap; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.yt__rank { width: 32px; }
.yt__thumb { width: 208px; aspect-ratio: 16 / 9; object-fit: cover; background: var(--raise); }
.yt__txt { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; }
.yt__txt .title { font-size: clamp(22px, 2.4vw, 32px); }
.yt__num { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 160px; }
.yt__num .stat__v { font-size: clamp(32px, 3vw, 44px); }
.reels { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; }
.reel { display: flex; flex-direction: column; gap: 12px; }
.reel__c { color: var(--mid); font-size: 15px; }

/* Case study */
.case { display: flex; flex-direction: column; gap: 22px; }
.fig { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.fig img { width: 100%; background: var(--raise); }
.shows .chips { margin-bottom: 12px; }
.show { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.show__t { margin: 12px 0 16px; font-family: var(--display); font-stretch: 125%; font-weight: 300; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.05; text-transform: uppercase; }
.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.list li { padding: 14px 0; border-bottom: 1px solid var(--rule); color: var(--mid); }
.approach { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; }
.approach li { border-top: 1px solid var(--paper); padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.approach h3 { margin: 0; font-family: var(--display); font-stretch: 125%; font-weight: 300; font-size: 26px; line-height: 1.05; text-transform: uppercase; }
.approach p { margin: 0; color: var(--mid); }
.quote { margin: 64px 0 0; padding: 64px 0; border-block: 1px solid var(--rule); }
.quote blockquote { margin: 0 0 20px; font-family: var(--display); font-stretch: 125%; font-weight: 300; font-size: clamp(26px, 3vw, 44px); line-height: 1.2; max-width: 1080px; }
@media (max-width: 760px) { .show { grid-template-columns: 1fr; } .stills { grid-template-columns: 1fr; } }

/* Originals */
.orig { position: relative; height: 100svh; min-height: 640px; overflow: hidden; }
.orig__media { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #141311 0 14px, #181715 14px 15px); }
.orig__media img, .orig__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.orig__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(8, 8, 7, .85)); }
.orig__c { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(40px, 8vh, 80px); z-index: 1; display: flex; flex-direction: column; gap: 22px; max-width: 820px; }
.orig__line { margin: 0; font-family: var(--display); font-stretch: 125%; font-weight: 300; font-size: 20px; text-transform: uppercase; letter-spacing: .04em; }
.inquire { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.inquire__l { font-family: var(--display); font-stretch: 150%; font-weight: 600; font-size: 13px; text-transform: uppercase; }
.inquire__row { display: flex; flex-wrap: wrap; max-width: 560px; }
.inquire input { flex: 1 1 260px; min-height: 54px; padding: 0 18px; background: rgba(8, 8, 7, .6); border: 1px solid #5E5B53; border-radius: 0; font-size: 16px; }
.inquire input::placeholder { color: #8A867D; }
.inquire button { min-height: 56px; padding: 0 28px; background: var(--gold); color: #080807; border: 0; cursor: pointer; font-family: var(--display); font-stretch: 150%; font-weight: 600; font-size: 13px; text-transform: uppercase; }

/* Studio */
.studio { display: flex; flex-direction: column; gap: 32px; }
/* Studio: headline over a 21:9 film; disciplines as big rows whose film
   follows the cursor; cities with their time running like timecode. */
.studio-hero { position: relative; min-height: min(92svh, 980px); display: flex; align-items: flex-end; overflow: hidden; }
.studio-hero__media { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #191816 0 14px, #1E1D1A 14px 15px); }
.studio-hero__media picture, .studio-hero__media img, .studio-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.studio-hero__vid { opacity: 0; transition: opacity 1s var(--shutter); }
.studio-hero__vid.is-on { opacity: 1; }
.studio-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 10, .7), rgba(11, 11, 10, .5) 40%, rgba(11, 11, 10, .88)); }
.studio-hero__c { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px 64px; padding-block: 140px 64px; }
.studio-hero__txt { max-width: 560px; display: flex; flex-direction: column; gap: 18px; }
.studio-hero__txt .lede { margin: 0; }
.studio-hero__txt .lede.big { font-size: clamp(18px, 1.8vw, 25px); }
.studio-hero__h { margin: 0; text-align: right; font-size: clamp(36px, 5.6vw, 88px); line-height: .92; }
@media (max-width: 900px) { .studio-hero__c { grid-template-columns: 1fr; padding-block: 120px 44px; } .studio-hero__h { text-align: left; order: -1; } }
.dlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.dlist__row { display: grid; grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 12px 28px; padding: 11px 8px; border-bottom: 1px solid var(--rule); transition: background .3s var(--shutter), padding .3s var(--shutter); }
.dlist__n { color: var(--dim); }
.dlist__t { font-family: var(--display); font-stretch: 150%; font-weight: 600; text-transform: uppercase; font-size: clamp(17px, 1.9vw, 26px); line-height: 1.1; transition: color .25s; }
.dlist__l { color: var(--mid); font-size: 14px; }
.dlist__c { color: var(--dim); white-space: nowrap; }
.dlist__row:hover { background: var(--raise); padding-left: 18px; color: var(--paper); }
.dlist__row:hover .dlist__t { color: var(--accent); }
@media (max-width: 760px) { .dlist__row { grid-template-columns: 30px 1fr; } .dlist__l, .dlist__c { grid-column: 2; } }
.dlist__pv { position: fixed; left: 0; top: 0; z-index: 30; width: 340px; aspect-ratio: 16 / 9; overflow: hidden; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.9); transition: opacity .25s, transform .35s var(--shutter); background: var(--raise); }
.dlist__pv.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.dlist__pv img, .dlist__pv video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (hover: none) { .dlist__pv { display: none; } }
.studio-figs .stats { gap: 32px; }
.studio-figs .stat__v { font-size: clamp(44px, 5.4vw, 80px); }
.studio-figs .stat__v .odo__s { color: var(--paper); }
.reveal { transition: filter .9s var(--shutter), opacity .9s var(--shutter); }
.reveal:not(.is-in) { filter: blur(12px); opacity: .3; }
.names { display: flex; flex-direction: column; gap: 4px; overflow: hidden; border-block: 1px solid var(--rule); padding: 18px 0; }
.names__track { display: flex; width: max-content; gap: 24px; align-items: baseline; animation: marquee 90s linear infinite; font-family: var(--display); font-stretch: 125%; font-weight: 300; text-transform: uppercase; font-size: clamp(15px, 1.7vw, 24px); line-height: 1.3; white-space: nowrap; color: var(--mid); }
.names__track:nth-child(odd) { animation-direction: reverse; animation-duration: 110s; color: var(--dim); }
.names__track:nth-child(4) { animation-duration: 100s; }
.names__track i { font-style: normal; color: var(--accent); }
.names:hover .names__track { animation-play-state: paused; }
.markets { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.markets li { padding: 18px 0; border-bottom: 1px solid var(--rule); font-size: clamp(28px, 4vw, 56px); }

/* AF reticle cursor (mouse only) */
.af { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; width: 34px; height: 34px; transform: translate(-50%, -50%); transition: width .16s var(--shutter), height .16s var(--shutter), opacity .2s; }
.af i { position: absolute; width: 10px; height: 10px; border-color: var(--paper); border-style: solid; border-width: 0; transition: border-color .16s; }
.af i:nth-child(1) { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.af i:nth-child(2) { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
.af i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.af i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.af b { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: var(--paper); }
.af.is-lock i { border-color: var(--accent); width: 16px; height: 16px; }
.af.is-lock b { background: var(--accent); }
.af.is-hunt { animation: hunt .12s linear 2; }
@keyframes hunt { 50% { transform: translate(-50%, -50%) scale(1.15); } }
.menu-open .af i { border-color: var(--blue-ink); } .menu-open .af b { background: var(--blue-ink); }
.menu-open .af.is-on-light i { border-color: var(--blue); } .menu-open .af.is-on-light b { background: var(--blue); }

/* Private app (client room, decks, admin) */
.app { min-height: 80vh; }
.app__loading { padding: 80px var(--gutter); }
.btn { min-height: 44px; padding: 0 18px; border: 1px solid var(--rule-2); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:hover { border-color: var(--paper); }
.btn--solid { background: var(--paper); color: var(--ink); border-color: var(--paper); font-weight: 600; }
.btn--solid:hover { color: var(--ink); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.cr-top { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; padding: 18px var(--gutter); border-block: 1px solid var(--rule); }
.cr-title { font-family: var(--display); font-stretch: 125%; font-weight: 300; font-size: 26px; text-transform: uppercase; line-height: 1; margin: 4px 0 0; }
.cr-progress { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.cr-progress b { display: block; height: 3px; background: var(--rule); }
.cr-progress b i { display: block; height: 3px; background: var(--accent); transition: width .4s var(--shutter); }
.cr { display: flex; flex-wrap: wrap; align-items: flex-start; }
.cr-nav { flex: 1 1 200px; max-width: 250px; padding: 24px 16px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 90px; }
.cr-nav button { min-height: 44px; display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 0 12px; background: transparent; border: 0; text-align: left; cursor: pointer; }
.cr-nav button.is-on { background: #22211E; }
.cr-nav button span { font: 11px var(--mono); color: var(--dim); }
.cr-grid { flex: 999 1 520px; min-width: 0; padding: 24px; border-inline: 1px solid var(--rule); display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; align-content: start; min-height: 70vh; }
.asset { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--rule); }
.asset.is-sel { border-color: var(--paper); }
.asset__open { position: relative; aspect-ratio: 4 / 5; border: 0; padding: 0; cursor: pointer; overflow: hidden; background: repeating-linear-gradient(135deg, #1C1B18 0 12px, #211F1C 12px 13px); }
.asset__open img, .asset__open video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.badge { position: absolute; padding: 3px 6px; background: rgba(15, 15, 14, .8); font: 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.badge--tl { left: 8px; top: 8px; } .badge--tr { right: 8px; top: 8px; } .badge--bl { left: 8px; bottom: 8px; }
.st-approved { color: var(--accent); } .st-changes { color: var(--amber); } .st-pending { color: var(--mid); }
.asset__row { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.asset__name { font-size: 13px; line-height: 1.3; color: var(--mid); word-break: break-word; }
.icon { width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; display: grid; place-items: center; }
.icon svg { width: 20px; height: 20px; }
.heart path { fill: none; stroke: var(--dim); stroke-width: 1.5; }
.heart[aria-pressed="true"] path { fill: var(--paper); stroke: var(--paper); }
.ok span { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #5E5B53; display: grid; place-items: center; }
.ok svg { width: 14px; height: 14px; fill: none; stroke: #5E5B53; stroke-width: 2.4; }
.ok[aria-pressed="true"] span { background: var(--accent); border-color: var(--accent); }
.ok[aria-pressed="true"] svg { stroke: var(--ink); }
.cr-side { flex: 1 1 320px; max-width: 440px; padding: 24px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 90px; }
.cr-prev { position: relative; background: var(--raise); aspect-ratio: 4 / 5; }
.cr-prev img, .cr-prev video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cr-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cr-actions .btn { flex: 1 1 130px; min-height: 48px; font-weight: 600; }
.cr-actions .is-approve.is-on { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.cr-actions .is-changes.is-on { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.cmts { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--rule); padding-top: 16px; }
.cmt { padding: 12px; background: #171715; display: flex; flex-direction: column; gap: 4px; }
.cmt b { font: 400 10px var(--mono); letter-spacing: .08em; color: var(--dim); text-transform: uppercase; }
textarea.field, input.field { width: 100%; background: transparent; border: 1px solid var(--rule-2); padding: 12px; font-size: 14px; }
textarea.field { resize: vertical; min-height: 84px; }
.clap { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11, 11, 10, .55); pointer-events: none; animation: fadeOut .9s ease .5s forwards; }
.clap svg { width: 46%; max-width: 120px; overflow: visible; }
.clap .stick { transform-origin: 20px 72px; animation: clap .35s var(--shutter) forwards; }
@keyframes clap { from { transform: rotate(-26deg); } to { transform: rotate(0); } }
@keyframes fadeOut { to { opacity: 0; } }
.decklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 24px; margin-top: 48px; }
.deck { display: flex; flex-direction: column; gap: 10px; padding: 28px; border: 1px solid var(--rule); background: #121211; }
.deck:hover { border-color: var(--paper); color: var(--paper); }
.deck .card__t { font-size: 28px; }
.admin__body { display: flex; flex-direction: column; gap: 56px; margin-top: 32px; }
.admin h2 { margin: 0 0 16px; font-family: var(--display); font-stretch: 150%; font-weight: 600; text-transform: uppercase; font-size: 24px; }
.admin form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.admin label { display: flex; flex-direction: column; gap: 6px; font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); flex: 1 1 180px; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--rule); margin-top: 16px; }
.tbl { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font: 400 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.tbl td { padding: 12px 14px; border-bottom: 1px solid #1E1D1A; vertical-align: top; }
.note { padding: 14px 16px; border: 1px solid var(--rule); color: var(--mid); }

@media (pointer: fine) { body.has-af, body.has-af a, body.has-af button { cursor: none; } body.has-af input, body.has-af textarea { cursor: text; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .strip__track, .clients__track, .names__track, .reach__col { animation: none; }
  .ftr__cta:not(.is-locked) .ftr__focus { filter: none; opacity: 1; }
  .reveal:not(.is-in) { filter: none; opacity: 1; }
}

/* Our reach list on phones: rank, thumbnail and title on one line, the count under the title. */
@media (max-width: 700px) {
  .yt__row { display: grid; grid-template-columns: 22px 112px minmax(0, 1fr); align-items: center; gap: 10px 14px; }
  .yt__thumb { width: 112px; }
  .yt__txt { grid-column: 3; }
  .yt__txt .title { font-size: 20px; }
  .yt__num { grid-column: 3; flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; }
  .yt__num .stat__v { font-size: 26px; }
  .yt__row > .link { grid-column: 3; padding: 0 0 4px; }
}

/* No orphans: short last lines are pulled up (balance for headings, pretty for text). */
h1, h2, h3, .h-display, .title, .client, .card__t, .orig__line, .menu__row { text-wrap: balance; }
p, li, dd, .lede, .card__d, .tile__cap { text-wrap: pretty; }

/* Home: the latest-work tag (accent, like the gold Originals tag). */
.latest-tag { display: inline-block; margin-right: 10px; padding: 3px 7px 2px; border: 1px solid var(--accent); color: var(--accent); font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; vertical-align: 1px; white-space: nowrap; }

/* Home: a thin band for one client's season (A season with Burgess). */
.season { border-bottom: 1px solid var(--rule); padding: 44px 0; overflow: hidden; }
.season__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 56px; align-items: center; }
.season__t { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 560px; min-width: 0; }
.season__t p { margin: 0; }
.season__h { margin: 0; font-size: clamp(26px, 3.2vw, 44px); line-height: 1; }
.season__l { color: var(--mid); font-size: 16px; line-height: 1.5; }
.season__films { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; align-items: flex-start; }
.season__films li { width: 150px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.season__ft { display: flex; align-items: center; gap: 10px; min-height: 20px; }
.season__ft .mono { font-size: 10px; white-space: nowrap; }
.season__logo { display: block; height: 22px; width: calc(22px * var(--lr)); opacity: .75; }
@media (max-width: 860px) {
  .season { padding: 32px 0; }
  .season__in { grid-template-columns: minmax(0, 1fr); }
  .season__films { gap: 8px; }
  .season__films li { width: calc((100% - 16px) / 3); }
  .season__ft { flex-direction: column; align-items: flex-start; gap: 6px; }
  .season__logo { height: 14px; width: calc(14px * var(--lr)); }
  .season__films .reel-btn__play { left: 6px; bottom: 6px; width: 28px; height: 28px; }
  .season__films .reel-btn__play svg { width: 7px; height: 8px; }
}

/* The Gilded Fool: open auditions form. */
.audition { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 14px; max-width: 900px; padding-top: 28px; border-top: 1px solid var(--rule); margin-top: 8px; }
.audition p { margin: 0; }
.audition__l { color: var(--mid); max-width: 640px; }
.audition__fields { display: grid; grid-template-columns: 1fr 1fr 1.3fr auto; gap: 10px; align-items: stretch; }
.audition input { min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--rule-2); background: rgba(11, 11, 10, .6); color: var(--paper); font: inherit; font-size: 15px; }
.audition input:focus { outline: none; border-color: var(--gold); }
.audition button { height: 48px; padding: 0 20px; border: 0; background: var(--gold); color: var(--ink); font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.audition button:disabled { opacity: .6; cursor: default; }
.audition__p { grid-column: 1 / -1; font-size: 10px; }
.audition__err { color: #E08A7B; font-size: 12px; }
.audition-sec { padding-top: 0; }
@media (max-width: 860px) { .audition__fields { grid-template-columns: 1fr; } .audition button { width: 100%; } }