/* ==========================================================================
   MEDYRA — Design System
   Deep navy + gold, taken from the MEDYRA brand mark. Editorial serif display.
   Authored by hand. No framework. Logical properties throughout for RTL.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand — navy ramp, taken from the MEDYRA identity */
  --navy-950: #060D1C;
  --navy-900: #0A1730;
  --navy-800: #112445;
  --navy-700: #1A3160;
  --navy-600: #24417A;
  --navy-500: #3A5DA0;
  --navy-200: #B6C5E0;
  --navy-100: #DDE5F2;
  --navy-50:  #EFF3FA;

  /* Neutrals — warm ivory canvas */
  --ivory:    #F7F9FC;
  --ivory-2:  #EEF2F8;
  --white:    #FFFFFF;
  --line:     #DCE3ED;
  --line-2:   #E9EEF5;

  /* Ink */
  --ink:      #0D1B2E;  /* headings, body                       ~15.8:1 on ivory */
  --ink-2:    #33445F;  /* strong secondary                      ~9.4:1  */
  --ink-3:    #5A6880;  /* secondary body — passes AA at 4.5:1   ~5.2:1  */

  /* Accents */
  --gold:      #8C6518;  /* AA-safe gold for small text on light ground */
  --gold-lite: #D4AF37;  /* decorative rules, icons (graphics 3:1) */
  --gold-soft: #F3E6C4;

  /* Semantic */
  --success:   #14684E;
  --danger:    #B3261E;
  --danger-bg: #FDECEA;
  --warning:   #8A5A00;

  /* Surfaces */
  --surface:      var(--white);
  --surface-sunk: var(--ivory-2);
  --on-dark:      #E7EDF7;
  --on-dark-mute: #A9B8D2;

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  /* IBM Plex Sans carries Latin, Latin-ext and Cyrillic, and has a matching
     Arabic sibling — so EN / FR / RU / AR all render from one type family
     rather than a patchwork of unrelated fonts. */
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", var(--font-body);

  --fs-hero:    clamp(2.9rem, 1.5rem + 5.6vw, 6.25rem);
  --fs-display: clamp(2.75rem, 1.55rem + 4.6vw, 5.25rem);
  --fs-h1:      clamp(2.25rem, 1.55rem + 2.9vw, 3.9rem);
  --fs-h2:      clamp(1.9rem,  1.45rem + 2.05vw, 3rem);
  --fs-h3:      clamp(1.35rem, 1.16rem + 0.85vw, 1.85rem);
  --fs-h4:      clamp(1.1rem,  1.02rem + 0.36vw, 1.3rem);
  --fs-lead:    clamp(1.075rem, 1.01rem + 0.34vw, 1.3rem);
  --fs-body:    1.0625rem;   /* 17px — comfortable, avoids iOS zoom */
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.75rem;

  /* Spacing — 4pt rhythm */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);
  --gutter:    clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --maxw:      75rem;   /* 1200px */
  --maxw-wide: 84rem;
  --measure:   68ch;

  /* Radii */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-xl: 24px;  --r-pill: 999px;

  /* Elevation — consistent scale, never ad-hoc */
  --e-1: 0 1px 2px rgba(9, 40, 36, .05), 0 1px 3px rgba(9, 40, 36, .04);
  --e-2: 0 2px 4px rgba(9, 40, 36, .05), 0 6px 16px -6px rgba(9, 40, 36, .10);
  --e-3: 0 4px 8px rgba(9, 40, 36, .05), 0 18px 40px -14px rgba(9, 40, 36, .18);
  --e-4: 0 8px 16px rgba(9, 40, 36, .06), 0 32px 64px -24px rgba(9, 40, 36, .28);

  /* Motion */
  --dur-1: 140ms;  --dur-2: 220ms;  --dur-3: 320ms;  --dur-4: 620ms;
  --ease-out:   cubic-bezier(.22, .61, .36, 1);
  --ease-in:    cubic-bezier(.55, .06, .68, .19);
  --ease-soft:  cubic-bezier(.32, .72, .28, 1);

  /* Layers */
  --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-nav: 60; --z-drawer: 80;
  --z-overlay: 90; --z-toast: 100;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 6.5rem; /* clears the sticky header on anchor jumps */
  /* No overflow on the root. `body { overflow-x: hidden }` below propagates to
     the viewport, which is the conventional, well-supported way to suppress
     sideways overflow — and it leaves the root free of a scroll container, so
     position: sticky on the header keeps working. An earlier
     `overflow-x: clip` here was a non-standard belt-and-braces that is no
     longer needed now the off-axis reveal transforms are fixed. */
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-feature-settings: "kern" 1;
}
body[dir="rtl"], [lang="ar"] body, body[lang="ar"] { font-family: var(--font-arabic); }

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.18; }
h4 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; line-height: 1.35; }
p  { text-wrap: pretty; }

::selection { background: var(--navy-700); color: #fff; }

/* Visible, consistent focus. Never removed. */
:focus-visible {
  outline: 3px solid var(--navy-500);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.on-dark :focus-visible { outline-color: #E2C173; }

.skip-link {
  position: absolute; inset-inline-start: var(--sp-4); inset-block-start: -100px;
  z-index: var(--z-toast);
  background: var(--navy-800); color: #fff;
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md);
  font-weight: 600; text-decoration: none;
  transition: inset-block-start var(--dur-2) var(--ease-out);
}
.skip-link:focus { inset-block-start: var(--sp-4); }

.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;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { max-width: var(--maxw-wide); }
.wrap-narrow { max-width: 46rem; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.section--sunk { background: var(--ivory-2); }
.section--white { background: var(--white); }
.section--dark { background: var(--navy-900); color: var(--on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

.grid { display: grid; gap: var(--sp-5); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); } }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 1rem + 5vw, 5rem);
  align-items: center;
}
.split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 900px) {
  .split, .split--7-5, .split--5-7 { grid-template-columns: minmax(0, 1fr); }
}

.stack > * + * { margin-block-start: var(--sp-4); }
.stack-lg > * + * { margin-block-start: var(--sp-6); }
.center { text-align: center; margin-inline: auto; }
.measure { max-width: var(--measure); }
.measure-sm { max-width: 52ch; }

