/* ==========================================================================
   EDGE
   Palette sampled from the hero footage: warm ivory hall, pale timber,
   daylight, and one deep emerald that appears once per frame.
   Written with logical properties throughout, so Arabic flips cleanly.
   ========================================================================== */

:root{
  /* surfaces */
  --canvas:#F4F1EB;
  --canvas-2:#EAE5DC;
  --panel:#FCFAF7;
  --line:#DAD3C8;
  --line-strong:#B0A695;      /* interactive borders need real contrast */

  /* ink */
  --text-primary:#16181A;
  --text-secondary:#615D55;
  --text-faint:#8A857C;

  /* The brand orange, in rare doses only.
     --brand is EDGE DESIGNS' exact colour, used for fills and graphics where
     contrast is not a reading concern. --accent and --accent-ink are the same
     hue darkened just enough to pass contrast on the ivory canvas: the pure
     brand orange measures 2.98:1 against it, which is unreadable as text. */
  --brand:#FC4E00;
  --accent:#D63E00;
  --accent-hover:#FC4E00;
  --accent-ink:#B83400;
  --accent-muted:rgba(252,78,0,.12);
  --accent-line:rgba(252,78,0,.30);

  /* the legibility system, inverted for bright footage:
     the scrim LIFTS the video toward white so dark type stays readable */
  --lift:250,248,244;
  --tshadow:0 1px 2px rgba(252,250,247,.95),0 3px 14px rgba(252,250,247,.85),0 12px 46px rgba(244,241,235,.9);

  /* type */
  --f-display:'Archivo','Readex Pro',ui-sans-serif,system-ui,sans-serif;
  --f-body:'IBM Plex Sans Arabic',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.28s;
  --t-mid:.55s;
  --t-slow:.9s;

  /* rhythm */
  --shell:78rem;
  --pad:clamp(1.15rem,4vw,3rem);
  --sec-y:clamp(5rem,11vh,9rem);
  --radius:14px;
}

.lang-ar{
  --f-display:'Readex Pro','Archivo',ui-sans-serif,system-ui,sans-serif;
  --f-mono:'IBM Plex Sans Arabic',ui-monospace,monospace;
}

/* ---------------------------------------------------------------- reset */

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;           /* fallback first */
  overflow-x:clip;             /* the one that actually holds */
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--f-body);
  font-size:clamp(1rem,.96rem + .18vw,1.075rem);
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  opacity:0;
  animation:pagein .8s var(--ease-out) .05s forwards;
}
@keyframes pagein{to{opacity:1}}

img,video,svg{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.022em;
  margin:0;
  font-stretch:108%;
  text-wrap:balance;
}
.lang-ar h1,.lang-ar h2,.lang-ar h3,.lang-ar h4{
  letter-spacing:0;
  line-height:1.28;
  font-stretch:normal;
}
p{margin:0}

::selection{background:var(--accent);color:#fff}

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

.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;inset-block-start:-100%;inset-inline-start:1rem;z-index:200;
  background:var(--text-primary);color:var(--canvas);
  padding:.7rem 1.1rem;border-radius:0 0 10px 10px;font-size:.9rem;font-weight:600;
  transition:inset-block-start var(--t-fast) var(--ease);
}
.skip:focus{inset-block-start:0}

.shell{
  width:100%;max-width:var(--shell);margin-inline:auto;
  padding-inline:var(--pad);
}
.shell--narrow{max-width:52rem}

/* ---------------------------------------------------------------- the environment layer
   One fixed background behind everything, drifting slowly, so scrolling feels
   like moving through one hall rather than past stacked sections. */

.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env-glow{
  position:absolute;inset-block-start:-20%;inset-inline-start:50%;
  width:min(120vw,1400px);aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle,var(--accent-muted) 0%,rgba(252,78,0,.05) 38%,transparent 68%);
  opacity:.85;
  animation:drift 74s var(--ease) -12s infinite alternate;
}
@keyframes drift{
  0%{transform:translate(-50%,0) scale(1)}
  100%{transform:translate(-46%,7vh) scale(1.16)}
}
.env-grain{
  position:absolute;inset:0;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
main,.nav,.foot{position:relative;z-index:1}

/* ---------------------------------------------------------------- buttons */

.btn{
  --btn-bg:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  background:var(--btn-bg);color:#fff;
  padding:.82rem 1.6rem;border:1px solid transparent;border-radius:999px;
  font-weight:600;font-size:.96rem;letter-spacing:.005em;
  cursor:pointer;text-shadow:none;
  transition:background var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
  box-shadow:0 1px 2px rgba(22,24,26,.08);
}
.btn:hover{--btn-bg:var(--accent-hover);transform:translateY(-2px);box-shadow:0 8px 24px rgba(252,78,0,.28)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:.58rem 1.15rem;font-size:.9rem}
.btn-lg{padding:1rem 2rem;font-size:1.02rem}

.btn-ghost{
  background:transparent;color:var(--text-primary);
  border-color:var(--line-strong);box-shadow:none;
}
.btn-ghost:hover{
  background:var(--accent-muted);border-color:var(--accent);
  color:var(--accent-ink);box-shadow:none;
}

@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

.kicker{
  font-family:var(--f-mono);
  font-size:.76rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 .9rem;
}
.lang-ar .kicker{letter-spacing:.04em;text-transform:none;font-size:.85rem}

/* ---------------------------------------------------------------- nav */

.nav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:60;
  transition:background var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease),
             backdrop-filter var(--t-mid) var(--ease);
}
.nav-in{
  max-width:var(--shell);margin-inline:auto;
  padding:1.05rem var(--pad);
  display:flex;align-items:center;gap:1.4rem;
}
.nav.is-stuck{
  background:rgba(244,241,235,.82);
  backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 var(--line);
}

