/* =====================================================================
   Hair & Scalp Care (/hair-and-scalp-care/), R4 30/09/2026. Loaded after clinic-proto.css.
   Trina's Hair & Scalp Care prototype (bmb-hair-scalp-care) in the family of her clinic pages, built
   the same way as /tcm-womens-health/: the BMB site header and footer stay, a clinic sub-bar sits under
   the header, type is the site's Quicksand body with Playfair Display headings (her italic second
   lines kept), and her sections run in her order: lavender hero with her photo (mirrored, as she has
   it), the principles strap, The Essentials, Hair changes through different seasons (lavender band),
   Our Approach 01 to 03 with the concerns list, Hair and Scalp Team, A conversation before care (plum
   band), then the clinic contact strip. Her deep purple is the site's softer plum here, per the
   "soften the purple" direction. Everything is scoped to main.hsc-page, so no other page changes.
   ===================================================================== */
html body main.hsc-page{
  --hsc-ivory:#fbf9f6; --hsc-mist:#f3edf6; --hsc-team:#f7f2f8; --hsc-hero-a:#f8f4fa; --hsc-hero-b:#efe7f3;
  --hsc-band:#553f63; --hsc-band-ink:#f7f3f0; --hsc-band-quiet:#e9deef; --hsc-band-accent:#e2c7ab;
  --hsc-em:#76578a;
  --hsc-gutter:max(clamp(1.35rem,6.8vw,7rem), calc((100vw - 1340px) / 2));
  --sans:"Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif; font-family:var(--sans);
  background:var(--hsc-ivory);
}