/* --------------------------------------------------------------------------
   4. Typographic components
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy-600); margin-block-end: var(--sp-4);
}
.eyebrow::before {
  content: ""; inline-size: 28px; block-size: 1px;
  background: var(--gold-lite); flex: none;
}
.section--dark .eyebrow { color: #9FB6DE; }
.section--dark .eyebrow::before { background: var(--gold-lite); }

.display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.03em; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-2); max-width: var(--measure); }
.section--dark .lead { color: var(--on-dark-mute); }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.serif-accent { font-family: var(--font-display); font-style: italic; font-weight: 300; }
.tnum { font-variant-numeric: tabular-nums; }

.prose p { color: var(--ink-2); max-width: var(--measure); }
.prose > * + * { margin-block-start: var(--sp-4); }
.prose h3 { margin-block-start: var(--sp-7); }
.prose ul, .prose ol { padding-inline-start: 1.25em; color: var(--ink-2); }
.prose li + li { margin-block-start: var(--sp-2); }
.prose li::marker { color: var(--navy-500); }
.prose strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--navy-700);
  --btn-fg: #fff;
  --btn-bd: var(--navy-700);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-block-size: 48px;               /* ≥44px touch target */
  padding: var(--sp-3) var(--sp-6);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.005em;
  text-decoration: none; cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.btn:hover { background: var(--navy-600); border-color: var(--navy-600); box-shadow: var(--e-2); }
.btn:active { transform: scale(.975); }
.btn svg { flex: none; }
.btn .btn-arrow { transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(3px); }
[dir="rtl"] .btn:hover .btn-arrow { transform: translateX(-3px); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--navy-700); --btn-bd: var(--line); }
.btn--ghost:hover { background: var(--navy-50); border-color: var(--navy-200); box-shadow: none; }
.btn--light { --btn-bg: #fff; --btn-fg: var(--navy-800); --btn-bd: #fff; }
.btn--light:hover { background: var(--navy-50); border-color: var(--navy-50); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.42); }
.btn--outline-light:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.7); }
/* Brass — the luxury accent. 7.4:1 against its own dark label, so it carries
   the primary action on the dark hero without dropping below AA. */
.btn--gold {
  --btn-bg: linear-gradient(135deg, #F4E09B 0%, #D9B65C 32%, #C9A227 62%, #A67C1B 100%);
  --btn-fg: #060D1C;
  --btn-bd: transparent;
}
.btn--gold:hover {
  background: linear-gradient(135deg, #F9EAB4 0%, #E3C673 32%, #D4AF37 62%, #B98D24 100%);
  border-color: transparent;
  box-shadow: 0 10px 32px -10px rgba(212,175,55,.60);
}
.btn--lg { min-block-size: 56px; padding-inline: var(--sp-7); font-size: var(--fs-body); }
.btn--block { display: flex; inline-size: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn-label { opacity: .6; }
.spinner {
  inline-size: 18px; block-size: 18px; flex: none;
  border: 2px solid currentColor; border-block-start-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--navy-700); font-weight: 600; font-size: var(--fs-sm);
  text-decoration: none;
  padding-block: var(--sp-2);       /* enlarges the hit area */
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.link-arrow:hover { border-block-end-color: currentColor; }
.link-arrow svg { transition: transform var(--dur-2) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }
[dir="rtl"] .link-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(3px); }
.section--dark .link-arrow { color: #9FB6DE; }

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--navy-950); color: var(--on-dark-mute);
  font-size: var(--fs-xs);
  border-block-end: 1px solid rgba(255,255,255,.07);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-block-size: 40px; flex-wrap: wrap;
}
.topbar a { color: var(--on-dark); text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar-facts { display: flex; align-items: center; gap: var(--sp-5); }
@media (max-width: 720px) { .topbar-facts { display: none; } }

.header {
  position: sticky; inset-block-start: 0; z-index: var(--z-nav);
  background: rgba(247, 249, 252, .82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-block-end: 1px solid transparent;
  transition: background-color var(--dur-3) var(--ease-out),
              border-color var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out);
}
.header.is-scrolled {
  background: rgba(247, 249, 252, .95);
  border-block-end-color: var(--line);
  box-shadow: 0 1px 24px -12px rgba(10,23,48,.35);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); min-block-size: 74px;
  transition: min-block-size var(--dur-3) var(--ease-out);
}
.header.is-scrolled .nav { min-block-size: 64px; }

.brand {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  text-decoration: none; flex: none;
  min-block-size: 44px;   /* the mark is 38px; the link must still be tappable */
}
.brand-mark { inline-size: 44px; block-size: 44px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--font-display); font-size: 1.235rem; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.brand-sub { font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }

.nav-links { display: flex; align-items: center; gap: var(--sp-1); list-style: none; padding: 0; }
.nav-link {
  display: inline-flex; align-items: center; min-block-size: 44px;
  padding-inline: var(--sp-4); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); text-decoration: none;
  position: relative;
  transition: color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.nav-link:hover { color: var(--navy-700); background: var(--navy-50); }
.nav-link[aria-current="page"] { color: var(--navy-700); font-weight: 600; }
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; inset-block-end: 6px;
  inset-inline: var(--sp-4); block-size: 2px; border-radius: 2px;
  background: var(--gold-lite);
}
/* Overlay mode: the header sits directly above a dark hero, so it wears the
   hero's own top colour until the user scrolls, then reverts to ivory glass. */
