/* ============================================================
   CandyCane Motors GmbH — Main Stylesheet
   Pagani meets Willy Wonka. Ultra-luxury automotive dark theme
   with bold candy-color accents. NOT pink.
   ============================================================ */

/* ── 1. CSS RESET ─────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

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

/* ── 2. CSS VARIABLES ─────────────────────────────────────────────────── */

:root {
  /* Colors */
  --cc-black:        #0D0D0D;
  --cc-dark:         #141414;
  --cc-card:         #1C1C1C;
  --cc-card-hover:   #242424;
  --cc-border:       #2A2A2A;
  --cc-border-light: #333333;
  --cc-red:          #C41E00;
  --cc-red-bright:   #E52200;
  --cc-red-dark:     #8B1500;
  --cc-gold:         #C8920A;
  --cc-gold-bright:  #E0A80C;
  --cc-gold-muted:   #7A5A06;
  --cc-cream:        #F0E6D0;
  --cc-white:        #FAFAF8;
  --cc-text:         #C8C0B0;
  --cc-text-muted:   #666666;
  --cc-text-faint:   #444444;
  --cc-green:        #1A4A1A;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Spacing scale */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Layout */
  --container-max:       1440px;
  --container-max-narrow: 860px;
  --nav-height:          72px;

  /* Transitions */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;
  --transition-slower:  600ms ease;

  /* Borders */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
}

/* ── 3. BASE STYLES ───────────────────────────────────────────────────── */

body {
  background-color: var(--cc-black);
  color: var(--cc-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
}

/* ── 4. TYPOGRAPHY SYSTEM ─────────────────────────────────────────────── */

.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--cc-white);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 700; }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h4 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.1rem; }

p { line-height: 1.7; color: var(--cc-text); }

.lead {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--cc-cream);
  line-height: 1.65;
  font-weight: 300;
}

.caption {
  font-size: 0.8rem;
  color: var(--cc-text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.section-eyebrow {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cc-gold);
  margin-bottom: var(--space-sm);
  font-family: var(--font-mono);
}

.section-heading {
  font-family: var(--font-display);
  color: var(--cc-white);
  margin-bottom: var(--space-lg);
}

.section-sub {
  color: var(--cc-text);
  font-size: 1.1rem;
  max-width: 600px;
}

/* Rich text styles */
.rich-text p        { margin-bottom: var(--space-lg); }
.rich-text h2       { margin-top: var(--space-2xl); margin-bottom: var(--space-md); }
.rich-text h3       { margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.rich-text ul,
.rich-text ol       { margin-left: var(--space-xl); margin-bottom: var(--space-lg); }
.rich-text li       { margin-bottom: var(--space-xs); }
.rich-text strong   { color: var(--cc-white); font-weight: 500; }
.rich-text em       { color: var(--cc-cream); font-style: italic; }
.rich-text a        { color: var(--cc-gold); border-bottom: 1px solid var(--cc-gold-muted); }
.rich-text a:hover  { color: var(--cc-gold-bright); }
.rich-text blockquote {
  border-left: 3px solid var(--cc-red);
  padding: var(--space-md) var(--space-xl);
  margin: var(--space-xl) 0;
  background: var(--cc-card);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--cc-cream);
}

/* ── 5. LAYOUT ────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.container--narrow {
  max-width: var(--container-max-narrow);
}

.section {
  padding: var(--space-4xl) 0;
}

.section--dark {
  background-color: var(--cc-dark);
}

.section-header {
  margin-bottom: var(--space-3xl);
}

.section-cta {
  margin-top: var(--space-3xl);
  text-align: center;
}

/* ── 6. CANDY CANE STRIPE MOTIF ───────────────────────────────────────── */

.cc-stripe-accent {
  background: repeating-linear-gradient(
    -45deg,
    var(--cc-red),
    var(--cc-red) 3px,
    transparent 3px,
    transparent 12px
  );
}

/* ── 7. NAVIGATION ────────────────────────────────────────────────────── */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  background: linear-gradient(to bottom, rgba(13,13,13,0.85) 0%, rgba(13,13,13,0) 100%);
  transition: background var(--transition-base), box-shadow var(--transition-base);
}

.site-nav.nav--scrolled {
  background: rgba(13, 13, 13, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--cc-border);
}

.nav-container {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  height: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo__monogram {
  width: 36px;
  height: 36px;
  background: var(--cc-red);
  color: var(--cc-white);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.nav-logo__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.nav-logo__brand {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cc-white);
  letter-spacing: 0.02em;
}

.nav-logo__sub {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cc-text-muted);
}

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
}

.nav-link {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--cc-text);
  text-decoration: none;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.nav-link:hover,
.nav-link--active {
  color: var(--cc-white);
}

.nav-link--active {
  border-bottom: 1px solid var(--cc-red);
  padding-bottom: 1px;
}

