/* V1 Sage Room. Dials: variance 6, motion 3, density 3. Light theme locked. */

/* Self-hosted fonts (previously the Google Fonts CDN <link>, which was the
   single biggest render-blocking request on mobile, ~0.9s). Variable woff2,
   latin + latin-ext subsets, font-display: swap. The two latin faces are also
   preloaded in the head so they arrive fast. The browser only
   fetches the subset a page actually uses — latin for the English copy;
   latin-ext downloads lazily if an extended/accented character appears. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-latin.a79fdb52.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-latin-ext.776f6dca.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-latin.e9201edd.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-latin-ext.768af292.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metric-matched fallback fonts: local Arial with size/ascent/descent overrides
   computed from the brand fonts, so fallback text occupies the same space as the
   webfont. Eliminates the font-swap reflow (layout shift + delayed LCP) while
   keeping font-display: swap, so the brand fonts still always render once loaded. */
@font-face {
  font-family: 'Bricolage Grotesque Fallback';
  src: local('Arial');
  size-adjust: 94.29%;
  ascent-override: 98.63%;
  descent-override: 28.63%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Hanken Grotesk Fallback';
  src: local('Arial');
  size-adjust: 101.16%;
  ascent-override: 98.85%;
  descent-override: 29.95%;
  line-gap-override: 0%;
}

:root {
  --bone: #f4f1ec;
  --bone-warm: #efeae0;
  --sage: #cdd5c4;
  --sage-soft: #e3e8db;
  --forest: #234633;
  --forest-deep: #1a3326;
  --ink: #1f2420;
  --ink-soft: #4a524a;
  --line: #d8d2c4;
  --radius: 12px;
  --radius-sm: 6px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
::selection { background: var(--sage); color: var(--forest); }
::-moz-selection { background: var(--sage); color: var(--forest); }
body {
  font-family: 'Hanken Grotesk', 'Hanken Grotesk Fallback', system-ui, sans-serif;
  background: var(--bone);
  color: var(--ink);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 {
  font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
}
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.85rem, 4vw, 3rem); letter-spacing: -0.018em; }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: -0.01em; line-height: 1.15; }
p { max-width: 62ch; color: var(--ink-soft); }
.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
/* Visually hidden but available to screen readers + crawlers (e.g. a section
   heading kept out of the visual design to preserve h1->h2->h3 order). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.eyebrow {
  font-family: 'Hanken Grotesk', 'Hanken Grotesk Fallback', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 1.25rem;
  display: inline-block;
}

.nav { position: sticky; top: 0; z-index: 50; background: rgba(244, 241, 236, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 1rem; }
.brand { font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', sans-serif; font-weight: 500; font-size: 1.15rem; letter-spacing: -0.01em; text-decoration: none; transition: opacity 0.2s; }
.brand:hover { opacity: 0.7; }
.nav-items { display: none; gap: 1.65rem; font-size: 0.92rem; }
.nav-items a { text-decoration: none; color: var(--ink-soft); position: relative; padding: 0.25rem 0; transition: color 0.2s ease; }
.nav-items a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--forest); border-radius: 2px; transform: scaleX(0); transform-origin: left center; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.nav-items a:hover { color: var(--forest); }
.nav-items a:hover::after { transform: scaleX(1); }
@media (min-width: 1000px) { .nav-items { display: flex; } }

/* Hamburger toggle (shown below the nav breakpoint) */
.nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0 9px; background: transparent; border: none; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1000px) { .nav-toggle { display: none; } }

/* Mobile menu panel: slides/fades down under the nav bar */
.mobile-menu { display: flex; flex-direction: column; gap: 0.25rem; padding: 0 24px; max-height: 0; overflow: hidden; opacity: 0; background: var(--bone); border-bottom: 1px solid transparent; transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, padding 0.35s ease; }
.mobile-menu.open { max-height: 80vh; opacity: 1; padding: 0.5rem 24px 1.5rem; border-bottom-color: var(--line); }
.mobile-menu a { text-decoration: none; color: var(--ink); font-size: 1.05rem; padding: 0.85rem 0.25rem; border-bottom: 1px solid var(--line); transition: color 0.2s ease, padding-left 0.2s ease; }
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-menu a:not(.btn):hover { color: var(--forest); padding-left: 0.6rem; }
.mobile-menu-cta { margin-top: 1rem; justify-content: center; border-bottom: none !important; color: var(--bone) !important; padding: 0.85rem 1.25rem !important; }
@media (min-width: 1000px) { .mobile-menu { display: none; } }
@media (max-width: 419px) { .nav-cta { display: none; } }

/* Buttons: gentle tactile lift + soft shadow, press on active */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-radius: var(--radius-sm); font-size: 0.92rem; font-weight: 500; text-decoration: none; border: none; cursor: pointer; font-family: inherit; white-space: nowrap; position: relative; transition: background 0.2s ease, color 0.2s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn .arrow { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-primary { background: var(--forest); color: var(--bone); }
.btn-primary:hover { background: var(--forest-deep); box-shadow: 0 8px 20px -8px rgba(26, 51, 38, 0.55); }
/* Ghost button: fill slides in from the left on hover */
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); padding: 0.7rem 1.2rem; overflow: hidden; z-index: 0; }
.btn-ghost::before { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left center; transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1); z-index: -1; }
.btn-ghost:hover { color: var(--bone); }
.btn-ghost:hover::before { transform: scaleX(1); }
.btn-sm { padding: 0.6rem 1rem; font-size: 0.88rem; }

.hero { padding: clamp(2.5rem, 6vh, 5rem) 0 clamp(4rem, 8vh, 7rem); }
.hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 4rem; } }
.hero-text h1 { margin-bottom: 1.5rem; }
.hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-soft); margin-bottom: 2rem; max-width: 38ch; }
.hero-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hero-img-wrap { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--sage-soft); }
.hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* Intro video. CMS-driven: video URL set via Tina, replaces placeholder. */
.intro-video { padding: clamp(4rem, 8vh, 6rem) 0; background: var(--bone-warm); border-top: 1px solid var(--line); }
.intro-video-inner { max-width: 720px; margin: 0 auto; }
/* Let the bio fill the column width instead of capping at 62ch, so there's no
   awkward empty space beside it next to the full-width video. */
