/* ==========================================================================
   Venom Racing — Component Styles
   Buttons, cards, forms, navigation, footer, hero, process steps, FAQ
   accordion, reviews carousel, and stat counters for the dark
   performance theme.
   ========================================================================== */

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-xl);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  overflow: hidden;
  transition: background-color var(--transition-base), color var(--transition-base),
    border-color var(--transition-base), transform var(--transition-fast),
    box-shadow var(--transition-base);
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background-color: var(--color-red);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-red-bright);
  box-shadow: var(--shadow-glow-md);
}

.btn-secondary {
  background-color: var(--color-surface);
  color: var(--color-white);
  border-color: var(--color-border);
}

.btn-secondary:hover {
  background-color: var(--color-surface-light);
  border-color: var(--color-red);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--color-red);
  color: var(--color-white);
}

.btn-outline:hover {
  background-color: var(--color-red);
  box-shadow: var(--shadow-glow-md);
}

.btn-block {
  width: 100%;
}

/* Button ripple */
.btn[data-ripple] {
  isolation: isolate;
}

.btn__ripple {
  position: absolute;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: rippleEffect 600ms ease-out;
  pointer-events: none;
  z-index: 0;
}

@keyframes rippleEffect {
  to {
    transform: scale(3);
    opacity: 0;
  }
}

/* ---------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------- */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-red-dark);
}

.card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card__body {
  padding: var(--space-lg);
}

.card__title {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-xs);
}

.card__meta {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-sm);
}

/* Service card */
.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-red);
  box-shadow: var(--shadow-glow-sm);
}

.service-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: var(--color-graphite-light);
  color: var(--color-red-bright);
}

.service-card__icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
}

.service-card__title {
  font-size: var(--fs-lg);
}

/* Glass card — floating info cards over imagery */
.glass-card {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
}

/* Floating accent badge overlapping the bottom-left corner of an image.
   The overlap offset is reduced on mobile (see responsive.css) so it
   never clips past the viewport edge when container padding is small. */
.floating-badge {
  position: absolute;
  bottom: -16px;
  left: 0;
  max-width: 220px;
}

/* Feature card — "Why Choose Venom Racing" */
.feature-card {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow-sm);
}

.feature-card__icon {
  width: 48px;
  height: 48px;
  margin-inline: auto;
  margin-bottom: var(--space-md);
  color: var(--color-red-bright);
}

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.form-label {
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-carbon-alt);
  color: var(--color-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-gray-600);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-red);
  box-shadow: 0 0 0 3px var(--color-red-glow);
  outline: none;
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-error {
  color: var(--color-error);
  font-size: var(--fs-xs);
}

.form-success {
  color: var(--color-success);
  font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  display: flex;
  align-items: center;
  background-color: rgba(10, 10, 11, 0.75);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}

.navbar--scrolled {
  border-bottom-color: var(--color-border);
  background-color: rgba(10, 10, 11, 0.92);
}

.navbar__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-white);
}

.navbar__logo img {
  height: 30px;
  width: auto;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.navbar__link {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-gray-300);
  position: relative;
  transition: color var(--transition-fast);
}

.navbar__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background-color: var(--color-red-bright);
  transition: width var(--transition-base);
}

.navbar__link:hover {
  color: var(--color-white);
}

.navbar__link:hover::after,
.navbar__link.is-active::after {
  width: 100%;
}

.navbar__link.is-active {
  color: var(--color-white);
}

.navbar__cta {
  padding: var(--space-xs) var(--space-lg);
}

.navbar__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
}

.navbar__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-white);
  border-radius: var(--radius-full);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* Hamburger → X, driven directly by the aria-expanded state that
   navigation.js already sets — no extra JS class needed. */
.navbar__toggle[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.navbar__toggle[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.navbar__toggle[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.footer {
  background-color: var(--color-carbon-alt);
  border-top: 1px solid var(--color-border);
  color: var(--color-gray-400);
  padding-block: var(--space-3xl) var(--space-xl);
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.footer__heading {
  color: var(--color-white);
  font-size: var(--fs-md);
  margin-bottom: var(--space-md);
}

.footer__link {
  display: block;
  padding-block: var(--space-2xs);
  color: var(--color-gray-400);
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: var(--color-red-bright);
}

.footer__social {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.footer__social a {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  color: var(--color-gray-300);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.footer__social a:hover {
  background-color: var(--color-red);
  color: var(--color-white);
}

.footer__bottom {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-gray-500);
}

/* =====================================================================
   HERO (v2) — one cinematic composition. A single lede over the
   workshop video: massive headline, description, badges, CTAs.
   Restrained, spacious, refined.
   ===================================================================== */
.hero {
  position: relative;
  background-color: var(--color-carbon);
  overflow: hidden;
}

/* --- Background: video + cinematic overlay + particles --- */
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.hero__media {
  position: absolute;
  inset: -4%;                       /* bleed so parallax never shows edges */
  z-index: 0;
  will-change: transform;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(179, 18, 31, 0.14), transparent 60%),
    linear-gradient(160deg, var(--color-graphite) 0%, var(--color-carbon) 70%);
}
.hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero--video-fallback .hero__video { display: none; }

/* Cinematic layer: red ambient + left scrim + top/bottom + vignette */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(80% 55% at 78% 18%, rgba(224, 30, 46, 0.16), transparent 60%),
    linear-gradient(90deg, rgba(10, 10, 11, 0.92) 0%, rgba(10, 10, 11, 0.68) 42%, rgba(10, 10, 11, 0.34) 72%, rgba(10, 10, 11, 0.52) 100%),
    linear-gradient(0deg, rgba(10, 10, 11, 0.90) 0%, transparent 34%, transparent 66%, rgba(10, 10, 11, 0.55) 100%),
    radial-gradient(120% 120% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}
.hero__overlay::before {                 /* subtle carbon weave */
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 6px);
}
.hero__particles { z-index: 1; }

/* --- Inner layout: single lede, vertically centred, breathing --- */
.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding-block: calc(var(--header-height) + var(--space-2xl)) calc(var(--space-2xl) + env(safe-area-inset-bottom, 0px));
}
.hero__lede { max-width: 760px; }

/* --- Headline --- */
.hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(3.5rem, 11vw, 8rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0 0 var(--space-lg);
}
.hero__line {
  display: block;
  animation: heroLineIn 820ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i) * 130ms + 120ms);
}
.hero__line--accent {
  color: var(--color-red-bright);
  text-shadow: 0 0 40px var(--color-red-glow);
}

