/* ============================================================
   JEEVAN JYOTI HOSPITAL — SHARED DESIGN SYSTEM
   styles.css — the single source of design truth.
   Every page imports ONLY this file so the design cannot drift.

   Palette: "Greige & Cocoa — deepened" (approved, locked).
   Colour roles are filled by the approved hues below. Do not
   hardcode hex anywhere else — always reference the role tokens.
   ============================================================ */

/* ---- Font faces (Devanagari-safe system) ----------------------
   Eczar  = reserved display/editorial face (renders Devanagari)
   Poppins= headings / UI            Inter = body / long-form
   Hind   = Devanagari (Hindi) body/UI
   Eczar + Hind both cover Devanagari, so the EN/HI toggle never
   switches typeface mid-content. ------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Eczar:wght@500;600&family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500&family=Hind:wght@400;500;600;700&display=swap');

:root {
  /* ---- Colour roles (approved palette) ---- */
  --anchor:        #322624;  /* nav, footer, hero, dark sections; carries white text + future video overlay */
  --footer:        #221917;  /* one shade deeper than anchor */
  --secondary:     #5E4A40;  /* links, hover, secondary headings; NEVER on CTA buttons */
  --accent:        #0F6E66;  /* CTAs, dividers, badges — ONE restrained accent (deep teal) */
  --accent-hover:  #0B5A53;  /* darker teal for button hover */
  --surface:       #E8E1D4;  /* alternating light section background (with white) */
  --text:          #1E1916;  /* body/headings on light — AA on white + surface */
  --text-med:      #5F5248;  /* captions, secondary text — AA on white */
  --on-dark:       #E2D7CC;  /* sublines/body on the anchor */
  --on-dark-muted: #BCA99B;  /* captions on the anchor */
  --border:        #DCD2C2;  /* card/pill borders, dividers */
  --placeholder:   #3F312C;  /* photo-placeholder boxes before real imagery */
  --white:         #FFFFFF;

  /* ---- Fixed functional colours (semantic — never re-themed) ---- */
  --success:  #2D7A5C;
  --whatsapp: #25D366;
  --alert:    #C0392B;

  /* ---- Shadows (derived from anchor RGB 50,38,36) ---- */
  --shadow-card:  0 2px 12px rgba(50, 38, 36, 0.10);
  --shadow-hover: 0 6px 24px rgba(50, 38, 36, 0.16);

  /* ---- Font families ---- */
  --font-display: 'Eczar', Georgia, serif;
  --font-heading: 'Poppins', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-hindi:   'Hind', system-ui, sans-serif;

  /* ---- Type scale (brief Section 2) — desktop / mobile ---- */
  --fs-h1:    52px;  --fs-h1-m:    34px;  /* hero, display face */
  --fs-h2:    38px;  --fs-h2-m:    26px;  /* section, heading face */
  --fs-h3:    22px;  --fs-h3-m:    18px;  /* card, heading face */
  --fs-body:  16px;  --fs-body-m:  15px;
  --fs-quote: 20px;  --fs-quote-m: 17px;  /* testimonial/founder quote, display face */
  --fs-cap:   13px;  --fs-cap-m:   12px;
  --fs-btn:   15px;  --fs-btn-m:   14px;

  --lh-body: 1.65;
  --lh-head: 1.2;
  --lh-quote: 1.5;

  /* ---- Spacing (8px base) ---- */
  --sp-xs: 8px;  --sp-sm: 16px;  --sp-md: 24px;
  --sp-lg: 40px; --sp-xl: 64px;  --sp-xxl: 96px;

  /* ---- Radii ---- */
  --r-card: 8px;  --r-btn: 6px;  --r-input: 6px;

  --transition: 0.2s ease;

  /* ---- Layout ---- */
  --container: 1200px;
  --header-h: 84px;
  --header-h-scrolled: 60px;
  --bottombar-h: 56px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--white);
  overflow-x: clip; /* guard against horizontal overflow WITHOUT creating a scroll container (avoids sticky-header scroll jitter) */
}

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

a { color: var(--secondary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent); }

h1, h2, h3 { line-height: var(--lh-head); margin: 0; }

:where(:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--sp-md);
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--white);
  padding: 10px 16px; border-radius: var(--r-btn); z-index: 2000;
  font-family: var(--font-heading); font-size: var(--fs-btn);
}
.skip-link:focus { left: 16px; top: 16px; color: var(--white); }

/* Hindi text helper — always use the Devanagari face.
   This one handles inline Hindi inside an English page (the EN/HI toggle). */
.hi, [lang="hi"] { font-family: var(--font-hindi); }

/* Whole-page Hindi (/hi/**, which sets <html lang="hi">) needs its own rule.
   The selector above does match <html lang="hi">, but font-family only
   reaches the text by inheritance, and `body { font-family: var(--font-body) }`
   is a declaration on body itself — so it won. Result: the entire Hindi tree
   loaded the Hind webfont and then rendered in whatever Devanagari face the
   OS happened to supply (Nirmala UI on Windows, Noto on Android).

   Measured: Hind renders the test string at 359px, the page was rendering it
   at 393px — the same width as Inter, which has no Devanagari at all.

   Redefining the tokens rather than restating font-family means every rule
   built on var(--font-body)/var(--font-heading) follows automatically.
   --font-display stays Eczar: it covers Devanagari natively and was already
   working on the H1s. */
html[lang="hi"] {
  --font-body:    'Hind', system-ui, sans-serif;
  --font-heading: 'Hind', system-ui, sans-serif;
}

/* EXCEPTION: inside the reserved display-face contexts (hero/article
   headlines, Our Story headline, founder & testimonial quotes), Devanagari
   stays in the DISPLAY face (Eczar renders it natively) — so the EN/HI
   toggle never switches typeface on the same headline. */
.hero-headline [lang="hi"], .page-hero h1 [lang="hi"], .page-hero h1[lang="hi"],
.article-h1 [lang="hi"], .article-h1[lang="hi"], .story-h2 [lang="hi"],
.founder-message [lang="hi"], .testimonial [lang="hi"] {
  font-family: var(--font-display);
}

/* ============================================================
   BUTTONS (reusable)
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-xs);
  font-family: var(--font-heading); font-weight: 600;
  font-size: var(--fs-btn); line-height: 1;
  padding: 14px 26px; border-radius: var(--r-btn);
  border: 1.5px solid transparent; cursor: pointer;
  white-space: nowrap; min-height: 44px;
  transition: transform var(--transition), box-shadow var(--transition),
              background-color var(--transition), border-color var(--transition), color var(--transition);
}
.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover {
  background: var(--accent-hover); color: var(--white);
  transform: translateY(-2px); box-shadow: var(--shadow-hover);
}
.btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.55); }
.btn-outline:hover { background: rgba(255,255,255,0.10); border-color: var(--white); color: var(--white); transform: translateY(-2px); }
.btn-whatsapp { background: transparent; color: var(--white); border-color: var(--whatsapp); }
.btn-whatsapp:hover { background: var(--whatsapp); color: #0A3D1F; transform: translateY(-2px); }
.btn-text { background: transparent; color: var(--on-dark); padding: 14px 10px; }
.btn-text:hover { color: var(--white); }

/* Icon sizing inside buttons/links */
.icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* ============================================================
   HEADER / NAV  (sticky, compresses on scroll)
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 900;
  background: var(--anchor);
  height: var(--header-h);
  display: flex; align-items: center;
  transition: height var(--transition), box-shadow var(--transition);
}
.site-header.scrolled { height: var(--header-h-scrolled); box-shadow: 0 2px 8px rgba(0,0,0,0.18); }

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); width: 100%; }