.brand{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.brand-mark{width:30px;height:30px;color:var(--text-primary);overflow:visible}
/* An uploaded logo is a picture rather than a drawing, so it is fitted
   into the same box without being stretched. */
.brand-mark--img{width:auto;height:30px;max-width:170px;object-fit:contain}
.brand-mark--lg.brand-mark--img{height:38px;max-width:210px}
.brand-mark--lg{width:38px;height:38px}
.brand-bars{transition:transform var(--t-mid) var(--ease)}
.brand:hover .brand-bars{transform:translateX(2px)}
.lang-ar .brand:hover .brand-bars{transform:translateX(-2px)}
.brand-word{
  display:grid;line-height:1;
  font-family:var(--f-display);font-weight:700;
}
.brand-word b{
  font-size:1.12rem;font-weight:700;letter-spacing:.1em;font-stretch:112%;
}
.brand-word em{
  font-style:normal;font-weight:500;font-size:.5rem;letter-spacing:.34em;
  color:var(--text-secondary);margin-block-start:.24rem;
  font-family:var(--f-mono);
}
.lang-ar .brand-word b{letter-spacing:.04em;font-stretch:normal;font-size:1.05rem}
.lang-ar .brand-word em{letter-spacing:.1em;font-size:.58rem}
.foot .brand-word em{color:#8E887E}

.nav-links{display:flex;gap:1.7rem;margin-inline-start:auto;font-size:.95rem}
.nav-links a{position:relative;padding-block:.3rem;color:var(--text-secondary);
  transition:color var(--t-fast) var(--ease)}
.nav-links a::after{
  content:"";position:absolute;inset-block-end:0;inset-inline-start:0;
  width:100%;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:var(--to,left);
  transition:transform var(--t-mid) var(--ease-out);
}
.lang-ar .nav-links a::after{--to:right}
.nav-links a:hover{color:var(--text-primary)}
.nav-links a:hover::after{transform:scaleX(1)}

.nav-end{display:flex;align-items:center;gap:.85rem;margin-inline-start:1rem}
.lang{
  font-family:var(--f-mono);font-size:.82rem;letter-spacing:.08em;
  color:var(--text-secondary);padding:.4rem .6rem;border-radius:8px;
  border:1px solid transparent;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.lang:hover{color:var(--accent-ink);border-color:var(--accent-line)}

.burger{
  display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.burger span{
  display:block;width:20px;height:1.5px;background:var(--text-primary);
  transition:transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease);
}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.mobilenav{
  display:none;flex-direction:column;gap:.2rem;
  padding:.5rem var(--pad) 1.4rem;
  background:rgba(244,241,235,.97);backdrop-filter:blur(14px);
  border-block-end:1px solid var(--line);
}
.mobilenav a{padding:.85rem .2rem;border-block-end:1px solid var(--line);font-size:1.05rem}
.mobilenav a:last-child{border:0}
.mobilenav-lang{color:var(--accent-ink);font-family:var(--f-mono);font-size:.9rem}

@media (max-width:860px){
  .nav-links{display:none}
  .nav-end .btn-sm{display:none}
  .burger{display:flex}
  .nav-end{margin-inline-start:auto}
  .mobilenav:not([hidden]){display:flex}
}

/* ==========================================================================
   THE HERO
   A tall pinned region with a sticky full-viewport stage. Scroll progress
   through it drives the video's time.
   ========================================================================== */

/* Sized in scroll distance, not seconds. Five caption beats each need a
   plateau long enough to survive five or six normal scroll flicks, and the
   flick test in the audit is what set this number. */
.hero{position:relative;height:700vh}
.stage{
  position:sticky;inset-block-start:0;height:100svh;height:100vh;
  overflow:hidden;background:var(--canvas-2);
  display:grid;
}

.poster,#herovid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
.poster{
  background-size:cover;background-position:center;
  transition:opacity var(--t-slow) var(--ease);
}
#herovid{
  opacity:0;
  transition:opacity var(--t-slow) var(--ease);
  will-change:transform;              /* its own compositor layer */
  transform:translateZ(0);
}
.stage.video-ready #herovid{opacity:1}
.stage.video-ready .poster{opacity:0}
.stage.video-failed #herovid{display:none}

/* layer 1 of the legibility system: one soft lift over the whole frame,
   always on, so no frame is ever raw behind the type */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 130% 80% at 50% 92%,rgba(var(--lift),.72) 0%,rgba(var(--lift),0) 62%),
    radial-gradient(ellipse 120% 96% at 50% 40%,rgba(var(--lift),0) 42%,rgba(var(--lift),.42) 100%);
}

/* the loading ring */
.loader{
  position:absolute;inset-block-start:50%;inset-inline-start:50%;
  transform:translate(-50%,-50%);
  color:var(--brand);opacity:1;
  transition:opacity var(--t-mid) var(--ease);
}
.stage.video-ready .loader,.stage.video-failed .loader{opacity:0;pointer-events:none}
.ring{width:46px;height:46px;transform:rotate(-90deg)}
.ring-bg{stroke:rgba(22,24,26,.14)}
.ring-fg{stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset .18s linear}

/* ---- caption bands ---- */

.bands{position:absolute;inset:0;pointer-events:none;z-index:3}
.band{
  position:absolute;inset:0;
  display:grid;align-content:end;justify-items:center;
  padding:0 var(--pad) clamp(4.5rem,14vh,9rem);
  opacity:0;
  text-shadow:var(--tshadow);
}
/* layer 2: each band's own lift, riding its opacity and deepening with --k */
.band::before{
  content:"";position:absolute;inset:-6%;pointer-events:none;
  opacity:calc(.3 + .7*var(--k,1));
  background:radial-gradient(ellipse 78% 46% at 50% 78%,
    rgba(var(--lift),.78) 0%,rgba(var(--lift),.52) 44%,rgba(var(--lift),0) 76%);
}
.band-in{position:relative;max-width:min(100%,64rem);text-align:center}

.band-text{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(2rem,6.2vw,4.6rem);
  line-height:1.04;letter-spacing:-.03em;font-stretch:112%;
  max-width:20ch;margin-inline:auto;
}
.lang-ar .band-text{line-height:1.32;letter-spacing:0;font-stretch:normal;max-width:22ch}

