/* ==========================================================================
   GARI — GARI 44 e GARI Tender 700
   Mobile-first, CSS custom properties, nessuna dipendenza.
   Identità: rosso GARI #A71817 (dal logo) + neri, antracite, bianco, grigio tecnico.
   Tipografia: Barlow Condensed (titoli, numeri) + Barlow (testi).
   Indice:
   1. Token   2. Font e reset   3. Utility e bottoni   4. Header e navigazione
   5. Hero   6. Sezioni: struttura comune   7. Progetto · Design · Prestazioni · A bordo
   8. Galleria · Interni · Configurazioni · Dotazioni · Scheda tecnica
   9. Gamma · Azienda · Contatti e modulo   10. Footer · Lightbox   11. Motion
   ========================================================================== */

/* 1. TOKEN ---------------------------------------------------------------- */
:root {
  --red: #a71817;            /* rosso ufficiale GARI, campionato dal logo */
  --red-hover: #c11d1b;      /* variante più chiara per hover */
  --red-active: #8c1413;     /* variante più scura per active */
  --red-text: #f0524c;       /* variante chiara SOLO per testo piccolo su fondo scuro (contrasto ≥ 4.5:1) */

  --black: #0a0b0d;
  --graphite: #14171b;
  --graphite-2: #1d2126;
  --line-dark: rgba(255, 255, 255, .12);

  --white: #ffffff;
  --light: #f1f2f3;          /* grigio tecnico chiaro */
  --light-2: #e4e6e9;
  --line-light: rgba(10, 11, 13, .12);

  --steel: #98a1aa;          /* testo secondario su scuro */
  --slate: #56606a;          /* testo secondario su chiaro */
  --text-on-dark: #f4f5f6;
  --text-on-light: #111316;

  --font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --container: 82rem;
  --container-wide: 100rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  --radius: 2px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .7s;
  --header-h: 4.5rem;
}

/* 2. FONT E RESET --------------------------------------------------------- */
@font-face { font-family: "Barlow Condensed"; src: url("../assets/fonts/barlow-condensed-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../assets/fonts/barlow-condensed-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../assets/fonts/barlow-condensed-700-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../assets/fonts/barlow-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../assets/fonts/barlow-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../assets/fonts/barlow-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6;
  color: var(--text-on-dark); background: var(--black);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: var(--header-h); }

:focus-visible { outline: 2px solid var(--red-text); outline-offset: 3px; }
.section--light :focus-visible, .hero--light :focus-visible { outline-color: var(--red); }
::selection { background: var(--red); color: #fff; }

/* Barra di avanzamento scroll (JS) */
.scroll-progress { position: fixed; top: 0; left: 0; z-index: 120; width: 100%; height: 2px; background: var(--red); transform-origin: left; transform: scaleX(0); pointer-events: none; }

/* 3. UTILITY E BOTTONI ---------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -100%; left: 1rem; z-index: 200; padding: .75rem 1rem; background: var(--red); color: #fff; font-weight: 600; }
.skip-link:focus { top: 1rem; }

/* Bottoni: rettangolari, condensed, con freccia che scorre */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 3.1rem; padding: .85rem 1.6rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: var(--radius);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn::after { content: "→"; font-family: var(--font-body); font-weight: 400; transition: transform .3s var(--ease-out); }
.btn:hover::after { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--red); color: #fff; border-color: var(--red); }
.btn--primary:hover { background: var(--red-hover); border-color: var(--red-hover); box-shadow: 0 10px 30px -12px rgba(167, 24, 23, .8); }
.btn--primary:active { background: var(--red-active); border-color: var(--red-active); }
.btn--ghost { color: var(--text-on-dark); border-color: rgba(255, 255, 255, .5); }
.btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.btn--dark { background: var(--black); color: #fff; border-color: var(--black); }
.btn--dark:hover { background: var(--red); border-color: var(--red); }

.eyebrow { font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: .22em; text-transform: uppercase; color: var(--red-text); }
.eyebrow__sep { opacity: .45; margin-inline: .3em; }

/* Reveal on scroll (gestito da main.js) */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* 4. HEADER --------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
}
.site-header.is-scrolled, .site-header--solid {
  background: rgba(10, 11, 13, .86); border-bottom-color: var(--line-dark);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }

.brand { display: inline-flex; align-items: baseline; gap: .55rem; }
.brand__logo { width: auto; height: 1.55rem; }
.brand__model { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: .04em; line-height: 1; }
.brand__model--text { font-size: 1rem; letter-spacing: .18em; text-transform: uppercase; align-self: center; }

/* Il pannello mobile ha un'altezza esplicita: l'header usa backdrop-filter e
   diventerebbe il blocco contenitore degli elementi fixed, schiacciando il menu. */
.nav {
  position: fixed; inset: var(--header-h) 0 auto 0; height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column; justify-content: flex-start; gap: 2rem;
  padding: clamp(1.5rem, 6vh, 3rem) var(--gutter) 2rem;
  background: var(--black);
  transform: translateX(100%); visibility: hidden;
  transition: transform .45s var(--ease-out), visibility 0s linear .45s;
  overflow-y: auto;
}
.nav.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.nav__list { display: grid; gap: 0; }
.nav__link {
  display: flex; align-items: center; gap: .9rem; padding: .45rem 0;
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 4.6vw, 2rem); text-transform: uppercase; letter-spacing: .02em;
  border-bottom: 1px solid var(--line-dark);
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.nav__link::before { content: ""; width: 0; height: 2px; background: var(--red); transition: width .3s var(--ease-out); }
.nav__link:hover, .nav__link.is-active { color: var(--red-text); }
.nav__link:hover::before, .nav__link.is-active::before { width: 1.5rem; }
.nav__cta { margin-top: 1.25rem; align-self: flex-start; }

/* Voce di menu con logo: collegamento all'altro modello della gamma */
.nav__model { display: inline-flex; align-items: baseline; gap: .45rem; padding: .75rem 0; border-bottom: 1px solid var(--line-dark); transition: opacity .25s var(--ease); }
.nav__model img { width: auto; height: 1.6rem; }
.nav__model span { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: .12em; text-transform: uppercase; }
.nav__model:hover { opacity: .8; }

.nav-toggle { position: relative; width: 2.75rem; height: 2.75rem; display: grid; place-content: center; gap: 6px; }
.nav-toggle__bar { display: block; width: 26px; height: 2px; background: currentColor; transition: transform .35s var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child { transform: translateY(-4px) rotate(-45deg); }
body.nav-locked { overflow: hidden; }
/* Con il menu aperto l'header non deve creare un blocco contenitore */
body.nav-locked .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--black); }

html:not(.js) .nav { position: static; inset: auto; height: auto; transform: none; visibility: visible; padding: 1rem 0; }
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .site-header { position: static; height: auto; background: var(--black); }
html:not(.js) .site-header__inner { flex-wrap: wrap; padding-block: 1rem; }

@media (min-width: 80em) {
  html:not(.js) .site-header { position: fixed; height: var(--header-h); background: rgba(10, 11, 13, .86); }
  html:not(.js) .site-header__inner { flex-wrap: nowrap; padding-block: 0; }
  html:not(.js) .nav { padding: 0; }
  /* Barra fluida: spaziature e corpo scalano con la larghezza, così il menu
     resta su una riga dentro il contenitore da 1280 px in su. */
  .nav { position: static; inset: auto; height: auto; flex-direction: row; align-items: center; gap: clamp(.9rem, 1.4vw, 2rem); margin-left: clamp(1.25rem, 2.4vw, 2.5rem); padding: 0; background: none; transform: none; visibility: visible; transition: none; overflow: visible; }
  .nav__list { display: flex; gap: clamp(.7rem, 1.15vw, 1.7rem); }
  .nav__item--secondary { display: none; }
  .nav__link {
    position: relative; display: block; padding: .3rem 0; white-space: nowrap;
    font-family: var(--font-display); font-weight: 500; font-size: clamp(.84rem, .95vw, 1rem); letter-spacing: clamp(.05em, .08vw, .1em); text-transform: uppercase; border: 0;
  }
  .nav__link::before { display: none; }
  .nav__link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 2px; background: var(--red); transition: right .3s var(--ease-out); }
  .nav__link:hover::after, .nav__link.is-active::after { right: 0; }
  .nav__link:hover, .nav__link.is-active { color: var(--text-on-dark); }
  .nav__cta { margin: 0; min-height: 2.6rem; padding: .55rem clamp(.75rem, 1vw, 1.1rem); font-size: clamp(.8rem, .9vw, .9rem); white-space: nowrap; }
  .nav__item--model { display: flex; align-items: center; flex: 0 0 auto; padding-left: clamp(.7rem, 1.15vw, 1.7rem); border-left: 1px solid var(--line-dark); white-space: nowrap; }
  .nav__list > li { flex: 0 0 auto; }
  .nav__model { padding: 0; border: 0; }
  .nav__model img { height: 1.05rem; }
  .nav__model span { font-size: clamp(.8rem, .9vw, .95rem); }
  .nav-toggle { display: none; }
}

