/* =========================================================================
   AITC Corporate v2 — main stylesheet
   Cinematic + modern-corporate art direction.
   ========================================================================= */

/* ---- Fonts (self-hosted) ---- */
@font-face{font-family:"Inter";src:url("../fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* ---- Arabic fonts (self-hosted; active in RTL / Arabic locale) ----
   One unified family "IBM Plex Sans Arabic" covers both Arabic glyphs and the
   Latin runs (brand names like AITC / HSA / Santé stay in-family). Split by
   unicode-range so the browser fetches only the subset a page actually needs.
   Noto Sans Arabic is a fallback for glyph coverage. All OFL — see
   assets/fonts/ARABIC-FONTS-LICENSE.txt. */
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-arabic-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-latin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-arabic-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-latin-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-arabic-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-latin-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/ibm-plex-arabic-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/ibm-plex-arabic-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/ibm-plex-arabic-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/ibm-plex-arabic-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/ibm-plex-arabic-latin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/ibm-plex-arabic-latin-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/ibm-plex-arabic-latin-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/ibm-plex-arabic-latin-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans Arabic";src:url("../fonts/noto-arabic-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Noto Sans Arabic";src:url("../fonts/noto-arabic-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}

/* ---- Tokens ---- */
:root{
  /* Headline-to-description rhythm (client, 21 Aug): one gap, everywhere a
     heading is followed by its copy. */
  --head-gap:clamp(14px,1.7vw,22px);
  --burgundy:#800020; --burgundy-deep:#5C0017; --burgundy-bright:#A30029;
  --ink:#151011; --ink-2:#5A5250; --ink-3:#8A817D;
  --paper:#F7F5F2; --paper-2:#EFEAE3; --line:#E5DDD3; --white:#fff;
  --gold:#B08D57; --gold-soft:#C7A876;
  --container:1240px; --gutter:clamp(20px,5vw,64px);
  --radius:18px; --radius-lg:26px; --radius-pill:999px;
  --shadow-sm:0 10px 30px -12px rgba(30,10,15,.18);
  --shadow-md:0 30px 70px -30px rgba(30,10,15,.30);
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --f-display:"Inter",system-ui,sans-serif; /* CI: Inter is the content face */
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Client (17 Aug): "current gaps are too large" — one tighter standard
     everywhere, paired with the hairline separator between sections. */
  --sect-pad:clamp(44px,5vw,76px);
}

/* Arabic type tokens — the Arabic superfamily leads, with graceful fallbacks.
   Everything downstream (headings + body) uses these vars, so switching the
   locale to Arabic re-skins the whole site with no per-element changes. */
[dir="rtl"]{
  --f-display:"Tajawal","IBM Plex Sans Arabic","Noto Sans Arabic",sans-serif;
  --f-body:"Tajawal","IBM Plex Sans Arabic","Noto Sans Arabic","Inter",system-ui,sans-serif;
}

/* ---- Reset / base ---- */
*,*::before,*::after{box-sizing:border-box}
/* The UA rule for [hidden] is display:none, but *any* author display wins over
   it — so "Load more products" (a .btn, display:inline-flex) kept showing after
   the last batch even though the script had set hidden. Make the attribute mean
   what it says everywhere, for every current and future toggled element. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-body);color:var(--ink);background:var(--paper);
  font-size:clamp(15px,1.05vw,17px);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.nav-open{overflow:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:700;line-height:1.05;letter-spacing:-.02em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--burgundy);color:#fff}
:focus-visible{outline:2px solid var(--burgundy);outline-offset:3px}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.skip-link{position:fixed;inset-inline-start:12px;top:-60px;z-index:1000;background:#fff;color:var(--burgundy);padding:10px 16px;border-radius:8px;transition:top .2s}
.skip-link:focus{top:12px}

.container{width:min(100% - var(--gutter)*2,var(--container));margin-inline:auto}
.section{padding-block:var(--sect-pad);position:relative}
/* The thin, elegant separator the client asked for (17 Aug): a container-width
   hairline wherever two sections meet, so every junction reads the same. */
.section + .section::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(100% - var(--gutter)*2,var(--container));height:1px;background:var(--line)}
.section--tint{background:linear-gradient(180deg,var(--paper),var(--paper-2))}

/* ---- Typography helpers ---- */
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-family:var(--f-body);
  font-weight:600;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--burgundy);margin:0 0 22px}
.eyebrow--light{color:var(--gold-soft)}
.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--burgundy);box-shadow:0 0 0 4px rgba(128,0,32,.12)}
.eyebrow--light .eyebrow-dot{background:var(--gold);box-shadow:0 0 0 4px rgba(176,141,87,.2)}
.section-title{font-size:clamp(2rem,4.6vw,3.6rem);max-width:16ch}
.section-title--center{margin-inline:auto;text-align:center;max-width:20ch}

/* ---- Buttons ---- */
.btn{--bg:var(--burgundy);--fg:#fff;position:relative;display:inline-flex;align-items:center;gap:.6em;
  padding:16px 30px;border-radius:var(--radius-pill);font-weight:600;font-size:.95rem;letter-spacing:.01em;
  background:var(--bg);color:var(--fg);overflow:hidden;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);will-change:transform}
.btn span{position:relative;z-index:1}
.btn::after{content:"";position:absolute;inset:0;background:var(--burgundy-bright);transform:translateY(101%);transition:transform .5s var(--ease-out);z-index:0}
.btn:hover{box-shadow:var(--shadow-sm)}
.btn:hover::after{transform:translateY(0)}
.btn--sm{padding:11px 20px;font-size:.85rem}
.btn--primary{--bg:var(--burgundy);--fg:#fff}
.btn--light{--bg:#fff;--fg:var(--burgundy)}
.btn--light::after{background:var(--paper)}
.btn--ghost-light{--bg:transparent;--fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.btn--ghost-light::after{background:rgba(255,255,255,.12)}

/* =========================================================================
   Header
   ========================================================================= */
.page-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1001;background:transparent}
.page-progress__bar{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--burgundy),var(--gold));transform-origin:left}

.site-header{position:fixed;inset:0 0 auto;z-index:900;padding:clamp(24px,3.2vw,44px) 0;transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease)}
.site-header__inner{display:flex;align-items:center;gap:clamp(26px,4vw,60px)}
/* Two logo files: the white-text variant reads on the transparent header over
   the dark hero; the full-colour original reads on the solid (white) header.
   No CSS invert — that flattened the mark into a featureless white box. */
/* Header logo. The source files are trimmed to the wordmark, so this height is
   the mark itself, not a box mostly full of transparent padding — which is what
   made a 78px logo read at nav-text size. The header padding below absorbs the
   difference, so the bar keeps its existing height. */
.brand__logo{height:clamp(26px,2.3vw,34px);width:auto;transition:height .4s var(--ease)}
.brand .custom-logo{height:clamp(52px,4.8vw,78px);width:auto;transition:height .4s var(--ease)}
.brand__logo--dark{display:none}
.site-header.is-solid{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(21,16,17,.06),0 20px 40px -34px rgba(21,16,17,.5)}
/* Keep the logo the SAME size before/after scroll so the black (solid) and
   white (transparent) marks read at identical dimensions (client request). */
.site-header.is-solid .brand__logo{height:clamp(26px,2.3vw,34px)}
.site-header.is-solid .brand .custom-logo{height:clamp(52px,4.8vw,78px)}
.site-header.is-solid .brand__logo--light{display:none}
.site-header.is-solid .brand__logo--dark{display:inline-block}
.nav__menu{display:flex;gap:clamp(20px,2.2vw,40px)}
/* Narrower desktops: trade some of the gap for label room, so seven items
   still sit on one line right down to the drawer breakpoint. */
@media (max-width:1120px){.nav__menu{gap:clamp(16px,1.7vw,24px)}}
.nav__link{position:relative;font-weight:500;font-size:clamp(.95rem,1.02vw,1.12rem);color:#fff;padding:6px 0;transition:color .3s}
.nav__link::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:100%;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease-out)}
.nav__link:hover::after,.current-menu-item .nav__link::after{transform:scaleX(1);transform-origin:left}
.is-solid .nav__link{color:var(--ink)}
.is-solid .nav__link:hover{color:var(--burgundy)}

/* "Media" is a drop list over News and Photo Gallery (client request). It has
   no page behind it, so the trigger is a button — it opens on hover, on
   keyboard focus anywhere inside the item, and on tap, which covers pointer,
   keyboard and touch without a script deciding which is which. */
.nav__item,.nav .menu-item{position:relative}
.nav__link--parent{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font:inherit;font-weight:500;font-size:clamp(.95rem,1.02vw,1.12rem)}
/* A button is a block box: its own padding pushes the label down, where an
   inline <a>'s padding does not. Centring the row puts every label on the same
   line regardless, and the sliding underline is dropped here — "Media" is a
   disclosure, never a current page, so the caret and colour carry the state. */
.nav .nav__menu{align-items:center}
.nav__link--parent::after{display:none}
.nav__link--parent:hover{color:var(--gold-soft)}
.is-solid .nav__link--parent:hover{color:var(--burgundy)}
.nav__caret{width:11px;height:11px;flex:none;transition:transform .3s var(--ease)}
/* The panel hangs below the trigger with a gap; this bridges it so the pointer
   can travel across without the menu closing underneath it. */
.nav__item--has-children::after,.nav .menu-item-has-children::after{content:"";position:absolute;inset-inline:0;top:100%;height:18px}
.sub-menu{position:absolute;inset-inline-start:-10px;top:100%;z-index:5;min-width:206px;margin-top:16px;padding:9px;
  list-style:none;background:#fff;border-radius:16px;
  box-shadow:0 1px 0 rgba(21,16,17,.06),0 26px 52px -30px rgba(21,16,17,.55);
  opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
.nav__item--has-children:hover>.sub-menu,.nav__item--has-children:focus-within>.sub-menu,.nav__item--has-children.is-open>.sub-menu,
.nav .menu-item-has-children:hover>.sub-menu,.nav .menu-item-has-children:focus-within>.sub-menu,.nav .menu-item-has-children.is-open>.sub-menu{opacity:1;visibility:visible;transform:none}
.nav__item--has-children:hover>.nav__link .nav__caret,.nav__item--has-children:focus-within>.nav__link .nav__caret,.nav__item--has-children.is-open>.nav__link .nav__caret{transform:rotate(180deg)}
/* Escape dismisses the panel while focus stays on the trigger — which
   :focus-within would otherwise keep open. Last rule wins the tie. */
.nav__item--has-children.is-dismissed>.sub-menu{opacity:0;visibility:hidden;transform:translateY(-7px)}
.nav__item--has-children.is-dismissed>.nav__link .nav__caret{transform:none}
.sub-menu a{display:block;padding:9px 15px;border-radius:10px;font-size:.98rem;font-weight:500;line-height:1.4;
  color:var(--ink);white-space:nowrap;transition:background .25s var(--ease),color .25s var(--ease)}
.sub-menu a:hover,.sub-menu a:focus-visible{background:var(--paper);color:var(--burgundy)}
.site-header__actions{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);margin-inline-start:auto}
.lang-toggle{display:flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;letter-spacing:.06em;color:#fff}
.is-solid .lang-toggle{color:var(--ink-2)}
.lang-toggle__item.is-active{color:var(--gold-soft)}
.is-solid .lang-toggle__item.is-active{color:var(--burgundy)}
.lang-toggle__sep{opacity:.5}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;transition:.3s var(--ease)}
.is-solid .nav-toggle span{background:var(--ink)}

.mobile-nav{position:fixed;inset:0;z-index:899;background:var(--burgundy-deep);color:#fff;display:grid;place-items:center;overflow:hidden;
  clip-path:circle(0% at calc(100% - 44px) 44px);transition:clip-path .6s var(--ease-out);pointer-events:none}
