/* HK Visuals, v2. Page styles on top of scrollcraft.css (the engine's floor).
   Nothing pins: every moving thing is a transform driven by where its own box
   sits in the viewport. Monochrome: swap the six values below to rebrand. */

@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Geist"; src: url("assets/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("assets/fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  --sc-canvas:     #09090a;
  --sc-surface:    #141416;
  --sc-ink:        #f2efe9;
  --sc-ink-soft:   #a5a29b;
  --sc-accent:     #f2efe9;   /* no colour accent for now: emphasis is the ink itself */
  --sc-accent-ink: #0b0a09;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;
  --sc-maxw: none;
  --sc-gutter: clamp(1.1rem, 3.2vw, 4.2rem);

  --g: var(--sc-gutter);
  --gap: clamp(0.6rem, 1.3vw, 1.5rem);
  --r: 6px;            /* one corner radius for every frame, tile and button */
  --bar-h: 4rem;
  --rail-h: 2.9rem;
  /* z scale: page layers 0-4, grain 3 (engine), chrome 20, dialog = top layer */
  --z-chrome: 20;
}

.sc-display { font-stretch: 112%; font-weight: 600; }
.sc-lede { color: var(--sc-ink); }
h1, h2, h3, p, figure { margin: 0; }
button { cursor: pointer; }
[data-px], [data-slide] { will-change: transform; }

/* ------------------------------------------------------------- controls -- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.95em 1.45em;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 600; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  border: 0; border-radius: var(--r);
  transition: background-color 160ms var(--sc-ease-out), transform 140ms var(--sc-ease-out);
}
.btn--small { padding: 0.62em 1.05em; font-size: var(--sc-t-sm); }
.btn--ghost { background: none; color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); }
.btn--ghost small { font-family: var(--sc-font-mono); font-weight: 400; font-size: 0.68em; letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); }
.btn[aria-disabled="true"] { cursor: default; }
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .btn:not(.btn--ghost):hover { background: #ffffff; } }
.ico { display: inline-block; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; flex: none; }
.ico--arrow { --i: url("assets/icons/arrow-up-right.svg"); }
.ico--play  { --i: url("assets/icons/play-fill.svg"); }
.ico--pause { --i: url("assets/icons/pause-fill.svg"); }
.ico--x     { --i: url("assets/icons/x.svg"); }

/* media buttons: storyboard, final cut, gallery tiles */
.take__board, .take__final, .tile {
  position: relative; display: block; padding: 0; border: 0; overflow: hidden;
  background: var(--sc-surface); border-radius: var(--r);
  box-shadow: 0 18px 50px -18px rgb(0 0 0 / 0.7), var(--sc-edge);
}
:is(.take__board, .take__final, .tile) video { width: 100%; height: 100%; object-fit: cover; transition: scale 500ms var(--sc-ease-out); }
:is(.take__board, .take__final, .tile)::after {
  content: ""; position: absolute; left: 0.9rem; bottom: 0.9rem; width: 2.4rem; height: 2.4rem;
  border-radius: var(--r); background: var(--sc-ink); opacity: 0; translate: 0 6px;
  -webkit-mask: url("assets/icons/play-fill.svg") center / 1rem no-repeat, linear-gradient(#000 0 0);
  mask: url("assets/icons/play-fill.svg") center / 1rem no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity 180ms var(--sc-ease-out), translate 180ms var(--sc-ease-out);
}
:is(.take__board, .take__final, .tile):focus-visible::after { opacity: 1; translate: 0 0; }
@media (hover: hover) and (pointer: fine) {
  :is(.take__board, .take__final, .tile):hover::after { opacity: 1; translate: 0 0; }
  :is(.take__board, .take__final, .tile):hover video { scale: 1.025; }
}

/* ------------------------------------------------------------ top bar ---- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-chrome); height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--g); pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar__mark { display: block; opacity: 0; translate: 0 -6px; transition: opacity 260ms var(--sc-ease-out), translate 260ms var(--sc-ease-out); }
.bar__mark img { height: 1.9rem; width: auto; }
.past-hero .bar__mark { opacity: 1; translate: 0 0; }

/* shared: full-bleed footage layers that drift slower than the page */
:is(.hero__media, .band__media, .strip__media, .color__media) { position: absolute; inset: -14% 0; }
:is(.hero__media, .band__media, .strip__media, .color__media) :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:is(.hero__media, .band__media, .strip__media, .color__media) video { opacity: 0; transition: opacity 500ms var(--sc-ease-out); }
:is(.hero__media, .band__media, .strip__media, .color__media) video.is-live { opacity: 1; }

/* ------------------------------------------------- reel ------------------ */
.hero { position: relative; height: 100svh; min-height: 36rem; overflow: clip; }
.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, var(--sc-canvas) 0%, color-mix(in oklab, var(--sc-canvas) 62%, transparent) 20%, transparent 52%),
    linear-gradient(to top right, color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 45%, transparent) 34%, transparent 62%);
}
.hero__copy { position: absolute; z-index: 2; left: var(--g); bottom: clamp(8rem, 25vh, 16rem); max-width: min(36rem, 84vw); }
.hero__logo img { width: clamp(15rem, 31vw, 31rem); height: auto; margin-left: -0.6%; }
.hero__line { margin-top: var(--sc-5); font-size: var(--sc-t-lg); line-height: 1.4; max-width: 26ch; text-wrap: balance; text-shadow: 0 1px 18px rgb(0 0 0 / 0.55); }

