/* ==========================================================================
   Medellín Regenerative Medicine
   Brand: deep navy + green accent + off-white. Editorial, concierge,
   restrained, lots of whitespace. Inter across everything.
   ========================================================================== */

/* ----- Custom properties ----- */
:root {
  --navy: #0d1a30;
  --navy-soft: #15294f;
  --navy-line: #1f3b76;
  --green: #008c3b;
  --green-light: #00b34d;
  --cream: #faf8f4;
  --cream-warm: #f3ede1;
  --white: #ffffff;
  --ink: #1d2535;
  --ink-soft: rgba(13, 26, 48, 0.74);
  --ink-mute: rgba(13, 26, 48, 0.56);
  --border: #e6e0d4;
  --border-soft: #efeae0;

  --max: 1180px;
  --max-narrow: 760px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 3px rgba(13, 26, 48, 0.06), 0 1px 2px rgba(13, 26, 48, 0.04);
  --shadow-md: 0 10px 30px rgba(13, 26, 48, 0.08), 0 3px 8px rgba(13, 26, 48, 0.05);
  --shadow-lg: 0 24px 60px rgba(13, 26, 48, 0.16);

  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x clip: the mobile nav is an off-canvas drawer parked at
   translateX(100%); without this it adds horizontal scroll on phones. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy-line); }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ----- Skip link ----- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--white);
  padding: 12px 20px;
  z-index: 200;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ----- Layout ----- */
.container { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: var(--max-narrow); margin: 0 auto; padding: 0 28px; }
.section { padding: 88px 0; }
.section-tight { padding: 56px 0; }
.section-cream { background: var(--cream-warm); }
.section-navy {
  background: linear-gradient(165deg, var(--navy) 0%, var(--navy-soft) 60%, var(--navy) 100%);
  color: rgba(255, 255, 255, 0.86);
}
.section-navy h1, .section-navy h2, .section-navy h3 { color: var(--white); }
.section-navy a:not(.btn) { color: var(--green-light); }

/* ----- Typography ----- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy);
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
h4 { font-size: 1.08rem; font-weight: 600; }
p { margin-bottom: 1rem; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 14px;
}
.lede { font-size: 1.18rem; color: var(--ink-soft); line-height: 1.65; }
.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
/* Give the eyebrow → title → description stack room to breathe. */
.section-head .eyebrow-micro, .section-head .eyebrow { margin-bottom: 20px; }
.section-head h2, .section-head .display-light { margin-bottom: 22px; }
.section-head .lede, .section-head .patient-story__quote { margin-top: 0; }
.accent { color: var(--green); }
.section-navy .accent { color: var(--green); }
.section-navy .eyebrow { color: var(--green); }
.section-navy .lede { color: rgba(255, 255, 255, 0.78); }

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn-lg { padding: 17px 36px; font-size: 1rem; }
.btn-primary {
  background: var(--green);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(0, 140, 59, 0.32);
}
.btn-primary:hover { background: var(--green-light); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 140, 59, 0.4); }
.btn-ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-ghost:hover { background: var(--navy); color: var(--white); }
.section-navy .btn-ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.5); }
.section-navy .btn-ghost:hover { background: var(--white); color: var(--navy); }

/* ----- Header ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 16px 28px;
  max-width: var(--max);
  margin: 0 auto;
}
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-mark { height: 44px; width: auto; flex: 0 0 auto; display: block; }
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-name { font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; color: var(--navy); }
.logo-place {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--green);
}
.nav-list { display: flex; align-items: center; gap: 30px; }
.nav-link {
  font-size: 0.95rem; font-weight: 500; color: var(--ink-soft);
  text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
  transition: color 140ms ease;
}
.nav-link:hover { color: var(--navy); }
.caret { width: 14px; height: 14px; opacity: 0.7; }
.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: -16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 8px;
  min-width: 240px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown a {
  display: block; padding: 10px 14px; border-radius: 8px;
  font-size: 0.92rem; color: var(--ink-soft); text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}
.dropdown a:hover { background: var(--cream-warm); color: var(--navy); }
.nav-cta { margin-left: 6px; }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 0;
  padding: 8px;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: var(--navy);
  border-radius: 2px; transition: transform 220ms ease, opacity 200ms ease;
}

/* ----- Hero ----- */
.hero {
  background: var(--navy) center / cover no-repeat;
  color: rgba(255, 255, 255, 0.85);
  padding: 96px 0 104px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  /* Single uniform dark overlay. Image becomes texture, text becomes readable.
     No gradients, no per-side conditions — same darkening across the whole
     hero area regardless of which part of the image is brightest. */
  background: rgba(13, 26, 48, 0.78);
}
/* Homepage hero uses the warm team photo — lighten the overlay ~30% so the
   faces read through, while white headline text stays legible. */
.page-home .hero::before { background: rgba(13, 26, 48, 0.55); }
.hero-inner { position: relative; z-index: 1; max-width: 720px; }
.hero .container { margin: 0; padding-left: clamp(24px, 5vw, 64px); }
.hero .btn-ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.55); }
.hero .btn-ghost:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
.hero h1 { color: var(--white); margin-bottom: 22px; }
.hero .eyebrow { color: var(--green); }
.hero-lede { font-size: 1.22rem; color: rgba(255, 255, 255, 0.82); margin-bottom: 32px; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-photo { margin-top: 56px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-photo img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }

/* ----- Trust strip ----- */
.trust-strip { background: var(--white); border-bottom: 1px solid var(--border-soft); }
.trust-strip-inner {
  display: flex; flex-wrap: wrap; gap: 14px 36px; justify-content: center;
  padding: 26px 28px; max-width: var(--max); margin: 0 auto;
}
.trust-item {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.9rem; font-weight: 500; color: var(--ink-soft);
}
.trust-item svg { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; }

/* ----- Stat row ----- */
.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  text-align: center; margin-top: 8px;
}
.stat-item .stat-num {
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 600;
  color: var(--navy); line-height: 1;
}
.section-navy .stat-item .stat-num { color: var(--white); }
.stat-item .stat-label { font-size: 0.92rem; color: var(--ink-mute); margin-top: 6px; }
.section-navy .stat-item .stat-label { color: rgba(255, 255, 255, 0.62); }

/* ----- Cards: Areas We Help ----- */
.areas-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px;
}
.area-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  text-decoration: none;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.area-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--green); }
.area-card .area-icon {
  width: 46px; height: 46px; color: var(--green); margin-bottom: 18px;
}
.area-card h3 { margin-bottom: 8px; }
.area-card p { color: var(--ink-soft); font-size: 0.97rem; margin-bottom: 18px; }
.area-card .area-link {
  margin-top: auto; font-weight: 600; font-size: 0.92rem; color: var(--green);
}

/* ----- Generic feature grid ----- */
.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px;
}
.feature {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
}
.feature h3 { margin-bottom: 10px; }
.feature p { color: var(--ink-soft); font-size: 0.97rem; margin-bottom: 0; }
.feature .feature-icon { width: 40px; height: 40px; color: var(--green); margin-bottom: 16px; }

/* ----- Steps (How the consultation works) ----- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; counter-reset: step; }
.step { position: relative; padding-top: 20px; }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: 2.4rem; font-weight: 500; color: var(--green);
  display: block; margin-bottom: 10px; line-height: 1;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--ink-soft); font-size: 0.96rem; margin-bottom: 0; }
.section-navy .step p { color: rgba(255, 255, 255, 0.76); }

/* ----- Split (image + text) ----- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split.flip .split-media { order: 2; }

/* ----- Prose (condition pages, legal pages) ----- */
.prose { max-width: 840px; margin: 0; }
.prose .team-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.prose .team-grid--2x2 { grid-template-columns: repeat(2, 1fr); }
.prose h2 { margin: 44px 0 14px; }
.prose h3 { margin: 32px 0 10px; }
.prose p { color: var(--ink-soft); margin-bottom: 16px; }
.prose ul.bullets { margin: 0 0 20px; padding-left: 0; }
.prose ul.bullets li {
  position: relative; padding-left: 30px; margin-bottom: 10px; color: var(--ink-soft);
}
.prose ul.bullets li::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
}
.prose ol.steps-list { margin: 0 0 20px; padding-left: 24px; color: var(--ink-soft); }
.prose ol.steps-list li { margin-bottom: 10px; }
.prose ol.steps-list li::marker { color: var(--green); font-weight: 700; }

/* ----- Callout / reassurance block ----- */
.callout {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 28px 32px;
  margin: 32px 0;
  box-shadow: var(--shadow-sm);
}
.callout h3 { margin-bottom: 8px; }
.callout p { color: var(--ink-soft); margin-bottom: 0; }
.callout p + p { margin-top: 14px; }

/* ----- Testimonials (experience-based only) ----- */
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.testi-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
}
.testi-card .quote {
  font-family: var(--font-display); font-size: 1.12rem; font-style: italic;
  color: var(--navy); line-height: 1.55; margin-bottom: 16px;
}
.testi-card .quote::before { content: "\201C"; color: var(--green); }
.testi-card .quote::after { content: "\201D"; color: var(--green); }
.testi-card .attribution { font-size: 0.88rem; color: var(--ink-mute); font-weight: 600; }

