/* =====================================================================
   btrxinfinity — site styles
   Desktop (≥1100px) is the Figma 1728 frame, scaled by --k
   (one Figma pixel). Tablet and phone get their own fluid layouts.
   Tokens written as "calc(64 * var(--k))" are expanded to calc(64 * var(--k)) by build.py
   ===================================================================== */

@font-face{font-family:"HND";src:local("Helvetica Now Display"),local("HelveticaNowDisplay-Regular"),url("/fonts/HelveticaNowDisplay-Regular.woff2") format("woff2"),url("/fonts/HelveticaNowDisplay-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"HND";src:local("Helvetica Now Display Medium"),local("HelveticaNowDisplay-Medium"),url("/fonts/HelveticaNowDisplay-Medium.woff2") format("woff2"),url("/fonts/HelveticaNowDisplay-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"HND";src:local("Helvetica Now Display Bold"),local("HelveticaNowDisplay-Bold"),url("/fonts/HelveticaNowDisplay-Bold.woff2") format("woff2"),url("/fonts/HelveticaNowDisplay-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"HND";src:local("Helvetica Now Display ExtraBlack"),local("HelveticaNowDisplay-ExtBlk"),url("/fonts/HelveticaNowDisplay-ExtBlk.woff2") format("woff2"),url("/fonts/HelveticaNowDisplay-ExtBlk.ttf") format("truetype");font-weight:900;font-display:swap}

:root{
  --ink:#0e0e0e; --ink2:#282828; --dim:rgba(14,14,14,.54); --dim6:rgba(14,14,14,.6);
  --grey:#f6f6f6; --row:#fafafa; --slot:#e3e3e3;
  --line:rgba(199,199,199,.21); --line2:rgba(199,199,199,.42); --mark:#3f4144;
  --ease:cubic-bezier(.22,1,.36,1); --ease2:cubic-bezier(.65,0,.35,1);
  --font:"HND","Helvetica Now Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gut:16px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;container-type:inline-size;word-spacing:.04em}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
p,h1,h2,h3,h4,ul,ol,figure{margin:0;padding:0}
ul{list-style:none}
::selection{background:#0e0e0e;color:#fff}
:focus-visible{outline:2px solid #0e0e0e;outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- page frame + construction guides ---------- */
.page{--k:calc(100vw / 1728);--k:calc(min(100cqw, 2160px) / 1728);position:relative;width:100%;max-width:2160px;margin:0 auto;overflow:clip}
.page::before,.page::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line);z-index:3;pointer-events:none;transform-origin:top;transform:scaleY(var(--gd,1));transition:transform 1.6s var(--ease)}
.page::before{left:var(--gut)}
.page::after{right:var(--gut)}
.sec{position:relative;padding:0 var(--gut)}
.grey{background:var(--grey)}

/* horizontal rule with plus markers where it meets the guides */
.rule{position:relative;height:1px;margin:0 calc(var(--gut) * -1);background:var(--line);transform-origin:left;z-index:2}
.rule.ext{width:auto}
.rule::before,.rule::after,.rule .mk{content:"";position:absolute;top:-6px;width:13px;height:13px;background:var(--mark);
  clip-path:polygon(40.4% 0,59.6% 0,59.6% 40.4%,100% 40.4%,100% 59.6%,59.6% 59.6%,59.6% 100%,40.4% 100%,40.4% 59.6%,0 59.6%,0 40.4%,40.4% 40.4%);z-index:4}
.rule::before{left:calc(var(--gut) - 6px)}
.rule::after{right:calc(var(--gut) - 6px)}
.rule.sq::before,.rule.sq::after,.rule.sq .mk{width:6px;height:6px;top:-3px;clip-path:none}
.rule.sq::before{left:calc(var(--gut) - 3px)}.rule.sq::after{right:calc(var(--gut) - 3px)}
.rule.nom::before,.rule.nom::after{display:none}
.rule .mk{display:none}

/* ---------- type ---------- */
.eb{display:flex;align-items:center;gap:7px;font-weight:500;font-size:12px;line-height:1.4;color:var(--dim);letter-spacing:0;text-transform:none}
.eb i{width:5px;height:5px;border-radius:50%;background:var(--dim);flex:none}
.eb.c{justify-content:center}
.h2{font-weight:700;font-size:40px;line-height:1;letter-spacing:-.047em;color:var(--ink)}
.h2.c{text-align:center}
.lead{font-size:17px;line-height:1.5;letter-spacing:-.02em;color:var(--dim)}
.lead.m{font-weight:500;line-height:1.2}
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln>span{display:block;transform:translateY(105%);transition:transform 1s var(--ease)}
.in .ln>span,.ln.in>span{transform:none}
.fade{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.in .fade,.fade.in{opacity:1;transform:none}

/* ---------- arrow, roll labels, buttons ---------- */
.arw{width:.84em;height:.84em;flex:none;overflow:hidden;position:relative}
.arw svg{width:100%;height:100%;transition:transform .5s var(--ease)}
.arw svg+svg{position:absolute;inset:0;transform:translate(-110%,110%)}
a:hover .arw svg:first-child,button:hover .arw svg:first-child{transform:translate(110%,-110%)}
a:hover .arw svg+svg,button:hover .arw svg+svg{transform:none}
.roll{display:inline-block;overflow:hidden;position:relative;vertical-align:top;height:1.2em;line-height:1.2}
.roll>span{display:block;transition:transform .55s var(--ease)}
.roll>span+span{position:absolute;left:0;top:100%}
a:hover .roll>span,button:hover .roll>span{transform:translateY(-100%)}
.lnk{display:inline-flex;align-items:center;gap:.3em;font-weight:500;letter-spacing:-.04em;color:var(--ink2);white-space:nowrap}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.45em;background:#282828;color:#fff;font-weight:500;letter-spacing:-.04em;white-space:nowrap;overflow:hidden;isolation:isolate;border:1px solid #282828;min-height:48px;padding:0 20px;font-size:16px}
.btn::before{content:"";position:absolute;inset:0;background:#fff;transform:translateY(101%);transition:transform .55s var(--ease);z-index:-1}
.btn:hover{color:#0e0e0e}
.btn:hover::before{transform:none}
.btn .arw svg path{stroke:currentColor}
.btn-o{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.4em;border:1px solid #282828;color:#282828;font-weight:500;letter-spacing:-.04em;background:#fff;overflow:hidden;isolation:isolate;min-height:44px;padding:0 16px;font-size:15px;white-space:nowrap}
.btn-o::before{content:"";position:absolute;inset:0;background:#282828;transform:translateY(101%);transition:transform .55s var(--ease);z-index:-1}
.btn-o:hover{color:#fff}.btn-o:hover::before{transform:none}
.btn-o .arw svg path,.lnk .arw svg path{stroke:currentColor}

/* ---------- media slot (image now, video when one is uploaded) ---------- */
.media{position:relative;overflow:hidden;background:var(--slot)}
.media img,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media video{opacity:0;transition:opacity .6s}
.media video.on{opacity:1}
.media.empty{background:var(--slot)}
.media .shine{position:absolute;inset:0;background:#fff;transform-origin:right;transform:scaleX(1);transition:transform 1.2s var(--ease2);z-index:2}
.in .media .shine,.media.in .shine{transform:scaleX(0)}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:100;background:#000;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:22px var(--gut) calc(22px + env(safe-area-inset-bottom));transition:transform 1.1s var(--ease2)}
.loader.done{transform:translateY(-100%)}
.loader .lt{display:flex;justify-content:space-between;font-weight:500;font-size:13px;letter-spacing:-.02em;color:rgba(255,255,255,.6)}
.loader .lb{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.loader .num{font-weight:500;font-size:clamp(64px,13vw,200px);line-height:.8;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.loader .bar{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(14px + env(safe-area-inset-bottom));height:1px;background:rgba(255,255,255,.15)}
.loader .bar i{display:block;height:100%;background:#fff;transform-origin:left;transform:scaleX(var(--p,0));transition:transform .2s linear}
.loader .cap{font-weight:500;font-size:13px;color:rgba(255,255,255,.6);text-align:right;padding-bottom:6px}
html.noload .loader{display:none}

/* ---------- top bar (inner pages + after the hero nav) ---------- */
.top{position:fixed;left:0;right:0;top:0;z-index:50;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line2);transform:translateY(-102%);transition:transform .55s var(--ease)}
.top.show{transform:none}
.top .in-w{max-width:2160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px;padding:0 var(--gut);padding-top:env(safe-area-inset-top);box-sizing:content-box}
.top .logo{display:block;width:118px;color:var(--ink2)}
.top .logo svg{width:100%;height:auto;fill:currentColor}
.top nav{display:none;gap:28px;font-size:15px}
.top .r{display:flex;align-items:center;gap:14px}
.top .btn{min-height:40px;font-size:14px;padding:0 14px}
.burger{width:40px;height:40px;display:grid;place-items:center;border:1px solid #282828}
.burger i{display:block;width:16px;height:1.5px;background:#282828;box-shadow:0 5px 0 #282828,0 -5px 0 #282828;transition:transform .3s}
.menu{position:fixed;inset:0;z-index:60;background:#0e0e0e;color:#fff;display:flex;flex-direction:column;padding:calc(18px + env(safe-area-inset-top)) var(--gut) calc(24px + env(safe-area-inset-bottom));clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease2);visibility:hidden}
.menu.open{clip-path:inset(0);visibility:visible}
.menu .mh{display:flex;justify-content:space-between;align-items:center;height:40px}
.menu .mh svg{width:118px;fill:#fff}
.menu .x{width:40px;height:40px;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;font-size:20px;line-height:1}
.menu ul{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.menu li a{display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:clamp(36px,11vw,64px);letter-spacing:-.05em;line-height:1.1;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.menu li a .arw svg path{stroke:#fff}
.menu .mf{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:15px;color:rgba(255,255,255,.7)}
.menu .btn{margin-top:22px;width:100%;background:#fff;color:#0e0e0e;border-color:#fff;min-height:54px}
.menu .btn::before{background:#0e0e0e}.menu .btn:hover{color:#fff}

/* ---------- wordmark ---------- */
.wm{width:100%;height:auto;fill:#282828;overflow:visible}
.wm path{transform-box:fill-box}
.wm.anim path{transform:translateY(118%);transition:transform 1.15s var(--ease);transition-delay:calc(var(--i) * 48ms)}
.wm.anim.in path{transform:none}
.wmclip{overflow:hidden;padding-bottom:1px}

/* ---------- HOME ---------- */
.hero{padding-top:28px}
.hero .wmclip{margin:18px 0 22px}
.hnav{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:14px 10px;padding:22px 0;font-size:16px}
.hnav .l{display:contents}
.hnav .r{grid-column:1/-1;display:flex;flex-direction:column;gap:12px;margin-top:6px}
.hnav .r .lnk{justify-content:space-between;font-size:15px;border-bottom:1px solid var(--line2);padding-bottom:12px}
.hnav .r .btn{width:100%;min-height:54px;font-size:16px}
.strip{position:relative;margin:0 calc(var(--gut) * -1);padding:20px 0 34px;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.strip.drag{cursor:grabbing}
.strip .track{display:flex;gap:12px;width:max-content;will-change:transform}
.card{flex:none;width:78vw;max-width:520px}
.card .media{aspect-ratio:701/394;width:100%}
.card .media img{pointer-events:none;-webkit-user-drag:none}
.cap{display:flex;gap:6px;margin-top:10px;font-size:14px;letter-spacing:-.04em;white-space:nowrap}
.cap b{font-weight:500}
.cap span{color:#b3b3b3}
.intro{display:grid;gap:26px;padding-top:34px;padding-bottom:40px}
.intro p{font-size:16px;line-height:1.55;letter-spacing:-.017em;color:var(--ink2)}
.intro p b{font-weight:700}
.intro .btn-o{margin-top:22px}

/* ---------- ABOUT ---------- */
.logos{display:grid;grid-template-columns:repeat(2,1fr)}
.logos li{height:76px;display:grid;place-items:center;border-bottom:1px solid var(--line)}
.logos li:nth-child(odd){border-right:1px solid var(--line)}
.logos img{height:24px;width:auto;opacity:1;filter:none;transition:filter .4s}
.logos li:hover img{filter:brightness(.4)}
.ab1{display:grid;gap:26px;padding:56px 0 40px}
.ab1 .lead{max-width:672px}
.crew{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut) * -1);padding:0 var(--gut);scrollbar-width:none}
.crew::-webkit-scrollbar{display:none}
.crew .media{aspect-ratio:522/364;scroll-snap-align:start}
.ab2{padding-top:56px;padding-bottom:48px}
.ab2 .hd{display:grid;gap:22px;margin-bottom:34px}
.ab2 .hd .lead{max-width:336px}
.stats{display:grid;grid-template-columns:1fr;gap:0}
.stat{position:relative;border:1px solid var(--line2);margin-top:-1px;padding:26px 22px 24px;background:transparent;min-height:240px}
.stat .dots{display:flex;gap:5px}
.stat .dots i{width:5px;height:5px;border-radius:50%;background:rgba(14,14,14,.18)}
.stat .dots i.on{background:var(--ink)}
.stat .n{font-size:64px;line-height:1;letter-spacing:-.04em;margin-top:22px;font-variant-numeric:tabular-nums}
.stat h3{font-weight:700;font-size:15px;letter-spacing:-.03em;text-transform:uppercase;margin-top:30px}
.stat p{font-size:14px;line-height:1.47;letter-spacing:-.02em;color:var(--dim);margin-top:10px;text-align:justify;hyphens:auto}
.stat .sqm{position:absolute;width:6px;height:6px;background:var(--mark)}
.stat .sqm.a{left:-3px;top:-3px}.stat .sqm.b{right:-3px;top:-3px}.stat .sqm.c{left:-3px;bottom:-3px}.stat .sqm.d{right:-3px;bottom:-3px}
.ab3{padding:56px 0 48px;display:grid;gap:22px}
.ab3 .who .lead{margin-top:22px}
.ab3 .mis{display:grid;gap:14px}
.ab3 .mis p{font-size:17px;color:var(--dim);letter-spacing:-.02em}
.ab3 .mis .media{aspect-ratio:698/292}
.ab3 .wwd{margin-top:30px}
.acc{margin-top:26px}
.acc .it{background:var(--row);border-bottom:1px solid #fff}
.acc .q{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;text-align:left;padding:22px 20px;font-weight:500;font-size:22px;letter-spacing:-.05em;line-height:1.2}
.acc .q .ic{width:30px;height:30px;flex:none;transition:transform .5s var(--ease)}
.acc .it.open .q .ic{transform:rotate(180deg)}
.acc .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.acc .it.open .a{grid-template-rows:1fr}
.acc .a>div{overflow:hidden}
.acc .a p{padding:0 20px 24px;font-size:16px;line-height:1.5;letter-spacing:-.02em;color:var(--dim);max-width:620px}

/* ---------- SERVICES ---------- */
.svc .hd{padding:56px 0 34px;display:grid;gap:22px}
.svc .body{display:grid}
.svc .pic{aspect-ratio:775/719;margin:0 calc(var(--gut) * -1)}
.svc .pic .media{position:absolute;inset:0;transition:opacity .7s var(--ease)}
.svc .list .it{border-bottom:1px solid var(--line)}
.svc .list .q{display:flex;width:100%;justify-content:space-between;align-items:center;gap:16px;padding:26px 0;text-align:left;font-weight:500;font-size:26px;letter-spacing:-.05em;line-height:1.15}
.svc .list .q .ic{width:28px;height:28px;flex:none;transition:transform .5s var(--ease)}
.svc .list .it.open .q .ic{transform:rotate(180deg)}
.svc .list .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.svc .list .it.open .a{grid-template-rows:1fr}
.svc .list .a>div{overflow:hidden}
.svc .list .a p{font-size:16px;line-height:1.45;letter-spacing:-.03em;color:var(--dim);white-space:pre-line}
.svc .list ul{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 14px;margin:22px 0 28px}
.svc .list li{display:flex;align-items:center;gap:8px;font-weight:500;font-size:14px;letter-spacing:-.035em;color:var(--dim);line-height:1.6}
.svc .list li::before{content:"";width:4px;height:4px;background:currentColor;flex:none}
.svc .list li:first-child{color:#000}
.svc .foot{height:40px}

/* ---------- FAQ ---------- */
.faq{padding-top:56px}
.faq .hd{display:grid;gap:22px;justify-items:center;padding-bottom:40px}
.faq .list{position:relative;margin:0 auto;max-width:802px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.faq .it{border-bottom:1px solid var(--line)}
.faq .it:last-child{border-bottom:0}
.faq .q{display:flex;width:100%;justify-content:space-between;align-items:flex-start;gap:16px;text-align:left;padding:24px 18px;font-size:16px;line-height:1.3;letter-spacing:-.03em;transition:font-weight .2s}
.faq .q .ic{position:relative;width:15px;height:15px;flex:none;margin-top:2px;transition:transform .5s var(--ease)}
.faq .q .ic::before,.faq .q .ic::after{content:"";position:absolute;background:var(--ink);left:0;right:0;top:50%;height:2px;margin-top:-1px}
.faq .q .ic::after{transform:rotate(90deg)}
.faq .it.open .q{font-weight:700;font-size:19px;padding-top:30px}
.faq .it.open .q .ic{transform:rotate(45deg) scale(1.25)}
.faq .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.faq .it.open .a{grid-template-rows:1fr}
.faq .a>div{overflow:hidden}
.faq .a p{padding:0 18px 28px;font-size:15px;line-height:1.46;letter-spacing:-.03em;color:var(--dim);max-width:728px}
.faq .tail{height:56px}

/* ---------- PROJECTS ---------- */
.rw{display:grid;gap:30px;padding:56px 0 48px}
.rw .tx{display:grid;gap:18px;align-content:center}
.rw .btn{justify-self:start;margin-top:10px}
.rw .pic .media{aspect-ratio:1135/760;margin-right:calc(var(--gut) * -1)}
.rw .pic h3{font-weight:500;font-size:24px;letter-spacing:-.04em;margin-top:12px}
.prc .hd{padding:56px 0 34px;display:grid;gap:22px}
.prc .hd .lead{max-width:337px}
.prc .body{display:grid}
.prc .pic .media{aspect-ratio:744/635;margin:0 0 24px}
.steps{display:grid;grid-template-columns:1fr}
.step{position:relative;padding:22px 2px 26px;border-top:1px solid var(--line);min-height:200px;display:flex;flex-direction:column}
.step .top2{display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:14px;letter-spacing:-.02em}
.step .dots{display:flex;gap:4px}.step .dots i{width:4px;height:4px;border-radius:50%;background:rgba(14,14,14,.2)}.step .dots i.on{background:var(--ink)}
.step h3{margin-top:auto;padding-top:40px;font-weight:700;font-size:19px;letter-spacing:-.03em;text-transform:uppercase}
.step p{margin-top:10px;font-size:14px;line-height:1.47;letter-spacing:-.03em;color:var(--dim)}
.tst{padding-top:56px}
.tst .hd{display:grid;gap:22px;justify-items:center;padding-bottom:40px}
.tst .card2{max-width:523px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.tst .media{aspect-ratio:523/380}
.tst .bar2{display:flex;align-items:center;justify-content:space-between;padding:12px 0 12px 19px;border-bottom:1px solid var(--line)}
.tst .who b{display:block;font-weight:700;font-size:12px;letter-spacing:-.03em;text-transform:uppercase}
.tst .who span{display:block;font-size:12px;letter-spacing:-.03em;color:var(--dim6);margin-top:2px}
.tst .nav2{display:flex}
.tst .nav2 button{width:44px;height:44px;display:grid;place-items:center;transition:background .3s}
.tst .nav2 button svg{width:24px;height:24px}
.tst .nav2 .prev svg{transform:scaleX(-1)}
.tst .nav2 .prev svg path{stroke:#0e0e0e}
.tst .nav2 .next{background:#0e0e0e}
.tst .nav2 .prev:hover{background:var(--grey)}
.tst blockquote{margin:0;padding:22px 24px 34px;font-weight:500;font-size:15px;line-height:1.47;letter-spacing:-.03em;min-height:150px}
.tst blockquote q{quotes:none}
.tst blockquote .qm{font-weight:900}
.tst .slide{transition:opacity .45s var(--ease)}
.tst .slide.out{opacity:0}
.tst .tail{height:56px}

/* ---------- MORE PROJECTS ---------- */
.mp .hd{padding:64px 0 40px;display:grid;gap:16px;justify-items:center;text-align:center}
.mp .hd .lead{max-width:546px}
.mgrid{display:grid;gap:26px 20px}
.mgrid .card{width:auto;max-width:none}
.mgrid .card .media{aspect-ratio:773/434}
.mgrid .card.hide{display:none}
.mp .more{display:flex;justify-content:center;padding:40px 0 64px}

/* ---------- CONTACT ---------- */
.ct{padding-top:56px}
.ct .hd{display:grid;gap:22px;padding-bottom:40px}
.form{display:grid;gap:0;padding:26px 0 48px}
.f{display:grid;gap:10px;margin-bottom:22px}
.f label{font-size:13px;letter-spacing:-.03em;line-height:1.4}
.f input,.f textarea,.f select{width:100%;background:#fff;border:1px solid var(--line2);border-radius:0;padding:0 18px;height:56px;font-size:16px;letter-spacing:-.03em;color:var(--ink);outline:0;transition:border-color .3s,box-shadow .3s;-webkit-appearance:none;appearance:none}
.f textarea{height:120px;padding:16px 18px;resize:vertical;line-height:1.3}
.f input::placeholder,.f textarea::placeholder{color:var(--dim)}
.f input:hover,.f textarea:hover{border-color:#bcbcbc}
.f input:focus,.f textarea:focus{border-color:#0e0e0e}
.f.bad input,.f.bad textarea{border-color:#d33}
.f .err{font-size:12px;color:#c22;min-height:0}
.f2{display:grid;gap:0}
.submit{display:grid;gap:16px;align-items:center;margin-top:8px}
.submit p{font-size:13px;letter-spacing:-.03em;color:var(--dim)}
.submit p b{font-weight:400;color:var(--ink)}
.submit .btn{width:100%;min-height:60px;justify-content:space-between;padding:0 22px;font-size:14px;background:#000;border-color:#000}
.submit .btn .ra{width:22px;height:22px}
.submit .btn .ra path{stroke:currentColor}
.fstat{font-size:14px;letter-spacing:-.02em;min-height:20px}
.fstat.ok{color:#1b7f3b}.fstat.no{color:#c22}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- PRICING ---------- */
.pr{padding-top:56px}
.pr .hd{display:grid;gap:22px;padding-bottom:30px}
.tabs{display:inline-grid;grid-template-columns:1fr 1fr;background:var(--row);padding:5px;position:relative;width:100%;max-width:312px}
.tabs button{position:relative;z-index:1;height:44px;font-weight:500;font-size:16px;letter-spacing:-.04em;color:#71717a;transition:color .35s}
.tabs button.on{color:#000}
.tabs .pill{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);background:#fff;transition:transform .5s var(--ease)}
.tabs[data-i="1"] .pill{transform:translateX(100%)}
.plans{position:relative}
.pset{display:grid;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.pset[hidden]{display:none}
.pset.fade-out{opacity:0;transform:translateY(8px)}
.plan{border:1px solid var(--line);margin-top:-1px;display:flex;flex-direction:column}
.plan .pb{padding:28px 24px 30px}
.plan .smile{width:56px;height:56px}
.plan .ttl{height:30px;width:auto;margin-top:34px;fill:var(--ink)}
.plan .sf{font-size:20px;letter-spacing:-.05em;margin-top:18px}
.plan .price{height:44px;width:auto;margin-top:12px;fill:var(--ink)}
.plan ul{margin-top:34px;display:grid;gap:8px}
.plan li{display:flex;align-items:center;gap:14px;font-size:15px;line-height:1.5;letter-spacing:-.03em;color:var(--dim)}
.plan li svg{width:6px;height:11px;flex:none}
.plan .go{margin-top:auto;border-top:1px solid var(--line);height:72px;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:500;font-size:18px;letter-spacing:-.04em;transition:background .35s}
.plan .go:hover{background:var(--grey)}
.pr .tail{height:56px}

/* ---------- FOOTER ---------- */
.ft{padding-top:40px}
.ft .cols{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 20px;margin-top:40px}
.ft h4{font-weight:500;font-size:13px;letter-spacing:-.04em;color:var(--dim);margin-bottom:12px}
.ft li+li{margin-top:6px}
.ft li a{display:inline-flex;align-items:center;gap:4px;font-weight:500;font-size:18px;letter-spacing:-.04em;line-height:1.5;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease)}
.ft li a:hover{background-size:100% 1px}
.ft .em{grid-column:1/-1}
.ft .slab{margin-top:44px;height:160px;background:rgba(217,217,217,.25)}
.ft .slab.media{background:rgba(217,217,217,.25)}
.ft .legal{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--dim);padding:16px 0 calc(16px + env(safe-area-inset-bottom))}

/* =====================================================================
   TABLET  ≥700px
   ===================================================================== */
@media (min-width:700px){
  :root{--gut:32px}
  .h2{font-size:52px}
  .lead{font-size:19px}
  .eb{font-size:13px}
  .hnav{grid-template-columns:repeat(5,auto);font-size:17px}
  .hnav .r{flex-direction:row;justify-content:space-between;align-items:center}
  .hnav .r .lnk{border:0;padding:0;font-size:17px}
  .hnav .r .btn{width:auto;min-height:56px;padding:0 26px;font-size:17px}
  .card{width:56vw}
  .intro{grid-template-columns:1fr 1fr;gap:48px;padding-top:44px;padding-bottom:56px}
  .logos{grid-template-columns:repeat(4,1fr)}
  .logos li{border-right:1px solid var(--line)}
  .logos li:nth-child(4n){border-right:0}
  .crew{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;padding:0;gap:0}
  .ab2 .hd{grid-template-columns:1fr auto;align-items:end}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){margin-top:-1px}
  .stat:nth-child(even){margin-left:-1px}
  .ab3{grid-template-columns:1fr 1fr;column-gap:40px}
  .ab3 .who,.ab3 .wwd-h{grid-column:1}
  .ab3 .mis{grid-column:2;grid-row:1}
  .ab3 .wwd{grid-column:1/-1}
  .svc .list ul{grid-template-columns:repeat(3,1fr)}
  .rw{grid-template-columns:.8fr 1.2fr;align-items:center}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(odd){border-right:1px solid var(--line);padding-right:22px}
  .step:nth-child(even){padding-left:22px}
  .mgrid{grid-template-columns:1fr 1fr}
  .f2{grid-template-columns:1fr 1fr;column-gap:0}
  .f2 .f:first-child input{border-right:0}
  .submit{grid-template-columns:1fr 1fr}
  .plans .pset{grid-template-columns:1fr 1fr}
  .plan+.plan{margin-left:-1px}
  .pr .hd{grid-template-columns:1fr auto;align-items:end}
  .ft .cols{grid-template-columns:repeat(3,auto) 1fr}
  .ft .em{grid-column:auto;justify-self:end}
  .ft .slab{height:220px}
}

/* =====================================================================
   DESKTOP ≥1100px — the Figma frame, in Figma pixels (k)
   ===================================================================== */
@media (min-width:1100px){
  :root{--gut:0px}
  .page::before{left:calc(81 * var(--k))}
  .page::after{left:calc(1649 * var(--k));right:auto}
  .sec{padding:0}
  .rule{margin:0}
  .rule::before{left:calc(calc(81 * var(--k)) - 6.5px)}
  .rule::after{left:calc(calc(1649 * var(--k)) - 6.5px);right:auto}
  .rule.sq::before{left:calc(calc(81 * var(--k)) - 3px)}
  .rule.sq::after{left:calc(calc(1649 * var(--k)) - 3px);right:auto}
  .rule .mk{display:block;left:calc(var(--x) * var(--k) - 6.5px)}
  .rule.sq .mk{left:calc(var(--x) * var(--k) - 3px)}
  .w{margin-left:calc(103 * var(--k));margin-right:calc(79 * var(--k))}

  .eb{font-size:calc(13 * var(--k));line-height:calc(18.2 * var(--k));gap:calc(7 * var(--k))}
  .eb i{width:calc(5 * var(--k));height:calc(5 * var(--k))}
  .h2{font-size:calc(64 * var(--k));line-height:calc(64 * var(--k));letter-spacing:calc(-3 * var(--k))}
  .lead{font-size:calc(22 * var(--k));line-height:calc(34 * var(--k));letter-spacing:calc(-.5 * var(--k))}
  .lead.m{line-height:calc(26 * var(--k))}
  .btn{min-height:calc(67 * var(--k));padding:0 calc(22 * var(--k));font-size:calc(20 * var(--k));gap:calc(9 * var(--k))}
  .btn-o{min-height:calc(35 * var(--k));padding:0 calc(11 * var(--k));font-size:calc(16 * var(--k));gap:calc(6 * var(--k))}

  .top .in-w{height:64px;padding:0 calc(81 * var(--k))}
  .top nav{display:flex}
  .top .burger{display:none}

  /* HOME */
  .hero{padding-top:0}
  .hero .rule.t{margin-top:calc(77 * var(--k))}
  .hero .wmclip{margin:calc(24 * var(--k)) calc(100 * var(--k)) calc(24 * var(--k)) calc(100 * var(--k))}
  .hnav{display:flex;justify-content:space-between;align-items:center;height:calc(160 * var(--k));padding:0 calc(100 * var(--k)) 0 calc(100 * var(--k));font-size:calc(20 * var(--k))}
  .hnav .l{display:flex;gap:calc(42 * var(--k))}
  .hnav .r{display:flex;flex-direction:row;align-items:center;gap:calc(49 * var(--k));margin:0}
  .hnav .r .lnk{font-size:calc(20 * var(--k))}
  .hnav .r .btn{width:calc(189 * var(--k));min-height:calc(67 * var(--k));padding:0;font-size:calc(20 * var(--k))}
  .strip{margin:0;padding:calc(22 * var(--k)) 0 0;height:calc(449 * var(--k))}
  .strip .track{gap:calc(24 * var(--k))}
  .card{width:calc(701 * var(--k));max-width:none}
  .cap{font-size:calc(16.4 * var(--k));gap:calc(6 * var(--k));margin-top:calc(9 * var(--k))}
  .intro{grid-template-columns:calc(1030 * var(--k)) 1fr;gap:0;padding:calc(63 * var(--k)) 0 0 calc(101 * var(--k));min-height:calc(417 * var(--k));position:relative}
  .intro .l{max-width:calc(560 * var(--k))}
  .intro p{font-size:calc(18 * var(--k));line-height:calc(28 * var(--k));letter-spacing:calc(-.3 * var(--k))}
  .intro .r{max-width:calc(508 * var(--k))}
  .intro .btn-o{margin-top:calc(46 * var(--k))}
  .intro+.rule{margin-top:0}

  /* ABOUT 1 */
  .logos{grid-template-columns:repeat(4,calc(392 * var(--k)));margin-left:calc(81 * var(--k))}
  .logos li{height:calc(100 * var(--k));border:0!important}
  .logos img{height:auto;width:auto;max-height:calc(46 * var(--k))}
  .logos .l-commas img{width:calc(194 * var(--k))}.logos .l-jurni img{width:calc(170 * var(--k))}.logos .l-hero img{width:calc(143 * var(--k))}.logos .l-wix img{width:calc(265 * var(--k))}
  .logos .l-tandem img{width:calc(223 * var(--k))}.logos .l-usual img{width:calc(246 * var(--k))}.logos .l-epta img{width:calc(158 * var(--k))}.logos .l-dim img{width:calc(289 * var(--k));max-height:calc(62 * var(--k))}
  .ab1{grid-template-columns:calc(1033 * var(--k)) 1fr;gap:0;padding:calc(180 * var(--k)) 0 0;height:calc(474 * var(--k));margin-left:calc(103 * var(--k))}
  .ab1 .lead{margin-top:calc(24 * var(--k));max-width:calc(672 * var(--k))}
  .ab1 .h2{margin-top:calc(58 * var(--k));width:calc(491 * var(--k));line-height:calc(60 * var(--k))}
  .crew{grid-template-columns:calc(522 * var(--k)) calc(523 * var(--k)) calc(522 * var(--k));margin-left:calc(81 * var(--k));margin-right:0;width:calc(1567 * var(--k))}
  .crew .media{aspect-ratio:auto;height:calc(364 * var(--k))}
  /* ABOUT 2 */
  .ab2{padding:calc(180 * var(--k)) 0 0;height:calc(1211 * var(--k));position:relative}
  .ab2 .hd{grid-template-columns:1fr calc(336 * var(--k));margin:0 calc(101 * var(--k)) 0 calc(103 * var(--k));align-items:start;gap:0}
  .ab2 .hd .h2{width:calc(487 * var(--k));margin-top:calc(24 * var(--k))}
  .ab2 .hd .lead{margin-top:calc(168 * var(--k));max-width:calc(336 * var(--k));text-align:justify;line-height:calc(26 * var(--k))}
  .stats{position:absolute;left:calc(80 * var(--k));top:calc(540 * var(--k));width:calc(1569 * var(--k));height:calc(571 * var(--k));display:block}
  .stat{position:absolute;width:calc(393 * var(--k));height:calc(286 * var(--k));padding:0;margin:0!important;min-height:0}
  .stat:nth-child(1){left:0;top:0}.stat:nth-child(2){left:calc(784.5 * var(--k));top:0}.stat:nth-child(3){left:calc(392 * var(--k));top:calc(285 * var(--k))}.stat:nth-child(4){left:calc(1176 * var(--k));top:calc(285 * var(--k))}
  .stat .dots{position:absolute;left:calc(30 * var(--k));top:calc(37 * var(--k));gap:calc(5 * var(--k))}
  .stat .dots i{width:calc(5 * var(--k));height:calc(5 * var(--k))}
  .stat .n{position:absolute;left:calc(30 * var(--k));top:calc(63 * var(--k));margin:0;font-size:calc(80 * var(--k));line-height:calc(64 * var(--k));letter-spacing:calc(-3 * var(--k))}
  .stat h3{position:absolute;left:calc(30 * var(--k));top:calc(171 * var(--k));margin:0;font-size:calc(16 * var(--k));line-height:calc(18.2 * var(--k));letter-spacing:calc(-.48 * var(--k))}
  .stat p{position:absolute;left:calc(30 * var(--k));top:calc(199 * var(--k));width:calc(333 * var(--k));margin:0;font-size:calc(15 * var(--k));line-height:calc(22 * var(--k));letter-spacing:calc(-.3 * var(--k))}
  .ab2 .rule.b{position:absolute;left:0;right:0;top:calc(1111 * var(--k))}
  /* ABOUT 3 */
  .ab3{display:block;position:relative;height:calc(1413 * var(--k));padding:0}
  .ab3 .who{position:absolute;left:calc(103 * var(--k));top:calc(79 * var(--k));width:calc(636 * var(--k))}
  .ab3 .who .h2{width:calc(487 * var(--k))}
  .ab3 .who .lead{margin-top:calc(134 * var(--k));text-align:justify}
  .ab3 .mis{position:absolute;left:calc(927 * var(--k));top:calc(132 * var(--k));width:calc(698 * var(--k));gap:0}
  .ab3 .mis p{text-align:right;font-size:calc(22 * var(--k));line-height:calc(34 * var(--k))}
  .ab3 .mis .media{height:calc(292 * var(--k));margin-top:calc(74 * var(--k));aspect-ratio:auto}
  .ab3 .wwd-h{position:absolute;left:calc(103 * var(--k));top:calc(647 * var(--k))}
  .ab3 .wwd{position:absolute;left:calc(865 * var(--k));top:calc(745 * var(--k));width:calc(783 * var(--k));margin:0}
  .acc{margin:0}
  .acc .q{height:calc(147 * var(--k));padding:0 calc(64 * var(--k));font-size:calc(40 * var(--k));line-height:calc(60 * var(--k));letter-spacing:calc(-2 * var(--k))}
  .acc .q .ic{width:calc(46 * var(--k));height:calc(46 * var(--k));margin-right:calc(-1 * var(--k))}
  .acc .a p{padding:0 calc(64 * var(--k)) calc(44 * var(--k));font-size:calc(18 * var(--k));line-height:calc(26 * var(--k));max-width:none}
  /* SERVICES */
  .svc .hd{padding:calc(79 * var(--k)) 0 0 calc(103 * var(--k));height:calc(295 * var(--k));display:block}
  .svc .hd .h2{margin-top:calc(24 * var(--k));line-height:calc(60 * var(--k))}
  .svc .body{grid-template-columns:calc(776 * var(--k)) 1fr;margin-left:calc(81 * var(--k));min-height:calc(719 * var(--k))}
  .svc .pic{aspect-ratio:auto;height:calc(719 * var(--k));margin:0;position:relative}
  .svc .list{padding-left:calc(50 * var(--k));margin-right:0}
  .svc .list .it{position:relative}
  .svc .list .q{padding:calc(42 * var(--k)) calc(51 * var(--k)) calc(42 * var(--k)) 0;font-size:calc(40 * var(--k));line-height:calc(60 * var(--k));letter-spacing:calc(-2 * var(--k))}
  .svc .list .q .ic{width:calc(46 * var(--k));height:calc(46 * var(--k))}
  .svc .list .a p{font-size:calc(18 * var(--k));line-height:calc(26 * var(--k));letter-spacing:calc(-.5 * var(--k));max-width:calc(622 * var(--k));margin-top:calc(-6 * var(--k))}
  .svc .list ul{grid-template-columns:calc(232 * var(--k)) calc(224 * var(--k)) 1fr;gap:calc(8 * var(--k)) 0;margin:calc(36 * var(--k)) 0 calc(38 * var(--k));max-width:calc(622 * var(--k))}
  .svc .list li{font-size:calc(14 * var(--k));line-height:calc(23.4 * var(--k));letter-spacing:calc(-.5 * var(--k));gap:calc(8 * var(--k));padding-left:0}
  .svc .list li::before{width:calc(4 * var(--k));height:calc(4 * var(--k))}
  .svc .vline{position:absolute;left:calc(857 * var(--k));top:0;bottom:0;width:1px;background:var(--line);z-index:2}
  .svc .foot{height:calc(100 * var(--k))}
  /* FAQ */
  .faq{padding:calc(80 * var(--k)) 0 0;position:relative}
  .faq .hd{padding:0;height:calc(288 * var(--k));gap:calc(24 * var(--k));align-content:start}
  .faq .hd .h2{width:calc(585 * var(--k))}
  .faq .list{max-width:none;width:calc(802 * var(--k));margin-left:calc(463 * var(--k));border:0}
  .faq .q{padding:calc(32 * var(--k)) calc(22 * var(--k)) calc(33 * var(--k)) calc(23.4 * var(--k));font-size:calc(18 * var(--k));line-height:calc(18 * var(--k));letter-spacing:calc(-.5 * var(--k));min-height:calc(83 * var(--k))}
  .faq .q .ic{width:calc(15 * var(--k));height:calc(15 * var(--k));margin-top:calc(2 * var(--k))}
  .faq .it.open .q{font-size:calc(22 * var(--k));line-height:calc(28 * var(--k));padding:calc(40 * var(--k)) calc(22 * var(--k)) 0 calc(23.4 * var(--k))}
  .faq .it.open .q .ic{margin-top:calc(4 * var(--k))}
  .faq .a p{padding:calc(24 * var(--k)) calc(50 * var(--k)) calc(39 * var(--k)) calc(23.4 * var(--k));font-size:calc(16 * var(--k));line-height:calc(23.4 * var(--k));letter-spacing:calc(-.5 * var(--k));max-width:none;text-align:justify}
  .faq .vl{position:absolute;top:0;bottom:0;width:1px;background:var(--line);z-index:2}
  .faq .vl.a{left:calc(462 * var(--k))}.faq .vl.b{left:calc(1264 * var(--k))}
  .faq .tail{height:calc(101 * var(--k))}
  /* PROJECTS */
  .rw{grid-template-columns:calc(490 * var(--k)) calc(1135 * var(--k));gap:0;padding:0;height:calc(1117 * var(--k));align-items:start}
  .rw .tx{padding:calc(382 * var(--k)) 0 0 calc(103 * var(--k));gap:0;align-content:start}
  .rw .tx .h2{margin-top:calc(24 * var(--k))}
  .rw .tx .lead{margin-top:calc(16 * var(--k));width:calc(373 * var(--k))}
  .rw .btn{margin-top:calc(46 * var(--k));min-height:calc(46 * var(--k));padding:0 calc(18 * var(--k));font-size:calc(20 * var(--k));justify-self:start}
  .rw .pic{margin-top:calc(175 * var(--k))}
  .rw .pic .media{height:calc(760 * var(--k));aspect-ratio:auto;margin:0}
  .rw .pic h3{font-size:calc(36 * var(--k));line-height:calc(64 * var(--k));margin:0}
  .prc .hd{padding:calc(180 * var(--k)) calc(103 * var(--k)) 0;height:calc(456 * var(--k));grid-template-columns:1fr calc(337 * var(--k));align-items:start;gap:0}
  .prc .hd>div:first-child .h2{margin-top:calc(24 * var(--k))}
  .prc .hd .lead{margin-top:calc(91 * var(--k));text-align:justify}
  .prc .body{grid-template-columns:calc(788 * var(--k)) 1fr;min-height:calc(676 * var(--k));position:relative}
  .prc .pic{padding:calc(27 * var(--k)) 0 0 calc(103 * var(--k))}
  .prc .pic .media{width:calc(744 * var(--k));height:calc(635 * var(--k));aspect-ratio:auto;margin:0}
  .steps{grid-template-columns:calc(391 * var(--k)) calc(389 * var(--k));margin-left:0}
  .step{min-height:calc(338 * var(--k));border-top:0;padding:calc(36 * var(--k)) calc(30 * var(--k)) calc(30 * var(--k)) calc(31 * var(--k))}
  .step:nth-child(odd){border-right:1px solid var(--line);padding-right:calc(30 * var(--k))}
  .step:nth-child(even){padding-left:calc(30 * var(--k))}
  .step:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .step .top2{font-size:calc(14.4 * var(--k))}
  .step .dots{gap:calc(4 * var(--k))}.step .dots i{width:calc(4 * var(--k));height:calc(4 * var(--k))}
  .step h3{font-size:calc(22 * var(--k));line-height:calc(18.2 * var(--k));letter-spacing:calc(-.66 * var(--k));padding:0;position:absolute;left:calc(31 * var(--k));top:calc(205 * var(--k));margin:0}
  .step p{position:absolute;left:calc(31 * var(--k));top:calc(248 * var(--k));width:calc(330 * var(--k));font-size:calc(15 * var(--k));line-height:calc(22 * var(--k));letter-spacing:calc(-.45 * var(--k));margin:0}
  .prc .vl{position:absolute;top:0;bottom:0;width:1px;background:var(--line);z-index:2}
  .prc .tail{height:calc(107 * var(--k))}
  .tst{padding:calc(80 * var(--k)) 0 0;position:relative}
  .tst .hd{padding:0;height:calc(250 * var(--k));gap:calc(24 * var(--k));align-content:start}
  .tst .hd .h2{width:calc(585 * var(--k))}
  .tst .card2{max-width:none;width:calc(523 * var(--k));margin-left:calc(604 * var(--k));border:0}
  .tst .media{height:calc(380 * var(--k));aspect-ratio:auto}
  .tst .bar2{padding:0 0 0 calc(19 * var(--k));height:calc(64 * var(--k))}
  .tst .who b{font-size:calc(12 * var(--k));line-height:calc(18.2 * var(--k))}
  .tst .who span{font-size:calc(12 * var(--k));line-height:calc(18.2 * var(--k));margin:0}
  .tst .nav2 button{width:calc(71 * var(--k));height:calc(64 * var(--k))}
  .tst .nav2 button svg{width:calc(34 * var(--k));height:calc(34 * var(--k))}
  .tst blockquote{padding:calc(36 * var(--k)) calc(23 * var(--k)) 0 calc(24 * var(--k));font-size:calc(15 * var(--k));line-height:calc(22 * var(--k));letter-spacing:calc(-.3 * var(--k));min-height:0;height:calc(176 * var(--k))}
  .tst .vl{position:absolute;top:0;bottom:0;width:1px;background:var(--line);z-index:2}
  .tst .vl.a{left:calc(604 * var(--k))}.tst .vl.b{left:calc(1127 * var(--k))}
  .tst .tail{height:calc(167 * var(--k))}
  /* MORE PROJECTS */
  .mp .hd{padding:calc(180 * var(--k)) 0 0;height:calc(452 * var(--k));gap:calc(16 * var(--k));align-content:start}
  .mp .hd .h2{width:calc(535 * var(--k));line-height:calc(65 * var(--k))}
  .mp .hd .lead{width:calc(546 * var(--k));line-height:calc(26 * var(--k))}
  .mgrid{grid-template-columns:calc(773 * var(--k)) calc(773 * var(--k));column-gap:calc(21 * var(--k));row-gap:calc(52 * var(--k));margin-left:calc(81 * var(--k))}
  .mgrid .card .media{height:calc(434 * var(--k));aspect-ratio:auto}
  .mp .more{padding:calc(60 * var(--k)) 0 calc(120 * var(--k))}
  .mp .more .btn-o{min-height:calc(46 * var(--k));padding:0 calc(16 * var(--k));font-size:calc(20 * var(--k))}
  /* CONTACT */
  .ct{padding:0;display:grid;grid-template-columns:calc(734 * var(--k)) calc(834 * var(--k));margin-left:calc(81 * var(--k))}
  .ct .hd{padding:calc(179 * var(--k)) 0 0 calc(21 * var(--k));grid-column:1;gap:calc(24 * var(--k));align-content:start}
  .ct .hd .h2{line-height:calc(68 * var(--k))}
  .ct .form{grid-column:2;padding:calc(42 * var(--k)) 0 0;margin-top:0}
  .f{gap:0;margin:0 0 0}
  .f label{display:block;height:calc(28 * var(--k));padding:0 0 0 calc(20 * var(--k));font-size:calc(13 * var(--k));line-height:calc(18.2 * var(--k))}
  .f input{height:calc(59 * var(--k));padding:0 calc(20 * var(--k));font-size:calc(16 * var(--k))}
  .f textarea{height:calc(150 * var(--k));padding:calc(15 * var(--k)) calc(20 * var(--k));font-size:calc(16 * var(--k));line-height:calc(19.2 * var(--k))}
  .f2{grid-template-columns:calc(400 * var(--k)) calc(434 * var(--k))}
  .f-gap{height:calc(20 * var(--k))}
  .submit{grid-template-columns:calc(400 * var(--k)) calc(434 * var(--k));gap:0;margin-top:calc(58 * var(--k));align-items:center}
  .submit p{font-size:calc(13 * var(--k));line-height:calc(18.2 * var(--k));padding-left:calc(20 * var(--k))}
  .submit .btn{min-height:calc(64 * var(--k));font-size:calc(14 * var(--k));padding:0 calc(20 * var(--k)) 0 calc(20 * var(--k))}
  .submit .btn .ra{width:calc(24 * var(--k));height:calc(24 * var(--k))}
  .ct .tail{grid-column:1/-1;height:calc(107 * var(--k))}
  .ct .vl{position:absolute;top:0;bottom:0;width:1px;background:var(--line);z-index:2;left:calc(815 * var(--k))}
  /* PRICING */
  .pr{padding:calc(144 * var(--k)) 0 0}
  .pr .hd{margin:0 calc(101 * var(--k)) 0 calc(103 * var(--k));padding:0;height:calc(152 * var(--k));grid-template-columns:1fr calc(312 * var(--k))}
  .pr .hd .h2{margin-top:calc(24 * var(--k));line-height:calc(60 * var(--k))}
  .tabs{padding:calc(5 * var(--k));max-width:none;width:calc(312 * var(--k));margin-top:calc(42 * var(--k))}
  .tabs button{height:calc(44 * var(--k));font-size:calc(20 * var(--k))}
  .tabs .pill{top:calc(5 * var(--k));bottom:calc(5 * var(--k));left:calc(5 * var(--k));width:calc(150 * var(--k))}
  .tabs[data-i="1"] .pill{transform:translateX(calc(152 * var(--k)))}
  .plans{margin-left:calc(343 * var(--k));width:calc(1046 * var(--k))}
  .plans .pset{grid-template-columns:calc(523 * var(--k)) calc(523 * var(--k))}
  .plan{height:calc(741 * var(--k));margin:0!important;border-top:0;border-bottom:0}
  .plan+.plan{border-left:0}
  .plan .pb{padding:calc(30 * var(--k)) calc(28 * var(--k)) 0 calc(28 * var(--k))}
  .plan .smile{width:calc(68 * var(--k));height:calc(68 * var(--k))}
  .plan .ttl{height:calc(34 * var(--k));margin-top:calc(48 * var(--k))}
  .plan .sf{font-size:calc(24 * var(--k));line-height:calc(18.2 * var(--k));letter-spacing:calc(-1.2 * var(--k));margin-top:calc(35 * var(--k))}
  .plan .price{height:calc(51 * var(--k));margin-top:calc(22 * var(--k))}
  .plan ul{margin-top:calc(43 * var(--k));gap:calc(10 * var(--k))}
  .plan li{font-size:calc(16 * var(--k));line-height:calc(24.6 * var(--k));letter-spacing:calc(-.5 * var(--k));gap:calc(14 * var(--k));padding-left:calc(5 * var(--k))}
  .plan li svg{width:calc(5 * var(--k));height:calc(11 * var(--k))}
  .plan .go{height:calc(80 * var(--k));font-size:calc(20 * var(--k));gap:calc(6 * var(--k))}
  .pr .tail{height:calc(80 * var(--k))}
  /* FOOTER */
  .ft{padding:calc(80 * var(--k)) 0 0;height:calc(1100 * var(--k))}
  .ft .wmclip{margin:0 calc(100 * var(--k))}
  .ft .cols{display:block;position:relative;margin:calc(60 * var(--k)) 0 0;height:calc(303 * var(--k))}
  .ft .cols>div{position:absolute;top:0}
  .ft .cols .c1{left:calc(102 * var(--k))}.ft .cols .c2{left:calc(234 * var(--k))}.ft .cols .c3{left:calc(366 * var(--k))}.ft .cols .em{left:calc(1440 * var(--k));width:calc(186 * var(--k))}
  .ft h4{font-size:calc(14 * var(--k));line-height:calc(21 * var(--k));margin-bottom:calc(16 * var(--k))}
  .ft li+li{margin-top:calc(2 * var(--k))}
  .ft li a{font-size:calc(20 * var(--k));line-height:calc(35 * var(--k));gap:calc(4 * var(--k))}
  .ft .slab{margin:0 calc(99 * var(--k)) 0 calc(100 * var(--k));height:calc(274 * var(--k))}
  .ft .legal{display:none}
}
@media (min-width:1100px) and (max-width:1279px){
  .hnav .l{gap:calc(30 * var(--k))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .ln>span,.wm.anim path{transform:none!important}
  .fade{opacity:1;transform:none}
  .media .shine{display:none}
}

/* ---- structural helpers ---- */
.gap{height:var(--hm,40px)}
.pm{display:none}
.vl{display:none}
.tail{height:48px}
@media (min-width:700px){.gap{height:var(--ht,56px)}}
@media (min-width:1100px){
  .gap{height:calc(var(--h) * var(--k))}
  .vl{display:block;position:absolute;top:0;bottom:0;width:1px;background:var(--line);z-index:2}
  .pm{display:block;position:absolute;left:calc(var(--x) * var(--k) - 6.5px);top:calc(var(--y) * var(--k) - 6.5px);width:13px;height:13px;background:var(--mark);z-index:4;
    clip-path:polygon(40.4% 0,59.6% 0,59.6% 40.4%,100% 40.4%,100% 59.6%,59.6% 59.6%,59.6% 100%,40.4% 100%,40.4% 59.6%,0 59.6%,0 40.4%,40.4% 40.4%)}
  .pm.sq{width:6px;height:6px;clip-path:none;left:calc(var(--x) * var(--k) - 3px);top:calc(var(--y) * var(--k) - 3px)}
  .tail{height:calc(var(--h) * var(--k))}
  /* contact, re-laid as rows */
  .ct{display:block;margin:0;padding:0;position:relative}
  .ct .hd{padding:calc(78 * var(--k)) 0 0 calc(102 * var(--k));height:calc(366 * var(--k));gap:calc(24 * var(--k))}
  .ct .form{margin-left:calc(815 * var(--k));width:calc(834 * var(--k));padding:calc(35 * var(--k)) 0 calc(36 * var(--k))}
  .f{margin-bottom:calc(20 * var(--k))}
  .f textarea{height:calc(112 * var(--k))}
  .submit{margin-top:calc(38 * var(--k))}
  .ct .vl{left:calc(815 * var(--k))}
  /* projects: process + testimonials verticals */
  .prc{position:relative}
  .prc .vl.a{left:calc(869 * var(--k))}.prc .vl.b{left:calc(1260 * var(--k))}
  .step:nth-child(odd){border-right:0}
  .steps{position:relative}
  /* pricing verticals */
  .pr{position:relative}
  .pr .vl.a{left:calc(343 * var(--k))}.pr .vl.b{left:calc(866 * var(--k))}.pr .vl.c{left:calc(1389 * var(--k))}
  .plan{border:0}
  .intro .tail{height:calc(97 * var(--k))}
  .hero .rule.t{margin-top:calc(77 * var(--k))}
  .mp .hd{padding-top:calc(79 * var(--k));height:calc(351 * var(--k))}
  .mp .more{padding:calc(100 * var(--k)) 0 calc(40 * var(--k))}
}

.wmclip{display:block}
.ln{white-space:nowrap}
.plan .ttl.m{height:41.5px;margin-top:29.5px}
@media (max-width:420px){.h2 .ln{white-space:normal}}
@media (min-width:1100px){
  .plan .ttl{height:calc(34 * var(--k));margin-top:calc(48 * var(--k))}
  .plan .ttl.m{height:calc(47 * var(--k));margin-top:calc(44.5 * var(--k))}
  .acc .a p{margin-top:0;padding-top:0}
  .acc .it.open .q{height:calc(110 * var(--k));padding-top:calc(6 * var(--k))}
  .ab3{height:auto;padding-bottom:calc(80 * var(--k))}
  .ab3 .wwd{position:relative;left:auto;top:auto;margin-left:calc(865 * var(--k));padding-top:calc(745 * var(--k))}
  .rw{grid-template-columns:calc(593 * var(--k)) calc(1135 * var(--k))}
  .prc .body{grid-template-columns:calc(869 * var(--k)) calc(780 * var(--k))}
  .ab1 .h2,.ab2 .hd .h2{width:auto}
}

/* =====================================================================
   v2 — one navigation everywhere, markers always above the lines,
   mobile dock instead of the hamburger, ticker, horizontal work gallery
   ===================================================================== */

/* ---------- layering: guide lines underneath, plus + square markers on top ---------- */
.page::before,.page::after{z-index:1}
.rule{z-index:auto}
.rule::before,.rule::after,.rule .mk{z-index:6}
.vl,.svc .vline{z-index:1}
.pm,.stat .sqm{z-index:6}
.media{z-index:auto}
.top{z-index:60}
.loader{z-index:120}

/* ---------- wordmark rise: every glyph travels the full height, so nothing peeks ---------- */
.wm path{transform-box:view-box}
.wm.anim path{transform:translateY(105%)}
.wm.anim.in path{transform:none}
html:not(.js) .wm.anim path{transform:none}

/* ---------- shared bits ---------- */
.sqd{display:inline-block;width:6px;height:6px;background:var(--mark);flex:none}
.nlogo{display:block;width:118px;color:#282828;flex:none}
.nlogo .wm{fill:#282828}
.lnk .sqd{margin-right:.5em;align-self:center}
.lnk .arw,.btn .arw,.btn-o .arw{width:.78em;height:.78em}
.btn{gap:.6em}
.btn-o{gap:.5em}

/* inactive pages recede, the page you are on is solid ink with the square marker */
.phd .hnav .l .lnk:not(.cur),.top nav .lnk:not(.cur){color:rgba(14,14,14,.48);transition:color .3s}
.phd .hnav .l .lnk:not(.cur):hover,.top nav .lnk:not(.cur):hover{color:var(--ink)}
.lnk.cur{color:var(--ink)}

/* ---------- page header (inner pages) ---------- */
.mhead{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.mhead .nlogo{width:124px}
.where{display:flex;align-items:center;gap:8px;font-weight:500;font-size:14px;letter-spacing:-.03em;color:var(--ink)}
.phd .hnav{display:none}

/* ---------- desktop bar (appears on scroll up) ---------- */
.top{display:none}
.top .in-w{height:68px;gap:24px}
.top nav{display:flex;gap:34px}
.top .lnk{font-size:16px}
.top .btn{min-height:44px;padding:0 18px;font-size:15px}

/* ---------- mobile + tablet dock (replaces the hamburger) ---------- */
.dock{position:fixed;z-index:70;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));max-width:560px;margin:0 auto;display:flex;align-items:stretch;gap:4px;padding:5px;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border:1px solid rgba(199,199,199,.55);box-shadow:0 14px 34px -14px rgba(0,0,0,.28);
  transition:transform .5s var(--ease)}
.dock.hide{transform:translateY(calc(100% + 30px))}
.dock a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:50px;font-weight:500;font-size:12px;letter-spacing:-.03em;color:rgba(14,14,14,.5);transition:color .25s,background .25s}
.dock a .sqd{opacity:0;transform:scale(.4);transition:opacity .3s,transform .3s}
.dock a.cur{color:var(--ink)}
.dock a.cur .sqd{opacity:1;transform:none}
.dock a:active{background:var(--grey)}
.dock .dk-b{flex:1.55;flex-direction:row;gap:7px;background:#282828;color:#fff;font-size:13px}
.dock .dk-b:active{background:#000}
.dock .dk-b .arw{width:11px;height:11px}
body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}

/* home, phones + tablets: links live in the dock, keep the email line */
.hero .hnav{display:flex;justify-content:space-between;align-items:center;padding:16px 0;grid-template-columns:none}
.hero .hnav .l{display:none}
.hero .hnav .r{display:block;margin:0;width:100%}
.hero .hnav .r .lnk{display:flex;justify-content:space-between;border:0;padding:0;font-size:15px}
.hero .hnav .r .btn{display:none}

/* ---------- ticker ---------- */
.ticker{position:relative;overflow:hidden;padding:22px 0;user-select:none;-webkit-user-select:none}
.tk-track{display:flex;width:max-content;animation:tick 42s linear infinite}
.ticker:hover .tk-track{animation-play-state:paused}
.tk-set{display:flex;align-items:center;flex:none}
.ti{font-weight:500;font-size:40px;line-height:1.05;letter-spacing:-.05em;color:var(--ink2);white-space:nowrap;padding:0 22px;transition:color .3s}
.ticker .pl{width:12px;height:12px;fill:var(--mark);flex:none}
@keyframes tick{to{transform:translate3d(-50%,0,0)}}

/* ---------- Recent Work in Motion: horizontal gallery ---------- */
.hs{padding-top:48px;padding-bottom:40px}
.hs-pin{display:grid;gap:26px}
.hs-tx{display:grid;gap:16px;justify-items:start}
.hs-ctl{display:flex;align-items:center;gap:14px;width:100%;margin-top:6px}
.hs-ctl .num{font-weight:500;font-size:14px;letter-spacing:-.02em;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.hs-ctl .num b{color:var(--ink);font-weight:500}
.hs-bar{flex:1;height:1px;background:var(--line2);position:relative;min-width:40px}
.hs-bar i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(.04);transition:transform .2s linear}
.hs-btns{display:flex}
.hs-btns button{width:44px;height:44px;display:grid;place-items:center;border:1px solid #282828;transition:background .3s}
.hs-btns button svg{width:22px;height:22px}
.hs-btns .prev svg{transform:scaleX(-1)}
.hs-btns .prev svg path{stroke:#0e0e0e}
.hs-btns .prev:hover{background:var(--grey)}
.hs-btns .next{background:#282828}
.hs-vp{overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut) * -1);padding:0 var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
.hs-vp::-webkit-scrollbar{display:none}
.hs-track{display:flex;gap:12px;width:max-content}
.hs-card{width:84vw;max-width:640px;scroll-snap-align:start;scroll-margin-left:var(--gut);margin:0}
.hs-card .media{aspect-ratio:1135/760}
.hs-card figcaption{display:flex;gap:8px;margin-top:10px;font-size:16px;letter-spacing:-.04em;white-space:nowrap}
.hs-card figcaption b{font-weight:500}
.hs-card figcaption span{color:#b3b3b3}

/* parallax pictures get a little room */
.media[data-par] img{transform:scale(1.12);will-change:transform}

/* ---------- small phones ---------- */
@media (max-width:420px){
  .h2{font-size:36px}
  .ti{font-size:34px;padding:0 18px}
  .svc .list .q{font-size:23px}
  .acc .q{font-size:20px;padding:20px 18px}
  .plan .pb{padding:26px 20px 28px}
  .ft li a{font-size:17px}
}

/* ---------- tablet ---------- */
@media (min-width:700px){
  .ti{font-size:56px;padding:0 30px}
  .ticker{padding:30px 0}
  .ticker .pl{width:14px;height:14px}
  .hs-card{width:62vw}
  .mhead{height:76px}
  .mhead .nlogo{width:140px}
}

/* ---------- desktop: the Figma frame ---------- */
@media (min-width:1100px){
  body{padding-bottom:0}
  .dock{display:none}
  .mhead{display:none}
  .phd .hnav{display:flex}
  .top{display:block}
  .top .in-w{padding:0 calc(81 * var(--k))}
  .top .nlogo{width:132px}
  .hnav .nlogo{width:calc(150 * var(--k));margin-right:calc(12 * var(--k))}
  .hnav .l{align-items:center}
  .phd .hnav{height:calc(132 * var(--k))}
  .hero .hnav{padding:0 calc(100 * var(--k));height:calc(160 * var(--k))}
  .hero .hnav .l{display:flex}
  .hero .hnav .r{display:flex;width:auto}
  .hero .hnav .r .lnk{display:inline-flex;font-size:calc(20 * var(--k))}
  .hero .hnav .r .btn,.phd .hnav .r .btn{display:inline-flex}
  .lnk .sqd{width:calc(6 * var(--k));height:calc(6 * var(--k));min-width:5px;min-height:5px}

  .ticker{padding:calc(44 * var(--k)) 0}
  .ti{font-size:calc(88 * var(--k));padding:0 calc(44 * var(--k))}
  .ticker .pl{width:calc(18 * var(--k));height:calc(17 * var(--k))}

  .hs{padding:0}
  .hs-pin{grid-template-columns:calc(593 * var(--k)) 1fr;gap:0;align-items:center;min-height:calc(1117 * var(--k))}
  .hs.pin .hs-pin{position:sticky;top:0;height:100vh;min-height:0;overflow:hidden}
  .hs-tx{padding:0 calc(40 * var(--k)) 0 calc(103 * var(--k));gap:0}
  .hs-tx .h2{margin-top:calc(24 * var(--k))}
  .hs-tx .lead{margin-top:calc(16 * var(--k));width:calc(373 * var(--k))}
  .hs-tx .btn{margin-top:calc(46 * var(--k));min-height:calc(46 * var(--k));padding:0 calc(18 * var(--k));font-size:calc(20 * var(--k))}
  .hs-ctl{margin-top:calc(64 * var(--k));width:calc(400 * var(--k));gap:calc(14 * var(--k))}
  .hs-ctl .num{font-size:calc(14 * var(--k))}
  .hs-btns button{width:calc(56 * var(--k));height:calc(52 * var(--k))}
  .hs-btns button svg{width:calc(28 * var(--k));height:calc(28 * var(--k))}
  .hs-vp{margin:0;padding:0}
  .hs.pin .hs-vp{overflow:hidden}
  .hs-track{gap:calc(24 * var(--k));padding-right:calc(81 * var(--k))}
  .hs-card{width:min(calc(1135 * var(--k)), calc((100vh - 150px) * 1.4934));max-width:none}
  .hs-card figcaption{font-size:calc(24 * var(--k));margin-top:calc(12 * var(--k))}
}
@media (prefers-reduced-motion:reduce){
  .tk-track{animation:none}
  .media[data-par] img{transform:none}
}

/* sticky needs the page to clip sideways without becoming a scroll box */
html{overflow-x:clip}
body{overflow-x:visible}
.page{overflow:visible;overflow-x:clip}
@supports not (overflow:clip){html{overflow-x:visible}body{overflow-x:hidden}.page{overflow-x:hidden}}
.svc .pic{position:relative}
@media (max-width:1099px){
  .ct .hd{padding-top:40px}
  .ct .form{padding-top:28px}
  .phd + section > .gap:first-child{display:none}
  .phd + section > .gap:first-child + .rule{display:none}
}

/* =====================================================================
   v3 — one sticky navigation bar, lines always behind content,
   Tastefully-style buttons + easing, DZ!NR-style pinned work gallery
   ===================================================================== */
:root{--ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);--nbh:72px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* retire the earlier chrome */
.top,.dock,.menu,.phd,.ticker{display:none!important}
body{padding-bottom:0!important}

/* ---------- grid lines: always behind content, continuous, drawn in ---------- */
.page::before,.page::after{display:none}
.sec{isolation:isolate}
.sec::before,.sec::after{content:"";position:absolute;top:0;bottom:-1px;width:1px;background:var(--line);z-index:-1;pointer-events:none;
  transform-origin:top;transition:transform 1.6s var(--ease)}
.sec::before{left:var(--gut)}
.sec::after{right:var(--gut)}
.js .sec[data-reveal]:not(.in)::before,.js .sec[data-reveal]:not(.in)::after{transform:scaleY(0)}
.vl,.svc .vline{z-index:-1!important}
/* horizontal rules: the line draws across, then the marker lands */
.rule{background:linear-gradient(var(--line),var(--line)) left center/100% 1px no-repeat;transition:background-size 1.5s var(--ease)}
.js .rule:not(.in){background-size:0 1px}
.rule{background-color:transparent!important}
.rule::before,.rule::after,.rule .mk{transition:opacity .5s var(--ease) .55s,transform .7s var(--ease) .55s}
.js .rule:not(.in)::before,.js .rule:not(.in)::after,.js .rule:not(.in) .mk{opacity:0;transform:scale(.3) rotate(-90deg)}

/* ---------- buttons: Tastefully sizing, one size everywhere ---------- */
.btn,.btn-o{height:48px;min-height:48px!important;padding:0 24px!important;font-size:16px!important;font-weight:500;letter-spacing:-.02em;gap:10px!important;line-height:1}
.btn::before,.btn-o::before{transition:transform .6s var(--ease)}
.btn .arw,.btn-o .arw{width:12px!important;height:12px!important}
.submit .btn{height:56px;min-height:56px!important}

/* ---------- the navigation bar ---------- */
.nb{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid rgba(199,199,199,.42);view-transition-name:site-nav}
.nb-in{max-width:2160px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px 16px;padding:0 var(--gut);height:60px;transition:height .6s var(--ease)}
.nb-logo{position:relative;display:block;height:30px;width:116px;overflow:hidden;color:#282828;transition:width .7s var(--ease)}
.nb-logo .lw,.nb-logo .lm{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;transition:transform .7s var(--ease),opacity .5s var(--ease)}
.nb-logo .lw .wm{width:116px;height:auto;fill:#282828}
.nb-logo .lm .mk{height:26px;width:auto;fill:#282828}
.nb-logo .lm{transform:translateY(110%);opacity:0}
.nb.is-mark .nb-logo{width:26px}
.nb.is-mark .nb-logo .lw{transform:translateY(-110%);opacity:0}
.nb.is-mark .nb-logo .lm{transform:none;opacity:1}
.nb.is-none .nb-logo{width:0}
.nb.is-none .nb-logo .lw{transform:translateY(110%);opacity:0}
.nb-links{grid-column:1/-1;grid-row:2;display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 12px;font-size:15px}
.nb-links::-webkit-scrollbar{display:none}
.nb-links .lnk{color:rgba(14,14,14,.5);transition:color .3s}
.nb-links .lnk:hover,.nb-links .lnk.cur{color:var(--ink)}
.nb-links .lnk .arw{display:none}
.nb-b{grid-column:3;justify-self:end;height:40px!important;min-height:40px!important;padding:0 16px!important;font-size:14px!important}
.nb[data-home="1"] .nb-b{display:inline-flex}

/* home */
.hero{padding-top:0}
.hero .rule.t{margin-top:20px}
.hero .wmclip{margin:18px 0 18px}
.hero2{padding-top:0}
.hero2 .strip{padding-top:22px}
.endcap .tail{height:40px}

/* ---------- Recent Work in Motion (DZ!NR-style) ---------- */
.hs{padding-top:48px;padding-bottom:48px}
.hs-stage{position:relative}
.hs-tx{display:grid;gap:16px;justify-items:start;margin-bottom:28px}
.hs-vp{overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut) * -1);padding:0 var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
.hs-vp::-webkit-scrollbar{display:none}
.hs-track{display:flex;gap:0;width:max-content}
.hs-card{--cap:150px;width:86vw;max-width:680px;margin:0;scroll-snap-align:start;scroll-margin-left:var(--gut);display:flex;flex-direction:column;background:var(--bar);color:#fff;border-right:1px solid #fff}
.hs-media{position:relative;aspect-ratio:16/10;overflow:hidden}
.hs-media .media{position:absolute;inset:0;background:#d9d9d9}
.hs-cap{padding:14px 16px 16px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:var(--cap)}
.hs-meta{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;font-weight:500;font-size:12px;letter-spacing:.02em;text-transform:uppercase}
.hs-meta span:nth-child(2){text-align:center;opacity:.75}
.hs-meta .num{border:1px solid rgba(255,255,255,.35);padding:5px 8px;font-variant-numeric:tabular-nums}
.hs-tt{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.hs-tt h3{font-weight:700;font-size:44px;line-height:.9;letter-spacing:-.05em;text-transform:uppercase;white-space:nowrap}
.hs-go{width:44px;height:44px;border-radius:50%;background:#fff;color:var(--bar);display:grid;place-items:center;flex:none;transition:transform .6s var(--ease)}
.hs-go svg{width:20px;height:20px}
.hs-card:hover .hs-go{transform:rotate(45deg)}
.hs-prog{display:none}

/* ---------- tablet ---------- */
@media (min-width:700px){
  .nb-in{height:68px}
  .nb-logo{width:132px}.nb-logo .lw .wm{width:132px}
  .hs-card{width:64vw}
  .hs-tt h3{font-size:56px}
}

/* ---------- desktop ---------- */
@media (min-width:1100px){
  .sec::before{left:calc(81 * var(--k))}
  .sec::after{left:calc(1649 * var(--k));right:auto}
  .nb-in{grid-template-columns:1fr auto 1fr;height:var(--nbh);padding:0 calc(100 * var(--k))}
  .nb.is-mark .nb-in{height:62px}
  .nb-logo{width:150px;height:34px}
  .nb-logo .lw .wm{width:150px}
  .nb-logo .lm .mk{height:30px}
  .nb.is-mark .nb-logo{width:29px}
  .nb-links{grid-column:2;grid-row:1;margin:0;padding:0;overflow:visible;gap:34px;font-size:16px}
  .nb-links .lnk .arw{display:inline-block}
  .nb-b{height:48px!important;min-height:48px!important;padding:0 24px!important;font-size:16px!important}
  .hero .rule.t{margin-top:calc(77 * var(--k))}
  .hero .wmclip{margin:calc(24 * var(--k)) calc(100 * var(--k)) calc(24 * var(--k))}
  .hero2 .strip{padding-top:calc(22 * var(--k));height:auto}

  /* pinned gallery */
  .hs{padding:0}
  .hs-stage{min-height:calc(1117 * var(--k));display:grid;grid-template-columns:calc(593 * var(--k)) 1fr;align-items:center}
  .hs-tx{margin:0;padding:0 calc(40 * var(--k)) 0 calc(103 * var(--k));gap:0}
  .hs-tx .h2{margin-top:calc(24 * var(--k))}
  .hs-tx .lead{margin-top:calc(16 * var(--k));width:calc(373 * var(--k))}
  .hs-tx .btn{margin-top:calc(46 * var(--k))}
  .hs-vp{margin:0;padding:0}
  .hs-card{--cap:150px;width:var(--cw,calc(1135 * var(--k)));max-width:none}
  .hs-media{aspect-ratio:auto;height:var(--mh,calc(610 * var(--k)))}
  .hs.pin{height:var(--hs-h)}
  .hs.pin .hs-stage{position:sticky;top:var(--nbs,62px);height:calc(100vh - var(--nbs,62px));min-height:0;display:block;overflow:hidden}
  .hs.pin .hs-tx{position:absolute;left:0;top:50%;transform:translateY(-50%);width:calc(593 * var(--k));z-index:2;will-change:opacity,transform}
  .hs.pin .hs-vp{position:absolute;inset:0;overflow:visible}
  .hs.pin .hs-track{position:absolute;left:0;top:0;height:100%;transform-origin:0 50%;will-change:transform}
  .hs.pin .hs-card{height:100%}
  .hs.pin .hs-media{flex:1;height:auto}
  .hs.pin .hs-cap{flex:none;height:var(--cap);padding:18px 24px 22px}
  .hs.pin .hs-meta{font-size:13px}
  .hs.pin .hs-tt h3{font-size:clamp(48px,5.6vw,108px)}
  .hs.pin .hs-go{width:52px;height:52px}
  .hs-prog{display:block;position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.25);z-index:3;opacity:0;transition:opacity .4s}
  .hs.pin.on .hs-prog{opacity:1}
  .hs-prog i{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
}
@media (prefers-reduced-motion:reduce){
  .js .rule:not(.in){background-size:100% 1px}
  .js .sec[data-reveal]:not(.in)::before,.js .sec[data-reveal]:not(.in)::after{transform:none}
}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
/* the bar carries the same two guide lines so the grid never breaks */
.nb::before,.nb::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line);pointer-events:none}
.nb::before{left:var(--gut)}.nb::after{right:var(--gut)}
@media (min-width:1100px){.nb::before{left:calc(81 * var(--k))}.nb::after{left:calc(1649 * var(--k));right:auto}}