/* ============================================================
   WHOLEISTIC WELLNESS — Candice Schutz
   Full rebuild v20 · editorial, no boxes/icons · Navy · Gold · Ivory · Sage
   Playfair Display + Nunito Sans. All motion honors reduced-motion.
   ============================================================ */

:root{
  --navy:#1E2A38; --navy-deep:#16202B; --navy-soft:#2A3A4C;
  --gold:#C9A24B; --gold-light:#E0BC74; --gold-deep:#A8842F;
  --ivory:#F7F2E9; --ivory-deep:#EFE7D7; --cream:#FBF8F2;
  --sage:#E6E9E0; --sage-deep:#CDD4C4;
  --ink:#22262B; --ink-soft:#52565B; --ink-mute:#7C8088;
  --white:#fff;
  --line:rgba(30,42,56,.12); --line-gold:rgba(201,162,75,.42);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wrap:1180px;
  --r:10px; --r-lg:18px; --r-xl:28px;
  --sh-sm:0 1px 2px rgba(30,42,56,.05),0 2px 10px rgba(30,42,56,.06);
  --sh-md:0 14px 40px -16px rgba(30,42,56,.26),0 4px 12px rgba(30,42,56,.06);
  --sh-lg:0 36px 80px -30px rgba(30,42,56,.40),0 10px 24px rgba(30,42,56,.10);
  --sh-gold:0 24px 60px -26px rgba(168,132,47,.55);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans); color:var(--ink); background:var(--ivory);
  font-size:17px; line-height:1.72; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none}
ul{list-style:none}
summary{cursor:pointer; list-style:none}
summary::-webkit-details-marker{display:none}
::selection{background:var(--gold); color:var(--navy-deep)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.08; letter-spacing:-.01em; color:var(--navy)}
.display{font-size:clamp(2.5rem,6vw,4.4rem); line-height:1.03; letter-spacing:-.02em}
.h2{font-size:clamp(1.9rem,4.2vw,2.9rem)}
.h3{font-size:clamp(1.25rem,2.3vw,1.62rem)}
.serif-i{font-style:italic; color:var(--gold-deep); font-weight:500}
.lead{font-size:clamp(1.06rem,1.6vw,1.24rem); line-height:1.68; color:var(--ink-soft)}
.muted{color:var(--ink-soft)}
.center{text-align:center}

/* eyebrow with gold hairline that draws in on reveal */
.eyebrow{font-family:var(--sans); font-weight:800; font-size:.73rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-deep); display:inline-flex; align-items:center; gap:.7rem}
.eyebrow::before{content:""; width:34px; height:1.5px; background:var(--gold); flex-shrink:0}
.eyebrow.center::after{content:""; width:34px; height:1.5px; background:var(--gold); flex-shrink:0}
.js .reveal .eyebrow::before,.js .reveal .eyebrow::after,
.js .reveal-l .eyebrow::before,.js .reveal-r .eyebrow::before{width:0; transition:width .9s var(--ease) .25s}
.js .reveal.in .eyebrow::before,.js .reveal.in .eyebrow::after,
.js .reveal-l.in .eyebrow::before,.js .reveal-r.in .eyebrow::before{width:34px}

/* ---------- layout ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,40px)}
.wrap-narrow{max-width:820px}
.section{padding-block:clamp(56px,8vw,110px)}
.section-sm{padding-block:clamp(42px,5.5vw,72px)}
.bg-cream{background:var(--cream)}
.bg-sage{background:linear-gradient(180deg,var(--sage),#eef0e8)}
.section-head{max-width:720px}
.section-head.center{margin-inline:auto; text-align:center}
.section-head .h2{margin-top:16px}
.section-head p{margin-top:16px}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--sans); font-weight:800; font-size:.95rem; letter-spacing:.01em;
  padding:.95em 1.9em; border-radius:999px; transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, color .3s, border-color .3s}
.btn svg{width:1.05em; height:1.05em; flex-shrink:0}
.btn-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold) 60%,var(--gold-deep)); color:var(--navy-deep); box-shadow:var(--sh-gold)}
.btn-gold:hover{transform:translateY(-3px); box-shadow:0 30px 70px -24px rgba(168,132,47,.7)}
.btn-outline{border:1.6px solid var(--navy); color:var(--navy); background:transparent}
.btn-outline:hover{background:var(--navy); color:var(--ivory); transform:translateY(-3px)}
.btn-outline-light{border:1.6px solid rgba(247,242,233,.65); color:#fff; background:rgba(247,242,233,.06); backdrop-filter:blur(4px)}
.btn-outline-light:hover{background:rgba(247,242,233,.16); transform:translateY(-3px)}
.btn-light{background:var(--ivory); color:var(--navy)}
.btn-light:hover{transform:translateY(-3px); box-shadow:var(--sh-lg)}
.link-gold{display:inline-flex; align-items:center; gap:.5em; font-weight:800; color:var(--gold-deep); font-size:.95rem}
.link-gold svg{width:1em; height:1em; transition:transform .35s var(--ease)}
.link-gold:hover svg{transform:translateX(5px)}

/* ---------- nav (sticky, darkens on scroll, logo swap) ---------- */
.nav{position:sticky; top:0; z-index:200; background:rgba(247,242,233,.95);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent; transition:box-shadow .4s, background .4s, border-color .4s}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; min-height:76px; gap:20px}
.brand{display:flex; align-items:center; flex-shrink:0}
.brand img{height:56px; width:auto}
.brand .logo-light{display:none}
.menu{display:flex; align-items:center; gap:2px}
.menu a{font-weight:700; font-size:.92rem; color:var(--navy); padding:.55em .8em; position:relative; transition:color .25s; white-space:nowrap}
.menu a::after{content:""; position:absolute; left:.8em; right:.8em; bottom:.3em; height:1.5px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease)}
.menu a:hover{color:var(--gold-deep)} .menu a:hover::after,.menu a.active::after{transform:scaleX(1)}
.nav-cta{margin-left:10px}
.nav.scrolled{background:rgba(22,32,43,.97); box-shadow:0 12px 40px -22px rgba(0,0,0,.65); border-color:transparent}
.nav.scrolled .brand .logo-dark{display:none}
.nav.scrolled .brand .logo-light{display:inline-block}
.nav.scrolled .menu a{color:var(--ivory)}
.nav.scrolled .menu a:hover{color:var(--gold-light)}
.nav.scrolled .burger{color:var(--ivory)}
.burger{display:none; width:44px; height:44px; border-radius:12px; align-items:center; justify-content:center; color:var(--navy)}
.burger svg{width:24px; height:24px}
@media (max-width:1020px){ .menu,.nav-cta{display:none} .burger{display:inline-flex} }