/* 5. HERO ----------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; min-height: 100svh; overflow: hidden; }
.hero__media { position: relative; z-index: -1; height: 66svh; min-height: 24rem; overflow: hidden; }  /* clip: la parallasse sposta l'immagine */
.hero__media picture { height: 100%; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; will-change: transform; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,11,13,.6) 0%, rgba(10,11,13,.05) 30%, rgba(10,11,13,.1) 55%, var(--black) 100%); }
.hero__content { position: relative; margin-top: -22svh; padding-bottom: 2.5rem; }

@keyframes hero-in { from { opacity: .3; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero__content > *, .hero__stats { animation: hero-in .9s var(--ease-out) both; }
.hero__title { animation-delay: .08s; }
.hero__lead { animation-delay: .18s; }
.hero__actions { animation-delay: .28s; }
.hero__stats { animation-delay: .45s; }

.hero__title {
  margin-top: .9rem;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: .92; letter-spacing: -.005em;
  font-size: clamp(3.1rem, 11vw, 8.2rem);
  text-wrap: balance;
}
.hero__title em { font-style: normal; color: var(--red-text); }
.hero__title--red { color: var(--red); text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.hero__content .eyebrow { text-shadow: 0 1px 14px rgba(10, 11, 13, .75); }
.hero--light .hero__content .eyebrow { text-shadow: none; }
.hero--light .hero__title--red { text-shadow: none; }
.hero__lead { max-width: 38rem; margin-top: 1.4rem; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.55; color: rgba(244, 245, 246, .85); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.hero__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2rem; padding-block: 1.5rem 2.5rem; border-top: 1px solid var(--line-dark); }
.stat dt { font-family: var(--font-display); font-size: .8rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--steel); }
.stat dd { margin-top: .2rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.stat dd small { font-size: .45em; font-weight: 500; color: var(--red-text); margin-left: .15em; letter-spacing: .05em; }

.hero__scroll { position: absolute; right: var(--gutter); bottom: 2.75rem; width: 2px; height: 4rem; background: var(--line-dark); display: none; }
.hero__scroll span { position: absolute; inset: 0 0 auto 0; height: 40%; background: var(--red); animation: scroll-hint 2.2s var(--ease) infinite; }
@keyframes scroll-hint { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(250%); } }

@media (min-width: 48em) {
  .hero { display: grid; grid-template-rows: 1fr auto auto; padding-top: var(--header-h); }
  .hero__media { position: absolute; inset: 0; height: auto; min-height: 0; }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(10,11,13,.55) 0%, rgba(10,11,13,.1) 35%, rgba(10,11,13,.15) 65%, rgba(10,11,13,.94) 100%),
      linear-gradient(90deg, rgba(10,11,13,.6) 0%, rgba(10,11,13,0) 62%);
  }
  .hero__content { align-self: end; margin-top: 0; padding-block: clamp(3rem, 8vh, 6rem) 2.5rem; }
  .hero__stats { grid-template-columns: repeat(4, 1fr); gap: 0; padding-block: 0 2.5rem; }
  .hero__stats .stat { padding: 1.4rem 1.5rem 0 0; border-top: 2px solid var(--line-dark); margin-right: 1.5rem; }
  .hero__stats .stat:first-child { border-top-color: var(--red); }
  .hero__scroll { display: block; }
}

