/* Scene styles. Authored for a 1600x934 design canvas that is scaled to fit the viewport. */
/* ===== scene typography (stage px) ===== */
.pad{position:absolute;inset:0;padding:72px 88px;display:flex;flex-direction:column}
.eyebrow{font:500 15px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.h-display{font:900 76px/1.02 var(--display);letter-spacing:-.025em;text-transform:uppercase;text-wrap:balance;color:var(--ink)}
.h1{font:700 56px/1.08 var(--display);letter-spacing:-.025em;text-wrap:balance;color:var(--ink)}
.h2{font:600 30px/1.2 var(--display);letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.lead{font:400 22px/1.5 var(--text);color:var(--body);max-width:760px}
.p{font:400 17px/1.55 var(--text);color:var(--body)}
.accent{color:var(--accent)}
.tag{display:inline-flex;align-items:center;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--card);border:1px solid var(--line);padding:7px 10px;border-radius:6px}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.backer{display:inline-flex;align-items:center;gap:7px;font:600 14px/1 var(--text);color:var(--ink);padding:8px 12px;border-radius:8px;background:var(--surface-2)}
.backer:before{content:"";width:14px;height:14px;border-radius:3px;background:var(--faint)}
.draft{border-bottom:1.5px dashed var(--accent)}
.sheet-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:18px}

/* cards */
.grid{display:grid;gap:20px}
.box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px}
.num{font:700 64px/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.num .accent{font-weight:700}
.step-k{font:500 13px/1 var(--mono);letter-spacing:.12em;color:var(--accent);text-transform:uppercase}

/* placeholders */
.ph{position:relative;border-radius:12px;background:
  repeating-linear-gradient(-45deg,var(--hatch) 0 10px,transparent 10px 20px),var(--surface-2);
  border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.ph span{font:500 14px/1.4 var(--mono);color:var(--muted);text-align:center;padding:12px;letter-spacing:.04em}
.ph.dark{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.04) 0 10px,transparent 10px 20px),#202124}
.ph.dark span{color:rgba(255,255,255,.55)}

/* asset scene: 18% inset */
.asset{position:absolute;left:18%;right:18%;top:18%;bottom:18%;display:flex}
.asset .ph{flex:1}
.asset-cap{position:absolute;left:18%;right:18%;bottom:7%;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.asset-cap .t{font:600 22px/1.25 var(--display);color:var(--ink)}
.asset-cap .m{font:500 13px/1.4 var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;text-align:right}
.asset-top{position:absolute;left:18%;right:18%;top:7%;display:flex;justify-content:space-between;align-items:center}

/* case grid */
.cases{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:16px;flex:1;min-height:0}
.card{all:unset;box-sizing:border-box;cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:10px;min-width:0;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--ink);transform:translateY(-2px)}
.card .who{display:flex;justify-content:space-between;align-items:center}
.card .wm{font:800 17px/1 var(--display);letter-spacing:-.01em;color:var(--ink)}
.card .ix{font:500 12px/1 var(--mono);color:var(--faint)}
.card .ct{font:600 19px/1.22 var(--display);color:var(--ink);letter-spacing:-.01em}
.card .cd{font:400 14px/1.45 var(--text);color:var(--muted)}
.card .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px}
.card .bk{font:500 12px/1 var(--mono);color:var(--muted);letter-spacing:.04em}
.card .go{font:600 13px/1 var(--text);color:var(--accent)}

/* testimonials */
.quote{font:400 21px/1.5 var(--text);color:var(--ink)}
.who2{font:600 15px/1.3 var(--text);color:var(--ink)}
.role{font:400 14px/1.3 var(--text);color:var(--muted)}
table.cmp{width:100%;border-collapse:collapse;font:400 18px/1.3 var(--text)}
table.cmp th{font:600 16px/1.2 var(--text);text-align:center;padding:14px;color:var(--ink)}
table.cmp th:first-child,table.cmp td:first-child{text-align:left}
table.cmp td{padding:15px 14px;border-top:1px dashed var(--line);text-align:center;color:var(--body)}
table.cmp .us{background:var(--card)}
.y{color:var(--ok);font-weight:700}.n{color:var(--faint)}