.header--overlay:not(.is-scrolled) {
  background: var(--navy-950);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-block-end-color: rgba(255,255,255,.07);
}
.header--overlay:not(.is-scrolled) .brand-name { color: #fff; }
.header--overlay:not(.is-scrolled) .brand-sub  { color: rgba(231,237,247,.52); }
.header--overlay:not(.is-scrolled) .nav-link,
.header--overlay:not(.is-scrolled) .switch-btn { color: rgba(231,237,247,.80); }
.header--overlay:not(.is-scrolled) .nav-link:hover,
.header--overlay:not(.is-scrolled) .switch-btn:hover { color: #fff; background: rgba(255,255,255,.09); }
.header--overlay:not(.is-scrolled) .nav-link[aria-current="page"] { color: #fff; }
.header--overlay:not(.is-scrolled) .burger { color: #fff; }
.header--overlay:not(.is-scrolled) .burger:hover { background: rgba(255,255,255,.09); }
.header--overlay:not(.is-scrolled) .nav-actions > .btn {
  --btn-bg: linear-gradient(135deg, #F4E09B 0%, #D9B65C 32%, #C9A227 62%, #A67C1B 100%);
  --btn-fg: #060D1C;
  --btn-bd: transparent;
}
.header--overlay:not(.is-scrolled) .nav-actions > .btn:hover {
  background: linear-gradient(135deg, #F9EAB4 0%, #E3C673 32%, #D4AF37 62%, #B98D24 100%);
  border-color: transparent;
}

.nav-actions { display: flex; align-items: center; gap: var(--sp-3); }
@media (max-width: 1080px) { .nav-links, .nav-actions .btn { display: none; } }
/* Below 720px the header is brand + menu only; language and currency
   move into the drawer, where they get room to be labelled properly. */
@media (max-width: 719px) { .nav-actions .switch { display: none; } }

/* Language + currency switchers */
.switch {
  position: relative; display: inline-flex; align-items: center;
}
.switch-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-block-size: 44px; padding-inline: var(--sp-3);
  border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink-2);
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.switch-btn:hover { background: var(--navy-50); color: var(--navy-700); }
.switch-btn .chev { transition: transform var(--dur-2) var(--ease-out); }
.switch-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.switch-menu {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0;
  min-inline-size: 11rem; padding: var(--sp-2);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--e-3);
  list-style: none; margin: 0; z-index: var(--z-drawer);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top;
  visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility var(--dur-2);
}
.switch.is-open .switch-menu { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.switch-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  inline-size: 100%; min-block-size: 44px; padding-inline: var(--sp-3);
  border-radius: var(--r-sm); font-size: var(--fs-sm); text-align: start;
  transition: background-color var(--dur-1) var(--ease-out);
}
.switch-menu button:hover { background: var(--navy-50); }
.switch-menu button[aria-checked="true"] { color: var(--navy-700); font-weight: 600; }
.switch-menu button[aria-checked="true"]::after { content: "✓"; color: var(--navy-600); }
.switch-menu .opt-sub { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 400; }

/* Floating WhatsApp button — fixed to the viewport, not the header, so it
   stays reachable the entire time a visitor is on the page, independent of
   scroll position or which section is showing. Sits below the header/drawer
   in the stacking order (--z-sticky, not --z-nav/--z-drawer) so the mobile
   drawer's full-screen scrim still covers it correctly while open. */
.whatsapp-fab {
  position: fixed;
  inset-block-end: clamp(1rem, 3vw, 1.75rem);
  inset-inline-end: clamp(1rem, 3vw, 1.75rem);
  z-index: var(--z-sticky);
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 56px; block-size: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(10,23,48,.32);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.whatsapp-fab:hover { transform: scale(1.08); box-shadow: 0 10px 26px rgba(10,23,48,.38); }
.whatsapp-fab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.whatsapp-fab svg { inline-size: 30px; block-size: 30px; }
@media (max-width: 480px) {
  .whatsapp-fab { inline-size: 50px; block-size: 50px; }
  .whatsapp-fab svg { inline-size: 26px; block-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab:hover { transform: none; }
}

/* Mobile drawer */
.burger {
  display: none; align-items: center; justify-content: center;
  inline-size: 48px; block-size: 48px; border-radius: var(--r-pill);
  color: var(--ink);
  transition: background-color var(--dur-2) var(--ease-out);
}
.burger:hover { background: var(--navy-50); }
@media (max-width: 1080px) { .burger { display: inline-flex; } }

.drawer-scrim {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(6, 30, 28, .55);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-3) var(--ease-out), visibility var(--dur-3);
}
.drawer-scrim.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: var(--z-toast);
  inline-size: min(24rem, 88vw);
  background: var(--ivory);
  box-shadow: var(--e-4);
  display: flex; flex-direction: column;
  padding: var(--sp-5) var(--sp-5) max(var(--sp-6), env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(102%);
  visibility: hidden;
  transition: transform var(--dur-4) var(--ease-soft), visibility var(--dur-4);
}
[dir="rtl"] .drawer { transform: translateX(-102%); }
.drawer.is-open { transform: none; visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--sp-6); }
.drawer-links { list-style: none; padding: 0; display: flex; flex-direction: column; }
.drawer-links a {
  display: flex; align-items: center; justify-content: space-between;
  min-block-size: 56px; padding-inline: var(--sp-2);
  font-family: var(--font-display); font-size: 1.35rem;
  text-decoration: none; color: var(--ink);
  border-block-end: 1px solid var(--line-2);
  transition: color var(--dur-2) var(--ease-out), padding-inline-start var(--dur-2) var(--ease-out);
}
.drawer-links a:hover { color: var(--navy-700); padding-inline-start: var(--sp-4); }
.drawer-links a[aria-current="page"] { color: var(--navy-700); }
.drawer-foot { margin-block-start: auto; padding-block-start: var(--sp-6); display: grid; gap: var(--sp-3); }

/* Language / currency chips inside the drawer */
.drawer-opts { display: grid; gap: var(--sp-2); margin-block: var(--sp-6) var(--sp-5); }
.drawer-opts + .drawer-opts { margin-block-start: 0; }
.opt-label { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 44px; min-inline-size: 56px; padding-inline: var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--white); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
  text-decoration: none;   /* also used as an anchor for the speciality jump-nav */
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.opt:hover { border-color: var(--navy-200); background: var(--navy-50); }
.opt[aria-checked="true"] { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }

/* --------------------------------------------------------------------------
   7. Hero — dark editorial
   The topbar, the header in overlay mode and this section share --navy-950 at
   their meeting edges, so the top of the page reads as one continuous mass
   rather than three stacked bands.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--on-dark);
  /* Kept as a safety net beneath the media layer: if the poster or video
     fails to load for any reason, this still reads as an intentional dark
     hero rather than a broken gap. */
  background: linear-gradient(168deg, var(--navy-950) 0%, var(--navy-900) 46%, #14294E 100%);
  padding-block: clamp(3.25rem, 2rem + 5.5vw, 6.5rem) clamp(2.5rem, 2rem + 3vw, 4rem);
  /* A full-bleed video needs real height to read as immersive rather than a
     thin strip. min() keeps it from overwhelming short laptop screens. */
  min-block-size: min(880px, 94vh);
  display: grid;
  align-items: center;
}
@media (max-width: 940px) {
  /* Mobile never loads the video (see initHeroVideo in site.js), and without
     the side image panel the content is shorter — a fixed tall minimum would
     open the page on an oversized, mostly-empty hero. */
  .hero { min-block-size: auto; }
}

/* The single flow child of the grid — lets `align-items: center` on .hero
   vertically centre the whole copy+assure stack without needing flexbox
   distribution logic across two separate blocks. */
.hero-inner { position: relative; z-index: 1; }

/* ---- Background media (poster + progressive-enhancement video) -----------
   Sits further back than every existing atmosphere layer below (hero-bg at
   -3, grain at -2, lines at -1) so all of that keeps layering on top of the
   footage exactly as it did on top of the flat gradient before. */
.hero-media {
  position: absolute; inset: 0; z-index: -6; overflow: hidden;
}
.hero-media-poster, .hero-media-video {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%; object-fit: cover;
}
/* hero-poster.jpg is pre-cropped to the text-free consultation band of the
   source photo (see README §6), so it's already centred on the subjects —
   plain center is correct here. */
.hero-media-poster {
  object-position: center;
}
/* hero-medyra-1080.mp4 keeps the doctor right-of-centre with the on-wall
   logo card in the far corner; biasing left keeps her in frame on narrow
   crops instead of centring on the gap between her and the logo. Verified
   against the real footage at the actual rendered hero height. */
.hero-media-video {
  object-position: 38% center;
  opacity: 0;
  transition: opacity 1200ms var(--ease-out);
}
.hero-media-video.is-playing { opacity: 1; }

/* The overlay this whole feature was requested for: a navy scrim so white/
   gold text and the flight animation stay legible over moving footage. Same
   gradient direction as .hero's own background so the two read as one
   surface rather than a photo with a filter slapped on it. */
.hero-media-overlay {
  position: absolute; inset: 0; z-index: -5;
  background: linear-gradient(168deg,
    rgba(6,13,28,.90) 0%, rgba(10,23,48,.74) 46%, rgba(20,41,78,.58) 100%);
}

/* Layered atmosphere: a warm high glow, a cool low one, the meridian arcs,
   and a very fine grain so the large flat area has some material to it. */
.hero-bg {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(100% 70% at 82% 2%, rgba(58,93,160,.30), transparent 62%),
    radial-gradient(80% 60% at 6% 96%, rgba(201,153,47,.16), transparent 64%);
}
.hero-grain {
  position: absolute; inset: 0; z-index: -2; opacity: .045; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-lines {
  position: absolute; inset-block-start: -18%; inset-inline-end: -16%;
  inline-size: min(60rem, 96vw); z-index: -1;
  opacity: .22; pointer-events: none;
  filter: invert(1) brightness(1.7);   /* the arcs were drawn for a light ground */
}

/* ---- Diagonal flight path --------------------------------------------------
   Echoes the aircraft in the MEDYRA mark. The track is a zero-height rail
   rotated to the hero's diagonal, and the plane translates along its own X
   axis — so its nose always points exactly where it is travelling, at any
   viewport aspect ratio. Sits at z-index -1, behind all hero content. */
.hero-flight {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden; pointer-events: none;
}
[dir="rtl"] .hero-flight { transform: scaleX(-1); }   /* mirror, don't re-angle */

/* The rail starts at the dead centre of the hero and climbs out to the
   top-right. Anchoring it here keeps the plane clear of the CTA buttons in
   the lower left, and lets it read as departing from the middle of the frame
   rather than sliding in from an edge. */
.hero-flight-track {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 100%;
  block-size: 0;
  transform: rotate(-34deg);
  transform-origin: 0 50%;
}
/* A phone hero is far taller than it is wide, so a 34° climb barely rises.
   Steepen it, and lengthen the rail to guarantee it still clears the edge. */
@media (max-width: 940px) {
  /* Stacked full-width CTAs sit near mid-height on a phone, so a launch at
     50% would put the plane right on top of them — the exact thing this
     layout is meant to avoid. Start above them instead. */
  .hero-flight-track { inset-block-start: 34%; inline-size: 130%; transform: rotate(-42deg); }
}

.hero-plane {
  position: absolute; inset-block-start: -13px; inset-inline-start: 0;
  inline-size: 100%;                 /* so translateX% is rail-relative */
  animation: flyOut 22s cubic-bezier(.34, 0, .5, 1) infinite;
  will-change: transform;
}
/* Scale lives on an inner wrapper so it can't compose with the rail
   translation. The plane grows as it climbs — it reads as approaching from
   the far distance rather than simply sliding across. */
.hero-plane-body {
  /* inline-flex, NOT flex: `display: flex` blockifies the span to the full
     width of the rail, which drags transform-origin: 100% out to the far
     right and throws the scale hundreds of pixels off course. It has to
     shrink-wrap so the origin lands on the aircraft's nose.
     The negative start margin pulls the trail behind the nose, so the
     aircraft itself — not the tail of its vapour trail — is what sits on the
     rail's origin at the centre of the hero. */
  --trail-len: clamp(120px, 20vw, 320px);
  display: inline-flex; align-items: center;
  margin-inline-start: calc(-1 * var(--trail-len));
  transform-origin: 100% 50%;
  opacity: 0;
  animation: planeApproach 22s cubic-bezier(.34, 0, .5, 1) infinite;
  will-change: transform, opacity;
}
.hero-plane-trail {
  flex: none; block-size: 2px; border-radius: 2px;
  inline-size: var(--trail-len);
  background: linear-gradient(90deg,
    rgba(212,175,55,0) 0%, rgba(212,175,55,.45) 46%, rgba(249,236,190,1) 100%);
}
.hero-plane-icon {
  flex: none; margin-inline-start: 3px;
  inline-size: clamp(28px, 2.8vw, 42px); block-size: auto;
  color: #F9ECBE;
  filter: drop-shadow(0 0 14px rgba(212,175,55,.75));
}
/* The rail is one hero-width long, and clearing the right edge from the centre
   costs (0.5 / cos 34°) ≈ 0.60 of it — so ending the travel at 68% means the
   aircraft is on screen for almost the whole flight phase rather than leaving
   in the first few seconds. Travel spans 85% of a 22s loop, which holds the
   same ~50px/s pace as a 30s loop while cutting the dead time after it exits. */
@keyframes flyOut {
  0%   { transform: translateX(0%); }
  85%  { transform: translateX(68%); }
  100% { transform: translateX(68%); }
}
@keyframes planeApproach {
  0%   { opacity: 0;   transform: scale(.45); }
  7%   { opacity: .95; }
  72%  { opacity: .95; transform: scale(1); }
  85%  { opacity: 0;   transform: scale(1.04); }
  100% { opacity: 0;   transform: scale(1.04); }
}

.hero .eyebrow { color: #A9C0E6; }
.hero .eyebrow::before { background: var(--gold-lite); }

/* No longer constrained by a grid column now that the side image panel is
   gone — without a cap, the display type would stretch edge-to-edge on a
   wide desktop viewport. */
.hero-copy { max-inline-size: 50rem; }

/* Headline: each line rides up out of its own mask. */
.hero-title {
  font-size: var(--fs-hero);
  line-height: 0.99;
  letter-spacing: -0.038em;
  color: #fff;
  font-weight: 300;
}
.hero-title .line {
  display: block;
  overflow: hidden;
  padding-block-end: .1em;      /* descenders clear the mask edge */
  margin-block-end: -.1em;
}
.hero-title .line > span {
  display: block;
  transform: translate3d(0, 108%, 0);
  transition: transform 1150ms var(--ease-soft);
  transition-delay: var(--line-delay, 0ms);
  will-change: transform;
}
.hero-title.is-in .line > span { transform: none; }
.hero-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold-lite);
}

.hero-lead {
  margin-block-start: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  max-width: 34rem;
  color: var(--on-dark-mute);
  font-size: clamp(1.075rem, 1rem + 0.42vw, 1.28rem);
}
.hero-cta {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-block-start: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
}
/* On narrow screens a wrapped button label reads as a mistake. Full-width
   stacked buttons are deliberate-looking and easier to hit — but --btn-lg's
   48px inline padding has to come down too, or the label still wraps. */
@media (max-width: 560px) {
  .hero-cta { gap: var(--sp-3); }
  .hero-cta .btn { flex: 1 0 100%; padding-inline: var(--sp-5); }
}

/* Service band — hairlines, not ticks. */
.hero-assure {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; list-style: none; padding: 0;
  margin-block-start: clamp(3rem, 2rem + 4vw, 5rem);
  padding-block-start: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  border-block-start: 1px solid rgba(255,255,255,.14);
}
/* Two columns are held all the way down to 360px — stacking all four rows
   adds ~150px of height on a phone for no readability gain. */
@media (max-width: 860px) { .hero-assure { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); } }
@media (max-width: 360px) { .hero-assure { grid-template-columns: minmax(0, 1fr); } }
.hero-assure li {
  padding-inline: 0 var(--sp-5);
  border-inline-end: 1px solid rgba(255,255,255,.11);
}
.hero-assure li:last-child { border-inline-end: 0; padding-inline-end: 0; }
@media (max-width: 860px) {
  .hero-assure li:nth-child(2n) { border-inline-end: 0; padding-inline-end: 0; }
  .hero-assure li:nth-child(2n+1) { padding-inline-end: var(--sp-4); }
}
@media (max-width: 360px) {
  .hero-assure li { border-inline-end: 0; padding-inline-end: 0; }
}
.hero-assure-k {
  display: block; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-lite);
  margin-block-end: var(--sp-2);
}
.hero-assure-v { display: block; font-size: var(--fs-sm); color: #DDE5F2; line-height: 1.45; }

/* A normal-flow badge under the CTAs — not floated over the video. It used
   to carry the same glass/blur treatment as the old photo-frame version,
   but that meant continuously blurring a live, playing video every frame
   for as long as this badge is on screen — i.e. for the entire time a
   visitor sits on the hero. Combined with the header's own backdrop-filter
   and the scroll-driven parallax/reveal work, that was heavy enough to
   drop frames on real hardware, visible as a brief blank/white flash mid-
   scroll. A solid, slightly darker panel reads almost identically at this
   size and costs nothing to composite. */
.hero-credential {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  max-inline-size: min(26rem, 100%);
  margin-block-start: clamp(1.5rem, 1rem + 1.6vw, 2rem);
  padding: var(--sp-3) var(--sp-5);
  background: rgba(8,18,38,.82);
  border: 1px solid rgba(201,153,47,.30);
  border-radius: var(--r-lg);
}
.hero-credential-num {
  font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.35rem);
  line-height: 1; color: #fff; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.hero-credential-txt { font-size: var(--fs-xs); color: #CBD8EC; line-height: 1.5; }

/* Scroll cue */
.hero-scroll {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(203,216,236,.68);   /* keeps the cue above 4.5:1 once alpha is composited */
}
.hero-scroll-line {
  position: relative; inline-size: 56px; block-size: 1px; flex: none;
  background: rgba(255,255,255,.18); overflow: hidden;
}
.hero-scroll-line::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: 40%; background: var(--gold-lite);
  animation: scrollCue 2.6s var(--ease-soft) infinite;
}
@keyframes scrollCue {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(250%); }
  100% { transform: translateX(250%); }
}
[dir="rtl"] .hero-scroll-line::after { animation-direction: reverse; }
/* Placed after the base rule on purpose — same specificity, so source order
   decides. The cue only earns its space on desktop. */
@media (max-width: 940px) { .hero-scroll { display: none; } }

/* --------------------------------------------------------------------------
   8. Accreditation marquee
   -------------------------------------------------------------------------- */
.marquee {
  --marquee-dur: 46s;
  position: relative; overflow: hidden;
  padding-block: var(--sp-5);
  border-block: 1px solid var(--line);
  background: var(--white);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; inline-size: max-content; animation: marquee var(--marquee-dur) linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-inline: clamp(1.25rem, 2.4vw, 2.5rem);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3);
  white-space: nowrap;
}
.marquee-item svg { color: var(--navy-500); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
[dir="rtl"] .marquee-track { animation-direction: reverse; }

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: transform var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out),
              border-color var(--dur-3) var(--ease-out);
}
/* The whole card is one anchor, and text-decoration propagates from an
   ancestor to everything inside it — so the UA underline lands on the
   description and the meta row too. Clear it here, then put a deliberate
   rule back under the heading alone. */
