/* Arial sized to Aktiv Grotesk's width at each weight, with Aktiv's line metrics: text paints at once, then
   Aktiv swaps in (the kit is font-display:swap) without re-wrapping the first screen. */
@font-face{font-family:'Aktiv Fallback';src:local('Arial'),local('ArialMT'),local('Arimo');font-weight:1 450;size-adjust:101.9%;ascent-override:97.84%;descent-override:27.77%;line-gap-override:0%}
@font-face{font-family:'Aktiv Fallback';src:local('Arial'),local('ArialMT'),local('Arimo');font-weight:451 599;size-adjust:103.4%;ascent-override:96.42%;descent-override:27.37%;line-gap-override:0%}
@font-face{font-family:'Aktiv Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Arimo Bold'),local('Arimo-Bold');font-weight:600 1000;size-adjust:99.4%;ascent-override:100.30%;descent-override:28.47%;line-gap-override:0%}
@font-face{font-family:'Instrument Serif';src:url('../fonts/InstrumentSerif-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('../fonts/InstrumentSerif-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
*{box-sizing:border-box}
body{margin:0;font-family:'aktiv-grotesk','Aktiv Fallback',Helvetica,Arial,sans-serif;color:#1A1918;background-color:#F3F2EF;-webkit-font-smoothing:antialiased}
:where(h1,h2,h3,h4,h5,h6){font-weight:400}
a{color:#1A1918;text-decoration:none}
a:hover{color:#1A1918}
::selection{background:#1A1918;color:#FAFAFA}

/* ---- nav bar: floating white bar, inset from the page edge ---- */
.page{background:transparent;position:relative}
.nav{position:sticky;top:18px;z-index:50;display:flex;align-items:center;height:clamp(54px,3.8vw,62px);width:calc(100% - 88px);max-width:960px;margin:18px auto 0;padding:0 10px 0 24px;
  background:#FFFFFF;border-radius:10px;
  box-shadow:0 1px 0 rgba(12,12,12,.04),0 14px 36px -20px rgba(12,12,12,.30)}
.nav-logo{flex:1 1 0;display:flex;align-items:center}
.nav-logo a{display:flex;align-items:center}
.nav-logo img{height:clamp(24px,1.75vw,28px);width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-cta{flex:1 1 0;display:flex;align-items:center;justify-content:flex-end;gap:12px}
.panel-services{width:541px}
.panel-aside{width:230px;margin-left:25px}

/* ---- nav links (Darkroom: 14px / 16.8px, box h40, pad 4px 16px, radius 8px, 10px gaps) ---- */
.nl{display:inline-flex;align-items:center;gap:7px;height:38px;padding:4px 13px;border-radius:10px;font-size:15px;line-height:1;font-weight:500;color:#1A1918;transition:background-color .18s}
.nl:hover{background:rgba(12,12,12,.06)}
.nl .cnt{align-self:flex-start;margin:6px 0 0 -4px;font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-size:9.5px;line-height:1;font-weight:400;color:rgba(12,12,12,.55);vertical-align:baseline}
.nl .chev{width:11px;height:8px;flex:none;transition:transform .22s}
.dw:hover .nl .chev{transform:rotate(180deg)}

/* ---- mega panel (Darkroom: 850x303, radius 10, shadow 0 10 20 rgba(0,0,0,.05), 20px below) ---- */
.dw{position:relative;display:flex}
.dw::after{content:'';position:absolute;top:100%;left:-40px;right:-40px;height:22px}
.panel{position:absolute;top:calc(100% + 20px);left:50%;margin-left:-425px;width:850px;padding:31px 28px;display:flex;align-items:stretch;background:#FFFFFF;border-radius:10px;box-shadow:rgba(0,0,0,.05) 0 10px 20px 0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s;z-index:60}
.dw:hover .panel,.dw:focus-within .panel{opacity:1;visibility:visible;transform:translateY(0)}
.pl{font-size:12.5px;line-height:16.4px;color:#1A1918}
.rule{width:1px;align-self:stretch;margin:-10px 0;background:#EBEBEB;flex:none}
.grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:20px;row-gap:20px;width:510px;margin-top:19px}
.item{display:block;border-radius:6px}
.it-t{font-size:14px;line-height:16.8px;color:#1A1918;transition:color .15s}
.it-s{font-size:12px;line-height:15.6px;color:rgba(12,12,12,.50);margin-top:4px}
.item:hover .it-t{text-decoration:underline;text-underline-offset:3px}
.shot{width:230px;height:135px;object-fit:cover;border-radius:6px;display:block;margin-top:18px}
.explore{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;line-height:15.6px;color:#1A1918}
.explore svg{width:8px;height:8px;flex:none}
.explore:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- hero ---- */
/* full-screen film: fills everything below the menu bar */
.hero{position:relative;aspect-ratio:2.35 / 1;margin:0;overflow:hidden;background:#1A1918}
.hero-text{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px}
/* pixel scroll cue, sitting on the bottom edge of the film */
.hero-cue{position:absolute;left:50%;bottom:22px;z-index:4;transform:translateX(-50%);
  display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  color:rgba(255,255,255,.92);filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));
  transition:color .2s,background-color .2s;
  animation:cue 2.1s ease-in-out infinite}
.hero-cue:hover,.hero-cue:focus-visible{color:#FFFFFF;background:rgba(255,255,255,.14)}
.hero-cue svg{display:block;width:30px;height:30px}
@keyframes cue{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
@media (prefers-reduced-motion: reduce){.hero-cue{animation:none}}
/* the film fills the screen, so bright frames need a scrim to keep the type legible */
.hero::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),linear-gradient(180deg,rgba(12,12,12,.42) 0%,rgba(12,12,12,.14) 42%,rgba(12,12,12,.5) 100%)}
.h1{font-size:clamp(30px,3.1vw,49px);line-height:1.06;letter-spacing:-.025em;font-weight:400;color:#FAFAFA;margin:0}
/* phone-only line breaks in the hero, so every browser sets the same lines */
.h1 br.m,.sub br.m{display:none}
.hi{font-family:'Instrument Serif',Georgia,serif;font-style:italic;letter-spacing:0}
.sub{margin:14px 0 0;font-size:16px;line-height:1.55;color:rgba(250,250,250,.8);letter-spacing:-.005em}
.btns{display:flex;align-items:center;gap:10px;margin-top:22px}
.b{display:inline-flex;align-items:center;gap:9px;height:44px;padding:4px 4px 4px 14px;border-radius:2.4px;font-size:15.75px;line-height:15.75px;letter-spacing:-.01em;transition:background-color .2s}
.b-chip{position:relative;width:36px;height:36px;border-radius:2.4px;flex:none;overflow:hidden;transition:background-color .2s}
.b-chip svg{position:absolute;top:8px;left:8px;width:20px;height:20px;transition:transform .3s cubic-bezier(.65,0,.35,1)}
.b-chip .a2{transform:translate(-20px, 20px)}
.b:hover .b-chip .a1{transform:translate(20px, -20px)}
.b:hover .b-chip .a2{transform:translate(0, 0)}
.b-light{background:#FAFAFA;color:#1A1918}
.b-light:hover{background:#E4E2DB;color:#1A1918}
.b-light .b-chip{background:#FF0003}
.b-light .b-chip svg{fill:#FAFAFA}
.b-light:hover .b-chip{background:#FF0003}

/* ---- media container ---- */
.media{position:absolute;inset:0;z-index:1;background-color:#1A1918}
.media video{width:100%;height:100%;object-fit:cover;display:block}

/* ---- CTA (Monolog: h32, bg #FAFAFA, radius 2.4, pad 3.94/3.94/3.94/7.75, gap 7.75, 15.75px, ls -.01em; chip 24 #0C0C0C) ---- */
.cta{display:inline-flex;align-items:center;gap:7.75px;height:32px;padding:3.94px 3.94px 3.94px 7.75px;border-radius:2.4px;background:#FAFAFA;color:#1A1918;font-size:15.75px;line-height:15.75px;letter-spacing:-.01em;transition:background-color .2s}
.cta:hover{background:#E4E2DB;color:#FAFAFA}
.chip{position:relative;width:24px;height:24px;border-radius:2.4px;background:#FF0003;flex:none;overflow:hidden;transition:background-color .2s}
.cta:hover .chip{background:#FF0003}
.chip svg{position:absolute;top:4px;left:4px;width:16px;height:16px;fill:#FAFAFA;transition:transform .3s cubic-bezier(.65,0,.35,1)}
.chip .a2{transform:translate(-16px, 16px)}
.cta:hover .chip .a1{transform:translate(16px, -16px)}
.cta:hover .chip .a2{transform:translate(0, 0)}

/* ---- nav right side: text link with arrow + black pill ---- */
.arr{width:15px;height:15px;flex:none}
.nav-txt{white-space:nowrap;display:inline-flex;align-items:center;gap:14px;height:40px;padding:0 18px 0 20px;border-radius:999px;border:1px solid rgba(26,25,24,.28);font-size:15px;line-height:1;font-weight:500;color:#1A1918;transition:border-color .2s,background-color .2s}
.nav-txt:hover{border-color:#1A1918;background:rgba(26,25,24,.04)}
.nav-txt .arr{transition:transform .25s cubic-bezier(.65,0,.35,1)}
.nav-txt:hover .arr{transform:translate(2px,-2px)}
.nav-cta .cta{white-space:nowrap;display:inline-flex;align-items:center;gap:14px;height:40px;padding:0 18px 0 20px;border-radius:999px;background:#1A1918;color:#FAFAFA;font-size:15px;line-height:1;font-weight:500;letter-spacing:-.005em;transition:background-color .2s}
.nav-cta .cta:hover{background:#000000;color:#FAFAFA}
.nav-cta .cta .arrs{position:relative;width:15px;height:15px;overflow:hidden;flex:none}
.nav-cta .cta .arr{position:absolute;top:0;left:0;transition:transform .3s cubic-bezier(.65,0,.35,1)}
.nav-cta .cta .a2{transform:translate(-16px,16px)}
.nav-cta .cta:hover .a1{transform:translate(16px,-16px)}
.nav-cta .cta:hover .a2{transform:translate(0,0)}

/* ---- hero button: white pill, same family as the menu bar ---- */
.hb{display:inline-flex;align-items:center;gap:14px;height:40px;padding:0 18px 0 20px;border-radius:999px;background:#FFFFFF;color:#1A1918;font-size:15px;line-height:1;font-weight:500;letter-spacing:-.005em;transition:background-color .2s,transform .2s}
.hb:hover{background:#F3F2EF;color:#1A1918}
.hb .arrs{position:relative;width:15px;height:15px;overflow:hidden;flex:none}
.hb .arr{position:absolute;top:0;left:0;transition:transform .3s cubic-bezier(.65,0,.35,1)}
.hb .a2{transform:translate(-16px,16px)}
.hb:hover .a1{transform:translate(16px,-16px)}
.hb:hover .a2{transform:translate(0,0)}
/* hero button: solid white, like the Contact button in the menu */
.hero .hb{box-shadow:0 14px 40px -22px rgba(12,12,12,.45)}

/* ---- gallery strip: 16:9 / 9:16 / 4:5 repeating ---- */
.gallery-band{min-height:100vh;display:flex;align-items:flex-end}
.gallery{width:100%;display:flex;align-items:flex-start;gap:10px;padding:0 17px;margin-bottom:17px}
.g-tile{border-radius:8px;background:#EDEBE4;overflow:hidden}
.g-169{flex:1.77778 1 0;aspect-ratio:16 / 9}
.g-916{flex:0.5625 1 0;aspect-ratio:9 / 16}
.g-45{flex:0.8 1 0;aspect-ratio:4 / 5}

/* ---- client logo marquee ---- */
/* sits under the services, which already leave room above it; the dark card of quotes follows */
.clients{padding:clamp(8px,1.5vh,16px) 0 clamp(60px,9vh,88px);background:#FAFAF8}
/* when the logos follow the film they need a breath below the black */
.reel + .clients,.belief-sequence + .clients{padding-top:clamp(40px,5.1vh,54px)}
.clients-label{text-align:center;color:#57564f;margin-bottom:26px}
.clients-ink{position:relative;display:inline-block;padding:0 3px 9px;font-family:'Caveat',cursive;font-size:25px;font-weight:500;line-height:1;letter-spacing:0;transform:rotate(-4deg)}
.clients-ink svg{position:absolute;left:0;bottom:0;width:100%;height:9px;stroke:#2955DF;stroke-width:1.5;stroke-linecap:round;opacity:.95}
/* the logos run exactly as wide as the service cards below (.svc: 1240px less 17px each side) and are gone by their edges */
.marquee{--logo-gap:54px;--logo-width:192px;--fade:linear-gradient(90deg,transparent 0,rgba(0,0,0,.3) 6%,rgba(0,0,0,.72) 11%,#000 17%,#000 83%,rgba(0,0,0,.72) 89%,rgba(0,0,0,.3) 94%,transparent 100%);overflow:hidden;width:calc(min(1240px,100%) - 34px);margin:0 auto;padding:0;-webkit-mask-image:var(--fade);mask-image:var(--fade)}
.marquee-track{display:flex;align-items:center;width:max-content;animation:marq 84s linear infinite}
.client-logo-set{display:flex;align-items:center;gap:var(--logo-gap);list-style:none;margin:0;padding:0 var(--logo-gap) 0 0;flex:none}
.client-logo{display:flex;align-items:center;flex:none;width:var(--logo-width)}
.client-logo-art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:90px}
.marquee-track img{filter:none;opacity:1;max-height:60px;max-width:176px;width:auto;height:auto;display:block}
.client-logo-igne-ferro img{width:176px}
.client-logo-harley img{height:82px;max-height:none}
.client-logo-jlr img{height:50px}
.client-logo-alfa-romeo img{height:60px}
.client-logo-score-bet img{width:176px;max-height:none}
.client-logo-branch{font:500 12px/1.1 'aktiv-grotesk','Aktiv Fallback',Helvetica,Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#222;white-space:nowrap}
.client-logo-maserati .client-logo-branch{font-size:11px;letter-spacing:.23em}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.marquee-track{animation:none}.client-logo-set[aria-hidden="true"]{display:none}}

/* ============================================================
   LOWER PAGE — short sections, a visual in every one
   ============================================================ */
/* section furniture: a mono index line, and a head row with a lede or a button on the right */
.idx{display:inline-flex;align-items:center;gap:10px;font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(12,12,12,.55);white-space:nowrap}
.idx::before{content:'';width:20px;height:1px;background:rgba(12,12,12,.4);flex:none}
.idx-light{color:rgba(255,255,255,.82)}.idx-light::before{background:rgba(255,255,255,.6)}
.sec-row{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(24px,4vw,64px);margin:0 0 clamp(26px,3.6vh,40px)}
.sec-row .sec-head{margin:0;max-width:640px}
.sec-row .sec-h{margin-top:16px;font-size:clamp(28px,2.58vw,40px);line-height:1.08;letter-spacing:-.024em}
.sec-row .sec-lede{margin:0;max-width:38ch;font-size:15px;line-height:1.55;padding-bottom:6px}
.sec-aside{flex:none;padding-bottom:6px}

/* ---- why nowa: four small portraits, each carrying one reason ---- */
.why{background:#FAFAF8}
.why-in{max-width:1280px;margin:0 auto;padding:clamp(56px,6.8vh,94px) 17px}
.why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.why-med{position:relative;aspect-ratio:4 / 5;border-radius:10px;overflow:hidden;background:#EAE9E5}
.why-med img,.why-med video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.why-tile:hover .why-med img,.why-tile:hover .why-med video{transform:scale(1.035)}
.why-chip{position:absolute;left:12px;top:12px;width:32px;height:32px;border-radius:8px;background:var(--c);color:var(--fg);
  display:grid;place-items:center;box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
.why-chip svg{display:block;width:13px;height:13px}
.why-n{position:absolute;right:13px;top:15px;font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.16em;
  color:rgba(255,255,255,.88);text-shadow:0 1px 4px rgba(0,0,0,.5)}
.why-tile h3{margin:16px 0 0;font-size:16px;line-height:1.25;letter-spacing:-.012em;font-weight:400;color:#1A1918}
.why-tile p{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:rgba(12,12,12,.55);max-width:30ch}

/* ---- how it runs: four steps, each with a frame from the floor ---- */
.proc{background:#FFFFFF}
.proc-in{max-width:1280px;margin:0 auto;padding:clamp(56px,6.8vh,94px) 17px}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.step{display:flex;flex-direction:column}
.step-med{aspect-ratio:16 / 10;border-radius:8px;overflow:hidden;background:#EAE9E5}
.step-med img,.step-med video{width:100%;height:100%;object-fit:cover;display:block}
.step-row{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:12px;border-top:1px solid rgba(12,12,12,.14)}
.step-n{display:inline-flex;align-items:center;gap:8px;font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(12,12,12,.62)}
.step-n i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.step-t{font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(12,12,12,.4)}
.step h3{margin:12px 0 0;font-size:clamp(18px,1.43vw,22px);line-height:1.15;letter-spacing:-.018em;font-weight:400;color:#1A1918}
.step p{margin:8px 0 0;font-size:14px;line-height:1.5;color:rgba(12,12,12,.58)}

/* ---- statement: one line over a film, inset like the hero ---- */
.say2{position:relative;margin:clamp(36px,4.25vh,58px) 18px;border-radius:10px;overflow:hidden;background:#0C0C0C;color:#FAFAFA;
  min-height:clamp(340px,56vh,600px);display:flex;align-items:flex-end}
.say2-media{position:absolute;inset:0}
.say2-media video{width:100%;height:100%;object-fit:cover;display:block}
.say2::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,12,12,.04) 0%,rgba(12,12,12,.12) 45%,rgba(12,12,12,.74) 100%)}
.say2-in{position:relative;z-index:1;width:100%;max-width:1280px;margin:0 auto;padding:clamp(30px,5vh,56px) clamp(20px,3vw,44px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(24px,4vw,64px);flex-wrap:wrap}
.say2-h{margin:0;font-size:clamp(28px,2.92vw,45px);line-height:1.06;letter-spacing:-.026em;font-weight:400;max-width:18ch;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.say2-h em{font-style:italic;font-family:'Instrument Serif',Georgia,serif;letter-spacing:0}
.say2-m{font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.72);white-space:nowrap}

/* ---- selected work: tiles play on hover ---- */
.band.work{padding-top:clamp(48px,5.95vh,83px);padding-bottom:clamp(56px,6.8vh,94px)}
.t-med{position:relative}
.t-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease;background:transparent}
.t-916 .t-vid{left:50%;width:auto;aspect-ratio:9 / 16;transform:translateX(-50%);object-fit:cover}
.tile.is-playing .t-vid{opacity:1}
.tile.is-playing .t-med img{transform:none}

/* ---- numbers over a plate ---- */
/* ---- kind words: static handwritten quotes, outline stars, and quiet name labels ---- */
.kind{position:relative;scroll-margin-top:100px;background:#FAFAF8;padding:clamp(28px,4vw,56px) 0 clamp(36px,5vw,64px)}
.kind-in{max-width:1240px;margin:0 auto;padding:0 17px;box-sizing:border-box}
.kind-hand{margin:0 0 22px 64px;font-family:'Caveat',cursive;font-size:clamp(24px,1.89vw,28px);line-height:1;color:#2955DF;transform:rotate(-2.5deg);transform-origin:left bottom;width:max-content}
.kind-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,44px);align-items:start}
.kind-notes-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rv{position:relative;display:flex;align-items:flex-start;gap:14px;margin:0;color:#1A1918;transform:rotate(calc(-1.1deg + var(--i) * 2.2deg));transform-origin:left top}
.rv:nth-child(2){margin-top:clamp(20px,3vw,44px)}
.rv-avatar{display:block;flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:center 40%;background:#EFEEEA;margin-top:6px}
.rv-initial{display:flex;align-items:center;justify-content:center;font-family:'Caveat',cursive;font-size:27px;font-weight:500;line-height:1;color:#fff;background:#2955DF;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.rv-amber .rv-initial{background:#FFB020;color:#1A1208}
.rv-lime .rv-initial{background:#C8F24A;color:#1A1E08}
.rv-bubble{position:relative;flex:1;min-width:0;padding:18px 22px 20px;background:#fff;border-radius:22px;border-top-left-radius:6px;box-shadow:0 1px 2px rgba(12,12,12,.05),0 18px 40px -28px rgba(12,12,12,.35)}
.rv-bubble::before{content:'';position:absolute;left:-7px;top:14px;width:14px;height:14px;background:#fff;border-radius:2px;transform:rotate(45deg)}
.rv-head{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;margin:0 0 12px}
.rv-name{font-size:15px;font-weight:500;line-height:1.3}
.rv-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#2955DF}
.rv-check svg{width:10px;height:10px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rv-role{flex-basis:100%;font-size:13px;line-height:1.4;color:#56564f;font-weight:400}
.rv-q{margin:0 0 14px;font-family:'aktiv-grotesk','Aktiv Fallback',Helvetica,Arial,sans-serif;font-weight:400;font-size:clamp(16px,1.2vw,19px);line-height:1.5;color:#1A1918;text-wrap:pretty}
.rv-q p{margin:0}
.rv-q p::before{content:'\201C'}.rv-q p::after{content:'\201D'}
.rv-foot{display:flex;align-items:center;gap:14px;font-size:13px;color:#7b7972}
.rv-stars{display:inline-flex;gap:3px}
.rv-stars svg{display:block;width:13px;height:13px}
.rv-stars path{fill:#FFB020;stroke:#1A1918;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.rv-react{position:absolute;right:18px;bottom:-15px;padding:5px 9px;line-height:1;display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:15px;color:#1A1918;cursor:pointer;background:#fff;border:1px solid #ECEAE4;border-radius:999px;box-shadow:0 4px 12px -6px rgba(12,12,12,.3)}
.rv-react{transition:transform .18s,border-color .18s,background-color .18s}
.rv-react:hover{transform:scale(1.08)}
.rv-react[aria-pressed="true"]{background:#EEF2FF;border-color:#2955DF}
.rv-count{font-size:12px;font-weight:500;color:#2955DF}
.rv-count:empty{display:none}
.rv-react.pop .rv-emo{animation:rv-pop .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes rv-pop{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
.rv-float{position:absolute;left:50%;bottom:60%;pointer-events:none;font-size:16px;animation:rv-float 1.1s ease-out both}
@keyframes rv-float{0%{opacity:0;transform:translate(-50%,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),-70px) rotate(var(--r)) scale(1.1)}}
.rv-react:focus-visible{outline:2px solid #2955DF;outline-offset:3px}
@media (max-width:900px){
  .kind-hand{margin-left:0}
  .kind-notes,.kind-notes-3{grid-template-columns:minmax(0,1fr);gap:30px}
  .rv{transform:none}
  .rv:nth-child(2){margin-top:0}
}

/* ---- on set: a slow filmstrip of stills ---- */
.onset{background:#FAFAF8;padding:clamp(48px,5.95vh,79px) 0 clamp(56px,8vh,104px)}
.onset-strip{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.onset-track{display:flex;gap:12px;width:max-content;animation:onset 150s linear infinite}
.onset-track img{height:clamp(180px,26vh,300px);width:auto;display:block;border-radius:8px;background:#EAE9E5}
@keyframes onset{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 6px))}}

@media (max-width:900px){
  .sec-row{display:block}
  .sec-row .sec-lede{margin-top:14px;padding-bottom:0}
  .sec-aside{margin-top:18px;padding-bottom:0}
  .why-grid,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .say2{margin-left:12px;margin-right:12px;border-radius:8px;min-height:0}
  .say2{min-height:clamp(300px,52vh,440px)}
  .onset-track img{height:150px}
  .onset-note{display:none}
}
@media (prefers-reduced-motion: reduce){
  .onset-track{animation:none}
  .why-med img,.why-med video,.t-vid{transition:none}
}

.intro{background-color:#FAFAF8}
.intro-in{max-width:1280px;margin:0 auto;padding:clamp(80px,10.2vh,133px) 17px;
  display:flex;align-items:flex-start;gap:clamp(40px,6vw,100px)}
.intro-head{flex:1 1 0;min-width:0;max-width:540px}
.eyebrow{display:block;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(12,12,12,.44)}
.intro-h{margin:18px 0 0;font-size:clamp(32px,2.92vw,45px);line-height:1.12;letter-spacing:-.018em;font-weight:400;color:#1A1918}
.intro-p{margin:22px 0 0;font-size:16px;line-height:1.6;letter-spacing:.005em;color:rgba(12,12,12,.62);max-width:540px}
.intro-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.pill{position:relative;display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 34px;border-radius:8px;font-size:15px;line-height:1;
  transition:background-color .18s,color .18s}
.pill-solid{background:#FAFAFA;color:#1A1918}
.pill-solid:hover{background:#E4E2DB;color:#1A1918}
.pill-ghost{color:#1A1918}
.pill-ghost::after{content:'';position:absolute;inset:0;border:1px solid rgba(12,12,12,.35);border-radius:8px}
.pill-ghost:hover{background:#FAFAFA;color:#1A1918}

.offers{flex:1 1 0;min-width:0;max-width:560px;margin:0;padding:0;list-style:none}
.offers li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:0 20px;
  padding:24px 0 26px;border-top:1px solid rgba(12,12,12,.14)}
.offers li:last-child{border-bottom:1px solid rgba(12,12,12,.14)}
.o-n{grid-column:1;grid-row:1;font-size:10.5px;letter-spacing:.16em;color:rgba(12,12,12,.44);padding-top:5px}
.offers h3{grid-column:2;margin:0;font-size:17.5px;line-height:1.28;letter-spacing:-.012em;font-weight:400;color:#1A1918}
.offers p{grid-column:2;margin:8px 0 0;font-size:14.5px;line-height:1.6;color:rgba(12,12,12,.62)}
@media (max-width:900px){.intro-in{display:block}.offers{max-width:none;margin-top:clamp(48px,7vh,80px)}}

/* ---- services: scroll through the folders once, then browse the completed stack by tab ---- */
.svc-wrap{background-color:#FAFAF8;padding-bottom:clamp(48px,6.8vh,86px)}
.svc{--tabh:28px;--tabw:clamp(100px,11vw,150px);--cr:18px;
  --pad:clamp(20px,2vw,30px);--cardh:clamp(340px,44vh,452px);
  --stack:max(calc(76px + var(--tabh)), calc(50vh - var(--cardh) / 2));
  max-width:1240px;margin:0 auto;padding:0 17px;
  padding-top:calc(var(--tabh) + clamp(20px,3vh,36px))}
.svc-tail{height:clamp(40px,8vh,90px)}
.card{position:sticky;top:var(--stack);
  border-radius:var(--cr);padding:var(--pad);height:var(--cardh);box-sizing:border-box;
  background:var(--c);color:var(--fg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(12,12,12,.06),0 28px 60px -30px rgba(12,12,12,.42)}
.card-body{height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);gap:clamp(18px,2.2vw,32px);align-items:stretch;color:var(--fg)}
.card + .card{margin-top:clamp(56px,7.65vh,86px)}
.card-body:hover,.card-body:focus-visible,.card .tab:hover{color:var(--fg)}
.card .tab{position:absolute;border:0;top:calc(-1 * var(--tabh));left:calc(var(--i) * (var(--tabw) + 4px));
  width:var(--tabw);height:calc(var(--tabh) + var(--cr));
  background:var(--c);color:var(--fg);border-radius:10px 10px 0 0;
  display:flex;align-items:flex-start;padding:9px 0 0 12px;white-space:nowrap;overflow:hidden;
  font:inherit;font-size:10px;line-height:1;letter-spacing:.15em;text-transform:uppercase;text-align:left;cursor:pointer}
.card .tab:disabled{cursor:default}
.card .tab:focus-visible{outline:2px solid var(--fg);outline-offset:-5px}
.card-body:focus-visible{outline:2px solid var(--fg);outline-offset:6px;border-radius:4px}
.svc.is-locked{display:grid;grid-template-columns:minmax(0,1fr);overflow-anchor:none}
.svc.is-locked .card{grid-area:1 / 1;position:relative;top:auto;margin-top:0;z-index:0}
.svc.is-locked .card.is-active{z-index:1}
.svc.is-locked .card:not(.is-active) .card-body{visibility:hidden;pointer-events:none}
.svc.is-locked .svc-tail{grid-area:2 / 1}
.card-left{min-width:0;display:flex;flex-direction:column;padding:6px 0 2px 4px}
.card h3{margin:0;font-size:clamp(22px,1.76vw,28px);line-height:1.06;letter-spacing:-.026em;font-weight:400}
.card-copy{margin:9px 0 0;font-size:14.5px;line-height:1.5;opacity:.8;width:100%;max-width:none}
/* the copy sits on one line, wrapping only when the card is too narrow */
.card-fit{display:grid;width:max-content;max-width:100%}
.card-copy>span{display:inline}
.card-tags{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:0;list-style:none}
.card-tags li{font-size:10px;letter-spacing:.1em;text-transform:uppercase;line-height:1;
  padding:7px 12px 6px;border-radius:99px;background:var(--slot)}
.card-notes{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.45;opacity:.85;max-width:36ch}
.card-notes li{position:relative;padding-left:16px}
.card-notes li::before{content:'';position:absolute;left:0;top:.66em;width:8px;height:1px;background:currentColor;opacity:.7}
.card-stats{margin-top:auto;padding-top:22px;display:flex;flex-wrap:wrap;gap:12px clamp(16px,2.2vw,32px)}
.card-stats b{display:block;font-size:clamp(20px,1.55vw,24px);font-weight:400;letter-spacing:-.03em;line-height:1}
.card-stats span{display:block;margin-top:7px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.62}
/* the film fills its side of the card, edge to edge */
.card-med{min-width:0;min-height:0;height:100%;overflow:hidden;border-radius:calc(var(--cr) - 8px);background:var(--slot)}
.card-med video,.card-med img{width:100%;height:100%;object-fit:cover;display:block;background:#111}
.card-med.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:8px;background:none;overflow:hidden;border-radius:0}
.card-med.strip video{border-radius:calc(var(--cr) - 8px)}
.card-med.portrait{display:flex;justify-content:center;background:none;border-radius:0}
.card-med.portrait video{width:auto;max-width:100%;aspect-ratio:9 / 16;object-fit:cover;border-radius:calc(var(--cr) - 8px)}

/* The web card shows a real site screenshot with its own navigation and content. */
.mock{position:relative;display:flex;flex-direction:column;background:#FAFAF8;color:#1A1918}
.mk-bar{flex:none;height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#EFEEEA;border-bottom:1px solid rgba(12,12,12,.08)}
.mk-bar i{width:8px;height:8px;border-radius:50%;background:rgba(12,12,12,.16)}
.mk-url{flex:1 1 auto;margin-left:8px;height:18px;border-radius:5px;background:#FAFAF8;
  font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-size:10px;line-height:18px;padding:0 9px;color:rgba(12,12,12,.55)}
.mk-site{flex:1 1 auto;min-height:0;position:relative;overflow:hidden}
.mock .mk-site img{width:100%;height:100%;display:block;object-fit:cover;object-position:center top;background:#fff}

/* ---- the service hues: red, blue, amber, lime, plus a charcoal for the commercials card ---- */
.c-ink{--c:#1A1918;--fg:#F4F3F0;--slot:rgba(255,255,255,.14)}
.s-ink{--c:#1A1918;--fg:#F4F3F0}
.hero-p-ink{box-shadow:inset 0 4px 0 #1A1918}
.d-ink{background:#1A1918}
.pr-ink{--c:#1A1918}
.c-red{--c:#FF0003;--fg:#FFFFFF;--slot:rgba(255,255,255,.20)}
.c-blue{--c:#2955DF;--fg:#F4F5FF;--slot:rgba(255,255,255,.17)}
.c-amber{--c:#FFB020;--fg:#1A1208;--slot:rgba(23,18,8,.13)}
.c-lime{--c:#C8F24A;--fg:#1A1E08;--slot:rgba(26,30,8,.14)}



/* ============================================================
   SITE-WIDE COMPONENTS  (work, services, case studies, about,
   journal, rates, contact)
   ============================================================ */

/* --- shared band + section head --- */
.band{max-width:1280px;margin:0 auto;padding:clamp(82px,9.35vh,133px) 17px}
.band-tight{padding-top:clamp(44px,5.1vh,70px);padding-bottom:clamp(44px,5.1vh,70px)}
.band-in{width:100%}
.split{display:flex;align-items:flex-start;gap:clamp(40px,6vw,100px)}
.split-l{flex:1 1 0;min-width:0;max-width:460px}
.split > .offers,.split > .cs-body,.split > .acc,.split > .form{flex:1 1 0;min-width:0}
.sec-head{max-width:700px;margin:0 0 clamp(34px,4.6vh,56px)}
.sec-head-wide{max-width:none}
.sec-h{margin:15px 0 0;font-size:clamp(26px,2.11vw,34px);line-height:1.16;letter-spacing:-.018em;font-weight:400;color:#1A1918}
.sec-lede{margin:16px 0 0;font-size:16px;line-height:1.6;letter-spacing:.005em;color:rgba(12,12,12,.62);max-width:560px}
.band-more{margin-top:clamp(28px,4vh,44px)}

/* --- inner page hero --- */
.hero-p{border-bottom:1px solid var(--rule)}
.hero-p-in{max-width:1280px;margin:0 auto;padding:clamp(78px,11.05vh,142px) 17px clamp(56px,8vh,96px);position:relative}
.hero-p-h{margin:18px 0 0;font-size:clamp(34px,3.74vw,56px);line-height:1.05;letter-spacing:-.026em;font-weight:400;color:#1A1918;max-width:16ch}
.hero-p-lede{margin:24px 0 0;font-size:17px;line-height:1.6;letter-spacing:.005em;color:var(--mute);max-width:580px}
.hero-p .intro-btns{margin-top:30px}
.hero-num{position:absolute;right:17px;top:clamp(78px,13vh,158px);font-size:10.5px;letter-spacing:.16em;color:var(--faint,#9A9995)}
.hero-p-red{box-shadow:inset 0 4px 0 #FF0003}
.hero-p-blue{box-shadow:inset 0 4px 0 #2955DF}
.hero-p-amber{box-shadow:inset 0 4px 0 #FFB020}
.hero-p-lime{box-shadow:inset 0 4px 0 #C8F24A}

/* --- work tiles --- */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.7vw,24px) clamp(14px,1.7vw,24px)}
.tile{display:block;text-decoration:none;color:inherit}
.tile[hidden]{display:none}
.t-med{display:block;overflow:hidden;border-radius:8px;background:#EAE9E5}
.t-169 .t-med{aspect-ratio:16 / 9}
.t-916 .t-med{aspect-ratio:16 / 9;background:#141413}
.t-916 .t-med img{width:auto;max-width:100%;height:100%;margin:0 auto;object-fit:contain}
.t-med img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.22,1,.36,1),filter .35s ease;filter:saturate(.94)}
.tile:hover .t-med img{transform:scale(1.035);filter:saturate(1.05)}
.t-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 9px;margin-top:14px}
.t-client{font-size:15.5px;letter-spacing:-.012em;color:#1A1918}
.t-title{font-size:14px;color:rgba(12,12,12,.62)}
.t-cat{margin-left:auto;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;line-height:1;
  padding:6px 10px 5px;border-radius:99px;white-space:nowrap}
.c-video{background:rgba(255,0,3,.11);color:#D10002}
.c-commercial{background:rgba(26,25,24,.10);color:#1A1918}
.c-events{background:rgba(41,85,223,.13);color:#2955DF}
.c-social{background:rgba(255,176,32,.24);color:#7E5A00}
@media (max-width:960px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tiles{grid-template-columns:minmax(0,1fr)}}

/* --- filter chips --- */
.chipbar{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 clamp(24px,3.5vh,40px)}
.chip-f{font:inherit;cursor:pointer;font-size:13.5px;line-height:1;padding:12px 19px 11px;border-radius:99px;
  border:1px solid rgba(12,12,12,.14);background:transparent;color:rgba(12,12,12,.50);transition:.18s}
.chip-f:hover{border-color:rgba(250,250,250,.30);color:#FAFAFA}
.chip-f.on{background:#1A1918;border-color:#1A1918;color:#FAFAFA}

/* --- big tags row --- */
.tags-lg{gap:7px}
.tags-lg li{font-size:11px;padding:9px 15px 8px;background:#F2F1EF;color:#1A1918}

/* --- numbers band --- */
.numbers{background-color:#EFEEEA}
.numbers-in{max-width:1280px;margin:0 auto;padding:clamp(54px,6.38vh,85px) 17px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.numbers-in.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.numbers-in.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}
.bs b{display:block;font-size:clamp(30px,2.92vw,43px);font-weight:400;letter-spacing:-.035em;line-height:1;color:#1A1918}
.bs span{display:block;margin-top:11px;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(12,12,12,.50)}
.numbers-red{background-color:#FF0003}.numbers-red .bs b{color:#FFFFFF}.numbers-red .bs span{color:rgba(255,255,255,.72)}
.numbers-blue{background-color:#2955DF}.numbers-blue .bs b{color:#F4F5FF}.numbers-blue .bs span{color:rgba(244,245,255,.66)}
.numbers-amber{background-color:#FFB020}.numbers-amber .bs b{color:#171208}.numbers-amber .bs span{color:rgba(23,18,8,.6)}
.numbers-lime{background-color:#C8F24A}.numbers-lime .bs b{color:#1A1E08}.numbers-lime .bs span{color:rgba(26,30,8,.66)}
.numbers-ink{background-color:#1A1918}.numbers-ink .bs b{color:#F4F3F0}.numbers-ink .bs span{color:rgba(244,243,240,.66)}
@media (max-width:760px){.numbers-in{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}}

/* --- next / more rows --- */
.nextlist{border-top:1px solid rgba(12,12,12,.14)}
.nextrow{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,1.2fr) 20px;align-items:center;gap:0 20px;
  padding:25px 0;border-bottom:1px solid rgba(12,12,12,.14);text-decoration:none;color:inherit;transition:padding .25s ease}
.nextrow:hover{padding-left:8px}
.nr-n{font-size:10.5px;letter-spacing:.15em;color:rgba(12,12,12,.44)}
.nr-t{font-size:18px;letter-spacing:-.015em;color:#1A1918}
.nr-s{font-size:14px;color:rgba(12,12,12,.62)}
.c-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.d-red{background:#FF0003}.d-blue{background:#2955DF}.d-amber{background:#FFB020}.d-lime{background:#C8F24A}
@media (max-width:700px){.nextrow{grid-template-columns:38px minmax(0,1fr) 12px}.nr-s{display:none}}

/* --- case study --- */
.cs-plate img{width:100%;height:clamp(280px,54vh,540px);object-fit:cover;border-radius:8px;display:block;background:#EDEBE4}
.cs-meta{margin:0}
.cs-body{max-width:620px}
.cs-over{margin:14px 0 0;font-size:17px;line-height:1.65;color:rgba(12,12,12,.70)}
.cs-body .cs-over + .cs-over{margin-top:16px}
.cs-sec + .cs-sec{margin-top:clamp(28px,4vh,44px)}
.cs-sec h3{margin:0;font-size:20px;line-height:1.25;letter-spacing:-.016em;font-weight:400;color:#1A1918}
.cs-sec p{margin:11px 0 0;font-size:16px;line-height:1.65;color:rgba(12,12,12,.55)}

/* --- accordion --- */
.acc{border-top:1px solid rgba(12,12,12,.14)}
.acc-row{border-bottom:1px solid rgba(12,12,12,.14)}
.acc-h{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;
  font:inherit;text-align:left;cursor:pointer;background:none;border:0;padding:25px 0;color:#1A1918}
.acc-t{font-size:18px;letter-spacing:-.015em}
.acc-i{position:relative;width:11px;height:11px;flex:none}
.acc-i::before,.acc-i::after{content:'';position:absolute;background:#1A1918;transition:transform .28s ease,opacity .28s ease}
.acc-i::before{left:0;top:5px;width:11px;height:1px}
.acc-i::after{left:5px;top:0;width:1px;height:11px}
.acc-row.on .acc-i::after{transform:scaleY(0);opacity:0}
.acc-b{overflow:hidden;max-height:0;transition:max-height .38s cubic-bezier(.22,1,.36,1)}
.acc-row.on .acc-b{max-height:420px}
.acc-b p{margin:0 0 26px;font-size:16px;line-height:1.65;color:rgba(12,12,12,.62);max-width:680px}

/* --- journal --- */
.tabs{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 clamp(24px,3.5vh,40px)}
.tab{font:inherit;cursor:pointer;font-size:13.5px;line-height:1;padding:12px 19px 11px;border-radius:99px;
  border:1px solid rgba(12,12,12,.14);background:transparent;color:rgba(12,12,12,.50);transition:.18s}
.tab:hover{border-color:rgba(12,12,12,.30);color:#1A1918}
.tab.on{background:#1A1918;border-color:#1A1918;color:#FAFAFA}
.posts{border-top:1px solid rgba(12,12,12,.14)}
.post[hidden]{display:none}
.post a{display:block;padding:29px 0;border-bottom:1px solid rgba(12,12,12,.14);text-decoration:none;color:inherit;transition:padding .25s ease}
.post a:hover{padding-left:8px}
.post-top{display:flex;align-items:center;gap:12px}
.post-cat{font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 11px 5px;border-radius:99px;line-height:1}
.post-date{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(12,12,12,.44)}
.post h3{margin:15px 0 0;font-size:22px;line-height:1.24;letter-spacing:-.018em;font-weight:400;color:#1A1918;max-width:22ch}
.post p{margin:10px 0 0;font-size:15px;line-height:1.6;color:rgba(12,12,12,.62);max-width:58ch}
.post-go{display:inline-block;margin-top:14px;font-size:13.5px;color:#1A1918}
.post-go em{font-style:normal;display:inline-block;transition:transform .25s ease}
.post a:hover .post-go em{transform:translateX(4px)}
.posts-note{margin:26px 0 0;font-size:13px;color:rgba(12,12,12,.44)}

/* --- signup --- */
.signup{align-items:center}
.signup-f{flex:1 1 0;display:flex;gap:10px;max-width:460px}
.signup-f input{flex:1 1 auto;min-width:0;height:44px;padding:0 16px;border-radius:8px;border:1px solid rgba(12,12,12,.14);
  background:#FFFFFF;font:inherit;font-size:15.5px;color:#1A1918}
.signup-f input:focus{outline:none;border-color:#1A1918}
.signup-f button{border:0;cursor:pointer;font:inherit}

/* --- rates --- */
.pricelist{border-top:1px solid rgba(12,12,12,.14)}
.price-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 220px;gap:0 clamp(24px,4vw,56px);
  align-items:start;padding:36px 0;border-bottom:1px solid rgba(12,12,12,.14)}
.pr-l h3{margin:13px 0 0;font-size:21px;line-height:1.2;letter-spacing:-.018em;font-weight:400;color:#1A1918}
.pr-l p{margin:10px 0 0;font-size:15px;line-height:1.55;color:rgba(12,12,12,.62);max-width:36ch}
.pr-inc{list-style:none;margin:0;padding:0}
.pr-inc li{position:relative;padding-left:18px;font-size:14px;line-height:1.5;color:rgba(12,12,12,.62)}
.pr-inc li + li{margin-top:7px}
.pr-inc li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:1px;background:rgba(12,12,12,.34)}
.pr-r{text-align:right}
.pr-from{display:block;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(12,12,12,.44)}
.pr-n{display:block;margin-top:7px;font-size:clamp(26px,2.15vw,32px);letter-spacing:-.03em;color:#1A1918;line-height:1}
.pr-u{display:block;margin-top:7px;font-size:12.5px;color:rgba(12,12,12,.44)}
.pr-r .pill{margin-top:16px}
@media (max-width:900px){.price-row{grid-template-columns:1fr;row-gap:18px}.pr-r{text-align:left}}

/* --- contact --- */
.c-detail + .c-detail{margin-top:32px}
.c-big{display:block;margin-top:9px;font-size:21px;letter-spacing:-.018em;color:#1A1918}
a.c-big:hover{text-decoration:underline;text-underline-offset:4px}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form label{display:flex;flex-direction:column;gap:7px}
.form-wide{grid-column:1 / -1}
.form span{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(12,12,12,.44)}
.form input,.form select,.form textarea{font:inherit;font-size:15.5px;color:#1A1918;background:#FFFFFF;
  border:1px solid rgba(12,12,12,.14);border-radius:8px;padding:13px 15px;width:100%}
.form textarea{resize:vertical;line-height:1.5}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:#1A1918}
.form button{grid-column:1 / -1;justify-self:start;border:0;cursor:pointer;font:inherit}
@media (max-width:640px){.form{grid-template-columns:1fr}}

/* --- the close: white space, small ink accents, and a minimal calendar --- */
.endcta{background:#FFFFFF;color:#1A1918;border-top:1px solid rgba(12,12,12,.12);scroll-margin-top:90px}
.endcta-in{max-width:1280px;margin:0 auto;padding:clamp(72px,8.5vh,108px) 17px clamp(64px,9vh,104px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:40px clamp(40px,6vw,96px);align-items:center}
.endcta-head{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.endcta-kicker{display:flex;align-items:center;gap:6px;margin:0 0 20px;font-family:'Caveat',cursive;font-size:25px;line-height:1.1;color:#2955DF;transform:rotate(-3deg)}
.endcta-h{margin:0;font-size:clamp(36px,3.44vw,50px);line-height:1.02;letter-spacing:-.03em;font-weight:400;color:#1A1918;text-wrap:balance}
.endcta-h em{position:relative;display:inline-block;font-style:italic;font-family:'Instrument Serif',Georgia,serif;letter-spacing:0;color:#1A1918}
.endcta-h em::after{content:'';position:absolute;left:-3%;bottom:-10px;width:106%;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 14' fill='none'%3E%3Cpath d='M4 8C40 3 100 3 146 7' stroke='%232955DF' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;pointer-events:none}
.endcta-note{margin:24px 0 0;font-size:16.5px;line-height:1.6;color:rgba(12,12,12,.62);max-width:38ch;text-wrap:pretty}
.endcta-facts{display:flex;flex-direction:column;gap:12px;margin:24px 0 0;padding:0;list-style:none;font-size:15px;letter-spacing:-.005em;color:#1A1918}
.endcta-facts li{display:flex;align-items:center;gap:10px}
.endcta-facts li>svg{width:16px;height:16px;flex:none;color:rgba(12,12,12,.45)}
.endcta-facts li>.cal-meet{display:block;width:18px;height:18px;object-fit:contain;flex:none}
.endcta-tzw{position:relative;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.endcta-tzw>svg{width:12px;height:12px;color:rgba(12,12,12,.5);transition:transform .2s}
.endcta-tzw:hover>svg{transform:translateY(1px)}
.endcta-tzw select{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;font:inherit}
.endcta-tzw:focus-within{outline:2px solid #1A1918;outline-offset:5px;border-radius:2px}
.endcta-mail{margin:28px 0 0;padding-top:22px;border-top:1px solid rgba(12,12,12,.12);width:100%;max-width:380px;font-size:15px;color:rgba(12,12,12,.55)}
.endcta-mail a{color:#1A1918;transition:color .18s}
.endcta-mail a:hover{color:#2955DF}
/* The calendar card: clean white surfaces and neutral controls. */
.cal-booking{min-width:0;width:100%}
.cal-booking [hidden]{display:none!important}
.cal{--c-ink:#1A1918;--c-mute:#888;--c-faint:#BCBCBC;--c-rule:rgba(12,12,12,.09);--c-line:rgba(12,12,12,.16);
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(210px,1fr);background:#FFF;border:1px solid var(--c-rule);border-radius:20px;color:var(--c-ink);box-shadow:0 1px 2px rgba(12,12,12,.03),0 24px 50px -34px rgba(12,12,12,.2);overflow:hidden}
.cal-month{padding:26px 28px 28px;min-width:0}
.cal-slots{display:flex;flex-direction:column;padding:26px 24px 28px;min-width:0;border-left:1px solid var(--c-rule);background:#FDFDFD}
.cal-mh{display:flex;align-items:center;justify-content:space-between;height:32px;margin-bottom:18px}
.cal-mname{font-size:17px;letter-spacing:-.012em;color:var(--c-mute)}
.cal-mname b{font-weight:500;color:var(--c-ink)}
.cal-mnav{display:flex;gap:2px}
.cal-nav{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--c-line);border-radius:50%;background:#FFF;color:var(--c-ink);cursor:pointer;transition:background-color .15s,border-color .15s}
.cal-nav:hover{background:#F3F3F3;border-color:#999}
.cal-nav:disabled{opacity:.3;cursor:default;background:transparent;border-color:var(--c-line)}
.cal-nav svg{width:15px;height:15px}
.cal-dow,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px 2px;justify-items:center}
.cal-dow{margin-bottom:8px;font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-mute);text-align:center}
.cal-d{display:flex;align-items:center;justify-content:center;position:relative;width:min(100%,44px);aspect-ratio:1;border:0;border-radius:50%;background:transparent;font:inherit;font-size:14.5px;color:var(--c-faint);cursor:default}
.cal-d.is-today{color:var(--c-ink)}
.cal-d.is-today::after{content:'';position:absolute;bottom:5px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--c-ink)}
.cal-d.is-open{background:#F5F5F5;color:var(--c-ink);font-weight:500;cursor:pointer;transition:background-color .15s,box-shadow .15s}
.cal-d.is-open:hover{background:var(--c-ink);color:#FFF}
.cal-d.is-sel,.cal-d.is-sel:hover{background:linear-gradient(145deg,#FFF,#E9E9E9);color:var(--c-ink);box-shadow:inset 0 0 0 1px #AAA,inset 0 2px 2px #FFF,0 2px 5px rgba(0,0,0,.08)}
.cal-sh{display:flex;align-items:center;height:32px;margin-bottom:18px}
.cal-day{font-size:17px;letter-spacing:-.012em;color:var(--c-mute);white-space:nowrap}
.cal-day b{font-weight:500;color:var(--c-ink)}
.cal-list{display:flex;flex-direction:column;gap:8px;height:292px;min-height:0;flex-shrink:0;overflow-y:auto;overscroll-behavior-y:contain;padding-right:2px;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:rgba(12,12,12,.2) transparent}
.cal-slot{position:relative;display:flex;align-items:center;justify-content:center;flex:none;height:42px;border:1px solid var(--c-line);border-radius:10px;background:#FFF;font:inherit;font-size:14.5px;font-weight:500;color:var(--c-ink);cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.cal-slot::after{content:'↗';position:absolute;right:14px;color:currentColor;opacity:0;transition:opacity .15s}
.cal-slot:hover{border-color:var(--c-ink);background:var(--c-ink);color:#FFF}
.cal-slot:hover::after{opacity:1}
.cal :is(button,a):focus-visible{outline:2px solid var(--c-ink);outline-offset:3px}
.cal-status{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;min-height:100%;grid-column:1/-1}
.cal-status-title{margin:0;font-size:15px;color:#1A1918;line-height:1.45}
.cal-status-note{margin:0;font-size:13px;color:#777;line-height:1.6}
.cal-status-actions{display:flex;flex-wrap:wrap;gap:8px 22px}
.cal-status-action,.cal-back{padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:500;color:#1A1918;cursor:pointer;transition:color .18s}
.cal-status-action:hover,.cal-back:hover,.book-fallback:hover{color:#2955DF}
.cal-checkout{min-height:398px;overflow:hidden;background:#FFF;border:1px solid rgba(12,12,12,.09);border-radius:20px;box-shadow:0 1px 2px rgba(12,12,12,.03),0 24px 50px -34px rgba(12,12,12,.2)}
.cal-checkout-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid rgba(12,12,12,.09);font-size:13px;color:#888}
.cal-back{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.cal-back::before{content:'←';font-size:17px}
.cal-back:focus-visible,.cal-status-action:focus-visible{outline:2px solid #1A1918;outline-offset:5px}
.cal-checkout-status{padding:30px 24px;font-size:14px;line-height:1.6;color:#777}
.cal-checkout-status p{margin:0 0 12px}
.cal-embed{width:100%;min-height:398px;overflow:auto}
.cal-embed iframe{display:block;width:100%;border:0}
.cal-noscript{margin:16px 0 0;font-size:14px;line-height:1.6;color:#777}
.cal-noscript a{color:#1A1918}
@media(prefers-reduced-motion:reduce){.cal-nav,.cal-d,.cal-slot,.cal-slot::after{transition:none}}
@media(max-width:980px){.endcta-in{grid-template-columns:1fr;gap:36px}.endcta-mail{max-width:none}}
@media(max-width:700px){.cal{grid-template-columns:1fr;border-radius:14px}.cal-slots{border-left:0;border-top:1px solid var(--c-rule)}.cal-month,.cal-slots{padding:20px 16px 22px}.cal-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:42px;align-content:start;height:142px}.cal-status{grid-row:1/span 3}.cal-d{font-size:14px}}

/* --- shared footer: black ground, white type, one rule --- */
.foot{--foot-ink:#fff;--foot-muted:#8c8c8c;--foot-rule:#ffffff1a;background:#000;color:var(--foot-ink);font-family:'aktiv-grotesk','Aktiv Fallback',Helvetica,Arial,sans-serif}
.foot-in{max-width:1320px;margin:0 auto;padding:56px 40px 24px}
.foot a{color:inherit;text-decoration:none}
.foot :is(a,button):focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:3px}
.foot-main{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px 48px;padding-bottom:48px}
.foot-brand{display:block;width:fit-content}
.foot-logo{display:block;width:92px;height:auto;filter:invert(1)}
.foot-line{margin:18px 0 0;max-width:26ch;color:var(--foot-muted);font-size:13px;line-height:1.55}
.foot-cta{display:inline-flex;align-items:center;gap:10px;margin-top:20px;font-size:13px;line-height:1.4;color:#fff;transition:opacity .2s}
.foot-cta svg{width:13px;height:13px;flex:none;transition:transform .2s}
.foot-cta:hover{opacity:.6}
.foot-cta:hover svg{transform:translate(2px,-2px)}
.foot-social{display:flex;gap:8px;margin-top:22px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--foot-rule);border-radius:50%;color:#fff;transition:border-color .2s,background-color .2s,transform .2s}
.foot-social svg{width:16px;height:16px}
.foot-social a:hover{border-color:#ffffff66;background:#ffffff14;transform:translateY(-2px)}
.foot-h{margin:4px 0 14px;color:var(--foot-muted);font-size:11px;line-height:1.5;font-weight:400;letter-spacing:.06em;text-transform:uppercase}
.foot-col a,.foot-addr{display:block;width:fit-content;max-width:100%;padding:5px 0;font-size:14px;line-height:1.35}
.foot-col a{color:#fff;transition:opacity .2s}
.foot-col a:hover{opacity:.6}
.foot-addr{color:var(--foot-muted)}
.foot-base{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--foot-rule);padding-top:20px;font-size:12px;line-height:1.5;color:var(--foot-muted)}
.foot-top{display:inline-flex;align-items:center;gap:8px;min-height:28px;color:var(--foot-muted);transition:color .2s}
.foot-top svg{width:13px;height:13px;transition:transform .2s}
.foot-top:hover{color:#fff}
.foot-top:hover svg{transform:translateY(-3px)}
@media(max-width:1000px){.foot-in{padding:48px 32px 22px}.foot-main{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px 28px;padding-bottom:40px}.foot-col a,.foot-addr{font-size:13px}}
@media(max-width:760px){.foot-in{padding:44px 20px 20px}.foot-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px;padding-bottom:36px}.foot-brand-col{grid-column:1/-1}.foot-logo{width:84px}.foot-h{margin-top:0;margin-bottom:10px}.foot-col a,.foot-addr{padding:6px 0}.foot-base{flex-wrap:wrap;gap:8px 16px;padding-top:18px;font-size:11px}}
@media(max-width:380px){.foot-main{column-gap:18px}.foot-col a,.foot-addr{font-size:12px}.foot-logo{width:76px}}
@media(prefers-reduced-motion:reduce){.foot a,.foot svg{transition:none}}
@media(max-width:560px){.split{display:block}.split-l{max-width:none;margin-bottom:34px}}

/* --- nav active state --- */
.nl.is-on{background:rgba(12,12,12,.06)}

/* ============================================================
   SMALL SCREENS
   ============================================================ */
@media (max-width:860px){
  .nav{height:54px;top:10px;margin:10px 12px 0;padding:0 8px 0 14px;border-radius:8px}
  .nav-logo img{height:24px}
  .nav-links{gap:1px}
  .nl{height:34px;padding:4px 9px;font-size:13px}
  .nl .cnt,.nl .chev{display:none}
  .panel{display:none}
  .dw::after{display:none}
  .nav-txt{display:none}
  .cta{height:28px;font-size:12.5px;padding:3px 3px 3px 8px;gap:6px}
  .cta .chip{width:22px;height:22px}
  .cta .chip svg{width:13px;height:13px}
  .nav-cta .cta{height:38px;padding:0 14px 0 16px;font-size:13.5px;gap:10px}
  .nav-cta .cta .arrs,.nav-cta .cta .arr{width:13px;height:13px}
  .hb{height:38px;padding:0 14px 0 16px;font-size:13.5px;gap:10px}
  .hb .arrs,.hb .arr{width:13px;height:13px}

  .hero{height:calc(100vh - 56px);height:calc(100svh - 56px);min-height:420px;margin:0}
  /* the desktop line break strands "for" on a phone: drop it and let the lines balance */
  .h1{font-size:clamp(27px,8.6vw,40px);text-wrap:balance}
  .h1 br{display:none}
  .sub{font-size:13.5px;text-wrap:balance}

  .clients{padding:4px 0 48px}
  .marquee{--logo-gap:34px;--logo-width:140px;width:calc(100% - 24px)}
  .client-logo-art{height:74px;gap:6px}
  .marquee-track img{max-height:46px;max-width:132px}
  .client-logo-harley img{height:64px;max-height:none}
  .client-logo-jlr img{height:40px}
  .client-logo-alfa-romeo img{height:46px}
  .client-logo-branch{font-size:10px}
  .client-logo-score-bet img{max-height:none}

  .intro-in{padding:clamp(52px,8vh,80px) 14px}
  .offers li{grid-template-columns:34px minmax(0,1fr);gap:0 12px}

  .svc{--tabh:24px;--tabw:104px;--cardh:auto;--cr:14px;padding-left:12px;padding-right:12px}
  .card{display:block;height:auto;min-height:0;padding:16px}
  .card-body{display:block}
  .card .tab{left:0}
  .svc.is-locked{--tabh:30px}
  .svc.is-locked .tab{left:calc(var(--i) * (100% + 4px) / 4);width:calc((100% - 12px) / 4);padding:10px 0 0;justify-content:center;font-size:9px;letter-spacing:.08em}
  .card h3{font-size:21px}
  .card-med{width:100%;height:auto;aspect-ratio:16 / 9;margin-top:18px}
  .card-med.strip{aspect-ratio:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .card-med.strip video{height:auto;width:100%;aspect-ratio:9 / 16;object-fit:cover}
  .card-med.portrait{height:clamp(260px,42svh,340px);aspect-ratio:auto}
  .card-med.mock{aspect-ratio:16 / 10;display:flex}
  .tiles{grid-template-columns:minmax(0,1fr)}
  .card-notes{margin-top:14px;gap:5px;font-size:12.5px}
  .card-stats{padding-top:18px;gap:12px 22px}
  .card + .card{margin-top:14px}
  .svc-tail{height:20px}

  .band,.endcta-in,.hero-p-in,.numbers-in{padding-left:20px;padding-right:20px}
  .hero-p-h{font-size:clamp(28px,8.4vw,40px);max-width:none}
  .hero-p-lede,.sec-lede,.intro-p{max-width:none}
  .hero-num{display:none}
  .sec-h{font-size:clamp(21px,6vw,28px)}
  .endcta-h{font-size:clamp(34px,10vw,44px)}

  .split{display:block}
  .split-l{max-width:none;margin-bottom:30px}
  .cs-plate img{height:clamp(200px,42vh,320px)}
  .t-meta{gap:0 6px}
  .t-cat{margin-left:0;order:3;flex-basis:100%;margin-top:7px;align-self:flex-start}
  .t-client,.t-title{font-size:13px}

  /* no single word stranded on the last line of a heading or paragraph */
  body{text-wrap:pretty}
  h1,h2,h3,h4,.reel-location{text-wrap:balance}

}
@media (max-width:520px){
  .h1 br.m,.sub br.m{display:initial}
  .nav-links{display:none}
  .nav-logo{flex:1 1 auto}
  .numbers-in,.numbers-in.n3,.numbers-in.n2{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}
}

/* ============================================================
   GROUND — paper stock, tonal bands
   ============================================================ */
:root{
  --paper:#F3F2EF;
  --sand:#EFEEEA;
  --shell:#F5F4F1;
  --ink:#1A1918;
  --mute:#78726B;
  --rule:#E3E0DA;
  --red:#FF0003;
  --blue:#2955DF;
  --amber:#FFB020;
  --lime:#C8F24A;
  --ink-card:#1A1918;
}

/* full-bleed tonal ground behind a centred section, with no page overflow */
.band.g{max-width:none;background-color:var(--g)}
.band.g > .band-in{max-width:1280px;margin:0 auto}
.g-sand{--g:#EFEEEA}
.g-shell{--g:#F5F4F1}
.g-white{--g:#FFFFFF}

/* a raised paper panel */
.sheet{background:#FFFFFF;border-radius:16px;box-shadow:0 1px 0 rgba(12,12,12,.05),0 18px 40px -30px rgba(12,12,12,.30)}
.sheet-in{padding:clamp(30px,4vw,58px)}


/* ============================================================
   COLOUR WIDGETS
   ============================================================ */

/* step hues (the dot beside each step number) */
.s-red{--c:#FF0003;--fg:#FFFFFF}
.s-blue{--c:#2955DF;--fg:#F4F5FF}
.s-amber{--c:#FFB020;--fg:#1A1208}
.s-lime{--c:#C8F24A;--fg:#1A1E08}
.s-paper{--c:#131312;--fg:#0C0C0C}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}

/* pull statement band */
.say{background-color:var(--c,#0C0C0C);color:var(--fg,#FAFAFA)}
.say-in{max-width:1280px;margin:0 auto;padding:clamp(60px,7.65vh,99px) 17px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(28px,4vw,64px);flex-wrap:wrap}
.say-h{margin:0;font-size:clamp(26px,2.67vw,40px);line-height:1.1;letter-spacing:-.024em;font-weight:400;max-width:18ch}
.say-h em{font-style:italic;font-family:'Instrument Serif',Georgia,serif;letter-spacing:0}
.say-m{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;opacity:.62;white-space:nowrap}

/* quick fact widgets */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.5vw,20px)}
.fact{padding:clamp(20px,2.2vw,28px);border-radius:14px;background:var(--c);color:var(--fg)}
.fact b{display:block;font-size:clamp(22px,1.89vw,28px);font-weight:400;letter-spacing:-.03em;line-height:1}
.fact span{display:block;margin-top:10px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.66}
.fact p{margin:14px 0 0;font-size:13.5px;line-height:1.5;opacity:.76}
@media (max-width:900px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.facts{grid-template-columns:minmax(0,1fr)}}

/* coloured journal chips */
.post-cat{background:#EFEEEA;color:#1A1918}
.post[data-cat="Articles"] .post-cat{background:rgba(41,85,223,.13);color:#2955DF}
.post[data-cat="Behind the scenes"] .post-cat{background:rgba(255,176,32,.26);color:#7E5A00}

/* coloured filter chips when active */
.chip-f[data-cat="video"].on{background:#FF0003;border-color:#FF0003;color:#FFFFFF}
.chip-f[data-cat="commercial"].on{background:#1A1918;border-color:#1A1918;color:#F4F3F0}
.chip-f[data-cat="events"].on{background:#2955DF;border-color:#2955DF;color:#F4F5FF}
.chip-f[data-cat="social"].on{background:#FFB020;border-color:#FFB020;color:#171208}

/* rates rows get a tinted left edge */
.price-row{position:relative;padding-left:22px}
.price-row::before{content:'';position:absolute;left:0;top:36px;bottom:36px;width:3px;border-radius:2px;background:var(--c,#1C1C1A)}
.pr-red{--c:#FF0003}.pr-blue{--c:#2955DF}.pr-amber{--c:#FFB020}.pr-lime{--c:#C8F24A}

/* accordion rows get a colour dot */
.acc-h{gap:14px}
.acc-d{width:9px;height:9px;border-radius:50%;flex:none;background:var(--c,rgba(12,12,12,.30))}
.acc-t{flex:1 1 auto}

/* rules in the new warmer tone */
.offers li,.offers li:last-child,.nextlist,.nextrow,.acc,.acc-row,
.posts,.post a,.pricelist,.price-row,.endcta,.hero-p{border-color:var(--rule)}

/* ---- Full-viewport burst and centered statement. The shared stage reserves the
   reel's final position before its short connector and opacity reveal begin. ---- */
.belief{position:relative;margin:0;height:100vh;height:100svh;background:#0C0C0C;color:#FAFAFA}
.belief-pin{position:relative;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center;background:#0C0C0C}
.belief-sequence{background:#0C0C0C}
.belief-sequence.is-enhanced{--stage-height:calc(100svh + 600px);--reel-top:calc(50svh + 160px)}
.is-enhanced .belief-stage{position:relative;height:var(--stage-height);isolation:isolate}
.is-enhanced .belief{position:absolute;top:0;left:0;right:0;height:100vh;height:100svh}
.is-enhanced .belief-pin{height:100%}
.is-enhanced .warp-dark{height:var(--stage-height)}
.is-enhanced .belief-pin{overflow:visible}
.is-enhanced .reel{position:absolute;z-index:5;top:var(--reel-top);left:0;right:0;padding:0 24px;background:transparent;visibility:hidden}
.is-enhanced .reel.is-revealed{visibility:visible}
/* the film fades in and drops down into place, following the scroll, as the line reaches it */
.is-enhanced .reel-pic{visibility:hidden;opacity:0}
.is-enhanced .reel.is-revealed .reel-pic{visibility:visible;opacity:1;transition:opacity .7s ease}
.is-enhanced .reel-notes{opacity:var(--reel-reveal,0)}
.is-enhanced .belief-notes{opacity:var(--belief-notes,0)}
@media (max-width:600px){.is-enhanced .belief-notes .note{max-width:calc(50% - 28px)}}
.belief.is-dark,.belief.is-dark .belief-pin{background:#0C0C0C;color:#FAFAFA}
/* the dark ground and the canvas inside it: no mask, so the buttons are seen coming in from the far distance from the start */
.warp-dark{position:absolute;inset:0;z-index:1;background:#0C0C0C}
.warp{position:absolute;inset:0;width:100%;height:100%;display:block}
/* a soft dark pool behind the words so they read over the stream */
.warp-veil{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity 1s ease;
  background:radial-gradient(ellipse 34% 30% at 50% 50%,rgba(12,12,12,.62),rgba(12,12,12,0) 100%)}
.belief.is-in .warp-veil{opacity:1}
/* the statement: as the hollow rings start coming in it grows out of the distance in one clean move, slow at first, fast
   through the middle, easing into its place. no blur and no layer hints here: those made the type look blocky on the way in */
.belief-item{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:900px;padding:0 20px;
  opacity:0;transform:scale(.06)}
.belief-item.is-in{animation:far-in 1s cubic-bezier(.6,0,.1,1) forwards}
@keyframes far-in{0%{opacity:0;transform:scale(.06)}35%{opacity:1}100%{opacity:1;transform:none}}
/* The statement remains visible and centered throughout the connector reveal. */
.belief-h{margin:0;font-size:clamp(30px,3.1vw,49px);line-height:1.06;letter-spacing:-.028em;font-weight:400;color:inherit;max-width:28ch;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.55)}
.belief-h em{font-style:italic;font-family:'Instrument Serif',Georgia,serif;letter-spacing:0}
/* one word scrolls up through the options (brand, story, vision...) like a reel; the window clips
   above and below the line, and the box eases to each word's width */
.rot{display:inline-block;position:relative;white-space:nowrap;text-align:left;vertical-align:bottom;padding-right:.06em}
.rot.is-live{transition:width .55s cubic-bezier(.7,0,.2,1);clip-path:inset(-.04em -1em -.12em -1em)}
.rot.is-live .rot-w{display:inline-block;position:absolute;left:0;bottom:0;transform:translateY(130%);transition:transform .55s cubic-bezier(.7,0,.2,1)}
.rot.is-live .rot-w:first-child{position:relative}
.rot.is-live .rot-w.on{transform:none}
.rot.is-live .rot-w.out{transform:translateY(-130%)}
/* the sparkle off the logo, sat just off the start of the first word the same way, with a slow soft twinkle */
.belief-h{position:relative}
.belief-spark{position:relative;display:inline-block;vertical-align:top;top:-.02em;margin:0 .04em 0 .13em;width:.42em;height:.42em;fill:#FAFAFA;transform-origin:50% 50%;animation:spark 2.8s ease-in-out infinite}
@keyframes spark{50%{transform:scale(.78) rotate(12deg);opacity:.75}}
@media(prefers-reduced-motion:reduce){.belief-spark{animation:none}}
@media (prefers-reduced-motion:reduce){
  .belief{height:auto;min-height:100vh;min-height:100svh}
  .belief-pin{height:100vh;height:100svh;padding:72px 24px}
  .belief-item{margin:0 auto}
  .warp{display:none}
  .belief-item.is-in{animation-duration:.01s}
}
@media (max-width:900px){
  .belief{height:100vh;height:100svh}
  .belief-h{font-size:clamp(28px,calc(9vw - 4px),40px)}
}

/* ---- The film uses normal document flow without motion enhancement. ---- */
.reel{position:relative;background:#0C0C0C;color:#FAFAFA;padding:0 24px clamp(90px,10.2vh,117px)}
.reel-location{display:flex;align-items:baseline;justify-content:space-between;gap:16px;width:min(1160px,100%);margin:18px auto 0;font:500 27px/1.1 'Caveat',cursive;color:#fafafa}
.reel-location>span{font:400 12px/1.4 'aktiv-grotesk','Aktiv Fallback',Helvetica,Arial,sans-serif;color:#fafafa99}
.is-enhanced .reel-location{opacity:var(--reel-reveal,0)}
.reel-in{position:relative;width:100%;margin:0 auto;padding-top:0}
/* 2.4:1 matches the widest letterbox in the reel, so no clip shows a black strip top or bottom */
.reel-frame{position:relative;width:min(1160px,100%);margin:0 auto;aspect-ratio:2.4 / 1}
.reel-pic{position:absolute;inset:0;border-radius:12px;overflow:hidden;background:#111;cursor:pointer;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.reel-v{display:block;width:100%;height:100%;object-fit:cover}
.reel-pic:fullscreen{border-radius:0}
.reel-pic:fullscreen .reel-v{object-fit:contain}
/* the play mark in the middle: a plain white triangle, only while the film is stopped, so people know to press it */
.reel-big{position:absolute;left:50%;top:50%;z-index:4;width:96px;height:96px;margin:-48px 0 0 -48px;appearance:none;padding:0;border:0;border-radius:0;
  background:none;color:#FAFAFA;cursor:pointer;display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:scale(.92);transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s}
.reel-big svg{display:block;width:44px;height:44px;margin-left:6px;fill:currentColor;filter:drop-shadow(0 2px 10px rgba(0,0,0,.6))}
.reel-pic.is-paused .reel-big{opacity:.95;visibility:visible;transform:none;transition-delay:0s}
.reel-big:hover,.reel-big:focus-visible{opacity:1;outline:none}
@media (max-width:900px){.reel-big svg{width:34px;height:34px}}
/* the player: three small marks that show while you hover (or when paused), and a hairline along the bottom edge for scrubbing */
.reel-ui{position:absolute;inset:0;z-index:3;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .25s ease,visibility 0s linear .25s}
.reel-pic:hover .reel-ui,.reel-pic.is-paused .reel-ui,.reel-ui:focus-within{visibility:visible;opacity:1;transition-delay:0s}
.pb{position:absolute;bottom:10px;appearance:none;cursor:pointer;margin:0;padding:0;border:0;background:none;color:#FAFAFA;
  width:38px;height:38px;display:grid;place-items:center;pointer-events:auto;opacity:.9;filter:drop-shadow(0 1px 5px rgba(0,0,0,.6));transition:opacity .2s}
.pb:hover,.pb:focus-visible{opacity:1;outline:none}
.pb-play{left:10px}
.pb-mute{right:48px}
.pb-full{right:10px}
.pb span{display:grid;place-items:center}
.pb svg{display:block;width:18px;height:18px;fill:currentColor}
.pb .i-b{display:none}
.pb.is-alt .i-a{display:none}
.pb.is-alt .i-b{display:grid}
.pb-track{position:absolute;left:0;right:0;bottom:0;height:16px;z-index:3;cursor:pointer}
.pb-track::before{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.22);transition:height .15s}
.pb-fill{position:absolute;left:0;bottom:0;height:2px;width:0;background:#FAFAFA;transition:height .15s}
.pb-track:hover::before,.pb-track:hover .pb-fill{height:3px}
@media (hover:none){.reel-ui{visibility:visible;opacity:1}}
@media (max-width:900px){
  .reel{padding:0 16px clamp(100px,14vh,140px)}
  .is-enhanced .reel{padding:0 16px}
  .reel-pic{border-radius:8px}
  .pb{bottom:4px;width:34px;height:34px}
  .pb-play{left:4px}.pb-mute{right:38px}.pb-full{right:4px}
}

/* ---- the handwriting: white notes in a hand. each is written in left to right, then ringed or underlined, then labelled, and
   one gets a small arrow. the scripts deal them their spots and switch each one on (.is-on) as the line reaches it, or once
   the film is in the middle of the screen: two beside the line in the warp, one beside the thread, two around the film ---- */
@font-face{font-family:'Caveat';src:url('../fonts/Caveat.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
.belief-notes,.reel-notes{position:absolute;inset:0;pointer-events:none}
.belief-notes{z-index:3}
.note{position:absolute;left:0;top:0;width:max-content;max-width:230px;color:#FAFAFA;--d:0s;
  transform:translate(var(--tx,0),var(--ty,0)) rotate(var(--rot,0deg))}
.note.is-r{text-align:right}
.note-num{position:relative;display:inline-block;padding:8px 16px}
.note-n{position:relative;display:block;font-family:'Caveat',cursive;font-weight:500;font-size:clamp(38px,2.92vw,47px);line-height:1;letter-spacing:.01em;white-space:nowrap;
  clip-path:inset(-30% 100% -30% 0)}
.note.is-on .note-n{clip-path:inset(-30% -30% -30% 0);transition:clip-path .6s linear var(--d)}
.note-l{position:relative;display:block;font-family:'Caveat',cursive;font-weight:400;font-size:clamp(19px,1.38vw,23px);line-height:1.1;margin:-2px 0 0;padding:0 4px 7px;
  color:rgba(250,250,250,.88);clip-path:inset(-30% 100% -30% 0)}
.note.is-on .note-l{clip-path:inset(-30% -30% -30% 0);transition:clip-path .7s linear calc(var(--d) + .95s)}
.note-ink{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.note-ink[hidden]{display:none}
.note-ink path{fill:none;stroke:#FAFAFA;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.92}
.note.is-on .ink-ring{stroke-dashoffset:0;transition:stroke-dashoffset .65s cubic-bezier(.4,0,.35,1) calc(var(--d) + .5s)}
.note.is-on .ink-line{stroke-dashoffset:0;transition:stroke-dashoffset .4s cubic-bezier(.4,0,.35,1) calc(var(--d) + 1.6s)}
.note-arrow{width:90px;height:41px;left:auto;top:auto}
.note.is-on .ink-arrow{stroke-dashoffset:0;transition:stroke-dashoffset .45s cubic-bezier(.4,0,.35,1) calc(var(--d) + 1.9s)}
.belief-sequence.is-enhanced .note-n{clip-path:inset(-30% var(--note-num-clip,100%) -30% 0);transition:none}
.belief-sequence.is-enhanced .note-l{clip-path:inset(-30% var(--note-label-clip,100%) -30% 0);transition:none}
.belief-sequence.is-enhanced .note.is-chars :is(.note-n,.note-l){clip-path:none}
.note .nw{display:inline-block;white-space:nowrap}
.belief-sequence.is-enhanced .note .nc{display:inline-block;clip-path:inset(-40% calc((1 - var(--c,0)) * 140% - 40%) -40% -40%);opacity:min(calc(.2 + .8 * var(--c,0)),calc(var(--c,0) * 1000))}
.belief-sequence.is-enhanced .note :is(.ink-ring,.ink-line){stroke-dashoffset:calc(1 - var(--note-ink,0));opacity:min(.92,calc(var(--note-ink,0) * 1000));transition:none}
.belief-sequence.is-enhanced .note .ink-arrow{stroke-dashoffset:calc(1 - var(--note-arrow,0));opacity:min(.92,calc(var(--note-arrow,0) * 1000));transition:none}
@media (prefers-reduced-motion:reduce){
  .note.is-on .note-n,.note.is-on .note-l,.note.is-on .ink-ring,.note.is-on .ink-line,.note.is-on .ink-arrow{transition:none}
  .belief-notes{display:none}
}
@media (max-width:900px){
  .note{max-width:150px}
  .note-n{font-size:34px}
  .note-l{font-size:17px}
  .note-arrow{width:64px;height:29px}
}

/* ============================================================
   HOME — full-screen film, menu sitting straight on it
   ============================================================ */
/* film sits in its own frame under the menu bar, same inset as the bar */
.home .hero{height:100vh;height:100svh;aspect-ratio:auto;min-height:420px;margin:-80px 0 0;border-radius:0}

@media (max-width:860px){.home .hero{height:100svh;aspect-ratio:auto;min-height:420px;margin:-64px 0 0;border-radius:0}}


/* ---- opener: white screen, spinning line, then a burst of stills from the centre, then the site ---- */
body.is-opening{overflow:hidden}
.opener{position:fixed;inset:0;z-index:300;background:#FFFFFF;display:flex;align-items:center;justify-content:center;cursor:pointer}
.opener.is-done{display:none}
.op-text{position:relative;z-index:40;width:min(92vw,760px);color:#1A1918;opacity:0;transition:opacity .5s ease}
.opener.is-live .op-text{opacity:1}
.opener.is-live .op-text.off{opacity:0;transition:none}
.op-line{display:grid;grid-template-columns:1fr 1fr;column-gap:.26em;align-items:center;font-size:clamp(30px,3.1vw,45px);line-height:1.25;letter-spacing:-.02em;font-weight:400}
.op-fixed{text-align:right;line-height:1.4}
.op-slot{display:block;height:1.4em;overflow:hidden;text-align:left;font-size:1.12em;line-height:1.4;transform:translateY(.04em)}
.op-reel{display:flex;flex-direction:column;transition:transform .42s cubic-bezier(.3,1,.35,1)}
.op-reel>span{display:block;height:1.4em;line-height:1.4;white-space:nowrap;font-family:'Instrument Serif',Georgia,serif;font-style:italic;letter-spacing:0}
.op-tag{margin-top:.15em;text-align:center;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:clamp(33px,3.44vw,50px);line-height:1.25;letter-spacing:0;
  opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .4s cubic-bezier(.22,1,.36,1)}
.op-tag.on{opacity:1;transform:none}
.op-burst{position:absolute;inset:0;z-index:10;overflow:hidden;pointer-events:none}
.op-img{position:absolute;left:50%;top:50%;max-width:60vw;border-radius:8px;object-fit:cover;visibility:hidden;
  transform:translate(-50%,-50%) scale(0) rotate(var(--r,0deg));
  transition:transform .3s cubic-bezier(.2,1.7,.4,1);box-shadow:0 24px 60px -24px rgba(0,0,0,.35);background:#F3F2EF}
.op-img.on{visibility:visible;transform:translate(calc(-50% + var(--x,0px)),calc(-50% + var(--y,0px))) scale(1) rotate(var(--r,0deg))}
@media (prefers-reduced-motion:reduce){.opener{display:none}}

/* ---- menu: floats white + transparent over the film on the home page, then gathers into a glass bar on scroll ----
   --p is 0 while the bar sits wide on the film and 1 once it has gathered (and on every other page); the ink only follows --dk,
   which is 1 while the bar sits over a dark section, so the gather itself never changes the text colour */
:root{--p:0;--dk:0} /* every page starts with the bar flat and full width; it gathers into its glass pill on scroll */
.home .nav{--dk:1} /* the film is dark, so the home bar starts white before any script runs */
.nav{
  --k:calc(1 - var(--dk));
  --nav-ink:rgb(calc(255 - 229*var(--k)) calc(255 - 230*var(--k)) calc(255 - 231*var(--k)));
  --nav-paper:rgb(calc(26 + 224*var(--k)) calc(25 + 225*var(--k)) calc(24 + 226*var(--k)));
  --tint:calc(255 - 243*var(--k));
  box-sizing:border-box;
  width:calc(100%*(1 - var(--p)) + min(960px,100% - 88px)*var(--p));max-width:none;
  padding:0 calc(10px + 22px*(1 - var(--p))) 0 calc(24px + 8px*(1 - var(--p)));
  border-radius:calc(14px*var(--p));
  background:transparent;border:1px solid transparent;box-shadow:none}
.nav-logo img,.nl,.nav-txt,.nav-cta .cta{
  --k:calc(1 - var(--dk));
  --nav-ink:rgb(calc(255 - 229*var(--k)) calc(255 - 230*var(--k)) calc(255 - 231*var(--k)));
  --nav-paper:rgb(calc(26 + 224*var(--k)) calc(25 + 225*var(--k)) calc(24 + 226*var(--k)));
  --tint:calc(255 - 243*var(--k))}
.nav-logo img{filter:invert(calc(1 - var(--k)))}
.nl{transition:background-color .18s}
.nav-txt{transition:border-color .2s,background-color .2s}
.nav-cta .cta{transition:background-color .16s,color .16s}
.nl,.nav-txt{color:var(--nav-ink)}
.nl .cnt{color:rgb(var(--tint) var(--tint) var(--tint) / .6)}
.nl:hover,.nl.is-on{background:rgb(var(--tint) var(--tint) var(--tint) / .10)}
.nav-txt{border-color:rgb(var(--tint) var(--tint) var(--tint) / calc(.45 - .17*var(--k)))}
.nav-txt:hover{border-color:var(--nav-ink);background:rgb(var(--tint) var(--tint) var(--tint) / .06)}
.nav-cta .cta,.nav-cta .cta:hover{background:var(--nav-ink);color:var(--nav-paper)}
@media (max-width:860px){
  .nav{width:calc(100%*(1 - var(--p)) + (100% - 24px)*var(--p));margin:10px auto 0;
    padding:0 calc(8px + 8px*(1 - var(--p))) 0 calc(14px + 6px*(1 - var(--p)));border-radius:calc(10px*var(--p))}
}

/* ============================================================
   MENU GLASS
   The bar is the only glass on the site: nearly clear, a soft blur of whatever scrolls
   beneath it, and a fine bright top edge so it still reads as glass. --dk goes to 1 while
   the bar sits over a dark section, so the text flips to white there.
   ============================================================ */
@property --dk{syntax:'<number>';inherits:true;initial-value:0}
@property --p{syntax:'<number>';inherits:true;initial-value:0}
/* the gather is one eased move, not tied to how far you've scrolled */
body{transition:--p .7s cubic-bezier(.22,1,.36,1)}
.nav{transition:--dk .16s ease-out}

/* the bar itself paints nothing; two layers underneath do the glass so its own edge never gets bent */
.lg-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
/* pane: what's behind the bar, lightly blurred and (Chromium) bent at the rim with the colours split like a prism,
   with a faint white tint and a bright top edge painted on top of it */
.nav::after{content:'';position:absolute;inset:0;z-index:-2;border-radius:inherit;pointer-events:none;opacity:var(--p);
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(6px) saturate(1.25);backdrop-filter:blur(6px) saturate(1.25)}
/* the lens only runs once the bar has settled, so the gather itself stays cheap and smooth */
@supports (backdrop-filter:url(#lg-lens)){
  .nav::after{-webkit-backdrop-filter:blur(3px) saturate(1.25);backdrop-filter:blur(3px) saturate(1.25)}
  .nav-set .nav::after{-webkit-backdrop-filter:blur(3px) url(#lg-lens) saturate(1.25);backdrop-filter:blur(3px) url(#lg-lens) saturate(1.25)}
}
/* rim: a one-pixel prism edge that catches red, blue and gold; masked so only the ring shows */
.nav::before{content:'';position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;opacity:var(--p);padding:1px;
  background:linear-gradient(100deg,rgba(255,255,255,.5),rgba(255,170,170,.5) 16%,rgba(255,255,255,.26) 38%,rgba(170,205,255,.5) 60%,rgba(255,235,170,.5) 82%,rgba(255,255,255,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.nav{box-shadow:0 14px 40px -22px rgba(12,12,12,calc(.28*var(--p)))}

/* ---- the middle links stay planted on the page centre; the logo and buttons slide in around them ---- */
@media (min-width:861px){
  .nav-logo,.nav-cta{flex:0 0 auto}
  .nav-cta{margin-left:auto}
  .nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
}
/* "See the work" folds down into a round play button as the bar gathers */
.nav-txt{position:relative;justify-content:center;box-sizing:border-box;overflow:hidden;padding:0;gap:0;width:calc(40px + 120px*(1 - var(--p)))}
.nt-w{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:14px;white-space:nowrap;opacity:calc(1 - var(--p))}
.nt-p{position:absolute;left:50%;top:50%;width:12px;height:12px;transform:translate(-50%,-50%) translateX(1px);opacity:var(--p)}

/* ============================================================
   INNER PAGES — the home page's language everywhere else:
   big grotesque type with one italic word, circled numbers,
   mono index lines, rounded frames, black bands, short copy
   ============================================================ */
.ncl{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid currentColor;
  font-size:12.5px;line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums;flex:none}
.ph-h em,.sec-h em,.blk-h em,.csh-h em,.ct-h em,.endcta-h em,.cs2-txt h3 em{font-style:italic;font-family:'Instrument Serif',Georgia,serif;letter-spacing:0}
.mono,.ph-meta,.blk-meta,.bl-n,.jc-cat,.jc-date,.rate-from,.rate-u,.rate-inc,.csb-l,.num span,.chip-f{
  font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}

/* ---- page header: index line, one big line with an italic word, a short lede tucked bottom-right, then a frame ---- */
.ph{background:#FAFAF8}
.ph-in{max-width:1280px;margin:0 auto;padding:clamp(48px,7.65vh,101px) 17px clamp(36px,6vh,72px);
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end}
.ph-top{grid-column:1 / -1;display:flex;align-items:center;gap:14px;min-width:0}
.ph-meta{margin-left:auto;color:rgba(12,12,12,.5);white-space:nowrap}
.ph-h{grid-column:1;margin:clamp(22px,4vh,40px) 0 0;font-size:clamp(40px,4.82vw,76px);line-height:1;letter-spacing:-.034em;font-weight:400;color:#1A1918;max-width:12ch;text-wrap:balance}
.ph-lede{grid-column:2;margin:0;font-size:17px;line-height:1.6;letter-spacing:.005em;color:rgba(12,12,12,.62);max-width:36ch;justify-self:end;padding-bottom:.3em}
.ph-plate{max-width:1280px;margin:0 auto;padding:0 17px clamp(48px,5.95vh,86px)}

/* ---- frames: every picture sits in the same rounded box ---- */
.frame{position:relative;display:block;border-radius:10px;overflow:hidden;background:#111;aspect-ratio:21 / 9}
.frame img,.frame video{width:100%;height:100%;object-fit:cover;display:block}
.frame.f169{aspect-ratio:16 / 9}
.frame.f45{aspect-ratio:4 / 5}
.frame.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;background:transparent;aspect-ratio:auto;border-radius:0;overflow:visible}
.frame.strip video{aspect-ratio:9 / 16;height:auto;border-radius:10px}
.frame.mock{aspect-ratio:16 / 9;display:flex;flex-direction:column}

/* ---- sections ---- */
.sec{background:#FAFAF8}
.sec-white{background:#FFFFFF}
.sec-paper{background:#F3F2EF}
.sec-in{max-width:1280px;margin:0 auto;padding:clamp(56px,6.8vh,94px) 17px}
.sec-in-tight{padding-top:clamp(28px,4vh,48px)}
.sec-row .sec-h{text-wrap:balance}

/* ---- numbered grid: four cells, a circled number on top, the words well below it ---- */
.gsg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,44px) clamp(16px,2vw,28px);
  border-top:1px solid rgba(12,12,12,.14);padding-top:clamp(22px,3vh,32px)}
.gsg.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gs h3{margin:clamp(40px,6.8vh,86px) 0 0;font-size:clamp(20px,1.55vw,24px);line-height:1.15;letter-spacing:-.02em;font-weight:400;color:#1A1918}
.gs p{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:rgba(12,12,12,.6);max-width:30ch}

/* ---- black band: one line, an index, big numbers under a rule ---- */
.blk{background:#0C0C0C;color:#FAFAFA}
.blk-in{max-width:1280px;margin:0 auto;padding:clamp(64px,8.5vh,115px) 17px}
.blk-loose .blk-in{padding-top:clamp(56px,6.8vh,94px);padding-bottom:clamp(56px,6.8vh,94px)}
.blk .sec-h{color:#FAFAFA}
.blk .sec-lede{color:rgba(255,255,255,.62)}
.blk-row{display:flex;justify-content:space-between;align-items:center;gap:20px}
.blk-meta{color:rgba(255,255,255,.5);white-space:nowrap}
.blk-h{margin:clamp(22px,4vh,40px) 0 0;font-size:clamp(34px,3.96vw,63px);line-height:1.02;letter-spacing:-.032em;font-weight:400;max-width:16ch;text-wrap:balance}
.blk-p{margin:18px 0 0;font-size:16px;line-height:1.6;color:rgba(255,255,255,.62);max-width:40ch}
.blk .nums{margin-top:clamp(40px,5.95vh,72px);border-top:1px solid rgba(255,255,255,.18);padding-top:clamp(22px,3vh,32px)}
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.nums.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.nums.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
.num b{display:block;font-size:clamp(36px,3.78vw,58px);font-weight:400;letter-spacing:-.04em;line-height:1}
.num span{display:block;margin-top:12px;opacity:.6}
.blk-split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
.blk .signup-f{justify-self:end;width:100%;max-width:460px}
.blk .signup-f input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#FAFAFA}
.blk .signup-f input::placeholder{color:rgba(255,255,255,.4)}

/* ---- the big list: an index you read, that plays under your pointer ---- */
.bl{list-style:none;margin:0;padding:0;border-top:1px solid rgba(12,12,12,.14)}
.bl-row[hidden]{display:none}
.bl-row a{display:grid;grid-template-columns:48px minmax(0,1.1fr) minmax(0,1.3fr) auto 18px;align-items:center;gap:0 clamp(14px,2vw,28px);
  padding:clamp(18px,2.6vh,28px) 0;border-bottom:1px solid rgba(12,12,12,.14);color:inherit;transition:padding .25s ease}
.bl-row a:hover{padding-left:10px}
.bl-n{color:rgba(12,12,12,.44)}
.bl-t{font-size:clamp(20px,1.89vw,30px);letter-spacing:-.024em;line-height:1.05;color:#1A1918}
.bl-s{font-size:15px;line-height:1.4;color:rgba(12,12,12,.58)}
.bl-x{justify-self:end}
.bl-th{display:none}
.bl-a{color:#1A1918;opacity:.45;transition:opacity .2s,transform .25s cubic-bezier(.65,0,.35,1)}
.bl-a svg{width:16px;height:16px;display:block}
.bl-row a:hover .bl-a{opacity:1;transform:translate(2px,-2px)}
/* the frame that follows the pointer */
.peek{position:fixed;left:0;top:0;z-index:40;width:min(340px,30vw);aspect-ratio:16 / 9;border-radius:10px;overflow:hidden;background:#111;
  pointer-events:none;opacity:0;transform:translate(-9999px,-9999px);box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
  transition:opacity .25s ease,width .25s ease;will-change:transform}
.peek.is-on{opacity:1}
.peek.is-v{width:min(200px,18vw);aspect-ratio:9 / 16}
.peek img,.peek video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.peek video[hidden]{display:none}
@media (hover:none){
  .bl-th{display:block;width:96px;aspect-ratio:16 / 9;border-radius:6px;overflow:hidden;background:#EAE9E5}
  .bl-th img{width:100%;height:100%;object-fit:cover;display:block}
}

/* ---- filter chips ---- */
.chipbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(20px,3vh,32px)}
.chip-f{font-weight:400;cursor:pointer;line-height:1;padding:11px 16px 10px;border-radius:99px;border:1px solid rgba(12,12,12,.16);background:transparent;color:rgba(12,12,12,.55);transition:.18s}
.chip-f:hover{border-color:#1A1918;color:#1A1918}
.chip-f.on{background:#1A1918;border-color:#1A1918;color:#FAFAFA}

/* ---- case cards ---- */
.csgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.csgrid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cscard{display:block;min-width:0;color:inherit}
.cscard .frame{background:#161615}
.cscard .frame img{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.cscard:hover .frame img{transform:scale(1.04)}
.cscard-b{display:grid;grid-template-columns:auto minmax(0,1fr) 16px;gap:0 12px;align-items:baseline;margin-top:14px}
.cscard-c{font-size:16px;letter-spacing:-.014em}
.cscard-t{font-size:14px;opacity:.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cscard-b .arr{width:15px;height:15px;opacity:.5;transition:transform .25s cubic-bezier(.65,0,.35,1)}
.cscard:hover .cscard-b .arr{transform:translate(2px,-2px);opacity:1}
.blk .cscard,.cs2 .cscard{color:#FAFAFA}

/* ---- case study: a dark viewing room, the film first ---- */
body.cs{background-color:#0B0B0B;color:#FAFAFA}
.cs .page{background:#0B0B0B}
.csh{height:100vh;height:100svh;min-height:520px;margin:-80px 0 0;padding:14px;display:flex;flex-direction:column;gap:12px;background:#0B0B0B}
.csh-frame{position:relative;flex:1 1 auto;min-height:0;border-radius:10px;overflow:hidden;background:#000}
.csh-frame img,.csh-frame video{width:100%;height:100%;object-fit:cover;display:block}
.csh-frame::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,.08) 42%,rgba(0,0,0,.88) 100%)}
.csh-copy{position:absolute;z-index:2;left:clamp(20px,3.4vw,52px);right:clamp(20px,3.4vw,52px);bottom:clamp(22px,3.4vw,46px);text-shadow:0 1px 16px rgba(0,0,0,.55)}
.csh-h{margin:14px 0 0;font-size:clamp(32px,3.96vw,61px);line-height:1;letter-spacing:-.03em;font-weight:400;color:#FAFAFA;max-width:15ch;text-wrap:balance}
.csh-bar{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end;gap:clamp(12px,2.2vw,40px);padding:4px clamp(6px,1vw,14px) 0}
.csb-l{display:block;font-size:9.5px;letter-spacing:.16em;color:rgba(250,250,250,.42)}
.csb-v{display:block;margin-top:5px;font-size:13.5px;letter-spacing:-.005em;color:#FAFAFA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csh-scroll{justify-self:end;display:inline-flex;align-items:center;gap:9px;font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,250,250,.5)}
.csh-scroll svg{width:12px;height:12px;display:block;animation:csnudge 2.1s ease-in-out infinite}
@keyframes csnudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.cs2{background:#0B0B0B;color:#FAFAFA}
.cs2-in{max-width:1280px;margin:0 auto;padding:clamp(56px,6.8vh,94px) 17px}
.cs2 .sec-h{color:#FAFAFA}
.cs2 .sec-lede{color:rgba(250,250,250,.6)}
.cs2-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,6vw,100px);align-items:start}
.cs2-over{margin:22px 0 0;font-size:clamp(22px,2.06vw,32px);line-height:1.25;letter-spacing:-.022em;color:#FAFAFA;max-width:24ch;text-wrap:pretty}
.cs2-nums .nums{margin-top:26px;grid-template-columns:minmax(0,1fr);gap:28px;max-width:none}
.cs2-secs .cs2-in{padding-top:0}
.cs2-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center;
  padding:clamp(28px,5vh,56px) 0;border-top:1px solid rgba(250,250,250,.12)}
.cs2-sec:nth-child(even) .frame{order:2}
.cs2-sec .frame{width:100%;max-width:560px;aspect-ratio:4 / 3;background:#161615}
.cs2-txt h3{margin:22px 0 0;font-size:clamp(24px,2.24vw,36px);line-height:1.1;letter-spacing:-.024em;font-weight:400}
.cs2-txt p{margin:14px 0 0;font-size:16px;line-height:1.6;color:rgba(250,250,250,.6);max-width:44ch}
.cs2-more .cs2-in{padding-top:0}
.cs .pill-ghost{color:#FAFAFA}
.cs .pill-ghost::after{border-color:rgba(250,250,250,.34)}
.cs .pill-ghost:hover{background:rgba(250,250,250,.1);color:#FAFAFA}

/* ---- about: darkroom register, compact. a small serif quote on black, a row of tiles, then tight light and black bands ---- */
.ab2{--ab-h2:clamp(24px,2.2vw,32px);--ab-h3:20px;--ab-serif:clamp(20px,1.8vw,24px);--ab-body:14.5px;--ab-small:12.5px;
  --ab-line:rgba(12,12,12,.14);--ab-line-w:rgba(255,255,255,.16)}
/* a narrower page and less air than the rest of the site */
.ab2 .sec-in{max-width:1120px;padding:clamp(48px,5.95vh,72px) 17px}
.ab2 .blk-in{max-width:1120px;padding:clamp(52px,6.8vh,79px) 17px}
.ab2 .sec-row{margin-bottom:clamp(24px,3.6vh,36px)}
.ab2 .sec-head{max-width:560px}
.ab2 .sec-h{margin-top:12px;font-size:var(--ab-h2);line-height:1.12;letter-spacing:-.02em;max-width:18ch;text-wrap:balance}
.ab2 .sec-lede{margin-top:0;font-size:var(--ab-body);line-height:1.55;max-width:34ch;padding-bottom:4px}
.ab2 .blk-p{margin-top:14px;font-size:var(--ab-body);line-height:1.6;max-width:44ch}
.ab2 .ncl{width:24px;height:24px;font-size:11px}
.ab2 .pill-ink{height:42px;padding:0 18px 0 22px;font-size:14px;gap:10px}
.ab2 .pill-ink .arrs,.ab2 .pill-ink .arr{width:13px;height:13px}
.ab2 .pill-ink .a2{transform:translate(-14px,14px)}
.ab2 .pill-ink:hover .a1{transform:translate(14px,-14px)}
/* the quote */
.ab2-hero{position:relative;margin:clamp(14px,2vh,22px) 18px 0;border-radius:10px;overflow:hidden;background:#0C0C0C;color:#FAFAFA;
  display:flex;align-items:center;justify-content:center;padding:clamp(96px,12.75vh,135px) clamp(20px,4vw,64px) clamp(104px,16vh,160px)}
.ab2-hero-q{margin:0;max-width:24ch;text-align:center;font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(26px,2.49vw,36px);line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.ab2-hero-q em{font-style:italic}
.ab2-hero-by{display:block;margin-top:clamp(14px,2vh,20px);font-family:'aktiv-grotesk','Aktiv Fallback',Helvetica,Arial,sans-serif;font-size:14px;letter-spacing:-.005em;color:rgba(250,250,250,.85)}
.ab2-hero-by::before{content:'\2014\00a0'}
.ab2-corner{position:absolute;bottom:18px;font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,250,250,.5)}
.ab2-corner.l{left:clamp(18px,2.6vw,32px)}
.ab2-corner.r{right:clamp(18px,2.6vw,32px)}
/* a row of small stills that bleeds off both edges */
.ab2-tiles{display:flex;justify-content:center;gap:8px;padding:clamp(18px,2.6vh,28px) 18px clamp(40px,6vh,64px);overflow:hidden}
.ab2-tiles img{height:clamp(96px,10vw,136px);width:auto;flex:none;border-radius:6px;display:block;object-fit:cover;background:#EAE9E5}
/* two columns: the heading left, the words right */
.ab2-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:start}
.ab2-sticky{position:sticky;top:104px}
.ab2-lede{margin:0;font-size:clamp(16px,1.35vw,18px);line-height:1.5;letter-spacing:-.008em;color:#1A1918;max-width:40ch;text-wrap:pretty}
.ab2-r>.pill-ink{margin-top:22px}
.ab2-links{margin-top:clamp(28px,4vh,40px);border-top:1px solid var(--ab-line)}
.ab2-links a{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--ab-line);color:#1A1918}
.ab2-links b{font-weight:400;font-size:var(--ab-body);letter-spacing:-.005em;flex:none}
.ab2-links span{margin-left:auto;font-size:var(--ab-small);color:rgba(12,12,12,.5);text-align:right}
.ab2-links svg{width:12px;height:12px;flex:none;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.ab2-links a:hover svg{transform:translate(3px,-3px)}
.ab2-links a:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(12,12,12,.35)}
/* four numbered levers on black, each with a small still */
.ab2-lv{margin-top:clamp(28px,4vh,44px);border-top:1px solid var(--ab-line-w)}
.ab2-lv-row{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,300px);gap:clamp(16px,2.5vw,40px);align-items:center;padding:clamp(20px,3vh,28px) 0;border-bottom:1px solid var(--ab-line-w)}
.ab2-lv-row .ncl{color:rgba(250,250,250,.85)}
.ab2-lv-row h3{margin:0;font-size:var(--ab-h3);line-height:1.15;letter-spacing:-.018em;font-weight:400;color:#FAFAFA}
.ab2-lv-row p{margin:8px 0 0;font-size:var(--ab-body);line-height:1.6;color:rgba(255,255,255,.6);max-width:42ch;text-wrap:pretty}
.ab2-lv-img{position:relative;aspect-ratio:16 / 10;border-radius:6px;overflow:hidden;background:#161616}
.ab2-lv-img img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
/* the verticals: one open and white, the rest dimmed */
.ab2-vert .blk-in{padding-top:clamp(40px,5.1vh,58px)}
.ab2-vert .sec-h{color:#FAFAFA}
.ab2-vert .blk-p{margin-top:12px}
.acc-dark{border-top-color:var(--ab-line-w)}
.acc-dark .acc-row{border-bottom-color:var(--ab-line-w)}
.acc-dark .acc-h{color:rgba(250,250,250,.4);padding:15px 0;transition:color .25s}
.acc-dark .acc-h:hover,.acc-dark .acc-row.on .acc-h{color:#FAFAFA}
.acc-dark .acc-t{font-family:'Instrument Serif',Georgia,serif;font-size:var(--ab-serif);letter-spacing:-.005em;line-height:1.15}
.acc-dark .acc-i::before,.acc-dark .acc-i::after{background:currentColor}
.acc-dark .acc-b p{margin-bottom:20px;font-size:var(--ab-body);line-height:1.6;color:rgba(255,255,255,.6);max-width:50ch}
/* the people */
.ab2-founder{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:end}
.ab2-fimg{aspect-ratio:4 / 5;border-radius:8px}
.ab2-fbio h3{margin:0;font-size:clamp(22px,1.72vw,24px);line-height:1.1;letter-spacing:-.02em;font-weight:400;color:#1A1918}
.ab2-role{display:block;margin-top:6px;font-size:var(--ab-small);color:rgba(12,12,12,.5)}
.ab2-fbio p{margin:16px 0 0;font-size:15px;line-height:1.6;color:rgba(12,12,12,.68);max-width:46ch;text-wrap:pretty}
.ab2-fbio .ab2-past{margin-top:12px;font-size:13px;color:rgba(12,12,12,.5)}
.ab2-bench{margin-top:clamp(36px,5vh,56px);padding-top:clamp(18px,2.5vh,26px);border-top:1px solid var(--ab-line)}
.ab2-bench-head{display:flex;justify-content:space-between;align-items:center;gap:20px}
.ab2-bench-note{font-size:var(--ab-small);color:rgba(12,12,12,.5);text-align:right}
.ab2-bench-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(18px,2.5vh,26px)}
.ab2-bench-grid div{padding-top:14px;border-top:1px solid var(--ab-line)}
.ab2-bench-grid h4{margin:0;font-size:15.5px;font-weight:400;letter-spacing:-.012em;color:#1A1918}
.ab2-bench-grid p{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:rgba(12,12,12,.6);max-width:26ch}
/* the essay */
.ab2-essay p{margin:0;font-size:15px;line-height:1.65;color:rgba(12,12,12,.7);max-width:58ch;text-wrap:pretty}
.ab2-essay p + p{margin-top:1.2em}
.ab2-essay .ab2-essay-lead{font-size:clamp(18px,1.56vw,22px);line-height:1.35;letter-spacing:-.014em;color:#1A1918;max-width:34ch}
.ab2-essay .ab2-essay-lead + p{margin-top:1.8em}
.ab2-essay .ab2-essay-close{margin-top:1.8em;padding-top:1.2em;border-top:1px solid var(--ab-line);
  font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:clamp(18px,1.56vw,22px);line-height:1.35;color:#1A1918}
/* the history */
.ab2-tl{margin-top:clamp(28px,4vh,44px);border-top:1px solid var(--ab-line-w)}
.ab2-tl-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2.6fr) minmax(0,5fr);gap:clamp(16px,2.5vw,40px);padding:clamp(18px,3vh,26px) 0;border-bottom:1px solid var(--ab-line-w)}
.ab2-tl-y{font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,250,250,.55);padding-top:.45em}
.ab2-tl-row h3{margin:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:var(--ab-serif);line-height:1.15;letter-spacing:-.005em;color:#FAFAFA}
.ab2-tl-row p{margin:0;font-size:var(--ab-body);line-height:1.6;color:rgba(255,255,255,.6);max-width:50ch;text-wrap:pretty}
/* the close, a size down to match */

/* ---- journal cards ---- */
.jgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.jc[hidden]{display:none}
.jc a{display:flex;flex-direction:column;height:100%;padding:clamp(22px,2.6vw,34px);border-radius:12px;background:#FAFAF8;color:inherit;
  border:1px solid rgba(12,12,12,.08);transition:transform .35s cubic-bezier(.22,1,.36,1),background-color .25s}
.jc a:hover{transform:translateY(-4px);background:#F3F2EF}
.jc-top{display:flex;align-items:center;gap:12px}
.jc-cat{color:rgba(12,12,12,.55)}
.jc-date{margin-left:auto;color:rgba(12,12,12,.4)}
.jc h3{margin:clamp(36px,5.1vh,65px) 0 0;font-size:clamp(22px,1.98vw,30px);line-height:1.12;letter-spacing:-.022em;font-weight:400;color:#1A1918;max-width:18ch;text-wrap:balance}
.jc p{margin:12px 0 0;font-size:15px;line-height:1.55;color:rgba(12,12,12,.6);max-width:44ch}
.jc-go,.rate-go{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding:28px 0 0;font-size:14.5px;font-weight:500;color:#1A1918;align-self:flex-start}
.jc-go .arrs,.rate-go .arrs,.form .pill .arrs{position:relative;width:13px;height:13px;overflow:hidden;flex:none}
.jc-go .arr,.rate-go .arr,.form .pill .arr{position:absolute;top:0;left:0;width:13px;height:13px;transition:transform .3s cubic-bezier(.65,0,.35,1)}
.jc-go .a2,.rate-go .a2,.form .pill .a2{transform:translate(-13px,13px)}
.jc a:hover .a1,.rate-go:hover .a1,.form .pill:hover .a1{transform:translate(13px,-13px)}
.jc a:hover .a2,.rate-go:hover .a2,.form .pill:hover .a2{transform:translate(0,0)}

/* ---- rates: five cards, the number big, the includes as a small list ---- */
.rates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.rate{display:flex;flex-direction:column;padding:clamp(22px,2.6vw,36px);border-radius:12px;background:#FAFAF8;border:1px solid rgba(12,12,12,.08)}
.rate-top{display:flex;align-items:center;gap:12px}
.rate h3{margin:clamp(28px,5vh,56px) 0 0;font-size:clamp(22px,1.72vw,26px);line-height:1.1;letter-spacing:-.02em;font-weight:400;color:#1A1918}
.rate p{margin:8px 0 0;font-size:14.5px;line-height:1.5;color:rgba(12,12,12,.6)}
.rate-inc{list-style:none;margin:18px 0 0;padding:14px 0 0;border-top:1px solid rgba(12,12,12,.12);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;color:rgba(12,12,12,.55)}
.rate-b{margin-top:auto;padding-top:clamp(24px,4vh,40px)}
.rate-from,.rate-u{display:block;color:rgba(12,12,12,.44)}
.rate-b b{display:block;margin:8px 0;font-size:clamp(30px,2.58vw,40px);font-weight:400;letter-spacing:-.035em;line-height:1;color:#1A1918}
.rate-go{margin-top:18px;padding-top:0;padding-bottom:6px;border-bottom:1px solid rgba(12,12,12,.25)}
.acc-h{gap:16px}
.acc-h .ncl{flex:none}

/* ---- contact: a dark half with the words, a light half with the form ---- */
.ct{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);min-height:calc(100vh - 80px);min-height:calc(100svh - 80px)}
.ct-l{position:relative;background:#0C0C0C;color:#FAFAFA;overflow:hidden;display:flex;align-items:flex-end}
.ct-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34;filter:saturate(.6)}
.ct-l::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(12,12,12,.1) 0%,rgba(12,12,12,.7) 60%,rgba(12,12,12,.94) 100%)}
.ct-copy{position:relative;z-index:1;width:100%;padding:clamp(40px,6vw,80px) clamp(24px,4vw,64px)}
.ct-h{margin:18px 0 0;font-size:clamp(40px,4.47vw,72px);line-height:1;letter-spacing:-.034em;font-weight:400;color:#FAFAFA}
.ct-p{margin:20px 0 0;font-size:16.5px;line-height:1.6;color:rgba(250,250,250,.7);max-width:38ch}
.ct-details{display:flex;flex-wrap:wrap;gap:20px clamp(24px,3vw,48px);margin-top:clamp(28px,5vh,56px);padding-top:22px;border-top:1px solid rgba(250,250,250,.16)}
.ct-details a.csb-v:hover{text-decoration:underline;text-underline-offset:3px}
.ct-r{background:#FAFAF8;display:flex;align-items:center;padding:clamp(40px,6vw,80px) clamp(24px,4vw,64px)}
/* contact page: the real Cal.com booking calendar */
.book{background:#FFFFFF;border-top:1px solid rgba(12,12,12,.12);scroll-margin-top:72px}
.book-in{max-width:1280px;margin:0 auto;padding:clamp(64px,8.5vh,108px) 17px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:40px clamp(40px,6vw,96px);align-items:start}
.book-txt{display:flex;flex-direction:column;align-items:flex-start;position:sticky;top:96px}
.book-h{margin:18px 0 0;font-size:clamp(30px,2.92vw,45px);line-height:1.04;letter-spacing:-.028em;font-weight:400;color:#1A1918;max-width:12ch;text-wrap:balance}
.book-h em{font-style:italic;font-family:'Instrument Serif',Georgia,serif;letter-spacing:0}
.book-p{margin:18px 0 0;font-size:16px;line-height:1.6;color:rgba(12,12,12,.62);max-width:38ch;text-wrap:pretty}
.book-txt .endcta-meta{margin-top:28px}
.book-cal{min-height:600px;border:1px solid rgba(12,12,12,.1);border-radius:16px;background:#FFFFFF;box-shadow:0 1px 2px rgba(12,12,12,.04),0 28px 56px -32px rgba(12,12,12,.28);overflow:hidden}
#cal-inline{width:100%;min-height:600px;display:flex;align-items:center;justify-content:center;overflow:auto}
#cal-inline.is-live{display:block}
.book-fallback{font-size:14.5px;font-weight:500;color:#1A1918;transition:color .18s}
#cal-inline.is-live .book-fallback{display:none}
@media(max-width:980px){.book-in{grid-template-columns:1fr;gap:36px}.book-txt{position:static}}
@media(max-width:600px){.book-in{padding-left:14px;padding-right:14px}.book-cal,#cal-inline{min-height:520px}.book-cal{border-radius:12px}}
.ct-r .form{width:100%;max-width:640px;margin:0 auto}
.form-idx{grid-column:1 / -1;margin-top:10px}
.form-idx:first-child{margin-top:0}
.form .pill{display:inline-flex;gap:12px}
.ct-r .pill-solid{background:#1A1918;color:#FAFAFA}
.ct-r .pill-solid:hover{background:#000;color:#FAFAFA}

/* ---- small screens ---- */
@media (max-width:900px){
  .ph-in{display:block;padding-left:14px;padding-right:14px}
  .ph-h{max-width:none;font-size:clamp(34px,9vw,52px)}
  .ph-lede{margin-top:20px;max-width:none;padding-bottom:0}
  .ph-top{flex-wrap:wrap;row-gap:10px}
  .ph-meta{margin-left:0;flex-basis:100%;white-space:normal;line-height:1.6}
  .ph-plate{padding-left:14px;padding-right:14px}
  .frame{aspect-ratio:16 / 10}
  .sec-in,.blk-in,.cs2-in{padding-left:14px;padding-right:14px}
  .gsg,.gsg.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gs h3{margin-top:28px}
  .nums,.nums.n3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-row a{grid-template-columns:36px minmax(0,1fr) 18px;grid-template-areas:"n t a" "n s a" "n x a";row-gap:6px}
  .bl-n{grid-area:n}.bl-t{grid-area:t}.bl-s{grid-area:s}.bl-x{grid-area:x;justify-self:start}.bl-a{grid-area:a}
  .csgrid,.csgrid-2{grid-template-columns:minmax(0,1fr)}
  .cs2-grid{display:block}
  .cs2-nums{margin-top:40px}
  .cs2-sec{grid-template-columns:minmax(0,1fr)}
  .cs2-sec:nth-child(even) .frame{order:0}
  .csh{height:auto;min-height:0;margin-top:-64px;padding:10px}
  .csh-frame{flex:none;aspect-ratio:4 / 5}
  .csh-bar{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
  .csh-scroll{display:none}
  .ab2 .sec-in,.ab2 .blk-in{padding-left:14px;padding-right:14px}
  .ab2-hero{margin:14px 14px 0;padding:88px 22px 96px}
  .ab2-hero-q{font-size:clamp(23px,6.2vw,30px)}
  .ab2-corner{font-size:9.5px;bottom:16px}
  .ab2-corner.r{display:none}
  .ab2 .blk-meta{display:none}
  .ab2-tiles{padding:16px 14px 40px;gap:6px}
  .ab2-tiles img{height:88px}
  .ab2-split{grid-template-columns:minmax(0,1fr);gap:24px}
  .ab2-sticky{position:static}
  .ab2 .sec-h{max-width:none}
  .ab2 .sec-lede{margin-top:12px}
  .ab2-links span{display:none}
  .ab2-lv-row{grid-template-columns:32px minmax(0,1fr);gap:14px}
  .ab2-lv-img{grid-column:2;max-width:320px}
  .ab2-founder{grid-template-columns:minmax(0,1fr)}
  .ab2-fimg{max-width:280px}
  .ab2-bench-head{flex-direction:column;align-items:flex-start;gap:6px}
  .ab2-bench-note{text-align:left}
  .ab2-bench-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab2-tl-row{grid-template-columns:minmax(0,1fr);gap:6px}
  .jgrid,.rates{grid-template-columns:minmax(0,1fr)}
  .ct{grid-template-columns:minmax(0,1fr);min-height:0}
  .ct-l{min-height:70vh}
  .blk-split{display:block}
  .blk .signup-f{margin-top:28px;justify-self:start}
  .frame.strip{gap:6px}
}
@media (max-width:900px) and (hover:none){
  .bl-row a{grid-template-columns:36px minmax(0,1fr) 96px;grid-template-areas:"n t th" "n s th" "n x th"}
  .bl-th{grid-area:th;align-self:center}
  .bl-a{display:none}
}
@media (max-width:640px){
  .gsg,.gsg.g3,.nums,.nums.n3,.nums.n2{grid-template-columns:minmax(0,1fr)}
  .csh-bar{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .csh-scroll svg{animation:none}
  .peek{transition:none}
  .cscard .frame img,.jc a{transition:none}
}

/* Room for Portal in the shared navigation, including the compact phone bar. */
@media (min-width:861px) and (max-width:1150px){
  .nav .nav-txt{display:none}
  .nav .nl{padding-inline:10px;font-size:14px}
}
@media (max-width:520px){
  .nav .nav-links{display:flex;margin-left:auto;margin-right:8px}
  .nav .nav-links>:not([href="portal.html"]){display:none}
  .nav .nav-links>[href="portal.html"]{font-size:13px;padding-inline:9px}
  .nav .nav-cta{flex:0 0 auto}
}

/* visually hidden, read by screen readers and search engines */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* iOS Low Power Mode blocks autoplay and draws its own play glyph on top; background loops show their poster instead */
video:not([controls])::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
video:not([controls])::-webkit-media-controls{display:none!important}
.foot-legal{margin-left:14px;transition:color .2s}.foot-legal:hover{color:#fff}