/* ----- FAQ ----- */
.faq { max-width: var(--max-narrow); margin: 0 auto; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq-item summary {
  list-style: none; cursor: pointer; padding: 22px 26px;
  font-family: var(--font-display); font-size: 1.1rem; color: var(--navy);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-family: var(--font-body); font-size: 1.5rem;
  color: var(--green); flex-shrink: 0; line-height: 1;
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item[open] summary { color: var(--green); }
.faq-body { padding: 0 26px 24px; color: var(--ink-soft); }
.faq-body p:last-child { margin-bottom: 0; }

/* ----- Contact form ----- */
.contact-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: start; }
.lead-form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 38px 36px;
  box-shadow: var(--shadow-md);
}
.form-field { margin-bottom: 20px; }
.form-field label {
  display: block; font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: 8px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: var(--font-body); font-size: 1rem;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--cream);
  color: var(--ink);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0, 140, 59, 0.16);
}
.form-field textarea { min-height: 110px; resize: vertical; }
.form-row { display: flex; gap: 12px; }
.form-row .cc-select { flex: 0 0 116px; }
.form-row .phone-input { flex: 1; }
.form-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.86rem; color: var(--ink-mute); margin-bottom: 22px; }
.form-consent input { width: auto; margin-top: 3px; flex-shrink: 0; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form .btn { width: 100%; }
.contact-alt { margin-top: 28px; }
.contact-alt .alt-row {
  display: flex; align-items: center; gap: 12px; padding: 14px 0;
  border-top: 1px solid var(--border-soft); color: var(--ink-soft); font-size: 0.96rem;
}
.contact-alt .alt-row svg { width: 20px; height: 20px; color: var(--green); flex-shrink: 0; }
.contact-alt .alt-row a { color: var(--navy); font-weight: 600; text-decoration: none; }
.contact-form-col h2,
.contact-side h2 { margin-top: 0; margin-bottom: 12px; }
.form-intro { color: var(--ink-soft); margin-bottom: 26px; }
.contact-side p { color: var(--ink-soft); margin-bottom: 16px; }
.contact-side .callout { margin: 22px 0 0; }

/* ----- Final CTA band ----- */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 14px; }
.cta-band p { color: rgba(255, 255, 255, 0.78); max-width: 540px; margin: 0 auto 28px; }

/* ----- WhatsApp float ----- */
.whatsapp-float {
  position: fixed; bottom: 24px; right: 24px;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  z-index: 99; box-shadow: 0 6px 18px rgba(37, 211, 102, 0.36), 0 2px 6px rgba(0,0,0,0.18);
  transition: transform 180ms ease;
}
.whatsapp-float:hover { transform: scale(1.06); }
.whatsapp-float svg { width: 28px; height: 28px; }

/* ----- Footer ----- */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, 0.66); }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 40px;
  padding: 72px 28px 48px;
}
.footer-brand .logo-footer { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; }
/* Footer sits on navy — the wordmark must be light, not the navy used in the header. */
.site-footer .logo-name { color: #fff; }
.site-footer .logo-place { color: rgba(255, 255, 255, 0.55); }
.footer-about { font-size: 0.92rem; color: rgba(255, 255, 255, 0.6); line-height: 1.65; max-width: 320px; margin-bottom: 18px; }
.social-row { display: flex; gap: 18px; }
.social-row a { font-size: 0.86rem; color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.social-row a:hover { color: var(--green); }
.footer-h {
  font-family: var(--font-body); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--green);
  margin-bottom: 16px;
}
.footer-col li { margin-bottom: 9px; font-size: 0.92rem; }
.footer-col a { color: rgba(255, 255, 255, 0.66); text-decoration: none; }
.footer-col a:hover { color: var(--green); }
.footer-bar { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 22px 0 28px; }
.footer-bar-inner {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; max-width: var(--max); margin: 0 auto; padding: 0 28px;
}
.footer-bar-inner p { font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); margin: 0; }
.footer-meta { display: flex; gap: 20px; }
.footer-meta a { font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); text-decoration: none; }
.footer-meta a:hover { color: var(--green); }
.footer-sisters {
  max-width: var(--max); margin: 14px auto 0; padding: 0 28px;
  font-size: 0.78rem; color: rgba(255, 255, 255, 0.4);
}

/* ----- Misc utilities ----- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.cta-inline { margin-top: 28px; }
.cta-supporting { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 18px; }
.cta-cluster { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ----- Responsive ----- */
@media (max-width: 900px) {
  .split, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .split.flip .split-media { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .section { padding: 60px 0; }
  .nav-toggle { display: flex; position: relative; z-index: 95; }
  .nav {
    /* The header has backdrop-filter, which makes it the containing block for
       fixed children — so `bottom:0` would clip the panel to the header's
       height. Use an explicit viewport height instead so it runs full-screen. */
    position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh;
    width: min(320px, 84vw); z-index: 90;
    background: var(--cream); box-shadow: var(--shadow-lg);
    transform: translateX(100%); transition: transform 260ms ease;
    padding: 84px 28px 40px; overflow-y: auto;
  }
  .nav.open { transform: translateX(0); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav-link { padding: 12px 0; font-size: 1.05rem; }
  .has-dropdown .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 4px 0 8px 14px; min-width: 0;
  }
  .nav-cta { margin: 14px 0 0; }
  .nav-cta .btn { width: 100%; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .footer-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; gap: 20px; }
  .hero { padding: 64px 0 72px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Enrichment components — team cards, clinic gallery, standards, physician note
   ========================================================================== */

/* ----- Team / physician cards ----- */
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px;
}
.team-grid--2x2 { grid-template-columns: repeat(2, 1fr); }
/* 2-up variant, centered + capped so two cards don't stretch full width. */
.team-grid--2up { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 0 auto; }
@media (max-width: 760px) {
  .team-grid--2x2, .team-grid--2up { grid-template-columns: 1fr; }
}

/* Breadcrumb (interior pages) */
.breadcrumb {
  font-size: 0.86rem; color: var(--ink-mute); margin-bottom: 28px;
}
.breadcrumb a { color: var(--green); font-weight: 600; text-decoration: none; }
.breadcrumb a:hover { color: var(--green-light); }
.team-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.team-card__photo { aspect-ratio: 4 / 3; background: var(--cream-warm); overflow: hidden; }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__body { padding: 24px 28px 28px; }
.team-card__role {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--green); margin-bottom: 6px;
}
.team-card__name { margin-bottom: 10px; }
.team-card__body p { color: var(--ink-soft); font-size: 0.96rem; margin-bottom: 0; }

/* ----- Clinic photo gallery ----- */
.gallery-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.gallery-item {
  border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 450ms ease; }
.gallery-item:hover img { transform: scale(1.04); }
@media (max-width: 700px) { .gallery-grid { grid-template-columns: 1fr; } }

/* ----- Full-bleed visual moment (between content sections) ----- */
.full-bleed-moment {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
}
.full-bleed-moment__media {
  position: absolute; inset: 0; z-index: 0;
}
.full-bleed-moment__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.full-bleed-moment::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(13, 26, 48, 0.05) 0%, rgba(13, 26, 48, 0.05) 35%, rgba(13, 26, 48, 0.5) 75%, rgba(13, 26, 48, 0.85) 100%);
}
/* Stronger, fuller overlay for bright background photos (e.g. the lit reception)
   so the headline stays legible across the whole frame, not just the bottom. */
.full-bleed-moment--scrim::after {
  background: linear-gradient(180deg, rgba(13, 26, 48, 0.5) 0%, rgba(13, 26, 48, 0.5) 45%, rgba(13, 26, 48, 0.72) 75%, rgba(13, 26, 48, 0.88) 100%);
}
.full-bleed-moment__content {
  position: relative; z-index: 2;
  padding: 80px clamp(24px, 5vw, 64px);
  max-width: 760px;
}
.full-bleed-moment__content .eyebrow { color: var(--green-light); }
.full-bleed-moment__content h2 { color: var(--white); margin-bottom: 14px; }
.full-bleed-moment__content p { color: rgba(255, 255, 255, 0.85); font-size: 1.06rem; line-height: 1.6; margin-bottom: 0; }
@media (max-width: 760px) {
  .full-bleed-moment { min-height: 64vh; }
  .full-bleed-moment__content { padding: 56px 24px; }
}

/* ----- Sticky floating CTA (appears after hero scrolls out) ----- */
.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 96;
  background: var(--green);
  color: var(--white);
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 28px rgba(0, 140, 59, 0.4), 0 2px 6px rgba(0, 0, 0, 0.18);
  transform: translate(-50%, 120px);
  opacity: 0;
  pointer-events: none;
  transition: transform 320ms ease, opacity 220ms ease, background 180ms ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.sticky-cta.is-visible {
  transform: translate(-50%, 0) !important;
  opacity: 1 !important;
  pointer-events: auto;
}
.sticky-cta:hover { background: var(--green-light); color: var(--white); }
.sticky-cta svg { width: 16px; height: 16px; }
/* On mobile the centered free-consult pill clashes with the WhatsApp bubble;
   drop it there and let the WhatsApp float be the single floating action. */