.intro-video-inner > p { max-width: none; }
.intro-video h2 { margin-bottom: 1.5rem; }
.intro-video-media { margin-bottom: 2.5rem; }
.intro-video-caption { font-size: 0.9rem; color: var(--ink-soft); max-width: none; margin: 1rem 0 0; }
/* Founder photo shown in place of the intro video until it is recorded. */
.intro-photo { max-width: 340px; margin: 0 auto; }
.intro-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.video-wrap { position: relative; aspect-ratio: 16 / 9; background: var(--sage-soft); border-radius: var(--radius); overflow: hidden; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; padding: 1rem; }
.video-placeholder .play-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--forest); display: flex; align-items: center; justify-content: center; }
.video-placeholder .play-icon svg { width: 28px; height: 28px; color: var(--bone); margin-left: 4px; }
.video-placeholder p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

/* Empathy block - replaces invented quote band */
.empathy {
  background-color: var(--sage-soft);
  background-image: url("/assets/images/testimonials-floral.9c8311e0.webp");
  background-repeat: repeat;
  background-size: 560px auto;
  padding: clamp(4rem, 8vh, 6rem) 0;
}
/* Content sits on a bone card so it stays legible over the floral tile */
.empathy-inner {
  max-width: 760px;
  margin: 0 auto;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(2rem, 4vw, 3.25rem);
  box-shadow: 0 18px 40px -28px rgba(26, 51, 38, 0.28);
}
.empathy h2 { color: var(--forest-deep); margin-bottom: 2rem; max-width: 18ch; }
.empathy-list { list-style: none; padding: 0; }
.empathy-list li { font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', sans-serif; font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.35; padding: 1rem 0; border-top: 1px solid rgba(35, 70, 51, 0.18); color: var(--forest-deep); font-weight: 400; letter-spacing: -0.005em; }
.empathy-list li:last-child { border-bottom: 1px solid rgba(35, 70, 51, 0.18); }
.empathy-tag { margin-top: 1.75rem; font-size: 1rem; color: var(--forest); font-style: italic; }

.section { padding: clamp(4rem, 8vh, 7rem) 0; }
.section-head { max-width: 720px; margin-bottom: 3rem; }
.section-head p { margin-top: 1rem; }

.explainer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; }
@media (min-width: 800px) { .explainer-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.explainer-grid p + p { margin-top: 1rem; }

.course-split { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 900px) { .course-split { grid-template-columns: 1fr 1fr; } }
.course-img { aspect-ratio: 5 / 4; border-radius: var(--radius); overflow: hidden; background: var(--sage-soft); }
.course-img img { width: 100%; height: 100%; object-fit: cover; }
.price-row { display: flex; align-items: baseline; gap: 0.75rem; margin: 1.5rem 0; padding-top: 1.5rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.price-label { font-size: 0.85rem; color: var(--ink-soft); }
.price-value { font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', sans-serif; font-size: 1.85rem; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.price-note { font-size: 0.85rem; color: var(--ink-soft); width: 100%; margin-top: 0.25rem; }
.course-list { margin: 1.25rem 0 2rem; padding: 0; list-style: none; }
.course-list li { padding: 0.5rem 0; padding-left: 1.5rem; position: relative; color: var(--ink-soft); }
.course-list li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 12px; height: 1.5px; background: var(--forest); }

.bento { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 800px) { .bento { grid-template-columns: 1.2fr 1fr; grid-template-rows: auto auto; gap: 1.25rem; } }
.bento-cell { background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; justify-content: space-between; min-height: 220px; }
.bento-cell.with-img { padding: 0; overflow: hidden; }
.bento-cell.with-img img { width: 100%; height: 100%; object-fit: cover; min-height: 280px; }
.bento-cell.accent { background: var(--forest); border-color: var(--forest); color: var(--bone); }
.bento-cell.accent h3 { color: var(--bone); }
.bento-cell.accent p { color: rgba(244, 241, 236, 0.85); }
@media (min-width: 800px) {
  .bento-cell:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
  .bento-cell:nth-child(2) { grid-column: 2; grid-row: 1; }
  .bento-cell:nth-child(3) { grid-column: 2; grid-row: 2; }
}
.bento-cell h3 { margin-bottom: 0.75rem; }
.bento-cell.accent .btn { background: transparent; border: 1px solid var(--bone); color: var(--bone); margin-top: 1rem; align-self: flex-start; }
.bento-cell.accent .btn:hover { background: var(--bone); color: var(--forest); }
.bento-actions { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; margin-top: 1rem; }
.bento-cell.accent .btn-link-on-accent { background: transparent; border: none; color: var(--bone); opacity: 0.85; padding: 0.3rem 0; margin: 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(244, 241, 236, 0.4); font-size: 0.88rem; }
.bento-cell.accent .btn-link-on-accent:hover { opacity: 1; background: transparent; color: var(--bone); text-decoration-color: var(--bone); transform: none; }
.bento-cell.accent .btn-link-on-accent:active { transform: none; }

.about-split { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .about-split { grid-template-columns: 1.1fr 1fr; gap: 5rem; } }
.about-img { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--sage-soft); }
.about-img img { width: 100%; height: 100%; object-fit: cover; }
.about-text p + p { margin-top: 1rem; }
.credentials { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.75rem; }
.credential { font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', sans-serif; font-size: 0.95rem; font-weight: 500; color: var(--forest); background: var(--bone); border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem 1.05rem; }

.cohort-grid { display: flex; flex-direction: column; gap: 1.25rem; }
/* Flex-wrap so a partially filled row (fewer than 3 cohorts) centres instead
   of hanging to the left. Card basis = a third of the row minus the two gaps. */
@media (min-width: 700px) {
  .cohort-grid { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .cohort-grid > .cohort-card { flex: 0 1 calc((100% - 2.5rem) / 3); }
}
.cohort-card { background: var(--bone-warm); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; }
.cohort-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -16px rgba(26, 51, 38, 0.4); }
.cohort-card:hover .cohort-card-img img { transform: scale(1.04); }
.cohort-card-img img { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }

/* Image with overlaid title / date / location */
.cohort-card-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sage-soft); }
.cohort-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cohort-card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 35, 26, 0.94) 0%, rgba(20, 35, 26, 0.6) 38%, rgba(20, 35, 26, 0.05) 70%); }
.cohort-card-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.55rem; }
.cohort-card-overlay .cohort-month { font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', sans-serif; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); }
.cohort-card-overlay .cohort-dates-line { font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', sans-serif; font-size: 1.35rem; line-height: 1.15; letter-spacing: -0.01em; color: var(--bone); }
.cohort-card-overlay .cohort-location { font-size: 0.8rem; color: var(--bone); font-weight: 500; padding: 0.3rem 0.65rem; background: rgba(244, 241, 236, 0.16); border-radius: var(--radius-sm); align-self: flex-start; border: 1px solid rgba(244, 241, 236, 0.3); backdrop-filter: blur(2px); }

/* Body below image: spots + button */
.cohort-card-body { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; flex: 1; }
.cohort-spots { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; font-size: 0.85rem; font-weight: 500; padding: 0.35rem 0.7rem; border-radius: var(--radius-sm); background: var(--sage-soft); color: var(--forest-deep); }
.cohort-spots .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--forest); }
.cohort-spots.low { background: #f6e9d8; color: #8a3324; }
.cohort-spots.low .dot { background: #c0633c; }
.cohort-meta { font-size: 0.88rem; color: var(--ink-soft); }
.cohort-card-body .btn { align-self: flex-start; margin-top: auto; }
.cohort-card.full { opacity: 0.7; }
.cohort-note { margin-top: 1.5rem; font-size: 0.85rem; color: var(--ink-soft); }
.bm-dates-head { text-align: center; margin-top: clamp(3rem, 6vw, 4.5rem); scroll-margin-top: 90px; }

/* Taster sessions: a toggleable trial banner that sits above the baby massage
   cohort dates. Cream card so it reads as a distinct callout on the sage section. */
/* Full-bleed floral band: spans the page edge to edge; the inner .container
   keeps the white card centred, so the floral shows around it. */
.taster-band { background-color: var(--sage-soft); background-image: url("/assets/images/testimonials-floral.9c8311e0.webp"); background-repeat: repeat; background-size: 560px auto; padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.taster-card { background: var(--bone); border-radius: var(--radius); padding: clamp(1.75rem, 3.5vw, 2.75rem); box-shadow: 0 18px 44px -26px rgba(26, 51, 38, 0.5); }
.taster-head { text-align: center; max-width: 56ch; margin: 0 auto clamp(1.5rem, 3vw, 2rem); }
.taster-head h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.taster-head p { color: var(--ink-soft); margin-top: 0.65rem; }
.taster-badge { display: inline-block; font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', sans-serif; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone); background: var(--forest); padding: 0.32rem 0.8rem; border-radius: 999px; margin-bottom: 0.9rem; }

/* Testimonials section: pale sage with a fine wildflower line-art tile behind
   the cards. The tile already bakes in the sage-soft background colour; the
   solid colour sits underneath as a fallback while the image loads. */
.testimonials-section {
  background-color: var(--sage-soft);
  background-image: url("/assets/images/testimonials-floral.9c8311e0.webp");
  background-repeat: repeat;
  background-size: 560px auto;
}

/* Testimonial cards */
.testi-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 800px) { .testi-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; } }
/* On phone, swap the stack for a horizontal swipe carousel with the next card peeking */
@media (max-width: 799px) {
  .testi-grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 24px;
    padding: 0.25rem 24px 1.25rem;
    margin-inline: -24px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .testi-grid::-webkit-scrollbar { display: none; }
  .testi-card { flex: 0 0 82%; scroll-snap-align: start; }
}
.testi-card { background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.75rem, 2.5vw, 2.25rem); display: flex; flex-direction: column; gap: 1.5rem; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease; }
.testi-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(26, 51, 38, 0.35); border-color: var(--sage); }
.testi-card .stars { color: #e5a93b; letter-spacing: 0.12em; font-size: 0.95rem; }
.testi-card .body { font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', sans-serif; font-size: 1.02rem; line-height: 1.5; color: var(--ink); margin-bottom: auto; letter-spacing: -0.003em; }
.testi-card .attrib { font-size: 0.9rem; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 1rem; }
.testi-card .attrib strong { color: var(--ink); font-weight: 500; }

/* Google reviews badge */
.google-badge { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.55rem 1rem; background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.92rem; text-decoration: none; color: var(--ink); transition: border-color 0.2s; margin-top: 1.25rem; }
.google-badge:hover { border-color: var(--forest); }
.google-badge .gstars { color: #e5a93b; letter-spacing: 0.1em; font-size: 0.95rem; }
.google-badge strong { font-weight: 500; }
.google-badge .sep { color: var(--line); }
.google-badge .review-count { color: var(--ink-soft); }
.google-badge .arrow-r { color: var(--ink-soft); transition: transform 0.2s; }
.google-badge:hover .arrow-r { transform: translateX(3px); }

.contact-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.1fr 1fr; gap: 5rem; } }
.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.85rem; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  font-family: inherit; font-size: 1rem; padding: 0.85rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bone); color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--forest); outline-offset: 1px; border-color: var(--forest); }
.field textarea { min-height: 120px; resize: vertical; }
.contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-info-block strong { display: block; font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', sans-serif; font-size: 1.05rem; margin-bottom: 0.25rem; color: var(--ink); }
.contact-info-block a { color: var(--forest); text-decoration: none; }
.contact-info-block a:hover { text-decoration: underline; }
.contact-info-block { color: var(--ink-soft); font-size: 0.95rem; }
.contact-sig { margin-top: 1rem; font-style: italic; color: var(--ink-soft); font-size: 0.95rem; }

/* Footer "emerge" band: the wordmark and daisy rise out of the forest footer.
   Solid cream above, solid forest in the footer below; the silhouettes are
   filled with the footer green and straddle the boundary so their lower halves
   vanish into the green and their upper halves rise into the cream. The daisy
   uses a transparent PNG as an alpha mask. Purely decorative. */
/* Shell sits behind both bands. Its background is what the footer's rounded
   top corners reveal, and (with a transparent emerge band) what shows behind
   the wordmark — so setting it per page lets the band match the section above:
   bone-warm cream by default, the floral tile on floral pages. */
.footer-shell { background: var(--bone-warm); }
.footer-emerge {
  position: relative;
  height: clamp(5.5rem, 13vh, 9rem);
  overflow: visible;
  background: transparent;
}
.footer-emerge-daisy {
  position: absolute;
  left: 82%;
  bottom: 0;
  transform: translate(-50%, 32%);
  width: clamp(126px, 19.2vw, 210px);
  aspect-ratio: 1536 / 1024;
  background-color: var(--forest);
  -webkit-mask: url("/assets/images/footer-daisy.2dbc9064.png") center bottom / contain no-repeat;
  mask: url("/assets/images/footer-daisy.2dbc9064.png") center bottom / contain no-repeat;
  pointer-events: none;
}
.footer-emerge-word {
  position: absolute;
  left: 40%;
  bottom: 0;
  transform: translate(-50%, 25%);
  font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', sans-serif;
  font-weight: 600;
  font-size: clamp(2.88rem, 10.8vw, 7.8rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--forest);
  white-space: nowrap;
  text-transform: lowercase;
  pointer-events: none;
}

/* The footer "emerge" band should match the cream section directly above it, so
   the green footer rises out of cream with the wordmark straddling the line.
   Default is --bone-warm; pages ending on plain --bone (contact, thanks, legal)
   set footer-bone so the band matches exactly. Pages must END ON A CREAM SECTION
   for the emerge to work — full-bleed forest sections are never placed last. */
body.footer-bone .footer-shell { background: var(--bone); }

.footer { background: var(--forest); color: var(--bone); padding: 2.75rem 0 2rem; border-radius: 20px 20px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 3rem; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.5fr repeat(4, 1fr); } }
/* Footer column headings are <h2> (not <h4>) so heading order never skips a
   level — pages like /contact and /thanks have only an <h1>, so an <h3> here
   would jump h1->h3. Restyled to look exactly as before; color + line-height are
   restated because the global h1,h2,h3 rule would otherwise force dark ink. */
