/* PATH Wellness Coaching , site styles
   Single stylesheet, no framework. Matches the Charting Your Wellness app. */

:root {
  /* Tokens converted from the Charting Your Wellness app's OKLCH design system
     (src/styles.css, read 2026-08-20) so site and app are the same brand. */
  --navy:        #193354;   /* app --primary        oklch(.318 .068 256) */
  --navy-deep:   #0F1F35;   /* app dark --background oklch(.238 .048 256) */
  --navy-soft:   #294870;   /* app --chart-3         oklch(.398 .078 256) */
  --ink:         #2D2A25;   /* app --foreground  warm charcoal oklch(.21 .006 80) */
  --muted:       #756F66;   /* app --muted-foreground warm     oklch(.48 .014 70) */

  --cream:       #FBFAF6;   /* app --background  warm linen     oklch(.977 .004 85) */
  --surface:     #F4F1EA;   /* app --surface     layered ground oklch(.962 .008 82) */
  --cream-warm:  #EEEAE1;   /* app --secondary                  oklch(.94 .012 82) */
  --card-bg:     #FEFDFB;   /* app --card                       oklch(.992 .003 88) */
  --line:        #E5E0D8;   /* app --border                     oklch(.90 .01 80) */

  /* Brand orange, exactly as the app defines it. 3.5:1 on cream , fine for
     large display type and non-text UI, NOT for body text. */
  --orange-brand: #CD6325;  /* app --accent          oklch(.618 .152 47) */
  /* Same hue, darkened to clear WCAG AA wherever there is text. */
  --orange:       #AB4500;  /* 5.3:1 on cream, white-on-it 5.9:1 */
  --orange-hover: #8A3800;
  --link-navy:    #EB8149;  /* app dark --accent, lifted to 4.7:1 on navy for AA */

  --green:       #42614A;   /* app --chart-1         oklch(.462 .052 152) , logo green */
  --gold:        #D38D4C;   /* app --chart-4         oklch(.702 .118 62) */
  --white:       #FFFFFF;

  /* App fonts */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1120px;
  --narrow: 720px;
  --radius: 1.125rem;       /* app --radius */
  --radius-sm: .75rem;
  /* Warm-tinted layered shadow, matching the app's --shadow-calm. */
  --shadow: 0 1px 1px rgba(61, 50, 35, .04), 0 4px 10px rgba(61, 50, 35, .05), 0 16px 32px -12px rgba(61, 50, 35, .08);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: linear-gradient(180deg, var(--cream), var(--surface));
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ---------- typography ---------- */

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.15; margin: 0 0 .5em; color: var(--navy-deep); }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.2rem); margin-top: 2.2em; }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.35rem); margin-top: 1.8em; font-family: var(--sans); font-weight: 700; letter-spacing: -.005em; }
p { margin: 0 0 1.1em; }
a { color: var(--orange); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }
strong { font-weight: 650; }
small { font-size: .85rem; }

.eyebrow {
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange); margin: 0 0 .9rem; font-family: var(--sans);
}
.lede { font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--muted); line-height: 1.6; }

