/* ==========================================================================
   MMCLI Design System — prototype
   Palette derived from the real MMCLI seal: royal blue, gold, rose.
   Softened with warm cream so the site reads maternal rather than clinical.
   ========================================================================== */

:root {
  /* Brand — lifted from the logo, lightened so photos and text carry more.
     --navy is kept as the variable name so every component updates at once. */
  --navy:        #2B5FB8;   /* primary blue — 6.1:1 against white, passes AA */
  --navy-deep:   #1E4A96;   /* hover / deeper bands */
  --navy-soft:   #EBF1FB;   /* tint backgrounds */
  --navy-light:  #7FA8E0;   /* light accents on dark */
  --gold:        #FFC629;
  --gold-soft:   #FFF6DC;
  --rose:        #E8657F;
  --rose-soft:   #FDEEF1;

  /* Entity accents — each keeps its own identity */
  --birth:       #2B5FB8;   /* Birthing Center — brand blue */
  --birth-soft:  #EBF1FB;
  --care:        #3F7F73;   /* Care Center brand teal */
  --care-blue:   #135190;   /* Care Center brand blue */
  --care-yellow: #FBD746;   /* Care Center brand yellow */
  --care-soft:   #EAF4F2;
  --mcc:         #B54F22;   /* MCC — warm terracotta (5.1:1 on white, passes AA) */
  --mcc-soft:    #FBEBE2;

  /* Neutrals — warm, not grey */
  --cream:       #FDFBF7;
  --cream-2:     #F7F2E9;
  --ink:         #2A2723;
  --ink-soft:    #5C564E;
  --ink-faint:   #8A8279;
  --line:        #E7E0D4;
  --white:       #FFFFFF;

  --radius:      14px;
  --radius-lg:   22px;
  --shadow:      0 1px 3px rgba(42,39,35,.06), 0 8px 24px rgba(42,39,35,.05);
  --shadow-lift: 0 4px 12px rgba(42,39,35,.10), 0 16px 40px rgba(42,39,35,.09);
  --max:         1140px;
}

/* -------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
  color: var(--ink);
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1.1em; }
p.lead { font-size: 1.2rem; color: var(--ink-soft); line-height: 1.6; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------- layout */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }
section { padding: 76px 0; }
section.tight { padding: 52px 0; }
.center { text-align: center; }
.eyebrow {
  font-size: .78rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: .9em;
  font-family: "Inter", sans-serif;
}

/* -------------------------------------------------------------- prototype bar */
.proto-bar {
  background: var(--ink); color: #F5F1EA; font-size: .8rem;
  padding: 7px 24px; text-align: center; letter-spacing: .02em;
}
.proto-bar strong { color: var(--gold); font-weight: 600; }

/* -------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253,251,247,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(28px, 3vw, 52px); padding-top: 10px; padding-bottom: 10px;
}
.site-header .header-inner { max-width: 1540px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.brand:hover { text-decoration: none; }
/* Source PNG was cropped to the seal's bounding box and its outer white made
   transparent — before that, ~60% of the file was blank margin, which is why
   the mark looked tiny no matter what size was set here. */
.brand img { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; }
img[src*="mmcli-care-logo.jpg"] { border-radius: 50%; }
.brand-text { line-height: 1.2; }
.brand-name {
  font-family: Georgia, serif; font-size: 1.17rem; color: var(--navy); display: block; white-space: nowrap;
}
.brand-sub {
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap;
}
@media (max-width: 700px) {
  .brand img { width: 62px; height: 62px; }
  .brand-name { font-size: 1.08rem; }
  .brand-sub { font-size: .66rem; }
}
@media (max-width: 460px) {
  .brand { gap: 9px; max-width: calc(100% - 48px); }
  .brand img { width: 52px; height: 52px; }
  .brand-text { min-width: 0; }
  .brand-name { font-size: .96rem; white-space: normal; }
  .brand-sub { display: none; }
}
.nav { display: flex; align-items: center; gap: clamp(13px, 1.15vw, 22px); flex-shrink: 0; }
.nav a {
  position: relative; color: var(--ink-soft); font-size: .84rem; text-decoration: none; white-space: nowrap;
  padding: 10px 0; border-bottom: 0; transition: color .18s ease;
}
.nav a + a::before {
  content: "·"; position: static; display: inline-block; margin: 0 clamp(9px, .8vw, 14px) 0 0;
  color: var(--line); font-weight: 700;
}
.nav a:not(.btn)::after {
  content:""; position:absolute; left:0; right:0; bottom:5px; height:2px;
  background:var(--gold); border-radius:2px; transform:scaleX(0); transform-origin:center;
  transition:transform .18s ease;
}
.nav a:hover { color: var(--navy); text-decoration: none; }
.nav a:hover::after,.nav a:focus-visible::after,.nav a.active::after { transform:scaleX(1); }
.nav a.active { color: var(--navy); }
/* Header CTA — Book a Visit / Cart.
   IMPORTANT: `.nav a` (0,1,1) outranks `.btn` (0,1,0), so the button rules
   must be written as `.nav a.btn` or the nav link styles silently win and
   crush the padding back to 6px 0. */
