/* ============================================
   Resurrected Worth — Constance André
   Brand-aligned stylesheet
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Montserrat:wght@300;400;500;600;700&family=Style+Script&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,600;1,700&display=swap');

:root {
  /* Brand palette (verbatim from Resurrected Worth Brand Guide 2026) */
  --c-teal:    #0d3b44;
  --c-slate:   #54666d;
  --c-purple:  #7a5ea8;
  --c-blue:    #6690b1;
  --c-rose:    #ae857a;
  --c-peach:   #f3a28c;
  --c-gold:    #fcce77;
  --c-cream:   #f4f4f4;

  /* Derived */
  --c-teal-soft:  #1a4e58;
  --c-slate-soft: #707f86;
  --c-cream-deep: #ece7dc;
  --c-line:       rgba(13, 59, 68, 0.12);

  /* Text */
  --c-ink:       #1f2a2e;
  --c-ink-muted: #56646a;
  --c-paper:     #ffffff;
  --c-on-dark:        #ffffff;
  --c-on-dark-muted:  rgba(255,255,255,0.82);

  /* Type stack */
  --f-display: 'Cinzel Decorative', 'Trajan Pro', Georgia, serif;
  --f-body:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-script:  'Style Script', cursive;
  --f-serif:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* Layout */
  --w-max:        1320px;
  --w-text:       760px;
  --w-text-wide:  920px;
  --pad-x:        clamp(1rem, 4vw, 2rem);
  --section-pad:  clamp(3.5rem, 8vw, 6rem);
  --radius-sm:    8px;
  --radius:       14px;
  --radius-lg:    24px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(13,59,68,0.06);
  --shadow:    0 8px 24px rgba(13,59,68,0.1);
  --shadow-lg: 0 18px 48px rgba(13,59,68,0.18);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----------- Base ----------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-ink);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
input, textarea, select, button { font: inherit; }
/* Prevent iOS auto-zoom on form focus by ensuring inputs >= 16px */
input, textarea, select { font-size: max(16px, 1rem); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

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

/* ----------- Layout ----------- */
.container        { width: 100%; max-width: var(--w-max);       margin-inline: auto; padding-inline: var(--pad-x); }
.container-narrow { width: 100%; max-width: var(--w-text);      margin-inline: auto; padding-inline: var(--pad-x); }
.container-wide   { width: 100%; max-width: var(--w-text-wide); margin-inline: auto; padding-inline: var(--pad-x); }

section { padding-block: var(--section-pad); }
section.section-tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
section.bg-cream { background: var(--c-cream); }
section.bg-cream-deep { background: var(--c-cream-deep); }
section.bg-teal        { background: var(--c-teal); }
section.bg-purple      { background: linear-gradient(135deg, var(--c-purple) 0%, #5d4488 100%); }
section.bg-blue        { background: linear-gradient(140deg, #557e9b 0%, #3a6789 100%); }
section.bg-purple-blue { background: linear-gradient(135deg, var(--c-purple) 0%, var(--c-blue) 100%); }
section.bg-slate       { background: var(--c-slate); }

/* Any section with a dark background gets light text everywhere underneath —
   including .lead, body copy, and inline anchors. Avoids contrast bugs from
   relying on authors to remember .text-on-dark-muted on every paragraph. */
section.bg-teal,
section.bg-purple,
section.bg-blue,
section.bg-purple-blue,
section.bg-slate {
  color: var(--c-on-dark);
}
section.bg-teal h1, section.bg-teal h2, section.bg-teal h3, section.bg-teal h4,
section.bg-purple h1, section.bg-purple h2, section.bg-purple h3, section.bg-purple h4,
section.bg-blue h1, section.bg-blue h2, section.bg-blue h3, section.bg-blue h4,
section.bg-purple-blue h1, section.bg-purple-blue h2, section.bg-purple-blue h3, section.bg-purple-blue h4,
section.bg-slate h1, section.bg-slate h2, section.bg-slate h3, section.bg-slate h4 {
  color: var(--c-on-dark);
}
section.bg-teal p, section.bg-teal li, section.bg-teal .lead,
section.bg-purple p, section.bg-purple li, section.bg-purple .lead,
section.bg-blue p, section.bg-blue li, section.bg-blue .lead,
section.bg-purple-blue p, section.bg-purple-blue li, section.bg-purple-blue .lead,
section.bg-slate p, section.bg-slate li, section.bg-slate .lead {
  color: var(--c-on-dark-muted);
}
/* But explicit .text-on-dark wins (for emphasized white copy). */
section.bg-teal .text-on-dark,
section.bg-purple .text-on-dark,
section.bg-blue .text-on-dark,
section.bg-purple-blue .text-on-dark,
section.bg-slate .text-on-dark { color: var(--c-on-dark); }

.section-head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3rem); }
.section-eyebrow {
  font-family: var(--f-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-purple);
  margin-bottom: 0.75rem;
}
/* Larger / louder eyebrow variant — for "Author · Speaker · Coach" type labels.
   Constance asked for this to be prominent on the homepage. nowrap keeps the
   three labels on a single line; the clamp falls back gracefully on narrow
   viewports without breaking word groupings. */
.section-eyebrow--lg {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2.4vw, 1.85rem);
  letter-spacing: 0.14em;
  margin-bottom: 1.5rem;
  color: var(--c-purple);
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}
.section-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 0.75rem;
  margin: 1rem auto 1.5rem;
  color: var(--c-rose);
}
.section-divider::before, .section-divider::after {
  content: ''; flex: 0 0 60px; height: 1px; background: currentColor; opacity: 0.5;
}
.section-divider-dove {
  display: inline-block;
  width: 24px; height: 28px;
  background-color: var(--c-purple);
  -webkit-mask: url('../assets/icons/dove-mask.png') no-repeat center / contain;
          mask: url('../assets/icons/dove-mask.png') no-repeat center / contain;
}

/* ----------- Typography ----------- */
h1, .h1, h2, .h2 {
  font-family: var(--f-display);
  font-weight: 400;   /* Cinzel Decorative regular — matches the lighter weight shown in the brand guide */
  line-height: 1.1;
  color: var(--c-blue);   /* brand blue per Constance — H1 matches the script line below for an airy, cohesive hero */
  margin: 0 0 1rem;
  letter-spacing: 0.005em;
}
h1, .h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2, .h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }

h3, .h3 {
  font-family: var(--f-body);
  font-weight: 600;      /* Montserrat Semi Bold — matches brand guide subheading spec */
  font-size: clamp(1.125rem, 2.25vw, 1.375rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-purple);
  margin: 0 0 0.75rem;
}

h4, .h4 {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--c-purple);
  margin: 0 0 0.5rem;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--c-purple); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--c-blue); text-decoration: underline; }

.text-script { font-family: var(--f-script); font-weight: 400; }
.text-serif  { font-family: var(--f-serif); }
.text-italic { font-style: italic; }
.text-center { text-align: center; }
.text-muted  { color: var(--c-ink-muted); }
.text-on-dark { color: var(--c-on-dark); }
.text-on-dark-muted { color: var(--c-on-dark-muted); }

.lead {
  font-family: var(--f-serif);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.6;
  color: var(--c-ink-muted);
}

/* ----------- Header / Nav ----------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.site-header .container { position: relative; } /* containing block for mobile dropdown */
.nav-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.25rem;
}
.brand-link { display: flex; align-items: center; gap: 0.75rem; }
.brand-link img { height: clamp(60px, 7vw, 86px); width: auto; }
.brand-link .brand-name {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-purple);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  line-height: 1;
}
.brand-link .brand-sub {
  display: block;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--c-slate);
  text-transform: uppercase;
  margin-top: 0.25rem;
}
.brand-link:hover { text-decoration: none; }

.primary-nav ul {
  display: flex; gap: clamp(0.75rem, 2vw, 1.75rem);
  align-items: center;         /* vertically align anchors and dropdown button on same baseline */
  list-style: none; margin: 0; padding: 0;
}
.primary-nav > ul > li { display: flex; align-items: center; }
.primary-nav a {
  color: var(--c-purple);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-block: 0.35rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;        /* match dropdown toggle height + WCAG tap target */
}
.primary-nav a:hover { color: var(--c-purple); text-decoration: none; }
.primary-nav a.active::after,
.primary-nav a:hover::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--c-purple); border-radius: 1px;
}

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px;        /* WCAG 2.5.5 tap target */
  align-items: center; justify-content: center;
  color: var(--c-teal);
}
.nav-toggle svg { width: 26px; height: 26px; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--c-line);
    display: none;
    box-shadow: var(--shadow);
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; align-items: stretch; padding: 0.5rem var(--pad-x) 1rem; gap: 0; }
  .primary-nav a {
    padding: 0.9rem 0.5rem;
    display: block;
    border-bottom: 1px solid var(--c-line);
    min-height: 44px;
  }
  .primary-nav li:last-child a { border-bottom: 0; }
  .primary-nav a.active::after, .primary-nav a:hover::after { display: none; }
  .primary-nav a.active { color: var(--c-purple); background: var(--c-cream); border-radius: var(--radius-sm); }
  .brand-link .brand-sub { display: none; }
  .brand-link .brand-name { font-size: 0.95rem; }
}

