:root {
  /* Tokens — Colors (ferrari-DESIGN.md) */
  --color-rosso-corsa: #da291c;
  --color-rosso-scuro: #9d2211;
  --color-bianco-ferrari: #ffffff;
  --color-carbone-nero: #000000;
  --color-notte-profonda: #181818;
  --color-grafite: #303030;
  --color-fumo: #8f8f8f;
  --color-piombo: #666666;
  --color-argento-chiaro: #d2d2d2;
  --color-velo-di-luce: #f7f7f7;
  --color-cemento: #ebebeb;

  /* Tokens — Typography (FerrariSans -> Inter, weights 400 & 500, inverse tracking-size relationship) */
  --font-ferrarisans: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --text-micro: 10px;
  --text-caption: 11px;
  --text-body-sm: 12px;
  --text-body: 13px;
  --text-title: 16px;
  --leading-whisper: 1.78;

  /* Spacing Scale */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-10: 10px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-44: 44px;
  --spacing-60: 60px;
  --spacing-96: 96px;

  /* Radii: 0px everywhere except 9999px Category Pill */
  --radius-zero: 0px;
  --radius-pill: 9999px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-carbone-nero);
  color: var(--color-bianco-ferrari);
  font-family: var(--font-ferrarisans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-whisper);
  letter-spacing: 0.022em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a {
  color: var(--color-bianco-ferrari);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* Rosso Corsa (#da291c) used exclusively for interactive hover, focus, active states */
a:hover,
a:focus-visible {
  color: var(--color-rosso-corsa);
}

a:focus-visible {
  outline: 1px solid var(--color-rosso-corsa);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: var(--spacing-16);
  background: var(--color-notte-profonda);
  color: var(--color-bianco-ferrari);
  border: 1px solid var(--color-grafite);
  padding: var(--spacing-10) var(--spacing-20);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.083em;
  z-index: 200;
}

.skip-link:focus {
  top: var(--spacing-16);
}

.rail {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--spacing-32);
}

/* Ghost Navigation Bar — Flat transparent bar floating over hero void */
.ghost-header {
  position: relative;
  z-index: 20;
  background: var(--color-carbone-nero);
  border-bottom: 1px solid var(--color-grafite);
}

.ghost-header-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--spacing-20) var(--spacing-32);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-24);
  flex-wrap: wrap;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-16);
  font-size: var(--text-body-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.083em;
}

.ghost-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
  flex-wrap: wrap;
}

.ghost-nav-link {
  font-size: var(--text-body-sm);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.083em;
  padding: 5px 0;
  border-bottom: 1px solid transparent;
}

.ghost-nav-link:hover {
  color: var(--color-rosso-corsa);
  border-bottom-color: var(--color-rosso-corsa);
}

/* Category Pill (Full Radius 9999px — the single rounded element in ferrari-DESIGN.md) */
.category-pill {
  display: inline-block;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-bianco-ferrari);
  padding: 3px 12px;
  font-size: var(--text-micro);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.091em;
  color: var(--color-bianco-ferrari);
  line-height: 1.5;
}

/* CTA Arrow Link — Uppercase 11-12px text with directional arrow, zero button chrome */
.cta-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-10);
  font-size: var(--text-body-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.083em;
  color: var(--color-bianco-ferrari);
  padding: var(--spacing-6) 0;
  border-bottom: 1px solid var(--color-grafite);
}

.cta-arrow-link:hover {
  color: var(--color-rosso-corsa);
  border-bottom-color: var(--color-rosso-corsa);
}

/* Dark Cinematic Hero Panel — 100vw full-bleed #000000 void */
.hero-void {
  background: var(--color-carbone-nero);
  width: 100%;
  text-align: center;
}

.full-bleed-frame {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--color-carbone-nero);
}

.full-bleed-frame img {
  display: block;
  width: 100%;
  height: clamp(380px, 62vw, 760px);
  object-fit: cover;
  border-radius: var(--radius-zero);
}

.hero-whisper-panel {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--spacing-60) var(--spacing-24) var(--spacing-60);
  text-align: center;
}

.whisper-caption {
  display: block;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.091em;
  color: var(--color-fumo);
  margin: var(--spacing-16) 0 var(--spacing-10);
}

.whisper-headline {
  font-size: var(--text-title);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.028em;
  line-height: 1.5;
  color: var(--color-bianco-ferrari);
  margin: 0 0 var(--spacing-16);
}