:focus-visible { outline: 3px solid var(--orange-brand); outline-offset: 2px; border-radius: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff;
  padding: .7rem 1.1rem; z-index: 200; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

/* ---------- layout ---------- */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.35rem; }
.narrow { max-width: var(--narrow); margin-left: auto; margin-right: auto; }
section { padding: 4.5rem 0; }
section.tight { padding: 3rem 0; }
.band-cream { background: var(--cream-warm); }
.band-white { background: var(--white); }
.band-navy { background: var(--navy); color: var(--cream); }
.band-navy h2, .band-navy h3 { color: var(--white); }
.band-navy .lede, .band-navy p { color: #D9E2ED; }
.band-navy a { color: var(--link-navy); }
/* buttons must beat the generic link color inside dark bands */
.band-navy a.btn-primary, .hero a.btn-primary, .hero-page a.btn-primary,
.band-photo a.btn-primary { color: #fff; }
.band-navy a.btn-primary:hover, .hero a.btn-primary:hover { color: #fff; }
.band-navy .eyebrow, .hero .eyebrow { color: var(--link-navy); }

/* ---------- header ---------- */

.site-header {
  background: var(--card-bg); color: var(--navy); position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 1rem; min-height: 76px; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--navy); margin-right: auto; }
.brand-logo {
  height: 52px; width: auto; display: block;
  max-height: 52px; max-width: 240px;   /* hard cap: never blows up pre-CSS or if a rule is missed */
}
@media (max-width: 700px) { .brand-logo { height: 40px; max-height: 40px; max-width: 190px; } }
@media (max-width: 480px) { .brand-logo { height: 38px; max-height: 38px; } }
.brand-name { font-family: var(--serif); font-size: 1.12rem; font-weight: 700; line-height: 1.1; }
.brand-sub { display: block; font-family: var(--sans); font-size: .68rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #9FB4CB; }

.nav { display: flex; align-items: center; gap: .3rem; }
.nav a {
  color: var(--navy); text-decoration: none; font-size: .93rem; font-weight: 500;
  padding: .5rem .75rem; border-radius: 8px;
}
.nav a:hover, .nav a[aria-current="page"] { background: var(--cream-warm); color: var(--navy-deep); }
.nav a.nav-cta {
  background: var(--orange); color: #fff; font-weight: 600; margin-left: .4rem;
}
.nav a.nav-cta:hover { background: var(--orange-hover); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line); color: var(--navy);
  border-radius: 8px; padding: .45rem .7rem; font-size: .9rem; cursor: pointer; font: inherit;
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--card-bg);
    flex-direction: column; align-items: stretch; padding: .6rem 1.35rem 1.1rem; gap: .15rem;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
  .nav a { padding: .75rem .6rem; }
  .nav a.nav-cta { margin: .4rem 0 0; text-align: center; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block; padding: .85rem 1.6rem; border-radius: 999px; font-weight: 600;
  font-size: 1rem; text-decoration: none; border: 2px solid transparent; cursor: pointer;
  font-family: var(--sans); line-height: 1.3; transition: background .15s ease, color .15s ease;
}
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-hover); color: #fff; }
.btn-secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: var(--navy); color: var(--cream); }
.band-navy .btn-secondary, .hero .btn-secondary, .hero-page .btn-secondary {
  color: var(--cream); border-color: var(--cream);
}
.band-navy .btn-secondary:hover, .hero .btn-secondary:hover, .hero-page .btn-secondary:hover {
  background: var(--cream); color: var(--navy);
}
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 0; }

/* ---------- hero ---------- */

