/* Self-hosted webfonts. Subsets: arabic + latin. */

@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/almarai-400-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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: 'Almarai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/almarai-400-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: 'Almarai';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/almarai-700-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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: 'Almarai';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/almarai-700-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: 'Almarai';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/almarai-800-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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: 'Almarai';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/almarai-800-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 Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-400-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 Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-500-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: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(../fonts/noto-kufi-arabic-600-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(../fonts/noto-kufi-arabic-600-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;
}

/* Alexandria and IBM Plex Sans Arabic: the homepage hero's own type voice,
   scoped to `.hero` in site.css. Not used anywhere else on the site. */

@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/alexandria-800-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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;
}

@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/alexandria-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-400-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-500-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2212, U+FEFF, U+FFFD;
}

/* =============================================================================
   قلعة النمو للنقل البري
   Direction: the capability dossier. Ruled, squared, load-bearing.
   Font-face rules are prepended at build time from assets/fonts/fonts.css.
   ============================================================================= */

/* ---------- tokens ---------- */
:root {
  --ink:        oklch(21.5% 0.045 165);
  --ink-deep:   oklch(16.5% 0.040 165);
  --ink-soft:   oklch(27%   0.048 165);
  --green:      oklch(31%   0.062 163);
  --green-mid:  oklch(44%   0.055 165);
  --green-pale: oklch(62%   0.038 165);

  --gold:       oklch(78%   0.082 82);
  /* gold-deep is the gold that has to survive on paper: link text, indices,
     small labels. Held at a lightness that clears 4.5:1 on --paper-2. */
  --gold-deep:  oklch(52%   0.095 76);

  /* Pure white, and it has to stay pure white. The hero video is composited with
     mix-blend-mode: multiply, and multiply is an exact identity only against
     255 — against anything less, every background pixel of the video darkens by
     a couple of levels and the video's own bounding box appears as a faint
     rectangle on the page. The source render's ground sits at ~253 with
     compression noise, so build-video.sh lifts its white point to a clean 255
     to meet this value. Change one and you must change the other. */
  --stage:      #fff;

  --paper:      oklch(97.6% 0.006 120);
  --paper-2:    oklch(94.6% 0.008 120);
  --paper-3:    oklch(91%   0.010 130);
  --rule:       oklch(86%   0.011 150);
  --rule-soft:  oklch(90.5% 0.008 150);

  --text:       oklch(24%   0.028 160);
  --text-2:     oklch(43%   0.020 160);
  --text-3:     oklch(51.5% 0.018 160);

  --on-ink:     oklch(96%   0.008 140);
  --on-ink-2:   oklch(80%   0.020 150);
  --on-ink-3:   oklch(66%   0.024 155);

  /* WhatsApp green, darkened until white label text clears 4.5:1. The brand
     green is far too light to carry white type at button sizes. */
  --wa:         oklch(53.5% 0.142 152);
  --wa-dark:    oklch(47%   0.130 152);

  --display: 'Noto Kufi Arabic', 'Almarai', system-ui, sans-serif;
  --body: 'Almarai', system-ui, -apple-system, sans-serif;
  /* Almarai sits in the stack so mixed strings such as "1997م" or "اليوم"
     resolve their Arabic glyphs instead of dropping to a system fallback. */
  --mono: 'IBM Plex Mono', 'Almarai', ui-monospace, 'SF Mono', monospace;

  /* Second display voice, scoped to the homepage hero only (see `.hero` below)
     — the one section built to look like nothing else on the site. Everywhere
     else keeps --display / --body. */
  --display-hero: 'Alexandria', 'Baloo Bhaijaan 2', var(--display);
  --body-hero: 'IBM Plex Sans Arabic', var(--body);

  /* Bar height as a token: the mobile nav panel is positioned against it, and
     the two were previously hardcoded separately and drifted apart. */
  --hdr-h: 74px;

  --wrap: 1220px;
  --gut: clamp(1.15rem, 4.5vw, 3.25rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --hair: 1px solid var(--rule);
  --dock-h: 0px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* `clip` rather than `hidden`: it stops stray horizontal overflow without
   creating a scroll container, so the sticky header keeps working. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.9;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  padding-bottom: var(--dock-h);
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

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

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

/* Fixed rather than absolute-and-centred: an absolutely positioned element is
   laid out against the initial containing block, so a centring transform on it
   escapes the clip on <body> and gives the whole page a horizontal scrollbar. */
.skip {
  position: fixed; inset-inline-start: 1rem; top: -100px; z-index: 200;
  background: var(--ink); color: var(--on-ink);
  padding: 0.75rem 1.5rem; font-weight: 700;
}
.skip:focus { top: 1rem; }

/* ---------- type ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1 { font-weight: 800; }

p { text-wrap: pretty; }

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

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.sec { padding-block: clamp(3.75rem, 8vw, 7rem); }
.sec--tight { padding-block: clamp(2.75rem, 5.5vw, 4.5rem); }
.sec--pale { background: var(--paper-2); }
.sec + .sec--pale, .sec--pale + .sec { border-top: var(--hair); }

/* The crenellation lifted out of the monogram. Structural marker, not filler. */
.crenel {
  height: 9px;
  color: var(--rule);
  background: repeating-linear-gradient(to left, currentColor 0 20px, transparent 20px 52px);
}
.crenel--gold { color: var(--gold); }
.crenel--green { color: var(--green-mid); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--body); font-weight: 800; font-size: 0.95rem;
  border: 1.5px solid transparent; border-radius: 2px;
  transition: background-color 0.12s var(--ease), color 0.12s var(--ease),
              border-color 0.12s var(--ease), transform 0.12s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--sm { padding: 0.6rem 1rem; font-size: 0.855rem; }
.btn--lg { padding: 1.02rem 1.9rem; font-size: 1.02rem; }
.btn--block { display: flex; width: 100%; }

.btn--wa { background: var(--wa); color: oklch(99% 0.01 150); }
.btn--wa:hover { background: var(--wa-dark); }

.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: oklch(83% 0.086 82); }

.btn--ghost {
  border-color: color-mix(in oklab, var(--on-ink) 34%, transparent);
  color: var(--on-ink);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn--solid { background: var(--ink); color: var(--on-ink); }
.btn--solid:hover { background: var(--green); }

.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--on-ink); }

/* =============================================================================
   header
   ============================================================================= */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--hair);
}
.hdr__bar {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gut);
  min-height: var(--hdr-h);
  display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 2rem);
}

.brand { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
.brand__mark { width: 42px; height: 42px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-family: var(--display); font-weight: 800; font-size: 1.06rem; color: var(--ink); }
.brand__sub { font-size: 0.68rem; color: var(--text-3); font-weight: 700; letter-spacing: 0.01em; }

.nav { display: flex; align-items: center; gap: 0.15rem; margin-inline-start: auto; }
.nav__group { position: relative; }
.nav__link {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.9rem; font-weight: 700; color: var(--text-2);
  border-bottom: 2px solid transparent;
  transition: color 0.12s var(--ease), border-color 0.12s var(--ease);
}
.nav__link:hover, .nav__group:hover .nav__link { color: var(--ink); }
.nav__link.is-current { color: var(--ink); border-bottom-color: var(--gold); }
.nav__caret { transition: transform 0.16s var(--ease); }
.nav__group:hover .nav__caret { transform: rotate(180deg); }

.mega {
  position: absolute; inset-inline-start: 50%; transform: translateX(50%);
  top: calc(100% + 1px);
  min-width: 380px;
  background: var(--paper);
  border: var(--hair);
  border-top: 2px solid var(--gold);
  box-shadow: 0 18px 40px -24px oklch(20% 0.05 165 / 0.4);
  padding: 1.1rem;
}
.mega[hidden] { display: none; }
.mega__title {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--gold-deep); padding-inline: 0.6rem; margin-bottom: 0.5rem;
}
.mega__list { list-style: none; padding: 0; }
.mega__list a {
  display: flex; align-items: baseline; gap: 0.7rem;
  padding: 0.5rem 0.6rem;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.9rem; font-weight: 700; color: var(--text);
  transition: background-color 0.12s var(--ease), color 0.12s var(--ease);
}
.mega__list li:first-child a { border-top: 0; }
.mega__list a:hover { background: var(--paper-2); color: var(--ink); }
.mega__idx { font-family: var(--mono); font-size: 0.7rem; color: var(--gold-deep); }
.mega__label { flex: 1; }
.mega__meta { font-size: 0.75rem; font-weight: 700; color: var(--text-3); }
.mega__list--routes a { justify-content: space-between; }