/* Nav CTA */
.nav-cta {
  flex-shrink: 0;
  font-size: 0.8rem;
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.nav-hamburger__line {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--cc-white);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-hamburger.is-open .nav-hamburger__line:nth-child(1) {
  transform: translateY(8.25px) rotate(45deg);
}
.nav-hamburger.is-open .nav-hamburger__line:nth-child(2) {
  opacity: 0;
}
.nav-hamburger.is-open .nav-hamburger__line:nth-child(3) {
  transform: translateY(-8.25px) rotate(-45deg);
}

/* ── 8. BUTTONS ───────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.75rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

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

.btn--primary:hover {
  background: var(--cc-red-bright);
  transform: translateY(-1px);
}

.btn--secondary {
  background: transparent;
  color: var(--cc-white);
  border: 1px solid var(--cc-border-light);
}

.btn--secondary:hover {
  border-color: var(--cc-white);
  background: rgba(255, 255, 255, 0.05);
}

.btn--large {
  padding: 1rem 2.5rem;
  font-size: 0.9rem;
}

.btn--small {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}

/* ── 9. HERO SECTION ──────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--nav-height);
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(13, 13, 13, 0.92) 0%,
    rgba(13, 13, 13, 0.7) 50%,
    rgba(13, 13, 13, 0.4) 100%
  );
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.hero__stripe {
  width: 60px;
  height: 4px;
  margin-bottom: var(--space-xl);
}

.hero__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cc-gold);
  margin-bottom: var(--space-lg);
}

.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 700;
  color: var(--cc-white);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-xl);
  font-style: italic;
}

.hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--cc-text);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: var(--space-2xl);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.hero__scroll-hint {
  position: absolute;
  bottom: var(--space-2xl);
  left: var(--space-xl);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.hero__scroll-line {
  width: 40px;
  height: 1px;
  background: var(--cc-text-muted);
}

.hero__scroll-text {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--cc-text-muted);
  text-transform: uppercase;
}

/* Page heroes (non-home) */
.page-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: flex-end;
  padding-top: var(--nav-height);
  overflow: hidden;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13, 13, 13, 0.95) 0%,
    rgba(13, 13, 13, 0.5) 60%,
    rgba(13, 13, 13, 0.2) 100%
  );
  z-index: 1;
}

.page-hero__content {
  position: relative;
  z-index: 2;
  padding-bottom: var(--space-4xl);
  max-width: 800px;
}

.page-hero__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cc-gold);
  margin-bottom: var(--space-md);
  display: block;
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  color: var(--cc-white);
  margin-bottom: var(--space-lg);
}

.page-hero__intro {
  font-size: 1.1rem;
  color: var(--cc-text);
  max-width: 600px;
}

.page-hero--minimal {
  min-height: 30vh;
  background: var(--cc-dark);
  padding: var(--space-5xl) 0 var(--space-3xl);
}

/* Car hero */
.car-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding-top: var(--nav-height);
  overflow: hidden;
}

.car-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  z-index: 0;
}

.car-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13, 13, 13, 1) 0%,
    rgba(13, 13, 13, 0.7) 40%,
    rgba(13, 13, 13, 0.2) 100%
  );
  z-index: 1;
}

.car-hero__content {
  position: relative;
  z-index: 2;
  padding-bottom: var(--space-5xl);
}

.car-hero__stripe {
  width: 50px;
  height: 3px;
  margin-bottom: var(--space-xl);
}

.car-hero__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cc-gold);
  margin-bottom: var(--space-sm);
  display: block;
}

.car-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 6rem);
  color: var(--cc-white);
  font-weight: 700;
  margin-bottom: var(--space-sm);
  line-height: 1.05;
}

.car-hero__tagline {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  color: var(--cc-cream);
  font-style: italic;
  margin-bottom: var(--space-lg);
}

.car-hero__price {
  font-size: 1.1rem;
  color: var(--cc-text-muted);
}

.car-hero__price-note {
  font-size: 0.8rem;
  margin-left: var(--space-sm);
}

/* Article hero */
.article-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  padding-top: var(--nav-height);
  overflow: hidden;
}

.article-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.article-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13, 13, 13, 0.97) 0%,
    rgba(13, 13, 13, 0.6) 50%,
    rgba(13, 13, 13, 0.2) 100%
  );
  z-index: 1;
}

.article-hero__content {
  position: relative;
  z-index: 2;
  padding-bottom: var(--space-4xl);
}

.article-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 0.8rem;
  color: var(--cc-text-muted);
  margin-bottom: var(--space-md);
  font-family: var(--font-mono);
}

.article-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  color: var(--cc-white);
  margin-bottom: var(--space-lg);
  max-width: 800px;
}

.article-hero__intro {
  font-size: 1.15rem;
  color: var(--cc-text);
  max-width: 600px;
}

/* ── 10. STATS BAR ────────────────────────────────────────────────────── */

.stats-bar {
  background: var(--cc-dark);
  border-top: 1px solid var(--cc-border);
  border-bottom: 1px solid var(--cc-border);
  padding: var(--space-xl) 0;
}

.stats-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xl);
}

.stat-item {
  text-align: center;
  flex: 1;
  min-width: 100px;
}

.stat-item__value {
  display: block;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  color: var(--cc-white);
  line-height: 1;
}

.stat-item__unit {
  font-size: 1rem;
  color: var(--cc-gold);
  margin-left: 2px;
}

.stat-item__label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cc-text-muted);
  margin-top: var(--space-xs);
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: var(--cc-border);
  flex-shrink: 0;
}

/* ── 11. CAR CARDS ────────────────────────────────────────────────────── */

.cars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-xl);
}

.car-card {
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  overflow: hidden;
  transition: transform var(--transition-base), border-color var(--transition-base);
}

.car-card:hover {
  transform: translateY(-4px);
  border-color: var(--cc-border-light);
}

.car-card__link {
  display: block;
  text-decoration: none;
}

.car-card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 5;
  background: var(--cc-dark);
}

.car-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.car-card:hover .car-card__img {
  transform: scale(1.04);
}

.car-card__image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,13,13,0.8) 0%, transparent 60%);
}

.car-card__badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  background: var(--cc-red);
  color: var(--cc-white);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-xs) var(--space-sm);
  z-index: 1;
}

.car-card__badge--gold { background: var(--cc-gold); color: var(--cc-black); }
.car-card__badge--light { background: rgba(255,255,255,0.15); backdrop-filter: blur(4px); }

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

.car-card__eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cc-text-muted);
  margin-bottom: var(--space-xs);
}

.car-card__name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--cc-white);
  margin-bottom: var(--space-xs);
}

.car-card__tagline {
  font-size: 0.9rem;
  color: var(--cc-text);
  font-style: italic;
  margin-bottom: var(--space-xl);
  font-family: var(--font-display);
}

.car-card__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--cc-border);
  border-bottom: 1px solid var(--cc-border);
  margin-bottom: var(--space-lg);
}