/* ------------------------------------------------- idea ------------------ */
/* One composition. The timeline footage is a backdrop that stays behind while
   the lines and the storyboard pairs travel over it at their own rates. It is
   the only sticky element on the page and it holds nothing in place: every
   piece of content keeps moving with the scroll. */
.idea { position: relative; z-index: 1; margin-top: -26svh; padding: 0 var(--g) clamp(1.5rem, 5vh, 3.5rem); }
/* the wrapper spans the zone exactly, so the backdrop can never outlive it */
.idea__wrap { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.idea__back { position: sticky; top: 0; height: 100svh; overflow: clip;
  -webkit-mask-image: linear-gradient(transparent, #000 26%, #000 74%, transparent); mask-image: linear-gradient(transparent, #000 26%, #000 74%, transparent); }
.idea__back :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.idea__back video { opacity: 0; transition: opacity 500ms var(--sc-ease-out); }
.idea__back video.is-live { opacity: 1; }
.idea__back::after { content: ""; position: absolute; inset: 0; background: color-mix(in oklab, var(--sc-canvas) 46%, transparent); }
.idea__flow { position: relative; z-index: 1; padding-top: 36svh; }
.idea__lead { width: fit-content; }
.idea__line { font-size: clamp(2.8rem, 5.9vw, 7.2rem); max-width: 9ch; text-shadow: 0 2px 34px rgb(0 0 0 / 0.65); }
.idea__sub { margin-top: var(--sc-5); max-width: 24ch; text-shadow: 0 1px 18px rgb(0 0 0 / 0.7); }
.idea__line--b { margin: -16vw 0 0 auto; text-align: right; max-width: 8ch; }
.pulse { font-style: normal; display: inline-block; transform-origin: 50% 70%; }
@media (prefers-reduced-motion: no-preference) { .pulse { animation: beat 1.5s var(--sc-ease-out) infinite; } }
@keyframes beat { 0%, 36%, 100% { transform: scale(1); } 9% { transform: scale(1.07); } 18% { transform: scale(1); } 26% { transform: scale(1.04); } }

.take { --t: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--sc-4); align-items: center; }
.take > * { grid-row: 1; }
.take__board, .take__final { aspect-ratio: 1; }
.take__final video { clip-path: inset(0 calc((1 - var(--t)) * 100%) 0 0); }
.take__render { position: relative; height: 2px; background: var(--sc-hairline-strong); }
.take__render::after { content: ""; position: absolute; inset: 0; background: var(--sc-ink); transform-origin: 0 50%; transform: scaleX(var(--t)); }
.take__name { grid-row: 2; color: var(--sc-ink); font-size: var(--sc-t-sm); text-shadow: 0 1px 14px rgb(0 0 0 / 0.8); }
.take__name strong { display: block; font-family: var(--sc-font-display); font-stretch: 112%; font-weight: 600; font-size: var(--sc-t-xl); letter-spacing: -0.02em; }
/* each pair sits beside a line of the sentence, not under a heading of its own */
.take--1 { margin-top: -2.5vw; }
.take--1 .take__board { grid-column: 5 / 8; }  .take--1 .take__render { grid-column: 8 / 9; }  .take--1 :is(.take__final, .take__name) { grid-column: 9 / 13; }
.take--2 { margin-top: clamp(1.5rem, 5vh, 3.5rem); }
.take--2 .take__board { grid-column: 1 / 3; }  .take--2 .take__render { grid-column: 3 / 4; }  .take--2 :is(.take__final, .take__name) { grid-column: 4 / 8; }
/* line B is pulled up beside pair two, so pair three clears pair two by its own margin */
.take--3 { margin-top: calc(5vw + clamp(1.5rem, 4vh, 3rem)); }
.take--3 .take__board { grid-column: 4 / 7; }  .take--3 .take__render { grid-column: 7 / 8; }  .take--3 :is(.take__final, .take__name) { grid-column: 8 / 12; }

/* ------------------------------------------------- sound band ------------ */
/* not clipped: the footage fades out at both ends, so it can drift past its own box */
.band { position: relative; z-index: 1; height: 132svh; margin-top: clamp(2rem, 8vh, 6rem); pointer-events: none; }
.band__media { inset: 0; -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 72%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 72%, transparent); }
.band__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(52rem 24rem at 10% 42%, color-mix(in oklab, var(--sc-canvas) 78%, transparent), transparent 70%),
    radial-gradient(52rem 24rem at 90% 66%, color-mix(in oklab, var(--sc-canvas) 78%, transparent), transparent 70%);
}
.band__line { position: absolute; z-index: 2; pointer-events: auto; font-size: var(--sc-t-3xl); max-width: 13ch; }
.band__line--a { left: var(--g); top: 36%; }
.band__line--b { right: var(--g); top: 60%; text-align: right; }

