/* ============================================================
   TBL DIGITAL — ATELIER
   Cinematic warm-ink / saffron-ember creative-agency system
   ============================================================ */

/* ---------- TOKENS ---------- */
.home--luxe{
  /* Cloud Dancer whites + soft grey-lavender surfaces (luxe tonal) */
  --ink:#F4F1EB;        /* Cloud Dancer — page base (warm) */
  --ink-2:#FBF9F5;      /* near-white raised */
  --ink-3:#EAE7F0;      /* cool lavender surface */
  --lav-bg:#ECE8F4;     /* cool lavender section wash */
  /* deep plum feature surfaces + dark text */
  --bone:#1E1830;       /* primary dark text / dark sections (rich) */
  --bone-2:#181226;
  --bone-3:#211A38;     /* deep plum band */
  /* whisper-accents */
  --ember:#5B47C4;      /* PRIMARY — refined violet (more presence) */
  --ember-soft:#7C68E0;
  --saffron:#C2B6E2;    /* SECONDARY — soft lavender */
  --teal:#A7B2AE;       /* rare sage note */
  --clay:#4632A0;       /* deep violet (emphasis) */
  --lav:#CFC6E6;        /* soft lavender tint */
  --mist:#DED9EA;       /* mist lavender */
  --haze:#544F63;       /* readable grey text */
  --haze-dim:#827C92;
  --txt-on-ink:#211B32;     /* dark text on cloud */
  --txt-on-ink-dim:#56506A;
  --txt-on-bone:#F4F1EB;    /* light text on dark plum */
  --txt-on-bone-dim:#C3BCD8;
  --line-on-ink:rgba(33,27,50,.14);
  --line-on-bone:rgba(244,241,235,.18);
  --ff-display:'Bricolage Grotesque',sans-serif;
  --ff-serif:'Instrument Serif',Georgia,serif;
  --ff-body:'Inter Tight',system-ui,sans-serif;
  --ff-mono:'Space Mono',ui-monospace,monospace;
  --container:1280px; --wide:1560px; --pad:clamp(20px,5vw,72px);
  --e-out:cubic-bezier(.16,1,.3,1); --e-inout:cubic-bezier(.76,0,.24,1);
  --r-sm:10px; --r-md:18px; --r-lg:28px; --header-h:78px;

  /* everything inside the homepage should use these tokens by default */
  background:var(--ink);
  color:var(--txt-on-ink);
  font-family:var(--ff-body);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:-.01em;
  display:block;
}

.home--luxe,.home--luxe *,.home--luxe *::before,.home--luxe *::after{box-sizing:border-box}
.home--luxe *{margin:0;padding:0}
.home--luxe{-webkit-text-size-adjust:100%}
.home--luxe img,.home--luxe video,.home--luxe canvas,.home--luxe svg{display:block;max-width:100%}
.home--luxe img{height:auto}
.home--luxe a{color:inherit;text-decoration:none}
.home--luxe button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.home--luxe ul{list-style:none}
.home--luxe ::selection{background:var(--ember);color:#fff}
.home--luxe :focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:3px}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
.container--wide{max-width:var(--wide)}
.section{position:relative;padding-block:clamp(80px,11vw,160px)}
.section--tight{padding-block:clamp(56px,7vw,96px)}
.on-bone{background:var(--bone);color:var(--txt-on-bone)}
.on-ink{background:var(--ink);color:var(--txt-on-ink)}
.on-ink-2{background:var(--ink-2);color:var(--txt-on-ink)}

.display{font-family:var(--ff-display);font-weight:800;line-height:.92;letter-spacing:-.03em}
.h-xl{font-family:var(--ff-display);font-weight:800;line-height:.9;letter-spacing:-.035em;font-size:clamp(2.6rem,7.2vw,6.4rem)}
.h-lg{font-family:var(--ff-display);font-weight:800;line-height:.94;letter-spacing:-.03em;font-size:clamp(2.1rem,4.6vw,4rem)}
.h-md{font-family:var(--ff-display);font-weight:700;line-height:1;letter-spacing:-.02em;font-size:clamp(1.5rem,2.6vw,2.4rem)}
.em-serif{font-family:var(--ff-serif);font-weight:400;font-style:italic;letter-spacing:-.01em}
.lead{font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.5;color:var(--txt-on-ink);max-width:54ch}
.on-bone .lead{color:var(--txt-on-bone)}

.eyebrow{font-family:var(--ff-mono);font-size:.72rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--ember);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.7}
.eyebrow--bare::before{display:none}
.idx{font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.22em;color:var(--haze-dim)}
.on-bone .idx{color:var(--txt-on-bone-dim)}

.fx-grain{
  position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 6s steps(6) infinite;will-change:transform;
}
@keyframes grainShift{0%{transform:translate(0,0)}20%{transform:translate(-4%,2%)}40%{transform:translate(3%,-3%)}60%{transform:translate(-2%,4%)}80%{transform:translate(4%,-1%)}100%{transform:translate(0,0)}}
.fx-vignette{position:fixed;inset:0;z-index:8999;pointer-events:none;box-shadow:inset 0 0 200px 30px rgba(60,40,120,.10);opacity:.5}

.cursor{position:fixed;top:0;left:0;z-index:9500;pointer-events:none;mix-blend-mode:difference;will-change:transform}
.cursor__dot{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.cursor__ring{position:absolute;width:42px;height:42px;border:1px solid rgba(255,255,255,.85);border-radius:50%;transform:translate(-50%,-50%);transition:width .3s var(--e-out),height .3s var(--e-out),opacity .3s}
.cursor__label{position:absolute;transform:translate(-50%,-50%);font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;opacity:0;white-space:nowrap;transition:opacity .25s}
body.cur-active .cursor__ring{width:64px;height:64px}
body.cur-active .cursor__label{opacity:1}
@media (hover:none){ .cursor{display:none} }

.loader{position:fixed;inset:0;z-index:9999;background:var(--ink);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:30px}
.loader__mark{font-family:var(--ff-display);font-weight:800;font-size:clamp(3rem,10vw,7rem);letter-spacing:-.04em;color:var(--bone);line-height:1}
.loader__mark span{color:var(--ember)}
.loader__bar{width:min(300px,60vw);height:2px;background:var(--line-on-ink);overflow:hidden;border-radius:2px}
.loader__fill{height:100%;width:0;background:var(--ember)}
.loader__count{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.3em;color:var(--haze-dim)}
body.loaded .loader{opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}

.page-trans{position:fixed;inset:0;z-index:9600;background:var(--ink);transform:translateY(100%);pointer-events:none;display:flex;align-items:center;justify-content:center}
.page-trans__mark{font-family:var(--ff-display);font-weight:800;font-size:clamp(2rem,7vw,4rem);color:var(--bone);opacity:0}
.page-trans__mark span{color:var(--ember)}

.site-header{position:fixed;top:0;left:0;width:100%;z-index:1200;height:var(--header-h);display:flex;align-items:center;transition:transform .5s var(--e-out),background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
.site-header.is-solid{background:rgba(244,242,251,.82);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line-on-ink)}
.site-header.hide{transform:translateY(-100%)}
.hdr-inner{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--ff-display);font-weight:800;font-size:1.5rem;letter-spacing:-.04em;color:var(--bone)}
.logo span{color:var(--ember)}
.logo img{max-height:40px;width:auto}
.primary-nav .nav-list{display:flex;align-items:center;gap:6px}
.nav-link{position:relative;display:block;padding:9px 16px;font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-on-ink);opacity:.82;transition:opacity .3s}
.nav-link .nav-link-inner{position:relative;display:inline-block}
.nav-link .nav-link-inner::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:var(--ember);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--e-out)}
.nav-link:hover{opacity:1}
.nav-link:hover .nav-link-inner::after{transform:scaleX(1);transform-origin:left}
.current-menu-item .nav-link,.current_page_item .nav-link{opacity:1;color:var(--saffron)}
.hdr-right{display:flex;align-items:center;gap:14px}
.hdr-cta{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:100px;background:var(--ember);color:#fff;font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;transition:transform .35s var(--e-out),background .35s,box-shadow .35s;box-shadow:0 0 0 0 rgba(106,90,158,.5)}
.hdr-cta:hover{transform:translateY(-2px);background:var(--ember-soft);box-shadow:0 14px 34px -10px rgba(106,90,158,.7)}
.hdr-cta svg{transition:transform .35s var(--e-out)}
.hdr-cta:hover svg{transform:translate(2px,-2px)}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line-on-ink);border-radius:50%;position:relative}
.burger span{position:absolute;left:11px;width:20px;height:1.6px;background:var(--bone);transition:transform .35s var(--e-out),opacity .25s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:26px}
body.menu-open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.mob-menu{position:fixed;inset:0;z-index:1100;background:var(--ink-2);transform:translateY(-100%);transition:transform .7s var(--e-inout);display:flex;flex-direction:column;justify-content:center;padding:var(--pad);gap:8px}
body.menu-open .mob-menu{transform:translateY(0)}
.mob-link{font-family:var(--ff-display);font-weight:800;font-size:clamp(2.4rem,11vw,4.5rem);line-height:1.02;letter-spacing:-.03em;color:var(--bone);opacity:0;transform:translateY(30px);transition:color .3s}
body.menu-open .mob-link{animation:mobIn .6s var(--e-out) forwards}
body.menu-open .mob-link:nth-child(1){animation-delay:.18s}
body.menu-open .mob-link:nth-child(2){animation-delay:.24s}
body.menu-open .mob-link:nth-child(3){animation-delay:.30s}
body.menu-open .mob-link:nth-child(4){animation-delay:.36s}
body.menu-open .mob-link:nth-child(5){animation-delay:.42s}
.mob-link:hover{color:var(--ember)}
@keyframes mobIn{to{opacity:1;transform:translateY(0)}}
.mob-foot{margin-top:40px;display:flex;flex-wrap:wrap;gap:8px 28px;font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.05em;color:var(--haze)}
.mob-foot a:hover{color:var(--ember)}

.btn{--bg:var(--ember);--fg:#fff;display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:100px;background:var(--bg);color:var(--fg);font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;position:relative;overflow:hidden;transition:transform .4s var(--e-out),box-shadow .4s;box-shadow:0 0 0 0 rgba(106,90,158,.4)}
.btn span{position:relative;z-index:2}
.btn::after{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .5s var(--e-out);z-index:1}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 40px -12px rgba(106,90,158,.65)}
.btn:hover::after{transform:translateY(0)}
.btn:hover span{color:var(--bone)}
.btn--ghost{--bg:transparent;--fg:var(--txt-on-ink);border:1px solid var(--line-on-ink)}
.on-bone .btn--ghost{--fg:var(--txt-on-bone);border-color:var(--line-on-bone)}
.btn--ghost::after{background:var(--ember)}
.btn--ghost:hover span{color:#fff}
.btn--lg{padding:20px 40px;font-size:.86rem}

.link-arrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ember);transition:gap .3s var(--e-out)}
.link-arrow:hover{gap:14px}

[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s var(--e-out),transform .9s var(--e-out)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-reveal="fade"]{transform:none}
.stagger>*{opacity:0;transform:translateY(28px);transition:opacity .8s var(--e-out),transform .8s var(--e-out)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:.04s}
.stagger.in>*:nth-child(2){transition-delay:.10s}
.stagger.in>*:nth-child(3){transition-delay:.16s}
.stagger.in>*:nth-child(4){transition-delay:.22s}
.stagger.in>*:nth-child(5){transition-delay:.28s}
.stagger.in>*:nth-child(6){transition-delay:.34s}

.line-mask{overflow:hidden;display:block}
.line-mask>span{display:block;transform:translateY(105%);transition:transform 1s var(--e-out)}
.in .line-mask>span,.line-mask.in>span{transform:none}

.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero__canvas{position:absolute;inset:0;z-index:1;opacity:.9}
.hero__glow{position:absolute;z-index:0;width:75vw;height:75vw;max-width:900px;max-height:900px;left:50%;top:38%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(106,90,158,.22),rgba(180,169,206,.08) 38%,transparent 66%);filter:blur(20px);pointer-events:none}
.hero__noise{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(244,242,251,.5) 0%,transparent 26%,transparent 58%,rgba(244,242,251,.85) 100%)}
.hero__inner{position:relative;z-index:3;width:100%;max-width:var(--wide);margin-inline:auto;padding:0 var(--pad) clamp(48px,7vh,90px)}
.hero__eyebrow{margin-bottom:clamp(20px,4vh,42px)}
.hero__title{font-family:var(--ff-display);font-weight:800;line-height:.88;letter-spacing:-.04em;font-size:clamp(2.9rem,10.5vw,9.2rem);color:var(--bone);max-width:16ch}
.hero__title .em-serif{color:var(--saffron);font-size:1.04em}
.hero__title .ln{display:block;overflow:hidden}
.hero__title .ln>span{display:block}
.hero__sub-row{margin-top:clamp(28px,4vh,52px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:30px}
.hero__sub{max-width:46ch;color:var(--haze);font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.5}
.hero__sub b{color:var(--bone);font-weight:600}
.hero__actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero__scroll{position:absolute;right:var(--pad);bottom:clamp(48px,7vh,90px);z-index:3;display:flex;align-items:center;gap:10px;writing-mode:vertical-rl;font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--haze-dim)}
.hero__scroll::after{content:"";width:1px;height:54px;background:linear-gradient(var(--ember),transparent);animation:scrollPulse 1.8s var(--e-inout) infinite}
@keyframes scrollPulse{0%,100%{transform:scaleY(.4);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}
@media (max-width:680px){.hero__scroll{display:none}}

.trust{border-top:1px solid var(--line-on-ink);border-bottom:1px solid var(--line-on-ink);padding-block:26px;background:var(--ink)}
.trust__inner{max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad);display:flex;align-items:center;gap:clamp(24px,5vw,72px);flex-wrap:wrap;justify-content:center}
.trust__label{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--haze-dim)}
.trust__logo{font-family:var(--ff-display);font-weight:700;font-size:clamp(1rem,1.6vw,1.35rem);letter-spacing:-.02em;color:var(--txt-on-ink);opacity:.55;transition:opacity .3s,color .3s}
.trust__logo:hover{opacity:1;color:var(--saffron)}

.marquee{overflow:hidden;border-block:1px solid var(--line-on-ink);background:var(--ink);padding-block:18px;white-space:nowrap}
.marquee--bone{background:var(--bone);border-color:var(--line-on-bone)}
.mq-track{display:inline-flex;align-items:center;gap:0;will-change:transform;animation:mq 34s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track span{display:inline-flex;align-items:center;gap:.7em;padding-inline:clamp(18px,2.4vw,42px);font-family:var(--ff-display);font-weight:700;font-size:clamp(1.1rem,2.4vw,2rem);letter-spacing:-.02em;color:var(--txt-on-ink)}
.marquee--bone .mq-track span{color:var(--txt-on-bone)}
.mq-track span i{color:var(--ember);font-style:normal;font-size:.6em}
@keyframes mq{to{transform:translateX(-33.33%)}}

.intro{position:relative}
.intro__grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,90px)}
@media(min-width:900px){.intro__grid{grid-template-columns:.85fr 1.15fr;align-items:start}}
.intro__label{position:sticky;top:120px}
.intro__statement{font-family:var(--ff-display);font-weight:600;line-height:1.04;letter-spacing:-.025em;font-size:clamp(1.7rem,3.5vw,3.1rem);color:var(--txt-on-bone)}
.intro__statement .word{display:inline-block}
.intro__statement em{font-family:var(--ff-serif);font-style:italic;font-weight:400;color:var(--clay)}
.intro__statement .dim{color:var(--txt-on-bone-dim)}
.intro__meta{margin-top:clamp(40px,5vw,70px);display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:30px;border-top:1px solid var(--line-on-bone);padding-top:34px}
.intro__stat .n{font-family:var(--ff-display);font-weight:800;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1;letter-spacing:-.03em;color:var(--ember)}
.intro__stat .l{margin-top:8px;font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-on-bone-dim)}