.card--link { text-decoration: none; }
.card--link h3 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--navy-200);
  transition: text-decoration-color var(--dur-2) var(--ease-out);
}
.card--link:hover h3,
.card--link:focus-visible h3 { text-decoration-color: var(--gold-lite); }

.card--link:hover, .card--link:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--e-3);
  border-color: var(--navy-200);
}

/* ---- Boundary highlight (value section only) -------------------------------
   The doubled ring (border plus a 1px outset shadow) reads as a crisp 2px gold
   boundary without changing the box size, so nothing reflows. There is no lift
   and no pointer cursor: these are informational, not links.
   Scope matters — this is intentionally limited to .value-row / .value-feature
   so the treatment cards and every other card keep their original hover. */
@media (hover: hover) {
  /* Scoped by the .value-cards wrapper, NOT by bare .card — otherwise this
     leaks onto the treatment cards and every other card on the site. */
  .value-cards .card:hover {
    border-color: rgba(201,162,39,.55);
    box-shadow: 0 0 0 1px rgba(201,162,39,.30),
                0 14px 34px -20px rgba(10,23,48,.45);
  }
  .value-cards .card:hover .card-icon {
    background: var(--navy-700);
    color: #F7E7AE;
  }
}

/* ---- Pointer spotlight -----------------------------------------------------
   --mx/--my are written by site.js on pointermove (fine pointers only). They
   default to the centre, so with JS off or on touch the card still lights up
   evenly rather than looking broken. Applied only to cards that are actually
   links — lighting a static card would promise a click that isn't there. */
