/* ============================================================
   HypnoFertility, Sacred Editorial design layer
   Authoritative child-theme stylesheet. Repo source of truth;
   deployed to wp-content/themes/astra-child/sacred-editorial.css
   and enqueued after style.css.

   Carries: design tokens, fonts, button treatments, and the
   reusable primitive + section treatments the Spectra blocks
   cannot express on their own. Layout/spacing/columns are done
   in the block settings; this file carries color, gradient,
   type, motif, and elevation.

   Hook classes are applied via each block's "Additional CSS
   class(es)" field. Convention: se-<section> on the section
   container; se-<primitive> on the element.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Mulish:wght@300;400;500;600;700&display=swap');

:root{
  --se-ink:#2A0E3D; --se-plum:#3A0E52; --se-purple:#58157F; --se-purple-bright:#9736B7;
  --se-magenta:#D74495; --se-magenta-bright:#E75EB1;
  --se-blush:#F9C4CE; --se-blush-tint:#FBEAF0;
  --se-gold:#C9A24B; --se-gold-bright:#F6CA6F;
  --se-ivory:#FBF7F1; --se-cream:#F4ECDE; --se-line:#ECE1CF;
  --se-muted:#7a6a86; --se-sub:#5b4a67;
  --se-shadow:0 14px 40px rgba(58,14,82,.07);
  --se-shadow-sm:0 8px 24px rgba(58,14,82,.06);
  /* Content measure for full-bleed bands. 1240px = Astra's content width,
     so alignfull sections align with ordinary Astra content. */
  --se-measure:1240px; --se-gutter:24px;
}

/* Bridge Sacred Editorial tokens onto Astra global-color vars.
   Frontend-authoritative: this loads after Astra so any Astra/Spectra
   element that references --ast-global-color-N gets brand color. */
:root{
  --ast-global-color-0:#58157F; --ast-global-color-1:#D74495; --ast-global-color-2:#3A0E52;
  --ast-global-color-3:#2A0E3D; --ast-global-color-4:#FBF7F1; --ast-global-color-5:#F4ECDE;
  --ast-global-color-6:#3A0E52; --ast-global-color-7:#FBEAF0; --ast-global-color-8:#C9A24B;
}

/* ---------- global type + canvas ---------- */
body{font-family:'Mulish',sans-serif;color:var(--se-ink);background:var(--se-ivory);line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6,.se-serif{font-family:'Cormorant Garamond',serif;font-weight:500;line-height:1.08;letter-spacing:-.01em;color:var(--se-plum)}
h1{font-weight:500}
em,.se-italic{font-style:italic}
/* magenta accent word inside a headline: wrap in <em> and add class, or use .se-accent */
h1 em,h2 em,h3 em,.se-accent{color:var(--se-magenta);font-style:italic}

/* ---------- primitives ---------- */
.se-eyebrow{font-family:'Mulish',sans-serif;font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--se-gold);line-height:1.4}
.se-eyebrow--magenta{color:var(--se-magenta)}
.se-rule{width:60px;height:2px;background:linear-gradient(90deg,var(--se-gold),var(--se-gold-bright));border-radius:2px;border:0;margin:0}
.se-rule--center{margin-left:auto;margin-right:auto}
/* .se-rule is authored as a core/separator <hr class="se-rule"> so the Gutenberg editor stays clean:
   an empty core/group renders the "Group blocks together / Select a layout" variation picker. These
   override WP core separator defaults (notably width:100px at 0,3,0 in separator/theme.css) so the
   gold hairline matches the old div in every context (standalone divider + inline tick in .se-kicker). */
hr.wp-block-separator.se-rule{border:0;height:2px;margin:0;opacity:1;border-radius:2px;background:linear-gradient(90deg,var(--se-gold),var(--se-gold-bright))}
/* Astra emits `[data-ast-blocks-layout] .wp-block-separator:not(.is-style-dots){height:0}`
   from an inline <style> at 0-3-0, which beats the `hr.wp-block-separator.se-rule`
   rule above at 0-2-1. The gradient and the 60px width both applied, so the
   hairline was in the box model at the right size and painted nothing: the
   signature gold rule was invisible in all four kickers and under the hero.
   The width already had to escalate past the same rule; height needs it too. */
hr.wp-block-separator.se-rule:not(.is-style-wide):not(.is-style-dots){width:60px;height:2px}
.se-hero-text hr.wp-block-separator.se-rule{margin:22px 0}
.se-kicker{display:flex;align-items:center;gap:14px}
.se-lead{font-size:19px;color:var(--se-sub);line-height:1.74}
.se-muted{color:var(--se-muted)}

