/* ============================================================
   محزم — MHZAM · Marketing Agency landing
   Design system + three switchable directions
   ============================================================ */

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

/* ---------- Headings: Thmanyah Serif Display ---------- */
@font-face{font-family:"Thmanyah Serif Display";src:url("assets/fonts/thmanyah-display-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah Serif Display";src:url("assets/fonts/thmanyah-display-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah Serif Display";src:url("assets/fonts/thmanyah-display-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah Serif Display";src:url("assets/fonts/thmanyah-display-Black.woff2") format("woff2");font-weight:800 900;font-style:normal;font-display:swap}

/* ---------- Body / UI text: Thmanyah Sans ---------- */
@font-face{font-family:"Thmanyah Sans";src:url("assets/fonts/thmanyah-sans-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url("assets/fonts/thmanyah-sans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url("assets/fonts/thmanyah-sans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url("assets/fonts/thmanyah-sans-Bold.woff2") format("woff2");font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url("assets/fonts/thmanyah-sans-Black.woff2") format("woff2");font-weight:800 900;font-style:normal;font-display:swap}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg) !important}
body{min-height:100vh;overflow-x:hidden;background:transparent !important;color:var(--ink);
  font-family:"Thmanyah Sans","IBM Plex Sans Arabic",system-ui,sans-serif;
  font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;
  transition:background .6s ease,color .6s ease}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
::selection{background:var(--gold);color:var(--bg)}

/* ---------- Theme tokens ---------- */
/* ---- Palette: pure monochrome · #000000 / #ffffff ---- */
:root,
[data-theme="heritage"]{               /* Black + white (default) */
  --bg:#000000; --bg-2:#0d0d0d; --panel:#111111;
  --ink:#ffffff; --muted:#b5b5b5; --faint:#6e6e6e;
  --gold:#ffffff; --gold-soft:#e8e8e8;
  --accent2:#9b9b9b;
  --on-gold:#000000;
  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.30);
  --logo-light:1; --logo-dark:0;
  --mark-light:1; --mark-dark:0;
  --grain:.05;
}
[data-theme="mono"]{                    /* Charcoal + white */
  --bg:#111111; --bg-2:#1a1a1a; --panel:#1d1d1d;
  --ink:#ffffff; --muted:#b0b0b0; --faint:#6a6a6a;
  --gold:#ffffff; --gold-soft:#e8e8e8;
  --accent2:#8a8a8a;
  --on-gold:#000000;
  --line:rgba(255,255,255,.13);
  --line-strong:rgba(255,255,255,.28);
  --logo-light:1; --logo-dark:0;
  --mark-light:1; --mark-dark:0;
  --grain:.06;
}
[data-theme="sand"]{                    /* White + black */
  --bg:#ffffff; --bg-2:#f4f4f4; --panel:#ffffff;
  --ink:#000000; --muted:#555555; --faint:#9a9a9a;
  --gold:#000000; --gold-soft:#2a2a2a;
  --accent2:#555555;
  --on-gold:#ffffff;
  --line:rgba(0,0,0,.13);
  --line-strong:rgba(0,0,0,.28);
  --logo-light:0; --logo-dark:1;
  --mark-light:0; --mark-dark:1;
  --grain:.04;
}
/* Light mode: editor inline-text edits can freeze `color` to the dark-theme
   values (un-overridable by author/inline CSS). -webkit-text-fill-color still
   wins for rendering, so drive the rendered text color from theme tokens here. */
[data-theme="sand"] body,
[data-theme="sand"] body *{-webkit-text-fill-color:var(--ink) !important}
[data-theme="sand"] .eyebrow,
[data-theme="sand"] .gold,
[data-theme="sand"] .cta-quote{-webkit-text-fill-color:var(--gold) !important}
[data-theme="sand"] .nav-links a,
[data-theme="sand"] .h1-sub,
[data-theme="sand"] .hero-lead,
[data-theme="sand"] .cta-sub,
[data-theme="sand"] .story-lead,
[data-theme="sand"] .foot,
[data-theme="sand"] .foot *,
[data-theme="sand"] .hero-foot,
[data-theme="sand"] .hero-foot *,
[data-theme="sand"] .band figcaption .lat,
[data-theme="sand"] .lat{-webkit-text-fill-color:var(--muted) !important}
/* keep text WHITE on the elements that stay dark in light mode:
   solid buttons (black pill) and the always-black culture tiles */
[data-theme="sand"] .btn-primary,
[data-theme="sand"] .btn-primary *,
[data-theme="sand"] .nav-cta,
[data-theme="sand"] .nav-cta *,
[data-theme="sand"] .cta-big,
[data-theme="sand"] .cta-big *,
[data-theme="sand"] .band figcaption,
[data-theme="sand"] .band figcaption span{-webkit-text-fill-color:#ffffff !important}
[data-theme="sand"] .band figcaption .lat{-webkit-text-fill-color:rgba(255,255,255,.62) !important}

/* ---------- Motion intensity ---------- */
:root,[data-motion="high"]{
  --mq-fast:18s; --mq-slow:30s; --mq-mark:46s;
  --rev-dur:1.05s; --rev-y:74px; --rev-blur:14px; --parallax:1.9;
  --spin:60s;
}
[data-motion="med"]{
  --mq-fast:34s; --mq-slow:54s; --mq-mark:80s;
  --rev-dur:.85s; --rev-y:44px; --rev-blur:8px; --parallax:1;
  --spin:120s;
}
[data-motion="low"]{
  --mq-fast:70s; --mq-slow:100s; --mq-mark:160s;
  --rev-dur:.45s; --rev-y:16px; --rev-blur:0px; --parallax:0;
  --spin:300s;
}

/* ---------- Type scale ---------- */
:root{
  --fs-hero:clamp(54px,9.2vw,156px);
  --fs-h2:clamp(34px,5.2vw,82px);
  --fs-h3:clamp(23px,2.5vw,38px);
  --fs-lead:clamp(19px,1.7vw,27px);
  --fs-body:clamp(16px,1.15vw,19px);
  --fs-eye:clamp(12px,.85vw,14px);
  --ff-ar:"Thmanyah Sans","IBM Plex Sans Arabic",system-ui,sans-serif;
  --ff-disp:"Thmanyah Serif Display","Tajawal","IBM Plex Sans Arabic",serif;
  --ff-lat:"Space Grotesk",ui-monospace,monospace;
  --max:1320px;
  --pad-x:clamp(20px,5vw,90px);
}

/* ---------- Helpers ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad-x);
  position:relative;z-index:1}
/* decorative heritage icons scattered in section backgrounds */
.deco{position:absolute;z-index:0;pointer-events:none;opacity:.055;
  will-change:transform}
.deco img{width:100%;height:auto;display:block}
.deco .logo-dark{display:none}
[data-theme="sand"] .deco .logo-light{display:none}
[data-theme="sand"] .deco .logo-dark{display:block}
.eyebrow{font-family:var(--ff-lat);font-size:var(--fs-eye);font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;color:var(--gold);
  display:inline-flex;align-items:center;gap:.8em}
.eyebrow::before{content:"";width:34px;height:1.5px;background:var(--gold);
  display:inline-block}
.gold{color:var(--gold)}
.lat{font-family:var(--ff-lat);font-weight:500;letter-spacing:.02em}
section{position:relative}

/* ---------- Reveal animation ---------- */
.js .rv{opacity:0;transform:translateY(var(--rev-y));filter:blur(var(--rev-blur));
  transition:opacity var(--rev-dur) cubic-bezier(.2,.7,.2,1),
    transform var(--rev-dur) cubic-bezier(.2,.7,.2,1),
    filter var(--rev-dur) ease;
  transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none;filter:none}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad-x);
  transition:background .4s ease,padding .4s ease,border-color .4s}
.nav::after{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--bg);opacity:0;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:opacity .4s,border-color .4s}
.nav.scrolled{padding-block:12px}
.nav.scrolled::after{opacity:.82;border-bottom-color:var(--line)}
/* over the always-black hero stage: keep the bar transparent (no white slab in light mode) */
.nav.over-hero::after{opacity:0;border-bottom-color:transparent}
.brand{display:flex;align-items:center;height:42px}
.brand img{height:100%;width:auto;object-fit:contain}
/* logo swaps by theme: dark bg -> white logo, light bg -> black logo */
.logo-dark{display:none}
[data-theme="sand"] .logo-light{display:none}
[data-theme="sand"] .logo-dark{display:block}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px)}
.nav-links a{font-size:15px;font-weight:500;color:var(--muted);
  position:relative;padding:4px 0;transition:color .3s}
.nav-links a::after{content:"";position:absolute;inset-block-end:-2px;
  inset-inline:0;height:1.5px;background:var(--gold);transform:scaleX(0);
  transform-origin:right;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:12px}
.mode-toggle{width:42px;height:42px;border:1.5px solid var(--line-strong);
  border-radius:50%;display:grid;place-items:center;color:var(--ink);flex:none;
  transition:border-color .3s,color .3s,transform .3s}
.mode-toggle:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.mode-toggle svg{width:19px;height:19px}
.mode-toggle .ic-moon{display:none}
[data-theme="sand"] .mode-toggle .ic-sun{display:none}
[data-theme="sand"] .mode-toggle .ic-moon{display:block}
.nav-cta{display:inline-flex;align-items:center;gap:.6em;white-space:nowrap;
  font-weight:600;font-size:15px;color:var(--bg);background:var(--gold);
  padding:10px 22px;border-radius:999px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.nav-cta:hover{transform:translateY(-2px);
  box-shadow:0 10px 30px -8px var(--gold)}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:8px}
.nav-burger span{width:24px;height:2px;background:var(--ink);border-radius:2px}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding-block:120px 90px;overflow:hidden;
  /* transparent so the theme canvas + glass mark show through;
     dark themes -> black hero/white text, sand -> white hero/black text */
  background:transparent}
