/* =====================================================================
   WHOLE HEALTH HYDRATION — Editorial design system
   One stylesheet for the whole site. Colors live in :root below, so a
   brand-color change is a one-file edit.
   ===================================================================== */

/* ---------- TOKENS ---------- */
:root{
  /* NEUTRAL MODERN palette (Meagan-approved brand guidelines), tuned July 2026
     so every text/ground pair clears WCAG AA. Same colour story, corrected tones:
       sage #545C4A   = section backgrounds (was #6D7567 — too light to carry
                        cream text; cream sat at 4.0:1 and faded body at 3.2:1)
       gold #8C6A2C   = buttons/accents (was #A0793D — cream labels were 3.7:1)
       ink  #836227   = the same gold for TEXT/links on light grounds (4.8:1)
       cream #F0ECE2  = ground · #DDD9CB = secondary text on sage (4.9:1)
       pale gold #E7D4A6 = accent TEXT on sage (4.8:1; plain gold was 1.9:1)
     Rule of thumb: never fade text with opacity — pick a token that passes. */
  --terracotta:#8C6A2C;   /* primary accent — antique gold. Deepened one step from
                             #A0793D so cream button labels clear AA (3.7 -> 4.7). */
  --terracotta-ink:#836227;/* the SAME gold for text/links on light grounds (4.8 on cream).
                             #A0793D as text was only 3.4 and failed AA. */
  --sage:#545C4A;         /* section bg — deepened so cream text hits WCAG AA (5.9:1) */
  --sage-deep:#454C3E;    /* deepest layer — footer / process bands */
  --cream:#F0ECE2;        /* page ground — soft warm greige */
  --cream-soft:#DDD9CB;   /* secondary text ON sage — 4.9:1, replaces opacity fades */
  --cream-warm:#E5DFD1;   /* raised warm — light taupe */
  --white:#FAF8F2;        /* raised surface — warm near-white */
  --black:#2A2922;        /* ink — warm espresso */
  --ink-soft:#5C5B51;     /* muted ink — warm taupe-grey */
  --line:rgba(42,41,34,.16);
  --line-soft:rgba(42,41,34,.09);
  --gold:#BFA05E;         /* decorative only (stars/rules) — fails as text on sage */
  --accent-sage:#E7D4A6;  /* pale gold — the accent for TEXT on sage (4.8:1) */

  /* ---- TYPE SYSTEM: Cormorant Garamond (display) + Inter (body) ---- */
  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;
  --font-weight-thin:300;
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-bold:600;
  --tracking-wide:0.15em;
  --tracking-wider:0.25em;
  --leading-tight:1.1;
  --leading-body:1.8;
  /* legacy aliases kept so existing var(--display)/var(--sans)/var(--serif) map to the new system */
  --display:var(--font-display);
  --serif:var(--font-display);
  --sans:var(--font-body);

  --edge:clamp(20px, 5vw, 84px);
  --maxw:1440px;
}

/* ---------- RESET / BASE ---------- */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:90px; -webkit-text-size-adjust:100%; overflow-x:hidden;}
html.lenis-on{scroll-behavior:auto;} /* Lenis owns scroll on desktop; native smooth only on the mobile/no-lenis fallback */
body{
  font-family:var(--font-body); color:#1C1C1C; background:var(--cream);
  font-weight:var(--font-weight-regular); font-size:17px; line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; max-width:100vw; position:relative;
}
img{max-width:100%; display:block;}
a{color:var(--terracotta-ink); text-decoration:none; transition:opacity .2s, color .2s;}
::selection{background:var(--terracotta); color:var(--white);}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--terracotta); outline-offset:3px; border-radius:2px;}
.skip-link{position:absolute; left:-9999px; top:0; z-index:300; background:var(--black); color:var(--cream); font-family:var(--font-body); font-size:13px; letter-spacing:.08em; padding:14px 22px;}
.skip-link:focus{left:12px; top:12px;}

h1,h2,h3,h4,h5{font-family:var(--font-display); font-weight:var(--font-weight-thin); line-height:var(--leading-tight); letter-spacing:-.02em; color:var(--black); text-wrap:balance;}
h3,h4,h5{font-weight:var(--font-weight-medium); line-height:1.18;}
h1 em,h2 em,h3 em{font-style:italic; font-weight:var(--font-weight-regular); color:var(--terracotta);}
p{color:#1C1C1C;}

.container{max-width:var(--maxw); margin:0 auto; padding-left:var(--edge); padding-right:var(--edge);}
section{position:relative; padding:clamp(70px,10vh,120px) 0;}

/* ---------- LABELS / EDITORIAL DETAIL ---------- */
.kicker,.eyebrow{
  font-family:var(--font-body); font-size:11px; font-weight:var(--font-weight-medium); letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:var(--sage); display:inline-flex; align-items:center; gap:12px;
}
.eyebrow{margin-bottom:16px;}
.kicker .idx{font-variant-numeric:tabular-nums; color:var(--ink-soft); font-weight:600;}
.section-idx{font-family:var(--font-body); font-size:11px; font-weight:var(--font-weight-medium); letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--sage); font-variant-numeric:tabular-nums;}

/* ---------- BUTTONS ---------- */
.btn{
  position:relative; overflow:hidden; z-index:0; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  font-family:var(--font-body); font-size:12px; font-weight:var(--font-weight-medium); letter-spacing:var(--tracking-wide); text-transform:uppercase;
  padding:17px 34px; border-radius:4px; border:1px solid var(--terracotta);
  background:var(--terracotta); color:var(--white); cursor:pointer;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, letter-spacing .4s, border-color .35s, color .35s; min-height:52px;
}
/* fill that sweeps across on hover */
.btn::after{content:''; position:absolute; inset:0; z-index:-1; background:var(--black); transform:scaleX(0); transform-origin:left center; transition:transform .5s cubic-bezier(.19,1,.22,1);}
.btn:hover{transform:translateY(-3px); box-shadow:0 18px 36px rgba(28,28,26,.22); letter-spacing:.17em; border-color:var(--black); color:var(--white);}
.btn:hover::after{transform:scaleX(1);}
.btn:active{transform:translateY(-1px);}
.btn-secondary,.btn-line{background:transparent; color:var(--black); border:1px solid var(--black);}
.btn-secondary:hover,.btn-line:hover{color:var(--cream); border-color:var(--black);}

/* ---------- NAV ---------- */
nav{position:sticky; top:0; z-index:100; background:transparent; border-bottom:1px solid var(--line-soft); padding:0;}
nav .inner{max-width:var(--maxw); margin:0 auto; padding:15px var(--edge); display:flex; justify-content:space-between; align-items:center;}
.logo{font-family:var(--display); color:var(--black); display:inline-flex; align-items:center;}
.logo-img{height:52px; width:auto; display:block;}
.nav-links{display:flex; gap:32px; align-items:center;}
.nav-links a{font-family:var(--font-body); font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:var(--font-weight-regular); color:var(--black); position:relative; padding:4px 0;}
.nav-links a:not(.btn)::after{content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--terracotta); transition:width .3s;}
.nav-links a:not(.btn):hover{opacity:1;}
.nav-links a:not(.btn):hover::after{width:100%;}
.nav-links a.btn{color:var(--white); padding:9px 19px; min-height:0; font-size:11px; letter-spacing:.1em;}
.nav-links a.btn:hover{color:var(--white);}

.hamburger{display:none; width:44px; height:44px; background:none; border:none; cursor:pointer; flex-direction:column; justify-content:center; gap:6px; align-items:flex-end; padding:0;}
.hamburger span{display:block; width:26px; height:1.5px; background:var(--black); transition:transform .3s, opacity .3s;}
.hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

.mobile-menu-backdrop{position:fixed; inset:0; background:rgba(28,28,26,.55); opacity:0; pointer-events:none; transition:opacity .35s; z-index:150;}
.mobile-menu-backdrop.open{opacity:1; pointer-events:auto;}
.mobile-menu{position:fixed; top:0; right:0; height:100%; width:min(88%,400px); background:var(--white); z-index:160; transform:translateX(100%); visibility:hidden; transition:transform .4s cubic-bezier(.4,0,.1,1), visibility 0s .4s; padding:20px 20px calc(30px + env(safe-area-inset-bottom)); overflow-y:auto; display:flex; flex-direction:column; box-shadow:-20px 0 60px rgba(28,28,26,.18);}
.mobile-menu.open{transform:translateX(0); visibility:visible; transition:transform .4s cubic-bezier(.4,0,.1,1), visibility 0s 0s;}
/* menu header: label + explicit close */
.mm-head{display:flex; align-items:center; justify-content:space-between; padding:6px 4px 18px; margin-bottom:8px; border-bottom:1px solid var(--line-soft);}
.mm-head .mm-label{font-family:var(--font-body); font-size:11px; font-weight:var(--font-weight-medium); letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--sage);}
.mm-close{width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:var(--cream); border:1px solid var(--line); border-radius:4px; cursor:pointer; color:var(--black); font-size:20px; line-height:1;}
/* each option = its own distinct tappable block */
.mobile-menu a{font-family:var(--font-display); font-size:1.3rem; font-weight:var(--font-weight-medium); color:var(--black); background:var(--cream); border:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); border-radius:4px; min-height:56px; padding:0 18px; margin-bottom:9px; display:flex; align-items:center; justify-content:space-between; letter-spacing:0; text-transform:none; -webkit-tap-highlight-color:rgba(160,121,61,.14);}
.mobile-menu a::after{content:'\2192'; font-family:var(--font-body); font-size:15px; color:var(--terracotta); opacity:.55;}
.mobile-menu a:hover,.mobile-menu a:active{opacity:1; color:var(--terracotta); background:var(--cream-warm); border-color:var(--line);}
.mobile-menu a i{font-size:19px; color:var(--terracotta); margin-right:12px;}
.mobile-menu .mobile-cta{display:flex; flex-direction:column; gap:10px; margin-top:18px;}
.mobile-menu .mobile-cta a{font-family:var(--font-body); font-size:12px; font-weight:var(--font-weight-medium); letter-spacing:var(--tracking-wide); text-transform:uppercase; text-align:center; background:var(--terracotta); color:var(--white); border:1px solid var(--terracotta); border-radius:4px; min-height:56px; padding:0 18px; margin-bottom:0; justify-content:center;}
.mobile-menu .mobile-cta a::after{content:none;}
.mobile-menu .mobile-cta a.outline{background:transparent; color:var(--black); border:1px solid var(--black);}

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress{position:fixed; top:0; left:0; width:0%; height:2px; background:var(--terracotta); z-index:200; transition:width .08s linear; pointer-events:none;}

