/* ─── 00-fonts.css ────────────────────────────────────────────────── */

/* =========================================================================
   00 · FONTS — generated by tools/fetch-fonts.mjs, do not edit by hand.
   IBM Plex Sans Arabic (primary) + IBM Plex Sans (Latin), self-hosted woff2.
   ========================================================================= */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexSansArabic-400-normal-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexSansArabic-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexSansArabic-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/IBMPlexSansArabic-500-normal-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/IBMPlexSansArabic-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/IBMPlexSansArabic-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/IBMPlexSansArabic-600-normal-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/IBMPlexSansArabic-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/IBMPlexSansArabic-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/IBMPlexSansArabic-700-normal-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/IBMPlexSansArabic-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/IBMPlexSansArabic-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ─── 01-tokens.css ───────────────────────────────────────────────── */

/* =========================================================================
   01 · TOKENS — the whole visual identity of the site lives in this file.
   ---------------------------------------------------------------------------
   Derived from the corporate profile (mirabi_logestic_profile…pdf):
   · charcoal artwork on pp. 1, 11, 15        → --surface-* ramp (#292929 core)
   · the gold of the monogram and the rules   → --gold (#FFC205, sampled)
   · reversed-out body copy on the dark pages → --text-* ramp
   · the chevron motif that runs behind every page → --chevron-*
   Everything downstream consumes these variables; nothing hard-codes a colour.
   ========================================================================= */

:root {
  /* — surfaces (dark, institutional) -------------------------------------- */
  --surface-1000: #121415; /* deepest — footer base, page floor          */
  --surface-950: #17191b; /* utility strip, footer wells                 */
  --surface-900: #1c1f21; /* header, hero floor                           */
  --surface-850: #232629; /* profile's own charcoal (#292929, lifted)      */
  --surface-800: #2a2e31; /* raised panels, cards                         */
  --surface-700: #34383c; /* hairline-on-dark hover fill                   */

  /* — light sections (used by later phases) -------------------------------- */
  --paper: #f6f6f5;
  --paper-2: #eeeeea;
  --panel: #ffffff;

  /* — gold: the single accent, never decorative ---------------------------- */
  --gold: #ffc205; /* sampled from the monogram                      */
  --gold-bright: #ffd24a; /* hover state                                  */
  --gold-deep: #d99f00; /* pressed / gradient floor                       */
  --gold-ink: #1a1200; /* text sitting on gold                           */
  --gold-12: rgba(255, 194, 5, 0.12); /* faint fill                        */
  --gold-24: rgba(255, 194, 5, 0.24);
  --gold-55: rgba(255, 194, 5, 0.55);

  /* — type on dark ---------------------------------------------------------- */
  --text-hi: #f4f5f5;
  --text-max: #ffffff;
  --text-mid: #b7bcbe;
  --text-low: #8b9194;
  --text-ghost: #61686c;

  /* — type on light --------------------------------------------------------- */
  --ink: #1a1c1e;
  --ink-2: #454a4d;
  --ink-3: #767c80;

  /* — hairlines ------------------------------------------------------------- */
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --line-3: rgba(255, 255, 255, 0.28);
  --line-ink: #dedbd4;

  /* — fonts ----------------------------------------------------------------- */
  --font-ar: 'IBM Plex Sans Arabic', 'IBM Plex Sans', 'Segoe UI', Tahoma, sans-serif;
  --font-en: 'IBM Plex Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: var(--font-ar);
  --font-num: 'IBM Plex Sans', var(--font-ar);

  /* — metrics --------------------------------------------------------------- */
  --shell: 1280px;
  --shell-narrow: 1080px;
  --gutter: clamp(1.15rem, 1rem + 3.2vw, 3.75rem);
  --radius: 3px;
  --radius-lg: 6px;

  --h-strip: 2.25rem; /* utility strip            */
  --h-bar: 4.75rem; /* main header bar          */
  --h-bar-sm: 3.5rem; /* condensed on scroll      */
  --dock: calc(var(--h-strip) + var(--h-bar)); /* anchor offset */

  --ease: cubic-bezier(0.22, 0.61, 0.21, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.32s;

  /* — elevation ------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 18px 40px -24px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 44px 90px -50px rgba(0, 0, 0, 0.9);
  --ring-gold: 0 0 0 1px var(--gold-24), 0 24px 60px -34px rgba(255, 194, 5, 0.35);
}

/* English runs on the Latin family and needs slightly more tracking control. */
html[lang='en'] {
  --font-display: var(--font-en);
}


/* ─── 02-base.css ─────────────────────────────────────────────────── */

/* =========================================================================
   02 · BASE — reset, primitives, shared components.
   Layout direction is logical throughout (inline-start / inline-end) so the
   same stylesheet serves the Arabic RTL default and the English LTR toggle.
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--dock) + 1.5rem);
}

body {
  margin: 0;
  /* layout changes here are deliberate (the condensing header); never let the
     browser's scroll anchoring readjust the scroll position over them */
  overflow-anchor: none;
  background: var(--surface-900);
  color: var(--text-hi);
  font-family: var(--font-ar);
  font-size: 1rem;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* clip, not hidden: keeps the backdrop layers from widening the document
     without turning <body> into a scroll container */
  overflow-x: clip;
}

body.is-locked {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
p,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

address {
  font-style: normal;
}

::selection {
  background: var(--gold);
  color: var(--gold-ink);
}

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

/* — language switching ------------------------------------------------------
   Both languages ship in the markup; the toggle only moves `lang` on <html>.
   Rich blocks use the paired spans, plain strings use data-en (see site.js). */
html[lang='ar'] .t-en,
html[lang='en'] .t-ar {
  display: none !important;
}

/* — primitives -------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell-narrow {
  max-width: var(--shell-narrow);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 200;
  background: var(--gold);
  color: var(--gold-ink);
  padding: 0.55rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.4rem);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}

.skip-link:focus-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* — shared type helpers ----------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.4;
}

html[lang='ar'] .eyebrow {
  letter-spacing: 0;
  font-size: 0.875rem;
}

.eyebrow::before {
  content: '';
  inline-size: 1.75rem;
  block-size: 2px;
  background: var(--gold);
  flex: none;
}

.lede {
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
  color: var(--text-mid);
  line-height: 1.85;
  max-width: 54ch;
}

.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  /* digits and units stay in Latin order inside Arabic sentences */
  direction: ltr;
  unicode-bidi: isolate;
}

/* — section frame ------------------------------------------------------------
   Every section shares one rhythm: generous vertical air, a hairline top
   border, a head block (eyebrow → title → lede) and a gold key on the head's
   underline. Content below the head varies per section. */
.section {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7.5rem);
  border-block-start: 1px solid var(--line);
}

.section-head {
  display: grid;
  gap: 1rem;
  justify-items: start;
  max-inline-size: 44rem;
  margin-block-end: clamp(2.5rem, 5vw, 4.25rem);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 1.15rem + 1.9vw, 2.6rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-max);
}

html[lang='en'] .section-title {
  line-height: 1.14;
  letter-spacing: -0.025em;
}

.section-lede {
  font-size: clamp(0.9375rem, 0.9rem + 0.3vw, 1.125rem);
  line-height: 1.9;
  color: var(--text-mid);
  max-inline-size: 58ch;
}

html[lang='en'] .section-lede {
  line-height: 1.75;
}

/* the gold rule that closes every head, at the profile's hairline weight */
.section-head::after {
  content: '';
  inline-size: 3.5rem;
  block-size: 3px;
  background: var(--gold);
  margin-block-start: 0.35rem;
}

/* — buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.btn .ico {
  inline-size: 1.05em;
  block-size: 1.05em;
  flex: none;
  transition: transform var(--dur) var(--ease);
}

/* Primary — the gold key of the printed profile. */
.btn-primary {
  background: var(--gold);
  color: var(--gold-ink);
  box-shadow: 0 14px 30px -18px rgba(255, 194, 5, 0.75);
}

.btn-primary:hover {
  background: var(--gold-bright);
  box-shadow: 0 18px 38px -16px rgba(255, 194, 5, 0.85);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: none;
  background: var(--gold-deep);
}

.btn-primary:hover .ico {
  transform: translateX(var(--arrow, 4px));
}

/* Secondary — hairline on the dark ground. */
.btn-ghost {
  border-color: var(--line-2);
  color: var(--text-hi);
  background: rgba(255, 255, 255, 0.02);
}

.btn-ghost:hover {
  border-color: var(--gold-55);
  color: var(--gold);
  background: var(--gold-12);
}

.btn-sm {
  padding: 0.6rem 1.05rem;
  font-size: 0.8125rem;
}

/* In RTL the leading arrow points the other way. */
html[dir='rtl'] .btn {
  --arrow: -4px;
}

/* — the chevron field -------------------------------------------------------
   The profile's recurring arrow motif, rebuilt as a repeating mask so it can
   sit behind any dark panel at any opacity. */
.chevron-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 194, 5, 0.16) 52%, transparent 70%),
    repeating-linear-gradient(
      115deg,
      transparent 0 46px,
      rgba(255, 255, 255, 0.05) 46px 48px
    );
  opacity: 0.5;
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.9), transparent 62%);
}

html[dir='rtl'] .chevron-field {
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.9), transparent 62%);
}

/* — reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* ─── 03-utilities.css ────────────────────────────────────────────── */

/* =========================================================================
   03 · UTILITIES — the handful of helpers the partials rely on.
   ========================================================================= */

.tel {
  font-family: var(--font-num);
  direction: ltr;
  unicode-bidi: isolate;
  letter-spacing: 0.035em;
  font-variant-numeric: tabular-nums;
}

.ico {
  inline-size: 1em;
  block-size: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex: none;
}

/* progressive disclosure by viewport width */
@media (max-width: 860px) {
  .hide-sm {
    display: none !important;
  }
}

@media (max-width: 1080px) {
  .hide-md {
    display: none !important;
  }
}

@media (min-width: 1081px) {
  .hide-lg {
    display: none !important;
  }
}

/* print — the profile is handed out on paper, the site should print too */
@media print {
  .site-header,
  .site-footer,
  .hero-bg,
  .hero-band,
  .hero-scroll {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}


/* ─── 10-header.css ───────────────────────────────────────────────── */

/* =========================================================================
   10 · HEADER — src/partials/header.html
   ---------------------------------------------------------------------------
   Three tiers, in the register of the NOFOH header rather than a startup one:
     1 · utility strip  — legal identity, switchboard, language
     2 · main bar       — monogram lockup, primary nav, single call to action
     3 · progress rule  — a 2px gold reading line
   On scroll the strip collapses and the bar condenses; the header stays sticky.
   ========================================================================= */

.page-top-anchor {
  block-size: 0;
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 90;
  background: var(--surface-950);
  border-block-end: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
  /* the header condenses on scroll, which changes the document height —
     opt out of Chrome's scroll anchoring so the compensation can never
     fight the condensation and shake the header at the threshold */
  overflow-anchor: none;
}

.site-header::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 100vh;
  background: radial-gradient(
    120% 60% at 50% 0%,
    rgba(255, 194, 5, 0.05),
    transparent 60%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.site-header.is-scrolled {
  background: var(--surface-1000);
  border-block-end-color: var(--line-2);
  box-shadow: var(--shadow-md);
}

.site-header.is-scrolled::after {
  opacity: 1;
}

/* — 1 · utility strip ------------------------------------------------------- */
.header-utility {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.34s var(--ease), opacity 0.24s var(--ease);
  border-block-end: 1px solid var(--line);
}

.site-header.is-scrolled .header-utility,
.site-header.is-nav-open .header-utility {
  grid-template-rows: 0fr;
  opacity: 0;
  border-block-end-color: transparent;
}

.utility-inner {
  overflow: hidden;
  min-block-size: 0;
}

.utility-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  block-size: var(--h-strip);
  font-size: 0.75rem;
  line-height: 1;
  color: var(--text-low);
  white-space: nowrap;
}

.utility-ident {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  letter-spacing: 0.02em;
  min-inline-size: 0;
  flex: 1 1 auto;
}

.utility-ident > span:not(.dot) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.utility-ident .dot {
  inline-size: 5px;
  block-size: 5px;
  background: var(--gold);
  flex: none;
}

.utility-meta {
  display: inline-flex;
  align-items: center;
  gap: 1.35rem;
  flex: none;
  margin-inline-start: auto;
}

.utility-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-low);
  transition: color 0.2s var(--ease);
}

.utility-link:hover {
  color: var(--gold);
}

.utility-link .ico {
  inline-size: 0.85rem;
  block-size: 0.85rem;
  opacity: 0.75;
}

.utility-sep {
  inline-size: 1px;
  block-size: 0.85rem;
  background: var(--line-2);
  flex: none;
}

/* — language switch --------------------------------------------------------- */
.lang-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
}

.lang-option {
  padding: 0.28rem 0.6rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-low);
  line-height: 1.3;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.lang-option:hover {
  color: var(--text-hi);
  background: var(--surface-700);
}

.lang-option[aria-pressed='true'] {
  background: var(--gold);
  color: var(--gold-ink);
}

/* — 2 · main bar ------------------------------------------------------------ */
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  block-size: var(--h-bar);
  transition: block-size 0.3s var(--ease);
}

.site-header.is-scrolled .header-bar {
  block-size: var(--h-bar-sm);
}

/* — brand lockup ------------------------------------------------------------ */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-inline-size: 0;
  flex: 0 1 auto;
}

.brand-mark {
  inline-size: 2.35rem;
  block-size: 2.9rem;
  color: var(--gold);
  flex: none;
  transition: color 0.25s var(--ease), transform 0.45s var(--ease-out);
}

.site-header.is-scrolled .brand-mark {
  inline-size: 1.9rem;
  block-size: 2.35rem;
}

.brand:hover .brand-mark {
  transform: translateY(-2px);
}

.brand-lockup {
  display: grid;
  gap: 0.15rem;
  min-inline-size: 0;
  overflow: hidden;
}

.brand-name-ar {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-max);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-name-en {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-ghost);
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}

.brand:hover .brand-name-en {
  color: var(--gold-55);
}

.brand-divider {
  inline-size: 1px;
  block-size: 2.4rem;
  background: var(--line-2);
  flex: none;
  transition: block-size 0.3s var(--ease);
}

.site-header.is-scrolled .brand-divider {
  block-size: 2rem;
}

.brand-since {
  display: grid;
  gap: 0.1rem;
  font-family: var(--font-num);
  color: var(--text-low);
  line-height: 1.1;
}

.brand-since b {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gold);
}

.brand-since span {
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* — navigation -------------------------------------------------------------- */
.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 1.4rem);
  margin-inline-start: auto;
  flex: 0 1 auto;
  min-inline-size: 0;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.2vw, 1.15rem);
}

