/* ============================================================
   FLAP MARKETING — concept redesign
   "One flap starts the storm" — the butterfly effect, applied
   to growth. Dubai dusk palette: ink night, molten gold, ember
   horizon, sand daylight.
   ============================================================ */

:root{
  --ink:        #070A13;
  --ink-2:      #0D1322;
  --ink-3:      #131A2E;
  --gold:       #E9B457;
  --ember:      #FF6A3C;
  --sand:       #F4EEE2;
  --sand-2:     #EAE0CC;
  --txt:        #EAEDF5;
  --txt-dim:    #9AA1B5;
  --txt-ink:    #14181F;
  --txt-ink-dim:#7A7160;
  --line:       rgba(233,180,87,.16);
  --line-soft:  rgba(234,237,245,.09);
  --line-sand:  rgba(20,24,31,.14);
  --grad:       linear-gradient(112deg, #E9B457 8%, #FF6A3C 92%);
  --font-display:"Bricolage Grotesque", "Instrument Sans", sans-serif;
  --font-body:  "Instrument Sans", system-ui, sans-serif;
  --font-mono:  "Space Mono", ui-monospace, monospace;
  --font-ar:    "Noto Kufi Arabic", sans-serif;
  --nav-h: 84px;
  --pad: clamp(96px, 13vw, 190px);
  --radius: 20px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  background:var(--ink);
  color:var(--txt);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked{ overflow:hidden; }

::selection{ background:var(--gold); color:var(--ink); }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:#2A3145; border-radius:8px; border:2px solid var(--ink); }

img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; }

.container{ width:min(1240px, 92vw); margin-inline:auto; }
.mono{ font-family:var(--font-mono); }
.ar{ font-family:var(--font-ar); font-weight:400; }
.grad-text{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* --- skip link ----------------------------------------------------- */
.skip{
  position:fixed; top:-60px; left:16px; z-index:400;
  background:var(--gold); color:var(--ink);
  padding:10px 18px; border-radius:8px; font-weight:600;
  transition:top .25s ease;
}
.skip:focus{ top:14px; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

/* --- film grain ----------------------------------------------------- */
.grain{
  position:fixed; inset:-40%; z-index:250; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05;
  animation:grain 7s steps(10) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0); } 20%{ transform:translate(-4%,3%); }
  40%{ transform:translate(3%,-5%); } 60%{ transform:translate(-3%,-2%); }
  80%{ transform:translate(4%,4%); }
}

/* --- scroll progress ------------------------------------------------ */
.progressbar{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:300;
  background:var(--grad); transform:scaleX(0); transform-origin:left;
}

/* --- custom cursor --------------------------------------------------- */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; z-index:350; pointer-events:none;
  border-radius:50%;
  opacity:0;
}
.cursor-dot{ width:7px; height:7px; background:var(--gold); margin:-3.5px 0 0 -3.5px; }
.cursor-ring{
  width:42px; height:42px; margin:-21px 0 0 -21px;
  border:1.5px solid rgba(233,180,87,.65);
  display:grid; place-items:center;
  transition:width .3s ease, height .3s ease, margin .3s ease,
             background-color .3s ease, border-color .3s ease;
}
.cursor-ring .cursor-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  color:var(--ink); opacity:0; transform:scale(.6);
  transition:opacity .25s ease, transform .25s ease;
  text-transform:uppercase; white-space:nowrap;
}
.cursor-ring.is-hover{
  width:64px; height:64px; margin:-32px 0 0 -32px;
  background:rgba(233,180,87,.14); border-color:var(--gold);
}
.cursor-ring.is-label{
  width:76px; height:76px; margin:-38px 0 0 -38px;
  background:var(--gold); border-color:var(--gold);
}
.cursor-ring.is-label .cursor-label{ opacity:1; transform:scale(1); }
body.custom-cursor, body.custom-cursor *{ cursor:none !important; }
@media (pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }

/* --- preloader -------------------------------------------------------- */
.loader{
  position:fixed; inset:0; z-index:320;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.loader-word{
  font-family:var(--font-display);
  font-weight:800; font-size:clamp(3.4rem, 10vw, 7.5rem);
  letter-spacing:-.03em; line-height:1;
  display:flex; overflow:hidden;
}
.loader-word .l{ display:inline-block; transform:translateY(115%); }
.loader-word .l.reg{
  font-size:.32em; align-self:flex-start; margin-top:.28em; margin-left:.12em;
  color:var(--gold);
}
.loader-meta{
  position:absolute; left:0; right:0; bottom:34px;
  display:flex; justify-content:space-between; align-items:flex-end;
  width:min(1240px,92vw); margin-inline:auto;
  font-family:var(--font-mono); font-size:12px; color:var(--txt-dim);
  letter-spacing:.06em;
}
.loader-pct{ font-size:clamp(1.4rem,3vw,2rem); color:var(--gold); }
.loader-bar{
  position:absolute; bottom:0; left:0; height:3px; width:100%;
  background:rgba(233,180,87,.12);
}
.loader-bar i{
  position:absolute; inset:0; background:var(--grad);
  transform:scaleX(0); transform-origin:left;
}

/* --- navigation -------------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:transform .5s cubic-bezier(.22,1,.36,1), background-color .4s ease,
             backdrop-filter .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.nav.is-hidden{ transform:translateY(-100%); }
.nav.is-solid{
  background:rgba(7,10,19,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-color:var(--line-soft);
}
.nav-inner{
  width:min(1240px,92vw); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo{
  font-family:var(--font-display); font-weight:800;
  font-size:1.5rem; letter-spacing:-.02em; line-height:1;
  display:flex; align-items:baseline; gap:2px;
}
.logo sup{ color:var(--gold); font-size:.55em; }
.logo .logo-tail{ color:var(--gold); }
.nav-links{ display:flex; gap:34px; }
.nav-links a{
  font-size:.92rem; font-weight:500; color:var(--txt-dim);
  position:relative; padding:6px 0;
  transition:color .3s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:var(--grad); transform:scaleX(0); transform-origin:right;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.nav-links a:hover{ color:var(--txt); }
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav-right{ display:flex; align-items:center; gap:22px; }
.nav-clock{
  font-family:var(--font-mono); font-size:.78rem; color:var(--txt-dim);
  letter-spacing:.05em; white-space:nowrap;
}
.nav-clock b{ color:var(--gold); font-weight:400; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:600; font-size:.95rem; letter-spacing:.01em;
  padding:14px 26px; border-radius:100px;
  position:relative; overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, color .3s ease;
  will-change:transform;
}
.btn-solid{ background:var(--grad); color:var(--ink); }
.btn-solid::before{
  content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-22deg);
  transition:left .55s ease;
}
.btn-solid:hover::before{ left:130%; }
.btn-solid:hover{ box-shadow:0 12px 34px rgba(255,106,60,.32); }
.btn-ghost{
  border:1px solid var(--line); color:var(--txt);
  background:rgba(233,180,87,.03);
  transition:border-color .3s ease, background-color .3s ease;
}
.btn-ghost:hover{ border-color:var(--gold); background:rgba(233,180,87,.08); }
.btn .btn-arrow{ transition:transform .35s cubic-bezier(.22,1,.36,1); }
.btn:hover .btn-arrow{ transform:translateX(5px); }
.nav .btn{ padding:11px 22px; font-size:.88rem; }

.burger{
  display:none; width:44px; height:44px; position:relative; z-index:230;
}
.burger span{
  position:absolute; left:10px; right:10px; height:2px; background:var(--txt);
  transition:transform .45s cubic-bezier(.22,1,.36,1), top .45s ease, background-color .3s;
}
.burger span:nth-child(1){ top:17px; }
.burger span:nth-child(2){ top:26px; }
.burger.is-open span:nth-child(1){ top:21px; transform:rotate(45deg); background:var(--gold); }
.burger.is-open span:nth-child(2){ top:21px; transform:rotate(-45deg); background:var(--gold); }

.mobile-menu{
  position:fixed; inset:0; z-index:220; background:var(--ink-2);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 8vw;
  clip-path:circle(0% at calc(100% - 54px) 42px);
  visibility:hidden;
  transition:clip-path .8s cubic-bezier(.65,0,.35,1), visibility 0s linear .8s;
}
.mobile-menu.is-open{
  clip-path:circle(150% at calc(100% - 54px) 42px);
  visibility:visible; transition-delay:0s;
}
.mobile-menu a{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.2rem, 9vw, 3.6rem); line-height:1.28;
  color:var(--txt); display:flex; align-items:baseline; gap:14px;
  opacity:0; transform:translateY(26px);
  transition:opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1), color .3s;
}
.mobile-menu.is-open a{ opacity:1; transform:translateY(0); }
.mobile-menu a:hover{ color:var(--gold); }
.mobile-menu a .mono{ font-size:.85rem; color:var(--gold); }
.mobile-menu .mm-foot{
  margin-top:7vh; font-family:var(--font-mono); font-size:.8rem;
  color:var(--txt-dim); line-height:2;
  opacity:0; transition:opacity .5s ease .35s;
}
.mobile-menu.is-open .mm-foot{ opacity:1; }

/* --- hero --------------------------------------------------------------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(120% 70% at 50% 118%, rgba(255,106,60,.22), transparent 55%),
    radial-gradient(90% 60% at 82% -10%, rgba(233,180,87,.10), transparent 60%),
    var(--ink);
}
#wing{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0;
}
.hero-inner{
  position:relative; z-index:3;
  padding-top:calc(var(--nav-h) + 4vh);
}
.eyebrow{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.eyebrow::before{
  content:""; width:38px; height:1px; background:var(--grad); flex:none;
}
.eyebrow .ar{ letter-spacing:0; color:var(--txt-dim); font-size:.88rem; }
.hero .eyebrow{ margin-bottom:clamp(20px,3.5vh,36px); }

.hero-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(3.1rem, 11.8vw, 10.2rem);
  line-height:.95; letter-spacing:-.035em;
  text-transform:uppercase; position:relative;
}
.h-line{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.h-line > span{ display:inline-block; will-change:transform; }
.h-line .thin{ font-weight:300; letter-spacing:-.02em; }
.hero-note{
  position:absolute; right:2%; top:34%;
  font-size:.75rem; color:var(--txt-dim); letter-spacing:.04em;
  line-height:1.8; text-align:left; max-width:200px;
  padding-left:16px; border-left:1px solid var(--line);
}
.hero-sub{
  max-width:560px; margin-top:clamp(24px,4vh,40px);
  color:var(--txt-dim); font-size:clamp(1rem,1.4vw,1.15rem); line-height:1.7;
}
.hero-sub b{ color:var(--txt); font-weight:600; }
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; margin-top:clamp(26px,4vh,42px); }

.hero-foot{
  position:relative; z-index:3;
  margin-top:auto; padding:26px 0 30px;
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.1em;
  color:var(--txt-dim); text-transform:uppercase;
  border-top:1px solid var(--line-soft);
}
.hero-foot .hf-item b{ color:var(--gold); font-weight:400; }
.scroll-hint{ display:inline-flex; align-items:center; gap:10px; }
.scroll-hint i{
  width:1px; height:34px; background:linear-gradient(var(--gold), transparent);
  display:block; position:relative; overflow:hidden;
}
.scroll-hint i::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:linear-gradient(var(--ember), transparent);
  animation:scrollhint 1.8s ease-in-out infinite;
}
@keyframes scrollhint{ 0%{ top:-100%; } 60%,100%{ top:100%; } }

/* --- marquee band -------------------------------------------------------- */
.marquee-band{
  position:relative; z-index:5;
  background:var(--grad); color:var(--ink);
  transform:rotate(-1.6deg) scale(1.03);
  margin:-34px 0 -12px; padding:16px 0;
  overflow:hidden; white-space:nowrap;
  box-shadow:0 18px 60px rgba(255,106,60,.22);
}
.marquee-track{
  display:inline-flex; gap:0;
  animation:marquee 26s linear infinite;
  will-change:transform;
}
.marquee-band:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.05rem, 2.1vw, 1.5rem); letter-spacing:.02em;
  text-transform:uppercase; padding:0 22px;
  display:inline-flex; align-items:center; gap:44px;
}
.marquee-track span .ar{ font-weight:600; }
.marquee-track span::after{ content:"✦"; font-size:.8em; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* --- generic section furniture ------------------------------------------- */
section{ position:relative; scroll-margin-top:70px; }
.sec-pad{ padding:var(--pad) 0; }
.sec-head{ margin-bottom:clamp(44px,7vw,84px); }
.sec-title{
  font-family:var(--font-display); font-weight:750;
  font-size:clamp(2.5rem, 6.4vw, 5rem);
  line-height:1.02; letter-spacing:-.03em; text-transform:uppercase;
  margin-top:22px; max-width:14ch;
}
.sec-head .row{
  display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap;
}
.sec-lede{ max-width:420px; color:var(--txt-dim); font-size:1.02rem; }

/* --- manifesto (sand) ------------------------------------------------------ */
.about{ background:var(--sand); color:var(--txt-ink); }
.about .eyebrow .ar{ color:var(--txt-ink-dim); }
.manifesto{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.55rem, 3.6vw, 3rem);
  line-height:1.34; letter-spacing:-.015em;
  max-width:24ch; margin-top:30px;
}
.manifesto .w{ color:rgba(20,24,31,.16); transition:color .3s linear; }
.manifesto .w.lit{ color:var(--txt-ink); }
.manifesto .w.hot{ background:var(--grad); -webkit-background-clip:text; background-clip:text; }
.manifesto .w.hot.lit{ -webkit-text-fill-color:transparent; color:transparent; }

