/* ==========================================================================
   NMC Clinic — shared stylesheet
   Converted from the .dc.html templates. Colours, spacing and type are taken
   from the original inline styles; nothing here is a new design decision.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  --teal-900: #124E4A;
  --teal-600: #286963;   /* brand deep teal: primary surfaces, buttons, links */
  --teal-300: #7FD4CA;
  --teal-050: #EAF4F3;
  --teal-025: #F4FBFA;
  --border:   #D7E5E4;
  --border-2: #E3EEED;
  --yellow:   #FFCC2A;
  --ink:      #1F2937;
  --ink-2:    #374151;
  --muted:    #4B5563;
  --hero-dark:#123f3b;
  --foot-txt: #c9ddda;
  --foot-mut: #a9c7c3;
  --foot-soft:#cfe4e1;
  --white:    #ffffff;
  --paper:    #F5F8F7;   /* page ground: off-white with a teal tint (the 60%) */
  --danger:   #c0392b;

  --wrap: 100%;          /* full width; the gutter is the only side space */
  --gutter: clamp(12px, 1.6vw, 24px);   /* slim page edge padding, phone to desktop */
  --section-y: clamp(40px, 4.5vw, 64px);   /* space above and below each section */
  --wrap-narrow: 1080px;
  /* Radius rule: chips 6, controls 10, cards 12, photos and panels 16. Nothing else. */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 12px;
  --radius-media: 16px;
  --shadow-card: 0 16px 44px rgba(18, 78, 74, .10);
  --shadow-soft: 0 8px 26px rgba(18, 78, 74, .06);
  --shadow-rest: 0 1px 2px rgba(18, 78, 74, .05), 0 4px 14px rgba(18, 78, 74, .04);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font);
}

/* ---------- 2. Base ------------------------------------------------------ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01";
}
/* Fine grain over the whole page so flat fills don't look digital.
   Fixed + pointer-events:none, so it never repaints on scroll. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--teal-600); text-decoration: none; }
a:hover { color: var(--teal-900); }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
/* Focus ring: teal on light surfaces (4.9:1), yellow on dark ones. */
:focus-visible { outline: 3px solid var(--teal-600); outline-offset: 2px; border-radius: 4px; }
.hero :focus-visible, .banner :focus-visible, .site-header:not(.is-solid) :focus-visible,
.site-footer :focus-visible, .band-dark :focus-visible, .why-panel :focus-visible,
.mobile-bar :focus-visible, .bento > :nth-child(1) :focus-visible, .talk-card :focus-visible { outline-color: var(--yellow); }
::placeholder { color: #667573; }
h1, h2 { font-family: var(--font-display); letter-spacing: -.025em; }
::selection { background: var(--yellow); color: var(--teal-900); }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 120;
  background: var(--teal-900); color: var(--white); font-weight: 600;
  padding: 10px 16px; border-radius: var(--radius); transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; color: var(--white); }

.page { width: 100%; overflow-x: hidden; background: var(--paper); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section-80 { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section-sm { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 3. Header ---------------------------------------------------- */
/* Transparent over the hero, solid once scrolled or when the menu is open.
   The colour swap is driven by custom properties so the markup stays simple. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
  --hdr-brand: var(--white);
  --hdr-brand-sub: rgba(255, 255, 255, .72);
  --hdr-nav: var(--white);
  --hdr-nav-active: var(--teal-300);
  --hdr-nav-hover: rgba(255, 255, 255, .14);
  --hdr-phone: var(--white);
  --hdr-burger-bd: rgba(255, 255, 255, .4);
  --hdr-burger-bg: rgba(255, 255, 255, .10);
  --hdr-burger-fg: var(--white);
}
.site-header.is-solid {
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 22px rgba(18, 78, 74, .07);
  --hdr-brand: var(--teal-900);
  --hdr-brand-sub: var(--muted);
  --hdr-nav: var(--ink);
  --hdr-nav-active: var(--teal-900);
  --hdr-nav-hover: var(--teal-050);
  --hdr-phone: var(--teal-900);
  --hdr-burger-bd: var(--border);
  --hdr-burger-bg: var(--white);
  --hdr-burger-fg: var(--teal-900);
}


/* main bar */
.header-bar {
  max-width: var(--wrap); margin: 0 auto; padding: 18px var(--gutter);
  display: flex; align-items: center; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { width: 48px; height: 48px; border-radius: var(--radius); object-fit: cover; box-shadow: 0 2px 8px rgba(18, 78, 74, .18); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: var(--hdr-brand); transition: color .25s ease; }
.brand-sub { font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--hdr-brand-sub); transition: color .25s ease; }

.nav-main { display: flex; align-items: center; gap: 6px; margin-left: 12px; }
.nav-main a {
  font-weight: 500; font-size: 15px; color: var(--hdr-nav);
  padding: 8px 12px; border-radius: var(--radius);
  transition: background .15s, color .25s ease;
}
.nav-main a:hover { background: var(--hdr-nav-hover); color: var(--hdr-nav); }
.nav-main a[aria-current="page"] { font-weight: 600; color: var(--hdr-nav-active); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.header-actions .btn { gap: 8px; }
.header-phone { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--hdr-phone); transition: color .25s ease; }
.header-phone:hover { color: var(--hdr-phone); }

.nav-toggle {
  margin-left: auto; display: none;
  align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--radius);
  border: 1px solid var(--hdr-burger-bd);
  background: var(--hdr-burger-bg);
  color: var(--hdr-burger-fg);
  transition: all .2s;
}

/* mobile menu panel */
.nav-mobile {
  display: none;
  border-top: 1px solid var(--border); background: var(--white);
  padding: 12px 20px 20px; flex-direction: column; gap: 4px;
}
.site-header.is-open .nav-mobile { display: flex; }
.nav-mobile a { font-weight: 500; font-size: 17px; padding: 12px 8px; border-radius: var(--radius); color: var(--ink); }
.nav-mobile a[aria-current="page"] { font-weight: 600; color: var(--teal-900); }
.nav-mobile-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.nav-mobile-cta a { text-align: center; padding: 14px; font-size: 16px; font-weight: 600; }
.nav-mobile-cta .m-book { background: var(--teal-600); color: var(--white); }
.nav-mobile-cta .m-call { border: 1px solid var(--teal-600); color: var(--teal-900); }

/* ---------- 4. Buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 600; font-size: 16px; padding: 12px 20px;
  border-radius: var(--radius); min-height: 44px; border: none;
  transition: background .18s, color .18s, border-color .18s, transform .18s var(--ease), box-shadow .18s;
}
.btn:active, .doc-view:active, .doc-view-solid:active { transform: translateY(1px) scale(.98); }
.link-cta svg, .qa-more svg { transition: transform .25s var(--ease); }
.link-cta:hover svg, .card-hover:hover .link-cta svg, .post-card:hover .link-cta svg { transform: translateX(4px); }
.btn-primary { background: var(--teal-600); color: var(--white); box-shadow: 0 4px 14px rgba(40, 105, 99, .28); }
.btn-primary:hover { background: var(--teal-900); color: var(--white); }
.btn-outline { background: transparent; color: var(--teal-900); border: 1px solid var(--teal-600); }
.btn-outline:hover { background: var(--teal-050); color: var(--teal-900); }
.btn-light { background: var(--white); color: var(--teal-900); border: 1px solid var(--border); }
.btn-light:hover { background: var(--teal-050); color: var(--teal-900); }
.btn-yellow { background: var(--yellow); color: var(--teal-900); }
.btn-yellow:hover { background: #FFD65C; color: var(--teal-900); }
.btn-sm { font-size: 15px; padding: 13px 22px; gap: 8px; }
.btn-lg { padding: 15px 28px; }
.btn-primary.btn-lg { box-shadow: 0 10px 26px rgba(40, 105, 99, .28); }
.btn-hero { padding: 15px 26px; box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }
.btn-block { width: 100%; }

/* ---------- 5. Hero / page banner ---------------------------------------- */
.hero, .banner {
  position: relative; overflow: hidden;
  background: var(--hero-dark) url('../uploads/backgound.webp') center / cover no-repeat;
}
.hero-veil, .banner-veil { position: absolute; inset: 0; pointer-events: none; }
.hero-veil {
  background: linear-gradient(90deg, rgba(14,52,49,.82) 0%, rgba(14,52,49,.55) 42%, rgba(14,52,49,.12) 70%, transparent 100%);
}
.banner-veil {
  background: linear-gradient(90deg, rgba(14,52,49,.90) 0%, rgba(14,52,49,.74) 52%, rgba(14,52,49,.42) 100%);
}
.hero-in, .banner-in {
  max-width: var(--wrap); margin: 0 auto; padding: 116px var(--gutter) 0;
  position: relative;
}
.hero-in { display: flex; flex-wrap: wrap; gap: 52px; align-items: flex-end; }
.banner-in { display: flex; flex-direction: column; align-items: flex-start; }

.crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--foot-soft); margin-bottom: 22px; }
.crumb a { color: var(--foot-soft); }
.crumb a:hover { color: var(--teal-300); }
.crumb .sep { color: var(--teal-300); }
.crumb .here { color: var(--white); font-weight: 600; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .10); color: var(--white);
  font-weight: 600; font-size: 14px; padding: 8px 14px;
  border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, .18);
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-300); }

