@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=DM+Sans:wght@400;600;700;800&display=swap');
:root { color-scheme:dark; --black:#101311; --panel:#171d19; --cream:#fff9ef; --muted:#d2d8cf; --green:#135339; --red:#e93840; --light-red:#ff6166; }
* { box-sizing:border-box; }
body { margin:0; background:var(--black); color:var(--cream); font:1rem/1.55 'DM Sans',system-ui,sans-serif; }
a { color:inherit; }
a:focus-visible, video:focus-visible { outline:3px solid white; outline-offset:4px; }
.shell { width:min(1250px,calc(100% - 48px)); margin-inline:auto; }
.skip { position:absolute; top:8px; left:8px; transform:translateY(-150%); z-index:2; background:var(--cream); color:var(--black); padding:8px; }
.skip:focus { transform:none; }
.top { border-top:5px solid transparent; border-image:linear-gradient(90deg,#159357 33%,#fff 33% 66%,#ed343e 66%) 1; border-bottom:1px solid #354139; }
.bar,.footer-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px 26px; padding-block:16px; }
.brand { font:900 1.65rem/.95 'Barlow Condensed',Impact,sans-serif; letter-spacing:.03em; text-decoration:none; }
nav,.actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; }
nav a { display:inline-flex; align-items:center; min-height:44px; font-weight:800; text-decoration:none; }
nav a[aria-current],nav a:hover { text-decoration:underline; text-underline-offset:5px; }
nav .nav-shop { padding-inline:14px; background:var(--red); color:#130b0b; }
.hero,.split { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; gap:clamp(26px,5vw,76px); }
.hero,.interior { padding-block:clamp(44px,8vw,110px); }
.eyebrow { color:var(--light-red); text-transform:uppercase; font-size:.8rem; letter-spacing:.19em; font-weight:800; margin:0 0 12px; }
h1,h2 { font-family:'Barlow Condensed',Impact,'Arial Narrow',sans-serif; line-height:.87; text-transform:uppercase; font-weight:900; margin:0; }
h1 { font-size:clamp(4rem,8vw,8.4rem); overflow-wrap:anywhere; }
h1 span { display:block; color:var(--light-red); }
h2 { font-size:clamp(2rem,5vw,4rem); }
.lead { color:var(--muted); max-width:43ch; font-size:clamp(1.05rem,2vw,1.3rem); }
.actions { margin-top:24px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:10px 19px; font-weight:800; text-decoration:none; }
.primary { background:var(--red); color:#130b0b; border:1px solid var(--red); }
.primary:hover,.nav-shop:hover { background:#ff7277; }
.outline { border:1px solid #88938b; }
.outline:hover { background:#313d35; }
.hero-film { background:#000; border:1px solid #39483d; box-shadow:7px 7px 0 var(--green); }
.hero-film video { width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; display:block; background:#000; }
.film-link { display:inline-flex; align-items:center; min-height:44px; padding:0 12px; font-size:.85rem; }
.shop-strip { background:var(--green); }
.strip-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; padding-block:30px; }
.strip-inner p:last-child { margin-bottom:0; }
.strip-inner .eyebrow { color:var(--cream); }
.portrait { display:block; width:100%; max-width:440px; height:auto; justify-self:center; border:1px solid #415247; box-shadow:7px 7px 0 var(--green); }
.badge { max-width:390px; }
.video-title { margin:22px 0 16px; }
.video-frame { width:100%; max-width:900px; aspect-ratio:16/9; background:#000; }
.video-frame iframe { width:100%; height:100%; display:block; border:0; }
.connect-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:26px; }
.connect-grid section { background:var(--panel); border-top:4px solid var(--green); padding:24px; }
.connect-grid section:last-child { border-top-color:var(--red); }
.connect-grid .button { margin-top:20px; }
footer { border-top:1px solid #354139; color:var(--muted); }
@media(max-width:760px) {
  .hero,.split,.connect-grid { grid-template-columns:1fr; }
  .shell { width:calc(100% - 36px); }
  .hero { padding-top:30px; }
  h1 { font-size:clamp(3.3rem,13vw,6rem); }
  nav { gap:4px 13px; }
  .bar { gap:6px; }
}

.brand-logo { display: block; width: clamp(112px, 15vw, 164px); height: auto; }
.top .bar { padding-block: 5px; }