/* ============================================================
   Beyond The High Road — design system
   Brand: Montserrat (headings) + Raleway (body) — client kit.
   Palette: client hexes (#14faff #00cddc #00c7a4 #ff144c #292b2b #fff)
   over derived deep-teal ink & aqua-mist surfaces (AA-checked by
   scripts/check-contrast.mjs — tune there if you change a value).
   Signature: the "road line" — the logo's blue→cyan→green gradient
   as drawn S-curve dividers and heading rules.
   ============================================================ */

:root {
  /* client brand hexes */
  --white: #FFFFFF;
  --cyan: #14FAFF;
  --aqua: #00CDDC;
  --green: #00C7A4;
  --red: #FF144C;
  --gray: #292B2B;

  /* derived surfaces + ink (aqua family) */
  --mist: #F3FBFC;
  --foam: #E1F5F7;
  --line: #CEE9EC;
  --ink: #0F3A41;
  --body-c: #292B2B;
  --soft: #3F565B;
  --teal: #086B7A;         /* interactive on light */
  --teal-strong: #0A5560;
  --deep: #062E36;         /* dark band */
  --deep-2: #0A3E49;
  --on-deep: #EAF7F8;
  --on-deep-soft: #A9D7DD;
  --accent-dark: #9BF3E9;  /* accent italic on dark */

  /* gradients (logo road: blue → cyan → green) */
  --grad-full: linear-gradient(100deg, #1379A4 0%, #00CDDC 55%, #00C7A4 100%);
  --grad-bright: linear-gradient(100deg, #00CDDC 0%, #00C7A4 100%);

  /* type */
  --f-head: 'Montserrat', 'Avenir Next', 'Helvetica Neue', sans-serif;
  --f-body: 'Raleway', 'Avenir Next', 'Helvetica Neue', sans-serif;
  --fs-body: clamp(16.5px, 1.35vw, 19px);

  /* rhythm */
  --pad-x: clamp(22px, 5vw, 64px);
  --band-y: clamp(80px, 10vw, 150px);
  --radius: 22px;
  --shadow-soft: 0 2px 26px rgba(6, 46, 54, 0.07);
  --shadow-lift: 0 18px 44px rgba(6, 46, 54, 0.16);
  --maxw: 1140px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--body-c);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-strong); }
:focus-visible { outline: 2.5px solid var(--aqua); outline-offset: 3px; border-radius: 4px; }
.band-deep :focus-visible, .hero :focus-visible { outline-color: var(--cyan); }

h1, h2, h3, h4 { font-family: var(--f-head); color: var(--ink); text-wrap: balance; margin: 0; }
p { margin: 0 0 1em; }

.container { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.container--narrow { max-width: 820px; }

/* ---------- type roles ---------- */
.display {
  font-weight: 300;
  font-size: clamp(42px, 6.2vw, 86px);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.h2 { font-weight: 400; font-size: clamp(30px, 4vw, 50px); line-height: 1.14; letter-spacing: -0.005em; }
.h3 { font-weight: 500; font-size: clamp(21px, 2.3vw, 29px); line-height: 1.25; }
.lede { font-size: clamp(17.5px, 1.6vw, 21.5px); line-height: 1.65; }
.accent { font-family: var(--f-body); font-style: italic; font-weight: 300; }
h1 .accent, .h2 .accent { letter-spacing: 0; }
.on-light .accent, .band-mist .accent { color: var(--teal); }

.eyebrow {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 18px;
}
.band-deep .eyebrow, .hero .eyebrow { color: var(--cyan); }

/* the logo's gradient underline, reused as a heading rule */
.rule-grad {
  display: block;
  width: 76px; height: 3px;
  border-radius: 99px;
  background: var(--grad-full);
  margin: 26px 0 0;
}
.rule-grad--center { margin-left: auto; margin-right: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 17px 36px;
  cursor: pointer;
  border: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease, background 0.25s ease;
}
.btn-primary { background: var(--grad-bright); color: var(--ink); box-shadow: 0 10px 26px rgba(0, 199, 164, 0.32); }
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.04); color: var(--ink); box-shadow: 0 14px 30px rgba(0, 199, 164, 0.4); }
.btn-deep { background: var(--deep); color: var(--on-deep); box-shadow: 0 10px 28px rgba(6, 46, 54, 0.3); }
.btn-deep:hover { background: #06262c; color: var(--on-deep); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
.link-underline {
  display: inline-block;
  font-family: var(--f-head);
  font-weight: 700; font-size: 15px;
  color: var(--ink);
  border-bottom: 2.5px solid transparent;
  border-image: linear-gradient(100deg, #00CDDC, #00C7A4) 1;
  border-bottom-style: solid;
  padding-bottom: 4px;
}
.link-underline:hover { color: var(--teal); }

/* ---------- header / nav ---------- */
.site-header {
  position: relative;
  z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px var(--pad-x);
}
.site-header .logo-link { display: inline-flex; }
.site-header .logo {
  height: 74px; width: auto;
  background: var(--white);
  border-radius: 16px;
  padding: 9px 18px;
  box-shadow: 0 8px 26px rgba(6, 46, 54, 0.22);
}
.nav-toggle-input { position: absolute; opacity: 0; }
.nav-toggle {
  display: none;
  z-index: 60;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 6px 18px rgba(6,46,54,0.22);
  cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: var(--ink); transition: transform 0.3s, opacity 0.3s; }
.site-nav { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 34px); }
.site-nav a {
  font-family: var(--f-head);
  font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--white);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--cyan); border-image: var(--grad-bright) 1; border-bottom-style: solid; }
