/* ==========================================================================
   Dr. Soliman Fakeeh Hospital - Premium Mobile-First & Responsive CSS
   Uniform Font: Almarai | Font Weight: 400 Across All Elements
   ========================================================================== */

:root {
  /* Brand Theme Colors — sampled from logo.png (navy #2b4a6b, teal #2b7a8a) */
  --fakeeh-teal: #2b7a8a;
  --fakeeh-teal-dark: #225f6c;
  --fakeeh-teal-light: #EEF8FB;
  --fakeeh-teal-hover: #256a78;
  --fakeeh-topbar: #2b7a8a;
  --fakeeh-navy: #2b4a6b;
  --fakeeh-pink: #E83E8C;
  --fakeeh-gold: #C99E32;
  --fakeeh-gold-bg: #FCF8EC;

  /* Neutrals */
  --bg-white: #FFFFFF;
  --bg-page: #FBFDFE;
  --bg-box: #EEF8FB;
  --border-light: #E1EFF4;
  --border-card: #E5EEF2;
  --text-main: #1D2A38;
  --text-muted: #5E7285;
  --text-light: #8CA0B2;

  /* Typography: Uniform Almarai */
  --font-ar: 'Almarai', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-en: 'Almarai', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Radius & Shadows */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-pill: 9999px;
  --shadow-card: 0 8px 24px rgba(43, 122, 138, 0.08);
  --shadow-hover: 0 16px 36px rgba(43, 122, 138, 0.16);
  --transition: all 0.3s ease;

  /* Fluid Type Scale — mobile-first, clamp-based (responsive-design reference)
     Mayo/Cleveland keep headings fluid: 1.5rem → 2.25rem without jumps */
  --text-hero: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --text-section: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --text-desc: clamp(0.92rem, 0.88rem + 0.25vw, 1.05rem);
  --text-card-title: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  --space-fluid-sm: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
  --space-fluid-md: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  --space-fluid-lg: clamp(2rem, 1.6rem + 1.6vw, 3.5rem);
  --header-height: 64px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Almarai', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  font-family: 'Almarai', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

@supports (height: 100dvh) {
  :root { --vh: 100dvh; }
}

body {
  font-family: 'Almarai', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  background-color: var(--bg-white);
  color: var(--text-main);
  line-height: 1.6;
  direction: rtl;
  text-align: right;
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  -webkit-tap-highlight-color: rgba(43, 122, 138, 0.15);
  padding-bottom: env(safe-area-inset-bottom);
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
  touch-action: none;
}

body.lang-en {
  font-family: 'Almarai', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  direction: ltr;
  text-align: left;
}

h1, h2, h3, h4, h5, h6,
p, span, a, button, input, select, textarea, label, strong, b,
div, li, ul, nav, header, footer, section {
  font-family: 'Almarai', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, select, textarea {
  font-family: inherit;
  outline: none;
  border: none;
  font-weight: 400 !important;
}

.container {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Section Header Typography */
.section-head {
  text-align: center;
  margin-bottom: 3.5rem;
}

.section-head-title {
  font-size: var(--text-section);
  font-weight: 400 !important;
  color: var(--fakeeh-teal);
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.section-head-desc {
  font-size: var(--text-desc);
  font-weight: 400 !important;
  color: var(--text-muted);
  max-width: 65ch;
  margin: 0 auto;
  line-height: 1.7;
  text-wrap: pretty;
}

/* ==========================================================================
   1. Top Bar — Hospital Utility Strip (Impeccable Polish)
   Research: Cleveland Clinic / Mayo keep phone + ER + location persistent
   Craft floor: contrast ≥4.5:1, tight groups / generous separation
   ========================================================================== */
.fakeeh-top-bar {
  background-color: var(--fakeeh-topbar);
  color: #FFFFFF;
  font-size: 0.82rem;
  padding: 0.42rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  width: 100%;
}

.top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.top-bar-group-link {
  color: #FFFFFF;
  font-weight: 400 !important;
  font-size: 0.84rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.top-bar-group-dot {
  width: 7px;
  height: 7px;
  background: #7ED3E8;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(126, 211, 232, 0.18);
  flex-shrink: 0;
}

.top-bar-group-link:hover {
  opacity: 0.92;
}

/* Center emergency trinity */
.top-bar-emergency {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0.28rem 0.9rem;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.top-bar-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  transition: var(--transition);
}

.top-bar-phone:hover {
  color: #E6F7FB;
  transform: translateY(-0.5px);
}

.top-bar-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}

.top-bar-emergency-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #E6F7FB;
  font-size: 0.78rem;
  white-space: nowrap;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: #22C55E;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.22);
  animation: pulseDot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.22); }
  50% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0.08); }
}

.top-bar-location {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.76rem;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.top-bar-lang-btn {
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  font-size: 0.76rem;
  font-weight: 400 !important;
  padding: 0.28rem 0.85rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  min-height: 30px;
}

.top-bar-lang-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-0.5px);
}

.top-bar-lang-btn:focus-visible,
.top-bar-phone:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  border-radius: var(--radius-pill);
}

/* Legacy top bar — removed 2026-08: header-lang-switch replaces it.
   Kept hidden for backward compat if cached pages still contain markup. */
.fakeeh-top-bar {
  display: none !important;
}

/* ==========================================================================
   2. Main Header — Impeccable Polish (2-Tier + Trinity CTAs)
   Craft floor checks:
   - Depth: shadow 0 4px 20px with offset + blur (not halo)
   - Spacing: tight groups, generous separation, more above heading than below
   - Type: Almarai preserved, hierarchy via pill primary vs ghost secondary
   - States: hover/active/focus/disabled covered; 44px min touch target
   - Browser surfaces: selection/caret themed via ::selection below
   ========================================================================== */
.fakeeh-header {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(43, 74, 107, 0.06), 0 1px 0 rgba(43, 122, 138, 0.08);
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

.header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0;
  gap: 1.5rem;
}

.header-brand-cluster {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.fakeeh-brand-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.fakeeh-logo-img {
  width: 158px;
  height: auto;
  object-fit: contain;
  transition: width 0.3s ease;
}

/* Trust micro — subtle authority, aligns with Fakeeh's JCI/HIMSS identity */
.header-trust-micro {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.75rem;
  background: #F8FBFC;
  border: 1px solid rgba(43, 122, 138, 0.10);
  border-radius: var(--radius-pill);
}

.trust-badge-jci {
  font-size: 0.72rem;
  font-weight: 400 !important;
  letter-spacing: 0.08em;
  color: var(--fakeeh-teal);
  background: #EEF8FB;
  border: 1px solid rgba(43, 122, 138, 0.14);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  line-height: 1;
}

.trust-micro-divider {
  width: 1px;
  height: 18px;
  background: rgba(43, 122, 138, 0.14);
}

.trust-micro-years {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 1px;
  font-size: 0.78rem;
  color: var(--fakeeh-navy);
}

.trust-micro-sub {
  font-size: 0.66rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.header-actions-wrap {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

/* Phone ghost — secondary trinity element, always tap-able */
.header-phone-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.56rem 0.95rem;
  background: #FFFFFF;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-pill);
  color: var(--fakeeh-navy);
  font-size: 0.88rem;
  font-weight: 400 !important;
  white-space: nowrap;
  transition: var(--transition);
  min-height: 42px;
  min-width: 44px;
  justify-content: center;
}

.header-phone-ghost:hover {
  border-color: var(--fakeeh-teal);
  color: var(--fakeeh-teal);
  background: var(--fakeeh-teal-light);
  transform: translateY(-1px);
}

.header-phone-ghost:focus-visible {
  outline: 2px solid var(--fakeeh-teal);
  outline-offset: 2px;
}

/* Email ghost — from rh.med.sa: info@rh.med.sa always visible desktop, icon on mobile */
.header-email-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.56rem 0.95rem;
  background: #F8FBFC;
  border: 1.5px solid rgba(43, 122, 138, 0.10);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 0.84rem;
  white-space: nowrap;
  transition: var(--transition);
  min-height: 42px;
}

.header-email-ghost:hover {
  border-color: var(--fakeeh-teal);
  color: var(--fakeeh-teal);
  background: var(--fakeeh-teal-light);
  transform: translateY(-1px);
}

.header-email-ghost:focus-visible {
  outline: 2px solid var(--fakeeh-teal);
  outline-offset: 2px;
}

/* Top bar location as link */
a.top-bar-location {
  text-decoration: none;
  transition: var(--transition);
}

a.top-bar-location:hover {
  color: #FFFFFF;
  opacity: 0.95;
}

/* Primary: Book Appointment — pill, 42-44px, exponential ease */
.header-btn-appointment {
  background: var(--fakeeh-teal);
  color: #FFFFFF;
  font-size: 0.88rem;
  font-weight: 400 !important;
  padding: 0.62rem 1.35rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, box-shadow 0.22s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  white-space: nowrap;
  min-height: 42px;
  box-shadow: 0 4px 14px rgba(43, 122, 138, 0.22);
  border: 1.5px solid transparent;
}

.header-btn-appointment:hover {
  background: var(--fakeeh-teal-dark);
  transform: translateY(-1.5px);
  box-shadow: 0 8px 20px rgba(43, 122, 138, 0.28);
}

.header-btn-appointment:active {
  transform: translateY(0);
}

.header-btn-contact {
  background: #FFFFFF;
  color: var(--fakeeh-teal);
  font-size: 0.88rem;
  font-weight: 400 !important;
  padding: 0.62rem 1.2rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border: 1.5px solid var(--border-light);
  min-height: 42px;
}

.header-btn-contact:hover {
  background: var(--fakeeh-teal);
  color: #FFFFFF;
  border-color: var(--fakeeh-teal);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(43, 122, 138, 0.18);
}

.header-btn-appointment:focus-visible,
.header-btn-contact:focus-visible,
.mobile-menu-btn:focus-visible {
  outline: 2px solid var(--fakeeh-teal);
  outline-offset: 2px;
}

/* Language Switch — Enhanced Design (replaces top-bar ENG button)
   Position: header-actions-wrap pill, icon + text, 42px min, teal tokens, RTL-aware */
.header-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  background: #FFFFFF;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-pill);
  color: var(--fakeeh-navy);
  font-size: 0.84rem;
  font-weight: 400 !important;
  white-space: nowrap;
  cursor: pointer;
  min-height: 42px;
  min-width: 44px;
  justify-content: center;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 10px rgba(43, 74, 107, 0.04);
}

.header-lang-switch:hover {
  background: var(--fakeeh-teal-light);
  border-color: var(--fakeeh-teal);
  color: var(--fakeeh-teal);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(43, 122, 138, 0.12);
}

.header-lang-switch:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(43, 122, 138, 0.08);
}

.header-lang-switch:focus-visible {
  outline: 2px solid var(--fakeeh-teal);
  outline-offset: 2px;
}

.header-lang-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--fakeeh-teal);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-lang-switch:hover .header-lang-icon {
  transform: rotate(15deg) scale(1.05);
}

.header-lang-text {
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  line-height: 1;
}

@media (max-width: 640px) {
  .header-lang-switch {
    padding: 0.45rem 0.75rem;
    font-size: 0.8rem;
    min-height: 42px;
    gap: 0.35rem;
  }
  .header-lang-icon {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 380px) {
  .header-lang-switch {
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
  }
}

.mobile-menu-btn {
  display: none;
  background: var(--fakeeh-teal-light);
  color: var(--fakeeh-teal);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  border: 1.5px solid var(--border-light);
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  transition: var(--transition);
  flex-shrink: 0;
}

.mobile-menu-btn:hover {
  background: var(--fakeeh-teal);
  color: #FFFFFF;
  border-color: var(--fakeeh-teal);
}

.header-bottom-row {
  border-top: 1px solid rgba(43, 122, 138, 0.08);
  padding: 0.55rem 0 0.7rem 0;
  transition: max-height 0.35s ease, opacity 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.fakeeh-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.15rem;
  flex-wrap: wrap;
  flex: 1;
}

.fakeeh-nav-link {
  font-size: 0.88rem;
  font-weight: 400 !important;
  color: #2D3748;
  padding: 0.42rem 0.15rem;
  position: relative;
  transition: color 0.2s ease;
  white-space: nowrap;
  line-height: 1.2;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

.fakeeh-nav-link:hover, .fakeeh-nav-link.active {
  color: var(--fakeeh-teal);
}

.fakeeh-nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: 0;
  width: 0;
  height: 2px;
  background: var(--fakeeh-teal);
  transition: width 0.26s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 9999px;
}

body.lang-en .fakeeh-nav-link::after {
  right: auto;
  left: 0;
}

.fakeeh-nav-link:hover::after {
  width: 100%;
}

.nav-group-separator {
  width: 3px;
  height: 3px;
  background: rgba(43, 122, 138, 0.22);
  border-radius: 50%;
  flex-shrink: 0;
}

.nav-portal-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--fakeeh-teal);
  background: var(--fakeeh-teal-light);
  border: 1px solid rgba(43, 122, 138, 0.12);
  padding: 0.38rem 0.75rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: var(--transition);
  flex-shrink: 0;
}

.nav-portal-link:hover {
  background: var(--fakeeh-teal);
  color: #FFFFFF;
  border-color: var(--fakeeh-teal);
  transform: translateY(-1px);
}

/* RH real routes — Impeccable polish: external affordance + action link */
.fakeeh-nav-link--ext {
  gap: 0.28rem;
}

.nav-ext-icon {
  opacity: 0.55;
  flex-shrink: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.fakeeh-nav-link--ext:hover .nav-ext-icon {
  opacity: 1;
  transform: translate(1px, -1px);
}

body.lang-en .fakeeh-nav-link--ext:hover .nav-ext-icon {
  transform: translate(-1px, -1px);
}

.fakeeh-nav-link--action {
  color: var(--fakeeh-teal);
}

.fakeeh-nav-link--action:hover {
  color: var(--fakeeh-teal-dark);
}

.fakeeh-nav-link:focus-visible {
  outline: 2px solid var(--fakeeh-teal);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Browser surfaces — cheapest craft signal */
::selection {
  background: rgba(43, 122, 138, 0.18);
  color: var(--fakeeh-navy);
}
:focus-visible {
  outline: 2px solid var(--fakeeh-teal);
  outline-offset: 2px;
}

/* ==========================================================================
   3. Hero Section (Ultra Clear Video Background + Sleek Floating Buttons Only)
   Benchmark: Cleveland hero stacks to single CTA on mobile, thumb-zone aligned
   Mayo keeps hero text large but fluid; we use clamp() + dvh for mobile chrome
   ========================================================================== */
.hero-video-section {
  position: relative;
  height: 75vh;
  height: 75dvh;
  min-height: 480px;
  min-height: max(480px, 55svh);
  max-height: 720px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  overflow: clip;
  color: #FFFFFF;
  text-align: center;
  width: 100%;
  padding-bottom: max(3.5rem, env(safe-area-inset-bottom));
  isolation: isolate;
}

.hero-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.hero-video-bg iframe {
  width: 100vw;
  width: 100dvw;
  height: 56.25vw;
  min-height: 100vh;
  min-height: 100dvh;
  min-width: 177.77vh;
  min-width: 177.77dvh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
  max-width: none;
}
.hero-background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-overlay-dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.12) 60%, rgba(43, 74, 107, 0.38) 100%);
  z-index: 2;
}

.hero-content-wrapper {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 700px;
  padding: 0 1.25rem;
  margin: 0 auto;
}
.hero-copy {
  max-width: 760px;
  text-align: center;
  color: #fff;
  margin: 0 auto 1.6rem;
  text-shadow: 0 2px 18px rgba(0,0,0,.3);
}
.hero-kicker { display: inline-block; padding: .35rem .8rem; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; background: rgba(43,74,107,.28); font-size: .84rem; margin-bottom: .75rem; }
.hero-copy h1 { color: #fff; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.18; margin: 0 0 .75rem; }
.hero-copy p { color: rgba(255,255,255,.94); font-size: 1.05rem; line-height: 1.8; margin: 0 auto; max-width: 62ch; }

.hero-floating-actions-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 0.85rem 1.75rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
  transition: var(--transition);
}

.hero-floating-actions-bar:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.55);
}

.btn-hero-book {
  background: var(--fakeeh-teal);
  color: #FFFFFF;
  font-size: 1.05rem;
  font-weight: 400 !important;
  padding: 0.85rem 2.25rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  box-shadow: 0 8px 24px rgba(43, 122, 138, 0.45);
}

.btn-hero-book:hover {
  background: var(--fakeeh-teal-dark);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(43, 122, 138, 0.6);
}

.btn-hero-contact {
  background: #FFFFFF;
  color: var(--fakeeh-teal);
  font-size: 1.05rem;
  font-weight: 400 !important;
  padding: 0.85rem 2.25rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.btn-hero-contact:hover {
  background: #F4FAFC;
  color: var(--fakeeh-teal-dark);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   4. Stats Strip
   ========================================================================== */
.stats-strip-section {
  padding: 2.5rem 0 0 0;
  background: #FFFFFF;
}

.stats-boxes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.stat-box-card {
  background: var(--bg-box);
  border: 1px solid rgba(43, 122, 138, 0.1);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.stat-box-card:hover {
  transform: translateY(-3px);
  background: #FFFFFF;
  border-color: var(--fakeeh-teal);
  box-shadow: var(--shadow-card);
}

.stat-number {
  font-size: 2.15rem;
  font-weight: 400 !important;
  color: var(--fakeeh-teal);
  line-height: 1.2;
  margin-bottom: 0.35rem;
}

.stat-label {
  font-size: 0.875rem;
  font-weight: 400 !important;
  color: var(--text-muted);
}

/* ==========================================================================
   4.1 Stats — Animation On Scroll + Count-Up (Skill: mengto/animation-on-scroll)
   Workflow: keyframes + IntersectionObserver (.animate-on-scroll)
   One authored moment per page, exponential ease-out, honor reduced-motion
   ========================================================================== */
@keyframes statsIn {
  0% {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
}

/* Skill trigger: paused by default, running when .animate added by IO */
.stat-box-card.animate-on-scroll {
  animation: statsIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-play-state: paused !important;
}

.stat-box-card.animate-on-scroll.animate {
  animation-play-state: running !important;
}

.stat-number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  min-height: 1.2em;
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .stat-box-card.animate-on-scroll {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ==========================================================================
   5. Section "عن المستشفى" (Simple, Clean 2-Column Layout)
   ========================================================================== */
.about-simple-section {
  padding: 4.5rem 0;
  background: #FFFFFF;
}

.about-simple-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.about-badge-tag {
  display: inline-block;
  background: var(--fakeeh-teal-light);
  color: var(--fakeeh-teal);
  font-size: 0.85rem;
  font-weight: 400 !important;
  padding: 0.4rem 1.15rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1.25rem;
  border: 1px solid rgba(43, 122, 138, 0.15);
}

.about-title {
  font-size: var(--text-section);
  font-weight: 400 !important;
  color: var(--fakeeh-navy);
  line-height: 1.35;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.about-desc {
  font-size: 1.05rem;
  font-weight: 400 !important;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 2rem;
}

.about-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.about-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.feature-check-icon {
  width: 22px;
  height: 22px;
  background: var(--fakeeh-teal-light);
  color: var(--fakeeh-teal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: 400 !important;
}

.feature-text-bold {
  font-size: 0.95rem;
  font-weight: 400 !important;
  color: var(--text-main);
  line-height: 1.4;
}

.feature-text-sub {
  font-size: 0.8rem;
  font-weight: 400 !important;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.about-actions-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.btn-card-learn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: #FFFFFF;
  color: var(--fakeeh-teal);
  font-size: 0.95rem;
  font-weight: 400 !important;
  padding: 0.85rem 1.85rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-light);
  min-height: 42px;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition);
  line-height: 1;
}

.btn-card-learn-more:hover {
  background: var(--fakeeh-teal);
  color: #FFFFFF;
  border-color: var(--fakeeh-teal);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(43, 122, 138, 0.18);
}

.btn-card-learn-more:focus-visible {
  outline: 2px solid var(--fakeeh-teal);
  outline-offset: 2px;
}

.btn-card-learn-more:active {
  transform: translateY(0);
}

.about-image-wrapper {
  position: relative;
}

.about-main-img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: 0 16px 36px rgba(43, 74, 107, 0.12);
}

.about-floating-badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid rgba(43, 122, 138, 0.15);
}

body.lang-en .about-floating-badge {
  right: auto;
  left: 1.5rem;
}

.badge-pulse-dot {
  width: 12px;
  height: 12px;
  background: #10B981;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

.badge-text-title {
  font-size: 0.88rem;
  font-weight: 400 !important;
  color: var(--fakeeh-navy);
}

.badge-text-sub {
  font-size: 0.75rem;
  font-weight: 400 !important;
  color: var(--text-muted);
}

/* ==========================================================================
   6. Section "المرافق والإمكانيات" (Rich Multi-Card Image Grid Showcase)
   ========================================================================== */
.facilities-cards-section {
  padding: 5.5rem 0;
  background: #FBFDFE;
}

.facilities-rich-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.65rem;
}

.facility-rich-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--fakeeh-navy);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.facility-rich-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(43, 122, 138, 0.2);
}

.facility-rich-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.facility-rich-card:hover .facility-rich-img {
  transform: scale(1.08);
}

.facility-rich-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(43, 74, 107, 0.45) 40%, rgba(43, 74, 107, 0.95) 100%);
  z-index: 2;
}

