/* Live Alive - additions to the R3 system (load after assets/r3.css). Rebuilt 2026-10-06; reviewer pass the same evening.
   The page travels from the dark to golden hour, the way the program does: the question and its
   cost in the dark, the six steps in daylight, the goal at golden hour, then one enrolment card.
   One photograph of Stacey (the hero); the rest of the page is carried by type, numbers and two scenes.
   Every colour is an r3.css token or a tint of one (stone #8A8178 for form-field borders, 3:1 on cream).
   Nothing a visitor reads is under 16px. */

.lead,.enroll-head p,.steps p,.fsub,.form-fine,.alt-path p,.signs li,.field label{text-wrap:pretty}
.nobr{white-space:nowrap}
#who,#understand,#enroll,#reserveForm{scroll-margin-top:16px}   /* html already pads for the header (scroll-padding-top), so only the breathing room goes here */

/* ---------- hero: the question, and her portrait dissolving into the ground instead of sitting in a box ---------- */
.hero-photo::before{display:none}
.hero h1{width:auto}   /* the shared hero size (r3.css), like every page */
.hero h1 span{white-space:normal}
.hero .lead>span{display:block}   /* breaks after "financial.", never "not / fully alive." */
.hero .program{margin:0 0 1.25rem}
.hero .cohort{margin:1.4rem 0 2.2rem}
.hero .program{color:var(--gold-l)}   /* the eyebrow on a dark hero is gold, as on every page */
/* from tablet portrait up: copy at the left, the photograph at the right with its backdrop fading into the
   ground at its left, top and foot; she stays whole. The fades are eased (several stops), so no edge shows */
@media (min-width:641px){
  .hero-blend .hero-photo img{object-position:60% 22%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(20,18,16,.18) 4%,rgba(20,18,16,.45) 9%,rgba(20,18,16,.75) 15%,rgba(20,18,16,.93) 21%,var(--ink) 27%),linear-gradient(180deg,transparent 0%,rgba(20,18,16,.3) 4%,rgba(20,18,16,.65) 9%,rgba(20,18,16,.9) 14%,var(--ink) 18%,var(--ink) 66%,rgba(20,18,16,.85) 74%,rgba(20,18,16,.5) 84%,rgba(20,18,16,.18) 93%,transparent 100%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(20,18,16,.18) 4%,rgba(20,18,16,.45) 9%,rgba(20,18,16,.75) 15%,rgba(20,18,16,.93) 21%,var(--ink) 27%),linear-gradient(180deg,transparent 0%,rgba(20,18,16,.3) 4%,rgba(20,18,16,.65) 9%,rgba(20,18,16,.9) 14%,var(--ink) 18%,var(--ink) 66%,rgba(20,18,16,.85) 74%,rgba(20,18,16,.5) 84%,rgba(20,18,16,.18) 93%,transparent 100%);mask-composite:intersect}
}
@media (min-width:901px){
  .dark-top .hero-blend .hero-photo{top:0;width:56%}   /* runs up behind the see-through header; the fade keeps the nav on dark */
}
/* tall windows (iPad Pro portrait and the like): the copy column narrows so the lead never runs onto her hair */
@media (min-width:901px) and (max-aspect-ratio:1/1){
  .hero-blend .hero-copy{width:44%}
}
/* tablet portrait: the same side-by-side frame as the desktop, never a band that cuts her chin */
@media (min-width:641px) and (max-width:900px){
  .dark-top .hero-blend.top-dark{display:flex;flex-direction:row;align-items:center;min-height:100svh;padding:calc(var(--hdr) + 32px) 0 48px}
  .dark-top .hero-blend .hero-photo{position:absolute;top:0;right:0;bottom:0;left:auto;margin-top:0;width:58%;height:auto;max-height:none;flex:none}
  .hero-blend>.wrap{position:relative;z-index:1}
  .hero-blend .hero-copy{width:52%;margin-top:0;padding-top:0}
  .hero-blend .hero-actions .btn{flex:1 1 100%}
}