.footer h2 { font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', sans-serif; font-size: 0.85rem; line-height: 1.55; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; margin-bottom: 1rem; font-weight: 500; color: var(--bone); }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 0.5rem; }
.footer a { color: var(--bone); text-decoration: none; opacity: 0.85; font-size: 0.95rem; }
.footer a:hover { opacity: 1; }
.footer-brand { font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', sans-serif; font-size: 1.3rem; margin-bottom: 0.75rem; }
.footer-tag { opacity: 0.7; font-size: 0.95rem; max-width: 34ch; color: var(--bone); }
.disclaimer-row { padding: 1.5rem 0; border-top: 1px solid rgba(244, 241, 236, 0.18); font-size: 0.82rem; line-height: 1.55; }
.disclaimer-row p { color: var(--bone); opacity: 0.7; margin: 0; max-width: none; }
/* Dim the row via text colour, not opacity: opacity also dimmed the credit
   link to 4.3:1 (the colour-contrast failure). With colour, the muted copyright
   text looks identical while the link keeps its full --sage (~7.3:1). */
.footer-bottom { border-top: 1px solid rgba(244, 241, 236, 0.18); padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.85rem; color: rgba(244, 241, 236, 0.7); }
.footer .credit-link { color: var(--sage); opacity: 1; text-decoration: underline; text-decoration-color: rgba(205, 213, 196, 0.5); text-underline-offset: 3px; transition: color 0.2s, text-decoration-color 0.2s; }
.footer .credit-link:hover { color: var(--bone); text-decoration-color: var(--bone); }

/* FAQ accordion. Items editable in CMS, schema auto-generated from list. */
/* FAQ sits on the lighter bone so it alternates with the bone-warm dates
   section directly above it. */
.faq { background: var(--bone); }
/* Two columns on desktop: heading/intro (sticky) on the left, accordion on the
   right, so the heading lines up with the questions instead of drifting left. */
.faq-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 900px) {
  .faq-layout { grid-template-columns: 0.8fr 1.4fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .faq .section-head { margin-bottom: 0; position: sticky; top: 6rem; }
}
.faq-list { max-width: none; margin: 0; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary { padding: 1.5rem 2.25rem 1.5rem 0; cursor: pointer; list-style: none; position: relative; font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', sans-serif; font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 500; color: var(--ink); letter-spacing: -0.01em; line-height: 1.3; transition: color 0.2s; }
.faq-item summary::-webkit-details-marker { display: none; }
/* Two bars cross-faded into a +/− toggle. The horizontal bar is always shown;
   the vertical bar rotates 90° on open so it overlaps the horizontal one and
   disappears, leaving a clean minus sign. */
.faq-item summary::before,
.faq-item summary::after {
  content: "";
  position: absolute;
  background: var(--forest);
  right: 4px;
  top: 50%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 1px;
}
.faq-item summary::before { width: 16px; height: 2px; margin-top: -1px; }
.faq-item summary::after { width: 2px; height: 16px; right: 11px; margin-top: -8px; }
.faq-item[open] summary::after { transform: rotate(90deg); }
.faq-item summary:hover { color: var(--forest); }
/* Smooth open/close. Browsers that support interpolate-size animate the body
   height; older browsers fall back to an instant toggle (no jank). */
.faq-item .faq-body {
  padding: 0 0 1.5rem;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 70ch;
}
@supports (interpolate-size: allow-keywords) {
  .faq-item { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, content-visibility 0.35s allow-discrete;
  }
  .faq-item[open]::details-content { block-size: auto; opacity: 1; }
}
.faq-body p + p { margin-top: 0.75rem; }

/* Blog */
.blog-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
@media (min-width: 800px) { .blog-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
/* On phone, swap the stack for a horizontal swipe carousel with the next card peeking */
@media (max-width: 799px) {
  .blog-grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 24px;
    padding: 0.25rem 24px 1.25rem;
    margin-inline: -24px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .blog-grid::-webkit-scrollbar { display: none; }
  .blog-card { flex: 0 0 82%; scroll-snap-align: start; }
}
.blog-card { background: var(--bone-warm); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 0.2s; }
.blog-card:hover { transform: translateY(-3px); }
.blog-card-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sage-soft); }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.blog-card:hover .blog-card-img img { transform: scale(1.03); }
.blog-card-body { padding: 1.75rem; display: flex; flex-direction: column; gap: 0.85rem; flex: 1; }
.blog-date { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--forest); font-weight: 500; }
.blog-card h3 { letter-spacing: -0.012em; }
.blog-card p { font-size: 0.98rem; color: var(--ink-soft); margin-bottom: auto; }
.blog-read { font-size: 0.9rem; color: var(--forest); font-weight: 500; padding-top: 0.5rem; display: inline-flex; gap: 0.5rem; align-items: center; }
.blog-read::after { content: ""; display: inline-block; width: 18px; height: 1px; background: currentColor; }
.blog-foot { margin-top: 2.5rem; }

/* Blog index page. The floral tile lives on <body> (.floral-page) so it's one
   continuous background behind the cards, the footer wordmark band and the
   footer corners — no per-element seam. The hero keeps its own cream fill;
   the card section and footer layers go transparent to let the body show. */
.floral-page {
  background-color: var(--sage-soft);
  background-image: url("/assets/images/testimonials-floral.9c8311e0.webp");
  background-repeat: repeat;
  background-size: 560px auto;
}
.floral-page .lf-hero { background: var(--bone); }
.floral-page .footer-shell { background: transparent; }
.blog-index-search { max-width: 480px; margin: 0 auto 3rem; position: relative; }
.blog-index-search input { width: 100%; font-family: inherit; font-size: 1rem; padding: 0.9rem 1rem 0.9rem 2.85rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bone); color: var(--ink); }
.blog-index-search input:focus { outline: 2px solid var(--forest); outline-offset: 1px; border-color: var(--forest); }
.blog-index-search input::placeholder { color: var(--ink-soft); }
.blog-index-search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.blog-index-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
@media (min-width: 640px) { .blog-index-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .blog-index-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card.is-hidden { display: none; }
.blog-index-empty { display: none; text-align: center; color: var(--ink-soft); padding: 3rem 0; font-size: 1.05rem; }
.blog-index-empty.show { display: block; }

/* Lead magnet capture. Title/copy editable in CMS, form posts to Netlify Function -> MailerLite. */
.lead-magnet { background-color: var(--forest); background-image: url("/assets/images/leadmagnet-floral.75ef5148.webp"); background-repeat: repeat; background-size: 560px auto; color: var(--bone); padding: clamp(4rem, 8vh, 6rem) 0; }
.lead-magnet h2 { color: var(--bone); }
.lead-magnet p { color: rgba(244, 241, 236, 0.82); }
.lead-magnet-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.lead-magnet h2 { margin-bottom: 1rem; }
.lead-magnet .lm-caption { font-size: clamp(1rem, 1.4vw, 1.12rem); max-width: 52ch; margin: 0 auto 2.5rem; }
/* Product shot of the guide, centred under the title and above the form. */
.lm-media { margin: 1.75rem auto 2.5rem; max-width: 240px; }
.lm-media img { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: 0 28px 55px -28px rgba(0, 0, 0, 0.55); }
.lm-form { display: flex; flex-direction: column; gap: 1rem; max-width: 480px; margin: 0 auto; text-align: left; }
.lm-form .field label { font-size: 0.85rem; color: rgba(244, 241, 236, 0.75); margin-bottom: 0.4rem; display: block; }
.lm-form input[type="text"], .lm-form input[type="email"] { font-family: inherit; font-size: 1rem; padding: 0.85rem 1rem; border-radius: var(--radius-sm); border: 1px solid rgba(244, 241, 236, 0.25); background: rgba(244, 241, 236, 0.06); color: var(--bone); width: 100%; }
.lm-form input[type="text"]::placeholder, .lm-form input[type="email"]::placeholder { color: rgba(244, 241, 236, 0.45); }
.lm-form input:focus { outline: 2px solid var(--bone); outline-offset: 1px; border-color: var(--bone); }
.lm-consent { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.88rem; line-height: 1.45; color: rgba(244, 241, 236, 0.88); margin-top: 0.25rem; }
.lm-consent input[type="checkbox"] { margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--bone); width: 16px; height: 16px; }
.lm-form .btn { background: var(--bone); color: var(--forest); align-self: center; margin-top: 0.5rem; padding: 0.85rem 1.5rem; }
.lm-form .btn:hover { background: var(--sage-soft); color: var(--forest-deep); }
.lm-note { font-size: 0.78rem; color: rgba(244, 241, 236, 0.6); margin: 1.25rem auto 0; text-align: center; }
.blog-foot .btn { margin: 0 auto; display: inline-flex; }
.blog-foot-wrap { text-align: center; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  /* Disable all hover/press motion; keep instant colour changes only */
  .btn, .btn:hover, .btn:active, .btn .arrow,
  .cohort-card, .cohort-card:hover, .cohort-card-img img, .cohort-card:hover .cohort-card-img img,
  .testi-card, .testi-card:hover, .lf-card, .lf-card:hover,
  .blog-card, .blog-card:hover, .nav-items a::after { transition: none !important; transform: none !important; }
  .nav-items a:hover::after { transform: scaleX(1) !important; }
}

/* ============================================================
   MEMBER AREA STYLES
   ============================================================ */

/* Brand subtitle on member nav */
.brand small { display: block; font-family: 'Hanken Grotesk', 'Hanken Grotesk Fallback', sans-serif; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest); font-weight: 500; margin-top: 0.15rem; }

