/* ──────────────────────────────────────────────────────────
   HERO PHOTO BACKDROP — pregnant figure in olive grove
   20 layered iterations to integrate the photograph with the
   site's warm-sage palette without ever obscuring the title.

   ── iteration log (each compounds on the last) ──
   01 · use the actual photograph instead of an SVG illustration
   02 · stretch the photo full-bleed across the hero, not boxed-in
   03 · object-position bias: belly anchored where eyes will land
   04 · landscape aspect-ratio container matching the source 1024×559
   05 · soft "blob" border-radius so the photo doesn't feel like a card
   06 · radial mask on the wrapper that thins the photo right under the title
   07 · feathered edges on all four sides so it bleeds into cream bg
   08 · color grade (saturate/contrast/brightness/sepia) tied to palette
   09 · cream-tinted overlay (mix-blend: soft-light) unifying tone
   10 · multi-stop scrim gradient — readable text guaranteed
   11 · vignette overlay darkening edges *slightly*, never the center
   12 · ambient golden-hour light spots drifting slowly
   13 · slow ken-burns zoom-and-drift to keep the image alive
   14 · "breathing" brightness pulse synced to heartbeat tempo
   15 · soft pulsing heart marker placed over the belly
   16 · drifting petal/dust particles for organic life
   17 · mirrored second copy (RTL balance — belly on both sides)
   18 · noise grain overlay unifying with the global site grain
   19 · staged reveal: blur+scale → settle, layered fade-ins
   20 · responsive recalibration & reduced-motion fallback
   ────────────────────────────────────────────────────────── */

/* ───────────────── hero stage layout ───────────────── */
.hero__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  isolation: isolate;
  padding-block: clamp(1rem, 3vw, 3rem);
}

/* 02 + 06: the backdrop fills the hero; mask sculpts a calm
   pocket centered under the title and lets the photo bloom
   toward the edges. */
.hero__belly-bg {
  position: absolute;
  inset: -6% -4%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image:
    radial-gradient(ellipse 46% 56% at 50% 46%,
      rgba(0,0,0,0.06) 0%,
      rgba(0,0,0,0.22) 22%,
      rgba(0,0,0,0.55) 42%,
      rgba(0,0,0,0.88) 62%,
      #000 78%,
      rgba(0,0,0,0.55) 100%);
          mask-image:
    radial-gradient(ellipse 46% 56% at 50% 46%,
      rgba(0,0,0,0.06) 0%,
      rgba(0,0,0,0.22) 22%,
      rgba(0,0,0,0.55) 42%,
      rgba(0,0,0,0.88) 62%,
      #000 78%,
      rgba(0,0,0,0.55) 100%);
  will-change: transform, opacity, filter;
}

