/* ==========================================================================
   ALS Building Contracting — site stylesheet
   Built to "Brand and build specification" v1.0, 13 September 2026.
   Light theme only. Dark theme deliberately not shipped — see README.
   Logical properties throughout: the Arabic (RTL) version is a translation,
   not a rebuild. No physical left/right anywhere in this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · Fonts — self-hosted, same origin. Never fonts.googleapis.com.
   Landgericht Muenchen I, 20 Jan 2022, 3 O 17493/20.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Chivo";
  src: url("../fonts/chivo.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Readex Pro";
  src: url("../fonts/readex-pro.woff2") format("woff2-variations");
  font-weight: 160 700; font-style: normal; font-display: swap;
}
/* Arabic version only. Not loaded here; the files ship ready.
@font-face { font-family:"Reem Kufi"; src:url("../fonts/reem-kufi.woff2") format("woff2-variations");
  font-weight:400 700; font-style:normal; font-display:swap; }
@font-face { font-family:"Readex Pro AR"; src:url("../fonts/readex-pro-arabic.woff2") format("woff2-variations");
  font-weight:160 700; font-style:normal; font-display:swap; }
*/

/* Metric-matched fallbacks. Measured from the font files, not guessed. */
@font-face {
  font-family: "Readex fallback";
  src: local("Arial"), local("Helvetica"), local("Segoe UI");
  size-adjust: 111.2%; ascent-override: 89.9%;
  descent-override: 22.5%; line-gap-override: 0%;
}
@font-face {
  font-family: "Chivo fallback";
  src: local("Arial"), local("Helvetica"), local("Segoe UI");
  size-adjust: 109.8%; ascent-override: 85.6%;
  descent-override: 22.8%; line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   02 · Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* The twelve values. The count is fixed. */
  --c-basalt:      #0F211B;
  --c-basalt-up:   #16302A;
  --c-palm:        #1C4B3A;
  --c-palm-lift:   #2C6B52;
  --c-brass:       #D9A945;
  --c-brass-deep:  #A6791F;
  --c-plaster:     #EAEFEA;
  --c-chalk:       #FFFFFF;
  --c-slate:       #4E5B55;
  --c-slate-dim:   #9AA8A1;
  --c-danger:      #B3261E;
  --c-danger-up:   #F2B8B5;

  /* Roles — light. Components reference these and never a raw value. */
  --surface:        var(--c-plaster);
  --surface-raised: var(--c-chalk);
  --surface-accent: var(--c-palm);
  --surface-deep:   var(--c-basalt);
  --ink:            var(--c-basalt);
  --ink-muted:      var(--c-slate);
  --accent:         var(--c-palm);
  --accent-hover:   var(--c-palm-lift);
  --accent-ink:     var(--c-palm);
  --accent-line:    var(--c-brass-deep);
  --on-accent:      var(--c-plaster);
  --hairline:       #D2DAD2;
  --border-strong:  var(--c-slate);
  --focus:          var(--c-palm);
  --danger:         var(--c-danger);

  /* Type — Chivo display, Readex Pro text, Reem Kufi Arabic display. */
  --font-display: "Chivo", "Chivo fallback", Arial, sans-serif;
  --font-text:    "Readex Pro", "Readex fallback", Arial, sans-serif;
  --font-arabic:  "Reem Kufi", "Noto Kufi Arabic", serif;

  /* Scale: 1.25 from a 16px base, fluid 390 -> 1280. Each clamp solved,
     not eyeballed, so it lands exactly on the stated endpoints. */
  --t-h1:      clamp(34px, 24.360px + 2.4719vw, 56px);   /* spec 38 -> 72 */
  --t-counter: clamp(30px, 23.865px + 1.5730vw, 44px);   /* spec 32 -> 54 */
  --t-h2:      clamp(28px, 23.618px + 1.1236vw, 38px);   /* spec 30 -> 48 */
  --t-h3:      clamp(21px, 18.809px + 0.5618vw, 26px);   /* spec 22 -> 30 */
  --t-lead:    clamp(18px, 16.685px + 0.3371vw, 21px);   /* spec 19 -> 24 */
  --t-h4:      clamp(17px, 15.685px + 0.3371vw, 20px);   /* spec 18 -> 22 */
  --t-body:    clamp(16px, 15.562px + 0.1124vw, 17px);   /* spec 16 -> 18 */
  --t-sm:      14px;                                     /* spec 15 */
  --t-eyebrow: 13px;                                     /* spec 14 */
  --t-xs:      12px;                                     /* spec 13 */

  /* Space. Base 4. There are no arbitrary values in this stylesheet. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --band-y:    clamp(80px, 44.944px + 8.9888vw, 160px);
  --band-y-sm: clamp(56px, 34.966px + 5.3933vw, 104px);
  --head-gap:  clamp(40px, 15.461px + 6.2921vw, 96px);

  --margin:    clamp(20px, 0.72px + 4.944vw, 64px);
  --gutter:    clamp(16px, 8.99px + 1.798vw, 32px);
  --container: 1280px;

  --radius: 2px;
  --header-h: 88px;
  --ease: cubic-bezier(0, 0, .36, 1);

  /* Measure caps, per context. Nothing ships without one. */
  --m-h1: 17ch; --m-h2: 22ch; --m-lead: 46ch; --m-body: 68ch;
  --m-card: 42ch; --m-caption: 34ch; --m-answer: 62ch;
}

