/* H.E.A.R.T. preview v3 · built on milorcoaching.com's own system: Cormorant Garamond + Jost,
   ivory / warm-light / cream / taupe sections, flame orange #F74E28 accents. No dark sections. */
:root {
  --orange: #F74E28;
  --orange-dark: #d93e1a;
  --cream: #EEE9E2;
  --taupe: #E8DDD4;
  --ivory: #F5F0E8;
  --warm-light: #F0EDE7;
  --warm-mid: #E8E3DB;
  --warm-deep: #DDD8CF;
  --black: #1a1410;
  --warm-gray: #5e534c;
  --body-text: #2c2420;
  --white: #FFFFFF;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --wrap: 1200px;
  --gutter: 64px;
  --ease: cubic-bezier(.16,1,.3,1);
}
@media (max-width: 900px) { :root { --gutter: 20px; } }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); font-weight: 400; font-size: 17px; line-height: 1.8; color: var(--body-text); background: var(--ivory); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: rgba(247,78,40,.18); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--orange); color: #fff; padding: 10px 16px; z-index: 200; }
.skip:focus { left: 12px; top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; }

/* layout: one left edge everywhere */
.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: calc(820px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: 110px 0; position: relative; border-top: 3px solid var(--taupe); }
section.tight { padding: 80px 0; }
main > section:first-child { border-top: none; }
@media (max-width: 900px) { section { padding: 64px 0; } section.tight { padding: 52px 0; } }

/* backgrounds (all light, from the live site) */
.bg-ivory { background: var(--ivory); }
.bg-white { background: var(--warm-light); }
.bg-sand { background: var(--cream); }
.bg-deep { background: var(--warm-deep); }
.warm-light, .bg-glow { background: var(--ivory); }
.warm-light::before, .bg-glow::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(247,78,40,.07) 0%, transparent 70%); }
.warm-light > *, .bg-glow > * { position: relative; z-index: 1; }
.bg-flame { background: var(--orange); color: #fff; border-top: none; overflow: hidden; }
.bg-flame::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(45deg, transparent, transparent 60px, rgba(0,0,0,.025) 60px, rgba(0,0,0,.025) 61px); }
.bg-flame > * { position: relative; z-index: 1; }

/* typography: one system */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 300; color: var(--black); }
h1 em, h2 em, h3 em { font-style: italic; color: var(--orange); }
h1 { font-size: clamp(2.6rem, 5.6vw, 5rem); line-height: 1.04; letter-spacing: -.02em; }
h2 { font-size: clamp(2.1rem, 3.8vw, 3.6rem); line-height: 1.1; }
h3 { font-size: 1.5rem; font-weight: 400; line-height: 1.3; }
h4 { font-size: 1.3rem; font-weight: 400; line-height: 1.35; }
@media (max-width: 900px) { h2 { font-size: clamp(1.7rem, 5.5vw, 2.6rem); } }
.roman { font-style: normal; }
.kicker { font-family: var(--font-body); font-size: .72rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--orange); display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.kicker::before { content: ""; width: 22px; height: 1px; background: var(--orange); flex-shrink: 0; }
.center .kicker { justify-content: center; }
.center .kicker::after { content: ""; width: 22px; height: 1px; background: var(--orange); flex-shrink: 0; }
@media (max-width: 900px) { .kicker { font-size: .65rem; } }
.lede { font-size: 1.05rem; font-weight: 400; line-height: 1.9; color: var(--body-text); max-width: 580px; margin-top: 20px; }
.center .lede { margin-left: auto; margin-right: auto; }
.whisper { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.6; color: var(--black); }
.small { font-size: .9rem; color: var(--warm-gray); }
.center { text-align: center; }
.mt-s { margin-top: 14px; } .mt-m { margin-top: 32px; } .mt-l { margin-top: 52px; }

/* buttons (live-site behavior) */
.btn { display: inline-block; padding: 17px 44px; background: var(--orange); color: var(--white); font-family: var(--font-body); font-size: .72rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; box-shadow: 0 8px 28px rgba(247,78,40,.35); transition: background .3s, transform .2s, box-shadow .3s; }
.btn:hover { background: var(--orange-dark); transform: translateY(-1px); box-shadow: 0 14px 36px rgba(247,78,40,.45); }
.btn.white, .bg-flame .btn { background: var(--white); color: var(--orange); font-weight: 600; padding: 19px 54px; box-shadow: none; }
.btn.white:hover, .bg-flame .btn:hover { background: var(--black); color: var(--white); transform: translateY(-2px); box-shadow: 0 18px 36px rgba(0,0,0,.18); }
.quiet-link { display: inline-block; margin-top: 18px; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--warm-gray); text-decoration: none; border-bottom: 1px solid rgba(94,83,76,.3); padding-bottom: 2px; transition: color .3s, border-color .3s; }
.quiet-link:hover { color: var(--orange); border-color: var(--orange); }
.bg-flame .quiet-link { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.4); }
.bg-flame .quiet-link:hover { color: #fff; border-color: #fff; }
.text-link { color: var(--black); text-decoration: none; border-bottom: 1px solid var(--orange); }
.text-link:hover { color: var(--orange); }

/* preview bar + nav (light) */
.preview-bar { background: var(--warm-deep); color: var(--body-text); font-size: .72rem; letter-spacing: .06em; text-align: center; padding: 7px 16px; }
.preview-bar b { color: var(--orange); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; margin-right: 8px; }
.preview-bar button { background: none; border: none; color: var(--black); text-decoration: underline; font: inherit; cursor: pointer; }
nav.site { position: sticky; top: 0; z-index: 60; background: rgba(245,240,232,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--taupe); }
nav.site .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand svg { height: 46px; width: auto; }
.brand .sub { font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: var(--warm-gray); line-height: 1.5; border-left: 1px solid var(--taupe); padding-left: 14px; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a { text-decoration: none; font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--body-text); transition: color .3s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--orange); }
.nav-links .btn { padding: 11px 24px; font-size: .66rem; color: #fff; box-shadow: none; }
.nav-links .btn:hover { color: #fff; }
.menu-btn { display: none; background: none; border: 1px solid var(--taupe); padding: 9px 14px; cursor: pointer; font: inherit; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--body-text); }
@media (max-width: 1040px) {
  .menu-btn { display: block; }
  .nav-links { display: none; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--ivory); border-bottom: 1px solid var(--taupe); padding: 8px var(--gutter) 22px; }
  .nav-links.open { display: flex; }
  .nav-links li { border-bottom: 1px solid var(--taupe); }
  .nav-links a { display: block; padding: 15px 0; }
  .nav-links li:last-child { border: none; padding-top: 16px; }
  .nav-links .btn { display: block; text-align: center; padding: 16px; }
  .brand .sub { display: none; }
}

/* hero (the live site's structure, in light) */
.hero { min-height: min(calc(100vh - 110px), 820px); display: flex; align-items: center; padding: 96px 0 120px; border-top: none; overflow: hidden; }
.hero-eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.hero-eyebrow-line { width: 36px; height: 1px; background: var(--orange); flex: none; }
.hero-eyebrow-text { font-size: .68rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--orange); }
.hero h1 { font-size: clamp(2.8rem, 6.5vw, 6.2rem); line-height: 1.02; letter-spacing: -.02em; margin-bottom: 28px; }
.hero-subline { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.05rem, 1.9vw, 1.42rem); line-height: 1.75; color: var(--body-text); max-width: 560px; margin-bottom: 48px; }
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero-actions .quiet-link { margin-top: 0; }
.hero-nudge { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--warm-gray); margin-top: 22px; }
.hero-nudge span { color: var(--orange); font-weight: 500; }
.hero-scroll { position: absolute; bottom: 36px; left: max(var(--gutter), calc((100% - var(--wrap)) / 2)); display: flex; align-items: center; gap: 12px; }
.hero-scroll-line { width: 36px; height: 1px; background: rgba(94,83,76,.3); position: relative; overflow: hidden; }
.hero-scroll-line::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--orange); animation: scanLine 2s ease 1s infinite; }
.hero-scroll-text { font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: var(--warm-gray); }
@keyframes scanLine { 0% { left: -100%; } 100% { left: 100%; } }
@media (max-width: 900px) { .hero { min-height: auto; padding: 56px 0 96px; } .hero h1 { font-size: clamp(2.2rem, 9vw, 3.2rem); line-height: 1.06; } .hero-actions { flex-direction: column; align-items: flex-start; gap: 16px; } .hero-subline { margin-bottom: 32px; } .hero-scroll { bottom: 24px; } }

/* two-column sections: tops aligned */
.two-col { display: grid; grid-template-columns: 1fr 1.25fr; gap: 80px; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 40px; } }