.hero__text {
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.6;
  color: var(--color-gray-300);
  max-width: 520px;
  margin: 0 0 var(--space-xl);
  animation: heroFadeUp 820ms ease both;
  animation-delay: 560ms;
}

/* --- Badges --- */
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  animation: heroFadeUp 820ms ease both;
  animation-delay: 680ms;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-glow);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-white);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.hero__badge svg { width: 18px; height: 18px; color: var(--color-red-bright); }
@media (hover: hover) and (pointer: fine) {
  .hero__badge:hover {
    transform: translateY(-2px);
    border-color: rgba(224, 30, 46, 0.5);
    box-shadow: var(--glass-glow-hover);
  }
}

/* --- Actions --- */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  animation: heroFadeUp 820ms ease both;
  animation-delay: 800ms;
}
.hero__actions .btn {
  min-height: 56px;
  padding-inline: var(--space-xl);
  border-radius: var(--radius-md);
}
.hero__cta {
  background-color: var(--color-red);
  background-image: linear-gradient(135deg, var(--color-red-bright) 0%, var(--color-red-dark) 100%);
  box-shadow: 0 10px 30px rgba(179, 18, 31, 0.35);
}
.hero__cta svg { width: 18px; height: 18px; transition: transform var(--transition-base); }
@media (hover: hover) and (pointer: fine) {
  .hero__actions .btn:hover { transform: translateY(-2px); }
  .hero__cta:hover svg { transform: translateX(4px); }
}

@keyframes heroLineIn {
  from { opacity: 0; transform: translateY(15px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------- */
.section-heading {
  max-width: 640px;
  margin-bottom: var(--space-2xl);
}

.section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.grid--services {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid--features {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Two-column text+media split sections (About/Services/Builds/Contact
   intros). Single column on mobile; see responsive.css for the
   tablet-and-up column ratios. */
.split-grid,
.split-grid--wide-left {
  grid-template-columns: 1fr;
}

/* Sections whose media precedes the text in the DOM (so the media sits on
   the LEFT on desktop). When the grid stacks to one column on mobile, push
   the media below the text so every section reads label → heading → text →
   media. Desktop/tablet (>= 600px) two-column layout is untouched. */
@media (max-width: 599.98px) {
  .split-grid > .media-order-last {
    order: 2;
  }
}

.split-grid--stats {
  grid-template-columns: repeat(2, 1fr);
}

/* ---------------------------------------------------------------------
   Stat counters
   --------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-xl);
  text-align: center;
}

.stat__number {
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  color: var(--color-red-bright);
  line-height: 1;
}

.stat__label {
  margin-top: var(--space-xs);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-gray-400);
}

/* ---------------------------------------------------------------------
   Process steps
   --------------------------------------------------------------------- */
.process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-lg);
  counter-reset: step;
}

.process__step {
  position: relative;
  padding: var(--space-lg);
  text-align: center;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

.process__step::before {
  counter-increment: step;
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-inline: auto;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-full);
  background-color: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
}

/* ---------------------------------------------------------------------
   FAQ accordion
   --------------------------------------------------------------------- */
.accordion {
  border-top: 1px solid var(--color-border);
}

.accordion__item {
  border-bottom: 1px solid var(--color-border);
}

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--color-white);
}

.accordion__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
}

.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-red-bright);
  transform: translate(-50%, -50%);
  transition: transform var(--transition-base);
}

.accordion__icon::before {
  width: 16px;
  height: 2px;
}

.accordion__icon::after {
  width: 2px;
  height: 16px;
}

.accordion__item.is-open .accordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-slow);
}

.accordion__item.is-open .accordion__panel {
  grid-template-rows: 1fr;
}

.accordion__panel-inner {
  overflow: hidden;
}

.accordion__panel-content {
  padding-bottom: var(--space-lg);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------
   Photo placeholder
   Branded stand-in for real photography that hasn't been supplied yet.
   Drop-in replacement for an <img> — set the same aspect-ratio the real
   photo will use so layout doesn't shift once it's swapped in.
   --------------------------------------------------------------------- */
.photo-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-xl);
  text-align: center;
  border-radius: var(--radius-lg);
  background-color: var(--glass-bg);
  border: 2px dashed var(--color-red-dark);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

@media (hover: hover) {
  .photo-placeholder:hover {
    border-color: var(--color-red);
    box-shadow: var(--shadow-glow-sm);
  }
}

.photo-placeholder__icon {
  width: 40px;
  height: 40px;
  color: var(--color-red-bright);
  opacity: 0.85;
}

.photo-placeholder__title {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-gray-300);
}

.photo-placeholder__subtitle {
  max-width: 280px;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-gray-500);
}

/* Compact variant for smaller card slots (gallery grid, build cards). */
.photo-placeholder--compact {
  padding: var(--space-lg);
}

.photo-placeholder--compact .photo-placeholder__icon {
  width: 28px;
  height: 28px;
}

.photo-placeholder--compact .photo-placeholder__title {
  font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------------
   Premium card glow (unified)
   Standardises depth + hover across every non-hero card family so they
   read as one cohesive, high-end component set — the composited
   --glass-glow (1px red ring + deep shadow + soft glow) intensifies on
   hover with a consistent lift. Applied after the individual card rules
   so it governs the final shadow/hover for all of them. (.glass-card is
   intentionally excluded: it's used inside the hero, left untouched.)
   --------------------------------------------------------------------- */
.card,
.service-card,
.feature-card,
.process__step {
  box-shadow: var(--glass-glow);
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.card:hover,
.service-card:hover,
.feature-card:hover,
.process__step:hover {
  transform: translateY(-6px);
  box-shadow: var(--glass-glow-hover);
  border-color: rgba(224, 30, 46, 0.40);
}

/* ---------------------------------------------------------------------
   About — image showcase carousel
   One slide at a time (sliding track); premium glass frame + red glow.
   Behaviour in assets/js/showcase.js. Each slide falls back to a
   carbon-textured label (data-label) if its image is missing.
   --------------------------------------------------------------------- */
.about-media {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.showcase {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-glow);
  background-color: var(--color-graphite);
}

.showcase__track {
  display: flex;
  height: 100%;
  transition: transform var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  touch-action: pan-y;
}

.showcase__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.showcase__slide::before {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-gray-500);
}

.showcase__slide img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase__caption {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-2xl) var(--space-md) var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-white);
  background: linear-gradient(0deg, rgba(10, 10, 11, 0.85), transparent);
}

.showcase__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: rgba(10, 10, 11, 0.5);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--color-white);
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.showcase__arrow svg {
  width: 20px;
  height: 20px;
}

