/* ─────────────────────────────────────────────────────────────────────────────
   MOHR  - visual system (2026-10). Loaded LAST on every page, after mohr.css and
   the page sheet, so it can restyle shared components without touching markup.

   Tokens live on :root in assets/mohr.css. This file only points components at
   them. It never changes copy, links, tracking or behaviour: buttons are told
   apart by where they go (Calendly = booking, /haircheck = HairCheck), not by
   new classes, so every existing class, id and data attribute is untouched.

   Evergreen fills are reserved for booking moments: the hero booking strip,
   the $299 assessment card on /pricing, the footer closing band and the mobile
   sticky bar. Every other formerly-dark surface is turned light below by
   re-pointing --porcelain (its text colour) at ink inside it.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── base ─────────────────────────────────────────────── */
html{font-variation-settings:'SOFT' 0,'WONK' 0;}
body{
  background:var(--cream);color:var(--ink);font-family:var(--body);
  font-size:clamp(16px,.35vw + 15px,18px);line-height:1.6;
}
body::before{display:none;}                     /* no grain overlay */
::selection{background:var(--evergreen);color:var(--cream);}
:focus-visible{outline:2.5px solid var(--evergreen);outline-offset:3px;}
@media(max-width:767px){:root{--pad:16px;--section-y:56px;}}

/* ── layout ───────────────────────────────────────────── */
.wrap{max-width:var(--maxw);padding-inline:var(--pad);}
section{padding-block:var(--section-y);}
@media(max-width:899px){
  section{padding-block:var(--section-y);}
  .wrap{padding-inline:var(--pad);}
}
.divider-hair{display:none;}

/* ── type ─────────────────────────────────────────────── */
h1,h2{
  font-family:var(--serif);font-weight:400;letter-spacing:-.025em;line-height:1.03;
  color:var(--evergreen);font-optical-sizing:auto;
}
h1{font-size:clamp(46px,7.5vw,108px);}
h2{font-size:clamp(32px,4.5vw,64px);}
h3{font-family:var(--body);font-weight:600;font-size:clamp(20px,1.6vw,24px);
  line-height:1.3;letter-spacing:-.01em;color:var(--evergreen);}
h1 .soft,h1 .accent,h2 .accent,h2 .soft{color:inherit;}
p,li{line-height:1.6;}
.lede{font-size:clamp(17px,1.2vw,19px);color:var(--ink-2);line-height:1.6;}
.fine{font-size:14px;color:var(--ink-3);letter-spacing:0;line-height:1.6;}
em.serif{font-family:var(--body);font-weight:600;color:var(--evergreen);}
a{text-underline-offset:3px;}

/* eyebrow labels: Inter 600, 13px, uppercase, brass text, no ornament */
.eyebrow,.faq__group,.faq__careLabel,.plabel,.notes__label,.rail__step,.visit__label,
.role__what,.contrast__label,.contrast__not,.money__label,.metrix__panelHead,
.tier__label,.tier__unit,.tier__each,.pertreat__lead,.cmp__hint,.lmeta__k,
.diff__vs,.mech__abbr,.glance__eyebrow,.cc-eyebrow{
  font-family:var(--body);font-size:13px;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;color:var(--brass-text);line-height:1.5;
}
.eyebrow{display:inline-flex;gap:0;margin:0 0 1.25rem;}
/* labels that sit inside a container whose p rule would otherwise win */
.faq__care .faq__careLabel,.diff .diff__vs,.role .role__what,.contrast__cell .contrast__label,
.contrast__cell .contrast__not,.empathy p.eyebrow{color:var(--brass-text);}
.empathy p.eyebrow{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.14em;line-height:1.5;}
.eyebrow::before,.faq__group::before,.faq__careLabel::before,.rail__step::before,
.ba__region::before,.mech__mark .m-dot,.step__n .s-dot,.diff::before{display:none;}

/* Fraunces is allowed for large prices; everything else that used the old
   display face now resolves to Inter through --display. */
.tier__price b,.assess__price b,.founding__price b,.offer__amount,.money__figure,
.cmp__price,.pertreat__fig,.tier__pt b,.card__priceAmount,.cont__opt b,
.nextstep__price b,.actionbar__what b{
  font-family:var(--serif);font-weight:400;letter-spacing:-.025em;
}
/* former serif statement lines, now Inter */
.empathy p,.reassure__line,.faq__ctaLine,.close__line,.cont__line,.tclose__line,
.visit__support,.callout,.mech__proof p,.hero__philosophy,.cc-hero__sub,
.cc-statement blockquote{
  font-family:var(--body);font-weight:500;letter-spacing:-.015em;line-height:1.35;
}
.empathy p{font-size:clamp(22px,2.4vw,30px);color:var(--ink);}
.reassure__line,.close__line,.tclose__line,.cont__line{font-size:clamp(24px,3vw,38px);color:var(--evergreen);}
.reassure__line b,.close__line b,.tclose__line b,.cont__line b,.faq__ctaLine b{color:var(--evergreen);font-weight:700;}

/* ── header ───────────────────────────────────────────── */
header.site,
header.site.scrolled{
  background:var(--cream);backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid var(--rule);box-shadow:none;
}
.nav{padding-block:14px;gap:16px;}
.nav__tag{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--ink-3);}
@media(max-width:1239px){.nav__tag{display:none;}}
.nav__link{
  font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--evergreen);min-height:44px;
}
.nav__link::after{background:var(--evergreen);height:1px;bottom:.55rem;}
.nav__link:hover{color:var(--evergreen-dark);}
.nav__end{gap:clamp(16px,2vw,28px);}
.nav-drawer__panel{background:var(--cream);}
.nav-drawer__nav a.nav-drawer__link{
  font-family:var(--body);font-size:14px;letter-spacing:.12em;color:var(--evergreen);
  border-bottom:1.5px dotted var(--rule-dotted);
}
.nav-drawer__title{font-family:var(--body);font-size:13px;letter-spacing:.14em;color:var(--brass-text);}
.nav-drawer__head{border-bottom-color:var(--rule);}

/* ── buttons ──────────────────────────────────────────── */
.btn{
  font-family:var(--body);font-weight:600;font-size:14px;text-transform:uppercase;
  letter-spacing:.1em;line-height:1.2;border-radius:999px;min-height:52px;
  padding:14px 28px;justify-content:center;text-align:center;
  transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease);
}
.btn:hover,.btn:focus-visible{transform:none;}
.btn__dot{display:none;}
.btn--sm{min-height:44px;padding:10px 20px;font-size:13px;}