/* soft card */
.se-card{background:var(--se-ivory);border:1px solid var(--se-line);border-radius:10px;
  box-shadow:var(--se-shadow-sm);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.se-card:hover{transform:translateY(-4px);box-shadow:var(--se-shadow)}
.se-card--feat{background:radial-gradient(80% 70% at 90% 8%,rgba(215,68,149,.08),transparent 60%),var(--se-ivory);border-color:#e6d7bf}

/* credmark pills */
.se-credmarks{display:flex;flex-wrap:wrap;gap:10px}
.se-credmarks > *{font-family:'Mulish',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--se-purple);
  border:1px solid var(--se-line);border-radius:2px;padding:8px 14px;background:#fff;list-style:none}

/* signature */
.se-sig{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:30px;color:var(--se-magenta)}

/* stat trio (on dark sacred band) */
.se-stat .se-num,.se-num{font-family:'Cormorant Garamond',serif;font-size:clamp(44px,6vw,66px);line-height:1;color:var(--se-gold-bright);font-weight:500}
.se-stat .se-lbl,.se-lbl{font-family:'Mulish',sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#d9c6e6;margin-top:8px;font-weight:600}

/* quote glyph */
.se-quote{position:relative}
.se-quote::before{content:"\201C";font-family:'Cormorant Garamond',serif;font-size:76px;line-height:.6;color:var(--se-blush);display:block;height:34px}

/* pillar numerals (roman) */
.se-numeral{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;color:var(--se-magenta);display:block;margin-bottom:8px}

/* ensO marks / watermarks (raster PNG set as background) */
.se-enso-mark{background-repeat:no-repeat;background-position:center;background-size:contain}
.se-enso-watermark{position:relative}
.se-enso-watermark::after{content:"";position:absolute;right:-70px;top:50%;transform:translateY(-50%);
  width:560px;height:560px;opacity:.16;pointer-events:none;background-repeat:no-repeat;background-position:center;background-size:contain}

/* ---------- buttons ---------- */
/* Primary = gold gradient, dark-plum label, crisp 2px radius, uppercase tracked */
.wp-block-button.is-style-fill .wp-block-button__link,
.se-btn-gold .wp-block-button__link,
.ast-button.se-btn-gold,
a.se-btn-gold{
  background:linear-gradient(135deg,var(--se-gold-bright),var(--se-gold))!important;
  color:#4a3410!important;border:0!important;border-radius:2px!important;
  font-family:'Mulish',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 6px 20px rgba(201,162,75,.28);transition:transform .35s,box-shadow .35s}
.se-btn-gold .wp-block-button__link:hover,a.se-btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(201,162,75,.36)}
/* Secondary = ghost purple outline */
.se-btn-ghost .wp-block-button__link,a.se-btn-ghost{
  background:transparent!important;border:1.5px solid var(--se-purple)!important;color:var(--se-purple)!important;
  border-radius:2px!important;font-family:'Mulish',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;transition:background .35s,color .35s}
.se-btn-ghost .wp-block-button__link:hover,a.se-btn-ghost:hover{background:var(--se-purple)!important;color:#fff!important}
/* Light ghost on dark bands */
.se-btn-light .wp-block-button__link,a.se-btn-light{
  background:transparent!important;border:1.5px solid rgba(246,202,111,.6)!important;color:var(--se-gold-bright)!important;border-radius:2px!important;
  font-family:'Mulish',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase}
.se-btn-light .wp-block-button__link:hover,a.se-btn-light:hover{background:var(--se-gold-bright)!important;color:#4a3410!important}

/* ---------- section band backgrounds ---------- */
.se-empathy{background:var(--se-blush-tint)!important}
.se-cream{background:var(--se-cream)!important}
.se-blush{background:var(--se-blush-tint)!important}

/* SACRED band, deep-plum gradient, ivory text, gold-bright accents */
.se-sacred{position:relative;overflow:hidden;
  background:
   radial-gradient(70% 90% at 82% 18%,rgba(215,68,149,.30),transparent 58%),
   radial-gradient(60% 80% at 10% 92%,rgba(246,202,111,.22),transparent 55%),
   radial-gradient(90% 120% at 55% 0%,rgba(151,54,183,.46),transparent 60%),
   linear-gradient(160deg,#2c0a41,var(--se-plum) 46%,#4a1370)!important}
.se-sacred, .se-sacred :is(h1,h2,h3,h4,p,span,li,strong,em,a,div){color:var(--se-ivory)}
.se-sacred .se-eyebrow{color:var(--se-gold-bright)!important}
.se-sacred .se-lead,.se-sacred p{color:#e9d9f2}
.se-sacred h1 em,.se-sacred h2 em,.se-sacred .se-accent{color:var(--se-gold-bright)}
.se-sacred .se-num{color:var(--se-gold-bright)}

/* metallic gradient panel (hero / meet-lynsi image placeholder until a real photo lands) */
.se-metal-panel{position:relative;overflow:hidden;border-radius:14px;min-height:420px;
  background:
   radial-gradient(80% 70% at 30% 20%,rgba(231,94,177,.40),transparent 60%),
   radial-gradient(70% 80% at 85% 90%,rgba(246,202,111,.34),transparent 55%),
   linear-gradient(150deg,var(--se-purple),var(--se-plum))}
.se-hero-panel{
  background:
   radial-gradient(90% 80% at 78% 18%,rgba(231,94,177,.5),transparent 60%),
   radial-gradient(80% 90% at 18% 92%,rgba(246,202,111,.42),transparent 55%),
   linear-gradient(150deg,var(--se-plum) 0%,var(--se-purple) 46%,var(--se-magenta) 100%)}

/* (hero-text background now handled in the HERO REDESIGN block below) */

/* journey-router row hover + arrow */
.se-path{transition:background .3s}
.se-path:hover{background:linear-gradient(90deg,rgba(215,68,149,.04),transparent 60%)}
.se-path-go{font-family:'Mulish',sans-serif;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--se-magenta);text-transform:uppercase;display:inline-flex;gap:8px;align-items:center;transition:gap .3s}
.se-path:hover .se-path-go{gap:14px}

/* curved wave divider helper (place an empty block with this class between bands) */
.se-wave{display:block;width:100%;height:44px;line-height:0}

/* pillar top gold hairline */
.se-pillar{padding-top:26px;border-top:2px solid;border-image:linear-gradient(90deg,var(--se-gold),var(--se-gold-bright)) 1}

/* certification badge */
.se-cert-badge{width:230px;height:230px;border-radius:50%;position:relative;display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle at 50% 34%,rgba(246,202,111,.22),transparent 62%),var(--se-ivory);border:2px solid var(--se-gold)}
.se-cert-badge::before{content:"";position:absolute;inset:12px;border-radius:50%;border:1px solid rgba(201,162,75,.5)}

/* ---------- motion ---------- */
@keyframes se-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.se-rise{animation:se-rise 1.2s cubic-bezier(.22,1,.36,1) both}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* ---------- links (nav/body accents) ---------- */
.se-link-magenta{color:var(--se-magenta);font-weight:600}
.se-link-magenta:hover{color:var(--se-magenta-bright)}

/* ============================================================
   Layout helpers, applied to core/group blocks whose inner
   layout is set to "default" (flow), so these grids take over.
   ============================================================ */
.pad{padding:104px 0}
.pad-sm{padding:76px 0}
@media(max-width:768px){.pad{padding:70px 0}.pad-sm{padding:52px 0}}

/* ============================================================
   HERO, text-forward editorial masthead (2026-07-14 redesign)
   Default = one full-bleed centered band: NO purple panel, a
   refined gold ensO accent above the eyebrow, a faint ensO
   watermark behind. When a real photo block (.se-hero-photo) is
   placed, the layout auto-restores the 2-column split.
   ============================================================ */
.se-hero{position:relative;overflow:hidden;display:block;
  background:
   radial-gradient(120% 92% at 50% -12%,rgba(151,54,183,.10),transparent 60%),
   radial-gradient(80% 70% at 90% 118%,rgba(215,68,149,.05),transparent 55%),
   var(--se-ivory)}
/* faint ensO watermark, low + slightly offset so it reads as texture.
   SCOPED to the no-photo hero. Both ensO pseudo-elements belong to the
   centred, text-only masthead used on the other 14 pages; on the photo
   hero they render as an orphaned gold ring floating above the eyebrow
   plus a stray blob. This was previously handled by a `display:none`
   override further down, which measurably did NOT win despite being both
   later in the file and more specific (cause never identified). Scoping
   the BASE rule so it cannot match is robust either way: there is no
   override left to lose. */
.se-hero:not(:has(.se-hero-photo))::before{content:"";position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);
  width:min(600px,78vw);height:min(600px,78vw);opacity:.05;pointer-events:none;z-index:0;
  background:url('/wp-content/uploads/hf-enso-gold-ring.png') center/contain no-repeat}
.se-hero-text{position:relative;z-index:1;max-width:880px;margin:0 auto;text-align:center;background:transparent;
  padding:66px 24px 78px;display:flex;flex-direction:column;align-items:center}
/* small refined ensO accent above the eyebrow (no-photo hero only) */
.se-hero:not(:has(.se-hero-photo)) .se-hero-text::before{content:"";display:block;width:62px;height:62px;margin:0 auto 26px;opacity:.92;
  background:url('/wp-content/uploads/hf-enso-gold-ring.png') center/contain no-repeat}
.se-hero-text .se-h1{margin-top:0}
.se-hero-text .se-hero-sub{max-width:56ch;margin:24px auto 32px}
.se-hero-text .se-btn-row{justify-content:center}
.se-hero-text .se-trust{justify-content:center;margin-left:auto;margin-right:auto}
.se-hero > .se-hero-panel{display:none}
@media(max-width:768px){
  .se-hero-text{padding:46px 22px 54px}
  .se-hero:not(:has(.se-hero-photo)) .se-hero-text::before{width:52px;height:52px;margin-bottom:20px}
}

/* PHOTO variant.
   The SPLIT ITSELF IS NO LONGER CSS. The hero is a Spectra container set
   to a horizontal flex row at a fixed 680px height, with the two column
   containers at 60% / 40%, all via the block inspector. Spectra emits a
   per-block rule at 0-1-1 for that, and the `display:grid` that used to
   live here was 0-2-0, so it silently beat the block settings and left
   the geometry un-editable. It is deliberately gone.

   What stays here is only what block settings cannot express: text
   alignment inside the column, and the fluid gutter (Spectra has
   maxWidth but no "full-bleed background + centred content column", so
   a calc() gutter has no inspector equivalent). */
.se-hero:has(.se-hero-photo) .se-hero-text{max-width:none;margin:0;text-align:left;align-items:flex-start;
  justify-content:center}
.se-hero:has(.se-hero-photo) .se-hero-text .se-hero-sub{margin:22px 0 30px}
.se-hero:has(.se-hero-photo) .se-hero-text .se-btn-row{justify-content:flex-start}
.se-hero:has(.se-hero-photo) .se-hero-text .se-trust{justify-content:flex-start;margin-left:0;margin-right:0}
.se-hero-cap{position:absolute;left:0;right:0;bottom:30px;text-align:center;color:#fff;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;opacity:.92}

/* stat strip (under hero) */
.se-statstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--se-line)}
.se-statstrip .se-stat{padding:26px 0}
.se-statstrip .se-num{color:var(--se-gold);font-size:clamp(36px,4.2vw,50px)}
.se-statstrip .se-lbl{color:var(--se-muted)}
@media(max-width:720px){.se-statstrip{grid-template-columns:1fr 1fr;gap:14px}}

/* journey router rows */
.se-paths-list{border-top:1px solid var(--se-line)}
.se-path{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:26px;padding:28px 6px;border-bottom:1px solid var(--se-line)}
.se-path .se-enso-mark{width:48px;height:48px;opacity:.92}
@media(max-width:720px){.se-path{grid-template-columns:40px 1fr;gap:16px}.se-path .se-path-go{grid-column:2;margin-top:4px}}

/* method pillars */
.se-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
@media(max-width:860px){.se-pillars{grid-template-columns:1fr;gap:28px}}

/* meet-lynsi split */
.se-lynsi-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
@media(max-width:900px){.se-lynsi-grid{grid-template-columns:1fr;gap:32px}}

/* sacred stat trio */
.se-stats{display:grid;grid-template-columns:repeat(3,auto);gap:48px;justify-content:start;margin-top:36px}
@media(max-width:720px){.se-stats{grid-template-columns:1fr 1fr;gap:30px 40px}}

/* service grid */
.se-svc-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:22px}
.se-svc-grid .se-card{padding:32px;display:flex;flex-direction:column}
@media(max-width:980px){.se-svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.se-svc-grid{grid-template-columns:1fr}}

/* stories grid */
.se-stories-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px}
.se-stories-grid .se-card{padding:36px}
@media(max-width:860px){.se-stories-grid{grid-template-columns:1fr}}

/* certification */
.se-cert-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
@media(max-width:820px){.se-cert-grid{grid-template-columns:1fr;gap:32px}}

/* generic centered narrow content */
.se-narrow{max-width:920px;margin-left:auto;margin-right:auto}

/* ---------- text + heading utilities (applied via className) ---------- */
.se-h1{font-size:clamp(44px,5vw,66px);color:var(--se-plum)}
.se-h2{font-size:clamp(30px,3.6vw,44px);color:var(--se-plum)}
.se-h2--big{font-size:clamp(32px,4.2vw,52px)}
.se-h3{font-size:26px;color:var(--se-purple)}
.se-hero-sub{font-size:18.5px;color:var(--se-sub);max-width:44ch;margin:22px 0 30px;line-height:1.72}
.se-trust{display:flex;align-items:center;gap:10px;margin-top:26px;font-size:13px;color:var(--se-muted);max-width:44ch}
.se-trust b{color:var(--se-purple);font-weight:700}
.se-stars{color:var(--se-gold);letter-spacing:.1em;font-size:13px}
.se-head{max-width:660px}
.se-head--center{margin-left:auto;margin-right:auto;text-align:center}
.se-mt-s{margin-top:16px}.se-mt-m{margin-top:24px}.se-mt-l{margin-top:40px}
.se-mb-s{margin-bottom:12px}.se-mb-m{margin-bottom:20px}.se-mb-l{margin-bottom:40px}
.se-maxw-60{max-width:60ch}
.se-btn-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.se-tagline{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:19px;color:var(--se-magenta);margin-bottom:12px}
.se-prog{margin:18px 0 4px;padding-top:16px;border-top:1px solid var(--se-line);font-size:14px;color:var(--se-muted)}
.se-more{margin-top:16px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--se-magenta);display:inline-block}
.se-stories-grid blockquote{font-family:'Cormorant Garamond',serif;font-size:26px;line-height:1.32;color:var(--se-ink);margin:0 0 20px;border:0;padding:0}
.se-stories-grid .se-feat blockquote{font-size:30px}
.se-cite{font-style:normal;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--se-purple);display:block}
.se-cite span{display:block;color:var(--se-muted);font-weight:500;letter-spacing:.02em;text-transform:none;margin-top:3px}
.se-cert-badge b{font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--se-purple);display:block;line-height:1.1;padding:0 26px}
.se-cert-badge small{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--se-gold);font-weight:700;margin-top:8px;display:block}
.se-img-round{border-radius:14px;overflow:hidden}
.se-finalcta{text-align:center}
.se-finalcta .se-btn-row{justify-content:center}
.se-finalcta .se-note{margin-top:20px;font-size:13.5px;color:#c9b4d9}
.se-enso-sm{width:60px;height:60px;margin:0 auto 20px;display:block}

/* real photo filling the hero right panel (native core/image) */
.se-hero-photo{overflow:hidden;min-height:520px;display:flex}
.se-hero-photo figure{margin:0;width:100%;height:100%;min-height:520px;line-height:0}
/* object-position keeps Lynsi's face in frame when cover-crop tightens on narrow viewports.
   Lynsi, 2026-07-14: "On my phone I can't actually see the whole picture in the first one."
   2026-07-27, retuned 22% -> 100% (Dallin). Measured: source is 648x971 into a 565x680 box,
   so cover gives 565x847 and there is ZERO horizontal crop plus only 167px of vertical
   latitude. object-position can slide the frame inside that 167px and nothing else. At 100%
   her face lands near the upper third and the fence anchors the base; making her larger in
   frame would need a re-cropped source asset, not CSS. */
.se-hero-photo img{width:100%!important;height:100%!important;min-height:520px;object-fit:cover!important;object-position:center 100%;display:block}
/* hero option picker labels */
.se-optband{background:var(--se-cream)}
.se-optband .se-opt-num{font-family:'Mulish',sans-serif;font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--se-gold);margin:0}
.se-optband .se-opt-desc{font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--se-purple);margin:4px 0 0}

