/* ============================================================
   HEATHER FLYNN — SHARED STYLESHEET
   Linked by every page. Design tokens + all shared components.
   ============================================================ */

/* ============================================================
   BRAND TOKENS
   ============================================================ */
:root {
  --cream:    #FFF6EA;  /* page background */
  --offwhite: #FFFDF7;  /* card & panel surface */
  --butter:   #FFF7D1;  /* soft warm highlight */
  --taupe:    #D0C5BF;  /* borders & dividers */
  --plum:     #532E47;  /* PRIMARY accent */
  --mauve:    #946E88;  /* secondary accent */
  --sage:     #9D9F7A;  /* soft accent / kickers */
  --olive:    #535B46;  /* deep accent band/footer */
  --body:     #1E1A18;  /* body text */
  --black:    #000000;  /* max-contrast text */

  --sage-tint:  #ECEDE2;  /* pale sage wash */
  --mauve-tint: #F3EBF0;  /* pale mauve wash */
  --plum-dark:  #3f2238;  /* button hover */
  --olive-dark: #444c39;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", system-ui, -apple-system, sans-serif;

  --maxw: 1240px;
  --gutter: 24px;
  --radius: 6px;
  --radius-img: 14px;

  --section-pad: 120px;
  --gutter-y: 18px;   /* vertical gap between stacked boxed panels */
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-y: scroll;   /* always reserve the vertical scrollbar so page width is identical on every page */
}

body {
  margin: 0;
  overflow-x: clip;     /* clip the scrollbar-width overflow from 100vw full-bleed bands (keeps the nav/container from shifting) */
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.7;
  color: var(--body);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--black);
  line-height: 1.15;
  margin: 0;
  letter-spacing: 0.01em;
}

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

a { color: var(--mauve); text-decoration: none; }
a:hover { color: var(--plum); }

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

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-narrow {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Boxed system: sections are spacing wrappers; content lives in panels */
section { padding: var(--gutter-y) 0; }
main > section:first-child { padding-top: 30px; }
main > section:last-child  { padding-bottom: 42px; }

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

/* Section background utilities */
.bg-cream    { background: var(--cream); }
.bg-offwhite { background: var(--offwhite); }
.bg-butter   { background: var(--butter); }
.bg-sage     { background: var(--sage-tint); }
.bg-plum     { background: var(--plum);  color: var(--cream); }
.bg-olive    { background: var(--olive); color: var(--cream); }
.bordered-top    { border-top: 1px solid var(--taupe); }
.bordered-bottom { border-bottom: 1px solid var(--taupe); }

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 18px;
}
.section-heading {
  font-size: clamp(2rem, 4vw, 2.9rem);
  margin-bottom: 24px;
  color: var(--plum);
}
.lead { font-size: 1.18rem; }
.measure { max-width: 65ch; }
.text-center { text-align: center; }

/* ============================================================
   BUTTONS & LINKS
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 15px 30px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
  text-align: center;
}
.btn-primary { background: var(--plum); color: var(--cream); }
.btn-primary:hover { background: var(--plum-dark); color: var(--cream); }

.btn-sage { background: var(--olive); color: var(--cream); }
.btn-sage:hover { background: var(--olive-dark); color: var(--cream); }

.btn-hero { background: var(--cream); color: var(--plum); }
.btn-hero:hover { background: var(--butter); color: var(--plum); }

.link-underline {
  color: var(--mauve);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.link-underline:hover { border-bottom-color: var(--plum); color: var(--plum); }

/* Focus states */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 3px;
  border-radius: 3px;
}
.bg-plum a:focus-visible,
.bg-olive a:focus-visible,
.site-footer a:focus-visible { outline-color: var(--butter); }

/* ============================================================
   NAV
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid var(--taupe);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}
.logo {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--black);
  white-space: nowrap;
}
.logo:hover { color: var(--plum); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--body);
  padding: 10px 14px;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--plum); }
.nav-links a[aria-current="page"] {
  color: var(--plum);
  border-bottom: 2px solid var(--mauve);
}

/* Hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  width: 44px; height: 44px;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--body);
  margin: 5px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO — full-bleed background image (home)
   ============================================================ */
.hero {
  position: relative;
  min-height: calc(100vh - 74px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 100px 0;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  width: 135%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(83, 46, 71, 0.28) 0%,
    rgba(83, 46, 71, 0.55) 100%);
}
.hero .container { position: relative; z-index: 1; }
.hero-inner { max-width: 760px; }
.hero-kicker {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--butter);
  margin-bottom: 24px;
}
.hero h1 {
  font-size: clamp(2.3rem, 5.2vw, 4rem);
  line-height: 1.12;
  margin-bottom: 32px;
  color: var(--cream);
}
.hero h1 em { font-style: italic; color: var(--butter); }
.hero-subhead {
  font-size: 1.22rem;
  color: var(--cream);
  max-width: 56ch;
  margin-bottom: 40px;
  line-height: 1.7;
}

/* ============================================================
   PAGE HEADER BAND (inner pages)
   ============================================================ */
.page-header {
  padding: 30px 0 var(--gutter-y);
  background: none;
}
.page-header .panel { padding: clamp(40px, 6vw, 80px); }
.page-header-inner { max-width: 760px; }
.page-header .eyebrow { color: var(--butter); }
.page-header--sage .eyebrow { color: var(--sage); }
.page-header h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  color: var(--cream);
  margin-bottom: 22px;
}
.page-header--sage h1 { color: var(--plum); }
.page-header .subhead {
  font-size: 1.2rem;
  color: var(--cream);
  max-width: 62ch;
  margin: 0;
}
.page-header--sage .subhead { color: var(--body); }

/* ============================================================
   CENTERED INTRO / BREATHER
   ============================================================ */
.breather {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.breather .section-heading { margin-bottom: 22px; }
.breather p { font-size: 1.15rem; }

.clarity-statement {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  line-height: 1.4;
  color: var(--plum);
}
.clarity-statement em { font-style: italic; color: var(--mauve); }

/* ============================================================
   TWO-COLUMN SPLIT
   ============================================================ */
.two-col {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 72px;
  align-items: center;
}
.two-col .col-text { max-width: 60ch; }
.two-col img.col-img,
.two-col .col-media img {
  width: 100%;
  border-radius: var(--radius-img);
  object-fit: cover;
}
.img-portrait { aspect-ratio: 4 / 5; }
.img-square   { aspect-ratio: 1 / 1; }

/* ============================================================
   JOURNEY INTRO + CARD GRIDS
   ============================================================ */
.journey-intro {
  text-align: center;
  max-width: 70ch;
  margin: 0 auto 84px;
}
.journey-intro .section-heading { margin-bottom: 22px; }
.journey-intro p { font-size: 1.15rem; color: var(--body); }

.offerings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.offering-card {
  background: var(--offwhite);
  border: 0.5px solid var(--taupe);
  border-radius: var(--radius-img);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.offering-card-img { aspect-ratio: 1 / 1; overflow: hidden; }
.hub-grid .offering-card-img { aspect-ratio: 16 / 10; }
.offering-card-img img { width: 100%; height: 100%; object-fit: cover; }
.offering-card-body {
  padding: 32px 28px 36px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.offering-card-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 12px;
}
.offering-card-body h3 {
  font-size: 1.6rem;
  margin-bottom: 16px;
  color: var(--plum);
  min-height: 2.3em;   /* reserve ~2 lines so titles + descriptions line up across cards */
}
.offering-card-body p:not(.offering-card-label) { font-size: 0.98rem; line-height: 1.65; flex: 1; }
.offering-card-body .btn { margin-top: 24px; align-self: flex-start; }

/* ============================================================
   TESTIMONIAL BAND (full-width olive)
   ============================================================ */
.testimonial-band { background: var(--olive); color: var(--cream); }
.testimonial-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.testimonial-quote {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-style: italic;
  line-height: 1.45;
  margin-bottom: 28px;
  color: var(--cream);
  position: relative;
}
.testimonial-quote::before {
  content: "\201C";
  font-family: var(--serif);
  font-size: 4rem;
  color: var(--sage);
  position: absolute;
  top: -20px; left: 50%;
  transform: translateX(-50%);
  line-height: 1;
  opacity: 0.6;
}
.testimonial-quote p { padding-top: 28px; }
.testimonial-attribution {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--sage);
}

/* ============================================================
   TESTIMONIAL CARDS (testimonials page)
   ============================================================ */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.testi-card {
  border: 0.5px solid var(--taupe);
  border-radius: var(--radius-img);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
}
.testi-card.tint-sage   { background: var(--sage-tint); }
.testi-card.tint-butter { background: var(--mauve-tint); }
.testi-card p {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--body);
  margin-bottom: 22px;
  flex: 1;
}
.testi-card .testi-name {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mauve);
  margin: 0;
}

