@charset "UTF-8";
/* ==========================================================================
   Rhonda Sampson — Author · Human-Centered AI Strategist · Speaker · Stylist
   Design system  |  hand-authored, dependency-free
   --------------------------------------------------------------------------
   COLOR CONTRACT
   Rhonda's brand palette is used exactly as specified for FILLS, DIVIDERS,
   BACKGROUNDS and DECORATION. None of the brand accents reach WCAG AA as
   text or as button fills carrying white text (measured: pink 2.70:1,
   teal 2.38:1, sage 2.24:1 against white). So each accent also has a
   same-hue DEEP variant used only for text, links and CTA fills.
   Every pairing shipped in this file meets AA (4.5:1) or better.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Brand — exact, for fills / dividers / decoration */
  --pink:        #EC76B0;
  --pink-2:      #E66FAE;
  --peach:       #F7C6A4;
  --blush:       #F4B8A6;
  --teal:        #7FB1B1;
  --teal-2:      #7DAFB0;
  --sage:        #84B8A4;
  --mint:        #E8FFF8;
  --white:       #FFFFFF;
  --ink:         #333333;

  /* Derived deep variants — for TEXT, LINKS and CTA fills (AA-compliant) */
  --pink-deep:   #C4256F;   /* 5.47:1 on white · white text on it 5.47:1 */
  --teal-deep:   #46767A;   /* 5.08:1 on white */
  --sage-deep:   #3F7561;   /* 5.35:1 on white */

  /* Surfaces */
  --bg:          var(--mint);
  --bg-white:    var(--white);
  --bg-peach:    #FDF0E6;         /* peach at low strength — reflection areas */
  --bg-sage:     #EDF7F2;         /* sage at low strength — growth areas */
  --surface:     var(--white);

  /* Text */
  --text:        var(--ink);
  --text-soft:   #4A464C;         /* 9.24:1 on white */
  --text-muted:  #5C5860;         /* 7.0:1 on white */
  --on-dark:     #FFFFFF;

  /* Lines */
  --line:        #D6E8E2;
  --line-strong: var(--teal);
  --line-warm:   var(--blush);

  /* Type — brand system: Montserrat (regular + semi-bold) + Alex Brush script */
  --font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-script:  "Alex Brush", "Segoe Script", "Brush Script MT", cursive;

  /* Fluid type scale */
  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   clamp(1.05rem, 0.99rem + 0.28vw, 1.19rem);
  --fs-lg:   clamp(1.25rem, 1.13rem + 0.55vw, 1.55rem);
  --fs-xl:   clamp(1.6rem, 1.36rem + 1.1vw, 2.3rem);
  --fs-2xl:  clamp(2rem, 1.55rem + 2.05vw, 3.2rem);
  --fs-3xl:  clamp(2.5rem, 1.7rem + 3.5vw, 4.5rem);

  /* Space */
  --sp-1: 0.35rem;  --sp-2: 0.6rem;  --sp-3: 0.9rem;  --sp-4: 1.3rem;
  --sp-5: 1.9rem;   --sp-6: 2.6rem;  --sp-7: 3.6rem;  --sp-8: 5rem;
  --sp-9: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* Shape & depth */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(51,51,51,.05), 0 2px 6px rgba(70,118,122,.06);
  --shadow-md: 0 2px 6px rgba(51,51,51,.05), 0 10px 26px rgba(70,118,122,.10);
  --shadow-lg: 0 4px 12px rgba(51,51,51,.06), 0 24px 60px rgba(70,118,122,.15);

  --wrap: 1180px;
  --wrap-narrow: 760px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset & base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* The hidden attribute must beat component classes that set a display value
   (e.g. .form-status.is-shown), otherwise setup notes leak onto live pages. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-optical-sizing: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: 0;                     /* Poppins reads clean at its natural spacing */
  font-variant-numeric: lining-nums;
  overflow-x: hidden;
}

img, picture, svg, video { max-width: 100%; height: auto; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--teal-deep);
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
/* Montserrat Semi-Bold for sub-heads keeps the system consistent. */
h3, h4 { font-weight: 600; letter-spacing: -0.01em; }
p { text-wrap: pretty; }
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15em; }
li { margin-bottom: var(--sp-2); }
strong { font-weight: 700; color: var(--text); }
blockquote { margin: 0; }