.hdr__cta { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.hdr__tel { display: none; }
.hdr__tel-num {
  font-family: var(--mono); font-weight: 500; font-size: 0.93rem;
  color: var(--ink); direction: ltr; letter-spacing: -0.02em;
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 1px;
}
.hdr__tel:hover .hdr__tel-num { color: var(--gold-deep); }

/* 44px minimum tap target, which the previous 28x40 box did not meet. */
.burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; align-items: center;
  margin-inline-end: -0.4rem;   /* optical: pull the glyph back to the edge */
}
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform 0.2s var(--ease), opacity 0.2s var(--ease); }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile nav */
.mnav {
  position: fixed; inset: var(--hdr-h) 0 0; z-index: 89;
  background: var(--paper);
  overflow-y: auto;
  padding: 1.5rem var(--gut) 3rem;
  animation: mnav-in 0.28s var(--ease);
}
.mnav[hidden] { display: none; }
@keyframes mnav-in { from { opacity: 0; transform: translateY(-8px); } }
.mnav__title {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-deep);
  margin-top: 1.5rem; margin-bottom: 0.4rem;
}
.mnav__title:first-child { margin-top: 0; }
.mnav__list { list-style: none; padding: 0; margin-bottom: 0.5rem; }
.mnav__list a {
  display: block; padding: 0.72rem 0;
  border-top: 1px solid var(--rule-soft);
  font-weight: 700; font-size: 0.98rem; color: var(--text);
}
.mnav .btn { margin-top: 1.75rem; }

/* =============================================================================
   hero — the invisible stage

   The truck loop is rendered on a pure white ground, and the hero background is
   that same white, so the video carries no frame, border, radius, or shadow.
   `mix-blend-mode: multiply` drops its white out against the stage: anything at
   or near white becomes a no-op multiply, so the truck reads as though it were
   drawn on the page rather than played inside a box. That blend is also what
   forgives the video's compression tint — the ground is #FDFDFD, not #FFF, and
   multiply absorbs the difference instead of showing it as a seam.

   Consequences that are deliberate, not oversights:
   - no `object-fit: cover` anywhere near this; the truck is never cropped.
   - the section is the one light-grounded hero on a site whose other plates are
     deep green. Continuity is carried by the type colour, not the background.
   - nothing else in here animates. The truck is the only moving object.
   ============================================================================= */
.hero {
  background: var(--stage);
  color: var(--ink);
  position: relative;
  isolation: isolate;          /* keeps the video's multiply inside the hero */
  overflow: clip;
  /* Bottom padding leaves air above the plinth's battlements, which are drawn
     by .spec::before and rise into this white space. */
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(2.25rem, 4vw, 3.25rem);
}

/* The header is 74px of sticky chrome; the hero takes the rest of the first
   screen so the stage reads as a room rather than a band. svh, not vh, so the
   mobile URL bar cannot push the chips row out of reach. */
/* Tall enough to read as a room, capped so it never stretches into a void. A
   flat 100svh left ~300px of nothing between the trust line and the foot on a
   large display, because the copy and the 16:9 stage together simply do not need
   that much height. Capping also lets the plinth show at the fold, which is the
   point: the white is an aperture, and you should be able to see what it sits on
   without scrolling. */
@media (min-width: 1000px) {
  .hero {
    min-height: min(calc(100svh - 74px), 43rem);
    display: flex; flex-direction: column;
  }
  .hero__inner { flex: 1; }
}

.hero__inner {
  display: grid;
  /* Text on the inline-start side (right, in RTL); stage on the far side, so the
     truck's leftward travel points away from the copy toward open space.
     The copy column is padded in to line up with --wrap, but the grid itself is
     full-bleed: the stage runs off the inline-end edge of the viewport rather
     than stopping at a container. That is the departure energy — the truck is
     leaving the page, not parked inside a column. */
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  padding-inline-start: max(var(--gut), (100% - var(--wrap)) / 2);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
}

/* ---------- copy column ---------- */
/* A containment context so the headline can size itself against this column
   rather than against the viewport — see .hero__h1. */
.hero__copy { max-width: 34rem; container-type: inline-size; }

/* The eyebrow sits on the same crenellation as the plinth, at the other end of
   the composition and in gold rather than green: the motif opens the copy and
   closes the stage. A plain hairline here was the single most generic thing in
   the hero, on the one site whose whole design language is this shape. */
.hero__eyebrow {
  font-family: var(--body-hero);
  font-size: 0.775rem; font-weight: 500;
  line-height: 1.7;
  color: var(--text-2);
  padding-bottom: 0.85rem; margin-bottom: 1.35rem;
  position: relative;
}
.hero__eyebrow::after {
  content: '';
  position: absolute; inset-inline: 0; bottom: 0;
  height: 6px;
  background: repeating-linear-gradient(
    to left,
    var(--gold) 0 14px,
    transparent 14px 34px
  );
}

