/* ==========================================================================
   Good Content Company

   Palette taken from scrollstop.agency: a near-black ground, white type and a
   single electric-blue accent, with a white-alpha ramp for panels and rules.
     #0D0D0D  ground        #FFFFFF  type / light sections
     #0072EF  accent        #0063CC  accent, pressed
   Type stays Epilogue / Hanken Grotesk / Martian Mono.
   ========================================================================== */

:root{
  color-scheme: dark;

  --ground:    #0D0D0D;   /* near-black — the page ground */
  --raised:    #141414;   /* raised panels on the dark */
  --rule:      rgba(255,255,255,.14);  /* hairline on the dark */
  --light:     #FFFFFF;   /* light sections, and text on the dark */
  --accent:    #0072EF;   /* the single accent */
  --accent-d:  #0063CC;   /* accent, pressed */
  --accent-lt: #0099FF;   /* small accent text on the dark — #0072EF is only
                             4.3:1 there, which clears AA for display sizes
                             but not for body copy. #0099FF clears it at 6.5:1. */
  --on-accent: #FFFFFF;   /* text sitting on the accent */
  --ink:       #0D0D0D;   /* text on the light sections */
  --muted:     rgba(255,255,255,.62);
  --muted-d:   rgba(13,13,13,.60);
  --line:      rgba(255,255,255,.16);
  --line-d:    rgba(13,13,13,.12);

  --disp: "Epilogue", "Helvetica Neue", Arial, sans-serif;
  --body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Martian Mono", ui-monospace, Consolas, monospace;

  --t-body: clamp(.87rem, .83rem + .18vw, .96rem);
  --t-lede: clamp(.94rem, .88rem + .4vw, 1.18rem);
  --t-h3:   clamp(1.04rem, .95rem + .5vw, 1.42rem);
  --t-h2:   clamp(1.55rem, 1.08rem + 2.1vw, 3.05rem);
  --t-h1:   clamp(2rem, 1.25rem + 3.4vw, 4.5rem);

  --shell: 1300px;
  --pad:   clamp(1.1rem, .4rem + 2.6vw, 3.2rem);
  --sec-y: clamp(3.6rem, 2.4rem + 5.2vw, 7.5rem);
  --r: 6px;

  --ease:  cubic-bezier(.22,.61,.36,1);
  --ease-o:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--ground); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* No background here on purpose: html's is propagated to the canvas, which
   leaves .bgfx (z-index:-1) visible. Painting body would bury it. */
body{
  margin:0; color:var(--light);
  font-family:var(--body); font-size:var(--t-body); line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* ====================================================== BACKGROUND ====== */
/* A sensor grid that drifts, with a scan beam passing down it — deliberately
   not a blurred colour field. Fixed behind everything; the white sections and
   the blue band paint over it, so it reads only on the near-black stretches.
   Both layers animate transform/opacity only, so they stay off the main thread. */
.bgfx{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }

.bgfx__grid{
  position:absolute; inset:-70px;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.055) 1px, transparent 0);
  background-size:46px 46px;
  will-change:transform;
  animation:bg-drift 44s linear infinite;
}
/* Exactly one tile, so the loop point is invisible. */
@keyframes bg-drift{ to{ transform:translate3d(46px,46px,0); } }

.bgfx__scan{
  position:absolute; left:0; right:0; top:-56vh; height:56vh;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(0,153,255,.045) 40%,
    rgba(0,153,255,.10) 50%,
    rgba(0,153,255,.045) 60%,
    transparent 100%);
  will-change:transform,opacity;
  animation:bg-scan 19s var(--ease) infinite;
}
/* Travels for ~11s, then holds off-screen for ~8s so it never nags. */
@keyframes bg-scan{
  0%,4%   { transform:translate3d(0,0,0); opacity:0; }
  12%     { opacity:1; }
  48%     { opacity:1; }
  58%,100%{ transform:translate3d(0,156vh,0); opacity:0; }
}

/* Keeps the grid off the page edges so it reads as depth, not wallpaper. */
.bgfx::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(115% 80% at 50% 42%, transparent 45%, var(--ground) 100%);
}

@media (prefers-reduced-motion: reduce){
  .bgfx__grid{ animation:none; }
  .bgfx__scan{ display:none; }
}