@media (min-width: 768px)  { :root { --header-h: 96px; } }   /* spec 104 */
@media (min-width: 1024px) { :root { --header-h: 104px; } }  /* spec 120 */

/* Dark theme is NOT shipped. color-scheme is declared light above on purpose:
   an unchecked dark theme is worse than none. When it is commissioned, the
   swap is this one block and nothing else — the role tokens already exist.
   @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ ... } }
   :root[data-theme="dark"]{ ... }                                            */

/* --------------------------------------------------------------------------
   03 · Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.62;
  font-synthesis: none;
  hyphens: manual;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;           /* belt and braces; nothing should overflow */
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: var(--t-h1); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; max-width: var(--m-h1); }
h2 { font-size: var(--t-h2); font-weight: 800; line-height: 1.08; letter-spacing: -0.018em; max-width: var(--m-h2); }
h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
h4 { font-size: var(--t-h4); font-weight: 700; line-height: 1.30; letter-spacing: -0.005em; }

p { margin: 0 0 var(--s-4); max-width: var(--m-body); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--s-4); padding-inline-start: 1.25em; max-width: var(--m-body); }
li + li { margin-block-start: var(--s-2); }
strong, b { font-weight: 600; }
em { font-style: normal; font-weight: 600; }   /* no italics for stress */
img, svg { max-width: 100%; height: auto; }

/* Numbers. The site is largely made of them. */
.tnum, table, .fact__v, .counter__value, .vbar__value, .phone {
  font-variant-numeric: tabular-nums lining-nums;
}

/* --------------------------------------------------------------------------
   04 · Focus — visible everywhere, never clipped, never animated
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.skip {
  position: absolute; inset-block-start: -100%; inset-inline-start: var(--s-4);
  z-index: 200; background: var(--surface-deep); color: var(--c-plaster);
  padding: var(--s-3) var(--s-5); border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 600; text-decoration: none;
}
.skip:focus { inset-block-start: var(--s-4); }

/* --------------------------------------------------------------------------
   05 · Layout — container, grid, bands
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--margin) * 2);
  margin-inline: auto;
  padding-inline: var(--margin);
}
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.grid > *, .three-up > *, .four-up > *, .two-up > *, .steps > *, .counters > * { min-inline-size: 0; }

.band { padding-block: var(--band-y); }
.band--sm { padding-block: var(--band-y-sm); }
/* Two adjacent bands of the same ground share one band's worth of seam. */
.band--seam-top { padding-block-start: var(--band-y-sm); }
.band--seam-bottom { padding-block-end: var(--band-y-sm); }

.band--page   { background: var(--surface); }
.band--raised { background: var(--surface-raised); }

/* Green and deep grounds re-map the roles rather than hard-coding colours.
   Every pair below is on the measured whitelist in chapter 05. */
