/* ==========================================================================
   LONDON TRADE — DESIGN SYSTEM · corporate platform (2026)
   --------------------------------------------------------------------------
   Built to the October 2026 design brief: white pages, deep navy bands and
   the logo's red, with photography of Cairo and of work in progress.

     · ONE TYPEFACE. Readex Pro, drawn for Latin and Arabic together, carries
       every word. Display headings are set in capitals, heavy and tight;
       Arabic has no capitals, so it keeps the weight and drops the tracking.
     · TWO BRAND COLOURS DOING DISTINCT JOBS. Navy is the brand, the text and
       the bands (statistics, founder's message, call to action). Red marks
       the one action on a screen, section labels and icons.
     · WHITE CARDS, HAIRLINE BORDERS, SOFT SHADOWS. Cards you can click
       anywhere: every card is one link, not a card with a link in a corner.
     · PHOTOGRAPHY WITH A PURPOSE. Cairo on the opening and on every page
       header; work in progress beside it. Real photographs of London Trade's
       own offices and stores can replace these one for one (photos.js).

   Every colour pairing below was computed, not judged by eye: normal text
   clears 4.5:1 against its background and icons clear 3:1 (README, design).

   Written with CSS logical properties (inline-start / inline-end, not left
   / right), so the Arabic site mirrors itself from this one file.
   ========================================================================== */

@import url('fonts.css?v=51040994e8');

/* --- Tokens --------------------------------------------------------------- */
:root{
  --brand:#24326D;              /* logo navy */
  --red:#ED1C24;                /* logo red */
  --red-fill:#D0172C;           /* white text on this clears 4.5:1; the logo red does not */
  --red-fill-hover:#B51326;
  --navy-band:#131C47;          /* the deep navy of the statistics, founder and call-to-action bands */
  --navy-band-2:#1B2760;

  --bg:#FFFFFF;
  --bg-soft:#F5F6FA;
  --surface:#FFFFFF;
  --surface-2:#F1F3F8;
  --line:#E3E6EF;
  --ink:#131B45;                /* headings: a navy-black */
  --text:#454D6B;
  --muted:#60678A;              /* 4.86:1 on the soft grey, 5.3:1 on white */
  --field-line:#848BA8;         /* 3.37:1 on white — a field must be findable (WCAG 1.4.11) */
  --req:#D0172C;

  --accent:#D0172C;             /* labels, icons, highlights */
  --link:#24326D;               /* text links */
  --focus:#24326D;
  --icon:#D0172C;

  --font:'Readex Pro', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Arabic', Tahoma, Arial, sans-serif;

  --container:1280px;
  --gutter:clamp(1rem, 4vw, 2.5rem);
  --band-y:clamp(3.75rem, 7vw, 6rem);

  --r-card:14px;
  --r-control:8px;
  --r-lg:20px;

  --shadow-sm:0 1px 2px rgba(19,27,69,.06), 0 1px 1px rgba(19,27,69,.03);
  --shadow:0 1px 2px rgba(19,27,69,.05), 0 10px 26px -8px rgba(19,27,69,.12);
  --shadow-lg:0 2px 4px rgba(19,27,69,.05), 0 26px 50px -14px rgba(19,27,69,.24);

  --ease:cubic-bezier(.2,.7,.2,1);
  --t:180ms var(--ease);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A0F2B;
    --bg-soft:#0F1535;
    --surface:#121A3D;
    --surface-2:#18214A;
    --line:#263058;
    --ink:#F1F3FA;
    --text:#BAC1DB;
    --muted:#8D96B8;
    --field-line:#646D99;        /* 3.56:1 on the dark card */
    --req:#FF6B70;
    --accent:#FF6B70;            /* 6.8:1 on the dark page */
    --link:#C9D2F7;
    --focus:#FFFFFF;
    --icon:#FF6B70;
    --navy-band:#141D4B;
    --navy-band-2:#1D2862;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -8px rgba(0,0,0,.55);
    --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 28px 56px -12px rgba(0,0,0,.7);
  }
}

/* Anything placed on navy re-reads the same token names, so a component
   never needs a separate "dark" variant of itself. */
.on-dark{
  --ink:#FFFFFF;
  --text:#C3C9E0;               /* 9.9:1 on the band */
  --muted:#9AA2C3;              /* 6.5:1 */
  --line:rgba(255,255,255,.14);
  --surface:rgba(255,255,255,.05);
  --surface-2:rgba(255,255,255,.08);
  --accent:#FF6B70;             /* 5.9:1 on the band */
  --icon:#FF6B70;
  --link:#FFFFFF;
  --focus:#FFFFFF;
  color:var(--text);
}

/* --- Base ----------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
:root{ color-scheme:light dark; }
:root[data-theme="light"]{ color-scheme:light; }
/* The sticky top bar is 84px tall: without this, a focused element or a
   #fragment target scrolls to the very top and lands underneath it. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:6rem; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:1rem; line-height:1.7;
  font-feature-settings:"kern"; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
picture{ display:block; }
h1,h2,h3,h4{ margin:0 0 .6em; color:var(--ink); font-weight:700; letter-spacing:-.015em; text-wrap:balance; }
h1{ font-size:clamp(2.1rem, 1.3rem + 2.8vw, 3.4rem); line-height:1.08; }
h2{ font-size:clamp(1.55rem, 1.2rem + 1.4vw, 2.2rem); line-height:1.15; }
h3{ font-size:1.12rem; line-height:1.35; letter-spacing:-.005em; font-weight:600; }
h4{ font-size:1rem; line-height:1.4; letter-spacing:0; }
p{ margin:0 0 1.1em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
a{ color:var(--link); text-decoration:none; transition:color var(--t); }
a:hover{ color:var(--accent); }
ul,ol{ margin:0 0 1.1em; padding-inline-start:1.2em; }
strong{ color:var(--ink); font-weight:600; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--brand); color:#fff; }

[dir="rtl"] body{ line-height:1.85; }
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{ letter-spacing:0; line-height:1.4; }
[dir="rtl"] .flip{ transform:scaleX(-1); }

.icon{ width:1.25em; height:1.25em; flex:none; }
.nowrap{ white-space:nowrap; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link{ position:absolute; inset-inline-start:1rem; top:-100px; z-index:200; background:var(--ink);
  color:var(--bg); padding:.7rem 1rem; border-radius:var(--r-control); }
.skip-link:focus{ top:1rem; color:var(--bg); }

/* --- Layout --------------------------------------------------------------- */
.page{ display:flex; flex-direction:column; min-height:100dvh; }
main{ flex:1; }
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.band{ padding-block:var(--band-y); }
.band--tint{ background:var(--bg-soft); }
.band--tight{ padding-block:clamp(2.75rem, 5vw, 4rem); }
.band--flush-top{ padding-top:0; }

.grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(1rem, 2vw, 1.5rem); }
.grid > *{ min-width:0; }
@media (min-width:720px){ .grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:720px){ .grid--3{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1024px){ .grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

/* Card rows that always look deliberate: a short last row is centred rather
   than left hanging at one edge. `flow--4` puts four in a row on wide screens
   (for 4, 7 or 8 cards); the templates pick it from the card count. */
.flow{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1rem, 2vw, 1.5rem); }
.flow > *{ flex:0 1 100%; min-width:0; }
/* Cards set height:100% for grids; in a flex row that blocks stretching, so
   here it goes back to auto and every card in a row takes the tallest's height. */
.flow > .feature,.flow > .offer{ height:auto; }
@media (min-width:720px){ .flow > *{ flex-basis:calc((100% - clamp(1rem, 2vw, 1.5rem)) / 2); } }
@media (min-width:1024px){ .flow--3 > *{ flex-basis:calc((100% - 2 * clamp(1rem, 2vw, 1.5rem)) / 3); }
  .flow--4 > *{ flex-basis:calc((100% - 3 * clamp(1rem, 2vw, 1.5rem)) / 4); } }

/* --- Section headings ------------------------------------------------------ */
/* A red label, then the title in capitals with a short red rule after it —
   the rule that runs through the whole brief. */
.heading{ max-width:48rem; margin-bottom:clamp(1.75rem, 3.5vw, 2.5rem); }
.heading--center{ margin-inline:auto; text-align:center; }
.kicker,.heading__kicker{ display:block; margin:0 0 .55rem; font-size:.8rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); line-height:1.4; }
[dir="rtl"] .kicker,[dir="rtl"] .heading__kicker{ letter-spacing:0; font-size:.92rem; }
.title,.heading__title{ margin-bottom:.45em; font-size:clamp(1.45rem, 1.15rem + 1.2vw, 2rem); line-height:1.15;
  text-transform:uppercase; letter-spacing:.005em; }
.title::after,.heading__title::after{ content:""; display:inline-block; width:2.75rem; height:3px; margin-inline-start:.85rem;
  vertical-align:middle; background:var(--red); border-radius:2px; transform:translateY(-.1em); }
.heading--center .heading__title::after{ display:block; margin:.7rem auto 0; transform:none; }
[dir="rtl"] .title,[dir="rtl"] .heading__title{ letter-spacing:0; }
.heading__sub{ font-size:1.05rem; color:var(--text); }
.heading--row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:.5rem 2rem; max-width:none; }
.heading--row > div{ max-width:48rem; }
.heading--row .heading__title{ margin-bottom:0; }