/* foreground content sits on top */
.hero__content {
  position: relative;
  z-index: 2;
  max-inline-size: 920px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__content .hero__title { text-align: center; max-inline-size: 18ch; }
.hero__content .hero__sub {
  text-align: center;
  margin-inline: auto;
  max-inline-size: 60ch;
  position: relative;
}
/* 10: scrim behind the sub-headline so paragraph text never fights
   against grass or sky textures in the photo */
.hero__content .hero__sub::before {
  content: "";
  position: absolute;
  inset: -1rem -1.6rem;
  background: radial-gradient(ellipse at center,
    rgba(250, 245, 238, 0.92) 0%,
    rgba(250, 245, 238, 0.72) 45%,
    rgba(250, 245, 238, 0.20) 80%,
    rgba(250, 245, 238, 0) 100%);
  border-radius: 60% / 50%;
  z-index: -1;
  pointer-events: none;
  filter: blur(2px);
}
.hero__content .hero__cta { justify-content: center; }
.hero__content .hero__micro { text-align: center; max-inline-size: 50ch; }
.hero__content .hero__micro {
  position: relative;
}
.hero__content .hero__micro::before {
  content: "";
  position: absolute;
  inset: -0.5rem -1.2rem;
  background: radial-gradient(ellipse at center,
    rgba(250, 245, 238, 0.78) 0%,
    rgba(250, 245, 238, 0) 80%);
  z-index: -1;
}

.hero__chips {
  display: flex;
  gap: 0.9rem;
  margin-block-start: clamp(2rem, 4vw, 3rem);
  flex-wrap: wrap;
  justify-content: center;
}

/* ───────────────── photo stage ─────────────────
   04: the stage matches the photo's native landscape aspect so
       there's no awkward upscale; we'll then size it to dominate
       the hero. */
.belly-stage {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  margin-inline: auto;
  isolation: isolate;
}

.belly-stage--bg {
  position: absolute;
  inset: 0;
  max-inline-size: none;
  aspect-ratio: auto;
  /* 19: staged entrance — blur in from a slight zoom */
  opacity: 0;
  transform: scale(1.08);
  filter: blur(20px) saturate(0.45);
  transition:
    opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.10s,
    transform 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.10s,
    filter 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.10s;
}
.belly-stage--bg.is-revealed {
  opacity: 1;
  transform: scale(1);
  filter: blur(0) saturate(1);
}

/* ───── 01 + 02 + 03 + 05 + 08 · photo layer ───── */
.belly-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 38% 42% 36% 44% / 36% 38% 42% 36%;
  /* a barely-there glow as if the photo is set into warm paper */
  box-shadow:
    inset 0 0 0 1px rgba(232, 201, 176, 0.18),
    0 60px 120px -60px rgba(61, 58, 46, 0.18);
}
.belly-photo__img {
  position: absolute;
  inset: -8%;
  inline-size: 116%;
  block-size: 116%;
  object-fit: cover;
  /* 03: bias toward the belly — RTL hero, photo placed to the left
     so the belly sits roughly behind the title's right edge */
  object-position: 32% 62%;
  /* 08: tune luminance/saturation to live inside our cream/sage/terra
     palette. Sepia adds warmth; saturate softens the green of the
     olive trees so they don't clash with sage UI. */
  filter:
    saturate(0.62)
    contrast(0.92)
    brightness(1.06)
    sepia(0.22)
    hue-rotate(-4deg);
  /* 13: slow Ken-Burns drift */
  animation: bellyKenBurns 36s ease-in-out infinite alternate;
  will-change: transform;
}

/* 17: mirrored copy so RTL visitors see a balanced composition —
   belly on the inside on BOTH sides, with the trees framing outward.
   Slightly dimmer and softer so it reads as ambient reflection. */
.belly-photo--mirror { left: 50%; right: auto; inline-size: 50%; }
.belly-photo:not(.belly-photo--mirror) { right: 50%; left: auto; inline-size: 50%; }
.belly-photo--mirror .belly-photo__img {
  transform-origin: center;
  object-position: 68% 62%; /* mirrored framing */
  filter:
    saturate(0.55)
    contrast(0.90)
    brightness(1.08)
    sepia(0.28);
  opacity: 0.92;
  animation-direction: alternate-reverse;
  animation-duration: 42s;
}
.belly-photo:not(.belly-photo--mirror) .belly-photo__img {
  transform: scaleX(-1); /* flip so belly faces center */
}

@keyframes bellyKenBurns {
  0%   { transform: scale(1.06) translate3d(0, 0, 0); }
  50%  { transform: scale(1.10) translate3d(-12px, -8px, 0); }
  100% { transform: scale(1.08) translate3d(10px, 6px, 0); }
}

/* ───── 09 · tint / harmonizer ─────
   A warm cream wash bonded with mix-blend-mode unifies the photo's
   greens and tans with the rest of the page. */
.belly-photo__tint {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(250, 245, 238, 0.30) 0%,
      rgba(250, 245, 238, 0.10) 30%,
      rgba(232, 201, 176, 0.18) 70%,
      rgba(201, 169, 140, 0.22) 100%),
    radial-gradient(ellipse at 50% 40%,
      rgba(250, 245, 238, 0.42) 0%,
      rgba(250, 245, 238, 0.00) 60%);
  mix-blend-mode: soft-light;
  animation: tintShift 22s ease-in-out infinite alternate;
}
@keyframes tintShift {
  0%   { opacity: 0.85; }
  50%  { opacity: 1; }
  100% { opacity: 0.78; }
}

/* ───── 10 + 11 · scrim & vignette ─────
   The scrim is invisible at the edges and densest at the title's
   horizontal band; the vignette darkens corners just enough to
   feather the photo into the cream page background. */
