/* ============================================================
   SANABEL ADVERTISING — main.css
   Design tokens, layout, typography, components
   ============================================================ */

:root{
  /* Ground */
  --color-black:#000000;          /* main site colour */
  --color-green-deep:#1a3b17;     /* logo dark green — surfaces, bands, buttons */
  --color-green:#489a41;          /* logo green — accent, links, rules, icons */
  --color-white:#ffffff;          /* all text */

  /* rgb channels, so every tint is one token away */
  --rgb-green:72,154,65;
  --rgb-green-deep:26,59,23;
  --rgb-black:0,0,0;
  --rgb-white:255,255,255;

  --color-border:rgba(var(--rgb-white),0.12);
  --color-green-border:rgba(var(--rgb-green),0.55);
  --color-text-muted:rgba(var(--rgb-white),0.65);

  /* Fonts */
  /* One family, three roles. Alexandria (Google Fonts, OFL) stands in for the
     brand font Madani Arabic (Namela Type, commercial): same build — geometric
     single-storey a/g, flat terminals, Kufi-style Arabic with round dots,
     100–900 variable, no italics. To switch to licensed Madani later, change
     these three lines and the <link> in each page's <head>. */
  --font-display:"Alexandria",system-ui,sans-serif;
  --font-body:"Alexandria",system-ui,sans-serif;
  --font-mono:"Alexandria",system-ui,sans-serif;

  /* Fluid type scale */
  --text-hero:clamp(2.75rem,8vw,6.75rem);
  --text-section:clamp(1.9rem,4.2vw,3.6rem);
  --text-card:clamp(1.4rem,3vw,2.2rem);
  --text-body:clamp(1rem,1.5vw,1.2rem);
  --text-small:clamp(0.8rem,1vw,0.95rem);
  --text-mono:clamp(0.85rem,1vw,1rem);

  /* Tracking */
  --tracking-tight:-0.02em;
  --tracking-wide:0.08em;
  --tracking-widest:0.2em;

  /* MEASURED, not assumed: the nav is 87px tall in BOTH states -- .is-scrolled
     changes only its background/border, not its height. Rounded up to 88 so the
     sticky filter bar clears it rather than tucking under by a pixel. */
  --nav-h:88px;
  --nav-h-scrolled:88px;
  /* Raise once the client supplies >=2000px masters. Every source on disk is
     capped at 800px today (1080 for 15 slides), so a bigger stage would only
     show upscaling. */
  --lightbox-max:860px;

  --container:1320px;
  --gutter:clamp(1.5rem,5vw,5rem);
}

/* ─── Base ─── */
*{margin:0;padding:0;box-sizing:border-box}
/* The HTML `hidden` attribute is only a browser default (display:none) and any
   class that sets `display` beats it. gallery.js hides the empty "Activations"
   chip and the "See more" button with `hidden`, so without this they stayed on
   screen: an "Activations 0" chip opening a blank grid, and an empty button. */
[hidden]{display:none !important}
html{
  scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* Reserve the scrollbar gutter permanently. The lightbox sets
     body{overflow:hidden}; without this the scrollbar vanishes and every
     position:fixed element (.nav, .cursor) widens by the scrollbar width,
     so the page visibly jumps on open and again on close. Padding the body
     alone cannot fix that -- fixed elements resolve against the viewport,
     not the body box. Safari <16 falls back to the JS compensation in
     js/gallery.js, which self-cancels to 0 wherever this is honoured. */
  scrollbar-gutter:stable;
}
body{
  font-synthesis:none;
  background:var(--color-black);
  color:var(--color-white);
  font-family:var(--font-body);
  font-weight:300;
  font-size:var(--text-body);
  line-height:1.65;
  overflow-x:clip;   /* clip, not hidden: `hidden` makes body a scroll container,
                        which would capture position:sticky descendants. */
  cursor:none;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:none}

/* Global grain overlay — removed.
   Was: position:fixed; inset:0; filter:url(#noise); mix-blend-mode:overlay.
   A full-viewport SVG turbulence filter under a blend mode keeps the whole page
   off the fast compositing path while scrolling, and it was set to opacity 0.02
   — invisible in practice. Not worth a single frame. */

.container{
  width:100%;max-width:var(--container);
  margin-inline:auto;padding-inline:var(--gutter);
}

/* ─── Skip link ─── */
.skip-link{
  position:absolute;inset-inline-start:1rem;top:-3rem;z-index:10000;
  background:var(--color-green-deep);color:var(--color-white);
  padding:.6rem 1.2rem;font-weight:600;border-radius:4px;
  transition:top .3s ease;
}
.skip-link:focus{top:1rem}

/* ─── Focus visibility ─── */
:focus-visible{
  outline:3px solid var(--color-green);
  outline-offset:3px;
}

/* ============================================================
   SECTION BACKGROUNDS
   ============================================================ */
.section--black-grid{
  background-color:var(--color-black);
  background-image:
    linear-gradient(rgba(var(--rgb-white),0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--rgb-white),0.03) 1px,transparent 1px);
  background-size:60px 60px;
}
.section--green{background-color:var(--color-green-deep)}
.section--black{background-color:var(--color-black)}
.section--glow{position:relative;overflow:hidden}
.section--glow::after{
  content:"";position:absolute;top:0;inset-inline-start:50%;transform:translateX(-50%);
  width:60%;height:40%;
  background:radial-gradient(ellipse,rgba(var(--rgb-green),0.10) 0%,transparent 70%);
  pointer-events:none;z-index:0;
}

section{position:relative;padding-block:clamp(3.5rem,8vh,6.5rem)}
/* The nav is fixed, so the first section on every inner page has to clear it.
   The hero does this itself via .hero padding-top; nothing else did, and once
   the section rhythm was tightened the first eyebrow slid under the logo. */