.stats{
  margin-top:clamp(60px,9vw,110px);
  display:grid; grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--line-sand);
}
.stat{
  padding:34px 26px 8px 0;
  border-right:1px solid var(--line-sand);
}
.stat:last-child{ border-right:0; }
.stat .num{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.3rem, 5vw, 4rem); letter-spacing:-.03em; line-height:1;
  color:var(--txt-ink); font-variant-numeric:tabular-nums;
}
.stat .num em{
  font-style:normal;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.stat .lbl{
  margin-top:12px; font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--txt-ink-dim);
}

/* --- services (ink) --------------------------------------------------------- */
.services{ background:var(--ink); }
.svc-list{ border-top:1px solid var(--line-soft); }
.svc{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:110px 1fr auto;
  align-items:center; gap:clamp(16px,4vw,54px);
  padding:clamp(26px,4vw,44px) clamp(8px,1.5vw,20px);
  border-bottom:1px solid var(--line-soft);
  isolation:isolate;
}
.svc::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(112deg, rgba(233,180,87,.10), rgba(255,106,60,.10));
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .55s cubic-bezier(.65,0,.35,1);
}
.svc:hover::before{ transform:scaleY(1); transform-origin:top; }
.svc-code{
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.2em;
  color:var(--gold); border:1px solid var(--line);
  border-radius:100px; padding:8px 0; text-align:center; width:86px;
  transition:background-color .4s ease, color .4s ease;
}
.svc:hover .svc-code{ background:var(--gold); color:var(--ink); }
.svc-main h3{
  font-family:var(--font-display); font-weight:750;
  font-size:clamp(1.7rem, 4.6vw, 3.6rem);
  letter-spacing:-.025em; line-height:1.05; text-transform:uppercase;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.svc:hover .svc-main h3{ transform:translateX(14px); }
.svc-main p{
  color:var(--txt-dim); max-width:52ch; margin-top:10px; font-size:.98rem;
  opacity:.85;
}
.svc-arrow{
  width:58px; height:58px; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; flex:none;
  transition:background-color .4s ease, transform .5s cubic-bezier(.22,1,.36,1),
             border-color .4s ease;
}
.svc-arrow svg{ width:20px; height:20px; stroke:var(--gold); transition:stroke .4s; }
.svc:hover .svc-arrow{ background:var(--gold); border-color:var(--gold); transform:rotate(-45deg); }
.svc:hover .svc-arrow svg{ stroke:var(--ink); }

/* floating preview card */
.float-card{
  position:fixed; top:0; left:0; z-index:60;
  width:250px; height:180px; border-radius:16px;
  background:var(--ink-3);
  border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 0 6px rgba(233,180,87,.05);
  pointer-events:none; opacity:0; transform:scale(.7) rotate(-4deg);
  overflow:hidden; display:none;
}
.scene{ position:absolute; inset:0; display:none; }
.scene.active{ display:block; }
.scene .tag{
  position:absolute; left:14px; top:12px;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold);
}
/* smm — chat bubbles */
.sc-smm .bub{
  position:absolute; border-radius:14px; padding:8px 13px;
  font-size:.7rem; font-weight:600; color:var(--ink);
  background:var(--gold); opacity:0;
  animation:bubpop 3.2s ease-in-out infinite;
}
.sc-smm .b1{ left:18px; top:48px; }
.sc-smm .b2{ right:20px; top:84px; background:var(--ember); color:#fff; animation-delay:.9s; }
.sc-smm .b3{ left:32px; top:122px; background:#fff; animation-delay:1.8s; }
@keyframes bubpop{
  0%,12%{ opacity:0; transform:translateY(10px) scale(.85); }
  22%,78%{ opacity:1; transform:translateY(0) scale(1); }
  90%,100%{ opacity:0; transform:translateY(-6px) scale(.9); }
}
/* seo — bars */
.sc-seo .bars{ position:absolute; left:24px; right:24px; bottom:26px; height:96px; display:flex; align-items:flex-end; gap:12px; }
.sc-seo .bar{ flex:1; background:linear-gradient(var(--gold), rgba(233,180,87,.25)); border-radius:5px 5px 0 0; transform-origin:bottom; animation:bargrow 2.6s cubic-bezier(.22,1,.36,1) infinite; }
.sc-seo .bar:nth-child(1){ height:34%; }
.sc-seo .bar:nth-child(2){ height:52%; animation-delay:.15s; }
.sc-seo .bar:nth-child(3){ height:70%; animation-delay:.3s; }
.sc-seo .bar:nth-child(4){ height:100%; animation-delay:.45s; background:linear-gradient(var(--ember), rgba(255,106,60,.3)); }
@keyframes bargrow{ 0%{ transform:scaleY(.1); } 45%,80%{ transform:scaleY(1); } 100%{ transform:scaleY(.1); } }
.sc-seo .rank{
  position:absolute; right:16px; top:34px;
  font-family:var(--font-mono); font-weight:700; color:var(--ember); font-size:1rem;
  animation:floaty 2.6s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
/* ads — click ripple */
.sc-ads .adbtn{
  position:absolute; left:50%; top:56%; transform:translate(-50%,-50%);
  background:var(--grad); color:var(--ink); font-weight:700; font-size:.72rem;
  padding:10px 20px; border-radius:100px;
}
.sc-ads .ring{
  position:absolute; left:50%; top:56%; width:20px; height:20px;
  margin:-10px 0 0 -10px; border:2px solid var(--gold); border-radius:50%;
  animation:ripple 2.1s ease-out infinite;
}
.sc-ads .ring.r2{ animation-delay:.7s; }
@keyframes ripple{ 0%{ transform:scale(.6); opacity:1; } 100%{ transform:scale(5.6); opacity:0; } }
.sc-ads .ctr{
  position:absolute; right:16px; bottom:14px;
  font-family:var(--font-mono); font-size:.62rem; color:var(--gold);
}
/* web — browser skeleton */
.sc-web .frame{
  position:absolute; inset:38px 20px 20px;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:rgba(255,255,255,.02);
}
.sc-web .bar-top{ height:20px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:5px; padding:0 9px; }
.sc-web .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); opacity:.7; }
.sc-web .dot:nth-child(2){ background:var(--ember); }
.sc-web .dot:nth-child(3){ background:#fff; opacity:.4; }
.sc-web .ln{
  height:9px; border-radius:4px; margin:11px 12px 0;
  background:linear-gradient(90deg, rgba(233,180,87,.16) 25%, rgba(233,180,87,.42) 50%, rgba(233,180,87,.16) 75%);
  background-size:220% 100%;
  animation:shimmer 1.9s linear infinite;
}
.sc-web .ln:nth-child(3){ width:62%; }
.sc-web .ln:nth-child(4){ width:78%; animation-delay:.25s; }
@keyframes shimmer{ to{ background-position:-220% 0; } }
.sc-web .code{
  position:absolute; right:14px; bottom:12px;
  font-family:var(--font-mono); color:var(--ember); font-size:.85rem; font-weight:700;
}
/* vis — play */
.sc-vis .play{
  position:absolute; left:50%; top:48%; width:58px; height:58px;
  margin:-29px 0 0 -29px; border-radius:50%;
  background:var(--grad); display:grid; place-items:center;
  animation:pulse 2s ease-in-out infinite;
}
.sc-vis .play::after{
  content:""; border-style:solid; border-width:10px 0 10px 17px;
  border-color:transparent transparent transparent var(--ink);
  margin-left:4px;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,106,60,.45); }
  55%{ box-shadow:0 0 0 18px rgba(255,106,60,0); }
}
.sc-vis .timeline{
  position:absolute; left:22px; right:22px; bottom:22px; height:4px;
  background:rgba(233,180,87,.18); border-radius:4px; overflow:hidden;
}
.sc-vis .timeline i{
  position:absolute; inset:0; background:var(--grad);
  transform-origin:left; animation:scrub 3.4s linear infinite;
}
@keyframes scrub{ 0%{ transform:scaleX(0); } 100%{ transform:scaleX(1); } }
/* brd — shapes */
.sc-brd .shape{ position:absolute; }
.sc-brd .cir{
  width:78px; height:78px; border-radius:50%;
  border:2px solid var(--gold); left:44px; top:52px;
  animation:orbit 6s linear infinite;
}
.sc-brd .sq{
  width:58px; height:58px; background:var(--ember); opacity:.85;
  right:52px; top:66px; border-radius:10px;
  animation:spin 7s linear infinite;
  mix-blend-mode:screen;
}
.sc-brd .tri{
  left:104px; top:84px; width:0; height:0;
  border-left:26px solid transparent; border-right:26px solid transparent;
  border-bottom:44px solid var(--gold); opacity:.55;
  animation:floaty 3.4s ease-in-out infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes orbit{
  0%{ transform:translate(0,0); } 25%{ transform:translate(10px,-8px); }
  50%{ transform:translate(0,-14px); } 75%{ transform:translate(-10px,-8px); }
  100%{ transform:translate(0,0); }
}

/* --- process (sand, pinned horizontal) --------------------------------------- */
.process{ background:var(--sand-2); color:var(--txt-ink); overflow:hidden; }
.process .eyebrow .ar{ color:var(--txt-ink-dim); }
.process .sec-head{ padding-top:var(--pad); margin-bottom:clamp(30px,4vw,56px); }
.proc-viewport{ overflow:hidden; }
.proc-track{
  display:flex; gap:clamp(20px,3vw,40px);
  padding:0 4vw var(--pad);
  will-change:transform; width:max-content;
}
.panel{
  width:min(620px, 78vw); flex:none;
  border:1px solid var(--line-sand); border-radius:var(--radius);
  background:var(--sand);
  padding:clamp(28px,3.5vw,48px);
  display:flex; flex-direction:column; min-height:clamp(340px, 46vh, 460px);
  position:relative; overflow:hidden;
  transition:transform .4s ease, box-shadow .4s ease;
}
.panel:hover{ transform:translateY(-6px); box-shadow:0 24px 60px rgba(20,24,31,.12); }
.panel .p-idx{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(4rem, 9vw, 7rem); line-height:.9; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1.5px rgba(20,24,31,.28);
}
.panel:hover .p-idx{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-stroke:1.5px transparent;
}
.panel h3{
  font-family:var(--font-display); font-weight:750; text-transform:uppercase;
  font-size:clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing:-.02em;
  margin-top:auto; padding-top:34px;
}
.panel p{ color:#4A4436; margin-top:14px; max-width:44ch; }
.panel .p-tag{
  margin-top:26px; padding-top:18px; border-top:1px solid var(--line-sand);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--txt-ink-dim);
}
.proc-progress{
  height:2px; background:rgba(20,24,31,.12);
  width:min(1240px,92vw); margin:0 auto; position:relative; top:-30px;
}
.proc-progress i{
  position:absolute; inset:0; background:var(--grad);
  transform:scaleX(0); transform-origin:left;
}

/* --- team (ink) ---------------------------------------------------------------- */
.team{ background:var(--ink); }
.team-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.member{
  border:1px solid var(--line-soft); border-radius:var(--radius);
  background:linear-gradient(160deg, var(--ink-2), var(--ink));
  padding:34px 28px 28px;
  position:relative; overflow:hidden;
  transform-style:preserve-3d; will-change:transform;
}
.member::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% -20%, rgba(233,180,87,.14), transparent 55%);
  opacity:0; transition:opacity .5s ease;
}
.member:hover::after{ opacity:1; }
.monogram{
  width:92px; height:92px; border-radius:50%; position:relative;
  display:grid; place-items:center; margin-bottom:26px;
  font-family:var(--font-display); font-weight:800; font-size:1.7rem;
  letter-spacing:-.02em; color:var(--gold);
  background:var(--ink-3);
}
.monogram::before{
  content:""; position:absolute; inset:-3px; border-radius:50%; z-index:-1;
  background:conic-gradient(from 0deg, var(--gold), var(--ember), transparent 62%, var(--gold));
  animation:spin 9s linear infinite paused;
}
.member:hover .monogram::before{ animation-play-state:running; }
.monogram::after{
  content:""; position:absolute; inset:0; border-radius:50%; z-index:-1;
  background:var(--ink-3); margin:0;
}
.monogram b{ position:relative; z-index:1; }
.member h3{
  font-family:var(--font-display); font-weight:700; font-size:1.45rem;
  letter-spacing:-.01em;
}
.member .role{ color:var(--txt-dim); font-size:.95rem; margin-top:4px; }
.member .m-code{
  position:absolute; top:26px; right:24px;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.18em;
  color:var(--txt-dim); border:1px solid var(--line-soft);
  padding:6px 10px; border-radius:100px;
  transition:color .3s, border-color .3s;
}
.member:hover .m-code{ color:var(--gold); border-color:var(--line); }

