/* ─────────────────────────────────────────────────────────────────────────────
   MOHR  - Scalp & Hair Care (/scalp-care). Loaded after mohr.css and
   mohr-theme.css, on this page only.

   The palette is the MOHR brand palette, exactly as specified, scoped to
   body.care so the clinical pages keep their current values untouched:

     Evergreen    #153A2E  primary
     Porcelain    #F4F2EC  background
     Brass        #B0895A  decorative details only, never readable text
     Brass Light  #C9A87B  readable text on dark backgrounds only
     Sage Mist    #E4E7DF  panels
     Ink          #1B1C18  text
     Slate        #4F544A  secondary text

   The shared sheets read --cream, --ink, --brass and friends, so those names
   are re-pointed here as well; the derived names (--porcelain, --slate,
   --brass-light) are declared again because a var() in :root resolves there.
   ───────────────────────────────────────────────────────────────────────────── */
body.care{
  --care-evergreen:#153A2E;
  --care-porcelain:#F4F2EC;
  --care-brass:#B0895A;
  --care-brass-light:#C9A87B;
  --care-sage:#E4E7DF;
  --care-ink:#1B1C18;
  --care-slate:#4F544A;
  --care-line:color-mix(in srgb,var(--care-slate) 22%,var(--care-porcelain));

  --evergreen:var(--care-evergreen);
  --evergreen-dark:var(--care-evergreen);
  --cream:var(--care-porcelain);
  --cream-light:var(--care-porcelain);
  --porcelain:var(--care-porcelain);
  --sand:var(--care-sage);
  --sand-warm:var(--care-sage);
  --sage:var(--care-sage);
  --ink:var(--care-ink);
  --ink-2:var(--care-slate);
  --ink-3:var(--care-slate);
  --slate:var(--care-slate);
  --brass:var(--care-brass-light);       /* shared sheets use it as text/fill on evergreen */
  --brass-hover:var(--care-brass-light);
  --brass-light:var(--care-brass-light);
  --brass-ink:var(--care-evergreen);
  --brass-text:var(--care-evergreen);    /* labels on light: never brass text */
  --rule:var(--care-line);
  background:var(--care-porcelain);color:var(--care-ink);
}
body.care ::selection{background:var(--care-evergreen);color:var(--care-porcelain);}

/* ── shared bits ─────────────────────────────────────── */
.care-eyebrow{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 20px;
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--care-evergreen);
}
.care-eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--care-brass);flex:0 0 auto;
}
.care-eyebrow--dark{color:var(--care-brass-light);}
.care-chip{
  display:inline-flex;align-items:center;min-height:28px;padding:4px 12px;border-radius:999px;
  border:1px solid var(--care-brass);color:var(--care-slate);background:transparent;
  font-size:11px;letter-spacing:.12em;
}
.care-eyebrow--dark .care-chip{color:var(--care-brass-light);}
.care-head{max-width:46rem;margin-bottom:clamp(36px,5vw,64px);}
.care-lede{font-size:clamp(17px,1.2vw,19px);line-height:1.6;color:var(--care-slate);margin:0;}
.care-head h2{margin:0 0 20px;}
.care-fine{font-size:14px;color:var(--care-slate);margin:28px 0 0;}
.care-soft{display:block;color:var(--care-slate);}

.care-btn{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  min-height:56px;padding:14px 30px;border-radius:999px;border:0;cursor:pointer;
  background:var(--care-evergreen);color:var(--care-porcelain);text-decoration:none;
  font-family:var(--body);font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.2;
  transition:box-shadow .25s var(--ease),opacity .25s var(--ease);
}
.care-btn:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--care-brass) 55%,transparent);}
.care-btn--onDark{background:var(--care-brass-light);color:var(--care-evergreen);}
.care-btn--onDark:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--care-porcelain) 35%,transparent);}
.care-btn[disabled]{opacity:.6;cursor:progress;}

.care-textlink{
  display:inline-flex;flex-wrap:wrap;gap:0 .35em;align-items:center;min-height:44px;
  color:var(--care-slate);font-size:15px;text-decoration:none;
}
.care-textlink span{color:var(--care-evergreen);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;}
.care-textlink:hover span{text-decoration-color:var(--care-brass);}

