.hero { position:relative; min-height:clamp(360px,52vw,670px); padding:0 1rem; background-image:var(--hero-image); background-position:center; background-size:cover; isolation:isolate; }
.hero__overlay { position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.32)); }
.hero__content { position:absolute; left:50%; bottom:10%; transform:translateX(-50%); display:flex; flex-direction:column; width:min(90%,980px); color:#fff; text-align:center; }
.hero__eyebrow { order:2; margin:0; color:#fff; font:400 clamp(18px,1.8vw,25px)/1.6 Roboto,Arial,sans-serif; text-shadow:4px 4px 4px rgba(0,0,0,.97); text-transform:uppercase; }
.hero h1 { order:1; margin:0; color:#fff; font:900 clamp(43px,6.33vw,78px)/1 Roboto,Arial,sans-serif; letter-spacing:3.7px; word-spacing:8px; text-shadow:9px 9px 10px rgba(0,0,0,.97); text-transform:uppercase; }
.hero__brand { display:block; order:3; margin:0; color:#ff9000; font:500 clamp(14px,1.3vw,18px)/1.6 Roboto,Arial,sans-serif; text-shadow:6px 6px 5px rgba(0,0,0,.97); text-transform:uppercase; }
@media(max-width:640px){ .hero h1 { font-size:clamp(31px,9.35vw,43px); word-spacing:4px; text-shadow:6px 6px 11px rgba(31,30,30,.97); } }
@media(max-width:767px){ .hero { background-image:var(--hero-image-mobile,var(--hero-image)); } }