.band--green {
  background: var(--surface-accent);
  --ink: var(--c-plaster);
  --ink-muted: var(--c-plaster);      /* slate-dim on palm is not whitelisted */
  --accent-ink: var(--c-brass);
  --accent-line: var(--c-brass);
  --hairline: rgba(234, 239, 234, .22);
  --border-strong: var(--c-plaster);
  --focus: var(--c-brass);
  --surface-raised: transparent;
  --danger: var(--c-danger-up);       /* B3261E on palm is 1.52:1; F2B8B5 is 5.81:1 */
}
.band--deep {
  background: var(--surface-deep);
  --ink: var(--c-plaster);
  --ink-muted: var(--c-slate-dim);
  --accent-ink: var(--c-brass);
  --accent-line: var(--c-brass);
  --hairline: #274037;
  --border-strong: var(--c-slate-dim);
  --focus: var(--c-brass);
  --surface-raised: var(--c-basalt-up);
  --danger: var(--c-danger-up);
}
.band--green, .band--deep { color: var(--ink); }
.band--green h1, .band--green h2, .band--green h3, .band--green h4,
.band--deep h1, .band--deep h2, .band--deep h3, .band--deep h4 { color: var(--ink); }

/* Column patterns. Six, and no others. */
.col-6  { grid-column: span 12; }
.col-7  { grid-column: span 12; }
.col-8  { grid-column: span 12; }
.col-10 { grid-column: span 12; }
.split > * { grid-column: span 12; }
.three-up, .four-up, .two-up { display: grid; gap: var(--gutter); grid-template-columns: 1fr; }
.row-gap { row-gap: var(--s-8); }