/* ----------- Buttons ----------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.95rem 1.85rem;
  min-height: 44px;        /* WCAG 2.5.5 tap target */
  border-radius: 999px;
  font-family: var(--f-body); font-weight: 600;
  font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; border: 2px solid transparent;
  transition: all .2s var(--ease);
  text-decoration: none;
  line-height: 1;
  text-align: center;
}
@media (max-width: 480px) {
  .btn { padding: 0.95rem 1.4rem; font-size: 0.85rem; letter-spacing: 0.1em; }
  .btn-row .btn { flex: 1 1 auto; }    /* fill width on small screens */
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-primary   { background: var(--c-purple); color: var(--c-on-dark); }
.btn-primary:hover   { background: #5d4488;   color: var(--c-on-dark); }  /* deeper purple on hover, stays in the brand family */
.btn-secondary { background: transparent;     color: var(--c-purple); border-color: var(--c-purple); }
.btn-secondary:hover { background: var(--c-purple); color: var(--c-on-dark); }
.btn-light     { background: var(--c-on-dark);     color: var(--c-purple); }
.btn-light:hover     { background: var(--c-gold); color: var(--c-teal); }
.btn-ghost     { background: transparent;     color: var(--c-on-dark); border-color: var(--c-on-dark); }
.btn-ghost:hover     { background: var(--c-on-dark); color: var(--c-purple); }
.btn-lg        { padding: 1.15rem 2.25rem; font-size: 0.95rem; }

.btn-row { display: flex; gap: 0.875rem; flex-wrap: wrap; }
.btn-row.is-center { justify-content: center; }

/* ----------- Dropdown nav ----------- */
.primary-nav .nav-dropdown { position: relative; }
.primary-nav .nav-dropdown-toggle {
  background: none; border: 0; cursor: pointer;
  color: var(--c-purple);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0;
  display: inline-flex; align-items: center; gap: 0.4rem;
  position: relative;
  min-height: 44px;
}
.primary-nav .nav-dropdown-toggle .chevron {
  width: 11px; height: 11px;
  transition: transform .2s var(--ease);
  fill: currentColor;
}
.primary-nav .nav-dropdown[data-open="true"] .chevron { transform: rotate(180deg); }
.primary-nav .nav-dropdown-toggle:hover,
.primary-nav .nav-dropdown.is-active .nav-dropdown-toggle { color: var(--c-teal); }
.primary-nav .nav-dropdown.is-active .nav-dropdown-toggle::after {
  content: ''; position: absolute; left: 0; right: 20px; bottom: -2px;
  height: 2px; background: var(--c-purple); border-radius: 1px;
}
.primary-nav .nav-submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  min-width: 220px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  z-index: 110;
}
/* Invisible bridge that fills the visual gap between the Books toggle
   and the submenu, so the user can move the cursor down to a submenu
   item without losing the dropdown's :hover state mid-traverse. */
.primary-nav .nav-submenu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0; right: 0;
  height: 8px;
}
.primary-nav .nav-dropdown[data-open="true"] .nav-submenu {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Desktop: also open the Books submenu on hover (click still works) */
@media (min-width: 861px) {
  .primary-nav .nav-dropdown:hover .nav-submenu,
  .primary-nav .nav-dropdown:focus-within .nav-submenu {
    opacity: 1; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .primary-nav .nav-dropdown:hover .chevron,
  .primary-nav .nav-dropdown:focus-within .chevron {
    transform: rotate(180deg);
  }
}
.primary-nav .nav-submenu li { margin: 0; }
.primary-nav .nav-submenu a {
  display: block;
  padding: 0.65rem 1rem;
  color: var(--c-teal);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
}
.primary-nav .nav-submenu a:hover { background: var(--c-cream); color: var(--c-purple); text-decoration: none; }
.primary-nav .nav-submenu a.active { background: var(--c-cream); color: var(--c-purple); }
.primary-nav .nav-submenu {
  /* Override the parent .primary-nav ul flex-row layout so book items
     stack vertically (one above the other) instead of side by side. */
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  min-width: 200px;
}

@media (max-width: 860px) {
  .primary-nav .nav-dropdown-toggle {
    width: 100%; padding: 0.9rem 0.5rem;
    justify-content: space-between;
    text-align: left;
    border-bottom: 1px solid var(--c-line);
    color: var(--c-teal);
  }
  .primary-nav .nav-dropdown.is-active .nav-dropdown-toggle::after { display: none; }
  .primary-nav .nav-submenu {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: var(--c-cream);
    padding: 0;
    display: none;
    margin: 0;
    min-width: 0;
  }
  .primary-nav .nav-dropdown[data-open="true"] .nav-submenu { display: block; }
  .primary-nav .nav-submenu a {
    padding: 0.75rem 1.75rem;
    border-bottom: 1px solid var(--c-line);
  }
  .primary-nav .nav-submenu li:last-child a { border-bottom: 0; }
}

/* ----------- Email opt-in form ----------- */
.email-optin {
  background: var(--c-cream-deep);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.email-optin.is-dark { background: var(--c-teal); color: var(--c-on-dark); }
.email-optin.is-dark h2, .email-optin.is-dark h3 { color: var(--c-on-dark); }
.email-optin.is-dark .email-optin-note { color: var(--c-on-dark-muted); }
.email-optin h2, .email-optin h3 { margin-bottom: 0.75rem; }
.email-optin .email-optin-lead {
  font-family: var(--f-serif);
  font-size: 1.1rem;
  max-width: 540px;
  margin: 0 auto 1.5rem;
}
.email-optin-form {
  display: flex;
  gap: 0.5rem;
  max-width: 480px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.email-optin-form input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  padding: 0.95rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  font-family: var(--f-body);
  color: var(--c-ink);
  background: #fff;
  min-height: 44px;
}
.email-optin-form input[type="email"]:focus {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
  border-color: var(--c-blue);
}
.email-optin-form button { flex: 0 0 auto; }
.email-optin-note {
  font-size: 0.78rem;
  color: var(--c-ink-muted);
  margin: 1rem auto 0;
  max-width: 460px;
}
.email-optin-success {
  display: none;
  text-align: center;
  font-family: var(--f-serif);
  font-size: 1.1rem;
  color: var(--c-teal);
  padding: 1.25rem 1.5rem;
  background: rgba(252, 206, 119, 0.25);
  border-radius: var(--radius);
  margin: 0 auto;
  max-width: 480px;
}
.email-optin-success.is-shown { display: block; }
.email-optin.is-dark .email-optin-success {
  background: rgba(252, 206, 119, 0.15);
  color: var(--c-gold);
}

/* ----------- Contact form ----------- */
.contact-form {
  display: grid;
  gap: 1.25rem;
  max-width: 720px;
  margin-inline: auto;
}
.form-row {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-slate);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--c-ink);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  min-height: 44px;
  width: 100%;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.contact-form textarea { resize: vertical; min-height: 160px; line-height: 1.55; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--c-gold);
  outline-offset: 1px;
  border-color: var(--c-blue);
}
.contact-form input:invalid:not(:placeholder-shown),
.contact-form textarea:invalid:not(:placeholder-shown) {
  border-color: rgba(220, 70, 70, 0.5);
}
.form-note {
  font-size: 0.85rem;
  color: var(--c-ink-muted);
  margin: 0;
}
.form-actions { display: flex; justify-content: flex-end; }
.form-success {
  display: none;
  padding: 1.25rem 1.5rem;
  background: rgba(252, 206, 119, 0.25);
  border-radius: var(--radius);
  color: var(--c-teal);
  font-family: var(--f-serif);
  text-align: center;
}
.contact-form.is-sent .form-success { display: block; }
.contact-form.is-sent > :not(.form-success) { display: none; }

/* ----------- Direct-contact cards on the contact page ----------- */
.contact-direct-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  max-width: 720px;
  margin: 2rem auto 0;
}
@media (min-width: 640px) {
  .contact-direct-grid { grid-template-columns: repeat(3, 1fr); }
}
.contact-direct-card {
  display: block;
  padding: 1.25rem 1.5rem;
  background: var(--c-cream);
  border-radius: var(--radius);
  text-align: center;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--c-line);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.contact-direct-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--c-purple);
}
.contact-direct-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-purple);
  margin: 0 0 0.4rem;
}
.contact-direct-value {
  font-family: var(--f-serif);
  font-size: 1.05rem;
  color: var(--c-ink);
  margin: 0;
}