/* drawer */
.mobile-drawer{position:fixed; inset:0 0 0 auto; width:min(86vw,360px); background:var(--ivory); z-index:300;
  transform:translateX(100%); transition:transform .5s var(--ease); box-shadow:var(--sh-lg);
  display:flex; flex-direction:column; padding:26px; overflow-y:auto}
.mobile-drawer.open{transform:translateX(0)}
.mobile-drawer .md-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px}
.mobile-drawer .md-top img{height:50px}
.mobile-drawer a.md-link{font-family:var(--serif); font-size:1.42rem; color:var(--navy); padding:.48em 0; border-bottom:1px solid var(--line)}
.mobile-drawer .btn{margin-top:24px}
.md-mail{margin-top:16px; font-size:.92rem; font-weight:700; color:var(--ink-soft); text-align:center; overflow-wrap:anywhere}
.scrim{position:fixed; inset:0; background:rgba(22,32,43,.5); z-index:290; opacity:0; visibility:hidden; transition:.4s; backdrop-filter:blur(2px)}
.scrim.open{opacity:1; visibility:visible}

/* ---------- reveals (proven pattern; JS failsafe reveals everything) ---------- */
.js .reveal{opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.js .reveal.in{opacity:1; transform:none}
.js .reveal-l{opacity:0; transform:translateX(-36px); transition:opacity .9s var(--ease), transform 1s var(--ease)}
.js .reveal-r{opacity:0; transform:translateX(36px); transition:opacity .9s var(--ease), transform 1s var(--ease)}
.js .reveal-l.in,.js .reveal-r.in{opacity:1; transform:none}
.js .reveal-scale{opacity:0; transform:scale(.94); transition:opacity .9s var(--ease), transform 1.1s var(--ease)}
.js .reveal-scale.in{opacity:1; transform:none}
[data-d]{transition-delay:calc(var(--d,0)*1ms)}
.js .img-reveal{clip-path:inset(0 0 100% 0); transition:clip-path 1.15s var(--ease)}
.js .img-reveal.in{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal-l,.js .reveal-r,.js .reveal-scale,.js .img-reveal{opacity:1!important; transform:none!important; clip-path:none!important; transition:none}
  .js .reveal .eyebrow::before,.js .reveal .eyebrow::after{width:34px!important; transition:none}
}

/* ken burns */
@keyframes kenburns{from{transform:scale(1.04)}to{transform:scale(1.15)}}
.kenburns{animation:kenburns 26s ease-out both}
@media (prefers-reduced-motion:reduce){.kenburns{animation:none}}

/* soft grain texture for navy bands */
.grain{position:relative}
.grain::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.grain>*{position:relative; z-index:2}

/* ---------- full-bleed video hero ---------- */
.vhero{position:relative; min-height:min(92svh,860px); display:flex; align-items:center; justify-content:center;
  overflow:hidden; text-align:center; color:var(--ivory); isolation:isolate}
.vhero video,.vhero .v-fallback{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.vhero .v-overlay{position:absolute; inset:0; z-index:-1;
  background:radial-gradient(70% 55% at 50% 34%, rgba(22,32,43,.28), transparent 72%),
  linear-gradient(180deg, rgba(22,32,43,.72) 0%, rgba(22,32,43,.55) 40%, rgba(22,32,43,.62) 68%, rgba(22,32,43,.92) 100%)}
.vhero .v-inner{position:relative; z-index:1; width:100%; max-width:900px; padding:clamp(60px,8vw,110px) 24px clamp(74px,7vw,100px)}
.vhero .v-logo{height:clamp(96px,14vw,150px); width:auto; margin:0 auto 26px;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.85)) drop-shadow(0 2px 6px rgba(0,0,0,.9))}
.vhero .v-eyebrow{color:var(--gold-light); justify-content:center}
.vhero .v-eyebrow::before{background:var(--gold-light)}
.vhero .v-eyebrow::after{content:""; width:34px; height:1.5px; background:var(--gold-light)}
.vhero h1{color:#fff; font-size:clamp(2.6rem,7vw,5rem); line-height:1.02; margin-top:20px; text-shadow:0 4px 30px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.6)}
.vhero h1 .serif-i{color:var(--gold-light)}
.vhero .v-sub{color:rgba(247,242,233,.94); font-size:clamp(1.02rem,1.7vw,1.26rem); line-height:1.62; margin:20px auto 0; max-width:58ch; text-shadow:0 2px 16px rgba(0,0,0,.85)}
.vhero .v-cred{margin-top:16px; font-weight:700; font-size:.9rem; letter-spacing:.04em; color:var(--gold-light); text-shadow:0 2px 12px rgba(0,0,0,.8)}
.vhero .v-cta{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:32px}
.v-scroll{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:1; color:rgba(247,242,233,.85)}
.v-scroll svg{width:26px; height:26px; animation:vbob 1.9s ease-in-out infinite}
@keyframes vbob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(8px);opacity:1}}
@media (prefers-reduced-motion:reduce){.v-scroll svg{animation:none}}

