/* ==========================================================================
   Tokens
   Six named values. Each has one job; none of them decorate.
   ========================================================================== */

:root {
  --bar: #0D0D0D;        /* letterbox black — the top and bottom bars only     */
  --charcoal: #10160F;   /* dark ground — the video half of the business       */
  --panel: #1A2119;      /* one stop up, for surfaces layered on the dark      */
  --paper: #FFFFFF;      /* light ground — the web half of the business        */
  --accent: #22C55E;     /* action, and the 48 hours. Nothing else.            */
  --accent-hover: #34D399; /* one stop lighter, hover only.                   */
  --smpte: #4E8A6C;      /* hairlines, frame corners, ticks. Never a fill.     */

  /* Mutes are calibrated per ground, not eyeballed.
     #63635E on --paper = 6.0:1.  #A3A39C on --charcoal = 7.2:1.  Both AA. */
  --mute-paper: #63635E;
  --mute-dark: #A3A39C;

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --rail: 72px;
  --bar-h: 56px;
  --mbar-h: 68px;

  /* Archivo's width axis opens up as the viewport does. */
  --wdth: 100;

  --f-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --f-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  --step: clamp(56px, 8vw, 104px);
}

/* Archivo's width axis opens as the viewport does — and closes below it.
   Dutch compounds (aanspreekpunt, video-advertenties) are longer than a 320px
   measure at hero size, and the choice is condense or shrink. Condensing keeps
   the display type as loud as it was; shrinking would not. */
@media (max-width: 480px)  { :root { --wdth: 78 } }
@media (min-width: 768px)  { :root { --wdth: 112 } }
@media (min-width: 1200px) { :root { --wdth: 122 } }

/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-800-var.woff2') format('woff2-variations');
  font-weight: 800;
  font-stretch: 62.5% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/plexsans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/plexsans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/plexmono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  /* WCAG 2.2 "focus not obscured": the sticky top bar and the fixed bottom
     action bar must never sit on top of a focused element. */
  scroll-padding-top: calc(var(--bar-h) + 20px);
  scroll-padding-bottom: calc(var(--mbar-h) + 20px);
}

body {
  margin: 0;
  background: var(--charcoal);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (max-width: 899px) {
  body { padding-bottom: var(--mbar-h) }
}

img, svg, video { max-width: 100%; height: auto; display: block }

a { color: inherit }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}
.band--accent :focus-visible { outline-color: var(--bar) }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 40;
  background: var(--accent); color: var(--bar);
  padding: 12px 18px; font-family: var(--f-mono); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.09em; text-decoration: none;
  transition: top 120ms;
}
.skip:focus { top: 12px }

/* A constant that has not been filled in. Loud on purpose, dev builds only. */
.tbd {
  display: inline-block; background: #FF00A8; color: #0D0D0D;
  font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 400;
  letter-spacing: 0.06em; padding: 2px 7px; vertical-align: middle;
  text-transform: none;
}

/* ==========================================================================
   Type
   Sentence case is human, uppercase is machine. The system holds that line:
   headings and copy are sentence case, mono labels are uppercase.
   ========================================================================== */

.h1, .h2 {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' var(--wdth), 'wght' 800;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.93;
  margin: 0;
  text-wrap: balance;
  /* Dutch compounds are longer than a 320px measure at this size. Break points
     are set by hand with ­ in the copy — hyphens:auto is useless here
     because a browser without an nl dictionary silently ignores it. break-word
     is the last-resort net so a headline can never push the page sideways. */
  overflow-wrap: break-word;
}

/* Composed rather than shouted: large enough to lead, not so large it reads
   as an ad banner. Confidence over volume — see the professional-pass note
   in README, "House rules in the CSS". */
.h1 { font-size: clamp(2.5rem, 6.6vw, 5.4rem) }
.h2 { font-size: clamp(1.9rem, 4.4vw, 3.4rem) }
.h2--wide { max-width: 16ch }

.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.28rem);
  line-height: 1.55;
  max-width: 44ch;
  margin: clamp(20px, 3vw, 32px) 0 0;
  color: var(--fg);
}

p { margin: 0 0 1.1em }
p:last-child { margin-bottom: 0 }

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap { max-width: var(--wrap); margin-inline: auto }

.band {
  position: relative;
  padding-block: clamp(64px, 9vw, 132px);
  padding-inline: var(--gutter);
  background: var(--bg);
  color: var(--fg);
}

