@charset "UTF-8";
/* ==========================================================================
   DIWAN AL-HAKMA — DESIGN SYSTEM v1.0
   One stylesheet serves Arabic RTL and English LTR via CSS logical properties.
   Never use left/right — use inline-start/inline-end.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Colour: navy spine. #254064 is the existing brand navy, preserved. --- */
  --ink:        #0C1626;
  --navy-900:   #101E33;
  --navy-800:   #16273F;
  --navy-700:   #1C3350;
  --navy-600:   #254064;   /* BRAND PRIMARY — do not alter */
  --navy-500:   #33547E;
  --navy-400:   #4A6C98;

  /* --- Steel: existing brand secondary, preserved --- */
  --steel-500:  #7A97A8;
  --steel-400:  #95AEBC;   /* BRAND SECONDARY */
  --steel-200:  #CBD9E1;
  --steel-100:  #E4ECF1;

  /* --- Brass: new accent. Authority + cultural warmth, used sparingly. --- */
  --brass-700:  #6F5427;
  --brass-600:  #8A6A38;
  --brass-500:  #A98252;
  --brass-400:  #C2A176;
  --brass-300:  #D8C6A2;

  /* --- Neutrals --- */
  --paper:      #FFFFFF;
  --sand-50:    #FAF8F4;
  --sand-100:   #F4F0E8;
  --line:       #E2E6EB;
  --line-soft:  #EDF0F3;

  /* --- Text. Body is #33465C = 8.9:1 on white. Fixes audit L2 (was 4.54:1). --- */
  --text:       #33465C;
  --text-strong:#16273F;
  --text-mute:  #5E7189;   /* 5.2:1 on white — AA at all sizes */
  --text-onnavy:#FFFFFF;
  --text-onnavy-mute: #C3D0DF; /* 8.1:1 on --navy-800 */

  --state-ok:   #1E7A5A;
  --state-err:  #B3261E;

  /* --- Type. Almarai only, per audit: correct for a bilingual Arabic-first site. --- */
  --ff: "Almarai", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Modular scale, 1.25 major third, fluid. Base 17px — no text below 15px. */
  --fs-eyebrow: 0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md:   clamp(1.125rem, 0.4vw + 1.03rem, 1.1875rem);
  --fs-lg:   clamp(1.3125rem, 0.7vw + 1.15rem, 1.5rem);
  --fs-xl:   clamp(1.5rem,  1.3vw + 1.2rem,  1.9375rem);
  --fs-2xl:  clamp(1.8125rem, 2.1vw + 1.3rem, 2.4375rem);
  --fs-3xl:  clamp(2.125rem, 3.2vw + 1.4rem, 3.0625rem);
  --fs-4xl:  clamp(2.4375rem, 4.6vw + 1.4rem, 3.8125rem);

  --lh-tight: 1.18;
  --lh-head:  1.28;
  --lh-body:  1.75;   /* Arabic needs generous leading */
  --lh-loose: 1.85;

  /* Eyebrows read as a section label, so they get their own scale rather than
     borrowing the small-label token. Latin is tracked; Arabic gains size. */
  --fs-eyebrow-lat: clamp(0.9375rem, 0.22vw + 0.89rem, 1.0625rem);
  --fs-eyebrow-ar:  clamp(1.0625rem, 0.28vw + 1rem, 1.1875rem);

  /* --- Spacing, 4px base --- */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;   --s-11: 10rem;

  /* Section rhythm — replaces the audit's ~600px of dead space with intent */
  --section-y: clamp(3.5rem, 7vw, 7.5rem);
  --section-y-lg: clamp(4.5rem, 9vw, 10rem);

  /* --- Structure --- */
  --wrap: 78rem;
  --wrap-narrow: 46rem;
  --wrap-wide: 88rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Radii: restrained. No pill-shaped cards. */
  --r-xs: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 6px;

  /* Elevation: tinted with navy, never neutral grey */
  --sh-1: 0 1px 2px rgba(16,30,51,.06), 0 1px 3px rgba(16,30,51,.04);
  --sh-2: 0 2px 4px rgba(16,30,51,.05), 0 8px 20px -6px rgba(16,30,51,.10);
  --sh-3: 0 4px 8px rgba(16,30,51,.06), 0 18px 40px -10px rgba(16,30,51,.16);
  --sh-4: 0 30px 70px -20px rgba(16,30,51,.32);

  /* --- Motion --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: 140ms; --t-med: 260ms; --t-slow: 520ms; --t-reveal: 760ms;

  --z-sticky: 60; --z-header: 80; --z-drawer: 90; --z-modal: 100;
  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html:focus-within { scroll-behavior: smooth; }
body {
  font-family: var(--ff);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;          /* audit 3.5: kills the 400px/387px overflow */
  min-height: 100vh;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
/* Only fill SVGs that do NOT declare their own fill. Stroked icons carry
   fill="none" and CSS would otherwise override that attribute and fill them in. */
svg:not([fill]) { fill: currentColor; }
.ic { fill: none; stroke: currentColor; }
/* Official brand glyphs are filled outlines, not stroked paths. */
.ic--fill { fill: currentColor; stroke: none; }
/* Direction-carrying icons mirror under RTL so an arrow points the way the text
   reads. --dir lets hover nudges compose with the mirror instead of fighting it. */
.ic--dir { --dir: 1; transform: scaleX(var(--dir)); }
:where(html[dir="rtl"]) .ic--dir { --dir: -1; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4,h5,h6 { font-weight: 800; line-height: var(--lh-head); color: var(--text-strong); text-wrap: balance; }
p { text-wrap: pretty; }
table { border-collapse: collapse; width: 100%; }
:target { scroll-margin-block-start: calc(var(--header-h) + 2rem); }

/* --------------------------------------------------------------------------
   3. ACCESSIBILITY PRIMITIVES
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible {
  outline: 3px solid var(--brass-500);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.u-navy :focus-visible { outline-color: var(--brass-400); }

.skip-link {
  position: absolute; inset-block-start: -100%; inset-inline-start: var(--s-4);
  z-index: var(--z-modal);
  background: var(--navy-800); color: #fff;
  padding: var(--s-3) var(--s-5); border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 700; font-size: var(--fs-sm);
  transition: inset-block-start var(--t-fast) var(--ease);
}
.skip-link:focus { inset-block-start: 0; }


/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }
/* Top padding only: the stats band sits directly above the next section, and two
   stacked paddings left a dead ~190px gap. The pair collapses into one space. */
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem) 0; }
.section--tight + .section,
.section--tight + .section--sand,
.section--tight + .u-navy { padding-block-start: clamp(2rem, 4vw, 3.25rem); }
/* About: the intro above already closes with its own space, so the stats band
   drops the top padding and carries the gap underneath instead. */
.section--tight.section--tight-below { padding-block: 0 80px; }
.section--sand { background: var(--sand-50); }

.u-navy { background: var(--navy-800); color: var(--text-onnavy); }
.u-navy h1,.u-navy h2,.u-navy h3,.u-navy h4 { color: #fff; }
.u-navy p, .u-navy li { color: var(--text-onnavy-mute); }

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem,100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(17rem,100%), 1fr)); }
.grid--split { grid-template-columns: 1fr; gap: var(--s-7); }
@media (min-width: 62rem) {
  .grid--split { grid-template-columns: 1.05fr .95fr; gap: var(--s-9); align-items: center; }
  .grid--aside { grid-template-columns: minmax(0,1fr) 20rem; gap: var(--s-8); align-items: start; }
}
.grid--aside { display: grid; gap: var(--s-7); }
.stack > * + * { margin-block-start: var(--s-4); }
.stack-lg > * + * { margin-block-start: var(--s-6); }