/* ============================================================
   DETAIL PAGE CONTENT
   ============================================================ */
.detail-block { max-width: 70ch; }
.detail-block h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  color: var(--plum);
  margin-bottom: 20px;
}
.detail-block + .detail-block { margin-top: 56px; }

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 70ch;
}
.feature-list li {
  position: relative;
  padding: 0 0 14px 30px;
  line-height: 1.6;
}
.feature-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 12px;
  width: 8px; height: 8px;
  background: var(--sage);
  transform: rotate(45deg);
}
.feature-list.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  max-width: none;
}

/* numbered process steps */
.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.process-steps li {
  background: var(--offwhite);
  border: 0.5px solid var(--taupe);
  border-radius: var(--radius-img);
  padding: 32px 28px;
}
.process-steps .step-num {
  font-family: var(--serif);
  font-size: 2.2rem;
  color: var(--mauve);
  display: block;
  margin-bottom: 8px;
}
.process-steps h3 { font-size: 1.3rem; color: var(--plum); }

/* format & investment callout */
.callout {
  background: var(--sage-tint);
  border-radius: var(--radius-img);
  padding: 32px 36px;
  max-width: 70ch;
}
.callout h3 {
  font-size: 1.3rem;
  color: var(--plum);
  margin-bottom: 10px;
}
.callout p:last-child { margin-bottom: 0; }
.callout .price {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--plum);
}

.cta-row { margin-top: 48px; }

/* ============================================================
   BELIEFS / CREDENTIALS (about page)
   ============================================================ */
/* Core beliefs — centered manifesto, hairline-separated */
.beliefs {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 720px;
  text-align: center;
}
.beliefs li {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: 1.35;
  color: var(--plum);
  padding: 22px 0;
  border-top: 1px solid rgba(83, 46, 71, 0.16);
}
.beliefs li:first-child { border-top: none; padding-top: 0; }
.beliefs li:last-child { padding-bottom: 0; }

/* Background & training — centered credential chips */
.creds {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 880px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.creds li {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--plum);
  background: var(--sage-tint);
  border: 1px solid var(--taupe);
  border-radius: 999px;
  padding: 10px 20px;
  line-height: 1.3;
}

/* Reusable full-bleed photo band with text overlaid */
.photo-band { position: relative; overflow: hidden; }
.photo-band-bg { position: absolute; inset: 0; z-index: 0; }
.photo-band-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}
.photo-band-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(83, 46, 71, 0.55) 0%,
    rgba(83, 46, 71, 0.80) 100%);
}
.photo-band > .container { position: relative; z-index: 1; }
.photo-band .section-heading { color: var(--cream); }

/* ============================================================
   BOOK CARDS (children page)
   ============================================================ */
.book-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
  max-width: 720px;
  margin: 0 auto;
}
.book-card {
  background: var(--offwhite);
  border: 0.5px solid var(--taupe);
  border-radius: var(--radius-img);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.book-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 32px 8px;
  background: var(--cream);
}
.book-card-media img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.18));
}
.book-card-body {
  padding: 32px 30px 36px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.book-card-body h3 { font-size: 1.45rem; color: var(--plum); margin-bottom: 14px; }
.book-card-body p { font-size: 1rem; flex: 1; }
.book-card-body .btn { margin-top: 24px; align-self: center; }

/* soft sand placeholder block for missing imagery */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: repeating-linear-gradient(45deg, #EFE6D8, #EFE6D8 16px, #E9DECF 16px, #E9DECF 32px);
  color: #9b8c79;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 24px;
}

/* ============================================================
   SIGNUP (Kit placeholder) + FORMS
   ============================================================ */
.signup {
  background: var(--offwhite);
  border: 1px solid var(--taupe);
  border-radius: var(--radius-img);
  padding: 40px;
  max-width: 560px;
  margin: 0 auto;
}
.signup-form { display: flex; gap: 12px; }
.signup-form input[type="email"],
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: var(--sans);
  font-size: 1rem;
  padding: 14px 16px;
  border: 1px solid var(--taupe);
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--body);
  width: 100%;
}
.signup-form input[type="email"] { flex: 1; }
.signup-form .btn { white-space: nowrap; }
.fine-print { font-size: 0.85rem; color: var(--mauve); margin: 16px 0 0; }
.panel--plum .fine-print,
.panel--olive .fine-print,
.panel--mauve .fine-print { color: var(--butter); opacity: 0.85; }

/* contact page: form is the primary (wider) column, photo shrinks beside it */
.contact-cols {
  grid-template-columns: 1fr 0.9fr;
  align-items: start;
}
.contact-heading {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--plum);
  margin-bottom: 30px;
}
.contact-form { max-width: none; }
.contact-form .field { margin-bottom: 26px; }
.contact-form label {
  display: block;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--plum);
  margin-bottom: 8px;
}
.contact-form textarea { min-height: 200px; resize: vertical; }
.contact-form .btn { margin-top: 6px; }

.hero--contact {
  min-height: 0;
  padding: clamp(64px, 12vw, 120px) 0;
}
.hero--contact .hero-bg img {
  width: 100%;
  object-position: center 30%;
}
.contact-aside { font-size: 1.05rem; }
.contact-aside .col-img { margin-bottom: 28px; }
.contact-aside a { color: var(--mauve); border-bottom: 1px solid transparent; }
.contact-aside a:hover { color: var(--plum); border-bottom-color: var(--plum); }

/* ============================================================
   FREE-TOOLS / SIGNUP SECTION TINT
   ============================================================ */