/* --- Buttons and links ---------------------------------------------------- */
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:46px; padding:.7rem 1.3rem; border-radius:var(--r-control);
  font:inherit; font-size:.94rem; font-weight:600; line-height:1.2; text-align:center;
  border:1.5px solid transparent; cursor:pointer;
  transition:background var(--t), border-color var(--t), color var(--t), box-shadow var(--t);
}
.button .icon{ width:1.05em; height:1.05em; transition:transform var(--t); }
.button:hover .icon--arrow{ transform:translateX(3px); }
[dir="rtl"] .button .icon--arrow{ transform:scaleX(-1); }
[dir="rtl"] .button:hover .icon--arrow{ transform:scaleX(-1) translateX(3px); }
.button--primary{ background:var(--red-fill); color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.12); }
.button--primary:hover{ background:var(--red-fill-hover); color:#fff; }
.button--navy{ background:var(--brand); color:#fff; }
.button--navy:hover{ background:var(--navy-band); color:#fff; }
.button--secondary,.button--outline{ background:transparent; color:var(--ink); border-color:currentColor; }
.button--secondary:hover,.button--outline:hover{ color:var(--accent); }
.on-dark .button--secondary,.on-dark .button--outline{ color:#fff; border-color:rgba(255,255,255,.55); }
.on-dark .button--secondary:hover,.on-dark .button--outline:hover{ color:#fff; border-color:#fff; background:rgba(255,255,255,.08); }
.on-dark .button--navy{ background:#fff; color:var(--navy-band); }
.on-dark .button--navy:hover{ background:#E8EBF5; color:var(--navy-band); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .button--navy{ background:#2C3C82; }
  :root:not([data-theme="light"]) .button--navy:hover{ background:#36489A; }
}
.button--sm{ min-height:38px; padding:.45rem .9rem; font-size:.86rem; white-space:nowrap; }
.button-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }

.arrow-link{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color:var(--link); }
.arrow-link .icon{ width:1.05em; height:1.05em; transition:transform var(--t); }
.arrow-link:hover{ color:var(--accent); }
.arrow-link:hover .icon{ transform:translateX(3px); }
[dir="rtl"] .arrow-link .icon{ transform:scaleX(-1); }
[dir="rtl"] .arrow-link:hover .icon{ transform:scaleX(-1) translateX(3px); }

.tag{ display:inline-flex; align-items:center; padding:.22rem .6rem; border-radius:999px;
  font-size:.78rem; font-weight:500; color:var(--text); background:var(--surface-2); border:1px solid var(--line); }
.tags{ display:flex; flex-wrap:wrap; gap:.4rem; }

/* --- Top bar -------------------------------------------------------------- */
.topbar{ position:sticky; top:0; z-index:100; background:var(--bg);
  border-bottom:1px solid transparent; transition:border-color var(--t), box-shadow var(--t); }
.topbar.is-scrolled{ border-bottom-color:var(--line); box-shadow:0 6px 20px -14px rgba(19,27,69,.35); }
.topbar__inner{ display:flex; align-items:center; gap:1rem; min-height:84px; }
.logo{ display:inline-flex; align-items:center; gap:.85rem; margin-inline-end:auto; color:var(--ink); flex:none; }
.logo:hover{ color:var(--ink); }
.logo__img{ display:block; width:auto; height:64px; }
.menu__list{ display:flex; align-items:center; gap:.25rem; list-style:none; margin:0; padding:0; }
.menu__list > li{ position:relative; display:flex; align-items:center; }
.menu__link{ position:relative; display:inline-flex; align-items:center; padding:.55rem .7rem; font-size:.93rem;
  font-weight:500; color:var(--ink); }
.menu__link:hover{ color:var(--accent); }
/* The current page: red, with a red bar under it. */
.menu__link[aria-current]{ color:var(--accent); }
.menu__link[aria-current]::after{ content:""; position:absolute; inset-inline:.7rem; bottom:-.15rem; height:2px;
  background:var(--red); border-radius:2px; }
.menu__caret{ display:inline-grid; place-items:center; width:26px; height:32px; margin-inline-start:-.45rem; padding:0;
  border:0; background:none; color:var(--ink); cursor:pointer; border-radius:6px; }
.menu__caret .icon{ width:15px; height:15px; transform:rotate(90deg); transition:transform var(--t); }
.menu__caret[aria-expanded="true"] .icon{ transform:rotate(-90deg); }
.menu__caret:hover{ color:var(--accent); }
.submenu{ list-style:none; margin:0; padding:.5rem; position:absolute; top:calc(100% + .35rem); inset-inline-start:0;
  min-width:17rem; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--t), transform var(--t), visibility 0s linear 180ms; z-index:10; }
.submenu a{ display:block; padding:.55rem .75rem; border-radius:8px; font-size:.92rem; color:var(--ink); line-height:1.35; }
.submenu a:hover{ background:var(--surface-2); color:var(--accent); }
.submenu a[aria-current]{ color:var(--accent); }
.submenu__label{ display:block; margin:.5rem .75rem .25rem; padding-top:.6rem; border-top:1px solid var(--line);
  font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
[dir="rtl"] .submenu__label{ letter-spacing:0; font-size:.8rem; }
.menu__item--sub.is-open > .submenu{ opacity:1; visibility:visible; transform:none; transition:opacity var(--t), transform var(--t); }
@media (hover:hover) and (min-width:1100px){
  .menu__item--sub:hover > .submenu{ opacity:1; visibility:visible; transform:none; transition:opacity var(--t), transform var(--t); }
}
.menu__list > .menu__cta{ display:none; }
.topbar__actions{ display:flex; align-items:center; gap:.6rem; flex:none; }
.lang-switch{ display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .7rem; border-radius:var(--r-control);
  font-size:.88rem; font-weight:500; color:var(--ink); border:1px solid var(--line); }
.lang-switch:hover{ color:var(--accent); border-color:currentColor; }
.lang-switch .icon{ width:1rem; height:1rem; }
.menu-toggle{ display:none; width:44px; height:44px; align-items:center; justify-content:center;
  border-radius:var(--r-control); border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; }
.menu-toggle .icon{ width:22px; height:22px; }
.menu-toggle .icon--x{ display:none; }
.menu-toggle[aria-expanded="true"] .icon--x{ display:block; }
.menu-toggle[aria-expanded="true"] .icon--menu{ display:none; }
@media (max-width:1099px){
  .topbar__actions .button{ display:none; }
  /* Without JavaScript the menu button could not open anything, so it is not
     shown; the links sit in their own row under the logo instead. */
  .topbar__inner{ flex-wrap:wrap; }
  :root:not(.has-js) .topbar{ position:relative; }   /* two rows tall: let it scroll away */
  .menu{ order:3; flex-basis:100%; padding-block:0 .75rem; }
  .menu__list{ flex-wrap:wrap; gap:.15rem; }
  .menu__caret,.submenu{ display:none; }
  .has-js .topbar__inner{ flex-wrap:nowrap; }
  .has-js .menu-toggle{ display:inline-flex; }
  .has-js .menu{ order:0; flex-basis:auto; position:fixed; inset:84px 0 auto 0;
    padding:1rem var(--gutter) 1.5rem; background:var(--bg); border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg); max-height:calc(100dvh - 84px); overflow-y:auto;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    /* Closing: visibility waits for the fade to finish. Opening: visibility is
       left out of the transition, so it switches on instantly and focus can
       move into the menu straight away. */
    transition:opacity var(--t), transform var(--t), visibility 0s linear 180ms; }
  .has-js .menu.is-open{ opacity:1; visibility:visible; transform:none;
    transition:opacity var(--t), transform var(--t); }
  .has-js .menu__list{ flex-direction:column; align-items:stretch; gap:0; }
  .has-js .menu__list > li{ display:block; border-bottom:1px solid var(--line); }
  .has-js .menu__link{ display:flex; padding:.9rem .25rem; font-size:1.05rem; }
  .has-js .menu__link[aria-current]::after{ display:none; }
  /* The services list sits open under its heading in the phone menu. */
  .has-js .submenu{ display:block; position:static; opacity:1; visibility:visible; transform:none; transition:none;
    min-width:0; padding:0 0 .75rem; margin-top:-.35rem; border:0; box-shadow:none; background:none; }
  .has-js .submenu a{ padding:.5rem .75rem; color:var(--text); }
  .has-js .submenu__label{ margin-inline:.75rem; }
  .has-js .menu__list > .menu__cta{ display:block; border-bottom:0; padding-top:1.25rem; }
  .has-js .menu__cta .button{ width:100%; }
}
/* 320px is the width WCAG asks a page to work at (and what 1280px becomes at
   400% zoom). Logo, language switch and menu button must all fit it. */
@media (max-width:399px){
  .topbar__inner{ gap:.5rem; }
  .logo__img{ height:48px; }
  .lang-switch{ padding:.45rem .55rem; }
  .lang-switch .icon{ display:none; }
}

/* --- Home: the opening ------------------------------------------------------ */
/* Text on the left over white; Cairo behind it, fading in from the white;
   three photographs of work in progress stacked down the far edge, their
   inner edge cut on a slant; the navy statistics bar across the bottom. */
.hero{ position:relative; isolation:isolate; overflow:hidden; background:var(--bg); }
.hero__inner{ position:relative; z-index:2; display:flex; align-items:center;
  min-height:clamp(30rem, 44vw, 38rem); padding-block:clamp(2.5rem, 5vw, 4rem) clamp(5.5rem, 8vw, 7rem); }
.hero__copy{ max-width:36rem; }
.hero__title{ margin:0 0 1.25rem; font-size:clamp(2.3rem, 1.05rem + 3.15vw, 3.75rem); line-height:1.02;
  letter-spacing:-.01em; text-transform:uppercase; }
.hero__eyebrow{ display:block; margin-bottom:1rem; font-size:.8rem; font-weight:600; letter-spacing:.1em;
  line-height:1.4; color:var(--accent); }
.hero__line{ display:block; }
.hero__accent{ color:var(--red-fill); }
.hero__lede{ font-size:clamp(1rem, .95rem + .25vw, 1.12rem); color:var(--text); max-width:31rem; }
.hero .button-row{ margin-top:1.75rem; }
[dir="rtl"] .hero__title{ letter-spacing:0; line-height:1.25; font-size:clamp(2.1rem, 1.1rem + 2.7vw, 3.3rem); }
[dir="rtl"] .hero__eyebrow{ letter-spacing:0; font-size:.92rem; line-height:1.6; }

.hero__media{ position:absolute; z-index:1; inset-block:0 3.25rem; inset-inline-end:0; width:min(66%, 60rem); }
.hero__sky{ position:absolute; inset-block:0; inset-inline-start:0; inset-inline-end:28%; }
.hero__sky img,.hero__panel img{ width:100%; height:100%; object-fit:cover; }
.hero__sky img{ object-position:30% 60%; }
/* The photograph fades in from the white of the page behind the headline. */
.hero__sky{ -webkit-mask-image:linear-gradient(to right, transparent 0, rgba(0,0,0,.35) 18%, #000 52%);
          mask-image:linear-gradient(to right, transparent 0, rgba(0,0,0,.35) 18%, #000 52%); }
[dir="rtl"] .hero__sky{ -webkit-mask-image:linear-gradient(to left, transparent 0, rgba(0,0,0,.35) 18%, #000 52%);
          mask-image:linear-gradient(to left, transparent 0, rgba(0,0,0,.35) 18%, #000 52%); }
.hero__stack{ position:absolute; inset-block:0; inset-inline-end:0; width:34%; display:grid; grid-template-rows:repeat(3, 1fr);
  gap:6px; background:var(--bg); padding-inline-start:6px;
  clip-path:polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
[dir="rtl"] .hero__stack{ clip-path:polygon(0 0, 84% 0, 100% 100%, 0 100%); }
.hero__panel{ min-height:0; overflow:hidden; }
@media (max-width:1023px){
  .hero__inner{ min-height:0; padding-block:2.5rem 1.75rem; }
  .hero__media{ position:relative; inset:auto; width:auto; height:clamp(13rem, 46vw, 22rem); }
  .hero__sky{ inset:0; -webkit-mask-image:none; mask-image:none; }
  .hero__stack{ display:none; }
}

/* The statistics bar: navy, five figures, each with its icon. */
.statbar{ position:relative; z-index:3; list-style:none; margin:0; padding:clamp(1.1rem, 2.4vw, 1.6rem) clamp(.75rem, 2vw, 1.5rem);
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.1rem 0;
  background:linear-gradient(100deg, var(--navy-band), var(--navy-band-2)); border-radius:var(--r-card);
  box-shadow:0 24px 50px -24px rgba(19,27,69,.6); }
.hero .statbar{ margin-top:-3.25rem; }
.statbar__item{ display:flex; align-items:flex-start; gap:.85rem; min-width:0; padding-inline:clamp(.6rem, 1.5vw, 1.25rem); }
.statbar__item:last-child:nth-child(odd){ grid-column:1 / -1; }
.statbar__item > .icon{ width:2.1rem; height:2.1rem; margin-top:.1rem; color:#FF6B70; stroke-width:1.5; }
.statbar__item p{ margin:0; min-width:0; }
.statbar__value{ display:block; font-size:clamp(1.45rem, 1.1rem + 1vw, 1.9rem); font-weight:700; line-height:1.05; color:#fff; letter-spacing:-.01em; }
.statbar__label{ display:block; margin-top:.3rem; font-size:.74rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#fff; line-height:1.3; }
.statbar__sub{ display:block; font-size:.78rem; color:#C3C9E0; line-height:1.35; }
[dir="rtl"] .statbar__label{ letter-spacing:0; font-size:.86rem; }
[dir="rtl"] .statbar__value{ letter-spacing:0; }
@media (min-width:720px){ .statbar{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .statbar__item:last-child:nth-child(odd){ grid-column:auto; } }
@media (min-width:1100px){
  .statbar{ grid-template-columns:repeat(5, minmax(0,1fr)); gap:0; }
  .statbar__item + .statbar__item{ border-inline-start:1px solid rgba(255,255,255,.14); }
}

/* --- Home: business solutions (six cards) ----------------------------------- */
/* Rows of four on wide screens, a short last row centred (seven go 4 + 3). */
.solutions{ --sg:clamp(.85rem, 1.6vw, 1.25rem); list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sg); }
.solutions > li{ flex:0 1 100%; min-width:0; }
@media (min-width:480px){ .solutions > li{ flex-basis:calc((100% - var(--sg)) / 2); } }
@media (min-width:860px){ .solutions > li{ flex-basis:calc((100% - 2 * var(--sg)) / 3); } }
@media (min-width:1100px){ .solutions > li{ flex-basis:calc((100% - 3 * var(--sg)) / 4); } }
.solution{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:clamp(1.4rem, 2.5vw, 1.9rem) 1.15rem; border-radius:var(--r-card); background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
.solution:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); }
.solution:focus-within{ border-color:var(--accent); }
.solution__icon{ display:grid; place-items:center; width:3.25rem; height:3.25rem; margin-bottom:1rem; color:var(--icon); }
.solution__icon .icon{ width:100%; height:100%; stroke-width:1.4; }
.solution__title{ margin-bottom:.55rem; font-size:1.02rem; font-weight:700; line-height:1.3; }
.solution__title a{ color:var(--ink); }
.solution__title a::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.solution p{ font-size:.9rem; line-height:1.55; color:var(--text); }

/* --- Home: footprint ------------------------------------------------------- */
.footprint__grid{ display:grid; gap:clamp(1.5rem, 3vw, 2.5rem); align-items:center; }
@media (min-width:860px){ .footprint__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
@media (min-width:1180px){ .footprint__grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,1.15fr) minmax(0,.95fr) minmax(0,.8fr); } }
.footprint__intro p{ color:var(--text); }
.footprint__intro .button{ margin-top:.75rem; }
.footprint__map{ margin:0; }
.regions{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.region{ display:flex; align-items:center; gap:.85rem; padding:.8rem 1rem; border-radius:12px; background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.region .icon{ width:1.6rem; height:1.6rem; color:var(--brand); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .region .icon{ color:var(--link); } }
.region b{ display:block; font-size:.95rem; color:var(--ink); line-height:1.3; }
.region span{ display:block; font-size:.82rem; color:var(--muted); line-height:1.4; }
.footprint__card{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:15rem; padding:1.5rem; border-radius:var(--r-card); color:#fff;
  background:linear-gradient(160deg, var(--navy-band-2), var(--navy-band)); }
.footprint__card svg{ position:absolute; inset:6% -8% auto auto; width:100%; height:auto; color:rgba(255,255,255,.4); }
[dir="rtl"] .footprint__card svg{ inset:8% auto auto -6%; }
.footprint__card b{ position:relative; display:block; font-size:clamp(2.6rem, 2rem + 2vw, 3.4rem); line-height:1; font-weight:700; }
.footprint__card span{ position:relative; display:block; margin-top:.4rem; font-size:.95rem; font-weight:600; color:#fff; line-height:1.35; }
.footprint__card span::after{ content:""; display:block; width:2.5rem; height:3px; margin-top:.85rem; background:var(--red); border-radius:2px; }

/* The map: Egypt, the Nile and the offices. Colours come from the tokens so
   the same drawing works on the light page and in dark mode. */
.map{ width:100%; height:auto; overflow:visible; }
.map__land{ fill:var(--surface-2); stroke:color-mix(in srgb, var(--brand) 45%, var(--line)); stroke-width:1; stroke-linejoin:round; }
.map__water{ fill:#B9D3EE; }
.map__river{ fill:none; stroke:#7FAEDD; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .map__water{ fill:#2F4C7F; }
  :root:not([data-theme="light"]) .map__river{ stroke:#4C78B5; }
}
.map__pin path{ fill:var(--red-fill); stroke:#fff; stroke-width:1.2; }
.map__pin circle{ fill:#fff; }
.map__pin--head path{ fill:var(--brand); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .map__pin--head path{ fill:#5468C4; } }
.map__label{ font-family:var(--font); font-size:12.5px; font-weight:600; fill:var(--ink);
  paint-order:stroke; stroke:var(--bg); stroke-width:3.5px; stroke-linejoin:round; }
.map__label--head{ font-weight:700; }
.band--tint .map__label{ stroke:var(--bg-soft); }
.band--tint .map__land{ fill:var(--surface); }

/* --- Home: trusted by ------------------------------------------------------ */
.trusted{ padding-block:clamp(2.25rem, 4vw, 3rem); border-block:1px solid var(--line); background:var(--bg); }
.trusted__title{ margin:0 0 1.5rem; text-align:center; font-size:clamp(1.05rem, .95rem + .4vw, 1.25rem); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
[dir="rtl"] .trusted__title{ letter-spacing:0; }
.brands{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width:600px){ .brands{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (min-width:1100px){ .brands{ grid-template-columns:repeat(7, minmax(0,1fr)); } }
/* Logos sit on white in both themes: they are drawn for a light background. */
.brand{ display:grid; place-items:center; min-height:5rem; padding:.85rem 1rem; border-radius:12px;
  background:#fff; border:1px solid var(--line); }
.brand img,.client img{ width:auto; height:auto; max-height:46px; max-width:min(100%, 132px); object-fit:contain; }
.brand img.logo--tall{ max-height:60px; }
.client-name{ font-size:1.15rem; font-weight:700; letter-spacing:.02em; color:#24326D; line-height:1.2; text-align:center; }

/* --- Home: the founder's message ------------------------------------------ */
.founder{ position:relative; overflow:hidden; padding-block:clamp(3rem, 6vw, 4.5rem);
  background:linear-gradient(110deg, var(--navy-band), var(--navy-band-2)); }
.founder__grid{ display:grid; gap:clamp(2rem, 4vw, 3rem); align-items:center; }
@media (min-width:1024px){
  .founder__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
  .founder__grid--photo{ grid-template-columns:minmax(0,.55fr) minmax(0,1fr) minmax(0,1.1fr); }
}
.founder__portrait{ margin:0; align-self:end; }
.founder__portrait img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-card); }
.founder__message figure{ margin:0; }
.founder h2{ color:#fff; text-transform:none; }
/* A large red opening quotation mark hangs beside the message. */
.founder blockquote{ position:relative; margin:0 0 1.25rem; padding-inline-start:3.25rem; }
.founder blockquote::before{ content:"\201C"; position:absolute; inset-inline-start:0; top:-.6rem; font-size:4.5rem; line-height:1;
  font-weight:700; color:var(--accent); }
[dir="rtl"] .founder blockquote::before{ content:"\201D"; }
.founder figcaption{ padding-inline-start:3.25rem; }
.founder blockquote p{ font-size:clamp(1rem, .96rem + .2vw, 1.1rem); line-height:1.7; color:var(--text); }
.founder__name{ display:block; font-size:1.15rem; font-weight:700; color:#fff; }
.founder__role{ display:block; font-size:.9rem; font-weight:600; color:var(--accent); }
.values{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.75rem 0; }
@media (min-width:600px){ .values{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.value{ padding-inline:clamp(.6rem, 1.4vw, 1.1rem); text-align:center; }
.value + .value{ border-inline-start:1px solid var(--line); }
@media (max-width:599px){ .value:nth-child(3){ border-inline-start:0; } }
.value .icon{ width:2.6rem; height:2.6rem; margin:0 auto .85rem; color:#fff; stroke-width:1.4; }
.value h3{ margin-bottom:.35rem; font-size:.86rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; }
[dir="rtl"] .value h3{ letter-spacing:0; font-size:.95rem; }
.value p{ font-size:.84rem; line-height:1.5; color:var(--text); }

/* --- Careers: four ways in, with a photograph ------------------------------- */
.careers__grid{ display:grid; gap:clamp(1rem, 2vw, 1.5rem); align-items:stretch; }
@media (min-width:1100px){ .careers__grid{ grid-template-columns:minmax(0,3fr) minmax(0,1fr); } }
.actions{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(.85rem, 1.6vw, 1.25rem);
  grid-template-columns:minmax(0,1fr); }
@media (min-width:560px){ .actions{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:900px){ .actions{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.action{ display:flex; flex-direction:column; align-items:flex-start; height:100%; padding:1.35rem 1.25rem;
  border-radius:var(--r-card); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.action > .icon{ width:2.4rem; height:2.4rem; margin-bottom:.85rem; color:var(--brand); stroke-width:1.5; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .action > .icon{ color:var(--link); } }
.action h3{ margin-bottom:.4rem; font-size:.95rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
[dir="rtl"] .action h3{ letter-spacing:0; font-size:1rem; }
.action p{ font-size:.88rem; line-height:1.55; margin-bottom:1rem; }
.action .button{ margin-top:auto; }
.careers__photo{ margin:0; min-height:14rem; border-radius:var(--r-card); overflow:hidden; }
.careers__photo img{ width:100%; height:100%; object-fit:cover; object-position:40% 30%; }
@media (max-width:1099px){ .careers__photo{ display:none; } }

/* --- How we work: six steps in a row, chevrons between --------------------- */
.flowsteps{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width:720px){ .flowsteps{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:1100px){ .flowsteps{ grid-template-columns:repeat(6, minmax(0,1fr)); gap:0; } }
.flowstep{ position:relative; display:flex; align-items:center; gap:.75rem; padding:.5rem clamp(.5rem, 1vw, 1rem);
  font-size:.9rem; font-weight:600; line-height:1.35; color:var(--ink); }
.flowstep .icon{ width:2.4rem; height:2.4rem; color:var(--icon); stroke-width:1.5; }
@media (min-width:1100px){
  .flowstep:not(:last-child)::after{ content:""; position:absolute; inset-inline-end:-.2rem; top:50%; width:.55rem; height:.55rem;
    border-top:2px solid var(--muted); border-inline-end:2px solid var(--muted); transform:translateY(-50%) rotate(45deg); opacity:.6; }
  [dir="rtl"] .flowstep:not(:last-child)::after{ transform:translateY(-50%) rotate(-45deg); }
}

/* --- Call to action band (foot of every page) ------------------------------ */
.cta-band{ background:linear-gradient(100deg, var(--navy-band), var(--navy-band-2)); padding-block:clamp(1.75rem, 3.5vw, 2.25rem); }
.cta-band__inner{ display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 1.75rem; }
.cta-band__icon{ display:grid; place-items:center; width:3.5rem; height:3.5rem; flex:none; border-radius:50%; background:var(--red-fill); color:#fff; }
.cta-band__icon .icon{ width:1.7rem; height:1.7rem; }
.cta-band__text{ flex:1 1 20rem; }
.cta-band h2{ margin:0 0 .2rem; font-size:clamp(1.15rem, 1rem + .7vw, 1.5rem); text-transform:uppercase; letter-spacing:.01em; color:#fff; }
[dir="rtl"] .cta-band h2{ letter-spacing:0; }
.cta-band p{ margin:0; color:var(--text); }
.cta-band__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.5rem; }
.cta-band__link{ font-size:.9rem; font-weight:500; color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.4); }
.cta-band__link:hover{ color:#fff; text-decoration-color:#fff; }

/* --- Inner page opening ---------------------------------------------------- */
/* Navy, with Cairo faded in on the far side: the same photograph as the home
   page, so a visitor arriving on any page sees where the company is. */
.page-intro{ position:relative; isolation:isolate; overflow:hidden; background:var(--navy-band);
  padding-block:clamp(2.5rem, 5.5vw, 4.25rem) clamp(2.75rem, 5.5vw, 4.5rem); }
.page-intro__media{ position:absolute; z-index:-1; inset-block:0; inset-inline-end:0; width:min(58%, 46rem); opacity:.55;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 60%); mask-image:linear-gradient(to right, transparent, #000 60%); }
[dir="rtl"] .page-intro__media{ -webkit-mask-image:linear-gradient(to left, transparent, #000 60%); mask-image:linear-gradient(to left, transparent, #000 60%); }
.page-intro__media img{ width:100%; height:100%; object-fit:cover; object-position:30% 55%; filter:saturate(.6); }
.page-intro::after{ content:""; position:absolute; z-index:-1; inset:0;
  background:linear-gradient(90deg, var(--navy-band) 35%, color-mix(in srgb, var(--navy-band) 55%, transparent)); }
[dir="rtl"] .page-intro::after{ background:linear-gradient(-90deg, var(--navy-band) 35%, color-mix(in srgb, var(--navy-band) 55%, transparent)); }
@media (max-width:719px){ .page-intro__media{ width:100%; opacity:.3; } }
/* When the statistics bar follows, it overlaps the band, so the band keeps that much room below. */
.page-intro--stats{ padding-bottom:calc(clamp(2.75rem, 5.5vw, 4.5rem) + 3.25rem); }
.page-intro--stats + .container .statbar{ margin-top:-3.25rem; }
.page-intro h1{ color:#fff; max-width:24ch; margin-bottom:.45em; text-transform:uppercase; letter-spacing:0;
  font-size:clamp(1.9rem, 1.2rem + 2.4vw, 3rem); line-height:1.1; }
.page-intro h1::after{ content:""; display:block; width:3rem; height:3px; margin-top:.9rem; background:var(--red); border-radius:2px; }
[dir="rtl"] .page-intro h1{ line-height:1.35; }
.page-intro__lede{ font-size:clamp(1rem, .97rem + .25vw, 1.15rem); max-width:44rem; }
.trail{ margin-bottom:1.25rem; font-size:.85rem; }
.trail ol{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; list-style:none; margin:0; padding:0; }
.trail li{ display:flex; align-items:center; gap:.4rem; margin:0; }
.trail li + li::before{ content:""; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.35); }
.trail a{ display:inline-block; padding-block:.2rem; color:var(--muted); }
.trail a:hover{ color:#fff; }
.trail [aria-current]{ color:#fff; }

/* --- Service cards (services index, related services) ------------------------ */
.offer{ position:relative; display:flex; flex-direction:column; height:100%;
  padding:clamp(1.4rem, 3vw, 1.9rem); border-radius:var(--r-card);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
.offer:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); }
.offer:focus-within{ border-color:var(--accent); }
.offer__icon{ display:grid; place-items:center; width:3rem; height:3rem; margin-bottom:1.1rem; color:var(--icon); }
.offer__icon .icon{ width:100%; height:100%; stroke-width:1.45; }
/* Same size whether the card title is an h2 (services index, 404) or an h3. */
.offer__title{ margin-bottom:.5rem; font-size:1.12rem; line-height:1.35; font-weight:700; }
.offer__title a{ color:var(--ink); }
/* One link, the whole card: the heading's link is stretched over it. The
   overlay sits on the <a>, never on the card — on the card it would paint
   over the link and swallow every click. check.js enforces this. */
.offer__title a::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.offer__text{ font-size:.95rem; margin-bottom:1.25rem; }
.offer .tags{ margin-bottom:1.5rem; }
.offer__more{ margin-top:auto; display:inline-flex; align-items:center; gap:.4rem;
  font-weight:600; font-size:.92rem; color:var(--accent); }
.offer__more .icon{ width:1.05em; height:1.05em; transition:transform var(--t); }
.offer:hover .offer__more .icon{ transform:translateX(3px); }
[dir="rtl"] .offer__more .icon{ transform:scaleX(-1); }
[dir="rtl"] .offer:hover .offer__more .icon{ transform:scaleX(-1) translateX(3px); }
.offer--compact{ padding:1.25rem 1.35rem; flex-direction:row; align-items:flex-start; gap:1rem; }
.offer--compact .offer__icon{ margin-bottom:0; width:2.5rem; height:2.5rem; flex:none; }
.offer--compact .offer__text{ margin-bottom:0; font-size:.92rem; }
.offer--compact .offer__title{ font-size:1.02rem; margin-bottom:.25rem; }

/* --- Features (what a service includes) ----------------------------------- */
.feature{ padding:1.4rem; border-radius:var(--r-card); background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--shadow-sm); height:100%; }
.feature__icon{ display:grid; place-items:center; width:2.6rem; height:2.6rem; margin-bottom:.9rem; color:var(--icon); }
.feature__icon .icon{ width:100%; height:100%; stroke-width:1.5; }
.feature h3{ font-size:1rem; margin-bottom:.35rem; font-weight:700; }
.feature p{ font-size:.92rem; }

/* --- Feature panel with a visual (the working-day chart) ------------------- */
.showcase{ display:grid; gap:clamp(2rem, 4vw, 3rem); align-items:start; }
@media (min-width:1024px){ .showcase{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); } }
/* The chart draws its own card, so this wrapper adds only elevation. */
.showcase__visual{ min-width:0; border-radius:16px; box-shadow:var(--shadow); }

/* --- Questions ------------------------------------------------------------ */
/* Native <details>: keyboard accessible, works with no JavaScript, and the
   answer text is in the HTML even when closed — which is what lets search
   engines and AI assistants read it. */
.qa{ display:grid; gap:.65rem; }
.qa__item{ border-radius:12px; background:var(--surface); border:1px solid var(--line);
  transition:border-color var(--t), box-shadow var(--t); }
.qa__item[open]{ border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow:var(--shadow); }
.qa__q{ display:flex; align-items:center; gap:1rem; padding:1.1rem 1.25rem; cursor:pointer; list-style:none;
  font-weight:600; color:var(--ink); line-height:1.45; }
.qa__q::-webkit-details-marker{ display:none; }
.qa__q .icon{ margin-inline-start:auto; width:20px; height:20px; color:var(--accent); transition:transform var(--t); }
.qa__item[open] .qa__q .icon{ transform:rotate(45deg); }
.qa__a{ padding:0 1.25rem 1.25rem; }
.qa__a p{ font-size:.97rem; max-width:70ch; }
.qa-group + .qa-group{ margin-top:2.5rem; }
.qa-group__title{ font-size:1.1rem; margin-bottom:1rem; display:flex; align-items:center; gap:.6rem; text-transform:uppercase; letter-spacing:.02em; }
[dir="rtl"] .qa-group__title{ letter-spacing:0; }
.qa-group__title .icon{ width:22px; height:22px; color:var(--icon); }

/* --- Service detail ------------------------------------------------------- */
.detail{ display:grid; gap:clamp(2rem, 4vw, 3.5rem); align-items:start; }
@media (min-width:1024px){ .detail{ grid-template-columns:minmax(0,1fr) 340px; } }
.prose-body h2{ font-size:clamp(1.25rem, 1.1rem + .6vw, 1.55rem); }
.prose-body p{ font-size:1.05rem; color:var(--text); max-width:68ch; }
.prose-body p + p{ margin-top:1.1em; }
.aside-card{ padding:1.5rem; border-radius:var(--r-card); background:var(--surface);
  border:1px solid var(--line); border-top:3px solid var(--red); box-shadow:var(--shadow); }
@media (min-width:1024px){ .aside-card{ position:sticky; top:100px; } }
.aside-card h2{ font-size:1rem; margin-bottom:1rem; text-transform:uppercase; letter-spacing:.04em; }
[dir="rtl"] .aside-card h2{ letter-spacing:0; }
.aside-card .ticklist li{ font-size:.92rem; color:var(--text); }
.aside-card .button{ width:100%; margin-top:1.5rem; }
.aside-card__note{ margin-top:1rem; font-size:.85rem; color:var(--muted); }

.ticklist{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.ticklist li{ display:flex; gap:.65rem; align-items:flex-start; color:var(--ink); font-size:.95rem; line-height:1.5; }
.ticklist .icon{ width:1.15rem; height:1.15rem; margin-top:.15rem; color:var(--icon); }

/* --- Facts ---------------------------------------------------------------- */
.facts{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-card);
  overflow:hidden; margin:0; }
@media (min-width:720px){ .facts{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.fact{ padding:1.15rem 1.35rem; background:var(--surface); }
.fact dt{ font-size:.78rem; font-weight:600; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; margin-bottom:.3rem; }
[dir="rtl"] .fact dt{ letter-spacing:0; text-transform:none; font-size:.88rem; }
.fact dd{ margin:0; color:var(--ink); font-weight:500; }

/* --- Contact -------------------------------------------------------------- */
.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.contact-item{ display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 1.2rem;
  border-radius:12px; background:var(--surface); border:1px solid var(--line); }
.contact-item__icon{ display:grid; place-items:center; width:40px; height:40px; flex:none;
  border-radius:50%; background:color-mix(in srgb, var(--red-fill) 10%, transparent); color:var(--icon); }
.contact-item__icon .icon{ width:20px; height:20px; }
.contact-item b{ display:block; font-size:.8rem; font-weight:600; color:var(--muted); margin-bottom:.15rem; }
.contact-item > div{ min-width:0; }
.contact-item a,.contact-item span{ color:var(--ink); font-weight:500; overflow-wrap:anywhere; }
.contact-item a:hover{ color:var(--accent); }

.form-card{ padding:clamp(1.4rem, 3vw, 2rem); border-radius:var(--r-lg); background:var(--surface);
  border:1px solid var(--line); border-top:3px solid var(--red); box-shadow:var(--shadow); }
.form-card h2{ font-size:1.3rem; margin-bottom:.35rem; }
.form-card__intro{ margin-bottom:1.5rem; font-size:.96rem; }
.field{ margin-bottom:1rem; }
.field label{ display:block; margin-bottom:.4rem; font-size:.88rem; font-weight:500; color:var(--ink); }
.field .req,.form-card__legend .req{ color:var(--req); }
.form-card__legend{ margin:-.75rem 0 1.25rem; font-size:.85rem; color:var(--muted); }
.input{ width:100%; min-height:46px; padding:.65rem .85rem; border-radius:var(--r-control);
  border:1px solid var(--field-line); background:var(--bg); color:var(--ink); font:inherit; font-size:.97rem;
  transition:border-color var(--t), box-shadow var(--t); }
textarea.input{ min-height:130px; resize:vertical; }
.input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent); }
.field-row{ display:grid; gap:0 1rem; }
@media (min-width:560px){ .field-row{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.form-card__note{ margin-top:1rem; font-size:.85rem; color:var(--muted); }

/* --- Footer --------------------------------------------------------------- */
.site-foot{ padding-block:clamp(2.75rem, 5vw, 3.75rem) 0; font-size:.9rem; background:var(--bg); border-top:1px solid var(--line); }
.site-foot a{ color:var(--text); }
.site-foot a:hover{ color:var(--accent); }
.site-foot__grid{ display:grid; gap:2rem clamp(1.5rem, 3vw, 2.5rem); grid-template-columns:repeat(2, minmax(0,1fr)); }
.site-foot__brand,.site-foot__grid > div:last-child{ grid-column:1 / -1; }
@media (min-width:860px){ .site-foot__grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (min-width:860px){ .site-foot__grid > div:last-child{ grid-column:auto; } }
@media (min-width:1100px){ .site-foot__grid{ grid-template-columns:1.4fr .85fr 1.1fr .9fr 1.55fr; }
  .site-foot__brand{ grid-column:auto; } }
.site-foot__about{ margin-top:1rem; max-width:34ch; color:var(--muted); font-size:.88rem; }
.site-foot h2{ font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); margin-bottom:.9rem; }
[dir="rtl"] .site-foot h2{ letter-spacing:0; font-size:.92rem; }
.site-foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.1rem; }
.site-foot ul a{ display:inline-block; padding-block:.22rem; }
.site-foot__contact li{ display:flex; gap:.55rem; align-items:flex-start; padding-block:.22rem; color:var(--text); }
.site-foot__contact .icon{ width:1rem; height:1rem; margin-top:.3rem; color:var(--icon); }
.site-foot__contact a{ padding-block:0; }
.site-foot__contact a[href^="mailto:"]{ white-space:nowrap; }
.site-foot__social{ display:flex; gap:.5rem; margin-top:1.25rem; }
.site-foot__social a{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--brand); color:#fff; }
.site-foot__social a:hover{ background:var(--red-fill); color:#fff; }
.site-foot__social .icon{ width:17px; height:17px; }
.site-foot__base{ margin-top:clamp(2.25rem, 4vw, 3rem); padding-block:1.25rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 2rem; color:var(--muted); font-size:.82rem; }

/* --- Small layout helpers ----------------------------------------------- */
.after-heading{ margin-top:1.4rem; }
.subhead{ font-size:1.3rem; }
.grid--top{ align-items:start; }
.facts--stacked{ grid-template-columns:1fr !important; }
.aside-card .facts{ margin-bottom:0; }
/* About: mission and vision, and the clients and partners panel. */
.statement p{ font-size:1.05rem; color:var(--text); }
.statement .subhead{ margin-bottom:.5rem; text-transform:uppercase; letter-spacing:.02em; }
[dir="rtl"] .statement .subhead{ letter-spacing:0; }
/* Centred rows (seven go 4 + 3 on wide screens), like the solution cards. */
.clients{ --cg:.75rem; list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--cg); }
.clients > li{ flex:0 1 calc((100% - var(--cg)) / 2); min-width:0; }
@media (min-width:720px){ .clients > li{ flex-basis:calc((100% - 2 * var(--cg)) / 3); } }
@media (min-width:1024px){ .clients > li{ flex-basis:calc((100% - 3 * var(--cg)) / 4); } }
.client{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.65rem; min-height:7.5rem;
  padding:1.1rem 1.25rem; text-align:center; line-height:1.35; border:1px solid var(--line); border-radius:var(--r-card);
  background:#fff; }
.client img{ max-height:52px; max-width:min(100%, 150px); }
.client img.logo--tall{ max-height:66px; }
.client__name{ font-size:.82rem; font-weight:500; color:#60678A; }
.link-list__title{ margin-top:clamp(2.5rem, 5vw, 3.5rem); }
.link-list{ list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.75rem 1.75rem; }
.link-list a{ display:inline-flex; min-height:24px; }
.callout{ max-width:52rem; padding:clamp(1.4rem, 3vw, 2rem); border-radius:var(--r-card);
  background:var(--surface); border:1px solid var(--line); border-inline-start:4px solid var(--red); }
.callout__text{ font-size:1.08rem; color:var(--ink); }
/* Footprint page: the map beside the offices, region by region. */
.offices{ display:grid; gap:clamp(1.5rem, 4vw, 3rem); align-items:center; }
@media (min-width:960px){ .offices{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); } }
.office-groups{ display:grid; gap:1.25rem; }
.office-group h3{ margin-bottom:.6rem; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
[dir="rtl"] .office-group h3{ letter-spacing:0; font-size:.95rem; }
.office-group ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.office-group li{ display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .85rem; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink); font-weight:500; font-size:.93rem; }
.office-group li .icon{ width:1rem; height:1rem; color:var(--icon); }
.office-group li.is-head{ background:var(--brand); border-color:var(--brand); color:#fff; }
.office-group li.is-head .icon{ color:#fff; }

/* --- Reveal on scroll ----------------------------------------------------- */
/* Only when JavaScript has run (html.js) and only for people who have not
   asked for less motion. Without either, everything is simply visible. */
@media (prefers-reduced-motion: no-preference){
  .js .reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
  .js .reveal.is-in{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}