/* ==========================================================================
   Home: the program monitor.
   One vertical frame stays on screen for the whole page; the document scrolls
   past it and every section cuts it. Desktop puts the frame on the right with
   a filmstrip down the edge. On a phone the frame IS the screen.
   ========================================================================== */

:root {
  --vw: 100vw;
  --frame-max: 1680px;
  --edge: max(0px, (var(--vw) - var(--frame-max)) / 2);
  --strip-x: 18px;
  --strip-w: 28px;
  --mh: min(calc(100svh - var(--bar-h) - 48px), 900px);
  --mw: calc(var(--mh) * 0.5625);
  --m-top: calc(var(--bar-h) + (100svh - var(--bar-h) - var(--mh)) / 2);
  /* Text column and monitor are one composed group with a fixed gutter between
     them. Spare width goes to the outer margins, never to the middle. */
  --gap-m: clamp(36px, 3.4vw, 60px);
  --strip-zone: 72px;
  --avail: calc(var(--vw) - var(--strip-zone) - 2 * var(--gutter) - var(--mw) - var(--gap-m));
  --colw: min(var(--avail), 820px);
  --col-l: calc(var(--gutter) + (var(--avail) - var(--colw)) / 2);
  --m-left: calc(var(--col-l) + var(--colw) + var(--gap-m));
  --m-right: calc(var(--vw) - var(--m-left) - var(--mw));
  --col-r: calc(var(--vw) - var(--col-l) - var(--colw));
}

.home main { position: relative; }

/* ------------------------------------------------------------ the room --
   Far plane: the monitor's light spilling into the room. A 24x40 canvas of the
   live frame, stretched and softened. Never sharp, never competing. */
.room {
  position: fixed; z-index: 0; pointer-events: none;
  right: calc(var(--m-right) - var(--mw) * 0.75);
  top: calc(var(--m-top) - var(--mh) * 0.22);
  width: calc(var(--mw) * 2.5); height: calc(var(--mh) * 1.44);
  opacity: 0.34;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
  transition: opacity 400ms var(--ease);
}
.room__bleed { width: 100%; height: 100%; filter: blur(28px) saturate(1.35); transform: scale(1.06); }
html[data-mground="paper"] .room, html.is-open .room { opacity: 0; }

/* --------------------------------------------------------- the monitor -- */
.monitor {
  position: fixed; z-index: 30; margin: 0;
  right: var(--m-right); top: var(--m-top);
  width: var(--mw); height: var(--mh);
  transition: opacity 240ms var(--ease);
}
.monitor__frame {
  position: relative; width: 100%; height: 100%;
  border-radius: var(--r-frame); overflow: hidden; isolation: isolate;
  background: #050505;
  box-shadow:
    0 2px 4px hsl(30 8% 2% / 0.5),
    0 24px 48px -12px hsl(30 8% 2% / 0.7),
    0 60px 120px -30px hsl(30 8% 2% / 0.6);
}
/* Edge light: the lip of the frame catches the room. */
.monitor__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.10), inset 0 0 0 1px rgb(255 255 255 / 0.05);
}
.clip { position: absolute; inset: 0; visibility: hidden; }
.clip.is-on { visibility: visible; }
.clip > img, .clip > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none;
}
/* The poster holds the frame until a real one has painted. Cuts are instant:
   no transition on purpose. */
.clip > video { opacity: 0; }
.clip.is-live > video { opacity: 1; }
.clip--wide > img, .clip--wide > video { object-fit: contain; }
.monitor__black { position: absolute; inset: 0; z-index: 3; background: #000; opacity: 0; }
.monitor.is-black .monitor__black { opacity: 1; }
/* The silence before the peak is a slate, not an empty frame. */
.slate { position: absolute; left: 10%; right: 10%; top: 50%; translate: 0 -50%; display: grid; gap: 6px; color: var(--bone); }
.slate__k { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tally); }
.slate__n { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1; letter-spacing: -0.02em; }
.slate__t { font-size: 1.0625rem; font-weight: 500; }
.slate__m { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); }
.slate__m i { font-style: normal; }
.slate__bar { margin-top: 14px; height: 2px; background: rgb(241 238 232 / 0.16); overflow: hidden; }
.slate__bar i { display: block; height: 100%; background: var(--tally); transform-origin: 0 50%; transform: scaleX(0); }
.monitor.is-black .slate__bar i { animation: nk-slate 2.4s linear forwards; }
@keyframes nk-slate { to { transform: scaleX(1); } }
@media (max-width: 899px) { .slate { display: none; } }
@media (prefers-reduced-motion: reduce) { .monitor.is-black .slate__bar i { animation: none; transform: scaleX(1); } }

.monitor__slate {
  position: absolute; left: 2px; right: 2px; top: calc(100% + 10px);
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ash);
}
.monitor__now { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monitor__tc { color: var(--bone); }
.monitor__tc::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: 1px;
  border-radius: 50%; background: var(--tally); opacity: 0;
}
.monitor.is-playing .monitor__tc::before { opacity: 1; }

html[data-mground="paper"] .monitor { opacity: 0; }
html.is-open .monitor { opacity: 0; }

/* -------------------------------------------------------- the filmstrip -- */
.strip {
  position: fixed; z-index: 50;
  right: var(--strip-x); top: calc(var(--bar-h) / 2 + 50%); transform: translateY(-50%);
  transition: opacity 300ms var(--ease);
}
.strip__list { display: grid; gap: 6px; }
.strip__slot { position: relative; display: block; width: var(--strip-w); text-decoration: none; }
.strip__thumb {
  position: relative; display: block; width: var(--strip-w); height: 50px; overflow: hidden;
  border-radius: 4px; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 160ms var(--ease), transform 160ms var(--ease);
}
.strip__thumb > img {
  width: 100%; height: 100%; object-fit: cover; max-width: none;
  opacity: 0; filter: saturate(0.7) brightness(0.72);
  transition: filter 200ms var(--ease);
}
.is-assembled .strip__thumb > img,
.strip__slot[data-slot="house"] .strip__thumb > img,
.strip__slot[data-slot="honey"] .strip__thumb > img { opacity: 1; }
.strip__fill {
  position: absolute; left: 0; top: 0; width: 3px; height: 100%;
  background: var(--tally); transform-origin: 50% 0; transform: scaleY(var(--fill, 0));
}
.strip__slot.is-current .strip__thumb { box-shadow: 0 0 0 1.5px var(--bone); }
.strip__slot.is-current .strip__thumb > img { filter: none; }
.strip__slot:hover .strip__thumb { transform: translateX(-2px); }
.strip__slot:hover .strip__thumb > img { filter: none; }
@media (min-width: 900px) { .strip__slot--wide .strip__thumb { height: 16px; margin-block: 2px; } }
.strip__thumb--end { display: grid; place-items: center; background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.strip__thumb--end svg { width: 18px; height: 18px; fill: var(--tally); }

/* The label a slot shows when pointed at or focused. */
.strip__slot::after {
  content: attr(data-label);
  position: absolute; right: calc(100% + 12px); top: 50%; translate: 4px -50%;
  padding: 6px 10px; border-radius: 6px; white-space: nowrap;
  background: var(--surface); color: var(--bone); box-shadow: 0 0 0 1px var(--line), 0 8px 18px -6px rgb(0 0 0 / 0.6);
  font-size: 0.75rem; font-weight: 600; opacity: 0; pointer-events: none;
  transition: opacity 140ms var(--ease), translate 140ms var(--ease);
}
.strip__slot:hover::after, .strip__slot:focus-visible::after { opacity: 1; translate: 0 -50%; }

/* The playhead: a line across the strip with the brand's tag. */
.strip__head {
  position: absolute; left: -12px; right: -5px; top: 0; height: 2px; margin-top: -1px;
  background: var(--tally); pointer-events: none;
  transform: translateY(var(--head-y, 0px));
}
.strip__head::before {
  content: ""; position: absolute; left: -8px; top: -5px; width: 10px; height: 12px;
  background: var(--tally); clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%);
}
html[data-mground="paper"] .strip__thumb { background: var(--paper-2); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--paper-ink) 18%, transparent); }
html[data-mground="paper"] .strip__slot.is-current .strip__thumb { box-shadow: 0 0 0 1.5px var(--paper-ink); }
html[data-mground="paper"] .strip__head, html[data-mground="paper"] .strip__head::before, html[data-mground="paper"] .strip__fill { background: var(--tally-deep); }
html.is-open .strip { opacity: 0.25; }
html.is-open .strip:hover, html.is-open .strip:focus-within { opacity: 1; }

