/* ============================================================
   DOULA PAGE, second pass — built from the owner's reference:
   organic wave dividers, solid color-blocked bands, a single
   deep accent colour carrying every word (headings AND body),
   centered measures, a rounded photo card, and a one-question
   carousel. Header and footer keep the site styles untouched.
   ============================================================ */

:root {
  --band: #9fae98;                 /* sage: our answer to her dusty pink   */
  --accent: #1e2e23;               /* pine-deep: our answer to her berry   */
  --accent-soft: rgb(30 46 35 / 0.82);
}

/* --- wave dividers ------------------------------------------ */

.wave {
  display: block;
  width: 100%;
  height: clamp(2.2rem, 5vw, 4rem);
  margin-top: -1px;
  margin-bottom: -1px;
}

.wave svg { display: block; width: 100%; height: 100%; }

.wave--band  svg path { fill: var(--band); }
.wave--paper svg path { fill: var(--paper); }

/* photo sections need their wave floated over the image */
.dwave-over {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 2;
  height: clamp(2.2rem, 5vw, 4rem);
}
.dwave-over svg { display: block; width: 100%; height: 100%; }

.dwave-over--top {
  top: -1px;
  bottom: auto;
  transform: scaleY(-1);
}

/* --- hero: type in the photograph's own quiet corner -------- */

.dhero {
  position: relative;
  min-height: clamp(28rem, 88vh, 48rem);
  overflow: hidden;
}

/* the fixed overlay header floats over the sky; this top fade is what
   keeps its white links readable, same treatment as the home hero */
.dhero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 9rem;
  z-index: 1;
  background: linear-gradient(180deg, rgb(var(--pine-deep-rgb) / 0.34) 0%, rgb(var(--pine-deep-rgb) / 0) 100%);
  pointer-events: none;
}

.dhero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}

.dhero-content {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(4.5rem, 9vh, 6rem) var(--gutter) clamp(10rem, 28vh, 16rem);
  text-align: center;
}

.dhero-stack {
  max-width: 22ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.8rem);
  color: var(--accent);
}

.dhero-stack span {
  display: block;
  line-height: 1.22;
  margin-top: clamp(0.25rem, 0.8vw, 0.55rem);
}

.dhero-stack .is-italic { font-style: italic; font-weight: 400; }

@media (max-width: 54rem) {
  .dhero-bg { object-position: 50% 60%; }
  .dhero-content { padding-bottom: clamp(11rem, 38vh, 18rem); }
}

/* --- the sage band: hello ----------------------------------- */

.dhello {
  background: var(--band);
  color: var(--accent);
}

.dhello-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.25rem, 5vh, 3.75rem) var(--gutter) clamp(2.75rem, 6vh, 4.25rem);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: center;
}

.dhello-photo img {
  width: 100%;
  height: auto;
  border-radius: clamp(1.6rem, 4vw, 3rem);
  display: block;
}

.dhello-text { text-align: center; }

.dhello-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  line-height: 1.2;
  color: var(--accent);
}

.dhello-title em { font-style: italic; font-weight: 400; }

.dhello-text p:not(.dhello-title) {
  margin-top: 1.35rem;
  font-size: 1.02rem;
  line-height: 1.8;
  /* full accent, not the soft blend: pine-deep at reduced alpha over sage
     lands under the 4.5:1 floor (axe caught it) */
  color: var(--accent);
}

.dhello-text .btn-outline { margin-top: 1.5rem; }

.btn-outline {
  display: inline-block;
  padding: 0.85rem 2.1rem;
  border: 1.5px solid var(--accent);
  border-radius: 0.6rem;
  color: var(--accent);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  transition: background 0.25s ease, color 0.25s ease;
}

.btn-outline:hover { background: var(--accent); color: var(--paper); }

.btn-outline:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 54rem) {
  .dhello-inner { grid-template-columns: 1fr; }
  .dhello-photo { max-width: 24rem; margin: 0 auto; }
}

/* --- a few things you should know: the carousel ------------- */

.dknow {
  background: var(--paper);
  text-align: center;
  padding: clamp(1.75rem, 4vh, 3rem) 0 clamp(2.25rem, 5vh, 3.75rem);
}

.dknow-title {
  margin-inline: auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  color: var(--accent);
  padding: 0 var(--gutter);
}

.dknow-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
}

.dknow-track::-webkit-scrollbar { display: none; }

.dknow-track:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.dknow-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: 0 var(--gutter);
}

.dknow-slide-inner { max-width: 44rem; margin: 0 auto; }

.dknow-q {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 500;
  color: var(--accent);
}

.dknow-a {
  margin-top: 1.4rem;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--accent-soft);
}

.dknow-arrows {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: clamp(1.35rem, 3.5vh, 2rem);
}

.dknow-arrow {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  border: 0;
  background: var(--band);
  color: var(--paper);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, opacity 0.25s ease;
}

.dknow-arrow:hover { background: var(--accent); }

.dknow-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.dknow-arrow[disabled] { opacity: 0.35; cursor: default; }

.dknow-arrow[disabled]:hover { background: var(--band); }

/* --- real moments from training: a rounded photo card ------- */

.dmoments {
  background: var(--paper);
  padding: 0 var(--gutter) clamp(2rem, 5vh, 3.25rem);
}

.dmoments-inner {
  max-width: 67.5rem;
  margin: 0 auto;
  text-align: center;
}

.dmoments-inner img {
  /* the collage is portrait now; full band width would run two thousand
     pixels tall, so it stands as a centred column instead */
  max-width: 30rem;
  margin-inline: auto;
  width: 100%;
  height: auto;
  display: block;
  border-radius: clamp(1.2rem, 3vw, 2.2rem);
}

.dmoments-inner figcaption {
  margin-top: 1.1rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--honey-text);
}

/* --- three stages stay site-styled but centered lede -------- */

.dstages { background: var(--paper); }

/* --- a prenatal visit: the dmoments card, landscape-wide ----- */

.dvisit {
  background: var(--paper);
  padding: 0 var(--gutter) clamp(2rem, 5vh, 3.25rem);
}

.dvisit-inner {
  max-width: 67.5rem;
  margin: 0 auto;
  text-align: center;
}

.dvisit-inner img {
  /* landscape, so it takes a wider column than the portrait training
     collage above — but still a card, not a full-bleed band */
  max-width: 56rem;
  margin-inline: auto;
  width: 100%;
  height: auto;
  display: block;
  border-radius: clamp(1.2rem, 3vw, 2.2rem);
}

.dvisit-inner figcaption {
  margin-top: 1.1rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--honey-text);
}

/* --- the belief: white serif on the quiet photograph -------- */

.dbelief {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 10vh, 6.5rem) var(--gutter);
}

.dbelief-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

.dbelief::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(var(--pine-deep-rgb) / 0.18);
}

.dbelief blockquote {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}

.dbelief blockquote p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1.45;
  color: #fff;
  text-shadow: 0 1px 18px rgb(var(--pine-deep-rgb) / 0.55);
}

/* --- now, about you ----------------------------------------- */

.dnow {
  background: var(--paper);
  text-align: center;
  padding: clamp(2rem, 5vh, 3.25rem) var(--gutter) 0;
}

.dnow-title {
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.25;
  color: var(--accent);
}

.dnow-title em { font-style: italic; font-weight: 400; }

.dnow p:not(.dnow-title) {
  max-width: 34rem;
  margin: 1.5rem auto 0;
  line-height: 1.8;
  color: var(--accent-soft);
}

@media (prefers-reduced-motion: reduce) {
  .dknow-track { scroll-behavior: auto; }
  .btn-outline, .dknow-arrow { transition: none; }
}