.nav-link {
  position: relative;
  display: block;
  padding: 0.45rem 0.1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-mid);
  white-space: nowrap;
  transition: color 0.22s var(--ease);
}

.nav-link::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform 0.3s var(--ease);
}

.nav-link:hover {
  color: var(--text-max);
}

.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
}

.nav-link.is-active {
  color: var(--gold);
}

.nav-index {
  font-family: var(--font-num);
  font-size: 0.625rem;
  color: var(--text-ghost);
  margin-inline-end: 0.35rem;
  vertical-align: 0.15em;
}

/* — bar actions -------------------------------------------------------------- */
.bar-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
}

.nav-close {
  display: none;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-hi);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.nav-toggle:hover {
  border-color: var(--gold-55);
  background: var(--gold-12);
}

.nav-toggle-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  inline-size: 17px;
}

.nav-toggle-icon i {
  display: block;
  block-size: 1.5px;
  inline-size: 100%;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.is-nav-open .nav-toggle-icon i:first-child {
  transform: translateY(2.75px) rotate(45deg);
}

.is-nav-open .nav-toggle-icon i:last-child {
  transform: translateY(-2.75px) rotate(-45deg);
}

/* — 3 · reading progress ----------------------------------------------------- */
.header-progress {
  block-size: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  inline-size: 0;
  transition: inline-size 0.1s linear;
}

/* — mobile drawer -------------------------------------------------------------
   .nav-drawer is `display: contents` in the header flow on desktop. Below the
   breakpoint it becomes a clipped, full-viewport frame: the closed panel is
   translated out of it, and `overflow: hidden` on the frame keeps that
   translation from widening the document in either writing direction. */
.nav-drawer {
  display: contents;
}

@media (max-width: 1080px) {
  .nav-drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 95;
    overflow: hidden;
    pointer-events: none;
    background: rgba(10, 11, 12, 0.72);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0.3s;
  }

  .is-nav-open .nav-drawer {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .primary-nav {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    display: block;
    inline-size: min(23rem, 86vw);
    padding: calc(var(--h-bar) + 2.25rem) var(--gutter) calc(2.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--surface-1000);
    border-inline-start: 1px solid var(--line-2);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(var(--drawer-out, 100%));
    transition: transform 0.42s var(--ease-out);
  }

  html[dir='rtl'] .primary-nav {
    --drawer-out: -100%;
  }

  html[dir='ltr'] .primary-nav {
    --drawer-out: 100%;
  }

  .is-nav-open .primary-nav {
    transform: none;
  }

  .nav-list {
    display: grid;
    gap: 0;
  }

  .nav-item {
    border-block-end: 1px solid var(--line);
  }

  .nav-link {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 1rem 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-hi);
    white-space: normal;
  }

  .nav-link::after {
    inline-size: 0;
    block-size: 0;
  }

  .nav-link.is-active {
    color: var(--gold);
  }

  .nav-index {
    font-size: 0.6875rem;
    color: var(--gold-55);
  }

  .nav-foot {
    display: grid;
    gap: 0.9rem;
    margin-block-start: 2rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--line);
  }

  .nav-close {
    position: absolute;
    z-index: 2;
    inset-block-start: 0;
    inset-inline-end: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    inline-size: min(23rem, 86vw);
    padding: calc(0.85rem + env(safe-area-inset-top, 0px)) var(--gutter) 0.85rem;
    border: 0;
    border-block-end: 1px solid var(--gold-24);
    background: linear-gradient(180deg, rgba(255, 194, 5, 0.08), var(--surface-1000) 90%);
    color: var(--gold);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.22s var(--ease), border-color 0.22s var(--ease);
  }

  .nav-close:hover {
    color: var(--gold);
  }

  .nav-close:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -4px;
  }

  .nav-close .ico {
    inline-size: 1.1rem;
    block-size: 1.1rem;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .bar-cta {
    display: none;
  }
}

@media (min-width: 1081px) {
  .nav-foot {
    display: none;
  }
}


/* the trading name replaces the registered name once the bar gets tight */
.brand-compact {
  display: none;
}

@media (max-width: 860px) {
  .brand-full {
    display: none;
  }

  .brand-compact {
    display: inline;
  }
}

/* — small screens: the strip and the lockup give way before the nav does ------ */
@media (max-width: 1180px) {
  .brand-since {
    display: none;
  }

  .brand-divider + .brand-since,
  .brand .brand-divider:last-of-type {
    display: none;
  }
}

@media (max-width: 1080px) {
  .utility-ident {
    display: none;
  }

  .utility-row {
    justify-content: flex-end;
  }
}

@media (max-width: 720px) {
  :root {
    --h-strip: 2rem;
    --h-bar: 4.25rem;
  }

  .brand-mark {
    inline-size: 2rem;
    block-size: 2.5rem;
  }

  .brand-name-ar {
    font-size: 0.875rem;
  }

  .utility-meta {
    gap: 0.85rem;
  }
}

@media (max-width: 520px) {
  /* the drawer button keeps its icon only, so the brand keeps its full name */
  .nav-toggle-label {
    display: none;
  }

  .nav-toggle {
    padding: 0.5rem 0.6rem;
  }

  .brand-name-en {
    display: none;
  }

  .brand-name-ar {
    font-size: 0.8125rem;
  }
}

@media (max-width: 420px) {
  .utility-link .ico {
    display: none;
  }

  .brand-divider {
    display: none;
  }
}


/* ─── 20-hero.css ─────────────────────────────────────────────────── */

/* =========================================================================
   20 · HERO — src/sections/hero.html
   ---------------------------------------------------------------------------
   The printed profile opens on a charcoal page with the monogram reversed out
   in gold and a field of arrows running behind it. The hero reproduces that:
   dark ground, one gold key, the arrow field as a masked backdrop, and the
   liveried vehicle as the only photograph.
   ========================================================================= */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--surface-900);
  overflow: hidden;
}

/* — backdrop ---------------------------------------------------------------- */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* the page's own ground: charcoal lifting very slightly at the top */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(176deg, var(--surface-850) 0%, var(--surface-900) 46%, var(--surface-1000) 100%);
}

/* the arrow field from the cover artwork, rebuilt as clipped bands */
.hero-arrows {
  position: absolute;
  inset-block: -10%;
  inset-inline-end: -4%;
  inline-size: 66%;
  opacity: 0.85;
  background-image:
    linear-gradient(116deg, transparent 0 48.6%, rgba(255, 255, 255, 0.07) 48.6% 50%, transparent 50%),
    linear-gradient(244deg, transparent 0 48.6%, rgba(255, 255, 255, 0.07) 48.6% 50%, transparent 50%);
  background-size: 150px 150px;
  mask-image: radial-gradient(70% 85% at 78% 42%, rgba(0, 0, 0, 0.95), transparent 72%);
}

html[dir='rtl'] .hero-arrows {
  inset-inline-end: auto;
  inset-inline-start: -4%;
}

/* the single warm key light, sitting behind the headline */
.hero-glow {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 55%;
  background: radial-gradient(58% 46% at 78% 18%, rgba(255, 194, 5, 0.09), transparent 62%);
}

.hero > .shell {
  position: relative;
}

.hero > .shell::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background: var(--line);
}

/* — grid --------------------------------------------------------------------- */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  align-items: center;
  gap: clamp(2rem, 4.5vw, 5rem);
  padding-block: clamp(3rem, 5.5vw, 5.25rem) clamp(3rem, 5vw, 4.75rem);
  min-block-size: min(74svh, 47rem);
}