.band--settle .band-text{font-size:clamp(1.9rem,5.4vw,4rem)}
.band-sub{
  margin:1.15rem auto 0;max-width:46ch;
  font-size:clamp(.98rem,.94rem + .3vw,1.15rem);
  color:var(--text-secondary);line-height:1.6;
}
.band-cta{
  display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;
  margin-block-start:1.9rem;pointer-events:auto;
}
.band .btn{text-shadow:none}

/* ---- word and character split, written by JS ---- */

.w{display:inline-block;white-space:pre;padding-block:.08em;margin-block:-.08em}
.c{display:inline-block;will-change:transform,opacity}

/* Scatter and grid on a script whose letters join: the same entrance carried
   on whole words, because splitting the letters apart would break the joining. */
[data-entrance="scatter"].is-words .w,[data-entrance="grid"].is-words .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
            rotate(calc((1 - var(--kc))*var(--jr,0deg)));
}

/* (a) scatter: characters fly in from seeded offsets */
[data-entrance="scatter"] .c,[data-entrance="grid"] .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
            rotate(calc((1 - var(--kc))*var(--jr,0deg)));
}
/* (f) drift-down: words fall into place */
[data-entrance="drift"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-28px));
}
/* (d) word-punch with overshoot */
[data-entrance="punch"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(.62 + (.38 + var(--ov,.14))*var(--kc) - var(--ov,.14)*var(--ks)));
}
[data-entrance="punch"] .w.em{--ov:.26;--sd:.16;--ss:2.6}
/* (c) blur-to-sharp: two stacked copies crossfaded, the blur is static */
[data-entrance="blur"] .band-text{position:relative}
[data-entrance="blur"] .soft{
  position:absolute;inset:0;filter:blur(11px);
  opacity:calc(1 - var(--k,0));pointer-events:none;
}
[data-entrance="blur"] .sharp{opacity:var(--k,0)}
/* (e) word-by-word rise into a staged settle */
[data-entrance="settle"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.7,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*30px));
}
[data-entrance="settle"] .band-sub{
  --ks:clamp(0,(var(--k,0) - .58)*3.4,1);
  opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*16px));
}
[data-entrance="settle"] .band-cta{
  --kb:clamp(0,(var(--k,0) - .74)*4.4,1);
  opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px));
}

/* the scroll cue */
.cue{
  position:absolute;inset-block-end:1.6rem;inset-inline-start:50%;
  transform:translateX(-50%);
  display:grid;justify-items:center;gap:.55rem;z-index:4;
  opacity:1;transition:opacity var(--t-mid) var(--ease);
}
.cue.is-gone{opacity:0}
.cue-label{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-secondary);
}
.lang-ar .cue-label{letter-spacing:.05em;text-transform:none}
.cue-line{
  width:1px;height:38px;background:linear-gradient(var(--brand),transparent);
  transform-origin:top;animation:cuepulse 2.8s var(--ease) -.6s infinite;
}
@keyframes cuepulse{0%,100%{transform:scaleY(.45);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ---- the static hero, and the five gates ---- */

.statichero{display:none}
.statichero-media{
  position:absolute;inset:0;
  background-image:var(--still);background-size:cover;background-position:center;
}
.statichero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(var(--lift),.35) 0%,rgba(var(--lift),.86) 62%,rgba(var(--lift),.97) 100%);
}
.statichero-in{
  position:relative;z-index:2;
  padding:8.5rem var(--pad) 4rem;
  display:grid;justify-items:center;text-align:center;gap:0;
  min-height:100svh;align-content:end;
}
.statichero-h{
  font-size:clamp(2.1rem,8.5vw,3.4rem);line-height:1.06;
  letter-spacing:-.03em;max-width:16ch;
}
.lang-ar .statichero-h{line-height:1.3;letter-spacing:0}
.statichero-sub{
  margin:1.1rem 0 0;max-width:42ch;color:var(--text-secondary);
  font-size:1.02rem;line-height:1.62;
}

/* The five gates. These five strings are duplicated character for character
   in assets/js/site.js. If you change one, change both. */
@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}
  .statichero{display:block;position:relative}
  .rail{display:none}
}

/* scrub-capable but merely short: keep the scrub, drop the overlays */
@media (max-height:560px){
  .cue{display:none}
}

/* ==========================================================================
   THE RAIL · the signature element.
   A build schedule down the edge of the page. The traveller eases between
   ticks and the active tick lights in the accent.
   ========================================================================== */

.rail{
  position:fixed;z-index:40;
  inset-inline-start:clamp(.8rem,2.4vw,2rem);
  inset-block-start:50%;transform:translateY(-50%);
  display:grid;gap:.95rem;
  opacity:0;transition:opacity var(--t-slow) var(--ease);
}
.rail.is-on{opacity:1}
.rail-line{
  position:absolute;inset-block:.35rem;inset-inline-start:3.5px;
  width:1px;background:var(--line);
}
.rail-dot{
  position:absolute;inset-inline-start:0;inset-block-start:0;
  width:8px;height:8px;border-radius:50%;background:var(--brand);
  transform:translateY(var(--y,0));
  transition:transform var(--t-mid) var(--ease-out);
  box-shadow:0 0 0 3px rgba(252,78,0,.20);
}
.rail-tick{
  position:relative;display:flex;align-items:center;gap:.65rem;
  height:8px;
}
.rail-tick i{
  width:8px;height:1px;background:var(--line-strong);flex:0 0 auto;
  transition:background var(--t-fast) var(--ease),width var(--t-fast) var(--ease);
}
.rail-tick em{
  font-family:var(--f-mono);font-style:normal;font-size:.66rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint);
  white-space:nowrap;opacity:0;transform:translateX(-6px);
  transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.lang-ar .rail-tick em{letter-spacing:.02em;text-transform:none;transform:translateX(6px)}
.rail:hover .rail-tick em{opacity:1;transform:translateX(0)}
.rail-tick.is-on i{background:var(--brand);width:14px}
.rail-tick.is-on em{opacity:1;transform:translateX(0);color:var(--accent-ink)}