.brand {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 22px; color: var(--white); letter-spacing: 0.01em;
  display: inline-flex; align-items: center; gap: 10px;
}
.brand:hover { color: var(--white); }
.brand-logo { height: 42px; width: auto; border-radius: 6px; flex: 0 0 auto; display: block; }
.site-header.scrolled .brand-logo { height: 34px; }
@media (max-width: 600px) { .brand-logo { height: 34px; } .brand { font-size: 17px; } }

/* Real photo dropped into a placeholder box (set by main.js media injector) */
.photo-ph.has-photo { background-size: cover; background-position: center top; color: transparent; border: 0; }

.nav { display: flex; align-items: center; gap: var(--sp-lg); }
.nav-links { display: flex; align-items: center; gap: var(--sp-md); list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-btn);
  color: var(--on-dark);
}
.nav-links a:hover { color: var(--white); }

.nav .btn-primary { padding: 11px 20px; min-height: 40px; }

/* Hamburger (mobile only) */
.nav-toggle {
  display: none; background: transparent; border: 0; cursor: pointer;
  width: 44px; height: 44px; align-items: center; justify-content: center;
}
.nav-toggle svg { stroke: var(--white); }

/* Mobile slide-in menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 950;
  background: var(--anchor);
  transform: translateX(100%); transition: transform 0.28s ease;
  display: flex; flex-direction: column; padding: var(--sp-lg) var(--sp-md);
  visibility: hidden;
  /* The menu is 19 items — ~1150px tall, well past any phone viewport.
     Without this it just spilled past the fold, and since openMenu() sets
     body{overflow:hidden} there was nothing left to scroll: Contact, About
     and the हिंदी switcher were unreachable. The switcher especially, since
     .lang-switch-link is hidden below 1180px and this is its only home on
     mobile. The bottom bar is z-index 1000 against this menu's 950, so it
     overlaps the last row — hence the extra bottom padding. */
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
@media (max-width: 768px) {
  .mobile-menu { padding-bottom: calc(var(--bottombar-h) + var(--sp-md)); }
}
.mobile-menu.open { transform: translateX(0); visibility: visible; }
.mobile-menu-close {
  align-self: flex-end; background: transparent; border: 0; cursor: pointer;
  width: 44px; height: 44px;
}
.mobile-menu-close svg { stroke: var(--white); }
.mobile-menu a {
  font-family: var(--font-heading); font-weight: 500; font-size: 24px;
  color: var(--white); padding: var(--sp-sm) 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

/* ============================================================
   HERO  (re-themed from jjh_hero_embed.html — animation kept)
   ============================================================ */
/* Hero — the actual hospital facade, shot from below at dusk.
   The building's own Hindi signage (जीवन ज्योति अस्पताल) is the brand
   mark, so the scrim is a gradient rather than a flat wash: the sky and
   the sign stay legible up top, and the copy sits in the darkened lower
   third over brick. background-position keeps the sign above the crop
   line on wide screens, where a 16:9 photo loses most of its height. */
.hero {
  position: relative;
  background-color: var(--anchor);            /* paint before the image lands */
  background-image: url('/images/hero-building.webp');
  background-size: cover;
  background-position: 50% 22%;
  background-repeat: no-repeat;
  display: flex; align-items: flex-end; justify-content: center; text-align: center;
  overflow: hidden; padding: var(--sp-xxl) var(--sp-md) var(--sp-xl); min-height: 640px;
}
/* Gradient scrim — transparent over the sky, solid under the text */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(50,38,36,0.18) 0%,
    rgba(50,38,36,0.30) 38%,
    rgba(50,38,36,0.72) 72%,
    rgba(50,38,36,0.92) 100%
  );
}
@media (max-width: 768px) {
  .hero {
    /* Art-directed crop: the centre bay, so a tall viewport still shows
       the facade instead of a slice of brick. */
    background-image: url('/images/hero-building-mobile.webp');
    background-position: 50% 18%;
    min-height: calc(100vh - var(--header-h));
    padding: var(--sp-xl) var(--sp-sm) var(--sp-lg);
  }
  .hero::before {
    background: linear-gradient(to bottom,
      rgba(50,38,36,0.22) 0%, rgba(50,38,36,0.34) 34%,
      rgba(50,38,36,0.78) 68%, rgba(50,38,36,0.94) 100%);
  }
}

.hero-content { position: relative; z-index: 2; max-width: 800px; }
/* Slight shadow so white type holds even where the brick behind it is light */
.hero-headline, .hero-subline { text-shadow: 0 1px 14px rgba(30,20,18,0.55); }

.hero-headline {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h1); line-height: var(--lh-head);
  color: var(--white); margin: 0 0 var(--sp-md) 0;
  opacity: 0; animation: jjhFadeInUp 0.8s ease-out 0.1s forwards;
}
@media (max-width: 768px) { .hero-headline { font-size: var(--fs-h1-m); } }

.hero-subline {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--on-dark); max-width: 640px; margin: 0 auto var(--sp-lg) auto;
  opacity: 0; animation: jjhFadeInUp 0.8s ease-out 0.35s forwards;
}

.hero-buttons {
  display: flex; flex-wrap: wrap; gap: var(--sp-sm);
  justify-content: center; align-items: center;
  opacity: 0; animation: jjhFadeInUp 0.8s ease-out 0.6s forwards;
}
@media (max-width: 768px) { .hero-buttons { flex-direction: column; width: 100%; }
  .hero-buttons .btn { width: 100%; } }

/* Decorative ambient shapes removed — the facade photograph is the hero now. */

@keyframes jjhFadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* Hero video (used only when the facade drone loop is added later) */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero.has-video { background-color: transparent; }
.hero.has-video::after { content: ''; position: absolute; inset: 0; background: rgba(50,38,36,0.55); z-index: 0; }
@media (max-width: 768px) { .hero-video { display: none; } }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--footer); color: var(--on-dark-muted); padding: var(--sp-xl) 0 var(--sp-md); }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);
  gap: var(--sp-lg);
}
.footer-col h4 {
  font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h3-m);
  color: var(--white); margin: 0 0 var(--sp-sm);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--sp-xs); }