.showcase__arrow:hover {
  background-color: var(--color-red);
  border-color: var(--color-red);
  box-shadow: var(--shadow-glow-sm);
}

.showcase__arrow--prev {
  left: var(--space-sm);
}

.showcase__arrow--next {
  right: var(--space-sm);
}

.showcase__dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: var(--space-sm);
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-xs);
}

.showcase__dots button {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.45);
  transition: width var(--transition-base), background-color var(--transition-base),
    box-shadow var(--transition-base);
}

.showcase__dots button.is-active {
  width: 22px;
  background-color: var(--color-red-bright);
  box-shadow: var(--shadow-glow-sm);
}

/* ---------------------------------------------------------------------
   About — premium RMI accreditation badge
   The RMI logo sits on an intentional white "plaque" inside a glass +
   carbon-textured card with a red accent edge, so it reads as a
   certification seal rather than a pasted-on image.
   --------------------------------------------------------------------- */
.rmi-badge {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--glass-glow);
}

.rmi-badge::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--color-red-bright), var(--color-red-dark));
  box-shadow: var(--shadow-glow-sm);
}

.rmi-badge__plate {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.rmi-badge__plate img {
  height: 34px;
  width: auto;
  display: block;
}

.rmi-badge__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rmi-badge__text strong {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-white);
}

.rmi-badge__text span {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------
   About — "Technology We Use" chip strip
   --------------------------------------------------------------------- */
.tech-strip {
  margin-bottom: var(--space-3xl);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
}

.tech-strip__label {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-red-bright);
}

.tech-strip__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.tech-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-white);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.tech-chip:hover {
  border-color: var(--color-red);
  box-shadow: var(--shadow-glow-sm);
}

.tech-chip svg {
  width: 18px;
  height: 18px;
  color: var(--color-red-bright);
}

/* ---------------------------------------------------------------------
   Reviews — trust bar, review cards, centre-peek carousel, grid
   Rendered from assets/js/reviews.js (single source of truth).
   --------------------------------------------------------------------- */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-gray-300);
}

.trust-item svg {
  width: 18px;
  height: 18px;
  color: var(--color-red-bright);
}

/* Review card (shared by carousel + grid) */
.rc-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 28px 28px 24px;
  border-radius: var(--radius-lg);
  background-color: var(--glass-bg);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 7px);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-glow);
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.rc-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.rc-card__stars {
  color: var(--color-red-bright);
  letter-spacing: 2px;
  font-size: var(--fs-md);
}

.rc-card__google {
  flex-shrink: 0;
}

.rc-card__text {
  margin: 0;
  color: var(--color-off-white);
  font-size: var(--fs-md);
  line-height: 1.6;
}

/* "Read Full Review" link — revealed only on clamped homepage cards */
.rc-card__more {
  display: none;
  align-items: center;
  gap: 4px;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-red-bright);
  transition: gap var(--transition-base);
}
.rc-card__more:hover { gap: 8px; }

.rc-card__foot {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.rc-card__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  background: linear-gradient(150deg, var(--color-red), var(--color-red-dark));
  box-shadow: var(--shadow-glow-sm);
}

.rc-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rc-card__name {
  color: var(--color-white);
  font-size: var(--fs-base);
}

.rc-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-success);
}

.rc-card__badge svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

@media (hover: hover) {
  .rc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--glass-glow-hover);
    border-color: rgba(224, 30, 46, 0.4);
  }
}

/* --- Carousel (homepage) --- */
.rc {
  position: relative;
}

.rc__viewport {
  --rc-card-w: min(560px, 88vw);
  display: flex;
  align-items: start;               /* cards size to their own content, not the tallest */
  gap: var(--space-sm);             /* tighter spacing → next card previews on mobile */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-block: var(--space-lg);
  padding-inline: max(var(--space-sm), calc((100% - var(--rc-card-w)) / 2));
  cursor: grab;
}

/* Consistent minimum height + cap long reviews at ~7 lines on the homepage */
.rc__viewport > .rc-card {
  min-height: 180px;
}
.rc__viewport .rc-card__text {
  max-height: calc(1.6em * 7);
  overflow: hidden;
}
.rc__viewport .rc-card--clamped .rc-card__text {
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}
.rc__viewport .rc-card--clamped .rc-card__more {
  display: inline-flex;
}

.rc__viewport::-webkit-scrollbar {
  display: none;
}

.rc__viewport.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.rc__viewport > .rc-card {
  flex: 0 0 var(--rc-card-w);
  scroll-snap-align: center;
  opacity: 0.5;
  transform: scale(0.92);
  transition: opacity var(--transition-slow) ease, transform var(--transition-slow) ease,
    box-shadow var(--transition-base), border-color var(--transition-base);
}

.rc__viewport > .rc-card.is-active {
  opacity: 1;
  transform: scale(1);
  box-shadow: var(--glass-glow-hover);
  border-color: rgba(224, 30, 46, 0.5);
}

.rc__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: rgba(10, 10, 11, 0.6);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--color-white);
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.rc__arrow:hover {
  background-color: var(--color-red);
  border-color: var(--color-red);
  box-shadow: var(--shadow-glow-sm);
}

.rc__arrow svg {
  width: 20px;
  height: 20px;
}

.rc__arrow--prev {
  left: var(--space-xs);
}

.rc__arrow--next {
  right: var(--space-xs);
}

.rc__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

.rc__dots button {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.35);
  transition: width var(--transition-base), background-color var(--transition-base),
    box-shadow var(--transition-base);
}

.rc__dots button.is-active {
  width: 22px;
  background-color: var(--color-red-bright);
  box-shadow: var(--shadow-glow-sm);
}

/* Below tablet: rely on swipe, hide arrows for a cleaner mobile view */
@media (max-width: 767px) {
  .rc__arrow {
    display: none;
  }
}

/* --- Reviews page: search + masonry grid --- */
.reviews-toolbar {
  max-width: 520px;
  margin: 0 auto var(--space-2xl);
}

.reviews-grid {
  columns: 1;
  column-gap: var(--space-lg);
}

.reviews-grid > .rc-card {
  break-inside: avoid;
  margin-bottom: var(--space-lg);
}

@media (min-width: 600px) {
  .reviews-grid {
    columns: 2;
  }
}

@media (min-width: 992px) {
  .reviews-grid {
    columns: 3;
  }
}

