/* ==========================================================================
   NEW ENGLAND PERFORMANCE - base.css

   Dark, high-contrast system inherited from the CH0SN palette
   (#0A0A0A / #FFFFFF, sharp edges, wide-tracked uppercase headings),
   retuned for automotive: Syncopate display type, chrome accents that
   echo the NEP logo, and full-bleed motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette - shared with CH0SN */
  --color-bg: #0A0A0A;
  --color-fg: #FFFFFF;
  --color-fg-rgb: 255, 255, 255;
  --color-muted: rgba(var(--color-fg-rgb), 0.55); /* 6.3:1 on bg - AA body */
  /* Used for small tracked labels and form helper text. Kept at 0.48
     (5.0:1) rather than something dimmer: 11px uppercase with wide tracking
     is already hard to read, so it needs real contrast. Hierarchy below
     --color-muted comes from size and letter-spacing, not from fading out. */
  --color-faint: rgba(var(--color-fg-rgb), 0.48);
  /* Purely decorative - marquee text, ornamental rules. Never body copy. */
  --color-ghost: rgba(var(--color-fg-rgb), 0.32);
  --color-line: rgba(var(--color-fg-rgb), 0.14);
  --color-line-strong: rgba(var(--color-fg-rgb), 0.28);
  --color-surface: rgba(var(--color-fg-rgb), 0.05);
  --color-surface-2: rgba(var(--color-fg-rgb), 0.08);
  --color-danger: #FF4D4D;
  --color-success: #4ADE80;

  /* Chrome - mirrors the polished finish of the logo. Display type only. */
  --chrome: linear-gradient(
    180deg,
    #ffffff 0%,
    #d8dde1 34%,
    #8b9399 50%,
    #ffffff 62%,
    #aeb6bc 82%,
    #e9edf0 100%
  );

  /* Type */
  --font-display: 'Syncopate', 'Arial Black', sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --page-width: 144rem;
  --page-gutter: clamp(2rem, 5vw, 6rem);
  --header-height: 7.2rem;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 480ms;

  /* Depth */
  --z-header: 100;
  --z-drawer: 200;
  --z-toast: 300;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The `hidden` attribute is enforced by a low-specificity UA rule, so any
   author rule that sets `display` (.gate { display: grid }, .panel, flex
   rows) silently beats it and the element stays on screen. Make hidden win. */
[hidden] {
  display: none !important;
}

html {
  font-size: 62.5%; /* 1rem = 10px */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Renders native controls (date picker, scrollbars, autofill) dark so they
     don't appear as bright white boxes on the black theme. */
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: 1.6rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

/* Scale height with width so an image is never distorted when only its CSS
   width is set (its width/height attributes otherwise pin the height and
   squish it). Cover images that need a fixed height set one explicitly. */
img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.08;
  letter-spacing: 0.02em;
  margin: 0 0 2.4rem;
}

/* Syncopate is extremely wide - keep display sizes restrained so headings
   don't wrap into unreadable ladders on narrow screens. */
h1 {
  font-size: clamp(2.6rem, 5.2vw, 6.4rem);
}
h2 {
  font-size: clamp(2rem, 3.4vw, 3.8rem);
}
h3 {
  font-size: clamp(1.5rem, 1.8vw, 1.9rem);
}
h4 {
  font-size: 1.4rem;
}

p {
  margin: 0 0 1.8rem;
  max-width: 68ch;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--color-muted);
  margin: 0 0 2rem;
}

.lede {
  font-size: clamp(1.6rem, 1.9vw, 1.9rem);
  color: var(--color-muted);
  line-height: 1.7;
}