@media (min-width: 600px) {
  .two-up, .four-up--early { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .col-6 { grid-column: span 8; }
  .col-7, .col-8, .col-10 { grid-column: span 12; }
  .split--5-6 > :first-child { grid-column: span 6; }
  .split--5-6 > :last-child  { grid-column: span 6; }
  .split--6-5 > :first-child { grid-column: span 6; }
  .split--6-5 > :last-child  { grid-column: span 6; }
  .split--hero > :first-child { grid-column: span 7; }
  .split--hero > :last-child  { grid-column: span 5; }
  .three-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .four-up  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-up   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .col-6  { grid-column: span 6; }
  .col-7  { grid-column: span 7; }
  .col-8  { grid-column: span 8; }
  .col-10 { grid-column: 2 / span 10; }
  .split--5-6 > :first-child { grid-column: span 5; }
  .split--5-6 > :last-child  { grid-column: 7 / span 6; }
  .split--6-5 > :first-child { grid-column: span 6; }
  .split--6-5 > :last-child  { grid-column: 8 / span 5; }
  .three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .four-up  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .centred { grid-column: 4 / span 6; }
  .centred-8 { grid-column: 3 / span 8; }
}
.centred, .centred-8 { grid-column: span 12; }
.centred, .centred-8 { text-align: center; }
.centred h2, .centred-8 h2, .centred p, .centred-8 p,
.centred .lead, .centred-8 .lead { margin-inline: auto; }

/* --------------------------------------------------------------------------
   06 · Section head — eyebrow, heading, standfirst, then head-gap of air
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-eyebrow); line-height: 1.2; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-ink);
  margin: 0 0 var(--s-5); max-width: none;
}
.lead {
  font-family: var(--font-text); font-weight: 400;
  font-size: var(--t-lead); line-height: 1.45; color: var(--ink-muted);
  max-width: var(--m-lead); margin: var(--s-5) 0 0;
}
.head + * { margin-block-start: var(--head-gap); }
.head h2 + .lead { margin-block-start: var(--s-5); }

/* The brass rule. The brand's one ornament. Once per band, at most. */
.rule {
  display: block; block-size: 1px; inline-size: 64px;
  background: var(--accent-line); border: 0; margin: 0 0 var(--s-5);
}
.rule--full { inline-size: 100%; }

/* --------------------------------------------------------------------------
   07 · Buttons — three kinds, two sizes. No fourth kind.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 56px; padding-inline: var(--s-6); padding-block: 0;
  border-radius: var(--radius); border: 1px solid transparent;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn--compact { min-block-size: 48px; padding-inline: var(--s-5); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { background: transparent; border-color: var(--accent-ink); color: var(--accent-ink); }
.btn--ghost:hover { background: color-mix(in srgb, var(--accent-ink) 8%, transparent); }
.btn--quiet { background: transparent; border-color: var(--border-strong); color: var(--ink); }
.btn--quiet:hover { border-color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* On the green band the filled button is plaster and the ring is brass —
   a palm ring on a palm button measures 1.0:1. */
.band--green .btn--primary { background: var(--c-plaster); color: var(--c-palm); }
.band--green .btn--primary:hover { background: var(--c-chalk); }
.band--green .btn--ghost { border-color: var(--c-plaster); color: var(--c-plaster); }
.band--green .btn--ghost:hover { background: rgba(234, 239, 234, .1); }
.band--deep .btn--primary { background: var(--c-plaster); color: var(--c-basalt); }
.band--deep .btn--ghost { border-color: var(--c-brass); color: var(--c-brass); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-block-start: var(--s-6); }
.btn-note { font-size: var(--t-sm); color: var(--ink-muted); max-width: var(--m-lead); margin-block-start: var(--s-5); }
.btn-note a {
  display: inline-flex; align-items: center; min-block-size: 44px;
  padding-inline: var(--s-2); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: .18em;
}
.centred .btn-row, .centred-8 .btn-row { justify-content: center; }
.centred .btn-note, .centred-8 .btn-note { margin-inline: auto; }
@media (max-width: 599px) {
  .btn-row--stack { flex-direction: column; }
  .btn-row--stack .btn { inline-size: 100%; }
}

/* --------------------------------------------------------------------------
   08 · Links — colour is never the only signal
   -------------------------------------------------------------------------- */
a { color: var(--accent-ink); }
main p a, main li a, .prose a {
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .18em; transition: text-decoration-thickness .15s var(--ease);
}
main p a:hover, main li a:hover, .prose a:hover { text-decoration-thickness: 2px; }
.link-out {
  display: inline-block; font-family: var(--font-display); font-weight: 600;
  color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .18em; min-block-size: 44px; padding-block: 10px;
}
.link-out:hover { text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   09 · Header and mobile menu
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; inset-block-start: 0; z-index: 100;
  background: transparent; border-block-end: 1px solid transparent;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.site-header.is-solid { background: var(--surface-raised); border-block-end-color: var(--hairline); }
.site-header__inner {
  display: flex; align-items: center; gap: var(--s-5);
  min-block-size: var(--header-h);
}
.lockup { display: inline-flex; align-items: center; flex: 0 0 auto; }
.lockup img { inline-size: 180px; block-size: auto; display: block; }

.site-nav { display: none; }
.header__spacer { flex: 1 1 auto; }
@media (min-width: 1024px) {
  .site-nav { display: flex; gap: var(--s-6); margin-inline-start: var(--s-8); }
  .site-nav a {
    font-family: var(--font-text); font-weight: 500; font-size: var(--t-body);
    color: var(--ink); text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
    min-block-size: 44px; min-inline-size: 44px;
    border-block-end: 2px solid transparent;
  }
  .site-nav a:hover { border-block-end-color: var(--hairline); }
  .site-nav a[aria-current="page"] { border-block-end-color: var(--accent-line); }
  .header__actions { display: flex; align-items: center; gap: var(--s-5); }
}
.header__actions { display: none; }
@media (min-width: 1024px) { .header__actions { display: flex; } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-nav { margin-inline-start: var(--s-6); gap: var(--s-5); }
  .header__actions .phone { display: none; }
}
.phone {
  font-size: var(--t-sm); color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; min-block-size: 44px; white-space: nowrap;
}
.phone:hover { text-decoration: underline; }
@media (min-width: 768px) and (max-width: 1023px) { .header__actions { display: flex; } .header__actions .btn { display: none; } }

.menu-btn {
  inline-size: 48px; block-size: 48px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border-strong);
  border-radius: var(--radius); color: var(--ink); cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
}
@media (min-width: 1024px) { .menu-btn { display: none; } }
.menu-panel {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 150;
  inline-size: min(92vw, 420px); background: var(--surface-raised);
  padding: var(--s-6) var(--s-6) var(--s-8);
  box-shadow: 0 24px 48px -12px rgba(15, 33, 27, .28);
  transform: translateX(110%);
  transition: transform .28s var(--ease);
  overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-5);
}
[dir="rtl"] .menu-panel { transform: translateX(-110%); }
.menu-panel.is-open { transform: translateX(0); }
/* Closed and idle: removed from layout, so it cannot widen the page. */
.menu-panel[hidden] { display: none !important; }
@media (min-width: 1024px) { .menu-panel, .menu-scrim { display: none !important; } }
.menu-panel a.menu-link {
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3);
  color: var(--ink); text-decoration: none; display: block; padding-block: var(--s-3);
}
.menu-panel a.menu-link[aria-current="page"] { color: var(--accent-ink); }
.menu-close { align-self: flex-end; inline-size: auto; padding-inline: var(--s-3); }
.menu-scrim {
  position: fixed; inset: 0; z-index: 140; background: rgba(15, 33, 27, .4);
  opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), visibility .28s var(--ease);
}
.menu-scrim.is-open { opacity: 1; visibility: visible; }
body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   10 · Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-block-start: calc(var(--header-h) + var(--s-8));
  padding-block-end: var(--band-y);
  margin-block-start: calc(var(--header-h) * -1);
  min-block-size: min(88vh, 780px);
  display: flex; align-items: center;
}
.hero__grid { inline-size: 100%; }
.hero h1 { margin-block-start: var(--s-5); }
.micro { font-size: var(--t-sm); color: var(--ink-muted); max-width: var(--m-lead); margin-block-start: var(--s-5); }
.page-head {
  padding-block-start: calc(var(--header-h) + var(--band-y));
  padding-block-end: var(--band-y);
  margin-block-start: calc(var(--header-h) * -1);
}
.page-head h1 { max-width: 20ch; }

