@charset "UTF-8";
/* ===========================================================================
   Children Mother & Surgical Hospital — Design System
   ---------------------------------------------------------------------------
   00 Tokens      05 Header / navigation
   01 Base        06 Page header / breadcrumb
   02 Layout      07 Components
   03 Typography  08 Page-specific
   04 Buttons     09 Footer   10 Responsive   11 Print
   ========================================================================= */

/* ========================================================== 00 · TOKENS */
:root {
  /* brand */
  --b-900:#062E3E; --b-800:#0A4256; --b-700:#0E5A72; --b-600:#12718D;
  --b-500:#1A8CAB; --b-400:#3FA8C1; --b-100:#DCEEF3; --b-50:#F2F9FB;
  --accent:#C2624F; --accent-dark:#A94E3C; --accent-100:#F7E7E2;
  --care:#2E9E8F; --care-100:#E3F4F1;
  /* single branded CTA colour, taken from the hospital logo (#0E5A72) */
  --cta:#0E5A72; --cta-hover:#0A4256; --cta-soft:#DCEEF3;

  /* neutral */
  --ink-900:#10222C; --ink-700:#2E4451; --ink-500:#5A7280; --ink-300:#8FA4AF;
  --line:#D6E3E8; --line-soft:#E8F0F3; --surface:#FFFFFF; --surface-2:#F7FAFB;

  /* semantic */
  --ok:#1E7A4B; --ok-bg:#E6F4EC;
  --warn:#B25E09; --warn-bg:#FDF1E3;
  --err:#B42318; --err-bg:#FDECEA;

  /* type */
  --font-head:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  /* space */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* radius */
  --r-sm:6px; --r:10px; --r-lg:16px; --r-pill:999px;

  /* elevation */
  --sh-1:0 1px 2px rgba(10,35,56,.06);
  --sh-2:0 4px 14px rgba(10,35,56,.08);
  --sh-3:0 14px 38px rgba(10,35,56,.12);

  /* layout */
  --container:1200px; --container-wide:1400px; --prose:70ch;
  --header-h:76px; --utility-h:38px;

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1); --dur:.22s;

  /* z */
  --z-header:100; --z-drawer:200; --z-overlay:190; --z-modal:300; --z-fab:90;
}

/* ============================================================ 01 · BASE */
*,*::before,*::after { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }

