/* mod-svc-hero — the v2 service-page hero.
   Spec: exec-c422eade (14 Aug 2026, approved redesign). A wide photographic
   scene with an ivory title plane overlapping from the left, its right edge
   bowed — the same elliptical-radius gesture as the booking folio, mirrored.
   The plane carries breadcrumb, eyebrow, H1, rule, lede, the two actions and
   a trust line. First adopted by /thermography/full-body/; the propagation
   pass moves the remaining service pages onto it.

   WordPress-safe: real <img>, no sibling selectors across boundaries, all
   tokens. The photo is position:absolute inside its own section only. */

.b-svchero {
  position: relative;
  overflow: clip;
}

.b-svchero__bg {
  position: absolute;
  inset: 0;
  margin: 0;
}
.b-svchero__bg img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--svchero-focal-x, 60%) var(--svchero-focal-y, 40%);
}

.b-svchero__plane {
  position: relative;
  z-index: 1;
  background: var(--home-paper);
  max-inline-size: min(46vw, 700px);
  border-radius: 0 380px 380px 0 / 0 50% 50% 0;
  padding: clamp(var(--sp-12), 5vw, var(--sp-20)) clamp(var(--sp-16), 8vw, var(--sp-32)) clamp(var(--sp-12), 5vw, var(--sp-20)) 0;
  margin-block: clamp(var(--sp-8), 3.5vw, var(--sp-12));
}
/* The plane's left edge runs to the viewport edge; its content column keeps
   the page pad. */
.b-svchero__inner {
  padding-inline-start: var(--page-pad);
  max-inline-size: 560px;
}

.b-svchero__crumb-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 var(--sp-4);
  padding: 0;
  color: var(--soft);
}
.b-svchero__crumb-list li { display: inline-flex; align-items: center; }
.b-svchero__crumb-list li + li::before { content: "/"; margin-inline: var(--sp-2); color: var(--home-sage); }
.b-svchero__crumb-list a { text-decoration: none; color: var(--soft); }
.b-svchero__crumb-list a:hover { color: var(--home-forest); }
.b-svchero__crumb-list [aria-current] { color: var(--home-forest); }

.b-svchero__eyebrow { color: var(--home-sage-ink); }

.b-svchero__h1 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--home-display-l);
  line-height: 1.04;
  letter-spacing: var(--track-display);
  color: var(--home-forest);
  margin: var(--sp-4) 0 0;
  text-wrap: balance;
}

.b-svchero__rule {
  display: block;
  inline-size: 56px;
  block-size: 2px;
  background: var(--home-sage);
  margin-block: var(--sp-6);
}

.b-svchero__lede {
  font-size: var(--t-body-l);
  line-height: var(--lh-body);
  color: var(--soft);
  max-inline-size: var(--measure-tight);
  margin: 0 0 var(--sp-8);
}

.b-svchero__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-8);
}

.b-svchero__book {
  border-radius: var(--radius-tight);
  background: var(--home-forest-deep);
  color: var(--card);
  padding-inline: var(--sp-8);
}
.b-svchero__book:hover { background: var(--home-forest); }

.b-svchero__expect {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  font-weight: var(--w-label);
  font-size: var(--t-body);
  color: var(--home-forest);
  text-decoration: none;
  border-block-end: 1px solid var(--home-forest);
  transition: color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}
.b-svchero__expect:hover { color: var(--home-sage-ink); border-color: var(--home-sage-ink); }

.b-svchero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-small);
  color: var(--soft);
}
.b-svchero__trust li { display: inline-flex; align-items: center; }
.b-svchero__trust li + li::before { content: "·"; margin-inline-end: var(--sp-3); color: var(--home-sage); }

/* ── smaller viewports ────────────────────────────────────────────────── */

@media (max-width: 899.98px) {
  .b-svchero { display: flex; flex-direction: column; }
  .b-svchero__bg { position: static; order: -1; }
  .b-svchero__bg img { aspect-ratio: 16 / 10; block-size: auto; }
  .b-svchero__plane {
    max-inline-size: none;
    border-radius: 0;
    margin-block: 0;
    padding: var(--sp-10) var(--page-pad);
  }
  .b-svchero__inner { padding-inline-start: 0; max-inline-size: none; }
}