/* ------------------------------------------------- work ------------------ */
.work { position: relative; }
.strip { position: relative; aspect-ratio: 1920 / 540; overflow: clip; -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 60%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 60%, transparent); }
.work__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(15rem, 25vw) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; padding-inline: var(--g); margin-top: clamp(-7rem, -5vw, -2rem); }
.work__via { display: flex; align-items: center; gap: 0.6em; margin-top: var(--sc-8); color: var(--sc-ink-soft); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; }
.work__via img { height: 0.95rem; width: auto; filter: invert(1); opacity: 0.92; }
.work__names { list-style: none; margin: var(--sc-3) 0 0; padding: 0; }
.work__name {
  position: relative; display: block; width: 100%; padding: 0.08em 0; border: 0; background: none; text-align: left;
  font-family: var(--sc-font-display); font-stretch: 112%; font-weight: 600; font-size: var(--sc-t-2xl); line-height: 1.12; letter-spacing: -0.03em;
  color: color-mix(in oklab, var(--sc-ink) 40%, transparent);
  transition: color 180ms var(--sc-ease-out), translate 260ms var(--sc-ease-out);
}
.work__name::before { content: ""; position: absolute; left: -0.75rem; top: 18%; bottom: 18%; width: 2px; background: var(--sc-ink); transform: scaleY(0); transition: transform 220ms var(--sc-ease-out); }
.work__name.is-on { color: var(--sc-ink); translate: 0.75rem 0; }
.work__name.is-on::before { transform: scaleY(1); }
@media (hover: hover) and (pointer: fine) { .work__name:hover { color: var(--sc-ink); } }
.work__stage { display: grid; align-items: start; padding-top: clamp(0rem, 6vw, 7rem); }
.set { grid-area: 1 / 1; display: grid; gap: 0.7rem; opacity: 0; visibility: hidden; translate: 0 14px; transition: opacity 380ms var(--sc-ease-out), translate 380ms var(--sc-ease-out), visibility 0s 380ms; }
.set.is-on { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.tile--camp { aspect-ratio: 16 / 9; }
.tile--social { aspect-ratio: 9 / 16; }
.set--a { width: min(100%, calc((100svh - 11rem) * 16 / 9)); }
.set--b { grid-template-columns: 3.16fr 1fr 1fr; }
.set--c { grid-template-columns: 1fr 2.16fr 1fr; width: min(100%, calc((100svh - 9rem) / 0.88)); }
.set--c > :nth-child(1) { grid-column: 1 / 3; }
.set--c > :nth-child(4) { grid-column: 2 / 4; }
.set__label { grid-column: 1 / -1; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); margin-top: var(--sc-2); }