main > section:first-child:not(.hero){padding-top:clamp(7.5rem,15vh,10rem)}

/* ─── Section number depth layer ─── */
.section-number{
  position:absolute;top:-2vw;inset-inline-start:2vw;z-index:0;
  font-family:var(--font-display);font-weight:700;
  font-size:35vw;line-height:1;
  color:rgba(var(--rgb-green),0.16);
  pointer-events:none;user-select:none;
}

/* ─── Eyebrow / tags ─── */
.eyebrow{
  font-family:var(--font-body);font-weight:600;
  color:var(--color-green);
  text-transform:uppercase;
  letter-spacing:var(--tracking-widest);
  font-size:var(--text-small);
  margin-bottom:1.2rem;
}

/* ─── Section title ─── */
.section__title{
  font-family:var(--font-display);font-weight:900;
  font-size:var(--text-section);
  line-height:1.05;letter-spacing:var(--tracking-tight);
  color:var(--color-white);
  margin-bottom:1.5rem;
  perspective:600px;
}

/* ============================================================
   BRAND LOGO (CSS wordmark — swap for /assets/logo when available)
   ============================================================ */
.brand-logo{display:inline-flex;align-items:center;gap:.6rem;line-height:1}
.brand-logo__icon{height:2.4em;width:auto;flex:none;display:block}
.brand-logo__text{display:inline-flex;flex-direction:column}
.brand-logo__name{
  font-family:var(--font-display);font-weight:900;
  color:var(--color-white);font-size:1.6rem;letter-spacing:.01em;
}
.brand-logo__sub{
  font-family:var(--font-body);font-weight:600;
  color:var(--color-green);
  font-size:.62rem;letter-spacing:.45em;text-transform:uppercase;
  align-self:stretch;text-align:justify;
}
.brand-logo--preloader{flex-direction:column;gap:1rem}
.brand-logo--preloader .brand-logo__icon{height:64px}
.brand-logo--preloader .brand-logo__name{font-size:2.6rem}
.brand-logo--preloader .brand-logo__sub{font-size:.8rem}
.brand-logo--nav .brand-logo__name{font-size:1.4rem}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--color-green-deep);color:var(--color-white);
  font-family:var(--font-body);font-weight:600;
  letter-spacing:var(--tracking-wide);
  padding:16px 40px;border:2px solid var(--color-green);
  border-radius:2px;
  transition:background .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
/* White on --color-green is only 3.52:1 (AA needs 4.5:1 and this text never
   qualifies as large). Keeping the deep-green fill holds white at 12.49:1. */
