/* ==========================================================================
   AL-SHAMAA Engineering Services and Consultancy
   Landing page stylesheet
   ========================================================================== */

/* --- Fonts -------------------------------------------------------------- */
/* Self-hosted so the critical path holds no third-party connection. Latin is
   subset to Latin-1 + punctuation; IBM Plex Sans ships as one variable file
   covering 100-700, so every roman weight on the page costs a single request.
   The Arabic faces carry an Arabic-only unicode-range, so an English visitor
   never downloads them — the browser fetches them the moment the page flips
   to Arabic and not before. */
@font-face{
  font-family:"IBM Plex Sans";
  src:url("../fonts/plex-sans-var-latin.woff2") format("woff2");
  font-weight:100 700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("../fonts/plex-sans-italic-var-latin.woff2") format("woff2");
  font-weight:100 700;
  font-style:italic;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/plex-mono-400-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/plex-mono-500-latin.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans Arabic";
  src:url("../fonts/plex-arabic-400-arabic.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face{
  font-family:"IBM Plex Sans Arabic";
  src:url("../fonts/plex-arabic-500-arabic.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face{
  font-family:"IBM Plex Sans Arabic";
  src:url("../fonts/plex-arabic-600-arabic.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face{
  font-family:"IBM Plex Sans Arabic";
  src:url("../fonts/plex-arabic-700-arabic.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}

/* The language button shows the word "العربية" while the page is in English,
   and those seven letters alone were enough to pull the full 32 KB Arabic face
   onto every English page load. They get their own 2.7 KB face containing
   exactly that word; the full family still loads the moment the page flips. */
@font-face{
  font-family:"Plex Arabic Label";
  src:url("../fonts/plex-arabic-500-langbtn.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}

/* Metric-matched fallbacks. While Plex is in flight the page renders in Arial
   (or the platform equivalent) scaled and re-shouldered to Plex's own metrics,
   so the swap when Plex lands moves nothing — this is what keeps CLS at zero
   despite font-display:swap. Values derived from Plex's hhea/OS-2 tables:
   ascent 1025/1000, descent 275/1000, both divided by the size-adjust ratio. */
@font-face{
  font-family:"Plex Sans Fallback";
  src:local("Arial"),local("Helvetica Neue"),local("Helvetica"),local("Liberation Sans"),local("Roboto"),local("Segoe UI");
  size-adjust:97.5%;
  ascent-override:105.13%;
  descent-override:28.21%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Plex Mono Fallback";
  src:local("Menlo"),local("Consolas"),local("DejaVu Sans Mono"),local("Liberation Mono"),local("Courier New");
  size-adjust:99.7%;
  ascent-override:102.81%;
  descent-override:27.58%;
  line-gap-override:0%;
}

/* --- Tokens ------------------------------------------------------------- */
:root{
  --ink:        #0B2136;
  --navy:       #143651;
  --navy-600:   #1B4568;
  --navy-400:   #35618B;
  --navy-200:   #8AA4BE;
  --gold:       #C2A15E;
  --gold-light: #E0C68E;
  --gold-deep:  #856A42;
  --cream:      #F6F3EC;
  --paper:      #FCFBF8;
  --white:      #FFFFFF;

  --line:       rgba(20,54,81,.13);
  --line-soft:  rgba(20,54,81,.07);
  --line-dark:  rgba(255,255,255,.14);

  --text:       #16324A;
  --text-soft:  #5B7189;
  --text-dim:   rgba(255,255,255,.62);

  /* IBM Plex: an engineering-documentation superfamily. "IBM Plex Sans Arabic"
     is the matched Arabic companion, so both scripts share one skeleton. */
  --font-display: "IBM Plex Sans", "IBM Plex Sans Arabic", "Plex Sans Fallback", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans:    "IBM Plex Sans", "IBM Plex Sans Arabic", "Plex Sans Fallback", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "IBM Plex Mono", "IBM Plex Sans Arabic", "Plex Mono Fallback", ui-monospace, "SF Mono", Menlo, monospace;
  --display-weight: 600;
  --display-track: -.035em;

  --r-lg: 30px;
  --r-md: 20px;
  --r-sm: 14px;

  --shell: min(1320px, 100% - 48px);
  --hero-gutter: 14px;
  --hero-w: min(1800px, 100% - (var(--hero-gutter) * 2));
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-flood: cubic-bezier(.33,0,.15,1);  /* gentle in, long settle */
}

/* --- Reset -------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

/* Skip link: off-screen until focused, then a solid pill over the header. */
.skip{
  position:fixed; z-index:200;
  inset-block-start:10px; inset-inline-start:10px;
  transform:translateY(-200%);
  padding:11px 18px;
  border-radius:999px;
  background:var(--ink); color:var(--paper);
  font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
}
.skip:focus-visible{ transform:translateY(0); }
::selection{ background:var(--gold); color:var(--ink); }

/* --- Type helpers ------------------------------------------------------- */
.display{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  line-height:1.02;
  letter-spacing:var(--display-track);
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.6875rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--gold-deep);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:currentColor;
  opacity:.55;
}
.eyebrow--light{ color:var(--gold-light); }
.lede{ font-size:clamp(1rem,.95rem + .3vw,1.125rem); color:var(--text-soft); max-width:56ch; }
.gold{ color:var(--gold-deep); }
.gold-l{ color:var(--gold); }
.italic{ font-style:italic; }

/* --- Layout ------------------------------------------------------------- */
.shell{ width:var(--shell); margin-inline:auto; }
.section{ padding:clamp(80px,9vw,148px) 0; }
.section-head{ display:grid; gap:22px; margin-bottom:clamp(40px,5vw,72px); }
@media (min-width:900px){
  .section-head{ grid-template-columns:1.05fr .95fr; align-items:end; gap:48px; }
}
.section-title{ font-size:clamp(2rem,1.25rem + 2.6vw,3.25rem); margin-top:18px; }

/* --- Buttons ------------------------------------------------------------ */
/* Hover: the colour floods radially out of the arrow disc until it fills the
   pill, the disc inverts so it stays legible against the flood, and the arrow
   swaps for a fresh one. The circle is anchored on the disc's centre with a
   logical inset, so it mirrors in RTL. */
.btn{
  --btn-bg:var(--navy);
  --btn-fg:var(--paper);
  --btn-hover-fg:var(--ink);
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding-block:10px;
  padding-inline:26px 10px;
  border-radius:999px;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-size:.9375rem;
  font-weight:500;
  letter-spacing:-.01em;
  overflow:hidden;
  isolation:isolate;
  transition:color .42s var(--ease-flood) .1s, transform .55s var(--ease-flood);
}
.btn{
  /* the disc's centre: end padding (10px) + half the 36px disc */
  --fill-origin:28px;
  --fill-shift:50%;
}
[dir="rtl"] .btn{ --fill-shift:-50%; }
.btn::before{
  content:"";
  position:absolute; z-index:-1;
  top:50%;
  inset-inline-end:var(--fill-origin);
  width:210%;                 /* wide enough that the far corner is covered */
  aspect-ratio:1;
  translate:var(--fill-shift) -50%;
  border-radius:50%;
  background:linear-gradient(120deg,var(--gold-deep),var(--gold) 55%,var(--gold-light));
  transform:scale(0);
  transition:transform .66s var(--ease-flood);
  will-change:transform;
}
.btn:hover,.btn:focus-visible{ transform:translateY(-2px); color:var(--btn-hover-fg); }
.btn:hover::before,.btn:focus-visible::before{ transform:scale(1); }

/* arrow disc: two arrows, one leaving and one arriving */
.btn__ic{
  position:relative;
  width:36px; height:36px;
  flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--gold);
  color:var(--ink);
  overflow:hidden;
  transition:background .5s var(--ease-flood), color .5s var(--ease-flood), transform .55s var(--ease-flood);
}
.btn:hover .btn__ic,.btn:focus-visible .btn__ic{
  background:var(--ink); color:var(--gold-light); transform:scale(1.06);
}
.btn__ic svg{
  grid-area:1/1;
  width:15px; height:15px;
  transition:transform .55s var(--ease-flood), opacity .34s var(--ease);
}
.btn__ic svg:nth-child(2){ transform:translate(-115%,115%); opacity:0; }
.btn:hover .btn__ic svg:nth-child(1),
.btn:focus-visible .btn__ic svg:nth-child(1){ transform:translate(115%,-115%); opacity:0; }
.btn:hover .btn__ic svg:nth-child(2),
.btn:focus-visible .btn__ic svg:nth-child(2){ transform:translate(0,0); opacity:1; }
/* mirror the diagonal so it still reads "forward" in RTL */
[dir="rtl"] .btn__ic svg{ scale:-1 1; }

.btn--light{ --btn-bg:var(--paper); --btn-fg:var(--ink); }
.btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line-dark);
}
.btn--gold{
  --btn-bg:var(--gold); --btn-fg:var(--ink); --btn-hover-fg:var(--paper);
}
.btn--gold::before{ background:linear-gradient(100deg,var(--ink),var(--navy)); }
.btn--gold .btn__ic{ background:var(--ink); color:var(--gold-light); }
.btn--gold:hover .btn__ic,.btn--gold:focus-visible .btn__ic{ background:var(--gold); color:var(--ink); }

/* text link with sliding underline */
.tlink{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.875rem; font-weight:500;
  padding-bottom:3px;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0% 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size .5s var(--ease-out), color .3s;
}
.tlink:hover{ background-size:100% 1px; color:var(--gold-deep); }
.tlink svg{ width:13px; height:13px; transition:transform .45s var(--ease-out); }
.tlink:hover svg{ transform:translate(3px,-3px); }

/* ==========================================================================
   Header
   ========================================================================== */
.header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  padding:18px 0;
  transition:padding .5s var(--ease);
}
.header.is-stuck{ padding:10px 0; }
.header__bar{
  /* tracks the hero box, so the pill sits flush with the hero's edges */
  width:var(--hero-w);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  /* Logical, so the ends mirror in RTL. Asymmetric on purpose: the start
     holds flat content (the logo) which has to clear the pill's corner
     radius, while the end holds nested pills whose own curve should sit one
     vertical gap from the edge. */
  padding-block:9px;
  padding-inline:26px 9px;
  border-radius:999px;
  background:rgba(252,251,248,.06);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), color .5s var(--ease);
  color:var(--paper);
}
.header.is-stuck .header__bar{
  background:rgba(252,251,248,.86);
  border-color:var(--line);
  box-shadow:0 18px 44px -26px rgba(11,33,54,.4);
  color:var(--ink);
}
.brand{ display:flex; align-items:center; gap:11px; flex:none; }
.brand__mark{ width:30px; height:38px; object-fit:contain; }
.brand__mark--dark{ display:none; }
.header.is-stuck .brand__mark--light{ display:none; }
.header.is-stuck .brand__mark--dark{ display:block; }
.brand__txt{ display:grid; line-height:1.05; }
.brand__name{ font-size:.95rem; font-weight:700; letter-spacing:.02em; }
.brand__sub{
  font-family:var(--font-mono);
  font-size:.5rem; letter-spacing:.19em; text-transform:uppercase;
  opacity:.62;
}
.nav{ display:none; }
@media (min-width:1060px){
  .nav{ display:flex; align-items:center; gap:4px; }
}
.nav a{
  position:relative;
  padding:8px 15px;
  border-radius:999px;
  font-size:.875rem;
  font-weight:450;
  opacity:.82;
  transition:opacity .3s, background .4s var(--ease);
}
.nav a:hover{ opacity:1; background:rgba(255,255,255,.1); }
.header.is-stuck .nav a:hover{ background:rgba(20,54,81,.07); }
.nav a.is-active{ opacity:1; }
.nav a.is-active::after{
  content:""; position:absolute; left:50%; bottom:2px;
  width:4px; height:4px; margin-left:-2px;
  border-radius:50%; background:var(--gold);
}
.header__cta{ display:flex; align-items:center; gap:10px; flex:none; }
.header__cta .btn{ display:none; }
@media (min-width:720px){ .header__cta .btn{ display:inline-flex; } }
.header.is-stuck .btn--ghost{ --btn-fg:var(--ink); box-shadow:inset 0 0 0 1px var(--line); }

.burger{
  width:44px; height:44px;
  border-radius:50%;
  display:grid; place-items:center; gap:5px;
  background:rgba(255,255,255,.1);
  align-content:center;
}
@media (min-width:1060px){ .burger{ display:none; } }
.header.is-stuck .burger{ background:rgba(20,54,81,.07); }
.burger span{
  display:block; width:17px; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .45s var(--ease-out), opacity .3s;
}
body.menu-open .burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:99;
  background:var(--ink);
  padding:120px 28px 40px;
  display:grid; align-content:start; gap:6px;
  clip-path:circle(0% at calc(100% - 44px) 44px);
  transition:clip-path .7s var(--ease-out), visibility 0s linear .7s;
  pointer-events:none;
  visibility:hidden;
}
body.menu-open .drawer{
  clip-path:circle(150% at calc(100% - 44px) 44px);
  pointer-events:auto;
  visibility:visible;
  transition:clip-path .7s var(--ease-out), visibility 0s;
}
.drawer a{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  letter-spacing:var(--display-track);
  font-size:1.9rem;
  color:var(--paper);
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.09);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease) .1s, transform .5s var(--ease-out) .1s, color .3s;
}
body.menu-open .drawer a{ opacity:1; transform:none; }
.drawer a:hover{ color:var(--gold-light); }
.drawer__foot{ margin-top:26px; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; color:var(--text-dim); }

