/* ════════════════════════════════════════════════════════════════════
   LDS SUISSE — impianto ricavato dai migliori del mondo

   Non e' un'invenzione: e' quello che fanno davvero Aman, Rosewood,
   Blacklane e Wheely, misurato sui loro siti il 17.08.2026.

   Le sei regole che condividono tutti, e che io stavo violando tutte:

   1. FONDO CHIARO E CALDO. Aman #F3EEE7, Rosewood #FAFBF5, Wheely
      bianco. Nessuno dei migliori e' scuro. Il nero da' "sportivo",
      non "lusso".
   2. VUOTO ENORME. Aman lascia 260px di crema prima della fotografia.
      Il vuoto e' il segnale di ricchezza: chi ha fretta riempie.
   3. TITOLI PICCOLI E SOTTILI. Blacklane 64px in serif leggero,
      centrato, quasi in punta di piedi. Non 11rem in maiuscolo.
   4. IMMAGINE INCORNICIATA, non a filo. Aman la stacca dai bordi con
      un margine: diventa una fotografia appesa, non uno sfondo.
   5. NAVIGAZIONE MINUSCOLA. Menu a sinistra, marchio spaziato al
      centro, una sola azione scura a destra. Nient'altro.
   6. NESSUN CURSORE PERSONALIZZATO, NESSUNA LIBRERIA. Verificato su
      tutti e sei: cursor:auto, zero GSAP, zero Lenis.

   Il carattere: loro usano faccie su licenza (Lyon Display, Austin,
   PP Fragment, ABCFavoritPro) che costano centinaia di franchi l'anno.
   E' una delle ragioni per cui "sembrano costati una fortuna". Qui si
   usa il piu' vicino disponibile senza licenza, e la differenza la
   recuperiamo con spaziatura e peso.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --cream:#F3EFE8;      /* il fondo di Aman, misurato */
  --cream-2:#EAE5DC;
  --white:#FCFBF8;
  --ink:#1A1A18;
  --ink-2:#5E5B55;
  --ink-3:#918C84;
  --hair:rgba(26,26,24,.13);
  --dark:#1A1A18;

  --disp:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,-apple-system,sans-serif;

  --gut:clamp(1.5rem,4vw,4rem);   /* margine che incornicia le immagini */
  --frame-w:min(1180px,86vw);     /* la fotografia non arriva mai ai bordi */
  --e:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:15px;font-weight:300;line-height:1.75;
  letter-spacing:.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--cream)}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

/* ── Navigazione: minuscola, tre zone ───────────────────────────────
   Sinistra il menu, centro il marchio spaziato, destra una sola
   azione. E' lo schema di Aman, Rosewood e Chanel: identico. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:1.4rem var(--gut);
  transition:background .6s ease,padding .6s ease;
}
.nav.on{background:rgba(243,239,232,.93);backdrop-filter:blur(16px);padding-block:1rem}
/* Sulle pagine SENZA fondo fotografico non c'e' niente da vedere
   attraverso la navigazione, e nessuno script che le accenda il fondo
   scorrendo: quello sta solo nella home e nelle pagine con l'immagine
   fissa. Senza questa riga il testo passava sotto una barra trasparente
   e si leggevano due cose sovrapposte — "SUISSE" sopra "3 PASSEGGERI". */
html:not([data-bg="foto"]) .nav{
  background:rgba(243,239,232,.94);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--hair);
}
.nav-l{display:flex;align-items:center;gap:1.6rem}
.burger{display:flex;align-items:center;gap:.75rem;background:none;border:0;color:var(--ink);
  font-family:var(--sans);font-size:12.5px;font-weight:300;letter-spacing:.04em;cursor:pointer}
.burger i{display:block;width:18px;height:9px;position:relative}
.burger i::before,.burger i::after{content:'';position:absolute;left:0;right:0;height:1px;background:var(--ink);
  transition:transform .5s var(--e)}