@media (max-width: 768px) {
  .sticky-cta { display: none; }
}

/* ----- Standards (trust section, sits on navy) ----- */
.standards-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 26px 44px;
}
.standard-item { display: flex; gap: 15px; align-items: flex-start; }
.standard-item svg {
  width: 26px; height: 26px; color: var(--green); flex-shrink: 0; margin-top: 1px;
}
.standard-item h3 { font-size: 1.06rem; margin-bottom: 5px; }
.standard-item p { color: rgba(255, 255, 255, 0.72); font-size: 0.93rem; margin-bottom: 0; }

/* ----- Physician note (condition-page callout with photo) ----- */
.physician-note {
  display: flex; gap: 20px; align-items: center;
  background: var(--cream-warm); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 26px; margin: 32px 0;
}
.physician-note__photo {
  width: 76px; height: 76px; border-radius: 50%; overflow: hidden;
  flex-shrink: 0; background: var(--cream); border: 2px solid var(--green);
}
.physician-note__photo img { width: 100%; height: 100%; object-fit: cover; }
.physician-note__body p { margin-bottom: 0; color: var(--ink-soft); font-size: 0.96rem; }
.physician-note__body strong { color: var(--navy); }

/* ----- Physician bio credentials list (About page) ----- */
.bio-credentials {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.bio-credentials li {
  position: relative; padding-left: 26px; font-size: 0.95rem; color: var(--ink-soft);
}
.bio-credentials li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--green); font-weight: 700;
}

@media (max-width: 760px) {
  .physician-note { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ----- Articles / Learn ----- */
.article-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px;
}
.article-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.article-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--green); }
.article-card__link { display: block; color: inherit; text-decoration: none; height: 100%; }
.article-card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--cream-warm); }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.article-card:hover .article-card__media img { transform: scale(1.04); }
.article-card__body { padding: 22px 26px 28px; }
.article-card__category {
  display: inline-block;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--green); margin-bottom: 10px;
}
.article-card__title { font-size: 1.18rem; line-height: 1.3; margin-bottom: 10px; color: var(--navy); }
.article-card__excerpt { color: var(--ink-soft); font-size: 0.94rem; margin-bottom: 14px; }
.article-card__more { font-size: 0.88rem; font-weight: 600; color: var(--green); }

/* ----- Featured patient story (homepage testimonials) ----- */
.patient-story {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px;
  align-items: center; margin: 0 auto 56px;
}
.patient-story__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.patient-story__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.patient-story__eyebrow {
  display: inline-block;
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--green);
  margin-bottom: 14px;
}
.patient-story__quote {
  font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 500; line-height: 1.4; color: var(--navy); margin-bottom: 18px;
}
.patient-story__quote::before { content: "\201C"; color: var(--green); margin-right: 2px; }
.patient-story__quote::after { content: "\201D"; color: var(--green); margin-left: 2px; }
.patient-story__attribution { font-size: 0.92rem; color: var(--ink-mute); font-weight: 600; }
@media (max-width: 760px) {
  .patient-story { grid-template-columns: 1fr; gap: 24px; margin-bottom: 36px; }
}

/* ==========================================================================
   RICH CONDITION-PAGE COMPONENTS (chronic-pain pilot)
   Scroll-reveal + dense visual rhythm patterns. These classes are added
   to specific condition pages (currently /chronic-pain/) and do not affect
   pages that don't use them.
   ========================================================================== */

/* --- Scroll reveal: opacity + lift on enter, staggered children -------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-revealed { opacity: 1; transform: none; }
.reveal-stagger > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-stagger.is-revealed > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: none; }
.reveal-stagger.is-revealed > *:nth-child(2) { transition-delay: 90ms; opacity: 1; transform: none; }
.reveal-stagger.is-revealed > *:nth-child(3) { transition-delay: 180ms; opacity: 1; transform: none; }
.reveal-stagger.is-revealed > *:nth-child(4) { transition-delay: 270ms; opacity: 1; transform: none; }
.reveal-stagger.is-revealed > *:nth-child(5) { transition-delay: 360ms; opacity: 1; transform: none; }
.reveal-stagger.is-revealed > *:nth-child(6) { transition-delay: 450ms; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* --- Eyebrow micro: tighter, more lettered, "editorial" feel ----------- */
.eyebrow-micro {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--green); margin-bottom: 18px;
}
.eyebrow-micro--on-dark { color: var(--green-light); }
.eyebrow-micro__dot {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: var(--green); margin-right: 10px;
  vertical-align: middle; position: relative; top: -1px;
  box-shadow: 0 0 0 0 rgba(0, 140, 59, 0.45);
  animation: pulseDot 2.4s infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(0, 140, 59, 0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(0, 140, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 140, 59, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow-micro__dot { animation: none; }
}

/* --- Display headline: light weight with bold green accent -------------- */
.display-light {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.display-light strong { font-weight: 800; color: var(--green); }
.display-light--on-dark { color: var(--white); }
.display-light--on-dark strong { color: var(--green-light); }

/* --- Stat band: 3-up KPI strip below hero ------------------------------- */
.stat-band {
  background: var(--cream);
  border-bottom: 1px solid var(--border-soft);
  padding: 36px 0;
}
.stat-band__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; align-items: center;
}
.stat-band__item { text-align: center; padding: 0 16px; }
.stat-band__item + .stat-band__item { border-left: 1px solid var(--border); }
.stat-band__num {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700; color: var(--navy); line-height: 1; margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.stat-band__num .accent { color: var(--green); }
.stat-band__label {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-mute);
}
@media (max-width: 760px) {
  .stat-band__grid { grid-template-columns: 1fr; gap: 18px; }
  .stat-band__item + .stat-band__item { border-left: 0; border-top: 1px solid var(--border); padding-top: 18px; }
}

/* --- Section: deep navy alternation ------------------------------------- */
.section-deep {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-soft) 100%);
  color: rgba(255, 255, 255, 0.84);
  padding: 88px 0;
  position: relative; overflow: hidden;
}
.section-deep h2, .section-deep h3 { color: var(--white); }
.section-deep .lede { color: rgba(255, 255, 255, 0.78); }
.section-deep::before {
  content: ""; position: absolute; top: -40%; right: -10%;
  width: 520px; height: 520px; pointer-events: none;
  background: radial-gradient(circle, rgba(0, 179, 77, 0.12) 0%, transparent 70%);
  filter: blur(20px);
}

/* --- Impact grid: 3-up gradient cards (e.g., daily-life impact) -------- */
.impact-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; margin-top: 48px;
}
.impact-card {
  background: linear-gradient(160deg, rgba(0, 140, 59, 0.06) 0%, rgba(13, 26, 48, 0.02) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}
.impact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(0, 140, 59, 0.4); }
.impact-card--on-dark {
  background: linear-gradient(160deg, rgba(0, 179, 77, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-color: rgba(255, 255, 255, 0.1);
}
.impact-card__icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 140, 59, 0.12); color: var(--green);
  margin-bottom: 20px;
}
.impact-card--on-dark .impact-card__icon { background: rgba(0, 179, 77, 0.16); color: var(--green-light); }
.impact-card__icon svg { width: 22px; height: 22px; }
.impact-card h3 { font-size: 1.18rem; margin-bottom: 10px; color: var(--navy); }
.impact-card--on-dark h3 { color: var(--white); }
.impact-card p { font-size: 0.96rem; color: var(--ink-soft); line-height: 1.55; margin: 0; }
.impact-card--on-dark p { color: rgba(255, 255, 255, 0.7); }
@media (max-width: 900px) { .impact-grid { grid-template-columns: 1fr; gap: 16px; } }

/* --- Pattern rows: finding-row pattern (icon + text + pill) ------------ */
/* Single-column stack: each pattern-row is a wide horizontal card. With 3
   items a 2-col grid creates an orphan row, and a 3-col grid squeezes the
   icon/body/pill layout too narrow. Vertical stack is cleanest for any item
   count (3, 4, 5, anything). */