/* ---------- the cost: who it's for, in the dark with the hourglass and the coin ---------- */
.cost{position:relative;display:flex;align-items:center;min-height:min(100svh,920px);padding:var(--sec) 0;background:var(--ink);overflow:hidden}
.cost-photo{position:absolute;inset:0}
.cost-photo img{width:100%;height:100%;object-fit:cover;object-position:86% 50%}   /* the coin is half of what the picture says: always whole */
.cost-photo::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,var(--ink-2) 0%,var(--ink-2) 10%,rgba(20,18,16,0) 40%,rgba(20,18,16,0) 78%,var(--ink) 100%),
  linear-gradient(90deg,var(--ink) 0%,rgba(20,18,16,.92) 30%,rgba(20,18,16,.4) 58%,rgba(20,18,16,0) 78%)}
.cost .wrap{position:relative;z-index:1}
.cost-copy{max-width:35rem}
.cost h2{margin:0 0 1.8rem}
.signs{list-style:none;margin:0 0 2.2rem;padding:0;border-top:1px solid var(--line-dark)}
.signs li{padding:1rem 0;border-bottom:1px solid var(--line-dark);font:500 clamp(1.4rem,1.9vw,1.7rem)/1.35 var(--display);color:var(--on-dark)}
.cost .closer{margin:0;color:var(--gold-l);max-width:22ch}

/* ---------- inside Live Alive: the heading holds the left column while the six steps pass ---------- */
.steps-sec{background:var(--cream)}
.steps-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,104px);align-items:start}
.steps-head{position:sticky;top:calc(var(--hdr) + 32px)}
.steps-head h2{max-width:14ch;font-size:clamp(2.5rem,3.6vw,3.5rem);line-height:1.1;letter-spacing:-.015em}
.steps-head .lead{margin-bottom:0;max-width:30ch}
/* the gold line beside the steps fills as you read down them (r3.js sets --p; without it the line is simply full) */
.steps{position:relative;list-style:none;margin:0;padding:0 0 0 clamp(28px,3vw,48px)}
.steps::before,.steps::after{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line)}
.steps::after{background:var(--gold);transform-origin:50% 0;transform:scaleY(var(--p,1))}
.steps li{display:grid;grid-template-columns:clamp(4.2rem,6vw,5.6rem) minmax(0,1fr);align-items:baseline;padding:clamp(24px,2.6vw,36px) 0;border-bottom:1px solid var(--line)}
.steps li:first-child{padding-top:0}
.steps .num{font:300 clamp(2.75rem,3.8vw,3.5rem)/1 var(--display);letter-spacing:-.02em;color:var(--gold-deep);font-variant-numeric:lining-nums tabular-nums}
.steps h3{margin:0 0 .45rem;font-size:clamp(1.7rem,2.2vw,2.05rem)}
.steps p{margin:0;max-width:42ch;font-size:1.0625rem;color:var(--char)}

/* ---------- the goal: golden hour, the climax of the page ---------- */
.goal-band{position:relative;display:flex;align-items:center;min-height:min(92svh,820px);padding:var(--sec) 0;background:var(--ink);overflow:hidden;text-align:center}
.goal-photo{position:absolute;inset:0}
.goal-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
/* phones: the deeper shade the words need on a narrow crop */
.goal-photo::after{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 58% 62% at 50% 52%,rgba(20,18,16,.66) 0%,rgba(20,18,16,.5) 60%,rgba(20,18,16,.32) 100%),
  linear-gradient(180deg,rgba(20,18,16,.45) 0%,rgba(20,18,16,.2) 40%,rgba(20,18,16,.6) 100%)}
/* wider: shade only where the words sit, so golden hour stays gold (text contrast measured 4.5:1 or better) */
@media (min-width:641px){
  .goal-photo::after{background:
    radial-gradient(ellipse 46% 42% at 50% 50%,rgba(20,18,16,.7) 0%,rgba(20,18,16,.52) 55%,rgba(20,18,16,0) 100%),
    linear-gradient(180deg,rgba(20,18,16,.45) 0%,rgba(20,18,16,0) 24%,rgba(20,18,16,0) 70%,rgba(20,18,16,.55) 100%)}
}
/* the scene settles as it arrives and lifts away as it leaves (scroll-linked, so it reverses on its own) */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @keyframes goal-settle{from{scale:1.08}to{scale:1}}
    .goal-photo img{animation:goal-settle linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
  }
}
.goal{position:relative;z-index:1}
.goal-lines{margin:0 auto 1.4rem;max-width:none;font:italic 500 clamp(1.45rem,2.1vw,1.9rem)/1.4 var(--display);color:var(--on-dark)}
.goal-lines>span{display:block;text-wrap:balance}
.goal h2{margin:0 auto 2.4rem;font-size:clamp(3.2rem,6.4vw,6.5rem);line-height:1.02;letter-spacing:-.02em;color:var(--cream)}