.card--link, .post-card { --mx: 50%; --my: 50%; isolation: isolate; }

.card--link::before,
.post-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(320px circle at var(--mx) var(--my),
              rgba(201,153,47,.16), rgba(201,153,47,.05) 44%, transparent 70%);
  transition: opacity var(--dur-3) var(--ease-out);
}
.card--link:hover::before, .card--link:focus-within::before,
.post-card:hover::before,  .post-card:focus-within::before { opacity: 1; }

/* Gold hairline that burns brightest nearest the cursor. The two-layer mask
   punches out the middle so only the 1px frame paints. */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .card--link::after,
  .post-card::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    border-radius: inherit; pointer-events: none; opacity: 0;
    padding: 1px;
    background: radial-gradient(240px circle at var(--mx) var(--my),
                rgba(201,153,47,.85), rgba(201,153,47,.25) 40%, transparent 64%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    transition: opacity var(--dur-3) var(--ease-out);
  }
  .card--link:hover::after, .card--link:focus-within::after,
  .post-card:hover::after,  .post-card:focus-within::after { opacity: 1; }
}

/* Touch devices have no real hover — don't leave a glow stuck on after a tap. */
@media (hover: none) {
  .card--link::before, .card--link::after,
  .post-card::before,  .post-card::after { display: none; }
}
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 52px; block-size: 52px; border-radius: 14px;
  background: var(--navy-50); color: var(--navy-700);
  margin-block-end: var(--sp-5);
  transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
}
.card--link:hover .card-icon { background: var(--navy-700); color: #fff; }
.card h3 {
  margin-block-end: var(--sp-3);
  font-size: clamp(1.2rem, 1.08rem + 0.42vw, 1.45rem);
  line-height: 1.22;
}
.card p { color: var(--ink-3); font-size: var(--fs-sm); }
.card-stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.card-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  margin-block-start: var(--sp-5); padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line-2);
  font-size: var(--fs-xs); color: var(--ink-3);
}
.card-meta strong { color: var(--navy-700); font-weight: 600; }