/* ------------------------------------------------------ the loose frames --
   Shots further down the page, hanging in depth around the monitor. Positions
   and travel are written by home.js; this is their resting look. */
.frames { position: fixed; inset: 0; pointer-events: none; }
.frames--back { z-index: 25; }
.frames--front { z-index: 45; }
.frame {
  position: absolute; left: 0; top: 0; width: 132px; max-width: none; height: auto;
  border-radius: 8px; transform-origin: 0 0; will-change: transform, opacity;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.35), 0 22px 40px -14px rgb(0 0 0 / 0.65);
  opacity: 0;
}
.frame--wide { width: 236px; }
.frame[data-depth="far"] { filter: blur(1.6px) brightness(0.62) saturate(0.85); }
.frame[data-depth="mid"] { filter: brightness(0.86); }
.is-assembled .frames { visibility: hidden; }

/* ------------------------------------------------------------ 1 PROGRAM -- */
.program__stage { display: flex; align-items: center; }
.program__copy {
  position: relative; z-index: 2;
  margin-left: var(--col-l); width: var(--colw);
  padding-top: var(--bar-h);
}
/* Sized from the column: "Shot for the screen" fills it, two lines, edge to edge. */
.program__kick { display: block; margin-bottom: clamp(14px, 2vh, 22px); font-family: var(--sc-font-text); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.4; color: var(--tally); }
.program__line { display: block; }
.program__h { font-size: min(calc(var(--colw) * 0.096), 6.6rem); line-height: 1; }
.program__lede { margin-top: clamp(22px, 3vh, 36px); max-width: 44ch; font-size: clamp(1.125rem, 0.9rem + 0.55vw, 1.4375rem); color: color-mix(in oklab, var(--bone) 86%, var(--ash)); }
.program__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3.4vh, 40px); }
.program__scrim { display: none; }

/* The headline assembles word by word on arrival. */
.program__h .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.program__h .w > span { display: inline-block; transform: translateY(105%); animation: nk-rise 720ms var(--ease) forwards; animation-delay: calc(120ms + var(--i) * 55ms); }
.program__lede, .program__cta { opacity: 0; animation: nk-fade 700ms var(--ease) 520ms forwards; }
.program__cta { animation-delay: 640ms; }
@keyframes nk-rise { to { transform: none; } }
@keyframes nk-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- 2 CUTS -- */
.cuts { position: relative; }
.shot {
  position: relative; min-height: 70svh;
  display: flex; align-items: center;
  padding: 6svh var(--col-r) 6svh var(--col-l);
}
.shot__scrim { display: none; }
.shot__label { position: relative; z-index: 2; width: var(--colw); }
.shot__client { font-size: min(calc(var(--colw) * 0.1), 6rem); line-height: 1; }
.shot__label--trail .shot__client { text-align: right; }
.shot__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-top: 14px; }
.shot__piece { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 500; }
.shot__row--foot { margin-top: 18px; align-items: center; }
.shot__line { max-width: 46ch; }
.shot__more { font-size: 0.9375rem; color: var(--bone); white-space: nowrap; }

/* The contact strip: four frames from the piece. Point at one and the monitor cuts to it. */
.sels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.sel {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 10px; background: var(--surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.5), 0 14px 28px -16px rgb(0 0 0 / 0.9), inset 0 0 0 1px rgb(255 255 255 / 0.06);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.sel img { width: 100%; height: 100%; object-fit: cover; max-width: none; filter: brightness(0.82) saturate(0.9); transition: filter 220ms var(--ease), transform 500ms var(--ease); }
.sel__tc {
  position: absolute; left: 8px; bottom: 8px; padding: 3px 7px; border-radius: 5px;
  background: rgb(8 8 9 / 0.78); color: var(--bone); font-size: 0.6875rem; font-weight: 600;
}
.sel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--tally); opacity: 0; transition: opacity 160ms var(--ease); }
.sel:hover, .sel:focus-visible { transform: translateY(-4px); box-shadow: 0 2px 4px rgb(0 0 0 / 0.5), 0 22px 36px -16px rgb(0 0 0 / 0.95); }
.sel:hover img, .sel:focus-visible img, .sel.is-on img { filter: none; transform: scale(1.04); }
.sel.is-on::after { opacity: 1; }
.sel.is-on .sel__tc { background: var(--tally); color: var(--blackout); }

/* --------------------------------------------------- 3 FULL SCREEN (peak) -- */
.full__stage { z-index: 40; }
.full__film {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #000;
  visibility: hidden; clip-path: inset(50% 50% 50% 50%);
  will-change: clip-path;
}
.full.is-visible .full__film { visibility: visible; }
.full__poster, .full__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.full__video { opacity: 0; }
.full__video.is-live { opacity: 1; }
.full__inner { position: absolute; inset: 0; transform: scale(var(--film-zoom, 1)); transform-origin: 50% 50%; }
.full__line {
  position: absolute; z-index: 3; left: var(--col-l); top: 50%; translate: 0 -50%;
  width: var(--colw);
  font-size: min(calc(var(--colw) * 0.096), 6.4rem); line-height: 1;
}
.full__scrim { z-index: 2; opacity: 0; transition: opacity 300ms var(--ease); }
.full.is-wide .full__scrim { opacity: 1; }
.full__label {
  position: absolute; z-index: 3; left: var(--col-l); bottom: clamp(28px, 7vh, 72px);
  display: grid; gap: 6px; justify-items: start;
}
.full__label .meta { color: color-mix(in oklab, var(--bone) 80%, var(--ash)); }
.full__sound { margin-top: 12px; }
.full__sound[aria-pressed="false"] .full__waves { opacity: 0.35; }

