/* The Peds MD — color overrides. */

.bg-brand { background-color: #5BA3D0 !important; }
.bg-brand-dark { background-color: #3F8AB8 !important; }
.bg-brand-light { background-color: #A8CFE8 !important; }

.text-brand { color: #5BA3D0 !important; }
.text-brand-dark { color: #3F8AB8 !important; }
.text-brand-light { color: #5BA3D0 !important; }

.border-brand { border-color: #5BA3D0 !important; }
.divide-brand > * + * { border-color: #5BA3D0 !important; }
.fill-brand { fill: #5BA3D0 !important; }
.stroke-brand { stroke: #5BA3D0 !important; }

/* Buttons */
.button,
.button-brand,
.md_min\:button {
  background-color: #5BA3D0 !important;
  border: 2px solid #5BA3D0 !important;
  color: #F5F1E8 !important;
  box-shadow: none !important;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}
.button:hover,
.button-brand:hover,
.md_min\:button:hover {
  background-color: #F5F1E8 !important;
  color: #5BA3D0 !important;
  border-color: #5BA3D0 !important;
  transform: none !important;
  box-shadow: none !important;
}
.button-white,
.md_min\:button-white {
  background-color: #F5F1E8 !important;
  color: #5BA3D0 !important;
  border: 2px solid #F5F1E8 !important;
  box-shadow: none !important;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}
.button-white:hover,
.md_min\:button-white:hover {
  color: #F5F1E8 !important;
  background-color: #5BA3D0 !important;
  border-color: #F5F1E8 !important;
  transform: none !important;
  box-shadow: none !important;
}
.button-transparent-brand {
  border-color: #5BA3D0 !important;
  color: #5BA3D0 !important;
}

/* Hamburger active state */
.header #hamburger.hamburger--active svg circle { fill: #5BA3D0 !important; }

/* Input autofill */
input:-webkit-autofill { -webkit-text-fill-color: #5BA3D0 !important; }

/* ----------------------------------------------------------------
   Hide Store shopping / cart / account elements
   ---------------------------------------------------------------- */

#back-in-stock,
[id*="back-in-stock"],
.back-in-stock,
.bag-count,
.bag-count-sr,
a[onclick*="showCart"],
a[onclick*="closeCart"],
.cart__drawer,
.cart__drawer-wrap,
.cart__drawer-overlay,
.cart__drawer-header,
#peds-sec-cartdrawer,
store-accelerated-checkout,
store-accelerated-checkout-cart,
.peds-sec-cartdrawer,
.store-payment-button,
#subnav-about,
#subnav-shop,
#subnav-learn,
a[href*="/account/login"],
a[href*="/account/register"],
a[href*="/account/recover"],
a[href*="/cart"],
a[href*="cart.html"],
.header__mobile-nav-footer a[href*="account"],
.header__mobile-nav-footer a[href*="login"],
.store-buyer-consent,
#store-buyer-consent,
.store-payment-terms,
.product-form,
.store-product-form,
#cart-notification,
.cart-notification,
.shop-pay-button,
.added-to-cart-modal,
.dynamic-checkout,
[data-store-buttoncontainer],
.product__media-related-products,
.related-products,
.product-recommendations {
  display: none !important;
}





/* ----------------------------------------------------------------
   Scroll fix — let HTML be the scroll container so sticky elements
   inside body actually stick. overflow-x: clip prevents horizontal
   overflow without creating a scroll container (unlike `hidden`).
   ---------------------------------------------------------------- */
html {
  overflow-x: clip !important;
  overflow-y: auto !important;
  scroll-behavior: auto !important;
  height: auto !important;
}
/* Reserve the scrollbar gutter so the fixed nav and the in-flow sections
   center on the same width (no scrollbar-induced right-shift of the nav). */
html { scrollbar-gutter: stable; }
body {
  overflow-x: clip !important;
  overflow-y: visible !important;
  position: static !important;
  height: auto !important;
  min-height: 100vh !important;
  touch-action: pan-y !important;
  overscroll-behavior: auto !important;
}
.no-touch body { overscroll-behavior: auto !important; }
/* Sticky footer: #main keeps flex:1 (fills leftover space above the footer) but must NOT
   force a full-viewport min-height — that over-stretched short pages (e.g. medical disclaimer),
   leaving dead space between the content and the footer. flex:1 still pins the footer down. */
#main { min-height: 0 !important; }



/* ----------------------------------------------------------------
   Trust-factor icons (Same-day / Text / 30-min / No insurance)
   Just tighten icon→title gap for consistency — no background disc.
   ---------------------------------------------------------------- */
.grid.grid-rows-\[64px_1fr\] {
  gap: 18px !important;
}
@media (max-width: 991px) {
  .grid.grid-rows-\[64px_1fr\] {
    gap: 14px !important;
  }
}
.grid.grid-rows-\[64px_1fr\] > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Tighten gap between title and body in the text block */
.grid.grid-rows-\[64px_1fr\] h3 + p,
.grid.grid-rows-\[64px_1fr\] p.mt-1\.5 {
  margin-top: 6px !important;
}

/* ----------------------------------------------------------------
   "1 in 2" big stat — center the separator equally between 1 and 2
   (the original class had asymmetric margins designed for "9 out of 10")
   ---------------------------------------------------------------- */
.pmd-h-180 + .flex.flex-col.caps,
.flex.flex-col.caps {
  margin-left: clamp(20px, 2.5vw, 36px) !important;
  margin-right: clamp(20px, 2.5vw, 36px) !important;
}
.flex.flex-col.caps[class*="-mr-"] {
  margin-right: clamp(20px, 2.5vw, 36px) !important;
}
.pmd-h-180.mr-2 {
  margin-right: 0 !important;
}

/* ----------------------------------------------------------------
   <fade-in-viewport> defaults to display:inline so vertical margins
   from space-y-* don't apply. Make it block-level everywhere.
   ---------------------------------------------------------------- */
fade-in-viewport, line-wrap-text, utm-text, static-text {
  display: block;
}
/* the original JS was flipping these to opacity:1 on scroll/viewport entry. Since we
   stripped that bundle (bundle.themea338.js), force them visible so the About Me
   text, studies stats, Only Pediatrician sub copy + CTAs, "Our story" button,
   "A different way" body paragraph, etc. don't stay invisible. */
fade-in-viewport,
line-wrap-text,
utm-text,
static-text,
[data-viewport="fade-in"],
[data-viewport] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Survey card: add explicit bottom space between numbers and trailing text */
.md_min\:space-y-6 > fade-in-viewport,
.md_min\:space-y-6 > .flex.justify-center {
  margin-top: clamp(20px, 2.5vw, 32px) !important;
}
/* Mobile: stack with proper breathing room around the big numbers */
@media (max-width: 991px) {
  .md_min\:space-y-6 > p,
  .md_min\:space-y-6 > .flex.justify-center,
  .md_min\:space-y-6 > fade-in-viewport {
    margin-top: 16px !important;
  }
  .md_min\:space-y-6 > p:first-child { margin-top: 0 !important; }
  /* Shrink the giant numbers on mobile so they don't dominate */
  .pmd-h-180 { font-size: clamp(100px, 28vw, 160px) !important; }
}



/* Hide the original press-logos ticker (Gizmodo, Nature Biology, etc) */
.ticker:has(img[src*="Gizmodo"]),
.ticker:has(img[src*="NatureBiology"]),
.ticker:has(img[src*="ScientificAmerican"]),
.ticker:has(img[src*="SheKnows"]),
.ticker:has(img[src*="Healio"]),
.ticker:has(img[src*="AXIOS"]) { display: none !important; }

/* ----------------------------------------------------------------
   "A different way to practice pediatrics" section — kill the empty
   space below the image. Force the image to fill its column height
   by overriding the forced aspect-ratio.
   ---------------------------------------------------------------- */
#peds-sec-story {
  /* Make the grid items stretch and ensure the image fills */
}
#peds-sec-story .grid {
  align-items: stretch !important;
}
#peds-sec-story .grid > div:nth-child(2) {
  display: flex !important;
  align-items: stretch !important;
}
#peds-sec-story picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
#peds-sec-story picture img {
  aspect-ratio: auto !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  min-height: 100% !important;
}
/* Tighten the section's vertical padding a touch so the blue box isn't oversized */
#peds-sec-story .container {
  padding-top: clamp(48px, 6vw, 80px) !important;
  padding-bottom: clamp(48px, 6vw, 80px) !important;
}
@media (max-width: 991px) {
  /* On mobile (single column), revert the image to its natural aspect ratio */
  #peds-sec-story picture img {
    aspect-ratio: 698/524 !important;
    height: auto !important;
    min-height: 0 !important;
  }
}
/* Kill leftover empty template elements (orphan <picture>, empty flex divs
   with mt-14) that sit after the main grid inside the blue box. They were
   adding ~150px of dead space below "Our story". */
#peds-sec-story .container > .grid ~ * {
  display: none !important;
}
#peds-sec-story .container > picture {
  display: none !important;
}



/* ----------------------------------------------------------------
   Footer redesign — clean PedsMD footer
   ---------------------------------------------------------------- */
.peds-footer {
  background-color: #5BA3D0 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  font-family: "DM Sans", "Inter", system-ui, sans-serif !important;
}
.peds-footer__container {
  max-width: 1360px !important;
  margin: 0 auto !important;
  padding: 56px clamp(24px, 4vw, 60px) 32px !important;
}

/* Top row */
.peds-footer__top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 24px !important;
  padding-bottom: 32px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
  flex-wrap: wrap !important;
}
.peds-footer__brandblock {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
  max-width: 640px !important;
}
.peds-footer__blurb {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  max-width: 34ch !important;
  padding-left: 20px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.28) !important;
}
.peds-footer__brand {
  display: inline-flex !important;
  align-items: center !important; /* logo left, wordmark vertically centered */
  gap: 14px !important;
  text-decoration: none !important;
  color: #ffffff !important;
}
/* Same masked icon, recolored WHITE to match the footer's white wordmark on blue. */
.peds-footer__brand-icon {
  height: 48px !important;
  width: 56px !important; /* matches the 398x340 icon aspect ratio */
  display: block !important;
  background-color: #ffffff !important;
  -webkit-mask: url(../media/pedsmd-icon.svg) center / contain no-repeat;
  mask: url(../media/pedsmd-icon.svg) center / contain no-repeat;
}
.peds-footer__brand-text {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-weight: 700 !important;
  font-size: 21px !important;
  letter-spacing: 1px !important;
  line-height: 1 !important;
  transform: translateY(2px) !important; /* lower the wordmark very slightly off dead-center */
}
.peds-footer__brand-sep {
  display: inline-block !important;
  width: 1.5px !important;
  height: 23px !important;
  background-color: currentColor !important;
  opacity: 0.4 !important;
  border-radius: 1px !important;
}
.peds-footer__social {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.peds-footer__social a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
  color: #ffffff !important;
  transition: opacity 0.15s ease !important;
}
.peds-footer__social a:hover {
  opacity: 0.7 !important;
}
.peds-footer__social svg,
.peds-footer__social .footer__social-icon {
  width: 36px !important;
  height: 36px !important;
}
/* Phones: logo + social share the top line; blurb drops full-width below.
   display:contents flattens the brandblock so the logo and social become
   siblings on one row (space-between), and the blurb wraps beneath. */
@media (max-width: 767px) {
  .peds-footer__top {
    align-items: center !important;
    gap: 16px !important;
  }
  .peds-footer__brandblock {
    display: contents !important;
  }
  .peds-footer__brand {
    order: 1 !important;
  }
  .peds-footer__social {
    order: 2 !important;
  }
  .peds-footer__blurb {
    order: 3 !important;
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 42ch !important;
    padding-left: 0 !important;
    border-left: 0 !important;
  }
}

/* 3 columns */
.peds-footer__columns {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 48px !important;
  padding: 48px 0 40px !important;
}
@media (max-width: 767px) {
  .peds-footer__columns {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 32px 0 !important;
  }
}
.peds-footer__column ul,
.peds-footer__column address {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-style: normal !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
.peds-footer__column li {
  padding: 2px 0 !important;
}
.peds-footer__column a {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
.peds-footer__column a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}
.peds-footer__heading {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #F5F1E8 !important;
  margin: 0 0 16px 0 !important;
}
.peds-footer__portal {
  display: inline-block !important;
  margin-top: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255, 255, 255, 0.5) !important;
  text-underline-offset: 4px !important;
}
.peds-footer__portal:hover {
  text-decoration-color: #ffffff !important;
}

/* Bottom bar: copyright (left) + legal links & build credit (right) */
.peds-footer__bottombar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px 28px !important;
  padding-top: 28px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
  flex-wrap: wrap !important;
}
.peds-footer__copy {
  margin: 0 !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.75) !important;
}
.peds-footer__legal {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-size: 12.5px !important;
}
.peds-footer__legal a {
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
.peds-footer__legal a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}
.peds-footer__credit {
  color: #ffffff !important;
  font-weight: 600 !important;
}
.peds-footer__credit:hover {
  color: #F5F1E8 !important;
}
@media (max-width: 767px) {
  .peds-footer__bottombar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
}

/* Giant icon banner */
.peds-footer__banner {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 24px 0 32px !important;
  background-color: #5BA3D0 !important;
}
.peds-footer__banner-icon {
  height: clamp(96px, 14vw, 180px) !important;
  width: auto !important;
  opacity: 0.95 !important;
  filter: brightness(0) invert(1) !important;
}

/* ----------------------------------------------------------------
   Spinning badge — positioned in lower-third of its parent image
   ---------------------------------------------------------------- */
@keyframes peds-badge-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.peds-badge-spin {
  animation: peds-badge-rotate 18s linear infinite;
  transform-origin: 50% 50%;
  position: absolute !important;
  bottom: 8% !important;
  right: 6% !important;
  top: auto !important;
  left: auto !important;
  width: clamp(80px, 9vw, 130px) !important;
  height: clamp(80px, 9vw, 130px) !important;
  z-index: 10 !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)) !important;
}

/* "Only pediatrician" photo — one consistent 4:5 crop on desktop + mobile (Trey centered) */
.pmd-feat__media-asset { aspect-ratio: 4 / 5 !important; object-fit: cover !important; object-position: center top !important; }
/* Home "About Dr. Trey" panel headshot (NewHead) — anchor the top so any crop trims the bottom, keeping his face. */
img[src*="NewHead.png"] { object-position: center top !important; }

/* Desktop "only pediatrician": the photo fills the text column's natural height instead of a
   forced-tall 4:5 crop. Before, the 4:5 photo (e.g. 1049px tall) forced the text column to that
   height and `space-between` spread the heading / CTAs / stat-cards apart with big floating gaps.
   Now the photo crops to whatever height the copy needs — content stays tight, no empty space,
   at every width. (Mobile keeps the 4:5 inline photo handled in the max-width:767px block below.) */
@media (min-width: 768px) {
  .pmd-feat__media { position: relative; overflow: hidden; }
  .pmd-feat__media .pmd-feat__media-asset {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
  .pmd-feat__text { justify-content: flex-start !important; gap: clamp(20px, 1.8vw, 26px) !important; }
  /* neutralize the theme's extra mt-8 above the CTA row so spacing is uniform (matches the
     tidy stacked layout) — no oversized gap under the heading/CTA */
  .pmd-feat__text > * { margin-top: 0 !important; margin-bottom: 0 !important; }
}

/* Mobile: "only pediatrician" — uniform spacing + consistent 4:5 photo in a rounded box */
@media (max-width: 767px) {
  .pmd-feat__text {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
  }
  .pmd-feat__text > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .peds-ss-mobile-media {
    position: relative !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }
  .peds-ss-mobile-media .pmd-feat__media-asset {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 20px !important;
  }
}

/* Mobile: "a different way" photo — above the CTAs, rounded, full photo */
@media (max-width: 767px) {
  .peds-diff-mobile-media {
    position: relative !important;
    margin-top: 20px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  .peds-diff-mobile-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 16px !important;
  }
}
/* Top-left variant of the spinning badge */
.peds-badge-spin--tl {
  top: 5% !important;
  left: 9% !important;
  bottom: auto !important;
  right: auto !important;
}

/* Desktop Adif image anchors the spinning badge */
.peds-diff-desktop-media { position: relative; }

/* Desktop "a different way": the photo conforms to the text column's height so the bottom of the
   comparison-card box lines up with the bottom of the photo (no picture hanging below the box). */
@media (min-width: 768px) {
  .peds-diff-desktop-media { overflow: hidden; }
  .peds-diff-desktop-media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }
}