/* the live site's signal cards: cream on taupe, numbered */
.cards { display: grid; gap: 2px; background: var(--taupe); }
.cards.two { grid-template-columns: 1fr 1fr; }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.cards.five { grid-template-columns: repeat(5, 1fr); }
.card { background: var(--cream); padding: 40px 36px; border: 1px solid transparent; transition: border-color .3s, background .3s; }
.card:hover { border-color: rgba(247,78,40,.2); background: #f1ebe4; }
.card-num { font-family: var(--font-display); font-size: .92rem; letter-spacing: .2em; color: var(--orange); opacity: .85; margin-bottom: 10px; display: block; }
.card-text { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; line-height: 1.45; color: var(--black); }
.card p { margin-top: 10px; font-size: 1rem; line-height: 1.8; }
@media (max-width: 1000px) { .cards.five { grid-template-columns: 1fr 1fr; } .cards.three { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .cards.two, .cards.five { grid-template-columns: 1fr; } .card { padding: 30px 26px; } }
.pressure-cards .card { padding: 26px 32px; }
.pressure-cards .card-text { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }

/* the pause (inline + page) */
.pause-card { background: var(--cream); border-top: 3px solid var(--orange); padding: clamp(28px, 4vw, 52px); max-width: 880px; margin: 48px auto 0; text-align: left; }
.carry-options { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--taupe); }
.carry-options button { font: inherit; font-family: var(--font-display); font-size: 1.3rem; font-style: italic; text-align: left; color: var(--black); background: var(--ivory); border: 1px solid transparent; padding: 20px 22px; cursor: pointer; transition: border-color .3s, background .3s; }
.carry-options button:hover { border-color: rgba(247,78,40,.3); background: #fbf7f1; }
.carry-options button[aria-pressed="true"] { border-color: var(--orange); background: #fff7f2; }
@media (max-width: 640px) { .carry-options { grid-template-columns: 1fr; } }
.carry-answer { margin-top: 32px; animation: fade .8s var(--ease); }
.carry-answer .practice, .reflection .practice, .welcome-letter .practice { margin-top: 18px; padding: 18px 22px; background: var(--ivory); border-left: 2px solid var(--orange); }
.practice b { display: block; font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--orange); margin-bottom: 6px; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pause-progress { font-size: .72rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--warm-gray); margin-bottom: 10px; }
.pq { border: none; padding: 32px 0; border-bottom: 1px solid var(--taupe); }
.pq:first-of-type { border-top: 1px solid var(--taupe); }
.pq legend { float: left; width: 100%; font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.75rem); font-weight: 400; color: var(--black); line-height: 1.3; padding: 0; }
.pq .opts { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--taupe); margin-top: 20px; }
.pq input { position: absolute; opacity: 0; pointer-events: none; }
.pq label { display: block; background: var(--cream); border: 1px solid transparent; padding: 15px 18px; cursor: pointer; transition: border-color .3s, background .3s; }
.pq label:hover { border-color: rgba(247,78,40,.3); }
.pq input:checked + label { border-color: var(--orange); background: #fff7f2; color: var(--black); }
.pq input:focus-visible + label { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (max-width: 600px) { .pq .opts { grid-template-columns: 1fr; } }
.reflection { background: var(--cream); border-top: 3px solid var(--orange); padding: clamp(28px, 5vw, 56px); }
.pillar-name { font-family: var(--font-display); font-style: italic; font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 300; color: var(--orange); line-height: 1.1; }

/* journey: awareness -> behavior -> culture (timeline cards) */
.journey .card { border-top: 3px solid rgba(247,78,40,.22); transition: border-color .4s; padding: 48px 40px; }
.journey .card:hover { border-top-color: var(--orange); background: var(--cream); }
.journey .step { font-family: var(--font-display); font-size: 2.6rem; font-weight: 300; color: var(--orange); line-height: 1; margin-bottom: 10px; font-style: italic; }
.journey h3 { font-family: var(--font-body); font-size: .96rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--black); margin-bottom: 10px; }

/* pillars (the live site's pillar cards) */
.pillar { background: var(--cream); padding: 44px 24px; text-align: center; position: relative; overflow: hidden; transition: background .3s; }
.pillar::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.pillar:hover { background: #FAF8F5; }
.pillar:hover::after { transform: scaleX(1); }
.pillar .letter { font-family: var(--font-display); font-size: 3.8rem; font-weight: 300; color: var(--orange); line-height: 1; margin-bottom: 14px; }
.pillar h4 { font-family: var(--font-body); font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--black); margin-bottom: 12px; }
.pillar p { font-family: var(--font-display); font-size: 1.08rem; font-style: italic; color: #5a4f48; line-height: 1.6; }
.outcome-band { background: var(--taupe); padding: 36px 32px; font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.45rem); font-style: italic; color: var(--black); line-height: 1.6; text-align: center; margin-top: 2px; }

/* guide (Mili) */
.guide { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: center; }
.guide .photo img { width: 100%; max-width: 440px; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
.creds-quiet { margin-top: 26px; padding-left: 16px; border-left: 2px solid rgba(247,78,40,.3); font-size: .92rem; color: var(--warm-gray); line-height: 1.9; transition: border-color .4s; }
.creds-quiet:hover { border-left-color: var(--orange); }
@media (max-width: 900px) { .guide { grid-template-columns: 1fr; gap: 40px; } .guide .photo img { max-width: 360px; } }

/* invitation */
.invite { text-align: center; max-width: calc(820px + 2 * var(--gutter)); }
.facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 40px; margin-top: 30px; font-size: .72rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--warm-gray); }
.facts span::before { content: "·"; color: var(--orange); margin-right: 10px; }
.bg-flame h2, .bg-flame h2 em { color: #fff; }
.bg-flame h2 em { font-style: italic; }
.bg-flame .kicker { color: #fff; }
.bg-flame .kicker::before, .bg-flame .kicker::after { background: #fff; }
.bg-flame .lede { color: rgba(255,255,255,.92); }

/* city quote (live-site section, verbatim) */
.city-quote { height: 520px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 0; border-top: none; }
.city-quote-bg { position: absolute; inset: 0; background: url('/assets/img/city-window.jpg') center 40% / cover no-repeat; filter: brightness(.68) saturate(1.15) sepia(.22); transform: scale(1.04); }
.city-quote::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(160deg, rgba(18,8,2,.50) 0%, rgba(12,5,1,.14) 50%, rgba(18,8,2,.54) 100%), radial-gradient(ellipse at 55% 42%, rgba(220,120,30,.22) 0%, rgba(180,80,10,.10) 55%, transparent 80%); }
.city-quote-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 40px; }
.city-quote p { font-family: var(--font-display); font-size: clamp(1.7rem, 3.6vw, 3.1rem); font-weight: 300; line-height: 1.38; color: #fff; letter-spacing: -.01em; text-shadow: 0 2px 32px rgba(0,0,0,.55), 0 1px 8px rgba(0,0,0,.35); }
.city-quote p em { font-style: italic; color: var(--orange); text-shadow: 0 2px 20px rgba(247,78,40,.3); }
.city-quote p .big { font-size: 1.35em; font-style: italic; }
.city-quote .dn { margin-left: auto; margin-right: auto; }
@media (max-width: 600px) { .city-quote { height: auto; min-height: 340px; padding: 72px 0; } .city-quote-inner { padding: 0 20px; } }

/* founding circle page */
.role { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--taupe); margin-top: 48px; }
.role > div { background: var(--cream); padding: 48px 44px; }
.role ul { list-style: none; margin-top: 16px; }
.role li { display: flex; gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid rgba(0,0,0,.06); font-family: var(--font-display); font-size: 1.15rem; color: var(--black); line-height: 1.45; }
.role li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); flex: none; transform: translateY(-3px); }
.role li:last-child { border-bottom: none; }
@media (max-width: 760px) { .role { grid-template-columns: 1fr; } .role > div { padding: 36px 26px; } }
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--taupe); margin-top: 48px; }
.path { background: var(--cream); padding: 52px 44px; display: flex; flex-direction: column; border-top: 3px solid rgba(247,78,40,.22); transition: border-color .4s; }
.path:hover { border-top-color: var(--orange); }
.path .k { font-size: .74rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--warm-gray); }
.path h3 { font-size: 2.2rem; font-weight: 300; margin-top: 8px; }
.path .for { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: #5a4f48; margin-top: 4px; }
.path ul { list-style: none; margin: 22px 0 28px; flex: 1; }
.path li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 1rem; }
.path li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); flex: none; transform: translateY(-3px); }
.rate { font-family: var(--font-display); font-size: 3.2rem; font-weight: 300; color: var(--orange); line-height: 1; }
.rate-sub { font-size: .74rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--warm-gray); margin-top: 10px; }
@media (max-width: 820px) { .paths { grid-template-columns: 1fr; } .path { padding: 40px 28px; } }
.worth { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--taupe); margin-top: 48px; }
.worth > div { background: var(--cream); padding: 44px 32px; text-align: center; transition: background .3s; }
.worth > div:hover { background: var(--warm-light); }
.worth .n { font-family: var(--font-display); font-size: clamp(2.2rem, 3.6vw, 3.2rem); font-weight: 300; color: var(--orange); line-height: 1.05; margin-bottom: 12px; }
.worth p { font-size: .95rem; line-height: 1.7; }
.worth .src { font-size: .78rem; color: var(--warm-gray); margin-top: 8px; }
@media (max-width: 820px) { .worth { grid-template-columns: 1fr; } }
.practical { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--taupe); margin-top: 48px; }
.practical div { background: var(--cream); padding: 26px 22px; }
.practical .k { font-size: .7rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--warm-gray); display: block; margin-bottom: 6px; }
@media (max-width: 820px) { .practical { grid-template-columns: 1fr 1fr; } }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--taupe); margin-top: 2px; counter-reset: s; }
.steps div { counter-increment: s; background: var(--cream); padding: 34px 28px; border-top: 3px solid rgba(247,78,40,.22); transition: border-color .4s; }
.steps div:hover { border-top-color: var(--orange); }
.steps div::before { content: counter(s, decimal-leading-zero); font-family: var(--font-display); font-size: 2rem; font-weight: 300; color: var(--orange); display: block; margin-bottom: 8px; line-height: 1; }
.steps h4 { font-family: var(--font-body); font-size: .9rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--black); }
.steps p { font-size: .95rem; margin-top: 8px; line-height: 1.7; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 48px; }
.fit > div { padding: 52px 44px; background: var(--ivory); }
.fit > div + div { background: var(--warm-deep); }
.fit ul { list-style: none; margin-top: 8px; }
.fit li { display: flex; gap: 15px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,.06); font-family: var(--font-display); font-size: 1.12rem; color: var(--black); line-height: 1.45; }
.fit li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); flex: none; transform: translateY(-3px); }
.fit > div + div li::before { background: var(--warm-gray); opacity: .4; }
.fit li:last-child { border-bottom: none; }
.fit .kicker::before { display: none; }
.fit .kicker { color: var(--warm-gray); letter-spacing: .26em; margin-bottom: 18px; }
@media (max-width: 720px) { .fit { grid-template-columns: 1fr; } .fit > div { padding: 36px 24px; } }
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--taupe); margin-top: 48px; }
.qcard { background: var(--cream); padding: 44px 40px; }
.qcard blockquote { font-family: var(--font-display); font-style: italic; font-size: 1.4rem; line-height: 1.5; color: var(--black); margin: 16px 0; }
.qcard figcaption { font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--warm-gray); }
@media (max-width: 760px) { .quotes { grid-template-columns: 1fr; } }
.faq { margin-top: 40px; border-top: 1px solid var(--taupe); }
.faq details { border-bottom: 1px solid var(--taupe); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 44px 24px 0; position: relative; font-family: var(--font-display); font-size: 1.45rem; font-weight: 400; color: var(--black); transition: color .3s; }
.faq summary:hover { color: var(--orange); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 20px; font-family: var(--font-body); font-weight: 300; font-size: 1.6rem; color: var(--orange); transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 0 26px; max-width: 720px; }

