/* Dr Bhavna's Women's Clinic — brand palette from client creatives */
:root {
  --pink: #d9468d;
  --purple: #8a2f83;
  --ink: #5b2168;
  --gold: #f7c948;
  --gold-deep: #f59e0b;
  --teal: #0f766e;
  --blush: #fff7fb;
  --text: #3d3348;
  --muted: #6f6480;
  --line: #f0dfea;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(91, 33, 104, 0.10);
  --font-head: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: #fff;
  line-height: 1.65;
  font-size: 16px;
}

h1, h2, h3 { font-family: var(--font-head); color: var(--ink); line-height: 1.25; }
h1 { font-size: clamp(1.75rem, 4.5vw, 2.75rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; margin-bottom: .75rem; }
h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--purple); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 10px 0; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

.btn:focus-visible,
.cal__day:focus-visible,
.cal__nav:focus-visible,
.slot:focus-visible,
.nav__toggle:focus-visible,
.review-card:focus-visible,
.nav__links a:focus-visible {
  outline: 3px solid var(--gold-deep);
  outline-offset: 2px;
}

.container { width: min(1120px, 92%); margin-inline: auto; }
.container--narrow { width: min(760px, 92%); }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 247, 251, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 14px rgba(91, 33, 104, .07);
}
.nav { display: flex; align-items: center; gap: 1rem; padding: .65rem 0; }
.nav__brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.nav__brand img { border-radius: 10px; }
.nav__brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.nav__brand-text strong { font-family: var(--font-head); color: var(--ink); font-size: 1.02rem; }
.nav__brand-text span:last-child { color: var(--teal); font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
.nav__links { display: flex; align-items: center; gap: 1.4rem; list-style: none; margin-left: auto; }
.nav__links a:not(.btn) { text-decoration: none; color: var(--text); font-weight: 500; font-size: .95rem; white-space: nowrap; }
.nav__links .btn { white-space: nowrap; }
.nav__links a:not(.btn):hover { color: var(--pink); }
.nav__toggle { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; }
.nav__toggle span { display: block; width: 24px; height: 2.5px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: .25s; }
.nav__extra { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; text-decoration: none; font-weight: 600;
  font-family: var(--font-head);
  padding: .6rem 1.25rem; border-radius: 999px; font-size: .95rem;
  transition: transform .15s, box-shadow .15s;
}
.btn--solid {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff; box-shadow: 0 6px 18px rgba(217, 70, 141, .35);
}
.btn--ghost { border: 2px solid var(--purple); color: var(--purple); background: #fff; }
.btn--lg { padding: .85rem 1.7rem; font-size: 1.02rem; }
.btn--sm { padding: .4rem .9rem; font-size: .82rem; }
.btn--block { display: block; text-align: center; margin-top: .7rem; }
.btn:hover { transform: translateY(-2px); }

/* ---------- hero ---------- */
.hero {
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(247, 201, 72, .18), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(217, 70, 141, .12), transparent 60%),
    var(--blush);
  padding: 4rem 0 3.5rem;
}
.hero__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 2.5rem; align-items: center; }
.hero__eyebrow { color: var(--teal); font-weight: 600; letter-spacing: .04em; font-size: .9rem; margin-bottom: .6rem; }
.hero__sub { margin-top: 1rem; font-size: 1.08rem; color: var(--muted); }
.hero__sub strong { color: var(--ink); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.hero__badges { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1.5rem; }
.hero__badges li {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: .3rem .85rem; font-size: .82rem; font-weight: 600; color: var(--purple);
}
.hero__art img { width: 100%; max-width: 420px; }
.about__glance { justify-content: center; margin-top: 2.75rem; }

/* ---------- sections ---------- */
.section { padding: 3.5rem 0; }
.section--tint { background: var(--blush); }
.section__title { text-align: center; }
.section__lead { text-align: center; color: var(--muted); max-width: 620px; margin: 0 auto 2rem; }
.section__grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 2.5rem; align-items: start; }
.section__grid > div > p { margin-bottom: .9rem; }

.about__sidebar { display: flex; flex-direction: column; gap: 1.25rem; }
.about__photo {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius);
  box-shadow: var(--shadow); border: 4px solid #fff;
}
.about__card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow);
}
.ticklist { list-style: none; margin-top: .6rem; }
.ticklist li { padding: .35rem 0 .35rem 1.7rem; position: relative; }
.ticklist li::before {
  content: "✓"; position: absolute; left: 0; top: .35rem;
  color: var(--teal); font-weight: 700;
}