/* ==========================================================================
   Hero
   ========================================================================== */
/* Gutter on all four sides: the card floats clear of the fold instead of
   running into the section below it. */
.hero{ padding:var(--hero-gutter) 0; }
.hero__frame{
  position:relative;
  width:var(--hero-w);          /* wider than the content shell, near full bleed */
  margin-inline:auto;
  /* Locked to the viewport minus both gutters: floor for short landscape
     phones, cap so the hero never becomes a void on very tall displays.
     min-height rather than height so nothing is ever clipped. */
  min-height:clamp(560px, calc(100svh - (var(--hero-gutter) * 2)), 1080px);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 10%, #1E4E76 0%, transparent 58%),
    radial-gradient(90% 70% at 12% 92%, #0E2C46 0%, transparent 60%),
    linear-gradient(165deg, #133C5C 0%, #0B2136 100%);
  background-color:#0B2136;
  display:grid;
  grid-template-rows:1fr auto;   /* content takes the slack, footer hugs the base */
  align-items:end;
  isolation:isolate;
}
/* Two transforms, two elements, so neither has to fight the other:
   - the outer box carries the scroll parallax, rewritten every frame and so
     deliberately untransitioned;
   - the svg carries the pointer drift and the RTL mirror, eased over .9s.
   Both used to be inline styles on one element, where the drift was written as
   margin-left/top — a forced layout on every pointermove, and the single worst
   INP cost on the page — and where the scroll transform silently clobbered the
   RTL flip. Custom properties keep them independent and off the layout path. */
.hero__canvas{
  position:absolute; inset:0; z-index:0;
  --sy:0px; --sc:1;
  transform:translate3d(0, var(--sy), 0) scale(var(--sc));
}
.hero__canvas svg{
  width:100%; height:100%;
  --px:0px; --py:0px; --flip:1;
  transform:translate3d(var(--px), var(--py), 0) scaleX(var(--flip));
  transition:transform .9s var(--ease-out);
}
.hero__glow{
  position:absolute; z-index:1;
  width:52vw; aspect-ratio:1; right:-8vw; top:-14vw;
  background:radial-gradient(circle, rgba(194,161,94,.20) 0%, transparent 66%);
  filter:blur(20px);
  animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{ to{ transform:translate3d(-5%,6%,0) scale(1.12); } }
.hero__scrim{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top, rgba(8,25,42,.86) 0%, rgba(8,25,42,.32) 44%, rgba(8,25,42,.12) 100%);
}
.hero__inner{
  position:relative; z-index:3;
  padding:clamp(96px,6vw,124px) clamp(22px,3vw,56px) clamp(18px,2.4vh,32px);
  display:grid; gap:clamp(24px,3.4vh,44px);
  color:var(--paper);
  width:100%;
}
@media (min-width:1000px){
  .hero__inner{ grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:56px; }
}
.hero__title{
  /* min() against svh keeps three lines inside a short viewport */
  font-size:clamp(2.4rem, min(1.35rem + 5.6vw, 10svh), 5.75rem);
  line-height:1.04;
  max-width:16ch;
  margin:clamp(14px,1.6vh,22px) 0 clamp(16px,2vh,24px);
}
.hero__title .ln{ display:block; overflow:hidden; }
.hero__title .ln > span{
  display:block;
  transform:translateY(105%);
  animation:riseIn 1.15s var(--ease-out) forwards;
}
.hero__title .ln:nth-child(2) > span{ animation-delay:.11s; }
.hero__title .ln:nth-child(3) > span{ animation-delay:.22s; }
@keyframes riseIn{ to{ transform:translateY(0); } }
.hero__sub{
  color:rgba(255,255,255,.74);
  max-width:46ch;
  font-size:clamp(.95rem,.9rem + .25vw,1.075rem);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(20px,3vh,32px); }

.hero__stats{ display:grid; gap:10px; }
@media (min-width:600px) and (max-width:999px){
  .hero__stats{ grid-template-columns:repeat(3,1fr); }
}
.stat-card{
  min-width:210px;
  padding:20px 22px;
  border-radius:var(--r-md);
  background:rgba(252,251,248,.09);
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:background .45s var(--ease), transform .55s var(--ease-out), border-color .45s;
}
.stat-card:hover{ background:rgba(252,251,248,.15); transform:translateY(-4px); border-color:rgba(194,161,94,.5); }
.stat-card__n{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  letter-spacing:var(--display-track);
  font-size:2.25rem; line-height:1;
  color:var(--gold-light);
  display:flex; align-items:baseline;
  font-variant-numeric:tabular-nums;
}
/* main.js reserves the final width on these before the count-up starts */
[data-count]{ display:inline-block; text-align:start; font-variant-numeric:tabular-nums; }
.stat-card__l{
  margin-top:7px;
  font-family:var(--font-mono);
  font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
/* Below 600px the three glass cards stack to ~340px and blow the hero past
   the fold, so they collapse into a single divided strip instead. */
@media (max-width:599px){
  .hero__stats{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    padding-top:clamp(14px,2vh,20px);
    border-top:1px solid rgba(255,255,255,.15);
  }
  .stat-card{
    min-width:0;
    padding:0 10px;
    border:0; border-left:1px solid rgba(255,255,255,.13);
    border-radius:0;
    background:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .stat-card:first-child{ border-left:0; padding-left:0; }
  .stat-card:hover{ transform:none; background:none; }
  .stat-card__n{ font-size:1.6rem; }
  .stat-card__l{ margin-top:5px; font-size:.54rem; letter-spacing:.1em; line-height:1.5; }
}

/* Landscape phones and other very short viewports: the stat figures also
   appear in the About section, so drop them here rather than push the hero
   far past the fold. */
@media (max-height:640px){
  .hero__inner{ padding-top:clamp(86px,11vh,96px); padding-bottom:16px; }
  .hero__stats{ display:none; }
}

.hero__foot{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:0 clamp(22px,3vw,56px) clamp(14px,1.8vw,24px);
  font-family:var(--font-mono);
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.scrollcue{ display:flex; align-items:center; gap:10px; }
.scrollcue__rail{ width:1px; height:34px; background:rgba(255,255,255,.2); position:relative; overflow:hidden; }
.scrollcue__rail::after{
  content:""; position:absolute; inset:0 auto auto 0; width:1px; height:12px;
  background:var(--gold);
  animation:cue 2.2s var(--ease) infinite;
}
@keyframes cue{ 0%{ transform:translateY(-14px); } 60%,100%{ transform:translateY(38px); } }

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee{
  background:var(--ink);
  color:var(--paper);
  padding:20px 0;
  overflow:hidden;
  border-block:1px solid rgba(255,255,255,.07);
}
.marquee__track{ display:flex; width:max-content; animation:slide 42s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marquee__set{ display:flex; align-items:center; }
.marquee__item{
  display:flex; align-items:center; gap:26px;
  padding:0 26px;
  font-family:var(--font-mono);
  font-size:.78rem; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.68);
  white-space:nowrap;
}
.marquee__item::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); opacity:.8; }

/* ==========================================================================
   Intro / About
   ========================================================================== */
.intro{ background:var(--cream); }
.intro__grid{ display:grid; gap:clamp(40px,5vw,72px); }
@media (min-width:980px){ .intro__grid{ grid-template-columns:1fr 1fr; align-items:start; } }
.intro__statement{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  font-size:clamp(1.6rem,1rem + 2vw,2.7rem);
  line-height:1.22;
  letter-spacing:var(--display-track);
  margin:20px 0 26px;
}
.intro__statement em{ font-style:italic; color:var(--gold-deep); }
.intro__body{ display:grid; gap:18px; max-width:54ch; color:var(--text-soft); }

.figures{
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.figure{
  padding:clamp(22px,3vw,34px);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.figure::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:linear-gradient(90deg,var(--gold),transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease-out);
}
.figure:hover::after{ transform:scaleX(1); }
.figure__n{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  letter-spacing:var(--display-track);
  font-size:clamp(2.3rem,1.5rem + 2.2vw,3.4rem);
  line-height:1;
  color:var(--navy);
  display:flex; align-items:baseline;
}
.figure__n sup{
  font-size:.26em; color:var(--gold-deep); top:-1.5em; margin-left:2px;
  font-family:var(--font-mono); letter-spacing:.1em; text-transform:uppercase;
}
.figure__l{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--text-soft);
}

/* ==========================================================================
   Services
   ========================================================================== */
.services{ background:var(--paper); }
.svc-grid{ display:grid; gap:18px; }
@media (min-width:820px){ .svc-grid{ grid-template-columns:repeat(3,1fr); } }
.svc{
  position:relative;
  display:grid;
  grid-template-rows:auto 1fr auto;
  border-radius:var(--r-md);
  background:var(--white);
  border:1px solid var(--line-soft);
  overflow:hidden;
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .5s;
}
.svc:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -34px rgba(11,33,54,.42); border-color:var(--line); }
.svc__art{
  position:relative;
  aspect-ratio:16/11;
  background:linear-gradient(160deg,#163A58,#0B2136);
  overflow:hidden;
}
.svc__art svg{ position:absolute; inset:0; width:100%; height:100%; }
.svc__no{
  position:absolute; top:16px; inset-inline-start:18px; z-index:2;
  font-family:var(--font-mono);
  font-size:.68rem; letter-spacing:.16em;
  color:var(--gold-light);
  padding:5px 11px; border-radius:999px;
  background:rgba(11,33,54,.5);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px);
}
.svc__body{ padding:26px clamp(20px,2.2vw,28px) 8px; display:grid; gap:12px; align-content:start; }
.svc__title{ font-family:var(--font-display); font-weight:var(--display-weight); letter-spacing:var(--display-track); font-size:1.5rem; line-height:1.15; }
.svc__text{ font-size:.9375rem; color:var(--text-soft); }
.svc__list{ display:grid; gap:9px; padding:16px clamp(20px,2.2vw,28px) 26px; }
.svc__list li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:.8125rem; color:var(--text-soft);
  padding-top:9px; border-top:1px solid var(--line-soft);
}
.svc__list li::before{
  content:""; flex:none; width:5px; height:5px; margin-top:7px;
  border-radius:1px; background:var(--gold); transform:rotate(45deg);
}

/* ==========================================================================
   Capabilities bento
   ========================================================================== */
.caps{ background:var(--ink); color:var(--paper); position:relative; overflow:hidden; }
.caps::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(90% 70% at 50% 30%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(90% 70% at 50% 30%,#000 0%,transparent 78%);
}
.caps .shell{ position:relative; z-index:1; }
.caps .section-title{ color:var(--paper); }
.caps .lede{ color:rgba(255,255,255,.62); }
.bento{ display:grid; gap:14px; }
@media (min-width:760px){ .bento{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){
  .bento{ grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(150px,auto); }
  .bento > *:nth-child(1){ grid-column:span 3; grid-row:span 2; }
  .bento > *:nth-child(2){ grid-column:span 3; }
  .bento > *:nth-child(3){ grid-column:span 3; }
  .bento > *:nth-child(4){ grid-column:span 2; }
  .bento > *:nth-child(5){ grid-column:span 2; }
  .bento > *:nth-child(6){ grid-column:span 2; }
}
.cap{
  position:relative;
  padding:clamp(22px,2.4vw,30px);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  display:grid; align-content:start; gap:12px;
  overflow:hidden;
  transition:background .5s var(--ease), border-color .5s, transform .6s var(--ease-out);
}
.cap:hover{ background:rgba(255,255,255,.075); border-color:rgba(194,161,94,.35); transform:translateY(-3px); }
.cap__ic{
  width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center;
  background:rgba(194,161,94,.14);
  border:1px solid rgba(194,161,94,.3);
  color:var(--gold-light);
}
.cap__ic svg{ width:19px; height:19px; }
.cap h3{ font-size:1.0625rem; font-weight:600; letter-spacing:-.01em; }
.cap p{ font-size:.875rem; color:rgba(255,255,255,.58); }
.cap--feature{ background:linear-gradient(155deg,rgba(194,161,94,.16),rgba(255,255,255,.03) 62%); }
.cap--feature h3{ font-family:var(--font-display); font-size:clamp(1.45rem,1.1rem + 1vw,1.95rem); font-weight:var(--display-weight); letter-spacing:var(--display-track); line-height:1.2; }
.cap--feature p{ font-size:.9375rem; max-width:40ch; }
.cap__figs{ display:flex; gap:26px; margin-top:auto; padding-top:18px; }
.cap__fig b{ display:block; font-family:var(--font-display); font-size:1.7rem; line-height:1; color:var(--gold-light); font-weight:var(--display-weight); letter-spacing:var(--display-track); }
.cap__fig span{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); }

/* ==========================================================================
   Process
   ========================================================================== */
.process{ background:var(--cream); }
.steps{ display:grid; border-top:1px solid var(--line); }
.step{
  position:relative;
  display:grid; gap:8px;
  grid-template-columns:auto 1fr;
  align-items:start;
  padding:clamp(24px,3vw,34px) 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .6s var(--ease-out);
}
@media (min-width:860px){
  .step{ grid-template-columns:90px minmax(0,300px) minmax(0,1fr) auto; gap:32px; align-items:center; }
  .step:hover{ padding-inline-start:16px; }
}
.step::before{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--ease-out);
}
.step:hover::before{ transform:scaleX(1); }
.step__n{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; color:var(--gold-deep); }
.step__t{ font-family:var(--font-display); font-weight:var(--display-weight); letter-spacing:var(--display-track); font-size:clamp(1.3rem,1.1rem + .7vw,1.7rem); line-height:1.2; }
.step__d{ font-size:.9375rem; color:var(--text-soft); max-width:62ch; }
.step__meta{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-soft); opacity:.7; white-space:nowrap; }

