/* ==========================================================================
   LIVING FEARLESS CO. — STYLES (mobile-first)
   Base rules are the phone layout (320–430px). Larger screens are layered on
   with min-width queries only: 30em (480) · 48em (768) · 64em (1024).
   Desktop compositions sit on a 12-column grid inside an 80rem (1280px)
   container, so every section shares the same left and right edges.

   1. Tokens   2. Base   3. Type   4. Wordmark   5. Buttons & links
   6. Media   7. Nav   8. Utility strip   9. Hero   10. Marquee   11. Gear
   12. Live fearlessly   13. Before you order   14. Finale   15. Contact
   16. Footer   17. Motion
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  --red: #D40016;
  --yellow: #FFE600;
  --charcoal: #171717;
  --gunmetal: #242424;
  --white: #FAFAFA;
  --ink: #111111;
  --text-muted: rgba(250, 250, 250, 0.78);
  --line: rgba(250, 250, 250, 0.14);

  --f-display: "Black Ops One", "Arial Black", Impact, sans-serif;
  --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-cond: "Barlow Condensed", "Barlow", "Arial Narrow", sans-serif;

  /* Heading scale. The mobile value guarantees the widest heading word
     ("SHOP THE GEAR." = 8.64em in Black Ops One) fits a 320px screen. */
  --fs-h2: clamp(1.9rem, 11.2vw - 0.35rem, 6rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);

  /* Layout: one container and one gutter system for every section */
  --max: 80rem;
  --gutter: clamp(1.25rem, 0.25rem + 4vw, 3rem);
  --cols-gap: clamp(1rem, 2.2vw, 2rem);
  --nav-h: 4rem;
  --section-y: clamp(3.5rem, 2.25rem + 5vw, 7.5rem);

  --cut: 0.7rem;
  --clip-cut: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-btn: cubic-bezier(0.65, 0, 0.35, 1);   /* symmetric: hover-out mirrors hover-in */
  --t-btn: 300ms;
  --t-fast: 160ms;
  --t-reveal: 760ms;
}
@media (min-width: 64em) {
  :root { --nav-h: 4.75rem; --cut: 0.85rem; }
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 0.5rem);
  background: var(--charcoal);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-width: 20rem;
  background: var(--charcoal);
  color: var(--white);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }

::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--yellow);
  color: var(--ink);
  font: 700 1rem/1 var(--f-cond);
  text-transform: uppercase;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.i {
  display: inline-block;
  flex: none;
  width: 1.1em;
  height: 1.1em;
  vertical-align: middle;
}

/* ---------- 3. TYPE ---------- */
.h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 0.92;
  text-transform: uppercase;
  text-wrap: balance;
}

/* ---------- 4. WORDMARK ----------
   One component, sized by font-size wherever it is used.
   Geometry comes from Black Ops One's metrics (cap height 0.648em,
   ascent 0.91em, descent 0.34em):
   · the badge is exactly one cap height tall, its bottom on the baseline
     (an inline-block with overflow:hidden takes its baseline from its
     bottom edge);
   · "CO." is set at 0.78em, so its caps are 78% of the main letters;
   · the inner nudge (0.039em) centres the caps optically in the badge. */
.wordmark {
  display: inline-block;
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white);
}
.wordmark__co {
  display: inline-block;
  overflow: hidden;
  vertical-align: baseline;
  height: 0.8308em;                 /* 0.648 / 0.78 */
  margin-left: 0.24em;
  padding: 0 0.32em 0 0.4em;        /* less on the right: the period already leaves air */
  font-size: 0.78em;
  line-height: 0.8308em;
  color: var(--ink);
  background: var(--yellow);
  clip-path: polygon(0.22em 0, 100% 0, calc(100% - 0.22em) 100%, 0 100%);
}
.wordmark__co > span { position: relative; top: 0.039em; }
/* FEARLESS + CO. never separate. Stacked variant breaks only after LIVING. */
.wordmark__tail { white-space: nowrap; }
.wordmark--stack { white-space: normal; }
.wordmark--stack .wordmark__word { display: block; }