/* ---------------------------------------------------------------------
   Performance Stages (homepage)
   Left interactive timeline + right crossfading content panel. Driven by
   assets/js/stages.js (click + keyboard + scroll-progressive). Mobile:
   the timeline becomes a horizontal swipe row, panel stacks below.
   --------------------------------------------------------------------- */
.stages {
  position: relative;
  overflow: hidden;
}

.stages .container {
  position: relative;
  z-index: 2;
}

.stages__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

@media (min-width: 992px) {
  .stages__layout {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-2xl);
  }
}

/* --- Timeline --- */
.stages__timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@media (min-width: 992px) {
  .stages__timeline::before {
    content: '';
    position: absolute;
    left: 38px;
    top: 44px;
    bottom: 44px;
    width: 2px;
    background-color: var(--color-graphite-light);
    z-index: 0;
  }
}

.stage-tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  text-align: left;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base), background-color var(--transition-base);
}

@media (hover: hover) {
  .stage-tab:hover {
    transform: translateY(-2px);
    border-color: rgba(224, 30, 46, 0.4);
    box-shadow: var(--shadow-glow-sm);
  }
}

.stage-tab.is-active {
  border-color: var(--color-red);
  box-shadow: var(--glass-glow-hover);
  background-color: rgba(224, 30, 46, 0.06);
}

.stage-tab__num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--color-gray-400);
  background-color: var(--color-graphite-light);
  transition: color var(--transition-base), background-color var(--transition-base),
    box-shadow var(--transition-base);
}

.stage-tab.is-active .stage-tab__num {
  color: var(--color-white);
  background: linear-gradient(150deg, var(--color-red), var(--color-red-dark));
  box-shadow: var(--shadow-glow-sm);
  animation: stagePulse 2.4s ease-in-out infinite;
}

@keyframes stagePulse {
  0%, 100% { box-shadow: var(--shadow-glow-sm); }
  50% { box-shadow: var(--shadow-glow-md); }
}

.stage-tab__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.stage-tab__name {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.stage-tab__sub {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.stage-tab__icon {
  flex-shrink: 0;
  color: var(--color-red-bright);
  opacity: 0.55;
  transition: opacity var(--transition-base);
}

.stage-tab__icon svg {
  width: 22px;
  height: 22px;
}

.stage-tab.is-active .stage-tab__icon {
  opacity: 1;
}

@media (max-width: 991px) {
  .stages__timeline {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-xs);
  }
  .stages__timeline::-webkit-scrollbar {
    display: none;
  }
  .stage-tab {
    flex: 0 0 auto;
    min-width: 230px;
    scroll-snap-align: center;
  }
}

/* --- Content panel (crossfade, grid-stacked) --- */
.stages__panel {
  position: relative;
  display: grid;
}

.stage-content {
  grid-area: 1 / 1;
  position: relative;
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  background-color: var(--glass-bg);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 7px);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-glow);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.99);
  transition: opacity var(--transition-slow) ease, transform var(--transition-slow) ease,
    visibility var(--transition-slow) ease;
}

.stage-content.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.stage-content__art {
  position: absolute;
  top: 0;
  right: 0;
  width: 190px;
  height: 190px;
  pointer-events: none;
}

.stage-content__watermark {
  position: absolute;
  top: -28px;
  right: 10px;
  font-family: var(--font-display);
  font-size: 9rem;
  line-height: 1;
  color: rgba(224, 30, 46, 0.1);
}

.stage-content__art-icon {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  color: var(--color-red-bright);
  opacity: 0.22;
}

.stage-content__art-icon svg {
  width: 58px;
  height: 58px;
}

.stage-content__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.stage-content__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-full);
  background-color: rgba(224, 30, 46, 0.14);
  color: var(--color-red-bright);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.stage-content__title {
  font-size: var(--fs-2xl);
  color: var(--color-white);
}

.stage-content__tag {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-red-bright);
}

.stage-content__desc {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 52ch;
}

.stage-content__label {
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-gray-400);
}

.stage-list {
  display: grid;
  gap: var(--space-xs);
}

.stage-list li {
  position: relative;
  padding-left: var(--space-lg);
  color: var(--color-off-white);
  font-size: var(--fs-sm);
}

.stage-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background-color: var(--color-red-bright);
  box-shadow: var(--shadow-glow-sm);
}

.stage-content__note {
  margin: 0;
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--color-gray-500);
}

.stage-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
}

.stage-benefit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-gray-300);
}

.stage-benefit svg {
  width: 16px;
  height: 16px;
  color: var(--color-red-bright);
}

/* --- Stages CTA --- */
.stages__cta {
  margin-top: var(--space-3xl);
  text-align: center;
}

.stages__cta-text {
  margin-bottom: var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.stages__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
}

/* ---------------------------------------------------------------------
   Performance Stages — mobile custom dropdown selector
   Desktop keeps the timeline; below 992px the timeline is hidden and a
   premium glass dropdown drives the same panels. Starts on a placeholder
   with the detail card hidden until a stage is chosen.
   --------------------------------------------------------------------- */
.stage-select {
  display: none;
}

@media (max-width: 991px) {
  .stages__timeline {
    display: none;
  }

  .stage-select {
    display: block;
    position: relative;
    z-index: var(--z-dropdown);
    margin-bottom: var(--space-lg);
  }

  .stage-preview {
    display: flex;
  }

  /* On mobile the card slides UP into view (desktop keeps slide-in-right) */
  .stages__panel.slide-in-right {
    transform: translateY(24px);
  }
  .stages__panel.slide-in-right.is-visible {
    transform: none;
  }

  /* Staggered entrance for the active card's content — plays when the
     section scrolls into view and replays on every stage switch. Scoped
     to mobile so desktop is untouched. */
  .stages__panel.is-visible .stage-content.is-active .stage-content__badge { animation: stageChildIn 0.7s var(--transition-base) both; }
  .stages__panel.is-visible .stage-content.is-active .stage-content__title { animation: stageChildIn 0.7s var(--transition-base) both 0.08s; }
  .stages__panel.is-visible .stage-content.is-active .stage-content__tag { animation: stageChildIn 0.7s var(--transition-base) both 0.14s; }
  .stages__panel.is-visible .stage-content.is-active .stage-content__desc { animation: stageChildIn 0.7s var(--transition-base) both 0.2s; }
  .stages__panel.is-visible .stage-content.is-active .stage-list { animation: stageChildIn 0.75s var(--transition-base) both 0.28s; }
  .stages__panel.is-visible .stage-content.is-active .stage-benefits { animation: stageChildIn 0.8s var(--transition-base) both 0.4s; }

  /* Subtle light sweep across the active card every few seconds */
  .stages__panel.is-visible .stage-content.is-active::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.05) 50%, transparent 62%);
    transform: translateX(-120%);
    animation: stageSweep 7s ease-in-out 1.5s infinite;
  }
}