/* --- reviews (sand) --------------------------------------------------------------- */
.reviews{ background:var(--sand); color:var(--txt-ink); }
.reviews .eyebrow .ar{ color:var(--txt-ink-dim); }
.rev-rail{
  display:flex; gap:22px; overflow-x:auto;
  padding:6px max(4vw, calc((100vw - 1240px)/2)) 26px;
  scroll-snap-type:x mandatory; cursor:grab;
  scrollbar-width:none; -ms-overflow-style:none;
}
.rev-rail::-webkit-scrollbar{ display:none; }
.rev-rail.dragging{ cursor:grabbing; scroll-snap-type:none; }
.review{
  flex:none; width:min(430px, 82vw); scroll-snap-align:start;
  background:#FFFDF8; border:1px solid var(--line-sand); border-radius:var(--radius);
  padding:34px 30px 28px; position:relative;
  display:flex; flex-direction:column; user-select:none;
}
.review .qmark{
  font-family:var(--font-display); font-weight:800; font-size:4rem; line-height:.6;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:20px;
}
.review p{ font-size:1.04rem; line-height:1.65; color:#33301F; color:#3A3626; }
.review footer{
  margin-top:auto; padding-top:26px; display:flex; align-items:center; justify-content:space-between;
}
.review .who b{ font-family:var(--font-display); font-weight:700; font-size:1rem; display:block; }
.review .who span{ font-size:.8rem; color:var(--txt-ink-dim); }
.review .stars{ color:var(--ember); letter-spacing:3px; font-size:.85rem; }
.rev-ctrl{ display:flex; gap:12px; }
.rev-btn{
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--line-sand); display:grid; place-items:center;
  transition:background-color .3s ease, transform .3s ease;
}
.rev-btn svg{ width:18px; height:18px; stroke:var(--txt-ink); }
.rev-btn:hover{ background:var(--txt-ink); transform:scale(1.06); }
.rev-btn:hover svg{ stroke:var(--sand); }