.mobile-nav.is-open{clip-path:circle(150% at calc(100% - 44px) 44px);pointer-events:auto}
.mobile-nav__media{position:absolute;inset:0;z-index:0}
.mobile-nav__video{width:100%;height:100%;object-fit:cover}
.mobile-nav__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(58,8,20,.82),rgba(20,8,12,.9))}
.mobile-nav__inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:22px;text-align:center;padding:40px}
.mobile-nav .nav__menu{flex-direction:column;gap:14px}
.mobile-nav .nav__link{color:#fff;font-family:var(--f-display);font-size:1.6rem;font-weight:700}
/* In the drawer there is room to show the whole tree, so the Media group is
   laid open rather than hidden behind a second tap. */
.mobile-nav .nav__link--parent{justify-content:center;pointer-events:none}
.mobile-nav .nav__caret,.mobile-nav .nav__item--has-children::after{display:none;content:none}
.mobile-nav .sub-menu{position:static;min-width:0;margin:8px 0 0;padding:0;background:none;box-shadow:none;
  opacity:1;visibility:visible;transform:none;display:flex;flex-direction:column;gap:2px}
.mobile-nav .sub-menu a{padding:4px 0;font-size:1.05rem;color:rgba(255,255,255,.82);white-space:normal;border-radius:0}
.mobile-nav .sub-menu a:hover,.mobile-nav .sub-menu a:focus-visible{background:none;color:#fff}

/* =========================================================================
   Hero
   ========================================================================= */
/* Auto-fit the whole hero (headline → buttons → stat ticker) into one viewport,
   from tablet up to large desktop / LED, so nothing needs scrolling to be seen. */
/* Fits one viewport wherever it fits, and grows rather than clips where it
   doesn't. A fixed height:100svh centred its content, so on a short phone the
   taller Arabic copy overflowed *both* ways — the eyebrow slid off the top and
   the headline ran under the fixed header, while overflow:hidden ate the bottom
   row of the stat ticker. min-height keeps the full-screen look on every screen
   that can hold it (min() preserves the old 1100px cap on very tall displays). */
.hero{position:relative;height:auto;min-height:min(100svh,1100px);display:flex;flex-direction:column;justify-content:center;
  /* No margin below: the next section's own padding is the whole gap — the
     doubled space under the stat ticker was the client's image-8 complaint. */
  color:#fff;padding-block:clamp(92px,12vh,132px) clamp(120px,17vh,168px);margin-bottom:0;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:-2%;z-index:-2}
/* A whisper of soft focus, applied evenly to the whole film.
   The client's markup labelled the sharp parts of the frame "Normal" and the
   soft middle "Blurry Background", so 1.2px is a level they already accept and
   the complaint was the mismatch, not the blur itself. Measured across the
   frame this is also the *most* even option available: detail varies 1.09x at
   1.2px, against 1.27x at 3px and 1.35x with no blur at all — the raw footage
   carries more detail in the shelves than in the open aisle, so a touch of blur
   evens that out and removing it entirely makes the frame less uniform, not
   more. Contrast is effectively independent of this value (7.45:1 on the title
   here, 7.52:1 at 3px, 7.42:1 at 0px) because the scrim below, not the blur, is
   what separates the text. The media overscan above hides the edges the blur
   would otherwise feather.
   `cover` is what makes the film responsive — it always fills the hero on any
   aspect ratio without letterboxing or distortion, cropping evenly from the centre
   (the cut is composed centre-safe, so subjects survive from 390px portrait to
   ultrawide). A portrait-cropped file is served to phones — see hero.php. */
.hero__video{width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:blur(1.2px)}
/* One even wash over the whole frame. The old off-centre radial pooled shadow
   on the left, which — together with the local blur patch that used to sit
   behind the copy — is what the client marked up as "blurry at some spots and
   normal at other spots". Legibility now comes from this and the film's own
   soft focus, both of which read the same everywhere in frame. */
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(14,6,9,.66) 0%,rgba(14,6,9,.54) 40%,rgba(58,8,20,.60) 80%,rgba(38,6,14,.88) 100%)}
.hero__grain{position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.hero__inner{position:relative;max-width:960px}
/* No local patch behind the copy. An earlier pass defocused just the area the
   text sits on, which lifted contrast but left the frame visibly sharp at the
   edges and soft in the middle — the client circled both zones. The film's own
   even blur plus the scrim above carry legibility instead, and they look the
   same everywhere. */
.hero__eyebrow{display:inline-flex;align-items:center;gap:.7em;font-weight:600;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85);margin:0 0 26px}
.hero__eyebrow .eyebrow-dot{background:var(--gold);box-shadow:0 0 0 4px rgba(176,141,87,.25)}
.hero__title{font-size:clamp(2.2rem,5.2vw,4.7rem);font-weight:800;line-height:1.04;max-width:15ch;text-wrap:balance}
.hero__lead{max-width:54ch;margin-top:clamp(18px,2.4vh,26px)}
.hero__lead-strong{font-size:clamp(1.05rem,1.5vw,1.28rem);font-weight:600;color:#fff}
.hero__paragraph{margin-top:12px;color:rgba(255,255,255,.82);font-size:clamp(1rem,1.15vw,1.12rem);max-width:52ch;text-align:justify;text-align-last:start;hyphens:auto}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(22px,3vh,36px)}
/* Frosted, premium buttons that sit confidently over the moving film. */
.hero__actions .btn--light{box-shadow:0 18px 40px -20px rgba(0,0,0,.55)}
.hero__actions .btn--ghost-light{background:rgba(255,255,255,.10);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
/* Large screens / LED / projector: center the composition, ease the headline,
   and lift the supporting copy so it reads well from a distance. */
@media (min-width:1600px){
  .hero{text-align:center}
  .hero__inner{max-width:1080px;margin-inline:auto}
  .hero__eyebrow{margin-inline:auto}
  .hero__title{font-size:clamp(3.2rem,3.4vw,4.4rem);max-width:20ch;margin-inline:auto}
  .hero__lead{max-width:64ch;margin-inline:auto}
  .hero__lead-strong{font-size:1.4rem}
  .hero__paragraph{font-size:1.2rem}
  .hero__actions{justify-content:center}
}
.hero__ticker{position:absolute;left:0;right:0;bottom:0;border-top:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,transparent,rgba(20,8,12,.35));backdrop-filter:blur(4px)}
.hero__stats{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--container);margin-inline:auto;
  width:min(100% - var(--gutter)*2,var(--container))}