/* ---------- BREADCRUMBS ---------- */
.breadcrumbs{font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:26px; color:var(--ink-soft);}
.breadcrumbs a{color:var(--ink-soft);}
.breadcrumbs a:hover{color:var(--terracotta);}
.breadcrumbs span{margin:0 10px; opacity:.5;}
.page-hero .breadcrumbs, .page-hero .breadcrumbs a{color:var(--cream-soft);}
.page-hero .breadcrumbs a:hover{color:#E7D4A6; opacity:1;}

/* ---------- PAGE HERO (interior masthead) ---------- */
.page-hero{padding:clamp(96px,14vh,168px) 0 clamp(64px,8vh,100px); background:var(--sage); color:var(--cream); border-bottom:none; position:relative; overflow:hidden;}
.page-hero .container{position:relative; z-index:2;}
.page-hero .eyebrow{margin-bottom:22px; color:var(--accent-sage);}
.page-hero .breadcrumbs{color:var(--cream-soft);}
.page-hero .breadcrumbs a{color:var(--cream-soft);}
.page-hero .breadcrumbs a:hover{color:var(--cream);}
.page-hero h1{font-size:clamp(2.7rem,6.2vw,5.2rem); font-weight:500; letter-spacing:-.03em; line-height:.97; max-width:17ch; color:var(--cream);}
.page-hero h1 em{color:#E7D4A6; font-style:italic; font-weight:var(--font-weight-regular);}
.page-hero p.lead{font-size:clamp(17px,1.5vw,20px); max-width:60ch; margin-top:28px; color:var(--cream-soft); font-weight:400;}
.page-hero::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:clamp(38px,5vw,66px); z-index:1; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 66' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C480,66 960,66 1440,0 L1440,66 L0,66 Z' fill='%23F0ECE2'/%3E%3C/svg%3E") no-repeat bottom center/100% 100%;}

/* ---------- SECTION HEAD ---------- */
.section-head{max-width:760px; margin:0 auto 60px; text-align:center;}
.section-head .eyebrow{margin-bottom:16px;}
.section-head h2{font-size:clamp(2rem,4.4vw,3.4rem); font-weight:300; letter-spacing:-.02em;}
.section-head.left{text-align:left; margin-left:0;}

/* ---------- SPLIT FEATURE ---------- */
.split-feature{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,90px); align-items:center;}
.split-feature .feature-image{aspect-ratio:5/6; background-size:cover; background-position:center; overflow:hidden;}
.split-feature h2{font-weight:300;}
.split-feature h3{font-weight:400;}

/* ---------- PROGRAM / FEATURE CARDS ---------- */
.program-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:56px; background:transparent; border-top:1px solid var(--line-soft); border-left:1px solid var(--line-soft);}
.program-card{background:var(--cream); padding:clamp(30px,3vw,44px) clamp(26px,2.4vw,38px); position:relative; transition:background .3s; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}
.program-card:hover{background:var(--white);}
.program-card .icon{width:34px; height:34px; color:var(--terracotta); margin-bottom:20px; display:block;}
.program-card .icon svg{width:100%; height:100%; stroke-width:1.25;}
.program-card .tag{font-family:var(--sans); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--terracotta-ink); font-weight:500; margin-bottom:14px; display:block;}
.program-card h3{font-size:1.5rem; margin-bottom:12px; line-height:1.14; font-weight:400;}
.program-card p{font-size:15.5px; color:var(--ink-soft);}
.program-card a.more{display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-family:var(--sans); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--black); padding-bottom:3px; font-weight:500; border-bottom:1px solid var(--terracotta); transition:gap .25s, color .2s;}
.program-card a.more svg{width:14px; height:14px; flex:0 0 auto; transition:transform .25s;}
.program-card a.more:hover{color:var(--terracotta); gap:13px;}
.program-card a.more:hover svg{transform:translateX(3px);}
.program-card.on-white{background:var(--white);}
.program-card.on-white:hover{background:var(--cream);}

/* photo-forward drip cards (menu) — negative margins match card padding so the image bleeds to the cell edge */
.program-card .drip-photo{margin:calc(-1 * clamp(30px,3vw,44px)) calc(-1 * clamp(26px,2.4vw,38px)) 26px; aspect-ratio:1/1; overflow:hidden; background:var(--cream-warm);}
.program-card .drip-photo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.program-card:hover .drip-photo img{transform:scale(1.045);}

/* on white sections the card grid inverts */
.on-white .program-grid, section[style*="--white"] .program-grid{background:transparent;}
.on-white .program-card, section[style*="--white"] .program-card{background:var(--white);}
.on-white .program-card{background:var(--white);}
.on-white .program-card:hover{background:var(--cream);}

/* ---------- CHECKLIST ---------- */
.checklist{list-style:none; margin-top:30px; display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; padding:0;}
.checklist li{position:relative; padding-left:30px; font-size:15.5px; color:var(--ink-soft); line-height:1.55;}
.checklist li::before{content:''; position:absolute; left:0; top:7px; width:18px; height:18px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A0793D' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 7'/></svg>"); background-repeat:no-repeat; background-size:contain;}

/* ---------- NOTE CARD ---------- */
.note-card{background:var(--cream-warm); padding:30px 34px; border-left:2px solid var(--sage); margin-top:40px; font-size:15px; line-height:1.65; color:var(--ink-soft);}

/* ---------- INGREDIENT GRID ---------- */
.ingredient-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:50px; background:var(--line-soft); border:1px solid var(--line-soft);}
.ingredient-card{background:var(--cream); padding:32px 30px;}
.ingredient-card h4{font-family:var(--display); font-size:1.4rem; margin-bottom:8px; font-weight:400;}
.ingredient-card .dose{font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--terracotta-ink); margin-bottom:14px; font-weight:500;}
.ingredient-card p{font-size:14.5px; color:var(--ink-soft);}

/* ---------- PRICING ---------- */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px;}
.pricing-card{background:var(--white); padding:44px 36px 38px; border:1px solid var(--line); text-align:left; display:flex; flex-direction:column; transition:transform .3s;}
.pricing-card:hover{transform:translateY(-4px);}
.pricing-card.featured{background:var(--black); color:var(--cream);}
.pricing-card.featured h3,.pricing-card.featured p{color:var(--cream);}
.pricing-card.featured ul li{color:var(--cream); border-color:rgba(236,233,225,.16);}
.pricing-card h3{font-size:1.6rem; margin-bottom:6px; font-weight:400;}
.pricing-card .price{font-family:var(--display); font-size:2.6rem; color:var(--terracotta-ink); font-weight:300; margin:12px 0 22px;}
.pricing-card .price span{font-family:var(--sans); font-size:14px; color:var(--ink-soft); font-weight:300; letter-spacing:.04em;}
.pricing-card.featured .price span{color:var(--cream-soft);}
.pricing-card ul{list-style:none; padding:0; margin:0 0 28px; flex:1;}
.pricing-card ul li{padding:11px 0; font-size:14.5px; color:var(--ink-soft); border-bottom:1px solid var(--line-soft); display:flex; gap:12px;}
.pricing-card ul li::before{content:''; width:15px; height:1px; background:var(--terracotta); margin-top:11px; flex:none;}

/* ---------- PARTNER TAGS ---------- */
.partner-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:36px; max-width:900px;}
.partner-tags span{background:var(--white); padding:12px 20px; font-family:var(--sans); font-size:13px; letter-spacing:.04em; border:1px solid var(--line); transition:border-color .2s, transform .2s;}
.partner-tags span:hover{border-color:var(--terracotta); transform:translateY(-2px);}

/* ---------- BLOG CARDS ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,30px); margin-top:56px;}
.blog-card{background:transparent; border:none; padding:0; display:flex; flex-direction:column; transition:transform .45s cubic-bezier(.2,.7,.2,1);}
.blog-card:hover{transform:translateY(-6px);}
.blog-card h3{transition:color .3s;}
.blog-card:hover h3{color:var(--terracotta);}
.blog-card .post-image{aspect-ratio:3/2; background-size:cover; background-position:center; background-color:var(--cream-warm); margin-bottom:22px; overflow:hidden;}
.blog-card .cat{font-family:var(--sans); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--terracotta-ink); font-weight:500; display:block; margin-bottom:12px;}
.blog-card h3{font-size:1.5rem; line-height:1.16; margin-bottom:12px; font-weight:400;}
.blog-card p{font-size:15px; color:var(--ink-soft); flex-grow:1;}
.blog-card .read-time{font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft); color:var(--ink-soft);}
.blog-card:hover .post-image{opacity:.92;}

/* ---------- BLOG POST (article) ---------- */
.blog-post{max-width:720px; margin:0 auto; padding:0 24px;}
.blog-post h2{font-size:clamp(1.9rem,3.6vw,2.7rem); margin-top:54px; margin-bottom:18px; font-weight:400;}
.blog-post h3{font-size:1.5rem; margin-top:38px; margin-bottom:14px; font-weight:400;}
.blog-post p{font-size:18px; line-height:1.75; margin-bottom:24px; color:var(--black);}
.blog-post ul,.blog-post ol{margin:22px 0; padding-left:24px;}
.blog-post li{font-size:17px; line-height:1.7; margin-bottom:10px; color:var(--ink-soft);}
.blog-post blockquote{border-left:2px solid var(--terracotta); padding:8px 28px; font-family:var(--display); font-style:italic; font-size:1.6rem; line-height:1.4; margin:34px 0; color:var(--black);}
.blog-post > p:first-of-type::first-letter{font-family:var(--display); font-size:4.8rem; font-weight:400; float:left; line-height:.82; margin:8px 14px 0 0; color:var(--terracotta);}
.post-meta{display:flex; gap:24px; font-family:var(--sans); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:28px 0 40px; align-items:center; flex-wrap:wrap;}

