/* /assets/css/pages/services.css : page-group layout only. Loaded AFTER /assets/css/site.css by the pages of this group
   (online-kundalini-activation, sound-bath-carlsbad, blue-lotus-reset, ceremonies, full-moon-ceremony, new-moon-ceremony).
   Rules here only add page layout (grids, spacing, crops) and style the markup her /js/ceremony-dates.js writes
   (.row .date .m .d .w .meta .tm, .cta-l, .cta-r, .btn.sm / .btn-sm). Tokens and shared components stay in site.css.
   ALIGNMENT ("centred sanctuary", _scratch/align/SYSTEM.md): every display element of these pages sits on the centre line of its
   composition: section and bucket heads, the next-date panel, calendar cards, ceremony cards and their actions, step numerals,
   short step lines, notes. Reading keeps a left edge in a centred measure: long hero leads on phone, prose, lists, FAQ answers.
   Card buttons all share one width (a single Reserve and an In person / Online pair both fill the card). */

/* ---------------------------------------------------------------- shared helpers */
.svc .h2 em,.svc .h3 em{white-space:normal}
.svc-split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(40px,7vw,120px);align-items:start}
.svc-split>.sec-head{position:sticky;top:calc(var(--bar) + 68px + 40px);margin-bottom:0}
.svc-note{font-size:15px;line-height:1.7;color:var(--soft);max-width:36em}
.svc-pull{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(28px,2.8vw,42px);line-height:1.2;color:var(--gold-deep);text-wrap:balance;max-width:16em;text-align:center;margin-left:auto;margin-right:auto}
.svc-pull::before{content:"";display:block;width:34px;height:1px;background:var(--gold);margin:0 auto 22px}
/* a small subhead that opens a full-width row (sound bath "What a sound bath does") */
.svc-sub{text-align:center}
/* the shared FAQ pattern: head centred above, the questions in a centred reading column */
.svc-faq{max-width:880px;margin:0 auto}
.svc-faq>.sec-head{margin-bottom:clamp(36px,4vw,56px)}
.svc-center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.svc-mid{margin-top:clamp(64px,8vw,110px);padding-top:clamp(48px,6vw,80px);border-top:1px solid var(--hair);display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center}
.svc-mid .h3{font-size:clamp(30px,3vw,44px)}

.hero--page .hero-arch.land img{object-position:62% 50%}