.nav a.btn {
  padding: 14px 28px;
  margin-left: 2px;
  border-bottom: 0;
  letter-spacing: .01em;
  line-height: 1;
}
.nav a.btn-primary,
.nav a.btn-care,
.nav a.btn-mcc { color: #fff; }
.nav a.btn-primary:hover,
.nav a.btn-care:hover,
.nav a.btn-mcc:hover { color: #fff; border-bottom: 0; }
.nav a.btn-outline { color: var(--ink); }

.menu-toggle {
  display: none; place-items:center; width:46px; height:46px; border:1px solid var(--line);
  border-radius:50%; background:var(--white); padding:8px; color:var(--navy);
  transition:background .18s ease,transform .18s ease;
}
.menu-toggle:hover { background:var(--navy-soft); transform:translateY(-1px); }

/* Standard laptops keep the brand and every destination on one line. */
@media (min-width: 1100px) and (max-width: 1460px) {
  .header-inner { gap: 18px; }
  .brand { gap: 9px; }
  .brand img { width: 58px; height: 58px; }
  .brand-name { font-size: 1.02rem; }
  .brand-sub { font-size: .62rem; letter-spacing: .075em; }
  .nav { gap: 12px; min-width: 0; }
  .nav a { font-size: .74rem; }
  .nav a.btn { padding: 11px 17px; }
}

/* Narrow tablets use two rows so every destination stays visible. */
@media (min-width: 701px) and (max-width: 1099px) {
  .header-inner { flex-wrap: wrap; gap: 4px 24px; }
  .nav {
    order: 3; flex-basis: 100%; justify-content: center; flex-wrap: wrap;
    gap: 0 clamp(18px, 2vw, 32px); padding-top: 4px;
    border-top: 1px solid rgba(222,214,202,.72);
  }
  .nav a { font-size: .8rem; }
  .nav a.btn { padding: 12px 24px; }
}

@media (max-width: 700px) {
  .nav {
    display: flex; position: absolute; top: calc(100% + 1px); left: 24px; right: 24px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(253,251,247,.98); border: 1px solid var(--line); border-radius:0 0 var(--radius-lg) var(--radius-lg);
    padding: 8px 24px 20px; box-shadow: var(--shadow-lift);
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s;
  }
  .nav.open { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav a + a::before { display:none; }
  .nav a:not(.btn)::after { display:none; }
  .nav a.btn { margin: 14px 0 0; text-align: center; padding: 16px 30px; }
  .menu-toggle { display: grid; }
  .site-header .wrap { position: relative; }
}
@media (max-width: 560px) {
  .nav { left:12px; right:12px; padding-left:18px; padding-right:18px; }
}

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 32px; border-radius: 999px; border: 1.5px solid transparent;
  font-size: .96rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--navy-deep); box-shadow: var(--shadow-lift); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: #F5B800; }
.btn-outline { border-color: var(--line); color: var(--ink); background: var(--white); }
.btn-outline:hover { border-color: var(--navy); color: var(--navy); }
.btn-ghost { color: var(--ink-soft); padding-left: 0; padding-right: 0; }
.btn-ghost:hover { color: var(--navy); }
.btn-lg { padding: 17px 42px; font-size: 1.03rem; }
.btn-block { width: 100%; }
.btn-care { background: var(--care); color: #fff; }
.btn-care:hover { background: #266659; }
.btn-mcc { background: var(--mcc); color: #fff; }
.btn-mcc:hover { background: #99411A; }

/* -------------------------------------------------------------- hero */
/* Lighter scrim: the photo now reads at ~70% instead of 40%, and the blue
   wash sits mostly behind the text column so the image can breathe on the right. */
.hero { position: relative; padding: 0; background: var(--navy); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(103deg, rgba(30,74,150,.88) 0%, rgba(43,95,184,.62) 46%, rgba(43,95,184,.18) 100%);
}
.hero-inner { position: relative; z-index: 2; padding: 96px 0 104px; max-width: 660px; }
.hero h1 { color: #fff; margin-bottom: .35em; text-shadow: 0 2px 18px rgba(20,45,95,.45); }
.hero p.lead { color: #fff; margin-bottom: 1.8em; text-shadow: 0 1px 12px rgba(20,45,95,.5); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-trust {
  margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 22px;
  font-size: .84rem; color: #fff; text-shadow: 0 1px 10px rgba(20,45,95,.55);
}
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust svg { color: var(--gold); flex-shrink: 0; }

/* page hero (subpages) */
.page-hero { padding: 68px 0 60px; border-bottom: 1px solid var(--line); }
.page-hero.birth { background: var(--birth-soft); }
.page-hero.care  { background: var(--care-soft); }
.page-hero.mcc   { background: var(--mcc-soft); }

/* ---- Page hero photograph ---------------------------------------------- */
/* Unlike the navy home hero, this band is pale with dark text on it, so the
   photo has to be knocked back much harder: a dark image behind dark type
   destroys contrast far faster than the same image behind white. It is held to
   the right so the headline and lead sit over flat colour, and masked so it
   fades out before it reaches them. */
.page-hero.has-media { position: relative; overflow: hidden; }
.page-hero.has-media > .wrap { position: relative; z-index: 1; }
.page-hero-media {
  position: absolute; inset: 0 0 0 auto; width: 58%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 42%, #000 78%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 42%, #000 78%);
}
.page-hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 42% 45%;
  opacity: .70; filter: grayscale(1) contrast(.92) brightness(1.02);
}
@media (max-width: 860px) {
  /* The text column takes the full width here, so a side panel would sit under
     it. Fade from the bottom instead, and further back still. */
  .page-hero-media {
    width: 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 58%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 58%, #000 100%);
  }
  .page-hero-media img { opacity: .40; }
}
.page-hero h1 { max-width: 15ch; }
.page-hero p.lead { max-width: 52ch; }
.entity-lockup { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.entity-lockup img { width: 78px; height: 78px; object-fit: contain; }
.entity-lockup .entity-mark {
  width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center;
  font-family: Georgia, serif; font-size: 1.35rem; color: #fff; flex-shrink: 0;
}
.entity-lockup .name {
  font-family: Georgia, serif; font-size: 1.15rem; line-height: 1.25;
}
.entity-lockup .kicker {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
}

/* -------------------------------------------------------------- doors */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .doors { grid-template-columns: 1fr; } }

.door {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px 30px 30px; display: flex; flex-direction: column;
  text-decoration: none; color: inherit; position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.door::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--accent, var(--navy));
}
.door:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-lift);
  border-color: var(--accent, var(--navy)); text-decoration: none;
}
.door-mark {
  width: 76px; height: 76px; border-radius: 50%; margin-bottom: 22px;
  display: grid; place-items: center; background: var(--accent-soft, var(--navy-soft));
}
.door-mark img { width: 72px; height: 72px; object-fit: contain; }
.door-mark span { font-family: Georgia, serif; font-size: 1.3rem; color: var(--accent, var(--navy)); }
.door h3 { font-size: 1.45rem; margin-bottom: .3em; }
.door p { color: var(--ink-soft); font-size: .97rem; flex-grow: 1; }
.door-meta {
  font-size: .84rem; color: var(--ink-faint); margin-bottom: 20px;
  padding-top: 14px; border-top: 1px dashed var(--line);
}
.door-link {
  font-weight: 500; color: var(--accent, var(--navy)); font-size: .96rem;
  display: inline-flex; align-items: center; gap: 7px;
}
.door:hover .door-link { gap: 12px; }
.door-link svg { transition: transform .18s ease; }

/* -------------------------------------------------------------- router */
.router { background: var(--cream-2); }
.router-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 780px; margin: 0 auto; }
@media (max-width: 700px) { .router-grid { grid-template-columns: 1fr; } }
.router-item {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; text-decoration: none; color: var(--ink); font-size: 1.02rem;
  transition: border-color .15s ease, transform .15s ease;
}
.router-item:hover {
  border-color: var(--navy); transform: translateX(3px); text-decoration: none;
}
.router-item svg { color: var(--ink-faint); flex-shrink: 0; }
.router-item:hover svg { color: var(--navy); }

/* -------------------------------------------------------------- features */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
@media (max-width: 940px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }
.feature-icon {
  width: 44px; height: 44px; border-radius: 12px; background: var(--gold-soft);
  display: grid; place-items: center; color: var(--navy); margin-bottom: 16px;
}
.feature h3 { font-size: 1.08rem; margin-bottom: .35em; }
.feature p { font-size: .94rem; color: var(--ink-soft); margin: 0; }

/* -------------------------------------------------------------- testimonial */
.testimonial { background: var(--navy); color: #fff; }
.testimonial blockquote {
  margin: 0; font-family: Georgia, serif; font-size: clamp(1.35rem, 2.9vw, 1.85rem);
  line-height: 1.5; color: #fff;
}
.testimonial-author {
  margin-top: 26px; display: flex; align-items: center; gap: 14px; justify-content: center;
}
.testimonial-avatar {
  width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.14);
  display: grid; place-items: center; font-family: Georgia, serif; color: var(--gold);
}
.testimonial-name { font-size: .95rem; color: rgba(255,255,255,.92); }
.testimonial-name small { display: block; color: rgba(255,255,255,.6); font-size: .84rem; }

/* -------------------------------------------------------------- cards / lists */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card-grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .card-grid, .card-grid.two { grid-template-columns: 1fr; } }
.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 26px;
}
a.card { display: block; color: inherit; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.card h3 { font-size: 1.15rem; }
.card p { font-size: .95rem; color: var(--ink-soft); }
.card p:last-child { margin-bottom: 0; }

/* price card */
.price-card { position: relative; display: flex; flex-direction: column; }
.price-card.featured { border-color: var(--accent, var(--navy)); border-width: 2px; }
.price-tag {
  font-family: Georgia, serif; font-size: 2.1rem; color: var(--accent, var(--navy));
  line-height: 1; margin: 6px 0 4px;
}
.price-note { font-size: .82rem; color: var(--ink-faint); margin-bottom: 20px; }
.price-badge {
  position: absolute; top: -11px; right: 22px; background: var(--gold); color: var(--ink);
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
}
.check-list { list-style: none; padding: 0; margin: 0 0 24px; flex-grow: 1; }
.check-list li {
  position: relative; padding-left: 28px; margin-bottom: 11px;
  font-size: .94rem; color: var(--ink-soft);
}
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent-soft, var(--navy-soft));
}
.check-list li::after {
  content: ""; position: absolute; left: 5px; top: .72em;
  width: 6px; height: 3px; border-left: 1.8px solid var(--accent, var(--navy));
  border-bottom: 1.8px solid var(--accent, var(--navy));
  transform: rotate(-45deg);
}