/* ---------- CONTACT FORM ---------- */
.contact-form{background:var(--white); padding:50px 44px; border:1px solid var(--line);}
.contact-form .field{margin-bottom:22px;}
.contact-form label{display:block; font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:8px; font-weight:500; color:var(--ink-soft);}
.contact-form input,.contact-form select,.contact-form textarea{width:100%; border:1px solid var(--line); background:var(--cream); padding:14px 16px; font-family:var(--sans); font-size:16px; color:var(--black); border-radius:0; transition:border-color .2s, background .2s;}
.contact-form textarea{resize:vertical; min-height:120px;}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none; border-color:var(--terracotta); background:var(--white);}
.contact-form .row2{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.contact-form button[type=submit]{margin-top:10px; width:100%;}

/* ---------- CTA STRIP (interior) ---------- */
.cta-strip{background:var(--sage); padding:clamp(80px,11vh,120px) 0; text-align:center; color:var(--cream);}
.cta-strip .eyebrow{color:#E7D4A6; justify-content:center;}
.cta-strip h2{color:var(--cream); font-size:clamp(2.2rem,5vw,3.8rem); font-weight:300; margin-bottom:22px;}
.cta-strip p{color:var(--cream-soft); max-width:60ch; margin:0 auto 36px;}
.cta-strip .btn{background:var(--terracotta); color:var(--white); border-color:var(--terracotta);}
.cta-strip .btn:hover{color:var(--white);}
.cta-strip .btn-secondary{background:transparent; color:var(--cream); border-color:var(--cream);}
.cta-strip .btn-secondary:hover{background:var(--cream); color:var(--black);}
.cta-strip .cta-buttons{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ---------- HOW IT WORKS + STEPS (interior, sage) ---------- */
.how-it-works{background:var(--sage); color:var(--cream); position:relative; overflow:hidden;}
.how-it-works .container{position:relative; z-index:2;}
.how-it-works h2,.how-it-works h3,.how-it-works h4,.how-it-works p{color:var(--cream);}
.how-it-works .eyebrow{color:var(--accent-sage);}
.how-it-works .section-head h2{color:var(--cream);}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:56px;}
.steps .step{padding:36px 32px 40px; border-top:1px solid rgba(236,233,225,.28); border-left:1px solid rgba(236,233,225,.16);}
.steps .step:first-child{border-left:none; padding-left:0;}
.step-num{font-family:var(--display); font-size:clamp(3rem,5vw,4.4rem); font-weight:300; color:var(--terracotta); line-height:1; margin-bottom:24px; display:block;}
.step h4{color:var(--cream); font-size:1.4rem; margin-bottom:12px; font-weight:400;}
.step p{color:var(--cream-soft); font-size:15px; max-width:34ch;}

/* =====================================================================
   HOMEPAGE editorial layout
   ===================================================================== */
/* ===== HERO — sage background, agency-grade ===== */
.hero{position:relative; background:var(--sage); color:var(--cream); overflow:hidden;}
.hero-inner{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.08fr .92fr; align-items:stretch; min-height:calc(100vh - 84px);}
.hero-text{padding:clamp(40px,7vh,120px) clamp(24px,4vw,74px) 84px var(--edge); display:flex; flex-direction:column; justify-content:center; max-width:800px; position:relative; z-index:3;}
.hero-eyebrow{margin-bottom:30px; color:var(--cream);}
.hero-eyebrow .idx{color:var(--accent-sage);}
.hero-title{font-family:var(--font-display); font-size:clamp(3.2rem,8vw,6.5rem); line-height:1.02; letter-spacing:-.02em; font-weight:var(--font-weight-regular); color:var(--cream);}
.hero-title em{color:#E7D4A6; font-style:italic; font-weight:var(--font-weight-regular);}
.hero-lead{font-size:clamp(16px,1.35vw,19px); line-height:1.62; color:var(--cream-soft); max-width:46ch; margin:32px 0 42px; font-weight:400;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.hero .btn-line{border-color:rgba(240,236,226,.5); color:var(--cream); background:transparent;}
.hero .btn-line:hover{background:var(--cream); color:var(--sage); border-color:var(--cream);}
.hero-media{position:relative; overflow:hidden; min-height:60vh;}
.hero-media::after{content:''; position:absolute; inset:0; box-shadow:inset 70px 0 100px -50px rgba(84,92,74,.6); pointer-events:none; z-index:1;}
.hero-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.05); animation:heroZoom 16s ease-out forwards;}
.hero-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
@keyframes heroZoom{to{transform:scale(1);}}
.hero-media .cap{position:absolute; left:26px; bottom:24px; z-index:2; font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-soft);}

/* ---- Text over the hero video (Webflow-style overlay) ---- */
.hm-overlay{position:absolute; inset:0; z-index:2; pointer-events:none;}
.hm-overlay::before{content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(28,30,24,.62), rgba(28,30,24,.12) 42%, transparent 60%);}
.hm-caption{position:absolute; left:clamp(20px,3vw,40px); right:clamp(20px,3vw,40px); bottom:clamp(22px,4vh,44px);}
.hm-eyebrow{display:block; font-family:var(--font-body); font-size:11px; font-weight:var(--font-weight-medium); letter-spacing:var(--tracking-wider); text-transform:uppercase; color:#E7D4A6; margin-bottom:10px;}
.hm-line{font-family:var(--font-display); font-size:clamp(1.7rem,3.4vw,2.7rem); font-weight:var(--font-weight-regular); line-height:1.14; color:var(--cream); max-width:18ch; margin:0;}
.hm-line em{font-style:italic; font-weight:var(--font-weight-regular); color:#E7D4A6;}
.hm-chip{position:absolute; display:inline-flex; align-items:center; gap:9px; background:rgba(250,248,242,.94); border:1px solid rgba(42,41,34,.14); border-radius:4px; padding:11px 15px; font-family:var(--font-body); font-size:12.5px; font-weight:var(--font-weight-medium); color:var(--black); box-shadow:0 14px 34px rgba(28,28,26,.18); animation:chipFloat 6s ease-in-out infinite alternate;}
.hm-chip i{font-size:17px; color:var(--terracotta);}
.hm-chip-1{top:9%; left:clamp(16px,2.6vw,34px);}
.hm-chip-2{top:21%; right:clamp(16px,2.6vw,34px); animation-delay:2.2s;}
@keyframes chipFloat{from{transform:translateY(0);}to{transform:translateY(-9px);}}
@media(prefers-reduced-motion:reduce){.hm-chip{animation:none;}}
@media(max-width:560px){
  .hm-chip{font-size:11.5px; padding:9px 12px; white-space:normal; max-width:72%; line-height:1.4;}
  .hm-chip-1{top:5%;}
  .hm-chip-2{top:24%;}
}
.hero-rule{max-width:var(--maxw); margin:0 auto; border-top:1px solid rgba(240,236,226,.16); display:grid; grid-template-columns:repeat(4,1fr); position:relative; z-index:3;}
.hero-rule span{padding:22px var(--edge); font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-soft); border-left:1px solid rgba(240,236,226,.1);}
.hero-rule span:first-child{border-left:none;}
.hero-rule span::before{content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--gold); margin-right:9px; vertical-align:middle;}
.hero-curve{line-height:0; position:relative; z-index:3;}
.hero-curve svg{display:block; width:100%; height:clamp(38px,5vw,72px);}
.hero-text > *{opacity:0; transform:translateY(24px); animation:heroIn 1s cubic-bezier(.2,.7,.2,1) forwards;}
.hero-text > *:nth-child(1){animation-delay:.12s;}
.hero-text > *:nth-child(2){animation-delay:.26s;}
.hero-text > *:nth-child(3){animation-delay:.40s;}
.hero-text > *:nth-child(4){animation-delay:.54s;}
@keyframes heroIn{to{opacity:1; transform:none;}}
@media(prefers-reduced-motion:reduce){.hero-text > *{opacity:1 !important; transform:none !important; animation:none !important;} .hero-media img{animation:none; transform:none;}}

.manifesto{padding:clamp(80px,12vh,150px) 0;}
.split{display:grid; grid-template-columns:minmax(180px,1fr) 2.4fr; gap:clamp(30px,6vw,90px); align-items:start;}
.split-label{font-family:var(--font-body); font-size:11px; font-weight:var(--font-weight-medium); letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--sage); padding-top:14px; display:flex; gap:12px;}
.split-label .idx{color:var(--ink-soft); font-variant-numeric:tabular-nums;}
.manifesto h2{font-size:clamp(2rem,4.6vw,3.6rem); font-weight:300; letter-spacing:-.02em;}
.manifesto p{font-size:clamp(16px,1.5vw,18px); color:var(--ink-soft); max-width:58ch; margin:28px 0 0;}
.trust-row{list-style:none; display:flex; flex-wrap:wrap; gap:0; margin-top:44px; border-top:1px solid var(--line);}
.trust-row li{font-family:var(--sans); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--black); padding:18px 26px 0 0;}

.showcase{padding:clamp(70px,10vh,120px) 0; border-top:1px solid var(--line-soft);}
.showcase.on-white{background:var(--white);}
.showcase-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:52px; flex-wrap:wrap;}
.showcase-head .head-left{max-width:640px;}
.showcase-head .section-idx{display:block; margin-bottom:16px;}
.showcase-head h2{font-size:clamp(2rem,4.4vw,3.4rem); font-weight:300; letter-spacing:-.02em;}
.showcase-head p{color:var(--ink-soft); font-size:16px; margin-top:16px; max-width:60ch;}
.head-link{font-family:var(--font-body); font-size:12px; font-weight:var(--font-weight-medium); letter-spacing:.14em; text-transform:uppercase; color:var(--terracotta-ink); white-space:nowrap; display:inline-flex; gap:8px; align-items:center; transition:gap .25s; padding:9px 0;}
.head-link i{font-size:16px; line-height:1; transition:transform .25s;}
.head-link:hover i{transform:translateX(3px);}
/* Phosphor icon base + contextual sizing */
i[class*="ph-"]{display:inline-flex; align-items:center; justify-content:center; font-style:normal; vertical-align:middle; line-height:1;}
.program-card .icon i, .icon i{font-size:34px; display:block; color:var(--terracotta);}
[style*="38px"] > i{font-size:36px; color:var(--terracotta);}
.pl-more i, .program-card a.more i, .btn i, .more i{font-size:16px;}
.checklist li i, .pricing-card ul li i, .consult-badge i, .creds li i, .trust-row li i, .pep-step i{font-size:16px; color:var(--terracotta);}
.head-link:hover{gap:13px; opacity:1;}
.product-row{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,26px);}
.product{display:block;}
.product-media{aspect-ratio:4/5; overflow:hidden; background:var(--cream-warm);}
.product-media img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.product:hover .product-media img{transform:scale(1.05);}
.product-meta{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:18px 2px 0; border-top:1px solid var(--line); margin-top:16px;}
.product-meta h3{font-size:1.35rem; font-weight:400;}
.product-meta .price{font-family:var(--sans); font-size:13px; letter-spacing:.08em; color:var(--ink-soft); text-transform:uppercase; white-space:nowrap;}