.belly-photo__vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    /* readability scrim — gentle horizontal cream band where the title sits */
    linear-gradient(180deg,
      rgba(250, 245, 238, 0.92) 0%,
      rgba(250, 245, 238, 0.72) 18%,
      rgba(250, 245, 238, 0.28) 40%,
      rgba(250, 245, 238, 0.12) 60%,
      rgba(250, 245, 238, 0.55) 90%,
      rgba(250, 245, 238, 0.85) 100%),
    /* corner vignette */
    radial-gradient(ellipse 90% 80% at 50% 50%,
      rgba(61, 58, 46, 0) 55%,
      rgba(61, 58, 46, 0.08) 80%,
      rgba(61, 58, 46, 0.18) 100%);
}

/* ───── 06b · soft halo right behind the title for extra contrast ─── */
.belly-photo__halo {
  position: absolute;
  inset: 6% 8%;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 45% at 50% 44%,
    rgba(250, 245, 238, 0.78) 0%,
    rgba(250, 245, 238, 0.42) 38%,
    rgba(250, 245, 238, 0.12) 62%,
    rgba(250, 245, 238, 0) 78%);
  filter: blur(14px);
  animation: haloBreathe 8s ease-in-out infinite;
}
@keyframes haloBreathe {
  0%, 100% { opacity: 0.90; transform: scale(1); }
  50%      { opacity: 1.00; transform: scale(1.04); }
}

/* ───── 12 · golden-hour light spots ───── */
.belly-photo__glow {
  position: absolute;
  z-index: 2;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(40px);
  mix-blend-mode: screen;
  opacity: 0.55;
}
.belly-photo__glow--a {
  inset-block-start: 8%;
  inset-inline-end: 12%;
  inline-size: 280px;
  block-size: 280px;
  background: radial-gradient(circle,
    rgba(255, 218, 168, 0.85) 0%,
    rgba(255, 218, 168, 0) 70%);
  animation: glowDrift 18s ease-in-out infinite alternate;
}
.belly-photo__glow--b {
  inset-block-start: 30%;
  inset-inline-start: 10%;
  inline-size: 320px;
  block-size: 320px;
  background: radial-gradient(circle,
    rgba(181, 113, 91, 0.55) 0%,
    rgba(181, 113, 91, 0) 70%);
  animation: glowDrift 24s ease-in-out infinite alternate-reverse;
}
.belly-photo__glow--c {
  inset-block-end: 14%;
  inset-inline-end: 22%;
  inline-size: 240px;
  block-size: 240px;
  background: radial-gradient(circle,
    rgba(122, 139, 111, 0.45) 0%,
    rgba(122, 139, 111, 0) 70%);
  animation: glowDrift 28s ease-in-out infinite alternate;
  animation-delay: -8s;
}
@keyframes glowDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(40px, -20px, 0) scale(1.12); }
  100% { transform: translate3d(-30px, 30px, 0) scale(0.94); }
}

/* ───── 18 · noise grain (matches site .grain overlay) ───── */
.belly-photo__grain {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.55  0 0 0 0 0.45  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

/* ───── 15 · pulsing heart over the belly ───── */
.belly-photo__heart {
  position: absolute;
  inset-block-start: 46%;
  inset-inline-start: 36%;
  inline-size: 38px;
  block-size: 38px;
  z-index: 6;
  color: rgba(181, 30, 30, 0.55);
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 12px rgba(181, 30, 30, 0.5));
  transform-origin: center;
}
.belly-photo__heart svg { width: 100%; height: 100%; display: block; }
.belly-stage--bg.is-revealed .belly-photo__heart {
  animation: heartIn 1s ease-out 1.8s forwards,
             heartBeat 1.4s cubic-bezier(0.5, 0, 0.5, 1) 2.8s infinite;
}
@keyframes heartIn {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes heartBeat {
  0%, 55%, 100% { transform: scale(1); }
  15%           { transform: scale(1.45); }
  25%           { transform: scale(0.92); }
  40%           { transform: scale(1.25); }
}

/* ───── 16 · drifting particles host (populated by JS) ───── */
.belly-photo__petals {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.belly-petal {
  position: absolute;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50% 50% 60% 40% / 40% 60% 40% 60%;
  background: radial-gradient(circle at 30% 30%,
    rgba(255, 245, 230, 0.85),
    rgba(232, 201, 176, 0.35) 60%,
    rgba(232, 201, 176, 0));
  opacity: 0;
  animation: petalDrift linear infinite;
  filter: blur(0.4px);
  will-change: transform, opacity;
}
.belly-petal--sage {
  background: radial-gradient(circle at 30% 30%,
    rgba(220, 232, 210, 0.75),
    rgba(122, 139, 111, 0.30) 60%,
    rgba(122, 139, 111, 0));
}
@keyframes petalDrift {
  0%   { transform: translate3d(0,0,0) rotate(0); opacity: 0; }
  10%  { opacity: 0.85; }
  90%  { opacity: 0.6; }
  100% { transform: translate3d(var(--dx,40px), -120%, 0) rotate(240deg); opacity: 0; }
}

/* ───── 14 · heartbeat-tempo "breathing" brightness pulse on
   the whole composition. Subtle — only visible if you watch. */
.belly-stage--bg.is-revealed {
  animation: bellyBreathe 5.4s ease-in-out 1.5s infinite;
}
@keyframes bellyBreathe {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.045) saturate(1.06); }
}