.banner h1, .hero h1 {
  font-weight: 800; font-size: clamp(36px, 5.6vw, 54px); line-height: 1.08;
  color: var(--white); margin: 18px 0 0; max-width: 760px; text-wrap: balance;
}
.hero h1 { font-size: clamp(38px, 6vw, 56px); line-height: 1.07; letter-spacing: -.03em; }
.accent { color: var(--teal-300); }
.banner p.lead, .hero p.lead {
  font-size: clamp(17px, 2.2vw, 18px); line-height: 1.65; color: var(--foot-soft);
  max-width: 600px; margin: 20px 0 0; text-wrap: pretty;
}

/* ---------- 6. Section headings ------------------------------------------ */
.eyebrow {
  display: inline-block; font-weight: 600; font-size: 14px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--teal-600);
  margin-bottom: 10px;
}
.section-title {
  font-weight: 800; font-size: clamp(30px, 4.6vw, 40px); line-height: 1.15;
  letter-spacing: -.02em; color: var(--teal-900); margin: 0; text-wrap: balance;
}
/* CTA bands in the dc source use a slightly smaller clamp */
.section-title.sm { font-size: clamp(28px, 4.4vw, 38px); }
.section-lead {
  font-size: 17px; line-height: 1.7; color: var(--muted);
  margin: 16px 0 0; max-width: 640px; text-wrap: pretty;
}
.center { text-align: center; }
.center .section-lead { margin-left: auto; margin-right: auto; }

/* ---------- 7. Cards and grids ------------------------------------------- */
.grid { display: grid; gap: 24px; }
.grid-200 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.grid-240 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.grid-260 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grid-280 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid-300 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

.card {
  background: var(--white); border: 1px solid transparent;
  border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-rest);
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.card-hover:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); border-color: var(--teal-300); }
.card h3 { font-size: 19px; font-weight: 700; color: var(--teal-900); margin: 14px 0 8px; }
.card p { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0; }

.icon-badge {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--radius);
  background: var(--teal-050); color: var(--teal-600);
}

.media-ph {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #eef5f4, #eef5f4 12px, #e6efee 12px, #e6efee 24px);
  color: var(--muted); font-family: ui-monospace, monospace; font-size: 13px;
}
.media-ph span { background: rgba(255, 255, 255, .85); padding: 8px 14px; border-radius: var(--radius); }

/* filter tabs (doctors, specialties, blog) */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.tab {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 9px 18px; border-radius: var(--radius-sm); font-weight: 600; font-size: 14px;
  background: var(--white); color: var(--muted); border: 1px solid transparent;
  transition: all .15s;
}
.tab:hover { border-color: var(--teal-300); color: var(--teal-900); }
.tab.is-active { background: var(--teal-600); color: var(--white); border-color: var(--teal-600); }