.affil { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.affil__group h3 { color: var(--purple); }

#when-to-visit .container {
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.reasons-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem 2.5rem;
  max-width: 520px; margin: 1.5rem 0 2rem; text-align: left;
}
.reasons-cta { margin-top: .25rem; }

/* ---------- service cards ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.25rem; box-shadow: var(--shadow);
  border-top: 4px solid var(--pink);
}
.card:nth-child(even) { border-top-color: var(--gold-deep); }
.card p { font-size: .92rem; color: var(--muted); }

/* ---------- why ---------- */
.why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2rem; }
.why__item h3 { color: var(--purple); }
.why__item h3::before { content: "— "; color: var(--gold-deep); }
.why__item p { font-size: .93rem; color: var(--muted); }

/* ---------- reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.review-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .25rem; text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.2rem; box-shadow: var(--shadow);
  transition: transform .15s;
}
.review-card:hover { transform: translateY(-3px); }
.review-card__platform { font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.review-card__stars {
  font-size: 1.25rem; letter-spacing: .15em;
  background: linear-gradient(90deg, var(--gold-deep) var(--fill, 100%), #e8d9e4 var(--fill, 100%));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.review-card__badge { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--pink); }
.review-card__score { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--purple); }
.review-card__count { color: var(--muted); font-size: .88rem; }
.review-card__link { margin-top: .6rem; color: var(--pink); font-weight: 600; font-size: .9rem; }
.reviews__note { text-align: center; color: var(--muted); font-size: .8rem; margin-top: 1.2rem; }

@media (max-width: 900px) {
  .reviews { grid-template-columns: 1fr; }
}

/* ---------- clinic ---------- */
.clinic__address { font-style: normal; margin: .8rem 0 1rem; line-height: 1.7; }
.clinic__row { margin-bottom: .6rem; }

/* ---------- booking: calendar + slots ---------- */
.booking { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.1rem; }
.booking__panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; box-shadow: var(--shadow);
}
.booking__step {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1rem; margin-bottom: .9rem; color: var(--ink);
}
.booking__step span {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff; font-size: .85rem; flex-shrink: 0;
}
.booking__step em { font-style: normal; color: var(--teal); font-size: .85rem; font-weight: 600; }
.booking__hint { font-size: .8rem; color: var(--muted); margin-top: .8rem; }

