/* Karpuk Studio: shared styles for every page */
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/geist-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/geist-mono-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/geist-mono-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --ink:#0c0b0a;
  --paper:#f4f1ec;
  --p86:rgba(244,241,236,.86);
  --p64:rgba(244,241,236,.64);
  --p42:rgba(244,241,236,.50);
  --p26:rgba(244,241,236,.26);
  --p10:rgba(244,241,236,.1);
  --hair:rgba(244,241,236,.14);
  --gut:clamp(20px,4.4vw,64px);
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.2,.75,.1,1);
  --expo:cubic-bezier(.16,1,.3,1);
  --inout:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg,canvas,video{display:block}
a{color:inherit}
h1,h2,h3,p,figure,ol,ul,dl,dd{margin:0}
.mono{font-family:var(--mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{padding-inline:var(--gut);max-width:1440px;margin-inline:auto}
::selection{background:var(--paper);color:var(--ink)}

/* film grain: two seamless layers jump to a new position 24 times a second, like real film; on load the grain develops from dense to calm */
.grain{position:fixed;left:-256px;top:-256px;width:calc(100vw + 512px);height:calc(100vh + 512px);z-index:95;pointer-events:none;background:url(grain.png) 0 0/256px 256px;background-image:image-set(url("grain.webp") type("image/webp"),url("grain.png") type("image/png"));opacity:.448;animation:grain-a .5s steps(1,end) infinite;will-change:transform}
.grain::after{content:"";position:absolute;inset:0;background:url(grain.png) 0 0/384px 384px;background-image:image-set(url("grain.webp") type("image/webp"),url("grain.png") type("image/png"));opacity:.36;animation:grain-b .375s steps(1,end) infinite;will-change:transform}
.motion .grain{opacity:.8}
.motion.is-loaded .grain{opacity:.448;transition:opacity 2.8s var(--ease) .15s}
.motion.is-leaving .grain{opacity:.76;transition:opacity .45s var(--ease)}
@keyframes grain-a{0%{transform:translate3d(-137px,61px,0)}8.33%{transform:translate3d(83px,-191px,0)}16.66%{transform:translate3d(-29px,173px,0)}25%{transform:translate3d(199px,17px,0)}33.33%{transform:translate3d(-181px,-97px,0)}41.66%{transform:translate3d(47px,131px,0)}50%{transform:translate3d(-73px,-13px,0)}58.33%{transform:translate3d(151px,-151px,0)}66.66%{transform:translate3d(-211px,107px,0)}75%{transform:translate3d(13px,-59px,0)}83.33%{transform:translate3d(113px,197px,0)}91.66%{transform:translate3d(-157px,29px,0)}}
@keyframes grain-b{0%{transform:translate3d(91px,-37px,0)}11.11%{transform:translate3d(-163px,149px,0)}22.22%{transform:translate3d(29px,-203px,0)}33.33%{transform:translate3d(-67px,71px,0)}44.44%{transform:translate3d(181px,-119px,0)}55.55%{transform:translate3d(-193px,-7px,0)}66.66%{transform:translate3d(59px,187px,0)}77.77%{transform:translate3d(-109px,-163px,0)}88.88%{transform:translate3d(139px,43px,0)}}
.still body{position:relative}
.still .grain{position:absolute;left:0;top:0;width:100%;height:100%;animation:none}
.still .grain::after{animation:none}

/* page change: ink curtain under the grain */
.curtain{position:fixed;inset:0;z-index:85;background:var(--ink);pointer-events:none;opacity:0;visibility:hidden}
.motion .curtain{visibility:visible;opacity:1;animation:curtain-safe .8s var(--ease) 2.6s forwards}
.motion.is-loaded .curtain{animation:none;opacity:0;transition:opacity 1.1s var(--ease)}
.motion.is-leaving .curtain{opacity:1;transition:opacity .4s cubic-bezier(.4,0,.6,1)}
@keyframes curtain-safe{to{opacity:0}}

/* buttons and links */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;border-radius:999px;font:500 15.5px/1 var(--sans);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;cursor:pointer;border:0;transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .6s var(--expo)}
.btn .ico{transition:transform .6s var(--expo)}
.btn:hover .ico,.more:hover .ico{transform:translateX(5px)}
.btn:active{transform:scale(.97)}
.btn--solid{background:var(--paper);color:var(--ink)}
.btn--solid:hover{background:#fff}
.btn--glass{color:var(--paper);background:rgba(244,241,236,.09);border:1px solid rgba(244,241,236,.24);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.btn--glass:hover{background:rgba(244,241,236,.16);border-color:rgba(244,241,236,.4)}
.btn:focus-visible,.more:focus-visible,.nav a:focus-visible,.nav button:focus-visible,.mail:focus-visible,.menu a:focus-visible,.qa summary:focus-visible,.row-link:focus-visible,.copy:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.more{position:relative;display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:500;font-size:15.5px;letter-spacing:-.01em;padding:10px 0 9px}
.more::before,.more::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--p42)}
.more::after{background:var(--paper);transform:scaleX(0);transform-origin:100% 50%;transition:transform .7s var(--expo)}
.more:hover::after{transform:scaleX(1);transform-origin:0 50%}
.more .ico{transition:transform .6s var(--expo)}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:80;height:68px;display:flex;align-items:center;justify-content:space-between;padding-inline:var(--gut);border-bottom:1px solid transparent;transition:background-color .6s var(--ease),border-color .6s var(--ease)}
.nav.is-solid{background:rgba(12,11,10,.56);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);border-bottom-color:var(--hair)}
.menu-open .nav{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.brand{display:inline-flex;align-items:baseline;gap:6px;text-decoration:none;font-size:16.5px;letter-spacing:-.025em;font-weight:600}
.brand span{font-weight:400;color:var(--p64)}
.nav__right{display:flex;align-items:center;gap:30px}
.nav__links{display:flex;gap:28px}
.nav__links a{position:relative;text-decoration:none;font-size:14.5px;color:var(--p86);transition:color .3s}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .7s var(--expo)}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after,.nav__links a[aria-current=page]::after{transform:scaleX(1);transform-origin:0 50%}
.nav__links a[aria-current=page]{color:var(--paper)}
.nav .btn{height:40px;padding:0 18px;font-size:14.5px}
.menu-btn{display:none;align-items:center;gap:10px;height:38px;padding:0 14px 0 16px;border-radius:999px;border:1px solid rgba(244,241,236,.24);background:rgba(244,241,236,.06);color:var(--paper);font:500 14px/1 var(--sans);cursor:pointer;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.menu-btn i{position:relative;width:14px;height:8px}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:2px;transition:transform .6s var(--expo)}
.menu-btn i::before{top:0}.menu-btn i::after{bottom:0}
.menu-open .menu-btn i::before{transform:translateY(3.25px) rotate(45deg)}
.menu-open .menu-btn i::after{transform:translateY(-3.25px) rotate(-45deg)}