/* ---------- 8. Forms ----------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field > label { font-weight: 600; font-size: 14px; color: var(--ink); }
.input, .textarea, .select {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; font-size: 15px; color: var(--ink); background: var(--white);
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--teal-600); outline: none; box-shadow: 0 0 0 3px rgba(40, 105, 99,.12); }
.textarea { resize: vertical; line-height: 1.6; }
.consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.consent input { margin-top: 3px; flex-shrink: 0; }
.form-note { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.form-ok {
  margin-top: 16px; display: flex; align-items: center; gap: 10px;
  background: var(--teal-050); border: 1px solid #C9DDDA; border-radius: var(--radius);
  padding: 14px 16px; color: var(--teal-900); font-size: 15px; font-weight: 500;
}
.form-ok svg { flex-shrink: 0; }
[hidden] { display: none !important; }

/* ---------- 9. Notices --------------------------------------------------- */
.notice {
  border-radius: var(--radius); padding: 18px 20px;
  display: flex; align-items: flex-start; gap: 12px;
}
.notice p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.notice svg { flex-shrink: 0; margin-top: 1px; }
.notice-warn { background: #FFF8D9; border: 1px solid #f0e2ac; color: var(--muted); }
.notice-info { background: var(--teal-050); border: 1px solid #C9DDDA; color: var(--muted); }

/* ---------- 10. Footer --------------------------------------------------- */
.site-footer { background: var(--teal-600); color: var(--foot-txt); }
.footer-in { max-width: var(--wrap); margin: 0 auto; padding: 64px var(--gutter) 32px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 40px; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-brand img { width: 44px; height: 44px; border-radius: var(--radius); object-fit: cover; }
.footer-brand span { font-weight: 800; font-size: 20px; color: var(--white); }
.footer-about { font-size: 15px; line-height: 1.65; color: var(--foot-mut); margin: 0 0 16px; max-width: 280px; }
.footer-phone { color: var(--yellow); font-weight: 700; font-size: 19px; }
.footer-phone:hover { color: var(--yellow); }
.site-footer h4 {
  font-weight: 600; font-size: 15px; color: var(--white);
  margin: 0 0 16px; text-transform: uppercase; letter-spacing: .06em;
}
.footer-list { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.footer-list a, .footer-list span { color: var(--foot-txt); }
.footer-list a:hover { color: var(--white); }
.footer-contact { color: var(--foot-mut); }

.footer-emergency {
  margin-top: 40px; padding: 18px 20px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 204, 42, .55);
  border-radius: var(--radius); display: flex; align-items: flex-start; gap: 12px;
}
.footer-emergency p { margin: 0; font-size: 14px; line-height: 1.55; color: #f0e6bd; }
.footer-emergency svg { flex-shrink: 0; margin-top: 1px; }

.footer-strip {
  margin-top: 44px; padding-top: 36px; border-top: 1px solid rgba(255, 255, 255, .12);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 28px;
}
.footer-strip-item { display: flex; align-items: flex-start; gap: 12px; }
.footer-strip-icon {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--radius);
  background: rgba(255, 255, 255, .08); color: var(--teal-300); flex-shrink: 0;
}
.footer-strip-icon.is-emergency { background: rgba(255, 204, 42, .16); color: var(--yellow); }
.footer-strip-label { font-size: 13px; color: var(--foot-mut); margin-bottom: 3px; }
.footer-strip-value { font-weight: 600; font-size: 15px; color: var(--white); }
.footer-strip-value.is-phone { font-weight: 700; font-size: 17px; color: var(--yellow); }

.footer-bottom {
  margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
}
.footer-bottom > span { font-size: 14px; color: var(--foot-mut); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; }
.footer-legal a { color: var(--foot-mut); }
.footer-legal a:hover { color: var(--white); }

/* ---------- 11. WhatsApp float ------------------------------------------- */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  display: inline-flex; align-items: center; gap: 10px;
  background: #25D366; color: var(--white); font-weight: 600; font-size: 15px;
  padding: 12px 18px 12px 14px; border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  transition: background .18s;
}
.wa-float:hover { background: #1ebe5b; color: var(--white); }

/* ---------- 12. Article body (blog detail) ------------------------------- */
.article-body p { font-size: 17.5px; line-height: 1.8; color: var(--ink-2); margin: 0 0 22px; }
.article-body h2 { font-size: clamp(24px, 3.2vw, 30px); color: var(--teal-900); margin: 40px 0 14px; line-height: 1.25; }
.article-body h3 { font-family: var(--font); font-size: 20px; font-weight: 700; color: var(--teal-900); margin: 30px 0 10px; }
.article-body ul { margin: 0 0 22px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.article-body li { position: relative; padding-left: 32px; font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.article-body li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 10px; height: 10px; border-radius: 3px; background: var(--teal-300);
}
.article-body strong { color: var(--teal-900); }

/* ---------- 13. Bands, splits, timeline ---------------------------------- */
.band-light { background: var(--teal-050); }
.band-cream { background: var(--teal-025); }
.band-dark  { background: var(--teal-600); color: var(--white); }

.head-block { max-width: 640px; margin: 0 auto 48px; }
.eyebrow.on-dark { color: var(--foot-soft); }
.section-title.on-dark { color: var(--white); }
.band-dark .section-lead { color: var(--foot-txt); }

.split {
  padding: var(--section-y) var(--gutter);
  display: flex; flex-wrap: wrap; gap: 56px; align-items: center;
}
.split-media { flex: 1 1 380px; min-width: min(300px, 100%); position: relative; }
.split-body  { flex: 1 1 420px; min-width: min(300px, 100%); }
.split-body .section-lead { max-width: 560px; }
.split-body .btn { margin-top: 4px; }

.photo-ph {
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border);
  background: repeating-linear-gradient(135deg, var(--teal-050), var(--teal-050) 12px, #e0eeec 12px, #e0eeec 24px);
  display: flex; align-items: center; justify-content: center;
}
.photo-ph span {
  font-family: ui-monospace, monospace; font-size: 13px; color: var(--muted);
  background: rgba(255, 255, 255, .85); padding: 8px 14px; border-radius: var(--radius);
}
.photo-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-3x4 { aspect-ratio: 3 / 4; align-items: flex-end; padding: 14px; }
.ratio-16x8 { aspect-ratio: 16 / 8; }
.split.gap-48 { gap: 48px; }
.team-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; flex: 1 1 360px; }
.team-pair .offset { margin-top: 28px; }

.stat-badge {
  position: absolute; right: 18px; bottom: -22px;
  background: var(--teal-600); color: var(--white);
  border-radius: var(--radius-lg); padding: 18px 22px;
  box-shadow: 0 12px 30px rgba(18, 78, 74, .24);
}
.stat-badge-num { font-weight: 800; font-size: 24px; color: var(--teal-300); line-height: 1; }
.stat-badge-txt { font-size: 13px; font-weight: 500; margin-top: 5px; }

.tick-list { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tick-list li { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 17px; color: var(--ink); }
.tick {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius);
  background: var(--teal-050); color: var(--teal-600); flex-shrink: 0;
}

.grid-250 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.grid-320 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

.icon-badge.lg { width: 52px; height: 52px; border-radius: var(--radius-lg); margin-bottom: 18px; }

.mv-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 36px; box-shadow: 0 10px 28px rgba(18, 78, 74, .06);
}
.mv-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 23px; color: var(--teal-900); margin: 0 0 10px; }
.mv-card p { font-size: 16.5px; line-height: 1.7; color: var(--muted); margin: 0; }
.mv-icon {
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: var(--radius-lg);
  background: var(--teal-050); color: var(--teal-600); margin-bottom: 20px;
}
.mv-card.is-dark { background: var(--teal-600); border-color: var(--teal-600); box-shadow: 0 10px 28px rgba(18, 78, 74, .16); }
.mv-card.is-dark h3 { color: var(--white); }
.mv-card.is-dark p { color: var(--foot-soft); }
.mv-card.is-dark .mv-icon { background: rgba(127, 212, 202, .14); color: var(--teal-300); }

.value-card { border-radius: var(--radius-lg); padding: 28px; box-shadow: 0 1px 3px rgba(18,78,74,.05), 0 10px 28px rgba(18,78,74,.05); }
.value-card h3 { font-weight: 600; font-size: 20px; margin: 0 0 8px; }
.value-card p { font-size: 15px; line-height: 1.6; }

.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.timeline li { display: flex; gap: 24px; }
.tl-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.tl-dot {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--teal-600); color: var(--white); font-weight: 700; font-size: 15px;
}
.tl-dot.is-last { background: var(--teal-600); color: var(--white); }
.tl-line { flex: 1; width: 2px; background: var(--border); margin: 6px 0; }
.tl-body { padding-bottom: 36px; }
.tl-body.is-last { padding-bottom: 0; }
.tl-body h3 { font-weight: 700; font-size: 20px; color: var(--teal-900); margin: 4px 0 8px; }
.tl-body p { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0; max-width: 640px; }

.dark-card { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-lg); padding: 28px; }
.dark-card h3 { font-weight: 600; font-size: 20px; color: var(--white); margin: 0 0 8px; }
.dark-card p { font-size: 15px; line-height: 1.6; color: var(--foot-txt); margin: 0; }
.dark-icon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--radius-lg);
  background: rgba(127, 212, 202, .14); color: var(--teal-300); margin-bottom: 18px;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link-cta { display: inline-flex; align-items: center; gap: 8px; color: var(--teal-600); font-weight: 600; font-size: 15px; padding: 13px 8px; min-height: 44px; }
.link-cta:hover { color: var(--teal-900); }

/* ---------- 14. Specialties ---------------------------------------------- */
.quick-nav-wrap { transform: translateY(-40px); margin-bottom: -16px; }
.quick-nav {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 14px 40px rgba(18, 78, 74, .10); padding: 12px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 6px;
}
.quick-nav a { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius); color: var(--ink); }
.quick-nav a:hover { background: var(--teal-050); }
.quick-label { font-weight: 600; font-size: 14.5px; color: var(--teal-900); line-height: 1.25; }

.icon-badge.sm { width: 40px; height: 40px; border-radius: var(--radius); flex-shrink: 0; }
.eyebrow.with-icon { display: inline-flex; align-items: center; gap: 10px; letter-spacing: .06em; font-size: 14px; }
.eyebrow.with-icon .icon-badge { width: 38px; height: 38px; }

.spec-list { padding-top: var(--section-y); padding-bottom: 24px; display: flex; flex-direction: column; gap: var(--section-y); }
.spec-row { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; scroll-margin-top: 120px; }
.spec-row:nth-child(even) { flex-direction: row-reverse; }
.spec-media { flex: 1 1 380px; min-width: min(300px, 100%); }
.spec-body { flex: 1 1 420px; min-width: min(300px, 100%); }
.spec-body .section-title { font-size: clamp(26px, 3.6vw, 34px); line-height: 1.18; margin: 14px 0; }
.spec-body .section-lead { font-size: 17px; line-height: 1.75; max-width: none; margin: 0 0 22px; }