img,video{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--accent); color:var(--on-accent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.skip{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.skip:focus{
  position:fixed; top:12px; left:12px; z-index:200; width:auto; height:auto; clip:auto;
  padding:.7rem 1.1rem; background:var(--accent); color:var(--on-accent); border-radius:var(--r);
}

.shell{ width:min(var(--shell), 100% - (var(--pad) * 2)); margin-inline:auto; }
.shell--wide{ width:min(1520px, 100% - (var(--pad) * 2)); }
.shell--narrow{ width:min(860px, 100% - (var(--pad) * 2)); }
.sec{ padding-block:var(--sec-y); position:relative; }

/* ---------------------------------------------------------------- type -- */
.d{ font-family:var(--disp); font-weight:700; letter-spacing:-.03em; line-height:1.02; margin:0; }
.h1{ font-size:var(--t-h1); max-width:15ch; }
.h1 em{ font-style:normal; color:var(--accent); }
.h2{ font-size:var(--t-h2); max-width:19ch; margin-bottom:clamp(1.8rem,1.2rem + 2vw,3rem); }

.lab{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:.1rem;
  font-family:var(--mono); font-size:.58rem; font-weight:400;
  letter-spacing:.02em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1.1rem;
}
.lab--light{ color:rgba(255,255,255,.7); }
.dot{ width:7px; height:7px; background:var(--accent); border-radius:50%; margin-right:.6rem; flex:none; }
.sep{ font-style:normal; padding-inline:.5rem; opacity:.45; }

.lede{ font-size:var(--t-lede); line-height:1.5; color:var(--muted); max-width:46ch; margin:0; }
.lede--light{ color:rgba(255,255,255,.72); }

/* ------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.78rem 1.5rem; border-radius:var(--r);
  font-family:var(--body); font-size:.84rem; font-weight:600;
  text-decoration:none; cursor:pointer;
  border:1.5px solid transparent; background:transparent; color:var(--light);
  transition:background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn--accent{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.btn--accent:hover{ background:var(--accent-d); border-color:var(--accent-d); }
.btn--line{ border-color:var(--line); }
.btn--line:hover{ border-color:var(--light); }
.btn--light{ background:var(--light); color:var(--ink); border-color:var(--light); }
.btn--light:hover{ background:#fff; border-color:#fff; }
.btn--lg{ padding:.9rem 1.75rem; font-size:.92rem; }
.btn--block{ width:100%; }

/* ---------- light sections invert the palette ---------- */
.brands,.quotes,.contact{ /* placeholder for grouping */ }
.on-light{ background:var(--light); color:var(--ink); }
.on-light .lab{ color:var(--muted-d); }
.on-light .lede{ color:var(--muted-d); }
.on-light .btn--line{ border-color:var(--line-d); color:var(--ink); }
.on-light .btn--line:hover{ border-color:var(--ink); }

/* =========================================================== NAV ======== */
.nav{
  position:sticky; top:0; z-index:80;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; transition:border-color .3s ease;
}
.nav.is-stuck{ border-bottom-color:var(--rule); }
.nav__in{ display:flex; align-items:center; gap:1.6rem; min-height:72px; }
.nav__brand img{ width:auto; height:23px; }
.nav__links{ display:flex; gap:clamp(1rem,2.1vw,2.2rem); margin-left:auto; }
.nav__links a{
  font-family:var(--mono); font-size:.61rem; text-transform:uppercase;
  text-decoration:none; color:var(--muted); transition:color .25s ease;
}
.nav__links a:hover{ color:var(--accent-lt); }
.nav__links a[aria-current="page"]{ color:var(--light); }
.nav__links a[aria-current="page"]::after{
  content:""; display:block; height:1.5px; background:var(--accent); margin-top:.3rem; }
.nav__cta{ flex:none; padding:.55rem 1.1rem; font-size:.78rem; }

.burger{ display:none; width:36px; height:30px; margin-left:auto; background:none; border:0; cursor:pointer;
  flex-direction:column; align-items:flex-end; justify-content:center; gap:7px; }
.burger span{ display:block; height:2px; background:var(--light); transition:transform .3s var(--ease), width .3s var(--ease); }
.burger span:first-child{ width:24px; } .burger span:last-child{ width:15px; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ width:24px; transform:translateY(-4.5px) rotate(-45deg); }

.mobilenav[hidden]{ display:none; }
.mobilenav{ display:flex; flex-direction:column; padding:.4rem var(--pad) 1.5rem; border-top:1px solid var(--rule); }
.mobilenav a{ font-family:var(--disp); font-weight:700; font-size:1.35rem; letter-spacing:-.03em;
  text-decoration:none; padding:.5rem 0; border-bottom:1px solid var(--rule); }
.mobilenav a:last-child{ border-bottom:0; }
.mobilenav .btn{ margin-top:1rem; font-family:var(--body); font-size:.92rem; }
@media (max-width:940px){ .nav__links,.nav__cta{ display:none; } .burger{ display:flex; } }
@media (min-width:941px){ .mobilenav{ display:none !important; } }

/* =========================================================== HERO ======= */
.hero{ padding-top:clamp(2.4rem,1.5rem + 3.4vw,5rem); }
.hero__in{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(2rem,4vw,4.5rem); align-items:center;
}
.hero .h1{ margin-top:.3rem; }
.hero .lede{ margin-top:clamp(1.4rem,1rem + 1.6vw,2.2rem); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:clamp(1.6rem,1.1rem + 1.6vw,2.4rem); }

/* --- Kinetic type block --- */
.hero__kin{ display:flex; flex-direction:column; align-items:flex-end; gap:clamp(1.6rem,1.2rem + 1.8vw,2.8rem); }

/* Rotating tagline seal */
.seal{ position:relative; width:clamp(205px,21.5vw,300px); aspect-ratio:1; }
.seal svg{ width:100%; height:100%; animation:spin 26s linear infinite; }
.seal text{
  font-family:var(--mono); font-size:17px; letter-spacing:0;
  fill:var(--muted); text-transform:uppercase;
}
.seal__mark{
  position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%);
  display:grid; place-items:center;
  width:38%; aspect-ratio:1; border-radius:50%;
  background:var(--accent); color:var(--on-accent);
  font-size:clamp(1.05rem,1.7vw,1.4rem); padding-left:.12em;
}
@keyframes spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* Vertical word reel */
.kin{ display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; margin:0; text-align:right; }
.kin__lab{ margin:0; }
.kin__rot{
  display:block; overflow:hidden;
  height:1.06em; line-height:1.06;
  font-family:var(--disp); font-weight:700;
  font-size:clamp(2.35rem,1.5rem + 2.95vw,4.3rem);
  letter-spacing:-.035em; color:var(--accent);
}
.kin__reel{ display:flex; flex-direction:column; will-change:transform; }
.kin__reel b{ display:block; height:1.06em; line-height:1.06; font-weight:700; white-space:nowrap; }
.js .kin__reel{ transition:transform .72s var(--ease-o); }
.kin__reel.no-anim{ transition:none !important; }

.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (max-width:900px){
  .hero__in{ grid-template-columns:1fr; }
  .hero__kin{ flex-direction:row; align-items:center; justify-content:space-between; gap:1.5rem; }
  .kin{ align-items:flex-end; }
}
@media (max-width:520px){
  .seal{ width:145px; }
  .hero__kin{ gap:1rem; }
}
@media (prefers-reduced-motion: reduce){
  .seal svg{ animation:none; }
  .js .kin__reel{ transition:none; }
}
/* ========================================================= BRANDS ======= */
/* The one centred section on the page — a proof wall reads as a block, not a
   column of left-aligned copy. */
.brands{ text-align:center; border-block:1px solid var(--rule); }
.brands .h2{ max-width:24ch; margin-inline:auto; }

/* A grid, not flex-wrap: with nine brands, wrapping packs them 7 + 2. Three
   columns gives three even rows, and any future count only ever leaves the
   last row short. */
.brands__wall{
  list-style:none; padding:0;
  margin:0 auto clamp(1.6rem,1.2rem + 1.4vw,2.6rem);
  max-width:900px;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center;
  gap:clamp(1.6rem,1.1rem + 2vw,2.8rem) clamp(1.2rem,.6rem + 2vw,2.6rem);
}
.brand{ display:flex; align-items:center; justify-content:center; height:44px; }

/* Wordmarks stand in until the real files land. */
.brand span{
  font-family:var(--disp); font-weight:700; font-size:clamp(.95rem,.85rem + .3vw,1.15rem);
  letter-spacing:-.02em; white-space:nowrap; color:var(--light);
  opacity:.6; transition:opacity .3s var(--ease);
}
/* Any logo dropped in is flattened to a white silhouette, so a wall of
   mismatched brand colours still reads as one set. Transparent stays clear. */
.brand img{
  max-height:34px; max-width:100%; width:auto; height:auto;
  filter:brightness(0) invert(1);
  opacity:.72; transition:opacity .3s var(--ease);
}
/* Optical sizing. Capping every logo at one height makes the stacked lockups —
   a mark sitting above the wordmark — read much smaller than the wide ones,
   because only half their height is the name. These get more room. */
.brand--tall img{ max-height:48px; }
.brand:hover span,.brand:hover img{ opacity:1; }

.brands__note{ display:block; max-width:62ch; margin:0 auto; }

@media (max-width:560px){
  .brands__wall{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.3rem 1rem; }
  .brand{ height:36px; }
}

/* ======================================================== FIGURES ======= */
/* Heading left, copy right, then a centred 2x2 quadrant with a small cross
   where the four cells meet — rather than a row of four divided by rules. */
/* Measured off the reference at 1536px: heading column 470px, copy column 941px,
   10px between them — i.e. exactly 1fr / 2fr. */
.figures__in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:10px; align-items:start;
}
/* Reference is 30px / 600, not a display-scale heading — --t-h2 was nearly
   40% larger and a weight heavier, which is what made this read wrong. */