/* Hero chiaro: render in studio su fondo bianco (Tender 700) */
.hero--light { background: var(--white); color: var(--text-on-light); }
.hero--light .hero__img { object-position: 60% 55%; }
.hero--light .hero__scrim { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 55%, #fff 100%); }
.hero--light .hero__lead { color: var(--slate); }
.hero--light .eyebrow, .hero--light .hero__title em { color: var(--red); }
.hero--light .btn--ghost { color: var(--text-on-light); border-color: rgba(10, 11, 13, .4); }
.hero--light .btn--ghost:hover { border-color: var(--black); background: rgba(10, 11, 13, .05); }
.hero--light .hero__stats { border-top-color: var(--line-light); }
.hero--light .stat dt { color: var(--slate); }
.hero--light .stat dd { font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.1; }
.hero--light .hero__scroll { background: var(--line-light); }
@media (min-width: 48em) {
  .hero--light .hero__media { inset: var(--header-h) 0 0 34%; }
  .hero--light .hero__img { object-fit: contain; object-position: 100% 42%; }
  .hero--light .hero__title { font-size: clamp(2.8rem, 7vw, 6rem); }
  .hero--light .hero__scrim {
    background:
      linear-gradient(90deg, #fff 0%, rgba(255,255,255,.92) 32%, rgba(255,255,255,0) 60%),
      linear-gradient(180deg, rgba(255,255,255,0) 60%, #fff 100%);
  }
  .hero--light .hero__stats .stat { border-top-color: var(--line-light); }
  .hero--light .hero__stats .stat:first-child { border-top-color: var(--red); }
}
@media (min-width: 64em) { .hero--light .hero__media { inset: var(--header-h) 0 0 40%; } }

/* 6. SEZIONI: STRUTTURA COMUNE -------------------------------------------- */
.section { position: relative; padding-block: var(--section-y); }
.section--dark { background: var(--black); color: var(--text-on-dark); }
.section--dark + .section--dark { border-top: 1px solid var(--line-dark); }
.section--light { background: var(--light); color: var(--text-on-light); }
.section--paper { background: var(--light-2); }
.section--warm { background: var(--graphite); }

.section__head { max-width: 64rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__index { display: flex; align-items: center; gap: .8rem; font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: .22em; text-transform: uppercase; color: var(--red-text); }
.section--light .section__index { color: var(--red); }
.section__index span { color: inherit; opacity: .9; }
.section__index::before { content: ""; width: 2rem; height: 2px; background: currentColor; }
.section__title {
  margin-top: 1rem;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase; line-height: .95; letter-spacing: -.005em;
  font-size: clamp(2.5rem, 6vw, 4.8rem);
  text-wrap: balance;
}
.section__intro { margin-top: 1.25rem; max-width: 38rem; font-size: 1.08rem; line-height: 1.6; }
.section--light .section__intro { color: var(--slate); }
.section--dark .section__intro { color: var(--steel); }
.section__note { margin-top: 1.5rem; font-size: .85rem; color: var(--steel); }

@media (min-width: 64em) {
  .section__head--split { max-width: none; display: grid; grid-template-columns: 1.25fr 1fr; align-items: end; gap: 3rem; }
  .section__head--split .section__intro { margin-top: 0; justify-self: end; padding-bottom: .4rem; }
}

/* 7a. PROGETTO ------------------------------------------------------------ */
.intro-grid { display: grid; gap: 1.5rem; }
.lead { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.3; letter-spacing: .005em; }
.intro-grid__text p + p { margin-top: 1.25rem; color: var(--steel); }
.pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1.25rem; margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--line-dark); }
.pillars li { display: grid; gap: .3rem; padding-left: .9rem; border-left: 2px solid var(--red); }
.pillars strong { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.pillars span { font-size: .9rem; color: var(--steel); line-height: 1.45; }
.intro-grid__media { overflow: hidden; border-radius: var(--radius); background: var(--graphite); }
.intro-grid__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; transition: transform 1.2s var(--ease-out); }
.intro-grid__media:hover img { transform: scale(1.04); }
.intro-grid__media--light, .feature__media--light { background: var(--white); }

@media (min-width: 64em) {
  .intro-grid { grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto; gap: 2rem; }
  .intro-grid__text { grid-column: 1 / 6; grid-row: 1 / 3; align-self: start; padding-right: 2rem; }
  .intro-grid__media--a { grid-column: 6 / 13; grid-row: 1; }
  .intro-grid__media--b { grid-column: 8 / 13; grid-row: 2; }
}

/* 7b. DESIGN -------------------------------------------------------------- */
.profile { margin-block: 1rem 2rem; }
.profile img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; max-height: 70vh; }
.profile__caption { display: flex; justify-content: space-between; margin-top: .75rem; font-family: var(--font-display); font-weight: 500; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--slate); }
.tick { position: relative; padding-top: .6rem; }
.tick::before { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: .45rem; background: var(--red); }
.tick--mid::before { left: 50%; }
.tick:last-child::before { left: auto; right: 0; }

.feature-grid { display: grid; gap: 2.5rem 2rem; margin-top: 3rem; }
.feature__media { overflow: hidden; border-radius: var(--radius); background: var(--light-2); }
.feature__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.feature:hover .feature__media img { transform: scale(1.05); }
.feature h3 { margin-top: 1.25rem; font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; }
.feature h3::before { content: ""; display: block; width: 2rem; height: 2px; margin-bottom: .8rem; background: var(--red); }
.feature p { margin-top: .6rem; color: var(--slate); font-size: .98rem; }

.materials { display: flex; flex-wrap: wrap; gap: .75rem 2.25rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-light); font-family: var(--font-display); font-weight: 500; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.materials li { display: inline-flex; align-items: center; gap: .7rem; }
.materials li::before { content: ""; width: .6rem; height: 2px; background: var(--red); }

@media (min-width: 48em) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }

/* 7c. PRESTAZIONI --------------------------------------------------------- */
.perf { isolation: isolate; overflow: hidden; }
.perf__media { position: absolute; inset: 0; z-index: -1; }
.perf__media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 45%; }
.perf__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,11,13,.95) 0%, rgba(10,11,13,.55) 40%, rgba(10,11,13,.92) 100%), linear-gradient(90deg, rgba(10,11,13,.85) 0%, rgba(10,11,13,.55) 45%, rgba(10,11,13,.1) 100%); }
.perf .section__head { margin-bottom: 2.5rem; }

.gauges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
.gauge { position: relative; padding: 1.5rem 1.25rem 1.4rem; background: rgba(10, 11, 13, .74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color .3s var(--ease); }
.gauge::before { content: ""; position: absolute; left: 1.25rem; top: 0; width: 1.5rem; height: 2px; background: var(--red); }
.gauge:hover { background: rgba(20, 23, 27, .9); }
.gauge__value { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1; font-variant-numeric: tabular-nums; }
.gauge__value small { font-size: .45em; font-weight: 500; color: var(--red-text); letter-spacing: .06em; }
.gauge__label { margin-top: .6rem; font-size: .84rem; letter-spacing: .04em; color: var(--steel); }
.perf__note { margin-top: 1rem; font-size: .82rem; color: var(--steel); }

.perf__aside { width: min(100% - 2 * var(--gutter), var(--container)); margin: 3rem auto 0; }
.perf__aside img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); }
.perf__aside figcaption { margin-top: .6rem; font-family: var(--font-display); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }

@media (min-width: 48em) { .gauges { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64em) {
  .perf__content .section__head, .gauges, .perf__note { max-width: 60%; }
  .perf__aside { display: grid; grid-template-columns: 1fr; margin-top: 4rem; }
  .perf__aside img { max-width: 34vw; margin-left: auto; }
  .perf__aside figcaption { text-align: right; }
}

/* 7d. A BORDO ------------------------------------------------------------- */
.story { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.story__row { display: grid; gap: 1.25rem; align-items: center; }
.story__media { overflow: hidden; border-radius: var(--radius); background: var(--light-2); }
.story__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.story__row:hover .story__media img { transform: scale(1.03); }
.story__text h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
.story__text h3::before { content: ""; display: block; width: 3rem; height: 2px; margin-bottom: 1rem; background: var(--red); }
.story__text p { margin-top: .85rem; color: var(--slate); max-width: 32rem; }

@media (min-width: 64em) {
  .story__row { grid-template-columns: 7fr 5fr; gap: 3.5rem; }
  .story__row--reverse .story__media { order: 2; }
  .story__row--reverse .story__text { order: 1; justify-self: end; text-align: right; }
  .story__row--reverse .story__text h3::before { margin-left: auto; }
}

/* 8a. GALLERIA ------------------------------------------------------------ */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 38vw; grid-auto-flow: dense; gap: .5rem; }
.gallery__item { overflow: hidden; background: var(--graphite); border-radius: var(--radius); }
.gallery__item--wide { grid-column: span 2; }
.gallery__btn { position: relative; width: 100%; height: 100%; display: block; }
.gallery__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.gallery__btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(10,11,13,.55)); opacity: 0; transition: opacity .4s var(--ease); }
.gallery__btn::before { content: attr(data-label); position: absolute; left: 1rem; bottom: .9rem; z-index: 1; font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease-out); }
.gallery__btn:hover img, .gallery__btn:focus-visible img { transform: scale(1.05); }
.gallery__btn:hover::after, .gallery__btn:hover::before, .gallery__btn:focus-visible::after, .gallery__btn:focus-visible::before { opacity: 1; transform: none; }
.gallery__btn:focus-visible { outline-offset: -3px; }
.gallery--light .gallery__item { background: var(--white); }

@media (min-width: 48em) { .gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 22vw; gap: .75rem; } .gallery__item--tall { grid-row: span 2; } }
@media (min-width: 100em) { .gallery { grid-auto-rows: 21rem; } }

/* 8b. INTERNI ------------------------------------------------------------- */
.interior-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.interior-grid__item { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--graphite-2); }
.interior-grid__item img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.interior-grid__item:hover img { transform: scale(1.03); }
.interior-grid__item--main { grid-column: span 2; }
.interior-grid__item figcaption { position: absolute; left: 1rem; bottom: .9rem; padding-left: .7rem; border-left: 2px solid var(--red); font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6); }

@media (min-width: 64em) {
  .interior-grid { grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(2, 1fr); gap: 1rem; }
  .interior-grid__item--main { grid-column: 1 / 7; grid-row: 1 / 3; }
  .interior-grid__item:nth-child(2) { grid-column: 7 / 11; grid-row: 1; }
  .interior-grid__item:nth-child(3) { grid-column: 7 / 9; grid-row: 2; }
  .interior-grid__item:nth-child(4) { grid-column: 9 / 11; grid-row: 2; }
  .interior-grid__item--main img { aspect-ratio: auto; }
}

/* 8c. CONFIGURAZIONI ------------------------------------------------------ */
.config__tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line-light); }
.config__tab { position: relative; display: grid; gap: .2rem; padding: .9rem .5rem 1rem; text-align: left; font-size: .82rem; line-height: 1.3; color: var(--slate); transition: color .25s var(--ease); }
.config__tab-code { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-on-light); }
.config__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.config__tab[aria-selected="true"] { color: var(--text-on-light); }
.config__tab[aria-selected="true"]::after { transform: scaleX(1); }
.config__tab:hover { color: var(--text-on-light); }

.config__panel { display: grid; gap: 1.5rem; padding-top: 2rem; }
.config__panel:focus-visible { outline-offset: 8px; }
.config__media { background: var(--white); border-radius: var(--radius); overflow: hidden; }
.config__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; }
.config__media--pair { display: grid; gap: .75rem; background: none; }
.config__media--pair figure { position: relative; background: var(--white); border-radius: var(--radius); overflow: hidden; }
.config__media--pair img { aspect-ratio: 16 / 11; object-fit: cover; }
.config__media--pair figcaption { position: absolute; left: .9rem; top: .8rem; padding: .3rem .6rem; background: var(--black); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.config__text h3 { font-family: var(--font-display); font-weight: 600; font-size: 2rem; line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
.config__text p { margin-top: .85rem; color: var(--slate); }
.config__list { margin-top: 1.25rem; display: grid; gap: .5rem; font-size: .95rem; }
.config__list li { padding-left: 1.25rem; position: relative; }
.config__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: .6rem; height: 2px; background: var(--red); }

.custom { margin-top: 4rem; padding: 2rem; background: var(--white); border-left: 3px solid var(--red); }
.custom h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; text-transform: uppercase; }
.custom p { margin-top: .5rem; color: var(--slate); font-size: .98rem; max-width: 50rem; }
.custom__list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.custom__list li { padding: .45rem .85rem; border: 1px solid var(--line-light); font-family: var(--font-display); font-weight: 500; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; }