.footer-col a { color: var(--on-dark); font-size: var(--fs-body-m); }
.footer-col a:hover { color: var(--white); }
.footer-brand-name { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h3-m); color: var(--white); }
.footer-tagline { font-family: var(--font-hindi); font-weight: 500; font-size: 17px; color: var(--on-dark); margin: var(--sp-sm) 0; line-height: 1.6; }
.footer-note { font-size: var(--fs-cap); color: var(--on-dark-muted); margin: var(--sp-xs) 0 var(--sp-sm); }
.footer-contact-line { font-size: var(--fs-body-m); color: var(--on-dark); margin-bottom: 6px; display: flex; align-items: center; gap: var(--sp-xs); }
.social-row { display: flex; gap: var(--sp-sm); margin-top: var(--sp-sm); }
.social-row a { color: var(--on-dark-muted); display: inline-flex; }
.social-row a:hover { color: var(--white); }
.social-row svg { width: 22px; height: 22px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.10);
  margin-top: var(--sp-lg); padding-top: var(--sp-md);
  display: flex; flex-wrap: wrap; gap: var(--sp-sm); justify-content: space-between;
  font-size: var(--fs-cap); color: var(--on-dark-muted);
}
.footer-bottom a { color: var(--on-dark-muted); }
.footer-bottom a:hover { color: var(--white); }

/* ============================================================
   MOBILE STICKY BOTTOM BAR (Book / WhatsApp / Call) — all pages
   ============================================================ */
.bottom-bar { display: none; }
@media (max-width: 768px) {
  body { padding-bottom: var(--bottombar-h); }
  .bottom-bar {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    height: var(--bottombar-h);
  }
  .bottom-bar a {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-btn-m);
    color: var(--white); text-align: center;
  }
  .bottom-bar a:hover { color: var(--white); }
  .bottom-bar .bb-book  { background: var(--accent); }
  .bottom-bar .bb-wa    { background: var(--whatsapp); color: #0A3D1F; }
  .bottom-bar .bb-call  { background: var(--secondary); }
  .bottom-bar svg { width: 18px; height: 18px; }
}

/* ============================================================
   RESPONSIVE NAV
   ============================================================ */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  :root { --header-h: 64px; }
  .nav { gap: var(--sp-sm); }
  /* Footer: 2×2 + 1 on tablet (brief 5.15) */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-md) var(--sp-lg); }
}

@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }   /* stacked on mobile */
  .brand { font-size: 18px; }
  .nav-book-extra { display: none; }              /* "Book Appointment" -> "Book" */
  .nav .btn-primary { padding: 10px 16px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-headline, .hero-subline, .hero-buttons { animation: none !important; opacity: 1 !important; }
  .btn, .site-header, a { transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .router-card, .article-card, .doc-panel, .wn-card, .testimonial { transition: none !important; }
}

/* ============================================================
   SCROLL REVEAL — tasteful fade/slide-in (JS adds .in)
   ============================================================ */
/* Hidden state applies ONLY when JS is active (html.js). With no JS,
   or if the observer never fires, content stays fully visible. */
.reveal { transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.in { opacity: 1; transform: none; }

/* ============================================================
   HOMEPAGE SECTIONS 2–14
   ============================================================ */
.section { padding: var(--sp-xxl) 0; }
@media (max-width: 768px) { .section { padding: var(--sp-xl) 0; } }
.section--surface { background: var(--surface); }
.section--dark { background: var(--anchor); color: var(--on-dark); }

.section-head { margin-bottom: var(--sp-lg); }
.section-head.center { text-align: center; }
.h2 { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h2); color: var(--text); margin: 0; line-height: var(--lh-head); }
.section--dark .h2 { color: var(--white); }
@media (max-width: 768px) { .h2 { font-size: var(--fs-h2-m); } }
.section-sub { font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-med); margin: var(--sp-xs) 0 0; }
.section--dark .section-sub { color: var(--on-dark-muted); }
.center-cta { text-align: center; margin-top: var(--sp-lg); }
.link-arrow { font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-btn-m); color: var(--secondary); }
.link-arrow.on-accent { color: var(--accent); }
.section--dark .link-arrow { color: var(--accent); }

/* Button extras */
.btn-sm { padding: 10px 16px; font-size: var(--fs-btn-m); min-height: 40px; }
.btn-secondary-outline { background: transparent; color: var(--secondary); border-color: var(--secondary); }
.btn-secondary-outline:hover { background: var(--secondary); color: var(--white); transform: translateY(-2px); }
.btn-on-accent { background: var(--white); color: var(--anchor); }
.btn-on-accent:hover { background: var(--white); color: var(--anchor); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.icon-lg { width: 48px; height: 48px; }

/* [5.2] Honest Care Bar */
.care-bar { background: var(--anchor); }
.care-bar-inner { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; min-height: 72px; text-align: center; }
.care-bar-item { font-family: var(--font-heading); font-weight: 500; font-size: 15px; letter-spacing: 0.02em; color: var(--white); padding: 8px var(--sp-md); }
.care-bar-item + .care-bar-item { border-left: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); }
@media (max-width: 768px) {
  .care-bar-inner { flex-direction: column; }
  .care-bar-item { padding: 12px 20px; }
  .care-bar-item + .care-bar-item { border-left: 0; }
}

/* [5.3] Patient Router */
.router-prompt { font-family: var(--font-heading); font-weight: 600; font-size: 20px; color: var(--text-med); margin: 0 0 var(--sp-md); }
.router-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
@media (max-width: 768px) { .router-grid { grid-template-columns: 1fr; } }
.router-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-md); min-height: 180px; display: flex; flex-direction: column; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.router-card:hover { border-color: var(--secondary); box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.router-card .icon-lg { color: var(--secondary); margin-bottom: var(--sp-sm); }
.router-card h3 { font-family: var(--font-heading); font-weight: 600; font-size: 18px; color: var(--anchor); margin: 0 0 6px; }
.router-card p { font-size: 14px; color: var(--text-med); margin: 0 0 var(--sp-sm); }
.router-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--sp-sm); align-items: center; }

/* [5.4] Health Library + generic card row */
.card-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
@media (max-width: 900px) { .card-row { grid-template-columns: 1fr; } }
.article-card { background: var(--white); border-radius: var(--r-card); padding: var(--sp-md); box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); }
.article-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.pill-tag { display: inline-block; align-self: flex-start; background: var(--secondary); color: var(--white); font-family: var(--font-heading); font-weight: 600; font-size: 12px; padding: 4px 10px; border-radius: var(--r-btn); margin-bottom: var(--sp-sm); }
.article-card h3 { font-family: var(--font-heading); font-weight: 600; font-size: 18px; color: var(--anchor); margin: 0 0 8px; }
.article-card .excerpt { font-size: 14px; color: var(--text-med); margin: 0 0 var(--sp-sm); }
.article-langs { margin-top: auto; display: flex; gap: var(--sp-md); }
.article-langs a { font-size: 13px; color: var(--secondary); font-weight: 500; font-family: var(--font-heading); }