a { color: var(--pink-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #A81C5C; }

hr {
  border: 0; height: 1px; margin: var(--sp-6) 0;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
}

::selection { background: var(--pink); color: #fff; }

/* Focus — visible on every interactive element, 5.23:1 on the mint bg */
:focus-visible {
  outline: 3px solid var(--pink-deep);
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* Anchor targets must clear the sticky header when jumped to. */
:target, section[id], div[id], h2[id] { scroll-margin-top: 92px; }

.skip-link {
  position: absolute; left: var(--sp-3); top: -100px; z-index: 200;
  background: var(--teal-deep); color: #fff; padding: .7rem 1.2rem;
  border-radius: var(--r-sm); font-weight: 700; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: var(--sp-3); color: #fff; }

.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;
}

/* ---------- 3. Layout primitives ---------------------------------------- */
.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.5rem, 5vw, 4rem); }
.container-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--sp-9); }
.section-tight { padding-block: var(--sp-7); }
.section--white { background: var(--bg-white); }
.section--peach { background: var(--bg-peach); }   /* reflection / supportive */
.section--sage  { background: var(--bg-sage); }    /* growth / healing / progress */
.section--teal  { background: var(--teal-deep); color: var(--on-dark); }
.section--teal h1, .section--teal h2, .section--teal h3 { color: var(--on-dark); }

.section-head { max-width: 46rem; margin-bottom: var(--sp-6); }
.section-head.center { margin-inline: auto; text-align: center; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pink-deep);
  margin: 0 0 var(--sp-4);
  display: flex; align-items: center; gap: .65rem;
}
.section-head.center .eyebrow { justify-content: center; }
.eyebrow::before {
  content: ""; width: 34px; height: 3px; flex: none;
  background: var(--pink); border-radius: 2px;
}
.eyebrow--teal { color: var(--teal-deep); }
.eyebrow--teal::before { background: var(--teal); }
.eyebrow--sage { color: var(--sage-deep); }
.eyebrow--sage::before { background: var(--sage); }
.section--teal .eyebrow { color: var(--peach); }
.section--teal .eyebrow::before { background: var(--peach); }

.lede { font-size: var(--fs-md); color: var(--text-soft); line-height: 1.68; }
.section--teal .lede { color: rgba(255,255,255,.92); }

.display-xl { font-size: var(--fs-3xl); line-height: 1.16; letter-spacing: -0.02em;  font-weight: 600; }
.display-lg { font-size: var(--fs-2xl); line-height: 1.18; letter-spacing: -0.018em; font-weight: 600; }
.display-md { font-size: var(--fs-xl);  line-height: 1.16; letter-spacing: -0.012em; font-weight: 600; }
/* Script accent word — the brand's "chosen"-style flourish (Alex Brush). */
.script {
  font-family: var(--font-script); font-style: normal; font-weight: 400;
  font-size: 1.55em; line-height: 1; color: var(--pink-deep);
  letter-spacing: 0; padding: 0 .12em;
}
.section--teal .script { color: var(--peach); }