/* --------------------------------------------------------------------------
   11 · Fact panel — the object that replaces the hero photograph
   -------------------------------------------------------------------------- */
.fact {
  background: var(--surface-deep); color: var(--c-plaster);
  border-radius: var(--radius); padding: var(--s-6);
  border-block-start: 1px solid var(--c-brass);
}
.fact__title { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h4); margin: 0 0 var(--s-5); max-width: none; }
.fact dl { margin: 0; display: grid; gap: 0; }
.fact div { display: grid; gap: var(--s-1); padding-block: var(--s-4); border-block-end: 1px solid #274037; }
.fact div:last-of-type { border-block-end: 0; }
.fact dt { font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); color: var(--c-slate-dim); margin: 0; }
.fact dd { margin: 0; font-size: var(--t-sm); color: var(--c-plaster); font-variant-numeric: tabular-nums lining-nums; }
.fact__note { font-size: var(--t-xs); color: var(--c-slate-dim); margin-block-start: var(--s-5); max-width: none; }
.fact__note a { color: var(--c-brass); }
@media (min-width: 768px) {
  .fact--wide dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
}

/* --------------------------------------------------------------------------
   12 · Verification bar — four cells, nothing moves
   -------------------------------------------------------------------------- */
.vbar { display: grid; gap: var(--gutter); grid-template-columns: 1fr; }
@media (min-width: 600px) { .vbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .vbar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vbar__cell { display: grid; gap: var(--s-2); align-content: start; }
.vbar__value { font-family: var(--font-display); font-weight: 800; font-size: var(--t-h4); line-height: 1.2; }
.vbar__desc { font-size: var(--t-sm); color: var(--ink-muted); max-width: var(--m-caption); }
.band--hairlined { border-block: 1px solid var(--hairline); }

/* --------------------------------------------------------------------------
   13 · Counters — 08.6. The one rule that cannot be broken.
   The value and its label are one figure. The label can never be hidden,
   clipped, ellipsised or clamped. The declarations below are defensive on
   purpose: a later stylesheet must not be able to break this block.
   -------------------------------------------------------------------------- */
.counters { display: grid; gap: var(--s-8) var(--gutter); grid-template-columns: 1fr; }
@media (min-width: 600px)  { .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .counters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.counter { margin: 0; padding-block-start: var(--s-5); border-block-start: 1px solid var(--accent-line); }
.counter__prefix {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: .30em; line-height: 1.2; letter-spacing: .02em;
}
.counter__value {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--t-counter); line-height: 1.0; letter-spacing: -0.03em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
}
.counter figcaption { display: block; margin-block-start: var(--s-1); }
.counter__label {
  display: block !important;
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm);
  line-height: 1.4; color: var(--ink);
  overflow: visible !important;
  max-block-size: none !important;
  max-height: none !important;
  text-overflow: clip !important;
  -webkit-line-clamp: none !important;
  white-space: normal !important;
  visibility: visible !important;
}
.counter__caption {
  font-size: var(--t-sm); color: var(--ink-muted);
  max-width: var(--m-caption); margin-block-start: var(--s-3);
  overflow: visible;
}

