/* =====================================================================
   HOW — v291 clean rebuild.
   Ground-up replacement of the legacy HOW page (page-hero--how scroll
   rig, reveal-stack, how-reveal-pair, how-turns pillars, how-diamond,
   how-when, how-next, live cta-footer). how.html no longer loads
   about-v229.css or how-v246.css.

   Architecture: baked dual-breakpoint, mirroring the homepage (v289)
   and the practice pages.
     • Desktop (>=1025): the five supplied desktop section assets,
       stacked full-width, with transparent hotspots over the
       interactive elements (THE PROOF, the bold practice words, the
       CTA buttons, the footer practice links + phone).
     • Mobile/Tablet (<=1024): the five supplied mobile section assets,
       stacked, with the same hotspot set against the mobile layout.
   Every visible word is also present as clipped semantic text (incl. a
   real <h1>) so SEO / accessibility are preserved.

   Desktop CTA note: the supplied desktop CTA asset is portrait
   (1290x1815) while sections 1-4 are 1920-wide landscape. It is capped
   at its native 1290px width and centred on black so it is never
   upscaled (the "sharp" brand can't afford softening). Sections 1-4
   render full-width.
   ===================================================================== */

.page-how .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-how .how { display: block; background: var(--color-near-black); }
.page-how .how-dt { display: none; }
.page-how .how-m  { display: none; }

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

/* ---------- DESKTOP (>=1025) ---------- */
@media (min-width: 1025px) {
  .page-how .how-dt { display: block; }
  .page-how .how-dt__sec {
    display: block;
    position: relative;
    line-height: 0;
    width: 100%;
    margin: 0 auto;
  }
  .page-how .how-dt__sec > img {
    display: block;
    width: 100%;
    height: auto;
  }
  /* CTA is a portrait asset — cap at native width, centre on black so
     it never upscales and the letterbox is seamless against its own
     black background. */
  .page-how .how-dt__sec--cta {
    max-width: 1290px;
    background: #000;
  }
  .page-how .how-dt__hot {
    position: absolute;
    display: block;
    z-index: 3;
    border-radius: 4px;
  }
  .page-how .how-dt__hot:focus-visible { outline: 2px solid #8b6e3b; outline-offset: 2px; }
}