/* Desktop-only Adif (mobile uses the copy placed above the CTAs) */
@media (max-width: 767px) {
  #about .grid > .peds-diff-desktop-media {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* "Why families switched" — mobile: full-width photo + bottom-right badge */
.peds-radiating-badge { display: block !important; animation: none !important; filter: drop-shadow(0 2px 2px rgba(31,42,55,0.22)) drop-shadow(0 7px 14px rgba(31,42,55,0.28)) !important; }
@media (max-width: 767px) {
  .peds-radiating-center {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
  }
  .peds-radiating-trey {
    aspect-ratio: 3 / 2 !important;
    object-position: center 32% !important;
  }
  .peds-radiating-badge { display: block !important; }
}

/* Services section — cream bg to match the trust-factors section above */
.peds-services-section {
  background-color: #F5F1E8 !important;
  color: #ffffff !important;
  padding: 30px clamp(24px, 3vw, 40px) !important;
}
.peds-services-section .eyebrow { color: rgba(255, 255, 255, 0.85) !important; }
.peds-services-heading { color: #ffffff !important; }
.peds-services-sub { color: rgba(255, 255, 255, 0.88) !important; }
.peds-service-card {
  background-color: #ffffff !important;
  border: 1.5px solid rgba(31, 42, 55, 0.08) !important;
  border-radius: 20px !important;
  padding: 32px 26px !important;
  color: #1F2A37 !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.peds-service-card:hover {
  border-color: #5BA3D0 !important;
  transform: translateY(-4px) !important;
  box-shadow: none !important;
}
.peds-service-card h3 { color: #1F2A37 !important; font-family: "DM Sans", system-ui, sans-serif !important; }
.peds-service-card p { color: #475569 !important; }
.peds-service-icon {
  background-color: rgba(91, 163, 208, 0.12) !important;
  color: #5BA3D0 !important;
  border-radius: 999px !important;
}

/* ----------------------------------------------------------------
   Hero — full-bleed photo background with blue rounded-box overlay
   ---------------------------------------------------------------- */
.peds-hero {
  position: relative !important;
  width: 100% !important;
  min-height: clamp(560px, 82vh, 820px) !important;
  background-color: #F5F1E8 !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.peds-hero__bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
}
.peds-hero__overlay {
  position: relative !important;
  z-index: 1 !important;
  max-width: 1360px !important;
  margin: 0 auto !important;
  /* Top padding guarantees the box never touches the fixed nav.
     Nav is 78px + 20px top + ~22px breathing room = 120px clearance. */
  padding: 130px clamp(24px, 4vw, 60px) clamp(40px, 6vw, 80px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important; /* box sits on the right */
  min-height: clamp(560px, 82vh, 820px) !important;
}
@media (max-width: 768px) {
  .peds-hero__overlay { justify-content: center !important; }
}
.peds-hero__box {
  background-color: #5BA3D0 !important;
  color: #ffffff !important;
  border-radius: 28px !important;
  padding: clamp(32px, 3.5vw, 52px) !important;
  width: 100% !important;
  max-width: clamp(380px, 48%, 560px) !important;
  box-shadow: none !important;
}
@media (max-width: 768px) {
  .peds-hero__box { max-width: 92% !important; }
}
.peds-hero__eyebrow {
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 0 18px !important;
}
.peds-hero__headline {
  font-family: "DM Sans", "Inter", system-ui, sans-serif !important;
  font-size: clamp(34px, 4vw, 58px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.05 !important;
  color: #ffffff !important;
  margin: 0 0 18px !important;
}
.peds-hero__sub {
  font-size: clamp(15px, 1.3vw, 18px) !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  margin: 0 0 28px !important;
}
.peds-hero__cta-row {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin: 0 0 24px !important;
}
.peds-hero__cta-primary {
  background-color: #F5F1E8 !important;
  color: #5BA3D0 !important;
  border: 2px solid #F5F1E8 !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-decoration: none !important;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}
.peds-hero__cta-primary:hover {
  background-color: #5BA3D0 !important;
  color: #F5F1E8 !important;
  border-color: #F5F1E8 !important;
}
.peds-hero__cta-secondary {
  background-color: transparent !important;
  border: 2px solid #F5F1E8 !important;
  color: #F5F1E8 !important;
  padding: 14px 26px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-decoration: none !important;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}
.peds-hero__cta-secondary:hover {
  background-color: #F5F1E8 !important;
  color: #5BA3D0 !important;
  border-color: #F5F1E8 !important;
}
.peds-hero__proof {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px 12px !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.peds-hero__stars {
  color: #F5F1E8 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  letter-spacing: 3px !important;
}

/* ----------------------------------------------------------------
   Hub & Spokes radiating reviews — wrapped in big blue rounded box
   ---------------------------------------------------------------- */
.peds-radiating-reviews {
  background-color: #F5F1E8 !important;
  padding: 30px clamp(24px, 3vw, 40px) !important;
  overflow: hidden !important;
}
.peds-radiating-outer {
  max-width: 1600px;
  margin: 0 auto;
}
.peds-radiating-box {
  background-color: transparent;
  border: 1px solid #5BA3D0;
  border-radius: 16px;
  padding: clamp(48px, 5vw, 76px) clamp(28px, 4vw, 60px);
  color: #5BA3D0;
  overflow: hidden;
}
.peds-radiating-eyebrow {
  color: #5BA3D0 !important;
}
.peds-radiating-container {
  max-width: 1360px;
  margin: 0 auto;
}
.peds-radiating-intro {
  text-align: left;
  max-width: none;
  margin: 0 0 48px;
}
.peds-radiating-intro .eyebrow {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 700; color: #5BA3D0; margin: 0 0 12px;
}
.peds-radiating-heading {
  font-family: "Bookmania", "Cormorant Garamond", Georgia, serif;
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 400; letter-spacing: -0.012em; line-height: 1.05;
  color: #5BA3D0; margin: 0 0 16px;
}
.peds-radiating-sub {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: #5BA3D0;
  margin: 0;
}

/* Hub area */
.peds-radiating-hub {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  aspect-ratio: 1.2 / 1;
  min-height: 900px;
}
@media (max-width: 991px) {
  .peds-radiating-hub {
    aspect-ratio: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
}

.peds-radiating-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.peds-radiating-lines path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
}
@media (max-width: 991px) {
  .peds-radiating-lines { display: none; }
}

/* Center hub (Trey) — bigger, dominates the middle */
.peds-radiating-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(280px, 36%, 440px);
  z-index: 2;
  text-align: center;
}
@media (max-width: 991px) {
  .peds-radiating-center {
    position: static;
    transform: none;
    width: 240px;
  }
}
.peds-radiating-trey {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid #5BA3D0;
  display: block;
  background: #fff;
  box-shadow: none;
}

/* Radiating review cards */
.peds-radiating-card {
  position: absolute;
  width: clamp(240px, 25%, 310px);
  background: #F5F1E8;
  border: 1px solid #5BA3D0;
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: none;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.peds-radiating-card p {
  font-size: 15.5px;
  line-height: 1.5;
  color: #1F2A37;
  margin: 0;
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
}
.peds-radiating-card footer {
  font-size: 13px;
  color: rgba(91, 163, 208, 0.7);
  border-top: 1px solid rgba(91, 163, 208, 0.28);
  padding-top: 10px;
  margin-top: 4px;
}
.peds-radiating-card footer strong {
  color: #5BA3D0;
  font-weight: 700;
}
.peds-radiating-stars-small {
  font-size: 14px !important;
}
.peds-radiating-stars-small {
  color: #F5B915;
  font-size: 12px;
  letter-spacing: 2px;
  line-height: 1;
}

/* Position the 6 cards: 2 left, 2 right, 2 corners.
   2% top/bottom + hub min-height 900 -> guaranteed >40px gap between rows. */
.peds-radiating-card[data-pos="top-left"]    { top: 2%;     left: 0;  transform: translateX(-18px); }
.peds-radiating-card[data-pos="top-right"]   { top: 2%;     right: 0; transform: translateX(18px); }
.peds-radiating-card[data-pos="left"]        { top: 50%;    left: 0;  transform: translate(-18px, -50%); }
.peds-radiating-card[data-pos="right"]       { top: 50%;    right: 0; transform: translate(18px, -50%); }
.peds-radiating-card[data-pos="bottom-left"] { bottom: 2%;  left: 0;  transform: translateX(-18px); }
.peds-radiating-card[data-pos="bottom-right"]{ bottom: 2%;  right: 0; transform: translateX(18px); }

@media (max-width: 991px) {
  .peds-radiating-card {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 520px;
    margin: 0 auto;
  }
  .peds-radiating-hub > .peds-radiating-card {
    margin-top: 16px;
  }
}

/* Marquee at TOP of reviews block */
.peds-radiating-marquee-wrap {
  margin: 0 0 clamp(28px, 4vw, 48px);
  overflow: hidden;
  padding: 16px 0;
  background-color: #ffffff;
  border: 1.5px solid rgba(31, 42, 55, 0.08);
  border-radius: 999px;
}
@keyframes peds-marquee-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.peds-radiating-marquee {
  display: inline-flex;
  gap: 36px;
  white-space: nowrap;
  animation: peds-marquee-slide 65s linear infinite;
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
}
.peds-radiating-marquee span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.peds-radiating-marquee span::before {
  color: #F5B915;
  margin-right: 4px;
}

/* ----------------------------------------------------------------
   Services section (PedsMD's 4 services) — overridden to baby blue below
   ---------------------------------------------------------------- */

.peds-services-container {
  max-width: 1600px;
  margin: 0 auto;
  background-color: #5BA3D0;
  border-radius: 16px;
  padding: clamp(48px, 5vw, 76px) clamp(28px, 4vw, 60px);
  color: #ffffff;
  overflow: hidden;
}
.peds-services-intro {
  text-align: left;
  margin: 0 0 48px;
}
.peds-services-heading {
  white-space: nowrap;
  text-align: left;
}
@media (max-width: 991px) {
  .peds-services-heading { white-space: normal; }
}
.peds-services-sub {
  max-width: 720px;
  margin: 0;
  text-align: left;
}
.peds-services-intro .eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: #5BA3D0;
  margin: 0 0 12px;
}
.peds-services-heading {
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #1F2A37;
  margin: 0 0 16px;
}
.peds-services-sub {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: #475569;
  margin: 0;
}
.peds-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (max-width: 767px) {
  .peds-services-grid { grid-template-columns: 1fr; }
}
.peds-service-card {
  background-color: white;
  border: 1px solid rgba(31, 42, 55, 0.06);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.peds-service-card:hover {
  transform: translateY(-2px);
  box-shadow: none;
}
.peds-service-icon {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background-color: rgba(91, 163, 208, 0.12);
  color: #5BA3D0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.peds-service-icon svg { width: 26px; height: 26px; }
.peds-service-card h3 {
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #1F2A37;
  margin: 0;
  line-height: 1.2;
}
.peds-service-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #475569;
  margin: 0;
}

/* ----------------------------------------------------------------
   Reviews section — Google-style cards on baby blue
   ---------------------------------------------------------------- */
.peds-reviews-section {
  background-color: #EAF2F8 !important;
  padding: clamp(60px, 8vw, 120px) clamp(24px, 4vw, 60px) !important;
}
.peds-reviews-container { max-width: 1360px; margin: 0 auto; }
.peds-reviews-intro {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 56px;
}
.peds-reviews-intro .eyebrow {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 700; color: #5BA3D0; margin: 0 0 12px;
}
.peds-reviews-heading {
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700; letter-spacing: -0.01em; line-height: 1.1;
  color: #1F2A37; margin: 0 0 16px;
}
.peds-reviews-sub {
  font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6;
  color: #475569; margin: 0;
}
.peds-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 991px) {
  .peds-reviews-grid { grid-template-columns: 1fr; }
}
.peds-review-card {
  background-color: white;
  border: 1px solid rgba(31, 42, 55, 0.06);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.peds-review-stars {
  color: #F5B915;
  font-size: 18px;
  letter-spacing: 4px;
  line-height: 1;
}
.peds-review-quote {
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: #1F2A37;
  margin: 0;
  flex: 1;
}
.peds-review-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid rgba(31, 42, 55, 0.08);
  gap: 12px;
}
.peds-review-author {
  font-size: 14px;
  font-weight: 700;
  color: #1F2A37;
  margin: 0;
}
.peds-review-relation {
  font-size: 12px;
  color: #94A3B8;
  margin: 2px 0 0;
}
.peds-review-source {
  font-size: 11px;
  color: #94A3B8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.peds-reviews-note {
  text-align: center;
  font-size: 12px;
  color: #94A3B8;
  margin: 40px 0 0;
}


/* ================================================================
   PAGE BG — solid cream so the nav pill's surrounding gap doesn't
   fall through to the OS dark-mode default (caused "black box" bug)
   ================================================================ */
html, body {
  background-color: #F5F1E8 !important;
  color-scheme: light !important;
}

/* ================================================================
   PEDS-NAV — Complete custom nav (Round H polish: fixed floating
   pill, photo subnav cards, dropdown that overlays content)
   ================================================================ */

/* Nuke any leftover header elements just in case */
header-component,
header.header,
.header__nav,
.header__subnav,
.header__nav-link,
.header__nav-grid,
.header__nav-grid-right,
.header__mobile-nav,
.header__hamburger { display: none !important; }

/* Outer wrapper — fixed at top so dropdown doesn't push content */
.peds-nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  width: calc(100% - 2 * clamp(20px, 4vw, 40px));   /* same inset as .peds-section so the nav lines up with every section */
  max-width: 1185px;
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  color: #1F2A37;
  /* SINGLE container: border + radius + bg + shadow live here, on ONE element.
     The corners are always the corners of the whole shape, so they never "curl" —
     only the height animates; the corners just travel with it. */
  background-color: #F5F1E8;
  border: 3px solid #5BA3D0;
  border-radius: 44px;
  box-shadow: none;
  transition: box-shadow 0.4s ease;
}
.peds-nav[data-peds-open="membership"],
.peds-nav[data-peds-open="services"] {
  box-shadow: none;
}

/* The visible pill — bar contains brand + links + hamburger */
.peds-nav__bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 0 30px;
  height: 78px;
  /* Pure layout — no border/bg/radius/shadow. The container (.peds-nav) owns
     all the visual chrome now, so there are no separate "bar corners" to square. */
}

/* Brand: icon + PEDS | MD wordmark */
.peds-nav__brand {
  display: inline-flex;
  align-items: center; /* logo left, wordmark vertically centered on it */
  gap: 12px;
  text-decoration: none;
  color: inherit;
  line-height: 1;
  white-space: nowrap;
}
/* Icon is a transparent-bg raster recolored via CSS mask (blue on the light nav). */
.peds-nav__brand-icon {
  height: 42px;
  width: 49px; /* matches the 398x340 icon aspect ratio */
  display: block;
  flex-shrink: 0;
  background-color: #5BA3D0;
  -webkit-mask: url(../media/pedsmd-icon.svg) center / contain no-repeat;
  mask: url(../media/pedsmd-icon.svg) center / contain no-repeat;
}
.peds-nav__brand-word {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 23px;
  letter-spacing: 1.6px;
  color: #5BA3D0;
  line-height: 1;
  transform: translateY(2px); /* lower the wordmark very slightly off dead-center */
}
.peds-nav__brand-sep {
  display: inline-block;
  width: 2px;
  height: 25px;
  background-color: #5BA3D0;
  border-radius: 1px;
  flex-shrink: 0;
  transform: translateY(2px); /* match the wordmark nudge */
}

/* Center links cluster — BLUE + LARGER per feedback */
.peds-nav__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(22px, 3vw, 44px);
}
.peds-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 78px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #5BA3D0;
  text-decoration: none;
  transition: color 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}
.peds-nav__link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 0;
  height: 2px;
  background-color: #5BA3D0;
  border-radius: 1px;
  transform: translateX(-50%);
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.peds-nav__link:hover,
.peds-nav__link:focus-visible { color: #3F8AB8; outline: none; }
.peds-nav__link:hover::after,
.peds-nav__link:focus-visible::after,
.peds-nav[data-peds-open="membership"] .peds-nav__link[data-peds-sub="membership"]::after,
.peds-nav[data-peds-open="services"] .peds-nav__link[data-peds-sub="services"]::after { width: 24px; }

/* Hamburger — hidden on desktop */
.peds-nav__hamburger {
  display: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  justify-self: end;
}
.peds-nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #5BA3D0;
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

/* ----- Dropdown — floats below the bar, does NOT push content -----
   Pure CSS using max-height transition. JS only flips data-peds-open. */
.peds-nav__dropdown {
  /* In-flow inside the container, so the WHOLE nav grows/shrinks as one shape.
     grid 0fr→1fr animates the true content height — the only thing that moves.
     No own border/bg/radius: the container provides them. */
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    grid-template-rows 0.32s ease-out,
    opacity 0.28s ease-out,
    visibility 0s linear 0.32s;
}
.peds-nav[data-peds-open="membership"] .peds-nav__dropdown,
.peds-nav[data-peds-open="services"] .peds-nav__dropdown {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition:
    grid-template-rows 0.32s ease-out,
    opacity 0.22s ease-out,
    visibility 0s linear 0s;
}
.peds-nav__dropdown-inner {
  min-height: 0;        /* let the grid row collapse below content height */
  overflow: hidden;     /* clip content as the row extends/retracts */
  display: grid;        /* stack BOTH panels in one cell so the inner always has
                           a measurable height (= the taller panel). Content is
                           never display:none'd, so the dropdown's grid-rows can
                           animate the height on CLOSE too — not just open. */
  /* NO padding here — padding on the clip element would keep the grid from
     collapsing to 0. It lives on the panel instead (see below). */
}

/* Respect reduced-motion: open/close instantly, no extension animation. */
@media (prefers-reduced-motion: reduce) {
  .peds-nav,
  .peds-nav__dropdown,
  .peds-nav__mobile { transition: none; }
}

/* Panels — BOTH stay in the DOM, stacked in the same grid cell. Only opacity +
   visibility toggle between them (a cross-fade), so neither is ever pulled out
   of flow. The inner therefore always reports the taller panel's height, which
   is what lets the dropdown's grid-rows animate smoothly CLOSED as well as open
   (display:none used to yank the content and make the close snap shut). */
.peds-nav__panel {
  grid-row: 1;
  grid-column: 1;       /* both panels share one cell → stacked */
  padding: 28px;        /* even frame around the cards (eyebrow removed) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease-out, visibility 0s linear 0.22s;
}
.peds-nav[data-peds-open="membership"] .peds-nav__panel[data-peds-panel="membership"],
.peds-nav[data-peds-open="services"] .peds-nav__panel[data-peds-panel="services"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.22s ease-out, visibility 0s linear 0s;
}
@keyframes peds-nav-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.peds-nav__panel-eyebrow {
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 700;
  color: #5BA3D0;
  margin: 0 0 18px;
}

/* Cards grid */
.peds-nav__cards { display: grid; gap: 16px; }
.peds-nav__cards--3 { grid-template-columns: repeat(3, 1fr); }

/* ----- Photo card (boxed-style) ----- */
.peds-nav__card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background-color: #F5F1E8;
  border: 2px solid #5BA3D0;
  border-radius: 18px;
  overflow: hidden;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
/* Hover: flip the colors — cream card -> blue, text -> cream. No lift, scale, or shadow. */
.peds-nav__card:hover {
  background-color: #5BA3D0;
  border-color: #5BA3D0;
}
.peds-nav__card:hover .peds-nav__card-title,
.peds-nav__card:hover .peds-nav__card-desc {
  color: #F5F1E8;
}
.peds-nav__card-media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background-color: #EAF2F8;
  margin: 14px 14px 0;
  border-radius: 14px;
}
.peds-nav__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Subtle gradient at bottom of image for legibility if text overlaps */
.peds-nav__card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.18) 100%);
  pointer-events: none;
}

.peds-nav__card-body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.peds-nav__card-title {
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #5BA3D0;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}
.peds-nav__card-meta {
  font-size: 15px;
  font-weight: 700;
  color: #5BA3D0;
  margin: 0;
  line-height: 1;
  letter-spacing: -0.2px;
}
.peds-nav__card-meta span {
  font-size: 11px;
  color: #94A3B8;
  font-weight: 500;
  letter-spacing: 0;
  margin-left: 3px;
}
.peds-nav__card-desc {
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
  margin: 0;
  transition: color 0.2s ease;
}

/* Featured card — baby-blue accent + Most popular tag */
.peds-nav__card--featured { border-color: rgba(91, 163, 208, 0.4); }
.peds-nav__card--featured .peds-nav__card-body { background: linear-gradient(180deg, rgba(91, 163, 208, 0.08) 0%, rgba(91, 163, 208, 0.0) 60%); }
.peds-nav__card-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  background-color: #5BA3D0;
  color: #ffffff;
  padding: 5px 11px;
  border-radius: 999px;
  line-height: 1.4;
  box-shadow: none;
}

/* Mobile drawer — also floats absolute (doesn't push content) */
.peds-nav__mobile {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  right: 0;
  background-color: #F5F1E8;
  border: 2.5px solid rgba(91, 163, 208, 0.5);
  border-radius: 24px;
  padding: 10px 22px 16px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  /* Animatable hidden state: the drawer stays in the DOM (not display:none) so
     opening/closing can transition. It slides down + fades in. visibility is
     delayed on close so it stays interactive until the fade-out finishes. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transform-origin: top center;
  pointer-events: none;
  transition:
    opacity 0.26s ease-out,
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.34s;
}
.peds-nav[data-peds-mobile="true"] .peds-nav__mobile {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 0.22s ease-out,
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}
.peds-nav__mobile-link {
  display: block;
  padding: 14px 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #5BA3D0;
  text-decoration: none;
  border-bottom: 1px solid rgba(91, 163, 208, 0.18);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.peds-nav__mobile-link:last-child { border-bottom: 0; }
.peds-nav__mobile-link:hover { color: #3F8AB8; padding-left: 4px; }

/* ----- Mobile responsive ----- */
@media (max-width: 991px) {
  .peds-nav { top: 12px; width: calc(100% - 24px); border-radius: 36px; border: 3px solid #5BA3D0; }
  .peds-nav__bar {
    height: 64px;
    padding: 0 18px;
    gap: 12px;
  }
  .peds-nav__brand-icon { height: 32px; width: 37px; }
  .peds-nav__brand-word { font-size: 18px; letter-spacing: 1.3px; }
  .peds-nav__brand-sep { height: 20px; }
  .peds-nav__links { display: none; }
  .peds-nav__hamburger { display: inline-flex; }
  .peds-nav__dropdown { display: none; }
  .peds-nav[data-peds-mobile="true"] .peds-nav__hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .peds-nav[data-peds-mobile="true"] .peds-nav__hamburger span:nth-child(2) { opacity: 0; }
  .peds-nav[data-peds-mobile="true"] .peds-nav__hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  /* Mobile drawer cards become single column */
  .peds-nav__cards--3 { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .peds-nav__cards--3 { grid-template-columns: 1fr; }
}

/* ----- Hero full-bleed — eliminate the cream gap above hero ----- */
.peds-hero { margin-top: 0 !important; padding-top: 0 !important; }
main#MainContent, .main-sections { padding-top: 0 !important; margin-top: 0 !important; }

/* ----- Hero headline in Bookmania ----- */
.peds-hero__headline {
  font-family: "Bookmania", "Cormorant Garamond", Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em !important;
  font-style: normal !important;
}




/* ================================================================
   Services section redesign — blue cards, thick white icons,
   no circle backgrounds, larger icons. Bookmania serif heading.
   ================================================================ */
.peds-services-heading {
  font-family: "Bookmania", "Cormorant Garamond", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(44px, 5.6vw, 76px) !important;
  letter-spacing: -0.012em !important;
  line-height: 1.05 !important;
}

.peds-service-card {
  background-color: transparent !important;
  border: 1.5px solid rgba(245, 241, 232, 0.55) !important;
  color: #ffffff !important;
  padding: 28px 30px !important;
  border-radius: 6px !important;
  /* Horizontal: icon left, title+desc stacked on right */
  display: grid !important;
  grid-template-columns: 64px 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 22px !important;
  row-gap: 6px !important;
  align-items: start !important;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
}
.peds-service-card:hover {
  background-color: rgba(245, 241, 232, 0.08) !important;
  border-color: rgba(245, 241, 232, 0.9) !important;
  transform: translateY(-3px) !important;
  box-shadow: none !important;
}
.peds-service-card h3 {
  color: #ffffff !important;
  font-family: "DM Sans", "Inter", system-ui, sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
}
.peds-service-card p {
  color: rgba(245, 241, 232, 0.85) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
}

/* Large thick white icons, NO circle background */
.peds-service-icon {
  background-color: transparent !important;
  background: transparent !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
}
.peds-service-icon svg {
  width: 56px !important;
  height: 56px !important;
  stroke-width: 2.2 !important;
  color: #ffffff !important;
}


/* ================================================================
   "Different way to practice pediatrics" — bigger serif heading
   Match the scale of "The only pediatrician your family will need"
   ================================================================ */
#peds-sec-story .pmd-h-64 {
  font-family: "Bookmania", "Cormorant Garamond", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(42px, 5.6vw, 78px) !important;
  letter-spacing: -0.012em !important;
  line-height: 1.04 !important;
}

/* Tighten grid gap so the photo feels more prominent next to text */
#peds-sec-story .grid.gap-8.md_min\:grid-cols-2 {
  gap: clamp(28px, 4vw, 56px) !important;
}

/* ================================================================
   "Traditional vs The Peds MD" comparison cards (unique design,
   visually distinct from both stat cards and icon pillars)
   ================================================================ */
.peds-compare {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.peds-compare-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 6px;
}
.peds-compare-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 6px;
  padding: 28px 30px;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.peds-compare-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.85);
  transform: translateY(-2px);
}
.peds-compare-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 7px;
  line-height: 1;
}
.peds-compare-old {
  color: rgba(255, 255, 255, 0.55);
}
.peds-compare-old .peds-compare-label {
  color: rgba(255, 255, 255, 0.45);
}
.peds-compare-old p {
  font-size: 18px;
  margin: 0;
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.42);
  text-decoration-thickness: 1.5px;
  line-height: 1.3;
}
.peds-compare-arrow {
  width: 22px;
  height: 22px;
  color: rgba(255, 255, 255, 0.65);
  flex-shrink: 0;
}
.peds-compare-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}
.peds-compare-new {
  color: #ffffff;
  text-align: right;
}
.peds-compare-new .peds-compare-label {
  color: rgba(255, 255, 255, 0.85);
}
.peds-compare-new p {
  font-size: 21px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.2px;
  line-height: 1.25;
}