.tick-list.compact { gap: 12px; margin-bottom: 28px; }
.tick-list.compact li { gap: 12px; font-size: 16px; font-weight: 500; }
.tick.sm { width: 28px; height: 28px; border-radius: var(--radius); background: var(--teal-050); color: var(--teal-600); }

/* ---------- 14. Responsive ----------------------------------------------- */
@media (max-width: 1179px) {
  .header-phone { display: none; }
}
@media (max-width: 1023px) {
  .nav-main, .header-actions { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 1179px) {
  .hero-in, .banner-in { padding-top: 104px; }
  .hero-in { gap: 32px; }
  .split { gap: 40px; }
  .stat-badge { right: 12px; bottom: -18px; padding: 14px 18px; }
}

@media (max-width: 700px) {
  .footer-in { padding: 48px var(--gutter) 28px; }
  .wa-float { right: 14px; bottom: 14px; font-size: 14px; padding: 11px 15px 11px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 15. Homepage hero ------------------------------------------- */
.hero-copy { flex: 1 1 440px; min-width: min(300px, 100%); }
.hero-copy .lead { max-width: 500px; margin-top: 22px; }
.hero-copy h1 { margin-top: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; align-items: center; }

/* quick actions */
.quick-actions-wrap { transform: translateY(-36px); margin-bottom: -12px; }
.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 16px; max-width: 760px; margin-left: auto; }
.qa-card {
  display: flex; flex-direction: column; gap: 8px; padding: 20px;
  border-radius: var(--radius); background: var(--white);
  border: 1px solid var(--border); box-shadow: var(--shadow-soft);
  transition: transform .2s, box-shadow .2s;
}
.qa-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.qa-title { font-weight: 600; font-size: 17px; color: var(--teal-900); }
.qa-text { font-size: 13px; line-height: 1.5; color: var(--muted); }
.qa-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--teal-600); margin-top: 2px; }
.qa-card.is-primary { background: var(--teal-600); border-color: var(--teal-600); }
.qa-card.is-primary .qa-title, .qa-card.is-primary .qa-more { color: var(--white); }
.qa-card.is-primary .qa-text { color: #d7ece9; }
.icon-badge.on-teal { background: rgba(255, 255, 255, .16); color: var(--white); }

/* ---------- 16. Shared layout bits --------------------------------------- */
.head-split { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-end; justify-content: space-between; margin-bottom: 44px; }
.head-split-side { flex: 1 1 340px; max-width: 520px; }
.head-split-side .section-lead { margin-top: 0; }
.link-cta.inline { padding: 0; min-height: 0; font-size: 15px; margin-top: 12px; }
.center-link { justify-content: center; text-align: center; }
.center-tabs { justify-content: center; }
.listing { padding-top: 56px; padding-bottom: 40px; }
.listing.tight { padding-top: 44px; }
.listing-note { text-align: center; font-size: 14px; color: var(--muted); margin: 36px 0 0; }
.optional { font-weight: 400; color: var(--muted); }
.icon-badge.md { width: 46px; height: 46px; border-radius: var(--radius-lg); margin-bottom: 16px; }
.icon-badge.is-warm { background: var(--teal-050); color: var(--teal-600); }
.ph-label {
  font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted);
  background: rgba(255, 255, 255, .85); padding: 6px 12px; border-radius: var(--radius-sm);
}

/* ---------- 17. Doctor cards --------------------------------------------- */
.doc-card {
  background: var(--white); border: 1px solid transparent; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: 0 1px 3px rgba(18,78,74,.05), 0 10px 28px rgba(18,78,74,.05);
  display: flex; flex-direction: column;
}
.doc-photo, .post-photo, .featured-photo {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, var(--teal-050), var(--teal-050) 12px, #e0eeec 12px, #e0eeec 24px);
}
.doc-photo img, .post-photo img, .featured-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-photo { aspect-ratio: 1 / 1; }
.doc-tag {
  position: absolute; top: 12px; left: 12px;
  font-weight: 600; font-size: 12px; color: var(--teal-900);
  background: rgba(255, 255, 255, .92); padding: 5px 11px; border-radius: var(--radius-sm);
}
.doc-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.doc-body h3 { font-weight: 700; font-size: 20px; color: var(--teal-900); margin: 0 0 4px; }
.doc-qual { font-size: 14px; color: var(--muted); margin: 0 0 4px; }
.doc-reg { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.doc-hours {
  display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted);
  margin-bottom: 18px; padding-top: 14px; border-top: 1px solid var(--teal-050);
}
.doc-actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

/* ---------- 18. Post cards ----------------------------------------------- */
.post-card {
  display: flex; flex-direction: column; border: 1px solid transparent;
  border-radius: var(--radius-lg); overflow: hidden; background: var(--white); color: var(--ink);
  box-shadow: 0 1px 3px rgba(18,78,74,.05), 0 10px 28px rgba(18,78,74,.05);
  transition: transform .2s, box-shadow .2s;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); color: var(--ink); }
.post-photo { aspect-ratio: 16 / 10; }
.post-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.post-meta { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.post-body h3 { font-weight: 600; font-size: 19px; color: var(--teal-900); margin: 0 0 8px; line-height: 1.3; }
.post-body p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 14px; flex: 1; }
.post-byline { font-size: 12px; color: var(--muted); margin-bottom: 14px; padding-top: 12px; border-top: 1px solid var(--teal-050); }

.featured-wrap { padding-top: 56px; }
.featured {
  display: flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--white); color: var(--ink);
  box-shadow: 0 14px 40px rgba(18, 78, 74, .08); transition: box-shadow .2s;
}
.featured:hover { box-shadow: 0 20px 50px rgba(18, 78, 74, .14); color: var(--ink); }
.featured-photo { flex: 1 1 420px; min-width: min(280px, 100%); min-height: 300px; }
.featured-body { flex: 1 1 420px; min-width: min(280px, 100%); padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.featured-body h2 { font-weight: 800; font-size: clamp(24px, 3.2vw, 30px); line-height: 1.2; color: var(--teal-900); margin: 0 0 14px; }
.featured-body p { font-size: 16.5px; line-height: 1.7; color: var(--muted); margin: 0 0 20px; }

/* newsletter */
.newsletter-form { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 520px; margin: 28px auto 0; }
.newsletter-form input {
  flex: 1 1 260px; min-width: min(220px, 100%); border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--radius); padding: 14px 16px; font-size: 16px; min-height: 48px;
  background: rgba(255, 255, 255, .08); color: var(--white);
}
.newsletter-form input::placeholder { color: #9fbdb9; }
.newsletter-ok { font-size: 15px; color: var(--yellow); font-weight: 600; margin: 18px 0 0; }

/* ---------- 19. Diagnostics + patient ------------------------------------ */
.diag-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
.diag-item { display: flex; gap: 14px; align-items: flex-start; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.diag-title { font-weight: 700; font-size: 16px; color: var(--teal-900); margin-bottom: 4px; }
.diag-text { font-size: 14px; line-height: 1.55; color: var(--muted); }
.patient-warn { margin-top: 32px; }
.testimonial-empty {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--teal-025); border: 1px dashed #C9DDDA; border-radius: var(--radius-lg);
  padding: 40px 28px; text-align: center;
}
.testimonial-empty p { margin: 0; font-size: 16px; color: var(--muted); }

/* ---------- 20. Forms + contact ------------------------------------------ */
.form-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-card);
}
.form-grid { gap: 18px; margin-bottom: 4px; }
.appointment { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.appointment-copy { flex: 1 1 380px; min-width: min(300px, 100%); }
.appointment-form-col { flex: 1 1 420px; min-width: min(300px, 100%); }
.contact-split { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; padding-top: 24px; }
.contact-form-col { flex: 1 1 420px; min-width: min(300px, 100%); }
.contact-side { flex: 1 1 380px; min-width: min(300px, 100%); display: flex; flex-direction: column; gap: 20px; }
.grid-230 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

.info-wrap { transform: translateY(-44px); margin-bottom: -20px; }
.info-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 12px 34px rgba(18, 78, 74, .10); }
.info-title { font-weight: 700; font-size: 16px; color: var(--teal-900); margin-bottom: 6px; }
.info-text { font-size: 15px; line-height: 1.7; color: var(--muted); }
.info-text a { font-weight: 600; }