.site-nav .nav-login { border: 1.5px solid rgba(255,255,255,0.55); border-radius: 999px; padding: 9px 20px; }
.site-nav .nav-login:hover { border-color: var(--cyan); border-image: none; }
/* light header variant (interior pages) */
.header-light { background: var(--white); border-bottom: 1px solid var(--line); }
.header-light .site-nav a { color: var(--ink); }
.header-light .site-nav a:hover, .header-light .site-nav a[aria-current="page"] { color: var(--teal); }
.header-light .site-nav .nav-login { border-color: var(--line); }
.header-light .logo { box-shadow: none; padding: 0; border-radius: 0; height: 66px; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed; inset: 0;
    z-index: 50;
    flex-direction: column; justify-content: center; gap: 30px;
    background: rgba(6, 46, 54, 0.97);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .site-nav a { font-size: 17px; color: var(--white); }
  /* the open menu is a dark overlay on EVERY page — the light-header link colors
     (ink on white) must not leak into it, or the menu is ink-on-dark */
  .header-light .site-nav a { color: var(--white); }
  .header-light .site-nav a:hover, .header-light .site-nav a[aria-current="page"] { color: var(--cyan); }
  .header-light .site-nav .nav-login { border-color: rgba(255, 255, 255, 0.55); }
  .nav-toggle-input:checked ~ .site-nav { opacity: 1; pointer-events: auto; }
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .nav-toggle-input:focus-visible ~ .nav-toggle { outline: 2.5px solid var(--aqua); outline-offset: 3px; }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; color: var(--white); }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media video, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(112deg, rgba(6, 40, 48, 0.82) 0%, rgba(6, 46, 54, 0.55) 52%, rgba(6, 62, 66, 0.24) 100%);
}
.hero-body { position: relative; flex: 1; display: flex; align-items: center; padding: clamp(40px, 7vh, 90px) var(--pad-x) clamp(90px, 12vh, 150px); }
.hero-copy { max-width: 820px; }
.hero-copy h1 { color: var(--white); }
.hero-copy h1 .accent { color: var(--cyan); }
.hero-copy .lede { color: rgba(255, 255, 255, 0.92); max-width: 560px; margin: 26px 0 42px; }
/* portrait crops the wide frame to a ~36% slice — aim it at the signature road
   (right side of frame) so the text lives over it, and deepen the scrim there
   since the road area is the sunlit part of the shot */
