/* Home page only. Shared components live in /v2.css. */

/* == HERO (Rachel's cover, rebuilt) ===================================
   Phones and tablets: headline block on top, Rachel (cutout) in front of a
   large flower of life centred on her head, then the button, then the subhead.
   Desktop (>=1021px): matches her cover mock: Rachel large on the left, her hat
   overlapping a big flower of life (about 43% of the hero width), cropped at
   mid-torso by the gold waves; copy centred on the right; landscape behind. */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:calc(var(--head-h) + 2px) 0 clamp(56px,9vw,120px);text-align:center;background:linear-gradient(180deg,var(--ivory) 0,#f7eee9 45%,var(--ivory) 100%);
  /* hero-only flower of life: viewBox cropped to the circle so the box IS the circle; finer lines than the shared --svg-fol */
  --hero-fol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='9.8 9.8 60.4 60.4'%3E%3Cg fill='none' stroke='%23c9a24c' stroke-width='.17'%3E%3Ccircle cx='20.000' cy='40.000' r='10'/%3E%3Ccircle cx='25.000' cy='31.340' r='10'/%3E%3Ccircle cx='25.000' cy='48.660' r='10'/%3E%3Ccircle cx='30.000' cy='22.679' r='10'/%3E%3Ccircle cx='30.000' cy='40.000' r='10'/%3E%3Ccircle cx='30.000' cy='57.321' r='10'/%3E%3Ccircle cx='35.000' cy='31.340' r='10'/%3E%3Ccircle cx='35.000' cy='48.660' r='10'/%3E%3Ccircle cx='40.000' cy='22.679' r='10'/%3E%3Ccircle cx='40.000' cy='40.000' r='10'/%3E%3Ccircle cx='40.000' cy='57.321' r='10'/%3E%3Ccircle cx='45.000' cy='31.340' r='10'/%3E%3Ccircle cx='45.000' cy='48.660' r='10'/%3E%3Ccircle cx='50.000' cy='22.679' r='10'/%3E%3Ccircle cx='50.000' cy='40.000' r='10'/%3E%3Ccircle cx='50.000' cy='57.321' r='10'/%3E%3Ccircle cx='55.000' cy='31.340' r='10'/%3E%3Ccircle cx='55.000' cy='48.660' r='10'/%3E%3Ccircle cx='60.000' cy='40.000' r='10'/%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3C/g%3E%3C/svg%3E");}
.hero__bg{position:absolute;inset:0;z-index:-3}
.hero__bg picture,.hero__bg img{display:block;width:100%;height:100%}
.hero__bg img{object-fit:cover;object-position:40% 62%}
.hero__wash{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,rgba(251,247,239,.92) 0,rgba(251,247,239,.6) 16%,rgba(251,247,239,.12) 36%,rgba(251,247,239,0) 48%,rgba(251,247,239,0) 64%,rgba(251,247,239,.82) 82%,var(--ivory) 96%)}
.hero__inner{position:relative;display:grid;justify-items:center;grid-template-areas:"title" "rule" "call" "portrait" "btn" "sub"}
.hero__copy{display:contents}
/* copy paints over the flower of life and the portrait box */
.hero__title,.hero__rule,.hero__call,.hero__sub,.hero__btn{position:relative;z-index:2}
.hero__title{grid-area:title;font-family:var(--caps);font-weight:500;text-transform:uppercase;color:var(--plum);text-shadow:0 1px 14px rgba(251,247,239,.9)}
.hero__kicker{display:block;font-size:clamp(.9375rem,4.1vw,1.25rem);line-height:1.2;letter-spacing:.3em;color:var(--plum-ink);margin:0 0 6px .3em}
.hero__big{display:block;font-size:clamp(2.2rem,10.4vw,3.5rem);line-height:1.02;letter-spacing:.01em}
.hero__rule{grid-area:rule;width:min(78%,300px);margin-top:12px}
.hero__call{grid-area:call;margin-top:8px;font:500 clamp(.875rem,3.7vw,1.0625rem)/1.3 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--plum-ink);text-shadow:0 1px 10px rgba(251,247,239,.9)}
.hero__sub{grid-area:sub;max-width:24em;margin-top:18px;font:italic 500 clamp(1.2rem,4.9vw,1.6rem)/1.35 var(--serif);color:var(--plum-ink)}
.hero__btn{grid-area:btn;margin-top:14px}
@media (max-width:720px){.hero__btn{min-height:54px;padding:0 32px}}

/* portrait: the cutout (800x1056) is --p wide; the box is cut at her chest and the
   image fades out there. The flower of life (--d, wider than the portrait) is
   centred on her head; her hat sits in front of it. */