.process{background:var(--sage-deep); color:var(--cream); padding:clamp(80px,12vh,140px) 0;}
.process .section-idx{color:var(--cream-soft);}
.process-head{max-width:620px; margin-bottom:60px;}
.process-head h2{color:var(--cream); font-size:clamp(2rem,4.6vw,3.4rem); font-weight:300; margin-top:14px;}
.process-list{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:0;}
.process-list li{padding:38px 34px 44px; border-top:1px solid rgba(236,233,225,.28); border-left:1px solid rgba(236,233,225,.16);}
.process-list li:first-child{border-left:none; padding-left:0;}
.process-list .step-n{margin-bottom:26px;}
.process-list h3{color:var(--cream); font-size:1.5rem; font-weight:400; margin-bottom:14px;}
.process-list p{color:var(--cream-soft); font-size:15.5px; max-width:34ch;}

.founder{padding:clamp(70px,10vh,130px) 0;}
.founder-inner{display:grid; grid-template-columns:1fr 1.06fr; gap:clamp(30px,5vw,80px); align-items:center;}
.founder-media{aspect-ratio:4/5; overflow:hidden; background:var(--cream-warm);}
.founder-media img{width:100%; height:100%; object-fit:cover;}
.founder-text .label{font-family:var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--terracotta-ink);}
.founder-text h2{font-size:clamp(2.2rem,4.6vw,3.6rem); font-weight:300; margin:18px 0 28px; letter-spacing:-.02em;}
.founder-text p{color:var(--ink-soft); font-size:16.5px; margin-bottom:18px; max-width:52ch;}
.creds{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:34px; border-top:1px solid var(--line);}
.creds li{font-family:var(--sans); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--black); padding:16px 0 0;}

.service{position:relative; min-height:62vh; display:flex; align-items:center; color:var(--cream); background:#43433A center/cover no-repeat; background-image:url('wholehealth-images/lifestyle/coastal-aerial.jpg');}
.service::before{content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(32,26,20,.78), rgba(32,26,20,.42));}
.service .container{position:relative; z-index:2; padding-top:70px; padding-bottom:70px;}
.service .kicker{color:var(--cream);}
.service h2{color:var(--cream); font-size:clamp(2.2rem,5vw,4rem); font-weight:300; margin:22px 0 20px; max-width:16ch; letter-spacing:-.02em;}
.service p{color:var(--cream); max-width:60ch; font-size:16.5px;}
.service p a{color:var(--cream); border-bottom:1px solid var(--terracotta); padding-bottom:2px;}

.membership{padding:clamp(70px,10vh,130px) 0; background:var(--white);}
.mem-head{margin-bottom:50px; max-width:560px;}
.mem-head .section-idx{display:block; margin-bottom:14px;}
.mem-head h2{font-size:clamp(2rem,4.4vw,3.2rem); font-weight:300;}
.member-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
.member-card{border:1px solid var(--line); padding:44px 40px; display:flex; flex-direction:column; background:var(--cream);}
.member-card h4{font-size:1.7rem; font-weight:400; margin-bottom:6px;}
.member-card .price{font-family:var(--display); font-size:2.4rem; font-weight:300; color:var(--terracotta-ink); margin-bottom:26px;}
.member-card .price span{font-family:var(--sans); font-size:14px; color:var(--ink-soft); letter-spacing:.04em;}
.member-card ul{list-style:none; margin-bottom:30px; flex:1;}
.member-card ul li{padding:11px 0; border-bottom:1px solid var(--line-soft); color:var(--ink-soft); font-size:15px; display:flex; gap:12px;}
.member-card ul li::before{content:''; width:16px; height:1px; background:var(--terracotta); margin-top:11px; flex:none;}

.faq{padding:clamp(70px,10vh,130px) 0;}
.faq-head{margin-bottom:44px;}
.faq-head .section-idx{display:block; margin-bottom:14px;}
.faq-head h2{font-size:clamp(2rem,4.4vw,3.2rem); font-weight:300;}
.faq-list{max-width:900px; margin:0 auto;}
details{border-bottom:1px solid var(--line); padding:0;}
summary{list-style:none; font-family:var(--display); font-size:1.4rem; font-weight:400; cursor:pointer; position:relative; padding:24px 44px 24px 0; color:var(--black); transition:color .25s;}
summary:hover{color:var(--terracotta);}
summary::-webkit-details-marker{display:none;}
summary::after{content:'+'; position:absolute; right:2px; top:50%; transform:translateY(-50%); font-family:var(--sans); font-size:1.5rem; color:var(--terracotta); font-weight:300; transition:transform .3s;}
details[open] summary::after{transform:translateY(-50%) rotate(45deg);}
details p{padding:0 0 24px; color:var(--ink-soft); max-width:72ch;}
details[open] > p{animation:faqIn .45s cubic-bezier(.2,.7,.2,1);}
@keyframes faqIn{from{opacity:0; transform:translateY(7px);}to{opacity:1; transform:none;}}
@media(prefers-reduced-motion:reduce){details[open] > p{animation:none;}}

.final-cta{padding:clamp(90px,14vh,170px) 0; text-align:center; border-top:1px solid var(--line-soft);}
.final-cta .eyebrow,.final-cta .kicker{justify-content:center; margin-bottom:26px; display:flex;}
.final-cta h2{font-size:clamp(2.6rem,7vw,6rem); font-weight:300; letter-spacing:-.03em; max-width:16ch; margin:0 auto 26px;}
.final-cta p{color:var(--ink-soft); max-width:52ch; margin:0 auto 40px; font-size:17px;}

/* ---------- FOOTER ---------- */
footer{background:var(--sage-deep); color:var(--cream); padding:80px 0 34px;}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr; gap:48px; margin-bottom:56px;}
footer .logo{color:var(--cream); display:block; margin-bottom:22px;}
.logo-img-footer{height:60px; width:auto; display:block; margin-bottom:22px;}
footer p{color:var(--cream-soft); font-size:14px; max-width:38ch;}
footer h5, footer .f-head{font-family:var(--font-body); font-weight:var(--font-weight-medium); font-size:11px; letter-spacing:var(--tracking-wider); text-transform:uppercase; color:#E7D4A6; opacity:1; margin-bottom:18px;}
footer ul{list-style:none;}
footer ul li{padding:0;}
footer ul li a{color:var(--cream-soft); font-size:14.5px; display:inline-block; padding:7px 0; transition:color .25s, opacity .25s, transform .25s;}
footer ul li a:hover{opacity:1; color:#E7D4A6; transform:translateX(4px);}
.footer-legal{font-family:var(--font-body); font-size:11.5px; line-height:1.65; color:var(--cream-soft); max-width:none; margin-top:12px;}

/* =====================================================================
   REVIEWS — real Google testimonials
   ===================================================================== */
.reviews{padding:clamp(70px,10vh,130px) 0; background:var(--cream);}
.reviews-head{display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap;}
.reviews-head .section-idx{display:block; margin-bottom:14px;}
.reviews-head h2{margin:0; font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.04; letter-spacing:-.01em;}
.g-summary{display:flex; align-items:center; gap:14px; padding:14px 22px; background:var(--white); border:1px solid var(--line-soft); border-radius:6px; box-shadow:0 10px 30px rgba(42,41,34,.05);}
.g-mark{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); font-family:var(--font-display); font-weight:var(--font-weight-bold); font-size:22px; color:var(--terracotta); background:var(--cream);}
.g-summary-text{display:flex; flex-direction:column; gap:2px;}
.g-stars{color:var(--terracotta); letter-spacing:2px; font-size:15px;}
.g-rating{font-family:var(--font-body); font-size:12.5px; color:var(--ink-soft); letter-spacing:.02em;}
.reviews-note{font-family:var(--font-body); font-size:13.5px; color:var(--ink-soft); margin:18px 0 40px; max-width:60ch;}
.reviews-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px;}
.rev-card{position:relative; display:flex; flex-direction:column; gap:18px; background:var(--white); border:1px solid var(--line-soft); border-radius:6px; padding:30px 28px 26px; margin:0; box-shadow:0 12px 34px rgba(42,41,34,.05); transition:transform .35s ease, box-shadow .35s ease;}
.rev-card::before{content:"\201C"; position:absolute; top:6px; right:20px; font-family:var(--font-display); font-size:76px; line-height:1; color:var(--terracotta); opacity:.14; pointer-events:none;}
.rev-card:hover{transform:translateY(-4px); box-shadow:0 20px 46px rgba(42,41,34,.09);}
.rev-stars{color:var(--terracotta); letter-spacing:2.5px; font-size:15px;}
.rev-card blockquote{margin:0; font-family:var(--font-body); font-size:15.5px; line-height:1.7; color:var(--black); font-weight:var(--font-weight-regular);}
.rev-card figcaption{display:flex; flex-direction:column; gap:2px; margin-top:auto; padding-top:6px;}
.rev-name{font-family:var(--font-display); font-size:20px; font-weight:var(--font-weight-medium); color:var(--black); line-height:1.2;}
.rev-role{font-family:var(--font-body); font-size:12px; color:var(--ink-soft); letter-spacing:.01em;}
.rev-src{font-family:var(--font-body); font-size:11px; font-weight:var(--font-weight-medium); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--sage); margin-top:4px;}
.rev-card--md{border-color:rgba(160,121,61,.32); background:linear-gradient(180deg,var(--white),#F6F1E7);}
@media (max-width:600px){
  .reviews-head{align-items:flex-start;}
  .g-summary{width:100%; justify-content:flex-start;}
  .rev-card{padding:26px 22px 22px;}
}

/* ---- Clinical team (About + Safety) ---- */
.team-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:22px; margin-top:44px;}
.team-card{display:flex; gap:22px; align-items:flex-start; background:var(--cream); border:1px solid var(--line-soft); border-radius:6px; padding:28px 26px; transition:transform .35s ease, box-shadow .35s ease;}
.team-card:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(42,41,34,.07);}
.team-avatar{flex:0 0 auto; width:64px; height:64px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-size:23px; font-weight:var(--font-weight-medium); letter-spacing:.03em; color:var(--white); background:var(--sage); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);}
.team-card h3{font-size:1.5rem; margin:0 0 4px; line-height:1.15;}
.team-role{display:inline-block; font-family:var(--font-body); font-size:11px; font-weight:var(--font-weight-medium); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--terracotta-ink); margin-bottom:10px;}
.team-body p{margin:0; font-size:14.5px; line-height:1.7; color:var(--ink-soft);}
@media (max-width:600px){ .team-card{flex-direction:column; gap:16px; padding:24px 22px;} }