@media (max-width:1180px){.rail{display:none}}

/* ==========================================================================
   SECTIONS
   No two neighbours share a layout skeleton.
   ========================================================================== */

section{padding-block:var(--sec-y)}
/* The hero and the still hero own their own height, so the section rhythm
   must not touch them or the sticky stage gets pushed down the page. */
.hero,.statichero{padding-block:0}

.sec-head{max-width:44rem;margin-block-end:clamp(2.5rem,6vh,4.5rem)}
.sec-head--row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;max-width:none;
}
.sec-head--center{max-width:40rem;margin-inline:auto;text-align:center}
.sec-h{font-size:clamp(1.75rem,3.6vw,2.9rem);max-width:22ch}
.sec-head--center .sec-h{margin-inline:auto}
.sec-body{margin-block-start:1.1rem;color:var(--text-secondary);max-width:52ch}

/* ---- claim + stats ---- */

.claim{
  background:var(--canvas);
  border-block-end:1px solid var(--line);
}
.claim-top{max-width:50rem}
.claim-h{
  font-size:clamp(1.85rem,4.4vw,3.3rem);
  max-width:24ch;
}
.claim-body{
  margin-block-start:1.35rem;color:var(--text-secondary);max-width:56ch;
  font-size:1.05rem;
}
.stats{
  list-style:none;margin:clamp(3rem,7vh,5rem) 0 0;padding:0;
  display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.stat{background:var(--panel);padding:1.6rem 1.4rem;position:relative}
.stat::after{
  content:"";position:absolute;inset-block-start:0;inset-inline-start:0;
  width:100%;height:2px;background:var(--brand);
  transform:scaleX(0);transform-origin:var(--to,left);
  transition:transform var(--t-slow) var(--ease-out);
}
.lang-ar .stat::after{--to:right}
.stats.in .stat::after{transform:scaleX(1)}
.stat-n{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.9rem,4vw,2.9rem);line-height:1;letter-spacing:-.03em;
  font-stretch:112%;font-variant-numeric:tabular-nums;
}
.lang-ar .stat-n{font-stretch:normal;letter-spacing:0}
.stat-l{
  display:block;margin-block-start:.55rem;font-size:.88rem;
  color:var(--text-secondary);line-height:1.4;
}

/* ---- services: alternating offset rows, nothing like the grid above ---- */

.services{background:var(--canvas-2)}
.svc-list{display:grid;gap:clamp(3rem,8vh,6rem)}
.svc{
  display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .svc{grid-template-columns:1.15fr 1fr}
  .svc:nth-child(even) .svc-media{order:2}
  .svc:nth-child(even) .svc-text{order:1}
}
.svc-media{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:var(--line);
  box-shadow:0 1px 2px rgba(22,24,26,.05),0 18px 44px -24px rgba(22,24,26,.28);
}
.svc-media img{
  width:100%;aspect-ratio:16/10;object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.1s var(--ease-out);
}
.svc:hover .svc-media img{transform:scale(1.055)}
.svc-media::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(22,24,26,.07);border-radius:var(--radius);
}
.svc-n{
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.18em;
  color:var(--accent-ink);margin:0 0 .8rem;
}
.svc-h{font-size:clamp(1.35rem,2.4vw,1.85rem);margin-block-end:.8rem}
.svc-sum{color:var(--text-primary);font-size:1.06rem;line-height:1.58;max-width:44ch}
.svc-body{margin-block-start:.9rem;color:var(--text-secondary);font-size:.98rem;max-width:48ch}

/* ---- work: filter chips and a card grid ---- */

.work{background:var(--canvas)}
.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  background:transparent;border:1px solid var(--line-strong);border-radius:999px;
  padding:.48rem 1rem;font-size:.88rem;color:var(--text-secondary);cursor:pointer;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease);
}
.chip:hover{color:var(--text-primary);border-color:var(--text-primary)}
.chip.is-on{background:var(--text-primary);border-color:var(--text-primary);color:var(--canvas)}
@media (pointer:coarse){.chip{min-height:44px}}

.grid{
  display:grid;gap:clamp(1.1rem,2.4vw,2rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));
}
.card{
  border-radius:var(--radius);overflow:hidden;background:var(--panel);
  border:1px solid var(--line);
  transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease),
             border-color var(--t-mid) var(--ease);
}
.card:hover{
  transform:translateY(-5px);border-color:var(--line-strong);
  box-shadow:0 22px 48px -26px rgba(22,24,26,.4);
}
.card.is-out{display:none}
.card-link{display:grid;height:100%}
.card-media{overflow:hidden;background:var(--line)}
.card-media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 1s var(--ease-out);
}
.card:hover .card-media img{transform:scale(1.05)}
.card-text{padding:1.3rem 1.35rem 1.5rem;display:grid;align-content:start;gap:.5rem}
.card-cat{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);margin:0;
}
.lang-ar .card-cat{letter-spacing:.02em;text-transform:none;font-size:.8rem}
.card-h{font-size:1.2rem;line-height:1.25}
.card-sum{color:var(--text-secondary);font-size:.94rem;line-height:1.55}
.card-go{
  margin-block-start:.5rem;font-size:.88rem;font-weight:600;color:var(--accent-ink);
  display:inline-flex;align-items:center;gap:.4rem;
}
.card-go::after{
  content:"";width:14px;height:1px;background:currentColor;
  transition:width var(--t-fast) var(--ease);
}
.card:hover .card-go::after{width:24px}
.grid-empty{color:var(--text-secondary);padding-block:2rem}

/* ---- process: the one interactive moment ---- */

.process{background:var(--canvas-2);border-block:1px solid var(--line)}
.compress{max-width:54rem;margin-inline:auto}