.reel{position:relative;background:var(--ink)}
.reel__pin{height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.reel__frame{position:relative;width:38vw;max-width:560px;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;will-change:transform;box-shadow:0 40px 120px -30px rgba(0,0,0,.8)}
.reel__canvas{position:absolute;inset:0;width:100%;height:100%}
.reel__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:6vw;background:radial-gradient(circle at 50% 60%,rgba(27,20,56,.15),rgba(27,20,56,.6))}
.reel__line{font-family:var(--ff-display);font-weight:800;line-height:1;letter-spacing:-.03em;font-size:clamp(1.5rem,4.5vw,4.5rem);color:var(--txt-on-bone)}
.reel__line .w{display:inline-block;margin-inline:.12em}
.reel__line em{font-family:var(--ff-serif);font-style:italic;font-weight:400;color:var(--saffron)}
.reel__tag{position:absolute;left:24px;bottom:20px;z-index:3;font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--haze)}

.svc{position:relative;background:var(--ink)}
.svc__head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:clamp(40px,6vw,72px)}
.svc__title{font-family:var(--ff-display);font-weight:800;line-height:.92;letter-spacing:-.035em;font-size:clamp(2.2rem,5.4vw,4.6rem);color:var(--bone)}
.svc__title em{font-family:var(--ff-serif);font-style:italic;font-weight:400;color:var(--ember)}
.svc__list{display:grid;gap:0;border-top:1px solid var(--line-on-ink)}
.svc__row{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,3vw,48px);padding:clamp(26px,3.6vw,46px) 0;border-bottom:1px solid var(--line-on-ink);transition:padding-left .5s var(--e-out)}
.svc__row::before{content:"";position:absolute;left:-100vw;right:-100vw;top:0;bottom:0;background:var(--ink-2);opacity:0;transition:opacity .5s;z-index:0}
.svc__row:hover::before{opacity:1}
.svc__row:hover{padding-left:clamp(14px,2vw,34px)}
.svc__row>*{position:relative;z-index:1}
.svc__num{font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.1em;color:var(--haze-dim)}
.svc__name{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.7rem);letter-spacing:-.02em;color:var(--txt-on-ink);transition:color .4s}
.svc__row:hover .svc__name{color:var(--saffron)}
.svc__desc{font-size:.98rem;color:var(--haze);max-width:34ch;display:none}
@media(min-width:1024px){.svc__desc{display:block}}
.svc__icon{font-size:1.6rem;color:var(--ember);opacity:0;transform:translateX(-12px);transition:opacity .4s,transform .4s var(--e-out)}
.svc__row:hover .svc__icon{opacity:1;transform:none}
.svc__tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.svc__tag{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--haze);border:1px solid var(--line-on-ink);border-radius:100px;padding:5px 11px}

.proc{position:relative;background:var(--bone);color:var(--txt-on-bone);overflow:hidden}
.proc__pin{height:100svh;display:flex;flex-direction:column;justify-content:center}
.proc__head{padding:0 var(--pad);max-width:var(--wide);margin-inline:auto;width:100%;margin-bottom:clamp(28px,4vh,52px)}
.proc__track{display:flex;gap:clamp(20px,2.4vw,40px);padding-inline:var(--pad);will-change:transform}
.proc__card{flex:0 0 clamp(280px,42vw,440px);background:#fff;border:1px solid var(--line-on-bone);border-radius:var(--r-lg);padding:clamp(28px,3vw,44px);min-height:clamp(320px,46vh,440px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.proc__card::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(106,90,158,.16),transparent 70%)}
.proc__step{font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.2em;color:var(--ember)}
.proc__big{font-family:var(--ff-display);font-weight:800;font-size:clamp(3.4rem,8vw,7rem);line-height:.9;letter-spacing:-.04em;color:var(--bone-3);position:relative;z-index:1}
.proc__cname{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.02em;color:var(--bone)}
.proc__cdesc{margin-top:12px;color:var(--haze);font-size:.98rem;line-height:1.55}

.stack{background:var(--ink-2);position:relative;overflow:hidden}
.stack__head{text-align:center;max-width:660px;margin:0 auto clamp(40px,5vw,64px)}
.stack__title{font-family:var(--ff-display);font-weight:800;font-size:clamp(2.1rem,5vw,4rem);line-height:.96;letter-spacing:-.03em;color:var(--bone)}
.stack__title em{font-family:var(--ff-serif);font-style:italic;font-weight:400;color:var(--ember)}
.stack__sub{margin-top:18px;color:var(--haze);font-size:1.05rem}
.stack__chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:30px}
.stack__chip{padding:9px 18px;border-radius:100px;border:1px solid var(--line-on-ink);font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--haze);transition:all .3s}
.stack__chip:hover{border-color:var(--ember);color:var(--bone)}
.stack__chip.is-active{background:var(--ember);border-color:var(--ember);color:#fff}
.stack__main{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:880px){.stack__main{grid-template-columns:.85fr 1.15fr}}
.stack__tray{background:var(--ink);border:1px solid var(--line-on-ink);border-radius:var(--r-lg);padding:24px}
.stack__tray-label{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--haze-dim);display:block;margin-bottom:16px}
.stack__blocks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stack__block{display:flex;align-items:center;gap:10px;padding:14px;border-radius:var(--r-sm);background:var(--ink-3);border:1px solid var(--line-on-ink);cursor:grab;transition:transform .25s var(--e-out),border-color .25s,background .25s;user-select:none}
.stack__block:hover{transform:translateY(-2px);border-color:var(--ember)}
.stack__block.dragging{opacity:.4}
.stack__block.is-used{opacity:.35;pointer-events:none}
.stack__block i{font-style:normal;color:var(--saffron);font-size:1.1rem}
.stack__block span{font-size:.86rem;color:var(--txt-on-ink)}
.stack__dash{background:linear-gradient(160deg,var(--ink-3),var(--ink));border:1px solid var(--line-on-ink);border-radius:var(--r-lg);padding:26px;position:relative;min-height:360px}
.stack__dash.drag-over{border-color:var(--ember);box-shadow:inset 0 0 0 1px var(--ember)}
.stack__dash-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.stack__dash-name{font-family:var(--ff-display);font-weight:700;font-size:1.05rem;color:var(--bone)}
.stack__live{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--haze)}
.stack__live .dot{width:7px;height:7px;border-radius:50%;background:var(--ember);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(106,90,158,.5)}50%{opacity:.6;box-shadow:0 0 0 6px rgba(106,90,158,0)}}
.stack__graph-wrap{position:relative;margin-bottom:22px}
.stack__graph{width:100%;height:84px}
.stack__graph polyline{fill:none;stroke:var(--ember);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:all 1s var(--e-out);filter:drop-shadow(0 0 6px rgba(106,90,158,.5))}
.stack__graph-label{position:absolute;top:0;right:0;font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--haze-dim)}
.stack__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.stack__stat .n{font-family:var(--ff-display);font-weight:800;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1;color:var(--saffron)}
.stack__stat .l{margin-top:6px;font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--haze-dim)}
.stack__gauge{height:8px;border-radius:8px;background:var(--ink);overflow:hidden;margin-bottom:6px}
.stack__gauge-fill{height:100%;width:6%;background:linear-gradient(90deg,var(--ember),var(--saffron));transition:width 1s var(--e-out)}
.stack__active{display:flex;flex-wrap:wrap;gap:8px;min-height:30px}
.stack__active-chip{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--bone);background:rgba(106,90,158,.16);border:1px solid rgba(106,90,158,.4);border-radius:100px;padding:5px 11px;animation:popIn .4s var(--e-out)}
@keyframes popIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.stack__hint{position:absolute;inset:auto 26px 24px;text-align:center;font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--haze-dim);pointer-events:none;transition:opacity .3s}
.stack__hint.hide{opacity:0}
.stack__result{max-width:560px;margin:34px auto 0;text-align:center;opacity:0;transform:translateY(20px);transition:all .6s var(--e-out)}
.stack__result.show{opacity:1;transform:none}
.stack__result h3{font-family:var(--ff-display);font-weight:800;font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.02em;color:var(--bone);margin-bottom:12px}
.stack__result p{color:var(--haze);margin-bottom:22px}
.stack__form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.stack__form input{flex:1;min-width:220px;padding:15px 18px;border-radius:100px;background:var(--ink);border:1px solid var(--line-on-ink);color:var(--bone);font-family:var(--ff-body)}
.stack__form input:focus{outline:none;border-color:var(--ember)}
.stack__form button{padding:15px 26px;border-radius:100px;background:var(--ember);color:#fff;font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;transition:transform .3s var(--e-out)}
.stack__form button:hover{transform:translateY(-2px)}

.work__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,68px)}
.work__title{font-family:var(--ff-display);font-weight:800;font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:.92;letter-spacing:-.035em;color:var(--bone)}
.work__title em{font-family:var(--ff-serif);font-style:italic;font-weight:400;color:var(--ember)}
.work__grid{display:grid;grid-template-columns:1fr;gap:clamp(18px,2vw,30px)}
@media(min-width:720px){.work__grid{grid-template-columns:1fr 1fr}}
.work__item{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--ink-2);border:1px solid var(--line-on-ink)}
.work__item:nth-child(4n+1),.work__item:nth-child(4n+4){grid-row:span 1}
.work__thumb{position:relative;aspect-ratio:4/3;overflow:hidden}
.work__thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e-out),filter .6s;filter:grayscale(.15) contrast(1.03) brightness(1.02)}
.work__item:hover .work__thumb img{transform:scale(1.06);filter:grayscale(0) contrast(1.06) brightness(1.05)}
.work__thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(16,12,8,.82));opacity:.78;transition:opacity .5s}
.work__item:hover .work__thumb::after{opacity:.62}
.work__meta{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(20px,2.4vw,32px);width:100%}
.work__cat{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--saffron);margin-bottom:8px;display:block}
.work__name{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.4rem,2.6vw,2.1rem);letter-spacing:-.02em;color:var(--txt-on-bone)}
.work__sub{margin-top:4px;color:var(--txt-on-bone-dim);font-size:.9rem}
.work__open{position:absolute;top:clamp(20px,2.4vw,28px);right:clamp(20px,2.4vw,28px);z-index:2;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-on-ink);background:rgba(27,20,56,.45);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:var(--txt-on-bone);transform:scale(.8) rotate(-25deg);opacity:0;transition:all .45s var(--e-out)}
.work__item:hover .work__open{transform:none;opacity:1}

.cta{position:relative;overflow:hidden;background:var(--ink);text-align:center;isolation:isolate}
.cta__canvas{position:absolute;inset:0;z-index:0;opacity:.7}
.cta__glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80vw;height:80vw;max-width:760px;max-height:760px;z-index:0;background:radial-gradient(circle,rgba(106,90,158,.28),rgba(180,169,206,.06) 40%,transparent 68%);filter:blur(30px)}
.cta__inner{position:relative;z-index:2;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
.cta__title{font-family:var(--ff-display);font-weight:800;font-size:clamp(2.6rem,8vw,7rem);line-height:.92;letter-spacing:-.04em;color:var(--bone);margin:22px 0 24px}
.cta__title em{font-family:var(--ff-serif);font-style:italic;font-weight:400;color:var(--saffron)}
.cta__sub{max-width:50ch;margin:0 auto 38px;color:var(--haze);font-size:clamp(1.05rem,1.5vw,1.3rem)}
.cta__mail{display:block;margin-top:28px;font-family:var(--ff-mono);font-size:.8rem;letter-spacing:.1em;color:var(--haze)}
.cta__mail:hover{color:var(--ember)}

/* Footer intentionally NOT styled here — footer.php is shared sitewide
   markup, so it should only ever be styled by the theme's own main.css.
   Styling it here previously clobbered the theme's footer look, only
   on the homepage, when this file loaded. */

.page-hero{position:relative;padding-top:calc(var(--header-h) + clamp(60px,9vw,120px));padding-bottom:clamp(40px,6vw,80px);overflow:hidden;background:var(--ink)}
.page-hero__canvas{position:absolute;inset:0;z-index:0;opacity:.55}
.page-hero__glow{position:absolute;right:-10%;top:-20%;width:50vw;height:50vw;max-width:620px;max-height:620px;z-index:0;background:radial-gradient(circle,rgba(106,90,158,.2),transparent 65%);filter:blur(20px)}
.page-hero__inner{position:relative;z-index:2;max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad)}
.page-hero__title{font-family:var(--ff-display);font-weight:800;font-size:clamp(2.8rem,8vw,7rem);line-height:.9;letter-spacing:-.04em;color:var(--bone);max-width:18ch}
.page-hero__title em{font-family:var(--ff-serif);font-style:italic;font-weight:400;color:var(--saffron)}
.page-hero__sub{margin-top:24px;max-width:54ch;color:var(--haze);font-size:clamp(1.05rem,1.5vw,1.3rem)}
.crumb{display:inline-flex;gap:8px;font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--haze-dim);margin-bottom:26px}
.crumb a:hover{color:var(--ember)}
.crumb span{color:var(--ember)}

.prose{max-width:72ch;margin-inline:auto;color:var(--txt-on-ink);font-size:1.08rem;line-height:1.75}
.on-bone .prose{color:var(--txt-on-bone)}
.prose h2{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.02em;margin:1.8em 0 .6em;color:var(--bone)}
.on-bone .prose h2{color:var(--txt-on-bone)}
.prose h3{font-family:var(--ff-display);font-weight:700;font-size:1.4rem;margin:1.5em 0 .5em}
.prose p{margin-bottom:1.2em}
.prose a{color:var(--ember);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{margin:0 0 1.2em 1.2em}
.prose li{margin-bottom:.5em}
.prose blockquote{border-left:3px solid var(--ember);padding-left:24px;margin:1.5em 0;font-family:var(--ff-serif);font-style:italic;font-size:1.3rem;color:var(--saffron)}
.prose img{border-radius:var(--r-md);margin:1.5em 0}

.about-split{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,80px);align-items:center}
@media(min-width:900px){.about-split{grid-template-columns:1.1fr .9fr}}
.about-statement{font-family:var(--ff-display);font-weight:600;font-size:clamp(1.6rem,3.4vw,2.8rem);line-height:1.08;letter-spacing:-.02em;color:var(--bone)}
.about-statement em{font-family:var(--ff-serif);font-style:italic;font-weight:400;color:var(--ember)}
.about-portrait{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:var(--ink-2);border:1px solid var(--line-on-ink)}
.about-portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.05)}
.values{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line-on-bone)}
@media(min-width:760px){.values{grid-template-columns:1fr 1fr}}
.val{padding:clamp(28px,3.4vw,44px);border-bottom:1px solid var(--line-on-bone)}
@media(min-width:760px){.val:nth-child(odd){border-right:1px solid var(--line-on-bone)}}
.val__n{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.16em;color:var(--ember);margin-bottom:14px;display:block}
.val__t{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:-.02em;color:var(--txt-on-bone);margin-bottom:10px}
.val__d{color:var(--txt-on-bone-dim);font-size:.98rem;line-height:1.6}
.timeline{position:relative;max-width:780px;margin-inline:auto;padding-left:30px}
.timeline::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:var(--line-on-ink)}
.tl-item{position:relative;padding:0 0 clamp(34px,4vw,56px) 12px}
.tl-item::before{content:"";position:absolute;left:-30px;top:6px;width:13px;height:13px;border-radius:50%;background:var(--ink);border:2px solid var(--ember)}
.tl-year{font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.14em;color:var(--saffron);margin-bottom:8px}
.tl-title{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.2rem,2.2vw,1.6rem);color:var(--bone);margin-bottom:6px}
.tl-desc{color:var(--haze);font-size:.98rem;line-height:1.6;max-width:54ch}

.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,80px)}
@media(min-width:900px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-side h2{font-family:var(--ff-display);font-weight:800;font-size:clamp(2rem,4.4vw,3.4rem);line-height:.96;letter-spacing:-.03em;color:var(--bone);margin-bottom:20px}
.contact-side h2 em{font-family:var(--ff-serif);font-style:italic;font-weight:400;color:var(--ember)}
.contact-detail{margin-top:30px;display:grid;gap:18px}
.contact-detail a,.contact-detail span{display:flex;flex-direction:column;gap:4px}
.contact-detail .k{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--haze-dim)}
.contact-detail .v{font-family:var(--ff-display);font-weight:600;font-size:1.25rem;color:var(--bone);transition:color .3s}
.contact-detail a:hover .v{color:var(--saffron)}
.form{display:grid;gap:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--haze-dim)}
.field input,.field select,.field textarea{padding:15px 18px;border-radius:var(--r-sm);background:var(--ink-2);border:1px solid var(--line-on-ink);color:var(--bone);font-family:var(--ff-body);font-size:1rem;transition:border-color .3s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ember)}
.field textarea{resize:vertical;min-height:130px}
.form-note{font-family:var(--ff-mono);font-size:.72rem;color:var(--haze-dim)}
.form-msg{font-family:var(--ff-mono);font-size:.8rem;padding:10px 0}
.form-msg.ok{color:var(--saffron)}
.form-msg.err{color:var(--ember)}

