/* ==========================================================================
   H&A Foundry V2 — Design system
   Blue + white identity. Deep navy for cinematic contrast only.
   Fonts are self-hosted (Instrument Sans / Instrument Serif / Geist Mono, SIL OFL).
   ========================================================================== */

@font-face{font-family:"Instrument Sans";src:url("../fonts/InstrumentSans-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/InstrumentSans-Italic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/InstrumentSans-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/InstrumentSerif-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/InstrumentSerif-Italic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/GeistMono-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}

:root{
  --white:#FFFFFF; --paper:#F4F7FC; --mist:#E7EEF8; --line:#D8E1EE; --line-2:#C3D1E6;
  --ink:#0B1A33; --ink-2:#34465F; --mute:#66768F;
  --blue:#1A56C4; --blue-2:#2F7DE1; --blue-3:#0F3A8A; --sky:#4FC3F7; --ice:#DCEBFF;
  --navy:#0A1630; --navy-2:#0F2146; --navy-3:#16305F;
  --grad:linear-gradient(135deg,#0F3A8A 0%,#1A56C4 45%,#2F7DE1 75%,#4FC3F7 100%);
  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --gut:clamp(20px,3.6vw,56px); --maxw:1480px; --header:84px;
  --r:18px; --r-s:10px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{background:var(--white);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;text-rendering:optimizeLegibility}
img,video,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue-2);outline-offset:3px;border-radius:4px}
.on-dark :focus-visible,.navy :focus-visible{outline-color:var(--sky)}
.skip{position:fixed;left:16px;top:-80px;z-index:1000;background:var(--blue);color:#fff;padding:12px 18px;border-radius:999px;font-weight:700;transition:top .3s}
.skip:focus{top:16px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px)}
section{position:relative}

/* ---------- Typography ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:400 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.eyebrow::before{content:"";width:9px;height:9px;background:currentColor;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.navy .eyebrow,.on-dark .eyebrow{color:var(--sky)}
.t-mega{font-weight:700;font-size:clamp(52px,10.4vw,188px);line-height:.86;letter-spacing:-.045em;text-transform:uppercase}
.t-xxl{font-weight:700;font-size:clamp(46px,7.6vw,132px);line-height:.9;letter-spacing:-.04em}
.t-xl{font-weight:700;font-size:clamp(38px,5.4vw,92px);line-height:.95;letter-spacing:-.035em}
.t-l{font-weight:700;font-size:clamp(30px,3.6vw,58px);line-height:1;letter-spacing:-.03em}
.t-m{font-weight:700;font-size:clamp(22px,2.1vw,32px);line-height:1.12;letter-spacing:-.02em}
.t-s{font-weight:700;font-size:19px;line-height:1.25;letter-spacing:-.01em}
.it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;text-transform:none;color:var(--blue)}
.navy .it,.on-dark .it{color:var(--sky)}
.outline{-webkit-text-stroke:1.5px currentColor;color:transparent}
.lead{font-size:clamp(18px,1.45vw,22px);line-height:1.5;color:var(--ink-2);max-width:40ch}
.navy .lead,.on-dark .lead{color:#B7C6E0}
.body{color:var(--ink-2);max-width:56ch}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--mute)}
.navy .mono{color:#8FA3C6}
.muted{color:var(--mute)}

/* ---------- Buttons ---------- */
.btn{--bh:56px;position:relative;display:inline-flex;align-items:center;gap:14px;height:var(--bh);padding:0 10px 0 26px;border-radius:999px;background:var(--blue);color:#fff;font-weight:700;font-size:15px;letter-spacing:-.005em;overflow:hidden;isolation:isolate;white-space:nowrap;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad);transform:translateX(-101%);transition:transform .7s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn:hover{box-shadow:0 18px 40px -18px rgba(26,86,196,.7)}
.btn .ico{width:38px;height:38px;border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center;flex-shrink:0;transition:transform .6s var(--ease)}
.btn .ico svg{width:14px;height:14px;transition:transform .6s var(--ease)}
.btn:hover .ico svg{transform:rotate(45deg)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn--ghost .ico{background:var(--ink);color:#fff}
.btn--ghost::before{background:var(--mist)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--white{background:#fff;color:var(--ink)}
.btn--white .ico{background:var(--blue);color:#fff}
.btn--white::before{background:var(--ice)}
.btn--line-dark{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.btn--line-dark .ico{background:#fff;color:var(--navy)}
.btn--line-dark::before{background:rgba(255,255,255,.12)}
.btn--sm{--bh:46px;font-size:14px;padding-left:20px;gap:10px}
.btn--sm .ico{width:30px;height:30px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center}
.link{display:inline-flex;align-items:center;gap:10px;font-weight:700;position:relative;padding:4px 0}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform-origin:right;transform:scaleX(.35);transition:transform .6s var(--ease)}
.link:hover::after{transform:scaleX(1);transform-origin:left}
.link svg{width:13px;height:13px;transition:transform .5s var(--ease)}
.link:hover svg{transform:translate(3px,-3px)}
.chip{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--line-2);font-size:13.5px;color:var(--ink-2);white-space:nowrap}
.navy .chip{border-color:rgba(255,255,255,.2);color:#C9D6EC}

/* ---------- Header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header);transition:background .5s,box-shadow .5s,transform .6s var(--ease),height .5s var(--ease)}
.hdr__in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.hdr.is-solid{background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);box-shadow:0 1px 0 rgba(11,26,51,.06);height:70px}
.hdr.is-hidden{transform:translateY(-110%)}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{height:40px;width:auto}
.hdr .logo .l-dark{display:none}
.hdr.on-dark:not(.is-solid) .logo .l-light{display:none}
.hdr.on-dark:not(.is-solid) .logo .l-dark{display:block}
.nav{display:flex;align-items:center;gap:6px}
.nav>a,.nav>.nav__svc>button{position:relative;display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 14px;border-radius:999px;font-size:15px;font-weight:700;color:var(--ink);transition:background .3s,color .3s}
.nav>a:hover,.nav>.nav__svc>button:hover,.nav__svc.is-open>button{background:var(--mist)}
.nav>a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:5px;width:5px;height:5px;margin-left:-2.5px;background:var(--blue);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.nav__svc>button svg{width:10px;height:10px;transition:transform .4s var(--ease)}
.nav__svc.is-open>button svg{transform:rotate(180deg)}
.hdr.on-dark:not(.is-solid) .nav>a,.hdr.on-dark:not(.is-solid) .nav__svc>button{color:#fff}
.hdr.on-dark:not(.is-solid) .nav>a:hover,.hdr.on-dark:not(.is-solid) .nav__svc>button:hover{background:rgba(255,255,255,.1)}
.hdr__cta{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;width:48px;height:48px;border-radius:50%;background:var(--ink);color:#fff;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.menu-btn span{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .5s var(--ease),opacity .3s}
.hdr.on-dark:not(.is-solid) .menu-btn{background:#fff;color:var(--ink)}
.nav__svc{position:relative}
.mega{position:absolute;top:calc(100% + 12px);left:50%;width:min(540px,86vw);transform:translate(-50%,6px);opacity:0;visibility:hidden;transition:opacity .3s,transform .45s var(--ease),visibility .3s;background:#fff;border-radius:18px;box-shadow:0 30px 70px -30px rgba(11,26,51,.32),0 0 0 1px rgba(11,26,51,.06);padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.nav__svc.is-open .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega a{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;padding:9px;border-radius:12px;transition:background .3s}
.mega a:hover,.mega a:focus-visible{background:var(--paper)}
.mega .mi{width:52px;height:52px;border-radius:14px;background:var(--grad);display:grid;place-items:center;color:#fff}
.mega .mi svg{width:24px;height:24px}
.mega b{display:block;font-size:14.5px;letter-spacing:-.01em}
.mega small{display:block;font-size:12px;color:var(--mute);line-height:1.3;margin-top:2px}
.mega .mega__all{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;background:var(--paper);padding:10px 14px;margin-top:4px}
.mega .mega__all b{font-size:13px}
.mega .mega__all svg{width:12px;height:12px}
.mth{width:64px;height:44px;border-radius:9px;overflow:hidden;display:block;background:var(--paper);box-shadow:0 0 0 1px rgba(11,26,51,.06)}
.mth img{display:block}

/* Mobile menu */
.mnav{position:fixed;inset:0;z-index:99;background:var(--navy);color:#fff;display:flex;flex-direction:column;padding:calc(var(--header) + 10px) var(--gut) 28px;clip-path:circle(0% at calc(100% - 44px) 42px);visibility:hidden;transition:clip-path .8s var(--ease-io),visibility .8s;overflow-y:auto}
.mnav::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 60% at 100% 0%,rgba(47,125,225,.35),transparent 60%),radial-gradient(70% 50% at 0% 100%,rgba(79,195,247,.16),transparent 60%);pointer-events:none}
.mnav.is-open{clip-path:circle(150% at calc(100% - 44px) 42px);visibility:visible}
.mnav nav{position:relative;display:flex;flex-direction:column}
.mnav nav a{font-weight:700;font-size:clamp(36px,10vw,64px);line-height:1.08;letter-spacing:-.04em;text-transform:uppercase;padding:4px 0;display:flex;align-items:baseline;gap:14px;opacity:0;transform:translateY(24px);transition:opacity .6s,transform .8s var(--ease)}
.mnav nav a small{font:400 12px var(--mono);color:var(--sky);letter-spacing:.1em}
.mnav.is-open nav a{opacity:1;transform:none}
.mnav .sub{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 24px}
.mnav .sub a{height:38px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);display:inline-flex;align-items:center;font-size:14px}
.mnav .foot{position:relative;margin-top:auto;display:grid;gap:10px;font-size:15px;color:#B7C6E0;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
body.menu-open .hdr{background:transparent;box-shadow:none;backdrop-filter:none}
body.menu-open .hdr .logo .l-light{display:none}body.menu-open .hdr .logo .l-dark{display:block}
body.menu-open .menu-btn{background:#fff;color:var(--ink)}
body.menu-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .menu-btn span:nth-child(2){opacity:0}
body.menu-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Preloader & page transition ---------- */
.preload{position:fixed;inset:0;z-index:2000;background:#fff;display:grid;place-items:center;transition:opacity .6s,visibility .6s}
.preload__in{display:grid;justify-items:center;gap:26px}
.preload img{width:min(240px,50vw);opacity:0;transform:translateY(10px);animation:plIn .9s var(--ease) .1s forwards}
.preload__bar{width:180px;height:2px;background:var(--mist);overflow:hidden;border-radius:2px}
.preload__bar i{display:block;height:100%;width:100%;background:var(--grad);transform-origin:left;transform:scaleX(0)}
.preload__n{font:400 12px var(--mono);color:var(--mute);letter-spacing:.14em}
.preload.is-done{opacity:0;visibility:hidden}
@keyframes plIn{to{opacity:1;transform:none}}
.curtain{position:fixed;inset:0;z-index:1900;pointer-events:none;display:grid;place-items:center}
.curtain__panel{position:absolute;inset:0;background:var(--grad);transform:translateY(100%)}
.curtain__star{position:relative;width:46px;height:46px;background:#fff;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:0;transform:scale(.4) rotate(-45deg)}
.curtain.is-in .curtain__panel{transform:none;transition:transform .7s var(--ease-io)}
.curtain.is-in .curtain__star{opacity:1;transform:none;transition:opacity .4s .35s,transform .7s var(--ease) .3s}
.curtain.is-out .curtain__panel{transform:translateY(-100%);transition:transform .8s var(--ease-io) .05s}
.curtain.is-cover .curtain__panel{transform:none}
.curtain.is-cover .curtain__star{opacity:1;transform:none}
.curtain.is-out .curtain__star{opacity:0;transition:opacity .3s}

/* ---------- Reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal="scale"]{transform:scale(.94)}
.js [data-reveal="scale"].is-in{transform:none}
.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.js [data-split] .w>span{display:inline-block;transform:translateY(108%);transition:transform 1.15s var(--ease)}
.js [data-split].is-in .w>span{transform:none}
[data-stagger]>*{transition-delay:calc(var(--i,0) * 70ms)!important}

/* ---------- Sections / shared ---------- */
.sec{padding:clamp(90px,12vw,190px) 0}
.sec--tight{padding:clamp(70px,8vw,120px) 0}
.paper{background:var(--paper)}
.navy{background:var(--navy);color:#fff}
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);row-gap:22px;align-items:end;margin-bottom:clamp(40px,5vw,80px)}
.sec-head>.l{grid-column:1/8}.sec-head>.r{grid-column:9/13}
.sec-head h2{margin-top:18px}
.divider{height:1px;background:var(--line)}
.navy .divider{background:rgba(255,255,255,.14)}
.kicker-num{font:400 13px var(--mono);color:var(--blue);letter-spacing:.08em}

/* ---------- Home hero ---------- */
.hero{height:230vh;background:linear-gradient(180deg,#fff 0%,#F4F7FC 60%,#fff 100%)}
.hero__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero__glow{position:absolute;right:-10%;top:-10%;width:80vw;height:80vw;background:radial-gradient(closest-side,rgba(79,195,247,.20),rgba(47,125,225,.08) 55%,transparent);pointer-events:none}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hero__fallback{position:absolute;right:4vw;top:12vh;width:44vw;display:none;z-index:1}
.gl-failed .hero__fallback{display:block}
.hero__copy{position:absolute;left:0;right:0;bottom:clamp(90px,13vh,150px);z-index:2}
.hero__title{font-weight:700;font-size:clamp(50px,8.6vw,160px);line-height:.88;letter-spacing:-.05em;max-width:12ch}
.hero__title .it{font-size:1.06em}
.hero__sub{margin-top:clamp(20px,2.6vw,34px);display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center}
.hero__sub p{font-size:clamp(17px,1.35vw,20px);color:var(--ink-2);max-width:34ch}
.hero__meta{position:absolute;left:0;right:0;bottom:28px;z-index:2;display:flex;justify-content:space-between;align-items:center}
.scroll-cue{display:inline-flex;align-items:center;gap:12px}
.scroll-cue i{width:1.5px;height:36px;background:var(--line-2);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:0;width:100%;height:40%;background:var(--blue);animation:cue 2.2s var(--ease-io) infinite}
@keyframes cue{0%{transform:translateY(-100%)}100%{transform:translateY(260%)}}
.hero__intro{position:absolute;inset:0;z-index:3;display:grid;place-items:center;text-align:center;pointer-events:none;opacity:0}
.hero__intro .t-xxl{max-width:14ch}
.hero__intro .t-xxl span{display:block}

/* ---------- Intro / stats ---------- */
.intro{padding:clamp(100px,12vw,180px) 0 clamp(60px,8vw,120px)}
.intro__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);row-gap:40px}
.intro__txt{grid-column:1/8}
.intro__logo{grid-column:9/13;align-self:start}
.intro__logo figure{border-radius:var(--r);overflow:hidden;background:#09142A;aspect-ratio:1/1;display:grid;place-items:center;box-shadow:0 40px 80px -40px rgba(10,22,48,.5)}
.intro__logo img{width:78%}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);margin-top:clamp(50px,6vw,90px)}
.stat{padding:26px 22px 8px 0;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat+.stat{padding-left:22px}
.stat b{display:block;font-size:clamp(44px,5vw,78px);line-height:.95;letter-spacing:-.05em}
.stat b em{font-style:normal;color:var(--blue)}
.stat>span{display:block;margin-top:10px;color:var(--mute);font-size:15px;max-width:22ch}

/* ---------- Worlds (home services) ---------- */
.worlds{position:relative;background:#fff}
.world{position:relative;height:260vh}
.world--short{height:220vh}
.world__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
.world__copy{position:relative;z-index:3;padding-left:var(--gut);padding-right:24px;max-width:620px}
.world__num{font:400 13px var(--mono);color:var(--blue);letter-spacing:.1em}
.world__title{margin:14px 0 18px}
.world__copy .lead{margin-bottom:22px}
.caps{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.world__visual{position:relative;height:100%;width:100%}
.rail{position:fixed;left:var(--gut);top:calc(var(--header) + 18px);z-index:5;display:none;flex-direction:row;gap:26px;pointer-events:none}
.rail a{pointer-events:auto;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:10px;padding:4px 0;transition:color .4s}
.rail a i{width:18px;height:1.5px;background:currentColor;transition:width .5s var(--ease)}
.rail a.is-on{color:var(--blue)}.rail a.is-on i{width:36px}
.worlds.is-active .rail{display:flex}
.worlds .rail{opacity:0;transition:opacity .4s}
.worlds.is-active .rail{opacity:1}
.world--navy{background:var(--navy);color:#fff}
.worlds.is-navy .rail a{color:#6F86AE}.worlds.is-navy .rail a.is-on{color:var(--sky)}
.world-bg{position:absolute;inset:0;z-index:0}

/* Device scene (CSS 3D) */
.dev{position:absolute;inset:0;perspective:2200px;perspective-origin:50% 40%}
.dev__rig{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.laptop{position:absolute;width:var(--lw,760px);left:calc(var(--lw,760px) / -2);top:calc(var(--lw,760px) * -.36);transform-style:preserve-3d}
.laptop__lid{position:relative;width:100%;aspect-ratio:16/10.4;border-radius:18px 18px 6px 6px;background:linear-gradient(160deg,#1d2a42,#0b1322 60%);padding:2.1% 2.1% 3.2%;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 60px 120px -40px rgba(11,26,51,.55);transform-origin:50% 100%;transform-style:preserve-3d}
.laptop__lid::before{content:"";position:absolute;left:50%;top:.9%;width:5px;height:5px;border-radius:50%;background:#2a3a55;transform:translateX(-50%)}
.screen{position:relative;width:100%;height:100%;border-radius:6px;overflow:hidden;background:#fff}
.screen img,.screen .scr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .9s var(--ease),transform 1.2s var(--ease)}
.screen img:not(.is-on),.screen .scr:not(.is-on){opacity:0;transform:scale(1.04)}
.screen::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.18),transparent 38%);pointer-events:none}
.laptop__base{position:absolute;left:-7%;right:-7%;top:100%;height:24px;transform-origin:50% 0;transform:rotateX(-78deg);background:linear-gradient(180deg,#d9e0ea,#b7c2d2 60%,#9aa7bb);border-radius:0 0 26px 26px;box-shadow:0 30px 50px -10px rgba(11,26,51,.35)}
.laptop__base::after{content:"";position:absolute;left:42%;right:42%;top:0;height:6px;background:#9aa7bb;border-radius:0 0 8px 8px}
.laptop__shadow{position:absolute;left:-10%;right:-10%;top:104%;height:60px;background:radial-gradient(closest-side,rgba(11,26,51,.28),transparent);transform:rotateX(90deg);filter:blur(4px)}
.phone{position:absolute;width:var(--pw,240px);left:calc(var(--pw,240px) / -2);top:calc(var(--pw,240px) * -1.05);aspect-ratio:9/19.3;border-radius:calc(var(--pw,240px) * .17);background:linear-gradient(150deg,#26344d,#0b1322 55%,#1a2740);padding:calc(var(--pw,240px) * .035);box-shadow:0 0 0 1.5px #3a4a66 inset,0 50px 90px -30px rgba(11,26,51,.6);transform-style:preserve-3d}
.phone .screen{border-radius:calc(var(--pw,240px) * .135)}
.phone__island{position:absolute;left:50%;top:calc(var(--pw,240px) * .06);width:30%;height:calc(var(--pw,240px) * .075);background:#05080f;border-radius:99px;transform:translateX(-50%);z-index:3}
.dev__label{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:9px 14px 9px 10px;border-radius:999px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 14px 34px -16px rgba(11,26,51,.4);font-size:13.5px;font-weight:700;white-space:nowrap}
.dev__label i{width:8px;height:8px;border-radius:50%;background:#22C08A;box-shadow:0 0 0 4px rgba(34,192,138,.18)}
.dev__steps{position:absolute;right:var(--gut);bottom:34px;z-index:4;display:flex;gap:8px}
.dev__steps span{width:34px;height:3px;border-radius:3px;background:var(--line);overflow:hidden;position:relative}
.dev__steps span i{position:absolute;inset:0;background:var(--blue);transform-origin:left;transform:scaleX(0)}

/* Brand scene */
.brand{position:absolute;inset:0;perspective:1800px}
.brand__rig{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
/* Packaging box (CSS 3D) */
.box3d{position:absolute;width:150px;height:190px;margin:-95px 0 0 -75px;transform-style:preserve-3d}
.box3d>div{position:absolute;background:#fff;border:1px solid rgba(11,26,51,.06);display:grid;place-items:center}
.box3d .f{inset:0;transform:translateZ(45px);background:#09142A}
.box3d .f img{width:82%}
.box3d .b{inset:0;transform:rotateY(180deg) translateZ(45px);background:#0F2146}
.box3d .r{top:0;bottom:0;left:30px;width:90px;transform:rotateY(90deg) translateZ(75px);background:var(--blue)}
.box3d .l{top:0;bottom:0;left:30px;width:90px;transform:rotateY(-90deg) translateZ(75px);background:#12306A}
.box3d .t{left:0;right:0;top:50px;height:90px;transform:rotateX(90deg) translateZ(95px);background:#16305F}
.box3d .bt{left:0;right:0;top:50px;height:90px;transform:rotateX(-90deg) translateZ(95px);background:#0A1630}

/* Marketing scene */
.mkt{position:absolute;inset:0;perspective:1800px}
.mkt__rig{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.ad{position:absolute;will-change:transform}
.adcard{width:100%;height:100%;border-radius:inherit;overflow:hidden;display:flex;flex-direction:column}
.ad-top{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:11px;font-weight:700;background:#fff;color:var(--ink)}
.ad-top img{width:26px;height:26px;border-radius:50%;background:#09142A;object-fit:contain;padding:3px}
.ad-top small{display:block;font-weight:400;color:var(--mute);font-size:10px}
.ad-visual{flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;color:#fff;background:var(--grad);overflow:hidden}
.ad-visual .h{font-weight:700;font-size:26px;line-height:.95;letter-spacing:-.04em;position:relative;z-index:1}
.ad-visual .s{font-size:12px;opacity:.85;margin-top:8px;position:relative;z-index:1}
.ad-visual .bgamp{position:absolute;right:-18%;top:-8%;width:95%;opacity:.28}
.ad-cta{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#fff;color:var(--ink);font-size:11.5px;font-weight:700}
.ad-cta span:last-child{background:var(--blue);color:#fff;border-radius:6px;padding:6px 10px}
.dash{position:absolute;width:520px;height:330px;margin:-165px 0 0 -260px;border-radius:18px;background:#fff;box-shadow:0 50px 100px -40px rgba(11,26,51,.45),0 0 0 1px rgba(11,26,51,.05);padding:18px 20px;display:grid;grid-template-rows:auto 1fr auto;gap:14px}
.dash__h{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700}
.dash__h small{font:400 10.5px var(--mono);color:var(--mute);letter-spacing:.06em}
.dash svg{width:100%;height:100%}
.dash .bars{display:flex;gap:8px;align-items:flex-end;height:54px}
.dash .bars i{flex:1;border-radius:4px 4px 0 0;background:var(--ice);transform-origin:bottom}
.dash .bars i:nth-child(3n){background:var(--blue)}
.serp{position:absolute;width:420px;margin:-60px 0 0 -210px;border-radius:14px;background:#fff;box-shadow:0 40px 80px -36px rgba(11,26,51,.4),0 0 0 1px rgba(11,26,51,.05);padding:16px 18px;font-size:13px}
.serp .q{display:flex;align-items:center;gap:10px;height:38px;border-radius:999px;border:1px solid var(--line);padding:0 14px;color:var(--ink-2);margin-bottom:12px}
.serp .u{font-size:11.5px;color:var(--mute)}
.serp .t{color:#1A56C4;font-weight:700;font-size:15px;margin:2px 0}

/* ---------- Creative (navy) ---------- */
.creative{background:var(--navy);color:#fff;overflow:clip}
.creative__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.creative__canvas{position:absolute;inset:0;width:100%;height:100%}
.creative__copy{position:absolute;left:var(--gut);bottom:clamp(60px,10vh,120px);z-index:2;max-width:620px}
.mat-switch{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.mat-switch button{height:38px;padding:0 15px;border-radius:999px;border:1px solid rgba(255,255,255,.22);font-size:13.5px;color:#C9D6EC;transition:all .4s var(--ease)}
.mat-switch button:hover{border-color:#fff;color:#fff}
.mat-switch button[aria-pressed="true"]{background:#fff;color:var(--navy);border-color:#fff}
.exp-tag{display:inline-flex;align-items:center;gap:8px;font:400 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#9FB4D8;border:1px dashed rgba(159,180,216,.45);border-radius:999px;padding:7px 12px}
.creative__side{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);z-index:2;display:grid;gap:10px;text-align:right}
.creative__side span{font-weight:700;font-size:clamp(20px,2.4vw,36px);letter-spacing:-.03em;color:rgba(255,255,255,.18);transition:color .5s}
.creative__side span.is-on{color:#fff}

/* ---------- Work showcase (stacked) ---------- */
.stack{position:relative}
.proj{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.proj__card{position:relative;width:calc(100% - 2 * var(--gut));margin:0 auto;height:min(86vh,860px);border-radius:28px;overflow:hidden;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--paper);box-shadow:0 -30px 80px -50px rgba(11,26,51,.35);transform-origin:50% 0}
.proj__info{padding:clamp(28px,4vw,64px);display:flex;flex-direction:column;position:relative;z-index:2}
.proj__info .t-xl{margin:16px 0}
.proj__meta{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:14.5px;margin:14px 0 30px;color:var(--ink-2)}
.proj__meta dt{font:400 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding-top:3px}
.proj__vis{position:relative;overflow:hidden;background:linear-gradient(160deg,#E7EEF8,#F7FAFE)}
.proj__vis .dev{perspective:1800px}
.proj--b .proj__card{background:#0F2146;color:#fff}
.proj--b .proj__meta{color:#C9D6EC}.proj--b .proj__meta dt{color:#8FA3C6}
.proj--b .proj__vis{background:linear-gradient(160deg,#16305F,#0A1630)}
.proj__big{position:absolute;right:-.04em;bottom:-.16em;font-weight:700;font-size:clamp(90px,15vw,260px);letter-spacing:-.06em;line-height:1;color:rgba(26,86,196,.06);pointer-events:none;white-space:nowrap}
.proj--b .proj__big{color:rgba(255,255,255,.05)}

/* ---------- Industries / custom ---------- */
.ind{border-top:1px solid var(--line)}
.ind__row{position:relative;display:grid;grid-template-columns:80px minmax(0,1fr) minmax(0,1.1fr) 40px;gap:24px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line);transition:padding .6s var(--ease)}
.ind__row h3{font-weight:700;font-size:clamp(26px,3vw,46px);letter-spacing:-.035em;line-height:1;transition:color .4s,transform .6s var(--ease)}
.ind__row p{color:var(--ink-2);font-size:16px}
.ind__row .n{font:400 13px var(--mono);color:var(--mute)}
.ind__row .ar{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:all .5s var(--ease)}
.ind__row .ar svg{width:13px;height:13px}
.ind__row:hover h3{color:var(--blue);transform:translateX(10px)}
.ind__row:hover .ar{background:var(--blue);border-color:var(--blue);color:#fff;transform:rotate(45deg)}

/* ---------- Process track ---------- */
.proc{position:relative;height:320vh;background:var(--paper)}
.proc__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.proc__head{padding:0 var(--gut);display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(30px,5vh,60px)}
.proc__track{display:flex;gap:clamp(18px,2vw,28px);padding:0 var(--gut);will-change:transform}
.pstep{flex:0 0 clamp(300px,34vw,520px);min-height:clamp(320px,46vh,460px);border-radius:24px;background:#fff;padding:clamp(24px,2.6vw,38px);display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 30px 70px -48px rgba(11,26,51,.4);position:relative;overflow:hidden}
.pstep .num{font-weight:700;font-size:clamp(80px,9vw,150px);line-height:.8;letter-spacing:-.06em;color:var(--ice)}
.pstep h3{margin:14px 0 10px}
.pstep p{color:var(--ink-2);max-width:34ch}
.pstep ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.pstep--cta{background:var(--grad);color:#fff}
.pstep--cta .num{color:rgba(255,255,255,.2)}
.pstep--cta p{color:#E3EEFF}
.proc__bar{margin:clamp(30px,5vh,50px) var(--gut) 0;height:2px;background:var(--line);position:relative}
.proc__bar i{position:absolute;left:0;top:0;height:100%;width:100%;background:var(--blue);transform-origin:left;transform:scaleX(0)}
.proc__bar b{position:absolute;top:50%;left:0;width:16px;height:16px;margin:-8px 0 0 -8px;background:var(--blue);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}

/* ---------- Reviews ---------- */
.reviews{overflow:hidden}
.rv-rows{display:grid;gap:18px}
.rv-row{display:flex;gap:18px;width:max-content;will-change:transform}
.rv{width:min(460px,80vw);flex-shrink:0;border-radius:22px;background:#fff;padding:28px 28px 24px;border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.rv q{font-size:18px;line-height:1.45;letter-spacing:-.01em;quotes:"\201C" "\201D"}
.rv q::before{content:open-quote;color:var(--blue);font-family:var(--serif);font-size:1.4em;line-height:0;margin-right:2px;vertical-align:-.2em}
.rv q::after{content:close-quote;color:var(--blue);font-family:var(--serif)}
.rv footer{display:flex;align-items:center;gap:12px}
.rv .av{width:40px;height:40px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700}
.rv b{display:block;font-size:15px}
.rv small{display:block;font:400 12px var(--mono);color:var(--mute);letter-spacing:.02em}

/* ---------- CTA band ---------- */
.cta{position:relative;overflow:hidden;background:var(--grad);color:#fff;padding:clamp(100px,14vw,200px) 0}
.cta__acc{position:absolute;right:-3vw;top:50%;width:min(48vw,660px);transform:translateY(-50%);opacity:.26;pointer-events:none}
.cta__acc *{stroke:#fff;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.cta__acc .f,.cta__acc g.f *{fill:#fff;stroke:none}
@media (max-width:760px){.cta__acc{width:90vw;right:-30vw;top:auto;bottom:-10%;transform:none;opacity:.14}}
.cta .t-xxl{max-width:13ch}
.cta .lead{color:#E3EEFF}
.cta__contacts{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:40px;font-size:16px}
.cta__contacts a{border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px}

/* ---------- Footer ---------- */
.ftr{background:var(--navy);color:#C9D6EC;padding:clamp(70px,8vw,110px) 0 36px;position:relative;overflow:hidden}
.ftr__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);row-gap:40px}
.ftr__brand{grid-column:1/5}
.ftr__brand img{width:220px}
.ftr__brand p{margin-top:22px;max-width:30ch;color:#8FA3C6;font-size:15px}
.ftr__col{grid-column:span 2}
.ftr__col h4{font:400 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#6F86AE;margin-bottom:16px;font-weight:400}
.ftr__col a{display:block;padding:5px 0;color:#E6EDF8;font-size:15px;transition:color .3s}
.ftr__col a:hover{color:var(--sky)}
.ftr__contact{grid-column:span 2}
.ftr__word{font-weight:700;font-size:clamp(64px,15.8vw,280px);letter-spacing:-.06em;line-height:.8;color:transparent;-webkit-text-stroke:1.2px rgba(159,180,216,.18);margin:clamp(50px,7vw,100px) 0 30px;white-space:nowrap;user-select:none}
.ftr__bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:13.5px;color:#6F86AE;padding-top:22px;border-top:1px solid rgba(255,255,255,.1)}
.ftr__bot nav{display:flex;flex-wrap:wrap;gap:18px}
.ftr__bot a:hover{color:#fff}

/* ---------- Page hero (inner pages) ---------- */
.phero{position:relative;padding:calc(var(--header) + clamp(60px,9vw,130px)) 0 clamp(60px,8vw,110px);overflow:hidden}
.phero .t-mega{margin:18px 0 26px}
.phero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);row-gap:28px;align-items:end}
.phero__grid .l{grid-column:1/9}.phero__grid .r{grid-column:9/13}
.crumbs{display:flex;gap:8px;font:400 12px var(--mono);color:var(--mute);letter-spacing:.06em;text-transform:uppercase}
.crumbs a:hover{color:var(--blue)}
.phero--navy{background:var(--navy);color:#fff}
.phero--navy .crumbs{color:#8FA3C6}

/* Service hero with scene */
.shero{position:relative;height:100vh;height:100svh;min-height:680px;overflow:hidden;background:linear-gradient(180deg,#fff,#F4F7FC)}
.shero__copy{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(60px,9vh,110px);z-index:3;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);align-items:end}
.shero__copy .l{grid-column:1/8}
.shero__copy .r{grid-column:9/13}
.shero__title{font-weight:700;font-size:clamp(56px,11vw,200px);line-height:.84;letter-spacing:-.055em;text-transform:uppercase;margin-top:16px}
.shero__vis{position:absolute;right:0;top:var(--header);width:64%;bottom:30vh;z-index:1}
.shero__fill{position:absolute;inset:0}
.cta .it{color:#CFE6FF}
.shero--navy{background:var(--navy);color:#fff}
.shero .crumbs{position:absolute;top:calc(var(--header) + 24px);left:var(--gut);z-index:3}

/* Capability list */
.capl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.cap{display:grid;grid-template-columns:54px minmax(0,1fr);gap:18px;padding:28px 28px 28px 0;border-bottom:1px solid var(--line);position:relative}
.cap:nth-child(odd){border-right:1px solid var(--line)}
.cap:nth-child(even){padding-left:28px}
.cap .ci{width:54px;height:54px;border-radius:14px;background:var(--paper);display:grid;place-items:center;color:var(--blue);transition:background .5s,color .5s,transform .6s var(--ease)}
.cap .ci svg{width:24px;height:24px}
.cap:hover .ci{background:var(--blue);color:#fff;transform:rotate(-8deg)}
.cap h3{font-size:21px;letter-spacing:-.02em;margin-bottom:6px}
.cap p{color:var(--ink-2);font-size:15.5px}
.navy .capl,.navy .cap{border-color:rgba(255,255,255,.12)}
.navy .cap .ci{background:rgba(255,255,255,.06);color:var(--sky)}
.navy .cap p{color:#B7C6E0}

/* Chapter (pinned story) on service pages */
.chap{position:relative;height:300vh}
.chap__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
.chap__txt{position:relative;padding-left:var(--gut);padding-right:20px;z-index:3;min-height:300px}
.chap__item{position:absolute;left:var(--gut);right:20px;top:0;opacity:0;transform:translateY(24px);transition:opacity .7s,transform .9s var(--ease);pointer-events:none}
.chap__item.is-on{opacity:1;transform:none;pointer-events:auto}
.chap__item h3{margin:14px 0 14px}
.chap__vis{position:relative;height:100%}
.chap__dots{position:absolute;left:var(--gut);bottom:40px;display:flex;gap:10px;z-index:3}
.chap__dots span{width:40px;height:3px;background:var(--line);border-radius:3px;overflow:hidden;position:relative}
.chap__dots span i{position:absolute;inset:0;background:var(--blue);transform-origin:left;transform:scaleX(0)}

/* Price mini table (service pages) */
.pmini{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.pm{border-radius:20px;background:#fff;border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:6px;transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .4s}
.pm:hover{transform:translateY(-4px);box-shadow:0 30px 60px -40px rgba(11,26,51,.45);border-color:var(--line-2)}
.pm small{font:400 12px var(--mono);color:var(--mute);letter-spacing:.06em;text-transform:uppercase}
.pm b{font-size:20px;letter-spacing:-.02em}
.pm .pr{font-weight:700;font-size:40px;letter-spacing:-.04em;line-height:1;margin-top:10px}
.pm .pr sup{font-size:.45em;vertical-align:.9em;margin-right:2px;color:var(--mute)}
.pm .pr span{font:400 12.5px var(--mono);color:var(--mute);letter-spacing:.02em;margin-left:4px}

/* Next service */
.next{display:block;position:relative;padding:clamp(80px,10vw,150px) 0;border-top:1px solid var(--line);overflow:hidden}
.next .mono{display:block;margin-bottom:14px}
.next .t-mega{transition:color .6s,-webkit-text-stroke-color .6s}
.next:hover .t-mega{color:var(--blue);-webkit-text-stroke-color:var(--blue)}
.next .arrowc{position:absolute;right:var(--gut);top:50%;width:clamp(70px,8vw,120px);height:clamp(70px,8vw,120px);border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;transform:translateY(-50%) scale(.9);transition:transform .7s var(--ease)}
.next:hover .arrowc{transform:translateY(-50%) scale(1) rotate(45deg)}
.next .arrowc svg{width:30%;height:30%}

/* Related services */
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rel{position:relative;border-radius:22px;padding:28px;min-height:230px;background:var(--paper);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transition:background .6s,color .6s}
.rel::after{content:"";position:absolute;inset:0;background:var(--grad);opacity:0;transition:opacity .6s;z-index:0}
.rel>*{position:relative;z-index:1}
.rel:hover{color:#fff}.rel:hover::after{opacity:1}
.rel:hover .mono,.rel:hover p{color:#E3EEFF}
.rel h3{font-size:clamp(26px,2.4vw,36px);letter-spacing:-.035em;line-height:1}
.rel p{color:var(--ink-2);font-size:15px;margin-top:8px}

/* Split feature */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);row-gap:40px;align-items:center}
.split>.a{grid-column:1/6}.split>.b{grid-column:7/13}
.split--rev>.a{grid-column:8/13;order:2}.split--rev>.b{grid-column:1/7;order:1}

/* Tech list */
.tech{display:flex;flex-wrap:wrap;gap:10px}
.tech span{height:44px;padding:0 18px;border-radius:999px;background:#fff;border:1px solid var(--line);display:inline-flex;align-items:center;font-weight:700;font-size:15px}

/* Services gateway */
.gw{border-top:1px solid var(--line)}
.gw__row{position:relative;display:block;border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate}
.gw__bg{position:absolute;inset:0;z-index:-1;background:var(--grad);clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-io)}
.gw__row:hover .gw__bg,.gw__row:focus-within .gw__bg{clip-path:inset(0 0 0 0)}
.gw__in{display:grid;grid-template-columns:90px minmax(0,1.3fr) minmax(0,1fr) 110px;gap:24px;align-items:center;padding:clamp(28px,3.6vw,52px) 0;transition:color .6s}
.gw__row:hover .gw__in,.gw__row:focus-within .gw__in{color:#fff}
.gw__n{font:400 13px var(--mono);color:var(--mute);transition:color .6s}
.gw__row:hover .gw__n{color:#CFE0FF}
.gw__t{font-weight:700;font-size:clamp(40px,6.4vw,112px);line-height:.86;letter-spacing:-.05em;text-transform:uppercase}
.gw__subs{display:flex;flex-wrap:wrap;gap:6px}
.gw__row:hover .chip{border-color:rgba(255,255,255,.4);color:#fff}
.gw__vis{width:110px;height:110px;border-radius:50%;background:var(--paper);display:grid;place-items:center;transition:transform .8s var(--ease),background .6s}
.gw__vis svg{width:36px;height:36px;color:var(--blue);transition:color .6s,transform .8s var(--ease)}
.gw__row:hover .gw__vis{background:#fff;transform:rotate(-12deg) scale(1.05)}
.gw__row:hover .gw__vis svg{transform:rotate(12deg)}
.gw__peek{position:absolute;right:170px;top:50%;width:260px;height:170px;margin-top:-85px;border-radius:14px;overflow:hidden;opacity:0;transform:translateX(30px) rotate(4deg);transition:opacity .5s,transform .8s var(--ease);box-shadow:0 30px 60px -30px rgba(0,0,0,.5);pointer-events:none}
.gw__row:hover .gw__peek{opacity:1;transform:none}

/* Pricing */
.ptabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.ptabs button{height:46px;padding:0 20px;border-radius:999px;border:1.5px solid var(--line-2);font-weight:700;font-size:15px;color:var(--ink-2);transition:all .4s var(--ease)}
.ptabs button:hover{border-color:var(--ink);color:var(--ink)}
.ptabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.pgroup{margin-bottom:56px}
.pgroup[hidden]{display:none}
.pgroup__h{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-bottom:18px;border-bottom:1.5px solid var(--ink)}
.prow{border-bottom:1px solid var(--line)}
.prow__h{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto 48px;gap:24px;align-items:center;padding:26px 0;text-align:left;transition:padding .5s var(--ease)}
.prow__h:hover{padding-left:12px}
.prow__h h3{font-size:clamp(22px,2.2vw,32px);letter-spacing:-.03em;line-height:1.05}
.prow__h p{color:var(--mute);font-size:15px;margin-top:4px;font-weight:400}
.prow__p{font-weight:700;font-size:clamp(30px,3vw,46px);letter-spacing:-.04em;line-height:1;white-space:nowrap;text-align:right}
.prow__p sup{font-size:.45em;vertical-align:.9em;color:var(--mute);margin-right:2px}
.prow__p small{display:block;font:400 12px var(--mono);color:var(--mute);letter-spacing:.04em;margin-top:6px}
.prow__t{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;transition:all .5s var(--ease)}
.prow__t svg{width:14px;height:14px;transition:transform .5s var(--ease)}
.prow.is-open .prow__t{background:var(--blue);border-color:var(--blue);color:#fff}
.prow.is-open .prow__t svg{transform:rotate(45deg)}
.prow__b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.prow.is-open .prow__b{grid-template-rows:1fr}
.prow__b>div{overflow:hidden}
.prow__b ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px 30px;padding:0 0 30px}
.prow__b li{display:flex;gap:12px;font-size:15.5px;color:var(--ink-2)}
.prow__b li::before{content:"";flex-shrink:0;width:10px;height:10px;margin-top:7px;background:var(--blue);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.pcustom{border-radius:28px;background:var(--navy);color:#fff;padding:clamp(34px,5vw,70px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:26px;align-items:end;position:relative;overflow:hidden}
.pcustom .l{grid-column:1/8}.pcustom .r{grid-column:9/13;justify-self:end}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 0;font-weight:700;font-size:clamp(18px,1.6vw,23px);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;transition:transform .5s var(--ease),background .4s}
.faq summary i svg{width:12px;height:12px}
.faq details[open] summary i{transform:rotate(45deg);background:var(--ink);color:#fff;border-color:var(--ink)}
.faq details p{color:var(--ink-2);padding:0 60px 26px 0;max-width:70ch}

/* Forms */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 22px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label,.field legend{font:400 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.field input,.field select,.field textarea{width:100%;min-height:56px;border-radius:14px;border:1.5px solid var(--line);background:#fff;padding:14px 16px;font-size:16px;transition:border-color .3s,box-shadow .3s}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(47,125,225,.14)}
.field .err{font-size:13px;color:#C2410C;display:none}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:#E4572E}
.field.is-invalid .err{display:block}
fieldset.field{border:0}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{display:inline-flex;align-items:center;height:46px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:14.5px;cursor:pointer;transition:all .35s var(--ease)}
.opt span:hover{border-color:var(--ink)}
.opt input:checked+span{background:var(--blue);border-color:var(--blue);color:#fff}
.opt input:focus-visible+span{outline:2px solid var(--blue-2);outline-offset:3px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-2)}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--blue);flex-shrink:0}
.check a{text-decoration:underline}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.form-note{font-size:13.5px;color:var(--mute)}
.form-status{grid-column:1/-1;font-size:14.5px;display:none;padding:14px 16px;border-radius:12px;background:#FFF4EE;color:#9A3412}
.form-status.is-on{display:block}
.success{display:none;text-align:left;padding:clamp(30px,4vw,56px);border-radius:28px;background:var(--grad);color:#fff;position:relative;overflow:hidden}
.success.is-on{display:block;animation:succ .9s var(--ease)}
@keyframes succ{from{opacity:0;transform:translateY(20px) scale(.98)}}
.success ol{display:grid;gap:14px;margin-top:26px;counter-reset:s}
.success li{counter-increment:s;display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:baseline;font-size:16px}
.success li::before{content:"0" counter(s);font:400 12px var(--mono);color:#CFE0FF}
.success .star{width:64px;height:64px;background:#fff;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:spinIn 1.2s var(--ease)}
@keyframes spinIn{from{transform:scale(0) rotate(-180deg)}}

/* Contact page */
.ct{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);row-gap:50px}
.ct__side{grid-column:1/5}
.ct__main{grid-column:6/13}
.ct__card{border-radius:22px;background:var(--paper);padding:26px;display:grid;gap:18px}
.ct__card a{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-weight:700;font-size:17px}
.ct__card a:last-of-type{border-bottom:0}
.ct__card a small{display:block;font:400 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.ct__card .ar{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;flex-shrink:0;transition:all .5s var(--ease)}
.ct__card a:hover .ar{background:var(--blue);color:#fff;transform:rotate(45deg)}
.ct__card .ar svg{width:13px;height:13px}
.promises{display:grid;gap:12px;margin-top:10px}
.promises li{display:flex;gap:12px;font-size:15.5px;color:var(--ink-2)}
.promises li::before{content:"";flex-shrink:0;width:10px;height:10px;margin-top:7px;background:var(--blue);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.owner-flag{display:inline-block;font:400 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#9A3412;background:#FFF1E7;border:1px dashed #F59E6B;border-radius:6px;padding:3px 7px;vertical-align:middle}

/* Case study */
.cs-hero{position:relative;padding:calc(var(--header) + clamp(50px,8vw,110px)) 0 0;overflow:hidden}
.cs-hero .t-mega{margin:18px 0 30px}
.cs-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);margin-top:30px}
.cs-facts div{padding:18px 18px 18px 0;border-right:1px solid var(--line)}
.cs-facts div+div{padding-left:18px}
.cs-facts div:last-child{border-right:0}
.cs-facts dt{font:400 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.cs-facts dd{font-weight:700;font-size:16.5px}
.cs-stage{position:relative;height:88vh;min-height:560px;margin-top:clamp(40px,6vw,80px);border-radius:32px 32px 0 0;background:linear-gradient(170deg,#E7EEF8,#F7FAFE);overflow:hidden}
.cs-stage--dark{background:linear-gradient(170deg,#16305F,#0A1630)}
.cs-block{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);row-gap:20px;padding:clamp(60px,7vw,110px) 0;border-bottom:1px solid var(--line)}
.cs-block>.l{grid-column:1/5}.cs-block>.r{grid-column:6/13}
.cs-block .r p{font-size:clamp(19px,1.6vw,24px);line-height:1.45;letter-spacing:-.01em;max-width:44ch}
.deliv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}
.deliv li{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-weight:700}
.deliv li::before{content:"";flex-shrink:0;width:10px;height:10px;margin-top:7px;background:var(--blue);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.shot{border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -50px rgba(11,26,51,.5),0 0 0 1px rgba(11,26,51,.06);position:relative}
.shot .bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#F1F4F9;border-bottom:1px solid var(--line)}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:#D5DDE9}
.shot .bar span{margin-left:10px;font:400 11px var(--mono);color:var(--mute)}
.shot img{width:100%}
.g-a{grid-column:1/9}.g-b{grid-column:9/13;align-self:end}.g-c{grid-column:1/6}.g-d{grid-column:6/13}
.phone-shot{border-radius:34px;padding:9px;background:#0b1322;box-shadow:0 40px 80px -40px rgba(11,26,51,.6)}
.phone-shot img{border-radius:26px}
.nextp{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding:clamp(60px,8vw,120px) 0;border-top:1px solid var(--line)}
.caption{font:400 12px var(--mono);color:var(--mute);letter-spacing:.04em;margin-top:12px}

/* Work index */
.windex{border-top:1px solid var(--line)}
.wrow{position:relative;display:grid;grid-template-columns:70px minmax(0,1.2fr) minmax(0,1fr) auto;gap:24px;align-items:center;padding:clamp(28px,3.6vw,48px) 0;border-bottom:1px solid var(--line)}
.wrow h2{font-weight:700;font-size:clamp(40px,6vw,104px);letter-spacing:-.05em;line-height:.88;text-transform:uppercase;transition:color .5s}
.wrow:hover h2{color:var(--blue)}
.wrow .tags{display:flex;flex-wrap:wrap;gap:6px}
.wfilter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.wfilter button{height:40px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line-2);font-weight:700;font-size:14px;color:var(--ink-2);transition:all .35s}
.wfilter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.wrow[hidden]{display:none}
.wcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.wcard{display:block;border-radius:28px;overflow:hidden;background:var(--paper);position:relative}
.wcard__vis{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(160deg,#E7EEF8,#F7FAFE)}
.wcard__vis img{transition:transform 1.2s var(--ease)}
.wcard:hover .wcard__vis img{transform:scale(1.04)}
.wcard__info{padding:24px 26px 28px;display:flex;justify-content:space-between;gap:20px;align-items:flex-end}
.wcard--dark{background:#0F2146;color:#fff}
.wcard--dark .wcard__vis{background:linear-gradient(160deg,#16305F,#0A1630)}

/* About */
.founder{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,70px);align-items:center}
.founder__card{aspect-ratio:4/5;border-radius:28px;background:radial-gradient(90% 70% at 70% 20%,#16325F 0%,#0A1630 60%,#060E20 100%);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,2.4vw,30px);color:#fff;container-type:inline-size;margin:0}
.fc__top{display:flex;justify-content:space-between;align-items:center}
.fc__top .mono{color:#8FA3C6}
.fc__top img{width:52px;height:auto;opacity:.9}
.fc__names{margin:0 calc(-1*clamp(20px,2.4vw,30px));display:grid;gap:.6cqw}
.fc__name{font-weight:700;font-size:22cqw;line-height:.82;letter-spacing:-.045em;text-align:center;background:linear-gradient(180deg,#fff 30%,#9CC4FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.fc__echo{overflow:hidden;white-space:nowrap}
.fc__echo>div{display:inline-flex;gap:5cqw;font-weight:700;font-size:22cqw;line-height:.82;letter-spacing:-.045em;color:transparent;-webkit-text-stroke:1px rgba(159,196,255,.28);animation:fcm 38s linear infinite}
.fc__echo--r>div{animation-direction:reverse;-webkit-text-stroke-color:rgba(159,196,255,.16)}
@keyframes fcm{to{transform:translateX(-50%)}}
.fc__cap{display:flex;align-items:flex-end;gap:16px}
.fc__rule{flex:1;height:1px;background:linear-gradient(90deg,rgba(159,196,255,.5),transparent);margin-bottom:10px;order:2}
.fc__sig{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:-.01em}
.fc__cap .mono{display:block;color:#8FA3C6;margin-top:6px}
@media (prefers-reduced-motion:reduce){.fc__echo>div{animation:none}}
.beliefs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.belief{border-radius:24px;padding:clamp(24px,3vw,40px);background:#fff;border:1px solid var(--line);min-height:240px;display:flex;flex-direction:column;justify-content:space-between}
.belief .n{font:400 13px var(--mono);color:var(--blue)}
.belief h3{font-size:clamp(24px,2.4vw,34px);letter-spacing:-.035em;line-height:1.05;margin:30px 0 10px}
.belief p{color:var(--ink-2)}

/* Legal */
.legal{max-width:820px}
.legal h2{font-size:26px;letter-spacing:-.02em;margin:48px 0 12px}
.legal h3{font-size:19px;margin:28px 0 8px}
.legal p,.legal li{color:var(--ink-2);margin-bottom:12px}
.legal ul{list-style:disc;padding-left:22px}
.legal .todo{border:1.5px dashed #F59E6B;background:#FFF7F1;border-radius:14px;padding:18px 20px;margin:18px 0;color:#7C2D12}

/* Creative page */
.cr-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.cr-tile{position:relative;border-radius:22px;overflow:hidden;background:#0F2146;min-height:320px}
.cr-tile img,.cr-tile video{width:100%;height:100%;object-fit:cover}
.cr-tile .cap-o{position:absolute;left:18px;bottom:16px;right:18px;display:flex;justify-content:space-between;gap:12px;color:#fff;font-size:14px;font-weight:700;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.cr-tile .cap-o small{font:400 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.vid{position:relative;border-radius:24px;overflow:hidden;background:#0F2146}
.vid video,.vid img{width:100%;height:100%;object-fit:cover}
.vid__btn{position:absolute;right:18px;bottom:18px;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--navy);display:grid;place-items:center;z-index:2}
.vid__btn svg{width:16px;height:16px}
.vertical{aspect-ratio:9/16;max-height:640px}
.kinetic{border-radius:24px;background:#fff;color:var(--ink);overflow:hidden;position:relative;min-height:320px;display:grid;place-items:center}
.kinetic .kt{font-weight:700;font-size:clamp(40px,5vw,84px);letter-spacing:-.05em;text-transform:uppercase;line-height:.88;text-align:center}
.kinetic .kt span{display:block;animation:kin 4s var(--ease-io) infinite}
.kinetic .kt span:nth-child(2){animation-delay:.25s;color:var(--blue)}
.kinetic .kt span:nth-child(3){animation-delay:.5s}
@keyframes kin{0%,20%{transform:translateY(0);letter-spacing:-.05em}40%{transform:translateY(-6%);letter-spacing:.02em}60%,100%{transform:translateY(0);letter-spacing:-.05em}}
.starfield{position:absolute;inset:0}
.starfield i{position:absolute;width:14px;height:14px;background:var(--blue);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:tw 3s ease-in-out infinite}
@keyframes tw{0%,100%{transform:scale(.4) rotate(0);opacity:.3}50%{transform:scale(1) rotate(45deg);opacity:1}}

/* Consent (only shown if analytics are configured) */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:1500;max-width:520px;background:#fff;border-radius:20px;box-shadow:0 30px 80px -30px rgba(11,26,51,.45),0 0 0 1px rgba(11,26,51,.06);padding:22px;display:none}
.consent.is-on{display:block}
.consent p{font-size:14.5px;color:var(--ink-2);margin:8px 0 16px}

/* Misc */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.marquee__t{display:inline-flex;gap:40px;animation:mq 40s linear infinite;font-weight:700;font-size:clamp(24px,3vw,44px);letter-spacing:-.03em;text-transform:uppercase}
.marquee__t span{display:inline-flex;align-items:center;gap:40px}
.marquee__t span::after{content:"";width:18px;height:18px;background:var(--blue);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
@keyframes mq{to{transform:translateX(-50%)}}
.label-s{font:400 11.5px var(--mono);letter-spacing:.06em;color:var(--mute)}
.notfound{min-height:100vh;display:grid;place-items:center;text-align:center;padding:120px var(--gut)}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .nav>a,.nav>.nav__svc>button{padding:0 10px;font-size:14.5px}
  .hdr__cta .btn{display:none}
}
@media (max-width:1024px){
  :root{--header:72px}
  .nav{display:none}.menu-btn{display:flex}
  .hdr__cta .btn{display:inline-flex}
  .sec-head>.l,.sec-head>.r{grid-column:1/-1}
  .intro__txt,.intro__logo{grid-column:1/-1}
  .intro__logo figure{max-width:360px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(3){padding-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .world{height:auto}.world--short{height:auto}
  .world__stage{position:relative;height:auto;grid-template-columns:1fr;padding:clamp(70px,10vw,110px) 0}
  .world__copy{max-width:none;padding-right:var(--gut)}
  .world__visual{height:min(78vw,560px);margin-top:36px}
  .rail{display:none!important}
  .proj{position:relative;height:auto;padding:14px 0}
  .proj__card{grid-template-columns:1fr;height:auto}
  .proj__vis{height:min(80vw,520px);order:-1}
  .ind__row{grid-template-columns:50px minmax(0,1fr) 40px}
  .ind__row p{grid-column:2/3}
  .ind__row .ar{grid-row:1;grid-column:3}
  .proc{height:auto}
  .proc__stage{position:relative;height:auto;padding:clamp(80px,10vw,120px) 0}
  .proc__track{flex-direction:column;transform:none!important}
  .pstep{flex:auto;min-height:0}
  .proc__bar{display:none}
  .ftr__brand{grid-column:1/-1}
  .ftr__col,.ftr__contact{grid-column:span 6}
  .phero__grid .l,.phero__grid .r{grid-column:1/-1}
  .shero__copy .l,.shero__copy .r{grid-column:1/-1}
  .shero__copy .r{margin-top:18px}
  .shero__vis{width:100%;left:0;bottom:auto;height:50vh}
  .shero__copy{bottom:40px}
  .capl{grid-template-columns:1fr}
  .cap:nth-child(odd){border-right:0}
  .cap:nth-child(even){padding-left:0}
  .chap{height:auto}
  .chap__stage{position:relative;height:auto;grid-template-columns:1fr;padding:60px 0}
  .chap__txt{min-height:0;padding-right:var(--gut)}
  .chap__item{position:relative;left:0;right:0;opacity:1;transform:none;margin-bottom:34px;pointer-events:auto}
  .chap__vis{height:min(80vw,520px)}
  .chap__dots{display:none}
  .related{grid-template-columns:1fr}
  .split>.a,.split>.b,.split--rev>.a,.split--rev>.b{grid-column:1/-1;order:0}
  .gw__in{grid-template-columns:50px minmax(0,1fr) 70px}
  .gw__subs{grid-column:2/3}
  .gw__vis{width:70px;height:70px;grid-row:1;grid-column:3}
  .gw__peek{display:none}
  .pcustom .l,.pcustom .r{grid-column:1/-1;justify-self:start}
  .ct__side,.ct__main{grid-column:1/-1}
  .cs-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-facts div:nth-child(2){border-right:0}
  .cs-facts div:nth-child(3){padding-left:0}
  .cs-facts div:nth-child(n+3){border-top:1px solid var(--line)}
  .cs-block>.l,.cs-block>.r{grid-column:1/-1}
  .g-a,.g-b,.g-c,.g-d{grid-column:1/-1}
  .wrow{grid-template-columns:40px minmax(0,1fr)}
  .wrow .tags,.wrow .go{grid-column:2/3}
  .wcards{grid-template-columns:1fr}
  .founder{grid-template-columns:1fr}
  .founder__card{max-width:420px}
  .beliefs{grid-template-columns:1fr}
  .creative__side{display:none}
  .world--navy .creative__stage{position:relative;height:100vh;height:100svh;min-height:640px;padding:0}
  .creative__copy{left:var(--gut);right:var(--gut);bottom:40px}
  .pcustom{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .form{grid-template-columns:1fr}
  .deliv{grid-template-columns:1fr}
  .stat b{font-size:44px}
  .hero__copy{bottom:96px}
  .hero__meta .mono{display:none}
  .laptop{--lw:320px!important}
  .phone{--pw:120px!important}
  .ftr__col,.ftr__contact{grid-column:1/-1}
  .prow__h{grid-template-columns:minmax(0,1fr) 40px;gap:14px}
  .prow__p{grid-column:1/2;text-align:left;font-size:30px}
  .prow__t{grid-row:1;grid-column:2;width:40px;height:40px}
  .faq details p{padding-right:0}
  .cs-stage{height:70vh;min-height:460px}
  .dash{transform:scale(.62)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js [data-reveal],.js [data-split] .w>span{opacity:1!important;transform:none!important}
  .marquee__t{animation:none}
}
@media print{.hdr,.mnav,.curtain,.preload,.consent{display:none!important}}

/* ---------- Chapter panels (branding / marketing) ---------- */
.bpanels,.mpanels{position:absolute;inset:8% var(--gut) 8% 0}
.bpanel,.mpanel{position:absolute;inset:0;border-radius:28px;overflow:hidden;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.96) translateY(20px);transition:opacity .8s var(--ease),transform 1s var(--ease);box-shadow:0 50px 100px -60px rgba(11,26,51,.5)}
.bpanel.is-on,.mpanel.is-on{opacity:1;transform:none}
.mpanel{background:linear-gradient(160deg,#E7EEF8,#F7FAFE)}
.appwall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:100%}
.ad--static{position:relative!important;transform:none!important;width:210px;height:450px}
.ad--static .phone{margin:0!important}
.pv-stage{position:relative;height:clamp(320px,40vw,520px);border-radius:28px;background:radial-gradient(60% 60% at 50% 45%,#fff,#E7EEF8);perspective:1200px;display:grid;place-items:center;overflow:hidden}
.pv-stage::after{content:"";position:absolute;left:30%;right:30%;bottom:14%;height:26px;background:radial-gradient(closest-side,rgba(11,26,51,.25),transparent);filter:blur(4px)}
.box3d--spin{position:relative;margin:0;transform-style:preserve-3d;animation:boxspin 14s linear infinite;transform:scale(1.4)}
@keyframes boxspin{from{transform:scale(1.4) rotateX(-14deg) rotateY(0)}to{transform:scale(1.4) rotateX(-14deg) rotateY(360deg)}}
@media (max-width:1024px){
  .bpanels,.mpanels{position:relative;inset:auto;height:min(90vw,520px);margin:0 var(--gut)}
  .bpanel:not(:first-child),.mpanel:not(:first-child){display:none}
  .bpanel:first-child,.mpanel:first-child{opacity:1;transform:none}
  .appwall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .beliefs[style*="repeat(3"],.beliefs[style*="repeat(4"]{grid-template-columns:1fr!important}
}
.cr-grid>*{min-width:0}
@media (max-width:1024px){.cr-grid{grid-template-columns:1fr}.cr-grid>*{grid-column:1/-1!important}.cr-tile{min-height:0}}

/* Creative page: product visual (the one product example) */
.pv-stage--can{background:radial-gradient(60% 60% at 50% 45%,#FFFFFF,#E7EEF8);height:clamp(360px,44vw,600px)}
.pv-cans{position:relative;width:min(70%,380px);aspect-ratio:600/733}
@keyframes canfloat{50%{transform:translateY(-10px) rotate(1deg)}}
/* Custom cursor (precise pointers only): navy / H&A blue on light, light blue on dark */
.cur,.cur-dot{position:fixed;left:0;top:0;pointer-events:none;z-index:10000;opacity:0;will-change:transform}
.cur{width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1.5px solid rgba(10,22,48,.55);display:grid;place-items:center;transition:opacity .3s,border-color .3s,background-color .3s}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#0A1630;transition:opacity .2s,background-color .3s}
.cur.is-on,.cur-dot.is-on{opacity:1}
.cur.is-hot{border-color:#1A56C4;background:rgba(26,86,196,.08)}
.cur.has-lbl{border-color:#1A56C4;background:#1A56C4}
.cur__lbl{font:700 5.2px/1 var(--sans);letter-spacing:.02em;white-space:nowrap;text-transform:uppercase;color:#fff;transform:scale(.001)}
.cur.has-lbl .cur__lbl{transform:none}
.cur.is-light{border-color:rgba(159,196,255,.75)}
.cur-dot.is-light{background:#9FC4FF}
.cur.is-light.is-hot{border-color:#9FC4FF;background:rgba(159,196,255,.12)}
.cur.is-light.has-lbl{background:#9FC4FF;border-color:#9FC4FF}.cur.is-light.has-lbl .cur__lbl{color:#0A1630}
.cur.is-text{opacity:.3}.cur-dot.is-text{opacity:0}
.cur.is-down{background:rgba(26,86,196,.18)}
html.has-cur,html.has-cur *{cursor:none!important}
html.has-cur input,html.has-cur textarea,html.has-cur [contenteditable="true"]{cursor:text!important}
html.has-cur select{cursor:pointer!important}
@media (hover:none),(pointer:coarse){.cur,.cur-dot{display:none}}
@media print{.cur,.cur-dot{display:none}}

/* ===== Story phone (CSS motion creative) ===== */
.sp{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:#0E2A3D}
.sp-f{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:22% 9% 34%;opacity:0;animation:spf 9s infinite}
.sp-f img{position:absolute;left:14%;top:18%;width:74%;transform:rotate(-7deg);animation:spc 9s infinite;animation-delay:inherit}
.sp-f b{position:relative;font-size:46px;line-height:.88;letter-spacing:-.05em}
@keyframes spf{0%{opacity:0}3%,31%{opacity:1}34%,100%{opacity:0}}
@keyframes spc{0%{transform:rotate(-12deg) translateY(12%) scale(.92)}20%{transform:rotate(-6deg) translateY(0) scale(1)}33%{transform:rotate(-2deg) translateY(-4%) scale(1.02)}100%{transform:rotate(-2deg)}}
.sp-top{position:absolute;left:0;right:0;top:0;padding:12% 7% 0;color:#fff}
.sp-bars{display:flex;gap:4px;margin-bottom:10px}.sp-bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.35);background-image:linear-gradient(#fff,#fff);background-repeat:no-repeat;background-size:0 100%;animation:spb 9s linear infinite}
.sp-bars i:nth-child(2){animation-delay:3s}.sp-bars i:nth-child(3){animation-delay:6s}
@keyframes spb{0%{background-size:0 100%}33.3%,100%{background-size:100% 100%}}
.sp-who{display:flex;align-items:center;gap:8px;font-size:13px}.sp-who i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#B7DB3F;font:700 14px/1 var(--sans);font-style:normal}.sp-who small{opacity:.7;font-size:11px}
.sp-cta{position:absolute;left:7%;right:7%;bottom:6%;font-style:normal;font-weight:700;font-size:15px;text-align:center;padding:14px;border-radius:999px;background:#fff;color:#0E2A3D}
@media (prefers-reduced-motion:reduce){.sp-f{animation:none}.sp-f:first-child{opacity:1}.sp-f img,.sp-bars i{animation:none}}

/* ===== Motion reel (CSS) ===== */
.mr{position:relative;aspect-ratio:16/10;border-radius:24px;overflow:hidden;background:#FBF9F6;box-shadow:0 40px 80px -50px rgba(11,26,51,.45),0 0 0 1px rgba(11,26,51,.06);container-type:inline-size;--d:10s}
.mr-bar{height:7%;display:flex;align-items:center;gap:.8cqw;padding:0 2.4cqw;background:#F1EEE9}.mr-bar i{width:1.1cqw;height:1.1cqw;border-radius:50%;background:#D8D2C8}.mr-bar span{margin-left:2cqw;font:400 1.4cqw var(--mono);color:#8C857C}
.mr-body{position:absolute;inset:14% 6% 14%;display:grid;grid-template-columns:1fr 1fr;gap:5cqw;align-items:center}
.mr-img{height:100%;border-radius:2cqw;background:#EDE6DC;display:grid;place-items:center;animation:mrImg var(--d) infinite}
.mr-img img{width:58%;animation:mrPic var(--d) infinite}
.mr-txt{display:grid;gap:1.6cqw;color:#1D1B19}
.mr-txt small{font:400 1.5cqw var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#C8704F}
.mr-txt b{font-family:var(--serif);font-weight:400;font-size:5.4cqw;line-height:.95;letter-spacing:-.02em;animation:mrTxt var(--d) infinite}
.mr-txt>span{height:1.2cqw;border-radius:1cqw;background:#E6E0D8}.mr-txt>span+span{width:70%}
.mr-price{font-style:normal;font-size:2.6cqw;font-weight:700}
.mr-btn{justify-self:start;font-size:1.9cqw;padding:1.4cqw 3cqw;border-radius:9cqw;background:#1D1B19;color:#fff;animation:mrBtn var(--d) infinite}
.mr-toast{position:absolute;right:5%;top:12%;font-size:1.8cqw;padding:1.4cqw 2.2cqw;border-radius:1.4cqw;background:#1D1B19;color:#fff;opacity:0;animation:mrToast var(--d) infinite}
.mr-pass{position:absolute;left:6%;bottom:4.5%;display:flex;gap:1cqw;font:400 1.4cqw var(--mono);letter-spacing:.08em;text-transform:uppercase}
.mr-pass span{padding:.8cqw 1.6cqw;border-radius:9cqw;color:#8C857C;background:#EFEAE3;animation:mrPass var(--d) infinite}
.mr-pass span:nth-child(2){animation-delay:calc(var(--d)*.3)}.mr-pass span:nth-child(3){animation-delay:calc(var(--d)*.6)}
.mr::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 calc(8.333% - 1px),rgba(47,125,225,.25) calc(8.333% - 1px) 8.333%);animation:mrGrid var(--d) infinite}
@keyframes mrGrid{0%,25%{opacity:1}32%,100%{opacity:0}}
@keyframes mrImg{0%,25%{background:transparent;outline:1px dashed rgba(47,125,225,.6)}30%,55%{background:#DDE2EA;outline-color:transparent}60%,100%{background:#EDE6DC}}
@keyframes mrPic{0%,55%{opacity:0;transform:translateY(8%)}62%,100%{opacity:1;transform:none}}
@keyframes mrTxt{0%,25%{color:transparent;background:rgba(47,125,225,.18)}30%,100%{color:#1D1B19;background:transparent}}
@keyframes mrBtn{0%,55%{background:#1A56C4}72%{transform:scale(1)}75%{transform:scale(.92);background:#C8704F}80%,100%{transform:scale(1);background:#1D1B19}}
@keyframes mrToast{0%,76%{opacity:0;transform:translateY(-20%)}80%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes mrPass{0%,28%{background:#1D1B19;color:#fff}31%,100%{background:#EFEAE3;color:#8C857C}}
@media (prefers-reduced-motion:reduce){.mr *,.mr::after{animation:none!important}.mr::after{opacity:0}.mr-img img{opacity:1}}

/* ===== CGI moments (externally produced films; appear only when assets exist) ===== */
.cgim{position:relative;height:320vh;background:#03060C;color:#fff}
.cgim__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.cgim__canvas,.cgim__poster,.cgim video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cgim.is-live .cgim__poster{opacity:0;transition:opacity .6s}
.cgim__copy{position:absolute;left:var(--gut);top:50%;transform:translateY(-50%);max-width:min(520px,40vw);z-index:2}
.cgim__ch{margin-top:14px;font-size:clamp(18px,1.6vw,24px);color:#C9D6EC;opacity:.25;transition:opacity .5s}
.cgim__ch.is-on{opacity:1}
.cgim__note{position:absolute;left:var(--gut);bottom:24px;font:400 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#8FA3C6;z-index:2}
.cgim__prog{position:absolute;right:var(--gut);bottom:28px;width:120px;height:2px;background:rgba(255,255,255,.18);z-index:2}.cgim__prog i{display:block;height:100%;background:#9FC4FF;transform-origin:left;transform:scaleX(0)}
@media (max-width:1024px){.cgim{height:auto}.cgim__stage{position:relative;height:auto;aspect-ratio:4/5}.cgim__copy{top:auto;bottom:70px;transform:none;max-width:none;right:var(--gut)}.cgim__ch{display:none}}

/* restored shared components (A/B panel, light switch, UI motion tile) */
.dash{height:auto}
.ab{display:grid;gap:8px}
.ab__row{display:grid;grid-template-columns:10px minmax(0,1.3fr) minmax(0,1fr) 58px;gap:10px;align-items:center;font-size:12px}
.ab__sw{width:10px;height:10px;border-radius:3px}
.ab__m{height:6px;border-radius:6px;background:var(--paper);overflow:hidden}
.ab__m i{display:block;height:100%;width:var(--w);border-radius:6px}
.ab__t{font:400 10px var(--mono);color:var(--mute);text-align:right;letter-spacing:.04em;text-transform:uppercase}
.dash>svg{height:84px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kpi{border:1px solid var(--line);border-radius:10px;padding:8px 10px;color:var(--blue)}
.kpi small{display:block;font:400 9.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.kpi svg{width:100%;height:18px}
.mat-switch--light button{border-color:var(--line-2);color:var(--ink-2);display:inline-flex;align-items:center;gap:8px}
.mat-switch--light button:hover{border-color:var(--ink);color:var(--ink)}
.mat-switch--light button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.mat-switch--light button i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.uimo{place-items:center}
.uimo__card{width:58%;border-radius:14px;background:#fff;padding:14px;display:grid;gap:8px;animation:uimoC 5s var(--ease-io) infinite}
.uimo__card b{height:54px;border-radius:9px;background:var(--grad)}
.uimo__card span{height:7px;border-radius:4px;background:#E7EEF8}.uimo__card span+span{width:60%}
.uimo__card em{justify-self:end;width:64px;height:22px;border-radius:999px;background:var(--blue);animation:uimoB 5s var(--ease-io) infinite}
.uimo__list{position:absolute;right:8%;top:14%;display:grid;gap:6px}
.uimo__list i{display:block;width:70px;height:10px;border-radius:5px;background:rgba(159,196,255,.35);animation:uimoL 2.4s var(--ease-io) infinite}
@keyframes uimoC{0%,15%{transform:translateY(16px) scale(.96);opacity:.0}30%,80%{transform:none;opacity:1}100%{transform:translateY(-10px);opacity:0}}
@keyframes uimoB{0%,45%{transform:scale(1)}52%{transform:scale(.9)}60%,100%{transform:scale(1);background:#4FC3F7}}
@keyframes uimoL{0%,100%{transform:scaleX(.5);transform-origin:left;opacity:.5}50%{transform:scaleX(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.uimo__card,.uimo__card em,.uimo__list i{animation:none;opacity:1}}

/* =====================================================================
   SAFIYA FABRIC — connected case (Branding · Marketing · Creative)
   ===================================================================== */
.sf-note{position:absolute;left:0;bottom:12px;font:400 10.5px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute);max-width:min(560px,92%);z-index:4}
.sf-note--static{position:static;display:block;margin-top:18px;max-width:none}
.navy .sf-note,.on-dark .sf-note,.world--navy .sf-note{color:#8FA3C6}
.sfw{display:block;height:auto;width:auto;max-width:100%}
.sfm{display:block;width:28px;height:28px;border-radius:50%}

/* ---- Services thumbnails ---- */
.sth{position:relative;display:grid;place-items:center;width:100%;height:100%;overflow:hidden}
.sth--brand{background:radial-gradient(90% 90% at 50% 40%,#E9E3D9,#CFC6B8)}
.sth--brand img{width:74%;height:auto;transform:rotate(-6deg);box-shadow:0 6px 14px -6px rgba(0,0,0,.45)}
.sth--film{background:#0B0F14}
.sth__knit,.sff__knit{position:absolute;inset:0;background:
  repeating-linear-gradient(60deg,transparent 0 5px,rgba(176,141,87,.42) 5px 7px,transparent 7px 12px),
  repeating-linear-gradient(-60deg,transparent 0 5px,rgba(176,141,87,.42) 5px 7px,transparent 7px 12px),
  radial-gradient(70% 70% at 50% 45%,#2A241C,#0B0F14);
  -webkit-mask:radial-gradient(75% 75% at 50% 45%,#000 30%,transparent 100%);mask:radial-gradient(75% 75% at 50% 45%,#000 30%,transparent 100%)}
.sth__play{position:relative;width:28%;aspect-ratio:1;max-width:44px;border-radius:50%;background:rgba(242,238,231,.92)}
.sth__play::after{content:"";position:absolute;left:40%;top:30%;border-left:9px solid #111;border-top:6px solid transparent;border-bottom:6px solid transparent}

/* ---- BRANDING: the brand, in hand (flat-lay → lift → settle) ---- */
.sfb{position:absolute;inset:0;perspective:1800px;perspective-origin:50% 40%;overflow:hidden;--rx:0deg;--rz:0deg;--k:0}
.sfb__cam{position:absolute;left:50%;top:48%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.sfb__table{position:absolute;left:-500px;top:-320px;width:1000px;height:640px;border-radius:22px;transform-style:preserve-3d;
  background:radial-gradient(60% 70% at 45% 35%,#E6DFD3 0%,#D6CDBF 55%,#C4BAAA 100%);box-shadow:0 60px 120px -50px rgba(40,32,20,.55),inset 0 0 0 1px rgba(255,255,255,.35)}
.sfb__table::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.28),transparent 42%,rgba(0,0,0,.08))}
.sfb-i{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform-style:preserve-3d;transform:translateZ(calc(var(--z) * var(--k) * 1px)) rotate(var(--r))}
.sfb-i>img,.sfb-i>svg,.sfb-i>span:not(.sfb-tag),.sfb-i>.sfb-phone{display:block;width:100%;height:auto;box-shadow:0 calc(2px + var(--k) * 34px) calc(6px + var(--k) * 44px) calc(var(--k) * -14px) rgba(35,28,18,calc(.28 + var(--k) * .12))}
.sfb-phone{border-radius:18px;padding:5px;background:#141414}
.sfb-phone img{display:block;width:100%;border-radius:13px;aspect-ratio:9/18;object-fit:cover;object-position:top}
.sfb-tag{position:absolute;left:50%;top:0;display:flex;align-items:center;gap:6px;white-space:nowrap;font:700 11px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:#111;background:rgba(242,238,231,.94);padding:7px 10px;border-radius:999px;box-shadow:0 8px 20px -10px rgba(0,0,0,.45);
  transform-origin:50% 100%;transform:translate(-50%,-130%) rotate(calc(-1 * var(--r))) rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx))) scale(calc(var(--k) * 1.35));opacity:var(--tg,0);transition:opacity .4s}
.sfb-tag i{width:6px;height:6px;border-radius:50%;background:#B08D57}
.sfb .sf-note{left:auto;right:var(--gut);bottom:14px;text-align:right}
.shero .sfb .sf-note{right:var(--gut);bottom:6px}
.world .sfb .sf-note{right:var(--gut)}

/* ---- MARKETING: collection launch (one campaign through every channel) ---- */
.sfj{position:absolute;inset:9% var(--gut) 15% 0;--mx:0;--my:0}
.world .sfj{inset:12% var(--gut) 17% 0}
.sfj__stage{position:absolute;inset:0;border-radius:28px;overflow:hidden;background:#0E0F10;box-shadow:0 50px 100px -50px rgba(11,26,51,.55);isolation:isolate}
.sfj-shot{position:absolute;inset:0;opacity:0;visibility:hidden;will-change:transform,opacity;container-type:size}
.sfj-shot.is-vis{visibility:visible}
.sfj__steps{position:absolute;left:0;right:0;bottom:-48px;display:flex;gap:6px;flex-wrap:wrap}
.sfj__steps span{font:700 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;border-radius:999px;border:1px solid var(--line-2);color:var(--mute);transition:all .4s var(--ease)}
.sfj__steps span.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.sfj .sf-note{bottom:-78px}
/* Key visual (campaign artwork) */
/* City + billboard */
.sfj-shot--city{--ox:69%;--oy:36%;transform-origin:var(--ox) var(--oy);background:#10151F}
.sfj-city{position:absolute;inset:0}
.sfj-sky{position:absolute;inset:0;background:linear-gradient(180deg,#1B2436 0%,#46475A 48%,#A07A63 72%,#C99A78 100%)}
.sfj-bld{position:absolute;bottom:22%;background:#141A24;background-image:repeating-linear-gradient(90deg,transparent 0 14px,rgba(255,214,160,.16) 14px 20px,transparent 20px 30px),repeating-linear-gradient(0deg,transparent 0 16px,#141A24 16px 26px)}
.sfj-bld.b1{left:0;width:28%;height:62%;background-color:#131924}
.sfj-bld.b2{left:40%;width:58%;height:48%;background:#1C222C}
.sfj-bld.b3{left:24%;width:20%;height:74%;background-color:#0F141C}
.sfj-bb{position:absolute;left:47%;top:18%;width:44%;padding:.8cqw;background:#0B0B0B;border-radius:4px;box-shadow:0 0 0 2px #2A2F38,0 0 60px 10px rgba(255,236,200,.18)}
.sfj-bb::after{content:"";position:absolute;inset:.8cqw;background:linear-gradient(180deg,rgba(255,240,215,.18),transparent 40%);pointer-events:none}
.sfj-post{position:absolute;left:47%;top:100%;width:6%;height:40cqh;background:linear-gradient(90deg,#1A1F28,#2C323C,#1A1F28)}
.sfj-street{position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(180deg,#26282D,#121316)}
.sfj-refl{position:absolute;left:47%;width:44%;bottom:0;height:18%;background:linear-gradient(180deg,rgba(176,141,87,.35),transparent);filter:blur(10px);opacity:.7}
/* Social */
.sfj-shot--social{background:radial-gradient(70% 80% at 50% 40%,#2A241C,#0F120E)}
.sfj-phone{position:absolute;left:50%;top:50%;height:86cqh;aspect-ratio:9/18.6;transform:translate(-50%,-50%) rotate(-4deg);border-radius:4.5cqh;background:#161616;padding:1.1cqh;box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.sfj-phone__scr{position:relative;height:100%;border-radius:3.6cqh;overflow:hidden;background:#B08D57;container-type:inline-size;display:flex;flex-direction:column;padding:9cqw 6cqw 6cqw;color:#F2EEE7}
.sfj-bars{display:flex;gap:2cqw}.sfj-bars i{flex:1;height:1.2cqw;border-radius:2cqw;background:rgba(255,255,255,.35)}.sfj-bars i:first-child{background:#fff}
.sfj-who{display:flex;align-items:center;gap:3cqw;margin:4cqw 0 5cqw;font-size:max(9px,5.4cqw)}.sfj-who .sfm{width:10cqw;height:10cqw}.sfj-who small{opacity:.7;font-size:.8em}
.sfj-phone__scr em{margin-top:5cqw;font-style:normal;font-weight:700;font-size:max(9px,5.6cqw);text-align:center;padding:4cqw;border-radius:99px;background:#F2EEE7;color:#111}
/* Store */
.sfj-laptop{position:absolute;left:8%;top:14%;width:66%}
.sfj-laptop__scr{position:relative;aspect-ratio:16/10;border-radius:1.4cqw 1.4cqw 0 0;background:#111;padding:1.2cqw 1.2cqw 1.6cqw;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.sfj-laptop__scr img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:.4cqw;display:block}
.sfj-laptop__base{display:block;height:1.4cqw;margin:0 -5%;border-radius:0 0 1cqw 1cqw;background:linear-gradient(#C9C5BE,#8E8A84)}
.sfj-mphone{position:absolute;right:9%;top:24%;width:17%;aspect-ratio:9/19;border-radius:2.4cqw;background:#111;padding:.7cqw;box-shadow:0 30px 60px -20px rgba(0,0,0,.55);transform:rotate(5deg)}
.sfj-mphone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:1.8cqw;display:block}
/* Drop */
.sfj-live{position:absolute;right:4cqw;top:4cqw;display:flex;align-items:center;gap:8px;font:700 max(10px,1.3cqw)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:1.2cqw 1.8cqw;border-radius:99px;background:#F2EEE7;color:#111}
.sfj-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#B08D57;box-shadow:0 0 0 0 rgba(176,141,87,.6);animation:sfPulse 1.8s infinite}
@keyframes sfPulse{0%{box-shadow:0 0 0 0 rgba(176,141,87,.6)}100%{box-shadow:0 0 0 12px rgba(176,141,87,0)}}
/* Concept ad cards (Marketing page panel) */
.sf-ab{background:linear-gradient(160deg,#EDE7DD,#F8F5F0)!important}
.sf-ad{width:min(40%,240px);background:#fff;border-radius:16px;padding:10px;box-shadow:0 30px 60px -30px rgba(40,30,15,.45);display:grid;gap:10px;transform:rotate(-3deg) translateY(-4%)}
.sf-ad--b{transform:rotate(3deg) translateY(6%)}
.sf-ad__top{display:flex;align-items:center;gap:8px;font-size:12px}.sf-ad__top .sfm{width:24px;height:24px;background:#111}.sf-ad__top small{margin-left:auto;font:400 10px var(--mono);color:var(--mute);text-transform:uppercase}
/* Branding page panels */
.sfp--logo{background:#111!important;flex-direction:column;gap:clamp(24px,4vw,60px)}
.sfw--xl{width:min(60%,440px)}
.sfp--apps{background:radial-gradient(70% 80% at 50% 40%,#E6DFD3,#C9BFAF)!important;gap:2.4%;padding:0 6%}

/* ---- CREATIVE: the film (video-first) ---- */
.sff{position:relative;width:100%}
.sff__frame{position:relative;aspect-ratio:16/9;border-radius:clamp(14px,1.8vw,26px);overflow:hidden;background:#07090C;box-shadow:0 60px 120px -50px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06)}
.sff__poster,.sff__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sff__frame video{opacity:0;transition:opacity .8s}
.sff__frame video.is-on{opacity:1}
.sff__play{position:absolute;left:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);z-index:3;display:inline-flex;align-items:center;gap:12px;padding:12px 14px 12px 20px;border-radius:999px;background:#F2EEE7;color:#111;font:700 14px/1 var(--sans);letter-spacing:-.01em;transition:transform .4s var(--ease)}
.sff__play svg{width:14px;height:14px}
.sff__play:hover{transform:scale(1.04)}
.sff__mute{position:absolute;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);z-index:3;width:44px;height:44px;border-radius:50%;background:rgba(242,238,231,.9);color:#111;display:grid;place-items:center}
.sff__mute svg{width:14px;height:14px}
.sff.is-full .sff__play,.sff.is-full .sff__mute{display:none}
.sff--pending .sff__frame{display:grid;place-items:center;background:#0B0F14}
.sff__knit{-webkit-mask:radial-gradient(80% 80% at 50% 50%,#000 20%,transparent 100%);mask:radial-gradient(80% 80% at 50% 50%,#000 20%,transparent 100%);opacity:.8;animation:sfKnit 18s linear infinite}
@keyframes sfKnit{to{background-position:0 120px,0 120px,0 0}}
.sff__card{position:relative;z-index:2;max-width:min(680px,84%);text-align:center;color:#F2EEE7;display:grid;justify-items:center;gap:clamp(10px,1.4vw,18px)}
.sff__badge{display:inline-flex;align-items:center;gap:8px;font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border-radius:999px;border:1px solid rgba(242,238,231,.35);color:#E4DCCF}
.sff__badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#C9A86A;animation:sfPulse2 1.6s infinite}
@keyframes sfPulse2{50%{opacity:.25}}
.sff__card b{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,84px);line-height:.92;letter-spacing:-.01em}
.sff__card .it{color:#D8BF8F}
.sff__card p{font-size:clamp(14px,1.2vw,17px);line-height:1.5;color:#B9B2A6;max-width:520px}
.sff__stages{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.sff__stages li{font:400 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#CFC6B8;padding:7px 10px;border-radius:999px;background:rgba(242,238,231,.07)}
.sff__stages li span{color:#B08D57;margin-right:6px}
.sff--home .sff__card p{display:none}
.cfilm{background:var(--navy);color:#fff;padding:calc(var(--header) + clamp(20px,3vw,40px)) 0 clamp(60px,7vw,110px)}
.cfilm .crumbs{color:#8FA3C6;margin-bottom:clamp(18px,2vw,28px)}
.cfilm__frame{margin:0 auto}
.cfilm__copy{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);align-items:end;margin-top:clamp(30px,4vw,60px)}
.cfilm__copy .l{grid-column:1/7}.cfilm__copy .r{grid-column:8/13}
.cfilm .lead{color:#B7C6E0}
/* Home: creative world */
.creative__scene--film{position:absolute;right:var(--gut);top:calc(var(--header) + 28px);width:min(60%,calc((100svh - var(--header) - 90px) * 16 / 9));z-index:1}
.creative__scene--film .sff__card b{font-size:clamp(30px,3.6vw,64px)}
/* Creative page: product visuals + reel + story */
.pv-stage--tee{background:radial-gradient(60% 60% at 50% 45%,#F7F4EE,#DDD4C6);height:clamp(360px,44vw,600px)}
.pv-stage--tee::after{background:radial-gradient(closest-side,rgba(40,30,15,.28),transparent)}
.pv-tee{position:absolute;inset:0;opacity:0;transform:translateY(16px) scale(.97);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.pv-tee.is-on{opacity:1;transform:none;animation:canfloat 6s ease-in-out infinite}
.sp .sp-mono{width:28px;height:28px}
@media (prefers-reduced-motion:reduce){.pv-tee.is-on,.sff__knit,.sfj-live::before,.sff__badge::before{animation:none!important}}
@media (max-width:1024px){
  .sfj,.world .sfj{inset:4% var(--gut) 60px var(--gut)}
  .shero .sfj{inset:2% var(--gut) 56px var(--gut)}
  .sfj__steps{bottom:-44px;gap:4px}.sfj__steps span{padding:6px 9px;font-size:10px}
  .sfj .sf-note{display:none}
  .sfb .sf-note{right:var(--gut);left:var(--gut);text-align:left}
  .creative__scene--film{position:relative;right:auto;top:auto;width:auto;margin:0 var(--gut);padding-top:calc(var(--header) + 24px)}
  .world--navy.creative .creative__stage{height:auto;min-height:0;padding-bottom:40px}
  .world--navy.creative .creative__copy{position:relative;left:auto;right:auto;bottom:auto;padding:32px var(--gut) 0}
  .cfilm__copy .l,.cfilm__copy .r{grid-column:1/-1}.cfilm__copy .r{margin-top:18px}
  .sff__stages{display:none}
  .sff__card p{font-size:13px}
}
@media (max-width:640px){
  .sff--pending .sff__frame{aspect-ratio:4/5}
  .sff--pending.sff--page .sff__stages{display:flex}
  .sff__stages li{font-size:9.5px;padding:5px 8px}
  .sfj__steps span:nth-child(n){padding:5px 7px;font-size:9px;letter-spacing:.03em}
  .sf-ad{width:44%}
  .sfb-tag{font-size:10px}
}
.sfj-sky{background:linear-gradient(180deg,#18202F 0%,#343B50 30%,#7E6A66 56%,#C99774 74%,#E1B48A 80%)}
.sfj-bld.b2{background-color:#232933}
.sfj-bld.b2{height:30%}
.cfilm__frame{width:min(100%,calc((100svh - var(--header) - 240px) * 16 / 9));min-width:min(100%,640px)}
@media (max-width:1024px){.shero .sfj{top:64px;bottom:64px}.shero .sfb{top:40px}}

/* ---- Safiya Fabric: official assets ---- */
.sfb-i--poster{--x:34px;--y:40px;--w:232px;--r:-3deg;--z:40}
.sfb-i--box{--x:292px;--y:52px;--w:326px;--r:2deg;--z:18}
.sfb-i--logo{--x:648px;--y:36px;--w:176px;--r:-2deg;--z:90}
.sfb-i--tags{--x:258px;--y:384px;--w:196px;--r:5deg;--z:110}
.sfb-i--card{--x:40px;--y:388px;--w:196px;--r:-6deg;--z:66}
.sfb-i--dark{--x:716px;--y:424px;--w:144px;--r:8deg;--z:96}
.sfb-i--label{--x:474px;--y:330px;--w:226px;--r:-4deg;--z:150}
.sfb-i--phone{--x:858px;--y:206px;--w:116px;--r:7deg;--z:170}
.sfb-i>img{border-radius:4px}
.sfb__table{background:radial-gradient(60% 70% at 45% 35%,#EAE3D8 0%,#D9CEBE 55%,#C6B8A4 100%)}
.sfb-tag i{background:#B08D57}
.sfj-cover{position:absolute;inset:0}
.sfj-cover img{width:100%;height:100%;object-fit:cover;display:block}
.sfj-shot--product .sfj-cover img{animation:sfKen 12s ease-in-out infinite alternate}
@keyframes sfKen{to{transform:scale(1.08)}}
.sfj-shot--store{background:radial-gradient(80% 80% at 45% 40%,#F1ECE3,#D9CEBE)}
/* key visual: official lockup + the brand's own posters */
.sfkv{position:relative;container-type:inline-size;background:radial-gradient(90% 90% at 30% 40%,#F4EFE7,#E3D9CA);overflow:hidden;border-radius:6px;aspect-ratio:16/10}
.sfkv__logo{position:absolute;left:6%;top:50%;width:30%;transform:translateY(-50%)}
.sfkv__logo .sfw{width:100%}
.sfkv__p{position:absolute;right:4%;top:7%;bottom:7%;left:42%;display:flex;gap:3%;align-items:stretch}
.sfkv__p img{flex:1;min-width:0;height:100%;object-fit:cover;border-radius:2px;box-shadow:0 2cqw 4cqw -1cqw rgba(40,30,15,.35)}
.sfkv--s{aspect-ratio:4/5;background:#E9E1D5}
.sfkv--s img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sfj-shot--kv .sfkv{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.sfj-bb .sfkv{border-radius:2px}
.sfj-phone__scr{background:#141210}
.sfj-phone__scr .sfkv{flex:1;aspect-ratio:auto;border-radius:3cqw}
.sfj-av{display:inline-grid;place-items:center;width:10cqw;height:10cqw;min-width:22px;min-height:22px;border-radius:50%;background:#141210;box-shadow:0 0 0 1px rgba(176,141,87,.6);flex:none}
.sfj-av .sfm{width:52%;height:auto;border-radius:0}
.sf-ad__top .sfj-av{width:26px;height:26px}
.sf-ab{background:linear-gradient(160deg,#EDE7DD,#F8F5F0)!important}
/* branding panels */
.sfp--logo{background:#141210!important}
.sfp--cream{background:radial-gradient(80% 80% at 50% 40%,#F4EFE7,#E4DACB)!important;flex-direction:column}
.sfp--cream .sfw--xl{width:min(46%,340px)}
.sfw--xl{width:min(64%,520px)}
.sfp-cap{position:absolute;left:6%;bottom:6%;color:#6B5E4E!important}
.sfp--logo .sfp-cap{color:#8C8070!important}
.sfp--apps{background:radial-gradient(70% 80% at 50% 40%,#EAE3D8,#CFC3B1)!important;display:grid!important;grid-template-columns:1fr 1fr;gap:3%;padding:6%}
.sfp--apps img{width:100%;height:100%;object-fit:cover;border-radius:10px;box-shadow:0 24px 40px -24px rgba(35,28,18,.55)}
/* services thumbs */
.sth--mkt{background:#E9E1D5}
.sth--mkt img,.sth--brand img{width:100%;height:100%;object-fit:cover;transform:none;box-shadow:none}
/* creative page */
.pv-stage--tee{background:radial-gradient(60% 60% at 50% 45%,#F7F4EE,#DDD4C6)}
.pv-stage--tee .pv-cans{width:min(84%,560px);aspect-ratio:802/452}
.pv-tee img{width:100%;height:100%;object-fit:cover;border-radius:14px;box-shadow:0 40px 60px -30px rgba(40,30,15,.5)}
.pv-tee.is-on{animation:none}
.mr-img--tee{overflow:hidden}
.mr-img--tee img{width:100%;height:100%;object-fit:cover;border-radius:2cqw;animation:mrPic var(--d) infinite}
.sp--sf{background:#141210}
.sp-f--img{padding:0}
.sp-f--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none!important;animation:sfKen 9s ease-in-out infinite alternate!important;left:0;top:0}
.sp--sf .sp-top{background:linear-gradient(180deg,rgba(0,0,0,.45),transparent);padding-bottom:10%}
.sp--sf .sp-who .sfj-av{width:28px;height:28px}
.sp--sf .sp-cta{color:#141210}
@media (prefers-reduced-motion:reduce){.sfj-shot--product .sfj-cover img,.sp-f--img img,.mr-img--tee img{animation:none!important}}
.sfkv__p img{object-position:88% 30%}
.pv-tee img,.sp img,.sfj-phone img{opacity:1!important}
.pv-tee img{transform:none!important;animation:none!important;position:static}
.sfp--pal{align-items:stretch!important;grid-template-rows:1fr}
.sfp--pal .sfp-cap{top:16px;bottom:auto;left:18px;right:18px;color:#9A8C7A!important;mix-blend-mode:difference}
.cfilm__frame{width:min(100%,calc((100svh - var(--header) - 110px) * 16 / 9));min-width:min(100%,640px)}
.sff__play{left:auto;right:clamp(16px,2.4vw,32px)}
.sff__mute{bottom:auto;top:clamp(16px,2.4vw,32px)}

/* =====================================================================
   MARKETING — connected digital-marketing ecosystem (.mkc)
   Scoped to .mkc only; replaces the former Safiya campaign-journey visual.
   ===================================================================== */
.mkc{position:absolute;inset:9% var(--gut) 15% 0}
.world .mkc{inset:12% var(--gut) 17% 0}
.mkc__stage{position:absolute;inset:0;border-radius:28px;overflow:hidden;container-type:size;isolation:isolate;
  background:radial-gradient(90% 80% at 70% 20%,#FFFFFF 0%,#F3F7FC 55%,#E7EEF8 100%);box-shadow:0 50px 100px -50px rgba(11,26,51,.35),inset 0 0 0 1px rgba(11,26,51,.05)}
.mkc__stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(26,86,196,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(26,86,196,.05) 1px,transparent 1px);background-size:6cqw 6cqw;-webkit-mask:radial-gradient(80% 80% at 50% 45%,#000 30%,transparent 100%);mask:radial-gradient(80% 80% at 50% 45%,#000 30%,transparent 100%);pointer-events:none}
.mkc-graph{position:absolute;left:0;right:0;bottom:0;width:100%;height:78%;z-index:0}
.mkc-graph .ln{stroke-dasharray:1400;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease)}
.mkc-graph .area{transition:opacity .8s}
.mkc-el{position:absolute;opacity:var(--o,0);transform:translate3d(var(--x,0),var(--y,0),0) scale(var(--s,.94));filter:blur(var(--b,0px));transform-origin:50% 50%;
  transition:opacity .8s var(--ease),transform 1s var(--ease),filter .8s var(--ease);pointer-events:none}
.mkc-card,.mkc-mgr,.mkc-serp,.mkc-seo,.mkc-reels,.mkc-funnel{background:rgba(255,255,255,.94);border-radius:max(10px,1.6cqw);box-shadow:0 3cqw 6cqw -3cqw rgba(11,26,51,.28),0 0 0 1px rgba(11,26,51,.05);backdrop-filter:blur(6px)}
.mkc-h{display:flex;flex-direction:column;gap:.4cqw;margin-bottom:1.4cqw}
.mkc-h b{font:700 max(10px,1.7cqw)/1.1 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.mkc-h small{font:400 max(8px,1.05cqw)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
/* campaign manager */
.mkc-mgr{left:5%;top:9%;width:50%;padding:2.2cqw;z-index:1}
.mkc-row{display:grid;grid-template-columns:1.2cqw minmax(0,1.5fr) 7cqw minmax(0,1fr);gap:1.2cqw;align-items:center;padding:1cqw 0;border-top:1px solid var(--line);font-size:max(9px,1.25cqw);color:var(--ink-2)}
.mkc-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkc-row .dot{width:1cqw;height:1cqw;min-width:6px;min-height:6px;border-radius:50%;background:#C9D3E3}.mkc-row .dot.on{background:#2FB67C;box-shadow:0 0 0 .5cqw rgba(47,182,124,.15)}
.mkc-row em{font:400 max(8px,1.05cqw)/1 var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.06em;color:var(--blue)}
.mkc-row .bar{height:.7cqw;min-height:4px;border-radius:9px;background:#EDF2F9;overflow:hidden}.mkc-row .bar b{display:block;height:100%;width:var(--w);border-radius:9px;background:linear-gradient(90deg,#1A56C4,#4FA3F7)}
.mkc-spark{display:block;width:100%;height:4.5cqw;margin-top:1.2cqw}.mkc-spark path{fill:none;stroke:#1A56C4;stroke-width:2;vector-effect:non-scaling-stroke}
/* search */
.mkc-serp{left:30%;top:10%;width:54%;padding:2cqw;z-index:2}
.mkc-q{display:flex;align-items:center;gap:1cqw;padding:1.1cqw 1.6cqw;border-radius:99px;box-shadow:0 0 0 1px var(--line-2);font-size:max(10px,1.45cqw);color:var(--ink);margin-bottom:1.6cqw}
.mkc-q svg{width:max(12px,1.6cqw);height:max(12px,1.6cqw);fill:none;stroke:var(--mute);stroke-width:2}
.mkc-res{position:relative;padding:1.1cqw 0;border-top:1px solid var(--line)}
.mkc-res small{display:block;font-size:max(8px,1.05cqw);color:var(--mute)}.mkc-res small b{color:var(--ink)}
.mkc-res .t{display:block;font:500 max(10px,1.6cqw)/1.25 var(--sans);color:#1A56C4;margin:.4cqw 0}
.mkc-res p{font-size:max(8px,1.15cqw);line-height:1.4;color:var(--ink-2);margin:0}
.mkc-links{display:flex;gap:.8cqw;margin-top:.9cqw}.mkc-links span{font-size:max(8px,1.05cqw);padding:.5cqw 1cqw;border-radius:99px;background:#EEF3FB;color:#1A56C4}
.mkc-res.ghost small,.mkc-res.ghost .t,.mkc-res.ghost p{height:max(6px,.9cqw);border-radius:9px;background:#EDF1F7;margin:.6cqw 0;color:transparent}.mkc-res.ghost small{width:30%}.mkc-res.ghost .t{width:70%}.mkc-res.ghost p{width:90%}
.mkc-rank{position:absolute;right:0;top:1.1cqw;font:700 max(9px,1.2cqw)/1 var(--sans);color:#fff;background:var(--navy);padding:.6cqw .9cqw;border-radius:99px}
/* SEO */
.mkc-seo{left:38%;top:12%;width:48%;padding:2.2cqw;z-index:2}
.mkc-kw{display:grid;grid-template-columns:minmax(0,1fr) 4cqw 6cqw;gap:1cqw;align-items:center;padding:1cqw 0;border-top:1px solid var(--line);font-size:max(9px,1.3cqw);color:var(--ink-2)}
.mkc-kw b{font:700 max(10px,1.5cqw)/1 var(--sans);color:var(--ink);text-align:right}.mkc-kw em{font-style:normal;font:400 max(8px,1.05cqw)/1 var(--mono);color:#2FB67C;text-align:right}
/* content */
.mkc-reels{left:5%;top:12%;width:52%;padding:2cqw;z-index:2}
.mkc-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw}
.mkc-tiles span{position:relative;aspect-ratio:9/15;border-radius:max(8px,1.2cqw);background-size:cover;background-position:center;box-shadow:inset 0 -40% 30px -10px rgba(0,0,0,.35)}
.mkc-tiles svg{position:absolute;left:50%;top:50%;width:26%;transform:translate(-50%,-50%);fill:#fff;opacity:.92;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.mkc-tiles small{position:absolute;left:8%;bottom:6%;font:400 max(8px,1cqw)/1 var(--mono);color:#fff}
.mkc-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:.8cqw;margin-top:1.6cqw}
.mkc-cal span{display:flex;flex-direction:column;align-items:center;gap:.6cqw}.mkc-cal small{font:400 max(7px,.95cqw)/1 var(--mono);color:var(--mute);text-transform:uppercase}
.mkc-cal i{width:1.3cqw;height:1.3cqw;min-width:7px;min-height:7px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2)}.mkc-cal i.on{background:#1A56C4;box-shadow:none}
/* phone */
.mkc-phone{left:61%;top:5%;height:90%;aspect-ratio:9/19;border-radius:4.4cqh;background:linear-gradient(150deg,#26344d,#0b1322);padding:1.2cqh;z-index:4;box-shadow:0 4cqw 8cqw -3cqw rgba(11,26,51,.55)}
.mkc-phone__scr{position:relative;height:100%;border-radius:3.4cqh;overflow:hidden;background:#fff;container-type:inline-size}
.mkc-scr{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.mkc-scr--feed{display:flex;flex-direction:column;padding-top:9cqw}
.mkc-top{display:flex;align-items:center;gap:3cqw;padding:3cqw 4cqw;font-size:max(8px,5cqw);color:var(--ink)}.mkc-top small{color:var(--mute);font-size:.8em}
.mkc-top.on-img{position:absolute;left:0;right:0;top:7%;color:#fff}.mkc-top.on-img small{color:rgba(255,255,255,.8)}
.mkc-av{display:inline-grid;place-items:center;width:10cqw;height:10cqw;min-width:16px;min-height:16px;border-radius:50%;background:#141210;flex:none}.mkc-av img{width:52%;height:auto}
.mkc-media{aspect-ratio:4/5;overflow:hidden}.mkc-media img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.mkc-acts{display:flex;align-items:center;gap:4cqw;padding:3.5cqw 4cqw}.mkc-acts i{flex:1}
.mkc-acts svg,.mkc-side svg{width:7cqw;height:7cqw;fill:none;stroke:var(--ink);stroke-width:1.8}
.mkc-cta{margin:0 4cqw;padding:3cqw 4cqw;border-radius:2cqw;background:var(--navy);color:#fff;font:700 max(8px,4.6cqw)/1 var(--sans);display:flex;justify-content:space-between}
.mkc-line{display:block;height:2.4cqw;margin:3cqw 4cqw 0;border-radius:9px;background:#EDF1F7}.mkc-line.s{width:55%}
.mkc-scr--story img,.mkc-scr--reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.mkc-scr--story::after,.mkc-scr--reel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 25%,transparent 60%,rgba(0,0,0,.5))}
.mkc-bars{position:absolute;left:4cqw;right:4cqw;top:4%;display:flex;gap:1.5cqw;z-index:2}.mkc-bars i{flex:1;height:1cqw;border-radius:9px;background:rgba(255,255,255,.4)}.mkc-bars i:first-child{background:#fff}
.mkc-scr--story .mkc-top,.mkc-pill,.mkc-side,.mkc-reelcap,.mkc-playbig{z-index:2}
.mkc-pill{position:absolute;left:8cqw;right:8cqw;bottom:6%;text-align:center;padding:4cqw;border-radius:99px;background:#fff;color:var(--ink);font:700 max(8px,4.8cqw)/1 var(--sans)}
.mkc-playbig{position:absolute;left:50%;top:45%;width:18cqw;height:18cqw;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;backdrop-filter:blur(4px)}.mkc-playbig svg{width:50%;fill:#fff}
.mkc-side{position:absolute;right:4cqw;bottom:16%;display:flex;flex-direction:column;align-items:center;gap:2cqw;color:#fff;font-size:max(7px,3.6cqw)}.mkc-side svg{stroke:#fff}
.mkc-reelcap{position:absolute;left:5cqw;right:18cqw;bottom:6%;color:#fff;font-size:max(7px,4cqw);line-height:1.3}
/* engagement */
.mkc-eng{left:40%;top:14%;width:58%;height:72%;z-index:5}
.mkc-eng span{position:absolute;display:inline-flex;align-items:center;gap:.7cqw;padding:1cqw 1.5cqw;border-radius:99px;background:#fff;box-shadow:0 2cqw 4cqw -2cqw rgba(11,26,51,.35);font:700 max(9px,1.35cqw)/1 var(--sans);color:var(--ink)}
.mkc-eng svg{width:max(11px,1.5cqw);height:max(11px,1.5cqw);fill:none;stroke:#1A56C4;stroke-width:2}
.mkc-eng .b1{left:0;top:6%}.mkc-eng .b2{left:6%;top:48%}.mkc-eng .b3{right:0;top:22%}.mkc-eng .b4{right:4%;top:66%}
/* funnel */
.mkc-funnel{left:5%;top:56%;width:52%;display:grid;grid-template-columns:repeat(4,1fr);padding:1.6cqw;z-index:3}
.mkc-funnel span{position:relative;display:flex;flex-direction:column;gap:.6cqw;padding:0 1cqw}
.mkc-funnel span+span::before{content:"";position:absolute;left:-.3cqw;top:20%;bottom:20%;width:1px;background:var(--line-2)}
.mkc-funnel small{font:400 max(7px,.95cqw)/1.2 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--mute)}
.mkc-funnel b{font:700 max(11px,2cqw)/1 var(--sans);letter-spacing:-.02em;color:var(--ink)}
/* KPI strip */
.mkc-kpis{position:absolute;left:5%;bottom:6%;display:flex;gap:1.2cqw;z-index:6}
.mkc-kpi{min-width:12cqw;padding:1.3cqw 1.6cqw;border-radius:max(10px,1.4cqw);background:#fff;box-shadow:0 2.4cqw 5cqw -2.4cqw rgba(11,26,51,.3),0 0 0 1px rgba(11,26,51,.05)}
.mkc-kpi small{display:block;font:400 max(7px,.95cqw)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:.8cqw}
.mkc-kpi b{font:700 max(13px,2.5cqw)/1 var(--sans);letter-spacing:-.03em;color:var(--navy)}
.mkc-kpi:first-child b{color:#1A56C4}
.mkc-demo{position:absolute;right:2.2cqw;top:2cqw;z-index:7;font:400 max(8px,.95cqw)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding:.7cqw 1.1cqw;border-radius:99px;background:rgba(255,255,255,.8);box-shadow:0 0 0 1px var(--line)}
/* tabs */
.mkc__tabs{position:absolute;left:0;right:0;bottom:-48px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.mkc__tabs::-webkit-scrollbar{display:none}
.mkc__tabs button{flex:none;font:700 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;border-radius:999px;border:1px solid var(--line-2);color:var(--mute);background:transparent;cursor:pointer;transition:all .4s var(--ease)}
.mkc__tabs button:hover{color:var(--ink);border-color:var(--ink)}
.mkc__tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.mkc__tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.mkc .sf-note{bottom:-78px}

/* ---- focus states: the same scene, different emphasis ---- */
.mkc[data-state="meta"] .mkc-mgr{--o:1;--s:1;--b:0px}
.mkc[data-state="meta"] .mkc-phone{--o:1;--s:1}
.mkc[data-state="meta"] .mkc-scr--feed,.mkc[data-state="campaigns"] .mkc-scr--feed,.mkc[data-state="google"] .mkc-scr--feed,.mkc[data-state="seo"] .mkc-scr--feed{opacity:1}
.mkc[data-state="google"] .mkc-serp{--o:1;--s:1.04;--x:-24cqw;--y:2cqh}
.mkc[data-state="google"] .mkc-phone{--o:.45;--s:.9;--b:2px;--x:3cqw}
.mkc[data-state="google"] .mkc-mgr{--o:.35;--s:.86;--b:3px;--x:0;--y:26cqh}
.mkc[data-state="social"] .mkc-phone{--o:1;--s:1;--x:-18cqw}
.mkc[data-state="social"] .mkc-scr--story{opacity:1}
.mkc[data-state="social"] .mkc-eng{--o:1;--s:1;--x:-18cqw}
.mkc[data-state="social"] .mkc-reels{--o:.3;--s:.8;--b:3px;--x:-6cqw;--y:6cqh}
.mkc[data-state="content"] .mkc-reels{--o:1;--s:1}
.mkc[data-state="content"] .mkc-phone{--o:1;--s:.96}
.mkc[data-state="content"] .mkc-scr--reel{opacity:1}
.mkc[data-state="seo"] .mkc-seo{--o:1;--s:1.04;--x:-32cqw;--y:1cqh}
.mkc[data-state="seo"] .mkc-serp{--o:.55;--s:.86;--b:2px;--x:8cqw;--y:18cqh}
.mkc[data-state="seo"] .mkc-graph .area{opacity:1.6}
.mkc[data-state="campaigns"] .mkc-mgr{--o:.95;--s:.84;--x:-3cqw;--y:-4cqh}
.mkc[data-state="campaigns"] .mkc-phone{--o:1;--s:.96}
.mkc[data-state="campaigns"] .mkc-funnel{--o:1;--s:1}
.mkc[data-state="campaigns"] .mkc-eng{--o:.9;--s:.82;--x:-6cqw;--y:10cqh}
.mkc[data-state="campaigns"] .mkc-eng .b2,.mkc[data-state="campaigns"] .mkc-eng .b4{opacity:0}
.mkc-phone{animation:mkcFloat 7s ease-in-out infinite}
@keyframes mkcFloat{50%{translate:0 -1.2cqh}}
@media (prefers-reduced-motion:reduce){.mkc-phone{animation:none}.mkc-el,.mkc-scr,.mkc-graph .ln{transition:none!important}}

@media (max-width:1024px){
  .mkc,.world .mkc{inset:4% var(--gut) 60px var(--gut)}
  .shero .mkc{inset:64px var(--gut) 64px var(--gut)}
  .mkc .sf-note{display:none}
  .mkc__tabs{bottom:-44px;gap:4px}.mkc__tabs button{padding:7px 10px;font-size:10px}
}
@media (max-width:640px){
  #world-mkt .world__visual{height:min(128vw,560px)}
  .shero__vis:has(.mkc){height:62vh}
  /* phones: one clear focus per state, larger type, fewer layers */
  .mkc-mgr,.mkc-serp,.mkc-seo,.mkc-reels{left:4%;width:92%;top:7%;padding:3.4cqw}
  .mkc-row{grid-template-columns:2cqw minmax(0,1fr) 11cqw;font-size:max(10px,3.2cqw);padding:1.8cqw 0}.mkc-row .bar{display:none}
  .mkc-h b{font-size:max(12px,4cqw)}.mkc-h small{font-size:max(8px,2.4cqw)}
  .mkc-kw{grid-template-columns:minmax(0,1fr) 8cqw 12cqw;font-size:max(10px,3.2cqw);padding:1.8cqw 0}
  .mkc-q{font-size:max(11px,3.4cqw);padding:2.4cqw 3cqw}.mkc-res .t{font-size:max(11px,3.6cqw)}.mkc-res p,.mkc-res small{font-size:max(9px,2.8cqw)}
  .mkc-res.ghost{display:none}
  .mkc-phone{left:28%;top:5%;height:66%}
  .mkc-eng{left:4%;width:92%;top:8%;height:60%}
  .mkc-funnel{left:4%;width:92%;top:10%;grid-template-columns:repeat(2,1fr);row-gap:3cqw;padding:3.4cqw}.mkc-funnel span+span::before{display:none}
  .mkc-funnel small{font-size:max(8px,2.4cqw)}.mkc-funnel b{font-size:max(14px,5cqw)}
  .mkc-cal{display:none}
  .mkc-kpis{left:4%;right:4%;bottom:4%;gap:2cqw}.mkc-kpi{flex:1;min-width:0;padding:2.4cqw}.mkc-kpi small{font-size:max(7px,2.2cqw)}.mkc-kpi b{font-size:max(14px,4.6cqw)}
  .mkc-demo{top:auto;bottom:calc(4% + 17cqw);right:4%;font-size:8px}
  .mkc[data-state] .mkc-el{--x:0!important;--y:0!important;--b:0px!important}
  .mkc[data-state="google"] .mkc-phone,.mkc[data-state="google"] .mkc-mgr,.mkc[data-state="seo"] .mkc-serp,.mkc[data-state="meta"] .mkc-mgr,
  .mkc[data-state="social"] .mkc-reels,.mkc[data-state="content"] .mkc-phone,.mkc[data-state="campaigns"] .mkc-mgr,.mkc[data-state="campaigns"] .mkc-serp,
  .mkc[data-state="campaigns"] .mkc-phone,.mkc[data-state="campaigns"] .mkc-eng{--o:0!important}
  .mkc[data-state="meta"] .mkc-phone,.mkc[data-state="social"] .mkc-phone{--s:1!important}
  .mkc[data-state="campaigns"] .mkc-graph .area{opacity:1}
}

/* ===== Creative showcase video — presentation only (scoped to the film player) ===== */
.sff{isolation:isolate}
.sff::before{content:"";position:absolute;inset:-9% -7% -12%;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(64,118,210,.20),rgba(22,48,95,.10) 55%,transparent 80%);filter:blur(28px)}
.sff__frame{background:#0B1A36;box-shadow:0 70px 120px -60px rgba(2,8,20,.9),0 30px 60px -40px rgba(26,86,196,.28),0 0 0 1px rgba(159,196,255,.10)}
.sff__frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.sff__poster,.sff__frame video{object-fit:cover}
.cfilm{overflow:clip}