.hair-hero { overflow: hidden; padding: 42px 0 0; background: var(--deep-pine); color: var(--white); }
.hair-hero-grid { display: grid; gap: 38px; align-items: center; }
.hair-hero-copy { padding-bottom: 8px; }
.hair-hero-copy .button { margin-top: 28px; }
.hair-hero-copy .hero-note { max-width: 620px; }
.hair-hero-visual { min-height: 460px; margin: 0; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.hair-hero-visual img { height: 100%; min-height: 460px; object-fit: cover; object-position: center 28%; }
.hair-page--women .hair-hero-visual,
.hair-page--men .hair-hero-visual { position: relative; border-radius: 0; background: var(--deep-pine); }
.hair-page--women .hair-hero-visual::after,
.hair-page--men .hair-hero-visual::after { content: ""; position: absolute; inset: -1px; pointer-events: none; box-shadow: inset 0 0 42px 26px var(--deep-pine); }
.hair-page--women .hair-hero-visual img,
.hair-page--men .hair-hero-visual img { object-position: center center; }
.hair-intro, .hair-support, .hair-evaluation { padding: 80px 0; }
.hair-intro { background: var(--warm-paper); }
.hair-intro-grid, .hair-support-grid { display: grid; gap: 42px; align-items: center; }
.hair-copy p { margin: 0 0 16px; color: var(--stone); font-size: 13px; line-height: 1.7; }
.trigger-grid { display: grid; gap: 12px; margin-top: 42px; }
.trigger-grid article { padding: 26px; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--white); }
.trigger-grid span { color: var(--clinic-green); font-family: var(--font-display); font-size: 22px; }
.trigger-grid h3 { margin: 26px 0 8px; font-family: var(--font-display); font-size: 26px; font-weight: 500; }
.trigger-grid p { margin: 0; color: var(--stone); font-size: 12px; }
.hair-support { background: var(--white); }
.hair-support figure, .hair-evaluation figure { margin: 0; overflow: hidden; border-radius: var(--radius-md); }
.hair-support figure img, .hair-evaluation figure img { height: 390px; object-fit: cover; }
.hair-support figcaption { padding-top: 8px; color: var(--stone); font-size: 9px; }
.hair-list { margin: 24px 0 28px; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
.hair-list li { padding: 12px 0; border-bottom: 1px solid var(--hairline); color: var(--stone); font-size: 12px; }
.hair-list li::before { content: "✓"; margin-right: 12px; color: var(--clinic-green); font-weight: 700; }
.hair-evaluation { background: var(--warm-paper); }
.selector-hero { padding: 78px 0 130px; background: var(--deep-pine); color: var(--white); }
.selector-heading { max-width: 880px; text-align: center; }
.selector-heading .body-copy { max-width: 660px; margin: 24px auto 0; }
.audience-section { padding: 0 0 80px; background: var(--warm-paper); }
.audience-grid { display: grid; gap: 18px; transform: translateY(-62px); margin-bottom: -62px; }
.audience-card { overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--white); box-shadow: 0 22px 60px rgb(23 54 47 / 10%); }
.audience-image { display: block; height: 330px; overflow: hidden; }
.audience-image img { width: 100%; height: 100%; object-fit: cover; }
.audience-card:first-child .audience-image img { object-position: center 24%; }
.audience-card:last-child .audience-image img { object-position: 68% center; }
.audience-content { padding: 28px; }
.audience-content h2 { margin: 8px 0 12px; font-family: var(--font-display); font-size: 34px; font-weight: 500; }
.audience-content p:not(.eyebrow) { min-height: 76px; margin: 0 0 24px; color: var(--stone); font-size: 12px; line-height: 1.65; }
.selector-about { padding: 80px 0; background: var(--white); }
.medical-sources { margin-top: 22px; color: var(--stone); font-size: 10px; line-height: 1.6; }
.medical-sources a { color: var(--clinic-green); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 760px) {
  .hair-hero { padding-top: 72px; }
  .hair-hero-grid { grid-template-columns: 1.08fr .92fr; gap: 70px; }
  .hair-hero-copy { padding-bottom: 72px; }
  .hair-hero-copy .display { font-size: clamp(58px, 5.6vw, 82px); }
  .hair-hero-visual, .hair-hero-visual img { min-height: 680px; }
  .hair-intro, .hair-support, .hair-evaluation { padding: 120px 0; }
  .hair-intro-grid { grid-template-columns: .9fr 1.1fr; gap: 100px; }
  .trigger-grid { grid-template-columns: repeat(3, 1fr); }
  .hair-support-grid { grid-template-columns: 1fr 1fr; gap: 82px; }
  .hair-support-grid.reverse figure { order: 2; }
  .hair-support figure img, .hair-evaluation figure img { height: 540px; }
  .selector-hero { padding: 120px 0 180px; }
  .selector-heading .display { font-size: clamp(62px, 6vw, 92px); }
  .audience-section { padding-bottom: 120px; }
  .audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; transform: translateY(-90px); margin-bottom: -90px; }
  .audience-image { height: 480px; }
  .audience-content { padding: 38px; }
  .selector-about { padding: 120px 0; }
}