.car-card__spec {
  text-align: center;
}

.car-card__spec-value {
  display: block;
  font-size: 1.1rem;
  color: var(--cc-white);
  font-weight: 500;
}

.car-card__spec-label {
  display: block;
  font-size: 0.65rem;
  color: var(--cc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.car-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.car-card__price-from {
  font-size: 0.7rem;
  color: var(--cc-text-muted);
}

.car-card__price-value {
  font-size: 1.2rem;
  color: var(--cc-cream);
  font-weight: 500;
}

.car-card__cta {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--cc-text-muted);
  transition: color var(--transition-fast);
}

.car-card:hover .car-card__cta {
  color: var(--cc-white);
}

.arrow {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.car-card:hover .arrow {
  transform: translateX(4px);
}

/* ── 12. MODEL CARD (full-width) ──────────────────────────────────────── */

.model-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  margin-bottom: var(--space-3xl);
  overflow: hidden;
}

.model-card__visual {
  position: relative;
  min-height: 400px;
}

.model-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.model-card__stripe {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.model-card__content {
  padding: var(--space-3xl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.model-card__header { margin-bottom: var(--space-xl); }
.model-card__eyebrow { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cc-text-muted); margin-bottom: var(--space-xs); }
.model-card__name { font-family: var(--font-display); font-size: 2.5rem; color: var(--cc-white); margin-bottom: var(--space-xs); }
.model-card__tagline { font-family: var(--font-display); font-style: italic; color: var(--cc-text); font-size: 1.1rem; }

.model-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-xl);
  flex-wrap: wrap;
  gap: var(--space-md);
}

.model-card__price {
  display: flex;
  flex-direction: column;
}

.model-card__price-note {
  font-size: 0.65rem;
  color: var(--cc-text-muted);
}

/* ── 13. SPECS GRID ───────────────────────────────────────────────────── */

.specs-grid {
  display: grid;
  gap: 1px;
  background: var(--cc-border);
  border: 1px solid var(--cc-border);
  margin: var(--space-xl) 0;
}

.specs-grid--compact { grid-template-columns: repeat(3, 1fr); }
.specs-grid--full    { grid-template-columns: repeat(3, 1fr); }

.spec-cell {
  background: var(--cc-card);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  position: relative;
}

.spec-cell--large {
  padding: var(--space-2xl) var(--space-xl);
}

.spec-cell__value {
  display: block;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 500;
  color: var(--cc-white);
  line-height: 1;
  letter-spacing: -0.02em;
}

.spec-cell__unit {
  display: inline-block;
  font-size: 1.1rem;
  color: var(--cc-gold);
  margin-left: 4px;
  vertical-align: baseline;
}

.spec-cell__label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cc-text-muted);
  margin-top: var(--space-sm);
}

.spec-cell__sub {
  display: block;
  font-size: 0.7rem;
  color: var(--cc-text-faint);
  margin-top: var(--space-xs);
}

/* ── 14. COMPARISON TABLE ─────────────────────────────────────────────── */

.comparison-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--space-lg);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.comparison-table th,
.comparison-table td {
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  border-bottom: 1px solid var(--cc-border);
  font-size: 0.9rem;
}

.comparison-table thead th {
  background: var(--cc-dark);
  color: var(--cc-white);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
}

.comparison-table__label-col {
  min-width: 180px;
}

.comparison-table__label {
  font-size: 0.75rem;
  color: var(--cc-text-muted);
  letter-spacing: 0.05em;
}

.comparison-table__row--price td {
  background: rgba(196, 30, 0, 0.08);
  font-weight: 500;
}

.comparison-table__price {
  font-size: 1.1rem;
  color: var(--cc-cream);
}

.comparison-table tbody tr:hover td {
  background: var(--cc-card-hover);
}

.comparison-note {
  font-size: 0.7rem;
  color: var(--cc-text-muted);
  letter-spacing: 0.04em;
}

/* ── 15. PHILOSOPHY / FEATURE BLOCKS ─────────────────────────────────── */

.philosophy-block {
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.philosophy-block__stripe {
  height: 100%;
  min-height: 200px;
}

.philosophy-quote__text {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-style: italic;
  color: var(--cc-white);
  line-height: 1.25;
  margin-bottom: var(--space-xl);
}

.philosophy-body {
  color: var(--cc-text);
  margin-bottom: var(--space-xl);
}

.philosophy-attribution {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.philosophy-attribution__dash { color: var(--cc-red); }
.philosophy-attribution__name { font-family: var(--font-display); font-size: 1.1rem; color: var(--cc-white); }
.philosophy-attribution__role { font-size: 0.75rem; color: var(--cc-text-muted); }

/* Feature blocks */
.feature-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
  align-items: start;
}

.feature-block__header { position: sticky; top: calc(var(--nav-height) + var(--space-xl)); }
.feature-block__tag {
  display: inline-block;
  background: var(--cc-red);
  color: var(--cc-white);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 8px;
  margin-bottom: var(--space-md);
}
.feature-block__heading { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.5rem); color: var(--cc-white); }
.feature-block__body { color: var(--cc-text); }
.feature-block__credit { font-size: 0.75rem; color: var(--cc-text-muted); margin-top: var(--space-lg); }

/* ── 16. AWARDS ───────────────────────────────────────────────────────── */

.awards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.award-item {
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  padding: var(--space-xl);
  border-top: 3px solid var(--cc-gold);
  transition: border-color var(--transition-base);
}

.award-item:hover { border-top-color: var(--cc-red); }

.award-item__year {
  display: block;
  font-size: 0.7rem;
  color: var(--cc-gold);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-sm);
}

.award-item__name {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--cc-white);
  margin-bottom: var(--space-xs);
}

.award-item__category {
  font-size: 0.7rem;
  color: var(--cc-text-muted);
  letter-spacing: 0.04em;
}

