/* RUDIQS — base: tokens, reset, type, controls, header, logo, menu, transitions, footer */
:root{
  --ink:#171615;--ink-2:#22201e;--ink-3:#2c2926;--cream:#f7f3de;--cream-2:#e7e2cc;
  --coral:#ff4b3f;--coral-hi:#ff7167;--coral-deep:#c42a1f;
  --muted:#aaa89d;--muted-ink:#5f5b52;--line:rgba(247,243,222,.2);--line-ink:rgba(23,22,21,.2);
  --peach:#eca999;--sage:#9fc4b0;--lilac:#aca4cc;--sky:#aabde0;--butter:#f2d98a;
  --serif:'DM Serif Display',Georgia,serif;--sans:'DM Sans',Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.1,1);--ease-io:cubic-bezier(.65,0,.35,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.16s;--t-med:.36s;--t-slow:.7s;
  --gutter:80px;--header-h:78px;
}
/* Scroll/pointer-driven values are registered as NON-inheriting so updating them never restyles a whole subtree. */
@property --sp{syntax:'<number>';inherits:false;initial-value:0}
@property --hp{syntax:'<number>';inherits:false;initial-value:0}
@property --x{syntax:'<number>';inherits:false;initial-value:0}
@property --rx{syntax:'<number>';inherits:false;initial-value:0}
@property --ry{syntax:'<number>';inherits:false;initial-value:0}
@property --mx{syntax:'<number>';inherits:false;initial-value:0}
@property --on{syntax:'<number>';inherits:false;initial-value:0}
@property --tp{syntax:'<number>';inherits:false;initial-value:0}
@property --jp{syntax:'<number>';inherits:false;initial-value:0}
@property --lift{syntax:'<number>';inherits:false;initial-value:0}
@property --tilt{syntax:'<number>';inherits:false;initial-value:0}
@property --sc{syntax:'<number>';inherits:false;initial-value:1}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--cream);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--coral);outline-offset:4px}
.on-cream :focus-visible,.cream :focus-visible{outline-color:var(--ink)}
::selection{background:var(--coral);color:var(--ink)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.container{width:min(100% - var(--gutter),1440px);margin-inline:auto}
.skip-link{position:fixed;top:-100px;left:20px;z-index:300;background:var(--coral);color:var(--ink);padding:12px 18px;font-weight:700}
.skip-link:focus{top:10px}
h1,h2,h3,h4,p{margin-top:0}h1,h2,h3,h4{font-weight:400}
h1,h2,h3{font-family:var(--serif);letter-spacing:-.06em}
em{font-family:var(--serif);font-weight:400;font-style:italic}
.kicker,.section-label{font-size:11px;font-weight:700;letter-spacing:.16em;line-height:1.4;text-transform:uppercase}
.section-label{display:flex;align-items:center;gap:16px;color:var(--muted)}
.section-label::before{content:'';width:38px;height:1px;background:var(--coral);flex:none}
.cream{background:var(--cream);color:var(--ink)}
.cream .section-label,.cream .muted{color:var(--muted-ink)}
.cream em{color:var(--coral-deep)}
.section-pad{padding-block:clamp(80px,10vw,145px)}
.spark{display:block;width:100%;height:100%}

/* buttons & links */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;background:var(--coral);color:var(--ink);padding:15px 20px;font-size:13px;font-weight:700;border:0;transition:background var(--t-fast),transform var(--t-fast) var(--ease)}
.btn:hover{background:var(--coral-hi);transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.btn.ghost:hover{background:var(--cream);color:var(--ink)}
.btn.dark{background:var(--ink);color:var(--cream)}
.btn.dark:hover{background:#2f2c29}
.round-link{width:86px;height:86px;display:grid;place-items:center;flex:none;border:1px solid currentColor;border-radius:50%;font-size:27px;transition:transform var(--t-med) var(--ease),background var(--t-med),color var(--t-med)}
.round-link:hover{transform:rotate(40deg);background:var(--coral);border-color:var(--coral);color:var(--ink)}
.text-link{display:inline-flex;gap:38px;align-items:center;border-bottom:1px solid var(--coral);padding-bottom:10px;font-size:11px;letter-spacing:.12em;font-weight:700;text-transform:uppercase;transition:gap var(--t-med) var(--ease)}
.text-link:hover{gap:50px}
.under-link{display:inline-block;font-size:12px;font-weight:700;border-bottom:1px solid var(--coral);padding-bottom:5px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:99px;padding:7px 13px;font-size:12px}
.cream .chip{border-color:var(--line-ink)}
.badge{display:inline-flex;gap:8px;align-items:center;background:var(--cream);color:var(--ink);border-radius:99px;padding:8px 13px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.badge.concept::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--coral)}

/* ===== header ===== */
.site-header{position:sticky;top:0;z-index:60;background:rgba(23,22,21,.96);border-bottom:1px solid var(--line);transition:background var(--t-med)}
.header-inner{height:var(--header-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;transition:height var(--t-med) var(--ease)}
.site-header.compact .header-inner{height:62px}
.scroll-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--coral);transform:scaleX(var(--sp,0));transform-origin:left}
.desktop-nav{display:flex;align-items:center;gap:6px}
.desktop-nav a{position:relative;font-size:12px;white-space:nowrap;padding:10px 12px;transition:color var(--t-fast)}
.desktop-nav a::after{content:'';position:absolute;left:12px;right:12px;bottom:4px;height:1px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform var(--t-med) var(--ease)}
.desktop-nav a:hover::after,.desktop-nav a[aria-current]::after{transform:scaleX(1)}
.desktop-nav a[aria-current]{color:var(--coral)}
.header-cta{justify-self:end;min-width:168px}
.menu-toggle{display:none;background:none;border:1px solid var(--line);width:46px;height:46px;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:6px;border-radius:50%}
.menu-toggle span{height:1.5px;width:18px;background:currentColor;transition:transform var(--t-med) var(--ease)}
.menu-open .menu-toggle span:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-open .menu-toggle span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* ===== wordmark ===== */
.logo{display:inline-flex;align-items:baseline;justify-self:start;font-size:30px;font-weight:700;line-height:1;letter-spacing:-.095em;perspective:700px;padding:6px 8px 6px 0;margin:-6px 0;touch-action:manipulation}
.logo .l{position:relative;display:inline-block;transform-style:preserve-3d;transition:transform .55s var(--ease),width .45s var(--ease),opacity .3s;transition-delay:calc(var(--i)*28ms);white-space:nowrap}
.logo .l::before,.logo .l::after{content:attr(data-c);position:absolute;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .3s,transform .55s var(--ease);transition-delay:calc(var(--i)*28ms)}
.logo .l::before{color:var(--coral);transform:translateZ(0)}
.logo .l::after{color:transparent;-webkit-text-stroke:1px rgba(247,243,222,.55);transform:translateZ(0)}
.logo .dot{color:var(--coral);letter-spacing:0}
.logo .dot::before,.logo .dot::after{display:none}
.logo.hot .l,.logo:hover .l,.logo:focus-visible .l{transform:rotateY(calc(var(--lry,0)*1deg)) rotateX(calc(var(--lrx,0)*1deg)) translateZ(8px)}
.logo.hot .l::before,.logo:hover .l::before,.logo:focus-visible .l::before{opacity:1;transform:translate3d(3px,3px,-14px)}
.logo.hot .l::after,.logo:hover .l::after,.logo:focus-visible .l::after{opacity:1;transform:translate3d(6px,6px,-30px)}
.logo.wave .l{animation:letter-wave .9s var(--ease) both;animation-delay:calc(var(--i)*55ms)}
.logo.wave .l::before{opacity:1;transform:translate3d(3px,3px,-14px)}
.logo.wave .l::after{opacity:1;transform:translate3d(6px,6px,-30px)}
@keyframes letter-wave{0%{transform:none}35%{transform:rotateX(-32deg) translateZ(16px) translateY(-5px)}70%{transform:rotateX(8deg) translateZ(4px)}100%{transform:none}}
.site-header.compact .logo:not(:hover):not(:focus-visible):not(.hot) .l:not(.keep){width:0!important;opacity:0;overflow:hidden;transition-delay:calc((6 - var(--i))*22ms)}
html:not(.js) .logo .l{width:auto!important}
.logo.nott .l{transition:none!important}

/* ===== mobile menu ===== */
.menu-panel{position:fixed;inset:0;z-index:55;background:var(--ink);padding:calc(var(--header-h) + 10px) 24px 28px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;clip-path:circle(0 at calc(100% - 44px) 40px);visibility:hidden;transition:clip-path .55s var(--ease),visibility 0s .55s}
.menu-open .menu-panel{clip-path:circle(150% at calc(100% - 44px) 40px);visibility:visible;transition:clip-path .6s var(--ease)}
.menu-panel nav{display:flex;flex-direction:column;margin-top:10px}
.menu-panel nav a{position:relative;display:grid;grid-template-columns:34px 1fr auto;align-items:center;border-bottom:1px solid var(--line);padding:16px 0;font:clamp(32px,9vw,46px)/1.1 var(--serif);letter-spacing:-.05em;opacity:0;transform:translateY(18px);transition:opacity .4s,transform .5s var(--ease),color .2s}
.menu-open .menu-panel nav a{opacity:1;transform:none;transition-delay:calc(.08s + var(--i)*.05s)}
.menu-panel nav a small{font:700 10px var(--sans);letter-spacing:.1em;color:var(--coral)}
.menu-panel nav a span{font:20px var(--sans)}
.menu-panel nav a[aria-current]{color:var(--coral)}
.menu-panel nav a[aria-current] span{font-size:10px;letter-spacing:.12em;font-weight:700;text-transform:uppercase;border:1px solid var(--coral);border-radius:99px;padding:5px 9px}
.menu-panel .menu-foot{margin-top:auto;padding-top:28px;display:grid;gap:16px;color:var(--muted);font-size:13px}
.menu-panel .btn{justify-content:space-between}

/* ===== page transition curtain ===== */
.curtain{position:fixed;inset:0;z-index:250;background:var(--coral);color:var(--ink);display:grid;place-items:center;transform:translateY(101%);pointer-events:none;visibility:hidden}
.curtain b{font:700 clamp(60px,14vw,150px)/1 var(--sans);letter-spacing:-.1em;opacity:0;transition:opacity .2s}
html.leaving .curtain{visibility:visible;transform:none;transition:transform .26s var(--ease-io)}
html.leaving .curtain b{opacity:1}
html.arriving .curtain{visibility:visible;transform:none;animation:curtain-out .5s .04s var(--ease-io) forwards}
html.arriving .curtain b{opacity:1}
@keyframes curtain-out{to{transform:translateY(-101%)}}

/* ===== footer ===== */
.site-footer{padding:70px 0 26px;overflow:hidden}
.footer-top{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid var(--line);padding-bottom:65px;gap:30px}
.footer-top p{font:clamp(48px,6vw,95px)/1 var(--serif);letter-spacing:-.06em;margin:0}
.footer-top p em{color:var(--coral)}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;padding:55px 0}
.footer-grid .kicker{color:var(--coral)}
.footer-grid p{font-size:13px;line-height:1.6;color:var(--muted);margin-top:20px}
.footer-grid nav{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;align-content:start}
.footer-grid nav a{font-size:13px;padding:5px 0}
.footer-grid nav a:hover{color:var(--coral)}
.footer-wordmark{display:flex;justify-content:center;font-size:clamp(90px,21vw,340px);font-weight:700;letter-spacing:-.1em;line-height:.95;white-space:nowrap;user-select:none;padding-right:.08em;cursor:default}
.footer-wordmark .fl{display:inline-block;transform:translateY(calc(var(--lift,0)*-1px)) rotate(calc(var(--tilt,0)*1deg)) scale(var(--sc,1));transition:transform .25s var(--ease),color .25s;will-change:transform}
.footer-wordmark .fl.hot{color:var(--coral)}
.footer-bottom{display:flex;justify-content:space-between;gap:25px;border-top:1px solid var(--line);padding-top:22px;margin-top:35px;color:var(--muted);font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.footer-bottom a:hover{color:var(--coral)}

/* ===== scroll reveals (few, purposeful) ===== */
.js [data-r]{--rd:0ms;transition:opacity .8s var(--ease) var(--rd),transform .9s var(--ease) var(--rd),clip-path 1s var(--ease) var(--rd)}
.js [data-r="rise"]:not(.in){opacity:0;transform:translateY(34px)}
.js [data-r="clip"]>:first-child{clip-path:inset(0);transition:clip-path 1.1s var(--ease) var(--rd,0ms)}
.js [data-r="clip"]:not(.in)>:first-child{clip-path:inset(0 0 100% 0)}
.js [data-r="clip"]>:last-child{transition:opacity .8s var(--ease) .25s,transform .9s var(--ease) .25s}
.js [data-r="clip"]:not(.in)>:last-child{opacity:0;transform:translateY(20px)}
.js [data-r="stagger"]>*{transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--k,0)*90ms)}
.js [data-r="stagger"]:not(.in)>*{opacity:0;transform:translateY(26px)}
.line-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line-mask>span{display:block;transition:transform 1.05s var(--ease) calc(var(--k,0)*110ms)}
.js .line-mask:not(.in)>span{transform:translateY(110%)}