/* — copy --------------------------------------------------------------------- */
.hero-copy {
  display: grid;
  gap: clamp(1.1rem, 2vw, 1.6rem);
  justify-items: start;
  max-inline-size: 37rem;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.05rem + 3.9vw, 3.6rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--text-max);
}

html[lang='en'] .hero-title {
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.hero-title .line {
  display: block;
}

.hero-title .accent {
  position: relative;
  display: inline-block;
  color: var(--gold);
}

/* the gold rule is the profile's underline weight, drawn under the key word */
.hero-title .accent::after {
  content: '';
  position: absolute;
  inset-block-end: -0.16em;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 3px;
  background: var(--gold);
  opacity: 0.32;
}

.hero-lede {
  font-size: clamp(0.9375rem, 0.9rem + 0.32vw, 1.125rem);
  line-height: 1.95;
  color: var(--text-mid);
  max-inline-size: 48ch;
}

html[lang='en'] .hero-lede {
  line-height: 1.75;
}

/* — three standing claims ----------------------------------------------------- */
.hero-points {
  display: grid;
  gap: 0.6rem;
  inline-size: 100%;
  padding-block-start: 1.1rem;
  border-block-start: 1px solid var(--line);
}

.hero-points li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-mid);
}

.hero-points .tick {
  inline-size: 6px;
  block-size: 6px;
  flex: none;
  background: var(--gold);
  transform: rotate(45deg) translateY(-1px);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-block-start: 0.35rem;
}

.hero-assurance {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-ghost);
  margin-block-start: 0.1rem;
}

.hero-assurance .ico {
  inline-size: 1rem;
  block-size: 1rem;
  flex: none;
  color: var(--gold-55);
}

/* — visual -------------------------------------------------------------------- */
.hero-visual {
  display: grid;
  gap: 0.9rem;
  min-inline-size: 0;
}

.hero-frame {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--surface-950);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* the gold corner key that closes every page of the printed profile */
.hero-frame::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 3px;
  block-size: 5rem;
  background: var(--gold);
  z-index: 3;
}

.hero-shot {
  position: relative;
  overflow: hidden;
}

.hero-shot img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1400 / 995;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05) brightness(0.96);
}

/* a light scrim on the leading edge ties the photo into the charcoal ground */
.hero-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(18, 20, 21, 0.55),
    rgba(18, 20, 21, 0) 46%,
    rgba(18, 20, 21, 0.18) 100%
  );
  pointer-events: none;
}

.hero-caption {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-block-start: 1px solid var(--line);
  background: var(--surface-950);
}

.hero-caption-text {
  display: grid;
  gap: 0.1rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-low);
}

.hero-caption-text b {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-hi);
}

.hero-caption .tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--gold-24);
  border-radius: 999px;
  background: var(--gold-12);
  font-family: var(--font-num);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold);
  white-space: nowrap;
}

.hero-caption .tag .ico {
  inline-size: 0.8rem;
  block-size: 0.8rem;
}

/* — temperature spec strip ----------------------------------------------------- */
.hero-spec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(23, 25, 27, 0.7);
  overflow: hidden;
}

.hero-spec-cell {
  display: grid;
  gap: 0.25rem;
  padding: 0.8rem 0.95rem;
  border-inline-start: 1px solid var(--line);
}

.hero-spec-cell:first-child {
  border-inline-start: 0;
}

.hero-spec-cell dt {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--text-ghost);
}

.hero-spec-cell dt .ico {
  inline-size: 0.85rem;
  block-size: 0.85rem;
  color: var(--gold-55);
  flex: none;
}

.hero-spec-cell dd {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-hi);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* — scroll cue ----------------------------------------------------------------- */
.hero-scroll {
  position: absolute;
  inset-block-end: 2rem;
  inset-inline-end: calc(var(--gutter) * 0.55);
  display: none;
  justify-items: center;
  gap: 0.6rem;
  font-size: 0;
  color: var(--text-ghost);
}

.hero-scroll::after {
  content: '';
  display: block;
  inline-size: 1px;
  block-size: 3.75rem;
  background: linear-gradient(var(--gold), transparent);
  animation: scroll-line 2.8s var(--ease) infinite;
}

@keyframes scroll-line {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }

  45%,
  55% {
    transform: scaleY(1);
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

@media (min-width: 1081px) and (min-height: 700px) {
  .hero-scroll {
    display: grid;
  }
}

/* — stat band ------------------------------------------------------------------ */
.hero-band {
  position: relative;
  border-block-start: 1px solid var(--line-2);
  background: var(--surface-1000);
}

.hero-band::before {
  content: '';
  position: absolute;
  inset-block-start: -2px;
  inset-inline-start: 0;
  inline-size: clamp(4rem, 12vw, 11rem);
  block-size: 3px;
  background: var(--gold);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hero-stat {
  display: grid;
  gap: 0.15rem;
  align-content: start;
  padding: clamp(1.25rem, 2.4vw, 1.95rem) 1.25rem;
  border-inline-start: 1px solid var(--line);
  transition: background-color 0.3s var(--ease);
}

.hero-stat:first-child {
  border-inline-start: 0;
}

.hero-stat:hover {
  background: rgba(255, 255, 255, 0.02);
}

.hero-stat dt {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  font-family: var(--font-num);
  font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-max);
}

html[lang='ar'] .hero-stat dt {
  font-family: var(--font-ar);
}

.hero-stat dt .suffix {
  font-size: 0.45em;
  font-weight: 700;
  color: var(--gold);
}

.hero-stat dd {
  margin: 0;
  margin-block-start: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-mid);
}

.hero-stat dd small {
  display: block;
  margin-block-start: 0.2rem;
  font-family: var(--font-num);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text-ghost);
}

/* — entry motion ---------------------------------------------------------------- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.hero [data-rise] {
  animation: rise 0.8s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 80ms + 100ms);
}

.hero-visual[data-rise] {
  animation-delay: 240ms;
}

/* — responsive ------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .hero-grid {
    gap: clamp(1.75rem, 3.5vw, 3.25rem);
  }

  .hero-copy {
    max-inline-size: 33rem;
  }
}

@media (max-width: 1080px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2.5rem, 5vw, 3.5rem);
    min-block-size: 0;
  }

  .hero-copy {
    max-inline-size: none;
    gap: 1.15rem;
  }

  .hero-lede {
    max-inline-size: 62ch;
  }

  .hero-visual {
    gap: 0.75rem;
  }
}

@media (max-width: 720px) {
  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-stat {
    padding-inline: 0.9rem 0.6rem;
  }

  .hero-stat:nth-child(odd) {
    border-inline-start: 0;
  }

  .hero-stat:nth-child(n + 3) {
    border-block-start: 1px solid var(--line);
  }

  .hero-actions .btn {
    flex: 1 1 auto;
    min-inline-size: 10.5rem;
  }

  .hero-title .accent::after {
    block-size: 2px;
  }

  .hero-caption {
    flex-wrap: wrap;
    gap: 0.6rem;
  }
}

@media (max-width: 520px) {
  .hero-spec {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-spec-cell {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    border-inline-start: 0;
    border-block-start: 1px solid var(--line);
  }

  .hero-spec-cell:first-child {
    border-block-start: 0;
  }

  .hero-lede {
    line-height: 1.85;
  }

  .hero-points li {
    font-size: 0.8125rem;
  }
}


/* ─── 30-about.css ────────────────────────────────────────────────── */