/* Brand "pop" accents — a gradient on key words and a highlight behind a phrase */
.grad {
  background: linear-gradient(100deg, var(--pink-deep) 0%, #E08A5B 72%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.hl {
  background: linear-gradient(180deg, transparent 60%, rgba(247,198,164,.85) 60%);
  padding: 0 .06em; border-radius: 2px;
}
.section--teal .grad {
  background: linear-gradient(100deg, var(--peach) 0%, var(--pink) 90%);
  -webkit-background-clip: text; background-clip: text;
}

.stack > * + * { margin-top: var(--sp-4); }
.center { text-align: center; }
.mt-6 { margin-top: var(--sp-6); }

/* ---------- 4. Buttons --------------------------------------------------- */
.btn {
  --btn-bg: var(--pink-deep);
  --btn-fg: #fff;
  --btn-bd: var(--pink-deep);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .92rem 1.75rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-bd); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform .18s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary { --btn-bg: var(--pink-deep); --btn-bd: var(--pink-deep); }
.btn-primary:hover { --btn-bg: #A81C5C; --btn-bd: #A81C5C; }

.btn-teal { --btn-bg: var(--teal-deep); --btn-bd: var(--teal-deep); }
.btn-teal:hover { --btn-bg: #375E62; --btn-bd: #375E62; }

.btn-sage { --btn-bg: var(--sage-deep); --btn-bd: var(--sage-deep); }
.btn-sage:hover { --btn-bg: #325F4E; --btn-bd: #325F4E; }

.btn-outline { --btn-bg: transparent; --btn-fg: var(--teal-deep); --btn-bd: var(--teal-deep); box-shadow: none; }
.btn-outline:hover { --btn-bg: var(--teal-deep); --btn-fg: #fff; }

.btn-outline-pink { --btn-bg: transparent; --btn-fg: var(--pink-deep); --btn-bd: var(--pink-deep); box-shadow: none; }
.btn-outline-pink:hover { --btn-bg: var(--pink-deep); --btn-fg: #fff; }

.section--teal .btn-outline { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.7); }
.section--teal .btn-outline:hover { --btn-bg: #fff; --btn-fg: var(--teal-deep); --btn-bd: #fff; }

.btn-lg { padding: 1.08rem 2.2rem; font-size: var(--fs-base); }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.center .btn-row, .btn-row.center { justify-content: center; }

.textlink {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: var(--fs-sm); letter-spacing: .03em;
  color: var(--pink-deep); text-decoration: none;
  border-bottom: 2px solid var(--pink); padding-bottom: 2px;
  transition: gap .18s var(--ease), border-color .18s var(--ease);
}
.textlink:hover { gap: .7rem; border-color: var(--pink-deep); }

/* ---------- 5. Header / navigation --------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(232,255,248,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.header-inner {
  max-width: var(--wrap); margin-inline: auto;
  padding: .8rem clamp(1.5rem, 5vw, 4rem);
  display: flex; align-items: center; gap: var(--sp-4);
}

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.monogram {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--pink) 0%, var(--peach) 55%, var(--teal) 100%);
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: .02em; text-shadow: 0 1px 2px rgba(51,51,51,.35);
}
.brand-name {
  display: flex; flex-direction: column; line-height: 1.12;
  font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; color: var(--teal-deep);
}
.brand-name small {
  font-family: var(--font-body); font-size: .58rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); margin-top: 3px; white-space: nowrap;
}

.main-nav { display: flex; align-items: center; gap: clamp(.5rem, 1.4vw, 1.35rem); }
.main-nav .btn { display: none; }   /* shown only inside the mobile drawer */
.main-nav a {
  position: relative; text-decoration: none; color: var(--teal-deep);
  font-size: .84rem; font-weight: 600; letter-spacing: .025em; padding: .45rem .1rem;
  white-space: nowrap;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--pink); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease);
}
.main-nav a:hover { color: var(--pink-deep); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.main-nav a[aria-current="page"] { color: var(--pink-deep); }

.header-cta { display: flex; align-items: center; gap: var(--sp-2); }
.header-cta .btn { padding: .68rem 1.25rem; font-size: .76rem; }

.nav-toggle {
  display: none; width: 46px; height: 46px; padding: 0;
  background: transparent; border: 2px solid var(--teal-deep);
  border-radius: var(--r-sm); color: var(--teal-deep);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; background: currentColor;
  border-radius: 2px; margin-inline: auto; transition: transform .22s var(--ease), opacity .18s;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1040px) {
  .nav-toggle { display: grid; place-items: center; }
  .header-cta .btn { display: none; }
  .main-nav {
    position: fixed; inset: 69px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-white); border-bottom: 1px solid var(--line);
    padding: var(--sp-3) clamp(1.5rem, 5vw, 4rem) var(--sp-5);
    box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - 69px); overflow-y: auto;
    transform: translateY(-14px); opacity: 0; visibility: hidden;
    transition: transform .22s var(--ease), opacity .22s var(--ease), visibility .22s;
  }
  .main-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .main-nav a { padding: .95rem .2rem; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .main-nav a::after { display: none; }
  .main-nav .btn { display: inline-flex; margin-top: var(--sp-4); }
}

/* ---------- 6. Hero ------------------------------------------------------ */
.hero {
  position: relative; overflow: hidden;
  /* Flat background. No blobs, no glow, no panel — the portrait is the only
     thing in the right half, exactly as in the reference. */
  padding-block: 0;
}

.hero-inner {
  max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
}
.hero-copy {
  /* Generous vertical room so the headline never feels pressed against
     the header above or the credibility strip below. */
  padding-block: clamp(3rem, 2rem + 4.5vw, 6.5rem);
  max-width: 36rem;
}
.hero-copy h1 { margin-bottom: var(--sp-4); }
.hero-tagline {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: var(--fs-lg); line-height: 1.48; color: var(--teal-deep);
  border-left: 4px solid var(--pink); padding: .3rem 0 .3rem 1.2rem;
  margin: 0 0 var(--sp-5); text-wrap: pretty;
}
/* Set inline as a single dot-separated line rather than a block of pills, so
   the roles read as part of the copy instead of a second UI element. */
/* Roles set in the same label type as the eyebrow: Montserrat bold, uppercase,
   pink, letter-spaced, with a middot between each — a matching pair. */
.hero-roles {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .15rem 0; margin: 0 0 var(--sp-5); padding: 0; list-style: none;
}
.hero-roles li {
  margin: 0; display: inline-flex; align-items: baseline;
  font-family: var(--font-body);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--pink-deep); white-space: nowrap;
}
.hero-roles li:not(:last-child)::after {
  content: "\00B7";                       /* · to match the eyebrow */
  color: var(--pink); margin-inline: .55rem; font-weight: 700; line-height: 1;
}

/* Background-free portrait. It is deliberately allowed to run wider than its
   grid column and to sit flush on the hero's bottom edge, so it reads as a
   figure standing in the page rather than a photo pasted into a box. */
.hero-photo { position: relative; line-height: 0; }
.hero-photo img {
  height: clamp(360px, 58vh, 620px);
  width: auto; max-width: 100%; display: block;
}

@media (min-width: 901px) {
  /* Lifted out of the grid and pinned to the viewport's right edge, so the
     portrait bleeds off the page with no container gutter beside it. The empty
     second grid column reserves the space so copy can never run underneath. */
  .hero-photo {
    position: absolute; inset: 0 0 0 auto;
    width: clamp(360px, 46vw, 760px);
    line-height: 0; pointer-events: none;
  }
  /* Pinned with insets rather than height:100% — the hero's own height is
     content-driven, so a percentage height would resolve to auto and the
     portrait would overflow and get cropped by the section. */
  .hero-photo img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; max-width: none;
    object-fit: contain;
    object-position: bottom right;   /* stands flush on the section edge */
  }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 0; }
  .hero-copy { max-width: none; padding-block: clamp(2.2rem, 6vw, 3.4rem) var(--sp-5); }
  .hero-photo { justify-self: center; }
  .hero-photo img { height: clamp(320px, 48vh, 500px); margin-inline: auto; }
}

/* Page hero (interior pages) */
.page-hero { position: relative; padding-block: clamp(3rem, 2.2rem + 4.5vw, 5.6rem); background: var(--bg-peach); border-bottom: 1px solid var(--line-warm); }
.page-hero .container { max-width: 56rem; }
.page-hero h1 { margin-bottom: var(--sp-3); }

/* ---------- 7. Credibility strip ----------------------------------------- */
.cred-strip { background: var(--teal-deep); color: #fff; padding-block: var(--sp-4); }
.cred-inner {
  max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.5rem, 5vw, 4rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .7rem clamp(1rem, 3vw, 2.4rem);
}
.cred-label {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--peach);
}
.cred-item { font-family: var(--font-display); font-size: var(--fs-md); color: #fff; }
.cred-item + .cred-item::before {
  content: "·"; color: var(--teal); margin-right: clamp(1rem, 3vw, 2.4rem);
}

/* ---------- 8. Path grid (4 equal routes) -------------------------------- */
.path-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 1000px) { .path-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .path-grid { grid-template-columns: 1fr; } }

.path-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  text-decoration: none; color: inherit; overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.path-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--accent, var(--teal)); }
.path-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--accent, var(--teal)); }
.path-card .path-num {
  font-family: var(--font-display); font-size: .8rem; font-weight: 700; letter-spacing: .1em;
  color: var(--accent-text, var(--teal-deep)); margin-bottom: var(--sp-2);
}
.path-card h3 { font-size: var(--fs-lg); color: var(--accent-text, var(--teal-deep)); margin-bottom: var(--sp-2); }
.path-card p { font-size: var(--fs-sm); color: var(--text-soft); margin-bottom: var(--sp-4); }
.path-card .path-go {
  margin-top: auto; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-text, var(--teal-deep)); display: inline-flex; align-items: center; gap: .4rem;
}
.path-card:hover .path-go .arrow { transform: translateX(4px); }
.path-go .arrow { transition: transform .18s var(--ease); }