/* ------------------------------------------------- colour ---------------- */
.color { position: relative; margin-top: clamp(4rem, 12vh, 9rem); }
.color__film { position: relative; aspect-ratio: 1920 / 800; overflow: clip; }
.color__film::after { content: ""; position: absolute; inset: 52% 0 0 0; pointer-events: none; background: linear-gradient(transparent, var(--sc-canvas)); }
.color__copy { position: relative; z-index: 2; padding-inline: var(--g); margin-top: clamp(-11rem, -9vw, -3rem); }
.color__title { font-size: clamp(3rem, 9vw, 11rem); line-height: 0.9; max-width: 10ch; }
.color__copy .sc-lede { margin-top: var(--sc-6); max-width: 40ch; }

.grades, .phones__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.grades { padding-inline: var(--g); margin-top: clamp(2.5rem, 8vh, 6rem); }
.cmp { --x: 1; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); background: var(--sc-surface); container-type: inline-size; }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp__graded { clip-path: inset(0 0 0 calc(var(--x) * 100%)); }
.cmp::after { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--sc-ink); transform: translateX(calc(var(--x) * 100cqw)); pointer-events: none; }
.cmp::before { content: ""; position: absolute; z-index: 1; left: -0.3rem; top: calc(50% - 1.4rem); width: 0.6rem; height: 2.8rem; border-radius: var(--r); background: var(--sc-ink); box-shadow: 0 6px 18px rgb(0 0 0 / 0.45); transform: translateX(calc(var(--x) * 100cqw)); pointer-events: none; }
.cmp__range { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.cmp:has(.cmp__range:focus-visible) { outline: 2px solid var(--sc-ink); outline-offset: 3px; }
.cmp--g1 { grid-column: 1 / 13; aspect-ratio: 21 / 9; }
.cmp--g2 { grid-column: 1 / 8; }   .cmp--g3 { grid-column: 8 / 13; margin-top: 9vw; }
.cmp--g4 { grid-column: 2 / 6; }   .cmp--g5 { grid-column: 6 / 13; }

.phones { position: relative; padding-inline: var(--g); margin-top: clamp(4rem, 13vh, 10rem); }
.phones__title { font-size: clamp(2.6rem, 6.4vw, 7.5rem); line-height: 0.94; max-width: 12ch; }
.phones__head .sc-lede { margin-top: var(--sc-5); max-width: 38ch; }
/* secondary grades: two named groups of small frames, the camera is the headline */
.cams { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 6rem); align-items: start; margin-top: clamp(3rem, 9vh, 6rem); }
.cam--gp { margin-top: clamp(3rem, 10vw, 10rem); }
.cam__name { font-family: var(--sc-font-display); font-stretch: 112%; font-weight: 600; font-size: clamp(2.4rem, 5.4vw, 6rem); line-height: 0.92; letter-spacing: -0.035em; }
.cam__name span { display: block; margin-bottom: 0.7em; font-family: var(--sc-font-mono); font-stretch: normal; font-weight: 400; font-size: var(--sc-t-xs); line-height: 1; letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); }
.cam__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: var(--sc-5); }
.cam .cmp::before { left: -0.2rem; top: calc(50% - 0.9rem); width: 0.4rem; height: 1.8rem; }
.cmp--gp1 { grid-column: 1 / -1; aspect-ratio: 21 / 9; }