/* hero-stage retired: the hero now follows the active theme */
.hero-stage{display:none}
/* nav over the hero keeps a transparent bar; chrome follows the theme */
.nav.over-hero .logo-dark{display:none}
.nav.over-hero .logo-light{display:block}
[data-theme="sand"] .nav.over-hero .logo-light{display:none}
[data-theme="sand"] .nav.over-hero .logo-dark{display:block}
.hero-grid{position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:clamp(64px,8vw,120px) clamp(64px,8vw,120px);
  -webkit-mask-image:radial-gradient(120% 90% at 75% 30%,#000 30%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 75% 30%,#000 30%,transparent 78%)}
.hero-mark{position:absolute;z-index:0;
  inset-block-start:50%;inset-inline-start:8%;
  width:clamp(280px,44vw,680px);max-height:78svh;aspect-ratio:1;
  transform:translateY(-50%);
  opacity:.10;pointer-events:none;
  animation:spin var(--spin) linear infinite;will-change:transform}
.hero-mark img{width:100%;height:100%;object-fit:contain}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}

.hero-inner{position:relative;z-index:2;width:100%;
  display:grid;grid-template-columns:1.04fr .96fr;align-items:center;
  gap:clamp(30px,4vw,70px)}
/* fixed glass mark — rides along behind every section, on the start side.
   Sharp in the hero → blurred through the middle sections → sharp again at the CTA */
.glass-fixed{position:fixed;z-index:-1;inset-block-start:50%;
  left:max(3vw,16px);width:min(46vw,600px);aspect-ratio:1;
  transform:translateY(-50%);pointer-events:none;
  opacity:1;filter:none;
  transition:filter .7s ease,opacity .7s ease,
    width .7s ease,inset-block-start .7s ease}
.glass-fixed.is-blur{filter:blur(13px);opacity:.55}
/* at the CTA: sharp but compact, tucked to the lower-left so text stays clear */
.glass-fixed.is-cta{width:min(21vw,270px);inset-block-start:74%;opacity:.95}
/* footer in view: glide up to the empty upper-left so socials stay clear */
.glass-fixed.is-foot{width:min(17vw,220px);inset-block-start:30%;opacity:.85}
/* light mode: the inverted crystal turns into a grey smudge when blurred behind
   white sections — keep it whisper-faint there (it stays present in hero/CTA) */
[data-theme="sand"] .glass-fixed.is-blur{opacity:.08}
[data-theme="sand"] .glass-fixed.is-foot{opacity:.28}
.glass-fixed img{width:100%;height:100%;object-fit:contain;
  animation:glassSpin var(--spin,60s) linear infinite;
  filter:drop-shadow(0 0 70px rgba(255,255,255,.12))}
/* light mode: darken the white crystal so it reads on the white hero */
[data-theme="sand"] .glass-fixed img{filter:invert(1) drop-shadow(0 0 70px rgba(0,0,0,.10))}
@keyframes glassSpin{to{transform:rotate(360deg)}}
.hero-glassgap{min-height:1px}
.lat-h{font-family:var(--ff-lat);font-weight:600;letter-spacing:-.01em}
.hero h1 .h1-sub{font-size:.42em;font-weight:400;color:var(--muted);
  letter-spacing:0;margin-top:.35em}
.hero-rule{width:clamp(90px,9vw,150px);height:2px;border-radius:2px;
  background:var(--gold);margin-top:clamp(18px,2vw,28px)}
.hero-foot{position:absolute;inset-block-end:26px;inset-inline:var(--pad-x);
  z-index:2;display:flex;justify-content:space-between;align-items:center;
  color:var(--faint);font-size:13px;letter-spacing:.06em}
.hero-foot .lat{letter-spacing:.14em}
.hero-eye{margin-bottom:clamp(20px,3vw,40px)}
.hero h1{font-family:var(--ff-disp);font-weight:800;
  font-size:var(--fs-hero);line-height:1.04;letter-spacing:-.02em;
  max-width:15ch}
.hero h1 .ln{display:block;overflow:hidden;padding-block:.08em .22em;margin-block:-.02em -.14em}
.hero h1 .ln > span{display:block}
.hero h1 .draw{position:relative;display:inline-block}
.hero h1 .draw::after{content:"";position:absolute;inset-inline:-.04em;
  inset-block-end:-.16em;height:.07em;border-radius:99px;background:var(--gold);
  transform:scaleX(1);transform-origin:right}

.hero-lead{margin-top:clamp(26px,3.2vw,44px);max-width:46ch;
  font-size:var(--fs-lead);color:var(--muted);line-height:1.7}
.hero-lead b{color:var(--ink);font-weight:600}
.hero-lead + .hero-lead{margin-top:1.1em}

.hero-actions{margin-top:clamp(30px,3.6vw,52px);display:flex;
  flex-wrap:wrap;gap:14px;align-items:center}

/* entrance — base state is VISIBLE; hidden-start only with JS + reduced-motion off,
   so any capture / no-JS / print shows full content */
@media(prefers-reduced-motion:no-preference){
  .js .hero h1 .ln > span{transform:translateY(110%);
    transition:transform 1s cubic-bezier(.16,1,.3,1)}
  .js .hero.ready h1 .ln > span{transform:translateY(0)}
  .js .hero h1 .ln:nth-child(2) > span{transition-delay:.09s}
  .js .hero h1 .ln:nth-child(3) > span{transition-delay:.18s}
  .js .hero h1 .draw::after{transform:scaleX(0);
    transition:transform .85s cubic-bezier(.7,0,.3,1) .9s}
  .js .hero.ready h1 .draw::after{transform:scaleX(1)}
  .js .hero-lead{opacity:0;transform:translateY(24px);
    transition:opacity .9s ease .55s,transform .9s cubic-bezier(.2,.7,.2,1) .55s}
  .js .hero.ready .hero-lead{opacity:1;transform:none}
  .js .hero-actions{opacity:0;transform:translateY(24px);
    transition:opacity .9s ease .72s,transform .9s cubic-bezier(.2,.7,.2,1) .72s}
  .js .hero.ready .hero-actions{opacity:1;transform:none}
}

.btn{display:inline-flex;align-items:center;gap:.7em;font-weight:600;white-space:nowrap;
  font-size:16px;padding:15px 30px;border-radius:999px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),
    background .3s,color .3s,box-shadow .3s}