/* ── 17. TESTIMONIALS / PRESS QUOTES ─────────────────────────────────── */

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-xl);
}

.testimonial-card {
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  padding: var(--space-2xl);
  border-left: 3px solid var(--cc-red);
}

.testimonial-card__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--cc-cream);
  line-height: 1.6;
  margin-bottom: var(--space-xl);
}

.testimonial-card__footer { display: flex; flex-direction: column; gap: 4px; }
.testimonial-card__author { font-size: 0.9rem; font-weight: 500; color: var(--cc-white); }
.testimonial-card__source { font-size: 0.7rem; color: var(--cc-text-muted); font-family: var(--font-mono); }
.testimonial-card__rating { font-size: 0.85rem; color: var(--cc-gold); }

/* ── 18. NEWS CARDS ───────────────────────────────────────────────────── */

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-xl);
}

.news-card {
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  overflow: hidden;
  transition: transform var(--transition-base), border-color var(--transition-base);
}

.news-card:hover {
  transform: translateY(-3px);
  border-color: var(--cc-border-light);
}

.news-card__link { display: block; text-decoration: none; }

.news-card__image {
  overflow: hidden;
  aspect-ratio: 3/2;
}

.news-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.news-card:hover .news-card__image img { transform: scale(1.03); }

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

.news-card__date { font-size: 0.7rem; color: var(--cc-gold); display: block; margin-bottom: var(--space-sm); }
.news-card__title { font-family: var(--font-display); font-size: 1.25rem; color: var(--cc-white); margin-bottom: var(--space-sm); line-height: 1.3; }
.news-card__intro { font-size: 0.9rem; color: var(--cc-text); margin-bottom: var(--space-md); }
.news-card__read-more { font-size: 0.75rem; color: var(--cc-text-muted); letter-spacing: 0.05em; }

/* Home news teasers */
.news-teaser-placeholder {
  border-left: 3px solid var(--cc-border);
  padding-left: var(--space-xl);
  transition: border-color var(--transition-fast);
}

.news-teaser-placeholder:hover { border-left-color: var(--cc-red); }

.news-teaser-placeholder h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--cc-white);
  margin-bottom: var(--space-sm);
  margin-top: var(--space-sm);
}

.news-teaser-placeholder h3 a { text-decoration: none; }
.news-teaser-placeholder h3 a:hover { color: var(--cc-cream); }
.news-teaser-placeholder p { font-size: 0.9rem; color: var(--cc-text); }

/* Featured news */
.featured-news {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  overflow: hidden;
}

.featured-news__media { overflow: hidden; min-height: 400px; }
.featured-news__image { width: 100%; height: 100%; object-fit: cover; }

.featured-news__content { padding: var(--space-3xl); }
.featured-news__meta { display: flex; gap: var(--space-md); margin-bottom: var(--space-lg); font-size: 0.75rem; color: var(--cc-text-muted); }
.featured-news__title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.25rem); color: var(--cc-white); margin-bottom: var(--space-lg); line-height: 1.25; }
.featured-news__title a { text-decoration: none; }
.featured-news__title a:hover { color: var(--cc-cream); }
.featured-news__intro { color: var(--cc-text); margin-bottom: var(--space-xl); line-height: 1.7; }

/* ── 19. COLOR SWATCHES ───────────────────────────────────────────────── */

.color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  justify-content: center;
}

.color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.color-swatch:hover { transform: translateY(-3px); }

.color-swatch__chip {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--cc-border);
  transition: border-color var(--transition-fast);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

.color-swatch--signature .color-swatch__chip {
  border-color: var(--cc-gold);
  box-shadow: 0 0 0 2px var(--cc-gold-muted);
}

.color-swatch__name {
  font-size: 0.75rem;
  color: var(--cc-text);
  text-align: center;
  max-width: 100px;
}

.color-swatch__badge {
  font-size: 0.6rem;
  color: var(--cc-gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.color-swatch__surcharge {
  font-size: 0.65rem;
  color: var(--cc-text-muted);
}

/* ── 20. GALLERY ──────────────────────────────────────────────────────── */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-sm);
}

.gallery-item {
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3;
}

.gallery-item__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.gallery-item:hover .gallery-item__image { transform: scale(1.04); }

.gallery-item__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-sm) var(--space-md);
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  font-size: 0.7rem;
  color: var(--cc-text);
  letter-spacing: 0.04em;
}

/* ── 21. IMAGE PLACEHOLDERS ───────────────────────────────────────────── */

.img-placeholder {
  background: linear-gradient(135deg, var(--cc-dark) 0%, #1a0800 100%);
  position: relative;
  overflow: hidden;
}

.img-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 24px,
    rgba(196, 30, 0, 0.04) 24px,
    rgba(196, 30, 0, 0.04) 25px
  );
}