/* ---------------------------------------------------------------- "Next ceremony" panel inside the page hero */
.svc-next{position:relative;width:100%;max-width:520px;margin:6px auto 0;padding:28px 30px 30px;background:var(--light);border:1px solid var(--hair);display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.svc-next::before{content:"";position:absolute;inset:6px;border:1px solid rgba(182,154,94,.18);pointer-events:none}
.svc-next .when{font-family:var(--serif);font-weight:300;font-size:clamp(28px,2.6vw,38px);line-height:1.05;color:var(--ink);letter-spacing:-.01em}
.svc-next .meta{display:grid;grid-template-columns:repeat(2,minmax(0,auto));justify-content:center;gap:2px 28px;font-size:15px;line-height:1.6;color:var(--ink-2);text-align:left}   /* a short list, shrink-wrapped on the axis */
.svc-next .meta span{position:relative;padding-left:16px}
.svc-next .meta span::before{content:"\2013";position:absolute;left:0;color:var(--gold)}
.svc-next .btn{margin-top:10px}
/* desktop: these heroes carry a longer lead and the next-date panel, so tighten the column to keep the booking
   button inside a 1440x900 (and 1280x800) first screen */
@media (min-width:1024px){
  .svc-hero{padding-top:calc(var(--bar) + var(--navh) + clamp(28px,4vh,56px));padding-bottom:clamp(40px,6vh,72px)}
  .svc-hero .hero-txt{gap:18px}
  .svc-hero .h1{font-size:clamp(60px,7.4vw,116px)}
  .svc-hero .hero-txt .lead{font-size:clamp(19px,1.45vw,22px);line-height:1.5;max-width:31em}
  .svc-hero .cta-row{margin-top:6px}
  .svc-hero .hero-cue{margin-top:4px}
  .svc-hero .svc-next{padding:22px 26px 24px;gap:9px}
  .svc-hero .svc-next .when{font-size:clamp(26px,2.2vw,34px)}
  .svc-hero .svc-next .btn{margin-top:6px}
}
@media (min-width:1024px) and (max-height:840px){
  .svc-hero .hero-txt{gap:14px}
  .svc-hero .h1{font-size:clamp(60px,min(7.4vw,11.4vh),116px)}
}
/* short laptop screens (1366x768, 1280x720): the full and new moon heroes (three-line H1, four-line lead, next-date panel)
   keep "Reserve your space" inside the first screen */
@media (min-width:1024px) and (max-height:800px){
  .svc-hero{padding-top:calc(var(--bar) + var(--navh) + 18px)}
  .svc-hero .h1{font-size:clamp(60px,min(7.4vw,10vh),116px)}
  .svc-hero .hero-txt .lead{font-size:18px}
  .svc-hero .svc-next{padding:18px 26px 20px;gap:8px}
}
@media (max-width:767px){
  .svc-next{padding:18px 18px 18px;gap:8px}
  .svc-next .when{font-size:26px}
  .svc-next .meta{grid-template-columns:minmax(0,auto);font-size:14px;gap:0}
  .svc-next .btn{width:100%;margin-top:6px}
  /* phone: keep the H1 and the booking button inside the first 844px */
  .svc-hero{padding-top:calc(var(--bar) + var(--navh) + 22px)}
  .svc-hero .hero-txt{gap:16px}
  .svc-hero .h1{font-size:clamp(44px,12.6vw,54px)}
  .svc-hero .lead{font-size:17.5px;line-height:1.5}
  .svc-hero .eyebrow{font-size:11px;letter-spacing:.28em}
  /* her hero leads run four to five lines on a phone: they read left, in the centred column (the reading rule) */
  .svc-hero .hero-txt>.lead:not(.it){text-align:left;align-self:stretch;text-wrap:pretty}
}

/* ---------------------------------------------------------------- five-step evening */
.steps.five{grid-template-columns:repeat(5,minmax(0,1fr))}
/* three across below 1180: a centred flex row, so the short second row (IV, V) sits on the axis */
@media (max-width:1180px){.steps.five{--sg:clamp(24px,3vw,48px);display:flex;flex-wrap:wrap;justify-content:center;column-gap:var(--sg);row-gap:44px}.steps.five>li{flex:0 1 calc((100% - 2 * var(--sg)) / 3);min-width:0}}
@media (max-width:767px){.steps.five{row-gap:28px}.steps.five>li{flex-basis:100%}}
.steps.plain li p{font-family:var(--serif);font-weight:300;font-size:clamp(20px,1.6vw,23px);line-height:1.5;color:var(--ink);text-align:center;text-wrap:balance}

/* ---------------------------------------------------------------- the plant ally: one tall arch between two columns */
.ally{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr);column-gap:clamp(28px,4vw,72px);align-items:center}
.ally-fig{grid-column:2;grid-row:1/3;margin:0 auto;width:100%;max-width:440px;justify-self:center;aspect-ratio:3/4.3}
.ally-fig img{object-position:50% 35%}
.ally-item{display:flex;flex-direction:column;gap:14px}
.ally-item .kick{margin-bottom:2px}
.ally-item h3{font-family:var(--serif);font-weight:300;font-size:clamp(28px,2.4vw,36px);line-height:1.05;color:var(--ink)}
.ally-item p{font-size:16px;line-height:1.8;color:var(--ink-2)}
.ally-a{grid-column:1;grid-row:1;align-self:end;text-align:right;align-items:flex-end}
.ally-b{grid-column:3;grid-row:1;align-self:end}
.ally-c{grid-column:1/-1;grid-row:3;margin-top:clamp(64px,7vw,104px)}
.ally-c-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,6vw,96px);align-items:start;border-top:1px solid var(--hair);padding-top:36px}
/* "What guests share" sits centred in its column, beside the centred feature quote */
.ally-c .ally-item{align-items:center;text-align:center}
.ally-c .ally-item p{max-width:30em;text-wrap:pretty}
.ally-c .rev-feature{grid-column:auto}
.ally.no-fig .ally-a{text-align:center;align-items:center}
.care{margin:clamp(48px,6vw,80px) auto 0;max-width:var(--measure);padding:26px 30px;border:1px solid var(--hair-strong);background:rgba(252,250,245,.6);font-size:15px;line-height:1.8;color:var(--ink-2)}
.care strong{font-weight:500;color:var(--ink);letter-spacing:.02em}
@media (max-width:1023px){
  .ally{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:48px}
  .ally-fig{grid-column:1/-1;grid-row:1;max-width:420px}
  /* stacked: the two side columns lose their mirror; heads sit on the axis, the paragraph reads left beneath */
  .ally-a,.ally-b{align-items:center;text-align:center}
  .ally-a p,.ally-b p,.ally-c .ally-item p{text-align:left;align-self:stretch}
  .ally-a{grid-column:1;grid-row:2;align-self:start}
  .ally-b{grid-column:2;grid-row:2;align-self:start}
  .ally-c{grid-row:3;margin-top:8px}
  .ally-c-in{grid-template-columns:minmax(0,1fr);row-gap:36px}
}
@media (max-width:767px){
  .ally{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .ally-fig{width:86%;justify-self:center}
  .ally-a,.ally-b,.ally-c{grid-column:1;grid-row:auto}
  .care{padding:22px 20px}
}

/* ---------------------------------------------------------------- Instagram kind words: real screenshots in hairline cards */
.ig-wall{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(20px,2.5vw,36px)}
.ig-card{flex:0 0 calc((100% - 2 * clamp(20px,2.5vw,36px)) / 3);margin:0;background:#fff;border:1px solid var(--hair);padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px}
.ig-card img{width:100%;height:auto;display:block}
.ig-card figcaption{font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text);padding-top:12px;border-top:1px solid var(--rule-ink)}
.ig-card:nth-child(3n+2){margin-top:clamp(20px,3vw,48px)}
@media (max-width:1023px){.ig-card{flex-basis:calc((100% - clamp(20px,2.5vw,36px)) / 2)}.ig-card:nth-child(n){margin-top:0}}
/* phone: a quiet swipe row instead of five stacked screenshots */
@media (max-width:767px){
  .ig-wall{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 8px;scroll-padding:0 var(--gutter);scrollbar-width:none}
  .ig-wall::-webkit-scrollbar{display:none}
  .ig-card{flex:0 0 84%;scroll-snap-align:start;padding:14px}
}

/* ---------------------------------------------------------------- calendars written by /js/ceremony-dates.js */
/* online page: a hairline list of the month's dates */
.cal-list{border-top:1px solid var(--hair)}
.cal-list .row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:clamp(22px,3vw,48px);padding:22px 0;border-bottom:1px solid var(--hair)}
.cal-list .date{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:14px;align-items:end;min-width:150px}
.cal-list .date .d{grid-row:1/3;font-family:var(--serif);font-weight:300;font-size:clamp(56px,5vw,76px);line-height:.85;color:var(--ink);letter-spacing:-.02em}
.cal-list .date .m{font-family:var(--serif);font-style:italic;font-weight:300;font-size:22px;line-height:1;color:var(--gold-text)}
.cal-list .date .w{font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text)}
.cal-list .tm{font-family:var(--serif);font-weight:300;font-size:clamp(22px,1.9vw,28px);line-height:1.2;color:var(--ink)}
.cal-list .tm span{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--soft);margin-top:8px}
.cal-list .btn-sm,.cal-rows .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 26px;font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.3em;text-transform:uppercase;white-space:nowrap;background:var(--gold-ink);color:var(--ivory);border:1px solid var(--gold-ink);transition:background var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease),transform var(--t-ui) var(--ease),box-shadow var(--t-ui) var(--ease)}
.cal-list .btn-sm:hover,.cal-rows .btn:hover,.cal-list .btn-sm:focus-visible,.cal-rows .btn:focus-visible{background:var(--ink);border-color:var(--ink);transform:translateY(-1px);box-shadow:var(--shadow-btn)}
@media (max-width:767px){
  /* phone: date and time side by side on the axis, the button full width beneath */
  .cal-list .row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:22px;row-gap:18px;padding:22px 0 24px}
  .cal-list .date{min-width:0}
  .cal-list .btn-sm{flex:0 0 100%;width:100%;min-height:50px}
}
/* ceremonies page: "Coming up next" as three cards, the date set large in serif */
.cal-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.5vw,32px)}
.cal-rows .row{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding:30px 30px 32px;background:var(--light);border:1px solid var(--hair)}
.cal-rows .row:nth-child(2){margin-top:clamp(24px,3vw,48px)}   /* the middle card steps down: a symmetric rhythm */
.cal-rows .date{display:grid;grid-template-columns:auto auto;justify-content:center;justify-items:start;column-gap:18px;align-items:end;width:100%;padding-bottom:20px;border-bottom:1px solid var(--hair);text-align:left}
.cal-rows .date .d{grid-row:1/3;font-family:var(--serif);font-weight:300;font-size:clamp(84px,7.6vw,118px);line-height:.8;color:var(--ink);letter-spacing:-.03em}
.cal-rows .date .m{font-family:var(--serif);font-style:italic;font-weight:300;font-size:28px;line-height:1;color:var(--gold-deep)}
.cal-rows .date .w{font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text);padding-bottom:6px}
.cal-rows h3{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2vw,30px);line-height:1.1;color:var(--ink)}
.cal-rows h3 a{color:inherit;transition:color var(--t-fast)}
.cal-rows h3 a:hover{color:var(--gold-ink)}
.cal-rows .row>div:not(.date){display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:10px}
.cal-rows .row>.btn{align-self:stretch}
.cal-rows .meta{font-size:15px;line-height:1.6;color:var(--ink-2)}
.cal-rows .row>.btn{margin-top:auto}
.cal-rows .empty{grid-column:1/-1;font-family:var(--serif);font-style:italic;font-size:24px;color:var(--gold-deep)}
@media (max-width:1023px){.cal-rows{grid-template-columns:minmax(0,1fr);max-width:620px;margin-left:auto;margin-right:auto}.cal-rows .row:nth-child(n){margin-top:0}}
@media (max-width:767px){.cal-rows .row{padding:24px 22px}.cal-rows .row>.btn{width:100%}}