.tools-section { background: var(--sage-tint); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--olive);
  color: var(--cream);
  padding: 72px 0 48px;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(157, 159, 122, 0.35);
}
.footer-logo { font-family: var(--serif); font-size: 1.5rem; color: var(--cream); }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-nav a {
  color: var(--cream);
  font-size: 0.95rem;
  transition: color 0.2s ease, opacity 0.2s ease;
  opacity: 0.85;
}
.footer-nav a:hover { opacity: 1; color: var(--butter); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 30px;
}
.social { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(157, 159, 122, 0.5);
  border-radius: 50%;
  color: var(--sage);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.social a:hover { background: var(--sage); color: var(--olive); border-color: var(--sage); }
.social svg { width: 18px; height: 18px; }
.copyright { font-size: 0.88rem; color: var(--sage); margin: 0; }

/* Thank-you page — calm centered card */
.thankyou { padding: clamp(64px, 10vw, 140px) 0; }
.thankyou .panel { max-width: 640px; margin: 0 auto; text-align: center; }
.thankyou .eyebrow { color: var(--sage); }
.thankyou h1 { color: var(--plum); font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.15; margin-bottom: 18px; }
.thankyou p { max-width: 46ch; margin: 0 auto 30px; }
.thankyou .btn { margin-top: 4px; }
.thankyou-nudge {
  margin: 6px auto 4px;
  max-width: 460px;
  padding: 22px 26px;
  background: var(--sage-tint);
  border-radius: 14px;
}
.thankyou-nudge p { font-size: 1rem; color: var(--body); margin: 0 auto 16px; max-width: 38ch; }
.thankyou-back { margin: 26px 0 0; }
.thankyou-back a { color: var(--mauve); font-weight: 500; }

/* Story-audio (parent Kit) signup messages */
.story-success { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--plum); text-align: center; margin: 16px 0 0; }
.story-error { font-size: 0.9rem; color: #a3564b; text-align: center; margin: 12px 0 0; }
#story-audio { scroll-margin-top: 92px; }

/* Quiet footer newsletter signup (feeds the same Kit list as the popup) */
.footer-signup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 44px;
  padding: 30px 0;
  border-bottom: 1px solid rgba(157, 159, 122, 0.35);
}
.footer-signup-title { font-family: var(--serif); font-size: 1.35rem; color: var(--cream); margin: 0; }
.footer-signup-sub { font-family: var(--sans); font-size: 0.9rem; color: var(--sage); margin: 4px 0 0; max-width: 46ch; }
.footer-signup-fields { display: flex; gap: 10px; }
.footer-signup-form input[type="email"] {
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 11px 15px;
  border: 1px solid rgba(255, 253, 247, 0.35);
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--body);
  min-width: 210px;
}
.footer-signup-form input[type="email"]::placeholder { color: var(--mauve); }
.btn.footer-join-btn {
  padding: 11px 24px;
  background: var(--mauve);
  color: var(--cream);
  white-space: nowrap;
}
.btn.footer-join-btn:hover { background: var(--plum); color: var(--cream); }
.footer-signup-fine { font-size: 0.78rem; color: var(--sage); margin: 8px 0 0; }
.footer-signup-success { font-family: var(--serif); font-style: italic; font-size: 1.08rem; color: var(--cream); margin: 0; }
.footer-signup-error { font-size: 0.85rem; color: #e6ab9c; margin: 8px 0 0; }
@media (max-width: 640px) {
  .footer-signup-fields { flex-direction: column; align-items: stretch; }
  .btn.footer-join-btn { width: 100%; }
  .footer-signup-form input[type="email"] { min-width: 0; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .two-col { gap: 48px; }
  .offerings-grid { gap: 24px; }
}

@media (max-width: 860px) {
  :root { --section-pad: 80px; }
  body { font-size: 17px; }

  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 74px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--taupe);
    padding: 10px var(--gutter) 24px;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links > li { width: 100%; }
  .nav-links a {
    width: 100%;
    padding: 13px 4px;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--taupe);
  }
  .nav-links a[aria-current="page"] { border-bottom: 1px solid var(--taupe); }

  .process-steps { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .two-col,
  .hub-grid,
  .testi-grid,
  .book-grid,
  .offerings-grid {
    grid-template-columns: 1fr;
  }
  .two-col { gap: 40px; }
  .two-col .col-media { order: 1; }
  .two-col .col-text  { order: 2; }
  .offerings-grid { gap: 32px; }
  .journey-intro { margin-bottom: 56px; }
  .feature-list.two-up { grid-template-columns: 1fr; }
  .signup { padding: 28px; }
  .signup-form { flex-direction: column; }
  .signup-form .btn { width: 100%; }
}

/* ============================================================
   SERVICE POPUP / MODAL
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(30, 26, 24, 0.62);
}
.modal-overlay.is-open { display: flex; }

.modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--offwhite);
  border-radius: var(--radius-img);
  box-shadow: 0 24px 60px rgba(30, 26, 24, 0.35);
}
.modal-media {
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border-radius: var(--radius-img) var(--radius-img) 0 0;
}
.modal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 253, 247, 0.92);
  color: var(--plum);
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.modal-close:hover { background: var(--plum); color: var(--cream); }

.modal-body { padding: 30px 32px 36px; }
.modal-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 10px;
}
.modal-title {
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  color: var(--plum);
  margin-bottom: 8px;
}
.modal-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--mauve);
  margin-bottom: 18px;
}
.modal-body p { font-size: 1rem; line-height: 1.65; }
.modal-kicker {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--plum);
  margin: 22px 0 12px;
}
.modal-list { list-style: none; margin: 0 0 22px; padding: 0; }
.modal-list li {
  position: relative;
  padding: 0 0 9px 22px;
  font-size: 0.98rem;
  line-height: 1.5;
}
.modal-list li::before {
  content: "";
  position: absolute;
  left: 3px; top: 9px;
  width: 7px; height: 7px;
  background: var(--sage);
  transform: rotate(45deg);
}
.modal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.chip {
  background: var(--butter);
  color: var(--plum);
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 20px;
}
.modal-body .btn { width: 100%; }

body.modal-open { overflow: hidden; }

@media (max-width: 560px) {
  .modal-overlay { padding: 14px; }
  .modal-body { padding: 26px 22px 30px; }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal].revealed { opacity: 1; transform: translate(0, 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   MODULAR / BOXED SYSTEM
   Color lives inside contained panels, never full-bleed bands.
   ============================================================ */
.panel {
  background: var(--offwhite);
  border: 0.5px solid var(--taupe);
  border-radius: var(--radius-img);
  padding: clamp(32px, 5vw, 64px);
  box-shadow: 0 8px 24px rgba(83, 46, 71, 0.06);
}
.panel--sage  { background: var(--sage-tint); }
.panel--cream { background: var(--cream); }
.panel--plum  { background: var(--plum);  color: var(--cream); border-color: rgba(255, 253, 247, 0.14); }
.panel--olive { background: var(--olive); color: var(--cream); border-color: rgba(255, 253, 247, 0.14); }
.panel--mauve { background: var(--mauve); color: var(--cream); border-color: rgba(255, 253, 247, 0.16); }

.panel--plum h1, .panel--plum h2, .panel--plum h3, .panel--plum .section-heading,
.panel--olive h1, .panel--olive h2, .panel--olive h3, .panel--olive .section-heading,
.panel--mauve h1, .panel--mauve h2, .panel--mauve h3, .panel--mauve .section-heading { color: var(--cream); }
.panel--plum p,  .panel--olive p,  .panel--mauve p  { color: var(--cream); }
.panel--plum .eyebrow, .panel--olive .eyebrow, .panel--mauve .eyebrow { color: var(--butter); }
.panel--plum a.link-underline, .panel--olive a.link-underline, .panel--mauve a.link-underline { color: var(--butter); }
.panel--plum .clarity-statement, .panel--plum .clarity-statement em { color: var(--cream); }

/* signup form sits directly inside a panel (no nested card) */
.panel .signup { background: transparent; border: none; box-shadow: none; padding: 0; }

/* ---- Woven testimonial card (home / about / individuals / businesses) ---- */
.testi-weave {
  display: block;
  max-width: 860px;
  margin: 0 auto;
  background: var(--offwhite);
  border: 0.5px solid var(--taupe);
  border-radius: var(--radius-img);
  box-shadow: 0 8px 24px rgba(83, 46, 71, 0.06);
  padding: clamp(32px, 4.5vw, 56px);
  text-align: center;
  color: var(--body);
  transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
.testi-weave:hover {
  box-shadow: 0 16px 36px rgba(83, 46, 71, 0.13);
  transform: translateY(-2px);
  border-color: var(--mauve);
  color: var(--body);
}
.testi-weave .tw-quote {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--plum);
  margin: 0 0 20px;
}
.testi-weave .tw-name {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mauve);
  margin: 0 0 18px;
}
.testi-weave .tw-link {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--mauve);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.testi-weave:hover .tw-link { border-bottom-color: var(--mauve); }