.figures__in .h2{
  margin-bottom:0; max-width:none; font-weight:600;
  font-size:clamp(1.35rem,1rem + 1.05vw,1.875rem); line-height:1.2; letter-spacing:-.02em;
}
/* Reference: 36px, weight 300, tracking -.08em. The light weight and the tight
   tracking are doing most of the work here. */
/* .figures__body p below is (0,1,1) and would otherwise win on specificity and
   drop this back to body size. */
.figures__body p.figures__lead{
  font-family:var(--body); font-weight:300;
  font-size:clamp(1.4rem,1rem + 1.7vw,2.25rem); line-height:1.2;
  letter-spacing:-.06em; color:var(--light); max-width:none;
  margin:0 0 clamp(1.6rem,1.2rem + 1.3vw,2.5rem);
}
/* No max-width on either: the reference runs both the lead and the body copy
   the full width of this column. */
.figures__body p{ margin:0 0 2.3rem; color:rgba(255,255,255,.8);
  font-size:clamp(.95rem,.9rem + .3vw,1.06rem); line-height:1.6; max-width:none; }
.figures__body p:last-of-type{ color:var(--light); margin-bottom:0; }
.figures__body b{ color:var(--light); font-weight:600; }
@media (max-width:820px){ .figures__in{ grid-template-columns:1fr; } }