/* ---------- page hero (inner pages) ---------- */
.phero{position:relative; overflow:hidden; isolation:isolate; color:var(--ivory); text-align:center}
.phero .ph-bg{position:absolute; inset:-6% 0; width:100%; height:112%; object-fit:cover; z-index:-2; will-change:transform}
.phero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(22,32,43,.78), rgba(22,32,43,.62) 45%, rgba(22,32,43,.85))}
.phero .wrap{padding-block:clamp(64px,9vw,130px)}
.phero h1{color:#fff; text-shadow:0 4px 30px rgba(0,0,0,.6)}
.phero .eyebrow{color:var(--gold-light); justify-content:center}
.phero .eyebrow::before,.phero .eyebrow::after{background:var(--gold-light)}
.phero .lead{color:rgba(247,242,233,.92); margin-inline:auto; text-shadow:0 2px 14px rgba(0,0,0,.7)}

/* ---------- press marquee ---------- */
.press-band{background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block:26px; overflow:hidden}
.press-band .pb-label{display:block; text-align:center; font-size:.72rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:18px}
.marquee{overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex; align-items:center; width:max-content; animation:mq 34s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-track a{display:flex; align-items:center; flex-shrink:0; margin-right:clamp(52px,8vw,110px);
  opacity:.85; transition:opacity .3s, transform .4s var(--ease)}
.mq-track a:hover{opacity:1; transform:translateY(-2px)}
.mq-track img{height:clamp(30px,4vw,44px); width:auto}
.mq-track a.tall img{height:clamp(38px,5vw,56px)}
.mq-track a.stack img{height:clamp(50px,6.5vw,72px)}
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none; width:auto; flex-wrap:wrap; justify-content:center}
  .mq-track .mq-dup{display:none}
  .marquee{-webkit-mask-image:none; mask-image:none}
}

/* ---------- numbered gold hairline rows ---------- */
.nrows{margin-top:14px}
.nrow{display:grid; grid-template-columns:72px 1fr; gap:clamp(16px,3vw,40px); align-items:baseline;
  padding:clamp(20px,3vw,30px) 4px; border-top:1px solid var(--line-gold)}
.nrows .nrow:last-child{border-bottom:1px solid var(--line-gold)}
.nrow .rn{font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,2.4vw,1.8rem); color:var(--gold-deep); line-height:1}
.nrow h3,.nrow h4{font-size:clamp(1.18rem,2.2vw,1.5rem); margin-bottom:8px}
.nrow p{color:var(--ink-soft); max-width:64ch}
.nrow.tight{align-items:center}
@media (max-width:640px){ .nrow{grid-template-columns:44px 1fr} }

/* ---------- expandable editorial rows (details) ---------- */
.xrows{border-top:1px solid var(--line-gold)}
.xrow{border-bottom:1px solid var(--line-gold)}
.xrow summary{display:grid; grid-template-columns:64px 1fr auto; gap:clamp(14px,3vw,34px); align-items:center;
  padding:clamp(18px,3vw,28px) 4px; transition:background .3s}
.xrow summary:hover{background:rgba(201,162,75,.05)}
.xrow .rn{font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem,2.2vw,1.65rem); color:var(--gold-deep); line-height:1}
.xrow .xt h3{font-size:clamp(1.16rem,2.2vw,1.5rem)}
.xrow .xt .xs{display:block; font-size:.82rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); margin-top:5px}
.xrow .xi{width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line-gold); display:grid; place-items:center;
  color:var(--gold-deep); transition:transform .45s var(--ease), background .3s, color .3s; flex-shrink:0}
.xrow .xi svg{width:16px; height:16px}
.xrow[open] .xi{transform:rotate(45deg); background:var(--gold); color:var(--navy-deep); border-color:var(--gold)}
.xrow .xbody{padding:2px 4px clamp(22px,3vw,30px) calc(64px + clamp(14px,3vw,34px))}
.xrow .xbody p{color:var(--ink-soft); max-width:66ch}
.xrow .xbody p+p{margin-top:12px}
.xrow .xbody ul{margin-top:12px; display:grid; gap:9px; max-width:66ch}
.xrow .xbody ul li{position:relative; padding-left:24px; color:var(--ink-soft)}
.xrow .xbody ul li::before{content:""; position:absolute; left:2px; top:.68em; width:12px; height:1.5px; background:var(--gold)}
.xrow .xbody .note{margin-top:16px; font-size:.88rem; font-style:italic; color:var(--ink-mute)}
.xrow .xbody .btn{margin-top:18px}
@media (max-width:640px){
  .xrow summary{grid-template-columns:1fr auto; gap:12px}
  .xrow .rn{display:none}
  .xrow .xbody{padding-left:4px}
  .xrow .xi{width:34px; height:34px}
}