.pf-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(34px,4vw,54px)}
.pf-filter button{padding:9px 18px;border-radius:100px;border:1px solid var(--line-on-ink);font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--haze);transition:all .3s}
.pf-filter button:hover{color:var(--bone);border-color:var(--ember)}
.pf-filter button.is-active{background:var(--ember);border-color:var(--ember);color:#fff}
.pf-grid{display:grid;grid-template-columns:1fr;gap:clamp(18px,2vw,30px)}
@media(min-width:680px){.pf-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.pf-grid{grid-template-columns:1fr 1fr 1fr}}
.pf-card{opacity:1;transition:opacity .4s,transform .4s}
.pf-card.hide{display:none}

.cs-hero{position:relative;padding-top:calc(var(--header-h) + clamp(50px,8vw,100px));padding-bottom:clamp(40px,6vw,72px)}
.cs-meta-row{display:flex;flex-wrap:wrap;gap:24px 48px;margin-top:34px;padding-top:30px;border-top:1px solid var(--line-on-ink)}
.cs-meta .k{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--haze-dim);margin-bottom:6px}
.cs-meta .v{font-family:var(--ff-display);font-weight:600;font-size:1.1rem;color:var(--bone)}
.cs-cover{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;margin-block:clamp(30px,4vw,56px)}
.cs-cover img{width:100%;height:100%;object-fit:cover}
.cs-body{display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,72px)}
@media(min-width:920px){.cs-body{grid-template-columns:1fr 1.4fr;align-items:start}}
.cs-result-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;padding:clamp(34px,4vw,54px) 0;border-block:1px solid var(--line-on-ink)}
.cs-result .n{font-family:var(--ff-display);font-weight:800;font-size:clamp(2.4rem,5vw,4rem);line-height:1;letter-spacing:-.03em;color:var(--ember)}
.cs-result .l{margin-top:8px;font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--haze)}
.cs-gallery{display:grid;grid-template-columns:1fr;gap:18px;margin-top:clamp(30px,4vw,50px)}
@media(min-width:760px){.cs-gallery{grid-template-columns:1fr 1fr}}
.cs-gallery figure{border-radius:var(--r-md);overflow:hidden;background:var(--ink-2)}
.cs-gallery figure.wide{grid-column:1/-1}

.nf{min-height:84vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--pad);position:relative;overflow:hidden}
.nf__big{font-family:var(--ff-display);font-weight:800;font-size:clamp(7rem,28vw,22rem);line-height:.8;letter-spacing:-.05em;color:var(--ink-3);-webkit-text-stroke:1px var(--ember)}
.nf__t{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.4rem,3vw,2.2rem);color:var(--bone);margin:10px 0 18px}
.nf__p{color:var(--haze);margin-bottom:30px;max-width:42ch}

@media(max-width:980px){
  :root{--header-h:68px}
  .primary-nav,.hdr-cta{display:none}
  .burger{display:block}
  .reel__frame{width:62vw;max-width:none}
  .intro__label{position:static}
}
@media(max-width:560px){
  .stack__blocks{grid-template-columns:1fr}
  .stack__stats{grid-template-columns:repeat(3,1fr)}
  .ft-bottom{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .fx-grain{animation:none}
  [data-reveal],.stagger>*,.line-mask>span{opacity:1!important;transform:none!important}
  .hero__canvas,.cta__canvas,.reel__canvas,.page-hero__canvas{display:none}
  .mq-track,.ftm-track{animation:none}
}

.hero--3d{align-items:center}
.hero--3d .hero__inner{z-index:3}
.hero--3d .hero__glow{top:50%;opacity:.8}
.hero__title--kinetic{max-width:20ch;perspective:600px}
.kchar{display:inline-block;will-change:transform,opacity;transition:none}
.hero__title--kinetic .em-serif .kchar{color:var(--saffron)}
@media(min-width:1100px){ .hero--3d .hero__inner{max-width:var(--wide)} }

.statband{isolation:isolate}
.statband__fx{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55}
.statband__lead,.statband__grid{position:relative;z-index:1}
.statband__glyph{display:block;font-size:1.4rem;color:var(--ember-soft);opacity:.7;margin-bottom:14px;transition:transform .5s var(--e-out),opacity .4s,color .4s}
.statband__item{position:relative;cursor:default;will-change:transform}
.statband__item::before{content:"";position:absolute;inset:-14px -18px;z-index:-1;border-radius:20px;background:radial-gradient(120% 120% at 50% 0%,rgba(124,104,224,.20),transparent 70%);opacity:0;transition:opacity .4s}
.statband__item:hover::before{opacity:1}
.statband__item:hover .statband__glyph{transform:scale(1.3) rotate(14deg);opacity:1;color:var(--ember)}
.statband__item .n span{transition:color .4s}
.statband__item:hover .n span{color:var(--ember-soft)}

.kdo-card__accent{position:absolute;inset:0;z-index:0;width:100%;height:100%;opacity:.5;pointer-events:none}
.kdo-card__accent path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.1s var(--e-out)}
.kdo-card--a .kdo-card__accent,.kdo-card--e .kdo-card__accent{color:rgba(33,26,56,.14)}
.kdo-card--b .kdo-card__accent{color:rgba(255,255,255,.28)}
.kdo-card--c .kdo-card__accent,.kdo-card--f .kdo-card__accent{color:rgba(33,26,56,.12)}
.kdo-card--d .kdo-card__accent{color:rgba(244,241,235,.16)}
.kdo-card:hover .kdo-card__accent path{stroke-dashoffset:0}
.kdo-card>*:not(.kdo-card__accent){position:relative;z-index:1}
.kdo-card__ripple{position:absolute;z-index:2;width:14px;height:14px;margin:-7px;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);animation:kdoRip .65s ease-out forwards;pointer-events:none}
@keyframes kdoRip{to{transform:scale(22);opacity:0}}

.loader__logo{display:block;width:clamp(160px,22vw,260px);height:auto;margin:0 auto;animation:loaderLogoPulse 1.8s ease-in-out infinite}
@keyframes loaderLogoPulse{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.03);opacity:1}}

/* ============================================================
   RESTORED — statband / kdo / carpets / showcase / kplay / kcta
   base rules (these were missing entirely, which is why those
   sections rendered as unstyled plain content)
   ============================================================ */
.statband{position:relative;background:linear-gradient(160deg,var(--bone-3),var(--bone));color:var(--txt-on-bone);
  padding-block:clamp(56px,8vw,108px);overflow:hidden}
.statband::before{content:"";position:absolute;right:-10%;top:-30%;width:50vw;height:50vw;max-width:620px;max-height:620px;
  background:radial-gradient(circle,rgba(124,104,224,.22),transparent 65%);filter:blur(30px)}
.statband__lead{position:relative;font-family:var(--ff-display);font-weight:600;font-size:clamp(1.5rem,3.4vw,2.8rem);line-height:1.12;letter-spacing:-.025em;color:var(--txt-on-bone);max-width:24ch}
.statband__lead em{font-family:var(--ff-serif);font-style:italic;font-weight:400;color:var(--ember-soft)}
.statband__lead b{color:var(--ember-soft);font-weight:600}
.statband__grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:30px;margin-top:clamp(40px,5vw,72px);padding-top:36px;border-top:1px solid var(--line-on-bone)}
.statband__item .n{font-family:var(--ff-display);font-weight:800;font-size:clamp(2.6rem,5vw,4.4rem);line-height:1;letter-spacing:-.03em;color:var(--txt-on-bone)}
.statband__item .l{margin-top:10px;font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-on-bone-dim)}

.kdo{background:var(--ink);position:relative;overflow:hidden}
.kdo__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(34px,4vw,60px)}
.kdo__title{font-family:var(--ff-display);font-weight:800;font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:.92;letter-spacing:-.035em;color:var(--txt-on-ink)}
.kdo__title em{font-family:var(--ff-serif);font-style:italic;font-weight:400;color:var(--ember)}

/* =======================================================
   CLASSIC WORKS · FLOATING CARPETS  (lavender wash)
   ======================================================= */
.carpets{position:relative;background:linear-gradient(180deg,var(--lav-bg),var(--ink) 75%);padding-block:clamp(74px,9vw,150px);overflow:hidden}
.carpets__head{max-width:680px;margin-bottom:clamp(46px,6vw,90px)}
.carpets__title{font-family:var(--ff-display);font-weight:800;font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:.94;letter-spacing:-.035em;color:var(--txt-on-ink);margin:14px 0 16px}
.carpets__title em{font-family:var(--ff-serif);font-style:italic;font-weight:400;color:var(--ember)}
.carpets__sub{color:var(--haze);font-size:1.06rem;max-width:48ch}
.carpets__field{position:relative;max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,60px);align-items:center;perspective:1600px}
@media(max-width:900px){.carpets__field{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.carpets__field{grid-template-columns:1fr}}
.carpet{position:relative;display:block;text-decoration:none;will-change:transform;transform-style:preserve-3d}
.carpet:nth-child(even){margin-top:clamp(30px,6vw,90px)}
.carpet:nth-child(3n){margin-top:clamp(14px,3vw,48px)}
.carpet__shadow{position:absolute;left:8%;right:8%;bottom:-30px;height:46px;border-radius:50%;background:radial-gradient(ellipse,rgba(45,35,80,.30),transparent 70%);filter:blur(12px);transition:transform .5s var(--e-out),opacity .5s;z-index:0}
.carpet__card{position:relative;z-index:1;border-radius:var(--r-lg);overflow:hidden;background:var(--ink-2);border:1px solid rgba(33,26,56,.08);box-shadow:0 30px 60px -34px rgba(45,35,80,.5);transition:box-shadow .5s var(--e-out)}
.carpet__img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink-3)}
.carpet__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2) contrast(1.03);transition:transform 1s var(--e-out),filter .6s}
.carpet:hover .carpet__img img{transform:scale(1.06);filter:grayscale(0)}
.carpet__meta{position:absolute;left:0;bottom:0;z-index:2;width:100%;padding:clamp(18px,2vw,26px);background:linear-gradient(180deg,transparent,rgba(20,14,38,.82));transition:opacity .4s}
.carpet__cat{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lav);display:block;margin-bottom:6px}
.carpet__name{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.35rem,2.2vw,2rem);letter-spacing:-.02em;color:#fff}
.carpet__reveal{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:12px;padding:clamp(20px,2.4vw,30px);background:linear-gradient(180deg,rgba(70,50,160,.32),rgba(24,18,38,.92));opacity:0;transform:translateY(14px);transition:opacity .45s var(--e-out),transform .45s var(--e-out)}
.carpet:hover .carpet__reveal{opacity:1;transform:none}
.carpet:hover .carpet__meta{opacity:0}
.carpet__tag{font-family:var(--ff-serif);font-style:italic;font-size:clamp(1.25rem,2vw,1.8rem);color:#fff;line-height:1.2}
.carpet__stat{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(124,104,224,.4);border:1px solid rgba(207,198,230,.5);border-radius:100px;padding:6px 12px}
.carpet__open{margin-top:auto;font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lav)}
.carpet:hover .carpet__card{box-shadow:0 56px 100px -44px rgba(45,35,80,.7)}
.carpet:hover .carpet__shadow{transform:scale(1.12) translateY(8px);opacity:.7}

/* =======================================================
   PINNED CINEMATIC SHOWCASE  (deep plum)
   ======================================================= */
.showcase{position:relative;background:linear-gradient(160deg,var(--bone-3),var(--bone));color:var(--txt-on-bone)}
.showcase__pin{height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.showcase__head{padding:0 var(--pad);max-width:var(--wide);margin-inline:auto;width:100%;margin-bottom:clamp(20px,3vh,40px)}
.showcase__head .eyebrow{color:var(--ember-soft)}
.showcase__track{display:flex;align-items:center;gap:clamp(24px,4vw,80px);padding-inline:var(--pad);will-change:transform}
.show-intro{flex:0 0 auto;width:min(80vw,640px)}
.show-intro__t{font-family:var(--ff-display);font-weight:800;font-size:clamp(2.2rem,6vw,5rem);line-height:.96;letter-spacing:-.035em;color:var(--txt-on-bone);position:relative}
.show-intro__hint{display:block;margin-top:20px;font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ember-soft)}
.show-panel{flex:0 0 auto;width:min(86vw,920px);display:grid;grid-template-columns:1.2fr .9fr;gap:clamp(20px,3vw,48px);align-items:center}
@media(max-width:760px){.show-panel{grid-template-columns:1fr;width:80vw}}
.show-panel__img{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:var(--bone-2);box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.show-panel__img img{width:100%;height:100%;object-fit:cover}
.show-panel__n{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.16em;color:var(--ember-soft)}
.show-panel__name{font-family:var(--ff-display);font-weight:800;font-size:clamp(2rem,4vw,3.4rem);line-height:.96;letter-spacing:-.03em;color:var(--txt-on-bone);margin:10px 0 8px}
.show-panel__cat{color:var(--txt-on-bone-dim);font-size:1rem;margin-bottom:18px;max-width:36ch}
.show-panel__stat{display:inline-flex;flex-direction:column;margin-bottom:20px}
.show-panel__stat b{font-family:var(--ff-display);font-weight:800;font-size:clamp(1.8rem,3vw,2.6rem);color:var(--ember-soft);line-height:1}
.show-panel__stat span{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-on-bone-dim);margin-top:4px}
.showcase .link-arrow{color:var(--ember-soft)}

/* =======================================================
   STACK GAME  (near-white raised stage)
   ======================================================= */