/* ---------- 5. BUTTONS & LINKS ----------
   .btn--primary  shopping actions: yellow plate, red sweep on hover
   .btn--outline  secondary actions: frame, white fill on hover
   .textlink      lower-priority links: short rule that extends on hover
   Text, fill and arrow share one duration and easing, so they move together
   and reverse exactly on pointer exit. Hover only applies to real pointers. */
.btn {
  --btn-bg: var(--yellow);
  --btn-fg: var(--ink);
  --btn-fill: var(--red);
  --btn-fg-hover: var(--white);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 2.75rem;
  padding: 0.85em 1.45em;
  border: 0;
  overflow: hidden;
  font-family: var(--f-cond);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--btn-fg);
  background: var(--btn-bg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color var(--t-btn) var(--ease-btn), transform var(--t-fast) var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-btn) var(--ease-btn);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 6px var(--yellow);
  opacity: 0;
  pointer-events: none;
}
.btn:focus-visible { outline: none; }
.btn:focus-visible::after { opacity: 1; }
/* Barlow Condensed caps sit slightly high in the line box; nudge for optical centring */
.btn__label { position: relative; top: 0.04em; }
.btn__icon {
  width: 1em;
  height: 1em;
  transition: transform var(--t-btn) var(--ease-btn);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { transform: scaleX(1); }
  .btn:hover { color: var(--btn-fg-hover); }
  .btn:hover .btn__icon { transform: translate(0.16em, -0.16em); }
}
.btn:active { transform: translateY(2px); }

.btn--primary { clip-path: var(--clip-cut); }
.btn--primary:active { --btn-bg: #E6CF00; }

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-fill: var(--white);
  --btn-fg-hover: var(--ink);
  border: 2px solid rgba(250, 250, 250, 0.85);
  font-weight: 700;
}
.btn--outline::after { box-shadow: inset 0 0 0 3px var(--yellow); }
.btn--outline:active { background: rgba(250, 250, 250, 0.12); }

.btn--sm { padding: 0.6em 0.95em; font-size: 0.95rem; gap: 0.45em; }
.btn--lg { min-height: 3.25rem; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem); padding-inline: 1.6em; }
.btn--xl {
  --cut: clamp(0.85rem, 0.6rem + 0.6vw, 1.25rem);
  min-height: 3.75rem;
  padding: 1em 1.5em;
  font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.6rem);
}
.btn--block { width: 100%; }

.textlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 2.75rem;
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
}
.textlink::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0.45rem;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0.25);
  transform-origin: left center;
  transition: transform var(--t-btn) var(--ease-btn);
}
.textlink .i { width: 1em; height: 1em; transition: transform var(--t-btn) var(--ease-btn); }
.textlink__arrow { color: var(--yellow); }
@media (hover: hover) and (pointer: fine) {
  .textlink:hover::after { transform: scaleX(1); }
  .textlink:hover .textlink__arrow { transform: translate(0.14em, -0.14em); }
}

/* ---------- 6. MEDIA ---------- */
.media { position: relative; overflow: hidden; background: var(--gunmetal); }
.media > img, .media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ph {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 70% at 72% 18%, rgba(250, 250, 250, 0.06), transparent 62%),
    repeating-linear-gradient(135deg, rgba(250, 250, 250, 0.04) 0 1px, transparent 1px 13px),
    var(--gunmetal);
}
/* The hatched placeholder sits behind and is removed once a photo loads */
.has-media > .ph { display: none; }

