@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
/* ========================================================================
   BABY ANGELS — STYLESHEET (shared across all pages)
   Premium Newborn Care Sanctuary · Kuala Lumpur

   Typography:
     · Playfair Display — h1 / h2 / display headlines (solid W, refined)
     · Inter             — body, eyebrows, nav, buttons, all UI
   ======================================================================== */

/* ------------------------------------------------------------------------
   DESIGN TOKENS · Colors, type, rhythm, motion
   ------------------------------------------------------------------------ */
:root {
  /* —— Palette · soft baby pink primary (tuned to match app aesthetic) —— */
  --ivory: #FBF7F2;
  --ivory-warm: #F9F0EA;
  --blush-whisper: #FCEEF1;
  --blush-soft: #F8DCE5;
  --blush: #F4A5B8;
  --blush-deep: #E886A0;
  --champagne-light: #FCE4EB;
  --champagne: #F4C2D0;
  --gold: #E89BAF;             /* (var name kept for backwards compatibility — now soft rose) */
  --gold-deep: #D47896;        /* (now deep rose, used for eyebrows + em highlights) */
  --powder-blue: #DCE5EF;
  --powder-blue-deep: #BBD4F0;
  --cloud-blue: #BBC8E5;          /* mid blue for icons + accents */
  --cloud-blue-deep: #8FA3C9;     /* deeper blue for eyebrows + emphasis */
  --peach: #FFD4B8;
  --peach-soft: #FFE5D6;
  --rose-gold: #E5A593;
  --halo-gold: #C9A55C;           /* warm ceremonial gold — used only for the nav halo motif */
  --ink: #2A2438;
  --ink-soft: #4A4258;
  --ink-mute: #7A7388;

  /* —— Gradients & Backgrounds —— */
  --grad-gold: linear-gradient(135deg, #F8C2D1, #E886A0);   /* primary pink button gradient */
  --grad-blue: linear-gradient(135deg, #BBC8E5, #8FA3C9);   /* blue accent gradient (gender-neutral mix) */
  --grad-blush-soft: linear-gradient(135deg, #F8DCE5, #FFE5D6);
  --grad-card-warm: linear-gradient(180deg, var(--blush-whisper) 0%, var(--ivory) 100%);
  --grad-card-dreamy:
    radial-gradient(ellipse 65% 60% at 100% 0%, rgba(244, 165, 184, 0.32), transparent 65%),
    radial-gradient(ellipse 55% 60% at 0% 100%, rgba(187, 200, 229, 0.32), transparent 65%),
    radial-gradient(ellipse 45% 50% at 50% 50%, rgba(255, 240, 230, 0.35), transparent 70%),
    var(--ivory-warm);
  --bg-hero:
    /* DIAGONAL DREAM (redesigned 07 Jul 2026) — dreamy blue breathes in from
       the upper-left (sitting BEHIND the pink headline for contrast), and
       pink flows in from the lower-right; the two mix evenly through the
       centre along a diagonal axis. Large soft ellipses (75%) make the
       mixture gradual and even rather than two separate spots.
       Top and bottom fades keep every banner edge seamless. */
    linear-gradient(180deg,
      var(--ivory) 0%,
      rgba(251, 247, 242, 0) 20%,
      rgba(251, 247, 242, 0) 58%,
      var(--ivory) 92%),
    radial-gradient(ellipse 75% 115% at 18% 25%, #DDE6F2 0%, rgba(251, 247, 242, 0) 60%),
    radial-gradient(ellipse 75% 115% at 82% 75%, #FADEE7 0%, rgba(251, 247, 242, 0) 60%),
    var(--ivory);
  --bg-blend:
    radial-gradient(ellipse 70% 50% at 85% 15%, rgba(244, 165, 184, 0.18), transparent 65%),
    radial-gradient(ellipse 60% 50% at 15% 85%, rgba(187, 200, 229, 0.22), transparent 65%),
    radial-gradient(ellipse 50% 40% at 50% 110%, rgba(255, 212, 184, 0.15), transparent 60%),
    var(--ivory);
  --bg-blend-alt:
    radial-gradient(ellipse 70% 50% at 15% 20%, rgba(187, 200, 229, 0.24), transparent 65%),
    radial-gradient(ellipse 60% 50% at 85% 80%, rgba(244, 165, 184, 0.20), transparent 65%),
    radial-gradient(ellipse 50% 40% at 50% -10%, rgba(255, 212, 184, 0.14), transparent 60%),
    var(--ivory);
  --bg-cribs:
    radial-gradient(ellipse 70% 50% at 80% 20%, rgba(244, 165, 184, 0.18), transparent 65%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(187, 200, 229, 0.22), transparent 65%),
    var(--ivory);
  --bg-partnership:
    radial-gradient(ellipse 60% 40% at 20% 15%, rgba(187, 200, 229, 0.22), transparent 65%),
    radial-gradient(ellipse 70% 50% at 80% 70%, rgba(244, 165, 184, 0.20), transparent 65%),
    radial-gradient(ellipse 50% 40% at 50% 110%, rgba(255, 212, 184, 0.14), transparent 60%),
    var(--ivory);

  /* —— Typography —— */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', 'Times New Roman', serif;

  /* —— Rhythm —— */
  --section-y: clamp(40px, 5.5vh, 68px);
  --gutter: clamp(20px, 5vw, 80px);
  /* 1320px was set for a 1440 laptop. On a wider desktop it left ~200px of
     dead margin either side and the whole page read as a narrow column in the
     middle of the screen (25 Aug 2026, Winnie: "the page looks smaller than it
     is, leaving a lot of empty space"). It grows with the viewport above
     1500px and still stops short of the edges. */
  --max-width: 1320px;
  /* the bar is a logo row plus a row of bubbles; the reserve tracks the
     largest bubble so the page never starts underneath it */
  /* THE BAR'S OWN SIZE, IN ONE PLACE (25 Aug 2026)
     --nav-bubble is the diameter of every ball in the desktop menu.
     --nav-height is what the page reserves for the fixed bar, and it is now
     DERIVED from that diameter: the balls ride a wave 1.87 amplitudes deep
     (0.87 above the line, 1.00 below) at 0.15 of a diameter each, so the row
     they need is 1.29 diameters tall, plus the logo row and the row padding.
     It used to be a fixed number typed by hand, and every time the foam grew
     the bar quietly swallowed another slice of the page under it — the top of
     each banner was being hidden behind the bar, which is what made the
     banner's top edge read as a hard line. */
  /* 25 Aug 2026, Winnie: "please enlarge the bubble to fit the screen of the
     desktop view on home page." The foam is the brand, so at the top of the
     page it is given the room — and the height that costs is bought back by a
     smaller mark, tighter row padding, a shallower wave, and by the fold,
     which shrinks the ball again the moment the reader scrolls. */
  /* LOCKED, NOT FLUID (25 Aug 2026, Winnie: "please match this menu glass
     bubble size same like the other pages as well as the logo.")

     The middle value used to be 7.7vw, which only reached the 128px cap at a
     1662px-wide window. Winnie's screenshots came from windows of 2518, 2551,
     2553 and 2559 device pixels — genuinely different widths — so any page
     opened in a slightly narrower window drew a slightly smaller ball. The
     coefficient is steep enough now that the cap is reached at 1348px, i.e.
     every ordinary desktop window lands on exactly 128px and every page
     matches. Below that it still scales down rather than colliding. */
  --nav-bubble: clamp(78px, 7.8vw, 108px);
  /* 25 Aug 2026, Winnie: "enlarge the logo before scrolling as well. do not
     shrink my logo." Back to its full 130px cap at the top of the page. The
     artwork's natural height is ~114px, so --nav-logo is the CAP and the
     height sum below uses min(cap, 116px) — using 130 there would reserve
     16px of air that nothing occupies. The mark still steps down when the bar
     tightens on scroll, and again when it folds. */
  /* 25 Aug 2026, Winnie: "can you make this logo slightly match the size of the
     menu glass bubble? apply this to the whole webpage." It was a flat 78px
     while the balls grew with the window — at 1440 they were 91 and 117 and the
     mark looked like an afterthought beside them. Deriving it from --nav-bubble
     locks the relationship at every width: the logo lands between the small ball
     and the big one and stays there. The floor keeps it from collapsing on a
     narrow laptop, and --nav-height below already reads this token, so the bar
     reserves the right room on its own. */
  --nav-logo:   max(78px, calc(var(--nav-bubble) * 0.92));
  --nav-fade: clamp(30px, 3.2vw, 52px);   /* depth of the strip under the bar */
  /* 10px logo-row padding + the mark + the link row's padding + the wave block
     (a ball plus 1.87 amplitudes at 0.13 of a ball = 1.2431 diameters), and
     4px of slack. Keep this in step with anything above it that changes. */
  --nav-height: calc(clamp(8px, 1.0vw, 14px) + var(--nav-logo)
                     + clamp(10px, 1.2vw, 18px) + clamp(12px, 1.4vw, 20px)
                     + var(--nav-bubble) * 1.40 + 4px);
  /* 1.40, not 1.2057: the wave is a strict zigzag now, so the balls occupy a
     full amplitude ABOVE the line and a full one below (1 + 2 x 0.20), where
     the old sine only reached 0.87 above. Get this wrong and the bar
     under-reserves its own height and sits on top of the page. */

  /* —— Motion —— */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------------------
   RESET & BASE
   ------------------------------------------------------------------------ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-weight: 400;
  /* Body kept clean ivory (08 Jul 2026): the previous nav-height "crossover
     bridge" background (pink→blue on the left half, blue→pink on the right)
     was creating a thin blue-pink band that peeked out just under the fixed
     nav on some viewports. The .page-hero now carries a full diagonal
     dream-blend on its own, so the body no longer needs to bridge anything —
     removing the bridge eliminates the seam entirely. */
  background-color: var(--ivory);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  padding-top: var(--nav-height);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

img { max-width: 100%; height: auto; display: block; }

/* ------------------------------------------------------------------------
   TYPOGRAPHY UTILITIES
   ------------------------------------------------------------------------ */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.display em {
  font-style: normal;
  color: var(--gold-deep);
}

.hero-title em {
  display: block;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin-top: 0.04em;
}

.eyebrow {
  font-family: var(--font);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cloud-blue-deep);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--cloud-blue-deep);
}

.lede {
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}

.body-text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  font-weight: 400;
}

.smallcaps {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 12px;
}

/* ------------------------------------------------------------------------
   LAYOUT PRIMITIVES
   ------------------------------------------------------------------------ */
.section {
  padding: var(--section-y) var(--gutter);
  position: relative;
}
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
}

/* ------------------------------------------------------------------------
   NAVIGATION · Two-row sticky · Logo top, links below
   ------------------------------------------------------------------------ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* Nav cleared to plain ivory (08 Jul 2026): the previous pink-left /
     blue-right blushes were removed at Winnie's direction. A dedicated
     top-of-page decoration will replace this ambient colour treatment. */
  background: var(--ivory);
  border-bottom: none;
  transition: background 0.35s var(--ease);
}
.nav.scrolled {
  background: var(--ivory);
}

/* THE BAR HAS NO BOTTOM EDGE (25 Aug 2026, Winnie: "i need fade fade effect on
   the top and bottom line of the banner" / "what's with the breaking line
   here?")

   The bar was a solid ivory rectangle, so wherever it ended it ruled a line
   straight across the page — and once it folds and the page runs underneath,
   that line cut headlines in half.

   The feather is a strip hung BELOW the bar rather than a fade inside it. Two
   reasons that matters: the bar itself stays fully opaque behind the foam (a
   fade inside the box was starting to eat the lowest bubble), and the strip is
   absolutely positioned outside the box, so it costs the bar no height and
   --nav-height stays honest. Eased, not linear — a straight ramp shows a knee
   of its own. */
.nav::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: var(--nav-fade);
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--ivory)               0%,
    rgba(251, 247, 242, 0.90) 18%,
    rgba(251, 247, 242, 0.70) 36%,
    rgba(251, 247, 242, 0.46) 55%,
    rgba(251, 247, 242, 0.24) 73%,
    rgba(251, 247, 242, 0.08) 88%,
    rgba(251, 247, 242, 0)   100%);
}

/* ==========================================================================
   TOP-OF-PAGE DECORATION (08 Jul 2026) — Concept C only (sparkles)
   The halo arc (Concept B) was removed at Winnie's direction after review.
   Only the ambient sparkle constellation remains:

     .nav::after   →  SPARKLE CONSTELLATION — ten tiny four-point sparkles
                      drifting across the nav (mixed rose + cloud-blue,
                      mixed sizes), the same twinkle motif as the About
                      page tagline flourishes. Inline SVG data URIs so
                      no image files are required.

   Fades gracefully in .nav.scrolled state, adapts for mobile
   (--nav-height 112px), and respects prefers-reduced-motion.
   ========================================================================== */

/* SPARKLE CONSTELLATION — 10 ambient 4-point stars scattered across nav.
   Positions cluster on the left and right of the centered logo, avoiding
   the logo's optical footprint (roughly 40–60% x). Sizes mix from 6-12px
   for depth. Colour alternates between rose (--gold-deep) and cloud-blue
   (--cloud-blue-deep). Whole layer twinkles as one via opacity animation. */
.nav::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Left cluster ------------------------------------------------------- */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 0L5.7 4.3L10 5L5.7 5.7L5 10L4.3 5.7L0 5L4.3 4.3z' fill='%23D47896'/></svg>")   5% 18% / 13px 13px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 0L5.7 4.3L10 5L5.7 5.7L5 10L4.3 5.7L0 5L4.3 4.3z' fill='%238FA3C9'/></svg>")  13% 55% / 10px 10px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 0L5.7 4.3L10 5L5.7 5.7L5 10L4.3 5.7L0 5L4.3 4.3z' fill='%23D47896'/></svg>")  20% 28% /  8px  8px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 0L5.7 4.3L10 5L5.7 5.7L5 10L4.3 5.7L0 5L4.3 4.3z' fill='%238FA3C9'/></svg>")  27% 62% / 15px 15px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 0L5.7 4.3L10 5L5.7 5.7L5 10L4.3 5.7L0 5L4.3 4.3z' fill='%23D47896'/></svg>")  32% 18% /  9px  9px no-repeat,
    /* Right cluster (mirrored) ------------------------------------------ */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 0L5.7 4.3L10 5L5.7 5.7L5 10L4.3 5.7L0 5L4.3 4.3z' fill='%238FA3C9'/></svg>")  68% 22% /  9px  9px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 0L5.7 4.3L10 5L5.7 5.7L5 10L4.3 5.7L0 5L4.3 4.3z' fill='%23D47896'/></svg>")  73% 62% / 15px 15px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 0L5.7 4.3L10 5L5.7 5.7L5 10L4.3 5.7L0 5L4.3 4.3z' fill='%238FA3C9'/></svg>")  80% 28% /  8px  8px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 0L5.7 4.3L10 5L5.7 5.7L5 10L4.3 5.7L0 5L4.3 4.3z' fill='%23D47896'/></svg>")  87% 55% / 10px 10px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 0L5.7 4.3L10 5L5.7 5.7L5 10L4.3 5.7L0 5L4.3 4.3z' fill='%238FA3C9'/></svg>")  95% 18% / 13px 13px no-repeat;
  opacity: 0.85;
  animation: navTwinkle 5s ease-in-out infinite;
  transition: opacity 0.4s var(--ease);
  z-index: 0;
}

@keyframes navTwinkle {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1;    }
}

/* Scrolled: constellation dims, so the compact nav
   stays focused and calm during scroll. */
.nav.scrolled::after {
  opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
  .nav::after { animation: none; opacity: 0.6; }
}

.nav-logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 25 Aug 2026, Winnie: "make it spacious. the logo and the glass menu on top
     must looks spacious." */
  padding: clamp(8px, 1.0vw, 14px) var(--gutter) 0;
  transition: padding 0.4s var(--ease);
  position: relative;
}
.nav.scrolled .nav-logo-row {
  padding: 6px var(--gutter) 0;
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.4s var(--ease);
}
.nav-logo img {
  /* 25 Aug 2026, Winnie: "it takes almost half the page of the desktop
     screen". The mark was rendering at ~114px on top of a 155px ball row, and
     the two together ate 40% of a laptop window. It is a header, not a splash
     screen — the mark steps down and the foam comes down with it. */
  max-height: var(--nav-logo);
  width: auto;
  display: block;
  transition: max-height 0.4s var(--ease);
}
.nav.scrolled .nav-logo img {
  max-height: calc(var(--nav-logo) * 0.76);
}

.nav-logo-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1;
}
.nav-logo-fallback .lg-name {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  color: var(--gold-deep);
  letter-spacing: 0.02em;
  line-height: 1;
  transition: font-size 0.4s var(--ease);
}
.nav.scrolled .nav-logo-fallback .lg-name {
  font-size: 22px;
}
.nav-logo-fallback .lg-tag {
  font-family: var(--font);
  font-size: 9.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 7px;
  font-weight: 500;
  transition: opacity 0.4s var(--ease);
}
.nav.scrolled .nav-logo-fallback .lg-tag {
  opacity: 0.7;
  font-size: 8.5px;
  margin-top: 5px;
}

.nav-links-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px var(--gutter) 16px;
  position: relative;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  flex-wrap: nowrap;
  width: 100%;
  /* was 1280px — the foam sat in a narrow column with wide empty shoulders */
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
}

.nav-links a {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.3s var(--ease);
  position: relative;
  white-space: nowrap;
  padding: 4px 0;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active {
  font-weight: 700;
  /* Dreamy blue-pink blend on the selected link (gradient text). */
  background: linear-gradient(90deg, #D47896 0%, #C08FB4 45%, #8FA3C9 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.nav-links a.active::after,
.nav-links a:hover::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 18px;
  height: 1px;
  background: var(--gold);
  transform: translateX(-50%);
}
.nav-links a.active::after { height: 2px; }

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
}
.menu-toggle span {
  width: 24px;
  height: 1px;
  /* Dreamy pink-to-blue blend on the hamburger lines. */
  background: linear-gradient(90deg, #D47896 0%, #8FA3C9 100%);
  transition: all 0.3s var(--ease);
}

.mobile-drawer {
  position: fixed;
  /* Drawer covers the WHOLE viewport (top: 0 rather than top: var(--nav-height))
     so page content behind can never peek through, even when the nav has
     shrunk on scroll. The nav has z-index 100 vs drawer 99, so the
     hamburger button and logo stay visible on top of the drawer's ivory
     background. Content inside the drawer is padded down to start below
     where the nav sits. (10 Jul 2026 bug fix — previously the drawer's
     top used the un-scrolled nav-height, leaving a visible gap when the
     nav collapsed.) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--ivory);
  border-bottom: 1px solid rgba(232, 155, 175, 0.2);
  transform: translateY(-110%);
  transition: transform 0.4s var(--ease);
  z-index: 99;
  padding: calc(var(--nav-height) + 24px) var(--gutter) 32px;
}
.mobile-drawer.open { transform: translateY(0); }
.mobile-drawer ul { list-style: none; }
.mobile-drawer li { border-bottom: 1px solid rgba(232, 155, 175, 0.15); }
.mobile-drawer li:last-child { border-bottom: none; }
.mobile-drawer a {
  display: block;
  padding: 16px 0;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.mobile-drawer a.active {
  font-weight: 700;
  /* Shrink the box to the text width so the gradient spans the WORD, not the
     full-width row (otherwise a short word like "HOME" only shows the pink end). */
  display: inline-block;
  /* Dreamy blue-pink blend on the selected link (gradient text). */
  background: linear-gradient(90deg, #D47896 0%, #B98FBE 50%, #8FA3C9 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* ------------------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 100px;
  transition: all 0.4s var(--ease);
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.btn-gold {
  background: var(--grad-gold);
  color: var(--ivory);
  box-shadow: 0 8px 20px rgba(232, 155, 175, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-gold:hover {
  box-shadow: 0 12px 32px rgba(232, 155, 175, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

/* Dreamy blue-pink CTA (10 Jul 2026) — carries the site's signature
   rose → soft mauve → cloud-blue blend (same gradient as the active
   nav link). Used on partners.html's "Get In Touch" invitation button,
   and available for any future dreamy primary CTA. Padded, radiused,
   and shadow-treated to match .btn-gold's premium presence. */
.btn-primary {
  background: linear-gradient(90deg, #D47896 0%, #C08FB4 48%, #8FA3C9 100%);
  color: var(--ivory);
  box-shadow:
    0 8px 20px rgba(180, 130, 170, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.btn-primary:hover {
  box-shadow:
    0 12px 32px rgba(180, 130, 170, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-outline:hover,
.btn-outline:active,
.btn-outline:focus,
.btn-outline:focus-visible {
  /* Fills dark purple on desktop hover AND on mobile tap/press (active/focus). */
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
}
.btn .arrow { transition: transform 0.4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------ */
.hero {
  min-height: 0;
  display: flex;
  align-items: center;
  position: relative;
  padding: 40px var(--gutter) 72px;
  /* HOME PAGE ONLY (08 Jul 2026 rev, "quadruple ink drop" edition):
     Four drops of ink placed around the wording, alternating clockwise
     from top-left:

        NW · PINK    NE · BLUE
                  ✧
        SW · BLUE    SE · PINK

     Each drop diffuses softly outward with an aggressive falloff, so they
     bloom into their own territory but meet in the centre — where the
     text sits — as a rich mauve mix. Reads like four ink drops landing on
     watercolour paper and blending at the wet edges. The right column
     (photo) stays clean ivory: every drop's opacity is already at zero
     well before it reaches the image area.
     The .hero::after shine highlight (at the mix centre) remains,
     giving the whole bloom a "wet ink catching light" glow. */
  background:
    linear-gradient(180deg,
      rgba(251, 247, 242, 0) 0%,
      rgba(251, 247, 242, 0) 72%,
      var(--ivory) 96%),
    /* NW · pink drop */
    radial-gradient(circle 330px at 17% 33%,
      rgba(244, 194, 214, 0.46) 0%,
      rgba(244, 194, 214, 0.22) 32%,
      rgba(244, 194, 214, 0) 72%),
    /* NE · blue drop */
    radial-gradient(circle 330px at 34% 33%,
      rgba(190, 208, 236, 0.46) 0%,
      rgba(190, 208, 236, 0.22) 32%,
      rgba(190, 208, 236, 0) 72%),
    /* SE · pink drop */
    radial-gradient(circle 330px at 34% 65%,
      rgba(244, 194, 214, 0.46) 0%,
      rgba(244, 194, 214, 0.22) 32%,
      rgba(244, 194, 214, 0) 72%),
    /* SW · blue drop */
    radial-gradient(circle 330px at 17% 65%,
      rgba(190, 208, 236, 0.46) 0%,
      rgba(190, 208, 236, 0.22) 32%,
      rgba(190, 208, 236, 0) 72%),
    /* Central mauve mix — where the four drops meet and blend */
    radial-gradient(circle 260px at 26% 49%,
      rgba(224, 208, 232, 0.30) 0%,
      rgba(224, 208, 232, 0) 76%),
    var(--ivory);
  overflow: hidden;
}

/* SPARKLE DOTS — ambient twinkling accents scattered across the hero.
   Six radial-gradient dots (four warm gold, two ivory-white) pulsing
   softly in unison. Creates a "champagne mist" premium feel. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 3px at 14% 22%, rgba(255, 253, 245, 0.95) 0%, rgba(255, 253, 245, 0) 100%),
    radial-gradient(circle 2px at 44% 14%, rgba(184, 149, 106, 0.65) 0%, rgba(184, 149, 106, 0) 100%),
    radial-gradient(circle 4px at 19% 68%, rgba(184, 149, 106, 0.55) 0%, rgba(184, 149, 106, 0) 100%),
    radial-gradient(circle 2.5px at 52% 82%, rgba(255, 253, 245, 0.85) 0%, rgba(255, 253, 245, 0) 100%),
    radial-gradient(circle 3px at 68% 24%, rgba(184, 149, 106, 0.55) 0%, rgba(184, 149, 106, 0) 100%),
    radial-gradient(circle 2px at 38% 46%, rgba(184, 149, 106, 0.60) 0%, rgba(184, 149, 106, 0) 100%);
  pointer-events: none;
  z-index: 1;
  animation: heroSparkle 4.5s ease-in-out infinite;
}

@keyframes heroSparkle {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; opacity: 0.75; }
}

/* SHINE — soft pulsing highlight at the ink drop's center, creating the
   luminous "wet ink catching light" effect on top of the blend */
.hero::after {
  content: '';
  position: absolute;
  left: 28%;
  top: 52%;
  width: 280px;
  height: 280px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255, 253, 248, 0.55) 0%,
    rgba(255, 253, 248, 0.22) 35%,
    rgba(255, 253, 248, 0) 70%);
  border-radius: 50%;
  filter: blur(24px);
  pointer-events: none;
  z-index: 0;
  animation: inkShine 5.5s ease-in-out infinite;
}

@keyframes inkShine {
  0%, 100% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(0.95);
  }
  50% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; opacity: 0.7; }
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: stretch;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}
.hero-content { position: relative; z-index: 2; }
.hero-content .eyebrow { margin-bottom: 18px; }
.hero-title {
  font-size: clamp(40px, 5.4vw, 72px);
  margin-bottom: 22px;
  letter-spacing: -0.015em;
}
.hero-lede { max-width: 480px; margin-bottom: 32px; }
.hero-cta-group { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-visual {
  position: relative;
  height: 100%;
  min-height: 480px;
  border-radius: 4px;
  overflow: hidden;
  /* Home-page image frame (08 Jul 2026):
     Removed the pink blush frame background and all colour glows/shades
     (was: grad-blush-soft frame + gold aurora bleeds + pink drop shadow).
     The picture now sits cleanly on the ivory background with only a
     whisper of neutral drop shadow to preserve depth against the ink
     drop's ambient colour — no pink, no gold, no coloured halo. */
  background: transparent;
  box-shadow: 0 22px 44px -24px rgba(42, 36, 56, 0.14);
}
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.hero-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(42, 36, 56, 0.18));
  pointer-events: none;
}
.hero-halo {
  position: absolute;
  width: 380px;
  height: 380px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0.4;
  top: -80px;
  right: -100px;
  z-index: 1;
}
.hero-halo::before {
  content: '';
  position: absolute;
  inset: 30px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0.5;
}
.hero-caption {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  color: var(--ivory);
  z-index: 2;
}
.hero-caption .smallcaps { font-size: 12px; letter-spacing: 0.22em; }

.scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 2;
}
.scroll-cue::after {
  content: '';
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: cueDrop 2.4s ease-in-out infinite;
}
@keyframes cueDrop {
  0%, 100% { transform: scaleY(1); transform-origin: top; opacity: 0.4; }
  50% { transform: scaleY(0.6); transform-origin: top; opacity: 1; }
}

/* ------------------------------------------------------------------------
   PAGE HERO (for sub-pages: about, cribs, etc.)
   ------------------------------------------------------------------------ */
.page-hero {
  /* Equal top & bottom so the gap above the first line matches the gap below
     the last line (symmetric banner) on every sub-page. */
  padding: 48px var(--gutter);
  /* Sub-page banner (08 Jul 2026, DREAMY DIAGONAL CROSSOVER):
     Instead of a solid ivory band at the top (which produced a visible
     horizontal "line" where the bottom-heavy blushes started peeking in),
     the hero now carries FOUR blushes arranged in a diagonal crossover:

         top-left  PINK   ⟶   bottom-left  BLUE
         top-right BLUE   ⟶   bottom-right PINK

     The nav's pink-left / blue-right mist flows straight down into the
     hero's top blushes, then the pink and blue diagonally cross through
     the middle and exit as blue-left / pink-right at the bottom — a soft,
     continuous dream-blend with no visible seam anywhere.

     A gentle top fade to ivory (0 → 8%) preserves the nav's ivory bottom
     meeting the hero, so the join stays pixel-safe on any viewport. */
  background:
    /* The band fades in at the top and out at the bottom over a fixed
       distance rather than a percentage of its own height, so a short hero
       feathers exactly as softly as a tall one. Set in per cent, the fade on
       a shallow banner was over in a few pixels and read as a ruled line
       across the page. (17 Aug 2026, Winnie) */
    linear-gradient(180deg,
      var(--ivory) 0,
      rgba(251, 247, 242, 0.972) 13px,
      rgba(251, 247, 242, 0.896) 26px,
      rgba(251, 247, 242, 0.784) 40px,
      rgba(251, 247, 242, 0.648) 53px,
      rgba(251, 247, 242, 0.500) 66px,
      rgba(251, 247, 242, 0.352) 79px,
      rgba(251, 247, 242, 0.216) 92px,
      rgba(251, 247, 242, 0.104) 106px,
      rgba(251, 247, 242, 0.028) 119px,
      rgba(251, 247, 242, 0) 132px,
      rgba(251, 247, 242, 0) calc(100% - 132px),
      rgba(251, 247, 242, 0.028) calc(100% - 119px),
      rgba(251, 247, 242, 0.104) calc(100% - 106px),
      rgba(251, 247, 242, 0.216) calc(100% - 92px),
      rgba(251, 247, 242, 0.352) calc(100% - 79px),
      rgba(251, 247, 242, 0.500) calc(100% - 66px),
      rgba(251, 247, 242, 0.648) calc(100% - 53px),
      rgba(251, 247, 242, 0.784) calc(100% - 40px),
      rgba(251, 247, 242, 0.896) calc(100% - 26px),
      rgba(251, 247, 242, 0.972) calc(100% - 13px),
      var(--ivory) 100%),
    /* TOP-LEFT — soft PINK, continues nav's pink-left mist downward */
    radial-gradient(ellipse 72% 70% at 18% 14%, rgba(247, 213, 226, 0.72) 0%, rgba(251, 247, 242, 0) 62%),
    /* TOP-RIGHT — soft BLUE, continues nav's blue-right mist downward */
    radial-gradient(ellipse 72% 70% at 82% 14%, rgba(211, 223, 240, 0.72) 0%, rgba(251, 247, 242, 0) 62%),
    /* BOTTOM-LEFT — soft BLUE (crossover from top-left pink) */
    radial-gradient(ellipse 72% 72% at 22% 82%, rgba(211, 223, 240, 0.75) 0%, rgba(251, 247, 242, 0) 62%),
    /* BOTTOM-RIGHT — soft PINK (crossover from top-right blue) */
    radial-gradient(ellipse 72% 72% at 78% 82%, rgba(247, 213, 226, 0.75) 0%, rgba(251, 247, 242, 0) 62%),
    var(--ivory);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero .eyebrow {
  justify-content: center;
  margin-bottom: 22px;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.page-hero h1 em { font-style: normal; color: var(--cloud-blue-deep); }
.page-hero .lede {
  max-width: 640px;
  margin: 0 auto;
}

/* ------------------------------------------------------------------------
   TRUST RIBBON
   ------------------------------------------------------------------------ */
.trust {
  padding: 48px var(--gutter);
  background: var(--ivory);
  border-top: 1px solid rgba(232, 155, 175, 0.15);
  border-bottom: 1px solid rgba(232, 155, 175, 0.15);
}
.trust-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  align-items: center;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--ink-soft);
}
.trust-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cloud-blue-deep);
  background: linear-gradient(135deg, rgba(187, 200, 229, 0.18), rgba(143, 163, 201, 0.10));
  flex-shrink: 0;
}
.trust-item strong {
  font-weight: 600;
  color: var(--ink);
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}
.trust-item span {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}

/* ------------------------------------------------------------------------
   WALKTHROUGH VIDEO
   ------------------------------------------------------------------------ */
.walkthrough {
  padding: var(--section-y) var(--gutter);
  background: var(--ivory);
}
.walkthrough-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
}
.walkthrough-head .eyebrow { justify-content: center; margin-bottom: 22px; }
.walkthrough-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.walkthrough-head h2 em { font-style: normal; color: var(--cloud-blue-deep); }

.video-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 40px 80px -30px rgba(212, 120, 150, 0.4), 0 0 0 1px rgba(232, 155, 175, 0.18);
  max-width: var(--max-width);
  margin: 0 auto;
}
.video-placeholder-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55) saturate(0.85);
  transition: filter 0.6s var(--ease);
}
.video-placeholder:hover .video-placeholder-img { filter: brightness(0.65) saturate(1); }

.video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  color: var(--ivory);
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(42, 36, 56, 0.2), transparent 70%);
}
.play-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s var(--ease);
  border: 1px solid rgba(244, 194, 208, 0.5);
  position: relative;
}
.play-icon::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid var(--champagne);
  border-radius: 50%;
  opacity: 0.4;
  animation: haloPulse 3s ease-out infinite;
}
.play-icon:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}
@keyframes haloPulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}
.video-caption { text-align: center; position: relative; z-index: 2; }
.video-caption .smallcaps {
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--champagne);
}
.video-caption h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 28px);
  margin: 12px 0 6px;
  color: var(--ivory);
  letter-spacing: -0.01em;
}
.video-caption p {
  font-size: 13px;
  font-weight: 300;
  color: rgba(250, 246, 240, 0.75);
  max-width: 360px;
  margin: 0 auto;
}

/* ------------------------------------------------------------------------
   PHILOSOPHY (brief on home)
   ------------------------------------------------------------------------ */
.philosophy-brief {
  padding: var(--section-y) var(--gutter);
  background: var(--ivory);
}
.philosophy-brief-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.philosophy-brief-inner .eyebrow {
  justify-content: center;
  margin-bottom: 28px;
}
.philosophy-brief-inner h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.6vw, 56px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 32px;
}
.philosophy-brief-inner h2 em { font-style: normal; color: var(--cloud-blue-deep); }
.philosophy-brief-inner .body-text {
  font-size: 17px;
  max-width: 680px;
  margin: 0 auto 20px;
}
.philosophy-brief-inner .pullquote {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  font-style: normal;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 40px auto;
  max-width: 600px;
  position: relative;
  padding: 24px 0;
}
.philosophy-brief-inner .pullquote::before,
.philosophy-brief-inner .pullquote::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 60px;
  height: 1px;
  background: var(--gold);
  transform: translateX(-50%);
}
.philosophy-brief-inner .pullquote::before { top: 0; }
.philosophy-brief-inner .pullquote::after { bottom: 0; }
.philosophy-brief-inner .btn {
  margin-top: 16px;
}

/* ------------------------------------------------------------------------
   SAFETY STANDARDS BAND
   ------------------------------------------------------------------------ */
.safety-band {
  background: var(--ink);
  color: var(--ivory);
  padding: 100px var(--gutter);
  position: relative;
  overflow: hidden;
}
.safety-band::before,
.safety-band::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.safety-band::before { top: 0; }
.safety-band::after { bottom: 0; }
.safety-inner { max-width: var(--max-width); margin: 0 auto; }
.safety-head { text-align: center; margin-bottom: 60px; }
.safety-head .eyebrow { color: var(--champagne); justify-content: center; margin-bottom: 18px; }
.safety-head .eyebrow::before { background: var(--champagne); }
.safety-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4.2vw, 48px);
  letter-spacing: -0.02em;
  color: var(--ivory);
  line-height: 1.1;
}
.safety-head h2 em { font-style: normal; color: var(--champagne); }

.safety-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.safety-item {
  text-align: center;
  padding: 24px 16px;
}
.safety-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 18px;
  color: var(--champagne);
  display: flex;
  align-items: center;
  justify-content: center;
}
.safety-item h4 {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ivory);
  letter-spacing: -0.01em;
}
.safety-item p {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(250, 246, 240, 0.7);
  font-weight: 400;
}

