/*
Theme Name: Balance & Beyond
Theme URI: https://balanceandbeyondcoaching.com/
Author: Connect Web Design Studio
Author URI: https://connectwebdesignstudio.com/
Description: Custom theme for Balance & Beyond Coaching Solutions. The design source is the HTML in the project folder; below this header the file is styles.css verbatim.
Version: 1.0.5
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary
Text Domain: balance-beyond
*/

/* ============================================================
   Balance & Beyond Coaching Solutions — Design v4
   "Warm print editorial": paper, hairlines, working margins,
   outlined numerals, figure captions, leader dots, square type-
   set buttons. Same brand tokens as v2/v3, redistributed.
   Brand: #601C37 burgundy, #82AEB8 teal, #E8CCD1 blush,
          #F4E7E0 cream, #425169 slate, #D4A2AC rose, #884F60 mauve
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&display=swap');

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

:root {
  --burgundy: #601C37;
  --teal: #82AEB8;
  --blush: #E8CCD1;
  --cream: #F4E7E0;
  --slate: #425169;
  --rose: #D4A2AC;
  --mauve: #884F60;
  --ink: #372c33;
  --ink-light: #6f5f68;
  --white: #FFFFFF;
  --paper: #FFFDFB;
  --hairline: rgba(96, 28, 55, 0.16);
  --hairline-dark: rgba(244, 231, 224, 0.28);
  --container: 1240px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--mauve); text-decoration: none; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }

/* ---------- Type ---------- */

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  color: var(--burgundy);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* keep short key phrases (and highlighted terms) on one line */
.nw { white-space: nowrap; }

h1 { font-size: clamp(2.7rem, 5.6vw, 4.6rem); margin-bottom: 28px; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: 22px; line-height: 1.14; }
h3 { font-size: 1.28rem; margin-bottom: 10px; line-height: 1.3; }

h1 em, h2 em { font-style: italic; font-weight: 500; }

p { margin-bottom: 16px; }
p:last-child { margin-bottom: 0; }

.lead { font-family: 'Fraunces', Georgia, serif; font-size: 1.28rem; color: var(--slate); margin-bottom: 20px; line-height: 1.5; }

.kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mauve);
  margin-bottom: 26px;
}
.kicker::before { content: ''; width: 34px; height: 1px; background: var(--mauve); }
.kicker.centered { justify-content: center; }
.kicker.centered::after { content: ''; width: 34px; height: 1px; background: var(--mauve); }
.kicker.on-dark { color: var(--rose); }
.kicker.on-dark::before { background: var(--rose); }

/* stamped audience tag — the hero's targeting line */
.kicker-tag {
  display: inline-block;
  border: 1.5px solid var(--burgundy);
  background: var(--cream);
  padding: 10px 18px 9px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: 30px;
}

.smallcaps-line {
  margin-top: 30px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-light);
}

.strong-line { font-family: 'Fraunces', Georgia, serif; font-style: italic; color: var(--burgundy); font-size: 1.18rem; margin-top: 24px; }

/* marker highlight — replaces the squiggle in this direction */
.hl {
  background: linear-gradient(180deg, transparent 56%, var(--blush) 56%);
  padding: 0 0.08em;
}
.hl-teal { background: linear-gradient(180deg, transparent 56%, rgba(130, 174, 184, 0.45) 56%); }

.after-note { margin-top: 36px; color: var(--ink-light); font-size: 1rem; max-width: 640px; }

/* ---------- Buttons & links ---------- */

.btn {
  display: inline-block;
  padding: 17px 32px 16px;
  border: 1.5px solid var(--burgundy);
  border-radius: 0;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--burgundy);
  background: transparent;
  transition: background 0.25s ease, color 0.25s ease;
}
.btn:hover { background: var(--burgundy); color: var(--white); }
.btn-primary { background: var(--burgundy); color: var(--white); }
.btn-primary:hover { background: transparent; color: var(--burgundy); }
.btn-cream { border-color: var(--cream); color: var(--cream); background: transparent; }
.btn-cream:hover { background: var(--cream); color: var(--burgundy); }
.btn-nav { padding: 12px 22px 11px; font-size: 0.7rem; }

.text-link {
  display: inline-block;
  font-weight: 500;
  font-size: 0.97rem;
  color: var(--burgundy);
  border-bottom: 1.5px solid var(--teal);
  padding-bottom: 2px;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.text-link:hover { color: var(--mauve); border-color: var(--mauve); }
.text-link.on-dark { color: var(--cream); border-color: var(--teal); }
.text-link.on-dark:hover { color: var(--white); }

.cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 34px; margin-bottom: 22px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 253, 251, 0.96);
  border-bottom: 1px solid var(--hairline);
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header.scrolled { box-shadow: 0 4px 18px rgba(96, 28, 55, 0.06); }
.site-header .container { max-width: 1400px; }

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 16px; padding-bottom: 16px; }
.brand img { width: 158px; height: auto; }

.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav a { white-space: nowrap; }
.site-nav a:not(.btn) {
  color: var(--burgundy);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 0;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.site-nav a:not(.btn):hover { color: var(--mauve); border-bottom-color: var(--teal); }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--burgundy); margin: 5px 0; transition: transform 0.3s ease, opacity 0.3s ease; }

/* ---------- Hero ---------- */

.hero { padding: 86px 0 72px; }
.hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; column-gap: 84px; align-items: start; }
.hero-figure { margin-top: 34px; }

figure.figure img { width: 100%; }

/* offset outline frame (from v3), square-cornered for this direction */
.frame { position: relative; padding: 0 22px 22px 0; }
.frame img, .frame video { position: relative; z-index: 1; }
.hero-media { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--blush); }
.frame::after {
  content: '';
  position: absolute;
  inset: 22px 0 0 22px;
  border: 1.5px solid var(--teal);
  z-index: 0;
}
figure.figure figcaption,
.figcap {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-light);
  line-height: 1.7;
}

/* ---------- Manifesto strip (the promises) ---------- */

.manifesto {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--cream);
  padding: 22px 0;
}
.manifesto-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 22px;
  row-gap: 6px;
  text-align: center;
}
.manifesto-line span {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.12rem;
  color: var(--burgundy);
}
.manifesto-line .star { font-style: normal; color: var(--teal); font-size: 0.95rem; }

/* ---------- Chapters (numbered editorial sections) ---------- */

.chapter { border-top: 1px solid var(--hairline); padding: 74px 0 84px; }
.chapter-grid { display: grid; grid-template-columns: 148px minmax(0, 1fr); column-gap: 64px; }

