/* ============================================================
   Bloomhaus — redesign sections (Biograph-format)
   Loaded after main.css; uses the warm-earth tokens already defined.
   ============================================================ */

/* ---------- FULL-BLEED HERO (Biograph format) ---------- */
.bh-hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--onyx);
}
.bh-hero__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 42%; z-index:0;
  animation:bhKen 40s ease-in-out infinite alternate;
}
@keyframes bhKen{ from{transform:scale(1.02)} to{transform:scale(1.09)} }
@media (prefers-reduced-motion:reduce){ .bh-hero__img{animation:none;transform:scale(1.02)} }
.bh-hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(12,13,15,.15) 0%, rgba(12,13,15,0) 30%, rgba(12,13,15,.55) 72%, rgba(12,13,15,.9) 100%);
}
.bh-hero__foot{
  position:relative; z-index:2; width:100%;
  max-width:var(--maxw); margin:0 auto; padding:0 40px 48px; color:#fff;
  display:flex; align-items:flex-end; justify-content:space-between; gap:48px;
}
.bh-hero__lead{ flex:1 1 auto; min-width:0; max-width:640px; }
.bh-hero h1{
  color:#fff; font-size:clamp(2.3rem,3.4vw,3.3rem); line-height:1.08; letter-spacing:-.025em;
  font-weight:500; margin:0 0 18px; max-width:22ch; text-wrap:balance; text-shadow:0 2px 40px rgba(0,0,0,.45);
}
.bh-hero__sub{ font-size:clamp(1rem,1.25vw,1.1rem); line-height:1.5; color:rgba(240,237,231,.9); max-width:48ch; margin:0 0 28px; text-shadow:0 1px 20px rgba(0,0,0,.5); }
.bh-hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }
/* right-aligned stat row on the baseline */
.bh-hero__stats{ display:flex; gap:0; flex:0 1 auto; padding-bottom:6px; }
.bh-hero__stat{ padding:0 18px; border-left:1px solid rgba(255,255,255,.18); }
.bh-hero__stat:first-child{ border-left:0; padding-left:0; }
.bh-hero__stat:last-child{ padding-right:0; }
.bh-hero__stat strong{ display:block; font-size:13px; font-weight:600; color:#fff; margin-bottom:4px; letter-spacing:-.01em; white-space:nowrap; }
.bh-hero__stat span{ display:block; font-size:11.5px; line-height:1.35; color:rgba(213,210,202,.62); white-space:nowrap; }
@media (max-width:900px){
  .bh-hero__foot{ flex-direction:column; align-items:flex-start; gap:32px; padding-bottom:48px; }
  .bh-hero__stats{ flex-wrap:wrap; gap:0; }
}
@media (max-width:560px){
  .bh-hero__stat{ padding:0 16px; }
  .bh-hero h1{ font-size:clamp(2.4rem,10vw,3.2rem); }
}

/* ---------- SECTION SHELL / ELEVATED RHYTHM ---------- */
.bh-sec{ padding:var(--space-2xl) 0; }
.bh-sec--tight{ padding:var(--space-xl) 0; }
.bh-dark{ background:var(--onyx); color:#fff; }
.bh-dark h2,.bh-dark h3{ color:#fff; }
.bh-dark p{ color:rgba(213,210,202,.82); }
.bh-eyebrow{ display:block; width:100%; max-width:none; margin:0 auto 18px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--terracotta); font-weight:600; }
.bh-dark .bh-eyebrow{ color:var(--amber); }
.bh-h2{ font-size:clamp(2rem,4vw,3rem); line-height:1.08; letter-spacing:-.02em; font-weight:500; margin:0 0 20px; }
.bh-center{ text-align:center; }
.bh-center .bh-h2, .bh-center .bh-lede{ margin-left:auto; margin-right:auto; }
.bh-lede{ font-size:1.15rem; line-height:1.6; color:var(--muted); max-width:56ch; }
.bh-dark .bh-lede{ color:rgba(213,210,202,.82); }

/* ---------- LUMINARY QUOTES CAROUSEL ---------- */
.lum{ background:var(--onyx); color:#fff; padding:var(--space-2xl) 0; overflow:hidden; }
.lum__head{ max-width:var(--maxw); margin:0 auto 56px; padding:0 40px; text-align:center; }
.lum__track-wrap{ position:relative; max-width:900px; margin:0 auto; padding:0 40px; }
.lum__slide{ display:none; text-align:center; animation:lumFade .8s var(--settle-ease); }
.lum__slide.is-active{ display:block; }
@keyframes lumFade{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
.lum__quote{ font-size:clamp(1.3rem,2.4vw,1.9rem); line-height:1.45; letter-spacing:-.01em; color:#fff; font-weight:400; margin:0 auto 32px; max-width:38ch; }
.lum__quote::before{ content:"\201C"; color:var(--amber); }
.lum__quote::after{ content:"\201D"; color:var(--amber); }
.lum__who{ display:flex; align-items:center; justify-content:center; gap:16px; }
.lum__portrait{
  width:60px; height:60px; border-radius:50%; overflow:hidden; flex:0 0 auto;
  background:linear-gradient(150deg,#3a2d2a,#2E3A4D); border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); font-size:20px; font-weight:500;
}
.lum__portrait img{ width:100%; height:100%; object-fit:cover; }
.lum__meta{ text-align:left; }
.lum__name{ font-size:1.05rem; font-weight:600; color:#fff; margin:0; }
.lum__title{ font-size:.85rem; color:var(--amber); margin:2px 0 0; }
.lum__src{ font-size:.72rem; color:rgba(213,210,202,.5); margin:3px 0 0; }
.lum__src a{ color:rgba(213,210,202,.5); }
.lum__dots{ display:flex; gap:10px; justify-content:center; margin-top:44px; }
.lum__dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.25); border:0; cursor:pointer; padding:0; transition:background var(--settle) var(--settle-ease), width var(--settle) var(--settle-ease); }
.lum__dot.is-active{ background:var(--amber); width:24px; border-radius:4px; }
.lum__arrows{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.lum__arrow{ pointer-events:auto; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background var(--settle) var(--settle-ease); }
.lum__arrow:hover{ background:rgba(255,255,255,.12); }
@media (max-width:600px){ .lum__arrows{display:none} }

/* ---------- STAT BOXES with smoke + hover color ---------- */
.stats{ padding:var(--space-2xl) 0; background:var(--cream); }
.stats__grid{ max-width:var(--maxw); margin:0 auto; padding:0 40px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.stat{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background:#fff; border:1px solid var(--hairline);
  padding:48px 34px 40px; min-height:340px;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:transform var(--settle) var(--settle-ease), box-shadow var(--settle) var(--settle-ease);
  cursor:default;
}
.stat:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -30px rgba(12,13,15,.3); }
/* the "smoke": a real animated fog rendered on canvas, revealed on hover.
   (Biograph uses a Unicorn Studio WebGL scene; this is a self-contained,
   license-clean equivalent: drifting blurred colored particles.) */
.stat__smoke{ position:absolute; inset:0; z-index:0; width:100%; height:100%;
  opacity:0; transition:opacity 1100ms var(--settle-ease); }
.stat:hover .stat__smoke{ opacity:1; }
/* gradient wash on top of the fog, like the source's linear-gradient overlay */
.stat__grad{ position:absolute; inset:0; z-index:1; opacity:0; transition:opacity 1100ms var(--settle-ease); mix-blend-mode:screen; }
.stat:hover .stat__grad{ opacity:.5; }
.stat--terracotta .stat__grad{ background:linear-gradient(180deg, rgba(144,75,63,0) 0%, rgba(144,75,63,.9) 100%); }
.stat--olive .stat__grad{ background:linear-gradient(180deg, rgba(109,114,70,0) 0%, rgba(109,114,70,.9) 100%); }
.stat--indigo .stat__grad{ background:linear-gradient(180deg, rgba(46,58,77,0) 0%, rgba(46,58,77,.95) 100%); }
/* big, left-aligned number like the source (92px) */
.stat__num{ position:relative; z-index:2; font-size:clamp(3.4rem,5.5vw,5.4rem); line-height:.95; font-weight:600; letter-spacing:-.03em; color:var(--onyx); margin:0 0 18px; transition:color 700ms var(--settle-ease); }
.stat__body{ position:relative; z-index:2; font-size:.98rem; line-height:1.55; color:var(--muted); margin:0; transition:color 700ms var(--settle-ease); }
.stat:hover .stat__num, .stat:hover .stat__body{ color:#fff; }
@media (max-width:820px){ .stats__grid{grid-template-columns:1fr; gap:18px} .stat{min-height:0} }

/* ---------- WHAT WE MEASURE carousel (Biograph format) ---------- */
.wm{ padding:var(--space-2xl) 0; background:linear-gradient(315deg, #28353b 0%, #0a0b0d 100%); color:#fff; overflow:hidden; }
.wm__head{ max-width:var(--maxw); margin:0 auto 56px; padding:0 40px; text-align:center; }
.wm__stage{ position:relative; max-width:1280px; margin:0 auto; padding:0 40px; }
.wm__viewport{ overflow:visible; }
.wm__track{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.wmcard{
  position:relative;
  border-radius:var(--radius-lg); border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02); min-height:540px;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:26px 26px 32px; overflow:hidden;
}
.wmcard__info{ position:absolute; top:22px; left:22px; z-index:3; width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:transparent; color:rgba(255,255,255,.6); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:border-color var(--settle) var(--settle-ease), color var(--settle) var(--settle-ease); }
.wmcard__info:hover{ border-color:#fff; color:#fff; }
/* circular animated fluid orb */
.wmcard__orb{ position:relative; width:210px; height:210px; margin:70px auto 0; border-radius:50%; overflow:hidden; flex:0 0 auto; box-shadow:0 30px 70px -30px rgba(0,0,0,.7); }
.wmcard__fluid{ position:absolute; inset:0; width:100%; height:100%; }
.wmcard__orb-sheen{ position:absolute; inset:0; border-radius:50%; background:radial-gradient(120% 100% at 32% 26%, rgba(255,255,255,.28) 0%, rgba(255,255,255,.05) 30%, rgba(0,0,0,.0) 55%, rgba(0,0,0,.35) 100%); pointer-events:none; }
.wmcard__body{ margin-top:auto; }
.wmcard__title{ font-size:1.35rem; font-weight:500; color:#fff; margin:0 0 10px; }
.wmcard__text{ font-size:.95rem; line-height:1.55; color:rgba(213,210,202,.78); margin:0; }
@media (max-width:1024px){ .wm__track{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .wm__track{ grid-template-columns:1fr; gap:16px; } .wmcard{ min-height:0; } .wmcard__orb{ margin-top:40px; } }

/* ---------- METHOD (three large animated images) ---------- */
.method{ padding:var(--space-2xl) 0; background:var(--cream); }
.method__head{ max-width:var(--maxw); margin:0 auto 60px; padding:0 40px; text-align:center; }
.method__grid{ max-width:var(--maxw); margin:0 auto; padding:0 40px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.mstep{ }
.mstep__frame{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:3/3.6; margin-bottom:22px; }
.mstep__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.03); transition:transform 1400ms var(--settle-ease); }
.mstep:hover .mstep__img{ transform:scale(1.1); }
.mstep__shimmer{ position:absolute; inset:0; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%); transform:translateX(-100%); animation:shimmer 6s ease-in-out infinite; }
@keyframes shimmer{ 0%,60%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
@media (prefers-reduced-motion:reduce){ .mstep__shimmer{animation:none;opacity:0} }
.mstep__no{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--terracotta); font-weight:600; margin:0 0 8px; }
.mstep__title{ font-size:1.4rem; font-weight:500; color:var(--onyx); margin:0 0 10px; }
.mstep__text{ font-size:.98rem; line-height:1.55; color:var(--muted); margin:0; }
@media (max-width:820px){ .method__grid{grid-template-columns:1fr; gap:32px} }

/* ---------- THE BLOOMHAUS PATH (Biograph spec-list format, 3 programs + Sustain band) ---------- */
.pkg{ padding:var(--space-2xl) 0; background:var(--onyx); color:#fff; }
.pkg__head{ max-width:var(--maxw); margin:0 auto 60px; padding:0 40px; text-align:center; }
.pkg__grid{ max-width:var(--maxw); margin:0 auto; padding:0 40px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }

.pcard{
  display:flex; flex-direction:column; border-radius:var(--radius-lg);
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.1);
  padding:34px 30px 30px;
  transition:transform var(--settle) var(--settle-ease), border-color var(--settle) var(--settle-ease), background var(--settle) var(--settle-ease);
}
.pcard:hover{ transform:translateY(-4px); background:rgba(255,255,255,.055); border-color:rgba(160,123,86,.45); }
.pcard--feature{ border-color:var(--terracotta); }

/* card header */
.pcard__head{ text-align:center; padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,.1); }
.pcard__tier{ font-size:1.6rem; font-weight:500; color:#fff; margin:0 0 8px; letter-spacing:-.01em; }
.pcard__essence{ font-size:.95rem; line-height:1.55; color:rgba(213,210,202,.78); margin:0 auto 22px; max-width:30ch; }
.pcard__btn{
  display:block; width:100%; text-align:center; box-sizing:border-box;
  padding:13px 20px; border-radius:999px; font-size:.95rem; font-weight:500;
  text-decoration:none; background:var(--terracotta); color:#fff;
  transition:background var(--settle) var(--settle-ease), transform var(--settle) var(--settle-ease);
}
.pcard__btn:hover{ background:#7d3f35; transform:translateY(-1px); }

/* inclusion list */
.pcard__list{ display:flex; flex-direction:column; flex:1; padding-top:24px; }
.pcard__list-label{ font-size:.88rem; font-weight:600; color:#fff; margin:0 0 16px; }
.pcard__carry{ color:var(--olive); }
.pcard__list ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; flex:1; }
.pcard__list li{ display:flex; align-items:flex-start; gap:11px; font-size:.92rem; line-height:1.5; color:rgba(213,210,202,.82); }
.pcard__list li svg{ width:16px; height:16px; flex-shrink:0; margin-top:2px; color:var(--amber); }
.pcard--feature .pcard__list li svg{ color:var(--terracotta); }
.pcard__compare{
  display:inline-flex; align-items:center; gap:8px; margin-top:26px;
  font-size:.9rem; font-weight:500; color:var(--amber); text-decoration:none;
}
.pcard__compare svg{ width:15px; height:15px; transition:transform var(--settle) var(--settle-ease); }
.pcard__compare:hover svg{ transform:translateX(4px); }

/* Sustain graduation band (quieter, not a fourth program) */
.pband{
  max-width:var(--maxw); margin:24px auto 0; padding:30px 38px;
  display:flex; align-items:center; gap:32px;
  border-radius:var(--radius-lg); border:1px dashed rgba(213,210,202,.28);
  background:rgba(255,255,255,.02); text-decoration:none;
  transition:border-color var(--settle) var(--settle-ease), background var(--settle) var(--settle-ease);
}
.pband:hover{ border-color:rgba(160,123,86,.5); background:rgba(255,255,255,.04); }
.pband__mark{ flex-shrink:0; }
.pband__eyebrow{ display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); font-weight:600; margin-bottom:4px; }
.pband__tier{ font-size:1.35rem; font-weight:500; color:#fff; margin:0; }
.pband__essence{ flex:1; font-size:.95rem; line-height:1.6; color:rgba(213,210,202,.78); margin:0; max-width:60ch; }
.pband__cta{ flex-shrink:0; display:inline-flex; align-items:center; gap:8px; font-size:.92rem; font-weight:500; color:var(--amber); }
.pband__cta svg{ width:15px; height:15px; transition:transform var(--settle) var(--settle-ease); }
.pband:hover .pband__cta svg{ transform:translateX(4px); }

@media (max-width:900px){
  .pkg__grid{ grid-template-columns:1fr; max-width:520px; }
  .pcard--feature{ order:-1; }
  .pband{ flex-direction:column; align-items:flex-start; gap:16px; max-width:520px; }
}

/* ---------- FAQ (Biograph format: two-column, left title / right accordion) ---------- */
.bfaq{ padding:var(--space-2xl) 0; background:var(--cream); }
.bfaq__wrap{ max-width:var(--maxw); margin:0 auto; padding:0 40px; display:grid; grid-template-columns:0.8fr 1.2fr; gap:60px; align-items:start; }
.bfaq__title h2{ font-size:clamp(1.9rem,3.2vw,2.6rem); line-height:1.1; letter-spacing:-.02em; font-weight:500; color:var(--onyx); margin:0 0 16px; }
.bfaq__title p{ font-size:1rem; line-height:1.6; color:var(--muted); margin:0; }
.bfaq__list{ border-top:1px solid var(--hairline); }
.bfaq__item{ border-bottom:1px solid var(--hairline); }
.bfaq__q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:24px 40px 24px 0; position:relative; font-family:inherit; font-size:1.08rem; font-weight:500; color:var(--onyx); line-height:1.4; }
.bfaq__q::after{ content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:1.4rem; font-weight:400; color:var(--terracotta); transition:transform var(--settle) var(--settle-ease); }
.bfaq__item.is-open .bfaq__q::after{ content:"\2013"; }
.bfaq__a{ overflow:hidden; max-height:0; transition:max-height var(--settle) var(--settle-ease); }
.bfaq__a-inner{ padding:0 40px 26px 0; font-size:1rem; line-height:1.62; color:var(--muted); }
@media (max-width:820px){ .bfaq__wrap{grid-template-columns:1fr; gap:32px} }

/* ---------- VIDEO CLOSER ---------- */
.vclose{ position:relative; min-height:80vh; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--onyx); }
.vclose__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.vclose__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(12,13,15,.5),rgba(12,13,15,.4) 50%,rgba(12,13,15,.62)); }
.vclose__inner{ position:relative; z-index:2; text-align:center; color:#fff; padding:96px 40px; max-width:720px; }
.vclose__inner h2{ font-size:clamp(2rem,4vw,3rem); font-weight:500; letter-spacing:-.02em; color:#fff; margin:0 0 22px; line-height:1.1; }
.vclose__inner p{ font-size:1.1rem; line-height:1.6; color:rgba(240,237,231,.9); max-width:52ch; margin:0 auto 32px; }
.vclose__inner .disclaimer{ font-size:.82rem; color:rgba(213,210,202,.6); margin-top:26px; }



/* Ghost button on dark grounds (What We Measure, and any dark section).
   Previously inherited the dark default and was invisible until hover. */
.btn-ghost--light{
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.45);
  transition: background-color var(--settle) var(--settle-ease),
              border-color var(--settle) var(--settle-ease),
              color var(--settle) var(--settle-ease);
}
.btn-ghost--light:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.85);
  color: #fff;
}