body {
  margin:0;
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.65;
  color:var(--ink-700);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video { max-width:100%; height:auto; display:block; }
img { background:var(--b-50); }

a { color:var(--cta); text-decoration:none; }
a:hover { color:var(--cta-hover); }

button { font:inherit; color:inherit; }

hr { border:0; border-top:1px solid var(--line); margin:var(--s6) 0; }

:focus-visible {
  outline:3px solid var(--b-500);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

.skip-link {
  position:absolute; left:var(--s4); top:-100px; z-index:400;
  background:var(--b-700); color:#fff; padding:var(--s3) var(--s5);
  border-radius:0 0 var(--r) var(--r); font-weight:600;
  transition:top var(--dur) var(--ease);
}
.skip-link:focus { top:0; color:#fff; }

.visually-hidden {
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
}

/* ========================================================== 02 · LAYOUT */
.container { width:min(var(--container),100% - 2.5rem); margin-inline:auto; }
.container--wide { width:min(var(--container-wide),100% - 2.5rem); }
.container--narrow { width:min(820px,100% - 2.5rem); }

.section { padding-block:var(--s9); }
.section--sm { padding-block:var(--s8); }
.section--tint { background:var(--b-50); }
.section--soft { background:var(--surface-2); }
.section--dark { background:var(--b-900); color:#E7F1F5; }
.section--dark p { color:#B9CFD9; }
.section--dark h2,.section--dark h3 { color:#fff; }
.section--dark a { color:#8FDCEA; }
.section--dark a:hover { color:#fff; }

.grid { display:grid; gap:var(--s5); }
.grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid--sidebar { grid-template-columns:minmax(0,1fr) 340px; gap:var(--s8); align-items:start; }
.grid--split { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s8); align-items:center; }

.stack > * + * { margin-top:var(--s4); }
.cluster { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; }

/* ====================================================== 03 · TYPOGRAPHY */
h1,h2,h3,h4,h5 {
  font-family:var(--font-head);
  color:var(--ink-900);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.015em;
  margin:0 0 var(--s4);
}
h1 { font-size:clamp(2rem,1.4rem + 2.4vw,2.75rem); line-height:1.12; }
h2 { font-size:clamp(1.625rem,1.25rem + 1.6vw,2.125rem); }
h3 { font-size:clamp(1.2rem,1.08rem + .5vw,1.4rem); line-height:1.3; }
h4 { font-size:1.0625rem; line-height:1.4; }

p { margin:0 0 var(--s4); }
p:last-child { margin-bottom:0; }

.display { font-size:clamp(2.25rem,1.5rem + 3.2vw,3.5rem); line-height:1.08; }
.lead { font-size:1.0625rem; line-height:1.75; color:var(--ink-500); }
@media (min-width:768px){ .lead { font-size:1.125rem; } }

.eyebrow {
  display:inline-flex; align-items:center; gap:var(--s2);
  font-family:var(--font-body); font-size:.8125rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--b-600);
  margin:0 0 var(--s3);
}
.eyebrow::before { content:""; width:22px; height:2px; background:var(--b-500); flex:none; }
.eyebrow--light { color:var(--b-100); }
.eyebrow--light::before { background:var(--b-400); }

.section-head { max-width:760px; margin-bottom:var(--s7); }
.section-head--split {
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:var(--s5); max-width:none;
}
.section-head--split .section-head__text { max-width:680px; }
.section-head--center { margin-inline:auto; text-align:center; }
.section-head--center .eyebrow { justify-content:center; }
.section-head h2 { margin-bottom:var(--s3); }

.prose { max-width:var(--prose); }
.prose h2 { margin-top:var(--s7); }
.prose h3 { margin-top:var(--s6); }
.prose ul,.prose ol { padding-left:1.25rem; margin:0 0 var(--s4); }
.prose li { margin-bottom:var(--s2); }
.prose a { text-decoration:underline; text-underline-offset:2px; }
.prose blockquote {
  margin:var(--s5) 0; padding:var(--s4) var(--s5);
  border-left:3px solid var(--b-500); background:var(--b-50);
  border-radius:0 var(--r) var(--r) 0; color:var(--ink-700);
}
.prose img { border-radius:var(--r); margin:var(--s5) 0; }

.text-center { text-align:center; }
.muted { color:var(--ink-500); }

/* ========================================================= 04 · BUTTONS */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:48px; padding:0 var(--s5);
  font-family:var(--font-body); font-size:.9375rem; font-weight:600;
  border:1px solid transparent; border-radius:var(--r);
  cursor:pointer; text-align:center; white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn .ico { width:18px; height:18px; flex:none; }
.btn:active { transform:translateY(1px); }

.btn--primary { background:var(--cta); color:#fff; }
.btn--primary:hover { background:var(--cta-hover); color:#fff; }
.btn--primary:focus-visible { outline-color:var(--cta); }

.btn--accent { background:var(--accent); color:#fff; }
.btn--accent:hover { background:var(--accent-dark); color:#fff; }

.btn--outline { background:transparent; color:var(--b-700); border-color:var(--line); }
.btn--outline:hover { background:var(--b-50); border-color:var(--b-500); color:var(--b-700); }

.btn--light { background:#fff; color:var(--b-800); }
.btn--light:hover { background:var(--b-50); color:var(--b-900); }

.btn--onDark { background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.btn--onDark:hover { background:rgba(255,255,255,.12); color:#fff; }

.btn--sm { min-height:40px; padding:0 var(--s4); font-size:.875rem; }
.btn--lg { min-height:54px; padding:0 var(--s6); font-size:1rem; }
.btn--block { width:100%; }

.link-arrow {
  display:inline-flex; align-items:center; gap:var(--s2);
  font-weight:600; font-size:.9375rem; color:var(--b-600);
}
.link-arrow .ico { width:17px; height:17px; transition:transform var(--dur) var(--ease); }
.link-arrow:hover .ico { transform:translateX(3px); }
.link-arrow--light { color:#9FE0EC; }


/* --- contact/CTA emphasis --- */
.phone-prominent {
  font-weight: 700 !important;
  color: inherit;
  letter-spacing: .01em;
}
.utility-bar__emergency .phone-prominent {
  color: #fff !important;
  font-weight: 800 !important;
}
.utility-bar__list .phone-prominent {
  color: #fff !important;
  font-weight: 700 !important;
}
.site-footer .phone-prominent {
  color: #fff !important;
  font-size: 1rem;
  font-weight: 700 !important;
}
.footer-appointment-btn {
  background: #0E5A72 !important;
  color: #fff !important;
}
.footer-appointment-btn:hover,
.footer-appointment-btn:focus-visible {
  background: #08485C !important;
  color: #fff !important;
}
.panel--dark .phone-cta {
  background: #0E5A72;
  color: #fff;
  border-color: #0E5A72;
  font-size: 1rem;
  min-height: 52px;
}
.panel--dark .phone-cta:hover,
.panel--dark .phone-cta:focus-visible {
  background: #08485C;
  color: #fff;
}

/* =========================================================== 05 · HEADER */
.site-header {
  position:sticky; top:0; z-index:var(--z-header);
  background:#fff; border-bottom:1px solid var(--line);
}
.site-header.is-stuck { box-shadow:var(--sh-2); }

.utility-bar {
  background:var(--b-900); color:#C9DFE8; font-size:.8125rem;
}
.utility-bar__in {
  min-height:var(--utility-h); display:flex; align-items:center;
  justify-content:space-between; gap:var(--s4);
}
.utility-bar a { color:#E4F1F6; display:inline-flex; align-items:center; gap:6px; }
.utility-bar a:hover { color:#fff; text-decoration:underline; }
.utility-bar .ico { width:15px; height:15px; }
.utility-bar__list { display:flex; align-items:center; gap:var(--s5); }
.utility-bar__emergency { color:#FBD9D0; font-weight:600; }
.utility-bar__emergency .ico { color:var(--accent-100); }

.nav-bar {
  min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s5);
}

.brand { display:flex; align-items:center; gap:var(--s3); color:var(--ink-900); }
.brand__mark { width:44px; height:44px; flex:none; }
.brand__text { display:flex; flex-direction:column; line-height:1.15; }
.brand__name { font-family:var(--font-head); font-weight:600; font-size:1rem; color:var(--b-900); }
.brand__tag {
  font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-500); font-weight:600; margin-top:3px;
}

.nav { display:flex; align-items:center; gap:var(--s2); }
.nav__list { display:flex; align-items:center; gap:var(--s1); list-style:none; margin:0; padding:0; }
.nav__item { position:relative; }
.nav__link {
  display:inline-flex; align-items:center; gap:5px;
  padding:var(--s3) var(--s3); border-radius:var(--r-sm);
  font-size:.9375rem; font-weight:500; color:var(--ink-700);
}
.nav__link:hover { color:var(--b-700); background:var(--b-50); }
.nav__link[aria-current="page"] { color:var(--b-700); font-weight:600; }
.nav__link[aria-current="page"]::after {
  content:""; position:absolute; left:var(--s3); right:var(--s3); bottom:2px;
  height:2px; background:var(--cta); border-radius:2px;
}
.nav__link .ico { width:15px; height:15px; transition:transform var(--dur) var(--ease); }
.nav__item.is-open > .nav__link .ico { transform:rotate(180deg); }

.mega {
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:520px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-3); padding:var(--s5);
  opacity:0; visibility:hidden; transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
}
.nav__item.is-open .mega { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.mega__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2) var(--s5); }
.mega__col-head {
  grid-column:1/-1; font-size:.75rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-300); margin-bottom:var(--s1);
}
.mega__link {
  display:flex; gap:var(--s3); align-items:flex-start;
  padding:var(--s3); border-radius:var(--r); color:var(--ink-700);
}
.mega__link:hover { background:var(--b-50); color:var(--b-700); }
.mega__link .ico { width:20px; height:20px; color:var(--b-500); flex:none; margin-top:2px; }
.mega__link b { display:block; font-size:.9375rem; font-weight:600; color:var(--ink-900); }
.mega__link span { display:block; font-size:.8125rem; color:var(--ink-500); line-height:1.45; }
.mega__foot {
  grid-column:1/-1; margin-top:var(--s3); padding-top:var(--s4);
  border-top:1px solid var(--line-soft);
}

.nav-actions { display:flex; align-items:center; gap:var(--s3); }
.nav-toggle {
  display:none; align-items:center; justify-content:center;
  width:48px; height:48px; background:transparent;
  border:1px solid var(--line); border-radius:var(--r); cursor:pointer;
  color:var(--ink-900);
}
.nav-toggle .ico { width:22px; height:22px; }

/* mobile drawer */
.drawer {
  position:fixed; inset:0 0 0 auto; width:min(420px,88vw); z-index:var(--z-drawer);
  background:#fff; transform:translateX(100%); transition:transform .28s var(--ease);
  display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
  visibility:hidden;
}
.drawer.is-open { transform:translateX(0); visibility:visible; }
.drawer__head {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s4) var(--s5); border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff;
}
.drawer__body { padding:var(--s4) var(--s5) var(--s8); }
.drawer__group + .drawer__group { border-top:1px solid var(--line-soft); }
.drawer__link,.drawer__acc-btn {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  width:100%; min-height:52px; padding:var(--s3) 0;
  font-size:1rem; font-weight:500; color:var(--ink-900);
  background:none; border:0; text-align:left; cursor:pointer;
}
.drawer__acc-btn .ico { width:18px; height:18px; color:var(--ink-500); transition:transform var(--dur) var(--ease); }
.drawer__acc-btn[aria-expanded="true"] .ico { transform:rotate(180deg); }
.drawer__panel { display:none; padding:0 0 var(--s3) var(--s4); }
.drawer__panel.is-open { display:block; }
.drawer__panel a {
  display:block; min-height:44px; padding:var(--s2) 0;
  font-size:.9375rem; color:var(--ink-700);
}
.drawer__panel a:hover { color:var(--b-600); }
.drawer__cta { margin-top:var(--s5); display:grid; gap:var(--s3); }
.drawer__contact { margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--line); font-size:.875rem; }
.drawer__contact a { display:flex; align-items:center; gap:var(--s2); min-height:44px; color:var(--ink-700); }
.drawer__contact .ico { width:18px; height:18px; color:var(--b-500); }

.overlay {
  position:fixed; inset:0; background:rgba(6,46,62,.5); z-index:var(--z-overlay);
  opacity:0; visibility:hidden; transition:opacity var(--dur) var(--ease),visibility var(--dur);
}
.overlay.is-open { opacity:1; visibility:visible; }

body.is-locked { overflow:hidden; }

/* =================================================== 06 · PAGE HEADER */
.page-header {
  background:var(--b-50);
  border-bottom:1px solid var(--line-soft);
  padding-block:var(--s7) var(--s8);
}
.page-header__in { display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s7); }
.page-header__text { max-width:720px; }
.page-header h1 { margin-bottom:var(--s3); }
.page-header .lead { margin-bottom:0; }

.breadcrumb { margin-bottom:var(--s4); }
.breadcrumb ol {
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2);
  list-style:none; margin:0; padding:0; font-size:.8125rem; color:var(--ink-500);
}
.breadcrumb a { color:var(--ink-500); }
.breadcrumb a:hover { color:var(--b-600); text-decoration:underline; }
.breadcrumb li:not(:last-child)::after { content:"/"; margin-left:var(--s2); color:var(--ink-300); }
.breadcrumb [aria-current="page"] { color:var(--ink-700); font-weight:500; }

/* ====================================================== 07 · COMPONENTS */

/* --- card base --- */
.card {
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-1);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
a.card:hover,.card--hover:hover { box-shadow:var(--sh-2); transform:translateY(-3px); border-color:var(--b-100); }
.card__media { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--b-100); }
.card__media img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
a.card:hover .card__media img,.card--hover:hover .card__media img { transform:scale(1.04); }
.card__body { padding:var(--s5); display:flex; flex-direction:column; flex:1; }
.card__body > *:last-child { margin-top:auto; }
.card__title { font-size:1.125rem; margin-bottom:var(--s2); color:var(--ink-900); }
.card__text { font-size:.9375rem; color:var(--ink-500); margin-bottom:var(--s4); }
.card__foot { padding-top:var(--s3); }

.card__badge {
  position:absolute; left:var(--s4); top:var(--s4);
  background:rgba(255,255,255,.94); color:var(--b-700);
  font-size:.6875rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 10px; border-radius:var(--r-pill);
}

/* --- icon tile --- */
.icon-tile {
  width:52px; height:52px; flex:none; display:grid; place-items:center;
  border-radius:var(--r); background:var(--b-50); color:var(--b-600);
  border:1px solid var(--b-100); margin-bottom:var(--s4);
}
.icon-tile .ico { width:26px; height:26px; }
.icon-tile--accent { background:var(--accent-100); color:var(--accent-dark); border-color:#F0D5CD; }
.icon-tile--care { background:var(--care-100); color:var(--care); border-color:#CDEAE4; }
.icon-tile--sm { width:42px; height:42px; margin-bottom:var(--s3); }
.icon-tile--sm .ico { width:21px; height:21px; }

/* --- quick action rail --- */
.action-rail {
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-2); overflow:hidden;
}
.action-rail__item {
  display:flex; flex-direction:column; gap:var(--s3);
  padding:var(--s5) var(--s4); min-height:132px;
  border-right:1px solid var(--line-soft); color:var(--ink-900);
  transition:background var(--dur) var(--ease);
}
.action-rail__item:last-child { border-right:0; }
.action-rail__item:hover { background:var(--b-50); color:var(--b-700); }
.action-rail__item .ico { width:24px; height:24px; color:var(--b-600); }
.action-rail__item b { font-size:.9375rem; font-weight:600; display:block; }
.action-rail__item span { font-size:.8125rem; color:var(--ink-500); display:block; margin-top:2px; }
.action-rail--float { margin-top:calc(var(--s8) * -1); position:relative; z-index:5; }

/* --- stat strip --- */
.stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s5); }
.stat { padding:var(--s5); border-left:2px solid rgba(255,255,255,.16); }
.stat:first-child { border-left:0; }
.stat b {
  display:block; font-family:var(--font-head); font-size:2.25rem;
  font-weight:600; color:#fff; line-height:1.1; margin-bottom:var(--s1);
}
.stat span { font-size:.875rem; color:#B9CFD9; }

/* --- feature / media rows --- */
.media-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s8); align-items:center; }
.media-row--reverse .media-row__media { order:2; }
.media-row__media { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2); }
.media-row__media img { width:100%; aspect-ratio:4/3; object-fit:cover; }

.figure-stack { position:relative; }
.figure-stack__main { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-3); }
.figure-stack__main img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.figure-stack__inset {
  position:absolute; right:calc(var(--s6) * -1); bottom:calc(var(--s6) * -1);
  width:46%; border:8px solid #fff; border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-2);
}
.figure-stack__inset img { width:100%; aspect-ratio:1/1; object-fit:cover; }

/* --- checklist --- */
.checklist { list-style:none; margin:0 0 var(--s5); padding:0; display:grid; gap:var(--s3); }
.checklist li { display:flex; gap:var(--s3); align-items:flex-start; font-size:.9375rem; color:var(--ink-700); }
.checklist .ico { width:20px; height:20px; flex:none; color:var(--care); margin-top:2px; }
.checklist--2 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3) var(--s5); }

/* --- numbered steps --- */
.steps { display:grid; gap:0; counter-reset:step; }
.steps__item {
  display:grid; grid-template-columns:52px minmax(0,1fr); gap:var(--s4);
  padding:var(--s5) 0; border-top:1px solid var(--line);
}
.steps__item:last-child { border-bottom:1px solid var(--line); }
.steps__num {
  width:42px; height:42px; display:grid; place-items:center; border-radius:var(--r-pill);
  background:var(--b-50); color:var(--b-700); border:1px solid var(--b-100);
  font-weight:700; font-size:.875rem;
}
.steps__item h3 { font-size:1.0625rem; margin-bottom:var(--s1); }
.steps__item p { font-size:.9375rem; color:var(--ink-500); margin:0; }

/* --- doctor card --- */
.doctor-card { text-align:left; }
.doctor-card .card__media { aspect-ratio:4/5; }
.doctor-card__specialty {
  font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--care); margin-bottom:var(--s2); display:block;
}
.doctor-card__name { font-size:1.125rem; margin-bottom:var(--s2); }
.doctor-card__actions { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); }

