@font-face{
  font-family:"Apple Garamond";
  src:url("fonts/apple-garamond.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
html{color-scheme:light dark}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;font:14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;background:#faf9f7}
img{max-width:100%}
[hidden]{display:none!important}

:root{
  --ground:var(--paper);
  --paper:#FCFBF7;
  --ink:#0C0C0C;
  --rule:#DAD7CD;
  --rule-soft:rgba(12,12,12,.13);
  --muted:#6E6C64;
  --signal:#5E2AC4;
  --on-signal:#FCFBF7;
  --archive:#4A4A46;
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --panel:#EFEDE4;
  --duofilter:none;
  /* one vertical scale for the whole page. Every block's breathing room is
     one of these six steps and nothing else, so the rhythm is the same
     wherever you are. They scale with the viewport, so the page is not
     airy on a laptop and suffocating on a phone. */
  --s1:clamp(9px,1.1vw,14px);
  --s2:clamp(16px,2vw,26px);
  --s3:clamp(26px,3.2vw,42px);
  --s4:clamp(38px,4.6vw,64px);
  --s5:clamp(54px,6.4vw,92px);
  --s6:clamp(72px,8.4vw,124px);
  --gut:clamp(16px,2.4vw,34px);
  --frame-pad:0px;
  --night:#101010;   /* every dark surface on the page */
  /* how far the sheet's own edge sits from the window */
  --sheet-inset:max(var(--frame-pad), calc((100vw - 1320px) / 2));
  --bat:url("img/bat.png");
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#131311;
    --ink:#F1EFE8;
    --rule:#33332D;
    --rule-soft:rgba(241,239,232,.13);
    --muted:#8E8C83;
    --signal:#A77BFF;
    --on-signal:#1A0A2E;
    --archive:#5C5C56;
    --panel:#1C1C19;
    --duofilter:brightness(.74) contrast(1.03);
  }
}
:root[data-theme="dark"]{
  --paper:#131311;
  --ink:#F1EFE8;
  --rule:#33332D;
  --rule-soft:rgba(241,239,232,.13);
  --muted:#8E8C83;
  --signal:#A77BFF;
  --on-signal:#1A0A2E;
  --archive:#5C5C56;
  --panel:#1C1C19;
  --duofilter:brightness(.74) contrast(1.03);
}

@media (min-width:900px){ :root{--frame-pad:26px} }

*{box-sizing:border-box}
body{
  margin:0;
  overflow-x:clip;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
.frame{padding:var(--frame-pad)}

.sheet{
  background:var(--paper);
  max-width:1320px;
  margin:0 auto;
}

/* ---------- shared grid primitives ---------- */
.row{
  display:flex;
  align-items:stretch;
  border-bottom:1px solid var(--rule);
}
.pad{padding:16px}
@media (min-width:760px){ .pad{padding:18px 22px} }

.mono{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.11em;
  text-transform:uppercase;
}
@media (min-width:760px){ .mono{font-size:11px} }

/* ---------- header ---------- */
.masthead{
  position:sticky;
  top:env(safe-area-inset-top, 0px);
  z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  /* sections left, the name in the middle, the one thing to do on the right */
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  --bar-h:56px;
  gap:var(--s2);
  min-height:56px;
  padding:var(--s1) calc(var(--sheet-inset) + var(--gut));
}
.brand{
  display:flex;align-items:center;gap:9px;
  justify-self:start;
  min-width:0;
  color:inherit;text-decoration:none;
}
.mast-end{display:flex;align-items:center;justify-self:end;gap:var(--s2)}
.brand .glyph{
  width:17px;height:12px;flex:none;
  background:var(--ink);
  -webkit-mask:var(--bat) center/contain no-repeat;
  mask:var(--bat) center/contain no-repeat;
}
@media (min-width:760px){ .brand .glyph{width:19px;height:14px} }

/* day / night switch */
.themeswitch{
  display:flex;align-items:center;gap:8px;
  padding:0 12px;
  background:transparent;
  color:inherit;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.11em;
  text-transform:uppercase;
  cursor:pointer;
  flex:none;
}
.themeswitch:hover{background:var(--ink);color:var(--paper)}
.themeswitch:hover .track{border-color:var(--paper)}
.themeswitch:hover .knob{background:var(--paper)}
.themeswitch .track{
  position:relative;
  width:30px;height:15px;
  border:1px solid var(--rule);
  flex:none;
}
.themeswitch .knob{
  position:absolute;top:2px;left:2px;
  width:9px;height:9px;
  background:var(--ink);
  transition:transform .16s ease;
}
:root[data-theme="dark"] .themeswitch .knob{transform:translateX(15px)}
.themeswitch .lbl-night{display:none}
:root[data-theme="dark"] .themeswitch .lbl-day{display:none}
:root[data-theme="dark"] .themeswitch .lbl-night{display:inline}
.themeswitch .txt{display:none}
@media (min-width:900px){ .themeswitch .txt{display:inline} }
.brand b{
  font-family:var(--mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nav{display:flex;align-items:center;flex-wrap:wrap;justify-self:center;gap:2px clamp(14px,2.2vw,34px)}
.nav a{
  display:inline-flex;align-items:center;
  color:inherit;text-decoration:none;
  white-space:nowrap;
  opacity:.72;transition:opacity .18s ease;
}
.nav a:hover{opacity:1}
.nav a[aria-current="page"]{opacity:1;font-weight:500}
/* the one thing to do is a filled pill, the way the reference carries it */
.masthead a{text-decoration:none}
.nav a.cta,.mast-end .cta{
  display:inline-flex;align-items:center;white-space:nowrap;
  opacity:1;text-decoration:none;border-bottom:0;
  /* set the way the call under the reel is set: same face, same size,
     sentence case, no tracking. Only the weight is lifted, because this one
     sits on a filled pill rather than on footage. */
  font-family:var(--sans);
  font-size:clamp(13px,1.15vw,15.5px);
  font-weight:500;letter-spacing:normal;text-transform:none;
  background:var(--signal);color:#FBFAFF;
  border-radius:999px;
  padding:9px 18px;
}
.nav a.cta:hover,.mast-end .cta:hover{background:var(--ink);color:var(--paper)}
.nav .hide-sm{display:none}
@media (min-width:760px){ .nav .hide-sm{display:flex} }

/* ---------- hero ---------- */
.hero{
  border-bottom:1px solid var(--rule);
  position:relative;
  padding:20px 16px 0;
}
@media (min-width:760px){ .hero{padding:24px 22px 0} }
.hero-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
}
.wedo{list-style:none;margin:8px 0 0;padding:0}
.wedo li{
  font-family:var(--mono);
  font-size:12px;
  line-height:1.65;
  color:var(--ink);
}
.asterisk{
  width:84px;height:84px;flex:none;color:var(--ink);
}
@media (min-width:760px){ .asterisk{width:140px;height:140px} }
h1{
  font-weight:400;
  letter-spacing:-.033em;
  line-height:.95;
  text-wrap:balance;
  margin:52px 0 20px;
  font-size:clamp(30px,7.2vw,76px);
  max-width:15ch;
}
@media (min-width:760px){ h1{margin:96px 0 26px} }
.kicker{
  color:var(--muted);
  max-width:56ch;
  font-size:14px;
  line-height:1.55;
  margin:0 0 22px;
}

/* ---------- section header rows ---------- */
.sec-head{
  display:flex;
  align-items:center;
  gap:14px;
  border-top:1px solid var(--rule);
  padding:var(--s1) var(--gut);
  background:var(--paper);
  margin-top:var(--s5);
}
@media (min-width:760px){ .sec-head{gap:0} }
/* the block that closes a section gives up its bottom rule, so the space
   before the next one reads as open page and not as a boxed-in empty band */
main > *:has(+ .sec-head){border-bottom:0}
main > .stages:has(+ .sec-head) > .stage:last-child{border-bottom:0}
main > .failures:has(+ .sec-head) > .fail:last-child{border-bottom:0}
.sec-num{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink);
  flex:none;
  width:auto;
}
@media (min-width:760px){ .sec-num{width:90px} }
.sec-title{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  flex:1 1 auto;
}
.sec-mark{flex:none;width:22px;height:22px;color:var(--ink)}

/* ---------- content bays ---------- */
.bay{padding:var(--s3) var(--gut) var(--s4)}


/* ---------- video ---------- */
.player{
  position:relative;
  aspect-ratio:16/9;
  max-width:100%;
  background:#000;
}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;z-index:1}
.poster{
  position:absolute;inset:0;z-index:0;
  background:#0C0C0C;color:#FCFBF7;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  text-decoration:none;
}
.poster .ptri{
  width:0;height:0;
  border-left:22px solid #FCFBF7;
  border-top:14px solid transparent;
  border-bottom:14px solid transparent;
}
.poster span.mono{letter-spacing:.16em}
.poster:hover .ptri{border-left-color:var(--signal)}
.poster:hover span.mono{color:var(--signal)}
.vcap{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  justify-content:space-between;
  align-items:baseline;
  padding-top:8px;
}
.vcap span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.vcap .lab{color:var(--ink)}
.vcap a{color:var(--signal);text-decoration:none;border-bottom:1px solid currentColor;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.vcap a:hover{color:var(--ink)}

.grid2{
  display:grid;
  grid-template-columns:1fr;
  gap:26px 22px;
}
@media (min-width:720px){ .grid2{grid-template-columns:1fr 1fr} }

/* ---------- original → reconstruction pairs ---------- */
.player.empty{
  background:#050505;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:16px;
}
.player.empty span{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(252,251,247,.38);
}

.pairs{display:flex;flex-direction:column;gap:30px}
@media (min-width:860px){ .pairs{gap:38px} }
.pair{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  align-items:center;
}
@media (min-width:860px){
  .pair{grid-template-columns:1fr 54px 1fr;gap:0}
}
.side{margin:0;min-width:0}
.side .frame-in{padding:10px;background:transparent;border:1px solid var(--rule)}
.side .player{border:0}
.sidecap{
  display:flex;flex-wrap:wrap;gap:4px 14px;
  justify-content:space-between;align-items:baseline;
  padding-top:8px;
}
.sidecap .k{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
}
.side.orig .sidecap .k{color:var(--muted)}
.side.recon .sidecap .k{color:var(--ink)}
.sidecap a{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--signal);text-decoration:none;border-bottom:1px solid currentColor;
}
.sidecap a:hover{color:var(--ink)}
.chip{
  display:inline-block;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  padding:4px 7px;margin-bottom:8px;
}
.side.orig .chip{background:var(--archive);color:#FCFBF7}
.side.recon .chip{background:var(--signal);color:var(--on-signal)}
.xarrow{
  display:flex;align-items:center;justify-content:center;
  color:var(--signal);
  padding:2px 0;
}
.xarrow svg{width:34px;height:14px;transform:rotate(90deg)}
@media (min-width:860px){
  .xarrow{padding:0 10px}
  .xarrow svg{width:100%;height:16px;transform:none}
}

/* ---------- before / after slider ---------- */
.batabs{
  display:flex;flex-wrap:wrap;
  margin-bottom:12px;
}
.batab{
  flex:1 1 auto;min-width:0;
  background:transparent;color:var(--ink);
  border:0;
  padding:9px 12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;
}
.batab:first-child{border-left:0}
.batab:hover{background:var(--ink);color:var(--paper)}
.batab[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.bacap{
  display:flex;flex-wrap:wrap;gap:6px 16px;
  justify-content:space-between;align-items:baseline;
  padding-top:8px;
}
.bacap .lab{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}

.ba{
  position:relative;
  max-width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  touch-action:pan-y;
  user-select:none;
  background:var(--paper);
}
.ba > img, .ba .after-layer img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
}
.ba .after-layer{
  position:absolute;inset:0;
  clip-path:inset(0 0 0 var(--split,50%));
}
.ba .tag{
  position:absolute;
  bottom:10px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:#0C0C0C;
  color:#FCFBF7;
  padding:4px 8px;
  pointer-events:none;
}
.ba .tag.l{left:10px}
.ba .tag.r{right:10px;background:var(--signal);color:var(--on-signal)}
.ba .handle{
  position:absolute;
  top:0;bottom:0;
  left:var(--split,50%);
  width:1px;
  background:var(--signal);
  pointer-events:none;
}
.ba .handle::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:38px;height:38px;
  border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 0 1px var(--signal);
}
.ba .handle::before{
  content:"";
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:16px;height:9px;
  z-index:2;
  background:var(--on-signal);
  clip-path:polygon(0 50%,34% 0,34% 100%);
}
.ba .arrow-r{
  position:absolute;top:50%;left:var(--split,50%);
  transform:translate(4px,-50%);
  width:8px;height:9px;
  background:var(--on-signal);
  clip-path:polygon(100% 50%,0 0,0 100%);
  z-index:3;pointer-events:none;
}
.ba input[type=range]{
  position:absolute;inset:0;
  width:100%;height:100%;
  margin:0;opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;background:transparent;
}
.ba input[type=range]:focus-visible{opacity:1;outline:2px solid var(--signal);outline-offset:-3px}
.ba input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%}

/* ---------- three approaches ---------- */
.ico{
  display:block;
  width:80px;height:22px;
  margin:0 0 16px;
  color:var(--muted);
  overflow:visible;
}
.ico .trk{fill:none;stroke:currentColor;stroke-width:1}
.ico .hit{fill:var(--signal)}
.ico .mk{fill:none;stroke:var(--signal);stroke-width:1.4}

/* A — reconstructed scenes dropped into an existing cut */
@keyframes slotIn{0%,8%{opacity:0}18%,62%{opacity:1}72%,100%{opacity:0}}
.ico-a .hit{animation:slotIn 3.4s ease-in-out infinite}
.ico-a .hit.two{animation-delay:.5s}

/* B — the whole episode built end to end */
@keyframes wipeAcross{0%{transform:scaleX(0)}50%,72%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.ico-b .hit{
  transform-origin:left center;transform-box:fill-box;
  animation:wipeAcross 3.4s cubic-bezier(.66,0,.34,1) infinite;
}

/* C — brackets closing onto the frame, then the register mark lands */
@keyframes lockL{0%,100%{transform:translateX(-6px)}46%,70%{transform:translateX(0)}}
@keyframes lockR{0%,100%{transform:translateX(6px)}46%,70%{transform:translateX(0)}}
@keyframes land{0%,38%{opacity:0}52%,68%{opacity:1}80%,100%{opacity:0}}
.ico-c .jawL{transform-box:fill-box;animation:lockL 3.4s cubic-bezier(.66,0,.34,1) infinite}
.ico-c .jawR{transform-box:fill-box;animation:lockR 3.4s cubic-bezier(.66,0,.34,1) infinite}
.ico-c .mk{animation:land 3.4s ease-in-out infinite}

.cells{
  display:grid;
  grid-template-columns:1fr;
  border-top:1px solid var(--rule);
}
@media (min-width:820px){ .cells{grid-template-columns:repeat(3,1fr)} }
.cell{
  padding:16px;
  border-bottom:1px solid var(--rule);
}
@media (min-width:820px){
  .cell{border-bottom:0;padding:var(--s3) var(--gut)}
  .cell:last-child{border-right:0}
}
.cell h3{
  margin:0 0 4px;
  font-size:16px;
  font-weight:500;
  letter-spacing:-.01em;
}
.cell .idx{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--signal);
  display:block;
  margin-bottom:12px;
}
.cell p{
  margin:0;
  font-size:12.5px;
  line-height:1.62;
  color:var(--muted);
  max-width:46ch;
}
.cell p + p{margin-top:10px}
.cell em{font-style:normal;color:var(--ink)}