.facility-rich-category-tag {
  position: relative;
  z-index: 3;
  align-self: flex-start;
  margin: 1.25rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 400 !important;
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.facility-rich-content {
  position: relative;
  z-index: 3;
  padding: 1.5rem;
  text-align: center;
  color: #FFFFFF;
}

.facility-rich-title {
  font-size: 1.25rem;
  font-weight: 400 !important;
  margin-bottom: 0.4rem;
  color: #FFFFFF;
  line-height: 1.35;
}

.facility-rich-desc {
  font-size: 0.875rem;
  font-weight: 400 !important;
  color: #CFE4ED;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.btn-facility-learn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--fakeeh-teal);
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 400 !important;
  padding: 0.55rem 1.5rem;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.btn-facility-learn:hover {
  background: #FFFFFF;
  color: var(--fakeeh-teal);
}

/* ==========================================================================
   7. Section "العيادات والتخصصات" (Icon Boxes Grid)
   ========================================================================== */
.specialties-boxes-section {
  padding: 5rem 0;
  background: #FFFFFF;
}

.specialties-boxes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.35rem;
}

.specialty-icon-card {
  background: var(--bg-box);
  border-radius: var(--radius-lg);
  padding: 2rem 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: var(--transition);
  border: 1px solid rgba(43, 122, 138, 0.08);
}

.specialty-icon-card:hover {
  transform: translateY(-4px);
  background: #FFFFFF;
  border-color: var(--fakeeh-teal);
  box-shadow: var(--shadow-card);
}

.specialty-badge-circle {
  width: 60px;
  height: 60px;
  background: #FFFFFF;
  border: 2px solid var(--border-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fakeeh-teal);
  margin-bottom: 1.15rem;
  transition: var(--transition);
}

.specialty-icon-card:hover .specialty-badge-circle {
  background: var(--fakeeh-teal);
  color: #FFFFFF;
  border-color: var(--fakeeh-teal);
  transform: scale(1.08);
}

.specialty-card-name {
  font-size: 1.1rem;
  font-weight: 400 !important;
  color: var(--text-main);
  margin-bottom: 0.45rem;
}

.specialty-card-brief {
  font-size: 0.84rem;
  font-weight: 400 !important;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ==========================================================================
   7B. Section "أبرز محطاتنا / Riyadh Highlights" — BIG SLIDER (Full-Bleed Editorial)
   Benchmark: Fakeeh rich-card overlay gradient + Cleveland spotlight 520px +
              Mayo editorial clarity — mapped to RH tokens, 1260 container,
              Almarai, RTL mirrors, offset blur depth, 44px targets.
   ========================================================================== */
.rh-highlights-section {
  padding: 5rem 0;
  background: #FFFFFF;
}
.rh-highlights-slider {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--fakeeh-navy);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-card);
  isolation: isolate;
}
.rh-highlights-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  z-index: 5;
}
.rh-highlights-progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: #7ED3E8;
  transition: width 0.12s linear;
  border-radius: 9999px;
}
.rh-highlights-viewport {
  overflow: hidden;
  position: relative;
  min-height: 520px;
  /* prevent layout shift: explicit aspect on small */
}
.rh-highlights-track {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.52s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  height: 100%;
}
.rh-slide {
  flex: 0 0 100%;
  width: 100%;
  min-height: 520px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
  background: var(--fakeeh-navy);
}
.rh-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.rh-slide:hover .rh-slide-img {
  transform: scale(1.03);
}
.rh-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(43, 74, 107, 0.08) 0%, rgba(43, 74, 107, 0.18) 30%, rgba(43, 74, 107, 0.52) 58%, rgba(43, 74, 107, 0.92) 100%);
  z-index: 1;
}
.rh-slide-content {
  position: relative;
  z-index: 2;
  padding: 2rem 2.2rem 2.6rem;
  max-width: 680px;
  color: #FFFFFF;
  text-align: start;
}
.rh-slide-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  padding: 0.28rem 0.75rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.85rem;
}
.rh-slide-title {
  font-size: clamp(1.45rem, 1.1rem + 1.35vw, 2.15rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin-bottom: 0.55rem;
  text-wrap: balance;
}
.rh-slide-desc {
  font-size: clamp(0.92rem, 0.88rem + 0.22vw, 1.02rem);
  line-height: 1.75;
  color: #D4E3EE;
  margin-bottom: 1.15rem;
  text-wrap: pretty;
  max-width: 62ch;
}
.rh-slide-actions {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  align-items: center;
}
.rh-slide-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 42px;
  padding: 0.62rem 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--fakeeh-teal);
  color: #FFFFFF !important;
  font-size: 0.88rem;
  border: 1.5px solid transparent;
  box-shadow: 0 8px 22px rgba(43, 74, 107, 0.24);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, box-shadow 0.22s ease;
}
.rh-slide-primary:hover {
  background: var(--fakeeh-teal-dark);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(43, 74, 107, 0.30);
}
.rh-slide-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.62rem 1.15rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF !important;
  font-size: 0.88rem;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: var(--transition);
  cursor: pointer;
}
.rh-slide-ghost:hover {
  background: #FFFFFF;
  color: var(--fakeeh-navy) !important;
  border-color: #FFFFFF;
  transform: translateY(-1px);
}
.rh-slide-primary:focus-visible,
.rh-slide-ghost:focus-visible {
  outline: 2px solid #7ED3E8;
  outline-offset: 2px;
}

/* Arrows */
.rh-highlights-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  border: 1.5px solid var(--border-light);
  color: var(--fakeeh-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(43, 74, 107, 0.16);
  z-index: 4;
  transition: var(--transition);
}
.rh-highlights-arrow:hover {
  background: var(--fakeeh-teal);
  color: #FFFFFF;
  border-color: var(--fakeeh-teal);
  transform: translateY(-50%) scale(1.04);
}
.rh-highlights-arrow.prev { right: 12px; }
.rh-highlights-arrow.next { left: 12px; }
body.lang-en .rh-highlights-arrow.prev { right: auto; left: 12px; }
body.lang-en .rh-highlights-arrow.next { left: auto; right: 12px; }
.rh-highlights-arrow:focus-visible {
  outline: 2px solid var(--fakeeh-teal);
  outline-offset: 2px;
}

/* Bottom bar: dots + counter */
.rh-highlights-bar {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(43, 122, 138, 0.10);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.7rem 0.4rem 0.6rem;
  box-shadow: 0 6px 18px rgba(43, 74, 107, 0.12);
  z-index: 4;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.rh-highlights-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.rh-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(43, 122, 138, 0.22);
  border: 1px solid rgba(43, 122, 138, 0.14);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
  flex-shrink: 0;
}
.rh-dot.is-active {
  width: 26px;
  border-radius: 9999px;
  background: var(--fakeeh-teal);
  border-color: var(--fakeeh-teal);
  box-shadow: 0 2px 10px rgba(43, 122, 138, 0.22);
}
.rh-dot:focus-visible {
  outline: 2px solid var(--fakeeh-teal);
  outline-offset: 2px;
}
.rh-highlights-counter {
  font-size: 0.78rem;
  color: var(--fakeeh-navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  min-width: 3ch;
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.rh-counter-sep { color: var(--text-muted); }

/* Touch helpers */
@media (pointer: coarse) {
  .rh-highlights-arrow { min-height: 44px; min-width: 44px; }
}

/* Responsive */
@media (max-width: 1024px) {
  .rh-highlights-viewport,
  .rh-slide { min-height: 480px; }
  .rh-slide-content { padding: 1.6rem 1.5rem 2.2rem; max-width: 620px; }
}
@media (max-width: 768px) {
  .rh-highlights-viewport,
  .rh-slide { min-height: 440px; }
  .rh-slide-content { padding: 1.25rem 1.15rem 3.2rem; }
  .rh-highlights-arrow { width: 40px; height: 40px; }
  .rh-slide-actions { gap: 0.55rem; }
  .rh-slide-primary, .rh-slide-ghost { font-size: 0.84rem; min-height: 42px; padding: 0.55rem 1rem; }
}
@media (max-width: 640px) {
  .rh-highlights-section { padding: 2.6rem 0; }
  .rh-highlights-slider { border-radius: var(--radius-lg); }
  .rh-highlights-viewport,
  .rh-slide { min-height: 420px; }
  .rh-highlights-arrow { display: none; }
  .rh-slide-content { padding: 1.15rem 1rem 3.4rem; }
  .rh-slide-title { font-size: clamp(1.25rem, 4.2vw, 1.55rem); }
  .rh-slide-desc { font-size: 0.88rem; }
  .rh-highlights-bar { bottom: 10px; padding: 0.35rem 0.55rem; gap: 0.65rem; }
}
@media (max-width: 380px) {
  .rh-highlights-viewport,
  .rh-slide { min-height: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .rh-highlights-track { transition: none !important; }
  .rh-slide-img { transition: none !important; }
  .rh-highlights-progress-bar { transition: none !important; }
}
@media (hover: none) {
  .rh-slide:hover .rh-slide-img { transform: none; }
}

/* ==========================================================================
   7C. CERT HERO SLIDER — Full-width single image per turn (inside certifications)
   One image fills viewport width, 700px height, arrows + dots, RTL-aware
   Placed below heading/desc and above SRC carousel — full-bleed.
   ========================================================================== */
.cert-hero-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #25405d;
  isolation: isolate;
  margin: 1.5rem 0 2rem;
}
.cert-hero-viewport {
  overflow: hidden;
  position: relative;
}
.cert-hero-track {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.52s cubic-bezier(0.16,1,0.3,1);
  will-change: transform;
}
.cert-hero-slide {
  flex: 0 0 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--fakeeh-navy);
  min-height: 700px;
  max-height: 700px;
  display: flex;
  align-items: stretch;
}
.cert-hero-img {
  width: 100%;
  height: 700px;
  min-height: 700px;
  max-height: 700px;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.cert-hero-slide:hover .cert-hero-img { transform: scale(1.02); }
.cert-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.96);
  border: 1.5px solid var(--border-light);
  color: var(--fakeeh-teal);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.35rem; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 20px rgba(43,74,107,0.16);
  z-index: 4; transition: var(--transition);
}
.cert-hero-arrow:hover { background: var(--fakeeh-teal); color: #FFFFFF; border-color: var(--fakeeh-teal); transform: translateY(-50%) scale(1.04); }
.cert-hero-arrow.prev { right: 16px; }
.cert-hero-arrow.next { left: 16px; }
body.lang-en .cert-hero-arrow.prev { right: auto; left: 16px; }
body.lang-en .cert-hero-arrow.next { left: auto; right: 16px; }
.cert-hero-arrow:focus-visible { outline: 2px solid var(--fakeeh-teal); outline-offset: 2px; }
.cert-hero-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(43,122,138,0.10);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.7rem;
  box-shadow: 0 6px 18px rgba(43,74,107,0.12);
  z-index: 4; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.cert-hero-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(43,122,138,0.22); border: 1px solid rgba(43,122,138,0.14);
  cursor: pointer; transition: all 0.22s cubic-bezier(0.16,1,0.3,1); padding: 0; flex-shrink: 0;
}
.cert-hero-dot.is-active { width: 26px; border-radius: 9999px; background: var(--fakeeh-teal); border-color: var(--fakeeh-teal); box-shadow: 0 2px 10px rgba(43,122,138,0.22); }
.cert-hero-dot:focus-visible { outline: 2px solid var(--fakeeh-teal); outline-offset: 2px; }
@media (max-width: 1024px) { .cert-hero-slide, .cert-hero-img { min-height: 500px; max-height: 500px; height: 500px; } }
@media (max-width: 640px) {
  .cert-hero-slide, .cert-hero-img { min-height: 360px; max-height: 360px; height: 360px; }
  .cert-hero-arrow { display: none; }
}
@media (max-width: 480px) { .cert-hero-slide, .cert-hero-img { min-height: 280px; max-height: 280px; height: 280px; } }
@media (prefers-reduced-motion: reduce) { .cert-hero-track { transition: none !important; } .cert-hero-img { transition: none !important; } }
@media (hover: none) { .cert-hero-slide:hover .cert-hero-img { transform: none; } }

/* ==========================================================================
   8. Section "الاعتمادات الدولية ومراكز التميز" (Single Unified Carousel)
   ========================================================================== */
.certifications-section {
  padding: 5rem 0;
  background: #FBFDFE;
}

.src-carousel-container {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 0;
}

.src-carousel-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.25rem;
  transition: transform 0.4s ease;
  width: max-content;
}

.src-card-item {
  flex: 0 0 270px;
  width: 270px;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 2.25rem 1.25rem;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 310px;
  position: relative;
  transition: var(--transition);
  cursor: pointer;
}

.src-card-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: var(--fakeeh-teal);
}

.src-card-item:focus-visible {
  outline: 2px solid var(--fakeeh-teal);
  outline-offset: 2px;
}

.src-badge-img {
  height: 85px;
  max-width: 130px;
  object-fit: contain;
  margin-bottom: 1.15rem;
  transition: transform 0.3s ease;
}

.src-card-item:hover .src-badge-img {
  transform: scale(1.06);
}

.src-card-title {
  font-size: 1.05rem;
  font-weight: 400 !important;
  color: var(--text-main);
  margin-bottom: 0.4rem;
  line-height: 1.35;
  min-height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.accreditation-org {
  font-size: 0.72rem;
  font-weight: 400 !important;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 0.85rem;
}

.src-card-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--fakeeh-teal);
  font-size: 0.85rem;
  font-weight: 400 !important;
  margin-top: auto;
  transition: var(--transition);
}

.src-card-action:hover {
  color: var(--fakeeh-teal-dark);
}

.carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: #FFFFFF;
  border: 1.5px solid var(--border-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fakeeh-teal);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  z-index: 10;
  font-size: 1.35rem;
  font-weight: 400 !important;
  transition: var(--transition);
}

.carousel-nav-btn:hover {
  background: var(--fakeeh-teal);
  color: #FFFFFF;
  border-color: var(--fakeeh-teal);
}

.carousel-nav-btn.prev {
  right: 5px;
}

.carousel-nav-btn.next {
  left: 5px;
}

body.lang-en .carousel-nav-btn.prev {
  right: auto;
  left: 5px;
}

body.lang-en .carousel-nav-btn.next {
  left: auto;
  right: 5px;
}

/* ==========================================================================
   9. Hospital Footer — Impeccable Polish (Mayo mega-footer + Cleveland utility)
   Craft floor: tint secondary text from navy hue, offset blur depth,
   tight groups/generous separation, 44px targets, themed focus rings.
   ========================================================================== */
.fakeeh-footer {
  background: var(--fakeeh-navy);
  color: #CBD5E1;
  padding: 3.5rem 0 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

.fakeeh-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1260px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(126, 211, 232, 0.14), transparent);
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr 1.15fr;
  gap: 2rem 1.75rem;
  padding-bottom: 2.5rem;
}

.footer-logo-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.footer-logo-img {
  height: 42px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}

.footer-desc {
  font-size: 0.875rem;
  font-weight: 400 !important;
  color: #B8C6D5; /* tinted from navy, not gray #94A3B8 */
  line-height: 1.7;
  margin-bottom: 1.15rem;
  max-width: 34ch;
}

/* Trust strip — calm, pill, Mayo/Cleveland pattern: capacity at a glance */
.footer-trust-strip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  padding: 0.45rem 0.75rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-pill);
  margin-bottom: 1.15rem;
}

.footer-trust-item {
  font-size: 0.73rem;
  color: #D4E3EE;
  white-space: nowrap;
}

.footer-trust-item strong {
  color: #FFFFFF;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
}

.footer-trust-divider {
  width: 3px;
  height: 3px;
  background: rgba(126, 211, 232, 0.55);
  border-radius: 50%;
  flex-shrink: 0;
}

.footer-findus {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  color: #B8C6D5;
}

.footer-contact-item svg {
  color: #7ED3E8;
  flex-shrink: 0;
  opacity: 0.95;
}

.footer-inline-sep {
  color: #5A758A;
  margin: 0 0.15rem;
}

.footer-col-head {
  font-size: 0.98rem;
  font-weight: 400 !important;
  color: #FFFFFF;
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
  position: relative;
  padding-bottom: 0.55rem;
}

.footer-col-head::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22px;
  height: 2px;
  background: rgba(126, 211, 232, 0.45);
  border-radius: 9999px;
}

body.lang-en .footer-col-head::after {
  right: auto;
  left: 0;
}