/* Left-aligned in the copy column at 80% of its width, and the two cells sit
   flush — the space between the numbers is the cells centring their own text,
   not a column gap. */
.figures__grid{
  text-align:center;
  position:relative;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  row-gap:8px; column-gap:0;
  max-width:80%; margin:clamp(2.8rem,2rem + 3vw,4.75rem) auto 0 0;
}
/* The cross: two short strokes crossing at the exact centre of the grid. It is
   drawn on the container, so it stays put however tall the cells get. */
.figures__grid::before,
.figures__grid::after{
  content:""; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); background:rgba(255,255,255,.22);
}
.figures__grid::before{ width:clamp(26px,3vw,40px); height:1px; }
.figures__grid::after{ width:1px; height:clamp(26px,3vw,40px); }

/* Measured off the live section: 64px, weight 400, line-height 1.2 (a 77px
   box), tracking -.06em, and only 4px down to the label. White at .31 opacity
   there; kept at .34 — the same grey to the eye, but 3.02:1 rather than
   2.73:1, so it clears AA for large text. */
.fig b{
  display:block; font-family:var(--disp); font-weight:400;
  font-size:clamp(2.2rem,1.2rem + 3.2vw,4rem); letter-spacing:-.06em; line-height:1.2;
  color:rgba(255,255,255,.34); font-variant-numeric:tabular-nums;
  /* Reference gap is 4px. Epilogue's line box carries ~6px more descender slack
     than Archivo's, so this negative margin is what lands the measured gap on 4. */
  margin-bottom:-2px;
}
/* Not the mono .lab default — the reference sets these in its body sans at 500,
   and Martian Mono was the single most obvious mismatch in this block. */