.hero__stat{padding:22px 8px;text-align:center;border-inline-start:1px solid rgba(255,255,255,.12)}
.hero__stat:first-child{border:0}
.hero__stat-num{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1}
.hero__stat-label{display:block;margin-top:6px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.hero__scroll{position:absolute;left:50%;bottom:118px;transform:translateX(-50%);width:1px;height:52px;background:rgba(255,255,255,.3);overflow:hidden}
.hero__scroll-line{position:absolute;inset:0;background:#fff;transform:translateY(-100%);animation:scrolldrop 2s var(--ease-out) infinite}
@keyframes scrolldrop{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}
/* Respect a reduced-motion preference: drop the moving film and hold the poster
   frame (a real still from the same cut), so the hero still reads as footage. */
@media (prefers-reduced-motion:reduce){
  .hero__video{display:none}
  .hero__media{background:#2a0c14 url("../img/hero-video-poster.jpg") center/cover no-repeat}
  .hero__scroll-line{animation:none}
}

/* =========================================================================
   About
   ========================================================================= */
.about__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,6vw,90px);align-items:center}
.about__visual{position:relative}
.about__image{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:4/4.4}
.about__image img{width:100%;height:120%;object-fit:cover;will-change:transform}
/* Transparent artwork (e.g. the HSA founders portrait) floats on the section —
   no photo card, no crop — so the watercolour edges blend into the tint. */
.about__image--art{border-radius:0;overflow:visible;box-shadow:none}
.isplit__media .about__image--art{aspect-ratio:auto}
.about__image--art img{width:100%;height:auto;object-fit:contain;will-change:auto}
/* Branded section graphics (shown until a real photo is provided) */
.about__image--graphic{aspect-ratio:auto}
.about-graphic{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;min-height:clamp(320px,34vw,440px);padding:26px 24px 20px}
.about-graphic--dist{background:radial-gradient(120% 120% at 50% 18%,#2a0e17,#150810);
  /* Client (26 Aug): the hub box takes the same rounded corners as the
     retailer tiles beside it, so the pair reads as one set. */
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.about-graphic--heritage{background:radial-gradient(120% 120% at 50% 22%,var(--paper),var(--paper-2))}
.about-graphic svg{width:100%;max-width:430px;height:auto;flex:0 1 auto}
.about-graphic__cap{margin-top:10px;font-size:.82rem;text-align:center;max-width:32ch;line-height:1.5}
.about-graphic--dist .about-graphic__cap{color:rgba(255,255,255,.74)}
.about-graphic--heritage .about-graphic__cap{color:var(--ink-2)}
.ag-hub-label{fill:#fff;font-family:var(--f-display);font-weight:800;font-size:20px}
.ag-hub-sub{fill:var(--gold-soft);font-family:var(--f-body);font-weight:700;font-size:9px;letter-spacing:.18em}
/* Arabic hub label: "الشركة المتطورة" split over the two lines — Arabic glyphs
   need a smaller display size and no tracking to fit the 44px hub circle. */
.ag-hub-label--ar{font-size:13px;letter-spacing:0}
.ag-hub-sub--ar{font-size:12px;letter-spacing:0;fill:var(--gold-soft)}
.ag-node-label{fill:rgba(255,255,255,.86);font-family:var(--f-body);font-weight:600;font-size:11px}
.ag-node{opacity:0;transform:scale(.6);transform-origin:center;transform-box:fill-box;animation:agpop .6s var(--ease-out) forwards;animation-delay:calc(.25s + var(--i)*.1s)}
.ag-node-dot{animation:agblink 2.4s ease-in-out infinite;animation-delay:calc(var(--i)*.3s)}
.ag-pulse{transform-origin:center;transform-box:fill-box;animation:agpulse 2.8s ease-out infinite}
.ag-num{fill:#fff;font-family:var(--f-display);font-weight:800;font-size:24px}
.ag-num .ag-plus{font-size:15px;fill:var(--gold-soft)}
.ag-years{fill:rgba(255,255,255,.85);font-family:var(--f-body);font-weight:700;font-size:8px;letter-spacing:.22em}
.about-graphic--heritage .ag-ring{transform-origin:center;transform-box:fill-box;animation:agspin 70s linear infinite;animation-delay:calc(var(--i)*-7s)}
.ag-dot{opacity:0;animation:agpop .6s var(--ease-out) forwards;animation-delay:calc(.35s + var(--i)*.18s)}
@keyframes agpop{to{opacity:1;transform:scale(1)}}
@keyframes agblink{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes agpulse{0%{transform:scale(.72);opacity:.6}80%,100%{transform:scale(1.85);opacity:0}}
@keyframes agspin{to{transform:rotate(360deg)}}
.about__badge{position:absolute;inset-inline-end:-14px;bottom:-14px;background:var(--burgundy);color:#fff;border-radius:var(--radius);
  padding:18px 22px;box-shadow:var(--shadow-md);text-align:center}
.about__badge-top{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.about__badge-main{display:block;font-family:var(--f-display);font-weight:800;font-size:1.35rem;margin-top:2px}
.about__text{margin-top:24px;color:var(--ink-2);font-size:clamp(1rem,1.3vw,1.16rem);max-width:52ch}
.about__points{display:flex;flex-wrap:wrap;gap:14px 34px;margin-top:36px;padding-top:32px;border-top:1px solid var(--line)}
.about__point{display:flex;flex-direction:column;min-width:120px}
.about__point-num{font-family:var(--f-display);font-weight:800;font-size:clamp(1.9rem,3vw,2.6rem);color:var(--burgundy);line-height:1}
.about__point-label{margin-top:6px;font-size:.86rem;color:var(--ink-2);max-width:20ch}
.about__cta{margin-top:38px}

/* =========================================================================
   Brands
   ========================================================================= */
/* Two real columns — the copy takes the left half, the 2x2 stats stretch
   across the right half (spreading the counters apart) — so there is no dead
   band in the middle (client request). */
.brands__head-row{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:34px clamp(44px,5vw,84px);align-items:center}
.brands__intro{max-width:none}
.brands__text{margin-top:16px;color:var(--ink-2);max-width:58ch}
@media (max-width:900px){.brands__head-row{grid-template-columns:1fr}}
/* 2×2 block, vertically centred against the tall left column, so the right side
   no longer leaves a large empty area below the figures (client request). */
.brands__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,3.6vw,50px) clamp(40px,4.4vw,72px)}
.brands__stat{display:flex;flex-direction:column;align-items:flex-start;position:relative}
.brands__stat:nth-child(2n)::before,.brands__stat:nth-child(n+3)::after{content:none}
.brands__stat-ico{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:var(--paper-2);color:var(--burgundy);margin-bottom:18px}
.brands__stat-ico svg{width:25px;height:25px}
.brands__stat-num{font-family:var(--f-display);font-weight:800;font-size:clamp(2.7rem,4.2vw,3.8rem);color:var(--burgundy);line-height:1}
.brands__stat-label{margin-top:10px;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);max-width:12ch;line-height:1.4}
.brands__divider{margin-top:clamp(32px,4vw,50px);border-top:1px solid var(--line)}
.brands__sublabel{text-align:center;margin-top:clamp(26px,3.4vw,40px);color:var(--ink-2);font-weight:500}
.brands__grid{margin-top:clamp(26px,3vw,40px);display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,1.5vw,22px)}
/* Spacing via margins, NOT flex `gap` — flex-gap is ignored on iOS Safari < 14.1,
   which would collapse the logo/label spacing and let them touch on iPhones. */
.brand-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:clamp(22px,2.2vw,30px) 16px 18px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);cursor:pointer;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .35s}
.brand-card:hover,.brand-card:focus-visible{transform:translateY(-6px);border-color:var(--burgundy);box-shadow:var(--shadow-md);outline:none}
.brand-card__logo{width:100%;height:clamp(62px,6vw,78px);flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:16px}
.brand-card__name{font-family:var(--f-display);font-weight:700;font-size:1rem;color:var(--ink);text-align:center}
/* Full-colour partner logos for stronger brand recognition (client request).
   Cap the logo to a definite height so every logo is the same size and centred,
   and never overflows onto the category label (percentage height collapses on an
   auto grid row, so we use a definite max-height instead). */
.brand-card__logo img{max-width:100%;max-height:clamp(62px,6vw,78px);width:auto;height:auto;object-fit:contain;opacity:1;transition:transform .4s var(--ease)}
.brand-card:hover .brand-card__logo img,.brand-card:focus-visible .brand-card__logo img{transform:scale(1.04)}
.brand-card__cat{font-size:.82rem;color:var(--ink-2);text-align:center}
.brands__cta{margin-top:clamp(32px,4vw,52px);text-align:center}
.btn__arrow{position:relative;z-index:1;transition:transform .4s var(--ease-out)}
.btn:hover .btn__arrow{transform:translateX(4px)}
@media (max-width:1024px){.brands__grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:640px){.brands__grid{grid-template-columns:repeat(2,1fr)}.brands__stats{gap:0}.brands__stat{padding-inline:clamp(14px,4vw,22px)}}

/* =========================================================================
   Our Reach (home) — retail & e-commerce partner logos
   ========================================================================= */
.reach__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.5vw,20px)}
.reach__tile{display:flex;align-items:center;justify-content:center;height:clamp(96px,8.8vw,127px);padding:clamp(14px,1.8vw,22px);background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.reach__tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.reach__tile img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media (max-width:1024px){.reach__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.reach__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.reach__tile{height:88px}}

/* =========================================================================
   News
   ========================================================================= */
.news__head{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(30px,4vw,54px)}
.news__all{display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:var(--burgundy);white-space:nowrap}
.news__all span{transition:transform .4s var(--ease-out)}
.news__all:hover span{transform:translateX(5px)}
.news__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,30px)}
.news-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.news-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.news-card__media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden}
.news-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.news-card:hover .news-card__media img{transform:scale(1.05)}
.news-card__cat{position:absolute;inset-inline-start:14px;top:14px;background:rgba(128,0,32,.92);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.04em;padding:6px 12px;border-radius:var(--radius-pill);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.news-card__body{padding:clamp(20px,2vw,26px);display:flex;flex-direction:column;gap:10px;flex:1}
.news-card__date{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.news-card__title{font-size:1.15rem;line-height:1.28}
.news-card__title a{transition:color .3s}
.news-card__title a:hover{color:var(--burgundy)}
.news-card__excerpt{color:var(--ink-2);font-size:.92rem;flex:1}
.news-card__more{font-weight:600;color:var(--burgundy);font-size:.9rem;margin-top:2px}
@media (max-width:900px){.news__grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.news__grid{grid-template-columns:1fr}}
/* Follow-on-LinkedIn band within the News section */
.news-linkedin{display:flex;align-items:center;gap:clamp(16px,2.4vw,26px);margin-top:clamp(28px,3.4vw,44px);
  padding:clamp(20px,2.6vw,30px) clamp(22px,3vw,36px);border-radius:var(--radius-lg);background:var(--white);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s}
.news-linkedin:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#0A66C2}
.news-linkedin__icon{flex:0 0 auto;width:clamp(42px,4vw,52px);height:clamp(42px,4vw,52px);border-radius:14px;
  display:grid;place-items:center;background:#0A66C2;color:#fff}
.news-linkedin__icon svg{width:58%;height:58%}
.news-linkedin__text{display:flex;flex-direction:column;gap:3px;min-width:0}
.news-linkedin__text strong{font-family:var(--f-display);font-weight:700;font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--ink)}
.news-linkedin__text span{font-size:.9rem;color:var(--ink-2)}
.news-linkedin__cta{flex:0 0 auto;margin-inline-start:auto;display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-display);
  font-weight:600;font-size:.92rem;color:#0A66C2;white-space:nowrap}
.news-linkedin__cta .dir-arrow{transition:transform .3s var(--ease)}
.news-linkedin:hover .news-linkedin__cta .dir-arrow{transform:translateX(4px)}
@media (max-width:560px){.news-linkedin{flex-wrap:wrap}.news-linkedin__cta{margin-inline-start:0;width:100%;justify-content:flex-start}}
/* Single news article — readable prose column */
.article{max-width:760px;margin-inline:auto}
.article__body{font-size:1.05rem;line-height:1.75;color:var(--ink-2)}
.article__body > *{margin-bottom:1.1em}
.article__body > *:last-child{margin-bottom:0}
.article__body h2,.article__body h3{font-family:var(--f-display);color:var(--ink);margin-top:1.6em;margin-bottom:.5em;line-height:1.25}
.article__body h2{font-size:clamp(1.4rem,2.4vw,1.7rem)}
.article__body h3{font-size:clamp(1.2rem,2vw,1.35rem)}
.article__body a{color:var(--burgundy);text-decoration:underline;text-underline-offset:3px}
.article__body img{border-radius:var(--radius);margin-block:1.4em;box-shadow:var(--shadow-sm)}
.article__body ul,.article__body ol{padding-inline-start:1.4em;margin-bottom:1.1em}
.article__body ul li{list-style:disc;margin-bottom:.4em}
.article__body ol li{list-style:decimal;margin-bottom:.4em}
.article__body blockquote{border-inline-start:3px solid var(--gold);padding-inline-start:20px;margin-block:1.4em;font-size:1.14rem;color:var(--ink);font-style:italic}
.article__back{margin-top:44px}

/* =========================================================================
   Photo gallery (Media → Photo Gallery)
   A contact sheet, not a card grid: the frames butt up close, landscape shots
   take a double-width cell, and the caption sits under the frame rather than
   inside a panel — so the photographs, not the chrome, carry the page.
   ========================================================================= */
.gallery__filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:clamp(26px,3.2vw,44px)}
.gallery__chip{padding:9px 20px;border-radius:var(--radius-pill);border:1px solid var(--line);background:#fff;
  font-size:.92rem;font-weight:600;color:var(--ink-2);cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.gallery__chip:hover{border-color:var(--burgundy);color:var(--burgundy)}
.gallery__chip.is-active{background:var(--burgundy);border-color:var(--burgundy);color:#fff}
/* Client (30 Aug): every frame is the same size — the mixed run of single and
   double-width cells read as an accident rather than a layout. One ratio, one
   width, four across. The labelled bands that briefly separated Jeddah from
   Riyadh came back out on 31 Aug: "keep all pictures together… but keep it
   underneath when enlarged", so the office name lives in the lightbox now.

   Four across, laid out with flex rather than grid so a last row that does not
   fill centres its remainder instead of leaving a hole at the end — thirteen
   photos over four columns leaves one, and a lone frame pinned left with three
   empty cells beside it is exactly the kind of gap the client keeps flagging. */
.gallery__grid{--gal-gap:clamp(12px,1.4vw,20px);--gal-cols:4;
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gal-gap)}
.gallery__item{margin:0;flex:0 0 calc((100% - (var(--gal-cols) - 1) * var(--gal-gap)) / var(--gal-cols))}
.gallery__item[hidden]{display:none}
.gallery__shot{position:relative;display:block;width:100%;padding:0;border:0;overflow:hidden;cursor:zoom-in;
  aspect-ratio:4/3;border-radius:var(--radius);background:var(--paper-2);box-shadow:var(--shadow-sm)}
.gallery__shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.gallery__shot:hover img,.gallery__shot:focus-visible img{transform:scale(1.06)}
.gallery__shot:focus-visible{outline:2px solid var(--burgundy);outline-offset:3px}
.gallery__zoom{position:absolute;inset-inline-end:12px;bottom:12px;width:38px;height:38px;display:grid;place-items:center;
  border-radius:50%;color:#fff;background:rgba(18,8,11,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.gallery__shot:hover .gallery__zoom,.gallery__shot:focus-visible .gallery__zoom{opacity:1;transform:none}
.gallery__zoom svg{width:19px;height:19px}
.gallery__empty{text-align:center;color:var(--ink-2);padding:clamp(30px,5vw,60px) 0}
@media (max-width:1024px){.gallery__grid{--gal-cols:3}}
/* Two up still reads as a contact sheet on a phone; one up would make this a
   very long scroll for no extra legibility — the frame opens full size on tap. */
@media (max-width:760px){.gallery__grid{--gal-cols:2}}

/* =========================================================================
   Leadership (About) — chairman message band, executive + board cards
   ========================================================================= */
/* Client (18 Aug): chairman portrait runs ~40% smaller; the message takes the room. */
.chairman{display:grid;grid-template-columns:minmax(200px,.6fr) 1.9fr;gap:clamp(24px,3vw,48px);align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  padding:clamp(22px,2.6vw,40px);margin-bottom:clamp(36px,4.5vw,64px)}
.chairman__media{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--burgundy-deep);aspect-ratio:4/5;max-width:270px;width:100%;justify-self:center}
/* The CI monogram used to sit ghosted over this portrait. The client read it as
   a smudge on the photograph rather than a brand device, which is fair — a
   watermark belongs on a flat panel, not across someone's shoulder. Removed;
   the monogram still runs on the closing CTA band where it has room to read. */
.chairman__media img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.chairman__id{position:absolute;inset:auto 0 0 0;padding:44px 20px 16px;color:#fff;text-align:center;
  background:linear-gradient(180deg,transparent,rgba(46,0,12,.88));display:flex;flex-direction:column;gap:2px;z-index:1}
.chairman__id strong{font-family:var(--f-display);font-weight:700;font-size:1.04rem;line-height:1.3}
.chairman__id span{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft)}
[dir="rtl"] .chairman__id span{letter-spacing:normal;text-transform:none;font-size:.95rem}
.chairman__body{display:flex;flex-direction:column;justify-content:center;padding-block:clamp(6px,1vw,14px)}
.chairman__label{margin:0 0 18px;font-weight:700;font-size:.92rem;letter-spacing:.16em;text-transform:uppercase;color:var(--burgundy)}
[dir="rtl"] .chairman__label{letter-spacing:normal;text-transform:none;font-size:1.15rem}
.chairman__para{color:var(--ink-2);line-height:1.8;margin:0 0 1em}
.chairman__sig{margin-top:10px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.chairman__sig strong{font-family:var(--f-display);font-weight:700;font-size:1.08rem;color:var(--ink)}
.chairman__sig span{font-size:.85rem;color:var(--ink-3)}
.leaders__group{margin:clamp(30px,3.6vw,50px) 0 clamp(18px,2.2vw,28px);padding-top:clamp(30px,3.6vw,50px);border-top:1px solid var(--line);font-size:clamp(1.15rem,1.7vw,1.45rem);text-align:center}
.leaders__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
/* Client (18 Aug): all member photos ~25% smaller — the four-person board row
   keeps three-quarters width, centred; the team's five-up rule lives below. */
.leaders__grid--board{max-width:92%;margin-inline:auto}
.leaders__grid--exec{grid-template-columns:repeat(4,1fr)}
/* One executive so far — the card holds the board cards' size, centred. */
/* Client (17 Aug): the CEO card runs slightly smaller. */
/* The CEO card matches the board cards exactly (client, 20 Aug): same track
   container as the board (76%), and one board-column of width inside it. */
.leaders__grid--exec{max-width:76%;margin-inline:auto}
.leaders__grid--exec .leader-card{grid-column:2/span 2;max-width:calc(50% - clamp(8px,1vw,13px));justify-self:center;width:100%}
.leader-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);padding:0 0 18px;text-align:center;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.leader-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.leader-card__photo{display:grid;place-items:center;width:100%;aspect-ratio:4/5;background:linear-gradient(180deg,#F3F0EC,#DBD4CA);overflow:hidden}  /* 4:5 is the ratio the client's own portrait files are cut at, so the
     frame shows each photo exactly as supplied — nothing cropped, no
     empty band above the head (client, 26 Aug). */
/* Awaiting-photo cards keep a shorter frame — a tall empty box says "missing",
   a compact one says "coming". Swaps to 3/4 by itself when the photo lands. */
/* An initials placeholder keeps the same frame as a photo. It used to be
   shorter, which was fine when a whole row lacked pictures — but with one
   person still awaiting a photo beside four who have one, the short card
   pulled its name up and broke the row. */
.leader-card__photo:has(.leader-card__initials){aspect-ratio:3/4}
.leader-card__photo img{width:100%;height:100%;object-fit:cover;object-position:top center}
.leader-card__initials{font-family:var(--f-display);font-weight:800;font-size:2.2rem;color:var(--burgundy);opacity:.55}
.leader-card__name{margin:14px 10px 3px;font-family:var(--f-display);font-weight:700;font-size:clamp(.86rem,.92vw,.96rem);line-height:1.35;color:var(--ink);white-space:nowrap}
.leader-card__title{margin:0 14px;font-size:.8rem;line-height:1.5;color:var(--ink-3)}
.leader-card__title--role{font-style:normal}
.leader-card__title--org{margin-top:2px}
.leaders__grid--exec .leader-card__title{color:var(--burgundy);font-weight:600}
/* The team reporting to the CEO: five people, so a five-up row rather than the
   board's four-up, which would leave one card orphaned on a line of its own. */
.leaders__grid--team{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,26px);margin-top:clamp(16px,2vw,26px);max-width:76%;margin-inline:auto} /* four per row, sized like the board row (client, 20 Aug) */
@media (max-width:1180px){.leaders__grid--team{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.leaders__grid--team{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (max-width:1024px){.leaders__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.leaders__grid--exec .leader-card{grid-column:1/span 2}}
@media (max-width:900px){.chairman{grid-template-columns:1fr}.chairman__media{max-width:280px;margin-inline:auto;width:100%}}
@media (max-width:560px){
  /* Client (mobile screenshot): one leader card filled the whole screen. Keep
     every grid two-up on phones and size the captions to match. */
  .leaders__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .leaders__grid--exec .leader-card{grid-column:1/span 2;max-width:230px;justify-self:center}
  .leader-card__name{font-size:clamp(.8rem,3vw,.9rem);margin:10px 8px 2px}
@media (max-width:640px){.leader-card__name{white-space:normal}}
  .leader-card__title{font-size:.7rem;margin:0 10px 10px}
  .chairman__media{max-width:220px;min-height:0}
}

/* =========================================================================
   Distribution map
   ========================================================================= */
.dist{background:linear-gradient(180deg,var(--paper-2),var(--paper))}
.dist__head{text-align:center;margin-bottom:clamp(30px,4vw,54px)}
.dist__intro{max-width:60ch;margin:18px auto 0;color:var(--ink-2)}
.dist__grid{display:grid;grid-template-columns:1.35fr .9fr;gap:clamp(28px,4vw,64px);align-items:center}
.dist__map-wrap{position:relative}
.dist__map{position:relative;width:100%;aspect-ratio:1000/820;
  background:radial-gradient(80% 80% at 50% 40%,rgba(128,0,32,.06),transparent 70%)}
.dist__svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 30px 50px rgba(92,0,23,.28))}
.dist__country{opacity:0;transform-origin:center;transition:opacity 1s var(--ease-out)}
.dist__country.is-in{opacity:1}
.dist__pins{position:absolute;inset:0}
.dist__pin{position:absolute;transform:translate(-50%,-50%) scale(0);width:16px;height:16px;opacity:0}
.dist__pin.is-in{animation:pindrop .6s var(--ease-out) forwards}
@keyframes pindrop{0%{opacity:0;transform:translate(-50%,-140%) scale(.4)}70%{opacity:1;transform:translate(-50%,-40%) scale(1.15)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.dist__pin-dot{position:absolute;inset:0;margin:auto;width:13px;height:13px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 3px rgba(255,255,255,.9),0 6px 12px rgba(92,0,23,.4);z-index:2}
.dist__pin-pulse{position:absolute;inset:0;margin:auto;width:13px;height:13px;border-radius:50%;background:var(--gold);z-index:1}
.dist__pin.is-in .dist__pin-pulse{animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(3.6);opacity:0}}
.dist__pin-label{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(6px);
  background:var(--ink);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  padding:5px 10px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:5}
.dist__pin-label::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ink)}
.dist__pin:hover .dist__pin-label,.dist__pin:focus-visible .dist__pin-label{opacity:1;transform:translateX(-50%) translateY(0)}
.dist__pin:hover .dist__pin-dot{background:var(--white);box-shadow:0 0 0 3px var(--burgundy),0 6px 14px rgba(92,0,23,.5)}
/* Secondary cities: smaller dots (primary hubs stay larger + carry the routes).
   All cities show their name on hover/focus — keeps a dense coverage map legible. */
.dist__pin--sec{width:11px;height:11px}
.dist__pin--sec .dist__pin-dot,.dist__pin--sec .dist__pin-pulse{width:8px;height:8px}
.dist__pin--sec .dist__pin-dot{box-shadow:0 0 0 2px rgba(255,255,255,.85),0 4px 8px rgba(92,0,23,.35)}

.dist__panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(24px,3vw,38px);box-shadow:var(--shadow-md)}
.dist__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.dist__stat{text-align:center}
.dist__stat-num{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(1.6rem,2.4vw,2.2rem);color:var(--burgundy);line-height:1}
.dist__stat-label{display:block;margin-top:6px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.dist__panel-title{font-size:1.15rem;margin-bottom:16px}
.dist__channels{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-bottom:28px}
.dist__channel{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--ink-2)}
.dist__channel-tick{flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:rgba(128,0,32,.1);position:relative}
.dist__channel-tick::after{content:"";position:absolute;left:6px;top:5px;width:4px;height:7px;border:solid var(--burgundy);border-width:0 2px 2px 0;transform:rotate(45deg)}
.dist__panel-title--sm{font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.dist__cities{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.dist__city-chip{font-size:.82rem;color:var(--ink-2);padding:6px 12px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--paper);transition:border-color .3s,color .3s}
.dist__city-chip:hover{border-color:var(--burgundy);color:var(--burgundy)}

/* =========================================================================
   CTA band + Footer
   ========================================================================= */
.cta-band{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--burgundy),var(--burgundy-deep));color:#fff;text-align:center;
  padding-block:var(--sect-pad);position:relative;overflow:hidden}