/* --------------------------------------------------------------------------
   5. TYPOGRAPHY COMPONENTS
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-4);
  font-size: var(--fs-eyebrow-lat); font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--brass-600);
}
:where(html[dir="rtl"]) .eyebrow {
  letter-spacing: 0; text-transform: none;
  font-size: var(--fs-eyebrow-ar);
}
.eyebrow::before {
  content: ""; inline-size: 2.5rem; block-size: 2px; background: var(--brass-500);
  flex: none; border-radius: 1px;
}
/* Centred variants get a rule on both sides, which reads more deliberate. */
.t-center .eyebrow::after {
  content: ""; inline-size: 2.5rem; block-size: 2px; background: var(--brass-500);
  flex: none; border-radius: 1px;
}
.u-navy .eyebrow { color: var(--brass-300); }
.u-navy .eyebrow::before { background: var(--brass-400); }

.h-1 { font-size: var(--fs-3xl); letter-spacing: -0.012em; }
.h-2 { font-size: var(--fs-2xl); letter-spacing: -0.01em; }
.h-3 { font-size: var(--fs-xl); }
.h-4 { font-size: var(--fs-lg); }
:where(html[dir="rtl"]) .h-1,
:where(html[dir="rtl"]) .h-2 { letter-spacing: 0; } /* Arabic must not be tracked negative */

.lead { font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--text); max-width: 62ch; }
.u-navy .lead { color: var(--text-onnavy-mute); }
.prose { max-width: 68ch; }
.prose > * + * { margin-block-start: var(--s-4); }
.prose h2 { font-size: var(--fs-xl); margin-block-start: var(--s-7); }
.prose h3 { font-size: var(--fs-lg); margin-block-start: var(--s-6); }
.prose ul { display: grid; gap: var(--s-3); }
.prose ul > li { position: relative; padding-inline-start: 1.6rem; }
.prose ul > li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .72em;
  inline-size: .5rem; block-size: .5rem; border: 1.5px solid var(--brass-500); border-radius: 50%;
}
.prose a:not(.btn) { color: var(--navy-600); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.prose a:not(.btn):hover { color: var(--brass-600); }
.t-center { text-align: center; }
.t-center .lead, .t-center .prose { margin-inline: auto; }
.t-mute { color: var(--text-mute); }


/* --- Intro: the photograph was removed, so the section is built as an
   editorial two-column instead — heading held against flowing text. --- */
.intro { display: grid; gap: var(--s-6); }
@media (min-width: 62rem) {
  .intro { grid-template-columns: .92fr 1.08fr; gap: clamp(2.5rem, 5vw, 6rem); align-items: start; }
}
.intro__head { display: grid; gap: var(--s-5); align-content: start; }
.intro__head h2 { max-width: 22ch; }
.intro__cta { justify-self: start; margin-block-start: var(--s-2); }
.intro__body { display: grid; gap: var(--s-6); }
.intro__lead {
  padding-inline-start: var(--s-5);
  border-inline-start: 2px solid var(--brass-500);
  max-width: none;
}
.intro__cols { display: grid; gap: var(--s-5); }
.intro__cols p { color: var(--text-mute); line-height: var(--lh-loose); }
@media (min-width: 48rem) {
  .intro__cols { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--navy-600); --btn-fg: #fff; --btn-bd: var(--navy-600);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-3);
  min-height: 52px; padding-inline: var(--s-6); padding-block: var(--s-3);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd); border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: .01em;
  text-align: center; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease),
              color var(--t-med) var(--ease), transform var(--t-fast) var(--ease),
              box-shadow var(--t-med) var(--ease);
}
.btn::after {           /* brass wipe on hover — the signature micro-interaction */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--brass-500);
  transform: scaleX(0); transform-origin: inline-start center;
  transition: transform var(--t-med) var(--ease-out);
}
.btn:hover { border-color: var(--brass-500); box-shadow: var(--sh-2); }
.btn:hover::after { transform: scaleX(1); }
.btn:active { transform: translateY(1px); }
.btn .ic { flex: none; inline-size: 1.125rem; block-size: 1.125rem; }
.btn--lg { min-height: 58px; padding-inline: var(--s-7); font-size: var(--fs-base); }
.btn--sm { min-height: 44px; padding-inline: var(--s-5); font-size: var(--fs-eyebrow); }
.btn--block { width: 100%; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--navy-600); --btn-bd: var(--steel-200); }
.btn--ghost:hover { --btn-fg: #fff; }
.btn--onnavy { --btn-bg: #fff; --btn-fg: var(--navy-800); --btn-bd: #fff; }
.btn--onnavy:hover { --btn-fg: #fff; }
.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.45); }
.btn--outline-light:hover { --btn-bd: var(--brass-500); }
.btn--wa { --btn-bg: #0F7A6E; --btn-fg: #fff; --btn-bd: #0F7A6E; } /* 5.21:1 with white */
.btn--wa::after { background: #075E54; }
.btn--wa:hover { --btn-bd: #075E54; }

/* Text link with animated underline */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 700; font-size: var(--fs-sm); color: var(--navy-600);
  padding-block: var(--s-2);
  transition: color var(--t-fast) var(--ease), gap var(--t-med) var(--ease);
}
.link-arrow .ic { inline-size: 1rem; block-size: 1rem; transition: transform var(--t-med) var(--ease); }
.link-arrow:hover { color: var(--brass-600); gap: var(--s-3); }
.link-arrow:hover .ic--dir { transform: scaleX(var(--dir)) translateX(3px); }
.u-navy .link-arrow { color: var(--brass-300); }

.btn-group { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-6);
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease),
              transform var(--t-med) var(--ease);
}
.card::before {   /* brass top rule reveals on hover */
  content: ""; position: absolute; inset-block-start: -1px; inset-inline: -1px auto;
  block-size: 2px; inline-size: 0; background: var(--brass-500);
  transition: inline-size var(--t-slow) var(--ease-out);
}
.card:hover, .card:focus-within { border-color: var(--steel-200); box-shadow: var(--sh-3); transform: translateY(-3px); }
.card:hover::before, .card:focus-within::before { inline-size: calc(100% + 2px); }
.card__ic {
  inline-size: 3rem; block-size: 3rem; display: grid; place-items: center;
  border: 1px solid var(--steel-200); border-radius: var(--r-sm);
  color: var(--navy-600); background: var(--sand-50);
  margin-block-end: var(--s-5);
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.card__ic svg { inline-size: 1.5rem; block-size: 1.5rem; }
.card:hover .card__ic { background: var(--navy-600); color: #fff; border-color: var(--navy-600); }
.card__title { font-size: var(--fs-lg); margin-block-end: var(--s-3); }
.card__title a { display: block; }
.card__title a::after { content: ""; position: absolute; inset: 0; }  /* whole card clickable */
.card__text { color: var(--text-mute); font-size: var(--fs-sm); line-height: var(--lh-body); flex: 1; }

.card--flat { border-color: var(--line-soft); background: var(--sand-50); }

/* --------------------------------------------------------------------------
   8. HEADER + NAVIGATION
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--ink); color: var(--text-onnavy-mute);
  font-size: var(--fs-eyebrow); border-block-end: 1px solid rgba(255,255,255,.08);
}
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 44px; flex-wrap: wrap; }
.topbar__list { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.topbar a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding-block: var(--s-2); transition: color var(--t-fast) var(--ease); }
.topbar a:hover { color: var(--brass-300); }
.topbar .ic { inline-size: .9375rem; block-size: .9375rem; color: var(--brass-400); flex: none; }
.topbar__claim { color: var(--steel-400); }
@media (max-width: 47.9375rem) { .topbar { display: none; } }

.header {
  position: sticky; inset-block-start: 0; z-index: var(--z-header);
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-block-end: 1px solid var(--line);
  transition: box-shadow var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.header.is-stuck { box-shadow: var(--sh-2); background: rgba(255,255,255,.97); }
.header__in { display: flex; align-items: center; gap: var(--s-5); min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: var(--s-3); flex: none; margin-inline-end: auto; }
/* Official horizontal lockup: monogram + wordmark, extracted from the master file. */
.brand__lockup { block-size: 2.5rem; inline-size: auto; flex: none; display: block; }
@media (min-width: 30rem) { .brand__lockup { block-size: 2.75rem; } }
.brand__name { font-size: var(--fs-md); font-weight: 800; color: var(--navy-700); line-height: 1.15; }

.nav { display: none; }
@media (min-width: 76rem) { .nav { display: block; } }
.nav__list { display: flex; align-items: center; gap: 0; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px;
  /* Fluid padding: six Arabic labels must fit on one line from 1216px up. */
  padding-inline: clamp(.5rem, .95vw, 1rem);
  font-size: clamp(.875rem, .35vw + .78rem, .9375rem);
  font-weight: 700; color: var(--navy-800);
  white-space: nowrap;                  /* labels never wrap — audit fix */
  transition: color var(--t-fast) var(--ease);
}
/* The underline lives on the LABEL, not the link box, so it can never cross
   the text regardless of the link's height or padding. */
.nav__label { position: relative; display: inline-block; }
.nav__label::after {
  content: ""; position: absolute; inset-block-end: -0.42em; inset-inline: 0;
  block-size: 2px; background: var(--brass-500);
  transform: scaleX(0); transform-origin: inline-start center;
  transition: transform var(--t-med) var(--ease-out);
}
.nav__link:hover, .nav__link[aria-current="page"], .nav__link[aria-expanded="true"] { color: var(--brass-600); }
.nav__link:hover .nav__label::after,
.nav__link[aria-current="page"] .nav__label::after { transform: scaleX(1); }
.nav__link .ic { inline-size: .75rem; block-size: .75rem; transition: transform var(--t-med) var(--ease); }
.nav__link[aria-expanded="true"] .ic { transform: rotate(180deg); }

/* Mega menu — elegant, keyboard-operable */
.nav__item { position: relative; }
.mega {
  position: absolute; inset-block-start: calc(100% + 10px);
  inset-inline-start: 0;                       /* aligned to the trigger's inline-start edge */
  margin-inline-start: var(--mega-shift, 0px); /* JS viewport clamp, logical */
  transform: translateY(-6px);
  inline-size: min(54rem, calc(100vw - 2.5rem));
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-4);
  padding: var(--s-6); opacity: 0; visibility: hidden;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease-out), visibility var(--t-med);
}
.nav__item:hover > .mega, .mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-2) var(--s-5); }
.mega__link {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3); border-radius: var(--r-sm); min-height: 44px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--navy-800);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mega__link:hover { background: var(--sand-50); color: var(--brass-600); }
.mega__link .ic { inline-size: 1.125rem; block-size: 1.125rem; color: var(--steel-500); flex: none; margin-block-start: .15em; transition: color var(--t-fast) var(--ease); }
.mega__link:hover .ic { color: var(--brass-500); }
.mega__foot {
  margin-block-start: var(--s-5); padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
}