.pattern-list {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 40px;
}
.pattern-row {
  display: grid; grid-template-columns: 44px 1fr auto;
  gap: 18px; align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  transition: border-color 220ms ease, transform 220ms ease;
}
.pattern-row:hover { border-color: rgba(0, 140, 59, 0.4); transform: translateX(2px); }
.pattern-row__icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 140, 59, 0.1); color: var(--green);
}
.pattern-row__icon svg { width: 20px; height: 20px; }
.pattern-row__body strong { display: block; color: var(--navy); margin-bottom: 2px; font-size: 0.98rem; }
.pattern-row__body span { font-size: 0.86rem; color: var(--ink-soft); }
.pattern-row__pill {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
  background: rgba(0, 140, 59, 0.1); color: var(--green); white-space: nowrap;
}
.pattern-row__pill--warm { background: rgba(217, 119, 6, 0.12); color: #b25c00; }
.pattern-row__pill--cool { background: rgba(31, 59, 118, 0.1); color: var(--navy-line); }
@media (max-width: 760px) { .pattern-list { grid-template-columns: 1fr; } }

/* --- Doctor feature: large 2-column physician hero card ---------------- */
.doctor-feature {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: 56px; align-items: center;
  background: linear-gradient(140deg, var(--white) 0%, var(--cream) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px;
  box-shadow: var(--shadow-md);
  position: relative; overflow: hidden;
}
.doctor-feature::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--green) 0%, var(--green-light) 100%);
}
.doctor-feature__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-lg);
}
.doctor-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doctor-feature__badge {
  position: absolute; bottom: 16px; left: 16px;
  background: rgba(13, 26, 48, 0.85); backdrop-filter: blur(8px);
  color: var(--white); padding: 8px 14px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.doctor-feature__name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 700; color: var(--navy); margin-bottom: 8px;
  letter-spacing: -0.01em; line-height: 1.1;
}
.doctor-feature__role {
  font-size: 0.92rem; font-weight: 600; color: var(--green);
  letter-spacing: 0.04em; margin-bottom: 22px;
}
.doctor-feature__quote {
  font-family: var(--font-display);
  font-size: 1.15rem; line-height: 1.5; color: var(--ink);
  font-style: italic; padding-left: 18px;
  border-left: 3px solid var(--green);
  margin-bottom: 24px;
}
.doctor-feature__creds {
  list-style: none; padding: 0; margin: 0 0 24px;
  display: grid; gap: 10px;
}
.doctor-feature__creds li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.94rem; color: var(--ink-soft); line-height: 1.5;
}
.doctor-feature__creds li::before {
  content: ""; flex: none; margin-top: 7px;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(0, 140, 59, 0.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c3b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.doctor-feature__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--green); font-size: 0.96rem;
}
.doctor-feature__cta:hover { color: var(--green-light); }
/* Flip variant: photo on the right, text on the left (alternating rows). */
.doctor-feature--flip { grid-template-columns: 1.1fr 0.9fr; }
.doctor-feature--flip .doctor-feature__media { order: 2; }
@media (max-width: 900px) {
  .doctor-feature,
  .doctor-feature--flip { grid-template-columns: 1fr; gap: 32px; padding: 32px 28px; }
  .doctor-feature__media { aspect-ratio: 4 / 5; max-width: 320px; margin: 0 auto; }
  .doctor-feature--flip .doctor-feature__media { order: 0; }
}

/* --- Compact page hero (interior pages) ------------------------------- */
.page-hero {
  background: var(--navy) center / cover no-repeat;
  background-image: linear-gradient(165deg, #0d1a30 0%, #15294f 60%, #0d1a30 100%);
  padding: clamp(96px, 14vh, 150px) 0 clamp(56px, 8vh, 80px);
  position: relative; overflow: hidden;
}
/* Scrim: darkens the background photo (set via base.njk inline style) so the
   white headline stays legible. With no photo, the navy gradient shows through. */
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(165deg, rgba(13,26,48,0.86) 0%, rgba(13,26,48,0.62) 55%, rgba(13,26,48,0.84) 100%);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(0,179,77,0.35) 50%, transparent);
}
.page-hero__inner { max-width: 760px; position: relative; z-index: 1; }
/* Left-align the interior hero content to match the homepage hero (kills the
   container's auto-centering, adds the same left gutter) instead of floating
   the block in the middle of the viewport. */
.page-hero .container { margin: 0; padding-left: clamp(24px, 5vw, 64px); }
/* White ghost buttons on the dark hero (matches the homepage hero). */
.page-hero .btn-ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.55); }
.page-hero .btn-ghost:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
/* Beard hero: lighter scrim so more of the photo shows. The headline sits over
   the darker left edge, which stays legible. */
.page-beard .page-hero::after {
  background: linear-gradient(165deg, rgba(13,26,48,0.62) 0%, rgba(13,26,48,0.32) 45%, rgba(13,26,48,0.22) 100%);
}

/* --- Interactive before/after slider (drag to reveal) ----------------- */
.ba-slider {
  position: relative; width: 100%; aspect-ratio: 3 / 4; max-width: 460px;
  margin: 0 auto; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-md); user-select: none; touch-action: none;
  --pos: 50%;
}
.ba-slider img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; pointer-events: none;
}
/* The before image sits on top, clipped to the left of the divider via clip-path
   (no wrapper, no squish). Dragging changes --pos, revealing more of the after. */
.ba-slider__before { z-index: 1; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-slider__divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px;
  background: var(--white); transform: translateX(-50%); z-index: 2; pointer-events: none;
}
.ba-slider__knob {
  position: absolute; top: 50%; left: var(--pos);
  width: 44px; height: 44px; border-radius: 50%;
  transform: translate(-50%, -50%); z-index: 3;
  background: var(--white); box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center; cursor: ew-resize;
  color: var(--navy); font-size: 14px; font-weight: 800;
}
.ba-slider__range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; z-index: 4;
}
.ba-slider__tag {
  position: absolute; bottom: 12px; z-index: 2;
  background: rgba(13,26,48,0.82); color: var(--white);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.ba-slider__tag--before { left: 12px; }
.ba-slider__tag--after { right: 12px; }

/* Vertical variant — wipe top-to-bottom (e.g. a hairline filling in). Drag is
   pointer/touch driven in main.js, since a horizontal range can't map to Y. */
.ba-slider--vertical { aspect-ratio: 4 / 3; }
.ba-slider--vertical .ba-slider__before { clip-path: inset(0 0 calc(100% - var(--pos)) 0); }
.ba-slider--vertical .ba-slider__divider {
  top: var(--pos); left: 0; right: 0; bottom: auto;
  width: auto; height: 3px; transform: translateY(-50%);
}
.ba-slider--vertical .ba-slider__knob { top: var(--pos); left: 50%; cursor: ns-resize; }
.ba-slider--vertical .ba-slider__range { pointer-events: none; }
.ba-slider--vertical .ba-slider__tag--before { top: 12px; left: 12px; bottom: auto; }
.ba-slider--vertical .ba-slider__tag--after { bottom: 12px; left: 12px; right: auto; top: auto; }
.ba-spotlight__copy h3 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 500; line-height: 1.25; color: var(--navy); margin-bottom: 14px; }
.ba-spotlight__copy p { color: var(--ink-soft); line-height: 1.7; }

/* Portrait before/after cards (stacked composites) + a 4-up gallery row. */
.ba-card--portrait .ba-card__media { aspect-ratio: 2 / 3; }
/* No bottom scrim on portrait cards (no label) so the "after" half stays bright. */
.ba-card--portrait .ba-card__media::after { content: none; }
.ba-gallery--quad .ba-card { flex-basis: calc(25% - 15px); }
@media (max-width: 860px) { .ba-gallery--quad .ba-card { flex-basis: calc(50% - 10px); } }
@media (max-width: 520px) { .ba-gallery--quad .ba-card { flex-basis: 100%; } }
/* Two-up gallery (e.g. four square before/afters as a 2x2). */
.ba-gallery.ba-gallery--2col { max-width: 920px; }
.ba-gallery--2col .ba-card { flex-basis: calc(50% - 10px); }
@media (max-width: 520px) { .ba-gallery--2col .ba-card { flex-basis: 100%; } }
/* Opt a card out of the bottom scrim so a stacked "after" half stays bright. */
.ba-card--noscrim .ba-card__media::after { content: none; }

/* Before/after page: per-procedure groups (heading + that procedure's pairs). */
.ba-group + .ba-group { margin-top: 60px; }
.ba-group-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; flex-wrap: wrap; max-width: var(--max); margin: 0 auto 6px; padding: 0 24px;
}
.ba-group-head h3 {
  font-family: var(--font-display); font-weight: 500; color: var(--navy);
  font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 6px 0 0;
}
.ba-group-head__link { font-weight: 600; color: var(--green); white-space: nowrap; align-self: center; }

/* ---- Blog ------------------------------------------------------------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: var(--max); margin: 0 auto; }
@media (max-width: 920px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.blog-card__media { aspect-ratio: 3 / 2; overflow: hidden; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.blog-card:hover .blog-card__media img { transform: scale(1.04); }
.blog-card__body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card__category { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
.blog-card__title { font-family: var(--font-display); font-weight: 500; font-size: 1.24rem; line-height: 1.3; color: var(--navy); margin: 0; }
.blog-card__excerpt { color: var(--ink-soft); font-size: 0.93rem; line-height: 1.6; margin: 0; }
.blog-card__meta { font-size: 0.84rem; color: var(--ink-mute); margin-top: auto; padding-top: 6px; }
/* Blog post body */
.post-meta { color: rgba(255,255,255,0.72); font-size: 0.95rem; margin-top: 16px; }
.post-body { max-width: 760px; margin: 0 auto; }
.post-back { max-width: 760px; margin: 40px auto 0; }
.post-back a { font-weight: 600; color: var(--green); }
/* Blog category filter row + inline category links */
.blog-cats { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 auto 34px; }
.blog-cats a { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); background: var(--white); border: 1px solid var(--border); border-radius: 999px; padding: 7px 16px; text-decoration: none; transition: color .15s ease, border-color .15s ease; }
.blog-cats a:hover, .blog-cats a.is-active { color: var(--green); border-color: var(--green); }
.cat-link { color: inherit; text-decoration: none; }
.cat-link:hover { text-decoration: underline; }