/* The CI monogram as a quiet watermark on the closing band (guidelines device). */
.cta-band::before{content:"";position:absolute;inset-inline-end:-6%;bottom:-14%;width:min(46%,560px);aspect-ratio:585/233;
  background:url("../img/aitc-mark-white.png") no-repeat center/contain;opacity:.07;pointer-events:none}
[dir="rtl"] .cta-band::before{transform:scaleX(-1)}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 80% 0%,rgba(176,141,87,.28),transparent 60%)}
.cta-band__inner{position:relative;max-width:760px;margin-inline:auto}
.cta-band__title{font-size:clamp(1.9rem,4.4vw,3.3rem);margin:6px 0 0;text-wrap:balance}
.cta-band__text{margin:18px auto 34px;max-width:52ch;color:rgba(255,255,255,.82)}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

.site-footer{background:var(--ink);color:rgba(255,255,255,.7);padding-block:var(--sect-pad) 30px}
.site-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px}
.site-footer__logo{height:clamp(15px,1.44vw,20px);width:auto;opacity:.95;margin-bottom:20px}
.site-footer__blurb{font-size:.92rem;max-width:40ch}
.site-footer__heading{font-family:var(--f-display);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 18px}
.site-footer__col li{margin-bottom:11px}
.site-footer__col a:hover{color:#fff}
.subscribe{display:flex;gap:8px;margin-top:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-pill);padding-block:5px;padding-inline:18px 5px}
.subscribe input{flex:1;background:none;border:0;color:#fff;font-size:.9rem;outline:none;min-width:0}
.subscribe input::placeholder{color:rgba(255,255,255,.45)}
.subscribe button{width:42px;height:42px;border-radius:50%;background:var(--burgundy);color:#fff;font-size:1.1rem;transition:background .3s}
.subscribe button:hover{background:var(--burgundy-bright)}
/* LinkedIn link in the footer "Stay informed" column — inline, compact. */
.footer-linkedin{display:inline-flex;align-items:center;margin-top:14px;color:rgba(255,255,255,.8);transition:color .3s}
.footer-linkedin svg{width:36px;height:36px;padding:8px;border-radius:50%;border:1px solid rgba(255,255,255,.25);flex:none;transition:background .3s,border-color .3s}
.footer-linkedin:hover{color:#fff}
.footer-linkedin:hover svg{background:var(--burgundy);border-color:var(--burgundy)}
.site-footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem}
.site-footer__legal a:hover{color:#fff}
/* Postal address: keep the client's line order rather than running it together. */
.site-footer__address{display:block;line-height:1.65}
/* Office city sub-labels on the Contact panel (two offices). */
.contact__city{display:block;font-weight:700;color:var(--ink);margin-bottom:2px}
.contact__city--next{margin-top:14px}

/* Inner-page hero (default template) */
.page-hero{padding:160px 0 60px;background:linear-gradient(160deg,var(--burgundy),var(--burgundy-deep));color:#fff}
.page-hero__title{font-size:clamp(2.2rem,5vw,4rem)}
.page-body .entry-content{max-width:70ch;color:var(--ink-2)}

/* =========================================================================
   Motion — reveal base states (gated on .has-js so no-JS shows everything)
   ========================================================================= */
.has-js .reveal,.has-js .reveal-fade{opacity:0}
.has-js .reveal{transform:translateY(42px)}
.has-js .reveal-fade{transform:translateY(20px)}
.reveal.is-in,.reveal-fade.is-in{opacity:1;transform:none;transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.has-js .split-line{display:block;overflow:hidden}
.has-js .split-line__inner{display:block;transform:translateY(105%)}
.split-line.is-in .split-line__inner{transform:none;transition:transform .9s var(--ease-out)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .has-js .reveal,.has-js .reveal-fade,.has-js .split-line__inner{opacity:1!important;transform:none!important}
  .dist__country{opacity:1}
  .dist__pin{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .has-js .dist__route{stroke-dashoffset:0}
  .has-js .dist__node{opacity:1;transform:none}
  .has-js .about__image{clip-path:none!important}
  .preloader{display:none!important}
}

/* ---- Map route network + nodes ---- */
.dist__routes{opacity:.85}
/* Every city gets a route: primary hubs keep the bold line, smaller cities a
   thinner, softer one — same animated draw-on. */
.dist__route--sec{stroke-width:.65;opacity:.5}
.has-js .dist__route{stroke-dasharray:1;stroke-dashoffset:1}
.dist__node{transform-box:fill-box;transform-origin:center}
.has-js .dist__node{opacity:0;transform:scale(0)}
.dist__node.is-in{opacity:1;transform:scale(1);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}

/* ---- About image cinematic reveal ---- */
.has-js .about__image{clip-path:inset(0 0 100% 0)}
.about__image.is-in{clip-path:inset(0 0 0 0);transition:clip-path 1.2s var(--ease-out)}

/* ---- Branded intro reveal ---- */
.preloader{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;
  background:radial-gradient(130% 130% at 50% 28%,var(--paper) 0%,var(--paper-2) 100%);
  transition:transform 1s var(--ease-out),opacity .6s ease .5s}
.preloader.is-done{transform:translateY(-100%);opacity:0;pointer-events:none}
.preloader__mark{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,2.6vw,30px);opacity:0;transform:translateY(14px) scale(.97)}
.preloader.is-ready .preloader__mark{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .9s var(--ease-out)}
.preloader__mark img{width:clamp(154px,22vw,264px);height:auto;filter:none;animation:aitc-logo-breathe 3.2s var(--ease) infinite}
.preloader__track{position:relative;width:clamp(150px,22vw,240px);height:2px;border-radius:2px;background:rgba(128,0,32,.14);overflow:hidden}
.preloader__bar{position:absolute;top:0;inset-inline-start:0;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,var(--burgundy),var(--gold))}
@keyframes aitc-logo-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.no-preloader .preloader{display:none}

/* =========================================================================
   Inner pages
   ========================================================================= */
.lead{font-size:clamp(1.02rem,1.4vw,1.2rem);color:var(--ink-2);max-width:56ch;margin-top:20px}
.section-head-center{text-align:center;max-width:760px;margin:0 auto clamp(30px,4vw,54px)}
.section-intro{margin:var(--head-gap,18px) auto 0;color:var(--ink-2);max-width:60ch}

/* Inner hero. Top-anchored with a fixed header offset so the gap between the
   header and the first line is IDENTICAL on every page and both locales
   (vertical centring made it vary page-to-page — client flagged it). */
.page-hero2{position:relative;min-height:clamp(400px,56vh,580px);display:flex;align-items:flex-start;padding:clamp(148px,17vh,186px) 0 var(--sect-pad);color:var(--ink);overflow:hidden;isolation:isolate}
.page-hero2--image{color:#fff}
.page-hero2__media{position:absolute;inset:0;z-index:-2}
.page-hero2__media img{width:100%;height:100%;object-fit:cover}
.page-hero2__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,8,12,.62),rgba(58,8,20,.78)),radial-gradient(100% 100% at 10% 0%,rgba(20,8,12,.5),transparent 60%)}
.page-hero2__inner{position:relative;max-width:900px}
.page-hero2__title{font-size:clamp(2.4rem,5.6vw,4.6rem);font-weight:800;line-height:1.03;max-width:20ch;text-wrap:balance}
.page-hero2--image .hero__eyebrow{color:rgba(255,255,255,.85)}
.page-hero2__text{margin-top:22px;max-width:60ch;font-size:clamp(1rem,1.3vw,1.15rem);color:var(--ink-2)}
.page-hero2--image .page-hero2__text{color:rgba(255,255,255,.85)}

/* Split section */
.isplit__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,6vw,90px);align-items:center}
.isplit__grid--rev .isplit__media{order:2}
.isplit__media .about__image{aspect-ratio:4/3.4}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px}
.mini-card{padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);text-align:center;display:flex;flex-direction:column;justify-content:center}
.mini-card h3{font-size:1rem;margin-bottom:6px}
.mini-card p{font-size:.92rem;color:var(--ink-2)}
/* "Part of HSA Group" card: parent-group logo centred on top, then the text.
   Shows the real logo once uploaded (who_card_1_logo); until then a clean HSA
   monogram so the card never looks empty. */
.mini-card--hsa{padding-top:20px}
.mini-card__owner{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.mini-card__logo{display:flex;align-items:center;justify-content:center;height:64px;margin-bottom:22px}
.mini-card__logo img{max-height:64px;max-width:70%;width:auto;object-fit:contain}
.mini-card__logo--mono{font-family:var(--f-display);font-weight:800;font-size:2rem;letter-spacing:.06em;color:var(--burgundy);height:auto}
/* The parent-company mark links out, so give it a hover cue. */
.mini-card__logo--link{transition:transform .3s var(--ease),opacity .3s var(--ease)}
.mini-card__logo--link:hover,.mini-card__logo--link:focus-visible{transform:translateY(-2px);opacity:.85}

/* Heritage stat band: the 90+ years in an animated gold ring, flanked by two
   supporting HSA figures, so the row fills its width instead of leaving the
   counter alone on the left (client request). */
/* Client: four items on a two-by-two grid — 88+ and 1938 above, the employee
   figure and the HSA mark below, each column aligned down the page. Flex-wrap
   put the mark wherever the row happened to break; a grid is deterministic. */
/* One card, two by two: hairline dividers come from the 1px grid gap over the
   line colour, so every cell shares the same frame, padding and alignment —
   the "consistent alignment, spacing, and visual balance" the client asked
   for (17 Aug), without copying their reference outright. */
.legacy__band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:30px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.legacy__icon{color:var(--burgundy);line-height:0}
.legacy__icon svg{width:26px;height:26px}
/* HSA mark cell, linking out to the group. */
.legacy__parent{justify-content:center;transition:opacity .3s var(--ease)}
.legacy__parent img{height:clamp(52px,5vw,70px);width:auto;object-fit:contain}
.legacy__parent:hover,.legacy__parent:focus-visible{opacity:.8}
/* Client: the gap under the heritage band was doing nothing — the figures and
   the HSA mark now finish the section, so it closes up rather than trailing
   off into empty tint before the next one. */
.legacy.section{padding-bottom:calc(var(--sect-pad) * .55)}
/* The mark is the last item in the figure band; on a narrow band it wraps to its
   own line, where pushing it to the end would strand it against the edge. */

.legacy__stat{display:flex;flex-direction:column;align-items:flex-start;gap:8px;background:var(--white);padding:clamp(16px,2vw,24px)}
.legacy__num2{font-family:var(--f-display);font-weight:800;font-size:clamp(1.8rem,2.4vw,2.3rem);color:var(--ink);line-height:1}
.legacy__label{font-size:.9rem;color:var(--ink-2)}
[dir="rtl"] .legacy__stat{align-items:flex-start} /* flex-start follows writing direction */
@media (max-width:560px){.legacy__stat{padding:14px}.legacy__num2{font-size:1.45rem}}

/* Mission / vision */
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,34px)}
.mv-card{padding:clamp(28px,3.5vw,46px);background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.mv-card__icon{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--burgundy);color:#fff;margin-bottom:18px}
.mv-card__icon svg{width:28px;height:28px}
.mv-card__label{margin:0 0 14px;font-size:.92rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--burgundy)}
[dir="rtl"] .mv-card__label{letter-spacing:normal;text-transform:none;font-size:1.15rem}
.mv-card p{color:var(--ink-2);font-size:1.05rem;line-height:1.75;margin:0}