/* --------------------------------------------------------------------------
   14 · Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface-raised); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: var(--s-5);
  display: grid; gap: var(--s-3); align-content: start;
}
@media (min-width: 768px) { .card { padding: var(--s-6); } }
.card h3, .card h4 { max-width: none; }
.card p { font-size: var(--t-sm); max-width: var(--m-card); }
.card__num {
  font-family: var(--font-display); font-weight: 800; font-size: var(--t-sm);
  color: var(--accent-ink); letter-spacing: .04em;
}
.band--deep .card, .band--green .card { background: var(--surface-raised); border-color: var(--hairline); }

/* Person card — a green tile with initials. Never a stock portrait. */
.person__tile {
  inline-size: 64px; block-size: 64px; border-radius: var(--radius);
  background: var(--c-palm); color: var(--c-plaster);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: .02em;
}
.person__role { font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); color: var(--accent-ink); }

/* [to confirm] — visible, red, impossible to ship by accident. */
.tbc {
  color: var(--danger); font-weight: 600;
  font-variant-numeric: normal; white-space: nowrap;
}
.tbc-line { font-size: var(--t-sm); font-weight: 600; color: var(--danger); margin-block-start: var(--s-2); }

/* --------------------------------------------------------------------------
   15 · Numbered list 01–05, and the process steps
   -------------------------------------------------------------------------- */
.numlist { list-style: none; margin: 0; padding: 0; max-width: none; }
.numlist > li { margin: 0; padding-block: var(--s-6); border-block-start: 1px solid var(--hairline); display: grid; gap: var(--s-3); }
.numlist > li:last-child { border-block-end: 1px solid var(--hairline); }
.numlist__num { font-family: var(--font-display); font-weight: 800; font-size: var(--t-sm); color: var(--accent-ink); }
.numlist h3 { max-width: none; }
.numlist p { font-size: var(--t-sm); color: var(--ink-muted); max-width: var(--m-body); }
@media (min-width: 768px) {
  .numlist > li { grid-template-columns: 5rem minmax(0, 1fr); column-gap: var(--gutter); align-items: start; }
  .numlist__num { font-size: var(--t-h4); grid-row: span 2; }
  .numlist h3 { grid-column: 2; }
  .numlist p { grid-column: 2; }
}

.steps { display: grid; gap: var(--s-8) var(--gutter); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; max-width: none; }
@media (min-width: 768px)  { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps > li { margin: 0; display: grid; gap: var(--s-3); align-content: start; padding-block-start: var(--s-5); border-block-start: 1px solid var(--accent-line); }
.steps__num { font-family: var(--font-display); font-weight: 800; font-size: var(--t-h3); color: var(--accent-ink); line-height: 1; }
.steps h3 { font-size: var(--t-h4); font-weight: 700; max-width: none; }
.steps p { font-size: var(--t-sm); max-width: none; }

/* --------------------------------------------------------------------------
   16 · Lists used as asides: trades, activities, exclusions
   -------------------------------------------------------------------------- */
.tradelist, .checklist { list-style: none; margin: 0; padding: 0; max-width: none; }
.tradelist > li, .checklist > li {
  margin: 0; padding-block: var(--s-3); border-block-end: 1px solid var(--hairline);
  font-family: var(--font-display); font-weight: 600;
}
.tradelist > li { font-size: var(--t-h4); }
.checklist > li { font-size: var(--t-body); }
.checklist--muted > li { color: var(--ink-muted); }
.aside-rule { border-block-start: 1px solid var(--accent-line); padding-block-start: var(--s-5); }
@media (min-width: 600px) {
  .cols-2 { columns: 2; column-gap: var(--gutter); }
  .cols-2 > li { break-inside: avoid; }
}
.deflist { display: grid; gap: var(--s-3); margin: 0; max-width: none; }
.deflist > div { display: grid; gap: var(--s-3); padding-block: var(--s-4); border-block-end: 1px solid var(--hairline); }
.deflist dt { font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); color: var(--ink-muted); margin: 0; }
.deflist dd { margin: 0; font-size: var(--t-body); font-variant-numeric: tabular-nums lining-nums; }
.aside-rule .deflist > div { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 768px) {
  .deflist > div { grid-template-columns: minmax(0, 15em) minmax(0, 1fr); column-gap: var(--gutter); align-items: baseline; }
}