.hero__h1 {
  font-family: var(--display-hero);
  font-weight: 800;
  /* Sized against the copy column (cqw), not the viewport. The headline must hold
     two lines — "المدينة المنورة" breaking leaves the gold word stranded on a line
     of its own — and that word measures 7.67em in Alexandria, so anything above
     ~13cqw overflows. A viewport-based clamp cannot express this: the column is a
     fraction of the viewport that changes at the 1000px breakpoint, so a scale
     that fits at 1440 overflows by 39px at 1100.
     Deliberately not `white-space: nowrap`: if Alexandria fails to load, the
     wider fallback should wrap to a third line rather than be clipped. */
  font-size: clamp(2.2rem, 12.7cqw, 3.65rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.hero__line { display: block; }

/* The one accent word. --gold-deep rather than the brighter --gold: this is
   half the H1, and the bright gold sits at 2.4:1 on white, which fails even the
   large-text floor. --gold-deep clears 4.9:1 and still reads unmistakably gold
   next to the deep green. */
.hero__gold {
  font-style: normal;
  color: var(--gold-deep);
  position: relative;
}

/* Kashida: a rule that draws itself out from the word's start edge, the way the
   brand's own ads stretch a letter to hold a line. Used once, here, on hover. */
.hero__gold::after {
  content: '';
  position: absolute;
  inset-inline-start: 0; bottom: -0.12em;
  height: 2px; width: 0;
  background: var(--gold);
  transition: width 0.42s var(--ease);
}
.hero__gold:hover::after,
.hero__h1:hover .hero__gold::after { width: 100%; }

.hero__sub {
  font-family: var(--body-hero);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
  line-height: 1.8;
  color: var(--text);
  max-width: 34ch;
  text-wrap: balance;
}

/* Sized down from .btn--lg. The hero pair sits directly under a very large
   headline and beside a moving object, so it does not need the mass the closing
   CTA band needs to carry a section on its own. .btn--lg itself is left alone:
   the pricing page and the CTA band still use it at full size. */
.hero__actions {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-top: 1.75rem;
}
.hero__actions .btn--lg {
  padding: 0.78rem 1.35rem;
  font-size: 0.94rem;
}
.hero__wa svg { width: 17px; height: 17px; }

/* WhatsApp first, phone second: the Saudi conversion order. */
.hero__wa {
  font-family: var(--body-hero);
  background: var(--wa); color: oklch(99% 0.01 150);
  position: relative; overflow: hidden;
}
.hero__wa:hover { background: var(--wa-dark); }
/* Gold sweep along the button's own baseline, drawn from the inline start. */
.hero__wa::after {
  content: '';
  position: absolute;
  inset-inline-start: 0; bottom: 0;
  height: 2px; width: 0;
  background: var(--gold);
  transition: width 0.34s var(--ease);
}
.hero__wa:hover::after, .hero__wa:focus-visible::after { width: 100%; }
.hero__wa svg { transition: transform 0.2s var(--ease); }
.hero__wa:hover svg { transform: rotate(-2deg); }

/* Outlined, but weighted like a button rather than a text input: a hairline box
   around a phone number reads as a field to fill in, not a thing to press. */
.hero__tel {
  font-family: var(--body-hero);
  border-color: color-mix(in oklab, var(--ink) 42%, transparent);
  color: var(--ink);
}
.hero__tel:hover {
  background: var(--paper-2);
  border-color: var(--ink);
}
.hero__tel .num { font-size: 1.08em; font-weight: 700; letter-spacing: 0.01em; }

.hero__trust {
  font-family: var(--body-hero);
  margin-top: 1.5rem;
  font-size: 0.875rem; line-height: 1.75;
  color: var(--text-2);
  display: flex; align-items: baseline; gap: 0.6rem;
}
.hero__trust::before {
  content: ''; flex-shrink: 0;
  width: 7px; height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
  translate: 0 -0.15em;
}

/* ---------- the stage ---------- */
.hero__stage {
  position: relative;
  display: grid; place-items: center;
  /* Reserves the box before the poster decodes, so the video contributes no CLS. */
  aspect-ratio: 1600 / 892;
}

/* On a full-height desktop hero the stage stretches to the grid row rather than
   holding its own aspect box, and centres the video inside it. Height is set by
   the row, not by the video, so there is still nothing to shift as it loads. */
@media (min-width: 1000px) {
  .hero__stage { aspect-ratio: auto; align-self: stretch; min-height: 26rem; }
}

/* There is deliberately nothing behind the truck. A concentric-arc motif was
   tried here at 3% and cut: on an area this large it stopped reading as texture
   and started reading as artwork, which is the one thing the stage cannot have.
   It also broke the seam — the video multiplies over whatever sits behind it, so
   any pattern inside the video's box darkens while the same pattern outside it
   does not, drawing the exact rectangle this whole approach exists to hide. */

.hero__video {
  /* The element carries the clip's own aspect ratio rather than filling the
     stage, so the element box and the video content box are the same rectangle.
     They have to be: the mask below is positioned in element percentages, and
     letterboxing would slide it away from the pixels it is meant to fade. */
  width: 100%;
  aspect-ratio: 1600 / 892;
  height: auto;
  /* Belt and braces. With the ratio matched this is a no-op, but it guarantees
     the truck is letterboxed rather than cropped if the clip is ever re-exported
     at a different shape. */
  object-fit: contain;
  mix-blend-mode: multiply;

  /* The source render's frame cuts straight through the floor reflection under
     the truck — its bottom row is still ~243, not white — so the video's lower
     edge lands on the page as a faint but perfectly straight horizontal line,
     which is exactly the giveaway this hero is built to avoid. Fading the last
     tenth to transparent lets the reflection dissolve into the page instead.
     The truck's own lowest pixels are at 88% of the frame, so the fade starts
     below them and never touches the vehicle. */
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 99.5%);
          mask-image: linear-gradient(to bottom, #000 88%, transparent 99.5%);
}

/* A second fade, on the inline-start edge, and only where that edge lands in the
   middle of the page.

   The clip drives the truck off one side and brings it back in from the other,
   so for ~1.4s of every loop the vehicle straddles a frame boundary. On the far
   side that is exactly right — the boundary is the viewport edge, so it reads as
   the truck leaving. On this side it is not: at desktop widths the stage stops
   beside the headline, and an unfaded boundary slices the returning truck in
   half along a hard vertical line.

   The fade has very little room. The parked truck and its cargo reach 92.2% of
   the frame and sit there for most of the loop, so the gradient gets the 7.5%
   that is left and no more. It is a compromise, not a cure: it converts an
   obvious break into a brief soft entry, helped by the motion blur already in
   the clip. Below 1000px the stage is full-bleed and this edge is the screen
   edge, so the fade is not applied — the truck should arrive crisply there. */
@media (min-width: 1000px) {
  .hero__video {
    -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 99.5%),
                        linear-gradient(to right, #000 92.5%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 88%, transparent 99.5%),
                        linear-gradient(to right, #000 92.5%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
}

/* Blend-mode is effectively universal now, but if it is missing the video would
   render as a white rectangle sitting on a white page — visually identical here
   because the stage is already the video's own ground. Stated explicitly so the
   fallback is a decision rather than luck. */
@supports not (mix-blend-mode: multiply) {
  .hero__video { mix-blend-mode: normal; background: var(--stage); }
}

/* ---------- foot: chips + instalments ---------- */
.hero__foot {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gut);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  display: flex; flex-wrap: wrap; align-items: center;
  /* No horizontal gap: the entries are separated by their own rules. */
  gap: 0.85rem 0;
}

/* Ruled entries, not pills. Three grey rounded rectangles were the most
   template-shaped thing on the page, and this site's language is ruled tables
   and hairline dividers — so these are set as a divided row, the way the spec
   strip below divides its four facts. Each entry is marked by the crenel tooth
   rather than a bullet or a tick. */
.hero__chips {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap;
  align-items: center;
}
.hero__chip {
  font-family: var(--body-hero);
  font-size: 0.815rem; font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  display: flex; align-items: center; gap: 0.5rem;
  padding-inline: 1.05rem;
  border-inline-start: 1px solid var(--rule);
  transition: color 0.16s var(--ease);
}
.hero__chip:first-child { border-inline-start: 0; padding-inline-start: 0; }
.hero__chip::before {
  content: '';
  width: 5px; height: 5px; flex-shrink: 0;
  background: var(--gold);
  transition: transform 0.22s var(--ease);
}
.hero__chip:hover { color: var(--ink); }
.hero__chip:hover::before { transform: rotate(45deg); }

/* Instalments sit at the far end of the same rule as the chips, so the foot
   reads as one divided row rather than two stranded groups. */
.hero__bnpl {
  display: flex; align-items: center; gap: 0.55rem;
  margin-inline-start: auto;
  font-family: var(--body-hero);
  padding-inline-start: 1.05rem;
  border-inline-start: 1px solid var(--rule);
}
/* --text-2, not --text-3: at 0.78rem this is normal-size text, and --text-3
   only clears 4.1:1 on white. */
.hero__bnpl-label { font-size: 0.78rem; color: var(--text-2); }
/* Set in the plinth's green and boxed like a stamped mark, so the pair reads as
   a deliberate credential rather than two words of grey text that failed to
   load. Quiet until hover: instalments must never outrank the WhatsApp CTA. */
.hero__mark {
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-2);
  border: 1px solid var(--rule);
  padding: 0.28rem 0.5rem;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.hero__mark:hover { color: var(--ink); border-color: var(--gold); }

/* ---------- entrance choreography ---------- */
/* One orchestrated moment: eyebrow, then the two headline lines, then sub, CTAs
   and chips, each 90ms behind the last. Entrances come from the inline-start
   edge — the right, in this RTL document — so the copy settles in reading order.
   The video fades in on its poster as the sequence closes and only then starts
   playing, which is what makes the truck look like it woke up rather than like
   it was already running when the page arrived.

   Scoped to .js for the same reason as [data-reveal]: nothing may be left at
   opacity 0 because a script failed to load. */
.js .hero [data-hero-in] {
  opacity: 0;
  transform: translateX(18px);
  animation: hero-in 0.62s var(--ease) forwards;
}
.js .hero [data-hero-in='1'] { animation-delay: 0.06s; }
.js .hero [data-hero-in='2'] { animation-delay: 0.15s; }
.js .hero [data-hero-in='3'] { animation-delay: 0.24s; }
.js .hero [data-hero-in='4'] { animation-delay: 0.33s; }
.js .hero [data-hero-in='5'] { animation-delay: 0.42s; }
.js .hero [data-hero-in='6'] { animation-delay: 0.51s; }
.js .hero [data-hero-in='7'] { animation-delay: 0.60s; }

@keyframes hero-in {
  to { opacity: 1; transform: none; }
}

.js .hero__stage {
  opacity: 0;
  animation: hero-stage-in 0.8s var(--ease) 0.86s forwards;
}
@keyframes hero-stage-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}

/* Reordered on mobile, so the stage arrives between the lead and the buttons
   rather than last. Without this the buttons would appear before the truck they
   now sit under, and the sequence would read bottom-up. */
@media (max-width: 999px) {
  .js .hero__stage { animation-delay: 0.42s; }
  .js .hero [data-hero-in='5'] { animation-delay: 0.60s; }
  .js .hero [data-hero-in='6'] { animation-delay: 0.69s; }
  .js .hero [data-hero-in='7'] { animation-delay: 0.78s; }
}

/* Reduced motion: no entrance, no video. The poster is shown instead, which is
   the same frame the loop opens and closes on, so nothing is lost but movement. */
@media (prefers-reduced-motion: reduce) {
  .js .hero [data-hero-in],
  .js .hero__stage {
    opacity: 1; transform: none; animation: none;
  }
  .hero__gold::after, .hero__wa::after { transition: none; }
}

/* The plinth.

   The hero is a white room. This is what the room stands on: a full-bleed deep
   green band carrying the four hard facts, joined to the stage above by the
   crenellation lifted out of the monogram. That join is the point. It makes the
   white read as a lit aperture cut above a wall rather than as an empty page,
   it returns the brand's green the moment the truck is done talking, and it is
   the fortress motif doing structural work instead of decorating a margin.

   It also gives the hero a floor. Without it the stage had no bottom edge and
   the whole composition floated. */
.spec {
  list-style: none;
  position: relative;
  background: var(--ink); color: var(--on-ink);
  /* Full-bleed band whose content still lines up with --wrap, without needing an
     inner wrapper element that specStrip() does not emit. */
  padding-inline: max(var(--gut), (100% - var(--wrap)) / 2);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  --spec-rule: 1px solid color-mix(in oklab, var(--green-pale) 22%, transparent);
}

/* Battlements. Teeth of the plinth rising into the white above it, drawn in the
   plinth's own colour so the wall and its crenellation are one solid mass. */
.spec::before {
  content: '';
  position: absolute; inset-inline: 0; bottom: 100%;
  height: clamp(7px, 0.75vw, 10px);
  background: repeating-linear-gradient(
    to left,
    var(--ink) 0 clamp(16px, 1.7vw, 22px),
    transparent clamp(16px, 1.7vw, 22px) clamp(42px, 4.4vw, 57px)
  );
}

.spec__item {
  padding: clamp(1.15rem, 2vw, 1.6rem) 1.25rem;
  border-inline-start: var(--spec-rule);
}
.spec__item:first-child { border-inline-start: 0; padding-inline-start: 0; }
.spec__k {
  display: block;
  font-family: var(--mono); font-size: 0.65rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--green-pale); margin-bottom: 0.32rem;
}
.spec__v { display: block; font-size: 0.94rem; font-weight: 700; color: var(--on-ink); line-height: 1.5; }
.spec__v .num { font-size: 1.16em; color: var(--gold); }

/* =============================================================================
   full-bleed band
   ============================================================================= */
/* The page's one escape from the --wrap measure. Deliberately edge to edge: its
   job is to interrupt a long run of identically shaped text sections, and a
   contained image would just be another block inside the same column. */
.band { margin: 0; position: relative; }
.band__img img {
  width: 100%;
  aspect-ratio: 21 / 6;
  object-fit: cover;
  object-position: 50% 42%;
}
.band__cap {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gut);
  margin-top: 0.85rem;
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.79rem; color: var(--text-2);
}
.band__cap::before { content: ''; width: 18px; height: 1px; background: var(--gold); flex-shrink: 0; }