/* ---- Legal pages (Privacy / Terms) ---- */
.legal-body{max-width:760px;}
.legal-body>p{font-family:var(--font-body); font-size:15.5px; line-height:1.8; color:var(--ink-soft); margin:0 0 18px;}
.legal-body h2{font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,1.9rem); line-height:1.2; color:var(--black); margin:38px 0 14px;}
.legal-body h2:first-of-type{margin-top:30px;}
.legal-list{list-style:none; margin:0 0 18px; padding:0;}
.legal-list li{position:relative; font-family:var(--font-body); font-size:15px; line-height:1.75; color:var(--ink-soft); padding:0 0 12px 26px;}
.legal-list li::before{content:""; position:absolute; left:2px; top:11px; width:7px; height:7px; border-radius:50%; background:var(--terracotta); opacity:.6;}
.legal-body a{color:var(--terracotta); text-decoration:underline; text-underline-offset:2px;}
.legal-body strong{color:var(--black); font-weight:var(--font-weight-medium);}

/* =====================================================================
   PREMIUM LAYER — cursor · grain · intro · page transitions
   ===================================================================== */

/* ---- Native cross-document page transitions ---- */
@view-transition { navigation: auto; }
::view-transition-group(root){ animation-duration:.55s; }
::view-transition-old(root){ animation:whVtOut .4s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root){ animation:whVtIn .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes whVtOut{ to{ opacity:0; transform:translateY(-10px); } }
@keyframes whVtIn{ from{ opacity:0; transform:translateY(12px); } }
nav{ view-transition-name:wh-nav; }
.mobile-sticky-cta{ view-transition-name:wh-sticky; }
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none !important; }
}

/* ---- Film grain (tactile depth) — desktop pointer only ----
   A fixed full-viewport mix-blend layer forces the GPU to re-blend the whole
   screen every scroll frame (a top mobile-jank cause). We drop the blend mode
   and only render the grain on true desktop pointers. */
.wh-grain{display:none;}
@media (hover:hover) and (pointer:fine){
  .wh-grain{display:block; position:fixed; inset:0; z-index:9990; pointer-events:none; opacity:.05; contain:layout style paint;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:190px 190px;}
}

/* ---- Custom cursor (desktop pointer only) ---- */
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor .btn, html.has-cursor summary{cursor:none;}
html.has-cursor input, html.has-cursor textarea, html.has-cursor select{cursor:auto;}
.wh-cursor-dot{position:fixed; top:0; left:0; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:var(--terracotta); z-index:9998; pointer-events:none; will-change:transform;}
.wh-cursor-ring{position:fixed; top:0; left:0; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%; border:1px solid rgba(160,121,61,.55); z-index:9997; pointer-events:none; will-change:transform;
  transition:width .35s cubic-bezier(.2,.7,.2,1), height .35s cubic-bezier(.2,.7,.2,1), margin .35s cubic-bezier(.2,.7,.2,1), background .3s, border-color .3s, opacity .3s;}
html.cursor-hover .wh-cursor-ring{width:62px; height:62px; margin:-31px 0 0 -31px; background:rgba(160,121,61,.10); border-color:rgba(160,121,61,.85);}
html.cursor-hover .wh-cursor-dot{opacity:0;}
html.cursor-down .wh-cursor-ring{width:30px; height:30px; margin:-15px 0 0 -15px;}

/* ---- Branded intro (first load only) ---- */
#wh-intro{position:fixed; inset:0; z-index:10000; background:var(--sage); display:none; align-items:center; justify-content:center; overflow:hidden;}
html.wh-first #wh-intro{display:flex; animation:whIntroFail 0s linear 3.4s forwards;}
#wh-intro .wh-intro-mark{width:clamp(150px,22vw,220px); opacity:0; transform:translateY(14px); filter:blur(4px);}
#wh-intro .wh-intro-mark img{width:100%; height:auto; display:block;}
#wh-intro.intro-in .wh-intro-mark{opacity:1; transform:none; filter:none; transition:opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1), filter .9s ease;}
#wh-intro.intro-out{transform:translateY(-101%); transition:transform .9s cubic-bezier(.76,0,.24,1);}
@keyframes whIntroFail{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
body.intro-lock{overflow:hidden;}
@media (prefers-reduced-motion:reduce){ #wh-intro{display:none;} }

/* ===== KINETIC MARQUEE (signature scroll moment) ===== */
.marquee{overflow:hidden; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:clamp(20px,3vh,32px) 0; background:var(--cream); position:relative;}
.marquee-track{display:flex; width:max-content; white-space:nowrap; will-change:transform; animation:whhMarquee 34s linear infinite;}
.marquee-item{display:inline-flex; align-items:center; font-family:var(--font-display); font-style:italic; font-weight:var(--font-weight-thin); font-size:clamp(1.7rem,3.4vw,2.9rem); letter-spacing:-.01em; color:var(--black); padding:0 clamp(26px,4vw,58px);}
.marquee-item::after{content:'\2726'; font-style:normal; font-size:.42em; color:var(--terracotta); margin-left:clamp(26px,4vw,58px); transform:translateY(-.15em);}
@keyframes whhMarquee{to{transform:translateX(-50%);}}
/* Text ticker also runs continuously (same client preference as the gallery). */
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;}}

/* ===== ASYMMETRIC EDITORIAL SECTION HEADS (de-center) ===== */
.feat-head.feat-head--edge{text-align:left; max-width:none; margin:0 0 clamp(40px,5vh,60px);}
.feat-head.feat-head--edge .paren-label{margin-bottom:20px;}
.feat-head.feat-head--edge h2{max-width:15ch; margin-left:0; margin-right:0;}
.feat-head.feat-head--edge p{max-width:50ch; margin:22px 0 0 0;}
.footer-bottom{border-top:1px solid rgba(236,233,225,.14); padding-top:26px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.footer-bottom p{font-size:12.5px; color:var(--cream-soft);}
.footer-bottom p.footer-links{opacity:1;}
.footer-links a{color:var(--cream-soft); text-decoration:none; transition:opacity .25s, color .25s;}
.footer-links a:hover{opacity:1; color:#E7D4A6;}

/* ---------- STICKY BOOK PILL (desktop) ---------- */
.book-pill{position:fixed; right:26px; bottom:26px; z-index:120; background:var(--black); color:var(--cream); display:inline-flex; align-items:center; gap:14px; padding:15px 22px; border-radius:4px; font-family:var(--font-body); font-weight:var(--font-weight-medium); font-size:12px; letter-spacing:var(--tracking-wide); text-transform:uppercase; opacity:0; transform:translateY(16px); pointer-events:none; transition:opacity .4s, transform .4s, background .25s; box-shadow:0 16px 40px rgba(28,28,26,.28);}
.book-pill:hover{background:var(--terracotta); color:var(--white);}
.book-pill.visible{opacity:1; transform:translateY(0); pointer-events:auto;}
.book-pill .dismiss{cursor:pointer; opacity:.6; font-size:16px;}
.book-pill .dismiss:hover{opacity:1;}

/* ---------- STICKY MOBILE CTA ---------- */
.mobile-sticky-cta{display:none;}

/* ---------- REVEAL ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}

/* ---------- DRAW ACCENT ---------- */
.draw-accent{position:relative; padding-bottom:14px;}
.draw-accent::after{content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--terracotta); transition:width 1s cubic-bezier(.2,.7,.2,1) .2s;}
.draw-accent.in::after{width:56px;}
.section-head.draw-accent::after,.section-head .draw-accent::after{left:50%; transform:translateX(-50%);}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none;}
  .draw-accent::after{transition:none;}
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1000px){
  .program-grid{grid-template-columns:repeat(2,1fr);}
  .pricing-grid{grid-template-columns:1fr; gap:20px;}
  .product-row{grid-template-columns:repeat(2,1fr); gap:22px;}
  .blog-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr; gap:38px;}
  .nav-links{display:none;}
  .hamburger{display:flex;}
}
@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr; min-height:0;}
  .hero-text{padding:56px var(--edge) 44px; max-width:none;}
  .hero-media{min-height:64vh; order:2;}
  .hero-rule{display:none;}
  .split{grid-template-columns:1fr; gap:20px;}
  .split-label{padding-top:0;}
  .split-feature{grid-template-columns:1fr; gap:44px;}
  .process-list,.steps{grid-template-columns:1fr;}
  .process-list li,.steps .step{padding:30px 0; border-left:none; padding-left:0;}
  .founder-inner{grid-template-columns:1fr; gap:34px;}
  .founder-media{order:-1;}
  .member-grid{grid-template-columns:1fr;}
  .ingredient-grid{grid-template-columns:1fr;}
  .showcase-head{align-items:flex-start;}
  .contact-form .row2{grid-template-columns:1fr; gap:18px;}
  .checklist{grid-template-columns:1fr; gap:12px;}
  body{padding-bottom:74px;}
  .mobile-sticky-cta{display:block; position:fixed; left:0; right:0; bottom:0; z-index:120; background:var(--white); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom);}
  .msc-inner{display:grid; grid-template-columns:1fr 1fr;}
  .mobile-sticky-cta a{display:flex; align-items:center; justify-content:center; gap:8px; padding:17px; font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:500;}
  .mobile-sticky-cta a.primary{background:var(--terracotta); color:var(--white);}
  .mobile-sticky-cta a.secondary{background:var(--black); color:var(--cream);}
  .mobile-sticky-cta svg{width:17px; height:17px;}
  .mobile-sticky-cta i{font-size:20px; line-height:1;}
  .book-pill{display:none;}
}
@media (max-width:600px){
  .program-grid{grid-template-columns:1fr;}
  .blog-grid{grid-template-columns:1fr; gap:34px;}
  .footer-grid{grid-template-columns:1fr; gap:32px;}
  .product-row{grid-template-columns:1fr 1fr; gap:14px;}
  .product-meta h3{font-size:1.1rem;}
  .creds{grid-template-columns:1fr;}
  .contact-form{padding:36px 26px;}
  .blog-post{padding:0 18px;}
}