/* Variant: opt-in side-by-side with playlist QR */
.email-optin--with-qr {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  text-align: left;
  align-items: center;
}
.email-optin--with-qr .email-optin-form { margin: 0; justify-content: flex-start; }
.email-optin--with-qr .email-optin-lead { margin-left: 0; margin-right: 0; }
.email-optin--with-qr .email-optin-note { margin-left: 0; }
@media (min-width: 760px) {
  .email-optin--with-qr { grid-template-columns: 1.2fr 0.8fr; }
}
.playlist-qr {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.playlist-qr img {
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: var(--radius);
  background: #fff;
  padding: 0.75rem;
  box-shadow: 0 6px 24px rgba(13, 59, 68, 0.12);
}
.playlist-qr-caption {
  margin-top: 0.85rem;
  font-family: var(--f-script);
  font-size: 1.15rem;
  color: var(--c-purple);
}

/* ----------- Book placeholder (Dear Beloved Scribe hero) ----------- */
.book-placeholder {
  aspect-ratio: 2/3;
  background: linear-gradient(135deg, var(--c-purple) 0%, #5d4488 50%, var(--c-teal) 100%);
  border-radius: 6px 14px 14px 6px;
  box-shadow: var(--shadow-lg), -6px 0 12px rgba(0,0,0,0.18);
  position: relative;
  overflow: hidden;
  max-width: 280px;
  margin-inline: auto;
  color: var(--c-on-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2.5rem 1.75rem;
  text-align: center;
}
.book-placeholder::before {
  content: '';
  position: absolute;
  left: 6%;
  top: 0; bottom: 0;
  width: 3px;
  background: rgba(0,0,0,0.25);
}
.book-placeholder::after {
  content: '';
  position: absolute;
  inset: 1.25rem;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px;
  pointer-events: none;
}
.book-placeholder .title {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
}
.book-placeholder .subtitle {
  font-family: var(--f-script);
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--c-gold);
  line-height: 1.2;
  position: relative;
  z-index: 1;
}

/* ----------- Hero portrait (homepage) ----------- */
.hero-portrait {
  position: relative;
  max-width: 480px;
  margin-inline: auto;
}
.hero-portrait img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 3/4;
  object-fit: cover;
}
.hero-portrait::after {
  content: '';
  position: absolute;
  inset: -12px;
  border: 2px solid var(--c-purple);
  border-radius: var(--radius-lg);
  z-index: -1;
  opacity: 0.35;
  transform: translate(12px, 12px);
}

/* ----------- Homepage bio section ----------- */
.bio-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 760px) {
  .bio-grid { grid-template-columns: 0.85fr 1.15fr; }
}
.bio-photo {
  position: relative;
  max-width: 420px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.bio-photo img { aspect-ratio: 4/5; object-fit: cover; width: 100%; height: auto; }
.bio-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(13, 59, 68, 0.12) 100%);
  pointer-events: none;
}
.bio-text h2 { margin-bottom: 1rem; }
.bio-text p { font-family: var(--f-serif); font-size: 1.075rem; line-height: 1.7; }
.bio-honors {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: 1.75rem;
}
.bio-honor {
  background: var(--c-cream-deep);
  color: var(--c-teal);
  font-family: var(--f-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
}

/* ----------- Multi-book / contributor grid (Dear Beloved Scribe) ----------- */
.contributors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.35rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}
.contributors-grid li {
  font-family: var(--f-serif);
  font-size: 0.98rem;
  color: var(--c-ink);
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--c-line);
}
.contributors-grid li.is-feature {
  font-weight: 700;
  color: var(--c-purple);
  background: var(--c-cream);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  border-bottom: 0;
}
.book-feature-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.75rem;
}
.book-feature-list li {
  position: relative;
  padding-left: 2rem;
  font-family: var(--f-serif);
  font-size: 1.075rem;
  line-height: 1.55;
}
.book-feature-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.15em;
  width: 1.25rem; height: 1.4rem;
  background-color: var(--c-purple);
  -webkit-mask: url('../assets/icons/dove-mask.png') no-repeat center / contain;
          mask: url('../assets/icons/dove-mask.png') no-repeat center / contain;
}
/* White doves on dark sections — matches the actual back cover styling */
.bg-purple .book-feature-list li,
.bg-teal .book-feature-list li,
.bg-slate .book-feature-list li { color: var(--c-on-dark); }
.bg-purple .book-feature-list li::before,
.bg-teal .book-feature-list li::before,
.bg-slate .book-feature-list li::before { background-color: #fff; }

/* Plain-bullet variant — same layout as .book-feature-list, classic disc bullets.
   Used outside the Resurrected Worth context where the dove iconography is reserved
   as her book's trademark. */
.plain-feature-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.75rem;
}
.plain-feature-list li {
  position: relative;
  padding-left: 1.5rem;
  font-family: var(--f-serif);
  font-size: 1.075rem;
  line-height: 1.55;
}
.plain-feature-list li::before {
  content: '';
  position: absolute;
  left: 0.35rem; top: 0.65em;
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  background: var(--c-purple);
}
.plain-feature-list.cols-2 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .plain-feature-list.cols-2 { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
}

/* ----------- Cycling photo gallery (pure CSS crossfade) -----------
   6 photos × 5s visible + 1s crossfade = 30s loop. Each child fades in,
   stays for 5s, fades out, then waits for the carousel to come back
   around. Animation delays are evenly spaced (5s apart, negative so the
   carousel is mid-cycle on first paint).

   width:100% + max-width + min-height keep the box rendered even when
   inside grid cells whose row height collapses (e.g. when align-items
   is center and the sibling text is shorter than expected). aspect-ratio
   handles the proportional height once width is computed. */
.photo-cycle {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 320px;
  aspect-ratio: 4/5;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--c-cream-deep);
}
.photo-cycle img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: photoCycle 30s ease-in-out infinite;
}
.photo-cycle img:nth-child(1) { animation-delay:   0s; opacity: 1; }
.photo-cycle img:nth-child(2) { animation-delay:  -5s; }
.photo-cycle img:nth-child(3) { animation-delay: -10s; }
.photo-cycle img:nth-child(4) { animation-delay: -15s; }
.photo-cycle img:nth-child(5) { animation-delay: -20s; }
.photo-cycle img:nth-child(6) { animation-delay: -25s; }
@keyframes photoCycle {
  /* 6 frames × 16.667% each. Visible stay window 15% (≈4.5s) with a brief
     fade between slides. */
  0%       { opacity: 1; }
  15%      { opacity: 1; }
  16.667%  { opacity: 0; }
  98.333%  { opacity: 0; }
  100%     { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-cycle img { animation: none; }
  .photo-cycle img:nth-child(1) { opacity: 1; }
  .photo-cycle img:not(:nth-child(1)) { display: none; }
}
.photo-cycle::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(13, 59, 68, 0.15));
  pointer-events: none;
}