.chrome-text {
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Fallback for browsers that ignore background-clip: text */
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

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

.section {
  padding-block: clamp(6.4rem, 10vw, 13rem);
}

.section--tight {
  padding-block: clamp(4.8rem, 6vw, 7.2rem);
}

.section-head {
  max-width: 72rem;
  margin-bottom: clamp(4rem, 6vw, 6.4rem);
}

.divider {
  height: 1px;
  background: var(--color-line);
  border: 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   5. Accessibility helpers
   -------------------------------------------------------------------------- */

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

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 999;
  padding: 1.2rem 2.4rem;
  background: var(--color-fg);
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.skip-link:focus {
  top: 0;
}

:focus-visible {
  outline: 2px solid var(--color-fg);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 5.2rem;
  padding: 0 3.2rem;
  background: var(--color-fg);
  color: var(--color-bg);
  border: 1px solid var(--color-fg);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.btn:hover {
  background: transparent;
  color: var(--color-fg);
}

.btn--outline {
  background: transparent;
  color: var(--color-fg);
  border-color: var(--color-line-strong);
}

.btn--outline:hover {
  background: var(--color-fg);
  color: var(--color-bg);
  border-color: var(--color-fg);
}

.btn--full {
  width: 100%;
}

.btn[disabled],
.btn[disabled]:hover {
  background: transparent;
  border-color: var(--color-line);
  color: var(--color-faint);
  cursor: not-allowed;
}

.btn__spinner {
  width: 1.4rem;
  height: 1.4rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-line-strong);
  transition: border-color var(--dur-base) var(--ease-out),
    gap var(--dur-base) var(--ease-out);
}

.link-arrow:hover {
  border-color: var(--color-fg);
  gap: 1.4rem;
}

.link-arrow svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.header.is-scrolled {
  background: rgba(10, 10, 10, 0.94);
  border-bottom-color: var(--color-line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  min-height: var(--header-height);
}

.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header__logo img {
  height: 4rem;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 3.6rem;
}

.nav__link {
  position: relative;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-muted);
  padding-block: 0.8rem;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.nav__link:hover,
.nav__link[aria-current='page'] {
  color: var(--color-fg);
}

.nav__link:hover::after,
.nav__link[aria-current='page']::after {
  transform: scaleX(1);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  color: var(--color-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.icon-btn:hover {
  color: var(--color-fg);
}

.icon-btn svg {
  width: 2rem;
  height: 2rem;
}

.nav-toggle {
  display: none;
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--color-bg);
  padding: var(--page-gutter);
  padding-top: calc(var(--header-height) + 2rem);
  transform: translateY(-100%);
  visibility: hidden;
  /* Only transform animates. Visibility flips instantly on open and is
     delayed on close, so the panel is focusable the moment .is-open lands
     rather than one frame later. */
  transition: transform var(--dur-slow) var(--ease-out),
    visibility 0s linear var(--dur-slow);
}

.drawer.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease-out),
    visibility 0s linear 0s;
}

.drawer__close {
  position: absolute;
  top: 1.4rem;
  right: calc(var(--page-gutter) - 1.2rem);
  width: 4.4rem;
  height: 4.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.drawer__close svg {
  width: 2.2rem;
  height: 2.2rem;
}

.drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 2rem;
}

.drawer__link {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 7vw, 3.2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--color-line);
}

.drawer__socials {
  display: flex;
  gap: 1.2rem;
  margin-top: 3.2rem;
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: calc(100dvh - var(--header-height));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Two-stop scrim: darkens the bottom for text, keeps the middle readable.
   Without this the white type sits on sunlit asphalt and fails contrast. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      to bottom,
      rgba(10, 10, 10, 0.72) 0%,
      rgba(10, 10, 10, 0.28) 32%,
      rgba(10, 10, 10, 0.82) 78%,
      var(--color-bg) 100%
    );
}

.hero__inner {
  width: 100%;
  padding-block: clamp(4.8rem, 9vw, 9.6rem);
}

.hero__logo {
  width: clamp(22rem, 38vw, 42rem);
  margin-bottom: clamp(2.4rem, 4vw, 4rem);
  /* A dark halo lifts the chrome mark off bright, busy footage. A white glow
     (the old value) disappears against a sunlit car. */
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 26px rgba(0, 0, 0, 0.45));
}

.hero h1 {
  max-width: 20ch;
}

.hero__lede {
  max-width: 52ch;
  font-size: clamp(1.6rem, 1.8vw, 1.9rem);
  color: rgba(var(--color-fg-rgb), 0.78);
  margin-bottom: 3.6rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}

/* Pause/play control - WCAG 2.2.2 requires a way to stop looping motion. */
.hero__media-toggle {
  position: absolute;
  right: var(--page-gutter);
  bottom: var(--page-gutter);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.4rem;
  padding: 0 1.8rem;
  border: 1px solid var(--color-line-strong);
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-muted);
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.hero__media-toggle:hover {
  color: var(--color-fg);
  border-color: var(--color-fg);
}

.hero__media-toggle svg {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   9. Marquee
   -------------------------------------------------------------------------- */

.marquee {
  border-block: 1px solid var(--color-line);
  padding-block: 2rem;
  overflow: hidden;
  white-space: nowrap;
}

.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 4rem;
  padding-right: 4rem;
  animation: marquee 42s linear infinite;
  will-change: transform;
}