@keyframes stageChildIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes stageSweep {
  0% { transform: translateX(-120%); }
  22%, 100% { transform: translateX(120%); }
}

/* --- Mobile preview strip --- */
.stage-preview {
  display: none;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-lg);
  background-color: var(--glass-bg);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 7px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-glow);
}

.stage-preview__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background-color: rgba(224, 30, 46, 0.14);
  color: var(--color-red-bright);
}

.stage-preview__icon svg {
  width: 20px;
  height: 20px;
}

.stage-preview__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.stage-preview__text strong {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-white);
}

.stage-preview__type {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-preview__tag {
  flex-shrink: 0;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-full);
  background-color: rgba(224, 30, 46, 0.14);
  color: var(--color-red-bright);
  font-family: var(--font-heading);
  font-size: 0.62rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}

.stage-select__toggle {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-lg);
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-glow);
  color: var(--color-white);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.stage-select__toggle[aria-expanded='true'] {
  border-color: var(--color-red);
  box-shadow: var(--glass-glow-hover);
}

.stage-select__current {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.stage-select__num {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--color-white);
  background: linear-gradient(150deg, var(--color-red), var(--color-red-dark));
  box-shadow: var(--shadow-glow-sm);
}

.stage-select__toggle.is-placeholder .stage-select__num {
  display: none;
}

.stage-select__label {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-select__toggle.is-placeholder .stage-select__label {
  color: var(--color-gray-400);
}

.stage-select__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-red-bright);
  transition: transform var(--transition-base);
}

.stage-select__toggle[aria-expanded='true'] .stage-select__chevron {
  transform: rotate(180deg);
}

.stage-select__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + var(--space-xs));
  z-index: var(--z-dropdown);
  padding: var(--space-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  border-radius: var(--radius-lg);
  background-color: rgba(10, 10, 11, 0.96);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-xl), var(--shadow-glow-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-base) ease, transform var(--transition-base) ease,
    visibility var(--transition-base) ease;
}

.stage-select.is-open .stage-select__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.stage-select__option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 48px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-gray-300);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.stage-select__option:hover,
.stage-select__option.is-active {
  background-color: rgba(224, 30, 46, 0.12);
  color: var(--color-white);
}

.stage-select__option .stage-select__num {
  width: 30px;
  height: 30px;
  font-size: var(--fs-base);
  background: var(--color-graphite-light);
  box-shadow: none;
}

.stage-select__option.is-active .stage-select__num {
  background: linear-gradient(150deg, var(--color-red), var(--color-red-dark));
  box-shadow: var(--shadow-glow-sm);
}

/* =====================================================================
   Media frame — premium wrapper for images, video and carousels
   Rounded corners · carbon-textured gutter · thin red accent border ·
   soft shadow + red ring glow · glassmorphism overlay · hover glow.
   Shared by single images, autoplay video and the reusable carousel.
   ===================================================================== */
.media-frame {
  position: relative;
  padding: 6px;                       /* carbon-textured gutter around media */
  border-radius: var(--radius-lg);
  border: 1px solid rgba(224, 30, 46, 0.35);
  background-color: var(--color-carbon-alt);
  box-shadow: var(--shadow-lg), var(--glass-glow);
  overflow: hidden;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

/* Red glow lift on hover — desktop / fine pointers only. Transform is
   intentionally avoided here so it never fights the .slide-up reveal. */
@media (hover: hover) and (pointer: fine) {
  .media-frame:hover {
    border-color: var(--color-red-bright);
    box-shadow: var(--shadow-lg), var(--glass-glow-hover);
  }
}

/* Media element (img or video) filling the frame */
.media-frame__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: calc(var(--radius-lg) - 6px);
}

/* Single-media frames carry their own aspect ratio to avoid layout shift */
.media-frame--landscape { aspect-ratio: 16 / 9; }
.media-frame--photo     { aspect-ratio: 4 / 3; }
.media-frame--portrait {
  aspect-ratio: 9 / 16;
  max-width: 340px;
  margin-inline: auto;
}

/* Glassmorphism / dark theme overlay — subtle, never hides the media */
.media-frame__overlay {
  position: absolute;
  inset: 6px;
  border-radius: calc(var(--radius-lg) - 6px);
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(10, 10, 11, 0.28) 0%, transparent 22%, transparent 72%, rgba(10, 10, 11, 0.42) 100%),
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 55%);
}

/* =====================================================================
   Carousel — reusable gallery component (site-wide)
   Prev/next arrows · dots + "n / total" counter · swipe · mouse drag ·
   keyboard · infinite loop · smooth transitions. Wrapped in .media-frame.
   ===================================================================== */
.carousel { position: relative; }

.carousel__viewport {
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 6px);
  touch-action: pan-y;                /* allow vertical page scroll, capture horizontal swipe */
  cursor: grab;
}
.carousel__viewport:focus-visible { outline: 2px solid var(--color-red-bright); outline-offset: 2px; }
.carousel__viewport.is-dragging { cursor: grabbing; }

.carousel__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.carousel__track.is-no-transition { transition: none; }

.carousel__slide {
  position: relative;
  flex: 0 0 100%;
  aspect-ratio: 4 / 3;
}
.carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  color: var(--color-white);
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.carousel__arrow:hover {
  background: rgba(224, 30, 46, 0.85);
  border-color: var(--color-red-bright);
  box-shadow: var(--shadow-glow-sm);
}
.carousel__arrow svg { width: 22px; height: 22px; }
.carousel__arrow--prev { left: 14px; }
.carousel__arrow--next { right: 14px; }

.carousel__ui {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: 0 0 calc(var(--radius-lg) - 6px) calc(var(--radius-lg) - 6px);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent);
}

.carousel__dots { display: flex; gap: 8px; }
.carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}
.carousel__dot.is-active {
  background: var(--color-red-bright);
  transform: scale(1.35);
  box-shadow: 0 0 10px var(--color-red-glow);
}

.carousel__counter {
  font-family: var(--font-heading);
  letter-spacing: 0.08em;
  font-size: var(--fs-sm);
  color: var(--color-white);
  white-space: nowrap;
}

/* Tighter controls on small screens — keep arrows reachable, no overflow */
@media (max-width: 560px) {
  .carousel__arrow { width: 38px; height: 38px; }
  .carousel__arrow svg { width: 18px; height: 18px; }
  .carousel__arrow--prev { left: 8px; }
  .carousel__arrow--next { right: 8px; }
  .carousel__ui { padding: var(--space-sm); }
}