/* ---------------------------------------------------------------- /ceremonies offering cards (arched doorway mask) */
/* bucket head: kick, title and her italic line on the axis, closed by a short gold rule */
.cer-bucket-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:clamp(40px,5vw,72px)}
.cer-bucket-head::after{content:"";width:var(--stroke);height:1px;background:var(--gold);margin-top:8px}
.cer-bucket-head>div{display:flex;flex-direction:column;align-items:center}
.cer-bucket-head .h2{margin:0}
.cer-bucket-head>p{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(20px,1.7vw,24px);line-height:1.4;color:var(--gold-text);text-align:center;max-width:26em;text-wrap:balance}
.cer-bucket-head>p a{color:var(--gold-text);border-bottom:1px solid var(--hair-strong);font-style:normal;font-family:var(--sans);font-size:11px;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap}
.cer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,64px) clamp(24px,3vw,48px);align-items:start}
.cer-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1080px;margin-left:auto;margin-right:auto}
/* three across as a centred flex row, so a short last row (cards 4 and 5) sits on the axis instead of hugging the left */
.cer-grid.three{--cg3:clamp(24px,3vw,48px);display:flex;flex-wrap:wrap;justify-content:center;column-gap:var(--cg3)}
.cer-grid.three>.card{flex:0 1 calc((100% - 2 * var(--cg3)) / 3);min-width:0}
.cer-grid.two .card:nth-child(2){margin-top:clamp(40px,6vw,96px)}
.cer-grid.three .card:nth-child(3n+2){margin-top:clamp(36px,5vw,80px)}
.card.cer{display:flex;flex-direction:column;gap:22px;color:inherit}
.card.cer .cer-fig{margin:0;width:100%;aspect-ratio:3/4}
.card.cer .cer-fig img{object-position:50% 50%;transition:transform 2.2s var(--ease)}
.card.cer:hover .cer-fig img{transform:scale(1.04)}
.cer-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.cer-body h3{font-family:var(--serif);font-weight:300;font-size:clamp(30px,2.6vw,40px);line-height:1.04;letter-spacing:-.01em;color:var(--ink)}
.cer-body h3 a{color:inherit}
.cer-body h3 em{font-style:italic;color:var(--gold-deep)}
.cer-body h3 .t2{display:block}
.cer-body>p{font-size:16px;line-height:1.75;color:var(--ink-2);max-width:30em;text-wrap:balance}
.cer-body .first-time{font-family:var(--serif);font-style:italic;font-weight:300;font-size:18px;line-height:1.45;color:var(--gold-text)}
.cer-body .first-time a{color:inherit;border-bottom:1px solid var(--hair-strong)}
.cer-body .cprice{font-family:var(--serif);font-weight:300;font-size:40px;line-height:1;color:var(--gold-deep);letter-spacing:-.01em;margin-top:6px}
.cer-body .facts:empty{display:none}
.cer-body .facts{font-size:15px;color:var(--soft)}
.cer-body .cdate{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--gold-text)}
/* actions: the "Learn More" link and the "Reserve" button (her script rewrites dated cards with these same classes).
   One stack in every card at every width: the button (or the In person / Online pair) fills the card, Learn More sits centred under it */