/* ---------- contact ---------- */
.contact{
  padding:var(--s6) var(--gut) var(--s6);
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  justify-content:space-between;
  align-items:flex-end;
  background:linear-gradient(158deg,#230B55 0%,#43189E 38%,#6B33D6 72%,#9367F2 100%);
  color:#FBFAFF;
  position:relative;isolation:isolate;overflow:hidden;
}
.contact::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
@media (min-width:760px){ .contact{gap:40px} }
.contact h2{
  margin:0;
  font-weight:400;
  letter-spacing:-.032em;
  line-height:.98;
  font-size:clamp(34px,6.6vw,80px);
  max-width:19ch;
  color:#FBFAFF;
  text-wrap:balance;
}
.contact-meta{font-family:var(--mono);font-size:12px;line-height:2;color:#FBFAFF}
.contact-meta a{color:#FBFAFF;text-decoration:none;border-bottom:1px solid currentColor}
.contact-meta a:hover{opacity:.7}
.contact-meta .cm-dim{color:#FBFAFF;opacity:.7}

.colophon{
  border-top:1px solid var(--rule);
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  justify-content:space-between;
  padding:var(--s2) var(--gut);
  color:var(--muted);
}
@media (min-width:760px){ .colophon{padding:11px 22px} }

a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ================= HOME ================= */
:root{
  --g-creative:#5E2AC4;
  --g-prod:#1E1536;
  --g-post:#C3B5E8;
  --g-on-dark:#FBFAFF;
  --g-on-light:#1E1536;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --g-creative:#A77BFF;
    --g-prod:#6E5AA8;
    --g-post:#E3DAF7;
    --g-on-dark:#12091F;
    --g-on-light:#12091F;
  }
}
:root[data-theme="dark"]{
  --g-creative:#A77BFF;
  --g-prod:#6E5AA8;
  --g-post:#E3DAF7;
  --g-on-dark:#12091F;
  --g-on-light:#12091F;
}

.brand{color:inherit;text-decoration:none}
.viewlink[aria-current="page"]{background:var(--ink);color:var(--paper)}
.masthead .viewlink[aria-current="page"]{background:transparent;color:inherit}

/* descriptor strip under the masthead */
.descrip{
  display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;
  padding:9px 16px;border-bottom:1px solid var(--rule);color:var(--muted);
}
@media (min-width:760px){ .descrip{padding:10px 22px} }
.descrip a{color:var(--signal);text-decoration:none;border-bottom:1px solid currentColor}
.descrip a:hover{color:var(--ink)}

/* hero */
.hero2{padding:var(--s4) var(--gut) var(--s5);border-bottom:1px solid var(--rule)}
.hero-mark{display:flex;justify-content:flex-end;margin-bottom:8px}
.hero-mark .asterisk{width:78px;height:78px;color:var(--ink)}
@media (min-width:760px){ .hero-mark{margin-bottom:-4px} .hero-mark .asterisk{width:150px;height:150px} }

.hero2 h1,.hero2 h2{
  margin:0 0 24px;font-weight:400;letter-spacing:-.035em;line-height:.98;
  font-size:clamp(29px,5.5vw,62px);max-width:21ch;text-wrap:balance;
}
.hero2.narrow h1{font-size:clamp(29px,5.5vw,62px);max-width:21ch}
.hero2.manifesto h1,.hero2.manifesto h2{font-size:clamp(29px,5.5vw,62px);max-width:21ch}
.hero2.manifesto h1 .turn{display:block;margin-top:0;color:var(--muted)}
.hero2 h1 .soft{color:var(--muted)}
.hero2.manifesto .hero-sub{font-size:clamp(16.5px,2.1vw,25px);line-height:1.32;letter-spacing:-.016em;max-width:42ch}
.hero-sub{
  margin:0 0 22px;font-size:clamp(20px,3.4vw,38px);line-height:1.16;
  letter-spacing:-.026em;max-width:24ch;
}
.hero-sub .dim{color:var(--muted)}
.eyebrow{display:block;color:var(--signal);margin-bottom:18px}
.kicker2{margin:0;color:var(--muted);font-size:clamp(14.5px,1.5vw,17px);line-height:1.55;max-width:56ch}

/* hero reel */
.reel{border:0;padding:0;background:#000;font-size:0;line-height:0}
.reel .reelmedia{aspect-ratio:16/9;width:100%}
.reel img{display:block;width:100%;height:auto}
.hero2:has(+ .reel){border-bottom:0}
.reel + .sec-head{border-top:0}

/* body copy scale */
.lede{font-size:15.5px;line-height:1.66;max-width:64ch;margin:0 0 var(--s1);color:var(--ink);text-wrap:pretty}
.lede:last-child{margin-bottom:0}
.lede.sm{font-size:12.5px;color:var(--muted);margin-bottom:18px;max-width:58ch}
.lede.big{
  font-size:clamp(20px,3.2vw,30px);line-height:1.15;letter-spacing:-.025em;
  max-width:22ch;margin:26px 0 16px;
}
.lede em{font-style:italic}
.bay.tight{padding-top:var(--s2)}

/* ---------- budget columns ---------- */
.costhead{
  margin:0 0 18px;font-size:clamp(26px,5.4vw,62px);line-height:1.02;
  letter-spacing:-.034em;max-width:18ch;text-wrap:balance;
}
.budget{margin:34px 0 10px;width:100%}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end}
@media (min-width:700px){ .cols{gap:32px} }
.colwrap{display:flex;flex-direction:column;justify-content:flex-end}
.coltrack{position:relative;display:flex;align-items:flex-end;height:250px;width:100%}
@media (min-width:700px){ .coltrack{height:360px} }
.colbar{display:flex;flex-direction:column-reverse;gap:5px;width:100%;height:calc((100% - 5px) * var(--f) + 5px)}
.seg{position:relative;display:block;height:calc((100% - 5px) * var(--sf));min-height:19px;width:100%}
.seg .fill{
  position:absolute;inset:0;display:block;
  border-radius:12px;transform-origin:bottom center;
}
.fill.creative{background:var(--g-creative)}
.fill.prod{background:var(--g-prod)}
.fill.post{background:var(--g-post)}
.seg .lab{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:0 10px;text-align:center;
  font-family:var(--mono);font-style:normal;
  font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--g-on-dark);
}
@media (min-width:700px){ .seg .lab{font-size:11px;letter-spacing:.14em} }
.seg .lab.d3,.seg .lab.d6{color:var(--g-on-light)}

@media (prefers-reduced-motion:no-preference){
  @keyframes segGrow{
    0%,4%{transform:scaleY(0)}
    13%,84%{transform:scaleY(1)}
    93%,100%{transform:scaleY(0)}
  }
  @keyframes labIn{
    0%,11%{opacity:0}
    19%,84%{opacity:1}
    91%,100%{opacity:0}
  }
  .d1{animation-delay:0s}
  .d2{animation-delay:.45s}
  .d3{animation-delay:.9s}
  .d4{animation-delay:1.55s}
  .d5{animation-delay:2s}
  .d6{animation-delay:2.45s}
}

.collab{padding-top:14px;color:var(--muted);line-height:1.5}
.chiplab{
  display:inline-block;background:var(--g-creative);color:var(--g-on-dark);
  padding:6px 10px;letter-spacing:.14em;
}
.bnote{margin:18px 0 0;color:var(--muted);text-transform:none;letter-spacing:.04em;font-size:10.5px}
.colnote{margin:6px 0 0;color:var(--muted);text-transform:none;letter-spacing:.04em;font-size:10.5px;line-height:1.45}
.saved{
  position:absolute;left:0;right:0;top:0;bottom:calc((100% - 5px) * var(--f) + 12px);
  border:1px dashed var(--rule);border-radius:12px;
  display:flex;align-items:center;justify-content:center;
}
.savedlab{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (min-width:700px){ .savedlab{font-size:11px} }

/* ---------- range ---------- */
.range{padding-bottom:34px}
.rangebig{margin-top:44px}
.rangeline{
  margin:0;font-size:clamp(28px,7vw,82px);line-height:1.02;letter-spacing:-.038em;
  max-width:none;text-wrap:balance;
}
.cyc{display:inline-grid;vertical-align:baseline;color:var(--signal)}
.cyc .cw{grid-area:1/1;opacity:0;transition:opacity .3s ease;white-space:nowrap}
.cyc .cw.on{opacity:1}
.rangelist{display:flex;flex-wrap:wrap;gap:8px 28px;list-style:none;padding:0;margin:32px 0 0;color:var(--muted)}
.rangelist li{position:relative;padding-left:14px}
.rangelist li::before{content:"";position:absolute;left:0;top:.42em;width:6px;height:6px;background:var(--signal)}

/* ---------- craft proofs ---------- */
.proof{margin:18px 0 0}
.dg{display:block;width:100%;height:auto;color:var(--muted);overflow:visible}
.dg .trk{fill:none;stroke:currentColor;stroke-width:1}
.dg .hit{fill:var(--signal)}
.dg .mk{fill:none;stroke:var(--signal);stroke-width:1.4}
.proof figcaption{
  margin-top:9px;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
}
@keyframes frameOn{0%,4%{opacity:.16}14%,72%{opacity:1}86%,100%{opacity:.16}}
.dg-sheet .fr{animation:frameOn 3.8s ease-in-out infinite}
.dg-sheet .fr:nth-of-type(2){animation-delay:.16s}
.dg-sheet .fr:nth-of-type(3){animation-delay:.32s}
.dg-sheet .fr:nth-of-type(4){animation-delay:.48s}
.dg-sheet .fr:nth-of-type(5){animation-delay:.64s}
@keyframes tickOn{0%,22%{opacity:0}40%,72%{opacity:1}86%,100%{opacity:0}}
.dg-match .tick{animation:tickOn 3.8s ease-in-out infinite}
.dg-match .t2{animation-delay:.22s}
@keyframes linkOn{0%,14%{opacity:.15}34%,74%{opacity:1}88%,100%{opacity:.15}}
.dg .link{animation:linkOn 3.8s ease-in-out infinite}
@keyframes boardIn{0%,6%{opacity:.18}20%,74%{opacity:1}88%,100%{opacity:.18}}
.dg-board .tiles rect{animation:boardIn 3.8s ease-in-out infinite}
.dg-board .tiles rect:nth-of-type(2){animation-delay:.06s}
.dg-board .tiles rect:nth-of-type(3){animation-delay:.12s}
.dg-board .tiles rect:nth-of-type(4){animation-delay:.18s}
.dg-board .tiles rect:nth-of-type(5){animation-delay:.24s}
.dg-board .tiles rect:nth-of-type(6){animation-delay:.3s}
.dg-board .tiles rect:nth-of-type(7){animation-delay:.36s}
.dg-board .tiles rect:nth-of-type(8){animation-delay:.42s}
.dg-board .tiles rect:nth-of-type(9){animation-delay:.48s}
@keyframes fillIn{0%,30%{opacity:0}52%,74%{opacity:.9}88%,100%{opacity:0}}
.dg-board .fill{animation:fillIn 3.8s ease-in-out infinite}

/* ---------- method steps ---------- */
.steps{display:grid;grid-template-columns:1fr;border-top:1px solid var(--rule)}
@media (min-width:760px){ .steps{grid-template-columns:1fr 1fr} }
@media (min-width:1120px){ .steps{grid-template-columns:repeat(3,1fr)} }
.step{padding:var(--s3) var(--gut) var(--s3);border-bottom:1px solid var(--rule)}
@media (min-width:760px){

  .step:nth-child(2n){border-right:0}
}
@media (min-width:1120px){

  .step:nth-child(3n){border-right:0}
}
.step h3{margin:0 0 6px;font-size:17px;font-weight:500;letter-spacing:-.014em}
.step .idx{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--signal);margin-bottom:10px;
}
.step p{margin:0;font-size:12.5px;line-height:1.64;color:var(--muted);max-width:46ch}

/* tools */
.tools{border-top:1px solid var(--rule)}
.toolcols{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:22px}
@media (min-width:700px){ .toolcols{grid-template-columns:1fr 1fr;gap:26px} }
.tlab{display:block;color:var(--signal);margin-bottom:7px}
.tl{margin:0;color:var(--ink);text-transform:none;letter-spacing:.06em;font-size:12px;line-height:1.7}

/* price tiers */
.cell.tier .price{margin:14px 0 0;color:var(--muted);text-transform:none;letter-spacing:.05em}
.cell.tier .price b{display:block;font-family:var(--sans);font-size:19px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.cell.tier .price span{display:block;margin-top:2px}
.more{margin:16px 0 0}
.more a{
  color:var(--signal);text-decoration:none;border-bottom:1px solid currentColor;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
}
.more a:hover{color:var(--ink)}

/* contact + footer */
.ctaline{margin:0 0 14px;font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--muted);max-width:44ch;text-transform:none;letter-spacing:0}
.footer{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid var(--rule);
}
@media (min-width:860px){ .footer{grid-template-columns:repeat(4,1fr)} }
.footer > div{padding:var(--s3) var(--gut);border-bottom:1px solid var(--rule)}

.footer > div:nth-child(2n){border-right:0}
@media (min-width:860px){

  .footer > div:last-child{border-right:0}
}
.footer b{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;font-weight:500;color:var(--muted);margin-bottom:7px;
}
.footer span{display:block;font-size:13px;line-height:1.6;color:var(--ink)}
.footer a{color:var(--signal);text-decoration:none;border-bottom:1px solid currentColor}
.footer a:hover{color:var(--ink)}
.colophon a{text-decoration:none;border-bottom:1px solid currentColor}

/* ---------- step icon loops ---------- */
@keyframes drawLine{0%{stroke-dashoffset:64}26%,72%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:64}}
@keyframes blinkCaret{0%,18%{opacity:0}24%,34%{opacity:1}40%,50%{opacity:0}56%,66%{opacity:1}72%,100%{opacity:0}}
.ico-story .ln{stroke-dasharray:64;animation:drawLine 3.4s ease-in-out infinite}
.ico-story .d2{animation-delay:.18s}
.ico-story .d3{animation-delay:.36s}
.ico-story .blink{animation:blinkCaret 3.4s steps(1) infinite}

@keyframes scanX{0%{transform:translateX(0)}50%{transform:translateX(62px)}100%{transform:translateX(0)}}
.ico-research .scan{transform-box:fill-box;animation:scanX 3.4s cubic-bezier(.5,0,.5,1) infinite}

@keyframes tileIn{0%,6%{opacity:0}16%,74%{opacity:1}84%,100%{opacity:0}}
.ico-lib .hit{animation:tileIn 3.4s ease-in-out infinite}
.ico-lib .b1{animation-delay:.08s}
.ico-lib .b2{animation-delay:.26s}
.ico-lib .b3{animation-delay:.44s}
.ico-lib .b4{animation-delay:.62s}

@keyframes shotIn{0%,8%{opacity:0}22%,74%{opacity:1}86%,100%{opacity:0}}
.ico-shots .mk{animation:shotIn 3.4s ease-in-out infinite}
.ico-shots .sh2{animation-delay:.2s}
.ico-shots .sh3{animation-delay:.4s}

@keyframes sweepHead{0%{transform:translateX(0)}92%,100%{transform:translateX(77px)}}
.ico-anim .head{transform-box:fill-box;animation:sweepHead 3.4s linear infinite}

@keyframes clipIn{0%,4%{opacity:0}16%,78%{opacity:1}88%,100%{opacity:0}}
.ico-edit .hit{animation:clipIn 3.4s ease-out infinite}
.ico-edit .c1{animation-delay:.05s}
.ico-edit .c2{animation-delay:.23s}
.ico-edit .c3{animation-delay:.41s}
.ico-edit .c4{animation-delay:.59s}

/* ================= WHAT WE DO ================= */
.stages{border-top:1px solid var(--rule)}
.stage{
  display:grid;grid-template-columns:1fr;gap:16px;
  padding:var(--s4) var(--gut) var(--s5);border-bottom:1px solid var(--rule);
}
@media (min-width:820px){
  .stage{grid-template-columns:260px 1fr;gap:44px;align-items:start}
}
@media (min-width:1180px){ .stage{grid-template-columns:320px 1fr;gap:64px} }
.stage-mark{display:flex;flex-direction:column;gap:14px;align-items:flex-start;width:100%}
.stage-num{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--signal);
}
.stage-body{max-width:66ch}
.stage-body h3{
  margin:0 0 14px;font-size:clamp(21px,2.9vw,30px);font-weight:500;letter-spacing:-.024em;
}
.stage-body .lede{font-size:15px;line-height:1.62;color:var(--muted);max-width:62ch;margin:0}
.note{
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--rule-soft);
  color:var(--ink);text-transform:none;letter-spacing:.05em;font-size:11px;line-height:1.7;
}