/* steps */
.steps { counter-reset: step; display: grid; gap: 6px; }
.step {
  display: grid; grid-template-columns: 46px 1fr; gap: 18px;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.step:last-child { border-bottom: 0; }
.step-num {
  counter-increment: step; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-soft, var(--navy-soft)); color: var(--accent, var(--navy));
  display: grid; place-items: center; font-family: Georgia, serif; font-size: 1.05rem;
}
.step-num::before { content: counter(step); }
.step h3 { font-size: 1.08rem; margin-bottom: .25em; }
.step p { font-size: .95rem; color: var(--ink-soft); margin: 0; }

/* -------------------------------------------------------------- products */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .product-grid { grid-template-columns: repeat(2, 1fr); } }
.product {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: transform .16s ease, box-shadow .16s ease;
}
.product:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); text-decoration: none; }
.product-img {
  aspect-ratio: 1; background: var(--mcc-soft); display: grid; place-items: center;
  color: var(--mcc); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.product-body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex-grow: 1; }
.product-name { font-size: .97rem; line-height: 1.35; margin-bottom: 6px; flex-grow: 1; }
.product-price { font-family: Georgia, serif; font-size: 1.2rem; color: var(--mcc); }
.product-stock { font-size: .78rem; color: var(--ink-faint); margin-top: 2px; }

/* -------------------------------------------------------------- misc blocks */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 34px; } }

.photo-slot {
  aspect-ratio: 4/3; border-radius: var(--radius-lg); background: var(--cream-2);
  border: 1px dashed var(--line); display: grid; place-items: center; text-align: center;
  color: var(--ink-faint); font-size: .84rem; padding: 20px;
}

/* Filled state: the dashed placeholder border and centring would frame a real
   photograph like a missing asset, so the slot becomes a plain figure. */
.photo-slot.has-photo {
  position: relative; display: block; padding: 0; overflow: hidden;
  border-style: solid; margin: 0;
}
.photo-slot.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-slot.has-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 18px 12px; font-size: .78rem; color: #fff; text-align: left;
  background: linear-gradient(to top, rgba(18,28,24,.72), rgba(18,28,24,0));
}

.callout {
  background: var(--gold-soft); border-left: 4px solid var(--gold);
  padding: 22px 26px; border-radius: 0 var(--radius) var(--radius) 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); }

.pill-row { display: flex; flex-wrap: wrap; gap: 9px; }
.pill {
  background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 16px; font-size: .88rem; color: var(--ink-soft);
}

.partner-story-list { display:grid; gap:32px; }
.partner-story { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px; align-items:center; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-soft); overflow:hidden; }
.partner-story:nth-child(even) figure { order:2; }
.partner-story figure { margin:0; border-radius:calc(var(--radius-lg) - 8px); overflow:hidden; background:var(--cream-2); aspect-ratio:1200/627; display:grid; place-items:center; }
.partner-story figure img { width:100%; height:100%; display:block; object-fit:cover; transform:scale(1.08); }
.partner-story > div { min-width:0; padding:18px 14px; }
.partner-mark { width:156px; min-height:74px; display:grid; place-items:center; margin-bottom:18px; color:var(--ink); font-family:var(--font-serif); font-size:1.15rem; font-weight:700; }
.partner-mark img { max-width:100%; max-height:78px; object-fit:contain; display:block; }
.partner-mark.text-mark { justify-content:start; font-size:1.35rem; letter-spacing:.02em; }
.partner-story h3 { margin:0 0 12px; }
.partner-story p:not(.eyebrow) { color:var(--ink-soft); }
.partner-story .btn { margin-top:10px; max-width:100%; white-space:normal; text-align:center; }


.faq details, .faq-list details {
  border-bottom: 1px solid var(--line); padding: 20px 0;
}
.faq summary, .faq-list summary {
  cursor: pointer; font-size: 1.05rem; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker, .faq-list summary::-webkit-details-marker { display: none; }
.faq summary::after, .faq-list summary::after { content: "+"; font-size: 1.5rem; color: var(--ink-faint); line-height: 1; }
.faq details[open] summary::after, .faq-list details[open] summary::after { content: "\2013"; }
.faq details p, .faq-list details p { margin: 14px 0 0; color: var(--ink-soft); font-size: .96rem; max-width: 68ch; }
.faq-list { margin: 18px 0 28px; }

/* -------------------------------------------------------------- visit / cta */
.visit { background: var(--cream-2); }
.visit-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .visit-grid { grid-template-columns: 1fr; gap: 32px; } }
.map-slot {
  aspect-ratio: 16/11; border-radius: var(--radius-lg); background: var(--navy-soft);
  border: 1px solid var(--line); display: grid; place-items: center; color: var(--navy);
  font-size: .88rem; text-align: center; padding: 20px;
}
.map-slot:has(iframe) { padding: 0; overflow: hidden; }
.map-slot iframe { width: 100%; height: 100%; border: 0; display: block; }
.detail-row { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.detail-row:last-of-type { border-bottom: 0; }
.detail-row svg { color: var(--navy); flex-shrink: 0; margin-top: 3px; }
.detail-row .label { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.detail-row .value { font-size: 1rem; }

.cta-band { background: var(--navy); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.85); max-width: 54ch; margin-left: auto; margin-right: auto; }
.cta-band .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.cta-band .btn-outline:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }

/* -------------------------------------------------------------- footer */
.site-footer { background: var(--ink); color: #C9C3B9; padding: 62px 0 28px; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 32px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 {
  color: #fff; font-family: "Inter", sans-serif; font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px;
}
.site-footer a { color: #C9C3B9; text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: none; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.footer-brand { display: flex; gap: 15px; align-items: center; margin-bottom: 18px; }
.footer-brand img { width: 74px; height: 74px; object-fit: contain; }
.footer-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  font-size: .84rem; color: #8F8880;
}
.site-credit { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:22px; color:#C9C3B9; font-size:.82rem; }
.site-credit--light { color:var(--ink-soft); }
.site-credit img { display:block; width:112px; height:auto; object-fit:contain; }
.detail-footer .site-credit { width:auto; margin:0 0 0 12px; padding-left:22px; border-left:1px solid rgba(255,255,255,.16); }
@media (max-width:560px) { .detail-footer .site-credit { width:100%; margin:8px 0 0; padding:14px 0 0; border-left:0; border-top:1px solid rgba(255,255,255,.16); } }

/* -------------------------------------------------------------- chat bubble */
.chat-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  background: var(--navy); color: #fff; border: 0; border-radius: 999px;
  padding: 14px 22px; display: inline-flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-lift); font-size: .94rem;
}
.chat-fab:hover { background: var(--navy-deep); }
.chat-panel {
  position: fixed; right: 22px; bottom: 84px; z-index: 60; width: min(340px, calc(100vw - 44px));
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift); overflow: hidden; display: none;
}
.chat-panel.open { display: block; }
.chat-head { background: var(--navy); color: #fff; padding: 16px 20px; }
.chat-head strong { display: block; font-family: Georgia, serif; font-weight: 400; font-size: 1.05rem; }
.chat-head small { color: rgba(255,255,255,.7); font-size: .78rem; }
.chat-body { padding: 18px 20px; }
.chat-msg {
  background: var(--cream-2); border-radius: 14px 14px 14px 4px;
  padding: 12px 15px; font-size: .92rem; color: var(--ink-soft); margin-bottom: 14px;
}
.chat-suggest { display: grid; gap: 8px; }
.chat-suggest button {
  background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 15px; font-size: .87rem; color: var(--navy); text-align: left;
}
.chat-suggest button:hover { border-color: var(--navy); }
.chat-foot {
  padding: 12px 20px 16px; font-size: .74rem; color: var(--ink-faint);
  border-top: 1px solid var(--line); background: var(--cream);
}

/* emergency */
.emergency {
  background: var(--rose-soft); border: 1px solid #F5C9D2; border-radius: var(--radius);
  padding: 18px 22px; display: flex; gap: 14px; align-items: flex-start;
}
.emergency svg { color: var(--rose); flex-shrink: 0; margin-top: 2px; }
.emergency p { margin: 0; font-size: .93rem; color: var(--ink-soft); }
.emergency strong { color: var(--ink); }

/* ==========================================================================
   INTERACTIVE COMPONENTS
   ========================================================================== */

/* --- filter chips (team directory, product categories) --- */
.filter-row { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 18px; font-size: .89rem; color: var(--ink-soft); cursor: pointer;
  transition: all .15s ease;
}
.chip:hover { border-color: var(--accent, var(--navy)); color: var(--accent, var(--navy)); }
.chip[aria-pressed="true"] {
  background: var(--accent, var(--navy)); border-color: var(--accent, var(--navy)); color: #fff;
}

/* --- practitioner directory --- */
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .people-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .people-grid { grid-template-columns: 1fr; } }
.person {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; display: flex; gap: 15px; align-items: flex-start;
  animation: fadeUp .28s ease both;
}
.person[hidden] { display: none; }
.person-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-soft, var(--navy-soft)); color: var(--accent, var(--navy));
  display: grid; place-items: center; font-family: Georgia, serif; font-size: 1.02rem;
}
.person-photo {
  width: 82px; height: 82px; aspect-ratio: 1; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; border: 1px solid var(--line); background: var(--cream-2);
}
.person-photo-link { display: block; width: 82px; aspect-ratio: 1; overflow: hidden; border-radius: 50%; flex-shrink: 0; line-height: 0; }
.person-photo-link .person-photo { width: 100%; height: 100%; }
@media (max-width: 600px) { .person-photo-link { width: 72px; } }
@media (max-width: 600px) { .person-photo { width: 72px; height: 72px; } }
.person-name { font-size: 1rem; line-height: 1.3; margin-bottom: 3px; font-weight: 500; }
.person-role { font-size: .85rem; color: var(--ink-soft); line-height: 1.45; }
.person-tag {
  display: inline-block; margin-top: 8px; font-size: .72rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent, var(--navy));
  background: var(--accent-soft, var(--navy-soft)); padding: 3px 10px; border-radius: 999px;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.result-count { font-size: .9rem; color: var(--ink-faint); margin: 22px 0 18px; }