/* --- faq (ink) ------------------------------------------------------------------------ */
.faq{ background:var(--ink); }
.faq-list{ max-width:860px; border-top:1px solid var(--line-soft); }
.faq-item{ border-bottom:1px solid var(--line-soft); }
.faq-q{
  width:100%; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:26px;
  padding:28px 4px;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.05rem, 2.2vw, 1.4rem); letter-spacing:-.01em;
  transition:color .3s ease;
}
.faq-q:hover{ color:var(--gold); }
.faq-q .fi{
  flex:none; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); position:relative;
  transition:background-color .35s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.faq-q .fi::before,.faq-q .fi::after{
  content:""; position:absolute; top:50%; left:50%; background:var(--gold);
  transition:background-color .3s;
}
.faq-q .fi::before{ width:14px; height:1.5px; transform:translate(-50%,-50%); }
.faq-q .fi::after{ width:1.5px; height:14px; transform:translate(-50%,-50%); }
.faq-item.open .fi{ background:var(--gold); transform:rotate(135deg); }
.faq-item.open .fi::before,.faq-item.open .fi::after{ background:var(--ink); }
.faq-a{ height:0; overflow:hidden; }
.faq-a p{
  padding:0 4px 30px; max-width:62ch; color:var(--txt-dim); line-height:1.7;
}