.failures{border-top:1px solid var(--rule)}
.fail{
  display:grid;grid-template-columns:1fr;gap:22px;
  padding:var(--s3) var(--gut) var(--s4);border-bottom:1px solid var(--rule);align-items:start;
}
@media (min-width:900px){
  .fail{grid-template-columns:1fr 1fr;gap:56px;padding:42px 22px 46px}
}
.fail-body h3{margin:0 0 14px;font-size:clamp(20px,2.6vw,27px);font-weight:500;letter-spacing:-.022em}
.fail-body .idx{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--signal);margin-bottom:12px;
}
.fail-body .lede{font-size:14.5px;line-height:1.62;color:var(--muted);max-width:58ch;margin:0}
.fail .proof{margin:0;align-self:center;width:100%}

/* ---------- the real-or-invented statement ---------- */
.claim{
  margin:0 0 var(--s2);font-size:clamp(29px,5.5vw,62px);line-height:.98;
  letter-spacing:-.035em;max-width:21ch;text-wrap:balance;
}
.claim .dim{color:var(--muted)}

/* ================= WHAT WE DO — square stage graphics ================= */
.stage-figure{
  width:100%;aspect-ratio:1;max-width:320px;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.sg{width:100%;height:100%;display:block;color:var(--muted);overflow:visible}
.sg .trk{fill:none;stroke:currentColor;stroke-width:1.4}
.sg .hit{fill:var(--signal)}
.sg .mk{fill:none;stroke:var(--signal);stroke-width:2}

/* 01 sources — pages coming in and stacking */
@keyframes sheetIn{0%,4%{opacity:0;transform:translate(16px,10px)}18%,74%{opacity:1;transform:none}88%,100%{opacity:0;transform:translate(16px,10px)}}
.sg-sources .sh{transform-box:fill-box;animation:sheetIn 3.8s cubic-bezier(.3,0,.2,1) infinite}
.sg-sources .s2{animation-delay:.18s}
.sg-sources .s1{animation-delay:.36s}

/* 02 breakdown — beats being marked */
@keyframes markOn{0%,10%{opacity:0}22%,76%{opacity:1}88%,100%{opacity:0}}
.sg-breakdown .pick{animation:markOn 3.8s ease-in-out infinite}
.sg-breakdown .p2{animation-delay:.22s}
.sg-breakdown .p3{animation-delay:.44s}

/* 03 assets — the library filling slot by slot */
@keyframes objIn{0%,6%{opacity:0;transform:scale(.4)}18%,76%{opacity:1;transform:scale(1)}88%,100%{opacity:0;transform:scale(.4)}}
.sg-assets .obj{transform-box:fill-box;transform-origin:center;animation:objIn 3.8s cubic-bezier(.3,0,.2,1) infinite}
.sg-assets .o2{animation-delay:.16s}
.sg-assets .o3{animation-delay:.32s}
.sg-assets .o4{animation-delay:.48s}
.sg-assets .o5{animation-delay:.64s}

/* 04 shot list — a move drawn on each card */
@keyframes moveDraw{0%,8%{opacity:0}22%,76%{opacity:1}88%,100%{opacity:0}}
.sg-shotlist .card{animation:moveDraw 3.8s ease-in-out infinite}
.sg-shotlist .c2{animation-delay:.2s}
.sg-shotlist .c3{animation-delay:.4s}

/* 05 build — the frame resolving under a scan */
@keyframes scanDown{0%{transform:translateY(0)}72%,100%{transform:translateY(82px)}}
@keyframes fillUp{0%{clip-path:inset(0 0 100% 0)}72%,100%{clip-path:inset(0 0 0 0)}}
.sg-build .scanl{transform-box:fill-box;animation:scanDown 3.8s cubic-bezier(.4,0,.5,1) infinite}
.sg-build .grow{animation:fillUp 3.8s cubic-bezier(.4,0,.5,1) infinite}
@keyframes brkOn{0%,66%{opacity:0}78%,94%{opacity:1}100%{opacity:0}}
.sg-build .brk{animation:brkOn 3.8s ease-out infinite}

/* 06 finish — sound, grade, cut */
@keyframes bar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.sg-finish .wave rect{transform-box:fill-box;transform-origin:center;animation:bar 1.1s ease-in-out infinite}
.sg-finish .w2{animation-delay:.08s}.sg-finish .w3{animation-delay:.16s}.sg-finish .w4{animation-delay:.24s}
.sg-finish .w5{animation-delay:.32s}.sg-finish .w6{animation-delay:.4s}.sg-finish .w7{animation-delay:.48s}
.sg-finish .w8{animation-delay:.56s}.sg-finish .w9{animation-delay:.64s}.sg-finish .w10{animation-delay:.72s}
.sg-finish .w11{animation-delay:.8s}
@keyframes gradeOn{0%,14%{fill:transparent}34%,78%{fill:var(--signal)}92%,100%{fill:transparent}}
.sg-finish .grade rect{animation:gradeOn 3.8s ease-in-out infinite}
.sg-finish .g2{animation-delay:.16s}
.sg-finish .g3{animation-delay:.32s}
@keyframes clipDrop{0%,8%{opacity:0;transform:translateY(-6px)}22%,78%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(-6px)}}
.sg-finish .cl1,.sg-finish .cl2,.sg-finish .cl3,.sg-finish .cl4{transform-box:fill-box;animation:clipDrop 3.8s ease-out infinite}
.sg-finish .cl2{animation-delay:.16s}
.sg-finish .cl3{animation-delay:.32s}
.sg-finish .cl4{animation-delay:.48s}

/* ---------- nav wraps once there are four pages ---------- */
.masthead{flex-wrap:wrap}
@media (max-width:900px){
  .mast-end .cta{padding:8px 14px}
}

/* ---------- contact: compose-in-your-own-email ---------- */
.cta2{
  display:grid;grid-template-columns:1fr;gap:28px;
  padding:var(--s4) var(--gut) var(--s4);
  background:var(--g-creative);
  color:var(--g-on-dark);
}
@media (min-width:900px){
  .cta2{grid-template-columns:1fr 1fr;gap:56px;padding:44px 22px 52px}
}
.cta2 h2{
  margin:0 0 16px;font-weight:400;letter-spacing:-.032em;line-height:1.02;
  font-size:clamp(29px,5.5vw,62px);max-width:21ch;text-wrap:balance;
}
.cta2 .ctaline{
  margin:0 0 18px;font-family:var(--sans);font-size:14.5px;line-height:1.6;
  color:var(--muted);max-width:50ch;text-transform:none;letter-spacing:0;
}
.mailform{display:flex;flex-direction:column;gap:14px;align-self:start}
.ff{display:flex;flex-direction:column;gap:6px}
.ff label{color:var(--muted)}
.ff input,.ff textarea{
  font-family:var(--sans);font-size:14px;color:var(--ink);
  background:transparent;border:1px solid var(--rule);
  padding:10px 12px;border-radius:0;width:100%;
}
.ff textarea{resize:vertical;min-height:88px;line-height:1.5}
.ff input::placeholder,.ff textarea::placeholder{color:var(--muted);opacity:.7}
.ff input:focus,.ff textarea:focus{outline:2px solid var(--signal);outline-offset:-2px}
.mfbtn{
  align-self:flex-start;
  background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);
  padding:12px 18px;cursor:pointer;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.mfbtn:hover{background:var(--signal);border-color:var(--signal);color:var(--on-signal)}
.mfnote{margin:0;color:var(--muted);text-transform:none;letter-spacing:.04em;font-size:10.5px}

/* ---------- footer, three columns ---------- */
@media (min-width:860px){ .footer{grid-template-columns:repeat(3,1fr)} }

/* the contact block is a single purple field */
.cta2 h2{color:var(--g-on-dark)}
.cta2 .ctaline{color:var(--g-on-dark);opacity:.82}
.cta2 .more a{color:var(--g-on-dark);border-bottom-color:currentColor}
.cta2 .more a:hover{opacity:.7;color:var(--g-on-dark)}
.cta2 .ff label{color:var(--g-on-dark);opacity:.78}
.cta2 .ff input,.cta2 .ff textarea{
  color:var(--g-on-dark);
  border-color:color-mix(in srgb, var(--g-on-dark) 45%, transparent);
  background:transparent;
}
.cta2 .ff input::placeholder,.cta2 .ff textarea::placeholder{color:var(--g-on-dark);opacity:.5}
.cta2 .ff input:focus,.cta2 .ff textarea:focus{outline:2px solid var(--g-on-dark);outline-offset:-2px}
.cta2 .mfbtn{
  background:var(--g-on-dark);color:var(--g-creative);border-color:var(--g-on-dark);
}
.cta2 .mfbtn:hover{background:transparent;color:var(--g-on-dark);border-color:var(--g-on-dark)}
.cta2 .mfnote{color:var(--g-on-dark);opacity:.7}

/* two actions on the contact form */
.mfrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mfbtn.ghost{background:transparent;color:var(--g-on-dark);border-color:color-mix(in srgb, var(--g-on-dark) 55%, transparent)}
.cta2 .mfbtn.ghost:hover{background:var(--g-on-dark);color:var(--g-creative);border-color:var(--g-on-dark)}
.mfnote[data-role="status"]{min-height:1.6em}
.mfnote[data-role="status"].ok{opacity:1;font-weight:500}
.mfnote[data-role="status"].bad{opacity:1}

.claim.big2{
  font-size:clamp(29px,5.5vw,62px);line-height:.98;letter-spacing:-.035em;
  max-width:21ch;margin-bottom:var(--s2);
}

/* ---------- three proof tabs ---------- */
/* the headline stack: all three occupy the same cell so the block keeps
   one height and nothing below it moves as the slides change */
.pheads{display:grid}
.pheads > .phead{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .5s ease}
.pheads > .phead.on{opacity:1;visibility:visible}
@media (prefers-reduced-motion: reduce){ .pheads > .phead{transition:none} }

