/* ForgeHype ยท main stylesheet
Dark by default, light sections scoped by .light, body colour mixed by scroll (see main.js).
1 tokens 2 base 3 env 4 nav 5 hero 6 trust 7 problems + stack 8 about 9 qatar
10 services 11 phone 12 process orbit 13 stories carousel 14 why rotator 15 book + talk
16 footer 17 reveals 18 reduced motion */
/* ---------- 1. Tokens ---------- */
:root{
--canvas:#0b0908;
--canvas-rgb:11,9,8;
--canvas-2:#0e0c0a;
--panel:#141110;
--panel-2:#1c1815;
--accent:#fe5d02;
--accent-hover:#ff7a2a;
--accent-muted:rgba(254,93,2,.16);
--glow:#ffb23f;
--text-primary:#f4efe9;
--text-secondary:#a89f96;
--text-tertiary:#7d756d;
--line:rgba(255,255,255,.08);
--line-strong:rgba(255,255,255,.18);
--glass:rgba(255,255,255,.045);
--glass-2:rgba(255,255,255,.07);
--ok:#5fd59a;
--mix:0;
--font-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
--font-body:"Manrope",ui-sans-serif,system-ui,sans-serif;
--font-mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
--fs-hero:clamp(3.4rem,1rem + 11vw,12rem);
--fs-h1:clamp(2.6rem,1.4rem + 5.2vw,6.4rem);
--fs-h2:clamp(2.1rem,1.3rem + 3.4vw,4.6rem);
--fs-h3:clamp(1.3rem,1.1rem + .9vw,1.9rem);
--fs-lead:clamp(1.1rem,1rem + .45vw,1.35rem);
--fs-body:1.0625rem;
--fs-sm:.9375rem;
--fs-xs:.8125rem;
--s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.5rem;--s-6:2rem;--s-7:3rem;--s-8:4rem;--s-9:6rem;--s-10:8rem;
--section:clamp(4.5rem,2.5rem + 8vw,10rem);
--gutter:clamp(1.25rem,.6rem + 3.4vw,4rem);
--max:1360px;
--r-sm:12px;--r-md:20px;--r-lg:24px;--r-xl:36px;--r-pill:999px;
--ease:cubic-bezier(.16,1,.3,1);
--ease-io:cubic-bezier(.65,0,.35,1);
--ease-pop:cubic-bezier(.34,1.56,.64,1);
--t-fast:220ms;--t-med:520ms;--t-slow:1100ms;
--tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
color-scheme:dark;
}
/* light theme, scoped to light sections */
.light{
--canvas:#fff6ef;--canvas-rgb:255,246,239;--canvas-2:#ffe9da;--panel:#fff;--panel-2:#fff;
--text-primary:#14110f;--text-secondary:#6b645e;--text-tertiary:#8a827b;
--line:rgba(20,17,15,.1);--line-strong:rgba(20,17,15,.2);--glass:rgba(255,255,255,.7);--glass-2:#fff;
--tshadow:none;color:var(--text-primary);color-scheme:light
}
/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:opacity 900ms var(--ease)}
html.js body:not(.ready){opacity:0}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,fieldset{margin:0}
fieldset{padding:0;border:0;min-width:0}
legend{padding:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.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}
.skip{position:fixed;inset-inline-start:var(--s-4);inset-block-start:-100px;z-index:1000;padding:.7rem 1rem;background:var(--accent);color:#120600;border-radius:var(--r-pill);font-weight:600;transition:inset-block-start var(--t-fast) var(--ease)}
.skip:focus{inset-block-start:var(--s-4)}
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
main{position:relative;z-index:1}
section{scroll-margin-top:84px}
/* type */
.t-display{font-family:var(--font-display);font-weight:700;letter-spacing:-.04em;line-height:.98;font-variation-settings:"opsz" 96}
.t-h1{font-size:var(--fs-h1)}
.t-h2{font-size:var(--fs-h2)}
.t-h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.1;font-size:var(--fs-h3)}
.lead{font-size:var(--fs-lead);color:var(--text-secondary);line-height:1.55;max-width:58ch}
.lowkey{font-size:var(--fs-sm);color:var(--text-secondary);max-width:52ch}
.muted{color:var(--text-secondary)}
.kicker{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:baseline;gap:.5em}
.kicker::before{content:"";width:1.5em;height:1px;background:var(--accent);align-self:center;opacity:.9}
.mono-label{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary)}
.sec-label{display:block;color:var(--accent)}
.light .sec-label{color:var(--text-primary)}
.section-head .sec-label{margin-block-end:calc(-1*var(--s-2))}
.em{color:var(--accent)}
.lines .ln{display:block}
.lines .ln.thin{font-weight:300;letter-spacing:-.03em}
.section-head{display:grid;gap:var(--s-5);max-width:62rem;margin-block-end:clamp(2.5rem,2rem + 3vw,4.5rem)}
.section-head.center{text-align:center;margin-inline:auto;justify-items:center}
.section{position:relative;padding-block:var(--section)}
/* breathing room either side of a theme boundary: the colour crossfade needs an empty viewport */
.gap-out{padding-block-end:max(12vh,6rem)}
.gap-in{padding-block-start:max(10vh,5rem)}
/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:.95rem 1.5rem;border-radius:var(--r-pill);font-weight:600;font-size:var(--fs-sm);line-height:1;letter-spacing:-.005em;transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),box-shadow var(--t-med) var(--ease),border-color var(--t-fast) var(--ease);white-space:nowrap;isolation:isolate;text-shadow:none}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:#140600;box-shadow:0 0 0 0 rgba(254,93,2,0),0 10px 30px -12px rgba(254,93,2,.55)}
.btn-primary:hover{background:var(--accent-hover);box-shadow:0 0 0 6px rgba(254,93,2,.12),0 16px 40px -12px rgba(254,93,2,.7)}
.btn-ghost{background:var(--glass);color:var(--text-primary);border:1px solid var(--line-strong);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.btn-ghost:hover{background:var(--glass-2);border-color:var(--accent)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.btn-row .link-soft{padding:.6em .35em}
.link{display:inline-flex;align-items:center;gap:.4em;color:var(--text-primary);font-weight:600;border-bottom:1px solid var(--line-strong);padding-block-end:2px;transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.link:hover{color:var(--accent);border-color:var(--accent)}
.link-u{color:var(--text-primary);font-weight:600;text-decoration:underline;text-underline-offset:.3em;text-decoration-color:var(--line-strong);transition:color var(--t-fast) var(--ease),text-decoration-color var(--t-fast) var(--ease)}
.link-u:hover{color:var(--accent);text-decoration-color:var(--accent)}
.link-soft{color:var(--accent);font-weight:600;border-bottom:1px solid transparent;padding-block-end:2px;transition:border-color var(--t-fast) var(--ease)}
.link-soft:hover,.link-soft:focus-visible{border-color:var(--accent)}
.car-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--text-primary);font-size:1.1rem;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.car-btn:hover{background:var(--accent);border-color:var(--accent);color:#140600}
@media (pointer:coarse){.btn{min-height:44px}}
@media (max-width:560px){.btn-row .btn{width:100%}.btn-row .link-soft{margin-inline:auto}}
/* ---------- 3. Environment layer ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env-glow{position:absolute;inset:-20%;opacity:calc(1 - .7*var(--mix,0));background:
radial-gradient(ellipse 50% 40% at 70% 10%,rgba(254,93,2,.14),transparent 60%),
radial-gradient(ellipse 40% 50% at 15% 80%,rgba(42,51,64,.35),transparent 65%),
radial-gradient(ellipse 60% 40% at 50% 110%,rgba(254,93,2,.08),transparent 60%);
animation:env-drift 90s var(--ease-io) -30s infinite alternate}
.env-peach{position:absolute;inset:-20%;opacity:var(--mix,0);background:
radial-gradient(ellipse 55% 45% at 75% 15%,#ffe9da,transparent 65%),
radial-gradient(ellipse 45% 40% at 10% 85%,rgba(255,221,196,.9),transparent 65%);
animation:env-drift 90s var(--ease-io) -50s infinite alternate-reverse}
@keyframes env-drift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2%,2%,0) scale(1.06)}}
.env-grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,");background-size:200px 200px}
.env canvas{position:absolute;inset:0;width:100%;height:100%;opacity:calc(1 - .6*var(--mix,0))}
/* ---------- 4. Nav ---------- */
.nav{position:fixed;inset-inline:0;inset-block-start:0;z-index:100;padding-block:var(--s-4);transition:transform var(--t-med) var(--ease)}
.nav.hide{transform:translateY(-120%)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:.55rem .6rem .55rem 1.1rem;border-radius:var(--r-pill);background:rgba(var(--canvas-rgb),.6);border:1px solid var(--line);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:0 10px 40px -20px rgba(0,0,0,calc(.8 - .5*var(--mix,0)))}
.nav.scrolled .nav-inner{background:rgba(var(--canvas-rgb),.8);border-color:var(--line-strong)}
.brand{position:relative;display:block}
.brand img{height:26px;width:auto}
.brand .lg-light{position:absolute;inset:0;opacity:var(--mix,0)}
.brand .lg-dark{opacity:calc(1 - var(--mix,0))}
.nav-links{display:flex;gap:.25rem}
.nav-links a{padding:.6rem .9rem;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:500;color:var(--text-secondary);transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.nav-links a:hover{color:var(--text-primary);background:var(--glass-2)}
.nav .btn{padding-block:.75rem}
.nav-toggle{display:none;width:44px;height:44px;border-radius:50%;place-items:center}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--text-primary);border-radius:2px;transition:transform var(--t-med) var(--ease),opacity var(--t-fast)}
.nav-toggle span + span{margin-block-start:5px}
.menu{position:fixed;inset:0;z-index:90;background:rgba(var(--canvas-rgb),.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:grid;align-content:center;padding:var(--gutter);opacity:0;visibility:hidden;transition:opacity var(--t-med) var(--ease),visibility 0s var(--t-med)}
.menu.open{opacity:1;visibility:visible;transition:opacity var(--t-med) var(--ease)}
.menu a{font-family:var(--font-display);font-size:clamp(2rem,8vw,3.2rem);font-weight:600;letter-spacing:-.03em;padding-block:.3em;border-bottom:1px solid var(--line);transform:translateY(16px);opacity:0;transition:transform var(--t-med) var(--ease),opacity var(--t-med) var(--ease)}
.menu.open a{transform:none;opacity:1}
.menu.open a:nth-child(2){transition-delay:60ms}.menu.open a:nth-child(3){transition-delay:120ms}.menu.open a:nth-child(4){transition-delay:180ms}.menu.open a:nth-child(5){transition-delay:240ms}
.menu .btn{margin-block-start:var(--s-6);justify-self:start;font-size:1rem;border-bottom:0}
@media (max-width:860px){.nav-links{display:none}.nav .btn-primary{display:none}.nav-toggle{display:grid}}
body.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav-toggle span:nth-child(2){opacity:0}
body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ---------- 5. Hero (scrub) ---------- */
.hero{position:relative;height:400vh;z-index:1}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0b0908}
.stage .poster,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.stage .poster{background-size:cover;background-position:62% 50%;transform:scale(1.02)}
.stage video{opacity:0;transition:opacity 900ms var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 55% 45%,rgba(11,9,8,0) 30%,rgba(11,9,8,.66) 100%),linear-gradient(to bottom,rgba(11,9,8,.55),rgba(11,9,8,0) 25%,rgba(11,9,8,0) 70%,rgba(11,9,8,.7))}
.ring{position:absolute;inset-inline-end:var(--gutter);inset-block-end:calc(var(--gutter) + 8px);width:34px;height:34px;color:var(--accent);opacity:.9;transform:rotate(-90deg);transition:opacity var(--t-med) var(--ease)}
.ring circle{transition:stroke-dashoffset 120ms linear}
.stage.video-ready .ring{opacity:0}
.cue{position:absolute;inset-inline-start:var(--gutter);inset-block-end:calc(var(--gutter) + 6px);display:flex;align-items:center;gap:.7em;font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:#a89f96;text-shadow:var(--tshadow);transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease)}
.stage.settled .cue,.stage.settled .hud{opacity:0;transform:translateY(8px);pointer-events:none}
.hud{transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease)}
.cue i{display:block;width:18px;height:28px;border:1.5px solid rgba(255,255,255,.18);border-radius:12px;position:relative}
.cue i::after{content:"";position:absolute;inset-inline-start:50%;inset-block-start:5px;width:3px;height:6px;margin-inline-start:-1.5px;border-radius:2px;background:var(--accent);animation:cue 1.8s var(--ease-io) -0.6s infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{transform:translateY(0);opacity:0}}
.hud{position:absolute;inset-inline-end:var(--gutter);inset-block-start:calc(var(--s-10) + 8px);display:grid;gap:.35rem;text-align:end}
.chip{display:inline-block;padding:.45rem .75rem;font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.08em;color:#a89f96;background:rgba(14,12,10,.55);border:1px solid rgba(120,110,100,.3);border-radius:10px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(5,5,10,.85)}
.hud .chip{justify-self:end}
@media (max-height:560px){.cue,.hud{display:none}}
.band{position:absolute;inset:0;display:grid;align-content:center;padding-inline:var(--gutter);opacity:0;pointer-events:none;text-shadow:var(--tshadow);--k:0;color:#f4efe9}
.band > *{position:relative;z-index:1}
.band::before{content:"";position:absolute;inset:-4%;pointer-events:none;opacity:calc(.25 + .75*max(var(--k,0),var(--kl,0)));background:radial-gradient(ellipse 60% 62% at 30% 50%,rgba(8,6,5,.68) 0%,rgba(8,6,5,.42) 46%,rgba(8,6,5,0) 76%)}
.band.live{pointer-events:auto}
.band .inner{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto;max-width:none}
.band .inner > *{max-width:min(56%,42rem)}
.hero-words{font-family:var(--font-display);font-weight:700;letter-spacing:-.045em;line-height:.9;font-size:var(--fs-hero);font-variation-settings:"opsz" 96;display:flex;flex-direction:column}
.band-1 .w{display:inline-block;transform-origin:0% 80%;--kk:max(var(--k,0),var(--kl,0));--kc:clamp(0,(var(--kk) - var(--th,0))*3.4,1);--ks:clamp(0,(var(--kk) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);opacity:var(--kc);transform:scale(calc(.6 + (.4 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
.band-1 .w.em{--ov:.22;--sd:.16;--ss:2.6}
.hero .sub,.hero-static .sub{margin-block-start:var(--s-5);font-size:var(--fs-lead);color:#c9c0b7;line-height:1.5;display:grid;gap:.1em}
.band-1 .sub .l1{--kb:clamp(0,(var(--k,0) - .26)*7,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}
.band-1 .sub .l2{--kb:clamp(0,(var(--k,0) - .42)*7,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}
.band-1 .btn-row{margin-block-start:var(--s-6);--kb:clamp(0,(var(--k,0) - .6)*6,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}
.band .btn{text-shadow:none}
/* static hero (phones, portrait, reduced motion): a designed layout, not a fallback */
.hero-static{display:none;position:relative;min-height:100svh;align-content:end;padding-block:calc(var(--s-10) + 2rem) var(--s-9);isolation:isolate;color:#f4efe9}
.hero-static .bg{position:absolute;inset:0;z-index:-1;background:#0b0908 center/cover no-repeat;background-image:url("../img/hero-poster.jpg");background-position:60% 40%}
.hero-static .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,9,8,.96) 0%,rgba(11,9,8,.72) 40%,rgba(11,9,8,.2) 75%,rgba(11,9,8,.5) 100%)}
.hero-static h1{font-size:clamp(3.2rem,16vw,6rem);line-height:.92;letter-spacing:-.045em}
.hero-static .btn-row{margin-block-start:var(--s-6)}
@media (max-width:720px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse),(orientation:landscape) and (pointer:coarse) and (max-height:560px),(prefers-reduced-motion:reduce){
.hero{display:none}
.hero-static{display:grid}
}
/* ---------- 6. Trust strip ---------- */
.trust{padding-block:var(--s-7);border-block:1px solid var(--line);background:linear-gradient(to bottom,rgba(20,17,16,.5),rgba(11,9,8,0))}
.trust .label{text-align:center;font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary);margin-block-end:var(--s-5)}
.marquee{overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent)}
.marquee:focus-visible{outline-offset:-2px}
.marquee-track{display:flex;gap:var(--s-8);width:max-content;align-items:center;animation:marquee 48s linear infinite}
.marquee:not(.in) .marquee-track,.marquee:hover .marquee-track,.marquee:focus-within .marquee-track,.marquee.paused .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee-track li{display:flex;align-items:center;gap:var(--s-4);white-space:nowrap;color:var(--text-secondary);font-weight:500;font-size:var(--fs-sm)}
.marquee-track img{height:46px;width:46px;border-radius:10px;object-fit:cover;filter:grayscale(1) contrast(1.05);opacity:.75;transition:filter var(--t-med) var(--ease),opacity var(--t-med) var(--ease)}
.marquee-track li:hover img{filter:none;opacity:1}
.marquee-track .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.8}
/* ---------- 7. Which one sounds like you: grid + stack ---------- */
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);max-width:46rem;margin-inline:auto}
@media (min-width:760px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}}
.tile{display:grid;align-content:center;justify-items:center;gap:var(--s-3);aspect-ratio:1;border-radius:16px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.03);color:var(--text-primary);text-align:center;padding:var(--s-4);font-size:var(--fs-xs);font-weight:600;line-height:1.25;letter-spacing:.01em;transition:background .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease),transform .4s var(--ease)}
.tile svg{width:40%;height:auto;max-width:72px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.tile:hover,.tile:focus-visible{transform:translateY(-3px);background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.5);box-shadow:0 26px 50px -26px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tile:hover svg{transform:scale(1.06)}
.scroll-hint{text-align:center;font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);margin-block:var(--s-7) var(--s-5)}
.stack{--nav-h:88px;--step:14px;display:grid;gap:var(--s-5);padding-block-end:var(--s-6)}
.stack-card{position:sticky;top:calc(var(--nav-h) + var(--i)*var(--step));scroll-margin-top:calc(var(--nav-h) + var(--i)*var(--step));--p:0;transform-origin:50% 0;transform:scale(calc(1 - .04*var(--p))) translateY(calc(var(--p)*-6px));will-change:transform}
.stack-inner{position:relative;display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s-7);align-items:center;min-height:min(72vh,660px);padding:clamp(1.5rem,1rem + 2.5vw,3.5rem);border-radius:var(--r-xl);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 55%),var(--tint,#141110);border:1px solid rgba(255,255,255,.18);box-shadow:0 -10px 40px -20px rgba(0,0,0,.9),0 40px 80px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden;isolation:isolate;color:#f4efe9}
.stack-inner::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 80% at 100% 0%,rgba(254,93,2,.14),transparent 60%)}
.stack-inner::after{content:"";position:absolute;inset:0;pointer-events:none;background:#0b0908;opacity:calc(var(--p)*.55);transition:opacity 80ms linear}
.stack-media{position:relative;z-index:1;margin:0;aspect-ratio:4/5;max-height:min(60vh,560px);width:100%;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.stack-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.04) translateY(calc(var(--p)*10px));transition:transform 1.2s var(--ease)}
.stack-card:hover .stack-media img{transform:scale(1)}
.stack-text{position:relative;z-index:1;display:grid;gap:var(--s-4);align-content:center;justify-items:start}
.stack-text .n{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.14em;color:var(--accent)}
.stack-text .problem{font-family:var(--font-display);font-weight:500;font-size:clamp(1.1rem,1rem + .6vw,1.5rem);letter-spacing:-.01em;color:#a89f96}
.stack-text .fix{font-size:clamp(1.9rem,1.3rem + 2.6vw,3.6rem);line-height:1.02;max-width:17ch;color:#f4efe9}
.stack-text .tag{display:inline-block;padding:.4rem .8rem;border-radius:var(--r-pill);font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.08em;color:#f4efe9;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);margin-block-start:var(--s-2)}
.stack-text .btn-row{margin-block-start:var(--s-2)}
.stack-cta{display:flex;flex-wrap:wrap;gap:var(--s-5);align-items:center;justify-content:center;padding-block-start:var(--s-8)}
@media (max-width:900px){
.stack{--nav-h:76px;--step:10px}
.stack-inner{grid-template-columns:1fr;min-height:0;gap:var(--s-5);align-items:start}
.stack-media{aspect-ratio:16/10;max-height:34vh}
}
@media (max-height:700px){.stack-inner{min-height:0}.stack-media{max-height:42vh}}
/* ---------- 8. About (light) ---------- */
.about-top{display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap}
.statement{font-family:var(--font-display);font-weight:600;font-size:clamp(1.9rem,1.1rem + 3.4vw,4.6rem);line-height:1.08;letter-spacing:-.03em;max-width:22ch;margin-block:var(--s-7) var(--s-7);--p:0}
.statement .w{display:inline-block;opacity:clamp(.14,calc((var(--p,0) - var(--w,0))*6 + .14),1);transition:opacity .2s linear}
.about-logo{height:clamp(34px,2rem + 2vw,56px);width:auto;margin-block-start:var(--s-7)}
.flipline{margin-block-start:var(--s-5);font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;line-height:1.1;font-size:clamp(1.4rem,1rem + 2.2vw,2.8rem);color:var(--text-primary);min-height:1.3em;border-radius:6px}
.flip-stage{display:inline-block;perspective:900px}
.flip-word{display:inline-block;transform-origin:50% 50%;backface-visibility:hidden;animation:flip 2.6s var(--ease-io) infinite}
@keyframes flip{0%{transform:rotateX(90deg) translateY(.25em);opacity:0}14%{transform:none;opacity:1}84%{transform:none;opacity:1}100%{transform:rotateX(-90deg) translateY(-.25em);opacity:0}}
.flipline:hover .flip-word,.flipline:focus-within .flip-word,.flipline.paused .flip-word,.flipline:not(.in) .flip-word{animation-play-state:paused}
.flip-all{display:none}
.statement{margin-block-start:var(--s-7)}
/* ---------- 9. Qatar (light) ---------- */
.qatar-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s-8);align-items:start}
.qatar-text{display:grid;gap:var(--s-5);justify-items:start}
.qatar-media{--s0:.94;--p:0;aspect-ratio:3/2;border-radius:24px;overflow:hidden;background:#e9ded4;transform:scale(calc(var(--s0) + (1 - var(--s0))*var(--p)));transform-origin:50% 60%;box-shadow:0 30px 80px -30px rgba(60,30,10,.35);will-change:transform}
.qatar-media video{width:100%;height:100%;object-fit:cover}
.qatar-media.placeholder{display:grid;place-items:center;background:
linear-gradient(rgba(20,17,15,.06) 1px,transparent 1px) 0 0/48px 48px,
linear-gradient(90deg,rgba(20,17,15,.06) 1px,transparent 1px) 0 0/48px 48px,
radial-gradient(ellipse 70% 60% at 70% 30%,#ffe3cf,transparent 70%),#f3e7dc}
.qatar-media.placeholder .mono-label{padding:.6rem 1rem;border:1px solid rgba(20,17,15,.14);border-radius:var(--r-pill);background:rgba(255,255,255,.7)}
@media (max-width:900px){
.qatar-grid{grid-template-columns:1fr;gap:var(--s-6)}
.qatar-media{--s0:.85;transform-origin:0 50%}
}
/* ---------- 10. Services (dark) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
.svc-card > a{display:grid;grid-template-columns:1fr 2fr;gap:var(--s-5);height:100%;padding:var(--s-5);border-radius:24px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 60%),var(--panel);box-shadow:0 30px 60px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);transition:transform .7s var(--ease),box-shadow .7s var(--ease),border-color .5s var(--ease)}
.svc-card > a:hover,.svc-card > a:focus-visible{transform:translateY(-6px);border-color:rgba(254,93,2,.55);box-shadow:0 0 0 1px rgba(254,93,2,.35),0 30px 70px -30px rgba(254,93,2,.45),0 40px 80px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08)}
.svc-media{display:grid;gap:var(--s-3);align-content:start}
.svc-card .thumb{position:relative;display:block;width:100%;aspect-ratio:4/5;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--panel-2);transition:transform .9s var(--ease)}
.svc-card > a:hover .thumb{transform:scale(1.035)}
.svc-card .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9);opacity:0;transform:scale(1.18);transition:opacity 1100ms var(--ease)}
.svc-card .thumb img.on{opacity:1;animation:dolly 7.5s linear forwards}
@keyframes dolly{from{transform:scale(1.18) translateY(2%)}to{transform:scale(1.02) translateY(-2%)}}
.svc-card .now{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.svc-body{display:grid;gap:var(--s-3);align-content:center}
.svc-body .idx{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.12em;color:var(--text-tertiary)}
.svc-body h3{font-size:clamp(1.4rem,1.1rem + 1.2vw,2.1rem);letter-spacing:-.025em}
.svc-body p{color:var(--text-secondary)}
.svc-body .tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-block-start:var(--s-2)}
.svc-body .tags span{padding:.35rem .7rem;border-radius:var(--r-pill);border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:var(--fs-xs);color:var(--text-secondary)}
@media (max-width:1000px){.svc-grid{grid-template-columns:1fr}}
@media (max-width:720px){
.svc-card > a{grid-template-columns:1fr;gap:var(--s-4)}
.svc-card .thumb{width:90%;aspect-ratio:1;border-radius:20px}
.svc-card.reveal .thumb{transform:scale(.82) translateY(28px);transform-origin:0 100%;transition:transform 1.3s var(--ease)}
.svc-card.reveal.in .thumb{transform:none}
.svc-card > a:hover .thumb{transform:scale(1.02)}
}
/* ---------- 11. Full-screen phone (dark) ---------- */
.phone-sec{position:relative;height:170vh}
.phone-stage{position:sticky;top:0;height:100svh;display:grid;align-items:center;overflow:hidden}
.phone-wrap{position:relative;display:grid;justify-items:center;align-content:center;gap:var(--s-5);height:100%;padding-block:var(--s-9) var(--s-7)}
.phone-label{justify-self:center;text-align:center}
.phone-stage-inner{position:relative;display:grid;justify-items:center;padding-block-end:3.2rem}
.phone-stage-inner::before{content:"";position:absolute;inset:auto;width:120%;aspect-ratio:1;top:50%;left:50%;transform:translate(-50%,-55%);background:radial-gradient(closest-side,rgba(254,93,2,.28),transparent 70%);z-index:-1;pointer-events:none}
.phone{position:relative;width:min(300px,70vw,30svh);aspect-ratio:9/19.2;padding:10px;border-radius:46px;background:linear-gradient(145deg,#2a2724,#0b0a09 40%,#1c1a18);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),0 50px 100px -30px rgba(0,0,0,.95),0 0 90px -30px rgba(254,93,2,.6);transform:perspective(1400px) rotateY(-12deg) rotateX(4deg) scale(.94) translateY(30px);opacity:0;transition:transform 1.4s var(--ease),opacity 1s var(--ease)}
.in .phone{transform:perspective(1400px) rotateY(-12deg) rotateX(4deg);opacity:1}
.in .phone-stage-inner:hover .phone{transform:perspective(1400px) rotateY(-4deg) rotateX(2deg)}
.phone-screen{position:relative;height:100%;border-radius:37px;overflow:hidden;background:#000}
.phone-notch{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:30%;height:22px;border-radius:20px;background:#000;z-index:6}
.reel-slide{position:absolute;inset:0;opacity:0;transition:opacity 700ms var(--ease)}
.reel-slide.is-active{opacity:1}
.reel-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.reel-slide.is-active img{animation:kenburns 4.2s linear both}
@keyframes kenburns{from{transform:scale(1.18) translateY(2%)}to{transform:scale(1.04) translateY(-2%)}}
.reel-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85),transparent 45%),linear-gradient(to bottom,rgba(0,0,0,.55),transparent 25%)}
.reel-bars{position:absolute;top:50px;inset-inline:14px;z-index:4;display:flex;gap:4px}
.reel-bars span{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.reel-bars span i{display:block;height:100%;width:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.reel-bars span.is-done i{transform:scaleX(1)}
.reel-bars span.is-active i{animation:bar 4.2s linear both}
@keyframes bar{to{transform:scaleX(1)}}
.reel-caption{position:absolute;inset-inline:18px;bottom:22px;z-index:4;display:grid;gap:6px;color:#fff}
.reel-caption strong{font-family:var(--font-display);font-size:1.15rem;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.reel-caption span{font-size:.75rem;color:rgba(255,255,255,.75)}
.reel-ui{position:absolute;inset-inline-end:12px;bottom:90px;z-index:4;display:grid;gap:14px;color:#fff}
.reel-ui i{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);display:grid;place-items:center}
.reel-ui i svg{width:15px;height:15px}
.reel-pause{position:absolute;inset-block-end:0;inset-inline-start:50%;transform:translateX(-50%);padding:.55rem 1rem;font-size:var(--fs-xs)}
.reel-paused .reel-bars span.is-active i{animation-play-state:paused}
.reel-paused .reel-slide.is-active img{animation-play-state:paused}
.phone-main{display:grid;justify-items:center;gap:var(--s-6);width:100%}
.facts{display:grid;gap:var(--s-4);width:100%;max-width:30rem;--d:0s;opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease) .2s,transform .9s var(--ease) .2s}
.in .facts{opacity:1;transform:none}
.facts h3{font-size:clamp(1.5rem,1.1rem + 1.8vw,2.4rem);letter-spacing:-.03em;line-height:1.05}
.fact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.fact{--d:0s;padding:var(--s-5) var(--s-4);border-radius:20px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 60%),var(--panel);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease) var(--d),transform .8s var(--ease) var(--d)}
.in .fact{opacity:1;transform:none}
.fact .v{font-family:var(--font-display);font-weight:600;letter-spacing:-.04em;font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem);line-height:1;color:var(--text-primary);font-variant-numeric:tabular-nums}
.fact .v small{font-size:.5em;color:var(--accent);margin-inline:.08em;vertical-align:.2em}
.fact p{margin-block-start:var(--s-3);font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.4}
@media (min-width:901px){.phone-main{grid-template-columns:auto minmax(0,30rem);gap:var(--s-8);align-items:center}.facts{justify-self:start}.phone-wrap{padding-block:var(--s-7) var(--s-5)}}
.phone-cap{font-size:clamp(1.8rem,1.3rem + 2.4vw,3.4rem);text-align:center;opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease) .3s,transform 1s var(--ease) .3s}
.in .phone-cap{opacity:1;transform:none}
.p1{--d:.15s;top:22%;left:4%}.p2{--d:.55s;top:34%;right:3%}.p3{--d:.95s;bottom:34%;left:2%}.p4{--d:1.35s;bottom:24%;right:5%}
@media (max-width:760px){
.phone-sec{height:auto}
.phone-stage{position:static;height:auto;overflow:visible}
.phone-wrap{padding-block:var(--s-9) var(--s-8)}
}
@media (max-height:700px) and (min-width:761px){.phone{width:min(230px,36vh)}}
/* ---------- 12. Process: the orbit with the hold core ---------- */
.orbit-wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center}
.orbit-text{display:grid;gap:var(--s-5);align-content:center}
.hold-hint{transition:opacity var(--t-med) var(--ease),max-height var(--t-slow) var(--ease)}
.orbit-wrap.forged .hold-hint{opacity:0;max-height:0;overflow:hidden;margin:0}
.orbit-done{display:grid;gap:var(--s-4);max-height:0;overflow:hidden;opacity:0;transform:translateY(12px);transition:max-height var(--t-slow) var(--ease) .5s,opacity var(--t-slow) var(--ease) .5s,transform var(--t-slow) var(--ease) .5s}
.orbit-wrap.forged .orbit-done{max-height:32rem;opacity:1;transform:none}
.orbit-done .tagline{font-size:clamp(2rem,1.4rem + 2.8vw,3.8rem);line-height:1;letter-spacing:-.035em}
.orbit{position:relative;width:min(100%,520px);aspect-ratio:1;margin-inline:auto;justify-self:center;user-select:none;-webkit-user-select:none}
.orbit svg{width:100%;height:100%;overflow:visible;display:block}
.orbit .track{fill:none;stroke:var(--line-strong);stroke-width:1.5}
.orbit .arc{fill:none;stroke:url(#orbGrad);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--heat,0));transform:rotate(-90deg);transform-origin:200px 200px;filter:drop-shadow(0 0 8px rgba(254,93,2,.7));transition:stroke-dashoffset 90ms linear}
.orbit .node circle{fill:var(--panel-2);stroke:var(--line-strong);stroke-width:1.5;transition:fill var(--t-med) var(--ease),stroke var(--t-med) var(--ease),filter var(--t-med) var(--ease)}
.orbit .node text{fill:var(--text-secondary);font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;text-anchor:middle;dominant-baseline:central;transition:fill var(--t-med) var(--ease)}
.orbit .node.lit circle{fill:var(--accent);stroke:var(--accent);filter:drop-shadow(0 0 14px rgba(254,93,2,.8))}
.orbit .node.lit text{fill:#140600}
.orbit .lbl{fill:var(--text-primary);font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;dominant-baseline:central;opacity:0;transition:opacity var(--t-med) var(--ease)}
.orbit .lbl.lit{opacity:1}
.orbit .core{position:absolute;inset:50% auto auto 50%;width:36%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(255,178,63,calc(.15 + .85*var(--heat,0))),rgba(254,93,2,calc(.05 + .8*var(--heat,0))) 55%,var(--panel-2) 74%);border:1px solid rgba(255,255,255,.14);box-shadow:0 0 calc(var(--heat,0)*90px) rgba(254,93,2,calc(var(--heat,0)*.75)),inset 0 0 40px rgba(0,0,0,.6),0 30px 60px -30px rgba(0,0,0,.9);display:grid;place-items:center;cursor:pointer;touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:box-shadow 120ms linear,transform var(--t-med) var(--ease);transform-origin:center;overflow:visible}
.orbit .core:active,.orbit.holding .core{transform:translate(-50%,-50%) scale(.97)}
.orbit .core:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.orbit .core-glow{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,rgba(254,93,2,.45),transparent 60%);opacity:var(--heat,0);pointer-events:none;filter:blur(6px)}
.orbit .core-burst{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#ffd089,var(--accent) 45%,rgba(254,93,2,0) 72%);opacity:0;pointer-events:none;z-index:5}
.orbit.forged:not(.quiet) .core-burst{animation:burst 1.2s var(--ease-io) forwards}
@keyframes burst{0%{opacity:.95;transform:scale(1)}55%{opacity:.9;transform:scale(16)}100%{opacity:0;transform:scale(22)}}
.orbit .core-hint{position:relative;font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--text-primary);text-align:center;transition:opacity var(--t-med) var(--ease);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
.orbit .core-step{position:absolute;inset:12%;display:grid;place-items:center;text-align:center;font-family:var(--font-display);font-weight:700;font-size:clamp(.85rem,.5rem + 1.3vw,1.15rem);letter-spacing:-.02em;line-height:1.08;color:var(--text-primary);opacity:0;transform:scale(.92);transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease)}
.orbit.holding .core-hint,.orbit.cooling .core-hint{opacity:0;animation:none}
.orbit.holding .core-step,.orbit.cooling .core-step{opacity:1;transform:none}
.orbit .core-done{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-family:var(--font-display);font-weight:700;font-size:clamp(.95rem,.6rem + 1.4vw,1.35rem);letter-spacing:-.02em;line-height:1.05;color:#140600;opacity:0;transform:scale(.9);transition:opacity var(--t-med) var(--ease) .6s,transform var(--t-med) var(--ease) .6s}
.orbit.forged .core-hint,.orbit.forged .core-step{opacity:0;animation:none}
.orbit.forged .core-done{opacity:1;transform:none}
.orbit.forged .core{background:radial-gradient(circle at 40% 35%,#ffb23f,var(--accent) 60%,#c84600 100%);cursor:default}
@media (max-width:900px){.orbit-wrap{grid-template-columns:1fr}.orbit{width:min(100%,440px);padding-inline:2.4rem}.orbit .lbl{font-size:12px}}
/* ---------- 13. Success stories carousel (dark) ---------- */
.work-head{display:flex;justify-content:space-between;align-items:end;gap:var(--s-6);margin-block-end:var(--s-7)}
.work-title{display:grid;gap:var(--s-4)}
.work-tools{display:flex;align-items:center;gap:var(--s-5);flex:none}
.car-nav{display:flex;gap:var(--s-2)}
@media (max-width:720px){.work-head{display:grid;justify-items:start;gap:var(--s-4)}.work-tools{width:100%;justify-content:space-between}}
.carousel{overflow:hidden;margin-inline:calc(-1*var(--gutter));padding-block:var(--s-4);cursor:grab;touch-action:pan-y}
.carousel:active{cursor:grabbing}
.carousel:focus-visible{outline-offset:-2px}
.car-track{display:flex;gap:var(--s-4);width:max-content;padding-inline:var(--gutter);will-change:transform}
.car-track.ease{transition:transform .95s var(--ease)}
.work-card{position:relative;width:min(78vw,22rem);aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:var(--panel);border:1px solid var(--line);isolation:isolate;flex:none;transition:transform .7s var(--ease),box-shadow .7s var(--ease),border-color .5s var(--ease)}
.work-card:hover{transform:translateY(-6px);border-color:rgba(254,93,2,.5);box-shadow:0 0 0 1px rgba(254,93,2,.35),0 30px 70px -30px rgba(254,93,2,.45),0 40px 80px -40px rgba(0,0,0,.95)}
.work-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform 1.4s var(--ease);filter:saturate(.92);user-select:none;-webkit-user-drag:none}
.work-card:hover img{transform:scale(1.06)}
.work-card .fade{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,9,8,.95) 0%,rgba(11,9,8,.55) 35%,rgba(11,9,8,0) 65%)}
.work-card .meta{position:absolute;inset-inline:0;inset-block-end:0;padding:var(--s-6);display:grid;gap:var(--s-2);color:#f4efe9}
.work-card .tag{justify-self:start;padding:.35rem .7rem;border-radius:var(--r-pill);font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.08em;color:#f4efe9;background:rgba(14,12,10,.55);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.work-card h3{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem)}
.work-card p{color:#a89f96;font-size:var(--fs-sm);max-width:34ch}
.work-card .idx{position:absolute;inset-inline-start:var(--s-6);inset-block-start:var(--s-6);font-family:var(--font-mono);font-size:var(--fs-xs);color:#a89f96;letter-spacing:.1em;text-shadow:0 1px 3px rgba(5,5,10,.8)}
/* ---------- 14. Why others choose us: rotator (dark) ---------- */
.why-wrap{max-width:60rem}
.cmp{position:relative;padding-block:var(--s-6);border-block:1px solid var(--line);cursor:default;touch-action:pan-y;transition:opacity .4s var(--ease)}
.cmp.paused{opacity:.72}
.cmp:focus-visible{outline-offset:10px}
.cmp-stage{position:relative;min-height:11rem}
.pair{position:absolute;inset:0;display:grid;gap:var(--s-4);align-content:center;opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .7s var(--ease);pointer-events:none}
.pair.is-on{opacity:1;transform:none;pointer-events:auto}
.pair.is-out{opacity:0;transform:translateY(-22px)}
.pair .yes{display:flex;align-items:center;gap:.5em;font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,1.1rem + 2.6vw,3.4rem);letter-spacing:-.03em;line-height:1.05;color:var(--text-primary)}
.pair .ck{flex:none;width:1.05em;height:1.05em;border-radius:50%;background:rgba(254,93,2,.22);border:1.5px solid rgba(254,93,2,.85);box-shadow:0 0 18px -4px rgba(254,93,2,.6);position:relative}
.pair .ck::after{content:"";position:absolute;left:50%;top:50%;width:.42em;height:.22em;border:.14em solid var(--accent);border-top:0;border-right:0;transform:translate(-50%,-62%) rotate(-45deg)}
.pair .no{display:flex;align-items:center;gap:.6em;color:var(--text-primary);font-family:var(--font-display);font-weight:500;font-size:clamp(1.05rem,.95rem + .6vw,1.4rem);letter-spacing:-.01em;padding-inline-start:.15em}
.pair .x{flex:none;width:1.3em;height:1.3em;border-radius:50%;border:2px solid currentColor;position:relative;color:var(--text-secondary)}
.pair .x::before,.pair .x::after{content:"";position:absolute;left:50%;top:50%;width:.62em;height:.12em;border-radius:1px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.pair .x::after{transform:translate(-50%,-50%) rotate(-45deg)}
/* ---------- 15. Book a free consultation + Let's talk (light) ---------- */
.card-light{background:#fff;border-radius:24px;border:1px solid rgba(20,17,15,.06);box-shadow:0 24px 70px -34px rgba(60,30,10,.28),0 1px 2px rgba(60,30,10,.05)}
.book{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s-8);align-items:start}
.book-side{display:grid;gap:var(--s-5);align-content:start;justify-items:start}
.form{padding:clamp(1.25rem,1rem + 1.5vw,2.25rem);display:grid;gap:var(--s-4)}
.field{display:grid;gap:.45rem}
.field label,.field legend{font-size:var(--fs-sm);font-weight:600}
.field .req{color:var(--accent)}
.input{width:100%;padding:.9rem 1rem;border-radius:14px;border:1px solid #e4dcd4;background:#fff;color:var(--text-primary);font:inherit;font-size:1rem;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);appearance:none;-webkit-appearance:none}
.input::placeholder{color:#a39b93}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(254,93,2,.14)}
select.input{background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 1rem center;padding-inline-end:2.6rem}
select.input:invalid{color:#a39b93}
textarea.input{min-height:6.5rem;resize:vertical}
.field .err{display:none;color:var(--accent);font-size:var(--fs-xs)}
.field.invalid .input{border-color:var(--accent)}
.field.invalid .err{display:block}
.checks{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-start:.2rem}
.check{display:inline-flex;align-items:center;gap:.55em;padding:.6rem .9rem;border-radius:var(--r-pill);border:1px solid #e4dcd4;background:#fff;cursor:pointer;font-size:var(--fs-sm);font-weight:500;transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.check:hover{border-color:#cdb9a8}
.check:has(input:checked){border-color:var(--accent);background:rgba(254,93,2,.07)}
.check:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.check input{appearance:none;-webkit-appearance:none;width:17px;height:17px;margin:0;border:1.5px solid #cfc6bd;border-radius:5px;display:grid;place-items:center;background:#fff;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);flex:none}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{content:"";width:8px;height:4px;border:2px solid #140600;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.check input:focus-visible{outline:none}
.phone-row{display:grid;grid-template-columns:8rem 1fr;gap:var(--s-2)}
.form-fields{display:grid;gap:var(--s-4)}
.form-note{font-size:var(--fs-xs);color:var(--text-tertiary)}
.form .btn{justify-self:start}
.form-success{display:none;padding:var(--s-6);text-align:center;gap:var(--s-4)}
.form-success svg{width:48px;height:48px;color:var(--accent);margin-inline:auto}
.form.sent .form-fields{display:none}
.form.sent .form-success{display:grid}
.talk{margin-block-start:var(--s-10)}
.talk-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s-7);align-items:start}
.contact-rows{display:grid;gap:var(--s-3)}
.contact-rows a{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-5);border-radius:20px;background:#fff;border:1px solid rgba(20,17,15,.06);box-shadow:0 18px 50px -30px rgba(60,30,10,.25);transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .4s var(--ease)}
.contact-rows a:hover{transform:translateY(-4px);border-color:rgba(254,93,2,.4);box-shadow:0 24px 60px -28px rgba(254,93,2,.35)}
.contact-rows .ico{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(254,93,2,.1);color:var(--accent)}
.contact-rows .ico svg{width:22px;height:22px}
.contact-rows .txt{display:grid;gap:.1rem;min-width:0}
.contact-rows strong{font-family:var(--font-display);font-weight:600;font-size:1.2rem;letter-spacing:-.015em}
.contact-rows small{color:var(--text-secondary);font-size:var(--fs-sm);overflow-wrap:anywhere}
.contact-rows .arr{margin-inline-start:auto;color:var(--text-tertiary);transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.contact-rows a:hover .arr{color:var(--accent);transform:translate(2px,-2px)}
.todo-link{opacity:.72}
.map{position:relative;aspect-ratio:1;margin:0;border-radius:24px;overflow:hidden;background:#fff;border:1px solid rgba(20,17,15,.08);box-shadow:0 24px 70px -34px rgba(60,30,10,.3)}
.map img{display:block;width:100%;height:100%;object-fit:cover}
.map-pin{position:absolute;left:var(--x);top:var(--y);width:0;height:0;animation:pinfloat 3.4s ease-in-out infinite}
.map-pin b{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.35);transform:translate(-50%,-50%)}
.map-pin i{position:absolute;width:13px;height:13px;border-radius:50%;border:1.5px solid var(--accent);opacity:0;transform:translate(-50%,-50%);animation:halo 2.8s ease-out infinite}
.map-pin i.h2{animation-delay:1.4s}
@keyframes halo{0%{transform:translate(-50%,-50%) scale(.6);opacity:.85}100%{transform:translate(-50%,-50%) scale(3.4);opacity:0}}
@keyframes pinfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.closing{font-size:clamp(3rem,1.5rem + 9vw,9.5rem);line-height:.92;letter-spacing:-.045em}
.closing-sec .btn-row{margin-block-start:var(--s-7)}
.closing .ln{display:block}
@media (max-width:900px){.book{grid-template-columns:1fr}.talk-grid{grid-template-columns:1fr}}
@media (max-width:420px){.phone-row{grid-template-columns:7.2rem 1fr}}
/* ---------- 16. Footer ---------- */
.footer{position:relative;z-index:1;padding-block:var(--s-9) var(--s-7);border-block-start:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s-7)}
.footer img{height:30px;width:auto}
.footer p{color:var(--text-secondary);font-size:var(--fs-sm);margin-block-start:var(--s-4);max-width:34ch}
.footer h2{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary);margin-block-end:var(--s-4)}
.footer ul{display:grid;gap:.6rem}
.footer li a{color:var(--text-secondary);font-size:var(--fs-sm);transition:color var(--t-fast) var(--ease)}
.footer li a:hover{color:var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;margin-block-start:var(--s-8);padding-block-start:var(--s-5);border-block-start:1px solid var(--line);font-size:var(--fs-xs);color:var(--text-tertiary)}
.wa-float{position:fixed;inset-inline-end:var(--s-5);inset-block-end:var(--s-5);z-index:80;display:flex;align-items:center;gap:.6em;padding:.8rem 1.1rem .8rem .9rem;border-radius:var(--r-pill);background:rgba(var(--canvas-rgb),.88);border:1px solid var(--line-strong);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:var(--fs-sm);font-weight:600;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),opacity var(--t-med) var(--ease)}
.wa-float:hover{transform:translateY(-2px);border-color:var(--accent)}
.wa-float svg{width:20px;height:20px;color:var(--accent)}
.wa-float.hidden{opacity:0;pointer-events:none}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}.footer-grid > div:first-child{grid-column:1/-1}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}.wa-float .lbl{display:none}.wa-float{padding:.9rem}}
/* ---------- 16b. Service pages + FAQ page ---------- */
.page-hero{position:relative;padding-block:calc(var(--s-10) + 3rem) var(--s-9)}
.page-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-8);align-items:center}
.page-text{display:grid;gap:var(--s-5);justify-items:start}
.crumbs{display:flex;flex-wrap:wrap;gap:.5em;font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-tertiary)}
.crumbs li + li::before{content:"/";margin-inline-end:.5em;opacity:.5}
.crumbs a:hover{color:var(--accent)}
.page-media{position:relative;aspect-ratio:4/5;max-height:70vh;width:100%;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:var(--panel-2);justify-self:end}
.page-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.18);transition:opacity 1100ms var(--ease)}
.page-media img.on{opacity:1;animation:dolly 7.5s linear forwards}
.page-media .now{position:absolute;inset-inline-start:var(--s-4);inset-block-end:var(--s-4);z-index:2}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s-8);align-items:center}
.split-media{aspect-ratio:4/5;max-height:60vh;border-radius:24px;overflow:hidden;border:1px solid var(--line)}
.split-media img{width:100%;height:100%;object-fit:cover}
.checks-x{display:grid;gap:var(--s-3);margin-block-start:var(--s-5);color:var(--text-secondary)}
.checks-x li{display:flex;gap:.7em;align-items:flex-start}
.checks-x i{flex:none;width:1.3em;height:1.3em;border-radius:50%;border:1px solid var(--line-strong);position:relative;margin-block-start:.15em}
.checks-x i::before,.checks-x i::after{content:"";position:absolute;left:50%;top:50%;width:.5em;height:1px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.checks-x i::after{transform:translate(-50%,-50%) rotate(-45deg)}
.checks-ok i{border-color:rgba(254,93,2,.5);background:rgba(254,93,2,.12);color:var(--accent)}
.checks-ok i::before{width:.42em;height:.22em;border:.11em solid var(--accent);border-top:0;border-right:0;background:none;transform:translate(-50%,-62%) rotate(-45deg)}
.checks-ok i::after{display:none}
.punch{margin-block-start:var(--s-5);font-family:var(--font-display);font-weight:600;font-size:var(--fs-lead);letter-spacing:-.015em}
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.feature{padding:var(--s-6) var(--s-5);border-radius:20px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 60%),var(--panel);display:grid;gap:var(--s-3);align-content:start;transition:transform .6s var(--ease),border-color .4s var(--ease),box-shadow .6s var(--ease)}
.feature:hover{transform:translateY(-4px);border-color:rgba(254,93,2,.45);box-shadow:0 30px 60px -30px rgba(254,93,2,.35)}
.feature .idx{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.12em;color:var(--accent)}
.feature h3{font-family:var(--font-display);font-weight:600;font-size:1.2rem;letter-spacing:-.015em}
.feature p{color:var(--text-secondary);font-size:var(--fs-sm)}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-3)}
.step{padding:var(--s-5);border-radius:20px;border:1px solid rgba(254,93,2,.3);background:rgba(254,93,2,.06);display:grid;gap:var(--s-2)}
.step .n{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--accent);letter-spacing:.1em}
.step strong{font-family:var(--font-display);font-weight:600;font-size:1.1rem;letter-spacing:-.015em}
.step p{color:var(--text-secondary);font-size:var(--fs-sm)}
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s-8);align-items:start}
.faq-list{display:grid;gap:var(--s-2)}
.faq-item{border-radius:var(--r-md);border:1px solid var(--line);background:var(--glass);transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.faq-item[open]{border-color:var(--line-strong);background:var(--glass-2)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--s-4);align-items:center;padding:var(--s-5) var(--s-5);font-family:var(--font-display);font-weight:600;font-size:1.15rem;letter-spacing:-.015em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary i{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);position:relative;transition:transform var(--t-med) var(--ease),background var(--t-fast) var(--ease)}
.faq-item summary i::before,.faq-item summary i::after{content:"";position:absolute;inset-inline-start:50%;inset-block-start:50%;width:10px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.faq-item summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item[open] summary i{transform:rotate(45deg);background:var(--accent-muted);border-color:var(--accent);color:var(--accent)}
.faq-item .ans{padding:0 var(--s-5) var(--s-5);color:var(--text-secondary);max-width:60ch}
.more-links{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);margin-block-start:var(--s-4)}
.cta-band{padding-block:var(--s-9);border-block-start:1px solid var(--line)}
.cta-band .lead{margin-block-start:var(--s-4)}
.cta-band .btn-row{margin-block-start:var(--s-6)}
@media (max-width:900px){.page-grid,.split,.faq{grid-template-columns:1fr}.page-media{max-height:50vh;justify-self:start}.features{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.features,.steps{grid-template-columns:1fr}}
/* ---------- 17. Reveal choreography ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.scale{transform:scale(.96) translateY(14px)}
.reveal.scale.in{transform:none}
.reveal .ln{opacity:0;transform:translateY(.55em);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.reveal.in .ln{opacity:1;transform:none}
.reveal.in .ln:nth-child(2){transition-delay:.12s}.reveal.in .ln:nth-child(3){transition-delay:.24s}.reveal.in .ln:nth-child(4){transition-delay:.36s}
.svc-grid > .reveal:nth-child(2n){transition-delay:.1s}
/* living elements pause off-screen and on hidden tabs */
.live-off *,.live-off *::before,.live-off *::after{animation-play-state:paused!important}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
/* ---------- 18. Reduced motion: every animation lands on its final state ---------- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important;scroll-behavior:auto!important}
body{opacity:1}
.reveal,.reveal .ln{opacity:1;transform:none}
.stack-card{transform:none}
.stack-inner::after{opacity:0}
.statement .w{opacity:1}
.marquee-track{animation:none;transform:none}
.marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
.flip-stage{display:none}
.flip-all{display:block;white-space:normal;line-height:1.3}
.reel-slide.is-active img{animation:none;transform:none}
.reel-bars span.is-active i{animation:none;transform:scaleX(1)}
.page-media img.on{animation:none;transform:none}
.qatar-media{transform:none}
.svc-card .thumb img.on{animation:none;transform:none}
.svc-card.reveal .thumb{transform:none}
.phone-sec{height:auto}
.phone-stage{position:static;height:auto}
.phone,.phone-cap,.fact{opacity:1;transform:none}
.in .phone{transform:none}
.orbit{--heat:1}
.orbit .node circle{fill:var(--accent);stroke:var(--accent)}
.orbit .node text{fill:#140600}
.orbit .lbl{opacity:1}
.orbit .core-hint,.orbit .core-step,.orbit .core-burst{display:none}
.orbit .core-done{opacity:1;transform:none}
.orbit .core{background:radial-gradient(circle at 40% 35%,#ffb23f,var(--accent) 60%,#c84600 100%)}
.hold-hint{display:none}
.orbit-done{max-height:none;opacity:1;transform:none}
.carousel{overflow-x:auto;cursor:default;scrollbar-width:none}
.car-track{transform:none!important}
.car-nav{display:none}
.cmp-stage{min-height:0;display:grid;gap:var(--s-6)}
.pair{position:static;opacity:1;transform:none;pointer-events:auto}
.map-pin,.map-pin i{animation:none}
.map-pin i{opacity:.4;transform:translate(-50%,-50%) scale(1.8)}
}