.btn-primary{background:var(--gold);color:var(--on-gold,#000)}
.btn-primary:hover{transform:translateY(-3px);
  box-shadow:0 16px 40px -12px var(--gold)}
.btn-ghost{border:1.5px solid var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)}
.btn .arr{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn:hover .arr{transform:translateX(-5px)}

.hero-scroll{position:absolute;inset-block-end:30px;inset-inline-start:var(--pad-x);
  z-index:2;display:flex;align-items:center;gap:12px;
  font-family:var(--ff-lat);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint)}
.hero-scroll i{width:1px;height:46px;background:var(--line-strong);
  position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;inset-inline:0;height:40%;
  background:var(--gold);animation:scrolldot 2.2s ease-in-out infinite}
@keyframes scrolldot{0%{top:-40%}60%,100%{top:100%}}

/* ============================================================
   MARQUEE (kinetic strip)
   ============================================================ */
.marquee{position:relative;overflow:hidden;border-block:1px solid var(--line);
  padding-block:clamp(16px,2vw,26px);
  background:color-mix(in srgb,var(--bg-2) 72%,transparent);direction:ltr}
.marquee-track{display:flex;width:max-content;will-change:transform;
  animation:scrollx var(--mq-fast) linear infinite}
.marquee.rev .marquee-track{animation-direction:reverse}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scrollx{to{transform:translateX(-50%)}}
.marquee-item{display:inline-flex;align-items:center;gap:clamp(20px,2.6vw,46px);
  padding-inline:clamp(20px,2.6vw,46px);
  font-family:var(--ff-disp);font-weight:700;
  font-size:clamp(26px,3.4vw,56px);white-space:nowrap;color:var(--ink)}
.marquee-item .dot{width:11px;height:11px;border-radius:50%;background:var(--gold);
  flex:none}
.marquee-item .out{color:transparent;-webkit-text-stroke:1px var(--line-strong)}
/* client-logo strip variant */
.marquee-item.logos{padding-inline:0;gap:0;align-items:center}
.marquee-item.logos img{height:clamp(30px,3.6vw,50px);width:auto;
  display:block;margin-inline-end:clamp(40px,5vw,84px);
  object-fit:contain;opacity:.9}
[data-theme="sand"] .marquee-item.logos img{filter:invert(1)}
/* logos strip is long — scroll it at the slow rate */
.marquee:has(.logos) .marquee-track{animation-duration:var(--mq-slow)}

/* ============================================================
   STORY  (من نحن / قصة المحزم)
   ============================================================ */
.story{padding-block:clamp(90px,11vw,170px)}
.story-head{display:grid;grid-template-columns:1fr;gap:24px;
  max-width:1100px;margin-bottom:clamp(54px,7vw,96px)}
.section-eye{margin-bottom:26px}
.story h2{font-family:var(--ff-disp);font-weight:800;font-size:var(--fs-h2);
  line-height:1.04;letter-spacing:-.015em;max-width:18ch}
.story-cols{display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(40px,6vw,90px);align-items:start}
.story-def p{font-size:var(--fs-lead);line-height:1.85;color:var(--muted)}
.story-def p + p{margin-top:1.4em}
.story-def b{color:var(--ink);font-weight:600}
.story-quote{position:relative;padding:clamp(30px,3.4vw,48px);
  background:var(--panel);border:1px solid var(--line);
  border-radius:22px;overflow:hidden}
.story-quote .qtxt{position:relative;font-family:var(--ff-disp);font-weight:700;
  font-size:var(--fs-h3);line-height:1.4}
.story-quote .qby{position:relative;margin-top:24px;font-size:15px;
  color:var(--gold);font-family:var(--ff-lat);letter-spacing:.04em}
.story-quote .qmark-x{position:absolute;inset-block-end:16px;left:16px;
  width:clamp(110px,11vw,150px);opacity:.14;filter:saturate(0) brightness(1.6);
  animation:spinQ var(--spin) linear infinite}
@keyframes spinQ{to{transform:rotate(360deg)}}

/* heritage band of cultural tiles */
.band{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.3vw,18px);
  margin-top:clamp(54px,7vw,96px)}