/* Feature cards (numbered) */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.feat-grid--4{grid-template-columns:repeat(4,1fr)}
.feat-grid--5{grid-template-columns:repeat(5,1fr)}
/* Five to a row leaves each card narrow, and the standard padding was eating a
   third of that width — which is a good part of why the copy ran so deep
   (client, 31 Aug: "make it shorter"). A tighter gutter puts more words on
   every line and takes lines off the bottom of every card. */
.feat-grid--5 .feat-card{padding:clamp(18px,1.7vw,24px)}
@media (max-width:1180px){.feat-grid--5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1180px){.feat-grid--5 .feat-card{padding:clamp(24px,2.6vw,34px)}}
.feat-card{padding:clamp(24px,2.6vw,34px);background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.feat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.feat-card__no{font-family:var(--f-display);font-weight:800;font-size:.95rem;color:var(--gold);letter-spacing:.05em}
.feat-card h3{margin:14px 0 10px;font-size:1.2rem}
.feat-card p{text-align:justify;text-align-last:start;hyphens:auto;color:var(--ink-2);font-size:.92rem}
/* Client (31 Aug): "improve alignment". Justifying Arabic in a column this
   narrow stretches the word spaces into rivers — the browser has no kashida to
   fall back on, and English gets hyphens where Arabic gets none. Natural
   right-alignment reads far cleaner at this width. */
[dir="rtl"] .feat-card p{text-align:start;hyphens:none}

/* Solution cards (image) */
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
.sol-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.sol-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
/* Near-square media (5:4), matching the ratio the artwork ships at so the photo
   is never cropped a second time at render. */
.sol-card__media{aspect-ratio:5/4;overflow:hidden}
.sol-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.sol-card:hover .sol-card__media img{transform:scale(1.06)}
.sol-card__body{padding:24px}
.sol-card__body h3{font-size:1.2rem;margin-bottom:8px}
.sol-card__body p{color:var(--ink-2);font-size:.92rem}
/* "Our solutions" fits one screen again (client), WITHOUT the wide 16:10 crop
   that squashed each scene.
   Cards are sized from the height that is actually available rather than from
   the column width: --rowH is what one of the two rows can occupy, the caption
   takes what it needs, and the media fills the rest. The card WIDTH is derived
   from that same height, so the row grows as wide as the viewport can afford
   instead of leaving the section stranded thin in the middle of the page.
   Ratio note: the media ratio is the dial that trades squareness for width.
   A strict 5:4 fits but leaves the row thin (~+7%); 11:8 (1.375) buys the
   ~16% the client asked for and still sits well short of the 16:10 crop they
   called too wide. It renders between 1.21 and 1.38 in practice — squarest on
   large screens, where the card is capped by the container instead. */
.sol-fit{padding-block:clamp(20px,2.8vh,34px)}
.sol-fit .section-head-center{margin-bottom:clamp(18px,2.2vh,30px)}
/* Client (31 Aug): "image height isn't same across items, it should be same and
   different size images adjusted to the ratio". It was not the same: the media
   took whatever height the caption left over, so the single card whose copy ran
   one line longer showed a visibly shorter photo (200px against 221px in
   English, and the same fault on a different card in Arabic).

   The frame is a fixed ratio now. Every card is one column wide, so every photo
   is exactly the same height in every card, in both languages, and the caption
   takes the room it needs underneath instead of stealing it from the picture.
   That retires the fit-one-screen height maths this grid used to run: rows are
   sized by their content, which is what keeps the photos honest. */
.sol-fit .sol-grid{
  --gap:clamp(12px,1.4vw,22px);
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap);
}
.sol-fit .sol-card{display:flex;flex-direction:column;overflow:hidden}
/* Square. The two shop-floor photographs are portrait, and the client wants the
   Arabic aisle sign above the shelves in frame with them — "more visibility on
   mobile + desktop". A square frame is what reaches it: the picture stands 25%
   taller than at 5:4 and both signs, both faces and both AITC badges land
   inside. Those two files are cut square and anchored to their top edge, which
   is where the signs are; the four landscape scenes keep their own 5:4 files
   and give up a tenth of their width either side, which costs them nothing —
   the boardroom, the truck, the depot and the charts all still read. */
.sol-fit .sol-card__media{flex:none;aspect-ratio:1/1}
.sol-fit .sol-card__body{flex:1 1 auto}
.sol-fit .sol-card__body{padding:clamp(8px,1.1vh,12px) clamp(11px,1.1vw,16px)}
.sol-fit .sol-card__body h3{font-size:clamp(.88rem,1.7vh,1.02rem);margin-bottom:2px}
.sol-fit .sol-card__body p{font-size:clamp(.74rem,1.4vh,.84rem);line-height:1.4;text-align:justify;text-align-last:start;hyphens:auto}
/* Two up, then one up. The frame keeps its ratio all the way down, so the crop
   no longer drifts between breakpoints (it used to render 1.03 on a tablet and
   1.51 on a phone, from rows that still carried a viewport-derived height). */
@media (max-width:900px){
  .sol-fit .sol-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .sol-fit .sol-grid{grid-template-columns:1fr}
}
.sol-fit .sol-card__body{padding:clamp(14px,1.8vh,20px) clamp(14px,1.6vw,20px)}
.sol-fit .sol-card__body h3{font-size:clamp(1rem,1.9vh,1.16rem);margin-bottom:6px}
.sol-fit .sol-card__body p{font-size:clamp(.82rem,1.55vh,.9rem);line-height:1.5;text-align:justify;text-align-last:start;hyphens:auto}

/* Category banner cards: the composed image IS the card (name + products).
   Doubled selectors out-rank the base .cat-grid/.cat-card rules that appear
   later in this file (3-col grid + 4/3.2 aspect would otherwise win). */
.cat-grid.cat-grid--banners{grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px)}
/* Odd card count: centre the last banner instead of leaving it stranded in a
   half-empty row (kept at column width so every card stays the same size).
   Two-column layout only — below 820px the grid is single-column and every
   card is already full width. */