/* --- "who should I see?" finder --- */
.finder {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 34px 32px;
}
.finder-q { font-family: Georgia, serif; font-size: 1.3rem; margin-bottom: 20px; }
.finder-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
@media (max-width: 640px) { .finder-opts { grid-template-columns: 1fr; } }
.finder-opt {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px; text-align: left; font-size: .97rem; color: var(--ink);
  transition: all .15s ease;
}
.finder-opt:hover {
  border-color: var(--accent, var(--navy)); background: var(--accent-soft, var(--navy-soft));
  transform: translateX(3px);
}
.finder-result { animation: fadeUp .3s ease both; }
.finder-result h3 { font-size: 1.2rem; margin-bottom: .3em; }

/* --- due date calculator --- */
.calc {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 32px;
}
.calc label { display: block; font-size: .88rem; color: var(--ink-soft); margin-bottom: 8px; }
.calc input[type="date"] {
  width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 1rem; background: var(--cream); color: var(--ink);
}
.calc-out { margin-top: 26px; animation: fadeUp .3s ease both; }
.calc-out[hidden] { display: none; }
.calc-hero {
  background: var(--accent-soft, var(--navy-soft)); border-radius: var(--radius);
  padding: 24px; text-align: center; margin-bottom: 22px;
}
.calc-edd {
  font-family: Georgia, serif; font-size: 2rem; color: var(--accent, var(--navy)); line-height: 1.1;
}
.calc-week { font-size: .95rem; color: var(--ink-soft); margin-top: 8px; }
.calc-bar {
  height: 9px; border-radius: 999px; background: var(--line);
  margin: 18px 0 8px; overflow: hidden;
}
.calc-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--accent, var(--navy)); transition: width .5s cubic-bezier(.4,0,.2,1);
}
.calc-bar-labels {
  display: flex; justify-content: space-between; font-size: .76rem; color: var(--ink-faint);
}
.visit-list { list-style: none; padding: 0; margin: 0; }
.visit-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .94rem;
}
.visit-list li:last-child { border-bottom: 0; }
.visit-when { color: var(--ink-faint); font-size: .86rem; white-space: nowrap; }
.visit-list li.done { color: var(--ink-faint); }
.visit-list li.next { font-weight: 500; color: var(--accent, var(--navy)); }

/* --- branch cards (two locations) --- */
.branches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 800px) { .branches { grid-template-columns: 1fr; } }
.branch {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px 26px; border-top: 5px solid var(--accent, var(--navy));
}
.branch h3 { font-size: 1.2rem; margin-bottom: .2em; }
.branch .branch-for {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent, var(--navy)); margin-bottom: 14px;
}
.branch address { font-style: normal; color: var(--ink-soft); font-size: .95rem; margin-bottom: 14px; }
.branch .tel { display: block; font-size: 1rem; margin-bottom: 4px; }

/* --- promo strip --- */
.promo {
  background: var(--gold-soft); border: 1px dashed var(--gold);
  border-radius: var(--radius); padding: 22px 26px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
}
.promo-text strong { color: var(--ink); }
.promo-text { font-size: .96rem; color: var(--ink-soft); margin: 0; }

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