.img-placeholder--hero {
  height: 100%;
  min-height: 600px;
  background: linear-gradient(135deg, #0d0d0d 0%, #1a0400 40%, #0d0305 70%, #0d0d0d 100%);
}

.img-placeholder--car {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #0d0d0d 0%, #1a0500 60%, #0d0d0d 100%);
  min-height: 300px;
}

.img-placeholder--gt {
  background: linear-gradient(135deg, #0d0d0d 0%, #0a0a1a 50%, #0d0d0d 100%);
}

.img-placeholder--r {
  background: linear-gradient(135deg, #0d0d0d 0%, #1a0c00 50%, #0d0d0d 100%);
}

.img-placeholder--model {
  min-height: 400px;
  height: 100%;
}

.img-placeholder--news { background: linear-gradient(135deg, #0d0d0d 0%, #0d0a05 100%); }
.img-placeholder--news-featured { aspect-ratio: 16/9; min-height: 300px; }
.img-placeholder--news-card { aspect-ratio: 3/2; }
.img-placeholder--tech { background: linear-gradient(135deg, #0d0d0d 0%, #050d1a 100%); }
.img-placeholder--eco { background: linear-gradient(135deg, #0d0d0d 0%, #051a05 100%); }

/* ── 22. TIMELINE ─────────────────────────────────────────────────────── */

.timeline {
  position: relative;
  padding-left: var(--space-2xl);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 0;
  width: 1px;
  background: var(--cc-border);
}

.timeline-item {
  position: relative;
  margin-bottom: var(--space-2xl);
}

.timeline-item__marker {
  position: absolute;
  left: calc(-1 * var(--space-2xl) - 4px);
  top: 8px;
  width: 9px;
  height: 9px;
  background: var(--cc-red);
  border-radius: 50%;
  border: 2px solid var(--cc-black);
  box-shadow: 0 0 0 2px var(--cc-red);
}

.timeline-item__year {
  display: block;
  font-size: 0.75rem;
  color: var(--cc-gold);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-xs);
}

.timeline-item__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--cc-white);
  margin-bottom: var(--space-xs);
}

.timeline-item__desc {
  font-size: 0.9rem;
  color: var(--cc-text);
  line-height: 1.6;
}

/* ── 23. FOUNDER CARDS ────────────────────────────────────────────────── */

.founders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-2xl);
}

.founder-card {
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  overflow: hidden;
}

.founder-card__image-wrapper { height: 300px; overflow: hidden; }
.founder-card__image { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.founder-card__image-placeholder {
  height: 300px;
  background: linear-gradient(135deg, var(--cc-dark) 0%, var(--cc-card) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.founder-card__initials {
  font-size: 3rem;
  color: var(--cc-red);
  font-weight: 700;
}

.founder-card__content { padding: var(--space-xl); }
.founder-card__name { font-family: var(--font-display); font-size: 1.4rem; color: var(--cc-white); margin-bottom: 4px; }
.founder-card__role { font-size: 0.75rem; color: var(--cc-gold); letter-spacing: 0.08em; margin-bottom: var(--space-lg); display: block; }
.founder-card__bio { font-size: 0.9rem; color: var(--cc-text); line-height: 1.7; }

/* ── 24. TECHNOLOGY SECTIONS ──────────────────────────────────────────── */

.tech-section {
  max-width: 900px;
  margin: 0 auto;
}

.tech-section__header { margin-bottom: var(--space-xl); }

.tech-section__abbrev {
  display: inline-block;
  background: var(--cc-red);
  color: var(--cc-white);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  padding: 4px 10px;
  margin-bottom: var(--space-md);
}

.tech-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  color: var(--cc-white);
}

.tech-section__body { color: var(--cc-text); line-height: 1.8; font-size: 1.05rem; }
.tech-section__image { margin-top: var(--space-xl); border: 1px solid var(--cc-border); }

/* Tech statement */
.tech-statement {
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: var(--space-2xl);
}

.tech-statement__quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-style: italic;
  color: var(--cc-white);
  line-height: 1.3;
}

.tech-statement__quote cite {
  display: block;
  font-size: 0.8rem;
  color: var(--cc-text-muted);
  font-style: normal;
  margin-top: var(--space-md);
  font-family: var(--font-mono);
}

/* Materials grid */
.materials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.material-card {
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  padding: var(--space-xl);
  border-top: 2px solid var(--cc-gold-muted);
}

.material-card__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.material-card__name { font-family: var(--font-display); font-size: 1.15rem; color: var(--cc-white); }
.material-card__abbrev { font-family: var(--font-mono); font-size: 0.75rem; color: var(--cc-gold); }
.material-card__desc { font-size: 0.9rem; color: var(--cc-text); line-height: 1.6; }

/* Infrastructure */
.infrastructure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-xl);
}

.infra-card {
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  padding: var(--space-2xl);
  text-align: center;
}

.infra-card__icon { font-size: 2rem; margin-bottom: var(--space-md); display: block; }
.infra-card__title { font-family: var(--font-display); font-size: 1.35rem; color: var(--cc-white); margin-bottom: var(--space-md); }
.infra-card__desc { font-size: 0.9rem; color: var(--cc-text); margin-bottom: var(--space-md); line-height: 1.6; }
.infra-card__detail { font-size: 0.75rem; color: var(--cc-gold); display: block; }

.patent-note { text-align: center; }
.patent-note__text { font-size: 0.75rem; color: var(--cc-text-muted); letter-spacing: 0.04em; }

/* ── 25. SUSTAINABILITY ───────────────────────────────────────────────── */

.eco-statement {
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.eco-statement__text {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--cc-white);
  font-style: italic;
  line-height: 1.4;
}

.eco-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-lg);
}

.eco-stat {
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  padding: var(--space-xl);
  text-align: center;
  border-top: 2px solid var(--cc-green);
}

.eco-stat__value { display: block; font-family: var(--font-mono); font-size: 2rem; color: var(--cc-white); font-weight: 500; }
.eco-stat__label { display: block; font-size: 0.8rem; color: var(--cc-text); margin-top: var(--space-xs); }
.eco-stat__desc { display: block; font-size: 0.7rem; color: var(--cc-text-muted); margin-top: var(--space-xs); }

.eco-block {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-2xl);
  align-items: start;
  padding: var(--space-3xl) 0;
}

.eco-block__icon { font-size: 2.5rem; line-height: 1; }
.eco-block__heading { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.25rem); color: var(--cc-white); margin-bottom: var(--space-xl); margin-top: var(--space-sm); }

.anti-gw-block {
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: var(--space-2xl);
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  overflow: hidden;
}

.anti-gw-block__content { padding: var(--space-3xl) var(--space-3xl) var(--space-3xl) 0; }
.anti-gw-block__heading { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.25rem); color: var(--cc-white); margin-bottom: var(--space-xl); }