/* ---------- 7. NAV ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--charcoal);
  transition: box-shadow 300ms ease;
}
.nav.is-scrolled, .menu-open .nav { box-shadow: 0 1px 0 var(--line); }
.nav__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: var(--nav-h);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-right: auto;
  font-size: 1.05rem;
}

.nav__toggle {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.6rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__toggle-bars { display: grid; gap: 6px; width: 22px; }
.nav__toggle-bars i {
  display: block;
  height: 2px;
  background: var(--white);
  transition: transform 300ms var(--ease-out), width 300ms var(--ease-out);
}
.nav__toggle-bars i:last-child { width: 70%; justify-self: end; }
[aria-expanded="true"] .nav__toggle-bars i:first-child { transform: translateY(4px) rotate(45deg); }
[aria-expanded="true"] .nav__toggle-bars i:last-child { width: 100%; transform: translateY(-4px) rotate(-45deg); }

/* Mobile menu panel */
.nav__menu {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  background: var(--charcoal);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.75rem);
  transition: opacity 250ms ease, transform 250ms var(--ease-out), visibility 0s linear 250ms;
}
.menu-open .nav__menu {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 250ms ease, transform 250ms var(--ease-out);
}
.nav__links li + li { border-top: 1px solid var(--line); }
.nav__links a {
  display: block;
  padding-block: 1rem 0.85rem;
  font: 400 clamp(2rem, 10vw, 3rem)/1 var(--f-display);
  text-transform: uppercase;
}
.nav__links a:active { color: var(--yellow); }

@media (min-width: 48em) {
  .nav__toggle, .nav__menu-shop { display: none; }
  .nav__bar { gap: clamp(1.25rem, 3vw, 2.5rem); }
  .nav__brand { font-size: clamp(1.05rem, 0.75rem + 0.6vw, 1.35rem); }
  .nav__brand .wordmark--stack .wordmark__word { display: inline; }
  .nav__menu {
    position: static;
    z-index: auto;
    flex-direction: row;
    padding: 0;
    background: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .nav__links { display: flex; gap: clamp(1.25rem, 2.4vw, 2.25rem); }
  .nav__links li + li { border: 0; }
  .nav__links a {
    position: relative;
    padding-block: 0.75rem;
    font: 700 1rem/1 var(--f-cond);
    letter-spacing: 0.08em;
    color: var(--text-muted);
    transition: color var(--t-btn) var(--ease-btn);
  }
  .nav__links a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0.35rem;
    height: 2px;
    background: var(--yellow);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-btn) var(--ease-btn);
  }
  .nav__links a:hover, .nav__links a.is-active { color: var(--white); }
  .nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }
  .nav__shop { font-size: 1rem; }
}

/* ---------- 8. FEARLESS FLORES UTILITY STRIP ---------- */
.strip {
  background: var(--gunmetal);
  border-bottom: 1px solid var(--line);
}
.strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 1.5rem;
  padding-top: 0.6rem;
}
.strip__label {
  font: 600 0.95rem/1.2 var(--f-cond);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.strip__links { display: flex; flex-wrap: wrap; column-gap: clamp(0.85rem, 3vw, 1.25rem); }
.strip__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 2.75rem;
  font: 700 0.95rem/1 var(--f-cond);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.strip__links .i { width: 1.1em; height: 1.1em; color: var(--yellow); }
.strip__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.55rem;
  height: 1px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-btn) var(--ease-btn);
}
@media (hover: hover) and (pointer: fine) {
  .strip__links a:hover::after { transform: scaleX(1); }
}
@media (min-width: 48em) {
  .strip__inner { padding-top: 0; min-height: 2.5rem; }
  .strip__links a { min-height: 2.5rem; }
  .strip__links a::after { bottom: 0.45rem; }
}

/* ---------- 9. HERO ----------
   Typography-led: the three lines step across the full container width
   (left / indented / right), and the copy and CTA anchor opposite edges
   beneath them, so weight is spread across the page instead of piling left. */
.hero {
  position: relative;
  padding-block: clamp(2rem, 1rem + 4vw, 5rem) clamp(4.5rem, 3rem + 5vw, 8rem);
  overflow: hidden;
  background:
    radial-gradient(45% 80% at 78% -10%, rgba(250, 250, 250, 0.08), transparent 70%),
    var(--charcoal);
}
.hero__media { position: absolute; inset: 0; display: none; }
.hero--media .hero__media { display: block; }
.hero--media .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(23, 23, 23, 0.92) 0%, rgba(23, 23, 23, 0.55) 55%, rgba(23, 23, 23, 0.35) 100%);
}
.hero__media > img, .hero__media > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero__inner { position: relative; z-index: 1; }