.footer-links-col {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.footer-link-a {
  font-size: 0.84rem;
  font-weight: 400 !important;
  color: #9FB3C5; /* tinted light steel on navy #2b4a6b */
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  line-height: 1.5;
}

.footer-link-inline {
  font-size: 0.84rem;
  color: #B8C6D5;
}

.footer-link-a:hover {
  color: #FFFFFF;
  transform: translateX(-1.5px);
}

body.lang-en .footer-link-a:hover {
  transform: translateX(1.5px);
}

.footer-link-cta {
  color: #D4EAEA;
  position: relative;
}

.footer-link-cta::before {
  content: '→';
  font-size: 0.9em;
  color: #7ED3E8;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

body.lang-en .footer-link-cta::before {
  content: '←';
}

.footer-link-cta:hover::before {
  opacity: 1;
  transform: translateX(0);
}

.footer-hours-note {
  font-size: 0.74rem;
  color: #8CA0B2;
  line-height: 1.6;
  margin-top: 0.35rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Newsletter — restrained, not marketing loud */
.footer-newsletter {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-newsletter-label {
  font-size: 0.78rem;
  color: #D4E3EE;
  display: block;
  margin-bottom: 0.45rem;
}

.footer-newsletter-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.footer-newsletter-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  color: #FFFFFF;
  font-size: 0.82rem;
  padding: 0.45rem 0.85rem;
  min-height: 38px;
  transition: var(--transition);
}

.footer-newsletter-input::placeholder {
  color: #8CA0B2;
}

.footer-newsletter-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(126, 211, 232, 0.45);
}

.footer-newsletter-btn {
  background: var(--fakeeh-teal);
  color: #FFFFFF;
  font-size: 0.78rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  border: 1px solid transparent;
  min-height: 38px;
  white-space: nowrap;
  transition: var(--transition);
}

.footer-newsletter-btn:hover {
  background: var(--fakeeh-teal-hover);
  transform: translateY(-1px);
}

.footer-newsletter-btn:focus-visible,
.footer-social-link:focus-visible,
.footer-link-a:focus-visible {
  outline: 2px solid #7ED3E8;
  outline-offset: 2px;
}

/* Social — rh.med.sa icons, placed bottom where hospitals group them */
.footer-social {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
}

.footer-social-link {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 50%;
  color: #B8C6D5;
  transition: var(--transition);
}

.footer-social-link:hover {
  background: #FFFFFF;
  color: var(--fakeeh-navy);
  border-color: #FFFFFF;
  transform: translateY(-1.5px);
}

.footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.80rem;
  font-weight: 400 !important;
  color: #8CA0B2;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.14);
  margin-top: 0;
}

.footer-bottom-left {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.footer-copy {
  color: #B8C6D5;
  font-size: 0.80rem;
  letter-spacing: 0.01em;
}

.footer-bottom-links {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  font-size: 0.77rem;
}

.footer-bottom-link {
  color: #8CA0B2;
  transition: var(--transition);
  font-size: 0.77rem;
  white-space: nowrap;
}

.footer-bottom-link:hover {
  color: #FFFFFF;
}

.footer-bottom-dot {
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  flex-shrink: 0;
}

.footer-bottom-tagline {
  color: #7FA0B8;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.footer-backtop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #B8C6D5;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  transition: var(--transition);
  flex-shrink: 0;
}

.footer-backtop:hover {
  background: #FFFFFF;
  color: var(--fakeeh-navy);
  border-color: #FFFFFF;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.footer-backtop:focus-visible {
  outline: 2px solid #7ED3E8;
  outline-offset: 2px;
}

/* ==========================================================================
   10. Modals
   ========================================================================== */
.simple-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 74, 107, 0.75);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

.simple-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.simple-modal-card {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  position: relative;
  transform: translateY(20px);
  transition: var(--transition);
}

.simple-modal-overlay.active .simple-modal-card {
  transform: translateY(0);
}

.modal-head {
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-head h3 {
  font-size: 1.2rem;
  font-weight: 400 !important;
  color: var(--fakeeh-teal);
}

.modal-close-x {
  background: var(--bg-box);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 400 !important;
}

.modal-close-x:hover {
  background: #EF4444;
  color: #FFFFFF;
}

.modal-inner-body {
  padding: 1.5rem;
}

.form-group-row {
  margin-bottom: 1rem;
}

.form-group-row label {
  display: block;
  font-size: 0.85rem;
  font-weight: 400 !important;
  color: var(--text-main);
  margin-bottom: 0.35rem;
}

.form-input-field {
  width: 100%;
  padding: 0.65rem 0.9rem;
  background: var(--bg-box);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 400 !important;
  color: var(--text-main);
}

.form-input-field:focus {
  border-color: var(--fakeeh-teal);
  background: #FFFFFF;
}

/* ==========================================================================
   11. Comprehensive Responsive Breakpoints (Tablet & Mobile)
   Benchmark notes: Cleveland ~640/768/1024 with drawer; Mayo hides desktop
   mega-menu at 1024 and uses full-screen drawer + sticky bottom CTA .368/1024+
   RH translation: keep trinity, but drawer becomes full-height scrollable panel
   at ≤991 and bottom thumb-bar appears at ≤768 (appointment+call)
   ========================================================================== */

/* Desktop-narrow (1025–1260): 8 RH links need tighter rhythm — Impeccable spacing scale */
@media (max-width: 1260px) and (min-width: 1025px) {
  .fakeeh-nav {
    gap: 0.75rem;
  }
  .fakeeh-nav-link {
    font-size: 0.82rem;
  }
  .nav-portal-link {
    font-size: 0.78rem;
    padding: 0.32rem 0.6rem;
  }
}

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
  .header-email-ghost {
    display: none;
  }
  .fakeeh-nav {
    gap: 1.15rem;
  }
  .fakeeh-nav-link {
    font-size: 0.85rem;
  }
  .about-simple-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  /* Reorder: image first on tablet/mobile (requested) */
  .about-simple-grid .about-image-wrapper {
    order: -1;
  }
  .about-simple-grid .about-text-content {
    order: 1;
  }
  .stats-boxes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .facilities-rich-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .specialties-boxes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-top-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile & Small Tablets (max-width: 991px) — Cleveland drawer pattern + Mayo thumb-zone CTA */
@media (max-width: 991px) {
  .fakeeh-top-bar {
    padding: 0.38rem 0;
    padding-top: max(0.38rem, env(safe-area-inset-top));
    font-size: 0.78rem;
  }
  .top-bar-group-link {
    font-size: 0.78rem;
  }
  .top-bar-group-link span:last-child {
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .top-bar-emergency {
    padding: 0.24rem 0.6rem;
    gap: 0.5rem;
  }
  .top-bar-location {
    display: none;
  }
  .top-bar-divider:nth-of-type(2) {
    display: none;
  }
  .top-bar-phone span {
    font-size: 0.78rem;
  }
  .top-bar-lang-btn {
    padding: 0.2rem 0.7rem;
    font-size: 0.72rem;
    min-height: 32px;
  }

  .header-top-row {
    padding: 0.62rem 0;
    gap: 0.6rem;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .header-brand-cluster {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.6rem;
  }
  .fakeeh-brand-logo {
    flex-shrink: 0;
    min-width: 0;
  }
  .fakeeh-logo-img {
    width: clamp(98px, 24vw, 132px);
    max-width: 100%;
  }
  .header-actions-wrap {
    flex-shrink: 0;
    gap: 0.38rem;
    flex-wrap: nowrap;
  }
  .header-trust-micro {
    display: none;
  }
  .header-phone-ghost {
    padding: 0.45rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
  }
  .header-phone-text {
    display: none;
  }
  .header-email-ghost {
    display: none;
  }
  .header-btn-appointment {
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
    min-height: 40px;
  }
  .header-btn-contact {
    padding: 0.5rem 0.9rem;
    font-size: 0.82rem;
    min-height: 40px;
  }
  .header-btn-appointment svg {
    width: 14px;
    height: 14px;
  }
  .mobile-menu-btn {
    display: flex;
  }

  /* Drawer — full-height scrollable panel (Mayo/Cleveland pattern)
     Replaces slideDown with viewport-constrained drawer, thumb-friendly
     Fix: tiny height — use explicit height + min-height fallbacks and remove bottom:0 conflict */
  .header-bottom-row {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-height, 64px);
    background: #FFFFFF;
    padding: 0.75rem 1.25rem max(1.25rem, env(safe-area-inset-bottom)) 1.25rem;
    box-shadow: 0 12px 32px rgba(43, 74, 107, 0.12);
    border-top: 1px solid var(--border-light);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 999;
    height: calc(100vh - var(--header-height, 64px));
    height: calc(100dvh - var(--header-height, 64px));
    height: calc(100svh - var(--header-height, 64px));
    max-height: calc(100vh - var(--header-height, 64px));
    max-height: calc(100dvh - var(--header-height, 64px));
    max-height: calc(100svh - var(--header-height, 64px));
    min-height: 320px;
    min-height: min(320px, 70vh);
  }

  .header-bottom-row.mobile-active {
    display: flex;
    flex-direction: column;
    animation: slideDownMobile 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes slideDownMobile {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .nav-group-separator,
  .nav-portal-link {
    display: none;
  }

  .header-bottom-row.mobile-active .nav-portal-link {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-top: 0.85rem;
    padding: 0.85rem;
    min-height: 44px;
    font-size: 0.9rem;
  }

  .fakeeh-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .fakeeh-nav-link {
    padding: 0.9rem 0.5rem;
    border-bottom: 1px solid #F1F5F9;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
  }

  .fakeeh-nav-link:last-child {
    border-bottom: none;
  }

  .fakeeh-nav-link::after {
    display: none;
  }

  .hero-video-section {
    height: 74svh;
    height: 74dvh;
    min-height: 520px;
    max-height: 680px;
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
    padding-inline: 0;
  }
  .hero-content-wrapper {
    padding: 0 1rem;
  }
  .hero-floating-actions-bar {
    width: 100%;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.9rem;
    border-radius: var(--radius-lg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .btn-hero-book, .btn-hero-contact {
    width: 100%;
    max-width: 100%;
    padding: 0.85rem 1.5rem;
    font-size: 0.95rem;
    min-height: 46px;
  }

  .about-simple-section, .facilities-cards-section, .specialties-boxes-section, .certifications-section {
    padding: clamp(2.5rem, 6vw, 3.5rem) 0;
  }
  .about-features-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .about-main-img {
    height: clamp(260px, 55vw, 320px);
    aspect-ratio: 4 / 3;
  }
  .section-head {
    margin-bottom: 2.25rem;
  }

  .facilities-rich-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .facility-rich-card {
    min-height: 300px;
    min-height: clamp(280px, 70vw, 340px);
  }
  /* Tap-friendly on touch — no hover lift, use active */
  .facility-rich-card:hover {
    transform: none;
  }

  .specialties-boxes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }
  .specialty-icon-card {
    padding: 1.4rem 0.85rem;
    min-height: 100%;
  }
  .specialty-badge-circle {
    width: 52px;
    height: 52px;
    margin-bottom: 0.85rem;
  }
  .specialty-card-name {
    font-size: clamp(0.92rem, 2.2vw, 1.05rem);
  }
  .specialty-card-brief {
    font-size: 0.78rem;
  }

  /* Carousel — fluid card, swipeable (Cleveland/Mayo swipe pattern) */
  .src-carousel-container {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
  }
  .src-carousel-container::-webkit-scrollbar { display: none; }
  .src-carousel-track {
    scroll-snap-align: start;
  }
  .src-card-item {
    flex: 0 0 min(78vw, 280px);
    width: min(78vw, 280px);
    scroll-snap-align: center;
    min-height: 300px;
  }
  .carousel-nav-btn {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }
  .carousel-nav-btn.prev {
    right: 4px;
  }
  .carousel-nav-btn.next {
    left: 4px;
  }

  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .footer-bottom-bar {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
    align-items: center;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  .footer-bottom-left {
    align-items: center;
    text-align: center;
  }
  .footer-bottom-links {
    justify-content: center;
  }
  .footer-link-a {
    min-height: 36px;
    align-items: center;
  }
}

/* Tablet refinement 640-991: keep 2-col specialties but tighten */
@media (max-width: 991px) and (min-width: 641px) {
  .specialties-boxes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .facilities-rich-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Small Smartphone (max-width: 640px) — thumb-zone + full fluid */
@media (max-width: 640px) {
  .container {
    padding: 0 1rem;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  .fakeeh-top-bar {
    padding: 0.32rem 0;
  }
  .top-bar-inner {
    gap: 0.5rem;
  }
  .top-bar-group-link {
    font-size: 0.74rem;
  }
  .top-bar-group-link span:last-child {
    max-width: 108px;
  }
  .fakeeh-logo-img {
    width: clamp(92px, 28vw, 108px);
  }
  .header-top-row {
    gap: 0.35rem;
    padding: 0.55rem 0;
    flex-wrap: nowrap;
  }
  .header-brand-cluster {
    flex: 1 1 auto;
    min-width: 0;
  }
  .header-actions-wrap {
    gap: 0.32rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
  .header-btn-appointment {
    padding: 0.45rem 0.85rem;
    font-size: 0.78rem;
    min-height: 40px;
    gap: 0.35rem;
  }
  .header-btn-contact {
    padding: 0.42rem 0.75rem;
    font-size: 0.78rem;
    min-height: 40px;
  }
  .header-btn-appointment span, .header-btn-contact span {
    font-size: 0.78rem;
  }
  .header-lang-switch {
    padding: 0.4rem 0.62rem;
    min-height: 40px;
  }
  .mobile-menu-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
  .stats-boxes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .stat-box-card {
    padding: 1.25rem 0.75rem;
    border-radius: var(--radius-md);
  }
  .stat-number {
    font-size: clamp(1.4rem, 5vw, 1.85rem);
  }
  .stat-label {
    font-size: 0.78rem;
    line-height: 1.4;
  }
  .specialties-boxes-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .specialty-icon-card {
    flex-direction: row;
    text-align: start;
    gap: 0.9rem;
    padding: 1rem;
    align-items: center;
  }
  body.lang-en .specialty-icon-card {
    flex-direction: row;
  }
  .specialty-badge-circle {
    margin-bottom: 0;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
  }
  .specialty-card-name {
    font-size: 0.95rem;
  }
  .facility-rich-card {
    min-height: 280px;
  }
  .about-actions-row {
    flex-direction: column;
    align-items: stretch;
  }
  .about-actions-row .btn-hero-book,
  .about-actions-row .btn-card-learn-more {
    width: 100%;
    justify-content: center;
  }
  .hero-video-section {
    height: 70svh;
    height: 70dvh;
    min-height: 480px;
    max-height: 640px;
  }
  .src-card-item {
    flex: 0 0 78vw;
    width: 78vw;
  }
  .carousel-nav-btn {
    display: none;
  }
}

/* Mid-small 480px — fix header overlap: hide secondary Contact pill to free ~90px (Cleveland keeps only primary CTA on ≤480) */
@media (max-width: 480px) {
  .header-btn-contact {
    display: none !important;
  }
  .fakeeh-logo-img {
    width: 98px;
  }
  .header-top-row {
    gap: 0.28rem;
  }
  .header-actions-wrap {
    gap: 0.26rem;
  }
  .header-btn-appointment {
    padding: 0.42rem 0.75rem;
    font-size: 0.76rem;
  }
  .header-lang-switch {
    padding: 0.38rem 0.55rem;
    font-size: 0.74rem;
  }
  .hero-video-section {
    height: 68svh;
    height: 68dvh;
    min-height: 460px;
    max-height: 620px;
  }
}

/* Extra-small 360px — prevent breakage (Cleveland supports 320) */
@media (max-width: 380px) {
  .top-bar-emergency {
    gap: 0.3rem;
    padding: 0.18rem 0.4rem;
  }
  .top-bar-phone {
    font-size: 0.74rem;
  }
  .top-bar-emergency-indicator {
    font-size: 0.7rem;
  }
  .top-bar-emergency-indicator span:last-child {
    display: none;
  }
  .top-bar-divider:first-of-type {
    display: none;
  }
  .fakeeh-logo-img {
    width: 92px;
  }
  .header-btn-appointment {
    padding: 0.4rem 0.62rem;
    font-size: 0.74rem;
  }
  .header-actions-wrap {
    gap: 0.22rem;
  }
  .stats-boxes-grid {
    gap: 0.6rem;
  }
  .stat-box-card {
    padding: 1rem 0.6rem;
  }
  .src-card-item {
    flex: 0 0 84vw;
    width: 84vw;
  }
  .footer-trust-strip {
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
  }
}

/* ==========================================================================
   12. Touch & Input Adaptation — pointer:coarse, hover:none, focus, safe-area
   Cleveland/Mayo disable hover-lift on touch, enlarge hit-areas, use :active
   ========================================================================== */
@media (pointer: coarse) {
  .header-btn-appointment, .header-btn-contact,
  .btn-hero-book, .btn-hero-contact,
  .nav-portal-link, .footer-newsletter-btn {
    min-height: 44px;
  }
  .fakeeh-nav-link {
    min-height: 44px;
  }
  /* Remove hover lifts that feel sticky on touch */
  .stat-box-card:hover, .specialty-icon-card:hover,
  .src-card-item:hover, .facility-rich-card:hover {
    transform: none;
    box-shadow: var(--shadow-card);
  }
  .specialty-icon-card:hover .specialty-badge-circle {
    transform: none;
  }
}

@media (hover: none) {
  .facility-rich-card:hover .facility-rich-img {
    transform: none;
  }
  .src-card-item:hover .src-badge-img {
    transform: none;
  }
  .fakeeh-nav-link:hover::after {
    width: 0;
  }
  /* Use active for touch feedback instead */
  .header-btn-appointment:active, .btn-hero-book:active {
    transform: scale(0.98);
    background: var(--fakeeh-teal-dark);
  }
  .specialty-icon-card:active {
    background: #FFFFFF;
    border-color: var(--fakeeh-teal);
  }
}

/* Fluid inputs — prevent iOS zoom (16px minimum) */
@media (max-width: 768px) {
  .form-input-field, .footer-newsletter-input {
    font-size: 16px !important;
  }
  .modal-head h3 {
    font-size: clamp(1.05rem, 3.5vw, 1.2rem);
  }
  .simple-modal-card {
    margin: 0.75rem;
    max-height: 92dvh;
    max-height: 92svh;
    border-radius: var(--radius-lg);
  }
}

/* Landscape small-height — hero shouldn't dominate (Cleveland collapses hero) */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-video-section {
    height: auto;
    min-height: 320px;
    padding-top: 1.5rem;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
  .header-bottom-row {
    height: 78dvh;
    max-height: 78dvh;
    min-height: 240px;
  }
}

/* Reduced motion — honor on mobile */
@media (prefers-reduced-motion: reduce) {
  .header-bottom-row.mobile-active {
    animation: none;
  }
  .hero-video-bg iframe {
    transform: translate(-50%, -50%) !important;
  }
}

/* High-contrast & focus — thumb-zone bottom bar helper */
.mobile-sticky-cta {
  display: none;
}

/* Bottom thumb-zone sticky bar — Mayo/Cleveland keep appointment in thumb reach
   Shows only on mobile ≤768, inside safe-area, respects RTL */
@media (max-width: 768px) {
  .mobile-sticky-cta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -8px 28px rgba(43, 74, 107, 0.10);
    padding: 0.6rem max(1rem, env(safe-area-inset-right)) max(0.6rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    gap: 0.6rem;
    align-items: center;
  }
  .mobile-sticky-cta .sticky-cta-call {
    flex: 0 0 48px;
    width: 48px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-pill);
    color: var(--fakeeh-teal);
    flex-shrink: 0;
  }
  .mobile-sticky-cta .sticky-cta-book {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    background: var(--fakeeh-teal);
    color: #FFFFFF;
    font-size: 0.92rem;
    min-height: 44px;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-pill);
    box-shadow: 0 6px 18px rgba(43, 122, 138, 0.28);
    border: 1.5px solid transparent;
  }
  .mobile-sticky-cta .sticky-cta-book:active {
    background: var(--fakeeh-teal-dark);
    transform: scale(0.98);
  }
  /* Reserve space so footer isn't hidden behind sticky bar */
  body {
    padding-bottom: calc(68px + env(safe-area-inset-bottom));
  }
  /* When drawer open, hide sticky bar to avoid overlap */
  body.menu-open .mobile-sticky-cta {
    display: none;
  }
}

/* Container query-like intrinsic grids — no fixed breakpoints needed */
@supports (container-type: inline-size) {
  .facilities-rich-grid, .specialties-boxes-grid, .stats-boxes-grid {
    container-type: inline-size;
  }
}

/* ==========================================================================
   About Page — full surface inside established RH world (AGENTS §1 locked)
   Benchmark: Mayo About (alternating editorial, values, human story) +
              Cleveland About (Who we are + Facts grid + Resources cards)
   Tokens only: --fakeeh-teal/navy/light, --border-card/light, --radius-*, shadow
   No eyebrow/kicker above heading (craft-floor ban) — hero title speaks alone
   One authored motion: aboutIn (blur+translate) on hero only, expo ease
   ========================================================================== */

/* — Hero (Read mode) — compact, not Persuade video hero */
.about-hero {
  position: relative;
  background: linear-gradient(135deg, var(--fakeeh-navy) 0%, #1a4a63 45%, var(--fakeeh-teal) 100%);
  color: #FFFFFF;
  padding: 3.2rem 0 3.6rem;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}
.about-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 400px at 85% 20%, rgba(126,211,232,0.18) 0%, transparent 60%),
    radial-gradient(900px 500px at 10% 90%, rgba(255,255,255,0.06) 0%, transparent 60%);
  z-index: 0;
}
.about-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
}
.about-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.82);
  margin-bottom: 1.1rem;
}
.about-breadcrumb a { color: rgba(255,255,255,0.92); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.35); }
.about-breadcrumb a:hover { color: #FFFFFF; text-decoration-color: #FFFFFF; }
.about-hero-title {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem);
  font-weight: 400 !important;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: 1rem;
  color: #FFFFFF;
  animation: aboutIn 0.7s cubic-bezier(0.16,1,0.3,1) both;
}
.about-hero-desc {
  font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.08rem);
  line-height: 1.85;
  color: #D4E3EE;
  max-width: 68ch;
  text-wrap: pretty;
  margin-bottom: 1.5rem;
  animation: aboutIn 0.7s cubic-bezier(0.16,1,0.3,1) 0.08s both;
}
.about-hero-trust {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.9rem;
  margin-bottom: 1.4rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: aboutIn 0.7s cubic-bezier(0.16,1,0.3,1) 0.14s both;
}
.about-hero-trust-item { font-size: 0.78rem; color: #FFFFFF; white-space: nowrap; }
.about-hero-trust-item strong { font-weight: 400 !important; color: #FFFFFF; }
.about-hero-trust-dot { width: 3px; height: 3px; background: rgba(126,211,232,0.65); border-radius: 50%; flex-shrink: 0; }
.about-hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; animation: aboutIn 0.7s cubic-bezier(0.16,1,0.3,1) 0.2s both; }
.about-hero-ghost {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(255,255,255,0.12); color: #FFFFFF;
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-pill);
  padding: 0.62rem 1.2rem; min-height: 42px;
  font-size: 0.88rem; transition: var(--transition);
}
.about-hero-ghost:hover { background: #FFFFFF; color: var(--fakeeh-navy); border-color: #FFFFFF; transform: translateY(-1px); }
.about-hero-ghost:focus-visible { outline: 2px solid #7ED3E8; outline-offset: 2px; }
@keyframes aboutIn { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .about-hero-title,.about-hero-desc,.about-hero-trust,.about-hero-actions { animation: none !important; } }

/* — Editorial (Mayo alternating) */
.about-editorial { padding: 4.5rem 0; background: #FFFFFF; }
.about-editorial-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items: center; }
.about-editorial-media { position: relative; }
.about-editorial-img { width: 100%; height: 480px; object-fit: cover; border-radius: var(--radius-xl); box-shadow: 0 16px 36px rgba(43,74,107,0.12); display: block; }
.about-editorial-badge {
  position: absolute; top: 1.25rem; right: 1.25rem;
  background: rgba(255,255,255,0.96); backdrop-filter: blur(8px);
  border: 1px solid rgba(43,122,138,0.12); border-radius: var(--radius-md);
  padding: 0.7rem 1rem; display: inline-flex; align-items: center; gap: 0.7rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
body.lang-en .about-editorial-badge { right: auto; left: 1.25rem; }
.about-editorial-copy { min-width: 0; }
.about-editorial-lead { font-size: 1.02rem; color: var(--text-main); line-height: 1.9; margin-bottom: 1rem; }
.about-editorial-body { font-size: 0.95rem; color: var(--text-muted); line-height: 1.85; margin-bottom: 1.6rem; }
.about-editorial-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.about-editorial-check { display: flex; gap: 0.7rem; align-items: flex-start; }

/* — Pillars (vision/mission/values) — 3-up, first accent */
.about-pillars { padding: 4.2rem 0; background: var(--bg-page); }
.about-pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.35rem; }
.about-pillar-card {
  background: #FFFFFF; border: 1px solid var(--border-card);
  border-radius: var(--radius-lg); padding: 1.75rem 1.45rem;
  box-shadow: var(--shadow-card); transition: var(--transition);
  display: flex; flex-direction: column; gap: 0.75rem;
}
.about-pillar-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: rgba(43,122,138,0.18); }
.about-pillar-card--accent { background: linear-gradient(180deg, #FFFFFF 0%, var(--fakeeh-teal-light) 100%); border-color: rgba(43,122,138,0.18); }
.pillar-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--fakeeh-teal-light); border: 1px solid rgba(43,122,138,0.14); color: var(--fakeeh-teal); display: flex; align-items: center; justify-content: center; }
.about-pillar-card h3 { font-size: 1.08rem; color: var(--fakeeh-navy); font-weight: 400 !important; }
.pillar-quote { font-size: 1rem; color: var(--fakeeh-teal); line-height: 1.7; font-style: italic; border-inline-start: 2px solid var(--fakeeh-teal); padding-inline-start: 0.85rem; }
body.lang-en .pillar-quote { border-inline-start: none; border-left: 2px solid var(--fakeeh-teal); }
.pillar-body { font-size: 0.88rem; color: var(--text-muted); line-height: 1.75; }
.pillar-list { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.pillar-list li { font-size: 0.84rem; color: var(--text-main); padding-inline-start: 1.15rem; position: relative; }
.pillar-list li::before { content: '—'; position: absolute; inset-inline-start: 0; color: var(--fakeeh-teal); }
body.lang-en .pillar-list li::before { inset-inline-start: auto; inset-inline-end: auto; left: 0; }
.pillar-values { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pillar-value-chip { font-size: 0.78rem; color: var(--fakeeh-teal); background: var(--fakeeh-teal-light); border: 1px solid rgba(43,122,138,0.14); padding: 0.28rem 0.7rem; border-radius: var(--radius-pill); }

/* — Facts (Cleveland facts grid, RH numbers only) */
.about-facts { padding: 4.2rem 0; background: #FFFFFF; }
.about-facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.about-fact-card {
  background: var(--bg-box); border: 1px solid rgba(43,122,138,0.10);
  border-radius: var(--radius-lg); padding: 1.6rem 1.2rem;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  transition: var(--transition);
}
.about-fact-card:hover { background: #FFFFFF; border-color: var(--fakeeh-teal); box-shadow: var(--shadow-card); transform: translateY(-3px); }
.about-fact-card--accent { background: var(--fakeeh-navy); border-color: var(--fakeeh-navy); color: #FFFFFF; }
.about-fact-card--accent .about-fact-number { color: #7ED3E8; }
.about-fact-card--accent .about-fact-label { color: #FFFFFF; }
.about-fact-card--accent .about-fact-note { color: #8CA0B2; }
.about-fact-card--accent .about-fact-icon { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); color: #7ED3E8; }
.about-fact-icon { width: 44px; height: 44px; border-radius: 50%; background: #FFFFFF; border: 1px solid var(--border-light); color: var(--fakeeh-teal); display: flex; align-items: center; justify-content: center; margin-bottom: 0.4rem; }
.about-fact-number { font-size: 1.9rem; color: var(--fakeeh-teal); line-height: 1; font-variant-numeric: tabular-nums; }
.about-fact-label { font-size: 0.9rem; color: var(--text-main); }
.about-fact-note { font-size: 0.76rem; color: var(--text-muted); }
.about-facts-foot { text-align: center; margin-top: 1.4rem; font-size: 0.82rem; color: var(--text-muted); display: flex; justify-content: center; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.about-facts-foot a { color: var(--fakeeh-teal); text-decoration: underline; text-underline-offset: 3px; }
.about-facts-foot a:hover { color: var(--fakeeh-teal-dark); }

/* — Timeline */
.about-timeline { padding: 4.2rem 0; background: var(--bg-page); }
.about-timeline-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; padding-top: 1.2rem; }
.about-timeline-track::before {
  content: ''; position: absolute; top: 1.95rem; right: 2rem; left: 2rem;
  height: 1px; background: linear-gradient(90deg, rgba(43,122,138,0.14), rgba(43,122,138,0.08));
  border-radius: 9999px;
}
.about-timeline-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }
.about-timeline-dot { width: 14px; height: 14px; background: var(--fakeeh-teal); border: 3px solid #FFFFFF; box-shadow: 0 0 0 4px rgba(43,122,138,0.14); border-radius: 50%; position: relative; z-index: 1; flex-shrink: 0; }
.about-timeline-dot--future { background: #FFFFFF; border-color: var(--fakeeh-teal); }
.about-timeline-card { background: #FFFFFF; border: 1px solid var(--border-card); border-radius: var(--radius-md); padding: 1.2rem 1.15rem; width: 100%; box-shadow: var(--shadow-card); text-align: start; }
.about-timeline-card--accent { background: var(--fakeeh-teal-light); border-color: rgba(43,122,138,0.16); }
.about-timeline-kicker { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--fakeeh-teal); text-transform: uppercase; }
.about-timeline-card h3 { font-size: 0.98rem; color: var(--fakeeh-navy); margin: 0.35rem 0 0.45rem; line-height: 1.4; }
.about-timeline-card p { font-size: 0.84rem; color: var(--text-muted); line-height: 1.75; }

/* — Leadership */
.about-leadership { padding: 4.2rem 0; background: #FFFFFF; }
.about-leadership-card { display: grid; grid-template-columns: 360px 1fr; gap: 2.2rem; align-items: center; background: #FFFFFF; border: 1px solid var(--border-card); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-card); }
.about-leadership-media img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; }
.about-leadership-copy { padding: 2rem 2rem 2rem 0; }
body.lang-en .about-leadership-copy { padding: 2rem 0 2rem 2rem; }
.about-quote { font-size: 1.15rem; color: var(--fakeeh-navy); line-height: 1.8; text-wrap: pretty; margin: 1rem 0 1.1rem; border: none; padding: 0; }
.about-leadership-meta { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 1rem; }
.about-leadership-meta strong { font-size: 0.9rem; color: var(--text-main); }
.about-leadership-meta span { font-size: 0.78rem; color: var(--text-muted); }
.about-leadership-actions { display: inline-flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; font-size: 0.84rem; }
.about-link-plain { display: inline-flex; gap: 0.35rem; align-items: center; color: var(--fakeeh-teal); }
.about-link-plain:hover { color: var(--fakeeh-teal-dark); }
.about-dot { color: var(--text-light); }

/* — Commitments */
.about-commitments { padding: 4.2rem 0; background: var(--bg-page); }
.about-commitments-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.about-commit-card { background: #FFFFFF; border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: 1.5rem 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; transition: var(--transition); }
.about-commit-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: rgba(43,122,138,0.14); }
.commit-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--fakeeh-teal-light); border: 1px solid rgba(43,122,138,0.12); color: var(--fakeeh-teal); display: flex; align-items: center; justify-content: center; }
.about-commit-card h3 { font-size: 0.98rem; color: var(--text-main); }
.about-commit-card p { font-size: 0.84rem; color: var(--text-muted); line-height: 1.7; }

/* — CTA band */
.about-cta-band { background: linear-gradient(135deg, var(--fakeeh-teal) 0%, var(--fakeeh-navy) 100%); color: #FFFFFF; padding: 2.6rem 0; }
.about-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.about-cta-copy h2 { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.95rem); color: #FFFFFF; margin-bottom: 0.5rem; line-height: 1.3; text-wrap: balance; }
.about-cta-copy p { font-size: 0.95rem; color: #D4E3EE; line-height: 1.7; margin-bottom: 0.75rem; max-width: 56ch; }
.about-cta-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; font-size: 0.84rem; color: #B8C6D5; }
.about-cta-meta a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.35); }
.about-cta-meta a:hover { text-decoration-color: #FFFFFF; }
.about-cta-phone { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.about-cta-actions { display: flex; gap: 0.65rem; flex-wrap: wrap; align-items: center; flex-shrink: 0; }
.about-cta-primary {
  background: #FFFFFF; color: var(--fakeeh-navy);
  padding: 0.7rem 1.35rem; border-radius: var(--radius-pill); min-height: 44px;
  display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18); transition: var(--transition); cursor: pointer;
}
.about-cta-primary:hover { transform: translateY(-1.5px); box-shadow: 0 12px 28px rgba(0,0,0,0.22); }
.about-cta-ghost {
  background: transparent; color: #FFFFFF; border: 1.5px solid rgba(255,255,255,0.28);
  padding: 0.7rem 1.2rem; border-radius: var(--radius-pill); min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem;
  transition: var(--transition); cursor: pointer;
}
.about-cta-ghost:hover { background: #FFFFFF; color: var(--fakeeh-navy); border-color: #FFFFFF; }
.about-cta-ghost--light { border-color: rgba(255,255,255,0.45); }
.about-cta-primary:focus-visible, .about-cta-ghost:focus-visible { outline: 2px solid #7ED3E8; outline-offset: 2px; }

/* — Header active state (uses token, not new color) */
.fakeeh-nav-link.active { color: var(--fakeeh-teal); }
.fakeeh-nav-link.active::after { width: 100%; }

/* — About responsive */
@media (max-width: 1024px) {
  .about-editorial-grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-editorial-img { height: 380px; }
  .about-pillars-grid { grid-template-columns: 1fr; }
  .about-facts-grid { grid-template-columns: repeat(2, 1fr); }
  .about-timeline-track { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .about-timeline-track::before { display: none; }
  .about-leadership-card { grid-template-columns: 1fr; }
  .about-leadership-media img { min-height: 320px; max-height: 360px; }
  .about-leadership-copy { padding: 1.5rem; }
  body.lang-en .about-leadership-copy { padding: 1.5rem; }
  .about-commitments-grid { grid-template-columns: repeat(2, 1fr); }
  .about-cta-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .about-hero { padding: 2.2rem 0 2.4rem; }
  .about-editorial, .about-pillars, .about-facts, .about-timeline, .about-leadership, .about-commitments { padding: 2.6rem 0; }
  .about-editorial-img { height: 300px; border-radius: var(--radius-lg); }
  .about-editorial-checks { grid-template-columns: 1fr; }
  .about-facts-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.85rem; }
  .about-fact-card { padding: 1.2rem 0.8rem; }
  .about-timeline-track { grid-template-columns: 1fr; }
  .about-commitments-grid { grid-template-columns: 1fr; }
  .about-cta-actions { width: 100%; }
  .about-cta-actions .about-cta-primary, .about-cta-actions .about-cta-ghost { flex: 1; justify-content: center; }
}

/* ==========================================================================
   Polish Pass — enhance design a bit more (impeccable polish, preserve world)
   One authored moment only (hero aboutIn already). Below: rhythm, depth,
   optical alignment, hierarchy — exponential ease, offset blur shadows.
   ========================================================================== */

/* Hero — premium film + hairline + optical balance */
.about-hero {
  padding: 3.6rem 0 4rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.about-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(126,211,232,0.28), transparent);
  z-index: 1;
}
.about-hero-bg {
  background:
    radial-gradient(700px 420px at 82% 18%, rgba(126,211,232,0.20) 0%, transparent 62%),
    radial-gradient(960px 520px at 8% 92%, rgba(255,255,255,0.07) 0%, transparent 60%),
    radial-gradient(1200px 600px at 50% 50%, rgba(43,122,138,0.18) 0%, transparent 70%);
}
.about-hero-title {
  font-size: clamp(1.85rem, 1.35rem + 1.9vw, 2.75rem);
  letter-spacing: -0.03em;
  line-height: 1.22;
  text-wrap: balance;
  position: relative;
  padding-bottom: 0.9rem;
}
.about-hero-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 36px;
  height: 2px;
  background: #7ED3E8;
  border-radius: 9999px;
  opacity: 0.95;
}
body.lang-en .about-hero-title::after { inset-inline-start: auto; left: 0; }
.about-hero-desc {
  color: #DCEBF2;
  max-width: 66ch;
  margin-bottom: 1.65rem;
}
.about-hero-trust {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(43,74,107,0.14), 0 1px 0 rgba(255,255,255,0.10) inset;
  padding: 0.55rem 1rem;
  gap: 0.6rem;
}
.about-hero-trust-item strong { letter-spacing: 0.04em; }
.about-hero-actions .header-btn-appointment { box-shadow: 0 8px 24px rgba(43,74,107,0.28); }
.about-hero-ghost { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Editorial — image depth + badge + check rhythm */
.about-editorial { padding: 5rem 0; }
.about-editorial-grid { gap: 3.4rem; }
.about-editorial-img {
  box-shadow: 0 20px 44px rgba(43,74,107,0.14), 0 1px 0 rgba(43,122,138,0.08) inset;
  border: 1px solid rgba(43,122,138,0.06);
}
.about-editorial-media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, transparent 62%, rgba(43,74,107,0.10) 100%);
  pointer-events: none;
}
.about-editorial-badge {
  box-shadow: 0 12px 32px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.08);
  border: 1px solid rgba(43,122,138,0.10);
  padding: 0.8rem 1.05rem;
}
.about-editorial-lead { font-size: 1.05rem; line-height: 1.9; color: var(--fakeeh-navy); }
.about-editorial-checks { gap: 1.15rem; }
.about-editorial-check .feature-check-icon { box-shadow: 0 2px 8px rgba(43,122,138,0.12); }
.about-editorial-check h3 { letter-spacing: -0.01em; }

/* Pillars — top accent hairline + denser hover */
.about-pillars { padding: 4.6rem 0; }
.about-pillar-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-card);
  box-shadow: 0 8px 24px rgba(43,122,138,0.06);
}
.about-pillar-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--fakeeh-teal), #7ED3E8);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.about-pillar-card:hover::before { opacity: 1; }
.about-pillar-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(43,122,138,0.14); }
.about-pillar-card--accent::before { opacity: 1; }
.pillar-icon { box-shadow: 0 4px 14px rgba(43,122,138,0.12); }
.pillar-value-chip { transition: transform 0.18s ease, background 0.18s ease; }
.pillar-value-chip:hover { transform: translateY(-1px); background: #FFFFFF; }

/* Facts — tighter group, generous separation, tabular nums */
.about-facts { padding: 4.6rem 0; }
.about-facts-grid { gap: 1.35rem; }
.about-fact-card {
  box-shadow: 0 6px 20px rgba(43,122,138,0.05);
  border: 1px solid rgba(43,122,138,0.08);
  position: relative;
  overflow: hidden;
}
.about-fact-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(43,122,138,0.14), transparent);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.about-fact-card:hover::after { opacity: 1; }
.about-fact-card:hover { box-shadow: 0 14px 32px rgba(43,122,138,0.12); }
.about-fact-card--accent { box-shadow: 0 12px 32px rgba(43,74,107,0.22); }
.about-fact-number { font-size: 2rem; letter-spacing: -0.02em; }
.about-facts-foot { color: #5E7285; font-size: 0.80rem; margin-top: 1.6rem; }

/* Timeline — glow line + pulse dot */
.about-timeline { padding: 4.6rem 0; }
.about-timeline-track::before { background: linear-gradient(90deg, rgba(43,122,138,0.16), rgba(126,211,232,0.12), rgba(43,122,138,0.10)); height: 1.5px; top: 1.98rem; }
.about-timeline-dot { box-shadow: 0 0 0 5px rgba(43,122,138,0.12), 0 4px 12px rgba(43,122,138,0.18); transition: transform 0.22s cubic-bezier(0.16,1,0.3,1); }
.about-timeline-item:hover .about-timeline-dot { transform: scale(1.12); }
.about-timeline-card { transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), box-shadow 0.22s ease; }
.about-timeline-item:hover .about-timeline-card { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(43,122,138,0.10); }

/* Leadership — quote ghost + depth */
.about-leadership { padding: 4.8rem 0; }
.about-leadership-card {
  box-shadow: 0 16px 44px rgba(43,74,107,0.10);
  border: 1px solid rgba(43,122,138,0.10);
}
.about-leadership-copy { position: relative; }
.about-leadership-copy::before {
  content: '“';
  position: absolute;
  top: -0.15rem;
  inset-inline-start: -0.2rem;
  font-size: 5.5rem;
  line-height: 1;
  color: rgba(43,122,138,0.08);
  font-family: 'Almarai' !important;
  pointer-events: none;
}
body.lang-en .about-leadership-copy::before { inset-inline-start: auto; left: -0.2rem; }
.about-quote { font-size: 1.18rem; line-height: 1.82; letter-spacing: -0.01em; color: #0F2F42; }
.about-leadership-meta strong { letter-spacing: 0.01em; }

/* Commitments — hairline top + icon lift */
.about-commitments { padding: 4.6rem 0; }
.about-commit-card {
  box-shadow: 0 6px 20px rgba(43,122,138,0.05);
  position: relative;
  overflow: hidden;
}
.about-commit-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--fakeeh-teal);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.about-commit-card:hover::before { opacity: 0.14; }
.about-commit-card:hover .commit-icon { transform: scale(1.06); }
.commit-icon { transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), box-shadow 0.22s ease; box-shadow: 0 4px 14px rgba(43,122,138,0.10); }

/* CTA band — subtle texture + depth */
.about-cta-band {
  position: relative;
  overflow: hidden;
  padding: 3rem 0;
}
.about-cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 300px at 85% 30%, rgba(126,211,232,0.14) 0%, transparent 60%),
    radial-gradient(800px 400px at 10% 90%, rgba(255,255,255,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.about-cta-inner { position: relative; z-index: 1; }
.about-cta-copy p { color: #DCEBF2; }
.about-cta-primary { box-shadow: 0 10px 28px rgba(0,0,0,0.22); }
.about-cta-primary:hover { box-shadow: 0 16px 36px rgba(0,0,0,0.28); transform: translateY(-2px); }

/* Scroll reveal — single authored reveal, staggered, expo ease, blur */
@media (prefers-reduced-motion: no-preference) {
  .about-reveal {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(6px);
    transition: opacity 0.62s cubic-bezier(0.16,1,0.3,1), transform 0.62s cubic-bezier(0.16,1,0.3,1), filter 0.62s ease;
  }
  .about-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  .about-reveal[data-delay="1"] { transition-delay: 0.07s; }
  .about-reveal[data-delay="2"] { transition-delay: 0.13s; }
  .about-reveal[data-delay="3"] { transition-delay: 0.19s; }
}
@media (prefers-reduced-motion: reduce) {
  .about-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ==========================================================================
   Facilities Page — Firecrawl + Impeccable Polish (unique vs index overlay)
   Borrow: Fakeeh detail bullets + Cleveland flat white cards + Mayo spotlight
   Distinguish: index = full-bleed overlay + gradient + centered white text
               facilities = image-top + white body + checklist + pill + ghost
   Tokens locked: teal #2b7a8a, navy #2b4a6b, Almarai, 1260 container
   ========================================================================== */
.fac-hero { /* reuses .about-hero; tighten for facilities density */
  padding: 3.4rem 0 3.6rem;
}
.fac-filter {
  padding: 1.1rem 0 0.2rem;
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-light);
}
.fac-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}
.fac-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0.45rem 1.15rem;
  border-radius: var(--radius-pill);
  font-size: 0.86rem;
  background: #FFFFFF;
  color: var(--fakeeh-navy);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}
.fac-chip:hover {
  border-color: var(--fakeeh-teal);
  color: var(--fakeeh-teal);
  background: var(--fakeeh-teal-light);
  transform: translateY(-1px);
}
.fac-chip.active {
  background: var(--fakeeh-teal);
  color: #FFFFFF;
  border-color: var(--fakeeh-teal);
  box-shadow: 0 6px 18px rgba(43,122,138,0.22);
}
.fac-chip:focus-visible {
  outline: 2px solid var(--fakeeh-teal);
  outline-offset: 2px;
}
.fac-filter-note {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0.75rem auto 0;
  max-width: 68ch;
  line-height: 1.6;
}

/* Spotlight — Mayo editorial, image left / copy right */
.fac-spotlight {
  padding: 2.4rem 0 1.2rem;
  background: #FFFFFF;
}
.fac-spotlight-card {
  display: grid;
  grid-template-columns: 1.05fr 1.15fr;
  gap: 2rem;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.fac-spotlight-media {
  position: relative;
  height: 100%;
  min-height: 520px;
  background: var(--bg-box);
}
.fac-spotlight-img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  display: block;
}
.fac-spotlight-badge {
  position: absolute;
  bottom: 1rem;
  inset-inline-start: 1rem;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(43,122,138,0.12);
  color: var(--fakeeh-teal);
  font-size: 0.72rem;
  padding: 0.32rem 0.7rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px rgba(43,74,107,0.10);
}
body.lang-en .fac-spotlight-badge { inset-inline-start: auto; left: 1rem; right: auto; }
.fac-spotlight-copy {
  padding: 2rem 2rem 2rem 0.5rem;
}
body.lang-en .fac-spotlight-copy { padding: 2rem 0.5rem 2rem 2rem; }
.fac-spotlight-title {
  font-size: var(--text-section);
  color: var(--fakeeh-navy);
  line-height: 1.28;
  margin: 0.65rem 0 0.75rem;
  text-wrap: balance;
  letter-spacing: -0.02em;
}
.fac-spotlight-lead {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 1.15rem;
}
.fac-spotlight-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 1rem;
  list-style: none;
  margin-bottom: 1.25rem;
}
.fac-spotlight-checks li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--text-main);
}
.fac-spotlight-checks .feature-check-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(43,122,138,0.10);
}
.fac-spotlight-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.15rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-light);
}
.fac-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.fac-meta-item svg { color: var(--fakeeh-teal); flex-shrink: 0; }
.fac-spotlight-actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  align-items: center;
}
.fac-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.55rem 1.15rem;
  border-radius: var(--radius-pill);
  background: #FFFFFF;
  color: var(--fakeeh-teal);
  border: 1.5px solid var(--border-light);
  font-size: 0.88rem;
  transition: var(--transition);
}
.fac-ghost:hover {
  background: var(--fakeeh-teal-light);
  border-color: var(--fakeeh-teal);
  transform: translateY(-1px);
}
.fac-ghost:focus-visible { outline: 2px solid var(--fakeeh-teal); outline-offset: 2px; }