/* Member nav variant */
.nav-actions { display: flex; align-items: center; gap: 1.25rem; font-size: 0.9rem; }
.nav-actions a { color: var(--ink-soft); text-decoration: none; }
.nav-actions a:hover { color: var(--ink); }

/* Password gate */
.gate { max-width: 460px; margin: clamp(3rem, 8vh, 6rem) auto; text-align: center; padding: 0 1rem; }
.gate-lock { width: 56px; height: 56px; border-radius: 50%; background: var(--sage-soft); display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; color: var(--forest); }
.gate h1 { margin-bottom: 0.75rem; font-size: clamp(1.65rem, 3vw, 2.25rem); }
.gate p { color: var(--ink-soft); margin: 0 auto 2rem; max-width: 50ch; }
.gate-form { display: flex; flex-direction: column; gap: 0.75rem; }
.gate-form input { font-family: inherit; font-size: 1rem; padding: 0.85rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bone-warm); color: var(--ink); text-align: center; }
.gate-form input:focus { outline: 2px solid var(--forest); outline-offset: 1px; border-color: var(--forest); }
.gate-form button { background: var(--forest); color: var(--bone); padding: 0.85rem 1.25rem; border: none; border-radius: var(--radius-sm); font-family: inherit; font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: background 0.2s; }
.gate-form button:hover { background: var(--forest-deep); }
.gate-error { color: #8a3324; font-size: 0.92rem; margin-top: 0.5rem; min-height: 1.3em; }
.gate-help { font-size: 0.85rem; color: var(--ink-soft); margin-top: 2rem; }
.gate-help a { color: var(--forest); }

/* Member content shell */
.member-content { display: none; }
.member-content.show { display: block; }
.member-content-head { margin-bottom: 3rem; }
.member-content-head .eyebrow { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest); margin-bottom: 1rem; display: inline-block; }
.member-content-head h1 { margin-bottom: 0.75rem; }
.member-content-head p { color: var(--ink-soft); }