.path-card--ai     { --accent: var(--pink);  --accent-text: var(--pink-deep); }
.path-card--speak  { --accent: var(--teal);  --accent-text: var(--teal-deep); }
.path-card--book   { --accent: var(--sage);  --accent-text: var(--sage-deep); }
.path-card--style  { --accent: var(--blush); --accent-text: var(--pink-deep); }

/* ---------- 9. Generic cards & grids ------------------------------------- */
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 950px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-5); box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card h2, .card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.card p:last-child { margin-bottom: 0; }
.card--lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card--peach { background: var(--bg-peach); border-color: var(--line-warm); }
.card--sage  { background: var(--bg-sage);  border-color: #C9E3D8; }
.card--pink  { border-top: 5px solid var(--pink); }
.card--teal  { border-top: 5px solid var(--teal); }

.card-icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--mint); border: 1px solid var(--line); margin-bottom: var(--sp-3);
  font-size: 1.3rem; line-height: 1;
}

/* Numbered feature list */
.numbered { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
.numbered > li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start;
  margin: 0; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line);
}
.numbered > li:last-child { border-bottom: 0; padding-bottom: 0; }
.numbered .n {
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700;
  color: var(--pink-deep); min-width: 2.2rem;
}
.numbered h3 { font-size: var(--fs-md); margin-bottom: var(--sp-1); }
.numbered p { font-size: var(--fs-sm); color: var(--text-soft); margin: 0; }