.map-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: 0 12px 34px rgba(18, 78, 74, .08); }
.map-frame iframe { width: 100%; height: 320px; border: 0; display: block; filter: grayscale(.85) sepia(.12) hue-rotate(130deg) saturate(1.4) contrast(.95); }

.talk-card { background: var(--teal-600); color: var(--white); border-radius: var(--radius-lg); padding: 26px; }
.talk-card h3 { font-weight: 700; font-size: 19px; color: var(--white); margin: 0 0 14px; }
.talk-row { display: flex; align-items: center; gap: 12px; color: var(--white); margin-bottom: 14px; }
.talk-row:last-child { margin-bottom: 0; }
.talk-row:hover { color: var(--yellow); }
.talk-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius); flex-shrink: 0; }
.talk-icon.is-yellow { background: rgba(255, 204, 42, .16); color: var(--yellow); }
.talk-icon.is-green { background: rgba(37, 211, 102, .18); color: #25D366; }
.talk-label { display: block; font-size: 13px; color: var(--foot-mut); }
.talk-value { font-weight: 700; font-size: 16px; }

.emergency-wrap { padding: 40px var(--gutter); }
.emergency-note {
  display: flex; align-items: flex-start; gap: 14px; background: var(--white);
  border: 1px solid #f0e2ac; border-left: 4px solid var(--yellow);
  border-radius: var(--radius); padding: 22px 24px;
}
.emergency-note svg { flex-shrink: 0; margin-top: 1px; }
.emergency-note p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.emergency-title { font-weight: 700; font-size: 16px; color: var(--teal-900); margin-bottom: 4px; }

.branch-list { display: flex; flex-direction: column; gap: 20px; }
.branch { display: flex; gap: 14px; align-items: flex-start; }
.branch .icon-badge { margin-bottom: 0; }
.branch-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 4px; }
.branch-name { font-weight: 700; font-size: 16px; color: var(--teal-900); }
.branch-tag { font-size: 12px; font-weight: 600; color: var(--white); background: var(--teal-600); padding: 3px 9px; border-radius: var(--radius-sm); }
.branch-tag.is-soft { background: var(--teal-050); color: var(--teal-600); }
.branch-text { font-size: 15px; line-height: 1.7; color: var(--muted); }
.about-photo { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
.about-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- 21. Blog detail ---------------------------------------------- */
.article-banner .banner-in.narrow { max-width: 840px; }
.banner-veil.is-strong { background: linear-gradient(90deg, rgba(14,52,49,.92) 0%, rgba(14,52,49,.80) 60%, rgba(14,52,49,.55) 100%); }
.tag-chip {
  display: inline-block; font-weight: 600; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--white); background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  padding: 6px 12px; border-radius: var(--radius-sm);
}
.article-banner h1 { font-size: clamp(30px, 4.8vw, 46px); line-height: 1.12; margin: 18px 0 0; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 24px; color: var(--foot-soft); font-size: 14.5px; }
.article-meta span { display: inline-flex; align-items: center; gap: 8px; }

.featured-img-wrap { transform: translateY(-40px); }
.featured-img-wrap .photo-ph { border-radius: var(--radius-lg); box-shadow: 0 18px 46px rgba(18, 78, 74, .14); }

.article-layout { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; padding-bottom: 72px; }
.article-layout .article-body { flex: 1 1 560px; min-width: min(300px, 100%); max-width: 720px; }
.article-side { flex: 1 1 280px; min-width: min(260px, 100%); position: sticky; top: 120px; display: flex; flex-direction: column; gap: 20px; }
.side-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; background: var(--white); box-shadow: var(--shadow-soft); }
.side-card h3 { font-weight: 700; font-size: 19px; color: var(--teal-900); margin: 0 0 8px; }
.side-card p { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0 0 16px; }
.side-card p:last-child { margin-bottom: 0; }
.reviewer { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.reviewer-avatar {
  width: 52px; height: 52px; border-radius: 50%; background: var(--teal-050);
  border: 1px solid var(--border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: var(--teal-600);
}
.reviewer-name { font-weight: 700; font-size: 16px; color: var(--teal-900); }
.reviewer-role { font-size: 13px; color: var(--muted); margin-top: 2px; }

.callout { background: var(--teal-050); border-left: 4px solid var(--teal-600); border-radius: var(--radius); padding: 22px 24px; margin: 32px 0; }
.callout p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--teal-900); font-weight: 500; }
.disclaimer { margin: 36px 0 0; }
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border); }
.share-label { font-weight: 600; font-size: 15px; color: var(--teal-900); }
.share-links { display: flex; gap: 10px; }
.share-links a {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: var(--radius); border: 1px solid var(--border); color: var(--teal-600); background: var(--white);
}
.share-links a:hover { background: var(--teal-050); border-color: var(--teal-300); color: var(--teal-900); }

@media (max-width: 1179px) {
  .quick-actions-wrap { transform: translateY(-20px); margin-bottom: -4px; }
  .quick-actions { margin-left: 0; max-width: none; }
  .article-side { position: static; }
  .featured-body { padding: 28px; }
}
.newsletter .section-lead { margin-left: auto; margin-right: auto; }

/* ---------- 22. Homepage-specific variants -------------------------------
   The homepage uses different card metrics from the inner pages. These values
   are transcribed from NMC Homepage.dc.html, not shared with About/Doctors. */