@media (min-width: 48em) { .config__tab { padding: 1.1rem 1rem 1.25rem; font-size: .88rem; } .config__tab-code { font-size: 1.5rem; } .config__media--pair { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) {
  .config__panel { grid-template-columns: 3fr 2fr; gap: 3rem; align-items: center; padding-top: 2.5rem; }
  .custom { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem; align-items: start; }
  .custom p { grid-column: 1; }
  .custom__list { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
}

/* 8d. DOTAZIONI ----------------------------------------------------------- */
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 3rem; }
.detail-grid li { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--graphite); }
.detail-grid img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.detail-grid li:hover img { transform: scale(1.04); }
.detail-grid span { position: absolute; left: .9rem; right: .9rem; bottom: .8rem; padding-left: .6rem; border-left: 2px solid var(--red); font-family: var(--font-display); font-weight: 600; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
@media (min-width: 48em) { .detail-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }

.equip { border-top: 1px solid var(--line-dark); }
.equip__group { border-bottom: 1px solid var(--line-dark); }
.equip__group summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.35rem, 2.2vw, 1.8rem); text-transform: uppercase; letter-spacing: .02em; }
.equip__group summary::-webkit-details-marker { display: none; }
.equip__group summary::after { content: "+"; flex: 0 0 auto; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border: 1px solid var(--line-dark); font-weight: 500; font-size: 1.3rem; color: var(--red-text); transition: transform .35s var(--ease-out), border-color .25s var(--ease); }
.equip__group[open] summary::after { transform: rotate(45deg); }
.equip__group summary:hover::after { border-color: var(--red-text); }
.equip__cols { display: grid; gap: 0 2.5rem; padding-bottom: 1.75rem; }
.equip__cols li { position: relative; padding: .35rem 0 .35rem 1.1rem; font-size: .95rem; color: var(--steel); line-height: 1.5; }
.equip__cols li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: .5rem; height: 2px; background: var(--red); }
@media (min-width: 48em) { .equip__cols { grid-template-columns: 1fr 1fr; } }

/* 8e. SCHEDA TECNICA ------------------------------------------------------ */
.tech { display: grid; gap: 2.5rem; }
.tech__drawing { background: var(--white); padding: 1.25rem; border-radius: var(--radius); border: 1px solid var(--line-light); }
.tech__drawing img { width: 100%; }
.tech__drawing figcaption { margin-top: .75rem; font-family: var(--font-display); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }

.spec-table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.spec-table th, .spec-table td { padding: .9rem 0; border-bottom: 1px solid var(--line-light); vertical-align: top; text-align: left; }
.spec-table th { font-weight: 500; color: var(--slate); width: 46%; padding-right: 1rem; }
.spec-table td { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.spec-table__list { display: grid; gap: .35rem; font-family: var(--font-body); font-weight: 500; font-size: .95rem; }
.tech__note { margin-top: 1rem; font-size: .84rem; color: var(--slate); }
.tech__data .btn { margin-top: 1.5rem; }

@media (min-width: 64em) { .tech { grid-template-columns: 1.15fr 1fr; gap: 4rem; align-items: start; } .tech__data { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
/* Tabella senza disegno a fianco: colonna singola, larghezza di lettura */
.tech--single { grid-template-columns: 1fr; }
@media (min-width: 64em) { .tech--single { grid-template-columns: 1fr; } .tech--single .tech__data { position: static; max-width: 46rem; } }

/* 9a. GAMMA --------------------------------------------------------------- */
.models { display: grid; gap: 1.5rem; }
.model-card { position: relative; display: grid; background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius); overflow: hidden; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease), border-color .3s var(--ease); }
.model-card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(10, 11, 13, .45); border-color: rgba(167, 24, 23, .4); }
.model-card__media { background: var(--white); }
.model-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; transition: transform 1.2s var(--ease-out); }
.model-card:hover .model-card__media img { transform: scale(1.03); }
.model-card__body { padding: 1.5rem 1.5rem 1.75rem; border-top: 1px solid var(--line-light); }
.model-card__kicker { font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--red); }
.model-card h3 { margin-top: .35rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1; text-transform: uppercase; }
.model-card__body p:not(.model-card__kicker) { margin-top: .6rem; color: var(--slate); font-size: .98rem; max-width: 34rem; }
.model-card__link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.25rem; font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
a.model-card__link::after { content: ""; position: absolute; inset: 0; }
a.model-card__link:hover { color: var(--red-hover); }
span.model-card__link { color: var(--slate); }
.model-card--current .model-card__body { border-top: 3px solid var(--red); }
@media (min-width: 48em) { .models { grid-template-columns: 1fr 1fr; gap: 2rem; } }

/* 9b. AZIENDA ------------------------------------------------------------- */
.company { display: grid; gap: 1rem; }
.company__card { padding: 1.75rem; border: 1px solid var(--line-dark); border-radius: var(--radius); background: var(--graphite); transition: border-color .3s var(--ease); }
.company__card:hover { border-color: rgba(240, 82, 76, .45); }
.company__card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; line-height: 1; text-transform: uppercase; }
.company__card address, .company__card p:not(.company__kicker) { margin-top: .85rem; color: var(--steel); line-height: 1.7; font-size: .95rem; }
.company__card a:hover { color: var(--red-text); }
.company__kicker { font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--red-text); margin-bottom: .6rem; }
.company__mark { width: auto; height: 2.5rem; margin-bottom: 1.1rem; }
.company__mark--h3o { height: 3rem; mix-blend-mode: screen; }
@media (min-width: 48em) { .company { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

/* 9c. CONTATTI E MODULO --------------------------------------------------- */
.contact { isolation: isolate; overflow: hidden; }
.contact__media { position: absolute; inset: 0; z-index: -1; }
.contact__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.contact__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,11,13,.92) 0%, rgba(10,11,13,.8) 50%, rgba(10,11,13,.96) 100%); }
.contact--plain { background: var(--graphite); }
.contact__inner { display: grid; gap: 3rem; }
.contact__channels { display: grid; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); }
.contact__channels li { display: grid; gap: .15rem; }
.contact__channels span { font-family: var(--font-display); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--steel); }
.contact__channels a { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; }
.contact__channels a:hover { color: var(--red-text); }

