/* Front Door hero — Cory's composed door image (Figma export at /assets/door-hero.png).
   Commercial faces (Tiffany Gothic CC, Broken Ink) are baked INTO the PNG — license-safe,
   no font file embedded. Swap the PNG with a higher-res export anytime; no code change. */

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Two-column hero on desktop: narrow door image hard-left; wide headline + copy + sign-up right.
   Tuned so the whole thing (door + copy + sign-up box) fits without scrolling on a laptop. */
.hero-row { display:flex; gap:28px; align-items:flex-start; margin-top:6px; }
.hero-media { flex:0 0 30%; position:sticky; top:20px; }
.hero-content { flex:1 1 70%; min-width:0; }

.door-img {
  display:block; width:100%; max-width:350px; height:auto;
  border-radius:6px; box-shadow:0 16px 44px rgba(16,24,40,.24);
}

.headline {
  font-family:var(--font); font-weight:800; font-size:clamp(24px,2.6vw,34px);
  line-height:1.15; letter-spacing:-.01em; color:var(--ink); margin:0 0 12px;
}
.copy p { font-size:15px; line-height:1.5; color:var(--ink); margin:0 0 11px; }
.copy em { font-style:italic; }
/* tighten the gap before the sign-up box so it sits up with the copy */
.hero-content .card { margin-top:16px; }

/* Stack on narrower screens (mobile keeps the original single-column feel). */
@media (max-width:860px) {
  .hero-row { flex-direction:column; gap:22px; }
  .hero-media { position:static; flex:none; display:flex; justify-content:center; }
  .hero-content { flex:none; }
  .door-img { max-width:440px; }
}