/* phone menu */
.menu{position:fixed;inset:0;z-index:75;background:var(--ink);display:flex;flex-direction:column;justify-content:space-between;padding:108px var(--gut) 36px;visibility:hidden;opacity:0;transition:opacity .5s var(--ease),visibility 0s linear .5s}
.menu-open .menu{visibility:visible;opacity:1;transition:opacity .5s var(--ease)}
.menu nav{display:flex;flex-direction:column}
.menu__link{display:flex;align-items:baseline;gap:14px;overflow:hidden;text-decoration:none;font-weight:500;font-size:clamp(40px,11vw,56px);line-height:1.14;letter-spacing:-.04em;padding:4px 0}
.menu__link small{font:500 11.5px/1 var(--mono);color:var(--p42);letter-spacing:.04em}
.menu__link>span{display:inline-flex;align-items:baseline;gap:14px;transform:translate3d(0,110%,0);transition:transform .9s var(--expo);transition-delay:calc(var(--i) * 55ms + 60ms)}
.menu-open .menu__link>span{transform:none}
.menu__link[aria-current=page]{color:var(--p64)}
.menu__foot{display:flex;flex-direction:column;gap:18px;opacity:0;transform:translate3d(0,14px,0);transition:opacity .7s var(--ease) .3s,transform .9s var(--expo) .3s}
.menu-open .menu__foot{opacity:1;transform:none}
.menu__foot .mono{font-size:12px;color:var(--p42)}
.menu-open body{overflow:hidden}

/* section heads */
.sec-head{display:flex;align-items:center;gap:16px;margin-bottom:clamp(40px,6vw,84px)}
.sec-num{display:inline-block;font:500 11.5px/1 var(--mono);color:var(--p64);border:1px solid var(--hair);border-radius:999px;padding:6px 10px 5px;letter-spacing:.04em;white-space:nowrap}
h2{font-weight:500;font-size:clamp(30px,3.3vw,48px);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.eyebrow{display:flex;align-items:center;gap:12px;font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--p64)}
.eyebrow a{text-decoration:none;transition:color .3s}
.eyebrow a:hover{color:var(--paper)}
.eyebrow i{width:18px;height:1px;background:var(--p42)}