.hero__title {
  font-family: var(--f-display);
  font-weight: 400;
  /* Phones: "NOT MADE" (5.36em) fills ~95% of the column */
  font-size: clamp(2.75rem, 17.7vw - 0.45rem, 6rem);
  line-height: 0.9;
  text-transform: uppercase;
  text-shadow: 0.045em 0.045em 0 #000;
}
.hero__title .line {
  display: block;
  overflow: hidden;
  padding: 0.02em 0.1em 0.08em 0;
  margin-bottom: -0.08em;
}
.hero__title .line > span { display: inline-block; }

.hero__foot { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.hero__copy {
  max-width: 30rem;
  text-wrap: balance;
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem);
  font-weight: 500;
  line-height: 1.5;
  color: rgba(250, 250, 250, 0.9);
}
.hero__cta { width: 100%; }

@media (min-width: 30em) {
  .hero__cta { width: auto; justify-self: start; }
}
@media (min-width: 48em) {
  /* Desktop: "NOT MADE" spans ~72% of the container; lines step across it */
  .hero__title { font-size: min(12.3vw, 10rem); }
  .hero__title .line--2 { padding-left: 16.666%; }
  .hero__title .line--3 { text-align: right; }
  .hero__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-top: clamp(1.5rem, 3vw, 2.75rem);
  }
  .hero__copy { max-width: 31rem; }
  .hero__cta { flex: none; }
}

/* ---------- 10. MARQUEE ---------- */
.marquee {
  position: relative;
  z-index: 3;
  margin-block: -2rem;
  padding-block: 2rem;
  overflow: hidden;
  pointer-events: none;
}
.marquee__band {
  width: 108%;
  margin-left: -4%;
  background: var(--yellow);
  color: var(--ink);
  transform: rotate(-2deg);
  box-shadow: 0 0.3rem 0 #000;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 52s linear infinite;
}
.marquee.is-paused .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
  padding-block: 0.75rem 0.62rem;
}
.marquee__group span {
  padding-inline: 1.25rem;
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 0.95rem + 1.5vw, 2.4rem);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__group i {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--red);
  transform: skewX(-18deg);
}
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- 11. SHOP THE GEAR ---------- */
.gear {
  padding-block: calc(var(--section-y) + 0.5rem) var(--section-y);
  background: var(--charcoal);
}
.gear__head { display: grid; gap: 0.85rem; margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.5rem); }
.gear__intro { max-width: 24rem; font-size: 1.1em; color: var(--text-muted); }

.gear__grid { display: grid; gap: 3rem; }

/* Every feature shares one structure: a square frame with its name set on
   top of the image, then the CTA. Equal columns give the collection and the
   full store equal weight, and keep both CTAs on the same line. */
.feature {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 1.25rem;
}
.feature__frame {
  position: relative;
  width: 100%;
  container-type: inline-size;      /* title and mark scale with the tile (cqi) */
}
.feature__visual {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.feature__visual > img, .feature__visual > .ph, .feature__mark {
  transition: transform 900ms var(--ease-out);
}
/* Photo tiles: a soft floor shade so the name stays legible on any photo */
.feature__visual--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 42%);
  pointer-events: none;
}
/* The name, layered above the image (clicks pass through to the tile link) */
.feature__title {
  position: absolute;
  z-index: 2;
  left: 1.25rem;  left: 6cqi;
  right: 1.25rem; right: 6cqi;
  bottom: 1.1rem; bottom: 5.5cqi;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.9rem;
  font-size: clamp(1.6rem, 10cqi, 3.75rem);
  line-height: 0.92;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--white);
  text-shadow: 0.045em 0.045em 0 #000;
  pointer-events: none;
}
/* The whole store: a brand graphic built from the wordmark, lifted clear of the title */
.feature__visual--brand {
  display: grid;
  place-items: center;
  padding-bottom: 20cqi;
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 13px),
    var(--red);
}
.feature__mark { font-size: 2.5rem; font-size: 10.5cqi; }

@media (hover: hover) and (pointer: fine) {
  .feature:hover .feature__visual > img,
  .feature:hover .feature__visual > .ph,
  .feature:hover .feature__mark { transform: scale(1.035); }
}