.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.cal__title { font-family: var(--font-head); font-weight: 700; color: var(--purple); }
.cal__nav {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line);
  background: #fff; color: var(--purple); font-size: 1.2rem; cursor: pointer; line-height: 1;
}
.cal__nav:hover:not(:disabled) { border-color: var(--pink); color: var(--pink); }
.cal__nav:disabled { opacity: .35; cursor: default; }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__dow { margin-bottom: 4px; }
.cal__dow span { text-align: center; font-size: .72rem; font-weight: 700; color: var(--muted); }
.cal__day {
  aspect-ratio: 1; border: 1.5px solid transparent; border-radius: 10px;
  background: var(--blush); color: var(--text); font: inherit; font-size: .88rem;
  cursor: pointer;
}
.cal__day:hover:not(:disabled) { border-color: var(--pink); }
.cal__day:disabled { background: transparent; color: #cbbfd2; cursor: default; text-decoration: line-through; }
.cal__day.is-selected {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff; font-weight: 700;
}
.cal__pad { aspect-ratio: 1; }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: .5rem; }
.slot {
  padding: .65rem .25rem; min-height: 44px; border: 1.5px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink); font: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer;
}
.slot:hover:not(:disabled) { border-color: var(--pink); color: var(--pink); }
.slot:disabled { color: #cbbfd2; text-decoration: line-through; cursor: default; }
.slot.is-selected {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  border-color: transparent; color: #fff;
}
.slots__empty { grid-column: 1 / -1; color: var(--muted); font-size: .9rem; }

.appt__selected {
  background: var(--blush); border: 1.5px dashed var(--line); border-radius: 10px;
  padding: .6rem .9rem; font-size: .92rem; color: var(--muted); margin-bottom: 1rem;
}
.appt__selected.is-set { color: var(--purple); font-weight: 600; border-color: var(--pink); border-style: solid; }

@media (max-width: 900px) {
  .booking { grid-template-columns: 1fr; }
}

/* ---------- appointment form ---------- */
.appt {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem; box-shadow: var(--shadow);
}
.appt__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.appt__field { display: block; margin-bottom: 1rem; }
.appt__field span {
  display: block; font-weight: 600; font-size: .88rem; color: var(--ink);
  margin-bottom: .3rem; font-family: var(--font-head);
}
.appt__field input,
.appt__field select,
.appt__field textarea {
  width: 100%; padding: .65rem .8rem; border: 1.5px solid var(--line);
  border-radius: 10px; font: inherit; color: var(--text); background: var(--blush);
}
.appt__field input:focus,
.appt__field select:focus,
.appt__field textarea:focus {
  outline: none; border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(217, 70, 141, .15);
}
.appt__note { min-height: 1.3em; font-size: .88rem; color: #b3261e; margin-bottom: .5rem; line-height: 1.6; }
.appt__note.is-ok { color: var(--teal); }
.appt__note a { color: var(--pink); font-weight: 700; }
.appt__hint { margin-top: .9rem; font-size: .88rem; color: var(--muted); }

@media (max-width: 640px) {
  .appt { padding: 1.25rem; }
  .appt__row { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- faq ---------- */
.faq__item {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: .7rem; padding: 0;
}
.faq__item summary {
  cursor: pointer; font-family: var(--font-head); font-weight: 600; color: var(--ink);
  padding: .95rem 1.2rem; list-style: none; position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: 1.1rem; top: .8rem;
  color: var(--pink); font-size: 1.3rem; font-weight: 600;
}
.faq__item[open] summary::after { content: "–"; }
.faq__item p { padding: 0 1.2rem 1rem; color: var(--muted); }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: #f4e9f6; padding: 2.5rem 0 1.5rem; margin-top: 2rem; }
.footer a { color: var(--gold); }
.footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding-bottom: 1.5rem; }
.footer__brand { font-family: var(--font-head); font-size: 1.1rem; margin-bottom: .4rem; }
.footer__legal { border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 1.2rem; font-size: .82rem; color: #cdb8d6; }
.footer__legal p { margin-bottom: .3rem; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero__grid, .section__grid, .footer__grid, .affil { grid-template-columns: 1fr; }
  .hero__art { display: none; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .why { grid-template-columns: repeat(2, 1fr); }
  .nav__toggle { display: block; }
  .nav__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--blush); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: flex-start; padding: 1rem 5%;
    gap: .9rem; max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .nav__links.is-open { display: flex; }
  .nav__extra {
    display: block; width: 100%;
    border-top: 1px solid var(--line); margin-top: .5rem; padding-top: 1rem;
  }
  .nav__extra-item { margin-bottom: 1.1rem; }
  .nav__extra-item strong {
    display: block; color: var(--ink); font-family: var(--font-head);
    font-size: .92rem; margin-bottom: .35rem;
  }
  .nav__extra-item p { font-size: .87rem; color: var(--muted); margin-bottom: .6rem; line-height: 1.5; }
  .nav__extra-item p a { color: var(--pink); font-weight: 600; }
}

@media (max-width: 640px) {
  .cards, .why { grid-template-columns: 1fr; }
  .reasons-grid { grid-template-columns: 1fr; }
  .hero { padding: 2.5rem 0; }
  /* Reclaim width so the 7-column calendar grid gets the biggest tap targets a 375px screen allows */
  .booking__panel { padding: .85rem; }
  .cal__dow, .cal__grid { gap: 3px; }
  .cal__day { aspect-ratio: auto; min-height: 44px; }
}

/* ============================================================
   MULTI-PAGE: sub-page template + shared components
   ============================================================ */
.crumb { padding: .9rem 0 .2rem; font-size: .85rem; color: var(--muted); }
.crumb a { color: var(--purple); text-decoration: none; font-weight: 600; }
.crumb a:hover { color: var(--pink); }
.crumb span { color: var(--muted); }

/* page hero band */
.phero {
  background:
    radial-gradient(900px 460px at 88% -10%, rgba(247,201,72,.16), transparent 60%),
    radial-gradient(760px 420px at -8% 120%, rgba(217,70,141,.10), transparent 60%),
    var(--blush);
  padding: 2.2rem 0 3rem;
}
.phero__grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 2.5rem; align-items: center; }
.phero__copy h1 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.phero__intro { margin-top: 1rem; font-size: 1.06rem; color: var(--muted); }
.phero__art { display: flex; justify-content: center; }
.phero__photo { width: 100%; max-width: 360px; border-radius: var(--radius); box-shadow: var(--shadow); border: 4px solid #fff; object-fit: cover; }
.phero__photo--real { max-width: 340px; aspect-ratio: 1; }
.phero__photo--cutout { border: 0; box-shadow: none; filter: drop-shadow(0 18px 26px rgba(91,33,104,.20)); background: transparent; max-width: 400px; }
.phero__icon {
  width: 168px; height: 168px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fff, var(--blush));
  border: 1px solid var(--line); box-shadow: var(--shadow);
  display: grid; place-items: center;
}
.phero__icon img { width: 92px; height: 92px; }

/* content + aside */
.pcontent { display: grid; grid-template-columns: 1.7fr .85fr; gap: 2.5rem; align-items: start; }
.pcontent__block { margin-bottom: 1.6rem; }
.pcontent__block h2 { font-size: 1.3rem; margin-bottom: .5rem; }
.pcontent__block p { margin-bottom: .8rem; color: var(--text); }
.pcontent__aside .about__card { position: sticky; top: 90px; }

/* cta band */
.ctaband { background: linear-gradient(135deg, var(--pink), var(--purple)); color: #fff; padding: 3rem 0; }
.ctaband__inner { text-align: center; max-width: 680px; margin-inline: auto; }
.ctaband h2 { color: #fff; }
.ctaband p { color: #fbeaf4; margin: .6rem 0 1.4rem; }
.ctaband .btn--ghost { border-color: #fff; color: #fff; background: transparent; }
.ctaband .btn--solid { background: #fff; color: var(--purple); box-shadow: 0 6px 18px rgba(0,0,0,.18); }

/* related cards */
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.rel-card {
  display: block; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--pink);
  border-radius: 12px; padding: 1.1rem 1.25rem; text-decoration: none; color: var(--ink);
  font-family: var(--font-head); font-weight: 600; box-shadow: var(--shadow); transition: transform .15s;
}
.rel-card:hover { transform: translateY(-3px); color: var(--pink); }

/* footer additions */
.footer__logo { filter: brightness(0) invert(1); opacity: .92; margin-bottom: .7rem; height: auto; }
.footer__h { font-family: var(--font-head); font-weight: 700; color: #fff; margin-bottom: .4rem; }
.footer__grid { grid-template-columns: 1.1fr 1fr 1fr; }
.footer a { color: var(--gold); }

@media (max-width: 900px) {
  .phero__grid { grid-template-columns: 1fr; }
  .phero__art { order: -1; }
  .pcontent { grid-template-columns: 1fr; }
  .pcontent__aside .about__card { position: static; }
  .rel-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HOMEPAGE image system — "Held, and in Good Hands"
   ============================================================ */
.hero__stage { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 500px; }
.hero__aura {
  position: absolute; width: 480px; height: 480px; top: 4%; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 45%, rgba(247,201,72,.20), rgba(217,70,141,.10) 55%, transparent 72%);
  filter: blur(6px); pointer-events: none; z-index: 0;
}
.hero__lotus {
  position: absolute; width: 300px; height: auto; top: 26%; left: 50%;
  transform: translateX(-52%); opacity: .16; filter: blur(1px);
  pointer-events: none; z-index: 0;
}
.hero__mom {
  position: relative; z-index: 1; width: min(430px, 100%); height: auto;
  object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 24px 34px rgba(91,33,104,.26));
}
.hero__cred {
  position: absolute; z-index: 2; bottom: 12%; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 94%;
  background: rgba(255,255,255,.78); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.6); border-radius: 999px;
  padding: .5rem 1rem; font-size: .78rem; font-weight: 600; color: var(--ink);
  box-shadow: 0 8px 22px rgba(91,33,104,.16); white-space: nowrap;
}
.hero__cred-ck { color: var(--teal); font-weight: 800; margin-right: .2rem; }

/* care-journey ribbon (5 teal icons) */
.journey {
  display: flex; justify-content: center; gap: .3rem; flex-wrap: nowrap;
  margin: 0 auto 2.2rem; max-width: 860px;
}
.journey__step {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  text-decoration: none; flex: 1; position: relative; min-width: 0; padding: 0 .2rem;
}
.journey__step:not(:last-child)::after {
  content: ""; position: absolute; top: 38px; left: 62%; width: 76%;
  border-top: 2px dashed rgba(15,118,110,.35); z-index: 0;
}
.journey__icon {
  width: 76px; height: 76px; border-radius: 50%; background: var(--blush);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  display: grid; place-items: center; position: relative; z-index: 1; transition: transform .15s;
}
.journey__icon img { width: 46px; height: 46px; }
.journey__step:hover .journey__icon { transform: translateY(-3px); }
.journey__label { font-family: var(--font-head); font-weight: 600; font-size: .8rem; color: var(--ink); text-align: center; line-height: 1.2; }

/* service cards as links */
a.card { text-decoration: none; color: inherit; display: block; transition: transform .15s, box-shadow .15s; }
a.card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(91,33,104,.16); }
.card__more { display: inline-block; margin-top: .6rem; color: var(--pink); font-weight: 700; font-size: .9rem; font-family: var(--font-head); }

/* services authority cutout */
.svc-head { position: relative; }
.svc-head__art {
  position: absolute; right: 0; top: -10px; width: 340px; height: auto;
  filter: drop-shadow(0 16px 24px rgba(91,33,104,.16)); pointer-events: none; z-index: 0;
}
@media (min-width: 961px) {
  /* .svc-head__art is absolutely positioned (taken out of flow), so without this the
     journey icon row right after it renders as if the image weren't there and the
     image's bottom edge overlaps the icons. Reserve enough height to clear it. */
  .svc-head { min-height: 240px; }
}

/* pregnancy band */
.pband { background: #fff; }
.pband__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.pband__media { position: relative; }
.pband__photo { width: 100%; max-width: 560px; height: auto; border-radius: var(--radius); border: 4px solid #fff; box-shadow: var(--shadow); object-fit: cover; }
.pband__sticker {
  position: absolute; bottom: -22px; left: -18px; width: 124px; height: 124px;
  border-radius: 50%; border: 4px solid #fff; box-shadow: var(--shadow);
  object-fit: cover; background: var(--blush);
}

/* when-to-visit two-col with flatlay */
.wtv-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2.5rem; align-items: center; text-align: left; }
.wtv__art { width: 100%; max-width: 420px; height: auto; filter: drop-shadow(0 16px 24px rgba(91,33,104,.14)) saturate(.9); }
#when-to-visit .container.wtv-grid { display: grid; }

/* clinic imaging inset */
.clinic__imaging {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--teal);
  box-shadow: var(--shadow); max-width: 300px;
}
.clinic__imaging img { width: 100%; height: auto; display: block; filter: saturate(.94); }
.clinic__imaging figcaption { font-size: .8rem; color: var(--muted); padding: .5rem .75rem; background: #fff; }

/* appointment illustration */
.appt-illus { display: block; max-width: 300px; height: auto; margin: 0 auto 1.2rem; }

@media (max-width: 960px) {
  /* show hero-mom on mobile, after the copy, capped */
  .hero__art { display: block !important; }
  .hero__stage { min-height: 0; margin-top: 1.5rem; }
  .hero__mom { width: min(260px, 74%); }
  .hero__aura { width: 300px; height: 300px; }
  .hero__lotus { width: 200px; }
  .hero__cred { font-size: .68rem; padding: .4rem .8rem; bottom: 8%; }
  .pband__grid, .wtv-grid { grid-template-columns: 1fr; }
  .journey { flex-wrap: wrap; gap: 1rem 1.4rem; }
  .journey__step { flex: 0 0 26%; }
  .journey__step::after { display: none; }
  .svc-head__art { display: none; }
}
@media (max-width: 640px) {
  .journey__step { flex: 0 0 40%; }
  .hero__cred { white-space: normal; text-align: center; border-radius: 14px; }
}

/* ============================================================
   ASK A QUESTION + BLOG
   ============================================================ */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.ask-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2.5rem; align-items: start; }
.ask-aside { text-align: center; }
.ask-photo { width: 190px; height: 190px; border-radius: 50%; object-fit: cover; border: 5px solid #fff; box-shadow: var(--shadow); margin: 0 auto 1rem; }
.ask-aside h2 { margin-bottom: .4rem; }
.ask-safe { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 12px; padding: .75rem .9rem; font-size: .85rem; color: #9a3412; margin-top: 1.1rem; text-align: left; }
.ask-safe a { color: #9a3412; font-weight: 700; }
.ask-hi { font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: 1.15rem; margin-bottom: 1rem; }

/* blog hub */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(91,33,104,.16); }
.blog-card__img { aspect-ratio: 16/9; background: var(--blush); overflow: hidden; display: grid; place-items: center; }
.blog-card__img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__body { padding: 1.1rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .35rem; }
.blog-card__meta { font-size: .78rem; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .03em; }
.blog-card__body h3 { font-size: 1.1rem; line-height: 1.3; }
.blog-card__body p { font-size: .92rem; color: var(--muted); }

/* article */
.article { padding-top: 2rem; }
.article__meta { font-size: .85rem; color: var(--muted); }
.article__meta a { color: var(--purple); font-weight: 600; }
.article h1 { margin: .6rem 0 1rem; font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.article__hero { width: 100%; max-width: 100%; height: auto; max-height: 300px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); border: 4px solid #fff; margin-bottom: 1.6rem; }
.article__body h2 { font-size: 1.3rem; margin: 1.6rem 0 .5rem; color: var(--ink); }
.article__body p { margin-bottom: .9rem; line-height: 1.75; }
.article__faq { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.article__faq h2 { margin-bottom: 1rem; }

@media (max-width: 900px) {
  .ask-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
}

/* ---------- conditions we treat grid ---------- */
/* flex + justify-content:center (not CSS Grid) so an incomplete last row centers
   instead of hugging the left edge with dangling empty space beside it — this stays
   correct no matter how many condition tiles get added or removed later. */
.cond-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 1rem; margin-bottom: 1.5rem; }
.cond { display: flex; flex: 0 1 120px; flex-direction: column; align-items: center; gap: .6rem; text-decoration: none; text-align: center; }
.cond__img { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: var(--shadow); background: var(--blush); transition: transform .15s; }
.cond__img img { width: 100%; height: 100%; object-fit: cover; }
.cond:hover .cond__img { transform: translateY(-4px); }
.cond__label { font-family: var(--font-head); font-weight: 600; font-size: .88rem; color: var(--ink); line-height: 1.25; }
.cond:hover .cond__label { color: var(--pink); }
.cond-note { text-align: center; color: var(--muted); font-size: .92rem; }
.cond-note a { color: var(--pink); font-weight: 700; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6rem; }
.gallery-item { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); background: #fff; }
.gallery-item img { width: 100%; height: 320px; object-fit: cover; display: block; }
.gallery-item figcaption { padding: .9rem 1.1rem; font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: .95rem; }
.gallery-more { text-align: center; color: var(--muted); font-size: .95rem; margin-top: 2rem; }

/* ============================================================
   POLISH PASS — depth, motion, signature details
   ============================================================ */

/* brand-consistent selection + scrollbar */
::selection { background: var(--pink); color: #fff; }
html { scrollbar-color: var(--pink) var(--blush); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--blush); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--pink), var(--purple)); border-radius: 999px; border: 2px solid var(--blush); }
::-webkit-scrollbar-thumb:hover { background: var(--purple); }

/* elevation tokens (kept alongside the existing --shadow for compatibility) */
:root {
  --shadow-sm: 0 4px 14px rgba(91, 33, 104, .08);
  --shadow-lg: 0 20px 44px rgba(91, 33, 104, .18);
  --ease-out: cubic-bezier(.22, .68, 0, 1.01);
}

/* signature underline on every section title — a consistent brand mark */
.section__title { position: relative; padding-bottom: .7rem; }
.section__title::after {
  content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 54px; height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--pink), var(--gold-deep));
}

/* gradient accent utility, used sparingly on hero headlines */
.text-grad {
  background: linear-gradient(135deg, var(--pink), var(--gold-deep));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* sticky header — subtle compaction once the page has scrolled */
.header { transition: box-shadow .3s var(--ease-out); }
.header.is-scrolled { box-shadow: 0 4px 26px rgba(91, 33, 104, .16); }
.header.is-scrolled .nav { padding: .48rem 0; transition: padding .3s var(--ease-out); }
.nav { transition: padding .3s var(--ease-out); }

/* button shine sweep */
.btn { position: relative; overflow: hidden; }
.btn--solid::after {
  content: ""; position: absolute; inset: 0 auto 0 -60%; width: 40%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .4), transparent);
  transform: skewX(-18deg); transition: left .6s var(--ease-out);
}
.btn--solid:hover::after { left: 130%; }
.btn--solid:hover { box-shadow: 0 10px 26px rgba(217, 70, 141, .42); }
.btn--ghost:hover { background: var(--blush); box-shadow: 0 6px 16px rgba(91, 33, 104, .12); }

/* richer, consistently-eased card lift */
a.card:hover,
.review-card:hover,
.blog-card:hover,
.rel-card:hover {
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  box-shadow: var(--shadow-lg);
}
.cond__img, .journey__icon { transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.cond:hover .cond__img, .journey__step:hover .journey__icon { box-shadow: var(--shadow-lg); }

/* faq: rotating indicator + gentle highlight on open, instead of an instant character swap */
.faq__item { transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.faq__item summary::after { transition: transform .25s var(--ease-out); }
.faq__item[open] summary::after { content: "+"; transform: rotate(45deg); }
.faq__item[open] { border-color: var(--pink); box-shadow: var(--shadow-sm); }

/* hero credential pill — a slow, tasteful float */
@keyframes creditFloat { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } }
.hero__cred { animation: creditFloat 5.5s ease-in-out infinite; }

/* scroll-reveal for below-the-fold sections (progressive enhancement — see script.js) */
body.reveal-ready .section,
body.reveal-ready .ctaband,
body.reveal-ready .pband,
body.reveal-ready #when-to-visit {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
body.reveal-ready .section.is-visible,
body.reveal-ready .ctaband.is-visible,
body.reveal-ready .pband.is-visible,
body.reveal-ready #when-to-visit.is-visible {
  opacity: 1; transform: none;
}

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

/* ============================================================
   POLISH PASS 2 — independent art-director review, curated
   ============================================================ */

/* -- typography: hierarchy, measure, wrap quality -- */
h1 { letter-spacing: -0.02em; line-height: 1.12; }
h2 { letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 0.4em; }
h3 { font-weight: 600; line-height: 1.35; }
.phero__copy h1 { letter-spacing: -0.02em; }
.pcontent__block h2 { margin-bottom: 0.4em; }
.section__lead { font-size: 1.05rem; line-height: 1.6; }
.pcontent__block, .article__body { max-width: 68ch; }
.card p, .why__item p, .review-card__count, .footer__legal { line-height: 1.5; }
h1, h2, .section__title, .card h3, .rel-card, .cond__label { text-wrap: balance; }
.pcontent__block p, .article__body p, .section__lead { text-wrap: pretty; }

/* -- depth: compound shadows replace single-layer blur everywhere via the shared tokens -- */
:root {
  --shadow-sm: 0 1px 2px rgba(91, 33, 104, .07), 0 5px 14px rgba(91, 33, 104, .09);
  --shadow:    0 2px 5px rgba(91, 33, 104, .06), 0 14px 32px rgba(91, 33, 104, .13);
  --shadow-lg: 0 4px 10px rgba(91, 33, 104, .09), 0 26px 52px rgba(91, 33, 104, .18);
  --shadow-chip: 0 1px 2px rgba(91, 33, 104, .10), 0 6px 14px rgba(91, 33, 104, .14);
  --radius-photo: 18px;
}
.journey__icon, .cond__img, .phero__icon, .pband__sticker { box-shadow: var(--shadow-chip); }
.journey__step:hover .journey__icon, .cond:hover .cond__img { box-shadow: 0 3px 6px rgba(91, 33, 104, .12), 0 10px 22px rgba(91, 33, 104, .20); }
.appt, .booking__panel { box-shadow: var(--shadow-lg); }
.card, .review-card, .blog-card, .rel-card, .faq__item, .gallery-item { box-shadow: var(--shadow-sm); }
.gallery-item { transition: box-shadow .3s var(--ease-out), border-color .3s var(--ease-out); border: 1px solid var(--line); }
.gallery-item:hover { box-shadow: var(--shadow-lg); }
.section--tint { background: linear-gradient(180deg, #fff, var(--blush) 64px); }
.cal__day.is-selected, .slot.is-selected { box-shadow: 0 8px 20px rgba(217, 70, 141, .32); }
.footer {
  position: relative;
  background:
    radial-gradient(560px 280px at 12% -10%, rgba(247, 201, 72, .07), transparent 60%),
    radial-gradient(560px 280px at 88% 110%, rgba(217, 70, 141, .09), transparent 60%),
    var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* -- imagery: dedicated photo radius, live hover response, honest crops -- */
.about__photo, .phero__photo, .pband__photo, .article__hero, .clinic__imaging, .gallery-item { border-radius: var(--radius-photo); }
.gallery-item img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s var(--ease-out); }
.gallery-item:hover img { transform: scale(1.045); }
.blog-card__img img { transition: transform .5s var(--ease-out); }
.blog-card:hover .blog-card__img img { transform: scale(1.06); }
.phero__icon img, .journey__icon img { width: 55%; height: 55%; object-fit: contain; }
.ask-photo { border: 4px solid #fff; }
.clinic__imaging { border: 1px solid var(--line); border-top: 3px solid var(--teal); }
:root {
  --cutout-shadow-lg: 0 24px 34px rgba(91,33,104,.24);
  --cutout-shadow-md: 0 18px 26px rgba(91,33,104,.20);
  --cutout-shadow-sm: 0 14px 20px rgba(91,33,104,.15);
}
.hero__mom { filter: drop-shadow(var(--cutout-shadow-lg)); }
.phero__photo--cutout { filter: drop-shadow(var(--cutout-shadow-md)); }
.svc-head__art, .wtv__art { filter: drop-shadow(var(--cutout-shadow-sm)); }

/* -- motion: tactile booking feedback, FAQ reveal, staggered grids, directional affordances -- */
.cal__day, .slot {
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out),
              border-color .25s var(--ease-out), box-shadow .25s var(--ease-out),
              transform .15s var(--ease-out);
}
.cal__day.is-selected, .slot.is-selected { animation: selectSettle .32s var(--ease-out); }
@keyframes selectSettle {
  0%   { transform: scale(.93); }
  60%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}
.appt__field input, .appt__field select, .appt__field textarea {
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s var(--ease-out);
}
.faq__item[open] p { animation: faqReveal .35s var(--ease-out); }
@keyframes faqReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

body.reveal-ready .cards .card,
body.reveal-ready .reviews .review-card,
body.reveal-ready .cond-grid .cond,
body.reveal-ready .blog-grid .blog-card {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
body.reveal-ready .is-visible .cards .card,
body.reveal-ready .is-visible .reviews .review-card,
body.reveal-ready .is-visible .cond-grid .cond,
body.reveal-ready .is-visible .blog-grid .blog-card {
  opacity: 1; transform: none;
}
.cards .card:nth-child(2), .reviews .review-card:nth-child(2),
.cond-grid .cond:nth-child(2), .blog-grid .blog-card:nth-child(2) { transition-delay: .07s; }
.cards .card:nth-child(3), .reviews .review-card:nth-child(3),
.cond-grid .cond:nth-child(3), .blog-grid .blog-card:nth-child(3) { transition-delay: .14s; }
.cards .card:nth-child(4), .cond-grid .cond:nth-child(4) { transition-delay: .21s; }
.cond-grid .cond:nth-child(5) { transition-delay: .28s; }
.cond-grid .cond:nth-child(6) { transition-delay: .35s; }

.nav__links a:not(.btn) { position: relative; }
.nav__links a:not(.btn)::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 0; height: 2px;
  border-radius: 999px; background: linear-gradient(90deg, var(--pink), var(--gold-deep));
  transition: width .25s var(--ease-out), left .25s var(--ease-out);
}
.nav__links a:not(.btn):hover::after { width: 100%; left: 0; }
.card__more::after { content: "\2192"; display: inline-block; margin-left: .3em; transition: transform .25s var(--ease-out); }
a.card:hover .card__more::after { transform: translateX(4px); }
.rel-card { position: relative; padding-right: 2.1rem; }
.rel-card::after {
  content: "\2192"; position: absolute; right: 1.1rem; top: 50%; transform: translate(0,-50%);
  color: var(--pink); opacity: 0; transition: opacity .2s var(--ease-out), transform .25s var(--ease-out);
}
.rel-card:hover::after { opacity: 1; transform: translate(4px,-50%); }

/* branded skeleton loader for the booking widget's availability fetch */
.slot-skeleton {
  height: 44px; border-radius: 999px; border: 1.5px solid var(--line);
  background: linear-gradient(90deg, var(--blush) 25%, #f3e0ee 37%, var(--blush) 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}
@keyframes skeletonShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } }

/* ---------- testimonial grid (real reviews, patient-reviews page) ---------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.4rem; margin-top: 2rem; }
.testimonial-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-photo);
  padding: 1.4rem 1.3rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .7rem;
  transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.testimonial-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.testimonial-card__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.testimonial-card__name { font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: .96rem; }
.testimonial-card__stars { color: var(--gold-deep); font-size: .9rem; letter-spacing: .08em; white-space: nowrap; }
.testimonial-card__badge { color: var(--pink); font-weight: 700; font-size: .82rem; white-space: nowrap; }
.testimonial-card__text {
  font-style: normal; font-size: .91rem; color: var(--text); line-height: 1.6; flex: 1;
  quotes: "\201C" "\201D"; margin: 0;
}
.testimonial-card__text::before { content: open-quote; color: var(--pink); font-weight: 700; }
.testimonial-card__text::after { content: close-quote; color: var(--pink); font-weight: 700; }
.testimonial-card__meta { font-size: .78rem; color: var(--muted); }
.testimonial-card__source { font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .03em; }