.tag {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 4px var(--sp-3); border-radius: var(--r-pill);
  background: var(--navy-50); color: var(--navy-700);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .01em;
}
.tag--gold { background: var(--gold-soft); color: #6B4E12; }
.tag--neutral { background: var(--ivory-2); color: var(--ink-3); }

/* --------------------------------------------------------------------------
   10. Stats
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); } }
.stat-num {
  font-family: var(--font-display); font-size: clamp(2.4rem, 1.7rem + 2.4vw, 3.6rem);
  line-height: 1; letter-spacing: -0.03em; color: #fff;
  font-variant-numeric: tabular-nums;
}
.stat-label { margin-block-start: var(--sp-3); font-size: var(--fs-sm); color: var(--on-dark-mute); }
.section--dark .stat-rule { inline-size: 32px; block-size: 2px; background: var(--gold-lite); margin-block-end: var(--sp-4); }

/* --------------------------------------------------------------------------
   11. Journey / steps
   -------------------------------------------------------------------------- */
.steps { position: relative; display: grid; gap: var(--sp-6); }
.steps::before {
  content: ""; position: absolute; inset-block: 28px 28px;
  inset-inline-start: 27px; inline-size: 2px;
  background: linear-gradient(var(--navy-200), var(--line));
}
@media (max-width: 640px) { .steps::before { inset-inline-start: 23px; } }
.step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 640px) { .step { grid-template-columns: 48px minmax(0, 1fr); gap: var(--sp-4); } }
.step-num {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  inline-size: 56px; block-size: 56px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--navy-200);
  font-family: var(--font-display); font-size: 1.2rem; color: var(--navy-700);
  transition: background-color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
}
@media (max-width: 640px) { .step-num { inline-size: 48px; block-size: 48px; font-size: 1.05rem; } }
.step.is-in .step-num { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.step-body { padding-block-start: var(--sp-2); }
.step-body h3 { font-size: var(--fs-h4); font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
.step-body p { color: var(--ink-3); margin-block-start: var(--sp-2); max-width: 52ch; font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   12. Cost comparison bars + estimator
   -------------------------------------------------------------------------- */
.compare-row {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 7rem;
  gap: var(--sp-4); align-items: center;
  padding-block: var(--sp-3);
}
@media (max-width: 700px) {
  .compare-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label price" "bar bar"; gap: var(--sp-2) var(--sp-3); }
  .compare-label { grid-area: label; } .compare-track { grid-area: bar; } .compare-price { grid-area: price; text-align: end; }
}
.compare-label { font-size: var(--fs-sm); font-weight: 600; display: flex; align-items: center; gap: var(--sp-3); }
.compare-track { block-size: 30px; border-radius: var(--r-sm); background: var(--ivory-2); overflow: hidden; }
.compare-fill {
  block-size: 100%; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--navy-600), var(--navy-500));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 900ms var(--ease-soft);
}
[dir="rtl"] .compare-fill { transform-origin: right center; }
.compare-fill--muted { background: linear-gradient(90deg, #A7B0C2, #C4CBD8); }
.compare-price { font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }

.estimator {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--e-3);
  overflow: hidden;
}
.estimator-head { padding: var(--sp-6); border-block-end: 1px solid var(--line-2); background: var(--ivory); }
.estimator-body { padding: var(--sp-6); display: grid; gap: var(--sp-6); }
.estimator-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 620px) { .estimator-controls { grid-template-columns: minmax(0, 1fr); } }
.estimator-result {
  background: var(--navy-900); color: var(--on-dark);
  border-radius: var(--r-lg); padding: var(--sp-6);
}
.estimator-saving {
  font-family: var(--font-display); font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
  line-height: 1; color: #fff; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */
.field { display: block; }
.field + .field { margin-block-start: var(--sp-5); }
.field-label {
  display: flex; align-items: baseline; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: 600; margin-block-end: var(--sp-2);
}
.field-req { color: var(--danger); font-weight: 700; }
.field-opt { color: var(--ink-3); font-weight: 400; font-size: var(--fs-xs); }

.input, .select, .textarea {
  inline-size: 100%; min-block-size: 50px;          /* ≥44px touch */
  padding: var(--sp-3) var(--sp-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 1rem;                                   /* ≥16px: no iOS auto-zoom */
  color: var(--ink);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.textarea { min-block-size: 8rem; resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: #8A97AC; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--navy-200); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--navy-600);
  box-shadow: 0 0 0 3px rgba(58,93,160,.18);
}
.select {
  appearance: none; cursor: pointer;
  padding-inline-end: var(--sp-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235C6E68' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
}
[dir="rtl"] .select { background-position: left var(--sp-4) center; }

.field-help { margin-block-start: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-3); }
.field-error {
  display: none; align-items: center; gap: var(--sp-2);
  margin-block-start: var(--sp-2); font-size: var(--fs-xs);
  color: var(--danger); font-weight: 500;
}
.field.has-error .field-error { display: flex; }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea {
  border-color: var(--danger); background: var(--danger-bg);
}

.check {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  min-block-size: 44px; padding-block: var(--sp-2);
  cursor: pointer; font-size: var(--fs-sm); color: var(--ink-2);
}
.check input { inline-size: 20px; block-size: 20px; margin-block-start: 2px; flex: none; accent-color: var(--navy-700); cursor: pointer; }

.chip-set { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inline-size: 100%; block-size: 100%; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-block-size: 44px;
  padding-inline: var(--sp-4); border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--white);
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2);
  transition: all var(--dur-2) var(--ease-out);
}
.chip input:hover + span { border-color: var(--navy-200); background: var(--navy-50); }
.chip input:checked + span { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--navy-500); outline-offset: 3px; }

.form-status {
  display: none; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4); border-radius: var(--r-md);
  font-size: var(--fs-sm); margin-block-end: var(--sp-5);
}
.form-status.is-visible { display: flex; }
.form-status--error { background: var(--danger-bg); color: #7A1C16; border: 1px solid #F2C4BF; }
.form-status--ok { background: #E7F4F0; color: #0B4438; border: 1px solid #B9DED2; }
.form-status a { color: inherit; }

/* --------------------------------------------------------------------------
   14. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.acc-item { border-block-end: 1px solid var(--line); }
.acc-btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  inline-size: 100%; min-block-size: 64px; padding-block: var(--sp-4);
  text-align: start; font-size: var(--fs-h4); font-weight: 600; color: var(--ink);
  transition: color var(--dur-2) var(--ease-out);
}
.acc-btn:hover { color: var(--navy-700); }
.acc-sign { flex: none; inline-size: 32px; block-size: 32px; display: grid; place-items: center; color: var(--navy-600); }
.acc-sign svg { transition: transform var(--dur-3) var(--ease-out); }
.acc-btn[aria-expanded="true"] .acc-sign svg { transform: rotate(45deg); }

/* Panels are open by default so the FAQ content is present and readable
   with JavaScript disabled; site.js adds .is-enhanced and drives block-size
   inline from there. This is why we don't use the `grid-template-rows:
   0fr -> 1fr` trick: that one collapses every panel in CSS, so with
   scripting off the answers are invisible to readers and to crawlers. */
.acc-panel { overflow: hidden; }
[data-accordion].is-enhanced .acc-panel {
  transition: block-size var(--dur-4) var(--ease-soft);
}
.acc-panel p { color: var(--ink-3); font-size: var(--fs-sm); padding-block-end: var(--sp-5); max-width: var(--measure); }

/* --------------------------------------------------------------------------
   15. Testimonials
   -------------------------------------------------------------------------- */
.quote-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-5);
  block-size: 100%;
}
.quote-mark { color: var(--gold-lite); flex: none; }
.quote-text { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.45; color: var(--ink); letter-spacing: -0.012em; }
.quote-foot { margin-block-start: auto; display: flex; align-items: center; gap: var(--sp-3); }
.avatar {
  inline-size: 48px; block-size: 48px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.05rem; color: #fff;
  background: linear-gradient(140deg, var(--navy-600), var(--navy-800));
}
.avatar--b { background: linear-gradient(140deg, #C9992F, #6B4E12); }
.avatar--c { background: linear-gradient(140deg, #3A5DA0, #14294E); }
.avatar--d { background: linear-gradient(140deg, #3F7A63, #1D4835); }
.avatar--lg { inline-size: 68px; block-size: 68px; font-size: 1.35rem; }

/* Doctor / consultant card */
.doc-head { display: flex; align-items: center; gap: var(--sp-4); margin-block-end: var(--sp-5); }
.doc-name { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.015em; }
.doc-role { font-size: var(--fs-xs); color: var(--navy-700); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-block-start: 4px; }
.doc-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-4); margin-block-start: var(--sp-5); padding-block-start: var(--sp-5); border-block-start: 1px solid var(--line-2); }
.doc-stat-num { font-family: var(--font-display); font-size: 1.5rem; color: var(--navy-700); line-height: 1; font-variant-numeric: tabular-nums; }
.doc-stat-lbl { font-size: var(--fs-xs); color: var(--ink-3); margin-block-start: 6px; }

/* Hospital feature row */
.hosp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
.hosp:nth-child(even) .hosp-media { order: 2; }
@media (max-width: 860px) { .hosp, .hosp:nth-child(even) .hosp-media { grid-template-columns: minmax(0,1fr); order: 0; } }
.hosp + .hosp { margin-block-start: var(--sp-8); padding-block-start: var(--sp-8); border-block-start: 1px solid var(--line); }
.badge-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-4); }
.quote-name { font-weight: 600; font-size: var(--fs-sm); }
.quote-where { font-size: var(--fs-xs); color: var(--ink-3); display: flex; align-items: center; gap: var(--sp-2); }
.flag {
  inline-size: 20px; block-size: 14px; border-radius: 2px; flex: none;
  border: 1px solid rgba(0,0,0,.08);
}

/* --------------------------------------------------------------------------
   16. Media / article
   -------------------------------------------------------------------------- */
.figure {
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--ivory-2); box-shadow: var(--e-2);
  aspect-ratio: 4 / 3;
}
.figure svg, .figure img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.figure--tall { aspect-ratio: 3 / 4; }
.figure--wide { aspect-ratio: 16 / 9; }

.post-card {
  display: flex; flex-direction: column; block-size: 100%;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.post-card:hover, .post-card:focus-within { transform: translateY(-4px); box-shadow: var(--e-3); }
.post-thumb { aspect-ratio: 16 / 10; background: var(--ivory-2); overflow: hidden; }
.post-thumb svg, .post-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out); }
.post-card:hover .post-thumb svg, .post-card:hover .post-thumb img { transform: scale(1.04); }
.post-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.post-body h3 { font-size: 1.25rem; }
.post-body a { text-decoration: none; }
.post-foot { margin-block-start: auto; padding-block-start: var(--sp-4); border-block-start: 1px solid var(--line-2); }

