/* ==========================================================================
   Maribel Doula — Design system & homepage styles
   Direction: Natural Elegance + Warmth
   Structure: 1 Fonts · 2 Tokens · 3 Base · 4 Layout · 5 Components · 6 Sections · 7 Motion · 8 Print
   ========================================================================== */

/* 1. FONTS (self-hosted, SIL Open Font License — see /assets/fonts) ------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-var-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* D5J-4: Great Vibes — SIL Open Font License 1.1, self-hosted (latin subset).
   Used ONLY for the signature-style Why Maribel heading on the homepage. */
@font-face {
  font-family: "Great Vibes";
  src: url("../fonts/great-vibes-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. TOKENS ------------------------------------------------------------- */
:root {
  /* Brand palette (approved) */
  --ivory: #faf7f2;
  --sage: #dce5d8;
  --olive: #354b3d;
  --terracotta: #b66a52;
  --sand: #eadccb;
  --charcoal: #30332f;

  /* Derived tones — chosen to keep WCAG AA contrast for small text */
  --terracotta-ink: #87472f;   /* terracotta for small text on light grounds (≥4.5:1 on ivory, sage, sand) */
  --terracotta-btn: #9a5440;   /* button fill: white text ≥ 4.5:1 */
  --olive-deep: #2a3c31;
  --text-muted: #4f554d;       /* secondary text on ivory/sage/sand */
  --line: rgba(53, 75, 61, 0.18);
  --white: #fff;

  /* Typography */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-lead: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem);
  --fs-h2: clamp(2.125rem, 1.6rem + 2vw, 3.25rem);
  --fs-h1: clamp(2.75rem, 1.9rem + 3.6vw, 5rem);

  /* Space & shape */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --container: 72rem;
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --radius-sm: 0.5rem;
  --radius: 1rem;
  --radius-lg: 1.75rem;
  --shadow-soft: 0 1px 2px rgba(48, 51, 47, 0.04), 0 12px 32px -12px rgba(48, 51, 47, 0.16);

  --header-h: 4.5rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 3. BASE --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--olive);
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 500; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p { margin: 0 0 var(--space-2); text-wrap: pretty; }
em { font-style: italic; }
img, svg { display: block; max-width: 100%; height: auto; }
ul { margin: 0; padding: 0; }

a {
  color: var(--olive);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--terracotta-ink); }

:focus-visible {
  outline: 3px solid var(--terracotta-btn);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible,
.on-dark:focus-visible { outline-color: var(--sand); }

::selection { background: var(--sand); color: var(--charcoal); }

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

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--olive);
  color: var(--ivory);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; color: var(--ivory); }

/* 4. LAYOUT ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--sage { background: var(--sage); }
.section--sand { background: var(--sand); }
.section--olive { background: var(--olive); color: var(--ivory); }

.section-head { max-width: 40rem; margin-bottom: var(--space-5); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--text-muted); font-size: var(--fs-lead); }

/* 5. COMPONENTS --------------------------------------------------------- */

/* Eyebrow label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta-ink);
}
.eyebrow::before {
  content: "";
  width: 1.75rem; height: 1px;
  background: currentColor;
}
.on-dark .eyebrow { color: var(--sand); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.8rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.9875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn--primary { background: var(--terracotta-btn); color: var(--white); }
.btn--primary:hover { background: #82452f; color: var(--white); }
.btn--secondary { background: transparent; color: var(--olive); border-color: var(--olive); }
.btn--secondary:hover { background: var(--olive); color: var(--ivory); }
.btn--light { background: var(--ivory); color: var(--olive); }
.btn--light:hover { background: var(--sand); color: var(--olive-deep); }
.btn--sm { min-height: 2.5rem; padding: 0.55rem 1.15rem; font-size: 0.9rem; }
@media (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-1px); }
}

/* Text link with arrow */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--olive);
}

/* Photo placeholder (swap for <picture> when real photography is ready) */
.photo-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(250, 247, 242, 0.65), transparent 60%),
    linear-gradient(160deg, var(--sand), #e2d0bb 60%, #d9c3ab);
  color: var(--olive);
}
.photo-placeholder__art { width: 46%; max-width: 13rem; opacity: 0.55; }
.photo-placeholder__label {
  position: absolute;
  bottom: 1.25rem; left: 50%;
  transform: translateX(-50%);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(250, 247, 242, 0.85);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
}

/* Cards */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.card__icon {
  display: grid;
  place-items: center;
  width: 3.5rem; height: 3.5rem;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--sage);
  color: var(--olive);
}
.card__icon svg { width: 1.75rem; height: 1.75rem; }
/* Approved service illustrations. The frame spans the card and takes the proportions of
   the widest illustration (Birth Doula, 210×208), capped at 13rem tall. Every card in a row
   therefore gets the same frame height at every width, and each illustration fills that
   height at its own ratio: same height, no distortion, no cropping. The top margin keeps
   the frame clear of .card__num (about 0.5rem of space below it). */
.card__art { display: flex; justify-content: center; width: 100%; aspect-ratio: 210 / 208; max-height: 13rem;
             min-height: 0; /* without this the image's own height overrides aspect-ratio (CSS automatic minimum size) */
             margin: 2rem 0 var(--space-3); line-height: 0; }
.card__art img { display: block; width: auto; max-width: 100%; height: 100%; object-fit: contain; }
.card__num {
  position: absolute;
  top: 1.5rem; right: 1.75rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--terracotta-ink);
}
.card h3 { margin-bottom: var(--space-1); }
.card p { color: var(--text-muted); margin-bottom: 0; }
.card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: var(--space-3);
  font-weight: 600;
  color: var(--terracotta-ink);
  text-decoration: none;
}
.card__link svg { width: 1.1rem; height: 1.1rem; transition: transform 0.25s var(--ease); }
.card__link:hover { color: var(--olive); }
.card__link:hover svg { transform: translateX(3px); }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card:has(.card__link:focus-visible) { outline: 3px solid var(--terracotta-btn); outline-offset: 3px; }
.card__link:focus-visible { outline: none; }

/* Check list */
.check-list { list-style: none; display: grid; gap: 0.9rem; }
.check-list li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.85rem;
  align-items: start;
}
.check-list svg { width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; color: var(--terracotta); }
.on-dark .check-list svg { color: var(--sand); }

/* 6. SECTIONS ----------------------------------------------------------- */

/* Header / navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 242, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--olive);
  text-decoration: none;
}
.brand:hover { color: var(--olive); }
/* Approved monogram (artwork/originals/Logo2.png). Height-driven; width follows the artwork (no distortion). */
.brand__art { display: block; flex: none; line-height: 0; }
.brand__art img { display: block; width: auto; height: 3.5rem; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1;
}
.brand__name span { font-style: italic; font-weight: 500; color: var(--terracotta-ink); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--olive);
  font: 600 0.9rem/1 var(--font-body);
  cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 1.1rem; height: 0.75rem; }