/* motion: reveals start as soon as a block enters, so nothing waits in the dark */
.motion [data-reveal]{opacity:0;transform:translate3d(0,36px,0);transition:opacity 1s var(--ease) var(--rd,0ms),transform 1.4s var(--expo) var(--rd,0ms)}
.motion [data-reveal].is-in{opacity:1;transform:none}
.motion [data-reveal=clip]{opacity:1;transform:none;clip-path:inset(12% 9% 12% 9%);transition:clip-path 1.7s var(--expo) var(--rd,0ms)}
.motion [data-reveal=clip].is-in{clip-path:inset(0 0 0 0)}
.motion [data-reveal=clip] .zoom{transform:scale(1.2);transition:transform 2.2s var(--expo) var(--rd,0ms)}
.motion [data-reveal=clip].is-in .zoom{transform:none}
.motion [data-reveal=line]{opacity:1;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s var(--expo) var(--rd,0ms)}
.motion [data-reveal=line].is-in{transform:none}
.zoom{position:absolute;inset:0}
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.sw>span{display:inline-block}
.motion [data-split] .sw>span{transform:translate3d(0,112%,0);transition:transform 1.3s var(--expo);transition-delay:calc(var(--rd,0ms) + var(--i) * 45ms)}
.motion [data-split].is-in .sw>span,.motion .is-in [data-split] .sw>span{transform:none}
.motion.is-loaded [data-split=load] .sw>span{transform:none;transition-delay:calc(200ms + var(--i) * 58ms)}
.motion .fade{opacity:0;transform:translate3d(0,18px,0);transition:opacity 1.2s var(--ease) var(--fd,0ms),transform 1.5s var(--expo) var(--fd,0ms)}
.motion.is-loaded .fade{opacity:1;transform:none}
@media(max-width:860px){
  .motion.is-text-loaded [data-split=load] .sw>span{transform:none;transition-delay:calc(200ms + var(--i) * 58ms)}
  .motion.is-text-loaded .fade{opacity:1;transform:none}
}

/* photos with depth */
canvas.depth{opacity:0;transition:opacity .8s ease}
canvas.depth.is-ready{opacity:1}
.gl-live>img,.gl-live picture img{visibility:hidden}

/* receipts: every number carries its source */
.receipt{font:400 12.5px/1.5 var(--mono);border-top:1px dashed var(--p26);padding-top:16px;display:grid;gap:8px;margin-bottom:26px;max-width:470px}
.receipt div{display:grid;grid-template-columns:70px 1fr;gap:14px}
.receipt dt{color:var(--p42);text-transform:uppercase;letter-spacing:.09em;font-size:10.5px;padding-top:2px}
.receipt dd{color:var(--p86)}
.viz__key{font:400 11.5px/1.4 var(--mono);letter-spacing:.04em;color:var(--p42);margin-top:22px}

/* results: big numbers */
.case__client{display:flex;align-items:baseline;gap:14px;font-weight:500;font-size:16px;letter-spacing:-.015em}
.case__client .mono{font-size:11.5px;color:var(--p42);font-weight:500}
.case__big{display:flex;align-items:center;gap:.08em;font-weight:250;font-size:clamp(84px,9.6vw,140px);line-height:.9;letter-spacing:-.058em;margin:22px 0 14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.case__big .arw{width:.56em;height:.4em;margin:0 .06em 0 .02em}
.case__claim{font-size:clamp(20px,1.75vw,25px);line-height:1.22;letter-spacing:-.02em;max-width:17em;margin-bottom:28px}
.arw{width:.6em;height:.44em;flex:none;overflow:visible}

/* viz: bars drawn to scale (after = 1.25 x before) */
.bars{position:relative;display:grid;gap:26px;padding-top:34px}
.bars__label{display:block;font:400 12px/1 var(--mono);color:var(--p64);margin-bottom:10px;letter-spacing:.02em}
.bars__track{position:relative;height:64px;background:rgba(244,241,236,.05)}
.bars__fill{position:absolute;inset:0 auto 0 0;width:100%;background:var(--p26);transform-origin:0 50%;transform:scaleX(var(--to))}
.bars__fill.is-after{background:var(--paper)}
.bars__mark{position:absolute;left:80%;top:22px;bottom:-10px;border-left:1px dashed var(--p42)}
.bars__gain{position:absolute;left:80%;right:0;top:0;padding-top:8px;font:500 12.5px/1 var(--mono);text-align:center}
.bars__gain b{position:absolute;left:0;right:0;top:0;height:1px;background:var(--paper);transform-origin:0 50%}
.bars__gain::before,.bars__gain::after{content:"";position:absolute;top:-5px;height:9px;border-left:1px solid var(--paper)}
.bars__gain::before{left:0}.bars__gain::after{right:0}

/* viz: one dot per started conversation, on a sunflower spiral */
.sun{width:min(100%,560px);aspect-ratio:1;margin-inline:auto;touch-action:pan-y}
.sun svg{width:100%;height:100%;overflow:visible}
.sun circle{fill:var(--paper);transform-box:fill-box;transform-origin:center}
.sun + .viz__key{text-align:center}

/* viz: rows of dots */
.rows{display:grid;gap:34px}
.rows__row{display:grid;grid-template-columns:132px auto 1fr;align-items:end;gap:22px}
.rows__label{font:400 12px/1.35 var(--mono);color:var(--p64);padding-bottom:2px}
.dots{--d:24px;--g:10px;display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,var(--d));grid-auto-columns:var(--d);gap:var(--g)}
.dots i{border-radius:50%;background:var(--p26)}
.dots.is-after i{background:var(--paper)}
.rows__n{font-weight:300;font-size:30px;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}