/* --------------------------------------------------------------------------
   17. Tables
   -------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--white); }
table.data { inline-size: 100%; border-collapse: collapse; min-inline-size: 40rem; font-size: var(--fs-sm); }
table.data th, table.data td { padding: var(--sp-4) var(--sp-5); text-align: start; border-block-end: 1px solid var(--line-2); }
table.data thead th { background: var(--ivory); font-weight: 600; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
table.data tbody tr:last-child td { border-block-end: 0; }
table.data tbody tr { transition: background-color var(--dur-1) var(--ease-out); }
table.data tbody tr:hover { background: var(--navy-50); }
table.data td.num { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
table.data .save { color: var(--success); font-weight: 700; }

/* --------------------------------------------------------------------------
   18. CTA band + footer
   -------------------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; background: var(--navy-800); color: var(--on-dark); }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 120% at 82% 0%, rgba(58,93,160,.45), transparent 62%);
}
.cta-band > * { position: relative; }

.footer { background: var(--navy-950); color: var(--on-dark-mute); padding-block: var(--sp-9) var(--sp-6); font-size: var(--fs-sm); }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--sp-7) var(--sp-6); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: minmax(0,1fr); } }
.footer h4 { color: #fff; font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; margin-block-end: var(--sp-4); }
.footer ul { list-style: none; padding: 0; display: grid; gap: var(--sp-1); }
.footer a { color: var(--on-dark-mute); text-decoration: none; display: inline-flex; align-items: center; min-block-size: 36px; transition: color var(--dur-2) var(--ease-out); }
.footer a:hover { color: #fff; }
.footer .brand-name { color: #fff; }
.footer .brand-sub { color: var(--on-dark-mute); }
.footer-bottom {
  margin-block-start: var(--sp-8); padding-block-start: var(--sp-5);
  border-block-start: 1px solid rgba(255,255,255,.10);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between;
  font-size: var(--fs-xs);
}
.footer-legal { max-width: 60ch; color: #8FA0BE; line-height: 1.6; }

/* --------------------------------------------------------------------------
   19. Page header (interior pages)
   -------------------------------------------------------------------------- */