.btn-primary:hover{
  background:var(--color-green-deep);
  border-color:var(--color-white);
  box-shadow:0 0 0 1px var(--color-green),0 10px 26px rgba(var(--rgb-green),0.22);
}
.btn-primary:active,.btn-secondary:active{transform:translateY(1px)}
.btn-arrow{display:inline-block;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.btn-primary:hover .btn-arrow{transform:translateX(4px)}

.btn-secondary{
  display:inline-flex;align-items:center;gap:.6rem;
  background:transparent;color:var(--color-white);
  font-weight:600;letter-spacing:var(--tracking-wide);
  padding:15px 38px;border:1px solid rgba(var(--rgb-white),0.4);
  border-radius:2px;transition:border-color .3s ease,color .3s ease;
}
.btn-secondary:hover{border-color:var(--color-green);color:var(--color-green)}

.btn-link{
  color:var(--color-green);
  border-bottom:1px solid rgba(var(--rgb-green),0.55);
  padding-bottom:2px;transition:border-color .3s;
  font-weight:600;
}
.btn-link:hover{border-color:var(--color-green)}

.pill{
  display:inline-block;
  border:1px solid var(--color-green-border);
  color:var(--color-green);
  padding:.4rem 1rem;border-radius:999px;
  font-size:var(--text-small);font-weight:600;
  letter-spacing:var(--tracking-wide);
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav{
  position:fixed;top:0;inset-inline-start:0;inset-inline-end:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.3rem var(--gutter);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s ease,border-color .4s ease,padding .4s ease;
}
.nav.is-scrolled{
  /* Was backdrop-filter:blur(20px). A blur on a fixed bar re-filters everything
     scrolling beneath it every frame — the most expensive thing on the page
     during a scroll. Opaque black reads the same on a black site, for free. */
  background:#000;
  border-bottom:1px solid rgba(var(--rgb-green),0.30);
  padding-block:.9rem;
}
.nav__links{display:flex;gap:2.2rem}
.nav__link{
  position:relative;font-weight:400;font-size:.95rem;
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
  padding:.3rem 0;
}
.nav__link::after{
  content:"";position:absolute;inset-inline-start:0;bottom:-2px;
  width:100%;height:2px;background:var(--color-green);
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__link.is-active{color:var(--color-white)}
.nav__cta{padding:11px 26px}
.nav__burger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;padding:6px;
}
.nav__burger span{width:26px;height:2px;background:var(--color-white);transition:.3s}

/* Mobile overlay */
.nav__overlay{
  position:fixed;inset:0;z-index:999;
  background:var(--color-black);
  display:flex;align-items:center;justify-content:center;
  clip-path:circle(0% at calc(100% - 3rem) 3rem);
  transition:clip-path .6s cubic-bezier(.76,0,.24,1);
  pointer-events:none;
}
.nav__overlay.is-open{clip-path:circle(150% at calc(100% - 3rem) 3rem);pointer-events:auto}
.nav__overlay-links{display:flex;flex-direction:column;gap:1.5rem;text-align:center}
.nav__overlay-links a{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2rem,9vw,4rem);color:var(--color-white);
}
.nav__overlay-links a:hover{color:var(--color-green)}

/* ============================================================
   HERO
   ============================================================ */
.hero{min-height:100dvh;display:flex;align-items:center;padding-top:clamp(7rem,12vh,9rem)}
.hero__bg{
  position:absolute;inset:-8% 0;z-index:0;
  background:
    radial-gradient(120% 90% at 72% 22%, rgba(var(--rgb-green-deep),0.55) 0%, var(--color-black) 42%, var(--color-black) 100%),
    var(--color-black);
  background-size:cover;background-position:center;
}
/* HERO ART IS A CLIENT BLOCKER -- deliberately unset.
   The brief asks for "project images or a short showreel". Neither exists:
     - assets/video/story-reel.mp4 is 720x1280 PORTRAIT, a 14s vertical social
       cut. A full-bleed landscape hero crops it to a sliver and upscales 2x.
     - every gallery still is <=830px (1.7x upscale at 1440) AND carries the
       CLIENT's own branding. A competitor's logo behind "40 Years of Creative
       Legacy" is worse than no photo at all -- that was tried and reverted.
   Needs one landscape asset >=1920px with no third-party marks in frame.
   Drop it in here as a second background-image layer; nothing else changes. */
.hero__bg--photo{ /* intentionally empty until that asset exists */ }

.hero__overlay{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(60% 50% at 50% 8%, rgba(var(--rgb-green),0.10), transparent 70%),
    radial-gradient(80% 60% at 12% 100%, rgba(var(--rgb-green),0.12), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.78) 100%);
}
.hero__content{position:relative;z-index:2;max-width:min(960px,92%)}
.eyebrow__tick{
  display:inline-block;width:28px;height:1px;background:var(--color-green);
  margin-inline-end:.85rem;vertical-align:middle;
}
.hero__eyebrow{display:flex;align-items:center}
.hero__title{
  font-family:var(--font-display);font-weight:900;
  font-size:var(--text-hero);line-height:1.0;
  letter-spacing:var(--tracking-tight);
  color:var(--color-white);
  margin:.6rem 0 1.9rem;
}
.hero__title-line{display:block;overflow:hidden;padding-bottom:var(--split-pad)}
.hero__title-line--accent{color:var(--color-green)}
.hero__subline{
  max-width:46ch;color:var(--color-white);
  font-weight:300;font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.7;
  margin-bottom:2.6rem;
}
.hero__cta{display:flex;align-items:center;gap:clamp(1.4rem,3vw,2.4rem);flex-wrap:wrap}
.hero__cta-link .btn-arrow{display:inline-block;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.hero__cta-link:hover .btn-arrow{transform:translateX(5px)}
.hero__scroll{
  position:absolute;bottom:2.2rem;inset-inline-start:var(--gutter);
  z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;
  font-size:.62rem;letter-spacing:var(--tracking-widest);text-transform:uppercase;
  color:var(--color-text-muted);transition:color .3s ease;
}
.hero__scroll:hover{color:var(--color-green)}
.hero__scroll-line{display:block;width:1px;height:44px;background:var(--color-green);transform-origin:top;opacity:.7;margin-inline-start:.4rem}

/* ============================================================
   OUR STORY
   ============================================================ */
.story__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
.story__body{margin:1.5rem 0 2.5rem;color:var(--color-white);max-width:38ch}
.story__stats{display:flex;gap:2.5rem;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:.3rem}
.stat__num{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2rem,4vw,3.2rem);color:var(--color-green);line-height:1;
}
.stat__num--symbol{font-family:var(--font-body)}
.stat__label{
  font-size:.72rem;letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--color-text-muted);
}
/* story-reel.mp4 is 720x1280 (0.56). A 4/5 box with object-fit:cover threw away
   44% of the frame height -- including the text burned into the reel. The box is
   pulled closer to the source ratio so `contain` letterboxes only slightly. */
.story__visual{position:relative;aspect-ratio:3/4}
.story__media{
  position:absolute;inset:0;overflow:hidden;
  background:var(--color-black);
  clip-path:inset(0 0 0 0);
}
.story__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(0,0,0,0) 55%,rgba(0,0,0,0.45));
}
/* contain, not cover: the whole frame must be visible. .story__media is already
   --color-black, so the letterbox reads as the page, not as bars. */
.story__video{width:100%;height:100%;object-fit:contain;display:block;margin-inline:auto}
.story__frame{color:var(--color-green);position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);pointer-events:none;z-index:2}

/* ============================================================
   OUR VALUE
   ============================================================ */
.value{text-align:center;background-color:var(--color-black)}
.value__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.value__ghost{
  position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-50%);
  font-family:var(--font-display);font-weight:900;font-size:30vw;
  color:rgba(var(--rgb-green),0.12);z-index:0;pointer-events:none;white-space:nowrap;
}
.value__headline{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2.2rem,7vw,6rem);line-height:1.05;
  color:var(--color-white);margin-bottom:2rem;
}
.value__word{display:block}
.value__word--accent{color:var(--color-green)}
.value__word .dot{display:inline-block}
.value__rule{
  display:block;width:120px;height:2px;
  background:var(--color-green);transform-origin:left;transform:scaleX(0);
  margin:1.5rem 0;
}
.value__body{max-width:50ch;margin-bottom:2.5rem;color:var(--color-white)}
.value__big{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(5rem,12vw,11rem);line-height:1;color:var(--color-green);
}
.value__big-sub{
  font-family:var(--font-display);
  font-size:clamp(1.2rem,2.5vw,2rem);color:var(--color-white);margin-bottom:2.5rem;
}

/* ============================================================
   WHY CHOOSE
   ============================================================ */