.band figure{position:relative;border-radius:18px;overflow:hidden;
  background:#000000;border:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:box-shadow .5s ease}
.band figure:hover{box-shadow:0 22px 44px -14px rgba(0,0,0,.5)}
.band img{width:100%;aspect-ratio:1;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.band figure:hover img{transform:scale(1.09) rotate(-3deg)}
/* sheen sweep on hover */
.band figure::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);
  transform:translateX(-130%);transition:transform .85s ease}
.band figure:hover::after{transform:translateX(130%)}
/* unmask reveal — tiles wipe open upward (clip-path, so the float below can own transform) */
.js .band .rv{transform:none;filter:none;
  clip-path:inset(55% 6% 0 6% round 18px);
  transition:opacity var(--rev-dur) cubic-bezier(.2,.7,.2,1),
    clip-path var(--rev-dur) cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0s)}
.js .band .rv.in{opacity:1;clip-path:inset(0 0 0 0 round 18px)}
/* gentle idle float — phased per tile */
@media(prefers-reduced-motion:no-preference){
  .band figure{animation:tileFloat 6s ease-in-out infinite}
  .band figure:nth-child(2){animation-delay:-1.5s}
  .band figure:nth-child(3){animation-delay:-3s}
  .band figure:nth-child(4){animation-delay:-4.5s}
}
@keyframes tileFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.band figcaption{position:static;
  padding:0 16px 14px;font-weight:600;font-size:14.5px;color:#ffffff;
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  white-space:nowrap}
.band figcaption .lat{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#8a8a8a;overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   STATS  (أرقام محزم)
   ============================================================ */
.stats{padding-block:clamp(70px,9vw,130px);border-top:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(24px,3vw,44px);margin-top:clamp(34px,4.5vw,60px)}
.stat{padding-inline-start:clamp(16px,1.8vw,26px);
  border-inline-start:2px solid var(--line-strong)}
.stat-num{font-family:var(--ff-lat);font-weight:700;
  font-size:clamp(50px,5.8vw,100px);line-height:1;color:var(--gold);
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.04em;
  flex-direction:row-reverse;justify-content:flex-end}
.stat-num i{font-style:normal;font-size:.5em;color:var(--accent2);font-weight:600}
.stat p{margin-top:12px;color:var(--muted);font-size:var(--fs-body);line-height:1.5}

/* ============================================================
   CLIENTS  (عملاؤنا المحتزمين)
   ============================================================ */
.clients{padding-block:clamp(80px,10vw,140px);border-top:1px solid var(--line)}
.clients h2{font-family:var(--ff-disp);font-weight:800;font-size:var(--fs-h2);
  line-height:1.04;letter-spacing:-.015em}
.clients-wall{margin-top:clamp(44px,5vw,76px);max-width:1080px;margin-inline:auto;
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(28px,3.4vw,56px) clamp(24px,3vw,48px);align-items:center}
.cl-logo{display:flex;align-items:center;justify-content:center;
  min-height:clamp(56px,7vw,92px)}
.cl-logo img{max-width:100%;max-height:clamp(48px,6vw,76px);width:auto;height:auto;
  object-fit:contain;opacity:.88;
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.cl-logo:hover img{opacity:1;transform:scale(1.06)}
/* light mode: flip the white logos to black */
[data-theme="sand"] .cl-logo img{filter:invert(1)}
@media(max-width:760px){.clients-wall{grid-template-columns:repeat(3,1fr)}}
@media(max-width:460px){.clients-wall{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   SERVICES  (خدماتنا)
   ============================================================ */
.services{padding-block:clamp(80px,10vw,150px);
  background:color-mix(in srgb,var(--bg-2) 72%,transparent);
  border-block:1px solid var(--line)}
.services-head{display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:30px;margin-bottom:clamp(46px,6vw,80px)}
.services h2{font-family:var(--ff-disp);font-weight:800;font-size:var(--fs-h2);
  line-height:1.02;letter-spacing:-.015em}
.services-head p{max-width:34ch;color:var(--muted);font-size:var(--fs-body)}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.5vw,20px)}
.svc{position:relative;padding:clamp(28px,2.6vw,42px);
  border:1px solid var(--line);border-radius:22px;background:var(--panel);
  overflow:visible;min-height:clamp(260px,24vw,330px);
  display:flex;flex-direction:column;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .5s,background .5s}
.svc::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;
  border-radius:inherit;
  background:radial-gradient(120% 120% at var(--mx,80%) 0%,
    color-mix(in srgb,var(--gold) 16%,transparent),transparent 60%);
  transition:opacity .5s}
.svc:hover{transform:translateY(-6px);border-color:var(--line-strong)}
.svc:hover::before{opacity:1}
.svc-no{position:relative;z-index:1;font-family:var(--ff-lat);font-size:14px;
  letter-spacing:.1em;color:var(--accent2)}
.svc-ic{position:relative;z-index:1;width:52px;height:52px;margin:6px 0 auto;
  display:grid;place-items:center;border-radius:14px;overflow:visible;
  border:1px solid var(--line-strong);color:var(--gold);
  transition:background .4s,color .4s,transform .5s}
.svc:hover .svc-ic{background:var(--gold);color:var(--panel);
  transform:rotate(-8deg) scale(1.05)}
.svc-ic svg{width:26px;height:26px;overflow:visible}
.svc h3{position:relative;z-index:1;font-family:var(--ff-disp);font-weight:700;
  font-size:var(--fs-h3);margin-top:26px;line-height:1.2}
.svc p{position:relative;z-index:1;color:var(--muted);font-size:var(--fs-body);
  margin-top:12px;line-height:1.7}
.svc .svc-tags{position:relative;z-index:1;margin-top:18px;display:flex;
  flex-wrap:wrap;gap:8px}
.svc .svc-tags span{font-size:12.5px;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;
  font-family:var(--ff-lat)}

/* ============================================================
   CTA  (احتزم / تواصل)
   ============================================================ */
.cta{padding-block:clamp(90px,12vw,180px);text-align:center;position:relative;
  overflow:hidden}
.cta-mark{position:absolute;inset-block-start:50%;left:50%;
  width:clamp(300px,56vw,700px);max-height:82%;aspect-ratio:1;
  transform:translate(-50%,-50%);opacity:.07;pointer-events:none;
  animation:spinC var(--spin) linear infinite reverse}
@keyframes spinC{from{transform:translate(-50%,-50%) rotate(0)}
  to{transform:translate(-50%,-50%) rotate(360deg)}}
.cta-mark img{width:100%;height:100%;object-fit:contain}
.cta-inner{position:relative;z-index:2;max-width:1000px;margin-inline:auto}
.cta .eyebrow{justify-content:center}
.cta h2{font-family:var(--ff-disp);font-weight:900;
  font-size:clamp(44px,8.4vw,140px);line-height:1.08;letter-spacing:-.02em;
  margin:26px 0 20px}
.cta .cta-quote{font-family:var(--ff-disp);font-weight:500;
  font-size:var(--fs-lead);color:var(--gold);margin-bottom:14px}
.cta .cta-sub{font-size:var(--fs-lead);color:var(--muted);max-width:40ch;
  margin:0 auto clamp(36px,4vw,52px)}
.cta-big{display:inline-flex;align-items:center;gap:.8em;
  font-weight:700;font-size:clamp(17px,1.5vw,21px);
  background:var(--gold);color:var(--on-gold,#000);padding:20px 44px;border-radius:999px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.cta-big:hover{transform:translateY(-4px) scale(1.02);
  box-shadow:0 22px 60px -16px var(--gold)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{border-top:1px solid var(--line);padding-block:clamp(44px,5vw,70px);
  position:relative;overflow:hidden}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:center;gap:30px}
.foot .brand{height:38px}
.foot-soc{display:flex;gap:12px}
.foot-soc a{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--muted);
  transition:border-color .3s,color .3s,transform .3s}
.foot-soc a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)}
.foot-soc svg{width:18px;height:18px}
.foot-bot{margin-top:34px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  font-size:13.5px;color:var(--faint);font-family:var(--ff-lat);letter-spacing:.02em}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:980px){
  .story-cols{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .band{grid-template-columns:repeat(3,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .hero-inner{grid-template-columns:1fr;gap:34px;position:relative}
  /* keep the glass mark visible behind the stacked hero; protect the copy
     with a theme-coloured text halo instead of hiding the crystal */
  .glass-fixed{width:min(74vw,420px);left:50%;opacity:.8;
    transform:translate(-50%,-50%)}
  .glass-fixed.is-blur{opacity:.5}
  .hero-copy{position:relative;z-index:2}
  .hero-copy h1,
  .hero-copy .h1-sub,
  .hero-copy .hero-eye,
  .hero-copy .hero-lead{text-shadow:0 2px 20px var(--bg),0 0 6px var(--bg)}
}
@media(max-width:680px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  .nav-cta{display:none}
  .svc-grid{grid-template-columns:1fr}
  .band{grid-template-columns:repeat(2,1fr)}
  .hero-scroll{display:none}
}

@media(prefers-reduced-motion:reduce){
  .marquee-track,.hero-mark,.cta-mark{animation:none!important}
  .glass-fixed img{animation:none!important}
  .rv{opacity:1!important;transform:none!important;filter:none!important}
  *{scroll-behavior:auto}
}
@media print{
  .rv{opacity:1!important;transform:none!important;filter:none!important}
  .hero-mark,.cta-mark,.marquee{display:none}
  .intro{display:none!important}
}

/* ============================================================
   INTRO — heritage icon montage → wordmark → shutter reveal
   ============================================================ */
.intro{position:fixed;inset:0;z-index:9999;background:var(--bg);
  color:var(--ink);overflow:hidden;will-change:transform;
  transition:transform .95s cubic-bezier(.76,0,.24,1),visibility 0s .95s;
  animation:introHide 0s linear 5s forwards}
.intro.lift{transform:translateY(-101%);visibility:hidden}
.intro.skip{display:none!important}
@keyframes introHide{to{visibility:hidden;pointer-events:none}}

.intro-stage{position:absolute;inset:0;display:grid;place-items:center;padding:6vw}

/* the 12 heritage icons cascade in (own colors) then clear the center */
.intro-grid{grid-area:1/1;display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(12px,1.8vw,26px);width:min(86vw,920px);
  animation:gridOut .85s cubic-bezier(.7,0,.2,1) 1.95s forwards}
.intro-grid .ig{aspect-ratio:1;display:grid;place-items:center;
  opacity:0;transform:translateY(26px) scale(.6) rotate(-10deg);
  animation:igIn .66s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:calc(.12s + var(--i) * .06s)}
.intro-grid .ig img{width:100%;height:100%;object-fit:contain;
  border-radius:clamp(12px,1.4vw,18px)}
@keyframes igIn{
  0%{opacity:0;transform:translateY(26px) scale(.6) rotate(-10deg)}
  60%{opacity:1}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes gridOut{
  0%{opacity:1;transform:scale(1);filter:blur(0)}
  100%{opacity:0;transform:scale(.4);filter:blur(7px)}}

/* logo rises from below to the center, arriving as the icons vanish */
.intro-logo{grid-area:1/1;width:clamp(260px,42vw,640px);height:auto;object-fit:contain;
  opacity:0;transform:translateY(46vh) scale(.92);
  animation:riseUp 1.15s cubic-bezier(.16,1,.3,1) 1.9s both}
[data-theme="sand"] .intro-logo{filter:invert(1)}
@keyframes riseUp{
  0%{opacity:0;transform:translateY(46vh) scale(.92)}
  55%{opacity:1}
  100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes introFade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.intro-tag{position:absolute;inset-block-start:clamp(34px,5vh,56px);
  inset-inline-end:var(--pad-x);
  font-family:var(--ff-lat);font-size:clamp(11px,.9vw,13px);font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--muted);white-space:nowrap;
  animation:introFade .9s ease .15s both}

.intro-line{position:absolute;inset-block-end:0;inset-inline:0;height:3px;
  background:color-mix(in srgb,var(--ink) 12%,transparent)}
.intro-line i{position:absolute;inset-block:0;left:0;width:0%;
  background:var(--ink)}

@media(max-width:680px){
  .intro-grid{grid-template-columns:repeat(4,1fr);width:min(90vw,440px)}
}
@media(max-width:420px){
  .intro-grid{grid-template-columns:repeat(3,1fr);width:90vw}
}
@media(prefers-reduced-motion:reduce){
  .intro{display:none!important}
}