.fig .lab{
  margin:0; justify-content:center; color:var(--light);
  font-family:var(--body); font-weight:500; text-transform:uppercase;
  font-size:.75rem; letter-spacing:.14em; line-height:1.2;
}
@media (max-width:560px){
  .figures__grid{ max-width:100%; column-gap:1rem; }
  .fig .lab{ font-size:.6rem; letter-spacing:.08em; }
}

/* =========================================================== LOOP ======= */
.loop{ background:var(--raised); }
.steps{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.step{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:clamp(1rem,3vw,4rem); align-items:start;
  padding-block:clamp(1.5rem,1.1rem + 1.8vw,2.6rem); border-bottom:1px solid var(--rule); }
.step__n{ font-size:1.2rem; color:var(--accent); padding-top:.2rem; }
.step h3{ font-size:var(--t-h3); margin:0 0 .5rem; }
.step p{ margin:0; color:var(--muted); max-width:52ch; }
.step__m{ margin:0; padding-top:.5rem; text-align:right; }
.step--loop .step__n{ font-size:1.42rem; }
@media (max-width:860px){ .step{ grid-template-columns:auto minmax(0,1fr); } .step__m{ grid-column:2; text-align:left; padding-top:.8rem; } }

/* =========================================================== WORK ======= */
.work__head{ display:flex; flex-wrap:wrap; gap:1.4rem; align-items:flex-end; justify-content:space-between; }
.work__head .h2{ margin-bottom:0; }
.work__hint{ margin:0; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(184px,1fr)); gap:clamp(.5rem,1vw,.9rem);
  margin-top:clamp(1.8rem,1.2rem + 2vw,3rem); }

/* The home reel: two rows. The column count is ceil(films / 2) — 11 films in
   js/selection.js, so six. If you change that list, change this to match or
   the reel stops landing on exactly two rows. Narrower screens take fewer
   columns and simply run to more rows. */