.chapter-index { display: flex; flex-direction: column; gap: 10px; }
.index-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 4.4rem;
  font-weight: 500;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.3px var(--mauve);
}
@supports not (-webkit-text-stroke: 1px black) {
  .index-num { color: var(--rose); }
}
.index-num.on-dark { -webkit-text-stroke-color: var(--rose); }
.index-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--mauve);
  max-width: 130px;
  line-height: 1.9;
}
.index-label.on-dark { color: var(--rose); }

/* outlined section word — replaces the numerals */
.index-word {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.22;
  color: transparent;
  -webkit-text-stroke: 1.1px var(--mauve);
  max-width: 148px;
  text-wrap: balance;
}
@supports not (-webkit-text-stroke: 1px black) {
  .index-word { color: var(--rose); }
}
.index-word.on-dark { -webkit-text-stroke-color: var(--rose); }

.chapter-body { max-width: 880px; }

/* ---------- Problem: quotes set as typography ---------- */

.said-list { margin: 34px 0 6px; border-top: 1px solid var(--hairline); }
.said {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--slate);
  padding: 22px 0 22px 42px;
  border-bottom: 1px solid var(--hairline);
  position: relative;
  margin: 0;
}
.said::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--teal);
  font-style: normal;
}

/* ---------- Split figures ---------- */

.body-split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 64px; align-items: start; }
.body-split.figure-left { grid-template-columns: 380px minmax(0, 1fr); }

/* ---------- Steps as editorial rows ---------- */

.step-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  column-gap: 40px;
  padding: 30px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.step-row:first-of-type { border-top: 1px solid var(--hairline); margin-top: 34px; }
.step-no {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 3rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--teal);
}
@supports not (-webkit-text-stroke: 1px black) {
  .step-no { color: var(--teal); }
}
.step-row p { font-size: 0.98rem; color: var(--ink-light); max-width: 640px; }

/* ---------- Dark bands (full bleed, square) ---------- */

.band-dark { background: var(--burgundy); padding: 84px 0; }
.band-dark h2, .band-dark h3 { color: var(--cream); }
.band-dark p { color: rgba(244, 231, 224, 0.88); }

.workshop-columns { display: grid; grid-template-columns: minmax(0, 1.1fr) 400px; column-gap: 72px; align-items: start; }
.workshop-sub {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--rose) !important;
  margin-bottom: 20px;
}

.program {
  border: 1px solid rgba(244, 231, 224, 0.5);
  border-top: 3px solid var(--teal);
  background: rgba(244, 231, 224, 0.08);
  padding: 36px 32px 28px;
}
.program-title {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rose) !important;
  margin-bottom: 18px;
  font-weight: 500;
}
.program-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  font-size: 0.92rem;
}
.program-row .p-label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose);
  font-weight: 500;
  white-space: nowrap;
}
.program-row .leader { flex: 1; border-bottom: 2px dotted rgba(244, 231, 224, 0.35); transform: translateY(-4px); }
.program-row .p-value { color: var(--cream); font-weight: 500; text-align: right; white-space: nowrap; }
.price-compare { text-decoration: line-through; opacity: 0.55; font-weight: 400; margin-right: 8px; }
.program-note { font-size: 0.76rem; color: rgba(244, 231, 224, 0.65) !important; margin-top: 16px; line-height: 1.6; }

/* ---------- Paths ---------- */

.feature-offer { display: grid; grid-template-columns: 420px minmax(0, 1fr); column-gap: 64px; align-items: start; margin-top: 38px; }
.offer-price {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mauve);
  font-weight: 500;
  margin: 2px 0 14px;
}
.feature-offer .btn { margin-top: 20px; }

.offer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 54px;
  border-top: 1px solid var(--hairline);
}
.offer-col { padding: 38px 48px 8px 0; }
.offer-col + .offer-col { border-left: 1px solid var(--hairline); padding-left: 48px; padding-right: 0; }
.offer-col p { font-size: 0.97rem; color: var(--ink-light); }
.offer-col .text-link { margin-top: 14px; }

.paths-note { text-align: center; margin-top: 58px; }
.paths-note p { color: var(--ink-light); margin-bottom: 20px; }

/* ---------- Opt-in band ---------- */

.band-cream {
  background: var(--cream);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 78px 0;
  text-align: center;
}
.band-cream .inner { max-width: 800px; margin: 0 auto; }
@media (min-width: 960px) {
  .one-line { white-space: nowrap; font-size: clamp(1.7rem, 2.6vw, 2.05rem); }
}
.optin-form { max-width: 620px; margin: 34px auto 0; }
.optin-form iframe { display: block; width: 100%; min-height: 745px; }
.optin-note {
  margin-top: 22px;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mauve);
  font-weight: 500;
}
.optin-alt { margin-top: 20px; }

/* Check-in band: copy + worksheet preview */
h1 .sentence, h2 .sentence { display: inline-block; }
.band-cream .optin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  column-gap: 84px;
  align-items: center;
  text-align: left;
  max-width: 1120px;
  margin: 0 auto;
}
.optin-copy h2 { max-width: 560px; }
.optin-copy p { max-width: 600px; }
.optin-copy .cta-row { margin-top: 30px; }
.optin-copy .optin-alt { display: inline-block; margin-top: 22px; }

.worksheet { display: block; color: inherit; text-decoration: none; }
.worksheet .frame { padding: 0 24px 24px 0; }
.worksheet .frame::after { inset: 24px 0 0 24px; }
.sheet {
  position: relative;
  z-index: 1;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--burgundy);
  padding: 30px 30px 26px;
  box-shadow: 0 18px 40px -28px rgba(96, 28, 55, 0.45);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.worksheet:hover .sheet { transform: translate(-4px, -4px); box-shadow: 0 26px 46px -28px rgba(96, 28, 55, 0.55); }
.sheet-kicker {
  font-size: 0.64rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mauve);
  font-weight: 500;
  margin-bottom: 14px;
}
.sheet-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--burgundy);
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
}
.sheet-title em { font-style: italic; font-weight: 500; }
.sheet-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  font-size: 0.82rem;
  color: var(--ink-light);
}
.sheet-row .s-label { min-width: 0; }
.sheet-row .leader { flex: 1; border-bottom: 2px dotted rgba(96, 28, 55, 0.28); transform: translateY(-4px); }
.sheet-row .s-val { white-space: nowrap; color: var(--ink); font-weight: 500; letter-spacing: 0.04em; }
.sheet-row.total { border-top: 1px solid var(--hairline); margin-top: 8px; padding-top: 14px; color: var(--burgundy); font-weight: 500; }
.sheet-row.total .s-val {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.35rem;
  color: var(--teal);
  letter-spacing: 0;
}
.sheet-foot { font-size: 0.72rem; color: var(--ink-light); margin-top: 18px; font-style: italic; }
.sheet-stamp {
  position: absolute;
  z-index: 2;
  top: -26px;
  right: -2px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 1.5px solid var(--burgundy);
  background: var(--cream);
  color: var(--burgundy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}
.sheet-stamp b { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 1.7rem; letter-spacing: 0; margin-bottom: 4px; }

/* ---------- Check-in landing page ---------- */

.landing-hero { padding: 64px 0 74px; }
.landing-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; column-gap: 76px; align-items: start; }
.form-panel {
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--teal);
  background: var(--white);
  padding: 26px 26px 16px;
}
.form-panel .optin-form { margin: 0; max-width: none; }
.mini-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin: 32px 0 10px; }
.mini-label {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mauve);
  font-weight: 500;
  margin-bottom: 8px;
}
.mini-list { list-style: none; }
.mini-list li { padding: 0.35em 0 0.35em 1.6em; position: relative; font-size: 0.95rem; color: var(--ink-light); }
.mini-list li::before { content: '\2014'; position: absolute; left: 0; color: var(--teal); }
.next-step { border-top: 1px solid var(--hairline); padding: 56px 0 64px; text-align: center; }
.next-step p { color: var(--ink-light); max-width: 640px; margin-left: auto; margin-right: auto; }