.sweet-spot-cta {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.sweet-spot-cta__heading {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  color: var(--cc-white);
  margin-bottom: var(--space-xl);
  font-style: italic;
}

.sweet-spot-cta__body {
  color: var(--cc-text);
  margin-bottom: var(--space-2xl);
  font-size: 1.05rem;
  line-height: 1.7;
}

.sweet-spot-cta .btn + .btn { margin-left: var(--space-md); }

/* ── 26. CAREER / JOB LISTINGS ────────────────────────────────────────── */

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.benefit-card {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-md);
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  padding: var(--space-xl);
}

.benefit-card__tick { color: var(--cc-gold); font-size: 0.9rem; font-weight: 700; padding-top: 2px; }
.benefit-card__title { font-size: 0.95rem; color: var(--cc-white); font-weight: 500; margin-bottom: 4px; }
.benefit-card__desc { font-size: 0.85rem; color: var(--cc-text); }

.jobs-list { display: flex; flex-direction: column; gap: var(--space-2xl); }

.job-card {
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  overflow: hidden;
}

.job-card__header {
  display: grid;
  grid-template-columns: 1fr 4px;
  overflow: hidden;
}

.job-card__header-content { padding: var(--space-xl); }

.job-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  color: var(--cc-white);
  margin-bottom: var(--space-sm);
}

.job-card__meta {
  display: flex;
  gap: var(--space-lg);
  font-size: 0.75rem;
  color: var(--cc-text-muted);
  flex-wrap: wrap;
}

.job-card__body { padding: 0 var(--space-xl) var(--space-xl); }
.job-card__desc { margin-bottom: var(--space-xl); }
.job-card__section { margin-bottom: var(--space-xl); }
.job-card__section-heading { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cc-gold); margin-bottom: var(--space-sm); display: block; }
.job-card__footer { padding: var(--space-xl); border-top: 1px solid var(--cc-border); }

.initiative-apply {
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: 0;
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  overflow: hidden;
}

.initiative-apply__content { padding: var(--space-3xl); }
.initiative-apply__heading { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.25rem); color: var(--cc-white); margin-bottom: var(--space-md); }
.initiative-apply__body { color: var(--cc-text); margin-bottom: var(--space-xl); }

/* ── 27. CONTACT ──────────────────────────────────────────────────────── */

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

.contact-details__heading {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--cc-white);
  margin-bottom: var(--space-xl);
}

.contact-details__address { margin-bottom: var(--space-xl); }
.contact-details__address p { font-style: normal; color: var(--cc-text); line-height: 1.8; }

.contact-details__links { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: var(--space-xl); }

.contact-link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.contact-link:hover { color: var(--cc-white); }
.contact-link__icon { font-family: var(--font-mono); color: var(--cc-red); font-size: 1rem; width: 20px; }
.contact-link__value { font-size: 1rem; color: var(--cc-text); }

.contact-hours__heading { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cc-text-muted); margin-bottom: var(--space-sm); display: block; }

/* Map placeholder */
.map-placeholder {
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.map-placeholder__inner { text-align: center; z-index: 1; }
.map-placeholder__icon { font-size: 3rem; color: var(--cc-red); display: block; margin-bottom: var(--space-md); font-family: var(--font-mono); }
.map-placeholder__text { font-family: var(--font-mono); font-size: 0.85rem; color: var(--cc-text); margin-bottom: var(--space-xl); }
.map-placeholder__stripe { position: absolute; top: 0; left: 0; right: 0; height: 3px; }

/* Locations */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-xl);
}

.location-card {
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  position: relative;
  overflow: hidden;
  border-left: 3px solid var(--cc-red);
}

.location-card .cc-stripe-accent { display: none; }

.location-card__name { font-family: var(--font-display); font-size: 1.2rem; color: var(--cc-white); }
.location-card__address { font-style: normal; font-size: 0.8rem; color: var(--cc-text); }
.location-card__desc { font-size: 0.85rem; color: var(--cc-text-muted); margin-top: var(--space-xs); }

/* Experience block */
.experience-block {
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: 0;
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  overflow: hidden;
}

.experience-block__content { padding: var(--space-4xl); }
.experience-block__heading { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); color: var(--cc-white); margin-bottom: var(--space-xl); }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: var(--space-lg); }

.faq-item {
  border-bottom: 1px solid var(--cc-border);
  padding-bottom: var(--space-lg);
}

.faq-item__q { font-family: var(--font-display); font-size: 1.15rem; color: var(--cc-white); margin-bottom: var(--space-sm); }
.faq-item__a { font-size: 0.95rem; color: var(--cc-text); line-height: 1.7; }

/* ── 28. ARTICLE / BLOG ───────────────────────────────────────────────── */

.article-body { padding: var(--space-5xl) 0; }
.article-content { max-width: 720px; margin: 0 auto; }
.article-paragraph { margin-bottom: var(--space-xl); }
.article-image { margin: var(--space-3xl) 0; }
.article-image img { width: 100%; border: 1px solid var(--cc-border); }

.article-quote {
  margin: var(--space-3xl) 0;
  padding: var(--space-2xl);
  background: var(--cc-card);
  border-left: 4px solid var(--cc-red);
}

.article-quote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--cc-cream);
  margin-bottom: var(--space-md);
  line-height: 1.5;
}

.article-quote__author { font-size: 0.85rem; color: var(--cc-text-muted); font-family: var(--font-mono); }

.article-subheading {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--cc-white);
  margin: var(--space-3xl) 0 var(--space-lg);
}