.burger i::before{top:0}.burger i::after{bottom:0}
.burger:hover i::before{transform:translateY(1px)}
.burger:hover i::after{transform:translateY(-1px)}

.mark{
  font-family:var(--disp);font-size:clamp(17px,2vw,21px);font-weight:300;
  letter-spacing:.42em;text-transform:uppercase;text-indent:.42em;white-space:nowrap;
}
.nav-r{display:flex;align-items:center;justify-content:flex-end;gap:1.4rem}
.lang{display:flex;gap:.5rem}
.lang button{font-family:var(--sans);font-size:11.5px;font-weight:300;letter-spacing:.06em;
  background:none;border:0;color:var(--ink-3);cursor:pointer;padding:.2rem 0;transition:color .3s}
.lang button[aria-pressed="true"]{color:var(--ink);border-bottom:1px solid var(--ink)}
.book{
  background:var(--dark);color:var(--cream);
  font-family:var(--sans);font-size:12.5px;font-weight:300;letter-spacing:.05em;
  padding:.85rem 1.7rem;transition:opacity .4s ease;white-space:nowrap;
}
.book:hover{opacity:.82}
@media(max-width:720px){.burger span{display:none}.nav-r .lang{display:none}}

/* ── Apertura ───────────────────────────────────────────────────────
   Vuoto in alto, poi la fotografia incorniciata. Il titolo sta SOTTO
   l'immagine, non sopra: e' l'ordine di Aman, e cambia tutto — la
   fotografia parla per prima, la parola commenta. */
.opening{padding-top:clamp(6rem,11vh,8rem)}
/* Altezza limitata, non proporzione fissa. Con l'aspect-ratio la
   fotografia cresceva con la larghezza dello schermo e su un monitor
   grande occupava tutta la prima schermata; per giunta questa immagine
   e' scura e pesante, quindi domina piu' di una foto chiara. Il tetto
   in vh garantisce crema sopra e titolo visibile sotto, sempre. */
.frame{
  margin-inline:auto;position:relative;overflow:hidden;
  width:min(var(--frame-w),calc(100% - var(--gut)*2));
  height:min(42vh,430px);
  background:var(--cream-2);
}
@media(max-width:760px){.frame{height:min(38vh,320px)}}
/* Il 45% tiene il tramonto dentro il taglio panoramico: la cornice e'
   larga tre volte l'altezza, quindi ogni punto percentuale in verticale
   costa cielo. Col 56% di prima — misura tarata sulla vecchia fotografia
   verticale dell'abitacolo — restava solo la carrozzeria. */
.frame img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  transform:scale(1.04);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.04)}to{transform:scale(1.1) translate3d(-1%,-.8%,0)}}
/* Rivelazione all'apertura: la fotografia si scopre dall'alto. */
.frame::after{content:'';position:absolute;inset:0;background:var(--cream);
  transform-origin:top;animation:unveil 1.4s var(--e) .25s both}
@keyframes unveil{from{transform:scaleY(1)}to{transform:scaleY(0)}}

.said{padding:clamp(1.6rem,3.4vh,2.4rem) var(--gut) clamp(3.5rem,9vh,7rem);text-align:center}
.said .kick{
  font-family:var(--sans);font-size:11px;font-weight:300;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:1.2rem;
}
.said h1{
  font-family:var(--disp);font-weight:300;
  font-size:clamp(1.9rem,4.4vw,3.5rem);   /* Blacklane sta a 64px: qui si resta vicini */
  line-height:1.18;letter-spacing:.005em;max-width:20ch;margin-inline:auto;
}
.said h1 i{font-style:italic}
.said p{margin:1.1rem auto 0;max-width:52ch;color:var(--ink-2);font-size:15px;line-height:1.85}
.said .acts{margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:center;align-items:center}

.solid{
  background:var(--dark);color:var(--cream);
  font-family:var(--sans);font-size:12.5px;font-weight:300;letter-spacing:.06em;
  padding:1.05rem 2.2rem;transition:opacity .4s ease;
}
.solid:hover{opacity:.82}
.under{
  font-family:var(--sans);font-size:12.5px;font-weight:300;letter-spacing:.06em;
  border-bottom:1px solid var(--hair);padding-bottom:.3rem;transition:border-color .4s ease;
}
.under:hover{border-bottom-color:var(--ink)}