.hero { background: var(--navy); color: var(--cream); padding: 4.5rem 0 4rem; position: relative; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(1000px 420px at 78% 12%, rgba(205,99,37,.22), transparent 62%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { color: var(--white); max-width: 22ch; font-size: clamp(2rem, 4.2vw, 3rem); }
.hero h1 .accent { color: var(--link-navy); }
.hero .lede { color: #D9E2ED; max-width: 46ch; }
.hero-page { padding: 3.4rem 0 3rem; }
.hero-page h1 { max-width: 22ch; }

/* ---------- cards ---------- */

.grid { display: grid; gap: 1.4rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.card {
  background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.7rem; display: flex; flex-direction: column;
  /* Hairline top highlight over a warm layered shadow, matching the app's calm-card. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), var(--shadow);
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card .card-foot { margin-top: auto; padding-top: 1.1rem; }
.card-link { text-decoration: none; color: inherit; transition: transform .15s ease, border-color .15s ease; }
a.card-link:hover { transform: translateY(-2px); border-color: var(--orange); }
a.card-link:hover h3 { color: var(--orange); }

.pcard { border-top: 5px solid var(--orange-brand); }
.badge-soon {
  display: inline-block; margin-left: .55rem; padding: .12rem .5rem; border-radius: 999px;
  background: var(--navy); color: var(--cream); font-size: .68rem; font-weight: 600;
  letter-spacing: .06em; vertical-align: middle;
}
.pcard .verb { font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); margin-bottom: .6rem; }
.pcard .descriptor { font-size: .97rem; color: var(--muted); font-style: italic; }

.fcard { border-left: 5px solid var(--accent, var(--navy)); }
.fcard .tagline { font-size: .93rem; color: var(--muted); margin-bottom: .8rem; }

/* ---------- lists ---------- */

.checks { list-style: none; padding: 0; margin: 1.2rem 0; }
.checks li { position: relative; padding-left: 1.9rem; margin-bottom: .75rem; }
.checks li::before {
  content: "✓"; position: absolute; left: 0; top: -1px; color: var(--orange);
  font-weight: 700; font-size: 1.05rem;
}
.limits { list-style: none; padding: 0; margin: 1.2rem 0; }
.limits li { position: relative; padding-left: 1.9rem; margin-bottom: .75rem; }
.limits li::before {
  content: "–"; position: absolute; left: .35rem; top: -1px; color: var(--muted); font-weight: 700;
}

.steps { list-style: none; counter-reset: s; padding: 0; margin: 2rem 0 0; }
.steps li { counter-increment: s; position: relative; padding-left: 3.4rem; margin-bottom: 1.8rem; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -2px; width: 2.3rem; height: 2.3rem;
  background: var(--navy); color: var(--cream); border-radius: 50%; display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 1.05rem;
}
.steps h3 { margin: 0 0 .35rem; }
.steps p { margin: 0; color: var(--muted); }

/* ---------- marker bar ---------- */

.marker { background: var(--cream-warm); border-radius: var(--radius); padding: 1.3rem 1.5rem; margin: 1.6rem 0; }
.marker .marker-label { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.marker .marker-scale { display: flex; justify-content: space-between; gap: 1rem; margin-top: .55rem; font-size: .95rem; }
.marker .low { color: var(--muted); }
.marker .high { color: var(--navy); font-weight: 600; }
.marker .marker-track { height: 6px; border-radius: 3px; margin-top: .6rem; background: linear-gradient(90deg, var(--line), var(--accent, var(--navy))); }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--line); margin-top: 2rem; }
.faq details { border-bottom: 1px solid var(--line); padding: 1.1rem 0; }
.faq summary {
  cursor: pointer; font-weight: 650; font-size: 1.05rem; color: var(--navy-deep);
  list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--orange); font-size: 1.4rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: .9rem 0 0; color: var(--muted); }

/* ---------- quiz ---------- */

.quiz { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow); }
.quiz-progress { font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.quiz-bar { height: 5px; background: var(--cream-warm); border-radius: 3px; overflow: hidden; margin-bottom: 1.6rem; }
.quiz-bar > span { display: block; height: 100%; background: var(--orange); transition: width .25s ease; }
.quiz h2 { margin: 0 0 1.3rem; font-size: clamp(1.3rem, 3vw, 1.75rem); }
.quiz-options { display: grid; gap: .7rem; }
.quiz-option {
  text-align: left; background: var(--cream); border: 2px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.15rem; font: inherit; font-size: 1rem; cursor: pointer; color: var(--ink);
  transition: border-color .12s ease, background .12s ease;
}
.quiz-option:hover { border-color: var(--orange); background: #fff; }
.quiz-back { background: none; border: none; color: var(--muted); font: inherit; font-size: .92rem; cursor: pointer; margin-top: 1.3rem; padding: .3rem 0; text-decoration: underline; }
.quiz-result { display: none; }
.quiz-result.show { display: block; }
.result-badge { display: inline-block; background: var(--cream-warm); color: var(--navy); border-radius: 999px; padding: .35rem 1rem; font-size: .85rem; font-weight: 600; margin-bottom: 1rem; }

/* ---------- prose (blog) ---------- */

.prose { max-width: var(--narrow); }
.prose h2 { margin-top: 2.4em; }
.prose h3 { margin-top: 2em; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.prose li { margin-bottom: .5em; }
.post-meta { color: var(--muted); font-size: .92rem; margin-bottom: 1.5rem; }

/* ---------- callout / disclaimer ---------- */

.callout {
  background: var(--cream-warm); border-left: 4px solid var(--orange-brand); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.3rem 1.5rem; margin: 2rem 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--navy-deep); }

/* ---------- breadcrumbs ---------- */

.crumbs { font-size: .88rem; color: var(--muted); margin-bottom: 1.2rem; }
.crumbs a { color: inherit; }
.crumbs span { margin: 0 .45rem; opacity: .6; }
.hero .crumbs, .hero-page .crumbs { color: #A9BCD0; }
.hero .crumbs a, .hero-page .crumbs a { color: #C6D5E4; }

/* ---------- footer ---------- */

.site-footer { background: var(--navy-deep); color: #C3D0DE; padding: 3.5rem 0 2rem; font-size: .94rem; }
.site-footer h2 { color: #fff; font-family: var(--sans); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .9rem; }
.site-footer a { color: #C3D0DE; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14); margin-top: 2.5rem; padding-top: 1.5rem;
  font-size: .85rem; color: #8FA2B5;
}
.footer-bottom p { margin: 0 0 .6rem; }

/* ---------- utility ---------- */

.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }
.center .btn-row { justify-content: center; }
.mt0 { margin-top: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ---------- tables, glossary, print ---------- */

.table-wrap { overflow-x: auto; margin: 1.6rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .96rem; }
th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
th { background: var(--cream-warm); font-weight: 650; color: var(--navy-deep); font-size: .88rem;
     letter-spacing: .02em; }
tbody tr:last-child td { border-bottom: none; }

dl.glossary { margin: 1.4rem 0; }
dl.glossary dt { font-weight: 650; color: var(--navy-deep); margin-top: 1.2rem; }
dl.glossary dd { margin: .3rem 0 0; color: var(--muted); }

@media print {
  .site-header, .site-footer, .btn, .btn-row, .no-print, .crumbs, .band-navy { display: none !important; }
  body { background: #fff; font-size: 11pt; color: #000; }
  .hero, .hero-page { background: #fff !important; color: #000; padding: 0 0 1rem; }
  .hero h1, .hero-page h1 { color: #000; }
  .hero .lede, .hero-page .lede { color: #333; }
  .hero::after { display: none; }
  section { padding: .5rem 0; }
  .callout { border-left: 3px solid #666; background: #f5f5f5; }
  a { color: #000; text-decoration: underline; }
  table { page-break-inside: avoid; }
  h2, h3 { page-break-after: avoid; }
}


/* ---------- images ---------- */

figure { margin: 2rem 0; }
figure img, .ph img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
figcaption { font-size: .88rem; color: var(--muted); margin-top: .6rem; }

.photo-grid {
  display: grid; gap: 1rem; margin: 2rem auto 0; max-width: 660px;
  grid-template-columns: repeat(3, 1fr); justify-content: center;
}
.photo-grid figure { margin: 0; }
.photo-grid img {
  display: block; width: 100%; height: auto; border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px rgba(15,31,53,.10);
}
.photo-grid figcaption { font-size: .8rem; margin-top: .45rem; line-height: 1.35; }
@media (max-width: 620px) { .photo-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; } }

/* Lead photo never exceeds a size its source can serve sharply. */
.lead-photo { max-width: 560px; margin-left: auto; margin-right: auto; }

.split { display: grid; gap: 2.4rem; grid-template-columns: 1fr 1fr; align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split img { border-radius: var(--radius); box-shadow: var(--shadow); }

.band-navy figcaption { color: #AFC0D2; }


/* ---------- stat row (about page) ---------- */

.stats { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.stat { text-align: center; padding: .6rem; }
.stat-n {
  display: block; font-family: var(--serif); font-weight: 500; color: var(--navy);
  font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.1; letter-spacing: -.02em;
}
.stat-l { display: block; font-size: .9rem; color: var(--muted); margin-top: .3rem; }

blockquote.pull {
  margin: 2.4rem 0; padding: 0 0 0 1.4rem; border-left: 4px solid var(--orange-brand);
  font-family: var(--serif); font-size: clamp(1.25rem, 3vw, 1.7rem); font-weight: 500;
  line-height: 1.3; color: var(--navy-deep); letter-spacing: -.01em;
}

ul.topics { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: .55rem; }
ul.topics li {
  background: var(--cream-warm); border: 1px solid var(--line); border-radius: 999px;
  padding: .45rem 1rem; font-size: .95rem; color: var(--navy);
}


/* ==========================================================================
   Motion + polish. Everything here is disabled under prefers-reduced-motion.
   ========================================================================== */

/* --- scroll reveal --- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); }
.js [data-reveal] { transition: opacity .7s cubic-bezier(.22,.61,.36,1),
                                          transform .7s cubic-bezier(.22,.61,.36,1); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }

/* --- header: gains presence on scroll --- */
.site-header { transition: box-shadow .25s ease, background-color .25s ease; }
.site-header.scrolled { box-shadow: 0 2px 20px rgba(15,31,53,.10); }

/* --- hero: layered depth + slow drift --- */
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 620px; height: 620px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(66,97,74,.30), transparent 62%);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-40px,30px,0) scale(1.08); }
}
.hero h1 { position: relative; }

/* --- cards: lift, and a top accent that draws in --- */
.card { transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease, border-color .28s ease; }
a.card-link:hover { transform: translateY(-4px); box-shadow: 0 6px 14px rgba(15,31,53,.09), 0 20px 44px rgba(15,31,53,.10); }
.pcard { position: relative; overflow: hidden; }
.pcard::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: var(--orange-brand); transform: scaleX(.22); transform-origin: left;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
a.pcard:hover::after { transform: scaleX(1); }
.pcard { border-top: none; padding-top: 1.9rem; }

/* --- images: gentle zoom under a fixed frame --- */
.photo-grid figure, figure.zoomable { overflow: hidden; border-radius: var(--radius-sm); }
.photo-grid img, figure.zoomable img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.photo-grid figure:hover img, figure.zoomable:hover img { transform: scale(1.05); }
.photo-grid figure { position: relative; }
.photo-grid figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.6rem .7rem .55rem;
  color: #fff; font-size: .78rem; line-height: 1.3;
  background: linear-gradient(to top, rgba(15,31,53,.82), transparent);
}

/* --- buttons --- */
.btn { transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }
.btn-primary { box-shadow: 0 2px 6px rgba(171,69,0,.28); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(171,69,0,.32); }
.btn-secondary:hover { transform: translateY(-2px); }

/* --- section rhythm + a soft divider between bands --- */
section { position: relative; }
.band-cream + section, section + .band-cream, .band-navy + section { border-top: none; }
.band-cream, .band-navy { position: relative; }

/* --- eyebrow gets a small rule --- */


/* --- stats --- */
.stat { transition: transform .3s ease; }
.stat:hover { transform: translateY(-3px); }
.stat-n { font-variant-numeric: tabular-nums; }

/* --- links get an animated underline --- */
.prose a, .narrow p a, .checks a {
  text-decoration: none; background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .3s ease, color .18s ease;
}
.prose a:hover, .narrow p a:hover, .checks a:hover { background-size: 0% 1px; }

/* --- steps: connecting line --- */
.steps { position: relative; }
.steps li::after {
  content: ""; position: absolute; left: 1.15rem; top: 2.5rem; bottom: -1.4rem; width: 2px;
  background: linear-gradient(var(--line), transparent);
}
.steps li:last-child::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero::before { animation: none; }
  .card, .btn, .stat, .photo-grid img { transition: none !important; }
  a.card-link:hover, .btn:hover, .stat:hover { transform: none !important; }
}

/* home split photo: fixed frame so it never dictates the section height */
.home-photo { max-width: 400px; margin-left: auto; margin-right: auto; }
@media (max-width: 860px) { .home-photo { max-width: 360px; } }
.split { gap: 3.2rem; }


/* ---------- hero: two columns so the headline has room and the space is used ---------- */

.hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center;
}
.hero-figure { margin: 0; position: relative; }
.hero-figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); box-shadow: 0 18px 50px rgba(0,0,0,.34);
}
.hero-figure::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); pointer-events: none;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .hero-figure { max-width: 420px; }
}
@media (max-width: 620px) { .hero-figure { max-width: 340px; margin: 0 auto; } }

/* On phones the hero stacks to one column with the headline on top, so the
   corner glows must not sit behind the words. Drop the drifting green circle
   and lift the orange flare up above the text, softened. */
@media (max-width: 900px) {
  .hero::before { display: none; }
  .hero::after {
    background: radial-gradient(560px 230px at 88% -6%, rgba(205,99,37,.15), transparent 60%);
  }
}

.hero h1 .accent { color: var(--link-navy); }


/* ---------- section photos, paired with the copy beside them ---------- */

.split.reverse > div:first-child { order: 2; }
.split.reverse > div:last-child { order: 1; }
@media (max-width: 860px) {
  .split.reverse > div:first-child { order: 1; }
  .split.reverse > div:last-child { order: 2; }
}

figure.framed { margin: 0; }
figure.framed img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); box-shadow: 0 2px 6px rgba(15,31,53,.08), 0 16px 40px rgba(15,31,53,.10);
}
figure.framed figcaption {
  margin-top: .7rem; font-size: .82rem; color: var(--muted); letter-spacing: .01em;
}
@media (max-width: 860px) { figure.framed { max-width: 460px; margin: 0 auto; } }


/* ---------- full-bleed photo band ---------- */

.band-photo { padding: 0; position: relative; overflow: hidden; }
.band-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
}
.band-photo { height: clamp(260px, 34vw, 420px); }
.band-caption {
  position: absolute; inset: auto 0 0 0; padding: 2.6rem 0 2rem;
  background: linear-gradient(to top, rgba(15,31,53,.86), rgba(15,31,53,.18) 62%, transparent);
  color: #fff;
}
.band-caption h2 { color: #fff; margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.4rem); }
.band-caption .eyebrow { color: var(--link-navy); margin-bottom: .4rem; }
.band-caption .wrap {
  max-width: 760px;
  background: rgba(15, 31, 53, .48);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 22px;
  padding: 1.5rem 2.1rem;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}
@media (max-width: 620px) { .band-caption { padding: 1.6rem 0 1.1rem; } }

/* ---------- collage gallery ---------- */

.photo-grid {
  display: grid; gap: .9rem; margin: 2.2rem auto 0; max-width: 940px;
  grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense;
}
.photo-grid figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius-sm); }
.photo-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-grid figure.g-wide { grid-column: span 2; }
.photo-grid figure.g-tall { grid-row: span 2; }
@media (max-width: 780px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-grid figure.g-wide { grid-column: span 2; }
  .photo-grid figure.g-tall { grid-row: span 1; }
}

.band-caption .band-sub { margin: .55rem 0 0; font-size: clamp(1rem, 1.6vw, 1.15rem); color: #DCE6F0; }

.quiz-hint { font-size: .88rem; color: var(--muted); margin: 1rem 0 0; }
.quiz-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.2rem; }
.quiz-actions .quiz-back { margin-top: 0; }
.quiz-option { position: relative; padding-right: 3rem; }
.quiz-option.is-picked { border-color: var(--orange); background: #fff; font-weight: 600; }
.quiz-option.is-picked::after {
  content: "\2713"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%);
  color: var(--orange); font-weight: 700;
}
#qnext:disabled { opacity: .45; cursor: not-allowed; }
#qnext:disabled:hover { transform: none; background: var(--orange); }

.res-prog { font-size: .82rem; color: var(--muted); margin: 0 0 .7rem; }
.res-prog strong { color: var(--navy); font-weight: 600; }

.cover-art { max-width: 420px; margin-left: auto; margin-right: auto; }
.cover-art img { box-shadow: 0 4px 12px rgba(15,31,53,.14), 0 24px 60px rgba(15,31,53,.16); }

.grid-2x2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .grid-2x2 { grid-template-columns: 1fr; } }

/* compact program list, used where full cards would be repetitive */
.prog-links { list-style: none; padding: 0; margin: 1.6rem auto 0; max-width: 560px; text-align: left; }
.prog-links li { border-bottom: 1px solid var(--line); }
.prog-links li:last-child { border-bottom: none; }
.prog-links a {
  display: flex; flex-direction: column; gap: .15rem; padding: .95rem .4rem;
  text-decoration: none; color: var(--navy); transition: padding-left .2s ease, color .2s ease;
}
.prog-links a:hover { padding-left: .9rem; color: var(--orange); }
.prog-links strong { font-weight: 650; }
.prog-links span { font-size: .9rem; color: var(--muted); }
.band-cream .prog-links a { color: var(--navy); }

/* --- price ------------------------------------------------------------- */
.price-callout { border-left: 4px solid var(--orange); }
.price-callout p:first-child { font-size: 1.08rem; margin-top: 0; }
.price-callout strong:first-child { font-size: 1.35rem; font-family: var(--serif); }
.price-callout .small,
p.small { font-size: .9rem; color: var(--muted); margin-bottom: 0; }
.price-line { font-size: 1.02rem; }