/* viz: before and after periods, one tick per day */
.span{display:grid;gap:14px}
.span__bar{display:grid;grid-template-columns:repeat(118,1fr);gap:2px;height:46px;align-items:end}
.span__bar i{height:100%;background:var(--p26);transform-origin:50% 100%}
.span__bar i.is-after{background:var(--paper)}
.span__legend{display:grid;grid-template-columns:1fr 1fr;gap:2px;font:400 12px/1.45 var(--mono);color:var(--p64)}
.span__legend div{border-top:1px solid var(--hair);padding-top:12px}
.span__legend b{display:block;font-weight:500;color:var(--paper)}

/* viz: Ternotattoo measures, before and after, one dot per conversation or person */
.measures{display:grid;gap:clamp(34px,4vw,54px)}
.measure{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;border-top:1px solid var(--hair);padding-top:22px}
.measure__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.measure__head h3{font-weight:500;font-size:clamp(19px,1.6vw,23px);letter-spacing:-.02em;line-height:1.2}
.measure__nums{font-weight:300;font-size:clamp(28px,2.6vw,38px);letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;display:flex;align-items:center;gap:.14em}
.measure__nums .arw{width:.56em;height:.42em}
.measure__rows{display:grid;gap:10px}
.measure__row{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:14px;font:400 11.5px/1 var(--mono);color:var(--p42);letter-spacing:.04em;text-transform:uppercase}
.mdots{display:flex;flex-wrap:wrap;gap:6px}
.mdots i{width:12px;height:12px;border-radius:50%;background:var(--p26)}
.mdots.is-after i{background:var(--paper)}
.spend{display:grid;gap:10px;margin-top:6px}
.spend__row{display:grid;grid-template-columns:64px 1fr 84px;align-items:center;gap:14px;font:400 11.5px/1 var(--mono);color:var(--p42);text-transform:uppercase;letter-spacing:.04em}
.spend__row span:last-child{color:var(--p86);text-align:right;text-transform:none;letter-spacing:0;font-size:13px}
.spend__track{height:12px;background:rgba(244,241,236,.05)}
.spend__track i{display:block;height:100%;background:var(--p26);transform-origin:0 50%}
.spend__row.is-after .spend__track i{background:var(--paper)}

/* page hero with a photo */
.phero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.phero__media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#07080a}
.phero__media img,.phero__media canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero__media img{object-position:var(--pos,60% 50%);transform:scale(1.035)}
.phero__copy{padding:140px var(--gut) clamp(48px,7vw,96px);max-width:calc(820px + var(--gut))}
.phero__title{font-weight:500;font-size:clamp(40px,5vw,76px);line-height:1.01;letter-spacing:-.042em;text-wrap:balance;margin-top:22px;max-width:11em}
.phero__lede{margin-top:24px;font-size:clamp(17px,1.35vw,19px);line-height:1.5;color:var(--p86);max-width:32em}
.phero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* page hero without a photo (case pages) */
.chero{padding-top:clamp(120px,14vw,190px);padding-bottom:clamp(56px,7vw,100px)}
.chero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
.chero__copy{grid-column:1/span 6}
.chero__title{font-weight:500;font-size:clamp(46px,6.4vw,96px);line-height:.98;letter-spacing:-.05em;margin:26px 0 20px;text-wrap:balance}
.chero__sub{font-size:clamp(19px,1.6vw,23px);letter-spacing:-.02em;color:var(--p86)}
.facts{display:grid;gap:10px;margin-top:34px;font:400 12.5px/1.5 var(--mono);max-width:520px}
.facts div{display:grid;grid-template-columns:92px 1fr;gap:14px;border-top:1px solid var(--hair);padding-top:10px}
.facts dt{color:var(--p42);text-transform:uppercase;letter-spacing:.09em;font-size:10.5px;padding-top:2px}
.facts dd{color:var(--p86)}
.chero__result{grid-column:8/span 5}
.chero__result .case__big{font-size:clamp(96px,12vw,188px);margin-top:0}
.chero__result .case__claim{margin-bottom:0}

/* case body */
.cbody{padding-block:clamp(40px,5vw,80px) clamp(80px,9vw,140px)}
.cviz{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:48px;align-items:start;border-top:1px solid var(--hair);padding-top:clamp(40px,5vw,72px)}
.cviz__head{grid-column:1/span 4}
.cviz__head h2{font-size:clamp(26px,2.5vw,36px)}
.cviz__head p{color:var(--p64);margin-top:16px;max-width:24em}
.cviz__body{grid-column:6/span 7}
.cnotes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px;margin-top:clamp(72px,9vw,130px)}
.cnote{grid-column:span 6;border-top:1px solid var(--hair);padding-top:26px}
.cnote h2{font-size:clamp(24px,2.2vw,32px);margin-bottom:18px}
.cnote p{color:var(--p86);max-width:30em}
.cnote .receipt{margin-top:22px}
.cnote .receipt div{grid-template-columns:78px 1fr}