.nav-toggle__bars span {
  position: absolute; left: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle__bars span:nth-child(3) { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

.site-nav { display: flex; align-items: center; gap: var(--space-3); }
.site-nav__list { display: flex; align-items: center; gap: 0.25rem; list-style: none; }
.site-nav__list a {
  display: inline-block;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--charcoal);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  /* D5M-1 Phase 2: Spanish labels ("Sobre mí", "Preguntas frecuentes",
     "Consulta gratuita") were wrapping to two lines inside their own nav
     cell on desktop. Nav labels are never line-wrapped — if there isn't
     room on desktop, the hamburger-menu breakpoint below takes over. */
  white-space: nowrap;
}
.site-nav__actions .btn { white-space: nowrap; }
.site-nav__list a:hover { color: var(--terracotta-ink); }
.site-nav__list a[aria-current="page"] { color: var(--olive); box-shadow: inset 0 -1.5px 0 var(--terracotta); border-radius: 0; }
.site-nav__actions { display: flex; align-items: center; gap: 0.75rem; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--olive);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.lang-switch svg { width: 1rem; height: 1rem; }
.lang-switch:hover { border-color: var(--olive); color: var(--olive); }

/* Mobile header controls: language switch beside the Menu button (hidden on desktop) */
.site-header__controls { display: none; align-items: center; gap: 0.5rem; }
.lang-switch--header { min-height: 2.75rem; background: var(--white); white-space: nowrap; }

@media (max-width: 61.99em) {
  .js .nav-toggle { display: inline-flex; }
  .site-header__inner { flex-wrap: wrap; }
  .site-header__controls { display: flex; flex-shrink: 0; }
  /* Single-row safety: brand may compress (wordmark truncates) rather than
     force the controls to wrap onto a second row; controls never shrink; the
     nav still drops below via its own flex-basis when the burger opens. */
  .brand { min-width: 0; flex-shrink: 1; }
  .brand__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .site-nav__actions .lang-switch--nav { display: none; }
  .site-nav {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
  }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: flex; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list a {
    display: block;
    padding: 0.9rem 0.25rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-size: 1.05rem;
  }
  .site-nav__list a[aria-current="page"] { box-shadow: none; color: var(--terracotta-ink); }
  .site-nav__actions { flex-direction: column; align-items: stretch; }
  .site-nav__actions .btn,
  .site-nav__actions .lang-switch { justify-content: center; }
  .js .site-header.nav-open { max-height: 100dvh; overflow-y: auto; }
}
/* Narrow phones: keep logo, language switch and Menu on one row (320px minimum).
   The Menu label stays as the button's accessible name; the language word stays visible. */
@media (max-width: 29.99em) {
  .site-header__inner { gap: 0.5rem; }
  .lang-switch--header { padding-inline: 0.7rem; }
  .lang-switch--header svg { display: none; }
  .nav-toggle { position: relative; justify-content: center; width: 2.75rem; padding: 0; }
  .nav-toggle [data-label] {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}
@media (max-width: 25.99em) {
  /* Below ~416 px, header-only step-down keeps M + wordmark + lang + burger
     safely in one row on real iPhone metrics (webfont and fallback). This
     catches the iPhone 12 mini / SE class (360-390 px) without touching the
     larger iPhone Pro Max class (430 px) which comfortably fits already.
     The footer keeps the enlarged brand sizes above. */
  .site-header .brand { gap: 0.55rem; }
  .site-header .brand__art img { height: 2.5rem; }
  .site-header .brand__name { font-size: 1.1rem; }
}
@media (max-width: 24.99em) {
  .brand { gap: 0.55rem; }
  .brand__art img { height: 2.875rem; }
  .brand__name { font-size: 1.3rem; }
}
@media (max-width: 22.49em) {
  .brand__art img { height: 2.25rem; }
  .brand__name { font-size: 1.15rem; }
  /* Header only: at 320 px the header mark and name step down further so
     logo + language switch + Menu stay on one row in EN and ES, with the web
     font AND with the fallback font shown before it loads (no layout shift).
     The footer keeps the brand sizes above. */
  .site-header .brand { gap: 0.4rem; }
  .site-header .brand__art img { height: 2rem; }
  .site-header .brand__name { font-size: 0.95rem; }
}

/* Hero — mobile-first: baby photo first, then headline / invite / CTA, then
   supporting intro + area + secondary CTA. Desktop restores the two-column
   composition via grid-template-areas without touching source order. */
.hero { padding-block: 0 clamp(2.5rem, 1.75rem + 2.5vw, 4.5rem); overflow: hidden; }
.hero__grid { display: grid; gap: var(--space-2); align-items: start; }
.hero__media {
  position: relative;
  /* Mobile: break out of the container's horizontal gutter so the photo spans
     nearly edge-to-edge for an immersive photographic hero. Desktop media is
     restored to its grid cell below. Vertical spacing between photo and
     eyebrow is handled by the grid row-gap (no redundant margins). */
  margin-inline: calc(var(--gutter) * -1);
}
.hero__eyebrow { margin: 0; }
.hero__title { margin: 0; }
.hero__invite { margin: 0; font-size: var(--fs-lead); color: var(--charcoal); max-width: 34rem; }
.hero__lead { margin: 0; font-size: var(--fs-lead); color: var(--text-muted); max-width: 34rem; }
.hero__area {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.hero__area svg { width: 1.15rem; height: 1.15rem; flex: none; margin-top: 0.2rem; color: var(--terracotta); }
.hero__cta { justify-self: start; }
.hero__cta--primary { margin-top: var(--space-1); }
.hero__cta--secondary { margin-top: var(--space-1); }
.hero__media .photo-placeholder {
  aspect-ratio: 5 / 4;
  border-radius: 0;
}
/* Edge-to-edge treatment on mobile: drop the rounded-card feel and reduce the
   photograph height by ~16% to shorten the scroll journey to the CTA while
   keeping the baby's face fully framed. Desktop restores the original 934/887
   aspect. */
.hero__media .photo-frame { border-radius: 0; }

@media (min-width: 52em) {
  .hero {
    padding-block: clamp(1.5rem, 0.75rem + 2vw, 3.5rem) clamp(3rem, 2rem + 3vw, 5.5rem);
  }
  .hero__grid {
    /* Narrow desktop (52-71.99em): stack CTAs; media column stays spacious. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.8fr);
    grid-template-areas:
      "eyebrow    eyebrow     media"
      "title      title       media"
      "lead       lead        media"
      "area       area        media"
      "primary    primary     media"
      "secondary  secondary   media";
    column-gap: var(--space-4);
    row-gap: var(--space-3);
    align-items: center;
  }
  /* Desktop: media returns to its grid cell with the approved rounded framing. */
  .hero__media {
    grid-area: media;
    align-self: center;
    margin-inline: 0;
    margin-bottom: 0;
  }
  .hero__media .photo-placeholder { aspect-ratio: 5 / 6; border-radius: var(--radius-lg); }
  .hero__media .photo-frame { border-radius: var(--radius-lg); }
  .hero__eyebrow { grid-area: eyebrow; margin: 0; }
  .hero__title {
    grid-area: title;
    /* Modest step down from the global --fs-h1 (max 5rem) to improve two-column
       balance against the baby portrait on desktop, while keeping impact. */
    font-size: clamp(2.5rem, 1.75rem + 2.6vw, 4.25rem);
    line-height: 1.08;
  }
  .hero__invite { display: none; }
  .hero__lead { grid-area: lead; }
  .hero__area { grid-area: area; margin-top: var(--space-1); }
  .hero__cta--primary { grid-area: primary; margin-top: var(--space-2); white-space: nowrap; justify-self: start; }
  .hero__cta--secondary { grid-area: secondary; margin-top: var(--space-1); white-space: nowrap; justify-self: start; }
}

@media (min-width: 72em) {
  /* Wider desktop (≥1152px): side-by-side CTAs. Fixed-width CTA columns give the
     primary button the room its one-line label needs; the remaining space flows
     to the media column, which gains a modest size improvement. */
  .hero__grid {
    grid-template-columns: 20rem 11rem minmax(0, 1fr);
    grid-template-areas:
      "eyebrow    eyebrow     media"
      "title      title       media"
      "lead       lead        media"
      "area       area        media"
      "primary    secondary   media";
  }
}

/* Story */
.story__grid { display: grid; gap: var(--space-5); }
.story__quote {
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--line);
}
.story__quote p {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-style: italic;
  line-height: 1.2;
  color: var(--olive);
}
.story__quote footer { font-size: var(--fs-sm); color: var(--text-muted); }
.story__body p { font-size: 1.0625rem; }
/* D5N-26 — About / My story: inline photo (centered, rounded, with
   breathing room above and below). Single column on all viewports. */
.story__container { max-width: 44rem; }
.story__photo {
  margin: var(--space-4) auto;
  max-width: 28rem;
}
.story__photo img,
.story__photo picture { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.story__body p:first-of-type::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  font-family: var(--font-display);
  font-size: 4.1em;
  line-height: 0.8;
  color: var(--terracotta);
}
.story__training {
  display: flex;
  gap: 1rem;
  margin-top: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--sage);
  font-size: 0.975rem;
}
.story__training svg { width: 1.5rem; height: 1.5rem; flex: none; margin-top: 0.2rem; color: var(--olive); }
.story__training p { margin: 0; }
@media (min-width: 52em) {
  .story__grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-6); align-items: start; }
  .story__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* Services */
.services__grid { display: grid; gap: var(--space-3); list-style: none; }
.services__grid > li { display: flex; }
.services__grid .card { flex: 1; }
@media (min-width: 48em) { .services__grid { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: no-preference) {
  .services__grid .card { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
  .services__grid .card:hover { transform: translateY(-4px); }
}

/* Why Maribel */
.why__grid { display: grid; gap: var(--space-4) var(--space-5); list-style: none; }
.why__item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); }
.why__icon {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--ivory);
  color: var(--terracotta-ink);
}
.why__icon svg { width: 1.5rem; height: 1.5rem; }
.why__item h3 { font-size: 1.5rem; margin-bottom: 0.35rem; }
.why__item p { margin: 0; color: var(--text-muted); }
@media (min-width: 48em) {
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  /* Editorial variant keeps benefits in a single vertical stack even on tablet. */
  .why__benefits { grid-template-columns: 1fr; }
}

/* --- D5J-1A: Editorial Elegance redesign (Why Maribel) --- */
.why__container { display: grid; gap: var(--space-5); }
.why__head h2 {
  font-style: italic;
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin-bottom: 0;
}
/* D5J-4: signature calligraphic Why Maribel heading — replaces the D5J-2
   uppercase eyebrow. Scoped to .why__head so other sections' eyebrows are
   unchanged. Terracotta preserved. */