.hero__portrait{--p:min(70vw,262px);--d:min(96vw,360px);grid-area:portrait;position:relative;z-index:1;width:var(--p);height:calc(var(--p) * .96);margin:4px 0 0;pointer-events:none}
.hero__fol{position:absolute;z-index:-1;left:calc(var(--p) * .5 - var(--d) / 2);top:calc(var(--p) * .38 - var(--d) / 2);width:var(--d);height:var(--d);border-radius:50%;opacity:.85;
  /* tablets (721 to 1020) only: the top of the ring fades out so its lines never cross the headline block.
     Phones (max-width:720px) and desktop (min-width:1021px) set mask:none and show the whole circle. */
  -webkit-mask:linear-gradient(180deg,transparent 4%,#000 30%);mask:linear-gradient(180deg,transparent 4%,#000 30%);
  background:var(--hero-fol) center/100% 100% no-repeat,radial-gradient(closest-side,rgba(255,252,244,.85) 0,rgba(251,247,239,.6) 55%,rgba(243,226,180,.22) 88%,rgba(243,226,180,0) 100%);box-shadow:none}
.hero__me{position:absolute;left:8%;top:0;width:100%;height:auto;max-width:none;
  /* fade out at the chest, and soften the left edge where the hair glow meets the image frame */
  -webkit-mask:linear-gradient(180deg,#000 0,#000 calc(var(--p) * .78),transparent calc(var(--p) * .97)),linear-gradient(90deg,transparent 0,#000 9%);-webkit-mask-composite:source-in;
  mask:linear-gradient(180deg,#000 0,#000 calc(var(--p) * .78),transparent calc(var(--p) * .97)),linear-gradient(90deg,transparent 0,#000 9%);mask-composite:intersect}
.hero__waves{position:absolute;left:0;right:0;bottom:0;z-index:3;height:clamp(70px,13vw,190px)}

@media (min-width:721px) and (max-width:1020px){
  .hero__portrait{--p:340px;--d:470px}
  .hero__big{font-size:clamp(3rem,7vw,4rem)}
  .hero__sub{max-width:28em}
}

@media (min-width:1021px){
  .hero{--hh:max(660px,min(100svh,1000px));min-height:var(--hh);padding:var(--head-h) 0 0;text-align:center;background:linear-gradient(180deg,var(--ivory) 0,#f8f0ea 50%,var(--ivory))}
  /* art at its own 16:9 size; the horizon (art y .40) sits at 66% of the hero,
     level with the button, so the hills and the fork fill the lower third and
     sky sits behind the headline, like Rachel's cover. 22.5vw = .40 x 56.25vw */
  .hero__bg{inset:auto 0;top:calc(66% - 22.5vw);height:56.25vw;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%);mask-image:linear-gradient(180deg,transparent 0,#000 14%)}
  .hero__bg img{object-position:50% 50%}
  .hero__wash{background:
    radial-gradient(34% 32% at 66% 38%,rgba(251,247,239,.55) 0,rgba(251,247,239,.25) 60%,rgba(251,247,239,0) 100%),
    linear-gradient(90deg,rgba(251,247,239,.94) 0,rgba(251,247,239,.7) 24%,rgba(251,247,239,.18) 44%,rgba(251,247,239,0) 54%)}
  .hero__inner{min-height:calc(var(--hh) - var(--head-h));grid-template-areas:none;grid-template-columns:minmax(0,36fr) minmax(0,64fr);grid-template-rows:.12fr repeat(5,auto) 1fr;column-gap:var(--gap);justify-items:center}
  /* portrait --p wide (about 0.97 x the hero height, as in the mock), top at the
     header line, left edge with the logo; it runs under the waves at mid-torso */
  .hero__portrait{--p:min(calc(var(--hh) * .97),56vw);--d:calc(var(--p) * .79);position:absolute;grid-area:auto;grid-column:1;grid-row:1/-1;left:-1.5%;top:0;width:var(--p);height:calc(var(--p) * 1.32);margin:0;align-self:start;justify-self:start}
  .hero__fol{left:calc(var(--p) * -.035);top:calc(var(--p) * -.04);opacity:.9;-webkit-mask:none;mask:none}
  .hero__me{left:0;-webkit-mask:linear-gradient(90deg,transparent 0,#000 8%);mask:linear-gradient(90deg,transparent 0,#000 8%)}
  .hero__title{grid-area:auto;grid-column:2;grid-row:2}
  .hero__rule{grid-area:auto;grid-column:2;grid-row:3;width:min(64%,400px);margin-top:18px}
  .hero__call{grid-area:auto;grid-column:2;grid-row:4;margin-top:12px;font-size:clamp(1rem,1.3vw,1.4rem);letter-spacing:.24em}
  .hero__sub{grid-area:auto;grid-column:2;grid-row:5;max-width:25em;margin-top:14px;font-size:clamp(1.25rem,1.6vw,1.75rem);text-shadow:0 1px 12px rgba(251,247,239,.95)}
  .hero__btn{grid-area:auto;grid-column:2;grid-row:6;margin-top:26px;min-height:62px;padding:0 44px;font-size:clamp(1rem,1.2vw,1.2rem)}
  .hero__kicker{font-size:clamp(1.15rem,1.75vw,1.9rem);letter-spacing:.32em;margin-bottom:10px}
  .hero__big{font-size:clamp(3.3rem,5.3vw,6rem);line-height:1}
  /* top header uses the hero's wide column: logo over the portrait's left edge, nav ends over the copy's right edge (as in her mock). The stuck capsule keeps its own width. */
  body:has(.hero) .site-head:not(.is-stuck) .site-head__bar{max-width:calc(1440px + var(--gutter) * 2)}
}

/* == 3. MEET RACHEL (2026-11-11 layout pass) ============================
   A square portrait in the site's offset frame (.photo: parchment backing 14px
   on phones, 24px from 861px, gold edge). Square source, shown square: never
   cropped or squished. Source is 600px, so it stays at or under 380px wide.
   Desktop: photo about as tall as the text beside it. v2.js settles the photo. */
.home-me__wrap{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:calc(var(--group) + 14px) var(--gap);max-width:calc(940px + var(--gutter) * 2);text-align:center}
.home-me__fig{width:min(calc(100% - 14px),290px)}
.home-me__photo{display:block;width:100%;height:auto;aspect-ratio:1}
.home-me__text>*+*{margin-top:12px}
.home-me__text p{max-width:34em;margin-inline:auto}
@media (min-width:721px){
  .home-me__wrap{grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:center;column-gap:calc(var(--gap) + 14px);text-align:left}
  .home-me__fig{width:calc(100% - 14px);justify-self:start}
  .home-me__text p{margin-inline:0}
}
@media (min-width:861px){.home-me__fig{width:calc(100% - 24px)}}
@media (min-width:1021px){.home-me__wrap{grid-template-columns:minmax(0,364px) minmax(0,1fr)}.home-me__text p{font-size:1.125rem;line-height:1.65}}

/* == 4. BOOKING (moved from /contact/ on 2026-11-08) ===================
   Phones: intro, booking widget, then direct contact under it.
   Desktop (>=1021px): intro and direct contact in a left column beside the widget. */
.hb-grid{display:grid;gap:var(--stack);grid-template-areas:"intro" "form" "direct"}
.hb-intro{grid-area:intro;max-width:34rem;margin-inline:auto;text-align:center}
.hb-intro p{margin-top:10px}
.hb-bk{grid-area:form;width:100%;max-width:640px;margin-inline:auto}
.hb-direct{grid-area:direct;width:100%;max-width:34rem;margin-inline:auto;text-align:center}

/* direct contact rows: icon in a gold ring beside the line */
.hb-direct__h{font-size:clamp(1.35rem,2vw,1.6rem)}
.hb-direct__list{display:grid;gap:10px;margin:14px 0 0;padding:0;list-style:none;text-align:left}
.hb-direct__list a{display:flex;align-items:center;gap:14px;min-height:64px;padding:8px 18px 8px 8px;border-radius:999px;background:var(--panel-bg);box-shadow:inset 0 0 0 1px var(--panel-line),var(--shadow-card);color:var(--ink);text-decoration:none;transition:box-shadow .2s var(--ease-out),transform .2s var(--ease-out)}
.hb-direct__list a:active{transform:scale(.985)}
.hb-direct__icon{width:48px;height:48px;color:var(--plum)}
.hb-direct__icon svg{width:22px;height:22px}
.hb-direct__text{display:grid;gap:2px;min-width:0}
.hb-direct__text b{font-weight:600;color:var(--plum);overflow-wrap:anywhere}
.hb-direct__text small{font-size:.875rem;color:var(--plum-ink)}
.hb-direct__where{margin-top:14px;font:italic 500 1.15rem/1.35 var(--serif);color:var(--plum-ink)}
@media (hover:hover) and (pointer:fine){.hb-direct__list a:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--gold),var(--shadow-lift)}}

/* the free consultation tile carries a longer line */
.hb-bk .bk__opt--feature small{max-width:22em}



@media (min-width:1021px){
  .hb-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;grid-template-areas:"intro form" "direct form";column-gap:var(--gap);row-gap:var(--stack);align-items:start}
  .hb-intro{margin:0;padding-top:12px;text-align:left}
  .hb-direct{margin:0;text-align:left}
  .hb-bk{max-width:none}
}



/* step labels at 14px (v2 ships .75rem); body font so "Confirm" fits at 360 */
.hb-bk .bk__steps li{font:600 .875rem/1.2 var(--body);letter-spacing:.02em;text-transform:none}

/* every step inside about 580px at 375 x 740 */
.hb-bk .bk__sum div{grid-template-columns:64px minmax(0,1fr);gap:10px;padding:7px 0;line-height:1.35}
.hb-bk .bk__sum dd{overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
@media (max-width:720px){
  .hb-bk .field{gap:4px}
  .hb-bk .field input{min-height:48px}
  .hb-bk .field textarea{min-height:52px}
  .hb-bk .err:empty{display:none}
  .hb-bk .err{font-size:.875rem;line-height:1.3}
  .hb-bk .bk__step[data-step="3"].is-on{gap:8px}
  .hb-bk .bk__times{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hb-bk .bk__times button{padding:0 2px;font-size:.9375rem}
}

/* phone-02: #book lands on the card itself; step 1 fits between the stuck header and a 641 fold */
@media (max-width:720px){
  .hb-bk .bk__steps{margin-bottom:10px}
  .hb-bk legend{margin-bottom:4px}
  .hb-bk .bk__opt{min-height:58px;padding:8px 8px}
  .hb-bk .bk__opt--feature{min-height:60px}
  .hb-bk .bk__nav{margin-top:12px}
}

/* no outer rings around the flower of life (Rachel's mockup); soft glow only */
.hero__fol{box-shadow:none}
/* subhead legibility over the hill: translucent ivory panel behind it */
.hero__sub{color:var(--plum-deep);font-weight:600;background:rgba(251,247,239,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:10px 22px 12px;border-radius:20px;text-shadow:none;box-shadow:0 8px 28px -18px rgba(74,16,41,.35)}

/* == 2026-11-08 hero pass (Carson): no box behind the subhead (as in her mockup), bigger subhead,
   copy moved right, new GPT Image 2 fork art placed by v2.js so the button sits in the V between the paths,
   flower of life kept clear of the header tagline */
.hero__sub{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;padding:0;border-radius:0;
  font-weight:600;color:var(--plum-deep);text-shadow:0 0 2px rgba(251,247,239,.9),0 1px 14px rgba(251,247,239,.95),0 0 28px rgba(251,247,239,.8)}
@media (min-width:1021px){
  .hero__inner{grid-template-columns:minmax(0,40fr) minmax(0,60fr)}
  .hero__sub{max-width:24em;font-size:clamp(1.4rem,1.85vw,2.05rem);line-height:1.32;margin-top:16px}
  /* art 112vw wide (16:9); v2.js sets --bgx/--bgy so the fork (art x .63) is under the button.
     Fallback numbers match a 1440-1920 screen. */
  .hero__bg{inset:auto;left:var(--bgx,-6vw);top:var(--bgy,calc(74% - 41.3vw));width:112vw;height:63vw}
  .hero__bg img{object-position:50% 50%}
  .hero__wash{background:
    radial-gradient(30% 34% at var(--copyx,66%) 46%,rgba(251,247,239,.62) 0,rgba(251,247,239,.32) 60%,rgba(251,247,239,0) 100%),
    linear-gradient(90deg,rgba(251,247,239,.94) 0,rgba(251,247,239,.7) 24%,rgba(251,247,239,.18) 44%,rgba(251,247,239,0) 54%)}
  .hero__fol{top:calc(var(--p) * .03)}
}
/* subhead never reaches the flower of life behind Rachel (Carson 2026-11-08) */
@media (min-width:1021px){.hero__sub{max-width:20.5em}}

/* F3 (Carson 2026-11-09): the full flower-of-life pattern out to one border ring, as in Rachel's mockup, fine lines */
.hero{--hero-fol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='9.8 9.8 60.4 60.4'%3E%3Cdefs%3E%3CclipPath id='k'%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg fill='none' stroke='%23c9a24c'%3E%3Cg clip-path='url(%23k)' stroke-width='.22'%3E%3Ccircle cx='30.00' cy='5.36' r='10'/%3E%3Ccircle cx='40.00' cy='5.36' r='10'/%3E%3Ccircle cx='50.00' cy='5.36' r='10'/%3E%3Ccircle cx='15.00' cy='14.02' r='10'/%3E%3Ccircle cx='25.00' cy='14.02' r='10'/%3E%3Ccircle cx='35.00' cy='14.02' r='10'/%3E%3Ccircle cx='45.00' cy='14.02' r='10'/%3E%3Ccircle cx='55.00' cy='14.02' r='10'/%3E%3Ccircle cx='65.00' cy='14.02' r='10'/%3E%3Ccircle cx='10.00' cy='22.68' r='10'/%3E%3Ccircle cx='20.00' cy='22.68' r='10'/%3E%3Ccircle cx='30.00' cy='22.68' r='10'/%3E%3Ccircle cx='40.00' cy='22.68' r='10'/%3E%3Ccircle cx='50.00' cy='22.68' r='10'/%3E%3Ccircle cx='60.00' cy='22.68' r='10'/%3E%3Ccircle cx='70.00' cy='22.68' r='10'/%3E%3Ccircle cx='5.00' cy='31.34' r='10'/%3E%3Ccircle cx='15.00' cy='31.34' r='10'/%3E%3Ccircle cx='25.00' cy='31.34' r='10'/%3E%3Ccircle cx='35.00' cy='31.34' r='10'/%3E%3Ccircle cx='45.00' cy='31.34' r='10'/%3E%3Ccircle cx='55.00' cy='31.34' r='10'/%3E%3Ccircle cx='65.00' cy='31.34' r='10'/%3E%3Ccircle cx='75.00' cy='31.34' r='10'/%3E%3Ccircle cx='10.00' cy='40.00' r='10'/%3E%3Ccircle cx='20.00' cy='40.00' r='10'/%3E%3Ccircle cx='30.00' cy='40.00' r='10'/%3E%3Ccircle cx='40.00' cy='40.00' r='10'/%3E%3Ccircle cx='50.00' cy='40.00' r='10'/%3E%3Ccircle cx='60.00' cy='40.00' r='10'/%3E%3Ccircle cx='70.00' cy='40.00' r='10'/%3E%3Ccircle cx='5.00' cy='48.66' r='10'/%3E%3Ccircle cx='15.00' cy='48.66' r='10'/%3E%3Ccircle cx='25.00' cy='48.66' r='10'/%3E%3Ccircle cx='35.00' cy='48.66' r='10'/%3E%3Ccircle cx='45.00' cy='48.66' r='10'/%3E%3Ccircle cx='55.00' cy='48.66' r='10'/%3E%3Ccircle cx='65.00' cy='48.66' r='10'/%3E%3Ccircle cx='75.00' cy='48.66' r='10'/%3E%3Ccircle cx='10.00' cy='57.32' r='10'/%3E%3Ccircle cx='20.00' cy='57.32' r='10'/%3E%3Ccircle cx='30.00' cy='57.32' r='10'/%3E%3Ccircle cx='40.00' cy='57.32' r='10'/%3E%3Ccircle cx='50.00' cy='57.32' r='10'/%3E%3Ccircle cx='60.00' cy='57.32' r='10'/%3E%3Ccircle cx='70.00' cy='57.32' r='10'/%3E%3Ccircle cx='15.00' cy='65.98' r='10'/%3E%3Ccircle cx='25.00' cy='65.98' r='10'/%3E%3Ccircle cx='35.00' cy='65.98' r='10'/%3E%3Ccircle cx='45.00' cy='65.98' r='10'/%3E%3Ccircle cx='55.00' cy='65.98' r='10'/%3E%3Ccircle cx='65.00' cy='65.98' r='10'/%3E%3Ccircle cx='30.00' cy='74.64' r='10'/%3E%3Ccircle cx='40.00' cy='74.64' r='10'/%3E%3Ccircle cx='50.00' cy='74.64' r='10'/%3E%3C/g%3E%3Ccircle cx='40' cy='40' r='30' stroke-width='.35'/%3E%3C/g%3E%3C/svg%3E")}

/* == 2026-11-10 conversion pass (landing page for social visitors) ===== */
/* hero: main button plus the free spread, stacked; v2.js still centres the fork under .hero__btn */
.hero__ctas{grid-area:btn;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:14px}
.hero__ctas .hero__btn{margin-top:0}
@media (max-width:720px){.hero__btn2{min-height:48px;padding:0 22px;font:600 1rem/1.2 var(--body);letter-spacing:.01em;text-transform:none}}
@media (min-width:1021px){.hero__ctas{grid-area:auto;grid-column:2;grid-row:6;margin-top:26px;gap:14px}}

/* lotus bullets (same mark as the coaching page lists) */
.spread__list,.hb-list{display:grid;gap:10px;padding:0;list-style:none;text-align:left}
.spread__list li,.hb-list li{position:relative;padding-left:28px}
.spread__list li::before,.hb-list li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:10px;background:var(--gold);-webkit-mask:var(--svg-lotus) center/contain no-repeat;mask:var(--svg-lotus) center/contain no-repeat}

/* 2. which crossroads: four cards, one tap target each */
.cx{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);max-width:1080px;margin:0 auto;padding:0;list-style:none}
.cx>li{display:flex}
.cx__card{flex:1;gap:8px}
.cx__line{max-width:30em;font-size:1rem;line-height:1.5;color:var(--ink)}
.home-cx__more{margin-top:var(--group);text-align:center}
@media (min-width:721px){.cx{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap) calc(var(--gap) * .6)}}

/* 3. the free Crossroads Spread */
.spread{display:grid;gap:var(--stack);grid-template-areas:"head" "art" "body";max-width:calc(1040px + var(--gutter) * 2)}
.spread__head{grid-area:head;text-align:center}
.spread__head h2{margin-top:8px}
.spread__lede{max-width:26em;margin:10px auto 0;font:italic 500 1.25rem/1.35 var(--serif);color:var(--plum-ink)}
.spread__art{grid-area:art;position:relative;width:260px;height:290px;margin:0 auto}
.spread__art img{position:absolute;height:auto;border-radius:6px;box-shadow:0 0 0 1px rgba(201,162,76,.35),var(--shadow-lift)}
.spread__back{width:150px;right:0;top:0;transform:rotate(6deg)}
.spread__front{width:200px;left:0;bottom:0;transform:rotate(-3deg)}
.spread__body{grid-area:body;min-width:0}
.spread__list{max-width:32em;margin:0 auto}
.spread__form{max-width:520px;margin:var(--stack) auto 0}
.spread__form .err:empty{display:none}
.spread__form .stubnote{text-align:center}
.spread__form .thanks>*+*{margin-top:12px}
.spread__form.is-busy button[type=submit]{opacity:.7;cursor:progress}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (min-width:861px){
  .spread{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"art head" "art body";column-gap:calc(var(--gap) * 1.4);row-gap:var(--stack);align-items:start}
  .spread__head{text-align:left}
  .spread__lede{margin-inline:0}
  .spread__art{align-self:start;width:100%;max-width:420px;height:470px;margin-top:28px} /* level with the heading, not floating mid-column (2026-11-11 review) */
  .spread__front{width:300px}
  .spread__back{width:230px}
  .spread__list{margin:0}
  .spread__form{margin-inline:0}
  /* even, tighter space above and below the list (2026-11-12, Carson): no phone-fold gap on desktop, 28px each side */
  .spread{row-gap:28px}
  .spread__inside{--fold-gap:0px}
  .spread__form{margin-top:28px}
}
.spread__lede br{display:none}
@media (min-width:861px){.spread__lede br{display:inline}}

/* 4. how it works */
.how{display:grid;gap:var(--stack);grid-template-columns:minmax(0,1fr);max-width:1000px;margin:0 auto;padding:0;list-style:none;text-align:center}
.how li{display:grid;justify-items:center;align-content:start;gap:8px}
.how__n{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;font:500 1.5rem/1 var(--caps);color:var(--plum);background:var(--ivory);box-shadow:inset 0 0 0 1px var(--gold),0 0 0 4px var(--ivory),0 0 0 5px rgba(201,162,76,.45)}
.how__t{font:600 clamp(1.35rem,2vw,1.6rem)/1.15 var(--serif);color:var(--plum)}
.how li p{max-width:22em}
.how__price{max-width:720px;margin:var(--stack) auto 0;text-align:center}
.how__price>*+*{margin-top:10px}
.how__from{font:600 clamp(1.5rem,2.6vw,2rem)/1.2 var(--serif);color:var(--plum)}
.how__note{font:italic 500 1.15rem/1.35 var(--serif);color:var(--plum-ink)}
.how__links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 28px}
@media (min-width:721px){.how{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}}

/* 5. free consultation: what happens, then the promise */
.hb-list{width:fit-content;max-width:100%;margin:16px auto 0}
.hb-intro .hb-promise{margin-top:16px;font:italic 600 1.3rem/1.3 var(--serif);color:var(--plum)}
@media (min-width:1021px){.hb-list{margin-left:0}}

/* 8. questions */
.home-faq__list>.fold:first-child{margin-top:0}
.home-faq .fold__text b{font-size:clamp(1.2rem,1.8vw,1.35rem)}
.home-faq .fold__body{padding-inline:6px}

/* 9. final band */
.home-ps__wrap{display:grid;justify-items:center;gap:var(--group);text-align:center}

/* phones: long button labels fit 360; cards and steps run compact (numbered steps stay left) */
@media (max-width:720px){
  .hero__btn,.home-ps .btn{padding:0 20px;font-size:.875rem;letter-spacing:.06em}
  .cx__card{padding:18px 18px 20px;gap:6px}
  .how{gap:20px;max-width:30rem;text-align:left}
  .how li{grid-template-columns:52px minmax(0,1fr);column-gap:16px;row-gap:2px;justify-items:start}
  .how__n{grid-row:1/3}
  .how li p{max-width:none}
}
/* desktop: both hero buttons paint above the gold waves and fit a 660 px laptop hero */
@media (min-width:1021px){.hero__ctas{z-index:4;margin-top:20px;gap:12px}.hero__btn2{min-height:48px}.spread__front{width:330px}.spread__back{width:250px}}

/* == 2026-11-10 phone pass (Carson): first screen, folds, one next step ==
   HERO, phones only. The first screen is a poster sized to the phone's own height:
   headline, the call line, a WHOLE flower of life with Rachel's photo inside it,
   then both buttons with clear ground under them. The circle's size comes from
   100svh minus everything else, so the buttons never touch the bottom edge
   (412x706 and 360x640 both checked). The lotus divider moves below the buttons,
   where it opens the subhead after the first scroll instead of crowding the call line. */
@media (max-width:720px){
  .hero{padding-bottom:clamp(64px,16vw,96px)}
  /* 2026-11-10 v2: the "who I help" line sits on the first screen, above the main button */
  .hero__inner{grid-template-areas:"title" "call" "portrait" "sub" "btn" "rule"}
  .hero__call{margin-top:10px}
  /* 2026-11-10 v3 (Carson: "picture majorly bigger", white subhead).
     Tall phones (760px+ high) keep both buttons on the first screen. Shorter phones
     (his OnePlus at 412x706) give that room to the circle and start the second button
     just below the fold; the dock carries the spread offer after the first scroll. */
  .hero__inner{
    --air:24px; /* calm ground between the last visible button and the bottom of the first screen */
    --title-h:calc(clamp(.9375rem,4.1vw,1.25rem) * 1.2 + 6px + clamp(2.2rem,10.4vw,3.5rem) * 2.04);
    --call-h:calc(clamp(.875rem,3.7vw,1.0625rem) * 1.3 + 10px);
    --sub-h:calc(3 * 1.4 * clamp(1rem,4.2vw,1.1875rem) + 12px);
    --ctas-h:calc(16px + 54px + 10px + 48px);
    --hd:clamp(170px,calc(100svh - var(--head-h) - 2px - var(--title-h) - var(--call-h) - 12px - var(--sub-h) - var(--ctas-h) - var(--air)),min(372px,calc(100vw - var(--gutter) * 2)));
    --hp:calc(var(--hd) * .95)}
  .hero__portrait{--d:var(--hd);--p:var(--hp);width:var(--d);height:var(--d);margin-top:12px}
  /* the full circle, no faded top: it now sits below the call line, not behind it */
  .hero__fol{left:0;top:0;width:var(--d);height:var(--d);-webkit-mask:none;mask:none}
  /* she fills the circle: head just above its centre, the chest fade ends at the circle's foot */
  .hero__me{left:calc(50% - var(--p) * .43);top:calc(var(--d) * .06);width:var(--p)}
  .hero__ctas{margin-top:16px}
  .hero__rule{margin-top:50px;width:min(70%,260px)}
  .hero__sub{margin-top:12px;max-width:22em;font:600 clamp(1rem,4.2vw,1.1875rem)/1.4 var(--body);font-style:normal;letter-spacing:.005em;text-wrap:balance;
    color:#fff;text-shadow:0 1px 2px rgba(46,10,28,.9),0 0 10px rgba(46,10,28,.65),0 2px 22px rgba(46,10,28,.55)}
}
@media (max-width:720px) and (max-height:759px){
  .hero__inner{--ctas-h:calc(16px + 54px)}
  /* second button starts 14px below the fold, whatever the circle's size */
  .hero__btn2{margin-top:calc(100svh - var(--head-h) - 2px - var(--title-h) - var(--call-h) - 12px - var(--hd) - var(--sub-h) - 16px - 54px + 4px)}
}

/* CROSSROADS CARDS on phones: a left-aligned row, title and subhead beside the chevron */
@media (max-width:759px){
  .cx{gap:12px}
  .cx__card{align-items:stretch;gap:0;padding:12px 14px 12px 20px;text-align:left;transition:box-shadow .25s var(--ease-out)}
  .cx__card .fold__btn{min-height:64px;gap:14px}
  .cx__card .fold__text{text-wrap:pretty}
  .cx__card .fold__sub{margin-top:4px;font-size:1.0625rem;line-height:1.3}
  .cx__card.is-open{box-shadow:inset 0 0 0 1.5px var(--gold),var(--shadow-lift)}
  .cx__card .fold__body{--fold-gap:10px}
  .cx__card .card__go{margin-top:4px}
}
/* "Read more" is the card's link now (it was the whole card): a full 44px tap target */
.cx__card .card__go{min-height:44px;padding-top:0}
/* desktop and tablet: the four cards stay open, "Read more" pinned to the card's foot */
@media (min-width:760px){
  .cx__card .fold__body{display:flex;flex:1;flex-direction:column;align-items:center;gap:10px;--fold-gap:0}
  .cx__card .fold__body>*+*{margin-top:0}
  .cx__card .card__go{margin-top:auto}
}
@media (min-width:760px) and (hover:hover) and (pointer:fine){.cx__card .card__go:hover svg{transform:translateX(3px)}}

/* HOW WE WORK TOGETHER: the heading folds its two intro paragraphs on phones */
.how__head{--fold-gap:0}
.how__head .fold__body>*+*{margin-top:12px}
@media (max-width:759px){.how__head{margin-bottom:22px}}

/* FREE SPREAD: on phones the five points fold behind "What's inside", so the form comes up sooner */
.spread__inside{max-width:32em;margin:0 auto}
@media (min-width:760px){.spread__inside-h{display:none}}
@media (min-width:861px){.spread__inside{margin:0}}
@media (max-width:759px){
  .spread__inside{border-block:1px solid rgba(201,162,76,.45)}
  .spread__inside-h{font:500 .9375rem/1.2 var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--plum)}
  .spread__inside .fold__btn{min-height:52px}
  .spread__inside .fold__body{--fold-gap:4px;padding-bottom:16px}
  .spread{gap:22px}
  .spread__art{width:240px;height:250px}
  .spread__back{width:136px}
  .spread__front{width:180px}
  .spread__form{margin-top:22px}
}

/* centered phone fold heads: the chevron follows the last word (same rule as inner-truth.css; belongs in v2.css .fold--center) */
@media (max-width:759px){
  .how__head h2{font-size:min(2rem,8vw)}
  .how__head .fold__head .fold__btn{display:block;text-align:center}
  .how__head .fold__head .fold__text{display:inline}
  .how__head .fold__head .fold__chev{display:inline-grid;vertical-align:.12em;margin-left:10px}
}

/* == 2026-11-11 LAYOUT PASS: home middle ================================
   Motion here plays once. The spread fan and the How line are armed by v2.js
   ([data-motion] gets .is-armed, then .is-on when enough of it is on screen;
   the attribute value is the threshold). Not armed under reduced motion or
   without IntersectionObserver, so everything below shows at rest by default. */

/* WHICH CROSSROADS: a gold line drawing on each card (img/v2/cx-*.svg, same
   gold and engraving as the Journal feather and moon). Desktop and tablet:
   above the title. Phones: a small mark beside the title, the subhead below at
   full width, so the folded cards stay compact. The four cards stagger in
   through the shared 90ms group rule (inline delays removed). */
.cx__art{display:block;width:76px;height:76px;margin:0 auto 12px}
.cx__name{display:inline}
@media (max-width:759px){
  .cx__card .fold__text,.cx__card .fold__head:not(:has(>.fold__btn)){display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;align-items:center}
  .cx__art{grid-column:1;grid-row:1;width:40px;height:40px;margin:0}
  .cx__name{grid-column:2;grid-row:1}
  .cx__card .fold__sub{grid-column:1/-1;grid-row:2}
}

/* HOW WE WORK TOGETHER: a thin gold line runs from ring to ring (across on
   desktop, down on phones where the steps stack), and each ring fills plum as
   the line reaches it. Each step draws its own segment to the next ring. */
.how>li{position:relative}
.how__n{position:relative;z-index:1;background:var(--plum);color:var(--gold-hi)}
.how>li:not(:last-child)::before{content:"";position:absolute;z-index:0;left:50%;top:26px;width:calc(100% + var(--gap));height:1px;background:rgba(201,162,76,.85);transform-origin:left center;pointer-events:none}
@media (max-width:720px){.how>li:not(:last-child)::before{left:26px;width:1px;height:calc(100% + 20px);transform-origin:center top}}
@media (prefers-reduced-motion:no-preference){
  .how.is-armed>li::before{transition:transform .7s var(--ease-in-out)}
  .how.is-armed .how__n{transition:background-color .5s var(--ease-out),color .5s var(--ease-out)}
  .how.is-armed:not(.is-on)>li::before{transform:scaleX(0)}
  .how.is-armed:not(.is-on) .how__n{background:var(--ivory);color:var(--plum)}
  .how.is-armed>li:nth-child(1) .how__n{transition-delay:.25s}
  .how.is-armed>li:nth-child(1)::before{transition-delay:.4s}
  .how.is-armed>li:nth-child(2) .how__n{transition-delay:1.05s}
  .how.is-armed>li:nth-child(2)::before{transition-delay:1.15s}
  .how.is-armed>li:nth-child(3) .how__n{transition-delay:1.8s}
}
@media (prefers-reduced-motion:no-preference) and (max-width:720px){.how.is-armed:not(.is-on)>li::before{transform:scaleY(0)}}

/* the price: the home page's one deep band moment. Plum ground, gold double
   edge, ivory and gold-hi type (all well above 4.5:1 on plum-deep). */
.how__price{isolation:isolate;overflow:hidden;color:rgba(251,247,239,.92);background:radial-gradient(120% 95% at 50% 0,#5c1838 0,var(--plum-deep) 60%,#3b0c21 100%);box-shadow:inset 0 0 0 1px rgba(227,201,142,.6),var(--shadow-lift)}
.how__price::before{content:"";position:absolute;inset:8px;z-index:-1;border-radius:calc(var(--r-card) - 8px);box-shadow:inset 0 0 0 1px rgba(227,201,142,.28);pointer-events:none}
.how__price .how__from{color:var(--gold-hi)}
.how__from::before{content:"";display:block;width:40px;height:25px;margin:0 auto 12px;background:var(--gold-soft);-webkit-mask:var(--svg-lotus) center/contain no-repeat;mask:var(--svg-lotus) center/contain no-repeat}
.how__price .how__note{color:var(--gold-soft)}
.how__price .text-link{color:var(--gold-hi)}
.how__price .text-link span{background-image:linear-gradient(rgba(227,201,142,.7),rgba(227,201,142,.7))}
.how__price :focus-visible{outline-color:var(--gold-hi)}

/* CROSSROADS SPREAD: the two pages start tucked together and fan out to their
   resting angles in one move (1.5s), the back page a beat behind. No crop. */
@media (prefers-reduced-motion:no-preference){
  .spread__art.is-armed img{transition:transform 1.5s var(--ease-out) .15s}
  .spread__art.is-armed .spread__back{transition-delay:.25s}
  .spread__art.is-armed:not(.is-on) .spread__front{transform:translate(9%,-6%) rotate(1deg)}
  .spread__art.is-armed:not(.is-on) .spread__back{transform:translate(-36%,16%) rotate(-2deg)}
}

/* == 2026-11-11 hero L2 (Carson: "she is not centered in the flower of life"). Her face/head axis sits at
   38.4% of the cutout's width (master 1748 px wide, axis x 672). These rules put that axis on the ring's
   vertical centre line at every width, with her face just above the ring's centre. Tablets: the box is --p
   wide and the ring is centred on it. Phones: the box is the circle (--d). Desktop: ring centre x = .36 x --p. */
.hero__me{left:calc(50% - var(--p) * .384)}
@media (max-width:720px){
  .hero__me{left:calc(50% - var(--p) * .384);top:calc(var(--d) * .10);
    /* chest fade still ends at the circle's foot (.98 x --d) now that she sits a little lower */
    -webkit-mask:linear-gradient(180deg,#000 0,#000 calc(var(--p) * .74),transparent calc(var(--p) * .926)),linear-gradient(90deg,transparent 0,#000 9%);-webkit-mask-composite:source-in;
    mask:linear-gradient(180deg,#000 0,#000 calc(var(--p) * .74),transparent calc(var(--p) * .926)),linear-gradient(90deg,transparent 0,#000 9%);mask-composite:intersect}
}
@media (min-width:1021px){.hero__me{left:calc(var(--p) * -.024);top:calc(var(--p) * .04)}}