.why__head{position:relative;z-index:1;max-width:700px;margin-bottom:3.5rem}
.why__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;
}
.card{
  position:relative;
  background:var(--color-green-deep);
  border:1px solid rgba(var(--rgb-white),0.10);
  border-inline-start:3px solid var(--color-green);
  padding:2.5rem 2rem;border-radius:4px;
  transition:transform .4s ease,border-color .4s ease,box-shadow .4s ease;
}
.card::before{
  content:"";position:absolute;top:-1px;inset-inline-start:-1px;width:48px;height:3px;
  background:var(--color-green);transition:width .4s ease;
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:0 22px 48px rgba(0,0,0,0.5);
}
.card:hover::before{width:calc(100% + 2px)}
.card__icon{color:var(--color-green);width:48px;height:48px;margin-bottom:1.5rem}
.card__title{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-card);color:var(--color-white);
  line-height:1.15;margin-bottom:1rem;
}
.card__body{color:var(--color-white);font-size:1rem;margin-bottom:1.5rem}
.card__stat{
  font-family:var(--font-mono);font-size:.85rem;
  color:var(--color-white);letter-spacing:.04em;
}

/* ============================================================
   SERVICES — horizontal full-bleed reel (native scroll right)
   ============================================================ */
.services__intro{position:relative;z-index:1;max-width:760px;margin-bottom:clamp(2.5rem,5vw,4rem)}
.services__sub{color:var(--color-text-muted);margin-top:1rem;font-size:1.05rem;max-width:42ch}
/* ============================================================
   SERVICES GRID
   The horizontal reel is gone. It put a horizontal scroll container mid-page
   (the exact ancestor type that breaks position:sticky), it could not hold the
   five Digital sub-cards at a readable size, its drag handler swallowed clicks
   on capture -- which would have put the client's primary CTA behind a
   drag-detection heuristic -- and a native scrollLeft reel has inconsistent
   sign conventions across engines under dir="rtl".
   ============================================================ */
.services__grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem,2.2vw,1.8rem);
}
.service-card--wide{grid-column:1/-1}

.service-card{
  container-type:inline-size;
  position:relative;display:flex;flex-direction:column;
  border-radius:8px;overflow:hidden;
  background:var(--color-green-deep);
  border:1px solid rgba(var(--rgb-white),0.10);
  border-block-start:3px solid var(--color-green);
  transition:border-color .4s ease,box-shadow .4s ease;
}
.service-card:hover{box-shadow:0 22px 48px rgba(var(--rgb-black),0.55)}
.service-card__media{overflow:hidden;aspect-ratio:16/10}
.service-card__img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) contrast(1.02);
  transition:transform .6s cubic-bezier(.16,1,.3,1),filter .4s ease;
}
.service-card:hover .service-card__img{transform:scale(1.04);filter:saturate(1.02) contrast(1.05)}
.service-card__content{
  position:relative;padding:clamp(1.3rem,5cqw,2.2rem);
  display:flex;flex-direction:column;gap:.7rem;align-items:start;
}
.service-card__num{
  position:absolute;top:clamp(.4rem,3cqw,1rem);inset-inline-end:clamp(1rem,5cqw,2rem);
  font-family:var(--font-display);font-weight:900;font-size:clamp(3rem,14cqw,5rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px rgba(var(--rgb-green),0.45);pointer-events:none;
}
.service-card__icon{color:var(--color-green);width:32px;height:32px;margin-bottom:.4rem;opacity:.9}
.service-card__title{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.5rem,7cqw,2.3rem);color:var(--color-white);line-height:1.02;
  letter-spacing:var(--tracking-tight);
}
.service-card__subtitle{color:var(--color-green);font-weight:600;letter-spacing:var(--tracking-wide);font-size:clamp(.85rem,3cqw,1.02rem)}
.service-card__body{color:var(--color-white);max-width:48ch;font-size:clamp(.85rem,3cqw,1rem);line-height:1.55}
.service-card__meta{margin:.2rem 0}
.service-card__cta{margin-top:.5rem}

.service-subgrid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.7rem,1.5vw,1.2rem);
  padding:0 clamp(1.3rem,5cqw,2.2rem) clamp(1.3rem,5cqw,2.2rem);
  list-style:none;
}
.subcard{
  border:1px solid var(--color-border);
  border-inline-start:2px solid var(--color-green-border);
  border-radius:4px;padding:1rem .9rem;
  background:rgba(var(--rgb-black),0.30);
  transition:border-color .35s ease,background .35s ease;
}
.subcard:hover{border-color:var(--color-green-border);border-inline-start-color:var(--color-green);background:rgba(var(--rgb-black),0.5)}
.subcard__icon{width:26px;height:26px;color:var(--color-green);margin-bottom:.55rem}
.subcard__title{font-family:var(--font-body);font-weight:600;color:var(--color-white);font-size:.98rem;letter-spacing:var(--tracking-wide);margin-bottom:.3rem}
.subcard__body{color:var(--color-text-muted);font-size:.85rem;line-height:1.45}

/* ============================================================
   TEAM — Fields of Gold
   ============================================================ */
.team{
  background:linear-gradient(to bottom,var(--color-black),var(--color-black));
  text-align:center;overflow:hidden;
}
.team__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.team__headline{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2rem,6vw,5rem);line-height:1.1;color:var(--color-white);margin-bottom:1.5rem;
}
.team__body{max-width:46ch;color:var(--color-white)}
.team__est{
  font-family:var(--font-mono);letter-spacing:.3em;
  color:var(--color-green);font-size:.9rem;margin-top:1rem;
}
.team__wheat{color:rgba(var(--rgb-green),0.70);
  position:absolute;bottom:0;inset-inline-start:0;width:100%;height:30vh;z-index:1;pointer-events:none;
}