/* 2026 need-first MMCLI ecosystem */
.ecosystem-hero { min-height: 680px; display:flex; align-items:center; position:relative; overflow:hidden; color:#fff; background:radial-gradient(120% 130% at 82% 18%,#2f6cb8 0%,#255d9f 42%,#164a86 100%); }
.ecosystem-hero::after { content:""; position:absolute; inset:0; background:radial-gradient(90% 120% at 88% 22%,rgba(58,116,196,.30) 0%,rgba(20,58,120,0) 62%); }
.ecosystem-hero .hero-media { position:absolute; inset:0 0 0 auto; width:66%; pointer-events:none; -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 40%,#000 74%); mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 40%,#000 74%); }
.ecosystem-hero .hero-media img { width:100%; height:100%; object-fit:cover; object-position:52% 42%; opacity:.60; filter:grayscale(1) contrast(.95); }
.ecosystem-hero-inner { position:relative; z-index:1; width:100%; }
.ecosystem-hero h1 { color:#fff; max-width:14ch; font-size:clamp(2.7rem,6vw,4.7rem); }
.ecosystem-hero .lead { color:rgba(255,255,255,.9); max-width:630px; }
.ecosystem-hero .eyebrow { color:#ffe07a; }
.ecosystem-hero .hero-actions { margin-top:28px; }
.hero-note { color:rgba(255,255,255,.72); font-size:.9rem; max-width:590px; margin-top:22px; }
.modern-hero-grid { display:grid; grid-template-columns:minmax(0,1fr); align-items:center; padding-top:78px; padding-bottom:78px; }
.hero-copy { min-width:0; max-width:900px; }
.story-gallery { overflow:hidden; padding:76px 0; background:linear-gradient(180deg,#fff,var(--cream-2)); }
.story-gallery-intro { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:44px; align-items:end; margin-bottom:36px; }
.story-gallery-intro h2 { max-width:18ch; margin-bottom:0; }
.story-gallery-intro > p { max-width:52ch; margin:0; color:var(--ink-soft); }
.photo-stream { width:100%; overflow:hidden; padding:7px 0; }
.photo-track,.photo-set { display:flex; width:max-content; gap:14px; }
.photo-track { animation:photo-drift 76s linear infinite; }
.care-stream .photo-track { animation-direction:reverse; animation-duration:46s; }
.photo-set { padding-right:14px; }
.photo-set a { display:block; width:clamp(240px,24vw,360px); aspect-ratio:10/7; flex:none; overflow:hidden; border-radius:22px; box-shadow:0 10px 30px rgba(17,43,78,.12); }
.photo-set img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.photo-set a:hover img,.photo-set a:focus-visible img { transform:scale(1.04); }
.photo-stream:hover .photo-track,.photo-stream:focus-within .photo-track { animation-play-state:paused; }
.story-gallery-actions { display:flex; justify-content:center; gap:12px; margin-top:30px; }
@keyframes photo-drift { to { transform:translateX(calc(-50% - 7px)); } }
.care-compass { position:relative; overflow:hidden; padding:30px; color:var(--ink); background:rgba(255,255,255,.93); border:1px solid rgba(255,255,255,.72); border-radius:30px; box-shadow:0 30px 80px rgba(7,29,67,.32); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.care-compass::before { content:""; position:absolute; width:190px; height:190px; top:-105px; right:-70px; border-radius:50%; background:radial-gradient(circle,rgba(249,196,51,.26),rgba(249,196,51,0) 72%); pointer-events:none; }
.care-compass-kicker { margin:0 0 9px; color:var(--navy); font-size:.73rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.care-compass h2 { max-width:13ch; margin-bottom:22px; font-size:clamp(1.5rem,2.4vw,2.05rem); }
.care-compass-links { display:grid; gap:8px; }
.care-compass-links a { display:grid; grid-template-columns:34px 1fr; column-gap:12px; align-items:center; padding:12px 13px; color:var(--ink); text-decoration:none; border:1px solid transparent; border-radius:15px; transition:background .18s ease,border-color .18s ease,transform .18s ease; }
.care-compass-links a:hover,.care-compass-links a:focus-visible { background:var(--navy-soft); border-color:rgba(43,95,184,.16); text-decoration:none; transform:translateX(4px); }
.care-compass-links a > span { grid-row:1/3; width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:var(--navy); color:#fff; font-size:.7rem; font-weight:700; }
.care-compass-links strong { font-size:.93rem; }
.care-compass-links small { color:var(--ink-soft); line-height:1.35; }
.care-compass-help { display:flex; justify-content:space-between; gap:12px; margin-top:18px; padding-top:17px; border-top:1px solid var(--line); color:var(--navy); font-size:.88rem; font-weight:650; text-decoration:none; }
.care-compass-help:hover { text-decoration:none; color:var(--navy-deep); }
.reading-progress { position:fixed; z-index:200; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg,var(--gold),#ffe98a,var(--care)); transform:scaleX(0); transform-origin:0 50%; pointer-events:none; }
.site-header.is-scrolled { box-shadow:0 12px 38px rgba(21,37,66,.1); }
.btn-hero-outline { border-color:rgba(255,255,255,.7); color:#fff; background:rgba(255,255,255,.08); }
.btn-hero-outline:hover { color:#fff; background:rgba(255,255,255,.16); text-decoration:none; }
.section-intro { max-width:760px; margin:0 0 42px; }
.section-intro.center { margin-left:auto; margin-right:auto; }
.section-intro > p:last-child { color:var(--ink-soft); }
.needs-section { background:#fff; }
.need-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.need-card { display:flex; flex-direction:column; min-height:260px; padding:26px 24px; border:1px solid var(--line); border-radius:var(--radius); color:var(--ink); text-decoration:none; transition:transform .18s,box-shadow .18s,border-color .18s; }
.need-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lift); text-decoration:none; border-color:var(--accent); }
.need-card.birth-need { --accent:var(--birth); background:linear-gradient(145deg,#fff,var(--birth-soft)); }
.need-card.care-need { --accent:var(--care); background:linear-gradient(145deg,#fff,var(--care-soft)); }
.need-card.neutral-need { --accent:var(--gold); background:linear-gradient(145deg,#fff,var(--gold-soft)); }
.need-icon { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; margin-bottom:20px; background:var(--accent); color:#fff; font-size:.78rem; font-weight:700; }
.need-card h3 { font-size:1.22rem; }
.need-card p { color:var(--ink-soft); font-size:.92rem; flex:1; }
.need-card > span:last-child { color:var(--accent); font-weight:600; font-size:.9rem; }
.continuum-section { background:var(--cream-2); }
.center-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.center-story { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px; border-top:6px solid var(--accent); }
.center-story.birth-story { --accent:var(--birth); }
.center-story.care-story { --accent:var(--care); }
.center-story-mark { width:88px; height:88px; border-radius:50%; overflow:hidden; margin-bottom:20px; background:#fff; }
.center-story-mark img { width:100%; height:100%; object-fit:contain; border-radius:50%; }
.center-story h3 { font-size:1.55rem; }
.center-story > p:not(.eyebrow),.center-story li { color:var(--ink-soft); }
.center-story ul { padding-left:20px; margin:0 0 28px; }
.why-section { background:#fff; }
.value-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.value-grid article > strong { color:var(--navy); font-size:.78rem; letter-spacing:.12em; }
.value-grid h3 { font-size:1.15rem; margin-top:10px; }
.value-grid p { color:var(--ink-soft); font-size:.92rem; }
.journey-section { background:var(--navy-soft); }
.care-journey { list-style:none; padding:0; margin:48px 0 0; display:grid; grid-template-columns:repeat(7,1fr); position:relative; }
.care-journey::before { content:""; height:2px; background:var(--navy-light); position:absolute; top:25px; left:8%; right:8%; }
.care-journey li { position:relative; text-align:center; }
.care-journey a { display:flex; flex-direction:column; align-items:center; color:var(--ink); text-decoration:none; padding:0 8px; }
.care-journey .step-number { width:50px; height:50px; display:grid; place-items:center; border-radius:50%; background:#fff; border:2px solid var(--navy); color:var(--navy); font-weight:700; z-index:1; }
.care-journey strong { margin-top:16px; }
.care-journey small { color:var(--ink-soft); line-height:1.4; margin-top:5px; }
.journey-icon { display:none; }
@media (prefers-reduced-motion: reduce) { .journey-icon { animation:none; } }
.choice-section { background:#fff; }
.choice-list { display:grid; gap:12px; }
.choice-list > div { background:var(--birth-soft); border-radius:var(--radius); padding:18px 20px; }
.choice-list strong,.choice-list span { display:block; }
.choice-list span { color:var(--ink-soft); font-size:.9rem; }
.assessment-note { padding:14px 18px; border-left:4px solid var(--gold); background:var(--gold-soft); color:var(--ink-soft); font-size:.9rem; }
.portal-bridge { background:var(--cream-2); }
.portal-bridge-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:900px; margin:auto; }
.portal-bridge-grid a { padding:30px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); color:var(--ink); text-decoration:none; }
.portal-bridge-grid a:hover { border-color:var(--navy); box-shadow:var(--shadow); text-decoration:none; }
.portal-bridge-grid p { color:var(--ink-soft); }
.portal-bridge-grid span { color:var(--navy); font-weight:600; }
.branch .map-slot { aspect-ratio:16/9; margin:20px 0; padding:0; overflow:hidden; }
.branch-actions { display:flex; gap:10px; flex-wrap:wrap; }
.compact-footer { grid-template-columns:1.5fr repeat(3,1fr); }
.mobile-action-bar { display:none; }
.navigator-hero { background:linear-gradient(145deg,var(--navy-soft),var(--care-soft)); padding:70px 0 48px; }
.navigator-hero h1 { font-size:clamp(2.5rem,6vw,4rem); }
.navigator-section { padding-top:38px; }
.care-navigator { margin-top:22px; padding:34px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.navigator-progress { color:var(--navy); font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:12px; }
.navigator-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
.navigator-options button { text-align:left; padding:18px 20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--cream); color:var(--ink); }
.navigator-options button:hover,.navigator-options button:focus-visible { border-color:var(--navy); background:var(--navy-soft); }
.navigator-options strong,.navigator-options span { display:block; }
.navigator-options span { color:var(--ink-soft); font-size:.86rem; margin-top:3px; }
.navigator-back { margin-top:22px; border:0; background:none; color:var(--navy); padding:8px 0; }
.navigator-result .result-center { color:var(--ink-soft); margin:14px 0; }
.center-actions { justify-content:center; }
@media(max-width:1120px){.modern-hero-grid{grid-template-columns:minmax(0,1fr) minmax(310px,.7fr);gap:38px}.care-compass{padding:24px}}
@media(max-width:1000px){.modern-hero-grid{grid-template-columns:1fr;max-width:760px}.care-compass{max-width:620px}.need-grid{grid-template-columns:repeat(2,1fr)}.value-grid{grid-template-columns:repeat(2,1fr)}.partner-story{grid-template-columns:1fr}.care-journey{grid-template-columns:repeat(3,1fr);gap:28px}.care-journey::before{display:none}.compact-footer{grid-template-columns:1fr 1fr}}
@media(max-width:700px){body{padding-bottom:62px}.ecosystem-hero{min-height:620px}.ecosystem-hero .hero-media{width:100%;-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 55%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 55%,#000 100%)}.ecosystem-hero .hero-media img{opacity:.34}.ecosystem-hero .hero-media img{object-position:60% center}.ecosystem-hero h1{font-size:2.55rem}.ecosystem-hero .hero-actions,.hero-actions{display:grid;gap:10px}.modern-hero-grid{padding-top:58px;padding-bottom:58px;gap:30px}.story-gallery{padding:54px 0}.story-gallery-intro{grid-template-columns:1fr;gap:16px;margin-bottom:26px}.photo-set a{width:255px;border-radius:18px}.story-gallery-actions{display:grid}.care-compass{padding:22px;border-radius:24px}.care-compass h2{font-size:1.45rem}.need-grid,.center-grid,.value-grid,.portal-bridge-grid,.navigator-options{grid-template-columns:1fr}.partner-story{padding:14px}.partner-story > div{padding:10px 6px 14px}.need-card{min-height:0}.care-journey{grid-template-columns:1fr;text-align:left}.care-journey li a{display:grid;grid-template-columns:50px 1fr;column-gap:16px;text-align:left;align-items:center}.care-journey strong{margin-top:0}.care-journey small{grid-column:2}.journey-icon{grid-column:1/3;justify-self:center;margin-top:14px}.mobile-action-bar{display:grid;position:fixed;bottom:0;left:0;right:0;z-index:80;grid-template-columns:repeat(4,1fr);background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(0,0,0,.08)}.mobile-action-bar a{padding:12px 4px;text-align:center;color:var(--navy);font-size:.77rem;font-weight:600;text-decoration:none}.chat-fab{bottom:74px}.compact-footer{grid-template-columns:1fr}.center-story,.care-navigator{padding:25px 22px}}

@media (prefers-reduced-motion: reduce) {
  .photo-stream { overflow-x:auto; scrollbar-width:thin; }
  .photo-track { animation:none; }
  .photo-track .photo-set[aria-hidden="true"] { display:none; }
}

/* Reusable care landing pages */
.care-detail-page { background:#fff; }
.service-hero { padding:72px 0; border-bottom:1px solid var(--line); }
.service-hero.birth-service { background:linear-gradient(140deg,#fff 0%,var(--birth-soft) 100%); }
.service-hero.care-service { background:linear-gradient(140deg,#fff 0%,var(--care-soft) 100%); }
.service-hero-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr); gap:64px; align-items:center; }
.service-hero h1 { max-width:18ch; }
.breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:34px; color:var(--ink-faint); font-size:.82rem; }
.breadcrumbs a { color:var(--ink-soft); }
.service-summary { background:rgba(255,255,255,.86); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow); }
.service-summary > strong { display:block; color:var(--navy); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:12px; }
.care-service .service-summary > strong { color:var(--care); }
.service-summary h2 { font-size:1.3rem; }
.service-summary p { color:var(--ink-soft); font-size:.94rem; }
.service-body { display:grid; grid-template-columns:minmax(0,860px) 310px; justify-content:space-between; gap:96px; align-items:start; }
.service-body article h2 { margin-top:1.5em; }
.service-body article h2:first-child { margin-top:0; }
.service-body article > p { color:var(--ink-soft); }
.continuity-card { position:sticky; top:112px; border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; background:var(--cream); }
.continuity-card a { display:block; padding:12px 0; border-bottom:1px solid var(--line); color:var(--ink); }
.continuity-card a:last-child { border:0; }
.continuity-card a::after { content:" →"; color:var(--navy); }
.service-option-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:24px 0; }
.service-option-grid a { padding:20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--cream); color:var(--ink); text-decoration:none; }
.service-option-grid a:hover { border-color:var(--navy); text-decoration:none; }
.service-option-grid strong,.service-option-grid span { display:block; }
.service-option-grid span { color:var(--ink-soft); font-size:.88rem; margin-top:5px; }
.service-media-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:28px 0; }
.service-media-grid img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:22px; border:1px solid var(--line); box-shadow:var(--shadow-soft); background:var(--cream); }
.service-media-grid.single { grid-template-columns:1fr; max-width:540px; }
.service-media-grid.single img { aspect-ratio:16/9; object-position:50% 72%; }
.service-media-grid.two { grid-template-columns:repeat(2,1fr); }
.service-media-grid.portrait img { aspect-ratio:3/4; }
.service-text-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:28px 0; }
.service-text-grid.four-card-grid { grid-template-columns:repeat(2,1fr); }
.service-text-card { padding:24px; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:var(--shadow-soft); }
.service-text-card h3 { margin-bottom:10px; font-size:1.2rem; }
.service-text-card p,.service-text-card li { color:var(--ink-soft); line-height:1.65; }
.service-text-card ul { margin:10px 0 0; padding-left:20px; }
.service-photo-story { display:grid; grid-template-columns:1.15fr .85fr; gap:16px; margin:28px 0; align-items:stretch; }
.service-photo-story img { width:100%; height:100%; min-height:260px; object-fit:cover; border-radius:26px; border:1px solid var(--line); box-shadow:var(--shadow-soft); background:var(--cream); }
.service-photo-story > img { height:auto; aspect-ratio:4/5; }
.service-photo-story div { display:grid; gap:16px; }
.service-photo-story div img { height:auto; min-height:0; aspect-ratio:4/3; }
.service-photo-story img.imi-staff-photo { object-position:50% 28%; }
.service-highlight { margin:26px 0; padding:24px; border-radius:24px; border:1px solid var(--line); background:var(--care-soft); }
.service-highlight ul { margin:12px 0 0; padding-left:20px; color:var(--ink-soft); line-height:1.7; }
.service-faq { background:var(--cream-2); }
.detail-footer { min-height:84px; display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; background:var(--ink); color:#bbb; font-size:.86rem; }
.detail-footer a { color:#eee; }
@media(max-width:850px){.service-hero-grid,.service-body{grid-template-columns:1fr;gap:30px}.continuity-card{position:static}.service-summary{max-width:600px}.service-option-grid,.service-media-grid,.service-text-grid,.service-photo-story{grid-template-columns:1fr}}
@media(max-width:700px){.care-detail-page{padding-bottom:0}.service-hero{padding:48px 0}.service-hero h1{font-size:2.35rem}.service-body{gap:34px}.care-detail-page .header-inner>.btn{padding:10px 15px;font-size:.82rem}.breadcrumbs{margin-bottom:24px}}

/* Gracious Birth class schedule */
.class-schedule-section { background:var(--cream-2); }
.class-schedule-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.class-schedule-card { display:flex; flex-direction:column; min-width:0; padding:30px 26px; background:#fff; border:1px solid var(--line); }
.class-schedule-card.future-class { grid-column:1/-1; }
.class-card-icon { display:grid; place-items:center; width:54px; height:54px; margin-bottom:28px; border-radius:50%; background:var(--cream-2); color:var(--birth); font-size:1.5rem; }
.class-schedule-card h3 { min-height:2.6em; margin-bottom:16px; font-size:1.45rem; }
.class-card-description { min-height:5em; margin:0 0 28px; color:var(--ink-soft); }
.class-date-list { margin-top:auto; }
.class-date-heading { margin:0 0 12px; color:var(--care); font-size:.78rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.class-date-row { display:flex; justify-content:space-between; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--cream); font-size:.88rem; }
.class-date-row + .class-date-row { margin-top:8px; }
.class-date-row span { color:var(--ink-soft); text-align:right; }
.class-date-empty { margin:0; color:var(--ink-soft); font-size:.9rem; }
.class-card-actions { display:flex; align-items:center; flex-wrap:wrap; gap:15px; margin-top:24px; }
.class-card-actions > a:not(.btn) { font-weight:650; }
.schedule-source-note { max-width:850px; margin:28px auto 0; text-align:center; color:var(--ink-soft); font-size:.9rem; }
.class-options-section { background:#fff; }
.gracious-birth-callout { display:flex; justify-content:space-between; gap:36px; align-items:center; margin-top:36px; padding:34px; border-radius:var(--radius-lg); background:linear-gradient(135deg,var(--birth-soft),var(--gold-soft)); border:1px solid var(--line); }
.gracious-birth-callout h2 { margin-bottom:8px; }
.gracious-birth-callout p:last-child { margin:0; color:var(--ink-soft); }
@media(max-width:950px){.class-schedule-grid{grid-template-columns:1fr 1fr}.gracious-birth-callout{align-items:flex-start;flex-direction:column}}
@media(max-width:650px){.class-schedule-grid{grid-template-columns:1fr}.class-schedule-card.future-class{grid-column:auto}.class-schedule-card{padding:23px}.class-schedule-card h3,.class-card-description{min-height:0}.gracious-birth-callout{padding:25px 22px}.gracious-birth-callout .hero-actions{width:100%}}
.pathway-strip { background:#fff; padding:58px 0; }
.care-pathway-strip { background:var(--care-soft); }
.pathway-link-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.pathway-link-grid a { padding:20px; background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); color:var(--ink); text-decoration:none; }
.pathway-link-grid a:hover { border-color:var(--navy); box-shadow:var(--shadow); text-decoration:none; }
.pathway-link-grid strong,.pathway-link-grid span { display:block; }
.pathway-link-grid span { color:var(--ink-soft); font-size:.86rem; margin-top:4px; }
.choice-list a { color:inherit; text-decoration:none; }
.person-schedule { margin-top:14px; color:var(--ink-soft); font-size:.9rem; line-height:1.45; }
.person-note { margin-top:4px; color:var(--ink-faint); font-size:.84rem; line-height:1.4; }
.event-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.event-card { padding:26px; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; box-shadow:var(--shadow-soft); }
.event-card img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:18px; margin-bottom:18px; }
.event-flyer { display:grid; place-items:center; min-height:180px; margin-bottom:18px; border:1px dashed var(--line); border-radius:18px; background:#f7fbfa; color:var(--care); font-weight:800; text-decoration:none; }
.event-source { color:var(--care); font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.event-card h2 { margin:8px 0; font-size:1.45rem; }
.event-meta { color:var(--ink-soft); font-size:.92rem; }
.event-card .btn { margin-top:12px; }
@media(max-width:900px){.event-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.event-grid{grid-template-columns:1fr}}
.story-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.story-card { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; box-shadow:var(--shadow-soft); }
.story-card > img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.story-card-body { padding:26px; }
.story-pill { display:inline-flex; margin-bottom:12px; padding:5px 12px; border-radius:999px; background:var(--care-soft); color:var(--care); font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.story-card h3 { font-size:1.45rem; }
.story-card p { color:var(--ink-soft); }
.story-author { margin-top:18px; font-size:.86rem; color:var(--ink-faint); }
.story-read { border:0; background:none; color:var(--care); font-weight:800; padding:0; }
.story-full { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); color:var(--ink-soft); }
.story-full h2,.story-full h3 { margin-top:1rem; }
.soft-section { background:linear-gradient(180deg,#fff,var(--care-soft)); }
.story-compose-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:46px; align-items:start; }
.story-form { display:grid; gap:16px; padding:26px; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; box-shadow:var(--shadow-soft); }
.story-form label { display:grid; gap:7px; color:var(--ink); font-weight:700; }
.story-form .story-consent { display:flex; align-items:flex-start; gap:10px; font-size:.88rem; font-weight:500; line-height:1.5; }
.story-form .story-consent input { width:18px; height:18px; flex:0 0 18px; margin:2px 0 0; padding:0; accent-color:var(--care); }
.story-form input,.story-form select { width:100%; border:1px solid var(--line); border-radius:14px; background:#fff; padding:12px 14px; color:var(--ink); font:inherit; font-weight:400; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-note,.form-status { margin:0; color:var(--ink-faint); font-size:.86rem; }
.form-status.error { color:#b42318; }
.story-toolbar { display:flex; flex-wrap:wrap; gap:8px; padding:10px; border:1px solid var(--line); border-radius:14px; background:var(--cream); }
.story-toolbar button,.story-toolbar select { border:1px solid var(--line); border-radius:999px; background:#fff; padding:7px 12px; color:var(--ink); font:inherit; font-size:.86rem; }
.story-editor { min-height:260px; padding:18px; border:1px solid var(--line); border-radius:18px; background:#fff; color:var(--ink-soft); outline:none; }
.story-editor:empty::before { content:attr(data-placeholder); color:var(--ink-faint); }
.story-editor h2,.story-editor h3 { color:var(--ink); }
.story-editor blockquote { margin:1em 0; padding-left:1em; border-left:4px solid var(--gold); color:var(--ink); }
@media(max-width:900px){.story-grid,.story-compose-grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}}
@media(max-width:800px){.pathway-link-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pathway-link-grid{grid-template-columns:1fr}}
.hub-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.hub-grid a { min-height:210px; padding:26px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--cream); color:var(--ink); text-decoration:none; transition:transform .16s,box-shadow .16s,border-color .16s; }
.hub-grid a:hover { transform:translateY(-3px); border-color:var(--care); box-shadow:var(--shadow-lift); text-decoration:none; }
.hub-grid a > span { color:var(--care); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:700; }
.hub-grid h3 { margin-top:16px; }
.hub-grid p { color:var(--ink-soft); font-size:.9rem; }
.wellness-note { margin-top:30px; }
.class-principles { padding-bottom:0; }
.team-toolbar { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.team-toolbar label { display:block; font-weight:600; font-size:.85rem; margin-bottom:7px; }
.team-toolbar input { width:min(430px,80vw); padding:13px 16px; border:1px solid var(--line); border-radius:999px; background:var(--cream); font:inherit; }
.public-team-grid .person { min-height:132px; }
.public-team-grid .person-photo-link { width:82px; height:82px; }
.public-team-grid .person-photo { object-fit:cover; }
@media(max-width:850px){.hub-grid{grid-template-columns:1fr 1fr}.team-toolbar{display:grid;align-items:start}.team-toolbar input{width:100%}}
@media(max-width:560px){.hub-grid{grid-template-columns:1fr}.hub-grid a{min-height:0}.public-team-grid .person{padding:18px 16px}.public-team-grid .person-photo-link{width:68px;height:68px}}

/* ---- Skip link -------------------------------------------------------- */
/* Off-screen until focused, rather than display:none, so it stays reachable
   by keyboard while never appearing for pointer users. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: .75rem 1.25rem;
  background: #14306b;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 .5rem 0;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid #f5c451;
  outline-offset: 2px;
}

/* Visible keyboard focus everywhere. The default ring disappears against the
   deep blue header, which left keyboard users with no position indicator. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #f5c451;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==== Contact bar =========================================================
   Reaching a person is not the end of the journey, so it is not parked at the
   bottom of a page. This is fixed on every page at every width: a worried
   parent should never have to classify her own problem before she is allowed
   to speak to someone. Message and Call route to the centre the page belongs
   to, so the number is never the wrong one for what she is reading. */
.contact-bar {
  position: fixed; z-index: 90; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 1fr 1fr auto;
  background: var(--white, #fff); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 28px rgba(20, 34, 60, .10);
}
.contact-bar a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 10px; text-decoration: none; font-weight: 600; font-size: .92rem;
  color: var(--ink); border-left: 1px solid var(--line); line-height: 1.2;
}
.contact-bar a:first-child { border-left: 0; }
.contact-bar svg { flex-shrink: 0; }
.contact-bar .cb-msg  { background: #0866ff; color: #fff; }
.contact-bar .cb-call { background: var(--accent, #14306b); color: #fff; }
.contact-bar[aria-label*="Birthing Center"] .cb-call { background: var(--birth); }
.contact-bar[aria-label*="Care Center"] .cb-call { background: var(--care); }
.contact-bar .cb-find { color: var(--ink-soft); font-weight: 500; font-size: .84rem; padding-inline: 18px; }
.contact-bar a:focus-visible { outline: 3px solid #f5c451; outline-offset: -3px; }
.contact-bar .cb-num { font-variant-numeric: tabular-nums; }
body:has(.contact-bar) { padding-bottom: 60px; }

@media (min-width: 861px) {
  /* A full-width bar is heavy on a large screen, so it becomes a floating
     pill -- present without dominating the page. */
  .contact-bar {
    left: 50%; right: auto; transform: translateX(-50%);
    bottom: 20px; width: auto; border: 1px solid var(--line);
    border-radius: 999px; overflow: hidden;
    grid-template-columns: auto auto auto;
    box-shadow: 0 10px 34px rgba(20, 34, 60, .16);
  }
  .contact-bar a { padding: 13px 22px; }
  body:has(.contact-bar) { padding-bottom: 92px; }
}
@media (max-width: 400px) {
  .contact-bar .cb-find { display: none; }
  .contact-bar { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .contact-bar .cb-num { display: none; }
}
@media print { .contact-bar { display: none; } }

/* The navigator is now a single set of links, so the options need to look like
   destinations rather than quiz answers. */
.navigator-options a {
  display: block; padding: 20px 22px; text-decoration: none;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); transition: border-color .15s ease, transform .15s ease;
}
.navigator-options a:hover { border-color: var(--accent, var(--navy)); transform: translateY(-2px); }
.navigator-options a strong { display: block; font-size: 1.05rem; margin-bottom: 5px; }
.navigator-options a span { display: block; font-size: .9rem; color: var(--ink-soft); line-height: 1.5; }
.navigator-note { margin-top: 22px; text-align: center; color: var(--ink-soft); font-size: .92rem; }
@media (prefers-reduced-motion: reduce) { .navigator-options a { transition: none; } }

/* Utility links: reachable, but visibly secondary to the four care sections. */
.nav .nav-utility { font-size: .84rem; color: var(--ink-soft); font-weight: 500; }
.nav .nav-utility:first-of-type { margin-left: 14px; padding-left: 16px; border-left: 1px solid var(--line); }
@media (max-width: 900px) { .nav .nav-utility:first-of-type { margin-left: 0; padding-left: 0; border-left: 0; } }

/* With the summary card gone, the hero grid was still declaring two columns
   and holding the second one empty. That happens to be the layout wanted --
   text left, clear space right for a background photo -- but it read as a
   leftover. Stated explicitly so the empty side is a decision, not a remnant. */
.service-hero-grid:not(:has(aside)) { grid-template-columns: minmax(0, 66%); }
@media (max-width: 860px) {
  .service-hero-grid:not(:has(aside)) { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Service-page hero photograph --------------------------------------
   Same treatment as the home and birthing-centre heroes, for the .service-hero
   layout the subpages use. Reusable rather than one-off: every subpage is
   getting a hero photo, and they should all sit the same way.

   These bands are pale with dark type, so the image is held well back -- a
   dark photo behind dark text loses contrast far faster than behind white. It
   occupies the right, and fades out before it reaches the words. */
.service-hero.has-media { position: relative; overflow: hidden; }
.service-hero.has-media > .wrap { position: relative; z-index: 1; }
.service-hero-media {
  position: absolute; inset: 0 0 0 auto; width: 62%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 28%, #000 60%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 28%, #000 60%);
}
.service-hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .60; filter: grayscale(1) contrast(1.02) brightness(.94);
}
.real-team-hero { width: 58%; display: grid; align-items: center; }
.team-hero-collage {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  transform: translateX(8%) rotate(-2deg);
}
.team-hero-collage img {
  aspect-ratio: 1; border-radius: 26px; box-shadow: 0 18px 44px rgba(25, 37, 49, .14);
  opacity: .72; filter: grayscale(1) contrast(1.02) brightness(.98); transform: rotate(2deg);
}
.team-hero-collage img:nth-child(even) { transform: translateY(34px) rotate(2deg); }
.compact-media { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:820px; margin:26px auto 44px; }
.compact-media img { aspect-ratio:4/3; max-height:320px; object-fit:cover; border-radius:22px; }
.compact-story { max-width:820px; margin-inline:auto; }
.compact-story img { max-height:430px; object-fit:cover; }
.service-video-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; max-width:820px; margin:22px auto 44px; }
.service-video-grid video { width:100%; max-height:380px; border-radius:22px; border:1px solid var(--line); background:#111; object-fit:cover; box-shadow:var(--shadow-soft); }
.polished-cards .service-text-card { position:relative; overflow:hidden; border:0; background:linear-gradient(145deg,#fff 0%,#f7fbf8 100%); box-shadow:0 18px 45px rgba(34,67,54,.08); }
.polished-cards .service-text-card::before { content:""; position:absolute; inset:0 auto 0 0; width:5px; background:linear-gradient(180deg,var(--care),var(--gold)); }
.polished-cards .service-text-card > span { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:999px; margin-bottom:14px; background:var(--care-soft); color:var(--care); font-size:.78rem; font-weight:800; letter-spacing:.08em; }
.polished-cards .service-text-card h3 { margin-top:0; }
@media (max-width: 860px) {
  /* Text spans the full width here, so a side panel would sit under it. */
  .service-hero-media {
    width: 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 58%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 58%, #000 100%);
  }
  .service-hero-media img { opacity: .34; }
  .compact-media, .service-video-grid { grid-template-columns:1fr; }
}

/* When a hero carries a photo the text column is narrowed, so the words finish
   before the image starts fading in rather than sitting over its faint edge.
   Pages without a photo keep the wider measure. */
.service-hero.has-media .service-hero-grid { grid-template-columns: minmax(0, 54%); }
@media (max-width: 860px) {
  .service-hero.has-media .service-hero-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The colonics offer gets its mark beside it. Sized to sit with the text
   rather than compete with it. */
.promo-icon { width: 64px; height: 64px; flex-shrink: 0; object-fit: contain; border-radius: 50%; }
@media (max-width: 700px) { .promo-icon { width: 52px; height: 52px; } }

/* Nudge a hero photo right of the text column. Only above the mobile
   breakpoint: below it the panel spans the full width, so shifting the image
   would leave a bare strip down the left edge. */
@media (min-width: 861px) {
  .service-hero-media.nudge-right img { transform: translateX(6%); }
  .birth-service .partners-hero-media {
    width: 64%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 22%, rgba(0,0,0,.62) 44%, #000 72%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 22%, rgba(0,0,0,.62) 44%, #000 72%);
  }
  .birth-service .partners-hero-media img { object-fit: contain; opacity: .68; transform: translateX(10%) scale(1.08); }
}