/* /assets/css/pages/about.css : page-group layout only. Loaded AFTER /assets/css/site.css by the pages of this group.
   Rules here may only add page-specific layout (grids, spacing, one-off crops). Never redefine site.css tokens or components.
   Pages: about (.pg-about, ab-*), begin (.pg-begin, bg-*), contact (.pg-contact, ct-*), privacy (.pg-privacy, pv-*),
   thank-you-guide + thank-you-purchase (.pg-ty, ty-* and her original ids/classes .ty .next .fs .hr-gold .detail). */

/* =================================================================== ABOUT =================================================================== */
/* hero: the big name (folio graft 7) */
.ab-hero .hero-txt{gap:22px}
.ab-name{display:flex;flex-direction:column;align-items:center;text-align:center;font-family:var(--serif);font-weight:300;color:var(--ink);line-height:.8}
.ab-meet{display:block;font-style:italic;color:var(--gold-deep);font-size:clamp(34px,3.6vw,56px);line-height:1;margin-bottom:.06em}
.ab-name .big-name{display:block;font-size:clamp(112px,17vw,272px);line-height:.8;letter-spacing:-.035em}
.ab-role{margin-top:clamp(30px,4.4vw,72px);max-width:none;letter-spacing:.24em}
.ab-hero .hero-meta{gap:8px 0}
.ab-belief{font-size:clamp(26px,2.4vw,36px);line-height:1.3}
.ab-hero .hero-arch{width:min(100%,500px)}
.ab-hero .hero-arch img{object-position:46% 30%}

/* manifesto ladder on silk */
.ab-state{background:var(--silk)}
.ab-state .ladder .call{max-width:18ch}

/* story: the portrait holds still beside the long read */
.ab-story .ed{align-items:start}
.ab-story-fig{max-width:560px}
.ab-story-fig .frame{display:block;aspect-ratio:3/4}
.ab-story-fig img{object-position:50% 22%}
.ab-story .ed-txt{padding-top:clamp(8px,4vw,64px)}
.ab-turn{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(28px,2.6vw,38px);line-height:1.25;color:var(--gold-deep);text-align:center;text-wrap:balance;max-width:14em;margin:18px auto 8px}
.ab-turn::before{content:"";display:block;width:34px;height:1px;background:var(--gold);margin:0 auto 20px}
.ab-story .lead.it{margin-top:10px;font-size:clamp(24px,2.1vw,30px)}
@media (min-width:1024px){.ab-story-fig{position:sticky;top:calc(var(--bar) + 68px + 40px)}}

/* the pull quote at page scale over the temple wall */
.ab-return{padding:clamp(140px,18vw,260px) 0}
.ab-return-q{display:flex;flex-direction:column;align-items:center;text-align:center;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(54px,9.4vw,156px);line-height:1;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.ab-return-q .a{display:block;padding-right:1.1em}
.ab-return-q .b{display:block;padding-left:1.1em;color:var(--gold-ink)}   /* wow 1: gold-deep measured 2.75:1 over the temple-wall veil */
.ab-return-q::before{content:"\201C";display:block;margin:0 auto .1em;font-style:normal;font-size:.7em;line-height:.6;color:var(--gold)}

/* the work */
.ab-work-fig{justify-self:end;width:100%;max-width:540px;aspect-ratio:4/5}
.ab-work-fig>img{position:absolute;left:0;top:-7%;width:100%;height:114%;object-fit:cover;object-position:50% 40%}
.ab-close{text-align:center;font-family:var(--serif);font-weight:300;font-size:clamp(28px,2.8vw,42px);line-height:1.2;color:var(--ink);margin-top:14px;text-wrap:balance}
.ab-close em{font-style:italic;color:var(--gold-deep)}

/* lineage */
.ab-line-fig{width:100%;max-width:520px}
.ab-line-fig img{object-position:50% 30%}
.ab-rose{width:40px;height:40px;color:var(--gold-deep)}
.ab-rose circle,.ab-rose path{fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round}
.ab-lineage .body>em{font-size:1.18em}

/* credentials */
.ab-creds-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-items:start}
.ab-creds-in .kick{grid-column:1/-1;margin-bottom:26px;text-align:center;letter-spacing:.44em}
.ab-creds-in .kick::before,.ab-creds-in .kick::after{content:"";display:inline-block;vertical-align:middle;position:relative;top:-.1em;width:40px;height:1px;background:var(--gold)}
.ab-creds-in .kick::before{margin-right:16px}
.ab-creds-in .kick::after{margin-left:calc(16px - .44em)}
.ab-creds-in .creds{grid-column:1/-1;justify-self:center;width:100%;max-width:24em}
.ab-creds .creds li{justify-content:center;text-align:center}
.ab-creds .creds li .num{min-width:0}