/* ------------------------------------------------------------------------
   BABY TRACKING APP (companion app perk)
   ------------------------------------------------------------------------ */
.tracking {
  padding: var(--section-y) var(--gutter);
  background: var(--ivory);
  overflow: hidden;
}
.tracking-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
}
.tracking-content .eyebrow { margin-bottom: 22px; }
.tracking-content h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 24px;
}
.tracking-content h2 em { font-style: normal; color: var(--cloud-blue-deep); }
.tracking-content > .body-text { margin-bottom: 36px; max-width: 540px; }

.tracking-features {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 36px;
}
.tracking-feature {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.tracking-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(187, 200, 229, 0.45), rgba(220, 229, 239, 0.55));
  border: 1px solid rgba(143, 163, 201, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cloud-blue-deep);
  flex-shrink: 0;
}
.tracking-feature-icon.blue {
  background: linear-gradient(135deg, rgba(187, 200, 229, 0.45), rgba(220, 229, 239, 0.55));
  border-color: rgba(143, 163, 201, 0.35);
  color: var(--cloud-blue-deep);
}
.tracking-feature h4 {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--ink);
}
.tracking-feature p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.tracking-meta {
  margin-top: 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Phone mockup */
.tracking-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.phone-frame {
  width: 260px;
  height: 520px;
  background: var(--ink);
  border-radius: 36px;
  padding: 14px 12px;
  position: relative;
  box-shadow:
    0 40px 80px -30px rgba(212, 120, 150, 0.5),
    0 0 0 4px rgba(232, 155, 175, 0.15);
}
.phone-frame::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 18px;
  background: var(--ink);
  border-radius: 100px;
  z-index: 3;
}
.phone-screen {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--blush-whisper), var(--ivory));
  border-radius: 24px;
  padding: 48px 14px 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.app-header {
  text-align: center;
  margin-bottom: 4px;
}
.app-header .app-greeting {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.app-header .app-baby {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  margin-top: 2px;
  letter-spacing: -0.01em;
}
.app-card {
  background: white;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(232, 155, 175, 0.1);
}
.app-card-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--grad-blush-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  color: var(--gold-deep);
}
.app-card-text {
  flex: 1;
  min-width: 0;
}
.app-card-label {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1px;
}
.app-card-value {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}
.app-card-time {
  font-size: 9px;
  color: var(--gold-deep);
  font-weight: 500;
}

/* ------------------------------------------------------------------------
   MAP SECTION
   ------------------------------------------------------------------------ */
.map-section {
  padding: var(--section-y) var(--gutter);
  background: var(--ivory);
}
.map-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}
.map-head .eyebrow { justify-content: center; margin-bottom: 22px; }
.map-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.map-head h2 em { font-style: normal; color: var(--cloud-blue-deep); }

.map-card {
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--ivory);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(212, 120, 150, 0.25), 0 0 0 1px rgba(232, 155, 175, 0.18);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
}
.map-info {
  padding: 48px 40px;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.map-info h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.map-info h3 em { font-style: normal; color: var(--cloud-blue-deep); }
.map-info-addr {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.map-info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(42, 36, 56, 0.15);
}
.map-info-row:last-of-type { border-bottom: 1px solid rgba(42, 36, 56, 0.15); }
.map-info-row-icon {
  width: 28px;
  height: 28px;
  color: var(--ink);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-info-row-text {
  flex: 1;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.map-info-row-text strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}
.map-directions {
  margin-top: 24px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s var(--ease);
}
.map-directions:hover { color: var(--ink); }

.map-embed {
  width: 100%;
  height: 100%;
  min-height: 420px;
  position: relative;
  background: var(--blush-whisper);
}
.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ------------------------------------------------------------------------
   STAY CONNECTED · Social media placeholder
   ------------------------------------------------------------------------ */
.socials {
  padding: var(--section-y) var(--gutter);
  background: var(--ivory);
  border-top: 1px solid rgba(232, 155, 175, 0.15);
}
.socials-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.socials-inner .eyebrow { justify-content: center; margin-bottom: 22px; }
.socials-inner h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 20px;
}
.socials-inner h2 em { font-style: normal; color: var(--cloud-blue-deep); }
.socials-inner .lede { max-width: 600px; margin: 0 auto 48px; }

.socials-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 700px;
  margin: 0 auto;
}
.social-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 20px;
  background: var(--ivory);
  border: 1px solid rgba(232, 155, 175, 0.25);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
  transition: all 0.4s var(--ease);
  cursor: default;
}
.social-link:hover {
  border-color: var(--gold-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px rgba(212, 120, 150, 0.25);
}
.social-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--cloud-blue-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cloud-blue-deep);
  margin-bottom: 16px;
  transition: all 0.4s var(--ease);
}
.social-link:hover .social-icon-wrap {
  border-color: var(--gold-deep);
  color: var(--gold-deep);
}
.social-name {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.social-status {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cloud-blue-deep);
}

/* ------------------------------------------------------------------------
   ABOUT US PAGE
   ------------------------------------------------------------------------ */
.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 52px;
}
.section-head .eyebrow { margin-bottom: 24px; justify-content: center; }
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  color: var(--ink);
}
.section-head h2 em { font-style: normal; color: var(--cloud-blue-deep); }
.section-head .lede { max-width: 600px; margin: 0 auto; }

.about-grid {
  display: grid;
  /* Photo column intentionally reduced (08 Jul 2026): editorial portrait
     capped at ~380px so the founders' message becomes the star and the
     picture supports it. Previously 1fr 1fr — the picture dominated at
     ~50% of the row and read too much like self-promotion. Text now takes
     ~65-70% of the width, letting the writing carry the emotional weight. */
  grid-template-columns: minmax(240px, 380px) 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
  margin-bottom: 64px;
}
.about-visual {
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  background: var(--grad-blush-soft);
  /* Softer, lifted shadow to match the smaller, more intimate portrait scale. */
  box-shadow: 0 22px 44px -22px rgba(212, 120, 150, 0.18);
}
.about-visual img { width: 100%; height: 100%; object-fit: cover; }
.about-visual-frame {
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(250, 246, 240, 0.5);
  pointer-events: none;
}
.about-content .eyebrow { margin-bottom: 24px; }
.about-content h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 28px;
  color: var(--ink);
}
.about-content h3 em { font-style: normal; color: var(--cloud-blue-deep); }
.about-content .body-text + .body-text { margin-top: 18px; }
.about-content .pullquote {
  margin: 36px 0;
  padding: 4px 0 4px 28px;
  border-left: 3px solid var(--gold);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-top: 80px;
  border-top: 1px solid rgba(232, 155, 175, 0.2);
}
.pillar { position: relative; }
.pillar-mark {
  width: 32px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 24px;
}
.pillar h4 {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.pillar p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.founders {
  margin-top: 72px;
  padding-top: 56px;
  border-top: 1px solid rgba(232, 155, 175, 0.2);
}
.founders-head { text-align: center; margin-bottom: 40px; }
.founders-head .eyebrow { margin-bottom: 18px; justify-content: center; }
.founders-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.founders-head h3 em { font-style: normal; color: var(--cloud-blue-deep); }
.founders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 880px;
  margin: 0 auto;
}
.founder { text-align: center; }
.founder-portrait {
  width: 180px;
  height: 180px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--grad-blush-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 64px;
  color: var(--gold-deep);
  border: 1px solid rgba(232, 155, 175, 0.3);
  position: relative;
  letter-spacing: -0.02em;
  overflow: hidden;
}
.founder-portrait::after {
  content: '';
  position: absolute;
  inset: -10px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0.3;
}
.founder-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 6px;
  letter-spacing: -0.015em;
}
.founder-role {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 18px;
  font-weight: 600;
}
.founder-bio {
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 320px;
  margin: 0 auto;
}

/* ------------------------------------------------------------------------
   ANGEL CRIBS PAGE · Newborn focus (0-6 months)
   ------------------------------------------------------------------------ */
/* ==========================================================================
   COT FEATURES (08 Jul 2026) — three editorial columns describing the cot's
   craftsmanship. Sits between the page hero and the room carousel on the
   Angel Cribs page. Deliberately hairline-divided rather than boxed, so it
   reads as a printed magazine spread and stays visually distinct from the
   bordered room-type cards further down.
   Replaced the previous .specialism-mark pill ("Exclusively For Newborns ·
   0 – 6 Months") — the "0-6 months" info still lives in the page hero copy
   and in each room's age tag, so nothing is lost.
   ========================================================================== */
.cot-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: clamp(56px, 7vw, 88px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid rgba(232, 155, 175, 0.22);
  /* Auto-numbering source for the 1/2/3 circles on each feature (10 Jul 2026) */
  counter-reset: cot-num;
}

.cot-feature {
  padding: 0 clamp(20px, 2.6vw, 44px);
  border-left: 1px solid rgba(122, 115, 136, 0.14);
  counter-increment: cot-num;
}
/* Numbered circle badge — sits above each feature's title, showing 1, 2, 3
   in Playfair Display inside a soft rose-outlined circle with a whisper of
   blush fill. Gives the three features a clear editorial "step order"
   without leaning on prose numbering. */
.cot-feature::before {
  content: counter(cot-num);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(42px, 3.6vw, 50px);
  height: clamp(42px, 3.6vw, 50px);
  border: 1.5px solid rgba(212, 120, 150, 0.55);
  border-radius: 50%;
  background: linear-gradient(180deg,
    rgba(244, 194, 208, 0.18) 0%,
    rgba(244, 194, 208, 0.05) 100%);
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  color: var(--gold-deep);
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: clamp(18px, 1.8vw, 24px);
  box-shadow: 0 6px 14px -8px rgba(212, 120, 150, 0.28);
}
.cot-feature:first-child { border-left: none; padding-left: 0; }
.cot-feature:last-child  { padding-right: 0; }

.cot-feature h4 {
  font-family: var(--font-display);
  font-size: clamp(21px, 1.9vw, 27px);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.22;
  margin-bottom: clamp(14px, 1.5vw, 20px);
}

.cot-feature p {
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-mute);
  letter-spacing: 0;
  margin: 0;
}

@media (max-width: 780px) {
  .cot-features {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 40px;
    margin-bottom: 48px;
  }
  .cot-feature {
    padding: 32px 0 0;
    border-left: none;
    border-top: 1px solid rgba(122, 115, 136, 0.14);
  }
  .cot-feature:first-child {
    padding-top: 0;
    border-top: none;
  }
  .cot-feature p { font-size: 14px; }
}

/* SWIPE CAROUSEL · mobile-friendly horizontal scroll */
.carousel-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-bottom: 56px;
  overflow: hidden;
}
.carousel-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 8px 0;
}
.carousel-track {
  display: flex;
  gap: clamp(16px, 2.5vw, 36px);
  padding: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 3000ms cubic-bezier(0.22, 1, 0.36, 1);
  touch-action: pan-y;
}

.carousel-item {
  flex: 0 0 75%;
  aspect-ratio: 16 / 10;
  border-radius: 4px;
  overflow: hidden;
  background: var(--grad-blush-soft);
  box-shadow: 0 30px 60px -22px rgba(212, 120, 150, 0.32);
  position: relative;
  transition: opacity 0.6s var(--ease), transform 0.8s var(--ease);
}
.carousel-item.is-clone {
  /* visually identical to real items - just used for seamless looping */
}
.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(232, 155, 175, 0.4);
  color: var(--gold-deep);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(212, 120, 150, 0.22);
  transition: all 0.3s var(--ease);
  z-index: 5;
}
.carousel-arrow:hover {
  background: var(--grad-gold);
  color: var(--ivory);
  border-color: var(--gold);
  box-shadow: 0 8px 22px rgba(232, 134, 160, 0.45);
}
.carousel-arrow.prev { left: clamp(12px, 2vw, 32px); }
.carousel-arrow.next { right: clamp(12px, 2vw, 32px); }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}
.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(232, 155, 175, 0.3);
  cursor: pointer;
  border: none;
  padding: 0;
  transition: all 0.4s var(--ease);
}
.carousel-dot.active {
  background: var(--gold-deep);
  width: 28px;
  border-radius: 100px;
}

@media (max-width: 1024px) {
  .carousel-item {
    flex: 0 0 82%;
    aspect-ratio: 4 / 3;
  }
}
@media (max-width: 640px) {
  .carousel-arrow { width: 42px; height: 42px; }
  .carousel-arrow.prev { left: 8px; }
  .carousel-arrow.next { right: 8px; }
  .carousel-item {
    flex: 0 0 88%;
    aspect-ratio: 4 / 3;
  }
}

/* Crib room cards */
.crib-rooms {
  display: grid;
  /* 4 rooms as of Jul 2026 — Cocoon, Cradle, Haven, Sactum.
     Uses auto-fit + minmax so the grid gracefully collapses to
     2 columns on medium screens (where 4 would be too narrow)
     and 1 column on mobile via the media query below. */
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 100px;
}
@media (max-width: 1100px) {
  .crib-rooms { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
.crib-room {
  position: relative;
  background: var(--ivory);
  padding: 40px 32px;
  border: 1px solid rgba(232, 155, 175, 0.18);
  border-radius: 4px;
  transition: all 0.5s var(--ease);
}
.crib-room:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -20px rgba(212, 120, 150, 0.25);
  border-color: var(--gold);
}
.crib-room-age {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 18px;
  display: block;
}
.crib-room-name {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.crib-room-sub {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  color: var(--gold-deep);
  margin-bottom: 24px;
}
.crib-room p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.crib-room-features { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.crib-room-features li {
  font-size: 13px;
  color: var(--ink-soft);
  padding-left: 22px;
  position: relative;
}
.crib-room-features li::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-soft);
}

/* ------------------------------------------------------------------------
   SIGNATURE SERVICES PAGE
   ------------------------------------------------------------------------ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(232, 155, 175, 0.2);
  margin-bottom: 100px;
  border: 1px solid rgba(232, 155, 175, 0.2);
}
.service {
  background: var(--ivory);
  padding: 48px 36px;
  transition: background 0.5s var(--ease);
}
.service:hover { background: var(--blush-whisper); }
.service:hover h4 { color: var(--cloud-blue-deep); }
.service-mark {
  width: 32px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 24px;
}
.service h4 {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.02em;
  transition: color 0.4s var(--ease);
}
.service p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.bespoke {
  background: var(--ivory);
  padding: 80px clamp(40px, 6vw, 80px);
  border-radius: 4px;
  border: 1px solid rgba(232, 155, 175, 0.2);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.bespoke::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 1px;
  background: var(--gold);
}
.bespoke .eyebrow { justify-content: center; margin-bottom: 24px; }
.bespoke h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4vw, 48px);
  margin-bottom: 20px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.bespoke h3 em { font-style: normal; color: var(--cloud-blue-deep); }
.bespoke .lede { max-width: 620px; margin: 0 auto 36px; }
.bespoke-meta {
  margin-top: 28px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}

/* ------------------------------------------------------------------------
   OFFICIAL PARTNERS PAGE
   ------------------------------------------------------------------------ */
.partnership-intro {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  margin-bottom: 100px;
}
.partnership-intro .eyebrow { margin-bottom: 24px; }
.partnership-intro h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}
.partnership-intro h2 em { font-style: normal; color: var(--cloud-blue-deep); }

.partnership-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 100px;
}
.tier {
  background: var(--ivory);
  border: 1px solid rgba(232, 155, 175, 0.2);
  border-radius: 4px;
  padding: 48px 36px;
  text-align: center;
  transition: all 0.5s var(--ease);
}
.tier:hover {
  border-color: var(--gold-deep);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -16px rgba(212, 120, 150, 0.28);
}
.tier-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.tier h4 {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.tier .body-text { font-size: 14px; margin-bottom: 20px; }
.tier-list {
  list-style: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.tier-list li { padding: 8px 0; border-top: 1px solid rgba(232, 155, 175, 0.15); }
.tier-list li:first-child { border-top: none; }

/* ==========================================================================
   PARTNER SHOWCASE (08 Jul 2026) — tabbed logo carousel for partners.html
   Three category tabs (Healthcare Providers, Brand Partners, Educational
   Institutions), each with an auto-swiping logo slideshow. Each slide holds
   three logo cards; the JS ticker on partners.html advances the active
   panel's track every 2.75s, looping seamlessly via a duplicated first
   slide appended by JS at runtime.
   Only used on partners.html — scoped by .partner-showcase root class.
   ========================================================================== */
.partner-showcase {
  max-width: 1120px;
  margin: 0 auto;
}

/* Tabs row */
.showcase-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  border-bottom: 1px solid rgba(122, 115, 136, 0.16);
  margin-bottom: clamp(40px, 5vw, 56px);
}

.showcase-tab {
  background: none;
  border: none;
  padding: 22px 20px 26px;
  cursor: pointer;
  position: relative;
  font-family: inherit;
  color: var(--ink);
  transition: transform 0.35s var(--ease);
  text-align: center;
}
/* Removed the opacity dimming (Jul 2026) — inactive tabs were reading as
   "disabled" rather than "not-yet-selected". Now all three tabs display at
   full clarity; the rose underline on .is-active is the sole state indicator.
   A whisper of translateY on hover gives feedback without dimming anything. */
.showcase-tab:hover { transform: translateY(-1px); }
.showcase-tab:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 4px;
  border-radius: 4px;
}
.showcase-tab.is-active::after {
  content: '';
  position: absolute;
  left: 28%;
  right: 28%;
  bottom: -1px;
  height: 2px;
  background: var(--gold-deep);
  border-radius: 1px;
}

.showcase-tab-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
/* Italic cloud-blue emphasis on the second word — echoes the site's
   editorial pattern (e.g. "Built by parents, for parents.",
   "Grow with Baby Angels."). Gives each tab title a small typographic lift. */
.showcase-tab-title em {
  /* Match the first (black) word exactly — same ink colour, upright, same
     weight and family — so the whole title reads as one clean line. */
  font-style: normal;
  font-weight: 500;
  color: var(--ink);
}

/* Tagline switched from Inter → Playfair italic (Jul 2026):
   reads as a hand-set editorial subtitle, more refined than sans-serif
   italic, and rhymes with the italic "em" above it. */
.showcase-tab-tagline {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(13.5px, 1.15vw, 15.5px);
  font-weight: 400;
  color: var(--ink-mute);
  letter-spacing: 0;
  line-height: 1.5;
  opacity: 0.85;
}

/* Panel is now a static grid (Jul 2026 — auto-swipe carousel removed).
   Each panel displays all its logo cards at once in a responsive 3-column
   grid. Wraps to more rows as needed for panels with more logos. */
.showcase-viewport {
  position: relative;
}
.showcase-panel { display: none; }
.showcase-panel.is-active {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 24px);
  padding: 4px;
}

/* Individual logo card — hosts a wordmark or (later) an <img> logo. */
.logo-card {
  background: #FFFDFA;
  border: 1px solid rgba(122, 115, 136, 0.14);
  border-radius: 12px;
  height: clamp(110px, 12vw, 148px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-decoration: none;
  color: var(--ink-mute);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-align: center;
  transition: transform 0.35s var(--ease),
              border-color 0.35s var(--ease),
              box-shadow 0.35s var(--ease),
              color 0.35s var(--ease);
}
.logo-card:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 120, 150, 0.35);
  box-shadow: 0 14px 34px -14px rgba(212, 120, 150, 0.25);
  color: var(--ink);
}
.logo-card img {
  max-width: 100%;
  max-height: clamp(96px, 11vw, 120px);
  object-fit: contain;
}

/* Real logo cards (any .logo-card holding an <img>) drop the container
   entirely — no background, no border, no border-radius. Lets the logo
   itself be the sole visual element (more premium than a boxed logo
   grid), and the image is significantly larger than before.
   Grid row heights stay consistent so image cards still align neatly
   with neighbouring placeholder or text cards. */
.logo-card:has(img) {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: clamp(8px, 1vw, 14px);
}
.logo-card:has(img):hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: none;
}

/* Per-logo sizing tweaks: some PNGs have more whitespace around the mark
   than others, so at the same max-height they read as visually smaller.
   Scale those up individually via aria-label targeting so they read at
   parity with the tighter logos in the row. */
.logo-card[aria-label="INU Solutions Sdn. Bhd."] img {
  transform: scale(1.55);
  transform-origin: center;
}

/* Placeholder card (dashed border, ALL-CAPS "Partner Logo" text) — makes
   swap-in slots obvious. Remove the .is-placeholder class + replace the
   inner <span> with an <img> when the real logo is ready. */
.logo-card.is-placeholder {
  border-style: dashed;
  color: rgba(122, 115, 136, 0.55);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (max-width: 780px) {
  .showcase-nav {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 28px;
  }
  .showcase-tab {
    padding: 16px 16px 18px;
    border-bottom: 1px solid rgba(122, 115, 136, 0.1);
  }
  .showcase-tab:last-child { border-bottom: none; }
  .showcase-tab.is-active::after { left: 30%; right: 30%; }
  .showcase-tab-tagline { font-size: 12.5px; }
  .showcase-panel.is-active { gap: 10px; }
  .logo-card { height: 96px; padding: 12px; }
  .logo-card:has(img) { padding: 6px; }
  .logo-card:has(img) img { max-height: 82px; }
  .logo-card.is-placeholder { font-size: 10px; letter-spacing: 0.14em; }
}

/* ==========================================================================
   PARTNER TABS — active-tagline colour + mobile entrance (10 Jul 2026)
   Two touches for partners.html only:
     1. The ACTIVE tab's tagline picks up the site's signature dreamy blend
        (rose → soft mauve → cloud-blue) — the same gradient used on the
        active nav link — tying the selected category into the page's
        pink-and-blue concept. Inactive taglines stay a calm muted grey.
     2. On mobile, the three stacked category tabs glide into place on
        reveal: first from the LEFT, second from the RIGHT, third from the
        LEFT, each settling with a soft, staggered ease.
   ========================================================================== */
.showcase-tab.is-active .showcase-tab-tagline {
  background: linear-gradient(90deg, #D47896 0%, #C08FB4 48%, #8FA3C9 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  opacity: 1;
}

@media (max-width: 780px) {
  @keyframes tabGlideLeft {
    from { opacity: 0; transform: translateX(-46px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes tabGlideRight {
    from { opacity: 0; transform: translateX(46px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  /* Held hidden until the showcase reveals (JS adds .in). Gated on
     html.has-js so a no-JS visitor still sees all three tabs immediately. */
  html.has-js .partner-showcase .showcase-tab { opacity: 0; }

  html.has-js .partner-showcase.in .showcase-tab {
    animation-duration: 0.9s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: both;
  }
  html.has-js .partner-showcase.in .showcase-tab:nth-child(1) { animation-name: tabGlideLeft;  animation-delay: 0.15s; }
  html.has-js .partner-showcase.in .showcase-tab:nth-child(2) { animation-name: tabGlideRight; animation-delay: 0.48s; }
  html.has-js .partner-showcase.in .showcase-tab:nth-child(3) { animation-name: tabGlideLeft;  animation-delay: 0.81s; }
}

/* Respect reduced-motion: no glide, tabs simply present. */
@media (max-width: 780px) and (prefers-reduced-motion: reduce) {
  html.has-js .partner-showcase .showcase-tab,
  html.has-js .partner-showcase.in .showcase-tab {
    opacity: 1;
    animation: none;
  }
}

/* ==========================================================================
   EMPTY PANEL STATE (10 Jul 2026) — used when a partner category has no
   confirmed partners yet. Replaces the placeholder "Partner Logo" cards
   with a single centered editorial note, so the tab still feels finished
   rather than blank. Overrides the grid layout so the note sits alone.
   ========================================================================== */
.showcase-panel--empty.is-active {
  display: block;
  grid-template-columns: none;
  padding: clamp(24px, 4vw, 40px) 4px;
}
.showcase-empty-note {
  font-family: var(--font-display);
  font-size: clamp(15.5px, 1.5vw, 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-mute);
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 40px);
  background: linear-gradient(180deg,
    rgba(250, 222, 231, 0.22) 0%,
    rgba(221, 230, 242, 0.22) 100%);
  border: 1px solid rgba(122, 115, 136, 0.14);
  border-radius: 16px;
}
.showcase-empty-note em {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19px, 2vw, 24px);
  color: var(--gold-deep);
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}

/* ==========================================================================
   GROW WITH US (Jul 2026) — partnership invitation on partners.html.
   Replaced the previous "In Collaboration With" marquee. Now framed as an
   editorial invitation card: rose-gold hairline border, soft pink glow at
   the top and cloud-blue glow at the bottom (echoing the site's blush/blue
   palette), gentle drop shadow, and centered typography. Reads as a fine
   printed invitation nested within the page.
   Scoped by .grow-with-us so it only affects partners.html.
   ========================================================================== */
.grow-with-us {
  max-width: 820px;
  margin: clamp(48px, 6vw, 80px) auto clamp(64px, 8vw, 96px);
  padding: clamp(56px, 6vw, 88px) clamp(32px, 5vw, 64px);
  text-align: center;
  position: relative;
  /* Fancier invitation card (10 Jul 2026):
     - Border radius lifted from 6 → 20px so the card reads as a soft, premium
       invitation rather than a business panel.
     - Background swapped from "pink glow above, blue glow below" (centered)
       to the site's signature TWO-SPOT DREAMY DIAGONAL — blue drop in the
       top-left, pink drop in the bottom-right, echoing the hero blend on
       index.html. A whisper of central shine sits behind them for that
       "wet ink catching light" luminosity.
     - Deeper, warmer shadow with a matching blue undertone underneath.
     - Overflow hidden so the rounded corners crop the radial gradients
       cleanly no matter how large the card grows. */
  border-radius: 20px;
  overflow: hidden;
  background:
    /* TL — dreamy blue drop */
    radial-gradient(ellipse 85% 70% at 12% 8%,
      rgba(187, 200, 229, 0.44) 0%,
      rgba(251, 247, 242, 0) 62%),
    /* BR — dreamy pink drop */
    radial-gradient(ellipse 85% 70% at 88% 92%,
      rgba(250, 222, 231, 0.50) 0%,
      rgba(251, 247, 242, 0) 62%),
    /* Central shine — wet-ink luminosity between the two spots */
    radial-gradient(ellipse 55% 42% at 50% 50%,
      rgba(255, 253, 250, 0.38) 0%,
      rgba(255, 253, 250, 0) 72%),
    var(--ivory);
  border: 1px solid rgba(232, 155, 175, 0.30);
  box-shadow:
    0 34px 72px -32px rgba(212, 120, 150, 0.28),
    0 10px 24px -12px rgba(143, 163, 201, 0.18),
    inset 0 1px 0 rgba(255, 253, 250, 0.75);
}

.grow-with-us h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: clamp(28px, 3vw, 36px);
  /* Glass-shine dreamy blend (10 Jul 2026):
     Two stacked backgrounds — a rich rose → mauve → cloud-blue base
     underneath, and a NARROW translucent white shine streak that sweeps
     across on top at ~7s intervals. Clipping both layers to the text
     shape gives the letters the same signature gradient as the active
     nav link with a highlight travelling over them like light catching
     polished glass. A whisper of soft rose drop-shadow adds a touch
     of depth without gloss. */
  background:
    linear-gradient(115deg,
      transparent 42%,
      rgba(255, 255, 255, 0.72) 50%,
      transparent 58%) 0% 0% / 220% 100% no-repeat,
    linear-gradient(90deg,
      #D47896 0%,
      #C08FB4 48%,
      #8FA3C9 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: growTitleShine 7s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(200, 150, 180, 0.22));
}
/* "Grow" and "with us." now share the same gradient — the earlier black-ink
   override is dropped so the entire title reads as one continuous dreamy
   glass-shine blend. Weight and style match Grow so it stays one clean line. */
.grow-with-us h2 em {
  font-style: normal;
  font-weight: 500;
}

@keyframes growTitleShine {
  /* Only the shine layer (first background) shifts; the base gradient
     stays put. Sweeps from off-left, through the text, to off-right and
     smoothly back, so light glides across the letters like a soft glint. */
  0%   { background-position: -60% 0%, 0 0; }
  50%  { background-position: 160% 0%, 0 0; }
  100% { background-position: -60% 0%, 0 0; }
}

/* The site-wide reveal cascade (see gravityRise, further down) sets an
   entrance animation on every h2 inside a .reveal container with a very
   specific selector, which would otherwise wipe out the shine loop above.
   Chain them here so the h2 first rises into place, THEN loops the
   glass-shine — the specific selector matches the cascade's specificity
   so this rule wins by source-order. */
html.has-js .grow-with-us.reveal.in > h2 {
  animation:
    gravityRise 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.20s forwards,
    growTitleShine 7s ease-in-out 1.5s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .grow-with-us h2,
  html.has-js .grow-with-us.reveal.in > h2 {
    animation: none;
    background-position: 50% 0%, 0 0;
  }
}

.grow-with-us .body-text {
  max-width: 640px;
  margin: 0 auto clamp(36px, 4vw, 48px);
  font-family: var(--font);
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.75;
  color: var(--ink-mute);
  letter-spacing: 0;
}

/* Italic Playfair pull line — the emotive closing beat before the CTA.
   Cloud-blue matches the sitewide italic-emphasis pattern (h2 em, About
   page taglines). Flanked by two rose-gold sparkle flourishes, same
   4-point twinkle motif as the About-page tagline. */
.grow-with-us-closer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 22px);
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(23px, 2.4vw, 32px);
  font-weight: 400;
  /* Slogan colour switched from cloud-blue to solid ink (10 Jul 2026):
     lets the italic pull line share the same voice as "Grow with us."
     above it, so the whole card reads as one clear editorial invitation.
     The pink → blue sparkles now carry the colour story instead. */
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: 0.003em;
  margin: 0 0 clamp(36px, 4vw, 48px);
}
.grow-with-us-flourish {
  flex-shrink: 0;
  width: clamp(18px, 1.6vw, 22px);
  height: clamp(18px, 1.6vw, 22px);
  fill: var(--gold-deep);
  opacity: 0.75;
  animation: growCloserTwinkle 4.6s ease-in-out infinite;
}
/* Trailing sparkle now cloud-blue (10 Jul 2026), completing the
   pink-then-blue two-spot rhythm of the card behind it. First sparkle
   inherits the default rose fill above. */
.grow-with-us-closer svg:last-child {
  fill: var(--cloud-blue-deep);
}
.grow-with-us-flourish + .grow-with-us-flourish,
.grow-with-us-closer svg:last-child {
  animation-delay: 1.4s;
}
@keyframes growCloserTwinkle {
  0%, 100% { opacity: 0.65; transform: scale(1)    rotate(0deg); }
  50%      { opacity: 0.95; transform: scale(1.12) rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) {
  .grow-with-us-flourish { animation: none; }
}

@media (max-width: 780px) {
  .grow-with-us {
    padding-left: clamp(20px, 5vw, 32px);
    padding-right: clamp(20px, 5vw, 32px);
  }
}

/* ------------------------------------------------------------------------
   GET IN TOUCH PAGE
   ------------------------------------------------------------------------ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  margin-bottom: 100px;
}

.contact-card {
  /* Floating ink-circles (10 Jul 2026 rev):
     Two distinct circular drops floating INSIDE the card rather than
     blushing in from the corners — a small pink circle centred over the
     Phone/WhatsApp area (upper-left of the content column) and a larger
     cloud-blue circle sitting lower-right. Neither touches an edge, so
     the card reads as if two drops of watercolour were placed onto the
     paper. Each drop keeps most of its colour concentrated in the middle
     so the edges of the card stay clean ivory. */
  background:
    /* Pink drop — smaller, centred over the Phone/WhatsApp block */
    radial-gradient(circle 220px at 30% 34%,
      rgba(244, 165, 184, 0.52) 0%,
      rgba(244, 165, 184, 0.30) 28%,
      rgba(244, 165, 184, 0.10) 55%,
      rgba(244, 165, 184, 0) 78%),
    /* Blue drop — larger, lower-right area inside the card */
    radial-gradient(circle 340px at 70% 68%,
      rgba(187, 200, 229, 0.50) 0%,
      rgba(187, 200, 229, 0.28) 30%,
      rgba(187, 200, 229, 0.10) 58%,
      rgba(187, 200, 229, 0) 80%),
    var(--ivory-warm);
  padding: 56px 48px;
  border-radius: 14px;
  border: 1px solid rgba(232, 155, 175, 0.22);
  box-shadow: 0 24px 56px -28px rgba(212, 120, 150, 0.22),
              0 6px 16px -10px rgba(143, 163, 201, 0.15);
  position: relative;
  overflow: hidden;
}
/* Sparkle constellation — eight small four-point-ish dots (five rose,
   three cloud-blue, mixed sizes) scattered across the card. Same
   twinkle motif as the nav and home hero, so it reads as part of
   the same visual language. Sits above the background gradient but
   below content — content is lifted via z-index below. */
.contact-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 2.2px at 24% 14%, rgba(212, 120, 150, 0.70) 0%, rgba(212, 120, 150, 0) 100%),
    radial-gradient(circle 2.6px at 74% 26%, rgba(143, 163, 201, 0.60) 0%, rgba(143, 163, 201, 0) 100%),
    radial-gradient(circle 1.8px at 44% 40%, rgba(212, 120, 150, 0.55) 0%, rgba(212, 120, 150, 0) 100%),
    radial-gradient(circle 2.4px at 86% 52%, rgba(143, 163, 201, 0.55) 0%, rgba(143, 163, 201, 0) 100%),
    radial-gradient(circle 2px   at 20% 58%, rgba(212, 120, 150, 0.55) 0%, rgba(212, 120, 150, 0) 100%),
    radial-gradient(circle 2.6px at 64% 72%, rgba(143, 163, 201, 0.60) 0%, rgba(143, 163, 201, 0) 100%),
    radial-gradient(circle 2px   at 30% 82%, rgba(212, 120, 150, 0.55) 0%, rgba(212, 120, 150, 0) 100%),
    radial-gradient(circle 2.2px at 82% 90%, rgba(143, 163, 201, 0.55) 0%, rgba(143, 163, 201, 0) 100%);
  animation: contactSparkle 4.8s ease-in-out infinite;
  z-index: 0;
}
/* Lift every direct child above the sparkle layer so content stays on top. */
.contact-card > * {
  position: relative;
  z-index: 1;
}
@keyframes contactSparkle {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1;   }
}
@media (prefers-reduced-motion: reduce) {
  .contact-card::before { animation: none; opacity: 0.75; }
}
.contact-card .eyebrow { margin-bottom: 32px; }
.contact-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.contact-card h3 em { font-style: normal; color: var(--cloud-blue-deep); }
.contact-card .body-text { margin-bottom: 36px; }

.contact-item {
  padding: 20px 0;
  border-top: 1px solid rgba(42, 36, 56, 0.15);
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.contact-item:last-of-type { border-bottom: 1px solid rgba(42, 36, 56, 0.15); }
.contact-item-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-item-detail { flex: 1; }
.contact-item-label {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
  font-weight: 600;
}
.contact-item-value {
  font-family: var(--font);
  font-size: 16px;
  color: var(--ink);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.contact-item-value a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.contact-item-value a:hover { color: var(--ink-soft); }
.contact-item-value .small {
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 400;
  display: block;
  margin-top: 4px;
  letter-spacing: 0;
}

.form-wrap { position: relative; }
.form-wrap h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.form-wrap h3 em { font-style: normal; color: var(--cloud-blue-deep); }
.form-wrap .body-text { margin-bottom: 32px; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.field { display: flex; flex-direction: column; }
.field label {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
  font-weight: 600;
}
.field input,
.field select,
.field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(42, 36, 56, 0.25);
  padding: 12px 0;
  font-family: var(--font);
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.3s var(--ease);
  border-radius: 0;
  font-weight: 400;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-mute); font-weight: 300; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-bottom-color: var(--ink); }
.field textarea { resize: vertical; min-height: 80px; }
.field-full { grid-column: 1 / -1; }
.form-submit {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.form-fine { font-size: 12px; color: var(--ink-mute); }

.safety-near {
  background: var(--ivory);
  padding: 64px 48px;
  border-radius: 4px;
  border: 1px solid rgba(232, 155, 175, 0.15);
}
.safety-near-head { text-align: center; margin-bottom: 40px; }
.safety-near-head .eyebrow { justify-content: center; margin-bottom: 18px; }
.safety-near-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 38px);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.safety-near-head h3 em { font-style: normal; color: var(--cloud-blue-deep); }
.safety-near-head .lede { max-width: 540px; margin: 16px auto 0; font-size: 16px; }
.safety-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.safety-col h5 {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 20px;
}
.safety-list { list-style: none; }
.safety-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(232, 155, 175, 0.3);
  font-size: 13px;
  color: var(--ink-soft);
  gap: 12px;
}
.safety-list li:last-child { border-bottom: none; }
.safety-list .dist {
  font-weight: 600;
  color: var(--gold-deep);
  white-space: nowrap;
  font-size: 13px;
}

/* ------------------------------------------------------------------------
   FOOTER (shared)
   ------------------------------------------------------------------------ */
.footer {
  background: var(--ink);
  color: var(--ivory);
  padding: 40px var(--gutter) 20px;
  position: relative;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.footer-inner { max-width: var(--max-width); margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(232, 155, 175, 0.2);
}
.footer-logo { margin-bottom: 18px; }
.footer-logo img { max-height: 68px; width: auto; }
.footer-blurb {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(250, 246, 240, 0.65);
  margin: 12px 0;
  max-width: 280px;
  letter-spacing: 0;
}
.footer h6 {
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 16px;
  font-weight: 600;
}
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 8px; }
.footer ul a,
.footer-text {
  color: rgba(250, 246, 240, 0.7);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s var(--ease);
}
.footer ul a:hover { color: var(--champagne); }
.footer-text { line-height: 1.6; display: block; }
.footer-text strong { color: var(--ivory); font-weight: 600; }

.footer-bottom {
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-registration {
  font-size: 12px;
  color: rgba(250, 246, 240, 0.5);
  line-height: 1.7;
}
.footer-registration strong { color: var(--champagne); font-weight: 600; }
.footer-legal a {
  color: rgba(250, 246, 240, 0.5);
  text-decoration: none;
  font-size: 12px;
  margin-left: 20px;
  transition: color 0.3s var(--ease);
}
.footer-legal a:hover { color: var(--champagne); }

/* ------------------------------------------------------------------------
   WHATSAPP FLOAT (shared)
   ------------------------------------------------------------------------ */
.wa-float {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  z-index: 90;
  transition: all 0.3s var(--ease);
}
.wa-float:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5);
}