.article-footer {
  margin-top: var(--space-4xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--cc-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.article-footer__meta { font-size: 0.75rem; color: var(--cc-text-muted); }

/* ── 29. CTA SECTIONS ─────────────────────────────────────────────────── */

.experience-cta {
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: 0;
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  border-left: none;
  overflow: hidden;
}

.experience-cta__content { padding: var(--space-4xl); }
.experience-cta__heading { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem); color: var(--cc-white); margin-bottom: var(--space-xl); }
.experience-cta__body { color: var(--cc-text); font-size: 1.05rem; line-height: 1.7; max-width: 600px; margin-bottom: var(--space-lg); }
.experience-cta__meta { font-size: 0.75rem; color: var(--cc-text-muted); margin-bottom: var(--space-xl); letter-spacing: 0.04em; }

.car-cta {
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: 0;
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  overflow: hidden;
}

.car-cta__content { padding: var(--space-4xl); }
.car-cta__model { font-size: 0.7rem; color: var(--cc-text-muted); letter-spacing: 0.1em; margin-bottom: var(--space-lg); display: block; }
.car-cta__price { display: flex; align-items: baseline; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.car-cta__price-label { font-size: 1rem; color: var(--cc-text-muted); }
.car-cta__price-value { font-size: 3rem; color: var(--cc-white); font-weight: 500; letter-spacing: -0.02em; }
.car-cta__price-note { font-size: 0.75rem; color: var(--cc-text-muted); }
.car-cta__production { font-size: 0.75rem; color: var(--cc-text-muted); margin-bottom: var(--space-xl); display: block; }
.car-cta__note { font-size: 0.9rem; color: var(--cc-text); max-width: 500px; margin-bottom: var(--space-2xl); line-height: 1.6; }
.car-cta__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; }

/* GDS note */
.gds-note {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-xl);
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
}

.gds-note__icon { font-size: 1.5rem; color: var(--cc-gold); }
.gds-note__text { font-size: 0.9rem; color: var(--cc-text); margin-bottom: var(--space-sm); }
.gds-note__link { font-size: 0.8rem; color: var(--cc-gold); text-decoration: none; letter-spacing: 0.04em; }

/* ── 30. FACTS GRID ───────────────────────────────────────────────────── */

.facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1px;
  background: var(--cc-border);
  border: 1px solid var(--cc-border);
}

.fact-item {
  background: var(--cc-card);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
}

.fact-item__value { display: block; font-family: var(--font-mono); font-size: 2.5rem; color: var(--cc-white); margin-bottom: var(--space-xs); }
.fact-item__label { font-size: 0.75rem; color: var(--cc-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* ── 31. PARTNERS ─────────────────────────────────────────────────────── */

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-xl);
}

.partner-card {
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  padding: var(--space-xl);
  border-left: 2px solid var(--cc-gold-muted);
}

.partner-card__name { font-family: var(--font-display); font-size: 1.15rem; color: var(--cc-white); margin-bottom: 4px; }
.partner-card__location { font-size: 0.7rem; color: var(--cc-gold); margin-bottom: var(--space-md); display: block; }
.partner-card__desc { font-size: 0.9rem; color: var(--cc-text); line-height: 1.6; }

/* ── 32. FOOTER ───────────────────────────────────────────────────────── */

.site-footer {
  background: var(--cc-dark);
  border-top: 1px solid var(--cc-border);
  margin-top: auto;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-3xl);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-4xl) var(--space-xl);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.footer-logo__monogram {
  width: 32px;
  height: 32px;
  background: var(--cc-red);
  color: var(--cc-white);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.footer-logo__wordmark {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--cc-white);
}

.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--cc-cream);
  margin-bottom: var(--space-lg);
}

.footer-address {
  font-size: 0.85rem;
  color: var(--cc-text-muted);
  line-height: 1.8;
  margin-bottom: var(--space-xl);
}

.footer-stripe-accent { height: 2px; width: 40px; }

.footer-heading {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cc-text-muted);
  margin-bottom: var(--space-lg);
}

.footer-links { list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); }

.footer-link {
  font-size: 0.9rem;
  color: var(--cc-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-link:hover { color: var(--cc-white); }

.footer-social { margin-top: var(--space-xl); }
.footer-social__note { font-size: 0.75rem; color: var(--cc-text-faint); font-style: italic; line-height: 1.5; }

.footer-bottom {
  border-top: 1px solid var(--cc-border);
}

.footer-bottom__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-xl);
}

.footer-copy { font-size: 0.75rem; color: var(--cc-text-faint); }

.footer-legal { display: flex; gap: var(--space-lg); list-style: none; }
.footer-legal__link { font-size: 0.75rem; color: var(--cc-text-faint); transition: color var(--transition-fast); }
.footer-legal__link:hover { color: var(--cc-text); }

.footer-gds-note { font-family: var(--font-mono); font-size: 0.65rem; color: var(--cc-text-faint); letter-spacing: 0.04em; }

/* ── 33. MESSAGES ─────────────────────────────────────────────────────── */

.messages-bar { position: fixed; top: var(--nav-height); left: 0; right: 0; z-index: 999; }
.message { padding: var(--space-md) var(--space-xl); font-size: 0.9rem; }
.message--success { background: var(--cc-green); color: var(--cc-white); }
.message--error   { background: var(--cc-red-dark); color: var(--cc-white); }
.message--warning { background: var(--cc-gold-muted); color: var(--cc-white); }
.message--info    { background: var(--cc-card); color: var(--cc-text); border: 1px solid var(--cc-border); }

/* ── 34. ERROR PAGES ──────────────────────────────────────────────────── */

.error-page {
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5xl) 0;
}

.error-page__inner { text-align: center; max-width: 600px; }
.error-page__stripe { width: 60px; height: 3px; margin: 0 auto var(--space-2xl); }
.error-page__code { display: block; font-size: 6rem; color: var(--cc-red); line-height: 1; margin-bottom: var(--space-lg); }
.error-page__heading { font-family: var(--font-display); font-size: 2.5rem; color: var(--cc-white); margin-bottom: var(--space-lg); }
.error-page__sub { color: var(--cc-text); margin-bottom: var(--space-2xl); line-height: 1.7; }
.error-page__actions { display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap; }

/* ── 35. UTILITY CLASSES ──────────────────────────────────────────────── */