@media (max-width: 720px) {
  .band__img img { aspect-ratio: 16 / 9; }
}

/* =============================================================================
   section header
   ============================================================================= */
.shead {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 0 1.5rem;
  padding-top: 1.35rem;
  border-top: 2px solid var(--ink);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.shead__idx {
  display: block;
  font-family: var(--mono); font-size: 0.78rem; font-weight: 500;
  color: var(--gold-deep); letter-spacing: 0.04em;
}
/* Crenellation tick above the section number, so a section index never reads
   as a list index further down the same page. */
.shead__idx::before {
  content: ''; display: block; width: 24px; height: 6px; margin-bottom: 0.6rem;
  background: repeating-linear-gradient(to left, var(--gold-deep) 0 5px, transparent 5px 11px);
}
.shead--light .shead__idx::before { background: repeating-linear-gradient(to left, var(--gold) 0 5px, transparent 5px 11px); }
.shead__kicker {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--text-3); margin-bottom: 0.6rem;
}
.shead__title {
  font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.6rem);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.shead__lead {
  margin-top: 1rem; max-width: 62ch;
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.09rem);
  color: var(--text-2);
}
.shead--light { border-top-color: var(--green-mid); }
.shead--light .shead__title { color: oklch(97% 0.008 140); }
.shead--light .shead__lead { color: var(--on-ink-2); }
.shead--light .shead__kicker { color: var(--green-pale); }
.shead--light .shead__idx { color: var(--gold); }

/* =============================================================================
   services index
   ============================================================================= */
.sindex { list-style: none; padding: 0; counter-reset: s; }
.sindex__row { border-top: var(--hair); }
.sindex__row:last-child { border-bottom: var(--hair); }
/* Title and description sit in adjacent columns so the row reads as a printed
   index line and fills the measure, instead of hugging one edge. */
.sindex__link {
  display: grid;
  grid-template-columns: 68px 132px minmax(0, 0.82fr) minmax(0, 1.18fr) 34px;
  gap: 0 clamp(1.1rem, 2.2vw, 2rem);
  align-items: start;
  padding: clamp(1.35rem, 2.4vw, 1.85rem) 0;
  transition: background-color 0.16s var(--ease);
}
.sindex__link:hover { background: var(--paper-2); }

/* A photograph per row, sized as an index marker rather than a card. The
   services list was six rows of unbroken text in the first screen after the
   hero, which made the page's most important section its least scannable. The
   ruled row is kept exactly as it was: this adds an image to a list, it does not
   turn the list into the six-identical-cards grid PRODUCT.md rules out. */