/* ---- Home hero floating card ---- */
.hero-card {
  background: var(--plum);
  color: var(--cream);
  max-width: 600px;
  padding: clamp(36px, 4.5vw, 56px);
  border-radius: var(--radius-img);
  box-shadow: 0 24px 60px rgba(30, 26, 24, 0.32);
}
.hero-card .hero-subhead { margin-bottom: 32px; }

/* ---- Contained photo header card (contact) ---- */
.photo-card {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 8vw, 104px) clamp(32px, 5vw, 64px);
}
.photo-card .photo-card-bg { position: absolute; inset: 0; z-index: 0; }
.photo-card .photo-card-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 26%; }
.photo-card .photo-card-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(83, 46, 71, 0.48) 0%, rgba(83, 46, 71, 0.72) 100%);
}
.photo-card > .page-header-inner { position: relative; z-index: 1; }
.photo-card .page-header-inner h1 { color: var(--cream); }
.photo-card .eyebrow { color: var(--butter); }
.photo-card .subhead { color: var(--cream); }

/* ============================================================
   TESTIMONIALS PAGE — floating cards on full-bleed photo
   (the one full-bleed moment on the site)
   ============================================================ */
.testi-page {
  position: relative;
  overflow: hidden;
  min-height: 58vh;
  display: flex;
  align-items: center;
  padding: clamp(72px, 10vw, 132px) 0;
}
.testi-page-bg { position: absolute; inset: 0; z-index: 0; }
.testi-page-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.testi-page-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(83, 46, 71, 0.66) 0%, rgba(83, 46, 71, 0.80) 100%);
}
.testi-page > .container { position: relative; z-index: 1; }

.testi-hero { text-align: center; max-width: 780px; margin: 0 auto; }
.testi-hero .eyebrow { color: var(--butter); }
.testi-hero h1 { color: var(--cream); font-size: clamp(2.2rem, 5vw, 3.4rem); }

/* Testimonials — editorial single-column reading */
.testi-read { background: var(--cream); padding: clamp(46px, 6vw, 82px) var(--gutter); }
.testi-read .container-narrow {
  max-width: 820px;
  background: var(--offwhite);
  border-radius: 24px;
  box-shadow: 0 26px 60px rgba(83, 46, 71, 0.09);
  padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 64px);
}
.testi-entry { margin: 0; }
.testi-entry .te-mark {
  display: block;
  font-family: var(--serif);
  font-size: 3.4rem;
  line-height: 0.5;
  color: var(--sage);
  opacity: 0.42;
  margin-bottom: 6px;
}
.testi-entry .te-quote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.18rem, 2.1vw, 1.42rem);
  line-height: 1.7;
  color: var(--body);
}
.testi-entry .te-name {
  display: block;
  margin-top: 22px;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mauve);
}
.te-rule { width: 9px; height: 9px; background: var(--sage); opacity: 0.6; transform: rotate(45deg); margin: clamp(34px, 4.5vw, 52px) auto; }

@media (max-width: 760px) {
  .hero-card { max-width: none; }
}

/* ============================================================
   THEME REFINEMENTS — 2026 polish pass
   Design scale, nav CTA, unified photography.
   ============================================================ */

/* ---- Design scale (tokens) — baked in for consistent rhythm ---- */
:root {
  /* spacing scale (8px base) */
  --sp-1: 8px;  --sp-2: 12px; --sp-3: 16px; --sp-4: 24px;
  --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px; --sp-9: 120px;
  /* type scale */
  --text-xs: 0.78rem; --text-sm: 0.9rem; --text-base: 1rem; --text-lg: 1.18rem;
  --h4: 1.3rem;
  --h3: 1.6rem;
  --h2: clamp(2rem, 4vw, 2.9rem);
  --h1: clamp(2.3rem, 5.2vw, 4rem);
}
/* apply the scale to shared type (values match prior design — now tokenized) */
.section-heading { font-size: var(--h2); }
.offering-card-body h3,
.book-card-body h3,
.process-steps h3 { font-size: var(--h3); }
.lead { font-size: var(--text-lg); }

/* ---- Nav "Work With Me" CTA — congruent with .btn-primary ---- */
.nav-links li.nav-cta-li { margin-left: 10px; }
.nav-links a.nav-cta {
  background: var(--plum);
  color: var(--cream);
  padding: 9px 20px;
  border-radius: var(--radius);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: none;
  transition: background-color 0.25s ease;
}
.nav-links a.nav-cta:hover { background: var(--plum-dark); color: var(--cream); }

@media (max-width: 860px) {
  .nav-links li.nav-cta-li { margin: 14px 0 0; }
  .nav-links a.nav-cta { display: block; text-align: center; padding: 14px; }
}

/* ---- Unified photography: subtle shared warm tone across all photos ---- */
.hero-bg img,
.col-img,
.offering-card-img img,
.photo-band-bg img,
.photo-card-bg img,
.testi-page-bg img,
.modal-media img {
  filter: saturate(0.96) sepia(0.04);
}

/* ---- How It Works: centered action under the steps ---- */
.process-steps + .cta-row { text-align: center; margin-top: 44px; }

/* ---- Legal / privacy page ---- */
.legal { max-width: 760px; }
.legal h2 { font-size: var(--h3); color: var(--plum); margin: 40px 0 14px; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { font-size: 1rem; line-height: 1.7; }
.legal ul { padding-left: 22px; margin: 0 0 1.2em; }
.legal a { color: var(--mauve); border-bottom: 1px solid transparent; }
.legal a:hover { color: var(--plum); border-bottom-color: var(--plum); }
.legal .updated { font-size: 0.9rem; color: var(--mauve); margin-bottom: 32px; }

/* ============================================================
   DIRECTION B THEME
   Deboxed, open layout · paper grain · full-bleed shaded bands.
   ============================================================ */

/* paper grain over the whole page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* HERO — open (no plum card); text rests on the image */
.hero--open .hero-inner { max-width: 720px; }
.hero--open .hero-bg::after {
  background:
    radial-gradient(120% 90% at 20% 60%, rgba(83, 46, 71, 0.12), rgba(83, 46, 71, 0.50) 75%),
    linear-gradient(to top, rgba(30, 26, 24, 0.45), rgba(30, 26, 24, 0) 55%);
}
.hero--open h1 em { position: relative; white-space: nowrap; }
.hero--open h1 em::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%; bottom: -0.16em;
  height: 0.26em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 2, 70 10, 100 6 S 170 2, 198 7' fill='none' stroke='%23FFF7D1' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  opacity: 0.9;
}

/* open section rhythm (replaces the tight boxed gutter) */
.db-section { padding: clamp(38px, 5vw, 66px) 0; }
.db-section--tight { padding: clamp(24px, 3.4vw, 44px) 0; }

/* full-bleed shaded dark band */
.char-band {
  position: relative;
  background: var(--plum);
  color: var(--cream);
  overflow: hidden;
  padding: clamp(38px, 5vw, 64px) 0;
}
.char-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 50% 40%, rgba(120, 75, 104, 0.30), rgba(48, 25, 40, 0.55));
  pointer-events: none;
}
.char-band > .container { position: relative; z-index: 1; }
.band-statement {
  text-align: center;
  max-width: 26ch;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1.34;
  color: var(--cream);
}
.band-statement em { font-style: italic; color: var(--butter); }