/* ---------- Outcomes ---------- */

.outcomes { list-style: none; margin: 26px 0 6px; }
.outcomes li { padding: 0.6em 0 0.6em 2em; position: relative; font-size: 1rem; border-bottom: 1px solid var(--hairline); }
.outcomes li:first-child { border-top: 1px solid var(--hairline); }
.outcomes li::before { content: '\2014'; position: absolute; left: 0; color: var(--teal); }

.transformation {
  margin-top: 38px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  color: var(--burgundy);
  line-height: 1.4;
}

/* ---------- Testimonials ---------- */

.pull-quote { position: relative; padding: 10px 0 6px 0; margin: 6px 0 40px; }
.pull-quote .qmark {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 7rem;
  line-height: 0.5;
  color: var(--blush);
  display: block;
  margin-bottom: 6px;
}
.pull-quote p {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.42;
  color: var(--burgundy);
}
cite {
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mauve);
  font-weight: 500;
}
.quote-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.quote-item { border-left: 2px solid var(--teal); padding-left: 26px; }
.quote-item p { font-size: 0.97rem; color: var(--ink); }

/* ---------- PFK notice (print-ad box) ---------- */

.notice-wrap { padding: 84px 0; border-top: 1px solid var(--hairline); }
.notice {
  max-width: 780px;
  margin: 0 auto;
  border: 1px solid var(--burgundy);
  outline: 1px solid var(--burgundy);
  outline-offset: 5px;
  padding: 54px 58px;
  text-align: center;
}
.notice .btn { margin-top: 26px; }

/* ---------- Final CTA ---------- */

.band-photo {
  background: linear-gradient(rgba(96, 28, 55, 0.9), rgba(96, 28, 55, 0.84)), url('images/photos/maren-desk.jpg');
  background-size: cover;
  background-position: center 32%;
  padding: 104px 0;
  text-align: center;
}
.band-photo .inner { max-width: 740px; margin: 0 auto; }
.band-photo h2 { color: var(--cream); font-size: clamp(2.1rem, 4vw, 3.2rem); }
.band-photo h2 em { font-style: italic; }
.band-photo p { color: rgba(244, 231, 224, 0.88); }
.band-photo .btn { margin-top: 28px; }
.cta-alt { margin-top: 24px; font-size: 0.92rem; color: rgba(244, 231, 224, 0.8) !important; }
.cta-alt a { color: var(--blush); border-bottom: 1px solid rgba(232, 204, 209, 0.5); }
.contact-line { margin-top: 38px; font-size: 0.9rem; color: rgba(244, 231, 224, 0.75) !important; }
.contact-line a { color: var(--blush); border-bottom: 1px solid rgba(232, 204, 209, 0.5); }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--hairline); padding: 64px 0 0; background: var(--paper); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 0.9fr 0.9fr; gap: 48px; padding-bottom: 44px; }
.footer-logo { width: 190px; margin-bottom: 18px; }
.footer-tag { color: var(--mauve); font-size: 0.95rem; font-family: 'Fraunces', Georgia, serif; font-style: italic; }
.footer-col h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--burgundy);
  margin-bottom: 18px;
}
.footer-col a, .footer-col p { display: block; color: var(--ink-light); font-size: 0.92rem; margin-bottom: 10px; transition: color 0.25s ease; }
.footer-col a:hover { color: var(--burgundy); }

.footer-disclaimer { border-top: 1px solid var(--hairline); padding-top: 22px; }
.footer-disclaimer p { color: var(--ink-light); font-size: 0.78rem; text-align: center; margin: 0 auto; max-width: 760px; }