@media (max-width: 767px) {
  .peds-compare-card {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 8px;
    padding: 14px 16px;
  }
  .peds-compare-new {
    text-align: left;
  }
  .peds-compare-arrow {
    transform: rotate(90deg);
    justify-self: start;
    width: 18px;
    height: 18px;
  }
}


/* ================================================================
   Follow Us — wide layout + 3 video tiles with hover effects
   ================================================================ */
.peds-follow {
  padding: 30px clamp(24px, 3vw, 40px) !important;
  background-color: #F5F1E8 !important;
}
.peds-follow__outer {
  max-width: 1600px;
  margin: 0 auto;
}
.peds-follow__inner {
  background-color: #5BA3D0;
  border-radius: 16px;
  padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 60px);
  color: #ffffff;
  overflow: hidden;
}
.peds-follow__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: clamp(28px, 4vw, 48px);
  flex-wrap: wrap;
}
.peds-follow__heading {
  font-family: "Bookmania", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(44px, 5.6vw, 76px);
  letter-spacing: -0.012em;
  line-height: 1;
  color: #ffffff;
  margin: 0;
}
.peds-follow__handle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #ffffff;
  text-decoration: none;
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.peds-follow__handle:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #5BA3D0;
  transform: translateY(-2px);
}
.peds-follow__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
@media (max-width: 767px) {
  .peds-follow__grid {
    grid-template-columns: 1fr;
  }
}
.peds-follow__tile {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.18);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 0.45s cubic-bezier(0.34, 1.15, 0.64, 1),
              box-shadow 0.45s cubic-bezier(0.34, 1.15, 0.64, 1);
}
.peds-follow__tile:hover {
  transform: translateY(-10px);
}
.peds-follow__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%) brightness(0.92);
  transition: filter 0.45s ease, transform 0.45s ease;
  background: #000;
}
.peds-follow__tile:hover .peds-follow__video {
  filter: grayscale(0%) brightness(1);
  transform: scale(1.05);
}
.peds-follow__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  background: rgba(255, 255, 255, 0.95);
  color: #5BA3D0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: transform 0.35s ease, opacity 0.3s ease;
  pointer-events: none;
}
.peds-follow__play svg {
  margin-left: 4px;  /* visual nudge for play triangle */
  width: 22px;
  height: 24px;
}
.peds-follow__tile:hover .peds-follow__play {
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0;
}
/* Mobile / touch: no hover to reveal color. Videos autoplay (see JS) and
   render at full color with the play overlay hidden so the IG content is
   immediately visible, not washed out / hidden behind a button. */
@media (max-width: 768px), (hover: none) {
  .peds-follow__video {
    filter: none !important;
  }
  .peds-follow__play {
    display: none !important;
  }
  .peds-follow__tile {
    /* keep the gentle lift on tap-active to feel responsive */
    transition: transform 0.25s ease;
  }
  .peds-follow__tile:active {
    transform: translateY(-3px);
  }
}

/* ================================================================
   Radiating reviews — oscillating lines, longer with hooked ends
   ================================================================ */
.peds-radiating-lines {
  position: absolute;
  inset: -40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.peds-radiating-lines .peds-radiating-line {
  fill: none;
  stroke: rgba(91, 163, 208, 0.55);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 6 9;
  animation: peds-radiating-flow 4s linear infinite;
}
@keyframes peds-radiating-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -30; }
}
.peds-radiating-lines .peds-radiating-endpoint {
  display: none;
}

/* Lock Different Way picture height to its grid item (defensive) */
#peds-sec-story .grid > div:nth-child(2) picture,
#peds-sec-story .grid > div:nth-child(2) img {
  max-height: 100% !important;
}

/* ================================================================
   Nav gap — tightened for 6 links so the row breathes within 1185px
   ================================================================ */
.peds-nav__links {
  gap: clamp(12px, 1.8vw, 26px) !important;
}

/* ================================================================
   "More than a check-up" mobile fixes
   ================================================================ */