/* --- contact / cta ------------------------------------------------------------------------ */
.contact{
  background:
    radial-gradient(90% 80% at 85% 110%, rgba(255,106,60,.16), transparent 55%),
    radial-gradient(70% 60% at 8% -8%, rgba(233,180,87,.10), transparent 55%),
    var(--ink-2);
  border-top:1px solid var(--line-soft);
}
.contact-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(44px,6vw,90px);
  align-items:start;
}
.contact h2{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(3rem, 7.6vw, 6.4rem); line-height:.94; letter-spacing:-.035em;
  margin-top:22px;
}
.contact-details{ margin-top:clamp(34px,5vw,60px); display:grid; gap:0; }
.cd{
  display:flex; align-items:baseline; gap:22px;
  padding:20px 0; border-top:1px solid var(--line-soft);
  transition:padding-left .35s ease;
}
.cd:hover{ padding-left:10px; }
.cd .cd-k{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); width:96px; flex:none;
}
.cd a, .cd address{ font-style:normal; color:var(--txt); font-size:1rem; line-height:1.55; }
.cd a:hover{ color:var(--gold); }

.form-card{
  background:rgba(7,10,19,.55); border:1px solid var(--line);
  border-radius:calc(var(--radius) + 6px);
  padding:clamp(28px,3.4vw,46px);
  backdrop-filter:blur(6px);
  position:relative;
}
.form-card h3{
  font-family:var(--font-display); font-weight:700; font-size:1.35rem;
  margin-bottom:6px;
}
.form-card .fc-sub{ color:var(--txt-dim); font-size:.92rem; margin-bottom:30px; }
.field{ position:relative; margin-bottom:26px; }
.field input,.field textarea,.field select{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line-soft);
  padding:14px 2px 12px; color:var(--txt); font:inherit; resize:none;
  transition:border-color .3s ease;
  border-radius:0;
}
.field select{ appearance:none; -webkit-appearance:none; color:var(--txt-dim); }
.field select option{ color:var(--txt-ink); }
.field select:valid{ color:var(--txt); }
.field textarea{ min-height:96px; }
.field label{
  position:absolute; left:2px; top:14px; color:var(--txt-dim); pointer-events:none;
  transition:transform .3s ease, font-size .3s ease, color .3s ease;
  transform-origin:left;
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--gold); }
.field input:focus ~ label, .field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label, .field textarea:not(:placeholder-shown) ~ label{
  transform:translateY(-24px); font-size:.72rem; color:var(--gold);
  font-family:var(--font-mono); letter-spacing:.12em; text-transform:uppercase;
}
.field .bar{
  position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--grad); transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.field input:focus ~ .bar, .field textarea:focus ~ .bar, .field select:focus ~ .bar{ transform:scaleX(1); }