/* who I serve */
.ab-who-fig{display:block;aspect-ratio:1800/818}
.ab-who-fig>img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;object-position:50% 50%}
.ab-who-g{margin-top:clamp(56px,7vw,104px);row-gap:36px;align-items:start}
.ab-who-head{grid-column:1/7;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.ab-who-txt{grid-column:8/13;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.ab-who-txt>.body{text-align:left;width:100%;max-width:var(--measure)}
.ab-who .ab-close{font-size:clamp(30px,3vw,46px)}

.ab-fine{margin-top:6px}

/* =================================================================== BEGIN =================================================================== */
.bg-hero{padding-bottom:clamp(36px,5vw,72px)}
.bg-h1 .big-name{display:block;font-size:clamp(112px,17vw,272px);line-height:.8;letter-spacing:-.035em}
.bg-h1 em{font-size:clamp(30px,3.4vw,54px);line-height:1.1;margin-top:clamp(44px,5.4vw,88px);max-width:15em}
.bg-hero .hero-arch{width:min(100%,420px)}
.bg-hero .hero-arch img{object-position:50% 20%}
.bg-hero .hero-cue{margin-top:6px}

.bg-path{position:relative;background:var(--silk);padding:clamp(72px,9vw,130px) 0 var(--pad)}
.bg-steps{display:flex;flex-direction:column}
.bg-step{position:relative;width:46%}
.bg-step:nth-child(odd){margin-right:auto}
.bg-step:nth-child(even){margin-left:auto}
.bg-step+.bg-step{margin-top:calc(-1 * clamp(80px,10vw,150px))}
.bg-knot{position:absolute;top:72px;width:1px;height:1px;pointer-events:none}
.bg-step:nth-child(odd) .bg-knot{left:108.696%}
.bg-step:nth-child(even) .bg-knot{left:-8.696%}
.bg-step.offer-card{padding:clamp(28px,3vw,44px);gap:16px}
.bg-step .h3{font-size:clamp(30px,2.8vw,42px);line-height:1.04}
.bg-step .h3 a{transition:color var(--t-fast)}
.bg-step .h3 a:hover{color:var(--gold-ink)}
.bg-step .h3 em{display:block;font-size:.62em;margin-top:.3em}
/* the sub-line under a card title drops under 24px below 1340: gold-deep fails AA there, so it takes the AA gold */
@media (max-width:1339px){.bg-step .h3 em{color:var(--gold-text)}}
.bg-step p{max-width:32em}
.bg-step .oc-actions{margin-top:10px;gap:10px}
.bg-step .oc-actions .btn{white-space:normal;line-height:1.4;padding-top:10px;padding-bottom:10px}
.bg-step .oc-actions .more{margin-top:2px}
.bg-pair{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}
.bg-step-fig{width:calc(100% + 2 * clamp(28px,3vw,44px));margin:calc(-1 * clamp(28px,3vw,44px)) calc(-1 * clamp(28px,3vw,44px)) 10px}
.bg-step-fig img{object-position:50% 40%}
.bg-note{padding:10px 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;align-self:auto}
.bg-note::before{content:"";display:block;width:34px;height:1px;background:var(--gold);margin-bottom:6px}
.bg-step.bg-note{margin-top:clamp(40px,5vw,80px)}
.bg-step.bg-note+.bg-step{margin-top:calc(-1 * clamp(160px,16vw,240px))}
.bg-note .bg-knot{top:30px}
.bg-note-h{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(34px,3.4vw,52px);line-height:1.05;color:var(--gold-deep)}
.bg-note-t{font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.5vw,21px);line-height:1.6;color:var(--ink-2);max-width:30em;text-align:left;text-wrap:pretty}
.pg-begin .final-h{font-size:clamp(50px,5.6vw,92px)}

/* =================================================================== CONTACT =================================================================== */
.ct-hero{min-height:46svh}
.ct-hero .h1 em{display:inline;font-size:1em;margin:0;padding:0}
.ct-hero .lead{max-width:28em}
.ct-main{padding-top:0}
.ct-grid{align-items:start;row-gap:56px}
.ct-form{grid-column:1/8}
.ct-form iframe{min-height:725px}
.ct-info{grid-column:9/13;display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
.ct-fig{width:min(100%,300px)}
.ct-fig img{object-position:40% 78%}
.ct-list{width:100%;border-bottom:1px solid var(--hair)}
.ct-list>div{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:8px;padding:20px 0;border-top:1px solid var(--hair)}
.ct-list dt{padding-top:2px}
.ct-list dd{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:26em;text-wrap:balance;font-size:15px;line-height:1.7;color:var(--ink-2)}
.ct-list dd strong{font-weight:400;letter-spacing:.08em;color:var(--ink)}
.ct-list dd a{color:var(--gold-text);border-bottom:1px solid var(--hair-strong);transition:color var(--t-fast)}
.ct-list dd a:hover{color:var(--ink)}
.ct-list .ct-big{align-self:center;display:inline-flex;align-items:center;min-height:44px;font-family:var(--serif);font-weight:300;font-size:28px;line-height:1;color:var(--ink);border:0;margin-top:-10px}
.ct-addr{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.35;color:var(--ink)}

/* =================================================================== PRIVACY =================================================================== */
.pv-hero .hero-meta{margin-top:4px}
.pv-sec{padding:clamp(64px,8vw,120px) 0 var(--pad)}
.pv-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(40px,6vw,104px);align-items:start}
.pv-aside{position:sticky;top:calc(var(--bar) + 68px + 32px)}
.pv-index a{font-size:18px;min-height:44px;gap:16px;padding:6px 0}
.pv-index a i{min-width:30px;font-size:13px}
.pv-prose{margin:0;padding:0;max-width:720px}
.pv-prose>p:first-child{font-size:clamp(22px,1.9vw,26px);line-height:1.5;color:var(--ink)}
.pv-prose h2{scroll-margin-top:calc(var(--bar) + 68px + 24px)}
.pv-choice{background:var(--ivory);border:1px solid var(--hair-strong);padding:26px 30px;margin-top:1.4em}
.pv-choice-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pv-choice-label{font-size:11px}
.btn-toggle{min-width:132px}
.btn-toggle[aria-pressed="true"]{background:var(--gold-ink);border-color:var(--gold-ink);color:var(--ivory)}
.btn-toggle:disabled{cursor:default;opacity:.85}
.pv-choice-state{margin-top:16px;font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.7;color:var(--soft)}

/* =================================================================== THANK YOU =================================================================== */
.ty{position:relative;min-height:max(100svh,760px);display:flex;align-items:center;padding:calc(var(--bar) + var(--navh) + 48px) 0 clamp(64px,8vw,120px);overflow:hidden;background:var(--silk)}
.ty-bg{position:absolute;inset:0}
.ty-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.ty-purchase .ty-bg img{object-position:50% 40%}
.ty-veil{position:absolute;inset:0;background:radial-gradient(ellipse 70% 75% at 50% 52%,rgba(252,250,245,.5),rgba(246,242,233,.78) 75%)}
.ty-purchase .ty-veil{background:linear-gradient(to bottom,rgba(246,242,233,.88),rgba(237,230,214,.62) 45%,rgba(246,242,233,.86))}
.ty-wrap{display:flex;justify-content:center}
.ty-card{position:relative;width:100%;max-width:740px;background:var(--light);outline:1px solid var(--hair-strong);outline-offset:-12px;box-shadow:var(--shadow-card);padding:clamp(52px,6vw,88px) clamp(28px,5vw,72px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.ty-card .crown{margin:0 auto 2px}
.ty-h{font-size:clamp(52px,6.4vw,96px);line-height:.95;text-wrap:balance}
/* desktop: the whole card (crown to signature) sits inside a 900px first screen, the guide title on one line */
@media (min-width:768px){
  .ty-card{max-width:780px;padding:clamp(48px,4.6vw,68px) clamp(28px,5vw,72px)}
  .ty-h{font-size:clamp(52px,5.6vw,82px)}
}
.ty-card .lead{max-width:26em;text-wrap:balance}
.ty .hr-gold{width:64px;height:1px;border:0;background:var(--gold);margin:4px auto}
.ty .detail{font-size:15px;line-height:1.7;color:var(--soft);max-width:30em;text-wrap:balance}
.ty .next{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.ty .fs{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;background:var(--ivory);border:1px solid var(--hair);padding:30px clamp(20px,4vw,40px)}
.ty .fs-line{font-family:var(--serif);font-weight:300;font-size:clamp(22px,2vw,28px);line-height:1.3;color:var(--ink)}
.ty .fs-row{display:flex;align-items:stretch;border:1px solid var(--hair-strong);background:var(--light)}
.ty .fs-code{display:flex;align-items:center;padding:0 22px;font-family:var(--sans);font-weight:500;font-size:16px;letter-spacing:.24em;color:var(--ink)}
.ty .fs-copy{min-height:48px;padding:0 22px;font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.3em;text-transform:uppercase;background:var(--gold-ink);color:var(--ivory);transition:background var(--t-ui) var(--ease)}
.ty .fs-copy:hover{background:var(--ink)}
.ty .fs-small{font-size:13px;color:var(--soft)}
.ty-sign{font-family:var(--serif);font-style:italic;font-weight:300;font-size:21px;color:var(--ink-2);margin-top:10px}

/* =================================================================== tablet =================================================================== */
@media (max-width:1023px){
  .ab-story-fig{max-width:520px}
  .ab-work-fig{justify-self:center}
  .ab-creds-in{grid-template-columns:minmax(0,1fr);gap:20px}
  .ab-who-head,.ab-who-txt{grid-column:1/-1}
  .bg-step{width:48%}
  .bg-step:nth-child(odd) .bg-knot{left:104.17%}
  .bg-step:nth-child(even) .bg-knot{left:-4.17%}
  .ct-form{grid-column:1/-1}
  .ct-info{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:var(--cg);row-gap:24px;align-items:start;justify-items:center}
  .ct-info .ct-fig{grid-row:1/3}
  .pv-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .pv-aside{position:static}
  .pv-index ol{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =================================================================== phone =================================================================== */
@media (max-width:767px){
  .ab-hero .hero-txt{gap:18px}
  .ab-meet{font-size:34px}
  .ab-name .big-name{font-size:clamp(108px,34vw,140px)}
  .ab-belief{font-size:24px}
  .ab-hero .hero-arch{margin-top:8px}
  .ab-story .ed-txt{padding-top:0}
  .ab-story-fig{width:86%;margin-left:auto;margin-right:auto}
  .ab-turn{font-size:28px}
  .ab-return{padding:110px 0}
  .ab-return-q{font-size:clamp(46px,13.4vw,60px)}
  .ab-return-q .a{padding-right:.5em}
  .ab-return-q .b{padding-left:.5em}
  .ab-work-fig{width:86%;margin-left:auto;margin-right:auto}
  .ab-line-fig{width:86%;margin-left:auto;margin-right:auto}
  .ab-who-fig{aspect-ratio:4/3}
  .ab-who-g{margin-top:44px}

  .bg-h1 .big-name{font-size:clamp(108px,34vw,140px)}
  .bg-h1 em{font-size:clamp(28px,8vw,34px)}
  .bg-path{padding:48px 0 96px}
  .bg-step,.bg-step+.bg-step,.bg-step.bg-note,.bg-step.bg-note+.bg-step{width:100%;margin-top:20px}
  .bg-step:first-child{margin-top:0}
  .bg-step.bg-note{margin:44px 0 24px}
  .bg-pair{grid-template-columns:minmax(0,1fr)}
  .bg-step-fig{width:calc(100% + 44px);margin:-26px -22px 8px}
  .pg-begin .final-h{font-size:clamp(46px,13vw,58px)}
  .bg-h1 em{margin-top:36px}

  .ct-hero{min-height:0}
  .ct-info{display:flex}
  .ct-fig{width:72%;align-self:center}
  /* her legacy coda: Navigate and Sessions side by side, Connect centred across both below them */
  .pg-contact .coda-col:last-child{grid-column:1/-1}
  .ct-list .ct-big{margin-top:-6px}
  .ct-hero{padding-bottom:32px}

  .pv-index ol{grid-template-columns:minmax(0,1fr)}
  .pv-choice{padding:22px 20px}

  .ty{padding-top:calc(var(--bar) + var(--navh) + 28px);padding-bottom:56px;min-height:0}
  .ty-wrap{padding:0 16px}
  .ty-card{padding:48px 24px 44px;outline-offset:-9px}
  .ty-h{font-size:clamp(46px,13vw,60px)}
  .ty .next{flex-direction:column;align-items:stretch;width:100%}
  .ty .next .btn,.ty .fs .btn{width:100%}
  .ty .fs-code{padding:0 14px;font-size:14px;letter-spacing:.18em}
}
@media (max-width:767px){
  .ab-hero .ab-role{flex-direction:column;gap:4px;margin-top:34px}
  .ab-hero .ab-role span+span::before{display:none}
}
/* 1024 to 1180: the contact aside moves under the form */
@media (min-width:768px) and (max-width:1180px){
  .ct-form{grid-column:1/-1}
  .ct-info{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:var(--cg);row-gap:24px;align-items:start;justify-items:center}
  .ct-info .ct-fig{grid-row:1/3}
}

/* =================================================================== review fixes =================================================================== */
/* begin: the last knot sits in the gutter at the foot of card VII, so the line never runs under the card on its way to the crown */
.bg-knot.bg-knot-end{top:auto;bottom:0}
/* tap targets: card titles and the contact directory links reach 44px */
.bg-step .h3 a{display:inline-block;padding:7px 0}


/* =================================================================== review round 1 (alignment) =================================================================== */
/* about credentials: a centred list reads ragged when each row carries its numeral inline (I, II, III start at different x).
   The numeral sits over its title instead, so every row is one centred pair on the axis, like the begin path cards. */
.ab-creds .creds li{flex-direction:column;align-items:center;gap:2px;padding:14px 0 15px}
.ab-creds .creds li .num{font-size:13px;line-height:1.2;letter-spacing:.12em}
/* contact phone: the aside stack keeps the tablet grid's align-items:start when it turns back into a flex column,
   which left "Other ways to connect" hugging the left edge above a centred directory */
@media (max-width:767px){.ct-info{align-items:center}}
/* privacy: the closing contact address is a short sign-off block under a centred head, so it centres with it */
.pv-prose h2#contact+p{text-align:center}


/* =================================================================== review round 2 (alignment) =================================================================== */
/* begin tablet (768-899, zigzag cards 48% wide) and small phones (<380, ~254px buttons): long button labels broke onto two centred lines
   ("FULL MOON WITH / BLUE LOTUS"). A tighter side padding and tracking keeps every card button on one line, one height. */
@media (max-width:379px),(min-width:768px) and (max-width:899px){
  .bg-step .oc-actions .btn{padding-left:12px;padding-right:12px;letter-spacing:.2em}
}
/* contact desktop: her legacy coda reads as four columns; the lede column takes the same hairline cap as Navigate / Sessions / Connect,
   so the four tops sit on one line */
@media (min-width:1024px){
  .pg-contact .coda-lede{border-top:1px solid var(--hair);padding-top:16px}
}