@media (max-width: 900px) {
  .hero-media video, .hero-media img { object-position: 72% 50%; }
  .hero-overlay { background: linear-gradient(180deg, rgba(6, 40, 48, 0.78) 0%, rgba(6, 46, 54, 0.52) 55%, rgba(6, 62, 66, 0.3) 100%); }
}
/* staggered entrance */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { opacity: 0; transform: translateY(26px); animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  .hero-copy > *:nth-child(2) { animation-delay: 0.12s; }
  .hero-copy > *:nth-child(3) { animation-delay: 0.24s; }
  .hero-copy > *:nth-child(4) { animation-delay: 0.38s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* ---------- the road line (signature) ---------- */
.road-divider { display: block; width: 100%; height: auto; margin: 0; }
.road-divider path { stroke-width: 3.5; fill: none; stroke-linecap: round; }
/* draw-in animation lives in the fade-in block below, gated on html.js */

/* ---------- bands (section rhythm) ---------- */
.band { padding: var(--band-y) var(--pad-x); }
.band--tight { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.band-mist { background: var(--mist); }
.band-foam { background: var(--foam); }
.band-deep { background: var(--deep); color: var(--on-deep); }
.band-deep h1, .band-deep h2, .band-deep h3 { color: var(--white); }
.band-deep p { color: var(--on-deep); }
.band-deep .accent { color: var(--accent-dark); }
.band-grad { background: linear-gradient(112deg, #0A5E80 0%, #0794A4 46%, #009C80 100%); color: var(--white); }
.band-grad h1, .band-grad h2 { color: var(--white); }
.band-grad p { color: rgba(255, 255, 255, 0.94); }
.center { text-align: center; }
.center .rule-grad { margin-left: auto; margin-right: auto; }

/* ---------- cards ---------- */
.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(206, 233, 236, 0.55);
  padding: clamp(30px, 3.6vw, 50px);
  display: flex; flex-direction: column; gap: 16px;
}
.card .kicker { font-family: var(--f-head); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); margin: 0; }
.card h3 { margin: 0; }
.card .hook { font-style: italic; font-weight: 400; font-size: 19px; color: var(--teal); margin: 0; }
.card .desc { margin: 0; flex: 1; }
.card-deep { background: var(--deep-2); border-color: rgba(20, 250, 255, 0.14); box-shadow: var(--shadow-lift); }
.card-deep .kicker { color: var(--cyan); }
.card-deep h3 { color: var(--white); }
.card-deep .hook { color: var(--accent-dark); }
.card-deep .desc { color: var(--on-deep); }

/* episode card */
.ep-card {
  background: var(--white);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(206, 233, 236, 0.7);
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}
.ep-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.ep-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad-full); opacity: 0; transition: opacity 0.3s; }
.ep-card:hover::after { opacity: 1; }
.ep-card .thumb { aspect-ratio: 16 / 10.4; background: var(--foam); overflow: hidden; }
.ep-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.ep-card:hover .thumb img { transform: scale(1.035); }
.ep-card .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ep-card .date { font-family: var(--f-head); font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); }
/* cards are white on every band — pin the title ink so dark-band heading
   overrides can't turn it white-on-white */
.ep-card h3 { font-size: 18.5px; line-height: 1.4; font-weight: 500; color: var(--ink); }
.ep-card a { color: inherit; }
.ep-card a:hover { color: var(--teal); }

/* testimonial */
.t-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid rgba(206, 233, 236, 0.7);
  box-shadow: var(--shadow-soft);
  padding: clamp(28px, 3vw, 42px);
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
}
.t-card::before { content: "\201C"; font-family: var(--f-head); font-weight: 300; font-size: 64px; line-height: 0.6; color: var(--green); display: block; height: 30px; }
.t-card .t-title { font-family: var(--f-head); font-weight: 600; font-size: 16px; color: var(--ink); margin: 0; }
.t-card .t-quote { margin: 0; flex: 1; font-size: 16.5px; line-height: 1.7; color: var(--soft); }
.t-card .t-name { font-family: var(--f-head); font-size: 12.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); }

/* stars */
.stars { color: var(--green); font-size: 15px; letter-spacing: 3px; }

