:root{
  --navy:#0b1e3a;
  --red:#d62828;
  --white:#ffffff;
  --ink:#0e1222;
  --ink-2:#3b4157;
  --bg:#f7f8fb;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.pad-lg{padding:48px 20px}

/* Header */
.site-header{
  position:sticky;top:0;z-index:10;
  background:linear-gradient(0deg, rgba(255,255,255,.85), rgba(255,255,255,.85));
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid #e6e8ef;
}
.header-wrap{
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left spacer | brand | nav */
  align-items: center;
  height: 136px;
}
.brand{display:inline-flex;gap:10px;align-items:center;text-decoration:none;color:var(--navy);font-family:Anton, sans-serif;letter-spacing:.06em;font-size:20px
  grid-column: 2;
  justify-self: center;}
.brand-flag{color:var(--red)}
.brand-text{white-space:nowrap}


.pre-hero-banner { padding-top: 8px; }
.pre-hero-banner .container { max-width: 1200px; } /* match site container */
.pre-hero-banner img{
  display:block;
  width:100%;
  height:560px;              /* desktop height */
  object-fit:cover;          /* crop to fit nicely */
  object-position:center;
  border-radius:14px;
}
@media (max-width: 768px){
  .pre-hero-banner img{ height:220px; }  /* smaller on mobile */
}
.nav{
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
}

.nav a{
  text-decoration:none;color:var(--ink-2);margin-left:18px;font-weight:600
}
.nav a.active{color:var(--navy);border-bottom:2px solid var(--red);padding-bottom:4px}

.brand-logo{
  height: 32px;
  width: auto;
  display: block;
}
@media (min-width: 900px){
  .brand-logo{ height: 36px; }
}

/* Hero */
.hero{
  position: relative;
  isolation: isolate;
  color: var(--navy);    
  background: none;      
  padding: 48px 0;
  overflow: visible;
}
.hero-inner{position:relative;z-index:1;text-align:center}
.hero-title{font-family:Anton,sans-serif;letter-spacing:.04em;font-size: clamp(34px, 5vw, 60px);margin:0 0 10px}
.hero-sub{opacity:.92;margin:0 0 24px;font-size: clamp(16px, 2.5vw, 20px)}
.hero .cta-row{display:flex;gap:12px;justify-content:center}
.hero-stripes{
  display:none
}

/* Hero product images */
.hero-products{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 24px;
  margin: 12px 0 16px;
}
.hero-prod{
  height: 180px;               /* desktop size */
  width: auto;
  max-width: 45vw;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.12));
}

/* tighten spacing before the buttons when images are present */
.hero-products + .cta-row{ margin-top: 12px; }

/* Responsive tweaks */
@media (max-width: 900px){
  .hero-prod{ height: 150px; max-width: 70vw; }
}
@media (max-width: 600px){
  .hero-products{ flex-direction: column; gap: 12px; }
  .hero-prod{ height: 160px; max-width: 80vw; }
}

/* Tweak hero product images */
.hero-products{ gap: 160px; }                  /* twice the current spacing */

/* make the pre-roll (first image) ~25% smaller */
.hero-products .hero-prod:first-child{ height: 100px; }  

/* responsive sizes to keep the ratio on smaller screens */
@media (max-width: 900px){
  .hero-products{ gap: 32px; }
  .hero-products .hero-prod:first-child{ height: 120px; }  /* from 150px → 120px */
}
@media (max-width: 600px){
  .hero-products{
    flex-direction: column;   /* keep stacked */
    align-items: center;      /* <-- center horizontally */
    gap: 16px;
  }
  .hero-prod{ margin: 0 auto; }
}


/* Buttons */
.btn{
  appearance:none;border:none;border-radius:999px;padding:12px 18px;font-weight:800;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px
}
.btn-primary{background:var(--red);color:var(--white)}
.btn-primary:hover{filter:brightness(.95)}
.btn-ghost{background:transparent;border:2px solid rgba(255,255,255,.75);color:var(--white)}
.btn-ghost:hover{border-color:#fff}
.btn-outline{
  background: transparent;
  border: 2px solid var(--navy);
  color: var(--navy);
}
.btn-outline:hover{
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.stats{ padding: 20px 0 28px; }
.stats-row{
  display: grid;
  grid-template-columns: repeat(4, minmax(120px,1fr));
  gap: 32px;
  align-items: end;
  text-align: center;
}
.stat-num{
  font-family: Anton, sans-serif;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: clamp(28px, 6vw, 56px);
  line-height: 1;
  color: var(--navy);
}
.stat-label{
  margin-top: 8px;
  font-weight: 700;
  font-size: clamp(12px, 1.8vw, 16px);
  color: var(--ink);
}
.u-underline{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.stats-desc{
  margin: 18px auto 0;
  text-align: center;
  font-weight: 400;
  opacity: .92;
  color: var(--ink);
  max-width: 980px;
}

@media (max-width: 768px){
  .stats-row{ grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
}

/* Footer */
.site-footer{
  margin-top:48px;background:#0a1a33;color:#c8d2ea;padding:24px 0
}
.footer-grid{
  display:grid;gap:18px;grid-template-columns:1fr;align-items:center
}
.footer-links a{color:#c8d2ea;text-decoration:none;margin-right:14px}
.footer-links a:hover{color:#fff}

/* Find Us layout */
.store-tools{display:flex;gap:10px;margin:12px 0 18px}
.store-tools input{flex:1;padding:12px;border:1px solid #dfe3ee;border-radius:10px;background:#fff}
.store-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.store-map{height:440px;border-radius:var(--radius);border:1px solid #e6e8ef;overflow:hidden}
.store-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-height:440px;overflow:auto}
.store-list li{background:#fff;border:1px solid #e6e8ef;border-radius:12px;padding:12px}
.store-list a{color:var(--navy);font-weight:700;text-decoration:none}

/* Merch grid */
.grid-products{
  display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:18px
}
.product-card{
  display:block;background:#fff;border:1px solid #e6e8ef;border-radius:14px;overflow:hidden;text-decoration:none;color:inherit
}
.product-card img{width:100%;height:220px;object-fit:cover;display:block}
.product-body{display:flex;align-items:center;justify-content:space-between;padding:12px}
.price{font-weight:800;color:var(--navy)}


/* Responsive */
@media (max-width: 900px){
  .store-layout{grid-template-columns:1fr}
  .store-map{height:360px}
}