/* ==========================================================================
   Selected work / case study
   ========================================================================== */
/* Dark, like the capabilities band — the drawing sheets are white, so they
   read as lit sheets on a table rather than as flat page background. */
.work{ background:var(--ink); color:var(--paper); position:relative; overflow:hidden; }
.work::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(85% 62% at 50% 22%,#000 0%,transparent 76%);
  -webkit-mask-image:radial-gradient(85% 62% at 50% 22%,#000 0%,transparent 76%);
}
.work .shell{ position:relative; z-index:1; }
.work .section-title{ color:var(--paper); }
.work .lede{ color:rgba(255,255,255,.62); }

.case{
  display:grid;
  border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  overflow:hidden;
}
@media (min-width:960px){ .case{ grid-template-columns:1.02fr .98fr; } }
/* The photograph is absolutely positioned so it can fill whatever height the
   text column ends up at, without the img needing a resolvable percentage. */
.case__hero{ position:relative; aspect-ratio:16/9; background:#0F2A42; }
@media (min-width:960px){ .case__hero{ aspect-ratio:auto; } }
.case__hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.case__side{ padding:clamp(26px,3.2vw,44px); display:grid; gap:13px; align-content:start; }
.case__tag{
  justify-self:start;
  padding:6px 13px; border-radius:999px;
  border:1px solid rgba(194,161,94,.4);
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-light);
}
.case__title{
  font-family:var(--font-display); font-weight:var(--display-weight);
  letter-spacing:var(--display-track);
  font-size:clamp(1.5rem,1.15rem + 1.1vw,2.1rem); line-height:1.15;
  margin-top:4px;
}
.case__loc{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.case__lede{ font-size:.9375rem; color:rgba(255,255,255,.64); max-width:54ch; }
.case__facts{ margin-top:8px; border-top:1px solid rgba(255,255,255,.1); }
.case__facts > div{ display:grid; gap:4px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.1); }
@media (min-width:520px){ .case__facts > div{ grid-template-columns:128px minmax(0,1fr); gap:18px; align-items:baseline; } }
.case__facts dt{ font-family:var(--font-mono); font-size:.63rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.case__facts dd{ font-size:.875rem; color:rgba(255,255,255,.8); }

.case-grid{ display:grid; gap:14px; margin-top:14px; }
@media (min-width:720px){
  .case-grid{ grid-template-columns:repeat(6,1fr); }
  .sheet--half{ grid-column:span 3; }
  .sheet--third{ grid-column:span 2; }
}
.sheet{
  margin:0;
  border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  overflow:hidden;
  transition:border-color .5s, transform .6s var(--ease-out), background .5s;
}
.sheet:hover{ border-color:rgba(194,161,94,.4); background:rgba(255,255,255,.07); transform:translateY(-4px); }
/* Every sheet gets the same 4:3 window whatever the drawing's own proportions
   are, so the row's cards and their captions line up. object-fit does the
   letterboxing — sizing the img itself would let a tall sheet push the box. */
.sheet__img{
  aspect-ratio:4/3;
  background:var(--white);
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.sheet__img img{ display:block; width:100%; height:100%; object-fit:contain; }
.sheet figcaption{ padding:14px 16px 16px; }
.sheet__t{ font-size:.875rem; color:rgba(255,255,255,.78); line-height:1.45; }
.case-notes{ display:grid; margin-top:clamp(34px,4vw,56px); border-top:1px solid rgba(255,255,255,.12); }
@media (min-width:820px){ .case-notes{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.cnote{ padding:26px 0 4px; display:grid; gap:9px; align-content:start; }
@media (min-width:820px){
  .cnote{ padding:28px clamp(20px,2.4vw,34px) 6px; border-inline-start:1px solid rgba(255,255,255,.12); }
  .cnote:first-child{ border-inline-start:0; padding-inline-start:0; }
}
.cnote__n{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; color:var(--gold); }
.cnote h4{ font-family:var(--font-display); font-weight:var(--display-weight); letter-spacing:var(--display-track); font-size:1.15rem; }
.cnote p{ font-size:.9rem; color:rgba(255,255,255,.6); max-width:44ch; }

/* ==========================================================================
   Sectors
   ========================================================================== */
.sectors{ background:var(--paper); }
.sector-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.sector{
  position:relative;
  padding:22px 22px 20px;
  border-radius:var(--r-sm);
  border:1px solid var(--line-soft);
  background:var(--white);
  display:grid; gap:10px; align-content:start;
  overflow:hidden;
  transition:border-color .5s, transform .6s var(--ease-out), background .5s;
}
.sector:hover{ border-color:rgba(194,161,94,.5); transform:translateY(-4px); background:linear-gradient(170deg,#fff,#FBF7EE); }
.sector__ic{ color:var(--navy-400); }
.sector__ic svg{ width:26px; height:26px; }
.sector h3{ font-size:.9375rem; font-weight:600; }
.sector p{ font-size:.8125rem; color:var(--text-soft); }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{ padding:clamp(70px,7vw,110px) 0; background:var(--cream); }
.cta__panel{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  padding:clamp(44px,6vw,88px) clamp(26px,5vw,80px);
  background:
    radial-gradient(110% 130% at 88% 4%, rgba(194,161,94,.30) 0%, transparent 55%),
    linear-gradient(150deg,#16406A 0%,#0B2136 72%);
  color:var(--paper);
  display:grid; gap:36px;
  isolation:isolate;
}
@media (min-width:940px){ .cta__panel{ grid-template-columns:1.15fr .85fr; align-items:center; gap:56px; } }
.cta__panel::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom right,#000,transparent 70%);
  -webkit-mask-image:linear-gradient(to bottom right,#000,transparent 70%);
}
.cta__title{ font-size:clamp(1.85rem,1.2rem + 2.2vw,2.9rem); margin:18px 0 16px; }
.cta__panel .lede{ color:rgba(255,255,255,.68); }
.cta__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.cta__facts{ display:grid; gap:2px; }
.cta__fact{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-size:.875rem;
}
.cta__fact:first-child{ border-top:1px solid rgba(255,255,255,.12); }
.cta__fact dt{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.cta__fact dd{ margin:0; font-weight:500; text-align:end; }
.cta__fact a:hover{ color:var(--gold-light); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{ background:var(--ink); color:var(--paper); padding:clamp(56px,6vw,84px) 0 34px; }
.footer__top{ display:grid; gap:44px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.1); }
@media (min-width:900px){ .footer__top{ grid-template-columns:1.3fr repeat(3,minmax(0,.9fr)); gap:48px; } }
.footer__brand{ display:grid; gap:18px; align-content:start; }
.footer__brand .brand__mark{ width:38px; height:48px; }
.footer__blurb{ font-size:.875rem; color:rgba(255,255,255,.55); max-width:36ch; }
.footer h3{
  font-family:var(--font-mono); font-size:.63rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--gold); font-weight:500; margin-bottom:18px;
}
.footer ul{ display:grid; gap:11px; }
.footer li a, .footer address a{ font-size:.875rem; color:rgba(255,255,255,.6); transition:color .3s, padding-left .4s var(--ease); }
.footer li a:hover{ color:var(--gold-light); padding-inline-start:5px; }
.footer address{ font-style:normal; display:grid; gap:11px; font-size:.875rem; color:rgba(255,255,255,.6); }
.footer address a:hover{ color:var(--gold-light); }
.footer__bottom{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  padding-top:26px;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.11em;
  color:rgba(255,255,255,.5);
}
.footer__bottom a:hover{ color:var(--gold-light); }
.footer__credit a{
  color:rgba(255,255,255,.72);
  /* Inside a text run, colour alone is not a link cue — and against the line
     it sits in, this one was only 1.15:1. */
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .3s;
}

/* --- Reveal delays ------------------------------------------------------ */
/* Staggered entrances. These were inline `style="--d:120ms"` attributes; as
   classes they cost nothing extra and keep the CSP free of 'unsafe-inline'. */
.d-60{  --d:60ms;  }
.d-70{  --d:70ms;  }
.d-80{  --d:80ms;  }
.d-100{ --d:100ms; }
.d-110{ --d:110ms; }
.d-120{ --d:120ms; }
.d-140{ --d:140ms; }
.d-180{ --d:180ms; }
.d-200{ --d:200ms; }
.d-210{ --d:210ms; }
.d-220{ --d:220ms; }
.d-240{ --d:240ms; }
.d-260{ --d:260ms; }
.d-280{ --d:280ms; }
.d-300{ --d:300ms; }
.d-320{ --d:320ms; }

/* --- One-off offsets, formerly inline ----------------------------------- */
.intro__vision{ margin-top:26px; }
.intro__vision .lede{ font-size:.9375rem; }
.intro__vision strong{ color:var(--navy); }
.footer .brand__name{ font-size:1.05rem; }
.footer .brand__sub{ opacity:.7; }
.footer address .tlink{ color:var(--gold-light); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* progress bar */
.progress{
  position:fixed; top:0; left:0; z-index:120;
  height:2px; width:100%;
  transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-light));
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .btn::before{ transform:scale(1); opacity:0; transition:opacity .001ms; }
  .btn:hover::before{ opacity:1; }
  .btn__ic svg:nth-child(2){ display:none; }
  .btn:hover .btn__ic svg:nth-child(1){ transform:none; opacity:1; }
  .hero__title .ln > span{ transform:none; }
}


/* ==========================================================================
   Arabic / RTL
   ========================================================================== */

/* Translatable strings are marked, not duplicated — the button rewrites them
   in place. display:contents keeps the marker invisible to layout, so a
   converted string behaves exactly as the bare text node did. */
[data-i18n]{ display:contents; }

html[lang="ar"]{
  /* Plex Sans Arabic carries both scripts, so it leads the stack in AR */
  --font-display: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;
  --font-sans:    "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;
  --font-mono:    "IBM Plex Sans Arabic", "IBM Plex Mono", monospace;
  --display-weight: 700;
  --display-track: 0;          /* Arabic must not be tracked */
}
html[lang="ar"] body{ line-height:1.85; }

/* Arabic sits on a taller line than the Latin display sizes allow, and its
   descenders would otherwise be clipped by the headline's reveal mask. */
html[lang="ar"] .display{ line-height:1.34; }
/* the hero headline carries three lines inside a locked box, so Arabic needs
   its own ceiling or the taller line-height pushes it past the fold */
html[lang="ar"] .hero__title{
  font-size:clamp(2.2rem, min(1.3rem + 5.2vw, 9svh), 5.25rem);
  line-height:1.24;
}
html[lang="ar"] .intro__statement{ line-height:1.6; }
html[lang="ar"] .svc__title,
html[lang="ar"] .step__t,
html[lang="ar"] .cap--feature h3,
html[lang="ar"] .case__title,
html[lang="ar"] .cnote h4,
html[lang="ar"] .drawer a{ line-height:1.5; }
html[lang="ar"] .brand__sub{ font-size:.62rem; line-height:1.3; }
html[lang="ar"] .stat-card__l,
html[lang="ar"] .figure__l,
html[lang="ar"] .cap__fig span,
html[lang="ar"] .cta__fact dt,
html[lang="ar"] .footer h3,
html[lang="ar"] .step__meta,
html[lang="ar"] .case__facts dt,
html[lang="ar"] .case__loc{ font-size:.72rem; line-height:1.6; }
html[lang="ar"] .footer__bottom,
html[lang="ar"] .drawer__foot,
html[lang="ar"] .hero__foot{ font-size:.72rem; }
html[lang="ar"] .eyebrow{ font-size:.78rem; }
html[lang="ar"] .marquee__item{ font-size:.85rem; }

/* Figures stay in logical (LTR) order — bidi would otherwise reorder
   "2D + 3D" into "3D + 2D". */
.stat-card__n,
.figure__n,
.cap__fig b,
.phone{ direction:ltr; unicode-bidi:isolate; }
[dir="rtl"] .stat-card__n,
[dir="rtl"] .figure__n,
[dir="rtl"] .cap__fig b{ justify-content:flex-end; text-align:right; }
[dir="rtl"] .figure__n{ display:flex; }

/* Letter-spacing and uppercasing break Arabic shaping — neutralise both
   wherever the Latin design applies them. */
[dir="rtl"] .skip,
[dir="rtl"] .eyebrow,
[dir="rtl"] .brand__sub,
[dir="rtl"] .stat-card__l,
[dir="rtl"] .figure__l,
[dir="rtl"] .figure__n sup,
[dir="rtl"] .svc__no,
[dir="rtl"] .cap__fig span,
[dir="rtl"] .step__n,
[dir="rtl"] .step__meta,
[dir="rtl"] .case__tag,
[dir="rtl"] .case__loc,
[dir="rtl"] .case__facts dt,
[dir="rtl"] .cnote__n,
[dir="rtl"] .cta__fact dt,
[dir="rtl"] .footer h3,
[dir="rtl"] .footer__bottom,
[dir="rtl"] .drawer__foot,
[dir="rtl"] .hero__foot,
[dir="rtl"] .marquee__item{
  letter-spacing:normal;
  text-transform:none;
}
[dir="rtl"] .display,
[dir="rtl"] .hero__title,
[dir="rtl"] .brand__name{ letter-spacing:normal; }
/* Arabic has no italic tradition — lean on colour instead */
[dir="rtl"] .italic,
[dir="rtl"] .intro__statement em{ font-style:normal; }

/* directional decoration */
[dir="rtl"] .progress{ transform-origin:right; }
[dir="rtl"] .figure::after{
  background:linear-gradient(270deg,var(--gold),transparent);
  transform-origin:right;
}
[dir="rtl"] .step::before{ transform-origin:right; }
[dir="rtl"] .tlink{ background-position:100% 100%; }
[dir="rtl"] .tlink svg{ transform:scaleX(-1); }
[dir="rtl"] .tlink:hover svg{ transform:scaleX(-1) translate(3px,-3px); }
[dir="rtl"] .drawer{ clip-path:circle(0% at 44px 44px); }
[dir="rtl"] body.menu-open .drawer{ clip-path:circle(150% at 44px 44px); }
[dir="rtl"] .marquee__track{ animation-direction:reverse; }
[dir="rtl"] .hero__glow{ right:auto; left:-8vw; }
[dir="rtl"] .svc__list li::before{ transform:rotate(45deg); }

/* the hero blueprint is a technical drawing, not a layout — mirror it whole
   so the cage still reads as receding away from the headline */
[dir="rtl"] .hero__canvas svg{ --flip:-1; }
[dir="rtl"] .hero__canvas text{ transform:scaleX(-1); transform-origin:center; }

/* ── language button ───────────────────────────────────────────────────── */
.langbtn{
  display:inline-flex; align-items:center; gap:8px;
  flex:none;
  padding:8px 15px 8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  font-size:.8125rem;
  font-weight:500;
  line-height:1;
  transition:background .4s var(--ease), border-color .4s var(--ease), color .3s;
}
[dir="rtl"] .langbtn{ padding:8px 12px 8px 15px; }
.header.is-stuck .langbtn{ background:rgba(20,54,81,.06); border-color:var(--line); }
.langbtn:hover{ background:rgba(194,161,94,.18); border-color:rgba(194,161,94,.55); color:var(--gold); }
.header.is-stuck .langbtn:hover{ color:var(--gold-deep); }
.langbtn svg{ width:15px; height:15px; opacity:.7; flex:none; }
.langbtn:hover svg{ opacity:1; }
.langbtn__label[lang="ar"]{
  font-family:"Plex Arabic Label","IBM Plex Sans Arabic",sans-serif;
  font-size:.9rem; letter-spacing:normal;
}

.drawer .langbtn{
  justify-self:start;
  margin-top:26px;
  padding:11px 20px 11px 16px;
  font-size:.95rem;
}
[dir="rtl"] .drawer .langbtn{ justify-self:end; padding:11px 16px 11px 20px; }
.drawer .langbtn svg{ width:17px; height:17px; }

/* the swap itself gets a short cross-fade rather than a hard jump */
.i18n-swapping main,
.i18n-swapping .header__bar,
.i18n-swapping .footer,
.i18n-swapping .drawer{
  opacity:.35;
  transition:opacity .16s linear;
}