/* ───── credential chips below the hero text ───── */
.belly-chip {
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: 22px;
  padding: 0.85rem 1.1rem;
  box-shadow: var(--sh-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--f-body);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: rgba(250, 245, 238, 0.86);
  animation: belly-chip-bob 6s ease-in-out infinite;
}
.belly-chip--inline { position: relative; }
.belly-chip--dark {
  background: var(--c-ink);
  color: var(--c-cream);
  border-color: var(--c-ink);
  background-color: rgba(61, 58, 46, 0.94);
  animation-delay: -2.5s;
}
.belly-chip__num {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 2rem;
  line-height: 1;
  color: var(--c-clay-soft);
  letter-spacing: -0.02em;
}
.belly-chip__label {
  font-size: 0.78rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.belly-chip--inline:not(.belly-chip--dark) .belly-chip__label { color: var(--c-ink); font-weight: 500; }
.belly-chip > svg {
  inline-size: 26px !important;
  block-size: 26px !important;
  color: var(--c-terra);
  flex-shrink: 0;
}
@keyframes belly-chip-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ───── heartbeat EKG divider (unchanged) ───── */
.heartbeat-divider {
  position: relative;
  inline-size: 100%;
  block-size: 64px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block: clamp(1rem, 2vw, 2rem);
}
.heartbeat-divider::before,
.heartbeat-divider::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--c-line));
  max-inline-size: 14%;
}
.heartbeat-divider::after { background: linear-gradient(270deg, transparent, var(--c-line)); }
.heartbeat-divider svg {
  inline-size: min(72%, 720px) !important;
  block-size: 100% !important;
  overflow: visible;
}
.heartbeat-path {
  fill: none;
  stroke: var(--c-terra);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: heartbeat-line 4.2s linear infinite;
  filter: drop-shadow(0 0 6px rgba(181,113,91,0.25));
}
@keyframes heartbeat-line {
  0%   { stroke-dashoffset: 1400; }
  55%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1400; }
}
.heartbeat-divider .hb-dot {
  fill: var(--c-terra);
  transform-origin: center;
  transform-box: fill-box;
  animation: heartbeat-dot 1.4s ease-in-out infinite;
}
@keyframes heartbeat-dot {
  0%, 60%, 100% { transform: scale(1); }
  20%           { transform: scale(2.1); }
  40%           { transform: scale(1.3); }
}

/* ───── floating amniotic bubbles (contact section) ───── */
.bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.bubble {
  position: absolute;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 28%,
    rgba(255, 245, 230, 0.85),
    rgba(232, 201, 176, 0.25) 60%,
    rgba(232, 201, 176, 0));
  inset-block-end: -40px;
  opacity: 0;
  animation: bubble-rise linear infinite;
  will-change: transform, opacity;
}
.bubble--sage {
  background: radial-gradient(circle at 30% 28%,
    rgba(225, 235, 215, 0.7),
    rgba(122, 139, 111, 0.25) 60%,
    rgba(122, 139, 111, 0));
}
@keyframes bubble-rise {
  0%   { transform: translate3d(0, 0, 0) scale(0.7); opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.45; }
  100% { transform: translate3d(var(--drift, 0px), -120vh, 0) scale(1.1); opacity: 0; }
}