.header__actions { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.lang-switch {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding-inline: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: var(--fs-eyebrow); font-weight: 800; color: var(--navy-700);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.lang-switch:hover { border-color: var(--brass-500); color: var(--brass-600); background: var(--sand-50); }
.header__cta { display: none; }
@media (min-width: 48rem) { .header__cta { display: inline-flex; } }

/* Icon-only trigger. The three bars become an X: on the header button while the
   drawer is open, and always on the drawer's own close button — which used to
   render as a hamburger, so the only visible control inside an open menu looked
   like it would open one. */
.burger {
  display: inline-grid; place-items: center;
  inline-size: 46px; block-size: 46px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); color: var(--navy-800); cursor: pointer;
  transition: border-color var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.burger:hover { border-color: var(--navy-600); background: var(--sand-50); }
@media (min-width: 76rem) { .burger { display: none; } }
/* the drawer can still be open above that breakpoint, so its close stays */
@media (min-width: 76rem) { .drawer__close.burger { display: inline-grid; } }
.burger__bars { display: block; inline-size: 20px; }
.burger__bars span { display: block; inline-size: 20px; block-size: 1.5px; background: currentColor; transition: transform var(--t-med) var(--ease), opacity var(--t-fast) var(--ease); }
.burger__bars span + span { margin-block-start: 5px; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(1),
.drawer__close .burger__bars span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars span:nth-child(2),
.drawer__close .burger__bars span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(3),
.drawer__close .burger__bars span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: var(--paper); display: flex; flex-direction: column;
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--t-slow) var(--ease-out), visibility var(--t-slow);
  overflow-y: auto; overscroll-behavior: contain;
}
:where(html[dir="rtl"]) .drawer { transform: translateX(-100%); }
.drawer.is-open { transform: translateX(0); visibility: visible; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--gutter); border-block-end: 1px solid var(--line); min-height: var(--header-h); }
.drawer__body { padding: var(--s-5) var(--gutter) var(--s-8); }
.drawer__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 56px; padding-block: var(--s-3);
  border-block-end: 1px solid var(--line-soft);
  font-size: var(--fs-md); font-weight: 800; color: var(--navy-800);
}
.drawer__link .ic { inline-size: 1rem; block-size: 1rem; color: var(--steel-500); }
.drawer details > summary { list-style: none; cursor: pointer; }
.drawer details > summary::-webkit-details-marker { display: none; }
.drawer details[open] summary .ic { transform: rotate(180deg); }
.drawer__sub { padding-block: var(--s-3); display: grid; gap: var(--s-1); }
.drawer__sub a { min-height: 48px; display: flex; align-items: center; padding-inline-start: var(--s-4); font-size: var(--fs-sm); font-weight: 700; color: var(--text); border-inline-start: 2px solid var(--line); }
.drawer__sub a:hover { color: var(--brass-600); border-color: var(--brass-500); }
.drawer__foot { margin-block-start: var(--s-6); display: grid; gap: var(--s-3); }
body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   9. HERO — static, specific, legible. Fixes audit 2.1 / 2.2 / H4.
   -------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; background: var(--ink); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 38%; }
.hero__scrim {                /* the fix: a real gradient scrim, not 80% opacity text */
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(12,22,38,.58) 0%, rgba(12,22,38,.72) 45%, rgba(12,22,38,.93) 100%),
    linear-gradient(to var(--scrim-dir, right), rgba(12,22,38,.68) 0%, rgba(12,22,38,.12) 72%);
}
html[dir="rtl"] .hero__scrim { --scrim-dir: left; }
.hero__in { position: relative; padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 5rem); }
.hero__grid { display: grid; gap: var(--s-7); }

/* --- Fit-to-viewport. Everything below scales with viewport HEIGHT as well as
   width, so the whole hero — headline, CTAs, meta row and trust panel — is
   visible on load at 1280x720, 1366x768, 1440x900 and 1920x1080 alike. --- */
.hero h1 {
  color: #fff;
  font-size: clamp(2.125rem, 3.8vw + 1.15rem, 3.125rem);
  font-weight: 800;                          /* was 100 Thin — the core legibility bug */
  line-height: 1.16;
  max-width: 24ch;                           /* short headline: keep the line count low */
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.hero__accent { color: var(--brass-400); display: block; }
.hero__col > h1 { margin-block-start: var(--s-5); }
.hero__lead {
  color: #E7EDF4; font-size: var(--fs-md); line-height: var(--lh-loose);
  max-width: 46ch; margin-block-start: var(--s-5);
  text-shadow: 0 1px 12px rgba(0,0,0,.3);
}
/* A single brass hairline closes the hero — a deliberate edge, not a fade. */
.hero::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1;
  block-size: 2px; pointer-events: none;
  background: linear-gradient(to var(--rule-dir, right),
    var(--brass-500) 0%, rgba(169,130,82,.35) 42%, transparent 78%);
}
html[dir="rtl"] .hero::after { --rule-dir: left; }
.hero .btn-group { margin-block-start: var(--s-7); }
.hero__meta {
  margin-block-start: var(--s-8); padding-block-start: var(--s-6);
  border-block-start: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: var(--s-4) 0;
}
.hero__meta-item {
  display: flex; align-items: center; gap: var(--s-3);
  color: #DCE5EF; font-size: var(--fs-sm); font-weight: 700;
  padding-inline: clamp(1.25rem, 2.4vw, 2.5rem);
}
.hero__meta-item:first-child { padding-inline-start: 0; }
@media (min-width: 48rem) {
  .hero__meta-item + .hero__meta-item { border-inline-start: 1px solid rgba(255,255,255,.18); }
}
@media (max-width: 47.9375rem) {
  .hero__meta-item { padding-inline: 0; flex-basis: 100%; }
}
.hero__meta-item .ic { inline-size: 1.125rem; block-size: 1.125rem; color: var(--brass-400); flex: none; }