/* Plain statement list — A-07, no cards */
.statements { display: grid; gap: var(--s-6) var(--gutter); grid-template-columns: 1fr; }
@media (min-width: 768px) { .statements { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.statements > div { border-block-start: 1px solid var(--hairline); padding-block-start: var(--s-5); }
.statements h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h4); margin-block-end: var(--s-3); max-width: none; }
.statements p { font-size: var(--t-body); max-width: none; }

/* --------------------------------------------------------------------------
   17 · Accordion — native details/summary, no height animation
   -------------------------------------------------------------------------- */
.faq { border-block-start: 1px solid var(--hairline); }
.faq details { border-block-end: 1px solid var(--hairline); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  min-block-size: 56px; padding-block: var(--s-4); cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-h4);
  line-height: 1.3; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__marker { flex: 0 0 auto; display: inline-flex; color: var(--accent-ink); font-size: var(--t-h3); }
.faq__marker .icon:last-child { display: none; }
.faq details[open] > summary .faq__marker .icon:first-child { display: none; }
.faq details[open] > summary .faq__marker .icon:last-child { display: inline-block; }
.faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.faq__a { padding-block: 0 var(--s-5); }
.faq__a p { max-width: var(--m-answer); }

/* --------------------------------------------------------------------------
   18 · Form
   -------------------------------------------------------------------------- */
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.form > * { min-inline-size: 0; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.field > * { min-inline-size: 0; max-inline-size: 100%; }
.field label { font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); }
.req { color: var(--danger); }
.field__help { font-size: var(--t-sm); color: var(--ink-muted); max-width: var(--m-body); margin: 0; }
.field input, .field select, .field textarea {
  font-family: var(--font-text); font-size: 16px; line-height: 1.5; color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: var(--s-4); min-block-size: 56px;
  inline-size: 100%; max-inline-size: 100%; min-inline-size: 0;
}
.field textarea { min-block-size: 120px; resize: vertical; }
.field input[type="file"] { padding-block: var(--s-3); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
.field__error { font-size: var(--t-sm); color: var(--danger); font-weight: 600; margin: 0; }
.field[hidden], [hidden] { display: none !important; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: var(--danger); border-width: 2px;
}
.consent { font-size: var(--t-sm); color: var(--ink-muted); max-width: var(--m-body); }
.form-success {
  border: 1px solid var(--accent-ink); border-radius: var(--radius);
  padding: var(--s-6); background: var(--surface-raised);
}
.form-success h2 { font-size: var(--t-h3); margin-block-end: var(--s-4); }
@media (max-width: 599px) { .form .btn { inline-size: 100%; } }

/* --------------------------------------------------------------------------
   19 · Authorities strip, tables, footer
   -------------------------------------------------------------------------- */
.authorities { display: grid; gap: 0; margin: 0; max-width: none; }
.authorities > div {
  display: grid; gap: var(--s-1); padding-block: var(--s-4);
  border-block-end: 1px solid var(--hairline);
}
.authorities dt { font-family: var(--font-display); font-weight: 600; font-size: var(--t-body); margin: 0; }
.authorities dd { margin: 0; font-size: var(--t-sm); color: var(--ink-muted); }
@media (min-width: 768px) {
  .authorities > div { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); column-gap: var(--gutter); align-items: baseline; }
}

.table-wrap { overflow-x: auto; max-inline-size: 100%; }
table { inline-size: 100%; border-collapse: collapse; font-size: var(--t-sm); }
pre { max-inline-size: 100%; overflow-x: auto; margin: 0; }
pre code { white-space: pre; }
th { font-family: var(--font-display); font-weight: 700; font-size: var(--t-xs);
     text-transform: uppercase; letter-spacing: .08em; text-align: start; }
th, td { padding-block: var(--s-3); border-block-end: 1px solid var(--hairline); text-align: start; vertical-align: top; }

