/* =====================================================================
   HOMEPAGE — v289 clean rebuild.
   Ground-up replacement of the legacy homepage (pillars / #sharp /
   #challenged / home-reveal-pair / 3-track live+baked structure).
   This file is homepage-only and standalone — index.html no longer
   loads the shared home-v228.css (which still serves the Results page).

   Architecture: baked dual-breakpoint, mirroring the practice pages.
     • Desktop (>=1025): the supplied desktop homepage composite, rendered
       full-bleed, with transparent hotspots over the interactive elements.
     • Mobile/Tablet (<=1024): the five supplied mobile section assets,
       stacked, with hotspots on the case-study (-> results) and the
       closing CTA (Start -> contact, phone -> tel, Second Opinion ->
       second-opinions).
   Every visible word is also present as clipped semantic text (incl. a
   real <h1>) so SEO / accessibility are preserved.
   ===================================================================== */

.page-home .sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important; white-space: nowrap !important;
  margin: -1px !important; padding: 0 !important; border: 0 !important;
}

.page-home .home { display: block; background: var(--color-near-black); }
.page-home .home-dt { display: none; }
.page-home .home-m  { display: none; }

/* ---------- MOBILE + TABLET (<=1024) ---------- */
@media (max-width: 1024px) {
  .page-home .home-m { display: block; }
  .page-home .home-m__sec,
  .page-home .home-m__link {
    display: block;
    position: relative;
    line-height: 0;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }
  .page-home .home-m__sec > img,
  .page-home .home-m__link > img {
    display: block;
    width: 100%;
    height: auto;
  }
  .page-home .home-m__hot {
    position: absolute;
    display: block;
    z-index: 3;
    border-radius: 4px;
    -webkit-tap-highlight-color: transparent;
  }
  .page-home .home-m__hot:focus-visible { outline: 2px solid #8b6e3b; outline-offset: 2px; }
}

/* ---------- DESKTOP (>=1025) ---------- */
@media (min-width: 1025px) {
  .page-home .home-dt {
    display: block;
    position: relative;
    width: 100%;
    margin: 0 auto;
  }
  .page-home .home-dt__img {
    display: block;
    width: 100%;
    height: auto;
  }
  .page-home .home-dt__hot {
    position: absolute;
    display: block;
    z-index: 3;
    border-radius: 4px;
  }
  .page-home .home-dt__hot:focus-visible { outline: 2px solid #8b6e3b; outline-offset: 2px; }
}