@media (min-width:821px){
	.cat-grid.cat-grid--banners>.cat-card--banner:last-child:nth-child(odd){
		grid-column:1/-1;width:calc(50% - clamp(16px,2vw,26px)/2);margin-inline:auto}
}
.cat-card.cat-card--banner{aspect-ratio:auto;padding:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.cat-card.cat-card--banner:hover{transform:translateY(-6px);border-color:var(--gold-soft);
  box-shadow:0 26px 52px -22px rgba(58,8,20,.28),0 8px 20px -10px rgba(58,8,20,.14)}
.cat-card.cat-card--banner img{display:block;width:100%;height:auto;transition:transform .7s var(--ease-out)}
.cat-card.cat-card--banner:hover img{transform:scale(1.015)}
/* The banner is now a button (client, 31 Aug) — it must carry no button
   chrome of its own, and it takes the magnifier the gallery frames use. */
.cat-card__zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative}
.cat-card__zoom:focus-visible{outline:2px solid var(--burgundy);outline-offset:3px}
.cat-card__zoomicon{position:absolute;inset-inline-end:14px;bottom:14px;width:38px;height:38px;display:grid;place-items:center;
  border-radius:50%;color:#fff;background:rgba(18,8,11,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.cat-card__zoom:hover .cat-card__zoomicon,.cat-card__zoom:focus-visible .cat-card__zoomicon{opacity:1;transform:none}
.cat-card__zoomicon svg{width:19px;height:19px}
@media (max-width:820px){.cat-grid.cat-grid--banners{grid-template-columns:1fr}}

/* Category cards */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px)}
.cat-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3.2;box-shadow:var(--shadow-sm)}
.cat-card__media{position:absolute;inset:0}
.cat-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.cat-card:hover .cat-card__media img{transform:scale(1.08)}
.cat-card__body{position:absolute;inset:auto 0 0 0;padding:22px;color:#fff;background:linear-gradient(180deg,transparent,rgba(20,8,12,.85))}
.cat-card__body h3{font-size:1.2rem}
.cat-card__body p{font-size:.86rem;color:rgba(255,255,255,.82);margin-top:4px}

/* Product range — real product shots grouped by brand */
.prodrange{display:flex;flex-direction:column;gap:clamp(32px,4vw,52px)}
.prodrange__brand{font-family:var(--f-display);font-weight:800;font-size:clamp(1.05rem,1.5vw,1.35rem);color:var(--burgundy);
  display:flex;align-items:center;gap:12px;padding-bottom:12px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.prodrange__brand::before{content:"";width:22px;height:2px;background:var(--gold);flex:0 0 auto}
.prodrange__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:clamp(12px,1.4vw,20px)}
@media (max-width:380px){.prodrange__grid{grid-template-columns:1fr 1fr}}
.product-card{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .35s}
.product-card:hover{transform:translateY(-5px);border-color:var(--burgundy);box-shadow:var(--shadow-md)}
.product-card__media{display:block;aspect-ratio:1/1;background:#fff}
/* The media is a button so the larger view is keyboard-reachable; strip the
   control chrome and give it a quiet affordance instead. */
.product-card__media--zoom{width:100%;padding:0;border:0;background:#fff;cursor:zoom-in;position:relative}
.product-card__media--zoom img{transition:transform .4s var(--ease)}
.product-card__media--zoom:hover img,.product-card__media--zoom:focus-visible img{transform:scale(1.05)}
.product-card__media--zoom:focus-visible{outline:2px solid var(--burgundy);outline-offset:-2px}
/* Larger product image */
body.lightbox-open{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
  padding:clamp(18px,4vw,54px);background:rgba(18,8,11,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lightbox[hidden]{display:none}
.lightbox__figure{margin:0;max-width:min(760px,92vw);max-height:88vh;display:flex;flex-direction:column;gap:16px;text-align:center}
.lightbox__figure img{max-width:100%;max-height:72vh;width:auto;height:auto;object-fit:contain;background:#fff;border-radius:14px;box-shadow:var(--shadow-md)}
.lightbox__cap{color:#fff;display:flex;flex-direction:column;gap:4px}
.lightbox__name{font-family:var(--f-display);font-weight:700;font-size:1.05rem}
.lightbox__brand{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-soft)}
[dir="rtl"] .lightbox__brand{letter-spacing:normal;text-transform:none}
.lightbox__close{position:absolute;top:clamp(12px,2vw,22px);inset-inline-end:clamp(12px,2vw,22px);
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:#fff;
  background:rgba(255,255,255,.14);transition:background .3s var(--ease)}
.lightbox__close:hover,.lightbox__close:focus-visible{background:rgba(255,255,255,.26)}
.lightbox__close svg{width:22px;height:22px}
/* A photograph fills its frame edge to edge — the white plate behind a cut-out
   product shot would read as a border around it. */
.lightbox__figure--photo{max-width:min(1180px,94vw)}
.lightbox__figure--photo img{max-height:78vh;background:transparent;border-radius:16px}
/* A category banner is a wide composite — name, blurb and pack shots in one
   image — so it wants the room a photograph does not.

   It fits the frame rather than forcing its own width. Pinning it to 1280px
   put a scrollbar under it on any viewport narrower than that, and pushed the
   artwork past its own resolution on top — the client saw both. Fitting keeps
   the frame clean and never asks the image to be bigger than it was drawn.
   Sits after the base figure rules deliberately: same specificity, so source
   order is what decides. */
.lightbox__figure--wide{max-width:min(1340px,95vw)}
.lightbox__figure--wide img{width:100%;height:auto;max-height:82vh;object-fit:contain}
.product-card__media img{width:100%;height:100%;object-fit:contain}
.product-card__name{padding:10px 12px 4px;font-size:.78rem;line-height:1.35;color:var(--ink-2);text-align:center}
.product-card__brand{display:block;padding:0 12px 14px;margin-top:auto;font-family:var(--f-display);font-weight:600;
  font-size:.66rem;letter-spacing:.04em;color:var(--gold);text-align:center;text-transform:uppercase}

/* Product browser (search + filters + brand cards + filtered grid) */
.pbrowser{display:flex;flex-direction:column;gap:clamp(24px,3vw,38px)}
.pbrowser__filters{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.pbrowser__search{position:relative;flex:1 1 300px;min-width:0;display:flex;align-items:center}
.pbrowser__search-icon{position:absolute;inset-inline-start:16px;width:18px;height:18px;color:var(--ink-3);pointer-events:none}
.pbrowser__search input{width:100%;padding:14px 18px 14px 46px;border:1px solid var(--line);border-radius:var(--radius-pill);
  background:#fff;font-family:var(--f-body);font-size:.95rem;color:var(--ink);transition:border-color .3s,box-shadow .3s}
[dir="rtl"] .pbrowser__search input{padding:14px 46px 14px 18px}
.pbrowser__search input::placeholder{color:var(--ink-3)}
.pbrowser__search input:focus{outline:none;border-color:var(--burgundy);box-shadow:0 0 0 3px rgba(128,0,32,.1)}
.pbrowser__selects{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pbrowser__selects select{appearance:none;-webkit-appearance:none;padding:13px 40px 13px 18px;border:1px solid var(--line);
  border-radius:var(--radius-pill);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23800020' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center;
  font-family:var(--f-body);font-size:.92rem;font-weight:500;color:var(--ink);cursor:pointer;transition:border-color .3s}
.pbrowser__selects select:focus{outline:none;border-color:var(--burgundy)}
.pbrowser__clear{font-family:var(--f-display);font-weight:600;font-size:.86rem;color:var(--burgundy);padding:8px 6px;white-space:nowrap}
.pbrowser__clear:hover{color:var(--burgundy-deep)}
.pbrowser__brands-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:clamp(20px,2.6vw,32px)}
.pbrowser__brands-head h3{font-family:var(--f-display);font-weight:700;font-size:clamp(1.1rem,1.7vw,1.4rem)}
.pbrowser__viewall{font-family:var(--f-display);font-weight:600;font-size:.9rem;color:var(--burgundy);display:inline-flex;align-items:center;gap:8px}
.pbrowser__viewall .dir-arrow{transition:transform .3s var(--ease)}
.pbrowser__viewall:hover .dir-arrow{transform:translateX(4px)}
.pbrowser__brands{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px)}
/* Showcase: auto-fit columns so any number of brands fills the row on every
   screen instead of leaving a half-empty last row. */
.pbrowser__brands--showcase{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
/* Showcase mode (Product Portfolio): brand cards are plain links, no counts. */
.pbrowser__brands--showcase .pbrowser__brand{text-decoration:none;color:inherit}
.pbrowser__cta{text-align:center;margin-top:clamp(28px,3.4vw,40px)}
.pbrowser__more-wrap{text-align:center;margin-top:clamp(24px,3vw,36px)}
.pbrowser__brand{text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 18px 20px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;
  box-shadow:var(--shadow-sm);transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s}
.pbrowser__brand:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--gold-soft)}
.pbrowser__brand.is-active{border-color:var(--burgundy);box-shadow:0 0 0 2px rgba(128,0,32,.14),var(--shadow-md)}
/* Logo box mirrors the home-page brand cards: one definite height for every
   card, logo centred and contained, so wide and tall marks read at the same
   optical size instead of stretching their row. */
.pbrowser__brand-media{width:100%;height:clamp(62px,6vw,78px);flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:14px}
.pbrowser__brand-media img{max-width:82%;max-height:clamp(62px,6vw,78px);width:auto;height:auto;object-fit:contain;transition:transform .4s var(--ease)}
.pbrowser__brand:hover .pbrowser__brand-media img{transform:scale(1.04)}
.pbrowser__brand-mark{font-family:var(--f-display);font-weight:700;font-size:1.05rem;color:var(--ink);text-align:center}
.pbrowser__brand-name{font-family:var(--f-display);font-weight:700;font-size:1.02rem;color:var(--ink)}
.pbrowser__brand-tag{font-size:.8rem;line-height:1.4;color:var(--ink-2);min-height:2.2em}
.pbrowser__brand-count{margin-top:4px;font-family:var(--f-display);font-weight:600;font-size:.72rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--gold);background:var(--paper-2);padding:5px 12px;border-radius:var(--radius-pill)}
.pbrowser__bar{display:flex;justify-content:flex-end}
.pbrowser__count{font-size:.82rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.pbrowser__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:clamp(12px,1.4vw,20px)}
@media (max-width:420px){.pbrowser__grid{grid-template-columns:1fr 1fr}}
.pbrowser__grid .product-card[hidden]{display:none}
.pbrowser__empty{text-align:center;padding:40px 0;color:var(--ink-3);font-size:1rem}
@media (max-width:900px){.pbrowser__brands{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pbrowser__filters{flex-direction:column;align-items:stretch}.pbrowser__selects{justify-content:space-between}
  .pbrowser__selects select{flex:1 1 auto}}

/* Stat row */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.stat-row__item{text-align:center;padding:24px}
.stat-row__num{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,4vw,3.4rem);color:var(--burgundy);line-height:1}
.stat-row__title{display:block;margin-top:10px;font-weight:600}
.stat-row__text{display:block;margin-top:6px;font-size:.88rem;color:var(--ink-2)}

/* Region grid + network snapshot */
.region-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}
.region-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .4s}
.region-card:hover{transform:translateY(-6px);border-color:var(--burgundy);box-shadow:var(--shadow-md)}
.region-card__art{display:block;height:66px;color:var(--gold-soft);background:linear-gradient(180deg,var(--paper-2),#fff);border-bottom:1px solid var(--line);padding:0 18px}
.region-card__skyline{width:100%;height:100%;transform:translateY(5px);transition:transform .6s var(--ease-out),color .45s}
.region-card:hover .region-card__skyline{transform:translateY(0);color:var(--burgundy)}
.region-card__body{padding:18px 20px 22px}
.region-card__body h3{font-size:1.05rem;color:var(--burgundy);margin-bottom:6px}
.region-card__body p{color:var(--ink-2);font-size:.92rem}
/* Regional coverage list (full city breakdown, scales to any list length) */
.coverage{display:flex;flex-direction:column;gap:14px;max-width:1040px;margin-inline:auto}
.coverage__row{display:grid;grid-template-columns:200px 1fr;gap:clamp(20px,3vw,40px);align-items:center;
  padding:20px clamp(20px,2.4vw,30px);background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .4s}
.coverage__row:hover{transform:translateY(-3px);border-color:var(--burgundy);box-shadow:var(--shadow-md)}
.coverage__region{display:flex;flex-direction:column;gap:7px}
.coverage__art{display:block;width:96px;height:30px;color:var(--gold-soft)}
.coverage__art svg{width:100%;height:100%}
.coverage__name{font-family:var(--f-display);font-weight:800;font-size:1.15rem;color:var(--burgundy);line-height:1}
.coverage__count{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.coverage__cities{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:640px){.coverage__row{grid-template-columns:1fr;gap:14px}}
.dist__snapshot{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
/* Each row reads as one sentence — the bold figure flows inline with its
   description instead of sitting in its own flex column, which squeezed the
   longer Arabic figures ("أكثر من 30 مدينة") into a stacked sliver of words.
   The tick anchors to the row's inline-start, so RTL mirrors it cleanly. */
.dist__snapshot li{position:relative;display:block;padding-inline-start:28px;font-size:.92rem;color:var(--ink-2)}
.dist__snapshot li .dist__channel-tick{position:absolute;inset-inline-start:0;top:.12em}
.dist__snapshot strong{color:var(--ink)}

/* Contact */
.contact__grid{display:grid;grid-template-columns:1.35fr .9fr;gap:clamp(30px,4vw,60px);align-items:start}
.contact-form{margin-top:24px;display:flex;flex-direction:column;gap:16px}
.contact-form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form label{display:flex;flex-direction:column;gap:7px;font-size:.85rem;font-weight:600;color:var(--ink-2)}
.contact-form input,.contact-form select,.contact-form textarea{font-family:inherit;font-size:.95rem;padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);transition:border-color .3s,box-shadow .3s}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--burgundy);box-shadow:0 0 0 3px rgba(128,0,32,.1)}
.contact-form .btn{align-self:flex-start;margin-top:6px}
.contact__info{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(26px,3vw,40px)}
.contact__info h3{font-size:1.3rem;margin-bottom:20px}
.contact__list{display:flex;flex-direction:column;gap:18px}
.contact__list li{display:flex;flex-direction:column;gap:3px}
.contact__k{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.contact__v{font-size:1.02rem;color:var(--ink)}
.contact__social{display:flex;gap:14px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line);align-items:center}
/* Social links show their icon only (client) — circular, brand-coloured hover. */
.contact__social-link{display:inline-flex;align-items:center;justify-content:center;color:var(--burgundy);transition:color .3s}
.contact__social-link svg{width:38px;height:38px;padding:9px;border-radius:50%;border:1px solid var(--line);transition:background .3s,border-color .3s,color .3s}
.contact__social-link:hover svg{background:var(--burgundy);border-color:var(--burgundy);color:#fff}
/* Branded office card floating over the Google map (logo + info + open link). */
/* One map per office, side by side (client). The panel — not the container —
   now carries the frame, so the office card sits 16px inside its own panel. */
.contact__maps{margin-top:clamp(30px,4vw,50px);display:grid;gap:clamp(14px,1.8vw,24px)}
.contact__maps--split{grid-template-columns:1fr 1fr}
.contact__map{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.map-card{position:absolute;top:16px;inset-inline-start:16px;z-index:2;display:flex;gap:12px;align-items:flex-start;
  max-width:min(330px,calc(100% - 32px));padding:14px 16px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-md)}
.map-card__logo{width:34px;height:auto;flex:none;margin-top:2px}
.map-card__body{display:flex;flex-direction:column;gap:4px;font-size:.8rem;line-height:1.5;color:var(--ink-2)}
.map-card__body strong{font-size:.87rem;color:var(--ink);line-height:1.35}
.map-card__body a{color:var(--burgundy);font-weight:600;margin-top:2px}
.map-card__body a:hover{text-decoration:underline}
.contact__social a{font-weight:600;font-size:.9rem;color:var(--burgundy)}
.contact__map iframe{width:100%;height:420px;border:0;display:block}
/* Two panels share the row, so each is shorter than the single full-width map. */
.contact__maps--split .contact__map iframe{height:clamp(320px,30vw,400px)}
@media (max-width:860px){
  .contact__maps--split{grid-template-columns:1fr}
  .contact__maps--split .contact__map iframe{height:340px}
}

@media (max-width:1024px){
  .isplit__grid{grid-template-columns:1fr;gap:40px}
  .isplit__grid--rev .isplit__media{order:0}
  .feat-grid,.feat-grid--4,.feat-grid--5,.sol-grid,.cat-grid{grid-template-columns:1fr 1fr}
  .stat-row{grid-template-columns:1fr 1fr}
  .contact__grid{grid-template-columns:1fr}
  .mv-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .feat-grid,.feat-grid--4,.sol-grid,.cat-grid,.mini-grid,.stat-row,.contact-form__row{grid-template-columns:1fr}
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:1024px){
  .about__grid{grid-template-columns:1fr;gap:40px}
  .about__visual{max-width:520px}
  .dist__grid{grid-template-columns:1fr;gap:36px}
  .dist__map{max-width:600px;margin-inline:auto}
  .site-footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:990px){
  /* Seven primary items (Media joined them) stop fitting beside the logo just
     under this width — the longest labels start breaking across two lines — so
     the drawer takes over here rather than at 820. Measured on the English
     menu, which is the wider of the two: with the tightened gap above, labels
     stay on one line down to ~946px, leaving this switch a little headroom.
     Wherever the hamburger shows it is the tallest thing in the row, so the
     padding that keeps the desktop bar at its usual height would make this one
     taller than it was. Pin it instead. */
  .site-header{padding:18px 0}
  .nav,.site-header__actions .btn{display:none}
  .nav-toggle{display:flex}
  /* Keep the EN/AR switcher reachable on mobile (it sits beside the toggle). */
  .site-header__actions .lang-toggle{display:flex}
}
@media (max-width:820px){
  .hero__stats{grid-template-columns:repeat(2,1fr)}
  .hero__stat:nth-child(3){border-inline-start:0}
}
@media (max-width:560px){
  .hero__ticker{position:static;margin-top:40px}
  .hero{padding-block:130px 60px;margin-bottom:0}
  .hero__stats{width:100%}
  .site-footer__grid{grid-template-columns:1fr}
  .dist__channels{grid-template-columns:1fr}
}

/* =========================================================================
   RTL / Arabic overrides
   The layout is already ~80% logical (margin-inline / padding-inline /
   inset-inline-*), so grids and flex rows mirror automatically when the
   locale sets dir="rtl". This block handles only what logical properties
   can't: Arabic type sizing/leading, killing Latin tracking + uppercase,
   flipping directional transforms + arrow glyphs, and mirroring a couple
   of physically-anchored effects. The Saudi map is deliberately NOT
   mirrored (geography is not RTL) — its pins use inline left:% values that
   stay registered over the un-mirrored country path.
   ========================================================================= */
/* Arabic reads larger with more leading than Latin at the same optical size. */
[dir="rtl"] body{font-size:clamp(16px,1.12vw,18.5px);line-height:1.85}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{line-height:1.3}
/* Tracking breaks Arabic letter-joining; reset everywhere in the Arabic scope. */
[dir="rtl"] *{letter-spacing:normal}
/* Uppercase is meaningless in Arabic (no letter case) — undo it on the micro-labels. */
[dir="rtl"] .eyebrow,[dir="rtl"] .eyebrow--light,[dir="rtl"] .hero__eyebrow,[dir="rtl"] .hero__stat-label,
[dir="rtl"] .about__badge-top,[dir="rtl"] .brands__stat-label,[dir="rtl"] .news-card__cat,[dir="rtl"] .news-card__date,
[dir="rtl"] .dist__stat-label,[dir="rtl"] .dist__panel-title--sm,[dir="rtl"] .site-footer__heading,
[dir="rtl"] .coverage__count,[dir="rtl"] .contact__k{text-transform:none}
/* Directional transforms — mirror the horizontal component. */
[dir="rtl"] .page-progress__bar{transform-origin:right}
[dir="rtl"] .nav__link::after{transform-origin:left}
[dir="rtl"] .nav__link:hover::after,[dir="rtl"] .current-menu-item .nav__link::after{transform-origin:right}
/* Compose the glyph flip with the hover nudge (translate after scaleX(-1)
   pushes the arrow visually leftward — the correct RTL "forward"). */
[dir="rtl"] .btn:hover .btn__arrow{transform:scaleX(-1) translateX(4px)}
[dir="rtl"] .news__all:hover .dir-arrow{transform:scaleX(-1) translateX(5px)}
/* Mobile-nav reveal bursts from the toggle, which sits top-left in RTL. */
[dir="rtl"] .mobile-nav{clip-path:circle(0% at 44px 44px)}
[dir="rtl"] .mobile-nav.is-open{clip-path:circle(150% at 44px 44px)}
/* Directional arrow glyphs (→) must point the other way. */
[dir="rtl"] .dir-arrow{display:inline-block;transform:scaleX(-1)}
/* Latin-only runs kept in English (product SKU names, brand group headers,
   the copyright company name) must render as LTR islands — otherwise the RTL
   paragraph direction reorders their words. unicode-bidi:plaintext directions
   each element by its own content (Arabic → RTL, Latin → LTR). */
[dir="rtl"] .product-card__name,[dir="rtl"] .prodrange__brand,[dir="rtl"] .site-footer__bottom p{unicode-bidi:plaintext}
/* Contact details are LTR data (phone, email, Latin address lines). plaintext
   directions each by its own content, so "+966 12 423 3043" reads left-to-right
   while an Arabic address line still reads right-to-left. text-align keeps the
   block anchored to the right edge in RTL (plaintext alone left-aligns it). */
[dir="rtl"] a[href^="tel:"],[dir="rtl"] a[href^="mailto:"],[dir="rtl"] .contact__v,[dir="rtl"] .site-footer__contact li{unicode-bidi:plaintext;text-align:right}

/* ---- Arabic hero fit (client) ----------------------------------------------
   Arabic headlines run taller than the English; give them more width and a
   slightly smaller size so the whole hero (eyebrow → buttons → stat ticker)
   still fits one desktop viewport, and nothing tucks under the fixed header. */
[dir="rtl"] .hero__inner{max-width:1120px}
[dir="rtl"] .hero__title{font-size:clamp(2.1rem,4.6vw,3.9rem);max-width:20ch;line-height:1.4}
[dir="rtl"] .hero__lead{max-width:66ch}
[dir="rtl"] .hero__paragraph{font-size:clamp(.98rem,1.08vw,1.06rem)}
[dir="rtl"] .hero__eyebrow{margin-bottom:20px}
[dir="rtl"] .page-hero2__title{font-size:clamp(2.1rem,4.6vw,3.9rem);max-width:24ch;line-height:1.4}
[dir="rtl"] .page-hero2__inner{max-width:1000px}
/* Header rows stay vertically centred with Arabic type metrics (top/scrolled). */
[dir="rtl"] .site-header__inner,[dir="rtl"] .nav__menu{align-items:center}
[dir="rtl"] .nav__link{line-height:1.6}

/* ---- Flexible Sections (client page builder) ---- */
.prose{font-size:1.05rem;line-height:1.75;color:var(--ink-2);max-width:72ch}
.prose--center{margin-inline:auto;text-align:center}
.prose > *{margin-bottom:1.1em}
.prose > *:last-child{margin-bottom:0}
.prose h2,.prose h3,.prose h4{font-family:var(--f-display);color:var(--ink);margin-top:1.4em;margin-bottom:.4em;line-height:1.25}
.prose a{color:var(--burgundy);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-inline-start:1.4em}
.prose ul li{list-style:disc;margin-bottom:.4em}
.prose ol li{list-style:decimal;margin-bottom:.4em}
.prose strong{color:var(--ink)}
.mediatext{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,68px);align-items:center}
.mediatext--flip .mediatext__media{order:2}
.mediatext__media img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.mediatext__text{font-size:1.05rem;line-height:1.7;color:var(--ink-2);margin-top:.6em}
.mediatext__body .btn{margin-top:1.5em}
@media (max-width:820px){.mediatext{grid-template-columns:1fr;gap:26px}.mediatext--flip .mediatext__media{order:0}}

/* ---- Forms (contact + newsletter) ---- */
/* Honeypot: visually hidden without extending the scroll area (an off-screen
   left:-9999px breaks RTL by adding ~10000px of horizontal overflow). */
.hp-field{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.form-notice{padding:14px 18px;border-radius:var(--radius);margin-bottom:22px;font-size:.98rem;line-height:1.5}
.form-notice--ok{background:rgba(28,107,65,.1);border:1px solid rgba(28,107,65,.32);color:#1c6b41}
.form-notice--err{background:rgba(154,37,48,.08);border:1px solid rgba(154,37,48,.3);color:#9a2530}
.contact-form label.has-err input,.contact-form label.has-err textarea{border-color:#c0392b;box-shadow:0 0 0 2px rgba(192,57,43,.12)}
.field-err{display:block;margin-top:5px;font-size:.82rem;color:#c0392b;font-weight:600}
.subscribe__msg{margin:0 0 10px;font-size:.9rem;line-height:1.4}
.subscribe__msg--ok{color:#8fe3b0}
.subscribe__msg--err{color:#f2a2a2}

/* =========================================================================
 * Mobile type scale (client: "text appears significantly larger on mobile").
 * The clamp() floors that suit a desktop read heavy on a phone; this brings
 * every display size down at phone widths. Last in the file on purpose — the
 * [dir="rtl"] variants must outrank the RTL overrides above.
 * ====================================================================== */
@media (max-width:700px){
  .hero__title,[dir="rtl"] .hero__title{font-size:1.75rem;max-width:18ch}
  .hero__lead-strong{font-size:1rem}
  .hero__paragraph{font-size:.95rem}
  .hero__stat-num{font-size:1.2rem}
  .section-title,[dir="rtl"] .section-title{font-size:1.55rem}
  .page-hero__title,[dir="rtl"] .page-hero__title{font-size:1.7rem}
  .cta-band__title{font-size:1.45rem}
  .lead{font-size:1rem}
  .section-intro{font-size:.95rem}
  .legacy__num2{font-size:1.55rem}
  .chairman__para{font-size:.95rem}
  .mv-card p{font-size:.95rem}
  .site-footer__blurb{font-size:.92rem}
}

/* =========================================================================
   Arabic headline measure (client, 17 Aug: "too many lines")
   The ch-based caps sized for Latin wrap Arabic into four short lines —
   Arabic words run wider, so the same headings get a wider measure and the
   centred intros a fixed one, landing on the two-line shape the client marked.
   ========================================================================= */
[dir="rtl"] .section-title{max-width:24ch}
[dir="rtl"] .section-title--center{max-width:30ch}
[dir="rtl"] .section-intro{max-width:680px}
[dir="rtl"] .hero__title{max-width:22ch}

/* =========================================================================
   News & Media hub (client, 17 Aug — one combined page)
   ========================================================================= */
.media-hub__head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 40px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px)}
.media-hub__title{max-width:none}
.media-hub__news{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.media-hub__news{grid-template-columns:1fr}}
.album-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,30px)}
@media (max-width:860px){.album-grid{grid-template-columns:1fr}}
.album-card{display:flex;flex-direction:column;gap:14px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(16px,1.8vw,22px);box-shadow:var(--shadow-sm);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.album-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.album-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.album-card__name{font-family:var(--f-display);font-weight:700;font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--ink)}
.album-card__cta{font-size:.85rem;font-weight:600;color:var(--burgundy);white-space:nowrap}
.album-card__mosaic{display:grid;grid-template-columns:2fr 1fr;gap:8px;border-radius:var(--radius);overflow:hidden}
.album-card__mosaic--single{grid-template-columns:1fr}
.album-card__mosaic img{width:100%;height:100%;object-fit:cover;display:block}
.album-card__main{aspect-ratio:4/3}
.album-card__side{display:grid;grid-template-rows:1fr 1fr;gap:8px;min-height:0}
.album-card__side>img{min-height:0}
.album-card__more{position:relative;display:block;min-height:0}
.album-card__more img{position:absolute;inset:0}
.album-card__count{position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,16,14,.55);color:#fff;
  font-family:var(--f-display);font-weight:700;font-size:1.2rem}
.album-card__desc{font-size:.92rem;color:var(--ink-2)}

/* =========================================================================
   News tiles (client, 18 Aug) — the news list is editorial, not an album:
   HSA | AITC lockup as the standing mark, then date, title, excerpt. The
   photo gallery keeps its mosaic cards; these two must not look alike.
   ========================================================================= */
.news-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,30px)}
@media (max-width:860px){.news-tiles{grid-template-columns:1fr}}
.news-tile{display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.news-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
/* Logo cover panel (client, 19 Aug, after the HSA site's news list): the
   story's marks on white above the text — never a photo-album look. */
.news-tile__cover{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;
  min-height:0;overflow:hidden;  /* min-height:0 lets aspect-ratio win over the image's
     intrinsic height, so every cover on a row is exactly the same height whatever
     the photo's own proportions (client, 24 Aug) */
  background:var(--white);border-bottom:1px solid var(--line);padding:clamp(16px,2.6vw,30px)}
.news-tile__cover img{max-width:min(88%,600px);max-height:100%;width:auto;height:auto;display:block}
.news-tile__body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;flex:1;
  padding:clamp(16px,2vw,24px) clamp(20px,2.4vw,30px) clamp(20px,2.4vw,30px)}
.news-tile__date{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.news-tile__title{font-family:var(--f-display);font-weight:700;font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.3}
.news-tile__title a{color:var(--ink)}
.news-tile__title a:hover{color:var(--burgundy)}
.news-tile__excerpt{font-size:.95rem;color:var(--ink-2)}
.news-tile__more{font-size:.9rem;font-weight:600;color:var(--burgundy);margin-top:auto}
/* Arabic reads right to left throughout the tile (client, 18 Aug). */
[dir="rtl"] .news-tile__body{align-items:flex-start;text-align:right}

/* ============================================================
   Final review (client, 20 Aug)
   ============================================================ */

/* The page you are on stays underlined in the bar. */
.nav__link--current::after{transform:scaleX(1);transform-origin:left}

/* Footer brand cell: no blurb — a larger logo with LinkedIn beside it. */
.site-footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(24px,2.6vw,34px)}
.site-footer__brandbox{display:inline-flex;flex-direction:column;align-items:center;gap:22px;margin-top:clamp(26px,3vw,44px)}
.site-footer__logo--lg{height:clamp(34px,3vw,46px);margin-bottom:0}
/* Footer brand LinkedIn (client, 24 Aug: "fix icon"): the cell's own circular
   frame is the ONLY ring — the base rule adds a second border + padding to the
   svg, which nested two circles around a glyph shrunk to an invisible dot. Here
   the anchor is the circle and the clean LinkedIn mark fills it. */
.site-footer__brand .footer-linkedin{width:46px;height:46px;justify-content:center;align-items:center;
  border:1px solid rgba(255,255,255,.3);border-radius:50%;margin-top:0;margin-inline-start:2px}
.site-footer__brand .footer-linkedin:hover{border-color:var(--gold);background:transparent}
.site-footer__brand .footer-linkedin svg{width:22px;height:22px;padding:0;border:0;border-radius:0}
.site-footer__brand .footer-linkedin:hover svg{background:transparent}

/* About — Who We Are: the HSA heritage composition. */
.isplit__body .section-title{margin-bottom:var(--head-gap)}
.isplit__body p{text-wrap:pretty}
.isplit__body p + p{margin-top:.85em}
.isplit__body p{text-align:justify;text-align-last:start;hyphens:auto}
.isplit__grid--heritage{align-items:center}
.heritage-media{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,2.4vw,30px)}
.heritage-media__logo{display:block;max-width:min(72%,300px)}
.heritage-media__logo img{width:100%;height:auto;display:block;transition:opacity .3s}
.heritage-media__logo:hover img{opacity:.75}
.heritage-media__art{max-width:100%;height:auto;display:block}
.herit-stats{display:flex;align-items:center;gap:clamp(26px,3.4vw,48px);margin-top:clamp(22px,2.6vw,34px);
  padding-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--line)}
.herit-stat{display:flex;align-items:center;gap:16px}
.herit-stat + .herit-stat{padding-inline-start:clamp(26px,3.4vw,48px);border-inline-start:1px solid var(--line)}
.herit-stat__ring{display:flex;align-items:center;justify-content:center;width:clamp(74px,6.6vw,92px);
  aspect-ratio:1;border-radius:50%;border:1.5px solid var(--gold);outline:1px dashed rgba(176,141,87,.45);
  outline-offset:5px;flex:none}
.herit-stat__num{font-family:var(--f-display);font-weight:700;color:var(--burgundy);
  font-size:clamp(1.5rem,2.1vw,1.9rem);line-height:1}
.herit-stat__num--year{font-size:clamp(1.9rem,2.6vw,2.4rem)}
.herit-stat__label{font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);max-width:11ch;line-height:1.45}
@media (max-width:640px){.herit-stats{flex-direction:column;align-items:flex-start}
  .herit-stat + .herit-stat{padding-inline-start:0;border-inline-start:0;padding-top:18px;border-top:1px solid var(--line)}}

/* Board / team intro statements. */
.leaders__intro{max-width:760px;margin:0 auto clamp(22px,2.6vw,34px);text-align:center}
.leaders__tagline{font-family:var(--f-display);font-weight:700;color:var(--burgundy);
  font-size:clamp(1.05rem,1.4vw,1.25rem);margin-bottom:10px}
.leaders__text{font-size:.98rem;color:var(--ink-2);line-height:1.75}

/* Network — Our Reach: the interactive hub + the retail partners. */
/* Hub beside the logo wall (client, 24 Aug): the graphic takes the left track,
   the retailer logos fill the right — no more empty space to the hub's side. */
.reach-hub--split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,3.4vw,54px);align-items:center;margin-bottom:clamp(26px,3.2vw,44px)}
.reach-hub--split .reach-hub__visual{position:relative;max-width:520px;margin-inline:auto;width:100%}
.reach__grid--beside{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1vw,16px)}
.reach__grid--beside .reach__tile{height:clamp(78px,7vw,104px)}
@media (max-width:900px){
  .reach-hub--split{grid-template-columns:1fr;gap:clamp(24px,4vw,36px)}
  .reach__grid--beside{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:560px){.reach__grid--beside{grid-template-columns:repeat(3,minmax(0,1fr))}}
.reach-hub--pop{display:block}
.reach-hub--pop .reach-hub__visual{position:relative;max-width:640px;margin-inline:auto}
.reach-pop{position:absolute;z-index:6;width:min(300px,72vw);padding:14px 18px;background:var(--white);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);pointer-events:none;
  text-align:start}