/* Member index article list */
.category { margin-bottom: 3rem; }
.category-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); }
.category-head h2 { color: var(--ink); font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.category-count { font-size: 0.85rem; color: var(--ink-soft); }
.article-list { display: flex; flex-direction: column; gap: 0.75rem; }
.article-item { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: 1.5rem 1.75rem; background: var(--bone-warm); border-radius: var(--radius); text-decoration: none; color: inherit; transition: background 0.2s, color 0.2s; }
.article-item:hover { background: var(--forest); }
.article-meta { font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', sans-serif; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.35rem; display: flex; gap: 0.75rem; align-items: center; transition: color 0.2s; }
.article-item:hover .article-meta { color: rgba(244, 241, 236, 0.75); }
.article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.article-title { font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', sans-serif; font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); line-height: 1.25; transition: color 0.2s; }
.article-item:hover .article-title { color: var(--bone); }
.article-desc { color: var(--ink-soft); font-size: 0.95rem; margin-top: 0.4rem; transition: color 0.2s; }
.article-item:hover .article-desc { color: rgba(244, 241, 236, 0.82); }
.article-arrow { color: var(--forest); font-size: 1.4rem; flex-shrink: 0; opacity: 0.7; transition: transform 0.2s, opacity 0.2s, color 0.2s; }
.article-item:hover .article-arrow { opacity: 1; color: var(--bone); transform: translateX(4px); }

/* Member article page */
.article-page { max-width: 720px; margin: 0 auto; }
.article-back { font-size: 0.88rem; color: var(--ink-soft); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 2.5rem; transition: color 0.2s; }
.article-back:hover { color: var(--forest); }
.article-back::before { content: "\2190"; }
.article-header { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.article-category { display: inline-block; padding: 0.35rem 0.8rem; background: var(--sage-soft); color: var(--forest-deep); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; border-radius: var(--radius-sm); margin-bottom: 1.25rem; font-weight: 500; }
.article-header h1 { margin-bottom: 1rem; font-size: clamp(1.85rem, 3.5vw, 2.6rem); }
.article-info { font-size: 0.9rem; color: var(--ink-soft); display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.article-info .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-soft); opacity: 0.5; }
.article-body { font-size: 1.05rem; line-height: 1.7; color: var(--ink); }
.article-body p { margin-bottom: 1.5rem; }
.article-body h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin: 2.25rem 0 1rem; }
.article-body h3 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); margin: 1.75rem 0 0.5rem; }
.article-body ul, .article-body ol { margin: 0 0 1.5rem 1.5rem; }
.article-body li { margin-bottom: 0.6rem; }
.article-body strong { font-weight: 600; }
.article-body blockquote { border-left: 3px solid var(--forest); padding: 0.5rem 0 0.5rem 1.5rem; margin: 1.75rem 0; font-style: italic; color: var(--ink-soft); font-size: 1.02rem; }