.grid--reel{ grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(.6rem,1.1vw,1.05rem); }
@media (max-width:1180px){ .grid--reel{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:760px){  .grid--reel{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:480px){  .grid--reel{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.tile{ position:relative; aspect-ratio:9/16; overflow:hidden; cursor:pointer; padding:0;
  border:1px solid var(--rule); border-radius:var(--r); background:var(--raised);
  transition:border-color .35s var(--ease), transform .35s var(--ease); }
.tile:hover{ border-color:var(--accent); transform:translateY(-4px); }
.tile img,.tile video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tile video{ opacity:0; transition:opacity .3s ease; }
.tile.is-playing video{ opacity:1; }
.tile__n{ position:absolute; inset:auto auto .5rem .5rem; font-family:var(--mono); font-size:.54rem;
  background:var(--ground); color:var(--light); padding:.16rem .38rem; border-radius:3px; }
.more{ display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem;
  margin-top:clamp(1.6rem,1rem + 1.6vw,2.6rem); }
.more .is-done{ display:none; }

/* ------------------------------------------------- portfolio page only -- */
.pagehead{ padding-bottom:0; }
.pagehead .h2{ margin-bottom:1.2rem; max-width:16ch; }
.pagehead .lede{ max-width:58ch; }
.work--all{ padding-top:clamp(2.2rem,1.6rem + 2vw,3.4rem); }
.creators__cta{ display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:1.6rem clamp(2rem,4vw,4rem); }
.creators__cta .h2{ margin-bottom:0; max-width:20ch; }

/* ==================================================== COMPARISON ======== */
/* The middle ("us") column is a single continuous band running from the head
   row through the last row. That only works if every cell fills its row's
   full height, so the row padding lives on the cells, not on the row. */
.cmp{ border-top:1px solid var(--light); }
.cmp__row{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.1fr) minmax(0,1fr);
  align-items:stretch; }
/* The hairline sits on the cells, not the row, so the band can carry its own
   in a tint that reads on the accent rather than the near-black. */
.cmp__row > *{ display:flex; align-items:center; gap:.55rem;
  padding:clamp(.85rem,.65rem + .5vw,1.15rem) clamp(.9rem,.7rem + .6vw,1.35rem);
  border-bottom:1px solid var(--rule); }
.cmp__row > *:first-child{ padding-left:0; }
.cmp__row > *:last-child{ padding-right:0; }
.cmp__row .us{ border-bottom-color:rgba(255,255,255,.26); }
.cmp__row--head{ font-family:var(--mono); font-size:.56rem; text-transform:uppercase; color:var(--muted); }
.cmp__row--head > *{ border-bottom-color:var(--light); }
.cmp__row b{ font-weight:600; }
.cmp__row span{ color:var(--muted); }

/* the band — one solid accent block, head row included */
.cmp__row .us{ color:var(--on-accent); background:var(--accent); }
.cmp__row--head .us{ border-radius:var(--r) var(--r) 0 0;
  border-bottom-color:rgba(255,255,255,.55); }
.cmp__row:last-child .us{ border-radius:0 0 var(--r) var(--r);
  border-bottom-color:transparent; }

/* accent check on every band cell except the head */
.cmp__row .us::before{ content:"\2713"; flex:none;
  color:var(--on-accent); font-size:.9em; font-weight:700; }
.cmp__row--head .us::before{ content:none; }

@media (max-width:760px){
  .cmp__row{ grid-template-columns:1fr; align-items:start;
    padding:clamp(.85rem,.65rem + .5vw,1.15rem) 0; border-bottom:1px solid var(--rule); }
  /* stacked, so the hairline goes back on the row — per-cell borders would
     draw one under every line. */
  .cmp__row > *{ padding:0; border-bottom:0; }
  .cmp__row--head{ display:none; }
  .cmp__row b{ font-family:var(--mono); font-size:.56rem; text-transform:uppercase; color:var(--muted); font-weight:400;
    margin-bottom:.3rem; }
  /* stacked: the band is a block per row, so it carries its own box */
  .cmp__row .us{ align-items:flex-start; border-radius:var(--r);
    padding:.7rem .85rem; margin-bottom:.35rem; border-bottom:0; }
  .cmp__row:last-child .us{ border-radius:var(--r); }
}

/* ========================================================= QUOTES ======= */
.quotes{ background:var(--light); color:var(--ink); }
.quotes .lab{ color:var(--muted-d); }
.quotes__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.8rem); }
.quotes figure{ margin:0; display:flex; flex-direction:column; gap:1.2rem;
  padding:clamp(1.3rem,1rem + 1.4vw,2rem); border:1px solid var(--line-d); border-radius:var(--r); }
.quotes blockquote{ margin:0; font-family:var(--disp); font-weight:600; font-size:1rem; line-height:1.35; letter-spacing:-.02em; }
.quotes blockquote::before{ content:"“"; color:var(--accent); }
.quotes blockquote::after{ content:"”"; color:var(--accent); }
.quotes figcaption{ margin-top:auto; display:flex; flex-direction:column; gap:.2rem; }
.quotes figcaption b{ font-weight:600; font-size:.88rem; }
.quotes figcaption .lab{ margin:0; }
@media (max-width:900px){ .quotes__grid{ grid-template-columns:1fr; } }

/* ============================================================ FAQ ======= */
.faq{ border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-block:clamp(1rem,.8rem + .6vw,1.4rem); font-family:var(--disp); font-weight:600;
  font-size:var(--t-h3); letter-spacing:-.02em; transition:color .25s ease; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; flex:none; width:13px; height:13px;
  background:linear-gradient(var(--accent),var(--accent)) center/100% 2px no-repeat,
             linear-gradient(var(--accent),var(--accent)) center/2px 100% no-repeat;
  transition:transform .4s var(--ease-o); }
.faq details[open] summary::after{ transform:rotate(135deg); background-size:100% 2px, 0 100%; }
.faq summary:hover{ color:var(--accent-lt); }
.faq details > div{ overflow:hidden; }
.faq details p{ margin:0 0 1.4rem; color:var(--muted); max-width:62ch; }

/* ======================================================= CREATORS ======= */
.creators{ background:var(--accent); color:var(--on-accent); }
/* White on #0072EF is 4.51:1 — it clears AA, but only just, so nothing on this
   band is allowed to fade. Hierarchy here comes from size and weight, not alpha. */
.creators .lab,.creators .lab--light{ color:var(--on-accent); }
.creators .dot{ background:var(--on-accent); }
.creators .h2--light{ color:var(--on-accent); }
.creators .lede--light{ color:var(--on-accent); }
.creators__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:clamp(2rem,4vw,4.5rem); align-items:center; }
.creators__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.creators__list li{ display:flex; flex-direction:column; gap:.15rem; padding:.9rem 0; border-top:1px solid rgba(255,255,255,.26); }
.creators__list b{ font-family:var(--disp); font-weight:700; font-size:.94rem; }
.creators__list span{ color:var(--on-accent); font-size:.85rem; }
.creators .btn--light{ margin-top:1.6rem; }
@media (max-width:900px){ .creators__in{ grid-template-columns:1fr; } }