.ptabs{display:flex;flex-wrap:wrap;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:34px 0 0}
.ptab{
  position:relative;
  flex:1 1 auto;min-width:0;background:transparent;color:var(--ink);
  border:0;
  padding:11px 14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
}
.ptab:first-child{border-left:0}
.ptab:hover{background:var(--ink);color:var(--paper)}
.ptab[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.pbar{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--signal);transform:scaleX(0);transform-origin:left center;
}
.pbar.run{animation:pbarRun 4s linear forwards}
@keyframes pbarRun{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pset{border-bottom:1px solid var(--rule)}
.ppanel{
  display:grid;grid-template-columns:1fr;gap:22px;
  padding:var(--s3) var(--gut) var(--s3);align-items:center;
}
@media (min-width:860px){ .ppanel{grid-template-columns:1.1fr 1fr;gap:40px;padding:26px 24px 30px} }
.pfig{margin:0}
.pg{display:block;width:100%;height:auto;color:var(--muted);overflow:visible}
.pg .trk{fill:none;stroke:currentColor;stroke-width:1.3}
.pg .hit{fill:var(--signal)}
.pg .mk{fill:none;stroke:var(--signal);stroke-width:1.8}
.pg .cap{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;fill:var(--muted);
}
.pbody h3{margin:0 0 10px;font-size:clamp(18px,2.4vw,24px);font-weight:500;letter-spacing:-.02em}
.pbody p{margin:0;font-size:13.5px;line-height:1.62;color:var(--muted);max-width:46ch}

/* continuity: one thread carried straight through every cut */
.pg-assets .thread{fill:none;stroke:var(--signal);stroke-width:1.6}
.pg-assets .carry{
  fill:var(--paper);stroke:var(--signal);stroke-width:1.8;
  transform-box:view-box;animation:carryThrough 4.6s ease-in-out infinite;
}
@keyframes carryThrough{
  0%,6%{transform:translateX(0)}
  50%,56%{transform:translateX(248px)}
  100%{transform:translateX(0)}
}
@media (prefers-reduced-motion:reduce){ .pg-assets .carry{animation:none} }

@keyframes drop{
  0%,6%{transform:translateY(-78px)}
  38%{transform:translateY(0)}
  46%{transform:translateY(-16px)}
  56%{transform:translateY(0)}
  61%{transform:translateY(-6px)}
  67%,88%{transform:translateY(0)}
  100%{transform:translateY(-78px)}
}
@keyframes ghost{0%,4%{opacity:0}14%{opacity:.75}30%,100%{opacity:0}}
@keyframes puff{0%,34%{opacity:0}42%{opacity:1}56%,100%{opacity:0}}
.pg-weight .ball{transform-box:fill-box;animation:drop 4.2s cubic-bezier(.45,0,.55,1) infinite}
.pg-weight .gh{fill:var(--signal);animation:ghost 4.2s ease-out infinite}
.pg-weight .g2{animation-delay:.07s}
.pg-weight .g3{animation-delay:.14s}
.pg-weight .dust{animation:puff 4.2s ease-out infinite}


/* ---------- the result: two frames side by side ---------- */
.vs{display:grid;grid-template-columns:1fr;gap:28px;margin:34px 0 0}
@media (min-width:760px){ .vs{grid-template-columns:1fr 1fr;gap:22px} }
.vsfig{
  margin:0;aspect-ratio:16/9;background:#000;
  position:relative;overflow:hidden;
}
.vsfig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vscol.on .vsfig{border-color:var(--signal);box-shadow:0 0 0 1px var(--signal)}
.vscap{
  margin:0 0 11px;padding-top:11px;border-top:1px solid var(--rule);
  font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.vscol.on .vscap{color:var(--ink)}

/* ---------- reel: media slot with the category selector on it ---------- */
.reel{position:relative}
.reelmedia > img{display:block;width:100%;height:100%;object-fit:cover}
.reelhold{
  position:absolute;top:0;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;
  background:#0C0C0C;color:#FBFAFF;
  font-size:16px;line-height:1.4;
}
/* four corners, the way a frame gets marked up */
.reelhold::before,.reelhold::after,
.rh-corners::before,.rh-corners::after{
  content:"";position:absolute;width:24px;height:24px;
  border:1px solid rgba(251,250,255,.26);
}
@media (min-width:760px){
  .reelhold::before,.reelhold::after,
  .rh-corners::before,.rh-corners::after{width:34px;height:34px}
}
.reelhold::before{top:18px;left:18px;border-right:0;border-bottom:0}
.reelhold::after{bottom:18px;right:18px;border-left:0;border-top:0}
.rh-corners::before{top:18px;right:18px;border-left:0;border-bottom:0}
.rh-corners::after{bottom:18px;left:18px;border-right:0;border-top:0}
@media (min-width:760px){
  .reelhold::before{top:22px;left:22px}
  .reelhold::after{bottom:22px;right:22px}
  .rh-corners::before{top:22px;right:22px}
  .rh-corners::after{bottom:22px;left:22px}
}
.rh-in{text-align:center;padding:var(--s4) var(--gut);max-width:32ch}
.rh-lab{display:block;color:var(--signal);letter-spacing:.17em;margin-bottom:14px}
.rh-h{
  margin:0 0 20px;font-weight:400;line-height:1.02;letter-spacing:-.03em;
  font-size:clamp(21px,3.2vw,38px);
}
.rh-cta{
  display:inline-block;color:#FBFAFF;text-decoration:none;
  border:1px solid rgba(251,250,255,.42);padding:9px 14px;
}
.rh-cta:hover{background:#FBFAFF;color:#0C0C0C;border-color:#FBFAFF}
.reelbar{
  display:flex;align-items:center;
  padding:10px 16px;border-bottom:1px solid var(--rule);background:var(--paper);
}
@media (min-width:760px){ .reelbar{padding:12px 22px} }
.reelsel{position:relative;z-index:30;width:min(280px,100%)}
.wsel-btn{
  width:100%;display:flex;align-items:center;gap:10px;justify-content:space-between;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  padding:10px 12px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;text-align:left;
}
.wsel-btn i{
  width:0;height:0;flex:none;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;transition:transform .15s ease;
}
.wsel-btn[aria-expanded="true"] i{transform:rotate(180deg)}
.wsel-menu{
  position:absolute;top:calc(100% - 1px);left:0;right:0;
  background:var(--paper);border:1px solid var(--ink);
  max-height:min(60vh,380px);overflow:auto;
}
.wopt{
  display:block;width:100%;text-align:left;background:transparent;
  border:0;border-bottom:1px solid var(--rule);cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);padding:9px 12px 9px 26px;
}
.wopt:last-child{border-bottom:0}
.wopt.grp,.wopt.all{color:var(--ink);font-weight:500;padding-left:12px;letter-spacing:.12em}
.wopt.off{cursor:default;color:var(--muted);opacity:.75;background:var(--rule);opacity:1}
.wopt.off{background:transparent;color:var(--ink);font-weight:500;padding-left:12px;border-bottom:1px solid var(--ink)}
.wopt:not(.off):hover{background:var(--ink);color:var(--paper)}
.wopt[aria-selected="true"]{background:var(--signal);color:var(--g-on-dark)}

.reelmedia{position:relative;background:#0C0C0C}
.sndbtn{
  position:absolute;z-index:5;right:14px;bottom:14px;
  display:flex;align-items:center;gap:8px;cursor:pointer;
  background:rgba(12,12,12,.7);color:#FBFAFF;border:1px solid rgba(251,250,255,.4);
  padding:8px 11px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  backdrop-filter:blur(3px);
}
@media (min-width:760px){ .sndbtn{right:22px;bottom:20px} }
.sndbtn:hover{background:#0C0C0C;border-color:#FBFAFF}
.sndbtn.on{background:var(--signal);border-color:var(--signal);color:var(--g-on-dark)}
.sndico{
  width:9px;height:9px;flex:none;border-radius:50%;
  border:1px solid currentColor;background:transparent;
}
.sndbtn.on .sndico{background:currentColor}

/* the reel stage: a fixed 16:9 box holding the player, with the poster
   sitting behind it until the player reports itself live */
.vstage{
  position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;
  background-color:#000;background-image:var(--poster,none);
  background-size:cover;background-position:50% 50%;background-repeat:no-repeat;
}
.vstage.live{background-image:none}
.reelmedia .vstage iframe,.reelmedia .vstage video{
  position:absolute;top:0;left:0;width:100%;height:100%;
  display:block;border:0;object-fit:cover;
}

/* ---------- proof of work: tabs + panel ---------- */
.work{padding:0 0 4px}
.workbar{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:16px 16px 14px;
}
@media (min-width:760px){ .workbar{padding:20px 22px 16px} }
.worklab{
  font-family:var(--sans);font-size:clamp(17px,2.2vw,22px);
  font-weight:500;letter-spacing:-.02em;margin-right:auto;
}
.wcount{color:var(--muted);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.wtabs{display:flex;flex-wrap:wrap;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.wtabs[hidden]{display:none}
.wtab{
  flex:1 1 auto;min-width:0;background:transparent;color:var(--ink);
  border:0;padding:11px 14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
}
.wtab:first-child{border-left:0}
.wtab em{font-style:normal;color:var(--muted)}
.wtab:hover{background:var(--ink);color:var(--paper)}
.wtab:hover em{color:inherit;opacity:.65}
.wtab[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.wtab[aria-selected="true"] em{color:inherit;opacity:.65}

.wgrid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule)}
@media (min-width:700px){ .wgrid{grid-template-columns:repeat(3,1fr)} }
.wcard{background:var(--paper);padding:var(--s2) var(--gut);display:flex;flex-direction:column}
@media (min-width:760px){ .wcard{padding:18px 20px 20px} }
.wshot{margin:0;aspect-ratio:16/9;background:#000;overflow:hidden;position:relative}
.wshot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* right half reveals the rebuilt frame, aligned to the same framing */
.wshot.ba2 .half{
  position:absolute;top:0;right:0;bottom:0;left:auto;width:50%;
  overflow:hidden;border-left:1px solid var(--signal);
}
.wshot.ba2 .half img{position:absolute;top:0;right:0;left:auto;width:200%;max-width:none;height:100%}
.wshot .tag{
  position:absolute;bottom:0;z-index:3;padding:3px 6px;
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
}
.wshot .tag.l{left:0;background:#0C0C0C;color:#FBFAFF}
.wshot .tag.r{right:0;background:var(--signal);color:var(--g-on-dark)}
.wmeta{margin:12px 0 0}
.wmeta h3{margin:0;font-size:clamp(15px,1.8vw,17px);font-weight:500;letter-spacing:-.016em}
.wempty{
  margin:0;padding:var(--s5) var(--gut);text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.wempty a{color:var(--signal);text-decoration:none;border-bottom:1px solid currentColor}
.wempty a:hover{color:var(--ink)}

/* ---------- where it starts: three timelines ---------- */
/* three ways in. One composition carried through four frames: written down,
   drawn, given volume, then finished. The frame never changes; what is inside
   it resolves. */
.pg-entry .fr{fill:none;stroke:currentColor;stroke-width:1;opacity:.6}
.pg-entry .fr.own{stroke:var(--ink);stroke-width:1.3;opacity:1}
.pg-entry .ln{fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round}
.pg-entry .pl{fill:none;stroke:currentColor;stroke-width:.8;opacity:.45}
.pg-entry .bl{fill:currentColor;opacity:.38;stroke:none}
.pg-entry .fill{fill:var(--signal);stroke:none}
.pg-entry .sig{fill:none;stroke:var(--signal);stroke-width:1.2}
.pg-entry .lnk{fill:none;stroke:currentColor;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round;opacity:.45}
.pg-entry .brk{fill:none;stroke:var(--signal);stroke-width:1.1}
.pg-entry .cap{font-size:7.6px;letter-spacing:.11em}
.pg-entry .cap.ink{fill:var(--ink)}
.pg-entry .cap.sig{fill:var(--signal)}


/* ---------- contact: purple gradient with grain ---------- */
.cta2{
  background:linear-gradient(158deg,#230B55 0%,#43189E 38%,#6B33D6 72%,#9367F2 100%);
  color:#FBFAFF;
  position:relative;isolation:isolate;overflow:hidden;
}
.cta2::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
.cta2 h2,.cta2 .ctaline,.cta2 .ff label,.cta2 .mfnote,
.cta2 .ff input,.cta2 .ff textarea,.cta2 .more a{color:#FBFAFF}
.cta2 .ff input,.cta2 .ff textarea{border-color:rgba(251,250,255,.42)}
.cta2 .ff input::placeholder,.cta2 .ff textarea::placeholder{color:rgba(251,250,255,.55)}
.cta2 .ff input:focus,.cta2 .ff textarea:focus{outline:2px solid #FBFAFF;outline-offset:-2px}
.cta2 .mfbtn{background:#FBFAFF;color:#3A1288;border-color:#FBFAFF}
.cta2 .mfbtn:hover{background:transparent;color:#FBFAFF;border-color:#FBFAFF}
.cta2 .mfbtn.ghost{background:transparent;color:#FBFAFF;border-color:rgba(251,250,255,.55)}
.cta2 .mfbtn.ghost:hover{background:#FBFAFF;color:#3A1288;border-color:#FBFAFF}

/* ================= BOOK A VIDEO CALL ================= */
.boxes{display:grid;grid-template-columns:1fr;border-top:1px solid var(--rule)}
@media (min-width:880px){ .boxes{grid-template-columns:repeat(3,1fr)} }
.box{padding:var(--s3) var(--gut) var(--s4);border-bottom:1px solid var(--rule)}
@media (min-width:880px){

  .box:last-child{border-right:0}
}
.boxfig{margin:0 0 18px}
.box .idx{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--signal);margin-bottom:9px;
}
.box h3{margin:0 0 7px;font-size:18px;font-weight:500;letter-spacing:-.016em}
.box p{margin:0;font-size:13px;line-height:1.62;color:var(--muted);max-width:42ch}

@keyframes docIn{0%,4%{opacity:0;transform:translateX(-10px)}16%,74%{opacity:1;transform:none}86%,100%{opacity:0;transform:translateX(-10px)}}
@keyframes flowOn{0%,14%{opacity:.15}30%,76%{opacity:1}88%,100%{opacity:.15}}
@keyframes landIn{0%,28%{opacity:0;transform:scale(.82)}42%,78%{opacity:1;transform:none}90%,100%{opacity:0;transform:scale(.82)}}
.pg-in .doc{transform-box:fill-box;animation:docIn 4.2s cubic-bezier(.3,0,.2,1) infinite}
.pg-in .d2{animation-delay:.16s}
.pg .flow{animation:flowOn 4.2s ease-in-out infinite}
.pg-in .land{transform-box:fill-box;transform-origin:center;animation:landIn 4.2s cubic-bezier(.3,0,.2,1) infinite}

@keyframes bitOn{0%,6%{opacity:.2}18%,76%{opacity:1}88%,100%{opacity:.2}}
@keyframes joinOn{0%,20%{opacity:.12}34%,76%{opacity:1}88%,100%{opacity:.12}}
@keyframes frameFill{0%,32%{clip-path:inset(0 100% 0 0)}52%,78%{clip-path:inset(0 0 0 0)}90%,100%{clip-path:inset(0 100% 0 0)}}
.pg-mid .bit{animation:bitOn 4.2s ease-in-out infinite}
.pg-mid .b2{animation-delay:.14s}
.pg-mid .b3{animation-delay:.28s}
.pg-mid .join{animation:joinOn 4.2s ease-in-out infinite}
.pg-mid .frameIn{animation:frameFill 4.2s cubic-bezier(.4,0,.3,1) infinite}

@keyframes gradeOn2{0%,8%{opacity:.18}22%,76%{opacity:1}88%,100%{opacity:.18}}
@keyframes clipOn{0%,36%{opacity:0;transform:translateY(-5px)}50%,78%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(-5px)}}
.pg-out .grade rect{animation:gradeOn2 4.2s ease-in-out infinite}
.pg-out .g2{animation-delay:.12s}
.pg-out .g3{animation-delay:.24s}
.pg-out .clips rect{transform-box:fill-box;animation:clipOn 4.2s ease-out infinite}
.pg-out .c2{animation-delay:.12s}
.pg-out .c3{animation-delay:.24s}

/* the offer, in the second accent */
.offer{
  display:grid;grid-template-columns:1fr;gap:26px;
  padding:var(--s4) var(--gut) var(--s4);
  background:linear-gradient(158deg,#3A1405 0%,#8A3A10 42%,#C26A1E 78%,#E0994A 100%);
  color:#FFF8F0;
  position:relative;isolation:isolate;overflow:hidden;
  border-top:1px solid var(--rule);
}
@media (min-width:900px){ .offer{grid-template-columns:1.35fr 1fr;gap:56px;padding:48px 22px 54px} }
.offer::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.24;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n2)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
.offer .eyebrow{color:#FFF8F0;opacity:.8;margin-bottom:14px}
.offer h2{
  margin:0 0 16px;font-weight:400;letter-spacing:-.032em;line-height:1.02;
  font-size:clamp(28px,5.4vw,60px);max-width:14ch;text-wrap:balance;color:#FFF8F0;
}
.offer p{margin:0 0 12px;font-size:14.5px;line-height:1.6;max-width:50ch;color:#FFF8F0;opacity:.9}
.offer-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.obtn{
  display:inline-block;text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:12px 18px;border:1px solid #FFF8F0;background:#FFF8F0;color:#5A2409;
}
.obtn:hover{background:transparent;color:#FFF8F0}
.obtn.ghost{background:transparent;color:#FFF8F0;border-color:rgba(255,248,240,.55)}
.obtn.ghost:hover{background:#FFF8F0;color:#5A2409;border-color:#FFF8F0}
.olist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;align-self:center;width:100%}
.olist li{
  display:flex;flex-direction:column;gap:3px;
  padding:14px 0;border-top:1px solid rgba(255,248,240,.32);
}
.olist li:last-child{border-bottom:1px solid rgba(255,248,240,.32)}
.olist b{
  font-family:var(--sans);font-size:clamp(24px,3.4vw,36px);font-weight:500;
  letter-spacing:-.028em;color:#FFF8F0;text-transform:none;
}
.olist span{color:#FFF8F0;opacity:.78;letter-spacing:.08em;text-transform:none;font-size:11px}

/* ---------- how we work ---------- */
.ratios{display:grid;grid-template-columns:1fr;gap:26px;margin:28px 0 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
@media (min-width:760px){ .ratios{grid-template-columns:1fr 1fr;gap:1px;background:var(--rule)} }
.ratio{padding:var(--s3) var(--gut) var(--s3);border-bottom:1px solid var(--rule);background:var(--paper)}
.ratio:last-child{border-bottom:0}
@media (min-width:760px){
  .ratio{border-bottom:0;padding:22px 24px 28px}
}
.rnum{
  display:block;font-size:clamp(40px,7vw,68px);line-height:1;
  letter-spacing:-.04em;color:var(--ink);margin-bottom:18px;
}
.rnum em{font-style:normal;font-size:1em;letter-spacing:-.02em;color:inherit}
.rnum.sig{color:var(--signal)}
.pg-ratio .cell{fill:var(--muted);opacity:.5;stroke:none}
.pg-ratio .cell.on{fill:var(--signal);opacity:1}
.eqs{display:grid;grid-template-columns:1fr;gap:0;margin:28px 0 30px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
@media (min-width:760px){ .eqs{grid-template-columns:1fr 1fr} }
.eq{padding:var(--s3) var(--gut) var(--s3);border-bottom:1px solid var(--rule)}
.eq:last-child{border-bottom:0}
@media (min-width:760px){
  .eq{border-bottom:0;padding:22px 24px 28px}
  .eq:last-child{border-right:0}
}
.eqline{
  margin:0 0 14px;font-size:clamp(20px,2.7vw,30px);letter-spacing:-.02em;
  color:var(--ink);text-transform:none;line-height:1;
}
.claim.big2.xl{font-size:clamp(29px,5.5vw,62px);line-height:.98;letter-spacing:-.035em;max-width:21ch}
.eq .pfig{margin:0 0 16px}
.eq .eqline{margin:0 0 8px;font-size:clamp(17px,2.2vw,21px);font-weight:500;letter-spacing:-.02em;line-height:1.25}
.eq .eqline b{font-weight:500}
.eq .eqline em{border-bottom:0}
.eq .eqline i{font-style:normal;color:var(--muted);padding:0 .14em}
.eq .eqline em{font-style:normal;font-weight:500}
.eq .eqline em.sig{color:var(--signal)}

/* ---------- cost formula ---------- */
.formula{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:30px 0 0}
.formula.solo{margin-top:26px}
.frow{display:grid;grid-template-columns:1fr;gap:10px;padding:var(--s3) var(--gut);border-bottom:1px solid var(--rule)}
.frow:last-child{border-bottom:0}
@media (min-width:760px){
  .frow{grid-template-columns:104px 1fr;gap:20px;align-items:start}
}
.flab{color:var(--signal);line-height:1.9}
.feq{
  margin:0;font-size:clamp(16px,2.3vw,26px);line-height:1.45;
  letter-spacing:-.022em;color:var(--ink);text-wrap:pretty;
}
.feq + .feq{margin-top:6px}
.feq.sm{font-size:clamp(15px,1.9vw,22px)}
.feq b{font-weight:500}
.feq i{font-style:normal;color:var(--muted);padding:0 .16em}
.feq i.p{padding:0;color:var(--muted)}
.feq em{font-style:normal;font-weight:500;border-bottom:2px solid var(--rule);padding-bottom:1px}
.feq em.sig{color:var(--signal);border-bottom-color:var(--signal)}
.fnote{margin:12px 0 0;color:var(--muted);text-transform:none;letter-spacing:.04em;font-size:10.5px;line-height:1.6}
.claim.mid{margin-top:30px;font-size:clamp(22px,3.6vw,40px);max-width:24ch}
.eq .pfig{margin:0 0 16px;max-width:330px}
.eq h3{margin:0 0 8px;font-size:clamp(17px,2.2vw,21px);font-weight:500;letter-spacing:-.02em}
.eq p{margin:0;font-size:13.5px;line-height:1.62;color:var(--muted);max-width:44ch}
.pg-loop circle.trk{fill:none;stroke:currentColor;stroke-width:1.1}
.pg-loop circle.trk.solid{fill:currentColor;stroke:none}
.pg-loop circle.hit{fill:var(--signal)}
.pg-loop .aim{stroke-width:1.4;opacity:.9}
.pg-dist{color:var(--ink);overflow:visible}
.pg-dist .cap{font-size:6.4px;letter-spacing:.16em}
.pg-dist .dist{stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pg-dist .axis{stroke-width:1;opacity:.28}
.pg-dist circle.trk{fill:none;stroke:currentColor;stroke-width:1.4}
.pg-dist circle.trk.solid{fill:currentColor;stroke:none}
.pg-dist circle.trk.hollow{fill:var(--paper);stroke:currentColor;stroke-width:1.6}
.pg-dist circle.hit{fill:var(--signal)}
.pg-dist .head-n{fill:currentColor;stroke:none}
.pg-dist .head-s{fill:var(--signal);stroke:none}
.pg-dist .pull{stroke-width:1.5;stroke-linecap:butt;opacity:.8}
.pg-dist .push{fill:none;stroke-width:1.5;stroke-linecap:butt}
.pg-dist .tick{stroke-width:1;opacity:.45}
.pg-dist .cap.micro{font-size:5.4px;letter-spacing:.18em;opacity:.7}
.pg-dist .aim{stroke-width:1.4}
.ratio{display:flex;flex-direction:column}
/* both grids reserve the taller one's box, so the headings start on the same line */
.ratio .pfig{margin:0 0 18px;aspect-ratio:125/65}
.ratio .pfig svg{display:block;width:100%;height:auto}
.ratio h3{margin:0 0 8px;font-size:clamp(17px,2.2vw,21px);font-weight:500;letter-spacing:-.02em}
.ratio p{margin:0;font-size:13.5px;line-height:1.62;color:var(--muted);max-width:44ch}
.pfig.wide{margin:26px 0 0;padding:18px 16px}
.pfig.wide .pg{max-width:600px;margin:0 auto}
.pg-flow{color:var(--ink)}
.pg-flow .cap{font-size:6px;letter-spacing:.13em;fill:var(--ink)}
.pg-flow .cap.hd{fill:var(--signal)}
.pg-flow .cap.dimcap{fill:var(--muted);letter-spacing:.16em}
.pg-flow .cap.on{fill:var(--g-on-dark)}
.pg-flow .card{fill:var(--paper);stroke:currentColor;stroke-width:1}
.pg-flow .card.front{fill:var(--paper)}
.pg-flow .tline{fill:var(--muted);opacity:.5}
.pg-flow .model{fill:var(--paper);stroke:currentColor;stroke-width:1.3}
.pg-flow .wire{fill:none;stroke:currentColor;stroke-width:1.2}
.pg-flow .rule{stroke:var(--rule);stroke-width:1}
.pg-flow .loop{fill:none;stroke:var(--signal);stroke-width:1.3;stroke-dasharray:3.5 3}
.pg-flow .ah-i{fill:var(--ink);stroke:none}
.pg-flow .ah-s{fill:var(--signal);stroke:none}
.pg-truth .earth{stroke-width:1.6;color:var(--ink)}
.pg-truth .hatch{stroke-width:1;opacity:.55}
@media (min-width:760px){ .pfig.wide{padding:24px 26px} }
.pg .cap.onfill{fill:var(--g-on-dark)}
.logowall{
  display:grid;align-items:stretch;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--rule);
  margin:10px 0 16px;
}
@media (min-width:560px){ .logowall{grid-template-columns:repeat(3,1fr)} }
@media (min-width:900px){ .logowall{grid-template-columns:repeat(5,1fr)} }
.lw{
  display:flex;align-items:center;gap:10px;
  padding:13px 12px;min-height:52px;
  border-bottom:1px solid var(--rule);
}
.tlogo{flex:none;width:21px;height:21px;fill:var(--muted);opacity:.8;transition:fill .18s ease,opacity .18s ease}
.lw span{
  white-space:nowrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);line-height:1.25;
  transition:color .18s ease;
}
.lw:hover .tlogo{fill:var(--ink);opacity:1}
.lw:hover span{color:var(--ink)}
.lw.plus span{color:var(--signal)}
.bay .tlab{margin-top:26px}

/* ---------- booking ---------- */
.booking{display:grid;grid-template-columns:1fr;border-top:1px solid var(--rule)}
@media (min-width:860px){ .booking{grid-template-columns:1.05fr 1fr} }
.bk-cal{padding:var(--s3) var(--gut);border-bottom:1px solid var(--rule)}
@media (min-width:860px){ .bk-cal{border-bottom:0;padding:28px 26px 32px} }
.bk-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.bk-month{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.bk-nav{
  border:1px solid var(--rule);background:none;color:var(--ink);cursor:pointer;
  width:30px;height:30px;line-height:1;font-size:13px;
}
.bk-nav:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.bk-nav:disabled{opacity:.25;cursor:default}
.bk-dow,.bk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.bk-dow{margin-bottom:6px}
.bk-dow span{text-align:center;font-size:10px;letter-spacing:.1em;color:var(--muted)}
.bk-day{
  aspect-ratio:1;border:1px solid var(--rule);background:none;color:var(--ink);
  font-size:12.5px;letter-spacing:.02em;cursor:pointer;padding:0;
}
.bk-day:hover:not(:disabled){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.bk-day.off{border-color:transparent;color:var(--muted);opacity:.35;cursor:default}
.bk-day.on{background:var(--signal);border-color:var(--signal);color:var(--g-on-dark)}
.bk-pad{aspect-ratio:1}
.bk-note{margin:18px 0 0;color:var(--muted);text-transform:none;letter-spacing:.04em;font-size:10.5px;line-height:1.6}
.bk-side{padding:22px 16px 30px}
@media (min-width:860px){ .bk-side{padding:28px 26px 34px} }
.bk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:5px;margin:10px 0 26px}
.bk-slot{
  border:1px solid var(--rule);background:none;color:var(--ink);cursor:pointer;
  padding:9px 4px;font-size:12px;letter-spacing:.06em;
}
.bk-slot:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.bk-slot.on{background:var(--signal);border-color:var(--signal);color:var(--g-on-dark)}
.bk-chosen{
  margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid var(--rule);
  color:var(--muted);text-transform:none;letter-spacing:.05em;font-size:12px;
}
.bk-chosen.set{color:var(--signal)}
.bookform .ff{margin-bottom:14px}
.bookform .opt{color:var(--muted);letter-spacing:.06em}

/* ============ proof of work: approach block ============ */
.approach{border-bottom:1px solid var(--rule);padding:34px 18px 40px}
@media (min-width:900px){ .approach{padding:48px 26px 56px} }
.apline{
  margin:0 0 28px;max-width:20ch;
  font-size:clamp(24px,3.8vw,42px);line-height:1.1;font-weight:500;letter-spacing:-.025em;
}
@media (min-width:900px){ .apline{margin-bottom:40px} }

/* placeholder slots while assets are still coming */
.fgrid{display:grid;gap:1px;background:var(--rule)}
@media (min-width:760px){ .fgrid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:700px){
  .wgrid.n1{grid-template-columns:1fr}
  .wgrid.n2{grid-template-columns:repeat(2,1fr)}
}
.fhold{
  position:relative;aspect-ratio:16/9;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
}
.fhold:before{
  content:"";position:absolute;inset:14px;border:1px dashed var(--rule);opacity:.3;
}
.fhold span{
  position:relative;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);opacity:.9;
}
.fhold.ba:after{
  content:"Original / Rebuilt";position:absolute;bottom:12px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);opacity:.62;
}
.fhold.ba i{position:absolute;top:14px;bottom:14px;left:50%;width:1px;background:var(--rule);opacity:.4}
/* full-width before / after, stacked like the reel */
.baset.full{border-bottom:1px solid var(--rule)}
.baset.full:last-of-type{border-bottom:0}
.baset.full .ba{border:0;max-width:none;width:100%;background:#000}
.baset.full .tag{bottom:12px;font-size:9px;padding:4px 9px}
@media (min-width:900px){ .baset.full .tag{bottom:16px;padding:5px 11px;font-size:10px} }
.baset.full .tag.l{left:0}
.baset.full .tag.r{right:0}
.bafcap{
  display:flex;gap:14px;align-items:baseline;justify-content:flex-start;
  padding:9px 12px;background:#0C0C0C;color:#FBFAFF;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
}
@media (min-width:900px){ .bafcap{padding:11px 18px;gap:20px} }
.bafcap em{font-style:normal;opacity:.55}
.fhold.wide{aspect-ratio:16/9}
@media (min-width:900px){ .fhold.wide{aspect-ratio:2.2/1} }

.wmore{
  margin:0;padding:18px 22px 22px;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.wmore a{color:var(--signal)}





/* ============ where we start ============ */
.gline{border-top:1px solid var(--rule);padding:28px 0 0;margin-top:30px}
.gline:first-child{border-top:0;padding-top:0;margin-top:0}
.gq{
  display:flex;gap:14px;align-items:baseline;margin:0 0 14px;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
}
.gq span{color:var(--muted);opacity:.55}

/* collapsed borders, so a short last row leaves no empty cells behind */
.gcards{display:grid;grid-template-columns:1fr;padding-bottom:1px}
@media (min-width:560px){ .gcards{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .gcards{grid-template-columns:repeat(4,1fr)} }
.gcard{
  display:flex;flex-direction:column;justify-content:flex-end;gap:7px;
  min-height:106px;padding:var(--s3) var(--gut);text-align:left;cursor:pointer;
  background:var(--paper);color:var(--ink);font:inherit;
  border:1px solid var(--rule);margin:0 -1px -1px 0;position:relative;
}
.gcard.on{z-index:1}
.gcard b{font-size:clamp(17px,2vw,20px);font-weight:500;letter-spacing:-.018em;line-height:1.15}
.gcard em{font-style:normal;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.gcard:hover{background:var(--ink);color:var(--paper)}
.gcard:hover em{color:var(--paper);opacity:.65}
.gcard.on{background:var(--signal);color:var(--g-on-dark)}
.gcard.on em{color:var(--g-on-dark);opacity:.72}

.gframe{margin-top:34px;border-top:1px solid var(--rule);padding-top:22px}
.gframe .gq{margin-bottom:14px}
.gframe .baset.full{border-bottom:0}
.gfl{opacity:0;transition:opacity .4s ease;z-index:1}
.gfl.on{opacity:1}
.gfhold{
  position:absolute;inset:0;z-index:2;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
}
.gfhold span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);opacity:.6}
.gframe .after-layer{z-index:3}
.gframe .tag,.gframe .handle,.gframe .arrow-r{z-index:4}
/* your shot in the middle, the coverage we deliver around it */
.gsurround{display:grid;gap:1px;background:var(--rule)}
.gsrow{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule)}
@media (min-width:640px){ .gsrow{grid-template-columns:repeat(2,1fr)} }
.gsrow img{display:block;width:100%;height:auto}
.gshero{background:var(--paper);display:flex;justify-content:center}
.gshero figure{position:relative;margin:0;width:100%}
@media (min-width:640px){ .gshero figure{width:58%} }
.gshero img{display:block;width:100%;height:auto}
.gshero .tag{
  position:absolute;bottom:0;left:0;z-index:3;padding:4px 9px;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  background:#0C0C0C;color:#FBFAFF;
}
@media (min-width:900px){ .gshero .tag{padding:5px 11px;font-size:10px} }

.gworld{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);margin-top:1px}
.gframe .baset.full .ba{border-bottom:0}
@media (min-width:760px){ .gworld{grid-template-columns:repeat(4,1fr)} }
.gworld img{display:block;width:100%;height:auto}

.gout-in{border-top:1px solid var(--rule);padding-top:30px;margin-top:34px}
.gout-in h4{margin:0 0 14px;font-size:clamp(21px,2.8vw,30px);font-weight:500;letter-spacing:-.022em;max-width:20ch}

.gbody{margin:0;max-width:62ch;font-size:15px;line-height:1.62;color:var(--muted)}
@media (min-width:900px){ .gbody{font-size:16px} }
.gcta{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:26px}
.gbook{
  background:var(--signal);color:var(--g-on-dark);text-decoration:none;
  padding:12px 20px;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
}
.greset{
  background:transparent;border:0;cursor:pointer;color:var(--muted);
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;padding:0;
  border-bottom:1px solid currentColor;
}


/* where the value is: the same pixels, rearranged */
.pixfig{margin:26px 0 0;display:flex;flex-direction:column;align-items:center}
@media (min-width:860px){ .pixfig{margin-top:34px} }
.pixwrap{position:relative;width:200px;max-width:52vw}
@media (min-width:860px){ .pixwrap{width:246px} }
.pixwrap img{display:block;width:100%;height:auto;image-rendering:pixelated}
.pixwrap .pxb{
  position:absolute;inset:0;opacity:0;
  animation:pixOff 6.4s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes pixOff{
  0%,52%{opacity:0} 60%,80%{opacity:1} 88%,100%{opacity:0}
}
.pixcap{
  margin:12px 0 0;text-align:center;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);opacity:.75;
}
@media (prefers-reduced-motion:reduce){ .pixwrap .pxb{animation:none} }


/* in service of your story: one intent, every call answering to it */
.pg-serve .ray{stroke-dasharray:3 4;opacity:.4}
.pg-serve .core{animation:coreBeat 3.8s ease-in-out infinite}
@keyframes coreBeat{0%,100%{opacity:.86} 50%{opacity:1}}
.pg-serve .dot{animation:serveOn 3.8s ease-in-out infinite}
.pg-serve .s2{animation-delay:.12s}
.pg-serve .s3{animation-delay:.24s}
.pg-serve .s4{animation-delay:.36s}
.pg-serve .s5{animation-delay:.48s}
@keyframes serveOn{0%,8%{opacity:.34} 26%,70%{opacity:1} 92%,100%{opacity:.34}}
@media (prefers-reduced-motion:reduce){
  .pg-serve .dot,.pg-serve .core{animation:none}
}


/* what is slop: the two questions, side by side */
.qpair{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);
       border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:30px 0 0}
@media (min-width:760px){ .qpair{grid-template-columns:1fr 1fr;margin-top:38px} }
.qcol{background:var(--paper);padding:22px 20px 26px}
@media (min-width:900px){ .qcol{padding:26px 26px 30px} }
.qtag{
  display:block;margin:0 0 14px;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}
.qcol.on .qtag{color:var(--signal)}
.qcol h4{
  margin:0 0 12px;font-size:clamp(18px,2.4vw,23px);
  font-weight:500;letter-spacing:-.02em;line-height:1.2;
}
.qcol p{margin:0;font-size:13.5px;line-height:1.62;color:var(--muted);max-width:44ch}


/* which way the work faces */
.dirfig{margin:26px 0 0}
@media (min-width:860px){ .dirfig{margin-top:32px} }
.pg-dir .past{fill:currentColor;opacity:.26}
.pg-dir .nowline{stroke-dasharray:3 4;opacity:.45}
.pg-dir .backarrow{opacity:.55}
.pg-dir .fwdarrow{stroke-width:1.8}
.pg-dir .sig{fill:var(--signal)}
.pg-dir .cap{font-size:7.8px;letter-spacing:.12em}

/* ================= proof of work: the long scroll ================= */

/* the chooser at the foot of the hero: three parent categories, one of them
   live. The chosen one is purple, and hovering another shows what picking it
   would look like. Under it, the shot types that belong to it. */
.jump{
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.jtabs{display:grid;grid-template-columns:1fr}
@media (min-width:760px){ .jtabs{grid-template-columns:repeat(3,1fr)} }
.jtab{
  display:flex;align-items:center;gap:10px;min-width:0;text-align:left;cursor:pointer;
  background:var(--ink);color:var(--paper);border:0;
  padding:16px;
  transition:background .18s ease,color .18s ease;
}
@media (min-width:760px){ .jtab{padding:19px 18px} }
.jtab + .jtab{border-top:1px solid var(--paper)}
@media (min-width:760px){ .jtab + .jtab{border-top:0;border-left:1px solid var(--paper)} }
.jtab b{
  flex:1 1 auto;min-width:0;font-weight:500;font-size:16px;
  letter-spacing:-.018em;line-height:1.18;
}
@media (min-width:760px){ .jtab b{font-size:18px} }
.jtab svg{flex:none;width:11px;height:11px;opacity:.6;transition:transform .18s ease,opacity .18s ease}
.jtab:hover,.jtab:focus-visible{background:var(--signal);color:var(--on-signal);outline:0}
.jtab[aria-selected="true"]{background:var(--signal);color:var(--on-signal)}
.jtab:hover svg,.jtab:focus-visible svg{opacity:1;transform:translateY(2px)}

.jkids{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--rule)}
@media (min-width:820px){ .jkids{grid-template-columns:repeat(3,1fr)} }
.jitem{
  display:flex;align-items:center;gap:10px;min-width:0;text-align:left;cursor:pointer;
  background:transparent;color:var(--ink);border:0;
  border-bottom:1px solid var(--rule);
  padding:14px 16px;
  transition:background .18s ease,color .18s ease;
}
@media (min-width:760px){ .jitem{padding:16px 18px} }
.jitem:nth-of-type(2n){border-right:0}
.jitem:nth-last-of-type(-n+2){border-bottom:0}
@media (min-width:820px){

  .jitem:nth-of-type(3n){border-right:0}
  .jitem:nth-last-of-type(-n+3){border-bottom:0}
}
.jitem em{
  flex:none;font-family:var(--mono);font-style:normal;font-size:10px;
  letter-spacing:.08em;color:var(--muted);
}
.jitem b{flex:1 1 auto;min-width:0;font-weight:400;font-size:13.5px;letter-spacing:-.01em;line-height:1.2}
@media (min-width:760px){ .jitem b{font-size:14.5px} }
.jitem svg{flex:none;width:11px;height:11px;opacity:.35;transition:transform .18s ease,opacity .18s ease}
.jitem:hover,.jitem:focus-visible{background:var(--ink);color:var(--paper);outline:0}
.jitem:hover em,.jitem:focus-visible em{color:var(--paper);opacity:.6}
.jitem:hover svg,.jitem:focus-visible svg{opacity:1;transform:translateY(2px)}

.sec-num:empty::before{content:"\00a0"}

/* a section: room to breathe, then the reel edge to edge */
.pwsec{scroll-margin-top:56px}
.pwbay{padding:var(--s4) var(--gut) var(--s4)}
@media (min-width:760px){ .pwbay{padding:64px 22px 52px} }
@media (min-width:1100px){ .pwbay{padding:84px 22px 64px} }
.pwbay .claim.big2{margin-bottom:13px;max-width:17ch}
.pwbay.centre .claim.big2{margin-bottom:22px}
/* the claim now sits under the name it used to stand in for */
.pwsub{
  margin:0 0 18px;font-weight:400;line-height:1.08;letter-spacing:-.024em;
  font-size:clamp(20px,2.9vw,31px);max-width:24ch;text-wrap:balance;
  color:var(--muted);
}
@media (min-width:760px){ .pwsub{margin-bottom:22px} }
.pwbay .lede{max-width:62ch;font-size:16px;line-height:1.55}
@media (min-width:760px){ .pwbay .lede{font-size:18px;line-height:1.52;max-width:58ch} }
.pwreel{border-top:0}

/* facts under the paragraph, value first */
.specs{
  display:grid;grid-template-columns:1fr;gap:20px;
  margin:32px 0 0;padding-top:24px;border-top:1px solid var(--rule);
}
@media (min-width:700px){
  .specs{gap:30px;margin-top:44px;padding-top:30px}
  .specs.n2{grid-template-columns:repeat(2,1fr)}
  .specs.n3{grid-template-columns:repeat(3,1fr)}
}

/* the split: words on the left, the facts stacked down the right */
.pwsplit{display:grid;grid-template-columns:1fr;gap:34px}
@media (min-width:900px){
  .pwsplit{grid-template-columns:1.15fr .72fr;gap:clamp(40px,5vw,78px);align-items:start}
}
.specs.col{
  grid-template-columns:1fr;gap:0;margin:0;padding:0;border-top:0;
}
.specs.col .spec{padding:var(--s2) 0;border-top:1px solid var(--rule)}
.specs.col .spec:first-child{border-top:0;padding-top:0}
@media (min-width:900px){ .specs.col .spec:first-child{padding-top:6px} }
@media (max-width:899px){
  .specs.col{margin-top:6px;padding-top:26px;border-top:1px solid var(--rule)}
}
.specs.col .spec span{margin:0 0 7px}
.specs.col .spec b{margin-bottom:0}

/* one section in eight says its piece in the middle of the page and stops */
.pwbay.centre{text-align:center;padding-top:var(--s6);padding-bottom:var(--s5)}
@media (min-width:760px){ .pwbay.centre{padding-top:104px;padding-bottom:92px} }
@media (min-width:1100px){ .pwbay.centre{padding-top:132px;padding-bottom:112px} }
.pwbay.centre .claim.big2{
  margin-left:auto;margin-right:auto;max-width:14ch;
  font-size:clamp(33px,6.6vw,76px);
}
.pwbay.centre .lede{margin-left:auto;margin-right:auto;max-width:48ch}

/* nothing but a statement: give it the room instead of a rule */
.pwbay.bare{padding-bottom:44px}
@media (min-width:760px){ .pwbay.bare{padding-bottom:64px} }

/* reel first: the words land under it, a little tighter */
.pwsec.flip .pwreel{border-top:0}
.pwsec.flip .pwbay{padding-top:38px}
@media (min-width:760px){ .pwsec.flip .pwbay{padding-top:58px} }
@media (min-width:1100px){ .pwsec.flip .pwbay{padding-top:72px} }
.spec b{
  display:block;font-weight:500;letter-spacing:-.022em;line-height:1.1;
  font-size:clamp(17px,2.2vw,24px);margin-bottom:7px;text-wrap:balance;
}
.spec span{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);line-height:1.5;
}
@media (min-width:760px){ .spec span{font-size:10px} }

/* facts placed after the reel, for a part that carries its own */
.pwafter{padding:var(--s3) var(--gut) var(--s4);border-top:1px solid var(--rule)}

.pwafter .specs{margin:0;padding:0;border-top:0}

/* proof under a reel */
.pwproof{border-top:1px solid var(--rule)}
.pwframes{
  display:grid;grid-template-columns:1fr;border-top:1px solid var(--rule);
}
@media (min-width:760px){ .pwframes{grid-template-columns:repeat(3,1fr)} }
.pwframe{margin:0;display:flex;flex-direction:column;border-bottom:1px solid var(--rule)}
@media (min-width:760px){
  .pwframe{border-bottom:0}
  .pwframe:last-child{border-right:0}
}
.pwframe img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.pwframe figcaption{margin-top:auto;padding:11px 16px;color:var(--muted);border-top:1px solid var(--rule)}
@media (min-width:760px){ .pwframe figcaption{padding:12px 18px} }

/* the text arrives a beat after the rule above it */
.pwreveal .pwbay{opacity:0;transform:translateY(16px)}
.pwreveal .pwbay.in{opacity:1;transform:none;transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion: reduce){
  .pwreveal .pwbay{opacity:1;transform:none}
}


/* ================= MOVING GRAIN OVER VIDEO =================
   A tile of monochrome noise sitting on top of every reel stage. It does not
   slide: it jumps, eight positions a cycle, because that is what grain does.
   The jump is a translate on its own layer, so the browser composites it and
   never repaints the video underneath. Tuned live with ?grain in the address.
   ------------------------------------------------------------------------ */
:root{
  --grain-amount:.345;   /* how much of it you see */
  --grain-size:340px;    /* how big one speck reads */
  --grain-cycle:.30s;    /* eight jumps take this long */
  --grain-dark:.16;      /* the same grain, over a dark field */
}
.vstage{isolation:isolate}
.vstage::after{
  content:"";
  position:absolute;inset:-50%;
  z-index:4;pointer-events:none;
  opacity:var(--grain-amount);
  mix-blend-mode:overlay;
  background-repeat:repeat;
  background-size:var(--grain-size) var(--grain-size);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:grainDrift var(--grain-cycle) steps(1,end) infinite;
}
/* off screen, it stops costing anything */
.vstage.grain-hold::after,.grainy.grain-hold::after{animation-play-state:paused}
/* the switch the tuner throws to compare with and without */
.grain-off .vstage::after{display:none}

@keyframes grainDrift{
  0%    {transform:translate3d(0,0,0)}
  12.5% {transform:translate3d(-7%,4%,0)}
  25%   {transform:translate3d(5%,-9%,0)}
  37.5% {transform:translate3d(-10%,-4%,0)}
  50%   {transform:translate3d(8%,7%,0)}
  62.5% {transform:translate3d(-4%,9%,0)}
  75%   {transform:translate3d(10%,-6%,0)}
  87.5% {transform:translate3d(-8%,-9%,0)}
}
/* still, but still there */
@media (prefers-reduced-motion: reduce){
  .vstage::after{animation:none;transform:translate3d(0,0,0)}
}

/* ---------- the tuner, only with ?grain in the address ---------- */
.gtune{
  position:fixed;z-index:9999;left:14px;bottom:14px;width:236px;
  background:#0C0C0C;color:#FBFAFF;border:1px solid rgba(251,250,255,.35);
  padding:13px 14px 11px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.gtune h4{
  margin:0 0 10px;font-size:10px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:#A77BFF;
}
.gtune label{display:block;margin:0 0 9px}
.gtune .gtl{display:flex;justify-content:space-between;gap:10px;margin-bottom:5px;text-transform:uppercase}
.gtune .gtv{color:#A77BFF}
.gtune input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:2px;margin:0;
  background:rgba(251,250,255,.3);cursor:pointer;
}
.gtune input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:13px;height:13px;
  background:#FBFAFF;border:0;cursor:pointer;
}
.gtune input[type=range]::-moz-range-thumb{
  width:13px;height:13px;background:#FBFAFF;border:0;cursor:pointer;
}
.gtbtns{display:flex;gap:6px;margin-top:11px}
.gtbtns button{
  flex:1 1 auto;background:transparent;color:#FBFAFF;
  border:1px solid rgba(251,250,255,.4);padding:6px 4px;cursor:pointer;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
}
.gtbtns button:hover{background:#FBFAFF;color:#0C0C0C}
.gtbtns button[aria-pressed="true"]{background:#A77BFF;border-color:#A77BFF;color:#1A0A2E}
.gtout{
  margin:10px 0 0;padding-top:9px;border-top:1px solid rgba(251,250,255,.22);
  font-size:9px;line-height:1.7;color:rgba(251,250,255,.7);word-break:break-all;
}
@media (max-width:520px){ .gtune{width:auto;left:10px;right:10px} }


/* ================= THREE WAYS IN: ARTEFACT LEFT, WORDS RIGHT =================
   One specimen at a time in the left panel, its words on the right, and a list
   at the foot of the words to choose from. It advances on its own until
   somebody picks, and then it stops for good and stays where they put it.
   The three specimens are photographed on the same grey field at the same
   4:3, so the panel never changes height and only the object dissolves.
   ------------------------------------------------------------------------- */
.duo{
  display:grid;grid-template-columns:1fr;
  border-top:1px solid var(--rule);
}
@media (min-width:1000px){ .duo{grid-template-columns:1.04fr .96fr} }

.duopanel{
  position:relative;overflow:hidden;isolation:isolate;min-width:0;
  background-color:var(--panel);
}
/* holds the 4:3 before a single byte of image has arrived */
.duopanel::before{content:"";display:block;padding-top:75%}


.duofig{
  position:absolute;inset:0;margin:0;
  opacity:0;visibility:hidden;transition:opacity .62s ease;
}
.duofig.on{opacity:1;visibility:visible}
.duofig img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  filter:var(--duofilter);
}
@media (prefers-reduced-motion: reduce){ .duofig{transition:none} }

/* the same grain that sits over the reels, holding still over a still */
.duopanel::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:.19;mix-blend-mode:overlay;
  background-repeat:repeat;background-size:150px 150px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* the words */
.duobody{
  display:flex;flex-direction:column;min-width:0;
  border-top:1px solid var(--rule);
  padding:var(--s4) var(--gut) 0;
}

@media (min-width:1000px){ .duobody{border-top:0} }

.duotexts{display:grid;flex:1 1 auto}
.duotext{
  grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .5s ease;
}
.duotext.on{opacity:1;visibility:visible}
@media (prefers-reduced-motion: reduce){ .duotext{transition:none} }
.duoh{
  margin:0 0 16px;font-weight:400;line-height:1.03;letter-spacing:-.032em;
  font-size:clamp(27px,3.5vw,46px);text-wrap:balance;
}
.duotext .lede{max-width:42ch;font-size:15.5px;line-height:1.62;margin:0}
@media (min-width:1100px){ .duotext .lede{font-size:16.5px} }

/* what is already yours, and what is left to build */

/* the picker, at the foot of the words */
.duolist{margin-top:auto;padding-top:var(--s4);border-top:0}

.duorow{
  position:relative;display:flex;align-items:center;gap:14px;width:100%;
  background:transparent;color:var(--ink);border:0;
  border-top:1px solid var(--rule-soft);
  padding:var(--s2) 0;text-align:left;cursor:pointer;
  font-family:var(--sans);
  transition:color .18s ease;
}
.duorow:last-child{border-bottom:1px solid var(--rule-soft)}

.duorow i{
  flex:none;width:11px;height:11px;position:relative;opacity:.4;
  transition:opacity .18s ease,transform .3s cubic-bezier(.2,.7,.3,1);
}
.duorow i::before,.duorow i::after{content:"";position:absolute;background:currentColor}
.duorow i::before{left:0;right:0;top:5px;height:1px}
.duorow i::after{top:0;bottom:0;left:5px;width:1px}
.duorow b{
  flex:1 1 auto;min-width:0;font-weight:500;font-size:15px;letter-spacing:-.015em;
}
@media (min-width:760px){ .duorow b{font-size:16.5px} }
.duorow:hover i{opacity:1}
.duorow:focus-visible{outline:0}
.duorow:focus-visible b{text-decoration:underline;text-underline-offset:4px}
.duorow[aria-selected="true"] i{opacity:1;transform:rotate(45deg)}
.duorow[aria-selected="true"] b{color:var(--signal)}
.duobar{
  position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--signal);transform:scaleX(0);transform-origin:left center;
}
.duorow:last-child .duobar{bottom:0}
.duobar.run{animation:duoRun 5.4s linear forwards}
@keyframes duoRun{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){ .duobar{display:none} }

/* ================= HOME: THE REEL AS THE PAGE ITSELF =================
   The hero is the reel, edge to edge, with two lines of type sitting on it
   and the rest of the claim at its foot. Nothing boxes it in: the whole
   point is that the first thing on the page is the work. */
.vhero{
  position:relative;isolation:isolate;overflow:hidden;
  width:100vw;margin-left:calc(50% - 50vw);
  background:var(--night);
  /* 16:9 is the floor on height, so the frame can be taller than the reel
     but never wider than it: past that the player would be cropping away
     most of the picture to fill a letterbox nobody asked for. */
  min-height:max(clamp(440px,76vh,760px), 56.25vw);
  display:flex;flex-direction:column;justify-content:space-between;
}
.vhero-media{position:absolute;inset:0;z-index:0}
.vhero-media .vstage{position:absolute;inset:0}

/* just enough shading for type to sit on moving footage at any brightness */
.vhero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(6,6,6,.58) 0%,rgba(6,6,6,.18) 26%,rgba(6,6,6,0) 46%),
    linear-gradient(0deg,rgba(6,6,6,.72) 0%,rgba(6,6,6,.26) 24%,rgba(6,6,6,0) 52%);
}
.vhero-in{
  position:relative;z-index:2;
  width:100%;
  display:flex;flex-direction:column;justify-content:space-between;
  flex:1 1 auto;gap:var(--s5);
  padding:var(--s4) calc(var(--sheet-inset) + var(--gut));
  color:#FBFAFF;
}
/* the claim: two short lines, the second stepped in, as on a title card */
.vhero-mark{
  /* set off the logo, not off the page: it starts one logo's width past
     where the logo ends, and sits two thirds as far down as it used to.
     Both numbers come from the logo as rendered, measured in site.js. */
  position:absolute;margin:0;
  left:calc(var(--logo-end, 180px) + var(--logo-w, 140px));
  top:calc((var(--bar-h, 62px) + var(--s4) / 2) * 2 / 3);
  font-weight:500;letter-spacing:-.005em;line-height:1.2;
  font-size:clamp(12.5px,1vw,14.5px);
  text-shadow:0 1px 18px rgba(0,0,0,.5);
}
/* the second line steps in under the middle of the first, as on the reference */
.vhero-mark span{display:block;margin-left:2.5em}
/* on a phone the space past the logo is where the call to action sits, so
   the claim steps down under the bar and lines up with the logo instead */
@media (max-width:680px){
  .vhero-mark{left:var(--gut);top:calc(var(--bar-h, 62px) + var(--s2))}
}
/* nothing to see, it only marks where the dark run ends */
.paperline{display:block;height:1px;margin:0;width:100%}
.vhero-foot{
  margin:auto auto 0;max-width:56ch;text-align:center;
  display:flex;flex-direction:column;gap:var(--s1);
}
.vhero-foot p{
  margin:0;font-size:clamp(13px,1.15vw,15.5px);line-height:1.6;
  color:rgba(251,250,255,.9);text-wrap:pretty;
}
.vhero-ask a{
  color:#FBFAFF;text-decoration:none;
  border-bottom:1px solid rgba(251,250,255,.5);
  padding-bottom:2px;
}
.vhero-ask a:hover{border-bottom-color:#FBFAFF}
@media (prefers-reduced-motion: reduce){ .vhero-media{filter:none} }

/* ---------- the dark band: what we do, and what with ---------- */
.synop{
  position:relative;isolation:isolate;
  width:100vw;margin-left:calc(50% - 50vw);
  background:var(--night);color:#F1EFE8;
  padding:var(--s6) calc(var(--sheet-inset) + var(--gut));
  display:flex;flex-direction:column;align-items:center;
  gap:var(--s5);
}
.synop-lead{
  /* set like a title card: a condensed display serif, all capitals */
  /* extra air on both sides, on top of the band's own padding and gap */
  margin:var(--s4) 0;max-width:24em;text-align:center;text-wrap:balance;
  font-family:"Apple Garamond","Instrument Serif",Georgia,"Times New Roman",serif;
  font-size:clamp(20px,3.1vw,52px);line-height:1.08;letter-spacing:.012em;
  font-weight:400;text-transform:uppercase;
}
.synop-cols{
  display:grid;grid-template-columns:1fr;gap:var(--s3);
  max-width:86ch;width:100%;
}
@media (min-width:760px){ .synop-cols{grid-template-columns:1fr 1fr;gap:var(--s4)} }
.synop-cols p{
  margin:0;font-size:14px;line-height:1.72;color:rgba(241,239,232,.68);
  text-wrap:pretty;
}

/* ---------- the tools, named rather than shouted ---------- */
.toolset{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.toolset-lab{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(241,239,232,.42);
}
.toolrow{
  list-style:none;margin:0;padding:0;width:100%;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s2) clamp(26px,5vw,72px);
}
.toolrow li{display:flex;align-items:center;gap:11px}
.toolrow .tmark{width:clamp(20px,1.9vw,26px);height:clamp(20px,1.9vw,26px);flex:none;
  fill:rgba(241,239,232,.55);transition:fill .2s ease}
.toolrow li:hover .tmark{fill:rgba(241,239,232,.92)}
.toolrow span{
  font-size:clamp(14px,1.5vw,19px);font-weight:500;letter-spacing:-.012em;
  color:rgba(241,239,232,.58);
  filter:grayscale(1);
  transition:color .2s ease;
}
.toolrow li:hover span{color:rgba(241,239,232,.92)}
.toolset-note{
  margin:0;max-width:46ch;text-align:center;
  font-size:12.5px;line-height:1.6;color:rgba(241,239,232,.38);
}

/* ---------- a feature block gets the same air above as below ---------- */
.duo{border-top:0;margin:var(--s5) 0}

/* the reel has to fill the hero, not letterbox inside it. An iframe ignores
   object-fit, so it is sized to the larger of the two covering dimensions
   and its 16:9 is kept by aspect-ratio. */
.vhero-media .vstage iframe,
.vhero-media .vstage video{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:auto;height:auto;
  min-width:100%;min-height:100%;
  aspect-ratio:16/9;
  border:0;display:block;object-fit:cover;
}
/* sound stays available, out of the way of the type at the foot */
.vhero-media .sndbtn{
  display:flex;top:auto;left:auto;
  /* the reel is full width, so this belongs at the window's edge, on the
     same line as the call below it */
  right:var(--gut);
  bottom:var(--ask-y, var(--s3));
  transform:translateY(50%);
  z-index:3;
}
/* narrow enough and the centred copy would reach the button, so it stands off */
@media (max-width:900px){
  .vhero-in{padding-bottom:calc(var(--s4) + 46px)}
}

/* the same grain that moves over the reels, over the dark field. Overlay
   keeps out of blacks by design, so on a near-black block it is screened
   instead: that is what makes the noise visible the way it is on footage. */
.grainy::after{
  content:"";position:absolute;inset:-50%;
  z-index:0;pointer-events:none;
  opacity:var(--grain-dark);
  mix-blend-mode:screen;
  background-repeat:repeat;
  background-size:var(--grain-size) var(--grain-size);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:grainDrift var(--grain-cycle) steps(1,end) infinite;
}
.grainy{overflow:hidden}
.grainy > *{position:relative;z-index:1}
.grain-off .grainy::after{display:none}
@media (prefers-reduced-motion: reduce){
  .grainy::after{animation:none;transform:translate3d(0,0,0)}
}

/* ---------- home: the chrome is dark, the way the hero under it is ----------
   Home opens on the reel, so the bar above it belongs to the reel rather than
   to the paper below. It stays dark the whole way down, because a bar that
   changes colour halfway through a scroll reads as a glitch, not a device. */
:root[data-view="home"] .masthead{
  width:100vw;margin-left:calc(50% - 50vw);
  /* the reel is full width, so its chrome belongs to the window's edges
     rather than to the column the rest of the page is set on */
  padding-left:var(--gut);
  padding-right:var(--gut);
  background:transparent;
  border-bottom-color:transparent;
  transition:background .28s ease,border-color .28s ease;
  color:#F1EFE8;
}
:root[data-view="home"] .brand{color:#F1EFE8}
:root[data-view="home"] .brand .glyph{background:#F1EFE8}
:root[data-view="home"] .nav a{color:#F1EFE8}
:root[data-view="home"] .masthead .viewlink[aria-current="page"]{color:#F1EFE8}
:root[data-view="home"] .nav a.cta,
:root[data-view="home"] .nav a.cta[aria-current="page"]{background:var(--signal);color:#FBFAFF}
/* home opens on the dark bar, so nothing pale is left above it */
:root[data-view="home"] .frame{padding-top:0}
/* the reel runs up behind the bar, so the picture starts at the very top */
:root[data-view="home"] .vhero{margin-top:calc(-1 * var(--bar-h))}
:root[data-view="home"] .vhero-in{padding-top:calc(var(--bar-h) + var(--s4) / 2)}
/* once the reel is behind you the bar needs its own ground to sit on */
:root[data-view="home"] .masthead.onpaper{color:var(--ink)}
:root[data-view="home"] .masthead.onpaper .brand{color:var(--ink)}
:root[data-view="home"] .masthead.onpaper .brand .glyph{background:var(--ink)}
:root[data-view="home"] .masthead.onpaper .menubtn{color:var(--ink)}

/* ================= THE MENU THAT COMES IN FROM THE RIGHT =================
   Three panels arrive one behind the other, then the names rise into place.
   Hovering a name rolls it over a character at a time, from the middle out.
   All of it is transition-driven, so nothing runs until something changes. */
:root{ --swing:cubic-bezier(.65,.01,.05,.99); }

/* the button: three lines that become a cross */
.menubtn{
  display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
  width:38px;height:38px;padding:0;align-items:center;flex:none;
  background:transparent;border:0;cursor:pointer;color:inherit;
}
.menubtn span{
  display:block;height:2px;width:22px;flex:none;background:currentColor;
  transition:transform .34s var(--swing),opacity .2s ease;
}
.menubtn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menubtn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menubtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.sitemenu{position:fixed;inset:0;z-index:60}
.sitemenu[hidden]{display:none}
.sm-scrim{
  position:absolute;inset:0;background:rgba(6,6,6,.58);
  opacity:0;transition:opacity .5s var(--swing);
}
.sm-panel{
  position:absolute;top:0;right:0;height:100%;
  width:min(560px,100vw);
  display:flex;align-items:center;
  transform:translateX(120%);
  transition:transform .62s var(--swing);
  overflow:hidden;
}
.sm-bg{position:absolute;inset:0;display:block}
.sm-layer{
  position:absolute;inset:0;display:block;
  transform:translateX(101%);
  transition:transform .575s var(--swing);
}
.sm-layer.one{background:var(--signal)}
.sm-layer.two{background:#1B1B18}
.sm-layer.three{background:var(--night)}
.sm-in{
  position:relative;z-index:1;width:100%;
  padding:var(--s5) clamp(28px,6vw,72px);
  color:#F1EFE8;
}
.sm-list{list-style:none;margin:0;padding:0}
.sm-list li{overflow:hidden;padding:2px 0}
.sm-link{
  display:inline-block;color:inherit;text-decoration:none;
  font-size:clamp(26px,3.6vw,44px);line-height:1.18;letter-spacing:-.03em;
  padding:6px 0;
  transform:translateY(140%) rotate(10deg);
  transition:transform .7s var(--swing);
}
.sm-foot{
  margin-top:var(--s4);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);
  opacity:0;transform:translateY(50%);
  transition:opacity .5s ease,transform .5s var(--swing);
}
.sm-cta{
  display:inline-flex;align-items:center;
  background:#F1EFE8;color:var(--night);
  border-radius:999px;padding:11px 20px;text-decoration:none;
  font-family:var(--sans);font-size:clamp(13px,1.15vw,15.5px);
  font-weight:500;letter-spacing:normal;text-transform:none;
}
.sm-cta:hover{background:var(--signal);color:#FBFAFF}
.sm-mail{color:rgba(241,239,232,.6);text-decoration:none;border-bottom:1px solid currentColor}
.sm-mail:hover{color:#F1EFE8}

/* ---- open ---- */
.sitemenu.open .sm-scrim{opacity:1}
.sitemenu.open .sm-panel{transform:translateX(0)}
.sitemenu.open .sm-layer{transform:translateX(0)}
.sitemenu.open .sm-layer.two{transition-delay:.12s}
.sitemenu.open .sm-layer.three{transition-delay:.24s}
.sitemenu.open .sm-link{
  transform:translateY(0) rotate(0);
  transition-delay:calc(.35s + var(--i) * .05s);
}
.sitemenu.open .sm-foot{
  opacity:1;transform:translateY(0);
  transition-delay:calc(.55s + var(--i) * .04s);
}

/* ---- the name rolls over, a character at a time, from the middle out ---- */
.roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top;line-height:1.18}
.roll b{display:block;font-weight:inherit}
.roll b.under{position:absolute;inset:0}
.roll i{
  display:inline-block;font-style:normal;white-space:pre;
  transition:transform .42s ease;
  transition-delay:var(--d);
}
.roll b.under i{transform:translateY(100%)}
.sm-link:hover .roll b.over i,
.sm-link:focus-visible .roll b.over i{transform:translateY(-100%)}
.sm-link:hover .roll b.under i,
.sm-link:focus-visible .roll b.under i{transform:translateY(0)}
.sm-link:focus-visible{outline:0}

@media (prefers-reduced-motion: reduce){
  .sm-panel,.sm-layer,.sm-link,.sm-foot,.sm-scrim,.roll i,.menubtn span{transition-duration:.01ms}
  .sm-link{transform:none}
  .sm-foot{opacity:1;transform:none}
}

/* ================= FOOTER: THE WHOLE SITE, LISTED ================= */
.sitefoot{
  margin-top:var(--s5);
  border-top:1px solid var(--rule);
  padding:var(--s5) 0 var(--s3);
}
.fcols{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--s4) var(--s3);
  padding:0 var(--gut);
}
@media (min-width:700px){ .fcols{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1000px){ .fcols{grid-template-columns:repeat(5,1fr);gap:var(--s3)} }
.fcol-h{
  margin:0 0 var(--s2);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--muted);
}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.fcol a{
  color:var(--ink);text-decoration:none;
  font-size:13.5px;line-height:1.45;
  border-bottom:1px solid transparent;
  transition:border-color .18s ease,color .18s ease;
}
.fcol a:hover{color:var(--signal);border-bottom-color:currentColor}
.fbase{
  margin-top:var(--s5);padding:var(--s3) var(--gut) 0;
  border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:8px var(--s3);justify-content:space-between;
  color:var(--muted);
}

/* the line breaks where it was asked to, but only where there is room for it */
.br-wide{display:none}
@media (min-width:720px){ .br-wide{display:inline} }

/* the call under the reel opens the reel, rather than going anywhere */
.watchbtn{
  font:inherit;color:#FBFAFF;background:transparent;border:0;padding:0 0 2px;
  border-bottom:1px solid rgba(251,250,255,.5);cursor:pointer;
}
.watchbtn:hover,.watchbtn:focus-visible{border-bottom-color:#FBFAFF;outline:0}

/* ---------- the showreel, full size, with sound ---------- */
.lightbox{position:fixed;inset:0;z-index:80}
.lightbox[hidden]{display:none}
.lb-scrim{
  position:absolute;inset:0;background:rgba(4,4,4,.88);
  opacity:0;transition:opacity .4s var(--swing);
}
.lb-frame{
  position:absolute;inset:0;margin:auto;
  width:min(1400px,94vw);height:min(78.75vw,88vh);
  max-height:88vh;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.97);
  transition:opacity .4s var(--swing),transform .5s var(--swing);
}
.lb-media{position:relative;width:100%;aspect-ratio:16/9;max-height:100%;background:#000}
.lb-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.lb-x{
  position:absolute;top:-46px;right:0;width:38px;height:38px;
  background:transparent;border:0;cursor:pointer;color:#F1EFE8;
  display:flex;align-items:center;justify-content:center;
}
.lb-x span{position:absolute;width:22px;height:2px;background:currentColor}
.lb-x span:nth-child(1){transform:rotate(45deg)}
.lb-x span:nth-child(2){transform:rotate(-45deg)}
.lb-x:hover{color:var(--signal)}
@media (max-width:760px){ .lb-x{top:-42px} }

.lightbox.open .lb-scrim{opacity:1}
.lightbox.open .lb-frame{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion: reduce){
  .lb-scrim,.lb-frame{transition-duration:.01ms}
  .lb-frame{transform:none}
}

/* ---------- 02 mirrors 01: words left, picture right ---------- */
@media (min-width:1000px){
  .duo.flip{grid-template-columns:.96fr 1.04fr}
  .duo.flip .duopanel{order:2}
}

/* ---------- offer and booking read as one step ----------
   The purple field makes the offer and names the two ways in; the header
   right under it is where the first of those links lands. */
.contact-meta a[data-to-cal]{font-weight:500}
.hero2.bkstep{padding-top:var(--s4);scroll-margin-top:calc(var(--bar-h, 62px) + 8px)}
.hero2.bkstep h2{font-size:clamp(26px,3.8vw,46px);margin-bottom:14px}
.hero2.bkstep .hero-sub{font-size:clamp(16px,1.7vw,21px)}
.hero2 .hero-sub a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.hero2.bkstep{padding-bottom:var(--s3)}
.hero2:has(+ .booking){padding-bottom:var(--s3)}
/* the longer call to action still has to clear the wordmark on a phone */
@media (max-width:420px){
  .mast-end{gap:12px}
  .mast-end .cta{padding:7px 11px;font-size:12.5px}
}
.contact-meta .cm-or{opacity:.7;line-height:1.6}

/* the purple field carries the same moving grain as the dark block; on a
   mid-tone overlay reads truer than screen, so the colour is not washed */
.contact.grainy::after{mix-blend-mode:overlay;opacity:.55}

/* ---------- the dark band: one quote, set left, in the middle ----------
   Three rows, the outer two equal, so the quote sits on the band's centre
   line while the tools rest on the bottom row. */
.synop{
  display:grid;grid-template-rows:1fr auto 1fr;justify-items:stretch;
  min-height:clamp(480px,78vh,820px);gap:0;
}
.synop-quote{
  grid-row:2;margin:0;max-width:24.5em;justify-self:start;text-align:left;
  font-family:var(--sans);font-weight:400;
  font-size:clamp(22px,2.9vw,44px);line-height:1.12;letter-spacing:-.022em;
  text-wrap:pretty;
}
.synop-quote .q-lead{display:block;color:#F1EFE8}
.synop-quote .q-rest{color:rgba(241,239,232,.5)}
.synop .toolset{grid-row:3;align-self:end;padding-top:var(--s4)}
/* equal air above the quote and between it and the tools: two matching
   spacer rows, and no top padding to tip the balance */
.synop{grid-template-rows:1fr auto 1fr auto;padding-top:0}
.synop .toolset{grid-row:4;padding-top:0}

/* ---------- the masthead call: capitals, a plus, still the purple pill ---------- */
.mast-end .cta{
  text-transform:uppercase;letter-spacing:.02em;font-weight:500;
  font-size:clamp(12.5px,1vw,14px);
  gap:10px;padding:10px 16px 10px 20px;
}
.mast-end .cta::after{
  content:"";flex:none;width:11px;height:11px;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
}
@media (max-width:420px){
  .mast-end .cta{font-size:11.5px;letter-spacing:.01em;gap:7px;padding:8px 11px 8px 13px}
  .mast-end .cta::after{width:9px;height:9px}
}
@media (max-width:380px){
  .mast-end{gap:8px}
  .mast-end .cta{font-size:10.5px;letter-spacing:0;padding:8px 10px}
  .mast-end .cta::after{display:none}
  .brand b{letter-spacing:.14em}
}

/* ---------- every page: logo on the window's left edge, calls on its right ----------
   What home does over the reel, the other pages now do too: the bar spans the
   window, not the column, so the logo and the menu sit at the same place on
   every page. */
.masthead{
  width:100vw;margin-left:calc(50% - 50vw);
  padding-left:var(--gut);padding-right:var(--gut);
}

/* ---------- proof of work: the shot types hang off the chosen parent ----------
   The three parents stay one level across the top. Under the chosen one a
   drawer opens, tinted with its colour. The parent's purple runs out from
   under its tab along the drawer's top and down its far side, framing the
   drawer as the tab's, and the drawer sits a step below the tabs, shaded at the
   top as if slid out from under them. The shot types are set in from the
   purple edge, so their columns never line up under the other parents. On a
   phone the tabs stack, so the drawer moves up to sit right under its parent. */
.jkids{
  position:relative;
  background:color-mix(in srgb, var(--signal) 6%, var(--paper));
  border-top:2px solid var(--signal);
  border-right:4px solid var(--signal);
  box-shadow:inset 0 10px 12px -10px color-mix(in srgb, var(--signal) 45%, transparent);
  padding-left:14px;
}
@media (min-width:760px){ .jkids{padding-left:28px} }
/* the small notch under the chosen tab, pointing down into its drawer */
.jtab{position:relative}
@media (min-width:760px){
  .jtab[aria-selected="true"]::after{
    content:"";position:absolute;left:24px;bottom:-7px;z-index:2;
    border:7px solid transparent;border-bottom:0;border-top-color:var(--signal);
  }
}
@media (max-width:759px){
  .jump{display:flex;flex-direction:column}
  .jtabs{display:contents}
  .jtab{order:3}
  .jtab[aria-selected="true"]{order:1}
  .jkids{order:2;display:grid}
  .jtab + .jtab{border-top:1px solid var(--paper)}
}
/* half as tall again: more room around the quote */
.synop{min-height:clamp(720px,117vh,1230px)}
/* measured equal, it still reads high: the white line carries the weight and
   the tiny label below barely registers, so the upper row gets a little more */
.synop{grid-template-rows:1.15fr auto 1fr auto}

/* =================== FRAMES: one wide frame at a time ===================
   Full width, at the frames' own 16:9. A title list sits bottom left over
   the picture; pointing at a title is enough to change the frame. Between
   frames the lens racks out and back in: see site.js, FRAMES. */
.scope{
  position:relative;
  width:100vw;margin:var(--s5) 0 var(--s5) calc(50% - 50vw);
  background:#050505;overflow:hidden;
}
.scope-stage{position:relative;aspect-ratio:16/9;max-height:92vh;width:100%}
@media (max-width:760px){ .scope-stage{aspect-ratio:4/3} }
.scope-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .9s ease, filter .9s ease, transform 1.2s ease;
}
.scope-img.on{opacity:1}
/* without a GPU the pull is only suggested: the old frame softens and
   breathes as the new one comes through */
.scope:not(.gl) .scope-img:not(.on){filter:blur(10px) brightness(1.1);transform:scale(1.03)}
.scope-gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .3s ease}
.scope.gl .scope-gl{opacity:1}
.scope-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(20deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 32%, rgba(0,0,0,0) 55%);
}
/* static grain, tuned with the panel for now */
:root{ --fg-amount:.8; --fg-size:600px; }
.scope-grain{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:calc(var(--fg-amount) * var(--fg-k, 1));mix-blend-mode:overlay;
  background-repeat:repeat;background-size:var(--fg-size) var(--fg-size);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23f)'/%3E%3C/svg%3E");
}
.scope-titles{
  position:absolute;left:var(--gut);bottom:var(--s3);z-index:2;
  list-style:none;margin:0;padding:0;
}
.scope-t{
  display:block;margin:0;padding:0;border:0;background:none;cursor:default;text-align:left;
  font-family:var(--sans);font-weight:500;
  font-size:clamp(20px,2.3vw,36px);line-height:1.04;letter-spacing:-.035em;
  color:rgba(245,243,238,.42);transition:color .35s ease;
}
.scope-t[aria-current="true"]{color:#F5F3EE}
.scope-t:hover,.scope-t:focus-visible{color:#F5F3EE;outline:0}


/* the call is the same purple pill on every page, its own page included */
.masthead .mast-end .cta[aria-current="page"]{background:var(--signal);color:#FBFAFF}
.masthead .mast-end .cta[aria-current="page"]:hover{background:var(--ink);color:var(--paper)}
/* and in the menu it is set the same way: capitals */
.sm-cta{text-transform:uppercase;letter-spacing:.02em}
/* under its own section head the frame starts right away, like a reel does */
.sec-head + .scope{margin-top:0}

/* ---------- masthead: CONNECT +, then the call with the reel's arrow ---------- */
.mast-end .cta::after{content:none;display:none}
.mast-end .cta{gap:8px;padding:10px 18px}
.cta-arrow{font-weight:400;line-height:1}
.connectbtn{
  display:inline-flex;align-items:center;gap:9px;
  background:none;border:0;padding:10px 4px;cursor:pointer;color:inherit;
  font-family:var(--sans);font-size:clamp(12.5px,1vw,14px);font-weight:500;
  text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;
}
.connectbtn::after{
  content:"";flex:none;width:11px;height:11px;transition:transform .25s ease;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
}
.connectbtn[aria-expanded="true"]::after{transform:rotate(45deg)}
.connectbtn:hover{opacity:.7}
.connectbtn:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
@media (max-width:640px){ .connectbtn{display:none} }

/* ---------- the contact form that drops down from CONNECT ---------- */
.connect{
  position:fixed;z-index:45;
  top:calc(var(--bar-h, 62px) + 6px);right:var(--gut);
  width:min(520px, calc(100vw - 2 * var(--gut)));
  max-height:calc(100vh - var(--bar-h, 62px) - 24px);overflow:auto;
  background:#1C1C1C;color:#F1EFE8;border-radius:14px;
  padding:16px 18px 20px;box-shadow:0 28px 70px rgba(0,0,0,.35);
  transform-origin:top right;
  opacity:0;transform:translateY(-10px) scale(.985);
  transition:opacity .26s ease, transform .34s var(--swing);
}
.connect.open{opacity:1;transform:none}
.cn-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cn-title{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.02em;text-transform:uppercase}
.cn-x{
  width:32px;height:32px;display:grid;place-items:center;cursor:pointer;
  background:none;color:#F1EFE8;border:1px solid rgba(241,239,232,.35);border-radius:6px;
  font-size:20px;line-height:1;
}
.cn-x:hover{background:#F1EFE8;color:#1C1C1C}
.connect .ff{margin:0 0 14px}
.connect .ff label{display:block;margin:0 0 6px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(241,239,232,.62)}
.connect .ff .opt{opacity:.7}
.connect .ff input,.connect .ff textarea{
  display:block;width:100%;box-sizing:border-box;
  background:transparent;color:#F1EFE8;
  border:1px solid rgba(241,239,232,.24);border-radius:8px;
  padding:12px;font:inherit;font-family:var(--sans);font-size:15px;
}
.connect .ff textarea{resize:vertical;min-height:96px}
.connect .ff input::placeholder,.connect .ff textarea::placeholder{color:rgba(241,239,232,.42)}
.connect .ff input:focus,.connect .ff textarea:focus{outline:2px solid #A77BFF;outline-offset:-1px;border-color:transparent}
.cn-submit{
  margin-top:6px;cursor:pointer;border:0;border-radius:999px;
  background:#F5F3EE;color:#111;padding:11px 22px;
  font-family:var(--sans);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;
}
.cn-submit:hover{background:var(--signal);color:#FBFAFF}
.cn-status{margin:12px 0 0;min-height:1.4em;font-size:11px;color:rgba(241,239,232,.7)}
.cn-status.ok{color:#F1EFE8}
.cn-status.bad{color:#FFB4A8}
.sm-connect{
  background:none;border:0;padding:0;cursor:pointer;color:#F1EFE8;
  font-family:var(--sans);font-size:clamp(13px,1.15vw,15.5px);font-weight:500;
  text-transform:uppercase;letter-spacing:.02em;
}
.sm-connect::after{content:" +"}
.sm-connect:hover{opacity:.7}

/* ---------- the booking page rises over the page it was called from ---------- */
.view-under{position:fixed;z-index:0;pointer-events:none;margin:0}
.view-rise{
  position:relative;z-index:1;background:var(--paper);
  animation:viewRise .85s var(--swing) both;
}
@keyframes viewRise{
  from{transform:translateY(100vh);border-radius:18px 18px 0 0;box-shadow:0 -30px 80px rgba(0,0,0,.28)}
  to{transform:none;border-radius:0;box-shadow:0 -30px 80px rgba(0,0,0,0)}
}
@media (prefers-reduced-motion: reduce){ .view-rise{animation:none} }
@media (max-width:420px){
  .mast-end .cta{gap:5px;padding:8px 11px;font-size:11px;letter-spacing:.01em}
  .brand b{letter-spacing:.13em}
}
@media (max-width:380px){ .mast-end .cta{font-size:10.5px;padding:8px 9px;letter-spacing:0} .brand b{letter-spacing:.1em} }

/* without the GPU the grain dips through the dissolve the same way */
.scope.dip .scope-grain{animation:grainDip .9s ease both}
@keyframes grainDip{0%{opacity:var(--fg-amount)}35%,60%{opacity:0}100%{opacity:var(--fg-amount)}}
@media (prefers-reduced-motion: reduce){ .scope.dip .scope-grain{animation:none} }

/* ---------- moving between pages: fade and lift out, settle in ---------- */
.view-leave{opacity:0;transform:translateY(-6px);transition:opacity .26s ease, transform .26s ease}
.view-enter{animation:viewEnter .75s cubic-bezier(.2,.7,.1,1) both}
@keyframes viewEnter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){ .view-leave{transition:none} .view-enter{animation:none} }

/* ---------- the calendar, a notch easier to read ---------- */
.bk-month{font-size:15px;font-weight:500;letter-spacing:.12em}
.booking .tlab{font-size:12px;font-weight:500;letter-spacing:.14em}
.bk-dow span{font-size:11px;color:color-mix(in srgb, var(--ink) 62%, var(--paper))}
.bk-day{font-size:13.5px;border-color:color-mix(in srgb, var(--ink) 22%, var(--paper))}
.bk-day.off{opacity:.55;color:color-mix(in srgb, var(--ink) 55%, var(--paper))}
.bk-nav:disabled{opacity:.4}
.bk-chosen{color:color-mix(in srgb, var(--ink) 70%, var(--paper));font-size:12.5px}
.bk-note{font-size:11.5px;color:color-mix(in srgb, var(--ink) 65%, var(--paper))}
.booking .ff label{color:color-mix(in srgb, var(--ink) 72%, var(--paper))}

/* ---------- how we work: the typical process, as a playbook ----------
   The home blocks' two columns: words and an open-one-at-a-time list on the
   left, one frame on the right. Opening a step closes the one before. */
.proc .duobody{padding-bottom:0}
.proc-head .lede{max-width:44ch;font-size:15.5px;line-height:1.62;margin:0}
@media (min-width:1100px){ .proc-head .lede{font-size:16.5px} }
.proc-list{margin-top:auto;padding-top:var(--s4)}
.proc .duorow{border-bottom:0}
.proc-item:last-child{border-bottom:1px solid var(--rule-soft)}
.proc .duorow[aria-expanded="true"] i{opacity:1}
.proc .duorow[aria-expanded="true"] i::after{transform:scaleY(0)}
.proc .duorow i::after{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.proc .duorow[aria-expanded="true"] b{color:var(--signal)}
.proc-text{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.1,1)}
.proc-item.open .proc-text{grid-template-rows:1fr}
.proc-text > div{overflow:hidden}
.proc-text p{
  margin:0;padding:0 0 var(--s2) 25px;max-width:46ch;
  font-size:15px;line-height:1.6;color:color-mix(in srgb, var(--ink) 72%, var(--paper));
}
@media (prefers-reduced-motion: reduce){ .proc-text,.proc .duorow i::after{transition:none} }