/* Facilities Carousel — replaces single spotlight (8 services, same taxonomy) */
.fac-spotlight--carousel { padding: 2.4rem 0 1.6rem; background: #FFFFFF; }
.fac-carousel-slider {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-card);
  isolation: isolate;
}
.fac-carousel-progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(43,122,138,0.08);
  z-index: 5;
}
.fac-carousel-progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--fakeeh-teal);
  transition: width 0.12s linear;
  border-radius: 9999px;
}
.fac-carousel-viewport {
  overflow: hidden;
  position: relative;
}
.fac-carousel-track {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.52s cubic-bezier(0.16,1,0.3,1);
  will-change: transform;
}
.fac-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  min-height: 520px;
  display: grid;
  grid-template-columns: 1.05fr 1.15fr;
  gap: 2rem;
  align-items: center;
  background: #FFFFFF;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;
  margin: 0;
}
.fac-carousel-slide .fac-spotlight-media { min-height: 520px; height: 100%; }
.fac-carousel-slide .fac-spotlight-img { min-height: 520px; height: 100%; }
.fac-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.96);
  border: 1.5px solid var(--border-light);
  color: var(--fakeeh-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(43,74,107,0.16);
  z-index: 4;
  transition: var(--transition);
}
.fac-carousel-arrow:hover { background: var(--fakeeh-teal); color: #FFFFFF; border-color: var(--fakeeh-teal); transform: translateY(-50%) scale(1.04); }
.fac-carousel-arrow:focus-visible { outline: 2px solid var(--fakeeh-teal); outline-offset: 2px; }
.fac-carousel-arrow.prev { right: 12px; }
.fac-carousel-arrow.next { left: 12px; }
body.lang-en .fac-carousel-arrow.prev { right: auto; left: 12px; }
body.lang-en .fac-carousel-arrow.next { left: auto; right: 12px; }
.fac-carousel-bar {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(43,122,138,0.10);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.7rem 0.4rem 0.6rem;
  box-shadow: 0 6px 18px rgba(43,74,107,0.12);
  z-index: 4;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.fac-carousel-dots { display: inline-flex; align-items: center; gap: 0.35rem; }
.fac-carousel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(43,122,138,0.22);
  border: 1px solid rgba(43,122,138,0.14);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16,1,0.3,1);
  padding: 0; flex-shrink: 0;
}
.fac-carousel-dot.is-active {
  width: 26px; border-radius: 9999px;
  background: var(--fakeeh-teal);
  border-color: var(--fakeeh-teal);
  box-shadow: 0 2px 10px rgba(43,122,138,0.22);
}
.fac-carousel-dot:focus-visible { outline: 2px solid var(--fakeeh-teal); outline-offset: 2px; }
.fac-carousel-counter {
  font-size: 0.78rem;
  color: var(--fakeeh-navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  min-width: 3ch;
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.fac-counter-sep { color: var(--text-muted); }
@media (max-width: 1024px) {
  .fac-carousel-slide { grid-template-columns: 1fr; min-height: auto; }
  .fac-carousel-slide .fac-spotlight-media,
  .fac-carousel-slide .fac-spotlight-img { min-height: 340px; }
}
@media (max-width: 640px) {
  .fac-spotlight--carousel { padding: 1.6rem 0 1.2rem; }
  .fac-carousel-slider { border-radius: var(--radius-lg); }
  .fac-carousel-arrow { display: none; }
  .fac-carousel-bar { bottom: 10px; padding: 0.35rem 0.55rem; gap: 0.65rem; }
  .fac-carousel-slide .fac-spotlight-copy { padding: 1.25rem 1rem 3.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fac-carousel-track { transition: none !important; }
  .fac-carousel-progress-bar { transition: none !important; }
}
@media (hover: none) {
  .fac-carousel-slide:hover .fac-spotlight-img { transform: none; }
}

/* Grid — Cleveland-readable white cards (not overlay) */
.fac-grid-section {
  padding: 3rem 0 1.5rem;
  background: var(--bg-page);
}
.fac-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.fac-card {
  background: #FFFFFF;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), box-shadow 0.22s ease, border-color 0.22s ease;
  box-shadow: 0 6px 20px rgba(43,122,138,0.05);
}
.fac-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--fakeeh-teal);
}
.fac-card-media {
  position: relative;
  background: var(--bg-box);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.fac-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
.fac-card:hover .fac-card-img { transform: scale(1.04); }
.fac-card-badge {
  position: absolute;
  top: 0.7rem;
  inset-inline-start: 0.7rem;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(43,122,138,0.10);
  color: var(--fakeeh-teal);
  font-size: 0.68rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
}
body.lang-en .fac-card-badge { inset-inline-start: auto; left: 0.7rem; }
.fac-card-body {
  padding: 1.2rem 1.25rem 1.1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.fac-card-pill {
  align-self: flex-start;
  background: var(--fakeeh-teal-light);
  color: var(--fakeeh-teal);
  border: 1px solid rgba(43,122,138,0.10);
  font-size: 0.70rem;
  padding: 0.22rem 0.6rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.6rem;
  letter-spacing: 0.02em;
}
.fac-card-title {
  font-size: 1.06rem;
  color: var(--fakeeh-navy);
  margin-bottom: 0.35rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.fac-card-desc {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 0.7rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.fac-card-list {
  list-style: none;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}
.fac-card-list li {
  position: relative;
  padding-inline-start: 1rem;
  font-size: 0.80rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.fac-card-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  background: var(--fakeeh-teal);
  border-radius: 50%;
  opacity: 0.7;
}
body.lang-en .fac-card-list li::before { inset-inline-start: auto; left: 0; }
.fac-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border-light);
}
.fac-card-link {
  background: transparent;
  color: var(--fakeeh-teal);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0.3rem 0;
  text-underline-offset: 3px;
  text-decoration: underline;
  text-decoration-color: rgba(43,122,138,0.22);
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
.fac-card-link:hover { color: var(--fakeeh-teal-dark); text-decoration-color: var(--fakeeh-teal); }
.fac-card-book {
  background: #FFFFFF;
  color: var(--fakeeh-teal);
  border: 1.5px solid var(--border-light);
  font-size: 0.78rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition);
}
.fac-card-book:hover { background: var(--fakeeh-teal); color: #FFFFFF; border-color: var(--fakeeh-teal); transform: translateY(-1px); }
.fac-card-link:focus-visible, .fac-card-book:focus-visible { outline: 2px solid var(--fakeeh-teal); outline-offset: 2px; }

/* Capacity ribbon tweak for facilities */
.fac-facts { background: #FFFFFF; border-top: 1px solid var(--border-light); padding: 2rem 0 1.6rem; }
.fac-facts .about-facts-grid { gap: 1.15rem; }

/* Journey band — 3 steps */
.fac-journey {
  padding: 1.4rem 0 2rem;
  background: var(--bg-page);
}
.fac-journey-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: #FFFFFF;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow-card);
  flex-wrap: wrap;
}
.fac-journey-copy h3 {
  font-size: 1.02rem;
  color: var(--fakeeh-navy);
  margin-bottom: 0.35rem;
  letter-spacing: -0.01em;
}
.fac-journey-copy p {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 58ch;
}
.fac-journey-steps {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.fac-step {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--bg-box);
  border: 1px solid var(--border-light);
  color: var(--text-main);
  font-size: 0.82rem;
  transition: var(--transition);
}
.fac-step--active {
  background: var(--fakeeh-teal);
  color: #FFFFFF;
  border-color: var(--fakeeh-teal);
  box-shadow: 0 6px 18px rgba(43,122,138,0.18);
}
.fac-step:hover { transform: translateY(-1px); }
.fac-step--active:hover { background: var(--fakeeh-teal-dark); }
.fac-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(43,122,138,0.12);
  color: var(--fakeeh-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
}
.fac-step--active .fac-step-num { background: rgba(255,255,255,0.22); color: #FFFFFF; }
.fac-step-arrow { color: var(--text-light); font-size: 0.9rem; }

/* Responsive — align with site breakpoints (1024/991/768/480) */
@media (max-width: 1024px) {
  .fac-spotlight-card { grid-template-columns: 1fr; }
  .fac-spotlight-media { min-height: 340px; }
  .fac-spotlight-img { min-height: 340px; }
  .fac-spotlight-copy { padding: 1.5rem 1.25rem; }
  body.lang-en .fac-spotlight-copy { padding: 1.5rem 1.25rem; }
  .fac-grid { grid-template-columns: repeat(2, 1fr); }
  .fac-journey-card { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .fac-filter-row { justify-content: stretch; }
  .fac-chip { flex: 1; min-width: calc(50% - 0.6rem); }
  .fac-spotlight-checks { grid-template-columns: 1fr; }
  .fac-grid { grid-template-columns: 1fr; }
  .fac-journey-steps { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .fac-card, .fac-card-img, .fac-chip, .fac-step { transition: none !important; transform: none !important; }
}

/* ==========================================================================
   Specialties Page — Firecrawl + Impeccable (distinct from Facilities + index)
   Borrow: Fakeeh 34-grid taxonomy → 6-group list; Mayo A-Z+search; Cleveland Find Provider
   Diff: index 4×2 centered circles (bg-box) → here left 48px icon row, denser, searchable
   ========================================================================== */
.spec-hero .spec-search-wrap,
.doc-hero .doc-search-wrap,
.faq-hero .faq-search-wrap,
.about-hero .spec-search-wrap,
.about-hero .doc-search-wrap,
.about-hero .faq-search-wrap {
  position: relative;
  max-width: 560px;
  margin: 1.1rem 0 1rem;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.6rem 0.35rem 0.9rem;
  box-shadow: 0 8px 24px rgba(43,74,107,0.08);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
/* Directory search (doctors/specialties listing) — same pill style when outside hero */
.doc-directory .spec-search-wrap,
.doc-directory .doc-search-wrap,
.specialties-boxes-section .spec-search-wrap,
.spec-directory .spec-search-wrap {
  position: relative;
  max-width: 640px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.7rem 0.5rem 1rem;
  box-shadow: 0 8px 24px rgba(43,74,107,0.08);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.doc-directory .spec-search-wrap:focus-within,
.doc-directory .doc-search-wrap:focus-within {
  border-color: var(--fakeeh-teal);
  box-shadow: 0 8px 24px rgba(43,122,138,0.14);
}
body.lang-en .spec-search-wrap,
body.lang-en .doc-search-wrap,
body.lang-en .faq-search-wrap { padding: 0.35rem 0.9rem 0.35rem 0.6rem; }
.spec-search-wrap:focus-within,
.doc-search-wrap:focus-within,
.faq-search-wrap:focus-within {
  border-color: var(--border-light);
  box-shadow: 0 8px 24px rgba(43,74,107,0.08);
  outline: none;
}
.spec-search-input:focus,
.doc-search-wrap .spec-search-input:focus,
.faq-search-wrap .spec-search-input:focus {
  outline: none;
  box-shadow: none;
}
.spec-search-icon { color: var(--fakeeh-teal); flex-shrink: 0; margin-inline-end: 0.5rem; opacity: 0.9; }
.spec-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 0.92rem;
  color: var(--text-main);
  padding: 0.45rem 0;
}
.spec-search-input::placeholder { color: var(--text-muted); opacity: 0.85; }
/* Hide native search cancel (prevents double × with custom clear) */
.spec-search-input[type="search"]::-webkit-search-cancel-button,
.spec-search-input[type="search"]::-webkit-search-decoration,
.spec-search-input[type="search"]::-webkit-search-results-button,
.spec-search-input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; display: none; }
.spec-search-input[type="search"]::-ms-clear,
.spec-search-input[type="search"]::-ms-reveal { display: none; width: 0; height: 0; }
.spec-search-clear {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-box);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  border: 1px solid var(--border-light);
  flex-shrink: 0;
}
.spec-search-clear:hover { background: var(--fakeeh-teal); color: #FFFFFF; border-color: var(--fakeeh-teal); }
.spec-search-clear[hidden],
.doc-search-wrap .spec-search-clear[hidden],
.faq-search-wrap .spec-search-clear[hidden] { display: none !important; }

/* — FAQ/Doctors hero needs higher contrast on dark navy-teal hero — */
.about-hero .spec-search-wrap,
.about-hero .doc-search-wrap,
.about-hero .faq-search-wrap {
  box-shadow: 0 12px 32px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.12) inset;
  border-color: rgba(255,255,255,0.9);
}
.about-hero .spec-search-wrap:focus-within,
.about-hero .doc-search-wrap:focus-within,
.about-hero .faq-search-wrap:focus-within {
  border-color: rgba(255,255,255,0.9);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.12) inset;
  outline: none;
}

.spec-filter { padding: 1.1rem 0 0.2rem; background: var(--bg-page); border-bottom: 1px solid var(--border-light); }
.spec-az {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 0.85rem 0 0.15rem;
  -webkit-overflow-scrolling: touch;
}
.spec-az::-webkit-scrollbar { height: 4px; }
.spec-az::-webkit-scrollbar-thumb { background: rgba(43,122,138,0.18); border-radius: 9999px; }
.spec-az-chip {
  min-width: 34px;
  height: 32px;
  padding: 0 0.6rem;
  border-radius: var(--radius-pill);
  background: #FFFFFF;
  color: var(--text-muted);
  border: 1px solid var(--border-light);
  font-size: 0.78rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition);
}
.spec-az-chip:hover { border-color: var(--fakeeh-teal); color: var(--fakeeh-teal); background: var(--fakeeh-teal-light); }
.spec-az-chip.active { background: var(--fakeeh-teal); color: #FFFFFF; border-color: var(--fakeeh-teal); box-shadow: 0 4px 12px rgba(43,122,138,0.16); }
.spec-az-chip:focus-visible { outline: 2px solid var(--fakeeh-teal); outline-offset: 2px; }

.spec-directory { padding: 2.4rem 0 1.5rem; background: var(--bg-page); }
.spec-group { margin-bottom: 2rem; }
.spec-group-head {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1rem;
  color: var(--fakeeh-navy);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-light);
}
.spec-group-dot { width: 8px; height: 8px; background: var(--fakeeh-teal); border-radius: 50%; box-shadow: 0 0 0 4px rgba(43,122,138,0.10); flex-shrink: 0; }
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.spec-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #FFFFFF;
  border: 1px solid var(--border-card);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 4px 16px rgba(43,122,138,0.04);
}
.spec-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--fakeeh-teal); }
.spec-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--fakeeh-teal-light);
  border: 1px solid rgba(43,122,138,0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fakeeh-teal);
  flex-shrink: 0;
  transition: var(--transition);
}
.spec-card:hover .spec-card-icon { background: var(--fakeeh-teal); color: #FFFFFF; border-color: var(--fakeeh-teal); transform: scale(1.05); }
.spec-card-body { flex: 1; min-width: 0; }
.spec-card-title { font-size: 0.98rem; color: var(--fakeeh-navy); margin-bottom: 0.2rem; letter-spacing: -0.01em; line-height: 1.35; }
.spec-card-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spec-card-meta { font-size: 0.72rem; color: var(--text-light); margin-top: 0.15rem; display: block; }
.spec-card-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; flex-shrink: 0; }
.spec-arrow { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-box); border: 1px solid var(--border-light); display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; color: var(--text-muted); transition: var(--transition); }
.spec-card:hover .spec-arrow { background: var(--fakeeh-teal); color: #FFFFFF; border-color: var(--fakeeh-teal); }
.spec-empty { text-align: center; color: var(--text-muted); font-size: 0.9rem; padding: 2rem 1rem; background: #FFFFFF; border: 1px dashed var(--border-card); border-radius: var(--radius-lg); margin-top: 1rem; }

.spec-doctors { padding: 1.8rem 0 1.5rem; background: var(--bg-page); border-top: 1px solid var(--border-light); }
.spec-doctors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
.spec-doctor-card {
  display: flex;
  gap: 0.9rem;
  background: #FFFFFF;
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 1.1rem;
  align-items: flex-start;
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 4px 16px rgba(43,122,138,0.04);
}
.spec-doctor-card:hover { background: #FFFFFF; border-color: var(--fakeeh-teal); box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.spec-doctor-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid #FFFFFF; box-shadow: 0 4px 12px rgba(43,74,107,0.10); background: var(--fakeeh-teal-light); }
.spec-doctor-body { flex: 1; min-width: 0; }
.spec-doctor-body h4 { font-size: 0.95rem; color: var(--fakeeh-navy); line-height: 1.35; margin-bottom: 0.15rem; }
.spec-doctor-spec { font-size: 0.78rem; color: var(--text-muted); display: block; line-height: 1.4; }
.spec-doctor-meta { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.35rem; font-size: 0.72rem; color: var(--text-light); }
.spec-dot { width: 3px; height: 3px; background: rgba(43,122,138,0.28); border-radius: 50%; flex-shrink: 0; }
.spec-doctors-cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 1.4rem; }
/* When unified cards use .doc-card inside spec-doctors-grid, keep same grid */
.spec-doctors-grid .doc-card { /* inherits .doc-card */ }

@media (max-width: 1024px) {
  .spec-grid { grid-template-columns: 1fr; }
  .spec-doctors-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .spec-search-wrap, .doc-search-wrap, .faq-search-wrap { max-width: 100%; }
  .spec-card { padding: 0.9rem; gap: 0.75rem; }
  .spec-card-icon { width: 42px; height: 42px; }
  .spec-card-desc { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .spec-az { justify-content: flex-start; }
  .spec-doctors-grid { grid-template-columns: 1fr; }
  .spec-doctor-card { padding: 0.9rem; }
  .spec-doctor-img { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .spec-card, .spec-doctor-card, .spec-card-icon, .spec-arrow { transition: none !important; transform: none !important; }
}

/* ==========================================================================
   Doctors Page — Firecrawl + Impeccable (distinct from Specialties & Facilities)
   Provider-centric: search + specialty+language filters + rating + availability
   Diff: Specialties icon-row 48 + Facilities image-top → here avatar 64 + teal pill + rating
   ========================================================================== */
.doc-hero .doc-search-wrap { max-width: 560px; }
.doc-filter { padding: 1.1rem 0 0.2rem; background: var(--bg-page); border-bottom: 1px solid var(--border-light); }
.doc-lang-row {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0.7rem 0 0.1rem;
}
.doc-trust { padding: 1.2rem 0 0.6rem; background: var(--bg-page); }
.doc-trust-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #FFFFFF;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1.1rem;
  box-shadow: var(--shadow-card);
  flex-wrap: wrap;
}
.doc-trust-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--fakeeh-teal-light);
  border: 1px solid rgba(43,122,138,0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fakeeh-teal);
  flex-shrink: 0;
}
.doc-trust-copy h3 { font-size: 0.95rem; color: var(--fakeeh-navy); margin-bottom: 0.15rem; }
.doc-trust-copy p { font-size: 0.80rem; color: var(--text-muted); line-height: 1.5; }
.doc-trust-meta { margin-inline-start: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; }
.doc-trust-stars { font-size: 0.92rem; color: var(--fakeeh-teal); letter-spacing: 0.02em; }
.doc-trust-note { font-size: 0.72rem; color: var(--text-light); }

.doc-directory { padding: 1.8rem 0 1.5rem; background: var(--bg-page); }
.doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
.doc-card {
  display: flex;
  gap: 0.9rem;
  background: #FFFFFF;
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 1.1rem;
  align-items: flex-start;
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 4px 16px rgba(43,122,138,0.04);
}
.doc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--fakeeh-teal); }
.doc-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #FFFFFF;
  box-shadow: 0 4px 12px rgba(43,74,107,0.10);
  background: var(--fakeeh-teal-light);
}
.doc-body { flex: 1; min-width: 0; }
.doc-name { font-size: 0.95rem; color: var(--fakeeh-navy); line-height: 1.35; margin-bottom: 0.15rem; }
.doc-title { font-size: 0.72rem; color: var(--fakeeh-teal); background: var(--fakeeh-teal-light); border: 1px solid rgba(43,122,138,0.10); padding: 0.12rem 0.5rem; border-radius: var(--radius-pill); display: inline-block; margin-bottom: 0.25rem; }
.doc-spec { font-size: 0.78rem; color: var(--text-muted); display: block; line-height: 1.4; }
.doc-meta { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.35rem; font-size: 0.72rem; color: var(--text-light); }
.doc-rating { color: var(--fakeeh-teal); font-size: 0.78rem; }
.doc-dot { width: 3px; height: 3px; background: rgba(43,122,138,0.28); border-radius: 50%; flex-shrink: 0; }
.doc-avail { color: #0F7A4A; background: #E6FFF2; border: 1px solid #B8E8D0; padding: 0.1rem 0.45rem; border-radius: var(--radius-pill); font-size: 0.70rem; }
.doc-actions { display: flex; flex-direction: column; gap: 0.45rem; flex-shrink: 0; align-items: stretch; }
.doc-book { min-height: 36px; padding: 0.4rem 0.9rem; font-size: 0.80rem; }
.doc-profile { min-height: 32px; padding: 0.32rem 0.8rem; font-size: 0.76rem; }

@media (max-width: 1024px) {
  .doc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .doc-grid { grid-template-columns: 1fr; }
  .doc-card { padding: 0.9rem; }
  .doc-avatar { width: 56px; height: 56px; }
  .doc-trust-card { flex-direction: column; align-items: flex-start; }
  .doc-trust-meta { margin-inline-start: 0; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .doc-card, .doc-avatar { transition: none !important; transform: none !important; }
}

/* ==========================================================================
   FAQ / Legal (Privacy & Terms) — Read + Search (Impeccable)
   FAQ: searchable accordion with chips (like spec) + toggle; Legal: TOC sticky
   ========================================================================== */
.faq-hero .faq-search-wrap { max-width: 560px; }
.faq-filter { padding: 1.1rem 0 0.2rem; background: var(--bg-page); border-bottom: 1px solid var(--border-light); }
.faq-list { padding: 2rem 0 1.2rem; background: var(--bg-page); }
.faq-grid { display: grid; grid-template-columns: 1fr; gap: 0.8rem; }
.faq-item {
  background: #FFFFFF;
  border: 1px solid var(--border-card);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(43,122,138,0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.faq-item:hover { border-color: var(--fakeeh-teal); box-shadow: var(--shadow-card); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: #FFFFFF;
  cursor: pointer;
  text-align: start;
  border: none;
  transition: background 0.18s ease;
}
.faq-q:hover { background: var(--bg-page); }
.faq-q-text { font-size: 0.95rem; color: var(--fakeeh-navy); line-height: 1.4; flex: 1; }
.faq-toggle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fakeeh-teal-light);
  border: 1px solid rgba(43,122,138,0.12);
  color: var(--fakeeh-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  transition: var(--transition);
}
.faq-q[aria-expanded="true"] .faq-toggle { background: var(--fakeeh-teal); color: #FFFFFF; border-color: var(--fakeeh-teal); transform: rotate(45deg); }
.faq-a { padding: 0 1.15rem 1rem; background: var(--bg-box); border-top: 1px solid var(--border-light); }
.faq-a p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.7; padding-top: 0.9rem; }
.faq-links { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-top: 0.7rem; font-size: 0.82rem; }
.faq-links a { color: var(--fakeeh-teal); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(43,122,138,0.22); }
.faq-links a:hover { color: var(--fakeeh-teal-dark); text-decoration-color: var(--fakeeh-teal); }
.faq-help {
  margin-top: 1.4rem;
  background: #FFFFFF;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.faq-help h3 { font-size: 1rem; color: var(--fakeeh-navy); margin-bottom: 0.2rem; }
.faq-help p { font-size: 0.84rem; color: var(--text-muted); }
.faq-help-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }

/* Legal — Privacy/Terms */
.legal-hero .legal-meta { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-top: 0.8rem; }
.legal-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  color: #FFFFFF;
  font-size: 0.74rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.legal-print {
  background: #FFFFFF;
  color: var(--fakeeh-navy);
  border: 1px solid rgba(255,255,255,0.9);
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-pill);
  font-size: 0.76rem;
  cursor: pointer;
  transition: var(--transition);
}
.legal-print:hover { background: var(--fakeeh-teal); color: #FFFFFF; border-color: var(--fakeeh-teal); transform: translateY(-1px); }
.legal-essentials { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.9rem; }
.legal-ess-pill { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18); color: #FFFFFF; font-size: 0.72rem; padding: 0.28rem 0.7rem; border-radius: var(--radius-pill); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.legal-layout { padding: 2rem 0; background: var(--bg-page); }
.legal-container { display: grid; grid-template-columns: 280px 1fr; gap: 1.8rem; align-items: start; }
.legal-toc {
  position: sticky;
  top: calc(var(--header-height, 64px) + 12px);
  background: #FFFFFF;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 1rem;
  box-shadow: var(--shadow-card);
}
.legal-toc-title { font-size: 0.9rem; color: var(--fakeeh-navy); margin-bottom: 0.7rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-light); }
.legal-toc-link {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 0.38rem 0.6rem;
  border-radius: 8px;
  border-inline-start: 3px solid transparent;
  transition: var(--transition);
  margin-bottom: 0.1rem;
}
.legal-toc-link:hover { background: var(--bg-page); color: var(--fakeeh-teal); }
.legal-toc-link.active { background: var(--fakeeh-teal-light); color: var(--fakeeh-teal); border-inline-start-color: var(--fakeeh-teal); }
body.lang-en .legal-toc-link { border-inline-start: none; border-inline-end: 3px solid transparent; }
body.lang-en .legal-toc-link.active { border-inline-end-color: var(--fakeeh-teal); }
.legal-content { display: flex; flex-direction: column; gap: 1rem; }
.legal-card {
  background: #FFFFFF;
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 1.5rem 1.4rem;
  box-shadow: 0 4px 16px rgba(43,122,138,0.04);
}
.legal-h2 { font-size: 1.08rem; color: var(--fakeeh-navy); margin-bottom: 0.7rem; display: flex; gap: 0.7rem; align-items: center; line-height: 1.35; }
.legal-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--fakeeh-teal-light);
  border: 1px solid rgba(43,122,138,0.12);
  color: var(--fakeeh-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  flex-shrink: 0;
}
.legal-card p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.7; }
.legal-list { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.5rem; }
.legal-list li { position: relative; padding-inline-start: 1rem; font-size: 0.84rem; color: var(--text-muted); line-height: 1.6; }
.legal-list li::before { content: ''; position: absolute; inset-inline-start: 0; top: 0.6em; width: 5px; height: 5px; background: var(--fakeeh-teal); border-radius: 50%; opacity: 0.7; }
.legal-note { margin-top: 0.7rem; background: var(--fakeeh-teal-light); border: 1px solid rgba(43,122,138,0.12); border-radius: 10px; padding: 0.6rem 0.85rem; font-size: 0.82rem; color: var(--fakeeh-navy); }