/* ============================================================
   TRUSTED BY — marquee
   ============================================================ */
.trusted{overflow:hidden}
.trusted__head{text-align:center;max-width:700px;margin:0 auto 3.5rem}
.trusted__sub{color:var(--color-text-muted);margin-top:1rem}
@keyframes marquee-scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

.marquee{
  overflow:hidden;width:100%;padding:1.5rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
}
.marquee__inner{
  display:flex;align-items:center;
  gap:clamp(2.75rem,6vw,5rem);
  width:max-content;will-change:transform;
  /* Pinned LTR. Under dir=rtl the flex row would reverse, which changes WHICH
     duplicated half is on screen and desynchronises the -50% seam. Logo order
     is not language-dependent, so pinning costs nothing. */
  direction:ltr;
  animation:marquee-scroll 72s linear infinite;
  animation-play-state:paused;            /* started by the IO gate in main.js */
}
.marquee--reverse .marquee__inner{
  animation:marquee-scroll 72s linear infinite reverse;
}
.trusted.is-ready .marquee__inner{animation-play-state:running}
.marquee:hover .marquee__inner{animation-play-state:paused}

/* No chip: the marks sit straight on the black page. 26 of the 29 are already
   white with the shape in the alpha channel; the three dark ones are inverted
   in prep_brand.py so they read here too. */
.marquee__item{
  display:flex;align-items:center;justify-content:center;flex:none;
  height:clamp(60px,8vw,84px);padding:0;   /* spacing lives entirely in the gap */
}
/* Monochrome at rest, own colours on hover. NOTE: 26 of the 29 marks are
   already white-on-alpha (see README), so for those grayscale() is a no-op and
   the whole visible change is the opacity step. A real colour reveal across the
   set needs a re-export from assets/logos/, not a CSS change. */
.marquee__item img{
  max-height:100%;max-width:170px;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.55;
  transition:filter .45s ease,opacity .45s ease,transform .45s ease;
}
.marquee__item:hover img{filter:grayscale(0);opacity:1;transform:scale(1.05)}
.marquee__item:hover img{opacity:1;transform:scale(1.05)}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background-color:var(--color-black)}
.contact__s{
  position:absolute;top:50%;inset-inline-end:-2vw;transform:translateY(-50%);
  font-family:var(--font-display);font-weight:900;font-size:55vh;line-height:1;
  color:rgba(var(--rgb-green),0.14);z-index:0;pointer-events:none;
}
.contact__grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:start;
}
.contact__form{margin-top:2rem;display:flex;flex-direction:column;gap:1.8rem}
.field{position:relative;display:flex;flex-direction:column;gap:.5rem}
.field label{
  font-size:.72rem;text-transform:uppercase;letter-spacing:var(--tracking-widest);
  color:var(--color-green);font-weight:600;
}
.field input,.field select,.field textarea{
  background:transparent;border:none;
  border-bottom:1px solid rgba(var(--rgb-white),0.2);
  color:var(--color-white);font-family:var(--font-body);
  font-size:1.05rem;padding:.7rem 0;width:100%;
  transition:border-color .3s ease,box-shadow .3s ease,background-color .3s ease;
}
.field select{cursor:none}
.field select option{background:var(--color-black);color:var(--color-white)}
.field input::placeholder,.field textarea::placeholder{color:rgba(var(--rgb-white),0.35)}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{
  outline:none;                       /* replaced, not removed -- see box-shadow */
  border-bottom-color:var(--color-green);
  box-shadow:0 2px 0 0 var(--color-green),0 0 0 3px rgba(var(--rgb-green),0.22);
  background:rgba(var(--rgb-green),0.06);
}
.field:focus-within label{color:var(--color-green)}
.field textarea{resize:vertical}
.field.has-error input,.field.has-error textarea{border-bottom-color:var(--color-white);border-bottom-width:2px}
.field__error{color:var(--color-white);font-weight:600;font-size:.8rem;min-height:1rem}
.contact__submit{margin-top:.5rem;align-self:flex-start}
.field__opt{color:var(--color-text-muted);font-weight:400;text-transform:none;letter-spacing:0}
.contact__status{
  margin-top:1rem;font-size:.92rem;line-height:1.5;
  color:var(--color-green);max-width:46ch;
}
.contact__status.is-bad{color:var(--color-white)}
.contact__status a{color:var(--color-green);border-bottom:1px solid rgba(var(--rgb-green),0.55)}
.contact__status a:hover{border-bottom-color:var(--color-green)}

.contact__info{padding-top:3.5rem}
.contact__lead{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,2.5vw,2.2rem);color:var(--color-white);line-height:1.2;
}
.contact__list{display:flex;flex-direction:column;gap:1.1rem;margin:1rem 0 2rem}
.contact__list li{display:flex;align-items:center;gap:.9rem;font-family:var(--font-mono);font-size:.95rem}
/* The icons became inline SVGs (viewBox 24) but kept the old emoji rule;
   an SVG with no width/height ignores font-size and fills its container. */