/* ------------------------------------------------------------ 4 ANATOMY -- */
.anatomy__stage { display: flex; align-items: center; }
.anatomy__scrim { display: none; }
.anatomy__copy {
  position: relative; z-index: 2;
  margin-left: var(--col-l); width: var(--colw);
  padding-top: var(--bar-h);
}
.anatomy__copy h2 { font-size: min(calc(var(--colw) * 0.078), 4.8rem); line-height: 1; }
.anatomy__head, .anatomy__body { position: relative; }
.anatomy__intro { margin-top: 16px; max-width: 58ch; }
.scenes { margin-top: clamp(20px, 3.4vh, 36px); display: grid; gap: 4px; border-top: 1px solid var(--line); }
.scene {
  display: grid; grid-template-columns: 7.5rem 9rem 1fr; column-gap: 20px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  opacity: 0.38; transition: opacity 240ms var(--ease);
}
.scene.is-active { opacity: 1; }
@media (min-width: 900px) and (max-width: 1199px) {
  .scene { grid-template-columns: 6.5rem 1fr; padding: 10px 0; }
  .scene__p { grid-column: 2; margin-top: 4px; }
  .anatomy__copy h2 { font-size: min(calc(var(--colw) * 0.068), 4.4rem); }
}
.scene__tc { font-size: 0.8125rem; font-weight: 600; color: var(--ash); padding-top: 4px; }
.scene.is-active .scene__tc { color: var(--tally); }
.scene__h { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.45rem; line-height: 1.05; letter-spacing: -0.02em; }
.scene__p { color: var(--ash); font-size: 0.9375rem; }
.scene.is-active .scene__p { color: color-mix(in oklab, var(--bone) 84%, var(--ash)); }