/* placeholders, samples */
.ph { background: rgba(247,78,40,.08); border-bottom: 1px dashed var(--orange-dark); padding: 0 4px; color: var(--orange-dark); font-style: normal; white-space: nowrap; }
.sample-tag, .open-tag { display: inline-block; font-family: var(--font-body); font-style: normal; font-size: .62rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #6b4b00; background: #fff6dc; border: 1px dashed #b07a00; padding: 3px 8px; }

/* forms */
form.f { display: grid; gap: 18px; }
.f .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .f .row { grid-template-columns: 1fr; } }
.f label { display: grid; gap: 8px; font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--warm-gray); }
.f input, .f select, .f textarea { font: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--black); padding: 14px 14px; border: 1px solid var(--warm-deep); background: var(--ivory); border-radius: 0; width: 100%; transition: border-color .3s; }
.f textarea { min-height: 100px; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--orange); }
.f .check { display: flex; gap: 12px; align-items: flex-start; text-transform: none; letter-spacing: .01em; font-size: .95rem; font-weight: 400; color: var(--body-text); }
.f .check input { width: auto; margin-top: 6px; accent-color: var(--orange); }
.form-card { background: var(--cream); padding: clamp(28px, 5vw, 52px); border-top: 3px solid var(--orange); }
.form-note { font-size: .86rem; color: var(--warm-gray); }
.inline-form { display: flex; gap: 0; max-width: 480px; margin-top: 16px; border: 1px solid var(--warm-deep); background: var(--ivory); }
.inline-form input { flex: 1; font: inherit; padding: 14px; border: none; background: transparent; color: var(--black); }
.inline-form input:focus { outline: none; }
.inline-form:focus-within { border-color: var(--orange); }
.inline-form button { font: inherit; font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; background: var(--orange); color: #fff; border: none; cursor: pointer; padding: 0 20px; transition: background .3s; }
.inline-form button:hover { background: var(--orange-dark); }
.center .inline-form { margin-left: auto; margin-right: auto; }

/* welcome letter */
.welcome-letter { background: var(--cream); border-top: 3px solid var(--orange); padding: clamp(32px, 6vw, 64px); max-width: 720px; margin: 40px auto 0; text-align: left; }
.welcome-letter .sig { font-family: var(--font-display); font-style: italic; font-size: 1.8rem; color: var(--black); margin-top: 26px; }

/* video slot */
.video-slot { aspect-ratio: 16 / 9; border: 1px dashed rgba(247,78,40,.45); background: var(--cream); display: grid; place-items: center; text-align: center; padding: 24px; }
.video-slot .play { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--orange); display: grid; place-items: center; margin: 0 auto 14px; color: var(--orange); font-size: 1.2rem; }

/* inner pages */
.page-hero { padding: 100px 0 90px; border-top: none; }
@media (max-width: 900px) { .page-hero { padding: 56px 0 56px; } }
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 40px; } }
.photo-frame img { width: 100%; object-fit: cover; }
.cred-list { list-style: none; margin-top: 24px; }
.cred-list li { display: flex; gap: 15px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,.06); font-family: var(--font-display); font-size: 1.12rem; color: var(--black); line-height: 1.45; }
.cred-list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); flex: none; transform: translateY(-3px); }
.gallery { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2px; background: var(--taupe); }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.gallery img.tall { grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr; } .gallery img.tall { grid-row: auto; aspect-ratio: 3 / 4; } }
.talk-parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--taupe); margin-top: 48px; counter-reset: t; }
.talk-parts div { counter-increment: t; background: var(--cream); padding: 44px 36px; border-top: 3px solid rgba(247,78,40,.22); transition: border-color .4s; }
.talk-parts div:hover { border-top-color: var(--orange); }
.talk-parts div::before { content: counter(t, decimal-leading-zero); font-family: var(--font-display); font-size: 2.4rem; font-weight: 300; color: var(--orange); display: block; margin-bottom: 8px; line-height: 1; }
@media (max-width: 760px) { .talk-parts { grid-template-columns: 1fr; } }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--taupe); margin-top: 48px; }
.stat { background: var(--cream); padding: 44px 32px; text-align: center; transition: background .3s; }
.stat:hover { background: var(--warm-light); }
.stat .num { font-family: var(--font-display); font-size: clamp(2.6rem, 4.6vw, 4.2rem); font-weight: 300; color: var(--orange); line-height: 1; margin-bottom: 12px; }
.stat .src { font-size: .78rem; color: var(--warm-gray); margin-top: 8px; }
@media (max-width: 680px) { .stats { grid-template-columns: 1fr; } }

/* book */
.book { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; }
.book-cover { perspective: 1200px; }
.book-cover img { width: 100%; max-width: 400px; margin: 0 auto; transform: rotateY(-12deg) rotateX(3deg); box-shadow: -20px 26px 50px rgba(26,20,16,.28); transition: transform .8s var(--ease); }
.book-cover:hover img { transform: rotateY(-4deg) rotateX(1deg) translateY(-6px); }
.book .meta { margin-top: 18px; display: flex; gap: 28px; flex-wrap: wrap; font-size: .74rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--warm-gray); }
@media (max-width: 900px) { .book { grid-template-columns: 1fr; gap: 48px; } }

/* draft notes */
.dn { display: none; }
body.notes-on .dn { display: block; position: relative; margin: 22px 0; max-width: 620px; background: #fffbe8; border: 1px solid #e6cf7a; border-left: 4px solid #d9a400; padding: 12px 16px; font-family: var(--font-body); font-size: .84rem; font-style: normal; line-height: 1.55; color: #4a3b10; text-align: left; letter-spacing: 0; text-shadow: none; }
body.notes-on .dn::before { content: "Draft note"; display: block; font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #8a6a00; margin-bottom: 4px; }
body.notes-on .dn.open::before { content: "Draft note · still open"; color: #a05a00; }
body.notes-on .center .dn, body.notes-on .invite .dn { margin-left: auto; margin-right: auto; }
.notes-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: flex; align-items: center; gap: 10px; background: var(--ivory); color: var(--body-text); border: 1px solid var(--warm-deep); padding: 11px 16px 11px 14px; font: inherit; font-size: .66rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 24px rgba(26,20,16,.1); }
.notes-toggle .sw { width: 30px; height: 16px; border-radius: 10px; background: var(--warm-deep); position: relative; transition: background .2s; }
.notes-toggle .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .2s; }
body.notes-on .notes-toggle .sw { background: #d9a400; }
body.notes-on .notes-toggle .sw::after { transform: translateX(14px); }
.notes-toggle .count { background: #d9a400; color: var(--black); border-radius: 9px; padding: 1px 7px; font-weight: 600; letter-spacing: 0; }

/* footer (the live site's: cream, centered) */
footer.site { background: var(--cream); padding: 72px var(--gutter) 64px; border-top: 3px solid var(--taupe); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; }
footer.site .footer-logo svg { height: 72px; width: auto; }
footer.site .tagline { font-family: var(--font-display); font-size: 1.05rem; font-style: italic; font-weight: 300; color: var(--body-text); max-width: 560px; line-height: 1.65; }
footer.site .divider { width: 40px; height: 1px; background: var(--taupe); }
footer.site .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; list-style: none; }
footer.site .links a, footer.site .contact a { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--warm-gray); text-decoration: none; transition: color .3s; }
footer.site .links a:hover, footer.site .contact a:hover { color: var(--orange); }
footer.site .contact { font-size: .74rem; letter-spacing: .06em; color: var(--warm-gray); line-height: 1.9; }
footer.site .fine { font-size: .7rem; letter-spacing: .08em; color: var(--warm-gray); line-height: 1.7; max-width: 640px; }
@media (max-width: 900px) { footer.site { padding: 48px 20px 80px; gap: 20px; } footer.site .footer-logo svg { height: 52px; } }

/* reveal */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .carry-answer { animation: none; }
  .hero-scroll-line::after { animation: none; left: 0; }
  .book-cover img, .book-cover:hover img { transform: none !important; transition: none !important; }
  .btn, .btn:hover { transition: none; transform: none; }
  .pillar::after { transition: none; }
}