.contact__ico{width:1.2em;height:1.2em;flex:none;color:var(--color-green)}
.contact__list a:hover{color:var(--color-green)}
.contact__ig{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-mono);font-size:.95rem;color:var(--color-white);
  margin-bottom:1.2rem;transition:color .3s ease;
}
.contact__ig svg{width:22px;height:22px;color:var(--color-green);transition:transform .3s ease}
.contact__ig:hover{color:var(--color-green)}
.contact__ig:hover svg{transform:scale(1.12)}
.contact__social{display:flex;gap:1rem}
.contact__social a{
  width:42px;height:42px;border:1px solid var(--color-border);border-radius:50%;
  display:grid;place-items:center;font-size:.8rem;font-weight:600;
  transition:.3s;
}
.contact__social a:hover{border-color:var(--color-green);color:var(--color-green)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{padding-block:4rem 2rem}
.footer__grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2rem;
  padding-bottom:3rem;border-bottom:1px solid var(--color-border);
}
.footer__tag{
  font-family:var(--font-display);
  color:var(--color-green);margin-top:1rem;font-size:1.2rem;
}
.footer__nav,.footer__social{display:flex;flex-direction:column;gap:.7rem}
.footer__nav a:hover,.footer__social a:hover{color:var(--color-green)}
.footer__social a{display:inline-flex;align-items:center;gap:.5rem}
.footer__ig-glyph{width:18px;height:18px;color:var(--color-green)}
.footer__bar{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
  padding-top:2rem;font-size:.85rem;color:var(--color-text-muted);
  font-family:var(--font-mono);
}

/* ============================================================
   BTL GALLERY
   ============================================================ */
.btl{position:relative}
.btl__head{
  display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:end;
  margin-bottom:3rem;
}
.btl__head-right{
  color:var(--color-text-muted);max-width:42ch;
  padding-bottom:.4rem;font-size:1.05rem;
}
.service-card__link{margin-top:.5rem;display:inline-block}

/* Category filter chips */
/* Sticky under the fixed nav. Uses --nav-h-scrolled, not --nav-h: by the time
   this bar can stick, main.js has already added .is-scrolled (threshold 80px)
   and the nav has shrunk -- the tall value would leave a visible gap.
   Opaque --color-black, NOT background:inherit: inherit would copy the
   section--black-grid background-image and re-origin it to the sticky box, so
   the grid lines would slide out of alignment as you scroll. */
.events__filters{
  position:sticky;
  top:calc(var(--nav-h-scrolled) + .25rem);
  z-index:20;
  display:flex;flex-wrap:wrap;gap:.6rem;
  margin-bottom:2rem;padding-block:.8rem;
  background:var(--color-black);
  border-bottom:1px solid transparent;
  transition:border-color .35s ease;
}
.events__filters.is-stuck{border-bottom-color:rgba(var(--rgb-green),0.28)}
.btl__grid{scroll-margin-top:calc(var(--nav-h-scrolled) + 5rem)}
.events__chip{
  display:inline-flex;align-items:center;gap:.5rem;
  background:transparent;color:var(--color-text-muted);
  border:1px solid var(--color-border);border-radius:999px;
  padding:.55rem 1.25rem;font-size:.9rem;font-weight:600;
  letter-spacing:.02em;
  transition:color .3s ease,border-color .3s ease,background .3s ease;
}
.events__chip{transition:color .3s ease,border-color .3s ease,background .3s ease,transform .25s ease}
.events__chip:hover{color:var(--color-white);border-color:var(--color-text-muted);transform:translateY(-2px)}
.events__chip.is-active{
  background:var(--color-green-deep);color:var(--color-white);border-color:var(--color-green);
}
.events__chip-count{
  font-family:var(--font-mono);font-size:.72rem;opacity:.6;
}
.events__chip.is-active .events__chip-count{opacity:.8}

/* Empty state for categories awaiting content */
.events__empty{
  text-align:center;max-width:46ch;margin:2rem auto 0;
  padding:clamp(3rem,8vw,6rem) 0;
}
.events__empty-title{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,3vw,2.2rem);color:var(--color-white);margin-bottom:.8rem;
}
.events__empty-body{color:var(--color-text-muted);margin-bottom:1.5rem}

/* See more */
.gallery__more{
  display:block;margin:2.5rem auto 0;
  background:transparent;color:var(--color-green);
  border:1px solid var(--color-green-border);border-radius:999px;
  padding:.85rem 2.2rem;font-family:var(--font-body);font-weight:600;
  letter-spacing:.04em;font-size:.95rem;cursor:none;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.gallery__more:hover{background:var(--color-green-deep);color:var(--color-white);border-color:var(--color-green)}
.gallery__more:active{transform:translateY(1px)}

/* Justified rows: equal-height rows, widths by aspect ratio (JS-sized).
   object-fit:cover into AR-matched boxes = full image, no white, no crop. */
.btl__grid{
  display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;
}
.btl__tile{
  flex:0 0 auto;margin:0;padding:0;border:none;background:var(--color-green-deep);
  position:relative;overflow:hidden;border-radius:4px;cursor:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease;
  /* fallback aspect before JS sizes it (prevents CLS) */
  width:100%;aspect-ratio:var(--ar,1.3);
}
.btl__tile:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,0.5);z-index:1}
.btl__grid.is-justified .btl__tile{width:auto;aspect-ratio:auto}