.why__signature {
  font-family: "Great Vibes", "Pinyon Script", "Cormorant Garamond", cursive;
  font-size: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  font-weight: 400;
  color: var(--terracotta-ink);
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-3);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* D5L-2: Signature-heading typography system.
     - Shared reusable utility: class="signature-heading"
     - Applied unconditionally to every page's main title (.hero__title
       on home, .page-hero h1 on inner pages) since a page has one h1.
     - Opt-in via class="signature-heading" on each h2 that is a MAJOR
       EDITORIAL SECTION TITLE. Service names, benefit titles, FAQ
       questions, privacy numbered items and 404 language-escape h2s
       are intentionally LEFT in Cormorant per the directive.
     - --compact modifier tightens the clamp for very long headings so
       they wrap cleanly without dominating the layout.
   Preserves (no change): the D5J-4 .why__head h2 keeps its italic
   Cormorant because the "Why Maribel" / "¿Por qué Maribel?" signature
   is placed ABOVE it; the D5H-5 .family__title keeps its italic
   Cormorant terracotta treatment. */
/* Doubled .signature-heading selector raises specificity to (0,2,0) so
   .prose h2 (0,1,1) elsewhere in the sheet cannot override font-size,
   color, or margin-top on tagged section titles that happen to sit
   inside a .prose block. */
.signature-heading.signature-heading,
.page-hero h1,
.hero__title {
  font-family: "Great Vibes", "Pinyon Script", "Cormorant Garamond", cursive;
  font-weight: 400;
  font-style: normal;
  color: var(--terracotta-ink);
  font-size: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  line-height: 1.12;
  letter-spacing: 0.005em;
  margin-top: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-wrap: balance;
}
.signature-heading--compact.signature-heading--compact {
  font-size: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);  /* 36–56px for long titles */
}

/* D5J-4: larger botanical illustration — mobile shows a small inline mark
   below the heading; desktop promotes it into the left negative space,
   absolutely positioned at the bottom of the head cell (which spans the
   full benefits row). Desktop placement is tuned below. */
.why__botanical {
  display: block;
  width: 60px;
  height: auto;
  color: var(--terracotta-ink);
  /* D5N-2: legacy 0.55 opacity made the sprig read as "faded sketch".
     The D5N-2 composition is designed as a full-strength signature. */
  opacity: 1;
  margin: var(--space-3) 0 0;
  pointer-events: none;
}
.why__media {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.why__media .photo-frame--editorial {
  background: var(--ivory);
  padding: 0.625rem;
  border-radius: var(--radius-sm);
  box-shadow:
    0 1px 2px rgba(48, 51, 47, 0.06),
    0 18px 36px -16px rgba(48, 51, 47, 0.22);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.why__media .photo-frame--editorial img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  border-radius: calc(var(--radius-sm) - 0.25rem);
}
.why__caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lead);
  color: var(--olive-deep);
  margin: 0;
  padding-left: var(--space-2);
  border-left: 2px solid var(--terracotta);
  line-height: 1.35;
  text-wrap: pretty;
}

/* Desktop: asymmetric 2-col with head left, benefits + figure stacked right.
   D5J-2 Phase 3: head is scoped to the benefits row only and centered vertically
   within it, so the heading block aligns with the vertical centre of the four
   benefits in the adjacent column. Media stays in its own row, under benefits. */
@media (min-width: 60em) {
  .why__container {
    /* D5J-4B: three-column desktop grid — botanical in its OWN leftmost
       column (farther into the open sage background, visually separate
       from the signature and heading), head in the middle, benefits on
       the right. Media stays under benefits. */
    grid-template-columns: clamp(80px, 8vw, 130px) minmax(18rem, 1.15fr) minmax(0, 1fr);
    grid-template-areas:
      "botanical head benefits"
      ".         .    media";
    column-gap: var(--space-5);
    row-gap: var(--space-5);
    align-items: start;
  }
  .why__head     { grid-area: head; align-self: center; }
  .why__signature { margin: 0 0 var(--space-3); }
  .why__head h2  { margin: 0; }
  .why__benefits { grid-area: benefits; }
  .why__media    { grid-area: media; max-width: 36rem; }
  .why__botanical {
    grid-area: botanical;
    position: static;
    width: auto;
    /* D5J-4B: height 220–280px aligns the botanical's vertical extent
       with benefits 2–3 via align-self: center on the taller row. */
    height: clamp(220px, 20vw, 280px);
    margin: 0;
    align-self: center;
    justify-self: start;
  }
}

/* Testimonials — three family stories on the homepage */
.testimonials__grid {
  display: grid;
  gap: var(--space-3);
  list-style: none;
}
.testimonials__grid > li { display: flex; }
.testimonial {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0;
  padding: var(--space-4);
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.testimonial__mark {
  width: 2.25rem;
  height: 1.6875rem;
  color: var(--terracotta);
  opacity: 0.55;
  margin-bottom: var(--space-2);
}
.testimonial__quote {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--charcoal);
}
.testimonial__quote p {
  margin: 0;
  font-style: italic;
  text-wrap: pretty;
}
.testimonial__note {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.testimonial__note em { font-style: italic; }
.testimonial__person {
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.testimonial__name {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--olive);
  letter-spacing: 0.01em;
}
.testimonial__service {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
@media (min-width: 52em) {
  .testimonials__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}

/* D5N-25 — Testimonial carousel (one at a time; auto-rotates; swipeable).
   Layout: a CSS grid stacks every slide into the same cell so switching slides
   never shifts page height. All slides are present in the DOM; non-active
   slides are visually hidden via opacity + blocked from keyboard focus via
   `inert` set in the markup. Progressive enhancement: without JS the first
   slide is visible and the controls hide (see `.no-js`/`:not(.js)` scoping).
   Reduced motion disables the fade transition (autoplay itself is disabled
   in JS). */
.testimonial-carousel {
  position: relative;
  max-width: 44rem;
  margin: 0 auto;
}
.testimonial-carousel__track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.testimonial-carousel__slide {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms var(--ease, ease);
  pointer-events: none;
}
.testimonial-carousel__slide[aria-current="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.testimonial-carousel__slide .testimonial { width: 100%; }
.testimonial-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.testimonial-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--ivory);
  color: var(--olive);
  cursor: pointer;
  transition: background 0.2s var(--ease, ease), color 0.2s var(--ease, ease), border-color 0.2s var(--ease, ease);
}
.testimonial-carousel__btn svg { width: 1.25rem; height: 1.25rem; }
.testimonial-carousel__btn:hover { background: var(--sand); color: var(--terracotta-ink); border-color: var(--terracotta-ink); }
.testimonial-carousel__dots {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 var(--space-2);
}
.testimonial-carousel__dot {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.testimonial-carousel__dot > span {
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.2s var(--ease, ease), transform 0.2s var(--ease, ease);
}
.testimonial-carousel__dot[aria-current="true"] > span { background: var(--terracotta-ink); transform: scale(1.25); }
.testimonial-carousel__pause {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-body, inherit);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background 0.2s var(--ease, ease), color 0.2s var(--ease, ease), border-color 0.2s var(--ease, ease);
}
.testimonial-carousel__pause:hover { background: var(--sand); color: var(--terracotta-ink); border-color: var(--terracotta-ink); }
.testimonial-carousel__pause[aria-pressed="true"] { background: var(--sand); color: var(--terracotta-ink); border-color: var(--terracotta-ink); }
/* Progressive enhancement: without JS, each slide takes its own grid row
   (every testimonial visible) and the controls are hidden. With JS the slides
   stack into one cell (grid-area 1/1, set above) so only the active one shows. */
.testimonial-carousel__controls { display: none; }
.js .testimonial-carousel__controls { display: flex; }
html:not(.js) .testimonial-carousel__slide {
  grid-area: auto;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  margin-bottom: var(--space-3);
}
@media (prefers-reduced-motion: reduce) {
  .testimonial-carousel__slide,
  .testimonial-carousel__btn,
  .testimonial-carousel__dot > span,
  .testimonial-carousel__pause { transition: none; }
}

/* Package (D5N-25: warm ivory/sand ground; terracotta script heading;
   olive body text; subtle ivory inner card on sand section) */
.package { position: relative; overflow: hidden; }
.package h2 { color: var(--terracotta-ink); }
.package .section-head p { color: var(--text-muted); }
.package__panel {
  display: grid;
  gap: var(--space-5);
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ivory);
}
.package__panel .check-list { gap: 1.1rem; }
.package__panel .check-list li { color: var(--olive); }
.package__panel .check-list small { display: block; color: var(--text-muted); font-size: 0.875rem; }
.package__aside { display: flex; flex-direction: column; gap: var(--space-3); justify-content: space-between; }
.package__aside h3 { color: var(--terracotta-ink); font-size: 1.75rem; }
.package__aside p { color: var(--olive); }
.package__note {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
@media (min-width: 52em) {
  .package__panel { grid-template-columns: 1.3fr 1fr; }
  .package__list { columns: 1; }
}

/* Bilingual */
.bilingual { position: relative; overflow: hidden; }
.bilingual__grid { display: grid; gap: var(--space-5); align-items: center; }
.bilingual__words {
  display: grid;
  gap: 0;
  font-family: var(--font-display);
  line-height: 0.9;
  color: var(--olive);
  user-select: none;
}
.bilingual__words span { display: block; font-size: clamp(4rem, 2.4rem + 7vw, 8.5rem); font-weight: 500; }
.bilingual__words span:last-child {
  padding-left: 0.6em;
  font-style: italic;
  color: var(--terracotta);
}
.bilingual__words .amp {
  display: block;
  margin: 0.15em 0 0.1em 0.3em;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-style: italic;
  color: var(--text-muted);
}
.bilingual__langs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--space-3); list-style: none; }
.bilingual__langs li {
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  background: var(--ivory);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--olive);
}
@media (min-width: 52em) { .bilingual__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }

/* FAQ */
.faq__list { max-width: 48rem; margin-inline: auto; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.625rem);
  font-weight: 600;
  line-height: 1.25;
  color: #171717;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background:
    linear-gradient(var(--olive), var(--olive)) center / 0.8rem 1.5px no-repeat,
    linear-gradient(var(--olive), var(--olive)) center / 1.5px 0.8rem no-repeat;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}
.faq__item[open] summary::after {
  transform: rotate(45deg);
  background-color: var(--sage);
}
.faq__item summary:hover { color: var(--terracotta-ink); }
.faq__answer { padding: 0 3.5rem var(--space-3) 0; color: var(--text-muted); }
.faq__more { margin-top: var(--space-4); text-align: center; color: var(--text-muted); }

/* Consultation */
.consult__card {
  display: grid;
  gap: var(--space-5);
  padding: clamp(2rem, 1rem + 4vw, 4.5rem);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(182, 106, 82, 0.14), transparent 60%),
    var(--sand);
}
.consult__steps { list-style: none; counter-reset: step; display: grid; gap: var(--space-3); }
.consult__steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--space-2);
  align-items: start;
}
.consult__steps li::before {
  content: counter(step);
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--ivory);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--terracotta-ink);
}
.consult__steps strong { display: block; color: var(--olive); }
.consult__steps span { color: var(--text-muted); font-size: 0.975rem; }
.consult__meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  margin: var(--space-3) 0 var(--space-4);
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.consult__meta li { display: inline-flex; align-items: center; gap: 0.45rem; }
.consult__meta svg { width: 1.1rem; height: 1.1rem; color: var(--terracotta-ink); }
.consult__email { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); }
.consult__email a { font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 52em) { .consult__card { grid-template-columns: 1.15fr 1fr; align-items: center; } }

/* Consultation request form (contact page; staging builds only until its backend exists).
   Needs JavaScript (validation, status). Without it the section stays hidden and the
   email option below remains the way to get in touch. */
.consult-form-section { display: none; padding-block: var(--space-4) 0; }
.js .consult-form-section { display: block; }
.page-hero:has(+ .consult-form-section) { padding-block-end: var(--space-3); }
.consult-form__grid { display: grid; gap: var(--space-4); align-items: start; }
.consult-form__intro p { color: var(--text-muted); }
.consult-form__alt { font-size: var(--fs-sm); }
.consult-form__alt a { font-weight: 600; }
.consult-form {
  display: grid;
  gap: var(--space-3);
  padding: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  min-width: 0;
}
.consult-form__preview {
  display: flex; gap: 0.6rem; align-items: flex-start;
  margin: 0; padding: 0.75rem 1rem;
  border: 1px dashed var(--terracotta-ink);
  border-radius: var(--radius-sm);
  background: var(--ivory);
  font-size: var(--fs-sm);
  color: var(--charcoal);
}
.consult-form__preview svg { width: 1.2rem; height: 1.2rem; flex: none; margin-top: 0.1rem; color: var(--terracotta-ink); }
.consult-form__required, .consult-form__privacy { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.field { display: grid; gap: 0.4rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.field label, .field legend { font-weight: 600; color: var(--olive); padding: 0; }
.field__mark { font-weight: 400; font-size: var(--fs-sm); color: var(--text-muted); }
.field__hint { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
/* Scoped to DIRECT children of .field only. Without the child combinator, this rule's
   :not([type="radio"]) attribute selector raised the specificity above `.choice input`
   (D5C regression — PR #14): checkboxes inside .choice labels inherited width:100%,
   min-height:44px and padding, which stretched them horizontally and collapsed the
   label span to 0 width, causing per-character vertical wrapping. The field inputs are
   direct children of .field (see scripts/build.py text_field), so > tightens the match
   back to the intended "text-style inputs" without affecting choice checkboxes/radios. */
.field > input:not([type="radio"]):not([type="checkbox"]), .field > textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.7rem 0.9rem;
  font: inherit;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid #767c71;           /* ≥ 3:1 against white (WCAG 1.4.11) */
  border-radius: var(--radius-sm);
}
.field > textarea { resize: vertical; min-height: 7.5rem; line-height: 1.5; }
.field > input:not([type="radio"]):not([type="checkbox"]):focus-visible, .field > textarea:focus-visible { outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: var(--terracotta-ink); border-width: 2px; }
.field__error {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--terracotta-ink);
}
.field__error::before { content: "! "; }
.choices { display: grid; gap: 0.5rem; }
.choices--support { grid-template-columns: 1fr; }
.field .choice {
  display: flex; align-items: center; gap: 0.65rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid #767c71;
  border-radius: var(--radius-sm);
  font-weight: 500;
  color: var(--charcoal);
  cursor: pointer;
}
.field .choice:has(input:checked) { border-color: var(--olive); border-width: 2px; background: var(--ivory); }
/* Custom-drawn selection indicator. appearance:none is required to stop iOS Safari and
   browsers that do not honor width/height on native checkboxes from rendering a much
   larger square — which was the visual regression after the support field moved from
   radios to checkboxes. The visible glyph is drawn with ::after so radios and checkboxes
   share the same overall footprint and the olive/ivory selected state is identical to
   the surrounding card borders. */
.choice input {
  -webkit-appearance: none;
          appearance: none;
  width: 1.1rem; height: 1.1rem;
  min-width: 1.1rem; min-height: 1.1rem;
  flex: none; margin: 0;
  box-sizing: border-box;
  border: 1.5px solid #767c71;
  background: var(--ivory);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}
.choice input[type="radio"] { border-radius: 50%; }
.choice input:checked { border-color: var(--olive); background: var(--olive); }
.choice input[type="radio"]:checked::after {
  content: ""; position: absolute; inset: 3px;
  background: var(--ivory); border-radius: 50%;
}
.choice input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 50%; top: 45%;
  width: 0.3rem; height: 0.55rem;
  border: solid var(--ivory); border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
.choice input:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
/* min-width:0 lets the flex child shrink and wrap at word boundaries. overflow-wrap:anywhere
   (removed) was catastrophic when the parent width collapsed — it then broke per character. */
.choice > span { min-width: 0; overflow-wrap: break-word; }
.field--choices[data-invalid="true"] .choice { border-color: var(--terracotta-ink); }
.consult-form__medical { margin: 0; }
.consult-form__submit { justify-self: start; }
.consult-form__submit[disabled] { opacity: 0.7; cursor: progress; }
.form-summary {
  padding: 1rem 1.25rem;
  border: 2px solid var(--terracotta-ink);
  border-radius: var(--radius-sm);
  background: var(--ivory);
}
.form-summary__title { margin: 0 0 0.5rem; font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--terracotta-ink); }
.form-summary__list { margin: 0; padding-left: 1.2rem; }
.form-summary__list a { font-weight: 600; }
.form-status { padding: 1rem 1.25rem; border-radius: var(--radius-sm); background: var(--ivory); border: 1px solid var(--line); }
.form-status p { margin: 0; }
.form-status .form-status__fallback { margin-top: 0.75rem; }
.form-status.is-success { border: 2px solid var(--olive); }
.form-status.is-error { border: 2px solid var(--terracotta-ink); }
.form-status .form-status__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }
.form-status .form-status__actions[hidden], .form-status .form-status__actions [hidden] { display: none; }
.form-status .btn { min-height: 2.75rem; }
.consult-form__verify { display: grid; gap: 0.5rem; }
.consult-form__verify-label { margin: 0; font-weight: 600; }
.consult-form__widget { min-height: 4.25rem; max-width: 100%; overflow: hidden; }
@media (min-width: 40em) {
  .choices--support { grid-template-columns: 1fr 1fr; }
  .choices--language { grid-template-columns: repeat(2, minmax(0, 12rem)); }
}
@media (min-width: 62em) {
  .consult-form__grid { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-6); }
  .consult-form__intro { position: sticky; top: calc(var(--header-h) + var(--space-3)); }
}