/* next case */
.next{display:block;text-decoration:none;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);overflow:hidden}
.next__in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:clamp(34px,5vw,64px)}
.next__label{font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--p64);margin-bottom:14px}
.next__name{font-weight:500;font-size:clamp(34px,5vw,76px);letter-spacing:-.045em;line-height:1;transition:transform .9s var(--expo)}
.next__arrow{flex:none;width:clamp(56px,6vw,88px);height:clamp(56px,6vw,88px);border-radius:50%;border:1px solid var(--p26);display:grid;place-items:center;transition:background-color .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease),transform .9s var(--expo)}
.next:hover .next__name{transform:translateX(14px)}
.next:hover .next__arrow{background:var(--paper);color:var(--ink);border-color:var(--paper);transform:rotate(-45deg)}

/* work index */
.index{padding-block:clamp(64px,8vw,120px) clamp(40px,5vw,80px)}
.entry{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:36px;align-items:center;padding-block:clamp(56px,7vw,100px);border-top:1px solid var(--hair)}
.entry__copy{grid-column:1/span 5}
.entry__viz{grid-column:7/span 6}
.entry--flip .entry__copy{grid-column:8/span 5;order:2}
.entry--flip .entry__viz{grid-column:1/span 6;order:1}
.entry__loc{font:400 12px/1.4 var(--mono);color:var(--p64);letter-spacing:.02em;margin-top:10px}
.entry h2{font-size:clamp(34px,3.6vw,54px);margin-top:18px}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:20px 0 26px}
.tags li{font:400 12px/1 var(--mono);color:var(--p86);border:1px solid var(--hair);border-radius:999px;padding:8px 11px 7px}
.entry .receipt{margin-top:4px}
.entry .receipt div{grid-template-columns:78px 1fr}
.entry__extra{font-size:15px;color:var(--p64);max-width:30em;margin:-6px 0 26px}

/* shared closing block with a photo */
.cta{position:relative;min-height:100svh;display:flex;align-items:center;isolation:isolate}
.cta__media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#0b0907}
.cta__media img,.cta__media canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta__media img{object-position:var(--pos,72% 50%);transform:scale(1.035)}
.motion .cta__media img{filter:brightness(calc(.2 + .8 * var(--lit, 1)))}
.cta__copy{padding:120px var(--gut);max-width:calc(820px + var(--gut))}
.cta__copy p{color:var(--p86);font-size:19px;margin-top:22px;max-width:27em}
.cta .sec-head{margin-bottom:22px}
.mail{display:inline-block;position:relative;margin:40px 0 38px;font-weight:300;font-size:clamp(28px,4vw,56px);line-height:1.05;letter-spacing:-.045em;text-decoration:none;padding-bottom:10px}
.mail::before,.mail::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--p42)}
.mail::after{background:var(--paper);transform:scaleX(0);transform-origin:100% 50%;transition:transform .9s var(--expo)}
.mail:hover::after{transform:scaleX(1);transform-origin:0 50%}
.cta__row{display:flex;flex-wrap:wrap;align-items:center;gap:14px}

/* how we work (home and offer) */
.how{padding-block:clamp(48px,6vw,96px)}
.how__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.how__head{grid-column:1/span 4;position:sticky;top:132px;align-self:start}
.how__head .sec-head{margin-bottom:34px}
.how__note{color:var(--p64);max-width:22em;margin:-10px 0 34px;font-size:15.5px}
.meter{position:relative;width:1px;height:180px;background:var(--hair);margin-left:18px}
.meter i{position:absolute;inset:0;background:var(--paper);transform-origin:50% 0;transform:scaleY(var(--m,1))}
.steps{grid-column:6/span 7;list-style:none;padding:0}
.step{display:grid;grid-template-columns:72px 1fr;gap:18px;padding:36px 0 38px;border-top:1px solid var(--hair)}
.step:last-child{border-bottom:1px solid var(--hair)}
.step__n{font:500 12.5px/1 var(--mono);color:var(--p64);padding-top:12px;letter-spacing:.04em}
.step h3{font-weight:500;font-size:clamp(24px,2.35vw,34px);line-height:1.08;letter-spacing:-.032em;margin-bottom:12px}
.step p{color:var(--p64);max-width:32em}
.motion .step{opacity:var(--lit,.78)}
.steps .receipt dt{color:var(--p64)}
.receipt--split{margin:22px 0 0;max-width:420px}
.receipt--split div{grid-template-columns:128px 1fr}