.select-arrow{
  position:absolute; right:6px; top:20px; width:9px; height:9px;
  border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg); pointer-events:none;
}
.form-card .btn{ width:100%; justify-content:center; margin-top:8px; }
.form-ok{
  position:absolute; inset:0; border-radius:inherit; z-index:3;
  background:var(--ink-2);
  display:none; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:30px; gap:14px;
}
.form-ok .tick{
  width:70px; height:70px; border-radius:50%; background:var(--grad);
  display:grid; place-items:center;
}
.form-ok .tick svg{ width:30px; height:30px; stroke:var(--ink); stroke-width:3; fill:none; }
.form-ok h4{ font-family:var(--font-display); font-size:1.5rem; font-weight:750; }
.form-ok p{ color:var(--txt-dim); font-size:.95rem; max-width:34ch; }

/* --- footer ----------------------------------------------------------------------------------- */
.footer{ background:var(--ink); border-top:1px solid var(--line-soft); overflow:hidden; }
.footer-big{
  padding:clamp(50px,8vw,110px) 0 0;
  text-align:center; line-height:.82; user-select:none;
}
.footer-big span{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(6rem, 24.5vw, 23rem); letter-spacing:-.045em;
  display:inline-block;
  color:transparent; -webkit-text-stroke:1.5px rgba(233,180,87,.32);
  transition:color .5s ease, -webkit-text-stroke-color .5s ease;
}
.footer-big:hover span{
  -webkit-text-stroke-color:transparent;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
}
.footer-mid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px;
  padding:clamp(44px,6vw,70px) 0;
  border-top:1px solid var(--line-soft); margin-top:clamp(40px,6vw,80px);
}
.footer-mid h5{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); margin-bottom:20px; font-weight:400;
}
.footer-mid .f-about{ color:var(--txt-dim); font-size:.95rem; max-width:34ch; line-height:1.7; }
.footer-mid ul{ display:grid; gap:12px; }
.footer-mid ul a{
  color:var(--txt-dim); font-size:.95rem; position:relative;
  transition:color .3s ease, padding-left .3s ease;
}
.footer-mid ul a::before{
  content:"→"; position:absolute; left:-4px; opacity:0; color:var(--gold);
  transition:opacity .3s, left .3s;
}
.footer-mid ul a:hover{ color:var(--txt); padding-left:22px; }
.footer-mid ul a:hover::before{ opacity:1; left:0; }
.footer-bot{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  padding:26px 0 34px; border-top:1px solid var(--line-soft);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; color:var(--txt-dim);
}
.to-top{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center;
  transition:background-color .35s ease, transform .35s ease;
}
.to-top svg{ width:16px; height:16px; stroke:var(--gold); transition:stroke .3s; }
.to-top:hover{ background:var(--gold); transform:translateY(-4px); }
.to-top:hover svg{ stroke:var(--ink); }

