/* ---------- Design tokens ---------- */
:root{
  --red: #E2231A;
  --red-dark: #B01810;
  --black: #121110;
  --near-black: #1A1817;
  --cream: #F4EEE3;
  --white: #FFFFFF;
  --mustard: #EFB01F;
  --grey: #6b6660;

  --font-display: "Anton", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--black);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; }
p{ margin:0; }
ul,dl{ margin:0; padding:0; }

.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow{
  display:inline-block;
  font-weight:700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}
.eyebrow--light{ color: var(--mustard); }

.section-title{
  font-family: var(--font-display);
  font-weight:400;
  text-transform: uppercase;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.02;
  letter-spacing: .01em;
}
.section-title--center{ text-align:center; }
.section-title--light{ color: var(--white); }

.btn{
  display:inline-block;
  font-family: var(--font-body);
  font-weight:700;
  font-size: 15px;
  letter-spacing:.02em;
  padding: 15px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn--red{ background: var(--red); color: var(--white); }
.btn--red:hover{ background: var(--red-dark); }
.btn--outline-light{ border-color: rgba(255,255,255,.7); color: var(--white); }
.btn--outline-light:hover{ background: var(--white); color: var(--black); }
.btn--outline-dark{ border-color: var(--black); color: var(--black); }
.btn--outline-dark:hover{ background: var(--black); color: var(--white); }
.btn--ghost{ border-color: rgba(0,0,0,.15); color: var(--black); padding: 10px 20px; font-size:14px; }
.btn--ghost:hover{ border-color: var(--red); color: var(--red); }

/* ---------- Ticker ---------- */
.ticker{
  background: var(--black);
  color: var(--white);
  overflow:hidden;
  white-space: nowrap;
  border-bottom: 3px solid var(--red);
}
.ticker__track{
  display:inline-flex;
  animation: ticker 22s linear infinite;
}
.ticker__track span{
  display:inline-block;
  padding: 8px 0;
  font-weight:700;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
@keyframes ticker{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  top:0;
  z-index: 100;
  background: rgba(18,17,16,.9);
  backdrop-filter: blur(6px);
  transition: box-shadow .25s ease, background .25s ease;
}
.site-header.is-scrolled{
  background: rgba(18,17,16,.96);
  box-shadow: 0 2px 20px rgba(0,0,0,.25);
}
.header__inner{
  display:flex;
  align-items:center;
  gap: 24px;
  padding: 14px 24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-right:auto;
}
.brand__logo{
  border-radius:50%;
  background: var(--white);
  object-fit:cover;
}
.brand__word{
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1;
  letter-spacing:.03em;
  color: var(--white);
}
.nav{
  display:flex;
  gap: 28px;
}
.nav a{
  color: var(--white);
  font-weight:600;
  font-size: 14px;
  opacity:.9;
}
.nav a:hover{ opacity:1; color: var(--mustard); }
.header__cta{ border-color: rgba(255,255,255,.4); color:var(--white); }
.header__cta:hover{ background: var(--red); border-color: var(--red); color:var(--white); }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:34px; height:34px;
  background:none; border:none; cursor:pointer;
  padding:0;
}
.nav-toggle span{
  display:block; height:2px; width:100%;
  background: var(--white);
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height: 100svh;
  display:flex;
  align-items:center;
  color: var(--white);
  overflow:hidden;
  background: var(--black);
}
.hero__media{
  position:absolute; inset:0;
  z-index:0;
  background: url("../assets/hero-truck.jpg") center/cover no-repeat;
}
.hero__video{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}
.hero__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(18,17,16,.55) 0%, rgba(18,17,16,.65) 45%, rgba(18,17,16,.95) 100%);
}
.hero__inner{
  position:relative;
  z-index:1;
  padding-top: 60px;
  padding-bottom: 120px;
}
.hero__title{
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(44px, 8vw, 104px);
  line-height: .96;
  margin: 6px 0 22px;
}
.text-stroke{
  -webkit-text-stroke: 2px var(--white);
  color: var(--red);
}
.hero__sub{
  max-width: 520px;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height:1.5;
  color: rgba(255,255,255,.85);
  margin-bottom: 34px;
}
.hero__cta{
  display:flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.drip-divider{
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 46px;
  z-index:2;
  background: var(--cream);
  clip-path: polygon(
    0% 0%, 4% 40%, 8% 0%, 12% 55%, 16% 10%, 20% 60%, 24% 0%, 28% 45%, 32% 5%,
    36% 65%, 40% 15%, 44% 50%, 48% 0%, 52% 40%, 56% 10%, 60% 58%, 64% 0%,
    68% 48%, 72% 8%, 76% 62%, 80% 12%, 84% 45%, 88% 0%, 92% 55%, 96% 15%, 100% 0%,
    100% 100%, 0% 100%
  );
}

/* ---------- Story ---------- */
.story{ padding: 96px 0; }
.story__inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 64px;
  align-items:center;
}
.story__p{
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.7;
  color: #3a3532;
  max-width: 52ch;
}
.story__p--tag{
  font-weight: 700;
  color: var(--black);
}
.story__media img{
  border-radius: 18px;
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.35);
}