.tl { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.tl__track { position: relative; flex: 1; display: flex; gap: 3px; height: 10px; }
.tl__seg { flex: var(--w) 1 0; border-radius: 2px; background: color-mix(in oklab, var(--bone) 16%, transparent); transition: background-color 200ms var(--ease); }
.tl__seg.is-active { background: color-mix(in oklab, var(--bone) 42%, transparent); }
.tl__head {
  position: absolute; top: -6px; bottom: -6px; left: 0; width: 2px; background: var(--tally);
  transform: translateX(var(--tl-x, 0px));
}
.tl__tc { font-size: 0.8125rem; font-weight: 600; color: var(--bone); min-width: 7.6em; text-align: right; }
.anatomy__more { margin-top: 22px; font-size: 0.9375rem; }

/* --------------------------------------------------------- 5 RATE CARD -- */
.rates { position: relative; z-index: 35; padding: clamp(96px, 16vh, 168px) 0 clamp(80px, 12vh, 140px); }
.rates__inner { width: min(100% - 2 * var(--gutter), 76rem); margin-inline: auto; }
.rates__head { max-width: 44rem; }
.rates__head .lede { margin-top: 16px; }
.rates__note { margin-top: 34px; max-width: 70ch; margin-inline: auto; text-align: center; color: var(--paper-soft); font-size: 0.9375rem; }
.rates__note a { color: var(--paper-ink); font-weight: 600; }

/* ------------------------------------------------------------ 6 CREDITS -- */
.credits__stage { display: grid; grid-template-rows: auto 1fr; }
.credits__head { position: relative; z-index: 2; margin: calc(var(--bar-h) + 6vh) var(--col-r) 0 var(--col-l); max-width: 30rem; }
.credits__head .body { margin-top: 8px; }
.credits__head h2 { font-size: min(calc(var(--colw) * 0.086), 5.2rem); }
.credits__window {
  position: relative; overflow: hidden; margin: 18px var(--col-r) 0 var(--col-l);
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 82%, transparent);
          mask-image: linear-gradient(transparent, #000 14%, #000 82%, transparent);
}
.roll { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.roll__group { padding-top: 34px; }
.roll__h { margin-bottom: 12px; color: var(--ash); }
.roll__line {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px;
  padding: 7px 0;
}
.roll__line dt { color: var(--ash); font-size: 0.9375rem; display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.roll__line dt::after { content: ""; flex: 1; border-bottom: 1px dotted var(--line-strong); transform: translateY(-4px); }
.roll__line dd { margin: 0; }
.roll__line a {
  font-family: var(--sc-font-display); font-stretch: var(--cond); font-weight: 700;
  font-size: clamp(1.3rem, 0.95rem + 1vw, 1.9rem); line-height: 1.05; letter-spacing: -0.02em; text-decoration: none;
}
.roll__line.is-lit a, .roll__line a:hover, .roll__line a:focus-visible { color: var(--tally); }
.roll__end { padding: 48px 0 0; color: var(--ash); font-size: 0.9375rem; }

/* ------------------------------------------------------------- 7 CLOSE -- */
.close { position: relative; }
.close__cut, .close__plan { padding: 0 var(--col-r) 0 var(--col-l); }
.close__cut { min-height: 84svh; display: flex; align-items: center; padding-top: 12vh; padding-bottom: 6vh; }
.cut { width: var(--colw); }
.cut__h { margin-top: 10px; font-size: min(calc(var(--colw) * 0.086), 5.2rem); line-height: 1; }
.cut__sub { margin-top: 12px; }
.edl { margin-top: 26px; border-top: 1px solid var(--line); counter-reset: edl; }
.edl li {
  display: grid; grid-template-columns: 2.2rem 1fr auto; gap: 12px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem;
  transition: background-color 120ms var(--ease);
}
.edl__n { font-size: 0.75rem; font-weight: 600; color: var(--ash); }
.edl__name b { font-weight: 600; }
.edl__name span { color: var(--ash); }
.edl__d { font-weight: 600; color: var(--bone); }
.edl li.is-playing { background: color-mix(in oklab, var(--tally) 14%, transparent); }
.edl li.is-playing .edl__n { color: var(--tally); }
.cut__controls { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
.cut__tc { font-weight: 600; color: var(--ash); }
.cut.is-playing .cut__tc { color: var(--bone); }

.close__plan { padding-top: max(6vh, calc(var(--bar-h) + 24px)); padding-bottom: 10vh; scroll-margin-top: 0; }
.tcard { cursor: pointer; }
.form-panel .chip.is-picked span { animation: nk-pick 1.2s var(--ease); }
@keyframes nk-pick { 0%, 100% { box-shadow: 0 3px 0 #efe9df, inset 0 1px 0 rgb(255 255 255 / 0.3); } 30% { box-shadow: 0 3px 0 #efe9df, 0 0 0 6px rgb(167 139 250 / 0.35); } }
.plan { width: var(--colw); }
.plan__head h2 { font-size: min(calc(var(--colw) * 0.086), 5.2rem); line-height: 1; }
.plan__head .lede { margin-top: 16px; }
.plan__direct { margin-top: 14px; color: var(--ash); font-size: 0.9375rem; }
.plan__direct a { color: var(--bone); }
.form { display: grid; gap: 22px; margin-top: 36px; }
.form__row { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.attach { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 0.9375rem; position: relative; }
.attach[hidden] { display: none; }
.attach > input[type="checkbox"] { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.attach__box { flex: none; width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--line-strong); display: grid; place-items: center; transition: background-color 120ms var(--ease); }
.attach > input:checked + .attach__box { background: var(--tally); box-shadow: none; }
.attach > input:checked + .attach__box::after { content: ""; width: 10px; height: 6px; border: 2px solid var(--blackout); border-top: 0; border-right: 0; transform: rotate(-45deg) translateY(-1px); }
.attach > input:focus-visible + .attach__box { outline: 2px solid var(--tally); outline-offset: 3px; }
.attach__list { display: block; color: var(--ash); margin-top: 2px; }
.form__end { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form__status { font-size: 0.9375rem; color: var(--ash); }
.form__status[data-state="error"] { color: var(--tally); }
.form.is-sent .field, .form.is-sent .form__row, .form.is-sent fieldset, .form.is-sent .attach, .form.is-sent .form__send { display: none; }
.form.is-sent .form__status { font-size: 1.25rem; color: var(--bone); max-width: 36ch; }

.close .foot { margin-left: var(--col-l); margin-right: var(--col-r); padding-left: 0; padding-right: 0; }

/* Without scripting nothing is driven, so nothing may start hidden. */
@media (scripting: none) {
  [data-sc-in], [data-sc-stagger] > *, [data-sc-cue] { opacity: 1 !important; transform: none !important; }
  .frames, .strip { display: none; }
  .full__film { visibility: visible; clip-path: none; }
}

/* ======================================================= reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .program__h .w > span { transform: none; animation: none; }
  .program__lede, .program__cta { opacity: 1; animation: none; }
  .frames { display: none; }
  .scene { transition: none; }
  /* The film is a still here, under the line from the start: darken the side the line sits on. */
  .full__film::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgb(5 5 5 / 0.88), rgb(5 5 5 / 0.6) 55%, rgb(5 5 5 / 0.1)); }
}

/* ============================================================= phones -- */
@media (max-width: 899px) {
  :root {
    --m-right: 0px; --m-top: 0px; --mw: 100%; --mh: 100svh;
    --col-l: var(--gutter); --col-r: var(--gutter);
  }
  .room { display: none; }

  /* The frame is the screen. */
  .monitor { z-index: 0; inset: 0; width: 100%; height: 100svh; }
  .monitor__frame { border-radius: 0; box-shadow: none; }
  .monitor__frame::after { display: none; }
  .monitor__slate { display: none; }
  .clip--wide > img, .clip--wide > video { object-fit: contain; }

  /* Story segments replace the filmstrip. */
  .strip { left: var(--gutter); right: var(--gutter); top: calc(var(--bar-h) - 4px); transform: none; }
  .strip__list { display: flex; gap: 4px; }
  .strip__list > li { flex: 1; }
  .strip__slot { width: auto; height: 24px; display: flex; align-items: center; }
  .strip__thumb { width: 100%; height: 3px; border-radius: 2px; background: rgb(241 238 232 / 0.26); box-shadow: none; }
  .strip__thumb > img, .strip__thumb--end svg { display: none; }
  .strip__thumb--end { background: rgb(241 238 232 / 0.26); }
  .strip__fill { width: 100%; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--fill, 0)); background: var(--bone); }
  .strip__slot.is-current .strip__thumb { box-shadow: none; }
  .strip__slot::after { display: none; }
  .strip__head { display: none; }
  html[data-mground="paper"] .strip__thumb { background: rgb(18 18 18 / 0.2); box-shadow: none; }
  html[data-mground="paper"] .strip__fill { background: var(--paper-ink); }

  .frame { width: 96px; }
  .frame--wide { width: 168px; }
  .frames--back { z-index: 1; }
  .frames--front { z-index: 3; }

  .program, .cuts, .full, .anatomy, .credits, .close { position: relative; z-index: 2; }
  .program__stage { align-items: flex-end; }
  .program__copy { width: auto; margin: 0; padding: 0 var(--gutter) max(28px, env(safe-area-inset-bottom)); }
  .program__h { font-size: clamp(2.7rem, 12.4vw, 4rem); max-width: 10ch; line-height: 0.92; }
  .program__lede { max-width: 30ch; font-size: 1.0625rem; }
  .program__scrim { display: block; z-index: 1; --sc-canvas: #050505; }

  .shot { min-height: 100svh; align-items: flex-end; padding: 0 var(--gutter) max(32px, env(safe-area-inset-bottom)); }
  .shot__scrim { display: block; }
  .shot__label { width: 100%; }
  .shot__label--trail .shot__client { text-align: center; }
  .shot__client { font-size: clamp(2rem, 9.4vw, 2.8rem); }
  .sels { display: none; }
  .shot__row { display: grid; justify-content: start; gap: 6px; }

  .full__line { left: var(--gutter); right: var(--gutter); width: auto; top: calc(var(--bar-h) + 52px); translate: none; font-size: clamp(1.9rem, 8.2vw, 2.5rem); }
  .anatomy__copy, .cut, .plan { width: auto; }
  .anatomy__copy h2, .cut__h, .plan__head h2, .credits__head h2 { font-size: clamp(1.9rem, 8.2vw, 2.5rem); }
  .full__label { left: var(--gutter); right: var(--gutter); bottom: max(28px, env(safe-area-inset-bottom)); }
  /* On a phone the film sits in its own band, letterboxed, the way a cinema frames it. */
  .full__poster, .full__video { object-fit: contain; }
  .full__inner { transform: none; }

  .anatomy__stage { align-items: stretch; }
  .anatomy__copy {
    margin: 0; width: 100%; max-width: none; padding: calc(var(--bar-h) + 36px) var(--gutter) max(24px, env(safe-area-inset-bottom));
    display: flex; flex-direction: column;
  }
  /* The reel is white; the copy gets its own dark bands above and below a clear window. */
  .anatomy__scrim {
    display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, rgb(6 6 6 / 0.94) 0, rgb(6 6 6 / 0.9) 34%, rgb(6 6 6 / 0) 46%, rgb(6 6 6 / 0) 54%, rgb(6 6 6 / 0.86) 66%, rgb(6 6 6 / 0.96) 100%);
  }
  .anatomy__intro { color: color-mix(in oklab, var(--bone) 86%, var(--ash)); }
  /* On a short phone the intro can outgrow the scrim's top band and run onto the
     white reel: each block carries its own dark band, fading just past its edge.
     The band sits on the block, the cue inside it, so the band stays a backdrop. */
  .anatomy__head::before, .anatomy__body::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter));
  }
  .anatomy__head::before { top: calc(-1 * (var(--bar-h) + 36px)); bottom: -48px; background: linear-gradient(to bottom, rgb(6 6 6 / 0.92) calc(100% - 48px), rgb(6 6 6 / 0)); }
  .anatomy__body::before { top: -48px; bottom: calc(-1 * max(24px, env(safe-area-inset-bottom))); background: linear-gradient(to top, rgb(6 6 6 / 0.92) calc(100% - 48px), rgb(6 6 6 / 0)); }
  .anatomy__copy h2 { font-size: clamp(2.1rem, 9.4vw, 2.8rem); }
  .anatomy__intro { font-size: 0.9375rem; }
  .anatomy__body { margin-top: auto; }
  .scenes { margin-top: 0; border-top: 0; }
  .scene { display: none; grid-template-columns: 1fr; padding: 0; border: 0; opacity: 1; }
  .scene__p { margin-top: 6px; }
  .scene.is-active { display: grid; }
  .scene__tc { grid-row: auto; padding: 0 0 6px; }
  .anatomy__more { display: none; }

  .rates { padding: 96px 0 72px; }

  .credits__stage { background: var(--blackout); }
  .credits__head { margin: calc(var(--bar-h) + 40px) var(--gutter) 0; }
  .credits__window { margin: 12px var(--gutter) 0; }
  .roll__line { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
  .roll__line dt::after { display: none; }

  .close__cut { min-height: 100svh; align-items: flex-end; padding: 0 var(--gutter) 40px; background: linear-gradient(to top, rgb(5 5 5 / 0.96) 0, rgb(5 5 5 / 0.82) 52%, transparent 78%); }
  .close__plan { background: var(--blackout); padding: calc(var(--bar-h) + 44px) var(--gutter) 56px; }
  .close .foot { margin: 0; padding: 56px var(--gutter) 28px; background: var(--blackout); }
}


/* Phones: centred composition. Equal gutters left and right, headings sized to
   the full measure between them, and every block set on the centre line. Form
   fields and tables stay left-aligned on purpose: centred inputs are harder to scan. */
@media (max-width: 899px) {
  .program__copy, .shot__label, .full__line, .full__label, .anatomy__head, .anatomy__body,
  .rates__head, .credits__head, .roll, .cut, .plan__head, .close .foot { text-align: center; }
  .program__h { max-width: none; font-size: min(calc((100vw - 2 * var(--gutter)) * 0.1), 3.4rem); text-wrap: balance; }
  .program__lede, .anatomy__intro, .cut__sub, .plan__head .lede, .rates__head .lede { margin-inline: auto; max-width: 34ch; }
  .program__cta, .cut__controls { justify-content: center; }
  .shot__row { justify-items: center; justify-content: center; }
  .shot__line { margin-inline: auto; }
  .full__label { justify-items: center; }
  .scene, .scene.is-active { justify-items: center; }
  .scene__p { margin-inline: auto; max-width: 34ch; }
  .tl { justify-content: center; }
  .rates__head { margin-inline: auto; }
  .credits__head { margin-inline: var(--gutter); max-width: none; }
  .roll__line { justify-items: center; }
  .roll__line dt { justify-content: center; }
  .edl { text-align: left; }
  .form__end { justify-content: center; text-align: center; }
  .attach { justify-content: center; text-align: left; }
  .plan__direct { justify-content: center; }
}

/* Desktop: the rate card owns the full width (the monitor steps away), so its
   heading sits on the centre line above the table. */
@media (min-width: 900px) {
  .rates__head { margin-inline: auto; text-align: center; }
  .rates__head .lede { margin-inline: auto; }
}

/* ------------------------------------------------------- the rate cards --
   Three cards on paper. The middle one is the sweet spot and stands forward,
   dark, raised. Every card is itemized the same way, so they compare at a
   glance. On a phone they become a swipeable row that snaps card by card. */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); align-items: stretch; margin-top: clamp(40px, 6vh, 64px); }