.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ghost);
}

.marquee__dot {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-line-strong);
  border-radius: 50%;
  flex-shrink: 0;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   10. Stat / feature rows
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  border-top: 1px solid var(--color-line);
}

.stat {
  padding: clamp(3.2rem, 4vw, 4.8rem) 0;
  padding-right: 2.4rem;
  border-bottom: 1px solid var(--color-line);
}

.stat__label {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--color-faint);
  margin-bottom: 1.6rem;
}

.stat h3 {
  margin-bottom: 1.2rem;
}

.stat p {
  font-size: 1.5rem;
  color: var(--color-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   11. Video gallery
   -------------------------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Transparent gaps: any trailing empty cell (when the clip count doesn't
     fill the last row) stays invisible instead of showing a grey box. */
  gap: 0.4rem;
}

.clip {
  position: relative;
  background: var(--color-bg);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
}

/* All clips are equal tiles - a uniform grid tiles cleanly with no holes. */

.clip video,
.clip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}

.clip:hover video,
.clip:hover img,
.clip:focus-visible video,
.clip:focus-visible img {
  transform: scale(1.04);
}

.clip__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.8rem, 2.4vw, 2.8rem);
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.9) 0%,
    rgba(10, 10, 10, 0.25) 45%,
    rgba(10, 10, 10, 0) 75%
  );
}

.clip__caption {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.4vw, 1.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.clip__meta {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-muted);
  margin-top: 0.8rem;
}

.clip__play {
  position: absolute;
  top: clamp(1.8rem, 2.4vw, 2.8rem);
  right: clamp(1.8rem, 2.4vw, 2.8rem);
  width: 4.4rem;
  height: 4.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--color-fg-rgb), 0.4);
  background: rgba(10, 10, 10, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.clip:hover .clip__play {
  background: var(--color-fg);
  border-color: var(--color-fg);
  color: var(--color-bg);
}

.clip__play svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* --------------------------------------------------------------------------
   12. Lightbox
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--page-gutter);
  background: rgba(6, 6, 6, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-base);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear 0s;
}

.lightbox__video {
  width: min(100%, 128rem);
  max-height: 82dvh;
  background: #000;
}

.lightbox__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 4.8rem;
  height: 4.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line-strong);
}

.lightbox__close svg {
  width: 2rem;
  height: 2rem;
}

/* --------------------------------------------------------------------------
   13. Meet cards
   -------------------------------------------------------------------------- */

.meets {
  display: grid;
  gap: 1px;
  background: var(--color-line);
  border-block: 1px solid var(--color-line);
}

.meet {
  display: grid;
  grid-template-columns: 14rem 1fr auto;
  align-items: center;
  gap: clamp(2rem, 4vw, 4.8rem);
  padding: clamp(2.8rem, 3.5vw, 4rem) 0;
  background: var(--color-bg);
  transition: background var(--dur-base) var(--ease-out);
}

.meet:hover {
  background: var(--color-surface);
}

.meet__date {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}

.meet__month {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  letter-spacing: 0.28em;
  color: var(--color-muted);
  margin-bottom: 0.8rem;
}

.meet__day {
  font-size: clamp(3.2rem, 4vw, 4.4rem);
}

.meet__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2vw, 2.2rem);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.meet__detail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2.4rem;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted);
}

.meet__detail span {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.meet__detail svg {
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
  color: var(--color-faint);
}

.tag {
  display: inline-flex;
  align-items: center;
  height: 2.6rem;
  padding: 0 1rem;
  border: 1px solid var(--color-line-strong);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-muted);
}

.tag--live {
  border-color: rgba(74, 222, 128, 0.5);
  color: var(--color-success);
}

/* --------------------------------------------------------------------------
   14. Catalog
   -------------------------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: clamp(3.2rem, 5vw, 5.6rem);
}

.filter {
  min-height: 4.4rem;
  padding: 0 2rem;
  border: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-muted);
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.filter:hover {
  color: var(--color-fg);
  border-color: var(--color-line-strong);
}

.filter[aria-pressed='true'] {
  background: var(--color-fg);
  border-color: var(--color-fg);
  color: var(--color-bg);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
  gap: clamp(2.4rem, 3vw, 4rem) clamp(2rem, 2.5vw, 3.2rem);
}

.product {
  display: flex;
  flex-direction: column;
}

.product__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  overflow: hidden;
  margin-bottom: 2rem;
}

.product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.product:hover .product__media img {
  transform: scale(1.05);
}

/* Placeholder shown until real product photography exists. */
.product__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  padding: 2.4rem;
  text-align: center;
}