.cer-body .actions{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:6px;width:100%;max-width:420px}
.cer-body .actions .cta-r{width:100%}
.cer-body .actions .cta-l{align-self:center}
.cta-l{position:relative;display:inline-flex;align-items:center;min-height:44px;font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text);white-space:nowrap}
.cta-l::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--gold);transform-origin:left;transition:transform .5s var(--ease-out)}
.cta-l:hover::after{transform:scaleX(.4)}
.cta-r{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 30px;font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.3em;text-transform:uppercase;white-space:nowrap;background:var(--gold-ink);color:var(--ivory);border:1px solid var(--gold-ink);transition:background var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease),transform var(--t-ui) var(--ease),box-shadow var(--t-ui) var(--ease)}
.cta-r:hover,.cta-r:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--ivory);transform:translateY(-1px);box-shadow:var(--shadow-btn)}
.cer-body .actions>.cta-r:first-child{order:-1}
.actions .cta-r{order:-1}
.rpair{display:flex;flex-direction:column;align-items:center;gap:10px;order:-1}
.rpair-l{font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-text)}
.rpair-b{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.rpair-b .cta-r{padding:0 12px}
/* the featured online card: arch left, copy right */
.card.cer.cer-feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(40px,7vw,120px);align-items:center;max-width:1180px}
.cer-feature .cer-fig{max-width:460px}
.cer-feature .cer-body h3{font-size:clamp(40px,4vw,64px)}
@media (max-width:1023px){
  .cer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cer-grid.three>.card{flex-basis:calc((100% - var(--cg3)) / 2)}
  .cer-grid.three .card:nth-child(n){margin-top:0}
  .cer-grid.three .card:nth-child(2n){margin-top:clamp(36px,5vw,64px)}
  .card.cer.cer-feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px}
}
@media (max-width:767px){
  .cer-grid,.cer-grid.two{grid-template-columns:minmax(0,1fr);row-gap:56px}
  .cer-grid.three{row-gap:56px}
  .cer-grid.three>.card{flex-basis:100%}
  .cer-grid .card:nth-child(n){margin-top:0}
  .cer-grid .card.cer:nth-child(2n) .cer-fig{width:86%;margin-left:auto;margin-right:auto}
  .card.cer.cer-feature{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .cer-feature .cer-fig{max-width:none}
  .cer-body .actions{max-width:none}
}

/* ---------------------------------------------------------------- the retreat portal as one horizontal door */
.door-h{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,6vw,100px);align-items:center}
.door-h .door-media{aspect-ratio:4/3}
.door-h .door-media>img{object-position:62% 40%}
@media (max-width:767px){.door-h{grid-template-columns:minmax(0,1fr);row-gap:28px}.door-h .door-media{aspect-ratio:4/5}}

