:root{
  --orange:#FF4A1C;
  --ink:#0D0D0D;
  --bg:#0A0A0B;
  --fg:#FFFFFF;
  --muted:rgba(255,255,255,.58);
  --line:rgba(255,255,255,.16);
  --surface:#161616;
  --cream:#f4f1ec;
  --font-display:'Judson',ui-serif,serif;
  --font-text:'Istok Web',system-ui,sans-serif;
  --radius:10px;
  --page:clamp(24px,4vw,54px);
  --stack-gutter:clamp(12px,2.5vw,40px);
  --stack-hero-overlap:clamp(28px,4vw,64px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-text);background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.skip-link{position:fixed;top:12px;left:12px;z-index:10000;padding:10px 14px;background:var(--ink);color:#fff;transform:translateY(-160%);transition:transform .2s ease}
.skip-link:focus{transform:translateY(0);outline:2px solid var(--orange);outline-offset:2px}

.container{max-width:1440px;margin:0 auto;padding:0 var(--page)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:clamp(36px,5vw,64px)}
.sec-head.--end{align-items:flex-end}
.sec-label{font-family:var(--font-text);font-size:13px;color:var(--muted);letter-spacing:.02em}
.sec-label.--idx{opacity:.6}
.sec-label.--ink{color:rgba(13,13,13,.55)}
.dot-h{display:inline-block;width:.32em;height:.32em;background:var(--orange);margin-left:.1em;border-radius:1px}

/* ============ RECESSED POSITIONING SCENE ============ */
.hero-cover{position:relative;z-index:2;background:transparent;color:var(--ink);padding:0;margin:0 var(--stack-gutter);margin-bottom:calc(-1 * var(--stack-hero-overlap));box-shadow:0 20px 34px rgba(0,0,0,.28)}
.hc-frame{will-change:transform}
.pos-bar{will-change:transform}

/* ============ HERO (1:1 to Figma 1440x900) ============ */
.hc-frame{position:relative;width:100%;aspect-ratio:1440/900;border:2px solid var(--ink);border-radius:18px;overflow:hidden;background:#fff}
.hero-scrub{--hero-bloom-origin:80% 30%;background:#f4f1ec}
.hero-scrub--pixel{background:var(--cream)}
.hero-scrub--pixel .hero-pixel-loader__canvas{opacity:1}
.hero-scrub__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:3;pointer-events:none;clip-path:circle(145% at var(--hero-bloom-origin));transition:opacity .7s cubic-bezier(.16,1,.3,1),clip-path .82s cubic-bezier(.16,1,.3,1)}
.hero-mobile-loop{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:3;pointer-events:none;clip-path:circle(145% at var(--hero-bloom-origin));transition:opacity .7s cubic-bezier(.16,1,.3,1),clip-path .82s cubic-bezier(.16,1,.3,1)}
.hero-pixel-loader__canvas,.hero-pixel-loader__source{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-pixel-loader__canvas{z-index:2;opacity:0;transition:opacity .7s cubic-bezier(.16,1,.3,1)}
.hero-pixel-loader__source{visibility:hidden;object-fit:cover;object-position:center}
.hero-pixel-loader__status{--hero-buffer-progress:0%;position:absolute;left:50%;top:15%;z-index:7;display:grid;justify-items:center;gap:9px;transform:translateX(-50%);font:500 10px/1 'Geist',var(--font-text);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);opacity:0;pointer-events:none;transition:opacity .35s ease}
.hero-pixel-loader__meter{position:relative;display:block;width:104px;height:5px;background:repeating-linear-gradient(90deg,rgba(13,13,13,.18) 0 5px,transparent 5px 7px)}
.hero-pixel-loader__meter-fill{position:absolute;inset:0 auto 0 0;width:var(--hero-buffer-progress);background:repeating-linear-gradient(90deg,var(--orange) 0 5px,transparent 5px 7px);transition:width .28s ease}
.hero-scrub.is-scrub-loading .hero-scrub__video{opacity:0;clip-path:circle(0% at var(--hero-bloom-origin))}
.hero-scrub.is-scrub-loading .hero-mobile-loop{opacity:0;clip-path:circle(0% at var(--hero-bloom-origin))}
.hero-scrub.is-scrub-loading .hero-pixel-loader__canvas{opacity:1}
.hero-scrub.is-scrub-loading .hero-pixel-loader__status{opacity:1}
.hero-scrub.is-scrub-revealing .hero-scrub__video{opacity:1;clip-path:circle(145% at var(--hero-bloom-origin))}
.hero-scrub.is-scrub-revealing .hero-mobile-loop{opacity:1;clip-path:circle(145% at var(--hero-bloom-origin))}
.hero-scrub.is-scrub-revealing .hero-pixel-loader__canvas{opacity:1}
.hero-scrub.is-scrub-revealing .hero-pixel-loader__status{opacity:0}

.hc-logo{position:absolute;left:1.944%;top:1.556%;width:4.514%;height:auto;aspect-ratio:1/1;display:block;z-index:6}
.hc-nav{position:absolute;right:2.222%;top:2%;z-index:6;display:flex;align-items:center;gap:2.778vw;font-family:'Geist',var(--font-text);font-size:0.833vw;letter-spacing:0.083vw;text-transform:uppercase}
.hc-nav a{color:var(--ink);opacity:.9;transition:opacity .3s,color .3s}
.hc-nav a:hover{opacity:1;color:var(--orange)}

.hc-slabb{position:absolute;left:2.222%;top:13.556%;z-index:6;margin:0;font-family:var(--font-display);font-weight:700;font-size:12.5vw;line-height:1;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.hc-slabb .dot{color:var(--orange)}
.hc-studio{position:absolute;left:24.097%;top:33%;z-index:6;font-family:var(--font-display);font-weight:700;font-size:12.5vw;line-height:1;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.hc-tag{position:absolute;left:3.056%;top:72.778%;z-index:6;font-family:var(--font-text);font-weight:400;font-size:2.222vw;line-height:1.2;color:var(--ink);white-space:nowrap}
.hc-hint{position:absolute;left:2.222%;top:93.556%;z-index:6;font-family:var(--font-text);font-weight:400;font-size:0.764vw;letter-spacing:.01em;color:var(--ink)}

/* ============ POSITIONING (marble to pixels) ============ */
.positioning--pixel-scrub{position:relative;z-index:1;overflow:hidden;background:#0d0d0d;color:#fff;padding:0;border-bottom:0}
.pos-pixel-scrub__frame{position:relative;width:100%;height:min(56.25vw,100svh);margin:0 auto;overflow:hidden;background:#0d0d0d;isolation:isolate}
.pos-pixel-scrub__base,.pos-pixel-scrub__canvas{position:absolute;inset:0;width:100%;height:100%}
.pos-pixel-scrub__base{object-fit:cover;object-position:center;transition:opacity .12s linear}
.pos-pixel-scrub__canvas{z-index:1;pointer-events:none}
.pos-services{position:absolute;z-index:2;top:10%;right:4.5%;bottom:9%;width:min(35%,510px);display:flex;flex-direction:column;color:#fff}
.pos-services>h2{margin:0;font-family:var(--font-display);font-size:clamp(46px,5.1vw,76px);font-weight:400;line-height:.92;letter-spacing:-.04em}
.pos-services__carousel{position:relative;flex:1;min-height:0;margin-top:clamp(26px,4vw,54px);perspective:1200px;outline:none}
.pos-services__carousel:focus-visible{outline:1px solid #fff;outline-offset:8px}
.pos-services__deck{position:absolute;inset:0 0 48px;transform-style:preserve-3d}
.pos-service-card{position:absolute;top:50%;left:50%;width:min(92%,468px);min-width:0;aspect-ratio:.94;opacity:0;pointer-events:none;transform-style:preserve-3d;transition:transform .68s cubic-bezier(.16,1,.3,1),opacity .42s ease,filter .5s ease;will-change:transform,opacity}
.pos-service-card.is-active{z-index:3;opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.pos-service-card.is-before{z-index:1;opacity:.28;transform:translate(calc(-50% - clamp(126px,13vw,218px)),-50%) scale(.8) rotateY(28deg);filter:brightness(.72)}
.pos-service-card.is-after{z-index:1;opacity:.28;transform:translate(calc(-50% + clamp(126px,13vw,218px)),-50%) scale(.8) rotateY(-28deg);filter:brightness(.72)}
.pos-service-card__surface{position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(16px,2vw,25px);padding:clamp(28px,3vw,46px);border:1px solid rgba(255,255,255,.35);border-radius:8px;background:#0d0d0d;box-shadow:0 24px 50px rgba(0,0,0,.42);transform:rotateX(var(--service-rx,0deg)) rotateY(var(--service-ry,0deg));transform-style:preserve-3d;transition:transform .16s ease,border-color .2s ease;color:#fff;text-decoration:none;isolation:isolate;overflow:hidden}
.pos-service-card__media{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:.42;mix-blend-mode:screen;pointer-events:none;transition:opacity .35s ease}
.pos-service-card__surface::after{content:'';position:absolute;z-index:0;inset:0;background:linear-gradient(180deg,rgba(13,13,13,.06) 24%,rgba(13,13,13,.86) 100%);pointer-events:none}
.pos-service-card__index{position:absolute;z-index:1;top:clamp(24px,2.6vw,38px);left:clamp(28px,3vw,46px);font-family:var(--font-display);font-size:clamp(24px,2.2vw,36px);line-height:1;color:rgba(255,255,255,.72)}
.pos-service-card:nth-child(1) .pos-service-card__surface{background:var(--orange);color:var(--ink)}
.pos-service-card:nth-child(1) .pos-service-card__media{opacity:.56;mix-blend-mode:screen}
.pos-service-card:nth-child(1) .pos-service-card__surface::after{background:linear-gradient(180deg,rgba(255,74,28,.04) 24%,rgba(13,13,13,.46) 100%)}
.pos-service-card:nth-child(1) .pos-service-card__index{color:var(--ink)}
.pos-service-card.is-active .pos-service-card__surface:hover{border-color:#fff}
.pos-service-card__title,.pos-service-card__copy{position:relative;z-index:1;margin:0;transform:translateZ(38px);color:#fff;transition:transform .3s cubic-bezier(.16,1,.3,1),text-shadow .3s ease}
.pos-service-card:nth-child(1) .pos-service-card__title,.pos-service-card:nth-child(1) .pos-service-card__copy{color:var(--ink)}
.pos-service-card__title{font-family:var(--font-display);font-size:clamp(42px,4.2vw,68px);font-weight:400;line-height:.9;letter-spacing:-.045em}
.pos-service-card__copy{max-width:24ch;font-family:var(--font-text);font-size:clamp(16px,1.35vw,21px);line-height:1.32}
.pos-service-card.is-active .pos-service-card__surface:hover .pos-service-card__title,.pos-service-card.is-active .pos-service-card__surface.is-hovered .pos-service-card__title{transform:translateZ(132px) translateY(-16px) scale(1.04);text-shadow:0 14px 24px rgba(0,0,0,.72)}
.pos-service-card.is-active .pos-service-card__surface:hover .pos-service-card__copy,.pos-service-card.is-active .pos-service-card__surface.is-hovered .pos-service-card__copy{transform:translateZ(94px) translateY(-8px);text-shadow:0 10px 20px rgba(0,0,0,.66)}
.pos-services__controls{position:absolute;z-index:4;bottom:0;left:50%;display:flex;align-items:center;gap:32px;transform:translateX(-50%)}
.pos-services__controls button{width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;background:transparent;color:#fff;cursor:pointer;font-size:30px;line-height:1;transition:opacity .2s ease,transform .2s ease}
.pos-services__controls button:hover,.pos-services__controls button:focus-visible{opacity:.6;transform:scale(1.1);outline:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============ SELECTED WORK ============ */
.work{position:relative;z-index:2;isolation:isolate;background:#fff;color:var(--ink);padding:0 0 clamp(80px,11vw,140px);overflow:visible}
.work__backdrop{position:sticky;top:0;z-index:0;height:100svh;margin-bottom:-100svh;overflow:hidden;background:#fff;pointer-events:none}
.work-pixel-rain{position:absolute;inset:0;width:100%;height:100%;display:block;transform:scaleY(-1);transform-origin:center}
.work .container{position:relative;z-index:1;padding-top:clamp(80px,11vw,140px)}
.work .sec-label{color:rgba(13,13,13,.5)}
.work-title{position:relative;display:inline-block;font-family:var(--font-display);font-weight:400;font-size:clamp(30px,5vw,72px);text-transform:lowercase}
/* option D backdrop: a soft, tilted orange block behind the title.
   JS (work-title-bg.js) drifts + rotates it with scroll position. */
/* opaque equivalent of rgba(255,74,28,.16) over white, same soft-orange look
   but the pixel-rain behind can't show through it */
.wt-bg{position:absolute;z-index:0;inset:-2px -18px;background:#ffe2db;border-radius:10px;
  transform:rotate(-1.6deg);transform-origin:center;will-change:transform}
.wt-txt{position:relative;z-index:1}
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,34px)}
.wthumb{position:relative;aspect-ratio:4/3;border:1px solid var(--line);border-radius:4px;background:var(--surface);overflow:hidden;display:flex;align-items:flex-end;padding:22px;transition:border-color .4s}
.wcard{cursor:pointer}
.wcard:hover .wthumb{border-color:rgba(13,13,13,.28)}
.wthumb__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .55s ease,transform .55s ease}
.wvid{position:absolute;top:50%;left:50%;width:66%;height:60%;object-fit:cover;border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.45);opacity:0;transform:translate(-50%,-50%) scale(.9);transition:opacity .45s ease,transform .6s cubic-bezier(.16,.84,.28,1);z-index:2;pointer-events:none}
.wcard:hover .wthumb__img{filter:blur(11px) brightness(.82);transform:scale(1.08)}
.wcard:hover .wvid{opacity:1;transform:translate(-50%,-50%) scale(1)}
.wcard:hover .wn{filter:blur(6px);opacity:.4}
.wn{position:relative;z-index:1;font-family:var(--font-display);font-size:clamp(48px,6vw,88px);color:rgba(255,255,255,.09);line-height:.8;transition:filter .45s ease,opacity .45s ease}
.wmeta{display:flex;justify-content:space-between;align-items:flex-start;margin-top:16px}
.wmeta h4{font-family:var(--font-text);font-weight:700;font-size:19px;text-transform:lowercase}
.wcl{color:rgba(13,13,13,.55);font-size:14px;margin-top:3px}
.wtags{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(13,13,13,.5)}
.wtags.soon{color:var(--orange)}
/* still-only card (video pending): gentle zoom, no blur-to-nothing */
.wcard--still:hover .wthumb__img{filter:none;transform:scale(1.04)}
/* a real project that has no live URL yet: keeps the full hover reveal and the
   reel, but must not look clickable, because it goes nowhere */
.wcard--nolink{cursor:default}
/* coming-soon placeholder: static, muted, no hover reveal */
.wcard--soon{cursor:default}
.wcard--soon .wmeta h4{color:rgba(13,13,13,.42)}
.wcard--soon:hover .wthumb{border-color:var(--line)}
.wcard--soon:hover .wn{filter:none;opacity:1}

/* ============ STUDIO ============ */
/* studio scroll-entrance (logo -> widen -> fill -> fade). degrades to normal
   flow when JS is off / reduced-motion / small screens (no .anim-on class). */
.studio-scroller{position:relative;z-index:2;isolation:isolate;background:var(--cream)}
.studio-scroller.anim-on{height:200vh}
/* pin backdrop stays white so, before the logo expands, it reads as a
   continuation of the white work section above (not a separate cream band).
   the cream only arrives with the studio itself, which fills the full pin
   height so it reveals edge-to-edge once the orange curtain lifts. */
.studio-scroller.anim-on .studio-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:#fff;display:flex;align-items:center}
.studio-scroller.anim-on .studio-pin>.studio{opacity:0;width:100%;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vw,90px) 0;border-bottom:0}
/* container uses margin:0 auto; as a flex child that auto-margin shrinks it to
   content width, so force full width to keep the duo grid + room at full size. */
.studio-scroller.anim-on .studio-pin>.studio>.container{width:100%}
.studio-scroller.anim-on .studio-entrance{display:block}
.studio-entrance{display:none;position:absolute;inset:0;z-index:5;pointer-events:none}
.se-orange{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:170px;height:44px;background:var(--orange);border-radius:8px;z-index:6;will-change:width,height,opacity}
.se-bar{position:absolute;background:var(--ink);border-radius:8px;z-index:7;will-change:left,top,opacity}
/* studio runs on the same bone-cream as the 3D scene so the room reads as
   part of the whole section, not a card dropped into a dark box. */
.studio{background:var(--cream);color:var(--ink);padding:clamp(80px,11vw,140px) 0}
.studio .sec-label{color:rgba(13,13,13,.5)}
.studio .dot-h{background:var(--orange)}
.duo{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,80px);align-items:center}

/* ---- who-we-are bio panels (1:1 from Figma; swap on lead click) ---- */
.duo__info{position:relative;min-height:840px}
.dpanel{position:absolute;top:0;left:0;width:100%;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility .45s ease}
.dpanel.is-active{opacity:1;visibility:visible;pointer-events:auto}
.dhead{font-family:var(--font-display);font-weight:400;font-size:48px;line-height:1;color:var(--ink);margin-bottom:36px}
.ddot{color:var(--orange)}
.dcollage{position:relative;margin-bottom:34px}
.dbar{position:absolute;overflow:hidden;border-radius:39.6px}
.dbar img{position:absolute;max-width:none;display:block}
.dbar--orange{background:rgba(255,74,28,.5)}
.dportrait{position:absolute;overflow:hidden;border-radius:10px;z-index:2}
.dportrait img{width:100%;height:100%;object-fit:cover;display:block}
/* pixel-portrait media replaces the photo collage (main portrait + 3 bars) */
.dcollage--pixel{width:auto;height:auto;aspect-ratio:0.75;max-width:370px;margin-bottom:30px}
.pixel-portrait{display:block;width:100%;height:100%}
/* interactive slabb pixel-mark replaces the duo photo collage in "who we are" */
.hcollage.hcollage--mark{display:block;grid-template-columns:none;height:auto;max-width:400px;aspect-ratio:1/1;margin-bottom:22px}
.hcollage--mark .slabb-mark{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none}
.dlede{font-family:var(--font-text);font-size:26px;line-height:1.3;color:var(--ink);max-width:390px;margin-bottom:20px}
.dsub{font-family:var(--font-text);font-weight:700;font-size:26px;line-height:1.2;color:var(--ink);margin-bottom:14px}
.dsoft{font-family:var(--font-text);font-size:18px;line-height:1.45;color:var(--ink);max-width:400px}
.dsoft+.dsoft{margin-top:16px}

/* ---- upgraded "who we are" home composition (reference-matched) ---- */
.studio{position:relative;overflow:hidden}
.studio .container{position:relative;z-index:1}
/* giant DUO-LED bleed across the back */
.studio-wm{position:absolute;top:clamp(-24px,-1.6vw,-8px);left:50%;transform:translateX(-50%);
  font-family:var(--font-display);font-weight:700;font-size:clamp(120px,17.5vw,252px);line-height:.85;
  letter-spacing:.01em;color:rgba(13,13,13,.055);white-space:nowrap;z-index:0;pointer-events:none;user-select:none}
/* section index bottom-left */

.dpanel--home .dhead{font-size:clamp(44px,4.7vw,64px);font-weight:700;letter-spacing:-.01em;margin-bottom:26px}
.dhead__hl{color:var(--orange)}
.hcollage{display:grid;grid-template-columns:250px 1fr;gap:14px;height:340px;max-width:474px;margin-bottom:16px}
.hc-portrait{position:relative;border-radius:14px;overflow:hidden;height:100%;margin:0}
.hc-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.hc-portrait::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(255,74,28,.5),rgba(255,74,28,0) 42%);pointer-events:none}
.hc-stack{display:grid;grid-template-rows:1fr 1fr 1fr;gap:10px;height:100%;min-height:0}
.hc-stack .hc-tile{min-height:0}
.hc-tile{position:relative;border-radius:14px;overflow:hidden;margin:0}
.hc-tile img{width:100%;height:100%;object-fit:cover;display:block}
.hc-tile--dark img{filter:brightness(.55) contrast(1.08)}
.hc-tile--orange::after{content:'';position:absolute;inset:0;background:rgba(255,74,28,.4);mix-blend-mode:multiply;pointer-events:none}
.hc-tile--bw img{filter:grayscale(1) contrast(1.02)}
.hc-caption{display:flex;align-items:center;gap:12px;margin:2px 0 26px;max-width:474px}
.hc-caption__line{height:1px;flex:1;background:var(--orange);opacity:.55}
.hc-caption__txt{font-family:var(--font-text);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(13,13,13,.55);white-space:nowrap}
.hc-caption__arrow{color:var(--orange);font-size:14px}
.hlede{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,3.1vw,44px);line-height:1.02;color:var(--ink);margin-bottom:16px;max-width:360px}
.hbody{font-family:var(--font-text);font-size:18px;line-height:1.4;color:var(--ink);max-width:34ch;margin-bottom:16px}
.hbody em{font-family:var(--font-display);font-style:italic;font-weight:700;color:var(--orange)}
.hsoft{font-family:var(--font-text);font-size:13px;line-height:1.55;color:rgba(13,13,13,.55);max-width:42ch}

/* room annotations (default view only) */
.room-annot{position:absolute;inset:0;z-index:9;pointer-events:none;font-family:var(--font-text);text-transform:uppercase;transition:opacity .4s ease}
.room-annot.is-hidden{opacity:0}
.ra-tag{position:absolute;font-size:11px;letter-spacing:.16em;color:var(--ink)}
.ra-tag::after{content:'';position:absolute;left:50%;top:calc(100% + 3px);width:1px;height:38px;background:var(--ink);opacity:.35}
.ra-tag--build{left:26%;top:16%}
.ra-tag--design{left:40%;top:12%}
.ra-explore{position:absolute;right:5%;bottom:13%;font-size:11px;letter-spacing:.18em;color:var(--orange)}
.ra-explore::before{content:'';position:absolute;right:8px;bottom:calc(100% + 3px);width:1px;height:40px;background:var(--orange);opacity:.55}
.duo__stage{position:relative;aspect-ratio:843/743;display:flex;align-items:center;justify-content:center}
.duo__stamp{position:absolute;top:24px;left:24px;font-family:var(--font-text);font-size:14px;color:rgba(13,13,13,.5)}
.duo__ph{color:rgba(13,13,13,.4);font-size:14px;text-align:center;max-width:60%}

/* ---- 3D duo office room (ported from kiara redesign hero-scene.js) ---- */
/* no card: the scene's bone-cream backdrop merges with the section bg so the
   room floats as part of the whole section. */
.duo__stage.hero__stage{background:var(--cream);overflow:hidden;isolation:isolate;padding:0;border:0;border-radius:0;
  /* dialled-in frame size (777x685); max-width keeps it responsive on narrow screens */
  width:777px;max-width:100%;aspect-ratio:777/685;justify-self:end}
.duo__stage .duo__stamp{z-index:8;color:rgba(13,13,13,.5)}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2}
/* no overlay: the scene backdrop is the exact section cream (#efece2), so the
   canvas margin around the diorama blends into the section and the room floats
   free rather than sitting inside a textured rectangle. */
/* loader while GLBs stream in */
.hero__loader{position:absolute;inset:0;display:grid;place-content:center;gap:14px;background:var(--cream);z-index:5;
  font-family:var(--font-text);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(10,10,10,.6);text-align:center;
  transition:opacity .48s ease,visibility .48s ease}
.hero__loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.hero__loader-label{letter-spacing:.3em}
.hero__loader-bar{width:220px;height:2px;background:rgba(10,10,10,.14);position:relative;overflow:hidden;margin:0 auto}
.hero__loader-bar>div{position:absolute;top:0;bottom:0;left:0;width:0;background:var(--orange);transition:width .2s ease}
.hero__loader-pct{color:var(--orange)}
/* floating tip over a clicked character */
.hero__tip{position:absolute;top:0;left:0;display:flex;flex-direction:column;gap:2px;padding:10px 14px;
  background:var(--ink);color:#efece2;border:1px solid rgba(255,74,28,.28);border-radius:6px;font-family:var(--font-text);
  text-transform:uppercase;white-space:nowrap;pointer-events:none;z-index:6;opacity:0;transition:opacity .2s ease;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.4);transform:translate(-50%,calc(-100% - 90px))}
.hero__tip[hidden]{display:flex !important}
.hero__tip.is-visible{opacity:1}
.hero__tip::after{content:'';position:absolute;bottom:-5px;left:50%;margin-left:-5px;width:10px;height:10px;
  background:var(--ink);border-right:1px solid rgba(255,74,28,.28);border-bottom:1px solid rgba(255,74,28,.28);transform:rotate(45deg)}
.hero__tip-num{font-size:9px;letter-spacing:.22em;color:var(--orange)}
.hero__tip-name{font-family:var(--font-display);font-size:20px;letter-spacing:-.01em;line-height:1}
.hero__tip-role{font-size:9.5px;letter-spacing:.16em;opacity:.7}
/* idle hint pill */
.hero__hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);padding:8px 14px;font-family:var(--font-text);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.8);background:rgba(10,10,10,.55);
  border-radius:999px;z-index:7;pointer-events:none;animation:hint-pulse 2.4s ease-in-out infinite}
.hero__hint.is-hidden{opacity:0;transition:opacity .3s ease}
@keyframes hint-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero__hint{animation:none}.hero-scrub__video,.hero-pixel-loader__canvas,.hero-pixel-loader__status{transition:none!important}.hero-scrub__video{clip-path:none!important}}
@media (prefers-reduced-motion:reduce){.hero-mobile-loop{display:none!important}.hero-scrub{background:#f4f1ec url('assets/hero-scrub-poster.webp') 68% center/cover no-repeat}}

/* ============ FAQ (cream, flows into the CTA) ============ */
.faq{position:relative;background:var(--cream);color:var(--ink);padding:clamp(80px,11vw,140px) 0}
.faq .container{position:relative;z-index:1}
.faq-title{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,5vw,72px);text-transform:lowercase}
.faq-kicker{font-family:'Geist',var(--font-text);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(13,13,13,.45)}
.faq-list{list-style:none}
.faq-item{border-top:1px solid rgba(13,13,13,.14)}
.faq-item:last-child{border-bottom:1px solid rgba(13,13,13,.14)}
.faq-q{width:100%;background:none;border:0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:clamp(20px,2.5vw,32px) 0;text-align:left;font-family:var(--font-display);font-weight:400;
  font-size:clamp(19px,2.4vw,30px);line-height:1.2;color:var(--ink);text-transform:lowercase;
  transition:color .3s ease;-webkit-tap-highlight-color:transparent}
.faq-item.is-open .faq-q,.faq-q:hover{color:var(--orange)}
/* +/- toggle drawn from two orange bars (matches the site's orange accents) */
.faq-ico{position:relative;flex-shrink:0;width:18px;height:18px;display:block}
.faq-ico::before,.faq-ico::after{content:'';position:absolute;background:var(--orange);border-radius:2px;
  transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .4s ease}
.faq-ico::before{left:0;top:8px;width:18px;height:2px}
.faq-ico::after{left:8px;top:0;width:2px;height:18px}
.faq-item.is-open .faq-ico::after{transform:scaleY(0)}
.faq-a{overflow:hidden;height:0}
.faq-a p{font-family:var(--font-text);font-size:clamp(15px,1.15vw,17px);line-height:1.6;
  color:rgba(13,13,13,.68);max-width:64ch;padding:0 40px clamp(22px,2.5vw,32px) 0}
/* JS animates height; the transition lives here so it can be killed for reduced-motion */
.faq-a{transition:height .42s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){.faq-a{transition:none}.faq-ico::before,.faq-ico::after{transition:none}}
@media (max-width:640px){
  .faq-kicker{display:none}
  .faq-a p{padding-right:0;max-width:none}
}

/* ---- standalone sub-page chrome (faq.html) ---- */
.page{background:var(--cream)}
.page-head{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:18px var(--page);background:rgba(244,241,236,.86);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid rgba(13,13,13,.10)}
.page-logo{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;
  font-size:24px;line-height:1;color:var(--ink);text-transform:lowercase;letter-spacing:-.01em}
.page-logo svg{width:30px;height:auto;display:block}
.page-logo .dot{color:var(--orange);font-style:normal}
.page-nav{display:flex;gap:26px;font-family:'Geist',var(--font-text);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.page-nav a{color:var(--ink);opacity:.8;transition:color .3s,opacity .3s}
.page-nav a:hover{opacity:1;color:var(--orange)}
.faq-tail{margin-top:clamp(36px,5vw,56px);font-family:var(--font-text);font-size:clamp(15px,1.4vw,18px);color:rgba(13,13,13,.6)}
.faq-tail a{color:var(--orange);border-bottom:1px solid rgba(255,74,28,.35);transition:border-color .3s}
.faq-tail a:hover{border-color:var(--orange)}

/* ============ CONTACT / CTA ============ */
.contact{position:relative;z-index:2;background:linear-gradient(to bottom,var(--cream) 0 80px,var(--orange) 80px);color:var(--cream);padding:clamp(100px,15vw,190px) 0 clamp(150px,20vw,240px)}
/* bottom:0, not a negative offset. The field's solid mass sits in its own
   bottom 22%, so any overhang past .contact lands as a dense grid of squares
   on the dark footer. Ending the canvas at the section edge keeps the whole
   dissolve on the orange, where it reads as texture rather than debris. */
.seam-field-top{position:absolute;right:0;bottom:0;left:0;width:100%;height:540px;display:block;pointer-events:none;z-index:0}
.contact__grid{position:relative;z-index:1}
.contact__grid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:40px}
.contact-h{font-family:var(--font-display);font-weight:400;font-size:clamp(44px,8vw,124px);line-height:.94;text-transform:lowercase;color:var(--cream)}
.contact-h__accent{color:var(--ink)}
.contact-btn{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#fff;font-family:var(--font-text);font-weight:700;font-size:17px;padding:22px 36px;border-radius:2px;transition:gap .3s,filter .3s;letter-spacing:.01em}
.contact-btn:hover{gap:18px;filter:brightness(1.28)}

/* Hidden at every width. This canvas is flipped, so its solid band lands on the
   orange above the seam where it is invisible, and everything that actually
   renders (the dissolve tail plus rain:0.38) falls inside the footer. It has no
   effect other than speckling the footer, which is the thing being removed. The
   phone already hid it; desktop now agrees. */
.cta-seam{position:relative;z-index:1;height:0;pointer-events:none;display:none}
.seam-field{position:absolute;left:0;right:0;top:-80px;height:380px;width:100%;transform:scaleY(-1);display:block}

/* ============ FOOTER ============ */
.footer{position:relative;background:var(--bg);padding:clamp(50px,7vw,80px) 0 40px;overflow:hidden}
.footer .container{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;row-gap:20px;align-items:end}
.footer__wordmark{grid-column:1;grid-row:1/3;font-family:var(--font-text);font-weight:700;font-size:clamp(90px,17vw,230px);line-height:.8;text-transform:lowercase;letter-spacing:-.04em;display:inline-flex;align-items:flex-end;color:#fff}
.footer__wordmark .dot{width:.14em;height:.14em;background:var(--orange);margin-left:.03em;margin-bottom:.07em}
.footer__tag{display:none}
.footer__cols{grid-column:2;grid-row:1/3;display:flex;justify-content:flex-end;gap:clamp(30px,5vw,70px);align-self:start}
.footer__social{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer__social a{color:var(--muted);font-size:14px;transition:color .3s}
.footer__social a:hover{color:var(--orange)}
.footer__copy{display:flex;flex-direction:column;gap:6px;color:rgba(255,255,255,.55);font-size:13px;padding-left:clamp(30px,5vw,70px);border-left:1px solid var(--line)}

/* ---- studio touch switcher (injected by studio-mobile.js on touch/≤1100) ---- */
.duo-switch{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.duo-switch__btn{font-family:var(--font-text);font-size:14px;text-transform:lowercase;letter-spacing:.01em;
  color:var(--ink);background:transparent;border:1px solid rgba(13,13,13,.25);border-radius:999px;
  padding:11px 18px;min-height:44px;cursor:pointer;transition:background .25s,color .25s,border-color .25s;
  -webkit-tap-highlight-color:transparent}
.duo-switch__btn.is-active{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* ============ RESPONSIVE ============ */

/* ---- TOUCH / narrow: mirror the work-card hover reveal via .is-inview,
   driven by work-hover.js's IntersectionObserver, and drop hover-only UI.
   Width is included alongside hover:none because desktop preview engines report
   hover:hover even at a phone viewport, and these overlays don't fit narrow
   screens regardless. ---- */
@media (hover:none), (max-width:900px){
  .wcard{cursor:default}
  .wcard.is-inview .wthumb{border-color:rgba(13,13,13,.28)}
  .wcard.is-inview .wthumb__img{filter:blur(11px) brightness(.82);transform:scale(1.08)}
  .wcard.is-inview .wvid{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .wcard.is-inview .wn{filter:blur(6px);opacity:.4}
  .contact-btn{gap:14px}
  /* 3D scene: hover tips + room labels + "click a lead" hint don't fit / don't
     apply on touch; the tap switcher is the affordance instead */
  .hero__hint,.hero__tip,.room-annot{display:none}
}

/* ---- TABLET + small desktop windows ---- */
@media (max-width:900px){
  .pos-frescoes{opacity:.5}

  /* Let the quiet studio watermark sit behind, and visibly intersect, the room. */
  .studio-wm{top:clamp(100px,17vw,144px)}

  /* hero copy is sized in vw for the 1440 comp; below this the nav/tag/hint
     collapse to a few px, so pin them to legible, tappable sizes and re-show
     the contact link (it was hidden entirely on mobile before). */
  .hc-nav{display:flex;font-size:15px;letter-spacing:.03em;gap:20px;right:4%;top:3.4%}
  .hc-nav a{padding:6px 2px}
  .hc-tag{font-size:clamp(14px,2.2vw,20px)}
  .hc-hint{font-size:11px;letter-spacing:.02em;top:auto;bottom:4%}

  /* studio: stack until the two-column room and bio can both stay readable */
  .duo{display:flex;flex-direction:column;gap:clamp(22px,4vw,36px)}
  .duo__stage.hero__stage{order:1;width:100%;max-width:560px;margin:0 auto;justify-self:center;align-self:center}
  .duo-switch{order:2}
  .duo__info{order:3;min-height:0;position:relative}
  /* panels stack absolutely; only the active one takes flow height on mobile */
  .dpanel.is-active{position:relative}
  .studio-wm{font-size:clamp(90px,15vw,150px)}
}

/* ---- PHONE ---- */
@media (max-width:640px){
  .wcard--desktop-only{display:none}
  .hero-scrub{background:var(--cream)}
  .hero-scrub__video,.hero-mobile-loop,.hero-pixel-loader__status{display:none!important}
  .hero-pixel-loader__canvas{opacity:1}
  .contact{background:var(--orange)}
  .seam-field-top,.cta-seam{display:none}
  .work-grid{grid-template-columns:1fr}
  /* bigger "selected work" title + its backdrop on phones */
  .work-title{font-size:clamp(42px,12vw,52px)}
  .wt-bg{inset:-4px -20px}

  /* ---- SECTION 2: touch scroll controls the same marble-to-pixel change ---- */
  .positioning--pixel-scrub{padding:0}
  .positioning--pixel-scrub{z-index:3;margin-top:0}
  .pos-pixel-scrub__frame{width:100%;aspect-ratio:auto;min-height:0;height:100svh}
  .pos-pixel-scrub__base{object-position:left center}
  .pos-services{top:auto;right:20px;bottom:120px;left:20px;width:auto;height:min(58%,480px)}
  .pos-services>h2{font-size:clamp(44px,13vw,56px);line-height:.88}
  .pos-services__carousel{margin-top:18px;perspective:none}
  .pos-services__deck{bottom:56px}
  .pos-service-card{width:min(100%,345px);aspect-ratio:1.14;min-width:0}
  .pos-service-card.is-before{display:block;z-index:1;opacity:.36;transform:translate(calc(-50% - 70%),-50%) scale(.83) rotateY(24deg);filter:brightness(.82)}
  .pos-service-card.is-after{display:block;z-index:1;opacity:.36;transform:translate(calc(-50% + 70%),-50%) scale(.83) rotateY(-24deg);filter:brightness(.82)}
  .pos-service-card__surface{gap:14px;padding:22px;border-radius:7px;box-shadow:0 18px 40px rgba(0,0,0,.48)}
  .pos-service-card__index{top:22px;left:22px;font-size:28px}
  .pos-service-card__title{font-size:clamp(34px,10vw,44px)}
  .pos-service-card__copy{font-size:15px;line-height:1.32}
  .pos-services__controls{right:0;bottom:0;left:auto;gap:14px;transform:none}
  .pos-services__controls button{width:44px;height:44px;font-size:28px}
  .contact__grid{flex-direction:column;align-items:flex-start}
  .footer .container{grid-template-columns:1fr}
  .footer__cols{grid-column:1;grid-row:auto;justify-content:flex-start;gap:40px;margin-top:20px}
  .footer__copy{padding-left:0;border-left:0}
  /* comfortable tap targets for the text links */
  .footer__social{gap:4px}
  .footer__social a{display:inline-block;padding:11px 0;min-height:44px}
  .hc-nav a{padding:8px 4px}
  .contact-btn{padding:20px 30px}

  /* ---- HERO: fill the phone screen; the figure plays naturally on touch ---- */
  .hero-cover{position:sticky;top:0;z-index:1;padding:0;margin:0;box-shadow:none}
  .hc-frame{aspect-ratio:auto;height:100svh;min-height:0;border-radius:0;border:0}
  .hero-cover.hero-in .hc-frame{clip-path:inset(0)!important}
  .hero-scrub__video{display:none}
  .hero-mobile-loop{display:block;object-position:right center}
  /* center-left wordmark block, matched 1:1 to Kiara's Figma hero (390x760):
     slabb y280 100px/82lh · studio y380 82px · tagline y513 19px, tight leading */
  .hc-slabb{top:36.8%;left:4.1%;font-size:clamp(74px,25.6vw,104px);line-height:.82}
  .hc-studio{top:50%;left:17.4%;font-size:clamp(60px,21vw,86px);line-height:.82}
  .hc-tag{top:67.5%;bottom:auto;left:17.4%;right:6%;white-space:normal;font-size:clamp(15px,4.9vw,20px);line-height:1.3;max-width:210px}
  .hc-hint{display:none}
  .hc-nav{top:3.4%;right:6%;font-size:15px}
  .hc-logo{width:34px;left:6%;top:3.4%}

  /* ---- STUDIO entrance on phone: scroll-linked, but never pinned. ---- */
  .studio-scroller.anim-on{height:200dvh}
  .studio-scroller.anim-on .studio-pin{height:100dvh}
  .studio-scroller.anim-on .studio-pin>.studio{min-height:100dvh;padding:22px 0}
  .studio-scroller.mobile-scrub{position:relative;overflow:hidden;background:var(--cream)}
  .studio-scroller.mobile-scrub .studio-entrance{display:block;top:0;bottom:auto;height:100svh;overflow:hidden}

  /* ---- STUDIO / "who we are", figma layout on phone ----
     One grid on .duo__info owns the whole comp: heading (row1), the interactive
     3D room (row2, PERSISTENT, studio-mobile.js hoists the stage in here), then
     the photo beside the sub-heading (row3) and the copy. Each .dpanel goes
     display:contents so its heading / photo / copy flow into the same rows;
     only the active panel shows, so tapping a figure swaps everything EXCEPT the
     room. salvatore + kiara reuse the exact same layout as the duo-led default. */
  /* Reserve a clear header band for DUO-LED before the room begins. */
  .studio{padding:clamp(142px,38vw,178px) 0 40px}
  .studio-wm{top:clamp(22px,7vw,36px);font-size:clamp(90px,23vw,112px);color:rgba(13,13,13,.09)}

  .duo__info{
    display:grid;
    grid-template-columns:minmax(168px,52%) 1fr;
    column-gap:16px;row-gap:14px;align-items:start;min-height:0;
  }
  /* panels dissolve into the grid; only the active one contributes rows */
  .duo__info .dpanel{position:static;display:contents}
  .duo__info .dpanel:not(.is-active){display:none}

  /* NAME, top of the right column, beside the portrait's head */
  .duo__info .dhead{grid-column:2;grid-row:3;align-self:start;font-size:clamp(24px,6.4vw,32px);
    font-weight:700;margin:0;line-height:1.02}

  /* row 1, persistent 3D office, full width and enlarged */
  .duo__info > .duo__stage.hero__stage{grid-column:1/-1;grid-row:1;width:100%;
    max-width:none;aspect-ratio:4/3;justify-self:stretch;align-self:stretch;margin:2px 0 6px}

  /* row 2, "click a duo" affordance under the room (persistent; injected by
     studio-mobile.js). The room is tappable, so it needs a label on touch. */
  .duo__info .duo-hint{grid-column:1/-1;grid-row:2;justify-self:center;
    display:inline-flex;align-items:center;gap:9px;margin:0 auto 4px;
    font-family:var(--font-text);font-size:12px;letter-spacing:.14em;
    text-transform:uppercase;color:rgba(13,13,13,.6)}
  .duo__info .duo-hint__dot{width:7px;height:7px;border-radius:50%;
    background:var(--orange);animation:duoHintPulse 1.8s ease-in-out infinite}
  @keyframes duoHintPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

  /* touch switcher controls the same camera and bio state as the desktop room. */
  .duo__info .duo-switch{grid-column:1/-1;grid-row:2;justify-self:center;margin:0 0 4px}
  .duo__info .duo-switch__btn{min-height:44px;padding:10px 14px;font-size:13px}

  /* row 3, enlarged pixel art (col1) with NAME (top) + LEDE (bottom) in col2 */
  .duo__info .hcollage{grid-column:1;grid-row:3 / span 3;display:block;height:auto;max-width:none;margin:0}
  .duo__info .hc-stack{display:none}
  .duo__info .hc-portrait{height:auto;aspect-ratio:4/5}
  .duo__info .hlede{grid-column:2;grid-row:4;align-self:start;
    font-size:clamp(20px,5.4vw,26px);line-height:1.1;margin:0;max-width:none}

  /* salvatore / kiara: collapse the abstract-bar collage down to just the
     portrait so it sits in the same photo cell as the duo shot */
  .duo__info .dcollage{grid-column:1;grid-row:3 / span 3;position:relative;
    width:auto!important;height:auto!important;aspect-ratio:4/5;margin:0}
  .duo__info .dcollage .dbar{display:none}
  .duo__info .dcollage .dportrait{position:relative!important;left:0!important;top:0!important;
    width:100%!important;height:100%!important}
  .duo__info .dsub{grid-column:2;grid-row:4;align-self:start;
    font-size:clamp(21px,5.6vw,27px);line-height:1.15;margin:0}

  /* caption (row 4, under the art) then the two paragraphs */
  .duo__info .hc-caption{display:none}
  .duo__info .hbody{grid-column:2;grid-row:5;font-size:14px;line-height:1.35;margin:2px 0 0;max-width:none}
  .duo__info .hsoft{display:none}

  /* salvatore / kiara paragraphs (no caption row) */
  .duo__info .dsoft{grid-column:2;grid-row:5;font-size:14px;line-height:1.35;margin:2px 0 0;max-width:none}
  .duo__info .dsoft ~ .dsoft{grid-row:6;margin:0}
}

/* Desktop keeps the prior production hero and the desktop work-grid line-up.
   The service-card media and the pinned selected-work pixel rain are no longer
   held back here: desktop now runs the same treatment as the phone, which is
   the reference implementation for both. */
@media (min-width:641px){
  .hero-scrub__video{opacity:1!important;clip-path:circle(145% at var(--hero-bloom-origin))!important}
  .hero-scrub.is-scrub-revealing .hero-pixel-loader__canvas,.hero-scrub.is-scrub-revealing .hero-pixel-loader__status{opacity:0!important}
  /* .work keeps overflow-x:clip so the tilted title backdrop cannot widen the
     page. `clip` is not a scroll container, so .work__backdrop still sticks to
     the viewport. Do not swap it for overflow:hidden. */
  .work{overflow-x:clip}
  /* Selected Work runs six cards on desktop: three live projects then three
     placeholders, which fills the two-column grid to three whole rows. Mr
     Wellington is no longer swapped out for a placeholder here, so there is no
     nth-child hide rule any more. */
  .wcard--desktop-only{display:block}

  /* .studio-scroller deliberately does NOT override the shared baseline here.
     It used to carry z-index:auto;isolation:auto;background:transparent, left
     over from the retired pixelflow stack-lift. With .work at z-index:2, that
     let .work__backdrop paint on top of the studio: the backdrop is
     height:100svh with margin-bottom:-100svh, and that negative margin lets a
     sticky element slide past the end of its containing block, so it overhung
     the next section by 100svh minus .work's bottom padding, about 600px. It
     covered the whole slabb-mark entrance in white, which read as a dead gap
     under the work grid. Inheriting the baseline (z-index:2, isolate, cream)
     puts the studio back on top, exactly as the phone already had it. */

  /* Service carousel: the deck is a preserve-3d scene, so cards are sorted by
     3D depth, not by z-index. A flanking card rotated 28deg swings its near
     edge about 90px toward the viewer, in front of the active card's plane, so
     it painted OVER the active card and read as the active card being
     see-through. Pushing the flanks behind that plane fixes the occlusion;
     scale is raised from .8 to .92 to cancel the perspective shrink so they
     keep their apparent size. */
  .pos-service-card.is-before{transform:translate(calc(-50% - clamp(126px,13vw,218px)),-50%) translateZ(-160px) scale(.92) rotateY(28deg)}
  .pos-service-card.is-after{transform:translate(calc(-50% + clamp(126px,13vw,218px)),-50%) translateZ(-160px) scale(.92) rotateY(-28deg)}
}

/* ============ PRELOADER (slab-logo assemble) ============ */
.preloader{position:fixed;inset:0;z-index:9999;background:#fff;display:flex;align-items:center;justify-content:center;
  transition:transform .85s cubic-bezier(.76,0,.24,1);will-change:transform;cursor:pointer}
.preloader.is-done{transform:translateY(-100%)}
.pl-mark{display:flex;flex-direction:column;align-items:center;gap:26px}
.pl-logo{width:clamp(74px,8vw,112px);height:auto;display:block}
/* courses laid: bottom bar first (from left), middle (from centre), top (from right).
   Revealed with clip-path, not transform:scaleX, animating a transform rasterised
   the SVG mark and blurred it on hi-DPI screens; clip-path keeps it crisp vector. */
.pl-logo path{clip-path:inset(0 0 0 0)}
.pl-logo path:nth-of-type(1){animation:plBarR .7s cubic-bezier(.16,1,.3,1) .26s both}
.pl-logo path:nth-of-type(2){animation:plBarC .7s cubic-bezier(.16,1,.3,1) .13s both}
.pl-logo path:nth-of-type(3){animation:plBarL .7s cubic-bezier(.16,1,.3,1) 0s both}
@keyframes plBarR{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes plBarC{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
@keyframes plBarL{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.pl-wm{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4vw,52px);line-height:1;letter-spacing:-.01em;
  color:var(--ink);opacity:0;transform:translateY(20px);animation:plWm .7s cubic-bezier(.16,1,.3,1) .68s both}
.pl-wm .pl-dot{color:var(--orange);font-style:normal}
@keyframes plWm{to{opacity:1;transform:none}}
html.pl-lock,html.pl-lock body{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .pl-logo path,.pl-wm{animation:none;transform:none;opacity:1}
  .pos-pixel-scrub__canvas{display:none}
}

/* ============ HERO ENTRANCE, B · clip wipe (armed on load, plays as the preloader lifts) ============ */
/* transitions live on the base elements so the reveal (adding .hero-in) always animates */
.hero-cover .hc-frame{transition:clip-path .95s cubic-bezier(.16,1,.3,1)}
.hero-cover .hc-frame > .hc-slabb,.hero-cover .hc-frame > .hc-studio{
  transition:clip-path .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.hero-cover .hc-frame > .hc-tag{transition:clip-path .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),opacity .7s ease}
.hero-cover .hc-frame > .hc-nav,.hero-cover .hc-frame > .hc-logo,.hero-cover .hc-frame > .hc-hint{
  transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)}
/* armed (hidden) state */
.hero-cover.hero-arm .hc-frame{clip-path:inset(0 100% 0 0 round 18px)}
.hero-cover.hero-arm .hc-frame > .hc-slabb,.hero-cover.hero-arm .hc-frame > .hc-studio{clip-path:inset(0 100% 0 0);transform:translateX(-4%)}
.hero-cover.hero-arm .hc-frame > .hc-tag{clip-path:inset(100% 0 0 0);transform:translateY(18px);opacity:0}
.hero-cover.hero-arm .hc-frame > .hc-nav{opacity:0;transform:translateX(16px)}
.hero-cover.hero-arm .hc-frame > .hc-logo,.hero-cover.hero-arm .hc-frame > .hc-hint{opacity:0;transform:translateX(-14px)}
/* revealed state + stagger (editorial: frame wipes, wordmarks print L->R, tagline rises, ui slides) */
.hero-cover.hero-in .hc-frame{clip-path:inset(0 0 0 0 round 18px)}
.hero-cover.hero-in .hc-frame > .hc-slabb{clip-path:inset(0 0 0 0);transform:none;transition-delay:.35s}
.hero-cover.hero-in .hc-frame > .hc-studio{clip-path:inset(0 0 0 0);transform:none;transition-delay:.45s}
.hero-cover.hero-in .hc-frame > .hc-tag{clip-path:inset(0 0 0 0);transform:none;opacity:1;transition-delay:.6s}
.hero-cover.hero-in .hc-frame > .hc-nav{opacity:1;transform:none;transition-delay:.5s}
.hero-cover.hero-in .hc-frame > .hc-logo{opacity:1;transform:none;transition-delay:.55s}
.hero-cover.hero-in .hc-frame > .hc-hint{opacity:1;transform:none;transition-delay:.65s}
@media (prefers-reduced-motion:reduce){
  .hero-cover.hero-arm .hc-frame,.hero-cover.hero-arm .hc-frame > *{clip-path:none!important;transform:none!important;opacity:1!important}
}