/* Trust panel sitting inside the hero — puts the 5.0/17 rating above the fold */
.rating__stars { display: inline-flex; gap: 2px; color: var(--brass-400); }
.rating__stars svg { inline-size: 1.0625rem; block-size: 1.0625rem; }

/* --- Hero trust column. A hairline rule instead of a glass card: the panel
   was the least elegant element in the hero and the only rounded box in it. --- */
.hero__panel { padding-block-start: var(--s-6); border-block-start: 1px solid rgba(255,255,255,.2); }
@media (min-width: 64rem) {
  .hero__panel {
    padding-block-start: 0; border-block-start: 0;
    border-inline-start: 1px solid rgba(255,255,255,.2);
    padding-inline-start: clamp(1.75rem, 2.8vw, 3rem);
  }
}
.hero__panel-h {
  font-size: var(--fs-eyebrow-lat); font-weight: 800; color: var(--brass-300);
  letter-spacing: .13em; text-transform: uppercase; line-height: 1.4;
}
:where(html[dir="rtl"]) .hero__panel-h { letter-spacing: 0; text-transform: none; font-size: var(--fs-eyebrow-ar); }

.hero__rating { display: flex; align-items: center; gap: var(--s-4); margin-block-start: var(--s-5); }
.hero__rating-num {
  font-size: clamp(2.75rem, 5.6vh, 3.5rem); font-weight: 800; color: #fff;
  line-height: .85; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.hero__rating-meta { display: grid; gap: 4px; font-size: var(--fs-eyebrow); color: var(--steel-200); }

.hero__panel-list {
  margin-block-start: var(--s-6); padding-block-start: var(--s-5);
  border-block-start: 1px solid rgba(255,255,255,.14);
  display: grid; gap: var(--s-4);
}
.hero__panel-list li { display: flex; gap: var(--s-3); font-size: var(--fs-sm); color: #DCE5EF; line-height: 1.6; }
.hero__panel-list .ic { inline-size: 1.0625rem; block-size: 1.0625rem; color: var(--brass-400); flex: none; margin-block-start: .2em; }

/* Fit-to-viewport overrides MUST come after the base hero rules above,
   otherwise equal-specificity base declarations win on source order. */
@media (min-width: 64rem) {
  .hero {
    --chrome-h: 120px;                       /* top bar 44 + sticky header 76 */
    min-block-size: calc(100svh - var(--chrome-h));
    display: grid; align-items: center;
  }
  .hero__in { padding-block: clamp(1.75rem, 5vh, 4.5rem); inline-size: 100%; }
  .hero__grid { grid-template-columns: 1.22fr .78fr; gap: clamp(1.75rem, 3.4vw, 4.5rem); align-items: center; }
  /* Wider measure = fewer lines. Type scales off viewport HEIGHT, which is the
     dimension that actually runs out on a laptop. */
  .hero h1        { max-width: 26ch;
                    font-size: clamp(1.875rem, min(2.6vw + .7rem, 6.1vh), 3.5rem);
                    line-height: 1.12; }
  /* Arabic is more compact per character, so it can take a tighter measure. */
  html[dir="rtl"] .hero h1 { max-width: 21ch; }
  .hero__lead     { max-width: 52ch;
                    font-size: clamp(.9375rem, min(.42vw + .78rem, 1.95vh), 1.125rem);
                    margin-block-start: clamp(.625rem, 1.5vh, 1.25rem); }
  .hero .btn-group{ margin-block-start: clamp(1rem, 2.6vh, 2.5rem); gap: var(--s-3); }
  .hero .btn      { min-height: clamp(46px, 5.6vh, 56px); }
  .hero__meta     { margin-block-start: clamp(1rem, 2.6vh, 2.5rem);
                    padding-block-start: clamp(.75rem, 2vh, 1.75rem);
                    gap: clamp(.5rem, 1.3vh, 1.25rem) clamp(1.25rem, 2.2vw, 2.75rem); }
  .hero__meta-item{ font-size: clamp(.8125rem, 1.7vh, .9375rem); }
  .hero__panel    { padding: clamp(1rem, 2.4vh, 1.75rem); }
  .hero__panel h2 { font-size: clamp(.9375rem, 1.9vh, 1.0625rem); margin-block-end: clamp(.625rem, 1.6vh, 1rem); }
  .hero__panel-list { margin-block-start: clamp(.75rem, 2vh, 1.25rem);
                      gap: clamp(.4375rem, 1.2vh, .75rem); }
  .hero__panel-list li { font-size: clamp(.8125rem, 1.65vh, .9375rem); line-height: 1.5; }
}
/* Short laptops (720p / 768p): trim the supporting copy rather than clip the CTA.
   Three lines still reads as a complete sentence; two truncated mid-clause. */
@media (min-width: 64rem) and (max-height: 52rem) {
  .hero__lead { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hero__panel-list li:nth-child(3) { display: none; }
}
@media (min-width: 64rem) and (max-height: 43rem) {
  .hero__lead { -webkit-line-clamp: 2; }
}
/* Very short viewports (a laptop with several browser toolbars open).
   The meta row is reinforcement, not a control — it yields before the CTAs do. */
@media (min-width: 64rem) and (max-height: 46rem) {
  .hero__meta { display: none; }
}
@media (min-width: 64rem) and (max-height: 40rem) {
  .hero { --chrome-h: 104px; }
  .hero__panel-list li:nth-child(2) { display: none; }
}

/* Page hero for interior pages */
.phero { position: relative; background: var(--navy-800); color: #fff; isolation: isolate; overflow: hidden; }
.phero::after {   /* subtle geometric watermark — intentional, not the ghost artefact */
  content: ""; position: absolute; inset-block: -20%; inset-inline-end: -8%; z-index: -1;
  inline-size: 34rem; aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, rgba(169,130,82,.18), transparent 62%);
  pointer-events: none;
}
.phero__in { padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 6vw, 5rem); position: relative; }
.phero h1 { color: #fff; font-size: var(--fs-3xl); max-width: 26ch; margin-block-start: var(--s-4); }
.phero .lead { color: var(--text-onnavy-mute); margin-block-start: var(--s-5); }

/* Breadcrumbs */
.crumbs { font-size: var(--fs-eyebrow); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.crumbs li { display: flex; align-items: center; gap: var(--s-2); color: var(--steel-400); }
.crumbs li + li::before { content: "/"; color: rgba(255,255,255,.3); }
.crumbs a { color: var(--steel-200); min-height: 32px; display: inline-flex; align-items: center; padding-block: var(--s-1); }
.crumbs a:hover { color: var(--brass-300); text-decoration: underline; text-underline-offset: .2em; }
.crumbs [aria-current] { color: #fff; font-weight: 700; }

/* --------------------------------------------------------------------------
   10. STATS  (animated count-up)
   -------------------------------------------------------------------------- */
.stats { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 40rem) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: var(--paper);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1rem, 2vw, 1.75rem);
  /* Centred horizontally AND vertically within the cell. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-3); text-align: center;
  min-block-size: clamp(9.5rem, 15vw, 12rem);
}
.stat__num {
  font-size: clamp(2.5rem, 4.4vw + 0.6rem, 3.75rem);
  font-weight: 800; color: var(--navy-700);
  line-height: 1; letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; justify-content: center; gap: 0.05em;
}
:where(html[dir="rtl"]) .stat__num { letter-spacing: 0; }
.stat__num .suffix { color: var(--brass-500); font-size: 0.72em; }
.stat__label {
  font-size: clamp(1rem, 0.3vw + 0.94rem, 1.125rem);
  line-height: 1.45; color: var(--text); font-weight: 700;
  max-inline-size: 20ch; text-wrap: balance;
}
.u-navy .stats { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.14); }
.u-navy .stat { background: transparent; }
.u-navy .stat__num { color: #fff; }
.u-navy .stat__label { color: var(--steel-400); }

/* --------------------------------------------------------------------------
   11. PRACTICE AREAS  (replaces the numbered-circle rail — audit 2.5)
   -------------------------------------------------------------------------- */
.pa-grid { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .pa-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 64rem) { .pa-grid { grid-template-columns: repeat(3,1fr); gap: var(--s-5); } }
.pa {
  position: relative; display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-6); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.pa::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: -1px;
  inline-size: 2px; background: var(--brass-500);
  transform: scaleY(0); transform-origin: center top;
  transition: transform var(--t-slow) var(--ease-out);
}
.pa:hover, .pa:focus-within { border-color: var(--steel-200); box-shadow: var(--sh-3); transform: translateY(-3px); }
.pa:hover::before, .pa:focus-within::before { transform: scaleY(1); }
.pa__ic { inline-size: 2.5rem; block-size: 2.5rem; color: var(--navy-500); transition: color var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.pa__ic svg { inline-size: 100%; block-size: 100%; stroke: currentColor; fill: none; stroke-width: 1.4; }
.pa:hover .pa__ic { color: var(--brass-500); transform: translateY(-2px); }
.pa__title { font-size: var(--fs-md); }
.pa__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); }
.pa__text { font-size: var(--fs-sm); color: var(--text-mute); line-height: 1.7; flex: 1; }
.pa__more { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-eyebrow); font-weight: 800; color: var(--navy-600); letter-spacing: .04em; }
.pa__more .ic { inline-size: .875rem; block-size: .875rem; transition: transform var(--t-med) var(--ease); }
.pa:hover .pa__more { color: var(--brass-600); }
.pa:hover .pa__more .ic--dir { transform: scaleX(var(--dir)) translateX(3px); }

/* --------------------------------------------------------------------------
   12. DIFFERENTIATORS  (quantified, no stock handshake)
   -------------------------------------------------------------------------- */
.diff { display: grid; gap: var(--s-6); }
@media (min-width: 48rem) { .diff { grid-template-columns: repeat(2,1fr); gap: var(--s-7) var(--s-8); } }
.diff__item { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: start; }
.diff__idx {
  inline-size: 3.25rem; block-size: 3.25rem; flex: none;
  display: grid; place-items: center; border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05);
  color: var(--brass-300); font-weight: 800; font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
}
.diff__item h3 { font-size: var(--fs-lg); margin-block-end: var(--s-2); }
.diff__item p { font-size: var(--fs-sm); line-height: 1.75; }