/* primary on cream: evergreen fill, cream text */
.btn--primary,.btn--onGreen,
a.btn[href^="/assessment"],
a.btn[href*="calendly.com"],.btn[data-book]{
  background:var(--evergreen);color:var(--cream);box-shadow:none;
}
.btn--primary:hover,.btn--onGreen:hover,
a.btn[href^="/assessment"]:hover,
a.btn[href*="calendly.com"]:hover,.btn[data-book]:hover{
  background:var(--evergreen-dark);color:var(--cream);box-shadow:none;
}
/* secondary: 1.5px evergreen outline */
.btn--ghost,.btn--outline,a.btn--onGreen[href^="/results"]{
  background:transparent;color:var(--evergreen);box-shadow:inset 0 0 0 1.5px var(--evergreen);
}
.btn--ghost:hover,.btn--outline:hover,a.btn--onGreen[href^="/results"]:hover{
  background:color-mix(in srgb,var(--evergreen) 7%,transparent);color:var(--evergreen);
  box-shadow:inset 0 0 0 1.5px var(--evergreen);
}
/* booking is always the filled one, whatever class it carried before */
a.btn--outline[href*="calendly.com"],a.btn--ghost[href*="calendly.com"],
.faq__cta a.btn[href*="calendly.com"],.card a.btn[href*="calendly.com"],
header.site a.btn[href*="calendly.com"],.nav-drawer__cta a.btn[href*="calendly.com"]{
  background:var(--evergreen);color:var(--cream);box-shadow:none;
}
a.btn--outline[href*="calendly.com"]:hover,a.btn--ghost[href*="calendly.com"]:hover,
.faq__cta a.btn[href*="calendly.com"]:hover,.card a.btn[href*="calendly.com"]:hover,
header.site a.btn[href*="calendly.com"]:hover,.nav-drawer__cta a.btn[href*="calendly.com"]:hover{
  background:var(--evergreen-dark);color:var(--cream);box-shadow:none;
}
/* HairCheck is never filled: outline only, and it follows the booking button */
a.btn[href^="/haircheck"],
.faq__cta a.btn[href^="/haircheck"],.card a.btn[href^="/haircheck"],
.nav-drawer__cta a.btn[href^="/haircheck"],header.site a.btn[href^="/haircheck"]{
  background:transparent;color:var(--evergreen);box-shadow:inset 0 0 0 1.5px var(--evergreen);
}
a.btn[href^="/haircheck"]:hover,
.faq__cta a.btn[href^="/haircheck"]:hover,.card a.btn[href^="/haircheck"]:hover{
  background:color-mix(in srgb,var(--evergreen) 7%,transparent);color:var(--evergreen);
  box-shadow:inset 0 0 0 1.5px var(--evergreen);
}
.cta-pair a[href^="/haircheck"],.nav-drawer__cta a[href^="/haircheck"],
.card a[href^="/haircheck"]{order:1;}
.card .deposit-line{order:2;}
.card{display:flex;flex-direction:column;}
.card > *{width:100%;}
.card__form,.book__state{display:flex;flex-direction:column;}
.card__form > *,.book__state > *{width:100%;}
.book__state{display:none;}
.card[data-state="form"] .book__state--form,.card[data-state="working"] .book__state--working,
.card[data-state="booking"] .book__state--booking,.card[data-state="trouble"] .book__state--trouble{display:flex;}
.card .btn{margin-top:.6rem;}

/* in-copy pills ("free HairCheck" / "$299 assessment") */
.choice{font-family:var(--body);}
.choice--solid,.choice--solid[href^="/haircheck"]{
  background:transparent;color:var(--evergreen);box-shadow:inset 0 0 0 1.5px var(--evergreen);
}
.choice--solid:hover{background:color-mix(in srgb,var(--evergreen) 7%,transparent);}

/* ── header Book pill ─────────────────────────────────── */
header.site .btn--sm,
header.site .nav--single .btn{
  min-height:44px;height:auto;padding:0 20px;font-size:12px;letter-spacing:.12em;
  border-radius:999px;line-height:1;white-space:nowrap;
}

/* ── booking blocks: evergreen, brass button inside ──── */
.foot-band,.hero--copy .hero__cta,.assess,.sticky-cta,.mohr-sticky,.actionbar{
  --porcelain:var(--cream);color:var(--cream);
}
:is(.foot-band,.hero--copy .hero__cta,.assess,.sticky-cta,.mohr-sticky,.actionbar,.glance) a.btn[href*="calendly.com"]{
  background:var(--brass);color:var(--brass-ink);box-shadow:none;
}
:is(.foot-band,.hero--copy .hero__cta,.assess,.sticky-cta,.mohr-sticky,.actionbar,.glance) a.btn[href*="calendly.com"]:hover{
  background:var(--brass-hover);color:var(--brass-ink);
}
/* HairCheck inside an evergreen block: cream text link */
:is(.hero--copy .hero__cta,.assess,.sticky-cta) a.btn[href^="/haircheck"]{
  background:transparent;color:var(--cream);box-shadow:none;min-height:44px;
  padding-inline:6px;text-decoration:underline;text-decoration-thickness:1px;
}
:is(.hero--copy .hero__cta,.assess,.sticky-cta) a.btn[href^="/haircheck"]:hover{
  background:transparent;color:var(--brass);box-shadow:none;
}

/* ── turning formerly dark, non-booking surfaces light ─ */
.panel-green,.founding,.mech,.tier--signature,.blog-aside,.blog-cta,.hc-closer,
.cc-final,.cc-statement,.faq__cta,.close,.reassure,.tclose{
  --porcelain:var(--ink);--brass-light:var(--evergreen);color:var(--ink);
}
.panel-green,.founding{background:var(--cream-light);}
.founding::before{display:none;}
.founding{border-block:0;}
.panel-green h1,.panel-green h2,.panel-green h3,.founding h2,.founding h3,
.blog-aside h2,.blog-cta h2,.hc-closer h3,.cc-final h2,.cc-statement h2{color:var(--evergreen);}
.panel-green .eyebrow,.founding .eyebrow,.cc-final .eyebrow{color:var(--brass-text);}
.panel-green .lede,.results__lede,.metrix__lede{color:var(--ink-2);}
.panel-sage{background:var(--sand);}