/* print */
@media print {
  .preview-bar, nav.site, footer.site, .notes-toggle, .no-print, .dn { display: none !important; }
  body { background: #fff; font-size: 10.5pt; }
  section { padding: 14pt 0 !important; border: none; }
}

/* alignment: hero shares the page's left edge; card numbers more visible */
.hero > .wrap { width: 100%; }
.card-num { font-size: 1rem; opacity: 1; font-weight: 500; }
.invite .lede { margin-left: auto; margin-right: auto; }
.invite .kicker { justify-content: center; }
.invite .kicker::after { content: ""; width: 22px; height: 1px; background: var(--orange); flex-shrink: 0; }
.seat-line { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--warm-gray); margin-top: 22px; }
.seat-line b { color: var(--orange); font-weight: 500; }

/* ===== v3.1 · orange as accent only; ivory everywhere; more imagery ===== */
/* headlines: italic stays, orange only where it accents (hero word, city quote, .accent) */
h1 em, h2 em, h3 em { color: inherit; }
.hero h1 em, h1 em.accent, h2 em.accent { color: var(--orange); }
/* ivory, without the peach glow (glow kept only on the invitation) */
.warm-light::before { display: none; }
.warm-light { background: var(--ivory); }
/* closing band: ivory, accent rule on top instead of an orange field */
.bg-close { background: var(--ivory); border-top: 3px solid var(--orange); }
/* text on photographs: ivory, as on the live site */
.city-quote p { color: var(--ivory); }

/* hero: text on ivory + a meaningful image of the person we're speaking to */
.hero.with-image .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.hero-figure { position: relative; margin: 0; }
.hero-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 30%; }
.hero-figure figcaption { position: absolute; left: -1px; bottom: 28px; background: var(--ivory); padding: 12px 18px; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--black); border-left: 2px solid var(--orange); max-width: 80%; }
@media (max-width: 900px) { .hero.with-image .wrap { grid-template-columns: 1fr; gap: 36px; } .hero-figure img { aspect-ratio: 4 / 3; } .hero-scroll { display: none; } }

/* image band (the live site's team-photo section) */
.photo-band { position: relative; height: 460px; overflow: hidden; padding: 0; border-top: none; }
.photo-band-bg { position: absolute; inset: 0; background-size: cover; background-position: center 45%; filter: saturate(1.05) sepia(.12); }
.photo-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,8,2,.40) 0%, rgba(14,6,1,.08) 30%, rgba(14,6,1,.12) 65%, rgba(18,8,2,.55) 100%); }
.photo-band-text { position: absolute; z-index: 1; bottom: 44px; left: max(var(--gutter), calc((100% - var(--wrap)) / 2)); font-family: var(--font-display); font-size: clamp(1.25rem, 2.3vw, 1.8rem); font-weight: 300; font-style: italic; line-height: 1.45; color: var(--ivory); text-shadow: 0 2px 20px rgba(0,0,0,.45); max-width: 560px; }
.photo-band .dn { position: absolute; z-index: 2; top: 20px; left: 20px; }
@media (max-width: 700px) { .photo-band { height: 300px; } .photo-band-text { left: 20px; right: 20px; bottom: 22px; font-size: 1.1rem; } }

/* invitation with an image */
.invite-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; }
.invite-split img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.invite-split .lede { margin-left: 0; }
@media (max-width: 900px) { .invite-split { grid-template-columns: 1fr; gap: 36px; } }

/* hero options page */
.option-label { display: flex; align-items: baseline; gap: 16px; padding: 18px var(--gutter); background: var(--warm-deep); font-size: .74rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--black); border-top: 3px solid var(--orange); }
.option-label span { font-family: var(--font-display); font-size: 1.05rem; font-style: italic; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--body-text); }
.photo-band-text { left: auto; right: max(var(--gutter), calc((100% - var(--wrap)) / 2)); text-align: right; }
.photo-band::after { background: linear-gradient(180deg, rgba(18,8,2,.30) 0%, rgba(14,6,1,.05) 35%, rgba(14,6,1,.10) 60%, rgba(18,8,2,.62) 100%), radial-gradient(ellipse at 88% 92%, rgba(18,8,2,.55) 0%, transparent 55%); }
@media (max-width: 700px) { .photo-band-text { left: 20px; right: 20px; text-align: left; } }

/* ===== v4 · baseline = milorcoaching.com, with Mili's brand guide hex values =====
   Flame orange #F74E28 (CTAs, accents) · Warm cream #EFECE8 (sections, alternating rows)
   Warm taupe #EBE0DA (dividers, subtitles, highlights, table headers) · Ivory #F6F3EC (page, light sections)
   Black / white (body text, reverse text on dark). Headline font: The Seasons; body: TT Drugs (stand-ins below until licensed). */
:root {
  --orange: #F74E28;
  --cream: #EFECE8;
  --taupe: #EBE0DA;
  --ivory: #F6F3EC;
  --warm-light: #EFECE8;
  --warm-mid: #EFECE8;
  --warm-deep: #EBE0DA;
  --black: #1a1410;
  --body-text: #1a1410;
  --white: #FFFFFF;
  --font-display: 'The Seasons', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'TT Drugs', 'Jost', 'Helvetica Neue', Arial, sans-serif;
}
body { background: var(--ivory); color: var(--black); }

/* two section tones, alternating, with a solid taupe divider between every section */
section { border-top: 3px solid var(--taupe); }
.bg-ivory, .warm-light, .bg-glow, .bg-close { background: var(--ivory); }
.bg-white, .bg-sand, .bg-cream { background: var(--cream); }
.bg-close { border-top: 3px solid var(--orange); }
.bg-glow::before { background: radial-gradient(ellipse at center, rgba(247,78,40,.06) 0%, transparent 70%); }