.kplay{position:relative;background:var(--ink);overflow:hidden;padding-block:clamp(60px,8vw,116px)}
.kplay__head{position:relative;z-index:3;text-align:center;max-width:720px;margin:0 auto;padding-inline:var(--pad);pointer-events:none}
.kplay__title{font-family:var(--ff-display);font-weight:800;font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:.98;letter-spacing:-.03em;color:var(--txt-on-ink)}
.kplay__title em{font-family:var(--ff-serif);font-style:italic;font-weight:400;color:var(--ember)}
.kplay__sub{margin-top:14px;color:var(--haze);font-size:1rem;max-width:52ch;margin-inline:auto}
.kplay__stage{position:relative;margin:clamp(28px,4vw,46px) auto 0;width:min(1100px,92vw);height:clamp(420px,56vh,560px);border-radius:var(--r-lg);background:radial-gradient(120% 80% at 50% 0%,rgba(91,71,196,.08),transparent 60%),var(--ink-2);border:1px solid var(--line-on-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 40px 80px -50px rgba(45,35,80,.6);overflow:hidden}
.kplay__field{position:absolute;inset:0;z-index:2}
.kchip{position:absolute;top:0;left:0;pointer-events:auto;cursor:grab;user-select:none;font-family:var(--ff-display);font-weight:700;font-size:clamp(.95rem,2vw,1.55rem);letter-spacing:-.02em;padding:.44em .84em;border-radius:100px;white-space:nowrap;will-change:transform;touch-action:none;background:#fff;color:var(--txt-on-ink);border:1.5px solid rgba(33,26,56,.12);box-shadow:0 10px 22px -12px rgba(45,35,80,.45);transition:background .2s,color .2s,border-color .2s}
.kchip--em{background:var(--ember);color:#fff;border-color:var(--ember)}
.kchip--saff{background:var(--lav);color:#221A38;border-color:var(--lav)}
.kchip--teal{background:var(--mist);color:#221A38;border-color:rgba(33,26,56,.1)}
.kchip.grabbing{cursor:grabbing;z-index:60;box-shadow:0 18px 38px -12px rgba(45,35,80,.55);outline:2px solid var(--ember);outline-offset:2px}
.kchip.pop{animation:chipPop .32s var(--e-out)}
@keyframes chipPop{40%{filter:brightness(1.12)}100%{filter:none}}
.kchip.banked{opacity:0;pointer-events:none;transition:opacity .25s}
.kbasket{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:3;width:min(440px,82%);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:1.5px dashed var(--ember);border-radius:18px;padding:14px 18px 16px;box-shadow:0 22px 46px -26px rgba(91,71,196,.55);transition:transform .25s var(--e-out),box-shadow .25s,border-color .25s}
.kbasket.over{transform:translateX(-50%) translateY(-4px) scale(1.02);box-shadow:0 30px 60px -24px rgba(91,71,196,.75);border-color:var(--clay)}
.kbasket__lip{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ember);text-align:center;margin-bottom:10px}
.kbasket__meter{height:9px;border-radius:9px;background:var(--ink-3);overflow:hidden}
.kbasket__meter span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ember),var(--ember-soft));transition:width .5s var(--e-out)}
.kbasket__row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.kbasket__count{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.06em;color:var(--txt-on-ink-dim)}
.kbasket__count b{color:var(--ember);font-size:1rem}
.kbasket__reset{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-on-ink-dim);border:1px solid var(--line-on-ink);border-radius:100px;padding:6px 12px;transition:all .25s}
.kbasket__reset:hover{color:var(--ember);border-color:var(--ember)}
.kbasket__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;justify-content:center;min-height:4px}
.kbasket__tags span{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--ember);border-radius:100px;padding:4px 9px;animation:popIn .3s var(--e-out)}
@keyframes popIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.kplay__result{position:relative;z-index:3;text-align:center;max-width:540px;margin:clamp(30px,4vw,46px) auto 0;padding-inline:var(--pad);opacity:0;transform:translateY(16px);transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
.kplay__result.show{opacity:1;transform:none}
.kplay__result h3{font-family:var(--ff-display);font-weight:800;font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.02em;color:var(--txt-on-ink);margin-bottom:10px}
.kplay__result p{color:var(--haze);margin-bottom:20px}

/* =======================================================
   KINETIC CTA  (deep plum finish)
   ======================================================= */
.kcta{position:relative;overflow:hidden;background:radial-gradient(120% 100% at 50% 0%,var(--bone-3),var(--bone) 70%);text-align:center;padding-block:clamp(94px,14vw,210px);color:var(--txt-on-bone)}
.kcta__glow{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:80vw;height:80vw;max-width:780px;max-height:780px;z-index:0;background:radial-gradient(circle,rgba(124,104,224,.30),rgba(207,198,230,.06) 44%,transparent 68%);filter:blur(40px)}
.kcta__inner{position:relative;z-index:2;max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad)}
.kcta__big{font-family:var(--ff-display);font-weight:800;font-size:clamp(3rem,13vw,12rem);line-height:.82;letter-spacing:-.045em;color:var(--txt-on-bone)}
.kcta__big .ch{display:inline-block;will-change:transform}
.kcta__big em{font-family:var(--ff-serif);font-style:italic;font-weight:400;color:var(--ember-soft)}
.kcta__sub{max-width:48ch;margin:26px auto 36px;color:var(--txt-on-bone-dim);font-size:clamp(1.05rem,1.5vw,1.3rem)}
.kcta__mail{display:block;margin-top:26px;font-family:var(--ff-mono);font-size:.8rem;letter-spacing:.1em;color:var(--txt-on-bone-dim)}
.kcta__mail:hover{color:var(--ember-soft)}

.kdo--bubbles::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(38% 50% at 78% 42%, rgba(91,71,196,.20), transparent 65%),
    radial-gradient(30% 40% at 90% 68%, rgba(196,71,154,.14), transparent 65%),
    radial-gradient(34% 42% at 62% 78%, rgba(46,158,110,.10), transparent 65%),
    radial-gradient(26% 36% at 85% 20%, rgba(196,138,46,.10), transparent 65%);
  filter:blur(50px);
}

.bfield-wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:clamp(20px,3vw,60px);max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad);align-items:stretch;margin-top:clamp(24px,3vw,44px)}
@media (max-width:900px){ .bfield-wrap{grid-template-columns:1fr} }

.bfield-list{display:flex;flex-direction:column;border-top:1px solid var(--line-on-ink)}
.bfield-list li{list-style:none}
.bfield-list__item{width:100%;text-align:left;display:flex;align-items:flex-start;gap:16px;padding:clamp(18px,2vw,26px) 4px;border-bottom:1px solid var(--line-on-ink);background:transparent;cursor:pointer;transition:padding-left .4s var(--e-out)}
.bfield-list__item:hover,.bfield-list__item.is-active{padding-left:14px}
.bfield-list__n{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.1em;color:var(--haze-dim);padding-top:4px;flex-shrink:0;transition:color .3s}
.bfield-list__text{display:flex;flex-direction:column;gap:6px}
.bfield-list__name{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.15rem,1.8vw,1.5rem);letter-spacing:-.02em;color:var(--txt-on-ink);transition:color .35s var(--e-out)}
.bfield-list__desc{font-size:.88rem;line-height:1.5;color:var(--haze);max-width:34ch;opacity:0;max-height:0;overflow:hidden;transition:opacity .35s var(--e-out),max-height .35s var(--e-out),margin-top .35s}
.bfield-list__item:hover .bfield-list__name,.bfield-list__item.is-active .bfield-list__name{color:var(--ember)}
.bfield-list__item:hover .bfield-list__n,.bfield-list__item.is-active .bfield-list__n{color:var(--ember-soft)}
.bfield-list__item:hover .bfield-list__desc,.bfield-list__item.is-active .bfield-list__desc{opacity:1;max-height:80px;margin-top:2px}

.bfield{position:relative;z-index:2;width:100%;height:clamp(460px,64vh,640px)}
@media (max-width:900px){ .bfield{height:clamp(380px,60vh,500px);margin-top:10px} }