.reach-pop::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:8px solid transparent;border-top-color:var(--white)}
.reach-pop--below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--white)}
.reach-pop__title{display:block;font-family:var(--f-display);font-weight:700;color:var(--burgundy);
  font-size:1.02rem;margin-bottom:4px}
.reach-pop__desc{color:var(--ink-2);font-size:.9rem;line-height:1.6;margin:0}
.reach-hub{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,3.4vw,48px);
  align-items:center;margin-bottom:clamp(26px,3.2vw,44px)}
.reach-hub__visual .about-graphic{max-width:520px;margin-inline:auto}
.ag-node--link{cursor:pointer}
.ag-node--link:hover .ag-node-dot{fill:var(--gold)}
.ag-node--active circle:first-of-type{stroke:var(--gold);stroke-width:2}
.ag-node--active .ag-node-dot{fill:var(--gold)}
.reach-hub__panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(22px,2.6vw,34px);box-shadow:var(--shadow-sm);min-height:150px;
  display:flex;flex-direction:column;justify-content:center;gap:10px}
.reach-hub__hint{color:var(--ink-3);font-size:.95rem}
.reach-hub__channel{font-family:var(--f-display);font-weight:700;color:var(--burgundy);font-size:clamp(1.1rem,1.5vw,1.3rem)}
.reach-hub__desc{color:var(--ink-2);font-size:.97rem;line-height:1.7}
@media (max-width:900px){.reach-hub{grid-template-columns:1fr}.reach-hub__panel{min-height:0}}