/* ---------------------------------------------------------------- full-bleed photograph band (sound bath) */
.bleed-band{position:relative;z-index:2;height:clamp(420px,62vw,860px);overflow:hidden;background:var(--linen)}
.bleed-band img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover}
.bleed-band::after{content:"";position:absolute;inset:18px;border:1px solid rgba(252,250,245,.55);pointer-events:none}
@media (max-width:767px){.bleed-band{height:auto;aspect-ratio:4/5}.bleed-band img{top:0;height:100%}.bleed-band::after{inset:12px}}

/* ---------------------------------------------------------------- statement paragraph (online: it works at a distance) */
.distance{max-width:1040px;margin-left:auto;margin-right:auto}
.distance .big-lead{font-family:var(--serif);font-weight:300;font-size:clamp(25px,2.35vw,35px);line-height:1.42;color:var(--ink);text-wrap:pretty}
.distance .big-lead::first-letter{float:left;font-family:var(--serif);font-weight:400;font-size:3.3em;line-height:.82;color:var(--gold-deep);margin:.06em .1em 0 0}
.distance-run{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(32px,6vw,96px);margin-top:clamp(56px,7vw,96px);padding-top:32px;border-top:1px solid var(--hair)}
.distance-run h3{font-family:var(--serif);font-weight:300;font-size:clamp(30px,3vw,44px);line-height:1;color:var(--ink);text-align:center}
@media (max-width:767px){.distance .big-lead{font-size:23px;line-height:1.5}.distance-run{grid-template-columns:minmax(0,1fr);row-gap:18px}}