/* dark variant (on navy) */
.xrows.on-dark,.xrows.on-dark .xrow{border-color:rgba(201,162,75,.35)}
.xrows.on-dark .xrow summary:hover{background:rgba(247,242,233,.04)}
.xrows.on-dark .xt h3{color:#fff}
.xrows.on-dark .xt .xs{color:rgba(247,242,233,.6)}
.xrows.on-dark .xbody p,.xrows.on-dark .xbody ul li{color:rgba(247,242,233,.82)}
.xrows.on-dark .rn{color:var(--gold-light)}
.xrows.on-dark .xi{color:var(--gold-light)}

/* ---------- full-bleed image band with scrim ---------- */
.band{position:relative; isolation:isolate; color:var(--ivory); overflow:hidden}
.band>.band-bg{position:absolute; inset:-6% 0; width:100%; height:112%; object-fit:cover; z-index:-2; will-change:transform}
.band::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(22,32,43,.72),rgba(22,32,43,.82))}
.band h2,.band h3{color:#fff}
.band p{color:rgba(247,242,233,.88)}
.band .eyebrow{color:var(--gold-light)}
.band .eyebrow::before,.band .eyebrow::after{background:var(--gold-light)}

/* ---------- navy editorial band ---------- */
.navy-band{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%); color:var(--ivory)}
.navy-band h2,.navy-band h3,.navy-band h4{color:#fff}
.navy-band p{color:rgba(247,242,233,.86)}
.navy-band .eyebrow{color:var(--gold-light)}
.navy-band .eyebrow::before,.navy-band .eyebrow::after{background:var(--gold-light)}

/* ---------- two-path full-bleed split ---------- */
.paths2{display:grid; grid-template-columns:1fr 1fr; min-height:520px}
.path2{position:relative; overflow:hidden; display:flex; align-items:flex-end; isolation:isolate; min-height:440px}
.path2 img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.3s var(--ease)}
.path2:hover img{transform:scale(1.05)}
.path2::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(22,32,43,.05) 20%, rgba(22,32,43,.55) 60%, rgba(22,32,43,.93) 100%); transition:background .5s}
.path2 .p-body{padding:clamp(28px,4vw,52px); color:var(--ivory); width:100%}
.path2 .eyebrow{color:var(--gold-light)}
.path2 .eyebrow::before{background:var(--gold-light)}
.path2 h3{color:#fff; font-size:clamp(1.7rem,3vw,2.4rem); margin:12px 0 4px}
.path2 .p-sub{font-family:var(--serif); font-style:italic; color:var(--gold-light); font-size:1.05rem}
.path2 p.p-txt{color:rgba(247,242,233,.88); font-size:.98rem; max-width:46ch; margin-top:10px}
.path2 .link-gold{color:var(--gold-light); margin-top:16px}
@media (max-width:880px){ .paths2{grid-template-columns:1fr} .path2{min-height:380px} }

/* ---------- split (image + copy) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center}
.split.rev .split-media{order:2}
.split-media{position:relative; overflow:hidden}
.split-media img{width:100%; height:100%; object-fit:cover}
@media (max-width:880px){ .split{grid-template-columns:1fr} .split.rev .split-media{order:0} }

/* arch / oval image mask */
.arch{border-radius:999px 999px var(--r-lg) var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg)}
.arch img{width:100%; height:100%; object-fit:cover}
.arch-ring{position:relative}
.arch-ring::before{content:""; position:absolute; inset:-16px; border:1.5px solid var(--line-gold);
  border-radius:999px 999px calc(var(--r-lg) + 12px) calc(var(--r-lg) + 12px); pointer-events:none}

/* ---------- alternating editorial service bands ---------- */
.altband{display:grid; grid-template-columns:1fr 1fr; align-items:stretch; border-top:1px solid var(--line-gold)}
.altband .ab-media{position:relative; overflow:hidden; min-height:340px}
.altband .ab-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease)}
.altband:hover .ab-media img{transform:scale(1.04)}
.altband .ab-copy{padding:clamp(30px,4.5vw,64px); display:flex; flex-direction:column; justify-content:center}
.altband.rev .ab-media{order:2}
.altband .rn{font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--gold-deep)}
.altband h3{font-size:clamp(1.4rem,2.6vw,2rem); margin-top:10px}
.altband p{color:var(--ink-soft); margin-top:12px; max-width:52ch}
@media (max-width:880px){
  .altband{grid-template-columns:1fr}
  .altband.rev .ab-media{order:0}
  .altband .ab-media{min-height:0; min-width:0; aspect-ratio:16/9}
}

/* ---------- pull quotes (testimonials) ---------- */
.pull{max-width:820px; margin-inline:auto; text-align:center; padding-block:clamp(18px,3vw,30px)}
.pull .q-mark{font-family:var(--serif); font-size:4rem; line-height:.6; color:var(--gold-light); display:block; margin-bottom:18px}
.pull blockquote{font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(1.15rem,2.2vw,1.55rem); line-height:1.55; color:#fff}
.pull .attr{display:inline-flex; align-items:center; gap:14px; margin-top:22px; font-size:.82rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-light)}
.pull .attr::before,.pull .attr::after{content:""; width:30px; height:1.5px; background:var(--gold-light); opacity:.6}
.pull-divider{width:min(220px,40%); height:1px; margin:clamp(20px,4vw,40px) auto; background:linear-gradient(90deg,transparent,rgba(201,162,75,.7),transparent)}

/* light version */
.pull.on-light blockquote{color:var(--navy)}
.pull.on-light .attr{color:var(--gold-deep)}
.pull.on-light .q-mark{color:var(--gold)}