/* overlapping Meet-Heather row */
.overlap {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 0;
}
.overlap-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 26px 60px rgba(83, 46, 71, 0.18);
}
.overlap-photo img { width: 100%; height: 100%; object-fit: cover; }
.overlap-text {
  position: relative;
  z-index: 2;
  margin-left: -80px;
  background: var(--offwhite);
  border-radius: 20px;
  padding: clamp(36px, 4vw, 52px);
  box-shadow: 0 18px 50px rgba(83, 46, 71, 0.10);
}
.overlap-text h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); color: var(--plum); margin-bottom: 16px; }

/* testimonial quote on a dark band */
.quote-wrap { position: relative; text-align: center; max-width: 640px; margin: 0 auto; }
.quote-mark { display: block; font-family: var(--serif); font-size: 3rem; line-height: 0.5; color: var(--sage); opacity: 0.55; margin-bottom: 0.15em; }
.quote-lead { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2.1vw, 1.6rem); line-height: 1.5; color: var(--cream); margin: 0; }
.quote-name { display: block; margin-top: 16px; font-family: var(--serif); font-style: italic; font-size: 1.15rem; letter-spacing: 0.06em; color: var(--butter); }
.char-band .tw-link { display: inline-block; margin-top: 16px; color: var(--butter); font-weight: 600; border-bottom: 1px solid transparent; }
.char-band .tw-link:hover { border-bottom-color: var(--butter); color: var(--butter); }

/* signup sits open (not in a panel) on the homepage */
.signup-block { max-width: 720px; margin: 0 auto; }

@media (max-width: 820px) {
  .overlap { grid-template-columns: 1fr; }
  .overlap-text { margin-left: 0; margin-top: -44px; width: 92%; margin-inline: auto; }
}

/* ============================================================
   DIRECTION B — applied to inner pages via body.theme-b
   Deboxes panels and turns color statements into full-bleed bands.
   (The "For" pages omit .theme-b, so they keep their boxed cards.)
   ============================================================ */
body { overflow-x: clip; }

/* neutral panels open up (keep the contact photo header card intact) */
.theme-b .panel:not(.photo-card) {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* color statements become full-bleed bands */
.theme-b .panel--sage,
.theme-b .panel--plum,
.theme-b .panel--olive,
.theme-b .panel--mauve {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  border: none;
  box-shadow: none;
  padding: clamp(84px, 10vw, 140px) max(24px, calc(50vw - 620px));
}
.theme-b .panel--plum::after,
.theme-b .panel--olive::after,
.theme-b .panel--mauve::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 40%, rgba(120, 75, 104, 0.22), rgba(48, 25, 40, 0.42));
}
.theme-b .panel--sage > *,
.theme-b .panel--plum > *,
.theme-b .panel--olive > *,
.theme-b .panel--mauve > * { position: relative; z-index: 1; }

/* page-header colored panel → full-bleed band */
.theme-b .page-header { padding: 0; }
.theme-b .page-header .panel:not(.photo-card) {
  padding: clamp(60px, 8vw, 110px) max(24px, calc(50vw - 620px));
}

/* open vertical rhythm for deboxed sections; flush bands */
.theme-b main > section { padding: clamp(38px, 5vw, 66px) 0; }
.theme-b main > section:has(.panel--sage),
.theme-b main > section:has(.panel--plum),
.theme-b main > section:has(.panel--olive),
.theme-b main > section:has(.panel--mauve) { padding: 0; }

/* keep the shared quote band identical on every page */
.theme-b main > section.char-band { padding: clamp(60px, 7vw, 96px) 0; }
/* quote bands carry little content — keep them tighter than the tile band */
.char-band:has(.quote-wrap),
.theme-b main > section.char-band:has(.quote-wrap) { padding: clamp(40px, 4.5vw, 60px) 0; }

/* Background & Training — closing reflection callout */
.train-note {
  max-width: 760px;
  margin: 52px auto 0;
  background: var(--sage-tint);
  border: 1px solid var(--taupe);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 40px) clamp(28px, 5vw, 52px);
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--plum);
}

/* Home hero — trimmed from full-screen so a hint of the next section peeks up */
.hero--home { min-height: 66vh; }

/* About hero — desert photo with the statement overlaid */
.hero--about { min-height: 58vh; align-items: center; }
.hero--about .hero-bg img { width: 100%; object-position: center 20%; }
.hero--about .hero-inner { max-width: 780px; }
.hero--about h1 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); max-width: 24ch; line-height: 1.2; }

/* photo CTA band (immersive closing call to action) */
.cta-photo {
  position: relative;
  overflow: hidden;
  background: var(--plum);
  color: var(--cream);
  padding: clamp(96px, 13vw, 170px) 0;
  text-align: center;
}
/* keep the closing CTA's padding symmetric even as the last section on non-theme-b pages */
main > section.cta-photo { padding-block: clamp(96px, 13vw, 170px); }
.cta-photo .cta-photo-bg { position: absolute; inset: 0; z-index: 0; }
.cta-photo .cta-photo-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.cta-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(48, 25, 40, 0.55), rgba(48, 25, 40, 0.78));
}
.cta-photo > .container { position: relative; z-index: 1; }
.cta-photo .eyebrow { color: var(--butter); }
.cta-photo h2 { color: var(--cream); font-size: clamp(2.4rem, 5.4vw, 3.8rem); margin-bottom: 22px; }
.cta-photo .sub { font-size: 1.22rem; color: var(--cream); max-width: 44ch; margin: 0 auto 44px; line-height: 1.6; }
.cta-photo .cta-row { margin: 0; }
.theme-b main > section.cta-photo { padding: clamp(96px, 13vw, 170px) 0; }

/* About intro — Direction 2 (centered band header + reversed overlap) */
.page-header--center .page-header-inner { text-align: center; max-width: 760px; margin: 0 auto; }
.overlap--reverse { grid-template-columns: 0.95fr 1.05fr; }
.overlap--reverse .overlap-text { margin-left: 0; margin-right: -80px; }
@media (max-width: 820px) {
  /* collapse to one column (base .overlap--reverse specificity otherwise keeps 2 cols) */
  .overlap--reverse { grid-template-columns: 1fr; }
  .overlap--reverse .overlap-text { margin-right: 0; }
  /* stack the photo above the text on mobile, matching the "Meet Heather" block */
  .overlap--reverse .overlap-photo { order: -1; }
}

/* About — "My Own Return" emphasis lines */
.returns { font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.6; color: var(--mauve); }
.return-line { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.4; color: var(--plum); margin-top: 4px; }

/* Centered section intro */
.head-center { text-align: center; max-width: 60ch; margin: 0 auto 48px; }

/* Core Beliefs — tiles on a dark band (sized to content, no dead space) */
.char-band .head-center .eyebrow { color: var(--butter); }
.char-band .head-center .section-heading { color: var(--cream); }
.belief-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 18px;
  max-width: 1040px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
.belief-tiles li {
  flex: 0 1 calc((100% - 36px) / 3);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 104px;
  padding: 24px 22px;
  background: rgba(255, 253, 247, 0.10);
  border: 1px solid rgba(255, 247, 209, 0.28);
  border-radius: 14px;
  color: var(--cream);
  font-family: var(--serif);
  font-size: 1.22rem;
  line-height: 1.34;
}
@media (max-width: 820px) { .belief-tiles li { flex-basis: calc((100% - 18px) / 2); } }
@media (max-width: 540px) { .belief-tiles li { flex-basis: 100%; } }