/* ── Sezioni ────────────────────────────────────────────────────────*/
section{padding-block:clamp(4rem,11vh,8rem)}
.wrap{padding-inline:var(--gut)}
.mid{max-width:56ch;margin-inline:auto;text-align:center}
.kicker{font-family:var(--sans);font-size:11px;font-weight:300;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-3)}
h2{font-family:var(--disp);font-weight:300;font-size:clamp(1.7rem,3.6vw,2.7rem);
  line-height:1.22;letter-spacing:.005em;margin-top:1.2rem}
h2 i{font-style:italic}
.mid p{margin-top:1.3rem;color:var(--ink-2)}

/* ── Trittico di fotografie ─────────────────────────────────────────
   Rosewood mostra 62 immagini. Le fotografie sono il contenuto, non la
   decorazione: qui occupano piu' spazio del testo che le accompagna. */
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gut);
  margin-top:clamp(3rem,7vh,5rem)}
.piece figure{aspect-ratio:3/4;overflow:hidden;background:var(--cream-2)}
.piece img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e)}
.piece:hover img{transform:scale(1.045)}
.piece .cap{padding-top:1.3rem;text-align:center}
.piece .n{font-family:var(--disp);font-size:1.35rem;font-weight:300;letter-spacing:.01em}
.piece .s{font-family:var(--sans);font-size:11px;font-weight:300;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-3);margin-top:.6rem}

/* ── Elenco servizi: filetti sottili, nessun riquadro ──────────────*/
.list{max-width:62rem;margin-inline:auto;margin-top:clamp(2.5rem,6vh,4rem);border-top:1px solid var(--hair)}
.item{display:grid;grid-template-columns:1fr minmax(0,28ch);gap:1rem 3rem;align-items:baseline;
  padding:2.1rem .25rem;border-bottom:1px solid var(--hair)}
.item .t{font-family:var(--disp);font-size:clamp(1.25rem,2.3vw,1.6rem);font-weight:300;line-height:1.3}
.item .d{color:var(--ink-2);font-size:14px;line-height:1.8}
@media(max-width:720px){.item{grid-template-columns:1fr;gap:.5rem}}

/* ── Banda a tutta larghezza ────────────────────────────────────────*/
.band{position:relative;margin-top:clamp(3rem,8vh,6rem)}
.band figure{aspect-ratio:21/9;overflow:hidden;background:var(--cream-2);margin-inline:var(--gut)}
@media(max-width:760px){.band figure{aspect-ratio:4/3}}
.band img{width:100%;height:100%;object-fit:cover;object-position:center 45%}

/* ── Chiusura ───────────────────────────────────────────────────────*/
.close{text-align:center;padding-block:clamp(4.5rem,12vh,8rem)}
.close h2{font-size:clamp(1.9rem,4.4vw,3.2rem)}
.close p{margin:1.4rem auto 2.4rem;max-width:44ch;color:var(--ink-2)}

footer{border-top:1px solid var(--hair);padding:3rem var(--gut) 3.5rem;
  font-size:12.5px;font-weight:300;color:var(--ink-3);letter-spacing:.02em}
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2.2rem;max-width:76rem;margin-inline:auto}
.fg .h{font-family:var(--sans);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:.9rem}
.fg a:hover{color:var(--ink)}
.fg address{font-style:normal;line-height:1.9}
.fb{max-width:76rem;margin:2.5rem auto 0;padding-top:1.5rem;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;font-size:11.5px;letter-spacing:.06em}

/* ── Rivelazioni: lente, quasi impercettibili ──────────────────────*/
.rv{opacity:1}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .rv{animation:appear linear both;animation-timeline:view();animation-range:entry 2% cover 26%}
    @keyframes appear{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .frame::after{display:none}
  .rv{opacity:1;transform:none}
}