@media (max-width: 767px) {
  .peds-services-section {
    padding: 30px 16px !important;
  }
  .peds-services-container {
    border-radius: 22px !important;
    padding: 36px 22px !important;
  }
  .peds-services-intro {
    margin-bottom: 32px !important;
  }
  .peds-services-heading {
    font-size: clamp(32px, 8.5vw, 44px) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }
  .peds-services-sub {
    font-size: 14px !important;
    max-width: 100% !important;
  }
  .peds-services-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .peds-service-card {
    padding: 22px 20px !important;
    grid-template-columns: 48px 1fr !important;
    column-gap: 16px !important;
    row-gap: 4px !important;
  }
  .peds-service-card h3 {
    font-size: 21px !important;
    line-height: 1.15 !important;
  }
  .peds-service-card p {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
  .peds-service-icon {
    width: 48px !important;
    height: 48px !important;
  }
  .peds-service-icon svg {
    width: 42px !important;
    height: 42px !important;
    stroke-width: 2 !important;
  }
}


/* ================================================================
   Mobile hero — push the box DOWN below the nav.
   Nav is fixed at top:12, ~64px tall. Box must clear y~76.
   ================================================================ */
@media (max-width: 768px) {
  .peds-hero {
    min-height: 620px !important;
  }
  .peds-hero__overlay {
    align-items: flex-end !important;
    padding-top: 100px !important;
    padding-bottom: 32px !important;
  }
  .peds-hero__box {
    max-width: 92% !important;
    padding: 28px 24px !important;
  }
  .peds-hero__headline {
    font-size: clamp(28px, 7vw, 38px) !important;
    line-height: 1.05 !important;
  }
  .peds-hero__sub {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .peds-hero__eyebrow {
    font-size: 10.5px !important;
    margin-bottom: 12px !important;
  }
  .peds-hero__cta-primary,
  .peds-hero__cta-secondary {
    padding: 11px 20px !important;
    font-size: 14px !important;
  }
}


/* ================================================================
   Fade-in-on-scroll system
   ================================================================ */
.peds-fade-in {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.peds-fade-in.peds-fade-in--visible {
  opacity: 1;
  transform: none;
}
/* Opacity-only variant for elements that ALREADY use transform for
   positioning (centered photo, centered side cards). Keeps centering intact. */
.peds-fade-opacity {
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity;
}
.peds-fade-opacity.peds-fade-in--visible {
  opacity: 1 !important;
}
/* Belt-and-suspenders: if for any reason the observer doesn't fire,
   make sure these elements are visible after 2s on page load.
   (Implemented in JS below as a safety net.) */
/* Hard-restore the positioning transforms — DESKTOP ONLY.
   Mobile uses static flex layout where these transforms must NOT apply. */
@media (min-width: 992px) {
  .peds-radiating-center.peds-fade-in,
  .peds-radiating-center.peds-fade-opacity,
  .peds-radiating-center {
    transform: translate(-50%, -50%) !important;
  }
  .peds-radiating-card[data-pos="left"],
  .peds-radiating-card[data-pos="left"].peds-fade-in,
  .peds-radiating-card[data-pos="left"].peds-fade-opacity {
    transform: translate(-18px, -50%) !important;
  }
  .peds-radiating-card[data-pos="right"],
  .peds-radiating-card[data-pos="right"].peds-fade-in,
  .peds-radiating-card[data-pos="right"].peds-fade-opacity {
    transform: translate(18px, -50%) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .peds-fade-in,
  .peds-fade-in.peds-fade-in--visible,
  .peds-fade-opacity,
  .peds-fade-opacity.peds-fade-in--visible {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ================================================================
   Mobile section padding normalization
   Force every adjacent-section pad to 30/30 on mobile so vertical
   rhythm (especially around tickers) is symmetric.
   ================================================================ */
@media (max-width: 991px) {
  #peds-sec-pillars section,
  #peds-sec-stats section,
  #peds-sec-phrases section,
  #peds-sec-story section,
  #peds-sec-panels section,
  #peds-sec-quote section,
  #peds-sec-ticker section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
}

/* ================================================================
   Mobile blue boxes — visible rounded corners + side padding
   Matches the About panel pattern (md:px-2.5 = ~10px side breathing
   room, 16px corners visible on all 4 sides).
   ================================================================ */
@media (max-width: 767px) {
  .peds-radiating-reviews,
  .peds-services-section,
  .peds-follow {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .peds-services-container,
  .peds-follow__inner,
  .peds-radiating-box {
    border-radius: 16px !important;
  }
  /* Outlined reviews box: keep 1px border on ALL sides on mobile */
  .peds-radiating-box {
    border-left-width: 1px !important;
    border-right-width: 1px !important;
    border-top-width: 1px !important;
    border-bottom-width: 1px !important;
  }
}


/* ================================================================
   INQUIRY PAGE — JotForm embed on the shared membership card system.
   /inquiry/ — funnels every CTA to JotForm 251805374258158.
   Hero (blue, from top) → trust pillars → white form card (auto-resizing
   iframe, no internal scroll) → support row (blue + outline).
   Every block is max-width 1185px, centered — the SAME content column
   as the rest of the site (kills the old over-wide outline box). Text is
   white / cream / brand-blue / slate only — no off-theme black.
   ================================================================ */

/* Centered hero variant (no media) — reuses .peds-mhero-top from membership */
.peds-mhero-top__inner--center { max-width: 760px; margin: 0 auto; text-align: center; }
.peds-mhero-top__inner--center .peds-mhero__sub { margin-left: auto; margin-right: auto; }
.peds-mhero-top__inner--center .peds-cta-row { justify-content: center; }

/* Shared inner width for the inquiry blocks (matches .peds-mcard) */
.peds-iq-intro,
.peds-iq-formcard,
.peds-iq-support { max-width: 1600px; margin-left: auto; margin-right: auto; }

/* ---- Compact intro above the form ---- */
.peds-iq-intro { max-width: 660px; text-align: center; margin-bottom: clamp(22px, 2.6vw, 34px); }
/* The form itself stays a comfortable, centered width — a full 1600px form stretches the fields
   awkwardly. The hero + support row around it still run the full site width. */
.peds-iq-formcard { max-width: 960px; }
.peds-iq-intro .peds-h2 { color: #5BA3D0; margin-bottom: 12px; }
.peds-iq-intro__sub {
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
  color: #51607A;
  margin: 0;
}

/* ---- White card framing the JotForm. The iframe auto-resizes to its
   content (setHeight handler below) and scrolling="no" kills the internal
   scrollbar — so the page scrolls naturally under a mobile thumb. ---- */
.peds-iq-formcard {
  background: #ffffff;
  border: 1.5px solid rgba(91,163,208,0.45);
  border-radius: clamp(18px, 2.4vw, 28px);
  padding: clamp(10px, 1.6vw, 20px);
  overflow: hidden;
  box-shadow: none;
}
.peds-iq-formcard iframe {
  display: block;
  width: 100%;
  border: 0;
  background: #ffffff;
  border-radius: clamp(10px, 1.6vw, 16px);
}
.peds-iq-noscript {
  padding: 28px;
  text-align: center;
  color: #1F2A37;
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
}
.peds-iq-noscript a { color: #5BA3D0; }

/* ---- Support row (blue filled + cream outline) ---- */
.peds-iq-support {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
}
.peds-iq-card {
  border-radius: clamp(16px, 2vw, 22px);
  padding: clamp(26px, 3vw, 40px);
}
.peds-iq-card--blue { background: #5BA3D0; color: #ffffff; }
.peds-iq-card--outline { background: #F5F1E8; border: 1.5px solid #5BA3D0; }

.peds-iq-card__eyebrow {
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  font-weight: 700;
  margin: 0 0 6px;
}
.peds-iq-card__title {
  font-family: "Bookmania", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.1;
  margin: 0 0 20px;
}
.peds-iq-card--blue .peds-iq-card__eyebrow { color: rgba(255,255,255,0.85); }
.peds-iq-card--blue .peds-iq-card__title  { color: #ffffff; }
.peds-iq-card--outline .peds-iq-card__eyebrow { color: #5BA3D0; }
.peds-iq-card--outline .peds-iq-card__title  { color: #1F2A37; }

/* Contact list (blue card) — Bookmania, header-scale */
.peds-iq-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.peds-iq-contact li { display: flex; flex-direction: column; gap: 4px; }
.peds-iq-contact__label {
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(255,255,255,0.8);
}
.peds-iq-contact a,
.peds-iq-contact__label + span {
  font-family: "Bookmania", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.peds-iq-contact a:hover { opacity: 0.82; }

/* Steps list (outline card) — large bare numerals */
.peds-iq-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.peds-iq-steps li {
  display: grid;
  grid-template-columns: clamp(58px, 6vw, 88px) 1fr;
  gap: clamp(14px, 1.4vw, 20px);
  align-items: center;
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.5;
  color: #51607A;
}
.peds-iq-step-num {
  font-family: "Bookmania", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(48px, 5.6vw, 78px);
  line-height: 1;
  color: #5BA3D0;
  letter-spacing: -0.01em;
}
/* The support row is swapped: "Reach out" = outline (left), "After you submit" = blue (right).
   Make the contact + steps lists adapt to whichever card colour they now sit in. */
.peds-iq-card--blue .peds-iq-steps li { color: rgba(255,255,255,0.92); }
.peds-iq-card--blue .peds-iq-step-num { color: #F5F1E8; }
.peds-iq-card--outline .peds-iq-contact__label { color: #5BA3D0; }
.peds-iq-card--outline .peds-iq-contact a,
.peds-iq-card--outline .peds-iq-contact__label + span { color: #1F2A37; }

/* ---- Responsive ---- */
@media (max-width: 760px) {
  .peds-iq-support { grid-template-columns: 1fr; }
}


/* =========================================================================
   ====  NEW PAGES (about / membership / services / supplements / posts /
   ====  business / contact / legal) — appended 2026-05-28. APPEND-ONLY:
   ====  nothing above this banner is modified. Brand colors are hardcoded
   ====  hex literals (no CSS vars) to match the existing stylesheet.
   ========================================================================= */

/* =========================================
   SHARED: page chrome helpers + utilities
   ========================================= */

/* sr-only — visually hidden but available to screen readers (a11y) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip link — first focusable element, jumps to main content */
.peds-skip-link {
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  z-index: 1000;
  background: #5BA3D0;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 0 0 12px 12px;
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.peds-skip-link:focus {
  top: 0;
  outline: 3px solid #1F2A37;
}

/* Reserve nav height so the JS-injected pill doesn't cause layout jump (FOUC) */
#peds-nav-mount { display: block; min-height: 0; }

/* Visible focus indicator for keyboard users across all new interactive bits */
.peds-page a:focus-visible,
.peds-page button:focus-visible,
.peds-faq__q:focus-visible {
  outline: 3px solid #1F2A37;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Current nav link emphasis (set by peds-chrome.js highlightCurrent) */
.peds-nav__link--current { color: #3F8AB8; }
.peds-nav__link--current::after { width: 24px; }

/* Shared page wrapper: cream base, top padding clears the fixed nav pill */
.peds-page {
  background-color: #F5F1E8;
  color: #1a1a1a;
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
}

/* Generic section + width rhythm (max-width 1600px — matches the home-page sections) */
.peds-section {
  padding: 30px clamp(20px, 4vw, 40px);   /* standardized to the home-page section rhythm: 30px -> 60px between sections */
}
.peds-section--tight { padding-top: 30px; padding-bottom: 30px; }   /* standardized to the universal 30/30 rhythm */
.peds-section--cream { background-color: #F5F1E8; }
.peds-section--white { background-color: #FFFFFF; }
.peds-section--blue { background-color: #5BA3D0; color: #ffffff; }
.peds-wrap {
  max-width: 1600px;   /* site-wide content width — matches the home-page 1600 sections */
  margin: 0 auto;
  width: 100%;
}
.peds-wrap--narrow { max-width: 820px; }

/* Shared eyebrow (uppercase DM Sans, blue) */
.peds-eyebrow {
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #5BA3D0;
  margin: 0 0 14px;
}
.peds-section--blue .peds-eyebrow { color: rgba(255,255,255,0.85); }

/* Shared headings — Bookmania serif for h1/h2/h3 on new pages */
.peds-h1 {
  font-family: "Bookmania", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: #1a1a1a;
  margin: 0 0 18px;
}
.peds-h2 {
  font-family: "Bookmania", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: #1a1a1a;
  margin: 0 0 16px;
}
.peds-h3 {
  font-family: "Bookmania", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #1a1a1a;
  margin: 0 0 10px;
}
.peds-section--blue .peds-h1,
.peds-section--blue .peds-h2,
.peds-section--blue .peds-h3 { color: #ffffff; }
.peds-h1 em, .peds-h2 em, .peds-h3 em,
.peds-pullquote em { font-style: italic; }

/* Lead/body paragraphs */
.peds-lead {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
  color: #475569;
  margin: 0 0 18px;
}
.peds-section--blue .peds-lead { color: rgba(255,255,255,0.92); }
.peds-body {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: #1F2A37;
  margin: 0 0 16px;
}
.peds-body--muted { color: #475569; }

/* Pull-quote (Bookmania, large) — emotional anchors */
.peds-pullquote {
  font-family: "Bookmania", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #1a1a1a;
  margin: 0 0 28px;
  border-left: 3px solid #5BA3D0;
  padding-left: clamp(18px, 2.5vw, 32px);
}
.peds-section--blue .peds-pullquote {
  color: #ffffff;
  border-left-color: rgba(255,255,255,0.6);
}

/* Shared CTA buttons (pill, DM Sans) — primary filled + outline variants */
.peds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 15px 28px;
  border-radius: 999px;
  border: 2px solid #5BA3D0;
  text-decoration: none;
  cursor: pointer;
  min-height: 48px; /* a11y touch target */
  /* Universal CTA interaction: smooth COLOR FLIP only — never move, never shadow. */
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
/* ============================================================================
   TWO UNIVERSAL CTAs — exact inverses, color-flip on hover (no move, no shadow).
   On CREAM / light backgrounds (default):
     --primary  = BLUE  : blue fill + cream text  → hover flips to cream fill + blue text
     --outline  = CREAM : cream fill + blue text  → hover flips to blue fill + cream text
   The blue border stays through the flip so the button never merges into the page.
   Blue/dark backgrounds recolor the pair to cream borders (see context blocks below).
   ============================================================================ */
.peds-btn--primary { background-color: #5BA3D0; color: #F5F1E8; border-color: #5BA3D0; }
.peds-btn--primary:hover { background-color: #F5F1E8; color: #5BA3D0; border-color: #5BA3D0; }
.peds-btn--outline { background-color: #F5F1E8; color: #5BA3D0; border-color: #5BA3D0; }
.peds-btn--outline:hover { background-color: #5BA3D0; color: #F5F1E8; border-color: #5BA3D0; }
/* On a blue section, invert */
.peds-section--blue .peds-btn--primary { background-color: #F5F1E8; color: #5BA3D0; border-color: #F5F1E8; }
.peds-section--blue .peds-btn--primary:hover { background-color: #5BA3D0; color: #F5F1E8; border-color: #F5F1E8; }
.peds-section--blue .peds-btn--outline { background-color: transparent; color: #F5F1E8; border-color: #F5F1E8; }
.peds-section--blue .peds-btn--outline:hover { background-color: #F5F1E8; color: #5BA3D0; border-color: #F5F1E8; }
/* Disabled CTA (null Acuity URL) — never a broken link */
.peds-btn:disabled,
.peds-btn[aria-disabled="true"] {
  background-color: #E2E8F0;
  color: #94A3B8;
  border-color: #E2E8F0;
  cursor: not-allowed;
  pointer-events: auto; /* keep tooltip on hover */
  transform: none;
  box-shadow: none;
}

.peds-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

/* =========================================
   SHARED: page hero band (blue overlay box)
   Mirrors homepage hero pattern, smaller.
   ========================================= */
.peds-pagehero {
  position: relative;
  background-color: #5BA3D0;                           /* clean blue banner — matches the About/inquiry header */
  width: calc(100% - 2 * clamp(16px, 4vw, 40px));      /* same inset as the other headers/sections */
  max-width: 1600px;
  margin: 0 auto;
  border-radius: 0 0 clamp(22px, 3vw, 32px) clamp(22px, 3vw, 32px);   /* square top, rounded bottom — descends from the nav */
  padding: clamp(104px, 13vw, 150px) clamp(28px, 4vw, 54px) clamp(44px, 5.5vw, 76px);
  overflow: hidden;
}
.peds-pagehero--photo { background-position: center; background-size: cover; }
.peds-pagehero__inner {
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
}
.peds-pagehero__box {
  background: transparent;   /* the banner itself is blue now — no floating box, no drop shadow */
  box-shadow: none;
  max-width: none;
  padding: 0;
  border-radius: 0;
  color: #ffffff;
}
@media (max-width: 768px) {
  .peds-pagehero {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0 0 clamp(20px, 6vw, 28px) clamp(20px, 6vw, 28px);
    padding: clamp(92px, 24vw, 116px) clamp(16px, 5vw, 22px) clamp(34px, 9vw, 46px);
  }
}
.peds-pagehero__box .peds-eyebrow { color: rgba(255,255,255,0.85); }
.peds-pagehero__title {
  font-family: "Bookmania", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(36px, 5.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: #ffffff;
  margin: 0 0 16px;
}
.peds-pagehero__sub {
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
  margin: 0 auto;
  max-width: 60ch;
}
/* Hero with a side headshot (about page) */
.peds-pagehero--split .peds-pagehero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.peds-pagehero__media img {
  width: 100%;
  height: 100%;
  max-height: 440px;
  object-fit: cover;
  border-radius: 28px;
  border: 3px solid #0a0a0a;
  display: block;
}
@media (max-width: 860px) {
  .peds-pagehero--split .peds-pagehero__inner { grid-template-columns: 1fr; }
  .peds-pagehero__media { order: -1; }
  .peds-pagehero__media img { max-height: 320px; }
}

/* =========================================
   SHARED: CTA band (full-width call to action)
   ========================================= */
.peds-ctaband {
  background-color: #5BA3D0;
  color: #ffffff;
  padding: clamp(24px, 3.5vw, 48px) clamp(20px, 4vw, 40px);
  margin-top: 30px;   /* cream gap above the CTA band: 30 here + 30 from the preceding section = the universal 60px */
  text-align: center;
}
.peds-mhero-top.peds-abouthero { margin-bottom: 30px; }   /* cream gap below the About hero: 30 here + 30 first-section padding = universal 60px */
.peds-ctaband__inner { max-width: 820px; margin: 0 auto; }
.peds-ctaband .peds-h2 { color: #ffffff; }
.peds-ctaband__sub { font-size: clamp(15px,1.4vw,19px); line-height:1.6; color: rgba(255,255,255,0.92); margin: 0 0 28px; }
.peds-ctaband .peds-cta-row { justify-content: center; }

/* =========================================
   SHARED: marquee ticker breather (blue strip)
   ========================================= */
.peds-marquee {
  background-color: #5BA3D0;
  overflow: hidden;
  padding: 14px 0;
}
.peds-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 0;   /* inter-copy spacing comes from each span's trailing margin so the -50% loop seam is clean */
  white-space: nowrap;
  animation: peds-marquee-move 240s linear infinite;   /* slow drift; duration scales with the longer (repeated) track to keep the original speed */
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
}
/* each half = one <span>, repeated wide enough to exceed any viewport; trailing margin keeps the
   dot rhythm continuous across the seam so translateX(-50%) loops with no blank gap on wide screens */
.peds-marquee__track > span { display: inline-flex; align-items: center; gap: 28px; margin-right: 28px; }
.peds-marquee__track .peds-marquee__dot { color: rgba(255,255,255,0.55); }
@keyframes peds-marquee-move {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .peds-marquee__track { animation: none; }
}

/* =========================================
   SHARED: outlined card + grid scaffolds
   ========================================= */
.peds-card {
  background-color: transparent;        /* was white — match the site's cream/blue outline-card scheme */
  border: 1.5px solid #5BA3D0;          /* was black #0a0a0a */
  border-radius: 24px;
  padding: clamp(24px, 3vw, 36px);
}
.peds-card--cream { background-color: #F5F1E8; }
.peds-card--outline { background-color: transparent; border-color: #5BA3D0; }
.peds-grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.peds-grid--2 { grid-template-columns: repeat(2, 1fr); }
.peds-grid--3 { grid-template-columns: repeat(3, 1fr); }
.peds-grid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 980px) {
  .peds-grid--3, .peds-grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .peds-grid--2, .peds-grid--3, .peds-grid--5 { grid-template-columns: 1fr; }
}

/* Section intro block */
.peds-intro { max-width: 760px; margin: 0 0 clamp(32px, 4vw, 56px); }
.peds-intro--center { margin-left: auto; margin-right: auto; text-align: center; }


/* =========================================
   PAGE: about.html  (redesign)
   ========================================= */

/* Hero — name-forward nameplate, centered on the blue panel */
.peds-abouthero__name { font-size: clamp(38px, 6vw, 70px); margin-bottom: 14px; }
.peds-abouthero__creds {
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  margin: 0 0 18px;
}
.peds-abouthero__creds span { color: rgba(255,255,255,0.5); margin: 0 5px; }

/* "Why I left" + team — side-by-side split: outline text panel + photo square */
.peds-about__header { font-family: "Bookmania", "Cormorant Garamond", Georgia, serif; font-weight: 400; font-size: clamp(27px, 3.1vw, 40px); line-height: 1.08; color: #5BA3D0; margin: 0 0 clamp(14px, 1.8vw, 20px); }
/* Quote sits at the BOTTOM of the panel as a closing line — no left bar */
.peds-about__quote { color: #5BA3D0; border-left: 0; padding-left: 0; margin: clamp(22px, 2.8vw, 34px) 0 0; }
.peds-split__text > .peds-body { margin-bottom: 13px; }
.peds-split__text > .peds-body:last-child { margin-bottom: 0; }

.peds-split { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(16px, 2.4vw, 28px); align-items: stretch; }
.peds-split--rev { grid-template-columns: 1fr 1.25fr; }
.peds-split--even { grid-template-columns: 1fr 1fr; }
.peds-split--even .peds-split__text { display: flex; flex-direction: column; justify-content: center; }
/* --croptop: keep the hero photo short + centered so the whole hero is more compact, while BOTH
   subjects (Dr. Trey + the child, who sit in the upper-middle) stay in frame — the crop trims the
   window/feet, not the faces. The blue panel stretches to match, so both halves stay aligned. Desktop only. */
@media (min-width: 761px) {
  .peds-split--croptop .peds-split__media { aspect-ratio: 1000 / 1050; }
  .peds-split--croptop .peds-split__media img { object-position: center; }
}
.peds-split__text { max-width: none; margin: 0; }
.peds-split__media { border-radius: clamp(20px, 2.6vw, 30px); overflow: hidden; min-height: clamp(280px, 32vw, 430px); background: #F5F1E8; }
.peds-split__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
/* About "A pediatrician, and a parent" family photo — has to hold up at EVERY width:
   • WIDE (>1500px): true side-by-side. The photo STRETCHES to the (long) text column so it's never
     "much smaller" than the text; the family fills the frame and the faces stay centered.
   • 760–1500px: a side photo would always look tiny next to that tall text, so the layout STACKS and
     the photo becomes a full-width banner above the text.
   • PHONES (≤760px): stacked, with a tighter near-square crop of the family.
   In every case object-position is anchored on the faces, so they're never cut. */
.peds-split--famcrop .peds-split__media { align-self: stretch; min-height: clamp(360px, 40vw, 560px); overflow: hidden; }
.peds-split--famcrop .peds-split__media img[src*="trey-family"] { object-position: center 78%; transform: none; }
@media (max-width: 1023px) {
  .peds-split--famcrop { grid-template-columns: 1fr; }
  .peds-split--famcrop .peds-split__media { align-self: auto; aspect-ratio: 3 / 2; min-height: 0; }
  .peds-split--famcrop .peds-split__media img[src*="trey-family"] { object-position: center 40%; }
}
@media (max-width: 760px) {
  .peds-split--famcrop .peds-split__media { aspect-ratio: 0.92; }
  .peds-split--famcrop .peds-split__media img[src*="trey-family"] { object-position: center 78%; }
}
.peds-split__media .peds-team__placeholder { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.peds-split__text .peds-team__name { font-family: "Bookmania", "Cormorant Garamond", Georgia, serif; font-weight: 400; font-size: clamp(26px, 3vw, 38px); line-height: 1.08; color: #5BA3D0; margin: 0 0 6px; }
.peds-split__inlinephoto { display: none; }
@media (max-width: 760px) {
  .peds-split, .peds-split--rev { grid-template-columns: 1fr; }
  .peds-split__media { min-height: 0; aspect-ratio: 16 / 11; }
  .peds-split--rev .peds-split__media { aspect-ratio: 4 / 5; }  /* team headshot stays portrait on mobile */
  /* Hero splits on mobile: drop the side photo, show it inside the blue card just above the CTAs */
  .peds-split--even .peds-split__media { display: none; }
  .peds-split--even .peds-split__inlinephoto { display: block; margin: 2px 0 clamp(16px, 4vw, 22px); border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; }
  .peds-split--even .peds-split__inlinephoto img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
}

/* Credentials use the canonical cred squares below. */

/* Story — branded vertical timeline */
.peds-timeline { list-style: none; margin: clamp(6px,1.4vw,14px) 0 0; padding: 0; max-width: 720px; }
.peds-tl { position: relative; padding-left: 46px; padding-bottom: clamp(26px, 3.4vw, 40px); }
.peds-tl:last-child { padding-bottom: 0; }
.peds-tl::before { content: ""; position: absolute; left: 10px; top: 8px; bottom: -6px; width: 2px; background: rgba(91,163,208,0.35); }
.peds-tl:last-child::before { display: none; }
.peds-tl__node {
  position: absolute; left: 0; top: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #FFFFFF; border: 2px solid #5BA3D0;
  box-shadow: 0 0 0 4px #F5F1E8;
}
.peds-tl--now .peds-tl__node { background: #5BA3D0; }
.peds-tl__place {
  display: block;
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #5BA3D0; margin-bottom: 4px;
}
.peds-tl__title { font-family: "Bookmania", "Cormorant Garamond", Georgia, serif; font-weight: 400; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.12; color: #1a1a1a; margin: 0 0 6px; }
.peds-tl__copy { font-size: clamp(14.5px,1.1vw,16px); line-height: 1.6; color: #475569; margin: 0; }
.peds-story__close {
  margin: clamp(24px, 3vw, 38px) 0 0;
  font-family: "Bookmania", "Cormorant Garamond", Georgia, serif;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.4; color: #5BA3D0;
}

/* Five Pillars — editorial big-number list (number left, name + copy right), recolored
   into the survey's cream-on-blue palette: cream numbers/text, light-blue dividers. On the blue panel. */
.peds-pillars { display: flex; flex-direction: column; max-width: 880px; }
.peds-pillar {
  display: grid;
  grid-template-columns: clamp(60px, 8vw, 100px) 1fr;
  gap: clamp(18px, 3vw, 40px);
  align-items: start;
  padding: clamp(22px, 3vw, 34px) 0;
  border-top: 1px solid rgba(168,207,232,0.55);
}
.peds-pillar:first-child { border-top: 0; padding-top: clamp(4px, 1vw, 10px); }
.peds-pillar:last-child { padding-bottom: 0; }
.peds-pillar__num {
  font-family: "Bookmania", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(44px, 6vw, 76px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: #F5F1E8;
}
.peds-pillar__name {
  font-family: "Bookmania", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  color: #F5F1E8;
  margin: 0 0 8px;
}
.peds-pillar__copy { font-size: clamp(14.5px, 1.1vw, 16px); line-height: 1.65; color: rgba(245,241,232,0.9); margin: 0; max-width: 60ch; }
@media (max-width: 560px) {
  .peds-pillar { grid-template-columns: 1fr; gap: 4px; }
  .peds-pillar__num { font-size: clamp(34px, 11vw, 44px); line-height: 1; }
}

/* Framework card (Five Pillars): on desktop, place the intro on the LEFT and the
   numbered list on the RIGHT so the blue card fills its full width — kills the
   dead space on the right at wide viewports (1920+). Stacks below 992px. */
@media (min-width: 992px) {
  .peds-mcard--framework {
    display: grid;
    grid-template-columns: minmax(300px, 0.8fr) 1.2fr;
    column-gap: clamp(48px, 5vw, 88px);
    align-items: start;
  }
  .peds-mcard--framework .peds-intro { margin: 0; max-width: none; align-self: center; }
  .peds-mcard--framework .peds-pillars { max-width: none; }
}
/* CTA under the subtext in the framework card's left column (uses the standard
   .peds-btn--primary, auto-styled cream-on-blue by the .peds-mcard--blue rule). */
.peds-mcard--framework .peds-cta-row { margin-top: clamp(22px, 2.6vw, 34px); justify-content: flex-start; }

/* Lead/links inside solid-blue panels reverse to white */
.peds-mcard--blue .peds-lead { color: rgba(255,255,255,0.92); }
.peds-mcard--blue .peds-lead a { color: #ffffff; text-decoration: underline; }
/* Team (Emily) — blue panel with cream text + blue-outlined photo */
.peds-split--rev .peds-split__media { border: 2px solid #5BA3D0; }
/* Emily's team photo: crop it ~12% shorter (≈2% off the top + ≈10% off the bottom
   via object-position) so the whole section pulls in and the centered bio has far
   less empty space above/below it. Desktop only — mobile keeps its 4/5 portrait. */
@media (min-width: 761px) {
  .peds-split--rev:has(.peds-team__bio) .peds-split__media { aspect-ratio: 0.95; }
  .peds-split--rev:has(.peds-team__bio) .peds-split__media img { object-position: center 16%; }
}
.peds-split--rev .peds-mcard--blue .peds-team__name { color: #F5F1E8; }
.peds-split--rev .peds-mcard--blue .peds-team__role { color: rgba(245,241,232,0.82); }
.peds-split--rev .peds-mcard--blue .peds-team__bio { color: rgba(255,255,255,0.92); }
/* Hero text + buttons reversed for a solid-blue text panel (services split hero) */
.peds-mcard--blue .peds-mhero__title { color: #ffffff; }
.peds-mcard--blue .peds-mhero__sub { color: rgba(255,255,255,0.92); }
.peds-mcard--blue .peds-btn--primary { background-color: #F5F1E8; color: #5BA3D0; border-color: #F5F1E8; }
.peds-mcard--blue .peds-btn--primary:hover { background-color: #5BA3D0; color: #F5F1E8; border-color: #F5F1E8; }
.peds-mcard--blue .peds-btn--outline { background-color: transparent; color: #F5F1E8; border-color: #F5F1E8; }
.peds-mcard--blue .peds-btn--outline:hover { background-color: #F5F1E8; color: #5BA3D0; border-color: #F5F1E8; }

/* Credentials — three solid-blue squares in a row (their own badges, not a panel) */
.peds-credwrap { max-width: 1600px; margin: 0 auto; }
.peds-credintro .peds-h2 { color: #5BA3D0; }
.peds-credrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); max-width: 980px; }
.peds-credsq {
  background: #5BA3D0;
  color: #ffffff;
  border-radius: clamp(16px, 2vw, 22px);
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: clamp(20px, 3vw, 34px);
}
.peds-credsq__degree { font-family: "Bookmania", "Cormorant Garamond", Georgia, serif; font-weight: 400; font-size: clamp(44px, 5.2vw, 66px); line-height: 0.95; color: #ffffff; }
.peds-credsq__inst { font-family: "DM Sans", "Inter", system-ui, sans-serif; font-size: clamp(13px, 1.05vw, 15px); line-height: 1.45; color: rgba(255,255,255,0.9); max-width: 22ch; }
@media (max-width: 600px) {
  .peds-credrow { grid-template-columns: 1fr; max-width: 360px; }
  .peds-credsq { aspect-ratio: auto; padding: clamp(26px, 7vw, 34px); gap: 8px; }
}

/* Team — sits directly inside its outline panel (no nested card) */
.peds-team { display: grid; grid-template-columns: 220px 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; }
@media (max-width: 680px) { .peds-team { grid-template-columns: 1fr; text-align: center; } }
.peds-team__photo,
.peds-team__placeholder { width: 100%; aspect-ratio: 4/5; border-radius: 18px; border: 2px solid #5BA3D0; object-fit: cover; display: block; }
.peds-team__placeholder {
  background: linear-gradient(160deg, #5BA3D0 0%, #3F8AB8 100%);
  color: #ffffff; border: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: "Bookmania", "Cormorant Garamond", Georgia, serif;
  font-size: clamp(48px, 7vw, 72px); letter-spacing: 0.04em;
}
.peds-team__name { margin: 0 0 4px; }
.peds-team__role { font-family: "DM Sans", "Inter", system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #5BA3D0; margin: 0 0 14px; }
.peds-team__bio { font-size: 15px; line-height: 1.65; color: #475569; margin: 0; max-width: 60ch; }
@media (max-width: 680px) { .peds-team__bio { margin: 0 auto; } }

/* Emily's team card sits in a tall blue split panel — bump the body + role text
   so it fills the panel instead of leaving dead space. */
.peds-split__text .peds-team__role { font-size: 14px !important; margin-bottom: 18px !important; }
.peds-split__text .peds-team__bio { font-size: clamp(16px, 1.3vw, 18.5px) !important; line-height: 1.72 !important; max-width: none !important; }
/* Vertically center Emily's content in the tall blue split card so the leftover
   space is balanced top/bottom instead of pooling as dead space below the bio. */
.peds-split__text:has(.peds-team__bio) { display: flex !important; flex-direction: column !important; justify-content: center !important; }


/* =========================================
   PAGE: membership.html
   ========================================= */
.peds-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
@media (max-width: 980px) { .peds-tiers { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; } }
.peds-tier {
  background-color: #FFFFFF;
  border: 2px solid #0a0a0a;
  border-radius: 24px;
  padding: clamp(26px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.peds-tier__name {
  font-family: "Bookmania", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 34px);
  line-height: 1.05;
  color: #1a1a1a;
  margin: 0;
}
.peds-tier__price {
  font-family: "Bookmania", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 42px);
  color: #5BA3D0;
  line-height: 1;
  margin: 0;
}
.peds-tier__price span { font-family: "DM Sans", "Inter", system-ui, sans-serif; font-size: 14px; color: #94A3B8; font-weight: 500; }
.peds-tier__desc { font-size: 14.5px; line-height: 1.6; color: #475569; margin: 0; }
.peds-tier__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.peds-tier__list li {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  line-height: 1.5;
  color: #1F2A37;
}
.peds-tier__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  background-color: #5BA3D0;
  border-radius: 999px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center;
}
.peds-tier__who {
  font-size: 13px;
  line-height: 1.55;
  color: #475569;
  border-top: 1px solid rgba(31,42,55,0.12);
  padding-top: 16px;
  margin: 0;
}
.peds-tier__who strong { color: #1a1a1a; }

/* "What's included in every tier" strip */
.peds-included { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 680px) { .peds-included { grid-template-columns: 1fr; } }
.peds-included__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.peds-included__icon {
  width: 56px; height: 56px;
  color: #ffffff;
}
.peds-included__icon svg { width: 56px; height: 56px; stroke-width: 1.6; }
.peds-included__title { font-family: "DM Sans", "Inter", system-ui, sans-serif; font-weight: 700; font-size: 17px; color: #ffffff; margin: 0; }
.peds-included__desc { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.9); margin: 0; max-width: 30ch; }

/* FAQ accordion */
.peds-faq { display: flex; flex-direction: column; gap: 12px; }
.peds-faq__item {
  background-color: #FFFFFF;
  border: 2px solid #0a0a0a;
  border-radius: 16px;
  overflow: hidden;
}
.peds-faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: clamp(18px, 2.2vw, 24px) clamp(18px, 2.4vw, 28px);
  font-family: "Bookmania", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.25;
  color: #1a1a1a;
  min-height: 48px;
}
.peds-faq__icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  position: relative;
}
.peds-faq__icon::before,
.peds-faq__icon::after {
  content: "";
  position: absolute;
  background-color: #5BA3D0;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.peds-faq__icon::before { top: 11px; left: 2px; right: 2px; height: 2.5px; }
.peds-faq__icon::after { left: 11px; top: 2px; bottom: 2px; width: 2.5px; }
.peds-faq__item.is-open .peds-faq__icon::after { transform: scaleY(0); opacity: 0; }
.peds-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.peds-faq__a-inner {
  padding: 0 clamp(18px, 2.4vw, 28px) clamp(18px, 2.2vw, 24px);
}
.peds-faq__a-inner p {
  font-size: 15px;
  line-height: 1.65;
  color: #475569;
  margin: 0;
}

/* Caveats list */
.peds-caveats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.peds-caveats li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #1F2A37;
}
.peds-caveats li::before {
  content: "";
  position: absolute;
  left: 4px; top: 9px;
  width: 7px; height: 7px;
  background-color: #5BA3D0;
  border-radius: 999px;
}

/* Small disclaimer block above footer */
.peds-disclaimer {
  font-size: 13px;
  line-height: 1.6;
  color: #64748B;
  background-color: #F5F1E8;
  border: 1px solid rgba(31,42,55,0.12);
  border-radius: 14px;
  padding: 18px 20px;
}
.peds-section--blue .peds-disclaimer {
  color: rgba(255,255,255,0.85);
  background-color: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
}


/* =========================================
   PAGE: services.html
   ========================================= */
.peds-svc { display: flex; flex-direction: column; gap: 24px; }
.peds-svc-card {
  background-color: transparent;
  border: 2px solid #5BA3D0;
  border-radius: 24px;
  padding: clamp(28px, 3.5vw, 44px);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  /* When reached via a nav #anchor, land one card-gap (24px) below the
     fixed nav island (~104px tall) so the title clears it. */
  scroll-margin-top: 128px;
}
@media (max-width: 860px) { .peds-svc-card { grid-template-columns: 1fr; } }
.peds-svc-card__head { display: flex; flex-direction: column; gap: 12px; }
.peds-svc-card .peds-h2 { color: #5BA3D0; }
.peds-svc-card__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.peds-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5BA3D0;
  background-color: rgba(91,163,208,0.1);
  border: 1px solid rgba(91,163,208,0.35);
  padding: 6px 12px;
  border-radius: 999px;
}
.peds-svc-card__desc { font-size: 15px; line-height: 1.65; color: #475569; margin: 0 0 18px; }
.peds-svc-card__aside { display: flex; flex-direction: column; gap: 18px; align-self: center; }

/* Pricing mini-table */
.peds-pricetable { width: 100%; border-collapse: collapse; font-family: "DM Sans", "Inter", system-ui, sans-serif; }
.peds-pricetable caption {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5BA3D0;
  margin-bottom: 10px;
}
.peds-pricetable th,
.peds-pricetable td {
  text-align: left;
  padding: 9px 10px;
  font-size: 14px;
  border-bottom: 1px solid rgba(31,42,55,0.12);
}
.peds-pricetable th { color: #1a1a1a; font-weight: 700; }
.peds-pricetable td { color: #475569; }
.peds-pricetable td:last-child, .peds-pricetable th:last-child { text-align: right; white-space: nowrap; }
.peds-pricetable tr:last-child td { border-bottom: 0; }

.peds-svc-card--inactive { border-style: dashed; border-color: rgba(31,42,55,0.3); opacity: 0.92; }
.peds-svc-card--inactive .peds-h3 { color: #475569; }

/* Mobile: shorter nav island → smaller anchor offset for nav #anchors */
@media (max-width: 767px) {
  .peds-svc-card { scroll-margin-top: 108px; }
}

.peds-note {
  font-size: 13px;
  line-height: 1.55;
  color: #64748B;
  margin: 6px 0 0;
}
.peds-note--legal { font-size: 12.5px; }


/* =========================================
   PAGE: supplements.html
   ========================================= */
.peds-trust-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width: 760px) { .peds-trust-cards { grid-template-columns: 1fr; } }
.peds-trust-card {
  background-color: transparent;
  border: 2px solid #5BA3D0;
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.peds-trust-card__icon { width: 40px; height: 40px; color: #5BA3D0; }
.peds-trust-card__icon svg { width: 40px; height: 40px; stroke-width: 1.7; }
.peds-trust-card__title { font-family: "DM Sans", "Inter", system-ui, sans-serif; font-weight: 700; font-size: 18px; color: #1a1a1a; margin: 6px 0 0; }
.peds-trust-card__copy { font-size: 14px; line-height: 1.6; color: #475569; margin: 0; }

/* Big "browse dispensary" hero CTA card (fallback when no featured products) */
.peds-dispensary-cta {
  background-color: #5BA3D0;
  color: #ffffff;
  border-radius: 24px;
  padding: clamp(36px, 5vw, 64px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.peds-dispensary-cta .peds-h2 { color: #ffffff; }
.peds-dispensary-cta p { font-size: clamp(15px,1.4vw,18px); line-height: 1.6; color: rgba(255,255,255,0.92); margin: 0; max-width: 60ch; }
/* button on the blue dispensary box: white -> cream (was blue-on-blue) */
.peds-dispensary-cta .peds-btn--primary { background-color:#F5F1E8; color:#5BA3D0; border-color:#F5F1E8; }
.peds-dispensary-cta .peds-btn--primary:hover { background-color:#5BA3D0; color:#F5F1E8; border-color:#F5F1E8; }
/* relocated legal disclaimer, as small print inside the CTA */
.peds-dispensary-cta p.peds-dispensary-cta__fine { width:100%; max-width:none; margin:14px auto 0; font-size:clamp(12px,1vw,13.5px); line-height:1.8; letter-spacing:0.012em; color:rgba(255,255,255,0.72); }
.peds-dispensary-cta__fine a { color:#ffffff; text-decoration:underline; text-underline-offset:2px; }
.peds-dispensary-cta__fine a:hover { opacity:0.85; }

/* Featured products grid (rendered only if data present) */
.peds-prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .peds-prod-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .peds-prod-grid { grid-template-columns: 1fr; } }
.peds-prod {
  background-color: #FFFFFF;
  border: 2px solid #0a0a0a;
  border-radius: 20px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.peds-prod__name { font-family: "Bookmania","Cormorant Garamond",Georgia,serif; font-weight: 400; font-size: 22px; color: #1a1a1a; margin: 0; }
.peds-prod__meta { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #5BA3D0; margin: 0; }
.peds-prod__desc { font-size: 14px; line-height: 1.55; color: #475569; margin: 0 0 8px; flex: 1; }


/* =========================================
   PAGE: posts.html
   ========================================= */
.peds-posts-featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .peds-posts-featured { grid-template-columns: 1fr; } }
.peds-post-card {
  background-color: #FFFFFF;
  border: 2px solid #0a0a0a;
  border-radius: 22px;
  padding: clamp(24px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.peds-post-card--feature { background-color: #F5F1E8; }
.peds-post-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.peds-post-card__date { font-family: "DM Sans","Inter",system-ui,sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5BA3D0; margin: 0; }
.peds-post-card__title {
  font-family: "Bookmania","Cormorant Garamond",Georgia,serif;
  font-weight: 400;
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.15;
  color: #1a1a1a;
  margin: 0;
}
.peds-post-card__excerpt { font-size: 14.5px; line-height: 1.6; color: #475569; margin: 0; }
.peds-post-card__link {
  font-family: "DM Sans","Inter",system-ui,sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #5BA3D0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}
.peds-post-card__link:hover { color: #3F8AB8; }
.peds-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .peds-posts-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .peds-posts-grid { grid-template-columns: 1fr; } }


/* =========================================
   PAGE: business.html
   ========================================= */
.peds-stat {
  text-align: center;
  padding: clamp(24px, 4vw, 48px) 0;
}
.peds-stat__num {
  font-family: "Bookmania","Cormorant Garamond",Georgia,serif;
  font-weight: 400;
  font-size: clamp(64px, 13vw, 168px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #5BA3D0;
  margin: 0;
}
.peds-stat__label { font-size: clamp(15px,1.6vw,20px); line-height: 1.5; color: #475569; margin: 14px auto 0; max-width: 40ch; }

.peds-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
@media (max-width: 760px) { .peds-steps { grid-template-columns: 1fr; } }
.peds-step {
  background-color: transparent;
  border: 2px solid #5BA3D0;
  border-radius: 20px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.peds-step__num {
  font-family: "Bookmania","Cormorant Garamond",Georgia,serif;
  font-size: clamp(36px, 4vw, 48px);
  line-height: 1;
  color: #5BA3D0;
}
.peds-step__title { font-family: "DM Sans","Inter",system-ui,sans-serif; font-weight: 700; font-size: 18px; color: #1a1a1a; margin: 0; }
.peds-step__copy { font-size: 14px; line-height: 1.6; color: #475569; margin: 0; }

/* B2B JotForm embed surround (mirrors inquiry.html pattern) */
.peds-b2b-form {
  background: transparent;
  border: 1px solid #5BA3D0;
  border-radius: 16px;
  overflow: hidden;
}
.peds-b2b-form iframe { display: block; width: 100%; border: 0; background: #F5F1E8; }
.peds-b2b-contact {
  text-align: center;
  font-size: clamp(15px,1.4vw,18px);
  color: #475569;
  margin-top: 28px;
}
.peds-b2b-contact a { color: #5BA3D0; text-decoration: none; font-weight: 700; }
.peds-b2b-contact a:hover { text-decoration: underline; }

/* ================================================================
   Business page — every section boxed off
   ================================================================ */
/* Value + stat box: big number on top, then the copy, all left-aligned */
.peds-b2b-hook { text-align: left; }
.peds-b2b-hook .peds-stat__label { margin: 10px 0 clamp(18px, 2.2vw, 28px); text-align: left; max-width: 62ch; color: #5BA3D0; font-weight: 700; }
.peds-b2b-hook .peds-lead { margin: 0 0 14px; }
.peds-b2b-hook .peds-body--muted { margin: 0; }
/* Business: the value-stat hook is the first section under the hero. Give it the universal 60px gap ABOVE (matching the 60px below to the trust pillars) instead of the default 30px hero-snug gap, so it sits evenly in the section rhythm. */
.peds-section:has(.peds-b2b-hook) { padding-top: 60px; }
/* "How it works" steps inside the blue box → cream-outline cards with light text */
.peds-mcard--blue .peds-step { border-color: rgba(245,241,232,0.55); }
.peds-mcard--blue .peds-step__num { color: #F5F1E8; }
.peds-mcard--blue .peds-step__title { color: #ffffff; }
.peds-mcard--blue .peds-step__copy { color: rgba(255,255,255,0.9); }
/* Rolling text matched to the home ticker (pair with --bare): transparent, blue, mixed-case */
.peds-marquee--home .peds-marquee__track { font-family: "CircularXX","DM Sans","Inter",system-ui,sans-serif; }
.peds-marquee--home .peds-marquee__track > span { font-size: 18px; text-transform: none; letter-spacing: 0; }
/* B2B form — comfortable centered width (a full-1600 form stretches the fields) */
.peds-b2b-form { max-width: 960px; margin-left: auto; margin-right: auto; }
/* "Let's talk about your team" form sits in a blue box → light frame + light email line */
.peds-mcard--blue .peds-b2b-form { border-color: rgba(245,241,232,0.5); }
.peds-mcard--blue .peds-b2b-contact { color: rgba(255,255,255,0.9); }
.peds-mcard--blue .peds-b2b-contact a { color: #F5F1E8; }


/* =========================================
   PAGE: contact.html
   ========================================= */
.peds-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: stretch; }
@media (max-width: 860px) { .peds-contact-grid { grid-template-columns: 1fr; } }
.peds-contact-card {
  background-color: #5BA3D0;
  color: #ffffff;
  border-radius: 24px;
  padding: clamp(28px, 3.5vw, 44px);
}
.peds-contact-card .peds-eyebrow { color: rgba(255,255,255,0.85); }
.peds-contact-card .peds-h2 { color: #ffffff; }
.peds-contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.peds-contact-list li { display: flex; flex-direction: column; gap: 4px; }
.peds-contact-list__label { font-family: "DM Sans","Inter",system-ui,sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.78); }
.peds-contact-list__val,
.peds-contact-list a {
  font-family: "Bookmania","Cormorant Garamond",Georgia,serif;
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.25;
  color: #ffffff;
  text-decoration: none;
}
.peds-contact-list a:hover { opacity: 0.85; }
.peds-map {
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 1.5px solid #5BA3D0;
  border-radius: 24px;
  overflow: hidden;
}
.peds-map iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }

.peds-cta-trio { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 760px) { .peds-cta-trio { grid-template-columns: 1fr; } }
.peds-cta-tile {
  background-color: #F5F1E8;
  border: 1.5px solid #F5F1E8;
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.peds-cta-tile:hover { transform: translateY(-3px); border-color: #ffffff; box-shadow: none; }
.peds-cta-tile__title { font-family: "Bookmania","Cormorant Garamond",Georgia,serif; font-weight: 400; font-size: 22px; color: #1a1a1a; margin: 0; }
.peds-cta-tile__arrow { color: #5BA3D0; font-weight: 700; font-family: "DM Sans","Inter",system-ui,sans-serif; font-size: 14px; }

/* contact: "Where we come to you" boxed as a 2-col card (intro text | fee table) */
.peds-contact-area { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.peds-contact-area .peds-intro { margin: 0; max-width: none; }
.peds-contact-area__fees { width: 100%; }
@media (max-width: 860px) { .peds-contact-area { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 32px); } }

/* contact: "Pick your path" — native CTAs (cream serif heading + real button), no white tiles */
.peds-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 44px); }
@media (max-width: 760px) { .peds-paths { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 30px); } }
.peds-path { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: clamp(18px, 2.2vw, 26px); border-top: 1px solid rgba(245,241,232,0.4); }
.peds-path__title { font-family: "Bookmania","Cormorant Garamond",Georgia,serif; font-weight: 400; font-size: clamp(23px, 2.3vw, 29px); line-height: 1.1; color: #F5F1E8; margin: 0; }
.peds-path__desc { font-size: clamp(14px, 1.05vw, 15.5px); line-height: 1.55; color: rgba(255,255,255,0.85); margin: 0; flex: 1 1 auto; }
.peds-path .peds-btn { margin-top: 8px; }


/* =========================================
   PAGES: terms / privacy / accessibility / medical-disclaimer
   ========================================= */
.peds-legal { max-width: 820px; margin: 0 auto; }
.peds-legal__updated { font-size: 13px; color: #94A3B8; margin: 0 0 28px; font-family: "DM Sans","Inter",system-ui,sans-serif; }
.peds-legal h2 { margin-top: 40px; }
.peds-legal h3 { margin-top: 28px; }
.peds-legal p { font-size: 15px; line-height: 1.7; color: #1F2A37; margin: 0 0 16px; }
.peds-legal ul { margin: 0 0 16px; padding-left: 22px; }
.peds-legal li { font-size: 15px; line-height: 1.7; color: #1F2A37; margin-bottom: 8px; }
.peds-legal a:not(.peds-btn) { color: #5BA3D0; }   /* inline links blue; leave CTA buttons their own colors */
/* legal pages (privacy/accessibility): full site-width card (1600), copy flows into readable columns */
.peds-legal.peds-legal--wide { max-width: 1600px; }
.peds-legal__body { columns: 22rem 3; column-gap: clamp(32px, 3vw, 56px); }
.peds-legal__body > h2, .peds-legal__body > h3, .peds-legal__body > ul { break-inside: avoid; }
.peds-legal__body > h2, .peds-legal__body > h3 { break-after: avoid; }   /* keep headings with their text; let paragraphs flow so columns balance */
.peds-legal__body > p:first-child { column-span: all; margin-bottom: 22px; }
/* short legal pages (e.g. medical disclaimer): fewer, balanced columns so the card isn't sparse */
.peds-legal__body--2col { columns: 30rem 2; }

/* DRAFT / pending banner (privacy + accessibility + terms) */
.peds-banner {
  border-radius: 14px;
  padding: 16px 20px;
  margin: 0 0 32px;
  font-family: "DM Sans","Inter",system-ui,sans-serif;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.peds-banner__icon { flex-shrink: 0; width: 22px; height: 22px; }
.peds-banner--draft { background-color: #FEF3C7; border: 1px solid #F59E0B; color: #92400E; }
.peds-banner--draft .peds-banner__icon { color: #B45309; }
.peds-banner--info { background-color: rgba(91,163,208,0.12); border: 1px solid #5BA3D0; color: #1F2A37; }
.peds-banner strong { font-weight: 700; }

/* Centered "coming soon" placeholder (terms) */
.peds-placeholder {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) 0;
}
.peds-placeholder__icon { width: 64px; height: 64px; color: #5BA3D0; margin: 0 auto 24px; }
.peds-placeholder__icon svg { width: 64px; height: 64px; stroke-width: 1.5; }


/* =========================================
   SHARED: fade-in for new pages (generic, mirrors homepage X1)
   Applied to [data-peds-fade] by peds-chrome.js
   ========================================= */
/* (.peds-fade-in / .peds-fade-in--visible already defined above in X1;
   reduced-motion handled there too.) */

/* "More than a check-up" cards as CTAs — arrow in its own square; card does NOT highlight */
.peds-services-grid { grid-auto-rows: 1fr !important; }
.peds-service-card { position: relative !important; height: 100% !important; text-decoration: none !important; cursor: pointer !important; padding-right: 80px !important; }
.peds-service-card:hover { background-color: transparent !important; border-color: rgba(245,241,232,0.55) !important; transform: none !important; box-shadow: none !important; }
.peds-service-card:hover h3, .peds-service-card:hover p { color: #ffffff !important; }
.peds-service-card:hover .peds-service-icon { color: #ffffff !important; background-color: transparent !important; }
.peds-service-arrow { position: absolute !important; top: 50% !important; right: 18px !important; transform: translateY(-50%) !important; width: 44px !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1.5px solid rgba(245,241,232,0.55) !important; border-radius: 12px !important; color: #F5F1E8 !important; background-color: transparent !important; transition: background-color 0.25s ease, color 0.25s ease !important; }
.peds-service-arrow svg { width: 20px !important; height: 20px !important; display: block !important; }
.peds-service-card:hover .peds-service-arrow { background-color: #F5F1E8 !important; color: #5BA3D0 !important; }


/* Closing CTA band (before footer) */
.peds-closing { padding: 30px clamp(16px,4vw,40px) !important; }
.peds-closing__box { background-color:#5BA3D0 !important; border-radius:28px !important; max-width:1185px !important; margin:0 auto !important; padding: clamp(40px,5vw,72px) clamp(24px,5vw,56px) !important; text-align:center !important; color:#ffffff !important; }
.peds-closing__heading { font-family:"Bookmania","Cormorant Garamond",Georgia,serif !important; font-weight:400 !important; font-size:clamp(30px,4vw,52px) !important; line-height:1.08 !important; letter-spacing:-0.012em !important; color:#ffffff !important; max-width:760px !important; margin:0 auto 28px !important; }
.peds-closing__cta { display:flex !important; flex-wrap:wrap !important; gap:12px !important; justify-content:center !important; }
.peds-closing__note { margin-top:18px !important; font-size:13px !important; font-weight:600 !important; letter-spacing:0.3px !important; color:rgba(255,255,255,0.85) !important; }


/* Nav CTA button (persistent) */
.peds-nav__actions { display:flex !important; align-items:center !important; gap:12px !important; margin-left:20px !important; }
/* Homepage-only bar layout: the inline homepage nav carries a CTA inside
   .peds-nav__actions, so switch THAT bar to flex and pin the brand left — the
   links then group next to the CTA instead of floating in dead space. Inner
   pages injected by peds-chrome.js have no .peds-nav__actions, so they keep the
   centered grid layout defined on .peds-nav__bar above. */
.peds-nav__bar:has(.peds-nav__actions) { display:flex; }
.peds-nav__bar:has(.peds-nav__actions) .peds-nav__brand { margin-right:auto; }
.peds-nav__cta { display:inline-flex !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important; background-color:#5BA3D0 !important; color:#ffffff !important; border:2px solid #5BA3D0 !important; font-family:"DM Sans","Inter",system-ui,sans-serif !important; font-weight:700 !important; font-size:15px !important; padding:0 22px !important; height:46px !important; border-radius:999px !important; text-decoration:none !important; white-space:nowrap !important; transition:background-color 0.2s ease, color 0.2s ease !important; }
.peds-nav__cta:hover { background-color:#ffffff !important; color:#5BA3D0 !important; }
@media (max-width:991px){ .peds-nav__cta { font-size:13px !important; padding:0 15px !important; height:38px !important; } }


/* Nav CTA: desktop pill hidden on mobile; CTA lives in the drawer */
@media (max-width:991px){ .peds-nav__cta { display:none !important; } }
.peds-nav__mobile-cta { display:block !important; margin-top:10px !important; background-color:#5BA3D0 !important; color:#ffffff !important; text-align:center !important; font-weight:700 !important; font-size:18px !important; padding:14px 0 !important; border-radius:999px !important; text-decoration:none !important; }
.peds-nav__mobile-cta:hover { background-color:#3F8AB8 !important; }

/* ================================================================
   Merge "Follow us" + closing CTA into ONE connected box.
   Both boxes are the same blue (#5BA3D0). We round only the OUTER
   corners (top of Follow, bottom of CTA), match their width + side
   padding, kill the gap between them, and keep the surround cream —
   so they read as a single rounded rectangle.
   ================================================================ */
.peds-follow { padding-bottom: 0 !important; }
.peds-closing {
  padding-top: 0 !important;
  padding-left: clamp(24px, 3vw, 40px) !important;
  padding-right: clamp(24px, 3vw, 40px) !important;
  background-color: #F5F1E8 !important;
}
.peds-closing__box { max-width: 1600px !important; }
/* round only the outer corners → one continuous rounded rectangle */
.peds-follow__inner { border-radius: 28px 28px 0 0 !important; padding-bottom: clamp(28px, 3vw, 40px) !important; }
.peds-closing__box  { border-radius: 0 0 28px 28px !important; padding-top: clamp(28px, 3vw, 40px) !important; }
@media (max-width: 767px) {
  .peds-follow { padding-bottom: 0 !important; }
  .peds-closing { padding-top: 0 !important; padding-left: 10px !important; padding-right: 10px !important; }
  .peds-follow__inner { border-radius: 16px 16px 0 0 !important; }
  .peds-closing__box  { border-radius: 0 0 16px 16px !important; }
}
/* At <=991px a leftover theme rule (#peds-secwrap-..._X section) forces
   section padding:30px with (1,0,1)!important, re-opening the gap on
   tablet/mobile. Beat it with id+class specificity (1,1,0) to keep the two
   boxes flush there too. (#follow is on the Follow section; #closing-cta is
   added to the closing section.) */
@media (max-width: 991px) {
  #follow.peds-follow { padding-bottom: 0 !important; }
  #closing-cta.peds-closing { padding-top: 0 !important; }
}

/* ================================================================
   MEMBERSHIP REDESIGN  ·  nav cleanup  ·  CTA-band button fix
   ================================================================ */

/* 1) Fix invisible buttons on the blue CTA band (sitewide). The band is blue,
   so blue-on-blue made .peds-btn--outline vanish + the primary blend in.
   Mirror the .peds-section--blue inversion. */
.peds-ctaband .peds-btn--primary { background-color:#F5F1E8 !important; color:#5BA3D0 !important; border-color:#F5F1E8 !important; }
.peds-ctaband .peds-btn--primary:hover { background-color:#5BA3D0 !important; color:#F5F1E8 !important; border-color:#F5F1E8 !important; }
.peds-ctaband .peds-btn--outline { background-color:transparent !important; color:#F5F1E8 !important; border-color:#F5F1E8 !important; }
.peds-ctaband .peds-btn--outline:hover { background-color:#F5F1E8 !important; color:#5BA3D0 !important; border-color:#F5F1E8 !important; }

/* 2) Membership hero — text-left / image-right, plain text on cream
   (reuses .peds-pagehero + --split grid + __media frame). */
.peds-mhero__text .peds-eyebrow { color:#5BA3D0; }
.peds-mhero__title {
  font-family:"Bookmania","Cormorant Garamond",Georgia,serif;
  font-weight:400; font-size:clamp(36px,5.2vw,60px); line-height:1.05;
  letter-spacing:-0.012em; color:#1F2A37; margin:0 0 16px;
}
.peds-mhero__sub { font-size:clamp(15px,1.4vw,19px); line-height:1.55; color:#51607A; margin:0 0 26px; max-width:52ch; }
.peds-mhero .peds-pagehero__media img { min-height:clamp(300px,38vw,440px); object-position:center 25%; }
@media (max-width: 860px) {
  .peds-mhero .peds-pagehero__media { order:0; }   /* text first on mobile */
  .peds-mhero__sub { margin-bottom:22px; }
}

/* 3) Zigzag membership tiers — blue-outline / cream cards, content flips L/R */
.peds-ztiers { display:flex; flex-direction:column; gap:clamp(20px,2.4vw,30px); margin-top:clamp(28px,4vw,44px); }
.peds-ztier {
  display:grid; grid-template-columns:0.95fr 1.15fr; gap:clamp(24px,4vw,52px);
  align-items:center; background-color:#F5F1E8; border:1.5px solid #5BA3D0;
  border-radius:22px; padding:clamp(26px,3.4vw,46px);
}
.peds-ztier--flip { grid-template-columns:1.15fr 0.95fr; }
.peds-ztier--flip .peds-ztier__id { order:2; }
.peds-ztier--flip .peds-ztier__details { order:1; }
.peds-ztier__name { font-family:"Bookmania","Cormorant Garamond",Georgia,serif; font-weight:400; font-size:clamp(28px,3.4vw,40px); line-height:1.05; color:#1F2A37; margin:0 0 6px; }
.peds-ztier__price { font-family:"DM Sans","Inter",system-ui,sans-serif; font-weight:800; font-size:clamp(24px,2.6vw,32px); color:#5BA3D0; margin:0 0 10px; }
.peds-ztier__price span { font-size:0.5em; font-weight:700; color:#7E8AA0; }
.peds-ztier__who { font-size:clamp(15px,1.3vw,17px); line-height:1.5; color:#51607A; margin:0 0 22px; }
.peds-ztier__id .peds-btn { width:-moz-fit-content; width:fit-content; }
.peds-ztier__plus { font-size:11px; letter-spacing:1.6px; text-transform:uppercase; font-weight:700; color:#5BA3D0; margin:0 0 14px; }
.peds-ztier__list { list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.peds-ztier__list li { position:relative; padding-left:30px; font-size:clamp(14px,1.05vw,16px); line-height:1.4; color:#2C3A4F; }
.peds-ztier__list li::before {
  content:""; position:absolute; left:0; top:1px; width:18px; height:18px; border-radius:50%;
  background-color:#5BA3D0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:11px; background-repeat:no-repeat; background-position:center;
}
@media (max-width: 768px) {
  .peds-ztier, .peds-ztier--flip { grid-template-columns:1fr; gap:18px; }
  .peds-ztier--flip .peds-ztier__id, .peds-ztier--flip .peds-ztier__details { order:0; }
}

/* 4) Nav chevron — shown only on the Services dropdown link; flips when open */
.peds-nav__chev { display:inline-block; width:8px; height:8px; margin-left:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-3px) rotate(45deg); transition:transform 0.28s ease; }
.peds-nav[data-peds-open="services"] .peds-nav__link[data-peds-sub="services"] .peds-nav__chev { transform:translateY(1px) rotate(-135deg); }

/* ================================================================
   MEMBERSHIP v2 — every section is its own rounded card sitting on a
   cream page (gaps between); tiers = ONE card, thin-line divided
   rows; standalone cycling ticker; rounded-top CTA band + footer.
   ================================================================ */
.peds-mpage { background-color:#F5F1E8; }
/* band = transparent wrapper: side inset + vertical gap between cards */
.peds-mband { padding: 30px clamp(16px,4vw,40px); }   /* card-stack gap standardized to the universal 30px -> 60px rhythm */
.peds-mband--first { padding-top: clamp(100px,13vw,150px); }   /* clear the fixed nav */
/* the card shell */
.peds-mcard { max-width:1600px; margin:0 auto; border-radius:clamp(22px,3vw,32px); padding:clamp(30px,4.4vw,58px) clamp(24px,4.4vw,54px); }
.peds-mcard--hero { background:#ffffff; box-shadow:none; }
.peds-mcard--outline { background:#F5F1E8; border:1.5px solid #5BA3D0; }
.peds-mcard--white { background:#ffffff; border:1.5px solid rgba(91,163,208,0.45); }
.peds-mcard--blue { background:#5BA3D0; }
.peds-mcard--blue,
.peds-mcard--blue .peds-h2,
.peds-mcard--blue .peds-included__title,
.peds-mcard--blue .peds-included__desc,
.peds-mcard--blue .peds-included__icon { color:#ffffff; }
.peds-mcard--blue .peds-eyebrow { color:rgba(255,255,255,0.85); }

/* hero split inside the hero card */
.peds-mhero2 { display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(24px,4vw,52px); align-items:center; }
.peds-mhero2__media img { width:100%; min-height:clamp(280px,30vw,380px); max-height:400px; object-fit:cover; object-position:center 25%; border-radius:clamp(16px,2vw,22px); display:block; }
@media (max-width:820px){ .peds-mhero2 { grid-template-columns:1fr; gap:22px; } }

/* tiers — one card, thin-line divided rows (reuses .peds-ztier__* inner styles) */
.peds-mtiers { display:flex; flex-direction:column; }
/* tiers intro moved ABOVE the card — align it to the card width + add a gap */
.peds-mintro { max-width:1600px; margin:0 auto clamp(12px,1.8vw,22px); }
/* "Three ways..." section headline — bigger, lighter weight, brand baby blue */
.peds-mintro .peds-h2 { color:#5BA3D0; font-weight:400; font-size:clamp(40px,5.2vw,62px); line-height:1.05; }
/* brand blue on the other cream headings (secondary accent) */
.peds-mcard--outline .peds-h2 { color:#5BA3D0; }
/* legal pages: section sub-headings render in brand blue inside the outline card */
.peds-legal .peds-mcard .peds-h3 { color:#5BA3D0; }
.peds-ztier__name { color:#5BA3D0; }
/* FAQ recolored to a blue section — white/cream text, translucent borders (no black) */
.peds-mcard--blue .peds-faq__item { background-color:transparent; border-color:rgba(255,255,255,0.4); transition:background-color 0.25s ease, border-color 0.25s ease; }
.peds-mcard--blue .peds-faq__q { color:#ffffff; }
.peds-mcard--blue .peds-faq__icon { transition:transform 0.3s cubic-bezier(.22,1,.36,1); }
.peds-mcard--blue .peds-faq__icon::before,
.peds-mcard--blue .peds-faq__icon::after { background-color:#ffffff; }
.peds-mcard--blue .peds-faq__a-inner p { color:rgba(255,255,255,0.92); }
.peds-mcard--blue .peds-faq__a-inner a { color:#ffffff; }
/* FAQ interaction flow — the hover wash covers the WHOLE item (title + open answer), not just the title:
   - CLOSED + hover → wash + brighter border + "+" grows a touch
   - OPEN → steady highlight; OPEN + hover → the whole open card brightens together */
.peds-mcard--blue .peds-faq__item:not(.is-open):hover { background-color:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.7); }
.peds-mcard--blue .peds-faq__item:not(.is-open):hover .peds-faq__icon { transform:scale(1.15); }
.peds-mcard--blue .peds-faq__item.is-open { background-color:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.6); }
.peds-mcard--blue .peds-faq__item.is-open:hover { background-color:rgba(255,255,255,0.13); border-color:rgba(255,255,255,0.85); }

/* HERO = blue panel. DESKTOP: a contained rounded box the same width as the
   cards (max 1185, inset from the screen edges) sitting on the cream page.
   MOBILE: full-bleed to the screen edges, anchored to the top with a rounded
   bottom (mirrors the footer rising from the bottom). Text reversed for blue. */
.peds-mhero-top {
  background:#5BA3D0;
  width:calc(100% - 2 * clamp(16px,4vw,40px));   /* same inset as the sections/cards */
  max-width:1600px;   /* match the site-wide 1600 content width */
  margin:0 auto;                                   /* flush to the top — the hero comes from the top of the page */
  border-radius:0 0 clamp(22px,3vw,32px) clamp(22px,3vw,32px);   /* square top, rounded bottom (mirrors the footer) */
  padding:clamp(104px,13vw,150px) clamp(28px,4vw,54px) clamp(44px,5.5vw,76px);   /* top padding clears the fixed nav */
}
.peds-mhero-top__inner { max-width:1600px; margin:0 auto; }
@media (max-width:768px){
  .peds-mhero-top {
    width:100%;
    max-width:none;
    margin:0;
    border-radius:0 0 clamp(20px,6vw,28px) clamp(20px,6vw,28px);
    padding:clamp(92px,24vw,116px) clamp(16px,5vw,22px) clamp(34px,9vw,46px);
  }
}
.peds-mhero-top .peds-eyebrow { color:rgba(255,255,255,0.85); }
.peds-mhero-top .peds-mhero__title { color:#ffffff; }
.peds-mhero-top .peds-mhero__sub { color:rgba(255,255,255,0.92); }
.peds-mhero-top .peds-btn--primary { background:#F5F1E8; color:#5BA3D0; border-color:#F5F1E8; }
.peds-mhero-top .peds-btn--primary:hover { background:#5BA3D0; color:#F5F1E8; border-color:#F5F1E8; }
.peds-mhero-top .peds-btn--outline { background:transparent; color:#F5F1E8; border-color:#F5F1E8; }
.peds-mhero-top .peds-btn--outline:hover { background:#F5F1E8; color:#5BA3D0; border-color:#F5F1E8; }
.peds-mtier { display:grid; grid-template-columns:0.82fr 1.18fr; gap:clamp(20px,4vw,52px); align-items:start; padding:clamp(26px,3.2vw,40px) 0; border-top:1px solid rgba(91,163,208,0.32); position:relative; }
.peds-mtier:first-child { border-top:0; padding-top:0; }
.peds-mtier:last-child { padding-bottom:0; }
@media (max-width:760px){ .peds-mtier { grid-template-columns:1fr; gap:14px; } }

/* small per-price qualifier under each tier price */
.peds-ztier__qual {
  font-family:"DM Sans","Inter",system-ui,sans-serif; font-size:13px; font-weight:600;
  color:#7E8AA0; letter-spacing:0.3px; margin:-4px 0 16px;
}

/* fuller tier rows — bigger price + CTA, columns vertically balanced (align-items:center above) */
.peds-ztier__price { font-size:clamp(30px,3.1vw,40px); }
.peds-ztier__who { font-size:clamp(16px,1.4vw,18px); line-height:1.55; }
.peds-ztier__id .peds-btn { font-size:16px; padding:16px 36px; margin-top:8px; }
/* tier CTAs flip to white + blue text on hover, like the nav CTA (instead of just darkening) */
.peds-ztier__id .peds-btn--primary:hover { background-color:#F5F1E8; color:#5BA3D0; border-color:#5BA3D0; transform:none; box-shadow:none; }

/* per-tier spinning seal — warm circular text filling the empty bottom-right corner (desktop only) */
.peds-mtier__seal { display:none; }
@media (min-width:900px){
  .peds-mtier__seal {
    display:block; position:absolute; right:clamp(10px,1vw,22px); bottom:clamp(10px,1.5vw,22px);
    width:clamp(128px,13vw,160px); height:clamp(128px,13vw,160px);
    animation:peds-badge-rotate 26s linear infinite; transform-origin:50% 50%;
    pointer-events:none; z-index:2;
  }
  .peds-mtier__seal text { fill:#5BA3D0; font-family:"DM Sans","Inter",system-ui,sans-serif; font-size:11px; font-weight:700; letter-spacing:1px; }
  /* Last tier (Virtual Only) has padding-bottom:0, so its seal floats ~one row-padding higher than the others.
     Drop it by that same padding so all three seals sit the same distance up from their content. */
  .peds-mtier:last-child .peds-mtier__seal { bottom: calc(clamp(10px,1.5vw,22px) - clamp(26px,3.2vw,40px)); }
}

/* desktop only — bigger "what you get" label + checklist (restored to the earlier size) */
@media (min-width:761px){
  .peds-ztier__plus { font-size:13px; letter-spacing:1.8px; margin:0 0 20px; }
  .peds-ztier__list { gap:17px; }
  .peds-ztier__list li { font-size:18px; line-height:1.45; padding-left:34px; }
  .peds-ztier__list li::before { width:22px; height:22px; background-size:13px; top:2px; }
}

/* standalone cycling ticker on the cream page (no blue band) */
.peds-marquee--bare { background-color:transparent !important; padding:clamp(8px,1.3vw,16px) 0 !important; }
.peds-marquee--bare span { color:#5BA3D0 !important; }
.peds-marquee--bare .peds-marquee__dot { color:rgba(91,163,208,0.5) !important; }

/* rounded-top CTA band + footer (single radius into the footer):
   pages WITH a CTA band → the band carries the radius, footer stays flat;
   pages WITHOUT (homepage) → the footer carries it. */
.peds-ctaband { border-top-left-radius:clamp(26px,4vw,46px); border-top-right-radius:clamp(26px,4vw,46px); }
.peds-footer { border-top-left-radius:clamp(26px,4vw,46px) !important; border-top-right-radius:clamp(26px,4vw,46px) !important; }
body:has(.peds-ctaband) .peds-footer { border-top-left-radius:0 !important; border-top-right-radius:0 !important; }
/* When a CTA band feeds into the footer, drop the footer's own top padding so the
   gap from the CTA buttons down to the footer logo equals the gap above the CTA
   heading — the band's 44px bottom padding becomes the whole, single gap. */
body:has(.peds-ctaband) .peds-footer__container { padding-top:0 !important; }

/* Homepage closing-CTA card → footer: kill the 30px cream gap + the rounded seam
   so the blue runs continuously into the footer (no thin cream line above the
   footer brand row). Mirrors the .peds-ctaband → footer treatment above. */
body:has(.peds-closing__box) .peds-closing { padding-bottom: 0 !important; }
body:has(.peds-closing__box) .peds-closing__box { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
body:has(.peds-closing__box) .peds-footer { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
body:has(.peds-closing__box) .peds-footer__container { padding-top: 0 !important; }

/* Kill the 1px sub-pixel hairline where the blue CTA (band or closing card) meets
   the blue footer. The two full-bleed blue blocks touch at a fractional pixel, so
   their anti-aliased edges let the cream page background bleed through as a thin
   line. Pull the footer up 1px so its solid blue overlaps the CTA's bottom edge —
   same colour, so the overlap is invisible, and the seam is gone. */
body:has(.peds-ctaband) .peds-footer,
body:has(.peds-closing__box) .peds-footer { margin-top: -1px !important; }

/* ================================================================
   UNIVERSAL PANEL RADIUS STANDARD
   One token drives the corner radius of every content/feature panel
   & card across every page — anchored to .pmd-feat__container (16px), the
   "only pediatrician your family will need" stat block on the homepage.
   Excluded by design: pills (999px), circles, dividers/ticks, the
   floating nav island, and the CTA-band -> footer chrome.
   To restyle the whole site's panels, change this ONE value.
   ================================================================ */
:root { --peds-r: 16px; }

/* all-corner panels, cards & media frames */
.peds-hero__box,
.peds-pagehero__box,
.peds-pagehero__media img,
.peds-service-card,
.peds-services-container,
.peds-radiating-box,
.peds-radiating-trey,
.peds-radiating-card,
.peds-follow__tile,
.peds-iq-formcard,
.peds-iq-card,
.peds-card,
.peds-split__media,
.peds-split--even .peds-split__inlinephoto,
.peds-credsq,
.peds-team__photo,
.peds-team__placeholder,
.peds-tier,
.peds-faq__item,
.peds-svc-card,
.peds-trust-card,
.peds-dispensary-cta,
.peds-prod,
.peds-post-card,
.peds-step,
.peds-b2b-form,
.peds-contact-card,
.peds-map,
.peds-cta-tile,
.peds-ztier,
.peds-mcard,
.peds-mhero2__media img,
.peds-ss-mobile-media,
.peds-ss-mobile-media img,
.peds-diff-mobile-media,
.peds-diff-mobile-media img,
.pmd-feat__container,
.pmd-feat__card,
.panel,
.container.md_min\:rounded,
.peds-disclaimer,
.border-brand.rounded-\[16px\] {
  border-radius: var(--peds-r) !important;
}

/* directional panels — keep the square edge that meets the page/footer,
   standardize only the rounded corners */
.peds-follow__inner { border-radius: var(--peds-r) var(--peds-r) 0 0 !important; }
.peds-closing__box  { border-radius: 0 0 var(--peds-r) var(--peds-r) !important; }
.peds-mhero-top     { border-radius: 0 0 var(--peds-r) var(--peds-r) !important; }
@media (max-width: 991px) {
  .peds-follow__inner { border-radius: var(--peds-r) var(--peds-r) 0 0 !important; }
  .peds-closing__box  { border-radius: 0 0 var(--peds-r) var(--peds-r) !important; }
  .peds-mhero-top     { border-radius: 0 0 var(--peds-r) var(--peds-r) !important; }
}

/* ============================================================
   inquiry.html + business.html — trust-signal pillars & form/sidebar layout
   Contract §1.1: "auto-resizing iframe, contact-card sidebar, and trust-signal
   pillars." Visual language borrowed from existing components:
     • pillar cards reuse the cream + 1.5px #5BA3D0 border treatment of
       .peds-iq-card--outline / .peds-mcard--outline (contact + legal pages);
     • the sticky sidebar follows the form the way the About story rail
       (.peds-tlx__left) sticks; both collapse to one column on mobile.
   ============================================================ */
.peds-iq-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  max-width: 1600px;
  margin: 0 auto;
}
.peds-iq-pillar {
  background: #F5F1E8;
  border: 1.5px solid #5BA3D0;
  border-radius: var(--peds-r);
  padding: clamp(20px, 2.2vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.peds-iq-pillar__icon { width: 38px; height: 38px; color: #5BA3D0; }
.peds-iq-pillar__icon svg { width: 100%; height: 100%; display: block; }
.peds-iq-pillar__title {
  font-family: "Bookmania","Cormorant Garamond",Georgia,serif;
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #5BA3D0;
  margin: 4px 0 0;
}
.peds-iq-pillar__copy {
  font-size: clamp(14px, 1.05vw, 15.5px);
  line-height: 1.55;
  color: #475569;
  margin: 0;
}
@media (max-width: 760px) { .peds-iq-pillars { grid-template-columns: 1fr; } }

/* Form (main column) + contact-card sidebar */
.peds-iq-layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
  max-width: 1600px;
  margin: 0 auto;
}
.peds-iq-layout .peds-iq-formcard { max-width: none; margin: 0; }
.peds-iq-layout .peds-iq-intro { max-width: none; text-align: left; margin: 0 0 clamp(16px, 1.8vw, 22px); }
.peds-iq-layout .peds-iq-intro__sub { max-width: none; margin-left: 0; margin-right: 0; text-align: left; }
.peds-iq-aside {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 22px);
  position: sticky;
  top: clamp(96px, 12vh, 130px);
}
@media (max-width: 900px) {
  .peds-iq-layout { grid-template-columns: 1fr; }
  .peds-iq-aside { position: static; }
}

/* ============================================================
   supplements.html — featured-category grid (contract §1.1(b))
   The .peds-prod base rule predates the brand cleanup (white fill + black
   border). Bring it onto the palette every other card uses: cream fill +
   1.5px #5BA3D0 border, matching .peds-iq-pillar / .peds-ct-box.
   ============================================================ */
.peds-prod {
  background-color: #F5F1E8;
  border: 1.5px solid #5BA3D0;
}
.peds-prod__link {
  margin-top: auto;
  align-self: flex-start;
  font-weight: 700;
  font-size: 14px;
  color: #5BA3D0;
  text-decoration: none;
}
.peds-prod__link:hover { text-decoration: underline; }

/* ============================================================
   MOBILE — full-bleed for SINGULAR / stacked solid-blue sections
   ------------------------------------------------------------
   Reference: the homepage "only pediatrician your family will need"
   stat block (.pmd-feat__container) already runs edge-to-edge on phones via
   its legacy md:px-0 wrapper; .peds-mhero-top + .peds-ctaband + the
   footer do the same. This standardizes that one behavior for every
   STANDALONE solid-blue band site-wide, so the blue colour touches both
   screen edges and the cream page shows only above / below it.

   IN  (bleeds):  .peds-mcard--blue that is NOT a two-up half
        (about cred box + APC FAQ, services FAQ, membership "what's
        included", business hook, contact card) + the homepage's legacy
        blue bands (Services / Follow Us / closing CTA).
   OUT (unchanged, stays inset): blue-OUTLINE cards; the paired
        .peds-split__text halves; the .peds-iq-card--blue step sidebars
        (inquiry / business); the hero overlay (.peds-hero__box, which
        sits on top of the hero photo, not stacked on the cream page).

   Mechanism mirrors a native full-bleed band: the box escapes whatever
   centered, padded wrapper holds it via calc(50% - 50vw) side margins
   (works at any nesting depth) and fills the viewport with width:auto
   (no 100vw scrollbar risk). INNER content padding is left intact, so
   text never reaches the edge. Each box keeps its existing corner
   radius (incl. the directional radii on Follow Us / closing).
   ============================================================ */
@media (max-width: 768px) {
  .peds-mcard--blue:not(.peds-split__text),
  .peds-services-container,
  .peds-follow__inner,
  .peds-closing__box,
  .peds-dispensary-cta {
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}

/* ------------------------------------------------------------
   MOBILE (max-width:760px — the width at which .peds-split stacks
   to one column) — the blue HEADER / feature split cards join the
   same full-bleed convention as the standalone bands above.
   These are the page-header splits (membership, services,
   supplements, posts) and the About "team"/Emily bio card.

   • The EVEN-splits already swap their side photo for
     .peds-split__inlinephoto INSIDE the blue card on mobile, so the
     photo rides along with the card and stays padded like the text
     (it never touches the screen edge) — the bleed "works with" the
     slid-in image, it doesn't break it.
   • Scoped to 760 (NOT 768) on purpose: only fire once the split has
     actually collapsed to one column. Between 761–768 the split is
     still two side-by-side columns and the blue half MUST stay inset.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .peds-split .peds-mcard--blue.peds-split__text {
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  /* PAGE-HEADER splits also anchor their blue card to the very TOP of the
     screen on mobile — same treatment as .peds-mhero-top (the home/About hero):
     the blue fills from the top edge and the floating nav island sits over it.
     Scoped with :has() to ONLY the first band that actually holds a blue header
     split (membership / services / supplements / Education-posts), so the
     mid-page Emily split and every other section are left exactly as they are.
       • kill the cream nav-gap above the card (section padding-top → 0)
       • square the TOP corners (the card now meets the screen's top edge;
         the bottom stays rounded into the cream page)
       • top-align the content and pad it down to clear the nav island, using
         the SAME clearance the hero uses (clamp(92px,24vw,116px))
       • transform:none so the blue is solid at the top from first paint — the
         fade-in slide would otherwise flash a thin cream strip at the very top
         (opacity still fades; only the translate is dropped). */
  .peds-mband--first:has(.peds-split .peds-mcard--blue.peds-split__text) {
    padding-top: 0 !important;
  }
  .peds-mband--first .peds-mcard--blue.peds-split__text {
    padding-top: clamp(92px, 24vw, 116px) !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    justify-content: flex-start !important;
    transform: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   JOTFORM EMBED THEME  —  EDIT THE VALUES BELOW TO RESTYLE THE FORM CARD
   ────────────────────────────────────────────────────────────────────────
   Controls the LOOK OF THE CARD that frames the embedded JotForm on
   inquiry.html (membership) and business.html (business). Change a value,
   save, refresh the page — BOTH forms update from here.

   NOTE: the fields INSIDE the form (their colours, fonts, buttons) are set in
   JotForm itself, not here — a browser can't restyle inside a JotForm iframe.
   To change those, open the form in JotForm and use the Form Designer.
   This block styles everything AROUND the form: the card frame + spacing.

   Values are normal CSS. Colours can be hex (#5BA3D0) or rgba(r,g,b,alpha).
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --peds-form-card-bg:           #F5F1E8;                    /* fill behind the form              */
  --peds-form-card-border-color: rgba(91, 163, 208, 0.45);  /* card border colour (Peds blue)    */
  --peds-form-card-border-width: 1.5px;                      /* card border thickness             */
  --peds-form-card-radius:       16px;                       /* card corner roundness             */
  --peds-form-card-padding:      16px;                       /* gap between card edge and form    */
  --peds-form-card-shadow:       none;                                    /* drop shadow — removed (brand uses no shadows) */
  --peds-form-card-max-width:    960px;                      /* widest the card gets (standalone) */
  --peds-form-iframe-bg:         #F5F1E8;                    /* fill behind the form fields       */
  --peds-form-iframe-radius:     14px;                       /* rounding of the form's own corners*/
}

/* --- Wiring: applies the values above. You normally don't edit below here. --- */
.peds-iq-formcard {
  background:    var(--peds-form-card-bg);
  border:        var(--peds-form-card-border-width) solid var(--peds-form-card-border-color);
  border-radius: var(--peds-form-card-radius) !important; /* beats the shared --peds-r rule */
  padding:       var(--peds-form-card-padding);
  box-shadow:    var(--peds-form-card-shadow);
  max-width:     var(--peds-form-card-max-width);
  overflow:      hidden;
}
.peds-iq-formcard iframe {
  background:    var(--peds-form-iframe-bg);
  border-radius: var(--peds-form-iframe-radius);
}

/* ============================================================
   HOMEPAGE HERO — split layout (video left, brand panel right),
   modeled on the reference: a clean full-bleed 50/50 banner with a big
   serif headline on a solid blue panel, a white pill CTA, and the
   floating nav island sitting over the top. The LEFT half is a VIDEO
   slot — Dr. Trey's clip drops into the <source> inside
   .peds-hsplit__video; until then the poster image shows. Square,
   edge-to-edge. Stacks (video over panel) on phones.
   ============================================================ */
.peds-hsplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  width: 100%;
  margin: 0;
  min-height: clamp(600px, 90vh, 960px);
  background: #5BA3D0;
  overflow: hidden;
}
.peds-hsplit__media { position: relative; overflow: hidden; background: #F5F1E8; }
.peds-hsplit__video,
.peds-hsplit__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.peds-hsplit__panel {
  background: #5BA3D0;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: clamp(104px, 12vh, 156px) clamp(34px, 5.5vw, 104px) clamp(56px, 7vh, 96px);
}
.peds-hsplit__inner { max-width: 600px; }
.peds-hsplit__eyebrow {
  font-family: "DM Sans","Inter",system-ui,sans-serif;
  font-weight: 700; font-size: clamp(12px, 1vw, 14px); letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.85); margin: 0 0 clamp(14px, 1.6vw, 20px);
}
.peds-hsplit__headline {
  font-family: "Bookmania","Cormorant Garamond",Georgia,serif;
  font-weight: 400; font-size: clamp(40px, 4.6vw, 74px); line-height: 1.03; letter-spacing: -0.01em;
  color: #ffffff; margin: 0 0 clamp(18px, 2vw, 26px);
}
.peds-hsplit__sub {
  font-family: "DM Sans","Inter",system-ui,sans-serif;
  font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; color: rgba(255,255,255,0.92);
  margin: 0 0 clamp(26px, 3vw, 36px); max-width: 50ch;
}
.peds-hsplit__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 1.8vw, 24px); }
.peds-hsplit__cta {
  display: inline-block; background: #F5F1E8; color: #5BA3D0;
  font-family: "DM Sans","Inter",system-ui,sans-serif; font-weight: 700; font-size: clamp(15px, 1.2vw, 17px);
  padding: 15px 36px; border-radius: 999px; text-decoration: none; border: 2px solid #F5F1E8;
  transition: background 0.2s ease, color 0.2s ease;
}
.peds-hsplit__cta:hover { background: #5BA3D0; color: #F5F1E8; }
.peds-hsplit__cta2 {
  color: #ffffff; font-family: "DM Sans","Inter",system-ui,sans-serif; font-weight: 700; font-size: clamp(14px, 1.05vw, 16px);
  text-decoration: none; border-bottom: 2px solid rgba(255,255,255,0.45); padding-bottom: 2px;
  transition: border-color 0.2s ease;
}
.peds-hsplit__cta2:hover { border-bottom-color: #ffffff; }
.peds-hsplit__proof {
  display: flex; align-items: center; gap: 10px; margin-top: clamp(24px, 2.8vw, 34px);
  font-family: "DM Sans","Inter",system-ui,sans-serif; font-size: 14px; color: rgba(255,255,255,0.9);
}
.peds-hsplit__stars { color: #FFD166; letter-spacing: 2px; font-size: 15px; }

@media (max-width: 768px) {
  /* ---- Mobile nav -> flat, full-width top bar flush to the top of the screen.
     Fills the gap above the old floating island ("the rest moves up"); the bar's
     bottom stays roughly where it was. Notch-aware via safe-area padding. The
     hamburger + drawer markup/JS are untouched, so the menu still works. ---- */
  :root { --peds-mnav-h: calc(max(env(safe-area-inset-top), 10px) + 64px + 3px); }
  .peds-nav {
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    transform: none;
    border: none;
    border-bottom: 3px solid #5BA3D0;
    border-radius: 0;
    padding-top: max(env(safe-area-inset-top), 10px);
  }
  .peds-nav__mobile { left: 12px; right: 12px; }   /* keep the dropdown menu inset from the edges */

  /* ---- Hero: video starts BELOW the cream top bar, with a cream breathing-room
     buffer, so the header no longer clips it. ---- */
  .peds-hsplit {
    grid-template-columns: 1fr;
    min-height: 0;
    background: #F5F1E8;
    padding-top: calc(var(--peds-mnav-h, 77px) + 18px);
  }
  .peds-hsplit__media { aspect-ratio: 5 / 4; }
  .peds-hsplit__panel { padding: clamp(40px, 9vw, 60px) clamp(22px, 6vw, 30px) clamp(48px, 11vw, 66px); }
  .peds-hsplit__inner { max-width: none; }
  .peds-hsplit__headline { font-size: clamp(34px, 9vw, 48px); }
}

/* ================================================================
   UI fixes round - homepage + mobile (2026-06-08)
   ================================================================ */
/* UI-1: "families lose" pills locked to a 2x2 grid at all widths */
.peds-loss-grid { display:grid; grid-template-columns:repeat(2,minmax(0,max-content)); justify-items:start; align-content:start; gap:1.25rem; }
@media (max-width:767px){ .peds-loss-grid { gap:.375rem; } }
/* UI-3: mobile nav - center the bar contents in the pill (kill asymmetric padding + wordmark nudge) */
@media (max-width:991px){
  .peds-nav { padding-top:0 !important; padding-bottom:0 !important; }
  .peds-nav__brand-word, .peds-nav__brand-sep { transform:none !important; }
}

/* UI-2 + UI-5: split the footer into its own capped card; keep Follow Us + Closing CTA merged */
body:has(.peds-closing__box) .peds-closing__box {
  border-bottom-left-radius: var(--peds-r) !important;
  border-bottom-right-radius: var(--peds-r) !important;
}
body:has(.peds-closing__box) .peds-closing { padding-bottom: 30px !important; }
body:has(.peds-closing__box) .peds-footer {
  border-top-left-radius: clamp(26px,4vw,46px) !important;
  border-top-right-radius: clamp(26px,4vw,46px) !important;
  margin-top: 0 !important;
}
body:has(.peds-closing__box) .peds-footer__container { padding-top: 56px !important; }
@media (max-width:767px){
  body:has(.peds-closing__box) .peds-closing { padding-bottom: 22px !important; }
  body:has(.peds-closing__box) .peds-footer__container { padding-top: 40px !important; }
}
/* UI-4: mobile hero - video meets the nav bottom (kill the cream buffer; nav pill is 67px) */
@media (max-width:991px){
  .peds-hsplit { padding-top: 67px !important; }
}
/* Nav fit (992-1100px): just above the hamburger breakpoint the full nav
   (brand + 6 links + CTA) overflowed the pill and the CTA spilled out.
   Tighten the bar side-padding + link gap in only that range so it fits.
   Desktop (>1100) and mobile (<=991) are untouched. */
@media (min-width:992px) and (max-width:1100px){
  .peds-nav__bar  { padding-left:12px !important; padding-right:12px !important; gap:8px !important; }
  .peds-nav__links { gap:8px !important; }
}
@media (min-width:992px) and (max-width:1100px){ .peds-nav__link { font-size:15px !important; } }

/* Phones (<=767px): uniform tight section spacing (~16px gap, matching the
   Emily photo->card gap). Each content section gets 8px top/bottom -> 16px
   between sections. Excludes the hero (keeps nav clearance) and the
   Follow+Closing+Footer merge (kept intact). Desktop fully untouched. */
@media (max-width:767px){
  .peds-secwrap:not(#peds-sec-hero):not(#peds-sec-social):not(#peds-sec-closingcta):not(#peds-sec-footer) > section { padding-top:8px !important; padding-bottom:8px !important; }
  .peds-mpage > section.peds-mband { padding-top:8px !important; padding-bottom:8px !important; }
}
/* Phones: tighten the gap ABOVE the Follow Us / Closing / Footer block to match
   (keep its internal flush merge by only touching the top of the block). */
@media (max-width:767px){
  #peds-sec-social > section { padding-top:8px !important; }
}
/* Phones: also tighten the two "edge" gaps to match -- below the hero band and
   above the final CTA band -- so every inter-section gap reads ~16px. */
@media (max-width:767px){
  .peds-mhero-top { margin-bottom:8px !important; }
  .peds-ctaband  { margin-top:8px !important; }
}
/* Phones: kill stray vertical margins on content bands so the gap is purely the
   8/8 padding (16px). Horizontal margins untouched (full-bleed bands keep them). */
@media (max-width:767px){
  .peds-mpage > section.peds-mband { margin-top:0 !important; margin-bottom:0 !important; }
}
/* Phones: broaden to ALL inner-page section types (mband, supp-rn, peds-section, etc.),
   not just .peds-mband -- so every section tightens to the same 16px gap.
   Hero (nav clearance) and CTA band handled separately above. */
@media (max-width:767px){
  .peds-mpage > section:not(.peds-mhero-top):not(.peds-ctaband){
    padding-top:8px !important; padding-bottom:8px !important;
    margin-top:0 !important; margin-bottom:0 !important;
  }
}