/* ------------------------------------------------------------------------
   SCROLL ANIMATIONS
   ------------------------------------------------------------------------ */
/* PROGRESSIVE ENHANCEMENT: content is visible by default.
   Only when JS adds .has-js to <html> do we hide-then-animate. */
.reveal {
  transition:
    opacity 1.6s cubic-bezier(0.32, 0.72, 0.34, 1),
    transform 1.6s cubic-bezier(0.32, 0.72, 0.34, 1);
  will-change: opacity, transform;
}
html.has-js .reveal {
  opacity: 0;
  transform: translateY(70px) scale(0.985);
}
html.has-js .reveal.in {
  opacity: 1;
  transform: translateY(0) scale(1);
  will-change: auto;
}

/* ------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .nav-links a { font-size: 10.5px; letter-spacing: 0.18em; }
  .nav-links { gap: clamp(14px, 2vw, 32px); }
}

@media (max-width: 1024px) {
  :root { --nav-height: 112px; }
  .nav-links-row { display: none; }
  .menu-toggle {
    display: flex;
    position: absolute;
    top: 50%;
    right: var(--gutter);
    transform: translateY(-50%);
  }
  .nav-logo-row { padding: 14px var(--gutter); border-bottom: none; }
  .nav-logo img { max-height: 82px; }
  .nav.scrolled .nav-logo img { max-height: 64px; }
  .nav-logo-fallback .lg-name { font-size: 22px; }
  .nav-logo-fallback .lg-tag { font-size: 8px; }

  /* Nav decoration adapts for the compact mobile nav (112px tall):
     sparkles reduce in size and shift closer to the edges so they
     don't crowd the menu-toggle. */
  .nav::after {
    background-size:
      7px 7px, 6px 6px, 5px 5px, 8px 8px, 5px 5px,
      5px 5px, 8px 8px, 5px 5px, 6px 6px, 7px 7px;
    background-position:
      4% 22%, 11% 62%, 17% 32%, 23% 65%, 28% 20%,
      72% 20%, 77% 65%, 83% 32%, 89% 62%, 96% 22%;
    opacity: 0.55;
  }

  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-halo { display: none; }
  .hero-visual { max-width: 480px; margin: 0 auto; }

  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  .tracking-grid { grid-template-columns: 1fr; gap: 60px; }
  .phone-frame { width: 240px; height: 480px; }

  .map-card { grid-template-columns: 1fr; }
  .map-embed { min-height: 360px; }

  .socials-list { grid-template-columns: 1fr; gap: 14px; max-width: 400px; }

  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .pillars { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .founders-grid { grid-template-columns: 1fr; }

  .crib-rooms { grid-template-columns: 1fr; gap: 20px; }

  .safety-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }

  .partnership-intro { grid-template-columns: 1fr; }
  .partnership-tiers { grid-template-columns: 1fr; gap: 20px; }

  .contact-grid { grid-template-columns: 1fr; }
  .safety-cols { grid-template-columns: 1fr; gap: 28px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 640px) {
  :root { --section-y: 48px; --gutter: 24px; }

  /* Clear the fixed mobile nav (~110px tall: 82px logo + padding). The old
     60px let the hero tuck under the nav / against the banner line. */
  body { padding-top: 110px; }

  .hero { min-height: auto; padding: 60px var(--gutter); }
  /* Sub-page heroes: equal top & bottom gap so the band is symmetric, and
     generous enough to sit clear of the top seam line. */
  .page-hero { padding-top: 72px; padding-bottom: 72px; }
  .page-hero .eyebrow { margin-bottom: 26px; }
  .hero-cta-group .btn { padding: 14px 22px; font-size: 11px; }

  .play-icon { width: 72px; height: 72px; }
  .play-icon::before { width: 72px; height: 72px; }

  .trust-grid { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .safety-grid { grid-template-columns: 1fr; gap: 24px; }

  .form-row { grid-template-columns: 1fr; }
  .form-submit { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-legal a { margin-left: 0; margin-right: 16px; }

  .contact-card, .safety-near { padding: 36px 24px; }
  .bespoke { padding: 56px 24px; }
  .scroll-cue { display: none; }
  .map-info { padding: 32px 24px; }

  .phone-frame { width: 220px; height: 440px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------------
   CARE LEVELS · Tier cards (no prices, inquiry-based)
   ------------------------------------------------------------------------ */
.care-levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 0 0 100px;
}
.care-tier {
  background: var(--ivory);
  border: 1px solid rgba(232, 155, 175, 0.22);
  border-radius: 4px;
  padding: 56px 36px 40px;
  position: relative;
  transition: all 0.5s var(--ease);
  display: flex;
  flex-direction: column;
}
.care-tier:hover {
  border-color: var(--gold-deep);
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -20px rgba(212, 120, 150, 0.30);
}
.care-tier.featured {
  background: var(--grad-card-warm);
  border-color: var(--gold);
  box-shadow: 0 24px 50px -20px rgba(212, 120, 150, 0.2);
}
.care-tier-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grad-gold);
  color: var(--ivory);
  padding: 6px 18px;
  border-radius: 100px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(232, 155, 175, 0.4);
}
.care-tier-ratio {
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}
.care-tier-name {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
  color: var(--cloud-blue-deep);
}
.care-tier-name em { font-style: normal; color: var(--ink); }
.care-tier-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.care-tier-list {
  list-style: none;
  margin-bottom: 32px;
  flex: 1;
}
.care-tier-list li {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  padding: 10px 0 10px 26px;
  position: relative;
  border-bottom: 1px solid rgba(232, 155, 175, 0.12);
}
.care-tier-list li:last-child { border-bottom: none; }
.care-tier-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 14px;
  height: 14px;
  background-color: var(--ink-soft);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
}
.care-tier-cta {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(232, 155, 175, 0.25);
  transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}
.care-tier-cta:hover {
  color: var(--ink);
  gap: 14px;
}

/* ------------------------------------------------------------------------
   FLEXI OPTIONS · Daycare / Nightcare / Bespoke
   ------------------------------------------------------------------------ */
.flexi-strip {
  background: var(--ivory);
  border: 1px solid rgba(232, 155, 175, 0.2);
  border-radius: 4px;
  padding: 56px clamp(28px, 5vw, 56px);
  margin-bottom: 100px;
  position: relative;
  overflow: hidden;
}
.flexi-strip::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 1px;
  background: var(--gold);
}
.flexi-head { text-align: center; margin-bottom: 40px; }
.flexi-head .eyebrow { justify-content: center; margin-bottom: 18px; }
.flexi-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 38px);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 14px;
}
.flexi-head h3 em { font-style: normal; color: var(--cloud-blue-deep); }
.flexi-head .body-text { max-width: 580px; margin: 0 auto; }

.flexi-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.flexi-option {
  padding: 32px 24px;
  background: var(--ivory);
  border-radius: 4px;
  border: 1px solid rgba(232, 155, 175, 0.18);
  transition: all 0.4s var(--ease);
}
.flexi-option:hover {
  border-color: var(--gold-deep);
  transform: translateY(-2px);
}
.flexi-option .smallcaps {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--ink);
  margin-bottom: 8px;
  display: block;
}
.flexi-option h4 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 8px;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--cloud-blue-deep);
}
.flexi-option h4 em { font-style: normal; color: var(--ink); }
.flexi-option p {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .care-levels { grid-template-columns: 1fr; gap: 20px; }
  .flexi-options { grid-template-columns: 1fr; gap: 16px; }
}

/* ------------------------------------------------------------------------
   HERO SLOGAN · accommodate the longer brand-positioning eyebrow
   ------------------------------------------------------------------------ */
.hero-content .eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  flex-wrap: wrap;
  line-height: 1.6;
}
@media (max-width: 640px) {
  .hero-content .eyebrow {
    font-size: 9.5px;
    letter-spacing: 0.18em;
  }
  .hero-content .eyebrow::before { display: none; }
}

/* Slogan in footer, below the logo - the primary brand statement */
.footer-slogan {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-top: 14px;
  line-height: 1.6;
  max-width: 320px;
}

/* WhatsApp float - animated halo pulse */
.wa-float::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.25);
  z-index: -1;
  animation: waPulse 2.4s ease-out infinite;
}
@keyframes waPulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}
@media (max-width: 640px) {
  .wa-float {
    width: 54px;
    height: 54px;
    bottom: 20px;
    right: 20px;
  }
}

/* WhatsApp CTA block (used on contact page) */
.wa-cta-block {
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.06), rgba(18, 140, 126, 0.04));
  border: 1px solid rgba(37, 211, 102, 0.25);
  border-radius: 4px;
  padding: 32px 36px;
  margin-bottom: 60px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.wa-cta-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.3);
}
.wa-cta-text { flex: 1; min-width: 200px; }
.wa-cta-text strong {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  display: block;
  margin-bottom: 4px;
}
.wa-cta-text span {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.wa-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: white;
  text-decoration: none;
  border-radius: 100px;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: all 0.3s var(--ease);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.3);
}
.wa-cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.4);
}

/* Safety-near columns: support 4 (with Landmarks) */
.safety-cols.cols-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
@media (max-width: 1024px) {
  .safety-cols.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .safety-cols.cols-4 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------------
   LEGAL PAGES · Privacy Policy & Terms styling
   ------------------------------------------------------------------------ */
.legal-section {
  padding: 60px var(--gutter) var(--section-y);
  background: transparent;
}
.legal-wrap {
  max-width: 760px;
  margin: 0 auto;
}
.legal-meta {
  text-align: center;
  margin-bottom: 56px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(42, 36, 56, 0.15);
}
.legal-meta-row {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.legal-meta-row strong {
  color: var(--ink);
  font-weight: 700;
}

.legal-content h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  color: var(--ink);
  margin: 60px 0 20px;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 32px 0 12px;
  letter-spacing: -0.005em;
}
.legal-content p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.legal-content ul {
  list-style: none;
  margin: 18px 0;
  padding-left: 0;
}
.legal-content ul li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
  padding-left: 22px;
  position: relative;
  margin-bottom: 10px;
}
.legal-content ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-soft);
}
.legal-content a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(42, 36, 56, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.3s var(--ease);
}
.legal-content a:hover {
  text-decoration-color: var(--ink);
}
.legal-content strong {
  font-weight: 600;
  color: var(--ink);
}
.legal-content .contact-block {
  margin-top: 24px;
  padding: 24px 28px;
  background: var(--grad-card-dreamy);
  border-radius: 4px;
  border-left: 3px solid var(--ink);
  font-size: 14px;
  line-height: 1.7;
}
.legal-content .contact-block strong {
  display: block;
  margin-bottom: 6px;
}

/* ------------------------------------------------------------------------
   FOUNDER PORTRAITS — Real photo support
   ------------------------------------------------------------------------ */
.founder-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 50%;
  display: block;
}

/* ------------------------------------------------------------------------
   SECTIONS WITH SOFT PHOTO BACKGROUNDS
   ------------------------------------------------------------------------ */
.philosophy-brief.with-bg-photo {
  background:
    linear-gradient(rgba(251, 247, 242, 0.92), rgba(252, 238, 241, 0.94)),
    url('Image/Baby1.jpeg') center / cover no-repeat;
  background-attachment: scroll, scroll;
}

.bespoke.with-bg-photo {
  background:
    linear-gradient(135deg, rgba(252, 238, 241, 0.93), rgba(244, 220, 229, 0.90)),
    url('Image/FamilyPortrait2.jpeg') center 30% / cover no-repeat;
}

.socials.with-bg-photo {
  background:
    linear-gradient(180deg, rgba(252, 238, 241, 0.93), rgba(249, 240, 234, 0.95)),
    url('Image/Baby2.jpeg') center 30% / cover no-repeat;
}

/* ------------------------------------------------------------------------
   SAFETY MAP — Interactive map of nearby services
   ------------------------------------------------------------------------ */
.safety-map-section {
  background: var(--ivory);
  padding: 56px clamp(24px, 4vw, 48px);
  border-radius: 4px;
}
.safety-map-section .safety-near-head { margin-bottom: 40px; }

.map-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 28px;
  margin-top: 8px;
}
#safety-map {
  height: 560px;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(232, 155, 175, 0.22);
  box-shadow: 0 24px 50px -20px rgba(168, 137, 93, 0.18);
  z-index: 1;
}