/* [5.5] Conditions pills */
.cond-group { margin-bottom: var(--sp-lg); }
.cond-label { font-family: var(--font-heading); font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--sp-sm); }
.cond-pills { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.cond-pill { background: var(--surface); border: 1px solid var(--border); color: var(--anchor); font-family: var(--font-heading); font-weight: 500; font-size: 14px; padding: 8px 14px; border-radius: var(--r-card); transition: background var(--transition), color var(--transition); }
.cond-pill:hover { background: var(--anchor); color: var(--white); }
@media (max-width: 768px) {
  .cond-pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  .cond-pill { white-space: nowrap; }
}

/* [5.6] Our Story */
.story-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-xl); align-items: start; }
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; gap: var(--sp-lg); } }
.story-h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); color: var(--white); line-height: var(--lh-head); margin: 0 0 var(--sp-md); }
@media (max-width: 768px) { .story-h2 { font-size: var(--fs-h2-m); } }
.story-body p { color: var(--on-dark); line-height: 1.7; margin: 0 0 var(--sp-sm); }
.timeline { border-left: 2px solid var(--accent); padding-left: var(--sp-md); margin-top: 4px; }
.timeline-item { position: relative; margin-bottom: var(--sp-md); }
.timeline-item::before { content: ''; position: absolute; left: calc(-1 * var(--sp-md) - 5px); top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.timeline-year { font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--white); display: block; }
.timeline-text { font-size: 13px; color: var(--on-dark-muted); }

/* [5.7] Find the Right Doctor */
.doc-panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
@media (max-width: 900px) { .doc-panels { grid-template-columns: 1fr; } }
.doc-panel { background: var(--white); border-radius: var(--r-card); padding: var(--sp-md); border-top: 4px solid var(--secondary); box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); }
.doc-panel:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.doc-panel.primary { border-top-color: var(--accent); }
.panel-cat { font-family: var(--font-heading); font-weight: 600; font-size: 18px; color: var(--anchor); margin: 0 0 var(--sp-sm); }
.doc-photos { display: flex; gap: var(--sp-sm); margin-bottom: var(--sp-sm); }
.photo-ph { background: var(--placeholder); border-radius: var(--r-card); display: flex; align-items: center; justify-content: center; color: var(--on-dark-muted); font-size: 12px; text-align: center; padding: 8px; }
.doc-photo-single { width: 160px; height: 200px; }
.doc-photo-dual { flex: 1; height: 175px; }
.doc-name { font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--anchor); margin: var(--sp-xs) 0 0; }
.doc-qual { font-size: 13px; color: var(--text-med); }
.doc-tags { font-size: 14px; color: var(--text-med); margin: var(--sp-sm) 0; }
.panel-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--sp-sm); align-items: center; }

/* [5.8] Facility Highlights */
.fac-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-sm); }
@media (max-width: 768px) { .fac-grid { grid-template-columns: 1fr 1fr; } }
.fac-item { border: 1px solid rgba(255,255,255,0.1); border-radius: var(--r-card); padding: var(--sp-md); display: flex; align-items: center; gap: var(--sp-sm); }
.fac-item .tick { flex: 0 0 auto; width: 22px; height: 22px; }
.fac-item.live .tick { color: var(--accent); }
.fac-item.soon .tick { color: var(--on-dark-muted); }
.fac-item .label { font-family: var(--font-heading); font-weight: 500; font-size: 16px; color: var(--white); }
.fac-item.soon .label { color: var(--on-dark-muted); }
.badge-soon { margin-left: auto; background: var(--accent); color: var(--white); font-family: var(--font-heading); font-weight: 600; font-size: 10px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.fac-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); margin-top: var(--sp-lg); }
@media (max-width: 768px) { .fac-photos { grid-template-columns: 1fr; } }
.fac-photo .photo-ph { height: 240px; width: 100%; }
.fac-photo .cap { font-size: 13px; color: var(--on-dark-muted); margin-top: 8px; }

/* [5.9] What's New — swipe-only row (NEVER auto-advances) */
.whatsnew-row { display: flex; gap: var(--sp-md); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-sm); -webkit-overflow-scrolling: touch; }
.wn-card { flex: 0 0 280px; scroll-snap-align: start; background: var(--white); border-radius: var(--r-card); padding: var(--sp-md); box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); }
@media (max-width: 768px) { .wn-card { flex-basis: 80vw; } }
.wn-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.badge { display: inline-block; align-self: flex-start; font-family: var(--font-heading); font-weight: 600; font-size: 10px; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px; color: var(--white); margin-bottom: var(--sp-sm); }
.badge-new { background: var(--success); }
.badge-soon-pill { background: var(--accent); }
.wn-card h3 { font-family: var(--font-heading); font-weight: 600; font-size: 18px; color: var(--anchor); margin: 0 0 8px; }
.wn-card p { font-size: 14px; color: var(--text-med); margin: 0 0 var(--sp-sm); }
.wn-card .link-arrow { margin-top: auto; }
.wn-dots { display: flex; gap: 8px; justify-content: center; margin-top: var(--sp-md); }
.wn-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); border: 0; padding: 0; cursor: pointer; }
.wn-dot.active { background: var(--accent); }

/* [5.10] Patient Stories */
.story-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
@media (max-width: 900px) { .story-cards { grid-template-columns: 1fr; } }
.testimonial { background: var(--white); border-left: 4px solid var(--accent); border-radius: var(--r-card); padding: var(--sp-md) var(--sp-md) var(--sp-md); box-shadow: var(--shadow-card); }
.testimonial .qmark { font-family: var(--font-heading); font-weight: 700; font-size: 64px; line-height: 0.8; color: var(--accent); display: block; }
.testimonial blockquote { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-quote); line-height: var(--lh-quote); color: var(--text); margin: 8px 0 var(--sp-sm); }
@media (max-width: 768px) { .testimonial blockquote { font-size: var(--fs-quote-m); } }
.testimonial .attrib { font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--anchor); }
.spec-tag { display: inline-block; background: var(--secondary); color: var(--white); font-family: var(--font-heading); font-weight: 600; font-size: 12px; padding: 3px 10px; border-radius: var(--r-btn); margin-top: var(--sp-sm); }

/* [5.11] Cashless */
.cashless { text-align: center; max-width: 600px; margin: 0 auto; }
.cashless .shield { color: var(--success); width: 48px; height: 48px; margin: 0 auto var(--sp-sm); }
.cashless p { color: var(--text-med); margin: var(--sp-sm) 0; }
.btn-row { display: flex; gap: var(--sp-sm); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-md); }

/* [5.12] Appointment CTA strip */
.cta-strip { background: var(--accent); padding: var(--sp-xl) 0; text-align: center; }
.cta-strip h2 { font-family: var(--font-heading); font-weight: 700; font-size: 32px; color: var(--white); margin: 0 0 8px; }
@media (max-width: 768px) { .cta-strip h2 { font-size: 24px; } }
.cta-strip p { color: rgba(255,255,255,0.88); margin: 0 0 var(--sp-md); }