/* =====================================================================
   Gallery — uniform 16:9 media cards, animated filters + lightbox
   One reusable card. Every item: same size, radius, shadow, hover, overlay.
   ===================================================================== */

/* --- Animated filter buttons --- */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-bottom: var(--space-2xl);
}
.gallery-filter {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  padding: 0.55rem 1.15rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base),
              background var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.gallery-filter:hover { color: var(--color-white); border-color: rgba(224, 30, 46, 0.5); transform: translateY(-1px); }
.gallery-filter.is-active {
  color: var(--color-white);
  border-color: var(--color-red-bright);
  background: linear-gradient(150deg, var(--color-red), var(--color-red-dark));
  box-shadow: var(--shadow-glow-sm);
}

/* --- Fixed grid: 3 / 2 / 1 columns, perfectly aligned --- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
@media (max-width: 991px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .gallery-grid { grid-template-columns: 1fr; } }

/* --- The one reusable media card --- */
.gallery-card {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(224, 30, 46, 0.30);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--color-carbon-alt);
  box-shadow: var(--shadow-md), var(--glass-glow);
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  opacity: 0;
  transition: transform var(--transition-base), box-shadow var(--transition-base),
              border-color var(--transition-base), opacity var(--transition-slow) ease;
}
.gallery-card.is-in { opacity: 1; }               /* clean fade-in reveal */
.gallery-card[hidden] { display: none; }

/* Every image AND video is locked to the same frame */
.gallery-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  background: #000;
}
.gallery-card video.gallery-card__media { pointer-events: none; }

/* Hover: scale 1.02 + soft red glow only */
@media (hover: hover) and (pointer: fine) {
  .gallery-card:hover {
    transform: scale(1.02);
    border-color: var(--color-red-bright);
    box-shadow: var(--shadow-lg), var(--glass-glow-hover);
  }
}

/* Minimal bottom-left overlay: small category + large title */
.gallery-card__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-md);
  background: linear-gradient(to top, rgba(10, 10, 11, 0.80) 0%, rgba(10, 10, 11, 0.15) 46%, transparent 72%);
}
.gallery-card__cat {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--color-red-bright);
  margin-bottom: 0.15rem;
}
.gallery-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-white);
}

/* Video play badge */
.gallery-card__play {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(10, 10, 11, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--glass-border);
  color: var(--color-white);
  z-index: 2;
  pointer-events: none;
}
.gallery-card__play svg { width: 15px; height: 15px; }

/* --- Lightbox --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 6, 0.8);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.lightbox__stage {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: min(1100px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.96);
  transition: transform var(--transition-base);
}
.lightbox.is-open .lightbox__stage { transform: scale(1); }
.lightbox__stage img,
.lightbox__stage video {
  max-width: 100%;
  max-height: 82vh;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl), var(--glass-glow);
  border: 1px solid rgba(224, 30, 46, 0.35);
  background: #000;
}
.lightbox__caption {
  margin-top: var(--space-md);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-white);
  font-size: var(--fs-sm);
  text-align: center;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  color: var(--color-white);
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(224, 30, 46, 0.85);
  border-color: var(--color-red-bright);
  box-shadow: var(--shadow-glow-sm);
}
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); width: 46px; height: 46px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; }
.lightbox__nav--prev { left: clamp(0.5rem, 2vw, 2rem); }
.lightbox__nav--next { right: clamp(0.5rem, 2vw, 2rem); }
.lightbox__close svg { width: 22px; height: 22px; }
.lightbox__nav svg { width: 26px; height: 26px; }

@media (max-width: 560px) {
  .lightbox__nav {
    width: 42px;
    height: 42px;
    top: auto;
    bottom: clamp(1rem, 5vw, 2rem);
    transform: none;
  }
  .lightbox__nav--prev { left: clamp(1rem, 8vw, 3rem); }
  .lightbox__nav--next { right: clamp(1rem, 8vw, 3rem); }
}

/* =====================================================================
   Floating quick-nav island — fixed bottom-centre glass dock.
   Fades in after ~280px of scroll (see navigation.js). Built on every
   page; the current page's item is highlighted red.
   ===================================================================== */
.fnav {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(18px);
  z-index: 90;
  display: flex;
  gap: 0.15rem;
  padding: 0.4rem;
  max-width: calc(100vw - 1.5rem);
  border-radius: var(--radius-full);
  background: rgba(10, 10, 11, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(224, 30, 46, 0.30);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55), 0 0 26px rgba(224, 30, 46, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}
.fnav.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Hide while the mobile menu is open to avoid clutter */
body.nav-open .fnav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.fnav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0.5rem 0.7rem;
  min-width: 44px;
  border-radius: 16px;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}
.fnav__item svg { width: 20px; height: 20px; }
.fnav__label {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}
.fnav__item:hover { color: var(--color-white); background: rgba(255, 255, 255, 0.06); }
.fnav__item.is-current {
  color: var(--color-white);
  background: linear-gradient(150deg, var(--color-red), var(--color-red-dark));
  box-shadow: var(--shadow-glow-sm);
}

/* Mobile: icon-only dock, comfortable touch targets, no overflow */
@media (max-width: 640px) {
  .fnav { gap: 0; padding: 0.3rem; }
  .fnav__item { padding: 0.6rem; min-width: 40px; }
  .fnav__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fnav { transition: opacity var(--transition-base), visibility var(--transition-base); transform: translateX(-50%); }
  .fnav.is-visible { transform: translateX(-50%); }
}

/* =====================================================================
   Preferred Performance Brands — continuous logo marquee (Performance page).
   Premium light "logo-wall" chips glide left forever on a carbon section.
   Decorative only: no arrows/dots, no drag, never pauses. Seamless loop
   is achieved by rendering the full set twice and translating by -50%.
   Respects prefers-reduced-motion (static, centred, wrapped grid).
   ===================================================================== */
.brand-marquee {
  position: relative;
  margin-top: var(--space-2xl);
  overflow: hidden;
  /* soft fade the leading/trailing edges into the section */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.brand-marquee__track {
  display: flex;
  align-items: flex-start;
  width: max-content;
  will-change: transform;
  animation: brandScroll 58s linear infinite;
}
@keyframes brandScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* exactly one full set (incl. trailing margins) */
}

