/* Scoped clinic photo and unwanted-hair guide; inherits GLADIS type and palette. */
.seo-page .services-hero__clinic {
  align-self: center;
  box-shadow: none;
}
.seo-page .services-hero__clinic .services-hero__portrait-media {
  aspect-ratio: 3 / 2;
  min-height: 0;
}
.seo-page .services-hero__clinic img {
  display: block;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}
.seo-page .services-hero:hover .services-hero__clinic img { transform: none; }
.hair-guide { color: var(--ui-forest); }
.hair-guide :where(h1, h2, h3, h4, p) { margin: 0; }
.hair-guide :where(h1, h2) { font-weight: 400; letter-spacing: -.025em; text-align: left; text-wrap: balance; }
.hair-guide h1 { max-width: 19ch; font-size: clamp(34px, 4.1vw, 58px); line-height: 1.08; }
.hair-guide h2 { max-width: 25ch; font-size: clamp(29px, 3.1vw, 42px); line-height: 1.14; }
.hair-guide h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.25; font-weight: 500; }
.hair-guide h4 { margin-block: 26px 12px; font-size: 18px; line-height: 1.4; }
.hair-guide p, .hair-guide li { line-height: 1.65; }
.hair-guide :where(p, li, dd) { color: #496456; }
.hair-intro { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: 28px 42px; }
.seo-page .hair-guide > .hair-intro { padding-block: 24px 42px !important; }
.hair-intro .overline { margin-bottom: 20px; }
.hair-intro h1 + p { margin-top: 24px; font-size: 19px; }
.hair-intro p + p { margin-top: 14px; font-size: 16px; }
.hair-intro figure { margin: 0; width: 100%; max-width: 320px; aspect-ratio: 2 / 3; justify-self: end; border-radius: var(--ui-radius-media); overflow: hidden; }
.hair-intro figure img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hair-intro figcaption { display: none; }
.hair-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.seo-page .hair-actions .button--green { background: var(--ui-green-dark) !important; color: #fff !important; }
.seo-page .hair-actions .button--green:hover { background: var(--ui-forest) !important; }
.hair-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; border-block: 1px solid var(--ui-line); padding-block: 14px; }
.hair-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ui-forest); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--ui-line); }
.hair-nav a:hover { text-decoration-color: currentColor; }
.hair-guide a:focus-visible, .hair-guide summary:focus-visible { outline: 2px solid var(--ui-green-dark); outline-offset: 5px; border-radius: 4px; }
.hair-section { padding-block: clamp(40px, 5vw, 72px); scroll-margin-top: 110px; }
.hair-section + .hair-section { border-top: 1px solid var(--ui-line); }
.hair-section > header { max-width: 790px; margin-bottom: 30px; }
.hair-section header .overline { margin-bottom: 12px; }
.hair-section header p:not(.overline) { margin-top: 16px; font-size: 17px; }
.hair-lasers, .hair-preparation, .hair-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.hair-lasers > article { min-width: 0; }
.hair-lasers > article + article { border-left: 1px solid var(--ui-line); padding-left: clamp(24px, 4vw, 56px); }
.hair-location { margin-bottom: 14px !important; font-size: 14px; font-weight: 600; }
.hair-device-type { margin-block: 8px 22px !important; color: var(--ui-forest) !important; }
.hair-lasers ul, .hair-checklist { padding-left: 22px; }
.hair-lasers li + li, .hair-checklist li + li { margin-top: 12px; }
.hair-lasers li::marker, .hair-checklist li::marker { color: var(--ui-green-dark); }
.hair-branches { margin-block: 0 22px; }
.hair-branches div { padding-block: 14px; border-bottom: 1px solid var(--ui-line); }
.hair-branches dt { font-weight: 600; }
.hair-branches dd { margin: 4px 0 0; line-height: 1.5; }
.hair-course { margin-top: 32px; padding: clamp(20px, 3vw, 32px); border-radius: 16px; background: var(--ui-mint); }
.hair-course p { margin-top: 12px; max-width: 85ch; }
.hair-preparation { margin-bottom: 26px; }
.hair-preparation article { border-top: 2px solid var(--ui-green); padding-top: 18px; }
.hair-preparation p { margin-top: 12px; }
.hair-checklist { max-width: 80ch; margin-bottom: 0; }
.hair-price-group { padding: clamp(20px, 3vw, 32px); border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-white); }
.hair-price-group > p { margin-top: 6px; }
.hair-price-group dl { margin-block: 22px 26px; }
.hair-price-group dl div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding-block: 13px; border-bottom: 1px solid var(--ui-line); }
.hair-price-group dd { margin: 0; color: var(--ui-forest); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hair-reading { max-width: 76ch; }
.hair-reading p + p { margin-top: 18px; }
.hair-reading > a { margin-top: 26px; }
.hair-faq details { border-top: 1px solid var(--ui-line); }
.hair-faq details:last-child { border-bottom: 1px solid var(--ui-line); }
.hair-faq summary { padding: 20px 10px 20px 0; font-size: 20px; line-height: 1.4; cursor: pointer; }
.hair-faq details p { padding: 0 0 24px; max-width: 80ch; }
.hair-visit { list-style: none; counter-reset: visit; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
.hair-visit li { counter-increment: visit; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px 16px; }
.hair-visit li::before { content: counter(visit); grid-row: 1 / 3; display: grid; place-items: center; align-self: start; height: 36px; border-radius: 50%; background: var(--ui-forest); color: white; font-size: 16px; }
.hair-visit h3 { font-size: 23px; }
.hair-visit p { grid-column: 2; }
.laser-service .laser-task-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.laser-service .laser-task-list li { padding: 18px 0; border-bottom: 1px solid var(--ui-line); color: var(--ui-forest); }
.laser-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 28px; }
.laser-reading h3 { margin-top: 30px; margin-bottom: 12px; font-size: 23px; }
.laser-reading h3:first-child { margin-top: 0; }
.laser-service .hair-intro figure { max-width: 440px; aspect-ratio: 4 / 3; }
@media (max-width: 900px) {
  .hair-intro { grid-template-columns: 1fr .65fr; gap: 26px; }
  .hair-intro figure { max-width: 280px; }
  .hair-guide h1 { font-size: 38px; }
}
@media (max-width: 700px) {
  .laser-service .laser-task-list, .laser-branches { grid-template-columns: 1fr; gap: 0; }
  .laser-service .hair-intro figure { max-width: 100%; }
  .hair-intro, .hair-lasers, .hair-preparation, .hair-prices, .hair-visit { grid-template-columns: 1fr; }
  .seo-page .hair-guide > .hair-intro { padding-block: 12px 30px !important; }
  .hair-guide h1 { font-size: clamp(31px, 8.5vw, 38px); }
  .hair-intro h1 + p { font-size: 17px; }
  .hair-intro figure { max-width: 260px; justify-self: center; }
  .hair-lasers > article + article { border-left: 0; border-top: 1px solid var(--ui-line); padding: 26px 0 0; }
  .hair-nav { gap: 4px 18px; font-size: 14px; }
  .hair-section { scroll-margin-top: 92px; }
  .hair-faq summary { font-size: 18px; }
  .hair-price-group .button { width: 100%; }
  .hair-actions { align-items: stretch; }
  .hair-actions .button { flex: 1 1 120px; }
  .seo-page .services-hero__clinic { min-height: 0; }
  .seo-page .services-hero__clinic .services-hero__portrait-media { min-height: 0; height: auto; }
}