/* Footer (D5N-26: warm sand ground; olive body; terracotta-ink links and
   accents; subtle line borders. Replaces the prior dark-olive footer.) */
.site-footer {
  padding-block: var(--space-6) var(--space-4);
  background: var(--sand);
  color: var(--olive);
  font-size: 0.95rem;
}
.site-footer a { color: var(--terracotta-ink); }
.site-footer a:hover { color: var(--olive); }
.site-footer .brand,
.site-footer .brand:hover { color: var(--olive); }
.site-footer .brand__name span { color: var(--terracotta-ink); }
.footer__grid { display: grid; gap: var(--space-4); }
.footer__tag {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--terracotta-ink);
}
.footer__heading {
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.footer__list { list-style: none; display: grid; gap: 0.5rem; }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.placeholder-flag {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border: 1px dashed var(--line);
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--terracotta-ink);
}
@media (min-width: 48em) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* Decorative botanical line art */
.sprig { pointer-events: none; }
/* Approved botanical artwork: the box keeps its CSS width; height follows the artwork. */
.sprig img { display: block; width: 100%; height: auto; }

/* 7. MOTION ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  .js .reveal-delay-1 { transition-delay: 0.1s; }
  .js .reveal-delay-2 { transition-delay: 0.2s; }

  /* D5M-3: stronger photo reveal so the animation is perceptible against
     real scroll velocity. 24px translate + 4% scale-up over 1.1s with the
     soft ease curve. Lands as a gentle fade-and-rise rather than a snap.
     Applies only to reveal-tagged photo wrappers. */
  .js .reveal.about__media,
  .js .reveal.family__media,
  .js .reveal.why__media {
    transform: translateY(24px) scale(0.96);
    transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  }
  .js .reveal.about__media.is-visible,
  .js .reveal.family__media.is-visible,
  .js .reveal.why__media.is-visible {
    transform: none;
  }

  /* D5M-3: botanical sway amplitude bumped to ±2° over a 6s cycle so the
     top of the ~280px stem moves ~±10px (vs. the previous ~±4px which
     Founder reported as imperceptible). Still elegant: slow ease-in-out,
     no bouncing, no acceleration. Paused automatically by the
     prefers-reduced-motion blanket override below. */
  .why__botanical {
    transform-origin: 50% 100%;
    animation: botanical-sway 6s ease-in-out infinite;
    will-change: transform;
  }
  @keyframes botanical-sway {
    0%,100% { transform: rotate(-2deg); }
    50%     { transform: rotate(2deg); }
  }

  /* D5M-1 Phase 4C: refined primary-button interaction — a 1px lift and
     slightly deeper shadow on hover/focus for a more tactile, intentional
     feel. The underlying background-color transition from `.btn` remains. */
  .btn--primary {
    transition:
      background-color 0.25s var(--ease),
      transform 0.25s var(--ease),
      box-shadow 0.25s var(--ease);
  }
  .btn--primary:hover,
  .btn--primary:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -8px rgba(154, 84, 64, 0.55);
  }
  .btn--primary:active { transform: translateY(0); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Windows High Contrast / forced colors */
@media (forced-colors: active) {
  .btn { border-color: ButtonText; }
  .faq__item summary::after { border-color: ButtonText; }
}

/* 8. PRINT -------------------------------------------------------------- */
@media print {
  .site-header, .nav-toggle, .skip-link, .hero__media, .bilingual__words { display: none !important; }
  .section { padding-block: 1.5rem; }
  .section--olive, .site-footer { background: none; color: #000; }
  .package h2, .package__panel .check-list li, .package__aside h3 { color: #000; }
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.footer__list a { display: inline-block; padding-block: 0.3rem; }

/* ==========================================================================
   Milestone 2 additions — package phases, inner pages
   ========================================================================== */

.text-link svg { width: 1.1rem; height: 1.1rem; transition: transform 0.25s var(--ease); }
.text-link:hover svg { transform: translateX(3px); }
.story__more { margin-top: var(--space-4); }

/* Package — Before / During / After (D5N-25: light ground; terracotta
   accents; olive body; muted secondary text) */
.package__phases { display: grid; gap: var(--space-4); list-style: none; }
.package__phase h3 {
  display: flex; align-items: baseline; gap: 0.6rem;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
  font-size: 1.6rem;
  color: var(--terracotta-ink);
}
.package__phase h3 span { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.package__always {
  display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.85rem;
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--olive);
}
.package__always svg { width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; color: var(--terracotta-ink); }
.package__always small { display: block; color: var(--text-muted); font-size: 0.875rem; }
.package__footer {
  display: grid; gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.package__footer h3 { color: var(--terracotta-ink); font-size: 1.75rem; margin-bottom: var(--space-1); }
.package__footer p { color: var(--olive); margin: 0; }
.package__footer .package__note { padding-top: 0; border-top: 0; }
@media (min-width: 52em) {
  .package__phases { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
  .package__footer { grid-template-columns: 1.4fr auto; align-items: center; column-gap: var(--space-5); }
  .package__footer .package__note { grid-column: 1 / -1; }
}

/* Inner page hero */
.page-hero {
  padding-block: clamp(2rem, 1rem + 3vw, 4rem) clamp(3rem, 2rem + 3vw, 5rem);
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(220, 229, 216, 0.75), transparent 65%),
    var(--ivory);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-hero__inner { position: relative; max-width: 46rem; }
.page-hero h1 { font-size: clamp(2.5rem, 1.8rem + 3vw, 4.25rem); }
.page-hero__lead { font-size: var(--fs-lead); color: var(--text-muted); max-width: 40rem; }
/* D5M-1 Phase 5 representative improvement: page-hero decorative sprig
   now echoes the Great Vibes terracotta of the main title, at a slightly
   more visible opacity. Previous olive-at-0.3 read almost as a smudge
   beside the new signature typography. */
.page-hero__sprig { position: absolute; right: -9rem; top: -1rem; width: 7rem; color: var(--terracotta); opacity: 0.42; }
@media (max-width: 70em) { .page-hero__sprig { display: none; } }
.page-hero .hero__actions { margin-top: var(--space-4); }
/* Optional two-column page hero: used when a photographic asset sits beside
   the heading (e.g. the Services page, FAQ page). Stacks on mobile; two-column
   at >=60em so the photo's details stay readable beside the text. Aspect per
   slot via the photo-frame--{wide,portrait} modifier. */
.page-hero__grid { display: grid; gap: var(--space-4); align-items: start; }
.page-hero__media { position: relative; }
.page-hero__media .photo-frame { border-radius: var(--radius-lg); }
.page-hero__media .photo-frame--wide { aspect-ratio: 3 / 2; }
.page-hero__media .photo-frame--portrait { aspect-ratio: 3 / 4; max-width: 26rem; margin-inline: auto; }
.page-hero__closing { font-family: var(--font-display); font-style: italic; font-size: var(--fs-lead); color: var(--olive); margin: var(--space-3) 0 0; max-width: 40rem; }
@media (min-width: 60em) {
  .page-hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-5);
  }
}

/* Breadcrumb */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 var(--space-3); padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--text-muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 0.35rem; color: var(--terracotta); }
.breadcrumb a { color: var(--text-muted); display: inline-block; padding-block: 0.15rem; }
.breadcrumb a:hover { color: var(--terracotta-ink); }
.breadcrumb [aria-current="page"] { color: var(--olive); font-weight: 600; }

/* Prose & layout helpers */
.prose { max-width: 42rem; }
.prose h2 { font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.5rem); margin-top: var(--space-5); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 1.0625rem; }
.prose ul { padding-left: 1.25rem; margin-bottom: var(--space-3); }
.prose li { margin-bottom: 0.4rem; }
.prose li::marker { color: var(--terracotta); }
.split { display: grid; gap: var(--space-5); }
@media (min-width: 52em) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
  .split--wide-left { grid-template-columns: 1.35fr 1fr; }
}

/* Callout (generalised from story__training) */
.callout {
  display: flex; gap: 1rem;
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--sage);
  font-size: 0.975rem;
}
.callout svg { width: 1.5rem; height: 1.5rem; flex: none; margin-top: 0.2rem; color: var(--olive); }
.callout p { margin: 0; }
.callout p + p { margin-top: 0.5rem; }
.callout--sand { background: var(--sand); }
.callout--ivory { background: var(--ivory); border: 1px solid var(--line); }
.section--sage .callout { background: var(--ivory); }

/* Value list (About) */
.values { display: grid; gap: var(--space-3); list-style: none; }
.values li { padding: var(--space-3); border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); }
.values h3 { font-size: 1.4rem; margin-bottom: 0.35rem; }
.values p { margin: 0; color: var(--text-muted); }
@media (min-width: 48em) { .values { grid-template-columns: repeat(2, 1fr); } }