.pagehead { position: relative; overflow: hidden; background: var(--navy-900); color: var(--on-dark); padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) clamp(3rem, 2.5rem + 3.5vw, 5rem); }
.pagehead::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 110% at 88% 6%, rgba(58,93,160,.42), transparent 60%);
}
.pagehead > * { position: relative; }
.pagehead h1 { color: #fff; }
.pagehead .lead { color: var(--on-dark-mute); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); list-style: none; padding: 0; margin-block-end: var(--sp-5); font-size: var(--fs-xs); }
.crumbs a { color: var(--on-dark-mute); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs li[aria-current] { color: #fff; }
.crumbs .sep { color: rgba(255,255,255,.35); }

/* --------------------------------------------------------------------------
   20. Motion engine
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  /* Deliberately no will-change. There are ~60 of these on the homepage, and
     hinting them all promotes ~60 compositor layers before a single one has
     entered the viewport — enough to lock up a mid-range machine. A one-shot
     opacity/transform transition composites fine without the hint. */
}
[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translate3d(-28px, 0, 0); }
[data-reveal="right"] { transform: translate3d(28px, 0, 0); }
[data-reveal="scale"] { transform: scale(.96); }

/* Every [data-reveal] / [data-clip] element on the site depends on
   IntersectionObserver + site.js finishing execution to ever reach
   opacity:1 / an unclipped state — that's ~60 elements per page, hidden by
   default. A slow device, a slow/blocked site.js fetch, or a stale cached
   copy left content permanently invisible on a real visitor's browser: the
   hero rendered (see below), then the very next section was a blank white
   gap, because everything in it was still sitting at opacity:0 waiting for
   JS that had already run (or errored) before the page was even visible.
   These animations replay the identical motion in pure CSS, so every
   reveal fires on its own regardless of JS timing; the JS-driven .is-in
   class (and its stagger delays, still assigned via the same --reveal-delay
   / --line-delay custom properties) layers on top as a no-op once these
   have already finished, or provides the delay value these read if JS does
   run in time. Below-the-fold content no longer waits for scroll to
   reveal itself — reliability wins over the scroll-triggered stagger. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    animation: heroRevealFade var(--dur-4) var(--ease-out) both;
    animation-delay: var(--reveal-delay, 0ms);
  }
  [data-reveal]:not([data-reveal="fade"]) {
    animation-name: heroRevealRise;
  }
  .hero-title .line > span {
    animation: heroLineRise 1150ms var(--ease-soft) both;
    animation-delay: var(--line-delay, 0ms);
  }
  [data-clip] > img, [data-clip] > svg {
    animation: clipReveal 1000ms var(--ease-soft) both;
    animation-delay: var(--reveal-delay, 0ms);
  }
}
@keyframes heroRevealFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroRevealRise {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroLineRise {
  from { transform: translate3d(0, 108%, 0); }
  to   { transform: none; }
}
@keyframes clipReveal {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Below the tablet breakpoint a horizontal slide both reads poorly and
   pushes the pre-reveal element past the viewport edge, widening the
   document. Degrade to the vertical reveal on narrow screens. */
@media (max-width: 860px) {
  [data-reveal="left"], [data-reveal="right"] { transform: translate3d(0, 22px, 0); }
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Clip reveal for hero/feature imagery.
   The clip lives on the child, never on the observed element itself:
   Chrome factors clip-path into IntersectionObserver, so a fully clipped
   target reports zero intersection and would never fire its own reveal. */
[data-clip] > img,
[data-clip] > svg {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1000ms var(--ease-soft);
}
[data-clip].is-in > img,
[data-clip].is-in > svg { clip-path: inset(0 0 0 0); }

.parallax { will-change: transform; }

/* Global honour of reduced-motion — everything above degrades to instant. */
@media (prefers-reduced-motion: reduce) {
  *, *::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; }
  .hero-title .line > span { transform: none !important; }
  [data-clip] > img, [data-clip] > svg { clip-path: none !important; }
  .marquee-track { animation: none; transform: none; }
  .compare-fill { transition: none; }
}

/* --------------------------------------------------------------------------
   21. Utilities
   -------------------------------------------------------------------------- */
.flow-sm > * + * { margin-block-start: var(--sp-3); }
.mt-4 { margin-block-start: var(--sp-4); }
.mt-5 { margin-block-start: var(--sp-5); }
.mt-6 { margin-block-start: var(--sp-6); }
.mt-7 { margin-block-start: var(--sp-7); }
.mb-6 { margin-block-end: var(--sp-6); }
.mb-7 { margin-block-end: var(--sp-7); }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.wrap-flex { flex-wrap: wrap; }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.full { inline-size: 100%; }
.rel { position: relative; }
.hide-sm { display: initial; }
@media (max-width: 640px) { .hide-sm { display: none; } }

.section-head { max-width: 44rem; margin-block-end: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head p { margin-block-start: var(--sp-4); }

.divider { block-size: 1px; background: var(--line); border: 0; }

/* --------------------------------------------------------------------------
   22. RTL / Arabic typography
   Lives last on purpose: these are directional overrides and must outrank the
   component rules above them at equal specificity.
   -------------------------------------------------------------------------- */

/* Fraunces carries no Arabic glyphs, so display type in RTL would otherwise
   drop to whatever system serif the OS happens to pick. Arabic has no
   serif/sans distinction to trade on anyway — hierarchy comes from size and
   weight instead. Tight tracking and italics are both reset: they damage a
   connected script. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .hero h1, [dir="rtl"] .display,
[dir="rtl"] .brand-name, [dir="rtl"] .quote-text, [dir="rtl"] .stat-num,
[dir="rtl"] .doc-name, [dir="rtl"] .estimator-saving, [dir="rtl"] .hero-badge-num,
[dir="rtl"] .step-num, [dir="rtl"] .drawer-links a, [dir="rtl"] .serif-accent,
[dir="rtl"] .acc-btn, [dir="rtl"] .step-body h3, [dir="rtl"] .post-body h3 {
  font-family: var(--font-arabic);
  letter-spacing: 0;
  font-style: normal;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .hero h1, [dir="rtl"] .display,
[dir="rtl"] .quote-text, [dir="rtl"] .doc-name {
  font-weight: 600;
  line-height: 1.35;   /* Arabic ascenders and marks need more leading */
}
[dir="rtl"] .hero h1 em, [dir="rtl"] .serif-accent {
  font-style: normal; font-weight: 400; color: var(--navy-700);
}
/* The eyebrow rule is decorative and reads as a stray dash before RTL text. */
[dir="rtl"] .eyebrow { letter-spacing: 0.06em; }

/* Print: strip chrome, keep content legible */
@media print {
  .header, .topbar, .drawer, .drawer-scrim, .marquee, .cta-band { display: none !important; }
  body { background: #fff; color: #000; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}