.map-legend {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.map-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.map-filter {
  padding: 8px 14px;
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--ivory);
  border: 1px solid var(--ink);
  border-radius: 100px;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.map-filter:hover { background: rgba(42, 36, 56, 0.06); color: var(--ink); }
.map-filter.active {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
  box-shadow: 0 4px 12px rgba(42, 36, 56, 0.25);
}

.map-locations {
  list-style: none;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 8px;
  margin: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(42, 36, 56, 0.3) transparent;
}
.map-locations::-webkit-scrollbar { width: 6px; }
.map-locations::-webkit-scrollbar-thumb {
  background: rgba(42, 36, 56, 0.3);
  border-radius: 3px;
}

.map-location {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 12px 14px 6px;
  border-bottom: 1px dashed rgba(42, 36, 56, 0.18);
  cursor: pointer;
  transition: all 0.3s var(--ease);
  border-radius: 4px;
}
.map-location:hover {
  background: rgba(252, 238, 241, 0.6);
  padding-left: 12px;
}
.map-location.is-us {
  background: linear-gradient(90deg, rgba(248, 138, 168, 0.08), transparent);
  border-bottom-color: rgba(232, 134, 160, 0.3);
}
.map-location.hidden { display: none; }

.map-loc-marker {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid white;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
}
.map-loc-marker > svg {
  width: 14px;
  height: 14px;
}
.map-loc-marker.us {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #F88AA8, #E886A0);
  box-shadow: 0 4px 12px rgba(232, 134, 160, 0.4);
}
.map-loc-marker.us > svg { width: 18px; height: 18px; }
.map-loc-marker.medical     { background: linear-gradient(135deg, #ED6B6B, #D14444); }
.map-loc-marker.police      { background: linear-gradient(135deg, #6B82E5, #4660C9); }
.map-loc-marker.fire        { background: linear-gradient(135deg, #F49770, #DB6A40); }
.map-loc-marker.landmark    { background: linear-gradient(135deg, #D6B585, #B58B58); }
.map-loc-marker.confinement { background: linear-gradient(135deg, #A893C2, #7E6A98); }

.map-loc-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.map-loc-info .map-loc-text { min-width: 0; flex: 1; }
.map-loc-info strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  display: block;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.map-loc-info .cat {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: block;
  margin-top: 3px;
  font-weight: 500;
}
.map-loc-info .dist {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* Leaflet custom marker styles - elegant teardrop pins */
.leaflet-custom-icon {
  background: transparent !important;
  border: none !important;
}
.custom-marker {
  width: 30px;
  height: 30px;
  background: var(--marker-color, #888);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2.5px solid white;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22), 0 2px 4px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.custom-marker > svg {
  transform: rotate(45deg);
  color: white;
  width: 14px;
  height: 14px;
}
.custom-marker.us {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #F88AA8, #E886A0);
  border: 3px solid white;
  box-shadow: 0 6px 20px rgba(232, 134, 160, 0.55), 0 2px 6px rgba(232, 134, 160, 0.3);
}
.custom-marker.us > svg {
  width: 20px;
  height: 20px;
}
.custom-marker.us::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 2px solid rgba(232, 134, 160, 0.5);
  border-radius: 50%;
  animation: pinPulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes pinPulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}
.custom-marker.medical     { background: linear-gradient(135deg, #ED6B6B, #D14444); }
.custom-marker.police      { background: linear-gradient(135deg, #6B82E5, #4660C9); }
.custom-marker.fire        { background: linear-gradient(135deg, #F49770, #DB6A40); }
.custom-marker.landmark    { background: linear-gradient(135deg, #D6B585, #B58B58); }
.custom-marker.confinement { background: linear-gradient(135deg, #A893C2, #7E6A98); }

/* Leaflet popup styling */
.leaflet-popup-content-wrapper {
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(168, 137, 93, 0.25);
  padding: 4px 8px;
}
.leaflet-popup-content {
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink);
  margin: 10px 14px;
}
.leaflet-popup-content strong {
  font-weight: 700;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: -0.01em;
}
.leaflet-popup-content .popup-cat {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-top: 4px;
  display: block;
  font-weight: 600;
}
.leaflet-popup-content .popup-dist {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 2px;
  font-weight: 500;
}
.leaflet-popup-tip {
  box-shadow: 0 8px 24px rgba(168, 137, 93, 0.25);
}

@media (max-width: 1024px) {
  .map-grid { grid-template-columns: 1fr; }
  #safety-map { height: 440px; }
  .map-locations { max-height: 360px; }
}
@media (max-width: 640px) {
  #safety-map { height: 380px; }
  .safety-map-section { padding: 40px 20px; }
}

/* ------------------------------------------------------------------------
   TWO-COLUMN LAYOUTS · Photo alongside text (replaces with-bg-photo)
   ------------------------------------------------------------------------ */
.photo-text-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: stretch;
  max-width: 1240px;
  margin: 0 auto;
}
.photo-text-grid.reverse {
  direction: rtl;
}
.photo-text-grid.reverse > * {
  direction: ltr;
}

.photo-column {
  position: relative;
  border-radius: 4px;
  min-height: 320px;
  background: transparent;
  border: none;
  box-shadow: none;
}
.photo-column img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 1.2s var(--ease);
}
.photo-column:hover img {
  transform: scale(1.03);
}
.photo-column::after { display: none; }

.text-column {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.text-column .eyebrow { display: inline-block; align-self: flex-start; }
.text-column h2,
.text-column h3 {
  text-align: left;
}
.text-column .body-text,
.text-column .lede {
  text-align: left;
  max-width: 520px;
}
.text-column .pullquote {
  text-align: left;
  border-left: 3px solid var(--gold);
  border-top: none;
  border-bottom: none;
  padding: 8px 0 8px 24px;
  margin: 28px 0;
}
.text-column .pullquote::before,
.text-column .pullquote::after {
  display: none;
}

@media (max-width: 1024px) {
  .photo-text-grid,
  .photo-text-grid.reverse {
    grid-template-columns: minmax(0, 1fr);   /* min 0 → track can't be forced wide by the image */
    direction: ltr;
    gap: 32px;
    justify-items: center;
  }
  .photo-column { aspect-ratio: 5/4; max-height: 480px; width: 100%; max-width: 480px; min-width: 0; }
  .text-column { width: 100%; }
  .text-column .body-text,
  .text-column .lede {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .text-column h2,
  .text-column h3 { text-align: center; }
  .text-column .pullquote {
    text-align: center;
    border-left: none;
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
    padding: 16px 0;
    margin: 28px auto;
    max-width: 420px;
  }
}

/* Stay Connected variant - photo on left, socials cards beside */
.socials-with-photo .socials-inner { max-width: 1240px; }
.socials-with-photo .socials-grid-2col {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 6vw, 70px);
  align-items: stretch;
  margin-bottom: 32px;
}
.socials-with-photo .socials-content { text-align: left; }
.socials-with-photo .socials-content .eyebrow { display: inline-block; }
.socials-with-photo .socials-content h2,
.socials-with-photo .socials-content p { text-align: left; }
.socials-with-photo .socials-content .lede { max-width: 520px; }
.socials-with-photo .socials-grid {
  margin-top: 32px;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
  .socials-with-photo .socials-grid-2col {
    grid-template-columns: minmax(0, 1fr);   /* min 0 → image can't stretch the track */
    gap: 32px;
    justify-items: center;
  }
  .socials-with-photo .photo-column {
    width: 100%;
    max-width: 480px;
    min-width: 0;
  }
  .socials-with-photo .socials-content { text-align: center; width: 100%; }
  .socials-with-photo .socials-content h2,
  .socials-with-photo .socials-content p { text-align: center; }
  .socials-with-photo .socials-content .lede {
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 640px) {
  .socials-with-photo .socials-grid { grid-template-columns: 1fr; }
}

/* Bespoke section - two-column variant */
.bespoke-with-photo { text-align: left !important; }
.bespoke-with-photo .bespoke-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(36px, 5vw, 60px);
  align-items: stretch;
}
.bespoke-with-photo .bespoke-content {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bespoke-with-photo .bespoke-content .eyebrow { display: inline-block; }
.bespoke-with-photo .bespoke-content h3 {
  text-align: left;
  margin-bottom: 18px;
}
.bespoke-with-photo .bespoke-content .lede {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}
.bespoke-with-photo .bespoke-photo {
  min-height: 100%;
  aspect-ratio: auto;
}
.bespoke-with-photo .bespoke-meta { text-align: left; }

@media (max-width: 1024px) {
  .bespoke-with-photo .bespoke-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    justify-items: center;
  }
  .bespoke-with-photo .bespoke-content { text-align: center; width: 100%; }
  .bespoke-with-photo .bespoke-content h3,
  .bespoke-with-photo .bespoke-content .lede { text-align: center; }
  .bespoke-with-photo .bespoke-meta { text-align: center; }
  .bespoke-with-photo .bespoke-photo {
    aspect-ratio: 5/4;
    max-height: 380px;
    width: 100%;
    max-width: 480px;
  }
}

/* ------------------------------------------------------------------------
   BLUE ACCENT VARIANTS · Gender-neutral colour mixing
   ------------------------------------------------------------------------ */

/* Blue eyebrow variant - use .eyebrow.blue */
.eyebrow.blue { color: var(--cloud-blue-deep); }
.eyebrow.blue::before { background: var(--cloud-blue-deep); }

/* Trust ribbon - blue icon variant */
.safety-icon.blue {
  color: var(--cloud-blue-deep);
}
.trust-icon.blue {
  color: var(--cloud-blue-deep);
  background: linear-gradient(135deg, rgba(187, 200, 229, 0.18), rgba(143, 163, 201, 0.10));
  border-color: rgba(143, 163, 201, 0.35);
}

/* Crib room - blue accent for night/Nightingale */
.crib-room.blue .crib-room-icon {
  background: linear-gradient(135deg, rgba(187, 200, 229, 0.22), rgba(143, 163, 201, 0.12));
  border-color: rgba(143, 163, 201, 0.45);
  color: var(--cloud-blue-deep);
}
.crib-room.blue .crib-room-age {
  color: var(--cloud-blue-deep);
}
.crib-room.blue .crib-room-age::before {
  background: var(--cloud-blue-deep);
}

/* Service card - blue accent for postnatal/emotional services */
.service-card.blue .service-icon {
  color: var(--cloud-blue-deep);
  background: linear-gradient(135deg, rgba(187, 200, 229, 0.20), rgba(143, 163, 201, 0.10));
  border-color: rgba(143, 163, 201, 0.35);
}

/* Blue button variant */
.btn-blue {
  background: var(--grad-blue);
  color: var(--ivory);
  border: none;
}
.btn-blue:hover {
  box-shadow: 0 8px 22px rgba(143, 163, 201, 0.4);
}

/* Service mark blue variant */
.service-mark.blue { background: var(--cloud-blue-deep); }
.service.blue h4 { color: var(--ink); }
.service.blue:hover { background: var(--blush-whisper); }
.service.blue:hover h4 { color: var(--cloud-blue-deep); }

/* ------------------------------------------------------------------------
   CARE TIER · Blue variant (for the featured Concierge Care)
   ------------------------------------------------------------------------ */
.care-tier.blue .care-tier-ratio { color: var(--ink); }
.care-tier.blue .care-tier-name em { color: var(--ink); }
.care-tier.blue .care-tier-list li::before { background: var(--ink-soft); }
.care-tier.blue .care-tier-cta { color: var(--gold-deep); }
.care-tier.blue .care-tier-cta:hover { color: var(--ink); }

/* Featured card: dreamy blue-pink blend on the BOX — soft pink wash top-left,
   soft blue wash bottom-right, over cream. */
.care-tier.featured.blue {
  background:
    radial-gradient(ellipse 135% 75% at 10% 6%, rgba(232, 155, 175, 0.32) 0%, rgba(251, 247, 242, 0) 62%),
    radial-gradient(ellipse 135% 75% at 90% 94%, rgba(143, 163, 201, 0.32) 0%, rgba(251, 247, 242, 0) 62%),
    var(--ivory);
  border-color: var(--gold);
}
.care-tier.featured.blue .care-tier-badge {
  background: var(--grad-gold);
  color: var(--ivory);
  box-shadow: 0 4px 14px rgba(232, 155, 175, 0.4);
}
.care-tier.featured:hover {
  border-color: var(--gold-deep);
  transform: translateY(-6px);
  box-shadow: 0 32px 60px -20px rgba(212, 120, 150, 0.4);
}

/* Baby-related em words use pink override; default em is blue per color-coded logic */
h1 em.pink, h2 em.pink, h3 em.pink, h4 em.pink { color: var(--gold-deep) !important; }
/* ========================================================================
   FORM SUCCESS STATE — shown in place of #contactForm after submit.
   Uses the same dreamy blend as legal contact-block, dark accents.
   ======================================================================== */
.form-success {
  margin-top: 24px;
  padding: 48px 36px;
  background: var(--grad-card-dreamy);
  border-radius: 6px;
  border-left: 3px solid var(--ink);
  text-align: left;
}
.form-success-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1px solid var(--ink);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.form-success h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: -0.015em;
}
.form-success p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0;
}
.form-success p a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(42, 36, 56, 0.35);
  text-underline-offset: 3px;
}

/* Invalid field flash — quick dark-ink pulse on the underline */
.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid {
  border-bottom-color: var(--ink);
  animation: ba-shake 0.42s cubic-bezier(.36,.07,.19,.97);
}
@keyframes ba-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}

/* ========================================================================
   COOKIE CONSENT BAR — fixed at bottom-left, subtle, dismissible.
   Sits above WhatsApp float on small screens by stacking on the left.
   ======================================================================== */
.cookie-bar {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 999;
  max-width: 380px;
  padding: 16px 20px;
  background: var(--ivory);
  border: 1px solid rgba(42, 36, 56, 0.15);
  border-radius: 4px;
  box-shadow: 0 14px 40px -16px rgba(42, 36, 56, 0.25);
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
}
.cookie-bar.is-visible { opacity: 1; transform: translateY(0); }
.cookie-bar p { margin: 0; flex: 1; }
.cookie-bar p a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(42, 36, 56, 0.35);
  text-underline-offset: 2px;
}
.cookie-accept {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 9px 18px;
  background: var(--ink);
  color: var(--ivory);
  border: 1px solid var(--ink);
  border-radius: 100px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s var(--ease);
}
.cookie-accept:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
@media (max-width: 540px) {
  .cookie-bar {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .cookie-accept { width: 100%; }
}

/* ========================================================================
   MOBILE / TABLET OVERFLOW SAFETY
   Comprehensive pass to prevent any content from extending past viewport.
   Ordered narrowest-to-widest so earlier rules override later ones.
   ======================================================================== */

/* Universal text-wrap safety: long URLs, emails, addresses, etc. never escape their container */
.contact-item-value,
.contact-item-value a,
.legal-content,
.legal-content p,
.legal-content .contact-block,
.map-loc-text,
.body-text,
.lede,
.tier-list li,
.crib-room-features li,
.care-tier-list li,
.legal-content li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Flex children need min-width: 0 to shrink below their content width */
.contact-item-detail,
.map-loc-info,
.map-loc-text,
.flexi-option,
.tracking-feature {
  min-width: 0;
}

/* Tablet range (≤ 1024px) — tighten card paddings so they sit comfortably */
@media (max-width: 1024px) {
  .contact-card { padding: 40px 32px; }
  .form-wrap { padding: 0; }
  .care-tier { padding: 36px 28px; }
  .map-info { padding: 36px 28px; }
  .safety-near { padding: 36px 28px; }
  .legal-content .contact-block { padding: 20px 22px; }
  .contact-grid { gap: 36px; margin-bottom: 56px; }
  .bespoke { padding: 48px 28px; }
}

/* Mid-mobile range (≤ 768px) — forms collapse, card paddings tighten further */
@media (max-width: 768px) {
  .form-row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .form-row .field { margin-bottom: 18px; }
  .contact-card { padding: 32px 22px; }
  .care-tier { padding: 28px 22px; }
  .map-info { padding: 28px 22px; }
  .footer-grid { gap: 32px; }
}

/* Narrow phone (≤ 480px) — tightest everything */
@media (max-width: 480px) {
  :root { --gutter: 18px; }
  .contact-card,
  .form-wrap,
  .map-info { padding: 24px 18px; }
  .contact-item { gap: 12px; }
  .contact-item-icon { width: 28px; height: 28px; }
  .contact-item-icon svg { width: 18px; height: 18px; }
  .contact-item-value { font-size: 15px; }
  .contact-item-value .small { font-size: 12px; }
  .contact-card h3 { font-size: clamp(22px, 7vw, 28px); }
  .legal-content .contact-block { padding: 16px 18px; font-size: 13px; }
  .legal-content h2 { font-size: clamp(20px, 6vw, 24px); }
  .legal-content h3 { font-size: 16px; }
  /* Tighten WhatsApp float on tiny screens so it doesn't overlap content */
  .wa-float { width: 52px; height: 52px; right: 16px; bottom: 16px; }
  .cookie-bar { padding: 14px 16px; font-size: 12px; }
}

/* Carousel arrows: keep within frame on mobile (they sometimes drift off edges) */
@media (max-width: 1024px) {
  .carousel-arrow.prev { left: 8px; }
  .carousel-arrow.next { right: 8px; }
}

/* ========================================================================
   HARD OVERFLOW GUARDS — last resort caps so no element exceeds its parent
   ======================================================================== */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Grid/flex items that hold variable text content: force shrinkability */
.contact-card,
.form-wrap,
.care-tier,
.flexi-option,
.tier,
.service,
.crib-room,
.legal-content .contact-block,
.map-info,
.tracking-feature {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* WhatsApp float: ensure it always sits inside viewport and above the cookie bar */
.wa-float {
  z-index: 950;
}
@media (max-width: 540px) {
  /* When the cookie bar is showing, bump the WA float up so it doesn't overlap */
  body:has(.cookie-bar.is-visible) .wa-float {
    bottom: 92px;
  }
}

/* ========================================================================
   FINAL MOBILE OVERRIDES — placed last so nothing wins against these.
   Uses !important on the critical anti-overflow + hamburger rules.
   ======================================================================== */
@media (max-width: 1024px) {
  /* HAMBURGER must always show on mobile. Force it. */
  .menu-toggle {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    right: var(--gutter) !important;
    transform: translateY(-50%) !important;
    z-index: 5;
  }

  /* Force every card/container to fit its parent. No exceptions. */
  .contact-card,
  .form-wrap,
  .care-tier,
  .flexi-option,
  .tier,
  .service,
  .crib-room,
  .map-info,
  .tracking-feature,
  .legal-content .contact-block,
  .bespoke,
  .about-content,
  .text-column,
  .socials-content {
    max-width: 100% !important;
    width: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Sections: never wider than the content area (100%, scrollbar-safe). */
  section, .section, .page-hero {
    max-width: 100%;
    overflow-x: clip;
  }

  /* Tighten section gaps on mobile so the page doesn't feel empty */
  :root { --section-y: clamp(36px, 6vh, 64px); }
}

@media (max-width: 768px) {
  /* Aggressive padding tightening so content has more room */
  .contact-card { padding: 28px 20px !important; }
  .form-wrap    { padding: 0 !important; }
  .care-tier    { padding: 28px 22px !important; }
  .map-info     { padding: 28px 22px !important; }
  .legal-content .contact-block { padding: 18px 20px !important; }
  .bespoke      { padding: 40px 22px !important; }

  /* Tighter section gaps */
  :root { --section-y: clamp(32px, 5vh, 52px); }

  /* Carousel: less bottom margin */
  .carousel-wrap { margin-bottom: 40px; }

  /* Footer: less padding at top */
  .footer { padding-top: 44px; }
}

@media (max-width: 480px) {
  :root { --gutter: 16px; --section-y: 32px; }
  .contact-card { padding: 22px 16px !important; }
  .map-info     { padding: 22px 16px !important; }
  .care-tier    { padding: 22px 16px !important; }
  .bespoke      { padding: 32px 16px !important; }
  .footer { padding: 40px 16px 20px; }
}

/* ========================================================================
   JUSTIFIED PARAGRAPH ALIGNMENT — neat, even line lengths.
   Applied to long-form body copy; preserved center alignment in heroes.
   ======================================================================== */
.body-text,
.legal-content p,
.about-content .body-text,
.philosophy-brief-inner .body-text,
.grow-with-us .body-text,
.bespoke-content .body-text,
.tracking-content > .body-text,
.crib-room p,
.tier .body-text,
.contact-card .body-text,
.form-wrap .body-text,
.socials-content p,
.socials-content .lede {
  /* Justified (even left AND right edges) with hyphenation OFF so a word is
     never split across rows. text-align-last keeps the final short line at
     the start rather than stretched across the width. */
  text-align: justify;
  text-align-last: left;
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
}

/* Centered section intros / hero ledes — justified edges, last line centred
   so they still sit balanced inside their centred sections. */
.page-hero .lede,
.section-head .lede,
.section-head .body-text,
.bespoke .lede,
.map-head h2 + p,
.safety-near-head p,
.socials-inner .lede,
.flexi-head .body-text {
  text-align: justify;
  text-align-last: center;
  hyphens: none;
  -webkit-hyphens: none;
}

/* On very narrow phones, justify can spread words too thin — relax to left there */
@media (max-width: 480px) {
  .body-text,
  .legal-content p,
  .contact-card .body-text,
  .form-wrap .body-text,
  .tier .body-text,
  .crib-room p,
  .about-content .body-text,
  .bespoke-content .body-text {
    text-align: justify;
    text-align-last: left;
    hyphens: none;
    -webkit-hyphens: none;
  }
}

/* ========================================================================
   OVERFLOW: switch `clip` → `hidden` (broader browser support, same effect here)
   And add a viewport-cap on the wrap container as a final guard.
   ======================================================================== */
@media (max-width: 1024px) {
  section, .section, .page-hero {
    overflow-x: hidden !important;
  }
  .wrap,
  .legal-wrap,
  .socials-inner,
  .safety-map-section {
    max-width: 100%;
    overflow-x: hidden;
  }
  /* Photo + text grids: cap to the CONTENT width (100%, which excludes the
     scrollbar) — NOT 100vw, which includes the scrollbar and pushed the right
     edge under it, making the right gap look smaller than the left. */
  .about-content,
  .text-column,
  .bespoke-content,
  .socials-content {
    max-width: 100% !important;
  }
}

/* ========================================================================
   PHOTOS / VISUALS — final cap so no image ever exceeds container on mobile
   ======================================================================== */
@media (max-width: 1024px) {
  /* About-page portrait (10 Jul 2026 rev):
     Removed the fixed 5/4 aspect ratio on mobile — the family photo is
     taller than a wide landscape crop, so cover-fitting was clipping the
     tops of heads. Letting the container follow the image's natural
     dimensions means the full photo shows on phones, uncropped.
     Desktop keeps its original 4/5 aspect (declared at line 1504),
     because this override is scoped to ≤1024px only. */
  .about-visual {
    max-width: 480px !important;
    width: 100% !important;
    margin: 0 auto !important;
    aspect-ratio: auto;
    height: auto;
  }
  /* Founder portraits — keep tidy */
  .founder-portrait {
    max-width: 320px;
    margin: 0 auto;
  }
  /* Hero visual — already capped, reinforce */
  .hero-visual {
    max-width: 480px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  /* Universal image safety — no img can break its container */
  img {
    max-width: 100% !important;
    height: auto;
  }
  /* Images inside aspect-ratio containers keep their object-fit */
  .about-visual img,
  .hero-visual img,
  .photo-column img,
  .bespoke-photo img,
  .crib-room-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  /* But the About-page family portrait shows its full natural height
     on mobile — override the shared rule above so the photo isn't
     cropped by cover-fitting the container. Placed after the shared
     block so it wins by source order. */
  .about-visual img {
    height: auto !important;
    object-fit: contain !important;
  }
}

/* ========================================================================
   PHOTO COLUMN CENTERING — last-pass override
   ======================================================================== */
@media (max-width: 1024px) {
  .photo-text-grid .photo-column,
  .photo-text-grid.reverse .photo-column {
    max-width: 420px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    aspect-ratio: 5/4;
  }
  /* Keep the photo nicely fit (not cropped) — restore contain behavior */
  .photo-text-grid .photo-column img {
    object-fit: cover;  /* fill the box; the photo of a baby looks best filled */
  }
  /* Ensure the parent grid centers single column items horizontally */
  .photo-text-grid {
    justify-items: center !important;
  }
}
/* ========================================================================
   GLOBAL TEXT SCALE — enlarged for readability (site-wide)
   ------------------------------------------------------------------------
   Appended override block. Sits AFTER all rules above so it wins on
   equal-specificity conflicts. Bumps readable text ~10–12% across the
   site without touching any of the tuned declarations above.
   To revert: delete this whole block.
   ======================================================================== */

/* ---- Base prose ---- */
body { font-size: 17px; }
p { font-size: 17px; }
.body-text { font-size: 18px; line-height: 1.75; }
.lede { font-size: clamp(19px, 1.75vw, 23px); line-height: 1.6; }
.pullquote { font-size: clamp(22px, 2.4vw, 30px); }

/* ---- Small labels & caps ---- */
.eyebrow { font-size: 12px; }
.smallcaps { font-size: 13px; }
.small { font-size: 13.5px; }

/* ---- Navigation ---- */
.nav-links a { font-size: 12.5px; }
.mobile-drawer ul li a { font-size: 16px; }

/* ---- Buttons ---- */
.btn { font-size: 14.5px; }

/* ---- Cards: services, tiers, pillars, crib rooms, founders, flexi ---- */
.service p,
.tier p,
.tier .body-text,
.pillar p,
.crib-room p,
.crib-room-sub,
.founder-bio,
.care-tier-desc,
.care-tier-list li,
.flexi-option p,
.tier-list li,
.crib-room-features li { font-size: 16px; line-height: 1.7; }
.service h4,
.tier h4,
.pillar h4,
.flexi-option h4 { font-size: 20px; }
.care-tier-name { font-size: 30px; }
.care-tier-ratio { font-size: 13px; }
.crib-room-name { font-size: 24px; }
.crib-room-age { font-size: 12px; }
.tier-mark { font-size: 13px; }

/* ---- Forms ---- */
.field label { font-size: 12.5px; }
.field input,
.field select,
.field textarea { font-size: 16px; }
.form-fine { font-size: 14px; }
.form-wrap .body-text { font-size: 17px; }
.form-success h3 { font-size: 24px; }
.form-success p { font-size: 16px; }

/* ---- Contact card ---- */
.contact-item-label { font-size: 12px; }
.contact-item-value { font-size: 17px; }
.contact-item-value .small { font-size: 14.5px; }
.contact-item-value a { font-size: 17px; }

/* ---- Legal & FAQ prose ---- */
.legal-content p,
.legal-content li,
.legal-content .contact-block { font-size: 17px; line-height: 1.8; }
.legal-content h2 { font-size: 26px; }
.legal-content h3 { font-size: 20px; }
.legal-meta-row { font-size: 14px; }

/* ---- Footer ---- */
.footer h6 { font-size: 13px; }
.footer ul li a { font-size: 14.5px; }
.footer-text { font-size: 14.5px; }
.footer-slogan { font-size: 14px; }
.footer-blurb { font-size: 15px; }
.footer-registration { font-size: 13px; }
.footer-legal a { font-size: 13px; }

/* ---- Safety-map list & cookie bar ---- */
.map-filter { font-size: 13px; }
.map-loc-text strong { font-size: 15px; }
.map-loc-text .cat { font-size: 12px; }
.map-loc-info .dist { font-size: 13px; }
.cookie-bar p { font-size: 14px; }
.cookie-accept { font-size: 13px; }

/* ---- Mobile: soften the scale so lines don't feel cramped ---- */
@media (max-width: 720px) {
  body, p { font-size: 16px; }
  .body-text { font-size: 17px; }
  .lede { font-size: clamp(17px, 2vw, 20px); }
  .legal-content p,
  .legal-content li { font-size: 16px; }
  .contact-item-value { font-size: 16px; }
  .contact-item-value .small { font-size: 13.5px; }
  .footer ul li a,
  .footer-text { font-size: 14px; }
}

@media (max-width: 480px) {
  .body-text { font-size: 16px; }
  .lede { font-size: 16.5px; }
  .service p,
  .tier p,
  .pillar p,
  .crib-room p,
  .founder-bio,
  .care-tier-desc { font-size: 15.5px; }
}

/* ---- Trust ribbon: align titles to a shared top line ------------------
   Fixes the vertical drift where items with more description text pushed
   their titles up (because each cell was centred independently). Now every
   title sits at the same horizontal line; descriptions flow beneath.
   Uses !important + align-self to guarantee the alignment regardless of
   any earlier rule or browser cache.
   -------------------------------------------------------------------- */
.trust-grid {
  align-items: start !important;
}
.trust-item {
  display: flex !important;
  align-items: flex-start !important;
}
.trust-icon {
  align-self: flex-start !important;
  margin-top: 2px !important;
  flex-shrink: 0;
}
.trust-item strong {
  display: block;
  line-height: 1.3;
}
.trust-item span {
  display: block;
  line-height: 1.55;
}

/* ------------------------------------------------------------------------
   ABOUT PAGE — "Our Belief" intro section
   Editorial column below the hero, narrower and centered for readability.
   ------------------------------------------------------------------------ */
.about-belief-section {
  padding-top: 60px;
  padding-bottom: 40px;
}
.about-belief {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.about-belief p {
  font-size: 17.5px;
  line-height: 1.8;
  color: var(--ink-soft, #4a4a4a);
  margin-bottom: 26px;
}
.about-belief p:last-child {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .about-belief-section { padding-top: 40px; padding-bottom: 20px; }
  .about-belief p { font-size: 16px; line-height: 1.7; margin-bottom: 20px; }
}
/* ------------------------------------------------------------------------
   CRAWLING BABY — animated sprite element
   Uses Image/baby_sprite.png (6-frame crawl cycle, 1488×241 sprite sheet)
   Two variants used on this site:
   - .baby-peek: baby crawls in from the right, pauses, crawls out
   - .baby-slant: baby crawls diagonally from bottom-left up to top-right
   Each combines two animations: frame cycling (steps 6) + position change.
   Applied to: home hero + philosophy-brief, about hero + about-belief.
   ------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------
   CRAWLING BABY — animated sprite element
   [rev 2026-04 · peek only on About hero (no button conflict) · CHECK COMMENT]
   Uses Image/baby_sprite.png (6-frame crawl cycle, 1488×226 sprite sheet)
   Two variants — baby ALWAYS faces natural direction (right):
   - .baby-peek: TINY (~72px), on About hero only (empty space, no buttons)
   - .baby-slant: MEDIUM (~125px), slow linear crawl across text sections
   ------------------------------------------------------------------------ */

/* Ensure host sections properly contain and clip the animated baby */
.hero,
.page-hero,
.philosophy-brief,
.about-belief-section {
  position: relative;
  overflow: hidden;
}

:root {
  --baby-frame-w: 248px;
  --baby-frame-h: 226px;
  --baby-cycle: 1.4s;
  --baby-scale-medium: 0.55;
  --baby-scale-small: 0.32;
}

.baby {
  position: absolute;
  width: var(--baby-frame-w);
  height: var(--baby-frame-h);
  background-image: url('Image/baby_sprite.png');
  background-repeat: no-repeat;
  background-size: calc(var(--baby-frame-w) * 6) var(--baby-frame-h);
  background-position: 0 0;
  pointer-events: none;
  z-index: 2;
}

@keyframes babyCycle {
  from { background-position: 0 0; }
  to   { background-position: calc(-1 * var(--baby-frame-w) * 6) 0; }
}

/* Peek baby — SMALL, at photo edge
   Appears from off-left, slowly crawls in, holds, fades out, resets */
.baby-peek {
  left: -100px;
  bottom: 18px;
  right: auto;
  transform-origin: bottom center;
  transform: scale(var(--baby-scale-small));
  animation-name: babyCycle, babyPeekMove;
  animation-duration: 1.4s, 22s;
  animation-timing-function: steps(6), ease-in-out;
  animation-iteration-count: infinite, infinite;
  opacity: 0;
}

@keyframes babyPeekMove {
  0%              { left: -100px; opacity: 0; }
  8%              { opacity: 1; }
  45%             { left: 14%; opacity: 1; }
  65%             { left: 14%; opacity: 1; }
  75%             { left: 14%; opacity: 0; }
  75.01%, 100%    { left: -100px; opacity: 0; }
}

/* Slant baby — MEDIUM, slow linear crawl across text sections */
.baby-slant {
  left: -280px;
  bottom: 12px;
  right: auto;
  transform-origin: bottom center;
  transform: scale(var(--baby-scale-medium));
  animation-name: babyCycle, babySlantMove;
  animation-duration: 1.4s, 32s;
  animation-timing-function: steps(6), linear;
  animation-iteration-count: infinite, infinite;
}

@keyframes babySlantMove {
  0%   { left: -280px; bottom: 8px; }
  100% { left: 100%;   bottom: 24px; }
}

/* ------------------------------------------------------------------------
   BABY-LINE — small baby crawling BELOW the tagline text
   The baby's TOP sits at the tagline's baseline, so the baby's body sits
   entirely below the text (not overlapping / not floating above it).
   The .page-hero--with-baby modifier reserves the extra bottom padding
   needed for this on the About page only.
   ------------------------------------------------------------------------ */

.page-hero .lede-tagline {
  display: inline-block;
  white-space: nowrap;
  max-width: none;
  margin: 0;
}

/* ------------------------------------------------------------------------
   TAGLINE FLOURISH — small sparkle icons flanking the lede tagline.
   A 4-point sparkle + small twinkle dot, echoing the sparkle motif from
   the app-flow screens. Left sparkle in soft rose, right sparkle in soft
   cloud blue, reinforcing the palette without competing with the text.
   Both fade in with the tagline, so they animate as part of the hero.
   ------------------------------------------------------------------------ */
.tagline-flourish {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: -0.28em;         /* nudge to sit optically with x-height */
  margin: 0 14px;
  opacity: 0.82;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  animation: taglineFlourishTwinkle 4.2s ease-in-out infinite;
}
.tagline-flourish--left  { fill: var(--gold-deep);       animation-delay: 0s;   }
.tagline-flourish--right { fill: var(--cloud-blue-deep); animation-delay: 1.6s; }

@keyframes taglineFlourishTwinkle {
  0%, 100% { opacity: 0.7;  transform: scale(1)   rotate(0deg); }
  50%      { opacity: 0.95; transform: scale(1.08) rotate(8deg); }
}

@media (max-width: 780px) {
  .tagline-flourish { width: 18px; height: 18px; margin: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .tagline-flourish { animation: none; }
}

/* About page hero: tight bottom padding — just enough room for the baby
   to sit right underneath the tagline sentence, with no dead space. */
.page-hero--with-baby {
  padding-bottom: 60px;
}

.baby-line {
  position: absolute;
  /* Baby crawls right UNDERNEATH the tagline sentence.
     padding-bottom (60) puts tagline_bottom at Y=60 above section bottom.
     baby_top = bottom(6) + visual_height(~50) = 56 above section bottom.
     Gap between tagline_bottom and baby_top: 60 - 56 = 4px — right underneath. */
  bottom: 6px;
  left: 0;
  right: auto;
  transform-origin: bottom left;
  transform: scale(0.22);
  /* Slow crawl — 22s to cross the full viewport */
  animation-name: babyCycle, babyLineMove;
  animation-duration: 1.4s, 22s;
  animation-timing-function: steps(6), linear;
  animation-iteration-count: infinite, infinite;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}

@keyframes babyLineMove {
  /* Baby appears at the very left edge, crawls linearly all the way to the
     right edge, then fades out and loops. */
  0%    { left: 0;                     opacity: 0; }
  2%    { opacity: 1; }
  96%   { left: calc(100% - 55px);     opacity: 1; }
  100%  { left: 100%;                  opacity: 0; }
}

/* Mobile: tagline wraps, baby hidden (no single line to crawl on),
   and the extra bottom padding isn't needed */
@media (max-width: 780px) {
  .page-hero .lede-tagline { white-space: normal; max-width: 640px; }
  /* Keep the baby crawling on mobile too — it travels along the section
     bottom, so it doesn't need the tagline to be a single line. */
  .baby-line { display: block; }
  /* Match the 72px top gap so the About banner stays symmetric with the baby
     crawling inside the lower gap. */
  .page-hero--with-baby { padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .baby-line { display: none; }
  .page-hero--with-baby { padding-bottom: 32px; }
}

/* Mobile: hide slant, keep peek small */
@media (max-width: 720px) {
  .baby-slant { display: none; }
  :root {
    --baby-scale-small: 0.32;
    --baby-scale-medium: 0.42;
  }
}

/* Accessibility: hide all babies for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .baby-peek, .baby-slant { display: none; }
}

/* Mobile: hide slanted crawl (limited horizontal space), shrink peek */
@media (max-width: 720px) {
  .baby-slant { display: none; }
  :root { --baby-scale: 0.42; }
}

/* Respect reduced-motion preference for accessibility */
@media (prefers-reduced-motion: reduce) {
  .baby-peek, .baby-slant { display: none; }
}

/* ------------------------------------------------------------------------
   HERO CASCADE — the "words delay into place" effect on page load
   Each element in the hero appears sequentially: eyebrow → h1 → lede → CTA
   Creates a luxurious editorial arrival, like a magazine slowly revealing.
   Applies to:  home hero (.hero > .hero-grid > .hero-content > *)
               all page heroes (.page-hero > text elements)
   ------------------------------------------------------------------------ */

@keyframes heroCascade {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Home hero — cascade the content column children */
html.has-js .hero .hero-content > * {
  opacity: 0;
  animation: heroCascade 1.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
html.has-js .hero .hero-content > *:nth-child(1) { animation-delay: 0.15s; }
html.has-js .hero .hero-content > *:nth-child(2) { animation-delay: 0.35s; }
html.has-js .hero .hero-content > *:nth-child(3) { animation-delay: 0.55s; }
html.has-js .hero .hero-content > *:nth-child(4) { animation-delay: 0.78s; }
html.has-js .hero .hero-content > *:nth-child(5) { animation-delay: 1.00s; }

/* Page hero (about, cribs, services, contact, etc.) — target only text
   elements so the baby-peek div isn't affected by the cascade */
html.has-js .page-hero > .eyebrow,
html.has-js .page-hero > h1,
html.has-js .page-hero > .lede,
html.has-js .page-hero > p {
  opacity: 0;
  animation: heroCascade 1.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
html.has-js .page-hero > .eyebrow { animation-delay: 0.2s; }
html.has-js .page-hero > h1      { animation-delay: 0.42s; }
html.has-js .page-hero > .lede   { animation-delay: 0.65s; }
html.has-js .page-hero > p       { animation-delay: 0.85s; }

/* Accessibility: skip all reveal animations for users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
  html.has-js .hero .hero-content > *,
  html.has-js .page-hero > *,
  html.has-js .reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------------------
   GRAVITY SETTLE — cascading child stagger within revealed sections
   When a .reveal container enters view, its text children rise into place
   one after another with subtle delay, like they're being pulled up by
   gravity into their final positions. Applied to common heading/prose
   elements only, so decorative divs (like .baby) aren't affected.
   ------------------------------------------------------------------------ */

@keyframes gravityRise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Section headers, feature cards, tier cards, etc. — cascade their children */
html.has-js .reveal.in > .eyebrow,
html.has-js .reveal.in > h2,
html.has-js .reveal.in > h3,
html.has-js .reveal.in > h4,
html.has-js .reveal.in > .lede,
html.has-js .reveal.in > p,
html.has-js .reveal.in > .body-text,
html.has-js .reveal.in > .pullquote,
html.has-js .reveal.in > ul,
html.has-js .reveal.in > .btn,
html.has-js .reveal.in > a.btn {
  opacity: 0;
  animation: gravityRise 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stagger — each child appears 120ms after the previous.
   These target the same elements so the cascade order is: eyebrow → heading → lede → paragraphs → button */
html.has-js .reveal.in > .eyebrow                   { animation-delay: 0.05s; }
html.has-js .reveal.in > h2,
html.has-js .reveal.in > h3,
html.has-js .reveal.in > h4                          { animation-delay: 0.20s; }
html.has-js .reveal.in > .lede                       { animation-delay: 0.35s; }
html.has-js .reveal.in > p,
html.has-js .reveal.in > .body-text                  { animation-delay: 0.45s; }
html.has-js .reveal.in > .pullquote                  { animation-delay: 0.55s; }
html.has-js .reveal.in > ul                          { animation-delay: 0.55s; }
html.has-js .reveal.in > .btn,
html.has-js .reveal.in > a.btn                       { animation-delay: 0.70s; }

/* Ensure the reduced-motion rule below overrides these too */
@media (prefers-reduced-motion: reduce) {
  html.has-js .reveal.in > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ========================================================================
   APPLE-TIER MOTION SYSTEM
   Cinematic, calm, luxurious. All easings match Apple's product-page feel.
   ======================================================================== */

:root {
  /* Apple's actual easing curves — used across their product pages */
  --ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-apple-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-apple-smooth: cubic-bezier(0.32, 0.72, 0.34, 1);
  --ease-apple-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ------------------------------------------------------------------------
   AMBIENT DRIFTING BLOBS — cinematic background depth
   Very subtle radial gradients drifting at 40-55s cycles behind sections
   ------------------------------------------------------------------------ */
.hero,
.page-hero,
.philosophy-brief,
.about-belief-section,
.trust,
.safety-band,
.tracking,
.tour-cta {
  position: relative;
  overflow: hidden;
}
.philosophy-brief::before,
.trust::before,
.tour-cta::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(232, 155, 175, 0.09) 0%, transparent 60%);
  border-radius: 50%;
  animation: blobDrift 42s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.philosophy-brief::after,
.trust::after,
.tour-cta::after {
  content: '';
  position: absolute;
  bottom: -15%;
  right: -8%;
  width: 55%;
  height: 55%;
  background: radial-gradient(circle, rgba(184, 149, 106, 0.055) 0%, transparent 60%);
  border-radius: 50%;
  animation: blobDrift 56s ease-in-out infinite reverse;
  pointer-events: none;
  z-index: 0;
}
/* Note: .hero and .page-hero intentionally excluded from ambient blobs.
   The blobs paint OVER the background gradient, breaking the top/bottom
   fade-to-ivory blend. The dreamy --bg-hero handles their visual interest. */
@keyframes blobDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(40px, -30px, 0) scale(1.08); }
  66%      { transform: translate3d(-30px, 40px, 0) scale(0.94); }
}

/* Push section content above the blobs — but NOT the baby (needs to stay absolute) */
.hero > *:not(.baby),
.page-hero > *:not(.baby),
.philosophy-brief > *:not(.baby),
.trust > *:not(.baby),
.tour-cta > *:not(.baby) {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------------------
   PREMIUM BUTTON HOVER — soft elevation + palette-matched glow
   ------------------------------------------------------------------------ */
.btn {
  transition:
    transform 0.55s var(--ease-apple-out),
    box-shadow 0.55s var(--ease-apple-out),
    background 0.4s var(--ease-apple),
    color 0.3s var(--ease-apple);
  will-change: transform;
}
.btn:hover {
  transform: translateY(-3px);
}
/* Match glow to button style */
.btn-gold:hover {
  box-shadow:
    0 14px 32px -10px rgba(184, 149, 106, 0.35),
    0 4px 12px -4px rgba(184, 149, 106, 0.22);
}
.btn-outline:hover {
  box-shadow:
    0 10px 28px -10px rgba(133, 144, 176, 0.28),
    0 3px 10px -4px rgba(133, 144, 176, 0.15);
}
.btn-pink:hover,
.btn:not(.btn-gold):not(.btn-outline):not(.btn-pink):hover {
  box-shadow:
    0 14px 32px -10px rgba(232, 155, 175, 0.35),
    0 4px 12px -4px rgba(232, 155, 175, 0.20);
}

/* ------------------------------------------------------------------------
   CARD GRID CASCADES — trust ribbon, services, tiers, pillars, cribs
   Each card in a grid rises into place sequentially with subtle stagger
   ------------------------------------------------------------------------ */
@keyframes cardRise {
  from { opacity: 0; transform: translateY(40px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

html.has-js .reveal.in .trust-grid > *,
html.has-js .reveal.in .service-grid > *,
html.has-js .reveal.in .services-grid > *,
html.has-js .reveal.in .tier-grid > *,
html.has-js .reveal.in .tiers-grid > *,
html.has-js .reveal.in .pillars-grid > *,
html.has-js .reveal.in .pillar-grid > *,
html.has-js .reveal.in .crib-rooms-grid > *,
html.has-js .reveal.in .crib-grid > *,
html.has-js .reveal.in .founders-grid > *,
html.has-js .reveal.in .safety-grid > *,
html.has-js .in.trust-grid > *,
html.has-js .in.service-grid > *,
html.has-js .in.services-grid > *,
html.has-js .in.tier-grid > *,
html.has-js .in.tiers-grid > *,
html.has-js .in.pillars-grid > *,
html.has-js .in.pillar-grid > *,
html.has-js .in.crib-rooms-grid > *,
html.has-js .in.crib-grid > *,
html.has-js .in.founders-grid > *,
html.has-js .in.safety-grid > * {
  opacity: 0;
  animation: cardRise 1.2s var(--ease-apple-out) forwards;
}

/* Stagger each card by 0.12s (feels like they're settling one after another) */
html.has-js .reveal.in .trust-grid > *:nth-child(1),
html.has-js .reveal.in .service-grid > *:nth-child(1),
html.has-js .reveal.in .services-grid > *:nth-child(1),
html.has-js .reveal.in .tier-grid > *:nth-child(1),
html.has-js .reveal.in .tiers-grid > *:nth-child(1),
html.has-js .reveal.in .pillars-grid > *:nth-child(1),
html.has-js .reveal.in .pillar-grid > *:nth-child(1),
html.has-js .reveal.in .crib-rooms-grid > *:nth-child(1),
html.has-js .reveal.in .crib-grid > *:nth-child(1),
html.has-js .reveal.in .founders-grid > *:nth-child(1),
html.has-js .reveal.in .safety-grid > *:nth-child(1) { animation-delay: 0.15s; }

html.has-js .reveal.in .trust-grid > *:nth-child(2),
html.has-js .reveal.in .service-grid > *:nth-child(2),
html.has-js .reveal.in .services-grid > *:nth-child(2),
html.has-js .reveal.in .tier-grid > *:nth-child(2),
html.has-js .reveal.in .tiers-grid > *:nth-child(2),
html.has-js .reveal.in .pillars-grid > *:nth-child(2),
html.has-js .reveal.in .pillar-grid > *:nth-child(2),
html.has-js .reveal.in .crib-rooms-grid > *:nth-child(2),
html.has-js .reveal.in .crib-grid > *:nth-child(2),
html.has-js .reveal.in .founders-grid > *:nth-child(2),
html.has-js .reveal.in .safety-grid > *:nth-child(2) { animation-delay: 0.3s; }

html.has-js .reveal.in .trust-grid > *:nth-child(3),
html.has-js .reveal.in .service-grid > *:nth-child(3),
html.has-js .reveal.in .services-grid > *:nth-child(3),
html.has-js .reveal.in .tier-grid > *:nth-child(3),
html.has-js .reveal.in .tiers-grid > *:nth-child(3),
html.has-js .reveal.in .pillars-grid > *:nth-child(3),
html.has-js .reveal.in .pillar-grid > *:nth-child(3),
html.has-js .reveal.in .crib-rooms-grid > *:nth-child(3),
html.has-js .reveal.in .crib-grid > *:nth-child(3),
html.has-js .reveal.in .founders-grid > *:nth-child(3),
html.has-js .reveal.in .safety-grid > *:nth-child(3) { animation-delay: 0.45s; }

html.has-js .reveal.in .trust-grid > *:nth-child(4),
html.has-js .reveal.in .service-grid > *:nth-child(4),
html.has-js .reveal.in .services-grid > *:nth-child(4),
html.has-js .reveal.in .tier-grid > *:nth-child(4),
html.has-js .reveal.in .tiers-grid > *:nth-child(4),
html.has-js .reveal.in .pillars-grid > *:nth-child(4),
html.has-js .reveal.in .pillar-grid > *:nth-child(4),
html.has-js .reveal.in .crib-rooms-grid > *:nth-child(4),
html.has-js .reveal.in .crib-grid > *:nth-child(4),
html.has-js .reveal.in .safety-grid > *:nth-child(4) { animation-delay: 0.6s; }

html.has-js .reveal.in .trust-grid > *:nth-child(5),
html.has-js .reveal.in .service-grid > *:nth-child(5),
html.has-js .reveal.in .services-grid > *:nth-child(5),
html.has-js .reveal.in .safety-grid > *:nth-child(5) { animation-delay: 0.75s; }

html.has-js .reveal.in .trust-grid > *:nth-child(6),
html.has-js .reveal.in .service-grid > *:nth-child(6),
html.has-js .reveal.in .services-grid > *:nth-child(6) { animation-delay: 0.9s; }

/* ------------------------------------------------------------------------
   PARALLAX IMAGE — scroll-linked lag effect (JS-driven)
   Images with .parallax-img get a small transform update via requestAnimFrame
   ------------------------------------------------------------------------ */
.parallax-img {
  transition: transform 0.6s var(--ease-apple-smooth);
  will-change: transform;
}

/* ------------------------------------------------------------------------
   ACCESSIBILITY: honor reduced-motion for ALL premium motion
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after,
  .page-hero::before, .page-hero::after,
  .philosophy-brief::before, .philosophy-brief::after,
  .trust::before, .trust::after,
  .tour-cta::before, .tour-cta::after {
    animation: none !important;
  }
  .btn { transition: none !important; }
  .btn:hover { transform: none !important; box-shadow: none !important; }
  html.has-js .reveal.in .trust-grid > *,
  html.has-js .reveal.in .service-grid > *,
  html.has-js .reveal.in .services-grid > *,
  html.has-js .reveal.in .tier-grid > *,
  html.has-js .reveal.in .pillars-grid > *,
  html.has-js .reveal.in .crib-rooms-grid > *,
  html.has-js .reveal.in .founders-grid > *,
  html.has-js .reveal.in .safety-grid > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .parallax-img { transform: none !important; }
}

/* Remove ambient blobs from hero and trust — they were creating faint
   horizontal band edges below the nav that looked like a "second line".
   Kept on other sections for cinematic depth. */
.hero::before,
.hero::after,
.trust::before,
.trust::after {
  display: none;
}

/* ------------------------------------------------------------------------
   FAMILY CHASE ANIMATION — Patrick + Winnie running with baby
   [rev 2026-07: connected-component extraction, no cut hands]
   Uses Image/family_chase_sprite.png (4 frames, 960×207 sprite)
   Runs FROM the right edge TO the left, figures face left.
   ------------------------------------------------------------------------ */

.family-chase-strip {
  position: relative;
  height: 190px;
  overflow: hidden;
  margin-top: 40px;
  pointer-events: none;
}

.family-chase {
  position: absolute;
  right: -280px;
  bottom: 0;
  left: auto;
  width: 240px;
  height: 207px;
  background-image: url('Image/family_chase_sprite.png');
  background-repeat: no-repeat;
  background-size: 960px 207px;
  background-position: 0 0;
  transform: scaleX(-1) scale(0.7);
  transform-origin: bottom center;
  animation-name: familyCycle, familyChaseMoveReverse;
  animation-duration: 1.2s, 14s;
  animation-timing-function: steps(4), linear;
  animation-iteration-count: infinite, infinite;
}

@keyframes familyCycle {
  from { background-position: 0 0; }
  to   { background-position: -960px 0; }
}

@keyframes familyChaseMoveReverse {
  0%   { right: -280px; }
  100% { right: 100%; }
}

/* Mobile: smaller */
@media (max-width: 720px) {
  .family-chase-strip { height: 130px; margin-top: 20px; }
  .family-chase { transform: scaleX(-1) scale(0.5); }
}

/* Reduced motion: hide */
@media (prefers-reduced-motion: reduce) {
  .family-chase { display: none; }
}

/* Family chase variant — placed inside founders section on About */
.family-chase-strip--founders {
  margin-top: 24px;
  margin-bottom: 0;
  height: 180px;
}
/* ------------------------------------------------------------------------
   COMING SOON BADGE — gold pill for pre-launch state
   Uses explicit gold values (not var(--gold) which is now rose pink).
   Warm muted gold to match luxury palette: #B8956A base, #A17F58 for depth.
   ------------------------------------------------------------------------ */

.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 14px;
  background: linear-gradient(135deg,
    rgba(184, 149, 106, 0.10) 0%,
    rgba(184, 149, 106, 0.20) 100%);
  border: 1px solid rgba(184, 149, 106, 0.45);
  color: #A17F58;
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
  animation: comingSoonHalo 3.5s ease-in-out infinite;
}

.coming-soon-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #B8956A;
  animation: comingSoonPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes comingSoonHalo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 149, 106, 0.10); }
  50%      { box-shadow: 0 0 0 10px rgba(184, 149, 106, 0.03); }
}

@keyframes comingSoonPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(184, 149, 106, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(184, 149, 106, 0);
    transform: scale(1.2);
  }
}

/* Accessibility: no motion if the user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .coming-soon-badge,
  .coming-soon-badge .dot {
    animation: none;
  }
}

/* ------------------------------------------------------------------------
   COMING SOON — GOLD-PLATED VARIANT
   Modern-luxury foil banner. Sits below the hero title as a punctuation
   mark. Uses a layered metallic gold gradient (deep bronze → highlight →
   antique gold) with a slow travelling shine sweep. Text is deep bronze
   for contrast against the polished surface.

   Palette anchor: #7A5A28 → #C9A15C → #F5E4A8 → #A17F3E
   ------------------------------------------------------------------------ */

.coming-soon-badge--gold {
  /* Reset the base variant so this rides on its own visual language */
  padding: 11px 24px 11px 20px;
  gap: 10px;
  margin: 0 0 22px;
  border: none;
  border-radius: 999px;
  overflow: hidden;
  color: #4A3418;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  /* Layered gold foil:
     1) subtle sheen mask on top
     2) primary metallic gradient with warm mids and cool highlights */
  background:
    linear-gradient(180deg,
      rgba(255, 246, 214, 0.55) 0%,
      rgba(255, 246, 214, 0)   45%,
      rgba(0, 0, 0, 0.06)      100%),
    linear-gradient(135deg,
      #7A5A28 0%,
      #B08A45 14%,
      #E7CE85 32%,
      #F6EAB4 45%,
      #D9B565 60%,
      #A17F3E 78%,
      #6E4E22 100%);
  background-size: 100% 100%, 220% 100%;
  background-position: 0 0, 0% 50%;

  box-shadow:
    /* inner top highlight (foil edge) */
    inset 0 1px 0 rgba(255, 249, 224, 0.75),
    /* inner bottom shadow (foil depth) */
    inset 0 -1px 0 rgba(52, 34, 8, 0.28),
    /* thin metal rim */
    0 0 0 1px rgba(122, 90, 40, 0.55),
    /* soft gold halo drop */
    0 6px 22px -8px rgba(161, 127, 62, 0.55),
    0 2px 6px  -2px rgba(52, 34, 8, 0.18);

  animation:
    goldShineSweep 6s ease-in-out infinite,
    goldHalo 4.5s ease-in-out infinite;
}

.coming-soon-badge--gold .dot {
  /* A point of light, not a pom-pom: the ringed, glowing pearl was the
     heaviest thing on the badge. */
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFF6D0 0%, #EDC974 55%, #A17F3E 100%);
  box-shadow: none;
  animation: goldDotPulse 3.2s ease-in-out infinite;
  flex-shrink: 0;
}

.coming-soon-badge--gold .cs-label {
  /* Very faint engraved feel — light top-edge, darker underline */
  text-shadow:
    0 1px 0 rgba(255, 243, 199, 0.45),
    0 -1px 0 rgba(52, 34, 8, 0.18);
  position: relative;
  z-index: 2;
}

/* Travelling shine sweep — a diagonal band that moves across the surface */
.coming-soon-badge--gold .cs-shine {
  position: absolute;
  top: -60%;
  left: -30%;
  width: 40%;
  height: 220%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0)   0%,
    rgba(255, 255, 255, 0.55) 45%,
    rgba(255, 255, 255, 0.9)  50%,
    rgba(255, 255, 255, 0.55) 55%,
    rgba(255, 255, 255, 0)   100%);
  filter: blur(2px);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: goldShineTravel 5.2s ease-in-out infinite;
  z-index: 1;
}

@keyframes goldShineSweep {
  /* Slowly slides the underlying metallic gradient — subtle "molten" feel */
  0%, 100% { background-position: 0 0, 0% 50%; }
  50%      { background-position: 0 0, 100% 50%; }
}

@keyframes goldShineTravel {
  /* The travelling shine band. Long dwell at rest, quick sweep across. */
  0%, 55%  { left: -30%; opacity: 0; }
  60%      { opacity: 1; }
  95%      { left: 115%; opacity: 0.9; }
  100%     { left: 115%; opacity: 0; }
}

@keyframes goldHalo {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 249, 224, 0.75),
      inset 0 -1px 0 rgba(52, 34, 8, 0.28),
      0 0 0 1px rgba(122, 90, 40, 0.55),
      0 6px 22px -8px rgba(161, 127, 62, 0.55),
      0 2px 6px  -2px rgba(52, 34, 8, 0.18);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 249, 224, 0.85),
      inset 0 -1px 0 rgba(52, 34, 8, 0.28),
      0 0 0 1px rgba(122, 90, 40, 0.55),
      0 10px 30px -6px rgba(201, 161, 92, 0.65),
      0 2px 6px  -2px rgba(52, 34, 8, 0.18);
  }
}

@keyframes goldDotPulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(255, 243, 199, 0.55),
      0 0 12px rgba(240, 206, 122, 0.85);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(255, 243, 199, 0),
      0 0 18px rgba(240, 206, 122, 1);
    transform: scale(1.12);
  }
}

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  .coming-soon-badge--gold,
  .coming-soon-badge--gold .dot,
  .coming-soon-badge--gold .cs-shine {
    animation: none;
  }
  .coming-soon-badge--gold .cs-shine { display: none; }
}

/* Mobile — slightly tighter */
@media (max-width: 640px) {
  .coming-soon-badge--gold {
    padding: 12px 24px 12px 22px;
    gap: 11px;
    font-size: 11.5px;
    letter-spacing: 0.2em;
    margin: 0 0 20px;
  }
  .coming-soon-badge--gold .dot {
    width: 8px;
    height: 8px;
  }
}

/* Family chase variant — when placed inside the founders section on About */
.family-chase-strip--founders {
  margin-top: 20px;
  margin-bottom: 0;
  height: 170px;
}

/* ------------------------------------------------------------------------
   FOUNDERS SIGNATURE — Patrick Tang & Winnie Leong
   Editorial byline style. Names in Playfair italic, muted gold em-dash,
   soft ampersand. Sits at the bottom of the founders' message.
   ------------------------------------------------------------------------ */

.founders-sig {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  margin-top: 42px;
  padding-top: 0;
  border-top: none;
}

.founders-sig-rule {
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(184, 149, 106, 0.7) 0%,
    rgba(184, 149, 106, 0.15) 100%);
}

.founders-sig-block {
  display: flex;
  align-items: center;
  gap: clamp(32px, 4.5vw, 56px);
}

.founder-signature {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Names as bold-italic signatures (10 Jul 2026 rev).
   Switched from Allura (single-weight script, read as thin at editorial size)
   to Playfair Display Italic 700 — a genuine bold italic in the site's own
   display typeface. Sits larger for prominence, with a subtle rose-gold
   underline flourish beneath each name so the pair reads as a hand-signed
   byline on fine stationery. Slight rotations retained for that
   handwritten-on-paper feel. */
.founder-name {
  position: relative;
  display: inline-block;
  font-family: 'Playfair Display', 'Allura', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: 0.005em;
  transform-origin: bottom left;
  opacity: 1;
  padding-bottom: 10px;
}
/* Pink underline flourish removed (10 Jul 2026) — the Dancing Script
   handwritten signature reads clearly on its own without a beneath-line. */

.founder-signature:nth-child(1) .founder-name { transform: rotate(-1.5deg); }
.founder-signature:nth-child(3) .founder-name { transform: rotate(1deg); }

.founder-role {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #B8956A;
  display: inline-block;
  margin-top: 4px;
}

.founders-sig-divider {
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg,
    rgba(184, 149, 106, 0.04) 0%,
    rgba(184, 149, 106, 0.55) 50%,
    rgba(184, 149, 106, 0.04) 100%);
  align-self: center;
}

/* Mobile stays proportional */
@media (max-width: 520px) {
  .founders-sig { gap: 22px; margin-top: 34px; }
  .founders-sig-block { gap: 28px; }
  .founder-name { font-size: 34px; padding-bottom: 4px; }
  .founder-role { font-size: 9.5px; letter-spacing: 0.22em; }
  .founders-sig-divider { height: 34px; }
  .founders-sig-rule { width: 40px; }
}

/* ------------------------------------------------------------------------
   FAMILY CHASE V2 — Winnie catching Patrick with baby
   6-frame sprite in a 3×2 grid, 512×512px per frame.
   Placed as a full-width strip below the founders about-grid on About page.
   The family walks slowly from left to right across the viewport.
   ------------------------------------------------------------------------ */

:root {
  --family2-scale: 0.32;
  --family2-frame-w: calc(512px * var(--family2-scale));  /* ~164px */
  --family2-frame-h: calc(512px * var(--family2-scale));
}

.family-chase-v2-strip {
  position: relative;
  width: 100%;
  height: calc(var(--family2-frame-h) + 8px);
  margin-top: 20px;
  overflow: hidden;
  pointer-events: none;
}

.family-chase-v2 {
  position: absolute;
  bottom: 0;
  left: -220px;
  width: var(--family2-frame-w);
  height: var(--family2-frame-h);
  background-image: url('Image/family_chase_v2.png');
  background-size: calc(var(--family2-frame-w) * 3) calc(var(--family2-frame-h) * 2);
  background-repeat: no-repeat;
  background-position: 0 0;
  animation:
    familyChase2Frames 2s steps(1) infinite,
    familyChase2Move 26s linear infinite;
}

/* 6 frames in a 3×2 grid — explicit keyframes with steps(1) between
   so each frame holds until the next, no interpolation between frames */
@keyframes familyChase2Frames {
  0%      { background-position: 0 0; }
  16.66%  { background-position: calc(var(--family2-frame-w) * -1) 0; }
  33.33%  { background-position: calc(var(--family2-frame-w) * -2) 0; }
  50%     { background-position: 0 calc(var(--family2-frame-h) * -1); }
  66.66%  { background-position: calc(var(--family2-frame-w) * -1) calc(var(--family2-frame-h) * -1); }
  83.33%  { background-position: calc(var(--family2-frame-w) * -2) calc(var(--family2-frame-h) * -1); }
}

@keyframes familyChase2Move {
  0%   { left: -220px; }
  100% { left: 100%; }
}

/* Mobile: smaller, tighter */
@media (max-width: 720px) {
  :root { --family2-scale: 0.22; }
  .family-chase-v2-strip { margin-top: 12px; height: calc(var(--family2-frame-h) + 6px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .family-chase-v2 { display: none; }
}

/* ------------------------------------------------------------------------
   OUR TEAM
   Section header shows even when the grid is empty — team member cards
   will be structured later. Drop .founder cards into .founders-grid.
   ------------------------------------------------------------------------ */
/* ========================================================================
   MOBILE POLISH (10 Jul 2026)
   - Home hero title: allow "Malaysia's First Luxury" to wrap instead of
     being clipped off the right edge on narrow screens.
   - Hide the empty "Our Team" stub so it doesn't leave a blank gap above
     the footer on the About page.
   - Keep whole words (no hyphen splits) as a final safety net.
   ======================================================================== */
/* Broadened to 1024px — the hero goes single-column at 1024px, and at any
   width from ~700–1024px "Malaysia's First Luxury" was still forced onto one
   line and clipped off the right edge. Now it wraps at every width below the
   two-column desktop layout. */
@media (max-width: 1024px) {
  /* Shrink the home hero title on mobile/tablet so each phrase sits on ONE
     line: black "Malaysia's First Luxury" on line 1, pink "Infant Care
     Centre." on line 2. Sized small enough to stay one line without clipping. */
  .hero-title { font-size: clamp(20px, 7vw, 44px); }
  .hero-title span,
  .hero-title .hero-luxury { white-space: nowrap; }
}

/* Remove the empty team section (heading with no cards) that reserves space
   just above the dark footer. Reappears automatically once cards are added. */
.our-team:has(.founders-grid:empty) { display: none; }

/* Final guard: never hyphenate-split a word anywhere in body copy. */
p, .lede, .body-text, .footer-text, .legal-content p {
  hyphens: none;
  -webkit-hyphens: none;
}
/* ========================================================================
   EQUAL SIDE MARGINS (10 Jul 2026)
   On mobile/tablet, let content paragraphs fill their column instead of a
   narrow centred max-width box, so the left gap and right gap to the edge are
   always equal (and line up with the heading width above them).
   ======================================================================== */
@media (max-width: 1024px) {
  .text-column .body-text,
  .text-column .lede,
  .tracking-content > .body-text,
  .grow-with-us .body-text,
  .philosophy-brief-inner .body-text,
  .about-content .body-text,
  .bespoke-content .body-text {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ========================================================================
   BATCH FIXES (10 Jul 2026)
   ======================================================================== */

/* (1) OVERFLOW — stop long buttons / text columns from forcing a section wider
   than the screen (which clipped wording off the right on mobile). */
@media (max-width: 1024px) {
  .bespoke-content, .bespoke-grid, .socials-content, .socials-grid-2col,
  .tracking-content, .tracking-grid, .text-column, .about-content, .about-grid,
  .grow-with-us, .care-tier, .hero-content, .contact-card, .flexi-option,
  .crib-room, .partner-showcase, .wrap, .section {
    min-width: 0;
  }
  .btn, .contact-btn, .care-tier-cta, .map-directions {
    white-space: normal;
    max-width: 100%;
    height: auto;
  }
  h1, h2, h3, h4, .display, .hero-title, .contact-title,
  .bespoke-content h3, .socials-content h2 {
    overflow-wrap: break-word;
  }
}

/* (2) CRIBS — justify the cot-feature paragraphs like the rest of the site. */
.cot-feature p {
  text-align: justify;
  text-align-last: left;
  hyphens: none;
  -webkit-hyphens: none;
}

/* (3) ABOUT — tighten spacing between the founders and Our Team on mobile.
   The family-animation strip sits empty on mobile, so remove it and pull the
   Our Team block up. */
@media (max-width: 1024px) {
  .family-chase-v2-strip { display: none; }
  .our-team { margin-top: 44px !important; }   /* modest, even gap instead of the empty band */
  .founders-head { margin-bottom: 24px; }
}

/* (4) HAND-SIGNED SIGNATURE (10 Jul 2026 rev):
   Swapped from Cormorant Garamond italic to Dancing Script 700 — a
   genuine handwritten script with real bold weight, so the names read
   as if Patrick and Winnie signed them by hand with a pen, rather than
   as an italicised byline. Larger sizing gives each signature the
   presence it deserves; the pink underline flourish is removed so the
   script stands on its own the way a real ink signature would.
   `!important` retained to defeat the earlier ink-black rule and the
   reveal-cascade animation on child h-tags. */
.founder-name {
  font-family: 'Dancing Script', 'Allura', cursive !important;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.1;
  padding-bottom: 4px;
  white-space: nowrap;
}
.grow-with-us-closer,
.lede-tagline,
.philosophy-brief-inner .pullquote,
.showcase-tab-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.015em;
}
.grow-with-us-closer { font-size: clamp(20px, 2.4vw, 26px); }
.showcase-tab-tagline { font-size: 16px; }

/* (5) PARTNERS — cleaner, calmer showcase tabs on mobile. */
@media (max-width: 1024px) {
  .showcase-nav { gap: 6px; }
  .showcase-tab {
    text-align: center;
    padding: 20px 16px;
    border-radius: 12px;
    transition: background 0.3s ease;
  }
  .showcase-tab.is-active { background: rgba(212, 120, 150, 0.06); }
  .showcase-tab-title { font-size: clamp(22px, 5.4vw, 26px); }
  .showcase-tab-tagline { display: block; margin-top: 6px; color: var(--ink-mute); }
}

/* ========================================================================
   ABOUT HERO — mobile line breaks (10 Jul 2026)
   Black "Built by parents," on one row, blue "for parents." on the next,
   and the slogan a touch larger, split into two rows via its <br>.
   ======================================================================== */
@media (max-width: 640px) {
  .page-hero--with-baby h1 {
    font-size: clamp(28px, 8vw, 46px);
    line-height: 1.12;
  }
  .page-hero--with-baby h1 em { display: block; }   /* blue onto its own row */
  .page-hero--with-baby .lede-tagline {
    font-size: clamp(19px, 4.8vw, 24px);
    line-height: 1.5;
  }
}

/* Our Team cards: stack name / role / bio (spans are inline by default). */
.our-team .founder .founder-name,
.our-team .founder .founder-role,
.our-team .founder .founder-bio { display: block; }
.our-team .founder .founder-name { line-height: 1.15; margin-bottom: 4px; }

/* ========================================================================
   HOME HERO — CENTERED INK-DROP (mobile, 10 Jul 2026)
   One drop of ink landing dead-centre and blooming outward in equal
   concentric rings: blue core → pink → blue → pink, fading into cream.
   ======================================================================== */
@media (max-width: 768px) {
  .hero {
    /* Four SEPARATE ink drops (not a full wash) — each blooms in a tight
       circle then fades right back to cream, so you see clean ivory between
       them, exactly like the desktop. Alternating pink / blue. */
    background:
      radial-gradient(circle 150px at 24% 16%, rgba(232, 155, 175, 0.42) 0%, rgba(232, 155, 175, 0) 58%),  /* pink · top-left */
      radial-gradient(circle 165px at 82% 34%, rgba(143, 163, 201, 0.40) 0%, rgba(143, 163, 201, 0) 58%),  /* blue · upper-right */
      radial-gradient(circle 165px at 16% 62%, rgba(143, 163, 201, 0.36) 0%, rgba(143, 163, 201, 0) 58%),  /* blue · mid-left */
      radial-gradient(circle 155px at 84% 82%, rgba(232, 155, 175, 0.38) 0%, rgba(232, 155, 175, 0) 58%),  /* pink · lower-right */
      var(--ivory);
  }
  .hero::after { display: none; }
}
/* ------------------------------------------------------------------------
   NAV SPARKLE CONSTELLATION — REMOVED (05 Aug 2026, at Winnie's request)
   The ten 4-point stars painted by .nav::after (see ~line 242) are hidden
   here rather than deleted, so the whole constellation can be brought back
   by removing this single rule. Applies to every page so the nav stays
   consistent site-wide.
   ------------------------------------------------------------------------ */
.nav::after { display: none !important; }

/* ------------------------------------------------------------------------
   MOBILE DRAWER — premium refinement (05 Aug 2026)
   Applies on every page so the menu is consistent site-wide.
   ------------------------------------------------------------------------ */
.mobile-drawer {
  /* Same two-spot dreamy wash as the home hero, very faint, so opening the
     menu feels like part of the site rather than a plain white overlay. */
  background:
    radial-gradient(circle 260px at 12% 16%,
      rgba(244, 165, 184, 0.20) 0%, rgba(244, 165, 184, 0.13) 40%,
      rgba(244, 165, 184, 0.05) 70%, rgba(244, 165, 184, 0) 100%),
    radial-gradient(circle 240px at 92% 74%,
      rgba(155, 180, 222, 0.18) 0%, rgba(155, 180, 222, 0.12) 40%,
      rgba(155, 180, 222, 0.04) 70%, rgba(155, 180, 222, 0) 100%),
    var(--ivory);
  border-bottom: none;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mobile-drawer ul { padding-top: 8px; }

/* Hairlines that fade out at both ends instead of running edge to edge —
   a hard full-width rule is the single most "template" looking detail here. */
.mobile-drawer li {
  border-bottom: none;
  position: relative;
}
.mobile-drawer li::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(42, 36, 56, 0) 0%,
    rgba(42, 36, 56, 0.13) 18%,
    rgba(42, 36, 56, 0.13) 82%,
    rgba(42, 36, 56, 0) 100%);
}
.mobile-drawer li:last-child::after { display: none; }

.mobile-drawer a {
  padding: 21px 34px 21px 2px;
  font-size: 14px;
  letter-spacing: 0.2em;
  position: relative;
  transition: letter-spacing 0.4s var(--ease), padding-left 0.4s var(--ease);
}
/* A hairline chevron at the end of each row — reads as considered rather than
   decorated, and gives the tap target somewhere to travel to. */
.mobile-drawer li > a::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.2px solid rgba(42, 36, 56, 0.30);
  border-top: 1.2px solid rgba(42, 36, 56, 0.30);
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.mobile-drawer a:active {
  padding-left: 8px;
  letter-spacing: 0.23em;
}
.mobile-drawer a:active::after {
  transform: translateY(-50%) translateX(4px) rotate(45deg);
  border-color: var(--gold-deep);
}

/* Active row: the gradient wordmark already marks the current page, so the
   only extra cue is a tinted chevron. (An earlier version put a dot at
   left:-12px — outside the drawer's padding, so it was clipped by the screen
   edge on narrow phones.) */
.mobile-drawer li:has(a.active) > a::after { border-color: var(--gold-deep); }

/* Staggered entrance — each row rises a beat after the one above it. Cheap
   (opacity + transform only) and it is what makes the panel feel crafted. */
.mobile-drawer li {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.mobile-drawer.open li { opacity: 1; transform: none; }
.mobile-drawer.open li:nth-child(1) { transition-delay: 0.10s; }
.mobile-drawer.open li:nth-child(2) { transition-delay: 0.16s; }
.mobile-drawer.open li:nth-child(3) { transition-delay: 0.22s; }
.mobile-drawer.open li:nth-child(4) { transition-delay: 0.28s; }
.mobile-drawer.open li:nth-child(5) { transition-delay: 0.34s; }
.mobile-drawer.open li:nth-child(6) { transition-delay: 0.40s; }
.mobile-drawer.open li:nth-child(7) { transition-delay: 0.46s; }

@media (prefers-reduced-motion: reduce) {
  .mobile-drawer li { opacity: 1; transform: none; transition: none; }
  .mobile-drawer a, .mobile-drawer li > a::after { transition: none; }
}

/* ------------------------------------------------------------------------
   FOUNDER SIGNATURES — true signature script (05 Aug 2026)
   Dancing Script 700 (line ~5828) is a handwriting face but a chunky one —
   upright, heavy, evenly weighted. Allura is a signature script: thin
   connecting strokes, real thick/thin contrast, a proper slant. It reads as
   something actually signed rather than set.
   That earlier rule uses !important, so this one has to as well.
   Scoped to .founder-signature so the team-member cards are untouched.
   Allura draws small for its point size — hence the larger clamp.
   ------------------------------------------------------------------------ */
.founder-signature .founder-name {
  font-family: 'Allura', 'Dancing Script', cursive !important;
  font-weight: 400 !important;
  font-size: clamp(44px, 4.6vw, 62px) !important;
  line-height: 1.05;
  letter-spacing: 0.01em;
  padding-bottom: 2px;
}

/* ------------------------------------------------------------------------
   OUR TEAM — modernised cards (05 Aug 2026)
   Was three loose columns of centred text under bare circles. Now proper
   cards: a glass panel each, a ringed portrait, and a clear name/role/bio
   hierarchy. Names drop the signature script — that face belongs to Patrick
   and Winnie's actual signatures; on a staff list it reads as decoration.
   ------------------------------------------------------------------------ */
.our-team .founders-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
  align-items: stretch;
  margin-top: clamp(28px, 3vw, 44px);
}

.our-team .founder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(28px, 2.8vw, 40px) clamp(20px, 2.2vw, 32px) clamp(30px, 3vw, 42px);
  border-radius: 20px;
  background:
    radial-gradient(circle 260px at 50% -10%,
      rgba(244, 165, 184, 0.14) 0%, rgba(244, 165, 184, 0) 70%),
    rgba(255, 253, 251, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 20px 40px -30px rgba(42, 36, 56, 0.30);
  -webkit-backdrop-filter: blur(6px) saturate(1.03);
          backdrop-filter: blur(6px) saturate(1.03);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.our-team .founder:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 28px 52px -30px rgba(42, 36, 56, 0.34);
}

.our-team .founder-portrait {
  width: clamp(104px, 10vw, 132px);
  height: clamp(104px, 10vw, 132px);
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 22px;
  /* White ring plus a soft drop, so the portrait reads as a plate rather
     than a flat colour circle when no photo has been added yet. */
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.9),
    0 12px 24px -14px rgba(42, 36, 56, 0.34);
}
.our-team .founder-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.our-team .founder-portrait.is-placeholder {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(150deg, #F8DCE5 0%, #E9DCEC 52%, #DCE5EF 100%);
}

/* Name plate, not a signature */
.our-team .founder-name {
  font-family: var(--font-display) !important;
  font-style: normal;
  font-weight: 500 !important;
  font-size: clamp(19px, 1.7vw, 23px) !important;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--ink);
  padding-bottom: 0;
  white-space: normal;
}
.our-team .founder-role {
  display: block;
  margin: 8px 0 14px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cloud-blue-deep);
}
/* Hairline between role and bio */
.our-team .founder-role::after {
  content: '';
  display: block;
  width: 34px;
  height: 1px;
  margin: 14px auto 0;
  background: linear-gradient(90deg,
    rgba(42, 36, 56, 0) 0%, rgba(42, 36, 56, 0.20) 50%, rgba(42, 36, 56, 0) 100%);
}
.our-team .founder-bio {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 28ch;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .our-team .founders-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .our-team .founders-grid { grid-template-columns: 1fr; }
  .our-team .founder { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ------------------------------------------------------------------------
   ABOUT HERO — crawl trail behind the baby, and a slower crawl (05 Aug 2026)
   Same clip-path reveal technique as the home page: the dots are full width
   from the start and uncovered as the baby passes, so they never stretch and
   nothing re-lays-out each frame.
   ------------------------------------------------------------------------ */
.baby-line { animation-duration: 1.7s, 34s; }   /* was 1.4s / 22s */

.baby-line-trail {
  position: absolute;
  left: 6px;
  bottom: 14px;
  width: calc(100% - 60px);
  height: 7px;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle 2.4px at 5px 50%,  rgba(232, 155, 175, 0.60) 0 100%, transparent 100%),
    radial-gradient(circle 1.9px at 21px 50%, rgba(143, 163, 201, 0.50) 0 100%, transparent 100%);
  background-size: 32px 7px, 32px 7px;
  background-repeat: repeat-x, repeat-x;
  clip-path: inset(0 100% 0 0);
  animation: babyLineTrail 34s linear infinite;
}
@keyframes babyLineTrail {
  0%        { clip-path: inset(0 100% 0 0); opacity: 0; }
  3%        { clip-path: inset(0 100% 0 0); opacity: 0.9; }
  96%       { clip-path: inset(0 0 0 0);    opacity: 0.9; }
  100%      { clip-path: inset(0 0 0 0);    opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .baby-line-trail { animation: none; opacity: 0; }
}

/* Signature scaled back — Allura at 62px overpowered the CO-FOUNDER line
   beneath it and crowded the divider between the two names. */
.founder-signature .founder-name {
  font-size: clamp(32px, 3.2vw, 44px) !important;
}

/* About hero tagline — weighted up so it holds against the large headline
   above it. Playfair's 600 keeps the italic elegant; 700 goes blocky. */
.page-hero .lede-tagline .tagline-words {
  font-weight: 600;
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   PAGE LEDE — one voice across every page
   The About page's tagline was set in Cormorant Garamond italic while every
   other page's description ran in Inter Light, so the same line of the same
   page furniture read as two different documents. The About treatment wins:
   it is warmer, and it separates the description from body copy underneath.
   --------------------------------------------------------------------------- */
.page-hero .lede,
.page-hero .lede-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 1.9vw, 25px);
  line-height: 1.5;
  letter-spacing: 0.015em;
  color: var(--ink-soft);
}

/* The contact page's map and detail card were removed, so the form is alone in
   the grid — give it the page's measure rather than half of it. */
.contact-grid--form-only { grid-template-columns: minmax(0, 1fr) !important; }
.contact-grid--form-only .form-wrap { max-width: 760px; margin-inline: auto; width: 100%; }

/* The contact form's submit button in the brand's deep plum rather than pink —
   the one action on the page should be the darkest thing on it. */
.btn.btn-plum {
  background: linear-gradient(135deg, #4A3B63 0%, #3A2D50 52%, #2E2440 100%) !important;
  color: #FFF9FC !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 14px 30px -16px rgba(46, 36, 64, 0.75) !important;
}
.btn.btn-plum:hover,
.btn.btn-plum:focus-visible {
  background: linear-gradient(135deg, #55446F 0%, #43345C 52%, #37294B 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 18px 36px -16px rgba(46, 36, 64, 0.8) !important;
}
.btn.btn-plum .arrow, .btn.btn-plum span { color: inherit !important; }

/* ---------------------------------------------------------------------------
   NOTICE BOARD
   A card pinned to the wall the way a note is pinned to a nursery board: warm
   paper, a hair of rotation so it never looks printed on, a soft shadow that
   drops from the pin, and a red pin pushed through the top edge.
   --------------------------------------------------------------------------- */
.notice-board {
  position: relative;
  padding: clamp(38px, 4vw, 58px) clamp(26px, 3vw, 46px) clamp(30px, 3.2vw, 46px);
  background:
    /* the faintest paper tooth, so it is not a flat rectangle */
    radial-gradient(120% 90% at 22% 8%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(168deg, #FFFDFA 0%, #FDF8F2 55%, #FBF3EA 100%);
  border: 1px solid rgba(214, 190, 168, 0.32);
  border-radius: 4px;
  transform: rotate(-0.55deg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(120, 96, 80, 0.10),
    0 18px 34px -22px rgba(120, 96, 80, 0.45),
    0 34px 60px -40px rgba(120, 96, 80, 0.35);
}
/* the sheet lifts a little at the lower corners, the way pinned paper does */
.notice-board::after {
  content: '';
  position: absolute;
  left: 6%; right: 6%; bottom: -14px; height: 22px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 0%, rgba(120, 96, 80, 0.22) 0%, rgba(120, 96, 80, 0) 72%);
}

/* --- the pin --------------------------------------------------------------
   A round red head with a highlight, a darker collar beneath it, and a short
   needle disappearing into the paper. */
.notice-pin {
  position: absolute;
  top: -13px; left: 50%;
  width: 30px; height: 30px;
  transform: translateX(-50%) rotate(0.55deg);   /* stands upright on a tilted sheet */
  z-index: 3;
  pointer-events: none;
}
.notice-pin::before {           /* the needle, pushed through the paper */
  content: '';
  position: absolute;
  left: 50%; top: 20px;
  width: 2px; height: 13px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #B9BCC6 0%, #8E93A1 60%, #6F7482 100%);
  border-radius: 0 0 1px 1px;
  box-shadow: 0 1px 2px rgba(80, 60, 60, 0.35);
}
.notice-pin::after {            /* the head */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(42% 38% at 33% 28%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(120% 120% at 62% 74%, #A5142B 0%, #C42038 42%, #E2445A 100%);
  box-shadow:
    inset 0 -3px 6px rgba(90, 8, 22, 0.55),
    0 4px 8px -2px rgba(120, 20, 35, 0.55),
    0 10px 18px -8px rgba(90, 40, 40, 0.45);
}

@media (max-width: 760px) {
  .notice-board { transform: rotate(-0.35deg); }
  .notice-pin { width: 26px; height: 26px; top: -11px; }
  .notice-pin::before { top: 17px; height: 11px; }
}
@media (prefers-reduced-motion: reduce) { .notice-board { transform: none; } .notice-pin { transform: translateX(-50%); } }

/* ---------------------------------------------------------------------------
   COT FEATURES — the three columns arrive one after another, alternating
   First slides in from the left, second from the right and sitting a little
   lower, third from the left again — so the row reads as three separate notes
   arriving rather than one block dropping in.
   --------------------------------------------------------------------------- */
html.has-js .reveal--left  { transform: translateX(-72px) translateY(18px) scale(0.99); }
html.has-js .reveal--right { transform: translateX(72px)  translateY(18px) scale(0.99); }
html.has-js .reveal--left.in,
html.has-js .reveal--right.in { transform: translateX(0) translateY(0) scale(1); }

/* one after the other, left to right */
.cot-features .cot-feature:nth-child(1) { transition-delay: 0s; }
.cot-features .cot-feature:nth-child(2) { transition-delay: 0.22s; }
.cot-features .cot-feature:nth-child(3) { transition-delay: 0.44s; }

/* the middle column settles a step lower than its neighbours */
@media (min-width: 861px) {
  .cot-feature--lower { margin-top: clamp(22px, 2.4vw, 40px); }
}
@media (prefers-reduced-motion: reduce) {
  html.has-js .reveal--left,
  html.has-js .reveal--right { transform: none; }
  .cot-feature--lower { margin-top: 0; }
}

/* ---------------------------------------------------------------------------
   MOBILE DRAWER — frosted glass rather than a solid ivory panel
   The page behind blurs through it, so the menu reads as a pane of glass slid
   over the site instead of a second page covering it.
   --------------------------------------------------------------------------- */
.mobile-drawer {
  /* Clean glass, not tinted glass. The warm cream tint plus heavy saturation
     was picking up whatever sat behind it and reading as grey — this is a
     bright, near-neutral pane that LIFTS what it covers. */
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.90) 0%,
      rgba(253, 253, 255, 0.87) 55%,
      rgba(251, 252, 255, 0.86) 100%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.02) brightness(1.10);
          backdrop-filter: blur(30px) saturate(1.02) brightness(1.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 24px 60px -34px rgba(120, 130, 150, 0.35);
}
/* one clean highlight along the top edge — no coloured blooms */
.mobile-drawer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.60) 0%,
    rgba(255, 255, 255, 0.10) 14%,
    rgba(255, 255, 255, 0) 30%);
}
.mobile-drawer > * { position: relative; }
.mobile-drawer li { border-bottom-color: rgba(255, 255, 255, 0.65) !important; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-drawer { background: rgba(255, 255, 255, 0.98) !important; }
}

/* ---------------------------------------------------------------------------
   PHONE MOCK — a solid object, not a card with a shadow under it
   A lit right edge and a darker left one give the body thickness, an inner rim
   reads as the bezel's chamfer, and the contact shadow sits tight under the
   device with a wider ambient one behind it.
   --------------------------------------------------------------------------- */
.tracking-visual .phone-frame {
  /* No rotation. The turn was reading as a crooked phone rather than a solid
     one — depth here comes from the lit edges, the stepped side wall and the
     split shadow below, all of which work on a perfectly upright device. */
  transform: none;
  background:
    linear-gradient(100deg,
      #14101E 0%, #1D1830 16%, #2A2440 44%, #221C36 78%, #100D1A 100%) !important;
  box-shadow:
    /* the chamfered edge of the bezel */
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 1px 0 0 rgba(255, 255, 255, 0.16),
    inset -1px 0 0 rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    /* the body's thickness, stepped down and to the right so the device has a
       side wall without being turned */
    3px 5px 0 -2px rgba(14, 11, 22, 0.55),
    6px 10px 0 -4px rgba(14, 11, 22, 0.32),
    /* contact shadow, tight under the device */
    0 20px 24px -18px rgba(30, 18, 40, 0.85),
    /* ambient, thrown back */
    18px 52px 74px -42px rgba(120, 60, 100, 0.55),
    0 0 0 4px rgba(232, 155, 175, 0.12) !important;
}
/* a raking highlight down the glass */
.tracking-visual .phone-screen {
  position: relative;
}
.tracking-visual .phone-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  border-radius: inherit;
  background: linear-gradient(104deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.06) 18%,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0) 76%,
    rgba(255, 255, 255, 0.10) 100%);
}



/* ---------------------------------------------------------------------------
   Bubbles removed at Winnie's request, 15 Aug 2026
   The pair flanking "Come and see for yourself" crowded the headline, and the
   pink and blue balls around the vision/mission board competed with the pin.
   --------------------------------------------------------------------------- */
.wh-bubbles, .wh-bubble { display: none !important; }

/* ---------------------------------------------------------------------------
   The nav keeps its own opaque ivory bar, which sat on top of the drawer's
   glass and split the panel into two colours. While the drawer is open the bar
   steps aside so the glass runs from the top edge down.
   --------------------------------------------------------------------------- */
body:has(.mobile-drawer.open) #nav,
body:has(.mobile-drawer.open) #nav.scrolled {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom-color: transparent !important;
}

/* ===========================================================================
   MOBILE MENU — droplets falling from the bar
   Not one big pane of glass. Six small bubbles fall out of the three-line
   button in sequence, curving as they drop, in the same soap-bubble language
   the milestone marks use: roundness from shading, never an outline, and the
   page showing through so they float over the site.
   =========================================================================== */
.mobile-drawer {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.50) 0%,
    rgba(252, 253, 255, 0.44) 100%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.04) brightness(1.06);
          backdrop-filter: blur(20px) saturate(1.04) brightness(1.06);
  box-shadow: none !important;
  border-bottom: none !important;
  padding-top: calc(var(--nav-height) + 14px) !important;
}
.mobile-drawer::before { display: none; }

.mobile-drawer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  margin: 0;
  padding: 0 clamp(8px, 3vw, 20px) 0 0;
}
/* the list's rules are gone entirely — a rule underneath each ball read as a
   table, not as foam */
.mobile-drawer ul li,
.mobile-drawer ul li:last-child {
  border: 0 !important;
  border-bottom: 0 !important;
  list-style: none !important;
  background: none !important;
}
/* the rule under each ball was a ::after hairline, not a border */
.mobile-drawer ul li::after,
.mobile-drawer ul li::before { content: none !important; display: none !important; }

/* FOAM: no two bubbles the same size, none on the same axis, and each nestled
   into the last so the cluster packs the way lather does. */
.mobile-drawer li:nth-child(1) { margin-right: 2px;  margin-top: 0;     }
.mobile-drawer li:nth-child(2) { margin-right: 66px; margin-top: -14px; }
.mobile-drawer li:nth-child(3) { margin-right: 12px; margin-top: -16px; }
.mobile-drawer li:nth-child(4) { margin-right: 78px; margin-top: -12px; }
.mobile-drawer li:nth-child(5) { margin-right: 24px; margin-top: -16px; }
.mobile-drawer li:nth-child(6) { margin-right: 88px; margin-top: -12px; }
.mobile-drawer li:nth-child(1) a { width: clamp(84px, 24vw, 96px);  height: clamp(84px, 24vw, 96px);  }
.mobile-drawer li:nth-child(2) a { width: clamp(70px, 20vw, 80px);  height: clamp(70px, 20vw, 80px);  }
.mobile-drawer li:nth-child(3) a { width: clamp(90px, 26vw, 104px); height: clamp(90px, 26vw, 104px); }
.mobile-drawer li:nth-child(4) a { width: clamp(76px, 22vw, 88px);  height: clamp(76px, 22vw, 88px);  }
.mobile-drawer li:nth-child(5) a { width: clamp(86px, 25vw, 98px);  height: clamp(86px, 25vw, 98px);  }
.mobile-drawer li:nth-child(6) a { width: clamp(72px, 21vw, 82px);  height: clamp(72px, 21vw, 82px);  }
/* a bubble sitting in front of its neighbour, the way foam stacks */
.mobile-drawer li:nth-child(odd)  { z-index: 2; }
.mobile-drawer li:nth-child(even) { z-index: 1; }

.mobile-drawer a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 9px !important;
  border-radius: 50%;
  font-size: clamp(8px, 2.1vw, 9.5px) !important;
  font-weight: 600;
  letter-spacing: 0.1em !important;
  line-height: 1.42;
  color: #4A4258;
  text-decoration: none;

  background:
    radial-gradient(ellipse 22% 16% at 30% 20%,
      rgba(255,255,255,.98) 0%, rgba(255,255,255,.42) 42%, rgba(255,255,255,0) 100%),
    radial-gradient(circle at 30% 26%,
      rgba(255,255,255,.46) 0%, rgba(255,255,255,.12) 28%, rgba(255,255,255,0) 56%),
    radial-gradient(circle at 76% 82%,
      rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 34%),
    radial-gradient(circle at 68% 74%,
      rgba(190,176,208,.16) 0%, rgba(190,176,208,0) 60%),
    radial-gradient(circle at 50% 50%,
      rgba(146,130,168,0) 56%, rgba(146,130,168,.10) 82%, rgba(146,130,168,.20) 100%),
    rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(6px) saturate(1.3);
          backdrop-filter: blur(6px) saturate(1.3);
  box-shadow:
    inset -6px -8px 16px rgba(150,135,175,.15),
    inset 6px 7px 14px rgba(255,255,255,.55),
    0 0 0 1px rgba(255,255,255,.42),
    0 10px 20px -11px rgba(120,100,140,.55);

  /* gathered at the button, then released */
  opacity: 0;
  transform: translate(var(--drip-x, 0px), -34vh) scale(0.12);
  transition:
    opacity .34s ease-out,
    transform .68s cubic-bezier(.28,1.22,.38,1);
}
.mobile-drawer li:nth-child(1) a { --drip-x: -2px;  }
.mobile-drawer li:nth-child(2) a { --drip-x: -66px; }
.mobile-drawer li:nth-child(3) a { --drip-x: -12px; }
.mobile-drawer li:nth-child(4) a { --drip-x: -78px; }
.mobile-drawer li:nth-child(5) a { --drip-x: -24px; }
.mobile-drawer li:nth-child(6) a { --drip-x: -88px; }

.mobile-drawer.open a { opacity: 1; transform: translate(0, 0) scale(1); }

/* one after another, the way drips leave a rim */
.mobile-drawer.open li:nth-child(1) a { transition-delay: .04s; }
.mobile-drawer.open li:nth-child(2) a { transition-delay: .13s; }
.mobile-drawer.open li:nth-child(3) a { transition-delay: .22s; }
.mobile-drawer.open li:nth-child(4) a { transition-delay: .31s; }
.mobile-drawer.open li:nth-child(5) a { transition-delay: .40s; }
.mobile-drawer.open li:nth-child(6) a { transition-delay: .49s; }

/* settled, they breathe on their own beats */
.mobile-drawer.open li:nth-child(odd)  a { animation: drawerBubbleFloat 6.5s ease-in-out 1.3s infinite; }
.mobile-drawer.open li:nth-child(even) a { animation: drawerBubbleFloat 8s   ease-in-out 1.9s infinite; }
@keyframes drawerBubbleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* the page you are on glows from inside */
.mobile-drawer a.active {
  display: flex !important;
  color: #7A6796 !important;
  -webkit-text-fill-color: currentColor !important;
  /* the brand's two tones together — blue running into pink across the ball,
     never pink on its own */
  background:
    radial-gradient(ellipse 22% 16% at 30% 20%,
      rgba(255,255,255,1) 0%, rgba(255,255,255,.45) 42%, rgba(255,255,255,0) 100%),
    radial-gradient(circle at 30% 26%,
      rgba(255,255,255,.5) 0%, rgba(255,255,255,.14) 28%, rgba(255,255,255,0) 56%),
    radial-gradient(circle at 26% 74%,
      rgba(186,205,239,.62) 0%, rgba(186,205,239,0) 60%),
    radial-gradient(circle at 76% 30%,
      rgba(246,199,216,.55) 0%, rgba(246,199,216,0) 62%),
    linear-gradient(128deg,
      rgba(178,200,238,.34) 0%,
      rgba(214,196,230,.26) 48%,
      rgba(246,196,214,.34) 100%),
    rgba(255,255,255,.24) !important;
  box-shadow:
    inset -6px -8px 16px rgba(150,145,190,.18),
    inset 6px 7px 14px rgba(255,255,255,.72),
    0 0 0 1px rgba(255,255,255,.62),
    0 0 0 5px rgba(196,190,226,.22),
    0 12px 24px -11px rgba(120,115,160,.5);
}
.mobile-drawer a::after { content: none !important; }

@media (prefers-reduced-motion: reduce) {
  .mobile-drawer a { transition: opacity .3s linear; transform: none; }
  .mobile-drawer.open li a { animation: none; }
}

/* ---------------------------------------------------------------------------
   The About tagline sits on ONE line at every width. It was allowed to wrap on
   narrow screens, which split the sparkles away from the words; instead the
   type scales with the viewport so the line always fits.
   --------------------------------------------------------------------------- */
.page-hero .lede-tagline {
  white-space: nowrap !important;
  max-width: none !important;
  /* the line is held on one row, so its size is set by the screen width; the
     rate below is the largest that still clears the gutters at 320px */
  font-size: clamp(10.6px, 3.35vw, 36px) !important;
  gap: clamp(6px, 1.2vw, 15px);
}
.page-hero .lede-tagline .tagline-flourish {
  width: clamp(9.5px, 2.0vw, 22px);
  height: clamp(9.5px, 2.0vw, 22px);
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   The app intro paragraph had no room to breathe on a phone — justified type
   at a tight leading reads as a wall. Looser lines, a little air between them,
   and the same measure the icons below keep.
   --------------------------------------------------------------------------- */
.tracking-content .body-text {
  /* Set as a justified block with real air in it — at 1.7 the lines sat on top
     of one another and the paragraph read as a slab. */
  text-align: justify;
  text-align-last: left;
  hyphens: none; -webkit-hyphens: none;
  line-height: 2.05;
  letter-spacing: 0.006em;
  word-spacing: 0.01em;
}
@media (max-width: 760px) {
  .tracking-content .body-text {
    line-height: 2.15 !important;
    letter-spacing: 0.008em;
    margin-bottom: clamp(30px, 8vw, 46px) !important;
  }
  .tracking-content h2 { line-height: 1.24; margin-bottom: clamp(18px, 4.5vw, 26px); }
  .tracking-content .eyebrow { margin-bottom: clamp(14px, 3.5vw, 20px); }
}

/* ---------------------------------------------------------------------------
   Inside the phone, no colour: the app screen is plain white so the logged
   rows and their tinted icons are the only colour on it.
   --------------------------------------------------------------------------- */
.tracking-visual .phone-screen {
  background: #FFFFFF !important;
}
.tracking-visual .phone-screen .app-header {
  background: #FFFFFF !important;
}

/* The notice board's heading sits on ONE line — it was breaking after
   "quality" and dropping "sleep." to a line of its own. The type scales with
   the viewport so the line always fits the board, at any width. */
.notice-board h2 {
  white-space: nowrap;
  font-size: clamp(17px, 3.1vw, 42px);
  line-height: 1.16;
}

/* ===========================================================================
   DESKTOP NAV — the same soap bubbles as the mobile drawer
   The bar used to be a row of glass pills. It is now the same cluster of round
   bubbles the three-line button drops on a phone: no two the same size, none
   on the same line, roundness from shading only — never an outline — and the
   page showing through the film.
   =========================================================================== */
@media (min-width: 901px) {
  .nav-links-row { padding: 4px var(--gutter) 12px; }
  .nav-links { align-items: center; }
  .nav-links li { display: flex; }

  .nav-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 clamp(7px, 0.7vw, 11px);
    border-radius: 50%;
    white-space: normal;                 /* the word wraps inside the bubble */
    font-size: clamp(10px, 0.88vw, 12.5px);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.4;
    color: #4A4258;

    /* the drawer's film, to the letter: tight specular, broad sheen, bounce
       light returning on the lower right, and a rim vignette */
    background:
      radial-gradient(ellipse 22% 16% at 30% 20%,
        rgba(255,255,255,.98) 0%, rgba(255,255,255,.42) 42%, rgba(255,255,255,0) 100%),
      radial-gradient(circle at 30% 26%,
        rgba(255,255,255,.46) 0%, rgba(255,255,255,.12) 28%, rgba(255,255,255,0) 56%),
      radial-gradient(circle at 76% 82%,
        rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 34%),
      radial-gradient(circle at 68% 74%,
        rgba(190,176,208,.16) 0%, rgba(190,176,208,0) 60%),
      radial-gradient(circle at 50% 50%,
        rgba(146,130,168,0) 56%, rgba(146,130,168,.10) 82%, rgba(146,130,168,.20) 100%),
      rgba(255,255,255,.22);
    -webkit-backdrop-filter: blur(6px) saturate(1.3);
            backdrop-filter: blur(6px) saturate(1.3);
    box-shadow:
      inset -6px -8px 16px rgba(150,135,175,.15),
      inset 6px 7px 14px rgba(255,255,255,.55),
      0 0 0 1px rgba(255,255,255,.42),
      0 10px 20px -11px rgba(120,100,140,.55);
    transition: box-shadow .4s var(--ease), color .3s var(--ease);
  }

  /* TWO SIZES, ALTERNATING (25 Aug 2026, Winnie: "for desktop view menu bar, can
     you create 2 different size as well? home small about us big small then big
     thrn small then big.")

     Six graded sizes became two, odd small and even big, so the bar has the same
     rhythm the drawer does. The catch is that the ODD positions carry the two
     longest labels — "Prenatal Education" and "Signature Services" — so the
     small size is set by what those two need to sit inside, not by how small it
     could look; see the type rule below, which drops the small bubbles' font a
     step so the words fit the smaller circle. */
  /* NOTE: the sizes are NOT set here. A later block gives every ball
     width: var(--nav-bubble) from a single declaration, which beat this rule on
     source order and flattened all seven to one diameter. The two sizes are
     applied at the very end of this file as multipliers OF --nav-bubble, so the
     bar still has one number to change. */
  /* "About Us" is two words that just fit; a little less side padding keeps
     it on one line at every width instead of breaking only in the middle ones */
  .nav-links li:nth-child(2) a { padding-left: 6px; padding-right: 6px; }

  /* none of them on the same line, the way lather packs */
  .nav-links li:nth-child(1) { margin-top: -12px; }
  .nav-links li:nth-child(2) { margin-top:   8px; }
  .nav-links li:nth-child(3) { margin-top:  -6px; }
  .nav-links li:nth-child(4) { margin-top:  10px; }
  .nav-links li:nth-child(5) { margin-top: -10px; }
  .nav-links li:nth-child(6) { margin-top:   5px; }

  /* settled, they breathe on their own beats — the drawer's rhythm, slower */
  .nav-links li:nth-child(1) a { animation: navBubbleFloat 7.4s ease-in-out  .2s infinite; }
  .nav-links li:nth-child(2) a { animation: navBubbleFloat 8.6s ease-in-out  .9s infinite; }
  .nav-links li:nth-child(3) a { animation: navBubbleFloat 6.8s ease-in-out 1.5s infinite; }
  .nav-links li:nth-child(4) a { animation: navBubbleFloat 9.2s ease-in-out  .5s infinite; }
  .nav-links li:nth-child(5) a { animation: navBubbleFloat 7.9s ease-in-out 1.9s infinite; }
  .nav-links li:nth-child(6) a { animation: navBubbleFloat 8.2s ease-in-out 1.1s infinite; }
  @keyframes navBubbleFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
  }

  /* a bubble answers a hover with light, not with movement */
  .nav-links a:hover,
  .nav-links a:focus-visible {
    box-shadow:
      inset -6px -8px 16px rgba(150,135,175,.13),
      inset 6px 7px 14px rgba(255,255,255,.72),
      0 0 0 1px rgba(255,255,255,.6),
      0 14px 26px -12px rgba(120,100,140,.55);
  }

  /* the page you are on holds the brand's two tones inside the glass */
  .nav-links a.active {
    color: #7A6796;
    /* the text nav painted this label with a clipped gradient; inside a bubble
       that left it invisible */
    -webkit-text-fill-color: currentColor;
    -webkit-background-clip: border-box;
            background-clip: border-box;
    background:
      radial-gradient(ellipse 22% 16% at 30% 20%,
        rgba(255,255,255,1) 0%, rgba(255,255,255,.45) 42%, rgba(255,255,255,0) 100%),
      radial-gradient(circle at 26% 74%, rgba(186,205,239,.55) 0%, rgba(186,205,239,0) 62%),
      radial-gradient(circle at 76% 30%, rgba(246,199,216,.5) 0%, rgba(246,199,216,0) 64%),
      linear-gradient(128deg, rgba(178,200,238,.30) 0%, rgba(214,196,230,.22) 48%, rgba(246,196,214,.30) 100%),
      rgba(255,255,255,.22);
    box-shadow:
      inset -6px -8px 16px rgba(150,145,190,.16),
      inset 6px 7px 14px rgba(255,255,255,.72),
      0 0 0 1px rgba(255,255,255,.6),
      0 0 0 5px rgba(196,190,226,.2),
      0 12px 24px -12px rgba(120,115,160,.5);
  }
  /* the underline belonged to a text nav */
  /* the text nav's gold underline lived on a::after; that element is a foam
     bead now, so the underline is not drawn at all on this bar */

  /* -------------------------------------------------------------------------
     A LITTLE AIR EITHER SIDE
     The six bubbles are untouched. Beside each one drifts a single small
     bubble — one to its left, one to its right, well clear of the rim. They
     are mostly air: a hairline of film, one small catch of light, no fill and
     no shadow, so they read as quiet punctuation rather than a cluster.
     Purely decorative; nothing here takes a tap.
     ------------------------------------------------------------------------- */
  .nav-links li { position: relative; }
  .nav-links li::before,
  .nav-links li::after,
  .nav-links a::after,
  .nav-links a:hover::after,
  .nav-links a.active::after {
    content: '' !important;
    display: block !important;
    position: absolute;
    pointer-events: none;
    z-index: -1;
    width: 0; height: 0;
    left: auto; right: auto; bottom: auto; transform: none;
    /* the text nav's gold underline lived on a::after; it is undone here */
    background: none;
    box-shadow: none;
    border-radius: 50%;
  }

  .nav-links li::before,
  .nav-links li::after {
    /* the big bubbles' film at a tenth the size: a catch of light up and left,
       the faintest cool tint where the surface turns away, a fine bright edge
       and just enough shadow to lift it off the ivory */
    background:
      radial-gradient(circle at 32% 27%,
        rgba(255,255,255,.98) 0%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 100%),
      radial-gradient(circle at 50% 50%,
        rgba(210,202,232,.22) 58%, rgba(184,202,236,.30) 88%, rgba(255,255,255,0) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.72),
      inset -2px -3px 6px rgba(150,135,175,.15),
      0 5px 11px -7px rgba(120,100,140,.5);
  }

  /* one either side of every bubble, each a different size and height so the
     bar has a rhythm rather than a pattern */
  .nav-links li:nth-child(1)::before { width: 12px; height: 12px; right: calc(100% + 26px); top: 44px; animation: navFoam 13s ease-in-out 1.9s infinite; }
  .nav-links li:nth-child(1)::after  { width:  7px; height:  7px; left:  calc(100% + 32px); top: 16px; animation: navFoam 11s ease-in-out  .4s infinite; }
  .nav-links li:nth-child(2)::before { width: 10px; height: 10px; right: calc(100% + 30px); top: 12px; animation: navFoam 15s ease-in-out 3.2s infinite; }
  .nav-links li:nth-child(2)::after  { width: 12px; height: 12px; left:  calc(100% + 28px); top: 50px; animation: navFoam 12s ease-in-out 1.1s infinite; }
  .nav-links li:nth-child(3)::before { width:  8px; height:  8px; right: calc(100% + 34px); top: 52px; animation: navFoam 14s ease-in-out  .7s infinite; }
  .nav-links li:nth-child(3)::after  { width:  9px; height:  9px; left:  calc(100% + 30px); top: 14px; animation: navFoam 16s ease-in-out 2.6s infinite; }
  .nav-links li:nth-child(4)::before { width: 13px; height: 13px; right: calc(100% + 28px); top: 18px; animation: navFoam 11s ease-in-out 2.2s infinite; }
  .nav-links li:nth-child(4)::after  { width:  7px; height:  7px; left:  calc(100% + 34px); top: 56px; animation: navFoam 15s ease-in-out 3.8s infinite; }
  .nav-links li:nth-child(5)::before { width: 11px; height: 11px; right: calc(100% + 32px); top: 48px; animation: navFoam 13s ease-in-out 1.4s infinite; }
  .nav-links li:nth-child(5)::after  { width:  6px; height:  6px; left:  calc(100% + 30px); top: 18px; animation: navFoam 12s ease-in-out  .9s infinite; }
  .nav-links li:nth-child(6)::before { width: 14px; height: 14px; right: calc(100% + 26px); top: 20px; animation: navFoam 14s ease-in-out 3.5s infinite; }
  .nav-links li:nth-child(6)::after  { width:  8px; height:  8px; left:  calc(100% + 24px); top: 48px; animation: navFoam 16s ease-in-out 2.0s infinite; }

  @keyframes navFoam {
    0%, 100% { transform: translate(0, 0)      scale(1);    opacity: .78; }
    40%      { transform: translate(2px, -6px) scale(1.05); opacity: .92; }
    72%      { transform: translate(-2px, 3px) scale(.98);  opacity: .72; }
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-links li a,
    .nav-links li::before,
    .nav-links li::after,
    .nav-links a::after { animation: none !important; }
  }
}

/* ---------------------------------------------------------------------------
   ABOUT — the run-in above the curtain window
   Three paddings stacked underneath the tagline (the hero's, the section's and
   the story's) left about 145px of empty page between the last line and the
   frame. The curtain window is the point of this page and it is sized to a
   screen, so the run-in is now a single small step and the frame starts nearly
   as soon as the wording ends.
   --------------------------------------------------------------------------- */
/* The band's top padding was two to four times its bottom, so the pair sat
   high in its own colour. Equal above and below centres them in the wash. */
.page-hero--with-baby {
  padding-top:    clamp(22px, 2.4vw, 34px) !important;
  padding-bottom: clamp(22px, 2.4vw, 34px) !important;
}
/* the tagline belongs to the title, not to the space underneath it */
.page-hero--with-baby h1 { margin-bottom: clamp(8px, 0.9vw, 13px) !important; }
.page-hero--with-baby + .section { padding-top: 0 !important; }
.page-hero--with-baby + .section .fs-root { padding-top: clamp(16px, 1.7vw, 24px) !important; }

/* ===========================================================================
   SEVEN BUBBLES — Prenatal Education joins the bar (21 Aug 2026, Winnie)
   The foam was cut for exactly six balls: every size, every offset, every
   float beat and every little air bubble was pinned to an nth-child from 1 to
   6. A seventh link slotted in after "About Us" would have inherited nothing
   and landed as a square. The cluster is re-cut here for seven, keeping the
   same rule it always had — no two the same size, no two on the same line —
   and giving the longest label ("Prenatal Education", which sets on two
   lines) the largest ball so the words never touch the film.

   Order: Home · About Us · Prenatal Education · Angel Cribs ·
          Signature Services · Our Partners · Get In Touch
   =========================================================================== */
@media (min-width: 901px) {
  /* ONE SIZE FOR ALL SEVEN, SCALED TO FILL THE ROW
     (25 Aug 2026, Winnie: "can make the top menu same size for all pages?
     maximise it fitting the screen ... some are big and some are small")

     They were seven deliberately different diameters, and because every one
     bottomed out at its clamp minimum on a 1280px screen the bar read as a
     jumble of sizes rather than a set. Every ball is now the same circle, and
     the circle grows with the viewport: ~108px across at 1280px, ~128px from
     1525px up, with roughly 55px of air between neighbours for the little
     foam beads. --nav-bubble is the single number to change.

     Written as the same nth-child list the sizes used, because the six-ball
     rules further up this file are more specific than a plain `li a` and
     would otherwise win. */
  /* --nav-bubble is declared on :root — see THE BAR'S OWN SIZE, IN ONE PLACE */
  .nav-links li:nth-child(1) a,
  .nav-links li:nth-child(2) a,
  .nav-links li:nth-child(3) a,
  .nav-links li:nth-child(4) a,
  .nav-links li:nth-child(5) a,
  .nav-links li:nth-child(6) a,
  .nav-links li:nth-child(7) a {
    width:  var(--nav-bubble);
    height: var(--nav-bubble);
    /* one padding too — the old per-ball tweaks existed only because some
       balls were too small for their label. None of them are now. */
    padding-left:  clamp(7px, 0.7vw, 11px);
    padding-right: clamp(7px, 0.7vw, 11px);
  }

  /* A WAVE, NOT A ROW (25 Aug 2026, Winnie: "put slightly pattern top menu
     like a curvy slimy and not one straight line ... something like the mobile
     view menu tab")

     The offsets used to be a hand-picked ±12px jitter, which on a 128px ball
     barely registered — the bar read as a straight line. They are a sine now,
     one and a quarter cycles across the seven, and they are a FRACTION of the
     ball rather than a fixed pixel count, so the wave keeps its shape as the
     bubbles grow with the viewport. Positive pushes a ball down.

       sin(θ) at θ = 0, 1.31, 2.62, 3.93, 5.24, 6.55, 7.85 rad */
  /* The row centred its items, and a centred flex item splits its own
     margin — every offset landed at HALF the value written, which is why the
     old jitter read as a straight line. Aligned to the top, the numbers below
     are the real displacement. */
  .nav-links { --nav-wave: calc(var(--nav-bubble) * 0.20); align-items: flex-start; }
  /* 25 Aug 2026, Winnie: "can you wave this glass bubble, across whole page,
     that the bubble be like up-down-up-down-up-down positioning?"
     Was a sine — a smooth swell, which at these amplitudes read as a drift
     rather than a rhythm. It alternates strictly now: every ball is either up
     or down, none level with its neighbour, so the row bounces. The amplitude
     is doubled to make the alternation legible; a strict zigzag at the old
     depth would have looked like a mistake rather than a pattern. */
  .nav-links li:nth-child(1) { margin-top: calc(var(--nav-wave) * -1); }
  .nav-links li:nth-child(2) { margin-top: calc(var(--nav-wave) *  1); }
  .nav-links li:nth-child(3) { margin-top: calc(var(--nav-wave) * -1); }
  .nav-links li:nth-child(4) { margin-top: calc(var(--nav-wave) *  1); }
  .nav-links li:nth-child(5) { margin-top: calc(var(--nav-wave) * -1); }
  .nav-links li:nth-child(6) { margin-top: calc(var(--nav-wave) *  1); }
  /* 25 Aug 2026 — the trough was pulled up from 1.00 to 0.62. The spacing
     across this row is mathematically identical (seven 128px balls, six 84px
     gaps, equal margins either side, measured), but the last ball sat a full
     amplitude below "Our Partners" and the eye read that pair as tighter than
     the rest. Evening the heights fixes the look without breaking the maths. */
  .nav-links li:nth-child(7) { margin-top: calc(var(--nav-wave) * -1); }

  /* the wave needs headroom: the highest ball rides ~0.87 of the amplitude
     above the line and the float animation lifts it 4px further, so the row
     is given room to hold every ball whole instead of clipping the crests */
  .nav-links-row {
    padding-top:    clamp(10px, 1.2vw, 18px);
    padding-bottom: clamp(12px, 1.4vw, 20px);
  }

  /* seven beats, none of them shared */
  .nav-links li:nth-child(1) a { animation: navBubbleFloat 7.4s ease-in-out  .2s infinite; }
  .nav-links li:nth-child(2) a { animation: navBubbleFloat 8.6s ease-in-out  .9s infinite; }
  .nav-links li:nth-child(3) a { animation: navBubbleFloat 6.8s ease-in-out 1.5s infinite; }
  .nav-links li:nth-child(4) a { animation: navBubbleFloat 9.2s ease-in-out  .5s infinite; }
  .nav-links li:nth-child(5) a { animation: navBubbleFloat 7.9s ease-in-out 1.9s infinite; }
  .nav-links li:nth-child(6) a { animation: navBubbleFloat 8.2s ease-in-out 1.1s infinite; }
  .nav-links li:nth-child(7) a { animation: navBubbleFloat 7.1s ease-in-out 2.4s infinite; }

  /* a little air either side of the seventh, too */
  .nav-links li:nth-child(7)::before { width: 10px; height: 10px; right: calc(100% + 28px); top: 46px; animation: navFoam 15s ease-in-out 2.8s infinite; }
  .nav-links li:nth-child(7)::after  { width:  7px; height:  7px; left:  calc(100% + 26px); top: 15px; animation: navFoam 12s ease-in-out 1.7s infinite; }

  @media (prefers-reduced-motion: reduce) {
    .nav-links li:nth-child(7) a,
    .nav-links li:nth-child(7)::before,
    .nav-links li:nth-child(7)::after { animation: none !important; }
  }
}

/* --- the drawer's droplets, re-cut for seven ------------------------------
   Seven balls fall where six used to, so they nest a little deeper into one
   another; the column still lands inside a phone screen without scrolling. */
.mobile-drawer li:nth-child(1) { margin-right: 2px;  margin-top: 0;     }
.mobile-drawer li:nth-child(2) { margin-right: 66px; margin-top: -18px; }
.mobile-drawer li:nth-child(3) { margin-right: 10px; margin-top: -20px; }
.mobile-drawer li:nth-child(4) { margin-right: 80px; margin-top: -18px; }
.mobile-drawer li:nth-child(5) { margin-right: 20px; margin-top: -20px; }
.mobile-drawer li:nth-child(6) { margin-right: 88px; margin-top: -18px; }
.mobile-drawer li:nth-child(7) { margin-right: 16px; margin-top: -20px; }

.mobile-drawer li:nth-child(1) a { width: clamp(80px, 23vw, 92px);  height: clamp(80px, 23vw, 92px);  }
.mobile-drawer li:nth-child(2) a { width: clamp(68px, 19vw, 78px);  height: clamp(68px, 19vw, 78px);  }
.mobile-drawer li:nth-child(3) a { width: clamp(92px, 26.5vw, 106px); height: clamp(92px, 26.5vw, 106px); }
.mobile-drawer li:nth-child(4) a { width: clamp(74px, 21vw, 86px);  height: clamp(74px, 21vw, 86px);  }
.mobile-drawer li:nth-child(5) a { width: clamp(88px, 25vw, 100px); height: clamp(88px, 25vw, 100px); }
.mobile-drawer li:nth-child(6) a { width: clamp(70px, 20vw, 80px);  height: clamp(70px, 20vw, 80px);  }
.mobile-drawer li:nth-child(7) a { width: clamp(78px, 22.5vw, 90px); height: clamp(78px, 22.5vw, 90px); }

.mobile-drawer li:nth-child(1) a { --drip-x: -2px;  }
.mobile-drawer li:nth-child(2) a { --drip-x: -66px; }
.mobile-drawer li:nth-child(3) a { --drip-x: -10px; }
.mobile-drawer li:nth-child(4) a { --drip-x: -80px; }
.mobile-drawer li:nth-child(5) a { --drip-x: -20px; }
.mobile-drawer li:nth-child(6) a { --drip-x: -88px; }
.mobile-drawer li:nth-child(7) a { --drip-x: -16px; }

.mobile-drawer.open li:nth-child(1) a { transition-delay: .04s; }
.mobile-drawer.open li:nth-child(2) a { transition-delay: .12s; }
.mobile-drawer.open li:nth-child(3) a { transition-delay: .20s; }
.mobile-drawer.open li:nth-child(4) a { transition-delay: .28s; }
.mobile-drawer.open li:nth-child(5) a { transition-delay: .36s; }
.mobile-drawer.open li:nth-child(6) a { transition-delay: .44s; }
.mobile-drawer.open li:nth-child(7) a { transition-delay: .52s; }

/* ===========================================================================
   THE BAR FOLDS ON SCROLL (21 Aug 2026, Winnie)
   At rest the bar is two rows — the logo above, the cluster of bubbles below —
   and on a 1366px laptop that spent a third of the screen before a single word
   of the page.

   So once the reader has scrolled past it, the two rows fold onto ONE: the logo
   steps down in size and holds the left, and the whole bubble cluster SWIPES TO
   THE RIGHT beside it. The foam itself is not touched — every bubble keeps its
   own size, every one keeps its place in the wave, they keep their little
   bubbles of air either side and they keep breathing on their own beats. A
   first attempt shrank them all to one size on one straight line, which read as
   a toolbar and threw away the thing that makes this bar Baby Angels'. The only
   height that comes out is the logo's row and the row padding.

   The fold is animated rather than snapped: both rows are flex items whose
   basis runs from 100% (stacked) to auto (side by side), and flex-basis is a
   length, so it transitions. Below 1025px the bubble row is already replaced by
   the drawer, so none of this applies there.
   =========================================================================== */
@media (min-width: 1025px) {
  .nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    transition:
      background 0.35s var(--ease),
      transform 0.55s var(--ease),
      opacity 0.45s var(--ease);
  }
  /* No transition on either row on purpose. Sliding the logo across the bar
     while the seven balls re-space themselves underneath it meant a dozen
     things travelling at once, on top of a page that was already moving — it
     was exhausting to watch. The bar changes arrangement behind a fade
     instead (see THE FOLD IS A DISSOLVE below): nothing races anywhere. */
  .nav-logo-row { flex: 0 0 100%; }
  .nav-links-row { flex: 1 1 100%; }

  /* ---- folded ---------------------------------------------------------- */
  /* FOLDED, THE FOAM STEPS BACK DOWN
     At rest the balls are big because that is the page's opening image. Once
     the bar is a sticky strip with the page running under it, that size is
     just a wall — so --nav-bubble is redeclared here and every rule that reads
     it (diameter, wave, reserved height) follows automatically. */
  /* THE FOLDED BAR TAKES ONE STEP DOWN, NOT A LEAP (25 Aug 2026, Winnie)
     Asked first for the folded ball to match the unfolded one exactly, then
     — seeing it — for "too big, reduce the size slightly after-scroll". So it
     is a small, deliberate step: 128px at rest, 110px once folded (0.86×),
     with the mark beside it following automatically because
     .nav--compact .nav-logo img reads this same token. Capped by 1342px, so
     every desktop window folds to exactly the same 110px. */
  .nav.nav--compact { --nav-bubble: clamp(68px, 6.8vw, 94px); }
  /* 25 Aug 2026, Winnie: "while scrolling, please make this whole tab spacious
     and not tight." The folded bar was clamped hard around the foam — 6px over
     the mark, 18/16 over and under the balls — so the crests sat almost on the
     top edge. Every side is opened up; the bar is ~30px taller for it and
     still less than half the height of the landing state. */
  .nav.nav--compact .nav-logo-row {
    flex: 0 0 clamp(150px, 14vw, 230px);
    padding: clamp(10px, 1.2vw, 16px) 0;
  }
  /* the mark is sized to the foam, so it reads as one of the family rather
     than as a shrunken letterhead parked beside it */
  /* 25 Aug 2026, Winnie: "can you make the logo as same as the bubble? do not
     shrink the logo, apply this to all tab's menu after-scroll."
     The mark now measures exactly one ball in the folded bar — it reads as one
     of the family rather than as a shrunken letterhead parked beside them. One
     token drives both, so they can never drift apart again. */
  .nav.nav--compact .nav-logo img { max-height: var(--nav-bubble); }
  .nav.nav--compact .nav-logo-fallback .lg-name { font-size: 19px; }
  .nav.nav--compact .nav-logo-fallback .lg-tag  { display: none; }

  /* the cluster swipes right, whole and unaltered */
  .nav.nav--compact .nav-links-row {
    flex: 1 1 0;
    /* The wave lifts three of the balls ABOVE the row's own top line (the
       stagger runs to -12px), and the bar starts at the very top of the
       window — so without this much padding the highest bubbles were sliced
       off by the edge of the screen. Every ball now stands whole. */
    padding: clamp(22px, 2.5vw, 36px) var(--gutter)
             clamp(20px, 2.3vw, 32px) clamp(22px, 2.6vw, 46px);
    display: flex;
  }
  /* The cluster spreads across everything the logo leaves, exactly as it does
     at full height — so folding reads as the same arrangement getting shorter
     rather than as a different bar. Gathered tight to one side it left a bald
     stretch in the middle; spread, the foam carries the whole shelf. The gap
     is a floor, not the spacing: space-between opens it further as there is
     room, and stops the balls colliding when there is not. */
  .nav.nav--compact .nav-links {
    width: 100%;
    max-width: none;
    margin: 0;
    justify-content: space-between;
    /* A FLOOR, NOT THE SPACING — space-between opens it wider wherever there
       is room. It has to stay low: now that the folded balls are full size,
       a 25px floor was 4px more than a 1280px window could fit beside the
       mark, and the whole cluster wrapped onto a second row — making the
       folded bar TALLER than the unfolded one. Measured one-row fit from
       1025px up. */
    gap: clamp(14px, 1.6vw, 34px);
  }
  /* NOTHING here touches bubble size, stagger, foam or float — that is the
     point of this block. The only reason it exists is to move the cluster. */

}

/* ---------------------------------------------------------------------------
   THE FOLD IS A DISSOLVE, NOT A JOURNEY
   The bar dips to nothing for a fifth of a second, changes arrangement while
   it cannot be seen, and comes back already folded. The eye reads a soft blink
   rather than a logo sprinting to the left past seven bubbles shuffling into
   new places. Every transition inside the bar is suspended for the duration,
   so nothing is still easing when it fades back in.
   --------------------------------------------------------------------------- */
.nav {
  transition:
    background 0.35s var(--ease),
    transform 0.55s var(--ease),   /* the lift-away on the founders' story */
    opacity 0.26s var(--ease);
}
.nav.nav--morphing { opacity: 0; }
.nav.nav--morphing,
.nav.nav--morphing * {
  transition: opacity 0.18s var(--ease) !important;
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .nav, .nav.nav--morphing { transition: none !important; opacity: 1 !important; }
}

/* ---------------------------------------------------------------------------
   NO RULED LINE UNDER THE BAR
   A solid ivory band stopping dead against the page drew a hard horizontal
   rule across the screen — and it cut straight under the foam, which made the
   balls look sliced. The band now dissolves instead: ivory at full strength
   where the bubbles sit, then thinning to nothing over about 40px, so the page
   emerges from underneath rather than being cut off by an edge.
   --------------------------------------------------------------------------- */
.nav.scrolled::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: clamp(26px, 3.2vw, 44px);
  pointer-events: none;
  background: linear-gradient(180deg,
    rgb(251, 247, 242)      0%,
    rgba(251, 247, 242, .94) 18%,
    rgba(251, 247, 242, .74) 40%,
    rgba(251, 247, 242, .44) 62%,
    rgba(251, 247, 242, .18) 82%,
    rgba(251, 247, 242, 0)  100%);
}

/* ===========================================================================
   THE BAR STEPS ASIDE FOR THE FOUNDERS' STORY (21 Aug 2026, Winnie)
   The interactive scene on About Us is a 3:2 frame up to 1280px wide, which
   is 853px tall — taller than what a 1440x900 laptop leaves once the bar has
   taken its share, so the nursery could never be seen whole. While the scene
   holds the screen the bar lifts out of the way entirely and the frame is
   capped to the visible height, so the whole room is in view at once. Reach
   for the top of the window — or tab into the bar — and it comes straight
   back. Desktop only; on a phone the scene already runs full-bleed.
   =========================================================================== */
@media (min-width: 1025px) {
  html.fs-immersive .nav {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }
  /* The frame's own width is deliberately left alone: narrowing it makes the
     chapter text taller, and the scene's height is set from that text — so a
     "helpful" cap would cost height rather than save it. */
  html.fs-immersive .fs-root { scroll-margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav, .nav-logo-row, .nav-links-row, .nav-links a, .nav-links li {
    transition: none !important;
  }
}

/* ===========================================================================
   ONE BANNER FOR EVERY PAGE (21 Aug 2026, Winnie)
   Every sub-page opens with the same pink-blue-pink-blue band, but each had
   drifted to its own size: About ran 219px tall with a 36px tagline, Get In
   Touch 204px with no description at all, Our Partners 317px on a 920px
   measure, FAQ 329px because it still carried an eyebrow. Landing on one page
   after another, the top of the site kept changing shape.

   The Prenatal Education banner is the standard. Every band now holds the same
   height, the same type sizes and the same 640px measure, and centres whatever
   it contains inside that. Pages with less to say are padded up to it rather
   than sitting short; pages with more are trimmed to two or three lines in
   their own markup.
   =========================================================================== */
.page-hero {
  /* A floor, set above the tallest banner any page produces, so that EVERY
     band is exactly this tall and the content centres inside it. Set below
     that, pages with a one-line description sat shorter than pages with two. */
  min-height: 288px;
  padding-top: clamp(40px, 3.4vw, 52px) !important;
  padding-bottom: clamp(40px, 3.4vw, 52px) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.page-hero > * { max-width: 100%; }

/* one measure for every description, so the line breaks fall alike */
.page-hero .lede {
  max-width: 640px !important;
  margin-left: auto;
  margin-right: auto;
}

/* The About tagline was set at a viewport-scaled size and held on one line, so
   it could never wrap — which made it more than twice the size of the same
   element on every other page. It now sets at the shared description size. It
   keeps its single line on a desktop: at 640px the closing sparkle was tipping
   onto a line of its own, so the measure is a little wider here than for a
   paragraph, and the line is only allowed to break on a phone. */
.page-hero .lede-tagline {
  max-width: 780px !important;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(16px, 1.75vw, 25px) !important;
  white-space: nowrap !important;
  flex-wrap: nowrap;
  justify-content: center;
}

@media (max-width: 760px) {
  .page-hero { min-height: 312px; }
  .page-hero .lede-tagline {
    max-width: 640px !important;
    white-space: normal !important;
    flex-wrap: wrap;
  }
}

/* ---------------------------------------------------------------------------
   SIGNATURE SERVICES KEEPS THE SAME BAND (21 Aug 2026, Winnie)
   That page has no .page-hero — its headline was moved inside the artwork on
   06 Aug and carries the banner wash on its own ::before. The consequence was
   that its band stood 217px tall where every other page stands 288px, with the
   headline set 17px smaller. The box and the type are matched here rather than
   by rebuilding the page: same height, same padding, same size, centred.
   --------------------------------------------------------------------------- */
.ac-headline {
  min-height: 288px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: clamp(40px, 3.4vw, 52px) !important;
  padding-bottom: clamp(40px, 3.4vw, 52px) !important;
  margin-bottom: 0 !important;
  font-size: clamp(40px, 6vw, 80px) !important;
  line-height: 1.05;
}
/* The line is wrapped in a span so the flex box has ONE child: as flex items,
   "More than just" and the pink "baby care." lost the space between them and
   set as "justbaby". */
.ac-headline-line { display: block; }
@media (max-width: 760px) {
  .ac-headline { min-height: 312px; font-size: clamp(30px, 8vw, 44px) !important; }
}

/* ===========================================================================
   MOBILE SCROLL SMOOTHNESS (24 Aug 2026, Winnie — "it hangs a little when
   there is a picture")
   `will-change` promotes an element to its own GPU layer. It is a hint meant
   for a handful of elements; across the site it had accumulated to 64 promoted
   layers on the home page alone. On a desktop GPU that is free. On a phone it
   is not — each layer costs video memory, and once the budget is gone the
   compositor starts evicting and re-rasterising layers mid-scroll, which is
   felt as a scroll that stalls and then catches up.
   Dropping the hint changes nothing visually: anything actually animating a
   transform still gets its own layer automatically, for as long as it needs
   one. Desktop keeps the hints.
   =========================================================================== */
@media (max-width: 620px) {
  * { will-change: auto !important; }
}

/* ===========================================================================
   THE DRAWER'S BUBBLES — bigger to read, bigger to hit (24 Aug 2026, Winnie)
   The seven droplets ran 68–106px with 8–9.5px labels, which is small for a
   thumb and smaller still to read at arm's length. Each ball grows about 14%
   and the label goes up to 10–11.5px. The nesting is deepened at the same
   time — the column would otherwise grow ~50px and run off the bottom of a
   short phone, since nothing here scrolls.
   =========================================================================== */
.mobile-drawer li:nth-child(2) { margin-top: -24px; }
.mobile-drawer li:nth-child(3) { margin-top: -26px; }
.mobile-drawer li:nth-child(4) { margin-top: -24px; }
.mobile-drawer li:nth-child(5) { margin-top: -26px; }
.mobile-drawer li:nth-child(6) { margin-top: -24px; }
.mobile-drawer li:nth-child(7) { margin-top: -26px; }

.mobile-drawer li:nth-child(1) a { width: clamp(91px, 26vw, 105px);   height: clamp(91px, 26vw, 105px);   }
.mobile-drawer li:nth-child(2) a { width: clamp(78px, 21.7vw, 89px);  height: clamp(78px, 21.7vw, 89px);  }
.mobile-drawer li:nth-child(3) a { width: clamp(105px, 30vw, 121px);  height: clamp(105px, 30vw, 121px);  }
.mobile-drawer li:nth-child(4) a { width: clamp(84px, 24vw, 98px);    height: clamp(84px, 24vw, 98px);    }
.mobile-drawer li:nth-child(5) a { width: clamp(100px, 28.5vw, 114px);height: clamp(100px, 28.5vw, 114px);}
.mobile-drawer li:nth-child(6) a { width: clamp(80px, 22.8vw, 91px);  height: clamp(80px, 22.8vw, 91px);  }
.mobile-drawer li:nth-child(7) a { width: clamp(89px, 25.7vw, 103px); height: clamp(89px, 25.7vw, 103px); }

.mobile-drawer a {
  padding: 0 11px !important;
  font-size: clamp(10px, 2.6vw, 11.5px) !important;
}

/* ===========================================================================
   MOBILE BREATHING ROOM (24 Aug 2026, Winnie — "don't stick all the words to
   the edge; not so tight, not so empty")
   The gutter had been squeezed twice on the way down — 24px at tablet, 18px
   below 480px, then 16px again — so on a 390px phone every paragraph on every
   page ran to within 16px of the glass. 22px is the smallest that still reads
   as a margin rather than a crop, and it costs 12px of measure, which none of
   the justified paragraphs miss.
   Set last so it wins over the earlier :root overrides regardless of source
   order, and only below 620px, where the columns are single-file anyway.
   =========================================================================== */
@media (max-width: 620px) {
  :root { --gutter: 22px; }
}
@media (max-width: 380px) {
  :root { --gutter: 18px; }
}

/* ---------------------------------------------------------------------------
   THE EYEBROW'S DASH, WHEN THE LABEL WRAPS
   The eyebrow is an inline-flex row: dash, then the label as an anonymous flex
   item. Shrink-to-fit gives that row the full available width as soon as the
   label is too long for one line, so the label item became 311px wide and
   centred its two lines inside itself — leaving the dash stranded ~45px to the
   left. Making the dash part of the text flow instead means it sits beside the
   first line and centres with it, at any number of lines.
   --------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .eyebrow {
    display: block;
    text-align: center;
  }
  .eyebrow::before {
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    margin-right: 14px;
    position: relative;
    top: -1px;
  }
}

/* ===========================================================================
   NO SCROLL-DRIVEN MOVEMENT ON A PHONE (24 Aug 2026, Winnie — "I do not want
   scrollable effect on all photo")
   Two separate things were moving pictures as the page scrolled: the .reveal
   entrance, which slides every block up 70px and scales it from 0.985, and the
   .parallax-img handler, which offsets an image by up to ±22px against the
   scroll. Both are switched off below 620px. Content still appears — it simply
   appears in place, already where it belongs.
   This also removes the last of the per-frame compositing work during a scroll,
   which is the same thing that was making the page feel like it stalled.
   Desktop keeps both.
   =========================================================================== */
@media (max-width: 620px) {
  html.has-js .reveal,
  html.has-js .reveal--left,
  html.has-js .reveal--right,
  html.has-js .reveal.in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .parallax-img { transform: none !important; }
}

/* The footer sat on its own 16px padding rather than the page gutter, so its
   slogan and blurb stayed pinned to the edge after everything else moved in. */
@media (max-width: 620px) {
  .footer { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
}

/* ===========================================================================
   STACKING — THE DRAWER MUST WIN (24 Aug 2026, Winnie)
   The mobile drawer sat at z-index 99, chosen back when nothing on the page
   went higher. Two things now do:
     · Leaflet builds its own layers — map panes at 400 and its zoom control at
       1000 — so on Get In Touch the whole map painted straight over the open
       menu, bubbles and all.
     · The WhatsApp float is at 950, which is why it floated over the menu on
       every page.
   The drawer moves above both, the nav stays one step above the drawer (the
   hamburger and logo have to remain clickable while it is open), and the
   poster sits above everything. The WhatsApp button is simply taken out of the
   way while the menu is open — it is not reachable behind it anyway.
   =========================================================================== */
.mobile-drawer { z-index: 1200 !important; }
.nav           { z-index: 1210 !important; }
.poster-overlay { z-index: 1400 !important; }

/* Leaflet's own layers, kept below the drawer without disturbing their order */
.leaflet-pane               { z-index: 40 !important; }
.leaflet-top,
.leaflet-bottom             { z-index: 90 !important; }
.leaflet-control-container  { z-index: 90 !important; }

.mobile-drawer.open ~ .wa-float,
body:has(.mobile-drawer.open) .wa-float {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease);
}

/* ===========================================================================
   THE DRAWER OVER A DARK SECTION (24 Aug 2026, Winnie)
   The panel is frosted glass — white at 50%/44% over a 20px backdrop blur.
   Over the site's ivory that reads as light glass, which is the intent. Opened
   over one of the dark bands (the twilight cot scene, the plum programme
   band), the same 50% let the dark through and the whole panel turned
   grey-purple, taking the bubbles' contrast with it.
   The white is raised so the panel stays light whatever it is over. The blur
   and the glass feel are kept — it is still translucent, just not translucent
   enough to be dragged dark.
   =========================================================================== */
.mobile-drawer {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.93) 0%,
    rgba(252, 253, 255, 0.90) 100%) !important;
}

/* ---------------------------------------------------------------------------
   …and they arrive together, not one after another.
   Each row carried a transition-delay from 0.10s to 0.46s, so the last bubble
   landed almost half a second after the first. Against ivory that reads as a
   flourish; against a dark band it reads as the panel slowly lighting up from
   the top down. The rise is kept, the queue is not.
   --------------------------------------------------------------------------- */
.mobile-drawer.open li:nth-child(1),
.mobile-drawer.open li:nth-child(2),
.mobile-drawer.open li:nth-child(3),
.mobile-drawer.open li:nth-child(4),
.mobile-drawer.open li:nth-child(5),
.mobile-drawer.open li:nth-child(6),
.mobile-drawer.open li:nth-child(7) { transition-delay: 0s !important; }
.mobile-drawer li { transition-duration: 0.32s !important; }

/* ===========================================================================
   AIR UNDER A HEADING (24 Aug 2026, Winnie)
   Audited every heading-to-paragraph gap on all eight main pages at 390px.
   Seven places had the body text sitting 6–12px under its own heading, which
   on a phone reads as one block rather than a title and its answer. 18px is
   the least that separates them without opening a hole.
   =========================================================================== */
@media (max-width: 620px) {
  h1 + p, h2 + p, h3 + p,
  h1 + .lede, h2 + .lede, h3 + .lede,
  h1 + .body-text, h2 + .body-text, h3 + .body-text,
  .faq-item h3 + *, .map-info h3 + *,
  .instructor-name + .instructor-role {
    margin-top: 18px;
  }
}

/* ---------------------------------------------------------------------------
   THE HERO LEDE IS JUSTIFIED (24 Aug 2026, Winnie)
   It is the only long paragraph on the home page still ragged; every other
   body paragraph on the site is justified with a left last line.
   --------------------------------------------------------------------------- */
.hero--bubbles .hero-lede {
  text-align: justify;
  text-align-last: left;
  hyphens: none;
  -webkit-hyphens: none;
}

/* ===========================================================================
   THE FOOTER SLOGAN ON ONE LINE (24 Aug 2026, Winnie)
   At 14px with 0.24em tracking the line needs 551px; a 390px phone offers 346
   and a 320px one 284. Almost a third of that width was tracking alone, so the
   letter-spacing comes down first and the type follows. Measured to clear the
   column at 320px with a few pixels to spare.
   =========================================================================== */
@media (max-width: 620px) {
  /* REVERSED 24 Aug 2026 (Winnie): squeezing this onto one line drove the type
     down to 8px on a 320px screen, which is smaller than anything else on the
     site. Two lines at a readable size is the better trade — and the
     non-breaking space between "A" and "Sanctuary" puts the break in the right
     place, so it reads "Nurturing Precious Life," / "A Sanctuary for Babies". */
  .footer-slogan {
    font-size: clamp(11px, 3.1vw, 14px) !important;
    letter-spacing: 0.14em !important;
    white-space: normal;
    line-height: 1.75;
  }
}

/* Two paragraphs the justification pass had missed — the address block on the
   home page and the partner write-ups. */
.map-info-addr,
.partner-card p,
.partner-body p,
.partner-acc-body p {
  text-align: justify;
  text-align-last: left;
  hyphens: none;
  -webkit-hyphens: none;
}

/* The About tagline sat 10px under the headline; it is a flex row, so the
   generic "h1 + p" rule above could not reach it. */
@media (max-width: 620px) {
  .page-hero h1 + .lede-tagline { margin-top: 18px; }
}

/* ===========================================================================
   MORE AIR IN THE APP SECTION (24 Aug 2026, Winnie)
   Justified copy at this measure was setting words tight, and the heading sat
   24px off its own paragraph. A touch of word-spacing opens the justified
   lines without loosening the tracking, and the heading gets real separation.
   =========================================================================== */
.tracking-content h2 { margin-bottom: clamp(26px, 2.4vw, 38px); }
.tracking-content .body-text {
  word-spacing: 0.055em;
  line-height: 2.12;
}

/* The same breathing room under every section heading, not only on phones —
   the earlier rule stopped at 620px. */
@media (min-width: 621px) {
  h2 + p, h2 + .lede, h2 + .body-text,
  h3 + p, h3 + .lede, h3 + .body-text { margin-top: 20px; }
}

/* ===========================================================================
   THE APP SECTION BREATHES (24 Aug 2026, Winnie)
   A clear step between the heading and its paragraph, and again between the
   paragraph and the row of orbs, at both sizes — so the three parts read as
   three parts rather than one column of text with icons stuck underneath.
   Desktop was 34px / 41px, a phone 26px / 31px.
   =========================================================================== */
.tracking-content h2 { margin-bottom: clamp(30px, 3vw, 46px) !important; }
.app-orbs { margin-top: clamp(38px, 4.2vw, 62px) !important; }

@media (max-width: 620px) {
  .tracking-content h2 { margin-bottom: 30px !important; }
  .app-orbs { margin-top: 38px !important; }
}

/* ===========================================================================
   THE FOOTER'S "VISIT" LIST IN TWO COLUMNS ON A PHONE (24 Aug 2026, Winnie)
   Eight links stacked one per row made the footer taller than the content
   above it. Two columns halves that without shrinking anything — the links
   keep their size and tap target, they simply sit left and right.
   `columns` is used rather than a grid so the list fills the first column
   before starting the second, which keeps the site's own running order.
   =========================================================================== */
@media (max-width: 620px) {
  .footer-grid > div > ul {
    columns: 2;
    column-gap: clamp(14px, 4vw, 26px);
  }
  .footer-grid > div > ul > li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
}

/* ===========================================================================
   WIDE DESKTOPS USE THEIR WIDTH (25 Aug 2026, Winnie)
   Every full-width block on the site measures itself against --max-width:
   .wrap, .hero, .trust, .safety-inner, .footer-inner and the rest. Raising the
   token here widens all of them together, so nothing drifts out of alignment
   with anything else. The banner's description keeps its own 640px measure —
   a headline paragraph should not stretch to 1500px just because the screen
   can.
   =========================================================================== */
@media (min-width: 1500px) {
  :root {
    /* 25 Aug 2026 — pulled back from min(1520px, 88vw): "the whole body looks
       too widen, bring everything else close". Wide enough that the page uses
       a desktop, narrow enough that a line of text is still readable. */
    --max-width: min(1400px, 86vw);
    /* and the air to go with it — 5.5vh of a laptop window is ~49px between
       sections, which on a wide screen reads as cramped rather than calm.
       (25 Aug 2026, Winnie: "maximise, spacious, luxury feel.") */
    /* 25 Aug 2026 — was clamp(72px, 9vh, 128px). Two neighbouring sections
       each carry this padding, so that was up to 256px of empty ivory between
       one block and the next: "leaving too much space between here". */
    --section-y: clamp(52px, 6vh, 92px);
  }
}

/* ===========================================================================
   THE HOME HERO IS ONE SCREEN (25 Aug 2026, Winnie: "align so the first view
   before scrolling is fit to one page ... make it desktop friendly")

   The hero was a fixed 672px tall whatever the window, so on a 887px-high
   screen it finished 141px below the fold and the two buttons were cut in
   half. It is now exactly the height left over under the bar, and its type is
   sized by the SHORTER of the two constraints — width or height — so a wide
   but short laptop scales the headline down instead of pushing the buttons
   off the bottom.

   Desktop only (≥1025px). Phones keep the stacked hero they had.
   =========================================================================== */
@media (min-width: 1025px) {
  .hero {
    min-height: calc(100vh - var(--nav-height));
    /* and no taller — the picture column is a circle whose natural height was
       pushing the section 40px past the fold even once the words fitted */
    max-height: calc(100vh - var(--nav-height));
    /* 25 Aug 2026, Winnie: "bring this tab upwards close to the menu bar,
       alongside with the picture and floating bubble on the right."
       The hero centred its content in the full screen-height it now occupies,
       which parked the ribbon a long way below the bar. It starts at the top
       instead. The padding is the clearance that keeps the highest floating
       bubble off the bar — and .hero's own overflow: hidden is the backstop,
       so nothing can ever paint over the header. */
    align-items: flex-start;
    padding-top:    clamp(16px, 2.4vh, 40px);
    padding-bottom: clamp(8px, 1.3vh, 26px);
  }
  /* The picture column carried min-height: 480px and the orb inside it is a
     circle sized off the WIDTH (up to 520px). Once the hero is capped to the
     window, a 520px circle in a 495px column gets its top and bottom sliced
     off by .hero-visual's overflow: hidden. Both now bow to the height. */
  .hero-visual { min-height: 0; max-height: 100%; }
  .hero .hero-orb { width: clamp(240px, min(36vw, 58vh), 560px); }

  /* THE PAIR IS CENTRED AS ONE OBJECT (25 Aug 2026, Winnie: "you leaving the
     middle too much empty space ... do not leave one sit at one end and
     another")

     The grid was two fractional columns spanning the full 1501px block, and
     neither the words nor the picture filled its own column — so there was a
     ~500px hole down the middle and the two halves clung to opposite edges.
     Pinning the picture to the right edge made that worse, not better.

     Both columns are now sized to their CONTENT and the pair is centred as a
     unit. The outer margins are then equal by construction, whatever the
     window, and the only space between the two is the gap you actually
     choose. */
  .hero-grid {
    grid-template-columns: minmax(0, auto) minmax(0, auto);
    justify-content: center;
    align-items: center;
    gap: clamp(48px, 5vw, 104px);
  }
  /* a width, not a max-width: in an auto-sized column the copy would otherwise
     shrink to its longest line (~540px) and leave the pair marooned in the
     middle of a wide screen */
  .hero-content { width: min(52vw, 830px); max-width: 100%; }
  .hero.hero--bubbles .hero-visual,
  .hero .hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
  }
  .hero-title {
    font-size: clamp(34px, min(5.8vw, 6.8vh), 78px);
    line-height: 1.06;
    margin-bottom: clamp(8px, 1.3vh, 22px);
  }
  .hero-content .eyebrow { margin-bottom: clamp(5px, 0.9vh, 18px); }
  .hero-content .lede {
    font-size: clamp(15px, min(1.22vw, 2.0vh), 20.5px);
    line-height: 1.62;
    margin-bottom: clamp(12px, 1.9vh, 30px);
  }
  .hero .coming-soon-badge--gold { margin-bottom: clamp(8px, 1.3vh, 20px); }
  .hero-cta-group { margin-top: clamp(10px, 1.6vh, 26px); }
}

/* ===========================================================================
   TWO BLOCKS THAT DIDN'T LIKE THE WIDER PAGE (25 Aug 2026, Winnie)

   Both were built when the page was 1320px. At 1500px they stretched, and a
   stretched two-column block puts its halves at opposite ends with a hole in
   between — the same fault the hero had.
   =========================================================================== */
@media (min-width: 1025px) {

  /* 1 · THE VISION / MISSION BOOK — "add height to this book and not widen
     like this. make it like a book-book."
     It filled the whole 1501px block, so the spread was three times as wide as
     it was tall and read as a banner. Narrowed and given real page depth, so
     each leaf is taller than it is wide, the way a book is.
     (.wrap .book, not .book — hero-bubbles.css loads after this file.) */
  .philosophy-brief .book {
    max-width: min(1060px, 94%);
    margin-left: auto;
    margin-right: auto;
  }
  .philosophy-brief .book .book-page {
    padding-top:    clamp(48px, 4.4vw, 74px);
    padding-bottom: clamp(62px, 5.4vw, 92px);
    min-height: clamp(340px, 30vw, 430px);
  }

  /* 2 · THE APP SECTION — "left and right size distance not align. adjust
     follow the one on top."
     Same fix as the hero: both columns sized to their content, the pair
     centred as one object, so the outer margins are equal by construction. */
  .tracking-grid {
    grid-template-columns: minmax(0, auto) minmax(0, auto);
    justify-content: center;
    align-items: center;
    gap: clamp(48px, 5vw, 104px);
  }
  .tracking-content { width: min(54vw, 860px); max-width: 100%; }   /* widened 25 Aug */

  /* 3 · THE MAP CARD — "reduce wideness." It was taking the full page width,
     which made the address column very wide and the whole card read as a
     banner. Pulled in and centred. */
  .map-card {
    max-width: min(1160px, 82vw);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===========================================================================
   MOBILE HOME HERO — RIBBON, PICTURE, THEN THE WORDS (25 Aug 2026, Winnie:
   "mobile view, picture first then the description please, but the coming soon
   banner at top -> picture -> description")

   The ribbon lives INSIDE .hero-content, and the picture is .hero-content's
   sibling, so no amount of `order` on the two columns can put the picture
   between them. .hero-content is given `display: contents` on a phone, which
   dissolves its box and promotes its children to flex items of .hero-grid
   itself — and once they are all siblings, `order` can interleave them.

   Desktop is untouched: this whole block is below 901px, where the hero is a
   single column anyway.
   =========================================================================== */
@media (max-width: 900px) {
  .hero-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* The stacked hero carried gap: 40px, which was fine when it had exactly
       two children. Now that .hero-content is dissolved, EVERY line of the
       hero is a flex item and that gap was landing between the headline, the
       paragraph and the buttons — the mystery holes. The elements' own
       margins do the spacing instead. */
    gap: 0;
  }
  .hero-content { display: contents; }

  .hero-content > *              { order: 3; }
  .hero-visual { margin: clamp(14px, 4vw, 24px) auto clamp(20px, 5.5vw, 32px); }
  .hero-content > .coming-soon-badge--gold { order: 1; margin-bottom: 0; }
  .hero-visual                   { order: 2; }

  /* the box that used to carry this spacing is gone, so the first line of
     copy needs its own air under the picture */
  .hero-content > .eyebrow { margin-top: clamp(18px, 5vw, 30px); }

}

/* ===========================================================================
   SHORT LAPTOPS KEEP THE HERO ON ONE SCREEN (25 Aug 2026)
   The hero type was enlarged so a 1706x887 screen doesn't look empty. On a
   1366x700 or 1440x760 laptop that same type pushed the buttons 45px past the
   fold. The vw caps can't see height, so this block trims the stack when the
   WINDOW is short — nothing here fires on a normal desktop.
   =========================================================================== */
@media (min-width: 1025px) and (max-height: 820px) {
  .hero-title {
    font-size: clamp(30px, min(5.2vw, 5.4vh), 58px);
    margin-bottom: clamp(8px, 1.1vh, 16px);
  }
  .hero-content .lede {
    font-size: clamp(14px, min(1.06vw, 1.62vh), 17px);
    line-height: 1.55;
    margin-bottom: clamp(10px, 1.5vh, 20px);
  }
  .hero-content > .eyebrow { margin-bottom: clamp(4px, 0.7vh, 12px); }
  .hero .coming-soon-badge--gold { margin-bottom: clamp(6px, 1vh, 14px); }
  .hero-cta-group { margin-top: clamp(8px, 1.2vh, 18px); }
  .hero { padding-top: clamp(12px, 1.8vh, 28px); }
}

/* …and a second step for the shortest laptops (1366x700 and the like), where
   the first trim still left the buttons 25px under the fold. */
@media (min-width: 1025px) and (max-height: 730px) {
  .hero-title { font-size: clamp(28px, min(4.6vw, 5.0vh), 46px); }
  .hero-content .lede {
    font-size: clamp(13.5px, min(1vw, 1.5vh), 16px);
    margin-bottom: clamp(8px, 1.2vh, 16px);
  }
  .hero .coming-soon-badge--gold { margin-bottom: clamp(4px, 0.8vh, 10px); }
  .hero-cta-group { margin-top: clamp(6px, 1vh, 14px); }
  .hero {
    padding-top:    8px;
    padding-bottom: 6px;
  }
  /* the last few pixels, for a 1366x700 window */
  .hero-content > .eyebrow {
    font-size: clamp(12px, 1.35vh, 15px);
    margin-bottom: clamp(2px, 0.4vh, 7px);
  }
  .hero-content .lede { line-height: 1.44; }
  .hero-cta-group { margin-top: 6px; }
  .hero--bubbles .hero-cta-group .btn { padding-top: 13px; padding-bottom: 13px; }
}



/* ===========================================================================
   THE CLOSED DRAWER WAS COSTING EVERY SCROLL FRAME (25 Aug 2026, Winnie:
   "mobile view, this is hard to scroll and its laggy. if got any scrllable
   effect build in the function, please remove it and make sure it is smooth
   upon scrolling downwards.")

   Nothing on these pages is scroll-driven — the reveals are an
   IntersectionObserver that fires once and releases each element, and every
   scroll listener is passive. What was costing the frames was sitting still.

   .mobile-drawer is position: fixed, 390 x 844, and it is ALWAYS in the render
   tree: closed, it is simply translated off the top of the screen, still
   display: block, still visible, still opacity 1. It carries
   backdrop-filter: blur(20px), and its seven link bubbles carry blur(6px) each.
   A backdrop filter forces the browser to sample and re-blur what is behind
   the element on every frame that anything under it moves — which, while a
   finger is dragging the page, is every single frame. Eight blurred regions,
   one of them full-screen, all for a panel nobody can see.

   While it is closed the blur comes off. The moment .open is added the glass
   is back, and it fades in over the panel's own 0.4s slide, so nothing about
   the menu looks different.
   =========================================================================== */
.mobile-drawer:not(.open),
.mobile-drawer:not(.open) a,
.mobile-drawer:not(.open) li {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}


/* ===========================================================================
   NO REVEAL-ON-SCROLL ON A PHONE (25 Aug 2026, Winnie: "remove the scrollable
   effect that makes the scrolling downwards motion stuck in mobile view.")

   Two things in the reveal system were making a phone feel like it was
   dragging the page through treacle:

   · .reveal carries `will-change: opacity, transform` permanently, on every
     one of the several dozen blocks that use it. will-change promotes each
     element to its own compositor layer and KEEPS it there — it is a hint for
     something about to animate, not a decoration. Dozens of live layers is
     real memory and real compositing work on every frame a phone scrolls.
   · the transition it is hinting at runs for 1.6 SECONDS, moving 70px and
     scaling, and it starts fresh for every block that comes into view. Scroll
     at any speed and several are always mid-flight.

   Below 900 the whole thing stands down: blocks are simply there, at full
   opacity, in place, with no transition, no cascade on their children and no
   layer held open waiting for one. Desktop keeps the reveals exactly as they
   are.

   scroll-behavior: smooth goes too. It only governs anchor and scripted jumps
   rather than a finger drag, but on a page this long a smooth-scrolled anchor
   is its own kind of stuck.
   =========================================================================== */
@media (max-width: 900px) {
  html { scroll-behavior: auto; }

  html.has-js .reveal,
  html.has-js .reveal.in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  /* the per-child cascade, matched to the same list it is declared with */
  html.has-js .reveal.in > .eyebrow,
  html.has-js .reveal.in > h2,
  html.has-js .reveal.in > h3,
  html.has-js .reveal.in > h4,
  html.has-js .reveal.in > .lede,
  html.has-js .reveal.in > p,
  html.has-js .reveal.in > .body-text,
  html.has-js .reveal.in > .pullquote,
  html.has-js .reveal.in > ul,
  html.has-js .reveal.in > .btn,
  html.has-js .reveal.in > a.btn {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* the carousel arrows sit over photographs and re-blur what is behind them
     on every frame the strip moves; the glass is not worth that on a phone */
  .carousel-arrow {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    background: rgba(255, 255, 255, .82) !important;
  }
}


/* ===========================================================================
   NO SEAM UNDER THE LOGO WHILE THE MENU IS OPEN (25 Aug 2026, Winnie: "there's
   a break line between logo and the dropdown menu bar on mobile screen on all
   tab dropdown, please remove the breaking line in different colour. make it
   one colour.")

   The bar already steps aside when the drawer opens — background, blur and
   shadow all go transparent so the glass runs from the top edge down. Its two
   pseudo-elements did not: .nav::before is the soft ivory feather that hangs
   below the bar on every page, and it was still painting a warm band across
   the drawer's cool glass, which is the line she can see. Both go while the
   drawer is open, and come straight back when it closes.
   =========================================================================== */
body:has(.mobile-drawer.open) #nav::before,
body:has(.mobile-drawer.open) #nav::after,
body:has(.mobile-drawer.open) .nav::before,
body:has(.mobile-drawer.open) .nav::after {
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}


/* ===========================================================================
   THE CAROUSEL'S PERMANENT LAYER (25 Aug 2026, Winnie: "this part, it still
   stuck when scrolling downwards!!!!")

   .carousel-track carries `will-change: transform`. The track is nine items
   wide — on a phone that is a composited texture several thousand pixels
   across, held in GPU memory for the whole life of the page whether or not
   the strip is moving, and dragged along by every scroll frame. The browser
   promotes it by itself for the duration of an actual transition, which is
   the only time it needs to be a layer.

   Phones only. On a desktop the memory is free and the hint is harmless.
   =========================================================================== */
@media (max-width: 900px) {
  .carousel-track { will-change: auto !important; }
  /* the arrows' wide soft shadows repaint with the strip underneath them */
  .carousel-arrow { box-shadow: 0 4px 10px -4px rgba(120,100,140,.35) !important; }
  /* and every slide carries a 60px-blur shadow of its own — with the clones
     that is a dozen wide-radius shadows inside one strip. A tight one reads
     the same at this size. */
  .carousel-item { box-shadow: 0 8px 18px -10px rgba(90, 80, 110, .34) !important; }
}


/* ===========================================================================
   THE PAGE HAD A SECOND SCROLLBAR INSIDE IT (25 Aug 2026, Winnie: "i try to
   scroll at some point when my cursor pointed at the swipe through artistt
   impression picture part, it stuck. can remove that scroll bar that make this
   screen keep on stuck upon scrolling donwards?")

   FOUND IT. `overflow-x: hidden` does not do what it looks like it does. The
   CSS spec says that if one axis is anything other than `visible`, the other
   axis's `visible` computes to `auto` — so every rule on this site that reads
   `overflow-x: hidden` silently made that element a VERTICALLY SCROLLABLE BOX.

   Measured on Angel Cribs at 768: div.wrap reported overflow-y: auto with a
   scrollHeight of 2359 against a clientHeight of 2353. Six pixels of scrollable
   height — enough for the browser to treat it as a real scroll container. Put
   the pointer over it (which is most of the page, the carousel included) and
   the wheel scrolls THAT box first; it moves six pixels, stops, and only then
   chains to the page. That is the stutter, and its overlay scrollbar is the
   grey pill sitting inside the page rather than at the window's edge.

   `overflow-x: clip` clips exactly the same way but does NOT create a scroll
   container, so the vertical axis stays truly visible. Supported everywhere
   that matters; the `hidden` rules stay underneath as the fallback for
   anything ancient, since a browser that doesn't know `clip` ignores it.
   =========================================================================== */
html, body { overflow-x: clip; }
@media (max-width: 1024px) {
  section, .section, .page-hero { overflow-x: clip !important; }
  .wrap,
  .legal-wrap,
  .socials-inner,
  .safety-map-section { overflow-x: clip; }
}


/* ===========================================================================
   THE MENU LABELS (25 Aug 2026, Winnie: "can you design this wording for all
   the menu bar in desktop and mobile view into a special-modern font that
   suits the vibe of this page? right now this is abit too bold and ugly.")

   They were Inter at 600 — a UI weight, and inside a soft glass bubble it sits
   like a button label on a dashboard. Jost instead: a geometric sans in the
   Futura line, which is the typeface luxury goods have used on packaging for
   decades. At 400 it is light enough to belong to the glass, and its round
   O and single-storey a suit the bubbles rather than fight them.

   Three changes together do the work: the weight drops from 600 to 400, the
   tracking opens from 0.22em to 0.26em so the lighter letters still hold their
   line, and the colour softens a shade off the near-black ink.

   One extra family on the Google Fonts request, three weights, already loading
   alongside Playfair and Inter.
   =========================================================================== */
.nav-links a,
.mobile-drawer a,
.mobile-drawer ul li a {
  font-family: 'Jost', 'Inter', system-ui, -apple-system, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.26em !important;
  color: #3A3350 !important;
}
.nav-links a.active,
.mobile-drawer a.active {
  font-weight: 500 !important;
  color: #241E33 !important;
}
/* Jost runs a touch smaller than Inter at the same size — a point back so the
   labels keep the presence they had in the bubbles. */
.nav-links a { font-size: 13.5px !important; }
@media (max-width: 900px) {
  .mobile-drawer a,
  .mobile-drawer ul li a { font-size: 15px !important; letter-spacing: 0.24em !important; }
}


/* ===========================================================================
   THE LABELS HAVE TO FIT THE BALL THEY ARE IN (25 Aug 2026, Winnie: "the word
   looks tight up and out of the bubble upon scrolling downwards.")

   Two separate faults, both mine from the Jost change:

   1. The size was pinned. `.nav-links a { font-size: 13.5px !important }`
      overrode the responsive rule, so when the bar folds on scroll and every
      bubble drops from clamp(78,7.8vw,108) to clamp(68,6.8vw,94), the words
      stayed exactly as large — and "Prenatal Education" and "Signature
      Services", which set on two lines, ran straight out of the film.

   2. Jost is wider than Inter at the same size, and I had opened the tracking
      from 0.22em to 0.26em on top of that. Two changes in the same direction
      inside a fixed circle.

   So: the size follows the bubble in both states, the tracking comes back to
   something a two-word label can afford, and the line-height tightens a little
   so a two-line label sits centred in the ball rather than riding high.
   =========================================================================== */
@media (min-width: 901px) {
  .nav-links a {
    font-size: clamp(10.5px, 0.80vw, 12.5px) !important;
    letter-spacing: 0.15em !important;
    line-height: 1.32 !important;
  }
  .nav--compact .nav-links a,
  .nav.scrolled .nav-links a {
    font-size: clamp(9.5px, 0.70vw, 11px) !important;
    letter-spacing: 0.12em !important;
  }
}
@media (max-width: 900px) {
  .mobile-drawer a,
  .mobile-drawer ul li a {
    font-size: 14.5px !important;
    letter-spacing: 0.18em !important;
    line-height: 1.35 !important;
  }
}


/* ===========================================================================
   THE DRAWER BUBBLES STOP TOUCHING (25 Aug 2026, Winnie: "please dont make the
   bubble looks so tight up together." / "it should be a natural wave.")

   They were being pulled INTO each other on purpose: margin-top of -24 and
   -26px on every item after the first. That was the only way seven balls of
   105, 89, 121, 98, 114, 91 and 103px — 721px of ball — could fit a drawer
   with about 650px of room below the bar.

   So the balls come down about 8 percent, which frees the height for a real
   gap: 7px of clear space between every one of them, nothing overlapping.

   And the horizontal offsets now trace a wave rather than a zigzag. They ran
   2 / 66 / 10 / 80 / 20 / 88 / 16 — hard left, hard right, hard left, which is
   a saw-tooth. These run 6 / 40 / 72 / 84 / 66 / 32 / 8: out from the edge,
   round the turn, and back again. Same idea as the desktop bar's wave, in the
   other axis.
   =========================================================================== */
@media (max-width: 900px) {
  .mobile-drawer li:nth-child(1) { margin-right: 6px; margin-top: 0; }
  .mobile-drawer li:nth-child(1) a { width: clamp(84px, 23.6vw, 92px); height: clamp(84px, 23.6vw, 92px); }
  .mobile-drawer li:nth-child(1) a { --drip-x: -6px; }
  .mobile-drawer li:nth-child(2) { margin-right: 40px; margin-top: 7px; }
  .mobile-drawer li:nth-child(2) a { width: clamp(71px, 20.0vw, 78px); height: clamp(71px, 20.0vw, 78px); }
  .mobile-drawer li:nth-child(2) a { --drip-x: -40px; }
  .mobile-drawer li:nth-child(3) { margin-right: 72px; margin-top: 7px; }
  .mobile-drawer li:nth-child(3) a { width: clamp(95px, 26.7vw, 104px); height: clamp(95px, 26.7vw, 104px); }
  .mobile-drawer li:nth-child(3) a { --drip-x: -72px; }
  .mobile-drawer li:nth-child(4) { margin-right: 84px; margin-top: 7px; }
  .mobile-drawer li:nth-child(4) a { width: clamp(79px, 22.0vw, 86px); height: clamp(79px, 22.0vw, 86px); }
  .mobile-drawer li:nth-child(4) a { --drip-x: -84px; }
  .mobile-drawer li:nth-child(5) { margin-right: 66px; margin-top: 7px; }
  .mobile-drawer li:nth-child(5) a { width: clamp(90px, 25.1vw, 98px); height: clamp(90px, 25.1vw, 98px); }
  .mobile-drawer li:nth-child(5) a { --drip-x: -66px; }
  .mobile-drawer li:nth-child(6) { margin-right: 32px; margin-top: 7px; }
  .mobile-drawer li:nth-child(6) a { width: clamp(73px, 20.5vw, 80px); height: clamp(73px, 20.5vw, 80px); }
  .mobile-drawer li:nth-child(6) a { --drip-x: -32px; }
  .mobile-drawer li:nth-child(7) { margin-right: 8px; margin-top: 7px; }
  .mobile-drawer li:nth-child(7) a { width: clamp(82px, 23.1vw, 90px); height: clamp(82px, 23.1vw, 90px); }
  .mobile-drawer li:nth-child(7) a { --drip-x: -8px; }
}


/* ===========================================================================
   THE MENU TYPE, TAKE THREE (25 Aug 2026, Winnie: "can you change all the font
   type for the menu bar?")

   Inter 600 was too heavy. Jost was lighter but geometric and cool — Futura's
   family, which is packaging type, not nursery type. Quicksand instead: the
   same geometric skeleton, but every terminal is rounded off. It is literally
   drawn with round ends, which is the same shape language as the bubbles it
   sits inside, and it reads soft at a weight that still holds a line.

   500 rather than 400 here, because Quicksand's strokes are lighter than
   Jost's at the same number, and tracking eased back to 0.20em — round letters
   need less air between them than square ones.

   Also already loaded on About Us and Prenatal Education, so on those two
   pages it costs nothing at all.
   =========================================================================== */
.nav-links a,
.mobile-drawer a,
.mobile-drawer ul li a {
  font-family: 'Quicksand', 'Jost', 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.20em !important;
}
.nav-links a.active,
.mobile-drawer a.active { font-weight: 600 !important; }

/* ---------------------------------------------------------------------------
   AND A PROPER LEFT-RIGHT WAVE IN THE DRAWER (25 Aug 2026, Winnie: "please
   wave left right left right left right.")

   My last pass gave them a smooth arc — out from the edge and back — which is
   a curve, not a wave. These alternate sides all the way down: near the right
   edge, out to the left, back to the right, and so on, with a few pixels of
   variation on each beat so it reads as drawn rather than as stepped.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .mobile-drawer li:nth-child(1) { margin-right: 10px; }
  .mobile-drawer li:nth-child(2) { margin-right: 92px; }
  .mobile-drawer li:nth-child(3) { margin-right: 16px; }
  .mobile-drawer li:nth-child(4) { margin-right: 98px; }
  .mobile-drawer li:nth-child(5) { margin-right: 12px; }
  .mobile-drawer li:nth-child(6) { margin-right: 90px; }
  .mobile-drawer li:nth-child(7) { margin-right: 18px; }
  .mobile-drawer li:nth-child(1) a { --drip-x: -10px; }
  .mobile-drawer li:nth-child(2) a { --drip-x: -92px; }
  .mobile-drawer li:nth-child(3) a { --drip-x: -16px; }
  .mobile-drawer li:nth-child(4) a { --drip-x: -98px; }
  .mobile-drawer li:nth-child(5) a { --drip-x: -12px; }
  .mobile-drawer li:nth-child(6) a { --drip-x: -90px; }
  .mobile-drawer li:nth-child(7) a { --drip-x: -18px; }
}


/* ---------------------------------------------------------------------------
   THE LAST BUBBLES WERE BEING CRUSHED (25 Aug 2026)

   With the negative margins replaced by real gaps, the seven balls came to
   661px inside a 670px flex column — which fits, but only just. The list is
   `display: flex; flex-direction: column`, and a flex item's default is
   flex-shrink: 1: the moment the total came anywhere near the container, the
   browser started taking the difference out of the items at the end. Measured:
   the last three rendered 68px, 28px and 11px tall instead of 98, 80 and 90.
   They were not overlapping — they were being squashed to nothing.

   flex: 0 0 auto stops that: every ball keeps the size it was given. And on a
   short screen, where 661px genuinely will not fit, the whole set steps down
   together rather than the last two vanishing.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* both levels: the li is a flex item of the list, and the anchor is a flex
     item of the li — stopping the shrink on one of them only moves the crush
     down a level, which is what happened on the first attempt. */
  .mobile-drawer li { flex: 0 0 auto !important; min-height: 0 !important; }
  .mobile-drawer li > a { flex: 0 0 auto !important; }
  .mobile-drawer ul {
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
  }
}
@media (max-width: 900px) and (max-height: 760px) {
  .mobile-drawer li:nth-child(n) a {
    width: clamp(58px, 19vw, 78px) !important;
    height: clamp(58px, 19vw, 78px) !important;
  }
  .mobile-drawer li:nth-child(n) { margin-top: 5px !important; }
  .mobile-drawer a, .mobile-drawer ul li a { font-size: 12.5px !important; letter-spacing: 0.14em !important; }
}


/* ---------------------------------------------------------------------------
   THE WAVE'S CRESTS COME OFF THE TOP EDGE (25 Aug 2026, Winnie: "bring the menu
   bubble that wave upwards slightly downwards so it dont stick at the top of
   the screen.")

   The row is anchored flex-start and the crest bubbles carry a negative margin
   of one wave amplitude, so they sit as high as the bar's own padding allows —
   at some window widths that is right against the top edge. The row gets that
   amplitude back as padding instead: the crests drop to where the bar's
   padding intended, the troughs go down with them, and the wave keeps its full
   height. Measured at 1706, the bar has 20px of clearance under the lowest
   bubble, so there is room to spend.
   --------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .nav-links { padding-top: 14px !important; }
  .nav--compact .nav-links { padding-top: 10px !important; }
}

/* ===========================================================================
   THE BUBBLES JOIN UP, AND STILL DON'T OVERLAP (25 Aug 2026)

   Winnie: "can you make it like the wave ball is join together but not
   overlapping each other?... make it wave like left right left right wave, and
   then left big, right small left big right small kind of bubble size."

   So: the chain starts RIGHT and small, then left and big, then right, then
   left — "do again, start from right-small. the left big." — and every ball
   touches the next exactly.

   LONGER AND NARROWER (25 Aug 2026, Winnie: "can you make this menu tab slightly
   longer downwards? i want it to be skinny a little."). Both come from the same
   lever. dy = sqrt(S^2 - dx^2): closing the swing moves dy UP toward S, so the
   column stretches at the same time as it narrows. The margin swing went 0.115
   -> 0.050 of --u and the balls came down about 8 percent, which is 73px -> 46px
   between the extreme centres and 546px -> 590px of chain on a 390px screen.
   The --u height cap moved with it (76vh-100 -> 66vh-61) or the longer chain
   would have run off the bottom of a short phone.

   Two earlier adjustments are also baked into the numbers:
   - "one bubble big and one bubble small, go through it" — the big/small ratio
     was widened from 1.32x to 1.54x (0.310 against 0.205 of --u), so the
     alternation is legible at a glance instead of only on measurement.
   - "reduce the wave a little" — the margin swing went 0.16 -> 0.115 of --u,
     which is 88px -> 67px between the extreme centres on a 390px screen.
   - "make this dropdown menu to the right" — the whole chain shifted over, so
     the small right-hand balls now stop about 19px short of the screen edge
     and their rims run just inside the menu button's own right edge.

   TOUCHING IS GEOMETRY, NOT SPACING. Two circles are tangent when the distance
   between their centres equals the sum of their radii. Nudging margins by eye
   can only get near that, and "near" is precisely what reads as a gap or as an
   overlap. So the margins are solved instead. In a flex column the vertical
   distance between two centres is r(i) + r(i+1) + margin-top, and the left-right
   swing fixes the horizontal distance dx, so Pythagoras gives what is left:

       dy = sqrt(S^2 - dx^2)  and  margin-top = sqrt(S^2 - dx^2) - S,  S = r(i)+r(i+1)

   Negative, always: the balls are pulled up into each other, and by more where
   the swing is wider. That is why no two numbers below are the same.

   dx IS NOT THE DIFFERENCE OF THE OFFSETS. margin-right measures to a ball's
   RIGHT EDGE, so its centre sits a further r to the left: centre = -(O + r).
   The balls are deliberately different sizes, so the centres are further apart
   than the offsets are. Getting this wrong is what left a visible 9px gap on
   the first attempt — the margins were solved for a dx that was ~15% too small.

   THE SWING HAS A CEILING. dx can never reach S — past that the two circles are
   too far apart to touch whatever the margins do, and the chain breaks into
   beads. The margin swing below is 0.16 of --u, which after the radii are added
   becomes a 0.225 swing between centres — about 88px on a 390px screen, and as
   wide a left-right as balls this size can hold hands across.

   AND A FLOOR, from the OTHER pairs. Alternating sides puts balls 1, 3, 5 and 7
   nearly above one another, so tightening the chain drives THOSE into each
   other even while the consecutive pairs are perfect. Every one of the 21 pairs
   was checked, not just the 6 adjacent ones; the tightest non-touching pair is
   5 and 7, which clear by 0.0165 of --u — about 6px on a 390px screen.

   EVERYTHING IS A FRACTION OF --u. The solution only holds while diameters and
   offsets keep the same ratio to each other. Mixing clamped px diameters with px
   offsets breaks it the moment a clamp bites: the balls stop growing, the swing
   does not, and the chain pulls apart. One clamped length is declared, --u, and
   every diameter, offset and margin is a plain multiple of it — so the figure is
   identical at 320px and at 470px, and stays exactly tangent at both. --u is
   capped against viewport height too, because the solved chain is 1.29 x --u
   tall: on a short screen the whole cluster scales down together instead of the
   last balls falling off the bottom.

   Balls are bigger than before — 0.22 to 0.30 of --u, roughly 86 to 117px on a
   390px screen against 78 to 104 — which is the increase she offered, and it
   gives the labels more room inside the glass.
   =========================================================================== */
@media (max-width: 900px) {
  .mobile-drawer ul {
    --u: min(clamp(320px, 100vw, 470px), calc(66vh - 61px));
    /* 25 Aug 2026, Winnie: "the dropdown menu should looks like its connecting
       to the 3 line bar." The list was starting 53px below the button, which
       read as a separate cluster that happened to be on the same screen.

       How far it can go up depends on which ball leads. While ball 1 was the
       BIG LEFT one it sat directly under the wordmark, whose underside is 96px
       — 23px lower than the button's — and -50px drove it into the logo, so the
       lift had to be pulled back to -22px.

       Ball 1 is the SMALL RIGHT one again, so it rises under the BUTTON (73px)
       and the logo is no longer the constraint. -45px puts its crown 8px below
       the bar. Ball 2, the big left one, lands 55px lower still and clears the
       wordmark by 40px. */
    margin-top: -45px !important;
  }
  /* 1 Home                left  big */
  .mobile-drawer li:nth-child(1) { margin-right: calc(var(--u) * 0.0240) !important; margin-top: calc(var(--u) * 0.00000) !important; }
  .mobile-drawer li:nth-child(1) > a { width: calc(var(--u) * 0.1900) !important; height: calc(var(--u) * 0.1900) !important; --drip-x: calc(var(--u) * -0.0240); }
  /* 2 About Us            right small */
  .mobile-drawer li:nth-child(2) { margin-right: calc(var(--u) * 0.0740) !important; margin-top: calc(var(--u) * -0.02219) !important; }
  .mobile-drawer li:nth-child(2) > a { width: calc(var(--u) * 0.2920) !important; height: calc(var(--u) * 0.2920) !important; --drip-x: calc(var(--u) * -0.0740); }
  /* 3 Prenatal Education  left  big */
  .mobile-drawer li:nth-child(3) { margin-right: calc(var(--u) * 0.0340) !important; margin-top: calc(var(--u) * -0.01552) !important; }
  .mobile-drawer li:nth-child(3) > a { width: calc(var(--u) * 0.2000) !important; height: calc(var(--u) * 0.2000) !important; --drip-x: calc(var(--u) * -0.0340); }
  /* 4 Angel Cribs         right small */
  .mobile-drawer li:nth-child(4) { margin-right: calc(var(--u) * 0.0890) !important; margin-top: calc(var(--u) * -0.02099) !important; }
  .mobile-drawer li:nth-child(4) > a { width: calc(var(--u) * 0.2880) !important; height: calc(var(--u) * 0.2880) !important; --drip-x: calc(var(--u) * -0.0890); }
  /* 5 Signature Services  left  big */
  .mobile-drawer li:nth-child(5) { margin-right: calc(var(--u) * 0.0280) !important; margin-top: calc(var(--u) * -0.02525) !important; }
  .mobile-drawer li:nth-child(5) > a { width: calc(var(--u) * 0.1950) !important; height: calc(var(--u) * 0.1950) !important; --drip-x: calc(var(--u) * -0.0280); }
  /* 6 Our Partners        right small */
  .mobile-drawer li:nth-child(6) { margin-right: calc(var(--u) * 0.0750) !important; margin-top: calc(var(--u) * -0.01817) !important; }
  .mobile-drawer li:nth-child(6) > a { width: calc(var(--u) * 0.2840) !important; height: calc(var(--u) * 0.2840) !important; --drip-x: calc(var(--u) * -0.0750); }
  /* 7 Get In Touch        left  big */
  .mobile-drawer li:nth-child(7) { margin-right: calc(var(--u) * 0.0200) !important; margin-top: calc(var(--u) * -0.02307) !important; }
  .mobile-drawer li:nth-child(7) > a { width: calc(var(--u) * 0.1900) !important; height: calc(var(--u) * 0.1900) !important; --drip-x: calc(var(--u) * -0.0200); }
  /* every ball keeps the size it was solved for — see the flex-shrink note
     further up; letting them shrink would destroy the tangency. */
  .mobile-drawer li { flex: 0 0 auto !important; min-height: 0 !important; }
  .mobile-drawer li > a { flex: 0 0 auto !important; }
  /* tangent circles have overlapping SQUARE boxes, so a later ball's box would
     cover the previous ball's rim and its shadow. Painting them front-to-back
     keeps every edge visible. */
  .mobile-drawer li:nth-child(1) { z-index: 7; }
  .mobile-drawer li:nth-child(2) { z-index: 6; }
  .mobile-drawer li:nth-child(3) { z-index: 5; }
  .mobile-drawer li:nth-child(4) { z-index: 4; }
  .mobile-drawer li:nth-child(5) { z-index: 3; }
  .mobile-drawer li:nth-child(6) { z-index: 2; }
  .mobile-drawer li:nth-child(7) { z-index: 1; }
  /* the labels take some of the extra diameter back */
  .mobile-drawer a,
  .mobile-drawer ul li a {
    font-size: calc(var(--u) * 0.0242) !important;
    letter-spacing: 0.06em !important;
    line-height: 1.28 !important;
    padding: 0 calc(var(--u) * 0.016) !important;
  }
}
/* The short-screen step-down is --u's own vh cap now. The old hard override
   pinned px sizes on top of the solved ones and would break the chain. */
@media (max-width: 900px) and (max-height: 760px) {
  .mobile-drawer li:nth-child(n) > a { width: auto; height: auto; }
  .mobile-drawer li:nth-child(n) { margin-top: unset; }
  .mobile-drawer a, .mobile-drawer ul li a { font-size: unset; letter-spacing: unset; }
}


/* ---------------------------------------------------------------------------
   THE CONTACT FORM'S BUTTON TAKES THE SAME SHAPE AS "ENQUIRE" (25 Aug 2026,
   Winnie: "button shape, rectangular-rounded edge shape.")

   .btn-plum is used in exactly one place — the Send Message submit on
   contact.html — so it can be reshaped here without touching any other button.
   12px is the radius the package CTA on Signature Services and the notice CTA
   on Our Partners both use, so all three now read as one component instead of
   the form's being the only pill left on the site.
   --------------------------------------------------------------------------- */
.btn.btn-plum {
  border-radius: 12px !important;
  padding: 16px 38px !important;
}


/* ---------------------------------------------------------------------------
   THE SMALL DESKTOP BUBBLES GET SMALLER TYPE (25 Aug 2026)

   With the bar on two alternating sizes, the small circles carry "Prenatal
   Education" and "Signature Services" — the two longest labels on the site. A
   two-line label sits in a band well short of the circle's widest point, so the
   usable width is the CHORD there, not the diameter. These bring the type down
   a step on the odd bubbles only, which is what keeps those two words inside
   the glass instead of printing across its rim.
   --------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .nav-links li:nth-child(odd) a {
    font-size: clamp(9px, 0.66vw, 10.5px) !important;
    letter-spacing: 0.10em !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .nav-links li:nth-child(even) a {
    font-size: clamp(10.5px, 0.80vw, 12px) !important;
    letter-spacing: 0.14em !important;
  }
  /* NO TYPE STEP ON SCROLL EITHER (25 Aug 2026, Winnie: "the before scroll get
     in touch is two line. afterwards it became one line... can you fix it?")

     These used to drop the label size when the bar folded, left over from when
     the BALLS shrank too. The balls no longer change, so a smaller label was
     just a second thing quietly resizing — and it landed on exactly the width
     where "GET IN TOUCH" stopped needing two lines. Hence the flip: same words,
     same ball, different number of lines depending on how far down the page you
     were.

     The type is now identical in both states, so every label breaks the same way
     always. "Get In Touch" sets on two lines, which is what "Prenatal Education"
     and "Signature Services" already do — three two-word labels, three matching
     shapes. */
  .nav--compact .nav-links li:nth-child(odd) a,
  .nav.scrolled .nav-links li:nth-child(odd) a {
    font-size: clamp(9px, 0.66vw, 10.5px) !important;
    letter-spacing: 0.10em !important;
  }
  .nav--compact .nav-links li:nth-child(even) a,
  .nav.scrolled .nav-links li:nth-child(even) a {
    font-size: clamp(10.5px, 0.80vw, 12px) !important;
    letter-spacing: 0.14em !important;
  }
}


/* ---------------------------------------------------------------------------
   TWO SIZES ON THE DESKTOP BAR, DERIVED FROM --nav-bubble (25 Aug 2026)

   Winnie: "for desktop view menu bar, can you create 2 different size as well?
   home small about us big small then big thrn small then big."

   --nav-bubble is the bar's single source of truth — the row's height, the wave
   amplitude and the compact state are all computed from it — so the alternation
   is expressed as multipliers of it rather than as two more fixed clamps. Change
   --nav-bubble and both sizes, the row and the wave still follow.

   Odd is small, even is big, exactly as she listed them: Home small, About Us
   big, and so on down to Get In Touch small.
   --------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .nav-links li:nth-child(odd)  > a { width: calc(var(--nav-bubble) * 0.84); height: calc(var(--nav-bubble) * 0.84); }
  .nav-links li:nth-child(even) > a { width: calc(var(--nav-bubble) * 1.08); height: calc(var(--nav-bubble) * 1.08); }
}


/* ---------------------------------------------------------------------------
   THE MAP FILTERS BECOME BUTTONS, NOT PILLS (25 Aug 2026, Winnie: "change this
   button shape to match with the webpage button shape as well.")

   Enquire, Get In Touch and Send Message are all 12px rounded rectangles now,
   which left the six filter chips as the last fully-round controls on the site.
   They take the same corner, at a smaller radius because they are much smaller
   objects — 9px on a 34px-tall chip reads as the same shape as 12px on a 52px
   button, where a flat 12px would look almost square.

   The inactive chips also lose their full-strength ink outline. Six hard-edged
   boxes above a soft map fought the map for attention; a lighter rule and a
   whisper of paper behind them lets the selected one do the talking.
   --------------------------------------------------------------------------- */
.map-filter {
  border-radius: 9px;
  border-color: rgba(42, 36, 56, 0.24);
  background: rgba(255, 255, 255, 0.66);
  padding: 9px 16px;
}
.map-filter:hover {
  border-color: rgba(42, 36, 56, 0.42);
  background: rgba(42, 36, 56, 0.05);
}
.map-filter.active {
  border-radius: 9px;
  border-color: var(--ink);
  box-shadow: 0 6px 14px -6px rgba(42, 36, 56, 0.34);
}
.map-filters { gap: 8px; }


/* ===========================================================================
   NOTHING RESIZES ON SCROLL — IT ONLY REARRANGES (25 Aug 2026)

   Winnie: "what is wrong? why must have this transtioning??????? please no need
   to big then to small and then the logo only shift leftwards and the menu car
   go right up at the top!"

   The folded bar was doing two things at once: RELAYING OUT (logo from above
   the links to beside them) and RESIZING (a smaller --nav-bubble, a smaller
   mark). The relayout is the useful half — it is what recovers the vertical
   space. The resize is what made the whole bar visibly breathe in and out as
   the page moved, which is what she is objecting to.

   So the resize is removed and the relayout kept:
   - the folded bar inherits --nav-bubble from the resting bar instead of
     redeclaring a smaller one, so every ball keeps its diameter;
   - the mark keeps --nav-logo in all three states, so it never steps down;
   - max-height and width transitions are switched off on the mark, so there is
     nothing left to animate even during the class swap.

   The bar still gets much shorter when it folds — roughly 300px to 190px —
   because the logo moves from ABOVE the balls to BESIDE them. That saving is
   layout, not scale, and it happens without anything changing size.

   Desktop only: the phone bar has no folded state of this kind.
   =========================================================================== */
@media (min-width: 1025px) {
  .nav.nav--compact,
  .nav.scrolled { --nav-bubble: clamp(78px, 7.8vw, 108px); }
  .nav.scrolled .nav-logo img,
  .nav.nav--compact .nav-logo img,
  .nav.nav--compact.scrolled .nav-logo img { max-height: var(--nav-logo) !important; }
  .nav-logo img { transition: none !important; }
  .nav-links li > a { transition: box-shadow .4s var(--ease), color .3s var(--ease) !important; }
  /* THE COLUMN, NOT THE max-height, WAS SHRINKING THE MARK. The folded logo row
     carries 64px of padding on each side; inside a 205px column that left 77px
     of content width, and `max-width: 100%` then held the image to 77px wide —
     75px tall — even though its max-height was set to the full 92px. Widening
     the column and pulling the padding in is what actually stops it resizing. */
  .nav.nav--compact .nav-logo-row {
    flex: 0 0 clamp(190px, 17vw, 280px) !important;
    padding-left: clamp(16px, 2vw, 34px) !important;
    padding-right: clamp(16px, 2vw, 34px) !important;
  }
  .nav.nav--compact .nav-logo img { max-width: 100% !important; width: auto !important; }
}


/* ---------------------------------------------------------------------------
   OUR-LOCATION MARKER IN DARK PURPLE (25 Aug 2026, Winnie: "make this dark
   purple")

   Baby Angels' own marker was the one pink disc in a list of otherwise strong
   category colours — red for medical, blue for police — so it read as the
   softest thing on a panel where it should be the anchor. Dark purple is the
   site's own ink, and it now matches the map filters and every button.
   --------------------------------------------------------------------------- */
.map-loc-marker.us {
  background: linear-gradient(135deg, #4A3663, #2A1E3B);
  box-shadow: 0 4px 12px rgba(36, 30, 51, 0.42);
}


/* ===========================================================================
   THE SHADOW BEHIND A PAGE HERO (moved here 25 Aug 2026 so more than one page
   can use it — Winnie: "decorate this banner as well, put a shadow picture like
   how the other page did.")

   A family — mother, father, baby — cut from the Patrick photograph in Image/
   and flattened to one ink tone. One flat colour at low opacity is what makes it
   read as a cast shadow rather than as a second photograph competing with the
   headline; anchoring it to the BOTTOM and letting it run off is what makes it
   sit on a floor rather than float; and masking the edge that faces the type is
   what keeps the words on clean gradient.

   NOTE ON THE SELECTOR: styles.css already carries `.page-hero > *:not(.baby)`,
   and :not() lends its argument's specificity, so that rule is (0,2,0). A plain
   `.hero-shadow` loses to it and the span stays in the flow at zero height.
   Naming the element in the selector settles it.

   The partners page still carries its own copy of these rules in its <style>
   block; both produce the same result. If you change one, change the other.
   =========================================================================== */
.page-hero { position: relative; overflow: hidden; }
.page-hero > *:not(.hero-shadow) { position: relative; z-index: 1; }
.page-hero > span.hero-shadow {
  display: block;            /* it is a <span>; without this, width/height do nothing */
  position: absolute;
  right: clamp(10px, 3vw, 64px);
  bottom: 0;
  width: min(46%, 300px);
  height: min(80%, 232px);
  background-image: url("Image/family-shadow.webp");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto 100%;
  opacity: 0.20;
  z-index: 0;
  pointer-events: none;
  /* two masks, intersected: the edge facing the headline dissolves, and the
     last fifth of the height fades so the cropped-at-mid-calf cut-out melts
     into the floor instead of ending in a hard flat edge */
  -webkit-mask-image:
    linear-gradient(96deg, transparent 0%, rgba(0,0,0,.55) 40%, #000 78%),
    linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.55) 84%, transparent 100%);
          mask-image:
    linear-gradient(96deg, transparent 0%, rgba(0,0,0,.55) 40%, #000 78%),
    linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.55) 84%, transparent 100%);
  -webkit-mask-composite: source-in;   /* Safari's name for the intersection */
          mask-composite: intersect;
}
/* A DIFFERENT PICTURE ON THE LEFT, NOT THE SAME ONE FLIPPED (25 Aug 2026,
   Winnie: "can you not invert this same shadow into the get in touch tab?")

   It was the Our Partners silhouette mirrored, which on two pages of the same
   site reads as the same image twice rather than as a motif. This is its own
   cut-out, from a different frame of the same shoot: the two of them turned in
   towards each other over the baby. It suits "We'd love to hear from you" for
   the reason the standing family suits "Together, we create tomorrow" — the
   posture says the thing the headline says.

   No scaleX here. The figures already lean towards the type, and flipping is
   what made the last one read as a copy. The mask is mirrored instead — 264deg
   rather than 96deg — so the dissolving edge still faces the words. */
.page-hero > span.hero-shadow--left {
  left: clamp(10px, 3vw, 64px);
  right: auto;
  background-image: url("Image/contact-shadow.webp");
  background-position: left bottom;
  -webkit-mask-image:
    linear-gradient(264deg, transparent 0%, rgba(0,0,0,.55) 40%, #000 78%),
    linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.55) 84%, transparent 100%);
          mask-image:
    linear-gradient(264deg, transparent 0%, rgba(0,0,0,.55) 40%, #000 78%),
    linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.55) 84%, transparent 100%);
}
@media (max-width: 900px) {
  .page-hero > span.hero-shadow { width: min(52%, 172px); height: min(66%, 152px); opacity: 0.15; right: 0; }
  .page-hero > span.hero-shadow--left { left: 0; right: auto; }
}
@media (max-width: 560px) {
  .page-hero > span.hero-shadow { width: 132px; height: 124px; opacity: 0.13; right: 0; }
  .page-hero > span.hero-shadow--left { left: 0; right: auto; }
}


/* ---------------------------------------------------------------------------
   THE MAP FILTERS SIT IN A GRID (25 Aug 2026, Winnie: "place this one line
   only. or two line evenly, your call.")

   Two even rows, not one line — and that is measurement, not preference. The
   filters do not sit across the page; they sit in the column beside the map,
   which measures 344px at 1100 and only 503px at 1920. Six chips across that
   would have to be about 80px each, and "CONFINEMENT" alone needs 100 — six
   across genuinely does not fit at any window size, so one line was never on
   the table once the real panel width was measured rather than assumed.

   A grid is still the fix, because a flex row wraps wherever it happens to run
   out — which is what stranded CONFINEMENT by itself on a second line. Three
   equal columns give two even rows of three at every size down to 480px, and
   two columns give three rows of two below that. There is no width at which one
   chip is left on its own.

   Equal columns also make every chip the same width, which reads as a set of
   controls rather than as six differently-sized labels — and it means the
   longest word, CONFINEMENT, sets the type size for all of them. Tracking comes
   in from 0.16em to 0.11em so that word fits its column without the others
   having to shrink around it.
   --------------------------------------------------------------------------- */
.map-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}
.map-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.11em;
  font-size: clamp(9.5px, 0.78vw, 11px);
  padding: 10px 10px;
}
@media (max-width: 900px) {
  .map-filters { gap: 7px; }
  .map-filter { font-size: clamp(9px, 2.4vw, 10.5px); }
}
@media (max-width: 480px) {
  .map-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-filter { font-size: clamp(9px, 3vw, 11px); letter-spacing: 0.10em; }
}


/* ---------------------------------------------------------------------------
   SEND MESSAGE SITS UNDER THE MIDDLE OF THE FORM (25 Aug 2026, Winnie: "make
   this button middle under contact us.")

   .form-submit was a space-between row — button hard left, the reply-time note
   hard right — which on a narrow column put the button against the left edge
   with a gap of nothing beside it. It becomes a centred stack instead: the
   button under the middle of the fields, the note directly beneath it.

   Every other call to action on the site is centred under its block, so this
   also stops the contact form being the one that is not.
   --------------------------------------------------------------------------- */
/* Centred STACK on a phone, where the column is narrow and a split row leaves
   the button against one edge with nothing beside it; and the original SPLIT
   ROW back on a desktop, button left and the reply-time note right, which is
   what she asked for once she saw it centred at full width (25 Aug 2026:
   "desktop view, the send message button to be align with the left side, and
   the reply with one business day can place at the right side."). */
.form-submit {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}
@media (max-width: 900px) {
  /* the stacking rule further up ranged it left again */
  .form-submit { flex-direction: column; align-items: center; }
}
@media (min-width: 1025px) {
  .form-submit {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
  }
  .form-submit .form-fine { text-align: right; }
}