.form { display: grid; gap: 1.25rem; padding: clamp(1.5rem, 4vw, 2.5rem); background: rgba(20, 23, 27, .88); border: 1px solid var(--line-dark); border-top: 3px solid var(--red); border-radius: var(--radius); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.form__row { display: grid; gap: 1.25rem; }
.field { display: grid; gap: .4rem; }
.field label { font-family: var(--font-display); font-weight: 500; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
.field__opt { text-transform: none; letter-spacing: 0; opacity: .75; font-family: var(--font-body); }
.field input, .field select, .field textarea { width: 100%; min-height: 3rem; padding: .7rem .9rem; font: inherit; color: var(--text-on-dark); background: rgba(10, 11, 13, .6); border: 1px solid var(--line-dark); border-radius: var(--radius); transition: border-color .25s var(--ease), background-color .25s var(--ease); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--steel) 50%), linear-gradient(135deg, var(--steel) 50%, transparent 50%); background-position: calc(100% - 1.2rem) 55%, calc(100% - .85rem) 55%; background-size: .35rem .35rem; background-repeat: no-repeat; }
.field select option { color: var(--text-on-light); }
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red-text); background: rgba(10,11,13,.85); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--red-text); }
.field__error { min-height: 1.2em; font-size: .82rem; color: var(--red-text); }
.field__error:empty { display: none; }

.field--check { grid-template-columns: auto 1fr; align-items: start; gap: .6rem .75rem; }
.field--check input { width: 1.15rem; height: 1.15rem; min-height: 0; margin-top: .2rem; accent-color: var(--red); }
.field--check label { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 400; font-size: .88rem; color: var(--steel); line-height: 1.5; }
.field--check label a { color: var(--text-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.field--check label a:hover { color: var(--red-text); }
.field--check .field__error { grid-column: 1 / -1; }

.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__actions { display: grid; gap: .75rem; }
.form__status { font-size: .9rem; line-height: 1.5; color: var(--steel); }
.form__status a { color: var(--text-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.form__status.is-error { color: var(--red-text); }
.form__status.is-success { color: #9ad3a0; }
.form__status:empty { display: none; }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

@media (min-width: 48em) { .form__row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .contact__inner { grid-template-columns: 1fr 1.1fr; gap: 5rem; align-items: start; } .contact__text { position: sticky; top: calc(var(--header-h) + 2rem); } }

/* 10. FOOTER -------------------------------------------------------------- */
.site-footer { padding-block: 3.5rem 2rem; background: #060708; color: var(--steel); font-size: .92rem; border-top: 1px solid var(--line-dark); }
.site-footer__inner { display: grid; gap: 2.25rem; }
.site-footer__logo { width: auto; height: 1.5rem; margin-bottom: 1rem; }
.site-footer__brand p { max-width: 22rem; }
.site-footer__title { font-family: var(--font-display); font-weight: 600; font-size: .85rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-on-dark); margin-bottom: .9rem; }
.site-footer__col ul { display: grid; gap: .5rem; }
.site-footer a:hover { color: var(--red-text); }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line-dark); font-size: .82rem; }
.to-top { font-family: var(--font-display); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; }
@media (min-width: 48em) { .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* 10b. LIGHTBOX ----------------------------------------------------------- */
.lightbox { border: 0; padding: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; background: rgba(6, 7, 8, .97); color: #fff; }
.lightbox::backdrop { background: rgba(6, 7, 8, .97); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__figure { width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 3.5rem 1rem 6.5rem; }
.lightbox__img { max-width: 100%; max-height: calc(100dvh - 7rem); width: auto; height: auto; object-fit: contain; }
.lightbox__caption { margin-top: .75rem; font-size: .9rem; color: var(--steel); text-align: center; }
.lightbox__close, .lightbox__nav { position: absolute; z-index: 2; width: 2.9rem; height: 2.9rem; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; line-height: 1; color: #fff; background: rgba(255,255,255,.06); border: 1px solid var(--line-dark); transition: background-color .25s var(--ease), border-color .25s var(--ease); }
.lightbox__close:hover, .lightbox__nav:hover { background: var(--red); border-color: var(--red); }
.lightbox__close { top: .75rem; right: .75rem; }
.lightbox__nav { bottom: 3.25rem; }
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }
.lightbox__counter { position: absolute; top: 1.35rem; left: 1.25rem; font-family: var(--font-display); font-size: .85rem; letter-spacing: .2em; color: var(--steel); margin: 0; }
@media (min-width: 48em) {
  .lightbox__figure { padding: 4rem 5rem 1.5rem; }
  .lightbox__nav { top: 50%; bottom: auto; transform: translateY(-50%); }
  .lightbox__nav--prev { left: 1.25rem; } .lightbox__nav--next { right: 1.25rem; }
}

/* 11. MOTION -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .hero__img { will-change: auto; }
}

/* 12. PAGINA DI PRESENTAZIONE (index) ------------------------------------- */
/* Il logo compare al centro, sale in alto e porta con sé la firma "Luxury Tender"
   e la scelta dei due modelli. La fotografia riempie lo schermo: il
   "palcoscenico" (.intro__stage) mantiene le proporzioni dell'immagine
   (1600×1073) e viene ingrandito fino a coprire la finestra, così le due aree
   sensibili disegnate sulle barche restano al loro posto a qualsiasi ritaglio.
   Al passaggio del mouse la barca resta in luce e il resto si scurisce. */
.page-intro { min-height: 100svh; background: var(--black); overflow: hidden; }

.intro-logo {
  position: fixed; left: 50%; top: 50%; z-index: 60; text-align: center;
  transform: translate(-50%, -50%);
  transition: top 1s var(--ease-out), transform 1s var(--ease-out);
}
.intro-logo__mark { width: clamp(13rem, 34vw, 24rem); height: auto; margin-inline: auto; transition: width 1s var(--ease-out); }
/* L'animazione d'ingresso agisce sull'immagine, non sul contenitore:
   così non entra in conflitto con la traslazione che porta il logo in alto. */
.js .intro-logo__mark { animation: logo-in 1s var(--ease-out) both; }
@keyframes logo-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.intro-ready .intro-logo { top: 2.2rem; transform: translate(-50%, 0); }
.intro-ready .intro-logo__mark { width: clamp(7.5rem, 14vw, 10.5rem); }

.intro-logo__tagline {
  margin-top: .4rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.8rem, 1.9vw, 1.15rem); letter-spacing: .44em;
  /* la spaziatura aggiunge spazio anche dopo l'ultima lettera: il margine
     negativo lo annulla, così la scritta è centrata davvero sotto il logo */
  display: inline-block; margin-right: -.44em;
  text-transform: uppercase; color: rgba(244, 245, 246, .95);
  /* ombra morbida: la scritta resta leggibile anche sulle parti chiare della foto */
  text-shadow: 0 1px 16px rgba(10, 11, 13, .9), 0 0 2px rgba(10, 11, 13, .55);
  transition: font-size 1s var(--ease-out), margin-top 1s var(--ease-out);
}
.js .intro-logo__tagline { animation: logo-in 1s var(--ease-out) .15s both; }
.intro-ready .intro-logo__tagline { margin-top: .25rem; font-size: clamp(.62rem, .95vw, .8rem); }

/* Scelta dei modelli, sempre presente in alto */
.intro__models { margin-top: 1rem; display: flex; justify-content: center; gap: clamp(1.25rem, 3vw, 2.75rem); }
.model-link {
  position: relative; padding: .3rem .1rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.8rem, 1.4vw, 1rem); letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-on-dark);
}
.model-link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--red); transition: right .3s var(--ease-out);
}
.model-link:hover::after, .model-link:focus-visible::after { right: 0; }
.js .intro__models { opacity: 0; transition: opacity .8s var(--ease-out) .35s; }
.intro-ready .intro__models { opacity: 1; }

.intro { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; }

/* Foto a tutto schermo: il palcoscenico viene ingrandito fino a coprire la finestra */
.intro__stagewrap { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.intro__stage {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: max(100vw, calc(100vh * 1600 / 1073));
  width: max(100vw, calc(100dvh * 1600 / 1073));
  aspect-ratio: 1600 / 1073;
  container-type: size;
}
.intro__stage picture { position: absolute; inset: 0; display: block; }
.intro__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.intro__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,11,13,.55) 0%, rgba(10,11,13,.08) 26%, rgba(10,11,13,.08) 72%, rgba(10,11,13,.7) 100%);
}
.js .intro__stagewrap { opacity: 0; transition: opacity 1.1s var(--ease-out); }
.intro-ready .intro__stagewrap { opacity: 1; }