/* =========================================================================
   30 · ABOUT — src/sections/about.html
   ========================================================================= */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.25rem, 5vw, 5rem);
  align-items: start;
}

/* — narrative column --------------------------------------------------------- */
.about-copy {
  display: grid;
  gap: 1.15rem;
}

.about .section-head {
  margin-block-end: 0.25rem;
}

.about-lead {
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.8;
  color: var(--text-hi);
  max-inline-size: 46ch;
}

html[lang='en'] .about-lead {
  line-height: 1.6;
}

.about-body {
  font-size: 0.9375rem;
  line-height: 1.95;
  color: var(--text-mid);
  max-inline-size: 52ch;
}

html[lang='en'] .about-body {
  line-height: 1.8;
}

/* — the three values ---------------------------------------------------------- */
.about-values {
  display: grid;
  gap: 0.85rem;
  margin-block-start: 0.75rem;
  padding-block-start: 1.4rem;
  border-block-start: 1px solid var(--line);
}

.about-values li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: baseline;
}

.about-value-marker {
  inline-size: 7px;
  block-size: 7px;
  background: var(--gold);
  transform: rotate(45deg) translateY(-1px);
}

.about-values b {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-max);
}

.about-values span:not(.about-value-marker) {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text-low);
  margin-block-start: 0.15rem;
}

/* — visual ---------------------------------------------------------------------- */
.about-visual {
  position: sticky;
  inset-block-start: calc(var(--dock) + 1.5rem);
  display: grid;
  gap: 0.7rem;
}

.about-frame {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.about-frame::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 3px;
  block-size: 4.5rem;
  background: var(--gold);
  z-index: 2;
}

.about-frame img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1400 / 973;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05) brightness(0.97);
}

.about-caption {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-ghost);
  padding-inline-start: 0.9rem;
  border-inline-start: 2px solid var(--gold-24);
}

/* — the journey rail ------------------------------------------------------------- */
.journey {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block-start: clamp(3rem, 6vw, 5rem);
  padding-block-start: clamp(2rem, 4vw, 3.25rem);
  border-block-start: 1px solid var(--line);
  counter-reset: step;
}

.journey-step {
  position: relative;
  display: grid;
  gap: 0.4rem;
  align-content: start;
  padding: 0 1.5rem 0 0;
}

html[dir='ltr'] .journey-step {
  padding: 0 0 0 1.5rem;
}

.journey-step + .journey-step {
  padding-inline-start: 1.5rem;
  border-inline-start: 1px solid var(--line);
}

.journey-num {
  font-family: var(--font-num);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.journey-step b {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-max);
}

.journey-step p {
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--text-low);
}

/* — responsive --------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .about-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-visual {
    position: static;
    order: -1;
  }

  .journey {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 0;
  }

  .journey-step:nth-child(3) {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
}

@media (max-width: 560px) {
  .journey {
    grid-template-columns: minmax(0, 1fr);
  }

  .journey-step {
    padding: 0 0 1.4rem 0;
    border-inline-start: 0 !important;
  }

  html[dir='ltr'] .journey-step,
  html[dir='rtl'] .journey-step {
    padding-inline: 0;
  }

  .journey-step + .journey-step {
    border-block-start: 1px solid var(--line);
    padding-block-start: 1.4rem;
  }
}


/* ─── 40-fleet.css ────────────────────────────────────────────────── */

/* =========================================================================
   40 · FLEET — src/sections/fleet.html
   ========================================================================= */

.fleet {
  isolation: isolate;
  background: var(--surface-900);
}

.fleet::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(28, 31, 33, 0.82), rgba(28, 31, 33, 0.92)),
    url('/assets/img/fleet-aerial.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.32;
  pointer-events: none;
}

.fleet-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.fleet-card {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding: clamp(1.5rem, 2.6vw, 2.1rem) clamp(1.25rem, 2.2vw, 1.75rem);
  background: var(--surface-900);
  transition: background-color 0.3s var(--ease);
}

.fleet-card:hover {
  background: var(--surface-850);
}

.fleet-icon {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  margin-block-end: 0.35rem;
  border: 1px solid var(--gold-24);
  border-radius: var(--radius);
  background: var(--gold-12);
  color: var(--gold);
}

.fleet-icon .ico {
  inline-size: 1.4rem;
  block-size: 1.4rem;
}

.fleet-card h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-max);
}

.fleet-card p {
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--text-low);
}

/* the tracking-and-refrigeration assurance */
.fleet-note {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-block-start: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--gold);
  border-radius: var(--radius);
  background: var(--surface-950);
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--text-mid);
}

.fleet-note .ico {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  flex: none;
  color: var(--gold);
}

@media (max-width: 1000px) {
  .fleet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .fleet-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ─── 50-services.css ─────────────────────────────────────────────── */

/* =========================================================================
   50 · SERVICES — src/sections/services.html
   Tier 1: five standing services · Tier 2: the two compound programmes.
   ========================================================================= */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.service-card {
  position: relative;
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-850);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), background-color 0.3s var(--ease);
}

.service-card:hover {
  border-color: var(--gold-55);
  background: var(--surface-800);
  transform: translateY(-3px);
}

.service-card::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 1.5rem;
  block-size: 2px;
  background: var(--gold);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.service-card:hover::after {
  opacity: 1;
}

.service-icon {
  inline-size: 1.6rem;
  block-size: 1.6rem;
  color: var(--gold);
}

.service-icon .ico {
  inline-size: 100%;
  block-size: 100%;
}

.service-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-max);
}

.service-card p {
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--text-low);
}

/* — the two compound programmes ------------------------------------------------ */
.programmes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-block-start: 1.25rem;
}

.programme {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, rgba(255, 194, 5, 0.05), transparent 42%),
    var(--surface-900);
  box-shadow: var(--shadow-md);
}

.programme-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.programme-icon {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  flex: none;
  border: 1px solid var(--gold-24);
  border-radius: var(--radius);
  background: var(--gold-12);
  color: var(--gold);
}

.programme-icon .ico {
  inline-size: 1.3rem;
  block-size: 1.3rem;
}

.programme-head h3 {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-max);
}

.programme-lead {
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--text-mid);
}

.programme-points {
  display: grid;
  gap: 0.65rem;
  padding-block-start: 0.9rem;
  border-block-start: 1px solid var(--line);
}

.programme-points li {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text-low);
}

.programme-points .tick {
  inline-size: 6px;
  block-size: 6px;
  flex: none;
  background: var(--gold);
  transform: rotate(45deg) translateY(-1px);
}

/* — responsive -------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .programmes {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .services-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
  }

  .service-card {
    padding: 1.3rem 1.15rem;
  }
}


/* ─── 60-why.css ──────────────────────────────────────────────────── */

/* =========================================================================
   60 · WHY US — src/sections/why-us.html
   The profile's six arguments, numbered the way the document numbers its own.
   ========================================================================= */

.why {
  isolation: isolate;
  background: linear-gradient(135deg, var(--surface-850), var(--surface-900) 56%, var(--surface-1000));
}

.why-backdrop {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.why-backdrop::before {
  content: '';
  position: absolute;
  inline-size: min(62vw, 62rem);
  min-inline-size: 28rem;
  aspect-ratio: 1;
  inset-block-start: -46%;
  inset-inline-end: -15%;
  border: 1px solid rgba(255, 194, 5, 0.075);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 194, 5, 0.045), transparent 67%);
  box-shadow:
    0 0 0 2.25rem rgba(255, 194, 5, 0.012),
    0 0 0 4.5rem rgba(255, 255, 255, 0.01);
}

