/* ==========================================================================
   SPORTRICKY — sportricky.com
   The site runs like a commercial: anamorphic type (Archivo width 62→125),
   letterbox frames, a timecode HUD, one REC red, and film grain.
   ========================================================================== */

/* Layout: full-bleed black "cinema" with one bone-white interlude (services + clients). */
:root {
  --black: #050505;
  --black-2: #0d0d0d;
  --white: #f4f4f0;
  --pure: #ffffff;
  --mute: #9a9a94;
  --mute-2: #5c5c57;
  --line: rgba(244, 244, 240, .16);
  --bone: #ecebe6;
  --ink: #0b0b0b;
  --ink-mute: #6b6a65;
  --ink-line: rgba(11, 11, 11, .16);
  --rec: #ff3b2f;

  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --mono: "DM Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --gutter: clamp(16px, 3.2vw, 52px);
  --pad-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --pad-r: max(var(--gutter), env(safe-area-inset-right, 0px));
  --top: calc(env(safe-area-inset-top, 0px) + 18px);
  --hud-h: 46px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--black); }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.55;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: background-color 1s var(--ease), color 1s var(--ease);
}
body.is-light { background: var(--bone); }
img, video { display: block; max-width: 100%; }
video { background: var(--black); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
h1, h2, h3, p, dl, dd, figure, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
::selection { background: var(--rec); color: var(--pure); }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .09em;
  line-height: 1.45;
  text-transform: uppercase;
}
em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-optical-sizing: auto;
  font-stretch: normal;
  letter-spacing: -.01em;
}
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; z-index: 120; left: var(--pad-l); top: var(--top);
  padding: 10px 16px; background: var(--white); color: var(--black);
  transform: translateY(-200%); transition: transform .3s var(--ease);
}
.skip:focus { transform: none; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* Split text (built in main.js) */
.w { display: inline-block; overflow: clip; overflow-clip-margin: .12em; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.wi, .c { display: inline-block; will-change: transform; }

/* ---------- Buttons & links ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 28px; border-radius: 999px;
  font-size: 14px; font-weight: 600; font-stretch: 112%; letter-spacing: .005em;
  border: 1px solid currentColor;
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
  white-space: nowrap;
}
.btn__t { display: block; height: 1.25em; line-height: 1.25em; overflow: hidden; }
.btn__t > span { display: block; transition: transform .7s var(--ease); }
.btn__t > span::after { content: attr(data-text); display: block; }
.btn:hover .btn__t > span, .btn:focus-visible .btn__t > span { transform: translateY(-50%); }
.btn--solid { background: var(--white); color: var(--black); border-color: var(--white); }
.btn--solid:hover { background: var(--pure); }
.btn--ghost { color: var(--white); border-color: rgba(244, 244, 240, .38); }
.btn--ghost:hover { border-color: var(--white); }
.btn--xl { height: 64px; padding: 0 40px; font-size: 16px; }

.link {
  position: relative; display: inline-flex; gap: .5em; align-items: baseline;
  font-size: 14px; font-weight: 500; font-stretch: 108%;
  padding-bottom: 4px;
}
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform-origin: right; transform: scaleX(.35);
  transition: transform .8s var(--ease);
}
.link:hover::after, .link:focus-visible::after { transform-origin: left; transform: scaleX(1); }
.link--big { font-size: clamp(20px, 2vw, 28px); font-stretch: 118%; font-weight: 650; }

/* ---------- Loader ---------- */
.loader { position: fixed; inset: 0; z-index: 95; pointer-events: none; display: none; }
.js .loader { display: block; animation: loader-failsafe .01s 9s forwards; }
@keyframes loader-failsafe { to { visibility: hidden; } }
.loader__panel { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--black); }
.loader__panel--top { top: 0; }
.loader__panel--bottom { bottom: 0; }
.loader__ui { position: absolute; inset: 0; color: var(--white); }
.loader__ui > .mono { position: absolute; color: var(--mute); }
.loader__tl { left: var(--pad-l); top: var(--top); }
.loader__tr { right: var(--pad-r); top: var(--top); }
.loader__bl { left: var(--pad-l); bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); }
.loader__br { right: var(--pad-r); bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); }
.loader__num { color: var(--white); font-variant-numeric: tabular-nums; }
.loader__line {
  position: absolute; left: var(--pad-l); right: var(--pad-r); top: 50%; height: 1px;
  background: var(--white); transform: scaleX(0); transform-origin: left center;
}