.brand-slide {
  flex: 0 0 auto;
  margin-right: clamp(var(--space-md), 2.4vw, var(--space-xl));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

/* Light chip — reads premium against the carbon-black section */
.brand-slide__plate {
  display: grid;
  place-items: center;
  width: clamp(172px, 21vw, 216px);
  height: clamp(102px, 13vw, 124px);
  border-radius: var(--radius-md);
  background: linear-gradient(158deg, #ffffff 0%, #eef0f4 78%, #e6e9ee 100%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.brand-slide__plate img {
  max-width: 76%;
  max-height: 62%;
  width: auto;
  height: auto;
  object-fit: contain;              /* never stretch, squash or crop */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.16));
  -webkit-user-drag: none;
  user-select: none;
}
.brand-slide__name {
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--color-gray-300);
  text-align: center;
  white-space: nowrap;
}

/* Soft red hover glow — does NOT pause the animation */
@media (hover: hover) and (pointer: fine) {
  .brand-slide__plate:hover {
    transform: translateY(-4px);
    border-color: rgba(224, 30, 46, 0.5);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.5), 0 0 24px rgba(224, 30, 46, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
}

/* Reduced motion / no animation: a clean static, centred, wrapped grid */
@media (prefers-reduced-motion: reduce) {
  .brand-marquee {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .brand-marquee__track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-lg);
  }
  .brand-slide { margin-right: 0; }
  .brand-slide[data-dup] { display: none; }
}

/* =====================================================================
   NF Additives — continuous product marquee (Performance page).
   Reuses the Preferred Brands motion (brandScroll, duplicate-set -50% loop):
   premium light chips glide forever, decorative only, product image only.
   ===================================================================== */
.product-marquee {
  position: relative;
  margin-top: var(--space-2xl);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.product-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: brandScroll 55s linear infinite;   /* same keyframes as the brand marquee */
}
.product-slide {
  flex: 0 0 auto;
  margin-right: clamp(var(--space-md), 2.4vw, var(--space-xl));
}
.product-slide__plate {
  --nf-card-h: clamp(206px, 26vw, 256px);
  display: flex;                     /* flex centring is reliable for replaced elements */
  align-items: center;
  justify-content: center;
  width: clamp(150px, 19vw, 188px);
  height: var(--nf-card-h);
  padding: var(--space-md);
  overflow: hidden;                  /* belt-and-braces: never spill past the card */
  border-radius: var(--radius-md);
  background: linear-gradient(158deg, #ffffff 0%, #f2f3f6 78%, #eaecef 100%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.product-slide__plate img {
  /* Definite caps (not %) so tall bottles always scale DOWN to fit the card in
     full. max-height = card height minus generous padding, so every bottle has
     clear breathing room top and bottom and is never cropped. */
  display: block;
  max-width: 90%;
  max-height: calc(var(--nf-card-h) - 2.75rem);
  width: auto;
  height: auto;
  object-fit: contain;              /* whole bottle — never crop or stretch */
  object-position: center center;   /* centred vertically and horizontally */
  -webkit-user-drag: none;
  user-select: none;
}
@media (hover: hover) and (pointer: fine) {
  .product-slide__plate:hover {
    transform: translateY(-4px);
    border-color: rgba(224, 30, 46, 0.5);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.5), 0 0 24px rgba(224, 30, 46, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
}
@media (prefers-reduced-motion: reduce) {
  .product-marquee {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .product-marquee__track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-lg);
  }
  .product-slide { margin-right: 0; }
  .product-slide[data-dup] { display: none; }
}

/* =====================================================================
   Premium Workshop Products — auto-rotating showcase (Services & Repairs).
   Decorative only: no arrows/dots/drag. Three cards orbit forever; the
   centre card is sharp, larger and red-glowing, the sides sit behind,
   smaller and softly blurred. Respects prefers-reduced-motion.
   ===================================================================== */
.product-showcase {
  position: relative;
  height: clamp(360px, 58vw, 460px);
  margin-top: var(--space-2xl);
  overflow: hidden;                 /* clip the side cards — never overflow the page */
}
.product-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(210px, 40vw, 300px);
  aspect-ratio: 940 / 1280;
  transform: translate(-50%, -50%);
  will-change: transform, filter, opacity;
  animation: productOrbit 7.5s ease-in-out infinite;
}
.product-card[data-pos="1"] { animation-delay: -2.5s; }
.product-card[data-pos="2"] { animation-delay: -5s; }

.product-card__inner {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-carbon-alt);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 7px);
  border: 1px solid rgba(224, 30, 46, 0.35);
  box-shadow: var(--glass-glow);
  animation: productFloat 3.6s ease-in-out infinite alternate;
}
.product-card__inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;              /* keep aspect ratio, never crop */
}

@keyframes productOrbit {
  0%, 100% {          /* CENTRE — sharp, front, red glow */
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
    opacity: 1;
    z-index: 3;
    box-shadow: 0 0 46px rgba(224, 30, 46, 0.45), 0 26px 60px rgba(0, 0, 0, 0.6);
  }
  16% {
    transform: translate(calc(-50% - 42%), -50%) scale(0.9);
    filter: blur(1px);
    opacity: 0.85;
    z-index: 2;
    box-shadow: 0 0 26px rgba(224, 30, 46, 0.22), 0 18px 44px rgba(0, 0, 0, 0.5);
  }
  33% {               /* LEFT — behind, smaller, blurred */
    transform: translate(calc(-50% - 62%), -50%) scale(0.8);
    filter: blur(2.4px);
    opacity: 0.62;
    z-index: 2;
    box-shadow: 0 0 16px rgba(224, 30, 46, 0.12), 0 14px 36px rgba(0, 0, 0, 0.5);
  }
  50% {               /* around the back (behind centre) */
    transform: translate(-50%, -50%) scale(0.5);
    filter: blur(4px);
    opacity: 0.3;
    z-index: 1;
    box-shadow: 0 0 10px rgba(224, 30, 46, 0.08);
  }
  66% {               /* RIGHT — behind, smaller, blurred */
    transform: translate(calc(-50% + 62%), -50%) scale(0.8);
    filter: blur(2.4px);
    opacity: 0.62;
    z-index: 2;
    box-shadow: 0 0 16px rgba(224, 30, 46, 0.12), 0 14px 36px rgba(0, 0, 0, 0.5);
  }
  84% {
    transform: translate(calc(-50% + 42%), -50%) scale(0.9);
    filter: blur(1px);
    opacity: 0.85;
    z-index: 2;
    box-shadow: 0 0 26px rgba(224, 30, 46, 0.22), 0 18px 44px rgba(0, 0, 0, 0.5);
  }
}