.footer-bottom { padding-top: 14px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-bottom p { color: var(--ink-light); font-size: 0.78rem; margin: 0; }

.footer-credit { text-align: center; padding: 12px 0 24px; }
.footer-credit p { color: rgba(96, 28, 55, 0.4); font-size: 0.72rem; margin: 0; letter-spacing: 0.08em; }
.footer-credit a { color: rgba(96, 28, 55, 0.55); }
.footer-credit a:hover { color: var(--burgundy); }

/* ---------- Reveal ---------- */

[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-reveal].revealed { opacity: 1; transform: none; }

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

/* ---------- Responsive ---------- */

@media (max-width: 1480px) {
  .site-nav { gap: 18px; }
  .site-nav a:not(.btn) { font-size: 0.68rem; }
}

@media (max-width: 1240px) {
  .site-nav {
    position: fixed;
    inset: 0;
    background: rgba(255, 253, 251, 0.98);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 26px;
    padding: 96px 24px 48px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.35s ease;
  }
  .site-nav.open { transform: translateX(0); }
  .site-nav a:first-child { margin-top: auto; }
  .site-nav a:last-child { margin-bottom: auto; }
  .site-nav a:not(.btn) { font-size: 0.92rem; }
  .nav-toggle { display: block; position: relative; z-index: 60; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 960px) {
  .hero { padding: 56px 0 52px; }
  .hero-grid { grid-template-columns: 1fr; row-gap: 48px; }
  .hero-figure { margin-top: 0; max-width: 420px; }

  .chapter { padding: 52px 0 58px; }
  .chapter-grid { grid-template-columns: 1fr; row-gap: 26px; }
  .chapter-index { flex-direction: row; align-items: baseline; gap: 16px; }
  .index-num { font-size: 3rem; }
  .index-label { max-width: none; }
  .index-word { font-size: 1.45rem; max-width: none; }
  .frame { padding: 0 18px 18px 0; }
  .frame::after { inset: 18px 0 0 18px; }

  .body-split, .body-split.figure-left { grid-template-columns: 1fr; row-gap: 40px; }
  .body-split figure { max-width: 420px; }

  .workshop-columns { grid-template-columns: 1fr; row-gap: 44px; }
  .program { max-width: 460px; }

  .feature-offer { grid-template-columns: 1fr; row-gap: 36px; }
  .feature-offer figure { max-width: 460px; }
  .offer-cols { grid-template-columns: 1fr; }
  .offer-col { padding: 34px 0 10px; }
  .offer-col + .offer-col { border-left: none; border-top: 1px solid var(--hairline); padding-left: 0; }

  .quote-cols { grid-template-columns: 1fr; gap: 34px; }
  .landing-hero { padding: 44px 0 52px; }
  .landing-grid { grid-template-columns: 1fr; row-gap: 44px; }
  .mini-lists { grid-template-columns: 1fr; gap: 22px; }

  .notice { padding: 42px 26px; margin: 0 8px; }
  .band-dark { padding: 60px 0; }
  .band-photo { padding: 72px 0; }
  .band-cream { padding: 56px 0; }
  .band-cream .optin-grid { grid-template-columns: 1fr; row-gap: 48px; text-align: left; }
  .worksheet { max-width: 400px; margin: 10px auto 0; }
  .sheet-stamp { top: -22px; right: -6px; width: 70px; height: 70px; }
  .sheet { padding: 26px 22px 22px; }
  .sheet-kicker { letter-spacing: 0.2em; }

  .footer-grid { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .footer-logo { margin-left: auto; margin-right: auto; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
}

/* ============================================================
   V5 OVERLAY — "BANDED"
   Same bones and same copy as v4. Three levers pulled, to stop
   the page reading as one long even-toned column:
     1. every section gets its own full-bleed ground
     2. more distance between display type and body type
     3. brand colors used as FILLS instead of outlines/hairlines
   ============================================================ */

:root {
  --wash-cream: #F9F1EA;
  --wash-blush: #FBEDEF;
}

/* --- 1. Grounds. The ground is the separator, so the endless
       hairline rules between chapters come out. --- */
.chapter { border-top: none; padding: 88px 0 96px; }
.ground-cream { background: var(--wash-cream); }
.ground-blush { background: var(--wash-blush); }
.ground-slate { background: var(--slate); }

.ground-slate h2, .ground-slate h3 { color: var(--cream); }
.ground-slate p { color: rgba(244, 231, 224, 0.9); }
.ground-slate cite { color: var(--rose); }
.ground-slate .pull-quote p { color: var(--cream); }
.ground-slate .pull-quote .qmark { color: rgba(232, 204, 209, 0.5); }
.ground-slate .quote-item { border-left-color: var(--teal); }
.ground-slate .quote-item p { color: rgba(244, 231, 224, 0.92); }

/* --- 2. Section labels stop whispering: solid fill, sized up,
       sitting under a thick teal bar. --- */
.index-word {
  display: block;
  color: var(--burgundy);
  -webkit-text-stroke: 0;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.14;
  padding-top: 18px;
  border-top: 4px solid var(--teal);
}
.index-word.on-dark { color: var(--cream); -webkit-text-stroke: 0; }

/* --- 3. Scale contrast --- */
h1 { font-size: clamp(2.8rem, 5.8vw, 4.9rem); }
h2 { font-size: clamp(2rem, 3.9vw, 3.1rem); }
.lead { font-size: 1.38rem; }

/* --- 4. Fills, not outlines --- */
.step-no {
  font-family: 'Montserrat', 'Segoe UI', sans-serif;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1;
  color: var(--cream);
  -webkit-text-stroke: 0;
  background: var(--burgundy);
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.said::before { content: ''; top: 34px; width: 24px; height: 3px; background: var(--teal); }
.said { padding-left: 46px; }
.outcomes li::before { content: ''; top: 1.15em; width: 10px; height: 10px; background: var(--teal); }
.outcomes li { padding-left: 2.1em; }

/* --- 5. The manifesto strip goes dark: a hard break early, so the
       page has already changed color once above the fold. --- */
.manifesto { background: var(--burgundy); border-color: var(--burgundy); padding: 26px 0; }
.manifesto-line span { color: var(--cream); }
.manifesto-line .star { color: var(--teal); }

/* --- 6. Photos carry more weight --- */
.body-split { grid-template-columns: minmax(0, 1fr) 440px; }
.body-split.figure-left { grid-template-columns: 440px minmax(0, 1fr); }

/* --- 7. Buttons with a bit more body --- */
.btn { padding: 19px 36px 18px; }
.btn-nav { padding: 12px 22px 11px; }

@media (max-width: 960px) {
  .chapter { padding: 58px 0 62px; }
  .index-word { font-size: 1.5rem; padding-top: 12px; border-top-width: 3px; }
  .body-split, .body-split.figure-left { grid-template-columns: 1fr; }
  .step-no { width: 54px; height: 54px; font-size: 1.25rem; }
}

/* body-split needs a wider text column now that h2 is bigger */
.chapter-body { max-width: 980px; }
.body-split { grid-template-columns: minmax(0, 1fr) 420px; }
.body-split.figure-left { grid-template-columns: 420px minmax(0, 1fr); }
@media (max-width: 960px) {
  .body-split, .body-split.figure-left { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   REORDER 2026-09-03 (Maren's revised flow). The ground sequence
   had to be re-planned so no two neighbours share a background:
   paper | burgundy strip | cream | paper | BURGUNDY | cream |
   paper | blush | paper | SLATE | paper | burgundy photo.
   Testimonials came off slate (they now sit directly under the
   burgundy workshop band), and "How it works" took the slate
   slot instead, low on the page before the close.
   ------------------------------------------------------------ */

.band-cream.ground-blush { background: var(--wash-blush); }

/* the notice now follows a dark band — the ground change is the separator */
.notice-wrap { border-top: none; }

/* "How it works" reversed out on slate */
.ground-slate .step-row { border-bottom-color: rgba(244, 231, 224, 0.22); }
.ground-slate .step-row:first-of-type { border-top-color: rgba(244, 231, 224, 0.3); }
.ground-slate .step-row p { color: rgba(244, 231, 224, 0.85); }
/* burgundy squares disappear against slate, so the numerals go teal */
.ground-slate .step-no { background: var(--teal); color: var(--burgundy); }
/* the blush marker would swallow cream type — underline it in teal instead */
.ground-slate .hl { background: linear-gradient(180deg, transparent 56%, rgba(130, 174, 184, 0.5) 56%); }

/* ------------------------------------------------------------
   REORDER #2, 2026-09-04 (Maren's final flow: RRN jumps ahead of
   About, How-it-works moves up between Testimonials and What
   Changes). Re-planned ground sequence, no two neighbours alike:
   paper | BURGUNDY strip | cream | BURGUNDY workshop | paper |
   cream | SLATE | paper | blush | paper | cream | burgundy photo.
   Only change needed: the PFK notice took a cream ground, because
   Ways-to-work-together above it is paper.
   ------------------------------------------------------------ */

/* ============================================================
   WORKSHOP PAGE (right-revenue-number.html), ported to v5.
   Reuses the homepage system wherever possible — .band-dark +
   .workshop-columns + .program for the hero, .said-list for the
   pains, .step-row on a slate ground for the takeaways, .outcomes
   for the includes list. Only the pieces below are new.
   Ground run: BURGUNDY hero | cream | paper | SLATE | paper |
   cream | burgundy photo.
   ============================================================ */

/* --- dark hero: the h1 and lead need the reversed treatment that
       .band-dark only gave h2/h3 --- */
.page-hero { padding: 76px 0 88px; }
.band-dark h1 { color: var(--cream); }
.band-dark .lead { color: var(--blush); }
.smallcaps-line.on-dark { color: rgba(244, 231, 224, 0.62); }

/* --- the six areas of a practice, set as a print-style table --- */
.six-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin: 34px 0 38px;
}
.six-item {
  background: var(--paper);
  padding: 22px 20px;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--burgundy);
}
.ground-cream .six-item { background: var(--wash-cream); }

/* --- a small lead-in above a list --- */
.list-head {
  margin-top: 30px;
  margin-bottom: 4px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--burgundy);
}

/* --- presenters --- */
.presenter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 38px; }
.presenter h3 { margin-top: 26px; }
.presenter-role {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mauve);
  margin-bottom: 14px;
  line-height: 1.8;
}
.presenter p:last-child { font-size: 0.97rem; color: var(--ink-light); }
/* Amber has no photo, so she gets a monogram block that sits inside the
   SAME .frame wrapper as Marens portrait — identical box math, so the
   two bios line up exactly */
.frame .mono {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 3;
  background: var(--burgundy);
}
.frame .mono span {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 6rem;
  font-weight: 400;
  color: var(--cream);
  line-height: 1;
}

/* --- CE learning objectives --- */
.objectives { list-style: none; counter-reset: obj; margin: 8px 0 30px; }
.objectives li {
  counter-increment: obj;
  position: relative;
  padding: 20px 0 20px 52px;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.97rem;
  color: var(--ink-light);
}
.objectives li:first-child { border-top: 1px solid var(--hairline); }
.objectives li::before {
  content: counter(obj);
  position: absolute;
  left: 0;
  top: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal);
  color: var(--burgundy);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem;
}
.fine-print { font-size: 0.84rem; color: var(--ink-light); line-height: 1.75; }

/* --- takeaways on slate: .transformation is burgundy by default --- */
.ground-slate .transformation { color: var(--cream); }

@media (max-width: 960px) {
  .page-hero { padding: 52px 0 60px; }
  .six-grid { grid-template-columns: repeat(2, 1fr); }
  .presenter-grid { grid-template-columns: 1fr; gap: 48px; }
  .presenter figure { max-width: 320px; }
  .frame .mono span { font-size: 4.5rem; }
}

/* ------------------------------------------------------------
   HERO: split copy so the photo can sit mid-copy on phones
   (2026-09-04). Desktop is unchanged — the two copy blocks take
   rows 1 and 2 of column 1, the figure spans both rows in
   column 2, which renders identically to one copy block.
   ------------------------------------------------------------ */
.hero-copy   { grid-column: 1; grid-row: 1; }
.hero-figure { grid-column: 2; grid-row: 1 / span 2; }
.hero-copy-b { grid-column: 1; grid-row: 2; }
/* .lead now ends its block, so p:last-child (0,1,1) would zero the
   margin that separates it from the paragraph below */
.hero-copy .lead { margin-bottom: 20px; }

@media (max-width: 960px) {
  /* one column, so DOM order rules: lead -> photo -> "I'm Maren" */
  .hero-copy, .hero-figure, .hero-copy-b { grid-column: 1; grid-row: auto; }
  .hero-copy .lead { margin-bottom: 0; }   /* row-gap handles the spacing */

  /* The source photo carries ~29% dead wall above her head, which reads as a
     lot of empty space at phone width. Crop it away from the TOP and shorten
     the box: at 7/8 with the image bottom-anchored, the visible window starts
     ~22% down, leaving her a little headroom and trimming ~110px of height. */
  .hero-media { aspect-ratio: 7 / 8; object-position: center 92%; }
}
/* The figure spans both rows, so its height was being distributed into row 1
   and pushing the second copy block down. A flexible second row absorbs the
   overflow instead, restoring the original desktop spacing exactly. */
.hero-grid { grid-template-rows: auto 1fr; }

/* ============================================================
   ABOUT PAGE (about.html). Story-led, credentials present but
   deliberately not résumé-shaped — Maren asked for the page to
   "feel personal and human rather than like a professional
   résumé". Ground run: paper hero | cream story | BURGUNDY
   quote | paper | SLATE credentials | cream off-the-clock |
   burgundy photo.
   ============================================================ */

/* --- her mission, set as a full-bleed quote --- */
.quote-band { padding: 92px 0; }
.pull-quote.centered { max-width: 900px; margin: 0 auto; text-align: center; }
.band-dark .pull-quote p { color: var(--cream); }
.band-dark .pull-quote p em { color: var(--blush); font-style: italic; }
.band-dark .qmark { color: rgba(232, 204, 209, 0.5); }
.band-dark cite { color: var(--rose); }

/* --- credentials on slate --- */
.cred-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 34px; }
.list-head.on-dark { color: var(--rose); }
.ground-slate .outcomes li { border-color: rgba(244, 231, 224, 0.22); color: rgba(244, 231, 224, 0.92); }
.ground-slate .outcomes li:first-child { border-top-color: rgba(244, 231, 224, 0.3); }

.media-list { border-top: 1px solid rgba(244, 231, 224, 0.3); }
.media-row { padding: 16px 0; border-bottom: 1px solid rgba(244, 231, 224, 0.22); }
.m-show {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 5px;
}
.m-title {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--cream);
}