.sindex__thumb {
  display: block;
  overflow: hidden;
  background: var(--paper-2);
  align-self: center;
}
.sindex__thumb img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* The crops come from mixed sources at mixed ratios; a shared duotone-free
     scrim is enough to make them sit as one set without touching the pixels. */
  filter: saturate(0.92);
  transition: transform 0.5s var(--ease), filter 0.3s var(--ease);
}
.sindex__row:hover .sindex__thumb img { transform: scale(1.04); filter: saturate(1); }
.sindex__idx {
  font-family: var(--mono); font-size: 1.05rem; font-weight: 400;
  color: var(--text-3); letter-spacing: -0.03em;
  transition: color 0.14s var(--ease);
}
.sindex__link:hover .sindex__idx { color: var(--gold-deep); }
.sindex__main { display: contents; }
.sindex__title {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.14rem, 1rem + 0.6vw, 1.42rem);
  color: var(--ink); line-height: 1.45;
  transition: color 0.14s var(--ease);
}
.sindex__link:hover .sindex__title { color: var(--gold-deep); }
.sindex__lead {
  display: block; padding-top: 0.2rem;
  font-size: 0.95rem; color: var(--text-2); line-height: 1.8;
}
.sindex__go {
  align-self: start; padding-top: 0.6rem; color: var(--rule);
  transition: color 0.14s var(--ease), transform 0.2s var(--ease);
}
.sindex__link:hover .sindex__go { color: var(--gold-deep); transform: translateX(-6px); }
.sindex__row.is-active { background: var(--paper-2); }

/* =============================================================================
   routes table
   ============================================================================= */
.rtable-wrap { overflow-x: auto; }
.rtable { min-width: 520px; font-size: 0.96rem; }
.rtable caption { text-align: start; }
.rtable th, .rtable td { text-align: start; padding: 0.95rem 1rem; }
.rtable thead th {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-3);
  border-bottom: 2px solid var(--ink);
  padding-block: 0.6rem;
}
.rtable tbody tr { border-bottom: var(--hair); transition: background-color 0.14s var(--ease); }
.rtable tbody tr:hover { background: var(--paper-2); }
.rtable tbody th { font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.rtable tbody th a { display: block; }
.rtable tbody th a:hover { color: var(--gold-deep); }
.rtable td { color: var(--text-2); }
.rtable .num { color: var(--ink); font-size: 1.04em; }
.rtable__go a {
  font-family: var(--mono); font-size: 0.76rem; color: var(--gold-deep);
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.rtable tr.is-active { background: var(--paper-2); }
.rtable tr.is-active th a { color: var(--gold-deep); }
.rtable__note {
  margin-top: 1.1rem; font-size: 0.85rem; color: var(--text-3);
  max-width: 68ch;
}
.sec--pale .rtable tbody tr:hover, .sec--pale .rtable tr.is-active { background: var(--paper-3); }

/* =============================================================================
   process steps
   ============================================================================= */
.steps {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 2px solid var(--ink);
}
.steps__item {
  padding: 1.65rem 1.5rem 1.9rem 0;
  border-inline-start: var(--hair);
  padding-inline-start: 1.5rem;
  border-bottom: var(--hair);
}
.steps__item:nth-child(3n + 1) { border-inline-start: 0; padding-inline-start: 0; }
.steps__num {
  display: block;
  font-family: var(--mono); font-size: 0.76rem; font-weight: 500;
  color: var(--gold-deep); margin-bottom: 0.85rem;
}
.steps__t { font-size: 1.12rem; color: var(--ink); margin-bottom: 0.5rem; }
.steps__d { font-size: 0.93rem; color: var(--text-2); line-height: 1.82; }

/* =============================================================================
   timeline
   ============================================================================= */
.tline { list-style: none; padding: 0; border-top: 2px solid var(--ink); }
.tline__item {
  display: grid; grid-template-columns: 118px minmax(0, 1fr);
  gap: 0 1.75rem;
  padding: 1.5rem 0;
  border-bottom: var(--hair);
  position: relative;
}
.tline__year {
  font-size: 1.28rem; font-weight: 500; color: var(--text-3);
  letter-spacing: -0.03em;
}
.tline__item.is-key .tline__year, .tline__item.is-now .tline__year { color: var(--gold-deep); }
.tline__entity {
  font-size: 1.06rem; color: var(--ink); margin-bottom: 0.35rem;
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
}
.tline__badge {
  font-family: var(--mono); font-size: 0.63rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink); background: var(--gold);
  padding: 0.2rem 0.5rem;
}
.tline__text { font-size: 0.94rem; color: var(--text-2); max-width: 66ch; }
/* The closing row bleeds out to the gutter exactly, never past it. */
.tline__item.is-now {
  background: var(--paper-2);
  padding-inline: min(1.25rem, var(--gut));
  margin-inline: calc(min(1.25rem, var(--gut)) * -1);
}
.tline__item.is-now .tline__entity { font-family: var(--display); }

/* =============================================================================
   why us
   ============================================================================= */
.why {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 2px solid var(--ink);
  margin: 0;
}
.why__row {
  padding: 1.6rem 1.75rem 1.8rem 0;
  border-bottom: var(--hair);
  border-inline-start: var(--hair);
  padding-inline-start: 1.75rem;
}
.why__row:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
.why__t {
  font-family: var(--display); font-weight: 700; font-size: 1.1rem;
  color: var(--ink); margin-bottom: 0.55rem;
  display: flex; align-items: baseline; gap: 0.6rem;
}
.why__t::before {
  content: ''; width: 8px; height: 8px; flex-shrink: 0;
  background: var(--gold); transform: rotate(45deg);
  position: relative; top: -2px;
}
.why__d { margin: 0; font-size: 0.94rem; color: var(--text-2); line-height: 1.85; }

/* =============================================================================
   comparison figure
   ============================================================================= */
.compare { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(1.75rem, 4vw, 3.25rem); align-items: center; }
.compare figure { margin: 0; }
.compare figcaption {
  margin-top: 0.85rem; font-family: var(--mono); font-size: 0.72rem;
  color: var(--text-3); display: flex; align-items: center; gap: 0.5rem;
}
.compare figcaption::before { content: ''; width: 18px; height: 1px; background: var(--gold-deep); }
.compare img { border: var(--hair); }
.compare__list { list-style: none; padding: 0; }
.compare__list li {
  padding: 0.9rem 0; border-top: var(--hair);
  font-size: 0.95rem; color: var(--text-2);
  display: grid; grid-template-columns: 22px 1fr; gap: 0.85rem; align-items: start;
}
.compare__list li:last-child { border-bottom: var(--hair); }
.compare__list b { color: var(--ink); font-weight: 800; }
.compare__mark { font-family: var(--mono); font-weight: 500; color: var(--gold-deep); }

/* =============================================================================
   faq
   ============================================================================= */
.faq { border-top: 2px solid var(--ink); }
.faq__item { border-bottom: var(--hair); }
/* The marker leads the question rather than sitting at the far end of a
   full-width rule, where it would strand itself ~900px from the text it toggles. */
.faq__q {
  display: flex; align-items: baseline; justify-content: flex-start; gap: 0.9rem;
  padding: 1.2rem 0;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.12rem);
  color: var(--ink); line-height: 1.55;
  transition: color 0.12s var(--ease);
}
.faq__q:hover { color: var(--gold-deep); }
.faq__sign {
  position: relative; flex-shrink: 0; width: 14px; height: 14px;
  align-self: center; order: -1;
}
.faq__q > span:not(.faq__sign) { flex: 1; }
.faq__sign::before, .faq__sign::after {
  content: ''; position: absolute; background: var(--gold-deep);
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}
.faq__sign::before { inset-block: 0; inset-inline-start: 6px; width: 2px; }
.faq__sign::after { inset-inline: 0; top: 6px; height: 2px; }
.faq__item[open] .faq__sign::before { transform: rotate(90deg); opacity: 0; }
.faq__a { padding-bottom: 1.35rem; max-width: 72ch; }
.faq__a p { font-size: 0.96rem; color: var(--text-2); line-height: 1.9; }
.faq__item[open] .faq__a { animation: faq-in 0.3s var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-5px); } }