/* Blog posts sit on the warm cream so the article flows seamlessly into the
   footer plinth (.footer-shell is --bone-warm). Without this the --bone article
   meets the warmer plinth and leaves a visible colour seam above the footer. */
body.post-page { background: var(--bone-warm); }

/* Post byline: author attribution + reading time */
.post-meta { font-size: 0.9rem; color: var(--ink-soft); margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }
.post-meta strong { color: var(--ink); font-weight: 600; }

/* 30-second summary (TL;DR) box at the top of a post */
.post-tldr { background: var(--sage-soft); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 0 0 2.5rem; }
.post-tldr-label { display: flex; align-items: center; gap: 0.45rem; font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--forest); margin-bottom: 0.5rem; }
.post-tldr p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink); }

/* Callout / highlight box to break up long posts (tips, asides) */
.post-callout { background: var(--sage-soft); border-radius: var(--radius); padding: 1.1rem 1.4rem; margin: 1.75rem 0; font-size: 1rem; line-height: 1.6; color: var(--ink); }
.post-callout p { margin: 0; }
.post-callout-label { display: block; font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--forest); margin-bottom: 0.4rem; }
.article-body .post-callout p { margin-bottom: 0; }

/* YouTube embed in articles */
.youtube-embed { margin: 2rem 0 2.5rem; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--forest-deep); position: relative; }
.youtube-embed iframe { width: 100%; height: 100%; border: 0; }
.youtube-embed-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; padding: 2rem; text-align: center; color: var(--bone); }
.youtube-embed-placeholder .play-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(244, 241, 236, 0.15); border: 1px solid rgba(244, 241, 236, 0.3); display: flex; align-items: center; justify-content: center; }
.youtube-embed-placeholder .play-icon svg { width: 22px; height: 22px; color: var(--bone); margin-left: 3px; }
.youtube-embed-placeholder p { color: var(--bone); margin: 0; }
.youtube-embed-placeholder .vp-title { font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', sans-serif; font-size: 1.05rem; font-weight: 500; letter-spacing: -0.005em; }
.youtube-embed-placeholder .vp-meta { font-size: 0.82rem; opacity: 0.7; max-width: 36ch; }

/* Member nav and footer adjustments */
.member-nav { position: sticky; top: 0; z-index: 50; background: rgba(244, 241, 236, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.member-footer { background: var(--forest); color: var(--bone); padding: 2rem 0; font-size: 0.85rem; }
.member-footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; opacity: 0.78; }
.member-footer a { color: var(--bone); }


/* ============================================================
   PAGE LAYOUT (Terms, Privacy, About, etc.)
   ============================================================ */
.page-content { padding-top: clamp(3rem, 6vh, 5rem); padding-bottom: clamp(4rem, 8vh, 6rem); }
/* Inner column constrains text to a readable measure but lives inside the full nav-width container */
.page-inner { max-width: 760px; }
.page-header { margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.page-header h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); margin-bottom: 1rem; line-height: 1.05; }
.page-header .eyebrow { margin-bottom: 1.25rem; }
.page-subtitle { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-soft); max-width: 60ch; line-height: 1.45; }
.page-body { font-size: 1.05rem; line-height: 1.7; color: var(--ink); }
.page-body p { margin-bottom: 1.5rem; color: var(--ink); max-width: 65ch; }
.page-body h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 3rem 0 1.25rem; letter-spacing: -0.015em; }
.page-body h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); margin: 2.25rem 0 0.75rem; letter-spacing: -0.012em; }
.page-body ul, .page-body ol { margin: 0 0 1.5rem 1.5rem; max-width: 62ch; }
.page-body li { margin-bottom: 0.7rem; color: var(--ink); }
.page-body strong { font-weight: 600; }
.page-body em { font-style: italic; }
.page-body blockquote { border-left: 3px solid var(--forest); padding: 0.5rem 0 0.5rem 1.5rem; margin: 1.75rem 0; font-style: italic; color: var(--ink-soft); }
.page-body a:not(.btn) { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
.page-body a:not(.btn):hover { text-decoration-color: var(--forest-deep); }

/* ============================================================
   LONG-FORM PAGES (About, 1:1 course) - sectioned layout
   Prose stays in a centred readable column; tinted bands, card
   grids, pull quotes and figures break the page up and use the
   full width so it never reads as a wall of text floating left.
   ============================================================ */
.lf-hero { padding: clamp(3rem, 6vh, 5rem) 0 clamp(2.5rem, 5vh, 3.5rem); text-align: center; border-bottom: 1px solid var(--line); }
.lf-hero .eyebrow { margin-bottom: 1.25rem; }
.lf-hero h1 { font-size: clamp(2.4rem, 5.5vw, 3.75rem); line-height: 1.04; margin: 0 auto 1.25rem; max-width: 18ch; }
.lf-hero .lf-lead { font-size: clamp(1.12rem, 1.7vw, 1.35rem); color: var(--ink-soft); max-width: 60ch; margin: 0 auto; line-height: 1.5; }

.lf-section { padding: clamp(3rem, 6vh, 5rem) 0; }
.lf-section.tint { background: var(--bone-warm); }
.lf-section.sage { background: var(--sage-soft); }
.lf-section.forest { background: var(--forest); color: var(--bone); }
.lf-section.forest h2, .lf-section.forest h3 { color: var(--bone); }
.lf-section.forest p { color: rgba(244, 241, 236, 0.85); }

/* centred reading column for prose */
.lf-prose { max-width: 720px; margin: 0 auto; }
.lf-prose > .eyebrow { display: block; text-align: center; margin-bottom: 0.75rem; }
.lf-prose h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); letter-spacing: -0.018em; line-height: 1.1; margin: 0 0 1.5rem; text-align: center; }
.lf-prose h2.left { text-align: left; }
.lf-prose h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -0.012em; margin: 2rem 0 0.75rem; }
.lf-prose p { font-size: 1.05rem; line-height: 1.7; color: var(--ink); margin: 0 auto 1.4rem; max-width: 65ch; }
.lf-section.forest .lf-prose p { color: rgba(244, 241, 236, 0.85); }
.lf-prose .btn { margin-top: 1rem; }
.lf-prose .cta-center { text-align: center; margin-top: 2rem; }