/* --- "off the clock": the fun facts, as a ruled two-column list --- */
.wide-figure { margin: 34px 0 42px; max-width: 620px; }
.fact-list { border-top: 1px solid var(--hairline); }
.fact-row {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  column-gap: 32px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.f-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mauve);
  line-height: 1.7;
}
.f-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--ink);
}

@media (max-width: 960px) {
  .quote-band { padding: 58px 0; }
  .cred-split { grid-template-columns: 1fr; gap: 44px; }
  .wide-figure { max-width: 100%; }
  .fact-row { grid-template-columns: 1fr; row-gap: 4px; padding: 16px 0; }
}

/* Stop pull quotes dropping a single word onto the last line. `pretty` exists
   for exactly this; `balance` evens every line, which suits the centred quote. */
.pull-quote p { text-wrap: pretty; }
.pull-quote.centered p { text-wrap: balance; }

/* ============================================================
   WORK WITH MAREN (work-with-maren.html). A router page: the
   comparison table does the deciding, then each offer gets its
   own ground. Run: paper hero | cream compare | BURGUNDY cohort
   | paper VIP Day | SLATE Power Hour | cream FAQ | burgundy photo.
   ============================================================ */

/* --- the compare table Maren asked for ("vip intensive vs ongoing
       coaching" visual). Scrolls inside itself on narrow screens
       rather than pushing the page wide. --- */