@media(max-width:1100px){.desktop-nav a{padding:10px 8px}.header-cta{min-width:auto;gap:15px}}
@media(max-width:880px){
  :root{--gutter:42px;--header-h:68px}
  .header-inner{grid-template-columns:1fr auto auto;gap:12px}
  .desktop-nav{display:none}
  .menu-toggle{display:flex}
  .logo{font-size:27px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:last-child{grid-column:1/-1}
}
@media(max-width:600px){:root{--gutter:36px}.header-cta{display:none}.footer-bottom{flex-wrap:wrap;font-size:9px}.footer-bottom span:nth-child(2){display:none}.round-link{width:67px;height:67px;font-size:22px}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .curtain{display:none!important}
  .logo .l,.logo .l::before,.logo .l::after{transition:opacity .2s!important;animation:none!important;transform:none!important}
  .js [data-r]{transition:none!important}
  .js [data-r="rise"]:not(.in),.js [data-r="stagger"]:not(.in)>*,.js [data-r="clip"]:not(.in)>:last-child{opacity:1;transform:none}
  .js [data-r="clip"]:not(.in)>:first-child{clip-path:none}
  .js .line-mask:not(.in)>span{transform:none}
  .menu-panel,.menu-panel nav a{transition:none!important}
}

/* RUDIQS UI kit — original CSS-drawn browser, phone and dashboard.
   Everything is sized in em from --s, so one component serves the hero, journey, cards and project pages. */
.ui{font-size:var(--s,14px);line-height:1.25;font-family:var(--sans);letter-spacing:0;text-align:left}
.ui *{box-sizing:border-box}
.ui-shadow{filter:drop-shadow(1.1em 1.6em 2em rgba(40,20,20,.28))}

/* ---- browser (Morrow) ---- */
.ui-browser{width:30em;height:20em;background:#eef3eb;color:#153c33;border-radius:.55em;overflow:hidden;position:relative}
.ub-bar{height:1.7em;background:#f6f4ee;border-bottom:1px solid #ddd;display:flex;gap:.35em;align-items:center;padding:0 .8em}
.ub-bar i{width:.42em;height:.42em;border-radius:50%;background:#c5bdb9}
.ub-bar u{margin-left:.7em;flex:1;max-width:13em;height:.85em;border-radius:1em;background:#e4e1d8}
.ub-view{height:calc(100% - 1.7em);overflow:hidden}
.ub-page{will-change:transform}
.ub-nav{height:3.1em;display:flex;justify-content:space-between;align-items:center;padding:0 2em}
.ub-nav strong{font-size:1.5em;letter-spacing:-.08em}
.ub-nav span{font-size:.62em}
.ub-hero{position:relative;height:12.6em;padding:1.1em 2em;overflow:hidden}
.ub-hero small{display:block;font-size:.55em;letter-spacing:.16em}
.ub-hero b{display:block;font:3em/.94 var(--serif);letter-spacing:-.06em;margin:.45em 0 .4em;position:relative;z-index:1}
.ub-hero p{font-size:.62em;max-width:15em;margin:0;position:relative;z-index:1}
.ub-blob{position:absolute;right:-1.2em;bottom:-2.4em;width:11em;height:11.5em;background:linear-gradient(135deg,#91b6a2,#2d6c5a 55%,#0c392e);border-radius:45% 55% 30% 70%/60% 40% 60% 40%;transform:rotate(24deg);box-shadow:inset -1em -.8em 1.2em #0b302677;transition:transform .8s var(--ease),background .6s}
.ub-blob::after{content:'';position:absolute;inset:1.5em 2.4em;border:.12em solid #c4dac4;border-radius:50%;transform:rotate(30deg)}
.ub-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;padding:0 2em 2em}
.ub-tiles i{display:block;height:8em;border-radius:.5em;background:#d9e6d9;position:relative;overflow:hidden}
.ub-tiles i:nth-child(2){background:#f0d9c9}.ub-tiles i:nth-child(3){background:#d8d6ea}
.ub-tiles i::before{content:'';position:absolute;left:25%;top:18%;width:50%;aspect-ratio:1;border-radius:50%;background:currentColor;opacity:.55}
.ub-tiles i:nth-child(1){color:#2d6c5a}.ub-tiles i:nth-child(2){color:#c2693f}.ub-tiles i:nth-child(3){color:#5b4f93}
.is-live .ub-page{animation:ub-scroll 9s var(--ease-io) infinite}
@keyframes ub-scroll{0%,22%{transform:none}42%,72%{transform:translateY(-9.6em)}92%,100%{transform:none}}
.is-live .ub-blob{animation:blob-drift 7s ease-in-out infinite alternate}
@keyframes blob-drift{to{transform:rotate(34deg) translate(-.6em,-.5em)}}

/* ---- phone (Moneta) ---- */
.ui-phone{width:11em;height:22.5em;border:.45em solid #2a2a31;border-radius:2em;background:#252631;color:#f8f3ec;overflow:hidden;position:relative}
.ui-phone::before{content:'';position:absolute;top:.3em;left:50%;transform:translateX(-50%);width:4em;height:.7em;border-radius:1em;background:#15161b;z-index:3}
.up-screens{display:flex;width:300%;height:100%;will-change:transform}
.up-screen{width:33.3333%;padding:2.3em 1em .8em;display:flex;flex-direction:column}
.up-screen small{font-size:.62em;color:#aaa8b0}
.up-screen .brand{font-size:.9em;font-weight:700;letter-spacing:-.06em;color:#f8f3ec}
.up-screen h4{font:1.7em/1.05 var(--serif);letter-spacing:-.05em;margin:.5em 0 .7em}
.up-card{border-radius:.9em;padding:.85em;background:#c7e88b;color:#1d2b1d;margin-bottom:.6em}
.up-card.lilac{background:#d3c5e6;color:#3d3251}
.up-card small{display:block;font-size:.58em;color:inherit;opacity:.8}
.up-card b{display:block;font-size:1.6em;letter-spacing:-.07em;margin-top:.25em}
.up-card span{font-size:.55em}
.up-ring{width:5em;height:5em;border-radius:50%;margin:.4em auto;background:conic-gradient(#c7e88b calc(var(--pct,72)*1%),#3a3a44 0);display:grid;place-items:center;position:relative}
.up-ring::after{content:attr(data-label);position:absolute;inset:.55em;border-radius:50%;background:#252631;display:grid;place-items:center;font-size:1.1em;font-weight:700;letter-spacing:-.04em}
.up-row{display:flex;align-items:center;gap:.6em;border-bottom:1px solid #ffffff1f;padding:.7em 0;font-size:.62em}
.up-row i{width:1.9em;height:1.9em;background:#3a3a44;border-radius:.6em;flex:none}
.up-row b{margin-left:auto;font-weight:500}
.up-dots{position:absolute;bottom:.7em;left:0;right:0;display:flex;justify-content:center;gap:.35em}
.up-dots i{width:.4em;height:.4em;border-radius:50%;background:#ffffff40;transition:background .3s,width .3s}
.up-dots i.on{background:#c7e88b;width:1.2em;border-radius:1em}
.is-live .up-screens{animation:up-swipe 10s var(--ease-io) infinite}
@keyframes up-swipe{0%,26%{transform:none}33%,59%{transform:translateX(-33.3333%)}66%,92%{transform:translateX(-66.6666%)}100%{transform:none}}
.is-live .up-ring{animation:ring-fill 2s var(--ease) both}
@property --pct{syntax:'<number>';inherits:true;initial-value:72}
@keyframes ring-fill{from{--pct:0}}

/* ---- dashboard (Aperture) ---- */
.ui-dash{width:30em;height:20em;background:#f8f9fc;border-radius:.55em;color:#1e2a48;display:grid;grid-template-columns:3.6em 1fr;overflow:hidden}
.ud-rail{background:#1b2e50;display:flex;flex-direction:column;align-items:center;gap:1.1em;padding:1em 0}
.ud-rail b{background:#b6e3e7;color:#1b2e50;width:1.6em;height:1.6em;display:grid;place-items:center;border-radius:.45em;font-size:.8em;margin-bottom:1.1em}
.ud-rail i{width:1em;height:1em;border:1px solid #8b9ab5;border-radius:.3em}
.ud-rail i.on{background:#8b9ab5}
.ud-main{padding:1.4em}
.ud-head{display:flex;justify-content:space-between;font-size:.85em;font-weight:600}
.ud-main>small{display:block;color:#71809a;font-size:.55em;margin-top:.2em}
.ud-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em;margin:1.3em 0 .8em}
.ud-stats div,.ud-chart{background:#fff;border:1px solid #e8edf4;border-radius:.5em;padding:.8em}
.ud-stats small,.ud-stats span,.ud-chart small{display:block;color:#8090a6;font-size:.55em}
.ud-stats b{display:block;font-size:1.6em;letter-spacing:-.07em;margin:.2em 0}
.ud-stats span{color:#2f7f67}
.ud-chart{height:8.9em;display:flex;justify-content:space-between;gap:1em}
.ud-chart b{display:block;font-size:.95em;margin-top:.3em;max-width:7em}
.ud-bars{width:56%;height:6.5em;display:flex;align-items:end;gap:.5em}
.ud-bars i{flex:1;background:#8fa3dc;border-radius:.25em .25em 0 0;height:calc(var(--h)*1%);transform-origin:bottom}
.ud-bars i:nth-child(even){background:#d5c9ed}
.is-live .ud-bars i{animation:bar-grow 1.1s var(--ease) both;animation-delay:calc(var(--n)*70ms)}
.is-live .ud-bars i:nth-child(3n){animation:bar-grow 1.1s var(--ease) both,bar-breathe 4s ease-in-out infinite alternate;animation-delay:calc(var(--n)*70ms),1.4s}
@keyframes bar-grow{from{transform:scaleY(0)}}
@keyframes bar-breathe{to{transform:scaleY(.82)}}

@media(prefers-reduced-motion:reduce){
  .is-live .ub-page,.is-live .up-screens,.is-live .ub-blob,.is-live .ud-bars i,.is-live .up-ring{animation:none!important}
}

/* Shared page pieces: page hero, project cards, CTA band, statement, process */
.page-hero{padding-top:clamp(70px,8vw,110px);padding-bottom:clamp(60px,7vw,105px);border-bottom:1px solid var(--line);position:relative}
.page-hero h1{font-size:clamp(64px,11vw,176px);line-height:.91;margin:35px 0 clamp(36px,4.5vw,65px);overflow-wrap:anywhere}
.page-hero h1 em{color:var(--coral)}
.page-hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:30px}
.page-hero-bottom p{font-size:clamp(16px,1.5vw,20px);line-height:1.5;max-width:550px;margin:0}
.page-hero-bottom .spark{width:95px;height:95px;color:var(--coral);animation:spin 25s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- project cards (home + work) ---- */
.pcard{position:relative;min-width:0;display:flex;flex-direction:column}
.pcard-art{position:relative;overflow:hidden;isolation:isolate;display:grid;place-items:center;background:var(--hue);min-height:clamp(340px,40vw,560px);color:var(--ink)}
.pcard-art .badge{position:absolute;left:20px;top:20px;z-index:5}
.pcard-art .badge.num{left:auto;right:20px;background:var(--ink);color:var(--cream)}
.pcard-stage{position:relative;transition:transform .8s var(--ease)}
.pcard:hover .pcard-stage,.pcard:focus-within .pcard-stage{transform:translateY(-10px) rotate(-1.2deg) scale(1.03)}
.pcard-cap{display:flex;justify-content:space-between;gap:20px;padding:24px 0 6px}
.pcard-cap .kicker{color:var(--muted)}
.cream .pcard-cap .kicker{color:var(--muted-ink)}
.pcard-cap h3{font-size:clamp(30px,3vw,40px);margin:6px 0}
.pcard-cap h3 a::after{content:'';position:absolute;inset:0;z-index:6}
.pcard-cap p{font-size:14px;color:var(--muted);margin:0 0 12px;max-width:44ch}
.cream .pcard-cap p{color:var(--muted-ink)}
.pcard-tags{display:flex;gap:8px;flex-wrap:wrap}
.pcard-go{width:48px;height:48px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;flex:none;font-size:22px;transition:transform .4s var(--ease),background .3s,color .3s;align-self:start;margin-top:6px}
.pcard:hover .pcard-go,.pcard:focus-within .pcard-go{background:var(--coral);border-color:var(--coral);color:var(--ink);transform:rotate(45deg)}
.pcard:focus-within{outline:3px solid var(--coral);outline-offset:6px}
.pcard:focus-within a:focus-visible{outline:none}
.concept-note{font-size:12px;color:var(--muted);margin:24px 0 0;display:flex;gap:10px;align-items:center}
.concept-note::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none}
.cream .concept-note{color:var(--muted-ink)}
/* per-card compositions (varied on purpose) */
.pcard.morrow .pcard-stage{--s:clamp(9px,1.15vw,16px);transform:rotate(-5deg) translate(4%,5%)}
.pcard.morrow:hover .pcard-stage,.pcard.morrow:focus-within .pcard-stage{transform:rotate(-2.5deg) translate(4%,3%) scale(1.03)}
.pcard.moneta .pcard-stage{--s:clamp(10px,1.2vw,17px);display:flex;gap:1.4em;align-items:center}
.pcard.moneta .ui-phone:nth-child(2){margin-top:3em;filter:brightness(.97)}
.pcard.moneta .ui-phone:first-child{margin-top:-2em;transform:rotate(-5deg)}
.pcard.moneta .ui-phone:nth-child(2){transform:rotate(5deg)}
.pcard.aperture .pcard-stage{--s:clamp(9px,1.4vw,19px);transform:rotate(-3deg) translate(3%,4%)}
.pcard.aperture:hover .pcard-stage,.pcard.aperture:focus-within .pcard-stage{transform:rotate(-1deg) translate(3%,2%) scale(1.03)}
.pcard .ui-browser,.pcard .ui-dash,.pcard .ui-phone{box-shadow:.8em 1.2em 1.8em rgba(40,25,25,.26)}

/* ---- CTA & statement ---- */
.cta-band{background:var(--coral);color:var(--ink);padding:clamp(70px,8vw,105px) 0 clamp(66px,8vw,100px);position:relative;overflow:hidden}
.cta-band .kicker{position:relative}
.cta-row{display:flex;justify-content:space-between;align-items:end;gap:35px;position:relative}
.cta-row h2{font-size:clamp(70px,11vw,180px);line-height:.9;margin:clamp(40px,5vw,65px) 0 0}
.cta-row h2 em{font-style:italic}
.round-link.dark{width:105px;height:105px;margin-bottom:15px}
.round-link.dark:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.statement{background:var(--cream);color:var(--ink);padding:clamp(70px,8vw,115px) 0}
.statement h2{font-size:clamp(52px,8.3vw,132px);line-height:1.02;margin:45px 0 35px}
.statement h2 em{color:var(--coral-deep)}
.statement .kicker{color:var(--muted-ink)}
.statement-bottom{display:flex;justify-content:space-between;align-items:end;gap:30px}
.statement-bottom p{max-width:390px;font-size:16px;color:var(--muted-ink);margin:0}
.statement-bottom .spark{width:110px;height:110px;color:var(--coral);animation:spin 26s linear infinite;flex:none}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:clamp(36px,4vw,55px)}
.section-heading h2{font-size:clamp(54px,7vw,112px);line-height:.97;margin:25px 0 0}
.section-heading h2 em{color:var(--coral)}
.cream .section-heading h2 em{color:var(--coral-deep)}
.section-heading>p{max-width:340px;color:var(--muted);font-size:15px;line-height:1.6;margin:0 0 10px}
.cream .section-heading>p{color:var(--muted-ink)}

/* ---- process timeline ---- */
.timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:34px}
.timeline::before,.timeline::after{content:'';position:absolute;left:0;right:0;top:8px;height:1px;background:var(--line)}
.timeline::after{background:var(--coral);height:2px;top:7px;transform:scaleX(var(--tp,0));transform-origin:left}
.tstep{position:relative;min-height:230px;display:flex;flex-direction:column;justify-content:space-between}
.tstep::before{content:'';position:absolute;top:-34px;left:0;width:16px;height:16px;border-radius:50%;background:var(--ink);border:1px solid var(--line);transition:background .4s,transform .5s var(--spring),border-color .4s}
.tstep.on::before{background:var(--coral);border-color:var(--coral);transform:scale(1.25)}
.tstep>span{font:45px var(--serif);color:var(--coral)}
.tstep h3{font-size:30px;margin-bottom:7px}
.tstep p{font-size:13px;color:var(--muted);line-height:1.6;margin:0}

@media(max-width:1000px){.timeline{grid-template-columns:1fr 1fr;row-gap:50px}.timeline::before,.timeline::after{display:none}.tstep::before{display:none}}
@media(max-width:880px){.page-hero-bottom .spark{width:60px;height:60px}.section-heading{flex-direction:column;align-items:start;gap:20px}.statement-bottom .spark{width:70px;height:70px}.round-link.dark{width:72px;height:72px}.pcard.moneta .pcard-stage{gap:.8em}}
@media(max-width:600px){.timeline{grid-template-columns:1fr;row-gap:0;padding-left:26px;padding-top:0}.timeline::before{display:block;left:7px;right:auto;width:1px;height:100%;top:0}.timeline::after{display:block;left:6px;right:auto;width:2px;height:100%;top:0;transform:scaleY(var(--tp,0));transform-origin:top}.tstep{min-height:0;padding:0 0 40px}.tstep::before{display:block;top:6px;left:-27px;width:14px;height:14px}.tstep>span{font-size:34px;margin-bottom:8px}.statement-bottom p{font-size:13px;max-width:230px}.cta-row h2{font-size:clamp(64px,19vw,110px)}.pcard-art{min-height:380px}}
@media(prefers-reduced-motion:reduce){.page-hero-bottom .spark,.statement-bottom .spark{animation:none}.pcard-stage{transition:none!important}.pcard:hover .pcard-stage{transform:none!important}.timeline::after{transform:scaleX(1)}}

/* ===== HOME ===== */
/* hero */
.hero{position:relative;padding-top:clamp(20px,3vw,40px);overflow:clip}
.hero-meta{display:flex;justify-content:space-between;gap:20px;color:var(--muted)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:3%;align-items:center;min-height:min(760px,calc(100svh - 150px));padding:clamp(24px,4vw,56px) 0}
.hero-copy{position:relative;z-index:2;transform:translateY(calc(var(--hp,0)*60px));opacity:calc(1 - var(--hp,0)*.7)}
.hero h1{font-size:clamp(58px,7.3vw,124px);line-height:.94;margin:0}
.hero h1 em{position:relative;color:var(--cream);display:inline-block}
.hero h1 em::after{content:'';position:absolute;left:-2%;right:-2%;bottom:-.04em;border-bottom:.055em solid var(--coral);height:.14em;border-radius:50%;transform:rotate(-2.5deg) scaleX(1);transform-origin:left;transition:transform 1s var(--ease) 1s}
.js .hero:not(.go) h1 em::after{transform:rotate(-2.5deg) scaleX(0)}
.hero-sub{font-size:clamp(15px,1.3vw,18px);line-height:1.6;max-width:30em;margin:clamp(24px,3vw,42px) 0 28px;color:var(--cream-2)}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-words{display:flex;gap:8px;flex-wrap:wrap;margin-top:clamp(24px,3vw,40px)}
.hero-words button{background:none;border:1px solid var(--line);border-radius:99px;padding:8px 15px;font-size:12px;display:inline-flex;gap:8px;align-items:center;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.hero-words button::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--coral);transition:transform .3s var(--spring)}
.hero-words button[aria-pressed="true"]{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.hero-words button[aria-pressed="true"]::before{transform:scale(1.4)}
.hero-foot{display:flex;justify-content:space-between;color:var(--muted);gap:20px;border-top:1px solid var(--line);padding:16px 0 22px}

.hero-scene{position:relative;height:clamp(440px,44vw,640px);perspective:1500px;--x:0}
.scene-disc{position:absolute;left:8%;right:6%;top:6%;bottom:6%;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ff6d60,var(--coral) 45%,#d9382d);transform:scale(calc(1 - var(--hp,0)*.15))}
.scene-ring{position:absolute;border:1px dashed rgba(247,243,222,.35);border-radius:50%;inset:-2% 0}
.scene-ring.two{inset:12% 14%;border-color:rgba(23,22,21,.25)}
.stack{position:absolute;inset:0;will-change:transform;transform-style:preserve-3d;transform:rotateX(calc(var(--rx,0)*1deg)) rotateY(calc(var(--ry,0)*1deg))}
.hs{position:absolute;transform-style:preserve-3d;transition:transform .9s var(--ease),filter .5s,opacity .5s}
.hs>.ui{display:block}
.hs .ui-browser,.hs .ui-dash,.hs .ui-phone{box-shadow:.8em 1.2em 1.6em rgba(40,10,10,.32)}
.hs-dash{--s:clamp(9px,1.05vw,15px);left:-2%;top:12%;transform:translateZ(calc(-90px - var(--x)*120px)) translateY(calc(var(--x)*-40px)) rotate(-7deg)}
.hs-web{--s:clamp(9px,1.02vw,14.5px);left:15%;top:38%;transform:translateZ(calc(var(--x)*10px)) rotate(-3deg)}
.hs-phone{--s:clamp(9px,1.05vw,15px);right:4%;top:4%;transform:translateZ(calc(90px + var(--x)*130px)) translateY(calc(var(--x)*30px)) rotate(7deg)}
.hs.hl{filter:drop-shadow(0 0 0 transparent)}
.hs.hl.hs-dash{transform:translateZ(calc(-40px - var(--x)*120px)) translateY(-18px) rotate(-5deg) scale(1.04)}
.hs.hl.hs-web{transform:translateZ(60px) translateY(-18px) rotate(-1.5deg) scale(1.04)}
.hs.hl.hs-phone{transform:translateZ(calc(150px + var(--x)*130px)) translateY(-16px) rotate(4deg) scale(1.05)}
.hs .ub-page,.hs .ub-blob,.hs .up-screens{animation:none!important}
.hs .ud-bars i:nth-child(3n){animation:bar-grow 1.1s var(--ease) both!important}
.hero.off .stack{animation-play-state:paused!important}
.hs-tag{position:absolute;z-index:4;background:var(--ink);color:var(--cream);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;border-radius:99px;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .5s var(--spring);white-space:nowrap}
.hs.hl .hs-tag{opacity:1;transform:none}
.hs-dash .hs-tag{left:1em;bottom:calc(100% + 10px)}.hs-web .hs-tag{right:1em;top:calc(100% + 10px)}.hs-phone .hs-tag{right:calc(100% + 10px);top:2em}
.js .hero:not(.go) .hs{opacity:0}
.hero.go .hs-dash{animation:hs-in 1s var(--ease) .15s backwards}
.hero.go .hs-web{animation:hs-in 1s var(--ease) .3s backwards}
.hero.go .hs-phone{animation:hs-in 1s var(--ease) .45s backwards}
@keyframes hs-in{from{opacity:0;translate:0 70px}}
.hero.go:not(.idle-off) .hero-scene .stack:not(.touched){animation:stack-sway 9s ease-in-out 1.6s infinite alternate}
@keyframes stack-sway{from{transform:rotateX(2deg) rotateY(-5deg)}to{transform:rotateX(-2deg) rotateY(5deg)}}
.hero-words-note{position:absolute;right:0;bottom:-2px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* marquee: position is scroll-linked, not a timer */
.marquee{background:var(--coral);color:var(--ink);overflow:hidden;white-space:nowrap;padding:13px 0}
.marquee-track{display:flex;width:max-content;transform:translateX(calc(var(--mx,0)*1px))}
.marquee-track span{font-size:clamp(17px,1.7vw,22px);line-height:1.2;font-weight:700;letter-spacing:-.03em;padding-right:28px}

/* intro + scrubbed statement */
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:end}
.intro h2{font-size:clamp(60px,7vw,112px);line-height:.99;margin:27px 0 0}
.intro h2 em{color:var(--coral)}
.intro-copy{max-width:540px}
.intro-copy p:first-child{font-size:clamp(19px,1.9vw,24px);line-height:1.45;color:var(--cream);margin-bottom:26px}
.intro-copy p{color:var(--muted);line-height:1.7}
.intro-copy .text-link{margin-top:25px}
.scrub{font:clamp(40px,6vw,96px)/1.06 var(--serif);letter-spacing:-.055em;margin:clamp(70px,9vw,130px) 0 0;max-width:15em}
.scrub .sw{display:inline-block;margin-right:.22em;opacity:calc(.2 + var(--on,0)*.8);transition:opacity .25s linear}
.scrub .sw.hi{color:var(--coral)}
.js .scrub .sw{opacity:calc(.2 + var(--on,0)*.8)}
html:not(.js) .scrub .sw{opacity:1}

/* ===== product journey: GSAP ScrollTrigger horizontal pin, with a plain stacked fallback =====
   Default (no JS, GSAP blocked/failed, reduced motion, or narrow viewport): .hj-track is a normal
   block, panels stack vertically — real content, nothing hidden. Only `.hjourney.hpin` (added by JS,
   only once GSAP + ScrollTrigger have actually initialised) switches to the pinned horizontal rig. */
.hjourney{border-top:1px solid var(--line);position:relative;padding-top:calc(var(--header-h) + 36px)}
.hj-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 0 18px}
.jrail{display:flex;gap:8px}
.jrail button{background:none;border:1px solid var(--line);border-radius:99px;padding:8px 14px;font-size:12px;display:inline-flex;gap:8px;align-items:center;transition:background var(--t-fast),color var(--t-fast)}
.jrail button b{font-size:10px;color:var(--coral)}
.jrail button[aria-current="step"]{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.jrail button[aria-current="step"] b{color:var(--coral-deep)}
.hjourney:not(.hpin) .jrail{display:none}
.hj-panel{border-top:1px solid var(--line);padding:clamp(40px,6vw,80px) 0}
.hj-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:5%;align-items:stretch}
.jcopy{display:flex;flex-direction:column;justify-content:center}
.jcopy .num{font:clamp(60px,8vw,120px)/1 var(--serif);color:var(--coral);letter-spacing:-.06em}
.jcopy h3{font-size:clamp(38px,5vw,72px);line-height:1;margin:.25em 0 .35em}
.jcopy h3 em{color:var(--coral)}
.jcopy .text-link{align-self:flex-start}
.jcopy p{color:var(--muted);max-width:30em;line-height:1.65}
.jcopy ul{list-style:none;padding:0;margin:8px 0 26px;display:flex;gap:8px;flex-wrap:wrap}
.jpanel{position:relative;background:var(--hue);min-height:clamp(320px,40vw,520px);display:grid;place-items:center;overflow:hidden;color:var(--ink)}
.jpanel .ui{transition:transform 1s var(--ease),opacity .6s}
.jpanel.web{--s:clamp(9px,1.35vw,19px)}.jpanel.app{--s:clamp(10px,1.5vw,21px)}.jpanel.sys{--s:clamp(9px,1.35vw,19px)}
.jpanel .badge{position:absolute;left:18px;top:18px;z-index:3}
.jpanel .ui-browser,.jpanel .ui-dash,.jpanel .ui-phone{box-shadow:.8em 1.2em 1.8em rgba(40,25,25,.28)}
/* pinned/horizontal rig — GSAP drives .hj-track's transform directly (scrub), this just sets up the stage */
.hjourney.hpin .hj-pin{height:100svh;overflow:hidden}
.hjourney.hpin .hj-track{display:flex;height:100%;width:100%;will-change:transform}
.hjourney.hpin .hj-panel{flex:none;width:100vw;height:100%;border-top:0;padding:0;display:flex;align-items:center}
.hjourney.hpin .hj-inner{width:100%}
.hjourney.hpin .jpanel{min-height:0;height:clamp(320px,40vw,560px)}
.hjourney.hpin .hj-panel .jcopy>*{transition:opacity .6s,transform .7s var(--ease)}
.hjourney.hpin .hj-panel:not(.is-live) .jcopy>*{opacity:.25;transform:translateY(10px)}

/* concept sheet slides over the dark journey */
.sheet{position:relative;z-index:2;border-radius:clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0 0;margin-top:calc(clamp(28px,4vw,56px)*-1);padding-top:clamp(70px,8vw,120px)}
.sheet .projects{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px}
.sheet .projects .pcard:nth-child(1){grid-column:span 7}
.sheet .projects .pcard:nth-child(2){grid-column:span 5}
.sheet .projects .pcard:nth-child(3){grid-column:span 12}
.sheet .more{margin-top:40px}

/* services preview */
.services-preview{border-top:1px solid var(--line)}
.sp-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:8%}
.sp-intro{position:sticky;top:calc(var(--header-h) + 30px);align-self:start}
.sp-intro h2{font-size:clamp(56px,6.8vw,110px);line-height:.95;margin:26px 0}
.sp-intro h2 em{color:var(--coral)}
.sp-intro p{max-width:330px;color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:30px}
.sp-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.sp-list a{position:relative;display:grid;grid-template-columns:45px 1fr auto;gap:12px;align-items:center;padding:clamp(20px,2.4vw,30px) 0;border-top:1px solid var(--line);overflow:hidden;transition:padding var(--t-med) var(--ease),color var(--t-fast)}
.sp-list a::before{content:'';position:absolute;inset:0;background:var(--coral);transform:translateY(101%);transition:transform .45s var(--ease);z-index:-1}
.sp-list a:hover,.sp-list a:focus-visible{color:var(--ink);padding-left:18px;padding-right:18px}
.sp-list a:hover::before,.sp-list a:focus-visible::before{transform:none}
.sp-list{isolation:isolate}
.sp-list .n{font-size:11px;color:var(--coral);transition:color var(--t-fast)}
.sp-list a:hover .n,.sp-list a:focus-visible .n{color:var(--ink)}
.sp-list .t{font:clamp(28px,3.3vw,52px)/1.04 var(--serif);letter-spacing:-.055em}
.sp-list .d{display:block;font:400 13px/1.5 var(--sans);letter-spacing:0;opacity:.75;margin-top:6px;max-width:34em}
.sp-list .go{font-size:24px;transition:transform .4s var(--ease)}
.sp-list a:hover .go{transform:rotate(45deg)}

/* proof structure + testimonial stack */
.proof{background:var(--ink-2);border-top:1px solid var(--line)}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:clamp(60px,8vw,110px)}
.slot{border:1.5px dashed rgba(247,243,222,.35);padding:22px;min-height:170px;display:flex;flex-direction:column;justify-content:space-between;background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(247,243,222,.035) 12px 13px)}
.slot b{font:25px/1.15 var(--serif);letter-spacing:-.04em;font-weight:400}
.slot span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.slot:not(.filled) span::before{content:'Reserved · ';color:var(--coral);font-weight:700}
.slot.filled{border-style:solid}
.tm{display:grid;grid-template-columns:.78fr 1.22fr;gap:6%;align-items:center}
.tm h2{font-size:clamp(46px,5.4vw,84px);line-height:1;margin:22px 0 22px}
.tm h2 em{color:var(--coral)}
.tm-note{color:var(--muted);font-size:14px;line-height:1.65;max-width:34em}
.tm-ctrl{display:flex;align-items:center;gap:12px;margin-top:28px}
.tm-ctrl button{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:none;font-size:20px;transition:background var(--t-fast),color var(--t-fast),transform .3s var(--ease)}
.tm-ctrl button:hover{background:var(--coral);color:var(--ink);border-color:var(--coral)}
.tm-ctrl output{font-size:12px;letter-spacing:.12em;color:var(--muted);margin-left:8px}
.tm-stage{position:relative;height:clamp(360px,36vw,470px);touch-action:pan-y;outline-offset:10px}
.tm-card{position:absolute;inset:0 9% 0 0;padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;justify-content:space-between;background:var(--tint,var(--cream));color:var(--ink);--o:0;transform:translate(calc(var(--o)*20px),calc(var(--o)*14px)) rotate(calc(-2.2deg + var(--o)*2.6deg)) scale(calc(1 - var(--o)*.045));z-index:calc(10 - var(--o));transition:transform .65s var(--ease),opacity .4s;cursor:grab;user-select:none;-webkit-user-select:none}
.tm-card.dragging{transition:none;cursor:grabbing}
.tm-card.gone{opacity:0}
.tm-card q{font:clamp(24px,2.7vw,38px)/1.18 var(--serif);letter-spacing:-.04em;quotes:none}
.tm-card footer{font-size:13px;display:flex;justify-content:space-between;gap:12px;align-items:end}
.tm-card.ph{background:repeating-linear-gradient(135deg,var(--tint) 0 14px,rgba(23,22,21,.05) 14px 15px);border:2px dashed var(--ink);padding-top:clamp(64px,6vw,84px)}
.tm-card.ph q{color:#3a3731}
.tm-stamp{position:absolute;right:-14px;top:18px;background:var(--ink);color:var(--butter);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:9px 14px;transform:rotate(4deg);max-width:16em;text-align:center;line-height:1.3}

@media(max-width:1000px){.slots{grid-template-columns:1fr}.slot{min-height:120px}.tm{grid-template-columns:1fr;gap:34px}.sp-grid{grid-template-columns:1fr;gap:44px}.sp-intro{position:static}.intro-grid{grid-template-columns:1fr;gap:40px}.sheet .projects{grid-template-columns:minmax(0,1fr)}.sheet .projects .pcard:nth-child(n){grid-column:auto}}
@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr;gap:20px;min-height:0}
  .hero-scene{height:clamp(330px,92vw,480px);order:2}
  .hero h1{font-size:clamp(52px,13vw,92px)}
  .hj-inner{grid-template-columns:1fr;gap:26px}
  .jpanel{order:-1}
  .jrail button span{display:none}
  .hs-tag{display:none}
  .jpanel.web,.jpanel.sys{--s:10.4px}.jpanel.app{--s:12.5px}
  .hs-dash{--s:clamp(7.5px,2.15vw,12px);left:0;top:5%}
  .hs-web{--s:clamp(7.5px,2.15vw,12px);left:15%;top:40%}
  .hs-phone{--s:clamp(7.5px,2.2vw,12px);right:3%;top:2%}
  .hj-head .section-label{font-size:10px}
}
@media(max-width:600px){
  .hero-meta{font-size:9px}.hero-meta span:last-child,.hero-foot span:last-child{display:none}
  .hero-foot{font-size:8px}
  .hero-ctas .btn{flex:1 1 auto}
  .tm-card{inset:0 7% 0 0}
  .tm-stamp{right:-8px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .stack,.hs{transition:none!important}
  .hero.go .hs-dash,.hero.go .hs-web,.hero.go .hs-phone,.hero.go .stack{animation:none!important}
  .js .hero:not(.go) .hs{opacity:1}
  .hero-copy{transform:none;opacity:1}
  .tm-card{transition:none}
}

/* skip layout/paint work for below-the-fold sections until they approach the viewport */
.services-preview,.process,.proof{content-visibility:auto;contain-intrinsic-size:auto 900px}
.site-footer{content-visibility:auto;contain-intrinsic-size:auto 700px}

/* ===== stat band: scroll-triggered count-up (GSAP-ScrollTrigger-style moment, hand-rolled, no library) ===== */
.stat-band{border-top:1px solid var(--line);position:relative;overflow:clip}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.stat{position:relative;border-right:1px solid var(--line);padding:clamp(26px,3vw,40px) clamp(20px,2.4vw,28px);min-height:clamp(180px,16vw,230px);display:flex;flex-direction:column;justify-content:flex-end;gap:12px}
.stat::before{content:'';position:absolute;top:-1px;left:0;height:2px;width:100%;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.stat.in::before{transform:scaleX(1)}
.stat-num{font:clamp(54px,6.4vw,92px)/1 var(--serif);letter-spacing:-.045em;color:var(--coral);font-variant-numeric:tabular-nums}
.stat span{font-size:13px;line-height:1.55;color:var(--muted);max-width:26ch}
@media(max-width:1000px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.stats-grid{grid-template-columns:1fr}.stat{min-height:0}}
@media(prefers-reduced-motion:reduce){.stat::before{transition:none;transform:scaleX(1)}}

/* ===== GSAP-pinned scale/rotate statement (real GSAP ScrollTrigger scrub) =====
   Default: a plain centered statement, no pin, no transform — real readable text.
   `.gsap-statement.gspin` (added by JS only once GSAP+ScrollTrigger actually initialise, and only
   on wide, motion-allowed viewports) switches to the pinned stage; the scale/rotate itself is driven
   entirely by GSAP inline styles, never by CSS, so there's nothing to fight or desync from. */
.gsap-statement{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding-block:clamp(90px,12vw,170px)}
.gs-text{font:clamp(34px,6vw,76px)/1.08 var(--serif);letter-spacing:-.04em;text-align:center;max-width:16em;margin:0}
.gs-text em{color:var(--coral)}
.gsap-statement.gspin{padding-block:0;display:block}
.gsap-statement.gspin .gs-pin{height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gsap-statement.gspin .gs-text{font-size:clamp(44px,8vw,110px);will-change:transform}
@media(max-width:600px){.gs-text{font-size:clamp(30px,8vw,44px)}}

/* ===== travelling-dot path over the process timeline (real GSAP + native SVG getPointAtLength,
   scrub-tied to the section's own scroll range, not the GSAP library's MotionPath plugin — one
   less script to load for one small effect). Decorative only until JS adds the `has-path` class. ===== */
.tl-ball-svg{position:absolute;left:0;top:-54px;width:100%;height:76px;overflow:visible;pointer-events:none;opacity:0}
[data-tl-path].has-path .tl-ball-svg{opacity:1}
.tl-ball-svg circle{will-change:transform}
@media(max-width:1000px){.tl-ball-svg{display:none}}
@media(prefers-reduced-motion:reduce){.tl-ball-svg{display:none}}

/* ===== soft gradient blobs + corner arc (RUDIQS's own palette, translating gsap.com's blob/arc
   decoration language — not their purple, our coral/peach/sky) ===== */
.gsap-statement{position:relative;overflow:clip}
.gs-blob{position:absolute;border-radius:45% 55% 60% 40%/50% 45% 55% 50%;filter:blur(2px);opacity:.5;pointer-events:none;will-change:transform}
.gs-blob-a{width:clamp(180px,22vw,320px);aspect-ratio:1;left:-6%;top:12%;background:radial-gradient(circle at 32% 28%,#ff8f7f,var(--coral) 55%,#9c231a)}
.gs-blob-b{width:clamp(140px,16vw,240px);aspect-ratio:1;right:-4%;bottom:8%;border-radius:60% 40% 45% 55%/45% 55% 45% 55%;background:radial-gradient(circle at 30% 30%,#c9bdf2,var(--lilac) 55%,#5e5591)}
.sb-arc{position:absolute;right:0;top:0;width:clamp(160px,20vw,300px);aspect-ratio:1;border-radius:0 0 0 100%;background:radial-gradient(circle at 100% 0%,var(--sky) 0%,transparent 70%);opacity:.35;pointer-events:none}
.section-label.bracket{font-family:var(--sans);letter-spacing:.02em;gap:8px}
.section-label.bracket::before{display:none}
@media(prefers-reduced-motion:reduce){.gs-blob{display:none}}
@media(max-width:880px){.gs-blob-a,.gs-blob-b{opacity:.3}.sb-arc{width:160px}}

/* ===== WORK + PROJECT PAGES ===== */
.work-hero{overflow:clip}
.work-hero .page-hero-bottom{align-items:end}
.hue-cluster{position:relative;width:min(360px,34vw);height:160px;flex:none}
.hue-cluster span{position:absolute;display:grid;place-items:center;width:130px;height:130px;border-radius:50%;font:700 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);animation:bob 7s ease-in-out infinite alternate}
.hue-cluster span:nth-child(1){left:0;top:20px;background:var(--peach)}
.hue-cluster span:nth-child(2){left:28%;top:0;background:var(--lilac);animation-delay:-2s}
.hue-cluster span:nth-child(3){left:56%;top:28px;background:var(--sky);animation-delay:-4s}
@keyframes bob{to{transform:translateY(-14px) rotate(4deg)}}
.disclose{display:flex;gap:18px;align-items:center;border:1px solid var(--line);padding:16px 20px;margin-bottom:34px;font-size:14px;color:var(--cream-2)}
.disclose .badge{flex:none}
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.filter{border:1px solid var(--line);background:transparent;border-radius:40px;padding:11px 18px;font-size:13px;display:inline-flex;gap:12px;align-items:center;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform .3s var(--ease)}
.filter span{font-size:10px;color:var(--muted);transition:color var(--t-fast)}
.filter:hover{border-color:var(--coral)}
.filter[aria-pressed="true"]{background:var(--coral);border-color:var(--coral);color:var(--ink)}
.filter[aria-pressed="true"] span{color:var(--ink)}
.filter:active{transform:scale(.96)}
.filter-count{font-size:12px;color:var(--muted);margin:0 0 30px}
.work-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px}
.work-grid .pcard{grid-column:span 6;transition:opacity .25s,transform .35s var(--ease)}
.work-grid .pcard.morrow{grid-column:span 7}.work-grid .pcard.moneta{grid-column:span 5}.work-grid .pcard.aperture{grid-column:span 12}
.work-grid.single .pcard{grid-column:span 12}
.work-grid .pcard.out{opacity:0;transform:scale(.97)}
.work-grid .pcard.moneta .pcard-art{min-height:clamp(380px,44vw,600px)}
.proof-hint{margin-top:70px;border-top:1px solid var(--line);padding-top:26px;display:flex;justify-content:space-between;gap:30px;align-items:center;color:var(--muted);font-size:14px}

/* project detail */
.pj-hero{background:var(--hue);color:var(--ink);position:relative;overflow:hidden}
.pj-hero .container{padding:clamp(34px,4vw,56px) 0 0}
.crumbs{display:flex;gap:10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:clamp(28px,4vw,56px)}
.crumbs a{border-bottom:1px solid var(--ink)}
.pj-title{display:grid;grid-template-columns:1.1fr .9fr;gap:5%;align-items:end}
.pj-title h1{font-size:clamp(88px,15vw,240px);line-height:.82;margin:20px 0 0;letter-spacing:-.075em;overflow-wrap:anywhere}
.pj-title p{font-size:clamp(18px,2vw,26px);line-height:1.35;max-width:22em;margin:0 0 14px}
.pj-stage{position:relative;display:grid;place-items:end center;min-height:clamp(340px,42vw,620px);margin-top:clamp(20px,3vw,40px)}
.pj-stage .ui{transform:translateY(8%);--s:clamp(11px,1.6vw,23px)}
.pj-stage .ui-phone{--s:clamp(12px,1.8vw,26px)}
.pj-stage .pj-stack{display:flex;gap:2em;align-items:end}
.pj-stage .ui-browser,.pj-stage .ui-dash,.pj-stage .ui-phone{box-shadow:.8em 1.2em 1.8em rgba(40,25,25,.28)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.fact{padding:26px 24px 26px 0;border-right:1px solid var(--line)}
.fact:not(:first-child){padding-left:24px}
.fact:last-child{border-right:0}
.fact small{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.fact b{font-weight:500;font-size:15px}
.fact a{border-bottom:1px solid var(--coral)}
.how-to-read{background:var(--ink-2);border-left:3px solid var(--coral);padding:22px 26px;margin:clamp(40px,5vw,70px) 0 0;max-width:62em;font-size:15px;line-height:1.65;color:var(--cream-2)}
.how-to-read strong{color:var(--cream)}
.pj-two{display:grid;grid-template-columns:.8fr 1.2fr;gap:8%;padding-block:clamp(60px,8vw,110px);border-bottom:1px solid var(--line)}
.pj-two h2{font-size:clamp(44px,5.2vw,80px);line-height:1;margin:24px 0 0}
.pj-two h2 em{color:var(--coral)}
.pj-two p{font:clamp(20px,2.2vw,30px)/1.4 var(--serif);letter-spacing:-.03em;color:var(--cream-2);margin:0;max-width:28em}
.decisions{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.decision{border:1px solid var(--line);padding:26px;min-height:240px;display:flex;flex-direction:column;justify-content:space-between;transition:background var(--t-med),color var(--t-med),transform .5s var(--ease)}
.decision:hover{background:var(--cream);color:var(--ink);transform:translateY(-4px)}
.decision span{font:44px var(--serif);color:var(--coral)}
.decision:hover span{color:var(--coral-deep)}
.decision h3{font-size:30px;margin:0 0 8px}
.decision p{font-size:14px;line-height:1.6;color:var(--muted);margin:0}
.decision:hover p{color:var(--muted-ink)}
.demo{display:grid;grid-template-columns:1.15fr .85fr;border:1px solid var(--line);margin-top:34px;min-height:480px}
.demo-stage{position:relative;background:var(--hue);color:var(--ink);display:grid;place-items:center;overflow:hidden;padding:30px;transition:background .6s var(--ease)}
.demo-controls{background:var(--ink-2);padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:22px}
.demo-controls h3{font-size:30px;margin:0}
.demo-controls p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.demo-tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--coral)}
.field-label{font-size:12px;font-weight:700;letter-spacing:.06em;display:block;margin-bottom:10px}
.swatches{display:flex;gap:12px;border:0;padding:0;margin:0}
.swatches legend{padding:0}
.swatches label{position:relative;cursor:pointer}
.swatches input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.swatches span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--sw);border:2px solid transparent;box-shadow:0 0 0 2px var(--ink-2);transition:transform .3s var(--spring),border-color .2s;font-size:0}
.swatches input:checked+span{border-color:var(--cream);transform:scale(1.12)}
.swatches input:focus-visible+span{outline:3px solid var(--coral);outline-offset:4px}
.swatch-name{font-size:13px;margin-top:10px;color:var(--cream-2)}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line)}
.stepper button{width:44px;height:44px;background:none;border:0;font-size:20px}
.stepper button:hover{background:var(--coral);color:var(--ink)}
.stepper output{min-width:44px;text-align:center;font-weight:700}
input[type=range]{width:100%;accent-color:var(--coral);height:30px}
.readout{font:clamp(40px,4.6vw,64px)/1 var(--serif);letter-spacing:-.05em}
.readout small{font:400 13px var(--sans);letter-spacing:0;color:var(--muted);display:block;margin-top:8px}
/* Morrow demo */
.obj{width:min(300px,62%);aspect-ratio:1;position:relative;transition:transform .7s var(--ease)}
.obj i{position:absolute;inset:0;border-radius:45% 55% 30% 70%/60% 40% 60% 40%;background:linear-gradient(135deg,var(--o1),var(--o2) 55%,var(--o3));box-shadow:inset -22px -18px 30px rgba(0,0,0,.25),20px 30px 40px rgba(0,0,0,.2);transform:rotate(24deg);transition:background .6s}
.obj i::after{content:'';position:absolute;inset:18% 26%;border:2px solid var(--o4);border-radius:50%;transform:rotate(30deg);opacity:.8}
.obj.bump{transform:scale(1.06) rotate(-4deg)}
.demo-stage .stage-word{position:absolute;left:24px;bottom:18px;font:clamp(40px,6vw,84px)/1 var(--serif);letter-spacing:-.06em;opacity:.9}
.bag{display:flex;align-items:center;justify-content:space-between;font-size:13px;border-top:1px solid var(--line);padding-top:16px;color:var(--cream-2)}
/* Moneta demo */
.mn-ring{--pct:25;width:min(260px,60%);aspect-ratio:1;border-radius:50%;background:conic-gradient(#c7e88b calc(var(--pct)*1%),rgba(23,22,21,.16) 0);display:grid;place-items:center;position:relative;transition:--pct .6s}
.mn-ring::after{content:'';position:absolute;inset:16%;border-radius:50%;background:var(--hue)}
.mn-ring div{position:relative;z-index:1;text-align:center;font:700 14px var(--sans)}
.mn-ring b{display:block;font:48px/1 var(--serif);letter-spacing:-.05em;font-weight:400}
.mn-proj{position:absolute;left:24px;right:24px;bottom:22px;height:8px;background:rgba(23,22,21,.15);border-radius:9px;overflow:hidden}
.mn-proj i{position:absolute;inset:0;background:var(--ink);transform:scaleX(var(--fill,.2));transform-origin:left;transition:transform .5s var(--ease)}
.mn-cap{position:absolute;left:24px;bottom:38px;font-size:12px;font-weight:700}
/* Aperture demo */
.ap-table{width:100%;max-width:520px;background:#fff;color:#1e2a48;border-radius:10px;overflow:hidden;font-size:13px;box-shadow:0 20px 40px rgba(30,42,72,.25)}
.ap-row{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:10px;align-items:center;padding:13px 16px;border-bottom:1px solid #e8edf4;transition:opacity .3s,transform .4s var(--ease),max-height .4s;max-height:60px}
.ap-row.head{background:#1b2e50;color:#fff;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.ap-row.out{opacity:0;transform:translateX(18px);max-height:0;padding-block:0;border:0;overflow:hidden}
.ap-row b{font-weight:600}
.ap-status{display:inline-flex;gap:7px;align-items:center;font-weight:600;font-size:12px}
.ap-status i{width:10px;height:10px;flex:none;background:var(--c)}
.ap-status.ok i{border-radius:50%}.ap-status.risk i{clip-path:polygon(50% 0,100% 100%,0 100%)}.ap-status.done i{border-radius:2px;transform:rotate(45deg) scale(.8)}
.ap-status.ok{--c:#2f7f67}.ap-status.risk{--c:#c0462d}.ap-status.done{--c:#5b6fb3}
.ap-load{height:6px;background:#e8edf4;border-radius:6px;position:relative;overflow:hidden}
.ap-load i{position:absolute;inset:0;background:#8fa3dc;transform:scaleX(var(--w));transform-origin:left}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{border:1px solid var(--line);background:none;border-radius:99px;padding:9px 14px;font-size:12px}
.chips button[aria-pressed="true"]{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.related{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.next-concept{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:clamp(40px,5vw,70px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:padding .4s var(--ease)}
.next-concept:hover{padding-inline:24px;background:var(--coral);color:var(--ink)}
.next-concept small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:12px}
.next-concept>span:first-child{min-width:0}.next-concept b{display:block;font:400 clamp(38px,9vw,140px)/.95 var(--serif);letter-spacing:-.065em;overflow-wrap:anywhere}
.next-concept span{font-size:clamp(34px,5vw,70px)}

@media(max-width:1000px){.demo{grid-template-columns:1fr}.demo-stage{min-height:340px}.pj-two{grid-template-columns:1fr;gap:34px}.pj-title{grid-template-columns:1fr;gap:20px}.facts{grid-template-columns:1fr 1fr}.fact:nth-child(3){padding-left:0}.fact:nth-child(2){border-right:0}.fact{border-bottom:1px solid var(--line)}.work-grid{grid-template-columns:minmax(0,1fr)}.work-grid .pcard.morrow,.work-grid .pcard.moneta,.work-grid .pcard.aperture,.work-grid.single .pcard{grid-column:auto}.decisions{grid-template-columns:1fr}.hue-cluster{display:none}}
@media(max-width:600px){.disclose{flex-direction:column;align-items:start;gap:10px}.facts{grid-template-columns:1fr}.fact{border-right:0;padding-left:0!important}.proof-hint{flex-direction:column;align-items:start}.ap-row{grid-template-columns:1.4fr 1fr;padding:11px 12px}.ap-row .ap-load{display:none}.pj-stage{min-height:360px}.pj-title h1{font-size:clamp(40px,13vw,70px)}}
@media(prefers-reduced-motion:reduce){.hue-cluster span{animation:none}.obj,.demo-stage,.mn-ring,.mn-proj i{transition:none}}

/* ===== SERVICES ===== */
.svc-index{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.svc-index a{border:1px solid var(--line);border-radius:99px;padding:9px 15px;font-size:12px;transition:background var(--t-fast),color var(--t-fast)}
.svc-index a:hover,.svc-index a:focus-visible{background:var(--coral);color:var(--ink);border-color:var(--coral)}
.svc-section{border-bottom:1px solid var(--line)}
.svc-grid{display:grid;grid-template-columns:.62fr 1.38fr;gap:7%}
.svc-intro{position:sticky;top:calc(var(--header-h) + 30px);align-self:start}
.svc-intro h2{font-size:clamp(50px,5.6vw,92px);line-height:.95;margin:26px 0}
.svc-intro h2 em{color:var(--coral)}
.svc-intro p{max-width:330px;color:var(--muted);font-size:15px;line-height:1.7}
.svc{border-top:1px solid var(--line)}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc h3{margin:0;font-family:var(--sans);letter-spacing:0}
.svc-btn{width:100%;display:grid;grid-template-columns:48px 1fr 44px;gap:12px;align-items:center;text-align:left;padding:clamp(22px,2.6vw,30px) 0;border:0;background:none;color:var(--cream)}
.svc-num{font-size:11px;font-weight:700;color:var(--coral);align-self:start;padding-top:12px}
.svc-title{font:clamp(30px,3.4vw,53px)/1.04 var(--serif);letter-spacing:-.055em;transition:transform .5s var(--ease)}
.svc-btn:hover .svc-title{transform:translateX(8px)}
.svc-plus{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:300;transition:transform .3s var(--ease),background .3s}
.svc-btn[aria-expanded="true"] .svc-plus{transform:rotate(45deg);background:var(--coral);color:var(--ink);border-color:var(--coral)}
.svc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.svc-panel:not([inert]){grid-template-rows:1fr}
.svc-panel>.svc-in{overflow:hidden;min-height:0}
.svc-body{display:grid;grid-template-columns:1fr 1fr;gap:34px;padding:6px 0 40px 60px}
.svc-body p.lede{color:var(--cream-2);font-size:15px;line-height:1.65;margin:0 0 20px}
.svc-body h4{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);margin:22px 0 10px;font-family:var(--sans)}
.svc-body ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:14px;color:var(--cream-2)}
.svc-body ul li{display:grid;grid-template-columns:18px 1fr}
.svc-body ul li::before{content:'→';color:var(--coral)}
.svc-body ol{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:14px;counter-reset:s}
.svc-body ol li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;color:var(--cream-2)}
.svc-body ol li::before{content:counter(s,decimal-leading-zero);font-size:11px;color:var(--coral);font-weight:700;padding-top:2px}
.svc-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:24px}
.svc-demo{background:var(--ink-2);border:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:14px;align-self:start}
.svc-demo>header{display:flex;justify-content:space-between;gap:10px;align-items:center}
.svc-demo>header b{font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.svc-demo>header span{font-size:10px;color:var(--muted)}
.svc-demo .hint{font-size:12px;color:var(--muted);margin:0}
.svc-demo button,.svc-demo input,.svc-demo label{font-size:12px}
.svc-demo .lab{display:block;font-weight:700;letter-spacing:.06em;font-size:12px}
.svc-demo .lab input{margin-top:8px}
/* demo: web */
.rd-wrap{overflow:hidden}
.rd-frame{container-type:inline-size;width:var(--w,100%);max-width:100%;margin-inline:auto;background:var(--cream);color:var(--ink);border-radius:6px;padding:12px;transition:width .15s linear;min-width:150px}
.rd-grid{display:grid;gap:8px}
@container (min-width:210px){.rd-grid{grid-template-columns:repeat(2,1fr)}.rd-hero{grid-column:1/-1}}
@container (min-width:300px){.rd-grid{grid-template-columns:2fr 1fr 1fr}.rd-hero{grid-column:1/-1}}
.rd-hero{background:var(--coral);height:70px;border-radius:4px;padding:10px;font:20px/1 var(--serif);letter-spacing:-.04em}
.rd-grid i{display:block;height:54px;background:var(--cream-2);border-radius:4px}
.rd-grid i:nth-child(3){background:var(--sage)}.rd-grid i:nth-child(4){background:var(--sky)}
.rd-bar{display:flex;justify-content:space-between;font-size:10px;margin-bottom:8px;font-weight:700}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{border:1px solid var(--line);background:none;border-radius:99px;padding:7px 12px}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{background:var(--cream);color:var(--ink);border-color:var(--cream)}
/* demo: mobile */
.mb-wrap{display:flex;gap:16px;align-items:center;justify-content:center}
.mb-phone{--s:11px;width:11em;height:19em;border:.45em solid #2a2a31;border-radius:2em;background:#252631;overflow:hidden;position:relative;display:flex;flex-direction:column;font-size:11px}
.mb-view{flex:1;padding:1.8em 1em .6em;font-size:.9em}
.mb-view h5{font:20px/1.05 var(--serif);letter-spacing:-.04em;margin:0 0 8px;font-weight:400}
.mb-view p{margin:0 0 8px;color:#bbb;font-size:10px}
.mb-card{background:#c7e88b;color:#1d2b1d;border-radius:10px;padding:9px;font-size:10px}
.mb-card b{display:block;font-size:20px;letter-spacing:-.05em}
.mb-tabs{display:flex;border-top:1px solid #ffffff1f;background:#1d1e26}
.mb-tabs button{flex:1;background:none;border:0;padding:10px 0;font-size:9px;color:#aaa;position:relative}
.mb-tabs button[aria-selected="true"]{color:#c7e88b}
.mb-tabs button[aria-selected="true"]::before{content:'';position:absolute;top:0;left:30%;right:30%;height:2px;background:#c7e88b}
.mb-view[hidden]{display:none}
.mb-view.in{animation:view-in .4s var(--ease)}
@keyframes view-in{from{opacity:0;transform:translateX(14px)}}
/* demo: crm */
.cr-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cr-col{background:rgba(247,243,222,.05);padding:8px;min-height:140px;border-radius:4px}
.cr-col h5{font:700 10px var(--sans);letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px;color:var(--muted)}
.cr-card{background:var(--cream);color:var(--ink);border-radius:4px;padding:8px;font-size:11px;margin-bottom:6px;animation:view-in .4s var(--ease)}
.cr-card button{display:block;margin-top:6px;background:var(--ink);color:var(--cream);border:0;padding:4px 8px;border-radius:99px;font-size:10px}
.cr-card button:hover{background:var(--coral);color:var(--ink)}
/* demo: design tokens */
.ds-card{background:var(--cream);color:var(--ink);padding:calc(var(--pad,18)*1px);border-radius:calc(var(--rad,8)*1px);display:grid;gap:calc(var(--pad,18)*.5px);transition:border-radius .2s,padding .2s}
.ds-card h5{font:24px/1 var(--serif);margin:0;letter-spacing:-.04em;font-weight:400}
.ds-card p{margin:0;font-size:12px;color:var(--muted-ink)}
.ds-card .ds-btn{justify-self:start;background:var(--acc,var(--coral));color:var(--ink);border:0;padding:9px 14px;border-radius:calc(var(--rad,8)*1px);font-weight:700;transition:background .2s,border-radius .2s}
.ds-swatches{display:flex;gap:8px}
.ds-swatches button{width:30px;height:30px;border-radius:50%;border:2px solid transparent;background:var(--c);padding:0;box-shadow:0 0 0 2px var(--ink-2)}
.ds-swatches button[aria-pressed="true"]{border-color:var(--cream)}
/* demo: automation */
.au-flow{display:grid;gap:6px}
.au-node{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:10px 12px;position:relative;transition:background .3s,color .3s,border-color .3s,opacity .3s}
.au-node label{display:flex;gap:10px;align-items:center;flex:1;cursor:pointer}
.au-node input{accent-color:var(--coral)}
.au-node.off{opacity:.4}
.au-node.run{background:var(--coral);color:var(--ink);border-color:var(--coral)}
.au-node.fixed span::after{content:' (always on)';color:var(--muted);font-size:10px}
.au-node.fixed.run span::after{color:var(--ink)}
.au-status{min-height:1.4em;font-size:12px;color:var(--cream-2)}
/* demo: support */
.sp-top{display:flex;align-items:center;gap:16px}
.sp-ring{--pct:0;width:70px;height:70px;border-radius:50%;background:conic-gradient(var(--coral) calc(var(--pct)*1%),rgba(247,243,222,.15) 0);display:grid;place-items:center;position:relative;flex:none;transition:--pct .4s}
.sp-ring::after{content:attr(data-label);position:absolute;inset:7px;background:var(--ink-2);border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px}
.sp-list2{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sp-list2 label{display:flex;gap:10px;align-items:center;cursor:pointer;padding:6px 0;border-bottom:1px solid var(--line)}
.sp-list2 input{accent-color:var(--coral);width:16px;height:16px}

/* ===== ABOUT ===== */
.about-hero{overflow:clip}
.about-hero .sticker{position:absolute;right:max(20px,calc((100% - 1440px)/2 + 40px));top:clamp(60px,8vw,110px);width:clamp(110px,13vw,190px);aspect-ratio:1;border-radius:50%;background:var(--coral);color:var(--ink);display:grid;place-items:center;text-align:center;font:700 clamp(11px,1.2vw,15px)/1.1 var(--sans);letter-spacing:.08em;text-transform:uppercase;transform:rotate(calc(var(--hp,0)*60deg - 12deg))}
.about-story{border-bottom:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:end}
.about-grid h2{font-size:clamp(60px,7vw,112px);line-height:.99;margin:27px 0 0}
.about-grid h2 em{color:var(--coral)}
.story-copy{max-width:540px}
.story-copy p:first-child{font-size:clamp(19px,1.9vw,24px);line-height:1.45;color:var(--cream);margin-bottom:26px}
.story-copy p{color:var(--muted);line-height:1.7}
.story-copy .text-link{margin-top:25px}
.team-section{background:var(--ink-2)}
.team-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:7%;align-items:center}
.team-rows{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line)}
.team-row{border-bottom:1px solid var(--line)}
.team-btn{width:100%;display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;background:none;border:0;text-align:left;padding:22px 0;color:var(--cream)}
.team-btn .n{font-size:11px;color:var(--coral);font-weight:700}
.team-btn .nm{font:clamp(26px,3vw,40px)/1.05 var(--serif);letter-spacing:-.05em;transition:transform .5s var(--ease)}
.team-btn .nm i{font-style:normal;border:1.5px dashed var(--coral);padding:0 .25em}
.team-btn:hover .nm{transform:translateX(8px)}
.team-btn .role{font-size:12px;color:var(--muted)}
.team-btn .role i{font-style:normal;border-bottom:1px dashed var(--muted)}
.team-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.team-panel:not([inert]){grid-template-rows:1fr}
.team-panel>div{overflow:hidden;min-height:0}
.team-panel p{color:var(--muted);line-height:1.7;max-width:34em;padding:0 0 10px 46px;margin:0}
.team-panel .ph-note{display:inline-block;margin:6px 0 26px 46px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--butter)}
.team-copy h3{font-size:clamp(46px,5vw,80px);line-height:1.04;margin:22px 0}
.team-copy>p{font-size:16px;line-height:1.7;color:var(--muted);max-width:30em}
.promise{border-top:1px solid var(--line);padding-top:26px;margin-top:46px;display:grid;grid-template-columns:110px 1fr;gap:20px}
.promise span{font-size:10px;color:var(--coral);font-weight:700;letter-spacing:.13em}
.promise p{font:clamp(20px,2vw,25px)/1.25 var(--serif);margin:0}
.values{border-top:1px solid var(--line)}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:60px}
.value{border-top:1px solid var(--line);padding-top:20px;min-height:260px;display:flex;flex-direction:column;position:relative}
.value::before{content:'';position:absolute;top:-1px;left:0;height:2px;width:100%;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.value.in::before{transform:scaleX(1)}
.value span{font-size:11px;color:var(--coral)}
.value h3{font-size:clamp(40px,4.4vw,55px);margin:auto 0 10px}
.value p{color:var(--muted);font-size:14px;max-width:280px}

/* ===== CONTACT ===== */
.contact-hero h1{font-size:clamp(60px,10.5vw,160px)}
.contact-page{background:var(--ink-2)}
.contact-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:9%}
.contact-aside h2{font-size:clamp(50px,5vw,80px);line-height:1.04;margin:25px 0}
.contact-aside h2 em{color:var(--coral)}
.contact-aside>p{color:var(--muted);line-height:1.7;max-width:360px}
.contact-mini{border-top:1px solid var(--line);margin-top:56px;padding-top:24px;max-width:360px}
.contact-mini span{font-size:11px;color:var(--coral);font-weight:700;letter-spacing:.12em}
.contact-mini p{font:23px/1.25 var(--serif);margin:15px 0 0}
.mode-banner{border:1.5px solid var(--butter);background:rgba(242,217,138,.08);padding:16px 18px;margin-bottom:26px;display:grid;grid-template-columns:auto 1fr;gap:14px;font-size:14px;line-height:1.55}
.mode-banner b{color:var(--butter);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding-top:2px;white-space:nowrap}
.mode-banner.live{border-color:var(--sage);background:rgba(159,196,176,.08)}
.mode-banner.live b{color:var(--sage)}
.contact-form{display:flex;flex-direction:column;gap:24px}
.field label,.field .lab{display:block;font-size:12px;font-weight:700;letter-spacing:.04em}
.field label span{color:var(--coral)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-form input,.contact-form select,.contact-form textarea{display:block;margin-top:10px;width:100%;border:1px solid var(--line);border-radius:0;background:var(--ink-3);color:var(--cream);padding:17px 18px;outline:none;transition:border-color .2s,background .2s}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--coral);background:#322f2b}
.contact-form [aria-invalid="true"]{border-color:#ff8a80;box-shadow:inset 3px 0 0 #ff8a80}
.contact-form ::placeholder{color:#8f8a80}
.contact-form textarea{resize:vertical;min-height:170px}
.contact-form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23f7f3de'%3E%3Cpath d='m4 7 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center}
.err{display:block;min-height:0;font-size:12px;color:#ffb0a8;margin-top:8px}
.err:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px}
.form-bottom p{font-size:12px;line-height:1.5;color:var(--muted);max-width:300px;margin:0}
.contact-form .btn{white-space:nowrap;position:relative}
.contact-form .btn[aria-busy="true"]{opacity:.7;pointer-events:none}
.form-result{border:1px solid var(--line);padding:20px;font-size:14px;line-height:1.6}
.form-result:empty{display:none}
.form-result.ok{border-color:var(--sage)}.form-result.warn{border-color:var(--butter)}.form-result.bad{border-color:#ff8a80}
.form-result strong{display:block;font:24px/1.15 var(--serif);letter-spacing:-.03em;margin-bottom:6px;font-weight:400}
.contact-end{background:var(--cream);color:var(--ink);padding:clamp(60px,7vw,90px) 0}
.contact-end .kicker{color:var(--muted-ink)}
.contact-end p{font:clamp(48px,7vw,105px)/1.02 var(--serif);letter-spacing:-.06em;margin:40px 0 0}
.contact-end p em{color:var(--coral-deep)}

@media(max-width:1000px){.svc-grid{grid-template-columns:1fr;gap:40px}.svc-intro{position:static}.svc-body{grid-template-columns:1fr;padding-left:0}.team-grid,.about-grid,.contact-grid{grid-template-columns:1fr;gap:50px}}
@media(max-width:880px){.about-hero .sticker{display:none}.member{max-width:520px}}
@media(max-width:600px){
  .svc-btn{grid-template-columns:30px 1fr 38px;gap:8px}.svc-plus{width:36px;height:36px}
  .value-grid{grid-template-columns:1fr;gap:30px}.value{min-height:170px}
  .form-row{grid-template-columns:1fr}.form-bottom{align-items:stretch;flex-direction:column}.form-bottom p{max-width:none}.contact-form .btn{justify-content:space-between}
  .mode-banner{grid-template-columns:1fr;gap:6px}
  .team-btn{grid-template-columns:28px 1fr}.team-btn .role{grid-column:2}
  .promise{grid-template-columns:1fr;gap:10px}
  .cr-cols{grid-template-columns:1fr}.cr-col{min-height:0}
  .mb-wrap{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  .about-hero .sticker{animation:none!important}
  .svc-panel,.team-panel{transition:none}
  .rd-frame{transition:none}
  .value::before{transform:scaleX(1);transition:none}
}

/* ===== LIFE: mascot, cursor, studio rules ===== */
.mascot{display:block;overflow:visible;color:var(--coral)}
.mascot .m-eye{transform-box:fill-box;animation:m-blink 5.5s infinite}
.mascot .m-eye+.m-eye{animation-delay:.04s}
.mascot .m-pupil{transition:transform .12s linear}
.mascot .m-open{opacity:0;transition:opacity .2s}
.mascot .m-smile{transition:opacity .2s}
.mascot.happy .m-open{opacity:1}.mascot.happy .m-smile{opacity:0}
.mascot .m-body{transform-origin:100px 100px;animation:m-spin 40s linear infinite}
.mascot .m-face{transform-origin:100px 100px;transition:transform .5s var(--spring)}
.mascot.hop{animation:m-hop .7s var(--ease)}
@keyframes m-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes m-spin{to{transform:rotate(360deg)}}
@keyframes m-hop{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-22px) scale(1.06,.94)}60%{transform:translateY(0) scale(.96,1.05)}100%{transform:none}}
.hero-mascot{position:absolute;left:1%;bottom:3%;width:clamp(70px,8vw,110px);z-index:4;cursor:pointer}
.cta-mascot{position:absolute;right:max(24px,calc((100% - 1440px)/2 + 140px));top:clamp(30px,4vw,60px);width:clamp(90px,11vw,170px);color:var(--cream)}
.cta-mascot .m-face{transform:none}

.cursor{position:fixed;left:0;top:0;z-index:300;pointer-events:none;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid var(--cream);border-radius:50%;display:grid;place-items:center;opacity:0;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .25s,border-color .25s,opacity .25s;will-change:transform;mix-blend-mode:normal}
.cursor.on{opacity:.9}
.cursor.link{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(255,75,63,.25);border-color:var(--coral)}
.cursor.label{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--coral);border-color:var(--coral);color:var(--ink)}
.cursor b{font:700 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;opacity:0;transition:opacity .2s}
.cursor.label b{opacity:1}
.cursor.down{transform-origin:center}
.on-cream-cursor{border-color:var(--ink)}

.rules{border-top:1px solid var(--line)}
.rule-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.rule{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(22px,2.6vw,36px);min-height:clamp(240px,24vw,320px);display:flex;flex-direction:column;justify-content:space-between;transition:background var(--t-med),color var(--t-med),transform .5s var(--ease);position:relative}
.rule>span{font:clamp(44px,5vw,64px)/1 var(--serif);letter-spacing:-.05em;color:var(--coral);transition:transform .5s var(--spring),color var(--t-med)}
.rule h3{font-size:clamp(26px,2.6vw,36px);line-height:1.05;margin:0 0 10px}
.rule p{margin:0;font-size:14px;line-height:1.6;color:var(--muted);max-width:26em;transition:color var(--t-med)}
.rule:hover,.rule:focus-within{background:var(--cream);color:var(--ink);transform:translateY(-6px) rotate(-.7deg);z-index:2}
.rule:hover>span{color:var(--coral-deep);transform:scale(1.12) rotate(-4deg);transform-origin:left bottom}
.rule:hover p{color:var(--muted-ink)}
@media(max-width:1000px){.rule-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.rule-grid{grid-template-columns:1fr}.rule{min-height:0;gap:26px}.hero-mascot{width:64px}.cta-mascot{width:84px;right:20px}.rule:hover{transform:none}}
@media(hover:none){.cursor{display:none}}
@media(prefers-reduced-motion:reduce){.mascot .m-eye,.mascot .m-body,.mascot.hop{animation:none}.cursor{display:none}.rule,.rule>span{transition:none}.rule:hover{transform:none}}

/* ===== REAL WORK: screenshot frames, showcase, team photo ===== */
.shot{container-type:size;height:100%;overflow:hidden;background:#111}
.shot img{display:block;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top;transform:translateY(0)}
.is-live .shot img{animation:shot-scroll var(--dur,22s) ease-in-out infinite alternate}
@keyframes shot-scroll{0%,8%{transform:translateY(0)}to{transform:translateY(min(0px,calc(-100% + 100cqh)))}}
.shot-browser .ub-view{height:calc(100% - 1.7em)}
.hs .shot img,.hs .is-live .shot img{animation:none!important}
.pcard.wcard .pcard-stage{--s:clamp(9px,1.2vw,17px);display:block;width:30em;height:19em}
.pcard.wcard .shot-browser{position:absolute;left:0;top:0;box-shadow:.8em 1.2em 1.8em rgba(40,25,25,.28)}
.pcard.wcard .shot-phone{position:absolute;right:-5em;bottom:-4.5em;width:9em;height:18.5em;border-width:.38em;border-radius:1.7em;box-shadow:.8em 1.2em 1.8em rgba(40,25,25,.34);--dur:26s}
.pcard.wcard .shot-phone::before{display:none}
.pcard.wcard .pcard-stage{transform:translate(-4em,-1em) rotate(-3deg)}
.pcard.wcard:hover .pcard-stage,.pcard.wcard:focus-within .pcard-stage{transform:translate(-4em,-1.6em) rotate(-1.5deg) scale(1.03)}
.pcard.wcard.precisionflow .pcard-stage{transform:translate(0,0) rotate(-2deg)}
.pcard.wcard.precisionflow:hover .pcard-stage{transform:rotate(-1deg) scale(1.03)}
.pcard.wcard.healthybox .pcard-stage{transform:translate(-3em,-2.5em) rotate(2deg)}
.badge.status{background:var(--ink);color:var(--cream)}
.badge.status::before{content:'';width:7px;height:7px;border-radius:50%;background:#7bd88f}
.badge.status.building::before{background:var(--butter)}.badge.status.internal::before{background:var(--sky)}
.pcard-art .badge.status{left:20px}
.work-grid .pcard.micrometal{grid-column:span 7}.work-grid .pcard.country-victoria-physio{grid-column:span 5}.work-grid .pcard.healthybox{grid-column:span 5}.work-grid .pcard.precisionflow{grid-column:span 7}
.work-grid .pcard.wcard .pcard-art{min-height:clamp(340px,38vw,520px)}
.sheet .projects .pcard.micrometal{grid-column:span 7}.sheet .projects .pcard.country-victoria-physio{grid-column:span 5}.sheet .projects .pcard.healthybox{grid-column:span 5}.sheet .projects .pcard.precisionflow{grid-column:span 7}
.concepts-lab{border-top:1px solid var(--line);background:var(--ink-2)}
.concepts-lab .disclose{margin-bottom:30px}
.case-stage{display:flex;gap:2em;align-items:flex-end;justify-content:center}
.case-stage .shot-browser{--s:clamp(10px,1.6vw,23px)}
.case-stage .shot-phone{--s:clamp(10px,1.6vw,23px);margin-left:-5em;margin-bottom:-3em;--dur:28s}
.case-stage .shot-phone,.case-stage .shot-browser{box-shadow:.8em 1.2em 1.8em rgba(40,25,25,.3)}
.showcase{background:var(--hue);padding:clamp(18px,3vw,40px);position:relative}
.showcase-ui{display:flex;justify-content:flex-end;margin-bottom:14px}
.showcase-ui .chip{background:var(--ink);color:var(--cream);border:0;font-weight:700}
.showcase-frame{max-width:1000px;margin-inline:auto;height:clamp(380px,62vh,640px);overflow-y:auto;overscroll-behavior:contain;background:#111;box-shadow:.8em 1.2em 1.8em rgba(40,25,25,.3);border-radius:8px}
.showcase-frame img{width:100%;height:auto;display:block}
/* team photo: real photograph, never distorted. Only the frame, light and parallax move. */
.member{margin:0;position:relative;--px:0;--py:0;width:100%;max-width:420px}
.member-bg{position:absolute;inset:6% -5% -5% 6%;background:var(--coral);transform:translate(calc(var(--px)*10px),calc(var(--py)*8px));transition:transform .5s var(--ease)}
.member-frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink-3);isolation:isolate}
.member-frame img{width:100%;height:100%;object-fit:cover;object-position:center 20%;transform:scale(1.1) translate(calc(var(--px)*-8px),calc(var(--py)*-6px));transition:transform .6s var(--ease),filter .6s;filter:grayscale(.5) contrast(1.02)}
.member:hover .member-frame img,.member:focus-within .member-frame img{filter:none}
.js .member:not(.in) .member-frame{clip-path:inset(100% 0 0 0)}
.js .member .member-frame{clip-path:inset(0);transition:clip-path 1.3s var(--ease)}
.js .member:not(.in) .member-frame img{transform:scale(1.35)}
.member.in .member-frame img{filter:grayscale(.15) contrast(1.02)}
.member.in:hover .member-frame img{filter:none}
.member-glint{position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);transform:translateX(-120%);pointer-events:none}
.member:hover .member-glint{transform:translateX(120%);transition:transform 1.1s var(--ease)}
.member-frame.placeholder{display:grid;place-items:center;align-content:center;gap:10px;background:repeating-linear-gradient(135deg,var(--ink-3) 0 14px,#34302c 14px 15px);border:1.5px dashed rgba(247,243,222,.4)}
.member-frame .mono{font:clamp(120px,18vw,220px)/1 var(--serif);color:var(--coral);letter-spacing:-.06em}
.member-frame small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.member figcaption{position:relative;margin-top:18px;font-size:13px;color:var(--muted);display:flex;gap:10px;align-items:baseline}
.member figcaption b{font:25px var(--serif);color:var(--cream);letter-spacing:-.04em;font-weight:400}
.team-copy h3 small{display:block;font:400 clamp(15px,1.4vw,20px) var(--sans);letter-spacing:0;color:var(--muted);margin-top:10px}
.team-facts{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:18px;border-top:1px solid var(--line);padding-top:22px}
.team-facts small{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.team-facts b{font-weight:500;font-size:15px}
.slot.filled{gap:6px;justify-content:flex-start}.slot.filled span::before{content:none}.slot.filled span{display:block;font-size:14px;letter-spacing:0;text-transform:none;color:var(--cream);border-bottom:1px solid var(--line);padding:8px 0}
@media(max-width:1000px){.work-grid .pcard.wcard,.sheet .projects .pcard.wcard{grid-column:auto!important}}
@media(max-width:600px){.pcard.wcard .pcard-stage{--s:clamp(8px,2.6vw,12px)}.pcard.wcard .shot-phone{right:-3em}.team-facts{grid-template-columns:1fr}.showcase-frame{height:420px}}
@media(prefers-reduced-motion:reduce){.is-live .shot img{animation:none}.member-frame,.member-frame img,.member-bg,.member-glint{transition:none!important}.js .member:not(.in) .member-frame{clip-path:none}.js .member:not(.in) .member-frame img{transform:none}}

/* ===== PrecisionFlow-style screenshot gallery (discrete app screens, not one scrolling page) ===== */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.gshot{margin:0;border:1px solid var(--line);background:var(--ink-2);overflow:hidden;transition:transform .5s var(--ease),border-color .3s}
.gshot:hover{transform:translateY(-4px);border-color:var(--coral)}
.gshot-img{aspect-ratio:1000/485;overflow:hidden;background:#111}
.gshot-img img{width:100%;height:100%;object-fit:cover;object-position:top;transform:scale(1.015);transition:transform .6s var(--ease)}
.gshot:hover .gshot-img img{transform:scale(1.06)}
.gshot figcaption{padding:16px 18px 20px}
.gshot figcaption b{display:block;font-size:15px;margin-bottom:6px}
.gshot figcaption span{display:block;font-size:12.5px;line-height:1.55;color:var(--muted)}
@media(max-width:1000px){.gallery{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.gallery{grid-template-columns:1fr}}

/* ===== before/after comparison (real evidence: an archived old site, or an honest "nothing existed") ===== */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ba-pane{margin:0;border:1px solid var(--line);background:var(--ink-2);overflow:hidden}
.ba-pane img{width:100%;height:280px;object-fit:cover;object-position:top;display:block;filter:grayscale(.15)}
.ba-before img{filter:grayscale(.55) contrast(.92)}
.ba-empty{height:280px;display:grid;place-items:center;background:repeating-linear-gradient(135deg,var(--ink-3) 0 14px,#2b2824 14px 15px);border-bottom:1px solid var(--line)}
.ba-empty span{font:700 13px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ba-pane figcaption{padding:16px 18px 20px}
.ba-pane figcaption b{display:block;font-size:14px;margin-bottom:6px;color:var(--cream)}
.ba-before figcaption b{color:var(--butter)}
.ba-after figcaption b{color:var(--sage)}
.ba-pane figcaption span{display:block;font-size:12.5px;line-height:1.55;color:var(--muted)}
@media(max-width:800px){.ba-grid{grid-template-columns:1fr}.ba-pane img,.ba-empty{height:220px}}

.ba-result{font:400 clamp(26px,3.4vw,42px)/1.3 var(--serif);letter-spacing:-.025em;color:var(--coral);max-width:20em;margin:36px 0 0;padding-top:28px;border-top:1px solid var(--line)}
@media(max-width:600px){.ba-result{font-size:clamp(22px,6vw,28px);margin-top:26px}}

/* ===== gallery lightbox: thumbnails are small by design (grid), click/tap to view full size ===== */
.gshot-img{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gshot-zoom{position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;background:rgba(23,22,21,.75);color:var(--cream);display:grid;place-items:center;font-size:16px;opacity:0;transform:scale(.8);transition:opacity .25s,transform .25s}
.gshot:hover .gshot-zoom,.gshot-img:focus-visible .gshot-zoom{opacity:1;transform:none}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(10,9,8,.94);display:grid;place-items:center;padding:clamp(20px,5vw,60px);cursor:zoom-out}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 30px 80px rgba(0,0,0,.6);cursor:default}
.lightbox-close{position:absolute;top:20px;right:20px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--ink-2);color:var(--cream);font-size:18px;display:grid;place-items:center}
.lightbox-close:hover{background:var(--coral);color:var(--ink);border-color:var(--coral)}
@media(prefers-reduced-motion:reduce){.gshot-zoom{transition:none}}