/* Aree sensibili sulle barche */
.intro__spots { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.spot-dim { fill: #0a0b0d; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }
.spot { cursor: pointer; }
.spot__hit { fill: #fff; fill-opacity: 0; pointer-events: all; }
.spot:focus-visible { outline: none; }
.spot:focus-visible .spot__hit { fill-opacity: .08; stroke: #fff; stroke-width: 3; stroke-opacity: .85; }

/* Barca in evidenza: si accende e il resto della fotografia si scurisce */
/* Copia schiarita della foto, ritagliata sulla barca: la "accende" senza slavarla */
.spot-lit { opacity: 0; pointer-events: none; filter: brightness(1.24) saturate(1.08); transition: opacity .4s var(--ease); }

.intro__stage:has(.spot--44:hover) .spot-dim--44,
.intro__stage:has(.spot--44:focus-visible) .spot-dim--44,
body:has(.model-link--44:hover) .spot-dim--44,
body:has(.model-link--44:focus-visible) .spot-dim--44 { opacity: .6; }
.intro__stage:has(.spot--700:hover) .spot-dim--700,
.intro__stage:has(.spot--700:focus-visible) .spot-dim--700,
body:has(.model-link--700:hover) .spot-dim--700,
body:has(.model-link--700:focus-visible) .spot-dim--700 { opacity: .6; }

.intro__stage:has(.spot--44:hover) .spot-lit--44,
.intro__stage:has(.spot--44:focus-visible) .spot-lit--44,
body:has(.model-link--44:hover) .spot-lit--44,
body:has(.model-link--44:focus-visible) .spot-lit--44 { opacity: 1; }
.intro__stage:has(.spot--700:hover) .spot-lit--700,
.intro__stage:has(.spot--700:focus-visible) .spot-lit--700,
body:has(.model-link--700:hover) .spot-lit--700,
body:has(.model-link--700:focus-visible) .spot-lit--700 { opacity: 1; }

.intro__foot {
  position: relative; z-index: 4; align-self: end;
  width: min(100% - 2 * var(--gutter), var(--container-wide)); margin-inline: auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem;
  padding-bottom: 1.5rem;
  font-family: var(--font-display); font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; color: var(--steel);
}
.intro__foot a:hover { color: var(--red-text); }
.js .intro__foot { opacity: 0; transition: opacity .8s var(--ease-out) .5s; }
.intro-ready .intro__foot { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .intro-logo { position: absolute; top: 2.2rem; transform: translate(-50%, 0); }
  .intro-logo__mark { width: clamp(7.5rem, 14vw, 10.5rem); animation: none; }
  .intro-logo__tagline { animation: none; }
  .js .intro__stagewrap, .js .intro__models, .js .intro__foot { opacity: 1; transform: none; transition: none; }
}

/* 13. NUOVI BLOCCHI (motorizzazioni, schede tecniche, griglie) -------------- */

/* Motorizzazioni: due blocchi, fuoribordo ed entrofuoribordo */
.engines { display: grid; gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
.engine { padding: 1.6rem 1.5rem; background: rgba(10, 11, 13, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.engine__code { font-family: var(--font-display); font-weight: 600; font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; color: var(--red-text); }
.engine__head h3 { margin-top: .2rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1; text-transform: uppercase; }
.engine__note { margin-top: .4rem; font-size: .9rem; color: var(--steel); }
.engine__list { margin-top: 1.25rem; display: grid; gap: .1rem; }
.engine__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .9rem; padding: .7rem 0; border-top: 1px solid var(--line-dark); }
.engine__list strong { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; min-width: 7rem; }
.engine__list span { font-size: .92rem; color: var(--steel); }
@media (min-width: 48em) { .engines { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .perf__content .engines { max-width: 62%; } }

/* Schede tecniche affiancate (fuoribordo / entrofuoribordo) */
.spec-cards { display: grid; gap: 1.5rem; margin-top: 3rem; }
.spec-card { padding: 1.75rem; background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius); }
.spec-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1; text-transform: uppercase; }
.spec-card__data { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.25rem; }
.spec-card__data dt { font-family: var(--font-display); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.spec-card__data dd { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.spec-card__wide { grid-column: 1 / -1; }
.spec-card__wide dd { font-size: 1.05rem; font-weight: 500; line-height: 1.4; }
.spec-card__sheet { margin-top: 1.25rem; }
.spec-card__sheet img { width: 100%; border: 1px solid var(--line-light); }
.spec-card__note { margin-top: .9rem; font-size: .92rem; color: var(--slate); }
@media (min-width: 64em) { .spec-cards { grid-template-columns: 1fr 1fr; align-items: start; gap: 2rem; } }

/* Interni: griglia a nove immagini */
.interior-grid--nine { grid-template-columns: repeat(2, 1fr); }
.interior-grid--nine .interior-grid__item img { aspect-ratio: 3 / 2; }
@media (min-width: 64em) {
  .interior-grid--nine { grid-template-columns: repeat(4, 1fr); grid-template-rows: none; }
  .interior-grid--nine .interior-grid__item { grid-column: auto; grid-row: auto; }
  .interior-grid--nine .interior-grid__item--main { grid-column: span 2; grid-row: span 2; }
  .interior-grid--nine .interior-grid__item--main img { aspect-ratio: 1 / 1; height: 100%; }
}

/* Intro a una sola immagine (scheda Tender 700) */
@media (min-width: 64em) {
  .intro-grid--single { grid-template-columns: repeat(12, 1fr); grid-template-rows: auto; }
  .intro-grid--single .intro-grid__text { grid-column: 1 / 6; grid-row: 1; }
  .intro-grid--single .intro-grid__media--a { grid-column: 6 / 13; grid-row: 1; align-self: center; }
}
/* Due tavole quotate affiancate */
.specs-drawings { display: grid; gap: 1.5rem; }
@media (min-width: 64em) { .specs-drawings { grid-template-columns: 1fr 1fr; align-items: start; } }

/* 14. SELETTORE LINGUA (tendina EN / IT) ----------------------------------- */
.lang { position: relative; margin-left: auto; margin-right: .5rem; flex: 0 0 auto; }
.lang summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2.6rem; padding: .35rem .7rem;
  border: 1px solid var(--line-dark); border-radius: 2px;
  font-family: var(--font-display); font-weight: 600; font-size: .85rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-on-dark); transition: border-color .25s var(--ease);
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after {
  content: ""; width: .42rem; height: .42rem; margin-top: -.2rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
  transition: transform .25s var(--ease), margin-top .25s var(--ease);
}
.lang[open] summary::after { transform: rotate(-135deg); margin-top: .2rem; }
.lang summary:hover, .lang[open] summary { border-color: var(--red-text); }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 130; min-width: 9.5rem;
  padding: .35rem 0; background: rgba(10, 11, 13, .96); border: 1px solid var(--line-dark);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);
}
.lang__menu a {
  display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .9rem;
  font-family: var(--font-display); font-weight: 500; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--steel); transition: color .2s var(--ease), background-color .2s var(--ease);
}
.lang__menu a small { font-size: .75rem; letter-spacing: .16em; opacity: .7; }
.lang__menu a:hover { color: var(--text-on-dark); background: rgba(255, 255, 255, .05); }
.lang__menu a[aria-current="true"] { color: var(--text-on-dark); box-shadow: inset 2px 0 0 var(--red); }
@media (min-width: 80em) {
  .site-header .nav { margin-left: auto; }
  .site-header .lang { margin-left: clamp(.7rem, 1vw, 1.25rem); margin-right: 0; order: 2; }
  .site-header .lang summary { min-height: 2.6rem; padding-inline: .6rem; font-size: clamp(.78rem, .85vw, .85rem); }
}
/* Pagina di presentazione: tendina in alto a destra, sopra la fotografia */
.lang--intro { position: fixed; top: 1.4rem; right: var(--gutter); z-index: 70; margin: 0; }
.lang--intro summary { background: rgba(10, 11, 13, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: rgba(244, 245, 246, .28); }
.js .lang--intro { opacity: 0; transition: opacity .8s var(--ease-out) .5s; }
.intro-ready .lang--intro { opacity: 1; }
/* Con la tendina lingua la barra ha un elemento in più: spaziature calibrate
   perché il menu del GARI 44 resti su una riga da 1280 px in su. */
@media (min-width: 80em) {
  .site-header .nav { gap: clamp(.8rem, 1vw, 1.3rem); }
  .nav__list { gap: clamp(.6rem, .9vw, 1.15rem); }
  .nav__item--model { padding-left: clamp(.6rem, .9vw, 1.15rem); }
  .site-header .lang { margin-left: clamp(.6rem, .8vw, 1rem); }
  /* sugli schermi grandi la barra usa il contenitore largo */
  .site-header__inner { width: min(100% - 2 * var(--gutter), var(--container-wide)); }
}
@media (min-width: 80em) and (max-width: 86em) {
  .nav__link { font-size: .82rem; letter-spacing: .05em; }
}