@keyframes productFloat {
  from { transform: translateY(-6px); }
  to   { transform: translateY(6px); }
}

/* Reduced motion / no animation: a clean static three-up, all sharp */
@media (prefers-reduced-motion: reduce) {
  .product-showcase {
    height: auto;
    overflow: visible;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-lg);
  }
  .product-card {
    position: static;
    transform: none;
    animation: none;
    opacity: 1;
    filter: none;
    width: clamp(200px, 46vw, 280px);
  }
  .product-card__inner { animation: none; }
}

/* =====================================================================
   Secure Online Tuning Portal — Performance page section.
   Reuses the split-grid + media-frame; adds a check-feature list, a
   premium gradient CTA, a glass info note and a gentle image float.
   ===================================================================== */
.portal-float { animation: portalFloat 4.2s ease-in-out infinite alternate; }
@keyframes portalFloat {
  from { transform: translateY(-5px); }
  to   { transform: translateY(5px); }
}

.portal-features {
  list-style: none;
  margin: var(--space-lg) 0 var(--space-xl);
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}
.portal-features li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-gray-300);
  font-size: var(--fs-md);
}
.portal-features svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: var(--radius-full);
  color: var(--color-red-bright);
  background: rgba(224, 30, 46, 0.12);
  box-shadow: inset 0 0 8px rgba(224, 30, 46, 0.18);
}

.portal-actions { margin-bottom: var(--space-lg); }
.portal-cta {
  min-height: 54px;
  padding-inline: var(--space-xl);
  background-color: var(--color-red);
  background-image: linear-gradient(135deg, var(--color-red-bright) 0%, var(--color-red-dark) 100%);
  box-shadow: 0 10px 30px rgba(179, 18, 31, 0.35);
}
.portal-cta svg { width: 18px; height: 18px; transition: transform var(--transition-base); }
@media (hover: hover) and (pointer: fine) {
  .portal-cta:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 16px 38px rgba(224, 30, 46, 0.45);
  }
  .portal-cta:hover svg { transform: translateX(4px); }
}

.portal-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background-color: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-glow);
}
.portal-note__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  color: var(--color-red-bright);
  background: rgba(224, 30, 46, 0.12);
  box-shadow: inset 0 0 12px rgba(224, 30, 46, 0.15);
}
.portal-note__icon svg { width: 22px; height: 22px; }
.portal-note__body strong {
  display: block;
  color: var(--color-white);
  margin-bottom: 4px;
}
.portal-note__body p { margin: 0; font-size: var(--fs-sm); color: var(--color-gray-300); }

@media (max-width: 600px) {
  .portal-cta { width: 100%; }
}

/* =====================================================================
   Contact page — split info/form layout, map card, logo loader.
   ===================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--space-xl); align-items: start; }
}

.contact-info { display: grid; gap: var(--space-lg); align-content: start; }

/* Info cards */
.info-card {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background-color: var(--glass-bg);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 7px);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-glow);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
@media (hover: hover) and (pointer: fine) {
  .info-card:hover { transform: translateY(-4px); border-color: rgba(224, 30, 46, 0.45); box-shadow: var(--shadow-lg), var(--glass-glow-hover); }
}
.info-card__head { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); }
.info-card__icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-md);
  color: var(--color-red-bright);
  background: rgba(224, 30, 46, 0.12);
  box-shadow: inset 0 0 12px rgba(224, 30, 46, 0.15);
}
.info-card__icon svg { width: 24px; height: 24px; }
.info-card__label {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-size: var(--fs-sm);
  color: var(--color-white);
}
.info-card__row { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); }
.info-card__item { display: grid; gap: 2px; }
.info-card__item span { font-size: var(--fs-sm); color: var(--color-text-muted); }
.info-card__item a, .info-card__value a { color: var(--color-white); font-size: var(--fs-md); }
.info-card__item a:hover, .info-card__value a:hover { color: var(--color-red-bright); }

/* Social row */
.info-social { display: flex; gap: var(--space-sm); }
.info-social__link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-md);
  color: var(--color-white);
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  transition: transform var(--transition-base), background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.info-social__link svg { width: 20px; height: 20px; }
.info-social__link:hover { transform: translateY(-3px); background: rgba(224, 30, 46, 0.85); border-color: var(--color-red-bright); box-shadow: var(--shadow-glow-sm); }

/* Highlighted tuning-portal card */
.info-card--feature {
  border-color: rgba(224, 30, 46, 0.4);
  background-image:
    radial-gradient(120% 90% at 100% 0%, rgba(224, 30, 46, 0.14), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 7px);
  box-shadow: var(--glass-glow), 0 0 26px rgba(224, 30, 46, 0.12);
}
.info-card--feature p { color: var(--color-gray-300); font-size: var(--fs-sm); margin: 0 0 var(--space-lg); }

/* Form */
.contact-form-wrap {
  padding: clamp(var(--space-lg), 3vw, var(--space-2xl));
  border-radius: var(--radius-lg);
  background-color: var(--glass-bg);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 7px);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-glow);
}
.contact-form { display: grid; gap: var(--space-md); }
.contact-form__row { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
@media (min-width: 560px) { .contact-form__row { grid-template-columns: 1fr 1fr; } }
.contact-form .btn { width: 100%; min-height: 54px; margin-top: var(--space-xs); }

/* Map card */
.map-card {
  padding: clamp(var(--space-lg), 3vw, var(--space-2xl));
  border-radius: var(--radius-lg);
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-glow);
}
.map-card__head { text-align: center; margin-bottom: var(--space-lg); }
.map-card__head p { color: var(--color-text-muted); margin: var(--space-xs) 0 0; }
.map-card__frame {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(224, 30, 46, 0.3);
  box-shadow: 0 0 22px rgba(224, 30, 46, 0.10);
  aspect-ratio: 16 / 9;
}
.map-card__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.2) contrast(1.05); }
.map-card__actions { display: flex; justify-content: center; margin-top: var(--space-lg); }

/* Preloader logo (contact page landing transition) */
.preloader__logo {
  width: min(280px, 62vw);
  height: auto;
  filter: drop-shadow(0 0 26px rgba(224, 30, 46, 0.5));
  animation: preloaderLogoIn 640ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes preloaderLogoIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Venom Performance Tuning logo — Performance page hero */
.perf-hero-logo {
  display: block;
  width: clamp(220px, 44vw, 360px);
  height: auto;
  margin: 0 auto var(--space-lg);
  filter: drop-shadow(0 0 26px rgba(224, 30, 46, 0.28));
}