.tcard {
  position: relative; display: flex; flex-direction: column; text-align: left;
  padding: clamp(22px, 2.2vw, 32px); border-radius: 22px;
  background: linear-gradient(to bottom, #fbf9f5, #f2eee7);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.9) inset, 0 0 0 1px rgb(18 18 18 / 0.07), 0 2px 4px rgb(40 30 20 / 0.06), 0 24px 44px -24px rgb(40 30 20 / 0.32);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.tcard:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgb(255 255 255 / 0.9) inset, 0 0 0 1px rgb(18 18 18 / 0.08), 0 4px 8px rgb(40 30 20 / 0.08), 0 36px 60px -26px rgb(40 30 20 / 0.42); }
.tcard__flag {
  position: absolute; top: -13px; left: clamp(22px, 2.2vw, 32px);
  padding: 5px 11px; border-radius: 999px; background: var(--tally); color: var(--blackout);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: 0 2px 0 #efe9df, 0 8px 16px -6px rgb(91 33 182 / 0.6);
}
.tcard__name { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-soft); }
.tcard__price { margin-top: 10px; font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(2.4rem, 1.5rem + 2vw, 3.4rem); line-height: 1; letter-spacing: -0.03em; color: var(--paper-ink); }
.tcard__price small { display: block; min-height: 1.3em; margin-bottom: 4px; font-family: var(--sc-font-text); font-weight: 500; font-size: 0.875rem; line-height: 1.3; letter-spacing: 0; color: var(--paper-soft); }
.tcard__fit { margin-top: 10px; font-weight: 600; color: var(--paper-ink); }
.tcard__list { margin-top: 20px; padding-top: 6px; border-top: 1px solid rgb(18 18 18 / 0.1); flex: 1; }
.tcard__list li { display: grid; grid-template-columns: 6.2rem 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px dashed rgb(18 18 18 / 0.12); font-size: 0.9375rem; line-height: 1.4; }
.tcard__list li:last-child { border-bottom: 0; }
.tcard__k { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--paper-soft); padding-top: 3px; }
.tcard__v { color: var(--paper-ink); }
.tcard__cta { margin-top: 22px; width: 100%; }
.tcard--feature { background: linear-gradient(to bottom, #1d1c1e, #111112); color: var(--bone); transform: translateY(-14px);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset, 0 0 0 1px rgb(255 255 255 / 0.04), 0 6px 0 #050505, 0 40px 70px -28px rgb(20 10 5 / 0.65); }
.tcard--feature:hover { transform: translateY(-20px); }
.tcard--feature .tcard__name, .tcard--feature .tcard__k, .tcard--feature .tcard__price small { color: var(--ash); }
.tcard--feature .tcard__price, .tcard--feature .tcard__fit, .tcard--feature .tcard__v { color: var(--bone); }
.tcard--feature .tcard__list { border-top-color: rgb(241 238 232 / 0.14); }
.tcard--feature .tcard__list li { border-bottom-color: rgb(241 238 232 / 0.12); }
.ground-paper .tcard--feature .btn { --face: var(--tally); --face-hi: #c4b5fd; --edge: #efe9df; --shade: 0 0 0; --btn-ink: var(--blackout); --glow: 0.5; }
.ground-paper .tcard--feature .btn:hover { color: var(--blackout); }
@media (max-width: 899px) {
  .tiers {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    gap: 14px; margin-inline: calc(-1 * var(--gutter)); padding: 26px var(--gutter) 30px; scrollbar-width: none;
  }
  .tiers::-webkit-scrollbar { display: none; }
  .tcard { flex: 0 0 86%; scroll-snap-align: center; }
  .tcard__list li { grid-template-columns: 1fr; gap: 3px; }
  .tcard__k { padding-top: 0; }
  .tcard--feature, .tcard--feature:hover, .tcard:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .tcard, .tcard--feature, .tcard:hover, .tcard--feature:hover { transform: none; transition: none; } }

/* ------------------------------------------------------------- the brief --
   The form as a raised panel with a header strip; fields are deep wells that
   light up in the brand red; the choices are small keys. */
.form-panel {
  position: relative; margin-top: 30px; padding: clamp(22px, 2.6vw, 36px); padding-top: 0; border-radius: 22px;
  background: linear-gradient(to bottom, #19191b, #121213);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 0 0 1px rgb(255 255 255 / 0.05), 0 30px 60px -30px rgb(0 0 0 / 0.9);
}
.form-panel__head {
  display: flex; align-items: center; gap: 10px; margin: 0 calc(-1 * clamp(22px, 2.6vw, 36px)) 6px; padding: 16px clamp(22px, 2.6vw, 36px);
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone);
}
.form-panel__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tally); box-shadow: 0 0 0 4px rgb(167 139 250 / 0.18); }
.form-panel__tc { margin-left: auto; color: var(--ash); }
.form-panel .input, .form-panel .textarea {
  min-height: 52px; border-radius: 12px; background: #0c0c0d; border: 1px solid rgb(255 255 255 / 0.08);
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.5);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background-color 160ms var(--ease);
}
.form-panel .input:hover, .form-panel .textarea:hover { border-color: rgb(255 255 255 / 0.16); }
.form-panel .input:focus-visible, .form-panel .textarea:focus-visible { outline: none; border-color: var(--tally); background: #0f0d0d; box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.5), 0 0 0 4px rgb(167 139 250 / 0.2); }
.form-panel .field > label, .form-panel .field > legend { font-size: 0.8125rem; color: var(--bone); }
.form-panel .chip span {
  min-height: 42px; border-radius: 10px; background: #232326; box-shadow: 0 3px 0 #7c3aed, inset 0 1px 0 rgb(255 255 255 / 0.08);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background-color 160ms var(--ease), color 160ms var(--ease);
}
.form-panel .chip:hover span { transform: translateY(-1px); box-shadow: 0 4px 0 #7c3aed, inset 0 1px 0 rgb(255 255 255 / 0.1); }
.form-panel .chip input:checked + span { background: var(--tally); color: var(--blackout); box-shadow: 0 3px 0 #efe9df, inset 0 1px 0 rgb(255 255 255 / 0.3); }
.form-panel .chip input:checked + span::before { content: ""; width: 10px; height: 6px; margin-right: 8px; border: 2px solid currentColor; border-top: 0; border-right: 0; transform: rotate(-45deg) translateY(-2px); }
.form-panel .form__end { padding-top: 6px; }
.form-panel .form__send { min-height: 54px; padding: 0 28px; font-size: 1rem; }
@media (max-width: 899px) {
  .form-panel { margin-inline: calc(-1 * var(--gutter) + 8px); }
  .form-panel .form__send { width: 100%; }
}

/* ======================================================== the camera rig --
   At the top of the page the program monitor sits on a cinema camera's
   portrait monitor; scrolling lifts it off into its place while the camera
   drops away. home.js writes the transforms; --lift runs 0 to 1. */
.rig-hero { position: fixed; z-index: 20; bottom: -3svh; height: min(96svh, 1020px); pointer-events: none; }
.rig-hero img { display: block; height: 100%; width: auto; max-width: none; transform-origin: 51% 30%; will-change: transform;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%), linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 62%, transparent 96%), linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  mask-composite: intersect; }
.monitor { transform-origin: 0 0; }
.frames { display: none; }
.monitor__slate { opacity: clamp(0, calc(var(--lift, 1) * 4 - 3), 1); }
.room { opacity: calc(0.34 * var(--lift, 1)); }
/* while it sits on the rig, the monitor is part of the camera: no floating shadow */
.monitor__frame { box-shadow: 0 2px 4px hsl(30 8% 2% / calc(0.5 * var(--lift, 1))), 0 24px 48px -12px hsl(30 8% 2% / calc(0.7 * var(--lift, 1))), 0 60px 120px -30px hsl(30 8% 2% / calc(0.6 * var(--lift, 1))); }
@media (max-width: 899px) {
  .rig-hero { z-index: 0; top: calc(var(--bar-h) - 1svh); bottom: auto; height: 66svh; }
  .monitor { z-index: 1; }
}
.rig-hero { bottom: -24svh; height: min(118svh, 1240px); }
@media (max-width: 899px) { .rig-hero { height: 72svh; bottom: auto; } }
.rig-hero img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 2%, #000 22%, #000 62%, transparent 96%), linear-gradient(to right, transparent 4%, #000 34%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent 2%, #000 22%, #000 62%, transparent 96%), linear-gradient(to right, transparent 4%, #000 34%, #000 78%, transparent);
}