.looks { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(2rem, 7vw, 8rem); margin-top: clamp(4rem, 13vh, 10rem); }
.looks__stack { position: relative; aspect-ratio: 5 / 4; }
.looks__stack img { position: absolute; width: 72%; height: auto; border-radius: var(--r); box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.85), var(--sc-edge); }
/* three frames fanned at the back, then the two leads: the GoPro frame and the pack */
.looks__stack img:nth-child(1) { width: 50%; left: 0; top: 0; rotate: -7deg; }
.looks__stack img:nth-child(2) { width: 50%; right: 0; top: 5%; rotate: 5deg; }
.looks__stack img:nth-child(3) { width: 50%; left: 4%; bottom: 0; rotate: -3deg; }
.looks__stack .looks__main { width: 76%; right: 2%; top: 27%; rotate: 1.5deg; }
.looks__stack .looks__box { width: 35%; left: 9%; top: 16%; rotate: -4deg; }
.looks__cta { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-6); }

/* ------------------------------------------------- mix ------------------- */
.mix { position: relative; z-index: 2; margin-top: -20svh; padding-block: clamp(3rem, 9vh, 6rem) clamp(4rem, 12vh, 8rem); overflow: clip; }
.mix__bed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.3; -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 28%, #000 78%, transparent); }
.mix__veil { position: absolute; inset: 0; background: radial-gradient(90% 80% at 66% 50%, color-mix(in oklab, var(--sc-canvas) 80%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 50%, transparent) 72%); }
.mix__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(17rem, 0.62fr) 1.6fr; gap: clamp(2rem, 5vw, 6rem); align-items: center; padding-inline: var(--g); }
.mix__copy h2 { font-size: clamp(2.6rem, 4.6vw, 4.6rem); }
.deck { width: min(100%, calc((100svh - 21rem) * 16 / 9)); justify-self: end; }
.deck__screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); background: var(--sc-surface); box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.85), var(--sc-edge); }
.deck__video { width: 100%; height: 100%; object-fit: cover; }
.deck__play { position: absolute; left: 0.9rem; bottom: 0.9rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 0; border-radius: var(--r); background: var(--sc-ink); color: var(--sc-accent-ink); transition: scale 140ms var(--sc-ease-out); }
.deck__play:active { scale: 0.95; }
.deck__lanes { position: relative; display: grid; gap: 0.35rem; margin-top: 0.8rem; --lab: 7.4rem; }
.lane { display: grid; grid-template-columns: var(--lab) 1fr; align-items: center; gap: 0.75rem; }
.lane__btn { display: flex; align-items: center; gap: 0.6rem; height: 2.6rem; padding: 0 0.8rem; border: 0; border-radius: var(--r); background: color-mix(in oklab, var(--sc-ink) 7%, transparent); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); font-weight: 500; text-align: left; transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), scale 120ms var(--sc-ease-out); }
.lane__btn::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 2px; background: color-mix(in oklab, var(--sc-ink) 26%, transparent); flex: none; transition: background-color 160ms var(--sc-ease-out); }
.lane__btn[aria-pressed="true"] { background: var(--sc-ink); color: var(--sc-accent-ink); }
.lane__btn[aria-pressed="true"]::before { background: var(--sc-accent-ink); }
.lane__btn:active { scale: 0.97; }
.lane__wave { width: 100%; height: 2.6rem; border-radius: var(--r); background: color-mix(in oklab, var(--sc-ink) 4%, transparent); opacity: 0.34; cursor: pointer; transition: opacity 200ms var(--sc-ease-out); }
.lane:has([aria-pressed="true"]) .lane__wave { opacity: 1; }
.deck__head { position: absolute; z-index: 2; top: -0.3rem; bottom: -0.3rem; left: calc(var(--lab) + 0.75rem - 1px); width: 2px; background: var(--sc-ink); pointer-events: none; will-change: transform; }
.deck__meta { display: flex; gap: var(--sc-5); align-items: baseline; margin-top: var(--sc-4); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.deck__time { font-family: var(--sc-font-mono); font-variant-numeric: tabular-nums; color: var(--sc-ink); }

/* ------------------------------------------------- close ----------------- */
/* One screen, never taller: the name, the portrait and the ask share the last
   viewport, so nothing is cut when the page reaches its end. */
.close { position: relative; height: 100svh; min-height: 30rem; display: flex; flex-direction: column; padding: calc(var(--bar-h) + 1svh) var(--g) calc(var(--rail-h) + 0.9rem); overflow: clip; }
.close__name { flex: none; font-family: var(--sc-font-display); font-stretch: 118%; font-weight: 700; text-transform: uppercase; font-size: min(var(--name-vw, 12.6vw), 19svh); line-height: 0.86; letter-spacing: -0.045em; white-space: nowrap; }
.close__name span { display: block; width: max-content; will-change: transform; }
.close__row { flex: 1 1 0; min-height: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gap); margin-top: clamp(0.75rem, 2.5svh, 2rem); }
.close__photo { flex: none; height: 100%; aspect-ratio: 4 / 5; margin-right: clamp(0rem, 5vw, 7rem); overflow: hidden; border-radius: var(--r); background: var(--sc-surface); box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.9); will-change: transform; }
.close__photo img { width: 100%; height: 100%; object-fit: cover; }
.close__cta-title { font-size: clamp(2.4rem, min(6.4vw, 12svh), 8.5rem); line-height: 0.9; max-width: 9ch; }
.close__ask .btn { margin-top: clamp(1.1rem, 3.5svh, 2.4rem); }
.foot { flex: none; margin-top: 0.9rem; color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }

/* ------------------------------------------------- the rail -------------- */
.rail {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-chrome); height: var(--rail-h);
  display: grid; grid-template-columns: auto 1fr; align-items: stretch;
  background: color-mix(in oklab, var(--sc-canvas) 86%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--sc-hairline);
}
.rail__tc { display: grid; place-items: center; padding-inline: var(--g) 1.1rem; font-family: var(--sc-font-mono); font-size: 0.72rem; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--sc-ink); border-right: 1px solid var(--sc-hairline); min-width: 9.2rem; }
.rail__track { position: relative; margin-right: var(--g); background: linear-gradient(transparent calc(33.33% - 0.5px), var(--sc-hairline) 0 calc(33.33% + 0.5px), transparent 0 calc(66.66% - 0.5px), var(--sc-hairline) 0 calc(66.66% + 0.5px), transparent 0); }
.clip {
  position: absolute; left: calc(var(--cx, 0) * 100%); width: calc(var(--cw, 0) * 100% - 2px); height: calc(33.33% - 3px); margin-top: 1.5px;
  display: flex; align-items: center; padding-inline: 0.4rem; overflow: hidden; white-space: nowrap;
  font-family: var(--sc-font-mono); font-size: 0.58rem; letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none;
  color: var(--sc-ink-soft); background: color-mix(in oklab, var(--sc-ink) 9%, transparent); border-radius: 2px;
  transition: background-color 240ms var(--sc-ease-out), color 240ms var(--sc-ease-out);
}
.clip[data-lane="v"] { top: 0; } .clip[data-lane="c"] { top: 33.33%; } .clip[data-lane="a"] { top: 66.66%; }
.clip.is-passed { background: color-mix(in oklab, var(--sc-ink) 24%, transparent); color: var(--sc-ink); }
.clip.is-current { background: var(--sc-ink); color: var(--sc-accent-ink); }
.clip--sound:not(.is-current) { background-image: repeating-linear-gradient(90deg, color-mix(in oklab, var(--sc-ink) calc(var(--stems, 0) * 14%), transparent) 0 2px, transparent 2px 5px); }
.clip:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .clip:not(.is-current):hover { background: color-mix(in oklab, var(--sc-ink) 34%, transparent); color: var(--sc-ink); } }
.rail__head { position: absolute; top: -5px; bottom: 0; left: -1px; width: 2px; background: var(--sc-ink); mix-blend-mode: difference; pointer-events: none; will-change: transform; }
.rail__head::before { content: ""; position: absolute; left: -4px; top: 0; width: 10px; height: 7px; background: var(--sc-ink); clip-path: polygon(0 0, 100% 0, 100% 45%, 50% 100%, 0 45%); }