/* ---------- Nav ---------- */
.nav {
  position: fixed; z-index: 75; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--top) var(--pad-r) 14px var(--pad-l);
  color: #fff; mix-blend-mode: difference; pointer-events: none;
  transition: opacity .6s var(--ease);
}
.nav > * { pointer-events: auto; }
.nav__brand { font-size: 15px; font-weight: 900; font-stretch: 125%; letter-spacing: .02em; }
.nav__links { display: flex; gap: clamp(20px, 2.6vw, 44px); font-size: 13px; font-weight: 500; font-stretch: 110%; }
.nav__links a { position: relative; padding: 4px 0; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .7s var(--ease);
}
.nav__links a:hover::after, .nav__links a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav__menu { display: none; padding: 8px 0; }
.nav__menu-close { display: none; }
html.menu-open .nav__menu-open { display: none; }
html.menu-open .nav__menu-close { display: inline; }
html.case-open .nav, html.form-open .nav { opacity: 0; pointer-events: none; }
html.case-open .nav > *, html.form-open .nav > * { pointer-events: none; }

/* ---------- HUD (timecode timeline) ---------- */
.hud {
  position: fixed; z-index: 58; left: 0; right: 0; bottom: 0;
  padding: 0 var(--pad-r) calc(env(safe-area-inset-bottom, 0px) + 14px) var(--pad-l);
  color: var(--white); pointer-events: none;
  transition: color 1s var(--ease), opacity .6s var(--ease);
}
body.is-light .hud { color: var(--ink); }
.hud__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-bottom: 9px; }
.hud__row .mono { font-size: 10px; opacity: .78; white-space: nowrap; }
.hud__rec { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.hud__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rec); animation: rec 1.4s steps(1, end) infinite; }
@keyframes rec { 50% { opacity: .15; } }
.hud__ch { justify-self: center; }
.hud__fps { justify-self: end; }
.hud__track { position: relative; height: 1px; background: currentColor; opacity: .26; }
.hud__fill { position: absolute; inset: 0; background: currentColor; transform-origin: left; transform: scaleX(var(--p, 0)); }
.hud__marks { position: absolute; inset: -3px 0; }
.hud__marks i { position: absolute; top: 0; width: 1px; height: 7px; background: currentColor; }
.hud { opacity: 1; }
html.case-open .hud, html.form-open .hud, html.menu-open .hud { opacity: 0; }

/* ---------- Cursor ---------- */
.cursor { position: fixed; z-index: 110; top: 0; left: 0; pointer-events: none; display: none; }
html.has-cursor .cursor { display: block; }
html.has-cursor, html.has-cursor * { cursor: none !important; }
html.has-cursor input, html.has-cursor textarea { cursor: text !important; }
.cursor__ball {
  position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 50%;
  background: #fff; mix-blend-mode: difference;
  display: grid; place-items: center;
  transform: scale(.1); transition: transform .6s var(--ease), background-color .4s var(--ease), opacity .3s;
}
.cursor.is-link .cursor__ball { transform: scale(.42); }
.cursor.is-label .cursor__ball { transform: scale(1); mix-blend-mode: normal; background: rgba(255, 255, 255, .94); }
.cursor.is-hidden .cursor__ball { opacity: 0; }
.cursor__label { color: var(--black); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity .3s; text-align: center; padding: 0 8px; }
.cursor.is-label .cursor__label { opacity: 1; transition-delay: .1s; }

/* ---------- Grain ---------- */
.grain {
  position: fixed; z-index: 90; inset: -12%; pointer-events: none;
  opacity: .075; background-size: 220px 220px;
  animation: grain .8s steps(5) infinite;
  transition: opacity 1s var(--ease);
}
body.is-light .grain { opacity: .045; }
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 4%); }
  40% { transform: translate(4%, -2%); }
  60% { transform: translate(-4%, -4%); }
  80% { transform: translate(2%, 5%); }
  100% { transform: translate(0, 0); }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; z-index: 1; height: 100vh; height: 100svh; }