/* ---------- Pulse (before/after) ---------- */
.pulse{
  background: var(--red);
  display: flex;
  justify-content: center;
  padding: 0 24px;
}
.pulse img{
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1170 / 897;
  object-fit: cover;
}

/* ---------- Menu ---------- */
.menu{ padding: 100px 0 90px; }
.menu .section-title{ margin-bottom: 48px; }
.menu__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.menu__item{
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 16px;
  padding: 26px 24px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.menu__item:hover{
  transform: translateY(-4px);
  box-shadow: 8px 8px 0 var(--black);
}
.menu__item h3{
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 22px;
  color: var(--red);
  margin-bottom: 10px;
}
.menu__item p{
  font-size: 14.5px;
  line-height:1.55;
  color: #4a4540;
}
.menu__item--feature{
  background: var(--black);
  border-color: var(--black);
}
.menu__item--feature h3{ color: var(--mustard); }
.menu__item--feature p{ color: rgba(255,255,255,.75); }
.menu__note{
  margin-top: 40px;
  text-align:center;
  font-size: 14px;
  color: var(--grey);
}
.menu__note a{ color: var(--red); font-weight:600; }

/* ---------- Game CTA ---------- */
.game-cta{ background: var(--black); padding: 90px 0; overflow:hidden; }
.game-cta__inner{
  display:grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 56px;
  align-items:center;
}
.game-cta__art{ display:flex; justify-content:center; }
.game-cta__svg{ width:100%; max-width:340px; }
.game-cta__title{ margin-bottom: 16px; }
.game-cta__sub{
  color: rgba(255,255,255,.75);
  font-size: 16px;
  line-height:1.6;
  max-width: 46ch;
  margin-bottom: 28px;
}

/* ---------- Reviews ---------- */
.reviews{ padding: 100px 0; }
.reviews__head{ text-align:center; margin-bottom: 48px; }
.reviews__sub{ margin-top:10px; color: var(--grey); font-size:15px; }
.reviews__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.review{
  margin:0;
  background: var(--white);
  border-radius: 16px;
  padding: 28px;
  border-left: 5px solid var(--red);
}
.review p{
  font-size: 16px;
  line-height:1.6;
  color: var(--black);
  margin-bottom: 16px;
}
.review footer{
  font-size: 13px;
  font-weight:700;
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing:.03em;
}

/* ---------- Find Us ---------- */
.find-us{
  background: var(--near-black);
  color: var(--white);
  padding: 100px 0;
}
.find-us__inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items:center;
}
.find-us .section-title{ color: var(--white); margin-bottom: 32px; }
.find-us__list{
  display:grid;
  gap: 22px;
  margin-bottom: 36px;
}
.find-us__list dt{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color: var(--mustard);
  font-weight:700;
  margin-bottom:6px;
}
.find-us__list dd{
  margin:0;
  font-size: 16px;
  line-height:1.5;
  color: rgba(255,255,255,.9);
}
.find-us__list a{ color: var(--white); text-decoration: underline; text-underline-offset:3px; }
.find-us__cta{ display:flex; gap:16px; flex-wrap:wrap; }
.find-us__cta .btn--outline-dark{ border-color: rgba(255,255,255,.5); color: var(--white); }
.find-us__cta .btn--outline-dark:hover{ background: var(--white); color: var(--black); }
.find-us__map{
  border-radius: 18px;
  overflow:hidden;
  aspect-ratio: 4/3.4;
  filter: grayscale(.2) contrast(1.05);
}
.find-us__map iframe{ width:100%; height:100%; border:0; }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--black);
  color: rgba(255,255,255,.7);
  padding: 48px 0 28px;
}
.footer__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
}
.brand--footer .brand__word{ color: var(--white); }
.footer__tag{ font-size:14px; max-width:40ch; }
.footer__links{ display:flex; gap:22px; font-size:14px; font-weight:600; }
.footer__links a:hover{ color: var(--red); }
.footer__copy{ font-size:12px; color: rgba(255,255,255,.4); margin-top:18px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .nav, .header__cta{ display:none; }
  .nav-toggle{ display:flex; }
  .story__inner, .find-us__inner{ grid-template-columns: 1fr; }
  .story__media{ order:-1; }
  .menu__grid{ grid-template-columns: repeat(2,1fr); }
  .reviews__grid{ grid-template-columns: 1fr; }
  .game-cta__inner{ grid-template-columns: 1fr; text-align:center; }
  .game-cta__art{ order:-1; }
  .game-cta__sub{ margin-left:auto; margin-right:auto; }
}
@media (max-width: 560px){
  .menu__grid{ grid-template-columns: 1fr; }
}

/* Mobile nav open state */
.nav.is-open{
  display:flex;
  position:absolute;
  top: 100%;
  left:0; right:0;
  background: rgba(18,17,16,.97);
  flex-direction:column;
  padding: 20px 24px 28px;
  gap: 18px;
}