/* offer: price as an itemised receipt */
.price{padding-block:clamp(88px,10vw,150px) clamp(48px,6vw,96px)}
.price__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:48px;align-items:start}
.price__lead{grid-column:1/span 5}
.price__big{display:flex;align-items:flex-start;font-weight:250;font-size:clamp(110px,13vw,200px);line-height:.86;letter-spacing:-.06em;font-variant-numeric:tabular-nums;margin:30px 0 18px}
.price__big small{font-size:.26em;font-weight:400;letter-spacing:-.02em;color:var(--p64);margin:.5em 0 0 .18em;white-space:nowrap}
.price__lead p{color:var(--p86);max-width:24em}
.bill{grid-column:7/span 6;font-family:var(--mono);font-size:13px;line-height:1.5;border-top:1px dashed var(--p26);border-bottom:1px dashed var(--p26);padding:8px 0}
.bill__row{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:12px;padding:18px 0 16px;border-bottom:1px solid var(--hair)}
.bill__row:last-child{border-bottom:0}
.bill__k{color:var(--p86);letter-spacing:.01em}
.bill__dots{border-bottom:1px dotted var(--p26);transform:translateY(-4px)}
.bill__v{font-family:var(--sans);font-weight:400;font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;white-space:nowrap;display:flex;align-items:baseline;gap:10px}
.bill__v s{position:relative;text-decoration:none;color:var(--p42);font-size:.72em}
.bill__v s::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:1.5px;background:var(--paper);transform-origin:0 50%;transform:scaleX(var(--strike,1))}
.motion .bill__v s::after{transform:scaleX(0);transition:transform .9s var(--expo) .9s}
.motion .is-in .bill__v s::after{transform:scaleX(1)}
.bill__v em{font-style:normal;font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;color:var(--p64)}
.bill__note{grid-column:1/-1;color:var(--p42);font-size:12px;margin-top:-4px}

/* offer: included and not included */
.scope{padding-block:clamp(48px,6vw,96px)}
.scope__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:56px}
.scope__col{grid-column:span 6}
.scope__col h2{font-size:clamp(26px,2.5vw,36px);margin-bottom:26px}
.ticks{list-style:none;padding:0;display:grid}
.ticks li{display:grid;grid-template-columns:28px 1fr;gap:14px;padding:18px 0 17px;border-top:1px solid var(--hair);font-size:17.5px;line-height:1.45}
.ticks li:last-child{border-bottom:1px solid var(--hair)}
.ticks svg{width:18px;height:18px;margin-top:3px}
.ticks--out li{color:var(--p64)}

/* offer: video slot */
.film{padding-block:clamp(48px,6vw,96px)}
.film__frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0a0908}
.film__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.film__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.film__frame picture[hidden],.film__frame video[hidden],.film__play[hidden]{display:none}
.film__play{position:absolute;left:50%;top:50%;width:clamp(76px,8vw,112px);height:clamp(76px,8vw,112px);margin:calc(clamp(76px,8vw,112px) / -2) 0 0 calc(clamp(76px,8vw,112px) / -2);border-radius:50%;border:1px solid rgba(244,241,236,.5);display:grid;place-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(244,241,236,.08)}
.film__play::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(244,241,236,.35);animation:ring 3.2s var(--ease) infinite}
@keyframes ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.55);opacity:0}}
.film__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:18px;font:400 12.5px/1.5 var(--mono);color:var(--p64)}
.film__meta b{font-weight:500;color:var(--paper)}

/* offer: questions */
.faq{padding-block:clamp(64px,8vw,120px)}
.faq__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.faq__head{grid-column:1/span 4}
.faq__list{grid-column:6/span 7;border-bottom:1px solid var(--hair)}
.qa{border-top:1px solid var(--hair)}
.qa summary{list-style:none;display:grid;grid-template-columns:1fr 22px;gap:24px;align-items:center;padding:24px 0 23px;cursor:pointer;font-weight:500;font-size:clamp(18px,1.5vw,21px);letter-spacing:-.018em;line-height:1.3;transition:color .3s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:#fff}
.qa__ico{position:relative;width:16px;height:16px;justify-self:end}
.qa__ico::before,.qa__ico::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .7s var(--expo)}
.qa__ico::after{transform:rotate(90deg)}
.qa[open] .qa__ico::after{transform:rotate(0deg)}
.qa__a{overflow:hidden}
.qa__a p{padding:0 48px 26px 0;color:var(--p64);max-width:38em}