/* =====================================================================
   FEATURE LAYER — Healia-inspired (floating nav pill, big-stat band,
   bento data grid, parenthetical labels). Neutral Modern palette.
   Appended last so it overrides base nav.
   ===================================================================== */

/* ---- Floating nav pill (site-wide) ---- */
nav{background:transparent; border-bottom:none; padding:14px var(--edge) 0;}
nav .inner{max-width:var(--maxw); margin:0 auto; padding:10px 12px 10px 26px;
  background:rgba(250,249,245,.94);
  border:1px solid var(--line-soft); border-radius:100px; box-shadow:0 10px 34px rgba(42,40,32,.08);}
.nav-links a.btn{border-radius:3px;}
.logo-img{height:44px;}

/* Homepage: hero runs full-height behind the floating pill */
.home nav{position:fixed; left:0; right:0; top:0; z-index:130;}
.home .hero-inner{min-height:100vh;}
.home .hero-text{padding-top:clamp(120px,15vh,168px);}

/* ---- Parenthetical micro-label ---- */
.paren-label{font-family:var(--font-body); font-size:11px; font-weight:var(--font-weight-medium); letter-spacing:.12em; text-transform:uppercase; color:var(--sage); display:inline-block; margin-bottom:16px;}
.feat-head{text-align:center; max-width:820px; margin:0 auto clamp(40px,5vh,56px);}
.feat-head h2{font-size:clamp(2.1rem,4.8vw,3.6rem); font-weight:300; letter-spacing:-.025em;}
.feat-head p{color:var(--ink-soft); font-size:16.5px; margin-top:18px; max-width:60ch; margin-left:auto; margin-right:auto;}

/* ---- Big-stat band ---- */
.stat-band{background:var(--white); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:clamp(44px,6vh,72px) 0;}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft);}
.stat{background:var(--white); padding:14px clamp(14px,2vw,32px); text-align:center;}
.stat .num{display:block; font-family:var(--font-display); font-size:clamp(4rem,9vw,7.5rem); font-weight:var(--font-weight-thin); color:var(--terracotta); line-height:1; letter-spacing:-.02em;}
.stat .lbl{display:block; margin-top:12px; font-family:var(--font-body); font-size:11px; font-weight:var(--font-weight-medium); letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--ink-soft);}

/* ---- Bento data grid ---- */
.bento{display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:clamp(190px,24vw,230px); gap:clamp(12px,1.4vw,18px);}
.bento-item{border-radius:14px; overflow:hidden; position:relative; border:1px solid var(--line-soft);}
.bento-photo{grid-column:span 5; grid-row:span 2; border:none;}
.bento-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.2,1);}
.bento-photo:hover img{transform:scale(1.05);}
.bento-photo::after{content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(32,26,20,.62), rgba(32,26,20,0) 55%);}
.bento-photo .cap{position:absolute; left:28px; right:28px; bottom:26px; z-index:2;}
.bento-photo .cap h3{color:#fff; font-family:var(--display); font-size:1.7rem; font-weight:400; margin-bottom:8px; letter-spacing:-.01em;}
.bento-photo .cap p{color:rgba(255,253,248,.86); font-size:14px; line-height:1.5;}
.bento-stat{grid-column:span 4; background:var(--cream-warm); padding:clamp(28px,3vw,38px); display:flex; flex-direction:column; justify-content:center;}
.bento-stat .big{font-family:var(--font-display); font-size:clamp(3.4rem,6vw,5.2rem); font-weight:var(--font-weight-thin); color:var(--terracotta); line-height:1; letter-spacing:-.02em;}
.bento-stat .cap2{margin-top:14px; font-size:15px; color:var(--ink-soft); line-height:1.55; max-width:30ch;}
.bento-note{grid-column:span 3; background:var(--sage); color:var(--cream); padding:clamp(26px,2.6vw,32px); display:flex; flex-direction:column; justify-content:center;}
.bento-note .k{font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--cream-soft); margin-bottom:14px;}
.bento-note h3{color:var(--cream); font-family:var(--display); font-size:1.35rem; font-weight:400; line-height:1.25;}
.bento-tags{grid-column:span 7; background:var(--white); padding:clamp(26px,2.6vw,34px); display:flex; flex-direction:column; justify-content:center;}
.bento-tags .k{font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--terracotta); margin-bottom:18px;}
.bento-tags .tags{display:flex; flex-wrap:wrap; gap:10px;}
.bento-tags .tags span{border:1px solid var(--line); border-radius:100px; padding:9px 18px; font-family:var(--sans); font-size:13px; letter-spacing:.02em; color:var(--black); transition:border-color .2s, color .2s;}
.bento-tags .tags span:hover{border-color:var(--terracotta-ink); color:var(--terracotta-ink);}

@media (max-width:900px){
  .home nav{position:sticky;}
  .home .hero-text{padding-top:34px;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .bento{grid-template-columns:1fr; grid-auto-rows:auto;}
  .bento-item{grid-column:1 / -1 !important; grid-row:auto !important; min-height:180px;}
  .bento-photo{min-height:340px;}
}
@media (max-width:520px){
  .stat-grid{grid-template-columns:1fr 1fr;}
  nav .inner{padding-left:18px;}
}

/* =====================================================================
   MOTION LAYER — reveal variants, parallax, converge, blend section
   ===================================================================== */
.reveal--left{transform:translateX(-42px);}
.reveal--right{transform:translateX(42px);}
.reveal--scale{transform:scale(.93);}
.reveal--up{transform:translateY(42px);}
.reveal--left.in,.reveal--right.in,.reveal--scale.in,.reveal--up.in{transform:none;}
[data-parallax]{will-change:transform;}
[data-converge]{will-change:transform,opacity;}

/* ---- Touch / mobile scroll-performance guards ----
   Parallax + converge are disabled in JS on touch; de-promote their layers here
   so phones don't hold extra compositor layers. Also drop hover-transform paints
   (a tap mid-swipe) and the hero-chip float on small screens. */
@media (hover:none){
  [data-parallax],[data-converge]{will-change:auto; transform:none;}
  .pricing-card:hover,.blog-card:hover,.rev-card:hover,.team-card:hover,.program-card:hover{transform:none;}
}
@media (max-width:560px){ .hm-chip{animation:none;} }
@media(prefers-reduced-motion:reduce){
  .reveal,[data-parallax],[data-converge],[data-converge-core]{opacity:1 !important; transform:none !important; transition:none !important;}
}

/* parallax frame (image oversized so translate never reveals an edge) */
.px-frame{overflow:hidden; position:relative;}
.px-frame img{position:absolute; left:0; top:-12%; width:100%; height:124%; object-fit:cover;}

/* ---- BLEND section (IV + peptides come together) ---- */
.blend{background:var(--cream); overflow:hidden;}
.blend h2 em{font-style:italic;}
.blend-stage{position:relative; display:flex; align-items:center; justify-content:center; gap:clamp(14px,3vw,44px); margin:clamp(14px,3vh,30px) 0 clamp(46px,6vh,66px); min-height:clamp(280px,42vw,380px);}
.blend-img{position:relative; width:min(40%,340px); aspect-ratio:4/5; border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(42,40,32,.12);}
.blend-img img{width:100%; height:100%; object-fit:cover; display:block;}
.blend-img .tag{position:absolute; left:18px; bottom:16px; z-index:2; font-family:var(--sans); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.4);}
.blend-core{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4; width:clamp(94px,12vw,132px); height:clamp(94px,12vw,132px); border-radius:50%; background:var(--cream); border:1px solid var(--line); box-shadow:0 18px 46px rgba(42,40,32,.16); display:flex; align-items:center; justify-content:center; text-align:center;}
.blend-core span{font-family:var(--display); font-size:clamp(.82rem,1.3vw,1rem); line-height:1.15; color:var(--black); font-weight:400;}
.blend-core b{display:block; font-family:var(--sans); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--terracotta); font-weight:500; margin-top:5px;}
.blend-cols{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,80px); border-top:1px solid var(--line); padding-top:clamp(40px,5vh,54px);}
.blend-col > .paren-label{color:var(--terracotta-ink); margin-bottom:22px;}
.blend-col p{color:var(--ink-soft); font-size:16px; line-height:1.65; margin-bottom:16px; max-width:46ch;}
.blend-col .head-link{margin-top:10px;}
.fact{padding:20px 0; border-bottom:1px solid var(--line-soft); display:grid; grid-template-columns:minmax(120px,auto) 1fr; gap:clamp(14px,2vw,26px); align-items:baseline;}
.fact:first-of-type{border-top:1px solid var(--line-soft);}
.fact-num{font-family:var(--display); font-size:clamp(2rem,3.4vw,2.9rem); font-weight:300; color:var(--terracotta); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.fact p{color:var(--ink-soft); font-size:15px; line-height:1.55; margin:0;}

/* ---- Healia-style marquee: flanking portraits converge on a central stat ---- */
.blend-marquee{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.28fr) minmax(0,.9fr); align-items:center; gap:clamp(16px,2.6vw,44px); margin:clamp(20px,3vh,38px) 0 clamp(44px,6vh,66px);}
.bm-img{position:relative; aspect-ratio:2/3; border-radius:18px; overflow:hidden; box-shadow:0 30px 72px rgba(42,40,32,.17); will-change:transform,opacity;}
.bm-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s cubic-bezier(.2,.7,.2,1);}
.bm-img:hover img{transform:scale(1.05);}
.bm-img::after{content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(24,26,20,.66),rgba(24,26,20,.12) 46%,transparent 62%); pointer-events:none;}
.bm-img .tag{position:absolute; left:16px; bottom:15px; z-index:2; font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.5);}
.bm-core{text-align:center; padding:0 clamp(6px,1.4vw,20px);}
.bm-num{display:block; font-family:var(--display); font-weight:300; font-size:clamp(4.6rem,10vw,8.6rem); line-height:.9; color:var(--black); letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.bm-lbl{display:block; font-family:var(--sans); font-size:clamp(13px,1.4vw,15px); letter-spacing:.01em; color:var(--ink-soft); max-width:24ch; margin:12px auto 22px; line-height:1.45;}
.bm-pills{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:20px;}
.bm-pills span{font-family:var(--sans); font-size:13px; color:var(--black); background:var(--white); border:1px solid var(--line); border-radius:100px; padding:9px 17px;}
.bm-pills b{color:var(--terracotta); font-weight:600;}
.bm-checks{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:9px 18px; max-width:376px; margin:0 auto 26px; text-align:left;}
.bm-checks li{font-family:var(--sans); font-size:13px; color:var(--ink-soft); display:flex; gap:8px; align-items:baseline;}
.bm-checks li i{font-size:19px; color:var(--terracotta); flex:none; transform:translateY(3px); line-height:1;}
@media (max-width:820px){
  .blend-marquee{grid-template-columns:1fr 1fr; grid-template-areas:'l r' 'c c'; gap:16px;}
  .bm-core{grid-area:c; padding-top:16px;}
  .bm-img:first-of-type{grid-area:l;} .bm-img:last-of-type{grid-area:r;}
  .bm-num{font-size:clamp(4rem,17vw,6rem);}
}
@media (max-width:520px){.bm-checks{grid-template-columns:1fr; max-width:250px;}}

@media (max-width:820px){
  .blend-stage{gap:10px; min-height:0;}
  .blend-img{width:44%;}
  .blend-core{width:88px; height:88px;}
  .blend-cols{grid-template-columns:1fr; gap:44px;}
  .fact{grid-template-columns:1fr; gap:6px; padding:16px 0;}
}


/* ---------- Accent words: Cormorant italic, the luxury-serif signature ---------- */
h1 em, h2 em, h3 em, h4 em,
.manifesto h2 em, .founder-text h2 em, .final-cta h2 em,
.blend h2 em, .cta-strip h2 em, .process-head h2 em {
  font-family:var(--font-display); font-style:italic; font-weight:var(--font-weight-regular); color:var(--terracotta); letter-spacing:-.01em;
}
.blog-post blockquote{font-family:var(--font-display); font-style:italic;}
.blog-post > p:first-of-type::first-letter{font-family:var(--font-display);}

/* ---------- MONUMENTAL EDITORIAL HEADLINES (Cormorant, big) ----------
   Weight 400, not 300: at display scale on the sage ground, 300 reads washed
   out and loses presence. 400 keeps Cormorant's editorial elegance while giving
   the headline real weight on screen. */
.showcase-head h2,.feat-head h2,.manifesto h2,.process-head h2,.founder-text h2,.mem-head h2,.faq-head h2,.final-cta h2,.page-hero h1,.section-head h2,.cta-strip h2,.service h2{
  font-size:clamp(2.9rem,6.6vw,5.4rem); font-weight:var(--font-weight-regular); letter-spacing:-.02em; line-height:1.06;
}
/* On the sage ground, tighten tracking a touch so display type reads crisply
   against the mid-tone green. */
.page-hero h1,.cta-strip h2,.service h2,.sec-sage h2{letter-spacing:-.025em;}

/* ---- Premium split page-hero (flagship pages: menu, peptides) ---- */
.page-hero.split-hero .container{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,5vw,72px); align-items:center;}
.page-hero.split-hero h1,.page-hero.split-hero p.lead{max-width:none;}
.page-hero.split-hero .ph-media{aspect-ratio:5/4; border-radius:16px; overflow:hidden; background:var(--cream-warm); box-shadow:0 30px 70px rgba(42,40,32,.12);}
.page-hero.split-hero .ph-media img{width:100%; height:100%; object-fit:cover; display:block;}
@media (max-width:820px){
  .page-hero.split-hero .container{grid-template-columns:1fr; gap:30px;}
  .page-hero.split-hero .ph-media{order:-1; aspect-ratio:16/10;}
}