/* [5.13] Location & Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-line { display: flex; gap: var(--sp-xs); align-items: center; margin-bottom: 6px; color: var(--text); }
.contact-line a { color: var(--secondary); }
.contact-line .icon { color: var(--secondary); }
.contact-block { margin-top: var(--sp-md); }
.contact-block strong { font-family: var(--font-heading); font-weight: 600; color: var(--anchor); }
.map-embed iframe { width: 100%; height: 400px; border: 0; border-radius: var(--r-card); }
@media (max-width: 768px) { .map-embed iframe { height: 300px; } }

/* ============================================================
   DOCTOR PROFILE TEMPLATE (Dr. Vibhu — template for all five)
   ============================================================ */
.breadcrumb { font-size: 13px; color: var(--text-med); padding-top: var(--sp-md); }
.breadcrumb a { color: var(--secondary); }
.breadcrumb .sep { color: var(--border); padding: 0 6px; }

.doc-hero { background: var(--white); padding: var(--sp-sm) 0 var(--sp-lg); }
.doc-hero-grid { display: grid; grid-template-columns: 340px 1fr; gap: var(--sp-lg); align-items: start; }
@media (max-width: 768px) { .doc-hero-grid { grid-template-columns: 1fr; } }
.doc-portrait { width: 340px; height: 420px; max-width: 100%; }
@media (max-width: 768px) { .doc-portrait { width: 100%; height: 300px; } }
.doc-h1 { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h2); color: var(--text); line-height: var(--lh-head); margin: 0 0 8px; }
@media (max-width: 768px) { .doc-h1 { font-size: var(--fs-h2-m); } }
.doc-quals { font-family: var(--font-heading); font-weight: 500; font-size: 16px; color: var(--secondary); margin: 0 0 4px; line-height: 1.45; }
.doc-subquals { font-size: 14px; color: var(--text-med); margin: 0 0 var(--sp-sm); }
.doc-tagline { font-size: 15px; color: var(--text-med); line-height: 1.6; margin: 0 0 var(--sp-md); }
.doc-actions { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
@media (max-width: 768px) { .doc-actions .btn { width: 100%; } }

.profile-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: var(--sp-lg); align-items: start; }
@media (max-width: 900px) { .profile-grid { grid-template-columns: 1fr; } }
.philosophy p { font-size: 16px; color: var(--text-med); line-height: 1.75; margin: 0 0 var(--sp-md); }
.philosophy .lead { font-family: var(--font-body); font-weight: 500; font-size: 18px; color: var(--text); }

.quals-panel { background: var(--surface); border-left: 4px solid var(--accent); border-radius: var(--r-card); padding: var(--sp-md); }
.quals-panel h3 { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h3); color: var(--anchor); margin: 0 0 var(--sp-sm); }
.quals-panel h4 { font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--anchor); margin: var(--sp-md) 0 var(--sp-xs); }
.quals-list { list-style: none; margin: 0; padding: 0; }
.quals-list li { font-size: 14px; color: var(--text-med); line-height: 1.6; margin-bottom: 8px; }
.expertise-list { list-style: none; margin: 0; padding: 0; }
.expertise-list li { font-size: 14px; color: var(--text-med); line-height: 1.6; margin-bottom: 8px; padding-left: 18px; position: relative; }
.expertise-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.quals-langs { font-size: 14px; color: var(--text-med); margin-top: var(--sp-md); }
.quals-langs strong { font-family: var(--font-heading); font-weight: 600; color: var(--anchor); }

.conditions .cond-pills { margin-top: var(--sp-sm); }
.footnote { font-size: 13px; color: var(--text-med); margin-top: var(--sp-md); }
.cond-pill .star { color: var(--accent); }

/* Founder's Message — first-person Eczar quote (co-founders only).
   Uses the reserved display face (one of its three allowed homes). */
.founder-message { border-left: 4px solid var(--accent); padding-left: var(--sp-md); margin: 0 0 var(--sp-lg); max-width: 860px; }
.founder-message .qmark { font-family: var(--font-heading); font-weight: 700; font-size: 64px; line-height: 0.6; color: var(--accent); display: block; }
.founder-message .fq { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-quote); line-height: var(--lh-quote); color: var(--text); margin: 8px 0 var(--sp-md); }
@media (max-width: 768px) { .founder-message .fq { font-size: var(--fs-quote-m); } }
.founder-message .attrib { font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--anchor); }
.doc-testimonial { max-width: 760px; }
.doc-testimonial .section-head { margin-bottom: var(--sp-md); }

/* Closing CTA band — NextActionBlock (reusable across all content pages) */
.next-action { background: var(--white); border-top: 3px solid var(--accent); padding: var(--sp-lg) 0; }
.next-action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); text-align: center; }
@media (max-width: 768px) { .next-action-grid { grid-template-columns: 1fr; gap: var(--sp-md); } }
.na-col { display: flex; flex-direction: column; align-items: center; }
.na-col .btn, .na-col .na-link { margin-bottom: var(--sp-xs); }
.na-col p { font-size: 14px; color: var(--text-med); margin: 0; }
.na-link { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-btn); color: var(--anchor); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.na-link:hover { color: var(--accent); }

/* ============================================================
   SECONDARY PAGE COMPONENTS (About, Cashless, First Visit,
   Patient Stories, Contact, Specialties, Health Library)
   ============================================================ */
.page-hero { background: var(--anchor); padding: var(--sp-xl) 0; }
.page-hero.compact { padding: var(--sp-lg) 0; }
.page-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); color: var(--white); line-height: var(--lh-head); margin: 0 0 var(--sp-sm); }
/* Pages NOT in the reserved-face list use the heading face for their hero H1
   (keeps Eczar rare — only homepage/About/Cashless/First-Visit/Patient-Stories,
   specialty heroes, and article titles get it). */
.page-hero--plain h1 { font-family: var(--font-heading); }
@media (max-width: 768px) { .page-hero h1 { font-size: var(--fs-h1-m); } }
.page-hero .lead-sub { color: var(--on-dark); font-size: var(--fs-body); max-width: 700px; margin: 0; line-height: 1.6; }
.page-hero .doc-actions { margin-top: var(--sp-md); }

.prose { max-width: 760px; }
.prose p { font-size: 16px; color: var(--text-med); line-height: 1.8; margin: 0 0 var(--sp-md); }
.prose p:first-child { color: var(--text); font-weight: 500; font-size: 18px; }

/* Long-form legal pages (privacy, terms) are the only .prose documents with
   real structure, so the class needs more than paragraphs. Kept close to the
   article body's rhythm — a patient who has just read a Health Library piece
   shouldn't feel like they've landed on a different site. */
.prose h2 {
  font-family: var(--font-heading); font-weight: 600; font-size: 22px;
  color: var(--text); line-height: var(--lh-head);
  margin: var(--sp-lg) 0 var(--sp-sm);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--font-heading); font-weight: 600; font-size: 17px;
  color: var(--text); margin: var(--sp-md) 0 var(--sp-xs);
}
.prose ul, .prose ol { margin: 0 0 var(--sp-md); padding-left: 22px; }
.prose li {
  font-size: 16px; color: var(--text-med); line-height: 1.8; margin-bottom: 8px;
}
.prose li::marker { color: var(--accent); }
.prose li > strong { color: var(--text); }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--anchor); }
/* The alert block is defined unscoped, but its list styling lives under
   .article-body — so a legal page using one needs the list rules restated. */