/* about */
.lead{padding-block:clamp(88px,10vw,160px) clamp(40px,5vw,80px)}
.lead__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.lead__head{grid-column:1/span 3}
.lead__body{grid-column:4/span 8}
.lead__text{font-weight:400;font-size:clamp(28px,3.3vw,48px);line-height:1.12;letter-spacing:-.033em;text-wrap:pretty}
.lead__text .wd{transition:opacity .35s linear}
.motion .lead__text .wd{opacity:var(--o,.18)}
.lead__more{margin-top:34px;font-size:clamp(18px,1.4vw,20px);color:var(--p86);max-width:34em}
.worklog{padding-block:clamp(48px,6vw,96px)}
.worklog__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.worklog__head{grid-column:1/span 4}
.worklog__list{grid-column:6/span 7}
.wl{display:grid;grid-template-columns:1fr auto;gap:10px 24px;align-items:start;padding:28px 0 26px;border-top:1px solid var(--hair);text-decoration:none}
.wl:last-child{border-bottom:1px solid var(--hair)}
.wl h3{font-weight:500;font-size:clamp(24px,2.3vw,32px);letter-spacing:-.03em;line-height:1.1}
.wl .tags{grid-column:1/-1;margin:4px 0 0}
.wl__go{font:500 12px/1 var(--mono);color:var(--p64);display:flex;align-items:center;gap:8px;padding-top:10px;transition:color .3s}
.wl:hover .wl__go{color:var(--paper)}
.wl:hover .ico{transform:translateX(5px)}
.wl .ico{transition:transform .6s var(--expo)}
.proof{padding-block:clamp(64px,8vw,120px)}
.proof__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:44px;align-items:start}
.proof__copy{grid-column:1/span 5}
.proof__copy p{color:var(--p86);margin-top:22px;max-width:28em;font-size:18px}
.proof__demo{grid-column:7/span 6}
.lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hair);margin-top:34px}
.lanes div{padding:18px 16px 0 0;font:400 12px/1.45 var(--mono);color:var(--p86);border-right:1px solid var(--hair);min-height:110px}
.lanes div+div{padding-left:16px}
.lanes div:last-child{border-right:0}
.lanes span{display:block;color:var(--p42);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:8px}
.agree{padding-block:clamp(40px,5vw,80px) clamp(88px,10vw,150px)}
.agree__in{border-top:1px solid var(--hair);padding-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:28px;align-items:end}
.agree h2{grid-column:1/span 7;font-size:clamp(34px,4.4vw,64px);letter-spacing:-.042em;line-height:1.02}
.agree__side{grid-column:9/span 4}
.agree__side p{color:var(--p86);margin-bottom:26px}
.agree .cta__row{gap:12px}

/* contact */
.contact{position:relative;min-height:100svh;display:flex;align-items:flex-end;isolation:isolate}
.contact__copy{padding:150px var(--gut) clamp(56px,7vw,96px);max-width:calc(900px + var(--gut))}
.contact__copy .phero__lede{max-width:30em}
.mailrow{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.mailrow .mail{margin:36px 0 30px}
.copy{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;border:1px solid rgba(244,241,236,.24);background:rgba(244,241,236,.06);color:var(--paper);font:500 12.5px/1 var(--mono);cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background-color .4s var(--ease),border-color .4s var(--ease)}
.copy:hover{background:rgba(244,241,236,.14);border-color:rgba(244,241,236,.42)}
.next-steps{padding-block:clamp(72px,9vw,140px)}
.ns__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:56px}
.ns{grid-column:span 6;border-top:1px solid var(--hair);padding-top:26px}
.ns h2{font-size:clamp(26px,2.5vw,36px);margin-bottom:18px}
.ns p{color:var(--p86);max-width:28em;margin-bottom:26px}
.ns ol{list-style:none;padding:0;display:grid;gap:0;margin-top:6px}
.ns li{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:16px 0;border-top:1px solid var(--hair);color:var(--p86)}
.ns li span{font:500 12px/1.9 var(--mono);color:var(--p64)}

/* footer */
.foot{border-top:1px solid var(--hair);padding-block:34px 40px}
.foot__grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;font-size:14px;color:var(--p64)}
.foot nav{display:flex;flex-wrap:wrap;gap:24px}
.foot a{text-decoration:none;transition:color .3s}
.foot a:hover,.foot a[aria-current=page]{color:var(--paper)}
.foot .brand{color:var(--paper)}