/* ---------- book / download band ---------- */
.reset-band{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(26px,5vw,72px); align-items:center}
.reset-cover{justify-self:center; width:min(320px,74vw); border-radius:var(--r); overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.55); transform:rotate(-2deg); transition:transform .6s var(--ease)}
.reset-band:hover .reset-cover{transform:rotate(0deg)}
@media (max-width:880px){ .reset-band{grid-template-columns:1fr; text-align:center}
  .reset-band .eyebrow{justify-content:center} .reset-band .btn{margin-inline:auto} }

/* ---------- blog ---------- */
.blog-rows{display:grid}
.brow{display:grid; grid-template-columns:minmax(200px,300px) 1fr; gap:clamp(20px,3.5vw,44px); align-items:center;
  padding-block:clamp(24px,3.5vw,38px); border-top:1px solid var(--line-gold)}
.blog-rows .brow:last-child{border-bottom:1px solid var(--line-gold)}
.brow .b-img{border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/10; box-shadow:var(--sh-sm)}
.brow .b-img img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.brow:hover .b-img img{transform:scale(1.06)}
.brow .b-date{font-size:.78rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep)}
.brow h3{font-size:clamp(1.25rem,2.4vw,1.75rem); margin-top:8px; transition:color .3s}
.brow:hover h3{color:var(--gold-deep)}
.brow p{color:var(--ink-soft); margin-top:10px; max-width:66ch; font-size:.98rem}
.brow .link-gold{margin-top:14px}
@media (max-width:640px){ .brow{grid-template-columns:1fr} .brow .b-img{aspect-ratio:16/9} }

/* article */
.art-hero{position:relative; isolation:isolate; color:#fff; overflow:hidden}
.art-hero .ah-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.art-hero::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(22,32,43,.72),rgba(22,32,43,.88))}
.art-hero .wrap{max-width:880px; padding-block:clamp(64px,9vw,120px); text-align:center}
.art-hero h1{color:#fff; font-size:clamp(1.9rem,4.4vw,3.2rem); text-shadow:0 4px 30px rgba(0,0,0,.6)}
.art-hero .b-date{color:var(--gold-light); font-size:.8rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase}
.article{max-width:760px; margin-inline:auto}
.article p{margin-bottom:1.2em}
.article h2{font-size:clamp(1.5rem,2.8vw,2rem); margin:1.6em 0 .65em}
.article h3{font-size:clamp(1.25rem,2.3vw,1.6rem); margin:1.5em 0 .6em}
.article ul,.article ol{margin:0 0 1.3em; display:grid; gap:10px}
.article ul li{position:relative; padding-left:26px}
.article ul li::before{content:""; position:absolute; left:2px; top:.7em; width:13px; height:1.5px; background:var(--gold)}
.article ol{list-style:none; counter-reset:oli}
.article ol li{position:relative; padding-left:34px; counter-increment:oli}
.article ol li::before{content:counter(oli) "."; position:absolute; left:2px; top:0; font-family:var(--serif); font-style:italic; color:var(--gold-deep); font-weight:600}
.article a{color:var(--gold-deep); font-weight:700; border-bottom:1px solid var(--line-gold); transition:border-color .3s}
.article a:hover{border-color:var(--gold-deep)}
.article img{border-radius:var(--r-lg); margin:1.6em auto; box-shadow:var(--sh-md)}
.article blockquote{border-left:2px solid var(--gold); padding:6px 0 6px 22px; margin:1.5em 0;
  font-family:var(--serif); font-style:italic; font-size:1.12rem; color:var(--navy)}
.author-box{max-width:760px; margin:clamp(36px,5vw,56px) auto 0; border-top:1px solid var(--line-gold); padding-top:26px;
  display:flex; gap:20px; align-items:center}
.author-box .a-img{width:76px; height:76px; border-radius:50%; overflow:hidden; flex-shrink:0; box-shadow:var(--sh-sm)}
.author-box .a-img img{width:100%; height:100%; object-fit:cover}
.author-box b{font-family:var(--serif); font-weight:600; font-size:1.06rem; color:var(--navy); display:block}
.author-box p{font-size:.9rem; color:var(--ink-soft); margin-top:4px}
.related{max-width:760px; margin:clamp(36px,5vw,56px) auto 0}
.related h2{font-size:1.5rem; margin-bottom:6px}
.rel-row{display:grid; grid-template-columns:110px 1fr; gap:18px; align-items:center; padding-block:18px; border-top:1px solid var(--line)}
.rel-row:last-child{border-bottom:1px solid var(--line)}
.rel-row .b-img{border-radius:var(--r); overflow:hidden; aspect-ratio:16/11}
.rel-row .b-img img{width:100%; height:100%; object-fit:cover}
.rel-row h3{font-size:1.06rem; transition:color .3s}
.rel-row:hover h3{color:var(--gold-deep)}
.back-blog{display:inline-flex; align-items:center; gap:.5em; font-weight:800; color:var(--gold-deep); font-size:.9rem;
  letter-spacing:.06em; text-transform:uppercase}
.back-blog svg{width:1em; height:1em}

/* ---------- essentials ---------- */
.ess-cat{border-top:1px solid var(--line-gold); padding-block:clamp(40px,6vw,72px)}
.ess-head{max-width:720px; margin-bottom:clamp(26px,4vw,44px)}
.ess-prod{display:grid; grid-template-columns:minmax(240px,420px) 1fr; gap:clamp(24px,4.5vw,64px); align-items:center}
.ess-prod.rev{grid-template-columns:1fr minmax(240px,420px)}
.ess-prod.rev .ep-media{order:2}
.ep-media{border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-md); background:#fff}
.ep-media img{width:100%; height:auto}
.ep-copy .xs{display:block; font-size:.76rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:8px}
.ep-copy h3{font-size:clamp(1.35rem,2.5vw,1.9rem)}
.ep-copy p{color:var(--ink-soft); margin-top:12px; max-width:56ch}
.ep-copy .btn{margin-top:20px}
.disclosure{font-size:.88rem; font-style:italic; color:var(--ink-mute); border-left:2px solid var(--gold); padding-left:16px; max-width:64ch}
@media (max-width:880px){ .ess-prod,.ess-prod.rev{grid-template-columns:1fr} .ess-prod.rev .ep-media{order:0}
  .ep-media{max-width:420px} }

/* ---------- how-it-works vertical path ---------- */
.vpath{position:relative; max-width:620px; margin-inline:auto; padding-left:34px}
.vpath::before{content:""; position:absolute; left:9px; top:12px; bottom:12px; width:1.5px;
  background:linear-gradient(180deg,var(--gold),rgba(201,162,75,.15))}
.vstep{position:relative; padding-block:16px}
.vstep::before{content:""; position:absolute; left:-31px; top:26px; width:11px; height:11px; border-radius:50%;
  background:var(--ivory); border:2px solid var(--gold)}
.vstep h3{font-size:clamp(1.15rem,2vw,1.45rem)}
.vstep .rn{font-family:var(--serif); font-style:italic; color:var(--gold-deep); font-size:1rem; display:block; margin-bottom:4px}
.navy-band .vstep::before{background:var(--navy-deep)}
.navy-band .vpath::before{background:linear-gradient(180deg,var(--gold-light),rgba(201,162,75,.2))}

/* ---------- 8 dimensions (two-col numbered index / accordion) ---------- */
.dim-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(36px,6vw,84px)}
@media (max-width:880px){ .dim-grid{grid-template-columns:1fr} }

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line-gold)}
.faq details{border-bottom:1px solid var(--line-gold)}
.faq summary{display:flex; justify-content:space-between; align-items:center; gap:18px; padding:22px 4px;
  font-family:var(--serif); font-weight:600; font-size:clamp(1.08rem,2vw,1.3rem); color:var(--navy)}