/* ----------- Nature break (full-bleed photo with quote overlay) ----------- */
.nature-break {
  position: relative;
  min-height: clamp(280px, 45vw, 480px);
  background-size: cover;
  background-position: center;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem);
}
.nature-break::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(13, 59, 68, 0.55) 0%, rgba(122, 92, 168, 0.45) 100%);
}
.nature-break > * { position: relative; z-index: 1; }
.nature-break-quote {
  font-family: var(--f-script);
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  color: #fff;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
  max-width: 820px;
  margin: 0 auto;
}
.nature-break-quote cite {
  display: block;
  font-family: var(--f-body);
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 1.5rem;
  color: var(--c-gold);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/* ----------- Featured quote graphic (uses pre-designed SM graphics) ----------- */
.featured-quote-graphic {
  max-width: 340px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.featured-quote-graphic img { width: 100%; height: auto; display: block; }

/* ----------- Social gallery (side-by-side SM graphics) ----------- */
.social-gallery {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: 1fr;
  max-width: 1080px;
  margin-inline: auto;
}
@media (min-width: 760px) {
  .social-gallery { grid-template-columns: repeat(3, 1fr); }
}
.social-gallery-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #fff;
}
.social-gallery-item img { width: 100%; height: auto; display: block; }

/* ----------- Back cover section (Resurrected Worth book page) ----------- */
.back-cover-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 880px) {
  .back-cover-grid { grid-template-columns: 1.1fr 0.9fr; }
}
/* Text-only variant: book cover is already shown at the top of the page. */
.back-cover-grid--text-only { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; }
@media (min-width: 880px) {
  .back-cover-grid--text-only { grid-template-columns: 1fr; }
}
.back-cover-image {
  position: relative;
  max-width: 580px;
  margin-inline: auto;
}
.back-cover-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.back-cover-text .lead {
  font-family: var(--f-script);
  font-style: normal;
  color: var(--c-gold);
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  line-height: 1.2;
  margin-bottom: 1.5rem;
}
.back-cover-text p { color: var(--c-on-dark); font-family: var(--f-serif); font-size: 1.075rem; line-height: 1.7; }
.back-cover-text h3 {
  color: var(--c-gold);
  font-family: var(--f-display);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 1.25rem;
  margin-top: 1.5rem;
}
.back-cover-text .closing-line {
  font-family: var(--f-script);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  color: var(--c-gold);
  line-height: 1.2;
  margin-top: 1.75rem;
  font-style: normal;
}

/* ----------- Hero (generic) ----------- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 9vw, 7rem);
  background: linear-gradient(180deg, var(--c-cream) 0%, #fff 100%);
}
/* Large RW mark anchored to the upper-left of a hero — sits in the
   hero's existing top padding so it does not push content down. The
   left edge aligns with the container's content-area left edge (where
   hero text begins), so on wide viewports the logo doesn't drift into
   the empty side margin. Height is constrained so its bottom edge
   stays within the hero's top padding (max 7rem) and never overlaps
   the eyebrow. */
.hero-rw-logo {
  /* Temporarily hidden 2026-05-12 per Constance — the navbar logo now
     carries the same visual weight site-wide. Keep markup + class so
     it can be revived without editing every page. */
  display: none;
  position: absolute;
  top: clamp(0.25rem, 0.5vw, 0.5rem);
  left: max(var(--pad-x), calc(50vw - var(--w-max) / 2 + var(--pad-x)));
  height: clamp(50px, 5.5vw, 70px);
  width: auto;
  z-index: 1;
  pointer-events: none;
}
.hero-dark {
  background: radial-gradient(circle at 30% 0%, var(--c-teal-soft) 0%, var(--c-teal) 70%);
  color: var(--c-on-dark);
}
.hero-dark h1, .hero-dark h2 { color: var(--c-on-dark); }
.hero-grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .hero-grid.has-image { grid-template-columns: 1fr 1.1fr; }
  /* Flip the visual layout: image on the right, text on the left.
     Uses grid `order` so the DOM stays image-first for screen readers
     and SEO, and the CSS does the visual reversal. */
  .hero-grid.has-image.is-reversed > :first-child { order: 2; }
  .hero-grid.has-image.is-reversed { grid-template-columns: 1.1fr 1fr; }
}

/* ----------- Pull quotes ----------- */
.pull-quote {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.55;
  color: var(--c-teal);   /* deep brand teal — matches the closing-section bg color on the book page */
  text-align: center;
  margin-inline: auto;
  max-width: 880px;
  position: relative;
}
.pull-quote.is-light { color: var(--c-on-dark); }
.pull-quote--script {
  font-family: var(--f-script);
  font-style: normal;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.2;
}
.pull-quote cite {
  display: block;
  font-family: var(--f-body);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin-top: 1.5rem;
}
.pull-quote.is-light cite { color: var(--c-on-dark-muted); }
/* Decorative quote marks — matches the SM graphics style */
.pull-quote::before {
  content: '\201C';
  display: block;
  font-family: var(--f-display);
  font-style: normal;
  font-size: 4.5em;
  line-height: 0.4;
  color: var(--c-blue);
  opacity: 0.5;
  margin-bottom: 0.5rem;
  text-align: center;
}
.pull-quote.is-light::before { color: var(--c-gold); opacity: 0.7; }
.pull-quote--script::before { font-size: 2.5em; }

/* ----------- Scripture callout ----------- */
.scripture {
  background: var(--c-cream-deep);
  border-left: 4px solid var(--c-gold);
  padding: 2rem clamp(1.25rem, 4vw, 2.5rem);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--c-teal);
  max-width: 740px;
  margin-inline: auto;
}
.scripture .ref {
  display: block;
  font-style: normal;
  font-family: var(--f-body);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-slate);
  margin-top: 1rem;
  font-weight: 600;
}