/* ───── mini fetus glyph in why-cards (kept) ───── */
.belly-mini {
  position: absolute;
  inset-block-start: clamp(2rem, 3vw, 3rem);
  inset-inline-end: clamp(1.5rem, 2.5vw, 2.5rem);
  inline-size: 56px;
  block-size: 56px;
  opacity: 0.32;
  z-index: 0;
  color: var(--c-terra);
  pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.belly-mini svg { inline-size: 100% !important; block-size: 100% !important; }
.belly-mini .h { animation: belly-heart 1.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes belly-heart {
  0%, 55%, 100% { transform: scale(1); }
  15%           { transform: scale(1.6); }
  25%           { transform: scale(0.9); }
  40%           { transform: scale(1.32); }
  50%           { transform: scale(1); }
}
.why__card:hover .belly-mini { opacity: 0.7; transform: translate(-4px, 4px) rotate(-6deg); }
.why__card { position: relative; }
.why__card > *:not(.belly-mini) { position: relative; z-index: 1; }

/* eyebrow heart variant */
.eyebrow__dot--heart {
  background: transparent;
  box-shadow: none;
  animation: none;
  width: 14px;
  height: 14px;
  color: var(--c-terra);
}
.eyebrow__dot--heart svg { width: 100%; height: 100%; display: block; }
.eyebrow__dot--heart svg path { fill: currentColor; animation: belly-heart 1.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* ───── 20 · responsive recalibration ───── */
@media (max-width: 1100px) {
  .hero__belly-bg { inset: -4% -2%; }
  .belly-photo:not(.belly-photo--mirror) .belly-photo__img { object-position: 30% 62%; }
  .belly-photo--mirror .belly-photo__img { object-position: 70% 62%; }
}
@media (max-width: 900px) {
  .belly-photo { border-radius: 32% 28% 36% 30% / 28% 36% 28% 36%; }
  .hero__belly-bg {
    inset: -2% -1%;
    -webkit-mask-image: radial-gradient(ellipse 60% 42% at 50% 50%,
      rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.40) 38%, #000 78%, rgba(0,0,0,0.4) 100%);
            mask-image: radial-gradient(ellipse 60% 42% at 50% 50%,
      rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.40) 38%, #000 78%, rgba(0,0,0,0.4) 100%);
  }
  .belly-photo:not(.belly-photo--mirror),
  .belly-photo--mirror { inline-size: 100%; left: 0; right: 0; }
  .belly-photo--mirror { display: none; }
  .belly-photo:not(.belly-photo--mirror) .belly-photo__img {
    transform: none;
    object-position: 36% 55%;
  }
  .belly-photo__heart { inline-size: 32px; block-size: 32px; inset-block-start: 52%; inset-inline-start: 42%; }
  .hero__content .hero__title { max-inline-size: 100%; }
}
@media (max-width: 720px) {
  .belly-chip { padding: 0.55rem 0.8rem; border-radius: 18px; gap: 0.5rem; }
  .belly-chip__num { font-size: 1.5rem; }
  .belly-chip__label { font-size: 0.7rem; }
  .belly-chip > svg { inline-size: 22px !important; block-size: 22px !important; }
  .heartbeat-divider { block-size: 44px; }
  .heartbeat-divider svg { inline-size: 86%; }
  .belly-mini { inline-size: 42px; block-size: 42px; inset-block-start: 1.4rem; inset-inline-end: 1.3rem; }
  .belly-photo__glow { filter: blur(28px); opacity: 0.4; }
}
@media (max-width: 480px) {
  .hero__belly-bg { opacity: 0.85; }
}

/* ───── 20 · reduced motion ───── */
@media (prefers-reduced-motion: reduce) {
  .belly-stage--bg {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }
  .belly-photo__img,
  .belly-photo__tint,
  .belly-photo__halo,
  .belly-photo__glow,
  .belly-photo__heart,
  .belly-petal,
  .belly-chip,
  .heartbeat-path,
  .hb-dot,
  .bubble { animation: none !important; }
  .belly-photo__heart { opacity: 1; }
  .belly-photo__petals { display: none; }
}