.bubble{position:absolute;top:0;left:0;width:var(--size,150px);height:var(--size,150px);border-radius:50%;text-decoration:none;color:#fff;will-change:transform;transform:translate(-999px,-999px)}
.bubble__glass{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:0;
  background:
    radial-gradient(42% 34% at 30% 22%, rgba(255,255,255,.65), rgba(255,255,255,0) 58%),
    radial-gradient(80% 80% at 68% 74%, color-mix(in srgb, var(--accent) 78%, transparent), transparent 74%),
    color-mix(in srgb, var(--accent) 40%, #17102a);
  box-shadow:
    inset 0 0 24px rgba(255,255,255,.2),
    inset -10px -14px 28px rgba(10,6,20,.45),
    inset 8px 10px 22px rgba(255,255,255,.16),
    0 18px 44px -16px color-mix(in srgb, var(--accent) 45%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 40%, rgba(255,255,255,.25));
  transition:box-shadow .45s var(--e-out), background .45s var(--e-out);
}
.bubble__spec{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(120% 60% at 28% 14%, rgba(255,255,255,.5), transparent 42%);mix-blend-mode:screen}
.bubble__idle{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;gap:8px;opacity:1;transform:scale(1);transition:opacity .35s var(--e-out), transform .35s var(--e-out)}
.bubble__idle-icon{font-size:clamp(1.2rem,calc(var(--size,150px) * .17),2rem);color:color-mix(in srgb, var(--accent) 70%, #fff);text-shadow:0 2px 14px rgba(0,0,0,.4)}
.bubble__idle-verb{font-family:var(--ff-display);font-weight:800;letter-spacing:-.02em;font-size:clamp(.82rem,calc(var(--size,150px) * .1),1.15rem);color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.bubble__content{position:absolute;inset:0;z-index:3;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:13%;opacity:0;transform:scale(.85);pointer-events:none;transition:opacity .45s var(--e-out) .08s, transform .45s var(--e-out) .08s}
.bubble__content-icon{font-size:clamp(1.6rem,calc(var(--size,260px) * .12),2.6rem);color:color-mix(in srgb, var(--accent) 65%, #fff);margin-bottom:10px;text-shadow:0 4px 20px rgba(0,0,0,.35)}
.bubble__content-n{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.2em;color:color-mix(in srgb, var(--accent) 80%, #fff);margin-bottom:12px}
.bubble__content-name{font-family:var(--ff-display);font-weight:800;letter-spacing:-.02em;font-size:clamp(1.05rem,calc(var(--size,260px) * .09),1.6rem);line-height:1.08;color:#fff;margin-bottom:12px;text-shadow:0 4px 20px rgba(0,0,0,.4)}
.bubble__content-desc{font-size:clamp(.7rem,calc(var(--size,260px) * .048),.88rem);line-height:1.5;color:rgba(255,255,255,.82);max-width:86%;margin-bottom:14px}
.bubble__content-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.bubble__content-tags i{font-family:var(--ff-mono);font-style:normal;font-size:clamp(.5rem,calc(var(--size,260px) * .032),.62rem);letter-spacing:.05em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);border-radius:100px;padding:3px 9px}
.bubble.is-hero{z-index:50}
.bubble.is-hero .bubble__idle{opacity:0;transform:scale(.8)}
.bubble.is-hero .bubble__content{opacity:1;transform:scale(1);pointer-events:auto}
.bubble.is-hero .bubble__glass{
  box-shadow:
    inset 0 0 30px rgba(255,255,255,.18),
    inset -10px -14px 30px rgba(10,6,20,.45),
    inset 8px 10px 24px rgba(255,255,255,.14),
    0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent),
    0 34px 80px -22px color-mix(in srgb, var(--accent) 55%, transparent);
  background:
    radial-gradient(46% 38% at 30% 24%, rgba(255,255,255,.6), rgba(255,255,255,0) 60%),
    radial-gradient(80% 80% at 68% 74%, color-mix(in srgb, var(--accent) 65%, transparent), transparent 72%),
    color-mix(in srgb, var(--accent) 22%, #1c1630);
}
@media (prefers-reduced-motion:reduce){ .bubble__idle,.bubble__content,.bubble__glass{transition:none} }

.drive-scene{background:linear-gradient(160deg, #120b22 0%, #0d0818 60%, #0a0614 100%);padding-block:clamp(70px,9vw,120px);position:relative;overflow:hidden}
.ds-head{max-width:640px;margin-bottom:clamp(30px,4vw,48px)}
.ds-title{font-family:var(--ff-display);font-weight:800;font-size:clamp(2rem,4.4vw,3.6rem);line-height:1;letter-spacing:-.03em;color:rgba(255,255,255,.92);margin:12px 0 10px}
.ds-title em{font-family:var(--ff-serif);font-style:italic;font-weight:400;color:var(--gold-soft,#E8D49A)}
.ds-sub{color:rgba(255,255,255,.45);font-size:1.02rem}
.drive-scene .eyebrow{color:rgba(212,180,90,.6)}
.ds-wrap{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:clamp(20px,3vw,50px);max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad)}
@media (max-width:900px){ .ds-wrap{grid-template-columns:1fr} }
.ds-list{display:flex;flex-direction:column;border-top:1px solid rgba(212,180,90,.14)}
.ds-list li{list-style:none}
.ds-list__item{width:100%;text-align:left;display:flex;align-items:center;gap:16px;padding:clamp(16px,1.8vw,22px) 4px;border-bottom:1px solid rgba(212,180,90,.14);background:transparent;cursor:pointer;transition:padding-left .3s var(--e-out)}
.ds-list__item:hover{padding-left:10px}
.ds-list__n{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.1em;color:color-mix(in srgb, var(--accent) 70%, rgba(255,255,255,.4));flex-shrink:0}
.ds-list__name{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.05rem,1.6vw,1.35rem);letter-spacing:-.02em;color:rgba(255,255,255,.55);transition:color .3s var(--e-out)}
.ds-list__item:hover .ds-list__name,.ds-list__item.is-active .ds-list__name{color:#fff}
.ds-list__item.is-active{padding-left:10px}
.ds-list__item.is-active .ds-list__n{color:var(--gold,#D4B45A)}
.ds-list__item.is-active::before{content:"";position:absolute;left:-4px;top:50%;transform:translateY(-50%);width:3px;height:60%;border-radius:3px;background:var(--accent)}
.ds-scene{position:relative;border-radius:24px;overflow:hidden;border:1px solid rgba(212,180,90,.18);box-shadow:0 30px 70px -30px rgba(0,0,0,.6);aspect-ratio:5/3}
.ds-scene svg{display:block;width:100%;height:100%}

.stair-scene{background:linear-gradient(160deg, #120b22 0%, #0d0818 60%, #0a0614 100%);padding-block:clamp(70px,9vw,120px);position:relative;overflow:hidden}
.ss-head{max-width:640px;margin-bottom:clamp(30px,4vw,48px)}
.ss-title{font-family:var(--ff-display);font-weight:800;font-size:clamp(2rem,4.4vw,3.6rem);line-height:1;letter-spacing:-.03em;color:rgba(255,255,255,.92);margin:12px 0 10px}
.ss-title em{font-family:var(--ff-serif);font-style:italic;font-weight:400;color:#E8D49A}
.ss-sub{color:rgba(255,255,255,.45);font-size:1.02rem}
.stair-scene .eyebrow{color:rgba(212,180,90,.6)}
.ss-wrap{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:clamp(20px,3vw,50px);max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad)}
@media (max-width:900px){ .ss-wrap{grid-template-columns:1fr} }
.ss-list{display:flex;flex-direction:column;border-top:1px solid rgba(212,180,90,.14)}
.ss-list li{list-style:none}
.ss-list__item{width:100%;text-align:left;display:flex;align-items:center;gap:14px;padding:clamp(15px,1.7vw,20px) 4px;border-bottom:1px solid rgba(212,180,90,.14);background:transparent;cursor:pointer;transition:padding-left .3s var(--e-out)}
.ss-list__item:hover{padding-left:10px}
.ss-list__n{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.1em;color:color-mix(in srgb, var(--accent) 70%, rgba(255,255,255,.4));flex-shrink:0}
.ss-list__name{flex:1;font-family:var(--ff-display);font-weight:700;font-size:clamp(1.02rem,1.5vw,1.3rem);letter-spacing:-.02em;color:rgba(255,255,255,.55);transition:color .3s var(--e-out)}
.ss-list__lock{font-size:.9rem;opacity:.5;transition:opacity .3s, transform .3s}
.ss-list__item:hover .ss-list__name{color:#fff}
.ss-list__item.is-unlocked .ss-list__name{color:#fff}
.ss-list__item.is-unlocked .ss-list__lock{opacity:0;transform:scale(0)}
.ss-list__item.is-current::before{content:"";position:absolute;left:-4px;top:50%;transform:translateY(-50%);width:3px;height:60%;border-radius:3px;background:var(--accent)}

.ss-stage{position:relative;border-radius:24px;overflow:hidden;border:1px solid rgba(120,180,200,.25);box-shadow:0 30px 70px -30px rgba(0,0,0,.6);aspect-ratio:14/9;background:linear-gradient(180deg, #0d2a3a 0%, #0a1f2e 45%, #061420 100%)}
.ss-ocean,.ss-wave-layer,.ss-wave-layer.ss-wave-2{display:none !important}
.ss-caustics{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(3% 4% at 20% 30%, rgba(220,245,250,.1), transparent 70%),
    radial-gradient(4% 3% at 60% 55%, rgba(220,245,250,.08), transparent 70%),
    radial-gradient(3% 3% at 80% 25%, rgba(220,245,250,.07), transparent 70%),
    radial-gradient(4% 4% at 40% 70%, rgba(220,245,250,.09), transparent 70%);
  animation:ssCausticsShift 6s ease-in-out infinite alternate;
  mix-blend-mode:screen;
}
@keyframes ssCausticsShift{ from{transform:translate(0,0) scale(1)} to{transform:translate(12px,-8px) scale(1.04)} }

.ss-perspective{position:absolute;inset:0;z-index:2;perspective:1600px;display:flex;align-items:center;justify-content:center}
.ss-tilt{position:relative;width:1px;height:1px;transform:rotateX(56deg) rotateZ(-8deg) scale(1.4);transform-style:preserve-3d;animation:ssBoardBreathe 8s ease-in-out infinite}
@keyframes ssBoardBreathe{0%,100%{transform:rotateX(56deg) rotateZ(-8deg) scale(1.4)}50%{transform:rotateX(55deg) rotateZ(-7.4deg) scale(1.41)}}
.ss-camera{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.ss-path{position:absolute;height:3px;border-radius:3px;transform-origin:0 50%;background:rgba(120,180,200,.08);transition:background .5s, box-shadow .5s}
.ss-path.is-walked{background:rgba(200,230,240,.35);box-shadow:0 0 10px rgba(200,230,240,.3)}

.ss-node{position:absolute;width:80px;height:80px;transform-style:preserve-3d;margin-left:-40px;margin-top:-40px;z-index:var(--zi);cursor:pointer}
.ss-node__ring{position:absolute;inset:-10px;border-radius:50%;border:1px solid transparent;transition:border-color .5s}
.ss-node.is-unlocked .ss-node__ring{border-color:color-mix(in srgb, var(--accent) 40%, transparent)}
.ss-node__base{position:absolute;inset:6px;border-radius:48% 52% 45% 55% / 55% 48% 52% 45%;background:#1a2e33;box-shadow:0 0 0 1px rgba(0,0,0,.3);transform:translateZ(-10px)}
.ss-node__top{
  position:relative;inset:2px;border-radius:46% 54% 50% 50% / 52% 46% 54% 48%;
  background:radial-gradient(120% 100% at 30% 20%, rgba(255,255,255,.18), transparent 55%),linear-gradient(160deg, #6b7d6f 0%, #4a5a4e 55%, #35423a 100%);
  border:1px solid rgba(180,220,170,.4);
  box-shadow:inset 0 3px 6px rgba(255,255,255,.2),inset 0 -8px 14px rgba(0,0,0,.35),0 0 24px rgba(0,0,0,.4),0 18px 26px -12px rgba(0,0,0,.5);
  transition:background .5s, border-color .5s, box-shadow .5s;
}
.ss-node__top::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:
    radial-gradient(3px 3px at 25% 30%, rgba(90,140,80,.5), transparent 60%),
    radial-gradient(4px 4px at 65% 20%, rgba(90,140,80,.4), transparent 60%),
    radial-gradient(3px 3px at 45% 65%, rgba(90,140,80,.45), transparent 60%),
    radial-gradient(2px 2px at 75% 60%, rgba(90,140,80,.4), transparent 60%);
}
.ss-node__top::after{content:"";position:absolute;inset:-4px;border-radius:inherit;box-shadow:0 0 0 3px rgba(120,200,220,.15);pointer-events:none}
.ss-node.is-unlocked .ss-node__top{
  background:radial-gradient(120% 100% at 30% 20%, rgba(255,255,255,.2), transparent 55%),linear-gradient(160deg, color-mix(in srgb, var(--accent) 45%, #5a6b5f), color-mix(in srgb, var(--accent) 30%, #3d4a40));
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:inset 0 3px 8px rgba(255,255,255,.25),0 0 30px color-mix(in srgb, var(--accent) 45%, transparent),0 18px 26px -12px rgba(0,0,0,.55);
}
.ss-node__flag{position:absolute;top:-22px;left:50%;transform:translateX(-50%) scale(0);font-size:1.15rem;transition:transform .4s cubic-bezier(.34,1.6,.64,1)}
.ss-node.is-unlocked .ss-node__flag{transform:translateX(-50%) scale(1);animation:ssFlagWave 2.4s ease-in-out infinite}
@keyframes ssFlagWave{0%,100%{transform:translateX(-50%) rotate(0deg)}50%{transform:translateX(-50%) rotate(6deg)}}
.ss-node__label{position:absolute;bottom:-28px;left:50%;transform:translateX(-50%) rotateX(-56deg);white-space:nowrap;font-family:var(--ff-display);font-weight:800;font-size:.74rem;color:rgba(220,240,245,.5);letter-spacing:-.01em;transition:color .5s;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.ss-node.is-unlocked .ss-node__label{color:#fff}
.ss-node:hover .ss-node__top,.ss-node:focus-visible .ss-node__top{filter:brightness(1.12)}
.ss-node:focus-visible{outline:2px solid #E8D49A;outline-offset:6px;border-radius:50%}
@media (hover:none){ .ss-node{width:96px;height:96px;margin-left:-48px;margin-top:-48px} }

.ss-char{position:absolute;left:0;top:0;width:34px;height:34px;margin-left:-17px;margin-top:-17px;transform-style:preserve-3d;will-change:transform;z-index:999}
.ss-char__shadow{position:absolute;left:-8px;top:24px;width:48px;height:14px;border-radius:50%;background:rgba(0,0,0,.42);filter:blur(2px);transform:translateZ(-70px)}
.ss-char__body{
  position:absolute;left:3px;top:2px;width:28px;height:30px;border-radius:52% 52% 46% 46%;
  background:linear-gradient(160deg, #F0DFAE 0%, #E8D49A 45%, #D4B45A 100%);
  box-shadow:0 8px 18px rgba(0,0,0,.4), inset 0 3px 6px rgba(255,255,255,.5), inset 0 -6px 10px rgba(180,140,60,.35);
  transform:translateZ(6px);transform-origin:50% 100%;animation:ssBreathe 2.6s ease-in-out infinite;
}
@keyframes ssBreathe{0%,100%{transform:translateZ(6px) scale(1,1)}50%{transform:translateZ(6px) scale(1.03,.97)}}
.ss-char__face{position:absolute;left:4px;top:9px;width:20px;height:14px}
.ss-char__eyeL,.ss-char__eyeR{position:absolute;top:0;width:5px;height:6px;border-radius:50%;background:#1c1428;animation:ssBlink 4.4s ease-in-out infinite}
.ss-char__eyeL{left:2px}
.ss-char__eyeR{left:12px}
@keyframes ssBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.ss-char__mouth{position:absolute;left:6px;top:8px;width:8px;height:4px;border-radius:0 0 8px 8px;background:#1c1428;opacity:.7}
.ss-char__armL,.ss-char__armR{position:absolute;top:8px;width:6px;height:16px;border-radius:4px;background:linear-gradient(160deg, #E8D49A, #D4B45A);box-shadow:inset 0 2px 4px rgba(255,255,255,.35);transform-origin:50% 0%;transform:translateZ(4px) rotate(0deg);transition:transform .18s ease}
.ss-char__armL{left:-2px}
.ss-char__armR{left:30px}
.ss-char__legL,.ss-char__legR{position:absolute;bottom:0;width:7px;height:12px;border-radius:3px;background:#2a2440;transform-origin:50% 0%;transform:translateZ(4px) rotate(0deg);transition:transform .16s ease}
.ss-char__legL{left:8px}
.ss-char__legR{left:19px}
.ss-char__cape{position:absolute;left:6px;top:6px;width:22px;height:20px;background:linear-gradient(180deg, rgba(196,79,142,.9), rgba(140,79,196,.7));clip-path:polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);transform:translateZ(-2px) rotate(0deg);transform-origin:50% 0%;opacity:.9;transition:transform .3s ease;filter:blur(.2px)}
.ss-char.is-walking .ss-char__armL{animation:ssArmSwingL .32s ease-in-out infinite}
.ss-char.is-walking .ss-char__armR{animation:ssArmSwingR .32s ease-in-out infinite}
.ss-char.is-walking .ss-char__legL{animation:ssLegSwingL .32s ease-in-out infinite}
.ss-char.is-walking .ss-char__legR{animation:ssLegSwingR .32s ease-in-out infinite}
.ss-char.is-walking .ss-char__cape{transform:translateZ(-2px) rotate(18deg) skewX(-6deg)}
@keyframes ssArmSwingL{0%,100%{transform:translateZ(4px) rotate(-35deg)}50%{transform:translateZ(4px) rotate(35deg)}}
@keyframes ssArmSwingR{0%,100%{transform:translateZ(4px) rotate(35deg)}50%{transform:translateZ(4px) rotate(-35deg)}}
@keyframes ssLegSwingL{0%,100%{transform:translateZ(4px) rotate(-28deg)}50%{transform:translateZ(4px) rotate(28deg)}}
@keyframes ssLegSwingR{0%,100%{transform:translateZ(4px) rotate(28deg)}50%{transform:translateZ(4px) rotate(-28deg)}}
.ss-char.is-facing-left .ss-char__body,.ss-char.is-facing-left .ss-char__face,.ss-char.is-facing-left .ss-char__cape{transform:scaleX(-1) translateZ(6px)}

.ss-ripple{position:absolute;width:50px;height:50px;margin-left:-25px;margin-top:-25px;border-radius:50%;border:2px solid rgba(210,235,240,.6);pointer-events:none;z-index:997;transform:translate(-50%,-50%) scale(0)}
.ss-flash{position:absolute;width:40px;height:40px;margin-left:-20px;margin-top:-20px;border-radius:50%;background:radial-gradient(circle, rgba(232,212,154,.9), rgba(232,212,154,0) 70%);pointer-events:none;z-index:998;transform:translate(-50%,-50%) scale(0)}
.ss-confetti{position:absolute;width:6px;height:9px;pointer-events:none;z-index:1000;border-radius:1px}
.ss-spark{position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:1000}

.ss-progress{position:absolute;top:16px;left:16px;right:16px;z-index:30;height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.ss-progress span{display:block;height:100%;width:0%;border-radius:6px;background:linear-gradient(90deg,#D4B45A,#E8D49A);transition:width .6s}
.ss-toast{position:absolute;top:34px;left:50%;z-index:31;transform:translate(-50%,-16px);display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:100px;background:rgba(13,8,24,.92);border:1px solid rgba(212,180,90,.4);box-shadow:0 12px 30px -10px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .35s, transform .35s;white-space:nowrap}
.ss-toast.is-visible{opacity:1;transform:translate(-50%,0)}
.ss-toast__badge{width:20px;height:20px;border-radius:50%;background:#D4B45A;color:#0d0818;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;flex-shrink:0}
.ss-toast__text{font-family:var(--ff-display);font-weight:700;font-size:.88rem;color:#fff}

@media (prefers-reduced-motion:reduce){
  .ss-tilt,.ss-char__body,.ss-char__eyeL,.ss-char__eyeR,.ss-node.is-unlocked .ss-node__flag,
  .ss-char.is-walking .ss-char__armL,.ss-char.is-walking .ss-char__armR,
  .ss-char.is-walking .ss-char__legL,.ss-char.is-walking .ss-char__legR{animation:none}
}

.ss-bg-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.15) contrast(1.05) brightness(.85)}
.ss-video-grade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg, rgba(6,20,32,.12) 0%, transparent 35%, rgba(6,20,32,.28) 100%)}

/* ============================================================
   HERO · SCROLL-ZOOM THROUGH THE TBL GAP — BASE RULES
   (restored — these were missing, which is why the hero had
   no sticky pin, no sizing, and rendered blank)
   ============================================================ */
.pz{
  position:relative;height:300vh;
  background:radial-gradient(120% 90% at 50% 38%, var(--bone-3) 0%, var(--bone-2) 45%, var(--ink) 100%);
}
@media (max-width:680px){ .pz{height:240vh} }

.pz__pin{position:sticky;top:0;height:100svh;overflow:hidden}
.pz__stage{position:absolute;inset:0;transform-origin:50% 48%;will-change:transform}
.pz__veil{position:absolute;inset:0;z-index:3;width:100%;height:100%;display:block;pointer-events:none}

.pz__copy{position:absolute;left:0;right:0;bottom:clamp(40px,8vh,90px);z-index:4;text-align:center;padding-inline:var(--pad);will-change:opacity,transform}
.pz__eyebrow{justify-content:center;display:inline-flex}
.pz__hint{margin-top:16px;font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--haze);display:flex;align-items:center;justify-content:center;gap:12px}
.pz__hint-arrow{color:var(--ember);animation:bobDown 1.6s var(--e-inout) infinite}
@keyframes bobDown{0%,100%{transform:translateY(-2px)}50%{transform:translateY(5px)}}

.pz__reel{position:absolute;inset:0;z-index:1;overflow:hidden;background:var(--bone-3)}
.pz__reel video{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.06) brightness(.92)}
.pz__reel-grade{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(160deg, rgba(33,26,56,.35), rgba(91,71,196,.12) 45%, rgba(20,14,38,.55) 100%);
  mix-blend-mode:multiply;
}

.pz__reel-text{
  position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding-inline:var(--pad);pointer-events:none;opacity:0;transform:translateY(24px);
}
.pz__reel-eyebrow{color:var(--saffron)}
.pz__reel-line{
  margin-top:16px;font-family:var(--ff-display);font-weight:700;
  font-size:clamp(1.6rem,3.6vw,3rem);color:#fff;max-width:20ch;
  text-shadow:0 4px 28px rgba(0,0,0,.55);
}
.pz__reel-line em{font-family:var(--ff-serif);font-style:italic;font-weight:400;color:var(--saffron)}
.pz__reel-line .ch,.pz__reel-eyebrow .ch{display:inline-block;will-change:transform;cursor:default}

@media (prefers-reduced-motion:reduce){
  .pz{height:auto}
  .pz__pin{position:relative;height:100svh}
  .pz__hint-arrow{animation:none}
}

/* ============================================================
   HOMEPAGE — FULL MOBILE RESPONSIVE PASS
   ============================================================ */
@media (max-width: 900px) {
  .pz{ height:260vh; }
  .pz__reel-eyebrow{ font-size:.62rem; letter-spacing:.14em; }
  .pz__reel-line{ font-size:clamp(1.3rem,6vw,2rem); max-width:88vw; }
  .pz__copy{ padding-inline:24px; }
  .pz__hint{ font-size:.62rem; }
  .statband{ padding-block:56px; }
  .statband__lead{ font-size:clamp(1.3rem,5vw,1.8rem); }
  .statband__grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .statband__item{ padding:16px; }
  .statband__glyph{ font-size:1.1rem; margin-bottom:8px; }
  .bfield-wrap{ grid-template-columns:1fr; gap:24px; }
  .bfield{ height:clamp(360px,58vh,460px); order:-1; }
  .bfield-list{ border-top:1px solid rgba(212,180,90,.14); }
  .bfield-list__item{ padding:14px 4px; }
  .bfield-list__name{ font-size:1rem; }
  .bfield-list__desc{ font-size:.82rem; max-width:100%; }
  .carpets__field{ grid-template-columns:1fr; gap:28px; }
  .carpet:nth-child(even),.carpet:nth-child(3n){ margin-top:0; }
  .carpets__title{ font-size:clamp(1.8rem,7vw,2.6rem); }
  .carpets__sub{ font-size:.94rem; }
  .showcase__track{ gap:20px; }
  .show-intro{ width:80vw; }
  .show-intro__t{ font-size:clamp(1.6rem,7vw,2.4rem); }
  .show-panel{ width:88vw; grid-template-columns:1fr; gap:16px; }
  .show-panel__name{ font-size:clamp(1.5rem,6vw,2.2rem); }
  .show-panel__cat{ font-size:.86rem; }
  .kplay__stage{ width:94vw; height:clamp(380px,60vh,480px); }
  .kbasket{ width:92%; padding:12px 14px 14px; }
  .kchip{ font-size:clamp(.82rem,3vw,1.1rem); padding:.36em .7em; }
  .kplay__title{ font-size:clamp(1.6rem,6vw,2.2rem); }
  .kplay__sub{ font-size:.9rem; padding-inline:20px; }
  .ss-wrap{ grid-template-columns:1fr; gap:20px; }
  .ss-stage{ aspect-ratio:4/5; order:-1; }
  .ss-tilt{ transform:rotateX(56deg) rotateZ(-8deg) scale(1); }
  .ss-list{ border-top:1px solid rgba(212,180,90,.14); }
  .ss-list__item{ padding:12px 4px; }
  .ss-list__name{ font-size:.98rem; }
  .ss-title{ font-size:clamp(1.7rem,6.5vw,2.4rem); }
  .ss-sub{ font-size:.9rem; }
  .ss-toast{ top:20px; padding:8px 14px; }
  .ss-toast__text{ font-size:.78rem; }
  .kcta{ padding-block:70px; }
  .kcta__big{ font-size:clamp(2.4rem,13vw,4.5rem); }
  .kcta__sub{ font-size:.94rem; padding-inline:20px; }
}
@media (max-width: 600px) {
  .pz{ height:220vh; }
  .pz__reel-line{ font-size:clamp(1.15rem,5.5vw,1.6rem); }
  .statband__grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .statband__item .n{ font-size:clamp(2rem,8vw,2.6rem); }
  .bfield{ height:340px; }
  .ss-list__n{ font-size:.62rem; }
  .kdo__title,.ss-title,.carpets__title{ font-size:clamp(1.5rem,7.5vw,2.1rem); }
  .kplay__stage{ height:clamp(340px,56vh,420px); }
  .ss-stage{ aspect-ratio:1/1.15; }
  .kcta__big{ font-size:clamp(2rem,12vw,3.4rem); }
}
@media (hover:none) {
  .roi-chips button,.roi-seg button,.pf-btn,.bfield-list__item,.ss-list__item{ min-height:44px; }
  .cursor,#tbCursor{ display:none !important; }
  body{ cursor:auto !important; }
}
@media (max-width: 900px) {
  html, body{ overflow-x:hidden; max-width:100vw; }
  .bfield, .ss-stage, .kplay__stage{ max-width:100%; }
}
@media (max-width: 700px) {
  .pz{ height:220vh; }
  .pz__veil{ background:#0d0818; }
  .pz__reel-eyebrow{ font-size:.58rem; letter-spacing:.1em; display:block; max-width:88vw; white-space:normal; line-height:1.4; }
  .pz__reel-line{ font-size:clamp(1.2rem,6.2vw,1.65rem); max-width:90vw; margin-inline:auto; line-height:1.25; }
  .pz__reel-text{ padding-inline:20px; }
}
@media (max-width: 900px) {
  .kplay__stage{ padding-top:0; overflow:hidden; }
  .kbasket{
    position:absolute; top:10px; bottom:auto; left:50%; transform:translateX(-50%);
    width:90%; max-height:78px; padding:8px 12px; background:rgba(255,255,255,.92);
    z-index:10; display:flex; flex-direction:column; justify-content:center; overflow:hidden;
  }
  .kbasket.over{ transform:translateX(-50%) translateY(-2px) scale(1.01); }
  .kbasket__lip{ font-size:.5rem; margin-bottom:3px; letter-spacing:.15em; }
  .kbasket__meter{ height:4px; }
  .kbasket__row{ margin-top:4px; }
  .kbasket__count{ font-size:.58rem; }
  .kbasket__reset{ font-size:.5rem; padding:3px 8px; }
  .kbasket__tags{ display:none; }
  .kplay__field{ position:absolute; inset:0; top:100px; }
}

/* =======================================================
   PORTFOLIO — editorial storytelling flow (spotlight cards)
   ======================================================= */
.pf-cluster{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,30px);margin-bottom:clamp(18px,2vw,30px)}
@media (max-width:900px){ .pf-cluster{grid-template-columns:1fr} }
.pf-spotlight{display:block;text-decoration:none;color:inherit;margin-bottom:clamp(24px,3vw,44px);border-radius:24px;overflow:hidden;box-shadow:0 30px 70px -34px rgba(13,13,26,.25)}
.pf-spotlight-inner{display:grid;grid-template-columns:1fr 1fr;min-height:420px}
.pf-spotlight--left .pf-spotlight-inner{ direction:ltr; }
.pf-spotlight--right .pf-spotlight-inner{ direction:rtl; }
.pf-spotlight--right .pf-spotlight-copy,.pf-spotlight--right .pf-spotlight-media{ direction:ltr; }
@media (max-width:900px){ .pf-spotlight-inner{ grid-template-columns:1fr; direction:ltr !important; min-height:auto; } }
.pf-spotlight-media{position:relative;overflow:hidden;background:var(--dark)}
.pf-spotlight-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.pf-spotlight:hover .pf-spotlight-media img{ transform:scale(1.06); }
.pf-spotlight-grad{ position:absolute;inset:0; }
@media (max-width:900px){ .pf-spotlight-media{ aspect-ratio:16/10; } }
.pf-spotlight-copy{background:var(--bg2);display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,4vw,64px);gap:14px}
.pf-spotlight-eyebrow{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.pf-spotlight-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(32px,3.6vw,52px);line-height:.95;color:var(--dark);letter-spacing:-.01em}
.pf-spotlight-story{font-family:Georgia,serif;font-style:italic;font-size:clamp(16px,1.6vw,20px);line-height:1.6;color:rgba(13,13,26,.62);max-width:46ch}
.pf-spotlight-result{display:inline-flex;align-items:center;width:fit-content;padding:7px 16px;border-radius:100px;font-family:'Space Mono',monospace;font-size:12px;font-weight:700;color:#fff;margin-top:4px}
.pf-spotlight-link{display:inline-flex;align-items:center;gap:8px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dark);margin-top:10px;transition:gap .3s ease, color .3s ease}
.pf-spotlight:hover .pf-spotlight-link{ gap:14px; color:var(--accent); }

/* ============================================================
   MOBILE POLISH v2 — hero reveal + bubble field
   This block is intentionally last so it wins over earlier,
   scattered mobile rules above.
   ============================================================ */
@media (max-width: 820px) {

  /* ---------- HERO: TBL scroll-reveal ---------- */
  /* One clean height, and the whole pinned stage matches the veil's
     cream tone so the letterboxed TBL mark blends seamlessly instead
     of floating in a mismatched dark box. */
  .pz{ height:180vh !important; background:var(--ink) !important; }
  .pz__pin{ height:100svh; background:var(--ink); }
  .pz__stage{ background:var(--ink); }
  .pz__reel{ background:var(--ink) !important; }
  .pz__veil{ width:100%; height:100%; }
  .pz__copy{ bottom:28px; padding-inline:20px; }
  .pz__eyebrow{ font-size:.6rem; letter-spacing:.14em; text-align:center; }
  .pz__hint{ font-size:.6rem; margin-top:10px; }

  .pz__reel-text{ padding-inline:22px; }
  .pz__reel-eyebrow{
    font-size:.58rem; letter-spacing:.08em; display:block;
    max-width:92vw; white-space:normal; line-height:1.4; text-align:center;
    overflow-wrap:break-word;
  }
  .pz__reel-line{
    font-size:clamp(1.15rem,6vw,1.7rem); max-width:92vw;
    margin-inline:auto; line-height:1.32; text-align:center;
    overflow-wrap:break-word;
  }

  /* ---------- SERVICE BUBBLE FIELD ---------- */
  /* The full bubble grid doesn't read well at phone width. Keep just
     one large, good-looking bubble as a visual anchor with the clean
     list below it doing the actual job of showing all six services. */
  .bfield-wrap{ grid-template-columns:1fr; gap:18px; margin-top:20px; }
  .bfield{
    height:200px; min-height:0; order:-1;
    display:flex; align-items:center; justify-content:center;
    padding:4px;
  }
  .bfield .bubble{ display:none !important; }
  .bfield .bubble:first-child{
    display:flex !important;
    position:relative !important; top:auto !important; left:auto !important;
    transform:none !important; width:180px !important; height:180px !important;
    margin-inline:auto;
  }
  .bfield-list__item{ padding:16px 4px; }
  .bfield-list__name{ font-size:1.05rem; }
  .bfield-list__desc{ font-size:.84rem; max-width:100%; }
  .bubble__idle-icon{ font-size:1.6rem; }
  .bubble__idle-verb{ font-size:1rem; }
  .bubble__content{ padding:12%; }
  .bubble__content-name{ font-size:clamp(1rem,4.5vw,1.2rem); }
  .bubble__content-desc{ font-size:.76rem; }

  /* ---------- PINNED SHOWCASE → SWIPEABLE ON MOBILE ---------- */
  /* JS swaps in .showcase__track--swipe instead of pinning/scroll-jacking,
     which feels broken on touch. This gives a natural, snappy horizontal
     swipe instead — keeps the interactivity, loses the jank. */
  .showcase__pin{ height:auto !important; padding-block:60px 40px; }
  .showcase__track--swipe{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; gap:20px; padding-inline:20px;
    scrollbar-width:none;
  }
  .showcase__track--swipe::-webkit-scrollbar{ display:none; }
  .showcase__track--swipe .show-intro,
  .showcase__track--swipe .show-panel{
    scroll-snap-align:center; flex:0 0 88vw; width:88vw;
  }
  .showcase__track--swipe .show-panel{ grid-template-columns:1fr; gap:16px; }
  .show-intro__hint{ font-size:.64rem; }

  /* ---------- CARPETS: clean stacked card layout on mobile ---------- */
  /* Hover-only reveal never triggers on touch, and the floating parallax
     wobble looks messy stacked vertically — give it a plain, solid card:
     image on top, name + details in a clean solid panel below. */
  .carpets__field{ perspective:none; }
  .carpet{ transform:none !important; }
  .carpet__shadow{ display:none; }
  .carpet__card{ display:block; box-shadow:0 20px 40px -24px rgba(45,35,80,.4); }
  .carpet__img{ aspect-ratio:4/3; }
  .carpet__meta{
    position:relative; opacity:1; pointer-events:none;
    background:var(--bone); padding:18px 20px 14px;
  }
  .carpet__reveal{
    opacity:1; transform:none; position:relative; inset:auto;
    background:var(--bone); padding:0 20px 20px;
    display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:12px;
  }
  .carpet__tag{ font-size:.95rem; flex:1; }
  .carpet__open{ margin-top:0; white-space:nowrap; }

  /* ---------- STACK GAME ---------- */
  /* Give it a smaller, self-contained stage on phones so chips spawn
     inside the visible area instead of scattering off past the
     bottom of the screen, and pin the basket where it can actually
     be reached without scrolling. */
  .kplay__stage{
    width:94vw; height:60vh; max-height:520px; margin-top:20px;
  }
  .kplay__field{ inset:0; top:96px; bottom:64px; }
  .kbasket{
    position:absolute; left:50%; top:12px; bottom:auto;
    transform:translateX(-50%); width:90%; padding:10px 14px;
  }
  .kbasket__tags{ display:none; }
  .kbasket__lip{ font-size:.6rem; margin-bottom:6px; }
  .kbasket__meter{ height:6px; }

  /* ---------- general small-screen breathing room ---------- */
  .kdo__title,.carpets__title,.ss-title{ font-size:clamp(1.6rem,7vw,2.2rem); }
  .statband__lead{ font-size:clamp(1.2rem,5.5vw,1.6rem); }
  section,.section{ padding-block:clamp(48px,9vw,84px); }
}

@media (max-width: 480px) {
  .pz__reel-line{ font-size:clamp(1.05rem,6vw,1.5rem); }
  .kplay__stage{ height:56vh; }
}

/* ============================================================
   HERO TEXT — defensive full-bleed centering (all screen sizes)
   Guards against the eyebrow/overlay text rendering flush to the
   left edge instead of centered.
   ============================================================ */
.pz__reel-text{
  width:100%; box-sizing:border-box; left:0; right:0;
  padding-inline:clamp(20px,6vw,72px);
}
.pz__reel-eyebrow{ display:block; width:100%; text-align:center; white-space:normal; }
.pz__reel-line{ width:100%; }
.pz__copy{ width:100%; box-sizing:border-box; }

@media (max-width: 700px) {
  .pz__reel-text { transform: scale(0.55); transform-origin: 50% 50%; }
}
.rope-pull{background:var(--bone);color:var(--txt-on-bone);padding-block:clamp(60px,8vw,100px);overflow:hidden}
.rope-pull__inner{max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad)}
.rope-pull__title{font-family:var(--ff-display);font-weight:800;font-size:clamp(2rem,5vw,3.6rem);line-height:.95;letter-spacing:-.03em;color:var(--txt-on-bone);margin:14px 0 40px}
.rope-pull__title em{font-family:var(--ff-serif);font-style:italic;font-weight:400;color:var(--ember-soft)}

.rope-scene{position:relative;touch-action:pan-y;cursor:grab;user-select:none}
.rope-scene:active{cursor:grabbing}
.rope-scene__stage{width:100%;height:220px;display:block}
.rope-guy circle{fill:#fff}
.rope-guy line{stroke:#fff;stroke-width:5;stroke-linecap:round}
.rope-guy .arm{transform-origin:0 20px;animation:tugArm 0.9s ease-in-out infinite}
.rope-guy:nth-child(2) .arm{animation-delay:.1s}
.rope-guy:nth-child(3) .arm{animation-delay:.2s}
@keyframes tugArm{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-10deg)}}
#ropeGuys{animation:tugLean 0.9s ease-in-out infinite}
@keyframes tugLean{0%,100%{transform:translateX(0) rotate(0deg)}50%{transform:translateX(-4px) rotate(-2deg)}}

.rope-scene__bubble{position:absolute;left:8px;top:8px;font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.06em;color:#fff;background:rgba(106,90,158,.5);border:1px solid rgba(255,255,255,.3);border-radius:100px;padding:6px 14px;animation:bubblePulse 1.6s infinite;pointer-events:none}
@keyframes bubblePulse{0%,100%{opacity:1}50%{opacity:.55}}

.brand-marquee{overflow:hidden;border-block:1px solid var(--line-on-bone);padding-block:18px;margin-top:20px}
.brand-marquee.hidden{display:none}
.mq-track{display:inline-flex;gap:0;white-space:nowrap;animation:mqScroll 20s linear infinite}
.mq-track span{padding-inline:32px;font-family:var(--ff-display);font-weight:700;font-size:1.4rem;color:var(--txt-on-bone)}
@keyframes mqScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ============================================================
   MOBILE HERO — final fix: size the veil to its own content
   aspect ratio instead of stretching it to fill the screen.
   This is what actually kills the letterbox bars — the SVG no
   longer has empty space to letterbox in the first place.
   ============================================================ */
@media (max-width: 700px) {
  .pz__veil {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    aspect-ratio: 1300 / 700; /* matches viewBox '150 100 1300 700' */
  }

  .pz__reel-text {
    transform: scale(0.55);
    transform-origin: 50% 50%;
  }
}

.rope-pull{background:var(--bone);color:var(--txt-on-bone);padding-block:clamp(60px,8vw,100px);overflow:hidden}
.rope-pull__inner{max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad)}
.rope-pull__title{font-family:var(--ff-display);font-weight:800;font-size:clamp(2rem,5vw,3.6rem);line-height:.95;letter-spacing:-.03em;color:var(--txt-on-bone);margin:14px 0 40px}
.rope-pull__title em{font-family:var(--ff-serif);font-style:italic;font-weight:400;color:var(--ember-soft)}
.rope-scene{position:relative;touch-action:pan-y}
.rope-scene__stage{width:100%;height:220px;display:block}
.rope-guy circle{fill:#fff}
.rope-guy line{stroke:#fff;stroke-width:5;stroke-linecap:round}
.rope-scene__bubble{position:absolute;left:8px;top:8px;font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.06em;color:#fff;background:rgba(106,90,158,.5);border:1px solid rgba(255,255,255,.3);border-radius:100px;padding:6px 14px;animation:bubblePulse 1.6s infinite}
@keyframes bubblePulse{0%,100%{opacity:1}50%{opacity:.55}}
.brand-marquee{overflow:hidden;border-block:1px solid var(--line-on-bone);padding-block:18px;margin-top:20px}
.brand-marquee.hidden{display:none}
.mq-track{display:inline-flex;gap:0;white-space:nowrap;animation:mqScroll 20s linear infinite}
.mq-track span{padding-inline:32px;font-family:var(--ff-display);font-weight:700;font-size:1.4rem;color:var(--txt-on-bone)}
@keyframes mqScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}


.rope-pull{background:var(--bone);color:var(--txt-on-bone);padding-block:clamp(60px,8vw,100px);overflow:hidden}
.rope-pull__inner{max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad)}
.rope-pull__title{font-family:var(--ff-display);font-weight:800;font-size:clamp(2rem,5vw,3.6rem);line-height:.95;letter-spacing:-.03em;color:var(--txt-on-bone);margin:14px 0 40px}
.rope-pull__title em{font-family:var(--ff-serif);font-style:italic;font-weight:400;color:var(--ember-soft)}

.rope-scene{position:relative;touch-action:none;cursor:grab;user-select:none}
.rope-scene:active{cursor:grabbing}
.rope-scene__stage{width:100%;height:220px;display:block}
.rope-guy circle{fill:#fff}
.rope-guy line{stroke:#fff;stroke-width:5;stroke-linecap:round}
.rope-guy .arm{transform-origin:0 20px;animation:tugArm 0.9s ease-in-out infinite}
.rope-guy:nth-child(2) .arm{animation-delay:.1s}
.rope-guy:nth-child(3) .arm{animation-delay:.2s}
@keyframes tugArm{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-10deg)}}
#ropeGuys{animation:tugLean 0.9s ease-in-out infinite}
@keyframes tugLean{0%,100%{transform:translateX(0) rotate(0deg)}50%{transform:translateX(-4px) rotate(-2deg)}}

.rope-scene__bubble{position:absolute;left:8px;top:8px;font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.06em;color:#fff;background:rgba(106,90,158,.5);border:1px solid rgba(255,255,255,.3);border-radius:100px;padding:6px 14px;animation:bubblePulse 1.6s infinite;pointer-events:none}
@keyframes bubblePulse{0%,100%{opacity:1}50%{opacity:.55}}

.brand-marquee{overflow:hidden;border-block:1px solid var(--line-on-bone);padding-block:18px;margin-top:20px}
.brand-marquee.hidden{display:none}
.mq-track{display:inline-flex;gap:0;white-space:nowrap;animation:mqScroll 20s linear infinite}
.mq-track span{padding-inline:32px;font-family:var(--ff-display);font-weight:700;font-size:1.4rem;color:var(--txt-on-bone)}
@keyframes mqScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   MOBILE HERO — OVERRIDE PATCH (append-only)
   Beats every earlier .pz__* rule via ID specificity.
   Desktop (>820px) is completely untouched.
   ============================================================ */
@media (max-width: 820px) {

  #pz{
    height: 200vh !important;
    position: relative !important;
    overflow: hidden !important;
    background: var(--ink) !important;
  }

  #pzPin{
    top: 0 !important;
    height: 100svh !important;
    overflow: hidden !important;
    background: var(--ink) !important;
  }

  #pzStage{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    background: var(--ink) !important;
  }

  #pzReel{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 1 !important;
    background: var(--ink) !important;
  }
  #pzReel video{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* ── THE ACTUAL BUG ──
     An old ≤700px rule leaves transform:translate(-50%,-50%) on the veil
     while inset:0 kills its left/top:50%. Result: the whole cream layer
     shifts half a screen up-left and TBL gets sliced. Reset it. */
  #pzVeil{
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    z-index: 3 !important;
    display: block !important;
  }

  #pzCopy{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 4 !important;
  }
}

@media (max-width: 700px) {

  /* At ≤700px the JS swaps the viewBox to '150 100 1300 700' + 'meet',
     so the SVG band is letterboxed. Paint the element AND the band the
     same flat cream so the bars disappear instead of showing #0d0818. */
  #pzVeil{
    background: #F4F1EB !important;
  }
  #pzVeil > rect{
    fill: #F4F1EB !important;
  }

  /* Don't set transform here — GSAP owns this element's transform on the
     mobile timeline. The old scale(0.55) was being clobbered anyway. */
  #pzReelText{
    padding-inline: 22px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #pzReelEyebrow{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: .56rem !important;
    letter-spacing: .08em !important;
    line-height: 1.5 !important;
    white-space: normal !important;
  }
  #pzReelLine{
    width: 100% !important;
    max-width: 92vw !important;
    margin-inline: auto !important;
    font-size: clamp(1.1rem, 5.4vw, 1.5rem) !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }
}

/* ============================================================
   MOBILE HERO — DESKTOP PARITY PATCH (append-only)
   .home--luxe #id  => beats every earlier #id{...!important}
   ============================================================ */
@media (max-width: 820px) {

  .home--luxe #pz{ height:200vh !important; background:var(--bone-3) !important; }
  .home--luxe #pzPin{ top:0 !important; height:100svh !important;
    overflow:hidden !important; background:var(--bone-3) !important; }
  .home--luxe #pzStage{ position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important; background:transparent !important; }

  /* dark, NOT cream — otherwise the TBL cutout reveals cream on cream */
  .home--luxe #pzReel{ position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important; z-index:1 !important;
    background:var(--bone-3) !important; }
  .home--luxe #pzReel video{ width:100% !important; height:100% !important;
    object-fit:cover !important; }

  /* full-bleed veil, no translate, no aspect-ratio letterbox */
  .home--luxe #pzVeil{ position:absolute !important; inset:0 !important;
    left:0 !important; top:0 !important; transform:none !important;
    width:100% !important; height:100% !important; aspect-ratio:auto !important;
    background:transparent !important; z-index:3 !important; }
  .home--luxe svg#pzVeil > rect{ fill:url(#pzVeilGrad) !important; }

  /* copy back to bottom-centre (inset:0 was pinning it to the top) */
  .home--luxe #pzCopy{ position:absolute !important;
    top:auto !important; bottom:clamp(26px,7vh,70px) !important;
    left:0 !important; right:0 !important; height:auto !important;
    z-index:4 !important; text-align:center !important; }

  /* sized so it still fits once the stage scales to 1.22 */
  .home--luxe #pzReelText{ padding-inline:18px !important; }
  .home--luxe #pzReelEyebrow{ display:block !important; width:100% !important;
    text-align:center !important; font-size:.5rem !important;
    letter-spacing:.06em !important; line-height:1.5 !important; }
  .home--luxe #pzReelLine{ max-width:70vw !important; margin-inline:auto !important;
    font-size:clamp(.92rem,4.2vw,1.15rem) !important; line-height:1.32 !important; }
}

/* ============================================================
   MOBILE PREMIUM PASS — service deck · carpet coverflow · rope
   Append-only. Specificity beats the inline <style> in page-home.php.
   ============================================================ */

/* ─────────── (01) WHAT WE DO — SERVICE DECK ─────────── */
@media (max-width: 820px) {
  .home--luxe .bfield{ display:none !important; }
  .home--luxe .bfield-wrap{ display:block !important; margin-top:14px !important; }
}

.svcdeck{ position:relative; z-index:2; margin:0 0 26px; }
.svcdeck__stage{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:18px 0 6px; touch-action:pan-y; user-select:none; -webkit-user-select:none;
}
.svcdeck__halo{
  position:absolute; left:50%; top:48%; transform:translate(-50%,-50%);
  width:96vw; height:96vw; max-width:420px; max-height:420px; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%);
  opacity:.55; transition:background .7s var(--e-out);
}
.svcdeck__orb{
  position:relative; width:min(72vw,292px); aspect-ratio:1/1; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:13%; cursor:pointer; -webkit-tap-highlight-color:transparent;
  background:
    radial-gradient(42% 34% at 30% 22%, rgba(255,255,255,.62), rgba(255,255,255,0) 58%),
    radial-gradient(80% 80% at 68% 74%, color-mix(in srgb, var(--accent) 78%, transparent), transparent 74%),
    color-mix(in srgb, var(--accent) 40%, #17102a);
  border:1px solid color-mix(in srgb, var(--accent) 45%, rgba(255,255,255,.28));
  box-shadow:
    inset 0 0 30px rgba(255,255,255,.2),
    inset -10px -14px 30px rgba(10,6,20,.45),
    inset 8px 10px 24px rgba(255,255,255,.16),
    0 28px 64px -22px color-mix(in srgb, var(--accent) 55%, transparent);
  transition:background .65s var(--e-out), box-shadow .65s var(--e-out),
             border-color .65s var(--e-out), transform .45s var(--e-out);
  will-change:transform;
}
.svcdeck__orb:active{ transform:scale(.975); }
.svcdeck__orb::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(120% 60% at 28% 14%, rgba(255,255,255,.5), transparent 42%);
  mix-blend-mode:screen;
}
.svcdeck__pulse{
  position:absolute; inset:-2px; border-radius:50%; pointer-events:none;
  border:1px solid color-mix(in srgb, var(--accent) 70%, #fff); opacity:0;
}
.svcdeck.is-changing .svcdeck__pulse{ animation:svcPulse .85s var(--e-out); }
@keyframes svcPulse{ from{ transform:scale(1); opacity:.8 } to{ transform:scale(1.28); opacity:0 } }

.svcdeck__face{ position:relative; z-index:2; display:block; width:100%; }
.svcdeck__face > *{ transition:opacity .3s ease, transform .3s var(--e-out); }
.svcdeck.is-changing .svcdeck__face > *{ opacity:0; transform:translateY(10px); }
.svcdeck__icon{
  display:block; font-size:1.65rem; line-height:1; margin-bottom:8px;
  color:color-mix(in srgb, var(--accent) 62%, #fff); text-shadow:0 4px 20px rgba(0,0,0,.4);
}
.svcdeck__n{
  display:block; font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.24em;
  color:color-mix(in srgb, var(--accent) 78%, #fff); margin-bottom:9px;
}
.svcdeck__name{
  font-family:var(--ff-display); font-weight:800; letter-spacing:-.02em;
  font-size:1.12rem; line-height:1.1; color:#fff; margin-bottom:9px;
  text-shadow:0 4px 20px rgba(0,0,0,.4);
}
.svcdeck__desc{
  font-size:.76rem; line-height:1.5; color:rgba(255,255,255,.84);
  max-width:88%; margin-inline:auto;
}

.svcdeck__tags{
  display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:16px;
  min-height:28px; transition:opacity .3s ease;
}
.svcdeck.is-changing .svcdeck__tags{ opacity:0; }
.svcdeck__tags i{
  font-family:var(--ff-mono); font-style:normal; font-size:.58rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--txt-on-ink);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius:100px; padding:5px 11px;
}
.svcdeck__rail{ display:flex; justify-content:center; gap:7px; margin-top:16px; }
.svcdeck__rail .d{
  width:6px; height:6px; border-radius:50%; background:var(--line-on-ink);
  transition:all .4s var(--e-out); cursor:pointer;
}
.svcdeck__rail .d.on{ width:22px; background:var(--accent); }
.svcdeck__hint{
  margin-top:12px; text-align:center; font-family:var(--ff-mono);
  font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--haze-dim);
}

/* ─────────── (02) CLASSIC WORK — FLOATING CARPET COVERFLOW ─────────── */
@media (max-width: 820px) {
  .home--luxe .carpets__field{
    display:flex !important; overflow-x:auto !important; gap:0 !important;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding-inline:14vw !important; scrollbar-width:none; perspective:none !important;
    padding-block:26px 34px !important;
  }
  .home--luxe .carpets__field::-webkit-scrollbar{ display:none; }

  /* JS drives --cf; this rule outranks every earlier transform:!important */
  .home--luxe .carpets__field .carpet{
    flex:0 0 72vw !important; scroll-snap-align:center; margin:0 !important;
    padding-inline:1.5vw; transform:var(--cf, none) !important;
    transform-style:preserve-3d; will-change:transform, opacity;
    transition:opacity .35s linear;
  }
  .home--luxe .carpets__field .carpet__shadow{
    display:block !important; left:14%; right:14%; bottom:-16px; height:36px; opacity:.5;
  }
  .home--luxe .carpets__field .carpet__card{
    display:block !important; border-radius:22px;
    animation:cpFloat 6.5s ease-in-out infinite;
    box-shadow:0 30px 60px -30px rgba(45,35,80,.62) !important;
  }
  .home--luxe .carpets__field .carpet:nth-child(2n) .carpet__card{ animation-delay:-2.1s; }
  .home--luxe .carpets__field .carpet:nth-child(3n) .carpet__card{ animation-delay:-4.3s; }
  @keyframes cpFloat{
    0%,100%{ transform:translateY(0) }
    50%{ transform:translateY(-9px) }
  }
  .home--luxe .carpets__field .carpet__img{ aspect-ratio:4/5 !important; }
  .home--luxe .carpets__field .carpet__meta{
    position:relative !important; inset:auto !important; opacity:1 !important;
    background:var(--bone) !important; padding:16px 18px 4px !important;
  }
  .home--luxe .carpets__field .carpet__reveal{
    position:relative !important; inset:auto !important; opacity:1 !important;
    transform:none !important; background:var(--bone) !important;
    padding:0 18px 18px !important; flex-direction:row !important;
    align-items:center !important; justify-content:space-between !important; gap:10px !important;
  }
  .home--luxe .carpets__field .carpet__tag{ font-size:.86rem !important; flex:1; }
  .home--luxe .carpets__field .carpet__stat{ display:none; }
  .home--luxe .carpets__field .carpet__open{ margin-top:0 !important; white-space:nowrap; }
  .home--luxe #carpetsRail{ display:flex !important; justify-content:center; gap:7px; margin-top:8px; }
  .home--luxe #carpetsRail .dot{ width:6px; height:6px; border-radius:50%;
    background:var(--line-on-ink); transition:all .35s var(--e-out); }
  .home--luxe #carpetsRail .dot.is-active{ width:22px; background:var(--ember); }
}

/* ─────────── (03) ROPE PULL + BRAND MARQUEE ─────────── */
.home--luxe #ropeScene{ touch-action:pan-y; }
.home--luxe #ropeSvg{ height:230px; overflow:visible; }
@media (max-width:820px){ .home--luxe #ropeSvg{ height:200px; } }

.rp-ground{ stroke:rgba(244,241,235,.14); stroke-width:2; stroke-dasharray:5 9; }
.rp-guy line{ stroke:#fff; stroke-width:6; stroke-linecap:round; fill:none; }
.rp-guy circle{ fill:#fff; }
.rp-rope{ stroke:var(--saffron); stroke-width:5; fill:none; stroke-linecap:round; }
.rp-gate{ fill:var(--ember); }
.rp-glow{ fill:var(--ember-soft); opacity:0; }
.rp-chip{ fill:rgba(244,241,235,.16); stroke:var(--saffron); stroke-width:1.5; }
.rp-bar-t{ fill:rgba(244,241,235,.14); }
.rp-bar-f{ fill:var(--ember-soft); }

.rope-scene__bubble{ left:50% !important; transform:translateX(-50%); white-space:nowrap; }
.rp-tap{
  display:block; margin:14px auto 0; font-family:var(--ff-mono); font-size:.6rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--txt-on-bone-dim);
  background:transparent; border:1px solid var(--line-on-bone);
  border-radius:100px; padding:9px 20px; cursor:pointer; transition:all .3s var(--e-out);
}
.rp-tap:hover,.rp-tap:active{ color:#fff; border-color:var(--ember-soft); }

.home--luxe #brandMarquee{ padding-block:34px !important; }
.home--luxe #brandTrack{ gap:0 !important; align-items:center; }
.home--luxe #brandTrack .mq-logo{
  width:152px !important; height:96px !important; margin-inline:15px; padding:14px !important;
  border-radius:18px !important; background:#fff !important; flex-shrink:0;
  box-shadow:0 14px 34px -16px rgba(0,0,0,.5) !important;
  opacity:0; transform:translateY(22px) scale(.9);
  transition:opacity .6s var(--e-out), transform .6s var(--e-out);
}
.home--luxe #brandMarquee.is-in .mq-logo{ opacity:1; transform:none; }
.home--luxe #brandMarquee.is-float .mq-logo{ animation:mqFloat 5.4s ease-in-out infinite; }
@keyframes mqFloat{
  0%,100%{ transform:translateY(0) rotate(0deg) }
  50%{ transform:translateY(-8px) rotate(-.8deg) }
}
.home--luxe #brandTrack .mq-logo:nth-child(3n)  { animation-delay:-1.4s !important; }
.home--luxe #brandTrack .mq-logo:nth-child(3n+1){ animation-delay:-3.1s !important; }
@media (max-width:820px){
  .home--luxe #brandTrack .mq-logo{ width:126px !important; height:82px !important; margin-inline:11px; }
}
@media (prefers-reduced-motion:reduce){
  .home--luxe #brandMarquee.is-float .mq-logo,
  .home--luxe .carpets__field .carpet__card{ animation:none !important; }
}

/* ============================================================
   DESKTOP BUBBLE FIELD — PREMIUM PASS (append-only, ≥821px)
   ============================================================ */
@media (min-width: 821px) {

  .home--luxe .kdo--bubbles{ overflow:visible; }
  .home--luxe .bfield-wrap{ position:relative; align-items:center; }

  /* ── ambient aura that takes the active service colour ── */
  .home--luxe #bfieldAura{
    position:absolute; right:-6%; top:50%; transform:translateY(-50%);
    width:78%; aspect-ratio:1/1; max-width:820px; pointer-events:none; z-index:0;
    background:radial-gradient(circle,
      color-mix(in srgb, var(--aura,#6C56D9) 26%, transparent) 0%,
      color-mix(in srgb, var(--aura,#6C56D9) 9%, transparent) 38%,
      transparent 66%);
    opacity:.85; transition:background 1s var(--e-out), opacity .8s var(--e-out);
  }
  .home--luxe #bfield.is-hero-mode ~ #bfieldAura,
  .home--luxe .bfield-wrap.is-hero-mode #bfieldAura{ opacity:1; }

  .home--luxe #bfield{
    height:clamp(540px,70vh,720px); z-index:2; cursor:default;
  }

  /* ── the orb ── */
  .home--luxe #bfield .bubble{
    transition:filter .55s var(--e-out), opacity .55s var(--e-out);
    will-change:transform;
  }
  .home--luxe #bfield .bubble--service{ cursor:pointer; }

  .home--luxe #bfield .bubble__glass{
    background:
      radial-gradient(34% 28% at calc(50% + var(--sx,-16%)) calc(50% + var(--sy,-20%)),
        rgba(255,255,255,.92), rgba(255,255,255,.28) 38%, rgba(255,255,255,0) 62%),
      radial-gradient(72% 72% at 66% 74%,
        color-mix(in srgb, var(--accent) 88%, transparent), transparent 78%),
      radial-gradient(130% 130% at 42% 34%,
        color-mix(in srgb, var(--accent) 34%, #17102a),
        color-mix(in srgb, var(--accent) 58%, #0b0716));
    border:1px solid color-mix(in srgb, var(--accent) 34%, rgba(255,255,255,.3));
    box-shadow:
      inset 0 0 44px rgba(255,255,255,.14),
      inset -16px -20px 44px rgba(8,4,18,.55),
      inset 12px 14px 32px rgba(255,255,255,.2),
      0 34px 68px -26px color-mix(in srgb, var(--accent) 52%, transparent);
    transition:box-shadow .55s var(--e-out), border-color .55s var(--e-out);
  }

  /* rim light arc — reads as glass thickness */
  .home--luxe #bfield .bubble__glass::after{
    content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
    background:conic-gradient(from calc(var(--rim,220) * 1deg),
      rgba(255,255,255,0) 0deg, rgba(255,255,255,.5) 42deg,
      color-mix(in srgb, var(--accent) 80%, #fff) 74deg,
      rgba(255,255,255,0) 132deg, rgba(255,255,255,0) 360deg);
    -webkit-mask:radial-gradient(circle, transparent 0 76%, #000 84%, #000 100%);
            mask:radial-gradient(circle, transparent 0 76%, #000 84%, #000 100%);
    opacity:.75; mix-blend-mode:screen;
  }

  /* slow caustic sheen drifting across the surface */
  .home--luxe #bfield .bubble__spec{
    background:
      radial-gradient(60% 34% at 26% 14%, rgba(255,255,255,.55), transparent 46%),
      radial-gradient(28% 20% at 74% 30%, rgba(255,255,255,.22), transparent 60%);
    animation:bbSheen 9s ease-in-out infinite;
  }
  @keyframes bbSheen{
    0%,100%{ transform:translate3d(0,0,0) rotate(0deg); opacity:.9 }
    50%    { transform:translate3d(3%,-2%,0) rotate(6deg); opacity:1 }
  }

  /* hover ring */
  .home--luxe #bfield .bubble--service::after{
    content:""; position:absolute; inset:-10px; border-radius:50%; pointer-events:none;
    border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
    opacity:0; transform:scale(.9);
    transition:opacity .45s var(--e-out), transform .45s var(--e-out);
  }
  .home--luxe #bfield .bubble--service.is-near::after{ opacity:.55; transform:scale(1); }

  /* fillers become depth-of-field satellites */
  .home--luxe #bfield .bubble--filler{
    filter:blur(2.5px) saturate(.85); opacity:.5; pointer-events:none;
  }
  .home--luxe #bfield.is-hero-mode .bubble--filler{ filter:blur(6px); opacity:.22; }

  /* non-hero services recede */
  .home--luxe #bfield.is-hero-mode .bubble--service{ opacity:.42; filter:blur(1.6px); }
  .home--luxe #bfield.is-hero-mode .bubble--service.is-hero{
    opacity:1; filter:none;
  }
  .home--luxe #bfield .bubble.is-hero .bubble__glass{
    border-color:color-mix(in srgb, var(--accent) 62%, rgba(255,255,255,.5));
    box-shadow:
      inset 0 0 52px rgba(255,255,255,.18),
      inset -16px -20px 46px rgba(8,4,18,.5),
      inset 12px 14px 34px rgba(255,255,255,.2),
      0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
      0 0 70px -6px color-mix(in srgb, var(--accent) 45%, transparent),
      0 46px 96px -30px color-mix(in srgb, var(--accent) 62%, transparent);
  }

  /* content typography inside the hero orb */
  .home--luxe #bfield .bubble__content{ padding:15%; }
  .home--luxe #bfield .bubble__content-desc{ line-height:1.55; }
  .home--luxe #bfield .bubble__content-tags i{
    background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3);
  }

  /* list rows get a live accent bar */
  .home--luxe .bfield-list__item{ position:relative; }
  .home--luxe .bfield-list__item::before{
    content:""; position:absolute; left:-14px; top:14%; bottom:14%; width:2px;
    border-radius:2px; background:var(--row-accent,var(--ember));
    transform:scaleY(0); transform-origin:50% 50%; opacity:0;
    transition:transform .45s var(--e-out), opacity .35s;
  }
  .home--luxe .bfield-list__item.is-active::before{ transform:scaleY(1); opacity:1; }
  .home--luxe .bfield-list__item.is-active .bfield-list__name{ color:var(--row-accent,var(--ember)); }
  .home--luxe .bfield-list__item.is-active .bfield-list__n{ color:var(--row-accent,var(--ember)); }
}

@media (prefers-reduced-motion:reduce){
  .home--luxe #bfield .bubble__spec{ animation:none !important; }
}

/* ============================================================
   CLASSIC WORK — MOBILE IMAGE FIT (no more cropping)
   Logos/portrait art now sit whole inside the frame, with a
   blurred bleed of themselves filling the space around them.
   ============================================================ */
@media (max-width: 820px) {
  .home--luxe .carpets__field .carpet__img{
    aspect-ratio:4/3 !important;
    background:#161028 !important;
    position:relative; overflow:hidden;
  }
  .home--luxe .carpets__field .carpet__img::before{
    content:""; position:absolute; inset:-14%; z-index:0;
    background-image:var(--cimg); background-size:cover; background-position:center;
    filter:blur(26px) saturate(1.55) brightness(.6);
    transform:scale(1.16);
  }
  .home--luxe .carpets__field .carpet__img::after{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(20,14,38,.2), rgba(20,14,38,.52));
  }
  .home--luxe .carpets__field .carpet__img img{
    position:relative; z-index:2;
    width:100% !important; height:100% !important;
    object-fit:contain !important;
    padding:16px; filter:none !important;
    transform:none !important;
  }
}

/* ============================================================
   BUILD YOUR STACK — reliable drop zone
   ============================================================ */
@media (max-width: 900px) {
  /* the old rule offset the field 96px from the stage while the hit
     test assumed they shared an origin — that's the missed catches */
  .home--luxe #kplayField{
    position:absolute !important; inset:0 !important;
    top:0 !important; bottom:0 !important;
  }
  .home--luxe #kbasket{
    max-height:none !important; padding:12px 16px 14px !important;
  }
  .home--luxe #kplayField .kchip{
    font-size:.8rem !important; padding:.34em .68em !important;
  }
}

.home--luxe #kbasket{ transition:transform .25s var(--e-out), box-shadow .25s, border-color .25s, background .25s; }
.home--luxe #kbasket.armed{
  border-color:var(--clay) !important;
  background:rgba(255,255,255,.99) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ember) 28%, transparent),
             0 30px 60px -24px rgba(91,71,196,.8) !important;
}
.home--luxe #kbasket.armed .kbasket__lip::after{ content:" — drop it"; opacity:.7; }
.home--luxe .kchip.tossing{ pointer-events:none; z-index:80; }
.home--luxe .kbasket__tags span{ cursor:pointer; transition:opacity .2s, transform .2s; }
.home--luxe .kbasket__tags span:hover{ opacity:.65; transform:scale(.94); }
.home--luxe .kbasket__tags span::after{ content:" ×"; opacity:.6; }
.home--luxe .kplay__hint-tap{
  text-align:center; margin-top:10px; font-family:var(--ff-mono);
  font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--haze-dim);
}
/* ============================================================
   HEADER / MOBILE MENU FIX (append-only)
   tbl-atelier's tokens live under .home--luxe, so header +
   menu rules resolved to nothing outside <main>. Promote them.
   ============================================================ */
:root{
  --ink:#F4F1EB; --ink-2:#FBF9F5; --ink-3:#EAE7F0; --lav-bg:#ECE8F4;
  --bone:#1E1830; --bone-2:#181226; --bone-3:#211A38;
  --ember:#5B47C4; --ember-soft:#7C68E0; --saffron:#C2B6E2;
  --lav:#CFC6E6; --mist:#DED9EA; --haze:#544F63; --haze-dim:#827C92;
  --txt-on-ink:#211B32; --txt-on-ink-dim:#56506A;
  --txt-on-bone:#F4F1EB; --txt-on-bone-dim:#C3BCD8;
  --line-on-ink:rgba(33,27,50,.14); --line-on-bone:rgba(244,241,235,.18);
  --ff-display:'Bricolage Grotesque',sans-serif;
  --ff-serif:'Instrument Serif',Georgia,serif;
  --ff-body:'Inter Tight',system-ui,sans-serif;
  --ff-mono:'Space Mono',ui-monospace,monospace;
  --e-out:cubic-bezier(.16,1,.3,1); --e-inout:cubic-bezier(.76,0,.24,1);
  --header-h:78px;
}

/* keep the bar above the pinned hero + the veil */
.site-header{ z-index:1300 !important; }
.site-header .hdr-inner,
.site-header .hdr-right{ display:flex; align-items:center; }

@media (max-width: 980px){

  .site-header .primary-nav,
  .site-header .hdr-cta,
  .site-header .hdr-restaurant-btn{ display:none !important; }

  .site-header .hdr-right{ gap:10px; margin-left:auto; }

  /* the button itself — explicit colours, no var() dependency */
  .site-header .burger,
  #burger, #tblBurger{
    display:block !important; visibility:visible !important; opacity:1 !important;
    position:relative !important; flex:0 0 auto;
    width:44px !important; height:44px !important; padding:0 !important;
    border:1px solid rgba(33,27,50,.2) !important; border-radius:50% !important;
    background:rgba(255,255,255,.55) !important;
    -webkit-appearance:none; appearance:none; cursor:pointer;
    z-index:1310; -webkit-tap-highlight-color:transparent;
  }
  .site-header .burger span,
  #burger span, #tblBurger span{
    position:absolute !important; left:12px !important; right:auto !important;
    width:20px !important; height:2px !important; border-radius:2px;
    background:#1E1830 !important; opacity:1 !important; margin:0 !important;
    transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .22s ease;
  }
  .site-header .burger span:nth-child(1),
  #burger span:nth-child(1), #tblBurger span:nth-child(1){ top:15px !important; }
  .site-header .burger span:nth-child(2),
  #burger span:nth-child(2), #tblBurger span:nth-child(2){ top:21px !important; }
  .site-header .burger span:nth-child(3),
  #burger span:nth-child(3), #tblBurger span:nth-child(3){ top:27px !important; }

  /* open state — works with body.menu-open, .active, or .is-open */
  body.menu-open .burger span:nth-child(1),
  .burger.active span:nth-child(1),
  .burger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg) !important; }
  body.menu-open .burger span:nth-child(2),
  .burger.active span:nth-child(2),
  .burger.is-open span:nth-child(2){ opacity:0 !important; }
  body.menu-open .burger span:nth-child(3),
  .burger.active span:nth-child(3),
  .burger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) !important; }

  body.menu-open .burger,
  .burger.is-open{ background:rgba(255,255,255,.9) !important; border-color:var(--ember) !important; }

  /* header must never auto-hide while the panel is open */
  body.menu-open .site-header{ transform:none !important; opacity:1 !important; pointer-events:auto !important; }
  body.menu-open{ overflow:hidden; }
}