/* ---------- enrolment: the heading as a spread, then one card in two halves ---------- */
.enroll-head{max-width:44rem;margin-bottom:clamp(40px,5vw,72px)}
.enroll-head .lead{margin-bottom:0}
@media (min-width:1100px){
  .enroll-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,5vw,80px);align-items:end;max-width:none}
  .enroll-head .kicker{grid-column:1/-1}
  .enroll-head h2{margin:0}
  .enroll-head .lead{max-width:34ch;padding-bottom:.4rem}
}
.enroll-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);border:1px solid rgba(184,146,74,.4);border-radius:2px;overflow:hidden;box-shadow:0 34px 80px rgba(20,18,16,.12)}
.enroll-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--metal);z-index:2}   /* the metallic gold rule across the top */
.enroll-offer,.enroll-form{padding:clamp(32px,4.2vw,64px)}
.enroll-offer{display:flex;flex-direction:column;background:var(--ink-2);color:var(--on-dark)}
.enroll-form{display:flex;flex-direction:column;background:linear-gradient(rgba(184,146,74,.06),rgba(184,146,74,.06)),var(--cream)}
.enroll-card .kicker{margin:0 0 1rem}
.enroll-card h3{margin:0 0 1.8rem;font-size:clamp(1.9rem,2.4vw,2.35rem);line-height:1.15}
.included{list-style:none;margin:0 0 2rem;padding:0;border-top:1px solid var(--line-dark)}
.included li{padding:.85rem 0 .85rem 2rem;text-indent:-2rem;border-bottom:1px solid var(--line-dark);font-size:1.0625rem;line-height:1.5;color:var(--on-dark)}
.included li::before{content:"";display:inline-block;width:1.05rem;height:1px;margin-right:.95rem;vertical-align:middle;background:var(--gold-l)}   /* at mid-letter */
.enroll-facts{margin:0 0 2rem}
.prices{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin:auto 0 1.6rem;padding-top:1.6rem;border-top:1px solid var(--line-dark)}   /* price and terms at the foot, level with the form's button */
.price-opt{display:flex;flex-direction:column;gap:.4rem}
.price-opt+.price-opt{padding-left:1.4rem;border-left:1px solid var(--line-dark)}
.price-opt .pt{font:500 1rem/1.4 var(--label);color:var(--on-dark-2)}
.price-opt .pv{font:400 clamp(2.7rem,3.8vw,3.4rem)/1 var(--display);letter-spacing:-.01em;color:var(--gold-l);font-variant-numeric:lining-nums tabular-nums}
.price-opt .pn{font-size:1rem;line-height:1.4;color:var(--on-dark-2)}
.enroll-offer .note{margin:0;max-width:none;font-size:1rem;color:var(--on-dark-2)}