/* ---- Hero video (animated peptide sequence in split-hero) ---- */
.page-hero.split-hero .ph-media video{width:100%; height:100%; object-fit:cover; display:block;}
.ph-media{position:relative;}
/* (retired "In motion" badge styles removed — badges no longer in markup) */

/* ---- Accent legibility on dark sage sections (sage accent blends; use secondary gold) ---- */
.process .step-n, .process-list .step-n{color:#E7D4A6;}
.bento-note .k{color:#E7D4A6; opacity:1;}
.service .kicker{color:#EFE9DC;}
.service p a{border-bottom-color:var(--gold);}

/* =====================================================================
   SECTION THEMES (sage-dominant) + DESIGNED WAVE DIVIDERS
   ===================================================================== */
.sec-sage{background:var(--sage); color:var(--cream);}
.sec-sage h1,.sec-sage h2,.sec-sage h3,.sec-sage h4{color:var(--cream);}
.sec-sage p,.sec-sage li{color:var(--cream);}
.sec-sage .feat-head p,.sec-sage .manifesto p,.sec-sage .lead{color:var(--cream-soft);}
.sec-sage .eyebrow,.sec-sage .kicker,.sec-sage .paren-label,.sec-sage .section-idx,.sec-sage .split-label{color:#E7D4A6;}
.sec-sage h1 em,.sec-sage h2 em,.sec-sage h3 em{color:#E7D4A6;}
.sec-sage .head-link{color:#E7D4A6;}
.sec-sage .btn-line{border-color:rgba(240,236,226,.5); color:var(--cream); background:transparent;}
.sec-sage .btn-line:hover{background:var(--cream); color:var(--sage); border-color:var(--cream);}
.sec-sage .trust-row{border-top-color:rgba(240,236,226,.2);}
/* bento on sage: note card needs to go deeper so it reads */
.sec-sage .bento-note{background:var(--sage-deep);}
.sec-sage .bento-item{border-color:rgba(240,236,226,.14);}

/* wave dividers — placed between sections, fill = the section it flows INTO */
.wave{line-height:0; display:block; position:relative; z-index:2; margin-bottom:-1px;}
.wave svg{display:block; width:100%; height:clamp(40px,5vw,74px);}

.final-cta.sec-sage{border-top:none;}

/* ===== SCIENCE / EDUCATIONAL BAND (full-bleed image + gradient + overlaid text + counting stats) ===== */
.science-band{position:relative; min-height:clamp(460px,64vh,640px); display:flex; align-items:center; color:var(--cream); overflow:hidden; background:var(--sage-deep); padding:0;}
.science-band .sb-media{position:absolute; inset:0; z-index:0;}
.science-band .sb-media img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.06); transition:transform 1.6s cubic-bezier(.2,.7,.2,1);}
.science-band:hover .sb-media img{transform:scale(1);}
.science-band::before{content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(84,92,74,.94) 0%, rgba(84,92,74,.78) 40%, rgba(84,92,74,.2) 74%, rgba(84,92,74,0) 100%);}
.science-band .container{position:relative; z-index:2;}
.sb-content{max-width:640px;}
.sb-content .paren-label{color:var(--accent-sage); margin-bottom:16px;}
.sb-content h2{color:var(--cream); font-size:clamp(2.1rem,4.8vw,3.7rem); font-weight:var(--font-weight-regular); line-height:1.06; letter-spacing:-.02em;}
.sb-content h2 em{color:#E7D4A6; font-style:italic; font-weight:var(--font-weight-regular);}
.sb-content p{color:var(--cream-soft); font-size:16.5px; line-height:1.6; margin:22px 0 32px; max-width:52ch;}
.sb-stats{display:flex; gap:clamp(24px,4vw,60px); flex-wrap:wrap; border-top:1px solid rgba(240,236,226,.22); padding-top:26px;}
.sb-stat .n{display:block; font-family:var(--font-display); font-size:clamp(2.4rem,4.2vw,3.6rem); font-weight:var(--font-weight-thin); color:#E7D4A6; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.sb-stat .l{display:block; margin-top:9px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-soft); max-width:16ch;}
@media(max-width:700px){.science-band::before{background:linear-gradient(180deg, rgba(84,92,74,.6) 0%, rgba(84,92,74,.9) 55%);} .sb-content{max-width:none;}}

/* ===== TABBED JOURNEY (Healia-style step tabs) ===== */
.tabs-head{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(28px,4vh,44px);}
.tab-btn{font-family:var(--font-body); font-size:12px; font-weight:var(--font-weight-medium); letter-spacing:var(--tracking-wide); text-transform:uppercase; padding:13px 22px; border-radius:3px; border:1px solid var(--line); background:transparent; color:var(--ink-soft); cursor:pointer; transition:background .25s, color .25s, border-color .25s;}
.tab-btn:hover{border-color:var(--terracotta); color:var(--terracotta);}
.tab-btn.active{background:var(--terracotta); border-color:var(--terracotta); color:var(--white);}
.tab-panel{display:none;}
.tab-panel.active{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,4.5vw,70px); align-items:center; animation:faqIn .5s cubic-bezier(.2,.7,.2,1);}
.tab-copy .tp-k{display:block; font-family:var(--font-body); font-size:11px; font-weight:var(--font-weight-medium); letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--sage); margin-bottom:14px;}
.tab-copy h3{font-family:var(--font-display); font-size:clamp(1.9rem,3.4vw,2.8rem); font-weight:var(--font-weight-thin); line-height:1.1; margin-bottom:16px;}
.tab-copy h3 em{font-style:italic; font-weight:var(--font-weight-regular); color:var(--terracotta);}
.tab-copy p{color:var(--ink-soft); font-size:16px; line-height:1.7; max-width:52ch; margin-bottom:18px;}
.tab-copy ul{list-style:none; display:flex; flex-direction:column; gap:10px;}
.tab-copy ul li{display:flex; gap:10px; align-items:baseline; font-family:var(--font-body); font-size:14.5px; color:var(--ink-soft);}
.tab-copy ul li i{font-size:17px; color:var(--terracotta); flex:none; transform:translateY(2px);}
.tab-media{aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:var(--cream-warm); box-shadow:0 26px 64px rgba(42,40,32,.14);}
.tab-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s cubic-bezier(.2,.7,.2,1);}
.tab-panel.active .tab-media:hover img{transform:scale(1.04);}
@media(max-width:820px){
  .tab-panel.active{grid-template-columns:1fr; gap:22px;}
  .tab-media{order:-1; aspect-ratio:16/10;}
  .tab-btn{flex:1 1 auto; text-align:center; padding:12px 14px;}
}

/* content sitting on sage sections keeps its legibility */
.sec-sage .checklist li i{color:#E7D4A6;}
.sec-sage .program-card h3{color:var(--black);}
.sec-sage .program-card p{color:var(--ink-soft);}
.sec-sage .checklist li{color:var(--cream);}

/* ---------- LINKS / ACCENT TEXT ON SAGE GROUNDS ----------
   Antique gold on sage is only 1.8:1 and is effectively invisible. On every
   sage/dark ground, inline links and accent text use the pale gold instead
   (4.8:1 on --sage, 6.1:1 on --sage-deep). */
.page-hero a:not(.btn), .cta-strip a:not(.btn), .sec-sage a:not(.btn),
.how-it-works a:not(.btn), .process a:not(.btn), .service a:not(.btn),
.sb-content a:not(.btn), .bento-note a:not(.btn), footer a:not(.btn){
  color:var(--accent-sage);
}
.page-hero a:not(.btn):hover, .cta-strip a:not(.btn):hover, .sec-sage a:not(.btn):hover,
.how-it-works a:not(.btn):hover, .process a:not(.btn):hover, .service a:not(.btn):hover,
.sb-content a:not(.btn):hover, .bento-note a:not(.btn):hover, footer a:not(.btn):hover{
  color:var(--cream);
}
/* footer nav links keep the readable soft cream; only inline/accent links go gold */
footer ul li a:not(.btn){color:var(--cream-soft);}
footer ul li a:not(.btn):hover{color:var(--accent-sage);}

/* ---------- OUTLINE BUTTONS + META ON SAGE GROUNDS ----------
   .btn-secondary defaults to black-on-transparent, which is only 2.1:1 when it
   sits on the sage ground (page heroes, sage bands). Any outline button or post
   meta on a dark ground gets cream instead. */
.page-hero .btn-secondary, .page-hero .btn-line,
.sec-sage .btn-secondary, .how-it-works .btn-secondary,
.process .btn-secondary, .service .btn-secondary, footer .btn-secondary{
  background:transparent; color:var(--cream); border-color:rgba(240,236,226,.55);
}
.page-hero .btn-secondary:hover, .page-hero .btn-line:hover,
.sec-sage .btn-secondary:hover, .how-it-works .btn-secondary:hover,
.process .btn-secondary:hover, .service .btn-secondary:hover, footer .btn-secondary:hover{
  background:var(--cream); color:var(--sage); border-color:var(--cream);
}
/* article meta (author · read time · date) sitting on the sage masthead */
.page-hero .post-meta, .page-hero .post-meta span, .page-hero .post-meta div{
  color:var(--cream-soft);
}

/* =====================================================================
   REAL-EVENT MARQUEE — auto-scrolling proof gallery
   Two rows drifting in opposite directions. Pure CSS transform animation
   (no scroll listener), so it stays smooth on mobile. The track is
   duplicated once and translated -50%, which makes the loop seamless.
   ===================================================================== */
.ev-gallery{background:var(--sage); color:var(--cream); padding:clamp(66px,9vh,104px) 0 clamp(58px,8vh,92px); overflow:hidden;}
.ev-gallery .ev-head{padding:0 var(--edge); max-width:var(--maxw); margin:0 auto clamp(30px,4vh,46px);}
.ev-gallery .eyebrow{color:var(--accent-sage); margin-bottom:16px;}
.ev-gallery h2{color:var(--cream); font-size:clamp(2.2rem,5vw,3.6rem); font-weight:var(--font-weight-regular);
  letter-spacing:-.025em; line-height:1.04; max-width:20ch;}
.ev-gallery .ev-sub{color:var(--cream-soft); max-width:56ch; margin-top:18px; font-size:clamp(15px,1.3vw,17px);}

.ev-row{display:flex; width:max-content; margin-bottom:18px; will-change:transform;
  backface-visibility:hidden; transform:translate3d(0,0,0);}
.ev-row.a{animation:ev-slide-l 78s linear infinite;}
.ev-row.b{animation:ev-slide-r 92s linear infinite;}
/* Marquee runs continuously — it does NOT pause on hover (client preference:
   the motion should never stop, whether the cursor is over it or not). */
@keyframes ev-slide-l{from{transform:translate3d(0,0,0)}   to{transform:translate3d(-50%,0,0)}}
@keyframes ev-slide-r{from{transform:translate3d(-50%,0,0)} to{transform:translate3d(0,0,0)}}

.ev-card{position:relative; flex:0 0 auto; margin-right:18px; height:clamp(230px,26vw,340px); border-radius:14px; overflow:hidden;
  backface-visibility:hidden;
  background:rgba(255,255,255,.05); box-shadow:0 18px 44px rgba(20,24,16,.28);}
.ev-card img{height:100%; width:auto; display:block; object-fit:cover;}
.ev-card::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(20,24,16,.62), rgba(20,24,16,.06) 42%, transparent 60%);}
.ev-card .ev-cap{position:absolute; left:14px; bottom:12px; z-index:2; font-family:var(--font-body);
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#fff;
  text-shadow:0 1px 4px rgba(15,18,12,.65);}

.ev-foot{padding:clamp(26px,4vh,40px) var(--edge) 0; max-width:var(--maxw); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center;}
.ev-foot .ev-note{color:var(--cream-soft); font-size:13.5px;}

@media (max-width:760px){
  .ev-card{height:200px; border-radius:12px; margin-right:12px;}
  .ev-row{margin-bottom:12px;}
  .ev-row.a{animation-duration:52s;} .ev-row.b{animation-duration:62s;}
}
/* Honour reduced-motion: stop the drift and let the row scroll by touch instead. */
@media (prefers-reduced-motion:reduce){
  .ev-row{animation:none; width:auto; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;}
  .ev-row.b{display:none;}
  .ev-card{scroll-snap-align:start;}
}

/* Compact single-row variant of the event marquee, for local/city pages where
   the gallery is supporting proof rather than the main event. */
.ev-gallery.ev-compact{padding:clamp(52px,7vh,78px) 0 clamp(46px,6vh,66px);}
.ev-gallery.ev-compact .ev-row.b{display:none;}
.ev-gallery.ev-compact .ev-card{height:clamp(190px,20vw,250px);}
.ev-gallery.ev-compact h2{font-size:clamp(1.9rem,4vw,2.9rem);}
@media (max-width:760px){ .ev-gallery.ev-compact .ev-card{height:172px;} }

/* =====================================================================
   EVENT HERO — "drift wall"
   Editorial split: oversized type left, three columns of real event
   photography drifting vertically at different speeds on the right.
   Columns are masked top/bottom so they dissolve into the sage rather
   than ending on a hard edge. Same duplicate-and-translate-50% loop as
   the marquee (margin, never gap, so the wrap is seamless).
   ===================================================================== */
.evt-hero{position:relative; background:var(--sage); color:var(--cream); overflow:hidden;
  padding:clamp(84px,11vh,132px) 0 clamp(64px,8vh,96px);}
.evt-hero .container{position:relative; z-index:3; display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(28px,5vw,70px); align-items:center;}
.evt-hero .breadcrumbs,.evt-hero .breadcrumbs a{color:var(--cream-soft);}
.evt-hero .eyebrow{color:var(--accent-sage); margin-bottom:20px;}
.evt-hero h1{color:var(--cream); font-size:clamp(2.9rem,7vw,5.6rem); font-weight:var(--font-weight-regular);
  line-height:.96; letter-spacing:-.03em; max-width:14ch;}
.evt-hero h1 em{color:var(--accent-sage); font-style:italic;}
.evt-hero p.lead{color:var(--cream-soft); max-width:46ch; margin-top:26px;
  font-size:clamp(16px,1.4vw,19px); line-height:1.62;}
.evt-hero .evt-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px;}