/* --- alert / notice --- */
.notice {
  display:flex; gap:var(--s4); align-items:flex-start;
  padding:var(--s5); border-radius:var(--r); border:1px solid var(--line);
  background:var(--surface-2); font-size:.9375rem;
}
.notice .ico { width:22px; height:22px; flex:none; margin-top:2px; }
.notice p:last-child { margin-bottom:0; }
.notice strong { color:var(--ink-900); }
.notice--emergency { background:var(--accent-100); border-color:#EFD3CB; color:#7E3A2B; }
.notice--emergency .ico,.notice--emergency strong { color:var(--accent-dark); }
.notice--info { background:var(--b-50); border-color:var(--b-100); }
.notice--info .ico { color:var(--b-600); }
.notice--ok { background:var(--ok-bg); border-color:#C9E6D6; color:#14532D; }
.notice--ok .ico { color:var(--ok); }
.notice--warn { background:var(--warn-bg); border-color:#F2DCC0; color:#7A4208; }
.notice--warn .ico { color:var(--warn); }
.notice--err { background:var(--err-bg); border-color:#F4CFCB; color:#7F1D1D; }
.notice--err .ico { color:var(--err); }

/* --- emergency band --- */
.emergency-band {
  background:var(--accent); color:#fff; font-size:.875rem;
}
.emergency-band__in {
  display:flex; align-items:center; justify-content:center; gap:var(--s4);
  flex-wrap:wrap; padding:var(--s3) 0; text-align:center;
}
.emergency-band .ico { width:18px; height:18px; }
.emergency-band a {
  color:#fff; font-weight:700; display:inline-flex; align-items:center; gap:6px;
  text-decoration:underline; text-underline-offset:3px;
}

/* --- accordion --- */
.accordion { border-top:1px solid var(--line); }
.accordion__item { border-bottom:1px solid var(--line); }
.accordion__btn {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  width:100%; padding:var(--s5) 0; background:none; border:0; cursor:pointer;
  text-align:left; font-family:var(--font-head); font-size:1.0625rem;
  font-weight:600; color:var(--ink-900); line-height:1.4;
}
.accordion__btn:hover { color:var(--b-700); }
.accordion__btn .ico { width:20px; height:20px; flex:none; color:var(--b-600); transition:transform var(--dur) var(--ease); }
.accordion__btn[aria-expanded="true"] .ico { transform:rotate(180deg); }
.accordion__panel { display:none; padding:0 0 var(--s5); max-width:var(--prose); }
.accordion__panel.is-open { display:block; }
.accordion__panel p { font-size:.9375rem; color:var(--ink-500); }

/* --- filter chips --- */
.chips { display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s6); }
.chip {
  min-height:42px; padding:0 var(--s4); display:inline-flex; align-items:center;
  border:1px solid var(--line); border-radius:var(--r-pill); background:#fff;
  font-size:.875rem; font-weight:500; color:var(--ink-700); cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.chip:hover { border-color:var(--b-500); color:var(--b-700); }
.chip[aria-pressed="true"] { background:var(--b-700); border-color:var(--b-700); color:#fff; }

/* --- search field --- */
.search-field { position:relative; max-width:460px; }
.search-field .ico {
  position:absolute; left:var(--s4); top:50%; transform:translateY(-50%);
  width:19px; height:19px; color:var(--ink-300); pointer-events:none;
}
.search-field input { padding-left:46px; }
.search-field{display:flex;align-items:center;}
.search-field__clear{position:absolute;right:10px;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;text-decoration:none;font-size:24px;line-height:1;color:var(--ink-600);}
.search-field__clear:hover{background:var(--b-100);color:var(--ink-900);}
.search-field input{padding-right:48px;}


/* --- forms --- */
.form { display:grid; gap:var(--s5); }
.form__row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4) var(--s5); }
.form__group { display:flex; flex-direction:column; gap:var(--s2); }
.form__group--full { grid-column:1/-1; }

.form label,.label {
  font-size:.875rem; font-weight:600; color:var(--ink-900);
  display:flex; align-items:center; gap:6px;
}
.label__opt { font-weight:400; color:var(--ink-300); font-size:.8125rem; }
.req { color:var(--accent); }

input[type=text],input[type=email],input[type=tel],input[type=date],input[type=time],
input[type=password],input[type=search],input[type=number],select,textarea {
  width:100%; min-height:48px; padding:var(--s3) var(--s4);
  font:inherit; font-size:.9375rem; color:var(--ink-900);
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
textarea { min-height:132px; padding-top:var(--s3); resize:vertical; line-height:1.6; }
select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A7280' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px; padding-right:44px; }
input::placeholder,textarea::placeholder { color:var(--ink-300); }
input:hover,select:hover,textarea:hover { border-color:var(--b-400); }
input:focus,select:focus,textarea:focus {
  outline:none; border-color:var(--b-500); box-shadow:0 0 0 3px rgba(26,140,171,.16);
}
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"] { border-color:var(--err); }
.field-error { font-size:.8125rem; color:var(--err); font-weight:500; display:flex; align-items:center; gap:5px; }
.field-error .ico { width:15px; height:15px; }
.field-hint { font-size:.8125rem; color:var(--ink-500); }

.form__check { display:flex; gap:var(--s3); align-items:flex-start; }
.form__check input { width:20px; height:20px; min-height:0; margin-top:3px; flex:none; accent-color:var(--b-600); }
.form__check label { font-weight:400; font-size:.875rem; color:var(--ink-700); line-height:1.6; }

.form-card {
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s7); box-shadow:var(--sh-1);
}
.form-fieldset { border:0; margin:0 0 var(--s6); padding:0; }
.form-fieldset:last-of-type { margin-bottom:var(--s5); }
.form-fieldset legend {
  padding:0; margin-bottom:var(--s4); font-family:var(--font-head);
  font-size:1.125rem; font-weight:600; color:var(--ink-900);
  display:flex; align-items:center; gap:var(--s3);
}
.form-fieldset legend .step-dot {
  width:28px; height:28px; border-radius:var(--r-pill); background:var(--cta);
  color:#fff; font-family:var(--font-body); font-size:.8125rem; font-weight:700;
  display:grid; place-items:center; flex:none;
}
.honeypot { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* --- success panel --- */
.success-panel {
  background:var(--ok-bg); border:1px solid #C9E6D6; border-radius:var(--r-lg);
  padding:var(--s7); text-align:center;
}
.success-panel .icon-tile { margin-inline:auto; background:#fff; color:var(--ok); border-color:#C9E6D6; }
.reference {
  display:inline-block; margin:var(--s4) 0; padding:var(--s3) var(--s5);
  background:#fff; border:1px dashed var(--ok); border-radius:var(--r);
  font-family:var(--font-body); font-weight:700; font-size:1.125rem;
  letter-spacing:.06em; color:#14532D;
}

/* --- info panel / sidebar --- */
.panel {
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s5); box-shadow:var(--sh-1);
}
.panel + .panel { margin-top:var(--s5); }
.panel--tint { background:var(--b-50); border-color:var(--b-100); box-shadow:none; }
.panel--dark { background:var(--b-800); border-color:var(--b-700); color:#D5E7EE; }
.panel--dark h3 { color:#fff; }
.panel--dark a { color:#9FE0EC; }
.panel h3 { font-size:1.0625rem; margin-bottom:var(--s3); }
.panel p { font-size:.9375rem; }
.panel__list { list-style:none; margin:0; padding:0; }
.panel__list li { padding:var(--s3) 0; border-bottom:1px solid var(--line-soft); font-size:.9375rem; }
.panel__list li:last-child { border-bottom:0; padding-bottom:0; }
.panel__list a { display:flex; align-items:center; gap:var(--s3); color:var(--ink-700); min-height:32px; }
.panel__list a:hover { color:var(--b-600); }
.panel__list .ico { width:18px; height:18px; color:var(--b-500); flex:none; }

.contact-line { display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s3) 0; }
.contact-line .ico { width:20px; height:20px; color:var(--b-500); flex:none; margin-top:3px; }
.contact-line b { display:block; font-size:.8125rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-500); font-weight:600; }
.contact-line span,.contact-line a { font-size:.9375rem; color:var(--ink-900); }

/* --- definition table --- */
.info-table { width:100%; border-collapse:collapse; font-size:.9375rem; }
.info-table th,.info-table td { text-align:left; padding:var(--s3) var(--s4); border-bottom:1px solid var(--line-soft); }
.info-table th { width:40%; font-weight:600; color:var(--ink-900); }
.info-table tr:last-child th,.info-table tr:last-child td { border-bottom:0; }

/* --- gallery --- */
.gallery-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4); }
.gallery-item {
  position:relative; display:block; border-radius:var(--r); overflow:hidden;
  aspect-ratio:4/3; background:var(--b-100); cursor:zoom-in; border:0; padding:0;
}
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.gallery-item:hover img { transform:scale(1.05); }
.gallery-item__cap {
  position:absolute; inset:auto 0 0 0; padding:var(--s5) var(--s4) var(--s3);
  background:linear-gradient(transparent,rgba(6,46,62,.85));
  color:#fff; font-size:.8125rem; font-weight:500; text-align:left;
  opacity:0; transform:translateY(6px); transition:all var(--dur) var(--ease);
}
.gallery-item:hover .gallery-item__cap,.gallery-item:focus-visible .gallery-item__cap { opacity:1; transform:translateY(0); }

.lightbox {
  position:fixed; inset:0; z-index:var(--z-modal); background:rgba(6,25,33,.94);
  display:none; align-items:center; justify-content:center; padding:var(--s5);
}
.lightbox.is-open { display:flex; }
.lightbox__img { max-width:min(1100px,92vw); max-height:78vh; object-fit:contain; border-radius:var(--r); }
.lightbox__cap { color:#D5E7EE; text-align:center; font-size:.875rem; margin-top:var(--s4); }
.lightbox__count { color:#8FA4AF; font-size:.8125rem; margin-top:var(--s1); }
.lightbox__btn {
  position:absolute; width:52px; height:52px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  color:#fff; display:grid; place-items:center; cursor:pointer;
}
.lightbox__btn:hover { background:rgba(255,255,255,.22); }
.lightbox__btn .ico { width:24px; height:24px; }
.lightbox__prev { left:var(--s5); top:50%; transform:translateY(-50%); }
.lightbox__next { right:var(--s5); top:50%; transform:translateY(-50%); }
.lightbox__close { right:var(--s5); top:var(--s5); }

/* --- CTA band --- */
.cta-band { position:relative; overflow:hidden; background:var(--b-900); color:#fff; }
.cta-band__bg { position:absolute; inset:0; opacity:.22; }
.cta-band__bg img { width:100%; height:100%; object-fit:cover; }
.cta-band__in {
  position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:var(--s7); padding-block:var(--s8);
}
.cta-band h2 { color:#fff; margin-bottom:var(--s3); }
.cta-band p { color:#C2D9E2; max-width:56ch; margin:0; }
.cta-band__actions { display:flex; flex-wrap:wrap; gap:var(--s3); flex:none; }

/* --- pagination --- */
.pagination { display:flex; justify-content:center; gap:var(--s2); margin-top:var(--s7); }
.pagination a,.pagination span {
  min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:var(--r); font-size:.9375rem; font-weight:500;
  color:var(--ink-700);
}
.pagination a:hover { border-color:var(--b-500); color:var(--b-700); }
.pagination [aria-current="page"] { background:var(--b-700); border-color:var(--b-700); color:#fff; }

/* --- empty state --- */
.empty-state {
  padding:var(--s8) var(--s5); text-align:center;
  border:1px dashed var(--line); border-radius:var(--r-lg); background:var(--surface-2);
}
.empty-state .icon-tile { margin-inline:auto; }
.empty-state h3 { margin-bottom:var(--s2); }
.empty-state p { max-width:52ch; margin-inline:auto; color:var(--ink-500); font-size:.9375rem; }

/* --- map --- */
.map-embed { position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--b-50); }
.map-embed iframe { width:100%; height:100%; min-height:420px; border:0; display:block; }

/* --- floating actions --- */
.fab-stack{position:fixed;right:22px;bottom:22px;z-index:100002;display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.fab{position:relative;width:62px;height:62px;border-radius:20px;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;box-shadow:0 14px 34px rgba(6,46,62,.20),0 3px 8px rgba(6,46,62,.10);transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;border:1px solid rgba(255,255,255,.38);isolation:isolate}
.fab:before{content:"";position:absolute;inset:3px;border-radius:16px;border:1px solid rgba(255,255,255,.18);pointer-events:none}
.fab .ico{width:28px;height:28px;stroke-width:1.9;position:relative;z-index:2}
.fab:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 20px 42px rgba(6,46,62,.25),0 5px 12px rgba(6,46,62,.12);filter:saturate(1.08)}
.fab:active{transform:translateY(-1px) scale(.98)}
.fab--wa{background:linear-gradient(145deg,#2bd46f 0%,#119447 100%)}
.fab--wa:after{content:"";position:absolute;inset:-4px;border-radius:24px;border:1px solid rgba(43,212,111,.24);z-index:-1}
.chatbot-shell{position:fixed;right:22px;bottom:96px;z-index:100003;font-size:16px}
.chatbot-shell>summary{list-style:none}
.chatbot-shell>summary::-webkit-details-marker{display:none}
.chatbot-launcher{position:relative;width:62px;height:62px;border-radius:20px;background:linear-gradient(145deg,#117b91 0%,#063e50 100%);color:#fff;box-shadow:0 16px 38px rgba(6,46,62,.25),0 3px 8px rgba(6,46,62,.12);cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;user-select:none;border:1px solid rgba(255,255,255,.4);transition:transform .22s ease,box-shadow .22s ease,filter .22s ease}
.chatbot-launcher:before{content:"";position:absolute;inset:3px;border-radius:16px;border:1px solid rgba(255,255,255,.18);pointer-events:none}
.chatbot-launcher .ico{width:29px;height:29px;stroke-width:1.8;position:relative;z-index:2}
.chatbot-launcher:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 22px 46px rgba(6,46,62,.30),0 5px 12px rgba(6,46,62,.14);filter:saturate(1.08)}
.chatbot-launcher:active{transform:translateY(-1px) scale(.98)}
.chatbot-shell[open] .chatbot-launcher{display:none}
.fab__dot{position:absolute;right:8px;top:8px;width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid rgba(17,148,71,.85);box-sizing:content-box;box-shadow:0 0 0 4px rgba(255,255,255,.12);z-index:3}
.fab__dot--chat{background:#8ce7f4;border-color:#063e50;box-shadow:0 0 0 4px rgba(140,231,244,.12)}
@media(hover:hover){.fab[data-label]:after{content:attr(data-label);position:absolute;right:76px;top:50%;transform:translateY(-50%) translateX(6px);opacity:0;pointer-events:none;background:#062e3e;color:#fff;padding:8px 11px;border-radius:10px;font-size:12px;font-weight:700;letter-spacing:.02em;white-space:nowrap;box-shadow:0 8px 22px rgba(6,46,62,.18);transition:opacity .18s ease,transform .18s ease}.fab[data-label]:hover:after{opacity:1;transform:translateY(-50%) translateX(0)}}

.mobile-bar {
  position:fixed; inset:auto 0 0 0; z-index:var(--z-fab); display:none;
  grid-template-columns:repeat(3,1fr); background:#fff;
  border-top:1px solid var(--line); box-shadow:0 -4px 18px rgba(10,35,56,.08);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-bar a {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:60px; font-size:.75rem; font-weight:600; color:var(--ink-700);
  border-right:1px solid var(--line-soft);
}
.mobile-bar a:last-child { border-right:0; }
.mobile-bar a .ico { width:21px; height:21px; color:var(--b-600); }
.mobile-bar a.is-primary { background:var(--cta); color:#fff; }
.mobile-bar a.is-primary .ico { color:#fff; }

/* ==================================================== 08 · PAGE BLOCKS */

/* --- home hero --- */
.hero { position:relative; background:var(--b-900); color:#fff; overflow:hidden; }
.hero__bg { position:absolute; inset:0; }
.hero__bg img { width:100%; height:100%; object-fit:cover; }
.hero__scrim {
  position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(6,46,62,.96) 0%,rgba(6,46,62,.9) 38%,rgba(10,66,86,.68) 66%,rgba(14,90,114,.45) 100%);
}
.hero__in {
  position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--s8); align-items:center; padding-block:var(--s9);
  min-height:min(72vh,620px);
}
.hero h1 { color:#fff; margin-bottom:var(--s4); }
.hero h1 em { font-style:normal; color:#8FDCEA; }
.hero__lead { font-size:1.125rem; line-height:1.7; color:#CFE4EC; max-width:56ch; margin-bottom:var(--s6); }
.hero__actions { display:flex; flex-wrap:wrap; gap:var(--s3); margin-bottom:var(--s6); }
.hero__trust { display:flex; flex-wrap:wrap; gap:var(--s5); font-size:.875rem; color:#B6D2DD; }
.hero__trust span { display:inline-flex; align-items:center; gap:var(--s2); }
.hero__trust .ico { width:17px; height:17px; color:#6FCBDD; }

.hero-card {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-lg); padding:var(--s6); backdrop-filter:blur(10px);
}
.hero-card h2 { font-size:1.25rem; color:#fff; margin-bottom:var(--s2); }
.hero-card p { font-size:.875rem; color:#BBD5DF; margin-bottom:var(--s5); }
.hero-card .form__group { margin-bottom:var(--s4); }
.hero-card label { color:#DCEAF0; font-size:.8125rem; }
.hero-card input,.hero-card select {
  background:rgba(255,255,255,.95); border-color:rgba(255,255,255,.3);
}
.hero-card__note { font-size:.75rem; color:#9FBECB; margin-top:var(--s3); margin-bottom:0; }

/* --- service tiles --- */
.service-card { position:relative; }
.service-card .card__body { padding:var(--s5); }
.service-card__head { display:flex; gap:var(--s4); align-items:flex-start; margin-bottom:var(--s3); }
.service-card__head .icon-tile { margin-bottom:0; }

/* --- department card --- */
.dept-card .card__media { aspect-ratio:3/2; }
.dept-card__meta {
  display:flex; align-items:center; gap:var(--s2); font-size:.75rem;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--b-600); margin-bottom:var(--s2);
}

/* --- article card --- */
.article-card .card__media { aspect-ratio:16/9; }
.article-card__meta {
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3);
  font-size:.8125rem; color:var(--ink-500); margin-bottom:var(--s3);
}
.article-card__cat {
  color:var(--b-600); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; font-size:.6875rem;
}

.article-hero__img { width:100%; aspect-ratio:21/9; object-fit:cover; border-radius:var(--r-lg); margin-bottom:var(--s7); }

/* --- doctor profile --- */
.doctor-profile { display:grid; grid-template-columns:320px minmax(0,1fr); gap:var(--s8); align-items:start; }
.doctor-profile__photo { border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh-2); }
.doctor-profile__photo img { width:100%; aspect-ratio:4/5; object-fit:cover; }

/* --- facilities --- */
.facility-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s8); align-items:center; padding-block:var(--s7); border-bottom:1px solid var(--line-soft); }
.facility-row:last-child { border-bottom:0; }
.facility-row:nth-child(even) .facility-row__media { order:2; }
.facility-row__media { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2); }
.facility-row__media img { width:100%; aspect-ratio:3/2; object-fit:cover; }

/* --- legal / admin login helpers --- */
.legal h2 { margin-top:var(--s7); }

/* ============================================================ 09 · FOOTER */
.site-footer { background:var(--b-900); color:#A9C2CE; padding-top:var(--s9); font-size:.9375rem; }
/* Links on the dark footer must stay legible — never the dark CTA colour. */
.site-footer a { color:#DCEEF3; }
.site-footer a:hover { color:#fff; text-decoration:underline; }
.footer-contact a,.footer-brand a { color:#E4F1F6; }
.site-footer h4 {
  font-family:var(--font-body); font-size:.8125rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#8FDCEA; margin-bottom:var(--s4);
}
.footer-grid {
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr;
  gap:var(--s7); padding-bottom:var(--s8);
}
.footer-grid a { color:#BFD5DE; }
.footer-grid a:hover { color:#fff; text-decoration:underline; }
.footer-links { list-style:none; margin:0; padding:0; }
.footer-links li { margin-bottom:var(--s3); }
.footer-links a { display:inline-flex; min-height:26px; align-items:center; }
.footer-brand .brand { color:#fff; margin-bottom:var(--s4); }
.footer-brand .brand__name { color:#fff; }
.footer-brand .brand__tag { color:#8FA4AF; }
.footer-brand p { color:#A9C2CE; max-width:42ch; }
.footer-contact { list-style:none; margin:0; padding:0; }
.footer-contact li { display:flex; gap:var(--s3); margin-bottom:var(--s4); align-items:flex-start; }
.footer-contact .ico { width:18px; height:18px; color:#6FCBDD; flex:none; margin-top:3px; }
.footer-social { display:flex; gap:var(--s2); margin-top:var(--s5); }
.footer-social a {
  width:42px; height:42px; border-radius:var(--r); display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.16); color:#BFD5DE;
}
.footer-social a:hover { background:rgba(255,255,255,.1); color:#fff; }
.footer-social .ico { width:20px; height:20px; }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.1); padding-block:var(--s5);
  display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
  font-size:.8125rem; color:#8FA4AF;
}
.footer-bottom a { color:#8FA4AF; }
.footer-bottom a:hover { color:#fff; }
.footer-bottom nav { display:flex; gap:var(--s4); flex-wrap:wrap; }
.footer-disclaimer {
  border-top:1px solid rgba(255,255,255,.1); padding-block:var(--s5);
  font-size:.8125rem; color:#8FA4AF; max-width:90ch;
}

/* ========================================================= 10 · ADMIN */
.admin-shell { min-height:100vh; background:var(--surface-2); display:grid; grid-template-columns:250px minmax(0,1fr); }
.admin-side { background:var(--b-900); color:#fff; padding:var(--s5) var(--s4); display:flex; flex-direction:column; gap:2px; }
.admin-side h2 { color:#fff; font-size:1rem; padding:var(--s3) var(--s3) var(--s5); margin:0; }
.admin-side a { padding:var(--s3); border-radius:var(--r-sm); color:#C2D9E2; font-size:.9375rem; min-height:44px; display:flex; align-items:center; }
.admin-side a:hover,.admin-side a[aria-current="page"] { background:rgba(255,255,255,.1); color:#fff; }
.admin-main { padding:var(--s7); min-width:0; }
.admin-top { display:flex; justify-content:space-between; gap:var(--s5); align-items:flex-start; margin-bottom:var(--s6); flex-wrap:wrap; }
.admin-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4); margin-bottom:var(--s6); }
.admin-stat,.admin-panel { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5); }
.admin-stat strong { display:block; font-family:var(--font-head); font-size:2rem; color:var(--b-700); }
.admin-stat span { font-size:.875rem; color:var(--ink-500); }
.admin-panel { margin-bottom:var(--s5); }
.admin-form { margin-bottom:var(--s6); }
.table-wrap { overflow-x:auto; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); }
.table-wrap table { width:100%; border-collapse:collapse; min-width:720px; font-size:.9375rem; }
.table-wrap th,.table-wrap td { text-align:left; padding:var(--s3) var(--s4); border-bottom:1px solid var(--line-soft); vertical-align:top; }
.table-wrap th { font-size:.75rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-500); background:var(--surface-2); }
.admin-login { min-height:100vh; display:grid; place-items:center; background:var(--surface-2); padding:var(--s5); }
.admin-card { width:min(460px,100%); background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s7); box-shadow:var(--sh-2); }

/* ====================================================== 11 · RESPONSIVE */
@media (max-width:1180px) {
  .nav__link { padding:var(--s3) 10px; font-size:.875rem; }
  .grid--sidebar { grid-template-columns:minmax(0,1fr) 300px; gap:var(--s7); }
  .action-rail { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .action-rail__item:nth-child(3n) { border-right:0; }
  .action-rail__item:nth-child(n+4) { border-top:1px solid var(--line-soft); }
}

@media (max-width:1024px) {
  :root { --header-h:70px; }
  .nav { display:none; }
  .nav-toggle { display:inline-flex; }
  .hero__in { grid-template-columns:1fr; gap:var(--s7); padding-block:var(--s8); min-height:0; }
  .hero-card { max-width:520px; }
  .grid--4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid--3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid--sidebar,.grid--split { grid-template-columns:1fr; gap:var(--s7); }
  .media-row,.facility-row { grid-template-columns:1fr; gap:var(--s6); }
  .media-row--reverse .media-row__media,.facility-row:nth-child(even) .facility-row__media { order:0; }
  .doctor-profile { grid-template-columns:1fr; gap:var(--s6); }
  .doctor-profile__photo { max-width:320px; }
  .gallery-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .page-header__in { flex-direction:column; align-items:flex-start; gap:var(--s5); }
  .cta-band__in { flex-direction:column; align-items:flex-start; gap:var(--s5); }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6); }
  .figure-stack__inset { right:0; bottom:calc(var(--s5) * -1); }
  .admin-shell { grid-template-columns:1fr; }
  .admin-side { flex-direction:row; flex-wrap:wrap; }
  .admin-side h2 { width:100%; padding-bottom:var(--s3); }
  .admin-main { padding:var(--s5); }
  .admin-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:820px) {
  :root { --s9:72px; --s8:52px; }
  .utility-bar__list > *:not(.utility-bar__emergency) { display:none; }
  .section-head--split { flex-direction:column; align-items:flex-start; }
  .action-rail { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .action-rail__item { border-right:1px solid var(--line-soft); border-top:1px solid var(--line-soft); }
  .action-rail__item:nth-child(2n) { border-right:0; }
  .action-rail__item:nth-child(-n+2) { border-top:0; }
  .action-rail--float { margin-top:calc(var(--s7) * -1); }
  .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3); }
  .stat { border-left:0; padding:var(--s4); background:rgba(255,255,255,.04); border-radius:var(--r); }
  .form__row { grid-template-columns:1fr; }
  .form-card { padding:var(--s5); }
  .checklist--2 { grid-template-columns:1fr; }
  .mobile-bar { display:grid; }
  .fab-stack { bottom:78px; right:14px; }
  body { padding-bottom:60px; }
  .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3); }
  .lightbox__prev { left:var(--s3); }
  .lightbox__next { right:var(--s3); }
}

@media (max-width:560px) {
  :root { --s9:56px; --s8:44px; --s7:32px; }
  .container,.container--wide,.container--narrow { width:min(100% - 1.75rem,100%); }
  .grid--4,.grid--3,.grid--2 { grid-template-columns:1fr; }
  .action-rail { grid-template-columns:1fr; }
  .action-rail__item { border-right:0; min-height:0; flex-direction:row; align-items:center; gap:var(--s4); }
  .action-rail__item .ico { width:22px; height:22px; }
  .stat-grid { grid-template-columns:1fr 1fr; }
  .stat b { font-size:1.75rem; }
  .btn { width:100%; }
  .btn--sm,.cluster .btn { width:auto; }
  .hero__actions .btn { width:100%; }
  .hero__trust { gap:var(--s3); flex-direction:column; }
  .doctor-card__actions .btn { width:100%; }
  .figure-stack__inset { position:static; width:100%; border:0; margin-top:var(--s3); box-shadow:none; }
  .figure-stack__inset img { aspect-ratio:16/9; }
  .form-card { padding:var(--s4); }
  .success-panel { padding:var(--s5); }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; gap:var(--s3); }
  .gallery-grid { grid-template-columns:1fr 1fr; }
  .admin-grid { grid-template-columns:1fr; }
  .map-embed iframe { min-height:300px; }
}

/* ============================================================ 12 · PRINT */
@media print {
  .site-header,.site-footer,.mobile-bar,.fab-stack,.cta-band,.emergency-band,
  .drawer,.overlay,.breadcrumb,.map-embed { display:none!important; }
  body { color:#000; background:#fff; padding:0; font-size:11pt; }
  .section { padding-block:12pt; }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:9pt; color:#555; }
  .card,.panel { border:1px solid #ccc; box-shadow:none; break-inside:avoid; }
}


/* ================================================ 13 · HERO SLIDER */
.hero-slider { position:relative; background:var(--b-900); overflow:hidden; }
.hero-slider__viewport { position:relative; }
.hero-slide {
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .7s var(--ease);
}
.hero-slide.is-active { position:relative; opacity:1; visibility:visible; }
.hero-slide__bg { position:absolute; inset:0; }
.hero-slide__bg img { width:100%; height:100%; object-fit:cover; }
.hero-slide__scrim {
  position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(6,46,62,.95) 0%,rgba(6,46,62,.88) 34%,
             rgba(10,66,86,.62) 64%,rgba(14,90,114,.34) 100%);
}
.hero-slide__in {
  position:relative; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:var(--s8); align-items:center; padding-block:var(--s9);
  min-height:min(74vh,640px);
}
.hero-slide h2, .hero-slide h1 { color:#fff; margin-bottom:var(--s4); }
.hero-slide .display em { font-style:normal; color:#8FDCEA; }
.hero-slide__lead { font-size:1.125rem; line-height:1.7; color:#CFE4EC; max-width:56ch; margin-bottom:var(--s6); }
.hero-slide__actions { display:flex; flex-wrap:wrap; gap:var(--s3); margin-bottom:var(--s6); }
.hero-slide__trust { display:flex; flex-wrap:wrap; gap:var(--s5); font-size:.875rem; color:#B6D2DD; }
.hero-slide__trust span { display:inline-flex; align-items:center; gap:var(--s2); }
.hero-slide__trust .ico { width:17px; height:17px; color:#6FCBDD; }

.hero-slider__nav {
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4);
  color:#fff; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background var(--dur) var(--ease);
}
.hero-slider__nav:hover { background:rgba(255,255,255,.3); }
.hero-slider__nav .ico { width:22px; height:22px; }
.hero-slider__nav--prev { left:var(--s4); }
.hero-slider__nav--next { right:var(--s4); }
.hero-slider__dots {
  position:absolute; left:0; right:0; bottom:var(--s5); z-index:3;
  display:flex; justify-content:center; gap:var(--s3);
}
.hero-slider__dot {
  width:11px; height:11px; padding:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.35); border:1px solid rgba(255,255,255,.55);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.hero-slider__dot[aria-selected="true"] { background:#fff; transform:scale(1.25); }

/* ============================================= 14 · PAGE BANNERS */
.page-header--media { position:relative; background:var(--b-900); border-bottom:0; }
.page-header--media .page-header__bg { position:absolute; inset:0; }
.page-header--media .page-header__bg img { width:100%; height:100%; object-fit:cover; }
.page-header--media .page-header__scrim {
  position:absolute; inset:0;
  background:linear-gradient(95deg,rgba(6,46,62,.93) 0%,rgba(6,46,62,.84) 42%,rgba(14,90,114,.52) 100%);
}
.page-header--media > .container { position:relative; }
.page-header--media { padding-block:var(--s8) var(--s8); min-height:280px; display:flex; align-items:center; }
.page-header--media h1 { color:#fff; }
.page-header--media .lead { color:#CFE4EC; }
.page-header--media .eyebrow { color:#8FDCEA; }
.page-header--media .breadcrumb a,
.page-header--media .breadcrumb li,
.page-header--media .breadcrumb [aria-current="page"] { color:#BBD5DF; }
.page-header--media .breadcrumb a:hover { color:#fff; }
.page-header--media a:not(.btn) { color:#8FDCEA; }
.hero-slide a:not(.btn) { color:#8FDCEA; }
.page-header--media .breadcrumb li:not(:last-child)::after { color:#7FA3B2; }

/* ================================================= 15 · LIVE MAP */
.map-embed { border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh-1); background:var(--b-50); }
.map-embed iframe { display:block; width:100%; height:100%; min-height:420px; border:0; }
.map-embed--tall iframe { min-height:480px; }
.map-actions { display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s4); }

@media (max-width:1024px) {
  .hero-slide__in { grid-template-columns:1fr; gap:var(--s6); padding-block:var(--s8); min-height:0; }
  .hero-slider__nav { width:42px; height:42px; }
}
@media (max-width:820px) {
  .page-header--media { min-height:210px; padding-block:var(--s7); }
  .hero-slide__trust { gap:var(--s3); flex-direction:column; }
}
@media (max-width:560px) {
  .hero-slider__nav { display:none; }
  .hero-slide__actions .btn { width:100%; }
  .map-embed iframe,.map-embed--tall iframe { min-height:300px; }
}

/* ================================================= CHATBOT — robust no-API assistant */
.chatbot-shell{position:fixed;right:22px;bottom:88px;z-index:100001;font-size:16px}
.chatbot-shell>summary{list-style:none}
.chatbot-shell>summary::-webkit-details-marker{display:none}
.chatbot-launcher{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#0b7285,#062e3e);color:#fff;box-shadow:0 12px 30px rgba(6,46,62,.28);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1;user-select:none}
.chatbot-launcher:hover{transform:translateY(-2px)}
.chatbot-shell[open] .chatbot-launcher{display:none}
.chatbot-panel{position:absolute;right:0;bottom:70px;width:min(410px,calc(100vw - 28px));height:min(650px,calc(100vh - 150px));background:#fff;border:1px solid #dbe8ec;border-radius:20px;box-shadow:0 22px 70px rgba(6,46,62,.24);overflow:hidden}
.chatbot-frame{display:block;width:100%;height:100%;border:0;background:#f5fafb}
@media(max-width:560px){.fab-stack{right:14px;bottom:18px}.fab,.chatbot-launcher{width:58px;height:58px;border-radius:18px}.chatbot-shell{right:14px;bottom:88px}.chatbot-panel{right:0;bottom:66px;width:calc(100vw - 20px);height:min(680px,calc(100vh - 120px))}}

/* --- doctors search: isolated styles so global form/filter rules cannot override it --- */
.doctor-search{margin:0 0 var(--s7);max-width:680px}
.doctor-search__field{position:relative;display:flex;align-items:center;background:#fff;border:1px solid #cbdde3;border-radius:16px;box-shadow:0 8px 24px rgba(6,46,62,.07);transition:border-color .2s ease,box-shadow .2s ease}
.doctor-search__field:focus-within{border-color:#117b91;box-shadow:0 0 0 4px rgba(17,123,145,.10),0 10px 28px rgba(6,46,62,.09)}
.doctor-search__field>.ico{position:absolute;left:17px;width:20px;height:20px;color:#6f8790;pointer-events:none}
.doctor-search__field input{width:100%;min-height:56px;padding:0 50px 0 48px!important;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;font-size:15px;color:var(--ink-900)}
.doctor-search__field input::placeholder{color:#8ca0a8;opacity:1}
.doctor-search__clear{position:absolute;right:10px;width:36px;height:36px;border:0;border-radius:10px;background:#eef5f7;color:#315863;font-size:22px;line-height:1;cursor:pointer}
.doctor-search__clear:hover{background:#dcecef;color:#063e50}
@media(max-width:700px){.doctor-search{max-width:none}.doctor-search__field input{min-height:52px}}

/* V11 interaction fixes: external JS is allowed by the site's CSP. */
.chatbot-panel{position:absolute;right:0;bottom:76px;width:min(410px,calc(100vw - 28px));height:min(650px,calc(100vh - 150px));background:#fff;border:1px solid #dbe8ec;border-radius:20px;box-shadow:0 22px 70px rgba(6,46,62,.24);overflow:hidden}
.chatbot-frame{display:block;width:100%;height:100%;border:0;background:#f5fafb}
.chatbot-shell[open] .chatbot-launcher{display:none}
.doctor-search{position:relative;max-width:680px;margin:0 0 var(--s7)}
.doctor-search__field{position:relative;z-index:20;display:flex;align-items:center;background:#fff;border:1px solid #cbdde3;border-radius:16px;box-shadow:0 8px 24px rgba(6,46,62,.07);transition:border-color .2s ease,box-shadow .2s ease}
.doctor-search__field:focus-within{border-color:#117b91;box-shadow:0 0 0 4px rgba(17,123,145,.10),0 10px 28px rgba(6,46,62,.09)}
.doctor-search__field>.ico{position:absolute;left:17px;width:20px;height:20px;color:#6f8790;pointer-events:none}
.doctor-search__field input{width:100%;min-height:56px;padding:0 50px 0 48px!important;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;font-size:15px;color:var(--ink-900)}
.doctor-suggestions{position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:50;background:#fff;border:1px solid #d7e6ea;border-radius:14px;box-shadow:0 18px 40px rgba(6,46,62,.15);padding:6px;overflow:hidden}
.doctor-suggestion{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:0;border-radius:10px;background:#fff;color:#163a43;text-align:left;cursor:pointer}
.doctor-suggestion:hover,.doctor-suggestion:focus{background:#eef7f8;outline:none}
.doctor-suggestion strong{font-size:14px;font-weight:700}.doctor-suggestion span{font-size:12px;color:#6b8087}
.doctor-search-notice{margin-bottom:var(--s5)}
@media(max-width:700px){.doctor-search{max-width:none}.doctor-search__field input{min-height:52px}.chatbot-shell{right:14px}.chatbot-panel{right:0;width:calc(100vw - 20px);height:min(680px,calc(100vh - 120px))}}

/* V13 chatbot layout polish — final overrides */
.chatbot-shell{position:fixed!important;right:24px!important;bottom:24px!important;z-index:100003!important;font-size:16px!important}
.chatbot-shell>summary{list-style:none!important}
.chatbot-shell>summary::-webkit-details-marker{display:none!important}
.chatbot-launcher{position:relative!important;width:60px!important;height:60px!important;border-radius:18px!important}
.chatbot-shell[open] .chatbot-launcher{display:none!important}
.chatbot-panel{position:absolute!important;right:0!important;bottom:76px!important;width:min(410px,calc(100vw - 28px))!important;height:min(620px,calc(100vh - 120px))!important;min-height:360px!important;background:#fff!important;border:1px solid rgba(219,232,236,.95)!important;border-radius:22px!important;box-shadow:0 24px 70px rgba(6,46,62,.24),0 6px 18px rgba(6,46,62,.08)!important;overflow:hidden!important}
.chatbot-frame{display:block!important;width:100%!important;height:100%!important;border:0!important;background:#f4f8fa!important}
@media(max-width:560px){.chatbot-shell{right:14px!important;bottom:18px!important}.chatbot-panel{right:0!important;bottom:72px!important;width:calc(100vw - 20px)!important;height:min(680px,calc(100vh - 105px))!important;min-height:360px!important;border-radius:20px!important}}

/* Floating actions: keep WhatsApp and chatbot separated and visible */
.fab-stack{position:fixed!important;right:22px!important;bottom:22px!important;z-index:100002!important;display:flex!important;flex-direction:column!important;gap:12px!important;align-items:flex-end!important}
.chatbot-shell{position:fixed!important;right:22px!important;bottom:96px!important;z-index:100003!important}
.chatbot-shell .chatbot-panel{bottom:76px!important}
@media(max-width:560px){
  .fab-stack{right:14px!important;bottom:18px!important}
  .chatbot-shell{right:14px!important;bottom:88px!important}
  .chatbot-shell .chatbot-panel{bottom:72px!important}
}

/* V14: keep chatbot panel fully inside the viewport after every message/send. */
.chatbot-shell{position:fixed!important;right:22px!important;bottom:96px!important;z-index:100003!important;}
.chatbot-shell .chatbot-panel{position:absolute!important;right:0!important;bottom:68px!important;width:min(410px,calc(100vw - 28px))!important;height:min(620px,calc(100dvh - 180px))!important;max-height:calc(100dvh - 180px)!important;min-height:360px!important;overflow:hidden!important;}
.chatbot-frame{display:block!important;width:100%!important;height:100%!important;border:0!important;overflow:hidden!important;}
@media(max-width:560px){
  .chatbot-shell{right:14px!important;bottom:88px!important;}
  .chatbot-shell .chatbot-panel{right:0!important;bottom:68px!important;width:calc(100vw - 20px)!important;height:min(680px,calc(100dvh - 170px))!important;max-height:calc(100dvh - 170px)!important;min-height:360px!important;}
}


/* FINAL QA: authoritative floating-chat geometry. The panel is viewport-fixed so
   its position cannot change when the iframe content grows or the chat scrolls. */
.chatbot-shell{position:fixed!important;right:22px!important;bottom:96px!important;z-index:100003!important;font-size:16px!important}
.chatbot-panel{position:fixed!important;right:22px!important;bottom:168px!important;width:min(410px,calc(100vw - 28px))!important;height:min(620px,calc(100dvh - 188px))!important;max-height:calc(100dvh - 188px)!important;min-height:0!important;background:#fff!important;border:1px solid rgba(219,232,236,.95)!important;border-radius:22px!important;box-shadow:0 24px 70px rgba(6,46,62,.24),0 6px 18px rgba(6,46,62,.08)!important;overflow:hidden!important}
.chatbot-frame{display:block!important;width:100%!important;height:100%!important;border:0!important;background:#f4f8fa!important}
@media(max-width:560px){
  .fab-stack{right:14px!important;bottom:18px!important}
  .chatbot-shell{right:14px!important;bottom:88px!important}
  .chatbot-panel{right:10px!important;bottom:158px!important;width:calc(100vw - 20px)!important;height:min(680px,calc(100dvh - 174px))!important;max-height:calc(100dvh - 174px)!important;min-height:0!important;border-radius:20px!important}
}

/* FINAL RESPONSIVE PASS — keep floating actions clear of the mobile quick-action bar */
@media (max-width: 820px) {
  body { overflow-x: hidden; }
  .fab-stack {
    right: 14px !important;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 14px) !important;
    z-index: 100002 !important;
  }
  .fab-stack .fab {
    width: 56px !important;
    height: 56px !important;
    border-radius: 17px !important;
  }
  .chatbot-shell {
    right: 14px !important;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 82px) !important;
    z-index: 100003 !important;
  }
  .chatbot-launcher {
    width: 56px !important;
    height: 56px !important;
    border-radius: 17px !important;
  }
  .chatbot-shell .chatbot-panel {
    right: 0 !important;
    bottom: 68px !important;
    width: min(410px, calc(100vw - 20px)) !important;
    height: min(680px, calc(100dvh - 190px)) !important;
    max-height: calc(100dvh - 190px) !important;
  }
  .mobile-bar {
    min-height: 60px;
    z-index: 100001 !important;
  }
}

@media (max-width: 560px) {
  .chatbot-shell .chatbot-panel {
    width: calc(100vw - 20px) !important;
    height: min(640px, calc(100dvh - 180px)) !important;
    max-height: calc(100dvh - 180px) !important;
    min-height: 340px !important;
    border-radius: 18px !important;
  }
  .chatbot-frame { min-width: 0 !important; }
}


/* =========================================================
   FINAL VISUAL POLISH — IMAGE-FIRST HOME HERO + COMPACT DOCTOR CARDS
   ========================================================= */
.hero-slide__in--image-first {
  grid-template-columns:minmax(0, 1fr);
  min-height:min(72vh, 620px);
  padding-block:clamp(4rem, 8vw, 7rem);
}
.hero-slide__in--image-first .hero-slide__content {
  max-width:680px;
}
.hero-slide__in--image-first .hero-slide__lead {
  max-width:48ch;
}
.hero-slide__scrim {
  background:linear-gradient(90deg,
    rgba(4,38,51,.82) 0%,
    rgba(5,48,63,.62) 38%,
    rgba(7,62,78,.25) 68%,
    rgba(7,62,78,.08) 100%);
}
.hero-slide__bg img {
  object-position:center center;
  filter:saturate(1.08) contrast(1.04);
}
.doctor-card .card__media {
  aspect-ratio:5/6;
}
.doctor-card .card__body {
  padding:1rem 1.05rem 1.1rem;
}
.doctor-card__specialty {
  font-size:.68rem;
  margin-bottom:.35rem;
}
.doctor-card__name {
  font-size:1rem;
  line-height:1.3;
  margin-bottom:.35rem;
}
.doctor-card .card__text {
  font-size:.84rem;
  line-height:1.5;
  margin-bottom:.35rem;
}
.doctor-card__actions {
  gap:.45rem;
  margin-top:.8rem;
}
.doctor-card__actions .btn {
  min-height:36px;
  padding:.45rem .75rem;
  font-size:.78rem;
}
@media (max-width:820px) {
  .hero-slide__in--image-first {
    min-height:560px;
    padding-block:4rem 5rem;
  }
  .hero-slide__in--image-first .hero-slide__content {
    max-width:620px;
  }
}
@media (max-width:560px) {
  .hero-slide__in--image-first {
    min-height:520px;
    padding-block:3.5rem 4.5rem;
  }
  .hero-slide__in--image-first .hero-slide__lead {
    font-size:1rem;
    line-height:1.55;
  }
  .doctor-card .card__body {
    padding:.9rem;
  }
}

/* Chatbot robot launcher */
.chatbot-launcher .ico{width:30px;height:30px;stroke-width:1.75}
.chatbot-launcher:hover .ico{transform:scale(1.06)}

/* =========================================================
   FINAL DEPLOYMENT RESPONSIVE HARDENING
   ========================================================= */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video, iframe { max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(63,168,193,.55); outline-offset: 3px; }

/* Keep long CMS text from forcing horizontal scrolling on small screens. */
.prose, .card__body, .panel, .notice, .success-panel, .admin-panel,
.table-wrap td, .table-wrap th { overflow-wrap: anywhere; }

@media (max-width: 1024px) {
  .admin-side { position: sticky; top: 0; z-index: 20; overflow-x: auto; scrollbar-width: thin; }
  .admin-side h2 { flex: 0 0 auto; width: auto; padding: var(--s3); }
  .admin-side a { flex: 0 0 auto; white-space: nowrap; }
  .admin-main { padding-bottom: calc(var(--s8) + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 820px) {
  .site-header { padding-top: env(safe-area-inset-top, 0px); }
  .mobile-bar { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .mobile-bar a { min-height: 60px; }
  .container { max-width: 100%; }
  .page-header__in { padding-inline: 0; }
  .hero-slide__in, .hero__in { width: min(100% - 2rem, var(--container)); }
  .cta-band__actions { width: 100%; }
  .cta-band__actions .btn { flex: 1 1 180px; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 560px) {
  :root { --header-h: 64px; }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  h1, .display { overflow-wrap: anywhere; }
  .hero-slide__in, .hero__in { width: min(100% - 1.75rem, var(--container)); }
  .hero-slide__actions .btn, .hero__actions .btn { min-height: 48px; }
  .cta-band__actions .btn { width: 100%; flex-basis: 100%; }
  .cluster { align-items: stretch; }
  .cluster .btn { min-height: 44px; }
  .form__group input, .form__group select, .form__group textarea { max-width: 100%; }
  .admin-main { padding: var(--s4); }
  .admin-panel, .admin-card { padding: var(--s4); }
  .admin-top h1 { font-size: 1.65rem; }
  .admin-side a { font-size: .85rem; }
}

@media (max-width: 820px) {
  .utility-bar__emergency { white-space: normal; }
  .utility-bar__emergency .phone-prominent { white-space: nowrap; }
  .nav-actions .btn { display: none; }
}

@media (max-width: 560px) {
  .brand { gap: var(--s2); }
  .brand__text { max-width: min(58vw, 220px); }
  .brand__name { line-height: 1.12; }
  .nav-toggle { flex: 0 0 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =========================================================
   FINAL SEARCH UI POLISH — all site search fields
   Fixes icon/text overlap and keeps every search input consistent
   across desktop, tablet and mobile.
   ========================================================= */
.search-field {
  position: relative;
  display: block;
  width: min(100%, 680px);
  max-width: 680px;
  margin-inline: 0;
  min-width: 0;
  box-sizing: border-box;
}
.search-field > .ico {
  position: absolute;
  z-index: 2;
  left: 17px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: 0;
  transform: translateY(-50%);
  color: #6f8790;
  pointer-events: none;
}
.search-field input,
.search-field input[type="search"] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  margin: 0;
  padding: 0 56px 0 50px !important;
  border: 1px solid #cbdde3 !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: var(--ink-900);
  font-size: .9375rem;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(6,46,62,.07);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.search-field input:hover,
.search-field input[type="search"]:hover {
  border-color: #9fc2cc !important;
}
.search-field input:focus,
.search-field input[type="search"]:focus {
  border-color: #117b91 !important;
  box-shadow: 0 0 0 4px rgba(17,123,145,.10), 0 10px 28px rgba(6,46,62,.09) !important;
}
.search-field input::placeholder {
  color: #8ca0a8;
  opacity: 1;
}
.search-field input::-webkit-search-cancel-button,
.search-field input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.search-field__clear {
  position: absolute;
  z-index: 3;
  right: 10px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 10px;
  background: #eef5f7;
  color: #315863;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  box-sizing: border-box;
}
.search-field__clear:hover,
.search-field__clear:focus-visible {
  background: #dcecef;
  color: #063e50;
}
.search-field__clear:focus-visible {
  outline: 2px solid #117b91;
  outline-offset: 2px;
}
@media (max-width: 700px) {
  .search-field {
    width: 100%;
    max-width: none;
  }
  .search-field input,
  .search-field input[type="search"] {
    min-height: 52px;
    padding-left: 48px !important;
    padding-right: 52px !important;
    border-radius: 14px !important;
  }
  .search-field > .ico {
    left: 15px;
    width: 19px;
    height: 19px;
  }
  .search-field__clear {
    right: 8px;
    width: 34px;
    height: 34px;
  }
}
@media (max-width: 380px) {
  .search-field input,
  .search-field input[type="search"] {
    font-size: .875rem;
    padding-left: 45px !important;
    padding-right: 48px !important;
  }
  .search-field > .ico {
    left: 13px;
    width: 18px;
    height: 18px;
  }
}

/* =========================================================
   FINAL RESPONSIVE AUDIT HARDENING
   Designed for 320px phones through large desktop displays.
   ========================================================= */
.nav-bar,
.nav-actions,
.brand,
.brand__text,
.utility-bar__in,
.utility-bar__emergency,
.utility-bar__list,
.page-header__in,
.section-head,
.section-head__text,
.card,
.card__body,
.form-card,
.form__group,
.cta-band__in,
.footer-grid > *,
.admin-top > * {
  min-width: 0;
}

.brand__name,
.utility-bar a,
.nav__link,
.mega__link,
.drawer__link,
.drawer__acc-btn,
.btn,
.card__title,
.doctor-card__name,
.doctor-card__specialty,
.footer-contact a {
  overflow-wrap: anywhere;
}

.nav__link,
.nav-actions .btn,
.utility-bar a {
  white-space: nowrap;
}

/* Header sizing: keep desktop navigation stable and switch to the drawer
   before links can become cramped. */
.nav { flex: 1 1 auto; min-width: 0; justify-content: center; }
.nav__list { flex-wrap: nowrap; }
.nav__item { flex: 0 0 auto; }
.nav__link { white-space: nowrap; flex: 0 0 auto; }
.nav-actions { flex: 0 0 auto; }
.nav-actions .btn { white-space: nowrap; flex: 0 0 auto; }
.utility-bar a { white-space: nowrap; }
.utility-bar__emergency { white-space: nowrap; }

/* Avoid a near-breakpoint desktop header becoming cramped before the
   mobile navigation activates. */
@media (max-width: 1180px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-bar { gap: var(--s4); }
  .brand { flex: 1 1 auto; min-width: 0; }
  .nav-actions { flex: 0 0 auto; }
}

/* Dropdowns must never extend beyond the viewport. */
@media (max-width: 1180px) {
  .mega {
    min-width: 0;
    width: min(520px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
  }
}

/* Consistent form sizing prevents browser-specific input overflow. */
input,
select,
textarea,
button {
  max-width: 100%;
}

input[type="search"] {
  min-width: 0;
}

@media (max-width: 820px) {
  .utility-bar__in {
    min-height: 34px;
    padding-block: 5px;
  }
  .utility-bar__emergency {
    max-width: 100%;
    line-height: 1.35;
  }
  .page-header__in,
  .cta-band__in,
  .section-head--split {
    min-width: 0;
  }
  .doctor-card__actions,
  .cta-band__actions,
  .hero__actions,
  .hero-slide__actions {
    min-width: 0;
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .brand__name { font-size: .94rem; }
  .brand__tag { font-size: .62rem; }
  .brand__mark { width: 40px; height: 40px; }
  .nav-actions .btn { min-height: 46px; }
  .nav-bar { gap: var(--s3); }
  .drawer { width: min(420px, 92vw); }
  .drawer__head { padding-inline: var(--s4); }
  .drawer__body { padding-inline: var(--s4); }
  .search-field { margin-inline: 0; }
  .search-field input,
  .search-field input[type="search"] {
    min-height: 52px;
    font-size: .92rem;
  }
  .chips {
    width: 100%;
    min-width: 0;
  }
  .chip {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 380px) {
  .brand__text { max-width: 190px; }
  .brand__name { font-size: .88rem; }
  .brand__tag { letter-spacing: .08em; }
  .nav-toggle { width: 44px; height: 44px; }
  .utility-bar { font-size: .75rem; }
  .search-field input,
  .search-field input[type="search"] {
    min-height: 50px;
    font-size: .86rem;
  }
}


/* =========================================================
   FINAL PROFESSIONAL HEADER + PATIENT LOGIN
   Keep the original clean navigation typography and give the two
   header actions enough room to sit side-by-side without overlap.
   ========================================================= */
.nav__link {
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.2;
  font-weight:500;
  letter-spacing:0;
  white-space:nowrap;
}
.nav__list { gap:2px; }
.nav-actions { gap:8px; }
.patient-login {
  color:var(--b-700);
  border-color:var(--b-100);
  background:#fff;
}
.patient-login:hover {
  background:var(--b-50);
  border-color:var(--b-400);
  color:var(--b-800);
}
.patient-login .ico { width:17px; height:17px; }

@media (min-width:1400px) {
  .nav-bar { width:min(1400px,100% - 2.5rem); }
}

@media (min-width:1281px) and (max-width:1399px) {
  .nav-bar { width:min(1320px,100% - 2.5rem); }
  .nav__link { font-size:.9375rem; padding-inline:7px; }
  .nav-actions .btn--sm { padding-inline:10px; font-size:.8125rem; }
  .patient-login { display:inline-flex; }
}

@media (max-width:1280px) {
  .patient-login { display:none; }
}

@media (max-width:560px) {
  .nav-actions .btn--sm { width:auto; }
}

/* =========================================================
   FINAL VISUAL CORRECTIONS — HEADER + DEPARTMENT CARDS
   Keep the desktop header balanced at common laptop widths;
   switch to the drawer before navigation can overlap the CTA.
   ========================================================= */
.dept-card__meta {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:28px;
  margin:0 0 var(--s3);
  color:var(--b-600);
}
.dept-card__meta .ico {
  width:30px;
  height:30px;
  flex:none;
  display:block;
}

@media (min-width:1281px) and (max-width:1399px) {
  .nav { gap:0; }
  .nav__list { gap:0; }
  .nav__link { padding-inline:8px; font-size:.875rem; }
  .nav-actions { gap:8px; }
  .nav-actions .btn--sm { padding-inline:12px; font-size:.8125rem; }
}

@media (max-width:1280px) {
  .nav { display:none; }
  .nav-toggle { display:inline-flex; }
  .nav-bar { gap:var(--s4); }
  .brand { flex:1 1 auto; min-width:0; }
  .nav-actions { flex:0 0 auto; }
}

@media (max-width:560px) {
  .dept-card__meta { margin-bottom:var(--s2); }
  .dept-card__meta .ico { width:26px; height:26px; }
}


/* =========================================================
   VIP PATIENT ACCESS — desktop header / drawer
   ========================================================= */
.patient-login {
  color:#fff !important;
  border-color:transparent !important;
  background:linear-gradient(135deg, var(--b-700), var(--b-500)) !important;
  box-shadow:0 8px 20px rgba(14, 87, 125, .16);
}
.patient-login:hover,
.patient-login:focus-visible {
  color:#fff !important;
  background:linear-gradient(135deg, var(--b-800), var(--b-600)) !important;
  border-color:transparent !important;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(14, 87, 125, .22);
}
.patient-login .ico { width:17px; height:17px; }

/* =========================================================
   FINAL MOBILE PATIENT LOGIN — header only
   Remove the extra quick-action row and place a compact Patient Login
   control in the header between the brand and hamburger.
   ========================================================= */
.mobile-header-patient-login {
  display:none;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:40px;
  padding:0 10px;
  border:1px solid var(--b-100);
  border-radius:10px;
  background:#fff;
  color:var(--b-700);
  font-size:.72rem;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 3px 10px rgba(14,87,125,.08);
}
.mobile-header-patient-login .ico {
  width:18px;
  height:18px;
  flex:none;
}
.mobile-header-patient-login:hover,
.mobile-header-patient-login:focus-visible {
  color:var(--b-800);
  background:var(--b-50);
  border-color:var(--b-300);
}

@media (max-width:1280px) {
  .mobile-header-patient-login { display:inline-flex; }
  .nav-actions > .patient-login { display:none !important; }
  .nav-actions > .btn--primary:not(.patient-login) { display:none !important; }
}

@media (max-width:560px) {
  .nav-bar { gap:8px; }
  .brand { flex:1 1 auto; min-width:0; }
  .brand__text { max-width:calc(100vw - 154px); }
  .mobile-header-patient-login {
    min-width:40px;
    width:40px;
    height:40px;
    padding:0;
    border-radius:10px;
  }
  .mobile-header-patient-login span {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  .nav-toggle {
    width:40px;
    height:40px;
    flex:0 0 40px;
  }
}

@media (max-width:360px) {
  .mobile-header-patient-login {
    width:38px;
    height:38px;
    flex-basis:38px;
  }
  .nav-toggle {
    width:38px;
    height:38px;
    flex-basis:38px;
  }
  .brand__text { max-width:calc(100vw - 140px); }
}


/* =========================================================
   FINAL CTA / HEADER BUTTON POLISH
   - Desktop header Book Appointment is the light/white CTA.
   - Home hero/banner appointment keeps the original primary style.
   - Drawer Patient Login uses the hospital theme color, above Appointment.
   ========================================================= */
.header-appointment {
  background:#fff !important;
  color:var(--b-800) !important;
  border:1px solid rgba(255,255,255,.9) !important;
  box-shadow:0 6px 16px rgba(6,46,62,.10);
}
.header-appointment:hover,
.header-appointment:focus-visible {
  background:var(--b-50) !important;
  color:var(--b-900) !important;
  border-color:var(--b-100) !important;
}
.hero-appointment-btn {
  background:var(--cta) !important;
  color:#fff !important;
  border-color:var(--cta) !important;
}
.hero-appointment-btn:hover,
.hero-appointment-btn:focus-visible {
  background:var(--cta-hover) !important;
  color:#fff !important;
  border-color:var(--cta-hover) !important;
}
.drawer__patient-login {
  background:linear-gradient(135deg, var(--b-700), var(--b-500)) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 7px 18px rgba(14,87,125,.16);
}
.drawer__patient-login:hover,
.drawer__patient-login:focus-visible {
  background:linear-gradient(135deg, var(--b-800), var(--b-600)) !important;
  color:#fff !important;
  border-color:transparent !important;
}
.drawer__appointment {
  background:#fff !important;
  color:var(--b-800) !important;
  border-color:var(--line) !important;
}
.drawer__appointment:hover,
.drawer__appointment:focus-visible {
  background:var(--b-50) !important;
  color:var(--b-900) !important;
  border-color:var(--b-300) !important;
}


/* FINAL CHATBOT VIEWPORT FIX */
.chatbot-shell {
  position: fixed !important;
  right: 22px !important;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 100003 !important;
}
.chatbot-shell .chatbot-panel {
  position: fixed !important;
  right: 22px !important;
  bottom: calc(168px + env(safe-area-inset-bottom, 0px)) !important;
  width: min(410px, calc(100vw - 28px)) !important;
  height: min(560px, calc(100dvh - 250px)) !important;
  max-height: calc(100dvh - 250px) !important;
  min-height: 320px !important;
  overflow: hidden !important;
}
@media (max-width: 700px) {
  .chatbot-shell {
    right: 14px !important;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .chatbot-shell .chatbot-panel {
    right: 10px !important;
    bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100vw - 20px) !important;
    height: min(560px, calc(100dvh - 220px)) !important;
    max-height: calc(100dvh - 220px) !important;
    min-height: 320px !important;
    border-radius: 18px !important;
  }
}
@media (max-width: 430px) {
  .chatbot-shell .chatbot-panel {
    right: 8px !important;
    width: calc(100vw - 16px) !important;
    height: min(520px, calc(100dvh - 205px)) !important;
    max-height: calc(100dvh - 205px) !important;
  }
}

/* FINAL FLOATING ACTION STACK FIX — mobile WhatsApp + chatbot must never overlap.
   Mobile quick-action bar is 60px high; keep WhatsApp directly above it and
   the chatbot one full button + gap above WhatsApp. */
.fab-stack {
  position: fixed !important;
  right: 22px !important;
  bottom: 22px !important;
  z-index: 100004 !important;
}
.chatbot-shell {
  position: fixed !important;
  right: 22px !important;
  bottom: 96px !important;
  z-index: 100005 !important;
}
@media (max-width: 820px) {
  .fab-stack {
    right: 14px !important;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 14px) !important;
    z-index: 100004 !important;
  }
  .fab-stack .fab {
    width: 56px !important;
    height: 56px !important;
    border-radius: 17px !important;
  }
  .chatbot-shell {
    right: 14px !important;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 14px + 56px + 14px) !important;
    z-index: 100005 !important;
  }
  .chatbot-launcher {
    width: 56px !important;
    height: 56px !important;
    border-radius: 17px !important;
  }
  .chatbot-shell .chatbot-panel {
    position: fixed !important;
    right: 10px !important;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 14px) !important;
    width: calc(100vw - 20px) !important;
    height: min(560px, calc(100dvh - 150px)) !important;
    max-height: calc(100dvh - 150px) !important;
    min-height: 320px !important;
    overflow: hidden !important;
  }
}
@media (max-width: 430px) {
  .chatbot-shell .chatbot-panel {
    right: 8px !important;
    width: calc(100vw - 16px) !important;
    height: min(520px, calc(100dvh - 145px)) !important;
    max-height: calc(100dvh - 145px) !important;
  }
}

/* =========================================================
   LAPTOP/DESKTOP HEADER FINAL NO-OVERLAP FIX
   Keep navigation and header CTAs in separate flex areas so
   Contact can never sit underneath Book Appointment.
   ========================================================= */
@media (min-width:1281px) {
  .nav-bar { align-items:center; }
  .nav { flex:1 1 auto; min-width:0; justify-content:flex-end; }
  .nav__list { flex:0 1 auto; min-width:0; flex-wrap:nowrap; }
  .nav-actions { flex:0 0 auto; white-space:nowrap; }
}

@media (min-width:1281px) and (max-width:1599px) {
  .nav-bar { width:min(1400px,100% - 2rem); gap:10px; }
  .brand { flex:0 1 285px; min-width:245px; }
  .nav { min-width:0; }
  .nav__link { font-size:.84rem; padding-inline:6px; }
  .nav__link .ico { width:13px; height:13px; }
  .nav-actions { gap:6px; }
  .nav-actions .btn--sm { font-size:.78rem; padding-inline:10px; }
}

@media (min-width:1600px) {
  .nav-bar { gap:12px; }
  .brand { flex:0 1 300px; min-width:270px; }
  .nav__link { padding-inline:7px; font-size:.9rem; }
}