/* section backgrounds and padding, exactly as the dc source sets them */
.band-cream-home { background: var(--teal-025); }
.home-pad-80  { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.home-pad-88  { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.home-pad-svc { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.home-pad-top24 { padding-top: 0; padding-bottom: var(--section-y); }

/* service cards: icon 56/10, h3 21px/600, body 16px */
.svc-card .icon-badge { width: 56px; height: 56px; border-radius: var(--radius); margin-bottom: 18px; }
.svc-card h3 { font-weight: 600; font-size: 21px; color: var(--teal-900); margin: 0 0 8px; }
.svc-card p  { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; flex: 1; }
.svc-card { display: flex; flex-direction: column; border-radius: var(--radius); }

/* homepage doctor card: 8px radius, specialty chip in the body, no photo overlay */
.doc-card.is-home { border-radius: var(--radius); }
.doc-card.is-home .doc-photo { aspect-ratio: 1 / 1; }
.doc-chip {
  align-self: flex-start; font-weight: 600; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--teal-600); background: var(--teal-050);
  padding: 4px 10px; border-radius: var(--radius-sm); margin-bottom: 12px;
}
.doc-card.is-home .doc-reg { margin-bottom: 12px; }
.doc-card.is-home .doc-hours { padding-top: 0; border-top: none; margin-bottom: 18px; }
.doc-view {
  text-align: center; border: 1px solid var(--teal-600); color: var(--teal-900);
  font-weight: 600; font-size: 15px; padding: 11px; border-radius: var(--radius);
  min-height: 44px; display: flex; align-items: center; justify-content: center;
}
.doc-view:hover { background: var(--teal-050); color: var(--teal-900); }
.doc-book { text-align: center; color: var(--teal-600); font-weight: 600; font-size: 15px; }
/* Doctors.dc.html uses a filled View Profile; the homepage uses the outlined .doc-view */
.doc-view-solid {
  text-align: center; background: var(--teal-600); color: var(--white);
  font-weight: 600; font-size: 15px; padding: 12px; border-radius: var(--radius);
  min-height: 44px; display: flex; align-items: center; justify-content: center;
}
.doc-view-solid:hover { background: var(--teal-900); color: var(--white); }

/* appointment card uses an 8px radius on the homepage (contact.html keeps 16px) */
.form-card.is-home { border-radius: var(--radius); }

/* "not sure which department" helper block */
.dept-help { display: flex; align-items: flex-start; gap: 12px; margin-top: 24px; }
.dept-help-title { font-weight: 600; font-size: 16px; color: var(--teal-900); }
.dept-help-text { font-size: 15px; color: var(--muted); margin-top: 2px; }

/* trailing note beside a section CTA */
.section-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 36px; }
.section-foot .note { font-size: 14px; color: var(--muted); }
.split.pad-about { padding: 0 var(--gutter) var(--section-y); }
.split.pad-diag  { padding: var(--section-y) var(--gutter); }
.testimonial-box {
  max-width: 760px; margin: 0 auto; background: var(--white);
  border: 1px dashed #C9DDDA; border-radius: var(--radius-lg); padding: 40px 32px; text-align: center;
}
.testimonial-box svg { margin: 0 auto 18px; }
.testimonial-box p { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0; }
.section-foot { justify-content: flex-start; gap: 18px; margin-top: 32px; }
.section-foot .note { font-size: 13px; }
.testi-title { font-size: clamp(28px, 4.2vw, 36px); line-height: 1.2; }
/* two remaining heading clamps transcribed from the dc sources */
.section-title.nl      { font-size: clamp(26px, 4vw, 36px); }   /* Blog.dc.html newsletter */
.section-title.contact { font-size: clamp(28px, 4.2vw, 38px); } /* Contact.dc.html form heading */
/* Doctors.dc.html and Blog.dc.html use a slightly larger tab than the homepage */
.tab.lg { min-height: 42px; padding: 10px 20px; border-radius: var(--radius); }

/* ---------- 23. Gap + track utilities ------------------------------------
   Each value is transcribed from the matching grid in the .dc.html sources.
   Declared last so they win over the .grid default. */
.gap-16 { gap: 16px; }
.gap-18 { gap: 18px; }
.gap-20 { gap: 20px; }
.gap-22 { gap: 22px; }
.gap-24 { gap: 24px; }
/* listing grids use auto-fill so one filtered result keeps its card width */
.fill-280 { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.fill-300 { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }

/* ---------- 24. Visual system pass ---------------------------------------
   One accent rule (yellow = book, call, emergency), one radius rule, one ease.
   Each homepage section below uses its own layout family on purpose. */

.section-title { font-weight: 700; letter-spacing: -.03em; }
.banner h1, .hero h1 { font-weight: 700; letter-spacing: -.035em; }
.eyebrow:not(.with-icon)::before {
  content: ""; display: inline-block; width: 20px; height: 2px; margin-right: 10px;
  background: currentColor; vertical-align: middle; transform: translateY(-2px);
}
.header-phone, .footer-phone, .footer-strip-value, .info-v,
.branch-text, .talk-value { font-variant-numeric: tabular-nums; }

/* stacked section heading (replaces the split header) */
.head-stack { max-width: 680px; margin-bottom: 32px; }
.head-stack .section-lead { margin-top: 14px; }
.head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.head-row .head-stack, .head-row .tabs { margin-bottom: 0; }

/* hero */
.hero h1 { line-height: 1.1; }
.hero h1 em {
  font-style: italic; color: var(--teal-300); padding-bottom: 2px;
  background: linear-gradient(var(--teal-300), var(--teal-300)) 0 100% / 0 3px no-repeat;
}
.hero-copy { padding-bottom: 96px; }

/* info strip under the hero: live open status, emergency line, doctors */
.info-strip-wrap { position: relative; z-index: 2; margin-top: -48px; }
.info-strip {
  display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
  background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 18px 50px rgba(18, 78, 74, .12);
}
.info-item { display: flex; align-items: center; gap: 14px; padding: 22px 26px; color: var(--ink); transition: background .2s; }
.info-item + .info-item { border-left: 1px solid var(--border-2); }
a.info-item:hover { background: var(--teal-025); color: var(--ink); }
.info-k { display: block; font-size: 13px; color: var(--muted); margin-bottom: 2px; }
.info-v { display: block; font-weight: 700; font-size: 16px; color: var(--teal-900); }
.info-item .icon-badge { width: 44px; height: 44px; flex-shrink: 0; }
.info-item.is-emergency .icon-badge { background: var(--yellow); color: var(--teal-900); }
.status-dot { width: 10px; height: 10px; margin: 0 6px; border-radius: 50%; flex-shrink: 0; background: #9aa8a6; box-shadow: 0 0 0 5px rgba(154, 168, 166, .18); }
.status-dot.is-open { background: var(--teal-600); box-shadow: 0 0 0 5px rgba(40, 105, 99, .16); }

/* services: bento. Six cards fill six cells: 1 large, 2 stacked, 3 small. */
.bento { display: grid; gap: 18px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bento > * { grid-column: span 2; }
.bento > :nth-child(1) { grid-column: span 3; grid-row: span 2; }
.bento > :nth-child(2), .bento > :nth-child(3) { grid-column: span 3; }
.bento > :nth-child(1) {
  min-height: 360px; padding: 32px; justify-content: flex-end; color: var(--white);
  background: radial-gradient(90% 70% at 85% 10%, rgba(127, 212, 202, .28), transparent 60%), var(--teal-600);
}
.bento > :nth-child(1) h3 { color: var(--white); font-size: 28px; letter-spacing: -.02em; }
.bento > :nth-child(1) p { color: var(--foot-soft); flex: 0 0 auto; max-width: 40ch; }
.bento > :nth-child(1) .icon-badge { background: rgba(255, 255, 255, .14); color: var(--white); }
.bento > :nth-child(1) .link-cta { color: var(--white); }
.bento > :nth-child(2) { background: var(--teal-050); box-shadow: none; }
.svc-card .icon-badge { transition: background .25s var(--ease), color .25s var(--ease); }
.bento > :not(:first-child):hover .icon-badge { background: var(--teal-600); color: var(--white); }
@media (max-width: 960px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento > *, .bento > :nth-child(2), .bento > :nth-child(3) { grid-column: span 1; }
  .bento > :nth-child(1) { grid-column: 1 / -1; grid-row: auto; min-height: 340px; }
}
@media (max-width: 600px) { .bento { grid-template-columns: 1fr; } }

/* diagnostics: the path a sample takes, as a dashed journey line */
.band-light { --ring: var(--teal-050); }
.journey { list-style: none; margin: 0 0 32px; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.journey::before {
  content: ""; position: absolute; top: 28px; left: 28px; right: 14%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--teal-300) 0 8px, transparent 8px 16px);
}
.journey li { position: relative; }
.journey-icon {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 20px; border-radius: 50%;
  background: var(--white); color: var(--teal-600);
  box-shadow: 0 0 0 8px var(--ring, var(--paper)), var(--shadow-soft);
}
.journey li:last-child .journey-icon { background: var(--teal-600); color: var(--white); }
.journey h3 { font-size: 18px; font-weight: 700; color: var(--teal-900); margin: 0 0 6px; }
.journey p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 28ch; }
@media (min-width: 601px) and (max-width: 900px) {
  /* tablets: a 2 x 2 grid reads better than a long thin line */
  .journey { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .journey::before { display: none; }
}
@media (max-width: 600px) {
  .journey { grid-template-columns: 1fr; gap: 26px; }
  .journey::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, var(--teal-300) 0 8px, transparent 8px 16px); }
  .journey li { display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; }
  .journey-icon { grid-row: span 2; margin: 0; }
}

/* doctors: portrait ratio and a branded fallback until photos arrive */
.doc-photo { aspect-ratio: 4 / 5; }
.doc-card.is-home .doc-photo { aspect-ratio: 4 / 5; }
.doc-photo:not(:has(img)) { background: radial-gradient(120% 90% at 30% 10%, #3a8f87 0%, var(--teal-600) 72%); }
.doc-photo:not(:has(img)) .ph-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.doc-photo:not(:has(img))::before {
  content: ""; width: 34%; aspect-ratio: 1; background: rgba(255, 255, 255, .16);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.doc-card .doc-tag { color: var(--teal-900); }

/* geometric lattice, a nod to dhaka weave. Used on two surfaces only. */
.lattice { position: relative; isolation: isolate; overflow: hidden; }
.lattice::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(45deg, var(--lattice, rgba(40, 105, 99, .09)) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, var(--lattice, rgba(40, 105, 99, .09)) 0 1px, transparent 1px 22px);
  -webkit-mask-image: radial-gradient(circle at 0% 0%, #000, transparent 60%);
          mask-image: radial-gradient(circle at 0% 0%, #000, transparent 60%);
}

/* why NMC: an inset deep-teal panel instead of a full-bleed theme flip */
.why-panel {
  --lattice: rgba(127, 212, 202, .10);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start;
  background: var(--teal-600); color: var(--white); border-radius: var(--radius-media); padding: clamp(32px, 4vw, 56px) clamp(22px, 4vw, 56px);
}
.why-panel .section-lead { color: var(--foot-txt); }
.why-list { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 40px; }
.why-item { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); }
.why-item svg { display: block; color: var(--teal-300); margin-bottom: 14px; }
.why-item h3 { font-size: 19px; font-weight: 650; color: var(--white); margin: 0 0 6px; }
.why-item p { font-size: 15px; line-height: 1.6; color: var(--foot-txt); margin: 0; }
@media (max-width: 900px) { .why-panel { grid-template-columns: 1fr; gap: 28px; padding: 32px 22px; border-radius: var(--radius-lg); } }
@media (max-width: 560px) { .why-list { grid-template-columns: 1fr; } }

/* The remaining dark bands (about, blog newsletter) become inset panels too,
   so no page flips theme in the middle of a scroll. */
section.band-dark {
  --lattice: rgba(127, 212, 202, .10);
  width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: 32px auto 0;
  border-radius: var(--radius-media);
}
@media (max-width: 900px) { section.band-dark { border-radius: var(--radius-lg); } }

/* bento: keep every row full when the CMS returns fewer than six services */
.bento:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; }
.bento:has(> :nth-child(4):last-child) > :nth-child(4) { grid-column: 1 / -1; }
.bento:has(> :nth-child(2):last-child) > * { grid-column: span 3; grid-row: auto; }
.bento:has(> :only-child) > * { grid-column: 1 / -1; }
@media (max-width: 960px) {
  /* two columns: card 1 full width, the rest pair up; an even total would strand
     the last card, so it goes full width. !important beats the desktop :has() rules. */
  .bento > * { grid-column: span 1 !important; grid-row: auto !important; }
  .bento > :first-child, .bento > :last-child:nth-child(even) { grid-column: 1 / -1 !important; }
}
@media (max-width: 600px) { .bento > * { grid-column: 1 / -1 !important; } }

/* forms: inline error state after the visitor has interacted, and a busy submit */
.input:user-invalid, .textarea:user-invalid, .select:user-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(192, 57, 43, .12); }
.btn[disabled] { opacity: .65; cursor: progress; transform: none; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23286963' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 14px center / 16px no-repeat;
}

/* current page in the main nav: a short underline, not colour alone */
.nav-main a[aria-current="page"] { box-shadow: inset 0 -2px 0 currentColor; border-radius: var(--radius) var(--radius) 0 0; }

@media print {
  body::after, .mobile-bar, .wa-float, .skip-link { display: none !important; }
  .reveal { opacity: 1 !important; translate: none !important; }
}

/* appointment band */
.appt-band { background: var(--teal-050); }

/* before your visit: a printable-feeling checklist sheet */
.patient-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
.patient-grid .head-stack { margin-bottom: 28px; }
.checklist { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-rest); }
.check-item { display: flex; gap: 16px; padding: 24px 26px; }
.check-item:nth-child(odd) { border-right: 1px dashed var(--border); }
.check-item:nth-child(-n+2) { border-bottom: 1px dashed var(--border); }
.check-item .icon-badge { flex-shrink: 0; }
.check-item h3 { font-size: 17px; font-weight: 700; color: var(--teal-900); margin: 2px 0 6px; }
.check-item p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }
@media (max-width: 960px) { .patient-grid { grid-template-columns: 1fr; gap: 8px; } }
@media (max-width: 680px) {
  .checklist { grid-template-columns: 1fr; }
  .check-item:nth-child(odd) { border-right: 0; }
  .check-item:not(:last-child) { border-bottom: 1px dashed var(--border); }
}