/* lead / intro paragraph slightly larger */
.lf-intro { font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1.55; color: var(--ink); max-width: 680px; margin: 0 auto 1.5rem; text-align: center; }

/* pull quote */
.lf-quote { max-width: 820px; margin: 0 auto; text-align: center; }
.lf-quote p { font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', sans-serif; font-size: clamp(1.4rem, 2.8vw, 2.1rem); line-height: 1.25; letter-spacing: -0.015em; color: var(--forest-deep); font-weight: 400; max-width: none; margin: 0; }
.lf-section.forest .lf-quote p { color: var(--bone); }
.lf-quote .lf-quote-mark { font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', sans-serif; font-size: 3.5rem; line-height: 0.5; color: var(--forest); display: block; margin-bottom: 1rem; height: 0.4em; }
.lf-section.forest .lf-quote .lf-quote-mark { color: var(--sage); }

/* card grid (for lists turned into cards) */
.lf-cards { display: grid; grid-template-columns: 1fr; gap: 1.25rem; max-width: 1100px; margin: 0 auto; }
@media (min-width: 600px) { .lf-cards.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 800px) { .lf-cards.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.lf-card { background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 2.5vw, 2rem); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease; }
.lf-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(26, 51, 38, 0.3); border-color: var(--sage); }
.lf-section.tint .lf-card { background: var(--bone); }
.lf-card h3 { font-size: 1.15rem; letter-spacing: -0.01em; margin: 0 0 0.6rem; line-height: 1.2; }
.lf-card p { font-size: 0.98rem; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: none; }
.lf-card .lf-card-num { font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', sans-serif; font-size: 1.1rem; font-weight: 500; color: var(--forest); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sage-soft); margin-bottom: 1rem; }
.lf-card .lf-tick { color: var(--forest); flex-shrink: 0; margin-top: 0.15rem; }
.lf-card.tick { display: flex; gap: 0.85rem; align-items: flex-start; }
.lf-card.tick h3 { margin: 0; font-size: 1.02rem; font-weight: 500; }

/* checklist (lighter than cards, for "for you if" / "you'll feel") */
.lf-checklist { max-width: 760px; margin: 0 auto; display: grid; gap: 0.85rem; }
.lf-check { display: flex; gap: 0.85rem; align-items: flex-start; background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.35rem; }
.lf-section.tint .lf-check { background: var(--bone); }
.lf-check svg { color: var(--forest); flex-shrink: 0; margin-top: 0.1rem; }
.lf-check span { font-size: 1.02rem; line-height: 1.45; color: var(--ink); }
.lf-check span strong { font-weight: 600; }

/* figures inside long-form */
.lf-figure { max-width: 880px; margin: 0 auto; border-radius: var(--radius); overflow: hidden; background: var(--sage-soft); aspect-ratio: 16 / 10; }
.lf-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lf-figure.portrait { max-width: 460px; aspect-ratio: 4 / 5; }

/* section heading block (eyebrow + h2 centred) */
.lf-heading { text-align: center; max-width: 720px; margin: 0 auto clamp(2rem, 4vh, 3rem); }
.lf-heading .eyebrow { margin-bottom: 0.85rem; }
.lf-heading h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: -0.02em; line-height: 1.08; margin: 0; }
.lf-heading p { color: var(--ink-soft); margin-top: 1rem; font-size: 1.05rem; }

/* price callout, centred and roomy on long-form */
.lf-section .price-callout { max-width: 560px; margin-left: auto; margin-right: auto; }
.page-figure { margin: 2.5rem 0; border-radius: var(--radius); overflow: hidden; background: var(--sage-soft); aspect-ratio: 4 / 3; }
.page-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 700px) { .page-figure { aspect-ratio: 16 / 10; } }
/* Portrait variant: use the image's natural aspect ratio, centered, capped width */
.page-figure.portrait { aspect-ratio: auto; max-width: 480px; margin-left: auto; margin-right: auto; }
.page-figure.portrait img { height: auto; }