.prose .urgent-block li { color: var(--text); }
.prose .legal-meta {
  font-size: 14px; color: var(--text-med); font-weight: 400;
  padding-bottom: var(--sp-md); margin-bottom: var(--sp-lg);
  border-bottom: 1px solid var(--border);
}
.prose .legal-meta:first-child { font-size: 14px; font-weight: 400; color: var(--text-med); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-md); font-size: 15px; }
.prose th, .prose td {
  text-align: left; padding: 10px 12px; border: 1px solid var(--border);
  color: var(--text-med); line-height: 1.6; vertical-align: top;
}
.prose th { font-family: var(--font-heading); font-weight: 600; color: var(--text); background: var(--surface); }
.prose code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.92em;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; color: var(--text);
}
@media (max-width: 768px) {
  .prose h2 { font-size: 20px; }
  .prose table { font-size: 14px; }
}

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); }
@media (max-width: 768px) { .stats-grid { grid-template-columns: 1fr 1fr; } }
.stat { background: var(--surface); border-radius: var(--r-card); padding: var(--sp-md); text-align: center; }
.stat .num { font-family: var(--font-heading); font-weight: 700; font-size: 34px; color: var(--accent); line-height: 1.1; }
.stat .lbl { font-size: 14px; color: var(--text-med); margin-top: 4px; }

.values { max-width: 760px; display: grid; gap: var(--sp-md); }
.value-block { border-left: 3px solid var(--accent); padding-left: var(--sp-md); }
.value-block h3 { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h3); color: var(--anchor); margin: 0 0 6px; }
.value-block p { font-size: 16px; color: var(--text-med); margin: 0; line-height: 1.7; }

.doctor-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-md); }
.doctor-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-md); text-align: center; box-shadow: var(--shadow-card); transition: transform var(--transition), box-shadow var(--transition); }
.doctor-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.doctor-card .photo-ph { height: 190px; margin-bottom: var(--sp-sm); }
.doctor-card .dc-name { font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--anchor); margin: 0 0 2px; }
.doctor-card .dc-qual { font-size: 13px; color: var(--text-med); margin: 0 0 var(--sp-sm); min-height: 34px; }

/* Step grid (Cashless / First Visit) */
.step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); }
@media (max-width: 768px) { .step-grid { grid-template-columns: 1fr; } }
.step { background: var(--surface); border-radius: var(--r-card); padding: var(--sp-md); border-top: 3px solid var(--accent); }
.step .n { font-family: var(--font-heading); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.step h4 { font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--anchor); margin: 6px 0 4px; }
.step p { font-size: 14px; color: var(--text-med); margin: 0; line-height: 1.6; }

/* Check list (what to bring) */
.check-list { list-style: none; margin: 0; padding: 0; max-width: 620px; }
.check-list li { position: relative; padding: 10px 0 10px 32px; font-size: 16px; color: var(--text); border-bottom: 1px solid var(--border); }
.check-list li::before { content: ''; position: absolute; left: 4px; top: 14px; width: 14px; height: 14px; border: 2px solid var(--accent); border-radius: 3px; }

/* OPD timings table */
.opd-table { width: 100%; border-collapse: collapse; max-width: 620px; }
.opd-table th, .opd-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 15px; }
.opd-table th { font-family: var(--font-heading); font-weight: 600; color: var(--anchor); background: var(--surface); }
.opd-table td { color: var(--text-med); }

/* Filter bar (Patient Stories) */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-bottom: var(--sp-lg); }
.filter-btn { font-family: var(--font-heading); font-weight: 500; font-size: 14px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--white); color: var(--text-med); cursor: pointer; transition: all var(--transition); }
.filter-btn:hover { border-color: var(--secondary); color: var(--anchor); }
.filter-btn.active { background: var(--anchor); border-color: var(--anchor); color: var(--white); }
.is-hidden { display: none !important; }

/* Procedures grid (Specialty) */
.proc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
@media (max-width: 900px) { .proc-grid { grid-template-columns: 1fr; } }
.proc-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-md); box-shadow: var(--shadow-card); }
.proc-card h3 { font-family: var(--font-heading); font-weight: 600; font-size: 18px; color: var(--anchor); margin: 0 0 6px; }
.proc-card p { font-size: 14px; color: var(--text-med); margin: 0 0 var(--sp-sm); }

/* Lead doctor panel (Specialty) */
.lead-doc { display: grid; grid-template-columns: 160px 1fr; gap: var(--sp-md); align-items: start; }
@media (max-width: 768px) { .lead-doc { grid-template-columns: 1fr; } }
.lead-doc .photo-ph { width: 160px; height: 200px; max-width: 100%; }
.lead-doc .ld-name { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h3); color: var(--anchor); margin: 0 0 2px; }
.lead-doc .ld-qual { font-size: 14px; color: var(--text-med); margin: 0 0 var(--sp-sm); }
.lead-doc p { font-size: 16px; color: var(--text-med); line-height: 1.7; margin: 0 0 var(--sp-sm); }

/* ============================================================
   HEALTH LIBRARY index + ARTICLE template
   ============================================================ */
.lib-group { margin-bottom: var(--sp-lg); }
.lib-group .cond-label { margin-bottom: var(--sp-md); }
.article-meta { font-size: 13px; color: var(--text-med); }
.lang-switch { display: inline-flex; border: 1px solid var(--secondary); border-radius: 999px; overflow: hidden; }
.lang-switch button { font-family: var(--font-heading); font-weight: 500; font-size: 13px; padding: 6px 16px; border: 0; background: var(--white); color: var(--secondary); cursor: pointer; }
.lang-switch button.active { background: var(--secondary); color: var(--white); }
.article-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-xl); align-items: start; }
@media (max-width: 900px) { .article-layout { grid-template-columns: 1fr; } }
.article-h1 { font-family: var(--font-display); font-weight: 600; font-size: 40px; color: var(--text); line-height: var(--lh-head); margin: 0 0 var(--sp-sm); }
@media (max-width: 768px) { .article-h1 { font-size: 30px; } }
.article-body { max-width: 720px; }
.article-body p { font-size: 17px; color: var(--text); line-height: 1.75; margin: 0 0 var(--sp-md); }
.article-body h2 { font-family: var(--font-heading); font-weight: 600; font-size: 26px; color: var(--anchor); margin: var(--sp-lg) 0 var(--sp-sm); }
.article-body h3 { font-family: var(--font-heading); font-weight: 600; font-size: 20px; color: var(--secondary); margin: var(--sp-md) 0 var(--sp-xs); }
.callout { background: var(--surface); border-left: 4px solid var(--secondary); border-radius: var(--r-card); padding: var(--sp-md); margin: var(--sp-md) 0; }
.callout .callout-label { font-family: var(--font-heading); font-weight: 600; color: var(--secondary); font-size: 14px; }
.article-sidebar { position: sticky; top: 88px; background: var(--surface); border-radius: var(--r-card); padding: var(--sp-md); }
.article-sidebar .photo-ph { width: 80px; height: 80px; border-radius: 50%; margin-bottom: var(--sp-sm); }
.article-sidebar h4 { font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--anchor); margin: 0 0 var(--sp-sm); }
.article-sidebar .related { border-top: 1px solid var(--border); margin-top: var(--sp-md); padding-top: var(--sp-md); }
.article-sidebar .related a { display: block; font-size: 14px; color: var(--secondary); margin-bottom: var(--sp-xs); }
.placeholder-note { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--r-card); padding: var(--sp-sm) var(--sp-md); font-size: 14px; color: var(--text-med); }

