/* askfor. editorial system
   Layout: 12 column grid, wide margins, asymmetric blocks, real photography carries the page.
   Type: Hellix only. One accent (signal orange) used for the full stop and active states. */
@font-face{font-family:'Hellix';font-weight:400;font-style:normal;font-display:swap;src:url(/assets/hellix-Regular.woff2) format('woff2')}
@font-face{font-family:'Hellix';font-weight:400;font-style:italic;font-display:swap;src:url(/assets/hellix-RegularItalic.woff2) format('woff2')}
@font-face{font-family:'Hellix';font-weight:500;font-style:normal;font-display:swap;src:url(/assets/hellix-Medium.woff2) format('woff2')}
@font-face{font-family:'Hellix';font-weight:600;font-style:normal;font-display:swap;src:url(/assets/hellix-SemiBold.woff2) format('woff2')}
:root{
  --paper:#ffffff;--ink:#111111;--mute:#6b6b6b;--faint:#9a9a9a;--line:#e4e4e2;--soft:#f3f3f1;
  --accent:#111111;--green:#1f7a45;
  /* aliases used by the diagnostic pages */
  --g1:#fcfcfc;--g2:#f7f7f6;--g3:#efefed;--g4:#e4e4e2;--g5:#dcdcda;--g6:#d4d4d2;--g7:#c8c8c6;--g8:#b5b5b3;--g9:#8f8f8d;--g10:#838381;--g11:#6b6b6b;--g12:#111111;
  --shadow:0 0 0 1px var(--line);--shadow-lg:0 0 0 1px var(--line),0 12px 30px -12px rgba(0,0,0,.12);
  --ease:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.77,0,.175,1);--ease-drawer:cubic-bezier(.32,.72,0,1);
  --w:1320px;--gut:32px;
  --font:'Hellix','Helvetica Neue',Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;color-scheme:light;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:var(--font);font-size:17px;line-height:1.55;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:'kern'}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--ink);color:#fff}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