/* ----------- Dove-bulleted list ----------- */
.dove-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.625rem;
}
.dove-list.cols-2 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .dove-list.cols-2 { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
}
.dove-list li {
  position: relative;
  padding-left: 2.25rem;
  line-height: 1.5;
  color: var(--c-ink);
}
.dove-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.1em;
  width: 1.35rem; height: 1.5rem;
  background-color: var(--c-purple);
  -webkit-mask: url('../assets/icons/dove-mask.png') no-repeat center / contain;
          mask: url('../assets/icons/dove-mask.png') no-repeat center / contain;
}
.dove-list.on-dark li { color: var(--c-on-dark); }
.dove-list.on-dark li::before { background-color: var(--c-gold); }

/* ----------- Awards grid (Resurrected Worth page) ----------- */
.awards-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 820px) {
  .awards-grid { grid-template-columns: repeat(2, 1fr); }
}
.award-card {
  background: #fff;
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  border: 1px solid var(--c-line);
}
.award-card .cert-img {
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
  border: 1px solid var(--c-line);
  background: var(--c-cream);
}
.award-card h3 { color: var(--c-teal); font-size: 1.125rem; }
.award-card .award-meta {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-purple);
  margin-bottom: 0.35rem;
}
.award-card .award-category {
  display: inline-block;
  background: var(--c-cream-deep);
  color: var(--c-teal);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin: 0.15rem 0.3rem 0.15rem 0;
}

/* ----------- Hero seal stack ----------- */
.seal-stack {
  display: flex; justify-content: center; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  flex-wrap: wrap;
}
.seal-stack img {
  height: clamp(120px, 18vw, 200px);
  width: auto;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.25));
}

/* ----------- Reviews (hover-to-expand) ----------- */
.reviews-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }

.review-card {
  --collapsed-h: 240px;
  position: relative;
  background: var(--c-blue);
  color: var(--c-on-dark);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem 1.25rem;
  border: 1px solid var(--c-blue);
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
  overflow: hidden;
  height: var(--collapsed-h);
  display: flex; flex-direction: column;
}
.review-card.is-open {
  box-shadow: var(--shadow-lg);
  height: auto;
}
.review-card .review-stars {
  color: var(--c-gold);
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  margin-bottom: 0.75rem;
}
.review-card .review-title {
  font-family: var(--f-display);
  font-size: 1.125rem;
  color: var(--c-on-dark);
  font-weight: 700;
  margin-bottom: 0.5rem;
  line-height: 1.25;
}
.review-card .review-body {
  font-family: var(--f-serif);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--c-on-dark);
  flex: 1;
}
.review-card .review-attr {
  margin-top: 1rem;
  font-family: var(--f-body);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-on-dark-muted);
}
.review-card .review-attr a {
  color: var(--c-gold);
  border-bottom: 1px solid rgba(252, 206, 119, 0.5);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.review-card .review-attr a:hover {
  color: #fff;
  border-color: #fff;
}
.review-card::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 80px;
  background: linear-gradient(180deg, rgba(102,144,177,0) 0%, var(--c-blue) 100%);
  pointer-events: none;
  transition: opacity .25s var(--ease);
}
.review-card.is-open::after { opacity: 0; }
/* Placeholder ("More reviews coming soon") card — no Read more pill,
   no fade overlay needed since there is no truncated content. */
.review-card.is-placeholder {
  height: auto;
}
.review-card.is-placeholder::after { display: none; }
.review-card .review-expand {
  position: absolute; right: 0.875rem; bottom: 0.5rem;
  z-index: 2;   /* sit above the blue fade ::after overlay */
  font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--c-teal); font-weight: 700;
  background: var(--c-gold);
  padding: 0.4rem 0.75rem; border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: background .2s var(--ease), box-shadow .2s var(--ease), transform .15s var(--ease);
}
.review-card .review-expand:hover {
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

/* ----------- Coaching framework section ----------- */
.framework-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 880px) {
  .framework-grid { grid-template-columns: 0.9fr 1.1fr; }
}
.framework-image img {
  max-width: 460px;
  margin-inline: auto;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.25));
}
.framework-steps {
  list-style: none;
  padding: 0; margin: 0;
  display: grid; gap: 1rem;
}
.framework-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.25rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.framework-step:last-child { border-bottom: 0; }
.framework-step .step-letter {
  font-family: var(--f-display);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 0.9;
  color: var(--c-gold);
  font-weight: 900;
  width: 3.25rem;
}
.framework-step h3 {
  color: var(--c-on-dark);
  letter-spacing: 0.18em;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}
.framework-step p {
  color: var(--c-on-dark-muted);
  margin: 0;
  font-family: var(--f-serif);
  font-size: 1.05rem;
  line-height: 1.55;
}

/* ----------- Pricing cards ----------- */
.pricing-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }

.price-card {
  background: var(--c-cream-deep);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2rem) clamp(1.25rem, 3vw, 1.5rem);
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.price-card.is-featured {
  background: var(--c-teal); color: var(--c-on-dark);
  border-color: var(--c-teal);
  box-shadow: var(--shadow-lg);
}
.price-card.is-featured h3 { color: var(--c-on-dark); }
.price-card.is-featured .price-label { color: var(--c-gold); }
.price-card.is-featured .price-amount { color: var(--c-on-dark); }
.price-card.is-featured .price-unit { color: var(--c-on-dark-muted); }
.price-card.is-featured .feature-list li { color: var(--c-on-dark); }
.price-card.is-featured .feature-list li::before { background-color: var(--c-gold); }

.price-tag-featured {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--c-gold); color: var(--c-teal);
  font-family: var(--f-body);
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 700;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
}