/* [5.14] FAQ */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; padding: var(--sp-md) 0; font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--anchor); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-md); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--font-heading); font-weight: 700; font-size: 20px; color: var(--accent); flex: 0 0 auto; }
.faq details[open] summary::after { content: '\2212'; }
.faq .faq-a { padding: 0 0 var(--sp-md); color: var(--text-med); font-size: 15px; line-height: var(--lh-body); max-width: 72ch; }

/* ============================================================
   HEALTH LIBRARY — LONG-FORM ARTICLE COMPONENTS
   Added for the full article library. Uses existing role tokens
   only; --alert was declared but previously unused.
   ============================================================ */

/* Standfirst — the doctor's framing note above the article body */
.article-standfirst {
  font-family: var(--font-body); font-size: 18px; line-height: 1.65;
  color: var(--text-med); border-left: 3px solid var(--border);
  padding-left: var(--sp-md); margin: 0 0 var(--sp-md); max-width: 68ch;
}
@media (max-width: 768px) { .article-standfirst { font-size: 16px; } }

.article-meta { margin: 0; }

/* Body lists — matched to .article-body p rhythm */
.article-body .article-list { margin: 0 0 var(--sp-md); padding-left: 22px; max-width: 68ch; }
.article-body .article-list li { font-size: 17px; color: var(--text); line-height: 1.7; margin-bottom: 10px; }
.article-body .article-list li::marker { color: var(--accent); }
@media (max-width: 768px) { .article-body .article-list li { font-size: 16px; } }

/* ---- Urgent block --------------------------------------------------
   These sections are the single most important thing in a medical
   article: they tell the reader when to stop reading and go to the
   hospital. They get the one alert colour in the palette, and they
   are the only place it is used.                                     */
.urgent-block {
  background: #FDF5F3;
  border: 1px solid color-mix(in srgb, var(--alert) 30%, transparent);
  border-left: 5px solid var(--alert);
  border-radius: var(--r-card);
  padding: var(--sp-md) var(--sp-md) 4px;
  margin: var(--sp-lg) 0;
}
.urgent-block .urgent-h {
  font-family: var(--font-heading); font-weight: 700; font-size: 20px;
  color: var(--alert); margin: 0 0 var(--sp-sm);
  display: flex; align-items: baseline; gap: 10px;
}
.urgent-block .urgent-h::before {
  content: '!'; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--alert); color: var(--white);
  font-size: 14px; line-height: 22px; text-align: center;
  align-self: center;
}
.urgent-block > p,
.urgent-block .article-list li { color: var(--text); }
.urgent-block > p:last-child { margin-bottom: var(--sp-md); }
.urgent-block .article-list { margin-bottom: var(--sp-md); }
@media (max-width: 768px) { .urgent-block { padding: var(--sp-sm) var(--sp-sm) 2px; } .urgent-block .urgent-h { font-size: 18px; } }

/* ---- Comparison table ---- */
.table-scroll { overflow-x: auto; margin: 0 0 var(--sp-md); -webkit-overflow-scrolling: touch; }
.compare-table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15px; }
.compare-table th, .compare-table td {
  text-align: left; vertical-align: top;
  padding: 12px 14px; border-bottom: 1px solid var(--border); line-height: 1.55;
}
.compare-table thead th {
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
  color: var(--white); background: var(--anchor); border-bottom: 0;
}
.compare-table thead th:first-child { background: var(--anchor); }
.compare-table tbody th { font-weight: 600; color: var(--anchor); background: var(--surface); width: 22%; }
.compare-table tbody th strong { font-weight: 600; }
.compare-table tbody td { color: var(--text-med); }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }

/* WhatsApp button on a light background — replaces the inline-style
   override that previously rendered this button brown. */
.btn-whatsapp.btn-on-light { color: #0A5C2B; border-color: var(--whatsapp); }
.btn-whatsapp.btn-on-light:hover { background: var(--whatsapp); color: #0A3D1F; }

/* Library index: article count + section rhythm */
.lib-count { font-family: var(--font-heading); font-weight: 500; font-size: 14px; color: var(--text-med); margin: 0 0 var(--sp-lg); }
.article-card .excerpt { flex: 1 1 auto; }
.article-card .read-link { margin-top: auto; font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--accent); }

/* ---- Doctor panels: pair each face with its own name ----------------
   Replaces .doc-photos (a row of photos with names stacked beneath,
   which left no association between a name and a face).            */
.doc-people { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); margin-bottom: var(--sp-sm); }
/* Single-doctor panel keeps the SAME two-column grid as the dual panels,
   so its one photo occupies an identical cell — all five portraits
   render at the same size across the three panels. */
.doc-people--one { grid-template-columns: 1fr 1fr; }
.doc-person { margin: 0; display: flex; flex-direction: column; min-width: 0; }
/* flex:0 0 auto is required: .doc-photo-dual still sets flex:1 for the old
   row layout, and inside this column container that becomes a vertical
   flex-basis:0 which cancels the height below. */
/* A fixed height with a fluid width made the frame's aspect swing from 0.76
   on desktop to 2.21 at tablet widths, while the photos themselves are 0.71
   portraits. With background-size:cover anchored to the top, the wider the
   frame got the less of the photo survived: 81% visible at 1280px, but only
   32% at 900px and 41% at 412px. The doctors' heads sit between 14% and 40%
   down the frame, so at phone and tablet widths the crop landed mid-face —
   foreheads and nothing else.

   Sizing by ratio instead of by height keeps the frame portrait at every
   width, so ~89% of each photo is always visible and the crop never depends
   on the viewport. max-width stops the frame ballooning to 387px wide in a
   single-column layout; flex:0 0 auto still has to stay, because
   .doc-photo-dual sets flex:1 and would otherwise collapse this to zero. */
.doc-person .photo-ph {
  flex: 0 0 auto;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 4 / 5;
  height: auto;
  background-position: center 20%;
}
.doc-person figcaption { margin-top: 10px; }
.doc-person .doc-name {
  display: block; font-family: var(--font-heading); font-weight: 600;
  font-size: 15px; color: var(--anchor); line-height: 1.35; margin: 0;
}
.doc-person .doc-qual { display: block; font-size: 13px; color: var(--text-med); line-height: 1.45; margin: 2px 0 0; }
@media (max-width: 420px) { .doc-people { grid-template-columns: 1fr; gap: var(--sp-md); } }