/* Check list */
.check-list { list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.check-list li { position: relative; padding-left: 2rem; margin-bottom: var(--sp-3); color: var(--text-soft); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--sage-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23000'/%3E%3C/svg%3E") center/1.15rem no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23000'/%3E%3C/svg%3E") center/1.15rem no-repeat;
}

/* Pill / tag rows */
.pill-row { display: flex; flex-wrap: wrap; gap: .55rem; padding: 0; margin: 0; list-style: none; }
.pill-row li {
  margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--teal-deep);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: .42rem 1rem;
}
.pill-row--pink li { color: var(--pink-deep); border-color: var(--pink); background: #FEF5F9; }
.pill-row--sage li { color: var(--sage-deep); border-color: #BCDCCB; background: var(--bg-sage); }

/* Stats */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); text-align: center; }
@media (max-width: 760px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat .stat-n {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700;
  color: var(--pink-deep); line-height: 1; display: block; margin-bottom: var(--sp-2);
}
.stat .stat-l { font-size: var(--fs-sm); color: var(--text-soft); }
.section--teal .stat .stat-n { color: var(--peach); }
.section--teal .stat .stat-l { color: rgba(255,255,255,.9); }

/* ---------- 10. Split (media + copy) ------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--narrow-media { grid-template-columns: .85fr 1.15fr; }
@media (max-width: 900px) {
  .split, .split--narrow-media { grid-template-columns: 1fr; }
  .split .split-media { order: -1; }
  .split--flip .split-media { order: -1; }
}
.split-media img { border-radius: var(--r-lg); box-shadow: var(--shadow-md); width: 100%; }
.split--flip .split-media { order: 2; }

/* ---------- 11. Product / book ------------------------------------------- */
.product { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .product { grid-template-columns: 1fr; } }

.product-visual { position: relative; }
.product-visual img {
  width: 100%; border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.badge {
  position: absolute; top: -14px; right: -10px; z-index: 2;
  background: var(--pink-deep); color: #fff;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: .55rem .95rem; border-radius: var(--r-pill);
  box-shadow: var(--shadow-md); text-align: center; line-height: 1.25;
}
.badge--sage { background: var(--sage-deep); }

.price-block {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .7rem;
  margin-bottom: var(--sp-4);
}
.price {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700;
  color: var(--pink-deep); line-height: 1;
}
.price-note { font-size: var(--fs-sm); color: var(--text-muted); }
.price-strike { font-size: var(--fs-md); color: var(--text-muted); text-decoration: line-through; }

.buy-box {
  background: var(--surface); border: 2px solid var(--pink); border-radius: var(--r-md);
  padding: var(--sp-5); box-shadow: var(--shadow-md);
}
.buy-box .btn { width: 100%; }
.buy-meta {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: var(--sp-4);
  font-size: var(--fs-xs); color: var(--text-muted); justify-content: center;
}
.buy-meta span { display: inline-flex; align-items: center; gap: .35rem; }

.spec-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.spec-list li {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: .75rem 0; margin: 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm);
}
.spec-list li:last-child { border-bottom: 0; }
.spec-list dt, .spec-list .k { color: var(--text-muted); }
.spec-list .v { font-weight: 700; color: var(--teal-deep); text-align: right; }

/* Sample page peek */
.peek-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 700px) { .peek-grid { grid-template-columns: 1fr; } }
.peek {
  background: var(--white); border: 1px solid var(--line-warm); border-radius: var(--r-md);
  padding: var(--sp-5); position: relative;
}
.peek::before {
  content: attr(data-page); position: absolute; top: var(--sp-3); right: var(--sp-4);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; color: var(--blush);
  text-transform: uppercase;
}
.peek h4 { font-size: var(--fs-md); color: var(--sage-deep); margin-bottom: var(--sp-2); }
.peek p { font-size: var(--fs-sm); color: var(--text-soft); font-style: italic; margin: 0; }

/* ---------- 12. Pricing / service menu ----------------------------------- */
.menu-list { list-style: none; padding: 0; margin: 0; }
.menu-list > li {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3) var(--sp-5);
  align-items: baseline; padding: var(--sp-4) 0; margin: 0;
  border-bottom: 1px dashed var(--line-strong);
}
.menu-list > li:last-child { border-bottom: 0; }
.menu-name { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; color: var(--teal-deep); }
.menu-desc { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--text-soft); margin: 0; }
.menu-price { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--pink-deep); white-space: nowrap; }

