/* Shared mobile photo heroes: clear image above a light, progressive text backing. */
@media (max-width: 767px) {
  body .nav { padding-top:calc(.8rem + env(safe-area-inset-top)); }
  body .nav__links { top:calc(var(--nav-h) + env(safe-area-inset-top) + .4rem); }
  body .subhero {
    position:relative; display:grid; align-items:end; isolation:isolate;
    min-height:100svh; padding:0; overflow:hidden; background:var(--cloud);
  }
  body .subhero .subhero__media {
    position:absolute; inset:0; z-index:0; height:100%; width:100%;
    margin:0; border-radius:0;
  }
  body .subhero .subhero__media img {
    display:block; width:100%; height:100%; aspect-ratio:auto; object-fit:cover;
  }
  body .subhero .subhero__scrim {
    display:block; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(to bottom,transparent 38%,rgba(255,255,255,.08) 48%,rgba(255,255,255,.25) 62%,rgba(255,255,255,.42) 78%,rgba(255,255,255,.5) 100%);
  }
  body .subhero .subhero__scrim::before {
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    -webkit-mask-image:linear-gradient(to bottom,transparent 40%,#000 78%);
    mask-image:linear-gradient(to bottom,transparent 40%,#000 78%);
  }
  body .subhero .subhero__scrim::after { content:none; }
  body .v9-chiro-hero .subhero__media img { object-position:78% center; }
  body .subhero:has(img[src*="pet-chiro-hero"]) .container { margin:0; }
  body .subhero::before, body .subhero::after { display:none; }
  body .subhero .container {
    position:relative; z-index:2; display:block; width:100%; max-width:none; margin:0;
    padding:calc(var(--nav-h) + env(safe-area-inset-top) + 6.5rem) 1.25rem calc(1.2rem + env(safe-area-inset-bottom));
  }
  body .subhero h1, .condition-v10 .condition-hero h1 {
    position:relative; font-size:clamp(2rem,8.5vw,2.65rem); line-height:1.08; max-width:17ch;
    margin:0; color:var(--ink); text-shadow:none; background:none; box-shadow:none;
  }
  body .subhero h1::before, body .subhero h1::after,
  .condition-v10 .condition-hero h1::before, .condition-v10 .condition-hero h1::after { content:none; }
  body .subhero .subhero__sub, .condition-v10 .condition-hero__lede {
    max-width:40ch; margin-top:.75rem; font-size:1rem; line-height:1.45;
    color:#32383a; background:none; box-shadow:none; text-shadow:none;
  }
  body .subhero .crumbs, .condition-v10 .condition-hero .crumbs {
    margin:0 0 .75rem; background:none; box-shadow:none; text-shadow:none; color:var(--ink);
  }
  body .subhero__actions, .condition-v10 .condition-hero__actions {
    display:flex; flex-wrap:wrap; align-items:center; gap:.65rem 1rem; margin-top:1rem;
  }
  body .subhero__actions .btn, .condition-v10 .condition-hero__actions .btn {
    width:auto; min-height:50px; white-space:normal;
  }
  .condition-v10 .condition-hero__guide { font-size:.9rem; }

  /* Condition guides use a compact split hero on phones. Their photographs
     have different crops, so forcing all sixteen into one full-screen cover
     treatment hid subjects and made the text area unnecessarily tall. */
  .condition-v10 .condition-hero {
    position:relative; display:block; min-height:0; overflow:visible;
    padding:calc(var(--nav-h) + env(safe-area-inset-top) + 1rem) 0 2rem;
    background:var(--cloud);
  }
  .condition-v10 .condition-hero::before,
  .condition-v10 .condition-hero::after { content:none; display:none; }
  .condition-v10 .condition-hero__grid {
    position:relative; display:flex; flex-direction:column; width:100%; max-width:none;
    gap:0; margin:0; padding:0 1.25rem;
  }
  .condition-v10 .condition-hero__media {
    position:relative; inset:auto; order:1; width:100%; height:auto; margin:0;
    overflow:hidden; border-radius:18px; background:#d9dad7;
  }
  .condition-v10 .condition-hero__media img {
    display:block; width:100%; height:100%; aspect-ratio:3/2; object-fit:cover; object-position:center;
  }
  .condition-v10 .condition-hero__copy { order:2; margin-top:1.35rem; }
  .condition-v10 .condition-hero h1 { max-width:16ch; }
}
@media (max-width:767px) and (prefers-reduced-transparency:reduce) {
  body .subhero .subhero__scrim::before {
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
}