/* ── nav: current page on the subtle care link ────────── */
body.care .nav__link--care{color:var(--care-evergreen);}

/* ── hero ────────────────────────────────────────────── */
.care-hero{padding-top:clamp(48px,8vw,112px);padding-bottom:clamp(56px,8vw,112px);}
.care-hero__grid{display:grid;gap:48px;align-items:center;}
@media(min-width:1000px){.care-hero__grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:72px;}}
.care-hero h1{font-size:clamp(42px,6.2vw,88px);margin:0 0 28px;text-wrap:balance;}
.care-hero .care-lede{max-width:40rem;}
.care-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:40px;}
@media(max-width:599px){.care-hero__cta .care-btn{width:100%;}}

.care-snapshot{
  background:var(--care-sage);border-radius:16px;padding:clamp(24px,3vw,36px);
  position:relative;overflow:hidden;
}
/* decorative brass aperture ring, the MOHR focusing mark */
.care-snapshot::after{
  content:"";position:absolute;width:220px;height:220px;right:-80px;top:-80px;border-radius:50%;
  border:1px solid var(--care-brass);opacity:.55;pointer-events:none;
}
.care-snapshot__label{
  margin:0 0 18px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--care-evergreen);
}
.care-snapshot__list{list-style:none;margin:0;padding:0;}
.care-snapshot__list li{
  display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:16px 0;
  border-top:1px solid color-mix(in srgb,var(--care-slate) 20%,var(--care-sage));
  font-size:15px;line-height:1.5;color:var(--care-slate);
}
.care-snapshot__list b{display:block;color:var(--care-ink);font-weight:600;margin-bottom:2px;}
.care-snapshot__n{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--care-evergreen);padding-top:2px;}
.care-snapshot__foot{
  margin:8px 0 0;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--care-slate) 20%,var(--care-sage));
  font-size:14px;font-weight:600;color:var(--care-evergreen);
}

/* ── two paths ───────────────────────────────────────── */
.care-paths{background:var(--care-sage);}
.care-paths__grid{display:grid;gap:20px;}
@media(min-width:820px){.care-paths__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}}
.care-path{
  background:var(--care-porcelain);border-radius:14px;padding:clamp(24px,3vw,40px);
  display:flex;flex-direction:column;border:1px solid transparent;
}
.care-path--this{border-color:var(--care-brass);}
.care-path__tag{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--care-slate);}
.care-path h3{margin:0 0 16px;}
.care-path ul{margin:0 0 24px;padding:0;list-style:none;flex:1;}
.care-path li{position:relative;padding:8px 0 8px 20px;color:var(--care-slate);font-size:16px;line-height:1.5;}
.care-path li::before{content:"";position:absolute;left:0;top:17px;width:6px;height:6px;border-radius:50%;background:var(--care-brass);}
.care-path__link{
  align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;
  color:var(--care-evergreen);font-weight:600;font-size:15px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
}
.care-path__link::after{content:"→";content:"→" / "";margin-left:.45em;text-decoration:none;}
.care-path__link:hover{text-decoration-color:var(--care-brass);}

/* ── steps ───────────────────────────────────────────── */
.care-steps__grid{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:none;}
@media(min-width:720px){.care-steps__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;}}
@media(min-width:1100px){.care-steps__grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
.care-step{border-top:1px solid var(--care-line);padding:24px 0 32px;}
.care-step__n{
  display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--care-evergreen);
}
.care-step__n::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--care-brass);}
.care-step h3{margin:14px 0 10px;}
.care-step p{margin:0;color:var(--care-slate);font-size:16px;}