/* --------------------------------------------------------------------------
   13. TEAM
   -------------------------------------------------------------------------- */
.team-grid { display: grid; gap: var(--s-5); }
@media (min-width: 40rem) { .team-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 64rem) { .team-grid { grid-template-columns: repeat(3,1fr); } }
.person { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column;
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.person:hover { border-color: var(--steel-200); box-shadow: var(--sh-3); }
.person__fig { position: relative; aspect-ratio: 4/5; background: var(--navy-700); overflow: hidden; }
/* The photographs are cut-outs, so this gradient IS the backdrop. It runs
   cream-to-cream — starting it at white left the top half of every card
   reading as plain white behind the subject. */
.person__fig--photo { background: linear-gradient(180deg, var(--sand-50) 0%, var(--sand-100) 45%, #E9E2D5 100%); }
.person__fig--photo img { object-fit: cover; object-position: center top; }
.person__fig img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.person:hover .person__fig img { transform: scale(1.035); }
.person__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.person__name { font-size: var(--fs-md); }
.person__role { font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brass-600); }
:where(html[dir="rtl"]) .person__role { letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }
.person__creds { display: grid; gap: var(--s-2); margin-block-start: var(--s-1); }
.person__creds li { display: flex; gap: var(--s-3); font-size: var(--fs-sm); color: var(--text-mute); line-height: 1.6; }
.person__creds .ic { inline-size: 1rem; block-size: 1rem; color: var(--steel-500); flex: none; margin-block-start: .22em; }
.person__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: auto; padding-block-start: var(--s-4); }

.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); min-height: 30px;
  border: 1px solid var(--steel-200); border-radius: 100px;
  font-size: var(--fs-eyebrow); font-weight: 700; color: var(--navy-600); background: var(--sand-50);
}
.chip--brass { border-color: var(--brass-300); color: var(--brass-700); background: #FCF9F3; }

/* --------------------------------------------------------------------------
   14. PACKAGES  (equal heights, correct SAR formatting — audit M2)
   -------------------------------------------------------------------------- */
.pkg-grid { display: grid; gap: var(--s-5); align-items: stretch; }
@media (min-width: 48rem) { .pkg-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 62rem) { .pkg-grid { grid-template-columns: repeat(3,1fr); gap: var(--s-4); } }
@media (min-width: 94rem) { .pkg-grid { grid-template-columns: repeat(5,1fr); gap: var(--s-3); } }
.pkg {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-6) var(--s-5);
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.pkg:hover { border-color: var(--steel-200); box-shadow: var(--sh-3); transform: translateY(-4px); }
.pkg--featured { border-color: var(--navy-600); border-width: 1.5px; box-shadow: var(--sh-2); }
.pkg__flag {   /* replaces the off-brand green Woodmart ribbon */
  position: absolute; inset-block-start: 0;
  /* Centred with inset-inline on both sides + margin auto, so it does not depend
     on a physical translate that flips the wrong way under RTL. */
  inset-inline: 0; margin-inline: auto; inline-size: fit-content;
  /* A long label ("Legal Management & Governance") used to run past the card
     and disappear under the next one. Cap it to the card and let it wrap; the
     stacking context keeps it above its neighbours either way. */
  max-inline-size: calc(100% - var(--s-4) * 2);
  z-index: 2;
  transform: translateY(-50%);
  background: var(--navy-600); color: #fff;
  text-align: center; text-wrap: balance; line-height: 1.3;
  font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: var(--s-1) var(--s-4); border-radius: 100px;
}
:where(html[dir="rtl"]) .pkg__flag { letter-spacing: 0; text-transform: none; font-size: var(--fs-eyebrow); }
.pkg__head { padding-block-end: var(--s-5); border-block-end: 1px solid var(--line); min-height: 8.5rem; display: flex; flex-direction: column; gap: var(--s-2); }
.pkg__name { font-size: var(--fs-md); line-height: 1.35; }
.pkg__for { font-size: var(--fs-eyebrow); color: var(--text-mute); font-weight: 700; }
.pkg__price { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; margin-block-start: auto; }
.pkg__amount { font-size: var(--fs-2xl); font-weight: 800; color: var(--navy-700); line-height: 1; font-variant-numeric: tabular-nums; }
.pkg__cur { font-size: var(--fs-sm); font-weight: 800; color: var(--brass-600); }
.pkg__per { font-size: var(--fs-eyebrow); color: var(--text-mute); }
.pkg__vat { font-size: 0.8125rem; color: var(--text-mute); }
.pkg__list { padding-block: var(--s-5); display: grid; gap: var(--s-3); flex: 1; }
.pkg__list li { display: flex; gap: var(--s-3); font-size: var(--fs-sm); line-height: 1.65; color: var(--text); }
.pkg__list .ic { inline-size: 1.0625rem; block-size: 1.0625rem; color: var(--brass-500); flex: none; margin-block-start: .22em; }
.pkg__foot { margin-block-start: auto; }

/* Cards hold different amounts of copy, so each row of a card — name, who it
   is for, price, VAT line, feature list, CTA — is a row of the parent grid and
   every card subgrids onto it. Prices then land on one line across the row
   whatever the text above them does, with no fixed heights to break later.
   Row gaps are zero and the sections carry their own padding, so the negative
   margin below cancels the trailing card margin that separates wrapped rows. */
@media (min-width: 48rem) {
  .pkg-grid { grid-template-rows: repeat(6, auto); row-gap: 0; margin-block-end: calc(var(--s-5) * -1); }
  .pkg { grid-row: span 6; display: grid; grid-template-rows: subgrid; row-gap: 0; margin-block-end: var(--s-5); }
  .pkg__head { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: var(--s-2); min-height: 0; }
  .pkg__price { margin-block-start: 0; align-self: end; }
  .pkg__list { align-self: start; }
  .pkg__foot { margin-block-start: 0; align-self: end; }
}

/* --- Comprehensive package: short card, plus a full-scope disclosure ------- */
.pkg--featured .pkg__flag { background: var(--brass-500); }
.pkg__lead {
  font-size: var(--fs-sm); line-height: 1.65; color: var(--text-mute);
  padding-block: var(--s-4) 0; margin-block-start: var(--s-4);
  border-block-start: 1px solid var(--line);
}
.pkg__vat-note {
  display: flex; align-items: center; gap: var(--s-3);
  margin-block-start: var(--s-6);
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-mute);
}
.pkg__vat-note .ic { inline-size: 1.125rem; block-size: 1.125rem; color: var(--brass-500); flex: none; }