/* ---------- 13. Testimonials & quotes ------------------------------------ */
.testimonial {
  background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--pink);
  border-radius: var(--r-md); padding: var(--sp-5); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.testimonial p { font-size: var(--fs-sm); color: var(--text-soft); font-style: italic; }
.testimonial footer { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.t-name { font-family: var(--font-display); font-weight: 700; color: var(--teal-deep); font-size: var(--fs-md); }
.t-role { font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: .03em; }

.quote-band { background: var(--bg-peach); border-block: 1px solid var(--line-warm); padding-block: var(--sp-8); text-align: center; }
.quote-band blockquote {
  max-width: 46rem; margin-inline: auto; padding-inline: var(--sp-4);
  font-family: var(--font-display); font-style: italic; font-size: var(--fs-xl);
  line-height: 1.42; color: var(--teal-deep); text-wrap: balance;
}
.quote-band cite {
  display: block; margin-top: var(--sp-4); font-style: normal;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--pink-deep);
}

/* ---------- 14. Timeline / experience ------------------------------------ */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--teal); border-radius: 2px; }
.timeline > li { position: relative; margin: 0 0 var(--sp-5); padding-left: var(--sp-6); }
.timeline > li:last-child { margin-bottom: 0; }
.timeline > li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 16px; height: 16px;
  border-radius: 50%; background: var(--white); border: 3px solid var(--pink);
}
.tl-when { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pink-deep); }
.tl-role { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; color: var(--teal-deep); margin: 2px 0 var(--sp-1); }
.tl-org  { font-size: var(--fs-sm); font-weight: 700; color: var(--sage-deep); }
.timeline p { font-size: var(--fs-sm); color: var(--text-soft); margin: var(--sp-1) 0 0; }

/* ---------- 15. Skill columns -------------------------------------------- */
.skill-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-5); }
.skill-col h3 {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pink-deep);
  padding-bottom: var(--sp-2); margin-bottom: var(--sp-3); border-bottom: 2px solid var(--peach);
}
.skill-col ul { list-style: none; padding: 0; margin: 0; }
.skill-col li {
  font-size: var(--fs-sm); color: var(--text-soft); margin-bottom: var(--sp-2);
  padding-left: 1.1rem; position: relative;
}
.skill-col li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
}

/* ---------- 16. Article / prose ------------------------------------------ */
.article { max-width: 44rem; }
.article h2 { font-size: var(--fs-xl); margin-top: var(--sp-6); }
.article h2:first-child { margin-top: 0; }
.article p { color: var(--text-soft); }
.article-meta {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); padding-top: var(--sp-3); border-top: 1px solid var(--line); margin-top: var(--sp-4);
}

details.faq {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-3);
}
details.faq[open] { border-color: var(--teal); }
details.faq summary {
  cursor: pointer; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600;
  color: var(--teal-deep); list-style: none; display: flex; justify-content: space-between; gap: var(--sp-4);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--pink-deep); font-size: 1.4rem; line-height: 1; flex: none; }
details.faq[open] summary::after { content: "–"; }
details.faq p { font-size: var(--fs-sm); color: var(--text-soft); margin: var(--sp-3) 0 0; }