.price-label {
  font-family: var(--f-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-blue);   /* per Constance — lighter brand blue. WCAG note: 3.39:1 on white; passes AA-large only at this size. */
  margin-bottom: 0.5rem;
  font-weight: 700;
}
.price-card h3 {
  font-family: var(--f-display);
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-bottom: 0.875rem;
}
.price-amounts { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.price-amount { font-family: var(--f-display); font-size: 2rem; font-weight: 700; color: var(--c-teal); }
.price-unit { font-size: 0.85rem; color: var(--c-ink-muted); }
.price-amount-alt {
  font-size: 0.85rem; color: var(--c-ink-muted);
  margin-bottom: 1.25rem;
}
.price-card.is-featured .price-amount-alt { color: var(--c-on-dark-muted); }
.price-desc {
  font-family: var(--f-serif);
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 1.25rem;
}
.feature-list {
  list-style: none; padding: 0; margin: 0 0 1.5rem;
  display: grid; gap: 0.5rem;
}
.feature-list li {
  position: relative; padding-left: 1.75rem;
  font-size: 0.95rem; line-height: 1.45;
}
.feature-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.15em;
  width: 1rem; height: 1.15rem;
  background-color: var(--c-blue);
  -webkit-mask: url('../assets/icons/dove-mask.png') no-repeat center / contain;
          mask: url('../assets/icons/dove-mask.png') no-repeat center / contain;
}
.price-card .btn { margin-top: auto; }

/* ----------- Approach pill list (Trauma-informed Coaching) ----------- */
.approach-pills {
  display: flex; flex-wrap: wrap; gap: 0.625rem;
  justify-content: center;
  margin-top: 1.5rem;
}
.approach-pills li {
  list-style: none;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  color: var(--c-teal);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

/* ----------- Heart CTA buttons (coaching page) ----------- */
.heart-cta-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 760px) { .heart-cta-grid { grid-template-columns: repeat(3, 1fr); } }

.heart-cta {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform .2s var(--ease);
}
.heart-cta:hover { transform: translateY(-4px); text-decoration: none; }
.heart-cta .heart-img-wrap {
  position: relative;
  width: clamp(120px, 18vw, 160px);
  height: clamp(120px, 18vw, 160px);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  filter: drop-shadow(0 8px 20px rgba(220,30,30,0.3));
}
.heart-cta .heart-img-wrap img { width: 100%; height: 100%; object-fit: contain; }
.heart-cta h3 {
  color: var(--c-teal);
  font-family: var(--f-body);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.heart-cta p { color: var(--c-ink-muted); font-size: 0.95rem; max-width: 260px; margin: 0 auto; }

/* ----------- Testimony / journey copy ----------- */
.testimony p {
  font-family: var(--f-serif);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--c-ink);
}
.testimony p:first-of-type::first-letter {
  font-family: var(--f-display);
  font-size: 3.5rem;
  line-height: 0.9;
  float: left;
  padding: 0.25rem 0.5rem 0 0;
  color: var(--c-purple);
}

/* ----------- "For You" checklist ----------- */
.foryou-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0.875rem;
  max-width: 640px; margin-inline: auto;
}
.foryou-list li {
  display: flex; align-items: flex-start; gap: 0.875rem;
  padding: 1rem 1.25rem;
  background: var(--c-purple);
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--f-serif);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--c-on-dark);
  box-shadow: 0 2px 8px rgba(74, 56, 115, 0.12);
}
.foryou-list li::before {
  content: '';
  flex: 0 0 auto;
  width: 1.35rem; height: 1.5rem;
  margin-top: 0.05rem;
  background-color: #fff;
  -webkit-mask: url('../assets/icons/dove-mask.png') no-repeat center / contain;
          mask: url('../assets/icons/dove-mask.png') no-repeat center / contain;
}

/* ----------- Disclaimer / cancellation accordion ----------- */
.disclosure {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.disclosure summary {
  font-family: var(--f-body);
  font-weight: 600;
  color: var(--c-teal);
  cursor: pointer;
  font-size: 1rem;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::after {
  content: '+';
  font-size: 1.5rem; line-height: 1;
  color: var(--c-blue);
  transition: transform .2s var(--ease);
}
.disclosure[open] summary::after { content: '–'; }
.disclosure[open] summary { margin-bottom: 0.75rem; }
.disclosure p { font-family: var(--f-serif); font-size: 1rem; line-height: 1.55; color: var(--c-ink-muted); }
.disclosure p:last-child { margin-bottom: 0; }

/* ----------- Playlist / QR card ----------- */
.qr-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  background: var(--c-cream);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}
@media (min-width: 720px) {
  .qr-card { grid-template-columns: auto 1fr; text-align: left; }
}
.qr-placeholder {
  width: 160px; height: 160px;
  background: repeating-conic-gradient(var(--c-teal) 0% 25%, #fff 0% 50%) 50% / 24px 24px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  margin-inline: auto;
  position: relative;
}
.qr-placeholder::after {
  content: 'QR';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.85);
  font-family: var(--f-body); font-weight: 700;
  color: var(--c-teal); letter-spacing: 0.15em;
  border-radius: var(--radius-sm);
  margin: 30%;
}

/* ----------- Book hero block (resurrected-worth) ----------- */
.book-hero-grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 880px) {
  .book-hero-grid { grid-template-columns: 1.05fr 0.95fr; }
}
.book-cover-stage {
  position: relative;
  display: flex; justify-content: center;
  padding: 1rem 0;
  /* Cap the stage at the book width so floating seal coordinates land
     inside the book artwork, not in the empty grid column beside it. */
  max-width: 320px;
  margin-inline: auto;
}
.book-cover-stage img.book {
  max-width: 320px;
  width: 100%;
  border-radius: 4px;
  box-shadow:
    0 24px 48px rgba(0,0,0,0.35),
    -8px 0 16px rgba(0,0,0,0.2);
  transform: rotate(-2deg);
  transition: transform .4s var(--ease);
}
.book-cover-stage img.book:hover { transform: rotate(0deg) scale(1.02); }
.book-cover-stage .floating-seal {
  position: absolute;
  width: clamp(55px, 10vw, 95px);
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.3));
  pointer-events: none;
}
/* Winner seal sits in the lower-right of the cover but above the
   "CONSTANCE ANDRÉ" author line at the bottom. Stage is capped at
   book width, so right%/bottom% are relative to the book artwork. */
.book-cover-stage .floating-seal.is-winner { right: 3%; bottom: 11%; }
.book-cover-stage .floating-seal.is-finalist { left: 5%; top: 5%; }

