@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&display=swap');
/* ===================================================================
   HOLISTIX — V2 EXPERIENCE LAYER
   Applies the executive review items on top of the existing design
   system. Loaded last so it wins on specificity without touching the
   original stylesheets.
   =================================================================== */

/* ------------------------------------------------------------------
   3 · 12 — COMPACT, ALWAYS-VISIBLE STICKY HEADER
   Header was 88px and only became visible after scrolling 40px.
   Now: shorter, glass background from the first pixel, logo always on.
   ------------------------------------------------------------------ */
:root{
  --nav-h:88px;            /* match v1's taller header so the logo fits */
  --nav-h-scrolled:72px;   /* v1's scrolled header height */
  --wa:#25d366;
  --hx-shadow:0 18px 60px rgba(0,0,0,.42);
}
@media(max-width:900px){:root{--nav-h:72px;--nav-h-scrolled:60px}}

.header{
  height:var(--nav-h);
}
/* v1: fully transparent header at the top (no glass bar). transition:none so
   the transparent value can't get stuck against the CDN-cached old rule; the
   solid bar returns on scroll via .header.scrolled below. */
.header:not(.scrolled){
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border-bottom:0!important;
  transition:none!important;
}
.header.scrolled{
  height:var(--nav-h-scrolled);
  /* scrolled bar EXACTLY like v1: glassy (not fully solid), blur, faint border,
     no drop shadow */
  background:rgba(17,17,17,.82)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:none!important;
}
/* 15 — logo always visible in the bar (was hidden until scroll on home) */
.header .logo,
.header.scrolled .logo{visibility:visible!important}
/* logo exactly like v1: 64px in the 88px header (fits, no clipping).
   !important beats the CDN-cached old 46px rule; transition:none avoids the
   height-transition getting stuck against that cached rule. */
.header .logo-img{height:64px!important;transition:none!important}
.header.scrolled .logo-img{height:52px!important}
@media(max-width:680px){.header .logo-img{height:52px!important}.header.scrolled .logo-img{height:44px!important}}

/* English homepage nav keeps its original compact size (12px, .16em) */
.nav{gap:26px}
.nav a{font-size:12px;letter-spacing:.16em}
@media(max-width:1180px){.nav{gap:18px}.nav a{font-size:11px;letter-spacing:.12em}}
/* Arabic homepage nav ONLY: match the inner Arabic pages (.hx-nav__menu):
   30px gap, 16px links, no letter-spacing. English is left untouched.
   NOTE: :not(.nav__cta) so the rule does NOT touch the book button (an <a>
   inside .nav) — it keeps its own pill padding; only its text is set to 12px
   to match the inner-page book button (.hx-nav__cta). */
html[dir="rtl"] .nav{gap:30px}
html[dir="rtl"] .nav a:not(.nav__cta){font-size:16px;letter-spacing:normal}
html[dir="rtl"] .nav .nav__cta{font-size:12px;letter-spacing:normal;padding:12px 24px}
/* separate the actions group (EN / theme toggle / book button) from the menu
   links with a gap — mirrors the inner pages' space-between layout so the book
   button isn't crammed against the last menu link */
html[dir="rtl"] .nav .lang-switch{margin-inline-start:120px}
@media(max-width:1180px){html[dir="rtl"] .nav{gap:22px}html[dir="rtl"] .nav a:not(.nav__cta){font-size:14px}html[dir="rtl"] .nav .lang-switch{margin-inline-start:50px}}

/* ------------------------------------------------------------------
   15 — HERO LOGO SHRINKS AND SETTLES DOWNWARD ON SCROLL
   ------------------------------------------------------------------ */
.hero-logo img{
  transform:scale(var(--hx-logo-scale,1)) translateY(var(--hx-logo-shift,0px));
  transform-origin:center top;
  transition:opacity .4s var(--ease);
  opacity:var(--hx-logo-op,1);
  will-change:transform,opacity;
}

/* ------------------------------------------------------------------
   2 — THEME TOGGLE (day / night) — prominent, in the header
   ------------------------------------------------------------------ */
.hx-theme{
  --sz:36px;
  width:var(--sz);height:var(--sz);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.05);
  color:var(--accent);
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
  flex:0 0 auto;
}
.hx-theme:hover{background:var(--accent-soft);border-color:var(--accent);transform:rotate(-18deg)}
.hx-theme svg{width:17px;height:17px}
.hx-theme .ico-sun{display:none}
body.theme-light .hx-theme .ico-sun{display:block}
body.theme-light .hx-theme .ico-moon{display:none}
.nav .hx-theme{margin-left:2px}
/* mobile: keep the toggle reachable next to the burger */
.hx-theme--mobile{display:none}
@media(max-width:900px){
  .nav .hx-theme{display:none}
  .hx-theme--mobile{display:inline-flex;margin-inline-end:10px}
  .header__inner{gap:10px}
}

