:root{--mk-ar:1.7361}
@font-face{font-family:"ITF";src:local("Arial");size-adjust:93%;ascent-override:100%;descent-override:26%;line-gap-override:0%}
/* v6 — white paper, one grotesk, one 3D object, one orange. */
:root{
  --bg:#F4F4F5; --bg-2:#FFFFFF; --ink:#111112; --ink-2:#3B3B3E; --muted:#6B6B71; --line:rgba(17,17,18,.1);
  --dark:#151516; --dark-2:#1F1F21; --dark-ink:#F3F3F2; --dark-muted:#86868B; --dark-line:rgba(243,243,242,.1);
  --acc:#FF5A1F; --blue:#0D99FF; --ok:#2FB36B;
  --e:cubic-bezier(.22,1,.36,1); --e2:cubic-bezier(.76,0,.24,1);
  --g:clamp(16px,2.2vw,32px);
  --f:"Inter Tight","ITF","Helvetica Neue",Arial,sans-serif; --hand2:"Caveat","Segoe Print","Bradley Hand",cursive; --mono:"Geist Mono",ui-monospace,Menlo,monospace; --hand:"Caveat",cursive;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
html.lock,html.lock body{overflow:hidden}
body{margin:0;background:#0A0A0B;color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.45;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img{display:block;max-width:100%}
::selection{background:var(--acc);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lab{font-size:13px;letter-spacing:-.005em;color:var(--muted)}
.lab.p::before{content:"( "}.lab.p::after{content:" )"}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.site{position:relative;z-index:2;background:var(--bg);transform-origin:50% 100%;will-change:transform;overflow-x:clip}

/* letter roll links (lukaszydek) */
.roll{display:inline-flex;overflow:hidden;line-height:1.2;vertical-align:bottom}
.roll>span{display:inline-block;white-space:pre;transition:transform .5s var(--e);transition-delay:calc(var(--i)*14ms)}
.roll>span::after{content:attr(data-c);display:block;position:absolute;transform:translateY(0)}
.roll>span{position:relative}
.roll>span::after{top:100%;left:0}
a:hover .roll>span,button:hover .roll>span,.roll:hover>span{transform:translateY(-100%)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;border-radius:999px;font-size:16px;font-weight:500;letter-spacing:-.02em;white-space:nowrap;transition:transform .45s var(--e),background .3s,color .3s,box-shadow .3s}
.btn:hover{transform:translateY(-2px)}
.btn .dot{width:7px;height:7px;border-radius:50%;background:var(--acc);transition:transform .45s var(--e)}
.btn:hover .dot{transform:scale(1.9)}
.btn-ink{background:var(--ink);color:#fff}
.btn-line{box-shadow:inset 0 0 0 1px var(--line)}
.btn-line:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.btn svg{width:15px;height:15px}
.btn-light{background:var(--dark-ink);color:var(--dark)}

/* ================= HEADER ================= */
.hdr{position:fixed;z-index:80;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:calc(16px + env(safe-area-inset-top,0px)) var(--g) 12px;font-size:15px;letter-spacing:-.01em;pointer-events:none;transition:color .3s}
.hdr>*{pointer-events:auto}
.hdr::before{content:"";position:absolute;inset:0 0 -22px 0;z-index:-1;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);-webkit-mask:linear-gradient(#000 40%,transparent);mask:linear-gradient(#000 40%,transparent);opacity:0;transition:opacity .4s;pointer-events:none}
body.scrolled .hdr::before{opacity:1}
body.menu-open .hdr::before{display:none}
.brand{display:flex;gap:10px;align-items:baseline;white-space:nowrap}
.brand b{font-weight:500}
.brand span{color:var(--muted)}
.hnav{display:flex;gap:26px}
.hnav a{color:var(--ink)}
.hr{justify-self:end;display:flex;align-items:center;gap:8px}
.lang{display:flex;padding:3px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);background:rgba(255,255,255,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lang button{height:30px;padding:0 9px;border-radius:999px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.lang button[aria-pressed="true"]{background:var(--ink);color:#fff}
.hdr .btn{height:40px;padding:0 16px;font-size:14px}
.burger{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;position:relative;transition:transform .4s var(--e),background .3s}
.burger:hover{transform:scale(1.08)}
.burger::before,.burger::after{content:"";position:absolute;left:12px;right:12px;height:1.5px;background:currentColor;transition:transform .45s var(--e)}
.burger::before{top:16px}.burger::after{top:22px}
body.menu-open .burger{background:var(--dark-ink);color:var(--dark)}
body.menu-open .burger::before{transform:translateY(3px) rotate(45deg)}
body.menu-open .burger::after{transform:translateY(-3px) rotate(-45deg)}
body.menu-open .hdr{color:var(--dark-ink)}
body.menu-open .hnav,body.menu-open .hdr .btn,body.menu-open .lang{opacity:0;pointer-events:none}
body.menu-open .brand span{color:var(--dark-muted)}
.hnav,.hdr .btn,.lang{transition:opacity .3s}
body.on-dark .hdr{color:var(--dark-ink)}
body.on-dark .hnav a{color:var(--dark-ink)}
body.on-dark .brand span{color:var(--dark-muted)}
body.on-dark .hdr .btn-ink,body.on-dark .burger{background:var(--dark-ink);color:var(--dark)}
body.on-dark .lang{background:rgba(31,31,33,.6);box-shadow:inset 0 0 0 1px var(--dark-line)}
body.on-dark .lang button[aria-pressed="true"]{background:var(--dark-ink);color:var(--dark)}
body.on-dark .hdr::before{opacity:1;background:linear-gradient(rgba(7,7,8,.82),rgba(7,7,8,.35))}
@media (max-width:1000px){.hnav{display:none}.hdr{grid-template-columns:1fr auto}}
@media (max-width:640px){.brand span{display:none}.hdr .btn{display:none}}

/* intro: page rises in */
.hero .rise{animation:rise 1.1s var(--e) var(--d,0s) both}
@keyframes rise{from{opacity:.01;transform:translateY(28px)}}

/* ================= STORY (hero + design/code) with the sticky 3D layer ================= */
.story{position:relative;background:var(--bg)}
.gl{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;z-index:1;pointer-events:none}
.gl canvas{width:100%;height:100%;display:block}
.hero{position:relative;z-index:2;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:1fr auto;padding:calc(96px + env(safe-area-inset-top,0px)) var(--g) 0}
.h-lead{max-width:15.5em;font-size:clamp(30px,3.35vw,54px);line-height:1.08;letter-spacing:-.045em;font-weight:400;margin:0}
.h-lead span{color:var(--muted)}
.h-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(24px,3vw,40px)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(47,179,107,.5)}70%,100%{box-shadow:0 0 0 9px rgba(47,179,107,0)}}
.clock{font-variant-numeric:tabular-nums}
@media (max-width:860px){
  .hero{padding-top:calc(84px + env(safe-area-inset-top,0px))}
}

/* design + code (pinned) */
.dc{position:relative;z-index:2;height:430vh}
.dc-in{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.dc-w{position:absolute;font-weight:500;font-size:clamp(56px,10.5vw,190px);line-height:.8;letter-spacing:-.065em;margin:0;will-change:transform,opacity}
.dc-w.l{left:var(--g);top:calc(96px + 5vh)}
.dc-w.r{right:var(--g);bottom:calc(60px + 4vh)}
.dc-w.r small{margin:0 0 18px}
.dc-w.r{display:flex;flex-direction:column-reverse;align-items:flex-end}
.dc-w small{display:block;font-size:13px;letter-spacing:-.005em;font-weight:400;color:var(--muted);margin-top:18px}
.pick{position:absolute;left:50%;top:50%;width:min(600px,40vw);height:clamp(210px,28vh,270px);transform:translate(-50%,-50%);border-radius:28px;background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);box-shadow:inset 0 0 0 1px rgba(17,17,18,.07),0 30px 70px -30px rgba(17,17,18,.28);overflow:hidden;perspective:700px;opacity:0;will-change:opacity,transform}
.pick::before{content:"";position:absolute;left:14px;right:14px;top:50%;height:clamp(96px,12vh,118px);transform:translateY(-50%);border-radius:16px;background:#F0F0EF}
.dc-one{position:absolute;left:0;right:0;top:calc(50% + clamp(60px,10vh,110px));text-align:center;margin:0;font-weight:500;font-size:clamp(34px,4.4vw,76px);letter-spacing:-.055em;line-height:1;opacity:0;transform:translateY(20px);transition:opacity .6s var(--e),transform .8s var(--e)}
.dc-one b{font-weight:500}
.dc-one.on{opacity:1;transform:none}
.dc-one b{display:inline-block}
@media (max-width:860px){
  .dc-w.l{top:calc(84px + 3vh)}
  .dc-w.r{bottom:96px}
  .pick{width:calc(100% - 2*var(--g));top:62%}
  .dc-one{top:auto;bottom:22%}
}

/* ================= SELECTED PROJECTS (converging words, growing square) ================= */
.sel{position:relative;z-index:2;height:260vh;background:var(--dark);color:var(--dark-ink)}
.sel-in{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.sel-sq{position:absolute;left:50%;top:50%;width:100vw;height:100vh;height:100svh;transform:translate(-50%,-50%);clip-path:circle(var(--cr,15vmin) at 50% 50%);background:#232325}
.sel-sq img,.sel-sq video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--s,1.25));filter:brightness(var(--b,.55))}
.sel-w{position:absolute;top:50%;margin:0;font-weight:400;font-size:clamp(48px,7.6vw,138px);line-height:.9;letter-spacing:-.055em;transform:translateY(-50%);white-space:nowrap;will-change:transform}
.sel-w.l{right:50%}.sel-w.r{left:50%}

/* ================= PROCESS (simulated collaborators) ================= */
.proc{position:relative;z-index:2;background:var(--bg);padding:clamp(60px,6vw,100px) var(--g) clamp(90px,10vw,160px);max-width:1760px;margin:0 auto}
.p-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px;align-items:end;margin-bottom:clamp(28px,3vw,48px)}
.p-head h2{margin:0;font-weight:500;font-size:clamp(46px,6.2vw,112px);line-height:.9;letter-spacing:-.06em}
.p-head p{margin:0;justify-self:end;max-width:22em;color:var(--ink-2);font-size:clamp(16px,1.2vw,19px)}
.boards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.board{position:relative;border-radius:24px;padding:18px;display:flex;flex-direction:column;gap:14px;min-height:clamp(380px,34vw,520px)}
.board:nth-child(1){background:#E4EAF3;color:#23324A}
.board:nth-child(2){background:#FFE6DB;color:#5A2A12}
.board:nth-child(3){background:#E3EEE3;color:#233A26}
.board .bh{display:flex;justify-content:space-between}
.board .grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(34px,3vw,52px),1fr));gap:clamp(7px,.7vw,11px);align-content:start}
.board .grid i{aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,currentColor 22%,transparent);position:relative;display:grid;place-items:center;font-style:normal;font-size:clamp(12px,1vw,17px);font-weight:600}
.board .grid i.f{background:currentColor;box-shadow:none;animation:pop .45s cubic-bezier(.34,1.56,.64,1)}
.board .grid i.f::after{content:"";width:34%;height:18%;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.board .grid i.q{background:#2E86FF;box-shadow:none;color:#fff;animation:pop .45s cubic-bezier(.34,1.56,.64,1)}
.board .grid i.q::after{content:"?";border:0;width:auto;height:auto;transform:none}
.board .grid i.spin::before{content:"";position:absolute;inset:22%;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:rot .7s linear infinite}
@keyframes pop{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes rot{to{transform:rotate(360deg)}}
.board h3{margin:0;font-weight:500;font-size:clamp(22px,1.8vw,30px);letter-spacing:-.045em;line-height:1}
.board p{margin:6px 0 0;font-size:15px;line-height:1.35;opacity:.75;max-width:26em}
.pcur{position:absolute;left:0;top:0;z-index:5;pointer-events:none;display:flex;align-items:flex-start;gap:2px;transition:transform var(--t,1s) cubic-bezier(.65,0,.35,1)}
.pcur svg{width:18px;height:18px;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.pcur .who{margin-top:14px;display:grid;gap:3px;justify-items:start}
.pcur b{font-weight:500;font-size:12.5px;color:#fff;padding:3px 8px;border-radius:7px;white-space:nowrap}
.pcur span{font-family:var(--mono);font-size:10.5px;background:rgba(17,17,18,.86);color:#EDEDED;padding:3px 7px;border-radius:5px;white-space:nowrap;min-height:1.7em}
.pcur span:empty{display:none}
.pcur.click svg{transform:scale(.82);transition:transform .12s}
.procs{position:relative}
@media (max-width:900px){.boards{grid-template-columns:1fr}.board{min-height:300px}.p-head{grid-template-columns:1fr}.p-head p{justify-self:start}}

/* ================= FOR HR ================= */
.hr-s{position:relative;z-index:2;background:var(--bg);padding:clamp(90px,10vw,160px) var(--g) clamp(60px,6vw,100px)}
.hr-in{max-width:1760px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,90px);align-items:start}
.hr-in h2{margin:0;font-weight:500;font-size:clamp(40px,4.6vw,84px);line-height:.95;letter-spacing:-.06em;position:sticky;top:110px}
.hr-in h2 span{display:block;color:var(--muted);font-weight:400}
.facts{width:100%;border-collapse:collapse}
.facts th,.facts td{text-align:left;vertical-align:top;padding:16px 0;border-top:1px solid var(--line);font-size:clamp(16px,1.2vw,19px);letter-spacing:-.02em}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:1px solid var(--line)}
.facts th{font-weight:400;color:var(--muted);width:30%;padding-right:16px}
.facts td b{font-weight:500}
@media (max-width:900px){.hr-in{grid-template-columns:1fr}.hr-in h2{position:relative;top:0}}

/* ================= PROOF ================= */
.proof{position:relative;z-index:2;background:var(--bg);padding:clamp(90px,10vw,160px) var(--g);max-width:1760px;margin:0 auto}
.pr-line{position:relative;display:inline-block;font-weight:500;font-size:clamp(46px,8.2vw,150px);line-height:.95;letter-spacing:-.065em;margin:0}
.pr-line .hl{position:absolute;left:var(--hx,0);top:.08em;bottom:.02em;width:var(--hw,0);background:rgba(13,153,255,.18);z-index:-1;border-radius:4px}
.pr-line em{font-style:normal;color:var(--acc)}
.pr-cur{position:absolute;left:0;top:0;pointer-events:none;transition:transform .8s cubic-bezier(.65,0,.35,1)}
.pr-cur svg{width:20px;height:20px}
.pr-cur b{position:absolute;left:18px;top:18px;background:var(--blue);color:#fff;font-weight:500;font-size:12.5px;padding:3px 8px;border-radius:7px;white-space:nowrap;letter-spacing:-.01em}
.proof .more{display:inline-flex;margin-top:30px;gap:6px}

/* ================= FAQ ================= */
.faq{position:relative;z-index:2;background:var(--bg);padding:0 var(--g) clamp(90px,10vw,160px);max-width:1760px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px}
.faq h2{margin:0;font-weight:500;font-size:clamp(40px,4.6vw,80px);line-height:.92;letter-spacing:-.06em}
/* the heading stays with you while you read the answers, with a way to ask your own question */
.faq-h{position:sticky;top:110px;align-self:start;display:flex;flex-direction:column;align-items:flex-start}
.faq-s{margin:clamp(18px,1.8vw,28px) 0 0;max-width:19em;font-size:clamp(16px,1.25vw,20px);line-height:1.35;letter-spacing:-.02em;color:var(--muted)}
.faq-go{margin-top:18px;height:46px;padding:0 20px;font-size:15px}
.faq-go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--e)}
.faq-go:hover svg{transform:translateX(3px)}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa button{width:100%;display:flex;justify-content:space-between;gap:20px;align-items:center;text-align:left;padding:22px 0;font-size:clamp(19px,1.6vw,26px);letter-spacing:-.035em;line-height:1.15}
.qa .pm{width:40px;height:40px;border-radius:50%;background:var(--bg-2);flex:none;display:grid;place-items:center;transition:transform .4s var(--e),background .3s,color .3s}
.qa .pm svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.6}
.qa button[aria-expanded="true"] .pm{transform:rotate(45deg);background:var(--ink);color:#fff}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--e)}
.qa .ans>div{overflow:hidden}
.qa .ans p{margin:0;padding:0 60px 24px 0;color:var(--ink-2);max-width:40em}
.qa button[aria-expanded="true"]+.ans{grid-template-rows:1fr}
@media (max-width:860px){.faq{grid-template-columns:1fr}.faq-h{position:relative;top:0}.qa .ans p{padding-right:0}}
.shy{position:relative;z-index:2;background:var(--bg);text-align:center;padding:0 0 40px;margin:0}

/* ================= MENU (page becomes a tilted sheet) ================= */
.menu{position:fixed;inset:0;z-index:1;background:#000;color:var(--dark-ink);padding:calc(100px + env(safe-area-inset-top,0px)) var(--g) 24px;visibility:hidden}
body.menu-open .menu,body.menu-closing .menu{visibility:visible}
.menu-in{max-width:1760px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:start}
.m-links{list-style:none;margin:0;padding:0}
.m-links a{display:flex;align-items:baseline;gap:12px;font-weight:500;font-size:clamp(36px,4.4vw,72px);line-height:1.02;letter-spacing:-.055em;opacity:0;transform:translateY(22px);transition:opacity .5s var(--e),transform .5s var(--e),color .25s}
.m-links a small{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--dark-muted)}
.m-links a:hover{color:var(--acc)}
body.menu-open .m-links a{opacity:1;transform:none}
.m-side{display:grid;gap:20px;font-size:16px;opacity:0;transform:translateY(22px);transition:opacity .5s var(--e) .22s,transform .5s var(--e) .22s}
body.menu-open .m-side{opacity:1;transform:none}
.m-side b{display:block;font-weight:400;color:var(--dark-muted);font-size:13px;margin-bottom:4px}
.m-side a{display:block}
.m-side a:hover{color:var(--acc)}
body.menu-open .site,body.menu-closing .site{transition:transform .8s var(--e),border-radius .18s}
.ftag{position:fixed;z-index:3;left:4.5vw;top:28vh;display:flex;gap:8px;align-items:center;opacity:0;transition:opacity .4s .45s;pointer-events:none;font-family:var(--mono);font-size:10.5px}
.ftag span{background:var(--blue);color:#fff;padding:3px 7px;border-radius:4px}
.ftag em{font-style:normal;color:var(--blue)}
body.menu-open .ftag{opacity:1}
@media (max-width:760px){.menu-in{grid-template-columns:1fr}.ftag{display:none}}

/* ================= BRIEF MODAL ================= */
.modal{position:fixed;inset:0;z-index:120;display:grid;justify-items:end;visibility:hidden}
.modal.open{visibility:visible}
.modal-bg{position:absolute;inset:0;background:rgba(10,10,11,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .45s}
.modal.open .modal-bg{opacity:1}
.sheet{position:relative;width:min(620px,100%);height:100%;background:#fff;transform:translateX(100%);transition:transform .7s var(--e);overflow-y:auto;overscroll-behavior:contain;padding:calc(24px + env(safe-area-inset-top,0px)) clamp(18px,3vw,40px) calc(30px + env(safe-area-inset-bottom,0px))}
.modal.open .sheet{transform:none}
.sh-head{display:flex;justify-content:space-between;gap:16px;align-items:start;margin-bottom:26px}
.sh-head h2{margin:8px 0 0;font-weight:500;font-size:clamp(36px,3.6vw,52px);line-height:.95;letter-spacing:-.055em}
.x{width:44px;height:44px;border-radius:50%;background:var(--bg-2);display:grid;place-items:center;flex:none;transition:transform .4s var(--e)}
.x:hover{transform:rotate(90deg)}
.x svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.6}
form{display:grid;gap:22px}
.field{display:grid;gap:8px;border:0;margin:0;padding:0}
.field>label,.field legend{font-size:14px;color:var(--muted);padding:0}
input[type=text],input[type=email],textarea{width:100%;font:inherit;font-size:17px;color:var(--ink);background:var(--bg-2);border:1px solid transparent;border-radius:14px;padding:14px 16px;transition:border-color .2s,background .2s}
input:focus,textarea:focus{outline:none;border-color:var(--ink);background:#fff}
textarea{min-height:120px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.two{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative}
.chips input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.chips span{display:block;box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;padding:9px 15px;font-size:15px;transition:all .2s}
.chips input:checked+span{background:var(--ink);color:#fff;box-shadow:none}
.chips input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.err{color:#C2310B;font-size:14px;min-height:1em;margin:0}
.note-s{font-size:13.5px;color:var(--muted);margin:0}
.done{display:none;gap:16px}
.done.show{display:grid}
.done h3{font-weight:500;font-size:40px;line-height:.95;letter-spacing:-.05em;margin:0}
.done pre{white-space:pre-wrap;background:var(--bg-2);border-radius:14px;padding:16px;font-family:var(--mono);font-size:12.5px;line-height:1.6;margin:0;max-height:300px;overflow:auto}
.hp{position:absolute;left:-9999px}
.toast{position:fixed;left:50%;top:80px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px;font-size:14px;z-index:130}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .dc{height:auto}.dc-in{position:relative;height:auto;min-height:100svh}
  .sel{height:auto}.sel-in{position:relative;height:100svh}
}

.fbm{display:none}
body.no-gl .gl{display:none}
body.no-gl .fbm{display:block;position:absolute;right:calc(var(--g) + 4vw);top:24vh;width:min(34vw,460px);color:var(--ink)}
body.no-gl .fbm svg{width:100%;height:auto;display:block}
@media (max-width:860px){body.no-gl .fbm{position:relative;right:auto;top:auto;width:60vw;margin:40px auto}}


/* ================= v8 HERO: message → portal → name ================= */
.story{position:relative;z-index:2;background:var(--bg)}
.hero.pf{position:relative;z-index:auto;display:grid;grid-template-columns:minmax(0,.47fr) minmax(0,.53fr);grid-template-rows:minmax(0,1fr) auto;height:100vh;height:100svh;min-height:620px;padding:calc(94px + env(safe-area-inset-top,0px)) var(--g) 0;background:#070708;color:#EDEDEE;overflow:hidden}
.pf-cv{position:absolute;inset:0;z-index:0}
.pf-cv canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pf-top{position:relative;z-index:2;grid-column:1;grid-row:1;align-self:start;padding-top:clamp(4px,1vh,16px)}
.hero.pf .h-lead{font-size:clamp(30px,3.15vw,56px);line-height:1.06;letter-spacing:-.045em;font-weight:400;margin:0;max-width:15.5em;color:#8A8A90}
.hero.pf .h-lead .hl2{color:#F3F3F2}
.hero.pf .h-ctas{margin-top:clamp(24px,3vw,40px)}
.hero.pf .btn-line{color:#EDEDEE;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.hero.pf .btn-line:hover{box-shadow:inset 0 0 0 1px #fff}
.pf-wm{position:relative;z-index:2;grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:clamp(18px,2.4vw,40px);padding:clamp(10px,1.4vh,18px) 0 clamp(12px,2vh,22px);border-top:1px solid rgba(255,255,255,.08)}
.wm-mark{width:12vw;aspect-ratio:var(--mk-ar);position:relative;flex:none}
.wm-tw{min-width:0}
.wm-t{margin:0;font-weight:500;font-size:var(--wmf,14vw);line-height:.78;letter-spacing:-.065em;white-space:nowrap;color:#F3F3F2;padding-top:.05em}
.wm-t sup{font-size:.26em;vertical-align:top;position:relative;top:.16em;margin-left:.06em;font-weight:400;color:#7C7C82}
.wm-mark .fbm{display:none}
body.no-gl .wm-mark .fbm{display:block;position:static;width:100%;color:#EDEDEE}
body.no-pf .hero.pf{background:#070708 radial-gradient(50% 40% at 46% 50%,#26262b,transparent 70%)}
@media (max-width:860px){
  .hero.pf{padding-top:calc(80px + env(safe-area-inset-top,0px))}
  .hero.pf{grid-template-columns:1fr;grid-template-rows:auto minmax(420px,1fr) auto}
  .pf-wm{grid-row:3}
  .hero.pf .h-lead{font-size:clamp(28px,7.6vw,40px)}
  .hero.pf .btn{height:46px;padding:0 18px;font-size:15px}
}

/* ================= DESIGNED BY HAND × BUILT WITH AI: rolling deck ================= */
.dc{height:540vh}
.dc-w{font-size:clamp(48px,7.6vw,140px);line-height:.86}
.dc-w.l{left:var(--g);top:calc(96px + 4vh)}
.dc-w.r{right:var(--g);bottom:calc(60px + 4vh);text-align:right}
.deck{position:absolute;left:50%;top:50%;width:clamp(270px,24vw,380px);height:clamp(320px,42vh,410px);transform:translate(-50%,-50%);perspective:1400px;opacity:0;pointer-events:none}
.drum{position:absolute;inset:0;transform-style:preserve-3d}
.dk{position:absolute;inset:0;border-radius:26px;transform-origin:50% 50%;background:#121213;color:#F3F3F2;padding:clamp(20px,1.8vw,28px);display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 40px 80px -40px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.06);backface-visibility:hidden;will-change:transform,opacity,filter}
.dk.o{background:var(--acc);color:#fff}
.dk-k{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.dk-big{font-weight:500;font-size:clamp(76px,7.2vw,130px);line-height:.8;letter-spacing:-.07em;margin-top:auto;margin-bottom:auto}
.dk-big svg{width:.78em;height:.78em;display:block;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dk h3{margin:0;font-weight:500;font-size:clamp(23px,1.9vw,32px);line-height:1;letter-spacing:-.045em}
.dk p{margin:10px 0 0;font-size:14.5px;line-height:1.38;color:rgba(243,243,242,.62)}
.dk.o p{color:rgba(255,255,255,.86)}
@media (max-width:860px){ .deck{top:55%;width:min(330px,calc(100% - 2*var(--g)));height:min(360px,46vh)} .dc-w{font-size:clamp(38px,11vw,64px)} }

/* ================= WORK: full-bleed slides, the room takes the slide's colour ================= */
.work{position:relative;z-index:2;background:var(--wbg,#241f38);color:var(--dark-ink);padding:clamp(90px,9vw,140px) var(--g) clamp(60px,6vw,100px)}
.w-head{max-width:1760px;margin:0 auto clamp(26px,3vw,44px)}
.w-head h2{margin:0;font-weight:400;font-size:clamp(28px,2.6vw,44px);letter-spacing:-.045em;line-height:1.05;max-width:18em}
.w-head h2 span{color:rgba(243,243,242,.52)}
.cards{list-style:none;margin:0 auto;padding:0;max-width:1760px}
.case{position:sticky;top:calc(clamp(76px,9vh,100px) + var(--i,0)*14px);height:min(calc(100svh - clamp(76px,9vh,100px) - 90px),860px);margin-bottom:9vh}
.case:last-child{margin-bottom:0}
.case-in{position:relative;display:block;height:100%;border-radius:32px;overflow:hidden;background:var(--c);isolation:isolate;transform-origin:50% 0;will-change:transform;box-shadow:0 -30px 70px -34px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.07)}

.c-glow{position:absolute;inset:0;z-index:0;background:radial-gradient(55% 65% at 70% 38%,color-mix(in srgb,var(--g2) 42%,transparent),transparent 72%),radial-gradient(40% 40% at 95% 95%,color-mix(in srgb,var(--g2) 22%,transparent),transparent 70%)}
.c-art{position:absolute;inset:0;z-index:1;perspective:2200px;overflow:hidden}
.mk{position:absolute;left:40%;top:16%;width:74%;aspect-ratio:1200/776;border-radius:16px;background:#0b0b0c;overflow:hidden;transform:rotateX(calc(14deg + var(--ry,0deg))) rotateY(calc(-18deg + var(--rx,0deg))) rotateZ(4deg) translateY(var(--py,0px));transform-origin:0% 50%;transition:transform .9s var(--e);box-shadow:0 70px 120px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.14),0 0 120px -20px color-mix(in srgb,var(--g2) 60%,transparent)}
.mk-bar{height:26px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#161618;border-bottom:1px solid rgba(255,255,255,.06)}
.mk-bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22)}
.mk-bar em{margin-left:14px;font-style:normal;font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.4);letter-spacing:.03em}
.mk img{width:100%;height:calc(100% - 26px);object-fit:cover;object-position:top}
.case-in:hover .mk{transform:rotateX(calc(8deg + var(--ry,0deg))) rotateY(calc(-11deg + var(--rx,0deg))) rotateZ(2deg) translate3d(-2%,-2%,0)}

.c-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,var(--c) 0%,color-mix(in srgb,var(--c) 90%,transparent) 24%,transparent 58%),linear-gradient(0deg,color-mix(in srgb,var(--c) 75%,transparent) 0%,transparent 42%)}
.c-num{position:absolute;z-index:3;left:clamp(22px,3vw,52px);top:clamp(20px,2.6vw,40px);font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:rgba(243,243,242,.62)}
.c-txt{position:absolute;z-index:3;left:clamp(22px,3vw,52px);bottom:clamp(22px,3vw,48px);width:min(600px,46%);display:grid;gap:16px;justify-items:start}
.c-txt h3{margin:0;font-weight:500;font-size:clamp(46px,5.6vw,100px);line-height:.86;letter-spacing:-.06em;color:#fff}
.c-txt p{margin:0;font-size:clamp(17px,1.35vw,22px);line-height:1.28;letter-spacing:-.02em;color:rgba(255,255,255,.8);max-width:22em}
.c-tags{display:flex;flex-wrap:wrap;gap:6px}
.c-tags span{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#EDEDEE;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.c-tags span.role{background:#fff;color:#111;box-shadow:none}
@media (max-width:860px){
  .case{position:relative;top:0;height:auto;margin-bottom:14px}
  .case-in{height:auto;min-height:560px;border-radius:24px;display:flex;flex-direction:column;justify-content:flex-end}
  .c-art{bottom:auto;height:62%}
  .mk{left:14%;top:14%;width:112%}
  .c-shade{background:linear-gradient(0deg,var(--c) 42%,color-mix(in srgb,var(--c) 60%,transparent) 58%,transparent 78%)}
  .c-txt{position:relative;left:auto;bottom:auto;width:auto;padding:22px}
  .c-txt h3{font-size:clamp(40px,12vw,58px)}
}

/* ================= PARTNER statement ================= */
.svc{position:relative;z-index:2;background:var(--bg);padding:clamp(110px,11vw,190px) var(--g) clamp(90px,10vw,160px);max-width:1760px;margin:0 auto}
.st{margin:0;font-weight:500;font-size:clamp(34px,4.6vw,84px);line-height:1.05;letter-spacing:-.052em;max-width:16.5em}
.st .w{color:#D3D3D5;transition:color .4s var(--e)}
.st .w.on{color:var(--ink)}
.chip{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.1em;height:.8em;min-width:1.5em;padding:0 .16em;border-radius:999px;background:var(--bg-2);margin:0 .04em;overflow:hidden;font-style:normal;opacity:0;transform:scale(.3) rotate(-10deg);transition:transform .8s cubic-bezier(.34,1.56,.64,1),opacity .35s}
.chip.on{opacity:1;transform:none}
.ch-f b{width:.5em;height:.5em;border-radius:50%;margin-left:-.13em;box-shadow:0 0 0 .05em var(--bg-2)}
.ch-f b:first-child{margin-left:0;background:#FF5A1F}.ch-f b:nth-child(2){background:#0D99FF}.ch-f b:nth-child(3){background:#111}
.ch-m{background:#111;gap:.07em;align-items:flex-end;padding:.15em .26em}
.ch-m b{width:.09em;border-radius:.03em;background:#fff;height:20%;animation:bars 2.4s var(--e) infinite alternate}
.ch-m b:nth-child(2){animation-delay:.2s}.ch-m b:nth-child(3){animation-delay:.4s}.ch-m b:nth-child(4){animation-delay:.6s;background:var(--acc)}
@keyframes bars{0%{height:18%}100%{height:calc(38% + var(--n,0)*16%)}}
.ch-m b:nth-child(1){--n:0}.ch-m b:nth-child(2){--n:1}.ch-m b:nth-child(3){--n:2}.ch-m b:nth-child(4){--n:3.5}
.ch-p{width:2em;padding:0}
.ch-p img{width:100%;height:100%;object-fit:cover;object-position:top left}
.ch-g{background:var(--acc);width:1.9em}
.ch-g svg{width:1.25em;height:.55em;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ch-g svg path{stroke-dasharray:80;stroke-dashoffset:80;transition:stroke-dashoffset 1.3s var(--e) .25s}
.ch-g.on svg path{stroke-dashoffset:0}
.st s{text-decoration:none;position:relative;display:inline-block}
.st s::after{content:"";position:absolute;left:-.05em;right:-.05em;top:54%;height:.075em;border-radius:.04em;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e) .15s}
.st s.on::after{transform:scaleX(1)}
.svc ul{list-style:none;margin:0;padding:0}
.svc li{font-size:clamp(30px,3.5vw,62px);line-height:1.1;letter-spacing:-.05em;color:#CFCFD1;transition:color .35s var(--e);cursor:default;display:flex;align-items:baseline;gap:.3em}
.svc li small{font-size:13px;letter-spacing:0;color:var(--muted);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .4s var(--e)}
.svc li:hover,.svc li.on{color:var(--ink)}
.svc li:hover small{opacity:1;transform:none}
@media (max-width:860px){.svc li{color:var(--ink)}}

/* ================= RESUME with a trust badge ================= */
.cv8{position:relative;max-width:1760px;margin:clamp(40px,5vw,72px) auto 0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(18px,3vw,52px);padding:clamp(16px,1.8vw,26px) clamp(22px,3vw,40px) clamp(16px,1.8vw,26px) clamp(16px,1.8vw,26px);border-radius:34px;background:#111112;color:#fff;overflow:hidden;isolation:isolate}
.cv8::before{content:"";position:absolute;inset:0;background:var(--acc);transform:translateY(101%);transition:transform .7s var(--e);z-index:-1}
.cv8:hover::before{transform:none}
.cv8::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:28%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent);animation:sweep 5s var(--e) infinite;z-index:-1;pointer-events:none}
@keyframes sweep{0%{left:-40%}55%,100%{left:125%}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(-8%)}50%{transform:translateY(10%)}}
@media (max-width:900px){.cv8{grid-template-columns:auto minmax(0,1fr);border-radius:26px}}

/* ================= REVIEWS ================= */
.pr-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:18px}
.rv-nav{display:flex;gap:8px;flex:none}
.rv-b{width:54px;height:54px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;transition:background .3s,color .3s,transform .4s var(--e)}
.rv-b:hover{background:var(--ink);color:#fff}
.rv-b svg{width:16px;height:16px}
.rv-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;margin:clamp(30px,4vw,56px) calc(-1*var(--g)) 0;padding:0 var(--g) 10px;scrollbar-width:none}
.rv-track::-webkit-scrollbar{display:none}
.rv{flex:0 0 clamp(290px,31vw,480px);scroll-snap-align:start;border-radius:28px;background:var(--bg-2);padding:clamp(22px,2vw,32px);display:flex;flex-direction:column;gap:22px;min-height:clamp(320px,26vw,410px)}
.rv:nth-child(3n+2){background:#111112;color:#F3F3F2}
.rv-stars{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.rv-stars b{color:var(--acc);font-family:var(--f);font-size:16px;letter-spacing:.14em}
.rv q{quotes:none;flex:1;font-size:clamp(19px,1.5vw,25px);line-height:1.26;letter-spacing:-.03em}
.rv.ph q{color:var(--muted)}
.rv-meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-size:15px;border-top:1px solid var(--line);padding-top:14px}
.rv:nth-child(3n+2) .rv-meta{border-color:var(--dark-line)}
.rv-meta span:last-child{color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.proof .more{display:inline-flex;margin-top:28px;gap:6px}

/* ================= FOOTER ================= */
.foot{position:relative;z-index:1;background:#0A0A0B;color:var(--dark-ink);overflow:hidden;--p:1}
.f-in{position:relative;z-index:2;max-width:1880px;margin:0 auto;padding:clamp(56px,7vw,110px) var(--g) 0;transform:translateY(calc((1 - var(--p))*-110px))}
.f-row{display:flex;justify-content:space-between;align-items:center;gap:24px}
.f-nav{display:flex;gap:clamp(20px,3.2vw,56px);font-size:clamp(24px,2.3vw,40px);letter-spacing:-.04em}
.f-nav a:hover{color:var(--acc)}
.f-status{display:flex;gap:14px;align-items:center;padding:12px 22px 12px 18px;border-radius:999px;background:rgba(255,255,255,.07);font-size:14px;line-height:1.3}
.f-status b{display:block;font-weight:500}
.f-status span{color:var(--dark-muted)}
.st-dot{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none;animation:ping 2.2s infinite}
.f-sub{margin:clamp(70px,9vw,150px) 0 0;text-align:center;color:var(--dark-muted);font-size:clamp(18px,1.7vw,28px);letter-spacing:-.03em}
.f-sub #tw{color:var(--dark-ink)}
.f-mailw{margin-top:clamp(8px,1.2vw,18px);padding:0 14vw;text-align:center}
.f-mail{display:inline-block;font-weight:500;font-size:var(--wmf,9vw);line-height:1.02;letter-spacing:-.055em;white-space:nowrap;transition:color .35s}
.f-mail:hover{color:var(--acc)}
.f-ctaw{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:clamp(26px,3vw,44px)}
.f-cta{position:relative;height:clamp(64px,5.4vw,84px);padding:0 clamp(56px,5.4vw,90px);border-radius:999px;background:#F4F4F3;color:#111;font-size:clamp(17px,1.35vw,22px);font-weight:500;letter-spacing:-.03em;overflow:hidden;isolation:isolate;transition:transform .5s var(--e)}
.f-cta::before,.f-cta::after{content:"";position:absolute;top:50%;height:190%;aspect-ratio:1;border-radius:50%;z-index:-1;filter:blur(7px);background:radial-gradient(circle,#140600 0 18%,#6b1c00 30%,#FF5A1F 44%,rgba(255,150,100,.55) 56%,transparent 68%);transition:transform .9s var(--e)}
.f-cta::before{left:0;transform:translate(-62%,-50%)}
.f-cta::after{right:0;transform:translate(62%,-50%)}
.f-cta:hover{transform:scale(1.03)}
.f-cta:hover::before{transform:translate(-48%,-50%)}
.f-cta:hover::after{transform:translate(48%,-50%)}
.f-copy{height:clamp(64px,5.4vw,84px);padding:0 30px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);font-size:15px;color:var(--dark-muted);transition:color .3s,box-shadow .3s}
.f-copy:hover{color:#fff;box-shadow:inset 0 0 0 1px #fff}
.f-bot{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:24px;margin-top:clamp(70px,8vw,130px);padding-bottom:10px;font-size:14px;color:var(--dark-muted)}
.f-legal{display:grid;gap:6px}
.f-soc{list-style:none;margin:0;padding:0;display:flex;gap:clamp(18px,2.6vw,44px)}
.f-soc a{display:flex;align-items:center;font-size:clamp(20px,1.8vw,30px);color:#F3F3F2;letter-spacing:-.035em;transition:color .3s}
.f-soc i{display:grid;place-items:center;width:0;height:1.25em;border-radius:.32em;background:var(--c);color:#fff;font-style:normal;font-family:var(--mono);font-size:.46em;font-weight:500;letter-spacing:0;overflow:hidden;transform:scale(0) rotate(-25deg);transition:width .45s var(--e),margin .45s var(--e),transform .55s cubic-bezier(.34,1.56,.64,1)}
.f-soc a:hover i,.f-soc a:focus-visible i{width:1.25em;margin-right:.32em;transform:none}
.f-made{justify-self:end;display:flex;gap:14px;align-items:center;line-height:1.35}
.f-mk svg{width:54px;height:auto;display:block;color:#F3F3F2}
.f-studio{position:relative;margin:clamp(-60px,-4vw,-20px) 0 0;z-index:1}
.f-studio img{display:block;width:100%;height:auto;aspect-ratio:2560/1086;object-fit:cover}
.f-studio::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(#0A0A0B 0%,rgba(10,10,11,.55) 16%,rgba(10,10,11,0) 38%,rgba(10,10,11,0) 55%,rgba(10,10,11,.7) 80%,#0A0A0B 100%)}
.f-studio figcaption{position:absolute;z-index:2;right:var(--g);top:30%;max-width:22em;text-align:right;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:rgba(243,243,242,.5)}
.f-wm{position:relative;z-index:3;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:clamp(14px,1.8vw,30px);padding:0 var(--g) calc(20px + env(safe-area-inset-bottom,0px));margin-top:clamp(-170px,-11.5vw,-50px)}
.f-wm-mk svg{width:clamp(70px,12.5vw,240px);height:auto;display:block;color:#F3F3F2}
.f-wm-tw{min-width:0}
.f-wm p{margin:0;font-weight:500;font-size:var(--wmf,14vw);line-height:.78;letter-spacing:-.065em;white-space:nowrap;color:#F3F3F2}
@media (max-width:860px){
  .f-row{flex-direction:column;align-items:flex-start}
  .f-nav{flex-wrap:wrap;gap:8px 22px;font-size:26px}
  .f-mailw{padding:0}
  .f-ctaw{flex-direction:column;align-items:stretch}
  .f-cta,.f-copy{height:62px}
  .f-bot{grid-template-columns:1fr;justify-items:start;gap:26px}
  .f-soc{flex-wrap:wrap;gap:10px 22px}
  .f-made{justify-self:start}
  .f-studio img{aspect-ratio:1100/897}
  .f-studio figcaption{top:auto;bottom:34%;left:var(--g);right:auto;text-align:left}
  .f-wm{margin-top:-40px}
}

.wm-t,.f-wm p{display:inline-block}
.rv-track{scroll-padding-inline:var(--g)}
@media (max-width:860px){.hero.pf{height:auto;min-height:100svh;grid-template-rows:auto minmax(130px,1fr) auto}}

/* ================= v9 refinements ================= */
.case-in::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:4;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 22%)}
.case-dim{position:absolute;inset:0;z-index:5;background:#000;opacity:var(--dim,0);pointer-events:none;border-radius:inherit}
.mk::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.1),transparent 30%);pointer-events:none}

/* services: simple statement left, a live list right */
.svc{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px}
.svc-l p{margin:0;max-width:22em;font-size:clamp(17px,1.25vw,20px);line-height:1.35;letter-spacing:-.02em;position:sticky;top:120px}
.svl{list-style:none;margin:0;padding:0;counter-reset:sv}
.svl li{position:relative;display:grid;grid-template-columns:3.4em minmax(0,1fr);align-items:center;padding:.1em 0;cursor:default;font-size:17px;color:inherit}
.sv-n{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:#C9C9CC;transition:color .4s;align-self:center}
.sv-r{display:flex;align-items:center;flex-wrap:nowrap;gap:0 .28em;min-width:0;white-space:nowrap;font-size:clamp(32px,3.9vw,70px);line-height:1.06;letter-spacing:-.05em;color:#D0D0D2;transition:color .45s var(--e)}
.svl li.on .sv-r{color:var(--ink)}
.svl li.on .sv-n{color:var(--acc)}
@media (max-width:860px){.sv-r{white-space:normal;flex-wrap:wrap}}
@media (max-width:860px){.svc{grid-template-columns:1fr}.svc-l p{position:relative;top:0}.svl li{grid-template-columns:2.4em minmax(0,1fr)}}

/* resume: badge + words */
.cv8{grid-template-columns:auto minmax(0,1fr) auto}
@media (max-width:900px){.cv8{grid-template-columns:auto minmax(0,1fr)}}

/* v1 cursor: a Figma pointer with a name tag */
.cur,.cur-tag{position:fixed;left:0;top:0;z-index:200;pointer-events:none;display:none}
body.has-cursor .cur,body.has-cursor .cur-tag{display:block}
body.has-cursor,body.has-cursor a,body.has-cursor button,body.has-cursor label{cursor:none}
body.has-cursor input,body.has-cursor textarea{cursor:text}
.cur svg{width:20px;height:20px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.cur-tag{background:var(--blue);color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.03em;padding:4px 8px;border-radius:7px;white-space:nowrap;transition:padding .25s var(--e),font-size .25s var(--e),background .3s}
.cur-tag.big{padding:8px 12px;font-size:12.5px}
.cur-tag.acc{background:var(--acc)}

/* footer wordmark with the logomark at cap height */
.f-wm-mk svg{width:100%;height:auto}
.f-studio img{aspect-ratio:1916/821}
@media (max-width:860px){.f-studio img{aspect-ratio:1149/821}}

.f-studio figcaption{top:16%;left:50%;right:auto;transform:translateX(-50%);text-align:center}
@media (max-width:860px){.f-studio figcaption{top:auto;bottom:30%;left:var(--g);transform:none;text-align:left}}

/* ================= v9 ================= */
html{scrollbar-gutter:stable}
/* header brand arrives from the 3D lockup */
.bl{display:inline-block;width:0;height:0;vertical-align:baseline}
.brand{transition:opacity .35s}
body.brand-off .brand{opacity:0;pointer-events:none}
/* hero: no rule line, the lockup is rendered in 3D (DOM text kept for SEO / fallback) */
.pf-wm{border-top:0!important}
body.gl3d .pf-wm .wm-t{color:transparent}
/* glass buttons with embers */
.gbtn{position:relative;display:inline-flex;align-items:center;gap:12px;height:60px;padding:0 34px;border-radius:999px;font-size:17px;font-weight:500;letter-spacing:-.02em;white-space:nowrap;color:#111;background:rgba(247,247,246,.84);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.08),0 14px 34px -14px rgba(255,90,31,.55);overflow:hidden;isolation:isolate;transition:transform .55s var(--e),box-shadow .5s}
.gbtn::before,.gbtn::after{content:"";position:absolute;top:50%;height:210%;aspect-ratio:1;border-radius:50%;z-index:-1;filter:blur(8px);background:radial-gradient(circle,#1a0700 0 15%,#7a2200 27%,#FF5A1F 41%,rgba(255,165,120,.5) 54%,transparent 67%);transition:opacity .5s}
.gbtn::before{left:0;animation:emL 5.5s ease-in-out infinite}
.gbtn::after{right:0;animation:emR 5.5s ease-in-out infinite -2.75s}
@keyframes emL{0%,100%{transform:translate(-66%,-50%) scale(1)}50%{transform:translate(-56%,-50%) scale(1.08)}}
@keyframes emR{0%,100%{transform:translate(66%,-50%) scale(1)}50%{transform:translate(56%,-50%) scale(1.08)}}
.gbtn .gs{position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;overflow:hidden}
.gbtn .gs::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-18deg);animation:gsheen 4.8s var(--e) infinite}
@keyframes gsheen{0%,55%{left:-60%}100%{left:130%}}
.gbtn svg{width:15px;height:15px}
.gbtn:hover{transform:translateY(-2px) scale(1.02);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.08),0 20px 44px -14px rgba(255,90,31,.75)}
.gbtn:hover::before{animation-duration:2.2s}.gbtn:hover::after{animation-duration:2.2s}
.gbtn.ghost{color:#F3F3F2;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.18),0 10px 30px -18px rgba(0,0,0,.6)}
.gbtn.ghost::before,.gbtn.ghost::after{opacity:0}
.gbtn.ghost .gs::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent)}
.gbtn.ghost:hover{background:rgba(255,255,255,.12)}
.gbtn.ghost:hover::before,.gbtn.ghost:hover::after{opacity:.55}
.gbtn.ink{color:#fff;background:rgba(17,17,18,.92);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 40px -16px rgba(255,90,31,.6)}
.gbtn.ink .gs::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent)}
.gbtn.xl{height:clamp(74px,7vw,110px);padding:0 clamp(48px,5vw,84px);font-size:clamp(22px,2.2vw,36px);letter-spacing:-.04em;gap:16px}
.gbtn.xl svg{width:.8em;height:.8em}
.hero.pf .h-ctas{gap:12px}
@media (max-width:860px){.gbtn{height:52px;padding:0 24px;font-size:15.5px}}
.f-cta .gs{position:absolute;inset:0;border-radius:inherit;z-index:-1;overflow:hidden;pointer-events:none}
.f-cta .gs::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.8),transparent);transform:skewX(-18deg);animation:gsheen 5.2s var(--e) infinite}
.f-cta::before{animation:emL 6s ease-in-out infinite}.f-cta::after{animation:emR 6s ease-in-out infinite -3s}
.dc-one{transition:opacity .6s var(--e),transform .8s var(--e)}
/* the next section rolls over the end of the story */
.sel{margin-top:-88vh;margin-top:-88svh;z-index:3;border-radius:34px 34px 0 0;box-shadow:0 -40px 90px -30px rgba(0,0,0,.45)}
.sel-in{border-radius:inherit}
@media (prefers-reduced-motion:reduce){.sel{margin-top:0}}

/* menu: links in a row or two, like the footer */
.m-links{display:flex;flex-wrap:wrap;gap:6px clamp(22px,3vw,52px);align-content:start}
.m-links a{display:inline-flex;font-weight:400;font-size:clamp(30px,3.4vw,58px);line-height:1.15;letter-spacing:-.045em}
body:not(.menu-open) .ftag{transition:opacity .12s 0s}
body:not(.menu-open) .m-links a,body:not(.menu-open) .m-side{transition-delay:0s!important;transition-duration:.2s}

/* work head: statement + live index */
.w-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;max-width:1760px;margin:0 auto clamp(30px,3.4vw,54px)}
.w-head h2{font-weight:500;font-size:clamp(40px,4.8vw,88px);line-height:.95;letter-spacing:-.058em;max-width:12em}
.w-head h2 span{display:block;margin-top:.35em;font-weight:400;font-size:.36em;line-height:1.2;letter-spacing:-.02em;color:rgba(243,243,242,.55);max-width:22em}
.w-idx{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:15px;min-width:220px}
.w-idx a{display:flex;gap:14px;align-items:baseline;padding:5px 12px;border-radius:10px;color:rgba(243,243,242,.5);transition:color .35s,background .35s}
.w-idx a small{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;opacity:.8}
.w-idx a:hover{color:#fff}
.w-idx a.on{color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.w-idx a.on small{color:var(--acc);opacity:1}
@media (max-width:860px){.w-head{grid-template-columns:1fr}.w-idx{display:none}}

/* work cases: centred content, big glass CTA, smoother stack */
.case-in{transition:transform .25s linear}
.c-txt{top:50%;bottom:auto;transform:translateY(-50%);gap:18px}
.c-txt .c-go3{margin-top:10px}
.c-go3{height:64px;padding:0 10px 0 30px;gap:16px;font-size:18px;color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.28),0 20px 40px -20px rgba(0,0,0,.6)}
.c-go3::before,.c-go3::after{opacity:0}
.c-go3 b{width:46px;height:46px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font-weight:400;font-size:18px;transition:transform .5s var(--e),background .3s,color .3s}
.c-go3 .gs::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.2),transparent)}
.case-in:hover .c-go3{background:rgba(255,255,255,.16)}
.case-in:hover .c-go3::before,.case-in:hover .c-go3::after{opacity:.7}
.case-in:hover .c-go3 b{transform:rotate(45deg);background:var(--acc);color:#fff}
.c-tags span{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.12)}
@media (max-width:860px){.c-txt{top:auto;transform:none}.c-go3{height:54px;font-size:16px}}

/* services: Figma-style selection travels down the list */
.svl{position:relative}
.svl li{grid-template-columns:3.4em minmax(0,1fr);padding:0;align-items:start}
.sv-n{padding-top:1.6em}
.sv-r{position:relative;display:block;white-space:normal;padding:.08em 0}
.sv-t{position:relative;display:inline-block}
.sv-box{position:absolute;inset:-.08em -.22em -.02em -.22em;border:1.5px solid var(--blue);opacity:0;transform:scale(.985);transition:opacity .35s,transform .5s var(--e);pointer-events:none}
.sv-box i{position:absolute;width:9px;height:9px;background:#fff;border:1.5px solid var(--blue)}
.sv-box i:nth-child(1){left:-5px;top:-5px}.sv-box i:nth-child(2){right:-5px;top:-5px}.sv-box i:nth-child(3){left:-5px;bottom:-5px}.sv-box i:nth-child(4){right:-5px;bottom:-5px}
.sv-box em{position:absolute;left:-1.5px;bottom:100%;margin-bottom:6px;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.03em;background:var(--blue);color:#fff;padding:3px 7px;border-radius:5px;white-space:nowrap}
.sv-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--e)}
.sv-more>div{overflow:hidden}
.sv-more p{margin:14px 0 12px;font-size:clamp(16px,1.2vw,19px);line-height:1.4;letter-spacing:-.015em;color:var(--ink-2);max-width:34em}
.sv-ch{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:22px}
.sv-ch span{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--bg-2);color:var(--ink-2)}
.svl li.on .sv-box{opacity:1;transform:none}
.svl li.on .sv-more{grid-template-rows:1fr}
.svl .sv-cur{position:absolute;display:flex;padding:0;left:0;top:0;z-index:4;pointer-events:none;display:flex;align-items:flex-start;gap:2px;transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .4s;opacity:0}
.sv-cur svg{width:20px;height:20px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.sv-cur b{margin-top:16px;font-weight:500;font-size:12.5px;background:var(--acc);color:#fff;padding:3px 8px;border-radius:7px;white-space:nowrap}
.svl.live .sv-cur{opacity:1}

/* resume: one button, that's it */
.cv9{max-width:1760px;margin:clamp(40px,5vw,72px) auto 0;display:flex}
.cv8{display:none}

/* footer: studio through a breathing fish-eye, doodles on top */
.st-wrap{position:relative;width:100%;aspect-ratio:1916/821;overflow:hidden}
.st-wrap img,.st-wrap canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.st-wrap canvas{opacity:0;transition:opacity .6s}
.st-wrap.lens-on img{opacity:0}.st-wrap.lens-on canvas{opacity:1}
.f-studio img{aspect-ratio:auto}
.f-studio figcaption{display:none}
.doodles{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.dd text{font-family:var(--hand2);font-size:64px;font-weight:600;fill:#fff;opacity:0;transition:opacity .6s}
.dd path{fill:none;stroke:#fff;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240}
.dd path+path{stroke-dasharray:60;stroke-dashoffset:60}
.doodles.on .dd text{opacity:1}
.doodles.on .dd path{animation:ddraw 1.1s var(--e) forwards}
.doodles.on .dd path+path{animation:ddraw .45s var(--e) forwards}
.doodles.on .d1 text{transition-delay:.1s}.doodles.on .d1 path{animation-delay:.3s}.doodles.on .d1 path+path{animation-delay:1.2s}
.doodles.on .d2 text{transition-delay:.7s}.doodles.on .d2 path{animation-delay:.9s}.doodles.on .d2 path+path{animation-delay:1.8s}
.doodles.on .d3 text{transition-delay:1.3s}.doodles.on .d3 path{animation-delay:1.5s}.doodles.on .d3 path+path{animation-delay:2.4s}
@keyframes ddraw{to{stroke-dashoffset:0}}
.dd{animation:wob 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.d2{animation-delay:-1.3s}.d3{animation-delay:-2.6s}
@keyframes wob{0%,100%{transform:rotate(-1.2deg) translateY(0)}50%{transform:rotate(1.2deg) translateY(-4px)}}
@media (max-width:760px){.st-wrap{aspect-ratio:16/10}.dd text{font-size:84px}.dd path{stroke-width:6}}

/* social icons: the real marks */
.f-soc i{width:0}
.f-soc i svg{width:56%;height:56%;display:block}
.f-soc a:hover i,.f-soc a:focus-visible i{width:1.25em}

/* lenis */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-horizontal]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
/* one continuous surface: colour follows the section */
.work,.svc,.proc,.hr-s,.proof,.faq{background:transparent!important}
.work{background:transparent}
.site.flow-dark .svc{--ink:#F3F3F2;--ink-2:#C9C9CD;--muted:#8B8B90;--line:rgba(255,255,255,.14);--bg-2:rgba(255,255,255,.08);color:#F3F3F2}
.site.flow-dark .svc .sv-r{color:#56565c}
.sv-n{align-self:start!important}
/* fallback lockup while 3D loads */
body:not(.gl3d):not(.no-gl) .wm-mark .fbm{display:block;color:#E9E9EB}
.pf-wm .wm-t{transition:color .5s}
/* initial size close to the fitted one (less layout shift) */
.pf-wm .wm-t{font-size:calc((100vw - 2*var(--g) - 40px)/7.05)}
.wm-mark .fbm svg{width:100%;height:auto;display:block}
.site.flow-dark .svc .svl li.on .sv-r{color:#F3F3F2}
/* skip layout/paint of far-away sections until they're near (perf) */

/* ================= v10 ================= */
/* buttons: monochrome glass, an orbiting rim light and a dot-matrix scan — no embers */
@property --ga{syntax:'<angle>';inherits:false;initial-value:0deg}
.gbtn,.f-cta{background:linear-gradient(180deg,#FDFDFD,#E3E3E5);color:#0E0E0F;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.14),0 1px 2px rgba(0,0,0,.25),0 18px 40px -18px rgba(0,0,0,.75)}
.gbtn::before,.gbtn::after,.f-cta::before,.f-cta::after{animation:none;filter:none;transform:none;top:0;left:0;right:0;bottom:0;height:auto;aspect-ratio:auto;border-radius:inherit;background:none}
.gbtn::before,.f-cta::before{content:"";position:absolute;inset:0;z-index:2;padding:1.5px;pointer-events:none;opacity:1;
  background:conic-gradient(from var(--ga),transparent 0 62%,rgba(0,0,0,.55) 72%,rgba(255,255,255,1) 78%,rgba(0,0,0,.35) 84%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:gorb 4.2s linear infinite}
.gbtn::after,.f-cta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.9;
  background:radial-gradient(circle,rgba(0,0,0,.26) .8px,transparent 1.25px) 0 0/5px 5px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 45%,#000 55%,transparent) -60% 0/42% 100% no-repeat;mask:linear-gradient(90deg,transparent,#000 45%,#000 55%,transparent) -60% 0/42% 100% no-repeat;
  animation:gscan 3.8s cubic-bezier(.65,0,.35,1) infinite}
@keyframes gorb{to{--ga:360deg}}
@keyframes gscan{0%{-webkit-mask-position:-60% 0;mask-position:-60% 0}70%,100%{-webkit-mask-position:160% 0;mask-position:160% 0}}
.gbtn:hover,.f-cta:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.14),0 1px 2px rgba(0,0,0,.25),0 26px 50px -18px rgba(0,0,0,.85)}
.gbtn:hover::after,.f-cta:hover::after{-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-position:0 0;mask-position:0 0;animation:gdots .9s steps(4) infinite;opacity:.55}
@keyframes gdots{to{background-position:5px 0}}
.gbtn:hover::before,.f-cta:hover::before{animation-duration:1.4s}
.gbtn .gs::after,.f-cta .gs::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent)}
.gbtn .ga,.f-cta .ga{display:grid;place-items:center;width:28px;height:28px;margin-right:-18px;border-radius:50%;background:#0E0E0F;color:#fff;font-style:normal;font-size:14px;transition:transform .55s var(--e)}
.gbtn:hover .ga,.f-cta:hover .ga{transform:rotate(-45deg) scale(1.08)}
.gbtn.ghost{background:rgba(255,255,255,.06);color:#F3F3F2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.14),0 18px 40px -18px rgba(0,0,0,.6)}
.gbtn.ghost::before{background:conic-gradient(from var(--ga),transparent 0 66%,rgba(255,255,255,.9) 78%,transparent 90%);animation-duration:5.5s;animation-direction:reverse}
.gbtn.ghost::after{background-image:radial-gradient(circle,rgba(255,255,255,.2) .8px,transparent 1.25px)}
.gbtn.ghost:hover{background:rgba(255,255,255,.1)}
.gbtn.ghost:hover::before,.gbtn.ghost:hover::after{opacity:1}
.gbtn.ink{background:linear-gradient(180deg,#1B1B1D,#0C0C0D);color:#fff}
.gbtn.ink::after{background-image:radial-gradient(circle,rgba(255,255,255,.22) .8px,transparent 1.25px)}
.c-go3{background:rgba(255,255,255,.1);color:#fff}
.c-go3::before{opacity:.55!important;background:conic-gradient(from var(--ga),transparent 0 66%,rgba(255,255,255,.9) 78%,transparent 90%)}
.c-go3::after{background-image:radial-gradient(circle,rgba(255,255,255,.18) .8px,transparent 1.25px)}
.case-in:hover .c-go3::before{opacity:1!important}
.f-cta{display:inline-flex;align-items:center;gap:14px;isolation:isolate}
@media (prefers-reduced-motion:reduce){.gbtn::before,.gbtn::after,.f-cta::before,.f-cta::after{animation:none}}
/* header: the nav starts where the logo will be, then slides to the centre as the name flies in */
.hnav{transform:translateX(var(--nx,0px));will-change:transform}
/* cursor tag inside the hero explains the idea */
.cur-tag.zone{background:#F3F3F2;color:#0E0E0F}
.cur-tag.zone.p{background:var(--acc);color:#fff}
/* ================= intro: the logo is drawn in vector, then lands in the hero ================= */
.intro{display:none}
.intro-on .intro,.intro-land .intro{display:block;position:fixed;inset:0;z-index:300;pointer-events:none}
.in-bg{position:absolute;inset:0;background:#070708;transition:opacity .8s var(--e) .1s}
.in-bg::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1.4px) 0 0/22px 22px;-webkit-mask:radial-gradient(60% 55% at 50% 50%,#000,transparent);mask:radial-gradient(60% 55% at 50% 50%,#000,transparent)}
.in-stage{--iw:min(44vw,560px);position:absolute;left:50%;top:50%;width:var(--iw);aspect-ratio:var(--mk-ar);margin:calc(var(--iw)/var(--mk-ar)/-2) 0 0 calc(var(--iw)/-2);transform-origin:50% 50%;transition:transform .95s cubic-bezier(.7,0,.2,1),opacity .35s}
.in-mark{width:100%;height:100%;display:block;overflow:visible}
.in-mark path{fill:#E9E9EB;fill-opacity:0;stroke:#F3F3F2;stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:inDraw 1.25s cubic-bezier(.65,0,.35,1) .15s forwards,inFill .5s var(--e) 1.3s forwards}
.in-mark .p2{animation-delay:.45s,1.42s}
@keyframes inDraw{to{stroke-dashoffset:0}}
@keyframes inFill{to{fill-opacity:1;stroke-opacity:0}}
.in-pts rect{fill:#070708;stroke:var(--blue);stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:0;animation:inPt .25s var(--e) calc(.15s + var(--k)*1.35s) forwards,inOut .3s 1.55s forwards}
@keyframes inPt{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
@keyframes inOut{to{opacity:0}}
.in-pts rect{transform-box:fill-box;transform-origin:center}
.in-sel{position:absolute;inset:-12px;border:1px solid var(--blue);opacity:0;transform:scale(.97);animation:inSel .45s var(--e) 1.35s forwards}
.in-sel i{position:absolute;width:9px;height:9px;background:#fff;border:1px solid var(--blue)}
.in-sel i:nth-child(1){left:-5px;top:-5px}.in-sel i:nth-child(2){right:-5px;top:-5px}.in-sel i:nth-child(3){left:-5px;bottom:-5px}.in-sel i:nth-child(4){right:-5px;bottom:-5px}
.in-sel em{position:absolute;left:50%;top:100%;margin-top:10px;transform:translateX(-50%);font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.03em;background:var(--blue);color:#fff;padding:3px 7px;border-radius:5px;white-space:nowrap}
@keyframes inSel{to{opacity:1;transform:none}}
.in-meta{position:absolute;left:var(--g);right:var(--g);bottom:calc(22px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(243,243,242,.5);transition:opacity .4s}
.intro-on .hero .rise{animation:none;opacity:.01}
.intro-on .hdr{opacity:0}
.hdr{transition:color .3s,opacity .8s var(--e)}
.intro-land .in-bg,.intro-land .in-meta{opacity:0}
.intro-land .in-sel{transition:opacity .25s;opacity:0!important;animation:none}
.intro.gone .in-stage{opacity:0;transition:opacity .12s linear}
.intro-on body{overflow:hidden}

/* ================= one surface, two tones: colour changes are opacity-only (no repaint glitches) ================= */
.site{background:#0A0A0B}
.story{background:#070708}
.gl-bg{position:absolute;inset:0;background:var(--bg);opacity:0;will-change:opacity}
.gl canvas{position:relative}
.sel{background:#0A0A0B}
.flow{position:relative;background:var(--bg)}
.flow-bg{position:sticky;top:0;height:100vh;height:100lvh;margin-bottom:-100vh;margin-bottom:-100lvh;z-index:0;pointer-events:none}
.flow-bg i{position:absolute;inset:0;background:#0A0A0B;opacity:1;will-change:opacity}
.flow>section{position:relative;z-index:1}
.svc,.proc,.hr-s,.proof,.faq{transition:color .5s var(--e)}

/* works: one huge word, assembled from the numeral field */
.w-head{display:block;max-width:1760px;margin:0 auto clamp(44px,5vw,84px)}
.w-word{position:relative;margin:0;line-height:0;cursor:default;max-width:none!important;font-size:12px}
.w-word canvas{display:block;width:100%;height:clamp(80px,20vw,400px)}
.w-word sup{position:absolute;right:0;top:-28px;font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.08em;line-height:1;color:rgba(243,243,242,.5)}
.c-glow{opacity:.7}

/* selected projects: a coded field around the reel */
.sel-cv{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.sel-w{z-index:2}.sel-sq{z-index:1}

/* services: a live screen + the list that drives it */
.svc{display:block!important;max-width:1760px;margin:0 auto;padding:clamp(110px,11vw,190px) var(--g) clamp(90px,10vw,160px)}
.svc-top{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:22px 60px;align-items:end;margin-bottom:clamp(44px,5vw,84px)}
.svc-k{grid-column:1/-1;margin:0;color:var(--muted)}
.svc-top h2{margin:0;font-weight:500;font-size:clamp(36px,4.3vw,78px);line-height:.98;letter-spacing:-.055em}
.svc-top h2 span{color:var(--muted);transition:color .5s}
.svc-p{margin:0;font-size:clamp(16px,1.15vw,19px);line-height:1.42;letter-spacing:-.015em;color:var(--ink-2);max-width:27em}
.svc-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,72px);align-items:start}
.scr{position:sticky;top:clamp(86px,12vh,124px)}
.scr-in{position:relative;border-radius:26px;background:#0E0E10;color:#F3F3F2;overflow:hidden;box-shadow:0 50px 90px -46px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.07)}
.scr-in::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 20%)}
.scr-bar{display:flex;gap:14px;align-items:center;padding:15px 20px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8C8C93;border-bottom:1px solid rgba(255,255,255,.07)}
.scr-n{color:var(--acc)}
.scr-t{flex:1;min-width:0;color:#E9E9EC;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scr-live{display:flex;gap:7px;align-items:center}
.scr-live i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:ping 2.2s infinite}
#svCv{display:block;width:100%;aspect-ratio:16/11}
.scr-out{margin:0;padding:15px 20px 17px;border-top:1px solid rgba(255,255,255,.07);font-size:clamp(15px,1.1vw,18px);letter-spacing:-.015em;color:#E9E9EC}
.scr-in.sw #svCv,.scr-in.sw .scr-out,.scr-in.sw .scr-t{animation:scrsw .55s var(--e)}
@keyframes scrsw{from{opacity:.15;transform:translateY(6px)}}
.svl2{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svl2 li{position:relative;display:block;border-bottom:1px solid var(--line);font-size:17px;line-height:1.45;letter-spacing:-.01em;color:inherit;cursor:default}
.sv2-h{display:grid;grid-template-columns:3.2em minmax(0,1fr) 22px;align-items:baseline;gap:8px;width:100%;text-align:left;padding:clamp(18px,1.9vw,30px) 0;cursor:pointer}
.sv2-h .sv-n{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);padding:0;transition:color .4s}
.sv2-t{font-size:clamp(24px,2.35vw,44px);line-height:1.04;letter-spacing:-.047em;color:var(--muted);transition:color .45s var(--e)}
.sv2-t em{font-style:normal;font-size:.42em;letter-spacing:-.01em;vertical-align:.5em;margin-left:.2em;white-space:nowrap}
.sv2-pm{position:relative;width:14px;height:14px;align-self:center}
.sv2-pm::before,.sv2-pm::after{content:"";position:absolute;left:0;top:6px;width:14px;height:1.5px;background:currentColor;transition:transform .5s var(--e)}
.sv2-pm::after{transform:rotate(90deg)}
.svl2 li.on .sv2-pm::after{transform:rotate(0)}
.svl2 li.on .sv2-t{color:var(--ink)}
.svl2 li.on .sv-n{color:#C4410F}
.site.flow-dark .svl2 li.on .sv-n{color:var(--acc)}
.sv2-bar{position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--e)}
.svl2 li.on .sv2-bar{transform:none}
.svl2 .sv-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--e)}
.svl2 li.on .sv-more{grid-template-rows:1fr}
.svl2 .sv-more p{margin:0 0 14px 3.2em;font-size:clamp(16px,1.15vw,19px);line-height:1.42;letter-spacing:-.015em;color:var(--ink-2);max-width:32em}
.svl2 .sv-ch{padding:0 0 24px 3.2em}
.site.flow-dark .svc .scr-in{box-shadow:0 0 0 1px rgba(255,255,255,.1)}
@media (max-width:860px){
  .svc-top,.svc-grid{grid-template-columns:1fr}
  .scr{top:64px;z-index:3}
  #svCv{aspect-ratio:16/11}
  .scr-out{font-size:14px;padding:12px 16px}
  .sv2-t{font-size:clamp(22px,6.4vw,30px)}
  .svl2 .sv-more p,.svl2 .sv-ch{margin-left:0;padding-left:0}
}

/* resume: one full-width bar, same coded language as the hero */
.cvbar{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:end;column-gap:24px;max-width:1760px;margin:clamp(40px,5vw,72px) auto 0;min-height:clamp(150px,15vw,250px);padding:clamp(22px,2.4vw,40px);border-radius:30px;background:#0E0E10;color:#F3F3F2;overflow:hidden;isolation:isolate;box-shadow:0 50px 90px -50px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.06);transition:transform .6s var(--e)}
.cvbar canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.cvbar::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(14,14,16,.85) 0%,rgba(14,14,16,.4) 35%,transparent 60%)}
.cvb-t{grid-column:1;align-self:end;font-weight:500;font-size:clamp(40px,6.2vw,112px);line-height:.86;letter-spacing:-.062em}
.cvb-m{grid-column:1;margin-top:14px;color:rgba(243,243,242,.62);transition:color .3s}
.cvbar.done .cvb-m{color:var(--acc)}
.cvb-a{grid-column:2;grid-row:1/3;align-self:center;display:grid;place-items:center;width:clamp(64px,6.4vw,104px);aspect-ratio:1;border-radius:50%;background:#F3F3F2;color:#0E0E10;transition:transform .6s var(--e),background .3s,color .3s}
.cvb-a svg{width:38%;height:38%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cvbar:hover .cvb-a{background:var(--acc);color:#fff;transform:translateY(6px)}
.cvbar:hover .cvb-a svg{animation:cvbob 1s var(--e) infinite}
@keyframes cvbob{0%,100%{transform:translateY(-10%)}50%{transform:translateY(12%)}}
.cvbar:active{transform:scale(.99)}
.cvbar.done .cvb-a{background:var(--acc);color:#fff}

/* footer studio: a slow breathing zoom instead of the lens */
.st-wrap img,.st-wrap .doodles{transform-origin:55% 45%;will-change:transform}
.st-wrap.zoom img,.st-wrap.zoom .doodles{animation:stz 14s ease-in-out infinite alternate}
@keyframes stz{from{transform:scale(1)}to{transform:scale(1.075)}}
@media (prefers-reduced-motion:reduce){.st-wrap.zoom img{animation:none}}
@media (max-width:760px){.in-stage{--iw:66vw}}
.rv:nth-child(3n+2){--muted:#9A9AA0}

/* menu: one centred row of links, then socials + CTA — on graphite, so the page sheet stands out */
.menu{background:#18181B}
.menu-in{display:flex!important;flex-direction:column;align-items:center;gap:clamp(28px,4vh,48px);max-width:1760px;margin:0 auto;padding-top:clamp(8px,3vh,40px)}
.m-links{display:flex!important;flex-wrap:wrap;justify-content:center;gap:4px clamp(20px,2.8vw,50px)}
.m-links a{font-weight:400;font-size:clamp(30px,3.7vw,66px);line-height:1.1;letter-spacing:-.05em}
.m-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px clamp(20px,2.6vw,40px);opacity:0;transform:translateY(22px);transition:opacity .5s var(--e) .28s,transform .5s var(--e) .28s}
body.menu-open .m-row{opacity:1;transform:none}
body:not(.menu-open) .m-row{transition-delay:0s;transition-duration:.2s}
.m-soc{gap:10px clamp(18px,2vw,32px)}
.m-soc a{font-size:clamp(17px,1.3vw,22px)}
.m-mail{font-size:clamp(17px,1.3vw,22px);letter-spacing:-.03em;color:var(--dark-muted);transition:color .3s}
.m-mail:hover{color:#fff}
.m-row .gbtn{height:52px;padding:0 26px;font-size:16px}
@media (max-width:760px){.m-links{gap:2px 18px}.m-links a{font-size:clamp(28px,8.6vw,40px)}.m-row{gap:12px 18px}}

/* v11 small fixes */
body.menu-open .brand{opacity:1!important;pointer-events:auto}
.hdr .hr{position:relative}
.m-close{position:absolute;right:52px;top:50%;margin-top:-11px;font-size:15px;color:var(--dark-ink);opacity:0;transform:translateX(8px);transition:opacity .3s,transform .4s var(--e);pointer-events:none;margin-right:-2px}
body.menu-open .m-close{opacity:1;transform:none}
.hdr .hr{align-items:center}
.gbtn .ga,.f-cta .ga{font-size:0}
.gbtn .ga svg,.f-cta .ga svg{width:13px;height:13px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gbtn::before,.gbtn::after,.f-cta::before,.f-cta::after,.gbtn:hover::before,.gbtn:hover::after,.f-cta:hover::before,.f-cta:hover::after{transform:none!important;top:0!important;left:0!important;right:0!important;bottom:0!important;inset:0!important;width:auto!important;height:auto!important}
.gbtn:hover .ga,.f-cta:hover .ga{transform:translateX(3px)}
.rv-track{gap:10px}
.rv{flex-basis:clamp(290px,calc((100vw - 2*var(--g) - 22px)/3),620px)}
.faq h2{font-size:clamp(46px,6.2vw,112px);line-height:.9}

/* the flat mark hands over to the 3D one with a crossfade, never a pop */
.gl canvas{transition:opacity 1s var(--e)}
body:not(.gl3d) .gl canvas{opacity:0}
body.gl3d:not(.no-gl) .wm-mark .fbm{display:block;color:#E9E9EB;opacity:0;transition:opacity .9s var(--e)}

.pf-gate{position:absolute;left:0;top:0;z-index:2;display:flex;gap:6px;align-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(243,243,242,.55);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 1s var(--e) .6s}
.pf-gate b{font-weight:400;color:#F3F3F2}
.pf-gate i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:ping 2.2s infinite}
.pf-gate.on{opacity:1}

/* at rest the hero lockup is the crisp flat one; the 3D version takes over only once you scroll */
.gl canvas{transition:opacity .35s var(--e)}
body.flat-hero .gl canvas{opacity:0}
body.gl3d.flat-hero:not(.no-gl) .wm-mark .fbm{opacity:1;transition:opacity .35s var(--e)}
body.gl3d.flat-hero .pf-wm .wm-t{color:#E9E9EB}

/* hero name: dot matrix canvas over the (kept, invisible) h1 */
.pf-wm .wm-tw{position:relative}
.hn-cv{position:absolute;display:block;pointer-events:none}
body.hn-on .pf-wm .wm-t,body.hn-on.gl3d.flat-hero .pf-wm .wm-t{color:transparent!important}
.pf-gate{display:none}

/* ================= mobile pass ================= */
@media (max-width:860px){
  /* the name stays in the corner */
  body.brand-off .brand{opacity:1;pointer-events:auto}
  .hero.pf .h-lead br{display:none}
  .dc-one{font-size:clamp(38px,10.8vw,54px);line-height:.98;padding:0 var(--g);top:calc(50% + 12vh);bottom:auto;text-wrap:balance}
  /* footer: everything on the centre line */
  .f-row{align-items:center}
  .f-nav{justify-content:center;gap:6px 20px;font-size:24px}
  .f-status{align-self:center}
  .f-sub,.f-mailw{text-align:center}
  .f-cta{justify-content:center}
  .f-copy{display:flex;align-items:center;justify-content:center}
  .f-bot{justify-items:center;text-align:center}
  .f-legal{justify-items:center}
  .f-soc{justify-content:center}
  .f-made{justify-self:center;flex-direction:column;gap:10px}
  /* services: a shorter screen, lighter to scroll past */
  .scr{top:60px}
  #svCv{aspect-ratio:16/10}
  .scr-out{padding:10px 14px;font-size:13.5px}
  .scr-bar{padding:10px 14px}
}
@media (max-width:760px){ .d3 text,.d3 path{translate:-150px -6px} .d1 text{font-size:92px} }

/* ================= WORK v9: product-first tiles, light on the GPU ================= */
.cards{max-width:1760px}
.wc{position:sticky;top:clamp(76px,9vh,100px);height:min(calc(100svh - clamp(76px,9vh,100px) - 44px),860px);margin-bottom:14vh;display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,5.6fr) minmax(150px,1fr);gap:clamp(18px,2.2vw,40px);align-items:stretch}
.wc:last-child{margin-bottom:0}
.wc-side{display:flex;flex-direction:column;justify-content:center;gap:28px;color:#F3F3F2}
.wc-side.l{position:relative}
.wc-side.r{text-align:right;align-items:flex-end}
.wc-cnt{position:absolute;top:0;left:0;font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:#F3F3F2}
.wc-cnt em{font-style:normal;color:rgba(243,243,242,.38)}
.wc-side dl{margin:0;display:grid;gap:22px}
.wc-side dt{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:rgba(243,243,242,.46);margin-bottom:6px}
.wc-side dd{margin:0;font-size:clamp(16px,1.15vw,19px);letter-spacing:-.02em;line-height:1.25}
.wc-t{position:relative}
.wc-in{position:absolute;inset:0;display:block;border-radius:clamp(22px,2vw,34px);overflow:hidden;background:var(--bg);isolation:isolate;text-decoration:none;color:#fff;contain:paint}
.wc-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.wc-bg path{fill:var(--sh)}
.wc-bg path.b2{fill:color-mix(in srgb,var(--sh) 72%,#fff)}
.wc-art{position:absolute;inset:0;z-index:1}
.ly{position:absolute;inset:0;pointer-events:none}
.wc-t.act .ly{will-change:transform}
.wc-dev{position:absolute;left:50%;top:55%;width:60%;aspect-ratio:1200/750;transform:translate(-50%,-50%) perspective(2000px) rotateX(10deg) rotateY(-12deg) rotateZ(-5deg)}
.wc-scr{position:absolute;inset:0;border-radius:clamp(14px,1.4vw,24px);padding:clamp(8px,.8vw,13px);background:#111113;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 40px 70px -30px rgba(0,0,0,.55)}
.wc-scr img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:clamp(7px,.7vw,12px)}
.wc-fl{position:absolute;right:10%;bottom:10%;width:26%;aspect-ratio:1200/630;border-radius:clamp(10px,1vw,18px);overflow:hidden;transform:rotate(7deg);box-shadow:0 26px 50px -20px rgba(0,0,0,.5),0 0 0 5px rgba(255,255,255,.95)}
.wc-fl img{display:block;width:100%;height:100%;object-fit:cover}
.ly.fg{inset:auto;height:auto}
.ly.fg img{display:block;width:100%;height:auto}
.ly.f0{z-index:4}.ly.f1{z-index:3}.ly.f2{z-index:2}
/* top row: logo + name, and the site's own button */
.wc-top{position:absolute;z-index:6;left:clamp(16px,1.6vw,26px);right:clamp(16px,1.6vw,26px);top:clamp(16px,1.6vw,26px);display:flex;justify-content:space-between;align-items:center;gap:12px;pointer-events:none}
.wc-nm{display:flex;align-items:center;gap:12px;height:52px;padding:0 20px 0 6px;border-radius:999px;background:rgba(14,14,16,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.2);font-size:17px;font-weight:500;letter-spacing:-.025em;color:#fff;white-space:nowrap}
.wc-nm img{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.wc-nm.wide{padding:0 6px}.wc-nm.wide img{width:auto;height:40px;border-radius:999px;padding:0 10px;background:#fff}
.gbtn.wc-go{height:52px;padding:0 26px 0 24px;font-size:15.5px;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:auto}
.gbtn.wc-go .ga{margin-right:-14px}
.wc-go::before,.wc-go::after,.wc-go .gs::after{animation-play-state:paused!important}
.wc-t:hover .wc-go::before,.wc-t:hover .wc-go::after,.wc-t:hover .wc-go .gs::after{animation-play-state:running!important}
.wc-t:hover .wc-go .ga{transform:translateX(3px)}
.wc-in .case-dim{position:absolute;inset:0;z-index:8;background:#000;opacity:0;pointer-events:none;will-change:opacity}
.wc-in:focus-visible{outline:2px solid #2E86FF;outline-offset:4px}
/* the Figma selection frame — around the whole tile */
.fsel{position:absolute;inset:-10px;pointer-events:none;z-index:9;--sel:#2E86FF}
.fsel::before{content:"";position:absolute;inset:0;border:1.5px solid var(--sel);border-radius:calc(clamp(22px,2vw,34px) + 8px);clip-path:inset(0 100% 100% 0);transition:clip-path .6s var(--e)}
.fsel b{position:absolute;width:11px;height:11px;background:#fff;border:1.5px solid var(--sel);border-radius:2px;scale:0;transition:scale .35s cubic-bezier(.3,1.6,.5,1)}
.fsel b:nth-child(1){left:-5px;top:-5px}.fsel b:nth-child(2){right:-5px;top:-5px}.fsel b:nth-child(3){left:-5px;bottom:-5px}.fsel b:nth-child(4){right:-5px;bottom:-5px}
.fsel .fn,.fsel .fd{position:absolute;top:-30px;font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;white-space:nowrap;color:#fff;background:var(--sel);padding:3px 8px;border-radius:4px;opacity:0;translate:0 6px;transition:opacity .3s,translate .45s var(--e);font-variant-numeric:tabular-nums}
.fsel .fn{left:-1px}.fsel .fd{right:-1px}
.wc-t:hover .fsel::before{clip-path:inset(0 0 0 0)}
.wc-t:hover .fsel b{scale:1}
.wc-t:hover .fsel b:nth-child(2){transition-delay:.12s}.wc-t:hover .fsel b:nth-child(4){transition-delay:.24s}.wc-t:hover .fsel b:nth-child(3){transition-delay:.36s}
.wc-t:hover .fsel .fn,.wc-t:hover .fsel .fd{opacity:1;translate:0 0;transition-delay:.3s}
@media (max-width:1100px){.wc{grid-template-columns:120px minmax(0,1fr) 120px}}
@media (max-width:860px){
  .wc{position:relative;top:0;height:auto;display:flex;flex-direction:column;gap:14px;margin-bottom:56px}
  .wc-t{order:2;aspect-ratio:4/4.8;will-change:auto}
  .wc-in{border-radius:22px}
  .wc-side.l{order:1;flex-direction:row;justify-content:space-between;align-items:center}
  .wc-cnt{position:static}
  .wc-side.l dl{text-align:right}
  .wc-side.r{order:3;align-items:flex-end}
  .wc-dev{width:90%;top:56%}
  .wc-fl{width:42%;right:5%;bottom:8%}
  .wc-top{gap:8px}
  .wc-nm{height:42px;font-size:14.5px;gap:8px;padding-right:14px}.wc-nm img{width:32px;height:32px}.wc-nm.wide img{height:32px}
  .gbtn.wc-go{height:42px;padding:0 20px 0 16px;font-size:13.5px}
  .fsel{display:none}
}
/* ================= SERVICES v8: pinned stepper ================= */
.svc.sv3{display:block!important;max-width:none;margin:0;padding:0!important;height:calc(100vh + var(--n,6)*72vh)}
.svp{position:sticky;top:0;height:100vh;max-width:1760px;margin:0 auto;padding:clamp(84px,11vh,110px) var(--g) clamp(28px,4vh,48px);display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,4vw,80px);align-items:center}
.svp-l{align-self:center}
.svp-k{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 clamp(18px,3vh,34px);padding-bottom:14px;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.svp-i b{font-weight:400;color:var(--ink)}
.svp-list{list-style:none;margin:0;padding:0}
.svp-list li{position:relative;display:block;padding:clamp(9px,1.4vh,15px) 0;font-size:16px;line-height:1.4;letter-spacing:0;color:inherit}
.svp-h{font-size:16px;display:grid;grid-template-columns:2.6em minmax(0,1fr);align-items:baseline;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:inherit;font:inherit}
.svp-h .n{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);transition:color .4s}
.svp-h .t{font-size:clamp(24px,2.5vw,46px);line-height:1.04;letter-spacing:-.05em;font-weight:500;color:#C4C4C8;transition:color .45s var(--e)}
.svp-list li.done .t{color:#A9A9AE}
.svp-list li.on .t{color:var(--ink)}
.svp-list li.on .n{color:#C4410F}
.svp-h:hover .t{color:var(--ink)}
.svp-d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--e)}
.svp-d>p{overflow:hidden;margin:0;padding-left:41.6px;font-size:clamp(17px,1.3vw,21px);line-height:1.35;letter-spacing:-.02em;color:var(--ink-2)}
.svp-list li.on .svp-d{grid-template-rows:1fr}
.svp-list li.on .svp-d>p{padding-top:10px;padding-bottom:4px}
.svb{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);overflow:hidden}
.svb b{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.svp-r{display:flex;justify-content:center;align-items:center;min-height:0;height:100%}
.sv3 .scr{position:relative;top:auto;width:min(100%,calc((100vh - clamp(84px,11vh,110px) - clamp(28px,4vh,48px) - 48px)*800/560))}
.sv3 .scr-in{border-radius:clamp(20px,1.8vw,30px);background:#0E0E10;box-shadow:0 60px 100px -50px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.06)}
.sv3 #svCv{display:block;width:100%;aspect-ratio:800/560;height:auto}
.sv3 .scr-t{transition:opacity .3s}
@media (max-width:860px){
  .svc.sv3{height:calc(100svh + var(--n,6)*60svh)}
  .svp{height:100svh;grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:18px;padding:76px var(--g) 18px}
  .svp-k{margin-bottom:10px;padding-bottom:10px}
  .svp-list{display:grid}
  .svp-list li{grid-area:1/1;padding:0;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .5s var(--e);pointer-events:none}
  .svp-list li.on{opacity:1;transform:none;pointer-events:auto}
  .svp-h .t{font-size:clamp(28px,8vw,38px);color:var(--ink)}
  .svp-h{grid-template-columns:1fr}.svp-h .n{display:none}
  .svp-d>p{padding-left:0;font-size:17px}
  .svb{display:none}
  .sv3 .scr{width:100%}
}
.svp-list li.done .svb b{opacity:0}
#selCv2{z-index:1}
/* v7.11 */
.wc-t{transform-origin:50% 0;will-change:transform}
.wc.back .fsel{opacity:0}
.wc-top .wc-cnt{position:absolute;left:50%;top:50%;translate:-50% -50%;font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:#fff;padding:9px 14px;border-radius:999px;background:rgba(14,14,16,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.wc-top .wc-cnt em{font-style:normal;color:rgba(255,255,255,.55)}
#wWord{transform-origin:50% 0;will-change:transform,opacity}
.f-soc a{font-size:clamp(24px,2.3vw,40px);gap:.34em}
.f-soc i,.f-soc a:hover i,.f-soc a:focus-visible i{font-size:1em!important;width:.95em!important;height:.95em!important;margin:0!important;transform:none!important;background:none!important;border-radius:0;overflow:visible;color:currentColor}
.f-soc i svg{width:100%!important;height:100%!important;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--e)}
.f-soc a:hover{color:var(--c)}
.f-soc a:hover i svg{transform:rotate(-8deg) scale(1.08)}
@media (max-width:860px){.f-soc a{font-size:22px}}
.rv{flex-basis:clamp(320px,calc((100vw - 2*var(--g) - 20px)/2.35),640px)}
@media (max-width:860px){.rv{flex-basis:calc(100vw - 2*var(--g) - 56px);min-height:0}}
/* v7.12 menu: clear hierarchy — big links, then one tidy utility row */
.menu{padding:calc(96px + env(safe-area-inset-top,0px)) var(--g) 28px}
.menu-in{gap:clamp(30px,5vh,56px)!important;padding-top:clamp(4px,2vh,24px)!important}
.m-links{gap:2px clamp(22px,3vw,54px)!important}
.m-links a{font-size:clamp(34px,4vw,68px)!important}
.m-row{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;width:min(1180px,100%);padding-top:clamp(20px,3vh,30px);border-top:1px solid rgba(255,255,255,.12);gap:16px 24px!important}
.m-row .m-soc{justify-content:flex-start;gap:8px clamp(16px,1.8vw,28px)}
.m-row .m-soc a{font-size:clamp(16px,1.2vw,19px)!important;color:#C9C9CE}
.m-row .m-soc a:hover{color:var(--c)}
.m-row .m-mail{justify-self:center;font-size:clamp(16px,1.2vw,19px);color:#9A9AA2}
.m-row .gbtn{justify-self:end;height:50px;padding:0 24px 0 26px;font-size:15.5px}
@media (max-width:1024px){.m-row{grid-template-columns:1fr auto}.m-row .m-soc{grid-column:1/-1;justify-content:center}.m-row .m-mail{justify-self:start}}
@media (max-width:760px){
  .menu{padding:calc(86px + env(safe-area-inset-top,0px)) var(--g) 20px}
  .menu-in{align-items:stretch!important;gap:26px!important;padding-top:0!important}
  .m-links{flex-direction:column;align-items:flex-start;gap:0!important}
  .m-links li{width:100%;border-bottom:1px solid rgba(255,255,255,.08)}
  .m-links a{display:flex!important;width:100%;padding:9px 0;font-size:clamp(30px,9vw,40px)!important;line-height:1.05}
  .m-row{grid-template-columns:1fr;border-top:0;padding-top:0;gap:18px!important}
  .m-row .m-soc{display:grid;grid-template-columns:1fr 1fr;justify-content:stretch;gap:12px 16px}
  .m-row .m-soc a{font-size:17px!important}
  .m-row .m-mail{justify-self:start;font-size:17px}
  .m-row .gbtn{justify-self:stretch;justify-content:center;height:54px}
}
/* ===== v7.13 brief sheet ===== */
.sheet{width:min(680px,100%);background:#FAFAFA;padding:calc(26px + env(safe-area-inset-top,0px)) clamp(20px,3vw,44px) 40px}
.sh-head{margin-bottom:30px}
.sh-head .lab{color:#8A8A90}
.x{background:#EDEDEF}
#brief{gap:26px}
.field>label,.field legend,.flab{font-size:13.5px;font-weight:500;letter-spacing:-.005em;color:#55555B;margin-bottom:2px}
#brief input[type=text],#brief input[type=email],#brief textarea{background:#fff;border:1px solid #E1E1E5;border-radius:14px;padding:15px 16px;font-size:16.5px;color:#111114;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .2s,box-shadow .25s}
#brief input::placeholder,#brief textarea::placeholder{color:#A6A6AC}
#brief input[type=text]:hover,#brief input[type=email]:hover,#brief textarea:hover{border-color:#C9C9CF}
#brief input:focus,#brief textarea:focus{border-color:#111114;box-shadow:0 0 0 4px rgba(17,17,20,.07);background:#fff}
#brief textarea{min-height:130px}
#brief .chips span{background:#fff;box-shadow:inset 0 0 0 1px #E1E1E5;padding:10px 16px;font-size:15px;color:#2A2A2F}
#brief .chips label:hover span{box-shadow:inset 0 0 0 1px #9A9AA0}
#brief .chips input:checked+span{background:#111114;color:#fff;box-shadow:none}
.drop{position:relative;display:flex;align-items:center;gap:16px;padding:18px 18px;border-radius:16px;border:1.5px dashed #CFCFD5;background:#fff;cursor:pointer;transition:border-color .2s,background .2s}
.drop:hover,.drop.over{border-color:#111114;background:#F4F4F6}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.drop i{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#111114;color:#fff}
.drop i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.drop b{display:block;font-weight:500;font-size:15.5px;color:#111114}
.drop small{display:block;margin-top:3px;font-size:13px;color:#8A8A90}
.files{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.files:empty{display:none}
.files li{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;padding:8px 8px 8px 10px;border-radius:12px;background:#fff;border:1px solid #E6E6EA;font-size:14.5px}
.files li i{font-style:normal;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.04em;padding:5px 6px;border-radius:6px;background:#FF5A1F;color:#fff}
.files li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#111114}
.files li small{color:#8A8A90;font-size:12.5px}
.files li button{width:28px;height:28px;border-radius:50%;background:#F0F0F2;color:#55555B;font-size:17px;line-height:1}
.files li button:hover{background:#111114;color:#fff}
.b-send{justify-self:start;height:58px;padding:0 30px 0 30px;font-size:16.5px}
.b-send .ga{background:#fff!important;color:#111!important}
.b-send.busy{pointer-events:none;opacity:.75}
.b-send.busy .ga{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.err{color:#C2310B;font-size:14px}
/* thank-you */
.done{gap:14px;justify-items:start;text-align:left;padding-top:6px}
.done-cv{display:block;width:min(260px,70%);aspect-ratio:1;margin:0 0 8px;justify-self:center}
.done.ok{justify-items:center;text-align:center;padding-top:clamp(20px,6vh,60px)}
.done h3{font-size:clamp(38px,4vw,54px)}
.done p{margin:0;max-width:30em;font-size:17px;line-height:1.45;color:#55555B}
.done-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.done.ok .done-act{justify-content:center}
.done.ok pre,.done.ok #copyBrief,.done.ok #doneLi{display:none}
.done:not(.ok) .done-cv{width:150px;justify-self:start;margin-bottom:0}
.done-act .gbtn{height:54px;padding:0 26px}
.done-act .gbtn .ga{background:#fff!important;color:#111!important}

/* ===== v7.13 menu: living graphite + premium utility row ===== */
.menu{background:#141416;overflow:hidden}
.menu::before{content:"";position:absolute;inset:-40%;z-index:0;pointer-events:none;background:
  radial-gradient(38% 42% at 22% 30%,#2B2B31 0,transparent 70%),radial-gradient(34% 40% at 78% 24%,#232329 0,transparent 70%),
  radial-gradient(40% 44% at 60% 72%,#26262B 0,transparent 72%),radial-gradient(30% 36% at 30% 80%,#1E1E23 0,transparent 70%);
  animation:mdrift 22s ease-in-out infinite alternate;will-change:transform}
body:not(.menu-open):not(.menu-closing) .menu::before{animation-play-state:paused}
@keyframes mdrift{0%{transform:translate3d(-4%,-3%,0) rotate(0)}50%{transform:translate3d(5%,3%,0) rotate(8deg)}100%{transform:translate3d(-2%,5%,0) rotate(-6deg)}}
.menu-in{position:relative;z-index:1}
.m-row{display:flex!important;justify-content:space-between;align-items:center;flex-wrap:wrap;width:min(1240px,100%);gap:14px 20px!important;padding-top:clamp(22px,3vh,32px);border-top:1px solid rgba(255,255,255,.1)}
.m-soc2{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.m-soc2 a{display:flex;align-items:center;gap:10px;height:48px;padding:0 16px 0 6px;border-radius:999px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.06);font-size:15px;letter-spacing:-.015em;color:#E6E6E9;transition:background .3s,box-shadow .3s,color .3s}
.m-soc2 i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.09);transition:background .35s,transform .5s var(--e)}
.m-soc2 i svg{width:16px;height:16px;fill:currentColor}
.m-soc2 em{font-style:normal;font-size:13px;color:rgba(255,255,255,.4);transition:transform .4s var(--e),color .3s}
.m-soc2 a:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.m-soc2 a:hover i{background:var(--c);transform:rotate(-8deg)}
.m-soc2 a:hover em{color:#fff;transform:translate(2px,-2px)}
.m-act{display:flex;align-items:center;gap:10px}
.m-mail2{display:flex;align-items:center;gap:12px;height:48px;padding:0 8px 0 6px;border-radius:999px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);color:#E6E6E9;font-size:15px;letter-spacing:-.015em;transition:background .3s}
.m-mail2 i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#F3F3F2;color:#F3F3F2}
.m-mail2 i svg{width:16px;height:16px;fill:#18181B}
.m-mail2 b{font-weight:400;font-size:12.5px;color:#9A9AA2;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.07);transition:background .3s,color .3s}
.m-mail2:hover{background:rgba(255,255,255,.08)}
.m-mail2:hover b{background:#F3F3F2;color:#111}
.m-act .gbtn{height:48px;padding:0 24px 0 24px;font-size:15px}
@media (max-width:1024px){.m-row{justify-content:center}}
@media (max-width:760px){
  .m-row{display:grid!important;grid-template-columns:1fr;border-top:0;padding-top:0}
  .m-soc2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .m-soc2 em{margin-left:auto}
  .m-act{display:grid;grid-template-columns:1fr;gap:8px}
  .m-mail2{width:100%}.m-mail2 b{margin-left:auto}
  .m-act .gbtn{justify-content:center;height:54px}
}
/* footer socials: solid marks */
.f-soc i svg{fill:currentColor!important;stroke:none!important;width:86%!important;height:86%!important}
.done h3{display:none}
.done.ok{padding-top:clamp(8px,3vh,30px)}
.m-mail2 i svg{fill:none!important;stroke:#18181B;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.foot.lift{transition:transform .8s var(--e);will-change:transform}
.rv{margin:0}
/* v7.15 mobile menu: fits short screens, scrolls if it must */
@media (max-width:760px){
  .menu{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:calc(78px + env(safe-area-inset-top,0px)) var(--g) 90px}
  .menu-in{gap:20px!important}
  .m-links a{font-size:clamp(26px,7.6vw,34px)!important;padding:7px 0!important}
  .m-soc2 a{height:44px;font-size:14.5px}.m-soc2 i{width:32px;height:32px}.m-soc2 i svg{width:14px;height:14px}
  .m-mail2{height:44px;font-size:14.5px}.m-mail2 i{width:32px;height:32px}
  .m-act .gbtn{height:50px}
}
@media (max-width:760px) and (max-height:700px){ .m-links a{font-size:26px!important;padding:5px 0!important} .menu-in{gap:14px!important} }
.m-soc2 em{font-family:var(--f);font-variant-emoji:text}
html{overflow-x:clip}
body{overflow:clip;max-width:100%}
/* brief: real system cursors inside the form — no custom cursor labels leaking in from the page */
body.modal-open .cur,body.modal-open .cur-tag{opacity:0!important}
body.has-cursor .modal,body.has-cursor .modal *{cursor:auto}
body.has-cursor .modal button,body.has-cursor .modal a,body.has-cursor .modal label,body.has-cursor .modal .chips input,body.has-cursor .modal .drop,body.has-cursor .modal .drop input,body.has-cursor .modal-bg{cursor:pointer}
body.has-cursor .modal input[type=text],body.has-cursor .modal input[type=email],body.has-cursor .modal input[type=url],body.has-cursor .modal textarea{cursor:text}
.modal .chips span,.modal .drop,.modal .flab,.modal legend{user-select:none;-webkit-user-select:none}
#brief input.links{margin-top:8px;background:#fff;border:1px solid #E1E1E5;border-radius:14px;padding:13px 16px;font-size:15.5px;color:#111114;width:100%;font:inherit;font-size:15.5px}
#brief input.links:focus{outline:none;border-color:#111114;box-shadow:0 0 0 4px rgba(17,17,20,.07)}
#brief .field>.drop{padding:18px 22px 18px 18px;gap:16px;align-items:center;font-size:15px;color:inherit;margin:0}
#brief .drop span{min-width:0;line-height:1.35}
#brief .drop small{line-height:1.4}
/* brief receipt — card-terminal paper */
.rcpt{justify-self:stretch;width:100%;position:relative;background:#fff;color:#1a1a1c;font-family:var(--mono);font-size:12.5px;line-height:1.55;letter-spacing:.01em;padding:30px clamp(18px,3vw,30px) 34px;
  -webkit-mask:radial-gradient(circle at 7px 0,#0000 6px,#000 6.5px) top/14px 51% repeat-x,radial-gradient(circle at 7px 100%,#0000 6px,#000 6.5px) bottom/14px 51% repeat-x;
  mask:radial-gradient(circle at 7px 0,#0000 6px,#000 6.5px) top/14px 51% repeat-x,radial-gradient(circle at 7px 100%,#0000 6px,#000 6.5px) bottom/14px 51% repeat-x;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.08));background-image:linear-gradient(180deg,rgba(0,0,0,.025),transparent 12%,transparent 88%,rgba(0,0,0,.025))}
.done.ok .rcpt{text-align:left;margin-top:6px}
.rcpt:empty{display:none}
.rcpt.print{animation:rprint 1.3s steps(14) both}
@keyframes rprint{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.rcpt .rc-top{text-align:center;display:grid;gap:2px;margin-bottom:6px}
.rcpt .rc-top b{font-weight:600;font-size:14px;letter-spacing:.14em}
.rcpt .rc-top small{font-size:10.5px;letter-spacing:.12em;color:#6B6B71}
.rcpt hr{border:0;border-top:1px dashed #BDBDC2;margin:10px 0}
.rcpt hr.dbl{border-top:3px double #1a1a1c;margin:14px 0 10px}
.rcpt .r{display:flex;align-items:baseline;gap:6px}
.rcpt .r span{text-transform:uppercase;color:#55555B;white-space:nowrap}
.rcpt .r i{flex:1;min-width:12px;border-bottom:1px dotted #BDBDC2;transform:translateY(-3px)}
.rcpt .r b{font-weight:500;text-align:right;overflow-wrap:anywhere}
.rcpt .r.big{font-size:14px}.rcpt .r.big span,.rcpt .r.big b{color:#111;font-weight:600}
.rcpt .h{margin-top:6px;text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;color:#8A8A90}
.rcpt p{margin:2px 0 4px;white-space:pre-wrap;overflow-wrap:anywhere}
.rcpt .bc{display:flex;justify-content:center;align-items:stretch;height:46px;margin:16px 0 8px}
.rcpt .bc i{display:block;background:#1a1a1c;height:100%}
.rcpt .rc-ty{text-align:center;font-size:11px;letter-spacing:.16em;color:#55555B}
.done:not(.ok){justify-items:stretch}
.done:not(.ok) .done-cv{justify-self:start}
/* dark section rising over the light one: a soft, growing ambient shadow instead of a hard drop shadow */
.sel{box-shadow:none!important}
.sel::before{content:"";position:absolute;left:-4%;right:-4%;top:-340px;height:340px;pointer-events:none;z-index:-1;
  background:radial-gradient(60% 100% at 50% 100%,rgba(12,12,16,.17) 0,rgba(12,12,16,.09) 32%,rgba(12,12,16,.03) 62%,rgba(12,12,16,0) 100%);
  transform-origin:50% 100%;transform:scaleY(calc(.18 + .82*var(--sq,0)));opacity:calc(.25 + .75*var(--sq,0));will-change:transform,opacity}
.done .rcpt p{font-size:12.5px;line-height:1.55;color:#1a1a1c;max-width:none;text-align:left}
/* showreel: more room for the film, then it dissolves into black and Works takes over */
.sel{height:400vh}
.sel-fade{position:absolute;left:0;right:0;top:0;height:220vh;z-index:2;pointer-events:none;transform:translate3d(0,200vh,0);will-change:transform;background:linear-gradient(180deg,rgba(10,10,11,0) 0,rgba(10,10,11,.75) 15%,#0A0A0B 25%,#0A0A0B 100%)}
.work{padding-top:clamp(30px,3vw,56px)}
@media (max-width:860px){.sel{height:380vh}}
@media (prefers-reduced-motion:reduce){.sel{height:auto}}
/* A/K corners: design tooling around A (bottom-left), AI code around K (top-right) — quiet, the deck stays the star */
.dc-fx{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:calc(var(--sp,0)*1);transition:opacity .2s linear}
.dc:not(.fx-on) .dc-fx *{animation-play-state:paused!important}
.fxA{position:absolute;left:2%;bottom:5%;width:30vw;height:48vh}
.gd{position:absolute;background:#FF4F7B;opacity:.55}
.gh{left:-6vw;right:-12vw;top:84%;height:1px;-webkit-mask:linear-gradient(90deg,#0000,#000 20%,#000 70%,#0000);mask:linear-gradient(90deg,#0000,#000 20%,#000 70%,#0000);animation:gdH 6s var(--e) infinite}
.gh2{left:-6vw;right:-12vw;top:22%;height:1px;opacity:.3;-webkit-mask:linear-gradient(90deg,#0000,#000 20%,#000 70%,#0000);mask:linear-gradient(90deg,#0000,#000 20%,#000 70%,#0000)}
.gv{top:-8vh;bottom:-6vh;left:26%;width:1px;-webkit-mask:linear-gradient(180deg,#0000,#000 20%,#000 80%,#0000);mask:linear-gradient(180deg,#0000,#000 20%,#000 80%,#0000);animation:gdV 6s var(--e) infinite}
@keyframes gdH{0%,100%{transform:translateY(0)}45%,60%{transform:translateY(-6px)}}
@keyframes gdV{0%,100%{transform:translateX(0)}30%,50%{transform:translateX(8px)}}
.meas{position:absolute;left:calc(26% + 10px);top:22%;height:62%;width:1px;background:#FF4F7B;opacity:.7}
.meas::before,.meas::after{content:"";position:absolute;left:-4px;width:9px;height:1px;background:#FF4F7B}
.meas::before{top:0}.meas::after{bottom:0}
.meas span{position:absolute;left:6px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:10px;color:#fff;background:#FF4F7B;padding:2px 5px;border-radius:3px}
.cpk{position:absolute;right:4%;top:6%;width:128px;padding:8px;border-radius:12px;background:#fff;box-shadow:0 12px 30px -12px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.06);display:grid;gap:7px;animation:cpkIn 6s var(--e) infinite}
@keyframes cpkIn{0%,8%{opacity:0;transform:translateY(8px) scale(.96)}16%,86%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(4px)}}
.cpk-sq{position:relative;height:74px;border-radius:6px;background:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,#FF5A1F)}
.cpk-sq b{position:absolute;width:11px;height:11px;margin:-6px 0 0 -6px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(0,0,0,.25);animation:cpkPt 6s var(--e) infinite}
@keyframes cpkPt{0%,20%{left:30%;top:60%}45%{left:88%;top:18%}70%,100%{left:96%;top:10%}}
.cpk-hue{position:relative;height:8px;border-radius:4px;background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.cpk-hue b{position:absolute;top:-2px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.3);animation:cpkHue 6s var(--e) infinite}
@keyframes cpkHue{0%,15%{left:55%}40%,100%{left:5%}}
.cpk-row{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;color:#55555B}
.cpk-row i{width:14px;height:14px;border-radius:4px;background:#FF5A1F;animation:cpkSw 6s var(--e) infinite}
@keyframes cpkSw{0%,20%{background:#6C7BD8}45%,100%{background:#FF5A1F}}
.cpk-row em{margin-left:auto;font-style:normal;color:#9A9AA0}
.fx-cur{position:absolute;right:30%;top:36%;display:flex;align-items:flex-start;gap:0;animation:fxCur 6s var(--e) infinite}
.fx-cur svg{width:15px;height:15px}
.fx-cur b{margin:12px 0 0 -2px;font-weight:500;font-size:10.5px;color:#fff;background:#FF5A1F;padding:2px 6px;border-radius:5px;white-space:nowrap}
@keyframes fxCur{0%,10%{transform:translate(40px,60px)}35%{transform:translate(78px,-38px)}55%{transform:translate(96px,-50px)}80%{transform:translate(-30px,120px)}100%{transform:translate(40px,60px)}}
.fxK{position:absolute;right:3%;top:8%;width:30vw;height:44vh}
.kcode{position:absolute;left:0;top:4%;font-family:var(--mono);font-size:11.5px;line-height:1.7;color:#8A8A90}
.kcode p{margin:0;white-space:nowrap;overflow:hidden;width:0;animation:ktype 7s steps(26) infinite}
.kcode p:nth-child(2){animation-delay:.9s}.kcode p:nth-child(3){animation-delay:1.7s}.kcode p:nth-child(4){animation-delay:2.5s}
@keyframes ktype{0%{width:0}14%,82%{width:22ch}92%,100%{width:0}}
.kcode em{font-style:normal;color:#A259E0}.kcode b{font-weight:400;color:#FF5A1F}.kcode s{text-decoration:none;color:#2FA36B}
.kcode i{display:inline-block;width:7px;height:13px;vertical-align:-2px;background:#2E86FF;animation:kcar 1s steps(1) infinite}
@keyframes kcar{50%{opacity:0}}
.ktag{position:absolute;left:62%;top:52%;font-family:var(--mono);font-size:11px;color:#6B6B71;padding:3px 7px;border-radius:6px;background:rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(0,0,0,.07);opacity:0;animation:ktag 4.2s var(--e) infinite;animation-delay:var(--d)}
@keyframes ktag{0%{opacity:0;transform:translate(var(--x),var(--y)) scale(1)}15%{opacity:.9}70%{opacity:.6}100%{opacity:0;transform:translate(0,0) scale(.3)}}
.fx-chip{position:absolute;left:0;top:calc(4% + 84px);font-size:10.5px;font-weight:500;color:#fff;background:#2E86FF;padding:2px 7px;border-radius:5px}
@media (max-width:860px){.dc-fx{display:none}}
@media (prefers-reduced-motion:reduce){.dc-fx *{animation:none!important}.kcode p{width:auto}}
/* review type scales with how much was written — never shouty, never tiny */
.rv q.q-xl{font-size:clamp(23px,1.9vw,30px);line-height:1.18;letter-spacing:-.035em}
.rv q.q-l{font-size:clamp(20px,1.55vw,25px);line-height:1.25}
.rv q.q-m{font-size:clamp(17px,1.25vw,20px);line-height:1.38;letter-spacing:-.02em}
.rv q.q-s{font-size:clamp(15.5px,1.05vw,17.5px);line-height:1.48;letter-spacing:-.01em}
@media (max-width:860px){.rv q.q-xl{font-size:24px}.rv q.q-l{font-size:20px}.rv q.q-m{font-size:17px}.rv q.q-s{font-size:15.5px}}
/* Works rises into the showreel's fade: the dark flow overlaps the last stretch of the reel */
.flow{margin-top:-70vh;margin-top:-70svh;z-index:4}

/* design guides: one per direction, and they leave as soon as A and K start closing */
.dc-fx{opacity:clamp(0,calc((var(--sp,0) - .55)*2.4),1)!important;transition:none!important}
.gv span{position:absolute;left:6px;top:58%;font-family:var(--mono);font-size:10px;color:#fff;background:#FF4F7B;padding:2px 5px;border-radius:3px}
.gd{opacity:.45}
.rv.smp .rv-meta span:last-child{padding:3px 7px;border-radius:5px;box-shadow:inset 0 0 0 1px currentColor;opacity:.7}
.dc-fx{opacity:clamp(0,calc((var(--sp,0) - .86)*7.2),1)!important}
/* About gets its own quiet paper tone, then Reviews returns to the page white */
#flowA{position:absolute;inset:0;opacity:0;background:radial-gradient(120% 80% at 20% 10%,#ECECF1 0,#E4E5EA 55%,#E1E2E8 100%);will-change:opacity}
.flow-bg{position:sticky}.flow-bg i{position:absolute;inset:0}
/* Figma-style vertical toolbar beside A (replaces the red guides) */
.ftb{position:absolute;left:0;top:10%;display:grid;gap:4px;padding:6px;border-radius:14px;background:#1E1E1E;box-shadow:0 14px 34px -14px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.06)}
.ftb span{position:relative;z-index:1;width:32px;height:32px;display:grid;place-items:center;color:#C9C9CE}
.ftb svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ftb span:first-of-type svg{fill:currentColor;stroke:none}
.ftb-hl{position:absolute;left:6px;top:6px;width:32px;height:32px;border-radius:8px;background:#0D99FF;animation:ftbHl 12s steps(1) infinite}
@keyframes ftbHl{0%{transform:translateY(36px)}16.66%{transform:translateY(72px)}33.33%{transform:translateY(108px)}50%{transform:translateY(144px)}66.66%{transform:translateY(180px)}83.33%{transform:translateY(0)}}
.ftb-tip{position:absolute;left:calc(100% + 8px);top:6px;height:32px;display:flex;align-items:center;font-style:normal;animation:ftbHl 12s steps(1) infinite}
.ftb-tip b{position:absolute;left:0;white-space:nowrap;font-weight:500;font-size:11px;color:#fff;background:#1E1E1E;padding:4px 8px;border-radius:6px;opacity:0;animation:ftbTip 12s steps(1) infinite}
.ftb-tip b:nth-child(1){animation-delay:0s}.ftb-tip b:nth-child(2){animation-delay:2s}.ftb-tip b:nth-child(3){animation-delay:4s}.ftb-tip b:nth-child(4){animation-delay:6s}.ftb-tip b:nth-child(5){animation-delay:8s}.ftb-tip b:nth-child(6){animation-delay:10s}
@keyframes ftbTip{0%{opacity:1}16.66%,100%{opacity:0}}
/* header: longer Ukrainian labels need earlier breakpoints */
.brand{min-width:0}.brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1320px){html[lang=uk] .brand span{display:none}html[lang=uk] .hnav{gap:22px}}
/* UA: longer words — tighter nav instead of hiding it; below 1100 the compact CV button steps aside (it stays in the menu) */
@media (max-width:1180px) and (min-width:1001px){html[lang=uk] .hnav{gap:15px;font-size:14px}}
@media (max-width:1100px) and (min-width:1001px){html[lang=uk] .hdr .hcv{display:none}}
@media (max-width:1120px){html:not([lang=uk]) .brand span{display:none}}
/* Figma bits: light UI, quieter — they support the deck, never compete with it */
.fxA{opacity:.8}
.ftb{background:#fff;box-shadow:0 8px 22px -12px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.06);border-radius:12px;padding:5px;gap:2px}
.ftb span{width:28px;height:28px;color:#6B6B71}
.ftb svg{width:14px;height:14px}
.ftb-hl{left:5px;top:5px;width:28px;height:28px;background:#E5F2FF;animation-name:ftbHl2}
@keyframes ftbHl2{0%{transform:translateY(30px)}16.66%{transform:translateY(60px)}33.33%{transform:translateY(90px)}50%{transform:translateY(120px)}66.66%{transform:translateY(150px)}83.33%{transform:translateY(0)}}
.ftb-tip{top:5px;height:28px;animation-name:ftbHl2}
.ftb-tip b{background:#fff;color:#3A3A40;box-shadow:0 4px 12px -6px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.06);font-size:10.5px}
.cpk{width:auto;padding:6px 8px;border-radius:999px;display:flex;align-items:center;gap:7px;box-shadow:0 6px 16px -10px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.06)}
.cpk-sq,.cpk-hue{display:none}
.cpk-row{gap:6px;font-size:10px;color:#6B6B71}
.cpk-row i{width:12px;height:12px;border-radius:50%}
.cpk-row em{display:none}
.fx-cur b{font-size:10px;padding:2px 5px}
/* menu social pills: the CTA's arrow, in white */
.m-soc2 em{display:grid;place-items:center;width:18px;height:18px;margin-left:2px;color:#fff;opacity:.55;transition:transform .45s var(--e),opacity .3s}
.m-soc2 em svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.m-soc2 a:hover em{opacity:1;transform:translateX(3px);color:#fff}
@media (max-width:1100px){.m-row{justify-content:center!important}.m-soc2{justify-content:center}.m-act{justify-content:center}}
/* showreel: heavier title + a quiet line under it and a way out */
.sel-w{font-weight:600;letter-spacing:-.065em;font-size:clamp(56px,9vw,168px)}
.sel-sub{position:absolute;left:50%;top:calc(50% + clamp(120px,14vw,230px));z-index:2;display:grid;justify-items:center;gap:16px;text-align:center;opacity:0;transform:translate(-50%,14px);will-change:opacity,transform}
.sel-sub p{margin:0;max-width:34em;font-size:clamp(15px,1.15vw,19px);line-height:1.5;color:rgba(243,243,242,.55)}
.sel-skip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;font-size:14px;color:#F3F3F2;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:background .3s}
.sel-skip:hover{background:rgba(255,255,255,.12)}
.sel-skip svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--e)}
.sel-skip:hover svg{transform:translateY(2px)}
@media (max-width:860px){.sel-sub{top:calc(50% + 70px);width:calc(100% - 2*var(--g))}.sel-sub p br{display:none}}
/* mobile floating CTA */
.mcta{display:none}
@media (max-width:859px){
  .mcta{display:block;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:70;transform:translateY(140%);opacity:0;transition:transform .55s var(--e),opacity .35s;pointer-events:none}
  .mcta.on{transform:none;opacity:1;pointer-events:auto}
  .mcta .gbtn{width:100%;justify-content:center;height:54px;font-size:16px;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.14),0 18px 40px -12px rgba(0,0,0,.55)}
}
/* big screens (>1920): DOM content keeps MacBook-16 proportions; canvases already scale with the viewport */
@media (min-width:1921px){
  .hdr,.pf-top,.dc-w,.dc-one,.deck,.ftb,.cpk,.fx-cur,.kcode,.ktag,.fx-chip,.sel-w,.sel-sub,.w-head sup,.wc-top,.wc-side,.p-head,.procs,.hr-in,.svp-l,.pr-top,.rv-track,.faq,.f-in{zoom:var(--z,1)}
  /* inside zoomed blocks, vw-based sizes would scale twice — pin them to their MacBook-16 (1728px) values */
  .hero.pf .h-lead{font-size:54px}.dc-w{font-size:131px}.dc-one{font-size:76px}.dk-big{font-size:124px}.dk h3{font-size:32px}
  .sel-w{font-size:155px}.sel-sub p{font-size:18px}.p-head h2{font-size:107px}.p-head p{font-size:19px}
  .hr-in{gap:86px}.hr-in h2{font-size:79px}.facts th,.facts td{font-size:19px}.faq h2{font-size:107px}.qa button{font-size:26px}
  .pr-line{font-size:141px}.f-nav{font-size:40px;gap:55px}.svp-h .t{font-size:43px}.svp-d>p{font-size:21px}.wc-side dd{font-size:19px}
  .rv{flex-basis:640px;padding:32px;min-height:410px}.rv q.q-xl{font-size:30px}.rv q.q-l{font-size:25px}.rv q.q-m{font-size:20px}.rv q.q-s{font-size:17.5px}
  .proc,.proof{max-width:calc(1760px*var(--z,1));--g:calc(32px*var(--z,1))}
  .cards{max-width:calc(1760px*var(--z,1))}
  .wc{top:calc(100px*var(--z,1));height:min(calc(100svh - 100px*var(--z,1) - 44px*var(--z,1)),calc(860px*var(--z,1)));grid-template-columns:minmax(calc(150px*var(--z,1)),1fr) minmax(0,5.6fr) minmax(calc(150px*var(--z,1)),1fr);gap:calc(40px*var(--z,1));margin-bottom:14vh}
  .wc-in{border-radius:calc(34px*var(--z,1))}
  .fsel{inset:calc(-10px*var(--z,1))}
  .svp{max-width:calc(1760px*var(--z,1));--g:calc(32px*var(--z,1))}
  .dc-w{--g:32px}.cvbar{max-width:calc(1760px*var(--z,1))}
  .dc-one{text-wrap:balance}
}
.dc-one{text-wrap:balance}
.dc-one b{display:inline-block;max-width:14.5em;text-wrap:balance}
@media (max-width:860px){.dc-one b{max-width:none}}
@media (min-width:861px){.dc-one{top:calc(50% + clamp(36px,6vh,70px))}}
body.menu-open .mcta,body.menu-closing .mcta,body.modal-open .mcta{transform:translateY(140%)!important;opacity:0!important;pointer-events:none!important}
.m-soc2 a{padding-right:14px}
.m-soc2 em{margin-left:auto;padding-left:10px;width:auto;height:22px}
.m-soc2 em svg{width:17px;height:17px;stroke-width:1.9}
@media (max-width:760px){.m-soc2 em svg{width:16px;height:16px}.m-soc2 a{padding-right:14px}}
/* brand = home: on hover the AK mark slides in and nudges the name aside */
.brand{align-items:center}
.brand-mk{display:inline-flex;align-items:center;width:0;height:1em;margin-right:-10px;overflow:hidden;opacity:0;transform:translateX(-6px) scale(.6);transform-origin:0 50%;transition:width .45s var(--e),margin .45s var(--e),opacity .3s,transform .5s var(--e);color:currentColor}
.brand-mk svg{height:.78em;width:auto;flex:none}
.brand:hover .brand-mk,.brand:focus-visible .brand-mk{width:1.3em;margin-right:0;opacity:1;transform:none}
.brand b{transition:color .3s}
.brand:hover b{color:currentColor}
@media (hover:none){.brand-mk{display:none}}
/* mobile menu: fits the screen, never scrolls under the header */
@media (max-width:760px){
  .menu{overflow:hidden!important;overscroll-behavior:none;padding-bottom:16px}
}
@media (max-width:760px) and (max-height:760px){ .m-links a{font-size:clamp(24px,4.4vh,32px)!important;padding:4px 0!important} .menu-in{gap:14px!important} .m-soc2 a,.m-mail2{height:40px} .m-act .gbtn{height:46px} }
@media (max-width:760px) and (max-height:620px){ .m-soc2{grid-template-columns:repeat(4,1fr)} .m-soc2 a span,.m-soc2 em{display:none} .m-soc2 a{justify-content:center;padding:0} }
/* touch devices: no live backdrop blur over the WebGL layer (it makes iOS scrolling stutter) */
@media (hover:none),(pointer:coarse){
  .hdr::before{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  body.on-dark .hdr::before{background:linear-gradient(rgba(7,7,8,.9),rgba(7,7,8,0))}
  .dk{will-change:transform,opacity}
  .dc-w{will-change:opacity}
}
/* no hairline seam where Works rises over the showreel: the top of the flow is solid black under the dark layer */
.flow{background:linear-gradient(#0A0A0B,#0A0A0B) top/100% 100vh no-repeat,var(--bg)}
.flow-bg #flowL{top:-2px}
/* phones: don't promote the whole page to one giant layer — on iOS that makes every sticky scene (3D logo, words) get re-positioned on the main thread and wobble */
@media (hover:none),(pointer:coarse){
  .site{will-change:auto!important}
  body.menu-open .site,body.menu-closing .site{will-change:transform!important}
  .gl{will-change:auto;transform:translateZ(0)}
}
/* phones: the 3D layer is fixed to the screen (no sticky re-positioning per scroll frame), hidden once the story has scrolled away */
@media (hover:none),(pointer:coarse){
  .gl{position:fixed;top:0;left:0;right:0;margin-bottom:0;height:100vh;height:100lvh}
  .dc-in{height:100vh;height:100lvh}
  body.gl-off .gl{visibility:hidden}
}
@media (hover:none),(pointer:coarse){body.menu-open .gl,body.menu-closing .gl{visibility:hidden}}
@media (max-width:860px){
  .dc-one{top:calc(50% + 1vh)!important}
  .sel-sub{top:calc(50% + 130px);width:min(310px,calc(100% - 2*var(--g)))}
  .sel-sub p{font-size:14.5px}
}

/* menu open: the page behind can't move — overflow on <html> goes to the viewport (sticky scenes keep working), touch panning off */
html.m-lock{overflow:hidden;overscroll-behavior:none}
html.m-lock body{touch-action:none;overscroll-behavior:none}

/* ===== no-showreel version: design/code → Works through a gradient ===== */
.dc{height:600vh}
.dc-fade{position:relative;z-index:3;height:190vh;height:190svh;margin-top:-190vh;margin-top:-190svh;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,11,0) 0,rgba(10,10,11,.06) 6.6%,rgba(10,10,11,.2) 14%,rgba(10,10,11,.45) 22.2%,rgba(10,10,11,.72) 30.4%,rgba(10,10,11,.92) 37%,#0A0A0B 41.5%,#0A0A0B 100%)}
.flow{margin-top:-110vh!important;margin-top:-110svh!important;z-index:4}
@media (prefers-reduced-motion:reduce){.dc-fade{height:30vh!important;margin-top:-30vh!important}.flow{margin-top:0!important}}

.dc-one .dw{display:inline-block;transform-origin:50% 60%;will-change:transform,opacity}

/* the 3D mark's glitch/dissolve double */
.gl .glx{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:1!important;transition:none!important}
.gl.gx #gl{opacity:0!important;transition:none!important}
/* section progress in the top nav: a hairline under the section you're in */
.hnav a{position:relative}
.hnav a::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:1.5px;border-radius:2px;background:currentColor;transform:scaleX(var(--p,0));transform-origin:0 50%;opacity:0;transition:opacity .35s}
.hnav a.cur::after{opacity:.5}
/* phones: the burger carries a thin ring of page progress */
.burger .bpr{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);transform:rotate(-90deg);pointer-events:none;fill:none;stroke:currentColor;stroke-width:1.5;opacity:0;transition:opacity .3s}
.burger .bpr circle{stroke:var(--ink);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--pp,0))}
body.on-dark .burger .bpr circle{stroke:var(--dark-ink)}
@media (max-width:1000px){.burger .bpr{opacity:.45}}
html[lang=uk] .burger .bpr{opacity:0}
@media (max-width:1180px){html[lang=uk] .burger .bpr{opacity:.45}}
body.menu-open .burger .bpr{opacity:0}

/* the closing pair (mark + line) sits as one group in the optical centre */
@media (min-width:861px){.dc-one{top:calc(50% + 13vh)}}

/* ===== deck v2: icon, big number, caption — black cards, one orange ===== */
.dk,.dk.t-m,.dk.t-g{background:#121213;color:#F3F3F2;box-shadow:0 40px 80px -40px rgba(0,0,0,.55)}
.dk.t-d{background:#121213;color:#F3F3F2;box-shadow:0 40px 80px -40px rgba(0,0,0,.55)}
.dk.t-o{background:var(--acc);color:#fff}
.dk-k{display:flex;justify-content:space-between;align-items:flex-start;opacity:1;font-family:var(--f);font-size:inherit;letter-spacing:0;text-transform:none}
.dk-ic{display:block;width:30px;height:30px}
.dk-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.dk-k span{font-family:var(--mono);font-size:10px;line-height:1.55;letter-spacing:.07em;text-transform:uppercase;text-align:right;opacity:.5}
.dk-num{margin-top:auto}
.dk .dk-big{margin:0;font-size:clamp(80px,7.4vw,128px);line-height:.84;letter-spacing:-.065em}
.dk .dk-big.w{font-size:clamp(58px,5.2vw,92px)}
.dk-l{margin-top:14px;font-size:12.5px;font-weight:500;line-height:1.3;letter-spacing:.005em;text-transform:uppercase;max-width:21em;opacity:.78}
.dk .dk-st{margin:auto 0 0;font-size:clamp(25px,2.05vw,34px);font-weight:500;line-height:1.06;letter-spacing:-.045em;color:inherit}
@media (min-width:1921px){.dk .dk-big{font-size:128px}.dk .dk-big.w{font-size:92px}.dk .dk-st{font-size:34px}}
@media (max-width:860px){.dk .dk-big{font-size:clamp(72px,21vw,96px)}.dk .dk-big.w{font-size:clamp(52px,15vw,70px)}.dk .dk-st{font-size:clamp(24px,7vw,30px)}}

/* top nav: Download CV with an icon */
.hn-cv{display:inline-flex;align-items:center;gap:6px}
.hn-cv .dl-ic{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--e)}
.hn-cv:hover .dl-ic{transform:translateY(2px)}
/* footer: availability pill + back-to-top */
.f-sw{display:flex;align-items:center;gap:10px}
.f-top{flex:none;width:58px;height:58px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;background:rgba(255,255,255,.07);color:var(--dark-ink);cursor:pointer;transition:background .3s,color .3s,transform .5s var(--e)}
.f-top svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--e)}
.f-top:hover{background:var(--dark-ink);color:#0A0A0B}
.f-top:hover svg{transform:translateY(-2px)}
.f-top:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* contact: two doors — a project, or a job offer */
.mode{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:var(--bg-2);margin:-6px 0 26px}
.mode button{position:relative;z-index:1;height:48px;border-radius:999px;font:inherit;font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--muted);transition:color .35s}
.mode button[aria-selected=true]{color:#fff}
.mode button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.mode-th{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--ink);box-shadow:0 8px 20px -10px rgba(0,0,0,.5);transition:transform .55s var(--e)}
.mode.o .mode-th{transform:translateX(100%)}
#offer,#brief{animation:mIn .5s var(--e)}
@keyframes mIn{from{opacity:0;transform:translateY(8px)}}
@media (max-width:420px){.mode button{font-size:13.5px}}
/* hero: the short CV button */
.gbtn.cvb{padding-left:22px;padding-right:20px;gap:8px}
.gbtn.cvb svg{width:15px;height:15px}

/* contact toggle v2: two cards with an icon and a hint; the dark thumb slides between them */
.mode{padding:5px;border-radius:20px;background:var(--bg-2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);margin:-4px 0 28px}
.mode button{height:auto;min-height:64px;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:15px;text-align:left;color:var(--ink);transition:color .35s,background .3s}
.mode button:hover:not([aria-selected=true]){background:rgba(255,255,255,.6)}
.mode-th{top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:15px;box-shadow:0 12px 26px -14px rgba(0,0,0,.6)}
.md-ic{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04);transition:background .35s,transform .45s var(--e)}
.md-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.mode button[aria-selected=true] .md-ic{background:var(--acc);color:#fff;transform:rotate(-8deg)}
.md-t{display:grid;gap:2px;min-width:0}
.md-t b{font-weight:500;font-size:15.5px;letter-spacing:-.02em;line-height:1.15}
.md-t small{font-size:12.5px;line-height:1.2;color:var(--muted);transition:color .35s}
.mode button[aria-selected=true] .md-t small{color:rgba(255,255,255,.62)}
@media (max-width:460px){.mode button{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}.md-t small{display:none}}
/* clickable things keep the pointer over their text too */
body.has-cursor .modal button *,body.has-cursor .modal a *,body.has-cursor .modal label *{cursor:pointer}

/* header: a compact CV download that slides out of "Let's talk" once the hero is well behind you —
   the pill grows first, then the label rises into place and the arrow drops in with a small bounce */
.hcv{gap:6px;overflow:hidden;max-width:120px;background:rgba(255,255,255,.55);color:var(--ink);transform-origin:100% 50%;
  transition:max-width 1.1s var(--e),opacity .6s var(--e),transform 1.1s var(--e),padding 1.1s var(--e),margin 1.1s var(--e),background .3s,color .3s,box-shadow .3s}
.hcv span{display:inline-block;transition:transform .8s .28s var(--e),opacity .6s .28s,filter .8s .28s}
.hcv svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .9s .5s cubic-bezier(.34,1.7,.5,1),opacity .4s .5s}
.hcv:hover svg{transform:translateY(2px);transition-delay:0s;transition-duration:.35s}
body:not(.cv-on) .hcv{max-width:0;opacity:0;padding-left:0;padding-right:0;margin-right:-8px;pointer-events:none;box-shadow:none;transform:translateX(18px) scale(.85);transition-duration:.5s,.3s,.5s,.5s,.5s,.3s,.3s,.3s}
body:not(.cv-on) .hcv span{transform:translateY(120%);opacity:0;filter:blur(4px);transition-delay:0s;transition-duration:.3s}
body:not(.cv-on) .hcv svg{transform:translateY(-140%);opacity:0;transition-delay:0s;transition-duration:.3s}
body.on-dark .hcv{background:rgba(31,31,33,.6);color:var(--dark-ink);box-shadow:inset 0 0 0 1px var(--dark-line)}
@media (prefers-reduced-motion:reduce){.hcv,.hcv span,.hcv svg{transition:none!important}}
/* services: no step counter */
.svp-i{display:none}

/* UA: one stable footer line instead of the typewriter */
.f-sub.static #tw,.f-sub.static .caret{display:none}

html[lang=uk] #boards .cnt{visibility:hidden}
/* UA: Cyrillic headlines run wider — scale the design/code pair down a notch */
html[lang=uk] .dc-w{font-size:clamp(42px,6.3vw,116px)}
@media (min-width:1921px){html[lang=uk] .dc-w{font-size:109px}}
@media (max-width:860px){html[lang=uk] .dc-w{font-size:clamp(34px,9.6vw,56px)}}

/* footer credit: same rhythm as the two-line legal block on the left */
.f-made>span{line-height:26.3px}

/* ===== v2 logomark: the hero mark is drawn in dots (like the name); the vector stays only as the no-WebGL fallback ===== */
.mk-cv{position:absolute;left:0;top:0;display:block;pointer-events:none}
body .wm-mark .fbm,body.gl3d.flat-hero:not(.no-gl) .wm-mark .fbm{display:none!important}
body.no-gl .wm-mark .fbm{display:block!important}
body.no-gl .mk-cv{display:none}
.in-mark{transition:opacity .5s var(--e)}
.in-stage.px .in-mark{opacity:0}
.in-px{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}

/* a clear way out of the design/code scene: straight to the work */
@property --sa{syntax:'<angle>';inherits:false;initial-value:0deg}
.dc-skip{--k:0;position:absolute;left:50%;bottom:calc(30px + env(safe-area-inset-bottom,0px));z-index:6;display:inline-flex;align-items:center;gap:22px;padding:10px 10px 10px 38px;border-radius:999px;background:#0E0E0F;color:#F4F4F5;text-decoration:none;isolation:isolate;box-shadow:0 30px 70px -22px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07) inset;opacity:0;pointer-events:none;transform:translate(-50%,28px) scale(.86);will-change:transform,opacity;transition:background .35s var(--e),box-shadow .35s var(--e)}
.dc-skip.on{pointer-events:auto}
/* a spark that keeps running round the edge */
.dc-skip::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--sa),transparent 0 62%,rgba(255,90,31,.15) 70%,#FF5A1F 84%,#FFD2BF 88%,transparent 92%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:skipSpin 3.2s linear infinite;z-index:-1;pointer-events:none}
/* soft orange breath under the pill */
.dc-skip-g{position:absolute;inset:18% 12% -30%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,90,31,.55),transparent);filter:blur(18px);z-index:-2;opacity:.45;animation:skipBreath 2.6s ease-in-out infinite;pointer-events:none}
.dc-skip-t{display:block;overflow:hidden;height:1.2em;line-height:1.2em;font-size:clamp(20px,1.75vw,27px);font-weight:500;letter-spacing:-.025em;white-space:nowrap}
.dc-skip-r{display:block;text-shadow:0 1.2em 0 #FF5A1F;transition:transform .55s var(--e)}
.dc-skip-a{position:relative;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--acc);color:#fff;flex:none;overflow:hidden;transition:transform .45s var(--e)}
.dc-skip-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--k));opacity:.9}
.dc-skip-ar{position:relative;display:block;width:20px;height:20px;overflow:hidden}
.dc-skip-ar svg{position:absolute;left:0;top:0;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;animation:skipNudge 1.8s var(--e) infinite;transition:transform .5s var(--e)}
.dc-skip-ar svg+svg{transform:translateY(-130%);animation:none}
@keyframes skipNudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@keyframes skipSpin{to{--sa:360deg}}
@keyframes skipBreath{0%,100%{opacity:.3;transform:scale(.92)}50%{opacity:.6;transform:scale(1.06)}}
.dc-skip:hover{background:#000;box-shadow:0 34px 80px -22px rgba(255,90,31,.55),0 0 0 1px rgba(255,255,255,.1) inset}
.dc-skip:hover .dc-skip-r{transform:translateY(-1.2em)}
.dc-skip:hover .dc-skip-a{transform:scale(1.08)}
.dc-skip:hover .dc-skip-ar svg{animation:none;transform:translateY(130%)}
.dc-skip:hover .dc-skip-ar svg+svg{transform:translateY(0)}
.dc-skip:focus-visible{outline:2px solid var(--acc);outline-offset:5px}
.m-skw,.mc-s{display:none}
/* phones: the in-scene button hands over to one that rides in the bottom row, next to "Let's talk" */
@media (max-width:859px){
  .dc-skip{display:none}
  .mcta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0fr);column-gap:0;transition:transform .55s var(--e),opacity .35s,grid-template-columns .6s var(--e),column-gap .6s var(--e)}
  .mcta.sk{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);column-gap:8px}
  .mcta .mc-s,.mcta.sk .mc-l{display:none}.mcta.sk .mc-s{display:inline}
  .mcta .gbtn{min-width:0;white-space:nowrap;transition:font-size .4s var(--e)}
  .mcta.sk .gbtn{font-size:15px;padding-left:14px;padding-right:8px}
  .m-skw{display:block;min-width:0;overflow:hidden;border-radius:999px}
  .m-skip{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 7px 0 14px;border-radius:999px;background:#0E0E0F;color:#F4F4F5;text-decoration:none;white-space:nowrap;box-shadow:0 18px 40px -12px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08) inset;opacity:0;transform:translateX(30%) scale(.92);transition:opacity .35s var(--e),transform .6s var(--e)}
  .mcta.sk .m-skip{opacity:1;transform:none;transition-delay:.08s}
  /* both buttons arrive together: while the row is hidden, its layout switches instantly and the row slides in as one */
  .mcta:not(.on){transition:transform .55s var(--e),opacity .35s}
  .mcta:not(.on) .m-skip{transition:none}
  .m-skip::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--sa),transparent 0 62%,rgba(255,90,31,.15) 70%,#FF5A1F 84%,#FFD2BF 88%,transparent 92%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:skipSpin 3.2s linear infinite;z-index:-1;pointer-events:none}
  .m-skip-t{font-size:15px;font-weight:500;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis}
  .m-skip-a{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--acc);color:#fff}
  .m-skip-a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;animation:skipNudge 1.8s var(--e) infinite}
}
@media (max-width:859px) and (prefers-reduced-motion:reduce){.m-skip::before,.m-skip-a svg{animation:none}}
@media (prefers-reduced-motion:reduce){.dc-skip::before,.dc-skip-g,.dc-skip-ar svg{animation:none}}

/* page transition layer (shared with the case pages) */
.pt{position:fixed;inset:0;width:100vw;height:100vh;z-index:1000;pointer-events:none;display:none}
html.pt-in body::after{content:"";position:fixed;inset:0;background:#070708;z-index:999}
/* phones: a shorter story — less scrolling with the 3D mark, Work arrives sooner (after the base rules so it wins) */
@media (max-width:859px){
  .dc{height:420vh}
  .dc-fade{height:140vh;height:140svh;margin-top:-140vh;margin-top:-140svh}
  .flow{margin-top:-80vh!important;margin-top:-80svh!important}
}