/* ======================================================== CONTACT ======= */
.contact{ background:var(--light); color:var(--ink); }
.contact .lab{ color:var(--muted-d); }
.contact__grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,4vw,4.5rem); align-items:start; padding-top:2rem; border-top:1px solid var(--line-d); }
.form{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 1.2rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field--full{ grid-column:1 / -1; }
.field label{ font-family:var(--mono); font-size:.56rem; text-transform:uppercase; color:var(--muted-d); }
.field input,.field select,.field textarea{
  width:100%; font-family:var(--body); font-size:.94rem; color:var(--ink);
  background:transparent; border:0; border-bottom:1.5px solid var(--line-d); border-radius:0; padding:.55rem 0;
  transition:border-color .3s ease; }
.field textarea{ resize:vertical; min-height:70px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-bottom-color:var(--accent); }
.field input::placeholder,.field textarea::placeholder{ color:rgba(13,13,13,.42); }
.field input[aria-invalid="true"]{ border-bottom-color:var(--accent-d); }
.formnote{ margin:.9rem 0 0; font-size:.8rem; color:var(--muted-d); min-height:1.2em; }
.formnote.is-ok{ color:var(--ink); font-weight:600; }
.contact__meta{ display:flex; flex-direction:column; gap:1.4rem; }
.contact__meta div{ display:flex; flex-direction:column; gap:.35rem; }
.contact__meta .lab{ margin:0; }
.contact__meta a{ text-decoration:none; border-bottom:1.5px solid var(--accent); align-self:flex-start; }
.contact__meta a:hover{ color:var(--accent-d); }
.contact__meta p{ margin:0; color:var(--muted-d); }
@media (max-width:900px){ .contact__grid{ grid-template-columns:1fr; } }
@media (max-width:520px){ .form{ grid-template-columns:1fr; } }

/* ======================================================= THANK YOU ====== */
/* Its own page, so it has to fill the viewport on its own — without this the
   footer rides up under a short confirmation on a tall screen. */
.ty{ display:flex; align-items:center; min-height:calc(100vh - 200px); }
/* No max-width on the shell itself — that would centre the whole block, and
   every other section on the site anchors to the shell's left edge. */
.ty .h1{ max-width:14ch; margin-bottom:1.4rem; }
.ty .lede{ max-width:52ch; }

.ty__steps{
  list-style:none; margin:clamp(2.4rem,2rem + 2vw,3.6rem) 0 0; padding:0;
  max-width:980px;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.2rem,1rem + 1.4vw,2.2rem);
  border-top:1px solid var(--rule); padding-top:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);
}
.ty__steps .lab{ display:block; margin:0 0 .7rem; color:var(--accent-lt); }
.ty__steps b{ display:block; font-family:var(--disp); font-weight:700;
  font-size:1.02rem; letter-spacing:-.02em; margin-bottom:.4rem; }
.ty__steps p{ margin:0; color:var(--muted); font-size:.87rem; }

.ty__cta{ display:flex; flex-wrap:wrap; gap:.8rem;
  margin-top:clamp(2rem,1.6rem + 1.6vw,3rem); }