.faq summary .xi{width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line-gold); display:grid; place-items:center;
  color:var(--gold-deep); transition:transform .45s var(--ease), background .3s, color .3s; flex-shrink:0}
.faq summary .xi svg{width:15px; height:15px}
.faq details[open] summary .xi{transform:rotate(45deg); background:var(--gold); color:var(--navy-deep); border-color:var(--gold)}
.faq .fbody{padding:0 4px 22px; color:var(--ink-soft); max-width:66ch}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:start}
@media (max-width:880px){ .contact-grid{grid-template-columns:1fr} }
.field{display:block; margin-bottom:16px}
.field label{display:block; font-weight:700; font-size:.84rem; color:var(--navy); margin-bottom:7px}
.field input,.field textarea{width:100%; padding:.92em 1.1em; border-radius:12px; border:1px solid var(--line);
  background:var(--white); font-family:inherit; font-size:1rem; color:var(--ink); transition:border-color .3s, box-shadow .3s}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,75,.15)}
.field textarea{resize:vertical; min-height:130px}
.cform{background:#fff; border-radius:var(--r-xl); padding:clamp(24px,3.5vw,36px); box-shadow:var(--sh-md); border:1px solid rgba(30,42,56,.05)}
.c-list{margin-top:10px}
.c-list .c-item{padding:20px 4px; border-top:1px solid var(--line-gold)}
.c-list .c-item:last-child{border-bottom:1px solid var(--line-gold)}
.c-list .c-item b{display:block; font-size:.76rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:5px}
.c-list .c-item a{font-family:var(--serif); font-size:clamp(1.1rem,2.2vw,1.45rem); color:var(--navy); transition:color .3s; overflow-wrap:anywhere}
.c-list .c-item a:hover{color:var(--gold-deep)}
.c-list .c-item span{font-family:var(--serif); font-size:clamp(1.05rem,2vw,1.3rem); color:var(--navy)}
.form-note[hidden]{display:none}

/* ---------- CTA band ---------- */
.cta-band{position:relative; overflow:hidden; color:var(--ivory); text-align:center; isolation:isolate}
.cta-band img.bg{position:absolute; inset:-6% 0; width:100%; height:112%; object-fit:cover; z-index:-2; will-change:transform}
.cta-band::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(22,32,43,.74),rgba(22,32,43,.87))}
.cta-band h2{color:#fff} .cta-band p{color:rgba(247,242,233,.9)}
.cta-band .eyebrow{color:var(--gold-light); justify-content:center}
.cta-band .eyebrow::before,.cta-band .eyebrow::after{background:var(--gold-light)}
.cta-actions{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:30px}

/* ---------- footer ---------- */
.footer{background:var(--navy-deep); color:rgba(247,242,233,.66); padding-block:clamp(48px,6vw,72px) 26px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px}
.footer h4{color:var(--ivory); font-family:var(--sans); font-weight:800; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:16px}
.footer a{transition:color .25s} .footer a:hover{color:var(--gold-light)}
.footer .f-brand img{height:60px; margin-bottom:14px}
.footer .f-cred{font-size:.9rem; color:var(--gold-light); font-weight:700; margin-bottom:10px}
.footer .f-brand p{font-size:.92rem; max-width:36ch}
.footer ul li{margin-bottom:9px; font-size:.94rem}
.footer .f-ig{display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-weight:700; color:var(--ivory)}
.footer .f-ig svg{width:17px; height:17px}
.footer-bottom{margin-top:40px; padding-top:20px; border-top:1px solid rgba(247,242,233,.12);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.82rem}
@media (max-width:880px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr} }