/* ---- About: image + narrative split ---- */
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; max-width: var(--max); margin: 0 auto; }
.about-split > * { min-width: 0; }
.about-split__media { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.about-split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.about-split h2 { margin-bottom: 16px; }
.about-split p { color: var(--ink-soft); line-height: 1.72; margin-bottom: 14px; }
@media (max-width: 820px) { .about-split { grid-template-columns: 1fr; gap: 26px; } .about-split__media img { aspect-ratio: 16 / 11; } }

.page-hero__lede {
  font-size: 1.15rem; line-height: 1.65; color: rgba(255,255,255,0.78);
  margin-top: 18px; max-width: 620px;
}

/* --- Review cards (Reviews page) -------------------------------------- */
.review-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: 1040px; margin: 0 auto;
}
.review-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.review-card__stars { color: #ffc94a; letter-spacing: 1px; font-size: 0.95rem; margin-bottom: 14px; }
.review-card__quote { color: var(--ink); font-size: 1rem; line-height: 1.6; margin: 0 0 18px; }
.review-card__name { margin-top: auto; font-size: 0.9rem; font-weight: 700; color: var(--navy); }
.review-card__meta { font-size: 0.82rem; color: var(--ink-mute); }
.review-lead {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center; margin-bottom: 48px;
}
.review-lead__rating { font-family: var(--font-display); font-weight: 800; font-size: 3rem; color: var(--navy); line-height: 1; }
.review-lead__stars { color: #ffc94a; letter-spacing: 2px; font-size: 1.3rem; }
@media (max-width: 860px) { .review-grid { grid-template-columns: 1fr; max-width: 460px; } }

/* --- Approach cards: FUE / DHI / combined (About page) ---------------- */
.approach-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: 1000px; margin: 0 auto;
}
.approach-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow-sm);
}
.approach-card__tag {
  display: inline-block; background: rgba(0,140,59,0.1); color: var(--green);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em;
  padding: 6px 12px; border-radius: 999px; margin-bottom: 16px;
}
.approach-card__title { margin-bottom: 10px; }
.approach-card p { color: var(--ink-soft); font-size: 0.96rem; line-height: 1.6; margin-bottom: 0; }
@media (max-width: 860px) { .approach-grid { grid-template-columns: 1fr; max-width: 460px; } }

/* --- Clinic info grid (About page) ------------------------------------ */
.info-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  max-width: 920px; margin: 0 auto;
}
.info-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--green);
}
.info-card__title { margin-bottom: 8px; }
.info-card p { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.6; margin-bottom: 0; }
@media (max-width: 720px) { .info-grid { grid-template-columns: 1fr; } }

/* --- Affiliation chips ------------------------------------------------- */
.affiliations {
  list-style: none; padding: 0; margin: 8px auto 0; max-width: 880px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.affiliation-chip {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 999px; padding: 12px 22px;
  font-size: 0.9rem; font-weight: 600; color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.affiliations__note {
  text-align: center; color: var(--ink-soft); font-size: 0.94rem;
  margin: 24px auto 0; max-width: 560px;
}

/* --- Step flow: 4-up numbered horizontal flow -------------------------- */
.step-flow {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; margin-top: 48px;
  counter-reset: step;
}
.step-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 28px 22px;
  position: relative;
  transition: background 280ms ease, border-color 280ms ease, transform 280ms ease;
}
.step-card:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(0, 179, 77, 0.4); transform: translateY(-3px); }
.step-card__num {
  counter-increment: step;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 179, 77, 0.16);
  color: var(--green-light);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  margin-bottom: 18px;
}
.step-card__num::before { content: counter(step, decimal-leading-zero); }
.step-card h3 { font-size: 1.05rem; color: var(--white); margin-bottom: 10px; }
.step-card p { font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); line-height: 1.55; margin: 0; }
@media (max-width: 1000px) { .step-flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .step-flow { grid-template-columns: 1fr; } }

/* --- Questions split: 2-column for questions section ------------------- */
.questions-split {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: 56px; align-items: start;
  max-width: 1080px; margin: 0 auto;
}
.questions-split__lead h2 {
  font-size: clamp(1.65rem, 2.4vw, 2.1rem); margin-bottom: 18px;
  color: var(--navy); letter-spacing: -0.01em;
}
.questions-split__lead p { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.65; }
.questions-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.questions-list li {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 22px 16px 52px;
  position: relative;
  font-size: 0.98rem; color: var(--ink); line-height: 1.55;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.questions-list li:hover { border-color: rgba(0, 140, 59, 0.4); box-shadow: var(--shadow-sm); transform: translateX(2px); }
.questions-list li::before {
  content: "?";
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0, 140, 59, 0.12); color: var(--green);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.92rem;
}
@media (max-width: 900px) {
  .questions-split { grid-template-columns: 1fr; gap: 24px; }
}