.compare-wrap { overflow-x: auto; margin: 34px 0 30px; }
.compare { width: 100%; min-width: 760px; border-collapse: collapse; text-align: left; }
.compare th, .compare td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  font-size: 0.95rem;
  line-height: 1.55;
}
.compare thead th {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--burgundy);
  border-bottom: 3px solid var(--burgundy);
  line-height: 1.3;
}
.compare tbody th {
  font-family: 'Montserrat', 'Segoe UI', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mauve);
  white-space: nowrap;
  width: 168px;
}
.compare td { color: var(--ink-light); }
.compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom: none; }
.c-price { font-family: 'Fraunces', Georgia, serif; font-size: 1.1rem; color: var(--burgundy); }
.sr-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- VIP Day: the three audiences Maren asked NOT to collapse
       into "therapists only" --- */
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 14px 0 40px; }
.audience { border-top: 3px solid var(--teal); padding-top: 18px; }
.a-tag {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: 8px;
}
.audience p { font-size: 0.95rem; color: var(--ink-light); }

/* --- the objection, answered in place --- */
.callout {
  background: var(--wash-cream);
  border-left: 4px solid var(--burgundy);
  padding: 28px 32px;
  margin: 38px 0 6px;
}
.callout-q {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.16rem;
  color: var(--burgundy);
  margin-bottom: 12px;
}
.callout p:last-child { font-size: 0.97rem; color: var(--ink-light); }

/* --- price + buttons closing an offer block --- */
.offer-close { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--hairline); }
.offer-close .offer-price {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.3rem;
  color: var(--burgundy);
  margin-bottom: 0;
  /* the base .offer-price is an uppercase letterspaced eyebrow — reset it here */
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.offer-price.on-dark { color: var(--cream); }
.ground-slate .offer-close { border-top-color: rgba(244, 231, 224, 0.3); }

/* --- FAQ --- */
.faq-list { margin-top: 34px; border-top: 1px solid var(--hairline); }
.faq-item { padding: 26px 0; border-bottom: 1px solid var(--hairline); }
.faq-q {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--burgundy);
  margin-bottom: 10px;
}
.faq-a { font-size: 0.97rem; color: var(--ink-light); max-width: 780px; }

@media (max-width: 960px) {
  .audience-grid { grid-template-columns: 1fr; gap: 22px; }
  .callout { padding: 22px 20px; }
  .compare th, .compare td { padding: 14px 14px; }
}

/* .outcomes had a light treatment for the slate ground but not the burgundy
   band — on the cohort block the list was rendering as dark ink on burgundy. */
.band-dark .outcomes li { color: rgba(244, 231, 224, 0.92); border-color: rgba(244, 231, 224, 0.22); }
.band-dark .outcomes li:first-child { border-top-color: rgba(244, 231, 224, 0.3); }

/* The Work With Maren hero uses a crop of the same shoot frame that .band-photo
   darkens for its background, so this page gets a different closing image. */
.band-photo-alt {
  background: linear-gradient(rgba(96, 28, 55, 0.9), rgba(96, 28, 55, 0.84)), url('images/photos/maren-client.jpg');
  background-size: cover;
  background-position: center 38%;
}

/* =====================================================================
   CONTACT PAGE
   Reuses the landing-hero / form-panel shape from paying-you-enough.html.
   New here: native form controls (the site had none — every other form is
   a GHL iframe), a 3-up variant of .offer-cols, and notes under fact rows.
   ===================================================================== */

/* --- contact methods: the About page's label/value rows, with room for a
       clarifying line under the link --- */
.contact-methods { margin: 36px 0 8px; }
.contact-methods .f-value a {
  color: var(--burgundy);
  border-bottom: 1px solid var(--rose);
}
.contact-methods .f-value a:hover { color: var(--mauve); border-color: var(--mauve); }
.f-note {
  display: block;
  font-family: 'Montserrat', 'Segoe UI', sans-serif;
  font-size: 0.86rem;
  color: var(--ink-light);
  margin-top: 5px;
}

/* --- form panel headings --- */
.form-head {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.4rem;
  color: var(--burgundy);
  margin-bottom: 4px;
}
.form-sub { font-size: 0.9rem; color: var(--ink-light); margin-bottom: 24px; }

/* --- native form controls. Square corners, hairline borders, teal focus,
       to match the buttons and .frame treatment everywhere else. --- */