/* Services overview rows */
.service-rows { display: grid; gap: var(--space-4); list-style: none; }
.service-row {
  display: grid; gap: var(--space-3);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.service-row .card__icon { margin-bottom: 0; }
.service-row h2 { font-size: clamp(1.875rem, 1.5rem + 1.2vw, 2.375rem); margin-bottom: var(--space-1); }
.service-row p { color: var(--text-muted); }
.service-row__meta { font-size: var(--fs-sm); color: var(--text-muted); }
.service-row__meta strong { color: var(--olive); }
@media (min-width: 52em) {
  .service-row { grid-template-columns: auto 1fr auto; align-items: center; column-gap: var(--space-4); }
  .service-row .btn { white-space: nowrap; }
}

/* About-page "Meet Maribel" story-section portrait (D5H-1).
   Scoped wrapper for the Maribel portrait so it renders in its natural 4/5
   portrait aspect instead of inheriting the .hero__media landscape override
   used by the homepage hero. Border radius matches the other framed photos. */
.about__media .photo-frame--soft { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); max-width: 26rem; margin-inline: auto; }

/* About-page family story section (D5H-1).
   Full-bleed-friendly landscape family photograph above the "A Mother of Nine"
   personal-story heading + supporting paragraphs. Elegant, generous spacing;
   cream background; terracotta serif heading. On mobile the photo fills the
   container width (no horizontal scroll); on desktop it caps at 60rem so the
   composition doesn't dominate the page. */
.family__container { display: grid; gap: var(--space-4); align-items: start; }
.family__media { margin: 0; }
.family__media .photo-frame--wide { max-width: 60rem; margin-inline: auto; aspect-ratio: 1876 / 1437; border-radius: var(--radius-lg); }
.family__text { max-width: 48rem; margin-inline: auto; text-align: left; }
.family__text p { margin: 0 0 var(--space-3); font-size: var(--fs-lead); color: var(--text-muted); }
.family__text p:last-child { margin-bottom: 0; }
/* Desktop (D5H-2 Phase 2): paragraphs collapse into a narrower, left-aligned
   text column for comfortable reading measure. Mobile layout is unchanged. */
@media (min-width: 60em) {
  .family__text p { max-width: 36rem; margin-inline: auto; text-align: left; }
}

/* --- D5H-5: About page editorial refinement -----------------------------
   (a) Tighten the About-page hero→story and story→family transitions WITHOUT
       touching global section rules. Hero-bottom overrides use :has(+ #story),
       matching only pages where a page-hero is immediately followed by
       #story — an identity true only for the About page.
   (b) Lift the family heading above the photograph with elegant cursive-
       inspired italic typography, centered, terracotta, with a restrained
       hairline flourish beneath it. ---------------------------------------- */