/* ---------------------------------------------------------------- hairline "Also on Radiant Flo" link row */
.also-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--hair)}
.also-row a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px;padding:14px 20px;border-bottom:1px solid var(--hair);border-right:1px solid var(--hair);font-family:var(--serif);font-weight:300;font-size:clamp(20px,1.6vw,24px);line-height:1.2;color:var(--ink);transition:color var(--t-fast),background var(--t-fast)}
.also-row a:first-child{padding-left:0}
.also-row a:last-child{border-right:0}
.also-row a::after{content:"\2192";flex:none;font-family:var(--sans);font-size:14px;color:var(--gold);transition:transform .45s var(--ease-out)}
.also-row a:hover{color:var(--gold-ink)}
.also-row a:hover::after{transform:translateX(4px)}
@media (max-width:1023px){.also-row{grid-template-columns:repeat(2,minmax(0,1fr))}.also-row a{padding-left:0}.also-row a:nth-child(2n){border-right:0;padding-left:20px}}
@media (max-width:767px){.also-row{grid-template-columns:minmax(0,1fr)}.also-row a,.also-row a:nth-child(2n){min-height:58px;padding:12px 0;border-right:0}}
@media (max-width:767px){.svc-hero .hero-meta{flex-direction:column;gap:4px}.svc-hero .hero-meta span+span::before{display:none}}

/* ---------------------------------------------------------------- article cards: a narrowed .also row stays on the axis */
.also{margin-left:auto;margin-right:auto}
/* the "Is this ... for you?" note under the two lists: small print on the axis of its column */
.svc-note{text-align:center;text-wrap:balance;margin-left:auto;margin-right:auto}