/* grids: 2px taupe gutters, cards contrast with their section */
.cards, .paths, .role, .worth, .practical, .steps, .quotes, .stats, .talk-parts, .carry-options, .pq .opts, .gallery { background: var(--taupe); }
.card, .pillar, .path, .role > div, .worth > div, .practical div, .steps div, .qcard, .stat, .talk-parts div { background: var(--cream); }
.bg-white .card, .bg-sand .card, .bg-cream .card, .bg-white .pillar, .bg-sand .pillar, .bg-cream .pillar,
.bg-sand .path, .bg-sand .qcard, .bg-white .stat, .bg-white .talk-parts div, .bg-sand .talk-parts div, .bg-white .steps div { background: var(--ivory); }
.card:hover { background: #fbf9f4; border-color: rgba(247,78,40,.2); }
.fit > div { background: var(--ivory); }
.fit > div + div { background: var(--taupe); }
.pause-card, .reflection, .form-card, .welcome-letter { background: var(--ivory); }
.bg-white .pause-card, .bg-sand .pause-card { background: var(--ivory); }
.outcome-band { background: var(--taupe); }
.preview-bar { background: var(--taupe); }
footer.site { background: var(--cream); border-top: 3px solid var(--taupe); }

/* hero: the live site's photographic hero (her image), reverse text */
.hero.photo { position: relative; min-height: min(100vh, 900px); padding: 120px 0 140px; color: #fff; background: #1a0a02; }
.hero.photo .hero-bg { position: absolute; inset: 0; background:
    linear-gradient(160deg, rgba(18,8,2,.60) 0%, rgba(22,10,2,.20) 45%, rgba(16,6,1,.62) 100%),
    radial-gradient(ellipse at 58% 52%, rgba(200,100,20,.18) 0%, rgba(160,70,10,.08) 55%, transparent 75%),
    url('https://images.unsplash.com/photo-1600880292089-90a7e086ee0c?auto=format&fit=crop&w=1920&q=85') center / cover no-repeat; }
.hero.photo .wrap { position: relative; z-index: 1; }
.hero.photo h1 { color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.hero.photo h1 em { color: var(--orange); }
.hero.photo .hero-subline { color: rgba(255,255,255,.96); }
.hero.photo .quiet-link { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.35); }
.hero.photo .quiet-link:hover { color: #fff; border-color: #fff; }
.hero.photo .hero-nudge { color: rgba(255,255,255,.65); }
.hero.photo .hero-scroll-line { background: rgba(255,255,255,.3); }
.hero.photo .hero-scroll-text { color: rgba(255,255,255,.45); }
.hero.photo .dn { color: #4a3b10; }

/* the live site's "human difference" band */
.human-diff { background: var(--cream); border-top: 3px solid var(--orange); text-align: center; }
.human-diff h2 { font-size: clamp(3rem, 6.5vw, 6rem); line-height: 1.06; letter-spacing: -.02em; margin-bottom: 24px; }
.human-diff p { font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.75rem); font-style: italic; color: var(--black); line-height: 1.7; max-width: 820px; margin: 0 auto; }

/* the live site's team-photo band (her image) */
.photo-band { height: 460px; }
.photo-band-text { left: max(var(--gutter), calc((100% - var(--wrap)) / 2)); right: auto; text-align: left; color: rgba(255,255,255,.92); }
.photo-band::after { background: linear-gradient(180deg, rgba(18,8,2,.45) 0%, rgba(14,6,1,.10) 30%, rgba(14,6,1,.15) 70%, rgba(18,8,2,.55) 100%), radial-gradient(ellipse at 50% 40%, rgba(200,100,20,.14) 0%, rgba(160,70,10,.06) 55%, transparent 80%); }
@media (max-width: 700px) { .photo-band { height: 280px; } }

/* pillars and fit lists as on the live site */
.cards.five .pillar { border-top: none; }
.section-intro { max-width: 760px; }
.hero.photo .hero-bg { filter: brightness(.5) saturate(.75) sepia(.2); }
.hero.photo { background: #1a0a02; }

/* ===== v4.1 · the live site's actual warm values (brand guide updated to match) =====
   Flame Orange #F74E28 · Ivory #F5F0E8 · Warm Light #F0EDE7 · Warm Cream #EEE9E2 · Warm Taupe #E8DDD4
   Warm Deep #DDD8CF · Warm Black #1A1410 (headlines) · Warm Brown #2C2420 (body) · Warm Gray #5E534C (labels) */
:root {
  --orange: #F74E28;
  --ivory: #F5F0E8;
  --warm-light: #F0EDE7;
  --cream: #EEE9E2;
  --warm-mid: #E8E3DB;
  --taupe: #E8DDD4;
  --warm-deep: #DDD8CF;
  --black: #1a1410;
  --body-text: #2c2420;
  --warm-gray: #5e534c;
}
body { color: var(--body-text); }
/* the live site's three section tones: ivory, warm light, cream */
.bg-ivory, .warm-light, .bg-glow, .bg-close { background: var(--ivory); }
.bg-white { background: var(--warm-light); }
.bg-sand, .bg-cream { background: var(--cream); }
/* the live site's warm glows */
.human-diff::before, .bg-glow::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.human-diff::before { background: radial-gradient(ellipse at center, rgba(200,100,20,.07) 0%, rgba(247,78,40,.04) 45%, transparent 70%); }
.bg-glow::before { background: radial-gradient(ellipse at center, rgba(247,78,40,.07) 0%, transparent 70%); }
.human-diff > * { position: relative; z-index: 1; }
.preview-bar { background: var(--warm-deep); }

/* ===== v5 · sunlight (Nov 5): Mili's direction from her ChatGPT session and Recordings 22–23 =====
   Ivory, warm gold, muted blush, charcoal type, morning light. Set on <html data-palette>:
   "sun" (default: gold accents, charcoal button) · "sun-flame" (gold accents, flame button) · "flame" (v4.2 colours). */
:root {
  --flame: #F74E28; --flame-dark: #d93e1a;
  --gold: #A07D45;       /* large numerals, letters, marks (3:1 on ivory and cream) */
  --gold-text: #806236;  /* small gold text (4.5:1 on ivory and cream) */
  --gold-line: #CDB284;  /* rules and hairlines only */
  --blush: #F2E3D9;
  --charcoal: #2F2B28;
}

/* -- every palette: the light hero -- */
.hero.photo.light { color: var(--black); background: var(--ivory); }
.hero.photo.light .hero-bg { background: url('/assets/img/light-arch.jpg') 78% center / cover no-repeat; filter: saturate(.9) sepia(.34) brightness(1.06); }
.hero.photo.light::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(251,248,242,.95) 0%, rgba(251,248,242,.82) 38%, rgba(251,248,242,.2) 62%, rgba(251,248,242,0) 76%); }
.hero.photo.light::after { content: ""; position: absolute; inset: -20%; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 48% 38% at 30% 26%, rgba(255,214,150,.42) 0%, rgba(255,214,150,0) 72%); animation: sunDrift 28s ease-in-out infinite alternate; }
@keyframes sunDrift { from { transform: translate3d(-3%, -2%, 0); } to { transform: translate3d(6%, 4%, 0); } }
.hero.photo.light .wrap, .hero.photo.light .hero-scroll { z-index: 2; }
.hero.photo.light h1 { color: var(--black); text-shadow: none; }
.hero.photo.light .hero-subline { color: var(--body-text); }
.hero.photo.light .quiet-link { color: var(--warm-gray); border-color: rgba(94,83,76,.3); }
.hero.photo.light .quiet-link:hover { color: var(--orange); border-color: var(--orange); }
.hero.photo.light .hero-nudge { color: var(--warm-gray); }
.hero.photo.light .hero-scroll-line { background: rgba(94,83,76,.3); }
.hero.photo.light .hero-scroll-text { color: var(--warm-gray); }
@media (max-width: 900px) {
  .hero.photo.light { padding: 64px 0 96px; }
  .hero.photo.light::before { background: linear-gradient(180deg, rgba(251,248,242,.9) 0%, rgba(251,248,242,.84) 62%, rgba(251,248,242,.6) 100%); }
  .hero.photo.light .hero-bg { background-position: 88% center; }
}

/* -- the arrival band: sunlit curtains, charcoal words -- */
.photo-band.light .photo-band-bg { filter: saturate(.95) sepia(.08) brightness(1.03); background-position: center 50%; }
.photo-band.light::after { background: linear-gradient(90deg, rgba(251,248,242,.93) 0%, rgba(251,248,242,.74) 40%, rgba(251,248,242,0) 68%); }
.photo-band.light .photo-band-text { top: 50%; bottom: auto; transform: translateY(-50%); color: var(--black); text-shadow: none; font-size: clamp(1.45rem, 2.6vw, 2.15rem); max-width: 560px; }
.photo-band.light .photo-band-text em { color: inherit; }
@media (max-width: 700px) {
  .photo-band.light { height: 340px; }
  .photo-band.light::after { background: linear-gradient(180deg, rgba(251,248,242,.9), rgba(251,248,242,.72)); }
  .photo-band.light .photo-band-text { font-size: 1.3rem; }
}

/* -- two pathways, one philosophy -- */
.pathways { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--taupe); margin-top: 48px; }
.pathway { display: flex; flex-direction: column; background: var(--ivory); text-decoration: none; color: inherit; transition: background .3s; }
.pathway img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(.85) sepia(.22); transition: filter .6s var(--ease); }
.pathway:hover img { filter: saturate(.95) sepia(.12) brightness(1.04); }
.pw-body { padding: 34px 40px 40px; }
.pathway h3 { font-size: 2rem; font-weight: 300; }
.pathway p { margin-top: 10px; font-size: 1rem; line-height: 1.75; max-width: 440px; }
.pathway .quiet-link { margin-top: 20px; }
.pathway:hover .quiet-link { color: var(--orange); border-color: var(--orange); }
@media (max-width: 760px) { .pathways { grid-template-columns: 1fr; } .pw-body { padding: 26px 22px 30px; } }

/* -- recognition: the humanity-and-results line -- */
.humanity-line { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height: 1.3; color: var(--black); text-align: center; max-width: 820px; margin: 64px auto 0; }
.humanity-line em { font-style: italic; }

/* -- the H.E.A.R.T. Reflection (home) -- */
.reflect-split { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: center; }
.reflect-figure { margin: 0; }
.reflect-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 900px) { .reflect-split { grid-template-columns: 1fr; gap: 32px; } .reflect-figure img { aspect-ratio: 16 / 9; } }
.hr-card { margin-top: 32px; background: var(--ivory); padding: clamp(24px, 3.4vw, 40px); border-top: 3px solid var(--orange); }
.hr-top { display: flex; justify-content: space-between; gap: 12px; font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--warm-gray); }
.hr-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 14px 0 26px; }
.hr-bar i { height: 3px; background: var(--taupe); transition: background .5s; }
.hr-bar i.on { background: var(--orange); }
.hr-q { border: none; }
.hr-q legend { float: left; width: 100%; font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 1.7rem); color: var(--black); line-height: 1.3; padding: 0; }
.hr-opts { clear: both; display: grid; gap: 2px; background: var(--taupe); margin-top: 18px; }
.hr-opts input { position: absolute; opacity: 0; pointer-events: none; }
.hr-opts label { display: block; background: var(--cream); padding: 14px 18px; cursor: pointer; border: 1px solid transparent; transition: border-color .3s, background .3s; }
.hr-opts label:hover { border-color: var(--gold-line); }
.hr-opts input:checked + label { border-color: var(--orange); background: #fffaf2; color: var(--black); }
.hr-opts input:focus-visible + label { outline: 2px solid var(--orange); outline-offset: 2px; }
.hr-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; }
.hr-nav button { font: inherit; font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; background: none; border: 1px solid var(--warm-deep); padding: 11px 22px; cursor: pointer; color: var(--body-text); transition: border-color .3s, color .3s; }
.hr-nav button:disabled { opacity: .35; cursor: default; }
.hr-nav .hr-next:not(:disabled) { border-color: var(--black); color: var(--black); }
.hr-answer { animation: fade .8s var(--ease); }
.hr-answer:focus { outline: none; }
.hr-label { font-size: .68rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--orange); }
.hr-carry { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.3; color: var(--black); margin: 10px 0 18px; }
.hr-reflect { line-height: 1.8; }
.hr-answer .inline-form { margin-top: 24px; }
.hr-links { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; }
.hr-links button.quiet-link { background: none; border: none; border-bottom: 1px solid rgba(94,83,76,.3); font: inherit; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; }
.hr-note { margin-top: 18px; font-size: .8rem; color: var(--warm-gray); }