/* phones */
@media (max-width:860px){
  body{font-size:16px}
  .nav{height:58px}
  .nav__right{gap:8px}
  .nav__links{display:none}
  .menu-btn{display:inline-flex}
  .nav .btn{height:38px;padding:0 15px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .4s var(--ease),background-color .35s}
  .nav.show-cta .btn{opacity:1;pointer-events:auto}
  .menu-open .nav .btn{opacity:0;pointer-events:none}
  .case__big{font-size:clamp(76px,23vw,104px)}
  .bars__track{height:46px}
  .rows__row{grid-template-columns:1fr auto;row-gap:10px}
  .rows__label{grid-column:1/-1}
  .dots{--d:17px;--g:8px}
  .span__bar{height:34px;gap:1px}
  .mdots{gap:5px}
  .mdots i{width:10px;height:10px}
  .phero{min-height:0;display:block}
  .phero__media{position:relative;inset:auto;z-index:0;height:64svh;min-height:420px}
  .phero__media img{object-position:var(--mpos,var(--pos,60% 50%))}
  .phero__copy{padding:30px var(--gut) 56px;margin-top:-120px;position:relative}
  .phero__title{font-size:clamp(36px,10vw,46px);margin-top:18px}
  .phero__lede{font-size:16.5px;margin-top:18px}
  .phero__cta{margin-top:26px}
  .chero{padding-top:104px}
  .chero__grid,.cviz,.cnotes,.entry,.entry--flip,.price__grid,.scope__grid,.faq__grid,.lead__grid,.worklog__grid,.proof__grid,.agree__in,.ns__grid,.how__grid{grid-template-columns:minmax(0,1fr)}
  .chero__copy,.chero__result,.cviz__head,.cviz__body,.cnote,.entry__copy,.entry__viz,.entry--flip .entry__copy,.entry--flip .entry__viz,.price__lead,.bill,.scope__col,.faq__head,.faq__list,.lead__head,.lead__body,.worklog__head,.worklog__list,.proof__copy,.proof__demo,.agree h2,.agree__side,.ns,.how__head,.steps{grid-column:1;order:0}
  .chero__result{margin-top:48px}
  .chero__title{font-size:clamp(44px,13vw,60px)}
  .entry__viz{order:1!important}
  .cviz{row-gap:34px}
  .faq__head,.worklog__head,.lead__head{margin-bottom:30px}
  .qa__a p{padding-right:8px}
  .how__head{position:static}
  .meter{display:none}
  .step{grid-template-columns:48px 1fr;gap:10px;padding:28px 0 30px}
  .cta{display:block;min-height:0}
  .cta__media{position:relative;inset:auto;z-index:0;aspect-ratio:4/4.6}
  .cta__media img{object-position:var(--mpos,var(--pos,74% 50%))}
  .cta__copy{padding:56px var(--gut) 84px}
  .cta__copy p{font-size:17px}
  .mail{font-size:clamp(26px,7.6vw,34px);margin:30px 0 30px}
  .contact{display:block;min-height:0}
  .contact .phero__media{height:62svh}
  .contact__copy{padding:30px var(--gut) 56px;margin-top:-56px;position:relative}
  .mailrow .mail{margin:26px 0 8px}
  .lanes{grid-template-columns:1fr}
  .lanes div{border-right:0;border-bottom:1px solid var(--hair);padding:14px 0!important;min-height:0}
  .bill__row{grid-template-columns:1fr auto}
  .bill__dots{display:none}
  .next__in{padding-block:34px}
  .foot__grid{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .grain,.grain::after,.film__play::before{animation:none}
  .curtain{display:none}
  .sw>span,.fade,[data-reveal],.menu__link>span,.menu__foot{transition:none!important}
}

/* page hero extras */
.jump{list-style:none;padding:0;margin-top:34px;display:flex;flex-wrap:wrap;gap:10px}
.jump a{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px;border-radius:999px;text-decoration:none;font-size:14px;color:var(--paper);background:rgba(244,241,236,.08);border:1px solid rgba(244,241,236,.22);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:background-color .45s var(--ease),border-color .45s var(--ease)}
.jump a:hover{background:rgba(244,241,236,.16);border-color:rgba(244,241,236,.4)}
.jump .mono{font-size:11px;color:var(--p64)}
.phero__price{margin-top:20px;font:400 13px/1.55 var(--mono);color:var(--p86);max-width:36em}
.chero__result .bars,.chero__result .rows{margin-top:34px}
.chero__result .viz__key{max-width:34em}
.qa.is-closing .qa__ico::after{transform:rotate(90deg)}
.entry__fig{margin:0}
@media (max-width:860px){
  .jump{margin-top:26px}
  .chero__result .bars{padding-top:26px}
}
@media (max-width:860px){
  .menu-btn{transition:padding .5s var(--expo),width .5s var(--expo)}
  .nav.show-cta .menu-btn{width:38px;padding:0;justify-content:center}
  .nav.show-cta .menu-btn span{display:none}
  .menu-open .nav .menu-btn{width:auto;padding:0 14px 0 16px}
  .menu-open .nav .menu-btn span{display:inline}
}

/* a photo wakes up with the lights; the 3D scene takes over as soon as it is ready */
.motion .hero__media img,.motion .phero__media img{filter:brightness(.22) contrast(1.3);transform:scale(1.11)}
.motion.is-loaded .hero__media img,.motion.is-loaded .phero__media img{filter:none;transform:scale(1.035);transition:filter 2.2s var(--inout),transform 2.8s var(--expo)}

/* keyboard access */
.skip-link{position:fixed;left:var(--gut);top:12px;z-index:110;padding:12px 18px;background:var(--paper);color:var(--ink);text-decoration:none;transform:translateY(-160%);transition:transform .2s var(--ease)}
.skip-link:focus-visible{transform:translateY(0);outline:2px solid var(--paper);outline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--paper);outline-offset:4px}