/* --- Trust band: navy dark section below hero, dental-style ----------- */
/* Four large KPI stats with green-accent suffixes + a row of pill badges. */
.trust-band {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.85);
  padding: 56px 0 48px;
  position: relative; overflow: hidden;
}
.trust-band::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 179, 77, 0.3) 50%, transparent 100%);
}
.trust-band__stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px; padding-bottom: 36px;
}
.trust-band__stat {
  position: relative; padding: 6px 0;
}
.trust-band__stat + .trust-band__stat::before {
  content: ""; position: absolute; left: -16px; top: 12px; bottom: 12px;
  width: 1px; background: rgba(255, 255, 255, 0.12);
}
.trust-band__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--white);
  margin-bottom: 10px;
  display: flex; align-items: baseline; gap: 6px;
}
.trust-band__num .accent { color: var(--green-light); }
.trust-band__num .suffix {
  font-size: 0.6em; color: var(--green-light); font-weight: 700;
}
.trust-band__num .sep {
  font-weight: 300; color: rgba(255, 255, 255, 0.4); padding: 0 2px;
}
.trust-band__label {
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.trust-band__badges {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.trust-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.84rem; font-weight: 500;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.82);
  transition: background 220ms ease, border-color 220ms ease;
}
.trust-badge:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(0, 179, 77, 0.4); }
.trust-badge__stars { color: #ffc94a; letter-spacing: -1px; font-size: 0.9rem; }
.trust-badge__check {
  width: 14px; height: 14px; flex: none;
  background: rgba(0, 179, 77, 0.16); color: var(--green-light);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.trust-badge__check svg { width: 9px; height: 9px; }
@media (max-width: 900px) {
  .trust-band__stats { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  /* Centre the trust signals once the row wraps on tablet/mobile. */
  .trust-band__stat { text-align: center; }
  .trust-band__num { justify-content: center; }
  .trust-band__stat + .trust-band__stat::before { display: none; }
  .trust-band__stat:nth-child(odd):not(:first-child)::before {
    content: ""; position: absolute; left: 0; right: 0; top: -14px;
    height: 1px; background: rgba(255, 255, 255, 0.08); display: block;
  }
}
@media (max-width: 540px) {
  .trust-band { padding: 40px 0 36px; }
  .trust-band__stats { grid-template-columns: 1fr; gap: 22px; padding-bottom: 28px; }
  .trust-band__stat:nth-child(odd):not(:first-child)::before { display: none; }
  .trust-band__badges { padding-top: 24px; }
}

/* ==========================================================================
   PHASE 1 — Expanded section component library (treatment-plan-inspired)
   ==========================================================================
   Components added here mirror the visual vocabulary of the Colombia Care
   treatment-plan decks (Brian Stewart rotator cuff, John Reber protocol,
   stem-cell-treatments-overview). Used by the expanded condition pages
   built in Phase 2/3. Adopts the regenerative palette (deep navy / softer
   green) rather than the brighter treatment-plan green.
   ========================================================================== */

/* ----- Accent eyebrows (carry the colored eyebrow pattern from plans) ----- */
.eyebrow-accent {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(0, 179, 77, 0.10); border: 1px solid rgba(0, 179, 77, 0.32);
  color: var(--green-light);
  margin-bottom: 22px;
  width: fit-content;
}
.eyebrow-accent::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green-light);
}
.eyebrow-accent.gold   { color: #c9a84c; background: rgba(201,168,76,0.10); border-color: rgba(201,168,76,0.32); }
.eyebrow-accent.gold::before   { background: #c9a84c; }
.eyebrow-accent.cyan   { color: #5dcfff; background: rgba(93,207,255,0.10); border-color: rgba(93,207,255,0.32); }
.eyebrow-accent.cyan::before   { background: #5dcfff; }
.eyebrow-accent.violet { color: #9c7ff5; background: rgba(156,127,245,0.10); border-color: rgba(156,127,245,0.32); }
.eyebrow-accent.violet::before { background: #9c7ff5; }
.eyebrow-accent.red    { color: #e05a5a; background: rgba(224,90,90,0.10); border-color: rgba(224,90,90,0.32); }
.eyebrow-accent.red::before    { background: #e05a5a; }

/* ----- Aurora text (animated gradient for hero accent words) -------------- */
.aurora-text {
  background: linear-gradient(110deg, #00b34d 0%, #5dcfff 35%, #9c7ff5 70%, #00b34d 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: aurora-pan 9s ease-in-out infinite;
}
@keyframes aurora-pan {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora-text { animation: none; background-position: 50% 50%; }
}

/* ----- Dot grid background (CSS-only) ------------------------------------- */
.dot-grid-bg {
  position: relative;
}
.dot-grid-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1.4px);
  background-size: 28px 28px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.dot-grid-bg > * { position: relative; z-index: 1; }

/* ----- Glow orb (hero atmosphere — absolute-positioned) ------------------- */
.glow-orb {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: 0.55; pointer-events: none;
  animation: orb-drift 14s ease-in-out infinite alternate;
}
.glow-orb--green { background: radial-gradient(circle, rgba(0,179,77,0.55), transparent 70%); }
.glow-orb--cyan  { background: radial-gradient(circle, rgba(93,207,255,0.45), transparent 70%); }
.glow-orb--violet{ background: radial-gradient(circle, rgba(156,127,245,0.45), transparent 70%); }
@keyframes orb-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(40px, -30px, 0) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .glow-orb { animation: none; }
}

/* ----- Magic card (glow on hover) ----------------------------------------- */
.magic-card {
  position: relative; border-radius: 20px;
  background: linear-gradient(170deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.10);
  padding: 28px 30px;
  overflow: hidden;
  transition: transform 0.35s ease, border-color 0.35s ease;
}
.magic-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  background: conic-gradient(from var(--mc-angle, 0deg), transparent 0%, rgba(0,179,77,0.45) 12%, transparent 25%);
  opacity: 0; transition: opacity 0.4s ease; z-index: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px;
  animation: mc-rotate 6s linear infinite;
}
.magic-card:hover { transform: translateY(-3px); border-color: rgba(0, 179, 77, 0.32); }
.magic-card:hover::before { opacity: 1; }
.magic-card > * { position: relative; z-index: 1; }
@property --mc-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes mc-rotate { to { --mc-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .magic-card::before { animation: none; }
  .magic-card:hover { transform: none; }
}

/* ----- Magnetic CTA button hook ------------------------------------------- */
.btn-magnetic { will-change: transform; }

/* ----- Lang toggle pills (header) ----------------------------------------- */
.nav-lang { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px;
  background: rgba(13, 26, 48, 0.05); border-radius: 999px; padding: 3px; }
.nav-lang__pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 28px; padding: 0 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--ink-soft); border-radius: 999px;
  text-decoration: none; transition: color 0.2s ease, background 0.2s ease;
}
.nav-lang__pill:hover { color: var(--ink); }
.nav-lang__pill.is-active {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(13,26,48,0.10);
}
/* On dark sections, invert */
.site-header.is-on-dark .nav-lang { background: rgba(255,255,255,0.06); }
.site-header.is-on-dark .nav-lang__pill { color: rgba(255,255,255,0.65); }
.site-header.is-on-dark .nav-lang__pill.is-active { background: rgba(255,255,255,0.95); color: var(--navy); }

/* ----- Section-deep alt (deeper navy, gradient) --------------------------- */
.section-deeper {
  background: linear-gradient(180deg, var(--navy) 0%, #061226 100%);
  color: var(--white);
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.section-deeper .lede,
.section-deeper p { color: rgba(255,255,255,0.78); }

/* ==========================================================================
   sc-explainer — What Are Stem Cells (educational, mid-page section)
   ========================================================================== */
.sc-explainer { padding: 92px 0; background: var(--cream); position: relative; }
.sc-explainer__head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.sc-explainer__head .eyebrow-accent { margin-left: auto; margin-right: auto; }
.sc-explainer__lede { font-size: 18px; line-height: 1.6; color: var(--ink-soft); margin-top: 16px; }
.sc-explainer__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
}
.sc-explainer__card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 18px; padding: 26px 24px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sc-explainer__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sc-explainer__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0, 179, 77, 0.10); color: var(--green);
  font-weight: 800; font-size: 14px; letter-spacing: 0.02em;
}
.sc-explainer__card h4 { font-size: 17px; font-weight: 700; color: var(--ink); margin-top: 8px; }
.sc-explainer__card p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 980px) { .sc-explainer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sc-explainer__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   mechanism-grid — Why [condition] benefits from regenerative therapy
   ========================================================================== */
.mechanism-grid { padding: 96px 0; background: var(--navy); color: var(--white); position: relative; }
.mechanism-grid__head { max-width: 760px; margin: 0 auto 56px; text-align: center; padding: 0 24px; }
.mechanism-grid__head h2 { color: var(--white); }
.mechanism-grid__head h2 strong { color: var(--green-light); font-weight: 800; }
/* Layout rule for the constellation: never leave an orphan row. With 4
   mechanism cards (the canonical count for a condition page) we use 2x2 on
   desktop. If a future page has 2 cards they sit side by side; 6 cards
   becomes a 3x2 grid that must be requested explicitly via a modifier. */
.mechanism-grid__cards {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
  max-width: 980px; margin: 0 auto; padding: 0 24px;
}
.mech-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 28px 26px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.mech-card:hover { transform: translateY(-3px); border-color: rgba(0, 179, 77, 0.40); }
.mech-card__tag {
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--green-light);
}
.mech-card.cyan   .mech-card__tag { color: #5dcfff; }
.mech-card.violet .mech-card__tag { color: #9c7ff5; }
.mech-card.gold   .mech-card__tag { color: #c9a84c; }
.mech-card.cyan   { background: linear-gradient(165deg, rgba(93,207,255,0.08), rgba(255,255,255,0.02)); }
.mech-card.violet { background: linear-gradient(165deg, rgba(156,127,245,0.08), rgba(255,255,255,0.02)); }
.mech-card.gold   { background: linear-gradient(165deg, rgba(201,168,76,0.08), rgba(255,255,255,0.02)); }
.mech-card__title { font-size: 19px; font-weight: 700; color: var(--white); letter-spacing: -0.005em; }
.mech-card__body { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.78); }
@media (max-width: 600px) { .mechanism-grid__cards { grid-template-columns: 1fr; } }

/* ==========================================================================
   journey-timeline — Patient journey (4 phases)
   ========================================================================== */
.journey-timeline { padding: 96px 0; background: var(--cream); }
.journey-timeline__head { max-width: 760px; margin: 0 auto 56px; text-align: center; padding: 0 24px; }
.journey-timeline__rail {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
}
.journey-timeline__rail::before {
  content: ""; position: absolute;
  top: 38px; left: 14%; right: 14%; height: 2px;
  background: linear-gradient(90deg, var(--green) 0%, rgba(0, 179, 77, 0.2) 100%);
  z-index: 0;
}
.jt-step { position: relative; z-index: 1; padding-top: 0; }
.jt-step__num {
  width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); border: 2px solid var(--green);
  border-radius: 50%;
  font-size: 22px; font-weight: 800; color: var(--green);
  margin: 0 auto 22px;
  box-shadow: 0 8px 20px rgba(0, 179, 77, 0.15);
}
.jt-step__title { font-size: 17px; font-weight: 700; color: var(--ink); text-align: center; margin-bottom: 8px; }
.jt-step__body  { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); text-align: center; }
@media (max-width: 900px) {
  .journey-timeline__rail { grid-template-columns: 1fr 1fr; gap: 32px; }
  .journey-timeline__rail::before { display: none; }
}
@media (max-width: 600px) {
  .journey-timeline__rail { grid-template-columns: 1fr; }
}

/* ==========================================================================
   city-deep-dive — Medellín split (image + reasons list)
   ========================================================================== */
.city-deep-dive { padding: 100px 0; background: var(--navy); color: var(--white); overflow: hidden; }
.city-deep-dive__inner {
  display: grid;
  /* minmax(0, …) forces each track to its fr share. With a plain `1fr` the
     implicit `auto` minimum lets the aspect-ratio media item refuse to shrink,
     starving the text track down to one-word-per-line. minmax(0,…) + min-width:0
     on the children is the bulletproof fix. */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px;
  align-items: center; max-width: var(--max); margin: 0 auto; padding: 0 24px;
}
.city-deep-dive__inner > * { min-width: 0; }
.city-deep-dive__media {
  border-radius: 22px; overflow: hidden; aspect-ratio: 4/5;
  background: var(--navy-soft); position: relative;
  border: 1px solid rgba(255,255,255,0.10);
}
.city-deep-dive__media img { width: 100%; height: 100%; object-fit: cover; }
.city-deep-dive__media .overlay {
  position: absolute; left: 22px; right: 22px; bottom: 22px;
  padding: 18px 22px; backdrop-filter: blur(8px);
  background: linear-gradient(160deg, rgba(13,26,48,0.78), rgba(21,41,79,0.78));
  border: 1px solid rgba(255,255,255,0.12); border-radius: 14px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.city-deep-dive__media .overlay .o-num {
  font-size: 26px; font-weight: 800; color: var(--green-light); letter-spacing: -0.02em;
}
.city-deep-dive__media .overlay .o-lbl {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.65); font-weight: 700; line-height: 1.3;
}
.city-deep-dive__body h2 { color: var(--white); }
.city-deep-dive__body h2 strong { color: var(--green-light); font-weight: 800; }
.city-deep-dive__list { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 18px; }
.city-deep-dive__list li {
  position: relative; padding-left: 28px;
  font-size: 15.5px; line-height: 1.55; color: rgba(255,255,255,0.82);
}
/* Padding + absolute bullet instead of a 2-col grid: each <li> holds a
   <strong> AND trailing text, which is 2 content items + the ✓ = 3 grid
   items. In a `24px 1fr` grid that wraps the trailing text back into the
   24px column → one-word-per-line. A flow layout has no such trap. */
.city-deep-dive__list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--green-light); font-weight: 800; font-size: 14px;
}
.city-deep-dive__list li strong { color: var(--white); }
@media (max-width: 900px) {
  .city-deep-dive__inner { grid-template-columns: 1fr; gap: 40px; }
  .city-deep-dive__media { aspect-ratio: 16/10; }
}

/* ==========================================================================
   hospitality-grid — What the visit looks like (driver, hotel, concierge)
   ========================================================================== */
.hospitality-grid { padding: 96px 0; background: var(--cream); }
.hospitality-grid__head { max-width: 760px; margin: 0 auto 56px; text-align: center; padding: 0 24px; }
.hospitality-grid__cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
}
.hosp-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 18px; padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hosp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.hosp-card__icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(165deg, rgba(0,179,77,0.12), rgba(0,179,77,0.04));
  display: flex; align-items: center; justify-content: center;
  color: var(--green);
}
.hosp-card__icon svg { width: 22px; height: 22px; }
.hosp-card h4 { font-size: 16.5px; font-weight: 700; color: var(--ink); }
.hosp-card p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.hosp-card__note {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--border);
  font-size: 12px; letter-spacing: 0.04em; color: var(--ink-mute);
}
@media (max-width: 980px) { .hospitality-grid__cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .hospitality-grid__cards { grid-template-columns: 1fr; } }