/* ------------------------------------------------- player ---------------- */
.player { width: min(92vw, 150svh); max-width: none; padding: 0; border: 0; background: transparent; color: var(--sc-ink); overflow: visible; }
.player::backdrop { background: rgb(5 5 6 / 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.player[open] { animation: rise 260ms var(--sc-ease-out); }
@keyframes rise { from { opacity: 0; transform: scale(0.97); } }
.player__video { width: 100%; max-height: 78svh; background: #050506; border-radius: var(--r); }
.player__title { margin-top: var(--sc-3); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.player__close { position: absolute; right: 0; top: -3.1rem; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border: 0; border-radius: var(--r); background: color-mix(in oklab, var(--sc-ink) 12%, transparent); color: var(--sc-ink); font-size: 1.1rem; }

/* ------------------------------------------------- phones ---------------- */
@media (max-width: 860px) {
  :root { --rail-h: 2.5rem; --gap: 0.5rem; }
  .band { height: 104svh; margin-top: 1rem; }
  .band__line--a { top: 32%; } .band__line--b { top: 58%; }

  .idea { margin-top: -20svh; }
  .idea__flow { padding-top: 28svh; }
  .idea__line { font-size: var(--sc-t-3xl); max-width: none; }
  .idea__line--b { margin: var(--sc-7) 0 0 auto; max-width: 8ch; }

  .take, .take--1, .take--2, .take--3 { grid-template-columns: 1fr; row-gap: var(--sc-3); margin-top: var(--sc-7); }
  .take--1 { margin-top: var(--sc-8); }
  .take > * { grid-row: auto; grid-column: 1 !important; }
  .take__board { width: 44%; }
  .take__render { width: 2px; height: 1.5rem; margin-left: 22%; }
  .take__render::after { transform-origin: 50% 0; transform: scaleY(var(--t)); }
  .take__final video { clip-path: inset(0 0 calc((1 - var(--t)) * 100%) 0); }

  .work__grid { grid-template-columns: 1fr; margin-top: var(--sc-4); gap: var(--sc-6); }
  .work__via { margin-top: var(--sc-6); }
  .work__names { display: flex; flex-wrap: wrap; gap: 0.1rem 1.1rem; }
  .work__name { width: auto; font-size: var(--sc-t-xl); }
  .work__name.is-on { translate: 0 0; }
  .work__name::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 2px; transform: scaleX(0); transform-origin: 0 50%; }
  .work__name.is-on::before { transform: scaleX(1); }
  .work__stage { padding-top: 0; }
  .set--a, .set--c { width: 100%; }

  .color { margin-top: var(--sc-9); }
  .color__film { aspect-ratio: 16 / 10; }
  .color__copy { margin-top: -2.5rem; }
  .grades { margin-top: var(--sc-7); }
  .grades > .cmp { grid-column: 1 / -1; aspect-ratio: 16 / 9; margin-top: 0; }
  .cams { grid-template-columns: 1fr; margin-top: var(--sc-7); }
  .cam--gp { margin-top: var(--sc-7); }
  .phones { margin-top: var(--sc-9); }
  .looks { grid-template-columns: 1fr; margin-top: var(--sc-9); }

  .mix { margin-top: -12svh; }
  .mix__grid { grid-template-columns: 1fr; }
  .deck { width: 100%; }
  .deck__lanes { --lab: 5.6rem; }
  .lane__btn { padding: 0 0.55rem; gap: 0.45rem; }
  .deck__hint { display: none; }

  .close { padding-bottom: calc(var(--rail-h) + 0.7rem); }
  .close__row { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: clamp(0.8rem, 2.2svh, 1.4rem); margin-top: clamp(0.6rem, 1.8svh, 1.2rem); }
  .close__photo { order: -1; flex: 1 1 0; min-height: 0; height: auto; max-width: 100%; align-self: flex-end; margin-right: 0; }
  .close__cta-title { font-size: min(11vw, 7.5svh); max-width: none; }
  .close__ask .btn { margin-top: clamp(0.7rem, 2svh, 1.2rem); }
  .foot { margin-top: 0.6rem; }

  .rail__tc { min-width: 0; padding-inline: 0.75rem 0.6rem; font-size: 0.62rem; }
  .rail__track { margin-right: 0.75rem; }
  .clip { font-size: 0; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .take { --t: 1 !important; }
  .cmp { --x: 0.5; }
  .set, .work__name, .bar__mark { transition-duration: 1ms; }
}