/* =============================================================================
   cta band
   ============================================================================= */
.cta { background: var(--ink); color: var(--on-ink); }
.cta__inner {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gut);
  padding-block: clamp(2.75rem, 5.5vw, 4.25rem) 1.5rem;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
}
.cta__title {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.35rem);
  color: oklch(98% 0.006 140); letter-spacing: -0.015em;
}
.cta__text { margin-top: 0.8rem; color: var(--on-ink-2); max-width: 52ch; font-size: 1.02rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.cta__actions .btn--ghost .num { font-size: 1.05rem; }
.cta__fine {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gut); padding-bottom: clamp(2.5rem, 5vw, 3.75rem);
  font-size: 0.85rem; color: var(--on-ink-3);
  font-family: var(--mono); letter-spacing: 0.01em;
}
.cta--deep { background: var(--ink-deep); }

/* =============================================================================
   reviews
   ============================================================================= */
.reviews { list-style: none; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.reviews__item { padding: 1.6rem 0; border-bottom: var(--hair); }
.reviews__item blockquote p { font-size: 1.02rem; color: var(--text); line-height: 1.85; }
.reviews__item footer { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: baseline; }
.reviews__name { font-weight: 800; color: var(--ink); }
.reviews__meta { font-family: var(--mono); font-size: 0.72rem; color: var(--text-3); }

.reviews--empty {
  border: 1px dashed var(--rule);
  padding: clamp(1.6rem, 3.5vw, 2.5rem);
  background: var(--paper-2);
  max-width: 68ch;
}
.reviews__empty-t {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.11em; color: var(--gold-deep);
  margin-bottom: 0.7rem;
}
.reviews__empty-d { color: var(--text-2); font-size: 0.98rem; }
.reviews__empty-a {
  display: inline-block; margin-top: 1.1rem;
  font-weight: 800; font-size: 0.93rem; color: var(--ink);
  border-bottom: 2px solid var(--gold); padding-bottom: 2px;
}
.reviews__empty-a:hover { color: var(--gold-deep); }

/* =============================================================================
   prose (service + article bodies)
   ============================================================================= */
.prose { max-width: 68ch; }
.prose h2 {
  font-size: clamp(1.3rem, 1.1rem + 0.85vw, 1.72rem);
  color: var(--ink); margin-top: 2.75rem; margin-bottom: 1rem;
  padding-top: 1.1rem; border-top: 2px solid var(--ink);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.14rem; color: var(--ink); margin-top: 1.85rem; margin-bottom: 0.6rem; }
.prose p { margin-bottom: 1.15rem; color: var(--text-2); }
.prose p:last-child { margin-bottom: 0; }
.prose strong, .prose b { color: var(--ink); font-weight: 800; }
.prose a:not(.btn) { color: var(--ink); font-weight: 700; border-bottom: 1.5px solid var(--gold); }
.prose a:not(.btn):hover { color: var(--gold-deep); }
.prose ul { padding-inline-start: 0; list-style: none; margin-bottom: 1.25rem; }
.prose ul li {
  position: relative; padding-inline-start: 1.4rem; margin-bottom: 0.6rem; color: var(--text-2);
}
.prose ul li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 0.72em;
  width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg);
}

/* includes list on service pages */
.includes { border-top: 2px solid var(--ink); margin: 0; }
.includes__row {
  display: grid; grid-template-columns: minmax(150px, 232px) minmax(0, 1fr);
  gap: 0.35rem 1.75rem;
  padding: 1.15rem 0; border-bottom: var(--hair);
}
.includes__t { font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.includes__d { margin: 0; font-size: 0.94rem; color: var(--text-2); }

/* two-column page shell for service and article pages */
.doc { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.aside { position: sticky; top: 100px; }
.aside__box { border: var(--hair); background: var(--paper-2); padding: 1.5rem; }
.aside__box + .aside__box { margin-top: 1.25rem; }
.aside__h {
  font-family: var(--mono); font-size: 0.67rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-deep);
  margin-bottom: 0.9rem;
}
.aside__t { font-family: var(--display); font-size: 1.1rem; color: var(--ink); margin-bottom: 0.6rem; line-height: 1.5; }
.aside__d { font-size: 0.9rem; color: var(--text-2); margin-bottom: 1.15rem; }
.aside__list { list-style: none; padding: 0; }
.aside__list li { border-top: 1px solid var(--rule-soft); }
.aside__list li:first-child { border-top: 0; }
.aside__list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem;
  padding: 0.62rem 0; font-size: 0.9rem; font-weight: 700; color: var(--text);
}
.aside__list a:hover { color: var(--gold-deep); }
.aside__km { font-size: 0.8rem; color: var(--text-3); font-weight: 700; white-space: nowrap; }
.aside__tel {
  display: block; font-family: var(--mono); font-size: 1.22rem; font-weight: 500;
  color: var(--ink); direction: ltr; text-align: center; margin-bottom: 0.9rem;
}

/* related services */
.related { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.4rem; border-top: 2px solid var(--ink); }
.related__h { font-family: var(--mono); font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); margin-bottom: 0.6rem; }
.related__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2rem; }
.related__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 0; border-bottom: var(--hair);
  font-family: var(--display); font-weight: 700; font-size: 0.98rem; color: var(--ink);
}
.related__list a svg { color: var(--rule); transition: color 0.14s var(--ease), transform 0.2s var(--ease); }
.related__list a:hover { color: var(--gold-deep); }
.related__list a:hover svg { color: var(--gold-deep); transform: translateX(-5px); }

/* breadcrumbs */
.crumbs { padding-block: 1.1rem; border-bottom: var(--hair); }
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.82rem; color: var(--text-3); }
.crumbs li + li::before { content: '/'; margin-inline-end: 0.5rem; color: var(--rule); }
.crumbs a:hover { color: var(--gold-deep); }
.crumbs [aria-current] { color: var(--text-2); }

/* page masthead for interior pages */
.mast { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.75rem, 3.5vw, 2.75rem); }
.mast__kicker {
  font-family: var(--mono); font-size: 0.69rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.11em; color: var(--gold-deep);
  margin-bottom: 0.9rem;
}
.mast__h1 {
  font-size: clamp(1.95rem, 1.4rem + 2.4vw, 3.15rem);
  letter-spacing: -0.02em; color: var(--ink); max-width: 20ch;
}
.mast__lead {
  margin-top: 1.15rem; max-width: 62ch;
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.16rem);
  color: var(--text-2);
}
.mast__meta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; }
.mast__meta span { font-family: var(--mono); font-size: 0.75rem; color: var(--text-3); }
.mast__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }

/* article list */
.plist { list-style: none; padding: 0; border-top: 2px solid var(--ink); }
.plist__item { border-bottom: var(--hair); }
.plist__link {
  display: grid; grid-template-columns: 120px minmax(0, 1fr);
  gap: 0.35rem 1.75rem;
  padding: 1.75rem 0;
  transition: background-color 0.16s var(--ease);
}
.plist__link:hover { background: var(--paper-2); }
/* No forced direction: the string mixes an Arabic month with Latin digits and
   must follow the page's RTL flow to read in the right order. */
.plist__date { font-size: 0.79rem; font-weight: 700; color: var(--text-3); }
.plist__t { font-size: clamp(1.14rem, 1rem + 0.6vw, 1.42rem); color: var(--ink); margin-bottom: 0.45rem; }
.plist__link:hover .plist__t { color: var(--gold-deep); }
.plist__x { font-size: 0.95rem; color: var(--text-2); max-width: 66ch; }
.plist__read { display: block; margin-top: 0.7rem; font-family: var(--mono); font-size: 0.72rem; color: var(--text-3); }