/* mobile action bar: call, chat, book always within thumb reach */
.mobile-bar { display: none; }
@media (max-width: 760px) {
  .mobile-bar {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 80;
    display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 6px; padding: 6px;
    background: rgba(40, 105, 99, .97); border-radius: var(--radius-lg);
    box-shadow: 0 14px 40px rgba(18, 78, 74, .35);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .mobile-bar a {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
    border-radius: var(--radius); color: var(--white); font-weight: 600; font-size: 15px;
  }
  .mobile-bar a:active { transform: scale(.97); }
  .mobile-bar .is-book { background: var(--yellow); color: var(--teal-900); }
  .wa-float { display: none; }
  .site-footer { padding-bottom: 76px; }
}

@media (max-width: 600px) {
  .info-strip { grid-template-columns: 1fr; }
  .info-item + .info-item { border-left: 0; border-top: 1px solid var(--border-2); }
  .info-strip-wrap { margin-top: -28px; }
}

/* motion: calm, once, never bouncy. JS only adds .reveal when motion is allowed. */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0; translate: 0 18px;
    transition: opacity .7s var(--ease), translate .7s var(--ease), transform .2s, box-shadow .2s, background .2s;
    transition-delay: calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), 0s, 0s, 0s;
  }
  .reveal.is-in { opacity: 1; translate: 0 0; }

  .hero-copy > * { animation: rise .8s var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .hero-copy > :nth-child(4) { animation-delay: .24s; }
  .hero h1 em { animation: underline 1s .7s var(--ease) forwards; }
}
@media (prefers-reduced-motion: reduce) { .hero h1 em { background-size: 100% 3px; } }
@keyframes rise { from { opacity: 0; translate: 0 16px; } }
@keyframes fade { from { opacity: 0; translate: 0 24px; } }
@keyframes underline { to { background-size: 100% 3px; } }

/* header phone icon follows the header state instead of a fixed teal stroke */
.header-phone svg { stroke: var(--teal-300); transition: stroke .25s ease; }
.site-header.is-solid .header-phone svg { stroke: var(--teal-600); }
section.band-dark:has(+ .site-footer) { margin-bottom: 72px; }

/* hero and banners size to their content now (no min-height); bottom padding
   leaves room for the cards that overlap the banner edge on inner pages. */