/* ---------- LIGHT THEME TOKENS ---------- */
body.theme-light{
  --bg:#f7f5f1;
  --bg-2:#ffffff;
  --bg-3:#f1ede6;
  --text:#1b1b1b;
  --muted:#5f5b54;
  --line:rgba(0,0,0,.10);
  --line-strong:rgba(0,0,0,.18);
  --accent:#9c7f4a;
  --accent-soft:rgba(156,127,74,.12);
  --hx-shadow:0 18px 50px rgba(60,50,30,.14);
  background:var(--bg);color:var(--text);
}
body.theme-light .header{background:rgba(255,255,255,.72);border-bottom-color:rgba(0,0,0,.08)}
body.theme-light .header.scrolled{background:rgba(255,255,255,.94);box-shadow:0 10px 34px rgba(60,50,30,.12)}
body.theme-light .hx-theme{background:rgba(0,0,0,.04)}
body.theme-light ::-webkit-scrollbar-track{background:var(--bg)}
body.theme-light ::-webkit-scrollbar-thumb{background:#d9d2c5}
body.theme-light ::selection{background:var(--accent);color:#fff}
/* dark panels that are hardcoded stay legible in light mode */
body.theme-light .footer,
body.theme-light .cta-band,
body.theme-light .hx-exp2{background:#141414;color:#f5f5f5}
body.theme-light .footer *,
body.theme-light .cta-band *,
body.theme-light .hx-exp2 *{color:inherit}
body.theme-light .footer a:hover{color:#c8b28a}
/* the hero keeps its cinematic dark treatment in both themes */
body.theme-light .arch-hero{color:#f5f5f5}

/* ------------------------------------------------------------------
   6 — BUTTON HIERARCHY (primary / secondary / ghost)
   Every CTA looked identical; now the eye has somewhere to go.
   ------------------------------------------------------------------ */
.btn{transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn-primary,
.nav__cta{
  background:linear-gradient(135deg,#e2cfa4,#c8b28a 45%,#b39a6d);
  color:#151515!important;border:1px solid transparent;font-weight:500;
  box-shadow:0 8px 26px rgba(200,178,138,.22);
}
.btn-primary:hover,
.nav__cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(200,178,138,.34)}
.btn-secondary{
  background:transparent;color:var(--text);
  border:1px solid var(--line-strong);
}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.btn-ghost{
  background:none;border:none;padding-inline:0;color:var(--accent);
  border-bottom:1px solid rgba(200,178,138,.4);border-radius:0;
}
.btn-ghost:hover{border-bottom-color:var(--accent)}
.nav__cta{padding:9px 20px;font-size:11.5px}

/* ------------------------------------------------------------------
   7 — FLOATING WHATSAPP + BOOK RAIL (10 — booking always one tap away)
   ------------------------------------------------------------------ */
.hx-float{
  position:fixed;right:20px;bottom:22px;z-index:1200;
  display:flex;flex-direction:column;gap:12px;align-items:flex-end;
}
html[dir="rtl"] .hx-float{right:auto;left:20px;align-items:flex-start}
.hx-float a{
  display:inline-flex;align-items:center;gap:10px;
  height:54px;padding:0 18px;border-radius:999px;
  font-family:var(--display);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:var(--hx-shadow);white-space:nowrap;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),width .35s var(--ease);
}
.hx-float a:hover{transform:translateY(-3px)}
.hx-float svg{width:22px;height:22px;flex:0 0 auto}
.hx-wa{background:var(--wa);color:#fff}
.hx-book{background:linear-gradient(135deg,#e2cfa4,#c8b28a 45%,#b39a6d);color:#151515}
/* pulse ring on the WhatsApp button so it reads as "live" */
.hx-wa::before{
  content:"";position:absolute;inset:0;border-radius:999px;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:hxPulse 2.6s infinite;
}
.hx-wa{position:relative}
@keyframes hxPulse{70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media(max-width:680px){
  .hx-float{right:14px;bottom:14px;gap:10px}
  html[dir="rtl"] .hx-float{left:14px;right:auto}
  .hx-float a{height:50px;padding:0 15px;font-size:0}
  .hx-float a svg{width:24px;height:24px}
}
@media(prefers-reduced-motion:reduce){.hx-wa::before{animation:none}}

/* ------------------------------------------------------------------
   13 — WHITE SPACE / BREATHING ROOM
   ------------------------------------------------------------------ */
.section{padding-block:clamp(84px,11vw,168px)}
.section + .section{padding-top:clamp(72px,9vw,140px)}
.section .container > * + *{margin-top:revert-layer}

/* ------------------------------------------------------------------
   9 · 11 — TRUST BAR (stats) AND GOOGLE-LINKED REVIEWS
   ------------------------------------------------------------------ */
.hx-trust{
  border-block:1px solid var(--line);
  background:linear-gradient(180deg,rgba(200,178,138,.05),transparent);
  padding-block:clamp(34px,4.5vw,58px);
}
.hx-trust__grid{
  max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,44px);
}
@media(max-width:860px){.hx-trust__grid{grid-template-columns:repeat(2,1fr);gap:28px}}
.hx-trust__item{text-align:center}
.hx-trust__n{
  font-family:var(--display);font-weight:200;
  font-size:clamp(30px,4.4vw,54px);line-height:1;color:var(--accent);
  display:flex;align-items:baseline;justify-content:center;gap:2px;
}
.hx-trust__l{
  margin-top:10px;font-family:var(--display);font-size:11.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.hx-trust__stars{color:var(--accent);letter-spacing:.16em;font-size:15px}

.hx-google{
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 20px;border:1px solid var(--line-strong);border-radius:999px;
  background:rgba(255,255,255,.03);transition:border-color .35s var(--ease),background .35s var(--ease);
}
.hx-google:hover{border-color:var(--accent);background:var(--accent-soft)}
.hx-google svg{width:20px;height:20px}
.hx-google b{font-family:var(--display);font-weight:400;color:var(--accent)}
.hx-google span{font-size:12.5px;color:var(--muted)}

/* ------------------------------------------------------------------
   14 · 18 — IDENTITY LINE IN THE FIRST SCREEN
   ------------------------------------------------------------------ */
.hx-identity{
  display:inline-flex;align-items:center;gap:12px;
  padding:8px 18px;margin-bottom:20px;border-radius:999px;
  border:1px solid rgba(200,178,138,.42);
  background:rgba(20,20,20,.42);backdrop-filter:blur(8px);
  font-family:var(--display);font-size:11.5px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:#e9dcc0;
}
.hx-identity img{width:18px;height:18px;opacity:.95}
@media(max-width:680px){.hx-identity{font-size:9.5px;letter-spacing:.14em;padding:7px 13px;gap:8px}}

/* ------------------------------------------------------------------
   16 — BRAND MARKS AS SECTION ORNAMENT
   ------------------------------------------------------------------ */
.hx-mark{display:block;margin:0 auto 18px;width:46px;height:46px;opacity:.9}
.hx-mark--sm{width:30px;height:30px;margin-bottom:12px}

/* ------------------------------------------------------------------
   5 — SPECIALTY CARDS WITH REAL VISUAL WEIGHT
   ------------------------------------------------------------------ */
.hx-spec-grid{
  max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(16px,2vw,26px);
}
.hx-spec{
  position:relative;overflow:hidden;border-radius:4px;
  min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid var(--line);isolation:isolate;
  transition:transform .55s var(--ease),border-color .55s var(--ease);
}
.hx-spec:hover{transform:translateY(-6px);border-color:rgba(200,178,138,.45)}
.hx-spec__img{position:absolute;inset:0;z-index:-2}
.hx-spec__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.hx-spec:hover .hx-spec__img img{transform:scale(1.07)}
.hx-spec::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,10,.05) 30%,rgba(10,10,10,.78) 78%,rgba(10,10,10,.94));
}
.hx-spec__body{padding:24px 24px 26px;color:#f5f5f5}
.hx-spec__icon{
  width:40px;height:40px;margin-bottom:14px;display:grid;place-items:center;
  border:1px solid rgba(200,178,138,.5);border-radius:50%;color:#e0cca1;
}
.hx-spec__icon svg{width:19px;height:19px}
.hx-spec h3{font-size:22px;font-weight:300;letter-spacing:.01em;margin-bottom:8px}
.hx-spec p{font-size:13.5px;line-height:1.65;color:rgba(245,245,245,.72);margin-bottom:14px}
.hx-spec__go{
  font-family:var(--display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:#e0cca1;display:inline-flex;align-items:center;gap:8px;
}
.hx-spec__go .arrow{transition:transform .4s var(--ease)}
.hx-spec:hover .hx-spec__go .arrow{transform:translateX(5px)}
html[dir="rtl"] .hx-spec:hover .hx-spec__go .arrow{transform:translateX(-5px)}

/* ------------------------------------------------------------------
   8 — DOCTORS: EXPERIENCE + DIRECT BOOKING ON THE CARD
   ------------------------------------------------------------------ */
.hx-doc-exp{
  display:inline-flex;align-items:center;gap:7px;margin-top:8px;
  font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);
}
.hx-doc-exp::before{content:"";width:14px;height:1px;background:var(--accent);display:block}
.hx-doc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.hx-doc-actions .btn{font-size:11px;padding:9px 16px}

/* ------------------------------------------------------------------
   GENERAL MANAGER SECTION
   ------------------------------------------------------------------ */
.hx-gm{
  background:linear-gradient(180deg,var(--bg-3),var(--bg));
  border-block:1px solid var(--line);
  padding-block:clamp(80px,10vw,150px);
}
.hx-gm__wrap{
  max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:minmax(280px,.85fr) 1.15fr;
  gap:clamp(30px,5vw,80px);align-items:center;
}
@media(max-width:900px){.hx-gm__wrap{grid-template-columns:1fr;gap:36px}}
.hx-gm__photo{position:relative}
.hx-gm__photo img{
  width:100%;border-radius:3px;filter:grayscale(.12) contrast(1.03);
  box-shadow:var(--hx-shadow);
}
.hx-gm__photo::after{
  content:"";position:absolute;inset:14px -14px -14px 14px;z-index:-1;
  border:1px solid rgba(200,178,138,.35);border-radius:3px;
}
html[dir="rtl"] .hx-gm__photo::after{inset:14px 14px -14px -14px}
.hx-gm__badge{
  position:absolute;left:0;bottom:0;transform:translate(-8%,32%);
  background:linear-gradient(135deg,#e2cfa4,#c8b28a 45%,#b39a6d);
  color:#151515;padding:12px 18px;border-radius:2px;max-width:78%;
  font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;
  box-shadow:0 14px 34px rgba(0,0,0,.35);
}
html[dir="rtl"] .hx-gm__badge{left:auto;right:0;transform:translate(8%,32%)}
@media(max-width:900px){.hx-gm__badge{position:static;transform:none;display:inline-block;margin-top:16px;max-width:100%}}
.hx-gm__role{
  font-family:var(--display);font-size:12px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.hx-gm h2{font-size:clamp(30px,4.2vw,52px);font-weight:200;margin-bottom:8px}
.hx-gm__name{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.2vw,26px);color:var(--muted);margin-bottom:26px}
.hx-gm p{color:var(--muted);font-size:15.5px;line-height:1.9;margin-bottom:16px;max-width:66ch}
.hx-gm__quote{
  margin-top:26px;padding-inline-start:22px;border-inline-start:2px solid var(--accent);
  font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.4vw,27px);
  line-height:1.5;color:var(--text);
}
.hx-gm__sig{
  margin-top:24px;font-family:var(--display);font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.hx-gm__tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.hx-gm__tab{
  padding:9px 18px;border:1px solid var(--line-strong);border-radius:999px;
  font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);transition:all .35s var(--ease);
}
.hx-gm__tab.is-on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.hx-gm__panel{display:none}
.hx-gm__panel.is-on{display:block;animation:hxFade .5s var(--ease)}
@keyframes hxFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------------
   17 — FOOTER MAP + ESTABLISHED 1999 + RIGHTS
   ------------------------------------------------------------------ */
.hx-footer-map{
  display:block;margin-top:18px;border:1px solid var(--line-strong);border-radius:3px;
  overflow:hidden;position:relative;transition:border-color .4s var(--ease);
}
.hx-footer-map:hover{border-color:var(--accent)}
.hx-footer-map img{width:100%;height:150px;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.85);transition:filter .5s var(--ease)}
.hx-footer-map:hover img{filter:grayscale(.2) contrast(1.05) brightness(1)}
.hx-footer-map__tag{
  position:absolute;left:12px;bottom:12px;
  background:rgba(14,14,14,.78);backdrop-filter:blur(6px);
  padding:7px 12px;border-radius:2px;
  font-family:var(--display);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#e9dcc0;
}
html[dir="rtl"] .hx-footer-map__tag{left:auto;right:12px}
.hx-est{
  display:inline-flex;align-items:center;gap:10px;margin-top:14px;
  font-family:var(--display);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);
}
.hx-est::before,.hx-est::after{content:"";width:18px;height:1px;background:rgba(200,178,138,.5)}
.footer__bottom{flex-wrap:wrap;gap:10px}

/* ------------------------------------------------------------------
   RTL polish for the new components
   ------------------------------------------------------------------ */
html[dir="rtl"] .hx-trust__item,
html[dir="rtl"] .hx-spec__body{text-align:right}
html[dir="rtl"] .hx-doc-exp::before{order:2}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  .hx-spec,.hx-spec__img img,.btn,.hx-float a{transition:none!important}
}

/* ------------------------------------------------------------------
   14 — HERO TYPOGRAPHY: static headline + rotating space caption
   ------------------------------------------------------------------ */
.hx-hero-h1{
  font-family:var(--display);font-weight:200;
  font-size:clamp(30px,5.4vw,74px);line-height:1.06;letter-spacing:-.015em;
  max-width:19ch;margin:0 auto 20px;color:#fff;
}
html[dir="rtl"] .hx-hero-h1{max-width:22ch;line-height:1.28;font-weight:600;font-size:clamp(25px,4.4vw,60px)}
.arch-hero__desc{max-width:60ch;margin-inline:auto}
.arch-hero__slidecap{
  display:block;margin-top:26px;
  font-family:var(--display);font-size:11px;font-weight:400;
  letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.62);
}
.arch-hero__slidecap::before{content:"";display:inline-block;width:26px;height:1px;
  background:rgba(200,178,138,.7);vertical-align:middle;margin-inline-end:12px}
@media(max-width:680px){.hx-hero-h1{font-size:clamp(25px,7.4vw,36px);max-width:18ch}.arch-hero__slidecap{font-size:9.5px;letter-spacing:.24em}}

/* trust bar sits directly under the hero — tighten its top edge */
.hx-trust{margin-top:0}

/* ------------------------------------------------------------------
   HERO LAYOUT CORRECTIONS (v2)
   The headline is a sentence now, not a two-word slide title, so it
   must not inherit the uppercase + wide tracking treatment.
   ------------------------------------------------------------------ */
.arch-hero__inner{padding-block:calc(var(--nav-h) + 26px) 132px}
.hx-hero-h1{
  text-transform:none;letter-spacing:-.01em;
  font-size:clamp(26px,3.5vw,52px);line-height:1.12;max-width:23ch;
}
html[dir="rtl"] .hx-hero-h1{font-size:clamp(23px,3.1vw,46px);line-height:1.35;max-width:26ch}
@media(max-width:900px){.hx-hero-h1{font-size:clamp(23px,4.6vw,32px);max-width:20ch}}

/* 15 — the crest sits above the headline, smaller, and drops away on scroll */
.arch-hero__counter{
  position:relative!important;left:auto!important;top:auto!important;
  background:none!important;min-height:0!important;padding:0!important;
  display:flex;justify-content:center;
  margin-top:calc(var(--nav-h) + 22px);z-index:3;
}
.hero-logo img{height:clamp(78px,8vw,112px)!important}
/* the header logo only appears once the hero crest has scrolled away,
   so the mark is never duplicated on screen */
.arch-hero ~ * .header .logo{visibility:visible}
body.has-hero-logo .header .logo{visibility:hidden}
body.has-hero-logo .header.scrolled .logo{visibility:visible}

/* hero slider controls move opposite the floating rail so nothing overlaps */
.arch-hero__nav{
  right:auto!important;left:clamp(24px,4vw,56px)!important;
  bottom:clamp(22px,3vw,34px)!important;top:auto!important;
}
html[dir="rtl"] .arch-hero__nav{left:auto!important;right:clamp(24px,4vw,56px)!important}
@media(max-width:680px){.arch-hero__nav{left:50%!important;right:auto!important;transform:translateX(-50%)}
  html[dir="rtl"] .arch-hero__nav{right:50%!important;left:auto!important;transform:translateX(50%)}}

/* keep the identity chip clear of the fixed header */
.hx-identity{margin-top:6px}

/* hero headline must beat `.arch-hero h1` (element+class) specificity */
.arch-hero .hx-hero-h1{
  text-transform:none;letter-spacing:-.012em;
  font-size:clamp(26px,3.4vw,50px);line-height:1.14;max-width:23ch;
  margin:18px auto 0;font-weight:200;
}
html[dir="rtl"] .arch-hero .hx-hero-h1{font-size:clamp(22px,3vw,44px);line-height:1.4;max-width:26ch;font-weight:600}
@media(max-width:900px){.arch-hero .hx-hero-h1{font-size:clamp(22px,4.4vw,30px);max-width:20ch}}
.arch-hero .arch-hero__desc{margin-top:18px}
.arch-hero .arch-hero__cta{margin-top:30px}
/* crest now lives inside the hero column */
.arch-hero .hero-logo{display:block;margin:0 auto 14px}
.arch-hero .hero-logo img{height:clamp(72px,7vw,104px)!important;margin:0 auto}
.arch-hero__inner{padding-block:calc(var(--nav-h) + 34px) 118px}

/* identity chip: brand diamond instead of an inline image */
.hx-identity::before{
  content:"";width:7px;height:7px;flex:0 0 auto;
  background:linear-gradient(135deg,#e6d3a6,#b39a6d);transform:rotate(45deg);
}
.arch-hero .hero-logo{margin-bottom:26px}
.hx-identity{margin-bottom:8px}

/* ==================================================================
   3 · 12 — INNER PAGES USE A SECOND NAV SYSTEM (.hx-nav).
   Same treatment: shorter, glass from the first pixel, smaller logo.
   ================================================================== */
.hx-nav{
  padding:9px 0;
  background:rgba(14,14,14,.55);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hx-nav.is-scrolled{padding:6px 0;background:rgba(14,14,14,.92);box-shadow:0 10px 40px rgba(0,0,0,.45)}
/* inner-page header logo: 64px to match the homepage / v1 */
.hx-nav__logo img{height:64px!important;transition:none!important}
.hx-nav.is-scrolled .hx-nav__logo img{height:52px!important}
@media(max-width:680px){.hx-nav__logo img{height:52px!important}.hx-nav.is-scrolled .hx-nav__logo img{height:44px!important}}
.hx-nav__right{display:flex;align-items:center;gap:12px}
.hx-nav__cta{
  background:linear-gradient(135deg,#e2cfa4,#c8b28a 45%,#b39a6d)!important;
  color:#151515!important;border-color:transparent!important;
  box-shadow:0 8px 26px rgba(200,178,138,.22);
}
body.theme-light .hx-nav{background:rgba(255,255,255,.72);border-bottom-color:rgba(0,0,0,.08)}
body.theme-light .hx-nav.is-scrolled{background:rgba(255,255,255,.94);box-shadow:0 10px 34px rgba(60,50,30,.12)}
body.theme-light .hx-nav__menu a,body.theme-light .hx-lang{color:#1b1b1b}
/* page heroes on inner pages must clear the fixed bar */
.hx-hero,.page-hero,.h2ro{scroll-margin-top:90px}

/* the hero stays cinematic in light mode, so its controls must stay light */
body.theme-light .arch-hero .btn-secondary,
body.theme-light .arch-hero .arch-nav-btn,
body.theme-light .arch-hero__slidecap,
body.theme-light .arch-hero .hero-count{color:#fff;border-color:rgba(255,255,255,.38)}
body.theme-light .arch-hero .btn-secondary:hover{color:#f0dfae;border-color:#e2cfa4;background:rgba(255,255,255,.08)}
body.theme-light .arch-hero__desc{color:#fff}
body.theme-light .arch-side .vtxt,body.theme-light .arch-side a{color:rgba(255,255,255,.8)}
/* page heroes on inner pages are image-backed too */
body.theme-light .h2ro,body.theme-light .h2ro *{color:#f5f5f5}

/* doctor credential line reads better centred, without the rule */
.mdoc .hx-doc-exp{display:block;text-align:center;font-size:10px;letter-spacing:.1em;
  line-height:1.6;color:var(--muted);margin-top:6px;text-transform:none}
.mdoc .hx-doc-exp::before{display:none}
.mdoc .hx-doc-actions{justify-content:center}

/* ==================================================================
   ROUND 2 — client feedback
   a) hero: one big line, one smaller line under it, centred, no paragraph
   b) fewer repeated "Book" calls to action
   c) justified body text
   d) less empty space between sections
   ================================================================== */

/* ---- a) HERO ---------------------------------------------------- */
.arch-hero .hx-hero-h1{
  display:block;text-align:center;text-transform:none;
  margin:14px auto 0;max-width:none;
}
.arch-hero .hx-hero-h1 .l1{
  display:block;
  font-size:clamp(34px,6.2vw,92px);
  line-height:1.02;font-weight:200;letter-spacing:-.02em;
  white-space:nowrap;                 /* the big line never wraps */
}
.arch-hero .hx-hero-h1 .l2{
  display:block;margin-top:10px;
  font-size:clamp(15px,1.9vw,27px);
  line-height:1.3;font-weight:300;letter-spacing:.02em;
  color:rgba(255,255,255,.82);
}
html[dir="rtl"] .arch-hero .hx-hero-h1 .l1{font-weight:600;font-size:clamp(32px,5.6vw,84px);line-height:1.18}
html[dir="rtl"] .arch-hero .hx-hero-h1 .l2{font-weight:400;font-size:clamp(15px,1.8vw,26px)}
@media(max-width:680px){
  .arch-hero .hx-hero-h1 .l1{font-size:clamp(28px,8.6vw,42px)}
  .arch-hero .hx-hero-h1 .l2{font-size:clamp(13px,3.9vw,17px)}
}
.arch-hero .arch-hero__cta{margin-top:28px}
.arch-hero__inner{padding-block:calc(var(--nav-h) + 26px) 96px}
.arch-hero .hero-logo{margin-bottom:20px}

/* ---- b) NO FLOATING BOOK BUBBLE — WhatsApp only ------------------ */
.hx-float .hx-book{display:none!important}

/* ---- c) JUSTIFIED BODY TEXT -------------------------------------- */
p,
.lead,
.spec-stmt p,
.hx-gm p,
.hx-w p,
.hx-step p,
.hx-tq p,
.hx-spec p,
.mdoc p,
.footer__brand p,
.fbrand p{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}
html[dir="rtl"] p,
html[dir="rtl"] .lead{text-align:justify;hyphens:none;-webkit-hyphens:none}
/* things that must NOT be justified */
.hx-trust p,.hx-trust__l,
.arch-hero p,.arch-hero__desc,
.hx-identity,.eyebrow,.wm,
.cta-band p,.cta-band h2,
.hx-head p,
.mdoc .role,.mdoc .hx-doc-exp,
.hx-gm__role,.hx-gm__name,.hx-gm__sig,.hx-gm__quote,
.btn,.nav a,.hx-nav__menu a,
.footer__links a,.fcol a,.footer__bottom,.fbar,
figcaption,small,label,input,textarea,
.hx-testi .who,.hx-trust__n{
  text-align:inherit;
  hyphens:none;-webkit-hyphens:none;
}
.hx-head p,.cta-band p,.hx-trust__l{text-align:center}
/* single-line or short paragraphs look broken when justified */
p:last-child:first-child:not(:has(br)){text-align:justify}

/* ---- d) TIGHTER SECTION RHYTHM ----------------------------------- */
.section{padding-block:clamp(46px,5.6vw,88px)}
.section + .section{padding-top:clamp(38px,4.4vw,68px)}
.hx-gm{padding-block:clamp(48px,6vw,92px)}
.hx-trust{padding-block:clamp(26px,3vw,40px)}
.hx-pulse{padding:14px 0}
.sec-head{margin-bottom:clamp(26px,3vw,44px)!important}
.section .arch-h2{margin-bottom:clamp(22px,2.6vw,38px)}
.hx-head{margin-bottom:clamp(24px,3vw,42px)}
.cta-band{padding-block:clamp(56px,6.5vw,96px)}
/* the giant watermark words were driving much of the empty height */
.wm,.section-wm .wm{opacity:.5;font-size:clamp(70px,13vw,190px)}

/* per-doctor booking stays available but stops shouting — five gold buttons
   in a row read as the same CTA repeated five times */
.mdoc .hx-doc-book{
  background:linear-gradient(135deg,#e6d3a6,#c8b28a 45%,#b39a6d)!important;
  border:1px solid transparent!important;border-radius:40px!important;
  color:#151515!important;letter-spacing:.14em!important;
}
.mdoc .hx-doc-book:hover{
  color:#151515!important;border-bottom-color:transparent!important;
  background:linear-gradient(135deg,#efdcae,#d4bd8f 45%,#c0a878)!important;
  box-shadow:0 10px 26px rgba(200,178,138,.32)!important;transform:translateY(-1px)!important;
}
body.theme-light .mdoc .hx-doc-book{color:#151515!important}
/* hero buttons were touching — the theme's pill has its own margin */
.arch-hero__cta{gap:18px!important}
.arch-hero__cta .btn{margin:0!important}

/* the four differentiators left a dead half-row in a 3-column grid */
@media(min-width:1100px){.hx-why{grid-template-columns:repeat(4,1fr)!important}}
@media(min-width:700px) and (max-width:1099px){.hx-why{grid-template-columns:repeat(2,1fr)!important}}
.hx-why .hx-w{padding-block:clamp(20px,2.2vw,30px)}
/* trim the last of the dead air around centred section intros */
.hx-head p{margin-top:10px;max-width:74ch;margin-inline:auto}
.tiltgal-sec .container{margin-bottom:clamp(22px,2.4vw,36px)!important}
.numstats{padding-block:0}

/* ==================================================================
   ROUND 3 — button legibility + white text on hover (all buttons)
   The outline buttons rendered gold-on-dark (near-invisible); now they
   read at rest and every button turns its label WHITE on hover.
   ================================================================== */
/* rest state: outline/ghost buttons legible on dark */
.btn-secondary{color:#e9dcc0}
.btn-ghost,.hx-doc-book{color:#e0cca1}
.arch-hero .btn-secondary{color:#fff}

/* hover: white label on EVERY button variant */
.btn:hover,
.btn:hover .arrow,
.btn-primary:hover,
.btn-secondary:hover,
.btn-ghost:hover,
.hx-doc-book:hover,
.nav__cta:hover,
.hx-nav__cta:hover,
.btn-pill:hover,
.btn-solid:hover,
a.btn:hover,
a.btn:hover .arrow{color:#fff!important}

/* give each variant a background dark/rich enough that white reads */
.btn-secondary:hover{border-color:var(--accent);background:rgba(200,178,138,.20)}
.btn-ghost:hover,.hx-doc-book:hover{border-bottom-color:#fff}
/* primary is a light gold gradient — deepen it on hover so white is legible */
.btn-primary:hover,
.nav__cta:hover,
.hx-nav__cta:hover{
  background:linear-gradient(135deg,#8a7145,#6f5a34 55%,#5c4a2b);
  box-shadow:0 14px 34px rgba(0,0,0,.34)
}
/* light theme: keep the same white-on-hover behaviour readable */
body.theme-light .btn-secondary{color:#5c4a2b}
body.theme-light .btn-secondary:hover{background:#8a7145;border-color:#8a7145}

/* inner-page CTA band ("Start Your Health Journey") — center everything */
.section.cta{text-align:center}
.section.cta .container,
.section.cta h2,
.section.cta p,
.section.cta .eyebrow{text-align:center!important;hyphens:none;-webkit-hyphens:none}
.section.cta p{margin-inline:auto;max-width:64ch}
.section.cta .cta-btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

/* ==================================================================
   ROUND 4 — new hero headline sizing + fix the empty gold 2nd button
   ================================================================== */
/* the big line is longer now — size it to fit and wrap only on phones */
.arch-hero .hx-hero-h1 .l1{
  font-size:clamp(30px,5vw,74px);
  white-space:nowrap;
}
.arch-hero .hx-hero-h1 .l2{
  font-size:clamp(14px,1.7vw,24px);
  max-width:40ch;margin-inline:auto;
}
@media(max-width:820px){
  .arch-hero .hx-hero-h1 .l1{white-space:normal;font-size:clamp(26px,7vw,40px)}
}

/* the hero's second CTA rendered as a filled light-gold pill with no
   readable text — force a clean outline button, white label, on the photo */
.arch-hero__cta .btn-secondary,
.arch-hero .btn-pill.btn-secondary{
  background:transparent!important;
  border:1px solid rgba(255,255,255,.55)!important;
  color:#fff!important;
  box-shadow:none!important;
}
.arch-hero__cta .btn-secondary .arrow{color:#fff!important}
.arch-hero__cta .btn-secondary:hover,
.arch-hero .btn-pill.btn-secondary:hover{
  background:rgba(255,255,255,.14)!important;
  border-color:#fff!important;
  color:#fff!important;
}

/* ==================================================================
   ROUND 5 — section-head sub-paragraph MIRRORS its heading's alignment
   (left heading → left sub; centered heading → centered sub).
   ================================================================== */
.hx-head p{
  text-align:inherit!important;
  margin-inline:0!important;
  max-width:74ch;
  hyphens:none;-webkit-hyphens:none;
}
/* keep the genuinely-centered heads centered as a block */
.hx-head.center p,
.hx-head[data-align="center"] p{margin-inline:auto!important}

/* ==================================================================
   ROUND 6 — HOVER CONTRAST RULE (overrides the earlier blanket white)
   Principle: light text on dark backgrounds, dark text on light.
   • Gold / light-filled buttons (primary, solid)  → DARK label always.
   • Transparent / outline buttons on dark surfaces → LIGHT label,
     white on hover (their background stays dark/translucent).
   ================================================================== */

/* --- gold / light-filled buttons: dark text at rest AND on hover --- */
.btn-primary,.btn-primary:hover,
.nav__cta,.nav__cta:hover,
.hx-nav__cta,.hx-nav__cta:hover,
.btn.solid,.btn.solid:hover,
.btn-solid:not(.btn-secondary),
.btn-solid:not(.btn-secondary):hover,
.hx-book,.hx-book:hover{
  color:#151515!important;
}
.btn-primary:hover .arrow,.btn-primary:hover .arr,
.nav__cta:hover .arrow,
.btn.solid:hover .arrow,.btn.solid:hover .arr,
.btn-solid:not(.btn-secondary):hover .arrow{color:#151515!important}
/* keep their gold background steady on hover (no wash-out) */
.btn-primary:hover,.nav__cta:hover,.hx-nav__cta:hover,
.btn.solid:hover,.btn-solid:not(.btn-secondary):hover{
  background:linear-gradient(135deg,#e6d3a6,#c8b28a 45%,#b39a6d)!important;
  box-shadow:0 14px 34px rgba(200,178,138,.34)
}

/* --- transparent / outline buttons: white label on hover, dark bg --- */
.btn-secondary:hover,.btn-secondary:hover .arrow,
.btn-ghost:hover,
.hx-doc-book:hover,
.btn.ghost:hover,.btn.ghost:hover .arrow,.btn.ghost:hover .arr,
.arch-hero .btn-pill.btn-secondary:hover{color:#fff!important}
.btn-secondary:hover{background:rgba(200,178,138,.18);border-color:var(--accent)}
.btn.ghost:hover{background:rgba(255,255,255,.10);border-color:#fff}

/* --- LIGHT THEME: mirror the rule ------------------------------- */
/* light-bg outline button: dark text; fills with accent on hover → light text */
body.theme-light .btn-secondary{color:#5c4a2b}
body.theme-light .btn-secondary:hover,
body.theme-light .btn-secondary:hover .arrow{color:#fff!important;background:#8a7145;border-color:#8a7145}
body.theme-light .btn-ghost,body.theme-light .hx-doc-book{color:#7a6338}
body.theme-light .btn-ghost:hover,body.theme-light .hx-doc-book:hover{color:#3a2f18!important;border-bottom-color:#3a2f18}

/* ROUND 5b — section heads: heading is left, so keep the sub LEFT too
   (inherit resolved to the container's center; force explicit left). */
.hx-head,
.hx-head .eyebrow,
.hx-head h2,
.hx-head .arch-h2,
.hx-head p{ text-align:left!important }
.hx-head p{ margin-inline:0!important; max-width:74ch }
html[dir="rtl"] .hx-head,
html[dir="rtl"] .hx-head .eyebrow,
html[dir="rtl"] .hx-head h2,
html[dir="rtl"] .hx-head .arch-h2,
html[dir="rtl"] .hx-head p{ text-align:right!important }

/* ==================================================================
   ROUND 7 — homepage closing CTA restyled to the elegant inner style
   (sentence-case Jost, right-sized — not the oversized uppercase serif)
   + lock header CTA to dark-on-gold in every state (EN + AR).
   ================================================================== */
.cta-band .eyebrow{margin-bottom:16px}
.cta-band h2{
  text-transform:none!important;
  font-family:var(--display)!important;
  font-weight:200!important;
  font-size:clamp(28px,3.8vw,54px)!important;
  letter-spacing:-.008em!important;
  line-height:1.14!important;
  max-width:22ch;margin-inline:auto;
}
.cta-band h2 em,.cta-band h2 i{
  font-family:var(--serif)!important;font-style:italic!important;font-weight:400!important;
  color:var(--accent)!important;text-transform:none!important;letter-spacing:0!important;
}
html[dir="rtl"] .cta-band h2{line-height:1.3!important;font-weight:600!important;font-size:clamp(26px,3.4vw,48px)!important}

/* header CTA: dark label on its gold fill, always */
.nav__cta,.nav__cta:hover,.nav__cta:focus,
.nav__cta *,.nav__cta:hover *,
.hx-nav__cta,.hx-nav__cta:hover,.hx-nav__cta *,.hx-nav__cta:hover *{color:#151515!important}

/* ==================================================================
   ROUND 8 — philosophy intro: sub-paragraph as wide as its title
   (was capped ~268px → 4 lines; now ~title width → 2 lines)
   ================================================================== */
.section-wm .head .lead{max-width:600px!important;margin-inline:0!important}
html[dir="rtl"] .section-wm .head .lead{max-width:600px!important;margin-inline:0!important;margin-right:0!important}

/* ==================================================================
   ROUND 9 — unified footer on every page (the .fcol design), footer
   Book Appointment button removed (markup), body text set to white.
   Column headings stay gold.
   ================================================================== */
.footer .fbrand p{color:#fff!important}
.footer .fcol a,.footer .fcol p{color:#fff!important}
.footer .fcol a:hover{color:var(--accent)!important}

/* ==================================================================
   ROUND 9b — footer LAYOUT ported into the always-loaded layer so the
   unified .fcol footer renders on EVERY page. The homepage + arch pages
   load mz/style.css (no .fcol rules); this makes them match the inner
   pages. Colours: body text white (R9), headings gold.
   ================================================================== */
.footer .wrap{max-width:var(--maxw,1280px);margin:0 auto;padding:0 40px}
.footer .fgrid-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:50px;padding-bottom:60px}
.footer .fbrand img{height:90px;margin-bottom:22px}
.footer .fbrand p{font-size:14.5px;max-width:340px;line-height:1.8}
.footer .fsocials{display:flex;gap:14px;margin-top:26px}
.footer .fsocials a{width:40px;height:40px;border:1px solid rgba(255,255,255,.16);border-radius:50%;display:grid;place-items:center;transition:.4s}
.footer .fsocials a:hover{background:var(--accent);border-color:var(--accent)}
.footer .fsocials a:hover svg{stroke:#0c0c0e}
.footer .fsocials svg{width:17px;height:17px;stroke:#fff;fill:none;transition:.4s}
.footer .fcol h5{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)!important;margin-bottom:24px;font-weight:500}
.footer .fcol a,.footer .fcol p{display:block;font-size:14px;padding:6px 0;transition:.3s}
.footer .fcol a:hover{padding-left:5px}
html[dir="rtl"] .footer .fcol a:hover{padding-left:0;padding-right:5px}
.footer .fbar{border-top:1px solid rgba(255,255,255,.1);padding:26px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:12.5px;letter-spacing:.05em}
@media(max-width:860px){
  .footer .fgrid-top{grid-template-columns:1fr 1fr;gap:36px}
  .footer .fbrand{grid-column:1/-1}
  .footer .fbar{flex-direction:column;gap:12px;text-align:center}
}

/* ==================================================================
   ROUND 10 — arch button family hover contrast.
   These buttons reveal a LIGHT fill on hover (gold or white via ::before),
   so their label must be DARK on hover. The earlier blanket white made
   them vanish: services "Contact Us" went white-on-white; the hero's
   "Our Specialties" filled gold with a white (invisible) label — looking
   like an empty gold pill. True underline ghosts (.btn-ghost/.hx-doc-book)
   don't fill, so they keep a light label.
   ================================================================== */
.btn.ghost:hover,.btn.ghost:hover .arrow,.btn.ghost:hover .arr,
.btn.reveal:hover,.btn.reveal:hover .arrow,
.btn-secondary:hover,.btn-secondary:hover .arrow,.btn-secondary:hover .arr,
.btn-pill.btn-secondary:hover,.btn-pill.btn-secondary:hover .arrow,
.arch-hero__cta .btn-secondary:hover,.arch-hero__cta .btn-secondary:hover .arrow{
  color:#151515!important;
}
/* plain arch .btn (gold reveal), excluding solids and the underline ghosts */
.btn:not(.btn-ghost):not(.hx-doc-book):not(.btn-solid):not(.solid):hover{color:#151515!important}
/* real underline ghosts don't fill → keep a light label */
.btn-ghost:hover,.hx-doc-book:hover,
.btn-ghost:hover .arrow,.hx-doc-book:hover .arrow{color:#f5f5f5!important}

/* ==================================================================
   ROUND 11 — About page stat figures enlarged. The counter <span> inside
   <b> was inheriting the 12px label size, so the numbers rendered tiny.
   Enlarge with the elegant thin gold-gradient display treatment.
   ================================================================== */
.stats .stat b,
.stats .stat b span{
  font-size:clamp(48px,5.4vw,80px)!important;
  line-height:1.02!important;
  font-weight:400!important;
  letter-spacing:.005em!important;
}
.stats .stat b{display:block;margin-bottom:18px}
.stats .stat b span{
  background:linear-gradient(180deg,#efdcae 0%,#c9a24b 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:#c9a24b;
}

/* ==================================================================
   ROUND 12 — .btn.solid (compound class, e.g. the "Start Your Health
   Journey" CTA) reveals a DARK fill on hover via ::before, so its label
   must be LIGHT on hover. Earlier rounds forced it dark → dark-on-dark
   (invisible). The hyphen .btn-solid (homepage) reveals a LIGHT fill and
   correctly keeps a dark label, so it is intentionally not touched here.
   ================================================================== */
.btn.solid:hover,
.btn.solid:hover .arr,
.btn.solid:hover .arrow{color:#f3e7c9!important;-webkit-text-fill-color:#f3e7c9!important}

/* ==================================================================
   ROUND 13 — LIGHT MODE polish. Root cause: the card surface variable
   --panel (#17171a) and a couple of companions were never overridden for
   light mode, so every card (.doc, .art, .form, search box, hover states)
   stayed DARK while its headings used --text (now dark) → invisible.
   Flip the surface + border vars so cards become light with dark text.
   The intentional dark anchor bands (footer, cta-band, hero, h2ro) are
   forced dark elsewhere and are unaffected.
   ================================================================== */
body.theme-light{
  --panel:#ffffff;
  --line-soft:rgba(0,0,0,.09);
  --muted-2:#7a756c;
}
/* give the now-light cards a soft shadow so they read as cards on the page */
body.theme-light .doc,
body.theme-light .art,
body.theme-light .form{box-shadow:0 12px 34px rgba(60,50,30,.07)}
/* form fields: light field on the light card, dark text, visible border */
body.theme-light .field input,
body.theme-light .field select,
body.theme-light .field textarea,
body.theme-light .art-search input{
  background:#f6f3ee!important;color:#1b1b1b!important;border-color:rgba(0,0,0,.14)!important}
body.theme-light .field input::placeholder,
body.theme-light .field textarea::placeholder{color:#9a958c!important}
body.theme-light .field select option{background:#fff;color:#1b1b1b}
/* the contact form title used --text; now readable on the white card */
body.theme-light .form h3,
body.theme-light .doc-body h4,
body.theme-light .art-body h3{color:#1b1b1b!important}

/* ==================================================================
   ROUND 14 — LIGHT MODE contrast, second pass. Fixes headings the first
   pass missed: dark CTA-band headings, light "display" headings that
   vanish on the light page, and faint inner-hero subtitles.
   ================================================================== */

/* A) Inner CTA bands (.section.cta) sit on a DARK clinic photo → force light
      text (the big heading used --text = dark = invisible). */
body.theme-light .section.cta h2,
body.theme-light .section.cta h2 *,
body.theme-light .section.cta p,
body.theme-light .section.cta .eyebrow{color:#f6f2ea!important}
body.theme-light .section.cta h2 em,
body.theme-light .section.cta h2 i{color:var(--accent)!important}

/* B) Big display headings that use --cream sit on the LIGHT page → dark. */
body.theme-light .docs-intro h2,
body.theme-light .flipface__b h3,
body.theme-light .split-body .lead,
body.theme-light .exp-lead{color:#1b1b1b!important}
body.theme-light .docs-intro h2 em,
body.theme-light .docs-intro h2 i,
body.theme-light .split-body .lead em{color:var(--accent)!important}

/* C) Inner photo heros (.h2ro): the foreground title + side text sit on the
      area that fades to the light page bg → make them dark (with a soft light
      halo for any part still over the photo). The big ghost stays light. */
body.theme-light .h2ro__in h1,
body.theme-light .h2ro__side,
body.theme-light .h2ro__side *{
  color:#1b1b1b!important;
}

/* ==================================================================
   ROUND 15 — light mode: the big hero watermark word (.h2ro__ghost) was
   rendering as solid white. Render it as a GOLD OUTLINE (transparent fill
   + gold stroke) to match the dark-mode treatment.
   ================================================================== */
body.theme-light .h2ro__ghost{
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  -webkit-text-stroke:1.5px rgba(201,162,75,.55)!important;
}

/* ==================================================================
   ROUND 16 — LIGHT MODE button states.
   Gold solid/primary buttons: the ::before hover reveal uses --text (dark in
   light mode), so on hover they filled DARK while the dark label stayed dark
   → invisible ("View All Doctors", CTA-band "Book an Appointment"). Make the
   reveal a light sheen so the dark label always reads.
   ================================================================== */
body.theme-light .btn-solid::before,
body.theme-light .btn-primary:not(.solid)::before,
body.theme-light .nav__cta::before,
body.theme-light .hx-nav__cta::before{background:rgba(255,255,255,.32)!important}

/* Outline/ghost buttons inside the dark CTA bands: light label at rest (they
   sit on a dark band); on hover they fill light → dark label. */
body.theme-light .section.cta .btn.ghost,
body.theme-light .section.cta .btn-secondary,
body.theme-light .section.cta .btn-ghost,
body.theme-light .cta-band .btn.ghost,
body.theme-light .cta-band .btn-secondary,
body.theme-light .cta-band .btn-ghost{color:#f5f5f5!important}
body.theme-light .section.cta .btn.ghost:hover,
body.theme-light .section.cta .btn-secondary:hover,
body.theme-light .cta-band .btn.ghost:hover,
body.theme-light .cta-band .btn-secondary:hover{color:#151515!important}

/* ==================================================================
   ROUND 17 — restore the OLD stat-number style: bolder image-filled
   numerals (gold gradient over the architecture texture, clipped to the
   glyphs) instead of the thin flat-gold treatment.
   ================================================================== */
.hx-trust__n{font-weight:500!important;font-size:clamp(50px,6vw,96px)!important;line-height:.92!important;color:transparent}
.hx-trust__n span{
  background-image:linear-gradient(180deg,rgba(200,178,138,.96) 0%,rgba(200,178,138,.4) 100%),url("mz/assets/img/abstract.jpg")!important;
  background-size:cover!important;background-position:center!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hx-trust__n span{color:var(--accent)!important;-webkit-text-fill-color:var(--accent)!important}
}

/* ==================================================================
   ROUND 18 — light mode: the doctors "true partner" pull-quote used --cream
   (light) → invisible on the light page. Make it dark.
   ================================================================== */
body.theme-light .docs-intro__pull{color:#2a251d!important}

/* ==================================================================
   ROUND 19 — centered section intros ("Why We Are Different", "One
   Connected System"): the subtext under a centered eyebrow/heading was
   justified (left-anchored). Center it to match the heading.
   ================================================================== */
.section-head p,
.eyebrow.center ~ p{
  text-align:center!important;
  margin-inline:auto!important;
  max-width:72ch;
}

/* ==================================================================
   ROUND 20 — subtext alignment must follow the heading. .hx-head sections
   are LEFT-aligned (they override the eyebrow's .center class), so their
   subtext must stay LEFT — ROUND 19's ".eyebrow.center ~ p" wrongly centered
   it. This more-specific rule restores left for hx-head.
   ================================================================== */
.hx-head .eyebrow.center ~ p{text-align:left!important;margin-inline:0!important}
html[dir="rtl"] .hx-head .eyebrow.center ~ p{text-align:right!important;margin-inline:0!important}

/* ==================================================================
   ROUND 21 — the homepage "Get in Touch" form had padding:0 but gets a card
   shadow in light mode, so fields sat flush against the card edge. Give it
   proper card padding + surface so it reads as a padded card.
   ================================================================== */
body.theme-light .section-wm .form{
  padding:clamp(28px,3vw,46px)!important;
  background:#ffffff;border-radius:8px;
}

/* ==================================================================
   ROUND 22 — General Manager section header centered (mark, role, name,
   subtitle) in both EN and AR, so the title reads as a centered header.
   ================================================================== */
.hx-gm .hx-mark{margin-inline:auto!important;margin-left:auto!important;margin-right:auto!important}
.hx-gm .hx-gm__role,
.hx-gm h2,
.hx-gm .hx-gm__name{text-align:center!important}

/* ==================================================================
   ROUND 23 — AR hero headline off-center. The RTL hero title box was
   capped at max-width:26ch (~639px), but the one-line Arabic headline
   ("الرعاية المتكاملة تبدأ من") is ~852px wide. It overflowed the box
   and — because the box is RTL — pinned to the RIGHT edge instead of
   centering, so the title sat left of the (centered) eyebrow, subtitle
   and buttons. Removing the cap on tablet/desktop lets the box span the
   full width so text-align:center truly centers the line. Mobile
   (<=820px) still wraps via the existing rule and keeps its own cap.
   ================================================================== */
@media(min-width:821px){
  html[dir="rtl"] .arch-hero .hx-hero-h1{max-width:none!important}
}

/* ==================================================================
   ROUND 24 — stats band (.numstats--4). Numbers were huge
   (clamp up to 150px) and the Arabic "ألف" suffix on the 50 (.5em)
   wrapped to a second line below the number. Make the numbers a touch
   smaller and keep each numeral on ONE line so "ألف+" sits inline next
   to the 50. (The suffix itself is shrunk inline in the HTML.)
   ================================================================== */
html[dir="rtl"] .numstats .nv{
  font-size:clamp(50px,6vw,104px)!important;
  white-space:nowrap!important;
}

/* ==================================================================
   ROUND 25 — homepage logo EXACTLY like v1: a big hero-logo (~170px) sits
   top-left (top-right in RTL) at the top of the hero and the small header
   logo is hidden; on scroll the hero scrolls away and the small header logo
   appears (52px). v2 had shrunk+centered the hero-logo and forced the header
   logo always-on — these rules restore v1's behavior.
   ================================================================== */
body.has-hero-logo .header:not(.scrolled) .logo{visibility:hidden!important}
body.has-hero-logo .header.scrolled .logo{visibility:visible!important}
.arch-hero{position:relative!important}
.arch-hero .hero-logo{position:absolute!important;top:24px!important;left:40px!important;right:auto!important;margin:0!important;z-index:6}
html[dir="rtl"] .arch-hero .hero-logo{left:auto!important;right:40px!important}
.arch-hero .hero-logo img{height:170px!important;margin:0!important}
@media(max-width:900px){.arch-hero .hero-logo img{height:120px!important}.arch-hero .hero-logo{top:16px!important;left:20px!important}html[dir="rtl"] .arch-hero .hero-logo{right:20px!important}}

/* ROUND 26 — 2-slide hero video banner */
.arch-hero__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s var(--ease);will-change:opacity}
.arch-hero__bg video.show{opacity:1}

/* ============================================================================
   ROUND 27 — Arabic (RTL) refinements. English is intentionally untouched:
   every rule here is scoped to html[dir="rtl"].
   (1) unify text colour   (2) remove decorative eyebrow lines
   (3) blend the "about" building image   (4) bigger logo
   (5) shield Mission/Vision + one consistent font   (6) name handled in HTML
   ============================================================================ */

/* (5) ONE font across the whole Arabic site (about.html didn't load Cairo) */
html[dir="rtl"] body,
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,html[dir="rtl"] h5,
html[dir="rtl"] p,html[dir="rtl"] a,html[dir="rtl"] span,html[dir="rtl"] li,
html[dir="rtl"] .btn,html[dir="rtl"] .eyebrow,html[dir="rtl"] .arch-h2,html[dir="rtl"] .lead{
  font-family:"Cairo","Segoe UI",sans-serif!important}

/* (2+5) kill the airy letter-spacing + uppercase on Arabic headings so the
   type reads as one consistent font, and remove the little dash-lines */
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,
html[dir="rtl"] .arch-h2,html[dir="rtl"] .arch-h2.lg,html[dir="rtl"] .arch-hero h1{
  letter-spacing:normal!important;text-transform:none!important;word-spacing:normal!important}
html[dir="rtl"] .eyebrow{letter-spacing:.06em!important;text-transform:none!important}
html[dir="rtl"] .eyebrow::before,
html[dir="rtl"] .eyebrow.center::after,
html[dir="rtl"] .eyebrow::after{display:none!important;content:none!important}
/* the empty hero divider bar */
html[dir="rtl"] .hx-stmt2 .rule,html[dir="rtl"] .head .rule,html[dir="rtl"] .rule{display:none!important}

/* (4) logo a bit bigger on Arabic pages */
html[dir="rtl"] .header .logo-img{height:74px!important}
html[dir="rtl"] .header.scrolled .logo-img{height:60px!important}
html[dir="rtl"] .arch-hero .hero-logo img{height:190px!important}
@media(max-width:900px){html[dir="rtl"] .arch-hero .hero-logo img{height:132px!important}}
@media(max-width:680px){html[dir="rtl"] .header .logo-img{height:58px!important}}

/* (3) blend the "عن هوليستيكس" building image into the dark page */
html[dir="rtl"] .section-wm .spec-img{position:relative;background:transparent!important}
html[dir="rtl"] .section-wm .spec-img img{filter:grayscale(30%) contrast(1.02) brightness(.58)!important}
html[dir="rtl"] .section-wm .spec-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(125% 115% at 50% 36%,transparent 32%,rgba(17,17,17,.5) 68%,rgba(17,17,17,.97) 100%)}

/* (1+5) Mission (رسالتنا) & Vision (رؤيتنا) as shield cards */
html[dir="rtl"] .section.band .wrap.split{align-items:stretch;gap:clamp(26px,4vw,60px)}
html[dir="rtl"] .section.band .split-body{
  position:relative;text-align:center;
  padding:clamp(38px,4.5vw,58px) clamp(26px,3.4vw,46px) clamp(58px,6.5vw,86px);
  background:linear-gradient(180deg,rgba(200,178,138,.11),rgba(200,178,138,.03));
  border-top:2px solid rgba(200,178,138,.55);
  -webkit-clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%);
          clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%)}
/* crown-shield emblem at the top of each shield */
html[dir="rtl"] .section.band .split-body::before{
  content:"";display:block;width:56px;height:56px;margin:0 auto 18px;
  background:url(brand/ha-mark.svg) center/contain no-repeat}
html[dir="rtl"] .section.band .split-body .eyebrow{justify-content:center;display:flex;color:#c8b28a!important;margin-bottom:10px}
html[dir="rtl"] .section.band .split-body h2{
  color:#efe7d6!important;font-size:clamp(26px,3.1vw,40px)!important;margin-bottom:16px!important;font-weight:600!important}
html[dir="rtl"] .section.band .split-body p{color:#c9c3b6!important;max-width:32ch;margin:0 auto!important;font-size:clamp(15px,1.15vw,17px)}
@media(max-width:820px){
  html[dir="rtl"] .section.band .split-body{-webkit-clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%)}}

/* ROUND 27b — unify only the main SECTION titles to gold (was white+gold mix).
   Card titles (h3), body text, etc. stay exactly as they were. */
html[dir="rtl"] .arch-h2,
html[dir="rtl"] .arch-h2 b,
html[dir="rtl"] .section-head h2,
html[dir="rtl"] .split-body h2,
html[dir="rtl"] .section.band .split-body h2{color:#c8b28a!important}