.band--dark   { --bg: var(--charcoal); --fg: var(--paper);    --mute: var(--mute-dark);  --line: #223026 }
.band--paper  { --bg: var(--paper);    --fg: var(--charcoal); --mute: var(--mute-paper); --line: #DCE1DD }
.band--accent { --bg: var(--accent);   --fg: var(--bar);      --mute: #0B3B22;           --line: #158A47 }

/* Wide screens: content is pushed clear of the rail, and the rail is placed
   exactly one --rail to the left of wherever the content starts. One formula
   in two places keeps the spine, the timecodes and the copy on the same
   vertical grid at every width, without measuring anything at runtime. */
@media (min-width: 1024px) {
  :root { --pad-l: max(calc(var(--gutter) + var(--rail)), calc((100vw - var(--wrap)) / 2)) }
  .band { padding-left: var(--pad-l) }
  .wrap { margin-inline: 0 }
  .spine { left: calc(var(--pad-l) - var(--rail)) }
}

/* ==========================================================================
   The spine — the 48 hours, as the page's own coordinate system.
   Fill is a CSS scroll-driven animation: no scroll listener, no JS. Where
   scroll timelines are unsupported the fill never appears and the rail rests
   as a quiet hairline, which is a perfectly good resting state.
   ========================================================================== */

.spine {
  position: fixed; left: 0; top: 0; bottom: 0;
  width: var(--rail); z-index: 5; pointer-events: none; display: none;
}
@media (min-width: 1024px) { .spine { display: block } }

.spine__line {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px; background: var(--smpte); opacity: 0.45;
}
.spine__fill {
  position: absolute; left: -1px; top: 0; height: 100%; width: 3px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  animation: spine-fill linear both;
  animation-duration: auto;
  animation-timeline: scroll(root block);
}
@keyframes spine-fill { from { transform: scaleY(0) } to { transform: scaleY(1) } }

.spine__ticks {
  position: absolute; left: 0; top: 0; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
}
.spine__ticks i { width: 7px; height: 1px; background: var(--smpte); opacity: 0.34 }
.spine__ticks i:nth-child(6n + 1) { width: 16px; opacity: 0.6 }

/* Section timecode. Hangs into the rail on wide screens, sits inline below. */
.tc {
  font-family: var(--f-mono); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--mute); margin: 0 0 clamp(28px, 4vw, 48px);
  display: flex; align-items: baseline; gap: 14px;
}
.tc b {
  font-weight: 400; color: var(--accent);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}
.band--paper .tc b  { color: var(--charcoal) }  /* accent on paper is 2.3:1 */
.band--accent .tc b { color: var(--bar) }

@media (min-width: 1024px) { .tc { margin-left: calc(var(--rail) * -1) } }

/* ==========================================================================
   Frames — corner brackets, not boxes. The same hairline/accent system as
   the badge mark and the spine, so the page reads as one device throughout.
   ========================================================================== */

.frame { position: relative; padding: clamp(20px, 2.6vw, 36px) }
@media (max-width: 420px) { .frame { padding-inline: 14px } }

.frame__c {
  position: absolute; width: clamp(18px, 2.2vw, 30px); height: clamp(18px, 2.2vw, 30px);
  border: 1px solid var(--smpte); transition: transform 220ms;
}
.frame__c--tl { top: 0; left: 0;  border-right: 0; border-bottom: 0 }
.frame__c--tr { top: 0; right: 0; border-left: 0;  border-bottom: 0 }
.frame__c--bl { bottom: 0; left: 0;  border-right: 0; border-top: 0 }
.frame__c--br { bottom: 0; right: 0; border-left: 0;  border-top: 0 }
/* A camera racking focus, not a button pretending to be one: the corners
   tick outward on hover. Ambient, not interactive — the frame itself is
   never the click target. Transform only. */
.frame:hover .frame__c--tl { transform: translate(-3px, -3px) }
.frame:hover .frame__c--tr { transform: translate(3px, -3px) }
.frame:hover .frame__c--bl { transform: translate(-3px, 3px) }
.frame:hover .frame__c--br { transform: translate(3px, 3px) }
@media (prefers-reduced-motion: reduce) { .frame__c { transition: none } }

.frame__label {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px;
  font-family: var(--f-mono); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--mute); margin: clamp(26px, 4vw, 44px) 0 0;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.frame__label-l { color: var(--fg) }
/* WCAG 2.2 target size: a link in this quiet strip is still a target. */
.frame__label a { display: inline-block; min-height: 24px; padding: 4px 0; text-underline-offset: 3px }

/* ==========================================================================
   Bars — the page sits inside a letterboxed shot. Header is the top bar,
   the mobile action bar is the bottom one. Both are the same near-black on
   every ground.
   ========================================================================== */

.bar { background: var(--bar); color: var(--paper) }

/* A hairline the header always carries, not just on scroll — a static site
   has no scroll-position hook to key off cheaply, and a border that only
   appears on scroll would need JS to avoid a flash of the wrong state. */
.bar--top { position: sticky; top: 0; z-index: 20; height: var(--bar-h); border-bottom: 1px solid rgba(255,255,255,0.08) }
.bar__in {
  height: 100%; display: flex; align-items: center; gap: 20px;
  padding-inline: var(--gutter); max-width: 1560px; margin-inline: auto;
}

.mark {
  display: inline-flex; align-items: center; gap: 11px; text-decoration: none;
  margin-right: auto; min-height: 32px; min-width: 44px;
}
/* Solid badge, hard corners — the mark gets no rounding nothing else on the
   page has. currentColor lets the badge sit dark-on-accent everywhere the
   mark appears, including the one accent band, without a separate rule. */
.mark__badge {
  width: 26px; height: 26px; flex: none;
  background: var(--accent); color: var(--bar);
  display: grid; place-items: center;
}
.mark__badge .logomark { width: 15px; height: 15px }
.band--accent .mark__badge { background: var(--bar); color: var(--accent) }
.mark__name {
  font-family: var(--f-display); font-variation-settings: 'wdth' 100, 'wght' 800;
  font-size: 0.9rem; letter-spacing: 0.06em; line-height: 1;
  text-transform: uppercase;
}

.nav { display: none }
@media (min-width: 900px) { .nav { display: block } }
.nav__list { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0 }
.nav__link {
  position: relative;
  font-size: 0.9375rem; text-decoration: none; color: var(--mute-dark);
  padding: 6px 2px; display: inline-block; transition: color 140ms;
}
.nav__link:hover, .nav__link.is-here { color: var(--paper) }
/* Underline grows from center, transform only. is-here gets a permanent
   full underline instead of the hover animation — it is already the answer,
   not a hover state to discover. */
.nav__link::after {
  content: ''; position: absolute; left: 2px; right: 2px; bottom: 2px;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: center; transition: transform 180ms;
}
.nav__link:hover::after { transform: scaleX(1) }
.nav__link.is-here::after { transform: scaleX(1); transition: none }
@media (prefers-reduced-motion: reduce) { .nav__link::after { transition: none } }
.nav__link--lang { font-family: var(--f-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.09em }

.bar__cta { display: none; gap: 8px }
@media (min-width: 900px) { .bar__cta { display: flex } }

.burger {
  display: grid; place-content: center; gap: 5px;
  width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; cursor: pointer; padding: 0;
}
@media (min-width: 900px) { .burger { display: none } }
.burger__l { display: block; width: 20px; height: 1.5px; background: var(--paper) }

.menu {
  position: fixed; inset: var(--bar-h) 0 0; z-index: 19;
  background: var(--charcoal); padding: var(--gutter);
  display: flex; align-items: flex-start;
}
.menu[hidden] { display: none }
.menu__list { list-style: none; margin: 0 0 32px; padding: 0 }
.menu__link {
  font-family: var(--f-display); font-variation-settings: 'wdth' var(--wdth), 'wght' 800;
  font-size: clamp(2rem, 11vw, 3rem); line-height: 1.15; letter-spacing: -0.02em;
  text-decoration: none; display: block; padding: 6px 0;
}
.menu__lang { font-family: var(--f-mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--mute-dark) }

.bar--bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  height: var(--mbar-h); display: flex; gap: 1px;
  padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
}
@media (min-width: 900px) { .bar--bottom { display: none } }
.bar--bottom .btn { flex: 1 }

/* ==========================================================================
   Buttons — two verbs, held everywhere. Bel makes a call, App opens WhatsApp.
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 20px;
  font-family: var(--f-body); font-size: 0.9375rem; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color 140ms, color 140ms, border-color 140ms, transform 140ms;
  text-align: center;
}
/* A confident press, not a bounce: the primary and inverted CTAs lift 1px.
   Transform only, per the house rule — no shadow animates with it. */
.btn--solid:hover, .btn--invert:hover { transform: translateY(-1px) }
.btn--solid:active, .btn--invert:active { transform: translateY(0) }
@media (prefers-reduced-motion: reduce) {
  .btn--solid:hover, .btn--invert:hover { transform: none }
}
.btn--big { min-height: 54px; padding: 15px 26px; font-size: 1.0625rem }
.btn__sub { font-family: var(--f-mono); font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.04em; opacity: 0.82 }

.btn--solid  { background: var(--accent); color: var(--bar) }          /* 8.5:1 */
.btn--solid:hover { background: var(--accent-hover) }
.btn--ghost  { background: transparent; color: var(--paper); border-color: #4A4A44 }
.btn--ghost:hover { border-color: var(--paper) }
.btn--invert { background: var(--bar); color: var(--paper) }
.btn--invert:hover { background: #262620 }
.btn--outline { background: transparent; color: var(--bar); border-color: var(--bar) }
.btn--outline:hover { background: rgba(13,13,13,0.09) }

.band--paper .btn--ghost { color: var(--charcoal); border-color: #C9C6BE }
.band--paper .btn--ghost:hover { border-color: var(--charcoal) }

.acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 4vw, 40px) }

/* ==========================================================================
   Hero
   ========================================================================== */

/* The hero opens higher than the other bands — eight seconds is the budget,
   and dead space at the top is the easiest way to spend it badly. */
.hero { padding-top: clamp(40px, 5vw, 76px) }
.hero .frame--hero {
  min-height: min(72vh, 640px);
  display: flex; flex-direction: column; justify-content: center;
}
.hero__in { flex: 1; display: flex; flex-direction: column; justify-content: center }
.hero .lead { margin-top: clamp(22px, 3vw, 34px) }

.clock {
  font-variant-numeric: tabular-nums;  /* mono + tabular = zero layout shift */
  color: var(--accent); letter-spacing: 0.04em;
}

/* Vectorscope — the hero's only ornament. It fills the dead space to the right
   of the reading column with the same hairline/tick language as the spine and
   the frame corners, rather than with a photograph the studio does not have.
   Anchored to the lower right: the headline runs full width and must stay
   uncrowded, so the ornament sits below its last line, beside the lead and the
   buttons. Hidden below 1100px, where the reading column takes the full width
   and there is no dead space left to fill. */
.scope {
  position: absolute; right: 5%; bottom: 14%;
  width: clamp(170px, 16vw, 230px); height: auto;
  pointer-events: none; display: none;
  fill: none; stroke-linecap: square;
}
@media (min-width: 1100px) { .scope { display: block } }

.scope__ring { stroke: var(--smpte); stroke-width: 1; opacity: 0.3 }
.scope__ring--in { opacity: 0.18 }
.scope__cross { stroke: var(--smpte); stroke-width: 1; opacity: 0.13 }
.scope__ticks line { stroke: var(--smpte); stroke-width: 1; opacity: 0.42 }

/* The one moving part: a slow sweep, transform-only, on the same 6s clock as
   the ad reel so the page keeps one tempo. */
.scope__sweep {
  stroke: var(--accent); stroke-width: 1.5; opacity: 0.55;
  transform-origin: 100px 100px;
  animation: scope-sweep 6s linear infinite;
}
@keyframes scope-sweep { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }

/* ==========================================================================
   Split — a display statement against a reading column.
   ========================================================================== */

.split { display: grid; gap: clamp(24px, 3.5vw, 56px) }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start }
}
.split__body { max-width: 48ch; color: var(--fg) }
/* Reading columns sit a step above the mute grey — mute is for labels and
   asides, not for the paragraphs someone is meant to actually read. */
.split__body p { color: #45453F }
.band--dark .split__body p { color: #CFCEC7 }

/* ==========================================================================
   Website demo — a real page that really reflows, not a screenshot.
   ========================================================================== */

.demo { margin-top: var(--step) }
.demo__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  margin-bottom: 18px;
}
.demo__note {
  font-family: var(--f-mono); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--mute); margin: 0;
}

.seg { display: flex; border: 1px solid var(--line) }
.seg__b {
  font-family: var(--f-mono); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.09em; background: none; border: 0; cursor: pointer;
  color: var(--mute); padding: 11px 15px; min-height: 40px;
  border-right: 1px solid var(--line);
  transition: background-color 140ms, color 140ms;
}
.seg__b:last-child { border-right: 0 }
.seg__b:hover { color: var(--fg) }
.seg__b[aria-pressed='true'] { background: var(--charcoal); color: var(--paper) }

.demo__stage {
  height: clamp(318px, 33vw, 396px);
  overflow: hidden;
  background: #E4E2DC;
  display: flex; justify-content: center;
}
.demo__vp {
  width: 100%; max-width: 100%; height: 100%;
  background: #fff; container-type: inline-size;
  overflow: hidden;
  transition: opacity 130ms;   /* opacity only — width switches instantly */
}
.demo__vp.is-swapping { opacity: 0.35 }

.mini { font-family: var(--f-body); color: var(--charcoal); font-size: 13px; line-height: 1.5 }
.mini__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px; border-bottom: 1px solid #E8E6E0;
}
.mini__logo { font-family: var(--f-display); font-variation-settings: 'wdth' 100, 'wght' 800; font-size: 13px }
.mini__nav { display: flex; gap: 12px }
.mini__nav i { display: block; width: 26px; height: 5px; background: #DCD9D2 }
.mini__hero { padding: 26px 18px 24px }
.mini__h {
  font-family: var(--f-display); font-variation-settings: 'wdth' 100, 'wght' 800;
  font-size: 27px; line-height: 1.02; letter-spacing: -0.025em; margin: 0 0 10px;
}
.mini__p { color: #5C5C57; margin: 0 0 16px; max-width: 34ch; font-size: 12.5px }
.mini__btn {
  display: inline-block; background: var(--accent); color: var(--bar);
  font-weight: 600; font-size: 12.5px; padding: 9px 16px;
}
.mini__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 18px 22px }
.mini__card { border: 1px solid #E8E6E0; padding: 13px }
.mini__card b { display: block; font-size: 12px; margin-bottom: 9px }
.mini__card i { display: block; height: 5px; background: #ECEAE4; margin-bottom: 6px }
.mini__card i:last-child { width: 62% }

.mini__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px; border-top: 1px solid #E8E6E0; color: #67675F; font-size: 11.5px;
}
.mini__foot-r { display: flex; gap: 8px }
.mini__foot-r i { display: block; width: 34px; height: 5px; background: #E4E1DA }

@container (max-width: 560px) {
  .mini__grid { grid-template-columns: 1fr }
  .mini__h { font-size: 22px }
}
@container (max-width: 380px) {
  .mini__nav i:nth-child(-n + 2) { display: none }
  .mini__h { font-size: 19px }
  .mini__hero { padding: 20px 14px 18px }
  .mini__bar, .mini__grid, .mini__foot { padding-inline: 14px }
}

/* ==========================================================================
   Video ad demo — one ad, three formats, running. Hard cuts, one playhead.
   Transform and opacity only.
   ========================================================================== */

.ads {
  display: flex; align-items: flex-end; gap: clamp(10px, 1.8vw, 26px);
  margin-top: var(--step); flex-wrap: wrap;
}
.ad { margin: 0 }
.ad figcaption {
  font-family: var(--f-mono); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--mute); margin-top: 11px;
}
.ad__stage {
  height: clamp(196px, 25vw, 290px);
  position: relative; overflow: hidden; background: var(--bar);
  container-type: size;
  /* Letterbox black on charcoal is nearly the same value, so the format needs
     an edge to be readable as a format. */
  outline: 1px solid var(--line); outline-offset: 0;
}
.ad__stage--916 { aspect-ratio: 9 / 16 }
.ad__stage--11  { aspect-ratio: 1 / 1 }
.ad__stage--169 { aspect-ratio: 16 / 9 }

.ad__reel { position: absolute; inset: 0 }
.ad__card {
  position: absolute; inset: 0; opacity: 0;
  display: flex; align-items: center; padding: 7cqmin;
  animation: ad-cut 6s steps(1) infinite;
}
.ad__card--end { background: var(--accent) }
.ad__card:nth-child(2) { animation-delay: 1.5s }
.ad__card:nth-child(3) { animation-delay: 3s }
.ad__card:nth-child(4) { animation-delay: 4.5s }

.ad__t {
  font-family: var(--f-display); font-variation-settings: 'wdth' 100, 'wght' 800;
  font-size: 12cqmin; line-height: 0.97; letter-spacing: -0.03em;
  color: var(--paper); animation: ad-rise 6s linear infinite;
}
.ad__t--big { font-size: 14cqmin; color: var(--accent) }
.ad__t--end { color: var(--bar); display: flex; flex-direction: column; gap: 4cqmin }
.ad__t--end b { font-size: 15cqmin; line-height: 0.95; font-weight: inherit }
.ad__card:nth-child(2) .ad__t { animation-delay: 1.5s }
.ad__card:nth-child(3) .ad__t { animation-delay: 3s }
.ad__card:nth-child(4) .ad__t { animation-delay: 4.5s }

.ad__mark {
  display: inline-flex; align-items: center; gap: 1.6cqmin;
  font-size: 4.4cqmin; letter-spacing: 0.02em;
}
.ad__br { width: 1.6cqmin; height: 5cqmin; border: 1px solid var(--bar) }
.ad__br--l { border-right: 0 }
.ad__br--r { border-left: 0 }

.ad__head {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  animation: ad-play 6s linear infinite;
  /* Invisible against the black cards, and the thing that keeps the playhead
     readable once the last card turns the whole frame green. */
  box-shadow: 0 0 0 1px rgba(13, 13, 13, 0.55);
}

@keyframes ad-cut  { 0%, 24.9% { opacity: 1 } 25%, 100% { opacity: 0 } }
@keyframes ad-rise {
  0%    { opacity: 0; transform: translateY(0.16em) }
  3%    { opacity: 1; transform: none }
  24.9% { opacity: 1; transform: none }
  25%, 100% { opacity: 0; transform: none }
}
@keyframes ad-play { from { transform: scaleX(0) } to { transform: scaleX(1) } }

/* Paused until scrolled into view, and while the tab is hidden. */
.ads.is-paused .ad__card,
.ads.is-paused .ad__t,
.ads.is-paused .ad__head { animation-play-state: paused }

/* A sentence, so it is set as a sentence. Uppercase mono is reserved for
   labels — three lines of it would be a label pretending to be prose. */
.ads__note { color: var(--mute); margin: 26px 0 0; max-width: 54ch }

@media (max-width: 719px) {
  .ads { display: grid; grid-template-columns: 1fr 1fr; align-items: start }
  .ad__stage { height: auto; width: 100% }
  .ad:nth-of-type(3) { grid-column: span 2 }
  .ads .sr { grid-column: span 2 }
}

/* ==========================================================================
   Process — a real sequence, so it gets real numbering.
   ========================================================================== */

.steps { list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; counter-reset: none }
.step {
  display: grid; gap: 6px 28px; padding: clamp(20px, 2.6vw, 28px) 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line) }
@media (min-width: 700px) { .step { grid-template-columns: 110px minmax(0, 1fr) } }

.step__t {
  font-family: var(--f-mono); font-size: 0.8125rem; letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums; color: var(--accent); padding-top: 4px;
}
.band--paper .step__t { color: var(--charcoal) }
.step__h { font-size: 1.1875rem; font-weight: 600; margin: 0 0 5px; line-height: 1.3 }
.step__c p { color: #45453F; margin: 0; max-width: 54ch }

.punch {
  font-family: var(--f-display); font-variation-settings: 'wdth' var(--wdth), 'wght' 800;
  font-size: clamp(2.1rem, 5.4vw, 4rem); line-height: 0.94; letter-spacing: -0.035em;
  margin: clamp(52px, 7vw, 92px) 0 0; text-wrap: balance;
  overflow-wrap: break-word;
}
.punch__sub { max-width: 46ch; color: #45453F; margin-top: 20px }
.band--dark .punch__sub { color: #CFCEC7 }

/* ==========================================================================
   Operator
   ========================================================================== */

.facts {
  list-style: none; margin: clamp(44px, 6vw, 76px) 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 780px) { .facts { grid-template-columns: repeat(3, 1fr) } }
.facts li {
  background: var(--bg); padding: clamp(20px, 2.6vw, 30px);
  display: flex; flex-direction: column; gap: 8px;
}
.facts b {
  font-family: var(--f-display); font-variation-settings: 'wdth' var(--wdth), 'wght' 800;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 0.9; letter-spacing: -0.03em;
  color: var(--accent);
}
.facts span { color: var(--mute); font-size: 0.9375rem; line-height: 1.45 }

/* ==========================================================================
   Close
   ========================================================================== */

.close { text-align: left }
.h2--close { font-size: clamp(2.9rem, 9.6vw, 6.6rem) }
.close__lead { max-width: 38ch; margin-top: 22px; font-size: clamp(1.0625rem, 1.5vw, 1.28rem) }
.acts--close { margin-top: clamp(30px, 4vw, 44px) }
.close__alt { margin-top: 22px; font-size: 0.9375rem; color: #0B3B22 }
/* WCAG 2.2 target size: the quiet mail link is still a target. */
.close__alt a { text-underline-offset: 3px; display: inline-block; min-height: 24px; padding: 3px 0 }

/* ==========================================================================
   Footer
   ========================================================================== */

.foot {
  background: var(--bar); color: var(--mute-dark);
  padding: clamp(48px, 6vw, 76px) var(--gutter);
  font-size: 0.9375rem;
  --mute: var(--mute-dark);
}
@media (min-width: 1024px) { .foot { padding-left: var(--pad-l) } }
.foot__in { display: grid; gap: 30px }
@media (min-width: 820px) {
  .foot__in { grid-template-columns: 1fr auto; align-items: start }
  .foot__legal { grid-column: 1 / -1 }
}
.foot .mark--static { color: var(--paper) }
.foot__contact { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center }
/* WCAG 2.2 target size: 24 CSS px minimum, including these quiet links. */
.foot__contact a { text-underline-offset: 3px; display: inline-block; padding: 4px 0; min-height: 24px }
.foot__sep { opacity: 0.5 }
.foot__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px }
.foot__nav a { text-decoration: none; display: inline-block; padding: 4px 0; min-height: 24px }
.foot__nav a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px }
.foot__legal {
  font-family: var(--f-mono); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.09em; display: flex; flex-wrap: wrap; gap: 9px;
  margin: 0; padding-top: 26px; border-top: 1px solid #2A2A26;
}

/* ==========================================================================
   Grain — the site is named Motion; it should feel like film, not like a
   flat digital surface. One fixed SVG-turbulence layer, tiled, so quiet it
   reads as texture rather than noise. mix-blend-mode does the blending, so
   the same layer works unmodified on every ground (paper included).
   ========================================================================== */

.grain {
  position: fixed; inset: 0; z-index: 6; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http://www.w3.org/2000/svg' width%3D'160' height%3D'160'%3E%3Cfilter id%3D'n'%3E%3CfeTurbulence type%3D'fractalNoise' baseFrequency%3D'0.85' numOctaves%3D'2' stitchTiles%3D'stitch'/%3E%3CfeColorMatrix type%3D'matrix' values%3D'0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0.2126 0.7152 0.0722 0 0'/%3E%3C/filter%3E%3Crect width%3D'100%25' height%3D'100%25' filter%3D'url%28%23n%29'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.06;
  mix-blend-mode: overlay;
  animation: grain-flicker 0.2s steps(1) infinite;
}
/* A single alternate frame, not a scrolling texture — steps(1) swaps the
   opacity value once per cycle with no interpolation, closer to how film
   grain actually reads (frame-to-frame variance, not a smooth shimmer). */
@keyframes grain-flicker { 50% { opacity: 0.09 } }

/* ==========================================================================
   Page heads — every route below the homepage opens the same way: timecode,
   one display line inside a frame, one reading line. Same device, no new idea.
   ========================================================================== */

.head { padding-top: clamp(40px, 5vw, 76px) }
.head .frame { min-height: min(46vh, 420px); display: flex; flex-direction: column; justify-content: center }
.head .lead { color: var(--fg) }

/* A quiet inline link at the end of a reading column. Not a button — buttons
   are Bel and App, and nothing else gets to look like one. */
.more { margin-top: 1.4em }
.more a {
  font-family: var(--f-mono); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.09em; text-decoration: none;
  border-bottom: 1px solid var(--accent); padding-bottom: 3px;
  display: inline-block; min-height: 24px;
}
.band--paper .more a { border-bottom-color: var(--charcoal) }
.band--accent .more a { border-bottom-color: var(--bar) }
.more a:hover { border-bottom-width: 2px }

/* Reading columns on the dark ground. The paper value is set on .step__c
   further up; without this pair the same list is unreadable on charcoal. */
.band--dark .step__c p { color: #CFCEC7 }
.steps--tight .step { grid-template-columns: none }
@media (min-width: 700px) { .steps--tight .step { grid-template-columns: 58px minmax(0, 1fr) } }

/* ==========================================================================
   Deliverables — what is actually handed over. Plain nouns, no adjectives.
   ========================================================================== */

.gets {
  list-style: none; margin: clamp(36px, 5vw, 60px) 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
}
@media (min-width: 640px)  { .gets { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1000px) { .gets--3 { grid-template-columns: repeat(3, 1fr) } }
.gets li { background: var(--bg); padding: clamp(18px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 7px }
.gets b { font-size: 1.0625rem; font-weight: 600; line-height: 1.3 }
.gets span { color: var(--mute); font-size: 0.9375rem; line-height: 1.5 }

/* The honest other half: what is not included. Same block, struck marker. */
.gets--not b { color: var(--mute) }
.gets--not b::before {
  content: ''; display: inline-block; width: 13px; height: 1px;
  background: currentColor; vertical-align: middle; margin-right: 9px;
}

/* ==========================================================================
   Questions — the ones that actually get asked on the phone, answered in the
   same words. A definition list, because that is what it is.
   ========================================================================== */

.qa { margin: clamp(40px, 6vw, 72px) 0 0 }
.qa div { display: grid; gap: 6px 28px; padding: clamp(20px, 2.6vw, 28px) 0; border-top: 1px solid var(--line) }
.qa div:last-child { border-bottom: 1px solid var(--line) }
@media (min-width: 800px) { .qa div { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) } }
.qa dt { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; max-width: 30ch }
.qa dd { margin: 0; color: #45453F; max-width: 56ch }
.band--dark .qa dd { color: #CFCEC7 }

/* ==========================================================================
   Contact — three ways in, ranked. Calling is first because calling is best.
   ========================================================================== */

.ways {
  list-style: none; margin: clamp(36px, 5vw, 60px) 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
}
@media (min-width: 820px) { .ways { grid-template-columns: repeat(3, 1fr) } }
.ways li { background: var(--bg); padding: clamp(20px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 10px }
.ways__k { font-family: var(--f-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--mute) }
.ways__v {
  font-family: var(--f-display); font-variation-settings: 'wdth' var(--wdth), 'wght' 800;
  font-size: clamp(1.4rem, 2.6vw, 1.95rem); line-height: 1.02; letter-spacing: -0.03em;
  text-decoration: none; overflow-wrap: anywhere;
}
.ways__v:hover { text-decoration: underline; text-underline-offset: 5px }
.ways p { color: var(--mute); font-size: 0.9375rem; margin: 0 }

/* ==========================================================================
   Form — deliberately the third option, so it is set quietly and never
   pretends to be the fast route. Disabled and honest while FORM_ENDPOINT is
   empty: it must never swallow a submission in silence.
   ========================================================================== */

.form { margin: clamp(38px, 5vw, 64px) 0 0; max-width: 620px; display: grid; gap: 20px }
.field { display: grid; gap: 7px }
.field > span {
  font-family: var(--f-mono); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--mute);
}
.field input, .field textarea, .field select {
  font-family: var(--f-body); font-size: 1rem; color: var(--fg);
  background: transparent; border: 1px solid var(--line);
  padding: 13px 14px; min-height: 48px; width: 100%;
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.55 }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--accent) }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 20px center, right 14px center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 40px;
}
.field select option { color: #10160F; background: #FFFFFF }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.form__note { color: var(--mute); font-size: 0.875rem; margin: 0; max-width: 52ch }
.form__off { border-left: 2px solid var(--accent); padding: 4px 0 4px 18px; color: var(--fg); max-width: 52ch; margin: 0 }
.form--off .field input, .form--off .field textarea, .form--off .field select { opacity: 0.5 }

/* ==========================================================================
   Prose — privacy only. One column, no display type, nothing to look at.
   ========================================================================== */

.prose { max-width: 68ch; margin-top: clamp(32px, 4vw, 52px) }
.prose h2 {
  font-family: var(--f-body); font-size: 1.1875rem; font-weight: 600; line-height: 1.3;
  letter-spacing: 0; margin: clamp(34px, 4vw, 48px) 0 10px;
}
.prose h2:first-child { margin-top: 0 }
.prose p, .prose li { color: #45453F }
.band--dark .prose p, .band--dark .prose li { color: #CFCEC7 }
.prose ul { margin: 0 0 1.1em; padding-left: 1.1em }
.prose li { margin-bottom: 0.45em }
.prose a { text-underline-offset: 3px; display: inline-block; min-height: 24px }
.prose__meta {
  font-family: var(--f-mono); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--mute); margin-top: clamp(34px, 4vw, 48px);
  padding-top: 14px; border-top: 1px solid var(--line);
}

/* ==========================================================================
   Work — off by default (SHOW_WORK). No placeholder cards, no "coming soon":
   the route does not exist until there is real work with written permission.
   ========================================================================== */

.cases { list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; display: grid; gap: clamp(28px, 4vw, 48px) }
@media (min-width: 860px) { .cases { grid-template-columns: repeat(2, 1fr) } }
.case__k { font-family: var(--f-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--mute); margin: 0 0 10px }
.case h3 {
  font-family: var(--f-display); font-variation-settings: 'wdth' var(--wdth), 'wght' 800;
  font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 0.96; letter-spacing: -0.03em; margin: 0 0 12px;
}
.case p { color: #45453F; max-width: 46ch }
.band--dark .case p { color: #CFCEC7 }

/* ==========================================================================
   Reduced motion — a genuinely still site, not the same motion turned down.
   The ad freezes on its most useful card and shows a full playhead, so all
   three formats still read as three formats.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .ad__card { opacity: 0; animation: none !important }
  .ad__card:nth-child(2) { opacity: 1 }
  .ad__t { opacity: 1 !important; transform: none !important; animation: none !important }
  .ad__head { transform: scaleX(1); animation: none !important }
  .spine__fill { transform: scaleY(1); animation: none !important }
  /* Parked at 45°, so the sweep still reads as a scope rather than as a
     stray radius sitting on the vertical axis tick. */
  .scope__sweep { transform: rotate(45deg); animation: none !important }
  .grain { opacity: 0.06; animation: none !important }
  .frame__c { transition: none }
  .skip { transition: none }
}