/* --- responsive -------------------------------------------------------------------------------- */
@media (max-width:1080px){
  .hero-note{ display:none; }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-mid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .nav-links,.nav-clock{ display:none; }
  .nav .btn{ display:none; }
  .burger{ display:block; }
  .svc{ grid-template-columns:1fr; gap:14px; padding:30px 4px; }
  .svc-arrow{ display:none; }
  .svc-code{ width:78px; font-size:.72rem; }
  .stats{ grid-template-columns:1fr 1fr; }
  .stat{ border-right:0; border-bottom:1px solid var(--line-sand); padding-bottom:26px; }
  .stat:nth-child(odd){ border-right:1px solid var(--line-sand); }
  .stat:nth-child(3),.stat:nth-child(4){ border-bottom:0; padding-bottom:8px; }
  .contact-grid{ grid-template-columns:1fr; }
  .proc-track{ flex-direction:column; width:auto; padding:0 0 var(--pad); }
  .panel{ width:100%; min-height:0; }
  .proc-progress{ display:none; }
  .hero-foot{ flex-wrap:wrap; row-gap:10px; font-size:.68rem; }
}
@media (max-width:560px){
  .team-grid{ grid-template-columns:1fr; }
  .footer-mid{ grid-template-columns:1fr; }
  .hero-cta .btn{ width:100%; justify-content:center; }
}

/* --- reduced motion ------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .marquee-track{ animation:none; }
  .grain{ animation:none; }
  .loader{ display:none; }
  #wing{ opacity:.85; }
}

/* ---------- WordPress admin bar offsets ---------- */
body.admin-bar .site-nav{ top:32px; }
@media (max-width:782px){
  body.admin-bar .site-nav{ top:46px; }
}
/* fallback shell for posts/pages */
.wp-fallback{
  padding: calc(var(--nav-h) + 90px) var(--pad) 130px;
  max-width: 860px; margin: 0 auto;
}
.wp-fallback h1{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(38px, 6vw, 74px); line-height: 1.02;
  letter-spacing: -.02em; margin-bottom: 28px;
}
.wp-fallback .entry{ color: var(--txt); font-size: 17px; line-height: 1.7; }
.wp-fallback .entry a{ color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.wp-fallback .entry p{ margin: 0 0 18px; }
.wp-fallback .eyebrow{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
}