/* ---------- media placeholders (photos arrive later) ---------- */
.ph-slot {
  position: relative;
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(20, 250, 255, 0.16), transparent 55%),
    radial-gradient(110% 100% at 88% 92%, rgba(0, 199, 164, 0.2), transparent 52%),
    var(--foam);
  border: 1.5px dashed rgba(8, 107, 122, 0.35);
  border-radius: 26px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ph-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-slot .ph-label {
  position: absolute;
  font-family: var(--f-head);
  font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal-strong);
  background: rgba(255, 255, 255, 0.82);
  padding: 9px 18px; border-radius: 999px;
}
.ph-portrait { aspect-ratio: 4 / 5; max-width: 460px; }
.ph-wide { aspect-ratio: 16 / 11; }
.ph-mini { aspect-ratio: 4 / 5; max-width: 320px; margin: 0 auto; }
.ph-mini .ph-note { padding: 18px 14px; gap: 8px; }
.ph-mini .ph-note-icon { width: 34px; height: 34px; }
.ph-mini .ph-note-title { font-size: 13px; }
.ph-mini .ph-note-spec { font-size: 11.5px; }
/* homepage story sections: copy beside a small photo slot */
.story-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(28px, 4.5vw, 60px); align-items: center; max-width: 1000px; margin: 0 auto; }
.story-grid--flip { grid-template-columns: 0.7fr 1.3fr; }
@media (max-width: 900px) {
  .story-grid, .story-grid--flip { grid-template-columns: 1fr; }
  .story-grid--flip > .ph-backdrop { order: 2; }
}
/* real photo dropped in → the dashed awaiting-asset border disappears */
.ph-slot:has(> img) { border-color: transparent; }
/* "Your photo here" badge shown while a slot awaits Shelby's file */
.ph-note { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 26px 22px; }
.ph-note-icon { width: 46px; height: 46px; color: var(--teal); opacity: 0.85; }
.ph-note-title { font-family: var(--f-head); font-weight: 700; font-size: 15.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-strong); }
.ph-note-spec { font-size: 13.5px; color: var(--soft); background: rgba(255, 255, 255, 0.78); border-radius: 999px; padding: 6px 16px; }
.ph-backdrop { position: relative; isolation: isolate; }
/* decorative offset frame — isolated + negative z so it can never paint over
   neighboring text (the "photo covers text" mobile bug) */
.ph-backdrop::before { content: ""; position: absolute; inset: 26px -26px -26px 26px; border-radius: 30px; background: var(--grad-bright); opacity: 0.24; z-index: -1; }
.ph-backdrop > * { position: relative; }
/* portraits pin beside long copy on desktop only — sticky at phone widths is
   what let the photo ride over text while scrolling */
@media (min-width: 901px) {
  .ph-sticky { position: sticky; top: 40px; }
}

/* ---------- pills (podcast platforms / socials) ---------- */
.pill-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1.5px solid rgba(234, 247, 248, 0.4);
  color: var(--on-deep);
  border-radius: 999px;
  padding: 13px 26px;
  font-family: var(--f-head); font-size: 14px; font-weight: 600;
  transition: border-color 0.25s, background 0.25s;
}
.pill:hover { border-color: var(--cyan); color: var(--white); background: rgba(20, 250, 255, 0.07); }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad-bright); }
.on-light .pill { border-color: var(--line); color: var(--ink); }
.on-light .pill:hover { border-color: var(--green); color: var(--teal); background: rgba(0, 199, 164, 0.06); }

/* social round icons */
.social-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.social-row a {
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line);
  color: var(--teal);
  transition: transform 0.25s, border-color 0.25s, background 0.25s, color 0.25s;
}
.social-row a:hover { transform: translateY(-3px); border-color: var(--green); background: var(--mist); color: var(--teal-strong); }
.social-row svg { width: 20px; height: 20px; fill: currentColor; }
.band-deep .social-row a { border-color: rgba(234, 247, 248, 0.35); color: var(--on-deep); }
.band-deep .social-row a:hover { border-color: var(--cyan); color: var(--white); background: rgba(20, 250, 255, 0.08); }

/* ---------- forms (post to Kajabi) ---------- */
.form-stack { display: flex; flex-direction: column; gap: 14px; max-width: 460px; margin: 0 auto; }
.form-stack input[type="text"], .form-stack input[type="email"] {
  font-family: var(--f-body); font-size: 16px;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 15px 18px;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}