/* ===================================================== the screening room --
   At the peak the film settles onto a cinema screen; the seats rise into the
   foreground and the projector beam comes on behind you. --th runs 0 to 1. */
.full__inner { transform-origin: 50% 50%; will-change: transform; }
.theatre { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: min(1, calc(var(--th, 0) * 1.6)); }
.theatre__beam {
  position: absolute; inset: 0; mix-blend-mode: screen; opacity: calc(var(--th, 0) * 0.9);
  background: linear-gradient(to bottom, rgb(255 226 184 / 0.20), rgb(255 213 154 / 0.06) 55%, transparent 70%);
  clip-path: polygon(45% -4%, 55% -4%, 87% 67%, 13% 67%);
  animation: nk-beam 3.4s infinite;
}
@keyframes nk-beam { 0%, 100% { filter: brightness(1); } 9% { filter: brightness(0.8); } 10% { filter: brightness(1); } 61% { filter: brightness(0.86); } 62% { filter: brightness(1); } }
.theatre__seats {
  position: absolute; left: 0; bottom: 0; width: 100%; height: auto; max-width: none;
  transform: translate3d(0, calc((1 - var(--th, 0)) * 70%), 0); will-change: transform;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%); mask-image: linear-gradient(to bottom, transparent 0, #000 26%);
}
.theatre__tag {
  position: absolute; right: var(--gutter); bottom: 20px; margin: 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgb(241 238 232 / 0.6); opacity: var(--th, 0);
}
.full .full__label { z-index: 4; }
.full .full__scrim { opacity: calc(1 - var(--th, 0)); }
@media (max-width: 899px) {
  .theatre__beam { clip-path: polygon(44% -4%, 56% -4%, 98% 20%, 2% 20%); }
  .theatre__seats { left: 50%; width: auto; height: 30svh; transform: translate3d(-50%, calc((1 - var(--th, 0)) * 70%), 0); }
  .theatre__tag { display: none; }
}
@media (prefers-reduced-motion: reduce) { .theatre { display: none; } }
.theatre__beam, .theatre__beam { clip-path: none; background: radial-gradient(60% 75% at 50% -8%, rgb(255 226 184 / 0.22), rgb(255 213 154 / 0.06) 55%, transparent 75%); }
@media (max-width: 899px) { .theatre__beam { clip-path: none; background: radial-gradient(90% 40% at 50% 0%, rgb(255 226 184 / 0.18), transparent 80%); } }