/* ----------- Testimonials placeholder ----------- */
.testimonials-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }

/* ----------- Site footer ----------- */
.site-footer {
  background: var(--c-teal);
  color: var(--c-on-dark);
  padding-block: 3rem 2rem;
}
.site-footer a { color: var(--c-on-dark-muted); }
.site-footer a:hover { color: var(--c-gold); text-decoration: none; }
.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  align-items: start;
  margin-bottom: 2.5rem;
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.footer-brand img {
  height: clamp(100px, 12vw, 150px);
  width: auto;
  margin-bottom: 0;
  flex-shrink: 0;
}
.footer-brand p {
  color: var(--c-on-dark-muted);
  font-family: var(--f-serif);
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: 360px;
  margin: 0;
}

/* Footer "Connect" column — inline SVG icon + text label per row.
   Scoped via .footer-col .social-icons so it overrides the default
   .footer-col ul grid layout. */
.footer-col .social-icons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.footer-col .social-icons a {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--c-on-dark-muted);
  transition: color .2s var(--ease);
}
.footer-col .social-icons a:hover {
  color: var(--c-gold);
  text-decoration: none;
}
.footer-col .social-icons svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: block;
}
.footer-col h4 {
  color: var(--c-gold);
  font-family: var(--f-body);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
  font-size: 0.85rem; color: var(--c-on-dark-muted);
}
.footer-bottom a { font-size: inherit; }

/* ----------- Decorative chapter icon divider ----------- */
.chapter-divider {
  display: flex; justify-content: center; align-items: center;
  margin-block: clamp(2rem, 5vw, 3.5rem);
}
.chapter-divider img { width: clamp(60px, 8vw, 90px); opacity: 0.7; }

/* ----------- Utility helpers ----------- */
.mt-0 { margin-top: 0 !important; }
.mt-sm { margin-top: 0.75rem; }
.mt-md { margin-top: 1.5rem; }
.mt-lg { margin-top: 2.5rem; }
.mb-0 { margin-bottom: 0 !important; }
.mb-md { margin-bottom: 1.5rem; }
.mb-lg { margin-bottom: 2.5rem; }

.hide-mobile { display: initial; }
@media (max-width: 640px) { .hide-mobile { display: none; } }

/* ----------- Hero variant for coaching page ----------- */
.coaching-hero {
  position: relative;
  background: var(--c-cream);
  overflow: hidden;
}
.coaching-hero .hero-grid { align-items: center; }
.coaching-hero .tagline {
  font-family: var(--f-script);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  color: var(--c-purple);
  line-height: 1.2;
  margin-bottom: 1.25rem;
}
.coaching-hero h1 .em-title {
  display: block;
  white-space: nowrap;
  /* Slightly smaller than the global h1 clamp so "What if I told you…" stays on
     one line in the narrowed text column. Falls back to allowing wrap on tiny
     viewports where even the smaller size can't fit. */
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
}
@media (max-width: 560px) {
  .coaching-hero h1 .em-title { white-space: normal; }
}
.coaching-hero h1 .em-line {
  display: block; font-family: var(--f-script); color: var(--c-purple); font-weight: 400;
  font-size: 0.65em; line-height: 1.1; margin-top: 0.25rem;
}
.coaching-hero .hero-heart {
  max-width: 360px; margin-inline: auto;
  filter: drop-shadow(0 18px 40px rgba(220, 30, 30, 0.3));
  animation: heart-pulse 4s var(--ease) infinite;
}
@keyframes heart-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .coaching-hero .hero-heart { animation: none; }
}

/* ----------- Section anchor offset for sticky header ----------- */
section[id] { scroll-margin-top: 80px; }
/* On pages that carry the in-page section-nav (coaching.html), the sticky
   header + sticky section-nav stack to ~114px. Clear both so anchor jumps
   land the section title below the nav rather than hidden behind it. */
body:has(.section-nav) section[id] { scroll-margin-top: 130px; }

/* ----------- Skip-to-content link (a11y) ----------- */
.skip-link {
  position: absolute;
  top: -100px; left: 0.5rem;
  background: var(--c-teal); color: var(--c-on-dark);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  z-index: 1000;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0.5rem; text-decoration: none; color: var(--c-on-dark); outline: 3px solid var(--c-gold); outline-offset: 2px; }

/* ----------- Focus styles (a11y) ----------- */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--c-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ----------- Back-to-top floating button ----------- */
.to-top {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--c-teal);
  color: var(--c-on-dark);
  border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  opacity: 0; pointer-events: none;
  transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), background .2s var(--ease);
  z-index: 90;
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.to-top:hover { background: var(--c-purple); transform: translateY(-2px); }
.to-top svg { width: 20px; height: 20px; }

/* ----------- Scroll-reveal animations -----------
   Inverted model: content is ALWAYS visible by default. JS opts-in elements
   that are below the fold at first paint by adding .is-pending, which hides
   them until the IntersectionObserver removes the class. If JS fails, runs
   late, or fires at the wrong scroll position, content is never invisible.
   The transition only runs on the .is-pending → visible direction, so the
   initial hide is instant (no flash of content fading out). */
[data-reveal] {
  opacity: 1;
  transform: none;
}
[data-reveal]:not(.is-pending) {
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-pending {
  opacity: 0;
  transform: translateY(24px);
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal].is-pending { opacity: 1; transform: none; }
}

/* ----------- Anchored mini-nav (coaching page) ----------- */
.section-nav {
  position: sticky;
  /* Track the live navbar height: logo height + 0.5rem total padding-block.
     Stays flush against the bottom of .site-header across viewport widths. */
  top: calc(clamp(60px, 7vw, 86px) + 0.5rem);
  z-index: 50;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-line);
  border-top: 1px solid var(--c-line);
}
.section-nav-inner {
  display: flex; gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.6rem 0;
}
.section-nav-inner::-webkit-scrollbar { display: none; }
.section-nav-inner a {
  flex: 0 0 auto;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-slate);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.section-nav-inner a:hover {
  background: var(--c-cream); color: var(--c-teal); text-decoration: none;
}
@media (max-width: 860px) { .section-nav { display: none; } }