/* Background & Training — grouped categories */
.train-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1040px; margin: 0 auto; }
.train-groups .grp h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--taupe);
}
.train-groups ul { list-style: none; margin: 0; padding: 0; }
.train-groups li { padding: 9px 0; line-height: 1.5; font-size: 1rem; color: var(--body); }
.train-groups li b { font-weight: 600; color: var(--plum); }
@media (max-width: 820px) { .train-groups { grid-template-columns: 1fr; gap: 32px; } }

/* About — Core Beliefs as packed tiles (masonry; no dead space at any width) */
.belief-tiles { columns: 3; column-gap: 14px; max-width: 1000px; margin: 0 auto; padding: 0; list-style: none; }
.belief-tiles li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 12px;
  background: rgba(255, 253, 247, 0.07);
  border: 1px solid rgba(255, 253, 247, 0.18);
  border-radius: 12px;
  padding: 13px 20px;
  color: var(--cream);
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 1.3;
}
@media (max-width: 820px) { .belief-tiles { columns: 2; } }
@media (max-width: 560px) { .belief-tiles { columns: 1; } }

/* Beliefs band sits tighter than other char-bands */
.theme-b main > section.char-band:has(.belief-tiles) { padding-block: clamp(44px, 5vw, 68px); }
.char-band:has(.belief-tiles) .head-center { margin-bottom: 26px; }

/* Tighter, more legible belief tiles on mobile (single column) */
@media (max-width: 560px) {
  .belief-tiles { column-gap: 0; }
  .belief-tiles li {
    min-height: 0;
    padding: 11px 16px;
    margin-bottom: 8px;
    font-size: 1rem;
    line-height: 1.28;
    border-radius: 10px;
  }
}

/* Core belief tiles — lift, brighten, and grow on hover for a touch of movement */
.belief-tiles li {
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  cursor: default;
}
.belief-tiles li:hover {
  transform: scale(1.05);
  background: rgba(255, 253, 247, 0.18);
  border-color: var(--butter);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
  position: relative;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .belief-tiles li:hover { transform: none; }
}

/* ============================================================
   HOME — soft open statement (replaces hard band under hero)
   ============================================================ */
.intro-statement {
  padding: clamp(58px, 8vw, 108px) 0 clamp(40px, 5vw, 72px);
  text-align: center;
}
.intro-statement-text {
  max-width: 960px;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.34;
  color: var(--plum);
}
.intro-statement-text::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin: 0 auto 30px;
  background: var(--mauve);
  opacity: 0.55;
  border-radius: 2px;
}
.intro-statement-text em { font-style: italic; color: var(--mauve); }

/* ============================================================
   HOME — free gift as a floating box (replaces full-bleed band)
   ============================================================ */
main > section.gift-section { background: var(--sage-tint); padding: clamp(56px, 7vw, 104px) 0; }
.gift-box {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  background: var(--offwhite);
  border-radius: 18px;
  padding: clamp(50px, 6vw, 84px) clamp(32px, 5vw, 66px);
  box-shadow: 0 26px 60px rgba(83, 46, 71, 0.12);
}
.gift-box::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid var(--mauve);
  opacity: 0.4;
  border-radius: 11px;
  pointer-events: none;
}
.gift-box > * { position: relative; }
.gift-box .eyebrow { color: var(--mauve); }
.gift-box .section-heading { color: var(--plum); margin-bottom: 14px; }
.gift-box p { color: var(--body); max-width: 46ch; margin: 0 auto; }
.btn.btn-gift {
  margin-top: 30px;
  background: var(--plum);
  color: var(--cream);
}
.btn.btn-gift:hover { background: var(--plum-dark); color: var(--cream); }

/* Gift card holding an inline email form (Hideaway free gift) */
.gift-box--form .signup-form { max-width: 470px; margin: 24px auto 0; }
.gift-box--form .fine-print { margin-top: 14px; }

/* ============================================================
   HIDEAWAY HERO — kid-friendly sparkles + title flourish
   ============================================================ */
.page-header .panel:has(.hideaway-hero-decor) {
  position: relative;
  overflow: hidden;
}
.page-header > .container > .panel > .hideaway-hero-decor { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.page-header .panel:has(.hideaway-hero-decor) .page-header-inner { position: relative; z-index: 1; }
.hideaway-hero-decor .bd { position: absolute; opacity: 0.6; animation: bd-float 7s ease-in-out infinite; }
.hideaway-hero-decor .bd path { fill: currentColor; }
.hideaway-hero-decor .bd-1 { top: 24%; right: 9%;  width: 34px; height: 34px; color: var(--butter); animation-delay: 0s; }
.hideaway-hero-decor .bd-2 { top: 60%; right: 6%;  width: 20px; height: 20px; color: rgba(255,253,247,0.85); animation-delay: 1.2s; }
.hideaway-hero-decor .bd-3 { top: 38%; right: 20%; width: 28px; height: 28px; color: var(--butter); animation-delay: 0.6s; }
.hideaway-hero-decor .bd-4 { top: 72%; right: 14%; width: 18px; height: 18px; color: rgba(255,253,247,0.85); animation-delay: 2.1s; }
.hideaway-hero-decor .bd-5 { top: 16%; right: 26%; width: 16px; height: 16px; color: var(--butter); animation-delay: 1.7s; }
@media (max-width: 640px) {
  .hideaway-hero-decor .bd-2, .hideaway-hero-decor .bd-5 { display: none; }
}

.hideaway-name {
  position: relative;
  display: inline-block;
  color: var(--butter);
}
.hideaway-name::after {
  content: "";
  position: absolute;
  left: -1%; right: -1%; bottom: -0.18em;
  height: 0.24em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 2, 70 10, 100 6 S 170 2, 198 7' fill='none' stroke='%23FFF7D1' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
  .hideaway-hero-decor .bd { animation: none; }
}

/* About — Background & Training, grouped into categories */
.train-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1000px; margin: 0 auto; }
.train-groups h3 {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--taupe);
}
.train-groups ul { list-style: none; margin: 0; padding: 0; }
.train-groups li { padding: 9px 0; line-height: 1.5; font-size: 1rem; color: var(--body); }
.train-groups li b { color: var(--plum); font-weight: 600; }
@media (max-width: 820px) { .train-groups { grid-template-columns: 1fr; gap: 30px; } }

/* Dragon submission form (children page) */
.dragon-form {
  max-width: 660px;
  margin: 0 auto;
  background: var(--sage-tint);
  border-radius: 20px;
  padding: clamp(28px, 5vw, 48px);
}
.dragon-form .field { margin-bottom: 22px; }
.dragon-form input[type="file"] {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px dashed var(--mauve);
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--body);
  cursor: pointer;
}
.dragon-form .consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--body);
  cursor: pointer;
}
.dragon-form .consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 4px;
  flex-shrink: 0;
  accent-color: var(--plum);
}
.dragon-form .btn { margin-top: 6px; }

/* Page-header colored panels render as full-bleed bands on EVERY page,
   so For Individuals / For Businesses / For Children headers match (distinct colors kept). */