.form-stack input:focus { outline: none; border-color: var(--aqua); box-shadow: 0 0 0 3.5px rgba(0, 205, 220, 0.18); }
.form-stack input::placeholder { color: #5E7175; }
.form-stack .btn { width: 100%; }
.form-note { font-size: 14px; color: var(--soft); }
.band-deep .form-note { color: var(--on-deep-soft); }

/* ---------- footer ---------- */
.site-footer { background: var(--deep); color: var(--on-deep-soft); padding: 58px var(--pad-x) 46px; }
.site-footer .rule-grad { width: 100%; margin: 0 0 44px; opacity: 0.85; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand img { height: 46px; width: 46px; border-radius: 50%; }
.footer-brand span { font-family: var(--f-head); font-weight: 500; letter-spacing: 0.06em; font-size: 15px; color: var(--white); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 22px; }
.site-footer nav a { font-family: var(--f-head); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--on-deep-soft); }
.site-footer nav a:hover { color: var(--cyan); }
.footer-legal { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 26px; }
.footer-copyright { font-size: 13.5px; }
.footer-credit { font-size: 13.5px; margin-left: auto; }
.footer-credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer-credit a:hover { color: var(--cyan); }

/* ---------- scroll fade-ins (JS-gated so no-JS visitors see everything) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-fade] { opacity: 0; transform: translateY(26px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
  html.js [data-fade].visible { opacity: 1; transform: none; }
  html.js [data-fade="2"] { transition-delay: 0.1s; }
  html.js [data-fade="3"] { transition-delay: 0.2s; }
  .road-divider path { stroke-dasharray: 1300; stroke-dashoffset: 1300; transition: stroke-dashoffset 1.6s cubic-bezier(0.4, 0, 0.2, 1); }
  html:not(.js) .road-divider path, .road-divider.visible path { stroke-dashoffset: 0; }
}

/* ---------- long-form article (posts, policies) ---------- */
.article { max-width: 760px; margin: 0 auto; }
.article h1, .article h2, .article h3, .article h4 { margin: 1.7em 0 0.65em; line-height: 1.28; }
.article h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 500; }
.article h3 { font-size: clamp(20px, 2.2vw, 25px); font-weight: 500; }
.article p, .article li { font-size: clamp(16.5px, 1.3vw, 18.5px); line-height: 1.85; color: #333B3C; }
.article li { margin-bottom: 0.5em; }
.article a { border-bottom: 1.5px solid rgba(0, 199, 164, 0.45); padding-bottom: 1px; }
.article a:hover { border-color: var(--green); }
.article blockquote { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 1.5px solid; border-image: linear-gradient(180deg, rgba(19, 121, 164, 0.55), rgba(0, 205, 220, 0.55), rgba(0, 199, 164, 0.55)) 1; font-style: italic; color: var(--soft); }
.article iframe { max-width: 100%; border: 0; border-radius: 14px; }
.article img { border-radius: 16px; height: auto; }
.article hr { border: 0; height: 2px; background: var(--grad-full); opacity: 0.4; border-radius: 2px; margin: 2.4em 0; }

/* ---------- work-with-me + programs moments ---------- */
.video-slot {
  position: relative;
  max-width: 760px;
  margin: clamp(32px, 4vw, 48px) auto 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  border: 1px solid rgba(20, 250, 255, 0.18);
}
.video-slot img, .video-slot video { display: block; width: 100%; height: auto; }
.video-slot-badge {
  position: absolute; top: 14px; right: 14px;
  font-family: var(--f-head); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  padding: 7px 14px;
}
/* ---------- signature moments (JS + motion-preference gated; without either,
   every element below renders in its normal, fully-readable state) ---------- */
/* negative self-talk chips: struck through + released as you scroll past them */
html.js .thought-chip { position: relative; transition: opacity 0.6s ease, transform 0.6s ease; }
html.js .thought-chip::after {
  content: ""; position: absolute; left: 7%; top: 52%; width: 86%; height: 2.5px;
  border-radius: 2px; background: var(--red); opacity: 0.8;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
html.js .thought-chip.dismissed { opacity: 0.42; transform: rotate(-1.3deg); }
html.js .thought-chip.dismissed::after { transform: scaleX(1); }
html.js .thought-chip:nth-child(2).dismissed { transform: rotate(1.1deg); }
/* About word-stack: feelings drift off the road behind you */
html.js .word-stack span { transition: opacity 0.6s ease, transform 0.6s ease; }
html.js .word-stack span.passed { opacity: 0.3; transform: translateX(-16px) rotate(-1deg); }
html.js .word-stack span:nth-child(even).passed { transform: translateX(16px) rotate(1deg); }
/* "You Can Heal." staged reveal + one-shot shimmer */
html.js .heal-reveal { position: relative; overflow: hidden; }
html.js .heal-reveal .heal-w {
  display: inline-block; opacity: 0; transform: translateY(0.35em);
  transition: opacity 2s cubic-bezier(0.22, 1, 0.36, 1), transform 2s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--hi) * 0.65s);
}
html.js .heal-reveal.heal-in .heal-w { opacity: 1; transform: none; }
html.js .heal-reveal::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.5) 50%, transparent 68%);
  transform: translateX(-130%);
}
html.js .heal-reveal.heal-in::after { animation: heal-sweep 2.4s ease 3.6s 1 forwards; }
@keyframes heal-sweep { to { transform: translateX(130%); } }
/* testimonial tilt (pointer devices; JS drives the transform) */
.t-card { transition: transform 0.18s ease-out, box-shadow 0.3s ease; }

