/* Fixwell art-direction layer (Claude): loaded after fixwell.css. Caps the hero, puts the job ticket over the photo. */

h1 { font-size: clamp(2.8rem, 6.4vw, 6rem); line-height: 0.95; letter-spacing: -0.035em; }
h2 { font-size: clamp(2rem, 3.8vw, 3.4rem); line-height: 1.02; letter-spacing: -0.025em; }

[data-section="hero"] { padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4.5rem); }
[data-section="hero"] .hero-grid { align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
[data-section="hero"] .hero-grid > div:last-child { position: relative; padding-bottom: 3rem; }
[data-section="hero"] .hero-photo {
  width: 100%; aspect-ratio: 4 / 5; max-height: min(620px, 72vh); object-fit: cover; object-position: 50% 25%;
  border-radius: 24px; display: block;
}
[data-section="hero"] p:not(.mono) { font-size: clamp(1.05rem, 1.3vw, 1.25rem); max-width: 38ch; }

/* The job ticket overlaps the photo like a phone notification */
[data-section="hero"] .job-ticket {
  position: absolute; left: clamp(-3rem, -4vw, -1rem); bottom: 0; width: min(340px, 92%);
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.5); transform: rotate(-2deg);
}
[data-section="hero"] .job-ticket .mono { font-size: 1.35rem; font-weight: 700; }

@media (max-width: 810px) {
  [data-section="hero"] .hero-photo { aspect-ratio: 5 / 4; max-height: 420px; }
  [data-section="hero"] .hero-grid > div:last-child { padding-bottom: 0; }
  [data-section="hero"] .job-ticket { position: relative; left: auto; width: 100%; margin-top: -2.5rem; transform: none; }
}
@media (prefers-reduced-motion: reduce) { [data-section="hero"] .job-ticket { transform: none; } }

/* On the navy hero: a solid white ticket and a visible outline button */
[data-section="hero"] .job-ticket { background: #fff; color: var(--navy, #0B2545); border: 2px solid var(--navy, #0B2545); border-radius: 18px; padding: 1.1rem 1.2rem; opacity: 1; backdrop-filter: none; }
[data-section="hero"] .job-ticket * { color: inherit; }
[data-section="hero"] .job-ticket .status-dot { background: var(--ok, #2DC653); }
[data-section="hero"] .button-outline { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.6); }
[data-section="hero"] .button-outline:hover { background: #fff; color: var(--navy, #0B2545); }

/* Tap targets >= 44px: card text links and the mobile tap-to-call bar */
.text-link { display: inline-flex; align-items: center; min-height: 44px; }
.mobile-emergency a { display: flex; align-items: center; justify-content: center; min-height: 48px; width: 100%; }