/* district chips: plain ruled wrap, not pills */
.districts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.districts li {
  font-size: 0.86rem; font-weight: 700; color: var(--text-2);
  border: var(--hair); padding: 0.42rem 0.8rem; background: var(--paper);
}

/* notes list on route pages */
.notes { list-style: none; padding: 0; border-top: 2px solid var(--ink); }
.notes li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 1rem;
  padding: 1.05rem 0; border-bottom: var(--hair);
  font-size: 0.96rem; color: var(--text-2);
}
.notes li::before {
  content: counter(n, decimal-leading-zero); counter-increment: n;
  font-family: var(--mono); font-size: 0.76rem; color: var(--gold-deep);
}
.notes { counter-reset: n; }

/* =============================================================================
   dark plate section
   ============================================================================= */
.plate { background: var(--ink); color: var(--on-ink); }
.plate .compare img { border-color: color-mix(in oklab, var(--green-pale) 26%, transparent); }
.plate .compare figcaption { color: var(--on-ink-3); }
.plate .compare figcaption::before { background: var(--gold); }
.plate .compare__list li { border-color: color-mix(in oklab, var(--green-pale) 20%, transparent); color: var(--on-ink-2); }
.plate .compare__list b { color: oklch(97% 0.008 140); }
.plate .compare__mark { color: var(--gold); }

/* shared minor heading, used above ruled blocks inside documents */
.sub-h {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3);
  margin-bottom: 0.6rem;
}

/* home: districts under the routes table */
.cover-districts { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.cover-districts__h {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3);
  padding-top: 1.1rem; border-top: var(--hair); margin-bottom: 0.9rem;
}

/* home: lineage + signage photograph */
.story { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(2rem, 4.5vw, 3.5rem); align-items: start; }
.story__fig { margin: 0; }
.story__fig img { border: var(--hair); width: 100%; }
.story__fig figcaption {
  margin-top: 0.8rem; font-family: var(--mono); font-size: 0.7rem; color: var(--text-3);
  display: flex; align-items: center; gap: 0.5rem;
}
.story__fig figcaption::before { content: ''; width: 16px; height: 1px; background: var(--gold-deep); flex-shrink: 0; }
.story__more { margin-top: 1.75rem; }
.story__more a {
  font-weight: 800; font-size: 0.94rem; color: var(--ink);
  border-bottom: 2px solid var(--gold); padding-bottom: 2px;
}
.story__more a:hover { color: var(--gold-deep); }

.home-reviews { margin-top: clamp(2.5rem, 5vw, 3.75rem); }

/* Service page lead image, cropped to a band so it introduces the page instead
   of consuming the first screen of it. */
.mast__img { display: block; margin-bottom: 0.5rem; }
.mast__img img {
  width: 100%; border: var(--hair);
  aspect-ratio: 21 / 8; object-fit: cover; object-position: center 42%;
}
@media (max-width: 720px) { .mast__img img { aspect-ratio: 16 / 10; } }

.svc-faq { margin-top: clamp(2.25rem, 4.5vw, 3.25rem); }
.prose--spaced { margin-top: clamp(2.25rem, 4.5vw, 3.25rem); }
.contact-num { font-size: 1.15rem; color: var(--ink); border-bottom: 2px solid var(--gold); }

@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; }
  .story__fig { max-width: 300px; }
}

/* =============================================================================
   footer
   ============================================================================= */
.ftr { background: var(--ink-deep); color: var(--on-ink-2); margin-top: 0; }
.ftr__top {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gut);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr);
  gap: clamp(2.25rem, 5vw, 4rem);
}
.ftr__brand img { width: 52px; height: 52px; margin-bottom: 1.15rem; }
.ftr__name { font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--on-ink); line-height: 1.55; margin-bottom: 0.75rem; }
.ftr__desc { font-size: 0.89rem; line-height: 1.85; color: var(--on-ink-3); margin-bottom: 1.5rem; max-width: 40ch; }

.ftr__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
.ftr__h {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold);
  padding-bottom: 0.7rem; margin-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in oklab, var(--green-pale) 22%, transparent);
}
.ftr__col ul { list-style: none; padding: 0; }
.ftr__col li { font-size: 0.855rem; line-height: 1.6; padding-block: 0.36rem; }
.ftr__col a { color: var(--on-ink-2); transition: color 0.12s var(--ease); }
.ftr__col a:hover { color: var(--gold); }
.ftr__contact li { display: flex; flex-direction: column; gap: 0.1rem; padding-block: 0.5rem; color: var(--on-ink-3); }
.ftr__lbl { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--green-pale); }
.ftr__phone { font-family: var(--mono); font-size: 1.08rem; color: var(--gold) !important; direction: ltr; }
.ftr__social { display: flex; gap: 0.75rem; margin-top: 1rem; }
.ftr__social a { font-family: var(--mono); font-size: 0.72rem; color: var(--on-ink-3); border-bottom: 1px solid currentColor; }

.ftr__base {
  border-top: 1px solid color-mix(in oklab, var(--green-pale) 18%, transparent);
}
.ftr__base {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: 1.35rem var(--gut);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  font-size: 0.79rem; color: var(--on-ink-3);
}
.ftr__legal { font-family: var(--mono); font-size: 0.72rem; }

/* =============================================================================
   mobile action dock
   ============================================================================= */
.dock { display: none; }

/* =============================================================================
   reveal
   ============================================================================= */
/* Scoped to .js, which the head script sets and then removes again if site.js
   has not reported in. Content must never be left at opacity 0 because a
   script failed to load. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.62s var(--ease), transform 0.62s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =============================================================================
   Arabic label correction

   The dossier look leans on small mono labels, but IBM Plex Mono carries no
   Arabic glyphs, and letter-spacing actively damages Arabic: the script is
   cursive, so tracking prises apart strokes that should touch. Every label
   holding Arabic therefore uses the body face at a single unified size, with
   tracking and uppercasing removed. The mono face stays where it belongs, on
   Latin numerals: prices, distances, dates, indices, and the phone number.
   ============================================================================= */
.mega__title, .shead__kicker, .mast__kicker, .sub-h, .cover-districts__h,
.mnav__title, .aside__h, .ftr__h, .related__h, .reviews__empty-t,
.rtable thead th, .spec__k,
.compare figcaption, .story__fig figcaption, .plist__read, .rtable__go a {
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.795rem;
  letter-spacing: 0;
  text-transform: none;
}

.ftr__lbl, .tline__badge {
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0;
  text-transform: none;
}

.cta__fine, .mast__meta span, .ftr__legal, .rtable__note {
  font-family: var(--body);
  letter-spacing: 0;
  text-transform: none;
}
.ftr__legal { font-size: 0.79rem; }
.mast__meta span { font-size: 0.86rem; font-weight: 700; }
.cta__fine { font-size: 0.87rem; }

/* Numerals inside those labels keep the mono face and stay left-to-right. */
.mast__meta .num, .spec__v .num, .cta__fine .num { font-family: var(--mono); }

/* =============================================================================
   responsive
   ============================================================================= */
@media (min-width: 1100px) {
  .hdr__tel { display: block; }
}

/* Tablet and below: the copy takes the first screen on its own and the stage
   follows underneath at full width. Still borderless on white, so the stage
   running edge to edge is invisible — it just gives the truck more room. */