.whisper-body {
  font-size: var(--text-body);
  color: var(--color-fumo);
  line-height: var(--leading-whisper);
  letter-spacing: 0.015em;
  margin: 0 0 var(--spacing-24);
}

.cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-32);
  flex-wrap: wrap;
}

/* Carousel Indicator Dots (8px circles, #8f8f8f inactive, #da291c active) */
.indicator-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-10);
  margin-top: var(--spacing-32);
}

.dot {
  width: 8px;
  height: 8px;
  background: var(--color-fumo);
  display: inline-block;
}

.dot.active {
  background: var(--color-rosso-corsa);
}

/* Hairline Divider — 1px solid #303030 */
.hairline {
  border: 0;
  border-top: 1px solid var(--color-grafite);
  margin: 0;
  width: 100%;
}

/* Void & Night Sections */
.void-section {
  background: var(--color-carbone-nero);
  padding: var(--spacing-96) 0;
}

.night-section {
  background: var(--color-notte-profonda);
  padding: var(--spacing-96) 0;
}

.section-header-centered {
  max-width: 720px;
  margin: 0 auto var(--spacing-60);
  text-align: center;
}

/* Featured Content Cards — Flat rectangular blocks on #181818 or #000000, 0px radius */
.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-16);
}

.card-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-16);
}

.featured-card {
  background: var(--color-notte-profonda);
  border: 1px solid var(--color-grafite);
  border-radius: var(--radius-zero);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.night-section .featured-card {
  background: var(--color-carbone-nero);
}

.featured-card img {
  display: block;
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: var(--radius-zero);
}

.card-copy {
  padding: var(--spacing-24) var(--spacing-32);
}

.card-title {
  font-size: var(--text-title);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--color-bianco-ferrari);
  margin: var(--spacing-10) 0;
}

.card-desc {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.083em;
  color: var(--color-fumo);
  line-height: var(--leading-whisper);
  margin: 0;
}

/* Service Matrix — Hairline Table */
.service-matrix {
  border-top: 1px solid var(--color-grafite);
  margin-top: var(--spacing-44);
}

.matrix-row {
  display: grid;
  grid-template-columns: 0.8fr 1.6fr auto;
  gap: var(--spacing-24);
  align-items: center;
  padding: var(--spacing-24) 0;
  border-bottom: 1px solid var(--color-grafite);
}

.matrix-name {
  font-size: var(--text-title);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.028em;
}

.matrix-detail {
  font-size: var(--text-body-sm);
  color: var(--color-fumo);
  text-transform: uppercase;
  letter-spacing: 0.083em;
}

/* Location Split */
.visit-split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--spacing-32);
  align-items: stretch;
}

.visit-panel {
  background: var(--color-notte-profonda);
  border: 1px solid var(--color-grafite);
  padding: var(--spacing-44) var(--spacing-32);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.meta-item {
  padding: var(--spacing-16) 0;
  border-bottom: 1px solid var(--color-grafite);
}

.meta-label {
  display: block;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.091em;
  color: var(--color-fumo);
  margin-bottom: var(--spacing-4);
}

.meta-val {
  font-size: var(--text-title);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.028em;
}

.map-void {
  border: 1px solid var(--color-grafite);
  background: var(--color-notte-profonda);
  min-height: 420px;
}

.map-void iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  display: block;
}

/* Footer Block (#181818 Notte Profonda, 11-12px uppercase wide tracking) */
.ferrari-footer {
  background: var(--color-notte-profonda);
  border-top: 1px solid var(--color-grafite);
  padding: var(--spacing-60) 0;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-32);
}

.footer-col h2 {
  font-size: var(--text-body-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.083em;
  color: var(--color-bianco-ferrari);
  margin: 0 0 var(--spacing-16);
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
}

.footer-list li,
.footer-list a {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.091em;
  color: var(--color-fumo);
}

.footer-list a:hover {
  color: var(--color-rosso-corsa);
}

.footer-legal {
  margin-top: var(--spacing-60);
  padding-top: var(--spacing-24);
  border-top: 1px solid var(--color-grafite);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.091em;
  color: var(--color-piombo);
}

@media (max-width: 960px) {
  .card-grid-3,
  .card-grid-2,
  .visit-split,
  .footer-cols,
  .matrix-row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    transition: none !important;
  }
}