/* ============================================================
   Dr Neeraj Jain — Paediatrician & Paediatric Cardiologist
   Design system: navy #072A3C · blue #167EB4 · green #014235
   Type: Fraunces (display) + Inter (body)
   ============================================================ */

:root {
  --navy: #072a3c;
  --navy-800: #0b3a52;
  --blue: #167eb4;
  --blue-dark: #0f5478;
  --blue-light: #73aecd;
  --blue-pale: #eaf4fa;
  --green: #014235;
  --green-mid: #35685e;
  --green-pale: #e8f1ee;
  --cream: #faf5eb;
  --cream-light: #fffdf7;
  --ink: #14212b;
  --muted: #5a6b77;
  --line: #e3e9ed;
  --white: #ffffff;
  --shadow-sm: 0 2px 8px rgba(7, 42, 60, 0.06);
  --shadow-md: 0 10px 30px rgba(7, 42, 60, 0.1);
  --shadow-lg: 0 24px 60px rgba(7, 42, 60, 0.16);
  --radius: 16px;
  --radius-sm: 10px;
  --font-display: "Lora", Georgia, serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --container: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--blue-dark); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--blue); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy);
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 88px 0; }
.section--cream { background: var(--cream-light); }
.section--pale { background: var(--blue-pale); }
.section--tight { padding: 56px 0; }

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.eyebrow--green { color: var(--green-mid); }

.section-title {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 18px;
}

.section-lead {
  font-size: 18px;
  color: var(--muted);
  max-width: 720px;
}

.center { text-align: center; }
.center .section-lead { margin: 0 auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15.5px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(22, 126, 180, 0.32);
}
.btn--primary:hover {
  background: var(--blue-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(22, 126, 180, 0.4);
}
.btn--outline {
  border-color: var(--blue);
  color: var(--blue-dark);
  background: transparent;
}
.btn--outline:hover { background: var(--blue); color: var(--white); transform: translateY(-2px); }
.btn--light {
  background: var(--white);
  color: var(--navy);
}
.btn--light:hover { background: var(--cream); color: var(--navy); transform: translateY(-2px); }
.btn--ghost-light {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.9);
  font-size: 13.5px;
  padding: 8px 0;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar a { color: var(--white); font-weight: 500; }
.topbar a:hover { color: var(--blue-light); }
.topbar__group { display: flex; align-items: center; gap: 22px; }
.topbar__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.topbar__item svg { width: 14px; height: 14px; opacity: 0.8; }
.topbar__note { color: var(--blue-light); font-weight: 500; }

/* ---------- Header / nav ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s;
}
.header.is-scrolled { box-shadow: var(--shadow-md); }
.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 82px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark { width: 46px; height: 46px; flex: none; }
.brand__name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.1;
}
.brand__tag {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav > li { list-style: none; position: relative; }
.nav a.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  border-radius: 8px;
}
.nav a.nav__link:hover, .nav a.nav__link.is-active { color: var(--blue); background: var(--blue-pale); }
.nav .caret { width: 12px; height: 12px; transition: transform 0.2s; }
.nav li:hover .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 250px;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  list-style: none;
}
.nav li:hover > .dropdown, .nav li:focus-within > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown a {
  display: block;
  padding: 9px 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  border-radius: 8px;
}
.dropdown a:hover { background: var(--blue-pale); color: var(--blue-dark); }

.header__cta { display: flex; align-items: center; gap: 12px; }
.header__cta .btn { padding: 11px 22px; font-size: 14.5px; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--navy);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue-dark) 55%, var(--blue) 100%);
  color: var(--white);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: end;
  padding-top: 84px;
  position: relative;
  z-index: 2;
}
.hero__content { padding-bottom: 96px; }
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 24px;
}
.hero__badge svg { width: 15px; height: 15px; }
.hero h1 {
  color: var(--white);
  font-size: clamp(38px, 5.4vw, 58px);
  margin-bottom: 8px;
}
.hero__creds {
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-light);
  font-weight: 600;
  margin-bottom: 22px;
}
.hero__sub {
  font-size: 18.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.88);
  max-width: 560px;
  margin-bottom: 34px;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }
.hero__quote {
  border-left: 3px solid var(--blue-light);
  padding-left: 18px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
  font-style: italic;
  max-width: 480px;
}
.hero__portrait-wrap {
  position: relative;
  align-self: end;
  display: flex;
  justify-content: center;
}
.hero__portrait-circle {
  position: absolute;
  bottom: -120px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.hero__portrait {
  position: relative;
  z-index: 2;
  max-height: 520px;
  width: auto;
  border-radius: 18px 18px 0 0;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.35));
}
/* Landscape hero photo: floating rounded card instead of bottom-anchored cut-out */
.hero__portrait--landscape {
  max-height: none;
  width: 100%;
  border-radius: 18px;
  margin-bottom: 72px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.hero__ecg {
  position: absolute;
  bottom: 24px;
  left: 0;
  width: 100%;
  z-index: 1;
  opacity: 0.35;
  pointer-events: none;
}
.hero__ecg path {
  fill: none;
  stroke: var(--white);
  stroke-width: 2;
  stroke-dasharray: 2200;
  stroke-dashoffset: 2200;
  animation: ecg-draw 6s linear infinite;
}
@keyframes ecg-draw {
  0% { stroke-dashoffset: 2200; }
  60% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -2200; }
}

/* ---------- Stat strip ---------- */
.stats {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  margin-top: -56px;
  position: relative;
  z-index: 5;
}
.stat {
  padding: 30px 24px;
  text-align: center;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: none; }
.stat__num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  color: var(--blue-dark);
  line-height: 1.1;
}
.stat__label { font-size: 14px; color: var(--muted); margin-top: 6px; }
.stat__label strong { color: var(--navy); font-size: 15.5px; }
.stat__icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 10px;
  border-radius: 12px;
  background: var(--blue-pale);
  color: var(--blue-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat__icon svg { width: 24px; height: 24px; }

/* Rating badges */
.rating-badges {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.rating-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 18px 34px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  color: var(--muted);
  font-size: 13.5px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.rating-badge:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--muted); }