/* ---------- blog search (mirrors the live /blog/search endpoint) ---------- */
.blog-search { display: flex; gap: 10px; max-width: 460px; margin: 30px auto 0; }
.blog-search input[type="search"] {
  flex: 1; min-width: 0;
  font-family: var(--f-body); font-size: 16px; color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: 13px 22px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.blog-search input:focus { outline: none; border-color: var(--aqua); box-shadow: 0 0 0 3.5px rgba(0, 205, 220, 0.18); }
.blog-search button {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--grad-bright); color: var(--deep);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.2s;
}
.blog-search button:hover { transform: scale(1.06); }
.blog-search button svg { width: 20px; height: 20px; }
.search-status { text-align: center; color: var(--soft); margin: 24px 0 0; }

/* ---------- the climb — scroll-scrubbed signature road (homepage) ----------
   Defaults (no JS / reduced motion): road fully drawn, every word visible.
   site.js adds .rj-motion only when motion is allowed, then scrubs the stroke
   and lights each word as the road reaches it. */
.road-journey { background: var(--deep); padding: clamp(70px, 9vw, 120px) var(--pad-x); overflow: hidden; }
.rj-stage { position: relative; max-width: 720px; margin: 0 auto; min-height: 115svh; }
.rj-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rj-road { stroke-dasharray: var(--rj-len); }
html.js .rj-motion .rj-road { stroke-dashoffset: var(--rj-off, 0); }
.rj-word {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  font-family: var(--f-head); font-weight: 600; font-size: clamp(15px, 2.4vw, 23px);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-deep);
  text-shadow: 0 2px 18px rgba(6, 46, 54, 0.9);
}
html.js .rj-motion .rj-word { opacity: 0; transform: translate(-50%, -28%); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), color 0.55s ease; }
html.js .rj-motion .rj-word.lit { opacity: 1; transform: translate(-50%, -50%); color: var(--cyan); }
html.js .rj-motion .rj-word.passed { opacity: 0.34; transform: translate(-50%, -50%); color: var(--on-deep-soft); }

/* ---------- episode video block (facade → iframe on click) ---------- */
.ep-player { margin: 0 0 38px; }
.ep-facade { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lift); background: var(--deep); }
.ep-facade img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.ep-facade:hover img { transform: scale(1.03); }
.ep-play { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--grad-bright); color: var(--deep); box-shadow: 0 12px 32px rgba(6, 46, 54, 0.4); transition: transform 0.25s; }
.ep-facade:hover .ep-play { transform: scale(1.08); }
.ep-play svg { width: 34px; height: 34px; margin-left: 5px; }
.ep-player iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); box-shadow: var(--shadow-lift); display: block; }
.ep-watch { margin: 13px 0 0; font-size: 14.5px; }

.check-list, .outcome-list, .program-list { list-style: none; margin: 0; padding: 0; }
.check-list li { padding: 9px 0; line-height: 1.65; }
.card-deep .check-list li { color: var(--on-deep); }
.outcome-list { margin-top: 28px; }
.outcome-list li { padding: 11px 0 11px 34px; position: relative; line-height: 1.65; border-bottom: 1px solid var(--line); }
.outcome-list li:last-child { border-bottom: 0; }
.outcome-list li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--grad-bright);
  mask: radial-gradient(circle at center, transparent 0 4px, #000 4.5px);
  -webkit-mask: radial-gradient(circle at center, transparent 0 4px, #000 4.5px);
}
.program-list { flex: 1; }
.program-list li { padding: 7px 0 7px 24px; position: relative; line-height: 1.6; font-size: 16px; }
.program-list li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 9px; height: 9px; border-radius: 50%; background: var(--grad-bright); }
.card-deep .program-list li { color: var(--on-deep); }