/* ---------- mobile sticky bar: Book + Email (no phone) ---------- */
.mbar{position:fixed; left:0; right:0; bottom:0; z-index:180; display:none; background:var(--navy);
  box-shadow:0 -8px 30px rgba(0,0,0,.25); padding-bottom:env(safe-area-inset-bottom)}
.mbar a{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:15px 8px; color:var(--ivory); font-weight:800; font-size:.92rem}
.mbar a.book{background:linear-gradient(135deg,var(--gold-light),var(--gold-deep)); color:var(--navy-deep)}
.mbar svg{width:18px; height:18px}
@media (max-width:760px){ .mbar{display:flex} body{padding-bottom:56px} }

/* ---------- misc responsive ---------- */
@media (max-width:640px){
  body{font-size:16px}
  .brand img{height:50px}
  .vhero{min-height:min(88svh,720px)}
  .vhero .v-logo{height:clamp(84px,24vw,110px)}
  .section{padding-block:clamp(48px,12vw,72px)}
}

/* ═══════════════════ CLIENT EDIT BRIEF (Aug 2026) ═══════════════════ */

/* --- NAV: navy bar always, so the logo stands out (client request) --- */
.nav{background:rgba(30,42,56,.97)!important; border-bottom:1px solid rgba(201,162,75,.22)!important}
.nav .brand .logo-dark{display:none}
.nav .brand .logo-light{display:inline-block}
.nav .menu a{color:var(--ivory)}
.nav .menu a:hover{color:var(--gold-light)}
.nav .burger{color:var(--ivory)}
.nav.scrolled{background:rgba(22,32,43,.99)!important; box-shadow:0 12px 40px -22px rgba(0,0,0,.65)}

/* --- MEET CANDICE band: photo + credentials --- */
.meet-band{background:var(--ivory)}
.meet-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,68px); align-items:center}
@media (max-width:900px){ .meet-grid{grid-template-columns:1fr; gap:28px} }
.meet-photo{position:relative; border-radius:18px; overflow:hidden; box-shadow:var(--sh-lg); max-width:430px}
.meet-photo img{width:100%; height:auto; display:block; aspect-ratio:4/4.6; object-fit:cover; object-position:50% 22%}
.meet-photo::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(201,162,75,.35); border-radius:18px; pointer-events:none}
.meet-copy .meet-cred{font-family:var(--serif); font-size:clamp(1rem,1.5vw,1.18rem); color:var(--navy-soft); margin-top:8px; line-height:1.5}
.meet-copy .meet-cred:first-of-type{margin-top:14px; color:var(--gold-deep); font-weight:600}

/* --- SPECIALTIES banner (key to her business) --- */
.spec-band{background:var(--navy); padding:20px 0; border-top:1px solid rgba(201,162,75,.3); border-bottom:1px solid rgba(201,162,75,.3)}
.spec-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 20px; text-align:center}
.spec-item{font-family:var(--serif); font-size:clamp(.92rem,1.25vw,1.06rem); color:var(--ivory); letter-spacing:.01em}
.spec-dot{width:6px; height:6px; border-radius:50%; background:var(--gold); flex:0 0 auto}
.spec-item:last-child~.spec-dot,.spec-row .spec-dot:last-child{display:none}
@media (max-width:760px){ .spec-dot{display:none} .spec-row{gap:8px 0; flex-direction:column} }

/* --- WELLNESS ESSENTIALS cta --- */
.ess-band{background:linear-gradient(180deg,var(--ivory),#F3EDE2)}
.ess-band .ess-check{font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,2vw,1.5rem); color:var(--gold-deep); margin-top:14px}

/* --- branch-shadow banner: subtle drifting shadow (replaces the wheat) --- */
.branch-drift{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  animation:branchDrift 26s ease-in-out infinite alternate; transform-origin:60% 40%; will-change:transform}
@keyframes branchDrift{
  from{transform:scale(1.06) translate3d(0,0,0) rotate(0deg)}
  to  {transform:scale(1.11) translate3d(-1.4%,-1%,0) rotate(.6deg)}
}
@media (prefers-reduced-motion:reduce){ .branch-drift{animation:none; transform:scale(1.06)} }

/* --- ABOUT intro arch: eucalyptus cross-fades INTO her portrait so the page opens warm --- */
.arch-fade{position:relative}
.arch-fade img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.arch-fade .af-euc{opacity:1; animation:archEuc 1.4s ease-out forwards; will-change:opacity}
.arch-fade .af-me{opacity:0; animation:archMe 1.4s ease-out forwards; will-change:opacity}
@keyframes archEuc{ 0%{opacity:1} 100%{opacity:0} }
@keyframes archMe { 0%{opacity:0} 100%{opacity:1} }
@media (prefers-reduced-motion:reduce){ .arch-fade .af-euc{animation:none;opacity:0} .arch-fade .af-me{animation:none;opacity:1} }

/* ═══════════ NEW LANDING HERO (replaces the wheat video) ═══════════ */
.hero2{position:relative; overflow:hidden; background:var(--ivory);
  padding:clamp(96px,12vh,150px) 0 clamp(64px,9vh,110px)}
/* soft brand-tinted wash + a warm bloom behind the photo */
.hero2 .h2-bg{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(52% 62% at 78% 34%, rgba(201,162,75,.20), transparent 70%),
    radial-gradient(46% 56% at 8% 82%, rgba(30,42,56,.10), transparent 72%),
    linear-gradient(180deg,#FBF7F0 0%, var(--ivory) 46%, #F3EDE2 100%)}
.hero2 .wrap{position:relative; z-index:2}
.h2-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,5vw,74px); align-items:center}
@media (max-width:940px){ .h2-grid{grid-template-columns:1fr; gap:38px} }

.h2-eyebrow{color:var(--gold-deep)}
.h2-title{font-family:var(--serif); font-weight:600; color:var(--navy);
  font-size:clamp(2.7rem,6.4vw,5rem); line-height:1.02; letter-spacing:-.015em; margin-top:18px}
.h2-title em{font-style:italic; color:var(--gold-deep); position:relative; white-space:nowrap}
/* hand-drawn gold underline under "yourself" */
.h2-title em::after{content:""; position:absolute; left:2%; right:2%; bottom:.04em; height:.14em;
  background:linear-gradient(90deg,transparent,rgba(201,162,75,.55) 12%,rgba(201,162,75,.55) 88%,transparent);
  border-radius:99px}
.h2-sub{margin-top:20px; max-width:52ch; font-size:clamp(1.02rem,1.5vw,1.16rem); line-height:1.7; color:var(--navy-soft)}
.h2-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.h2-trust{display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:32px; padding-top:22px; border-top:1px solid var(--line-gold)}
.h2-trust span{font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--navy-soft);
  background:rgba(201,162,75,.10); border:1px solid rgba(201,162,75,.28); border-radius:99px; padding:.5em 1em}

