/*
Homepage hero — bespoke, one-off layout (not a reusable .bsw-hero variant)
matching the reference screenshot: full-bleed key art, brush-logo + tagline
+ subhead + CTAs left-aligned over the image, nav overlaid top-right
(nav itself styled in 06-chrome.css). Background image/position is content,
set inline per page same convention as every other hero on the site.

Content is pinned to the same --bsw-container-wide column the header nav
uses (assets/css/06-chrome.css), instead of viewport-relative padding, so
the text block lines up with the nav on any screen width and doesn't drift
toward the raw edge on ultra-wide monitors.

Section is a hard min-height:100vh (client wants it filling the screen).
The source art is 1672x941 (~1.78:1) — on a typical desktop browser window
the visible viewport is proportionally *wider* than 1.78:1 (window minus
browser chrome), so background-size:cover matches the box on width and
overflows on height, i.e. it crops top/bottom, not left/right. Anchoring
`background-position` to the bottom edge means that overflow is taken
entirely from the sky at the top — the road/cars/sheriff at the bottom of
the frame are never cropped. Only on narrow/tall mobile viewports does the
crop flip to left/right (box gets narrower than the image's ratio); the
mobile breakpoints shift the x-position right there to keep the sheriff
and logo in frame instead of the empty desert on the left.
*/

/* Standing rule (2026-08-10): every page's hero is full viewport — width:100%, min-height:100vh — on every breakpoint, no smaller mobile override. This section already followed that by client request from the start; .bsw-watch-hero (15-watch.css) and .bsw-trailerhero (16-trailer-page.css) were brought up to match it. */
.bsw-hero-main{position:relative;width:100%;overflow:hidden;min-height:100vh;display:flex;align-items:flex-start;background-size:cover;background-position:center bottom}
.bsw-hero-main::before{content:"";position:absolute;inset:0;background:
	linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.3) 42%, rgba(0,0,0,0) 66%),
	linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 78%, rgba(0,0,0,.3));
}

.bsw-hero-main-container{position:relative;z-index:2;max-width:var(--bsw-container-wide);margin:0 auto;padding:0 32px;width:100%}
.bsw-hero-main-content{max-width:640px;padding-top:clamp(90px,15vh,180px)}
.bsw-hero-logo{display:block;width:min(782px,50.6vw);height:auto;margin:0 0 16px}
.bsw-hero-tagline{margin:0 0 20px;font-family:var(--bsw-font-support);font-size:clamp(22px,2.1vw,32px);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--bsw-text-bright)}
.bsw-hero-tagline span{color:var(--bsw-red)}
.bsw-hero-sub{margin:0 0 32px;max-width:480px;font-family:var(--bsw-font);font-size:clamp(15px,1.1vw,17px);line-height:1.65;color:#f2f2f2}
.bsw-hero-main .bsw-btn-row{justify-content:flex-start}

@media (max-width:1100px){
	.bsw-hero-logo{width:min(598px,64.4vw)}
}

@media (max-width:900px){
	.bsw-hero-main{background-position:65% bottom}
	.bsw-hero-main-content{max-width:80%;padding-top:clamp(90px,16vh,150px)}
	.bsw-hero-logo{width:min(460px,78.2vw)}
}

@media (max-width:560px){
	.bsw-hero-main{background-position:72% bottom}
	.bsw-hero-main-container{padding:0 20px}
	.bsw-hero-main-content{max-width:100%;padding-top:clamp(80px,14vh,120px);padding-bottom:40px}
	.bsw-hero-logo{width:min(345px,89.7vw)}
	.bsw-hero-tagline{font-size:19px}
	.bsw-hero-sub{font-size:14px}
}