/* ── the panel — explicit colours so it can't open invisible ── */
.mob-menu, #mob-menu, #tblMobMenu{
  position:fixed !important; inset:0 !important; z-index:1290 !important;
  background:#171130 !important;
  display:flex !important; flex-direction:column !important;
  justify-content:center !important; align-items:flex-start !important;
  padding:96px 30px 44px !important; gap:2px !important;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateY(-101%); transition:transform .62s cubic-bezier(.76,0,.24,1);
  visibility:hidden;
}
body.menu-open .mob-menu,
#mob-menu.open, .mob-menu.open,
#tblMobMenu.is-open, .mob-menu.is-open{
  transform:translateY(0) !important; visibility:visible !important;
}

.mob-menu .mob-link, #tblMobMenu .mob-link{
  display:block !important; width:100%;
  font-family:var(--ff-display) !important; font-weight:800 !important;
  font-size:clamp(2.1rem,9.5vw,3.4rem) !important; line-height:1.06 !important;
  letter-spacing:-.03em !important; color:#F4F1EB !important;
  padding:7px 0 !important; opacity:1 !important; transform:none !important;
  transition:color .28s ease, transform .28s cubic-bezier(.16,1,.3,1);
}
.mob-menu .mob-link:active, #tblMobMenu .mob-link:active{
  color:var(--ember-soft) !important; transform:translateX(6px) !important;
}
.mob-menu .mob-foot, #tblMobMenu .mob-foot{
  margin-top:34px !important; padding-top:26px !important;
  border-top:1px solid rgba(255,255,255,.09) !important; width:100% !important;
}
.mob-menu .mob-foot a, .mob-menu .mob-foot span,
#tblMobMenu .mob-foot a, #tblMobMenu .mob-foot span{
  font-family:var(--ff-mono) !important; font-size:13px !important;
  color:rgba(244,241,235,.42) !important; display:block !important; line-height:1.75 !important;
}