/* -- the transformation: one window, dim and then full of light -- */
.light-shift { position: relative; height: 210px; margin-top: 48px; overflow: hidden; }
.light-shift .ls-img { position: absolute; inset: 0; background: url('/assets/img/light-window.jpg') center 40% / cover no-repeat; filter: grayscale(.75) brightness(.6) contrast(.95); transform: scaleX(-1); }
.light-shift .ls-img.lit { filter: sepia(.55) saturate(1.15) brightness(1.12); -webkit-mask-image: linear-gradient(270deg, transparent 34%, #000 66%); mask-image: linear-gradient(270deg, transparent 34%, #000 66%); }
.light-shift span { position: absolute; bottom: 18px; z-index: 1; font-size: .66rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.ls-l { left: 22px; color: rgba(255,255,255,.88); }
.ls-r { right: 22px; color: var(--black); background: rgba(251,248,242,.88); padding: 5px 10px; }
@media (max-width: 700px) { .light-shift { height: 170px; } }
.ba { display: grid; gap: 2px; background: var(--taupe); margin-top: 2px; }
.ba-head, .ba-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ba-head span { background: var(--cream); padding: 16px 28px; font-size: .68rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--warm-gray); }
.ba-head span + span { color: var(--orange); }
.ba-row p { background: var(--cream); padding: 18px 28px; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.45; color: #6a5f57; }
.ba-row p + p { color: var(--black); background: #fffdf8; }
@media (max-width: 700px) {
  .ba-head { display: none; }
  .ba-row { grid-template-columns: 1fr; }
  .ba-row p { padding: 14px 20px; font-size: 1.1rem; }
  .ba-row p::before { display: block; font-family: var(--font-body); font-size: .6rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--warm-gray); margin-bottom: 4px; content: "Today"; }
  .ba-row p + p::before { content: "Possible"; color: var(--orange); }
}
.pull { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.55rem, 2.9vw, 2.4rem); line-height: 1.3; color: var(--black); text-align: center; max-width: 820px; margin: 64px auto 0; }
.pull em { font-style: italic; }

/* -- paths and prices -- */
.paths.mini .path { padding: 44px 40px 40px; }
.paths.mini + .quiet-link { margin-top: 26px; }
.planned { font-size: .82rem; color: var(--warm-gray); margin-top: 8px; letter-spacing: .03em; }
.compare { margin-top: 2px; display: grid; gap: 2px; background: var(--taupe); }
.cmp-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 2px; }
.cmp-row > span { background: var(--ivory); padding: 15px 22px; font-size: .96rem; line-height: 1.55; }
.cmp-row > span:first-child { font-family: var(--font-display); font-size: 1.1rem; color: var(--black); }
.cmp-head > span { background: var(--cream); font-family: var(--font-body) !important; font-size: .66rem !important; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--warm-gray) !important; }
@media (max-width: 760px) {
  .cmp-head { display: none; }
  .cmp-row { grid-template-columns: 1fr 1fr; }
  .cmp-row > span:first-child { grid-column: 1 / -1; background: var(--cream); padding: 12px 18px 8px; }
  .cmp-row > span { padding: 10px 18px 14px; font-size: .9rem; }
}
.steps.six { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .steps.six { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps.six { grid-template-columns: 1fr; } }

/* -- beyond the program -- */
.community-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 72px; align-items: center; }
.community-split figure { margin: 0; }
.community-split img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: sepia(.38) saturate(.9) brightness(1.06); }
.community-split .dn { grid-column: 1 / -1; }
.feel-line { margin-top: 24px; font-size: .7rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--orange); }
.lifers { margin-top: 22px; padding-left: 16px; border-left: 2px solid var(--gold-line); font-size: .98rem; line-height: 1.8; max-width: 560px; }
.lifers b { font-weight: 500; color: var(--black); }
@media (max-width: 900px) { .community-split { grid-template-columns: 1fr; gap: 36px; } }

/* -- the invitation (Section 8) -- */
.invite-panel { max-width: 860px; margin: 0 auto; text-align: center; background: #fffdf8; padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px); box-shadow: 0 30px 80px rgba(120,90,50,.08); }
.invite-panel .spark { width: 30px; height: 30px; color: var(--orange); margin: 0 auto 18px; display: block; }
.invite-panel .kicker { justify-content: center; }
.invite-panel .kicker::after { content: ""; width: 22px; height: 1px; background: var(--orange); flex-shrink: 0; }
.invite-panel .lede { margin-left: auto; margin-right: auto; }
.invite-cap { margin-top: 18px; font-size: .84rem; color: var(--warm-gray); }
.invite-panel .dn { margin-left: auto; margin-right: auto; }

/* -- thank-you page -- */
.thanks-figure { max-width: 720px; margin: 48px auto 0; }
.thanks-figure img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; filter: sepia(.25) saturate(.9); }
.next-steps { max-width: 720px; margin: 40px auto 0; }
.next-steps ol { list-style: none; counter-reset: n; display: grid; gap: 2px; background: var(--taupe); }
.next-steps li { counter-increment: n; background: var(--cream); padding: 16px 22px 16px 64px; position: relative; line-height: 1.65; }
.next-steps li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 22px; top: 14px; font-family: var(--font-display); font-size: 1.3rem; color: var(--orange); }
.next-steps b { font-weight: 500; color: var(--black); }

/* -- apply: progress -- */
.apply-progress { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.ap-label { font-size: .66rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--warm-gray); white-space: nowrap; }
.ap-bar { flex: 1; height: 3px; background: var(--taupe); position: relative; overflow: hidden; }
.ap-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--orange); transition: width .5s var(--ease); }

/* -- for organizations -- */
.org-outcomes { max-width: 760px; }