/* ════════════════════════════════════════════════════════════════════
   FONDO FOTOGRAFICO FISSO  —  si attiva con <html data-bg="foto">

   La fotografia resta ferma e il contenuto le scorre sopra. Due cose
   vanno risolte perche' funzioni davvero:

   1. NON si usa background-attachment: fixed. Su iOS viene ignorato o
      produce scatti a ogni fotogramma. Si usa un livello position:fixed
      dietro a tutto: stesso effetto, fluido ovunque.
   2. Il testo su una fotografia non si legge. Le sezioni diventano
      pannelli di crema quasi piena: la fotografia respira ai bordi e
      negli stacchi, il testo resta su fondo pieno. E' il compromesso
      che tiene insieme immersione e leggibilita'.
   ════════════════════════════════════════════════════════════════════ */
[data-bg="foto"] body::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background:url('sfondo.jpg') center/cover no-repeat;
}
/* Velo caldo: abbassa il contrasto della fotografia quel tanto che
   basta perche' i pannelli non sembrino incollati sopra. */
[data-bg="foto"] body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  /* Velo leggero: i pannelli coprono gia' il testo, quindi qui serve
     solo a legare la fotografia alla crema, non a nasconderla. Con
     valori alti si sommava alla sfumatura della testata e la foto
     spariva del tutto. */
  background:linear-gradient(rgba(243,239,232,.12),rgba(243,239,232,.30));
}
[data-bg="foto"] body{background:transparent}

/* I pannelli: crema quasi piena, cosi' il testo resta leggibile. */
[data-bg="foto"] .said,
[data-bg="foto"] section,
[data-bg="foto"] .reel,
[data-bg="foto"] footer{
  background:rgba(243,239,232,.955);
  backdrop-filter:blur(2px);
}
/* Gli stacchi fra un pannello e l'altro sono le finestre sulla
   fotografia: senza questi il fondo non si vedrebbe mai. */
[data-bg="foto"] section{margin-block:clamp(1.5rem,4vh,3.5rem)}
[data-bg="foto"] .band{margin-block:clamp(2rem,6vh,5rem)}
[data-bg="foto"] .nav.on{background:rgba(243,239,232,.9)}
/* L'apertura lascia intravedere il fondo attorno alla fotografia. */
[data-bg="foto"] .opening{background:transparent}
[data-bg="foto"] .frame::after{background:transparent}

/* Interruttore di prova: sparisce quando la scelta e' fatta. */
.switch{
  position:fixed;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:500;
  display:flex;gap:.3rem;padding:.35rem;border-radius:99px;
  background:rgba(26,26,24,.9);backdrop-filter:blur(10px);
}
.switch button{
  font-family:var(--sans);font-size:11px;font-weight:300;letter-spacing:.1em;
  padding:.5rem 1rem;border:0;border-radius:99px;background:none;
  color:rgba(243,239,232,.6);cursor:pointer;transition:all .3s;white-space:nowrap;
}
.switch button[aria-pressed="true"]{background:var(--cream);color:var(--ink)}

/* ════════════════════════════════════════════════════════════════════
   FILA CHE ESCE DAL BORDO  —  l'invito a scorrere senza scritte

   Il gesto e' quello di Aman: l'ultima scheda non finisce, viene
   tagliata dal bordo e sfuma. Il cervello legge "c'e' altro" e la mano
   parte da sola. Nessuna freccia, nessun "scorri": l'indicazione e'
   nella forma, non nelle parole.

   Il taglio si fa con una maschera sfumata, non con un velo sopra: un
   velo colorato funziona su un fondo pieno, ma qui sotto c'e' una
   fotografia fissa e si vedrebbe la macchia. La maschera invece rende
   davvero trasparente il contenuto.
   ════════════════════════════════════════════════════════════════════ */