.why-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 12% 84%, rgba(255, 194, 5, 0.055), transparent 34%),
    radial-gradient(ellipse at 88% 8%, rgba(255, 194, 5, 0.04), transparent 38%);
}

.why-watermark {
  position: absolute;
  inline-size: clamp(22rem, 34vw, 38rem);
  block-size: auto;
  inset-block-end: -20%;
  inset-inline-start: -3%;
  color: var(--gold);
  opacity: 0.035;
  transform: rotate(-12deg);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-block-start: 1px solid var(--line);
}

.why-item {
  position: relative;
  display: grid;
  gap: 0.55rem;
  align-content: start;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.25rem, 2.4vw, 2rem);
  border-block-end: 1px solid var(--line);
}

.why-item:nth-child(3n + 2),
.why-item:nth-child(3n) {
  border-inline-start: 1px solid var(--line);
}

.why-num {
  font-family: var(--font-num);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-block-end: 0.35rem;
}

.why-item h3 {
  font-size: clamp(1rem, 0.94rem + 0.35vw, 1.1875rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-max);
}

.why-item p {
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--text-low);
}

/* the gold corner tick marks an argument the way the profile marks its own */
.why-item::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 1.5rem;
  block-size: 2px;
  background: var(--gold);
  opacity: 0.55;
}

@media (max-width: 1000px) {
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .why-item:nth-child(3n + 2),
  .why-item:nth-child(3n) {
    border-inline-start: 0;
  }

  .why-item:nth-child(2n) {
    border-inline-start: 1px solid var(--line);
  }
}

@media (max-width: 560px) {
  .why-watermark {
    inline-size: 19rem;
    inset-block-end: -8%;
    inset-inline-start: -7rem;
    opacity: 0.025;
  }

  .why-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .why-item:nth-child(2n) {
    border-inline-start: 0;
  }
}


/* ─── 70-partners.css ─────────────────────────────────────────────── */

/* =========================================================================
   70 · PARTNERS — src/sections/partners.html
   The five client logos travel in a hairline rail; each sits on the same
   tile so different logo weights read as one system.
   ========================================================================= */

.partner-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.partner-cell {
  display: grid;
  place-items: center;
  gap: 0;
  min-block-size: clamp(7rem, 12vw, 9.5rem);
  padding: 1.5rem 1.25rem;
  background: var(--surface-950);
  transition: background-color 0.3s var(--ease);
}

.partner-cell:hover {
  background: var(--surface-850);
}

.partner-cell img {
  inline-size: auto;
  max-inline-size: min(100%, 11rem);
  block-size: clamp(2.4rem, 4.5vw, 3.4rem);
  object-fit: contain;
  /* the extraction is colour-accurate; a touch of lift keeps them vivid on dark */
  filter: brightness(1.04);
}

/* — the accreditations note ------------------------------------------------------ */
.assurance-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin-block-start: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line-2);
  border-inline-start: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(150deg, rgba(255, 194, 5, 0.05), transparent 45%),
    var(--surface-900);
}

.assurance-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-max);
  white-space: nowrap;
}

.assurance-title .ico {
  inline-size: 1.35rem;
  block-size: 1.35rem;
  flex: none;
  color: var(--gold);
}

.assurance-body {
  font-size: 0.875rem;
  line-height: 1.9;
  color: var(--text-mid);
  max-inline-size: 78ch;
}

html[lang='en'] .assurance-body {
  line-height: 1.75;
}

@media (max-width: 1000px) {
  .partner-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .assurance-note {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
  }
}

@media (max-width: 560px) {
  .partner-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .partner-cell:nth-child(5) {
    grid-column: 1 / -1;
  }
}


/* ─── 75-profile.css ──────────────────────────────────────────────── */

/* =========================================================================
   75 · PROFILE DOWNLOAD — src/sections/profile.html
   One band: the ask on the reading side, the document itself opposite,
   its cover being page 1 of the same PDF the visitor is about to take.
   ========================================================================= */

.profile {
  isolation: isolate;
  background: linear-gradient(135deg, var(--surface-1000), var(--surface-900) 52%, var(--surface-850));
}

.profile-backdrop {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Faint stacked-page outlines echo the downloadable profile without repeating
   the hero arrows or the monogram watermark used in the previous section. */
.profile-backdrop::before {
  content: '';
  position: absolute;
  inline-size: min(34vw, 32rem);
  min-inline-size: 17rem;
  aspect-ratio: 0.72;
  inset-block-start: 50%;
  inset-inline-end: clamp(1rem, 8vw, 7rem);
  border: 1px solid rgba(255, 194, 5, 0.07);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 194, 5, 0.035), transparent 44%),
    linear-gradient(
      180deg,
      transparent 0 72%,
      rgba(255, 255, 255, 0.03) 72% 72.35%,
      transparent 72.35% 77%,
      rgba(255, 255, 255, 0.025) 77% 77.35%,
      transparent 77.35% 82%,
      rgba(255, 255, 255, 0.02) 82% 82.35%,
      transparent 82.35%
    );
  box-shadow:
    1rem 0.7rem 0 -1px rgba(255, 255, 255, 0.025),
    2rem 1.4rem 0 -2px rgba(255, 194, 5, 0.018);
  transform: translateY(-50%) rotate(7deg);
}

.profile-backdrop::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 55%;
  background: radial-gradient(ellipse at center, rgba(255, 194, 5, 0.075), transparent 68%);
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.profile-copy {
  display: grid;
  gap: 1.15rem;
  justify-items: start;
}

.profile .section-title {
  max-inline-size: 24ch;
}

.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  padding-block-start: 1.1rem;
  border-block-start: 1px solid var(--line);
}

.profile-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-low);
}

.profile-meta .ico {
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--gold-55);
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-block-start: 0.4rem;
}

/* — the document card ---------------------------------------------------------
   The whole card is the download trigger; the hover lifts it the way a page
   being picked up would move. */
.profile-doc {
  display: grid;
  gap: 0.8rem;
  justify-items: center;
  text-decoration: none;
}

.profile-doc-frame {
  position: relative;
  display: block;
  inline-size: min(100%, 30rem);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-950);
  box-shadow: var(--shadow-lg);
  transition: transform 0.4s var(--ease-out), border-color 0.3s var(--ease), box-shadow 0.4s var(--ease);
}

/* the gold key that closes every frame on the site */
.profile-doc-frame::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 3px;
  block-size: 4.5rem;
  background: var(--gold);
  z-index: 2;
}

.profile-doc-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(255, 194, 5, 0.06), transparent 35%);
  pointer-events: none;
}

.profile-doc-frame img {
  inline-size: 100%;
  block-size: auto;
  filter: brightness(0.96);
}

.profile-doc:hover .profile-doc-frame {
  transform: translateY(-6px);
  border-color: var(--gold-55);
  box-shadow: var(--ring-gold);
}

.profile-doc-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-num);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  direction: ltr;
  color: var(--text-low);
  transition: color 0.25s var(--ease);
}

.profile-doc-label .ico {
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--gold);
}

.profile-doc:hover .profile-doc-label {
  color: var(--gold);
}

/* — responsive ------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .profile-backdrop::before {
    inset-inline-end: 4%;
  }

  .profile-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-doc {
    order: -1;
  }

  .profile-doc-frame {
    inline-size: min(100%, 26rem);
  }
}


/* ─── 80-contact.css ──────────────────────────────────────────────── */