section{padding:120px 0}
h1,h2,h3{font-weight:600;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(48px,8.4vw,132px);line-height:.93;letter-spacing:-.05em}
h2{font-size:clamp(38px,5.4vw,80px);line-height:.98;letter-spacing:-.045em}
h3{font-size:22px;line-height:1.2;letter-spacing:-.02em}
p{color:var(--mute)}
p b,p strong{color:var(--ink);font-weight:500}
.dot{color:inherit}
.big{font-size:clamp(22px,2.3vw,32px);line-height:1.3;letter-spacing:-.02em;color:var(--ink);font-weight:500}
.big .m{color:var(--mute)}
.small{font-size:14px;color:var(--mute)}
.num{font-variant-numeric:tabular-nums}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(160%) blur(10px);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s;view-transition-name:nav}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .wrap{height:72px;display:flex;align-items:center;gap:32px}
.logo{display:flex;align-items:center;text-decoration:none;color:var(--ink)}
.logo img{height:22px;width:auto}
.logo svg{display:block;height:22px;width:auto;fill:currentColor;overflow:visible}
/* the word folds into the monogram when the page scrolls: s k o r . fade, the f slides against the a, the bridge closes */
.lg .x{transition:opacity .28s var(--ease) calc(.25s + var(--d,0s)),transform .45s var(--ease) calc(.25s + var(--d,0s));transform-box:fill-box;transform-origin:50% 100%}
.lg .f{transition:transform .6s cubic-bezier(.7,0,.2,1) .05s}
.lg .br{transform:scaleX(0);transform-origin:0 50%;transform-box:fill-box;transition:transform .25s cubic-bezier(.7,0,.2,1) 0s}
.nav.compact .lg .x{opacity:0;transform:translateY(14%);transition-delay:var(--d,0s)}
.nav.compact .lg .f{transform:translateX(var(--fx));transition-delay:.12s}
.nav.compact .lg .br{transform:scaleX(1);transition-delay:.5s}
@media(prefers-reduced-motion:reduce){.lg .x,.lg .f,.lg .br{transition:none!important}}
.nav nav{margin-left:auto}
.nav ul{display:flex;gap:28px;list-style:none}
.nav ul a{font-size:15px;color:var(--ink);text-decoration:none;position:relative;padding:4px 0}
.nav ul a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
@media(hover:hover){.nav ul a:hover::after{transform:scaleX(1);transform-origin:left}}
.nav ul a[aria-current]::after{transform:scaleX(1)}
.nav .hl{display:none}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;font:inherit;font-size:15px;font-weight:500;background:var(--ink);color:#fff;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;user-select:none;transition:transform .2s var(--ease),background .25s}
.btn:active{transform:scale(.97)}
.btn.lg{height:56px;padding:0 28px;font-size:16px}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn .arr{transition:transform .35s var(--ease)}
@media(hover:hover){.btn:hover{background:#3a3a3a}.btn.ghost:hover{background:var(--ink);color:#fff}.btn:hover .arr{transform:translateX(3px)}}
.nav .nb{height:40px;padding:0 18px;font-size:14px}
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ul{color:var(--ink);text-decoration:none;font-weight:500;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .45s var(--ease),color .2s}
@media(hover:hover){.ul:hover{background-size:0 1px;background-position:100% 100%}}
.micro{font-size:14px;color:var(--faint);margin-top:14px}

/* reveal: text slides, images unmask */
.js [data-r]{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.js [data-r].in{opacity:1;transform:none}
.js [data-img]{clip-path:inset(12% 0 0 0);transition:clip-path 1.4s var(--ease)}
.js [data-img] img{transform:scale(1.08);transition:transform 1.8s var(--ease)}
.js [data-img].in{clip-path:inset(0 0 0 0)}
.js [data-img].in img{transform:none}
.words .wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.js .words .w{display:inline-block;transform:translateY(105%);animation:wUp 1.1s var(--ease) forwards;animation-delay:calc(var(--i) * 55ms + 100ms)}
@keyframes wUp{to{transform:none}}

/* hero */
.hero{padding:88px 0 0}
.hero h1{grid-column:1/-1;max-width:12.5em}
.hero .side{grid-column:7/13;margin-top:56px}
.hero .side p{font-size:19px;line-height:1.5;color:var(--ink)}
.hero .side .btns{margin-top:28px}
.hero .side p.micro{font-size:14px;line-height:1.5;color:var(--faint);margin-top:14px}
.hero .meta{grid-column:1/7;margin-top:56px;align-self:end;font-size:14px;color:var(--mute);display:flex;gap:28px;flex-wrap:wrap}
.hero .meta b{display:block;color:var(--ink);font-weight:500;font-size:15px}
.bleed{margin-top:72px}
.bleed figure{position:relative;overflow:hidden;background:var(--soft)}
.bleed img{width:100%;aspect-ratio:21/9;object-fit:cover}
.bleed figcaption,.cap{font-size:14px;color:var(--mute);margin-top:12px}
.bleed .wrap figcaption{padding:0}

/* figures sentence */
.figs p{font-size:clamp(28px,3.6vw,52px);line-height:1.12;letter-spacing:-.035em;color:var(--mute);font-weight:500;max-width:22em}
.figs p b{color:var(--ink);font-weight:600}

/* section head */
.sh{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;margin-bottom:64px}
.sh h2{grid-column:1/7}
.sh p{grid-column:7/13;max-width:520px}

/* work list */
.case-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;padding:56px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.case-row:last-child{border-bottom:1px solid var(--line)}
.case-row .im{grid-column:1/7;overflow:hidden;background:var(--soft);aspect-ratio:16/10}
.case-row .im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.case-row .tx{grid-column:7/13}
.case-row .t,.case-row .fl{max-width:520px}
.case-row .who{font-size:14px;color:var(--mute);display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:28px}
.case-row .fig{font-size:clamp(56px,7vw,112px);font-weight:600;letter-spacing:-.055em;line-height:.9}
.case-row .fl{font-size:15px;color:var(--mute);margin-top:12px}
.case-row .t{color:var(--ink);margin-top:28px;font-size:17px}
.case-row .go{margin-top:28px;display:inline-flex;gap:8px;font-weight:500}
.case-row .go .arr{transition:transform .4s var(--ease)}
@media(hover:hover){.case-row:hover .im img{transform:scale(1.035)}.case-row:hover .go .arr{transform:translateX(4px)}}

/* method: three steps, the step name stays in view while its content is read */
.steps3{border-top:1px solid var(--ink)}
.s3{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:44px 0 56px;border-bottom:1px solid var(--line)}
.s3:last-child{border-bottom:0;padding-bottom:0}
.s3-k{grid-column:1/5;align-self:start;position:sticky;top:104px}
.s3-k i{display:block;font-style:normal;font-size:14px;font-weight:500;color:var(--faint)}
.s3-k h3{font-size:clamp(40px,4.4vw,64px);line-height:.95;letter-spacing:-.05em;margin-top:10px}
.s3-b{grid-column:6/13;min-width:0}
.s3-lead{font-size:clamp(19px,1.6vw,23px);line-height:1.38;letter-spacing:-.015em;font-weight:500;color:var(--ink);max-width:30em}
.s3-qs{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.s3-qs li{display:grid;grid-template-columns:190px minmax(0,1fr);gap:24px;padding:18px 0;border-bottom:1px solid var(--line)}
.s3-qs h4,.s3-build h4{font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.s3-qs p,.s3-build p{font-size:16px}
.s3-build{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
.s3-build li{border-top:1px solid var(--line);padding-top:16px}
.s3-build p{margin-top:6px}
.s3-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.s3-proof .n{font-size:clamp(30px,2.8vw,42px);font-weight:600;letter-spacing:-.045em;line-height:1;white-space:nowrap}
.s3-proof .l{font-size:14px;color:var(--mute);margin-top:8px;max-width:200px}
.s3-more{display:inline-block;margin-top:32px;font-size:16px}

.steps-list{counter-reset:s;border-top:1px solid var(--ink)}
.steps-list .s{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:24px 0;border-bottom:1px solid var(--line);align-items:baseline}
.steps-list .s::before{display:none}
.steps-list h3{grid-column:1/7}
.steps-list h3 i{font-style:normal;color:var(--faint);font-weight:500;display:block;font-size:14px;margin-bottom:6px}
.steps-list .rt{grid-column:7/13}
.steps-list p{font-size:16px;max-width:520px}
.steps-list .tm{display:block;font-size:14px;color:var(--mute);margin-top:8px}
.promise{margin-top:40px;margin-left:calc((100% + 24px) / 2);display:flex;gap:14px;align-items:flex-start;font-size:19px;color:var(--ink);max-width:720px}
.promise b{font-weight:600}
.promise svg{flex:none;margin-top:3px}

/* team */
.team-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:48px}
.team-grid .ph{grid-column:1/7;grid-row:1/3;overflow:hidden;background:var(--soft);aspect-ratio:4/5}
.team-grid .ph img{width:100%;height:100%;object-fit:cover}
.team-grid .tx{grid-column:7/13;align-self:start}
.team-grid .tx .big{margin-top:28px}
.team-grid .tx .name{font-size:15px;color:var(--mute);margin-top:20px}
.roles{grid-column:7/13;grid-row:2;align-self:end;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;border-top:1px solid var(--ink);padding-top:24px}
.role h3{font-size:17px;letter-spacing:-.01em;font-weight:600}
.role p{font-size:14.5px;margin-top:8px}
.bts{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:80px}
.bts figure{overflow:hidden;background:var(--soft)}
.bts figure:nth-child(1){grid-column:1/8;aspect-ratio:4/3}
.bts figure:nth-child(2){grid-column:8/13;aspect-ratio:4/5;margin-top:120px}
.bts figure:nth-child(3){grid-column:3/9;aspect-ratio:16/10;margin-top:24px}
.bts img{width:100%;height:100%;object-fit:cover}

/* faq */
.faq{border-top:1px solid var(--ink)}
.faq .q{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:28px 0;border-bottom:1px solid var(--line)}
.faq .q h3{grid-column:1/7;font-size:20px;padding-right:24px}
.faq .q p{grid-column:7/13;font-size:16px}

/* closing */
.close{padding:140px 0 120px}
.close a.huge{display:inline-block;text-decoration:none;font-size:clamp(48px,8.4vw,132px);font-weight:600;letter-spacing:-.05em;line-height:.95;color:var(--ink);transition:color .3s}
.close a.huge .arr{display:inline-block;transition:transform .5s var(--ease)}
@media(hover:hover){.close a.huge:hover{color:var(--mute)}.close a.huge:hover .arr{transform:translateX(16px)}}
.close p{margin-top:28px;font-size:19px;max-width:520px}

/* video */
.vid{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0c0c0c}
.vid video{width:100%;height:100%;object-fit:cover}
.vid .ov{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;padding:28px;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.6));cursor:pointer;transition:opacity .4s var(--ease)}
.vid.playing .ov{opacity:0;pointer-events:none}
.vid .play{display:inline-flex;align-items:center;gap:12px;color:#fff;font-size:18px;font-weight:500}
.vid .play i{width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;transition:transform .35s var(--ease)}
@media(hover:hover){.vid .ov:hover .play i{transform:scale(1.08)}}
.vid .who{color:rgba(255,255,255,.75);font-size:14px;text-align:right;max-width:340px}
.vid.has-poster .who{display:none}
.vid.has-poster .ov{background:linear-gradient(180deg,transparent 62%,rgba(0,0,0,.45))}
[data-video][hidden]{display:none}

/* compare */
.cmp{position:relative;width:100%;max-width:320px;aspect-ratio:560/1100;border-radius:28px;overflow:hidden;background:var(--soft);--p:50%;touch-action:pan-y;user-select:none;box-shadow:0 0 0 1px var(--line)}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmp .bf{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.cmp .hd{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.cmp .hd::after{content:'';position:absolute;top:50%;left:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;background:var(--ink)}
.cmp .hd i{position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%);font-style:normal;font-size:12px;color:#fff}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:2}
.cmp .tg{position:absolute;bottom:14px;font-size:12px;font-weight:500;padding:3px 10px;border-radius:999px;background:#fff;color:var(--ink);pointer-events:none}
.cmp .tg.b{left:14px}.cmp .tg.a{right:14px}
.cmpwrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
.cmpwrap .cmp{grid-column:1/7}
.cmpwrap .tx{grid-column:7/13}
.cmpwrap .tx p{max-width:520px}
.cmpwrap .tx p{margin-top:20px;font-size:18px}

/* case page */
.chero{padding:64px 0 0}
.back{font-size:14px;color:var(--mute);text-decoration:none;display:inline-flex;gap:8px;margin-bottom:56px}
@media(hover:hover){.back:hover{color:var(--ink)}}
.chero h1{font-size:clamp(44px,6.6vw,104px);max-width:13em}
.chero .lead{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:48px}
.chero .lead p{grid-column:1/7;padding-right:24px;font-size:clamp(19px,1.7vw,23px);line-height:1.45;color:var(--ink)}
.chero .facts{grid-column:7/13;font-size:14px;color:var(--mute);display:grid;gap:12px}
.chero .facts div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:10px}
.chero .facts b{color:var(--ink);font-weight:500;text-align:right}
.clogo{height:30px;width:auto;margin-bottom:24px}
.clogo.sq{height:44px}
.cover{margin-top:72px}
.cover .im{overflow:hidden;background:var(--soft);aspect-ratio:21/9}
.cover .im img{width:100%;height:100%;object-fit:cover}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;margin-top:72px}
.kpi .n{font-size:clamp(40px,4.6vw,72px);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.kpi .l{font-size:15px;color:var(--mute);margin-top:12px;max-width:220px}
.kpi .n.long{font-size:clamp(30px,3.4vw,54px)}
.chapter{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:96px 0 0}
.chapter .k{grid-column:1/7}
.chapter .k h2{font-size:clamp(36px,4.2vw,64px)}
.chapter .k h2 small{display:block;font-size:15px;letter-spacing:0;color:var(--faint);font-weight:500;margin-bottom:10px}
.chapter .b{grid-column:7/13}
.chapter .b h3{font-size:clamp(24px,2.4vw,34px);letter-spacing:-.03em;line-height:1.15;margin-bottom:28px}
.chapter .b p{max-width:620px;font-size:18px;line-height:1.6;color:#3b3b3b;margin-top:16px}
.chapter .b p em{font-style:normal;color:var(--ink);font-weight:500}
.chapter .b .tags{font-size:14px;color:var(--faint);margin-top:24px}
.plate{margin-top:56px}
.plate .im{overflow:hidden;background:var(--soft)}
.plate.w .im{aspect-ratio:16/9}
.plate.w .im img{width:100%;height:100%;object-fit:cover}
.verdict{padding:140px 0 40px}
.verdict .n{font-size:clamp(80px,14vw,220px);font-weight:600;letter-spacing:-.06em;line-height:.85}
.verdict .n.long{font-size:clamp(56px,10vw,170px)}
.verdict p{font-size:clamp(24px,2.8vw,40px);line-height:1.2;letter-spacing:-.03em;color:var(--ink);font-weight:500;max-width:18em;margin-top:32px}
.nextcase{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;text-decoration:none;color:inherit;padding:56px 0;border-top:1px solid var(--ink)}
.nextcase .tx{grid-column:1/7}
.nextcase .tx small{font-size:14px;color:var(--mute)}
.nextcase .tx h2{margin-top:12px;transition:color .3s}
.nextcase .im{grid-column:8/13;overflow:hidden;aspect-ratio:16/10;background:var(--soft)}
.nextcase .im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
@media(hover:hover){.nextcase:hover h2{color:var(--mute)}.nextcase:hover .im img{transform:scale(1.04)}}

/* problems (business) */
.probs{border-top:1px solid var(--ink)}
.probs>div{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:28px 0;border-bottom:1px solid var(--line)}
.probs h3{grid-column:1/7}
.probs p{grid-column:7/13;max-width:520px}
.probs h3{font-size:22px;letter-spacing:-.02em}
.probs p{font-size:16px}

/* digit roller */
[data-roll]{--rh:1.18em;display:inline-flex;align-items:flex-start;line-height:var(--rh);white-space:nowrap;vertical-align:top}
[data-roll] .d{display:inline-block;height:var(--rh);overflow:hidden;position:relative}
[data-roll] .col{display:flex;flex-direction:column;transform:translateY(0);transition:transform 1.8s var(--ease);transition-delay:calc(var(--k) * 60ms)}
[data-roll] .col span{height:var(--rh);line-height:var(--rh);text-align:center}
[data-roll] .ch{display:inline-block;opacity:0;transition:opacity .8s var(--ease);transition-delay:calc(var(--k) * 60ms + 200ms)}
[data-roll].rolled .ch{opacity:1}

/* footer */
footer{border-top:1px solid var(--ink);padding:56px 0 40px;font-size:14px;color:var(--mute)}
footer .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:32px}
footer .wrap>div:first-child{grid-column:1/6}
footer .wrap>div:nth-child(2){grid-column:7/9}
footer .wrap>div:nth-child(3){grid-column:9/11}
footer .wrap>div:nth-child(4){grid-column:11/13}
footer h4{font-size:14px;font-weight:500;color:var(--ink);margin-bottom:14px}
footer ul{list-style:none;display:grid;gap:8px}
footer a{text-decoration:none;color:var(--mute);transition:color .2s}
@media(hover:hover){footer a:hover{color:var(--ink)}}
footer .logo img{height:20px;margin-bottom:16px}
footer .logo svg{height:20px;margin-bottom:16px}
footer .base{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line);color:var(--faint)}

/* toast */
.toast{position:fixed;left:16px;bottom:16px;z-index:60;max-width:380px;background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);padding:16px;font-size:14px;color:var(--mute);transform:translateY(16px);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.toast.in{transform:none;opacity:1}
.toast b{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}
.toast .btns{margin-top:12px;gap:8px}
.toast .btn{height:34px;padding:0 14px;font-size:13px}

/* misc */
.label{font-size:14px;color:var(--mute);margin-bottom:14px}
.lede{font-size:19px;color:var(--mute);max-width:560px}

/* legal */
.legal h1{font-size:clamp(40px,5vw,64px)}
.legal h2{font-size:22px;margin:44px 0 10px;letter-spacing:-.02em}
.legal p,.legal li{font-size:16px;color:var(--mute);margin-top:8px}
.legal ul{padding-left:18px}
.legal .in{max-width:720px}

/* view transitions */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .3s var(--ease-io) both}
::view-transition-new(root){animation:vtIn .7s var(--ease) both}
::view-transition-group(*){animation-duration:.7s;animation-timing-function:var(--ease)}
::view-transition-old(nav),::view-transition-new(nav){animation:none}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(24px)}}

/* mobile menu + drawer */
.menu{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative;margin-right:-10px;margin-left:auto}
.menu span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--ink)}
.menu span:first-child{top:18px}.menu span:last-child{top:25px}
.page{background:var(--paper);transform-origin:50% 0;transition:transform .5s var(--ease-drawer),border-radius .5s var(--ease-drawer)}
html.dopen{overflow:hidden}
html.dopen body{background:#000}
html.dopen .page{transform:scale(.94);border-radius:14px}
.scrim{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.4);opacity:0;transition:opacity .5s var(--ease-drawer)}
.scrim.on{opacity:1}
.drawer{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;border-radius:20px 20px 0 0;padding:12px 20px calc(24px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .5s var(--ease-drawer);touch-action:none}
.drawer.on{transform:translateY(0)}
.drawer .grab{width:40px;height:5px;border-radius:5px;background:var(--g5);margin:0 auto 18px}
.drawer .dl{display:flex;flex-direction:column;margin-bottom:20px}
.drawer .dl a{font-size:30px;font-weight:600;letter-spacing:-.04em;color:var(--ink);text-decoration:none;padding:8px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.drawer.on .dl a{opacity:1;transform:none;transition-delay:calc(var(--i) * 50ms + 120ms)}

@media(max-width:1000px){
  :root{--gut:24px}
  section{padding:88px 0}
  .nav ul,.nav .nb{display:none}
  .menu{display:block}
  .hero .side{grid-column:1/-1;margin-top:36px}
  .hero .meta{grid-column:1/-1;margin-top:32px}
  .bleed img{aspect-ratio:4/3}
  .case-row .im{grid-column:1/-1;grid-row:1}
  .case-row .tx{grid-column:1/-1;grid-row:2;margin-top:28px;max-width:none}
  .s3{padding:36px 0 44px}
  .s3-k,.s3-b{grid-column:1/-1}
  .s3-k{position:static}
  .s3-b{margin-top:22px}
  .steps-list h3,.steps-list .rt{grid-column:1/-1}
  .steps-list .rt{margin-top:8px}
  .promise{margin-left:0}
  .sh h2,.sh p{grid-column:1/-1}
  .sh p{margin-top:20px}
  .probs h3,.probs p{grid-column:1/-1}
  .probs p{margin-top:8px}
  .roles{grid-column:1/-1;grid-row:auto}
  .team-grid .ph{grid-row:auto}
  .team-grid .ph,.team-grid .tx{grid-column:1/-1}
  .roles{grid-template-columns:1fr 1fr}
  .bts figure:nth-child(n){grid-column:1/-1;margin-top:16px;aspect-ratio:4/3}
  .faq .q h3,.faq .q p{grid-column:1/-1}
  .faq .q p{margin-top:10px}
  .cmpwrap .cmp,.cmpwrap .tx{grid-column:1/-1}
  .cmpwrap .cmp{margin:0 auto}
  .cmpwrap .tx{margin-top:40px}
  .chero .lead p,.chero .facts{grid-column:1/-1}
  .chero .facts{margin-top:32px}
  .cover .im{aspect-ratio:4/3}
  .kpis{grid-template-columns:1fr 1fr;row-gap:40px}
  .chapter{padding-top:72px}
  .chapter .k,.chapter .b{grid-column:1/-1}
  .chapter .k h2{position:static;margin-bottom:24px}
  .nextcase .tx,.nextcase .im{grid-column:1/-1}
  .nextcase .im{margin-top:24px}
  .probs{grid-template-columns:1fr;row-gap:16px}
  footer .wrap>div:nth-child(n){grid-column:span 6}
  footer .wrap>div:first-child{grid-column:1/-1}
}
@media(max-width:560px){
  :root{--gut:16px}
  body{font-size:16px}
  .hero{padding-top:48px}
  .btns .btn.lg{width:100%}
  .roles{grid-template-columns:1fr}
  .vid .who{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js [data-r],.js .words .w{opacity:1;transform:none}
  .js [data-img]{clip-path:none}.js [data-img] img{transform:none}
  [data-roll] .ch{opacity:1}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ===== home v4: film, about, cards ===== */
.hero.home{padding-bottom:0}
.hero.home .intro{grid-column:1/9;margin-top:44px;font-size:clamp(21px,2.1vw,30px);line-height:1.28;letter-spacing:-.025em;font-weight:500;color:var(--ink);max-width:24em;text-wrap:balance}
.hero.home .intro span{color:var(--mute)}
@media(min-width:1001px){.hero.home .intro{max-width:none}.hero.home .intro span{display:block;white-space:nowrap}}
.film{margin-top:64px}
.film .vid{border-radius:6px}
.film .ov{display:none}
.film.ready .ov{display:flex}
.film .soon{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--soft);color:var(--mute);font-size:14px;letter-spacing:.02em}
.film .soon b{font-size:clamp(22px,2.4vw,32px);font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.film .soon .mg{height:clamp(34px,4vw,52px);width:auto;fill:var(--ink);margin-bottom:14px}
.film.ready .soon{display:none}
.film:not(.ready) .vid{background:var(--soft)}

.about{padding-top:140px}
.about .ph{grid-column:1/6;align-self:start}
.about .ph img{width:100%;height:auto}
.js .about [data-img]{clip-path:none}
.about .tx{grid-column:7/13;align-self:start;padding:0 0 0 24px}
.about .tx h2{margin-top:-.08em}
.about .tx .big{margin-top:28px}
.about .tx p:not(.big):not(.micro){margin-top:20px;font-size:17px;max-width:540px}
.about .btns{margin-top:36px}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ccard{display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;transition:border-color .3s,transform .5s var(--ease)}
.ccard .im{aspect-ratio:4/3;overflow:hidden;background:var(--soft)}
.ccard .im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ccard .bd{padding:24px;display:flex;flex-direction:column;flex:1}
.ccard .who{display:flex;justify-content:space-between;font-size:13px;color:var(--mute);padding-bottom:14px;border-bottom:1px solid var(--line)}
.ccard .fig{font-size:clamp(44px,4.4vw,64px);font-weight:600;letter-spacing:-.05em;line-height:1;margin-top:24px}
.ccard .fl{font-size:14px;color:var(--mute);margin-top:10px}
.ccard .t{font-size:15px;color:var(--ink);margin-top:18px;flex:1}
.ccard .go{margin-top:22px;font-weight:500;font-size:15px;display:inline-flex;gap:8px}
.ccard .go .arr{transition:transform .4s var(--ease)}
@media(hover:hover){.ccard:hover{border-color:var(--ink);transform:translateY(-4px)}.ccard:hover .im img{transform:scale(1.04)}.ccard:hover .go .arr{transform:translateX(4px)}}
.ccard:active{transform:scale(.985)}

@media(max-width:1000px){
  .hero.home .intro{grid-column:1/-1;margin-top:28px}
  .film{margin-top:40px}
  .about{padding-top:96px}
  .about .ph{grid-column:1/-1;position:relative;top:0}
  .about .tx{grid-column:1/-1;padding:44px 0 0}
  .cards{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){.cards{grid-template-columns:1fr}}

.about .kfacts{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px;margin-top:96px;padding-top:32px;border-top:1px solid var(--ink)}
.about .kf .n{font-size:clamp(36px,3.8vw,56px);font-weight:600;letter-spacing:-.05em;line-height:1}
.about .kf .l{font-size:14px;color:var(--mute);margin-top:8px;max-width:220px}
.about .credits{font-size:15px;color:var(--ink);padding-top:16px;border-top:1px solid var(--line)}
.about .credits span{display:block;font-size:13px;color:var(--mute);margin-bottom:4px}
.about .tx p.credits{margin-top:28px}

@media(max-width:1000px){.about .kfacts{grid-template-columns:1fr 1fr;margin-top:56px}.about .kf:last-child{grid-column:1/-1}}
@media(max-width:640px){
  .about .tx .big{margin-top:24px}
  .about .tx p:not(.big):not(.micro){margin-top:22px}
  .about .btns{margin-top:36px}
  .hero.home .intro{margin-top:24px}
  .film{margin-top:40px}
  .ccard .bd{padding:22px}
}
@media(max-width:560px){
  .s3-qs li{grid-template-columns:1fr;gap:4px}
  .s3-build{grid-template-columns:1fr;gap:20px}
  .s3-proof{grid-template-columns:1fr;gap:18px}
}
}

/* ===== client cases: portrait cards, then the story (person fixed on the left, six chapters on the right) ===== */
.tbc{color:var(--faint);border-bottom:1px dashed #b5b5b3}
.pcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.pcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;cursor:pointer}
.pcard .im{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:6px;background:var(--soft)}
.pcard .im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pcard .bd{display:flex;flex-direction:column;flex:1;padding-top:20px}
.pcard h3{font-size:24px;line-height:1.1;letter-spacing:-.03em}
.pcard .role{font-size:14px;color:var(--mute);margin-top:6px}
.pcard .t{font-size:15.5px;line-height:1.5;margin-top:16px;color:var(--ink)}
.pcard .lbl{font-size:13px;color:var(--faint);margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.pcard .did{list-style:none;margin:6px 0 0;padding:0;font-size:14px;line-height:1.6;color:var(--ink);flex:1}
.pcard .did li{display:inline}
.pcard .did li+li::before{content:" \00B7 ";color:var(--faint)}
.pcard .go{margin-top:18px;font-size:15px;font-weight:500;display:inline-flex;gap:8px}
.pcard .go i{font-style:normal;transition:transform .4s var(--ease)}
@media(hover:hover){.pcard:hover .im img{transform:scale(1.04)}.pcard:hover .go i{transform:translateX(4px)}}
.pswipe{display:none;font-size:14px;color:var(--faint);margin-top:16px}
html.cvlock,html.cvlock body{overflow:hidden}

/* the story: inside the full screen view (.cv) or on its own page (.cpage) */
.cv{--top:calc(64px + env(safe-area-inset-top,0px));position:fixed;inset:0;z-index:50;background:var(--paper);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.cpage{--top:72px}
.cvh{position:sticky;top:0;z-index:5;height:var(--top);padding-top:env(safe-area-inset-top,0px);padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));display:flex;align-items:center;gap:20px;background:var(--paper);border-bottom:1px solid var(--line)}
.cv-back{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;border-radius:999px;border:0;background:var(--soft);font:inherit;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer}
@media(hover:hover){.cv-back:hover{background:var(--line)}}
.cvh .logo{margin:0 auto}
.cvh .logo svg{height:20px}
.cvh .btn{height:40px;padding:0 18px;font-size:14px}
.case{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.case[hidden]{display:none!important}
.cs-photo{position:sticky;top:var(--top);height:calc(100vh - var(--top));height:calc(100dvh - var(--top));overflow:hidden;background:var(--soft);grid-row:1/3}
.cs-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease)}
.cs-photo>img.on{opacity:1}
.cs-id{position:absolute;left:0;right:0;bottom:0;padding:120px 40px 36px;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.6));transition:opacity .5s var(--ease)}
.cs-id small{display:block;font-size:14px;font-weight:500;opacity:.88}
.cs-id .cs-name{font-size:clamp(40px,4.2vw,64px);line-height:1;letter-spacing:-.045em;margin-top:10px;color:#fff;max-width:none}
.cs-id p{font-size:17px;margin-top:10px;opacity:.92;color:#fff}
.fclose{display:none;position:absolute;top:16px;left:16px;z-index:2;align-items:center;gap:6px;height:40px;padding:0 14px 0 10px;border-radius:999px;border:0;background:rgba(255,255,255,.92);font:inherit;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;cursor:pointer}
.cpage .fclose{display:flex}
.cs-bar{display:none}
.cs-body{grid-column:2;min-width:0;padding:0 64px 120px}
.cs-nav{position:sticky;top:var(--top);z-index:3;background:var(--paper);display:flex;flex-wrap:wrap;gap:6px 20px;padding:20px 0 14px;border-bottom:1px solid var(--line);font-size:14px;font-weight:500}
.cs-nav a{color:var(--faint);text-decoration:none;transition:color .3s}
.cs-nav a.on{color:var(--ink)}
@media(hover:hover){.cs-nav a:hover{color:var(--ink)}}
.cs-nav .pg{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.cs-ch{padding:88px 0 0;max-width:640px;scroll-margin-top:calc(var(--top) + 56px)}
.cs-ch .k{font-size:14px;font-weight:500;color:var(--faint)}
.cs-ch h2{font-size:clamp(56px,6.6vw,108px);line-height:.86;letter-spacing:-.065em;margin-top:14px}
.cs-lead{font-size:clamp(20px,1.7vw,24px);line-height:1.38;letter-spacing:-.02em;font-weight:500;margin-top:32px;color:var(--ink)}
.cs-lead.sm{font-size:19px}
.cs-facts{margin-top:32px;border-top:1px solid var(--ink)}
.cs-facts div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.cs-facts span{color:var(--mute)}
.cs-facts b{font-weight:500;text-align:right}
.cs-bf{display:flex;gap:28px;align-items:flex-end;margin-top:36px}
.cs-bf.wide{flex-direction:column;align-items:flex-start}
.cs-bf .shot{flex:none;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px var(--line);background:var(--soft)}
.cs-bf .shot.tall{width:200px;aspect-ratio:560/1100}
.cs-bf .shot.wide{width:min(100%,420px);aspect-ratio:1100/754}
.cs-bf .shot img{width:100%;height:100%;object-fit:cover}
.cs-fig .n{font-size:clamp(56px,6vw,96px);font-weight:600;letter-spacing:-.055em;line-height:.9;font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-fig .l{font-size:15px;color:var(--mute);margin-top:10px}
.cs-rows{margin-top:36px;border-top:1px solid var(--ink)}
.cs-rows>div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.cs-rows h3{font-size:20px;line-height:1.2;letter-spacing:-.02em}
.cs-rows p{font-size:16px}
.cs-built{margin-top:36px;display:flex;flex-direction:column;gap:40px}
.cs-built h3{font-size:24px;letter-spacing:-.03em;line-height:1.15}
.cs-built p{font-size:16px;margin-top:8px}
.cs-built .pl{margin-top:18px;border-radius:6px;overflow:hidden;background:var(--soft)}
.cs-built .pl img{width:100%;height:auto}
.cs-built .mob{display:none}
.cs-built .mob .pl{margin-top:0}
.cs-res{margin-top:36px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;border-top:1px solid var(--ink);padding-top:28px}
.cs-res .cs-fig:first-child{grid-column:1/-1}
.cs-res .cs-fig:first-child .n{font-size:clamp(72px,8.4vw,136px)}
.cs-res .cs-fig .n.long{font-size:clamp(44px,4.6vw,72px)}
.cs-res .cs-fig:first-child .n.long{font-size:clamp(52px,6vw,96px)}
.cs-cmp{position:relative;margin-top:44px;overflow:hidden;background:var(--soft);--p:50%;touch-action:pan-y;user-select:none;box-shadow:0 0 0 1px var(--line)}
.cs-cmp.tall{width:300px;max-width:100%;aspect-ratio:560/1100;border-radius:26px}
.cs-cmp.wide{width:100%;aspect-ratio:1100/754;border-radius:12px}
.cs-cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cs-cmp .b4{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.cs-cmp .hd{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.cs-cmp .hd::after{content:"\2194";position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--ink);color:#fff;font-size:14px;display:grid;place-items:center}
.cs-cmp .tg{position:absolute;bottom:12px;font-size:12px;font-weight:500;padding:3px 10px;border-radius:999px;background:#fff;color:var(--ink);pointer-events:none}
.cs-cmp .tg.b{left:12px}.cs-cmp .tg.a{right:12px}
.cs-cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize}
.cs-cap{font-size:14px;color:var(--faint);margin-top:12px}
.cs-quote{font-size:clamp(28px,2.8vw,40px);line-height:1.16;letter-spacing:-.03em;font-weight:500;margin-top:36px;color:var(--ink)}
.cs-says{display:flex;align-items:center;gap:12px;margin-top:24px;font-size:15px;color:var(--mute)}
.cs-says img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.cs-end{margin-top:56px;padding-top:28px;border-top:1px solid var(--ink);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cs-end p{flex-basis:100%;font-size:14px;color:var(--faint);margin-top:4px}

/* opening: the card photo flies to the story */
.fly{position:fixed;z-index:60;object-fit:cover;pointer-events:none;will-change:left,top,width,height;border-radius:6px}
.cv.enter .cs-photo>img,.cv.enter .cs-id{visibility:hidden}
.cv.enter .cs-body,.cv.enter .cs-bar{opacity:0;transform:translateY(28px)}
.cs-body,.cs-bar{transition:opacity .7s var(--ease),transform .9s var(--ease)}

@media(max-width:1100px){
  .pcards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(72%,340px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gut);margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);padding-bottom:8px;scrollbar-width:none}
  .pcards::-webkit-scrollbar{display:none}
  .pcard{scroll-snap-align:start}
  .pswipe{display:block}
  .cs-body{padding:0 40px 120px}
}
@media(max-width:900px){
  .cv{--top:0px}
  .cvh{display:none}
  .case{display:block}
  .cs-photo{position:relative;top:0;height:calc(100vh - var(--top) - 24px);height:calc(100svh - var(--top) - 24px)}
  .cs-photo>img[data-p="1"]{display:none}
  .cs-id{padding:140px 20px 32px}
  .cs-id .cs-name{font-size:44px}
  .fclose{display:flex;top:calc(14px + env(safe-area-inset-top,0px));left:max(14px,env(safe-area-inset-left,0px))}
  .cpage .fclose{top:14px}
  .cs-bar{display:block;position:sticky;top:var(--top);z-index:4;background:var(--paper);border-bottom:1px solid var(--line);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .cv .cs-bar{padding-top:env(safe-area-inset-top,0px)}
  .cs-bar .row{display:flex;align-items:center;gap:12px;height:64px}
  .cs-bar img{width:40px;height:40px;border-radius:50%;object-fit:cover}
  .cs-bar b{display:block;font-size:15px;font-weight:600;line-height:1.2}
  .cs-bar span{display:block;font-size:13px;color:var(--faint)}
  .cs-bar .x{margin-left:auto;width:40px;height:40px;border-radius:50%;border:0;background:var(--soft);font:inherit;font-size:18px;color:var(--ink);text-decoration:none;display:grid;place-items:center;cursor:pointer}
  .segs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding-bottom:10px}
  .segs i{height:3px;border-radius:3px;background:var(--line);transition:background .4s}
  .segs i.on{background:var(--ink)}
  .cs-nav{display:none}
  .cs-body{padding:0 max(20px,env(safe-area-inset-right,0px)) 96px max(20px,env(safe-area-inset-left,0px))}
  .cs-ch{padding:64px 0 0;scroll-margin-top:calc(var(--top) + 84px)}
  .cs-built .mob{display:block}
  .cs-rows>div{grid-template-columns:1fr;gap:6px}
}
@media(max-width:560px){
  .pcards{grid-auto-columns:82%}
  .cs-bf{gap:18px}
  .cs-bf .shot.tall{width:150px}
  .cs-res{grid-template-columns:1fr}
  .cs-end .btn{width:100%}
}

/* ===== /business: the page for companies, black first ===== */
.dk{--paper:#0d0d0d;--ink:#f3f3f1;--mute:#a6a6a3;--faint:#8c8c89;--line:#2a2a29;--soft:#1a1a19;--g5:#3a3a39}
.dk .nav{background:rgba(13,13,13,.86)}
.dk .btn{background:var(--ink);color:#0d0d0d}
.dk .btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
@media(hover:hover){.dk .btn:hover{background:#d4d4d1}.dk .btn.ghost:hover{background:var(--ink);color:#0d0d0d}}
.dk .drawer{background:#161616}
.dk .toast{background:#1a1a19}
.dk ::selection{background:var(--ink);color:#0d0d0d}
.dk :focus-visible{outline-color:var(--ink)}
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.bz-hero{padding-bottom:40px}
.bz-hero .eyebrow{grid-column:1/-1;margin-bottom:22px}
.bz-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}
.bz-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.bz-item{border-top:1px solid var(--ink);padding-top:20px}
.bz-item h3{font-size:22px;letter-spacing:-.02em}
.bz-item p{font-size:16px;margin-top:10px;max-width:420px}
.bz-ai{padding-top:40px}
.ai-box{border:1px solid var(--line);border-radius:8px;padding:64px;background:#121212;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.ai-head{grid-column:1/8}
.ai-head h2{margin-top:18px}
.ai-intro{font-size:clamp(19px,1.6vw,23px);line-height:1.4;letter-spacing:-.015em;font-weight:500;color:var(--ink);margin-top:28px;max-width:34em}
.ai-list{grid-column:1/-1;list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
.ai-list li{border-top:1px solid var(--line);padding-top:18px}
.ai-list h3{font-size:19px;letter-spacing:-.02em}
.ai-list p{font-size:15.5px;margin-top:8px}
.ai-how{grid-column:1/-1;margin-top:64px;padding-top:28px;border-top:1px solid var(--ink)}
.ai-how .lbl{font-size:14px;font-weight:500;color:var(--faint)}
.ai-how ol{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ai-how i{font-style:normal;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--ink);font-size:13px;font-weight:600;color:var(--ink)}
.ai-how h3{font-size:20px;letter-spacing:-.02em;margin-top:14px}
.ai-how p{font-size:15.5px;margin-top:8px}
.ai-foot{grid-column:1/-1;margin-top:48px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.ai-safe{display:flex;gap:14px;font-size:15.5px;color:var(--ink)}
.ai-safe svg{flex:none;margin-top:2px}
.ai-proof{font-size:15.5px}
.pr-rows{border-top:1px solid var(--ink)}
.pr-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.pr-row .n{grid-column:1/5;font-size:clamp(44px,5vw,76px);font-weight:600;letter-spacing:-.055em;line-height:.95;white-space:nowrap}
.pr-row .who{grid-column:5/8;display:flex;align-items:center;gap:14px}
.pr-row .who img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.pr-row .who b{display:block;font-size:17px;font-weight:600;color:var(--ink);line-height:1.2}
.pr-row .who span{display:block;font-size:14px;color:var(--mute);margin-top:2px}
.pr-row p{grid-column:8/11;font-size:15.5px}
.pr-row .go{grid-column:11/13;justify-self:end;font-size:15px;font-weight:500;display:inline-flex;gap:8px}
.pr-row .go .arr{transition:transform .4s var(--ease)}
@media(hover:hover){.pr-row:hover .go .arr{transform:translateX(4px)}.pr-row:hover .n{color:var(--mute)}}
.pr-row .n{transition:color .3s}
.bz-team{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px}
.bz-team .lead{grid-column:1/7;display:flex;flex-direction:column;gap:28px}
.bz-team .kl{width:112px;height:112px;border-radius:50%;object-fit:cover}
.bz-team .roles{grid-column:7/13;grid-row:auto;align-self:start}
.dk .roles{border-top-color:var(--ink)}
@media(max-width:1000px){
  .bz-grid{grid-template-columns:1fr 1fr}
  .ai-box{padding:40px 28px}
  .ai-head,.ai-list,.ai-how,.ai-foot{grid-column:1/-1}
  .ai-list{grid-template-columns:1fr 1fr}
  .ai-how ol{grid-template-columns:1fr;gap:28px}
  .ai-foot{grid-template-columns:1fr}
  .pr-row{row-gap:14px}
  .pr-row .n{grid-column:1/-1}
  .pr-row .who{grid-column:1/-1}
  .pr-row p{grid-column:1/-1}
  .pr-row .go{grid-column:1/-1;justify-self:start}
  .bz-team .lead,.bz-team .roles{grid-column:1/-1}
}
@media(max-width:640px){
  .bz-grid,.bz-grid.two,.ai-list{grid-template-columns:1fr;gap:28px}
  .ai-box{padding:32px 20px;margin-inline:calc(var(--gut) * -1 + 8px)}
  .bz-team .kl{width:88px;height:88px}
}

/* /business spacing: tighter rhythm on the dark page, one line titles when nothing sits beside them */
.dk section{padding:80px 0}
.dk .bz-hero{padding:88px 0 24px}
.dk .bz-ai{padding-top:24px}
.dk .close{padding:112px 0 104px}
.dk .sh{margin-bottom:48px}
.dk .sh h2:only-child{grid-column:1/-1}
.dk .probs>div{padding:24px 0}
.dk .bz-team .lead{gap:24px}
.dk .bz-team .kl{width:132px;height:132px}

/* AI: a few abstract colours that read as technology, only where AI is named */
.dk{--ai1:#4f6bff;--ai2:#9b5cff;--ai3:#19d3c5}
.ai-box{position:relative;overflow:hidden;isolation:isolate}
.ai-glow{position:absolute;top:-160px;right:-120px;width:620px;height:520px;z-index:-1;pointer-events:none;filter:blur(64px);opacity:.55}
.ai-glow i{position:absolute;border-radius:50%;mix-blend-mode:screen}
.ai-glow i:nth-child(1){width:300px;height:300px;left:60px;top:120px;background:var(--ai1);animation:aiA 16s ease-in-out infinite alternate}
.ai-glow i:nth-child(2){width:260px;height:260px;left:250px;top:60px;background:var(--ai2);animation:aiB 19s ease-in-out infinite alternate}
.ai-glow i:nth-child(3){width:220px;height:220px;left:200px;top:250px;background:var(--ai3);animation:aiC 22s ease-in-out infinite alternate}
@keyframes aiA{to{transform:translate(70px,40px) scale(1.15)}}
@keyframes aiB{to{transform:translate(-60px,70px) scale(.9)}}
@keyframes aiC{to{transform:translate(40px,-60px) scale(1.2)}}
.ai-box::after{content:"";position:absolute;top:0;right:0;width:58%;height:460px;z-index:-1;pointer-events:none;
  background:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.4px) 0 0/18px 18px;
  -webkit-mask-image:radial-gradient(ellipse at 75% 20%,#000 0,transparent 70%);mask-image:radial-gradient(ellipse at 75% 20%,#000 0,transparent 70%)}
.ai-mark::before{content:"";display:inline-block;width:.5em;height:.5em;border-radius:50%;margin-right:.45em;vertical-align:.08em;background:conic-gradient(from 200deg,var(--ai1),var(--ai2),var(--ai3),var(--ai1))}
.eyebrow.ai-mark{color:var(--ink)}
.ai-list{margin-top:48px}
.ai-list li{border-top:1px solid var(--line);position:relative}
.ai-list li::before{content:"";position:absolute;left:0;top:-1px;width:28px;height:1px;background:linear-gradient(90deg,var(--ai1),var(--ai2),var(--ai3))}
.ai-how{margin-top:56px;border-top:0;background:linear-gradient(90deg,var(--ai1),var(--ai2) 50%,var(--ai3)) 0 0/100% 1px no-repeat}
.ai-how i{border:1px solid transparent;background:linear-gradient(#121212,#121212) padding-box,conic-gradient(from 200deg,var(--ai1),var(--ai2),var(--ai3),var(--ai1)) border-box}
.ai-foot{margin-top:40px}
@media(prefers-reduced-motion:reduce){.ai-glow i{animation:none}}
@media(max-width:1000px){
  .dk section{padding:64px 0}
  .dk .bz-hero{padding:56px 0 16px}
  .dk .bz-ai{padding-top:8px}
  .dk .close{padding:88px 0 80px}
  .ai-glow{top:-250px;right:-330px;opacity:.38}
  .ai-box::after{width:100%;height:340px}
}

/* /business hero: headline, then the text and the facts side by side */
.bz-hero{padding:72px 0 8px}
.bz-hero .eyebrow{margin-bottom:22px}
.bz-hero h1{font-size:clamp(44px,6vw,92px);line-height:.95;letter-spacing:-.05em;max-width:13em}
.bz-hrow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:44px;align-items:start}
.bz-lead{grid-column:1/7}
.bz-lead p:first-child{font-size:19px;line-height:1.5;color:var(--ink)}
.bz-lead .btns{margin-top:28px}
.bz-facts{grid-column:8/13;border-top:1px solid var(--ink);font-size:15px}
.bz-facts div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.bz-facts span{color:var(--mute)}
.bz-facts b{font-weight:500;text-align:right;color:var(--ink)}
.dk .bz-hero{padding:72px 0 8px}
.dk h2{font-size:clamp(36px,4.6vw,68px)}
@media(max-width:1000px){
  .dk .bz-hero{padding:48px 0 0}
  .bz-hrow{margin-top:32px;row-gap:36px}
  .bz-lead,.bz-facts{grid-column:1/-1}
}

/* guiding line: runs through the steps or chapters and fills as you scroll */
.thread{position:relative;--tx:48px;padding-left:var(--tx)}
.thread>.tl{position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--line);overflow:hidden;pointer-events:none}
.thread>.tl i{position:absolute;inset:0;background:var(--ink);transform-origin:50% 0}
.js .thread>.tl i{transform:scaleY(var(--p,0))}
.thread .tn{position:absolute;left:calc(var(--tx) * -1);width:16px;height:16px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px var(--g7);z-index:1;transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.thread .on>.tn,.no-thread .tn{background:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.s3{position:relative}
.s3>.tn{top:46px}
.cs-ch{position:relative}
.cs-ch>.tn{top:90px}

/* client stories: calmer titles, like the home page steps */
.cs-ch h2{font-size:clamp(40px,4.2vw,62px);line-height:.95;letter-spacing:-.05em}
.cs-res .cs-fig:first-child .n{font-size:clamp(56px,6vw,96px)}
.cs-res .cs-fig:first-child .n.long{font-size:clamp(44px,4.6vw,72px)}
.cs-fig .n{font-size:clamp(40px,4vw,64px)}
.cs-res .cs-fig .n.long{font-size:clamp(36px,3.4vw,52px)}
@media(max-width:1000px){
  .thread{--tx:32px}
  .s3>.tn{top:38px}
}
@media(max-width:900px){
  .cs-ch>.tn{top:66px}
}

/* client stories: small galleries in What we built */
.pl-g{display:grid;gap:12px;margin-top:18px}
.pl-g .pl{margin-top:0}
.pl-g.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pl-g.w3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pl-g.w3 .pl:first-child{grid-column:1/-1}
.pl-g .pl img{width:100%;height:auto;display:block}

/* labels: plain words, no tracked capitals */
.eyebrow{font-size:15px;font-weight:500;letter-spacing:-.005em;text-transform:none;color:var(--faint)}
.eyebrow.ai-mark{color:var(--ink)}

/* /business scroll moments */
.js .dk h2.wr[data-r]{opacity:1;transform:none}
.wr .wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.wr .w2{display:inline-block}
.js .wr .w2{transform:translateY(108%);transition:transform 1s var(--ease);transition-delay:calc(var(--k) * 70ms)}
.js .wr.in .w2{transform:none}
/* lines draw from the left */
.dk .bz-item,.dk .probs>div,.dk .pr-row{position:relative}
.dk .bz-item{border-top:0}
.dk .bz-item::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);transform-origin:0 50%}
.js .dk .bz-item::before{transform:scaleX(0);transition:transform 1.2s var(--ease);transition-delay:calc(var(--i,0) * 110ms)}
.js .dk .bz-item.in::before{transform:none}
/* results: the figures roll in, the row slides */
.js .dk .pr-row .who img{transform:scale(.6);opacity:0;transition:transform .9s var(--ease) .25s,opacity .6s var(--ease) .25s}
.js .dk .pr-row.in .who img{transform:none;opacity:1}
/* the moving band of words */
.bz-band{overflow:hidden;padding:24px 0 8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:8px}
.bz-track{display:flex;gap:.55em;white-space:nowrap;font-size:clamp(56px,9vw,140px);font-weight:600;letter-spacing:-.05em;line-height:1.05;will-change:transform}
.bz-track span{color:transparent;-webkit-text-stroke:1px #4a4a48}
.bz-track span::after{content:"\00B7";margin-left:.55em;-webkit-text-stroke:0;color:#4a4a48}
.bz-track em{font-style:normal;background:linear-gradient(90deg,var(--ai1),var(--ai2),var(--ai3));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:0}
/* AI block: glow fades in, steps appear one after the other */
.js .ai-box .ai-glow{opacity:0;transform:scale(.7);transition:opacity 1.6s var(--ease),transform 2s var(--ease)}
.js .ai-box.in .ai-glow{opacity:.55;transform:none}
.js .ai-how{background-size:0 1px;transition:background-size 1.6s var(--ease) .2s}
.js .ai-how.in{background-size:100% 1px}
.js .ai-how li{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i) * 160ms + 400ms)}
.js .ai-how.in li{opacity:1;transform:none}
.js .ai-how i{transform:scale(.3);transition:transform .9s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i) * 160ms + 450ms)}
.js .ai-how.in i{transform:none}
/* team photo */
.js .dk .bz-team .lead .kl{transform:scale(.85);opacity:0;transition:transform 1.1s var(--ease),opacity .8s var(--ease)}
.js .dk .bz-team .lead.in .kl{transform:none;opacity:1}
@media(max-width:1000px){.js .ai-box.in .ai-glow{opacity:.38}}
@media(max-width:640px){.pl-g.w3{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}
@media(prefers-reduced-motion:reduce){.wr .w2,.ai-how li,.ai-how i,.dk .bz-item::before,.dk .pr-row .who img,.dk .bz-team .lead .kl{transform:none!important;opacity:1!important}.js .ai-how{background-size:100% 1px}}

/* /business: facts above the button, a quiet backdrop */
.bz-lead{grid-column:1/8}
.bz-lead .bz-facts{margin-top:32px}
.bz-lead .btns{margin-top:32px}
.bz-hero{position:relative;overflow:hidden;background:radial-gradient(70% 90% at 85% 0%,rgba(120,128,145,.16),rgba(120,128,145,0) 70%)}
.bz-hero .wrap{position:relative}
.bz-cols{position:absolute;top:-120px;bottom:-40px;left:var(--gut);right:var(--gut);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 55%,transparent 100%)}
.bz-cols i{border-left:1px solid rgba(243,243,241,.055);border-right:1px solid rgba(243,243,241,.055)}
.bz-hero .wrap>*:not(.bz-cols){position:relative;z-index:1}
@media(max-width:1000px){.bz-lead{grid-column:1/-1}.bz-cols{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px}.bz-cols i:nth-child(n+5){display:none}}


/* ===== phone pass: tighter rhythm, nothing enlarged ===== */
.about .ph{grid-column:1/5}
@media(max-width:1000px){
  .about .ph{grid-column:1/-1;max-width:300px}
}
@media(max-width:640px){
  section{padding:48px 0}
  .dk section{padding:48px 0}
  .sh{margin-bottom:28px}
  .sh p{margin-top:12px;font-size:16px}
  h2{font-size:clamp(32px,9vw,38px)}
  .hero.home .intro{margin-top:20px;font-size:19px}
  .film{margin-top:28px}
  /* who is Keliann: a smaller photo beside nothing, text right under it */
  .about{padding-top:56px}
  .about .ph{max-width:58%}
  .about .tx{padding-top:28px}
  .about .tx .big{margin-top:18px;font-size:21px}
  .about .tx p:not(.big):not(.micro){margin-top:14px;font-size:16px}
  .about .btns{margin-top:24px}
  .about .kfacts{margin-top:36px;padding-top:24px;gap:24px 16px}
  .about .kf .n{font-size:34px}
  /* how we work */
  .s3{padding:26px 0 30px}
  .s3>.tn{top:28px}
  .s3-k h3{font-size:34px}
  .s3-b{margin-top:16px}
  .s3-lead{font-size:18px}
  .s3-qs{margin-top:18px}
  .s3-qs li{padding:14px 0}
  .s3-build{margin-top:18px;gap:16px}
  .s3-proof{margin-top:22px;padding-top:18px;gap:14px}
  .s3-more{margin-top:20px}
  /* cards, steps, questions, closing */
  .pcard .bd{padding-top:16px}
  .pcard .t{margin-top:12px}
  .pcard .lbl{margin-top:14px;padding-top:12px}
  .pcard .go{margin-top:14px}
  .pswipe{margin-top:12px}
  .steps-list .s{padding:18px 0}
  .promise{margin-top:24px;font-size:17px}
  .faq .q{padding:20px 0}
  .faq .q h3{font-size:18px}
  .faq .q p{margin-top:8px;font-size:15.5px}
  .close{padding:64px 0 56px}
  .dk .close{padding:56px 0 52px}
  .close a.huge{font-size:clamp(44px,13vw,56px)}
  .close p{margin-top:18px;font-size:17px}
  footer{padding:40px 0 28px}
  /* client stories */
  .cs-photo{height:calc(78vh - var(--top));height:calc(78svh - var(--top))}
  .cs-ch{padding:48px 0 0}
  .cs-ch>.tn{top:50px}
  .cs-ch h2{font-size:36px;margin-top:10px}
  .cs-lead{font-size:18px;margin-top:20px}
  .cs-facts,.cs-rows,.cs-res,.cs-built{margin-top:22px}
  .cs-built{gap:28px}
  .cs-bf{margin-top:24px}
  .cs-cmp{margin-top:28px}
  .cs-quote{font-size:24px;margin-top:22px}
  .cs-end{margin-top:36px;padding-top:22px}
  .cs-body{padding-bottom:40px}
  .cpage+.close{padding-top:40px;border-top:1px solid var(--line)}
  /* for companies */
  .bz-hero h1{font-size:40px}
  .bz-hrow{margin-top:24px}
  .bz-lead p:first-child{font-size:17px}
  .bz-lead .bz-facts{margin-top:22px}
  .bz-lead .btns{margin-top:24px}
  .dk .probs>div{padding:18px 0}
  .bz-grid,.bz-grid.two{gap:22px}
  .bz-item p{margin-top:6px}
  .bz-band{padding:14px 0 4px}
  .bz-track{font-size:48px}
  .ai-box{padding:28px 18px}
  .ai-intro{margin-top:18px;font-size:17px}
  .ai-list{margin-top:28px;gap:18px}
  .ai-how{margin-top:32px;padding-top:20px}
  .ai-how ol{gap:20px;margin-top:12px}
  .ai-how h3{margin-top:10px}
  .ai-foot{margin-top:28px;gap:18px}
  .pr-row{padding:20px 0;row-gap:10px}
  .pr-row .n{font-size:40px}
  .bz-team{row-gap:24px}
  .dk .bz-team .lead{gap:16px}
  .dk .bz-team .kl{width:72px;height:72px}
  .bz-team .lead .big{font-size:20px}
}

/* video overlay on phones: smaller play button so the cover stays readable */
@media(max-width:640px){.vid .ov{padding:14px}.vid .play{font-size:15px;gap:10px}.vid .play i{width:44px;height:44px}}

/* social pages: Instagram side by side, LinkedIn full width, each with a caption */
.pl-g.soc{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
.pl-g.soc .pl-f:nth-child(n+3){grid-column:1/-1}
.pl-f{margin:0}
.pl-f .pl{margin-top:0}
.pl-f figcaption{font-size:13px;color:var(--faint);margin-top:8px}