.text-muted  { color: var(--cc-text-muted); }
.text-white  { color: var(--cc-white); }
.text-gold   { color: var(--cc-gold); }
.text-red    { color: var(--cc-red); }
.text-cream  { color: var(--cc-cream); }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.d-none       { display: none; }
.d-block      { display: block; }
.d-flex       { display: flex; }
.d-grid       { display: grid; }

.mt-lg        { margin-top: var(--space-lg); }
.mt-xl        { margin-top: var(--space-xl); }
.mt-2xl       { margin-top: var(--space-2xl); }
.mb-lg        { margin-bottom: var(--space-lg); }
.mb-xl        { margin-bottom: var(--space-xl); }

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

/* ── 36. ANIMATIONS ───────────────────────────────────────────────────── */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-slower), transform var(--transition-slower);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes stripePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* ── 37. RESPONSIVE — TABLET (≤ 1024px) ──────────────────────────────── */

@media (max-width: 1024px) {
  :root { --nav-height: 64px; }

  .nav-links {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 13, 13, 0.98);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-xl);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    z-index: 999;
  }

  .nav-links.is-open {
    transform: translateX(0);
  }

  .nav-link {
    font-size: 1.25rem;
    letter-spacing: 0.08em;
  }

  .nav-cta { display: none; }
  .nav-hamburger { display: flex; }

  .model-card { grid-template-columns: 1fr; }
  .model-card__visual { min-height: 300px; }

  .featured-news { grid-template-columns: 1fr; }
  .featured-news__media { min-height: 300px; }

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

  .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }

  .philosophy-block { grid-template-columns: 3px 1fr; }

  .feature-block { grid-template-columns: 1fr; gap: var(--space-xl); }
  .feature-block__header { position: static; }
}

/* ── 38. RESPONSIVE — MOBILE (≤ 768px) ───────────────────────────────── */

@media (max-width: 768px) {
  :root {
    --space-4xl: 4rem;
    --space-5xl: 5rem;
  }

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

  .hero__headline { font-size: clamp(2.5rem, 10vw, 4rem); }
  .hero__actions  { flex-direction: column; }

  .stats-bar__inner { justify-content: center; }
  .stat-divider { display: none; }

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

  .specs-grid--compact { grid-template-columns: repeat(2, 1fr); }
  .specs-grid--full    { grid-template-columns: repeat(2, 1fr); }

  .comparison-table th,
  .comparison-table td { padding: var(--space-sm) var(--space-md); font-size: 0.8rem; }

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

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

  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom__inner { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  .footer-legal { flex-wrap: wrap; gap: var(--space-sm); }

  .car-cta__price-value { font-size: 2rem; }
  .car-cta__actions { flex-direction: column; }

  .eco-block { grid-template-columns: 1fr; }
  .eco-block__icon { display: none; }

  .experience-block { grid-template-columns: 1fr; }
  .experience-block .cc-stripe-accent { height: 4px; }

  .car-cta { grid-template-columns: 1fr; }
  .car-cta .cc-stripe-accent { height: 3px; }

  .experience-cta { grid-template-columns: 1fr; }
  .experience-cta .cc-stripe-accent { height: 3px; }

  .anti-gw-block { grid-template-columns: 1fr; }
  .anti-gw-block .cc-stripe-accent { height: 3px; }

  .initiative-apply { grid-template-columns: 1fr; }
  .initiative-apply .cc-stripe-accent { height: 3px; }

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

  .tech-statement { grid-template-columns: 1fr; }
  .tech-statement .cc-stripe-accent { display: none; }

  .philosophy-block { grid-template-columns: 1fr; }
  .philosophy-block__stripe { display: none; }

  .timeline { padding-left: var(--space-xl); }
  .timeline::before { left: 0; }
  .timeline-item__marker { left: calc(-1 * var(--space-xl) - 4px); }

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

  .job-card__meta { flex-direction: column; gap: var(--space-xs); }
}

/* ── 39. RESPONSIVE — LARGE (≥ 1440px) ───────────────────────────────── */

@media (min-width: 1440px) {
  .cars-grid { grid-template-columns: repeat(3, 1fr); }
  .news-grid  { grid-template-columns: repeat(3, 1fr); }
}

/* ── 40. PRINT ────────────────────────────────────────────────────────── */

@media print {
  .site-nav,
  .site-footer,
  .nav-hamburger,
  .btn,
  .animate-on-scroll { display: none !important; }
  body { background: white; color: black; }
  .hero, .page-hero { min-height: auto; }
}

/* ── 41. LIGHTBOX ─────────────────────────────────────────────────────── */

.gallery-item__trigger {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
}

.gallery-item__trigger:focus-visible {
  outline: 2px solid var(--cc-red);
  outline-offset: 2px;
}

.gallery-item__zoom-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  font-size: 2rem;
  color: var(--cc-white);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.gallery-item__trigger:hover .gallery-item__zoom-hint,
.gallery-item__trigger:focus-visible .gallery-item__zoom-hint {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.gallery-item__trigger:hover .gallery-item__image {
  transform: scale(1.04);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.lightbox[hidden] { display: none; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  cursor: zoom-out;
}

.lightbox__close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  z-index: 1;
  background: none;
  border: 1px solid var(--cc-border);
  color: var(--cc-text);
  font-size: 1.75rem;
  line-height: 1;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.lightbox__close:hover {
  color: var(--cc-white);
  border-color: var(--cc-red);
}

.lightbox__figure {
  position: relative;
  z-index: 1;
  max-width: min(1400px, 95vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.lightbox__img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  display: block;
  box-shadow: 0 24px 80px rgba(0,0,0,0.8);
}

.lightbox__caption {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--cc-text-muted);
  text-transform: uppercase;
}

/* ── 42. TECH & ECO INLINE IMAGES ─────────────────────────────────────── */

.tech-image,
.eco-image {
  margin: var(--space-2xl) 0;
  overflow: hidden;
}

.tech-image__img,
.eco-image__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 500px;
}