/* News covers that are photographs fill the panel edge to edge. */
.news-tile__cover--photo{padding:0}
.news-tile__cover--photo img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center}

/* RTL mirrors. */
[dir="rtl"] .leaders__intro{text-align:center}
[dir="rtl"] .heritage-media{direction:ltr}


/* =========================================================================
   Privacy Notice / Cookies Policy, and the cookie consent bar
   (client, 2 Sep — their PDPL requirements)
   ========================================================================= */
/* Legal copy: long, read rather than scanned, so a narrow measure and generous
   leading. No new page furniture — the client asked for no design change. */
.policy{max-width:78ch;margin-inline:auto}
.policy__index{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0 0 clamp(28px,4vw,46px);
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.policy__index a{font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--burgundy)}
[dir="rtl"] .policy__index a{letter-spacing:normal;text-transform:none;font-size:.95rem}
.policy__doc + .policy__doc{margin-top:clamp(46px,6vw,78px);padding-top:clamp(32px,4vw,52px);border-top:1px solid var(--line)}
.policy__title{font-family:var(--f-display);font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 clamp(20px,2.6vw,32px)}
.policy__section{margin-bottom:clamp(24px,3vw,38px);scroll-margin-top:110px}
.policy__h{font-size:clamp(1.05rem,1.9vw,1.25rem);margin:0 0 10px;color:var(--ink)}
.policy p{color:var(--ink-2);line-height:1.75;margin:0 0 12px}
.policy__list{margin:0 0 12px;padding-inline-start:1.25em;color:var(--ink-2);line-height:1.75}
.policy__list li{margin-bottom:7px}
.policy__list li::marker{color:var(--gold)}
/* The cookie table is five columns of short values — it scrolls rather than
   squeezing on a phone. */
.policy__tablewrap{overflow-x:auto;margin:16px 0 20px;border:1px solid var(--line);border-radius:var(--radius)}
.policy__table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:560px}
.policy__table th,.policy__table td{padding:10px 14px;text-align:start;border-bottom:1px solid var(--line)}
.policy__table th{background:var(--paper-2);color:var(--ink);font-weight:600;white-space:nowrap}
.policy__table td{color:var(--ink-2)}
.policy__table tr:last-child td{border-bottom:0}

/* Consent bar. Sits above the content rather than over it — a fixed strip at
   the foot of the window, out of the way of the page it is asking about. */
.cookiebar{position:fixed;inset-inline:0;bottom:0;z-index:1100;background:var(--ink);
  color:#fff;box-shadow:0 -8px 30px rgba(18,8,11,.28)}
.cookiebar[hidden]{display:none}
.cookiebar__inner{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);
  padding-block:clamp(14px,1.8vw,20px);flex-wrap:wrap}
.cookiebar__text{margin:0;flex:1 1 420px;font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.86)}
.cookiebar__link{color:var(--gold-soft);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.cookiebar__actions{display:flex;gap:10px;flex:0 0 auto}
.cookiebar__btn{padding:11px 26px;font-size:.86rem}
.cookiebar .btn--ghost{--bg:transparent;--fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42)}
@media (max-width:640px){
  .cookiebar__inner{gap:12px}
  .cookiebar__actions{width:100%}
  .cookiebar__btn{flex:1}
}

/* Consent tick on the contact form (PDPL requirement 2). The footer's
   newsletter sign-up carried one too for a day; the client reverted it on
   2 Sep, so the dark-panel variant that styled it is gone with it. */
.consent{display:flex;align-items:flex-start;gap:10px;margin:6px 0 4px;
  font-size:.84rem;line-height:1.55;color:var(--ink-2)}
.consent input{flex:0 0 auto;margin-top:.22em;width:16px;height:16px;accent-color:var(--burgundy)}
.consent a{color:var(--burgundy);text-decoration:underline;text-underline-offset:2px}

/* build: final-30 */


/* Gallery lightbox: step between photos (client, 27 Aug). */
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;display:flex;
  align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:rgba(20,10,14,.55);color:#fff;cursor:pointer;
  transition:background .3s var(--ease-out),border-color .3s var(--ease-out),transform .3s var(--ease-out)}
.lightbox__nav:hover{background:var(--burgundy);border-color:var(--burgundy)}
.lightbox__nav:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.lightbox__nav svg{width:26px;height:26px}
.lightbox__nav--prev{inset-inline-start:clamp(8px,2.5vw,34px)}
.lightbox__nav--next{inset-inline-end:clamp(8px,2.5vw,34px)}
/* The arrows point the way the language reads. */
[dir="rtl"] .lightbox__nav--prev svg,[dir="rtl"] .lightbox__nav--next svg{transform:scaleX(-1)}
@media (max-width:640px){.lightbox__nav{width:42px;height:42px}.lightbox__nav svg{width:21px;height:21px}}

/* "Watch video" call to action + its modal (client, 27 Aug). */
.watch-video{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(20px,2.4vw,30px);
  padding:13px 24px;border-radius:var(--radius-pill);background:var(--burgundy);color:#fff;
  font-weight:600;font-size:.95rem;border:1px solid var(--burgundy);cursor:pointer;
  transition:background .35s var(--ease-out),transform .35s var(--ease-out)}
.watch-video:hover{background:var(--burgundy-bright);transform:translateY(-2px);color:#fff}
.watch-video:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.watch-video__icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:rgba(255,255,255,.16);flex:none}
.watch-video__icon svg{width:14px;height:14px;margin-inline-start:2px}
.vmodal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,4vw,40px);background:rgba(12,6,9,.86)}
.vmodal[hidden]{display:none}
/* The frame keeps 16:9 but is bounded by the viewport on BOTH axes, so the
   player is as large as the screen allows and never taller than it — the
   close control keeps its margin at the top. */
.vmodal__frame{position:relative;aspect-ratio:16/9;background:#000;
  /* Width is the smallest of: the design cap, the screen's width, and the
     width the remaining height can carry at 16:9. Taking the height-derived
     term keeps the box exactly 16:9 on short or landscape screens instead of
     stretching it wide and letterboxing the picture inside. */
  width:min(1180px, 92vw, calc((100dvh - clamp(96px,16vh,150px)) * 16 / 9));
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md)}
@supports not (height: 100dvh){
  .vmodal__frame{width:min(1180px, 92vw, calc((100vh - clamp(96px,16vh,150px)) * 16 / 9))}
}
/* The slot must fill the frame: an iframe's height:100% resolves against its
   parent, and an auto-height wrapper collapses the player to a short strip. */
.vmodal__frame [data-vmodal-slot]{position:absolute;inset:0}
.vmodal__frame iframe{width:100%;height:100%;border:0;display:block}
.vmodal__close{position:absolute;top:clamp(12px,2.4vw,26px);inset-inline-end:clamp(12px,2.4vw,26px);
  z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);background:rgba(20,10,14,.7);color:#fff;cursor:pointer}
.vmodal__close:hover{background:var(--burgundy);border-color:var(--burgundy)}
.vmodal__close:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.vmodal__close svg{width:20px;height:20px}
body.vmodal-open{overflow:hidden}

/* ---- Arabic keeps the English layout (client, 24 Aug: "no mirror effect").
   Containers run left-to-right exactly as on the English pages; the text
   inside each block stays right-to-left. ---- */
[dir="rtl"] .site-header__inner{direction:ltr}
[dir="rtl"] .site-header__inner .nav ul{direction:rtl}
[dir="rtl"] .isplit__grid{direction:ltr}
[dir="rtl"] .isplit__body{direction:rtl}
[dir="rtl"] .chairman{direction:ltr}
[dir="rtl"] .chairman__body{direction:rtl}
[dir="rtl"] .leaders__grid{direction:ltr}
[dir="rtl"] .leader-card{direction:rtl}
[dir="rtl"] .coverage__row{direction:ltr}
[dir="rtl"] .coverage__region{direction:rtl}
[dir="rtl"] .coverage__cities{direction:ltr}
[dir="rtl"] .coverage__cities .coverage__city-chip,[dir="rtl"] .coverage__cities li{direction:rtl}
[dir="rtl"] .ncv-grid,[dir="rtl"] .net-cov{direction:ltr}
[dir="rtl"] .ncv-card,[dir="rtl"] .net-cov__card{direction:rtl}
[dir="rtl"] .dist__grid{direction:ltr}
[dir="rtl"] .dist__panel{direction:rtl}
[dir="rtl"] .mv-grid{direction:ltr}
[dir="rtl"] .mv-card{direction:rtl}
[dir="rtl"] .reach-hub--split{direction:ltr}
[dir="rtl"] .reach-pop,[dir="rtl"] .reach__grid--beside{direction:rtl}


/* Contact — secure optional attachment */
.contact-upload{margin-top:2px}
.contact-upload__input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.contact-upload__label{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px!important;padding:14px 16px;border:1px dashed var(--line);border-radius:12px;background:var(--paper-2);cursor:pointer;transition:border-color .25s,background .25s,box-shadow .25s}
.contact-upload__label:hover{border-color:var(--burgundy);background:#fff;box-shadow:0 0 0 3px rgba(128,0,32,.06)}
.contact-upload:focus-within .contact-upload__label{border-color:var(--burgundy);box-shadow:0 0 0 3px rgba(128,0,32,.1)}
.contact-upload.has-err .contact-upload__label{border-color:#b42318}
.contact-upload__icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;background:#fff;border:1px solid var(--line);color:var(--burgundy);flex:none}
.contact-upload__icon svg{width:21px;height:21px}
.contact-upload__copy{display:flex;flex-direction:column;min-width:0;gap:2px}
.contact-upload__copy strong{font-size:.9rem;color:var(--ink)}
.contact-upload__copy small{font-size:.76rem;line-height:1.45;font-weight:400;color:var(--ink-3)}
.contact-upload__filename{margin-top:3px;font-size:.78rem;font-weight:600;color:var(--burgundy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.contact-upload__action{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border:1px solid var(--burgundy);border-radius:9px;color:var(--burgundy);font-size:.78rem;font-weight:700;white-space:nowrap;transition:background .25s,color .25s}
.contact-upload__label:hover .contact-upload__action{background:var(--burgundy);color:#fff}
@media (max-width:600px){
  .contact-upload__label{grid-template-columns:auto minmax(0,1fr);align-items:start}
  .contact-upload__action{grid-column:1/-1;width:100%;margin-top:2px}
}