.page-header:has(.panel--plum),
.page-header:has(.panel--olive),
.page-header:has(.panel--mauve),
.page-header:has(.panel--sage) { padding: 0; }
.page-header > .container > .panel--plum,
.page-header > .container > .panel--olive,
.page-header > .container > .panel--mauve,
.page-header > .container > .panel--sage {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  border: none;
  box-shadow: none;
  padding: 64px max(24px, calc(50vw - 620px));
  min-height: 440px;
  display: flex;
  align-items: center;
}
/* solid band color — stays rich even on theme-b pages (which would otherwise make the panel transparent) */
.page-header > .container > .panel--plum { background: var(--plum); }
.page-header > .container > .panel--olive { background: var(--olive); }
.page-header > .container > .panel--mauve { background: var(--mauve); }
/* the "___-Centered" half of the title, distinguished so the For-pages echo one another */
.page-header h1 em { font-style: italic; color: var(--butter); }
.page-header > .container > .panel--plum::after,
.page-header > .container > .panel--olive::after,
.page-header > .container > .panel--mauve::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 40%, rgba(120, 75, 104, 0.22), rgba(48, 25, 40, 0.42));
}
.page-header > .container > .panel--plum > *,
.page-header > .container > .panel--olive > *,
.page-header > .container > .panel--mauve > *,
.page-header > .container > .panel--sage > * { position: relative; z-index: 1; }

/* ============================================================
   SERVICE DETAIL PAGES
   ============================================================ */
.hero--service { min-height: 58vh; align-items: center; }
.hero--service .hero-bg img { width: 100%; object-position: center 28%; }
.hero--service .hero-inner { max-width: 800px; }
.hero--service h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 20ch; line-height: 1.14; }
.hero--service .breadcrumb {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--butter);
  margin: 0 0 18px;
}
.hero--service .breadcrumb a { color: inherit; opacity: 0.85; }
.hero--service .breadcrumb a:hover { opacity: 1; color: var(--cream); }

/* spec strip — signals a bookable offering */
.service-spec { background: var(--offwhite); border-bottom: 1px solid var(--taupe); }
.theme-b main > section.service-spec { padding: 0; }
.service-spec .row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; padding: 22px 0; }
.service-spec .spec .lbl { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); margin-bottom: 2px; }
.service-spec .spec .val { font-family: var(--serif); font-size: 1.25rem; color: var(--plum); line-height: 1.1; }
.service-spec .btn { margin-left: auto; }
@media (max-width: 640px) {
  /* stack each spec on its own line (instead of an uneven 2+1 wrap) */
  .service-spec .row { flex-direction: column; align-items: stretch; gap: 16px; }
  .service-spec .btn { margin-left: 0; width: 100%; text-align: center; margin-top: 6px; }
}

/* related offerings */
.related-head { text-align: center; margin-bottom: 36px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.related-card {
  display: flex;
  flex-direction: column;
  background: var(--offwhite);
  border: 0.5px solid var(--taupe);
  border-radius: 16px;
  padding: 30px 28px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.related-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(83, 46, 71, 0.10); }
.related-card .label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); margin: 0 0 10px; }
.related-card h3 { font-size: 1.4rem; color: var(--plum); margin: 0 0 14px; }
.related-card .go { margin-top: auto; color: var(--mauve); font-weight: 600; }
@media (max-width: 760px) { .related-grid { grid-template-columns: 1fr; } }

/* "This session is for you if" — affirming checklist cards */
.fit-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
.fit-tiles li {
  flex: 0 1 calc((100% - 16px) / 2);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--offwhite);
  border: 0.5px solid var(--taupe);
  border-radius: 14px;
  padding: 22px 24px;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--body);
  box-shadow: 0 8px 22px rgba(83, 46, 71, 0.06);
}
.fit-tiles li::before {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFDF7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-11'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
}
@media (max-width: 640px) { .fit-tiles li { flex-basis: 100%; } }

/* "← Back to all offerings" link, top-left of a service hero */
.service-back {
  position: absolute;
  top: clamp(16px, 4vh, 30px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--maxw);
  padding: 0 24px;
  z-index: 4;
}
.service-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cream);
  opacity: 0.9;
}
.service-back a:hover { opacity: 1; color: var(--butter); }

/* "for you if" — solid band so it's distinct from the sections around it */
.fit-band { background: var(--sage-tint); }
.theme-b main > section.fit-band { padding: clamp(48px, 5.6vw, 72px) 0; }

/* Contained header for utility/legal pages (pairs with Contact's contained header) */
.legal-header { background: var(--sage-tint); }
.legal-header .eyebrow { color: var(--olive); }

/* Feature/pillar cards (title + description) — service pages & business hub */
.feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1040px; margin: 0 auto; }
.feature-cards .fc {
  background: var(--offwhite);
  border: 0.5px solid var(--taupe);
  border-radius: 14px;
  padding: 28px 26px;
  box-shadow: 0 8px 22px rgba(83, 46, 71, 0.05);
}
.feature-cards .fc .n { display: block; font-family: var(--serif); font-size: 1.4rem; color: var(--mauve); margin-bottom: 8px; }
.feature-cards .fc h3 { font-size: 1.2rem; color: var(--plum); margin: 0 0 10px; }
.feature-cards .fc p { font-size: 0.97rem; line-height: 1.55; margin: 0; }
/* stack feature cards one-per-row on mobile (beats the inline grid-template-columns on the businesses "Core Competencies" grid) */
@media (max-width: 760px) { .feature-cards { grid-template-columns: 1fr !important; } }
@media (max-width: 560px) { .feature-cards .fc { padding: 22px 22px; } }

/* theme-b color bands: solid fill AND generous padding.
   (The deboxing rule .theme-b .panel:not(.photo-card) sets padding:0 at higher specificity than
   the band rule, so both background and padding are pinned here at .panel.panel--X to win.) */
.theme-b .panel.panel--sage,
.theme-b .panel.panel--plum,
.theme-b .panel.panel--olive,
.theme-b .panel.panel--mauve {
  padding: clamp(88px, 10vw, 148px) max(24px, calc(50vw - 620px));
}
.theme-b .panel.panel--sage { background: var(--sage-tint); }
.theme-b .panel.panel--plum { background: var(--plum); }
.theme-b .panel.panel--olive { background: var(--olive); }
.theme-b .panel.panel--mauve { background: var(--mauve); }

/* Home hero: darker on the left so the overlaid text reads clearly */
.hero--home .hero-bg::after {
  background:
    linear-gradient(100deg, rgba(24, 18, 18, 0.84) 0%, rgba(24, 18, 18, 0.60) 42%, rgba(24, 18, 18, 0.16) 78%),
    linear-gradient(to top, rgba(24, 18, 18, 0.55), rgba(24, 18, 18, 0) 52%);
}

/* About hero — darken the left so the overlaid statement reads clearly (matches home) */
.hero--about .hero-bg::after {
  background:
    linear-gradient(100deg, rgba(24, 18, 18, 0.82) 0%, rgba(24, 18, 18, 0.58) 44%, rgba(24, 18, 18, 0.16) 80%),
    linear-gradient(to top, rgba(24, 18, 18, 0.50), rgba(24, 18, 18, 0) 54%);
}

/* ============================================================
   LEAD-MAGNET / EMAIL-SIGNUP BAND — one consistent treatment site-wide
   ============================================================ */
.lead-band {
  position: relative;
  overflow: hidden;
  background: var(--mauve);
  color: var(--cream);
  padding: clamp(80px, 10vw, 140px) 0;
}
.theme-b main > section.lead-band { padding: clamp(80px, 10vw, 140px) 0; }
.lead-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 40%, rgba(83, 46, 71, 0.10), rgba(83, 46, 71, 0.34));
}
.lead-band > .container { position: relative; z-index: 1; }
.lead-band .lead-inner { max-width: 620px; margin: 0 auto; text-align: center; }
.lead-band .eyebrow { color: var(--butter); }
.lead-band .section-heading { color: var(--cream); }
.lead-band p { color: var(--cream); }
.lead-band .signup { background: transparent; border: none; box-shadow: none; padding: 0; max-width: 560px; margin: 30px auto 0; }
.lead-band .fine-print { color: var(--butter); opacity: 0.85; }
.lead-band .lead-inner .btn { margin-top: 30px; }