/* Deliberately not .lab — that uppercases, and an email address set in caps
   reads as shouting and copies out wrong. */
.ty__note{ margin:clamp(1.6rem,1.2rem + 1vw,2.2rem) 0 0; font-size:.84rem; color:var(--muted); }
.ty__note a{ color:var(--light); text-decoration:none; border-bottom:1px solid var(--accent); }

@media (max-width:760px){
  .ty{ min-height:0; }
  .ty__steps{ grid-template-columns:1fr; }
}

/* ========================================================= FOOTER ======= */
.foot{ padding-block:clamp(2.6rem,1.8rem + 3vw,5rem) 1.4rem; border-top:1px solid var(--rule); }
.foot__in{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.9fr); gap:clamp(2rem,4vw,4.5rem); }
.foot__brand img{ width:min(280px,72%); height:auto; }
.foot__brand p{ margin:1.2rem 0 0; color:var(--muted); max-width:32ch; }
.foot__nav{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,2rem); }
.foot__nav div{ display:flex; flex-direction:column; gap:.55rem; }
.foot__nav h3{ margin:0 0 .4rem; color:var(--accent-lt); }
.foot__nav a{ color:var(--muted); text-decoration:none; font-size:.87rem; transition:color .25s ease; }
.foot__nav a:hover{ color:var(--light); }
.foot__base{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  margin-top:clamp(2.2rem,1.6rem + 2.4vw,3.6rem); padding-top:1.2rem; border-top:1px solid var(--rule); }
/* These labels mix text nodes with <span>/<i>; as an inline-flex box the
   whitespace between them is dropped, so run them as normal inline text. */
.foot__base .lab{ margin:0; display:inline; }
@media (max-width:860px){ .foot__in{ grid-template-columns:1fr; } }
@media (max-width:560px){ .foot__nav{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:2rem; } }

/* ======================================================== LIGHTBOX ====== */
.lb[hidden]{ display:none; }
.lb{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  gap:clamp(.5rem,3vw,2.5rem); background:rgba(0,0,0,.94); padding:var(--pad); }
.lb__stage{ height:min(84vh,880px); aspect-ratio:9/16; max-width:100%; overflow:hidden; background:#000; border-radius:var(--r); }
.lb__stage video{ width:100%; height:100%; object-fit:contain; background:#000; }
.lb__close{ position:absolute; inset:var(--pad) var(--pad) auto auto;
  font-family:var(--mono); font-size:.58rem; text-transform:uppercase;
  background:var(--accent); color:var(--on-accent); border:0; border-radius:var(--r); padding:.5rem 1rem; cursor:pointer; }
.lb__nav{ flex:none; background:none; border:0; cursor:pointer; color:var(--light); font-size:1.28rem; padding:1rem; opacity:.6; transition:opacity .25s ease; }
.lb__nav:hover{ opacity:1; }
@media (max-width:640px){
  .lb__nav{ position:absolute; inset:auto auto var(--pad) auto; }
  .lb__nav--prev{ left:26%; } .lb__nav--next{ right:26%; }
  .lb__stage{ height:70vh; }
}

/* ==========================================================================
   MOTION — layered on a page that already renders correctly.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
  .js .reveal,
  .js [data-cap]{ opacity:0; transform:translateY(20px); }
  .js .reveal.is-in,
  .js [data-cap].is-in{ opacity:1; transform:none;
    transition:opacity .75s var(--ease-o) var(--d,0ms), transform .75s var(--ease-o) var(--d,0ms); }

  .js .ln{ display:inline-block; overflow:hidden; vertical-align:bottom;
    padding:.08em .04em .2em; margin:-.08em -.04em -.2em; }
  .js .ln__in{ display:inline-block; transform:translateY(106%); }
  .js .is-lines.is-in .ln__in{ transform:none; transition:transform .95s var(--ease-o) var(--d,0ms); }

  .js .faq details > div{ height:0; transition:height .42s var(--ease-o); }
}
@media (prefers-reduced-motion: reduce){
  .reveal,[data-cap],.ln__in{ opacity:1 !important; transform:none !important; }
  .faq details > div{ height:auto !important; }
}