/* ---------- 17. Forms ----------------------------------------------------- */
.form-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 4vw, 2.8rem); box-shadow: var(--shadow-md);
}
.field { margin-bottom: var(--sp-4); }
.field label {
  display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--teal-deep); margin-bottom: var(--sp-2);
}
.field .req { color: var(--pink-deep); }
.field .hint { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem;
  background: var(--white); color: var(--text);
  border: 2px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8A868F; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--teal); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--pink-deep); box-shadow: 0 0 0 4px rgba(196,37,111,.14);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: #B3261E; box-shadow: 0 0 0 4px rgba(179,38,30,.12);
}
.field-error { display: none; font-size: var(--fs-xs); font-weight: 700; color: #B3261E; margin-top: var(--sp-2); }
.field-error.is-shown { display: block; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

.form-status {
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 600; display: none;
}
.form-status.is-shown { display: block; }
.form-status.is-ok   { background: var(--bg-sage); border: 1px solid var(--sage-deep); color: var(--sage-deep); }
.form-status.is-err  { background: #FDECEA; border: 1px solid #B3261E; color: #8C1D18; }

.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- 18. Newsletter ------------------------------------------------ */
.newsletter { background: var(--bg-sage); border-top: 1px solid #C9E3D8; padding-block: var(--sp-7); }
.newsletter-inner {
  max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-5); align-items: center;
}
@media (max-width: 800px) { .newsletter-inner { grid-template-columns: 1fr; } }
.newsletter h2 { font-size: var(--fs-xl); color: var(--sage-deep); margin-bottom: var(--sp-2); }
.newsletter p { font-size: var(--fs-sm); color: var(--text-soft); margin: 0; max-width: 34rem; }
.newsletter-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.newsletter-form input {
  flex: 1 1 260px; padding: .9rem 1.1rem;
  border: 2px solid #C9E3D8; border-radius: var(--r-pill); background: var(--white);
}
.newsletter-form input:focus { outline: none; border-color: var(--sage-deep); box-shadow: 0 0 0 4px rgba(63,117,97,.15); }

/* ---------- 19. Footer ---------------------------------------------------- */
.site-footer { background: var(--teal-deep); color: rgba(255,255,255,.86); padding-block: var(--sp-7) var(--sp-4); }
.footer-grid {
  max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--sp-5);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer .brand-name { color: #fff; }
.site-footer .brand-name small { color: var(--peach); }
.footer-brand p { font-size: var(--fs-sm); margin-top: var(--sp-3); max-width: 24rem; color: rgba(255,255,255,.8); }
.footer-tagline { font-family: var(--font-display); font-style: italic; color: var(--peach) !important; }

.footer-col h2 {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--peach); margin-bottom: var(--sp-3);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: var(--sp-2); }
.footer-col a { color: rgba(255,255,255,.86); text-decoration: none; font-size: var(--fs-sm); }
.footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.footer-bottom {
  max-width: var(--wrap); margin: var(--sp-6) auto 0; padding: var(--sp-4) clamp(1.5rem, 5vw, 4rem) 0;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--fs-xs); color: rgba(255,255,255,.75);
}
.footer-bottom a { color: rgba(255,255,255,.75); }

/* ---------- 20. Reveal animation ----------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- 21. Forced colors / print ------------------------------------ */
@media (forced-colors: active) {
  .btn { border: 2px solid ButtonText; }
  .path-card, .card, .testimonial { border: 1px solid CanvasText; }
}

@media print {
  .site-header, .site-footer, .newsletter, .nav-toggle, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.2rem; }
}

/* ---------- 22. Flipbook (book sample) ----------------------------------- */
/* Width is capped by viewport height too, so the whole spread (page + controls)
   stays on screen on short laptop windows. 55vh wide => ~71vh tall at 733:950. */
.flipbook { max-width: min(540px, 55vh); margin-inline: auto; }

.fb-stage {
  position: relative;
  aspect-ratio: 733 / 950;
  perspective: 2400px;
  perspective-origin: 0% 50%;
}

/* The binding edge — sits behind the pages so turns look hinged. */
.fb-stage::before {
  content: ""; position: absolute; top: 2%; bottom: 2%; left: -10px; width: 14px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--teal-deep) 60%, #2E5457 100%);
  border-radius: 4px 0 0 4px; box-shadow: var(--shadow-md); z-index: 0;
}

.fb-page {
  position: absolute; inset: 0;
  transform-origin: left center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .72s cubic-bezier(.42,.12,.22,1);
  border-radius: 3px 8px 8px 3px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 6px rgba(51,51,51,.10), 0 14px 34px rgba(70,118,122,.20);
}
.fb-page.is-turned { transform: rotateY(-179deg); }

.fb-page img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Gutter shading nearest the spine + a warm page edge on the outside. */
.fb-page::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(51,51,51,.16) 0%, rgba(51,51,51,.05) 3.5%, transparent 9%),
    linear-gradient(270deg, rgba(247,198,164,.35) 0%, transparent 2.5%);
}