/* Privacy — editorial Read mode, single-column centered (no sidebar TOC — hospital benchmark: Fakeeh/Cleveland continuous) */
.legal-privacy { background: #FFFFFF; }
.legal-privacy .legal-container { display: block; max-width: 760px; margin: 0 auto; }
.legal-privacy .legal-content { gap: 0; max-width: 760px; margin: 0 auto; }
.legal-privacy .legal-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-light);
  border-radius: 0;
  box-shadow: none;
  padding: 2rem 0 1.9rem;
}
.legal-privacy .legal-card:last-child { border-bottom: none; padding-bottom: 0; }
.legal-privacy .legal-card:first-child { padding-top: 0.4rem; }
.legal-privacy .legal-h2 { font-size: 1.12rem; margin-bottom: 0.6rem; letter-spacing: -0.01em; }
.legal-privacy .legal-card p { font-size: 0.92rem; line-height: 1.85; color: var(--text-muted); max-width: 72ch; }
.legal-privacy .legal-list { margin-top: 0.75rem; gap: 0.55rem; }
.legal-privacy .legal-list li { font-size: 0.86rem; line-height: 1.75; color: var(--text-muted); }
.legal-privacy .legal-toc { background: var(--bg-page); border: 1px solid var(--border-light); box-shadow: none; }

@media (max-width: 1024px) {
  .legal-container { grid-template-columns: 1fr; }
  .legal-toc { position: static; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0.4rem; padding: 0.7rem; }
  .legal-toc-title { display: none; }
  .legal-toc-link { white-space: nowrap; flex-shrink: 0; border-inline-start: none; border-bottom: 2px solid transparent; border-radius: 9999px; }
  .legal-toc-link.active { border-bottom-color: var(--fakeeh-teal); border-inline-start-color: transparent; }
  body.lang-en .legal-toc-link.active { border-inline-end-color: transparent; }
}
@media (max-width: 640px) {
  .faq-q { padding: 0.9rem; }
  .faq-help { flex-direction: column; align-items: flex-start; }
}
/* ==========================================================================
   Facility Detail — [id] page (Read + Operate, inside Facilities world)
   Thesis: index cards are entry dots; detail is the unfolded card — same tokens,
   added depth: editorial image+checks + services icon rows + tech band + journey timeline
   Distinct from index (full-bleed overlay) and specialties (left-icon dense rows) by
   side image + long checks + technology band + 3-step timeline + practical card.
   Tokens locked: teal #2b7a8a, navy #2b4a6b, Almarai, 1260 container, 14-20 radii,
   offset blur shadow, pill 42-44px, 2px SVG. No kicker above h2 outside hero.
   ========================================================================== */
.fdet-hero { padding: 3.2rem 0 3rem; }
.fdet-hero-inner { max-width: 860px; }
.fdet-hero-top { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.fdet-kicker { margin-bottom: 0; }
.fdet-id-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 28px; padding: 0.18rem 0.6rem;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18);
  color: #FFFFFF; font-size: 0.72rem; letter-spacing: 0.06em; border-radius: var(--radius-pill);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.fdet-title { margin-bottom: 0.85rem; }
.fdet-lead { margin-bottom: 1.15rem; }
.fdet-meta-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.15rem; }
.fdet-meta-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.14);
  color: #FFFFFF; font-size: 0.76rem; padding: 0.32rem 0.7rem; border-radius: var(--radius-pill);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.fdet-meta-chip svg { color: #7ED3E8; flex-shrink: 0; }