/* ============================================================
   MOBILE SERVICE DECK — orb text rhythm fix (append-only)
   Spans were inline, so margins collapsed and the name ran
   straight into the description. Desktop untouched.
   ============================================================ */
.home--luxe .svcdeck__face{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  width:100% !important;
}

.home--luxe .svcdeck__icon,
.home--luxe .svcdeck__n,
.home--luxe .svcdeck__name,
.home--luxe .svcdeck__desc{
  display:block !important;
  width:100% !important;
  text-align:center !important;
}

.home--luxe .svcdeck__icon{
  font-size:1.5rem !important;
  line-height:1 !important;
  margin:0 0 10px !important;
}

.home--luxe .svcdeck__n{
  font-size:.58rem !important;
  line-height:1 !important;
  letter-spacing:.24em !important;
  margin:0 0 12px !important;
}

/* the two that were colliding */
.home--luxe .svcdeck__name{
  font-size:clamp(1rem,4.4vw,1.18rem) !important;
  line-height:1.18 !important;
  margin:0 0 14px !important;
  text-wrap:balance;
}

.home--luxe .svcdeck__desc{
  font-size:clamp(.7rem,3.1vw,.78rem) !important;
  line-height:1.55 !important;
  margin:0 !important;
  max-width:92% !important;
  margin-inline:auto !important;
}