/* the request form: cream fields on a faint gold wash; a gold underline answers focus */
.enroll-form h3{margin-bottom:.6rem}
.apply .fsub{font-size:1.0625rem;margin:0 0 1.8rem;color:var(--char)}
.row2{display:grid;grid-template-columns:1fr 1fr;column-gap:1rem}
.field{margin-bottom:1.1rem}
.field label{display:block;font:500 1rem/1.4 var(--label);color:var(--ink-text);margin-bottom:.45rem}
.field label .opt{font-weight:400;color:var(--char)}
.field input,.field select,.field textarea{display:block;width:100%;min-height:56px;padding:0 1.2rem;border-radius:2px;border:1px solid var(--stone);background:var(--cream);color:var(--ink-text);font:400 1.0625rem/1.5 var(--body);transition:border-color var(--base) var(--ease-io),box-shadow var(--base) var(--ease-io)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--char)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline-offset:0;border-color:var(--gold-deep);box-shadow:inset 0 -2px 0 var(--gold)}
.field textarea{min-height:132px;padding:.85rem 1.2rem;resize:vertical}
.field textarea::placeholder{color:rgba(58,53,48,.75)}
.field select{appearance:none;-webkit-appearance:none;padding-right:3rem;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23211E1A' stroke-width='1.6'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 1.1rem center}
.apply .btn{width:100%;margin-top:.8rem}
.form-fine{font-size:1rem;color:var(--char);margin:1rem 0 0}
/* after sending: the thank-you sits in the middle of the half, as a headline */
.form-success{display:none;text-align:center}
.form-success.show{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}
.form-success h3{margin:0 0 .8rem;font-size:clamp(2.2rem,3vw,2.8rem)}
.form-success h3::after{content:"";display:block;width:2.75rem;height:2px;margin:1.1rem auto 0;background:var(--gold)}
.form-success p{margin:0 auto;max-width:34ch}

/* not ready yet: the quiet way in */
.alt-path{margin:clamp(48px,6vw,88px) auto 0;text-align:center}
.alt-path p{margin-inline:auto}
.alt-q{font:italic 500 clamp(1.5rem,2vw,1.85rem)/1.3 var(--display);color:var(--ink-text);margin:0 auto .4rem}
.alt-path p+p{margin-bottom:.2rem}

/* the scroll-follow button steps aside while the enrolment section (and its form) is on screen;
   body.enroll-in is set by the page script */
body.enroll-in .dock{opacity:0;transform:translateY(12px);visibility:hidden;pointer-events:none;transition:opacity var(--medium) var(--ease-out),transform var(--medium) var(--ease-out),visibility 0s linear var(--medium)}

/* ---------- responsive ---------- */
@media (max-width:1299px){
  /* the cost: the hourglass and the coin become a band above the words, coin whole */
  .cost{display:block;min-height:0;padding:0 0 var(--sec)}
  .cost-photo{position:relative;inset:auto;height:clamp(240px,46vw,520px)}
  .cost-photo img{object-position:92% 50%}
  .cost-photo::after{background:linear-gradient(180deg,var(--ink-2) 0%,var(--ink-2) 6%,rgba(20,18,16,0) 30%,rgba(20,18,16,0) 62%,var(--ink) 100%)}
  .cost-copy{margin-top:-1.5rem}
}
@media (max-width:1100px){
  .enroll-card{grid-template-columns:1fr}
}
@media (max-width:900px){
  .steps-grid{grid-template-columns:1fr;gap:clamp(36px,6vw,56px)}
  .steps-head{position:static}
  .steps-head h2{max-width:20ch}
}
@media (max-width:640px){
  /* phones (James, 2026-10-07: "it fades right at her chin"): framed head to chest, so her whole face sits in the
     solid part and the foot fade dissolves her white top, below the necklace, never her jaw (keen-eye K17) */
  .hero-blend .hero-photo img{object-position:50% 20%;-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(20,18,16,.35) 4%,rgba(20,18,16,.75) 9%,var(--ink) 14%,var(--ink) 80%,rgba(20,18,16,.7) 88%,rgba(20,18,16,.3) 95%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,rgba(20,18,16,.35) 4%,rgba(20,18,16,.75) 9%,var(--ink) 14%,var(--ink) 80%,rgba(20,18,16,.7) 88%,rgba(20,18,16,.3) 95%,transparent 100%)}
  .hero-photo{height:clamp(360px,58svh,520px);min-height:0;max-height:none}
  .hero-photo::after{display:none}
  .hero-copy{margin-top:0;padding-top:clamp(20px,6vw,32px)}
  .steps{padding-left:22px}
  .steps li{grid-template-columns:3.4rem minmax(0,1fr)}
  .steps .num{font-size:2.4rem}
  .enroll-card{margin-inline:calc(-1*var(--gutter));border-left:0;border-right:0;border-radius:0}
  .row2{grid-template-columns:1fr}
}
@media (max-width:400px){
  .prices{grid-template-columns:1fr;gap:1rem}
  .price-opt+.price-opt{padding-left:0;border-left:0;padding-top:1rem;border-top:1px solid var(--line-dark)}
}