/* The supplied image is a media layer; headline, actions and metrics stay HTML above it. */
.hero.hero-with-image { min-height: 94vh; overflow: hidden; justify-content: flex-start; text-align: left; isolation: isolate; background: #080a0e; }
.hero-with-image::before, .hero-with-image::after, .hero-with-image .hero-orb { display: none; }
.hero-media, .hero-overlay { position: absolute; inset: 0; }
.hero-media { z-index: -2; overflow: hidden; }
.hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 61% center; transform: scale(1.04); will-change: transform; animation: hero-image-in 900ms ease-out both; }
.hero-overlay { z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.52) 39%, rgba(0,0,0,.38) 100%); }
.hero-content-left { width: min(100%, 680px); margin-left: max(24px, calc((100vw - 1200px) / 2 + 32px)); margin-right: 24px; }
.hero-content-left .hero-tagline, .hero-content-left .trust-line { margin-left: 0; margin-right: 0; }
.hero-content-left .hero-actions { justify-content: flex-start; }
.hero-metrics { display: flex; gap: 0; margin-top: 34px; }
.hero-metrics > div { min-width: 118px; padding: 0 20px; border-left: 1px solid rgba(255,255,255,.28); }
.hero-metrics > div:first-child { border-left: 0; padding-left: 0; }
.hero-metrics strong, .hero-metrics span { display: block; }
.hero-metrics strong { color: var(--gold-light); font: 700 clamp(26px,3vw,38px) var(--head); }
.hero-metrics span { margin-top: 3px; color: rgba(255,255,255,.78); font-size: 11px; line-height: 1.4; }
.hero-with-image + .stats { display: none; }
@keyframes hero-image-in { from { opacity: 0; transform: scale(1.09); } to { opacity: 1; transform: scale(1.04); } }
@media (max-width: 800px) { .hero.hero-with-image { min-height: 92vh; } .hero-content-left { margin-left: 24px; } .hero-media img { object-position: 59% center; } .hero-overlay { background: linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.42)); } }
@media (max-width: 560px) { .hero.hero-with-image { min-height: 90vh; padding-top: 120px; padding-bottom: 64px; } .hero-content-left { margin-left: 20px; margin-right: 20px; } .hero-media img { object-position: 64% center; } .hero-overlay { background: linear-gradient(90deg,rgba(0,0,0,.66),rgba(0,0,0,.45)); } .hero-metrics { margin-top: 28px; } .hero-metrics > div { min-width: 0; flex: 1; padding: 0 12px; } .hero-metrics span { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .hero-media img { animation: none; transform: scale(1.04) !important; } }