.contact-form .field { margin-bottom: 18px; }
.contact-form .field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mauve);
  margin-bottom: 7px;
}
.contact-form label .opt {
  letter-spacing: 0.1em;
  color: var(--ink-light);
  opacity: 0.7;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  font-family: 'Montserrat', 'Segoe UI', sans-serif;
  font-size: 0.96rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 0;
  padding: 11px 12px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.contact-form textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.contact-form select { appearance: none; background-image: none; cursor: pointer; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(130, 174, 184, 0.28);
}
.form-submit { margin-top: 8px; width: 100%; }

/* --- 3-up variant of the offer columns used on the homepage paths section.
       ⚠️ The 900px rule below is REQUIRED: base .offer-cols (0,1,0) collapses
       to one column on phones, but .offer-cols.three (0,2,0) would outrank it
       and stay 3-wide. Same trap as .split.X. --- */
.offer-cols.three { grid-template-columns: repeat(3, 1fr); margin-top: 44px; }
.offer-cols.three .offer-col { padding: 34px 32px 8px 0; }
.offer-cols.three .offer-col + .offer-col { padding-left: 32px; padding-right: 0; }
.offer-cols.three h3 { font-size: 1.16rem; margin-bottom: 10px; }

@media (max-width: 900px) {
  .offer-cols.three { grid-template-columns: 1fr; margin-top: 32px; }
  .offer-cols.three .offer-col { padding: 30px 0 10px; }
  .offer-cols.three .offer-col + .offer-col { padding-left: 0; }
  .contact-form .field-pair { grid-template-columns: 1fr; gap: 0; }
  .contact-methods { margin-top: 28px; }
}

/* --- the phone caveat. Deliberately NOT .smallcaps-line: it's a full
       sentence and two lines of letterspaced uppercase is a slog to read. --- */
.contact-note {
  margin-top: 22px;
  font-size: 0.88rem;
  color: var(--ink-light);
  max-width: 520px;
}
.contact-note a { color: var(--burgundy); border-bottom: 1px solid var(--rose); }

/* --- equalise the router columns so the three text-links sit on one line
       even though the copy above them runs to different lengths --- */
.offer-cols.three .offer-col { display: flex; flex-direction: column; }
.offer-cols.three .offer-col .text-link { margin-top: auto; align-self: flex-start; }

/* --- the GHL contact form is taller than the check-in form (926 vs 745) --- */
.contact-embed iframe { min-height: 926px; }
/* --- CE provider line: the one piece of fine print that must NOT read as fine print --- */
.fine-print.ce-provider { font-size: 0.95rem; color: var(--ink); margin-top: 26px; }

/* =====================================================================
   RESOURCES · TOOLBOX · DISCOVERY CALL · MEDIA · BLOG  (2026-09-08)
   ===================================================================== */

/* --- single-column hero copy (no photo, no form) --- */
.hero-solo { max-width: 820px; }
.hero-solo .lead { margin-top: 18px; }
.hero-solo .cta-row { margin-top: 30px; }
.band-dark .hero-solo h1 { color: var(--cream); }

/* --- small eyebrow above a column title --- */
.r-tag {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
}

/* --- offer columns on slate --- */
.offer-cols.on-slate { border-top-color: rgba(244, 231, 224, 0.25); }
.offer-cols.on-slate .offer-col + .offer-col { border-left-color: rgba(244, 231, 224, 0.25); }
.offer-cols.on-slate h3 { color: var(--cream); }
.offer-cols.on-slate p { color: rgba(244, 231, 224, 0.85); }

/* --- toolbox rows: name + blurb left, offer/code right --- */
.tool-list { border-top: 1px solid var(--hairline); margin-top: 30px; }
.tool {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  column-gap: 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.tool-name {
  display: inline-block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.16rem;
  color: var(--burgundy);
  border-bottom: 1px solid var(--rose);
  margin-bottom: 6px;
}
.tool-name:hover { color: var(--mauve); border-color: var(--mauve); }
.tool-main p { font-size: 0.95rem; color: var(--ink-light); margin: 0; }
.tool-main p a { color: var(--burgundy); border-bottom: 1px solid var(--rose); }
.tool-offer {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  padding-top: 6px;
  text-align: right;
  line-height: 1.6;
}

/* --- list-head with a trailing link (About → media page) --- */
.list-head .text-link { font-family: 'Montserrat', 'Segoe UI', sans-serif; font-style: normal; font-size: 0.8rem; margin-left: 4px; }

/* --- media page: podcast titles as links --- */
a.m-title { border-bottom: 1px solid rgba(130, 174, 184, 0.5); }
a.m-title:hover { color: var(--white); border-color: var(--teal); }

/* --- blog index --- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 36px; }
.post-card { display: flex; flex-direction: column; color: inherit; }
.post-card .frame { padding: 0 14px 14px 0; margin-bottom: 18px; }
.post-card .frame img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.post-card time {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mauve);
  margin-bottom: 8px;
}
.post-card h3 { font-size: 1.22rem; line-height: 1.3; margin-bottom: 10px; }
.post-card p { font-size: 0.93rem; color: var(--ink-light); margin-bottom: 14px; }
.post-card .text-link { margin-top: auto; align-self: flex-start; }
.post-card:hover h3 { color: var(--mauve); }

/* --- blog post --- */
.post-narrow { max-width: 760px; }
.post-head { padding: 64px 0 34px; }
.post-head .kicker a { color: inherit; }
.post-head h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin-top: 14px; }
.post-hero { margin-bottom: 44px; }
.post-hero img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.post-body { padding-bottom: 56px; }
.post-body h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); margin: 44px 0 14px; }
.post-body h3 { font-size: 1.25rem; margin: 32px 0 10px; }
.post-body p { font-size: 1.06rem; line-height: 1.75; margin-bottom: 20px; }
.post-body ul, .post-body ol { margin: 0 0 22px 1.4em; }
.post-body li { margin-bottom: 8px; font-size: 1.04rem; line-height: 1.7; }
.post-body li p { margin-bottom: 0; }
.post-body a { color: var(--burgundy); border-bottom: 1px solid var(--rose); }
.post-body a:hover { color: var(--mauve); border-color: var(--mauve); }
.post-body .post-figure { margin: 34px 0; }
.post-body .post-figure img { width: 100%; display: block; }
.post-foot { border-top: 1px solid var(--hairline); padding: 44px 0 64px; }
.post-author { display: grid; grid-template-columns: 140px minmax(0, 1fr); column-gap: 32px; align-items: start; }
.post-author .frame { padding: 0 12px 12px 0; }
.post-author img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 20%; display: block; }
.post-author .list-head { margin-top: 0; }
.post-author p { font-size: 0.95rem; color: var(--ink-light); }