/* Native <details>: works with JavaScript disabled, keyboard-operable for free. */
.scope { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.scope[open] { border-color: var(--steel-200); box-shadow: var(--sh-2); }
.scope__summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 68px; padding: var(--s-5) var(--s-6); cursor: pointer; list-style: none;
  font-size: var(--fs-md); font-weight: 800; color: var(--text-strong);
}
.scope__summary::-webkit-details-marker { display: none; }
.scope__summary:hover { color: var(--brass-600); }
.scope__summary .ic {
  inline-size: 1.25rem; block-size: 1.25rem; flex: none; color: var(--steel-500);
  transition: transform var(--t-med) var(--ease), color var(--t-fast) var(--ease);
}
.scope[open] .scope__summary .ic { transform: rotate(45deg); color: var(--brass-500); }
.scope__body { padding: 0 var(--s-6) var(--s-7); }
.scope__body > .lead { max-width: 62ch; padding-block-end: var(--s-6); }
.scope__grid { display: grid; gap: var(--s-6) var(--s-8); }
@media (min-width: 48rem) { .scope__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .scope__grid { grid-template-columns: repeat(3, 1fr); } }
.scope__group { break-inside: avoid; }
.scope__h {
  font-size: var(--fs-eyebrow-lat); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brass-600);
  padding-block-end: var(--s-3); margin-block-end: var(--s-4);
  border-block-end: 1px solid var(--line);
}
:where(html[dir="rtl"]) .scope__h { letter-spacing: 0; text-transform: none; font-size: var(--fs-eyebrow-ar); }
.scope__list { display: grid; gap: var(--s-3); }
.scope__list li { display: flex; gap: var(--s-3); font-size: var(--fs-sm); line-height: 1.6; color: var(--text); }
.scope__list .ic { inline-size: 1rem; block-size: 1rem; color: var(--brass-500); flex: none; margin-block-start: .22em; }

/* --------------------------------------------------------------------------
   15. FORMS  (labels always visible, real errors, PDPL consent — audit 4.4)
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field > label { font-size: var(--fs-sm); font-weight: 800; color: var(--text-strong); }
.field .req { color: var(--state-err); margin-inline-start: 2px; }
.field .hint { font-size: 0.8125rem; color: var(--text-mute); }
.field input, .field select, .field textarea {
  inline-size: 100%; min-height: 52px;
  padding: var(--s-3) var(--s-4);
  background: var(--paper); color: var(--text);
  border: 1.5px solid var(--steel-200); border-radius: var(--r-sm);
  font-size: var(--fs-base);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.65; }
.field select {
  appearance: none; padding-inline-end: 2.75rem; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E7189' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 1.125rem;
  background-position: right var(--s-4) center;
}
:where(html[dir="rtl"]) .field select { background-position: left var(--s-4) center; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--steel-500); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy-600);
  box-shadow: 0 0 0 3px rgba(37,64,100,.14);
}
.field input::placeholder, .field textarea::placeholder { color: #667789; } /* 4.60:1 */
.field[data-invalid="true"] input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea { border-color: var(--state-err); }
.field[data-invalid="true"] input:focus { box-shadow: 0 0 0 3px rgba(179,38,30,.14); }
.field__err { display: none; font-size: 0.8125rem; font-weight: 700; color: var(--state-err); align-items: center; gap: var(--s-2); }
.field[data-invalid="true"] .field__err { display: flex; }
.field__err .ic { inline-size: .9375rem; block-size: .9375rem; flex: none; }
.form__row { display: grid; gap: var(--s-5); }
@media (min-width: 40rem) { .form__row { grid-template-columns: repeat(2,1fr); } }
.form__hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.consent { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; }
.consent input[type="checkbox"] {
  inline-size: 24px; block-size: 24px; min-height: 24px; margin-block-start: .14em;
  accent-color: var(--navy-600); cursor: pointer; flex: none;
}
.consent label { font-size: 0.9375rem; font-weight: 400; line-height: 1.6; color: var(--text); cursor: pointer; }
.consent a { color: var(--navy-600); text-decoration: underline; text-underline-offset: .2em; }
.form__note { font-size: 0.8125rem; color: var(--text-mute); line-height: 1.6; }
.form__status { padding: var(--s-4); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 700; display: none; }
.form__status[data-state="error"] { display: block; background: #FDF2F1; border: 1px solid #F3C9C6; color: var(--state-err); }
.form__status[data-state="ok"] { display: block; background: #F0F9F5; border: 1px solid #C4E5D6; color: var(--state-ok); }

.form-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(1.5rem, 3.5vw, 2.5rem); box-shadow: var(--sh-2); }

/* --------------------------------------------------------------------------
   16. STICKY MOBILE ACTION BAR + FLOATING WHATSAPP  (audit H2 / 3.5)
   -------------------------------------------------------------------------- */
.actionbar {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: var(--z-sticky);
  display: grid; grid-template-columns: repeat(3,1fr);
  background: var(--paper); border-block-start: 1px solid var(--line);
  box-shadow: 0 -6px 24px -8px rgba(16,30,51,.22);
  padding-block-end: env(safe-area-inset-bottom);
  transform: translateY(110%);
  transition: transform var(--t-slow) var(--ease-out);
}
.actionbar.is-visible { transform: translateY(0); }
@media (min-width: 76rem) { .actionbar { display: none; } }
.actionbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 60px; padding: var(--s-2);
  font-size: var(--fs-eyebrow); font-weight: 800; color: var(--navy-800);
  border-inline-end: 1px solid var(--line-soft);
}
.actionbar a:last-child { border-inline-end: 0; }
.actionbar a .ic { inline-size: 1.25rem; block-size: 1.25rem; }
.actionbar a:active { background: var(--sand-100); }
.actionbar__wa { color: #075E54 !important; } /* 7.67:1 on white */
.actionbar__primary { background: var(--navy-600); color: #fff !important; }
body:has(.actionbar.is-visible) { padding-block-end: 0; }
@media (max-width: 75.9375rem) { .site-footer { padding-block-end: calc(var(--s-8) + 64px); } }

.wa-float {
  position: fixed; inset-block-end: var(--s-6); inset-inline-end: var(--s-6); z-index: var(--z-sticky);
  display: none; align-items: center; gap: var(--s-3);
  min-height: 56px; padding-inline: var(--s-5);
  background: #0F7A6E; color: #fff; border-radius: 100px;
  font-size: var(--fs-sm); font-weight: 800;
  box-shadow: 0 10px 30px -8px rgba(15,122,110,.55);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
@media (min-width: 76rem) { .wa-float { display: inline-flex; } }
.wa-float:hover { background: #075E54; transform: translateY(-2px); box-shadow: 0 14px 36px -8px rgba(7,94,84,.6); }
.wa-float .ic { inline-size: 1.375rem; block-size: 1.375rem; flex: none; }

.totop {
  position: fixed; inset-block-end: var(--s-6); inset-inline-start: var(--s-6); z-index: var(--z-sticky);
  inline-size: 46px; block-size: 46px; display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: 50%;
  color: var(--navy-700); box-shadow: var(--sh-2);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility var(--t-med), border-color var(--t-fast) var(--ease);
}
.totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.totop:hover { border-color: var(--brass-500); color: var(--brass-600); }
.totop .ic { inline-size: 1.125rem; block-size: 1.125rem; }
@media (max-width: 75.9375rem) { .totop { inset-block-end: calc(64px + var(--s-4)); inline-size: 44px; block-size: 44px; } }

/* --------------------------------------------------------------------------
   17. TESTIMONIALS / LOGOS / FAQ / BLOG / CONTACT BLOCKS
   -------------------------------------------------------------------------- */
.quote-grid { display: grid; gap: var(--s-5); }
@media (min-width: 56rem) { .quote-grid { grid-template-columns: repeat(3,1fr); } }
.quote { display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-6); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); }
.quote__mark { inline-size: 2rem; block-size: 2rem; color: var(--brass-300); flex: none; }
.quote blockquote { font-size: var(--fs-base); line-height: 1.75; color: var(--text-strong); flex: 1; }
.quote figcaption { display: flex; align-items: center; gap: var(--s-3); padding-block-start: var(--s-4); border-block-start: 1px solid var(--line); }
.quote__av { inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; background: var(--navy-600); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: var(--fs-sm); flex: none; }
.quote__who {
  display: block;                      /* was inline, so it ran into the sector */
  font-size: var(--fs-sm); font-weight: 800; color: var(--text-strong);
  line-height: 1.35;
}
.quote__org {
  display: block;
  font-size: var(--fs-eyebrow); color: var(--text-mute);
  line-height: 1.35; margin-block-start: var(--s-1);
}

/* --------------------------------------------------------------------------
   GOVERNMENT CREDENTIALS
   A government identity reproduced in its own colours is the point here — as it
   now is on the client wall too.
   -------------------------------------------------------------------------- */
/* Seven entities left a 5 + 2 orphan row on a five-column grid. Flex keeps the
   same cell width but centres whatever the last row holds, so the count can
   change again without stranding items against one edge. */
.gov-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4); }
.gov-grid > * { flex: 0 1 calc((100% - var(--s-4)) / 2); }
@media (min-width: 48rem) { .gov-grid > * { flex-basis: calc((100% - 2 * var(--s-4)) / 3); } }
@media (min-width: 68rem) { .gov-grid > * { flex-basis: calc((100% - 3 * var(--s-4)) / 4); } }
.gov {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: var(--s-3); text-align: center;
  padding: var(--s-4) var(--s-4) var(--s-5);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease),
              transform var(--t-med) var(--ease);
}
.gov:hover { border-color: var(--steel-200); box-shadow: var(--sh-3); transform: translateY(-3px); }
.gov__fig { inline-size: 100%; aspect-ratio: 3 / 2; }
.gov__fig img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.gov__name {
  font-size: var(--fs-sm); font-weight: 700; line-height: 1.45;
  color: var(--text-strong); text-wrap: balance;
}