/* -- palette switch (preview only) -- */
.palette-switch { position: fixed; left: 16px; bottom: 64px; z-index: 90; display: flex; align-items: stretch; background: var(--ivory); border: 1px solid var(--warm-deep); box-shadow: 0 8px 24px rgba(26,20,16,.1); font-size: .6rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.palette-switch > span { padding: 10px 10px; color: var(--warm-gray); border-right: 1px solid var(--warm-deep); display: flex; align-items: center; }
.palette-switch button { font: inherit; background: none; border: none; padding: 10px 11px; cursor: pointer; color: var(--body-text); display: flex; align-items: center; gap: 7px; }
.palette-switch button + button { border-left: 1px solid var(--warm-deep); }
.palette-switch button[aria-pressed="true"] { background: var(--cream); color: var(--black); }
.palette-switch i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.palette-switch [data-pal="sun"] i { background: linear-gradient(90deg, #A07D45 50%, #2F2B28 50%); }
.palette-switch [data-pal="sun-flame"] i { background: linear-gradient(90deg, #A07D45 50%, #F74E28 50%); }
.palette-switch [data-pal="flame"] i { background: #F74E28; }
@media (max-width: 600px) { .palette-switch > span, .palette-switch b { display: none; } .palette-switch button { padding: 10px 12px; } }

@media (prefers-reduced-motion: reduce) {
  .hero.photo.light::after { animation: none; }
  .hr-answer { animation: none; }
  .pathway img, .hr-bar i, .ap-bar i { transition: none; }
}
@media print { .palette-switch { display: none !important; } }

/* ===== sunlight palettes: every accent becomes warm gold; sections shift by tone, not rules ===== */
html[data-palette^="sun"] {
  --orange: var(--gold-text);
  --orange-dark: #6b5230;
  --ivory: #FBF8F2; --warm-light: #F7F2EA; --cream: #F3ECE1; --warm-mid: #EFE7DA; --taupe: #EADFD1; --warm-deep: #E2D6C6;
  --black: #2B2622; --body-text: #3A332E; --warm-gray: #6B6058;
}
html[data-palette^="sun"] ::selection { background: rgba(160,125,69,.2); }
html[data-palette^="sun"] section { border-top: 1px solid rgba(128,98,54,.12); }
html[data-palette^="sun"] main > section:first-child, html[data-palette^="sun"] .photo-band, html[data-palette^="sun"] .city-quote { border-top: none; }
html[data-palette^="sun"] .bg-close { border-top: 2px solid var(--gold-line); background: linear-gradient(180deg, #F7EDE5 0%, var(--ivory) 100%); }
html[data-palette^="sun"] .invite-sec { background: linear-gradient(180deg, var(--ivory) 0%, var(--blush) 100%); }
html[data-palette^="sun"] .bg-glow::before { background: radial-gradient(ellipse at 50% 30%, rgba(230,190,120,.16) 0%, transparent 70%); }
html[data-palette^="sun"] .kicker::before, html[data-palette^="sun"] .kicker::after,
html[data-palette^="sun"] .invite-panel .kicker::after, html[data-palette^="sun"] .invite .kicker::after,
html[data-palette^="sun"] .center .kicker::after, html[data-palette^="sun"] .hero-eyebrow-line { background: var(--gold-line); }
html[data-palette^="sun"] .hero h1 em, html[data-palette^="sun"] .hero.photo h1 em,
html[data-palette^="sun"] .pillar .letter, html[data-palette^="sun"] .rate, html[data-palette^="sun"] .worth .n,
html[data-palette^="sun"] .stat .num, html[data-palette^="sun"] .steps div::before, html[data-palette^="sun"] .talk-parts div::before,
html[data-palette^="sun"] .journey .step, html[data-palette^="sun"] .pillar-name, html[data-palette^="sun"] .invite-panel .spark,
html[data-palette^="sun"] .next-steps li::before { color: var(--gold); }
html[data-palette^="sun"] .pillar::after, html[data-palette^="sun"] .hr-bar i.on, html[data-palette^="sun"] .ap-bar i { background: var(--gold); }
html[data-palette^="sun"] .path, html[data-palette^="sun"] .steps div, html[data-palette^="sun"] .talk-parts div, html[data-palette^="sun"] .journey .card { border-top-color: var(--gold-line); }
html[data-palette^="sun"] .path:hover, html[data-palette^="sun"] .steps div:hover, html[data-palette^="sun"] .talk-parts div:hover { border-top-color: var(--gold); }
html[data-palette^="sun"] .creds-quiet { border-left-color: var(--gold-line); }
html[data-palette^="sun"] .card:hover { border-color: rgba(160,125,69,.3); background: #fffdf8; }
html[data-palette^="sun"] .hr-card, html[data-palette^="sun"] .pause-card, html[data-palette^="sun"] .reflection,
html[data-palette^="sun"] .form-card, html[data-palette^="sun"] .welcome-letter { border-top-color: var(--gold-line); }
html[data-palette^="sun"] .video-slot { border-color: var(--gold-line); }
html[data-palette^="sun"] .video-slot .play { border-color: var(--gold); color: var(--gold); }
html[data-palette^="sun"] nav.site { background: rgba(251,248,242,.94); }
html[data-palette^="sun"] .city-quote-bg { filter: brightness(.74) saturate(1.05) sepia(.3); }
html[data-palette^="sun"] .city-quote::after { background: linear-gradient(160deg, rgba(40,24,10,.5) 0%, rgba(40,24,10,.26) 50%, rgba(40,24,10,.54) 100%), radial-gradient(ellipse 46% 52% at 50% 50%, rgba(30,16,4,.34) 0%, transparent 100%); }
html[data-palette^="sun"] .city-quote p em { color: #F6E4C2; text-shadow: 0 2px 24px rgba(0,0,0,.6), 0 1px 6px rgba(0,0,0,.35); }
html[data-palette^="sun"] .guide .photo img, html[data-palette^="sun"] .split .photo-frame img { filter: sepia(.28) saturate(.9) brightness(1.03); }
/* the button: flame in "sun-flame", charcoal in "sun" (the mocks Mili chose) */
html[data-palette^="sun"] .btn { background: var(--flame); box-shadow: 0 8px 26px rgba(247,78,40,.26); }
html[data-palette^="sun"] .btn:hover { background: var(--flame-dark); }
html[data-palette^="sun"] .inline-form button { background: var(--flame); }
html[data-palette^="sun"] .inline-form button:hover { background: var(--flame-dark); }
html[data-palette="sun"] .btn { background: var(--charcoal); color: #FBF8F2; box-shadow: 0 10px 28px rgba(47,43,40,.16); }
html[data-palette="sun"] .btn:hover { background: #1d1a18; box-shadow: 0 14px 34px rgba(47,43,40,.24); }
html[data-palette="sun"] .inline-form button { background: var(--charcoal); }
html[data-palette="sun"] .inline-form button:hover { background: #1d1a18; }
html[data-palette^="sun"] .nav-links .btn { box-shadow: none; }
@media (max-width: 520px) { .hero .btn, .invite-panel .btn, .bg-close .btn { display: block; text-align: center; padding: 17px 18px; letter-spacing: .2em; } }

/* ===== v5.1 (Nov 5): arrival band moved below the pathways, recognition filled out ===== */
section.after-band, html[data-palette^="sun"] section.after-band { border-top: none; }
.photo-band.light + .after-band { padding-top: 96px; }
.humanity { text-align: center; max-width: calc(860px + 2 * var(--gutter)); margin-top: 72px; }
.humanity-pre { max-width: 620px; margin: 0 auto; font-size: 1rem; line-height: 1.8; color: var(--warm-gray); }
.humanity .humanity-line { margin: 18px auto 0; }
.humanity-post { max-width: 660px; margin: 18px auto 0; font-size: 1.06rem; line-height: 1.85; color: var(--body-text); }
.humanity .dn { margin-left: auto; margin-right: auto; }
.guide-quote { margin: 26px 0 0; padding: 0; font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.45; color: var(--black); max-width: 520px; }
.guide-quote cite { display: block; margin-top: 8px; font-family: var(--font-body); font-style: normal; font-size: .66rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--warm-gray); }
@media (max-width: 900px) { .photo-band.light + .after-band { padding-top: 56px; } .humanity { margin-top: 48px; } }
/* speaking: the recap video (vertical) */
.video-split { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 72px; align-items: center; }
.talk-video { margin: 0; }
.talk-video video { display: block; width: 100%; height: auto; aspect-ratio: 512 / 910; background: #1a1410; box-shadow: 0 24px 60px rgba(60,40,20,.14); }
.video-split .dn { grid-column: 1 / -1; }
@media (max-width: 760px) { .video-split { grid-template-columns: 1fr; gap: 32px; } .talk-video { max-width: 340px; } }
/* book: the new cover is a finished 3D mockup, so no CSS tilt or shadow */
.book-cover.mockup img, .book-cover.mockup:hover img { transform: none; box-shadow: none; max-width: 420px; }

/* ===== v5.2 (Nov 5): pill buttons, softened corners ===== */
:root { --r-lg: 20px; --r: 14px; --r-sm: 10px; --pill: 999px; }

/* every button is a pill */
.btn, .nav-links .btn, .menu-btn, .hr-nav button, .inline-form button, .notes-toggle, .palette-switch { border-radius: var(--pill); }
.btn { padding: 17px 40px; }
.nav-links .btn { padding: 11px 26px; }
.inline-form { border-radius: var(--pill); overflow: hidden; }
.inline-form input { padding-left: 22px; }
.inline-form button { margin: 4px; padding: 0 22px; }
.palette-switch { overflow: hidden; }
.palette-switch > span { padding-left: 14px; }
.sample-tag, .open-tag { border-radius: var(--pill); padding: 3px 10px; }
@media (max-width: 1040px) { .nav-links .btn { padding: 16px; } }

/* panels and cards: rounded outer corners (grids keep their 2px lines inside) */
.cards, .paths, .pathways, .compare, .quotes, .worth, .steps, .role, .fit, .ba, .stats, .practical, .talk-parts, .gallery,
.hr-opts, .pq .opts, .carry-options, .next-steps ol { border-radius: var(--r); overflow: hidden; }
.invite-panel { border-radius: var(--r-lg); }
.hr-card, .form-card, .welcome-letter, .reflection, .pause-card, .video-slot { border-radius: var(--r-lg); }
/* stacked grids read as one panel: round only the outside */
.paths:has(+ .compare), .practical:has(+ .steps) { border-radius: var(--r) var(--r) 0 0; }
.paths + .compare, .practical + .steps { border-radius: 0 0 var(--r) var(--r); }
.light-shift { border-radius: var(--r) var(--r) 0 0; }
.light-shift + .ba { border-radius: 0 0 var(--r) var(--r); }

/* images */
.reflect-figure img, .community-split img, .photo-frame img, .thanks-figure img, .guide .photo img,
.talk-video video, .book-cover.mockup img, .invite-split img, .hero-figure img { border-radius: var(--r); }

/* form fields and the reflection's choices */
.f input, .f select, .f textarea { border-radius: var(--r-sm); }
.hr-opts label, .pq label { border-radius: 0; }
.dn { border-radius: var(--r-sm); }
body.notes-on .dn { border-radius: var(--r-sm); }
.ph { border-radius: 4px; }

/* ===== v5.3 (Nov 5): blueprint copy for pathways, recognition, transformation, community ===== */
/* pathway cards: the blueprint's full-width outline pill */
.pw-btn { display: block; margin-top: 24px; padding: 13px 20px; text-align: center; border: 1px solid var(--warm-deep); border-radius: var(--pill); font-size: .7rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--body-text); transition: background .3s, color .3s, border-color .3s; }
.pathway:hover .pw-btn, .pathway:focus-visible .pw-btn { background: var(--charcoal); border-color: var(--charcoal); color: #FBF8F2; }
html[data-palette="flame"] .pathway:hover .pw-btn, html[data-palette="sun-flame"] .pathway:hover .pw-btn { background: var(--flame); border-color: var(--flame); color: #fff; }

/* recognition: one reading column */
.recog p { max-width: 700px; margin-top: 18px; font-size: 1.06rem; line-height: 1.85; color: var(--body-text); }
.recog .lede { margin-top: 22px; font-size: 1.15rem; }
.recog .humanity-line { text-align: left; margin: 40px 0 0; max-width: 760px; }

/* transformation: the blueprint's card above the before/after */
.tx-card { background: var(--cream); border-radius: var(--r-lg); padding: clamp(32px, 5vw, 64px); }
.tx-card h2 { margin-bottom: 10px; }
.tx-card p { max-width: 760px; margin-top: 14px; font-size: 1.08rem; line-height: 1.75; color: #5c524b; }
.tx-card .tx-possible { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--taupe); max-width: none; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.3; color: var(--black); }
.tx-card + .light-shift { margin-top: 48px; }

/* community: the blueprint's centered card, image on top */
.community-card { max-width: 980px; margin: 0 auto; background: var(--cream); border-radius: var(--r-lg); padding: 16px; }
.community-card img { width: 100%; aspect-ratio: 16 / 8.5; object-fit: cover; border-radius: var(--r); filter: sepia(.38) saturate(.9) brightness(1.06); }
.cc-body { text-align: center; padding: clamp(28px, 4vw, 48px) clamp(12px, 4vw, 56px) clamp(28px, 4vw, 48px); }
.cc-body .kicker { justify-content: center; }
.cc-body .kicker::after { content: ""; width: 22px; height: 1px; background: var(--orange); flex-shrink: 0; }
html[data-palette^="sun"] .cc-body .kicker::after { background: var(--gold-line); }
.cc-body p { max-width: 680px; margin: 16px auto 0; font-size: 1.05rem; line-height: 1.8; color: #5c524b; }
.cc-body .cc-welcome { margin-top: 30px; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.35rem, 2.3vw, 1.8rem); line-height: 1.35; color: var(--black); }
.community-card .dn { margin: 0 auto 20px; }
.recog p.humanity-line { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height: 1.3; color: var(--black); }

/* ===== v5.4 (Nov 5): before/after headings, community photo below, speaking rooms, testimonial carousel ===== */
/* before/after: bold headings; the right column is one colour, header included */
.ba-head span { font-weight: 600; color: var(--black); }
.ba-head span + span { background: #fffdf8; color: var(--black); }
@media (max-width: 700px) { .ba-row p::before { font-weight: 600; color: var(--black); } .ba-row p + p::before { color: var(--black); } }
/* community: the photo now sits below the text, and is already warm */
.community-card img { filter: none; aspect-ratio: 1600 / 903; }
.community-card .cc-body { padding-bottom: clamp(24px, 3vw, 36px); }
/* testimonial carousel (Founding Circle) */
.tcar { margin-top: 48px; position: relative; }
.tcar-track { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: var(--r-lg); background: var(--ivory); scrollbar-width: none; }
.tcar-track::-webkit-scrollbar { display: none; }
.tcar-track:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.tcar-slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; min-height: 320px; padding: clamp(40px, 6vw, 80px) clamp(24px, 8vw, 120px); display: flex; flex-direction: column; justify-content: center; text-align: center; }
.tcar-slide blockquote { max-width: 820px; margin: 0 auto; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.45; color: var(--black); }
.tcar-slide figcaption { margin-top: 24px; font-size: .7rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--warm-gray); }
.tcar-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
.tcar-prev, .tcar-next { width: 44px; height: 44px; border-radius: var(--pill); border: 1px solid var(--warm-deep); background: transparent; color: var(--black); font-size: 1rem; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.tcar-prev:hover, .tcar-next:hover { background: var(--charcoal); border-color: var(--charcoal); color: #FBF8F2; }
.tcar-dots { display: flex; gap: 8px; }
.tcar-dots button { width: 8px; height: 8px; padding: 0; border: none; border-radius: var(--pill); background: var(--warm-deep); cursor: pointer; transition: width .3s, background .3s; }
.tcar-dots button[aria-current="true"] { width: 24px; background: var(--gold); }
@media (max-width: 600px) { .tcar-slide { min-height: 360px; } }
@media (prefers-reduced-motion: reduce) { .tcar-track { scroll-behavior: auto; } .tcar-dots button { transition: none; } }

/* ===== v5.5 (Nov 5): terms, privacy, page not found, captions ===== */
.legal h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 2.2vw, 1.75rem); color: var(--black); margin-top: 44px; }
.legal h3:first-child { margin-top: 0; }
.legal p, .legal li { font-size: 1.02rem; line-height: 1.85; color: var(--body-text); max-width: 720px; }
.legal p { margin-top: 12px; }
.legal ul { margin: 12px 0 0; padding-left: 0; list-style: none; }
.legal li { position: relative; padding-left: 20px; margin-top: 10px; }
.legal li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.legal b { font-weight: 500; color: var(--black); }
.legal-meta { margin-top: 48px !important; padding-top: 20px; border-top: 1px solid var(--taupe); font-size: .86rem !important; color: var(--warm-gray) !important; }
footer.site .fine a { color: inherit; }
.notfound { min-height: 60vh; display: flex; align-items: center; }
.nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; margin-top: 10px; }
video::cue { font-family: var(--font-body); font-size: .95rem; line-height: 1.4; background: rgba(43, 38, 34, .78); color: #FBF8F2; }

/* ===== v5.10 (Nov 7): first-cohort callout (Miami graduation) ===== */
.callout { margin-top: 40px; padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px); text-align: center; background: linear-gradient(180deg, #fffdf8 0%, var(--blush) 100%); border: 1px solid var(--gold-line); border-radius: var(--r-lg); }
.callout .kicker { justify-content: center; margin-bottom: 12px; }
.callout .kicker::after { content: ""; width: 22px; height: 1px; background: var(--gold-line); flex-shrink: 0; }
.callout-head { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.2; color: var(--black); }
.callout-head em { font-style: italic; color: var(--gold); }
.callout-sub { margin-top: 10px; font-size: 1rem; color: var(--warm-gray); }

/* ===== v5.11 (Nov 7): Lighthouse fixes ===== */
/* <picture> wrappers (WebP + phone sizes) shouldn't change any layout */
picture { display: contents; }
/* photographic backgrounds: WebP first, a phone-size file under 900px */
.hero.photo.light .hero-bg { background-image: url('/assets/img/light-arch.jpg'); background-image: image-set(url('/assets/img/light-arch.webp') type('image/webp'), url('/assets/img/light-arch.jpg') type('image/jpeg')); }
.bg-curtains { background-image: url('/assets/img/light-curtains.jpg'); background-image: image-set(url('/assets/img/light-curtains.webp') type('image/webp'), url('/assets/img/light-curtains.jpg') type('image/jpeg')); }
.light-shift .ls-img { background-image: url('/assets/img/light-window.jpg'); background-image: image-set(url('/assets/img/light-window.webp') type('image/webp'), url('/assets/img/light-window.jpg') type('image/jpeg')); }
.city-quote-bg { background-image: url('/assets/img/city-window.jpg'); background-image: image-set(url('/assets/img/city-window.webp') type('image/webp'), url('/assets/img/city-window.jpg') type('image/jpeg')); }
@media (max-width: 900px) {
  .hero.photo.light .hero-bg { background-image: image-set(url('/assets/img/light-arch-800.webp') type('image/webp'), url('/assets/img/light-arch-800.jpg') type('image/jpeg')); }
  .bg-curtains { background-image: image-set(url('/assets/img/light-curtains-800.webp') type('image/webp'), url('/assets/img/light-curtains-800.jpg') type('image/jpeg')); }
  .light-shift .ls-img { background-image: image-set(url('/assets/img/light-window-800.webp') type('image/webp'), url('/assets/img/light-window-800.jpg') type('image/jpeg')); }
  .city-quote-bg { background-image: image-set(url('/assets/img/city-window-800.webp') type('image/webp'), url('/assets/img/city-window-800.jpg') type('image/jpeg')); }
}
.photo-band.light .bg-curtains { background-size: cover; background-position: center 50%; }
/* headings in order: step and pillar titles are h3, legal section titles are h2 (same look as before) */
.steps h3 { font-family: var(--font-body); font-size: .9rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--black); line-height: 1.35; }
.pillar h3 { font-family: var(--font-body); font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--black); margin-bottom: 12px; line-height: 1.35; }
.legal h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.3; color: var(--black); margin-top: 44px; }
.legal h2:first-child { margin-top: 0; }
/* carousel names */
.tcar-cite { margin-top: 24px; font-size: .7rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--warm-gray); }
/* contrast: the preview label */
.preview-bar b { color: #5a4426; }
/* legibility: nothing under 12px on phones */
@media (max-width: 700px) {
  .preview-bar, .f label, footer.site .fine, footer.site .contact, .quiet-link, .hr-links button.quiet-link, .kicker,
  .hero-nudge, .hero-eyebrow-text, .rate-sub, .planned, .tcar-cite, .hr-top, .hr-nav button, .facts, .small, .hr-note,
  .ba-head span, .cmp-head > span, .k, .feel-line, .hr-label, .seat-line, .pw-btn, .sample-tag, .open-tag, .apply-progress .ap-label,
  .guide-quote cite, .invite-cap, .legal-meta { font-size: 12px !important; }
  footer.site .links a, footer.site .contact a { font-size: 12px; }
  .btn { font-size: 12px; }
}

/* ===== v5.12 (Nov 7): About page story video ===== */
.transcript { border-top: 1px solid var(--gold-line, rgba(176,141,87,.35)); border-bottom: 1px solid var(--gold-line, rgba(176,141,87,.35)); }
.transcript summary { list-style: none; cursor: pointer; position: relative; padding: 16px 32px 16px 0; font-size: .78rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--black); }
.transcript summary::-webkit-details-marker { display: none; }
.transcript summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 300; line-height: 1; color: var(--gold, #b08d57); transition: transform .3s var(--ease); }
.transcript[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.transcript summary:focus-visible { outline: 2px solid var(--gold, #b08d57); outline-offset: 4px; }
.transcript-body { max-height: min(46vh, 420px); overflow-y: auto; padding: 4px 14px 20px 0; font-size: .98rem; line-height: 1.75; color: var(--black); }
.transcript-body:focus-visible { outline: 2px solid var(--gold, #b08d57); outline-offset: 2px; }
.transcript-body p + p { margin-top: 14px; }
@media (max-width: 760px) { .transcript-body { max-height: none; overflow: visible; } }
/* on phones, the heading and quote come before a tall vertical video */
@media (max-width: 760px) { .video-split.text-first-sm > div.reveal { order: -1; } .video-split.text-first-sm .talk-video { margin: 0 auto; } }