/* ---------------------------------------------------------------- offer cards: small helpers */
.offer-card .oc-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 28px;margin-top:4px}
.offer-card p a{color:var(--gold-text);border-bottom:1px solid var(--hair-strong)}
.offers.two.svc-ways{max-width:1040px;margin:0 auto}
.offers.svc-three>:nth-child(2){margin-top:clamp(24px,3vw,48px)}
.offers.svc-three>:nth-child(3){margin-top:clamp(48px,6vw,96px)}
@media (max-width:1023px){.offers.svc-three{grid-template-columns:minmax(0,1fr);max-width:620px}.offers.svc-three>:nth-child(n){margin-top:0}}
.note-box{max-width:820px;margin:clamp(56px,7vw,96px) auto 0;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(28px,4vw,56px);padding:32px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.note-box h3{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(26px,2.4vw,34px);line-height:1.1;color:var(--gold-deep);text-align:center;text-wrap:balance}
.note-box p{font-size:16px;line-height:1.8;color:var(--ink-2)}
.also-line{margin-top:36px;text-align:center;text-wrap:balance;font-family:var(--serif);font-style:italic;font-weight:300;font-size:20px;color:var(--ink-2)}
.also-line a{color:var(--gold-text);border-bottom:1px solid var(--hair-strong)}
@media (max-width:767px){.note-box{grid-template-columns:minmax(0,1fr);row-gap:14px}}

/* quote band with the rating row under the cite */
.quote .rating{justify-content:center;margin-top:-6px}

/* ---------------------------------------------------------------- tablet / phone rhythm */
@media (max-width:1023px){
  .svc-split{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .svc-split>.sec-head{position:static;margin-bottom:var(--head-gap)}
}
@media (max-width:767px){
  .svc-pull{font-size:28px}
  .svc-mid{gap:22px}
  .svc-mid .btn{width:100%}
}

/* ---------------------------------------------------------------- /ceremonies bleed hero: her discovery-call line under the CTA */
.hero--bleed .hero-call{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center;gap:0 14px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:19px;line-height:1.4;color:rgba(252,250,245,.88)}
.hero--bleed .hero-copy .cta-row{margin-top:4px}
@media (max-width:767px){.hero--bleed .hero-copy .cta-row .btn{width:100%}.hero--bleed .hero-call{font-size:17px}.hero--bleed .hero-line .d-br{display:none}}
#upcoming{scroll-margin-top:calc(var(--bar) + 68px)}

/* ---------------------------------------------------------------- review pass: rhythm, crops, AA contrast, tap targets */
/* staggered cards keep their natural height (no blank space at the bottom of the first card) */
.cal-rows,.offers.svc-three{align-items:start}
/* Her Sacred Rebirth cards are landscape group photos: rectangles with the inset hairline, never arched */
.card.cer .cer-fig.land{aspect-ratio:3/2}
.card.cer .cer-fig.land::after{inset:14px;border-color:var(--hair-ivory)}
.cer-grid.two.land-row{max-width:none;align-items:start}
.cer-grid.two.land-row .card:nth-child(2){margin-top:clamp(56px,8vw,128px)}
/* retreat portal title is her h2 */
.door-h h2.door-title{margin:0}
/* small gold text (under 24px) uses --gold-text, per the token rules */
.cer-bucket-head>p,.cer-body .first-time,.cer-body .cdate{color:var(--gold-text)}
.cal-list .date .m{font-size:24px}
/* tap targets: title links and the small HSR link get a 44px hit area without moving the layout */
.cal-rows h3 a,.cer-body h3 a,.cer-bucket-head>p a{position:relative}
.cal-rows h3 a::before,.cer-body h3 a::before,.cer-bucket-head>p a::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
/* phone: the ceremonies hero CTA is full width (the cta-row itself must stretch, it is a flex item of the copy column) */
@media (max-width:767px){.hero--bleed .hero-copy .cta-row{align-self:stretch}}


/* ---------------------------------------------------------------- review round 1 (alignment) */
/* next-date panel with three facts (blue lotus): two short facts share a line, the long one sits under them, every line on the axis */
.svc-next .meta.flow{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 28px;text-align:center;text-wrap:balance}
.svc-next .meta.flow .wide{flex-basis:100%;padding-left:0}
.svc-next .meta.flow .wide::before{position:static;margin-right:8px}
/* phone: a lead of four or more lines that opens a body passage reads left with it (the reading rule) */
@media (max-width:767px){
  .rd-m{text-align:left;align-self:center;width:100%;max-width:var(--measure);margin-left:auto;margin-right:auto}
  /* hero eyebrows stay on one line at 390 with their two rules (new moon, sound bath were wrapping with a lone rule per line) */
  .svc-hero .eyebrow{letter-spacing:.2em}
  .svc-hero .eyebrow::after{margin-left:calc(12px - .2em)}
  /* kind-words swipe row: the first card sits on the page axis, the next one peeks in on the right */
  .ig-wall{padding:0 9vw 8px;scroll-padding:0 9vw}
  .ig-card{flex:0 0 82vw;scroll-snap-align:center}
}
/* ceremonies bleed hero, side copy (>=1024): Anya stands near the middle of the 16:9 film, so where the frame is narrower than 16:9
   (1024x768, 1180x820, 1280x800, portrait iPad Pro) the crop slides left and she stays clear of the copy block, her face never under type */
@media (min-width:1024px){.hero--bleed.copy-left .hero-video{object-position:15% 40%}}
@media (min-width:1024px) and (min-aspect-ratio:1/1){.hero--bleed.copy-left .hero-video{object-position:0 40%}}
/* tablet (768-1023): the side-by-side pieces stack on the one axis, like the rest of the tablet layout (head or image above, the copy
   centred beneath; running text keeps its left edge in the reading column) */
@media (min-width:768px) and (max-width:1023px){
  .door-h{grid-template-columns:minmax(0,1fr);row-gap:32px;max-width:620px;margin-left:auto;margin-right:auto}
  .door-h .door-media{aspect-ratio:4/3}
  .card.cer.cer-feature{grid-template-columns:minmax(0,1fr);row-gap:32px;max-width:620px;margin-left:auto;margin-right:auto}
  .cer-feature .cer-fig{max-width:400px;margin:0 auto}
  .distance-run{grid-template-columns:minmax(0,1fr);row-gap:18px}
  .distance-run>p,.note-box>p{max-width:var(--measure);margin-left:auto;margin-right:auto}
  .note-box{grid-template-columns:minmax(0,1fr);row-gap:14px;max-width:var(--measure)}
}
@media (max-width:767px){.distance-run h3{margin-bottom:2px}}
/* phone: the stacked hero facts lose their separator dot, so they lose its 23px indent too (the second line sat off the axis) */
@media (max-width:767px){.svc-hero .hero-meta>span{padding-left:0}}
/* small phones (360): a touch less tracking keeps "Carlsbad · North County San Diego" on one line between its rules */
@media (max-width:374px){.svc-hero .eyebrow{letter-spacing:.16em}.svc-hero .eyebrow::after{margin-left:calc(12px - .16em)}}

/* ---------------------------------------------------------------- review round 2 (alignment) */
/* sound bath quote band: the rating line is one centred line, its link underline sits on the words (the 44px tap box used to push the
   border 20px below the text, so the stroke floated off to the right under nothing); on phone it wraps balanced on the axis */
.quote .rating a{border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(110,90,48,.4)}
@media (max-width:767px){
  .quote .rating{display:block;text-align:center;line-height:1.9;white-space:nowrap}
  .quote .rating a{display:inline;min-height:0;padding:12px 0}
}
@media (max-width:374px){.quote .rating{font-size:11px;letter-spacing:.1em}.quote .rating .stars{font-size:12px;letter-spacing:.12em}}
/* blue lotus next-session panel on phone: the facts lose their list dashes and read as two centred lines
   ("Carlsbad, California · $144" / the long fact), so a wrapped long fact never leaves a dash hanging off its first line */
@media (max-width:767px){
  .svc-next .meta.flow{gap:2px 0}
  .svc-next .meta.flow span{padding-left:0}
  .svc-next .meta.flow span::before{content:none}
  .svc-next .meta.flow span:nth-child(2)::before{content:"\00B7";position:static;margin:0 10px;color:var(--gold)}
}