.trio-wrap{position:relative}
.trio{
  display:flex;gap:var(--gut);overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:1.5rem;scrollbar-width:none;-ms-overflow-style:none;
  /* La sfumatura vive solo finche' c'e' qualcosa a destra: la classe
     .end la spegne quando si e' arrivati in fondo, altrimenti l'ultima
     scheda resterebbe sbiadita per sempre. */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
  transition:mask-image .5s ease,-webkit-mask-image .5s ease;
}
.trio::-webkit-scrollbar{display:none}
.trio.end{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 100%);
}
.trio .piece{flex:0 0 clamp(280px,34vw,470px);scroll-snap-align:start}
.trio .piece figure{aspect-ratio:4/3}

/* Il trascinamento col mouse: su telefono lo scorrimento c'e' gia'. */
.trio.grab{cursor:grabbing;scroll-snap-type:none}

@media(prefers-reduced-motion:reduce){
  .trio{transition:none}
}

/* ════════════════════════════════════════════════════════════════════
   IL RULLO  —  le fotografie scorrono di lato mentre la pagina scende
   ════════════════════════════════════════════════════════════════════
   Nessuna libreria e nessun listener di scorrimento: la pista e' guidata
   dalla timeline nativa del browser, quindi il movimento vive sul
   compositore e non salta mai, nemmeno su telefono.

   Il rapporto conta piu' di tutto. Sei fotografie da 34vw fanno una
   pista di circa 3200px su uno schermo da 1440: sottratta la finestra
   restano ~1800px da percorrere, ed e' esattamente il 200vh di rotella
   che avanza fra l'aggancio e lo sgancio. Uno a uno: la fotografia si
   muove quanto si muove la mano. Piu' fotografie o piu' larghe e il
   rullo scapperebbe via.

   Dove animation-timeline non esiste, e sotto i 900px, la sezione resta
   una striscia da scorrere a dito: stesse fotografie, stesso ordine. */
.reel{position:relative}
.reel .rail{
  display:flex;gap:clamp(1rem,2.4vw,2.2rem);align-items:center;
  padding-inline:var(--gut);
  overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;
  /* Stesso taglio sfumato del trittico: fa capire che c'e' altro a destra. */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent 100%);
}
.reel .rail::-webkit-scrollbar{display:none}
.reel .shot{flex:0 0 clamp(260px,48vw,820px);scroll-snap-align:center}
.reel .shot figure{aspect-ratio:4/3;overflow:hidden;background:var(--cream-2)}
.reel .shot img{width:100%;height:100%;object-fit:cover}
.reel .shot .h{
  font-family:var(--sans);font-size:10.5px;font-weight:300;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-3);padding-top:1rem;display:block;
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:900px){
    .reel{height:350vh;view-timeline-name:--rullo;padding-block:0}
    .reel .stick{
      position:sticky;top:0;height:100vh;overflow:hidden;
      display:flex;flex-direction:column;justify-content:center;
    }
    .reel .rail{
      overflow:visible;scroll-snap-type:none;width:max-content;
      -webkit-mask-image:none;mask-image:none;
      animation:pan linear both;animation-timeline:--rullo;
      animation-range:contain 0% contain 100%;
    }
    /* Il 100% qui e' la larghezza della pista: portarla a -100% + 100vw
       ferma l'ultima fotografia contro il bordo destro, non oltre. */
    @keyframes pan{to{transform:translateX(calc(100vw - 100%))}}
  }
}

/* ════════════════════════════════════════════════════════════════════
   PAGINE LEGALI
   ════════════════════════════════════════════════════════════════════
   Impressum, privacy, cookie, condizioni. Erano rimaste nel vecchio
   sistema scuro: dalla home crema si cliccava un collegamento e cambiava
   grafica di colpo.

   Il testo non e' stato toccato — nemmeno una virgola. Cambia solo il
   vestito: stessa crema, stessi filetti, stesso serif dei titoli. Una
   colonna sola e stretta, perche' un testo legale si legge, non si
   scorre a colpo d'occhio. */