.faq { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; }
.faq details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0 24px;
  box-shadow: var(--shadow-soft);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--f-head); font-weight: 600; font-size: 16.5px;
  color: var(--ink);
  padding: 19px 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 24px; color: var(--teal); transition: transform 0.25s; flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; color: var(--soft); }

.container-list { list-style: none; margin: 0; padding: 0; counter-reset: containers; display: flex; flex-direction: column; gap: clamp(26px, 3vw, 38px); }
.container-list > li {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: clamp(28px, 3.6vw, 46px);
  overflow: hidden;
}
.container-list .kicker { font-family: var(--f-head); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); margin: 0 0 8px; }
.container-list .kicker::after { content: ""; display: block; width: 30px; height: 3px; border-radius: 99px; background: var(--grad-full); margin-top: 10px; }
.container-list h3 { margin: 0 0 14px; }
.container-list ul { margin: 0 0 1em; padding-left: 22px; }
.container-list ul li { margin-bottom: 8px; line-height: 1.6; }

/* ---------- about-page moments ---------- */
.pact-quote {
  margin: 1.6em 0;
  padding: 6px 0 6px 26px;
  border-left: 1.5px solid;
  border-image: linear-gradient(180deg, rgba(19, 121, 164, 0.55), rgba(0, 205, 220, 0.55), rgba(0, 199, 164, 0.55)) 1;
  font-family: var(--f-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.5;
  color: var(--teal-strong);
}
.word-stack { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 1.6em; }
.word-stack span {
  font-family: var(--f-head);
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 19px);
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 18px;
}

/* ---------- homepage moments ---------- */
.feel-stack { margin-top: 30px; }
.feel-stack p {
  margin: 0 0 6px;
  font-family: var(--f-head);
  font-weight: 400;
  font-size: clamp(19px, 2.2vw, 27px);
  line-height: 1.5;
  color: var(--ink);
}
.feel-stack p:first-child { color: var(--soft); font-size: clamp(17px, 1.7vw, 21px); margin-bottom: 12px; }
.thought-stack { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 36px 0; }
.thought-chip {
  margin: 0;
  font-family: var(--f-body);
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 21px);
  color: var(--ink);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 28px;
  max-width: 520px;
}

/* ---------- blog index + posts ---------- */
.ep-grid { margin-bottom: clamp(40px, 5vw, 64px); }
.thumb-fallback { width: 100%; height: 100%; background: radial-gradient(120% 100% at 20% 15%, rgba(20,250,255,0.2), transparent 55%), radial-gradient(110% 100% at 85% 90%, rgba(0,199,164,0.24), transparent 55%), var(--foam); }
.pg { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.pg-link {
  min-width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  font-family: var(--f-head); font-size: 14px; font-weight: 600;
  color: var(--ink);
  border: 1.5px solid var(--line);
  padding: 0 8px;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
a.pg-link:hover { border-color: var(--green); color: var(--teal); background: var(--mist); }
.pg-current { background: var(--grad-bright); border: 0; color: var(--ink); }
.pg-arrow { font-size: 20px; padding-bottom: 3px; }

.post-head { margin-bottom: clamp(28px, 4vw, 44px); }
.post-head h1 { font-size: clamp(30px, 4vw, 48px); font-weight: 400; line-height: 1.16; margin: 10px 0 0; }
.post-head .eyebrow a { color: inherit; }
.post-hero { margin: 0 0 clamp(28px, 4vw, 44px); }
.post-hero img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.post-body > *:first-child { margin-top: 0; }

/* ---------- legal long-form ---------- */
.article.legal { max-width: 820px; }
.article.legal p, .article.legal li { font-size: 15.5px; line-height: 1.8; color: #3A4344; }
.article.legal h2, .article.legal h3, .article.legal h4 { margin: 2em 0 0.6em; }
.article.legal strong { color: var(--ink); }

/* ---------- misc ---------- */
.grid { display: grid; gap: clamp(22px, 3vw, 34px); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--white); color: var(--ink); padding: 12px 20px; z-index: 100; border-radius: 0 0 12px 0; font-family: var(--f-head); font-weight: 600; }
.skip-link:focus { left: 0; }