/* ---- skip link: hidden until it gets keyboard focus (as on the TCM and lactation pages) ---- */
.skip-link{position:fixed; left:1rem; top:-5rem; z-index:200; padding:.7rem 1rem; border-radius:8px;
  color:#5b405f; background:#fff; box-shadow:0 8px 24px rgba(64,47,67,.18); font-weight:700; text-decoration:none;}
.skip-link:focus, .skip-link:focus-visible{top:1rem; outline:2px solid #5b405f; outline-offset:2px;}

/* ---- clinic sub-bar: same bar as /tcm-womens-health/ (lockup, section links, call button) ---- */
html body main.hsc-page .lc-subhead{position:relative; z-index:40; display:flex; align-items:center; gap:2rem; min-height:76px;
  padding:.4rem clamp(1rem,4vw,4.5rem); background:rgba(255,253,251,.92); border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);}
html body main.hsc-page .lc-lockup{display:flex; align-items:center; gap:.85rem; min-width:0; min-height:44px; color:inherit; text-decoration:none;}
html body main.hsc-page .lc-lockup-copy{display:grid; line-height:1.2;}
html body main.hsc-page .lc-lockup-copy strong{color:var(--plum); font-family:var(--serif); font-size:1.06rem; font-style:italic; font-weight:500; white-space:nowrap;}
html body main.hsc-page .lc-lockup-copy small{margin-top:.15rem; color:var(--bronze); font-size:.9rem; font-weight:700; letter-spacing:.02em; white-space:nowrap;}
html body main.hsc-page .lc-subnav{display:flex; justify-content:center; gap:clamp(1rem,2.4vw,2rem); margin-left:auto;}
html body main.hsc-page .lc-subnav a{color:#625963; font-size:.9rem; font-weight:600; line-height:1.3; text-decoration:none; white-space:nowrap;}
html body main.hsc-page .lc-subnav a:hover, html body main.hsc-page .lc-subnav a:focus-visible{color:var(--plum); text-decoration:underline; text-underline-offset:.3em;}
html body main.hsc-page .lc-subhead-cta{flex:0 0 auto;}
@media (min-width:761px){
  /* sticky under the BMB header from 761px up; --lc-sub-top is set by the page script */
  html body main.hsc-page .lc-subhead{position:sticky; top:var(--lc-sub-top,81px);}
}
@media (min-width:761px) and (max-width:1060px){
  html body main.hsc-page .lc-subhead{gap:1rem; min-height:58px; padding-top:.4rem; padding-bottom:.4rem;}
  html body main.hsc-page .lc-lockup-copy strong{font-size:1rem;}
}
html body main.hsc-page :is(#top, #essentials, #hair-changes, #approach, #concerns, #team, #book){scroll-margin-top:160px;}
html body main.hsc-page [tabindex="-1"]:focus{outline:none;}

/* ---- shared details from her prototype: bronze eyebrows (some with a short rule), italic second lines,
   bold text links with a bronze arrow ---- */
html body main.hsc-page .eyebrow{margin:0 0 1.1rem; color:var(--bronze); font-size:.8rem; font-weight:700; letter-spacing:.17em; line-height:1.5; text-transform:uppercase;}
html body main.hsc-page .hsc-label{display:flex; align-items:center; gap:.85rem; margin:0 0 2.2rem; color:var(--bronze);
  font-size:.8rem; font-weight:700; letter-spacing:.17em; line-height:1.5; text-transform:uppercase;}
html body main.hsc-page .hsc-label::after{content:""; flex:0 0 54px; height:1px; background:var(--bronze);}
html body main.hsc-page h2{margin:0; color:var(--plum); font-family:var(--serif); font-size:clamp(2.4rem,4.2vw,4.3rem); font-weight:400;
  line-height:1.07; letter-spacing:-.03em;}
html body main.hsc-page :is(h2, .hero-display) em{color:var(--hsc-em); font-style:italic; font-weight:400;}
html body main.hsc-page .hsc-button{gap:.9rem; padding:.85rem 1.45rem; font-size:.95rem;}
html body main.hsc-page .hsc-button span{font-size:1.15rem; line-height:1;}
html body main.hsc-page .hsc-link{display:inline-flex; align-items:center; gap:.6rem; min-height:44px; color:var(--plum);
  font-size:.98rem; font-weight:700; line-height:1.4; text-decoration:none;}
html body main.hsc-page .hsc-link span{color:var(--bronze); font-size:1.15rem; line-height:1; transition:transform .2s ease;}
html body main.hsc-page .hsc-link:hover, html body main.hsc-page .hsc-link:focus-visible{text-decoration:underline; text-underline-offset:.3em; text-decoration-thickness:1px;}
html body main.hsc-page .hsc-link:hover span, html body main.hsc-page .hsc-link:focus-visible span{transform:translateX(3px);}

/* ---- hero: copy on soft lavender, her photo to the right edge, fading into the lavender ---- */
html body main.hsc-page .hsc-hero{position:relative; display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); min-height:660px;
  background:linear-gradient(110deg, var(--hsc-hero-a) 0%, var(--hsc-hero-b) 60%, #e9dfee 100%); overflow:hidden;}
/* the copy box grows with the gutter past 1440px, so the text column keeps its width on wide screens
   (a flat 720px left only about 370px for the headline at 1920) */
html body main.hsc-page .hsc-hero-copy{position:relative; z-index:2; align-self:center; max-width:max(720px, calc(var(--hsc-gutter) + 622px));
  padding:clamp(4.5rem,7vw,6.5rem) clamp(2rem,4vw,4rem) clamp(4.5rem,7vw,6.5rem) var(--hsc-gutter);}
html body main.hsc-page h1.hsc-h1{margin:0 0 1.2rem; max-width:none; color:var(--bronze); font-family:var(--sans); font-size:.85rem; font-weight:700;
  font-style:normal; letter-spacing:.19em; line-height:1.4; text-transform:uppercase;}
html body main.hsc-page .hsc-hero .hero-display{max-width:640px; margin:0; color:var(--plum); font-size:clamp(2.7rem,5.1vw,5.2rem); line-height:1.06; letter-spacing:-.035em;}
/* her italic second line balances on its own, so it breaks "Confidence for / every chapter." as she has it,
   never leaving "chapter." alone; the first line keeps its normal wrap */
html body main.hsc-page .hsc-hero .hero-display em{display:block; text-wrap:balance;}
html body main.hsc-page .hsc-lead{max-width:520px; margin:1.9rem 0 2.1rem; color:#4d444e; font-size:1.1rem; line-height:1.7;}
html body main.hsc-page .hsc-hero .hero-actions{flex-wrap:wrap; gap:1rem 1.8rem; margin-top:0;}
html body main.hsc-page .hsc-reach{margin:1.5rem 0 0; color:#5d5360; font-size:.95rem; line-height:1.6;}
html body main.hsc-page .hsc-reach a{color:var(--plum); font-weight:700; text-decoration:underline; text-decoration-color:rgba(91,64,95,.4); text-underline-offset:.25em;}
html body main.hsc-page .hsc-reach a:hover, html body main.hsc-page .hsc-reach a:focus-visible{color:var(--bronze); text-decoration-color:currentColor;}
html body main.hsc-page .hsc-hero-media{position:relative; margin:0; min-height:520px; overflow:hidden; background:#e6dcec;}
html body main.hsc-page .hsc-hero-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% center;
  transform:scaleX(-1); filter:saturate(.85) contrast(.97);}
html body main.hsc-page .hsc-hero-media::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, var(--hsc-hero-b) 0%, rgba(239,231,243,.72) 12%, rgba(239,231,243,.18) 34%, rgba(239,231,243,0) 52%);}

/* ---- the principles strap under the hero ---- */
html body main.hsc-page .hsc-strap{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.8rem 2.4rem;
  padding:1.35rem var(--hsc-gutter); background:#fdfbf8; border-bottom:1px solid var(--line);}
html body main.hsc-page .hsc-strap-line{margin:0; color:var(--plum); font-family:var(--serif); font-size:1.1rem; line-height:1.4; text-wrap:balance;}
html body main.hsc-page .hsc-strap-list{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 2rem; margin:0; padding:0; list-style:none;}
html body main.hsc-page .hsc-strap-list li{margin:0; color:#625963; font-size:.8rem; font-weight:700; letter-spacing:.1em; line-height:1.5; text-transform:uppercase;}

/* ---- sections ---- */
html body main.hsc-page .hsc-section{padding:clamp(5rem,9vw,8.5rem) var(--hsc-gutter);}
html body main.hsc-page .hsc-first{font-size:1.1rem;}
html body main.hsc-page :is(.hsc-split-copy, .hsc-seasons-copy, .hsc-team-copy) p{margin:0 0 1.2rem; color:#4d444e; font-size:1.04rem; line-height:1.72;}
html body main.hsc-page :is(.hsc-split-copy, .hsc-seasons-copy) p.hsc-first{font-size:1.1rem;}

/* The Essentials: headline left, her two paragraphs right, on one baseline */
html body main.hsc-page .hsc-essentials{background:var(--hsc-ivory);}
html body main.hsc-page .hsc-split{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(3rem,8vw,8rem); align-items:end;}
html body main.hsc-page .hsc-split-copy{max-width:32rem;}
html body main.hsc-page .hsc-split-copy p:last-child{margin-bottom:0;}

/* Hair changes through different seasons: lavender band */
html body main.hsc-page .hsc-seasons{background:var(--hsc-mist); border-top:1px solid rgba(91,64,95,.08);}
html body main.hsc-page .hsc-seasons-grid{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(3rem,8vw,8rem); align-items:start;}
html body main.hsc-page .hsc-seasons-copy{max-width:36rem; padding-top:.35rem;}
html body main.hsc-page .hsc-seasons-copy .button{margin-top:.8rem;}

/* Our Approach: three steps in one ruled row, then the concerns list */
html body main.hsc-page .hsc-approach{background:var(--hsc-ivory);}
html body main.hsc-page .hsc-approach > h2{max-width:820px;}
html body main.hsc-page .hsc-steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:3.6rem;
  background:rgba(91,64,95,.18); border:1px solid rgba(91,64,95,.18);}
html body main.hsc-page .hsc-step{padding:2rem 2rem 2.2rem; background:var(--hsc-ivory);}
html body main.hsc-page .hsc-step-no{display:block; color:var(--bronze); font-family:var(--serif); font-size:1.25rem; line-height:1.2;}
html body main.hsc-page .hsc-step h3{margin:1rem 0 .7rem; color:var(--plum-deep); font-family:var(--serif); font-size:clamp(1.45rem,1.9vw,1.7rem); font-weight:400; line-height:1.15;}
html body main.hsc-page .hsc-step p{margin:0; color:#4d444e; font-size:1rem; line-height:1.65;}
html body main.hsc-page .hsc-concerns{display:grid; grid-template-columns:max-content minmax(0,1fr); gap:1.2rem 3rem; align-items:baseline;
  margin-top:3.4rem; padding-top:1.5rem; border-top:1px solid rgba(91,64,95,.18);}
html body main.hsc-page h3.hsc-concerns-title{margin:0; color:var(--bronze); font-family:var(--sans); font-size:.78rem; font-weight:700;
  letter-spacing:.12em; line-height:1.5; text-transform:uppercase;}
html body main.hsc-page .hsc-concerns-list{display:flex; flex-wrap:wrap; gap:.6rem 1.7rem; margin:0; padding:0; list-style:none;}
html body main.hsc-page .hsc-concerns-list li{margin:0; color:var(--plum-deep); font-family:var(--serif); font-size:1.3rem; line-height:1.35;}

/* Hair and Scalp Team */
html body main.hsc-page .hsc-team{background:var(--hsc-team); border-top:1px solid rgba(91,64,95,.08);}
html body main.hsc-page .hsc-team-copy{max-width:800px;}
html body main.hsc-page .hsc-team-copy h2{margin-bottom:1.6rem;}
html body main.hsc-page .hsc-team-copy p{max-width:42rem;}

/* ---- A conversation before care: the plum band, with the packages-and-prices notice ---- */
html body main.hsc-page .hsc-consult{padding:clamp(5rem,9vw,8rem) 1.5rem clamp(4rem,7vw,6rem); background:var(--hsc-band); color:var(--hsc-band-ink); text-align:center;}
html body main.hsc-page .hsc-consult .eyebrow{color:var(--hsc-band-accent);}
html body main.hsc-page .hsc-consult h2{max-width:940px; margin:0 auto; color:var(--hsc-band-ink); font-size:clamp(2.3rem,4.3vw,4.4rem);}
html body main.hsc-page .hsc-consult h2 em{color:var(--hsc-band-quiet);}
html body main.hsc-page .hsc-consult > p:not(.eyebrow){max-width:560px; margin:1.6rem auto 2.1rem; color:#ece3ee; font-size:1.08rem; line-height:1.7;}
html body main.hsc-page .hsc-consult .hero-actions{flex-wrap:wrap; gap:1rem 1.8rem; margin-top:0;}
html body main.hsc-page .hsc-button--light{color:var(--plum-deep); background:var(--hsc-ivory); border-color:var(--hsc-ivory); box-shadow:0 10px 24px rgba(30,18,34,.22);}
html body main.hsc-page .hsc-button--light:hover, html body main.hsc-page .hsc-button--light:focus-visible{color:var(--plum-deep); background:#fff; border-color:#fff;}
html body main.hsc-page .hsc-link--light{color:var(--hsc-band-ink);}
html body main.hsc-page .hsc-link--light span{color:var(--hsc-band-accent);}
html body main.hsc-page .hsc-consult > aside.bmb-promo-pause{margin-top:clamp(2.6rem,4vw,3.4rem) !important; margin-bottom:0 !important;}

/* ---- clinic contact strip, above the site footer (the site's address, hours and contacts) ---- */
html body main.hsc-page .lc-contact-strip{align-items:center; padding-left:var(--hsc-gutter); padding-right:var(--hsc-gutter);
  background:#f2edf3; border-top:1px solid var(--line); color:#6b626c;}
html body main.hsc-page .lc-contact-strip strong{font-size:.95rem;}
html body main.hsc-page .lc-contact-strip div:last-child{justify-items:end; text-align:right;}
html body main.hsc-page .lc-contact-strip a{color:#5f5660; text-decoration:underline; text-decoration-color:rgba(91,64,95,.35); text-underline-offset:.25em;}
html body main.hsc-page .lc-contact-strip a:hover, html body main.hsc-page .lc-contact-strip a:focus-visible{color:var(--plum);}

/* ---- phone call bar (hidden on wider screens) ---- */
html body main.hsc-page .hsc-mobile-bar{display:none;}

@media (max-width:1060px){
  html body main.hsc-page .lc-subnav{display:none;}
  html body main.hsc-page .lc-subhead-cta{margin-left:auto;}
  html body main.hsc-page{--hsc-gutter:5vw;}
  html body main.hsc-page .hsc-hero{grid-template-columns:minmax(0,1fr) 44%; min-height:580px;}
  html body main.hsc-page .hsc-hero-copy{padding-right:4vw;}
  html body main.hsc-page .hsc-step{padding:1.6rem 1.4rem 1.8rem;}
  html body main.hsc-page .hsc-concerns{grid-template-columns:1fr;}
}
@media (max-width:900px){
  html body main.hsc-page .hsc-split, html body main.hsc-page .hsc-seasons-grid{grid-template-columns:1fr; gap:2rem;}
  html body main.hsc-page .hsc-steps{grid-template-columns:1fr;}
}
@media (max-width:760px){
  html body main.hsc-page .lc-subhead{gap:1rem; min-height:64px; padding:.5rem 1rem;}
  html body main.hsc-page .lc-lockup-copy strong{font-size:1rem;}
  html body main.hsc-page .lc-subhead-cta{display:none;}
  html body main.hsc-page :is(#top, #essentials, #hair-changes, #approach, #concerns, #team, #book){scroll-margin-top:88px;}
  html body main.hsc-page{--hsc-gutter:1.35rem;}

  html body main.hsc-page .hsc-hero{grid-template-columns:1fr; min-height:0;}
  html body main.hsc-page .hsc-hero-copy{padding:3.6rem 1.35rem 3.2rem;}
  html body main.hsc-page .hsc-hero .hero-display{font-size:clamp(2.5rem,11vw,3.4rem);}
  html body main.hsc-page .hsc-hero .hero-actions{flex-direction:column; align-items:stretch; gap:.6rem;}
  html body main.hsc-page .hsc-hero .hero-actions .hsc-link{justify-content:center;}
  html body main.hsc-page .hsc-hero-media{min-height:0; aspect-ratio:4 / 3.2;}
  html body main.hsc-page .hsc-hero-media::after{background:linear-gradient(180deg, var(--hsc-hero-b) 0%, rgba(239,231,243,0) 22%);}
  html body main.hsc-page .hsc-strap{flex-direction:column; gap:.7rem; padding-top:1.4rem; padding-bottom:1.4rem; text-align:center;}
  html body main.hsc-page .hsc-strap-list{gap:.35rem 1.2rem;}
  html body main.hsc-page .hsc-strap-list li{font-size:.74rem;}
  html body main.hsc-page .hsc-section{padding-top:4.5rem; padding-bottom:4.5rem;}
  html body main.hsc-page h2{font-size:clamp(2.1rem,9vw,2.8rem);}
  html body main.hsc-page .hsc-label{margin-bottom:1.6rem;}
  html body main.hsc-page .hsc-steps{margin-top:2.4rem;}
  html body main.hsc-page .hsc-concerns-list{gap:.5rem 1.3rem;}
  html body main.hsc-page .hsc-concerns-list li{font-size:1.2rem;}
  html body main.hsc-page .hsc-consult{padding:4.5rem 1.35rem 3.5rem;}
  html body main.hsc-page .hsc-consult .hero-actions{flex-direction:column; align-items:center; gap:.6rem;}

  html body main.hsc-page .lc-contact-strip{flex-direction:column; align-items:flex-start; gap:1rem;}
  html body main.hsc-page .lc-contact-strip div:last-child{justify-items:start; text-align:left;}
  html body main.hsc-page .lc-contact-strip a{display:inline-block; padding-top:.65rem; padding-bottom:.65rem;}
  html body main.hsc-page .hsc-reach a{display:inline-block; padding:.55rem 0;}

  /* fixed call bar (call, and WhatsApp as the second way in); it replaces the round WhatsApp button on this page */
  html body main.hsc-page .hsc-mobile-bar{position:fixed; z-index:40; left:.8rem; right:.8rem; bottom:calc(.8rem + env(safe-area-inset-bottom, 0px));
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.5rem;}
  html body main.hsc-page .hsc-mobile-bar a{display:grid; place-items:center; min-height:50px; padding:.5rem 1rem; border-radius:8px;
    font-size:.95rem; font-weight:700; text-decoration:none; box-shadow:0 12px 32px rgba(64,47,67,.22);}
  html body main.hsc-page .hsc-mobile-call{color:#fff; background:var(--plum); border:1px solid rgba(255,255,255,.4);}
  html body main.hsc-page .hsc-mobile-call:hover, html body main.hsc-page .hsc-mobile-call:focus-visible{color:#fff; background:var(--plum-deep);}
  html body main.hsc-page .hsc-mobile-wa{color:var(--plum); background:#fff; border:1px solid rgba(91,64,95,.35);}
  html body main.hsc-page .hsc-mobile-wa:hover, html body main.hsc-page .hsc-mobile-wa:focus-visible{color:var(--plum-deep); background:#f7f2fa;}
  body.mobile-nav-open main.hsc-page .hsc-mobile-bar{display:none;}
  body:has(main.hsc-page .hsc-mobile-bar) .bmb-wa-fab{display:none !important;}
  /* keep the footer's last line clear of the bar */
  html body:has(main.hsc-page) .site-footer > p.copyright:last-child{padding-bottom:calc(1rem + 70px + env(safe-area-inset-bottom, 0px)) !important;}
}
@media (prefers-reduced-motion:reduce){
  html body main.hsc-page .hsc-link span{transition:none;}
}