.fb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--teal-deep); color: var(--teal-deep);
  display: grid; place-items: center; font-size: 1.15rem; line-height: 1;
  box-shadow: var(--shadow-md);
  transition: background-color .18s var(--ease), color .18s var(--ease), opacity .18s;
}
.fb-nav:hover:not(:disabled) { background: var(--teal-deep); color: #fff; }
.fb-nav:disabled { opacity: .3; cursor: not-allowed; }
.fb-prev { left: -23px; }
.fb-next { right: -23px; }
@media (max-width: 640px) { .fb-prev { left: -14px; } .fb-next { right: -14px; } }

.fb-bar {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.fb-count {
  font-family: var(--font-display); font-size: var(--fs-md); color: var(--teal-deep);
  min-width: 8.5rem; text-align: center;
}
.fb-count b { color: var(--pink-deep); }

.fb-dots { display: flex; gap: .45rem; padding: 0; margin: 0; list-style: none; }
.fb-dots li { margin: 0; }
.fb-dot {
  width: 11px; height: 11px; padding: 0; border-radius: 50%;
  background: transparent; border: 2px solid var(--teal); cursor: pointer;
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.fb-dot[aria-current="true"] { background: var(--pink-deep); border-color: var(--pink-deep); transform: scale(1.25); }

.fb-caption {
  margin-top: var(--sp-4); text-align: center;
  font-size: var(--fs-sm); color: var(--text-soft); min-height: 3.2em;
}
.fb-caption strong { display: block; font-family: var(--font-display); font-size: var(--fs-md); color: var(--teal-deep); margin-bottom: 2px; }

.fb-note {
  margin-top: var(--sp-5); text-align: center;
  font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: .03em;
}

@media (prefers-reduced-motion: reduce) {
  .fb-page { transition: none; }
}

/* ---------- 23. Auto-flipping main book image ---------------------------- */
.bookflip {
  position: relative; width: 100%;
  aspect-ratio: 820 / 1061;
  perspective: 2400px; perspective-origin: 0% 50%;
}
/* Binding edge behind the pages, so each turn reads as hinged paper. */
.bookflip::before {
  content: ""; position: absolute; top: 1.5%; bottom: 1.5%; left: -9px; width: 13px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--teal-deep) 60%, #2E5457 100%);
  border-radius: 4px 0 0 4px; box-shadow: var(--shadow-md); z-index: 0;
}
.bf-stage { position: absolute; inset: 0; }
.bf-page {
  position: absolute; inset: 0;
  transform-origin: left center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .9s cubic-bezier(.42,.12,.22,1);
  border-radius: 3px 10px 10px 3px; overflow: hidden; background: #fff;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.bf-page.is-turned { transform: rotateY(-178deg); }
.bf-page img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Spine shading + a warm outer page edge. */
.bf-page::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(51,51,51,.16) 0%, rgba(51,51,51,.05) 3.5%, transparent 9%),
    linear-gradient(270deg, rgba(247,198,164,.35) 0%, transparent 2.5%);
}
.bf-dots {
  position: absolute; left: 50%; bottom: -1.6rem; transform: translateX(-50%);
  display: flex; gap: .4rem; padding: 0; margin: 0; list-style: none; z-index: 5;
}
.bf-dots li { margin: 0; }
.bf-dot {
  width: 9px; height: 9px; padding: 0; border-radius: 50%;
  background: transparent; border: 2px solid var(--teal); cursor: pointer;
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.bf-dot[aria-current="true"] { background: var(--pink-deep); border-color: var(--pink-deep); transform: scale(1.3); }
.bf-hint {
  margin: 2.2rem 0 0; text-align: center;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .bf-page { transition: none; }
  .bf-dots { display: none; }
}

/* ---------- 24. Quote wall (confidence / wholeness / self-love) ---------- */
.quote-wall {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr; gap: var(--sp-4);
}
@media (max-width: 900px) { .quote-wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .quote-wall { grid-template-columns: 1fr; } }
.qcard {
  position: relative; margin: 0; display: flex; flex-direction: column; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-6) var(--sp-5) var(--sp-5); box-shadow: var(--shadow-sm);
  overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.qcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.qcard::before {
  content: "\201C"; position: absolute; top: -.35em; left: .28em;
  font-family: var(--font-display); font-size: 5.5rem; line-height: 1;
  color: var(--accent-q, var(--pink)); opacity: .22;
}
.qcard blockquote {
  position: relative; margin: 0;
  font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.34;
  color: var(--teal-deep); text-wrap: balance;
}
.qcard figcaption {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-qt, var(--pink-deep));
}
/* First and last cards span two columns on wide screens for rhythm. */
@media (min-width: 901px) {
  .quote-wall .qcard:nth-child(1) { grid-column: span 2; }
  .quote-wall .qcard:nth-child(4) { grid-column: span 2; }
}
.qcard--pink  { --accent-q: var(--pink);  --accent-qt: var(--pink-deep); border-top: 4px solid var(--pink); }
.qcard--sage  { --accent-q: var(--sage);  --accent-qt: var(--sage-deep); border-top: 4px solid var(--sage); background: var(--bg-sage); }
.qcard--teal  { --accent-q: var(--teal);  --accent-qt: var(--teal-deep); border-top: 4px solid var(--teal); }
.qcard--peach { --accent-q: var(--blush); --accent-qt: var(--pink-deep); border-top: 4px solid var(--blush); background: var(--bg-peach); }