.product__placeholder img {
  width: 58%;
  max-width: 18rem;
  opacity: 0.5;
  object-fit: contain;
}

.product__placeholder span {
  font-family: var(--font-mono);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--color-faint);
}

.product__badge {
  position: absolute;
  top: 1.4rem;
  left: 1.4rem;
  z-index: 1;
  background: var(--color-fg);
  color: var(--color-bg);
  padding: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.product__badge--soldout {
  background: var(--color-surface-2);
  color: var(--color-muted);
  border: 1px solid var(--color-line);
}

.product__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.6rem;
  margin-bottom: 0.6rem;
}

.product__name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
}

.product__price {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.product__desc {
  font-size: 1.4rem;
  color: var(--color-muted);
  margin: 0 0 1.8rem;
  flex-grow: 1;
}

.sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1.8rem;
}

.size {
  min-width: 4.4rem;
  height: 4.4rem;
  padding-inline: 1rem;
  border: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-muted);
  transition: all var(--dur-fast) var(--ease-out);
}

.size:hover:not([disabled]) {
  border-color: var(--color-line-strong);
  color: var(--color-fg);
}

.size[aria-pressed='true'] {
  background: var(--color-fg);
  border-color: var(--color-fg);
  color: var(--color-bg);
}

.size[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
  text-decoration: line-through;
}

.product__note {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-faint);
  margin-top: 1.2rem;
}

.product__note--error {
  color: var(--color-danger);
}

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */

.form {
  max-width: 68rem;
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: 2.4rem;
}

.field {
  margin-bottom: 2.4rem;
  min-width: 0;
}

.field--full {
  grid-column: 1 / -1;
}

.field label,
.fieldset__legend {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-muted);
  margin-bottom: 1rem;
}

.field .req {
  color: var(--color-fg);
}

.field__help {
  font-size: 1.3rem;
  color: var(--color-faint);
  margin: 0.8rem 0 0;
}

.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field input[type='url'],
.field input[type='password'],
.field input[type='date'],
.field input[type='number'],
.field input[type='search'],
.field textarea,
.field select {
  width: 100%;
  min-height: 5.2rem;
  padding: 1.4rem 1.6rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 0;
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: 1.6rem; /* 16px stops iOS from zooming on focus */
  appearance: none;
  transition: border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.field textarea {
  min-height: 13rem;
  resize: vertical;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.6rem center;
  background-size: 1.6rem;
  padding-right: 4.8rem;
  cursor: pointer;
}

.field select option {
  background: #141414;
  color: var(--color-fg);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-fg);
  background: var(--color-surface-2);
}

.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'],
.field select[aria-invalid='true'] {
  border-color: var(--color-danger);
}

.field__error {
  display: none;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  color: var(--color-danger);
  margin-top: 0.9rem;
}

.field__error.is-visible {
  display: flex;
}

.field__error svg {
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
}

.fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 2.4rem;
  min-width: 0;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  padding: 1.8rem;
  border: 1px solid var(--color-line);
  margin-bottom: 1rem;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.choice:hover {
  border-color: var(--color-line-strong);
  background: var(--color-surface);
}

.choice:has(input:checked) {
  border-color: var(--color-fg);
  background: var(--color-surface-2);
}

.choice input {
  width: 2rem;
  height: 2rem;
  margin: 0.2rem 0 0;
  accent-color: #ffffff;
  flex-shrink: 0;
  cursor: pointer;
}

.choice__body {
  min-width: 0;
}

.choice__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.choice__meta {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  color: var(--color-muted);
  letter-spacing: 0.06em;
}

.form__status {
  display: none;
  gap: 1.2rem;
  padding: 1.8rem;
  border: 1px solid var(--color-line);
  margin-bottom: 2.4rem;
  font-size: 1.5rem;
}

.form__status.is-visible {
  display: flex;
}