/* ── page rhythm: no two neighbours alike, sage once ── */
main > section,#hc-landing > section{background:var(--cream);}
/* home */
main:has(> .hero--copy) > section:nth-of-type(2){background:var(--sand);}
main:has(> .hero--copy) > section:nth-of-type(3){background:var(--sage);}
main:has(> .hero--copy) > section:nth-of-type(4){background:var(--cream);}
main:has(> .hero--copy) > section:nth-of-type(5){background:var(--cream-light);}
main:has(> .hero--copy) > section:nth-of-type(6){background:var(--sand);}
main:has(> .hero--copy) > section:nth-of-type(7){background:var(--sand-warm);}
main:has(> .hero--copy) > section:nth-of-type(8){background:var(--cream);}
main:has(> .hero--copy) > section:nth-of-type(9){background:var(--sand);}
main:has(> .hero--copy) > section:nth-of-type(10){background:var(--cream-light);}
main:has(> .hero--copy) > section:nth-of-type(11){background:var(--cream);}
main:has(> .hero--copy) > section:nth-of-type(12){background:var(--sand);}
/* /assessment */
main:has(> #the-visit) > section:nth-of-type(2){background:var(--sand);}
main:has(> #the-visit) > section:nth-of-type(3){background:var(--cream);}
main:has(> #the-visit) > section:nth-of-type(4){background:var(--sage);}
main:has(> #the-visit) > section:nth-of-type(5){background:var(--cream-light);}
main:has(> #the-visit) > section:nth-of-type(6){background:var(--cream);}
main:has(> #the-visit) > section:nth-of-type(7){background:var(--sand);}
main:has(> #the-visit) > section:nth-of-type(8){background:var(--cream-light);}
main:has(> #the-visit) > section:nth-of-type(9){background:var(--sand-warm);}
main:has(> #the-visit) > section:nth-of-type(10){background:var(--cream-light);}
main:has(> #the-visit) > section:nth-of-type(11){background:var(--sand);}
main:has(> #the-visit) > section:nth-of-type(12){background:var(--cream-light);}
/* /pricing */
main:has(> .phero) > #assess{background:var(--sand-warm);}
main:has(> .phero) > #treat{background:var(--cream-light);}
main:has(> .phero) > #founding{background:var(--sage);}
main:has(> .phero) > #compare{background:var(--cream);}
main:has(> .phero) > section:nth-of-type(6){background:var(--sand);}
main:has(> .phero) > section:nth-of-type(7){background:var(--cream-light);}
/* /haircheck */
#hc-landing > section:nth-of-type(2){background:var(--sand);}
#hc-landing > section:nth-of-type(3){background:var(--cream-light);}
#hc-landing > section:nth-of-type(4){background:var(--sage);}
main:has(> #hc-landing) > #guides{background:var(--cream-light);}
main:has(> #hc-landing) > .hc-flow{background:var(--cream);}
/* /assessment-confirmed */
main:has(> .confirm) > section:nth-of-type(2){background:var(--sand);}
main:has(> .confirm) > section:nth-of-type(3){background:var(--cream-light);}
main:has(> .confirm) > section:nth-of-type(4){background:var(--cream);}
main:has(> .confirm) > section:nth-of-type(5){background:var(--sand-warm);}
main:has(> .confirm) > section:nth-of-type(6){background:var(--sage);}
main:has(> .confirm) > section:nth-of-type(7){background:var(--cream);}
main:has(> .confirm) > section:nth-of-type(8){background:var(--cream-light);}
main:has(> .confirm) > section:nth-of-type(9){background:var(--sand);}
/* /results: one section, set off from the cream footer */
main > section.results:only-of-type{background:var(--cream-light);}
/* /creators */
main:has(> .cc-hero) > section:nth-of-type(2){background:var(--sand);}
main:has(> .cc-hero) > section:nth-of-type(3){background:var(--cream-light);}
main:has(> .cc-hero) > section:nth-of-type(4){background:var(--cream);}
main:has(> .cc-hero) > section:nth-of-type(5){background:var(--sage);}
main:has(> .cc-hero) > section:nth-of-type(6){background:var(--cream-light);}
main:has(> .cc-hero) > section:nth-of-type(7){background:var(--sand);}
main:has(> .cc-hero) > section:nth-of-type(8){background:var(--cream-light);}
main:has(> .cc-hero) > section:nth-of-type(9){background:var(--sand);}
main > section.cc-thanks{background:var(--cream-light);}
/* articles, about, legal, blog index: cream head, light reading surface */
main:has(> .blog-layout){background:var(--cream-light);}
main:has(> .blog-layout) > .blog-hero,main > section.blog-hero,main > section.lhero{background:var(--cream);}
main > section.blog-index,main > section.lbody{background:var(--cream-light);}

/* ── hero (home): centred, large serif, booking strip ── */
.hero{padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(56px,6vw,96px);overflow:visible;}
.hero--copy .hero__grid{display:block;}
.hero--copy .hero__aperture{display:none !important;}
.hero--copy .hero__copy{display:flex;flex-direction:column;align-items:center;text-align:center;}
.hero--copy .hero__copy > h1{order:1;}
.hero--copy .hero__copy > .eyebrow{order:2;margin:1.5rem 0 0;justify-content:center;}
.hero--copy .hero__copy > .hero__lede{order:3;}
.hero--copy .hero__copy > .hero__support{order:4;}
.hero--copy .hero__copy > .hero__philosophy{order:5;}
.hero--copy .hero__copy > .hero__cta{order:6;}
.hero--copy h1,.hero--copy .hero__h1{
  font-size:clamp(46px,7.5vw,108px) !important;line-height:1.02 !important;
  letter-spacing:-.025em !important;max-width:14ch;color:var(--evergreen);
}
.hero--copy .hero__lede{
  margin:1.4rem auto 0 !important;max-width:620px;font-size:clamp(17px,1.3vw,19px) !important;
  line-height:1.6 !important;color:var(--ink-2);
}
.hero--copy .hero__support{margin:.6rem auto 0;max-width:620px;font-size:clamp(16px,1.1vw,18px);color:var(--ink-2);}
.hero--copy .hero__philosophy{margin:1rem 0 0;font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--evergreen);}

/* the strip: $299 line left, brass booking button, HairCheck as cream text */
.hero--copy .hero__cta{
  width:100%;margin-top:clamp(32px,4vw,48px);
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;
  gap:16px 24px;background:var(--evergreen);border-radius:12px;padding:26px 32px;
  text-align:left;
}
.hero--copy .hero__cta .cta-pair{display:contents;}
.hero--copy .hero__tagline{
  grid-column:1;grid-row:1;max-width:none;margin:0;text-align:left;
  font-family:var(--body);font-size:clamp(16px,1.2vw,18px);font-weight:500;
  color:var(--cream);letter-spacing:0;line-height:1.45;
}
.hero--copy .hero__cta a[href*="calendly.com"]{
  grid-column:2;grid-row:1;width:auto !important;min-height:58px;padding:16px 30px;
  white-space:nowrap;font-size:14px;
}
.hero--copy .hero__cta a[href^="/haircheck"]{
  grid-column:3;grid-row:1;width:auto !important;white-space:nowrap;
  font-size:13px;letter-spacing:.1em;
}
@media(max-width:899px){
  .hero--copy .hero__cta{
    grid-template-columns:1fr;justify-items:center;text-align:center;padding:24px 20px;gap:14px;
  }
  .hero--copy .hero__tagline{grid-column:1;grid-row:1;text-align:center;font-size:16px !important;}
  .hero--copy .hero__cta a[href*="calendly.com"]{
    grid-column:1;grid-row:2;width:100% !important;white-space:normal;min-height:56px;
  }
  .hero--copy .hero__cta a[href^="/haircheck"]{grid-column:1;grid-row:3;white-space:normal;}
}
/* trust line under the strip */
.trust{justify-content:center;border-top:0;margin-top:28px;padding-top:0;gap:8px 28px;}
.trust__item{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);}
.trust__item .t-dot{background:var(--evergreen);width:4px;height:4px;}
@media(max-width:899px){.trust{display:flex !important;}}

/* ── hero (/assessment): same pattern, built from the glance card ── */
main:has(> #the-visit) .hero__grid{display:block;}
main:has(> #the-visit) .hero__aperture{display:none !important;}
main:has(> #the-visit) .hero__copy{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:24px;
  justify-items:center;text-align:center;position:relative;isolation:isolate;
}
main:has(> #the-visit) .glance{display:contents;}
main:has(> #the-visit) .hero__copy > *,main:has(> #the-visit) .glance > *{grid-column:1/-1;}
main:has(> #the-visit) .glance__h1{grid-row:1;}
main:has(> #the-visit) .glance__eyebrow{grid-row:2;margin:1.5rem 0 0;}
main:has(> #the-visit) .glance__lede{grid-row:3;}
main:has(> #the-visit) .glance__list{grid-row:4;}
main:has(> #the-visit) .glance__price{grid-row:5;grid-column:1;}
main:has(> #the-visit) .glance__btn{grid-row:5;grid-column:2;}
main:has(> #the-visit) .glance__alt{grid-row:5;grid-column:3;}
main:has(> #the-visit) .glance__where{grid-row:6;}
main:has(> #the-visit) .hero__copy::before{
  content:"";grid-row:5;grid-column:1/-1;align-self:stretch;justify-self:stretch;
  background:var(--evergreen);border-radius:12px;z-index:-1;
}
.hero .glance__h1{
  font-family:var(--serif) !important;font-weight:400;font-size:clamp(46px,7.5vw,108px) !important;
  line-height:1.02 !important;letter-spacing:-.025em;max-width:14ch;color:var(--evergreen);
}
.glance__lede{margin:1.4rem auto 0;max-width:620px;font-size:clamp(17px,1.3vw,19px);color:var(--ink-2);}
.glance__list{
  margin:1.4rem auto clamp(32px,4vw,48px);display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;
}
.glance__list li{font-size:15px;color:var(--ink-2);}
.glance__list li::before{border-color:var(--evergreen);}
main:has(> #the-visit) .glance__price{
  margin:0;padding:26px 0 26px 32px;background:transparent;border-radius:0;
  justify-self:start;align-self:center;text-align:left;
}
.glance__amount{font-family:var(--body);font-size:clamp(17px,1.3vw,19px);font-weight:600;color:var(--cream);}
.glance__terms{font-size:15px;color:var(--cream);margin-top:.2rem;}
main:has(> #the-visit) .glance .glance__btn{
  margin:0;width:auto;min-height:58px;height:auto;padding:16px 30px;border-radius:999px;
  white-space:nowrap;font-size:14px;align-self:center;
}
main:has(> #the-visit) .glance__alt{
  margin:0;padding-right:32px;max-width:15rem;text-align:left;align-self:center;
  font-size:14px;color:var(--cream);
}
main:has(> #the-visit) .glance__alt a{color:var(--cream);font-weight:600;text-decoration:underline;}
main:has(> #the-visit) .glance__alt a:hover{color:var(--brass);}
.glance__where{margin-top:1.25rem;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);}
@media(max-width:899px){
  main:has(> #the-visit) .hero__copy{grid-template-columns:minmax(0,1fr);}
  main:has(> #the-visit) .glance__price{grid-row:5;grid-column:1;justify-self:center;text-align:center;padding:24px 20px 6px;}
  main:has(> #the-visit) .glance .glance__btn{grid-row:6;grid-column:1;margin:8px 20px 0;width:calc(100% - 40px);white-space:normal;min-height:56px;}
  main:has(> #the-visit) .glance__alt{grid-row:7;grid-column:1;margin:0;padding:14px 20px 24px;text-align:center;max-width:none;}
  main:has(> #the-visit) .glance__where{grid-row:8;}
  main:has(> #the-visit) .hero__copy::before{grid-row:5 / 8;grid-column:1;}
}

/* ── other page heroes: same scale, centred where they lead a page ── */
.phero,.hc-hero,.lhero,.confirm,.cc-hero{padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(56px,6vw,96px);}
.phero__grid,.hc-hero__grid{display:block;}
.phero__aperture,.hc-hero__aperture{display:none !important;}
.phero__grid > div:first-child,.hc-hero__copy{text-align:center;max-width:none;display:flex;flex-direction:column;align-items:center;}
.phero h1,.hc-hero h1,.lhero h1,.blog-hero h1,.results__head h1,.cc-hero h1,.confirm h1{
  font-size:clamp(46px,7.5vw,108px) !important;line-height:1.02;letter-spacing:-.025em;
}
.phero h1,.hc-hero h1{max-width:14ch;}
.phero .eyebrow,.hc-hero .eyebrow{order:2;margin:1.5rem 0 0;}
.phero h1,.hc-hero h1{order:1;}
.phero__grid > div:first-child > :not(h1):not(.eyebrow),.hc-hero__copy > :not(h1):not(.eyebrow){order:3;}
.phero__lede,.hc-hero__lede{margin-left:auto;margin-right:auto;max-width:620px;}
.pertreat--hero{justify-content:center;border-top:1px solid var(--rule);}
.hc-hero h1 .lead-in{color:var(--ink-2);font-weight:400;}
.hc-hero h1 .lead-out{color:var(--evergreen);font-weight:400;}
.hc-assure{justify-content:center;}
.hc-cta{align-items:center;}
.hc-place{font-size:14px;color:var(--ink-3);}
.rail{border-top:1px solid var(--rule);}
.rail__item{border-bottom:1.5px dotted var(--rule-dotted);}
.rail__item + .rail__item{border-left-color:var(--rule) !important;}
.rail__name{font-weight:600;font-size:20px;}
.rail__item:hover{background:transparent;}
.blog-hero{border-bottom:1px solid var(--rule);padding-block:clamp(56px,8vw,112px) clamp(48px,6vw,80px);}
.blog-hero__inner{max-width:62rem;}
.blog-hero__dek{color:var(--ink-2);font-size:clamp(17px,1.4vw,20px);max-width:620px;}
.blog-meta{font-family:var(--body);font-size:13px;color:var(--ink-3);}
.lhero h1{max-width:16ch;}

/* ── results / before & after ─────────────────────────── */
.results__head{max-width:52rem;}
main > section.results:only-of-type .results__head{margin-inline:auto;text-align:center;}
main > section.results:only-of-type .results__lede{margin-inline:auto;}
.results h1{font-size:clamp(46px,7.5vw,108px);}
.ba,.ba:hover{
  background:transparent;box-shadow:none;border-radius:0;overflow:visible;transform:none;
}
.ba__pair{gap:6px;background:transparent;}
.ba__pane{border-radius:10px;overflow:hidden;background:var(--sand);}
.ba--feature .ba__pair::before,.ba--feature .ba__pair::after{display:none;}
.ba__tag{
  font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.12em;
  color:var(--cream);background:rgba(22,32,28,.72);box-shadow:none;
}
.ba__tag--after{color:var(--evergreen);background:var(--cream);}
.ba__cap{padding:14px 0 0;gap:4px 16px;}
.ba__region{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--brass-text);}
.ba__note{font-size:15px;color:var(--ink-2);}
.results__grid{gap:clamp(28px,3vw,40px) clamp(16px,2vw,28px);margin-top:clamp(28px,3vw,40px);}
.results__foot{border-top:1px solid var(--rule);}
.results__foot .fine,.hc-results .fine,.psr .fine{color:var(--ink-3);font-size:14px;}
main > section.results:only-of-type .results__foot .nav__link{color:var(--evergreen) !important;}

/* ── mechanism cards (home) ───────────────────────────── */
.mech__grid{gap:12px;background:transparent;border:0;border-radius:0;overflow:visible;}
.mech{background:var(--cream-light);border:1px solid var(--rule);border-radius:12px;}
.mech__abbr{color:var(--brass-text);}
.mech h3{color:var(--evergreen);}
.mech p{color:var(--ink-2);}
.mech__proof p{font-size:clamp(18px,1.6vw,22px);color:var(--evergreen);}

/* why / steps: dotted rows, Fraunces titles for step lists */
.diff{padding-top:1.4rem;border-top:1.5px dotted var(--rule-dotted);}
.diff h3{color:var(--evergreen);}
.diff p,.step p,.beat p{color:var(--ink-2);}
.steps__grid{grid-template-columns:1fr !important;gap:0;}
.steps__grid .step{
  display:grid;grid-template-columns:4rem minmax(0,1fr);gap:4px 24px;align-items:baseline;
  border-top:0;border-bottom:1.5px dotted var(--rule-dotted);padding:28px 0;
}
.steps__grid .step:first-child{border-top:1.5px dotted var(--rule-dotted);}
.step__n{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--brass-text);}
.hc-steps .step{border-top:1.5px dotted var(--rule-dotted);}
.steps__grid .step__n{grid-row:1 / span 2;font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--brass-text);margin:0;}
.steps__grid .step h3,.beat h3{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.4vw,44px);line-height:1.05;letter-spacing:-.025em;color:var(--evergreen);margin:0 0 .4rem;}
.steps__grid .step p{grid-column:2;}
.beat{border-top:1.5px dotted var(--rule-dotted);}
.beat:first-child{border-top:0;}
.visit__list .beat:last-child{border-bottom:1.5px dotted var(--rule-dotted);}
.beat__n{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--brass-text);line-height:3.2;}
.turn__note,.faq__by,.beat__note,.role,.money__row--lead,.final__reassure,.callout,.article .answer{border-left-color:var(--evergreen);}

/* ── programs + offer: light rows, no heavy cards ─────── */
.tier,.tier--essential,.tier--signature,.tier--raised{
  background:transparent;color:var(--ink);box-shadow:none;border-radius:0;
  padding:28px 0 0;border-top:1.5px dotted var(--rule-dotted);
}
.offer__grid,.prog__grid{gap:clamp(28px,4vw,64px);}
.tier__flag,.cmp__flag{
  font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.12em;
  color:var(--cream);background:var(--evergreen);
}
.tier__flag--ghost{visibility:hidden;}
.tier__label,.tier__unit,.tier__each,.tier--essential .tier__label{color:var(--brass-text);}
.tier__name,.tier--essential .tier__name{font-family:var(--body);font-weight:600;font-size:24px;color:var(--evergreen);}
.tier__price b{font-size:clamp(48px,5vw,72px);color:var(--evergreen);}
.tier__per,.tier__proto,.tier__pt,.tier__maint,.tier--essential .tier__per,
.tier--essential .tier__proto,.tier--essential .tier__pt,.tier--essential .tier__maint{color:var(--ink-2);}
.tier__pt b,.tier--essential .tier__pt b{color:var(--evergreen);}
.tier__maint,.tier--essential .tier__maint{border-top:1.5px dotted var(--rule-dotted);}
.tier__maint b{color:var(--ink);}
.tier__list{gap:0;}
.tier__list li,.tier--essential .tier__list li{
  color:var(--ink);padding:12px 0;border-bottom:1.5px dotted var(--rule-dotted);
}
.tier__list li:first-child{border-top:1.5px dotted var(--rule-dotted);}
.tier__list li::before{background:var(--evergreen);width:5px;height:5px;}
.inc li::before,.leave__list li::before,.final__reassure div::before,.scarcity .pulse{background:var(--evergreen);}
.scarcity .pulse{animation:none;box-shadow:none;width:7px;height:7px;}
.offer__anchor{border-top:1px solid var(--rule);}

/* pricing: the $299 assessment card is a booking block */
.assess{
  background:var(--evergreen);color:var(--cream);box-shadow:none;border-radius:14px;
  padding:clamp(28px,4vw,56px);
}
.assess .plabel{color:var(--brass);}
.assess__name{font-family:var(--body);font-weight:600;font-size:24px;color:var(--cream);}
.assess__price{flex-direction:column;align-items:flex-start;gap:.4rem;}
.assess__price b{font-size:clamp(72px,9vw,112px);line-height:.95;color:var(--cream);}
.assess__price span,.assess__incl,.assess__credit{color:var(--cream);}
.assess__credit b{color:var(--cream);}
.assess__credit a{color:var(--cream);}
.assess__side{align-items:stretch;}
@media(min-width:880px){.assess__side{border-left:1px solid rgba(244,239,230,.22);}}
.assess .cta-pair{flex-direction:column;align-items:stretch;gap:10px;}
.assess .cta-pair .btn{width:100%;}
.assess a.btn[href*="calendly.com"]{min-height:56px;}

.founding h2{color:var(--evergreen);}
.founding__save{font-family:var(--body);color:var(--cream);background:var(--evergreen);}
.founding__price b{font-size:clamp(56px,6vw,88px);color:var(--evergreen);}
.founding__was{color:var(--ink-3);}
.pertreat--onGreen .pertreat__fig{color:var(--evergreen);}
.founding .inc .q,.founding__fine,.founding__what,.founding .scarcity{color:var(--ink-2);}

.cmp{background:transparent;box-shadow:none;border-radius:0;}
.cmp__scroll{border-radius:0;}
.cmp th,.cmp td{border-bottom:1.5px dotted var(--rule-dotted);}
.cmp thead th{border-bottom:1px solid var(--rule);}
.cmp .col-adv{background:color-mix(in srgb,var(--sand) 70%,transparent);}
.cmp thead .col-adv{box-shadow:inset 0 2px 0 var(--evergreen);}
.cmp__name{font-family:var(--body);font-weight:600;font-size:18px;}
.cmp__no{color:var(--ink-3);}
.notes li{color:var(--ink-3);font-size:14px;}
.notes li::before{background:var(--ink-3);}
.cont__card{background:var(--cream-light);box-shadow:none;border:1px solid var(--rule);border-radius:14px;}
.cont__opt{box-shadow:none;border:1.5px dotted var(--rule-dotted);}

/* /assessment pricing rows */
.money{background:transparent;border:0;padding:0;border-radius:0;}
.money__row{border-top:1.5px dotted var(--rule-dotted);padding:22px 0;}
.money__row:first-child{border-top:1.5px dotted var(--rule-dotted);padding-top:22px;}
.money__row:last-child{border-bottom:1.5px dotted var(--rule-dotted);}
.money__row--lead{padding-left:1.1rem;}
.money__figure{font-size:clamp(36px,4vw,56px);}
.money__foot{border-top:0;color:var(--ink-3);}
.contrast{background:transparent;border:0;border-radius:0;gap:clamp(20px,3vw,40px);}
.contrast__cell{background:transparent;padding:22px 0 0;border-top:1.5px dotted var(--rule-dotted);}
.path{background:var(--cream-light);border:1px solid var(--rule);border-radius:12px;}
.path__n{color:var(--brass-text);font-family:var(--body);font-weight:600;font-size:13px;}
.role__who{font-weight:600;color:var(--evergreen);}

/* HairMetrix panel, now on a light section */
.metrix__panel{border:1px solid var(--rule);background:var(--cream);}
.metrix__panelHead{color:var(--brass-text);}
.metrix__list li{border-top:1.5px dotted var(--rule-dotted);color:var(--ink);}
.metrix__list b{color:var(--evergreen);}
.metrix__caption,.metrix__foot{color:var(--ink-3);}
.metrix__body{color:var(--ink-2);}
.field__bg{fill:var(--cream);}
.field__frame{stroke:var(--rule-dotted);}
.field__grid line{stroke:var(--rule);}
.field__hairs path{stroke:var(--ink-2);}
.field__loupeRing,.field__focus{stroke:var(--evergreen);}
.field__focus{fill:var(--evergreen);}
.field__caliper line,.field__marks line{stroke:var(--brass-text);}

/* ── FAQ and accordions: no boxes, dotted dividers ───── */
.faq__cluster{border-top:0;}
.faq__item,.faq__item:first-child{border-top:0;border-bottom:1.5px dotted var(--rule-dotted);}
.faq__list > .faq__item:first-child{border-top:1.5px dotted var(--rule-dotted);}
.faq__q{padding:22px 0;align-items:center;min-height:44px;}
.faq__q h3{
  font-family:var(--body);font-weight:600;font-size:clamp(18px,1.4vw,20px);
  line-height:1.4;color:var(--evergreen);letter-spacing:-.005em;
}
.faq__q:hover h3{color:var(--evergreen-dark);}
.faq__mark,.faq__item[open] .faq__mark{border:0;border-radius:0;width:20px;height:20px;margin-top:0;transform:none;}
.faq__mark::before,.faq__mark::after{background:var(--evergreen);}
.faq__mark::before{width:16px;height:1.5px;}
.faq__mark::after{width:1.5px;height:16px;}
.faq__a p{color:var(--ink-2);font-size:clamp(16px,1.1vw,17px);}
.faq__a a{box-shadow:none;text-decoration:underline;text-decoration-thickness:1px;}
.faq__care{background:transparent;border-top:1px solid var(--rule);border-radius:0;padding:28px 0 0;}
.faq__care p,.faq__addr{color:var(--ink-2);}
.faq__cta{background:var(--sand);color:var(--ink);border-radius:14px;}
.faq__cta .aperture{display:none !important;}
.faq__ctaLine{color:var(--evergreen);font-size:clamp(22px,2.4vw,30px);}
.faq__ctaNote{color:var(--ink-2);}
/* creators FAQ uses its own <details> */
.cc-faq details{border:0;border-bottom:1.5px dotted var(--rule-dotted);border-radius:0;background:transparent;}
.cc-faq__icon,.cc-faq details[open] .cc-faq__icon{background:transparent;border:0;}
.cc-faq__icon::before,.cc-faq__icon::after,.cc-faq details[open] .cc-faq__icon::before{background:var(--evergreen);}

/* ── booking card (home / assessment) ────────────────── */
.card{background:var(--cream-light);border-radius:14px;box-shadow:none;border:1px solid var(--rule);}
.card__title{font-weight:600;font-size:22px;}
.card__intro,.deposit-line p{color:var(--ink-2);}
.deposit-line{border-top:1px solid var(--rule);}
.field label{font-family:var(--body);color:var(--ink-2);}
.field input{background:#fff;border-color:var(--rule-dotted);}

/* guides list */
.guides__link{border-bottom:1.5px dotted var(--rule-dotted);color:var(--evergreen);}
.guides .lede,.guides__grid{max-width:56rem;}
@media(min-width:900px){.guides__grid{grid-template-columns:repeat(3,1fr);}}

/* ── articles ─────────────────────────────────────────── */
.article{font-size:clamp(16px,1.1vw,18px);}
.article h2{font-size:clamp(32px,3.6vw,48px);}
.article h3{font-family:var(--body);font-weight:600;font-size:clamp(20px,1.6vw,24px);line-height:1.3;}
.article .answer{color:var(--evergreen);}
.article th,.article td{border-bottom:1.5px dotted var(--rule-dotted);}
.article thead th{font-family:var(--body);font-size:13px;letter-spacing:.14em;color:var(--brass-text);}
.key-box,.cost-box{background:var(--sand);border-radius:12px;}
.key-box h2{font-size:clamp(26px,2.4vw,34px);}
.note-box{border:1px solid var(--rule);border-radius:12px;}
.blog-aside{background:transparent;padding:0;border-radius:0;border-top:1px solid var(--rule);padding-top:20px;}
.blog-aside h2{font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-text);}
.blog-aside p{color:var(--ink-2);}
.toc li{border-top:0;border-bottom:1.5px dotted var(--rule-dotted);}
.toc a{color:var(--evergreen);font-size:15px;min-height:44px;display:flex;align-items:center;}
.blog-cta{background:var(--sand-warm);border-radius:14px;}
.blog-cta p{color:var(--ink-2);}
.blog-cta a.btn[href^="/haircheck"]{color:var(--evergreen) !important;box-shadow:inset 0 0 0 1.5px var(--evergreen) !important;}
.references,.review-note{color:var(--ink-3);}
.review-note{border-top:1px solid var(--rule);}
.article-card{border:0;border-top:1.5px dotted var(--rule-dotted);border-radius:0;padding:28px 0;}
.article-card:hover{transform:none;border-color:var(--rule-dotted);}
.article-card h2{font-size:clamp(28px,3.2vw,44px);}
.article-card p{color:var(--ink-2);}
.article-card__more{font-family:var(--body);font-size:13px;letter-spacing:.12em;}

/* ── legal ────────────────────────────────────────────── */
.lmeta{border-top:1px solid var(--rule);}
.lsum{background:var(--sand);border-radius:12px;}
.lsum li::before{background:var(--evergreen);box-shadow:none;}
.lsum__note{color:var(--ink-3);}

/* ── HairCheck page bits ─────────────────────────────── */
.hc-closer{background:var(--sand-warm);color:var(--ink);border-radius:14px;}
.hc-closer .hc-price{color:var(--ink);}
.hc-closer .hc-price b{color:var(--evergreen);}

/* ── creators ─────────────────────────────────────────── */
.cc-statement,.cc-final{background:var(--sand);}
.cc-final{background:var(--cream-light);}
.cc-statement blockquote{color:var(--evergreen);font-size:clamp(24px,3vw,38px);}

/* ── confirmation / closing sections on light ─────────── */
.close,.tclose,.reassure{text-align:center;}
.close__note,.reassure__sub{color:var(--ink-2);}

/* ── footer: closing band, columns, big wordmark ─────── */
footer.site{background:var(--cream);border-top:1px solid var(--rule);padding-block:0 32px;}
.foot-band-wrap{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px);}
.foot-band{
  display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;
  background:var(--evergreen);border-radius:12px;padding:26px 32px;
}
.foot-band__line{
  margin:0;font-family:var(--body);font-weight:600;font-size:clamp(15px,1.3vw,18px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--cream);
}
.foot-band .btn{min-height:56px;}
@media(max-width:767px){
  .foot-band{flex-direction:column;text-align:center;padding:26px 20px;}
  .foot-band .btn{width:100%;}
}
.foot{padding-top:8px;}
.foot__meta{color:var(--ink-2);font-size:15px;}
.foot__contact{color:var(--ink-2);font-size:15px;}
.foot__contact a{color:var(--evergreen);}
.foot__nav{gap:4px 24px;}
footer.site .nav__link{font-size:12px;letter-spacing:.14em;color:var(--evergreen);min-height:44px;}
footer.site .nav__link::after{display:none;}
footer.site .nav__link:hover{text-decoration:underline;}
footer.site > .foot__nav{max-width:var(--maxw);margin:28px auto 0;padding:20px var(--pad) 0;border-top:1px solid var(--rule);}
.foot__legal,.foot__disclaimer{font-size:13px;color:var(--ink-3);line-height:1.6;}
.foot__disclaimer{border-top:1px solid var(--rule);}
.foot__wordmark{
  margin:clamp(32px,4vw,56px) 0 0;font-family:var(--body);font-weight:700;
  font-size:clamp(64px,7vw,96px);line-height:1;letter-spacing:.24em;color:var(--evergreen);
  margin-right:-.24em;user-select:none;
}
footer.site .logo{height:1.4rem;}

/* ── mobile sticky booking bar (<768px) ─────────────── */
.mohr-sticky{display:none;}
@media(max-width:767px){
  .sticky-cta,.mohr-sticky{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:var(--evergreen);border-top:0;box-shadow:0 -8px 24px -16px rgba(14,39,31,.6);
    backdrop-filter:none;-webkit-backdrop-filter:none;
    transition:transform .35s var(--ease),visibility 0s linear 0s;
  }
  .sticky-cta .btn,.mohr-sticky .btn{
    flex:0 0 auto;min-height:44px;height:44px;max-height:none;padding:0 20px;
    font-size:13px;letter-spacing:.1em;white-space:nowrap;
  }
  .sticky-cta a[href*="calendly.com"]{order:2;}
  .sticky-cta a[href^="/haircheck"]{order:1;flex:0 1 auto;padding:0 4px;font-size:12px;}
  .mohr-sticky__label{
    font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    color:var(--cream);line-height:1.3;
  }
  /* shown only between the hero booking button and the footer band */
  .has-sticky-js .sticky-cta:not(.is-visible),
  .has-sticky-js .mohr-sticky:not(.is-visible){
    transform:translateY(110%);visibility:hidden;
    transition:transform .35s var(--ease),visibility 0s linear .35s;
  }
  body:has(> .sticky-cta),body:has(> .mohr-sticky){
    padding-bottom:calc(64px + env(safe-area-inset-bottom,0px));
  }
  body.page-photo-screen{padding-bottom:0;}
}
@media(min-width:768px){
  .sticky-cta,.mohr-sticky{display:none !important;}
  body:has(> .sticky-cta),body:has(> .mohr-sticky){padding-bottom:0;}
}
/* /assessment keeps its own bar and script; restyled to match */
.actionbar{
  background:var(--evergreen);border-top:0;backdrop-filter:none;-webkit-backdrop-filter:none;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
}
.actionbar.is-band{transform:translateY(110%);}
.actionbar__what{color:var(--cream);font-size:12px;}
.actionbar__what b{color:var(--cream);font-size:22px;}
.actionbar .btn{min-height:44px;padding:0 18px;font-size:12px;letter-spacing:.1em;}
@media(min-width:768px){.actionbar{display:none;}}
@media(max-width:767px){body:has(> .actionbar){padding-bottom:calc(64px + env(safe-area-inset-bottom,0px));}}
@media(min-width:768px) and (max-width:859px){body:has(> .actionbar){padding-bottom:0;}}

/* ── mobile type and layout tidy ──────────────────────── */
@media(max-width:899px){
  .hero{padding-top:48px;padding-bottom:56px;}
  .eyebrow{font-size:12px;letter-spacing:.14em;}
  .cta-pair .btn,.card .btn,.nav-drawer__cta .btn{min-height:52px;font-size:13px;}
}
@media(max-width:767px){
  .steps__grid .step{grid-template-columns:1fr;}
  .steps__grid .step__n{grid-row:auto;}
  .steps__grid .step p{grid-column:1;}
  .beat{grid-template-columns:1fr;}
  .beat__n{grid-row:auto;line-height:1.5;}
  .tier__price b{font-size:56px;}
  .assess__price b{font-size:84px;}
}
@media(max-width:899px){
  .glance__list{flex-direction:column;align-items:center;gap:8px;}
}
.tier--essential .tier__unit,.tier--essential .tier__each{color:var(--brass-text);}
.tier__maint,.tier--essential .tier__maint{border-top:0;padding-top:16px;}
/* long article titles: same left edge as the body, capped below the hero size */
.blog-hero__inner{max-width:var(--maxw);}
.blog-hero__inner > *{max-width:62rem;}
.blog-hero h1{font-size:clamp(46px,6vw,84px) !important;}

/* ═════════════════════════════════════════════════════════════════════════════
   v2 (2026-10-16): closer to the desktop homepage mockup.
   Text wordmark, no header tagline, no vertical accent bars, mockup header,
   hero strip order, results row, centred FAQ, column footer; mobile tuned.
   ═════════════════════════════════════════════════════════════════════════════ */

/* content is 1320px wide; the side padding sits outside it */
.wrap{max-width:calc(var(--maxw) + 2 * var(--pad));}
footer.site > .foot__nav{max-width:calc(var(--maxw) + 2 * var(--pad));}

/* ── wordmark: Inter 700, 0.24em tracking, evergreen ──
   The logo <img> stays in the markup (its alt text is still what screen
   readers announce); it is only hidden visually and the letters are drawn in
   CSS. The "/ ''" alt text keeps the drawn letters from being read twice. */
.nav__brand,.card__head{position:relative;}
.nav__brand .logo,.card__head .logo{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);opacity:0;
}
.nav__brand{align-items:center;min-height:44px;text-decoration:none;}
.nav__brand::after{
  content:"MOHR";content:"MOHR" / "";
  font-family:var(--body);font-weight:700;font-size:26px;line-height:1;
  letter-spacing:.24em;margin-right:-.24em;color:var(--evergreen);
}
.card__head::after{
  content:"MOHR";content:"MOHR" / "";
  font-family:var(--body);font-weight:700;font-size:14px;letter-spacing:.24em;color:var(--evergreen);
}
/* the header tagline goes */
.nav__tag,header.site .nav__tag{display:none !important;}

/* ── header, as drawn ─────────────────────────────────── */
header.site .nav{padding-block:20px;min-height:84px;}
.nav__end{gap:34px;}
.nav__link[aria-current="page"]::after{transform:scaleX(0);}
.nav__link:hover::after{transform:scaleX(1);}
header.site .btn--sm,header.site .nav--single .btn{min-height:44px;padding:0 22px;font-size:13px;}

/* ── no vertical accent bars on supporting text ───────── */
.faq__by,.turn__note,.beat__note,.role,.money__row--lead,.final__reassure,.callout,
.article .answer,.hc-note,.lnote,.pstep__note{
  border-left:0 !important;padding-left:0 !important;
}
.hc-text{box-shadow:none;text-decoration:underline;text-decoration-thickness:1px;}
.hc-text:hover{box-shadow:none;}

/* ── hero ─────────────────────────────────────────────── */
.hero--copy h1,.hero--copy .hero__h1,.phero h1,.hc-hero h1,.hero .glance__h1{
  max-width:none !important;text-wrap:balance;
}
.hero{padding-top:clamp(48px,8.5vw,120px);}
.hero--copy .hero__copy > .eyebrow{margin-top:20px;}
.hero--copy .hero__lede{margin-top:28px !important;}

/* strip, as drawn: label on the left, HairCheck text link, booking button far right */
@media(min-width:900px){
  .hero--copy .hero__cta{grid-template-columns:minmax(0,1fr) auto auto;margin-top:56px;}
  .hero--copy .hero__cta a[href^="/haircheck"]{grid-column:2;}
  .hero--copy .hero__cta a[href*="calendly.com"]{grid-column:3;}
  main:has(> #the-visit) .hero__copy{grid-template-columns:minmax(0,1fr) auto auto;}
  main:has(> #the-visit) .glance__alt{grid-column:2;padding-right:0;max-width:none;}
  main:has(> #the-visit) .glance__btn{grid-column:3;margin-right:32px !important;}
}
.hero--copy .hero__tagline{
  font-size:14px !important;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.glance__amount{font-size:14px;letter-spacing:.12em;text-transform:uppercase;}
/* HairCheck inside an evergreen strip reads as a plain underlined sentence */
:is(.hero--copy .hero__cta,.assess) a.btn[href^="/haircheck"]{
  text-transform:none;letter-spacing:0;font-weight:500;font-size:15px;
}
main:has(> #the-visit) .glance__alt a{font-weight:500;}
.hero--copy .hero__cta a[href*="calendly.com"],main:has(> #the-visit) .glance .glance__btn{min-height:58px;}

/* ── results: centred head, pairs in a row, chips inside the photo ── */
.results__head{margin-inline:auto;text-align:center;}
.results__lede{margin-inline:auto;}
@media(min-width:1000px){
  .results > .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px;}
  .results > .wrap:has(.results__grid > figure:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr));}
  .results > .wrap > :not(figure):not(.results__grid){grid-column:1/-1;}
  .results > .wrap > .results__grid{display:contents;}
  .results > .wrap > .results__head{margin-bottom:16px;}
  .ba--wide{grid-column:auto;}
}
.ba__pane img{aspect-ratio:3/4;object-fit:cover;}
.ba__tag,.ba__tag--after{
  top:auto;bottom:12px;left:12px;background:var(--cream-light);color:var(--brass-text);
  font-size:11px;letter-spacing:.12em;border-radius:6px;padding:6px 10px;backdrop-filter:none;
}
.ba__cap{flex-direction:column;gap:4px;padding-top:14px;}
.ba__region{color:var(--evergreen);font-size:13px;}
.ba__note{font-size:14px;color:var(--ink-3);flex:none;}
.results__foot{border-top:0;justify-content:center;text-align:center;}
.results__foot .fine{margin-inline:auto;max-width:46rem;}

/* ── FAQ: centred head and list ───────────────────────── */
.faq__head{margin-inline:auto;text-align:center;max-width:52rem;}
.faq__head .lede,.faq__by{margin-inline:auto;}
.faq__cluster,.faq__care{max-width:1120px;margin-inline:auto;}
/* "still deciding" panel: outline box, as in the mockup */
.faq__cta{
  background:transparent;border:1px solid var(--evergreen);border-radius:12px;
  max-width:var(--maxw);margin-inline:auto;
}

/* sage band: h2 left, copy + button right */
.turn__grid{align-items:center;}

/* ── footer: link columns + contact, rule, big wordmark ── */
footer.site .foot .logo{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
}
.foot__nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;margin-top:0;}
.foot__nav + .foot__nav{margin-top:0;}
footer.site .nav__link{min-height:36px;padding-block:6px;font-size:13px;}
.foot__meta,.foot__contact{margin:0 0 12px;font-size:15px;line-height:1.7;color:var(--ink-2);}
.foot__contact a{text-decoration:none;color:var(--ink-2);}
.foot__contact a:hover{color:var(--evergreen);text-decoration:underline;}
.foot__disclaimer{grid-column:auto;border-top:0;padding-top:0;}
@media(min-width:900px){
  footer.site .foot{
    display:grid !important;grid-template-columns:minmax(0,2.6fr) minmax(0,1fr);
    grid-auto-flow:row dense;gap:4px 64px;align-items:start;max-width:calc(var(--maxw) + 2 * var(--pad));
    padding-top:8px;
  }
  footer.site .foot > div{display:contents;}
  footer.site .foot nav{grid-column:1;}
  footer.site .foot :is(.foot__meta,.foot__contact,.foot__legal,.foot__disclaimer){grid-column:2;margin:0 0 12px;}
  footer.site > .foot__nav{grid-template-columns:repeat(5,minmax(0,1fr));}
}
.foot__wordmark{
  border-top:1px solid var(--rule);padding-top:28px;margin-top:40px;font-size:clamp(64px,7vw,96px);
}

/* ── mobile ──────────────────────────────────────────── */
@media(max-width:899px){
  header.site .nav{padding-block:10px;min-height:64px;}
  .nav__brand::after{font-size:20px;}
  header.site .nav__end{gap:8px;}
  .foot__nav{grid-template-columns:repeat(2,minmax(0,1fr));}
  footer.site .nav__link{min-height:44px;}
  footer.site .foot{display:flex;flex-direction:column;gap:12px;}
  .faq__cta{padding:24px 20px;}
  .results__grid{gap:32px;}
}
@media(max-width:767px){
  .hero{padding-top:40px;padding-bottom:48px;}
  .hero--copy h1,.hero--copy .hero__h1,.hero .glance__h1,.phero h1,.hc-hero h1{
    font-size:clamp(40px,11.5vw,56px) !important;line-height:1.04 !important;
  }
  h2{font-size:clamp(32px,8.6vw,44px);}
  .hero--copy .hero__lede,.glance__lede{font-size:17px !important;}
  .hero--copy .hero__cta{margin-top:32px;}
  .hero--copy .hero__tagline{font-size:13px !important;}
  .ba__tag,.ba__tag--after{bottom:8px;left:8px;font-size:10px;padding:5px 8px;}
  .ba__pane img{aspect-ratio:1;}
  .faq__q h3{font-size:17px;}
  .faq__head{text-align:left;}
  .results__head{text-align:left;}
  main > section.results:only-of-type .results__head{text-align:center;}
  .foot__wordmark{font-size:64px;letter-spacing:.2em;}
  .trust{gap:6px 18px;}
  .trust__item{font-size:11px;}
}
.foot--home .foot__nav--primary,.foot--home .foot__nav--policies{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;margin-top:0;max-width:none;
}
.foot--home{max-width:none;}
.foot__wordmark{margin-right:0;}
.results__foot{flex-direction:column;align-items:center;gap:20px;}
@media(max-width:899px){
  .foot--home .foot__nav--primary,.foot--home .foot__nav--policies{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ── home hero: HairMetrix clip behind the copy ─────────
   The clip is busy (gloves, scrubs, a bright phone screen), so it sits under an
   evergreen scrim and the hero type flips to cream to keep contrast. */
.hero--video{position:relative;isolation:isolate;overflow:hidden;background:var(--evergreen-dark) !important;}
.hero__media{position:absolute;inset:0;z-index:-1;overflow:hidden;
  background:var(--evergreen-dark) url("/assets/video/hairmetrix-hero-poster.jpg") center/cover no-repeat;}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;}
.hero__media::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%,rgba(14,39,31,.55),rgba(14,39,31,.2) 75%),
    linear-gradient(180deg,rgba(14,39,31,.62) 0%,rgba(14,39,31,.5) 45%,rgba(14,39,31,.82) 100%);}
.hero--video h1,.hero--video .hero__h1{color:var(--cream) !important;text-shadow:0 2px 24px rgba(0,0,0,.35);}
.hero--video h1 .soft{color:var(--brass);}
.hero--video .eyebrow{color:var(--brass) !important;}
.hero--video .hero__lede,.hero--video .hero__support{color:color-mix(in srgb,var(--cream) 90%,transparent) !important;
  text-shadow:0 1px 12px rgba(0,0,0,.35);}
.hero--video .hero__philosophy{color:var(--brass);}
.hero--video .hero__cta{background:rgba(14,39,31,.78);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cream) 14%,transparent);}
.hero--video .trust__item{color:color-mix(in srgb,var(--cream) 88%,transparent);}
.hero--video .trust__item .t-dot{background:var(--brass);}
.hero--video :focus-visible{outline-color:var(--brass);}
@media(prefers-reduced-motion:reduce){.hero__video{display:none;}}

/* ── home header: see-through over the hero clip ────────
   At the top of the page the bar has no fill and no rule, so the clip runs
   right up to the top edge; the hero is pulled up under it. Once the page
   scrolls the usual cream bar comes back. */
header.site.site--over{transition:background .3s var(--ease),border-color .3s var(--ease);}
header.site.site--over:not(.scrolled){background:transparent;border-bottom-color:transparent;box-shadow:none;}
header.site.site--over:not(.scrolled) .nav__brand::after,
header.site.site--over:not(.scrolled) .nav__link,
header.site.site--over:not(.scrolled) .nav__burger{color:var(--cream);}
header.site.site--over:not(.scrolled) .nav__link::after{background:var(--cream);}
header.site.site--over:not(.scrolled) a.btn[href*="calendly.com"]{background:var(--brass);color:var(--brass-ink);}
header.site.site--over:not(.scrolled) a.btn[href*="calendly.com"]:hover{background:var(--brass-hover);color:var(--brass-ink);}
header.site.site--over:not(.scrolled) :focus-visible{outline-color:var(--brass);}
.hero--video{margin-top:-85px;padding-top:calc(clamp(48px,8.5vw,120px) + 85px);}
@media(max-width:899px){
  .hero--video{margin-top:-65px;padding-top:calc(40px + 65px);}
}

/* ── Scalp & Hair Care: the second, cosmetic path ───────
   A quiet nav link and one homepage band pointing at /scalp-care. Both are
   deliberately lower-key than the clinical links and booking buttons so the
   Hair Restoration funnel keeps the visual lead. Brand values are literal here
   (Slate #4F544A text, Brass #B0895A as decoration only, Sage Mist #E4E7DF). */
.nav__end > .nav__link--care{color:#4F544A;}
.nav__end > .nav__link--care::before{
  content:"";width:5px;height:5px;border-radius:50%;background:#B0895A;margin-right:10px;flex:0 0 auto;
}
.nav__end > .nav__link--care:hover{color:var(--evergreen);}
.nav-drawer__nav a.nav-drawer__link--care{color:#4F544A;}

.also-care{padding-block:clamp(40px,5vw,64px);}
.also-care__inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;
  background:#E4E7DF;border-radius:14px;padding:clamp(22px,3vw,36px) clamp(22px,3vw,40px);
}
.also-care__label{
  display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--evergreen);
}
.also-care__label::before{content:"";width:7px;height:7px;border-radius:50%;background:#B0895A;}
.also-care__line{margin:0;max-width:44rem;font-size:clamp(16px,1.2vw,18px);color:#4F544A;}
.also-care__link{
  display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:15px;color:var(--evergreen);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;white-space:nowrap;
}
.also-care__link:hover{text-decoration-color:#B0895A;}