/* Homepage strip: white plates so full-colour identities sit cleanly on navy. */
.gov-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
.gov-strip > li { flex: 0 1 calc((100% - var(--s-3)) / 2); }
@media (min-width: 40rem) { .gov-strip > li { flex-basis: calc((100% - 2 * var(--s-3)) / 3); } }
@media (min-width: 64rem) { .gov-strip > li { flex-basis: calc((100% - 3 * var(--s-3)) / 4); } }
.gov-strip > li {
  background: var(--paper); border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.gov-strip > li:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
.gov-strip img { inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: contain; }

.logos { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.logos > * { background: var(--paper); display: grid; place-items: center; padding: var(--s-4) var(--s-3); min-height: 6.75rem; }
.logos > *:empty { background: var(--paper); }
/* Client identities show in their own colours at all times — no greyscale,
   desaturation or opacity change, and nothing that waits on hover. */
.logos img {
  max-block-size: 3.5rem; max-inline-size: 100%; inline-size: auto; block-size: auto;
  object-fit: contain;
}
/* Column counts that divide the logo count exactly, so no row ends part-empty.
   Any remainder is absorbed by filler cells that only exist at the breakpoint
   that needs them (see .logos__fill--*), rather than one static pad for all. */
@media (min-width: 40rem) { .logos { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 64rem) { .logos { grid-template-columns: repeat(5,1fr); } }
.logos__fill--3, .logos__fill--5 { display: none; }
@media (min-width: 40rem) {
  .logos__fill--2 { display: none; }
  .logos__fill--3 { display: grid; }
}
@media (min-width: 64rem) {
  .logos__fill--3 { display: none; }
  .logos__fill--5 { display: grid; }
}

.faq { display: grid; gap: var(--s-3); }
.faq details {
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper);
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.faq details[open] { border-color: var(--steel-200); box-shadow: var(--sh-2); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5); min-height: 64px; cursor: pointer;
  font-size: var(--fs-md); font-weight: 800; color: var(--text-strong); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brass-600); }
.faq summary .ic { inline-size: 1.25rem; block-size: 1.25rem; color: var(--steel-500); flex: none; transition: transform var(--t-med) var(--ease), color var(--t-fast) var(--ease); }
.faq details[open] summary .ic { transform: rotate(45deg); color: var(--brass-500); }
.faq__body { padding: 0 var(--s-5) var(--s-5); }
.faq__body p { color: var(--text); line-height: var(--lh-loose); }
.faq__body > * + * { margin-block-start: var(--s-3); }

.contact-line { display: flex; align-items: flex-start; gap: var(--s-4); padding-block: var(--s-4); border-block-end: 1px solid var(--line); }
.u-navy .contact-line,
.site-footer .contact-line { border-color: rgba(255,255,255,.14); }
.contact-line__ic { inline-size: 2.5rem; block-size: 2.5rem; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--sand-50); border: 1px solid var(--line); color: var(--navy-600); }
.u-navy .contact-line__ic,
.site-footer .contact-line__ic { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: var(--brass-300); }
.contact-line__ic svg { inline-size: 1.25rem; block-size: 1.25rem; }
.contact-line__k {
  display: block;                       /* label becomes a title on its own line */
  font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-mute);
  margin-block-end: var(--s-1);
}
:where(html[dir="rtl"]) .contact-line__k { letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }
.u-navy .contact-line__k,
.site-footer .contact-line__k { color: var(--steel-400); }
.contact-line__v {
  display: block;                       /* value starts on a new line under the label */
  font-size: var(--fs-md); font-weight: 700; color: var(--text-strong);
  line-height: 1.4; overflow-wrap: anywhere; text-wrap: pretty;
}
.contact-line > span:last-child { min-inline-size: 0; }   /* let long emails wrap, not overflow */
.contact-line__v a { display: inline-block; }
/* A wrapped address reads as two addresses — the footer one stays on one line. */
.contact-line__v a[data-cta="footer-email"] { white-space: nowrap; overflow-wrap: normal; }
/* The footer sits on --ink, not .u-navy, so it needs the same on-dark value or
   the address renders navy-on-navy. */