.form__status--error {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.form__status--success {
  border-color: rgba(74, 222, 128, 0.5);
  color: var(--color-success);
}

.form__status svg {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

/* Success panel replaces the form after submit. */
.form-success {
  display: none;
  border: 1px solid rgba(74, 222, 128, 0.4);
  padding: clamp(3.2rem, 5vw, 5.6rem);
}

.form-success.is-visible {
  display: block;
}

.form-success__icon {
  width: 5.6rem;
  height: 5.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(74, 222, 128, 0.5);
  color: var(--color-success);
  margin-bottom: 2.4rem;
}

.form-success__icon svg {
  width: 2.6rem;
  height: 2.6rem;
}

/* --------------------------------------------------------------------------
   16. Rules / list blocks
   -------------------------------------------------------------------------- */

.rules {
  display: grid;
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
}

.rule {
  display: flex;
  gap: 2rem;
  padding: clamp(2rem, 2.6vw, 2.8rem);
  background: var(--color-bg);
}

.rule__num {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-faint);
  flex-shrink: 0;
  padding-top: 0.4rem;
}

.rule h4 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 0 0 0.8rem;
}

.rule p {
  font-size: 1.45rem;
  color: var(--color-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   17. CTA band
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.cta__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.cta__media video,
.cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 10, 10, 0.78);
}

.cta h2 {
  max-width: 22ch;
  margin-inline: auto;
}

.cta p {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--color-line);
  padding-block: clamp(4.8rem, 7vw, 8rem) 3.2rem;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(3.2rem, 5vw, 6.4rem);
  margin-bottom: clamp(4rem, 6vw, 6.4rem);
}

.footer__logo {
  width: 18rem;
  margin-bottom: 2.4rem;
}

.footer__tagline {
  font-size: 1.45rem;
  color: var(--color-muted);
  max-width: 34ch;
}

.footer__heading {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--color-faint);
  margin-bottom: 2rem;
}

.footer__list li {
  margin-bottom: 1.2rem;
}

.footer__list a {
  font-size: 1.45rem;
  color: var(--color-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer__list a:hover {
  color: var(--color-fg);
}

.socials {
  display: flex;
  gap: 1rem;
}

.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  border: 1px solid var(--color-line);
  color: var(--color-muted);
  transition: all var(--dur-fast) var(--ease-out);
}

.social:hover {
  background: var(--color-fg);
  border-color: var(--color-fg);
  color: var(--color-bg);
}

.social svg {
  width: 2rem;
  height: 2rem;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding-top: 3.2rem;
  border-top: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-faint);
}

.footer__credit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 4.4rem; /* comfortable tap target on mobile */
  color: var(--color-muted);
  touch-action: manipulation;
  transition: color var(--dur-fast) var(--ease-out);
}

.footer__credit strong {
  font-weight: 700;
  color: var(--color-fg);
}

.footer__credit:hover {
  color: var(--color-fg);
}

/* --------------------------------------------------------------------------
   19. Page header (interior pages)
   -------------------------------------------------------------------------- */

.page-head {
  padding-block: clamp(6.4rem, 10vw, 11rem) clamp(3.2rem, 5vw, 5.6rem);
  border-bottom: 1px solid var(--color-line);
}

.page-head h1 {
  margin-bottom: 2rem;
}

.page-head .lede {
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   20. Scroll reveal
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   21. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .nav,
  .header__actions .socials {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .meet {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .meet__date {
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
  }

  .meet__month {
    margin-bottom: 0;
  }

  .meet__day {
    font-size: 2.8rem;
  }

  .meet .btn {
    justify-self: start;
  }

  .hero__media-toggle {
    bottom: auto;
    top: 2rem;
    right: 2rem;
  }
}

@media (max-width: 560px) {
  .footer__top {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding-top: 12vh;
  }

  /* Smaller mark so it reads as a designed hero element, not a sticker
     dropped over the middle of the video. */
  .hero__logo {
    width: min(46vw, 17rem);
    margin-bottom: 1.6rem;
  }

  /* Deepen the scrim through the zone where the logo now sits, so it has an
     even dark backing instead of floating over the brightest frame. Keeps the
     top lighter so the footage still reads. */
  .hero__scrim {
    background: linear-gradient(
      to bottom,
      rgba(10, 10, 10, 0.5) 0%,
      rgba(10, 10, 10, 0.4) 26%,
      rgba(10, 10, 10, 0.72) 56%,
      rgba(10, 10, 10, 0.9) 80%,
      var(--color-bg) 100%
    );
  }

  .hero__actions .btn {
    width: 100%;
  }

  .gallery {
    grid-template-columns: 1fr;
  }

  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  }
}

/* --------------------------------------------------------------------------
   22. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .marquee__track {
    animation: none;
    transform: none;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   23. Print
   -------------------------------------------------------------------------- */

@media print {
  .header,
  .footer,
  .hero__media,
  .marquee,
  .cta__media {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}