@media (max-width: 999px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: clamp(1.15rem, 3.5vw, 1.85rem);
    /* Symmetric gutter now that there is no bleeding stage column to feed. */
    padding-inline: var(--gut);
    /* The headline sizes itself against its container, and .hero__copy stops
       being one just below — see display: contents. The container moves here so
       the cqw scale keeps resolving against the same width. */
    container-type: inline-size;
  }
  /* One column, so the copy block dissolves and its children become grid items
     in their own right. That is what lets the stage sit between the lead and the
     buttons without duplicating any markup: on a phone the truck should be on
     screen before anything asks you to tap. */
  .hero__copy { display: contents; }
  .hero__eyebrow { order: 1; }
  .hero__h1      { order: 2; margin-bottom: 0; }
  .hero__sub     { order: 3; max-width: 46ch; }
  .hero__stage   { order: 4; }
  .hero__actions { order: 5; margin-top: 0; }
  .hero__trust   { order: 6; margin-top: 0; }
  /* Cancels the gutter on both sides so the stage spans exactly the viewport —
     white on white, so the full bleed is invisible; it only buys the truck room.
     This must cancel both sides or the stage ends up wider than the screen and
     the hero's overflow clip silently crops the truck. */
  .hero__stage { margin-inline: calc(var(--gut) * -1); }
  .doc { grid-template-columns: 1fr; }
  .aside { position: static; }
  .aside__box { max-width: 560px; }
  .ftr__top { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  /* Index rows collapse to a stack: number, then title, then description. */
  .sindex__link { grid-template-columns: 52px 92px minmax(0, 1fr) 28px; gap: 0 1rem; }
  .sindex__lead { grid-column: 3 / 5; margin-top: 0.42rem; padding-top: 0; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: flex; }
  /* The nav carried `margin-inline-start: auto`, and it is what pushed the
     actions to the far edge. With it hidden nothing did, so the whole bar
     bunched against the brand — six pixels between a solid green button and the
     wordmark — and left ~80px of dead space at the other end. */
  .hdr__cta { margin-inline-start: auto; gap: 0.45rem; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps__item:nth-child(3n + 1) { border-inline-start: var(--hair); padding-inline-start: 1.5rem; }
  .steps__item:nth-child(2n + 1) { border-inline-start: 0; padding-inline-start: 0; }
  .compare { grid-template-columns: 1fr; }
  .cta__inner { grid-template-columns: 1fr; }
  .ftr__cols { grid-template-columns: repeat(2, 1fr); }
  .spec { grid-template-columns: repeat(2, 1fr); }
  .spec__item:nth-child(3) { border-inline-start: 0; }
  .spec__item:nth-child(-n + 2) { border-bottom: var(--spec-rule); }
}

/* Below this the routes table stops being a table and becomes stacked records.
   A sideways-scrolling table on a phone hides exactly the column, the distance,
   that the visitor opened the page to read. */
@media (max-width: 620px) {
  .rtable-wrap { overflow-x: visible; }
  .rtable { min-width: 0; }
  .rtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rtable tbody tr { display: block; padding-block: 1.05rem; }
  .rtable tbody th, .rtable tbody td { display: block; padding: 0; }
  .rtable tbody th { font-size: 1.06rem; margin-bottom: 0.5rem; }
  .rtable tbody td { display: inline-block; font-size: 0.87rem; }
  .rtable tbody td + td { margin-inline-start: 1.1rem; }
  .rtable tbody td::before {
    content: attr(data-label) ' ';
    color: var(--text-3); font-size: 0.8rem; font-weight: 700;
  }
  .rtable__go { display: block !important; margin-top: 0.55rem; margin-inline-start: 0 !important; }
  .rtable__go::before { content: none; }
}

@media (max-width: 720px) {
  :root { --dock-h: 62px; }

  /* Phone: eyebrow, H1, sub and both CTAs land in the first viewport and the
     truck follows immediately under them, which is the DOM order already. */
  .hero { padding-block: 1.5rem 1.25rem; }
  .hero__inner { gap: 1.25rem; }
  .hero__foot { display: block; }
  /* Chips scroll sideways rather than wrapping to three lines. Scrollbar hidden:
     the row is short and self-evidently draggable, and a visible bar under three
     items reads as an error. Bleeds to the screen edges so the row does not look
     as though it ends early, while the first chip still clears the gutter. */
  .hero__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gut) * -1);
    padding-inline: var(--gut);
  }
  .hero__chips::-webkit-scrollbar { display: none; }
  /* Stacked, so the rule that divides it from the chips on one line becomes a
     stray vertical mark. */
  .hero__bnpl {
    margin-inline-start: 0; margin-top: 0.9rem;
    border-inline-start: 0; padding-inline-start: 0;
  }

  .shead { grid-template-columns: 1fr; gap: 0; }
  .shead__idx { display: block; margin-bottom: 0.55rem; }
  .why { grid-template-columns: 1fr; }
  .why__row { border-inline-start: 0; padding-inline-start: 0; padding-inline-end: 0; }
  .related__list { grid-template-columns: 1fr; }
  .includes__row { grid-template-columns: 1fr; gap: 0.3rem; }
  .tline__item { grid-template-columns: 1fr; gap: 0.4rem; }
  .plist__link { grid-template-columns: 1fr; gap: 0.5rem; }
  .plist__date { order: -1; }
  .mast__h1 { max-width: none; }

  .dock {
    display: grid; grid-template-columns: auto 1fr;
    position: fixed; inset-inline: 0; bottom: 0; z-index: 95;
    background: var(--ink);
    border-top: 1px solid var(--green-mid);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .dock__btn {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 1.05rem 1.15rem;
    font-weight: 800; font-size: 0.92rem;
  }
  .dock__btn--tel { color: var(--on-ink); border-inline-end: 1px solid var(--green-mid); }
  .dock__btn--wa { background: var(--wa); color: oklch(99% 0.01 150); }
}

/* Small phones: the brand descriptor yields before the call-to-action does. */
/* Phones: the sticky dock at the bottom of the viewport already carries both
   calls to action, labelled. Repeating a labelled WhatsApp button up here made
   it the loudest object in the header and crowded the wordmark, so the header
   keeps the affordance and drops the label. */
@media (max-width: 560px) {
  .hdr__cta .btn--wa span { display: none; }
  .hdr__cta .btn--wa { padding-inline: 0.72rem; }
}

/* Small phones. The bar keeps the page gutter: it used to set its own 0.85rem
   while the content below used --gut, so the wordmark sat 5px out of line with
   everything it was supposed to head. */
@media (max-width: 400px) {
  :root { --hdr-h: 66px; }
  .brand { min-width: 0; }
  .brand__name { font-size: 0.98rem; }
  .brand__sub { font-size: 0.63rem; }
  .brand__mark { width: 36px; height: 36px; }
  .brand { gap: 0.55rem; }
  .hdr__bar { gap: 0.4rem; }
}

/* Below this the descriptor is the first thing to go, not the whole identity. */
@media (max-width: 335px) {
  .brand__sub { display: none; }
}

@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .steps__item, .steps__item:nth-child(3n + 1) { border-inline-start: 0; padding-inline-start: 0; padding-inline-end: 0; }
  .ftr__cols { grid-template-columns: 1fr; }
  .spec { grid-template-columns: 1fr; }
  .spec__item { border-inline-start: 0; }
  .spec__item:not(:last-child) { border-bottom: var(--spec-rule); }
  /* WhatsApp is the conversion path, so it keeps the full measure. The number
     beside it does not need to: stretching both to full width gave the hero two
     equally loud blocks stacked on top of a sticky dock that already carries the
     same two actions. The pair fits side by side only above ~430px, so below
     that it stacks with the secondary sized to its content. */
  .hero__actions .hero__wa { flex: 1 1 100%; }
  .hero__actions .hero__tel { flex: 0 0 auto; }
  .cta__actions .btn { flex: 1 1 100%; }
  .ftr__base { flex-direction: column; }
}

/* ---------- print ---------- */
@media print {
  .hdr, .dock, .mnav, .cta, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .js [data-reveal] { opacity: 1; transform: none; }
}