/* ============================================================
   NAV DROPDOWNS (brief Section 4)
   Hover on desktop; :focus-within covers keyboard users so no
   JS toggle is needed. Hidden entirely under the mobile
   breakpoint, where the slide-in menu shows the same groups.
   ============================================================ */
.nav-links .has-dropdown { position: relative; }
.nav-links .has-dropdown > a { display: inline-flex; align-items: center; gap: 6px; }
.dd-caret { flex: 0 0 auto; transition: transform var(--transition); opacity: 0.75; }
.has-dropdown:hover .dd-caret, .has-dropdown:focus-within .dd-caret { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px);
  min-width: 240px; padding-top: 10px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 950;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.dropdown ul {
  list-style: none; margin: 0; padding: 6px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-hover);
}
.dropdown li { margin: 0; }
.dropdown a {
  display: block; padding: 9px 14px; border-radius: var(--r-btn);
  font-family: var(--font-heading); font-weight: 500; font-size: 14px;
  color: var(--text); white-space: nowrap; line-height: 1.35;
}
.dropdown a:hover { background: var(--surface); color: var(--anchor); }
.dropdown .dd-all { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; }
.dropdown .dd-all a { color: var(--accent); font-weight: 600; }

/* Mobile menu sub-groups */
.mm-sub { display: flex; flex-direction: column; padding-left: var(--sp-md); }
.mobile-menu .mm-sub a {
  font-size: 16px; font-weight: 400; color: var(--on-dark);
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mobile-menu .mm-sub a:hover { color: var(--white); }
@media (max-width: 980px) { .dropdown { display: none; } }
.wip-tag { display:inline-block; margin-left:6px; background:transparent; border:1px solid var(--alert); color:var(--alert); font-family:var(--font-heading); font-weight:600; font-size:11px; padding:3px 8px; border-radius:var(--r-btn); vertical-align:middle; }

/* ============================================================
   CONDITION PAGES (brief Phase 3 — one-click from any pill)
   ============================================================ */
.cond-lede {
  font-family: var(--font-body); font-size: 18px; line-height: 1.7;
  color: var(--text-med); max-width: 62ch; margin: var(--sp-sm) 0 var(--sp-md);
}
@media (max-width: 768px) { .cond-lede { font-size: 16px; } }
.cond-cta { display: flex; flex-wrap: wrap; gap: var(--sp-md); align-items: center; }
.cond-reading { margin-top: var(--sp-lg); }
.cond-reading-list { list-style: none; margin: var(--sp-sm) 0 0; padding: 0; max-width: 62ch; }
.cond-reading-list li { border-bottom: 1px solid var(--border); }
.cond-reading-list li:last-child { border-bottom: 0; }
.cond-reading-list a {
  display: block; padding: 14px 0;
  font-family: var(--font-heading); font-weight: 500; font-size: 16px;
  color: var(--secondary); line-height: 1.4;
}
.cond-reading-list a:hover { color: var(--accent); }
.conditions-page .cond-label { margin-bottom: 4px; }

/* Sidebar doctor block — one per doctor who treats the condition,
   each individually bookable. */
.sb-doc + .sb-doc { border-top: 1px solid var(--border); margin-top: var(--sp-md); padding-top: var(--sp-md); }
.sb-doc h4 { margin: 0 0 var(--sp-sm); }
.sb-qual { font-weight: 400; color: var(--text-med); font-size: 13px; line-height: 1.45; display: block; margin-top: 2px; }
.sb-profile { display: inline-block; margin-top: var(--sp-xs); font-family: var(--font-heading); font-weight: 500; font-size: 13px; color: var(--secondary); }
.sb-profile:hover { color: var(--accent); }

/* ---- Header fit -----------------------------------------------------
   The language switcher pushed the header past its 1200px container,
   so nav labels wrapped to two lines. Keep every label on one line,
   tighten the gaps, and collapse to the hamburger earlier. */
.brand { white-space: nowrap; }
.nav-links > li > a { white-space: nowrap; }
.nav { gap: var(--sp-md); }
.nav-links { gap: 18px; }

.lang-switch-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-weight: 500; font-size: 13px;
  color: var(--on-dark); white-space: nowrap;
  padding: 6px 10px; border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px; flex: 0 0 auto;
}
.lang-switch-link:hover { color: var(--white); border-color: rgba(255,255,255,0.5); }

/* ---- Narrow-phone fit ------------------------------------------------
   Measured at real handset widths, not at the 523px the preview pane
   clamps to. Two things pushed the document past the viewport on every
   page below ~400px:

   1. The header row is logo + nowrap brand + Book + hamburger with 24px
      gaps — 401px of hard minimum. At 360-393px (most Android phones,
      iPhone SE/mini) that scrolled the WHOLE page sideways.
   2. .fac-grid stays 1fr 1fr down to 0. `1fr` floors at min-content, and
      a .fac-item's min-content is 48px padding + 22px tick + 16px gap +
      the label, so two columns demanded ~499px inside a 327px container
      and overflowed rather than shrank. */
@media (max-width: 520px) {
  .fac-grid { grid-template-columns: 1fr; }
  .fac-item { padding: 14px 16px; gap: 12px; }
  .fac-item .label { min-width: 0; }
}
@media (max-width: 430px) {
  .brand { font-size: 16px; gap: 8px; }
  .brand-logo { height: 34px; }
  .site-header.scrolled .brand-logo { height: 30px; }
  .nav { gap: 10px; }
  .nav .btn-primary { padding: 10px 12px; }
  .site-header .container { padding-left: 14px; padding-right: 14px; }
}
/* Below 360px even the tightened row won't fit. The fixed bottom bar is
   visible on every one of these screens and already carries Book, so
   dropping the header duplicate costs the user nothing. */
@media (max-width: 360px) {
  .nav .btn-primary { display: none; }
}

/* ---- Tap targets ------------------------------------------------------
   Measured at 375px. Buttons are 40-41px (fine), but these four sat under
   the 24x24 WCAG 2.5.8 floor. Where growing the box would move the layout,
   the hit area is extended with a transparent ::after instead, so nothing
   shifts visually. */
.wn-dot { position: relative; }
.wn-dot::after { content: ''; position: absolute; inset: -8px; }

.mobile-menu-close { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }

.social-row a { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 30px; }

@media (max-width: 768px) {
  .link-arrow, .read-link { padding-top: 4px; padding-bottom: 4px; }
}
.lang-switch-link .icon { width: 14px; height: 14px; }

/* Mobile menu variant sits with the other links, not as a pill */
.mobile-menu .mm-lang {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--sp-md); font-size: 18px; color: var(--on-dark);
  border-bottom: 0;
}
.mobile-menu .mm-lang .icon { width: 18px; height: 18px; }

/* Everything visible needs ~1174px of viewport (measured). Collapse to the
   hamburger just above that so the header can never wrap again. The language
   switcher goes with it — it stays reachable inside the slide-in menu. */
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .lang-switch-link { display: none; }
}