/* the drifting photo wall */
.evt-wall{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; height:clamp(430px,58vh,620px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 15%,#000 85%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 15%,#000 85%,transparent 100%);}
.evt-col{display:flex; flex-direction:column; will-change:transform; backface-visibility:hidden;}
.evt-col.up{animation:evtDriftUp 44s linear infinite;}
.evt-col.mid{animation:evtDriftDown 54s linear infinite;}
.evt-col.dn{animation:evtDriftUp 38s linear infinite;}
@keyframes evtDriftUp{from{transform:translate3d(0,0,0)}      to{transform:translate3d(0,-50%,0)}}
@keyframes evtDriftDown{from{transform:translate3d(0,-50%,0)} to{transform:translate3d(0,0,0)}}
.evt-shot{position:relative; flex:0 0 auto; margin-bottom:14px; border-radius:12px; overflow:hidden;
  box-shadow:0 16px 40px rgba(18,22,14,.3); background:rgba(255,255,255,.05);}
.evt-shot img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/5;}
.evt-shot::after{content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(20,24,16,.34),transparent 52%); pointer-events:none;}

@media(max-width:1000px){
  .evt-hero .container{grid-template-columns:1fr; gap:34px;}
  .evt-hero h1{max-width:none;}
  .evt-wall{height:330px; order:-1;}          /* imagery leads on narrow screens */
}
@media(max-width:600px){
  .evt-wall{grid-template-columns:repeat(2,1fr); height:290px; gap:10px;}
  .evt-shot{margin-bottom:10px; border-radius:10px;}
}
@media(prefers-reduced-motion:reduce){
  .evt-col{animation:none;}
  .evt-wall{height:auto; max-height:420px; overflow:hidden;}
}