.fdet-meta-chip--portal { background: rgba(126,211,232,0.14); border-color: rgba(126,211,232,0.22); }
.fdet-hero-actions { gap: 0.6rem; }
.fdet-share {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: rgba(255,255,255,0.12); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.18);
  padding: 0.55rem 0.9rem; border-radius: var(--radius-pill); min-height: 42px; font-size: 0.82rem;
  cursor: pointer; transition: var(--transition);
}
.fdet-share:hover { background: #FFFFFF; color: var(--fakeeh-navy); border-color: #FFFFFF; transform: translateY(-1px); }
.fdet-share:focus-visible { outline: 2px solid #7ED3E8; outline-offset: 2px; }
.fdet-hero-trust { margin-top: 0.2rem; }

/* — Overview editorial (distinct from about & fac spotlight: tighter, with badge) — */
.fdet-overview { padding: 3.8rem 0 2.2rem; background: #FFFFFF; }
.fdet-overview-grid { display: grid; grid-template-columns: 1.05fr 1.15fr; gap: 2.2rem; align-items: center; }
.fdet-overview-media { position: relative; }
.fdet-overview-img {
  width: 100%; height: 480px; object-fit: cover; border-radius: var(--radius-xl);
  box-shadow: 0 16px 36px rgba(43,74,107,0.12); border: 1px solid rgba(43,122,138,0.06); display: block;
}
.fdet-img-badge { bottom: 1rem; }
.fdet-overview-copy { min-width: 0; }
.fdet-overview-title {
  font-size: var(--text-section); color: var(--fakeeh-navy); line-height: 1.28;
  margin: 0.6rem 0 0.7rem; letter-spacing: -0.02em; text-wrap: balance;
}
.fdet-overview-lead { font-size: 0.95rem; color: var(--text-muted); line-height: 1.85; margin-bottom: 1.1rem; }
.fdet-checks { margin-bottom: 1.15rem; }
.fdet-overview-meta { display: flex; gap: 1rem; flex-wrap: wrap; padding-top: 0.9rem; border-top: 1px solid var(--border-light); margin-bottom: 1.1rem; }
.fdet-overview-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }

/* — Services — 3-col icon rows (denser than index 4x2 centered circles) — */
.fdet-services { padding: 2.8rem 0 1.8rem; background: var(--bg-page); }
.fdet-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.fdet-service-card {
  display: flex; gap: 0.85rem; align-items: flex-start;
  background: #FFFFFF; border: 1px solid var(--border-card); border-radius: 14px;
  padding: 1rem 1.05rem; transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 4px 16px rgba(43,122,138,0.04);
}
.fdet-service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--fakeeh-teal); }
.fdet-service-icon {
  width: 44px; height: 44px; border-radius: 50%; background: var(--fakeeh-teal-light);
  border: 1px solid rgba(43,122,138,0.12); color: var(--fakeeh-teal);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--transition);
}
.fdet-service-card:hover .fdet-service-icon { background: var(--fakeeh-teal); color: #FFFFFF; border-color: var(--fakeeh-teal); transform: scale(1.05); }
.fdet-service-body h4 { font-size: 0.92rem; color: var(--fakeeh-navy); margin-bottom: 0.2rem; line-height: 1.35; }
.fdet-service-body p { font-size: 0.80rem; color: var(--text-muted); line-height: 1.5; }

/* — Technology band — */
.fdet-tech { padding: 1.8rem 0 2rem; background: #FFFFFF; }
.fdet-tech-card {
  display: grid; grid-template-columns: 1.2fr 0.85fr; gap: 1.8rem; align-items: center;
  background: var(--bg-page); border: 1px solid var(--border-card); border-radius: var(--radius-xl);
  padding: 1.6rem 1.5rem; box-shadow: var(--shadow-card);
}
.fdet-tech-copy h3 { font-size: 1.15rem; color: var(--fakeeh-navy); margin: 0.6rem 0 0.55rem; line-height: 1.35; letter-spacing: -0.01em; text-wrap: balance; }
.fdet-tech-lead { font-size: 0.88rem; color: var(--text-muted); line-height: 1.75; margin-bottom: 0.85rem; }
.fdet-tech-list { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.9rem; }
.fdet-tech-list li { position: relative; padding-inline-start: 1rem; font-size: 0.84rem; color: var(--text-main); line-height: 1.6; }
.fdet-tech-list li::before { content: ''; position: absolute; inset-inline-start: 0; top: 0.6em; width: 5px; height: 5px; background: var(--fakeeh-teal); border-radius: 50%; opacity: 0.75; }
body.lang-en .fdet-tech-list li::before { inset-inline-start: auto; left: 0; }
.fdet-tech-meta { display: flex; gap: 0.9rem; flex-wrap: wrap; padding-top: 0.75rem; border-top: 1px solid var(--border-light); }
.fdet-tech-media { display: flex; flex-direction: column; gap: 0.85rem; }
.fdet-tech-visual {
  display: flex; align-items: center; gap: 0.9rem;
  background: #FFFFFF; border: 1px solid var(--border-card); border-radius: var(--radius-lg);
  padding: 1rem 1.1rem; box-shadow: 0 6px 20px rgba(43,122,138,0.06);
}
.fdet-tech-icon {
  width: 48px; height: 48px; border-radius: 50%; background: var(--fakeeh-teal); color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(43,122,138,0.22);
}
.fdet-tech-visual strong { display: block; font-size: 1rem; color: var(--fakeeh-navy); line-height: 1; }
.fdet-tech-visual span { font-size: 0.78rem; color: var(--text-muted); }
.fdet-tech-note { font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; background: #FFFFFF; border: 1px dashed var(--border-card); border-radius: 10px; padding: 0.6rem 0.8rem; }
.fdet-tech-cta { width: 100%; justify-content: center; }

/* — Journey — 3 steps timeline (distinct from about-timeline horizontal) — */
.fdet-journey { padding: 2.6rem 0 1.8rem; background: var(--bg-page); }
.fdet-journey-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.fdet-journey-card {
  background: #FFFFFF; border: 1px solid var(--border-card); border-radius: var(--radius-lg);
  padding: 1.35rem 1.2rem; display: flex; flex-direction: column; gap: 0.45rem;
  box-shadow: var(--shadow-card); transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease;
  position: relative; overflow: hidden;
}
.fdet-journey-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--fakeeh-teal), #7ED3E8); opacity: 0; transition: opacity 0.22s ease; }
.fdet-journey-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.fdet-journey-card:hover::before { opacity: 1; }
.fdet-journey-num {
  width: 32px; height: 32px; border-radius: 50%; background: var(--fakeeh-teal-light);
  border: 1px solid rgba(43,122,138,0.14); color: var(--fakeeh-teal);
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.82rem; flex-shrink: 0;
}
.fdet-journey-card h4 { font-size: 0.98rem; color: var(--fakeeh-navy); margin-top: 0.15rem; }
.fdet-journey-card p { font-size: 0.84rem; color: var(--text-muted); line-height: 1.7; }
.fdet-journey-foot {
  text-align: center; margin-top: 1.2rem; font-size: 0.82rem; color: var(--text-muted);
  display: flex; justify-content: center; gap: 0.4rem; flex-wrap: wrap; align-items: center;
}
.fdet-journey-foot a { color: var(--fakeeh-teal); text-decoration: underline; text-underline-offset: 3px; }
.fdet-journey-foot a:hover { color: var(--fakeeh-teal-dark); }

/* — Practical — */
.fdet-practical { padding: 1.8rem 0 1.4rem; background: #FFFFFF; border-top: 1px solid var(--border-light); }
.fdet-practical-grid { display: grid; grid-template-columns: 1.25fr 0.85fr; gap: 1.5rem; align-items: start; }
.fdet-practical-card {
  background: var(--bg-page); border: 1px solid var(--border-card); border-radius: var(--radius-xl);
  padding: 1.5rem 1.4rem; box-shadow: var(--shadow-card);
}
.fdet-practical-card h3 { font-size: 1.02rem; color: var(--fakeeh-navy); margin-bottom: 1rem; letter-spacing: -0.01em; }
.fdet-prac-rows { display: flex; flex-direction: column; gap: 1rem; }
.fdet-prac-row { display: flex; gap: 0.85rem; align-items: flex-start; }
.fdet-prac-icon {
  width: 36px; height: 36px; border-radius: 50%; background: #FFFFFF; border: 1px solid var(--border-light);
  color: var(--fakeeh-teal); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(43,122,138,0.06);
}
.fdet-prac-row strong { display: block; font-size: 0.82rem; color: var(--text-main); margin-bottom: 0.15rem; }
.fdet-prac-row span { font-size: 0.84rem; color: var(--text-muted); line-height: 1.6; display: block; }
.fdet-prac-link { display: inline-block; margin-top: 0.3rem; font-size: 0.80rem; color: var(--fakeeh-teal) !important; text-decoration: underline; text-underline-offset: 3px; }
.fdet-prac-link:hover { color: var(--fakeeh-teal-dark) !important; }
.fdet-practical-actions { display: flex; flex-direction: column; gap: 0.7rem; }
.fdet-full { width: 100%; justify-content: center; }
.fdet-prac-note { font-size: 0.76rem; color: var(--text-muted); line-height: 1.6; text-align: center; background: var(--fakeeh-teal-light); border: 1px solid rgba(43,122,138,0.10); border-radius: 10px; padding: 0.6rem 0.8rem; }

/* — Related — */
.fdet-related { padding: 2.4rem 0 1.6rem; background: var(--bg-page); }
.fdet-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.fdet-related-card {
  background: #FFFFFF; border: 1px solid var(--border-card); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 6px 20px rgba(43,122,138,0.05); text-decoration: none; color: inherit;
}
.fdet-related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--fakeeh-teal); }
.fdet-related-media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-box); }
.fdet-related-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s cubic-bezier(0.16,1,0.3,1); }
.fdet-related-card:hover .fdet-related-media img { transform: scale(1.04); }
.fdet-related-body { padding: 1rem 1.1rem 0.95rem; display: flex; flex-direction: column; flex: 1; }
.fdet-related-body h4 { font-size: 0.95rem; color: var(--fakeeh-navy); margin-bottom: 0.3rem; line-height: 1.35; }
.fdet-related-body p { font-size: 0.80rem; color: var(--text-muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.7rem; min-height: 2.55em; }
.fdet-related-link { margin-top: auto; font-size: 0.80rem; color: var(--fakeeh-teal); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(43,122,138,0.22); }
.fdet-related-card:hover .fdet-related-link { text-decoration-color: var(--fakeeh-teal); color: var(--fakeeh-teal-dark); }

/* — FAQ in detail — */
.fdet-faq { padding: 2.2rem 0 1.6rem; background: #FFFFFF; }
.fdet-faq-grid { max-width: 860px; margin: 0 auto; }

/* — Doctors of this facility (Cleveland provider row, RH tokens, same doc-card) — */
.fdet-doctors { padding: 2.8rem 0 2rem; background: var(--bg-page); border-top: 1px solid var(--border-light); }
.fdet-doctors .section-head { margin-bottom: 1.6rem; }
.fdet-doctors .doc-grid { margin-bottom: 1.25rem; }
.fdet-doctors-empty {
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.7;
  background: #FFFFFF;
  border: 1px dashed var(--border-card);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1rem;
  max-width: 720px;
  margin: 0 auto 1.25rem;
}
.fdet-doctors-actions {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.fdet-doctors-ghost { min-height: 42px; }
@media (max-width: 640px) {
  .fdet-doctors { padding: 2rem 0 1.5rem; }
  .fdet-doctors-actions { flex-direction: column; }
  .fdet-doctors-actions .header-btn-appointment,
  .fdet-doctors-actions .fac-ghost { width: 100%; justify-content: center; }
}

/* Responsive */
@media (max-width: 1024px) {
  .fdet-overview-grid { grid-template-columns: 1fr; }
  .fdet-overview-img { height: 380px; }
  .fdet-services-grid { grid-template-columns: repeat(2, 1fr); }
  .fdet-tech-card { grid-template-columns: 1fr; }
  .fdet-practical-grid { grid-template-columns: 1fr; }
  .fdet-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .fdet-hero { padding: 2.2rem 0 2rem; }
  .fdet-meta-row { gap: 0.45rem; }
  .fdet-meta-chip { font-size: 0.72rem; padding: 0.28rem 0.55rem; }
  .fdet-overview, .fdet-services, .fdet-tech, .fdet-journey, .fdet-practical, .fdet-related, .fdet-faq { padding: 2rem 0 1.4rem; }
  .fdet-overview-img { height: 300px; border-radius: var(--radius-lg); }
  .fdet-services-grid { grid-template-columns: 1fr; }
  .fdet-journey-grid { grid-template-columns: 1fr; }
  .fdet-related-grid { grid-template-columns: 1fr; }
  .fdet-hero-actions { width: 100%; }
  .fdet-hero-actions .header-btn-appointment, .fdet-hero-actions .about-hero-ghost, .fdet-share { flex: 1; justify-content: center; }
}
/* ==========================================================================
   Specialty Detail — [id] page (Read + Operate, inside Specialties world)
   Thesis: facility-detail owns technology/capability (16:9 hero + tech band);
           specialty-detail owns clinical pathway (condition plain language + procedures + doctor tease).
           Keeps RH tokens, left-icon rows stay list-density, adds Mayo condition hierarchy + Cleveland rating tease.
   Distinct: facility = 7 modalities + tech specs; specialty = conditions 6 + procedures 6 + facilities pills + 3 doctors.
   ========================================================================== */
.sdet-hero { padding: 3.2rem 0 3rem; }
.sdet-hero-inner { max-width: 860px; }
.sdet-hero-top { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.sdet-kicker { margin-bottom: 0; }
.sdet-code {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 28px; padding: 0.18rem 0.6rem;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18);
  color: #FFFFFF; font-size: 0.72rem; letter-spacing: 0.06em; border-radius: var(--radius-pill);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.sdet-title { margin-bottom: 0.85rem; }
.sdet-lead { margin-bottom: 1.15rem; }
.sdet-meta-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.15rem; }
.sdet-meta-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.14);
  color: #FFFFFF; font-size: 0.76rem; padding: 0.32rem 0.7rem; border-radius: var(--radius-pill);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.sdet-meta-chip svg { color: #7ED3E8; flex-shrink: 0; }
.sdet-meta-chip--portal { background: rgba(126,211,232,0.14); border-color: rgba(126,211,232,0.22); }
.sdet-hero-actions { gap: 0.6rem; }
.sdet-share {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: rgba(255,255,255,0.12); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.18);
  padding: 0.55rem 0.9rem; border-radius: var(--radius-pill); min-height: 42px; font-size: 0.82rem;
  cursor: pointer; transition: var(--transition);
}
.sdet-share:hover { background: #FFFFFF; color: var(--fakeeh-navy); border-color: #FFFFFF; transform: translateY(-1px); }
.sdet-share:focus-visible { outline: 2px solid #7ED3E8; outline-offset: 2px; }
.sdet-overview { padding: 3.8rem 0 2.2rem; background: #FFFFFF; }
.sdet-overview-grid { display: grid; grid-template-columns: 1.05fr 1.15fr; gap: 2.2rem; align-items: center; }
.sdet-overview-media { position: relative; }
.sdet-overview-img { width: 100%; height: 480px; object-fit: cover; border-radius: var(--radius-xl); box-shadow: 0 16px 36px rgba(43,74,107,0.12); border: 1px solid rgba(43,122,138,0.06); display: block; }
.sdet-img-badge {
  position: absolute; bottom: 1rem; inset-inline-start: 1rem;
  background: rgba(255,255,255,0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(43,122,138,0.12); color: var(--fakeeh-teal);
  font-size: 0.72rem; padding: 0.32rem 0.7rem; border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px rgba(43,74,107,0.10);
}
body.lang-en .sdet-img-badge { inset-inline-start: auto; left: 1rem; }
.sdet-overview-copy { min-width: 0; }
.sdet-overview-title { font-size: var(--text-section); color: var(--fakeeh-navy); line-height: 1.28; margin: 0.6rem 0 0.7rem; letter-spacing: -0.02em; text-wrap: balance; }
.sdet-overview-lead { font-size: 0.95rem; color: var(--text-muted); line-height: 1.85; margin-bottom: 1.1rem; }
.sdet-checks { margin-bottom: 1.15rem; }
.sdet-overview-meta { display: flex; gap: 1rem; flex-wrap: wrap; padding-top: 0.9rem; border-top: 1px solid var(--border-light); margin-bottom: 1.1rem; }
.sdet-overview-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }
.sdet-conditions { padding: 2.8rem 0 1.8rem; background: var(--bg-page); }
.sdet-conditions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sdet-condition-card {
  display: flex; gap: 0.85rem; align-items: flex-start;
  background: #FFFFFF; border: 1px solid var(--border-card); border-radius: 14px;
  padding: 1rem 1.05rem; transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 4px 16px rgba(43,122,138,0.04);
}
.sdet-condition-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--fakeeh-teal); }
.sdet-condition-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--fakeeh-teal-light); border: 1px solid rgba(43,122,138,0.12); color: var(--fakeeh-teal); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--transition); }
.sdet-condition-card:hover .sdet-condition-icon { background: var(--fakeeh-teal); color: #FFFFFF; border-color: var(--fakeeh-teal); transform: scale(1.05); }
.sdet-condition-body h4 { font-size: 0.92rem; color: var(--fakeeh-navy); margin-bottom: 0.2rem; line-height: 1.35; }
.sdet-condition-body p { font-size: 0.80rem; color: var(--text-muted); line-height: 1.5; }
.sdet-note { text-align: center; font-size: 0.78rem; color: var(--text-muted); margin: 1rem auto 0; max-width: 65ch; line-height: 1.6; }
.sdet-procedures { padding: 2.2rem 0 1.8rem; background: #FFFFFF; }
.sdet-procedures-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sdet-procedure-card {
  display: flex; gap: 0.85rem; align-items: flex-start;
  background: var(--bg-page); border: 1px solid var(--border-card); border-radius: 14px;
  padding: 1rem 1.05rem; transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.sdet-procedure-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--fakeeh-teal); background: #FFFFFF; }
.sdet-procedure-icon { width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; border: 1px solid var(--border-light); color: var(--fakeeh-teal); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sdet-procedure-body h4 { font-size: 0.90rem; color: var(--text-main); margin-bottom: 0.15rem; }
.sdet-procedure-body p { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }
.sdet-facilities { padding: 1.8rem 0 2rem; background: var(--bg-page); }
.sdet-facilities-card {
  display: grid; grid-template-columns: 1.2fr 0.85fr; gap: 1.8rem; align-items: center;
  background: #FFFFFF; border: 1px solid var(--border-card); border-radius: var(--radius-xl);
  padding: 1.6rem 1.5rem; box-shadow: var(--shadow-card);
}
.sdet-facilities-copy h3 { font-size: 1.15rem; color: var(--fakeeh-navy); margin: 0.6rem 0 0.55rem; line-height: 1.35; letter-spacing: -0.01em; text-wrap: balance; }
.sdet-facilities-lead { font-size: 0.88rem; color: var(--text-muted); line-height: 1.75; margin-bottom: 0.85rem; }
.sdet-facilities-pills { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.sdet-fac-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--fakeeh-teal-light); border: 1px solid rgba(43,122,138,0.12);
  color: var(--fakeeh-teal); font-size: 0.78rem; padding: 0.38rem 0.75rem; border-radius: var(--radius-pill);
  text-decoration: none; transition: var(--transition);
}
.sdet-fac-pill:hover { background: var(--fakeeh-teal); color: #FFFFFF; border-color: var(--fakeeh-teal); transform: translateY(-1px); }
.sdet-facilities-meta { display: flex; flex-direction: column; gap: 0.85rem; }
.sdet-facilities-visual {
  display: flex; align-items: center; gap: 0.9rem;
  background: var(--bg-page); border: 1px solid var(--border-card); border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
}
.sdet-facilities-visual svg { color: var(--fakeeh-teal); flex-shrink: 0; }
.sdet-facilities-visual strong { display: block; font-size: 1rem; color: var(--fakeeh-navy); line-height: 1; }
.sdet-facilities-visual span { font-size: 0.78rem; color: var(--text-muted); }
.sdet-facilities-note { font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; background: var(--fakeeh-teal-light); border: 1px solid rgba(43,122,138,0.10); border-radius: 10px; padding: 0.6rem 0.8rem; }
.sdet-journey { padding: 2.6rem 0 1.8rem; background: #FFFFFF; }
.sdet-journey-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.sdet-journey-card {
  background: var(--bg-page); border: 1px solid var(--border-card); border-radius: var(--radius-lg);
  padding: 1.35rem 1.2rem; display: flex; flex-direction: column; gap: 0.45rem;
  box-shadow: var(--shadow-card); transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease;
  position: relative; overflow: hidden;
}
.sdet-journey-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--fakeeh-teal), #7ED3E8); opacity: 0; transition: opacity 0.22s ease; }
.sdet-journey-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); background: #FFFFFF; }
.sdet-journey-card:hover::before { opacity: 1; }
.sdet-journey-num { width: 32px; height: 32px; border-radius: 50%; background: var(--fakeeh-teal-light); border: 1px solid rgba(43,122,138,0.14); color: var(--fakeeh-teal); display: inline-flex; align-items: center; justify-content: center; font-size: 0.82rem; flex-shrink: 0; }
.sdet-journey-card h4 { font-size: 0.98rem; color: var(--fakeeh-navy); margin-top: 0.15rem; }
.sdet-journey-card p { font-size: 0.84rem; color: var(--text-muted); line-height: 1.7; }
.sdet-journey-foot { text-align: center; margin-top: 1.2rem; font-size: 0.82rem; color: var(--text-muted); display: flex; justify-content: center; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.sdet-journey-foot a { color: var(--fakeeh-teal); text-decoration: underline; text-underline-offset: 3px; }
.sdet-doctors { padding: 1.8rem 0 1.5rem; background: var(--bg-page); }
.sdet-doctors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
.sdet-doctor-card {
  display: flex; gap: 0.9rem; align-items: flex-start;
  background: #FFFFFF; border: 1px solid var(--border-card); border-radius: 16px;
  padding: 1.1rem; box-shadow: 0 4px 16px rgba(43,122,138,0.04);
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.sdet-doctor-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--fakeeh-teal); }
.sdet-doctor-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid #FFFFFF; box-shadow: 0 4px 12px rgba(43,74,107,0.10); background: var(--fakeeh-teal-light); }
.sdet-doctor-body { flex: 1; min-width: 0; }
.sdet-doctor-body h4 { font-size: 0.95rem; color: var(--fakeeh-navy); line-height: 1.35; margin-bottom: 0.15rem; }
.sdet-doctor-title { font-size: 0.72rem; color: var(--fakeeh-teal); background: var(--fakeeh-teal-light); border: 1px solid rgba(43,122,138,0.10); padding: 0.12rem 0.5rem; border-radius: var(--radius-pill); display: inline-block; margin-bottom: 0.25rem; }
.sdet-doctor-spec { font-size: 0.78rem; color: var(--text-muted); display: block; line-height: 1.4; }
.sdet-doctor-meta { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.35rem; font-size: 0.72rem; color: var(--text-light); }
.sdet-doctor-rating { color: var(--fakeeh-teal); font-size: 0.78rem; }
.sdet-dot { width: 3px; height: 3px; background: rgba(43,122,138,0.28); border-radius: 50%; flex-shrink: 0; }
.sdet-avail { color: #0F7A4A; background: #E6FFF2; border: 1px solid #B8E8D0; padding: 0.1rem 0.45rem; border-radius: var(--radius-pill); font-size: 0.70rem; }
.sdet-doctor-actions { display: flex; flex-direction: column; gap: 0.45rem; flex-shrink: 0; align-items: stretch; }
.sdet-book { min-height: 36px; padding: 0.4rem 0.9rem; font-size: 0.80rem; }
.sdet-profile { min-height: 32px; padding: 0.32rem 0.8rem; font-size: 0.76rem; }
.sdet-doctors-cta { display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center; margin-top: 1.2rem; align-items: center; }
.sdet-related { padding: 2.4rem 0 1.6rem; background: #FFFFFF; }
.sdet-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.sdet-related-card {
  display: flex; gap: 0.9rem; align-items: center;
  background: var(--bg-page); border: 1px solid var(--border-card); border-radius: 14px;
  padding: 1rem 1.05rem; text-decoration: none; color: inherit;
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 4px 16px rgba(43,122,138,0.04);
}
.sdet-related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--fakeeh-teal); background: #FFFFFF; }
.sdet-related-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--fakeeh-teal-light); border: 1px solid rgba(43,122,138,0.12); color: var(--fakeeh-teal); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sdet-related-body h4 { font-size: 0.92rem; color: var(--fakeeh-navy); margin-bottom: 0.2rem; }
.sdet-related-body p { font-size: 0.80rem; color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.3rem; }
.sdet-related-link { font-size: 0.78rem; color: var(--fakeeh-teal); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(43,122,138,0.22); }
.sdet-faq { padding: 2.2rem 0 1.6rem; background: var(--bg-page); }
.sdet-faq-grid { max-width: 860px; margin: 0 auto; }
.sdet-practical { padding: 1.8rem 0 1.4rem; background: #FFFFFF; border-top: 1px solid var(--border-light); }
.sdet-practical-grid { display: grid; grid-template-columns: 1.25fr 0.85fr; gap: 1.5rem; align-items: start; }
.sdet-practical-card { background: var(--bg-page); border: 1px solid var(--border-card); border-radius: var(--radius-xl); padding: 1.5rem 1.4rem; box-shadow: var(--shadow-card); }
.sdet-practical-card h3 { font-size: 1.02rem; color: var(--fakeeh-navy); margin-bottom: 1rem; letter-spacing: -0.01em; }
.sdet-prac-rows { display: flex; flex-direction: column; gap: 1rem; }
.sdet-prac-row { display: flex; gap: 0.85rem; align-items: flex-start; }
.sdet-prac-icon { width: 36px; height: 36px; border-radius: 50%; background: #FFFFFF; border: 1px solid var(--border-light); color: var(--fakeeh-teal); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(43,122,138,0.06); }
.sdet-prac-row strong { display: block; font-size: 0.82rem; color: var(--text-main); margin-bottom: 0.15rem; }
.sdet-prac-row span { font-size: 0.84rem; color: var(--text-muted); line-height: 1.6; display: block; }
.sdet-prac-link { display: inline-block; margin-top: 0.3rem; font-size: 0.80rem; color: var(--fakeeh-teal) !important; text-decoration: underline; text-underline-offset: 3px; }
.sdet-prac-link:hover { color: var(--fakeeh-teal-dark) !important; }
.sdet-practical-actions { display: flex; flex-direction: column; gap: 0.7rem; }
.sdet-full { width: 100%; justify-content: center; }
.sdet-prac-note { font-size: 0.76rem; color: var(--text-muted); line-height: 1.6; text-align: center; background: var(--fakeeh-teal-light); border: 1px solid rgba(43,122,138,0.10); border-radius: 10px; padding: 0.6rem 0.8rem; }
@media (max-width: 1024px) {
  .sdet-overview-grid { grid-template-columns: 1fr; }
  .sdet-overview-img { height: 380px; }
  .sdet-conditions-grid { grid-template-columns: repeat(2, 1fr); }
  .sdet-procedures-grid { grid-template-columns: repeat(2, 1fr); }
  .sdet-facilities-card { grid-template-columns: 1fr; }
  .sdet-doctors-grid { grid-template-columns: repeat(2, 1fr); }
  .sdet-practical-grid { grid-template-columns: 1fr; }
  .sdet-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sdet-hero { padding: 2.2rem 0 2rem; }
  .sdet-meta-row { gap: 0.45rem; }
  .sdet-meta-chip { font-size: 0.72rem; padding: 0.28rem 0.55rem; }
  .sdet-overview, .sdet-conditions, .sdet-procedures, .sdet-facilities, .sdet-journey, .sdet-doctors, .sdet-related, .sdet-faq, .sdet-practical { padding: 2rem 0 1.4rem; }
  .sdet-overview-img { height: 300px; border-radius: var(--radius-lg); }
  .sdet-conditions-grid { grid-template-columns: 1fr; }
  .sdet-procedures-grid { grid-template-columns: 1fr; }
  .sdet-journey-grid { grid-template-columns: 1fr; }
  .sdet-doctors-grid { grid-template-columns: 1fr; }
  .sdet-related-grid { grid-template-columns: 1fr; }
  .sdet-hero-actions { width: 100%; }
  .sdet-hero-actions .header-btn-appointment, .sdet-hero-actions .about-hero-ghost, .sdet-share { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sdet-condition-card, .sdet-procedure-card, .sdet-journey-card, .sdet-doctor-card, .sdet-related-card { transition: none !important; transform: none !important; }
}

/* === Specialty Detail — Editorial refresh (Fakeeh DSFH reference) === */
.sdet-photo-hero{position:relative;min-height:420px;height:46vh;max-height:520px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--fakeeh-navy);text-align:center;color:#fff}
.sdet-photo-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sdet-photo-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,74,107,0.18) 0%,rgba(43,74,107,0.42) 55%,rgba(43,74,107,0.62) 100%);z-index:1}
.sdet-photo-hero-inner{position:relative;z-index:2;width:100%;max-width:820px;margin:0 auto;padding:2.2rem 1.25rem;text-align:center}
.sdet-photo-breadcrumb{display:inline-flex;align-items:center;gap:0.45rem;font-size:0.78rem;color:rgba(255,255,255,0.88);margin-bottom:0.9rem;flex-wrap:wrap;justify-content:center}
.sdet-photo-breadcrumb a{color:rgba(255,255,255,0.92);text-decoration:none}
.sdet-photo-breadcrumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.sdet-photo-kicker{display:inline-flex;align-items:center;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.22);color:#fff;font-size:0.72rem;padding:0.28rem 0.85rem;border-radius:9999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);margin-bottom:0.85rem;letter-spacing:0.02em}
.sdet-photo-title{font-size:clamp(1.55rem,1.2rem + 1.8vw,2.4rem);color:#fff;line-height:1.28;margin-bottom:0.65rem;text-wrap:balance;letter-spacing:-0.02em}
.sdet-photo-lead{font-size:clamp(0.88rem,0.85rem + 0.25vw,1rem);color:rgba(255,255,255,0.92);line-height:1.75;max-width:62ch;margin:0 auto 1.15rem}
.sdet-photo-actions{display:inline-flex;gap:0.6rem;flex-wrap:wrap;justify-content:center}
.sdet-photo-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0.55rem 1.1rem;border-radius:9999px;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.22);color:#fff;font-size:0.82rem;cursor:pointer;transition:var(--transition);backdrop-filter:blur(8px)}
.sdet-photo-ghost:hover{background:#fff;color:var(--fakeeh-navy);border-color:#fff}
.sdet-intro{padding:2.6rem 0 1.2rem;background:#fff}
.sdet-intro-inner{max-width:760px;margin:0 auto;text-align:center}
.sdet-intro-title{font-size:clamp(1.3rem,1.1rem + 0.9vw,1.9rem);color:var(--fakeeh-teal);margin-bottom:0.65rem;letter-spacing:-0.02em;text-wrap:balance}
.sdet-intro-lead{font-size:0.95rem;color:var(--text-muted);line-height:1.85;max-width:65ch;margin:0 auto}
.sdet-editorial{padding:1.4rem 0 1.2rem;background:#fff}
.sdet-ed-stack{display:flex;flex-direction:column;gap:3rem}
.sdet-ed-row{display:grid;grid-template-columns:1fr 1fr;gap:2rem 2.4rem;align-items:center}
.sdet-ed-row--reverse{ direction:ltr}
.sdet-ed-row--reverse > *{ direction:rtl}
body.lang-en .sdet-ed-row--reverse{ direction:rtl}
body.lang-en .sdet-ed-row--reverse > *{ direction:ltr}
.sdet-ed-media{position:relative}
.sdet-ed-img{width:100%;height:360px;object-fit:cover;border-radius:16px;display:block;background:var(--bg-box);border:1px solid rgba(43,122,138,0.06)}
.sdet-ed-copy{min-width:0}
.sdet-ed-kicker{display:inline-block;font-size:0.72rem;color:var(--fakeeh-teal);background:var(--fakeeh-teal-light);border:1px solid rgba(43,122,138,0.10);padding:0.22rem 0.6rem;border-radius:9999px;margin-bottom:0.6rem;letter-spacing:0.02em}
.sdet-ed-title{font-size:clamp(1.15rem,1rem + 0.5vw,1.45rem);color:var(--fakeeh-navy);line-height:1.35;margin-bottom:0.55rem;letter-spacing:-0.015em;text-wrap:balance}
.sdet-ed-desc{font-size:0.92rem;color:var(--text-muted);line-height:1.8;margin-bottom:0.75rem}
.sdet-ed-list{list-style:none;display:flex;flex-direction:column;gap:0.45rem;margin:0;padding:0}
.sdet-ed-list li{position:relative;padding-inline-start:1.1rem;font-size:0.88rem;color:var(--text-main);line-height:1.6}
.sdet-ed-list li::before{content:"";position:absolute;inset-inline-start:0;top:0.62em;width:6px;height:6px;background:var(--fakeeh-teal);border-radius:50%;opacity:0.9}
.sdet-ed-note{margin-top:0.7rem;font-size:0.78rem;color:var(--text-muted);line-height:1.6}
.sdet-facilities-min{padding:1.2rem 0 1.6rem;background:#FBFDFE;border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}
.sdet-fac-min-inner{text-align:center;max-width:820px;margin:0 auto}
.sdet-fac-min-label{display:inline-block;font-size:0.72rem;color:var(--fakeeh-teal);background:var(--fakeeh-teal-light);border:1px solid rgba(43,122,138,0.10);padding:0.25rem 0.7rem;border-radius:9999px;margin-bottom:0.75rem}
.sdet-fac-min-note{font-size:0.78rem;color:var(--text-muted);margin-top:0.6rem}
.sdet-doctors{padding:1.8rem 0 1.5rem;background:var(--bg-page)}
.sdet-doctors .section-head{margin-bottom:1.6rem}
.sdet-doctors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}
.sdet-doctors-status{grid-column:1 / -1;margin:0;padding:1rem;text-align:center;color:var(--text-muted);background:var(--fakeeh-teal-light);border:1px solid var(--border-light);border-radius:var(--radius-md)}
/* Unified with .doc-card — keep .sdet-doctor-card as alias for any legacy markup so both render identically */
.sdet-doctor-card{display:flex;gap:0.9rem;background:#FFFFFF;border:1px solid var(--border-card);border-radius:16px;padding:1.1rem;align-items:flex-start;transition:transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease, border-color 0.2s ease;box-shadow:0 4px 16px rgba(43,122,138,0.04)}
.sdet-doctor-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--fakeeh-teal)}
.sdet-doctor-img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid #FFFFFF;box-shadow:0 4px 12px rgba(43,74,107,0.10);background:var(--fakeeh-teal-light)}
.sdet-doctor-body{flex:1;min-width:0}
.sdet-doctor-body h4{font-size:0.95rem;color:var(--fakeeh-navy);line-height:1.35;margin-bottom:0.15rem}
.sdet-doctor-title{font-size:0.72rem;color:var(--fakeeh-teal);background:var(--fakeeh-teal-light);border:1px solid rgba(43,122,138,0.10);padding:0.12rem 0.5rem;border-radius:var(--radius-pill);display:inline-block;margin-bottom:0.25rem}
.sdet-doctor-spec{font-size:0.78rem;color:var(--text-muted);display:block;line-height:1.4}
.sdet-doctor-meta{display:flex;align-items:center;gap:0.35rem;flex-wrap:wrap;margin-top:0.35rem;font-size:0.72rem;color:var(--text-light)}
.sdet-doctor-rating{color:var(--fakeeh-teal);font-size:0.78rem}
.sdet-doctor-actions{display:flex;flex-direction:column;gap:0.45rem;flex-shrink:0;align-items:stretch}
.sdet-book{min-height:36px;padding:0.4rem 0.9rem;font-size:0.80rem}
.sdet-profile{min-height:32px;padding:0.32rem 0.8rem;font-size:0.76rem}
@media (max-width:1024px){.sdet-ed-row{grid-template-columns:1fr;gap:1.2rem}.sdet-ed-row--reverse{ direction:rtl}.sdet-ed-img{height:320px}.sdet-doctors-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.sdet-photo-hero{min-height:380px;height:auto;padding:1.6rem 0}.sdet-photo-hero-inner{padding:1.6rem 1rem}.sdet-ed-img{height:260px;border-radius:14px}.sdet-doctors-grid{grid-template-columns:1fr;gap:0.85rem}.sdet-doctor-card{padding:0.9rem}.sdet-doctor-img{width:56px;height:56px}.sdet-intro{padding:2rem 0 0.8rem}.sdet-editorial{padding:1rem 0}}
@media (max-width:380px){.sdet-doctors-grid{grid-template-columns:1fr}}
/* === Facility Detail — DSFH Radiology editorial refresh === */
.fdet-photo-hero{position:relative;min-height:420px;height:46vh;max-height:520px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--fakeeh-navy);text-align:center;color:#fff}
.fdet-photo-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fdet-photo-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,74,107,0.18) 0%,rgba(43,74,107,0.42) 55%,rgba(43,74,107,0.62) 100%);z-index:1}
.fdet-photo-hero-inner{position:relative;z-index:2;width:100%;max-width:820px;margin:0 auto;padding:2.2rem 1.25rem;text-align:center}
.fdet-photo-breadcrumb{display:inline-flex;align-items:center;gap:0.45rem;font-size:0.78rem;color:rgba(255,255,255,0.88);margin-bottom:0.9rem;flex-wrap:wrap;justify-content:center}
.fdet-photo-breadcrumb a{color:rgba(255,255,255,0.92)}
.fdet-photo-breadcrumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.fdet-photo-kicker{display:inline-flex;align-items:center;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.22);color:#fff;font-size:0.72rem;padding:0.28rem 0.85rem;border-radius:9999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);margin-bottom:0.85rem}
.fdet-photo-title{font-size:clamp(1.55rem,1.2rem + 1.8vw,2.4rem);color:#fff;line-height:1.28;margin-bottom:0.65rem;text-wrap:balance;letter-spacing:-0.02em}
.fdet-photo-lead{font-size:clamp(0.88rem,0.85rem + 0.25vw,1rem);color:rgba(255,255,255,0.92);line-height:1.75;max-width:62ch;margin:0 auto 1.15rem}
.fdet-photo-actions{display:inline-flex;gap:0.6rem;flex-wrap:wrap;justify-content:center}
.fdet-photo-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0.55rem 1.1rem;border-radius:9999px;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.22);color:#fff;font-size:0.82rem;cursor:pointer;transition:var(--transition);backdrop-filter:blur(8px)}
.fdet-photo-ghost:hover{background:#fff;color:var(--fakeeh-navy);border-color:#fff}
.fdet-intro{padding:2.6rem 0 1.2rem;background:#fff}
.fdet-intro-inner{max-width:760px;margin:0 auto;text-align:center}
.fdet-intro-title{font-size:clamp(1.3rem,1.1rem + 0.9vw,1.9rem);color:var(--fakeeh-teal);margin-bottom:0.65rem;letter-spacing:-0.02em;text-wrap:balance}
.fdet-intro-lead{font-size:0.95rem;color:var(--text-muted);line-height:1.85;max-width:65ch;margin:0 auto}
.fdet-editorial{padding:1.4rem 0 1.2rem;background:#fff}
.fdet-ed-stack{display:flex;flex-direction:column;gap:3rem}
.fdet-ed-row{display:grid;grid-template-columns:1fr 1fr;gap:2rem 2.4rem;align-items:center}
.fdet-ed-row--reverse{ direction:ltr}
.fdet-ed-row--reverse > *{ direction:rtl}
body.lang-en .fdet-ed-row--reverse{ direction:rtl}
body.lang-en .fdet-ed-row--reverse > *{ direction:ltr}
.fdet-ed-media{position:relative}
.fdet-ed-img{width:100%;height:360px;object-fit:cover;border-radius:16px;display:block;background:var(--bg-box);border:1px solid rgba(43,122,138,0.06)}
.fdet-ed-copy{min-width:0}
.fdet-ed-kicker{display:inline-block;font-size:0.72rem;color:var(--fakeeh-teal);background:var(--fakeeh-teal-light);border:1px solid rgba(43,122,138,0.10);padding:0.22rem 0.6rem;border-radius:9999px;margin-bottom:0.6rem}
.fdet-ed-title{font-size:clamp(1.15rem,1rem + 0.5vw,1.45rem);color:var(--fakeeh-navy);line-height:1.35;margin-bottom:0.55rem;letter-spacing:-0.015em;text-wrap:balance}
.fdet-ed-desc{font-size:0.92rem;color:var(--text-muted);line-height:1.8;margin-bottom:0.75rem}
.fdet-ed-list{list-style:none;display:flex;flex-direction:column;gap:0.45rem;margin:0;padding:0}
.fdet-ed-list li{position:relative;padding-inline-start:1.1rem;font-size:0.88rem;color:var(--text-main);line-height:1.6}
.fdet-ed-list li::before{content:"";position:absolute;inset-inline-start:0;top:0.62em;width:6px;height:6px;background:var(--fakeeh-teal);border-radius:50%;opacity:0.9}
.fdet-strip{padding:1.2rem 0 1.4rem;background:#FBFDFE;border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}
.fdet-strip-inner{text-align:center;max-width:760px;margin:0 auto}
.fdet-strip-label{display:inline-block;font-size:0.72rem;color:var(--fakeeh-teal);background:var(--fakeeh-teal-light);border:1px solid rgba(43,122,138,0.10);padding:0.25rem 0.7rem;border-radius:9999px;margin-bottom:0.55rem}
.fdet-strip-note{font-size:0.78rem;color:var(--text-muted);line-height:1.6}
.fdet-related .fdet-related-grid,.fdet-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.fdet-related .fdet-related-card,.fdet-related-card{display:flex;gap:0.85rem;align-items:center;background:var(--bg-page);border:1px solid var(--border-card);border-radius:14px;padding:1rem;box-shadow:none;transition:var(--transition);text-decoration:none;color:inherit}
.fdet-related-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(43,122,138,0.06);background:#fff;border-color:var(--fakeeh-teal)}
@media (max-width:1024px){.fdet-ed-row{grid-template-columns:1fr;gap:1.2rem}.fdet-ed-row--reverse{ direction:rtl}.fdet-ed-img{height:320px}}
@media (max-width:640px){.fdet-photo-hero{min-height:380px;height:auto;padding:1.6rem 0}.fdet-photo-hero-inner{padding:1.6rem 1rem}.fdet-ed-img{height:260px;border-radius:14px}.fdet-intro{padding:2rem 0 0.8rem}.fdet-editorial{padding:1rem 0}.fdet-related-grid{grid-template-columns:1fr}}

/* ==========================================================================
   Doctor Detail — [id] page (Read + Operate, inside Doctors world)
   Thesis: index is 12 compact provider rows (avatar 64 + rating + availability);
           detail is the *opened provider* — profile-first with large avatar 96,
           verified rating, language pills, schedule, bio plain language, conditions/procedures,
           where they practice, related doctors. Owns provider identity; facilities owns tech, specialties owns condition hierarchy.
   Distinct: specialty/facility = capability taxonomy; doctor = human + schedule + trust.
   ========================================================================== */
.ddet-hero { padding: 3rem 0 2.8rem; }
.ddet-hero-inner { max-width: 860px; }
.ddet-hero-grid { display: grid; grid-template-columns: 96px 1fr; gap: 1.4rem; align-items: center; margin-bottom: 1rem; }
.ddet-hero-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,0.9); box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 0 0 4px rgba(126,211,232,0.18); background: var(--fakeeh-teal-light); display: block; }
.ddet-hero-copy { min-width: 0; }
.ddet-hero-top { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.ddet-kicker { margin-bottom: 0; }
.ddet-code { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0.18rem 0.6rem; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); color: #FFFFFF; font-size: 0.72rem; letter-spacing: 0.06em; border-radius: var(--radius-pill); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ddet-name { margin-bottom: 0.4rem; font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.3rem); }
.ddet-hero-spec { font-size: 0.88rem; color: #D4E3EE; line-height: 1.6; margin-bottom: 0.85rem; max-width: 60ch; }
.ddet-meta-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.95rem; }
.ddet-meta-chip { display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.14); color: #FFFFFF; font-size: 0.76rem; padding: 0.32rem 0.7rem; border-radius: var(--radius-pill); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ddet-meta-chip svg { color: #7ED3E8; flex-shrink: 0; }
.ddet-rating-chip { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.18); }
.ddet-rating-chip svg { color: #FACC15; fill: rgba(250,204,21,0.18); }
.ddet-avail-chip { background: rgba(34,197,94,0.14); border-color: rgba(34,197,94,0.22); color: #FFFFFF; }
.ddet-avail-chip svg { color: #86EFAC; }
.ddet-meta-sep { color: rgba(255,255,255,0.45); }
.ddet-hero-actions { gap: 0.6rem; flex-wrap: wrap; }
.ddet-share { display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(255,255,255,0.12); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.18); padding: 0.55rem 0.9rem; border-radius: var(--radius-pill); min-height: 42px; font-size: 0.82rem; cursor: pointer; transition: var(--transition); }
.ddet-share:hover { background: #FFFFFF; color: var(--fakeeh-navy); border-color: #FFFFFF; transform: translateY(-1px); }
.ddet-share:focus-visible { outline: 2px solid #7ED3E8; outline-offset: 2px; }
.ddet-hero-trust { margin-top: 0.2rem; }
.ddet-bio { padding: 3.6rem 0 2.2rem; background: #FFFFFF; }
.ddet-bio-grid { display: grid; grid-template-columns: 340px 1fr; gap: 2.2rem; align-items: center; }
.ddet-bio-media { position: relative; }
.ddet-bio-avatar { width: 100%; height: 340px; object-fit: cover; border-radius: var(--radius-xl); box-shadow: 0 16px 36px rgba(43,74,107,0.12); border: 1px solid rgba(43,122,138,0.06); display: block; }
.ddet-bio-badge { position: absolute; bottom: 1rem; inset-inline-start: 1rem; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(43,122,138,0.12); color: var(--fakeeh-teal); font-size: 0.72rem; padding: 0.32rem 0.7rem; border-radius: var(--radius-pill); box-shadow: 0 4px 14px rgba(43,74,107,0.10); display: inline-flex; align-items: center; gap: 0.4rem; }
body.lang-en .ddet-bio-badge { inset-inline-start: auto; left: 1rem; }
.ddet-bio-badge-dot { width: 8px; height: 8px; background: #22C55E; border-radius: 50%; box-shadow: 0 0 0 4px rgba(34,197,94,0.18); flex-shrink: 0; }
.ddet-bio-copy { min-width: 0; }
.ddet-bio-title { font-size: var(--text-section); color: var(--fakeeh-navy); line-height: 1.28; margin: 0.6rem 0 0.7rem; letter-spacing: -0.02em; text-wrap: balance; }
.ddet-bio-lead { font-size: 0.95rem; color: var(--text-muted); line-height: 1.85; margin-bottom: 1.1rem; }
.ddet-checks { margin-bottom: 1.15rem; }
.ddet-bio-meta { display: flex; gap: 1rem; flex-wrap: wrap; padding-top: 0.9rem; border-top: 1px solid var(--border-light); margin-bottom: 1.1rem; }
.ddet-bio-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }
.ddet-expertise { padding: 2.6rem 0 1.6rem; background: var(--bg-page); }
.ddet-expertise-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.ddet-expertise-col h3 { font-size: 1rem; color: var(--fakeeh-navy); margin-bottom: 0.9rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-light); display: inline-flex; align-items: center; gap: 0.5rem; }
.ddet-expertise-col h3::before { content: ''; width: 8px; height: 8px; background: var(--fakeeh-teal); border-radius: 50%; box-shadow: 0 0 0 4px rgba(43,122,138,0.10); }
.ddet-conditions-grid, .ddet-procedures-grid { display: flex; flex-direction: column; gap: 0.75rem; }
.ddet-condition-card, .ddet-procedure-card {
  display: flex; gap: 0.75rem; align-items: flex-start;
  background: #FFFFFF; border: 1px solid var(--border-card); border-radius: 12px;
  padding: 0.85rem 0.95rem; transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 4px 16px rgba(43,122,138,0.04);
}
.ddet-condition-card:hover, .ddet-procedure-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--fakeeh-teal); }
.ddet-condition-icon, .ddet-procedure-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--fakeeh-teal-light); border: 1px solid rgba(43,122,138,0.12); color: var(--fakeeh-teal); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ddet-condition-body h4, .ddet-procedure-body h4 { font-size: 0.88rem; color: var(--fakeeh-navy); margin-bottom: 0.15rem; }
.ddet-condition-body p, .ddet-procedure-body p { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }
.ddet-practice { padding: 2.2rem 0 1.8rem; background: #FFFFFF; }
.ddet-practice-grid { display: grid; grid-template-columns: 1.2fr 0.85fr; gap: 1.6rem; align-items: start; }
.ddet-practice-card { background: var(--bg-page); border: 1px solid var(--border-card); border-radius: var(--radius-xl); padding: 1.6rem 1.5rem; box-shadow: var(--shadow-card); }
.ddet-practice-card h3 { font-size: 1.1rem; color: var(--fakeeh-navy); margin: 0.6rem 0 0.55rem; letter-spacing: -0.01em; }
.ddet-practice-lead { font-size: 0.88rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 0.85rem; }
.ddet-practice-pills { display: flex; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.ddet-practice-pill { display: inline-flex; align-items: center; gap: 0.35rem; background: #FFFFFF; border: 1px solid var(--border-light); color: var(--fakeeh-teal); font-size: 0.78rem; padding: 0.38rem 0.75rem; border-radius: var(--radius-pill); text-decoration: none; transition: var(--transition); }
.ddet-practice-pill:hover { background: var(--fakeeh-teal); color: #FFFFFF; border-color: var(--fakeeh-teal); transform: translateY(-1px); }
.ddet-practice-pill--static { background: var(--fakeeh-teal-light); border-color: rgba(43,122,138,0.12); color: var(--text-muted); cursor: default; }
.ddet-practice-pill--static:hover { transform: none; background: var(--fakeeh-teal-light); color: var(--text-muted); border-color: rgba(43,122,138,0.12); }
.ddet-schedule h4 { font-size: 0.92rem; color: var(--fakeeh-navy); margin-bottom: 0.6rem; }
.ddet-schedule-grid { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.ddet-schedule-item { display: inline-flex; align-items: center; gap: 0.5rem; background: #FFFFFF; border: 1px solid var(--border-card); border-radius: var(--radius-pill); padding: 0.4rem 0.75rem; font-size: 0.80rem; color: var(--text-main); }
.ddet-schedule-dot { width: 8px; height: 8px; background: #22C55E; border-radius: 50%; box-shadow: 0 0 0 3px rgba(34,197,94,0.14); flex-shrink: 0; }
.ddet-schedule-note { font-size: 0.76rem; color: var(--text-muted); line-height: 1.6; background: #FFFFFF; border: 1px dashed var(--border-card); border-radius: 10px; padding: 0.6rem 0.8rem; }
.ddet-trust-card { background: #FFFFFF; border: 1px solid var(--border-card); border-radius: var(--radius-xl); padding: 1.4rem; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 0.7rem; }
.ddet-trust-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--fakeeh-teal-light); border: 1px solid rgba(43,122,138,0.12); color: var(--fakeeh-teal); display: inline-flex; align-items: center; justify-content: center; }
.ddet-trust-card h4 { font-size: 1rem; color: var(--fakeeh-navy); }
.ddet-trust-card p { font-size: 0.84rem; color: var(--text-muted); line-height: 1.6; }
.ddet-trust-meta { display: flex; align-items: center; gap: 0.5rem; }
.ddet-trust-stars { font-size: 1.05rem; color: var(--fakeeh-teal); letter-spacing: 0.02em; }
.ddet-trust-note { font-size: 0.78rem; color: var(--text-muted); }
.ddet-trust-cta { justify-content: center; }
.ddet-trust-legal { font-size: 0.72rem; color: var(--text-light); line-height: 1.6; border-top: 1px solid var(--border-light); padding-top: 0.6rem; }
.ddet-related { padding: 2.2rem 0 1.6rem; background: var(--bg-page); }
.ddet-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.ddet-related-card { display: flex; gap: 0.85rem; align-items: center; background: #FFFFFF; border: 1px solid var(--border-card); border-radius: 16px; padding: 0.9rem; text-decoration: none; color: inherit; box-shadow: 0 4px 16px rgba(43,122,138,0.04); transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease, border-color 0.2s ease; }
.ddet-related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--fakeeh-teal); }
.ddet-related-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid #FFFFFF; box-shadow: 0 4px 12px rgba(43,74,107,0.10); flex-shrink: 0; }
.ddet-related-body { flex: 1; min-width: 0; }
.ddet-related-body h4 { font-size: 0.88rem; color: var(--fakeeh-navy); margin-bottom: 0.1rem; line-height: 1.3; }
.ddet-related-spec { font-size: 0.75rem; color: var(--text-muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ddet-related-meta { display: flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--text-light); margin-top: 0.2rem; }
.ddet-dot { width: 3px; height: 3px; background: rgba(43,122,138,0.28); border-radius: 50%; }
.ddet-related-arrow { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-box); border: 1px solid var(--border-light); display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; color: var(--text-muted); flex-shrink: 0; transition: var(--transition); }
.ddet-related-card:hover .ddet-related-arrow { background: var(--fakeeh-teal); color: #FFFFFF; border-color: var(--fakeeh-teal); }
.ddet-faq { padding: 2.2rem 0 1.6rem; background: #FFFFFF; }
.ddet-faq-grid { max-width: 860px; margin: 0 auto; }
.ddet-practical { padding: 1.8rem 0 1.4rem; background: var(--bg-page); border-top: 1px solid var(--border-light); }
.ddet-practical-grid { display: grid; grid-template-columns: 1.25fr 0.85fr; gap: 1.5rem; align-items: start; }
.ddet-practical-card { background: #FFFFFF; border: 1px solid var(--border-card); border-radius: var(--radius-xl); padding: 1.5rem 1.4rem; box-shadow: var(--shadow-card); }
.ddet-practical-card h3 { font-size: 1.02rem; color: var(--fakeeh-navy); margin-bottom: 1rem; }
.ddet-prac-rows { display: flex; flex-direction: column; gap: 1rem; }
.ddet-prac-row { display: flex; gap: 0.85rem; align-items: flex-start; }
.ddet-prac-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-page); border: 1px solid var(--border-light); color: var(--fakeeh-teal); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ddet-prac-row strong { display: block; font-size: 0.82rem; color: var(--text-main); margin-bottom: 0.15rem; }
.ddet-prac-row span { font-size: 0.84rem; color: var(--text-muted); line-height: 1.6; display: block; }
.ddet-prac-link { display: inline-block; margin-top: 0.3rem; font-size: 0.80rem; color: var(--fakeeh-teal) !important; text-decoration: underline; text-underline-offset: 3px; }
.ddet-practical-actions { display: flex; flex-direction: column; gap: 0.7rem; }
.ddet-full { width: 100%; justify-content: center; }
.ddet-prac-note { font-size: 0.76rem; color: var(--text-muted); line-height: 1.6; text-align: center; background: var(--fakeeh-teal-light); border: 1px solid rgba(43,122,138,0.10); border-radius: 10px; padding: 0.6rem 0.8rem; }
@media (max-width: 1024px) {
  .ddet-bio-grid { grid-template-columns: 1fr; }
  .ddet-bio-avatar { height: 380px; }
  .ddet-expertise-grid { grid-template-columns: 1fr; }
  .ddet-practice-grid { grid-template-columns: 1fr; }
  .ddet-related-grid { grid-template-columns: repeat(2, 1fr); }
  .ddet-practical-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ddet-hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ddet-hero-grid .ddet-hero-copy { text-align: center; }
  .ddet-hero-grid .ddet-meta-row, .ddet-hero-grid .ddet-hero-actions { justify-content: center; }
  .ddet-hero-avatar { width: 88px; height: 88px; }
  .ddet-bio, .ddet-expertise, .ddet-practice, .ddet-related, .ddet-faq, .ddet-practical { padding: 2rem 0 1.4rem; }
  .ddet-bio-avatar { height: 300px; border-radius: var(--radius-lg); }
  .ddet-related-grid { grid-template-columns: 1fr; }
  .ddet-practical-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ddet-condition-card, .ddet-procedure-card, .ddet-related-card { transition: none !important; transform: none !important; }
}

/* Fakeeh doctor profile — التخصصات الأساسية / المؤهلات / العضويات / الحجز */
.ddet-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; margin: 1rem 0 0.6rem; }
.ddet-field { background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 0.75rem 0.85rem; display: flex; flex-direction: column; gap: 0.25rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ddet-field-label { font-size: 0.72rem; color: rgba(255,255,255,0.78); letter-spacing: 0.02em; }
.ddet-field strong { font-size: 0.88rem; color: #FFFFFF; line-height: 1.35; }
.ddet-core, .ddet-qual, .ddet-membership { padding: 2.2rem 0 1.6rem; background: #FFFFFF; }
.ddet-core:nth-of-type(even), .ddet-qual:nth-of-type(even) { background: var(--bg-page); }
.ddet-core-card, .ddet-qual-card, .ddet-membership-card { background: #FFFFFF; border: 1px solid var(--border-card); border-radius: var(--radius-xl); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-card); }
.ddet-qual-card, .ddet-membership-card { background: var(--bg-page); }
.ddet-core-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.ddet-core-list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.88rem; color: var(--text-main); line-height: 1.7; }
.ddet-core-bullet { color: var(--fakeeh-teal); font-weight: 400; flex-shrink: 0; margin-top: 0.1rem; }
.ddet-qual-list, .ddet-membership-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.ddet-qual-list li, .ddet-membership-list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.86rem; color: var(--text-muted); line-height: 1.7; background: #FFFFFF; border: 1px solid var(--border-card); border-radius: 12px; padding: 0.75rem 0.85rem; }
.ddet-qual-dot { width: 8px; height: 8px; background: var(--fakeeh-teal); border-radius: 50%; margin-top: 0.5rem; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(43,122,138,0.12); }
.ddet-mem-dot { width: 6px; height: 6px; background: var(--fakeeh-navy); border-radius: 50%; margin-top: 0.55rem; flex-shrink: 0; opacity: 0.85; }
.ddet-booking { padding: 2.2rem 0 1.8rem; background: var(--bg-page); border-top: 1px solid var(--border-light); }
.ddet-booking-card { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.6rem; align-items: start; background: #FFFFFF; border: 1px solid var(--border-card); border-radius: var(--radius-xl); padding: 1.6rem 1.5rem; box-shadow: var(--shadow-card); }
.ddet-booking-copy h3 { font-size: 1.05rem; color: var(--fakeeh-navy); margin-bottom: 0.4rem; }
.ddet-booking-copy p { font-size: 0.84rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 0.6rem; }
.ddet-booking-phone { display: inline-flex; align-items: center; justify-content: center; background: var(--fakeeh-teal-light); border: 1px solid rgba(43,122,138,0.12); color: var(--fakeeh-teal); font-size: 0.92rem; padding: 0.45rem 0.85rem; border-radius: var(--radius-pill); text-decoration: none; letter-spacing: 0.02em; }
.ddet-booking-form { display: flex; flex-direction: column; gap: 0.75rem; }
.ddet-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.ddet-booking-submit { width: 100%; justify-content: center; margin-top: 0.25rem; }
.ddet-booking-note { font-size: 0.72rem; color: var(--text-light); line-height: 1.6; text-align: center; }
@media (max-width: 1024px) { .ddet-fields { grid-template-columns: 1fr; } .ddet-booking-card { grid-template-columns: 1fr; } .ddet-form-row { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ddet-fields { gap: 0.5rem; } .ddet-core, .ddet-qual, .ddet-membership, .ddet-booking { padding: 1.8rem 0 1.4rem; } .ddet-core-card, .ddet-qual-card, .ddet-membership-card, .ddet-booking-card { padding: 1.1rem; } }


/* Minimal Fakeeh doctor — image right, details left, nothing else */
.ddet-min { padding: 2.2rem 0 2.8rem; background: #FFFFFF; }
.ddet-min-breadcrumb { margin-bottom: 1.2rem; }
.ddet-min-grid { display: grid; grid-template-columns: 380px 1fr; gap: 2.4rem; align-items: start; }
.ddet-min-details { min-width: 0; }
.ddet-min-name { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); color: var(--fakeeh-teal); line-height: 1.3; margin-bottom: 0.25rem; letter-spacing: -0.02em; }
.ddet-min-spec { font-size: 0.95rem; color: var(--fakeeh-teal); margin-bottom: 1rem; }
.ddet-min-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.2rem; margin-bottom: 1.6rem; padding: 1rem 0 1.2rem; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.ddet-min-field { display: flex; flex-direction: column; gap: 0.2rem; }
.ddet-min-label { font-size: 0.72rem; color: var(--text-light); letter-spacing: 0.02em; }
.ddet-min-field strong { font-size: 0.88rem; color: var(--text-main); line-height: 1.4; }
.ddet-min-block { margin-bottom: 1.8rem; }
.ddet-min-h2 { font-size: 1.15rem; color: var(--fakeeh-teal); margin-bottom: 0.9rem; letter-spacing: -0.01em; }
.ddet-min-list { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.ddet-min-list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.86rem; color: var(--text-muted); line-height: 1.75; position: relative; padding-inline-start: 1rem; }
.ddet-min-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.7em; width: 5px; height: 5px; background: var(--fakeeh-teal); border-radius: 50%; opacity: 0.9; }
body.lang-en .ddet-min-list li::before { inset-inline-start: auto; left: 0; }
.ddet-min-list--quals li, .ddet-min-list--members li { font-size: 0.84rem; }
.ddet-min-media { position: relative; }
.ddet-min-img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: 14px; box-shadow: 0 8px 24px rgba(43,74,107,0.08); border: 1px solid var(--border-card); display: block; background: var(--bg-box); }
@media (max-width: 1024px) { .ddet-min-grid { grid-template-columns: 320px 1fr; gap: 1.6rem; } }
@media (max-width: 768px) { .ddet-min-grid { grid-template-columns: 1fr; } .ddet-min-media { order: -1; } .ddet-min-img { max-width: 340px; margin: 0 auto; } .ddet-min-fields { grid-template-columns: 1fr; } }


/* ==========================================================================
   Contact Page — Form + Carousel side by side (two sections)
   Request: click اتصل بنا → contact.html with form & carousel side-by-side
   Tokens: --fakeeh-teal/navy/light, --border-card/light, --radius-*, Almarai,
           container 1260, offset blur shadow, 42-44px pills, RTL mirrors
   ========================================================================== */
.header-btn-contact.is-active {
  background: var(--fakeeh-teal);
  color: #FFFFFF;
  border-color: var(--fakeeh-teal);
  box-shadow: 0 4px 14px rgba(43,122,138,0.18);
}
.header-btn-contact.is-active:hover {
  background: var(--fakeeh-teal-dark);
  color: #FFFFFF;
}

.contact-split-section {
  padding: 3rem 0 3.5rem;
  background: var(--bg-page);
}
.contact-split-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 2rem;
  align-items: stretch;
}

/* Form card */
.contact-form-card {
  background: #FFFFFF;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 1.8rem 1.6rem 1.4rem;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.contact-form-title {
  font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.7rem);
  color: var(--fakeeh-navy);
  margin: 0.7rem 0 0.45rem;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-wrap: balance;
}
.contact-form-desc {
  font-size: 0.90rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 1.35rem;
  text-wrap: pretty;
}
.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1rem;
}
.contact-form-card .form-group-row { margin-bottom: 1rem; }
.contact-form-card .form-group-row label {
  font-size: 0.82rem;
  color: var(--fakeeh-navy);
  font-weight: 400 !important;
}
.contact-form-card .form-input-field {
  min-height: 44px;
}
.contact-submit-btn {
  width: 100%;
  justify-content: center;
  margin-top: 0.35rem;
  min-height: 46px;
  font-size: 0.95rem;
}
.riyadh-toast-region {
  position: fixed;
  z-index: 10050;
  inset-inline: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.riyadh-toast {
  width: min(100%, 440px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
  color: #fff;
  background: var(--fakeeh-navy);
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(43,74,107,0.26);
  pointer-events: auto;
  animation: riyadh-toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.riyadh-toast--error { background: #a83b36; }
.riyadh-toast__icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  color: var(--fakeeh-navy);
  background: #fff;
  border-radius: 50%;
}
.riyadh-toast--error .riyadh-toast__icon { color: #a83b36; }
.riyadh-toast__icon svg, .riyadh-toast__close svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.riyadh-toast__message { margin: 0; color: inherit; font-size: 0.88rem; line-height: 1.55; }
.riyadh-toast__close {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.riyadh-toast__close:hover { background: rgba(255,255,255,0.14); }
.riyadh-toast__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.riyadh-toast.is-leaving { animation: riyadh-toast-out 180ms ease-in both; }
@keyframes riyadh-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes riyadh-toast-out { to { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .riyadh-toast, .riyadh-toast.is-leaving { animation: none; } }
.contact-form-foot {
  text-align: center;
  font-size: 0.74rem;
  color: var(--text-light);
  margin-top: 0.7rem;
  line-height: 1.5;
}
.contact-direct-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.75rem;
}
.contact-direct-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--bg-page);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
}
.contact-direct-item:hover {
  background: #FFFFFF;
  border-color: var(--fakeeh-teal);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}
.contact-direct-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  color: var(--fakeeh-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(43,122,138,0.08);
}
.contact-direct-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  gap: 2px;
}
.contact-direct-text strong {
  font-size: 0.88rem;
  color: var(--fakeeh-navy);
  letter-spacing: 0.01em;
}
.contact-direct-text span:last-child {
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* Carousel side — equal height to form */
.contact-carousel-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  height: 100%;
  min-height: 0;
}
.contact-carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--fakeeh-navy);
  border: 1px solid rgba(43,122,138,0.10);
  box-shadow: var(--shadow-card);
  flex: 1;
  min-height: 520px;
  height: 100%;
  isolation: isolate;
}
.contact-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
  will-change: transform;
}
.contact-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: var(--fakeeh-navy);
}
.contact-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.contact-carousel-slide:hover img { transform: scale(1.02); }
.contact-carousel-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(43,74,107,0.22) 68%, rgba(43,74,107,0.88) 100%);
  z-index: 1;
  pointer-events: none;
}
.contact-carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 1.35rem 1.4rem 2.4rem;
  color: #FFFFFF;
  text-align: start;
}
.contact-carousel-kicker {
  display: inline-block;
  font-size: 0.70rem;
  color: #FFFFFF;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 0.22rem 0.6rem;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 0.55rem;
  letter-spacing: 0.02em;
}
.contact-carousel-caption h3 {
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.28rem);
  color: #FFFFFF;
  line-height: 1.35;
  margin-bottom: 0.3rem;
  text-wrap: balance;
  letter-spacing: -0.01em;
}
.contact-carousel-caption p {
  font-size: 0.82rem;
  color: #D4E3EE;
  line-height: 1.5;
}
.contact-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(43,122,138,0.12);
  color: var(--fakeeh-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(43,74,107,0.14);
  z-index: 4;
  transition: var(--transition);
  backdrop-filter: blur(8px);
}
.contact-carousel-btn:hover {
  background: var(--fakeeh-teal);
  color: #FFFFFF;
  border-color: var(--fakeeh-teal);
  transform: translateY(-50%) scale(1.04);
}
.contact-carousel-btn:active { transform: translateY(-50%) scale(0.97); }
.contact-carousel-btn:focus-visible { outline: 2px solid #7ED3E8; outline-offset: 2px; }
.contact-carousel-btn.prev { right: 10px; }
.contact-carousel-btn.next { left: 10px; }
body.lang-en .contact-carousel-btn.prev { right: auto; left: 10px; }
body.lang-en .contact-carousel-btn.next { left: auto; right: 10px; }

.contact-carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  z-index: 4;
  background: rgba(43,74,107,0.42);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.contact-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  border: none;
  cursor: pointer;
  transition: width 0.22s cubic-bezier(0.16,1,0.3,1), background 0.22s ease, transform 0.22s ease;
  padding: 0;
}
.contact-dot.is-active {
  width: 22px;
  border-radius: 9999px;
  background: #FFFFFF;
  box-shadow: 0 1px 6px rgba(0,0,0,0.18);
}
.contact-dot:focus-visible { outline: 2px solid #7ED3E8; outline-offset: 2px; }

.contact-carousel-meta {
  background: #FFFFFF;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 0.75rem 1rem;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.contact-carousel-meta p {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
  min-width: 180px;
}
.contact-meta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--fakeeh-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(43,122,138,0.22);
  white-space: nowrap;
  transition: color 0.18s ease;
}
.contact-meta-link:hover { color: var(--fakeeh-teal-dark); text-decoration-color: var(--fakeeh-teal); }

/* Responsive */
@media (max-width: 991px) {
  .contact-split-grid { grid-template-columns: 1fr; gap: 1.4rem; align-items: start; }
  .contact-carousel-wrap { height: auto; min-height: 0; }
  .contact-carousel { flex: none; height: auto; aspect-ratio: 16 / 10; min-height: 360px; }
  .contact-direct-grid { grid-template-columns: 1fr; gap: 0.85rem; }
}
@media (max-width: 640px) {
  .contact-split-section { padding: 1.6rem 0 2rem; }
  .contact-form-card { padding: 1.35rem 1.1rem 1.2rem; border-radius: var(--radius-lg); height: auto; }
  .contact-form-grid { grid-template-columns: 1fr; }
  .contact-carousel { aspect-ratio: 4 / 3; min-height: 320px; border-radius: var(--radius-lg); flex: none; height: auto; }
  .contact-carousel-caption { padding: 1rem 1rem 2.2rem; }
  .contact-carousel-btn { width: 38px; height: 38px; font-size: 1.3rem; }
  .contact-carousel-meta { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-carousel-track, .contact-carousel-slide img, .contact-direct-item, .contact-carousel-btn { transition: none !important; transform: none !important; }
}

/* Ensure header anchor styled like button has same touch target */
a.header-btn-contact { text-decoration: none; }

@media print {