/* longer service names (e.g. "Web Design & Build") need a touch
   more breathing room inside a fixed circle — tighten the padding
   so the copy block never crowds the rim */
.home--luxe .svcdeck__orb{
  padding:14% !important;
}

@media (max-width: 380px){
  .home--luxe .svcdeck__name{ font-size:.96rem !important; margin-bottom:11px !important; }
  .home--luxe .svcdeck__desc{ font-size:.68rem !important; line-height:1.5 !important; }
  .home--luxe .svcdeck__n{ margin-bottom:10px !important; }
  .home--luxe .svcdeck__icon{ font-size:1.3rem !important; margin-bottom:8px !important; }
}

/* ============================================================
   CLASSIC WORK — MOBILE IMAGE FILL (append-only)
   Overrides the earlier contain+padding rule. Image now fills
   the frame edge to edge; shallower ratio keeps crop minimal.
   ============================================================ */
@media (max-width: 820px) {

  .home--luxe .carpets__field .carpet__img{
    aspect-ratio:16/11 !important;
    background:#161028 !important;
    position:relative; overflow:hidden;
  }

  /* blurred bleed no longer needed — image covers the whole frame */
  .home--luxe .carpets__field .carpet__img::before,
  .home--luxe .carpets__field .carpet__img::after{
    display:none !important;
  }

  .home--luxe .carpets__field .carpet__img img{
    position:relative; z-index:2;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:0 !important;
    transform:none !important;
    filter:none !important;
  }
}