/* the photo: arched, ringed, gently floating */
.h2-figure{position:relative; justify-self:center; width:min(100%,470px)}
.h2-photo{position:relative; border-radius:230px 230px 26px 26px; overflow:hidden;
  box-shadow:0 42px 90px -46px rgba(22,32,43,.62); animation:h2Float 9s ease-in-out infinite}
.h2-photo img{display:block; width:100%; height:auto; aspect-ratio:1/1.42; object-fit:cover; object-position:50% 12%}
.h2-photo::after{content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.45); pointer-events:none}
@keyframes h2Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){ .h2-photo{animation:none} }
/* floating credential card */
.h2-card{position:absolute; left:-14px; bottom:-18px; z-index:3; max-width:290px;
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border:1px solid rgba(201,162,75,.34); border-radius:16px; padding:16px 18px;
  box-shadow:0 26px 60px -34px rgba(22,32,43,.6)}
.h2-card strong{display:block; font-family:var(--serif); font-size:1.16rem; color:var(--navy)}
.h2-card span{display:block; font-size:.79rem; line-height:1.5; color:var(--navy-soft); margin-top:5px}
.h2-card span:first-of-type{color:var(--gold-deep); font-weight:700}
@media (max-width:940px){ .h2-card{left:50%; transform:translateX(-50%); bottom:-26px; text-align:center} .h2-figure{margin-bottom:34px} }
@media (max-width:420px){ .h2-card{max-width:86%} }
/* subtle gold ring accent behind the photo */
.h2-leaf{position:absolute; right:-40px; top:-34px; width:190px; height:190px; z-index:-1;
  border-radius:50%; border:1px solid rgba(201,162,75,.4)}
.h2-scroll{position:absolute; left:50%; bottom:18px; transform:translateX(-50%); color:var(--navy-soft)}
/* hero polish: keep the credential card ON the photo, tidy the eyebrow */
.h2-eyebrow{max-width:34ch; line-height:1.5}
.h2-card{left:8%; right:8%; max-width:none; bottom:-14px; text-align:left}
@media (min-width:941px){ .h2-card{left:6%; right:10%} }
@media (max-width:940px){ .h2-card{left:6%; right:6%; transform:none} }
/* eyebrow: let it run wide on one/two lines instead of a narrow 4-line column */
.h2-eyebrow{max-width:none; width:100%; flex-wrap:wrap}

/* ── For Individuals: Biocanic band background + packages photo ── */
.bio-band{position:relative; overflow:hidden}
.bio-band .bio-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.16; z-index:0;
  animation:branchDrift 30s ease-in-out infinite alternate}
.bio-band > .wrap, .bio-band > div{position:relative; z-index:1}
@media (prefers-reduced-motion:reduce){ .bio-band .bio-bg{animation:none} }
.pkg-photo{margin:26px auto 0; max-width:520px; border-radius:18px; overflow:hidden;
  box-shadow:0 30px 70px -40px rgba(22,32,43,.55)}
.pkg-photo img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:44% 14%}
.pkg-photo::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(201,162,75,.35); border-radius:18px; pointer-events:none}
/* For Individuals page hero: her own 16:9 photo, framed so the headline sits over open space */
.phero .ph-bg[src*="candice-individuals-hero"]{object-position:50% 40%}
@media (max-width:760px){ .phero .ph-bg[src*="candice-individuals-hero"]{object-position:50% 30%} }

/* ── SPECIALTY CARDS (client-requested, mirrors old-site 4-card band) ── */
.spec-cards{background:var(--navy); padding:clamp(48px,7vw,80px) 0}
.spec-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(201,162,75,.28);
  border:1px solid rgba(201,162,75,.28); border-radius:14px; overflow:hidden}
.spec-card{background:var(--navy); padding:clamp(26px,3vw,34px) clamp(20px,2.4vw,26px); text-align:center}
.spec-card h3{font-family:var(--serif); font-size:clamp(1.02rem,1.4vw,1.18rem); color:var(--ivory); line-height:1.28}
.spec-card p{margin-top:10px; font-size:.86rem; line-height:1.55; color:rgba(247,242,233,.72)}
@media (max-width:900px){ .spec-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .spec-grid{grid-template-columns:1fr} }