.cbars{display:grid;gap:1.1rem;margin-block-end:2.4rem}
.cbar{
  display:grid;gap:.5rem .9rem;align-items:center;
  grid-template-columns:1fr auto;
}
.cbar-label{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-secondary);grid-column:1;
}
.lang-ar .cbar-label{letter-spacing:.02em;text-transform:none;font-size:.85rem}
.cbar--edge .cbar-label{color:var(--accent-ink);font-weight:600}
.cbar-n{
  grid-column:2;grid-row:1 / span 2;align-self:center;
  font-family:var(--f-display);font-weight:700;font-stretch:112%;
  font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--text-faint);
  min-width:5.5ch;text-align:end;
}
.lang-ar .cbar-n{font-stretch:normal;letter-spacing:0}
.cbar-n em{
  font-style:normal;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;display:block;margin-block-start:.3rem;font-weight:400;
}
.lang-ar .cbar-n em{letter-spacing:.02em;text-transform:none;font-size:.75rem}
.cbar--edge .cbar-n{color:var(--accent-ink)}
.cbar-track{
  grid-column:1;height:12px;border-radius:999px;background:var(--line);
  overflow:hidden;position:relative;
}
.cbar--edge .cbar-track{overflow:visible}

/* The target marker: where the schedule is heading, readable at rest. */
.cbar-goal{
  position:absolute;inset-block:-7px;inset-inline-start:calc(var(--goal,.6) * 100%);
  width:2px;background:var(--brand);border-radius:2px;opacity:.55;
}
.lang-ar .cbar-goal{inset-inline-start:auto;inset-inline-end:calc(var(--goal,.6) * 100%)}
.cbar-goal em{
  position:absolute;inset-block-start:-1.55rem;inset-inline-start:50%;
  transform:translateX(-50%);
  font-style:normal;font-family:var(--f-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.06em;color:var(--accent-ink);white-space:nowrap;
}
.lang-ar .cbar-goal em{transform:translateX(50%)}
.cbar-fill{
  display:block;height:100%;border-radius:999px;background:var(--line-strong);
  transform:scaleX(var(--p2,1));transform-origin:var(--to,left);
  transition:transform .12s linear;
}
.lang-ar .cbar-fill{--to:right}
.cbar--edge .cbar-fill{background:var(--brand)}
.cbar-fill--flat{transform:none}

.compress-steps{
  list-style:none;margin:0 0 2.2rem;padding:1.6rem 0 0;position:relative;
  display:grid;grid-template-columns:repeat(var(--n,6),1fr);gap:.4rem;
  border-block-start:1px solid var(--line);
}
.cstep{display:grid;justify-items:center;gap:.65rem;position:relative}
.cstep::before{
  content:"";position:absolute;inset-block-start:-1.6rem;inset-inline-start:50%;
  width:1px;height:1.1rem;background:var(--line);
}
.cstep i{
  width:11px;height:11px;border-radius:50%;
  background:var(--canvas-2);border:1.5px solid var(--line-strong);
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.cstep span{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-faint);text-align:center;
  transition:color var(--t-fast) var(--ease);
}
.lang-ar .cstep span{letter-spacing:0;text-transform:none;font-size:.8rem}
.cstep.is-lit i{
  background:var(--brand);border-color:var(--brand);transform:scale(1.25);
  box-shadow:0 0 0 4px var(--accent-muted);
}
.cstep.is-lit span{color:var(--text-primary)}

.compress .hold{
  position:relative;overflow:hidden;display:block;margin-inline:auto;
  background:transparent;border:1px solid var(--line-strong);border-radius:999px;
  padding:.9rem 2.2rem;cursor:pointer;font-weight:600;
  color:var(--text-primary);
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.compress .hold:hover{border-color:var(--accent);color:var(--accent-ink)}
.hold-fill{
  position:absolute;inset:0;background:var(--accent-muted);
  transform:scaleX(var(--p,0));transform-origin:var(--to,left);
  transition:transform .1s linear;
}
.lang-ar .hold-fill{--to:right}
.hold-label{position:relative}
@media (pointer:coarse){.compress .hold{min-height:44px}}
.hold-hint{
  margin:1.1rem auto 0;max-width:52ch;text-align:center;
  font-size:.92rem;color:var(--text-secondary);
}

/* ---- accreditations: the paperwork a Saudi buyer checks first ---- */

.accred{background:var(--canvas)}
.accred-list{
  list-style:none;margin:0;padding:0;display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
}
.accred-item{
  background:var(--panel);padding:1.5rem 1.4rem;
  display:flex;align-items:flex-start;gap:.95rem;
}
.accred-mark{
  flex:0 0 auto;width:34px;height:34px;color:var(--brand);
  display:grid;place-items:center;
}
.accred-mark svg{width:26px;height:26px}
.accred-mark img{width:34px;height:34px;object-fit:contain}
.accred-text{display:grid;gap:.25rem;min-width:0}
.accred-text b{font-size:.98rem;font-weight:600;line-height:1.35}
.accred-text em{font-style:normal;font-size:.86rem;color:var(--text-secondary);line-height:1.45}
.accred-text i{
  font-style:normal;font-family:var(--f-mono);font-size:.74rem;color:var(--text-faint);
  letter-spacing:.04em;
}

/* ---- proof ---- */

.proof{background:var(--canvas)}
.quotes{
  display:grid;gap:clamp(1.1rem,2.4vw,1.8rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr));
}
.quote{
  margin:0;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.9rem 1.7rem 1.5rem;
  position:relative;
}
.quote::before{
  content:"";position:absolute;inset-block-start:1.7rem;inset-inline-start:1.7rem;
  width:22px;height:2px;background:var(--brand);
}
.quote blockquote{
  margin:1.9rem 0 1.3rem;font-size:1.06rem;line-height:1.6;
}
.quote figcaption{display:grid;gap:.15rem}
.quote-a{font-weight:600;font-size:.96rem}
.quote-m{font-size:.88rem;color:var(--text-secondary)}

/* ---- the moving client strip ----
   Sixty logos will not fit on a screen, and stacked in rows they push the rest
   of the page away. So the wall moves instead: one continuous strip, printed
   twice, sliding by exactly half its width. At the moment the first copy leaves
   the frame the second is in precisely the position the first started from, so
   the loop has no seam and no jump. */
.logostrip{
  margin-block-start:clamp(2.5rem,6vh,4rem);
  overflow:hidden;position:relative;
  /* Pinned to left-to-right on the container as well as the track. In a right
     to left page an overflowing child is anchored to the right edge, so the
     whole strip hangs off to the left where it is clipped away and nothing
     shows at all. The strip is decorative images with no reading order, so
     fixing the axis costs nothing and the reversed animation still sends it
     the Arabic way. */
  direction:ltr;
  /* the ends fade out rather than being cut, so nothing appears to hit a wall */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.logostrip-track{
  display:flex;width:max-content;
  /* The track is laid out left to right even on the Arabic page. It is a
     decorative loop of images with no reading order, and leaving it to flip
     with the page reverses the flex axis: the translation then moves the strip
     away from the window instead of through it, and the logos vanish. */
  direction:ltr;
  animation:logoslide var(--strip-speed,40s) linear infinite;
}
/* Arabic reads right to left, so the strip travels that way too. Reversing the
   animation moves it the other way without touching the layout. */
.lang-ar .logostrip-track{animation-direction:reverse}

/* Stop it while someone is looking at a particular mark, or tabbing through. */
.logostrip:hover .logostrip-track,
.logostrip:focus-within .logostrip-track{animation-play-state:paused}

@keyframes logoslide{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

.logos{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:nowrap;align-items:center;
  gap:clamp(1.5rem,4vw,3.5rem);
  padding-inline-end:clamp(1.5rem,4vw,3.5rem);
}

/* Movement is a preference, not a requirement. Turned off, the wall simply
   becomes the wrapped row it always was. */
@media (prefers-reduced-motion:reduce){
  .logostrip{-webkit-mask-image:none;mask-image:none;overflow:visible}
  .logostrip-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .logos{flex-wrap:wrap;justify-content:center;padding-inline-end:0}
  .logos[aria-hidden="true"]{display:none}
}
/* Every logo gets an identical box and is contained inside it, so a tall
   emblem and a long wordmark occupy the same space on the row. Without the
   fixed box, max-height alone lets a wide mark run three times the width of a
   square one and the row stops looking like a set. */
.logo{display:flex;align-items:center;justify-content:center;
  inline-size:clamp(7rem,11vw,9.5rem);block-size:2.75rem}
.logo img{max-block-size:100%;max-inline-size:100%;inline-size:auto;block-size:auto;
  object-fit:contain;opacity:.62;filter:grayscale(1);
  transition:opacity var(--t-fast) var(--ease),filter var(--t-fast) var(--ease)}
.logo:hover img{opacity:1;filter:grayscale(0)}
.logo span{font-size:.95rem;color:var(--text-faint);letter-spacing:.04em}

/* ---- faq ---- */

.faq{background:var(--canvas-2)}
.acc{border-block-start:1px solid var(--line)}
.ac{border-block-end:1px solid var(--line)}
.ac summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding-block:1.35rem;font-weight:600;font-size:1.05rem;line-height:1.45;
  transition:color var(--t-fast) var(--ease);
}
.ac summary::-webkit-details-marker{display:none}
.ac summary:hover{color:var(--accent-ink)}
.ac-i{
  flex:0 0 auto;width:16px;height:16px;margin-block-start:.35rem;color:var(--brand);
  transition:transform var(--t-mid) var(--ease);
}
.ac[open] .ac-i{transform:rotate(135deg)}
.ac-body{padding-block-end:1.5rem;color:var(--text-secondary);max-width:62ch}
.ac-body p{margin:0;line-height:1.68}
@media (pointer:coarse){.ac summary{min-height:44px}}

/* ---- the quote section ---- */

.quote-sec{background:var(--canvas)}
.quote-grid{
  display:grid;gap:clamp(2.5rem,6vw,4.5rem);
  grid-template-columns:1fr;align-items:start;
}
@media (min-width:900px){.quote-grid{grid-template-columns:.85fr 1.15fr}}

.quote-contact{
  list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.5rem;
  font-family:var(--f-mono);font-size:1rem;
}
.quote-contact a{color:var(--accent-ink);transition:opacity var(--t-fast) var(--ease)}
.quote-contact a:hover{opacity:.72}

.qform{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(1.4rem,3vw,2.2rem);
}
.qform .row{display:grid;gap:0 1.1rem;grid-template-columns:1fr}
@media (min-width:560px){.qform .row{grid-template-columns:1fr 1fr}}
.f{margin:0 0 1.15rem}
.f label{
  display:block;font-family:var(--f-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);
  margin-block-end:.45rem;
}
.lang-ar .f label{letter-spacing:.02em;text-transform:none;font-size:.82rem}
.f label b{color:var(--accent-ink);font-weight:500}
.f input,.f select,.f textarea{
  width:100%;padding:.78rem .9rem;
  background:var(--canvas);border:1px solid var(--line-strong);border-radius:10px;
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
.f textarea{resize:vertical;min-height:8rem;line-height:1.6}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--text-faint)}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;border-color:var(--accent);background:var(--panel);
  box-shadow:0 0 0 3px var(--accent-muted);
}
.f input.bad,.f textarea.bad{border-color:#8C2D1B}
.f .err{color:#8C2D1B;font-size:.85rem;margin-block-start:.35rem;
  font-family:var(--f-body);letter-spacing:0;text-transform:none}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

.errs{
  border:1px solid #E0BDB4;background:#FBEFEC;color:#8C2D1B;
  border-radius:10px;padding:.9rem 1.1rem;margin-block-end:1.2rem;font-size:.94rem;
}
.errs p{margin:0}
.errs p + p{margin-block-start:.3rem}

.sent{
  background:var(--panel);border:1px solid var(--accent-line);
  border-radius:var(--radius);padding:clamp(1.8rem,4vw,2.8rem);
  display:grid;justify-items:center;text-align:center;gap:1.1rem;
}
.sent-i{width:44px;height:44px;color:var(--accent-ink)}
.sent p{font-size:1.08rem;max-width:34ch;line-height:1.6}

/* ---- footer ---- */

.foot{
  background:var(--text-primary);color:#D8D4CC;
  padding-block:clamp(3.5rem,8vh,5.5rem) 2rem;
}
.foot a{transition:color var(--t-fast) var(--ease)}
.foot a:hover{color:#fff}
.foot .brand-mark{color:#D8D4CC}
.foot .brand-shape{fill:var(--brand)}
.foot .btn-ghost{color:#F4F1EB;border-color:rgba(244,241,235,.3)}
.foot .btn-ghost:hover{background:rgba(244,241,235,.1);border-color:#F4F1EB;color:#fff}
.foot-grid{
  display:grid;gap:clamp(2rem,5vw,3.5rem);
  grid-template-columns:1fr;
}
@media (min-width:760px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.foot-about{
  margin-block-start:1.2rem;font-size:.95rem;line-height:1.65;
  color:#A9A49A;max-width:44ch;
}
.foot-h{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:#8A857C;margin:0 0 1rem;font-weight:500;
}
.lang-ar .foot-h{letter-spacing:.02em;text-transform:none;font-size:.82rem}
.foot-list,.foot-social{list-style:none;margin:0 0 1.3rem;padding:0;display:grid;gap:.55rem;font-size:.95rem}
.foot-list .muted,.foot .muted{color:#8A857C}
.foot-base{
  margin-block-start:clamp(2.5rem,6vh,4rem);padding-block-start:1.6rem;
  border-block-start:1px solid rgba(244,241,235,.12);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  font-size:.86rem;color:#8A857C;
}
.foot-base p{margin:0}

/* ==========================================================================
   ENTRANCES
   IntersectionObserver adds .in. Start and end states are both prefixed with
   the container class so a later rule cannot silently cancel them.
   ========================================================================== */

.reveal{opacity:0;transform:translateY(22px);
  transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.reveal.in{opacity:1;transform:none}

[data-stagger] > *{opacity:0;transform:translateY(16px);
  transition:opacity var(--t-mid) var(--ease-out),transform var(--t-mid) var(--ease-out)}
[data-stagger].in > *{opacity:1;transform:none}
[data-stagger].in > :nth-child(1){transition-delay:.06s}
[data-stagger].in > :nth-child(2){transition-delay:.15s}
[data-stagger].in > :nth-child(3){transition-delay:.24s}
[data-stagger].in > :nth-child(4){transition-delay:.33s}
[data-stagger].in > :nth-child(5){transition-delay:.42s}
[data-stagger].in > :nth-child(6){transition-delay:.51s}
/* Retire the delays once the entrance is done, or every later hover lags
   forever. The selector repeats nth-child so it matches the specificity above. */
[data-stagger].in.done > :nth-child(n){transition-delay:0s !important}

/* whisper-level life, paused off-screen and on hidden tabs */
.svc-media::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%);
  opacity:0;
}
.services.on .svc-media::before{animation:sheen 9s var(--ease) -3s infinite}
@keyframes sheen{0%,72%{opacity:0;transform:translateX(-30%)}
  80%{opacity:.7}100%{opacity:0;transform:translateX(30%)}}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ==========================================================================
   REDUCED MOTION · honoured completely, and in both directions.
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
  body{opacity:1;animation:none}
  /* every choreographed element shows its finished state */
  .reveal,[data-stagger] > *{opacity:1 !important}
  .reveal{transform:none}
  [data-stagger] > *{transform:none}
  .stat::after{transform:scaleX(1)}
  .cue{display:none}
  /* positional transforms are re-applied rather than blanket removed */
  .rail{transform:translateY(-50%)}
  .cue{transform:translateX(-50%)}
  .env-glow{transform:translateX(-50%)}
}

/* JS pins these when the preference flips on mid-session */
.pinned .reveal,.pinned [data-stagger] > *{opacity:1 !important;transform:none !important}
.pinned .stat::after{transform:scaleX(1) !important}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print{
  .nav,.rail,.hero,.cue,.env,.qform,.hold{display:none !important}
  body{background:#fff;color:#000}
  .foot{background:#fff;color:#000}
}

/* ==========================================================================
   PROJECT PAGE
   ========================================================================== */

.proj{padding-block-start:0}
.proj-head{padding-block:clamp(7rem,14vh,10rem) clamp(2rem,5vh,3.5rem)}
.proj-back{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-secondary);margin-block-end:2rem;
  transition:color var(--t-fast) var(--ease),gap var(--t-fast) var(--ease);
}
.lang-ar .proj-back{letter-spacing:.02em;text-transform:none;font-size:.9rem}
.proj-back:hover{color:var(--accent-ink);gap:.8rem}
.proj-h{font-size:clamp(2rem,5.5vw,3.6rem);max-width:20ch}
.proj-sum{
  margin-block-start:1.2rem;max-width:52ch;color:var(--text-secondary);
  font-size:1.1rem;line-height:1.6;
}

.proj-cover{
  margin:0 0 clamp(2.5rem,6vh,4.5rem);
  padding-inline:var(--pad);
}
.proj-cover img{
  width:100%;max-width:var(--shell);margin-inline:auto;
  aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(22,24,26,.05),0 30px 70px -40px rgba(22,24,26,.45);
}

.proj-grid{
  display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:1fr;align-items:start;
  padding-block-end:clamp(3rem,7vh,5rem);
}
@media (min-width:900px){.proj-grid{grid-template-columns:16rem 1fr}}

.proj-meta dl{margin:0;display:grid;gap:0;
  border-block-start:1px solid var(--line)}
.proj-metarow{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding-block:.85rem;border-block-end:1px solid var(--line);
}
.proj-metarow dt{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);margin:0;
}
.lang-ar .proj-metarow dt{letter-spacing:.02em;text-transform:none;font-size:.82rem}
.proj-metarow dd{margin:0;font-weight:600;font-size:.96rem;text-align:end}

.proj-body{max-width:62ch;font-size:1.06rem;line-height:1.75}
.proj-body p + p{margin-block-start:1.2rem}

.proj-gallery{background:var(--canvas-2);border-block:1px solid var(--line)}
.gal{
  display:grid;gap:clamp(1rem,2.4vw,1.8rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
}
.gal-item{margin:0}
.gal-item img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);
  background:var(--line);
}
.gal-item figcaption{
  margin-block-start:.7rem;font-size:.88rem;color:var(--text-secondary);
}
/* a wide first image reads as the lead shot */
.gal-item:first-child{grid-column:1 / -1}
.gal-item:first-child img{aspect-ratio:16/9}

.proj-foot{background:var(--canvas)}
.proj-footgrid{
  display:grid;gap:clamp(2rem,5vw,3.5rem);grid-template-columns:1fr;align-items:center;
}
@media (min-width:820px){.proj-footgrid{grid-template-columns:1.2fr .8fr}}
.proj-next{
  display:grid;gap:.4rem;padding:1.6rem 1.7rem;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
  transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
.proj-next:hover{
  border-color:var(--accent);transform:translateY(-3px);
  box-shadow:0 18px 40px -26px rgba(22,24,26,.4);
}
.proj-nextlabel{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);
}
.lang-ar .proj-nextlabel{letter-spacing:.02em;text-transform:none;font-size:.82rem}
.proj-nexth{font-family:var(--f-display);font-weight:600;font-size:1.2rem;line-height:1.3}

/* ---- 404 ---- */
.notfound{padding-block:clamp(8rem,20vh,12rem) clamp(5rem,12vh,8rem);min-height:60vh}

/* ---- footer extras: WhatsApp and the staff door ---- */

.foot-list .wa{display:inline-flex;align-items:center;gap:.45rem}
.foot-list .wa svg{width:16px;height:16px;flex:0 0 auto;opacity:.75}
.foot-list .wa:hover svg{opacity:1}

.foot-admin{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.8rem;color:#8E887E;
  transition:color var(--t-fast) var(--ease);
}
.foot-admin svg{width:13px;height:13px;flex:0 0 auto}
.foot-admin:hover{color:#D8D4CC}
@media (pointer:coarse){.foot-admin{min-height:44px}}

/* ---------------------------------------------------------------- booth design
   Renders sit between the work and the process: you have just seen what was
   built, and this is the drawing that decided it. Deliberately calmer than the
   work cards, because a render is not a photograph and should not pretend to be
   one: the panel is tinted, the image sits inside a border rather than bleeding
   to the edge, and every card says whether it was built or is still a concept. */
.designs{background:var(--panel)}
.dgrid{
  display:grid;gap:clamp(1.1rem,2.4vw,2rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));
  margin-block-start:clamp(2rem,4vw,3rem);
}
.dcard{
  margin:0;border-radius:var(--radius);overflow:hidden;
  background:var(--canvas);border:1px solid var(--line);
  transition:transform var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease);
}
.dcard:hover{
  transform:translateY(-4px);border-color:var(--line-strong);
  box-shadow:0 20px 44px -26px rgba(22,24,26,.36);
}
.dcard-media{position:relative;overflow:hidden;background:var(--line)}
.dcard-media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform 1s var(--ease-out);
}
.dcard:hover .dcard-media img{transform:scale(1.04)}

/* The badge is anchored to the inline start, so it moves to the right in
   Arabic on its own rather than needing a mirrored rule. */
.dcard-tag{
  position:absolute;inset-block-start:.75rem;inset-inline-start:.75rem;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;padding:.32rem .6rem;border-radius:999px;
  background:rgba(252,250,247,.94);color:var(--ink);
  border:1px solid var(--line);backdrop-filter:blur(4px);
}
.dcard-tag--built{background:var(--accent);color:#fff;border-color:transparent}
.lang-ar .dcard-tag{letter-spacing:.02em;text-transform:none;font-size:.76rem}

.dcard-text{padding:1.15rem 1.3rem 1.4rem;display:grid;align-content:start;gap:.45rem}
.dcard-h{font-size:1.1rem;line-height:1.3;margin:0}
.dcard-sum{color:var(--text-secondary);font-size:.92rem;line-height:1.55;margin:0}

@media (prefers-reduced-motion:reduce){
  .dcard,.dcard-media img{transition:none}
  .dcard:hover{transform:none}
  .dcard:hover .dcard-media img{transform:none}
}


/* ---------------------------------------------------------------- clients page
   The homepage row is proof in passing. This page is for the buyer who stops
   and asks who exactly, so every logo is named in text beneath it: readable to
   a screen reader, findable by search, and unambiguous where two companies
   share a similar mark. */
.clientspage .clients-count{
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);
  margin-block:clamp(2rem,5vh,3rem) 0;
}
.lang-ar .clientspage .clients-count{letter-spacing:.02em;text-transform:none;font-size:.9rem}

.clientgrid{
  list-style:none;margin:clamp(1.5rem,4vh,2.5rem) 0 0;padding:0;
  display:grid;gap:clamp(1rem,2.2vw,1.6rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr));
}
.clientcell{
  display:grid;gap:.9rem;justify-items:center;text-align:center;
  padding:1.5rem 1rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);
  transition:border-color var(--t-mid) var(--ease),transform var(--t-mid) var(--ease);
}
.clientcell:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.clientcell-mark{display:flex;align-items:center;justify-content:center;
  inline-size:100%;block-size:3rem}
.clientcell-mark img{max-block-size:100%;max-inline-size:100%;object-fit:contain;
  opacity:.78;filter:grayscale(1);transition:opacity var(--t-fast) var(--ease)}
.clientcell:hover .clientcell-mark img{opacity:1}
.clientcell-name{font-size:.86rem;line-height:1.4;color:var(--text-secondary)}

@media (prefers-reduced-motion:reduce){
  .clientcell{transition:none}
  .clientcell:hover{transform:none}
}