.site-footer { padding-block: var(--s-9) var(--s-8); }
.footer-grid { display: grid; gap: var(--s-8) var(--gutter); grid-template-columns: 1fr; }
@media (min-width: 768px)  { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer-col { border-block-start: 1px solid var(--c-brass); padding-block-start: var(--s-5); }
.footer-col h2 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-eyebrow);
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-brass);
  margin: 0 0 var(--s-4); max-width: none; line-height: 1.2;
}
.site-footer, .site-footer p, .site-footer li { font-size: var(--t-sm); }
.site-footer .legal-name { font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm); letter-spacing: .01em; }
.footer-reg { font-size: var(--t-xs); font-variant-numeric: tabular-nums lining-nums; }
.footer-list { list-style: none; margin: 0; padding: 0; max-width: none; }
.footer-list a, .site-footer a:not(.tbc) { color: var(--ink); text-decoration: none; }
.footer-list a { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; }
.site-footer a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.footer-verify {
  margin-block-start: var(--s-8); padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--hairline); font-size: var(--t-sm); max-width: none;
}
.footer-lockup { inline-size: 180px; block-size: auto; display: block; margin-block-end: var(--s-4); }

/* --------------------------------------------------------------------------
   20 · Prose column and utilities
   -------------------------------------------------------------------------- */
.prose > * + * { margin-block-start: var(--s-4); }
.prose p { max-width: var(--m-body); }
.prose .lead-para { font-size: var(--t-lead); line-height: 1.45; }
.stack-5 > * + * { margin-block-start: var(--s-5); }
.stack-6 > * + * { margin-block-start: var(--s-6); }
.mt-6 { margin-block-start: var(--s-6); }
.mt-7 { margin-block-start: var(--s-7); }
.mt-8 { margin-block-start: var(--s-8); }
.muted { color: var(--ink-muted); }
.sm { font-size: var(--t-sm); }
.xs { font-size: var(--t-xs); }
.nowrap { white-space: nowrap; }
.sprite { position: absolute; inline-size: 0; block-size: 0; }
.icon {
  inline-size: 1.05em; block-size: 1.05em; flex: 0 0 auto;
  vertical-align: -0.125em; margin-inline-end: var(--s-2);
  stroke-linecap: square; stroke-linejoin: miter;
}
.icon:only-child, .faq__marker .icon { margin-inline-end: 0; }
.menu-btn .icon { inline-size: 1.15em; block-size: 1.15em; margin-inline-end: var(--s-1); }
.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.ar { font-family: var(--font-arabic); }

/* --------------------------------------------------------------------------
   20b · Image components. BUILT AND UNUSED ON PURPOSE.
   There are no photographs yet and stock photography is prohibited (ch. 13),
   so every image slot on the site carries a typographic replacement instead.
   These rules exist so that when the client's own site photographs arrive they
   drop straight in: own work only, no filter, no green overlay, no text inside
   the image, a stated aspect ratio per slot, explicit width and height so
   nothing shifts, AVIF with a WebP fallback, srcset at 480 / 960 / 1440,
   loading="lazy" on everything except the first.
   -------------------------------------------------------------------------- */
.media { margin: 0; display: grid; gap: var(--s-3); }
.media img {
  inline-size: 100%; block-size: auto; display: block;
  border-radius: var(--radius); background: var(--hairline);
  object-fit: cover;
}
.media--3x2 img { aspect-ratio: 3 / 2; }
.media--1x1 img { aspect-ratio: 1 / 1; }
.media--16x9 img { aspect-ratio: 16 / 9; }
.media figcaption { font-size: var(--t-sm); color: var(--ink-muted); max-width: var(--m-body); }
/* A render is captioned as a render, with the designer named. Never a
   photograph, and never another company's work. */
.media__render { font-weight: 600; }

/* --------------------------------------------------------------------------
   21 · Motion. The reveal starts VISIBLE. Nothing is hidden until the
   script has proved it is running.
   -------------------------------------------------------------------------- */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(16px); }
.js-reveal [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   22 · Arabic / RTL groundwork. The English build ships with this in place so
   the Arabic version is a translation and not a rebuild.
   -------------------------------------------------------------------------- */
[lang="ar"], [dir="rtl"] { letter-spacing: 0 !important; }
[dir="rtl"] body { line-height: 1.85; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { line-height: 1.35; letter-spacing: 0; }
[dir="rtl"] .eyebrow { text-transform: none; letter-spacing: 0; font-family: var(--font-arabic); }
[dir="rtl"] .counter__value, [dir="rtl"] .fact dd, [dir="rtl"] .phone,
[dir="rtl"] .footer-reg, [dir="rtl"] .vbar__value { direction: ltr; unicode-bidi: isolate; }
input[type="tel"], input[type="email"], input[type="url"] { direction: ltr; }