.u-navy .contact-line__v,
.site-footer .contact-line__v { color: #fff; }
.contact-line__v a:hover { color: var(--brass-600); text-decoration: underline; text-underline-offset: .2em; }
.u-navy .contact-line__v a:hover,
.site-footer .contact-line__v a:hover { color: var(--brass-300); }
/* Phone numbers must never be reordered by bidi — audit 3.4 */
.tel, .num { direction: ltr; unicode-bidi: isolate; display: inline-block; }

.office-grid { display: grid; gap: var(--s-5); }
@media (min-width: 48rem) { .office-grid { grid-template-columns: repeat(3,1fr); } }
.office {
  padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper);
  /* it is a <button> now: strip the UA styling and keep the card reading LTR/RTL
     with the rest of the page rather than centred button text */
  font: inherit; color: inherit; text-align: start; inline-size: 100%; cursor: pointer;
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease),
              transform var(--t-med) var(--ease);
}
.office:hover { border-color: var(--steel-200); box-shadow: var(--sh-3); transform: translateY(-2px); }
.office[aria-pressed="true"] {
  border-color: var(--navy-600); box-shadow: var(--sh-2);
  background: linear-gradient(180deg, var(--paper) 0%, var(--sand-50) 100%);
}
.office[aria-pressed="true"] .card__ic { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.office h3 { font-size: var(--fs-md); margin-block-end: var(--s-2); }
.office p { font-size: var(--fs-sm); color: var(--text-mute); line-height: 1.7; }

/* reCAPTCHA v2 sits in the field rhythm. Google's iframe is a fixed 304px, so
   on narrow screens it is scaled from its own inline start edge rather than
   allowed to push the form wider — the scale flips with the writing mode. */
.field--captcha { display: grid; gap: var(--s-2); }
.field--captcha .g-recaptcha { min-block-size: 78px; }
.field--captcha[data-invalid="true"] .field__err { display: flex; }
@media (max-width: 25rem) {
  .field--captcha .g-recaptcha { transform: scale(.86); transform-origin: left top; }
  :where(html[dir="rtl"]) .field--captcha .g-recaptcha { transform-origin: right top; }
}

.map-embed { position: relative; aspect-ratio: 16/9; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--sand-100); }
.map-embed iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.map-embed__soon {
  position: absolute; inset: 0; margin: 0; display: grid; place-content: center; justify-items: center;
  gap: var(--s-3); background: var(--sand-100); color: var(--text-mute);
  font-size: var(--fs-sm); font-weight: 700; text-align: center; padding: var(--s-5);
}
.map-embed__soon[hidden] { display: none; }
.map-embed__soon .ic { inline-size: 2rem; block-size: 2rem; color: var(--steel-400); }

.cta-band { position: relative; overflow: hidden; isolation: isolate; }
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(75% 120% at 15% 0%, rgba(169,130,82,.20), transparent 60%), var(--navy-800);
}
html[dir="rtl"] .cta-band::before { background: radial-gradient(75% 120% at 85% 0%, rgba(169,130,82,.20), transparent 60%), var(--navy-800); }
.cta-band__in { padding-block: var(--section-y); display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 64rem) { .cta-band__in { grid-template-columns: 1.3fr .7fr; gap: var(--s-8); } }
.cta-band h2 { color: #fff; font-size: var(--fs-2xl); }
.cta-band p { color: var(--text-onnavy-mute); margin-block-start: var(--s-4); }

/* Notice / callout */
.notice { display: flex; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-md); background: var(--sand-50); border: 1px solid var(--line); border-inline-start: 3px solid var(--brass-500); }
.notice .ic { inline-size: 1.25rem; block-size: 1.25rem; color: var(--brass-600); flex: none; margin-block-start: .15em; }
.notice p { font-size: var(--fs-sm); line-height: 1.7; }
.notice strong { color: var(--text-strong); }

/* Sidebar (practice pages, blog) */
.aside-card { background: var(--sand-50); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-5); }
.aside-card h2, .aside-card h3 { font-size: var(--fs-base); margin-block-end: var(--s-4); }
.aside-nav { display: grid; gap: 1px; }
.aside-nav a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 48px; padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm); font-weight: 700; color: var(--navy-800); border-radius: var(--r-xs);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.aside-nav a:hover { background: var(--paper); color: var(--brass-600); }
.aside-nav a[aria-current="page"] { background: var(--navy-600); color: #fff; }
.aside-nav .ic { inline-size: .875rem; block-size: .875rem; opacity: .5; }
@media (min-width: 62rem) { .aside-sticky { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-5)); } }

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--text-onnavy-mute); padding-block: var(--s-9) var(--s-6); }
.footer__grid { display: grid; gap: var(--s-7); }
@media (min-width: 48rem) { .footer__grid { grid-template-columns: repeat(2,1fr); } }
/* The contact column carries the email, which must not break mid-address: floor
   it at the width that address needs (icon + gap + text) and let the fr columns
   give up the difference. */
@media (min-width: 68rem) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr minmax(16.5rem, 1.2fr); gap: var(--s-8); } }
.footer h2 { font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-block-end: var(--s-5); }
:where(html[dir="rtl"]) .footer h2 { letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }
.footer__links { display: grid; gap: var(--s-1); }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-sm); color: var(--text-onnavy-mute); transition: color var(--t-fast) var(--ease), padding-inline-start var(--t-fast) var(--ease); }
.footer__links a:hover { color: var(--brass-300); padding-inline-start: 4px; }
.footer__brand p { font-size: var(--fs-sm); line-height: 1.75; margin-block-start: var(--s-4); max-width: 38ch; }
.footer__licence { margin-block-start: var(--s-5); display: grid; gap: var(--s-2); font-size: 0.8125rem; color: var(--steel-400); }
.footer__licence strong { color: #fff; font-weight: 700; }
.social { display: flex; gap: var(--s-2); margin-block-start: var(--s-5); flex-wrap: wrap; }
.social a {
  inline-size: 44px; block-size: 44px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-sm); color: var(--steel-200);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.social a:hover { background: var(--brass-500); border-color: var(--brass-500); color: #fff; transform: translateY(-2px); }
.social .ic { inline-size: 1.125rem; block-size: 1.125rem; }
.footer__bar {
  margin-block-start: var(--s-8); padding-block-start: var(--s-5);
  border-block-start: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: center; justify-content: space-between;
  font-size: 0.8125rem; color: var(--steel-400);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.footer__legal a { min-height: 44px; display: inline-flex; align-items: center; }
.footer__legal a:hover { color: var(--brass-300); text-decoration: underline; text-underline-offset: .2em; }
.footer__rating { display: flex; align-items: center; gap: var(--s-3); }

/* 404 */
.err { display: grid; place-items: center; min-height: 60vh; text-align: center; }
.err__code { font-size: clamp(5rem, 16vw, 10rem); font-weight: 800; line-height: 1; color: var(--steel-100); letter-spacing: -.04em; }

/* --------------------------------------------------------------------------
   19. MOTION — scroll reveal, count-up, page transition
   -------------------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(22px); }
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="fade"] { transform: none; }
[data-reveal="inline"] { transform: translateX(-24px); }
html[dir="rtl"] [data-reveal="inline"] { transform: translateX(24px); }
[data-reveal="scale"] { transform: scale(.97); }

/* Parallax is opt-in, tiny, and transform-only (no scroll jank, no CLS) */
[data-parallax] { will-change: transform; }

/* THE ACCESSIBILITY CONTRACT: one query disables the entire motion layer. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-parallax] { transform: none !important; }
  .actionbar { transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   20. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .header, .topbar, .actionbar, .wa-float, .totop, .drawer, .cta-band, .site-footer { display: none !important; }
  body { font-size: 11pt; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .section { padding-block: 1rem; }
}

/* --------------------------------------------------------------------------
   21. FORCED COLORS / HIGH CONTRAST
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .btn, .card, .pa, .pkg, .field input, .field select, .field textarea { border: 1px solid ButtonBorder; }
  .hero__scrim { display: none; }
  .hero h1, .hero__lead { color: CanvasText; text-shadow: none; }
}