/* ==========================================================================
   recovery-window — Phased recovery cards (Days, Weeks, Months) + alert
   ========================================================================== */
.recovery-window { padding: 96px 0; background: var(--navy); color: var(--white); }
.recovery-window__head { max-width: 760px; margin: 0 auto 48px; text-align: center; padding: 0 24px; }
.recovery-window__head h2 { color: var(--white); }
.recovery-window__head h2 strong { color: var(--green-light); font-weight: 800; }
.recovery-window__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
}
.rw-card {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px; padding: 24px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.rw-card__tag { font-size: 10.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green-light); }
.rw-card.warn  .rw-card__tag { color: #c9a84c; }
.rw-card.alert .rw-card__tag { color: #e05a5a; }
.rw-card.warn  { background: linear-gradient(165deg, rgba(201,168,76,0.06), rgba(255,255,255,0.02)); border-color: rgba(201,168,76,0.30); }
.rw-card.alert { background: linear-gradient(165deg, rgba(224,90,90,0.06), rgba(255,255,255,0.02)); border-color: rgba(224,90,90,0.30); }
.rw-card h4 { font-size: 15px; font-weight: 700; color: var(--white); }
.rw-card ul { font-size: 13.5px; color: rgba(255,255,255,0.78); padding-left: 18px; line-height: 1.65; }
.rw-card ul li + li { margin-top: 4px; }
@media (max-width: 980px) { .recovery-window__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .recovery-window__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   pricing-range-band — "From $X" headline + detailed includes panel
   Beefed up: the headline row sits at the top, then a two-column panel of
   what is and isn't included. Treatment-plan-style.
   ========================================================================== */
.pricing-range-band { padding: 88px 0; background: var(--cream); }
.pricing-range-band__wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.pricing-range-band__inner {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 24px; padding: 44px 48px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: center;
}
.pricing-range-band__copy h3 { font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.pricing-range-band__copy p  { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
.pricing-range-band__amount {
  font-size: clamp(40px, 5vw, 60px); font-weight: 300; color: var(--ink);
  letter-spacing: -0.02em; line-height: 1;
}
.pricing-range-band__amount .from { font-size: 14px; color: var(--ink-mute); display: block; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 8px; font-weight: 700; }
.pricing-range-band__amount strong { color: var(--green); font-weight: 800; }
.pricing-range-band__amount .note { font-size: 12px; color: var(--ink-mute); display: block; margin-top: 14px; line-height: 1.5; letter-spacing: 0.02em; font-weight: 400; }

/* Includes panel: two columns (included + not included). 2x2 list inside each. */
.pricing-includes {
  margin-top: 22px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 24px; padding: 36px 48px 40px;
}
.pricing-includes__head { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding-bottom: 22px; border-bottom: 1px solid var(--border); margin-bottom: 26px; }
.pricing-includes__head h4 { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 800; color: var(--ink); }
.pricing-includes__head .pi-not { color: var(--ink-mute); }
.pricing-includes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 36px; }
.pi-col { display: flex; flex-direction: column; gap: 12px; }
.pi-item {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  font-size: 14.5px; line-height: 1.55; color: var(--ink-soft);
}
.pi-item strong { color: var(--ink); font-weight: 700; }
.pi-item__icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0, 140, 59, 0.10); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; margin-top: 1px;
}
.pi-item.no .pi-item__icon { background: rgba(13, 26, 48, 0.06); color: var(--ink-mute); }
.pi-item.no { color: var(--ink-mute); }
.pi-item.no strong { color: var(--ink-soft); }

@media (max-width: 760px) {
  .pricing-range-band__inner { grid-template-columns: 1fr; padding: 36px 28px; text-align: left; }
  .pricing-includes { padding: 32px 28px; }
  .pricing-includes__head { grid-template-columns: 1fr; gap: 4px; }
  .pricing-includes__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   faq-deep — Rich accordion (multi-paragraph answers)
   ========================================================================== */
.faq-deep { padding: 96px 0; background: var(--cream); }
.faq-deep__head { max-width: 720px; margin: 0 auto 48px; text-align: center; padding: 0 24px; }
.faq-deep__list { max-width: 800px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 14px; }
.faq-deep__item {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 14px; padding: 0;
  transition: border-color 0.3s ease;
}
.faq-deep__item[open] { border-color: rgba(0,179,77,0.32); }
.faq-deep__item summary {
  list-style: none; cursor: pointer;
  padding: 22px 26px;
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  font-size: 16.5px; font-weight: 700; color: var(--ink);
}
.faq-deep__item summary::-webkit-details-marker { display: none; }
.faq-deep__item summary::after {
  content: "+"; font-size: 22px; font-weight: 300; color: var(--green); transition: transform 0.3s ease;
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(0,179,77,0.08);
}
.faq-deep__item[open] summary::after { content: "−"; transform: rotate(180deg); }
.faq-deep__answer {
  padding: 0 26px 26px;
  font-size: 15px; line-height: 1.7; color: var(--ink-soft);
}
.faq-deep__answer p + p { margin-top: 12px; }
.faq-deep__answer strong { color: var(--ink); }

/* ==========================================================================
   gradient divider (between sections, subtle)
   ========================================================================== */
.gradient-divider {
  height: 1px; max-width: 240px; margin: 56px auto;
  background: linear-gradient(90deg, transparent, rgba(0,179,77,0.45), transparent);
}

/* ==========================================================================
   treatments-photo-grid — 3-up photo card row used on the homepage.
   Replaces the icon-only .areas-grid variant. Each card has a full-width
   image on top + body content below. Modeled on the
   stemcellscolombiacare.com "Eight specialities. One protocol of care"
   reference Kenz shared.
   ========================================================================== */
.treatments-photo-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: var(--max); margin: 40px auto 0; padding: 0 24px;
}
.tp-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  box-shadow: var(--shadow-sm);
}
.tp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(0, 140, 59, 0.32);
}
.tp-card__media {
  aspect-ratio: 4/3; overflow: hidden;
  background: var(--navy-soft);
  position: relative;
}
.tp-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s ease;
}
.tp-card:hover .tp-card__media img { transform: scale(1.04); }
.tp-card__body {
  padding: 26px 28px 28px;
  display: flex; flex-direction: column; gap: 12px; flex: 1;
}
.tp-card__title {
  font-size: 22px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.005em; line-height: 1.2;
}
.tp-card__desc {
  font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; flex: 1;
}
.tp-card__link {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 800; color: var(--green);
  margin-top: 8px; display: inline-flex; align-items: center; gap: 6px;
  transition: color 0.2s ease, gap 0.25s ease;
}
.tp-card:hover .tp-card__link { color: var(--green-light); gap: 10px; }
.tp-card__link::after { content: "→"; transition: transform 0.25s ease; }
.tp-card:hover .tp-card__link::after { transform: translateX(2px); }
@media (max-width: 900px) {
  .treatments-photo-grid { grid-template-columns: 1fr; max-width: 480px; gap: 20px; }
}