/* ── honest ──────────────────────────────────────────── */
.care-honest{background:var(--care-sage);}
.care-honest__grid{display:grid;gap:24px 72px;}
@media(min-width:960px){.care-honest__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:start;}}
.care-honest h2{margin:0;}
.care-honest__body p{margin:0 0 16px;font-size:clamp(17px,1.2vw,19px);color:var(--care-ink);}
.care-honest__body strong{color:var(--care-evergreen);}
.care-honest__note{
  margin-top:28px;padding:22px 24px;border-radius:12px;background:var(--care-porcelain);
  border:1px solid var(--care-evergreen);
}
.care-honest__note p{margin:0;font-size:16px;}
.care-honest__note a{color:var(--care-evergreen);font-weight:600;}

/* ── home care ───────────────────────────────────────── */
.care-home{border-top:1px solid var(--care-line);}
.care-home__inner{max-width:calc(46rem + 2 * var(--pad));}
.care-home h2{margin:0 0 20px;}

/* ── join (evergreen) ────────────────────────────────── */
.care-join{background:var(--care-evergreen);color:var(--care-porcelain);}
.care-join__grid{display:grid;gap:40px;align-items:start;}
@media(min-width:960px){.care-join__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:80px;}}
.care-join h2{color:var(--care-porcelain);margin:0 0 24px;}
.care-join__copy p{color:color-mix(in srgb,var(--care-porcelain) 88%,var(--care-evergreen));margin:0 0 16px;}
.care-join a{color:var(--care-brass-light);}
.care-join :focus-visible{outline-color:var(--care-brass-light);}
.care-join__alt{font-size:15px;}

.care-book{
  background:color-mix(in srgb,var(--care-porcelain) 6%,var(--care-evergreen));
  border:1px solid color-mix(in srgb,var(--care-porcelain) 18%,var(--care-evergreen));
  border-radius:16px;padding:clamp(22px,3vw,36px);
}
.care-book__name{margin:0 0 12px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--care-brass-light);}
.care-book__amt{margin:0 0 20px;font-family:var(--serif);font-weight:400;font-size:clamp(40px,4vw,56px);line-height:1;letter-spacing:-.02em;color:var(--care-porcelain);}
.care-book__list{margin:0 0 28px;padding-left:1.2em;color:var(--care-porcelain);display:grid;gap:8px;}
.care-book .care-btn{width:100%;}

/* ── questions ───────────────────────────────────────── */
.care-faq__list{max-width:56rem;border-top:1px solid var(--care-line);}
.care-faq__item{border-bottom:1px solid var(--care-line);}
.care-faq__item summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
  min-height:64px;padding:16px 0;font-weight:600;font-size:clamp(17px,1.3vw,19px);color:var(--care-evergreen);
}
.care-faq__item summary::-webkit-details-marker{display:none;}
.care-faq__item summary::after{content:"+";content:"+" / "";font-size:24px;font-weight:400;color:var(--care-evergreen);flex:0 0 auto;}
.care-faq__item[open] summary::after{content:"–";content:"–" / "";}
.care-faq__item p{margin:0 0 22px;color:var(--care-slate);max-width:48rem;}
.care-faq__item a{color:var(--care-evergreen);font-weight:600;}

/* ── footer band on this page links to /assessment, not Calendly ── */
body.care .foot-band .care-band__btn{background:var(--care-brass-light);color:var(--care-evergreen);}
body.care .foot-band .care-band__btn:hover{background:var(--care-brass-light);color:var(--care-evergreen);box-shadow:0 0 0 3px color-mix(in srgb,var(--care-porcelain) 35%,transparent);}
body.care .foot-band__line{color:var(--care-porcelain);}

/* Start with a scalp scan */
.care-scan{border-top:1px solid var(--care-line);}
.care-scan__grid{display:grid;gap:36px;align-items:center;}
@media(min-width:960px){.care-scan__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:72px;}}
.care-scan h2{margin:0 0 20px;}
.care-scan .care-lede{margin:0 0 18px;}
.care-scan .care-btn{margin-top:10px;}
.care-scan__concerns{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;}
.care-scan__concerns li{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 18px;border-radius:999px;
  background:var(--care-sage);border:1px solid var(--care-line);color:var(--care-evergreen);font-weight:500;
}
.care-scan__concerns li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--care-brass);}
@media(max-width:599px){.care-scan .care-btn{width:100%;}}