@media (min-width: 48em) {
  .gear__grid { grid-template-columns: 1fr 1fr; gap: 3rem var(--cols-gap); }
}
@media (min-width: 64em) {
  .gear__head { grid-template-columns: 8fr 4fr; align-items: end; column-gap: var(--cols-gap); }
  .gear__title { font-size: min(6.2vw, 5.5rem); }
  .gear__intro { justify-self: end; text-align: right; }
  .gear__grid:has(> .feature:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 12. LIVE FEARLESSLY ---------- */
.about {
  padding-block: clamp(3.5rem, 2.5rem + 4.5vw, 7rem);
  background: var(--gunmetal);
}
.about__grid { display: grid; gap: 1.5rem; }
.about__est {
  margin-bottom: 0.85rem;
  font: 700 0.95rem/1 var(--f-cond);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yellow);
}
.about__body { display: grid; gap: 1em; justify-items: start; max-width: 34rem; }
.about__body p { color: var(--text-muted); }
.about__body p:first-child { font-size: 1.2em; font-weight: 500; line-height: 1.45; color: var(--white); }
.about__body .textlink { margin-top: 0.25rem; }

@media (min-width: 64em) {
  .about__grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--cols-gap); align-items: center; }
  .about__head { grid-column: 1 / span 6; }
  .about__title { font-size: min(5.4vw, 4.75rem); }
  .about__body { grid-column: 8 / span 5; }
}

/* ---------- 13. BEFORE YOU ORDER ---------- */
.info {
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) calc(clamp(2.5rem, 2rem + 2vw, 3.5rem) + clamp(1.5rem, 4vw, 4rem));
  background: var(--charcoal);
}
.info__grid { display: grid; gap: 0.75rem; }
.info__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1;
  text-transform: uppercase;
}
.info__body { max-width: 44rem; color: var(--text-muted); }
.info__body a { color: var(--white); text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
.info__list { display: grid; gap: 0.75rem; margin-top: 1rem; }
.info__list dt { font: 700 0.95rem/1.2 var(--f-cond); letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); }

@media (min-width: 48em) {
  .info__grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--cols-gap); align-items: baseline; }
  .info__title { grid-column: 1 / span 4; }
  .info__body { grid-column: 5 / span 8; }
}
@media (min-width: 64em) {
  .info__body { grid-column: 8 / span 5; }
  .info__title { grid-column: 1 / span 6; }
}

/* ---------- 14. FINALE ---------- */
.finale {
  --tilt: clamp(1.5rem, 4vw, 4rem);
  --fs-finale: clamp(2.25rem, 13vw - 0.33rem, 9.5rem);   /* "NEVER STOPS." (7.54em) fills the column */
  position: relative;
  margin-top: calc(-1 * var(--tilt));
  padding-block: calc(var(--tilt) + clamp(2.5rem, 1.5rem + 4vw, 5.5rem)) clamp(3rem, 2rem + 4vw, 6rem);
  background: var(--red);
  clip-path: polygon(0 var(--tilt), 100% 0, 100% 100%, 0 100%);
}
.finale__inner { position: relative; }
.finale__title {
  display: grid;
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
}
.finale__lead {
  font-size: calc(var(--fs-finale) * var(--lead-ratio, 0.55));
  line-height: 1;
  color: var(--yellow);
}
.finale__main {
  font-size: var(--fs-finale);
  line-height: 0.92;
  color: var(--white);
  text-shadow: 0.04em 0.04em 0 rgba(0, 0, 0, 0.55);
}
.finale__cta { margin-top: clamp(1.75rem, 1.25rem + 2vw, 3rem); }
.finale__cta .btn { width: 100%; }
/* On red, the sweep goes charcoal so it stays visible */
.finale .btn--primary { --btn-fill: var(--charcoal); }