.hero__pin { position: relative; height: 100%; overflow: hidden; isolation: isolate; background: var(--black); }
.hero__media { position: absolute; inset: 0; }
.hero__video { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
.hero__veil { position: absolute; inset: 0; background: #fff; opacity: 0; }
.js-motion .hero__veil { opacity: 1; }
.hero__mask {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  background: #000; color: #fff;
  mix-blend-mode: multiply;
  transform-origin: 50% 50%;
}
.hero__word {
  display: flex; align-items: center; justify-content: center;
  font-size: 13.4vw; /* refined by fitHero() */
  font-weight: 900; font-stretch: 125%; line-height: .78; letter-spacing: -.035em;
  white-space: nowrap; user-select: none;
  padding-bottom: .02em;
}
.hero__line { display: flex; }
.hw { display: inline-block; overflow: clip; overflow-clip-margin: .06em; padding: .06em .005em; }
.hc { display: inline-block; }
.hero__shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .2) 42%, rgba(0, 0, 0, 0) 64%),
              linear-gradient(to bottom, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 20%);
}
.hero__meta {
  position: absolute; z-index: 3; left: var(--pad-l); right: var(--pad-r);
  bottom: calc(var(--hud-h) + env(safe-area-inset-bottom, 0px) + 22px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px;
  color: var(--white);
}
.hero__meta p:last-child { justify-self: end; text-align: right; }
.hero__scroll { display: grid; justify-items: center; gap: 12px; }
.hero__scroll-line { display: block; width: 1px; height: 46px; background: linear-gradient(var(--white), transparent); transform-origin: top; animation: scroll-line 2.2s var(--ease-io) infinite; }
@keyframes scroll-line { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.hero__statement {
  position: absolute; z-index: 3; left: var(--pad-l); right: var(--pad-r);
  bottom: calc(var(--hud-h) + env(safe-area-inset-bottom, 0px) + 30px);
  display: grid; gap: clamp(20px, 3vw, 36px);
  visibility: hidden;
}
.no-js .hero__statement, html:not(.js-motion) .hero__statement { visibility: visible; }
.hero__title {
  font-size: clamp(50px, 9.2vw, 168px); font-weight: 800; font-stretch: 112%;
  line-height: .9; letter-spacing: -.04em; max-width: 12ch;
}
.hero__title em { font-weight: 500; letter-spacing: -.02em; }
.hero__foot { display: flex; align-items: end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.hero__sub { max-width: 34ch; font-size: clamp(16px, 1.25vw, 19px); color: #d9d9d4; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Static hero when motion is off: poster, shade and statement, no wordmark zoom */
html:not(.js-motion) .hero__mask, html:not(.js-motion) .hero__meta { display: none; }
html:not(.js-motion) .hero__shade { opacity: 1; }

/* ==========================================================================
   INDEX
   ========================================================================== */
.index { position: relative; z-index: 2; background: var(--black); }
.index__inner {
  min-height: 100vh; padding: clamp(110px, 16vh, 180px) var(--pad-r) clamp(90px, 14vh, 160px) var(--pad-l);
  display: grid; align-content: center; gap: clamp(28px, 4vw, 56px);
}
.index__kicker { color: var(--mute); }
.index__title { font-size: clamp(64px, 13vw, 240px); font-weight: 800; font-stretch: 118%; line-height: .82; letter-spacing: -.05em; }
.index__title em { font-weight: 500; letter-spacing: -.03em; }
.index__list { border-top: 1px solid var(--line); }
.index__row {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: baseline; gap: 16px;
  padding: clamp(14px, 1.6vw, 22px) 0; border-bottom: 1px solid var(--line);
  transition: opacity .5s var(--ease), color .5s var(--ease);
}
.index__n { color: var(--mute); }
.index__name {
  font-size: clamp(28px, 4vw, 64px); font-weight: 700; font-stretch: 100%; line-height: 1; letter-spacing: -.03em;
  transition: font-stretch .9s var(--ease), letter-spacing .9s var(--ease);
}
.index__type { color: var(--mute); text-align: right; }
.index__list:hover .index__row { opacity: .32; }
.index__list .index__row:hover, .index__list .index__row:focus-visible { opacity: 1; }
.index__row:hover .index__name, .index__row:focus-visible .index__name { font-stretch: 125%; letter-spacing: -.02em; }

/* ==========================================================================
   CHAPTERS
   ========================================================================== */
.chapters { position: relative; }
.chapter { position: relative; height: calc(100vh * (1 + var(--extra, 0))); }
.chapter:nth-child(1) { z-index: 11; }
.chapter:nth-child(2) { z-index: 12; }
.chapter:nth-child(3) { z-index: 13; }
.chapter:nth-child(4) { z-index: 14; }
.chapter:nth-child(5) { z-index: 15; }
.chapter--ivita { --extra: 1.05; }
.chapter--jij { --extra: .35; }
.chapter--dahlia { --extra: .35; }
.chapter--food { --extra: 1.25; }
.chapter__stage { position: relative; height: 100vh; overflow: hidden; background: var(--black); }
.chapter__inner { position: absolute; inset: 0; transform-origin: 50% 40%; }
.chapter__frame { position: absolute; inset: 0; overflow: hidden; background: var(--black-2); }
.chapter__video, .chapter__frame > img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
.chapter__shade {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .2) 40%, rgba(0, 0, 0, 0) 62%),
              linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 24%);
}
.chapter__dim { position: absolute; inset: 0; z-index: 8; background: #000; opacity: 0; pointer-events: none; }
.chapter__copy {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  display: grid; grid-template-rows: auto 1fr;
  padding: calc(var(--top) + 62px) var(--pad-r) calc(var(--hud-h) + env(safe-area-inset-bottom, 0px) + 34px) var(--pad-l);
}
.chapter__copy button, .chapter__copy a { pointer-events: auto; }
.chapter__head { display: flex; gap: 22px; color: var(--white); }
.chapter__num { color: var(--mute); }
.chapter__foot { align-self: end; display: flex; align-items: end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.chapter__titles { display: grid; gap: clamp(10px, 1.4vw, 18px); min-width: 0; }
.chapter__line { font-size: clamp(18px, 1.8vw, 28px); font-weight: 400; font-stretch: 100%; color: #e9e9e4; letter-spacing: -.01em; }
.chapter__line em { font-size: 1.12em; }
.chapter__title {
  font-size: clamp(52px, 8.4vw, 168px); font-weight: 760; font-stretch: 125%;
  line-height: .86; letter-spacing: -.045em; max-width: 9.6em;
}
.chapter__side { display: grid; gap: 22px; justify-items: start; min-width: min(100%, 300px); max-width: 360px; }
.chapter__credits { display: grid; gap: 8px; color: var(--white); }
.chapter__credits div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; }
.chapter__credits dt { color: var(--mute); }
.chapter__open { color: var(--white); }
.chapter__frame, .trip, .food__stills { cursor: pointer; }

/* 01 — triptych tiles */
.trip { position: absolute; z-index: 1; top: 10%; height: 60%; width: 28vw; overflow: hidden; visibility: hidden; }
.trip img { width: 100%; height: 100%; object-fit: cover; }
.trip figcaption { position: absolute; left: 14px; bottom: 12px; color: var(--white); text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.trip--l { left: 4.5vw; }
.trip--r { left: 67.5vw; }

/* 03 — letterbox ratio tag */
.chapter__ratio { position: absolute; z-index: 5; right: var(--pad-r); top: calc(var(--top) + 64px); color: var(--white); opacity: 0; }

/* 04 — food split */
.food { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.food .food__film { position: relative; inset: auto; }
.food__stills { position: relative; overflow: hidden; background: var(--black); }
.food__still { position: absolute; inset: 0; }
.food__still img { width: 100%; height: 100%; object-fit: cover; }
.food__still figcaption { position: absolute; right: var(--pad-r); top: calc(var(--top) + 64px); color: var(--white); text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
.js-motion .food__still:not(:first-child) { clip-path: inset(100% 0% 0% 0%); }

/* 05 — AI reel (horizontal) */
.chapter--reel { height: auto; background: var(--black); }
.reel { position: relative; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.reel__track {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 48px);
  padding: calc(var(--top) + 40px) var(--pad-r) calc(var(--hud-h) + 20px) var(--pad-l);
  will-change: transform;
}
.reel__intro { flex: 0 0 auto; width: min(560px, 74vw); display: grid; gap: 22px; align-content: center; padding-right: 4vw; }
.reel__intro .chapter__title { font-size: clamp(56px, 7.6vw, 150px); }
.reel__lede { font-size: clamp(18px, 1.6vw, 24px); color: #d9d9d4; max-width: 26ch; }
.reel__hint { color: var(--mute); }
.reel__card { position: relative; flex: 0 0 auto; display: grid; gap: 14px; }
.reel__media { position: relative; display: block; overflow: hidden; background: var(--black-2); }
.reel__media video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.reel__card--v .reel__media { height: min(68vh, 860px); aspect-ratio: 9 / 16; }
.reel__card--h .reel__media { height: min(50vh, 640px); aspect-ratio: 16 / 9; }
.reel__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.reel__cap .mono { color: var(--mute); }
.reel__name { font-size: clamp(20px, 1.9vw, 30px); font-weight: 650; font-stretch: 118%; letter-spacing: -.02em; }
.ai-tag { position: absolute; top: 14px; left: 14px; padding: 4px 8px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 4px; color: var(--white); background: rgba(0, 0, 0, .25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.reel__card:hover .reel__name, .reel__card:focus-visible .reel__name { font-stretch: 125%; }
.reel__name { transition: font-stretch .8s var(--ease); }
.reel__more { flex: 0 0 auto; display: grid; gap: 12px; padding: 0 6vw 0 2vw; }
.reel__more .mono { color: var(--mute); }
.reel__more .reel__name { font-size: clamp(28px, 3.4vw, 60px); }

/* ==========================================================================
   LIGHT ZONE — services + clients
   ========================================================================== */
.light-zone { position: relative; z-index: 3; color: var(--ink); }
.light-zone .mono { color: var(--ink-mute); }
.services { position: relative; padding: clamp(120px, 18vh, 220px) var(--pad-r) clamp(80px, 12vh, 140px) var(--pad-l); }
.services__head { display: grid; gap: 24px; margin-bottom: clamp(48px, 7vw, 96px); }
.services__title { font-size: clamp(60px, 11vw, 210px); font-weight: 800; font-stretch: 118%; line-height: .84; letter-spacing: -.05em; }
.services__title em { font-weight: 500; }
.services__lede { max-width: 40ch; font-size: clamp(17px, 1.4vw, 21px); color: #33332f; }
.svc-list { border-top: 1px solid var(--ink-line); }
.svc {
  position: relative;
  display: grid; grid-template-columns: 70px minmax(0, 1.25fr) minmax(0, 1fr) minmax(190px, auto); align-items: center; gap: 12px 32px;
  padding: clamp(24px, 3vw, 44px) 0; border-bottom: 1px solid var(--ink-line);
  transition: opacity .5s var(--ease);
}
.svc-list:hover .svc { opacity: .35; }
.svc-list .svc:hover { opacity: 1; }
.svc__name {
  font-size: clamp(30px, 4.6vw, 84px); font-weight: 750; font-stretch: 100%; line-height: .95; letter-spacing: -.035em;
  transition: font-stretch 1s var(--ease);
}
.svc:hover .svc__name { font-stretch: 125%; }
.svc__desc { max-width: 38ch; color: #3b3b37; font-size: 15px; }
.svc__price { justify-self: end; display: flex; align-items: baseline; gap: 10px; font-size: clamp(26px, 2.6vw, 44px); font-weight: 700; font-stretch: 112%; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.svc__per { font-size: .5em; font-weight: 500; color: var(--ink-mute); }
.svc__thumb { display: none; }
.services__more { display: grid; grid-template-columns: 220px 1fr; gap: 24px 32px; margin-top: clamp(56px, 8vw, 110px); }
.services__more ul { display: grid; }
.services__more li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px 24px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--ink-line); font-size: clamp(18px, 1.7vw, 26px); font-weight: 600; font-stretch: 108%; letter-spacing: -.01em; }
.services__more li:last-child { border-bottom: 1px solid var(--ink-line); }
.services__more li .mono { font-weight: 400; letter-spacing: .06em; }
.services__more li > span:last-child { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.services__note { display: flex; justify-content: space-between; align-items: end; gap: 24px 48px; flex-wrap: wrap; margin-top: clamp(48px, 7vw, 96px); }
.services__note p { max-width: 46ch; font-size: clamp(17px, 1.4vw, 21px); color: #33332f; }
.services__note strong { color: var(--ink); font-weight: 650; }
.svc-preview {
  position: fixed; z-index: 40; top: 0; left: 0; width: clamp(240px, 22vw, 420px); aspect-ratio: 4 / 5;
  pointer-events: none; overflow: hidden; visibility: hidden; opacity: 0;
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .45);
}
.svc-preview video { width: 100%; height: 100%; object-fit: cover; }

.clients { padding: clamp(40px, 6vh, 80px) 0 clamp(120px, 18vh, 200px); overflow: hidden; }
.clients__kicker { padding: 0 var(--pad-r) 0 var(--pad-l); margin-bottom: clamp(24px, 3vw, 40px); }
.marquee { overflow: hidden; border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); padding: clamp(18px, 2.4vw, 34px) 0; }
.marquee__track { display: flex; width: max-content; }
.marquee__set { display: flex; align-items: center; flex-shrink: 0; }
.marquee__set span { font-size: clamp(44px, 7.4vw, 140px); font-weight: 800; font-stretch: 125%; letter-spacing: -.04em; line-height: 1; white-space: nowrap; padding: 0 clamp(18px, 2.6vw, 44px); }
.marquee__set i { width: clamp(10px, 1vw, 16px); height: clamp(10px, 1vw, 16px); border-radius: 50%; background: var(--rec); flex: 0 0 auto; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 110px); align-items: center;
  padding: clamp(120px, 18vh, 200px) var(--pad-r) clamp(120px, 16vh, 180px) var(--pad-l);
}
.about__portrait { display: grid; gap: 14px; }
.about__print { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: #1a0605; }
.about__print img { width: 100%; height: 100%; object-fit: cover; }
.about__print::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, rgba(255, 40, 20, .38), rgba(120, 0, 0, .55) 70%, rgba(40, 0, 0, .8));
  mix-blend-mode: multiply; opacity: 0; transition: opacity 2.8s cubic-bezier(.3, .7, .2, 1);
}
.js-motion .about__print img {
  filter: brightness(2.4) contrast(.28) saturate(0) blur(3px);
  transform: scale(1.08);
  transition: filter 3.2s cubic-bezier(.3, .7, .2, 1), transform 3.2s var(--ease);
}
.js-motion .about__print::after { opacity: 1; }
.js-motion .about__portrait.is-developed .about__print img { filter: brightness(1) contrast(1) saturate(1) blur(0); transform: scale(1); }
.js-motion .about__portrait.is-developed .about__print::after { opacity: 0; }
.about__portrait figcaption { display: flex; justify-content: space-between; gap: 16px; color: var(--mute); }
.about__text { display: grid; gap: 26px; max-width: 640px; }
.about__text > .mono { color: var(--mute); }
.about__title { font-size: clamp(46px, 6.4vw, 118px); font-weight: 800; font-stretch: 116%; line-height: .9; letter-spacing: -.045em; }
.about__title em { font-weight: 500; }
.about__lede { font-size: clamp(20px, 1.9vw, 28px); line-height: 1.35; letter-spacing: -.01em; color: var(--white); }
.about__text > p:not(.mono):not(.about__lede) { font-size: 17px; color: #bdbdb7; max-width: 52ch; }
.about__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.about__facts dt { color: var(--mute); margin-bottom: 4px; }
.about__facts dd { color: var(--white); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   CONTACT (end card)
   ========================================================================== */
.contact {
  position: relative; z-index: 3; min-height: 100vh;
  display: grid; align-content: center; justify-items: start; gap: clamp(20px, 3vw, 34px);
  padding: clamp(120px, 18vh, 200px) var(--pad-r) clamp(120px, 18vh, 200px) var(--pad-l);
  border-top: 1px solid var(--line);
}
.contact__slate { position: absolute; top: clamp(28px, 5vh, 56px); left: var(--pad-l); right: var(--pad-r); display: flex; justify-content: space-between; color: var(--mute); }
.contact__title { font-size: clamp(56px, 10.5vw, 200px); font-weight: 800; font-stretch: 116%; line-height: .86; letter-spacing: -.05em; max-width: 10ch; }
.contact__title em { font-weight: 500; letter-spacing: -.03em; }
.contact__sub { font-size: clamp(22px, 2.4vw, 36px); color: #cfcfca; letter-spacing: -.01em; margin-bottom: 12px; }
.contact__alt { color: var(--mute); }
.contact__alt a { color: var(--white); border-bottom: 1px solid var(--line); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { position: relative; z-index: 3; padding: clamp(56px, 8vh, 90px) 0 calc(var(--hud-h) + env(safe-area-inset-bottom, 0px) + 20px); border-top: 1px solid var(--line); }
.footer__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
  padding: 0 var(--pad-r) 0 var(--pad-l); font-size: 15px; color: #cfcfca;
}
.footer__grid .mono { color: var(--mute); margin-bottom: 10px; }
.footer__grid time { color: var(--white); font-variant-numeric: tabular-nums; }
.footer__top { justify-self: end; align-self: start; }
.footer__word { position: relative; isolation: isolate; margin-top: clamp(40px, 7vw, 100px); overflow: hidden; }
.footer__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.footer__mask {
  position: relative; z-index: 1; background: #000; color: #fff; mix-blend-mode: multiply;
  display: flex; justify-content: center; padding: 0 var(--pad-r) 0 var(--pad-l);
}
.footer__mask span {
  display: inline-block; font-size: 15.2vw; font-weight: 900; font-stretch: 125%; letter-spacing: -.045em; line-height: .8;
  padding: .04em 0 .02em; white-space: nowrap;
}
.footer__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding: 22px var(--pad-r) 0 var(--pad-l); color: var(--mute); }

/* ==========================================================================
   MENU
   ========================================================================== */
.menu {
  position: fixed; z-index: 70; inset: 0; background: var(--black);
  display: grid; grid-template-rows: 1fr auto;
  padding: calc(var(--top) + 90px) var(--pad-r) calc(env(safe-area-inset-bottom, 0px) + 28px) var(--pad-l);
}
.menu__links { display: grid; align-content: center; gap: 4px; }
.menu__links a { display: flex; align-items: baseline; gap: 18px; overflow: hidden; }
.menu__links .mono { color: var(--mute); }
.menu__name { display: inline-block; font-size: clamp(54px, 15vw, 120px); font-weight: 800; font-stretch: 112%; line-height: .98; letter-spacing: -.045em; transition: font-stretch .8s var(--ease); }
.menu__links a:hover .menu__name, .menu__links a:focus-visible .menu__name { font-stretch: 125%; }
.menu__foot { display: flex; justify-content: space-between; color: var(--mute); }
.menu__foot time { color: var(--white); }

/* ==========================================================================
   CASE VIEWER
   ========================================================================== */
/* The overlay stays transparent while the film frame grows out of the page, then turns solid */
.case { position: fixed; inset: 0; z-index: 80; background: transparent; }
.case.is-solid { background: var(--black); }
.case__scroller { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.case__content { position: relative; min-height: 100%; }
.case__intro, .case__gallery, .case__next { background: var(--black); }
.case__gallery { padding-bottom: 1px; }
.case__hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.case__media { position: absolute; inset: 0; background: var(--black); overflow: hidden; }
.case__loop, .case__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case__film { opacity: 0; transition: opacity .9s var(--ease); background: transparent; }
.case.is-playing .case__film { opacity: 1; }
.case.is-vertical .case__loop { filter: blur(28px) brightness(.45) saturate(1.2); transform: scale(1.15); }
.case.is-vertical .case__film { object-fit: contain; opacity: 1; }
.case__heroshade {
  position: absolute; inset: 0; pointer-events: none; transition: opacity .9s var(--ease);
  background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .1) 46%, rgba(0, 0, 0, 0) 66%),
              linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 22%);
}
.case.is-playing .case__heroshade { opacity: .35; }
.case__herocopy {
  position: absolute; z-index: 2; left: var(--pad-l); right: var(--pad-r);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 40px);
  display: grid; gap: 14px; pointer-events: none; transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.case.is-playing .case__herocopy { opacity: 0; transform: translateY(16px); pointer-events: none; }
.case__kicker { color: var(--mute); }
.case__title { font-size: clamp(52px, 9vw, 176px); font-weight: 780; font-stretch: 125%; line-height: .86; letter-spacing: -.045em; max-width: 11em; }
.case__play {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(120px, 11vw, 168px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; gap: 4px; text-align: center; color: var(--white);
  transition: transform .8s var(--ease), opacity .6s var(--ease);
}
.case__play-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(0, 0, 0, .18); transition: transform .8s var(--ease), background-color .5s; }
.case__play:hover .case__play-ring { transform: scale(1.08); background: rgba(0, 0, 0, .3); }
.case__play-label, .case__play-len { position: relative; }
.case__play-len { color: var(--mute); }
.case.is-playing .case__play { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.85); }
.case__controls {
  position: absolute; z-index: 3; left: var(--pad-l); right: var(--pad-r); bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 18px;
  color: var(--white);
}
.case__time { font-variant-numeric: tabular-nums; color: var(--mute); }
.case__progress { position: relative; height: 18px; display: flex; align-items: center; cursor: pointer; }
.case__progress::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, .25); }
.case__bar { position: absolute; left: 0; right: 0; height: 1px; background: var(--white); transform-origin: left; transform: scaleX(0); }
.case__close {
  position: fixed; z-index: 85; top: var(--top); right: var(--pad-r);
  display: inline-flex; gap: 10px; align-items: center; padding: 10px 16px; border-radius: 999px;
  color: var(--white); background: rgba(10, 10, 10, .4); border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.case__intro {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 120px); align-items: start;
  padding: clamp(80px, 12vh, 140px) var(--pad-r) clamp(60px, 9vh, 110px) var(--pad-l);
}
.case__lede { font-size: clamp(24px, 2.6vw, 44px); line-height: 1.22; letter-spacing: -.02em; font-weight: 400; color: var(--white); max-width: 26ch; }
.case__credits { display: grid; gap: 14px; padding-top: 10px; }
.case__credits div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.case__credits dt { color: var(--mute); }
.case__credits dd { color: var(--white); }
.case__gallery {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1vw, 16px);
  padding: 0 var(--pad-r) 0 var(--pad-l); align-items: start;
}
.g { position: relative; overflow: hidden; background: var(--black-2); grid-column: span 3; }
.g--full { grid-column: 1 / -1; }
.g--third { grid-column: span 2; }
.g img, .g video { width: 100%; height: auto; }
.g figcaption { position: absolute; left: 14px; bottom: 12px; color: var(--white); text-shadow: 0 1px 12px rgba(0, 0, 0, .6); display: flex; gap: 10px; align-items: center; }
.g .ai-tag { position: static; }
.g { clip-path: inset(8% 0% 0% 0%); opacity: 0; transform: translateY(40px); transition: clip-path 1.4s var(--ease), opacity 1s var(--ease), transform 1.4s var(--ease); }
.g.is-in { clip-path: inset(0% 0% 0% 0%); opacity: 1; transform: none; }
.case__next {
  display: grid; gap: 14px; width: 100%;
  padding: clamp(90px, 14vh, 160px) var(--pad-r) calc(env(safe-area-inset-bottom, 0px) + clamp(90px, 14vh, 150px)) var(--pad-l);
  margin-top: clamp(80px, 12vh, 140px); border-top: 1px solid var(--line);
}
.case__next .mono { color: var(--mute); }
.case__next-title { font-size: clamp(52px, 10vw, 196px); font-weight: 800; font-stretch: 100%; line-height: .86; letter-spacing: -.05em; transition: font-stretch 1.1s var(--ease), letter-spacing 1.1s var(--ease); }
.case__next:hover .case__next-title, .case__next:focus-visible .case__next-title { font-stretch: 125%; letter-spacing: -.035em; }

/* ==========================================================================
   ENQUIRY
   ========================================================================== */
.enquire { position: fixed; inset: 0; z-index: 82; background: var(--black); }
.enquire__scroller { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; }
.enquire__form, .enquire__thanks {
  max-width: 1100px; margin: 0 auto;
  padding: calc(var(--top) + 96px) var(--pad-r) calc(env(safe-area-inset-bottom, 0px) + 80px) var(--pad-l);
  display: grid; gap: clamp(36px, 5vw, 64px);
}
.enquire__kicker { color: var(--mute); margin-bottom: -24px; }
.enquire__title, .enquire__thanks h2 { font-size: clamp(46px, 7.4vw, 128px); font-weight: 800; font-stretch: 116%; line-height: .9; letter-spacing: -.045em; }
.enquire__title em, .enquire__thanks h2 em { font-weight: 500; }
.enquire__set { border: 0; margin: 0; padding: 0; display: grid; gap: 18px; min-width: 0; }
.enquire__set legend { color: var(--mute); padding: 0; margin-bottom: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.chip span {
  display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 15px; font-weight: 500; font-stretch: 108%;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.chip:hover span { border-color: rgba(244, 244, 240, .5); }
.chip input:checked + span { background: var(--white); color: var(--black); border-color: var(--white); }
.chip input:focus-visible + span { outline: 1px solid var(--white); outline-offset: 3px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
.field { position: relative; display: grid; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field input, .field textarea {
  width: 100%; min-width: 0; padding: 26px 0 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--white); font: inherit; font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -.01em;
  outline: none; transition: border-color .4s var(--ease); resize: vertical;
}
.field input:focus, .field textarea:focus { border-color: var(--white); }
.field label {
  position: absolute; left: 0; top: 26px; pointer-events: none; color: var(--mute);
  font-size: clamp(18px, 1.6vw, 24px); transform-origin: left top;
  transition: transform .5s var(--ease), color .4s var(--ease);
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-26px) scale(.55); color: var(--white); }
.field.is-invalid input { border-color: var(--rec); }
.enquire__send { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.enquire__status { max-width: 46ch; color: #cfcfca; font-size: 15px; }
.enquire__thanks { min-height: 100%; align-content: center; }
.enquire__thanks .mono { color: var(--mute); }
.enquire__thanks p:not(.mono) { font-size: 19px; color: #cfcfca; max-width: 40ch; }
.enquire__close {
  position: fixed; z-index: 85; top: var(--top); right: var(--pad-r);
  display: inline-flex; gap: 10px; align-items: center; padding: 10px 16px; border-radius: 999px;
  color: var(--white); border: 1px solid rgba(255, 255, 255, .22);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .svc { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .svc__desc { grid-column: 2 / 3; grid-row: 2; }
  .svc__price { grid-column: 3; grid-row: 1 / 3; align-self: center; }
  .about { grid-template-columns: 1fr; }
  .about__portrait { max-width: 560px; }
  .case__intro { grid-template-columns: 1fr; }
}

@media (max-width: 899px) {
  .chapter--ivita { --extra: .2; }
  .chapter--food { --extra: 1.1; }
  .trip { display: none; }
  .food { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .food__stills { order: -1; }
  .food__still figcaption { top: auto; bottom: 14px; }
  .chapter__side { max-width: none; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__top { justify-self: start; }
  .services__more { grid-template-columns: 1fr; }
  .services__more li { grid-template-columns: 1fr auto; }
  .services__more li .mono { grid-column: 1 / -1; grid-row: 2; }
  .g--third { grid-column: span 3; }
}

@media (max-width: 760px) {
  :root { --hud-h: 40px; }
  .nav__links { display: none; }
  .nav__menu { display: inline-flex; }
  .hud__fps, .loader__br { display: none; }
  .hud__row { grid-template-columns: 1fr auto; }
  .hud__ch { justify-self: end; }
  .hero__word { flex-direction: column; line-height: .8; }
  .hero__meta { grid-template-columns: 1fr 1fr; }
  .hero__meta .hero__scroll { display: none; }
  .hero__title { font-size: clamp(46px, 14.6vw, 90px); }
  .hero__foot { display: grid; gap: 22px; }
  .hero__ctas .btn { height: 48px; padding: 0 22px; }
  .index__row { grid-template-columns: 34px 1fr; }
  .index__type { grid-column: 2; text-align: left; }
  .chapter__title { font-size: clamp(44px, 13.4vw, 96px); }
  .chapter__credits div { grid-template-columns: 64px 1fr; }
  .chapter__foot { display: grid; gap: 22px; }
  .chapter__copy { padding-top: calc(var(--top) + 54px); }
  .reel__card--v .reel__media { height: 58vh; }
  .reel__card--h .reel__media { height: auto; width: 84vw; }
  .reel__intro { width: 82vw; }
  .svc { grid-template-columns: 1fr auto; gap: 14px 18px; }
  .svc__num { display: none; }
  .svc__name { grid-column: 1; grid-row: 1; }
  .svc__price { grid-column: 2; grid-row: 1; font-size: 24px; }
  .svc__desc { grid-column: 1 / -1; grid-row: 2; }
  .svc__thumb { display: block; grid-column: 1 / -1; grid-row: 3; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
  .svc-list:hover .svc { opacity: 1; }
  .svc-preview { display: none; }
  .about__facts { grid-template-columns: 1fr; }
  .contact__slate { position: static; margin-bottom: 20px; width: 100%; }
  .fields { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .case__controls { grid-template-columns: auto 1fr auto; }
  .case__time { display: none; }
  .g, .g--third { grid-column: 1 / -1; }
}

/* ==========================================================================
   REDUCED MOTION — everything static, readable, no autoplay
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .grain, .hero__scroll-line, .hud__dot { animation: none; }
  .btn__t > span, .link::after { transition: none; }
  .g { clip-path: none; opacity: 1; transform: none; transition: none; }
  .js-motion .about__print img { filter: none; transform: none; }
  .js-motion .about__print::after { opacity: 0; }
}