/* horizontal scrolling row (Events) */
.btl__grid.is-row{
  flex-wrap:nowrap;align-items:flex-start;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  padding:8px 0 1.1rem;scroll-padding-left:var(--gutter);
  scrollbar-width:thin;scrollbar-color:var(--color-green-border) rgba(var(--rgb-white),0.08);
  overscroll-behavior-x:contain;
}
.btl__grid.is-row .btl__tile{scroll-snap-align:start}
.btl__grid.is-row::-webkit-scrollbar{height:6px}
.btl__grid.is-row::-webkit-scrollbar-track{background:rgba(var(--rgb-white),0.08);border-radius:3px}
.btl__grid.is-row::-webkit-scrollbar-thumb{background:var(--color-green-border);border-radius:3px}
.btl__grid.is-row::-webkit-scrollbar-thumb:hover{background:var(--color-green)}
.btl__tile img{
  width:100%;height:100%;display:block;border-radius:4px;object-fit:cover;object-position:center;
  filter:saturate(0.9) contrast(1.02);
  transition:transform .5s cubic-bezier(.16,1,.3,1),filter .4s ease;
}
.btl__tile::after{
  content:"";position:absolute;inset:0;border-radius:4px;
  background:linear-gradient(to top,rgba(0,0,0,0.55),rgba(0,0,0,0.15));
  opacity:1;transition:opacity .4s ease;pointer-events:none;
}
.btl__tile::before{
  content:"";position:absolute;top:10px;inset-inline-end:10px;z-index:2;
  width:0;height:2px;background:var(--color-green);
  transition:width .4s cubic-bezier(.16,1,.3,1);pointer-events:none;
}
.btl__tile:hover img,.btl__tile:focus-visible img{transform:scale(1.05);filter:saturate(1.05) contrast(1.05)}
.btl__tile:hover::after,.btl__tile:focus-visible::after{opacity:.25}
.btl__tile:hover::before,.btl__tile:focus-visible::before{width:36px}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed;inset:0;z-index:10002;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.94);   /* no backdrop-filter: 94% opaque over black already
                                    hides everything; the blur only costs a frame. */
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;
  padding:clamp(1rem,4vw,3rem);
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox__stage{
  max-width:min(94vw,var(--lightbox-max));max-height:90vh;margin:0;
  display:flex;align-items:center;justify-content:center;
}
.lightbox__img{
  max-width:100%;max-height:90vh;width:auto;height:auto;
  /* No frame: on a 94%-opaque black backdrop a rounded, bordered, shadowed
     image reads as a widget rather than a gallery. */
  border-radius:2px;
  transform:scale(.96);opacity:0;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .3s ease;
}
.lightbox.is-open .lightbox__img{transform:scale(1);opacity:1}
.lightbox__close,.lightbox__nav{
  position:absolute;z-index:2;background:transparent;border:1px solid var(--color-border);
  color:var(--color-white);width:54px;height:54px;border-radius:50%;
  font-size:1.4rem;line-height:1;display:grid;place-items:center;
  transition:border-color .3s ease,color .3s ease,background .3s ease;
}
.lightbox__close:hover,.lightbox__nav:hover{border-color:var(--color-green);color:var(--color-green)}
.lightbox__close{top:clamp(1rem,3vw,2rem);inset-inline-end:clamp(1rem,3vw,2rem);font-size:1.1rem}
.lightbox__nav{top:50%;transform:translateY(-50%);font-size:2rem}
.lightbox__nav--prev{inset-inline-start:clamp(.5rem,2vw,2rem)}
.lightbox__nav--next{inset-inline-end:clamp(.5rem,2vw,2rem)}
.lightbox__counter{
  position:absolute;bottom:clamp(1rem,3vw,2rem);inset-inline-start:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:.85rem;color:var(--color-green);letter-spacing:.15em;
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor{
  /* must out-stack every overlay (.lightbox 10002, .preloader 9999,
     .nav__overlay 999): body sets cursor:none, so if this paints under
     an overlay the visitor has no pointer at all. pointer-events:none
     below means it can never intercept a click. */
  position:fixed;top:0;left:0;z-index:10100;
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(var(--rgb-green),0.80);background:transparent;
  pointer-events:none;transform:translate(-50%,-50%);
  will-change:transform;
  transition:width .3s ease,height .3s ease,background-color .3s ease,border-color .3s ease;
}
.cursor-dot{
  position:fixed;top:0;left:0;z-index:10101;
  width:5px;height:5px;border-radius:50%;
  background:var(--color-green);
  pointer-events:none;transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor.is-hover{
  width:56px;height:56px;
  background:rgba(var(--rgb-green),0.22);border-color:var(--color-green);
}
/* Fallback: if a page ships without the custom-cursor divs, restore the real
   pointer. Without this, cursor:none below leaves the page with no pointer. */
body:not(:has(.cursor)),
body:not(:has(.cursor)) button,
body:not(:has(.cursor)) a,
body:not(:has(.cursor)) .field select,
body:not(:has(.cursor)) .btl__tile{cursor:auto}
@media (hover:none){.cursor,.cursor-dot{display:none}body,button,a,.field select{cursor:auto}}

/* ============================================================
   WORK CARDS  (work.html + homepage #work)
   ============================================================ */
.work__grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem,2.2vw,2rem);
}
.work__more{margin-top:clamp(1.6rem,3vw,2.6rem);display:flex;justify-content:center}

.work-card{
  container-type:inline-size;
  position:relative;display:block;overflow:hidden;border-radius:6px;
  background:var(--color-green-deep);
  border:1px solid rgba(var(--rgb-white),0.10);
  aspect-ratio:4/3;
  transition:border-color .4s ease,box-shadow .4s ease;
}
.work-card:hover,.work-card:focus-visible{
  border-color:var(--color-green-border);
  box-shadow:0 22px 48px rgba(var(--rgb-black),0.55);
}
.work-card__media{position:absolute;inset:0}
.work-card__media img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) contrast(1.02);
  transition:transform .6s cubic-bezier(.16,1,.3,1),filter .4s ease;
}
.work-card:hover .work-card__media img,
.work-card:focus-visible .work-card__media img{transform:scale(1.045);filter:saturate(1.02) contrast(1.05)}

/* Identity bar is ALWAYS visible. A card that shows nothing until hover is
   unusable on touch and invisible to a scanning eye; the hover layer only
   adds detail. */
