/* fonts, served from this site (Archivo and Caveat, SIL Open Font License) */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Caveat";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/caveat-ps.woff2) format("woff2");unicode-range:U+2E,U+50,U+53}
/* Amit Verma · amitpreneur.com · v4 "The Canvas"
   The first fold is a live design canvas: rulers, dot grid, real pages as draggable artboards,
   a selected headline, multiplayer cursors, a pinned review; then a JVZoo-style stage on the brand yellow.
   Desktop is drawn on a 1440 artboard: 1rem = 10px at 1440 and everything scales with the window. */
:root{
  --paper:#F3F3EF; --ink:#121210; --ink2:#3A3A36; --muted:#6E6E68; --line:rgba(18,18,16,.12);
  --hi:#FFE600; --sel:#0D99FF; --pink:#FF3D8B; --green:#14C77B; --violet:#7B61FF; --orange:#FF7A1A;
  --ease:cubic-bezier(.3,.7,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:clamp(7.6px,calc(100vw / 144),18px);-webkit-font-smoothing:antialiased;scroll-behavior:smooth;overflow-x:clip;background:var(--paper)}
body{font-family:"Archivo",system-ui,sans-serif;font-size:1.75rem;line-height:1.55;color:var(--ink);background:var(--paper);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:.3rem solid var(--sel);outline-offset:.3rem}

/* ---------- logo ---------- */
.logo{display:inline-flex;align-items:center;--h:4rem;color:var(--ink);text-decoration:none}
.logo svg{height:var(--h);width:calc(var(--h)*1.2821);overflow:visible;flex:none}
.logo .wmk{font-variation-settings:"wdth" 100,"wght" 900;font-size:calc(var(--h)*.7289);letter-spacing:-.018em;line-height:1;margin-left:calc(var(--h)*.2436);white-space:nowrap}
.logo .s{transform-box:fill-box;transform-origin:0 50%;transition:transform .55s var(--ease)}
.logo .s2{transition-delay:.16s}.logo .s3{transition-delay:.32s}
.logo.draw .s{transform:scaleX(0)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:1.2rem;font-weight:800;text-decoration:none;border-radius:1.2rem;transition:translate .2s var(--ease),box-shadow .2s var(--ease)}
.btn .arr{transition:translate .2s var(--ease)}
.btn:hover .arr{translate:.4rem 0}
.btn.ink{background:var(--ink);color:#fff;font-size:1.5rem;padding:1.3rem 2.2rem}
.btn.yel{background:var(--hi);color:var(--ink);font-size:2rem;padding:2.2rem 3.6rem;border:.25rem solid var(--ink);box-shadow:.6rem .6rem 0 var(--ink);border-radius:1.4rem}
.btn.yel:hover{translate:-.3rem -.3rem;box-shadow:.9rem .9rem 0 var(--ink)}
.btn.yel:active{translate:.3rem .3rem;box-shadow:.2rem .2rem 0 var(--ink)}

/* ======================= FIRST FOLD ======================= */
.hero{position:relative;height:132rem;overflow:hidden;background:var(--paper);isolation:isolate}
.aura{position:absolute;border-radius:50%;filter:blur(8rem);opacity:.75;z-index:-2;pointer-events:none}
.aura.a{width:62rem;height:46rem;left:-14rem;top:-8rem;background:#BFE0FF}
.aura.b{width:74rem;height:34rem;left:36rem;top:18rem;background:#FFF2A6;opacity:.6}
.aura.c{width:58rem;height:48rem;right:-16rem;top:2rem;background:#FFD0E6}
.dots{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(18,18,16,.2) .11rem,transparent .14rem);background-size:2.4rem 2.4rem;background-position:1.2rem 1.2rem}

/* rulers, like the edge of a design tool */
.ruler{position:absolute;z-index:4;background:rgba(255,255,255,.72);backdrop-filter:blur(.6rem);color:#9A9A93;font-size:.95rem;font-weight:600;font-variant-numeric:tabular-nums;pointer-events:none}
.ruler.x{left:2.4rem;right:0;top:0;height:2.4rem;border-bottom:.1rem solid var(--line);background-image:linear-gradient(90deg,rgba(18,18,16,.28) .1rem,transparent .1rem);background-size:1rem .6rem;background-repeat:repeat-x;background-position:0 100%}
.ruler.y{left:0;top:0;bottom:0;width:2.4rem;border-right:.1rem solid var(--line);background-image:linear-gradient(rgba(18,18,16,.28) .1rem,transparent .1rem);background-size:.6rem 1rem;background-repeat:repeat-y;background-position:100% 0}
.ruler span{position:absolute;line-height:1}
.ruler.x span{top:.35rem;padding-left:.4rem;border-left:.1rem solid rgba(18,18,16,.4);height:2rem}
.ruler.y span{left:.3rem;writing-mode:vertical-rl;rotate:180deg;padding-bottom:.4rem;border-bottom:.1rem solid rgba(18,18,16,.4);width:2rem;text-align:left}
.ruler .mark{position:absolute;background:rgba(13,153,255,.18);border:0}
.ruler.x .mark{top:0;bottom:0}
.ruler.y .mark{left:0;right:0}

.nav{position:absolute;left:0;right:0;top:2.4rem;z-index:20;height:9rem;display:flex;align-items:center;gap:4rem;padding:0 6rem 0 8.4rem}
.nav nav{display:flex;gap:3.4rem;margin-left:auto;font-weight:650;font-size:1.55rem}
.nav nav a{text-decoration:none;opacity:.78}
.nav nav a:hover{opacity:1;text-decoration:underline;text-decoration-thickness:.3rem;text-decoration-color:var(--hi);text-underline-offset:.5rem}

/* ---------- copy column ---------- */
.copy{position:absolute;left:0;right:0;top:14.6rem;text-align:center;z-index:8;pointer-events:none}
.copy a,.copy .sel{pointer-events:auto}
.launch{display:inline-flex;align-items:center;background:#fff;border:.2rem solid var(--ink);border-radius:10rem;box-shadow:.4rem .4rem 0 var(--ink);font-size:1.45rem;font-weight:600;overflow:hidden}
.launch>span{display:inline-flex;align-items:center;gap:.7rem;padding:.9rem 1.8rem;white-space:nowrap}
.launch>span+span{border-left:.15rem solid var(--line)}
.launch b{font-weight:900}
.launch small{font-size:inherit;margin-left:-.3rem}
.launch svg{width:1.5rem;height:1.5rem;fill:#FFB400}
.launch .live{background:var(--ink);color:#fff;font-weight:800}
.launch .live i{width:.9rem;height:.9rem;border-radius:50%;background:#3BE08F;box-shadow:0 0 0 .35rem rgba(59,224,143,.3);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}

/* the headline, selected like a layer in Figma */
.sel{position:relative;display:inline-block;margin-top:3.6rem;padding:1.4rem 2.6rem 1.2rem}
.sel::before{content:"";position:absolute;inset:0;border:.15rem solid var(--sel);animation:selin .7s var(--ease) .5s both}
.sel-name{position:absolute;left:0;top:-2.6rem;display:flex;align-items:center;gap:.5rem;font-size:1.2rem;font-weight:700;color:var(--sel);animation:fade .4s .9s both}
.sel-name svg{width:1.1rem;height:1.1rem}
.sel-size{position:absolute;left:50%;bottom:-3.2rem;translate:-50% 0;background:var(--sel);color:#fff;font-size:1.15rem;font-weight:700;padding:.3rem .8rem;border-radius:.5rem;font-variant-numeric:tabular-nums;animation:fade .4s 1s both}
.hd{position:absolute;width:1.1rem;height:1.1rem;background:#fff;border:.15rem solid var(--sel);animation:fade .3s .95s both}
.hd.tl{left:-.55rem;top:-.55rem}.hd.tm{left:calc(50% - .55rem);top:-.55rem}.hd.tr{right:-.55rem;top:-.55rem}
.hd.ml{left:-.55rem;top:calc(50% - .55rem)}.hd.mr{right:-.55rem;top:calc(50% - .55rem)}
.hd.bl{left:-.55rem;bottom:-.55rem}.hd.bm{left:calc(50% - .55rem);bottom:-.55rem}.hd.br{right:-.55rem;bottom:-.55rem}
@keyframes selin{from{clip-path:inset(0 100% 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
h1{font-variation-settings:"wdth" 62,"wght" 900;text-transform:uppercase;font-size:9.2rem;line-height:.92;letter-spacing:.002em}
h1 .ln{display:block}
.hl{position:relative;display:inline-block;z-index:0;padding:0 .08em}
.hl::before{content:"";position:absolute;z-index:-1;left:-.04em;right:-.06em;top:.1em;bottom:-.02em;background:var(--hi);clip-path:polygon(1.5% 10%,100% 0,98% 88%,0 100%);rotate:-1.6deg;transform-origin:0 50%;animation:swipe .55s var(--ease) 1.25s both}
@keyframes swipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sub{max-width:76rem;margin:4.6rem auto 0;font-size:2.15rem;line-height:1.5;color:var(--ink2);font-weight:450}
.sub b{font-weight:800;color:var(--ink)}
img[src$="amit-face.webp"]{background:var(--hi);object-fit:cover}
.sub .face{display:inline-block;width:3.6rem;height:3.6rem;border-radius:50%;vertical-align:-1rem;margin:0 .7rem 0 .3rem;border:.2rem solid var(--ink);box-shadow:.2rem .2rem 0 var(--ink)}
.act{display:flex;justify-content:center;align-items:center;gap:3.6rem;margin-top:3.6rem}
.txt{font-weight:800;font-size:1.75rem;text-decoration:none;border-bottom:.25rem solid var(--ink);padding-bottom:.2rem}
.txt span{display:inline-block;transition:translate .2s var(--ease)}
.txt:hover span{translate:0 .3rem}
.note-s{margin:2rem auto 0;max-width:50rem;font-size:1.35rem;line-height:1.45;color:var(--muted);font-weight:600}

/* entrances */
.rise{animation:rise .8s var(--ease) both}
.r1{animation-delay:.1s}.r2{animation-delay:.25s}.r3{animation-delay:.4s}.r4{animation-delay:.45s}.r5{animation-delay:.6s}
@keyframes rise{from{opacity:.01;transform:translateY(3rem)}to{opacity:1;transform:none}}
.pop{animation:pop .7s var(--spring) both}
.p1{animation-delay:2.1s}.p2{animation-delay:1.5s}.p3{animation-delay:1.8s}.p4{animation-delay:1.95s}.p5{animation-delay:2.25s}
@keyframes pop{from{opacity:0;transform:translateY(4rem) scale(.92)}to{opacity:1;transform:none}}

/* ---------- artboards ---------- */
.ab{position:absolute;z-index:6;cursor:grab;touch-action:none;user-select:none;translate:calc(var(--mx,0) * var(--d) * 1.4rem) calc(var(--my,0) * var(--d) * 1rem);transition:translate .6s var(--ease);animation:abin .8s var(--spring) both}
.ab:nth-of-type(1){animation-delay:.15s}.ab:nth-of-type(2){animation-delay:.3s}.ab:nth-of-type(3){animation-delay:.22s}.ab:nth-of-type(4){animation-delay:.38s}
@keyframes abin{from{opacity:0;scale:.9}to{opacity:1;scale:1}}
.ab figcaption{display:flex;align-items:center;gap:.5rem;font-size:1.15rem;font-weight:650;color:#8C8C86;margin-bottom:.6rem;white-space:nowrap}
.ab figcaption svg{width:1rem;height:1rem}
.a1 figcaption{padding-left:9rem}.a2 figcaption{padding-left:7rem}
.abi{position:relative;background:#fff;border-radius:.4rem;box-shadow:0 2.4rem 4rem -2rem rgba(18,18,16,.4),0 0 0 .1rem rgba(18,18,16,.08)}
.abi img{width:100%;border-radius:.4rem;pointer-events:none}
.ab:active{cursor:grabbing}
.ab.held .abi,.ab:hover .abi{box-shadow:0 2.4rem 4rem -2rem rgba(18,18,16,.4),0 0 0 .2rem var(--sel)}
.ab.held figcaption,.ab:hover figcaption{color:var(--sel)}
/* Amit's cursor drags this one around, on a loop */
.ab.grab .abi{animation:drag 9s var(--ease) 2.6s infinite}
@keyframes drag{0%,18%{transform:none;box-shadow:0 2.4rem 4rem -2rem rgba(18,18,16,.4),0 0 0 .1rem rgba(18,18,16,.08)}
  24%{transform:none;box-shadow:0 2.4rem 4rem -2rem rgba(18,18,16,.4),0 0 0 .2rem var(--sel)}
  44%,62%{transform:translate(-3.4rem,2.2rem) rotate(-3deg);box-shadow:0 3.4rem 5rem -2rem rgba(18,18,16,.5),0 0 0 .2rem var(--sel)}
  80%,100%{transform:none;box-shadow:0 2.4rem 4rem -2rem rgba(18,18,16,.4),0 0 0 .1rem rgba(18,18,16,.08)}}
.ab.moved .abi{animation:none}
/* where everything sits on the 1440 artboard */
.a1{left:-8rem;top:13rem;width:24rem;--d:.6}
.a2{left:-6rem;top:46rem;width:32rem;--d:1}
.a3{right:-6rem;top:15rem;width:22rem;--d:.8}
.a4{right:-12rem;top:46rem;width:30rem;--d:.5}
.a3 .cur.amit{left:44%;top:38%}
.cmt{left:100.8rem;top:67.5rem}
.cur.client{left:133rem;top:70rem}
.k1{left:4rem;top:96rem}.k2{left:7rem;top:108rem}.k3{left:3rem;top:120rem}

/* ---------- cursors and comments ---------- */
.cur{position:absolute;z-index:12;pointer-events:none;display:flex;align-items:flex-start}
.cur svg{width:2.2rem;height:2.4rem;flex:none;filter:drop-shadow(0 .3rem .4rem rgba(0,0,0,.25))}
.cur span{margin:1.8rem 0 0 -.4rem;font-size:1.25rem;font-weight:750;padding:.35rem .9rem;border-radius:.4rem 1rem 1rem 1rem;white-space:nowrap}
.cur.amit svg{fill:var(--hi)}.cur.amit span{background:var(--hi);color:var(--ink)}
.cur.client svg{fill:var(--pink)}.cur.client span{background:var(--pink);color:#fff}
.cur.client{animation:wander 7s ease-in-out 2.4s infinite,fade .4s 2.3s both}
@keyframes wander{0%,100%{translate:0 0}30%{translate:4rem -2rem}60%{translate:-2rem 1.6rem}}
.ab.grab .cur{animation:fade .3s 2.4s both}
/* the visitor's own cursor, everywhere on the page (desktop only; JS adds .cc) */
html.cc,html.cc *{cursor:none}
html.cc input,html.cc textarea{cursor:text}
html.cc.vopen,html.cc.vopen *{cursor:auto}
.mycur{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;display:flex;opacity:0;transition:opacity .2s;will-change:transform}
.mycur.on{opacity:1}
.vopen .mycur{display:none}
.mycur svg{width:2.2rem;height:2.4rem;flex:none;fill:var(--pink);filter:drop-shadow(0 .3rem .5rem rgba(0,0,0,.3));transform-origin:.2rem .15rem;transition:scale .2s var(--spring)}
.mycur span{margin:1.8rem 0 0 -.4rem;background:var(--pink);color:#fff;font-size:1.15rem;font-weight:800;padding:.3rem .8rem;border-radius:.4rem 1rem 1rem 1rem;white-space:nowrap;transition:background .2s,color .2s}
.mycur.hot svg{scale:1.3}
.mycur.hot span{background:var(--ink);color:var(--hi)}
.mycur.drag span{background:var(--sel)}

.cmt{position:absolute;z-index:11;display:flex;align-items:flex-start;gap:1rem}
.cmt .pin,.rcmt .pin{width:4.6rem;height:4.6rem;border-radius:50% 50% 50% 0;background:#fff;padding:.3rem;box-shadow:0 .8rem 1.6rem -.6rem rgba(0,0,0,.35);flex:none;rotate:0deg}
.cmt .pin img,.rcmt .pin img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.cmt .bub,.rcmt .bub{background:#fff;border-radius:.4rem 1.6rem 1.6rem 1.6rem;padding:1.3rem 1.4rem 1.4rem;width:auto;box-shadow:0 1.6rem 3rem -1.2rem rgba(18,18,16,.35),0 0 0 .1rem rgba(18,18,16,.06)}
.cmt .who,.rcmt .who{display:flex;align-items:baseline;gap:.8rem}
.cmt .who b,.rcmt .who b{font-size:1.4rem;font-weight:800}
.cmt .who small,.rcmt .who small{font-size:1.1rem;color:var(--muted);font-weight:600}
.cmt p,.rcmt p{font-size:1.5rem;line-height:1.4;margin:.4rem 0 .4rem;font-weight:500}
.stars{color:#FFB400;font-size:1.3rem;letter-spacing:.12em}
.thread{list-style:none;display:grid;gap:.5rem;margin-top:.9rem;justify-items:start}
.thread li{display:flex;align-items:baseline;gap:1.2rem;background:#EEF0F4;border-radius:.4rem 1.3rem 1.3rem 1.3rem;padding:.6rem 1rem .6rem 1.2rem;font-size:1.5rem;font-weight:600;line-height:1.3}
.thread em{font-style:normal;font-weight:800;color:#12A150}
.thread time{font-size:1rem;font-weight:600;color:#8C8C86;white-space:nowrap}

/* ---------- the stage ---------- */
.band{position:absolute;left:-12rem;right:-12rem;top:86rem;bottom:0;z-index:1;background:var(--hi);border-radius:50% 50% 0 0/12rem 12rem 0 0;box-shadow:0 -.25rem 0 var(--ink)}
.band::after{content:"";position:absolute;inset:0;border-radius:inherit;background-image:radial-gradient(rgba(18,18,16,.12) .12rem,transparent .15rem);background-size:2.4rem 2.4rem}
.reel{position:absolute;left:30rem;width:84rem;top:81rem;height:56rem;z-index:3;background:var(--ink);border-radius:1.8rem 1.8rem 0 0;padding:0 1rem;box-shadow:0 3rem 6rem -2rem rgba(18,18,16,.55)}
.reel .chrome{height:4.4rem;display:flex;align-items:center;gap:1.4rem;color:rgba(255,255,255,.7);font-size:1.25rem}
.dots3{display:flex;gap:.6rem;margin-left:.6rem}
.dots3 i{width:1.1rem;height:1.1rem;border-radius:50%;background:#FF5F57}.dots3 i:nth-child(2){background:#FEBC2E}.dots3 i:nth-child(3){background:#28C840}
.reel .url{flex:none;width:30rem;background:rgba(255,255,255,.09);padding:.5rem 1.2rem;border-radius:.7rem}
.reel .tag{color:var(--hi);font-weight:800}
.reel .vp{height:calc(100% - 4.4rem);overflow:hidden;border-radius:.8rem .8rem 0 0;background:#0b1430}
.reel .vp img{width:100%;height:auto}
.badge{position:absolute;left:21rem;top:74rem;z-index:5;width:17rem;height:17rem;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 1.6rem 3rem -1rem rgba(18,18,16,.5);rotate:-8deg}
.badge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite}
.badge text{font-size:14.6px;font-weight:800;letter-spacing:.14em;fill:var(--hi)}
.badge b{font-variation-settings:"wdth" 62,"wght" 900;font-size:5.6rem;line-height:1;color:#fff}
@keyframes spin{to{rotate:360deg}}
.fc{position:absolute;z-index:6;display:flex;align-items:center;gap:1.3rem;background:#fff;border:.2rem solid var(--ink);border-radius:1.4rem;padding:1.1rem 1.8rem 1.1rem 1.1rem;box-shadow:.5rem .5rem 0 var(--ink);white-space:nowrap}
.fc b{display:block;font-size:2rem;line-height:1.05;font-weight:850}
.fc small{display:block;font-size:1.2rem;color:var(--muted);font-weight:600;margin-top:.2rem}
.ico{width:4.4rem;height:4.4rem;border-radius:1.1rem;display:flex;align-items:center;justify-content:center;background:var(--sel);flex:none}
.ico svg{width:2.4rem;height:2.4rem;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ico.pk{background:var(--pink)}.ico.gr{background:var(--green)}
.me{position:absolute;right:2rem;bottom:0;width:37rem;z-index:7;filter:drop-shadow(0 2rem 3rem rgba(18,18,16,.35))}
.hand{position:absolute;z-index:9;font-family:"Caveat",cursive;font-weight:700;font-size:3rem;line-height:1;color:var(--ink);rotate:-5deg;text-align:center}
.hand-arrow{position:absolute;z-index:9;width:8rem;height:6rem;overflow:visible}
.hand-arrow path{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hand-arrow path:first-child{stroke-dasharray:5 6}

.next{min-height:40rem;display:flex;align-items:center;justify-content:center;background:var(--ink);color:rgba(255,255,255,.5);font-weight:700;font-size:1.6rem}

/* ======================= 2 · WORK ======================= */
/* Plain vertical scrolling: filter, one featured launch, a grid of pages that preview on hover, and a full-page viewer. */
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
.work{position:relative;background:var(--paper);background-image:radial-gradient(rgba(18,18,16,.16) .11rem,transparent .14rem);background-size:2.4rem 2.4rem}
.tick{position:relative;z-index:3;background:var(--ink);color:var(--hi);height:4.4rem;display:flex;align-items:center;overflow:hidden;white-space:nowrap}
.tick .run{display:flex;animation:run 46s linear infinite}
.tick span{display:inline-flex;align-items:center;gap:2.4rem;padding-right:2.4rem;font-variation-settings:"wdth" 62,"wght" 900;text-transform:uppercase;font-size:2.1rem;letter-spacing:.02em}
.tick span::after{content:"";width:1.3rem;height:1.3rem;background:var(--hi);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
@keyframes run{to{transform:translateX(-50%)}}
.wwrap{width:120rem;margin:0 auto;padding:8rem 0 9rem;--ph:25rem;--fh:31.6rem}
.whead{display:flex;justify-content:space-between;align-items:flex-end;gap:6rem}
.flabel{display:inline-flex;align-items:center;gap:.6rem;font-size:1.35rem;font-weight:700;color:var(--sel)}
.flabel svg{width:1.2rem;height:1.2rem}
.work h2,.method h2,.process h2,.about h2,.tst h2,.fit h2,.ways h2,.faq2 h2,.cta h2{font-variation-settings:"wdth" 62,"wght" 900;text-transform:uppercase;font-size:6rem;line-height:.92;margin-top:1rem}
.wsub{max-width:60rem;margin-top:1.6rem;font-size:1.7rem;line-height:1.5;color:var(--ink2)}
.wcap{display:flex;align-items:center;gap:.6rem;font-size:1.25rem;font-weight:650;color:#8C8C86;margin-bottom:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wcap svg{width:1rem;height:1rem;flex:none}
.snote{flex:none;width:16rem;height:14.4rem;padding:1.6rem 1.6rem 1.8rem;display:flex;flex-direction:column;justify-content:space-between;font-family:"Caveat",cursive;color:var(--ink);box-shadow:0 1.8rem 2.6rem -1.6rem rgba(18,18,16,.45);clip-path:polygon(0 0,100% 0,100% 84%,84% 100%,0 100%)}
.snote b{font-size:2.9rem;line-height:.95;font-weight:700}
.snote span{font-size:1.8rem;line-height:1.05}
.snote.y{background:#FFE98A}.snote.b{background:#BFE2FF}.snote.p{background:#FFC6DE}
.pc .pbadge{left:auto;right:.5rem;top:.5rem;width:7.4rem;height:7.4rem;z-index:2;box-shadow:0 .8rem 1.6rem -.7rem rgba(18,18,16,.55)}
.badge .tro{position:relative;inset:auto;width:46%;height:46%;animation:none;color:var(--hi);margin-top:-.4rem}
.pc:nth-child(2n) .pbadge svg{animation-delay:-6s}.pc:nth-child(3n) .pbadge svg{animation-delay:-12s}
.peek{position:absolute;left:50%;bottom:1.6rem;z-index:3;translate:-50% 1rem;opacity:0;background:var(--ink);color:#fff;font-weight:800;font-size:1.2rem;padding:.8rem 1.4rem;border-radius:10rem;white-space:nowrap;transition:opacity .25s,translate .25s var(--ease);pointer-events:none}
.peek span{color:var(--hi)}

/* the canvas carries on from the hero */
.work{isolation:isolate;overflow:clip}
.wa1{width:60rem;height:44rem;left:-18rem;top:6rem;background:#BFE0FF;opacity:.6}
.wa2{width:56rem;height:46rem;right:-18rem;top:60rem;background:#FFD0E6;opacity:.55}
.wa3{width:66rem;height:36rem;left:20rem;bottom:30rem;background:#FFF2A6;opacity:.5}
.ruler.wr{top:4.4rem}
/* reveal on scroll */
.rv2{opacity:0;transform:translateY(3.2rem);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv2.in{opacity:1;transform:none}

/* featured launch: a floating composition */
.feat{display:grid;grid-template-columns:72rem 1fr;gap:5rem;align-items:center;margin-top:5rem}
.fstage{position:relative;height:51rem}
.fmain{position:absolute;left:2rem;top:7rem;width:52rem;height:38rem;display:block;background:var(--ink);border-radius:1.4rem;padding:0 .8rem .8rem;rotate:-1.5deg;box-shadow:0 3rem 5rem -2.4rem rgba(0,0,0,.55);z-index:2}
.fmain .chrome{display:flex;align-items:center;gap:1rem;height:3.2rem;color:rgba(255,255,255,.72);font-size:1.05rem}
.fmain .url{background:rgba(255,255,255,.09);padding:.4rem 1rem;border-radius:.6rem}
.fview{position:relative;display:block;height:calc(100% - 3.2rem);overflow:hidden;border-radius:.6rem;background:#0b1430}
.fview img{width:100%;transition:transform 1.2s var(--ease)}
.fmain:hover .fview img{transform:translateY(calc(-100% + var(--fh)));transition:transform 7s ease-in-out}
.fmain:hover .peek,.pframe:hover .peek,.fmain:focus-visible .peek,.pframe:focus-visible .peek{opacity:1;translate:-50% 0}
.fside{position:absolute;left:47rem;top:0;width:25rem;display:block;background:#fff;border-radius:.8rem;padding:.6rem .6rem .7rem;rotate:4deg;z-index:3;box-shadow:0 2.4rem 4rem -2rem rgba(0,0,0,.5),0 0 0 .1rem rgba(18,18,16,.1);transition:rotate .3s var(--ease),translate .3s var(--ease)}
.fside:hover{rotate:0deg;translate:0 -.8rem}
.fside .wcap{margin:.1rem .2rem .5rem;color:var(--sel)}
.fside img{border-radius:.4rem}
.noodle{position:absolute;left:45rem;top:22rem;width:22rem;height:16rem;z-index:4;overflow:visible;pointer-events:none}
.noodle .ln{fill:none;stroke:var(--sel);stroke-width:3;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320}
.noodle circle{fill:#fff;stroke:var(--sel);stroke-width:3}
.noodle .hd2{fill:none;stroke:var(--sel);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.nlabel{position:absolute;left:57rem;top:31.4rem;z-index:5;background:var(--sel);color:#fff;font-size:1.15rem;font-weight:800;padding:.45rem 1rem;border-radius:.6rem;white-space:nowrap;opacity:0}
.fstage .fbadge{left:-3rem;top:-1rem;width:14rem;height:14rem;z-index:5}
.fstage .fc{z-index:6}
.ff1{left:-2rem;top:38.4rem}.ff2{left:21.6rem;top:44.6rem}.ff3{left:44rem;top:37rem}
.fcur{left:62rem;top:11rem;z-index:7;animation:wander 8s ease-in-out infinite}
.finfo .flabel{margin-bottom:.6rem}
.finfo h3{font-variation-settings:"wdth" 62,"wght" 900;text-transform:uppercase;font-size:5rem;line-height:.92;margin:.6rem 0 1.6rem}
.finfo p{font-size:1.6rem;line-height:1.55;color:var(--ink2)}
.fbtns{display:flex;align-items:center;gap:2.6rem;flex-wrap:wrap;margin-top:2.8rem}
.fbtns .btn.ink{font-size:1.45rem;padding:1.3rem 2rem}
/* the composition assembles itself when it scrolls in */
.fstage>*{opacity:0;transform:translateY(3rem) scale(.94)}
.fstage.in>*{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .8s var(--spring)}
.fstage.in .fside{transition-delay:.15s}.fstage.in .fbadge{transition-delay:.35s}
.fstage.in .ff1{transition-delay:.55s}.fstage.in .ff2{transition-delay:.7s}.fstage.in .ff3{transition-delay:.85s}.fstage.in .fcur{transition-delay:1s}
.fstage .noodle,.fstage .nlabel{transform:none}
.fstage.in .noodle{opacity:1}
.fstage.in .noodle .ln{stroke-dashoffset:0;transition:stroke-dashoffset 1s ease .5s}
.fstage.in .noodle .hd2{opacity:1;transition:opacity .2s 1.4s}
.fstage.in .nlabel{opacity:1;transition:opacity .4s 1.3s}
.work .hl::before,.method .hl::before,.process .hl::before,.about .hl::before,.tst .hl::before,.fit .hl::before,.ways .hl::before,.faq2 .hl::before,.cta .hl::before{animation:none;transform:scaleX(0);transition:transform .55s var(--ease) .35s}
.work .in .hl::before,.method .in .hl::before,.process .in .hl::before,.about .in .hl::before,.tst .in .hl::before,.fit .in .hl::before,.ways .in .hl::before,.faq2 .in .hl::before,.cta .in .hl::before{transform:scaleX(1)}

/* six launches, one card each */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:3.2rem 3rem;margin-top:5.6rem}
.pc{position:relative;display:flex;flex-direction:column;background:#fff;border:.18rem solid var(--ink);border-radius:1.5rem;box-shadow:.45rem .45rem 0 var(--ink);padding:1rem;transition:translate .25s var(--ease),box-shadow .25s var(--ease)}
.pc:hover{translate:-.25rem -.25rem;box-shadow:.7rem .7rem 0 var(--ink)}
.pframe{position:relative;display:block;width:100%;height:var(--ph);overflow:hidden;background:#f1f1ee;border-radius:1rem;box-shadow:inset 0 0 0 .1rem rgba(18,18,16,.1)}
.pframe img{position:absolute;left:0;top:0;width:100%;transition:transform 1.2s var(--ease)}
.pframe:hover img{transform:translateY(calc(-100% + var(--ph)));transition:transform 7s ease-in-out}
.pbody{display:flex;flex-direction:column;gap:.9rem;padding:1.5rem .8rem .4rem;flex:1}
.ptop{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.ptop h3{font-size:1.75rem;font-weight:850;line-height:1.15}
.ptype{flex:none;font-size:1rem;font-weight:750;color:var(--sel);background:rgba(13,153,255,.1);border-radius:.6rem;padding:.4rem .8rem;white-space:nowrap}
.prev{display:flex;align-items:baseline;gap:1rem}
.prev b{position:relative;z-index:0;font-variation-settings:"wdth" 62,"wght" 900;font-size:4.4rem;line-height:.9;padding:0 .08em}
.prev b::before{content:"";position:absolute;z-index:-1;left:-.04em;right:-.04em;top:.18em;bottom:.02em;background:var(--hi);clip-path:polygon(1.5% 10%,100% 0,98% 88%,0 100%);rotate:-1.6deg}
.prev span{font-size:1.3rem;font-weight:700;color:var(--ink2)}
.pstat{font-size:1.35rem;line-height:1.4;color:var(--ink2);font-weight:550}
.pfoot{display:flex;align-items:center;gap:.9rem;margin-top:auto;padding-top:1.1rem;border-top:.15rem solid var(--line);font-size:1.15rem;font-weight:650;color:var(--muted)}
.pfaces{display:flex;flex:none}
.pfaces img{width:2.8rem;height:2.8rem;border-radius:50%;border:.2rem solid #fff;box-shadow:0 0 0 .1rem rgba(18,18,16,.15);object-fit:cover}
.pfaces img+img{margin-left:-1rem}
.more{display:none}
.mb{display:none}
.pgrid{position:relative}
.pc:nth-of-type(3n+1){rotate:-.7deg}.pc:nth-of-type(3n+2){rotate:.5deg}.pc:nth-of-type(3n){rotate:-.3deg}
.pc:hover,.pc.sel{rotate:0deg}
.pc.rv2.in{transition:opacity .8s var(--ease),transform .8s var(--ease),translate .25s var(--ease),box-shadow .25s var(--ease),rotate .3s var(--ease)}
.pc:nth-of-type(2).rv2{transition-delay:.1s}.pc:nth-of-type(3).rv2{transition-delay:.2s}.pc:nth-of-type(5).rv2{transition-delay:.1s}.pc:nth-of-type(6).rv2{transition-delay:.2s}
.pc .pbadge{opacity:0;scale:2.2}
.pc.in .pbadge{opacity:1;scale:1;transition:opacity .2s .55s,scale .45s cubic-bezier(.2,1.6,.4,1) .55s}
.prev b::before{transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease) .3s}
.pc.in .prev b::before{transform:scaleX(1)}
.selbox{position:absolute;inset:-.9rem;border:.15rem solid var(--sel);border-radius:.4rem;opacity:0;transition:opacity .25s;pointer-events:none;z-index:4}
.selbox i{position:absolute;width:1rem;height:1rem;background:#fff;border:.15rem solid var(--sel)}
.selbox i:nth-child(1){left:-.55rem;top:-.55rem}.selbox i:nth-child(2){right:-.55rem;top:-.55rem}.selbox i:nth-child(3){left:-.55rem;bottom:-.55rem}.selbox i:nth-child(4){right:-.55rem;bottom:-.55rem}
.selbox em{position:absolute;left:50%;bottom:-2.6rem;translate:-50% 0;background:var(--sel);color:#fff;font-style:normal;font-size:1.05rem;font-weight:700;padding:.25rem .7rem;border-radius:.4rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.pc.sel .selbox,.pc:hover .selbox{opacity:1}
.tour{left:0;top:0;z-index:8;transition:transform 1.1s var(--ease),opacity .4s;opacity:0}
.tour.on{opacity:1}

/* the tip of the iceberg */
.tip{position:relative;margin-top:7rem;min-height:44rem;border:.2rem solid var(--ink);border-radius:2rem;box-shadow:.6rem .6rem 0 var(--ink);overflow:hidden;background:linear-gradient(180deg,#F7FBFF 0,#E4F0FC 16.4rem,#0E5BC4 16.4rem,#0A3F94 62%,#06245B 100%)}
.wave{position:absolute;left:0;right:0;top:15.2rem;height:2.4rem;z-index:3;overflow:hidden}
.wave svg{display:block;width:200%;height:100%;animation:drift 16s linear infinite}
@keyframes drift{to{transform:translateX(-50%)}}
.wave path{fill:#0E5BC4}
.tcopy{position:relative;z-index:4;width:60rem;padding:4.4rem 0 4.4rem 4.8rem}
.tip h3{font-variation-settings:"wdth" 62,"wght" 900;text-transform:uppercase;font-size:4.8rem;line-height:.92;margin-top:1rem;max-width:52rem}
.tip .under{margin-top:5.4rem;color:#fff}
.tip .under p{font-size:1.65rem;line-height:1.5;color:rgba(255,255,255,.86);max-width:48rem}
.tip .under p b{color:var(--hi)}
.tip .btn.yel{margin-top:2.4rem;font-size:1.6rem;padding:1.6rem 2.4rem;box-shadow:.45rem .45rem 0 var(--ink)}
.tip small{display:block;margin-top:1.3rem;font-size:1.2rem;font-weight:600;color:rgba(255,255,255,.65)}
.berg{position:absolute;right:7rem;top:2.6rem;width:34rem;height:46rem;z-index:2;filter:drop-shadow(0 2rem 3rem rgba(0,20,60,.45));animation:bob 7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-1rem) rotate(.6deg)}}
.bergin{position:absolute;inset:0;background:#0E5BC4 center/cover;clip-path:polygon(49% 0,56% 6%,61% 4%,67% 14%,72% 21%,86% 36%,96% 55%,91% 74%,77% 90%,53% 100%,31% 95%,12% 81%,3% 61%,9% 41%,25% 21%,33% 12%,41% 10%)}
.tip.in .bergin{background-image:url(../img/berg.webp)}
.bergin::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(240,248,255,.42) 0,rgba(240,248,255,.3) 13.8rem,rgba(14,91,196,.52) 13.8rem,rgba(6,36,91,.8) 100%)}
.depth{position:absolute;right:4rem;bottom:3.4rem;z-index:4;display:flex;align-items:center;gap:1.2rem;color:#fff}
.depth b{font-variation-settings:"wdth" 62,"wght" 900;font-size:5rem;line-height:.85;color:transparent;-webkit-text-stroke:.2rem #fff}
.depth span{font-size:1.25rem;font-weight:700;line-height:1.25;color:rgba(255,255,255,.8)}

/* section 2 header: a Figma colour-styles panel instead of a sticky note */
.styles{flex:none;width:25rem;background:#fff;border:.18rem solid var(--ink);border-radius:1.4rem;box-shadow:.5rem .5rem 0 var(--ink);padding:1.3rem 1.4rem 1.4rem;rotate:2deg;margin:0 2rem .6rem 0}
.sth{display:flex;align-items:center;gap:.6rem;font-size:1.15rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding-bottom:.9rem;border-bottom:.15rem solid var(--line)}
.sth svg{width:1rem;height:1rem}.sth span{margin-left:auto;background:var(--paper);border-radius:.4rem;padding:.1rem .6rem;color:var(--ink)}
.styles ul{list-style:none;display:grid;gap:.55rem;margin:1rem 0 1.1rem}
.styles li{display:flex;align-items:center;gap:1rem;font-size:1.3rem;font-weight:650}
.styles li i{width:2.4rem;height:2.4rem;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);box-shadow:0 0 0 .15rem var(--ink)}
.styles p{font-size:1.3rem;line-height:1.4;color:var(--ink2)}.styles p b{color:var(--ink)}
.styles li{opacity:0;translate:-1rem 0;transition:opacity .35s,translate .35s var(--ease)}
.styles.in li{opacity:1;translate:0 0}
.styles.in li:nth-child(2){transition-delay:.08s}.styles.in li:nth-child(3){transition-delay:.16s}.styles.in li:nth-child(4){transition-delay:.24s}.styles.in li:nth-child(5){transition-delay:.32s}.styles.in li:nth-child(6){transition-delay:.4s}
/* section 3 header: the buyer who left */
.bcmt{flex:none;display:flex;align-items:flex-start;gap:1rem;width:40rem;margin:0 1rem .6rem 0;rotate:-1.5deg}
.bav{flex:none;width:4.2rem;height:4.2rem;border-radius:50% 50% 50% .4rem;background:var(--pink);color:#fff;font-weight:900;font-size:1.4rem;display:flex;align-items:center;justify-content:center;border:.18rem solid var(--ink)}
.bb{background:#fff;border:.18rem solid var(--ink);border-radius:.4rem 1.6rem 1.6rem 1.6rem;box-shadow:.5rem .5rem 0 var(--ink);padding:1.3rem 1.6rem 1.4rem}
.bb .who{display:flex;align-items:baseline;gap:.8rem}.bb .who b{font-size:1.4rem;font-weight:850}.bb .who small{font-size:1.1rem;color:var(--muted);font-weight:600}
.bb p{font-size:1.65rem;font-weight:650;line-height:1.35;margin:.6rem 0 1rem}
.gone{display:flex;align-items:center;gap:.6rem;font-size:1.15rem;font-weight:800;color:#E5301C;padding-top:.9rem;border-top:.15rem dashed rgba(229,48,28,.35)}
.gone svg{width:1.6rem;height:1.6rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bcmt .gone{opacity:0;transition:opacity .4s 1.1s}
.bcmt.in .gone{opacity:1}

/* ======================= 2b · WHAT I BUILD, AND WHO FOR ======================= */
/* one colour band per kind of business, each with the funnel I build for it */
.fit{position:relative;isolation:isolate;overflow-x:clip;overflow-y:visible}
.farc{position:absolute;left:-12rem;right:-12rem;top:-7rem;height:14rem;z-index:-1;background:#FFE1EC;background-image:radial-gradient(rgba(18,18,16,.13) .11rem,transparent .14rem);background-size:2.4rem 2.4rem;border-radius:50% 50% 0 0/100% 100% 0 0;box-shadow:0 -.25rem 0 var(--ink)}
.fit .ruler.wr{top:0;z-index:5;background:rgba(255,255,255,.45)}
.fband{position:relative;background-color:var(--bg2);background-image:radial-gradient(rgba(18,18,16,.13) .11rem,transparent .14rem);background-size:2.4rem 2.4rem}
.fband+.fband{border-top:.2rem solid var(--ink)}
.fband.coach{--bg2:#FFE1EC}.fband.course{--bg2:#FFF1B8}.fband.saas{--bg2:#E2EEFF}.fband.lnch{--bg2:#DDF6E8}
.fwrap{width:120rem;margin:0 auto;padding:7rem 0}
.fband.coach .fwrap{padding-top:2rem}
.fband:last-child .fwrap{padding-bottom:13rem}
.fband .whead{margin-bottom:6rem}
.frow{display:grid;grid-template-columns:40rem 1fr;gap:6rem;align-items:center}
.alt .frow{grid-template-columns:1fr 40rem}.alt .ftext{order:2}
.kick2{display:inline-flex;align-items:center;gap:1rem;background:#fff;border:.18rem solid var(--ink);border-radius:1.4rem;box-shadow:.4rem .4rem 0 var(--ink);padding:.6rem 1.6rem .6rem .6rem;rotate:-1.5deg}
.alt .kick2{rotate:1.5deg}
.kn{width:3.8rem;height:3.8rem;border-radius:.9rem;background:var(--ink);color:var(--hi);display:flex;align-items:center;justify-content:center;font-variation-settings:"wdth" 62,"wght" 900;font-size:1.9rem;line-height:1}
.ki{width:3.8rem;height:3.8rem;border-radius:.9rem;display:flex;align-items:center;justify-content:center;background:var(--kc,var(--sel));box-shadow:inset 0 -.3rem .6rem rgba(0,0,0,.15)}
.ki svg{width:2.2rem;height:2.2rem;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kt{font-size:1.8rem;font-weight:850;line-height:1.1;white-space:nowrap}
.fband.coach{--kc:#E8336F}.fband.course{--kc:#FF7A1A}.fband.saas{--kc:var(--sel)}.fband.lnch{--kc:var(--green)}
.ftext h3{font-variation-settings:"wdth" 62,"wght" 900;text-transform:uppercase;font-size:4.6rem;line-height:.92;margin:2.4rem 0 1.4rem}
.ftext p{font-size:1.6rem;line-height:1.55;color:var(--ink2)}
.ilab{display:block;margin-top:2.4rem;font-size:1.1rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.ipages{list-style:none;display:grid;gap:.7rem;margin:1.1rem 0 2.6rem}
.ipages li{display:flex;align-items:center;gap:.9rem;font-size:1.5rem;font-weight:700}
.ipages li::before{content:"✓";flex:none;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--ink);color:var(--hi);font-size:1.1rem;font-weight:900;display:flex;align-items:center;justify-content:center}
.fboard{background:#fff;border:.2rem solid var(--ink);border-radius:1.8rem;box-shadow:.6rem .6rem 0 var(--ink);padding:2rem 2.4rem 2.8rem}
.flow{display:flex;align-items:flex-start;margin-top:2rem}
.fstep{display:flex;flex-direction:column;align-items:center;gap:1rem;flex:1;min-width:0}
.mpage{display:block;width:100%;max-width:11rem;aspect-ratio:4/5;background:#fff;border-radius:.6rem;padding:.9rem .7rem;box-shadow:0 1.2rem 2rem -1rem rgba(18,18,16,.4),0 0 0 .14rem var(--ink)}
.mpage i{display:block;margin-left:auto;margin-right:auto}
.mpage .h{height:.55rem;width:70%;border-radius:.2rem;background:var(--ink)}
.mpage .l{height:.3rem;width:80%;border-radius:.2rem;background:#D6D9E1;margin-top:.45rem}.mpage .l.s{width:55%}
.mpage .b{height:.75rem;width:52%;border-radius:10rem;background:#FF8A1F;margin-top:.6rem}.mpage .b.gr{background:var(--green)}
.mpage .av{width:2.2rem;height:2.2rem;border-radius:50%;background:linear-gradient(135deg,#FF7BA9,#E8336F);margin-top:.55rem}
.mpage .fld{height:.75rem;width:88%;border:.1rem solid #C9CDD6;border-radius:.2rem;margin-top:.45rem}
.mpage .vb{position:relative;height:2.8rem;width:92%;border-radius:.3rem;background:linear-gradient(135deg,#3A2A8C,#8B5CF6);margin-top:.55rem}
.mpage .vb::after{content:"";position:absolute;left:50%;top:50%;margin:-.45rem 0 0 -.25rem;border-left:.7rem solid #fff;border-top:.45rem solid transparent;border-bottom:.45rem solid transparent}
.mpage .bump{height:1.1rem;width:88%;border:.1rem dashed #E5301C;background:#FFF2F0;border-radius:.2rem;margin-top:.45rem}
.mpage .pr{height:1.3rem;width:52%;background:var(--hi);border:.1rem solid var(--ink);border-radius:.2rem;margin-top:.6rem}
.mpage .dsh{height:2.8rem;width:92%;border-radius:.3rem;margin-top:.55rem;background:linear-gradient(to top,var(--sel) 0 40%,transparent 40%) 8% 100%/14% 100% no-repeat,linear-gradient(to top,var(--sel) 0 60%,transparent 60%) 30% 100%/14% 100% no-repeat,linear-gradient(to top,var(--sel) 0 50%,transparent 50%) 52% 100%/14% 100% no-repeat,linear-gradient(to top,var(--green) 0 85%,transparent 85%) 74% 100%/14% 100% no-repeat,#EEF3FF}
.mpage .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem;width:92%;margin:.55rem auto 0}
.mpage .g3 i{height:2rem;width:auto;border-radius:.2rem;background:#EEF0F4;margin:0}
.mpage .pc3 i{height:2.8rem}.mpage .pc3 .hi2{background:var(--sel)}
.fstep em{font-style:normal;font-size:1.15rem;font-weight:800;line-height:1.25;text-align:center}
.farr{flex:none;position:relative;width:2.6rem;height:.25rem;margin-top:6.6rem;background:linear-gradient(90deg,var(--ink) 55%,transparent 55%) 0 0/.8rem 100% repeat-x;animation:dash 1s linear infinite}
.farr::after{content:"";position:absolute;right:-.2rem;top:-.4rem;border-left:.7rem solid var(--ink);border-top:.5rem solid transparent;border-bottom:.5rem solid transparent}
@keyframes dash{to{background-position:.8rem 0}}
.fgoal{flex:none;display:flex;flex-direction:column;align-items:center;gap:1rem;width:9.4rem}
.fgoal b{width:6.4rem;height:6.4rem;margin-top:3.4rem;border-radius:50%;background:var(--hi);border:.2rem solid var(--ink);box-shadow:.3rem .3rem 0 var(--ink);display:flex;align-items:center;justify-content:center;font-size:2.8rem}
.fgoal em{font-style:normal;font-size:1.2rem;font-weight:850;text-align:center;line-height:1.2}
.fitfoot{display:flex;align-items:center;justify-content:center;gap:3rem;margin-top:7rem;text-align:left}
.fitfoot p{font-size:1.6rem;color:var(--ink2);max-width:70rem}.fitfoot p b{color:var(--ink)}

/* each band is a live canvas: big outline number, tilted board, buyer walking the funnel, design notes pinned on */
.fband .fwrap{position:relative;z-index:1}
.fbwrap{position:relative;padding:7.6rem 0 7.8rem}
.fboard{rotate:-1deg;transition:rotate .4s var(--ease)}
.alt .fboard{rotate:1deg}
.fbwrap:hover .fboard{rotate:0deg}
.fbh{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.fbh .wcap{margin:0}
.present{flex:none;background:var(--ink);color:#fff;font-size:1.05rem;font-weight:800;padding:.35rem .9rem;border-radius:.6rem}
.flow{position:relative}
.fstep .mpage{transition:box-shadow .3s,scale .35s var(--spring)}
.fstep em{transition:color .3s}
.fstep.on .mpage{box-shadow:0 1.2rem 2rem -1rem rgba(18,18,16,.4),0 0 0 .25rem var(--sel);scale:1.06}
.fstep.on em{color:var(--sel)}
.fgoal.won b{animation:won 1.2s var(--ease)}
@keyframes won{0%{box-shadow:.3rem .3rem 0 var(--ink),0 0 0 0 rgba(255,230,0,.9)}40%{scale:1.15}100%{box-shadow:.3rem .3rem 0 var(--ink),0 0 0 2.4rem rgba(255,230,0,0);scale:1}}
.tok{position:absolute;left:0;top:0;z-index:6;display:flex;pointer-events:none;opacity:0;transition:transform .85s var(--ease),opacity .3s}
.tok svg{width:2rem;height:2.2rem;fill:var(--pink);filter:drop-shadow(0 .3rem .4rem rgba(0,0,0,.25))}
.tok span{margin:1.6rem 0 0 -.4rem;background:var(--pink);color:#fff;font-size:1.05rem;font-weight:800;padding:.25rem .7rem;border-radius:.4rem 1rem 1rem 1rem}
.fbwrap.walking .tok{opacity:1}
.anote{position:absolute;z-index:7;display:flex;align-items:flex-start;gap:.7rem;width:25rem;left:min(calc((var(--at) + .15) / var(--n) * 100%), calc(100% - 26rem))}
.anote.top{top:0}.anote.bot{bottom:0}
.apin{flex:none;width:3.6rem;height:3.6rem;border-radius:50% 50% 50% .4rem;background:var(--hi);border:.18rem solid var(--ink);padding:.2rem;overflow:hidden}
.apin img{width:100%;height:100%;border-radius:50%}
.anote p{background:#fff;border:.15rem solid var(--ink);border-radius:.4rem 1.4rem 1.4rem 1.4rem;box-shadow:.3rem .3rem 0 var(--ink);padding:.9rem 1.2rem 1rem;font-size:1.3rem;line-height:1.4;font-weight:600}
.anote p b{display:block;font-size:.95rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--sel);margin-bottom:.2rem}
.anote{opacity:0;translate:0 1rem;transition:opacity .4s,translate .5s var(--spring)}
.fbwrap.in .anote{opacity:1;translate:0 0}.fbwrap.in .anote.bot{transition-delay:.9s}.fbwrap.in .anote.top{transition-delay:.6s}
.anote.ping p{animation:ping .6s var(--spring)}
@keyframes ping{40%{scale:1.05}}
.fbwrap .fboard .fstep,.fbwrap .fboard .fgoal{opacity:0;translate:0 1.4rem;transition:opacity .35s,translate .5s var(--spring)}
.fbwrap.in .fboard .fstep,.fbwrap.in .fboard .fgoal{opacity:1;translate:0 0}
.fbwrap.in .flow>:nth-child(3){transition-delay:.15s}.fbwrap.in .flow>:nth-child(5){transition-delay:.3s}.fbwrap.in .flow>:nth-child(7){transition-delay:.45s}.fbwrap.in .flow>:nth-child(9){transition-delay:.6s}.fbwrap.in .flow>:nth-child(11){transition-delay:.75s}

/* ======================= 3 · THE METHOD: the buyer-question map ======================= */
.method{position:relative;isolation:isolate;overflow-x:clip;overflow-y:visible;background:var(--hi);background-image:radial-gradient(rgba(18,18,16,.13) .11rem,transparent .14rem);background-size:2.4rem 2.4rem}
/* the yellow rises in a curve, the same move as the stage at the bottom of the hero */
.marc{position:absolute;left:-12rem;right:-12rem;top:-7rem;height:14rem;z-index:-1;background:var(--hi);border-radius:50% 50% 0 0/100% 100% 0 0;box-shadow:0 -.25rem 0 var(--ink)}
.marc::after{content:"";position:absolute;inset:0;border-radius:inherit;background-image:radial-gradient(rgba(18,18,16,.13) .11rem,transparent .14rem);background-size:2.4rem 2.4rem}
.method .hl::before{background:#fff}
.method .flabel{color:var(--ink)}
.method .ruler{background:rgba(255,255,255,.45)}
.method .qflow path{stroke:var(--ink)}
.method .qflow marker path{stroke:var(--ink)}
.qframe{box-shadow:0 2.2rem 3.6rem -2rem rgba(18,18,16,.5),0 0 0 .2rem var(--ink)}
.qcmt{box-shadow:.4rem .4rem 0 var(--ink),0 0 0 .18rem var(--ink)}
.method .ruler.wr{top:0}
.mwrap{width:120rem;margin:0 auto;padding:9rem 0 9rem}
.qmap{position:relative;display:grid;grid-template-columns:repeat(3,36rem);grid-template-rows:34rem 34rem;column-gap:6rem;row-gap:6rem;margin-top:6rem}
.qflow{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.qflow path{fill:none;stroke:var(--sel);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:6 7;animation:flow 1.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-26}}
.qstep{position:relative;z-index:2}
.s1{grid-area:1/1}.s2{grid-area:1/2}.s3{grid-area:1/3}.s4{grid-area:2/3}.s5{grid-area:2/2}.s6{grid-area:2/1}
.s2.rv2{transition-delay:.1s}.s3.rv2{transition-delay:.2s}.s4.rv2{transition-delay:.3s}.s5.rv2{transition-delay:.4s}.s6.rv2{transition-delay:.5s}
.qframe{position:relative;display:block;width:100%;height:22.5rem;overflow:hidden;border-radius:.8rem;background:#fff;transition:box-shadow .25s}
.qframe img{width:100%;height:100%;object-fit:cover;object-position:top;transition:scale .6s var(--ease)}
.qframe:hover{box-shadow:0 2.2rem 3.6rem -2rem rgba(18,18,16,.5),0 0 0 .3rem var(--sel)}
.qframe:hover img{scale:1.04}
.qframe:hover .peek,.qframe:focus-visible .peek{opacity:1;translate:-50% 0}
.qstep:hover .wcap{color:var(--sel)}
.qcmt{position:relative;z-index:3;display:flex;gap:1.1rem;align-items:flex-start;margin:-2.6rem 1.6rem 0 1.6rem;background:#fff;border-radius:.4rem 1.6rem 1.6rem 1.6rem;padding:1.3rem 1.5rem 1.4rem 1.2rem}
.qpin{flex:none;width:3.2rem;height:3.2rem;border-radius:50% 50% 50% .4rem;background:var(--hi);border:.18rem solid var(--ink);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.45rem}
.qcmt b{display:block;font-size:1.55rem;font-weight:850;line-height:1.3}
.qcmt p{font-size:1.3rem;line-height:1.45;color:var(--ink2);margin-top:.4rem}
.qstep .qcmt{opacity:0;transform:translateY(1.2rem) scale(.96);transition:opacity .4s,transform .5s var(--spring)}
.qstep.in .qcmt{opacity:1;transform:none;transition-delay:.45s}
.qmap .cur.qcur{left:79rem;top:7rem;z-index:6;animation:wander 9s ease-in-out infinite}

/* the journey: the buyer's cursor walks the map, lighting up each answered question */
.qstep.on .qframe{box-shadow:0 2.2rem 3.6rem -2rem rgba(18,18,16,.5),0 0 0 .3rem var(--pink)}
.qstep.on .qpin{background:var(--pink);color:#fff;animation:pinpop .5s var(--spring)}
@keyframes pinpop{0%{scale:.6}100%{scale:1}}
.qmap .cur.qcur{transition:transform 1s var(--ease),opacity .3s;animation:none}
.qcta{display:flex;align-items:center;justify-content:space-between;gap:5rem;margin-top:7rem;padding-top:5rem;border-top:.2rem dashed rgba(18,18,16,.25)}
.qcta h3{font-variation-settings:"wdth" 62,"wght" 900;text-transform:uppercase;font-size:4.4rem;line-height:.95;max-width:66rem}
.qcta p{font-size:1.65rem;line-height:1.5;color:var(--ink2);max-width:62rem;margin:1.4rem 0 1.4rem}
.qcta .btn.yel{flex:none;background:#fff;font-size:1.8rem;padding:2rem 3rem}
.qcta .btn.yel:hover{background:var(--ink);color:var(--hi)}

/* ======================= 4 · CLIENTS: their exact words ======================= */
.tst{position:relative;isolation:isolate;overflow-x:clip;overflow-y:visible;background:#DCEAFF;background-image:radial-gradient(rgba(18,18,16,.13) .11rem,transparent .14rem);background-size:2.4rem 2.4rem}
.tarc{position:absolute;left:-12rem;right:-12rem;top:-7rem;height:14rem;z-index:-1;background:#DCEAFF;background-image:radial-gradient(rgba(18,18,16,.13) .11rem,transparent .14rem);background-size:2.4rem 2.4rem;border-radius:50% 50% 0 0/100% 100% 0 0;box-shadow:0 -.25rem 0 var(--ink)}
.tst .ruler.wr{top:0;background:rgba(255,255,255,.5)}
.twrap{width:120rem;margin:0 auto;padding:3rem 0 10rem}
.tgrid{display:grid;grid-template-columns:66rem 1fr;gap:5rem;align-items:center;margin-top:5rem}
.tvids{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.tv:nth-child(2){margin-top:4rem}.tv:nth-child(2).rv2{transition-delay:.1s}.tv:nth-child(3).rv2{transition-delay:.2s}
.vid{position:relative;display:block;width:100%;aspect-ratio:9/16;border-radius:1.2rem;overflow:hidden;background:#000;border:.18rem solid var(--ink);box-shadow:.45rem .45rem 0 var(--ink)}
.vid img{width:100%;height:100%;object-fit:cover;transition:scale .6s var(--ease)}
.vid:hover img{scale:1.05}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid .play{position:absolute;left:50%;top:44%;width:6.4rem;height:6.4rem;margin:-3.2rem 0 0 -3.2rem;border-radius:50%;background:var(--hi);border:.2rem solid var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 .8rem rgba(255,230,0,.3);transition:scale .25s var(--spring)}
.vid .play::after{content:"";border-left:1.8rem solid var(--ink);border-top:1.1rem solid transparent;border-bottom:1.1rem solid transparent;margin-left:.5rem}
.vid:hover .play{scale:1.1}
.vid .cap{position:absolute;left:0;right:0;bottom:0;padding:6rem 1.4rem 1.4rem;background:linear-gradient(transparent,rgba(0,0,0,.88));color:#fff;text-align:left}
.vid .cap b{display:block;font-size:1.6rem;font-weight:850;line-height:1.15}
.vid .cap span{font-size:1.15rem;opacity:.8}
.vid .len{position:absolute;left:1rem;top:1rem;background:rgba(0,0,0,.65);color:#fff;font-size:1.05rem;font-weight:800;padding:.3rem .7rem;border-radius:.5rem}
.vid.on .play,.vid.on .len,.vid.on .cap{display:none}
.tside{display:grid;gap:2.6rem}
.tq{display:grid;grid-template-columns:5.2rem 1fr;gap:1.4rem;background:#fff;border:.18rem solid var(--ink);border-radius:.4rem 1.8rem 1.8rem 1.8rem;box-shadow:.45rem .45rem 0 var(--ink);padding:2rem 2.2rem}
.tq img{width:5.2rem;height:5.2rem;border-radius:50%;border:.18rem solid var(--ink)}
.tq .who{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .8rem}
.tq .who b{font-size:1.6rem;font-weight:850}.tq .who small{font-size:1.15rem;color:var(--muted);font-weight:600}
.tq .stars{display:block;margin:.4rem 0 .6rem;font-size:1.3rem}
.tq p{font-size:1.5rem;line-height:1.5;color:var(--ink2)}
.tq:nth-child(2).rv2{transition-delay:.1s}
.twall{margin-top:9rem;text-align:center}
.twall h3{font-variation-settings:"wdth" 62,"wght" 900;text-transform:uppercase;font-size:4.4rem;line-height:.95}
.tfaces{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:2.6rem;max-width:88rem;margin:3.6rem auto 0;padding:0}
.tfaces li{display:grid;justify-items:center;align-content:start;text-align:center;gap:.9rem;font-size:1.3rem;font-weight:750;width:10rem}
.tfaces img{width:8.4rem;height:8.4rem;border-radius:50%;border:.22rem solid var(--ink);box-shadow:.35rem .35rem 0 var(--ink);transition:translate .25s var(--ease)}
.tfaces li:hover img{translate:0 -.4rem}
.tnames{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;margin:3.6rem auto 0;max-width:100rem}
.tnames span{background:#fff;border:.15rem solid var(--ink);border-radius:10rem;padding:.6rem 1.3rem;font-size:1.3rem;font-weight:650}
.tnames .more2{background:var(--ink);color:var(--hi);font-weight:800}

/* ======================= 4 · HOW WE WORK TOGETHER ======================= */
.process{position:relative;isolation:isolate;overflow-x:clip;overflow-y:visible;background:var(--paper);background-image:radial-gradient(rgba(18,18,16,.16) .11rem,transparent .14rem);background-size:2.4rem 2.4rem}
/* the paper rises back out of the yellow in the same curve */
.parc{position:absolute;left:-12rem;right:-12rem;top:-7rem;height:14rem;z-index:-1;background:var(--paper);background-image:radial-gradient(rgba(18,18,16,.16) .11rem,transparent .14rem);background-size:2.4rem 2.4rem;border-radius:50% 50% 0 0/100% 100% 0 0;box-shadow:0 -.25rem 0 var(--ink)}
.process .ruler.wr{top:0}
.pwrap{width:120rem;margin:0 auto;padding:7rem 0 10rem}
.psteps{display:grid;grid-template-columns:repeat(4,1fr);gap:3.2rem;margin-top:5rem}
.pstep{position:relative;display:flex;flex-direction:column;background:#fff;border:.18rem solid var(--ink);border-radius:1.6rem;box-shadow:.45rem .45rem 0 var(--ink);padding:1rem}
.pstep:nth-child(2).rv2{transition-delay:.1s}.pstep:nth-child(3).rv2{transition-delay:.2s}.pstep:nth-child(4).rv2{transition-delay:.3s}
.pstep:not(:last-child)::after{content:"→";position:absolute;right:-2.9rem;top:8.4rem;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--ink);color:var(--hi);font-weight:900;font-size:1.4rem;display:flex;align-items:center;justify-content:center;z-index:2}
.ptxt{padding:1.6rem 1.2rem 1.4rem}
.phead{display:flex;justify-content:space-between;align-items:center}
.pnum{width:3rem;height:3rem;border-radius:50%;background:var(--ink);color:var(--hi);font-weight:900;font-size:1.45rem;display:flex;align-items:center;justify-content:center}
.pdur{background:var(--hi);border:.15rem solid var(--ink);border-radius:10rem;padding:.35rem 1rem;font-size:1.15rem;font-weight:800}
.pstep h3{font-size:2rem;font-weight:850;line-height:1.15;margin:1.4rem 0 .7rem}
.pstep p{font-size:1.4rem;line-height:1.5;color:var(--ink2)}

/* the four little scenes */
.pvis{position:relative;height:18rem;border-radius:1rem;overflow:hidden;background-image:radial-gradient(rgba(18,18,16,.13) .1rem,transparent .13rem);background-size:1.6rem 1.6rem;box-shadow:inset 0 0 0 .1rem rgba(18,18,16,.08)}
.v1{background-color:#E2EEFF}.v2{background-color:#FFF4BF}.v3{background-color:#FFE1EC}.v4{background-color:#DDF6E8}
.pvis i{display:block}
/* wireframe bits shared by the scenes */
.wf,.art,.scr{background:#fff}
.wf .h,.art .h,.scr .h{height:1.1rem;width:68%;margin:0 auto;border-radius:.3rem;background:var(--ink)}
.wf .l,.art .l,.scr .l{height:.5rem;width:80%;margin:.55rem auto 0;border-radius:.3rem;background:#D6D9E1}
.wf .l.s,.art .l.s{width:56%}
.wf .img,.art .img,.scr .img{height:3.4rem;width:84%;margin:.8rem auto 0;border-radius:.4rem;background:linear-gradient(135deg,#BFD8FF,#E5D8FF)}
.wf .b,.art .b,.scr .b{height:1.2rem;width:38%;margin:.8rem auto 0;border-radius:10rem;background:#FF8A1F}
/* 1 · the call */
.call{position:absolute;left:1.2rem;right:1.2rem;top:1.2rem;bottom:1.2rem;background:var(--ink);border-radius:.8rem;padding:0 .6rem .6rem}
.cbar{display:flex;align-items:center;gap:.45rem;height:2.2rem;padding:0 .2rem}
.cbar>i{width:.7rem;height:.7rem;border-radius:50%;background:#FF5F57}.cbar>i:nth-child(2){background:#FEBC2E}.cbar>i:nth-child(3){background:#28C840}
.cbar em{margin-left:auto;display:flex;align-items:center;gap:.4rem;font-style:normal;font-size:1rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.cbar em b{width:.7rem;height:.7rem;border-radius:50%;background:#FF4D4D;animation:blink 1.4s infinite}
.call .wf{position:absolute;left:.6rem;right:.6rem;top:2.2rem;bottom:.6rem;border-radius:.4rem;padding:1rem .8rem}
.circles{position:absolute;left:.6rem;right:.6rem;top:2.2rem;bottom:.6rem;width:calc(100% - 1.2rem);height:calc(100% - 2.8rem);overflow:visible}
.circles ellipse{fill:none;stroke:#E5301C;stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset .7s ease}
.pstep.in .circles ellipse{stroke-dashoffset:0}
.pstep.in .circles ellipse:nth-child(2){transition-delay:.35s}.pstep.in .circles ellipse:nth-child(3){transition-delay:.7s}
.fx{position:absolute;width:1.8rem;height:1.8rem;border-radius:50%;background:#E5301C;color:#fff;font-size:1rem;font-weight:900;display:flex;align-items:center;justify-content:center;scale:0;transition:scale .35s var(--spring)}
.f1{right:12%;top:2rem}.f2{left:2%;top:6.6rem}.f3{left:30%;bottom:1.2rem}
.pstep.in .fx{scale:1}.pstep.in .f1{transition-delay:.5s}.pstep.in .f2{transition-delay:.85s}.pstep.in .f3{transition-delay:1.2s}
.tiles{position:absolute;right:2rem;bottom:2rem;display:flex;gap:.5rem}
.tiles img,.tiles .ytile{width:3.8rem;height:3.8rem;border-radius:.8rem;border:.18rem solid #fff;box-shadow:0 .6rem 1.2rem -.4rem rgba(0,0,0,.5);object-fit:cover}
.tiles .ytile{display:flex;align-items:center;justify-content:center;background:var(--pink);color:#fff;font-size:1.1rem;font-weight:900}
/* 2 · the map */
.mflow{position:absolute;inset:1rem;width:calc(100% - 2rem);height:calc(100% - 2rem);overflow:visible}
.mflow path{fill:none;stroke:var(--ink);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:5 6;animation:flow 1.4s linear infinite}
.mf{position:absolute;width:30%;height:26%;background:#fff;border-radius:.5rem;box-shadow:0 .8rem 1.6rem -.8rem rgba(18,18,16,.4),0 0 0 .12rem rgba(18,18,16,.12);padding:.7rem .7rem;scale:.8;opacity:0;transition:scale .4s var(--spring),opacity .3s}
.mf i{height:.45rem;border-radius:.2rem;background:#D6D9E1;margin-bottom:.45rem}.mf i:first-child{background:var(--ink);width:70%;height:.6rem}.mf i:last-of-type{width:55%}
.mf b{position:absolute;right:-.7rem;top:-.7rem;width:2rem;height:2rem;border-radius:50% 50% 50% .3rem;background:var(--hi);border:.15rem solid var(--ink);font-size:1rem;font-weight:900;display:flex;align-items:center;justify-content:center}
.m1{left:8%;top:13%}.m2{left:60%;top:13%}.m3{left:60%;top:61%}.m4{left:8%;top:61%}
.pstep.in .mf{scale:1;opacity:1}.pstep.in .m2{transition-delay:.15s}.pstep.in .m3{transition-delay:.3s}.pstep.in .m4{transition-delay:.45s}
.ask{position:absolute;left:24%;top:44%;background:var(--pink);color:#fff;font-size:1.05rem;font-weight:800;padding:.4rem .9rem;border-radius:.3rem 1rem 1rem 1rem;white-space:nowrap;opacity:0;translate:0 .6rem;transition:opacity .3s .7s,translate .4s var(--spring) .7s}
.pstep.in .ask{opacity:1;translate:0 0}
/* 3 · design */
.tools{position:absolute;left:1.2rem;top:1.2rem;display:grid;gap:.45rem;background:var(--ink);border-radius:.7rem;padding:.6rem}
.tools i{width:1.4rem;height:1.4rem;border-radius:.3rem;background:rgba(255,255,255,.25)}.tools i:nth-child(2){background:var(--sel)}
.art{position:absolute;left:5.2rem;right:1.4rem;top:1.4rem;bottom:1.4rem;border-radius:.5rem;padding:1.1rem .8rem;box-shadow:0 1rem 2rem -1rem rgba(18,18,16,.35)}
.selx{position:absolute;left:12%;right:12%;top:.6rem;height:2rem;border:.15rem solid var(--sel);opacity:0;scale:.9;transition:opacity .3s .2s,scale .4s var(--spring) .2s}
.selx i{position:absolute;width:.8rem;height:.8rem;background:#fff;border:.15rem solid var(--sel)}
.selx .t1{left:-.45rem;top:-.45rem}.selx .t2{right:-.45rem;bottom:-.45rem}
.selx em{position:absolute;right:-.2rem;bottom:-2rem;background:var(--sel);color:#fff;font-style:normal;font-size:.9rem;font-weight:700;padding:.15rem .5rem;border-radius:.3rem;white-space:nowrap}
.pstep.in .selx{opacity:1;scale:1}
.pvis .dcur{right:1.4rem;top:7.4rem;left:auto;animation:wander 6s ease-in-out infinite}
.pvis .dcur svg{width:1.8rem;height:2rem}.pvis .dcur span{font-size:1rem;margin-top:1.5rem;padding:.2rem .6rem}
.love{position:absolute;left:6.4rem;bottom:2rem;display:flex;align-items:center;gap:.5rem;background:var(--pink);color:#fff;font-size:1.1rem;font-weight:800;padding:.5rem .9rem;border-radius:.3rem 1.1rem 1.1rem 1.1rem;box-shadow:.25rem .25rem 0 var(--ink);opacity:0;translate:0 .8rem;transition:opacity .3s .7s,translate .4s var(--spring) .7s}
.love b{background:#fff;color:var(--pink);border-radius:.4rem;padding:0 .4rem;font-size:.95rem}
.pstep.in .love{opacity:1;translate:0 0}
/* 4 · build & launch */
.mon,.tab,.ph{position:absolute;background:var(--ink);opacity:0;translate:0 1.2rem;transition:opacity .35s,translate .5s var(--spring)}
.mon{left:1.6rem;top:2.4rem;width:58%;height:54%;border-radius:.7rem;padding:.4rem}
.mon::after{content:"";position:absolute;left:38%;right:38%;bottom:-1.2rem;height:1.2rem;background:var(--ink);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.tab{right:17%;bottom:20%;width:25%;height:48%;border-radius:.8rem;padding:.4rem}
.ph{right:5%;bottom:16%;width:13%;height:46%;border-radius:.8rem;padding:.3rem}
.scr{display:block;height:100%;border-radius:.35rem;padding:.6rem .4rem;overflow:hidden}
.tab .scr .img,.ph .scr .img{height:2.4rem}.ph .scr .h{width:80%}
.pstep.in .mon,.pstep.in .tab,.pstep.in .ph{opacity:1;translate:0 0}
.pstep.in .tab{transition-delay:.15s}.pstep.in .ph{transition-delay:.3s}
.golive{position:absolute;right:1.2rem;top:1.2rem;display:flex;align-items:center;gap:.5rem;background:var(--green);color:#fff;font-size:1.1rem;font-weight:850;padding:.35rem .9rem;border-radius:10rem;box-shadow:.2rem .2rem 0 var(--ink);scale:0;transition:scale .4s var(--spring) .55s}
.golive b{width:.7rem;height:.7rem;border-radius:50%;background:#fff;animation:blink 1.4s infinite}
.pstep.in .golive{scale:1}
.checks{position:absolute;left:1.2rem;bottom:1rem;display:flex;gap:.4rem}
.checks i{font-style:normal;font-size:.95rem;font-weight:800;background:#fff;border:.13rem solid var(--ink);border-radius:10rem;padding:.2rem .6rem;opacity:0;transition:opacity .3s}
.pstep.in .checks i{opacity:1}.pstep.in .checks i:nth-child(1){transition-delay:.7s}.pstep.in .checks i:nth-child(2){transition-delay:.85s}.pstep.in .checks i:nth-child(3){transition-delay:1s}
.pfast{margin-top:4rem;font-size:1.6rem;color:var(--ink2);text-align:center}
.pend{display:flex;align-items:center;justify-content:center;gap:4.4rem;margin-top:4.6rem}
.pend .pfast{margin:0;text-align:left;max-width:34rem}
.rcmt{display:flex;align-items:flex-start;gap:1rem;max-width:52rem;rotate:-1.2deg}.rcmt.rv2{transition-delay:.15s}
.rcmt mark{background:linear-gradient(transparent 52%,var(--hi) 52%);color:inherit;font-weight:700;padding:0 .1rem}
.pfast b{color:var(--ink)}

/* ======================= 4b · WAYS TO WORK TOGETHER ======================= */
.ways{position:relative;isolation:isolate;overflow-x:clip;overflow-y:visible;background:var(--hi);background-image:radial-gradient(rgba(18,18,16,.13) .11rem,transparent .14rem);background-size:2.4rem 2.4rem}
.warc{position:absolute;left:-12rem;right:-12rem;top:-7rem;height:14rem;z-index:-1;background:var(--hi);background-image:radial-gradient(rgba(18,18,16,.13) .11rem,transparent .14rem);background-size:2.4rem 2.4rem;border-radius:50% 50% 0 0/100% 100% 0 0;box-shadow:0 -.25rem 0 var(--ink)}
.ways .ruler.wr{top:0;background:rgba(255,255,255,.45)}
.ways .hl::before{background:#fff}
.ways .flabel{color:var(--ink)}
.wwrap2{width:120rem;margin:0 auto;padding:2rem 0 13rem}
.wgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4rem;margin-top:5rem;align-items:stretch}
.wcard{position:relative;display:flex;flex-direction:column;background:#fff;border:.2rem solid var(--ink);border-radius:1.8rem;box-shadow:.5rem .5rem 0 var(--ink);padding:1rem 1rem 2rem;transition:translate .25s var(--ease),box-shadow .25s var(--ease)}
.wcard:hover{translate:-.3rem -.3rem;box-shadow:.8rem .8rem 0 var(--ink)}
.wcard:nth-child(2).rv2{transition-delay:.1s}.wcard:nth-child(3).rv2{transition-delay:.2s}.wcard:nth-child(4).rv2{transition-delay:.3s}
.wcard.funnel{background:var(--ink);color:#fff;translate:0 -1.6rem}
.wcard.funnel:hover{translate:-.3rem -1.9rem}
.ribbon{position:absolute;right:1.4rem;top:-1.3rem;z-index:3;background:var(--pink);color:#fff;border:.18rem solid var(--ink);border-radius:10rem;padding:.35rem 1.1rem;font-size:1.1rem;font-weight:850;rotate:4deg}
.wvis{position:relative;height:13rem;border-radius:1rem;background:#F3F3EF;background-image:radial-gradient(rgba(18,18,16,.12) .1rem,transparent .13rem);background-size:1.6rem 1.6rem;overflow:hidden;display:flex;align-items:center;justify-content:center}
.wcard.funnel .wvis{background-color:#232321;background-image:radial-gradient(rgba(255,255,255,.1) .1rem,transparent .13rem)}
.wvis i{display:block}
.sk1,.fan2 i,.loop i,.bpg{background:#fff;border-radius:.5rem;box-shadow:0 1rem 1.6rem -.8rem rgba(18,18,16,.45),0 0 0 .14rem var(--ink)}
.sk1{display:block;width:7.4rem;height:9.4rem;padding:.8rem .7rem}
.sk1 .h,.bpg .h{height:.55rem;width:70%;border-radius:.2rem;background:var(--ink);margin:0 auto}
.sk1 .l,.bpg .l{height:.3rem;width:80%;border-radius:.2rem;background:#D6D9E1;margin:.45rem auto 0}
.sk1 .img,.bpg .img{height:2.6rem;width:90%;border-radius:.3rem;background:linear-gradient(135deg,#BFD8FF,#E5D8FF);margin:.55rem auto 0}
.sk1 .b{height:.8rem;width:50%;border-radius:10rem;background:#FF8A1F;margin:.6rem auto 0}
.fan2{position:relative;width:16rem;height:10rem}
.fan2 i{position:absolute;left:50%;top:.6rem;width:6rem;height:8.4rem;margin-left:-3rem;transform-origin:50% 120%}
.fan2 i:nth-child(1){rotate:-24deg;background:#FFE1EC}.fan2 i:nth-child(2){rotate:-12deg;background:#FFF1B8}.fan2 i:nth-child(3){rotate:0deg}.fan2 i:nth-child(4){rotate:12deg;background:#E2EEFF}.fan2 i:nth-child(5){rotate:24deg;background:#DDF6E8}
.fan2 i:nth-child(3)::before{content:"";display:block;margin:.7rem auto 0;width:70%;height:.5rem;background:var(--ink);border-radius:.2rem}
.fan2 i:nth-child(3)::after{content:"";display:block;margin:4.6rem auto 0;width:50%;height:.8rem;background:#FF8A1F;border-radius:10rem}
.wcard.funnel .fan2 i{box-shadow:0 1rem 1.6rem -.8rem rgba(0,0,0,.6),0 0 0 .14rem #fff}
.brw{display:block;width:14rem;height:9.6rem;background:var(--ink);border-radius:.7rem;padding:0 .4rem .4rem}
.tabs2{display:flex;gap:.3rem;height:2rem;align-items:flex-end;padding-left:.4rem}
.tabs2 i{width:3rem;height:1.3rem;border-radius:.4rem .4rem 0 0;background:#3a3a37}.tabs2 i.on{background:#fff}
.bpg{display:block;height:calc(100% - 2rem);border-radius:0 .4rem .4rem .4rem;padding:.7rem .6rem;box-shadow:none}
.loop{position:relative;width:15rem;height:10rem}
.loop i{position:absolute;top:1.6rem;width:5.2rem;height:6.8rem}
.loop i:nth-child(1){left:.6rem;rotate:-6deg;background:#FFE1EC}.loop i:nth-child(2){left:4.9rem;top:1rem;z-index:2}.loop i:nth-child(3){right:.6rem;rotate:6deg;background:#E2EEFF}
.loop b{position:absolute;right:.2rem;bottom:0;z-index:3;width:3.6rem;height:3.6rem;border-radius:50%;background:var(--hi);border:.2rem solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:900;animation:spin2 6s linear infinite}
@keyframes spin2{to{rotate:360deg}}
.wcard h3{font-size:2.2rem;font-weight:850;line-height:1.15;margin:1.8rem 1rem .4rem}
.wone{font-size:1.5rem;font-weight:750;margin:0 1rem}
.wfor{font-size:1.3rem;line-height:1.45;color:var(--muted);margin:.6rem 1rem 0}
.wcard.funnel .wfor{color:rgba(255,255,255,.65)}
.wcard ul{list-style:none;display:grid;gap:.7rem;margin:1.6rem 1rem 0;padding-top:1.6rem;border-top:.15rem dashed rgba(18,18,16,.2)}
.wcard.funnel ul{border-top-color:rgba(255,255,255,.2)}
.wcard li{display:flex;gap:.7rem;font-size:1.35rem;font-weight:650;line-height:1.35}
.wcard li::before{content:"✓";flex:none;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--green);color:#fff;font-size:1rem;font-weight:900;display:flex;align-items:center;justify-content:center}
.wprice{margin:auto 1rem 0;padding-top:2rem}
.wprice b{display:block;font-variation-settings:"wdth" 62,"wght" 900;text-transform:uppercase;font-size:2.4rem;line-height:1}
.wprice small{font-size:1.15rem;color:var(--muted);font-weight:600}
.wcard.funnel .wprice b{color:var(--hi)}.wcard.funnel .wprice small{color:rgba(255,255,255,.6)}
.wcard .btn{margin:1.4rem 1rem 0;justify-content:center;font-size:1.45rem;padding:1.3rem 1.6rem}
.wcard .btn.yel{box-shadow:.35rem .35rem 0 #fff;border-color:#fff}
.wcustom{margin-top:6rem}
.wcustom .wcap{color:var(--ink)}
.wcbox{position:relative;display:flex;align-items:center;gap:3rem;border:.22rem dashed var(--ink);background:rgba(255,255,255,.55);padding:3.4rem 4rem}
.wcbox .hd{position:absolute;width:1.1rem;height:1.1rem;background:#fff;border:.15rem solid var(--ink);animation:none}
.wcbox .hd.tl{left:-.65rem;top:-.65rem}.wcbox .hd.tr{right:-.65rem;top:-.65rem;left:auto}.wcbox .hd.bl{left:-.65rem;bottom:-.65rem;top:auto}.wcbox .hd.br{right:-.65rem;bottom:-.65rem;left:auto;top:auto}
.wcbox .plus{flex:none;width:7rem;height:7rem;border-radius:50%;background:var(--ink);color:var(--hi);font-size:5rem;line-height:6.6rem;font-weight:300;text-align:center}
.wctext{flex:1}
.wctext h3{font-variation-settings:"wdth" 62,"wght" 900;text-transform:uppercase;font-size:3.6rem;line-height:.95}
.wctext p{font-size:1.55rem;line-height:1.5;color:var(--ink2);margin-top:.8rem;max-width:60rem}
.wcbox .btn.yel{flex:none;background:#fff;font-size:1.6rem;padding:1.7rem 2.4rem}
.seal{position:absolute;right:-5rem;top:-7.2rem;z-index:3;width:12rem;height:12rem;rotate:-10deg;filter:drop-shadow(0 1rem 1.2rem rgba(18,18,16,.32))}
.seal svg{display:block;width:100%;height:100%;overflow:visible}
.seal .sz{fill:var(--ink)}.seal .sr{fill:none;stroke:var(--hi);stroke-width:1.4}
.seal text{font-size:13px;font-weight:800;letter-spacing:.1em;fill:var(--hi)}
.seal .st{transform-box:fill-box;transform-origin:50% 50%;animation:spin 24s linear infinite}
.seal .si{fill:none;stroke:var(--hi);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}.seal .sa{fill:var(--hi)}
.wcustom .seal{opacity:0;scale:2;transition:opacity .2s .5s,scale .45s cubic-bezier(.2,1.6,.4,1) .5s}
.wcustom.in .seal{opacity:1;scale:1}

/* ======================= 5 · ABOUT ======================= */
.about{position:relative;isolation:isolate;overflow-x:clip;overflow-y:visible;background:var(--ink);color:#fff;background-image:radial-gradient(rgba(255,255,255,.09) .11rem,transparent .14rem);background-size:2.4rem 2.4rem}
/* ink rises in the same curve, edged in the brand yellow */
.aarc{position:absolute;left:-12rem;right:-12rem;top:-7rem;height:14rem;z-index:-1;background:var(--ink);background-image:radial-gradient(rgba(255,255,255,.09) .11rem,transparent .14rem);background-size:2.4rem 2.4rem;border-radius:50% 50% 0 0/100% 100% 0 0;box-shadow:0 -.3rem 0 var(--hi)}
.awrap{width:120rem;margin:0 auto;padding:2rem 0 10rem;display:grid;grid-template-columns:50rem 1fr;gap:7rem;align-items:center}
.astage{position:relative;height:60rem}
.adisc{position:absolute;left:50%;bottom:0;width:38rem;height:46rem;translate:-50% 0;border-radius:19rem 19rem 0 0;background:var(--hi)}
.aimg{position:absolute;left:50%;bottom:0;width:43rem;translate:-50% 0;filter:drop-shadow(0 2rem 3rem rgba(0,0,0,.45))}
.asel{position:absolute;left:4rem;right:4rem;top:2.6rem;bottom:0;border:.15rem solid var(--sel);pointer-events:none}
.asel i{position:absolute;width:1.1rem;height:1.1rem;background:#fff;border:.15rem solid var(--sel)}
.asel i:nth-of-type(1){left:-.6rem;top:-.6rem}.asel i:nth-of-type(2){right:-.6rem;top:-.6rem}.asel i:nth-of-type(3){left:-.6rem;bottom:-.6rem}.asel i:nth-of-type(4){right:-.6rem;bottom:-.6rem}
.aname{position:absolute;left:0;top:-2.6rem;display:flex;align-items:center;gap:.5rem;font-size:1.2rem;font-weight:700;color:var(--sel);white-space:nowrap}
.aname svg{width:1.1rem;height:1.1rem}
.asel em{position:absolute;left:50%;bottom:-3.2rem;translate:-50% 0;background:var(--sel);color:#fff;font-style:normal;font-size:1.15rem;font-weight:700;padding:.3rem .8rem;border-radius:.5rem;white-space:nowrap}
.about .fc{color:var(--ink);box-shadow:.5rem .5rem 0 var(--hi);z-index:5}
.af2{right:-6rem;top:40rem}.af3{left:-5rem;top:29rem}
.astage .fc{opacity:0;translate:0 1.6rem;transition:opacity .4s,translate .6s var(--spring)}
.astage.in .fc{opacity:1;translate:0 0}.astage.in .af2{transition-delay:.15s}
.about .flabel{color:var(--hi)}
.about .hl{color:var(--ink)}
.atext p{font-size:1.7rem;line-height:1.6;color:rgba(255,255,255,.8);margin-top:1.6rem;max-width:62rem}
.atext p b{color:#fff}
.about h2{margin-bottom:2.4rem}
/* launch log, like a design tool's version history (dark UI) */
.alog{margin-top:4rem;background:#1E1E1E;border:.1rem solid rgba(255,255,255,.12);border-radius:1.4rem;overflow:hidden;box-shadow:0 2.4rem 4rem -2rem rgba(0,0,0,.7)}
.alh{display:flex;align-items:center;gap:.6rem;padding:1.2rem 1.8rem;font-size:1.15rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.6);border-bottom:.1rem solid rgba(255,255,255,.1)}
.alh svg{width:1rem;height:1rem}.alh span{margin-left:auto;background:var(--hi);color:var(--ink);border-radius:.4rem;padding:.1rem .6rem;letter-spacing:0}
.alog ol{list-style:none}
.alog li{display:grid;grid-template-columns:8.4rem 1fr auto;gap:1.6rem;align-items:center;padding:1.15rem 1.8rem;border-top:.1rem solid rgba(255,255,255,.07);opacity:0;translate:-1rem 0;transition:opacity .35s,translate .45s var(--ease)}
.alog li:first-child{border-top:0}
.alog.in li{opacity:1;translate:0 0}
.alog.in li:nth-child(2){transition-delay:.1s}.alog.in li:nth-child(3){transition-delay:.2s}.alog.in li:nth-child(4){transition-delay:.3s}.alog.in li:nth-child(5){transition-delay:.4s}
.lt{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:1.05rem;font-weight:700;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.06em}
.ln b{display:block;font-size:1.55rem;font-weight:800}.ln small{font-size:1.2rem;color:rgba(255,255,255,.55);font-weight:600}
.lv{text-align:right}.lv b{display:block;font-variation-settings:"wdth" 62,"wght" 900;font-size:2.6rem;line-height:1;color:var(--hi)}.lv small{font-size:1.05rem;color:rgba(255,255,255,.55);font-weight:600}
.alog li.now{background:rgba(255,230,0,.08)}
.alog li.now .lv b{font-size:3.2rem}

/* ======================= 6 · FAQ: buyer questions, my replies ======================= */
.qav svg,.bav svg{width:58%;height:58%;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.faq2{position:relative;isolation:isolate;overflow-x:clip;overflow-y:visible;background:var(--paper);background-image:radial-gradient(rgba(18,18,16,.16) .11rem,transparent .14rem);background-size:2.4rem 2.4rem}
.qarc{position:absolute;left:-12rem;right:-12rem;top:-7rem;height:14rem;z-index:-1;background:var(--paper);background-image:radial-gradient(rgba(18,18,16,.16) .11rem,transparent .14rem);background-size:2.4rem 2.4rem;border-radius:50% 50% 0 0/100% 100% 0 0;box-shadow:0 -.3rem 0 var(--hi)}
.faq2 .ruler.wr{top:0}
.qwrap{width:120rem;margin:0 auto;padding:2rem 0 11rem;display:grid;grid-template-columns:40rem 1fr;gap:7rem;align-items:start}
.qside{position:sticky;top:12rem}
.qside .btn{margin-top:2.8rem}
.qlist{display:grid;gap:1.4rem}
.qa summary{list-style:none;display:flex;align-items:center;gap:1rem;cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qav{flex:none;width:4rem;height:4rem;border-radius:50% 50% 50% .4rem;background:var(--pink);color:#fff;border:.18rem solid var(--ink);font-size:1.2rem;font-weight:900;display:flex;align-items:center;justify-content:center}
.qbub{flex:1;background:#fff;border:.18rem solid var(--ink);border-radius:.4rem 1.6rem 1.6rem 1.6rem;box-shadow:.4rem .4rem 0 var(--ink);padding:1.4rem 1.8rem;font-size:1.75rem;font-weight:800;line-height:1.3;transition:translate .2s var(--ease),box-shadow .2s var(--ease)}
.qa summary:hover .qbub{translate:-.2rem -.2rem;box-shadow:.6rem .6rem 0 var(--ink)}
.qa[open] .qbub{background:var(--hi)}
.qtog{flex:none;position:relative;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--ink);transition:rotate .3s var(--ease)}
.qtog::before,.qtog::after{content:"";position:absolute;left:50%;top:50%;width:1.4rem;height:.22rem;margin:-.11rem 0 0 -.7rem;background:var(--hi);border-radius:.2rem}
.qtog::after{rotate:90deg}
.qa[open] .qtog{rotate:45deg}
.abub{display:flex;justify-content:flex-end;align-items:flex-end;gap:1rem;margin:1.2rem 4.4rem .6rem 6rem}
.abub p{background:#fff;border:.15rem solid rgba(18,18,16,.25);border-radius:1.6rem .4rem 1.6rem 1.6rem;padding:1.3rem 1.7rem;font-size:1.55rem;line-height:1.55;color:var(--ink2);max-width:62rem}
.abub img{flex:none;width:4rem;height:4rem;border-radius:50%;border:.18rem solid var(--ink)}
.qa[open] .abub{animation:reply .45s var(--spring)}
@keyframes reply{from{opacity:0;translate:0 1rem}to{opacity:1;translate:0 0}}
.qa:nth-child(2).rv2{transition-delay:.05s}.qa:nth-child(3).rv2{transition-delay:.1s}.qa:nth-child(4).rv2{transition-delay:.15s}.qa:nth-child(5).rv2{transition-delay:.2s}

/* ======================= 7 · FINAL CALL TO ACTION ======================= */
.cta{position:relative;isolation:isolate;overflow-x:clip;overflow-y:visible;background:var(--hi);background-image:radial-gradient(rgba(18,18,16,.13) .11rem,transparent .14rem);background-size:2.4rem 2.4rem}
.carc{position:absolute;left:-12rem;right:-12rem;top:-7rem;height:14rem;z-index:-1;background:var(--hi);background-image:radial-gradient(rgba(18,18,16,.13) .11rem,transparent .14rem);background-size:2.4rem 2.4rem;border-radius:50% 50% 0 0/100% 100% 0 0;box-shadow:0 -.25rem 0 var(--ink)}
.cta .hl::before{background:#fff}
.cta .flabel{color:var(--ink)}
.cwrap{width:120rem;margin:0 auto;padding:3rem 0 16rem;display:grid;grid-template-columns:1fr 46rem;gap:6rem;align-items:center}
.cta h2{font-size:7.2rem}
.ctext .wsub{max-width:58rem}
.cbtns{display:flex;gap:1.2rem;margin:3.4rem 0 1.8rem;max-width:56rem}
.cbtns .sendbtn{flex:1;font-size:1.65rem;padding:1.7rem 1.2rem}
.ps{margin-top:3.6rem;max-width:60rem;background:rgba(255,255,255,.6);border:.15rem dashed var(--ink);border-radius:1.4rem;padding:1.8rem 2.2rem;font-size:1.5rem;line-height:1.55;color:var(--ink2)}
.ps b{font-family:"Caveat",cursive;font-size:2.6rem;color:var(--ink);margin-right:.6rem;line-height:1}
.cphone{position:relative;height:60rem}
.phone{position:absolute;left:50%;top:0;translate:-50% 0;width:31rem;height:60rem;background:var(--ink);border-radius:4.4rem;padding:1.2rem;box-shadow:1rem 1rem 0 rgba(18,18,16,.9),0 3rem 6rem -2rem rgba(0,0,0,.5);rotate:3deg;display:flex;flex-direction:column;overflow:hidden}
.pnotch{position:absolute;left:50%;top:1.6rem;translate:-50% 0;width:9rem;height:2.4rem;border-radius:2rem;background:#000;z-index:3}
.phd{display:flex;align-items:center;gap:1rem;background:#1F2C34;color:#fff;padding:4.6rem 1.4rem 1.2rem;border-radius:3.2rem 3.2rem 0 0}
.phd img{width:3.6rem;height:3.6rem;border-radius:50%}
.phd b{display:block;font-size:1.45rem;font-weight:800}.phd small{font-size:1.05rem;color:#3BE08F}
.pchat{flex:1;display:flex;flex-direction:column;gap:.8rem;background:#EFEAE2;background-image:radial-gradient(rgba(18,18,16,.06) .1rem,transparent .13rem);background-size:1.6rem 1.6rem;padding:1.4rem 1.2rem}
.pday{align-self:center;background:#fff;border-radius:.6rem;padding:.25rem .8rem;font-size:1rem;font-weight:700;color:var(--muted)}
.pm{max-width:84%;font-size:1.3rem;line-height:1.4;padding:.8rem 1.1rem;border-radius:1rem;box-shadow:0 .1rem .2rem rgba(0,0,0,.12)}
.in1,.in2{align-self:flex-start;background:#fff;border-top-left-radius:.2rem}
.out1{align-self:flex-end;background:#D9FDD3;border-top-right-radius:.2rem}
.typing{display:flex;gap:.35rem;padding:1rem 1.2rem}
.typing i{width:.7rem;height:.7rem;border-radius:50%;background:#8696A0;animation:typ 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes typ{0%,60%,100%{translate:0 0;opacity:.5}30%{translate:0 -.4rem;opacity:1}}
.pbar{display:flex;align-items:center;gap:.8rem;background:#F0F2F5;padding:1rem 1.2rem 1.6rem;border-radius:0 0 3.2rem 3.2rem}
.pbar span{flex:1;background:#fff;border-radius:10rem;padding:.8rem 1.2rem;font-size:1.2rem;color:var(--muted)}
.pbar b{width:3.6rem;height:3.6rem;border-radius:50%;background:#1FA855;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.cphone .pm{opacity:0;translate:0 .8rem;transition:opacity .35s,translate .45s var(--spring)}
.cphone.in .pm{opacity:1;translate:0 0}.cphone.in .out1{transition-delay:.6s}.cphone.in .in2{transition-delay:1.3s}
.cf1{left:-6rem;top:14rem;rotate:-4deg}.cf2{right:-7rem;top:38rem;rotate:3deg}
.cphone .fc{z-index:4}
.ccur{right:-1rem;top:7rem;z-index:5;animation:wander 7s ease-in-out infinite}
/* ======================= FOOTER ======================= */
.foot2{position:relative;isolation:isolate;background:var(--ink);color:#fff;overflow-x:clip;overflow-y:visible;padding-top:4rem}
.farc2{position:absolute;left:-12rem;right:-12rem;top:-7rem;height:14rem;z-index:-1;background:var(--ink);border-radius:50% 50% 0 0/100% 100% 0 0;box-shadow:0 -.3rem 0 var(--ink)}
.fwrap2{width:120rem;margin:0 auto;display:grid;grid-template-columns:1fr auto auto;gap:9rem;align-items:start}
.flogo{color:#fff;--h:4.6rem}
.fbrand p{font-size:1.5rem;line-height:1.55;color:rgba(255,255,255,.7);margin:2rem 0 2.6rem;max-width:44rem}
.fbrand .btn.yel{box-shadow:.4rem .4rem 0 #fff;border-color:#fff;font-size:1.55rem;padding:1.5rem 2.2rem}
.fcol h4{font-size:1.15rem;letter-spacing:.12em;text-transform:uppercase;color:var(--hi);margin-bottom:1.6rem}
.fcol ul{list-style:none;display:grid;gap:1rem;font-size:1.5rem}
.fcol a{text-decoration:none;color:rgba(255,255,255,.82)}
.fcol a:hover{color:var(--hi)}
.fbig{font-variation-settings:"wdth" 62,"wght" 900;font-size:23rem;line-height:.8;text-align:center;color:transparent;-webkit-text-stroke:.2rem rgba(255,255,255,.16);margin-top:7rem;white-space:nowrap;letter-spacing:-.01em;user-select:none}
.flegal{display:flex;justify-content:space-between;gap:2rem;width:120rem;margin:0 auto;padding:2.4rem 0 3rem;border-top:.1rem solid rgba(255,255,255,.12);font-size:1.2rem;color:rgba(255,255,255,.5)}
.flegal a{color:rgba(255,255,255,.7)}

/* ======================= message builder ======================= */
.dm{border:0;padding:0;margin:auto;background:transparent;max-width:none;max-height:none;overflow:visible}
.dm::backdrop{background:rgba(18,18,16,.82);backdrop-filter:blur(.4rem)}
.dmbox{width:min(52rem,calc(100vw - 3.2rem));max-height:calc(100vh - 4rem);display:flex;flex-direction:column;background:#fff;border:.2rem solid var(--ink);border-radius:2rem;box-shadow:.7rem .7rem 0 var(--hi);overflow:hidden}
.dmh{display:flex;align-items:center;gap:1.2rem;background:var(--ink);color:#fff;padding:1.4rem 1.6rem}
.dmh img{width:4.4rem;height:4.4rem;border-radius:50%;border:.2rem solid var(--hi)}
.dmh b{display:block;font-size:1.6rem;font-weight:850}.dmh small{font-size:1.15rem;color:rgba(255,255,255,.65)}
.dmh .vx{margin-left:auto}
.dmbody{overflow-y:auto;padding:1.8rem 1.8rem 1.4rem;background:#EFEAE2;background-image:radial-gradient(rgba(18,18,16,.07) .11rem,transparent .14rem);background-size:1.8rem 1.8rem}
.bub-a{background:#fff;border-radius:.4rem 1.4rem 1.4rem 1.4rem;padding:1rem 1.3rem;font-size:1.45rem;line-height:1.45;max-width:90%;box-shadow:0 .2rem .4rem rgba(0,0,0,.08)}
.dml{display:block;margin:1.8rem 0 .8rem;font-size:1.05rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.dmchips{display:flex;flex-wrap:wrap;gap:.6rem}
.dmc{background:#fff;border:.15rem solid var(--ink);border-radius:10rem;padding:.55rem 1.1rem;font-size:1.25rem;font-weight:700}
.dmc:hover{background:var(--hi)}
.dmc[aria-pressed="true"]{background:var(--ink);color:#fff}
.dmrow{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.4rem}
.dmf span{display:block;font-size:1.1rem;font-weight:800;margin-bottom:.4rem}.dmf em{font-style:normal;font-weight:600;color:var(--muted)}
.dmf input{width:100%;font:inherit;font-size:1.4rem;padding:.9rem 1.1rem;border:.15rem solid var(--ink);border-radius:1rem;background:#fff}
.dmf input:focus{outline:none;box-shadow:0 0 0 .3rem rgba(13,153,255,.35)}
.bub-y{margin-left:auto;max-width:92%;background:#D9FDD3;border-radius:1.4rem .4rem 1.4rem 1.4rem;padding:1rem 1.3rem;font-size:1.4rem;line-height:1.45;white-space:pre-line;box-shadow:0 .2rem .4rem rgba(0,0,0,.08)}
.dmsend{padding:1.6rem 1.8rem 1.6rem;border-top:.15rem solid var(--line)}
.dmmain{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.sendbtn{display:flex;align-items:center;justify-content:center;gap:.8rem;border-radius:1.2rem;padding:1.4rem 1rem;color:#fff;font-weight:850;font-size:1.5rem;text-decoration:none;border:.2rem solid var(--ink);box-shadow:.35rem .35rem 0 var(--ink);transition:translate .15s,box-shadow .15s}
.sendbtn:hover{translate:-.15rem -.15rem;box-shadow:.5rem .5rem 0 var(--ink)}
.sendbtn svg{width:2.2rem;height:2.2rem;fill:none;stroke:#fff;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.sendbtn.wa{background:#1FA855}.sendbtn.fb{background:#0866FF}
.dmalt{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem 1.4rem;margin-top:1.4rem;font-size:1.25rem;color:var(--muted)}
.dmalt a{font-weight:800;color:var(--ink);text-decoration:none;border-bottom:.15rem solid var(--hi);cursor:pointer}
.dmcall{display:block;text-align:center;margin-top:1rem;font-size:1.25rem;font-weight:700;color:var(--muted)}
.dmtoast{text-align:center;margin-top:1rem;font-size:1.25rem;font-weight:800;color:var(--green);opacity:0;transition:opacity .3s}
.dmtoast.on{opacity:1}
/* process step 1: the teardown happens in a chat */
.chat{position:absolute;left:1.2rem;right:1.2rem;top:1.2rem;bottom:1.2rem;display:flex;flex-direction:column;gap:.55rem;background:#EFEAE2;border-radius:.8rem;padding:0 .8rem .8rem;overflow:hidden;box-shadow:0 0 0 .14rem var(--ink)}
.chh{display:flex;align-items:center;gap:.6rem;margin:0 -.8rem .2rem;padding:.6rem .8rem;background:var(--ink);color:#fff;font-size:1.05rem}
.chh img{width:2rem;height:2rem;border-radius:50%}.chh i{font-style:normal;margin-left:auto;font-size:.9rem;color:#3BE08F}
.chat .m{display:block;max-width:82%;font-size:1.05rem;line-height:1.3;padding:.5rem .8rem;border-radius:.8rem;box-shadow:0 .1rem .2rem rgba(0,0,0,.1);opacity:0;translate:0 .6rem;transition:opacity .3s,translate .4s var(--spring)}
.chat .mo{align-self:flex-end;background:#D9FDD3;border-top-right-radius:.2rem}
.chat .mo u{color:var(--sel)}
.chat .him{align-self:flex-start;background:#fff;border-top-left-radius:.2rem}
.vnote{display:flex!important;align-items:center;gap:.5rem}
.vplay{width:1.8rem;height:1.8rem;border-radius:50%;background:#1FA855;color:#fff;font-size:.8rem;display:flex;align-items:center;justify-content:center}
.wave2{display:flex;align-items:center;gap:.15rem;height:1.6rem}
.wave2 i{width:.22rem;border-radius:.2rem;background:#8696A0}
.wave2 i:nth-child(3n){height:1.4rem}.wave2 i:nth-child(3n+1){height:.7rem}.wave2 i:nth-child(3n+2){height:1rem}
.vnote em{font-style:normal;font-weight:800;color:#E5301C}
.pstep.in .chat .m{opacity:1;translate:0 0}.pstep.in .chat .m:nth-child(3){transition-delay:.5s}.pstep.in .chat .m:nth-child(4){transition-delay:1s}

/* full-page viewer */
.viewer{border:0;padding:0;margin:0;background:transparent;width:100vw;height:100vh;max-width:none;max-height:none;overflow:hidden;color:#fff}
.viewer[open]{display:flex;align-items:center;justify-content:center}
.viewer::backdrop{background:rgba(18,18,16,.93);backdrop-filter:blur(.6rem)}
html.vopen{overflow:hidden}
.vwin{width:min(100rem,calc(100vw - 26rem));height:calc(100vh - 6rem);background:var(--ink);border-radius:1.6rem;padding:0 .8rem .8rem;display:flex;flex-direction:column;box-shadow:0 3rem 8rem rgba(0,0,0,.6)}
.vbar{display:flex;align-items:center;gap:1.4rem;height:5rem;font-size:1.3rem;padding:0 .4rem}
.vurl{flex:1;min-width:0;background:rgba(255,255,255,.09);padding:.6rem 1.2rem;border-radius:.7rem;color:rgba(255,255,255,.75);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vcount{color:var(--hi);font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.vlive{color:#fff;font-weight:700;text-decoration:none;border-bottom:.2rem solid var(--hi);white-space:nowrap}
.vlive[hidden]{display:none}
.vx{flex:none;width:3.6rem;height:3.6rem;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:1.5rem;text-align:center}
.vx:hover{background:var(--hi);color:var(--ink)}
.vscroll{flex:1;overflow-y:auto;border-radius:.8rem;background:#fff;overscroll-behavior:contain;outline:none}
.vscroll img{width:100%;display:block}
.vside{position:fixed;left:3.2rem;bottom:3.2rem;max-width:20rem;display:grid;gap:.6rem}
.vtitle{font-variation-settings:"wdth" 62,"wght" 900;text-transform:uppercase;font-size:3rem;line-height:.95}
.vstat{font-size:1.4rem;color:var(--hi);font-weight:700}
.vnav{position:fixed;top:50%;translate:0 -50%;width:6.4rem;height:6.4rem;border-radius:50%;background:#fff;color:var(--ink);font-size:2.4rem;font-weight:800;text-align:center;border:.2rem solid var(--ink);box-shadow:.4rem .4rem 0 var(--hi)}
.vnav:hover{background:var(--hi)}
.vpv{left:5.4rem}.vnx{right:5.4rem}
.noanim .viewer{display:none}

/* ======================= TABLET (700–1099px): the desktop canvas on a 112rem artboard ======================= */
@media (max-width:1099px) and (min-width:700px){
  .af2{right:-2.4rem}
  .cf1{left:-1.6rem}
  html{font-size:calc(100vw / 112)}
  .nav{padding:0 4rem 0 6.4rem}
  .a1,.a3{display:none}
  .a2{left:-12rem;top:48rem;width:30rem}.a2 figcaption{padding-left:13rem}
  .a4{right:-13rem;top:41rem;width:26rem}
  .cmt{left:38rem;top:97rem}
  .cur.client{left:66rem;top:108rem}
  .reel{left:14rem;width:84rem}
  .badge{left:5rem;top:77rem}
  .me{right:-3rem;width:34rem}
  .k1{left:2rem;top:100rem}.k2{left:3.4rem;top:111rem}.k3{left:1.6rem;top:122rem}
  .wwrap{width:auto;padding:8rem 6rem 9rem;--ph:22rem}
  .feat{grid-template-columns:1fr;gap:4rem}
  .fstage{width:72rem;margin:0 auto}
  .cwrap{width:auto;padding:3rem 6rem 14rem;grid-template-columns:1fr 38rem;gap:4rem}
  .fwrap2,.flegal{width:auto;margin:0 6rem}
  .fbig{font-size:17rem}
  .qwrap{width:auto;padding:2rem 6rem 10rem;grid-template-columns:1fr;gap:4rem}
  .qside{position:static}
  .wwrap2{width:auto;padding:2rem 6rem 12rem}
  .wgrid{grid-template-columns:repeat(2,1fr);gap:3rem}
  .wcard.funnel{translate:none}
  .fwrap{width:auto;padding:6rem 6rem}
  .frow,.alt .frow{grid-template-columns:1fr;gap:4rem}.alt .ftext{order:0}
  .twrap{width:auto;padding:3rem 6rem 9rem}
  .tgrid{grid-template-columns:1fr}
  .tfaces{flex-wrap:wrap}
  .awrap{width:auto;padding:2rem 6rem 9rem;grid-template-columns:40rem 1fr;gap:5rem}
  .astage{height:52rem}.aimg{width:36rem}.adisc{width:32rem;height:40rem}
  .pwrap{width:auto;padding:7rem 6rem 9rem}
  .psteps{grid-template-columns:repeat(2,1fr)}
  .pstep:nth-child(2)::after{display:none}
  .mwrap{width:auto;padding:8rem 6rem}
  .qmap{grid-template-columns:repeat(3,1fr);column-gap:4rem;grid-template-rows:31rem 31rem}
  .qframe{height:19rem}
  .qflow{display:none}
  .tcopy{width:54rem}
  .berg{right:3rem;width:30rem;height:42rem}
}

/* ======================= MOBILE (under 700px): a 390 artboard, 1rem = 10px at 390 ======================= */
@media (max-width:699px){
  html{font-size:calc(100vw / 39)}
  body{font-size:1.6rem}
  .hero{height:173rem}
  .ruler.y{display:none}
  .ruler.x{left:0;height:1.8rem;font-size:.75rem;background-size:.5rem .4rem}
  .ruler.x span{top:.25rem;height:1.5rem;padding-left:.3rem}
  .nav{top:1.8rem;height:6.6rem;padding:0 1.6rem;gap:1rem}
  .nav nav{display:none}
  .logo{--h:2.9rem}
  .nav .btn.ink{margin-left:auto;font-size:1.3rem;padding:1.05rem 1.5rem;border-radius:1rem}
  .copy{top:10rem;padding:0 1.6rem}
  .launch{display:grid;grid-template-columns:1.5fr 1fr 1fr;border-radius:1.2rem;font-size:1.15rem;box-shadow:.3rem .3rem 0 var(--ink);width:100%}
  .launch>span{flex-wrap:wrap;justify-content:center;align-content:center;text-align:center;gap:.1rem .4rem;padding:.6rem .4rem;border-top:.15rem solid var(--line);white-space:normal}
  .launch>span+span{border-left:.15rem solid var(--line)}
  .launch .live{grid-column:1/-1;border-top:0;padding:.5rem;gap:.6rem}
  .launch .potd{border-left:0}
  .launch svg{width:1.2rem;height:1.2rem}
  .launch small{flex-basis:100%;margin:0;font-size:.95rem;font-weight:600;color:var(--ink2);line-height:1.25}
  .sel{margin-top:4.2rem;padding:1rem 1.2rem .9rem}
  .sel-name{top:-2.1rem;font-size:1.05rem}
  .sel-size{bottom:-2.6rem;font-size:1rem}
  .hd{width:.9rem;height:.9rem}
  .hd.tl,.hd.ml,.hd.bl{left:-.45rem}.hd.tr,.hd.mr,.hd.br{right:-.45rem}
  .hd.tl,.hd.tm,.hd.tr{top:-.45rem}.hd.bl,.hd.bm,.hd.br{bottom:-.45rem}
  .hd.tm,.hd.bm{left:calc(50% - .45rem)}.hd.ml,.hd.mr{top:calc(50% - .45rem)}
  h1{font-size:5.5rem}
  .sub{font-size:1.65rem;margin-top:4rem;max-width:none}
  .sub .face{width:2.8rem;height:2.8rem;vertical-align:-.8rem;margin:0 .5rem 0 .2rem}
  .act{flex-direction:column;gap:2.2rem;margin-top:2.8rem}
  .btn.yel{width:100%;justify-content:center;font-size:1.8rem;padding:1.9rem 2rem;box-shadow:.45rem .45rem 0 var(--ink)}
  .txt{font-size:1.55rem}
  .note-s{font-size:1.2rem;margin-top:1.8rem;padding:0 1rem}
  /* the canvas strip: three pages under the call to action */
  .a1{display:none}
  .a2{left:-4rem;top:86.5rem;width:19rem}.a2 figcaption{padding-left:0}
  .a3{left:14.6rem;top:84rem;width:12.6rem}
  .a4{left:auto;right:-5rem;top:90rem;width:16rem}
  .ab figcaption{font-size:.95rem;margin-bottom:.4rem}
  .cur svg{width:1.8rem;height:2rem}
  .cur span{font-size:1.05rem;margin-top:1.5rem;padding:.25rem .7rem}
  .cmt{left:1.6rem;top:106.5rem}
  .cmt .pin{width:3.8rem;height:3.8rem}
  .cmt .bub{padding:1.2rem 1.3rem 1.3rem}
  .thread li{font-size:1.4rem;white-space:nowrap;gap:1rem}
  .cmt p{font-size:1.4rem}
  .cur.client{left:28rem;top:108rem}
  .band{left:-6rem;right:-6rem;top:128rem;border-radius:50% 50% 0 0/4rem 4rem 0 0}
  .reel{left:1.6rem;width:auto;right:1.6rem;top:125rem;height:30rem;border-radius:1.2rem 1.2rem 0 0;padding:0 .6rem}
  .reel .chrome{height:3.2rem;gap:.8rem;font-size:1rem}
  .reel .vp{height:calc(100% - 3.2rem)}
  .dots3 i{width:.8rem;height:.8rem}
  .reel .url{width:auto;flex:1;padding:.35rem .8rem}
  .reel .tag{display:none}
  .badge{left:auto;right:.6rem;top:121.5rem;width:9.6rem;height:9.6rem}
  .badge b{font-size:3.4rem}
  .me{right:-2rem;width:21rem}
  .fc{padding:.8rem 1.2rem .8rem .8rem;gap:.9rem;border-radius:1.1rem;box-shadow:.35rem .35rem 0 var(--ink)}
  .fc b{font-size:1.55rem}
  .fc small{font-size:1.1rem}
  .ptype{font-size:1.1rem}
  .fcol ul{gap:1.5rem}
  .ico{width:3.4rem;height:3.4rem;border-radius:.9rem}
  .ico svg{width:1.9rem;height:1.9rem}
  .k1{left:1.6rem;top:148rem}.k2{left:3rem;top:156.5rem}.k3{left:1.2rem;top:165rem}
  .next{min-height:30rem;font-size:1.3rem;padding:0 2rem;text-align:center}
  .dk{display:none}.mb{display:inline}
  .tick{height:4rem}.tick span{font-size:1.9rem;gap:1.6rem;padding-right:1.6rem}.tick span::after{width:1.2rem;height:1.2rem}
  .wwrap{width:auto;padding:5rem 1.6rem 7rem;--ph:24rem;--fh:26rem}
  .whead{flex-direction:column;align-items:flex-start;gap:2rem}
  .work h2{font-size:4.4rem}
  .wsub{font-size:1.6rem;margin-top:1.4rem}
  .feat{grid-template-columns:1fr;gap:2.4rem;margin-top:3.6rem}
  .fstage{height:44rem;margin:0 -.4rem}
  .fmain{left:0;top:5rem;width:31rem;height:25rem;padding:0 .5rem .5rem;border-radius:1rem}
  .fmain .chrome{height:2.6rem;font-size:.9rem;gap:.6rem}.fmain .url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .fview{height:calc(100% - 2.6rem)}
  .fside{left:auto;right:-.4rem;top:0;width:15rem;padding:.4rem}
  .fside .wcap{font-size:.95rem}
  .noodle,.nlabel{display:none}
  .fstage .fbadge{left:-1rem;top:-1.6rem;width:9.4rem;height:9.4rem}
  .pc .pbadge{width:6.4rem;height:6.4rem;right:.5rem;top:.5rem}
  .ff1{left:0;top:30.6rem}.ff2{left:auto;right:0;top:33.6rem}.ff3{display:none}
  .fcur{left:27rem;top:8rem}
  .finfo h3{font-size:3.8rem}
  .finfo p{font-size:1.55rem}
  .fbtns{gap:2rem}
  .fbtns .btn.ink{width:100%;justify-content:center}
  .pgrid{grid-template-columns:1fr;gap:3.6rem;margin-top:4.4rem}
  .pgrid:not(.open) .pc.extra{display:none}
  .pc{box-shadow:.4rem .4rem 0 var(--ink);padding:.9rem}
  .ptop h3{font-size:1.75rem}
  .prev b{font-size:4.2rem}
  .tip{margin-top:6rem;min-height:0;border-radius:1.6rem;box-shadow:.4rem .4rem 0 var(--ink);background:linear-gradient(180deg,#F7FBFF 0,#E4F0FC 17rem,#0E5BC4 17rem,#0A3F94 55%,#06245B 100%);padding-bottom:26rem}
  .wave{top:15.6rem}
  .tcopy{width:auto;padding:3rem 2rem 0}
  .tip h3{font-size:3.6rem}
  .tip .under{margin-top:5.4rem}
  .tip .under p{font-size:1.6rem}
  .tip .btn.yel{width:100%;justify-content:center;font-size:1.6rem;padding:1.7rem 1.6rem}
  .berg{right:auto;left:50%;translate:-50% 0;top:auto;bottom:-7.5rem;width:24rem;height:31rem}
  .bergin::after{background:linear-gradient(180deg,rgba(14,91,196,.35),rgba(6,36,91,.8))}
  .depth{right:1.6rem;bottom:2rem}.depth b{font-size:4.4rem}.depth span{font-size:1.1rem}
  .more{display:block;margin:4rem auto 0;padding:1.4rem 2.4rem;border:.2rem solid var(--ink);border-radius:10rem;background:#fff;font-weight:800;font-size:1.45rem;box-shadow:.35rem .35rem 0 var(--ink)}
  .more[hidden]{display:none}
  .peek{opacity:1;translate:-50% 0;font-size:1.2rem;padding:.8rem 1.3rem;bottom:1.4rem}
  .vwin{width:100vw;height:100dvh;border-radius:0;padding:0}
  .vbar{height:5.2rem;padding:0 1rem;gap:1rem;font-size:1.15rem}
  .vbar .dots3,.vurl{display:none}
  .vcount{margin-right:auto}
  .vscroll{border-radius:0}
  .vside{display:none}
  .vnav{top:auto;bottom:2rem;translate:none;width:5.2rem;height:5.2rem;font-size:2rem;box-shadow:.3rem .3rem 0 var(--hi)}
  .vpv{left:1.6rem}.vnx{right:1.6rem}
  .cta h2{font-size:4.6rem}
  .carc,.farc2{top:-3.6rem;height:7.2rem;left:-4rem;right:-4rem}
  .cwrap{width:auto;grid-template-columns:1fr;gap:4rem;padding:2rem 1.6rem 11rem}
  .cbtns{flex-direction:column}
  .ps{font-size:1.4rem;padding:1.5rem 1.6rem}
  .cphone{height:52rem}
  .phone{width:27rem;height:52rem;rotate:0deg}
  .cf1{left:-.4rem;top:10rem}.cf2{right:-.4rem;top:34rem}
  .ccur{display:none}
  .fwrap2{width:auto;grid-template-columns:1fr 1fr;gap:4rem 2rem;margin:0 1.6rem}
  .fbrand{grid-column:1/-1}
  .fbrand .btn.yel{width:100%;justify-content:center}
  .fbig{font-size:7.2rem;margin-top:5rem}
  .flegal{width:auto;margin:0 1.6rem;flex-direction:column;gap:.8rem}
  .faq2 h2{font-size:4.4rem}
  .qarc{top:-3.6rem;height:7.2rem;left:-4rem;right:-4rem}
  .qwrap{width:auto;padding:2rem 1.6rem 8rem;grid-template-columns:1fr;gap:3.6rem}
  .qside{position:static}
  .qside .btn{width:100%;justify-content:center}
  .qav{width:3.4rem;height:3.4rem;font-size:1rem}
  .qbub{font-size:1.5rem;padding:1.2rem 1.4rem;box-shadow:.3rem .3rem 0 var(--ink)}
  .qtog{width:3rem;height:3rem}
  .abub{margin:1rem 0 .4rem 2.4rem}
  .abub p{font-size:1.45rem}
  .abub img{width:3.4rem;height:3.4rem}
  .ways h2{font-size:4.4rem}
  .warc{top:-3.6rem;height:7.2rem;left:-4rem;right:-4rem}
  .wwrap2{width:auto;padding:2rem 1.6rem 9rem}
  .wgrid{grid-template-columns:1fr;gap:2.8rem;margin-top:3.6rem}
  .wcard.funnel,.wcard.funnel:hover{translate:none}
  .wcbox{flex-direction:column;align-items:flex-start;gap:2rem;padding:3rem 2rem}
  .wctext h3{font-size:3rem}
  .wcbox .btn.yel{width:100%;justify-content:center}
  .seal{width:10.4rem;height:10.4rem;right:-.6rem;top:-4.6rem}
  .dmbox{width:100vw;max-height:100dvh;height:100dvh;border-radius:0;border:0;box-shadow:none}
  .dmrow{grid-template-columns:1fr}
  .dmmain{grid-template-columns:1fr}
  .mwrap{width:auto;padding:5.6rem 1.6rem 6rem}
  .marc{top:-3.6rem;height:7.2rem;left:-4rem;right:-4rem}
  .styles{width:100%;rotate:0deg;margin:0}
  .styles ul{grid-template-columns:1fr 1fr;gap:.7rem 1rem}
  .styles li{font-size:1.15rem;gap:.7rem}.styles li i{width:2rem;height:2rem}
  .bcmt{width:100%;rotate:0deg;margin:0}
  .bb p{font-size:1.5rem}
  .method h2{font-size:4.4rem}
  .qmap{grid-template-columns:1fr;grid-template-rows:none;row-gap:4.4rem;margin-top:3.6rem}
  .s1,.s2,.s3,.s4,.s5,.s6{grid-area:auto}
  .qflow{display:none}
  .qstep:not(.s6)::after{content:"";position:absolute;left:50%;bottom:-4rem;height:3.4rem;border-left:.26rem dashed var(--ink)}
  .qframe{height:auto;aspect-ratio:16/10}
  .qcmt{margin:-2.2rem 1rem 0}
  .qframe .peek{bottom:auto;top:1.2rem}
  .qcmt b{font-size:1.5rem}
  .qcur{display:none}
  .qcta{flex-direction:column;align-items:stretch;gap:2.4rem;margin-top:4.4rem;padding-top:4rem}
  .qcta h3{font-size:3.4rem}
  .qcta p{font-size:1.5rem}
  .qcta .btn.yel{justify-content:center;font-size:1.6rem;padding:1.7rem 1.6rem}
  .process h2{font-size:4.4rem}
  .parc{top:-3.6rem;height:7.2rem;left:-4rem;right:-4rem}
  .pwrap{width:auto;padding:4.4rem 1.6rem 7rem}
  .psteps{grid-template-columns:1fr;gap:2.4rem;margin-top:3.6rem}
  .pstep:not(:last-child)::after{display:none}
  .pvis{height:20rem}
  .pfast{font-size:1.45rem;margin-top:3rem}
  .pend{flex-direction:column;gap:2.2rem;margin-top:3rem}.pend .pfast{text-align:center;max-width:none}.rcmt{rotate:0deg;max-width:none}.rcmt .pin{width:3.8rem;height:3.8rem}.rcmt p{font-size:1.4rem}
  .fit h2{font-size:4.4rem}
  .farc{top:-3.6rem;height:7.2rem;left:-4rem;right:-4rem}
  .fwrap{width:auto;padding:5rem 1.6rem}
  .fband .whead{margin-bottom:3.6rem}
  .fband:last-child .fwrap{padding-bottom:9rem}
  .frow,.alt .frow{grid-template-columns:1fr;gap:3rem}.alt .ftext{order:0}
  .ftext h3{font-size:3.4rem}
  .kick2{gap:.8rem;padding:.5rem 1.2rem .5rem .5rem;box-shadow:.3rem .3rem 0 var(--ink)}
  .kn,.ki{width:3.2rem;height:3.2rem}.kn{font-size:1.6rem}.ki svg{width:1.8rem;height:1.8rem}
  .kt{font-size:1.5rem;white-space:normal}
  .ftext p{font-size:1.5rem}
  .ipages li{font-size:1.4rem}
  .fboard{padding:1.6rem 1.6rem 2rem;box-shadow:.4rem .4rem 0 var(--ink)}
  .flow{flex-direction:column;align-items:stretch;margin-top:1.4rem}
  .fstep{flex-direction:row;gap:1.4rem}
  .mpage{width:4.8rem;flex:none;padding:.45rem .4rem}
  .mpage .h{height:.4rem}.mpage .b{height:.5rem;margin-top:.35rem}.mpage .l,.mpage .fld,.mpage .bump{margin-top:.3rem}.mpage .av{width:1.4rem;height:1.4rem;margin-top:.3rem}
  .mpage .vb{height:1.3rem;margin-top:.3rem}.mpage .dsh{height:1.3rem;margin-top:.3rem}.mpage .g3{margin-top:.3rem}.mpage .g3 i{height:.9rem}.mpage .pc3 i{height:1.1rem}.mpage .pr{height:.8rem;margin-top:.3rem}
  .fstep em{font-size:1.4rem;text-align:left}
  .farr{width:.25rem;height:1.6rem;margin:.35rem 0 .35rem 2.3rem;background:linear-gradient(var(--ink) 55%,transparent 55%) 0 0/100% .8rem repeat-y;animation:none}
  .farr::after{right:-.45rem;top:auto;bottom:-.3rem;border-left:.55rem solid transparent;border-right:.55rem solid transparent;border-top:.7rem solid var(--ink);border-bottom:0}
  .fgoal{flex-direction:row;width:auto;gap:1.4rem;margin-top:.6rem}
  .fgoal b{margin:0;width:4.8rem;height:4.8rem;font-size:2.2rem}
  .fgoal em{font-size:1.45rem;text-align:left}
  .fitfoot{flex-direction:column;align-items:flex-start;gap:1.6rem;margin-top:4.4rem}
  .fbwrap{padding:0}
  .fboard,.alt .fboard{rotate:0deg}
  .anote{position:relative;left:auto;width:auto;margin-top:1.4rem}
  .anote.top,.anote.bot{top:auto;bottom:auto}
  .present{display:none}
  .fitfoot p{font-size:1.45rem}
  .tst h2{font-size:4.4rem}
  .tarc{top:-3.6rem;height:7.2rem;left:-4rem;right:-4rem}
  .twrap{width:auto;padding:2rem 1.6rem 7rem}
  .tgrid{grid-template-columns:1fr;gap:3.6rem;margin-top:3.6rem}
  .tvids{grid-template-columns:1fr 1fr;gap:1.4rem}
  .tv:nth-child(2){margin-top:0}
  .tv:nth-child(3){grid-column:1/-1}.tv:nth-child(3) .vid{aspect-ratio:16/10}
  .vid .cap b{font-size:1.4rem}.vid .play{width:5.4rem;height:5.4rem;margin:-2.7rem 0 0 -2.7rem}
  .tq{grid-template-columns:4.4rem 1fr;padding:1.6rem 1.6rem;gap:1.1rem}.tq img{width:4.4rem;height:4.4rem}
  .tq p{font-size:1.45rem}
  .twall{margin-top:6rem}.twall h3{font-size:3.4rem}
  .tfaces{flex-wrap:wrap;gap:1.6rem 1rem;margin-top:2.6rem}
  .tfaces li{width:7.6rem;font-size:1.1rem}.tfaces img{width:6.4rem;height:6.4rem}
  .tnames{gap:.6rem}.tnames span{font-size:1.15rem;padding:.5rem 1rem}
  .about h2{font-size:4.4rem}
  .aarc{top:-3.6rem;height:7.2rem;left:-4rem;right:-4rem}
  .awrap{width:auto;grid-template-columns:1fr;gap:4rem;padding:2rem 1.6rem 7rem}
  .astage{height:44rem;margin:0 1rem}
  .adisc{width:27rem;height:33rem}.aimg{width:31rem}
  .asel{left:1.4rem;right:1.4rem;top:3.4rem}
  .about .fc{padding:.8rem 1.2rem .8rem .8rem;gap:.9rem;box-shadow:.35rem .35rem 0 var(--hi)}
  .about .fc b{font-size:1.45rem}.about .fc small{font-size:1.1rem}
  .af2{right:-1.6rem;top:30rem}.af3{left:-1.6rem;top:22rem}
  .atext p{font-size:1.55rem}
  .alog li{grid-template-columns:6.4rem 1fr auto;gap:1rem;padding:1rem 1.2rem}
  .lv b{font-size:2.2rem}.alog li.now .lv b{font-size:2.6rem}
}
@media (pointer:coarse){.ab{touch-action:auto;cursor:default}}

/* still captures (?shot): no motion, final states */
.noanim *,.noanim *::before,.noanim *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- legal pages (privacy, terms) ---------- */
.lgl{background:var(--paper)}
.lhead{position:relative;height:13.4rem}
.legal{background-image:radial-gradient(rgba(18,18,16,.1) .11rem,transparent .14rem);background-size:2.4rem 2.4rem;padding:3rem 0 16rem}
.lwrap{width:120rem;margin:0 auto;display:grid;grid-template-columns:27rem 1fr;gap:9rem;align-items:start}
.ltoc{position:sticky;top:3rem;background:#fff;border:.18rem solid var(--ink);border-radius:1.4rem;box-shadow:.45rem .45rem 0 var(--ink);padding:1.8rem 1.8rem 2rem;margin-top:1rem}
.ltoch{display:flex;align-items:center;gap:.6rem;font-size:1.15rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-bottom:1.2rem;margin-bottom:1rem;border-bottom:.1rem solid var(--line)}
.ltoch svg{width:1.1rem;height:1.1rem;color:var(--sel)}
.ltoc ol{list-style:none;display:grid;gap:.2rem}
.ltoc ol a{display:block;padding:.45rem .8rem;margin:0 -.8rem;border-radius:.6rem;font-size:1.35rem;font-weight:600;color:var(--ink2);text-decoration:none}
.ltoc ol a:hover{background:var(--hi);color:var(--ink)}
.lother{display:inline-block;margin-top:1.4rem;padding-top:1.2rem;border-top:.1rem solid var(--line);width:100%;font-size:1.35rem;font-weight:800;color:var(--ink);text-decoration:none}
.lother:hover{text-decoration:underline;text-decoration-color:var(--hi);text-decoration-thickness:.3rem}
.ldoc{max-width:78rem}
.ldoc h1{font-variation-settings:"wdth" 62,"wght" 900;text-transform:uppercase;font-size:8rem;line-height:.9;margin:1rem 0 1.8rem}
.lupd{display:inline-block;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:1.15rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:#fff;border:.1rem solid var(--line);border-radius:.6rem;padding:.5rem .9rem}
.ldoc .lead{font-size:1.95rem;line-height:1.55;color:var(--ink);margin:2.8rem 0 .6rem}
.ldoc section{padding-top:4rem;scroll-margin-top:3rem}
.ldoc h2{font-size:2.5rem;font-weight:850;letter-spacing:-.01em;margin-bottom:1.2rem}
.ldoc h3{font-size:1.75rem;font-weight:800;margin:2rem 0 .6rem}
.ldoc p,.ldoc li{font-size:1.65rem;line-height:1.7;color:var(--ink2)}
.ldoc p+p{margin-top:1rem}
.ldoc ul{list-style:none;display:grid;gap:.8rem;margin:1rem 0}
.ldoc ul li{position:relative;padding-left:2.4rem}
.ldoc ul li::before{content:"";position:absolute;left:.3rem;top:.95rem;width:.9rem;height:.9rem;border-radius:.2rem;background:var(--hi);border:.15rem solid var(--ink);rotate:45deg}
.ldoc b{color:var(--ink)}
.ldoc a{color:var(--ink);font-weight:650;text-decoration:underline;text-decoration-color:var(--hi);text-decoration-thickness:.3rem;text-underline-offset:.3rem}
.ldoc .btn{text-decoration:none;color:#fff}
.lsig{display:flex;align-items:center;justify-content:space-between;gap:2.4rem;margin-top:5.6rem;background:#fff;border:.18rem solid var(--ink);border-radius:1.6rem;box-shadow:.45rem .45rem 0 var(--ink);padding:2.2rem 2.6rem}
.lsig b{display:block;font-size:1.8rem;margin-bottom:.3rem}
.lsig span{font-size:1.5rem;color:var(--ink2)}
.lsig .btn.ink{flex:none}
.laddr{margin-top:2.4rem;font-size:1.3rem!important;color:var(--muted)!important}
.flegal a[aria-current]{color:var(--hi)}
@media (max-width:1099px) and (min-width:700px){
  .lwrap{width:auto;padding:0 6.4rem;grid-template-columns:24rem 1fr;gap:5rem}
}
@media (max-width:699px){
  .lhead{height:10.4rem}
  .legal{padding:1rem 0 12rem}
  .lwrap{width:auto;padding:0 1.6rem;grid-template-columns:1fr;gap:3rem}
  .ltoc{position:static;order:2;display:none}
  .ldoc h1{font-size:5.2rem}
  .ldoc .lead{font-size:1.7rem}
  .ldoc h2{font-size:2.1rem}
  .ldoc p,.ldoc li{font-size:1.55rem}
  .lsig{flex-direction:column;align-items:stretch;padding:2rem}
  .lsig .btn.ink{justify-content:center}
}

/* ---------- case studies ---------- */
.csp main{background-image:radial-gradient(rgba(18,18,16,.1) .11rem,transparent .14rem);background-size:2.4rem 2.4rem}
.cshero{position:relative;padding:1rem 0 10rem;overflow-x:clip}
.cswrap{width:120rem;margin:0 auto;display:grid;grid-template-columns:50rem 1fr;gap:6rem;align-items:start}
.crumb{display:flex;align-items:center;gap:.8rem;font-size:1.3rem;font-weight:650;color:var(--muted);margin-bottom:2.4rem}
.crumb a{color:inherit;text-decoration:none}.crumb a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hi);text-decoration-thickness:.25rem}
.crumb b{color:var(--ink);font-weight:750}
.cstext h1{font-variation-settings:"wdth" 62,"wght" 900;text-transform:uppercase;font-size:7.2rem;line-height:.92;margin:1.2rem 0 2.4rem}
.cslead{font-size:1.75rem;line-height:1.6;color:var(--ink2)}
.csmeta{display:grid;grid-template-columns:1fr 1fr;margin:2.8rem 0 3.2rem;background:#fff;border:.18rem solid var(--ink);border-radius:1.4rem;box-shadow:.45rem .45rem 0 var(--ink);overflow:hidden}
.csmeta div{padding:1.4rem 1.8rem;border-right:.1rem solid var(--line);border-bottom:.1rem solid var(--line)}
.csmeta div:nth-child(2n){border-right:0}.csmeta div:nth-child(n+3){border-bottom:0}
.csmeta dt{font-size:1.05rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.csmeta dd{font-size:1.55rem;font-weight:750;margin-top:.3rem}
.csbtns{display:flex;align-items:center;gap:2.4rem;flex-wrap:wrap}
.csbtns .txt{font-size:1.5rem;color:var(--ink)}
.csstage{position:relative;height:68rem;margin-top:.6rem}
.csab{position:absolute;width:27rem;margin:0;cursor:grab;touch-action:none;user-select:none;transition:translate .15s}
.csab.dragging{cursor:grabbing;z-index:9;transition:none}
.csab figcaption{display:flex;align-items:center;gap:.5rem;font-size:1.15rem;font-weight:700;color:#8C8C86;margin-bottom:.6rem;white-space:nowrap}
.csab figcaption svg{width:1rem;height:1rem}
.csab .sw{width:1rem;height:1rem;border-radius:50%;margin-left:.3rem;background:var(--c);box-shadow:0 0 0 .15rem #fff,0 0 0 .25rem rgba(18,18,16,.18)}
.csab .abi{border-radius:1rem;overflow:hidden;background:#0B1B45;box-shadow:0 2rem 4rem -1.6rem rgba(18,18,16,.45),0 0 0 .1rem rgba(18,18,16,.12)}
.csab img{display:block;width:100%;height:auto;pointer-events:none}
.cs-jv{left:0;top:2rem;rotate:-2deg;--c:#1683FF}
.cs-fe{left:32rem;top:0;rotate:1.5deg;--c:#0B1B45;z-index:3}
.cs-pro{left:3rem;top:24.5rem;rotate:1deg;--c:#FFC93C}
.cs-dir{left:34rem;top:24rem;rotate:-1.5deg;--c:#3DDC97}
.cs-cv{left:0;top:46.5rem;rotate:1.5deg;--c:#93A9C6}
.cs-bundle{left:32rem;top:46rem;rotate:-1deg;--c:#8B5CF6}
.cssel{position:absolute;left:-.6rem;right:-.6rem;top:1.9rem;bottom:-.6rem;border:.2rem solid var(--sel);border-radius:1.2rem;pointer-events:none}
.cssel i{position:absolute;width:1rem;height:1rem;background:#fff;border:.2rem solid var(--sel);border-radius:.2rem}
.cssel i:nth-child(1){left:-.6rem;top:-.6rem}.cssel i:nth-child(2){right:-.6rem;top:-.6rem}.cssel i:nth-child(3){left:-.6rem;bottom:-.6rem}.cssel i:nth-child(4){right:-.6rem;bottom:-.6rem}
.cssel em{position:absolute;left:50%;bottom:-3rem;translate:-50% 0;font-style:normal;background:var(--sel);color:#fff;font-size:1.1rem;font-weight:700;padding:.3rem .8rem;border-radius:.5rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.csstage .csbadge{left:auto;right:-5rem;top:-4.4rem;width:12rem;height:12rem;z-index:6}
.csstage .cscmt{position:absolute;right:-7rem;top:33.5rem;z-index:7;max-width:31rem}
.cscmt .who{flex-direction:column;align-items:flex-start;gap:.1rem}
.csstage .cscur{left:55rem;top:15rem;z-index:8}
.csstage>*{opacity:0;transform:translateY(2.4rem) scale(.96);transition:opacity .6s var(--ease),transform .8s var(--spring)}
.csstage.in>*{opacity:1;transform:none}
.csstage.in .cs-fe{transition-delay:.1s}.csstage.in .cs-pro{transition-delay:.2s}.csstage.in .cs-dir{transition-delay:.3s}.csstage.in .cs-cv{transition-delay:.4s}.csstage.in .cs-bundle{transition-delay:.5s}
.csstage.in .csbadge{transition-delay:.7s}.csstage.in .cscmt{transition-delay:.9s}.csstage.in .cscur{transition-delay:1.1s}
.csnums{width:120rem;margin:6rem auto 0;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:.18rem solid var(--ink);border-radius:1.6rem;box-shadow:.5rem .5rem 0 var(--ink)}
.csnums div{padding:2.4rem 2.8rem;border-right:.1rem solid var(--line)}
.csnums div:last-child{border-right:0}
.csnums b{display:block;font-variation-settings:"wdth" 62,"wght" 900;font-size:5.6rem;line-height:1;letter-spacing:-.01em}
.csnums div:first-child b{background:linear-gradient(transparent 58%,var(--hi) 58%);display:inline-block;padding:0 .2rem}
.csnums span{display:block;margin-top:.8rem;font-size:1.4rem;font-weight:600;color:var(--muted)}
@media (max-width:1099px) and (min-width:700px){
  .cswrap{width:auto;padding:0 6.4rem;grid-template-columns:1fr;gap:6rem}
  .csstage{width:64rem;margin:2rem auto 0}
  .csnums{width:auto;margin:6rem 6.4rem 0}
}
@media (max-width:699px){
  .cshero{padding:0 0 7rem}
  .cswrap{width:auto;padding:0 1.6rem;grid-template-columns:1fr;gap:4rem}
  .crumb{font-size:1.2rem;margin-bottom:1.8rem}
  .cstext h1{font-size:4.6rem}
  .cslead{font-size:1.55rem}
  .csmeta dd{font-size:1.4rem}.csmeta div{padding:1.2rem 1.4rem}
  .csbtns{gap:2rem}.csbtns .btn{width:100%;justify-content:center}
  .csstage{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:2rem 1.4rem;padding-top:1rem}
  .csab{position:relative;left:auto;top:auto;width:auto;rotate:0deg}
  .csab figcaption{font-size:1.05rem}
  .cssel em{display:none}
  .csstage .csbadge{right:-.8rem;top:-4rem;width:8.4rem;height:8.4rem}
  .csstage .cscmt{position:relative;right:auto;top:auto;grid-column:1/-1;max-width:none;margin-top:1rem;rotate:-1deg}
  .csstage .cscur{display:none}
  .csnums{width:auto;margin:4rem 1.6rem 0;grid-template-columns:1fr 1fr}
  .csnums div{padding:1.8rem 1.6rem;border-bottom:.1rem solid var(--line)}
  .csnums div:nth-child(2n){border-right:0}.csnums div:nth-child(n+3){border-bottom:0}
  .csnums b{font-size:4.2rem}
  .csnums span{font-size:1.25rem}
}
/* case study sections */
.cssec{position:relative;isolation:isolate;overflow-x:clip;overflow-y:visible;padding:10rem 0}
.cswrap2{width:120rem;margin:0 auto}
.cs2col{display:grid;grid-template-columns:52rem 1fr;gap:8rem;align-items:start}
.cshead h2{font-variation-settings:"wdth" 62,"wght" 900;text-transform:uppercase;font-size:6.4rem;line-height:.92;margin-top:1rem}
.cssub{font-size:1.75rem;line-height:1.6;color:var(--ink2);max-width:66rem;margin-top:2rem}
.csbody p{font-size:1.75rem;line-height:1.65;color:var(--ink2)}
.csbody p+p{margin-top:1.4rem}
.csbody{padding-top:3.4rem}
.csarc{position:absolute;left:-12rem;right:-12rem;top:-7rem;height:14rem;z-index:-1;background:inherit;border-radius:50% 50% 0 0/100% 100% 0 0;box-shadow:0 -.25rem 0 var(--ink)}
/* the brief: launch timeline */
.csbrief{padding-top:4rem}
.cstl{width:120rem;margin:5rem auto 0;background:#fff;border:.18rem solid var(--ink);border-radius:1.6rem;box-shadow:.5rem .5rem 0 var(--ink);padding:2rem 2.4rem 2.6rem}
.tlh{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-bottom:1.4rem;border-bottom:.1rem solid var(--line)}
.tlh .wcap{display:flex;align-items:center;gap:.5rem;font-size:1.2rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tlh .wcap svg{width:1.1rem;height:1.1rem;color:var(--sel)}
.tlnote{font-size:1.3rem;font-weight:750;background:var(--hi);padding:.4rem .9rem;border-radius:.6rem}
.tlgrid{position:relative;--lab:17rem;margin-top:1rem}
.tldays,.tlrows li{display:grid;grid-template-columns:var(--lab) repeat(13,1fr);align-items:center}
.tldays span{font-size:1.15rem;font-weight:700;color:var(--muted);text-align:center;padding:.6rem 0;border-left:.1rem dashed var(--line)}
.tlrows{list-style:none}
.tlrows li{min-height:4.4rem;border-top:.1rem solid var(--line)}
.tlrows li b{font-size:1.4rem;font-weight:750}
.tlrows .bar{grid-column:calc(var(--s) + 2)/calc(var(--e) + 2);height:3rem;margin:0 .3rem;border-radius:.8rem;background:var(--c);display:flex;align-items:center;padding:0 1rem;box-shadow:inset 0 0 0 .1rem rgba(18,18,16,.12)}
.tlrows .bar em{font-style:normal;font-size:1.1rem;font-weight:750;color:var(--t);white-space:nowrap}
.tlmark{position:absolute;top:0;bottom:-.6rem;width:0;border-left:.2rem solid #E5301C}
.tlmark span{position:absolute;bottom:-3rem;right:-.1rem;white-space:nowrap;font-size:1.15rem;font-weight:800;background:#E5301C;color:#fff;padding:.3rem .8rem;border-radius:.5rem}
.tlcart{left:calc(var(--lab) + (100% - var(--lab)) * 11.45 / 13)}
.tlpotd{left:calc(var(--lab) + (100% - var(--lab)) * 12.5 / 13);bottom:-3.8rem;border-left-color:var(--ink);border-left-style:dashed}
.tlpotd span{background:var(--ink);color:var(--hi);bottom:-3.2rem}
.tlpotd .tlt{position:absolute;top:-1.4rem;left:-1.5rem;width:3rem;height:3rem;padding:.5rem;border-radius:50%;background:var(--ink);color:var(--hi)}
.cstl .tlgrid{margin-bottom:8.2rem}
/* the funnel: two lanes */
.csfunnel{background:var(--hi);background-image:radial-gradient(rgba(18,18,16,.13) .11rem,transparent .14rem);background-size:2.4rem 2.4rem}
.csfunnel .hl::before{background:#fff}
.lane{position:relative;margin-top:4.4rem}
.lbuy{margin-top:6.4rem}
.lanelab{display:inline-block;font-size:1.15rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:#fff;padding:.5rem 1rem;border-radius:.6rem;margin-bottom:1.4rem}
.fpartner{display:grid;grid-template-columns:30rem 1fr;gap:2.6rem;align-items:center;width:78rem;background:#fff;border:.18rem solid var(--ink);border-radius:1.6rem;box-shadow:.5rem .5rem 0 var(--ink);padding:1.4rem}
.fpartner b,.fcard b{display:block;font-size:1.9rem;font-weight:850}
.fpartner p{font-size:1.5rem;line-height:1.55;color:var(--ink2);margin:.6rem 0 1.2rem}
.fth{border-radius:1rem;overflow:hidden;box-shadow:0 0 0 .1rem rgba(18,18,16,.15)}
.fth img{display:block;width:100%;height:auto}
.fchip{display:inline-block;font-size:1.2rem;font-weight:800;padding:.4rem .9rem;border-radius:.6rem;background:rgba(18,18,16,.07);margin:0 .6rem .4rem 0}
.fsend{position:absolute;left:32rem;bottom:-4.6rem;z-index:2;font-size:1.4rem;font-weight:800;background:#fff;border:.18rem solid var(--ink);border-radius:1rem;padding:.6rem 1.2rem;rotate:-3deg}
.fflow{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:2.2rem;counter-reset:f}
.fcard{position:relative;background:#fff;border:.18rem solid var(--ink);border-radius:1.4rem;box-shadow:.4rem .4rem 0 var(--ink);padding:1rem 1rem 1.4rem}
.fcard:not(:last-child)::after{content:"→";position:absolute;right:-1.9rem;top:5.4rem;font-size:1.8rem;font-weight:900;z-index:2}
.fcard .fth{margin-bottom:1.2rem;border-top:.4rem solid var(--c)}
.fcard b{font-size:1.6rem;padding:0 .4rem}
.fcard p{font-size:1.3rem;line-height:1.5;color:var(--ink2);margin:.5rem .4rem 1rem;min-height:7.8rem}
.fcard .fchip{margin-left:.4rem}
.fcard.hot .fchip{background:var(--ink);color:var(--hi)}
.fnum{position:absolute;left:-1rem;top:-1rem;z-index:2;width:3rem;height:3rem;border-radius:50%;background:var(--ink);color:#fff;font-size:1.3rem;font-weight:850;display:flex;align-items:center;justify-content:center}
/* the design system: colour worlds */
.csworlds{background:var(--ink);background-image:radial-gradient(rgba(255,255,255,.08) .11rem,transparent .14rem);background-size:2.4rem 2.4rem;color:#fff}
.csworlds .csarc{box-shadow:0 -.25rem 0 var(--hi)}
.csworlds .flabel{color:var(--hi)}
.csworlds .hl{color:var(--ink)}
.csworlds .cssub{color:rgba(255,255,255,.72)}
.wrules{list-style:none;display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:3.4rem}
.wrules li{display:flex;align-items:center;gap:1rem;font-size:1.5rem;font-weight:700;background:rgba(255,255,255,.07);border:.1rem solid rgba(255,255,255,.16);border-radius:1rem;padding:1rem 1.6rem 1rem 1rem}
.wrules span{width:2.6rem;height:2.6rem;border-radius:50%;background:var(--hi);color:var(--ink);font-size:1.3rem;font-weight:850;display:flex;align-items:center;justify-content:center;flex:none}
.cswgrid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:3rem 2.6rem;margin-top:4.4rem}
.wld{background:#1C1C19;border:.1rem solid rgba(255,255,255,.14);border-radius:1.6rem;padding:1.2rem 1.2rem 1.6rem;transition:translate .25s var(--ease)}
.wld:hover{translate:0 -.4rem}
.wth{border-radius:1rem;overflow:hidden}
.wth img{display:block;width:100%;height:auto}
.wtop{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:1.4rem .4rem 1.2rem}
.wtop b{font-size:1.7rem;font-weight:850}
.wtop small{font-size:1.2rem;color:rgba(255,255,255,.55);font-weight:600}
.sws{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:0 .4rem}
.sws li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.7rem;align-items:center}
.sws i{grid-row:1/3;width:2.8rem;height:2.8rem;border-radius:.8rem;box-shadow:inset 0 0 0 .1rem rgba(255,255,255,.25)}
.sws span{font-size:1.05rem;font-weight:700;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.06em}
.sws code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:1.15rem;color:#fff}
@media (max-width:1099px) and (min-width:700px){
  .cswrap2,.cstl{width:auto;margin-left:6.4rem;margin-right:6.4rem}
  .cs2col{grid-template-columns:1fr;gap:2rem}
  .fflow{grid-template-columns:repeat(3,1fr)}
  .fcard:nth-child(3n)::after{display:none}
  .fpartner{width:auto}.fsend{position:static;display:inline-block;margin-top:1.6rem}
  .cswgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:699px){
  .cssec{padding:7rem 0}
  .cswrap2{width:auto;padding:0 1.6rem}
  .cs2col{grid-template-columns:1fr;gap:1.6rem}
  .csbody{padding-top:0}
  .cshead h2{font-size:4.2rem}
  .cssub,.csbody p{font-size:1.55rem}
  .cstl{width:auto;margin:3.6rem 1.6rem 0;padding:1.4rem 1.4rem 2rem}
  .tlh{flex-direction:column;align-items:flex-start;gap:.8rem}
  .tlgrid{--lab:0rem}
  .tldays{grid-template-columns:repeat(13,1fr)}.tldays b{display:none}.tldays span{font-size:.95rem;padding:.4rem 0}
  .tlrows li{grid-template-columns:repeat(13,1fr);row-gap:.6rem;padding:1rem 0;min-height:0}
  .tlrows li b{grid-column:1/-1;display:flex;flex-direction:column;gap:.2rem;font-size:1.3rem}
  .tlrows li b::after{content:attr(data-d);font-weight:600;color:var(--muted);font-size:1.15rem}
  .tlrows .bar{grid-column:calc(var(--s) + 1)/calc(var(--e) + 1);height:1.2rem;margin:0 .1rem;padding:0}
  .tlrows .bar em{display:none}
  .tlmark span{font-size:1.05rem}
  .fpartner{width:auto;grid-template-columns:1fr;gap:1.2rem}
  .fsend{position:static;display:inline-block;margin-top:1.6rem}
  .fflow{grid-template-columns:1fr 1fr;gap:2rem 1.4rem}
  .fcard::after{display:none}
  .fcard p{min-height:0}
  .wrules{flex-direction:column}
  .cswgrid{grid-template-columns:1fr;gap:2rem}
}
/* case study: section by section */
.csmap{background:#DCEAFF;background-image:radial-gradient(rgba(18,18,16,.13) .11rem,transparent .14rem);background-size:2.4rem 2.4rem}
.csmap .hl::before{background:#fff}
.qpath{list-style:none;position:relative;display:grid;gap:7rem;margin-top:8rem}
.qpath::before{content:"";position:absolute;left:50%;top:-3rem;bottom:0;border-left:.25rem dashed rgba(18,18,16,.28);z-index:-1}
.qbuyer{position:absolute;left:50%;top:-6.2rem;translate:-50% 0}
.qbuyer span{display:inline-block;background:var(--pink);color:#fff;font-size:1.25rem;font-weight:800;padding:.45rem 1rem;border-radius:.4rem 1rem 1rem 1rem;box-shadow:0 .6rem 1.2rem -.4rem rgba(255,61,139,.6)}
.qbuyer span::after{content:" ↓"}
.qrow{display:grid;grid-template-columns:62rem 1fr;gap:6rem;align-items:center}
.qrow.flip{grid-template-columns:1fr 62rem}
.qrow.flip .qshot{order:2}
.qshot{position:relative;background:#fff;border:.18rem solid var(--ink);border-radius:1.4rem;box-shadow:.5rem .5rem 0 var(--ink);padding:3.6rem 1rem 1rem}
.qshot img{display:block;width:100%;height:auto;border-radius:.8rem;box-shadow:0 0 0 .1rem rgba(18,18,16,.1)}
.qtag{position:absolute;left:1.3rem;top:1rem;display:flex;align-items:center;gap:.5rem;font-size:1.2rem;font-weight:750;color:var(--muted)}
.qtag svg{width:1rem;height:1rem;color:var(--sel)}
.qnum{display:inline-flex;align-items:center;justify-content:center;width:4.4rem;height:4.4rem;border-radius:50%;background:var(--ink);color:var(--hi);font-size:1.5rem;font-weight:850}
.qask{font-variation-settings:"wdth" 62,"wght" 900;font-size:4.2rem;line-height:1.02;margin:1.6rem 0}
.qans{font-size:1.65rem;line-height:1.6;color:var(--ink2)}
.qans b{color:var(--ink)}
@media (max-width:1099px) and (min-width:700px){
  .qrow,.qrow.flip{grid-template-columns:1fr 1fr;gap:3.4rem}
  .qask{font-size:3.4rem}
}
@media (max-width:699px){
  .qpath{gap:4.4rem;margin-top:3rem}
  .qpath::before{display:none}
  .qbuyer{position:static;translate:none;margin-bottom:-2.4rem}
  .qrow,.qrow.flip{grid-template-columns:1fr;gap:1.8rem}
  .qrow.flip .qshot{order:0}
  .qshot{padding-top:3.2rem}
  .qask{font-size:3rem}
  .qans{font-size:1.5rem}
}
/* case study: FAQ + closing call to action */
.csfaq{background:var(--paper);background-image:radial-gradient(rgba(18,18,16,.13) .11rem,transparent .14rem);background-size:2.4rem 2.4rem}
.csfaq .qwrap{padding:0}
.csfaq h2{font-variation-settings:"wdth" 62,"wght" 900;text-transform:uppercase;font-size:6rem;line-height:.92;margin-top:1rem}
.csfaq .wsub{font-size:1.6rem;line-height:1.55;color:var(--ink2);margin-top:1.6rem}
.csvid{max-width:24rem;margin:2.6rem 0 3rem}
.csvid .wcap{display:flex;align-items:center;gap:.5rem;font-size:1.2rem;font-weight:700;color:var(--muted);margin-bottom:.8rem;white-space:normal}
.csvid .wcap svg{width:1rem;height:1rem;color:var(--sel)}
.cscta{background:var(--hi);background-image:radial-gradient(rgba(18,18,16,.13) .11rem,transparent .14rem);background-size:2.4rem 2.4rem;padding-bottom:16rem}
.cscta .hl::before{background:#fff}
.csctagrid{display:grid;grid-template-columns:1fr 44rem;gap:8rem;align-items:center}
.csctah{font-variation-settings:"wdth" 62,"wght" 900;text-transform:uppercase;font-size:6.4rem;line-height:.92;margin-top:1rem}
.cscta .cbtns{margin-top:3rem}
.csnext{display:block;background:#fff;border:.2rem solid var(--ink);border-radius:1.8rem;box-shadow:.6rem .6rem 0 var(--ink);padding:1.2rem 1.2rem 2rem;color:var(--ink);text-decoration:none;rotate:1.5deg;transition:translate .2s var(--ease),box-shadow .2s var(--ease)}
.csnext:hover{translate:-.2rem -.3rem;box-shadow:.8rem .9rem 0 var(--ink)}
.csnl{display:flex;align-items:center;gap:.5rem;font-size:1.15rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:.4rem .4rem 1rem}
.csnl svg{width:1rem;height:1rem;color:var(--sel)}
.csnimg{display:block;border-radius:1rem;overflow:hidden;box-shadow:0 0 0 .1rem rgba(18,18,16,.12)}
.csnimg img{display:block;width:100%;height:auto}
.csnext b{display:block;font-size:2.2rem;font-weight:850;margin:1.6rem .6rem .2rem}
.csnh{display:block;font-size:1.5rem;color:var(--ink2);margin:0 .6rem}
.csngo{display:inline-block;margin:1.4rem .6rem 0;font-size:1.45rem;font-weight:800;border-bottom:.25rem solid var(--ink)}
.csall{width:120rem;margin:6rem auto 0;font-size:1.5rem;font-weight:800}
.csall a{color:var(--ink)}
@media (max-width:1099px) and (min-width:700px){
  .csctagrid{grid-template-columns:1fr 36rem;gap:4rem}
  .csfaq .qwrap{padding:0 6rem}
  .csall{width:auto;margin-left:6.4rem}
}
@media (max-width:699px){
  .csctagrid{grid-template-columns:1fr;gap:4rem}
  .csfaq .qwrap{padding:0 1.6rem}
  .csfaq h2{font-size:4.4rem}
  .csctah{font-size:4.2rem}
  .csnext{rotate:0deg}
  .csall{width:auto;padding:0 1.6rem;margin-top:4rem}
  .cscta{padding-bottom:12rem}
}
/* case studies hub */
.cshub{padding-bottom:12rem}
.cshh1{font-variation-settings:"wdth" 62,"wght" 900;text-transform:uppercase;font-size:8rem;line-height:.9;margin:1.2rem 0 2.4rem;max-width:90rem}
.cshlead{max-width:72rem}
.cshgrid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:3.6rem 3rem;margin-top:6rem}
.cshcard{display:flex;flex-direction:column;height:100%;background:#fff;border:.18rem solid var(--ink);border-radius:1.6rem;box-shadow:.5rem .5rem 0 var(--ink);padding:1.1rem 1.1rem 1.8rem;color:var(--ink);text-decoration:none;transition:translate .2s var(--ease),box-shadow .2s var(--ease)}
.cshcard:hover{translate:-.2rem -.3rem;box-shadow:.7rem .8rem 0 var(--ink)}
.cshimg{display:block;border-radius:1rem;overflow:hidden;box-shadow:0 0 0 .1rem rgba(18,18,16,.12)}
.cshimg img{display:block;width:100%;height:auto;transition:scale .6s var(--ease)}
.cshcard:hover .cshimg img{scale:1.04}
.cshtop{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.6rem .6rem 0}
.cshtop b{font-size:2rem;font-weight:850}
.cshtype{flex:none;font-size:1.05rem;font-weight:750;color:var(--sel);background:rgba(13,153,255,.1);border-radius:.6rem;padding:.4rem .8rem}
.cshres{display:block;margin:1.2rem .6rem 0;font-size:1.4rem;font-weight:600;color:var(--ink2)}
.cshres strong{font-variation-settings:"wdth" 62,"wght" 900;font-size:4.2rem;line-height:1;color:var(--ink);background:linear-gradient(transparent 58%,var(--hi) 58%);padding:0 .2rem;margin-right:.4rem}
.cshline{display:block;margin:.8rem .6rem 0;font-size:1.45rem;line-height:1.5;color:var(--ink2)}
.cshfoot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:auto .6rem 0;padding-top:1.6rem}
.cshfoot>span:first-child{font-size:1.2rem;font-weight:700;color:var(--muted)}
.cshgo{font-size:1.4rem;font-weight:800;border-bottom:.25rem solid var(--ink)}
@media (max-width:1099px) and (min-width:700px){
  .cshgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:699px){
  .cshh1{font-size:5rem}
  .cshgrid{grid-template-columns:1fr;gap:2.4rem;margin-top:4rem}
  .cshres strong{font-size:3.6rem}
}
/* 404 page */
.lost{background-image:radial-gradient(rgba(18,18,16,.1) .11rem,transparent .14rem);background-size:2.4rem 2.4rem;padding:4rem 0 16rem}
.lostwrap{width:120rem;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.lostart{margin:4rem 0 3rem}
.lostsel{position:relative;display:inline-block;padding:1rem 4rem;border:.2rem dashed var(--sel);border-radius:1rem}
.lostsel b{font-variation-settings:"wdth" 62,"wght" 900;font-size:22rem;line-height:.9;color:transparent;-webkit-text-stroke:.25rem var(--ink)}
.lostsel i{position:absolute;width:1.2rem;height:1.2rem;background:#fff;border:.2rem solid var(--sel);border-radius:.2rem}
.lostsel i:nth-of-type(1){left:-.7rem;top:-.7rem}.lostsel i:nth-of-type(2){right:-.7rem;top:-.7rem}.lostsel i:nth-of-type(3){left:-.7rem;bottom:-.7rem}.lostsel i:nth-of-type(4){right:-.7rem;bottom:-.7rem}
.lostsel em{position:absolute;left:50%;bottom:-3.2rem;translate:-50% 0;font-style:normal;background:var(--sel);color:#fff;font-size:1.15rem;font-weight:700;padding:.3rem .9rem;border-radius:.5rem;white-space:nowrap}
.lost h1{font-variation-settings:"wdth" 62,"wght" 900;text-transform:uppercase;font-size:6.4rem;line-height:.92;margin-top:2rem}
.lost p{font-size:1.75rem;line-height:1.6;color:var(--ink2);max-width:56rem;margin-top:2rem}
.lostbtns{display:flex;align-items:center;gap:2.6rem;margin-top:3.4rem;flex-wrap:wrap;justify-content:center}
@media (max-width:699px){
  .lostwrap{width:auto;padding:0 1.6rem}
  .lostsel b{font-size:13rem}
  .lost h1{font-size:4.4rem}
  .lost p{font-size:1.55rem}
}