/* =========================================================================
   80 · CONTACT — src/sections/contact.html
   Correspondence routes alongside a customer-facing services panel.
   ========================================================================= */

.contact {
  isolation: isolate;
  background: var(--surface-900);
}

.contact::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(28, 31, 33, 0.82), rgba(28, 31, 33, 0.9)),
    url('/assets/img/hero-truck.jpg');
  background-position: center, center 55%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.28;
  pointer-events: none;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

/* — correspondence routes ------------------------------------------------------- */
.contact-routes {
  display: grid;
  gap: 1.5rem;
  position: sticky;
  inset-block-start: calc(var(--dock) + 1.5rem);
}

.contact-list {
  display: grid;
  gap: 1.25rem;
}

.contact-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding-block-end: 1.25rem;
  border-block-end: 1px solid var(--line);
}

.contact-row:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

.contact-ico {
  display: grid;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  border: 1px solid var(--gold-24);
  border-radius: var(--radius);
  background: var(--gold-12);
  color: var(--gold);
}

.contact-ico .ico {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

.contact-row b {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-ghost);
  margin-block-end: 0.3rem;
}

html[lang='ar'] .contact-row b {
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.8125rem;
}

.contact-row p {
  display: grid;
  gap: 0.15rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-hi);
}

.contact-tel {
  justify-self: start;
  transition: color 0.2s var(--ease);
}

.contact-tel:hover {
  color: var(--gold);
}

.contact-mail {
  color: var(--text-hi);
  border-block-end: 1px solid var(--line-3);
  padding-block-end: 1px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.contact-mail:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.contact-slogan {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  padding-block: 0.95rem;
  border-block: 1px solid var(--line);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.7;
}

.contact-slogan::before {
  content: '';
  inline-size: 2px;
  block-size: 1.1em;
  background: var(--gold);
  flex: none;
  transform: translateY(0.2em);
}

.contact-assurance {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--text-low);
}

.contact-assurance .ico {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  flex: none;
  color: var(--gold-55);
  transform: translateY(0.2em);
}

/* — customer service panel ---------------------------------------------------------- */
.contact-promo {
  display: grid;
  gap: 1rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--surface-850);
  box-shadow: var(--shadow-md);
}

.contact-promo-eyebrow {
  margin: 0;
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[lang='ar'] .contact-promo-eyebrow {
  letter-spacing: 0;
  text-transform: none;
}

.contact-promo-title {
  margin: 0;
  color: var(--text-hi);
  font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.8rem);
  line-height: 1.45;
}

.contact-promo-lead {
  margin: 0;
  color: var(--text-low);
  font-size: 0.9375rem;
  line-height: 1.8;
}

.contact-promo-list {
  display: grid;
  gap: 0.75rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.contact-promo-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;
  color: var(--text-mid);
  font-size: 0.875rem;
  line-height: 1.7;
}

.contact-promo-list .tick {
  inline-size: 6px;
  block-size: 6px;
  margin-block-start: 0.6rem;
  background: var(--gold);
  transform: rotate(45deg);
}

.contact-promo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 0.5rem;
}

.contact-promo-actions .btn {
  flex: 1 1 10rem;
}

.contact-promo-actions .ico {
  inline-size: 1rem;
  block-size: 1rem;
}

/* — the form ----------------------------------------------------------------------- */
.contact-form {
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--surface-850);
  box-shadow: var(--shadow-md);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

.form-field {
  display: grid;
  gap: 0.45rem;
  min-inline-size: 0;
}

.form-field label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-hi);
}

.form-field input,
.form-field select,
.form-field textarea {
  inline-size: 100%;
  padding: 0.8rem 0.95rem;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-max);
  background: var(--surface-950);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  transition: border-color 0.22s var(--ease), background-color 0.22s var(--ease);
  appearance: none;
}

.form-field textarea {
  resize: vertical;
  min-block-size: 7.5rem;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--text-ghost);
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: var(--line-3);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--surface-1000);
  box-shadow: 0 0 0 3px var(--gold-12);
}

/* the select's own chevron, drawn — no third-party arrow */
.form-field select {
  background-image: linear-gradient(45deg, transparent 49%, var(--text-low) 49% 51%, transparent 51%),
    linear-gradient(-45deg, transparent 49%, var(--text-low) 49% 51%, transparent 51%);
  background-size: 0.55rem 0.55rem;
  background-position: left 1rem center, left calc(1rem + 0.2rem) center;
  background-repeat: no-repeat;
  padding-inline-end: 2.4rem;
}

html[dir='ltr'] .form-field select {
  background-position: right 1rem center, right calc(1rem + 0.2rem) center;
}

/* invalid state, driven by the browser then confirmed on submit */
.form-field input:invalid:not(:placeholder-shown),
.form-field textarea:invalid:not(:placeholder-shown) {
  border-color: rgba(255, 120, 90, 0.55);
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.form-actions .btn {
  min-inline-size: 11rem;
}

.form-note {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0;
}

.form-note.is-error {
  color: #ff9c7a;
}

/* — responsive ----------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-routes {
    position: static;
    order: 1;
  }

  .contact-form,
  .contact-promo {
    order: 0;
  }
}

@media (max-width: 560px) {
  .form-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-form,
  .contact-promo {
    padding: 1.3rem 1.15rem;
  }

  .contact-promo-actions {
    display: grid;
  }

  .contact-promo-actions .btn,
  .form-actions .btn {
    inline-size: 100%;
  }
}


/* ─── 85-legal.css ────────────────────────────────────────────────── */

/* =========================================================================
   85 · LEGAL — privacy and terms pages.
   ========================================================================= */

.legal-page {
  min-block-size: 60vh;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 194, 5, 0.045), transparent 42%),
    var(--surface-900);
}

.legal-shell {
  max-inline-size: var(--shell-narrow);
}

.legal-head {
  display: grid;
  gap: 1rem;
  max-inline-size: 56rem;
  margin-block-end: clamp(2.5rem, 5vw, 4rem);
}

.legal-updated {
  color: var(--text-ghost);
  font-size: 0.8125rem;
}

.legal-body {
  display: grid;
}

.legal-block {
  display: grid;
  gap: 0.65rem;
  padding-block: 1.35rem;
  border-block-end: 1px solid var(--line);
}

.legal-block:first-child {
  padding-block-start: 0;
}

.legal-block h2 {
  color: var(--text-max);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  font-weight: 700;
  line-height: 1.45;
}

.legal-block p,
.legal-list {
  color: var(--text-mid);
  font-size: 0.9375rem;
  line-height: 1.95;
}

.legal-block a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: var(--gold-24);
  text-underline-offset: 0.2em;
}

.legal-list {
  display: grid;
  gap: 0.55rem;
}

.legal-list li {
  position: relative;
  padding-inline-start: 1.2rem;
}

.legal-list li::before {
  content: '';
  position: absolute;
  inset-block-start: 0.82em;
  inset-inline-start: 0.15rem;
  inline-size: 0.35rem;
  block-size: 0.35rem;
  border-radius: 50%;
  background: var(--gold);
}

.legal-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-block-start: 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.025);
}

.legal-contact p {
  margin-inline-end: auto;
  color: var(--text-hi);
  font-weight: 600;
}

@media (max-width: 600px) {
  .legal-contact {
    align-items: flex-start;
    flex-direction: column;
    padding: 1rem;
  }
}