.legal-wrap{
  max-width:min(64ch,calc(100% - var(--gut)*2));
  margin:clamp(6rem,12vh,8rem) auto clamp(4rem,10vh,7rem);
}
.legal-eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:300;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-3);
}
.legal-wrap h1{
  font-family:var(--disp);font-weight:300;font-size:clamp(2rem,4.6vw,3rem);
  line-height:1.14;letter-spacing:.005em;margin:1.1rem 0 .6rem;
}
.legal-date{font-family:var(--sans);font-size:12.5px;color:var(--ink-2);
  padding-bottom:2.4rem;border-bottom:1px solid var(--hair)}
.legal-wrap h2{
  font-family:var(--disp);font-weight:300;font-size:clamp(1.35rem,2.6vw,1.8rem);
  line-height:1.25;margin:clamp(2.4rem,5vh,3.4rem) 0 .9rem;
}
.legal-wrap h3{
  font-family:var(--sans);font-size:12px;font-weight:300;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-3);margin:1.8rem 0 .7rem;
}
.legal-wrap p{margin-bottom:1rem;color:var(--ink-2);font-size:15px;line-height:1.85}
.legal-wrap strong{font-weight:400;color:var(--ink)}
.legal-wrap em{font-style:italic}
.legal-wrap a{color:var(--ink);border-bottom:1px solid var(--hair);
  transition:border-color .3s ease}
.legal-wrap a:hover{border-bottom-color:var(--ink)}
.legal-wrap ul{margin:0 0 1.2rem 1.1rem;color:var(--ink-2);font-size:15px;line-height:1.85}
.legal-wrap li{margin-bottom:.45rem}
.legal-wrap code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;
  background:var(--cream-2);padding:.1em .35em;color:var(--ink)}

/* Coppie etichetta/valore dei dati societari: filetti, non riquadri. */
.info-block{display:grid;grid-template-columns:minmax(0,14ch) 1fr;gap:1rem;
  align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--hair)}
.info-block .label{font-family:var(--sans);font-size:10.5px;font-weight:300;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.info-block .value{font-size:15px;color:var(--ink);line-height:1.7}

.cookies-tbl{width:100%;border-collapse:collapse;margin:1rem 0 1.6rem;font-size:14px}
.cookies-tbl th{text-align:left;font-family:var(--sans);font-size:10.5px;font-weight:300;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);
  padding:.7rem .8rem .7rem 0;border-bottom:1px solid var(--hair);white-space:nowrap}
.cookies-tbl td{padding:.8rem .8rem .8rem 0;border-bottom:1px solid var(--hair-2,rgba(26,26,24,.07));
  color:var(--ink-2);vertical-align:top}
.highlight{background:var(--cream-2);padding:1.1rem 1.3rem;border-left:2px solid var(--ink);
  margin:1.4rem 0;font-size:14.5px;line-height:1.8}
.btn-manage{
  display:inline-block;background:var(--dark);color:var(--cream);border-bottom:none!important;
  font-family:var(--sans);font-size:12.5px;font-weight:300;letter-spacing:.06em;
  padding:1rem 2rem;margin:.6rem 0 1.4rem;transition:opacity .4s ease;
}
.btn-manage:hover{opacity:.82;border-bottom:none}

@media(max-width:600px){
  .info-block{grid-template-columns:1fr;gap:.25rem}
  .cookies-tbl{display:block;overflow-x:auto}
}

/* ════════════════════════════════════════════════════════════════════
   LA FLOTTA
   ════════════════════════════════════════════════════════════════════
   Un veicolo per riga, fotografia e testo affiancati, il verso che si
   alterna: scorrendo, l'occhio non cade sempre nello stesso punto.

   Le cifre stanno grandi perche' sono la sola cosa che si cerca
   arrivando qui — "ci stiamo in sette con gli sci?" e' la domanda, e la
   risposta non deve essere sepolta in un paragrafo. */
.veicoli{max-width:var(--frame-w);margin-inline:auto;display:flex;flex-direction:column;
  gap:clamp(3rem,8vh,5.5rem)}