/* ============================================================
   AUTHOR SECTION — lead paragraph + signature (Hideaway)
   ============================================================ */
.overlap-text .lead {
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--plum);
  margin-bottom: 16px;
}
.author-sign {
  margin-top: 26px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--mauve);
  line-height: 1.4;
}
.author-sign span {
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--body);
  margin-top: 8px;
}

/* ============================================================
   DRAGON GALLERY — kids' submitted drawings
   ============================================================ */
.dragon-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.dragon-card {
  margin: 0;
  background: var(--offwhite);
  border-radius: 16px;
  padding: 14px 14px 20px;
  box-shadow: 0 14px 36px rgba(83, 46, 71, 0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dragon-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(83, 46, 71, 0.16);
}
.dragon-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
  display: block;
}
.dragon-card figcaption {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--plum);
  text-align: center;
  margin-top: 16px;
  line-height: 1.2;
}
.dragon-card figcaption span {
  display: block;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--body);
  margin-top: 6px;
}
@media (max-width: 760px) {
  .dragon-gallery { grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (max-width: 480px) {
  .dragon-gallery { grid-template-columns: 1fr; }
}

/* ============================================================
   FREE GIFTS — selector modal
   ============================================================ */
.modal--freebies { max-width: 540px; }
.freebie-form { margin: 0; }
.freebie-options {
  border: 0;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.freebie-card { display: block; position: relative; cursor: pointer; }
.freebie-card input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.freebie-card-inner {
  display: block;
  position: relative;
  border: 1.5px solid var(--taupe);
  border-radius: 14px;
  padding: 16px 18px 16px 48px;
  background: var(--cream);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.freebie-card-inner::before {
  content: "";
  position: absolute;
  left: 18px; top: 19px;
  width: 18px; height: 18px;
  border: 1.5px solid var(--mauve);
  border-radius: 50%;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.freebie-card:has(input:checked) .freebie-card-inner {
  border-color: var(--plum);
  background: var(--offwhite);
  box-shadow: 0 8px 22px rgba(83, 46, 71, 0.12);
}
.freebie-card:has(input:checked) .freebie-card-inner::before {
  border-color: var(--plum);
  background: radial-gradient(circle, var(--plum) 0 42%, transparent 47% 100%);
}
.freebie-card input:focus-visible ~ .freebie-card-inner {
  outline: 2px solid var(--mauve);
  outline-offset: 2px;
}
.freebie-card-title {
  display: block;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--plum);
  line-height: 1.2;
}
.freebie-card-desc {
  display: block;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--body);
  margin-top: 5px;
}
.freebie-capture { display: flex; gap: 12px; }
.freebie-capture input[type="email"] {
  flex: 1;
  font-family: var(--sans);
  font-size: 1rem;
  padding: 14px 16px;
  border: 1px solid var(--taupe);
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--body);
}
.modal-body .freebie-capture .btn { width: auto; white-space: nowrap; }
.freebie-form .fine-print { text-align: center; }

/* Both-gifts info items (display only, not selectable) + success message */
.freebie-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.freebie-item {
  border: 1px solid var(--taupe);
  border-radius: 14px;
  padding: 14px 18px;
  background: var(--cream);
}
.freebie-item-title {
  display: block;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--plum);
  line-height: 1.2;
}
.freebie-item-desc {
  display: block;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--body);
  margin-top: 5px;
}
.freebie-success {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--plum);
  text-align: center;
  margin: 0;
}
.freebie-error {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #a3564b;
  text-align: center;
  margin: 12px 0 0;
}
@media (max-width: 560px) {
  .freebie-capture { flex-direction: column; }
  .modal-body .freebie-capture .btn { width: 100%; }
}

/* ============================================================
   THE BOOKS — tighter band, bigger cards, playful sparkles
   ============================================================ */
.theme-b .books-section .panel.panel--sage {
  padding-block: clamp(56px, 6vw, 88px);
  position: relative;
  overflow: hidden;
}
.books-section .books-intro { max-width: 600px; margin-inline: auto; text-align: center; position: relative; z-index: 1; }
.books-section .books-intro .eyebrow { color: var(--mauve); }
.books-section .books-intro p { margin-top: 12px; color: var(--body); }

/* wider grid so the covers fill the band instead of huddling */
.books-section .book-grid { max-width: 920px; gap: 48px; position: relative; z-index: 1; }
.books-section .book-card {
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.books-section .book-card:hover {
  transform: translateY(-6px) rotate(-0.6deg);
  box-shadow: 0 24px 50px rgba(83, 46, 71, 0.16);
}
.books-section .book-card:nth-child(2):hover { transform: translateY(-6px) rotate(0.6deg); }
.books-section .book-card-media img { max-height: 460px; transition: transform 0.4s ease; }
.books-section .book-card:hover .book-card-media img { transform: scale(1.04) rotate(-1.2deg); }

/* floating sparkle decorations in the open space */
.books-section .panel > .books-decor { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.books-decor .bd { position: absolute; width: 30px; height: 30px; opacity: 0.55; animation: bd-float 7s ease-in-out infinite; }
.books-decor .bd-1 { top: 12%;  left: 6%;  color: var(--butter); width: 38px; height: 38px; animation-delay: 0s; }
.books-decor .bd-2 { top: 62%;  left: 10%; color: var(--mauve);  width: 22px; height: 22px; animation-delay: 1.1s; }
.books-decor .bd-3 { top: 30%;  left: 2%;  color: var(--sage);   width: 18px; height: 18px; animation-delay: 2.2s; }
.books-decor .bd-4 { top: 14%;  right: 7%; color: var(--mauve);  width: 30px; height: 30px; animation-delay: 0.6s; }
.books-decor .bd-5 { top: 58%;  right: 5%; color: var(--butter); width: 40px; height: 40px; animation-delay: 1.7s; }
.books-decor .bd-6 { top: 34%;  right: 2%; color: var(--sage);   width: 20px; height: 20px; animation-delay: 2.8s; }
.books-decor .bd-7  { top: 5%;   left: 38%;  color: var(--butter); width: 22px; height: 22px; animation-delay: 0.3s; }
.books-decor .bd-8  { top: 90%;  left: 31%;  color: var(--mauve);  width: 26px; height: 26px; animation-delay: 1.4s; }
.books-decor .bd-9  { top: 86%;  right: 33%; color: var(--butter); width: 18px; height: 18px; animation-delay: 2.0s; }
.books-decor .bd-10 { top: 50%;  left: 49%;  color: var(--sage);   width: 16px; height: 16px; animation-delay: 0.9s; }
.books-decor .bd path { fill: currentColor; }
@keyframes bd-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(8deg); }
}
@media (max-width: 760px) {
  .books-decor .bd-2, .books-decor .bd-3, .books-decor .bd-6 { display: none; }
}

/* staggered scroll-reveal so cards cascade in rather than pop together */
.book-grid .book-card:nth-child(2) { transition-delay: 0.12s; }
.dragon-card:nth-child(2) { transition-delay: 0.1s; }
.dragon-card:nth-child(3) { transition-delay: 0.2s; }

/* ============================================================
   AUTHOR OVERLAP — more uneven, dynamic offset (Hideaway only)
   ============================================================ */
.author-section .overlap { grid-template-columns: 1.18fr 0.82fr; }
.author-section .overlap-text { margin-left: -128px; margin-top: 48px; }
@media (max-width: 820px) {
  .author-section .overlap { grid-template-columns: 1fr; }
  .author-section .overlap-text { margin-left: 0; margin-top: -44px; }
}

@media (prefers-reduced-motion: reduce) {
  .books-decor .bd { animation: none; }
}