/* ─── 90-footer.css ───────────────────────────────────────────────── */

/* =========================================================================
   40 · FOOTER — src/partials/footer.html
   ---------------------------------------------------------------------------
   Four columns on the deepest ground in the palette, a hairline gold key at
   the top edge, and a legal band that carries the company identity the way
   the back page of the printed profile does.
   ========================================================================= */

.site-footer {
  position: relative;
  background: var(--surface-1000);
  border-block-start: 1px solid var(--line-2);
  margin-block-start: 0;
}

/* the same gold rule the profile uses to close a page */
.site-footer::before {
  content: '';
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  inline-size: clamp(5rem, 16vw, 16rem);
  block-size: 2px;
  background: var(--gold);
}

/* — call band ----------------------------------------------------------------- */
.footer-call {
  border-block-end: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 194, 5, 0.045), transparent 70%);
}

.footer-call-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: clamp(1.75rem, 3.4vw, 2.9rem);
  flex-wrap: wrap;
}

.footer-call-text {
  display: grid;
  gap: 0.35rem;
  min-inline-size: min(100%, 22rem);
}

.footer-call-text h2 {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-max);
}

.footer-call-text p {
  font-size: 0.9375rem;
  color: var(--text-low);
  max-inline-size: 48ch;
}

.footer-call-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* — main grid ------------------------------------------------------------------ */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(2.75rem, 5vw, 4.25rem) clamp(2rem, 3.5vw, 3rem);
}

.footer-brand {
  display: grid;
  gap: 1.15rem;
  align-content: start;
}

.footer-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

.footer-brand-lockup .mark {
  inline-size: 2rem;
  block-size: 2.5rem;
  color: var(--gold);
  flex: none;
}

.footer-brand-name {
  display: grid;
  gap: 0.15rem;
}

.footer-brand-name b {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-max);
  line-height: 1.4;
}

.footer-brand-name span {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-ghost);
  line-height: 1.5;
}

.footer-about {
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--text-low);
  max-inline-size: 42ch;
}

.footer-slogan {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-block: 0.85rem 0.95rem;
  border-block-start: 1px solid var(--line);
  border-block-end: 1px solid var(--line);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1.6;
}

.footer-slogan::before {
  content: '';
  inline-size: 2px;
  block-size: 1.15em;
  background: var(--gold);
  flex: none;
  transform: translateY(0.18em);
}

/* — address --------------------------------------------------------------------- */
.footer-address {
  display: grid;
  gap: 0.55rem;
  font-size: 0.8125rem;
  color: var(--text-low);
  line-height: 1.75;
}

.footer-address-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.6rem;
}

.footer-address-row .ico {
  inline-size: 0.95rem;
  block-size: 0.95rem;
  color: var(--gold-55);
  transform: translateY(0.2em);
}

.footer-address-row a {
  color: var(--text-mid);
  transition: color 0.2s var(--ease);
}

.footer-address-row a:hover {
  color: var(--gold);
}

.footer-address-row a.tel {
  color: var(--text-mid);
}

/* — link columns ----------------------------------------------------------------- */
.footer-col {
  display: grid;
  align-content: start;
  gap: 0.9rem;
}

.footer-heading {
  position: relative;
  padding-block-end: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-hi);
}

html[lang='ar'] .footer-heading {
  letter-spacing: 0;
  font-size: 0.8125rem;
  text-transform: none;
}

.footer-heading::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 1.5rem;
  block-size: 2px;
  background: var(--gold);
}

.footer-links {
  display: grid;
  gap: 0.15rem;
}

.footer-link {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.32rem 0;
  font-size: 0.8125rem;
  color: var(--text-low);
  transition: color 0.2s var(--ease);
}

.footer-link::before {
  content: '';
  inline-size: 4px;
  block-size: 4px;
  background: var(--text-ghost);
  transform: rotate(45deg) translateY(-2px);
  flex: none;
  transition: background-color 0.2s var(--ease), transform 0.25s var(--ease);
}

.footer-link:hover {
  color: var(--gold);
}

.footer-link:hover::before {
  background: var(--gold);
  transform: rotate(45deg) translateY(-2px) scale(1.35);
}

.footer-link .link-note {
  display: block;
  font-size: 0.6875rem;
  color: var(--text-ghost);
  line-height: 1.5;
  margin-inline-start: 0.95rem;
}

/* — compliance note --------------------------------------------------------------- */
.footer-note {
  display: grid;
  gap: 0.4rem;
  padding: 1.05rem 1.15rem;
  background: var(--surface-950);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  font-size: 0.75rem;
  line-height: 1.75;
  color: var(--text-low);
}

.footer-note-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-hi);
}

.footer-note-title .ico {
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--gold);
}

/* — legal band --------------------------------------------------------------------- */
.footer-legal {
  border-block-start: 1px solid var(--line);
  background: var(--surface-950);
}

.footer-legal-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  flex-wrap: wrap;
  padding-block: 1.35rem;
}

.footer-legal-copy {
  font-size: 0.75rem;
  color: var(--text-ghost);
  line-height: 1.7;
  max-inline-size: 62ch;
}

.footer-legal-copy b {
  color: var(--text-low);
  font-weight: 600;
}

.footer-legal-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
}

.footer-legal-nav a {
  color: var(--text-low);
  transition: color 0.2s var(--ease);
}

.footer-legal-nav a:hover {
  color: var(--gold);
}

.footer-top {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-mid);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.footer-top:hover {
  color: var(--gold);
  border-color: var(--gold-55);
  background: var(--gold-12);
}

.footer-top .ico {
  inline-size: 0.85rem;
  block-size: 0.85rem;
}

/* — responsive ---------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
    gap: 1.25rem;
  }
}

@media (max-width: 720px) {
  .footer-call-inner {
    align-items: flex-start;
    gap: 1.25rem;
  }

  .footer-call-actions {
    inline-size: 100%;
  }

  .footer-call-actions .btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
  }

  .footer-legal-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-legal-nav {
    gap: 0.85rem 1.15rem;
  }
}


/* ─── 95-whatsapp.css ─────────────────────────────────────────────── */

/* =========================================================================
   95 · WHATSAPP SUPPORT — fixed, understated customer-service shortcut.
   ========================================================================= */

.whatsapp-float {
  position: fixed;
  z-index: 80;
  right: calc(1.25rem + env(safe-area-inset-right, 0px));
  --whatsapp-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  bottom: var(--whatsapp-bottom);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-block-size: 2.75rem;
  padding: 0.6rem 0.95rem;
  border: 1px solid rgba(37, 211, 102, 0.28);
  border-radius: 999px;
  background: rgba(28, 31, 33, 0.94);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  color: var(--text-hi);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition:
    bottom 0.72s var(--ease-out),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.whatsapp-float.is-raised {
  --whatsapp-bottom: calc(130px + env(safe-area-inset-bottom, 0px));
}

.whatsapp-float:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 211, 102, 0.56);
  background: rgba(35, 38, 41, 0.98);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
}

.whatsapp-float:active {
  transform: translateY(0);
}

.whatsapp-float:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.whatsapp-float-icon {
  inline-size: 1.2rem;
  block-size: 1.2rem;
  flex: none;
  color: #25d366;
}

@media (max-width: 560px) {
  .whatsapp-float {
    right: calc(1rem + env(safe-area-inset-right, 0px));
    --whatsapp-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    min-block-size: 2.65rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.75rem;
  }
}