/* ============================================================ the bubbles --
   Six shots as round, playing clips around the camera. Each flies into its
   box in the filmstrip as the hero scrolls; the circle squares off on landing
   and the box takes the picture. home.js writes the flight; --sq runs 0 to 1. */
.frames { display: block; }
.bubble {
  width: 104px; height: 104px; overflow: hidden; background: #111;
  border-radius: calc(50% - var(--sq, 0) * 44%);
  box-shadow: 0 0 0 calc(3px - var(--sq, 0) * 2px) var(--tally), 0 0 0 calc(7px - var(--sq, 0) * 7px) rgb(167 139 250 / 0.18), 0 18px 34px -12px rgb(0 0 0 / 0.8);
}
.bubble img, .bubble video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.bubble video { opacity: 0; transition: opacity 300ms var(--ease); }
.bubble.is-live video { opacity: 1; }
.frame.bubble[data-depth] { filter: none; }
.strip__slot.is-filled .strip__thumb > img { opacity: 1; transition: opacity 240ms var(--ease); }
@media (max-width: 899px) { .bubble { width: 76px; height: 76px; } }
@media (prefers-reduced-motion: reduce) { .frames { display: none; } }

/* ============================================================== the reel --
   Panels the exact size of the camera screen, in a row through it. home.js
   moves them; --dim darkens the ones not on the screen. */
.frames { display: none !important; }
.panels { position: fixed; inset: 0; z-index: 31; pointer-events: none; }
.panel {
  position: absolute; left: 0; top: 0; overflow: hidden; background: #0d0d0e; opacity: 0;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 24px 48px -18px rgb(0 0 0 / 0.85);
  will-change: transform, width, height;
}
.panel::after { content: ""; position: absolute; inset: 0; background: rgb(8 8 9 / var(--dim, 0)); pointer-events: none; }
.panel img, .panel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.panel video { opacity: 0; transition: opacity 250ms var(--ease); }
.panel.is-live video { opacity: 1; }
.panel.is-on { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 24px 48px -18px rgb(0 0 0 / 0.85); }
/* desktop: the headline sits above the left arc of shots, which show through behind it */
@media (min-width: 900px) {
  .program .program__stage { z-index: 32; pointer-events: none; }
  .program .program__copy { pointer-events: auto; }
  .panel { transform-origin: 50% 50%; }
  /* The shots sit behind the camera's monitor: below the lifting frame, and cut
     away where the rig's housing stands while the rig is in view. home.js writes
     the housing box (--hx, --hy, --hw, --hh) and the rig's opacity (--ha). */
  .panels {
    z-index: 29;
    -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(rgb(0 0 0 / var(--ha, 0)), rgb(0 0 0 / var(--ha, 0)));
    -webkit-mask-position: 0 0, var(--hx, 0px) var(--hy, 0px);
    -webkit-mask-size: 100% 100%, var(--hw, 0px) var(--hh, 0px);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-composite: xor;
    mask-image: linear-gradient(#000, #000), linear-gradient(rgb(0 0 0 / var(--ha, 0)), rgb(0 0 0 / var(--ha, 0)));
    mask-position: 0 0, var(--hx, 0px) var(--hy, 0px);
    mask-size: 100% 100%, var(--hw, 0px) var(--hh, 0px);
    mask-repeat: no-repeat;
    mask-composite: exclude;
  }
}

/* home.js sizes and places the camera (measureRig) and shows it as it draws the
   first frame, so it never appears anywhere else first. */
.rig-hero { opacity: 0; }
/* Desktop: the kicker sets in two lines and the intro in three even lines, both
   inside the headline's measure, which leaves the camera and its arch of shots
   as much room as possible. */
@media (min-width: 900px) {
  .program__kick { max-width: 19em; }
  .program__lede { max-width: 31ch; }
}

/* Phones tall enough to spare it: room under the buttons for the photographer's floor
   (walker.js). On shorter phones he keeps to the footer. */
@media (max-width: 899px) and (min-height: 700px) {
  .has-walker .program__copy { padding-bottom: calc(max(28px, env(safe-area-inset-bottom)) + clamp(96px, 14svh, 124px)); }
}

/* ============================================================== the pitch --
   Where pricing used to be (pricing is parked: scripts/parked/pricing.md). The
   one light section on the page: what the footage does for a brand, three
   ways in, each shown with our own frames, and the clearest call to the
   brief. A card's button ticks its goal in the brief (home.js). */
.pitch { position: relative; z-index: 35; padding: clamp(96px, 16vh, 168px) 0 clamp(80px, 12vh, 140px); }
.pitch__inner { width: min(100% - 2 * var(--gutter), 76rem); margin-inline: auto; }
.pitch__head { max-width: 62rem; margin-inline: auto; text-align: center; }
.pitch__kick { margin-bottom: 16px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tally-deep); }
.pitch__head .lede { margin: 18px auto 0; max-width: 42rem; }