.rating-badge strong {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--navy);
}
.rating-badge__stars { color: #e8a33d; font-size: 15px; letter-spacing: 2px; }

/* Affiliation name chips */
.affil-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.affil-chip {
  padding: 10px 22px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--navy);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

/* ---------- Cards ---------- */
.grid { display: grid; gap: 26px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-light);
}

/* Subtle line-art illustrations in service cards */
.card { position: relative; overflow: hidden; }
.card > * { position: relative; z-index: 1; }
.card[class*="illus-"]::after {
  content: "";
  position: absolute;
  right: -16px;
  bottom: -16px;
  width: 148px;
  height: 148px;
  background: var(--illus) center/contain no-repeat;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.illus-heart { --illus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23cfe3f0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 86C22 64 10 46 10 31A17 17 0 0 1 44 26 17 17 0 0 1 90 31C90 46 78 64 50 86Z'/%3E%3Cpolyline points='18 52 36 52 43 38 51 66 58 48 82 48'/%3E%3C/svg%3E"); }
.illus-echo { --illus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23cfe3f0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 55 24 55 31 37 41 72 50 44 56 55 96 55'/%3E%3Ccircle cx='50' cy='16' r='7'/%3E%3Cpath d='M50 23v10'/%3E%3C/svg%3E"); }
.illus-murmur { --illus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23cfe3f0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M38 74C18 58 10 45 10 34A13 13 0 0 1 36 30 13 13 0 0 1 62 34C62 45 55 58 38 74Z'/%3E%3Cpath d='M72 34a16 16 0 0 1 0 26'/%3E%3Cpath d='M82 26a30 30 0 0 1 0 42'/%3E%3C/svg%3E"); }
.illus-faint { --illus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23cfe3f0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 62a12 12 0 1 1 12-12'/%3E%3Cpath d='M50 74a24 24 0 1 1 24-24'/%3E%3Cpath d='M50 86a36 36 0 1 1 36-36'/%3E%3C/svg%3E"); }
.illus-chest { --illus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23cfe3f0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 84C26 66 16 50 16 37A15 15 0 0 1 46 33 15 15 0 0 1 84 37C84 50 74 66 50 84Z'/%3E%3Cpolyline points='55 30 45 50 58 50 45 72'/%3E%3C/svg%3E"); }
.illus-lungs { --illus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23cfe3f0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 14v26M50 40l-8 8M50 40l8 8'/%3E%3Cpath d='M42 50C38 36 18 40 16 60C14 78 26 86 40 82C44 80 44 72 42 50Z'/%3E%3Cpath d='M58 50C62 36 82 40 84 60C86 78 74 86 60 82C56 80 56 72 58 50Z'/%3E%3C/svg%3E"); }
.illus-bottle { --illus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23cfe3f0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='50' cy='16' r='7'/%3E%3Cpath d='M44 26h12v8H44z'/%3E%3Crect x='38' y='34' width='24' height='52' rx='8'/%3E%3Cpath d='M38 52h24M38 66h24'/%3E%3C/svg%3E"); }
.illus-baby { --illus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23cfe3f0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='50' cy='48' r='26'/%3E%3Cpath d='M50 22c-2-6 2-10 8-9'/%3E%3Ccircle cx='41' cy='44' r='1.5'/%3E%3Ccircle cx='59' cy='44' r='1.5'/%3E%3Cpath d='M42 57c4 4 12 4 16 0'/%3E%3C/svg%3E"); }
.illus-secondop { --illus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23cfe3f0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='44' cy='44' r='24'/%3E%3Cpath d='M61 61 82 82'/%3E%3Cpolyline points='33 44 41 52 56 34'/%3E%3C/svg%3E"); }
.illus-video { --illus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23cfe3f0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='12' y='30' width='52' height='40' rx='8'/%3E%3Cpath d='M64 44l24-12v36L64 56z'/%3E%3C/svg%3E"); }
.card__icon {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: var(--blue-pale);
  color: var(--blue-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.card__icon svg { width: 28px; height: 28px; }
.card--green .card__icon { background: var(--green-pale); color: var(--green); }
.card h3 { font-size: 21px; margin-bottom: 10px; }
.card p { font-size: 15px; color: var(--muted); flex: 1; }
.card__link {
  margin-top: 18px;
  font-weight: 600;
  font-size: 14.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue-dark);
}
.card__link svg { width: 15px; height: 15px; transition: transform 0.2s; }
.card:hover .card__link svg { transform: translateX(4px); }

/* ---------- Split (image + text) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split__img {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.split__img img { width: 100%; height: 100%; object-fit: cover; }
.split__img--portrait {
  background: linear-gradient(160deg, var(--blue-pale), var(--cream));
  padding: 32px 32px 0;
}
.split__img--portrait img { object-fit: contain; }

.checklist { list-style: none; margin: 22px 0; }
.checklist li {
  padding: 9px 0 9px 36px;
  position: relative;
  font-size: 16px;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23014235' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ---------- Feature list (numbered) ---------- */
.steps { counter-reset: step; list-style: none; display: grid; gap: 18px; }
.steps li {
  counter-increment: step;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 20px 24px 20px 74px;
  position: relative;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 22px;
  top: 20px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--blue-light);
}
.steps h4 { font-size: 17.5px; margin-bottom: 4px; font-family: var(--font-body); font-weight: 600; }
.steps p { font-size: 14.5px; color: var(--muted); }

/* ---------- Testimonials ---------- */
.quote-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 34px 30px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.quote-card::before {
  content: "\201C";
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1;
  color: var(--blue-light);
  position: absolute;
  top: 18px;
  left: 24px;
  opacity: 0.5;
}
.quote-card p { font-size: 15.5px; color: var(--ink); margin: 26px 0 18px; font-style: italic; }
.quote-card footer { font-size: 13.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Logo strip ---------- */
.logo-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 6vw, 72px);
  flex-wrap: wrap;
}
.logo-strip img {
  height: 54px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 0.25s, opacity 0.25s;
}
.logo-strip img:hover { filter: grayscale(0); opacity: 1; }

/* ---------- Locations ---------- */
.location-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
}
.location-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.location-card__head {
  background: linear-gradient(135deg, var(--navy), var(--blue-dark));
  color: var(--white);
  padding: 22px 26px;
}
.location-card__head h3 { color: var(--white); font-size: 20px; }
.location-card__body { padding: 24px 26px; font-size: 15px; color: var(--muted); flex: 1; }
.location-card__body strong { color: var(--ink); }
.location-card__row {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  align-items: flex-start;
}
.location-card__row svg { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--blue); }
.hours { margin-top: 4px; }
.hours span { display: inline-block; background: var(--blue-pale); color: var(--blue-dark); font-size: 13px; font-weight: 600; border-radius: 6px; padding: 3px 10px; margin: 3px 4px 3px 0; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--navy) 0%, var(--blue-dark) 60%, var(--blue) 100%);
  color: var(--white);
  border-radius: var(--radius);
  padding: 64px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
}
.cta-band h2 { color: var(--white); font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 10px; }
.cta-band p { color: rgba(255, 255, 255, 0.85); max-width: 560px; }
.cta-band .btn { position: relative; z-index: 2; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue-dark) 70%, var(--blue) 100%);
  color: var(--white);
  padding: 72px 0 64px;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -180px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}
.breadcrumb {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 18px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumb a { color: rgba(255, 255, 255, 0.85); }
.breadcrumb a:hover { color: var(--white); }
.page-hero h1 { color: var(--white); font-size: clamp(32px, 4.6vw, 48px); margin-bottom: 14px; max-width: 800px; }
.page-hero p { font-size: 18px; color: rgba(255, 255, 255, 0.85); max-width: 680px; }

/* ---------- Prose / info blocks ---------- */
.prose { max-width: 780px; }
.prose p { margin-bottom: 18px; }
.prose h2 { font-size: 28px; margin: 40px 0 16px; }
.prose h3 { font-size: 21px; margin: 30px 0 12px; }
.prose ul { margin: 0 0 18px 22px; }
.prose li { margin-bottom: 8px; }

.info-callout {
  background: var(--blue-pale);
  border-left: 4px solid var(--blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 22px 26px;
  margin: 28px 0;
  font-size: 15.5px;
}
.info-callout--green { background: var(--green-pale); border-left-color: var(--green); }
.info-callout strong { color: var(--navy); }

/* ---------- FAQ accordion ---------- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.faq[open] { box-shadow: var(--shadow-sm); border-color: var(--blue-light); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 56px 20px 24px;
  font-weight: 600;
  font-size: 16.5px;
  color: var(--navy);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f5478' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 0.25s;
}
.faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__body { padding: 0 24px 22px; color: var(--muted); font-size: 15.5px; }

/* ---------- Tables ---------- */
.fee-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.fee-table th {
  background: var(--navy);
  color: var(--white);
  text-align: left;
  padding: 16px 22px;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fee-table td {
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
}
.fee-table tr:last-child td { border-bottom: none; }
.fee-table td:last-child { font-weight: 600; color: var(--blue-dark); white-space: nowrap; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 7px;
  color: var(--navy);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(22, 126, 180, 0.12);
}
.field textarea { min-height: 130px; resize: vertical; }

/* ---------- Slot picker (video consultations) ---------- */
.slot-btn {
  padding: 9px 16px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-dark);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.slot-btn:hover { border-color: var(--blue); transform: translateY(-1px); }
.slot-btn.is-selected {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

/* ---------- Form progress bar ---------- */
.form-progress { margin-bottom: 26px; }
.form-progress__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.form-progress__status {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blue-dark);
  transition: color 0.3s;
}
.form-progress__pct {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
}
.form-progress__track {
  height: 10px;
  border-radius: 999px;
  background: var(--blue-pale);
  position: relative;
}
.form-progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue-light), var(--blue));
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.form-progress__heart {
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translate(50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--blue);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(7, 42, 60, 0.18);
  transition: border-color 0.3s, color 0.3s;
}
.form-progress__heart svg { width: 13px; height: 13px; }
.form-progress.is-complete .form-progress__status { color: var(--green); }
.form-progress.is-complete .form-progress__fill {
  background: linear-gradient(90deg, var(--blue), var(--green-mid));
}
.form-progress.is-complete .form-progress__heart {
  border-color: var(--green);
  color: #d64550;
  animation: heartbeat 1s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 100% { transform: translate(50%, -50%) scale(1); }
  15% { transform: translate(50%, -50%) scale(1.25); }
  30% { transform: translate(50%, -50%) scale(1); }
  45% { transform: translate(50%, -50%) scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .form-progress.is-complete .form-progress__heart { animation: none; }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.78);
  padding: 72px 0 0;
  font-size: 14.5px;
}
.footer a { color: rgba(255, 255, 255, 0.78); }
.footer a:hover { color: var(--white); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 48px;
  padding-bottom: 48px;
}
.footer__brand img { height: 64px; width: auto; margin-bottom: 18px; }
.footer h4 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer ul { list-style: none; }
.footer li { margin-bottom: 10px; }
.footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer__contact svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--blue-light); }
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- Reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__ecg path { animation: none; stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .hero__grid { grid-template-columns: 1fr; gap: 0; }
  /* Mobile: keep the portrait, smaller and centred under the text */
  .hero__portrait-wrap { justify-content: center; padding-top: 8px; }
  .hero__portrait-circle { display: none; }
  .hero__portrait { max-height: 400px; border-radius: 18px 18px 0 0; }
  .hero__portrait--landscape { max-height: none; border-radius: 18px; margin-bottom: 84px; }
  .hero__content { padding-bottom: 48px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .split { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 860px) {
  /* backdrop-filter would make .header the containing block for the
     fixed-position mobile menu — disable it below the breakpoint */
  .header { backdrop-filter: none; background: var(--white); }
  .nav {
    position: fixed;
    inset: 82px 0 0 0;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
    gap: 2px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 99;
  }
  .nav.is-open { transform: translateX(0); }
  .nav a.nav__link { padding: 14px 12px; font-size: 17px; justify-content: space-between; }
  .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 0 0 8px 18px;
    display: none;
  }
  .nav li.is-open > .dropdown { display: block; }
  .nav-toggle { display: block; }
  .header__cta .btn { display: none; }
  .topbar__note { display: none; }
}

@media (max-width: 640px) {
  .section { padding: 60px 0; }
  .brand__mark { width: 38px; height: 38px; }
  .brand__name { font-size: 17px; }
  .brand__tag { font-size: 9px; letter-spacing: 0.08em; }
  .topbar { font-size: 12.5px; }
  .fee-table { display: block; overflow-x: auto; }
  .fee-table th, .fee-table td { padding: 12px 14px; font-size: 14px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .cta-band { padding: 44px 28px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .topbar__group:last-child { display: none; }
}