/* ==========================================================================
   conditions-photo-grid — 3-col × 3-row photo card layout for the
   homepage "areas we help" section. 7 condition cards + 2 CTA tiles
   (free consult + WhatsApp) = 9 tiles → 3 even rows of 3, no orphan.
   Wider cards than the 4-col version, more visual presence per tile.
   ========================================================================== */
.conditions-photo-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  max-width: var(--max); margin: 40px auto 0; padding: 0 24px;
}
.conditions-photo-grid .tp-card__body { padding: 24px 26px 26px; gap: 10px; }
.conditions-photo-grid .tp-card__title { font-size: 20px; }
.conditions-photo-grid .tp-card__desc { font-size: 14px; line-height: 1.55; }

/* CTA tile variant — fills the 8th slot in row 2. Navy bg, white text,
   no photo. Visually the closer of the row, doubles as a conversion hook
   for visitors not sure where to start. */
.tp-card.cta {
  background: linear-gradient(165deg, var(--navy) 0%, var(--navy-soft) 100%);
  border-color: rgba(0, 179, 77, 0.32);
  color: var(--white);
  justify-content: center;
  padding: 32px 28px;
  text-align: center;
}
.tp-card.cta:hover { border-color: var(--green-light); }
.tp-card.cta .tp-card__body { padding: 0; gap: 14px; }
.tp-card.cta .tp-card__title { color: var(--white); font-size: 20px; }
.tp-card.cta .tp-card__desc { color: rgba(255, 255, 255, 0.78); font-size: 14px; }
.tp-card.cta .tp-card__link { color: var(--green-light); }
.tp-card.cta:hover .tp-card__link { color: var(--white); }
.tp-card.cta__icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(0, 179, 77, 0.18); color: var(--green-light);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 4px;
}
.tp-card.cta__icon svg { width: 26px; height: 26px; }

/* No 2-col intermediate breakpoint — 9 tiles in 2 cols produces a
   4+4+1 orphan in the last row. Skip to 1-col below ~900px instead. */
@media (max-width: 900px) {
  .conditions-photo-grid { grid-template-columns: 1fr; max-width: 480px; gap: 20px; }
}

/* ==========================================================================
   clinic-gallery — 4-up photo grid showing the actual clinic interior.
   2x2 on desktop (no orphan rows). Captions sit below each photo.
   ========================================================================== */
.clinic-gallery { padding: 96px 0; background: var(--cream); }
.clinic-gallery__head { max-width: 760px; margin: 0 auto 56px; text-align: center; padding: 0 24px; }
.clinic-gallery__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
}
.cg-card {
  display: flex; flex-direction: column; gap: 12px;
}
.cg-card__media {
  border-radius: 18px; overflow: hidden; aspect-ratio: 4/3;
  background: var(--navy-soft); border: 1px solid var(--border);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.cg-card:hover .cg-card__media { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cg-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-card__caption {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 700; text-align: center;
  padding: 0 4px;
}
.cg-card__caption strong { color: var(--ink); font-weight: 700; letter-spacing: 0.16em; }
@media (max-width: 600px) { .clinic-gallery__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   section-photo-break — full-bleed photo with optional centered overlay text
   Used between major sections to give the eye a moment, and to make the
   page feel less wall-of-text on a long landing.
   ========================================================================== */
.section-photo-break {
  position: relative; min-height: 380px; overflow: hidden;
  background: var(--navy-soft) center / cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  padding: 80px 24px;
}
.section-photo-break::before {
  content: ""; position: absolute; inset: 0;
  /* Lighter overlay for daytime city photos — the image's blue sky should
     read through, not get crushed. Bottom fade keeps overlay text legible. */
  background: linear-gradient(180deg, rgba(13,26,48,0.20) 0%, rgba(13,26,48,0.55) 100%);
  z-index: 0;
}
.section-photo-break__copy h3, .section-photo-break__copy .eyebrow-accent { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.40); }
.section-photo-break__copy {
  position: relative; z-index: 1; max-width: 720px; text-align: center;
  color: var(--white);
}
.section-photo-break__copy .eyebrow-accent {
  margin: 0 auto 18px; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: var(--white);
}
.section-photo-break__copy .eyebrow-accent::before { background: var(--green-light); }
.section-photo-break__copy h3 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 300; line-height: 1.15; letter-spacing: -0.015em;
  margin: 0;
  color: var(--white);
}
.section-photo-break__copy h3 strong { font-weight: 800; color: var(--green-light); }

/* ==========================================================================
   citation + references-list — inline study superscripts and footnote
   section. Used on mechanism cards where a peer-reviewed reference exists.
   Click on a superscript scrolls to the matching reference entry.
   ========================================================================== */
sup.citation {
  font-size: 0.62em; font-weight: 700;
  color: var(--green); vertical-align: super; line-height: 0;
  padding: 0 2px; margin-left: 1px;
}
sup.citation a {
  color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor;
}
sup.citation a:hover { color: var(--green-light); }

.references-list {
  background: var(--cream-warm); padding: 64px 0;
  border-top: 1px solid var(--border);
}
.references-list__inner { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.references-list h3 {
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 800;
  color: var(--ink-soft); margin-bottom: 22px;
}
.references-list ol { padding-left: 22px; }
.references-list li {
  font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 12px;
  scroll-margin-top: 100px;
}
.references-list li strong { color: var(--ink); font-weight: 700; }
.references-list a {
  color: var(--green); text-decoration: none; border-bottom: 1px dotted var(--green);
}
.references-list a:hover { color: var(--green-light); }
.references-list__note {
  font-size: 12px; color: var(--ink-mute); margin-top: 24px; line-height: 1.6;
  padding-top: 18px; border-top: 1px dashed var(--border);
}

/* ==========================================================================
   ba-gallery — Before/After results gallery (square pairs).
   Each source image is a pre-composed before/after pair (before above /
   after below, or side-by-side) with the clinic watermark already baked in.
   Square 1:1 tiles keep the pair uncropped. A small corner label names the
   case type (Hairline, Crown, Beard…). Reused on the dedicated
   /hair-transplant-before-and-after/ page.
   ========================================================================== */
.ba-gallery {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
  max-width: var(--max); margin: 40px auto 0; padding: 0 24px;
}
.ba-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  background: var(--cream-warm);
  flex: 0 1 calc(33.333% - 14px);
}
/* Landscape (16:9) tiles hold the side-by-side before|after pairs without
   cropping out either half. Flex + center keeps an odd final row tidy. */
.ba-card__media { aspect-ratio: 16 / 9; overflow: hidden; position: relative; }
.ba-card__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block; transition: transform 500ms ease;
}
.ba-card:hover .ba-card__media img { transform: scale(1.05); }
/* Bottom scrim: the label sits over the lower edge (shoulders/shirt), so the
   hairline at the TOP of each before/after stays fully visible. */
.ba-card__media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 84px;
  background: linear-gradient(0deg, rgba(13, 26, 48, 0.55), transparent);
  pointer-events: none; z-index: 1;
}
/* Label sits in a header strip ABOVE the image (order:-1), not overlaid, so
   it never covers the patient's hairline at the top of the photo. */
.ba-card__label {
  position: absolute; bottom: 12px; left: 12px; z-index: 2;
  background: rgba(13, 26, 48, 0.82);
  color: var(--white); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px;
}

/* Patient-story CTA row (Google reviews + more before/afters) */
.patient-story__actions {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px;
}
.patient-story__actions .btn-stars {
  color: var(--gold, #c9a84c); letter-spacing: 0.06em; margin-right: 6px;
}

/* Vertical (portrait) before/after cards for stacked before-above-after pairs. */
.ba-card--tall .ba-card__media { aspect-ratio: 4 / 5; }
/* Square cards for 1:1 before/after composites (e.g. beard results). */
.ba-card--square .ba-card__media { aspect-ratio: 1 / 1; }

/* Video feature (Jorge story): before/after still on the left, video on the right. */
.video-feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  align-items: center; max-width: var(--max); margin: 0 auto;
}
.video-feature > * { min-width: 0; }
.video-feature__media { margin: 0; }
.video-feature__media img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.video-embed {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); background: var(--navy);
}
/* Vertical (9:16) short — phone-style frame, centered in its column. */
.video-embed--vertical { aspect-ratio: 9 / 16; width: 100%; max-width: 300px; margin: 0 auto; }
.video-embed iframe,
.video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video-feature__caption { max-width: 720px; margin: 30px auto 0; text-align: center; }
/* Patient-story feature: taller side photo + a slightly larger phone-frame video. */
.video-feature--story .video-feature__media img { aspect-ratio: 4 / 5; }
.video-feature--story .video-embed--vertical { max-width: 340px; }

/* Two-up video grid (e.g. paired patient testimonials). */
.video-duo {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  max-width: 1000px; margin: 0 auto;
}
@media (max-width: 760px) { .video-duo { grid-template-columns: 1fr; max-width: 520px; } }
@media (max-width: 820px) { .video-feature { grid-template-columns: 1fr; gap: 22px; } }
@media (max-width: 860px) { .ba-card { flex-basis: calc(50% - 10px); } }
@media (max-width: 520px) { .ba-card { flex-basis: 100%; } }