.vc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
/* A righe alterne la fotografia passa a destra. L'ordine nel codice
   resta lo stesso, cosi' chi legge con la tastiera o con un lettore di
   schermo trova sempre prima l'immagine e poi il testo che la spiega. */
.vc:nth-child(even) figure{order:2}
.vc figure{overflow:hidden;background:var(--cream-2);aspect-ratio:4/3}
.vc img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e)}
.vc:hover img{transform:scale(1.035)}
.vc-t{display:flex;flex-direction:column;gap:1rem}
.vc-t h2{font-family:var(--disp);font-weight:300;font-size:clamp(1.7rem,3.4vw,2.5rem);
  line-height:1.15;margin:0}
.vc-t h2 i{font-style:italic}
.vc-n{display:flex;gap:2.4rem;padding:.9rem 0;border-block:1px solid var(--hair)}
.vc-n span{display:flex;flex-direction:column;gap:.15rem;font-size:11px;font-weight:300;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.vc-n b{font-family:var(--sans);font-size:2rem;font-weight:200;line-height:1;color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums}
.vc-t p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.85}
/* La riga "per cosa serve": rientrata e piu' piccola, si legge come un
   consiglio a voce e non come un'altra specifica tecnica. */
.vc-q{padding-left:1rem;border-left:1px solid var(--hair);font-size:13.5px!important;
  color:var(--ink-3)!important}

@media(max-width:820px){
  .vc{grid-template-columns:1fr;gap:1.4rem}
  .vc:nth-child(even) figure{order:0}
  .vc-n{gap:1.8rem}
  .vc-n b{font-size:1.7rem}
}
/* Seconda voce nella navigazione: testo, non un secondo pulsante pieno.
   Uno solo per schermata, come sul resto del sito. */
.nav-r .alt{
  font-family:var(--sans);font-size:12px;font-weight:300;letter-spacing:.12em;
  color:var(--ink-2);white-space:nowrap;transition:color .3s ease;
}
.nav-r .alt:hover{color:var(--ink)}
@media(max-width:520px){.nav-r .alt{display:none}}

/* ════════════════════════════════════════════════════════════════════
   AEROPORTI
   ════════════════════════════════════════════════════════════════════
   Righe, non schede: chi arriva qui sta confrontando cinque numeri, e
   cinque riquadri affiancati costringono a saltare avanti e indietro.
   In colonna i chilometri si leggono uno sotto l'altro.

   Le cifre sono calcolate sul percorso stradale vero, non stimate: sono
   la ragione per cui questa pagina esiste, e stanno incolonnate perche'
   si possano confrontare a colpo d'occhio. */
.aeroporti{max-width:62rem;margin:clamp(2.5rem,6vh,4rem) auto 0;
  border-top:1px solid var(--hair)}
.ap{display:grid;grid-template-columns:1fr auto;gap:.6rem 2.5rem;
  padding:1.6rem 0;border-bottom:1px solid var(--hair);align-items:start}
.ap-i{display:flex;flex-direction:column;gap:.2rem}
.ap-i h3{font-family:var(--disp);font-weight:300;font-size:clamp(1.4rem,2.6vw,1.9rem);
  line-height:1.15;margin:0}
.ap-c{font-size:11px;font-weight:300;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.ap-n{display:flex;gap:1.8rem;align-items:baseline}
.ap-n span{display:flex;align-items:baseline;gap:.3rem;font-size:11px;font-weight:300;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.ap-n b{font-family:var(--sans);font-size:1.6rem;font-weight:200;line-height:1;color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums}
.ap p{grid-column:1/-1;margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.8;max-width:62ch}
.ap-nota{max-width:62rem;margin:1.2rem auto 0;font-size:12.5px;color:var(--ink-3);line-height:1.7}

@media(max-width:640px){
  .ap{grid-template-columns:1fr;gap:.7rem}
  .ap-n{gap:1.4rem}
  .ap-n b{font-size:1.4rem}
}