.banner-in { padding-bottom: 96px; }
@media (max-width: 700px) { .banner-in { padding-bottom: 72px; } .hero-copy { padding-bottom: 72px; } }

/* ---------- 25. Surfaces and responsive grids ----------------------------
   Resting cards are flat: a hairline edge, no drop shadow, no hover lift.
   Shadows are kept only for things that float over another surface
   (info strip, quick nav, contact info cards, the form, badges, mobile bar). */
:root { --line: rgba(18, 78, 74, .13); --line-strong: rgba(18, 78, 74, .32); }

.card, .doc-card, .post-card, .value-card, .mv-card, .side-card, .diag-item,
.checklist, .featured, .map-frame {
  box-shadow: none; border: 1px solid var(--line);
}
.mv-card.is-dark { border-color: var(--teal-900); }
.bento > :nth-child(1) { border-color: transparent; }
.bento > :nth-child(2) { border-color: rgba(40, 105, 99, .10); }
.card-hover:hover, .post-card:hover, .featured:hover {
  transform: none; box-shadow: none; border-color: var(--line-strong);
}
.post-card:hover .post-photo img { transform: scale(1.03); }
.post-photo img { transition: transform .5s var(--ease); }
.doc-card .doc-body { border-top: 1px solid var(--line); }
.form-card { box-shadow: 0 1px 2px rgba(18, 78, 74, .05), 0 12px 32px rgba(18, 78, 74, .07); border-color: var(--line); }
.icon-badge { border-radius: var(--radius); }

/* homepage doctors: 4 across on desktop, 2 on tablets, swipe row on phones */
[data-cms-home-doctor-list] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { [data-cms-home-doctor-list] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* portrait photos only where cards are narrow enough for them */
@media (max-width: 1100px) { .doc-photo, .doc-card.is-home .doc-photo { aspect-ratio: 1 / 1; } }
@media (max-width: 640px) {
  [data-cms-home-doctor-list] {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 12px;
    scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  [data-cms-home-doctor-list]::-webkit-scrollbar { display: none; }
  [data-cms-home-doctor-list] > * { scroll-snap-align: start; }
}

/* doctors page: 3 across (6 doctors = 2 full rows), 2 on tablets, 1 on phones */
[data-cms-doctor-list] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { [data-cms-doctor-list] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { [data-cms-doctor-list] { grid-template-columns: 1fr; } }

/* phones: shorter doctor photos and compact service rows */
@media (max-width: 640px) {
  .doc-photo, .doc-card.is-home .doc-photo { aspect-ratio: 4 / 3; }
  [data-cms-home-doctor-list] .doc-photo { aspect-ratio: 1 / 1; }
}
@media (max-width: 600px) {
  .bento { gap: 12px; }
  .bento > :nth-child(1) { min-height: 0; padding: 28px 24px; }
  .bento > :nth-child(1) h3 { font-size: 24px; }
  .bento > :not(:first-child) {
    display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; align-items: start; padding: 20px;
  }
  .bento > :not(:first-child) .icon-badge { grid-row: span 3; width: 44px; height: 44px; margin: 0; }
  .bento > :not(:first-child) h3 { margin: 0 0 4px; font-size: 18px; }
  .bento > :not(:first-child) p { margin: 0 0 10px; font-size: 15px; }
}

/* very wide screens: keep reading measure sane while the layout goes full width */
@media (min-width: 1600px) {
  .head-stack { max-width: 760px; }
  .hero h1, .banner h1 { font-size: 64px; }
}

/* phones: compact contact cards (icon beside text) and a 2-column specialty menu */
@media (max-width: 600px) {
  .info-card { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start; padding: 16px 18px; }
  .info-card .icon-badge { grid-row: span 2; width: 44px; height: 44px; margin: 0; }
  .info-card .info-title { margin: 2px 0 2px; }
  .quick-nav { grid-template-columns: 1fr 1fr; padding: 8px; gap: 4px; }
  .quick-nav a { padding: 10px; gap: 10px; }
  .quick-nav .icon-badge.sm { width: 34px; height: 34px; }
  .quick-label { font-size: 13.5px; }
}
/* doctors page cards are wider (3 across), so square photos keep rows short */
[data-cms-doctor-list] .doc-photo { aspect-ratio: 1 / 1; }
@media (max-width: 640px) { [data-cms-doctor-list] .doc-photo { aspect-ratio: 4 / 3; } }

/* Light text on brand-teal surfaces, lifted so it clears 4.5:1 against #286963.
   (The old greys were tuned for the darker #124E4A.) */
.site-footer, .band-dark, .why-panel, .talk-card, .mv-card.is-dark, .bento > :nth-child(1) {
  --foot-txt: #E6F1EF;  /* 5.53:1 */
  --foot-mut: #D3E6E3;  /* 4.92:1 */
}
.footer-strip-value.is-phone { font-size: 19px; }  /* yellow on brand teal: large text only (4.23:1) */

/* Header on brand teal once it turns solid (scroll or open menu). Nav text stays
   white; the current page is marked by its underline. Book button goes yellow,
   the same "act now" colour as the hero button, so it never blends into the bar. */
.site-header.is-solid {
  background: rgba(40, 105, 99, .97); border-bottom-color: rgba(255, 255, 255, .10);
  box-shadow: 0 6px 22px rgba(18, 78, 74, .18);
  --hdr-brand: var(--white); --hdr-brand-sub: rgba(255, 255, 255, .75);
  --hdr-nav: var(--white); --hdr-nav-active: var(--white); --hdr-nav-hover: rgba(255, 255, 255, .12);
  --hdr-phone: var(--white); --hdr-burger-bd: rgba(255, 255, 255, .35);
  --hdr-burger-bg: rgba(255, 255, 255, .08); --hdr-burger-fg: var(--white);
}
.site-header.is-solid .header-phone svg { stroke: var(--teal-300); }
.site-header.is-solid :focus-visible { outline-color: var(--yellow); }
.header-actions .btn-primary { background: var(--yellow); color: var(--teal-900); box-shadow: none; }
.header-actions .btn-primary:hover { background: #FFD65C; color: var(--teal-900); }

/* ---------- 26. Branch picker -------------------------------------------
   Each branch is a selectable card; the selected one gets a teal edge and
   moves the map. Phone links sit outside the button (no nested controls). */
.branch-list[data-branch-list] { display: grid; gap: 12px; }
.branch-extra { margin-top: 24px; }
.branch-item {
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.branch-item:hover { border-color: var(--line-strong); }
.branch-item.is-active { border-color: var(--teal-600); box-shadow: inset 4px 0 0 var(--teal-600); }
.branch-select {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 16px 18px;
  background: none; border: 0; border-radius: var(--radius-lg); text-align: left;
  font: inherit; color: inherit; cursor: pointer;
}
.branch-select .icon-badge { margin: 0; flex-shrink: 0; transition: background .2s, color .2s; }
.branch-item.is-active .icon-badge { background: var(--teal-600); color: var(--white); }
.branch-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.branch-body .branch-text { font-size: 15px; line-height: 1.55; color: var(--muted); }
.branch-cta { font-size: 13px; font-weight: 600; color: var(--teal-600); margin-top: 2px; }
.branch-item.is-active .branch-cta { color: var(--teal-900); }
.branch-meta {
  display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 0 18px 14px 76px;
  font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.branch-meta a { font-weight: 600; }
.map-caption { margin: 0 0 -8px; font-size: 14px; font-weight: 600; color: var(--teal-900); }
.side-title { margin: 0 0 -6px; font-size: 18px; font-weight: 700; color: var(--teal-900); }
@media (max-width: 600px) {
  .branch-select { padding: 14px; gap: 12px; }
  .branch-meta { padding: 0 14px 12px 70px; }
}