/* Price callout box (used inside page-body for course breakdowns) */
.price-callout { background: var(--bone-warm); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2rem); margin: 2.5rem 0; border: 1px solid var(--line); }
.price-callout h3 { margin: 0 0 1rem; font-size: clamp(1.1rem, 1.7vw, 1.3rem); }
.price-callout p { margin: 0.4rem 0; color: var(--ink); max-width: none; font-size: 1.02rem; }
.price-callout p strong { color: var(--ink); }
.price-callout-pay { margin-top: 1rem !important; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 1.1rem !important; }
.price-callout-pay strong { color: var(--forest) !important; font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', sans-serif; font-size: 1.25rem; }
.price-callout-deposit { color: var(--ink-soft) !important; font-size: 0.95rem !important; }

/* About section: Learn more link */
.about-text .learn-more { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--forest); text-decoration: none; font-weight: 500; margin-top: 1.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--forest); transition: gap 0.2s; }
.about-text .learn-more:hover { gap: 0.8rem; }
.about-text .learn-more::after { content: "\2192"; }

/* ============================================================
   HERO LOGO (above the eyebrow on the homepage)
   ============================================================ */
/* Explicit width + height:auto (the width/height attributes then fix the aspect
   ratio) so the box is reserved from CSS before the image loads — otherwise the
   logo loads late on throttled connections and pushes the hero image down (CLS).
   height:auto is required to override the height attribute; without it the box
   would be 280x395 (squished). Same rendered size as before: 332x187 / 280x158. */
.hero-logo { display: block; width: 332px; max-width: 100%; height: auto; margin: 0 0 1.75rem; border-radius: var(--radius); }
@media (max-width: 600px) { .hero-logo { width: 280px; } }

/* ============================================================
   ACCREDITATIONS STRIP (bottom of homepage, headerless)
   ============================================================ */
.accreditations { background: var(--bone-warm); padding: clamp(2.5rem, 4vh, 3.5rem) 0 0; border-top: 1px solid var(--line); }
.accreditations-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; justify-items: center; max-width: 880px; margin: 0 auto; }
@media (max-width: 600px) { .accreditations-grid { grid-template-columns: 1fr; gap: 0.75rem; max-width: 200px; } }
.accred-item { display: flex; align-items: center; justify-content: center; width: 100%; height: 150px; overflow: hidden; }
/* First (Love Your Birth): show full badge unclipped, more pronounced rounded corners */
.accred-item.lyb img { display: block; max-width: 100%; max-height: 150px; width: auto; height: auto; object-fit: contain; border-radius: 24px; }
/* Second (Little Rosebuds): zoom in further (2.4x) because the original has
   loads of whitespace margin */
.accred-item.rosebuds { border-radius: 24px; }
.accred-item.rosebuds img { display: block; width: auto; height: 100%; max-width: none; max-height: none; object-fit: contain; transform: scale(2.4); transform-origin: center center; }
/* Third (Qualified Baby Massage): circular frame, the badge is already
   round so the frame complements its shape */
.accred-item.circle { width: 160px; height: 160px; border-radius: 50%; background: var(--bone); border: 1px solid var(--line); overflow: hidden; }
.accred-item.circle img { display: block; width: 100%; height: 100%; object-fit: contain; transform: scale(1.55); transform-origin: center center; }
/* Mobile: shrink badges so they don't dominate the viewport */
@media (max-width: 600px) {
  .accred-item { height: 95px; }
  .accred-item.lyb img { max-height: 95px; border-radius: 16px; }
  .accred-item.rosebuds { border-radius: 16px; }
  .accred-item.circle { width: 100px; height: 100px; }
}