@media (min-width: 30em) {
  .finale__cta .btn { width: auto; }
}
@media (min-width: 64em) {
  .finale { --fs-finale: min(11.9vw, 9.5rem); --lead-ratio: 0.42; }
  /* Lead line and CTA share the top row: lead on the left, CTA on the right,
     bottoms aligned; the main line spans the full width beneath. */
  .finale__lead { display: flex; align-items: flex-end; min-height: 4.5rem; padding-bottom: 0.15em; }
  .finale__cta { position: absolute; top: 0; right: var(--gutter); margin: 0; }
  .finale__cta .btn { height: 4.5rem; padding-block: 0; }   /* exactly the lead row's height */
}

/* ---------- 15. CONTACT ---------- */
.contact {
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  background: var(--charcoal);
}
.contact__grid { display: grid; gap: 1.25rem; }
.contact__body { display: grid; gap: 1rem; justify-items: start; }
.contact__body > p { font-size: 1.15em; color: var(--white); }
.contact__email {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 2.75rem;
  font-weight: 600;
  font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.6rem);
  overflow-wrap: anywhere;
}
.contact__email .i { color: var(--yellow); }
.contact__email::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.2rem;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0.12);
  transform-origin: left center;
  transition: transform var(--t-btn) var(--ease-btn);
}
@media (hover: hover) and (pointer: fine) {
  .contact__email:hover::after { transform: scaleX(1); }
}

.form { display: grid; gap: 1rem; width: 100%; margin-top: 1rem; }
.form__row { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.4rem; }
.field label {
  font: 700 0.85rem/1 var(--f-cond);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field input, .field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.9rem;
  font-size: 1rem;
  background: var(--gunmetal);
  border: 1px solid var(--line);
  border-radius: 0;
  transition: border-color var(--t-fast) ease;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow); }
.form .btn, .news .btn { justify-self: start; }

/* Newsletter (only when configured) */
.news {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid var(--line);
}
.news__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1;
  text-transform: uppercase;
}
.news__text p { margin-top: 0.6rem; color: var(--text-muted); }
.news__fields { display: grid; gap: 1rem; }
.check { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.95rem; color: var(--text-muted); cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--yellow); flex: none; }

@media (min-width: 48em) {
  .form__row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64em) {
  .contact__grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--cols-gap); align-items: start; }
  .contact__title { grid-column: 1 / span 6; font-size: min(5.4vw, 4.75rem); }
  .contact__body { grid-column: 8 / span 5; padding-top: 0.4rem; }
  .news { grid-template-columns: repeat(12, 1fr); column-gap: var(--cols-gap); }
  .news__text { grid-column: 1 / span 6; }
  .news__fields { grid-column: 8 / span 5; }
}

/* ---------- 16. FOOTER ---------- */
.footer {
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) 1.5rem;
  background: var(--charcoal);
  border-top: 1px solid var(--line);
}
.footer__main { display: grid; gap: 1.5rem; justify-items: start; }
.footer__brand { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: clamp(1.25rem, 8.2vw - 0.2rem, 2.25rem); }
.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--text-muted);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.footer__legal a { display: inline-block; padding-block: 0.6rem; }
.footer__legal a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 48em) {
  .footer__main { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
  .footer__brand { font-size: min(4.2vw, 3.25rem); }
}

/* ---------- 17. MOTION ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    transition: opacity var(--t-reveal) var(--ease-out) var(--d, 0s), transform var(--t-reveal) var(--ease-out) var(--d, 0s);
  }
  .js .reveal.is-in, .reveal-all .reveal { opacity: 1; transform: none; }

  /* Hero plays on load: no splash, no waiting */
  .hero__title .line > span { animation: rise 900ms var(--ease-out) both; animation-delay: calc(120ms + var(--i) * 90ms); }
  .hero__copy { animation: fade-up 800ms var(--ease-out) 480ms both; }
  .hero__cta { animation: fade-up 800ms var(--ease-out) 600ms both; }
  .hero__media > img, .hero__media > video { animation: settle 2600ms var(--ease-out) both; }

  @keyframes rise { from { transform: translate3d(0, 105%, 0); } }
  @keyframes fade-up { from { opacity: 0; transform: translate3d(0, 24px, 0); } }
  @keyframes settle { from { transform: scale(1.08); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }
  .marquee__track { transform: none; }
  .btn:hover .btn__icon, .textlink:hover .i, .btn:active { transform: none !important; }
}