.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); align-items: stretch; margin-top: clamp(40px, 6vh, 64px); }
.pcard {
  position: relative; display: flex; flex-direction: column; text-align: left; cursor: pointer;
  padding: 10px 10px clamp(20px, 2vw, 26px); border-radius: 22px;
  background: linear-gradient(to bottom, #fbf9f5, #f2eee7);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.9) inset, 0 0 0 1px rgb(18 18 18 / 0.07), 0 2px 4px rgb(40 30 20 / 0.06), 0 24px 44px -24px rgb(40 30 20 / 0.32);
  transition: translate 260ms var(--ease), box-shadow 260ms var(--ease);
}
.pcard:hover { translate: 0 -6px; box-shadow: 0 1px 0 rgb(255 255 255 / 0.9) inset, 0 0 0 1px rgb(18 18 18 / 0.08), 0 4px 8px rgb(40 30 20 / 0.08), 0 36px 60px -26px rgb(40 30 20 / 0.42); }
/* the frames: our own footage, cropped to one shape so the cards line up */
.pcard__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 15px; background: #0d0d0e; }
.pcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 700ms var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.045); }
/* three reels side by side: three 9:16 frames fill a 16:10 box almost exactly */
.pcard__media--reels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 3px; }
.pcard__media--reels img { position: relative; min-height: 0; border-radius: 0; }
/* a month of posts: a 4 by 2 grid, each frame cropped to 4:5, the way a feed shows it */
.pcard__media--grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3px; }
.pcard__media--grid img { position: relative; min-height: 0; border-radius: 0; }
.pcard__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgb(8 8 9 / 0.55), transparent 42%); }
.pcard__tag { position: absolute; z-index: 1; left: 10px; bottom: 9px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone); }
.pcard__text { display: flex; flex-direction: column; flex: 1; padding: 18px clamp(10px, 1vw, 14px) 0; }
.pcard__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tally-deep); }
.pcard__title { margin-top: 8px; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.3rem, 0.95rem + 0.9vw, 1.7rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--paper-ink); }
.pcard__body { flex: 1; margin-top: 10px; font-size: 0.96875rem; line-height: 1.5; color: var(--paper-soft); }
.pcard__makes { display: grid; gap: 4px; margin-top: 18px; padding-top: 14px; border-top: 1px dashed rgb(18 18 18 / 0.16); }
.pcard__k { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--paper-soft); }
.pcard__v { font-size: 0.9375rem; font-weight: 600; line-height: 1.4; color: var(--paper-ink); }
.pcard__cta { margin-top: 18px; width: 100%; }
/* the middle card is the studio's own move: dark, raised, the red key */
.pcard--feature {
  background: linear-gradient(to bottom, #1d1c1e, #111112); translate: 0 -14px;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset, 0 0 0 1px rgb(255 255 255 / 0.04), 0 6px 0 #050505, 0 40px 70px -28px rgb(20 10 5 / 0.65);
}
.pcard--feature:hover { translate: 0 -20px; }
.pcard--feature .pcard__label { color: var(--tally); }
.pcard--feature .pcard__title, .pcard--feature .pcard__v { color: var(--bone); }
.pcard--feature .pcard__body, .pcard--feature .pcard__k { color: var(--ash); }
.pcard--feature .pcard__makes { border-top-color: rgb(241 238 232 / 0.16); }
.ground-paper .pcard--feature .btn { --face: var(--tally); --face-hi: #c4b5fd; --edge: #efe9df; --shade: 0 0 0; --btn-ink: var(--blackout); --glow: 0.5; }
.ground-paper .pcard--feature .btn:hover { color: var(--blackout); }

/* the close: a dark slate on the light page, the red key, what happens next */
.pitch__next {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px 40px;
  margin-top: clamp(48px, 7vh, 76px); padding: clamp(26px, 3vw, 42px) clamp(24px, 3.4vw, 52px); border-radius: 24px;
  background: radial-gradient(120% 160% at 0% 0%, #262527, #101011 62%); color: var(--bone);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.07) inset, 0 6px 0 #050505, 0 40px 70px -30px rgb(20 10 5 / 0.6);
}
.pitch__up { display: inline-flex; align-items: center; gap: 10px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tally); }
.pitch__up i { width: 8px; height: 8px; border-radius: 50%; background: var(--tally); box-shadow: 0 0 0 4px rgb(167 139 250 / 0.18); animation: nk-rec 1.6s ease-in-out infinite; }
@keyframes nk-rec { 50% { opacity: 0.3; } }
.pitch__line { margin-top: 10px; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.45rem, 1rem + 1.4vw, 2.2rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--bone); }
.pitch__line .serif { color: var(--tally); }
.pitch__sub { margin-top: 10px; max-width: 54ch; font-size: 1rem; line-height: 1.5; color: color-mix(in oklab, var(--bone) 78%, var(--ash)); }
.pitch__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 14px; }
.ground-paper .pitch__next .btn { --face: var(--tally); --face-hi: #c4b5fd; --edge: #efe9df; --shade: 0 0 0; --btn-ink: var(--blackout); --glow: 0.5; }
.ground-paper .pitch__next .btn:hover { color: var(--blackout); }
.ground-paper .pitch__next .btn--ghost { --face: #232326; --face-hi: #303034; --edge: #7c3aed; --btn-ink: var(--bone); --shade: 167 139 250; --glow: 0.32; }
.ground-paper .pitch__next .btn--ghost:hover { color: var(--bone); }
.ground-paper .pitch__next :focus-visible { outline-color: var(--tally); }

@media (max-width: 899px) {
  .pitch { padding: 96px 0 72px; }
  .pitch__head .lede { max-width: 34ch; }
  /* on a phone the cards are a row you swipe, one at a time; the next one peeks in */
  .pcards {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    gap: 14px; margin-inline: calc(-1 * var(--gutter)); padding: 26px var(--gutter) 76px; margin-bottom: -46px; scrollbar-width: none;
  }
  .pcards::-webkit-scrollbar { display: none; }
  .pcard { flex: 0 0 86%; scroll-snap-align: center; text-align: center; }
  .pcard__makes { justify-items: center; }
  .pcard--feature, .pcard--feature:hover, .pcard:hover { translate: none; }
  .pitch__next { grid-template-columns: 1fr; justify-items: center; text-align: center; margin-top: 22px; padding: 30px 22px 40px; }
  .pitch__actions { width: 100%; }
  .pitch__actions .btn { flex: 1 1 150px; }
  .pitch__sub { margin-inline: auto; }
  .pitch__actions { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard--feature, .pcard:hover, .pcard--feature:hover { translate: none; transition: none; }
  .pcard:hover .pcard__media img { transform: none; transition: none; }
  .pitch__up i { animation: none; }
}
/* the proof point: a quiet link to the case study behind the number */
.pcard__proof { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); text-underline-offset: 3px; }
.pcard__proof:hover { color: var(--tally-deep); text-decoration-color: currentColor; }

/* desktop: the pitch keeps the filmstrip's lane clear on the right */
@media (min-width: 900px) { .pitch { padding-right: var(--strip-zone); } }
/* no lone last words; the proof link never splits */
.pcard__body, .pcard__v, .pitch__sub, .pitch__head .lede { text-wrap: pretty; }
.pcard__proof { white-space: nowrap; }