@media (max-width: 900px) {
  .tool { grid-template-columns: 1fr; row-gap: 8px; padding: 18px 0; }
  .tool-offer { text-align: left; padding-top: 0; }
  .post-grid { grid-template-columns: 1fr; gap: 40px; }
  .post-head { padding: 40px 0 24px; }
  .post-author { grid-template-columns: 96px minmax(0, 1fr); column-gap: 20px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- in-post images: the June 2026 posts embed tall Pinterest-style pins
       (1500x2667). Full-width they run ~1350px each and the page hits 12k+px.
       Cap the height and centre them instead. --- */
.post-body .post-figure img { width: auto; max-width: 100%; max-height: 620px; margin: 0 auto; }
.post-body .post-figure { text-align: center; }

/* =====================================================================
   NAV DROPDOWNS (2026-09-08). About ▾ and Resources ▾, per Maren's sitemap.
   Desktop: hover / keyboard-focus panel. Phone (≤1240, the slide-in menu):
   sub-links render inline under their parent, always expanded — no JS.
   ⚠️ The phone menu centres itself with `.site-nav a:first-child/last-child`
   margin:auto; the wrapper divs sit between those, so that still works.
   ===================================================================== */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > a::after {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  opacity: 0.7;
}
/* invisible bridge so the pointer can travel from the link down into the panel */
.nav-item::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.sub {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  flex-direction: column;
  min-width: 232px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--teal);
  padding: 10px 0;
  z-index: 70;
  box-shadow: 0 10px 28px rgba(96, 28, 55, 0.08);
}
.nav-item:hover .sub, .nav-item:focus-within .sub { display: flex; }
.site-nav .sub a:not(.btn) {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 500;
  padding: 9px 20px;
  border-bottom: none;
  white-space: nowrap;
}
.site-nav .sub a:not(.btn):hover { background: var(--wash-cream); color: var(--burgundy); }

@media (max-width: 1240px) {
  .nav-item { flex-direction: column; gap: 12px; }
  .nav-item::after { display: none; }
  .nav-item > a::after { display: none; }
  .sub {
    display: flex;
    position: static;
    min-width: 0;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    gap: 10px;
    align-items: center;
  }
  .site-nav .sub a:not(.btn) { font-size: 0.82rem; color: var(--mauve); padding: 0; }
}

/* --- figcaptions on dark grounds (PFK page "why me" on slate) --- */
.ground-slate figcaption, .band-dark figcaption { color: rgba(244, 231, 224, 0.7); }

/* =====================================================================
   MAREN'S 9/19 REVIEW ROUND (added 2026-09-20)
   ===================================================================== */

/* --- testimonial byline with a headshot. Square, hard-edged, with the same
       offset-teal echo the big photo frames use. Quotes without a photo keep
       the plain <cite>. --- */
.quote-by { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
.quote-by img {
  flex: none;
  width: 64px;
  height: 64px;
  object-fit: cover;
  box-shadow: 4px 4px 0 var(--teal);
}
.quote-by cite { margin-top: 0; }
.quote-by cite span { display: block; margin-top: 5px; letter-spacing: 0.18em; opacity: 0.85; }
.pull-quote .quote-by { margin-top: 26px; }
.pull-quote .quote-by img { width: 76px; height: 76px; }

/* --- check-in band: Maren's Canva mock-up replaces the CSS-drawn sheet --- */
.worksheet .sheet-photo {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 18px 40px -28px rgba(96, 28, 55, 0.45);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.worksheet:hover .sheet-photo { transform: translate(-4px, -4px); box-shadow: 0 26px 46px -28px rgba(96, 28, 55, 0.55); }
p.optin-alt { font-size: 0.95rem; }

/* --- events hub: local happenings cards --- */
.event-meta { font-weight: 500; color: var(--ink) !important; font-size: 0.92rem !important; }
.event-host { font-size: 0.84rem !important; font-style: italic; }
.offer-cols.three .offer-col .event-meta + .text-link,
.offer-cols.three .offer-col .event-host + .text-link { padding-top: 14px; }

/* --- media list on the events page sits directly under a paragraph --- */
.chapter-body > .media-list { margin-top: 30px; }

/* --- media page: the GHL media inquiry form is taller than the contact form --- */
.media-embed iframe { min-height: 996px; }

/* --- discovery call page: embedded GHL booking calendar. Fixed heights (no GHL auto-resize
       script on this one, see the page comment); the widget scrolls inside if taller. --- */
.calendar-embed { margin-top: 34px; padding: 18px 18px 8px; }
.calendar-embed iframe { display: block; width: 100%; height: 960px; }
.calendar-fallback { margin-top: 18px; font-size: 0.9rem; color: var(--ink-light); }
@media (max-width: 900px) {
  .calendar-embed { padding: 8px 6px 4px; }
  .calendar-embed iframe { height: 1080px; }
}

/* --- 3-up offer columns: the middle column had no right padding, so long lines ran
       into the next column's divider. Desktop only; phones stack to one column. --- */
@media (min-width: 901px) {
  .offer-cols.three .offer-col:nth-child(2) { padding-right: 32px; }
}

/* --- in-page links (#what, #book-call, #cohort ...): the header is sticky, so without an
       offset the target section slides up underneath it and its heading is hidden. 64px
       parks the section so its heading sits about half an inch below the header. --- */
html { scroll-padding-top: 64px; }

/* ---------- Round 2 (2026-09-26): masterclass + calculator landing ---------- */

/* --- masterclass page: old way vs new way, side by side. Old way is a .said-list,
       new way an .outcomes list; both sit under a .list-head. --- */
.ways-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; margin-top: 34px; }
.ways-grid .list-head { margin-top: 0; }
.ways-grid .said-list { margin-top: 14px; }
.ways-grid .said { font-size: 1.12rem; padding: 18px 0 18px 40px; }
.ways-grid .outcomes { margin-top: 14px; }
.ways-grid .outcomes li { font-size: 0.98rem; }

/* --- calculator landing: the GHL "Calculator" form is short, so its panel is shorter
       than the check-in form's 745px. --- */
.optin-form.calc-form iframe { min-height: 560px; }
.form-panel .calendar-fallback { margin-top: 14px; text-align: center; }

@media (max-width: 900px) {
  .ways-grid { grid-template-columns: 1fr; row-gap: 36px; margin-top: 26px; }
}

/* --- 2x2 variant of the offer columns (Resources "Free" section, four cards).
       Base .offer-cols is already 2 columns; this just resets the left hairline on
       the first card of each row and rules a hairline between the two rows. --- */
.offer-cols.four .offer-col:nth-child(odd) { border-left: none; padding-left: 0; padding-right: 48px; }
.offer-cols.four .offer-col:nth-child(n+3) { border-top: 1px solid var(--hairline); }
@media (max-width: 900px) {
  .offer-cols.four .offer-col:nth-child(odd) { padding-right: 0; }
}

/* ---------- Round 3 (2026-09-28): legal pages, footer legal links, announcement bar ---------- */
.chapter.legal { padding-top: 8px; }
.legal .container { max-width: 860px; }
.legal-body h2 { font-size: 1.28rem; margin: 40px 0 12px; line-height: 1.3; }
.legal-body p { font-size: 0.97rem; color: var(--ink-light); margin-bottom: 16px; }
.legal-body p strong { color: var(--ink); }
.legal-body .legal-date { margin-top: 40px; font-size: 0.85rem; color: var(--mauve); }
.footer-legal a { color: var(--mauve); border-bottom: 1px solid var(--blush); }

/* Announcement bar above the header. Hidden until script.js confirms it was not dismissed. */
.announce { background: var(--slate); color: var(--cream); font-size: 0.84rem; }
.announce[hidden] { display: none; }
.announce-inner { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 9px 28px; }
.announce p { margin: 0; text-align: center; line-height: 1.5; color: var(--cream); }
.announce-label { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.68rem; font-weight: 500; color: var(--teal); margin-right: 10px; }
.announce a { color: var(--cream); font-weight: 500; border-bottom: 1px solid rgba(244, 231, 224, 0.5); white-space: nowrap; }
.announce-close { background: none; border: 0; color: var(--cream); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 2px 4px; opacity: 0.8; }
.announce-close:hover { opacity: 1; }
@media (max-width: 900px) {
  .announce { font-size: 0.8rem; }
  .announce-inner { padding: 8px 16px; gap: 10px; }
  .announce-label { display: block; margin: 0 0 2px; }
}