/* ---------- flagship polish ---------- */
.se-enso-watermark::after{background-image:url('/wp-content/uploads/hf-enso-gold-ring.png')}
.se-hero-text .se-rule{margin:22px 0}
.se-cite{font-family:'Mulish',sans-serif}
.se-stories-col{display:grid;gap:24px;align-content:start}
.se-card--feat .se-h3{font-size:32px}
.se-svc-grid .se-card--feat{grid-row:span 2}
.se-enso-float img,.se-enso-mark img,.se-enso-sm img{width:100%;height:auto;display:block}
.se-img-round img{border-radius:14px}
.se-svc-grid .se-card .se-enso-mark{width:40px;height:40px;margin-bottom:14px}
.se-cert-badge{justify-self:center}
/* keep alignfull sections edge to edge even if theme content is boxed */
.se-hero,.se-statstrip,.se-empathy,.se-paths,.se-cream,.se-sacred,.se-lynsi,.se-svc,.se-stories,.se-cert{width:100%}

/* ============================================================
   Site chrome, style the existing Astra header + footer to
   Sacred Editorial. (Menu reorder + 4-col footer content is a
   later pass; this makes the current chrome cohesive.)
   ============================================================ */
.site-header,.ast-primary-header-bar,.main-header-bar{background:rgba(251,247,241,.92)!important;border-bottom:1px solid var(--se-line)!important}
.main-header-bar-wrap .main-header-bar{border-bottom:0!important}
.site-title,.site-title a,.ast-site-title-wrap .site-title{font-family:'Cormorant Garamond',serif!important;font-weight:500!important;color:var(--se-purple)!important;font-size:26px!important;letter-spacing:.01em}
.ast-builder-menu .menu-link,.main-header-menu .menu-link,.ast-header-navigation-arrow-enabled .menu-link{font-family:'Mulish',sans-serif!important;font-weight:600;font-size:14px;color:var(--se-ink)}
.ast-builder-menu .menu-item:hover>.menu-link,.main-header-menu .menu-item:hover>.menu-link{color:var(--se-magenta)!important}
.ast-builder-menu .sub-menu{border-top:2px solid var(--se-gold)!important}
/* header CTA button component, if present */
.ast-header-button-1 .ast-custom-button,.site-header .ast-custom-button-link{background:linear-gradient(135deg,var(--se-gold-bright),var(--se-gold))!important;color:#4a3410!important;border-radius:2px!important;font-weight:600;text-transform:uppercase;letter-spacing:.06em}

/* footer -> ink band */
.site-footer,.footer-adv,.ast-footer-overlay,.footer-adv-overlay{background:var(--se-ink)!important;color:#cbb8d8!important}
.site-footer a,.footer-adv a{color:#cbb8d8!important}
.site-footer a:hover,.footer-adv a:hover{color:#fff!important}
.site-footer .widget-title,.footer-adv .widget-title,.site-footer h2,.site-footer h3,.site-footer h4{color:var(--se-gold-bright)!important;font-family:'Mulish',sans-serif!important;font-size:12px!important;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.ast-small-footer,.site-info,.site-primary-footer-wrap{background:var(--se-ink)!important;color:#8f7aa6!important;border-top:1px solid rgba(255,255,255,.1)}
.ast-small-footer a,.site-info a{color:#8f7aa6!important}

/* ============================================================
   WordPress core layout overrides (2026-07-26)
   Three core behaviours fight the grids above. All seven of the
   logged "spacing defects" trace here; not one of them was a
   wrong spacing value. Measured on the rendered page at 1440.
   ============================================================ */

/* 1. Every group block carries `is-layout-flow`, which applies
      margin-block-start:24px to each child except the first.
      Harmless in a flow column. On the grid and flex containers
      below it shoves items 2..n down exactly 24px while item 1
      stays put, which is what misaligns the three pillar
      hairlines, opens the hole in the service grid, staggers the
      testimonial columns and the stat strip, offsets the cert
      grid, and breaks the credmark pill rows. `gap` owns spacing
      on these containers, so the flow margin must not. */
:is(.se-statstrip,.se-pillars,.se-svc-grid,.se-stories-grid,.se-stories-col,
    .se-lynsi-grid,.se-cert-grid,.se-stats,.se-credmarks,.se-btn-row,
    .se-kicker,.se-paths-list,.se-path) > *{margin-block-start:0}

/* 2. Core centres separators with auto side margins via
      `.wp-block-separator:not(.is-style-wide):not(.is-style-dots)`
      (0-3-0), which outranks the `margin:0` in the 0-2-1 rule near
      the top of this file. Inside `.se-kicker` that centres the
      gold hairline and throws the eyebrow to the right edge.
      Match core's specificity to win it back, scoped to the
      kicker so standalone hairlines stay centred everywhere else. */
.se-kicker hr.wp-block-separator.se-rule:not(.is-style-wide):not(.is-style-dots){margin-left:0;margin-right:0}

/* 3. `.se-card` inside the service and stories grids is a flex
      column, so margins do NOT collapse: each child's own bottom
      margin adds to the 24px flow margin, giving 54/50/40/46px
      gaps inside a 32px-padded card. Hand spacing to `gap` and
      zero both margins so the interior reads as one tight group
      against the 104px between sections. */
.se-svc-grid .se-card,.se-stories-grid .se-card{gap:18px}
.se-svc-grid .se-card > *,.se-stories-grid .se-card > *{margin-block-start:0;margin-block-end:0}

/* 4. THE MEASURE. `.pad`/`.pad-sm` set `padding:104px 0`, so every band
      had zero horizontal padding and no content width: headings and body
      copy rendered at x=0, hard against the viewport edge, on all 12
      homepage sections but the hero. The bands themselves are meant to
      be full-bleed (the plum and cream backgrounds run edge to edge), so
      the gutter belongs on the band and the colour stays where it is.
      1240px matches Astra's own content width, so full-bleed sections
      line up with ordinary Astra content instead of drifting off it. */
.pad,.pad-sm{padding-left:max(var(--se-gutter),calc((100% - var(--se-measure)) / 2));
             padding-right:max(var(--se-gutter),calc((100% - var(--se-measure)) / 2))}

/* Spectra's container is `display:flex;flex-direction:column;align-items:
   flex-start` and resets child margins, so the `margin:0 auto` on the
   centred wrappers resolved to 0 and they sat left. Centre them on the
   flex cross axis instead, which Spectra's reset cannot undo. */
.se-narrow,.se-faq-list,.se-head--center{align-self:center;width:100%}

/* Same `align-items:flex-start` also shrinks block-level children to
   their content instead of the measure, so the bordered journey list
   stopped ~220px short of the right edge and Lynsi's portrait sat
   narrower than its own grid column. Make both fill what they are in. */
.se-paths-list{align-self:stretch}
.se-lynsi-grid > .wp-block-image,.se-lynsi-grid > .wp-block-image img{width:100%}

/* 7. The mobile band step-down has been dead since the Path A migration.
      Global Styles emits `[class*="wp-block"].gs-band-pad` at 0-2-0 from
      an inline <style>, which outranks the `.pad` (0-1-0) inside the
      768px media query further up this file, so phones were rendering
      the full desktop 104px band top AND bottom. It went unnoticed
      because both rules agree at 104px on desktop. Restated here at
      matching specificity; sacred-editorial.css loads after the inline
      Global Styles block, so document order settles the tie. `.pad` is
      kept in the selector for the pages not yet on Spectra containers. */
@media(max-width:768px){
  .pad,[class*="wp-block"].gs-band-pad{padding-top:70px;padding-bottom:70px}
  .pad-sm,[class*="wp-block"].gs-band-pad-sm{padding-top:52px;padding-bottom:52px}
}

/* ============================================================
   8. SPECTRA CONTAINER LAYOUT AUTHORITY (2026-07-26)

   The layout wrappers below are now `spectra/container` rather than
   `core/group`, which is what removed `is-layout-flow` and killed the
   24px first-child bug at its source (rule 1 above is now belt-and-
   braces for the pages still on core/group).

   The catch: Spectra emits a PER-BLOCK layout rule keyed to the
   container's own id --

     body .wp-block-spectra-container:where([data-spectra-id="..."])
       { display:flex; flex-direction:column }

   -- at specificity 0-1-1 (`body` + one class; `:where()` counts zero).
   That outranks any plain `.se-foo` rule at 0-1-0, so a Spectra
   container ALWAYS wins the layout argument against hand CSS unless the
   hand CSS beats 0-1-1. Left alone it stacks every grid vertically.

   `body .wp-block-spectra-container.se-foo` is 0-2-1 and wins back the
   geometry these grids were designed with. Note `.se-svc-grid` can
   never migrate to Spectra's native flex layout: its feature card uses
   `grid-row: span 2`, which is genuinely 2D and flex cannot express it.
   ============================================================ */
/* NESTED CONTAINERS. Once every structural wrapper on the page is a
   spectra/container, each one inherits `padding:10px` and
   `justify-content:center`. Section-level containers want theirs; nested
   layout wrappers do not, and left alone the 10px compounds at every level
   of nesting. `:where()` holds this at 0-1-1 -- exactly enough to tie
   Spectra's per-block rule (this file loads later, so it wins the tie)
   while any genuine class rule at 0-2-0 still overrides it, so the cards'
   own 32px/36px padding survives untouched. */
body .wp-block-spectra-container:where(:not(.pad):not(.pad-sm):not(.se-hero)){padding:0;justify-content:flex-start}

/* The three wrappers whose own padding lives at 0-1-0 and would therefore
   lose to the blanket above. Restated at 0-2-1 to win it back. */
body .wp-block-spectra-container.se-pillar{padding-top:26px}
body .wp-block-spectra-container.se-path{padding:28px 6px}
body .wp-block-spectra-container.se-statstrip .se-stat{padding:26px 0}

/* Wrappers that must keep a non-flex display once converted. */
body .wp-block-spectra-container.se-path{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:26px}
/* Third container default, and the nastiest for anything with an intrinsic
   size: Spectra ships `.wp-block-spectra-container:not(.alignfull){width:100%}`
   at 0-2-0, which beats `.se-cert-badge{width:230px}` at 0-1-0 and stretched
   the 230px circular seal into a 535x135 lozenge. Any converted wrapper that
   had a fixed width needs restating at 0-2-1. This is the only one here. */
body .wp-block-spectra-container.se-cert-badge{display:grid;place-items:center;padding:0;width:230px}
/* Height is a different fight. Spectra's responsive block emits
     .wp-block-spectra-container.wp-block-spectra-container[data-spectra-id="…"].wp-block-spectra-container
     { height: auto }
   which is 0-4-0. You cannot sanely out-specify that (0-3-1 loses; the seal
   came back 230 wide and 157 tall).

   RULE: do not enter a specificity arms race with Spectra's per-block
   responsive rules. Use a property it does not set. `min-height` coexists
   with `height:auto` and pins the box, so the circle stays a circle. */
body .wp-block-spectra-container.se-cert-badge{min-height:230px}
@media(max-width:720px){
  body .wp-block-spectra-container.se-path{grid-template-columns:40px 1fr;gap:16px}
}

/* Every spectra/container also ships `padding:10px` and
   `justify-content:center` by default. On a section that is wanted; on a
   pure LAYOUT wrapper it insets all content by 10px and centres the row
   (the kicker's 342px of content inside a 461px box landed its gold rule
   at x=159 instead of x=100). Neutralise both on the wrappers only. */
body .wp-block-spectra-container:is(.se-statstrip,.se-pillars,.se-svc-grid,
  .se-stories-grid,.se-stories-col,.se-cert-grid,.se-lynsi-grid,
  .se-credmarks,.se-kicker,.se-paths-list,.se-hero-photo){padding:0}
body .wp-block-spectra-container:is(.se-kicker,.se-credmarks){justify-content:flex-start}

body .wp-block-spectra-container.se-statstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
body .wp-block-spectra-container.se-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
body .wp-block-spectra-container.se-svc-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:22px}
body .wp-block-spectra-container.se-stories-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px}
body .wp-block-spectra-container.se-stories-col{display:grid;gap:24px;align-content:start}
body .wp-block-spectra-container.se-cert-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
body .wp-block-spectra-container.se-lynsi-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
body .wp-block-spectra-container.se-credmarks{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}
/* The kicker was a ROW: 60px hairline + 14px gap + eyebrow, which put the
   eyebrow text at x=174 while every H2 under it started at x=100. Two left
   edges 74px apart inside one section header reads as broken alignment.
   Stack it instead: the hairline sits above the eyebrow and both share the
   section's left edge. */
body .wp-block-spectra-container.se-kicker{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
body .wp-block-spectra-container.se-paths-list{display:block}
/* `align-items:flex-start` (Spectra's default) stopped the <figure> from
   stretching, so its height stayed `auto`. That made the image's own
   `height:100%` circular, and it fell back to the natural 847px inside a
   680px hero. The inline `overflow:visible` then let the extra 167px spill
   down over the stat strip. Stretch the figure to give `100%` something to
   resolve against, and clip whatever is left. */
body .wp-block-spectra-container.se-hero-photo{display:flex;flex-direction:row;align-items:stretch;overflow:hidden!important}

@media(max-width:980px){body .wp-block-spectra-container.se-svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
  body .wp-block-spectra-container.se-lynsi-grid{grid-template-columns:1fr;gap:32px}
}
@media(max-width:860px){
  body .wp-block-spectra-container.se-pillars{grid-template-columns:1fr;gap:28px}
  body .wp-block-spectra-container.se-stories-grid{grid-template-columns:1fr}
}
@media(max-width:820px){body .wp-block-spectra-container.se-cert-grid{grid-template-columns:1fr;gap:32px}}
@media(max-width:720px){body .wp-block-spectra-container.se-statstrip{grid-template-columns:1fr 1fr;gap:14px}}
@media(max-width:620px){body .wp-block-spectra-container.se-svc-grid{grid-template-columns:1fr}}

/* 5. Spectra's container writes `style="overflow:visible"` as an INLINE
      attribute on every section, which outranks the `overflow:hidden`
      that `.se-sacred` has always carried. That let the 560px ensō
      watermark (`right:-70px`) escape its band and push the document to
      1510px at a 1440 viewport: a horizontal scrollbar on every page
      using the motif. Beating an inline style needs `!important`; the
      only alternative is setting the overflow attribute by hand on each
      of the ten pages that use the watermark. This restores the
      stylesheet's original intent rather than adding a new constraint. */
.se-sacred,.se-enso-watermark{overflow:hidden!important}

/* 6. The hero sat on a different left edge from every other section
      (H1 at x=70, every H2 below at x=100), so the page had no single
      left margin. Move the gutter onto the hero itself, where 100%
      resolves against the full-bleed width, and drop the text column's
      own left padding so the H1 lands on the shared 100px line. The
      right side stays at 0 so Lynsi's photo keeps bleeding off-canvas. */
.se-hero:has(.se-hero-photo){padding-left:max(var(--se-gutter),calc((100% - var(--se-measure)) / 2));padding-right:0}
.se-hero:has(.se-hero-photo) .se-hero-text{padding:88px 60px 88px 0}
@media(max-width:900px){
  .se-hero:has(.se-hero-photo){padding-left:0}
  .se-hero:has(.se-hero-photo) .se-hero-text{padding:56px 24px}
}

/* 7. `text-align:center` WITHOUT `align-items:center` is a no-op on a
      Spectra container. The container is a flex column that defaults to
      `align-items:flex-start`, so every child shrink-wraps to its own
      content and then centres its text inside that narrow box, which
      leaves it sitting flush against the left edge. A 130px eyebrow read
      as left-aligned while the 920px headline beside it read as centred:
      the same "wonky alignment" symptom in three different sections
      (the empathy band, the FAQ header, the final CTA). Centre the boxes
      too, so a centred section is actually centred. */
body .wp-block-spectra-container:is(.se-head--center,.se-finalcta){align-items:center}

/* The stat cells inherited the container's 24px flex gap ON TOP of the
   label's own 8px margin, so "26" sat 32px clear of its own label plus
   the ~13px of optical space already inside a 50px Cormorant line box.
   The number and its label are one unit; let the margin alone own it. */
body .wp-block-spectra-container.se-stat{gap:0}
.se-statstrip .se-lbl,.se-stats .se-lbl{margin-top:10px}

/* ---------- FAQ accordion (core/details) ---------- */
.se-faq{background:var(--se-ivory)}
.se-faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--se-line)}
/* The FAQ ran three different left edges at once: section content at
   x=100, a centred 660px header at x=390, and a centred 820px list at
   x=310. Put the header and the list on the section's own edge and let
   the list span the full measure, so each question's rule runs the whole
   width instead of stopping at the end of its text. */
body .wp-block-spectra-container.se-faq .se-head--center{align-self:flex-start;align-items:flex-start;max-width:none;text-align:left}
body .wp-block-spectra-container.se-faq-list{align-self:stretch;align-items:stretch;max-width:none}
.se-faq-item{border-bottom:1px solid var(--se-line)}
.se-faq-item summary{font-family:'Cormorant Garamond',serif;font-size:23px;color:var(--se-purple);cursor:pointer;list-style:none;padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;line-height:1.2}
.se-faq-item summary::-webkit-details-marker{display:none}
.se-faq-item summary::after{content:"+";color:var(--se-gold);font-size:28px;font-family:'Mulish',sans-serif;font-weight:300;flex:0 0 auto;line-height:1}
.se-faq-item[open] summary::after{content:"\2013"}
.se-faq-item p{color:var(--se-sub);padding:0 0 22px;max-width:74ch;margin:0}
.se-faq-item a{color:var(--se-magenta);font-weight:600}

/* 9. MOBILE HERO. The hero had no mobile override, so Spectra's sm breakpoint
      inherited the desktop row and phones rendered a ~230px text column beside a
      136px photo sliver, with the H1 overflowing the hero's top edge (y=-72).
      Orientation and heights now live natively in the block's responsive tabs
      (responsiveControls.sm), which is where Lynsi and Jess can see them.

      The one thing native settings could NOT beat: `min-height`. We reached for
      min-height earlier precisely because it sidesteps Spectra's 0-4-0
      `height:auto`, but min-height outranks `height` at ANY specificity, so the
      520px floor silently pinned the phone photo at 520px while the block said
      400px. Release the floor at Spectra's own sm breakpoint (767.98px) and let
      the block value govern. Desktop containment is untouched. */
@media(max-width:767.98px){
  .se-hero-photo,.se-hero-photo figure,.se-hero-photo img{min-height:0}
}

/* ============================================================================
   10. IMPECCABLE LAYOUT PASS (register: brand). Measured 2026-07-26.

   Finding 1: VERTICAL RHYTHM WAS A METRONOME. Nine of twelve bands rendered
   identical 104px/104px, and every section gap was 24px. The design ethos is
   "feels like a deep breath"; a deep breath needs varied cadence, and the two
   deep-plum bands (the authority moment and the final CTA) were chromatically
   special but spatially identical to every ivory section between them.

   Band scale is now three steps, reusing the value .pad-sm already carried so
   the system stays at three numbers rather than four:

       tight    76px   connective / secondary sections
       default 104px   the seven narrative sections (unchanged)
       peak    144px   the two sacred bands only

   Held at 0-2-1 because Global Styles emits `[class*="wp-block"].gs-band-pad`
   at 0-2-0 from an inline <style>, which outranks a plain `.pad` inside a
   media query, the same trap that silently killed the mobile step-down once
   already. Mobile keeps the proportion (52 / 70 / 96).

   Finding 2: PEAK HEADINGS WERE UNDER-COMMITTED. `.se-h2--big` sits on
   exactly the right two headings, so the system was correct, but 52px against
   a 44px base is a 1.18 ratio, under the 1.25 minimum where a size step stops
   reading as intentional. Raised to 58px (1.32).

   Finding 3: SMALL-LABEL DRIFT. Six near-identical specs spanned 12-13.5px
   for three real roles. The worst was one component role at two sizes:
   "Start here" (.se-path-go, 13px) and "Learn more" (.se-more, 12.5px) are the
   same card-forward link. Micro-labels now sit on ONE size (13px) with weight
   and tracking carrying role; the 12px eyebrow stays as the single deliberate
   exception, matching DESIGN.md.
   ============================================================================ */

/* Finding 1: band rhythm */
body .wp-block-spectra-container.se-sacred{padding-top:144px;padding-bottom:144px}
body .wp-block-spectra-container.se-cert{padding-top:76px;padding-bottom:76px}
@media(max-width:768px){
  body .wp-block-spectra-container.se-sacred{padding-top:96px;padding-bottom:96px}
  body .wp-block-spectra-container.se-cert{padding-top:52px;padding-bottom:52px}
}

/* Finding 2: let the two peaks actually read as peaks */
.se-h2--big{font-size:clamp(32px,4.6vw,58px)}

/* Finding 3: one size for micro-labels; the 12px eyebrow stays the exception */
.se-more{font-size:13px}
.se-credmarks > *{font-size:13px}

/* Finding 2, mobile half. At 390 both clamps sit on their floors (32px vs 30px),
   a 1.07 ratio, so the peak distinction that now works at 1440 collapsed on
   phones. Raise only the floor; the 58px ceiling is unchanged. 38/30 = 1.27. */
.se-h2--big{font-size:clamp(38px,4.6vw,58px)}

/* 11. KICKER HAIRLINE REMOVED (Dallin, 2026-07-27). Comparing the three section
   headers rendered, he preferred the version with no gold rule above the eyebrow.
   Note this is a departure from DESIGN.md, which lists the metallic hairline as a
   signature element; it had been invisible site-wide until the Astra height fix,
   so this is the first time it was actually a visible choice. Hidden rather than
   stripped from markup so it is a one-line revert. */
.se-kicker .wp-block-separator,.se-kicker .se-rule{display:none}

/* 12. SERVICE GRID CARDS DID NOT FILL THEIR ROWS. Same root cause as the hero
   photo in the alignment pass: the Spectra container default `align-items:
   flex-start` makes every grid item shrink to its own content height. Measured
   at 1440: two cards in the SAME row at 301px and 275px (bottoms 26px apart),
   and the `grid-row: span 2` feature card only 380px tall inside a 598px area,
   leaving a large hole beneath it. Held at 0-2-1 to beat Spectra's per-block
   0-1-1 rule. This grid stays CSS grid permanently; the span-2 feature card is
   genuinely 2D and flex cannot express it. */
body .wp-block-spectra-container.se-svc-grid{align-items:stretch}

/* 13. CARD CONTENT DRIFTED WITH COPY LENGTH. `.se-card` inherits the Spectra
   container default `justify-content:center`, so a card with one fewer line of
   body copy centres its content lower: measured icon offsets 33px vs 46px for
   two cards sitting in the same row, which reads as a misalignment even though
   the cards are now identical heights. Top-align the four small cards so icons
   and titles form clean rows regardless of copy length. The span-2 feature card
   is deliberately excluded: its content IS meant to sit centred in the tall
   left column. */
body .wp-block-spectra-container.se-card:not(.se-card--feat){justify-content:flex-start}


/* 14. STORIES GRID LEFT A 404px HOLE. Fourth instance of the Spectra container
   default `align-items:flex-start` shrinking a grid item to its own content
   height. Measured at 1440: the feature quote rendered 730x375 beside a 486x779
   column in the SAME grid row, so 404px of empty band sat under the left card
   and read as a missing testimonial. Stretch the row, then centre the feature
   card's content the way `.se-card--feat` already behaves in the service grid,
   so this is the existing system rather than a second feature-card treatment.
   The centring rule must beat rule 13 (`.se-card:not(.se-card--feat)`, 0-3-1),
   hence the descendant selector at matching specificity later in the file. */
body .wp-block-spectra-container.se-stories-grid{align-items:stretch}
body .wp-block-spectra-container.se-stories-grid .se-feat{justify-content:center}

/* 15. HERO CAPTION FAILED CONTRAST AND COLLIDED WITH THE BACK-TO-TOP BUTTON.
   "a journey of shadows and sunshine" is pure white 22px italic sitting straight
   on the photo with no shadow and no scrim. Sampled the actual image pixels
   under the glyphs at 390: 40.4% of the text area is below 3:1 against white,
   minimum 1.22:1. At 22px the WCAG AA floor for large text is 3:1, so this is a
   measured failure, not a taste call. It also overlapped Astra's fixed
   back-to-top button (caption box x 0-390, button x 329-361, y ranges intersect).
   A text-shadow was tested and still washed out across her white blouse, and it
   would fail again on any photo Jess swaps in; a gradient scrim survives the
   swap. Height is 40% of the photo so the gradient stays well clear of her face.
   `.se-hero-photo` carries `overflow:hidden` already, so the scrim is clipped to
   the photo box. */
body .wp-block-spectra-container.se-hero-photo{position:relative}
body .wp-block-spectra-container.se-hero-photo::after{content:"";position:absolute;
  top:auto;bottom:0;left:0;right:0;height:40%;width:auto;pointer-events:none;z-index:1;
  background:linear-gradient(to top,rgba(26,10,30,.75),rgba(26,10,30,0))}
body .se-hero-cap{z-index:2;padding-right:56px}

/* ============================================================
   Footer follow-up fixes (2026-07-27)
   These override the generic .site-footer chrome rules above,
   which are !important and were flattening the footer.
   Scoped to the footer wraps only - nothing here can reach the
   header navigation.
   ============================================================ */

/* DEFECT 3 - primary footer = Deep Plum band, below footer stays darker ink */
.site-primary-footer-wrap[data-section="section-primary-footer-builder"]{background:#3A0E52!important}
.site-below-footer-wrap[data-section="section-below-footer-builder"]{background:#2A0E3D!important}

/* DEFECT 1 - column-1 heading is the brand mark, not an eyebrow */
.site-footer h2.hf-footer-brand{font-family:'Cormorant Garamond',Georgia,serif!important;font-size:28px!important;line-height:1.2!important;font-weight:500!important;text-transform:none!important;letter-spacing:normal!important;color:#FBF7F1!important;margin:0 0 14px!important}

/* DEFECT 2 - footer menu stacks vertically, one item per line */
.site-primary-footer-wrap .footer-nav-wrap .ast-nav-menu{display:grid!important;grid-template-columns:1fr;justify-items:start}
.site-primary-footer-wrap .footer-nav-wrap .ast-nav-menu .menu-item{display:block!important;width:100%}
.site-primary-footer-wrap .footer-nav-wrap .ast-nav-menu .menu-link{display:inline-block;padding:5px 0!important}
/* keep the "Explore" label sitting above its list once the menu stacks */
.site-primary-footer-wrap .site-footer-primary-section-2{display:block}

/* DEFECT 4 - footer nav link colors */
.site-primary-footer-wrap #astra-footer-menu .menu-link{color:#FBF7F1!important}
.site-primary-footer-wrap #astra-footer-menu .menu-item:hover > .menu-link,
.site-primary-footer-wrap #astra-footer-menu .menu-link:hover,
.site-primary-footer-wrap #astra-footer-menu .menu-link:focus{color:#F6CA6F!important}
.site-primary-footer-wrap #astra-footer-menu .menu-link:focus-visible{outline:2px solid #F6CA6F;outline-offset:3px;border-radius:2px}
/* --- end footer follow-up fixes --- */

/* ============================================================
   DEFECT 5 (2026-07-27) - footer column 2: "Explore" must sit
   ABOVE its menu, not beside it.
   Astra lays multiple builder elements in one footer section
   horizontally via
     .site-primary-footer-wrap[data-section=...].ast-footer-row-inline
     .site-footer-section{display:flex}
   which out-specifies the earlier plain `display:block` attempt.
   This rule matches that specificity and forces a vertical stack.
   Scoped to the primary footer wrap + section-2 ONLY: it cannot
   reach the header nav or footer columns 1 and 3.
   ============================================================ */
.site-primary-footer-wrap[data-section="section-primary-footer-builder"] .site-footer-primary-section-2{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:flex-start!important;justify-content:flex-start!important}
.site-primary-footer-wrap[data-section="section-primary-footer-builder"] .site-footer-primary-section-2 > .footer-widget-area{width:100%!important;max-width:100%!important;flex:0 0 auto!important;margin-left:0!important;margin-right:0!important}
.site-primary-footer-wrap[data-section="section-primary-footer-builder"] .site-footer-primary-section-2 > .footer-widget-area[data-section="section-footer-menu"]{padding-left:0!important;padding-right:0!important}
/* --- end defect 5 --- */
/* match column 3: the only gap between "Explore" and its list is the h2 margin (16px) */
.site-primary-footer-wrap[data-section="section-primary-footer-builder"] .site-footer-primary-section-2 > .footer-widget-area{margin-top:0!important;margin-bottom:0!important}

/* ============================================================
   Mobile hero photo framing (2026-08-06)
   Line 333 sets object-position:center 100%. That value was measured for
   the DESKTOP box (565x680: cover gives 565x847, 167px of latitude,
   bottom-anchored so the fence grounds the frame and her face sits in the
   upper third). The mobile box is a different shape: the block sets sm
   height 400px, so at 375px wide cover gives 375x562 and latitude is
   162px. Bottom-anchoring there crops all 162px off the TOP, taking the
   top of her head with it (reported by Dallin 2026-08-06, and the same
   class of complaint Lynsi made 2026-07-14).
   55% was picked by measuring on device width, not derived: 22% (the
   pre-2026-07-27 value) overcorrects and leaves her low under a wall of
   tree canopy; 55% seats her whole head with headroom and still keeps the
   fence and her arms in the lower third. Desktop framing is untouched.
   ============================================================ */
@media(max-width:767.98px){
  .se-hero-photo img{object-position:center 55%}
}

/* ---------------------------------------------------------------------------
   .se-sub  (2026-08-10)

   The most-used class on the homepage, 16 elements, with no rule behind it
   anywhere in this file or in Global Styles. Only the `--se-sub` custom
   property existed, which is a colour token consumed by .se-lead,
   .se-hero-sub and .se-faq-item p. The class was written into the markup as
   if a matching rule existed and it never got authored, so every service
   card and path description on the page rendered as default Astra body copy:
   wrong colour, wrong size, wrong leading.

   Role: the descriptive line under a card or path heading. One step down the
   scale from .se-lead (19px), which is the section-level intro.
   --------------------------------------------------------------------------- */
.se-sub{font-size:16.5px;line-height:1.65;color:var(--se-sub)}

/* Inside the tighter grid cells the measure needs a cap, otherwise the
   descriptions run the full width of a feature card and stop matching the
   rhythm of the shorter cards beside them. */
.se-svc-grid .se-sub,.se-paths-list .se-sub{max-width:52ch}




/* ---------------------------------------------------------------------------
   Footer alignment  (2026-08-10)

   The footer ran on Astra's geometry rather than the page's, which showed up
   as two separate defects:

   1. At and below 1200px the inner grid wrap had no horizontal padding, and
      its max-width cap was the only thing keeping content off the viewport
      edge. Under that width the cap does nothing, so footer text sat at
      left:0, hard against the bezel, while every band above it was inset by
      the gutter. That is the broken footer at tablet and mobile.
   2. Above 1200px the inner wrap capped at Astra's 1200px while the content
      bands run to --se-measure (1240px), leaving the footer 20px inset from
      the column above it at every desktop width.

   The inset lives on the OUTER wrap and the measure lives on the INNER wrap,
   which is the only split that holds at every width. Astra already applies
   its own responsive padding to the outer wrap (20px at mobile), so putting
   the gutter on the inner wrap as well double-insets the footer on phones:
   that produced text at 44px against a 24px content column. Normalising the
   outer wrap to the gutter token and zeroing the inner keeps one inset in
   play, wherever Astra decides to change its own value.

   box-sizing is content-box so the cap applies to the content box and the
   gutter sits outside it, matching how the bands above compute.

   Specificity: Astra's footer builder emits
   `.site-primary-footer-wrap[data-section="..."] .ast-builder-grid-row` at
   0-3-0 from dynamic CSS, and its responsive padding lands inside media
   queries, so a plain class selector loses on both. Matched at 0-3-1 with a
   `body` prefix rather than !important, consistent with the other Astra
   escalations in this file.
   --------------------------------------------------------------------------- */
body .site-primary-footer-wrap.ast-builder-grid-row-container.site-footer-focus-item,
body .site-below-footer-wrap.ast-builder-grid-row-container.site-footer-focus-item{
  padding-left:var(--se-gutter);
  padding-right:var(--se-gutter)
}

body .site-primary-footer-wrap .ast-builder-grid-row.site-primary-footer-inner-wrap,
body .site-below-footer-wrap .ast-builder-grid-row.site-below-footer-inner-wrap{
  box-sizing:content-box;
  max-width:var(--se-measure);
  padding-left:0;
  padding-right:0;
  margin-left:auto;
  margin-right:auto
}

/* ---------------------------------------------------------------------------
   .se-hero-cap contrast at mobile  (2026-08-11)

   The 2026-07-27 scrim fixed this caption at every width except the narrowest.
   Re-measured 2026-08-11 with the audit's overlay-contrast check reading the
   COMPOSITED screen rather than the raw photo (the old sampler drew the <img>
   to a canvas, so this ::after was structurally invisible to it and it scored
   the bare photo in both states). Real numbers at 390: the caption is white
   22px, which is BELOW the 24px large-text threshold, so its WCAG AA floor is
   4.5:1 and not the 3:1 the 07-27 note assumed. 4.5% of the caption's area
   measured below that floor, minimum 3.88:1.

   Cause is geometry, not the gradient. The 767.98px rule further up releases
   the photo's 520px min-height, so the photo is shorter on a phone, so the
   scrim's `height:40%` is a smaller absolute band, and the caption at
   `bottom:30px` sits high enough in it that the gradient has already faded to
   roughly 0.44 alpha where the glyphs are.

   Fix is to hold the scrim above 0.78 alpha across the caption's own band and
   let it fade above that. The caption occupies the bottom 30px to 66px, so 90px
   of held alpha clears it with headroom. At 0.78 over a pure-white pixel the
   composited backdrop is 76,63,79, which is about 9.9:1 against white: far
   enough over 4.5 to survive any photo Jess swaps in, which is the same reason
   07-27 chose a scrim over a text-shadow. Desktop is untouched.
   --------------------------------------------------------------------------- */
@media(max-width:767.98px){
  body .wp-block-spectra-container.se-hero-photo::after{
    height:56%;
    background:linear-gradient(to top,
      rgba(26,10,30,.86) 0,
      rgba(26,10,30,.78) 90px,
      rgba(26,10,30,0) 100%)
  }
}

/* free-guide book cover: a book, not a billboard. The lynsi-grid rule
   forces images to fill their column, which is right for a photo and
   wrong for a 650x995 cover. Cap it and keep it left in its column. */
.se-lynsi-grid > .wp-block-image.se-guide-cover,
.se-lynsi-grid > .wp-block-image.se-guide-cover img{width:320px;max-width:100%}
.se-lynsi-grid > .wp-block-image.se-guide-cover{justify-self:start}
@media(max-width:900px){
  .se-lynsi-grid > .wp-block-image.se-guide-cover,
  .se-lynsi-grid > .wp-block-image.se-guide-cover img{width:240px}
}

/* ============================================================
   POLISH PASS 2026-08-26 (PoC 2 review feedback)
   ============================================================ */

/* 1. Free-guide band: the .9fr/1.1fr grid left a dead gap beside a
      320px cover. Size the image column to the cover itself. */
.se-lynsi-grid:has(> .wp-block-image.se-guide-cover){grid-template-columns:320px 1fr;gap:48px}
@media(max-width:900px){
  .se-lynsi-grid:has(> .wp-block-image.se-guide-cover){grid-template-columns:1fr;gap:28px}
}

/* 2. Story cards: the featured card stretches to the height of the two
      stacked cards beside it, which vertically centred a short quote and
      left big dead bands. Pin content to the top and give the text room
      to clear the card edge. */
.se-stories-grid .se-card{padding:40px 40px 34px;display:flex;flex-direction:column;justify-content:flex-start}
.se-stories-grid .se-card > *{width:100%}
.se-stories-grid blockquote{margin:0 0 18px}
.se-stories-grid .se-quote::before{margin-bottom:6px}
/* short quotes should not float in the middle of a tall card */
.se-stories-col{align-content:start}
@media(min-width:861px){.se-stories-grid{align-items:start}}

/* 3. Certification band: the right column was far wider than the badge
      it held. Give the copy more of the rail and grow the badge. */
.se-cert .se-cert-grid{grid-template-columns:1.4fr .6fr!important;gap:40px!important}
.se-cert .se-cert-badge{width:280px!important;height:280px!important}
.se-cert .se-cert-badge b{font-size:23px!important}
@media(max-width:820px){.se-cert-grid{grid-template-columns:1fr;gap:32px}}

/* 4. Tighten the cert -> FAQ seam, which read as a dropout. */
.se-cert.pad{padding-bottom:56px!important}
.se-faq.pad{padding-top:56px!important}

/* 5. Footer: the bands already separate by colour, so the hairlines
      between them read as leftover chrome. */
.ast-small-footer,.site-info,.site-primary-footer-wrap,
.site-below-footer-wrap,.site-above-footer-wrap{border-top:0!important;border-bottom:0!important}
.site-primary-footer-wrap[data-section="section-primary-footer-builder"],
.site-below-footer-wrap[data-section="section-below-footer-builder"]{border-top:0!important;border-bottom:0!important}

/* 6. Ghost buttons on the deep-plum bands were purple-on-purple and
      effectively invisible. The stylesheet already has the right
      treatment (.se-btn-light); adopt it wherever a ghost button sits
      on a dark band instead of asking the author to remember. */
.se-sacred .se-btn-ghost .wp-block-button__link,
.se-finalcta .se-btn-ghost .wp-block-button__link,
.se-hero .se-btn-ghost .wp-block-button__link,
.se-sacred a.se-btn-ghost,.se-finalcta a.se-btn-ghost{
  border:1.5px solid rgba(246,202,111,.75)!important;
  color:var(--se-gold-bright)!important;background:transparent!important}
.se-sacred .se-btn-ghost .wp-block-button__link:hover,
.se-finalcta .se-btn-ghost .wp-block-button__link:hover,
.se-hero .se-btn-ghost .wp-block-button__link:hover{
  background:var(--se-gold-bright)!important;color:var(--se-plum)!important}

/* 7. Featured story card stretches to match the two stacked cards beside
      it. That is fine, but its content was floating mid-card with a dead
      band above. Pin content to the top so the slack falls at the bottom
      and reads as padding, and let the feature quote carry more weight. */
.se-stories-grid .se-card{justify-content:flex-start!important;align-items:stretch!important}
.se-stories-grid .se-card > *{align-self:stretch}
.se-stories-grid .se-card--feat,.se-stories-grid .se-feat{justify-content:flex-start!important}
.se-stories-grid .se-feat blockquote,
.se-stories-grid .se-card--feat blockquote{font-size:29px;line-height:1.34}
.se-stories-grid .se-quote::before{margin-bottom:2px}

/* 8. Text-only hero masthead (.se-hero-text with no photo) rendered its H1
      hard against the left edge while the sub-heading centred, because
      Spectra V3 emits a per-block rule
      `body *:where(.wp-block-spectra-container)[data-spectra-id='…']`
      at 0-1-1 that sets align-items:flex-start, outranking the 0-1-0
      `.se-hero-text{align-items:center}` above. Match on the Spectra class
      to reach 0-2-0 and win it back, then let the children run full width
      so their own text-align does the centring instead of flex alignment. */
.se-hero-text.wp-block-spectra-container{align-items:center}
.se-hero-text.wp-block-spectra-container > *{width:100%;max-width:100%}
.se-hero-text.wp-block-spectra-container > .wp-block-buttons{display:flex;justify-content:center}