/* (a) spacing — scoped by unique About-page ids */
.page-hero:has(+ #story) { padding-block-end: 1.5rem; }
.section#story  { padding-block: 2.5rem; }
.section#family { padding-block-start: 2.5rem; }
@media (min-width: 60em) {
  .section#story  { padding-block: 2rem; }
  .section#family { padding-block-start: 2rem; }
}

/* (b) family title + hairline flourish, above the photograph */
.family__title {
  margin: 0 auto;
  max-width: 44rem;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--terracotta-ink);
  font-size: clamp(2rem, 1.5rem + 2.1vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.family__flourish {
  display: block;
  width: clamp(3rem, 2rem + 2vw, 4.5rem);
  height: 1.5px;
  background: var(--terracotta);
  opacity: 0.55;
  margin: var(--space-2) auto var(--space-1);
  border-radius: 1px;
}

/* Homepage Philadelphia service area section (D5I-1).
   Two-column on desktop: portrait photo on the left softly fading into the
   cream background; terracotta serif heading + supporting copy on the right.
   Stacks on mobile with a subtle bottom fade. All text stays selectable and
   accessible; the fade is a CSS mask on the frame, never baked into the image.
   D5I-2 adds a mobile-only intro label above the photo and trims the top
   padding so the gap between the Services cards and the Philadelphia photo
   feels generous rather than cavernous on iPhone-class widths. */
.philly__grid { display: grid; gap: var(--space-3); align-items: center; }
.philly__media { position: relative; }
.philly__media .photo-frame--portrait {
  aspect-ratio: 3 / 4;
  max-width: 24rem;
  margin-inline: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}
.philly__intro {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.3;
  color: var(--terracotta-ink);
}
.philly__text .eyebrow { margin: 0 0 var(--space-2); }
.philly__text h2 {
  margin: 0 0 var(--space-2);
  color: var(--terracotta-ink);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  line-height: 1.15;
}
.philly__text p { margin: 0; font-size: var(--fs-lead); color: var(--text-muted); max-width: 34rem; }
/* Mobile: trim the Philadelphia section's top padding so the gap between the
   Services cards and the photo is ~88 px (Services bottom 72 + philly top 16)
   instead of the default ~144 px (72 + 72). Bottom padding is kept at the
   default so the transition into the sage Why Maribel section stays comfortable. */
@media (max-width: 59.99em) {
  .philly { padding-top: var(--space-2); }
}
@media (min-width: 60em) {
  .philly__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: var(--space-5);
  }
  .philly__media .photo-frame--portrait {
    max-width: none;
    margin-inline: 0;
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
            mask-image: linear-gradient(to right, #000 82%, transparent 100%);
  }
  /* Desktop preserves the existing composition — no mobile intro label shown. */
  .philly__intro { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* No motion is used here; this block is a placeholder for future-proofing
     if transitions are added. Current styles are motion-free. */
}

/* FAQ groups */
.faq-group + .faq-group { margin-top: var(--space-5); }
/* FAQ section heading: larger serif in terracotta-ink (the token documented as
   contrast-safe for small text on cream), on the cream page background with no
   filled card — pairs with the terracotta-filled nav buttons below. */
.faq-group__title {
  max-width: 48rem;
  margin: 0 auto var(--space-2);
  font-size: clamp(2rem, 1.7rem + 0.9vw, 2.4rem);
  color: var(--terracotta-ink);
}
.faq-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0 0 var(--space-5); padding: 0; list-style: none; }
/* Filled deep-navy pill buttons. #084A80 is the Founder-approved FAQ nav
   hue; hover steps to a darker navy (#063A64); focus-visible shows an
   offset ring in the same hue. Both white-on-navy pairs exceed WCAG AAA.
   Padding, font, min-height carry forward from the D5G-2 refinement so the
   FAQ nav reads as a primary way-finding control, not a tag chip. */
.faq-jump a {
  display: inline-block;
  padding: 0.7rem 1.3rem;
  min-height: 2.75rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: #084A80;
  color: var(--white);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.25s var(--ease);
}
.faq-jump a:hover { background: #063A64; color: var(--white); }
.faq-jump a:focus-visible { outline: 2px solid #063A64; outline-offset: 2px; }

/* Contact details list */
.details-list { display: grid; gap: var(--space-3); margin: 0; }
.details-list dt { display: flex; align-items: center; gap: 0.85rem; font-weight: 600; color: var(--olive); }
.details-list__icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--ivory); color: var(--olive); }
.details-list__icon svg { width: 1.3rem; height: 1.3rem; }
.details-list dd { margin: 0.1rem 0 0 3.6rem; color: var(--text-muted); overflow-wrap: anywhere; }

/* Closing CTA band (D5N-26: warm cream + sand surface; terracotta script
   heading; olive body copy; terracotta-fill primary button) */
.cta-band {
  display: grid; gap: var(--space-3);
  padding: clamp(2rem, 1rem + 4vw, 4rem);
  border-radius: var(--radius-lg);
  background: var(--sand);
  color: var(--olive);
}
.cta-band h2 { color: var(--terracotta-ink); margin-bottom: var(--space-1); }
.cta-band p { margin: 0; color: var(--olive); }
@media (min-width: 52em) { .cta-band { grid-template-columns: 1fr auto; align-items: center; column-gap: var(--space-5); } }

/* Related links */
.related { display: grid; gap: var(--space-3); list-style: none; }
@media (min-width: 48em) { .related { grid-template-columns: repeat(2, 1fr); } }
.related .card { height: 100%; }
.package__panel--phases { display: block; }
.site-nav__list a.is-active { color: var(--olive); box-shadow: inset 0 -1.5px 0 var(--terracotta); border-radius: 0; }
@media (max-width: 61.99em) { .site-nav__list a.is-active { box-shadow: none; color: var(--terracotta-ink); } }
.on-dark .text-link { color: var(--sand); }
.on-dark .text-link:hover { color: var(--ivory); }
ol.consult__steps { margin: 0; padding: 0; }

/* ==========================================================================
   Milestone 3 — photography frames (same geometry as the placeholders,
   so swapping in real photos causes no layout shift)
   ========================================================================== */
.photo-frame { display: block; width: 100%; overflow: hidden; background: var(--sand); }
.photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero__media .photo-frame { aspect-ratio: 5 / 4; }
@media (min-width: 52em) {
  /* Desktop restores the original uncropped baby portrait geometry. */
  .hero__media .photo-frame { aspect-ratio: 934 / 887; }
}
.photo-frame--wide { aspect-ratio: 3 / 2; margin-top: var(--space-4); border-radius: var(--radius-lg); }

/* Fix (M3): .section-head p was overriding the eyebrow label style (size/colour) */
.section-head .eyebrow { font-size: 0.8125rem; color: var(--terracotta-ink); }
.on-dark .section-head .eyebrow { color: var(--sand); }

/* ==========================================================================
   D5N-2 — Cinematic motion system (redesigned sprig + slower timings)
   ==========================================================================
   Replaces D5N-1's fast "PowerPoint" pacing and D5N-1's sparse sprig.
     • Heading sweep lengthened 1.6s → 2.8s with the "emphasized decelerate"
       curve cubic-bezier(.16, 1, .3, 1), which starts slow and ends gently.
     • Photo curtain lengthened 1.4s → 2.5s; inner scale 1.06 → 1.08 for a
       touch more lift. No zoom drama, no blur.
     • Hero stagger lengthened 0.9s → 1.2s per child; delays spread to
       0.4–2.6s so content arrives in overlapping waves rather than a snap.
     • Why-Maribel botanical: full signature redesign (stem + 4 branches +
       6 filled leaves + 3 blooming flowers with sage/terracotta/cream
       detailing) with a deliberate 4.6s growth sequence. Settles into the
       completed static composition — no ambient rotation (Founder
       feedback: avoid mechanical scaling and rotation).
     • Primary-CTA polish unchanged from D5N-1.
   Gates: `.js` + `prefers-reduced-motion: no-preference`. See
   `main.js §7` for the matching JS; see `@media (prefers-reduced-motion:
   reduce)` blanket at `styles.css §7` for the instant-complete fallback.
   Properties: opacity, transform, clip-path, stroke-dashoffset only. */

/* Botanical static styling (applies regardless of JS/motion preference, so
   the no-JS and reduced-motion views both show the fully-composed sprig).
   Stem+branches are terracotta-ink (deeper than the hero terracotta) for
   stronger contrast on the sage section background. */
.cine-botanical {
  color: var(--terracotta-ink);
  overflow: visible;             /* allow branches to extend past viewBox edges */
}
.cine-botanical .cine-stem,
.cine-botanical .cine-branch {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cine-botanical .cine-branch { stroke-width: 1.9; }
.cine-botanical .cine-leaf path {
  fill: var(--olive);
  fill-opacity: 0.88;
  stroke: var(--olive-deep);
  stroke-width: 0.7;
  stroke-opacity: 0.75;
}
.cine-botanical .cine-petals ellipse {
  fill: currentColor;
  fill-opacity: 0.92;
  stroke: var(--terracotta-ink);
  stroke-width: 0.4;
  stroke-opacity: 0.55;
}
.cine-botanical .cine-center {
  fill: var(--sand);
  stroke: var(--terracotta-ink);
  stroke-width: 0.6;
  stroke-opacity: 0.4;
}

@media (prefers-reduced-motion: no-preference) {

  /* --- 1. Heading reveal (D5N-3: filmic focus, no clip edge) --------- */
  /* Replaces the D5N-2 clip-path sweep, which read as a slide-wipe.
     The heading now softly resolves from a slight blur, a tiny upscale
     and 0 opacity — the viewer sees it "coming into focus" rather than
     being uncovered through a sharp edge. The three properties use
     different durations and different easings so they do not all
     resolve at the same instant — that asynchrony is what makes the
     reveal read as organic instead of scripted. */
  .js .cine-heading {
    opacity: 0;
    filter: blur(10px);
    transform: scale(1.03);
    transform-origin: left center;
    transition:
      opacity 1.6s cubic-bezier(0.22, 1, 0.3, 1),
      filter  2.0s cubic-bezier(0.22, 1, 0.3, 1),
      transform 2.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: filter, transform, opacity;
  }
  .js .cine-heading.is-written {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }

  /* --- 2. Photograph reveal (D5N-3: soft layered focus-pull) --------- */
  /* Same filmic pattern as the heading, more pronounced: opacity 0,
     14px gaussian blur, 5% upscale, all easing back to settled over
     1.6/2.4/2.8s. No clip-path edge, no inner <img> rescaling under
     the clip. The wrapper carries one coordinated transform. */
  .js .cine-photo {
    opacity: 0;
    filter: blur(14px);
    transform: scale(1.05);
    transform-origin: center;
    transition:
      opacity 1.6s cubic-bezier(0.22, 1, 0.3, 1),
      filter  2.4s cubic-bezier(0.22, 1, 0.3, 1),
      transform 2.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: filter, transform, opacity;
  }
  .js .cine-photo.is-revealed {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }

  /* --- 3. Overlapping staggered hero content (sustained overlap) ---- */
  /* D5N-3: 1.4s per child with 0.20s intervals so successive elements
     sit at ~50% opacity at the same moment. The composition
     continuously settles instead of arriving as discrete slides. */
  .js .cine-stagger > *:not(.cine-photo):not(.cine-heading) {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 1.4s cubic-bezier(0.22, 1, 0.3, 1),
      transform 1.4s cubic-bezier(0.22, 1, 0.3, 1);
  }
  .js .cine-stagger.is-sequenced > *:not(.cine-photo):not(.cine-heading) {
    opacity: 1;
    transform: none;
  }
  /* Positions in .hero__grid:
     1 photo · 2 eyebrow · 3 title · 4 invite · 5 CTA primary ·
     6 lead · 7 area · 8 CTA secondary.
     Primary CTA fully usable by ~2.65s; the sequence settles ~3.25s. */
  .js .cine-stagger.is-sequenced > *:nth-child(1) { transition-delay: 0s; }
  .js .cine-stagger.is-sequenced > *:nth-child(2) { transition-delay: 0.30s; }
  .js .cine-stagger.is-sequenced > *:nth-child(3) { transition-delay: 0.55s; }
  .js .cine-stagger.is-sequenced > *:nth-child(4) { transition-delay: 1.05s; }
  .js .cine-stagger.is-sequenced > *:nth-child(5) { transition-delay: 1.25s; }
  .js .cine-stagger.is-sequenced > *:nth-child(6) { transition-delay: 1.45s; }
  .js .cine-stagger.is-sequenced > *:nth-child(7) { transition-delay: 1.65s; }
  .js .cine-stagger.is-sequenced > *:nth-child(8) { transition-delay: 1.85s; }
  .js .cine-stagger.is-sequenced > .cine-photo    { transition-delay: 0s; }
  .js .cine-stagger.is-sequenced > .cine-heading  { transition-delay: 0.55s; }

  /* --- 4. Why Maribel botanical signature composition ---------------- */
  /* Four coordinated beats over ~4.6s total:
     stem draw (0–1.8s) → branches extend (1.5–2.55s) → leaves unfold
     (2.3–3.65s) → flowers bloom (3.3–4.6s). Then settles — no ambient
     rotation (Founder: avoid mechanical). Opacity lifted from the legacy
     0.55 subtle-decoration value to 0.95 so the signature reads clearly. */
  .js .cine-botanical { opacity: 1; animation: none; }
  /* Stem + branches draw via stroke-dashoffset (pathLength="100"). */
  .js .cine-botanical .cine-stem,
  .js .cine-botanical .cine-branch {
    stroke-dasharray: 100 100;
    stroke-dashoffset: 100;
  }
  .js .cine-botanical .cine-stem {
    transition: stroke-dashoffset 1.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .js .cine-botanical .cine-branch {
    transition: stroke-dashoffset 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .js .cine-botanical.is-growing .cine-stem,
  .js .cine-botanical.is-growing .cine-branch,
  .js .cine-botanical.is-resting .cine-stem,
  .js .cine-botanical.is-resting .cine-branch { stroke-dashoffset: 0; }
  .js .cine-botanical.is-growing .cine-branch--1 { transition-delay: 1.50s; }
  .js .cine-botanical.is-growing .cine-branch--2 { transition-delay: 1.65s; }
  .js .cine-botanical.is-growing .cine-branch--3 { transition-delay: 1.80s; }
  .js .cine-botanical.is-growing .cine-branch--4 { transition-delay: 1.95s; }
  /* Leaves: opacity + organic scale (0.4 → 1), NOT rotation. */
  .js .cine-botanical .cine-leaf {
    opacity: 0;
    transform: scale(0.4);
    transform-origin: center;
    transform-box: fill-box;
    transition:
      opacity 0.6s ease-out,
      transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .js .cine-botanical.is-growing .cine-leaf,
  .js .cine-botanical.is-resting .cine-leaf { opacity: 1; transform: scale(1); }
  .js .cine-botanical.is-growing .cine-leaf--1 { transition-delay: 2.30s; }
  .js .cine-botanical.is-growing .cine-leaf--2 { transition-delay: 2.45s; }
  .js .cine-botanical.is-growing .cine-leaf--3 { transition-delay: 2.60s; }
  .js .cine-botanical.is-growing .cine-leaf--4 { transition-delay: 2.75s; }
  .js .cine-botanical.is-growing .cine-leaf--5 { transition-delay: 2.90s; }
  .js .cine-botanical.is-growing .cine-leaf--6 { transition-delay: 3.05s; }
  /* Flowers: soft bloom (opacity + gentle scale), no springy overshoot
     (Founder: avoid bounce). Center/petals bloom together. */
  .js .cine-botanical .cine-flower {
    opacity: 0;
    transform: scale(0.3);
    transform-origin: center;
    transform-box: fill-box;
    transition:
      opacity 0.55s ease-out,
      transform 0.9s cubic-bezier(0.22, 0.75, 0.3, 1);
  }
  .js .cine-botanical.is-growing .cine-flower,
  .js .cine-botanical.is-resting .cine-flower { opacity: 1; transform: scale(1); }
  .js .cine-botanical.is-growing .cine-flower--bottom { transition-delay: 3.30s; }
  .js .cine-botanical.is-growing .cine-flower--middle { transition-delay: 3.55s; }
  .js .cine-botanical.is-growing .cine-flower--top    { transition-delay: 3.80s; }

  /* --- 5. Editorial section sequence (About family) ------------------- */
  .js .cine-section .cine-flourish {
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .js .cine-section.is-sequenced .cine-flourish {
    transform: scaleX(1);
    transition-delay: 0.40s;
  }
  .js .cine-section .cine-photo { transition-delay: 0.50s; }

  /* --- 6. Consultation-button polish (unchanged from D5N-1) ---------- */
  .js .btn--primary {
    position: relative;
    isolation: isolate;
    transition:
      background-color 0.3s var(--ease),
      color 0.3s var(--ease),
      border-color 0.3s var(--ease),
      transform 0.3s var(--ease),
      box-shadow 0.3s var(--ease);
  }
  .js .btn--primary::before {
    content: "";
    position: absolute;
    inset: -30%;
    background: radial-gradient(circle at center,
      rgba(240, 177, 148, 0.55) 0%,
      rgba(240, 177, 148, 0) 60%);
    opacity: 0;
    transform: scale(0.65);
    transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
  }
  .js .btn--primary:hover,
  .js .btn--primary:focus-visible {
    transform: translateY(-2px);
    box-shadow:
      0 8px 24px -10px rgba(154, 84, 64, 0.60),
      0 2px 6px -2px rgba(154, 84, 64, 0.35);
  }
  .js .btn--primary:hover::before,
  .js .btn--primary:focus-visible::before { opacity: 1; transform: scale(1); }
  .js .btn--primary:active {
    transform: translateY(0) scale(0.985);
    transition-duration: 0.1s;
    box-shadow: 0 2px 4px -2px rgba(154, 84, 64, 0.40);
  }
  .js .btn--primary svg { transition: transform 0.3s var(--ease); }
  .js .btn--primary:hover svg,
  .js .btn--primary:focus-visible svg { transform: translateX(4px); }
}

/* ==========================================================================
   D5N-4 — "The Living Portrait" prototype (isolated route /d5n4/)
   ==========================================================================
   Scoped under [data-d5n4] on <body>, so these rules only apply on the
   D5N-4 prototype pages (d5n4/index.html and d5n4/es/index.html). The
   production D5N-3 home page at / is untouched.

   The mechanism — continuous ambient breath on the photograph plus
   scroll-driven parallax depth — is fundamentally different from the
   opacity/filter/scale entrance pattern used in D5N-1/2/3. See
   scratchpad/D5N-4-creative-direction.md for the full concept doc.
*/

/* --- 1. RESET D5N-3 entrance states on the prototype --------------- */
/* The D5N-3 `.js .cine-*` rules still match on the prototype page; we
   override them so the hero paints fully composed on first paint
   (no blur, no opacity:0, no clip). */
[data-d5n4] .cine-heading,
[data-d5n4] .cine-photo {
  opacity: 1 !important;
  filter: none !important;
  will-change: auto;
}
[data-d5n4] .cine-heading {
  transform: none;
}
[data-d5n4] .cine-stagger > *:not(.cine-photo):not(.cine-heading) {
  opacity: 1 !important;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {

  /* --- 2. "Micro-settle": present-not-hidden entrance -------------- */
  /* Content is visible on first paint. These micro-animations add a
     1–2 px "found in place" settling, 0.5 opacity to 1 so the viewer
     senses a composition coming into being rather than a slide-in. */
  [data-d5n4] .hero__title {
    animation: d5n4-settle-title 1.6s cubic-bezier(0.22, 1, 0.3, 1) both;
  }
  [data-d5n4] .hero__eyebrow,
  [data-d5n4] .hero__invite,
  [data-d5n4] .hero__cta--primary,
  [data-d5n4] .hero__lead,
  [data-d5n4] .hero__area,
  [data-d5n4] .hero__cta--secondary {
    animation: d5n4-settle-content 1.1s cubic-bezier(0.22, 1, 0.3, 1) both;
  }
  [data-d5n4] .hero__eyebrow      { animation-delay: 0.10s; }
  [data-d5n4] .hero__invite       { animation-delay: 0.45s; }
  [data-d5n4] .hero__cta--primary { animation-delay: 0.60s; }
  [data-d5n4] .hero__lead         { animation-delay: 0.75s; }
  [data-d5n4] .hero__area         { animation-delay: 0.90s; }
  [data-d5n4] .hero__cta--secondary { animation-delay: 1.05s; }
  @keyframes d5n4-settle-title {
    from { transform: translateY(6px); opacity: 0.6; }
    to   { transform: translateY(0); opacity: 1; }
  }
  @keyframes d5n4-settle-content {
    from { transform: translateY(3px); opacity: 0.5; }
    to   { transform: translateY(0); opacity: 1; }
  }

  /* --- 3. KEN-BURNS BREATH on the photograph ---------------------- */
  /* Continuous 12 s cycle. Scale ±1.5%, drift ±3 px. The INNER
     <picture>/<img> carries this animation so the OUTER .cine-photo
     is free to carry the scroll-parallax transform at the same time
     (CSS transforms don't compose across the same element). */
  [data-d5n4] .cine-photo img,
  [data-d5n4] .cine-photo picture {
    animation: d5n4-ken-burns 12s ease-in-out infinite;
    transform-origin: 50% 55%;
    will-change: transform;
  }
  @keyframes d5n4-ken-burns {
    0%, 100% { transform: scale(1) translateY(0); }
    50%      { transform: scale(1.015) translateY(-3px); }
  }
  /* Visibility-API pause (set from JS when the tab is hidden). */
  body.d5n4-paused .cine-photo img,
  body.d5n4-paused .cine-photo picture { animation-play-state: paused; }

  /* --- 4. SCROLL-DRIVEN PARALLAX ---------------------------------- */
  /* --scroll-y is updated by main.js on every scroll frame (rAF).
     The photograph lags behind at 0.85× (−15% displacement), the
     trailing lead/area text leads at 1.05×. Layers thus physically
     separate as the user scrolls — spatial depth, not reveal.
     The photograph is handled via its wrapping .cine-photo (so it
     composes cleanly with the inner <img> Ken-Burns). */
  [data-d5n4] .cine-photo {
    transform: translate3d(0, calc(var(--scroll-y, 0px) * -0.15), 0);
    will-change: transform;
  }
  [data-d5n4] .hero__lead,
  [data-d5n4] .hero__area {
    transform: translate3d(0, calc(var(--scroll-y, 0px) * 0.05), 0);
  }

  /* --- 5. "CAMERA PULL-BACK" at the hero→story transition --------- */
  /* --story-in is 1 while the Maribel's Story section is still below
     the viewport, falls to 0 as its top reaches the top of the view.
     The section enters shifted down by 40 × --story-in px, so it
     "rises to meet the camera" as the visitor scrolls. */
  [data-d5n4] #about {
    transform: translate3d(0, calc(var(--story-in, 0) * 40px), 0);
    will-change: transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* No ambient motion, no parallax. Hero remains fully visible. */
  [data-d5n4] .cine-photo,
  [data-d5n4] .cine-photo img,
  [data-d5n4] .cine-photo picture,
  [data-d5n4] #about,
  [data-d5n4] .hero__lead,
  [data-d5n4] .hero__area,
  [data-d5n4] .hero__title,
  [data-d5n4] .hero__eyebrow,
  [data-d5n4] .hero__invite,
  [data-d5n4] .hero__cta--primary,
  [data-d5n4] .hero__cta--secondary {
    animation: none !important;
    transform: none !important;
  }
}