/* Playground service chips (inside the stage) */
.svcrow{position:absolute;left:0;right:0;top:0;display:flex;gap:10px;justify-content:center;padding:34px 40px 0;flex-wrap:wrap}
.chipbtn{appearance:none;border:1px solid var(--line);background:var(--card);color:var(--muted);font:500 17px/1 var(--text);padding:12px 18px;border-radius:999px;cursor:pointer}
.chipbtn[aria-pressed="true"]{border-color:#131415;color:#131415}
.stage .box{background:var(--surface)}

/* ===== Fluid slides: recreated from the SAY Sales Deck (Figma, 1920x1080 reference) =====
   They are laid out with CSS grid / flex and sized in --u (the larger of the width / height fit), so they fill whatever space the viewer has. */
.viewport--fluid{container-type:size}
.fluid{position:absolute;inset:0}
.fs{--u:min(100cqw / 1920, 100cqh / 1080);--acc:#ea3d00;position:absolute;inset:0;overflow:hidden;background:#fff;color:#000;font-family:var(--text);-webkit-font-smoothing:antialiased}
.fs--dark{background:#080808;color:#fff}
.fs em{font-style:normal;color:var(--acc)}
:where(.fs h2,.fs h3,.fs p,.fs ul){margin:0}
:where(.fs ul){padding:0;list-style:none}
.fs__head{position:absolute;left:calc(var(--u)*67);right:calc(var(--u)*67);top:calc(var(--u)*48);height:calc(var(--u)*59);display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid rgba(0,0,0,.1);font-size:calc(var(--u)*24);line-height:1;color:#666}
.fs__head span:first-child{font-weight:500}
.fs--dark .fs__head{border-color:rgba(255,255,255,.1)}
.fs__body{position:absolute;display:flex}
.fs__h{font-weight:600;font-size:calc(var(--u)*78);line-height:1.24;letter-spacing:-.03em}
.fs__sub{font-size:calc(var(--u)*28);line-height:1;color:#666;margin-bottom:calc(var(--u)*34)}
.fs__list{display:flex;flex-direction:column;gap:calc(var(--u)*36)}
.fs__list li{display:flex;align-items:center;gap:calc(var(--u)*16);height:calc(var(--u)*32);font-size:calc(var(--u)*30);font-weight:500;line-height:1;white-space:nowrap}
.fs__chk{flex:none;width:calc(var(--u)*32);height:calc(var(--u)*32);fill:#17a417}
.fs__circ{flex:none;fill:var(--acc)}

/* slide 3: We work like your own team */
.fs3 .fs__body{left:calc(var(--u)*130);right:calc(var(--u)*130);top:calc(var(--u)*130);bottom:calc(var(--u)*130);gap:calc(var(--u)*91);justify-content:center;align-items:center}   /* content block is centred in the slide */
.fs3__left{flex:none;width:calc(var(--u)*555);display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u)*76)}
.fs3__grid{flex:none;display:grid;grid-template-columns:repeat(2,calc(var(--u)*491));grid-template-rows:repeat(2,calc(var(--u)*388));gap:calc(var(--u)*32)}   /* fixed-size cards: they scale with the slide but never reflow, so nothing clips or shifts inside them */
.fs3c{--c:min(100cqw / 491, 100cqh / 388);container-type:size;position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #e8e8e8;overflow:hidden}
.fs3c__vis{flex:1;min-height:0;display:grid;place-items:center;padding-top:calc(var(--c)*20)}
.fs3c__txt{text-align:center;padding:0 calc(var(--c)*16) calc(var(--c)*42)}
.fs3c__step{font-size:calc(var(--c)*16);font-weight:600;letter-spacing:.05em;line-height:1;color:var(--acc);text-transform:uppercase}
.fs3c__txt h3{margin-top:calc(var(--c)*14);font-size:calc(var(--c)*22);font-weight:500;line-height:1.25}
.fs3c__txt p{margin-top:calc(var(--c)*8);font-size:calc(var(--c)*18);line-height:1.45;color:#666}
.fs3c__logos{display:flex}
.fs3c__logos img{display:block;width:calc(var(--c)*70);height:calc(var(--c)*70);border-radius:50%;margin-left:calc(var(--c)*-7)}
.fs3c__logos img:first-child{margin-left:0}
.fs3c__logos img:nth-child(2){position:relative;z-index:2}
.fs3c__photo{display:block;width:calc(var(--c)*230);height:auto}
.fs3c__strip{position:relative;width:100%;height:calc(var(--c)*174)}
.fs3c__strip img{position:absolute;top:0;height:calc(var(--c)*174);width:auto;display:block}
.fs3c__strip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--c)*94);z-index:2;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.fs3c__spr{width:calc(var(--c)*299);display:flex;flex-direction:column;gap:calc(var(--c)*11)}
.fs3c__spr div{height:calc(var(--c)*44);display:flex;justify-content:space-between;align-items:center;padding:0 calc(var(--c)*17);font-size:calc(var(--c)*18);line-height:1}
.fs3c__spr b{font-weight:500;letter-spacing:-.03em;color:#1c2030}
.fs3c__spr .s1{width:56.9%;background:#f4f7fe;color:#0447c5}
.fs3c__spr .s2{background:rgba(230,0,226,.05);color:#e600e2}

/* slide 6: Pick the model that fits */
.fs6 .fs__body{left:0;right:0;top:0;bottom:0;flex-direction:column;align-items:center;justify-content:center}
.fs6 .fs__h{text-align:center}
.fs6__row{margin-top:calc(var(--u)*62);flex:none;width:calc(var(--u)*1331);display:flex;gap:calc(var(--u)*44)}
.fs6c{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;padding:calc(var(--u)*37) calc(var(--u)*36) calc(var(--u)*44);background:#fff;border:1.4px solid #e8e8e8}
.fs6c--dark{background:#080808;border-color:#080808;color:#fff}
.fs6c img{display:block;width:calc(var(--u)*122);height:auto}
.fs6c h3{margin-top:calc(var(--u)*27);font-size:calc(var(--u)*24.9);font-weight:500;line-height:1.39;letter-spacing:.04em;text-transform:uppercase}
.fs6c__d{margin-top:calc(var(--u)*9);padding-bottom:calc(var(--u)*26);border-bottom:1.4px solid #eaeaea;font-size:calc(var(--u)*22.1);line-height:1.56;letter-spacing:-.01em;color:#666}
.fs6c--dark .fs6c__d{border-color:#292929;color:#a5a5a5}
.fs6c ul{margin-top:calc(var(--u)*28);display:flex;flex-direction:column;gap:calc(var(--u)*18)}
.fs6c li{display:flex;align-items:center;gap:calc(var(--u)*14);font-size:calc(var(--u)*22.1);line-height:1.56;letter-spacing:-.01em}
.fs6c .fs__circ{width:calc(var(--u)*25);height:calc(var(--u)*25)}

/* slide 7: What sets us apart */
.fs7 .fs__body{left:0;right:0;top:0;bottom:0;justify-content:center;align-items:center}   /* content block is centred in the slide */
.fs7__left{flex:none;width:calc(var(--u)*574);display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u)*64)}
.fs7__grid{flex:none;display:grid;grid-template-columns:repeat(2,calc(var(--u)*539));grid-template-rows:repeat(2,calc(var(--u)*409));gap:calc(var(--u)*24)}   /* fixed-size cards: scale with the slide, never reflow, so artwork is never clipped or shifted */
.fs7c{--c:min(100cqw / 539, 100cqh / 409);container-type:size;position:relative;background:#fff;overflow:hidden}
.fs7c h3{position:absolute;left:calc(var(--c)*40);top:calc(var(--c)*40);right:calc(var(--c)*20);font-size:calc(var(--c)*32);font-weight:600;line-height:1.3;letter-spacing:-.02em;z-index:2}
.fs7c img{position:absolute;display:block;height:auto}

/* slide 8: What happens next? */
.fs8 .fs__body{left:calc(var(--u)*130);right:calc(var(--u)*130);top:calc(var(--u)*180);bottom:calc(var(--u)*110);flex-direction:column}
.fs8 .fs__h{color:#fff}
.fs8__rows{margin-top:calc(var(--u)*48);flex:1;min-height:0;display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.1)}
.fs8r{flex:1;min-height:0;display:grid;grid-template-columns:calc(var(--u)*102) minmax(0,1fr);align-content:start;padding-top:calc(var(--u)*48);border-bottom:1px solid rgba(255,255,255,.1)}
.fs8r__n,.fs8r h3{font-size:calc(var(--u)*42);font-weight:500;line-height:calc(var(--u)*56);letter-spacing:-.03em}
.fs8r__n{color:#8e8e8e}
.fs8r p{grid-column:2;margin-top:calc(var(--u)*20);font-size:calc(var(--u)*32);line-height:1.34;color:#9a9a9a}

/* Home: stat numbers (200+, $50M+, 92%) */
.num--stat{font-weight:500;font-size:52px}
.num--stat .accent{font-weight:500}

/* Home: client logo wall. Each logo has its own hoverable box with a tooltip card, like saydesign.pro */
.logowall{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:5}
.logorow{display:flex;justify-content:center;align-items:center;gap:0 10px}
.logochip{position:relative;display:flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:14px;outline:none;transition:background .15s}
.logochip img{display:block;height:auto;flex:none}
.logochip:hover,.logochip:focus-visible{background:var(--card)}
.logotip{position:absolute;left:50%;bottom:calc(100% + 8px);width:400px;transform:translate(calc(-50% + var(--dx,0px)),6px);padding:20px 22px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.12);text-align:left;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,transform .15s,visibility .15s;z-index:20;display:flex;flex-direction:column;gap:14px}
.logochip:hover .logotip,.logochip:focus-visible .logotip{opacity:1;visibility:visible;transform:translate(calc(-50% + var(--dx,0px)),0)}
.logotip__d{font:400 17px/1.5 var(--text);color:var(--body)}
.logotip__s{font:500 17px/1.5 var(--text);color:var(--ink)}

/* Home: client logo wall. Cards copy saydesign.pro (24px / 14.5px padding, 10px radius, touching, grey icon top-right that stays on hover, light grey on hover), scaled x1.65 */
.logowall{display:flex;flex-direction:column;align-items:center;gap:0;position:relative;z-index:5}
.logorow{display:flex;justify-content:center;align-items:center;gap:0}
.logochip{position:relative;display:flex;align-items:center;justify-content:center;padding:24px 40px;border-radius:16px;outline:none;background:transparent;transition:background .2s}
.logochip img{display:block;height:auto;flex:none}
.logochip::after{content:"";position:absolute;top:15px;right:18px;width:16px;height:15px;background:url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 viewBox=%220 0 10.001 9.096%22 overflow=%22visible%22><path d=%22M 3.182 0 C 1.425 0 0 1.446 0 3.231 C 0 5.015 1.425 6.462 3.182 6.462 L 3.668 6.462 C 3.625 6.155 3.625 5.845 3.668 5.538 L 3.182 5.538 C 1.927 5.538 0.909 4.505 0.909 3.231 C 0.909 1.956 1.927 0.923 3.182 0.923 L 6.818 0.923 C 7.501 0.923 8.147 1.234 8.579 1.771 C 9.011 2.308 9.182 3.013 9.045 3.692 C 9.313 3.959 9.533 4.271 9.694 4.615 C 10.161 3.614 10.091 2.44 9.508 1.504 C 8.924 0.567 7.909 0 6.818 0 Z M 6.818 4.615 C 6.065 4.615 5.455 5.235 5.455 6 C 5.455 6.765 6.065 7.385 6.818 7.385 C 7.571 7.385 8.182 6.765 8.182 6 C 8.182 5.235 7.571 4.615 6.818 4.615 Z M 4.545 6 C 4.546 5.013 5.164 4.135 6.084 3.817 C 7.004 3.498 8.022 3.808 8.616 4.589 C 9.211 5.37 9.25 6.449 8.715 7.272 L 9.867 8.443 L 9.224 9.096 L 8.071 7.926 C 7.373 8.394 6.478 8.435 5.742 8.033 C 5.005 7.63 4.545 6.849 4.545 6 Z%22 fill=%22rgb(158, 158, 158)%22></path></svg>") center/100% 100% no-repeat;transition:opacity .2s}
.logochip:hover,.logochip:focus-visible{background:#f5f5f5}
.logotip{position:absolute;left:50%;bottom:calc(100% + 8px);width:400px;transform:translate(calc(-50% + var(--dx,0px)),6px);padding:20px 22px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.12);text-align:left;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,transform .15s,visibility .15s;z-index:20;display:flex;flex-direction:column;gap:14px}
.logochip:hover .logotip,.logochip:focus-visible .logotip{opacity:1;visibility:visible;transform:translate(calc(-50% + var(--dx,0px)),0)}
.logotip__d{font:400 17px/1.5 var(--text);color:var(--body)}
.logotip__s{font:500 17px/1.5 var(--text);color:var(--ink)}

/* Home slide 3 (Figma slide 04): single-line rows, vertically centred */
.fs8--list .fs8r{align-content:center;align-items:start;padding-top:0}

/* Home: service cards with their pasted images. The image sits at the same offset as in Figma and is clipped by the card. */
.svc-card{position:relative;overflow:hidden}
.svc-card__img{position:absolute;display:block;object-fit:fill}


/* Every fluid-slide heading (Home slide 3 and all How we work slides): Wise Sans Heavy, uppercase, one size */
.fs__h{font-family:var(--brand-display);font-weight:900;text-transform:uppercase;letter-spacing:.01em;line-height:1.08;font-size:calc(var(--u)*72)}

/* What sets us apart: "Dev-ready handoff" illustration (built in CSS, scales with the box via --c) */
.hand{position:absolute;width:calc(var(--c)*470);padding:calc(var(--c)*22) calc(var(--c)*26);background:#fff;border:1px solid #e8e8e8;border-radius:calc(var(--c)*16);box-shadow:0 calc(var(--c)*14) calc(var(--c)*34) rgba(0,0,0,.08);display:flex;flex-direction:column;gap:calc(var(--c)*14)}
.hand__top{display:flex;justify-content:space-between;align-items:center;padding-bottom:calc(var(--c)*14);border-bottom:1px solid #eee}
.hand__file{display:flex;align-items:center;gap:calc(var(--c)*10);font-size:calc(var(--c)*18);font-weight:600;letter-spacing:-.01em}
.hand__file i{width:calc(var(--c)*20);height:calc(var(--c)*20);border-radius:calc(var(--c)*5);background:linear-gradient(135deg,#f24e1e 0 33%,#a259ff 33% 66%,#0acf83 66%)}
.hand__pill{font-size:calc(var(--c)*14);font-weight:600;color:#17a417;background:#e8f7ec;padding:calc(var(--c)*6) calc(var(--c)*12);border-radius:999px}
.hand__row{display:flex;align-items:center;gap:calc(var(--c)*12);font-size:calc(var(--c)*17);font-weight:500;color:#333}
.hand__row .fs__chk{width:calc(var(--c)*20);height:calc(var(--c)*20)}
.hand__bar{display:flex;justify-content:space-between;align-items:center;margin-top:calc(var(--c)*2);padding:calc(var(--c)*12) calc(var(--c)*16);border-radius:calc(var(--c)*10);background:#f4f4f4;font-size:calc(var(--c)*15);color:#666}
.hand__bar b{color:var(--acc);font-weight:600}

/* Home slide 4: pool of senior specialists (fluid, same tokens as the How we work slides) */
.fs9{--u:min(100cqw / 1920, 100cqh / 1080);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:calc(var(--u)*90);align-items:start;align-content:center;padding:calc(var(--u)*80) calc(var(--u)*130)}
.fs9__head{display:flex;flex-direction:column;gap:calc(var(--u)*26)}
.fs9 .eyebrow{font-size:calc(var(--u)*20);color:#666}
.fs9 .fs__h{line-height:1.08}
.fs9__lead{font-size:calc(var(--u)*28);line-height:1.5;color:#555;max-width:calc(var(--u)*720)}
.fs9__main{display:flex;flex-direction:column;gap:calc(var(--u)*36);min-width:0}
.fs9__stat{display:flex;flex-direction:column;gap:calc(var(--u)*12)}
.fs9__num{font:700 calc(var(--u)*72)/1.08 var(--display);letter-spacing:-.04em;color:var(--acc)}   /* same size as the slide heading (.fs__h, 72) */
.fs9__stat p{font-size:calc(var(--u)*28);color:#333;line-height:1.3}
.fs9__rows{display:flex;flex-direction:column}
.fs9__rows li{display:grid;grid-template-columns:calc(var(--u)*60) 1fr;gap:calc(var(--u)*24);align-items:start;padding:calc(var(--u)*17) 0;font-size:calc(var(--u)*26);line-height:1.4;color:#555}
.fs9__t{display:block;min-width:0;margin-top:calc((var(--u)*60 - var(--u)*26*1.4)/2)}   /* the FIRST line sits level with the middle of the icon box; a wrapped second line hangs below */   /* "Title: description" as one wrapping line of text, centred on the icon */
.fs9__rows b{font-weight:400;color:#000;font-size:inherit;line-height:inherit}
.fs9__rows li{border-bottom:1px solid #e8e8e8}.fs9__rows li:last-child{border-bottom:0}
.fs9__ic{width:calc(var(--u)*60);height:calc(var(--u)*60);display:grid;place-items:center;background:color-mix(in srgb,var(--acc,#ea3d00) 7%,transparent);border:0;color:var(--acc,#ea3d00)}
.fs9__ic svg{width:calc(var(--u)*28);height:calc(var(--u)*28)}
.scene .fs9__rows>*{animation:ss-rise .5s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(var(--i,0)*50ms + 120ms)}
.fs9__rows li:nth-child(2){--i:1}.fs9__rows li:nth-child(3){--i:2}.fs9__rows li:nth-child(4){--i:3}.fs9__rows li:nth-child(5){--i:4}.fs9__rows li:nth-child(6){--i:5}.fs9__rows li:nth-child(7){--i:6}
@media (prefers-reduced-motion:reduce){.scene .fs9__rows>*{animation:none}}

/* How we work, last slide: tenure tabs */
.fs10{display:flex;align-items:center;padding:calc(var(--u)*130)}
.fs10__in{width:100%;display:flex;flex-direction:column;gap:calc(var(--u)*26)}
.fs10 .eyebrow{font-size:calc(var(--u)*20);color:#666}
.fs10__box{background:#fff;border:1px solid #e8e8e8;margin-top:calc(var(--u)*10)}
.fs10__r{position:absolute;opacity:0;pointer-events:none}
.fs10__tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #e8e8e8}
.fs10__tab{display:grid;place-items:center;height:calc(var(--u)*150);cursor:pointer;border-right:1px solid #e8e8e8;border-bottom:calc(var(--u)*4) solid transparent;margin-bottom:-1px;opacity:.5;transition:opacity .25s ease,border-color .25s ease}
.fs10__tab:last-child{border-right:0}
.fs10__tab:hover{opacity:.8}
.fs10__tab img{height:calc(var(--u)*56);width:auto;max-width:70%;object-fit:contain}
.fs10__panel{display:none;grid-template-columns:5fr 6fr;gap:calc(var(--u)*90);align-items:center;padding:calc(var(--u)*64) calc(var(--u)*56) calc(var(--u)*70)}
.fs10__box[data-sel="0"] .fs10__panel[data-i="0"],.fs10__box[data-sel="1"] .fs10__panel[data-i="1"],.fs10__box[data-sel="2"] .fs10__panel[data-i="2"]{display:grid;animation:ss-rise .45s cubic-bezier(.22,.61,.36,1) both}
.fs10__box[data-sel="0"] .fs10__tab:nth-child(1),.fs10__box[data-sel="1"] .fs10__tab:nth-child(2),.fs10__box[data-sel="2"] .fs10__tab:nth-child(3){opacity:1;border-bottom-color:#000}
.fs10__r:focus-visible ~ .fs10__tabs{outline:2px solid var(--acc);outline-offset:2px}
.fs10__big{font:900 calc(var(--u)*92)/1 var(--brand-display);text-transform:uppercase;letter-spacing:.01em;color:#000}
.fs10__l p{margin-top:calc(var(--u)*20);font-size:calc(var(--u)*26);line-height:1.4;color:#555}
.fs10__link{display:inline-block;margin-top:calc(var(--u)*34);font-size:calc(var(--u)*26);color:#000;text-decoration:underline;text-underline-offset:calc(var(--u)*6);cursor:pointer}
.fs10__link:hover{color:var(--acc)}
.fs10__track{height:calc(var(--u)*3);background:#d8d8d8;position:relative}
.fs10__track i{position:absolute;left:0;top:calc(var(--u)*-17);height:calc(var(--u)*38);background:#000;transform-origin:left;animation:fs10-grow .7s cubic-bezier(.22,.61,.36,1) both .1s}
@keyframes fs10-grow{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.fs10__ticks{display:flex;justify-content:space-between;margin-top:calc(var(--u)*34);font:500 calc(var(--u)*20)/1 var(--text);letter-spacing:.04em;text-transform:uppercase;color:#666}
@media (prefers-reduced-motion:reduce){.fs10__track i,.fs10__panel{animation:none!important}}
.fs10__bar{min-width:0}
.fs10__svc{margin-top:calc(var(--u)*44);display:flex;flex-direction:column;gap:calc(var(--u)*16)}
.fs10__svc .eyebrow{font-size:calc(var(--u)*16)}
.fs10__svc .svc-badges{gap:calc(var(--u)*10)}
.fs10__svc .svc-badge{height:calc(var(--u)*44);font-size:calc(var(--u)*20);padding:0 calc(var(--u)*16) 0 calc(var(--u)*8);gap:calc(var(--u)*9)}
.fs10__svc .svc-badge__icon{width:calc(var(--u)*28);height:calc(var(--u)*28)}
.fs10__svc .svc-badge__icon svg{width:calc(var(--u)*16);height:calc(var(--u)*16)}

/* Home "Clients backed by" row: title and investor logos on one line, logos at one height */
.backedrow { display: flex; align-items: center; justify-content: center; gap: 48px; }
.backedrow__logos { display: flex; align-items: center; gap: 36px; }
.backedrow__logos img { height: 40px; width: auto; max-width: none; display: block; }
.backedrow__logos img[src*="ycombinator"], .backedrow__logos img[src*="race-capital"] { height: 56px; }
.backedrow__logos img[src*="sequoia"] { height: 30px; }

/* Clients who stay: per-client 5s timer on the active tab, then the next client shows */
.fs10__tab{position:relative}
.fs10__box[data-sel="0"] .fs10__tab:nth-child(1),.fs10__box[data-sel="1"] .fs10__tab:nth-child(2),.fs10__box[data-sel="2"] .fs10__tab:nth-child(3){border-bottom-color:#e0e0e0}
.fs10__box[data-sel="0"] .fs10__tab:nth-child(1)::after,.fs10__box[data-sel="1"] .fs10__tab:nth-child(2)::after,.fs10__box[data-sel="2"] .fs10__tab:nth-child(3)::after{content:"";position:absolute;left:0;bottom:calc(var(--u)*-4);height:calc(var(--u)*4);width:100%;background:#000;transform-origin:left;animation:fs10-timer 5s linear forwards}
@keyframes fs10-timer{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.fs10__tab::after{animation:none!important;transform:none!important}}

/* ================= responsive pass ================= */
/* Short viewports: drop the Clutch badge so the deck keeps its height. */
@media (max-height: 760px) { .clutch-wrap { display: none; } }

/* Tabs that no longer fit become a dropdown (set from JS: .is-compact). */
.tabsel { display: none; position: relative; align-items: center; gap: 8px; padding: 0 16px; flex: 1 1 auto; min-width: 0; font: 400 16px/1.34 var(--mono); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); cursor: pointer; }
.tabsel__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabsel img { width: 18px; height: 18px; flex: none; transform: rotate(90deg); opacity: .6; }
.tabsel select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.shell__strip.is-compact { overflow: visible; }
.shell__strip.is-compact .tabsel { display: flex; }
.shell__strip.is-compact .tab, .shell__strip.is-compact .sep, .shell__strip.is-compact .crumb-tail { display: none; }
.shell__strip.is-compact .strip-nav { display: none; }

@media (max-width: 720px) {
  html, body { height: 100dvh; }
  body { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .page { height: 100dvh; justify-content: flex-start; gap: 12px; padding-top: 20px; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .site-header { max-width: none; }
  .logo__mark { width: 26px; height: 26px; }
  .logo__word { height: 19px; }
  .shell { flex: 1 1 auto; min-height: 0; border-radius: 16px; }
  .clutch-wrap { display: none; }
  .notes { display: none; }
  .tabsel { font-size: 14px; padding: 0 12px; }

  /* Stage scenes reflow instead of being scaled down from 1600px. */
  .viewport { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  .stage { position: relative; width: 100%; height: auto; min-height: 100%; transform: none !important; }
  .stage .scene { position: relative; inset: auto; min-height: 100%; }
  .stage .pad { position: relative !important; inset: auto !important; min-height: 100%; padding: 28px 18px 64px !important; gap: 22px !important; }
  .stage .h-display { font-size: 34px !important; line-height: 1.05 !important; max-width: 100% !important; }
  .stage .h1 { font-size: 27px !important; line-height: 1.1 !important; }
  .stage .h2 { font-size: 20px !important; }
  .stage .lead { font-size: 16px !important; line-height: 1.5 !important; max-width: 100% !important; }
  .stage .p { font-size: 14px !important; }
  .stage .eyebrow { font-size: 11px; }
  .stage .box { padding: 14px; }
  .stage .num--stat { font-size: 30px; }
  .stage .num { font-size: 40px; }
  .stage .grid { gap: 12px; }
  .stage .grid:has(.svc-card) { grid-template-columns: 1fr !important; flex: none !important; }
  .svc-card { min-height: 250px; }
  .stage .logowall { gap: 0; width: 100%; }
  .stage .logorow { flex-wrap: wrap; gap: 0; }
  .stage .logochip { padding: 12px 14px; }
  .stage .logochip img { width: auto !important; height: 18px; max-width: 84px; object-fit: contain; }
  .stage .logochip::after, .stage .logotip { display: none; }

  /* Fluid (--u) slides: one unit = half a pixel, content flows and scrolls. */
  .viewport--fluid { overflow-y: auto; overflow-x: hidden; }
  .fluid { position: relative; inset: auto; min-height: 100cqh; }
  .fs { --u: calc(100cqw / 720); position: relative; inset: auto; min-height: 100cqh; overflow: visible; }
  .fs__body { position: relative; inset: auto !important; flex-direction: column; padding: 28px 18px 64px; gap: 20px; }
  .fs__h { font-size: 30px; line-height: 1.08; }
  .fs8 .fs__body { padding-top: 32px; }
  .fs8__rows { margin-top: 12px; flex: none; }
  .fs8r { flex: none; padding: 18px 0; grid-template-columns: 44px minmax(0, 1fr); }
  .fs8r__n, .fs8r h3 { font-size: 18px; line-height: 1.3; }
  .fs8r p { font-size: 14px; }
  .fs.fs9 { display: flex; flex-direction: column; gap: 22px; padding: 28px 18px 64px; align-content: normal; }
  .fs9__lead { font-size: 15px; }
  .fs9__num { font-size: 30px; line-height: 1.08; }   /* same size as the slide headings on phones */
  .fs9__stat p { font-size: 15px; }
  .fs9__main { gap: 18px; }
  .fs9__rows li { grid-template-columns: 34px 1fr; gap: 4px 12px; padding: 12px 0; font-size: 13.5px; align-items: start; }
  .fs9__rows li > .fs9__t > span { grid-column: 2; }
  .fs9__rows b { font-size: 15.5px; align-self: center; }
  .fs9__ic { width: 34px; height: 34px; grid-row: span 1; }
  .fs9__t { margin-top: calc((34px - 13.5px * 1.4) / 2); }
  .fs9__ic svg { width: 17px; height: 17px; }
}
@media (max-width: 720px) {
  .stage .grid:not(:has(.svc-card)) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; align-items: start; }
  .stage .grid:not(:has(.svc-card)) > .box { min-width: 0; padding: 12px 8px; text-align: center; }
  .stage .num--stat { font-size: 24px; white-space: nowrap; }
  .stage .grid:not(:has(.svc-card)) .p { font-size: 12px !important; margin-top: 6px !important; }
}
@media (max-width: 720px) {
  .viewport--fluid .fs { --u: calc(100cqw / 720); }
  .stage .grid:not(:has(.svc-card)) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .stage .grid:not(:has(.svc-card)) > .box { padding: 14px 10px; }
  .stage .num--stat { font-size: 28px; }
  .stage .grid:not(:has(.svc-card)) .p { font-size: 13px !important; }
}
@media (max-width: 430px) { .bar-btn { font-size: 13.5px; } }
@media (max-width: 720px) { .fs9__main, .fs9__rows, .fs9__rows li .fs9__t > span { width: 100%; max-width: 100%; } .fs9__rows li .fs9__t > span { justify-self: stretch; } }

/* ================= responsive pass 2 ================= */
/* Logo ticker (phones only) and phone close button: hidden by default */
.logoticker, .m-close { display: none; }
/* Case cards: smaller client logos at every size; title above the description in weight and size */
.cc__logo { height: 24px; max-width: 150px; }
.cc__wordmark { font-size: 20px; line-height: 24px; }
.cc__top { min-height: 28px; }

@media (max-width: 720px) {
  /* one heading size everywhere on phones */
  .stage .h-display, .stage .h1, .fs__h, .viewport--fluid .fs__h { font-size: 30px !important; line-height: 1.08 !important; }
  /* content centred when it fits, scrolls when it doesn't */
  .stage .pad { justify-content: safe center !important; }
  .fs__body { min-height: 100cqh; justify-content: safe center; }
  .fs.fs9, .fs.fs10 { justify-content: safe center; }
  /* stat cards: equal height, tighter */
  .stage .grid:not(:has(.svc-card)) { grid-auto-rows: 1fr; }
  .stage .grid:not(:has(.svc-card)) > .box { display: flex; flex-direction: column; justify-content: center; padding: 12px 8px; }
  .stage .num--stat { font-size: 26px; }
  .stage .grid:not(:has(.svc-card)) .p { font-size: 12.5px !important; line-height: 1.35 !important; margin-top: 4px !important; }
  /* logo ticker replaces the wall */
  .stage .logowall { display: none; }
  .logoticker { display: block; width: 100%; max-width: 640px; overflow: hidden; margin: 0 auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
  .logoticker__track { display: flex; align-items: center; gap: 32px; width: max-content; animation: ticker 36s linear infinite; }
  .logoticker__track img { height: 20px; width: auto !important; max-width: 96px; object-fit: contain; flex: none; }
  @keyframes ticker { to { transform: translateX(calc(-50% - 16px)); } }
  /* "What changes" list: normal text size */
  .fs8r { padding: 14px 0; grid-template-columns: 36px minmax(0, 1fr); }
  .fs8r__n, .fs8r h3 { font-size: 15px; line-height: 1.4; font-weight: 500; }
  /* specialists: rows use the full width, tighter heading */
  .fs9__head { gap: 10px; }
  .fs9__rows li { display: grid; grid-template-columns: 34px minmax(0, 1fr); width: 100%; }
  .fs9__rows li .fs9__t > span { grid-column: 2; width: auto; max-width: none; }
  .fs9__main, .fs9__rows { width: 100%; align-self: stretch; }

  /* How we work: steps / apart cards stacked full width, artwork scaled and centred */
  .fs3 .fs__body, .fs7 .fs__body { align-items: stretch; }
  .fs3__left, .fs7__left { width: auto; gap: 18px; }
  .fs3__grid, .fs7__grid { width: 100%; grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: auto; gap: 12px; }
  .fs3c { height: 240px; }
  .fs7c { width: 100%; aspect-ratio: 539 / 409; height: auto; }
  .fs6 .fs__body { justify-content: center; }
  .fs6__row { width: 100%; flex-direction: column; gap: 12px; margin-top: 18px; }
  .fs6c { padding: 18px; }
  .fs6c img { width: 64px; }
  .fs6c h3 { font-size: 15px; margin-top: 12px; }
  .fs6c__d, .fs6c li { font-size: 14px; }
  .fs6c ul { margin-top: 12px; gap: 8px; }
  .fs6c .fs__circ { width: 16px; height: 16px; }
  /* Clients who stay: wide card, stacked content, whole slide scrolls */
  .fs.fs10 { display: block; padding: 28px 0 64px; }
  .fs10__in { gap: 16px; }
  .fs10__box { width: 96vw; max-width: calc(100% - 8px); margin: 0 auto; }
  .fs10__tab { height: 64px; }
  .fs10__tab img { height: 24px; }
  .fs10__panel { grid-template-columns: 1fr; gap: 20px; padding: 20px 16px 22px; }
  .fs10__big { font-size: 34px; }
  .fs10__l p, .fs10__link { font-size: 14.5px; }
  .fs10__link { margin-top: 12px; }
  .fs10__ticks { font-size: 10px; margin-top: 16px; }
  .fs10__svc { margin-top: 18px; }
  .fs10__svc .svc-badges { flex-wrap: wrap; }
  .fs10__svc .svc-badge { height: 30px; font-size: 13px; }

  /* Case cards: title clearly bigger than the description */
  .cc__title { font-size: 24px !important; line-height: 1.12 !important; }
  .cc__desc { font-size: 14.5px; }
  /* phones: a visible Close button while a case study or service is open */
  .shell__strip.is-compact.is-crumb .m-close { display: inline-flex; }
  .m-close { position: absolute; right: 8px; top: 8px; height: 32px; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 500 13px/1 var(--text); color: var(--ink); cursor: pointer; z-index: 3; }
  .shell__strip { position: relative; }
}
@media (max-width: 720px) { .fs10__track i { top: -6px; height: 14px; } }
/* phones: stage scenes fill the frame so content can centre vertically */
@media (max-width: 720px) {
  .stage { display: flex; flex-direction: column; }
  .stage .scene { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; }
  .stage .pad { flex: 1 0 auto; min-height: 0; gap: 32px !important; }
  .stage .pad > div[style*="gap:26px"] { gap: 14px !important; }
}
/* titles never leave a one-word last line; list copy wraps evenly */
.fs__h, .h1, .h-display, .carousel__title, .cc__title { text-wrap: balance; }
.fs8r h3, .fs8r p, .fs9__rows span, .fs__body p { text-wrap: pretty; }
/* "what changes" rows: breathing room between the copy and the divider lines at every width */
.fs8--list .fs8r { padding-block: max(14px, calc(var(--u) * 26)); column-gap: max(14px, calc(var(--u) * 24)); }
@media (max-width: 720px) {
  .stage .pad > div[style*="gap:26px"] { gap: 24px !important; }
  .logoticker { padding-block: 4px; }
}
@media (max-width: 720px) {
  /* service cards: keep each screenshot at its own aspect ratio, anchored bottom-right */
  .svc-card { position: relative; min-height: 0; padding-bottom: 0 !important; overflow: hidden; display: flex; flex-direction: column; }
  .svc-card .svc-card__img { position: relative !important; left: auto !important; top: auto !important; width: 86% !important; height: auto !important; margin: 18px 0 0 auto; display: block; object-fit: contain; }
}
@media (max-width: 720px) {
  /* check lists (How we work): body-size text, small ticks, like the Home lists */
  .fs__sub { font-size: 13px; margin-bottom: 10px; }
  .fs__list { gap: 10px; }
  .fs__list li { height: auto; font-size: 14.5px; gap: 10px; line-height: 1.35; white-space: normal; }
  .fs__chk { width: 16px; height: 16px; }
  /* the deck's opening title is allowed to be bigger than the slide titles */
  .stage .h-display { font-size: 38px !important; line-height: 1.02 !important; }
}
/* never stretch artwork: crop from the top-left instead, at every width */
.svc-card__img { object-fit: cover !important; object-position: left top; }
@media (max-width: 720px) {
  /* check lists: two columns instead of one long column */
  .fs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .fs__list li { align-items: flex-start; }
  .fs__chk { margin-top: 1px; }
  /* "What sets us apart": compact cards like "We work like your own team" */
  .fs7__grid { gap: 10px; }
  .fs7c { width: 100%; max-width: 420px; margin: 0 auto; aspect-ratio: 539 / 409; border: 1px solid #e8e8e8; }
  .fs7c h3 { font-size: 15px !important; font-weight: 500; left: 16px; top: 14px; right: 16px; line-height: 1.3; }
  .fs3__left, .fs7__left { gap: 14px; }
}
@media (max-width: 720px) {
  /* Clients who stay: card runs edge to edge inside the frame; content centred vertically */
  .fs.fs10 { display: flex; flex-direction: column; justify-content: safe center; min-height: 100cqh; padding: 28px 0 64px; }
  .fs10__in { width: 100%; }
  .fs10__in > .fs__h { padding: 0 18px; }
  .fs10__box { width: 100%; max-width: none; margin: 0; border-left: 0; border-right: 0; }
}
@media (max-width: 720px) {
  /* testimonials: photo becomes a full-width cover; name, role and logo sit on its right */
  .tslide { grid-template-rows: auto auto; align-content: start; overflow-y: auto; }
  .tcard { width: 100%; height: auto; aspect-ratio: 16 / 10; justify-self: stretch; }
  .tcard__photo { object-position: 22% 20%; }
  .tcard::after { background: linear-gradient(90deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.82) 100%); }
  .tcard__body { left: auto; right: 0; top: 0; bottom: 0; width: 52%; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; text-align: right; }
  .tcard__foot { flex-direction: column; align-items: flex-end; gap: 10px; border-top: 0; padding-top: 0; }
  .tcard__name { font-size: 15px; line-height: 1.25; }
  .tcard__role { font-size: 13px; }
  .tcard__logo { order: -1; max-width: 100%; height: 20px; object-position: right center; }
  .tslide__quote { font-size: 19px; }
}
/* case covers: a soft blur + light wash in the top-right corner so the service tags stay readable on any image */
.cc__visual--img::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); background: rgba(255,255,255,.18);
  -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, rgba(0,0,0,.75) 28%, rgba(0,0,0,.25) 52%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, rgba(0,0,0,.75) 28%, rgba(0,0,0,.25) 52%, transparent 72%); }
.cc__visual--img .cc__overlay { z-index: 1; }
@media (max-width: 720px) {
  /* testimonials: plain column so the cover always reserves its own height */
  .tslide { display: flex; flex-direction: column; gap: 20px; }
  .tcard { flex: none; width: 100%; height: auto; aspect-ratio: 16 / 10; }
  .tslide__text { flex: none; padding-block: 0; gap: 18px; }
}
/* Clients who stay: duration and case link on one line, labelled sections with room between them */
.fs10__l { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fs10__l .fs10__link { margin-top: 0; }
.fs10__lbl { display: block; margin-bottom: calc(var(--u) * 40); font-size: calc(var(--u) * 16); }
@media (max-width: 720px) {
  .fs10__panel { gap: 28px; padding: 24px 16px 26px; }
  .fs10__lbl { font-size: 11px; margin-bottom: 18px; }
  .fs10__svc { margin-top: 28px; }
  .fs10__svc .eyebrow { font-size: 11px; }
}
/* case cards: titles and descriptions wrap instead of running off the card */
.case-card .cc__title { white-space: normal !important; text-wrap: balance; overflow-wrap: anywhere; }
.case-card .cc__desc { white-space: normal !important; text-wrap: pretty; }
/* case covers: dark wash + blur from the top-right corner, fading linearly toward the bottom-left, so the service tags read on any image */
.case-card .cc__visual { position: relative; }
.case-card .cc__visual::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(225deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 22%, rgba(0,0,0,0) 48%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(225deg, #000 0%, rgba(0,0,0,.6) 25%, transparent 50%);
  mask-image: linear-gradient(225deg, #000 0%, rgba(0,0,0,.6) 25%, transparent 50%); }
.case-card .cc__overlay { z-index: 2; }
/* stronger, wider corner wash: covers the whole tag column whatever the card's shape */
.case-card .cc__visual::after {
  background: radial-gradient(60% 160% at 100% 0%, rgba(0,0,0,.62) 0%, rgba(0,0,0,.4) 35%, rgba(0,0,0,.12) 65%, rgba(0,0,0,0) 85%);
  -webkit-mask-image: radial-gradient(60% 160% at 100% 0%, #000 0%, #000 45%, transparent 85%);
  mask-image: radial-gradient(60% 160% at 100% 0%, #000 0%, #000 45%, transparent 85%); }
/* Tabs: no dropdown. When they don't fit, the strip scrolls sideways and fades out on the right. */
.shell__strip .tabsel, .shell__strip.is-compact .tabsel { display: none !important; }
.shell__strip.is-compact .tab, .shell__strip.is-compact .sep { display: flex; }
.shell__strip { overflow-x: auto !important; scrollbar-width: none; }
.shell__strip.is-scrollable { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
@media (max-width: 480px) {
  .shell__strip.is-crumb .m-close { display: inline-flex; }
  .shell__strip.is-crumb { -webkit-mask-image: none; mask-image: none; }
}
/* covers: dark corner fade only on case studies; no blur anywhere */
.cc__visual--img::before { content: none !important; }
.case-card .cc__visual::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* Clients who stay: no 5s timer; the active client keeps a solid underline */
.fs10__tab::after { animation: none !important; transform: none !important; }
/* Clients who stay: plain "Case study →" link, matched labels, more room between sections */
.fs10 .fs10__link { text-decoration: none; font-weight: 500; }
.fs10 .fs10__lbl, .fs10 .fs10__svc .eyebrow { font-size: calc(var(--u) * 16); }
.fs10__svc { margin-top: calc(var(--u) * 64); }
.fs10__lbl { margin-bottom: calc(var(--u) * 44); }
@media (max-width: 720px) {
  .fs10 .fs10__lbl, .fs10 .fs10__svc .eyebrow { font-size: 11px; }
  .fs10__panel { gap: 36px; }
  .fs10__svc { margin-top: 36px; }
  .fs10__lbl { margin-bottom: 20px; }
}
/* Services cards share the case-card markup: no corner fade on their thumbnails */
.case-card .cc__visual--thumb::after { content: none !important; }
/* breadcrumb never scrolls with the tabs, and long names truncate before the Close button */
.shell__strip.is-crumb { overflow: hidden !important; }
@media (max-width: 480px) { .crumb-tail__name { display: inline-block; max-width: calc(100vw - 280px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } }
/* phones: while a case study / service is open the strip is just "Section › Name" on the left and Close on the right */
@media (max-width: 480px) {
  .shell__strip.is-crumb .tab, .shell__strip.is-crumb .sep, .shell__strip.is-crumb .strip-nav { display: none !important; }
  .shell__strip.is-crumb .crumb-tail { position: static !important; left: auto !important; transform: none !important; opacity: 1 !important; display: flex; align-items: center; gap: 4px; padding: 0 12px; min-width: 0; max-width: calc(100% - 110px);
    font: 400 14px/1.34 var(--mono); text-transform: uppercase; color: var(--ink); white-space: nowrap; }
  .shell__strip.is-crumb .crumb-tail::before { content: attr(data-section); opacity: .5; flex: none; }
  .shell__strip.is-crumb .crumb-tail img { width: 16px; height: 16px; flex: none; opacity: .5; }
  .shell__strip.is-crumb .crumb-tail__name { max-width: none; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
/* wider screens: "Case study →" sits below the duration again (side-by-side is phones only) */
@media (min-width: 721px) {
  .fs10__l { display: block; }
  .fs10__l .fs10__link { display: inline-block; margin-top: calc(var(--u) * 34); }
}
/* How we work cover: same look as the Case studies / Services intro */
.howintro { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.howintro .carousel__intro { width: 100%; height: 100%; }
@media (max-width: 720px) { .howintro .carousel__title { font-size: 34px; } .howintro .carousel__desc { font-size: 16px; } }
@media (max-width: 720px) {
  /* stat cards: one fixed height so wrapped labels never make them uneven */
  .stage .grid:not(:has(.svc-card)) { grid-auto-rows: 104px; }
  .stage .grid:not(:has(.svc-card)) > .box { height: 100%; justify-content: center; gap: 4px; }
}

/* Every slide has a white background: the one formerly dark slide ("What happens next") is now a light slide too */
.fs--dark{background:#fff;color:#000}
.fs--dark .fs__head{border-color:rgba(0,0,0,.1)}
.fs8 .fs__h{color:#000}
.fs8__rows{border-top-color:rgba(0,0,0,.1)}
.fs8r{border-bottom-color:rgba(0,0,0,.1)}
.fs8r p{color:#666}

/* What sets us apart: the cards get the same hairline border as the "We work like your own team" cards */
.fs7c{border:1px solid #e8e8e8}

/* Clients who stay: +20 under the title; link underlines on hover */
.fs10__in { gap: calc(var(--u) * 46); }
.fs10 .fs10__link { text-decoration: none; line-height: 1; }
.fs10 .fs10__link:hover { color: #000; text-decoration: underline; text-underline-offset: calc(var(--u) * 6); }
/* left: who they are + scale, what we did, case study. right: months (smaller than the slide title) above the duration bar */
.fs10__panel { align-items: start; }
.fs10__l { display: block; }
.fs10__big { font-size: calc(var(--u) * 56); margin-bottom: calc(var(--u) * 40); }
.fs10__l .fs10__about { font: 400 calc(var(--u) * 26)/1.4 var(--text); color: #111; margin: 0; }
.fs10__pills { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 20); }
.fs10__pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: none; border: 1px solid #dcdcdc; font: 500 calc(var(--u) * 20)/1.2 var(--text); color: #333; }
.fs10__pill img { width: 16px; height: 16px; object-fit: contain; flex: none; display: block; }
.fs10__l .fs10__svc { margin-top: calc(var(--u) * 40); }
.fs10__l .fs10__link { display: inline-block; margin-top: calc(var(--u) * 44); }
@media (max-width: 720px) {
  .fs10__bar { order: -1; }
  .fs10__big { font-size: 34px; margin-bottom: 18px; }
  .fs10__l .fs10__about { font-size: 15px; } .fs10__pill { font-size: 12.5px; }
  .fs10__l .fs10__svc { margin-top: 20px; } .fs10__l .fs10__link { margin-top: 20px; font-size: 14.5px; }
}
/* duration bar: orange with fine light "////" hatching */
.fs10__track i { background: repeating-linear-gradient(135deg, var(--acc) 0 calc(var(--u) * 11), rgba(255,255,255,.2) calc(var(--u) * 11) calc(var(--u) * 14)), var(--acc); }   /* orange underlay: the 20% white stripes tint it instead of showing the page behind */
/* home hero: smaller, more saturated inline icons */
.ig .inl { width: .84em; height: .84em; vertical-align: -.1em; margin-right: 10px; filter: saturate(1.6) brightness(1.06); }   /* 6px + 4px between icon and word */

/* Services: one grouped container with a shared corner radius; white tiles with hairline separators, no gaps */
.stage .svc-grid { gap: 0 !important; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.stage .svc-grid > .svc-card { background: #fff; border: 0; border-radius: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stage .svc-grid > .svc-card:nth-child(3n) { border-right: 0; }
.stage .svc-grid > .svc-card:nth-last-child(-n+3) { border-bottom: 0; }
@media (max-width: 720px) {
  .stage .svc-grid > .svc-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .stage .svc-grid > .svc-card:last-child { border-bottom: 0; }
}

/* Services cards (desktop): text on top, the screenshot below it in normal flow, so the gap between the end of the text and the screenshot is the same in every card (24px). The screenshot keeps its left inset and bleeds off the right and bottom edges. */
@media (min-width: 721px) {
  .stage .svc-grid > .svc-card { display: flex; flex-direction: column; }
  .stage .svc-grid > .svc-card .svc-card__img { position: relative !important; flex: 1 1 0; min-height: 0; height: auto !important; margin: 24px -28px -28px var(--ix, 0); width: calc(100% - var(--ix, 0px) + 28px); object-fit: cover !important; object-position: left top; }
}

/* all three client panels share one grid cell, so the slide is as tall as the tallest one and never shifts when you switch client */
.fs10__box { display: grid; }
.fs10__box > .fs10__tabs { grid-row: 1; }
.fs10__box > .fs10__panel { grid-row: 2; grid-column: 1; display: grid !important; visibility: hidden; pointer-events: none; animation: none; }
.fs10__box[data-sel="0"] .fs10__panel[data-i="0"],.fs10__box[data-sel="1"] .fs10__panel[data-i="1"],.fs10__box[data-sel="2"] .fs10__panel[data-i="2"] { visibility: visible; pointer-events: auto; }
/* the panel only fades in when you switch client (a class set for a moment by the tab change); on arriving at the slide the normal content rise handles it, so nothing shows empty first */
.fs10__box.is-switch[data-sel="0"] .fs10__panel[data-i="0"],.fs10__box.is-switch[data-sel="1"] .fs10__panel[data-i="1"],.fs10__box.is-switch[data-sel="2"] .fs10__panel[data-i="2"] { animation: ss-rise .45s cubic-bezier(.22,.61,.36,1) both; }

.fs10__org { display: inline-flex; align-items: center; gap: 6px; }
.fs10__comma { font-style: normal; margin: 0 6px 0 0; }

.logotip.is-below { bottom: auto; top: calc(100% + 8px); }
/* pen hints are dropped in short windows (see drawNotes) */
@media (max-height: 800px) { .notes { display: none; } }
/* Clutch badge inside the Home slide: light, centred at the bottom of the deck */
.home-clutch { position: absolute; left: 0; right: 0; bottom: 34px; display: flex; justify-content: center; z-index: 6; }
.home-clutch .clutch { height: 50px; padding: 8px 20px; gap: 10px; font-size: 21px; line-height: 30px; }
.home-clutch .clutch img { width: 24px; height: 24px; }
@media (max-width: 720px) { .home-clutch { display: none; } }

/* The customer one-liner pill, inside Home's first slide.
   Wide screens: it floats at the top of the slide (sizes are in slide units, so it scales with the deck). Phones: it is the first thing in the slide's flow and pushes the content down.
   It is always ONE line: it hugs its text, and when the text is longer than the room it fades at the edges and glides sideways. */
.outcomes-slot { position: absolute; left: 0; right: 0; top: 40px; display: flex; justify-content: center; padding: 0 40px; z-index: 6; }
.outcomes-slot .outcomes { position: static !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; padding: 0 !important; margin: 0; max-width: 100%; display: flex; justify-content: center; z-index: auto; font-size: 21px; }
.outcomes__line { display: inline-flex !important; align-items: center; width: auto; max-width: 100%; padding: 14px 28px; font-size: 21px; white-space: nowrap; }
.outcomes__clip { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.outcomes__line.is-long .outcomes__clip { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
.outcomes__txt { display: inline-block; white-space: nowrap; }
.outcomes__line.is-long .outcomes__txt { animation: outcomes-glide 9s ease-in-out infinite; }
@keyframes outcomes-glide { 0%, 12% { transform: translateX(0); } 72%, 90% { transform: translateX(var(--o-shift, 0px)); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .outcomes__line.is-long .outcomes__txt { animation: none; } }
@media (max-width: 720px) {
  .outcomes-slot { position: static; display: block; width: 100%; padding: 0; }
  .outcomes-slot .outcomes { font-size: 12.5px; }
  .outcomes__line { padding: 9px 16px; font-size: 12.5px; }
}

/* Home first slide on phones: a muted reminder that the deck is swiped */
.home-swipe { display: none; }
@media (max-width: 480px) {
  .home-swipe { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; font: 500 13px/1 var(--text); color: #a0a0a0; pointer-events: none; z-index: 2; }
  .home-swipe__icon { width: 20px; height: 20px; flex: none; background: #b0b0b0; -webkit-mask: url("../assets/icons/hand-swipe-left.svg") center / contain no-repeat; mask: url("../assets/icons/hand-swipe-left.svg") center / contain no-repeat; }
}

/* the swipe reminder hops now and then (two small bounces, then a pause); icon and label hop together so the gap never changes */
@media (max-width: 480px) {
  .home-swipe { animation: home-swipe-hop 3.6s cubic-bezier(.3,0,.2,1) 1.2s infinite; }
}
@keyframes home-swipe-hop { 0%, 58%, 100% { transform: translateY(0); } 66% { transform: translateY(-9px); } 74% { transform: translateY(0); } 80% { transform: translateY(-4px); } 86% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .home-swipe { animation: none !important; } }

/* Testimonials on phones: a taller client card, and the whole slide centred in the frame when it fits (it scrolls when it does not) */
@media (max-width: 720px) {
  .tslide { display: flex !important; flex-direction: column; min-height: 100%; }
  .tslide > :first-child { margin-top: auto; }
  .tslide > :last-child { margin-bottom: auto; }
  .tcard { aspect-ratio: 1 / 1 !important; max-height: 36vh; }
}

/* narrow screens: nothing in a slide may be wider than the slide (the logo ticker's wrapper used to stretch to 640px) */
@media (max-width: 720px) { .stage .pad > div { max-width: 100%; } .logoticker { max-width: min(640px, 100%) !important; } }