.work-card__bar{
  position:absolute;inset-inline:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;gap:.15rem;
  padding:clamp(.9rem,4cqw,1.5rem);
  text-align:start;
  background:linear-gradient(to top,rgba(var(--rgb-black),.92),rgba(var(--rgb-black),.55) 60%,transparent);
  transition:opacity .3s ease;
}
.work-card__kicker{
  font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--color-green);
}
.work-card__client{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.2rem,5cqw,1.9rem);color:var(--color-white);line-height:1.05;
}
.work-card__reveal{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;justify-content:flex-end;gap:.7rem;
  padding:clamp(.9rem,4cqw,1.5rem);
  text-align:start;
  background:linear-gradient(to top,rgba(var(--rgb-black),.94) 35%,rgba(var(--rgb-green-deep),.72));
  opacity:0;transform:translateY(14px);
  transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
.work-card:hover .work-card__reveal,
.work-card:focus-visible .work-card__reveal{opacity:1;transform:translateY(0)}
.work-card:hover .work-card__bar,
.work-card:focus-visible .work-card__bar{opacity:0}

.work-card__summary{color:var(--color-white);font-size:clamp(.85rem,3cqw,1rem);line-height:1.5;max-width:44ch}
.work-card__facts{display:flex;flex-wrap:wrap;gap:.45rem}
.work-card__fact{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-green);border:1px solid var(--color-green-border);
  border-radius:999px;padding:.25rem .7rem;
}
.work-card__cta{
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--color-green);font-weight:600;letter-spacing:var(--tracking-wide);
  border-bottom:1px solid var(--color-green-border);padding-bottom:2px;align-self:start;
}
.work-card:hover .work-card__cta .btn-arrow{transform:translateX(4px)}

/* Touch has no hover: show the detail statically instead of hiding it. */
@media (hover:none){
  .work-card{aspect-ratio:auto}
  .work-card__media{position:relative;aspect-ratio:16/10}
  .work-card__bar{position:static;background:none;padding-bottom:.3rem}
  .work-card__reveal{position:static;opacity:1;transform:none;background:none;padding-top:0}
  .work-card:hover .work-card__bar{opacity:1}
}

/* ============================================================
   STATS BAND / CASE STUDY / SERVICES BRIEF
   ============================================================ */
.stats{padding:clamp(3rem,7vw,5.5rem) 0}
.stats__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1.5rem,4vw,3rem);text-align:center;
}
.stats .stat{align-items:center}

.case__inner{max-width:60ch;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.case__body{color:var(--color-text-muted);font-size:var(--text-body);line-height:1.7}
.case__facts{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}

.card-grid--services{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}

/* Screen-reader-only. Used for the client-name list behind the logo marquee,
   which is aria-hidden because it duplicates every logo twice. */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ============================================================
   RTL OVERRIDES
   Only the rules that have NO logical-property equivalent live here; the
   ~19 directional declarations elsewhere were rewritten to inset-inline-*,
   margin-inline-* and text-align:start/end, which are no-ops under LTR.
   Kept in main.css rather than a fourth stylesheet: a separate file would add
   a render-blocking request and another cache-busted reference per page for
   about forty lines.
   ============================================================ */
[dir="rtl"] .nav__link::after,
[dir="rtl"] .value__rule,
[dir="rtl"] .draw-rule{transform-origin:right}

/* Arrows point along the reading direction. The glyph itself is flipped in
   markup via the dictionary; this handles the hover nudge. */
[dir="rtl"] .btn-primary:hover .btn-arrow,
[dir="rtl"] .hero__cta-link:hover .btn-arrow,
[dir="rtl"] .work-card:hover .work-card__cta .btn-arrow{transform:translateX(-4px)}

/* The reveal circle is anchored to the burger, which moves to the other side. */
[dir="rtl"] .nav__overlay{clip-path:circle(0% at 3rem 3rem)}
[dir="rtl"] .nav__overlay.is-open{clip-path:circle(150% at 3rem 3rem)}

/* ---- PINNED LTR: these must not flip ---- */

/* The Latin wordmark lockup keeps its internal order (icon, "Sanabel",
   "ADVERTISING"); the block as a whole still moves to the bar's inline-start. */
[dir="rtl"] .brand-logo{direction:ltr}

/* @keyframes marquee-scroll translates by -50%, which only lines up with the
   duplicated-halves seam if the flex order is stable. Letting the track flip
   with page direction desynchronises the loop for no benefit -- logo order is
   not language-dependent. */
[dir="rtl"] .marquee__inner{direction:ltr}

/* Bare digit runs reorder inside Arabic text: "40+" renders "+40" and the
   phone number "+20 101 187 5614" becomes "5614 187 101 20+". Isolate them. */
.stat__num,
.section-number,
.service-card__num,
.events__chip-count,
.lightbox__counter,
.team__est,
.contact__list a{unicode-bidi:isolate;direction:ltr}

/* Arabic descenders (ج ح خ ع غ م ي ق ن) drop much further below the baseline
   than Latin, and splitWords()/hero lines clip with overflow:hidden. Tokenised
   so the Arabic build can grow the padding without touching the LTR metrics. */
:root{--split-pad:0.08em}
[dir="rtl"]{--split-pad:0.22em}

/* ---- language switcher (renders only when a second language exists) ---- */
.nav__lang{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em}
.nav__lang-opt{color:var(--color-text-muted);transition:color .3s ease}
.nav__lang-opt:hover{color:var(--color-green)}
.nav__lang-opt.is-active{color:var(--color-white)}
.nav__lang-sep{color:rgba(var(--rgb-white),0.25)}
.nav__lang--mobile{justify-content:center;margin-bottom:1.5rem;font-size:1rem}

/* Counting / aligned numbers: tabular figures so digits don't wobble while
   counters animate (these slots used a monospace face before Alexandria). */
.stat__num,.counter,.value__big,.preloader__pct,.lightbox__counter,.events__chip-count{
  font-variant-numeric:tabular-nums;
}