/* ============================================================
   Inversini Luxury Services - design token v3 "Carta e inchiostro"
   Colore principale #003333. Palette: SOLO bianco + sfumature del principale.
   Scala OKLCH, il brand cade al gradino 800. Sito light-only.
   (contenuto di brand/tokens.css, inlineato)
   BRIEF-V2 §4: fondo pagina avorio, bianco pieno solo per le superfici
   (schede, moduli, rail, tabelle, sheet). Contrasti ricalcolati su avorio.
   ============================================================ */
:root {
  color-scheme: light;

  /* Avorio: il fondo pagina e il fondo alternato di sezione (caldo, mai grigio freddo) */
  --ivory:      #F7F4EE;
  --ivory-deep: #EFEAE0;

  /* La scala - contrasto su bianco | su avorio | su avorio profondo */
  --p-white: #FFFFFF;
  --p-50:    #F3F6F6;   /*  1.09  velo */
  --p-100:   #E7ECEC;   /*  1.19  */
  --p-200:   #D3DDDD;   /*  1.39  hairline */
  --p-300:   #B2C1C1;   /*  1.86  */
  --p-400:   #879D9D;   /*  2.86  solo disabled / su scuro */
  --p-500:   #5E7B7A;   /*  4.58 | 4.17 | 3.82  testo solo su bianco puro; su avorio vale per bordi di controllo (3:1) */
  --p-600:   #3A5C5C;   /*  7.33 | 6.68 | 6.11  AA su ogni fondo chiaro */
  --p-700:   #1C4544;   /* 10.58 | 9.64 | 8.83 */
  --p-800:   #003333;   /* 13.80 | 12.57 | 11.51  IL BRAND, l'inchiostro */
  --p-900:   #002525;   /* 16.26  */
  --p-950:   #001A1B;   /* 18.05  */

  /* Fondi */
  --bg-page:          var(--ivory);
  --bg-section-alt:   var(--ivory-deep);
  --bg-row-hover:     var(--ivory-deep);
  --surface-card:     var(--p-white);
  --bg-section-dark:  var(--p-800);
  --bg-dark-inset:    var(--p-900);
  --bg-footer:        var(--p-950);

  /* Filetti */
  --border-hairline:      var(--p-200);
  --border-control:       var(--p-500);
  --border-decorative:    var(--p-300);
  --border-strong:        var(--p-800);
  --border-hairline-dark: var(--p-700);
  --border-control-dark:  var(--p-400);

  /* Testo */
  --text-primary:    var(--p-800);
  --text-secondary:  var(--p-600);
  --text-tertiary:   var(--p-600);   /* era 500: su avorio 4.17, sotto AA. Gradino successivo */
  --text-disabled:   var(--p-400);
  --text-on-dark:            var(--p-white);
  --text-on-dark-secondary:  var(--p-300);
  --text-on-dark-tertiary:   var(--p-400);
  --placeholder:       var(--p-500);
  --placeholder-dark:  var(--p-300);
  --link:              var(--p-800);
  --link-underline:    var(--p-500);
  --selection-bg:      var(--p-200);
  --icon:              var(--p-700);

  /* Pulsanti */
  --btn-primary-bg:        var(--p-800);
  --btn-primary-text:      var(--p-white);
  --btn-primary-hover:     var(--p-700);
  --btn-primary-active:    var(--p-900);
  --btn-secondary-border:  var(--p-800);

  /* Focus, distinto dall'errore */
  --focus-ring:       var(--p-600);
  --focus-ring-dark:  var(--p-300);

  /* Stati form, senza colore d'allarme */
  --error-border:  var(--p-800);
  --error-fill:    var(--p-100);
  --error-icon:    var(--p-800);
  --error-text:    var(--p-800);
  --success-icon:  var(--p-700);
  --helper-text:   var(--p-600);

  /* Chip */
  --chip-text:          var(--p-800);
  --chip-border:        var(--p-500);
  --chip-border-deco:   var(--p-300);
  --chip-selected-bg:   var(--p-800);

  /* Numeri */
  --price-figure:  var(--p-800);
  --price-suffix:  var(--p-600);
  --spec-number:   var(--p-800);

  /* Fotografia */
  --scrim:  var(--p-950);

  /* Ombre: NESSUNA. Il floating lo danno filetto 200 e superficie bianca. */

  /* Raggi, regola unica (BRIEF-V2 §4). Pillole a 999px solo per chip, stepper e pulsanti icona tondi; i .btn a 2px. */
  --r-media: 6px;   /* foto, figure, lightbox, tile */
  --r-card:  8px;   /* schede, moduli, rail, wizard, conferme, tabelle a card, pannelli */
  --r-field: 6px;   /* input, select, radio card */

  /* Movimento */
  --ease:          cubic-bezier(.2,.8,.2,1);
  --durata-breve:  180ms;
  --durata-media:  320ms;
  --durata-lunga:  600ms;
}

[data-surface="dark"] {
  --bg-page:          var(--p-800);
  --surface-card:     var(--p-white);
  --text-primary:     var(--p-white);
  --text-secondary:   var(--p-300);
  --text-tertiary:    var(--p-400);
  --border-hairline:  var(--p-700);
  --border-control:   var(--p-400);
  --btn-primary-bg:   var(--p-white);
  --btn-primary-text: var(--p-800);
  --btn-primary-hover:var(--p-100);
  --btn-secondary-border: var(--p-white);
  --focus-ring:       var(--p-300);
  --chip-text:        var(--p-white);
  --chip-border:      var(--p-400);
  --chip-selected-bg: var(--p-white);
  --price-figure:     var(--p-white);
  --price-suffix:     var(--p-300);
  --icon:             var(--p-300);
  --link:             var(--p-white);
  --link-underline:   var(--p-400);
}
[data-surface="tinted"] { --text-tertiary: var(--p-600); }
@media print { :root { --text-secondary: var(--p-800); --text-tertiary: var(--p-800); } }

/* ============================================================
   Tipografia
   Il font di brand e Riviera Nights (Swiss Typefaces): la licenza web non e ancora acquistata e il Trial
   installato sul Mac non ha cifre, accenti ed euro, quindi mescolava due font nella stessa parola e sugli
   altri dispositivi non c'era proprio. Fino all'acquisto il sito usa Montserrat (OFL) ospitato in locale,
   identico su ogni dispositivo. Con la licenza: sostituire i file in /assets/fonts e questi @font-face.
   ============================================================ */
@font-face { font-family: "Inversini Sans"; font-weight: 200; font-style: normal; font-display: swap; src: url("/assets/fonts/montserrat-200.woff") format("woff"); }
@font-face { font-family: "Inversini Sans"; font-weight: 200; font-style: italic; font-display: swap; src: url("/assets/fonts/montserrat-200-italic.woff") format("woff"); }
@font-face { font-family: "Inversini Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url("/assets/fonts/montserrat-300.woff") format("woff"); }
@font-face { font-family: "Inversini Sans"; font-weight: 300; font-style: italic; font-display: swap; src: url("/assets/fonts/montserrat-300-italic.woff") format("woff"); }
@font-face { font-family: "Inversini Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/montserrat-400.woff") format("woff"); }
@font-face { font-family: "Inversini Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("/assets/fonts/montserrat-400-italic.woff") format("woff"); }
@font-face { font-family: "Inversini Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/montserrat-500.woff") format("woff"); }
@font-face { font-family: "Inversini Sans"; font-weight: 500; font-style: italic; font-display: swap; src: url("/assets/fonts/montserrat-500-italic.woff") format("woff"); }
@font-face { font-family: "Inversini Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/montserrat-600.woff") format("woff"); }
@font-face { font-family: "Inversini Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/montserrat-700.woff") format("woff"); }
/* Riserva con le misure di Montserrat (Arial allargato, larghezze misurate per peso sui file in /assets/fonts):
   finché il carattere non arriva il testo occupa lo stesso spazio, e al cambio non va a capo diversamente
   (Julien 19/09: al caricamento il titolo della home passava da 2 a 3 righe e il blocco saltava). */
@font-face { font-family: "Inversini Fallback"; font-weight: 100 200; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Roboto"); size-adjust: 104%; ascent-override: 93%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Inversini Fallback"; font-weight: 300; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Roboto"); size-adjust: 108%; ascent-override: 90%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Inversini Fallback"; font-weight: 300; font-style: italic; src: local("Arial Italic"), local("Arial-ItalicMT"), local("Helvetica Neue Italic"), local("Helvetica-Oblique"), local("Liberation Sans Italic"), local("Roboto Italic"); size-adjust: 112%; ascent-override: 87%; descent-override: 23%; line-gap-override: 0%; }
@font-face { font-family: "Inversini Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Roboto"); size-adjust: 110%; ascent-override: 88%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Inversini Fallback"; font-weight: 400; font-style: italic; src: local("Arial Italic"), local("Arial-ItalicMT"), local("Helvetica Neue Italic"), local("Helvetica-Oblique"), local("Liberation Sans Italic"), local("Roboto Italic"); size-adjust: 113%; ascent-override: 86%; descent-override: 23%; line-gap-override: 0%; }
@font-face { font-family: "Inversini Fallback"; font-weight: 500 700; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Roboto"); size-adjust: 105%; ascent-override: 92%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Inversini Fallback"; font-weight: 500 700; font-style: italic; src: local("Arial Italic"), local("Arial-ItalicMT"), local("Helvetica Neue Italic"), local("Helvetica-Oblique"), local("Liberation Sans Italic"), local("Roboto Italic"); size-adjust: 114%; ascent-override: 85%; descent-override: 23%; line-gap-override: 0%; }

:root {
  --font: "Inversini Sans", "Inversini Fallback", system-ui, sans-serif;
  --font-display: var(--font);
  --font-testo:   var(--font);

  /* Wordmark INVERSINI - Medium, tracking 145 */
  --wordmark-weight:   500;
  --wordmark-track:    .145em;
  --wordmark-lh:       1.2;
  /* Sottotitolo LUXURY SERVICES - Regular, tracking 254 */
  --subtitle-weight:   400;
  --subtitle-track:    .254em;
  --subtitle-lh:       1.2;
  --subtitle-ratio:    .347;

  /* Layout */
  --pad:   clamp(1.25rem, 4vw, 3rem);
  --wrap:  1400px;

  /* Altezze del chrome, ripubblicate su <html> da chrome.js (ResizeObserver). La barra "Verifica disponibilità"
     ancorata sta in BASSO nella finestra: --avail-bottom è la quota che occupa quando si vede (0 altrimenti),
     --avail-h resta 0 (in cima si lascia libero solo l'header). I valori qui sotto sono quelli che chrome.js
     misura, così il primo paint non salta. --nav-h è la quota statica da lasciare libera in cima. */
  --header-h: 72px;
  --avail-bar-h: 64px;
  --avail-h:  0px;
  --avail-bottom: 0px;
  --nav-h:    var(--header-h);
}
@media (max-width: 1023px) { :root { --header-h: 64px; } }
/* Pagine interne (nessun #hero): barra in basso da subito su desktop, salvo body[data-avail="off"] */
@media (min-width: 1024px) {
  :root.has-avail-dock,
  :root:not(:has(#hero)):not(:has(body[data-avail="off"])) { --avail-bottom: var(--avail-bar-h); }
}
/* Pagina senza footer: l'ultimo contenuto non finisce sotto la barra in basso */
body:not(:has(.footer)) { padding-bottom: var(--avail-bottom); }
.lockup__wordmark { font-family: var(--font-display); font-weight: var(--wordmark-weight); letter-spacing: var(--wordmark-track); line-height: var(--wordmark-lh); text-transform: uppercase; margin-right: calc(var(--wordmark-track) * -1); }
.lockup__subtitle { font-family: var(--font-display); font-weight: var(--subtitle-weight); letter-spacing: var(--subtitle-track); line-height: var(--subtitle-lh); text-transform: uppercase; font-size: calc(1em * var(--subtitle-ratio)); margin-right: calc(var(--subtitle-track) * -1); }
.display-xl { font-family: var(--font-display); font-weight: 500; letter-spacing: .145em; line-height: .95; text-transform: uppercase; font-size: clamp(40px, 7vw, 118px); }
.display-l  { font-family: var(--font-display); font-weight: 500; letter-spacing: .12em; line-height: 1; text-transform: uppercase; font-size: clamp(32px, 4.4vw, 68px); }
.occhiello  { font-family: var(--font-display); font-weight: 400; letter-spacing: .254em; line-height: 1.2; text-transform: uppercase; font-size: 11px; }

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; accent-color: var(--p-800); color-scheme: light; }
/* Campi data e ora: iOS Safari li disegna centrati, in blu e col font di sistema. Qui tornano nello stile del sito
   (Julien 19/09: "la data a un colore diverso"). Valgono per la barra, i moduli e il wizard. */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  -webkit-appearance: none; appearance: none; font-family: inherit; color: var(--text-primary);
  -webkit-text-fill-color: var(--text-primary); text-align: left; min-width: 0; min-height: 2.75rem; line-height: normal;
}
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; color: var(--text-primary); }
input[type="date"]::-webkit-datetime-edit, input[type="time"]::-webkit-datetime-edit { color: var(--text-primary); padding: 0; }
input[type="date"]:not(:focus):invalid::-webkit-datetime-edit, input[type="date"][value=""]::-webkit-datetime-edit { color: var(--placeholder, var(--text-tertiary)); }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }
select { color: var(--text-primary); -webkit-text-fill-color: var(--text-primary); }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }
::selection { background: var(--selection-bg); color: var(--p-800); }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--link); text-decoration-color: var(--link-underline); text-decoration-thickness: 1px; text-underline-offset: .22em; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
em { font-style: italic; }

/* clip non crea un contenitore di scorrimento (gli sticky restano vivi); hidden è il ripiego */
main { overflow-x: hidden; overflow-x: clip; width: 100%; max-width: 100%; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: 8rem; }
.section--tight { padding-block: 5rem; }

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

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-weight: 400; font-size: 11px; letter-spacing: .254em; line-height: 1.2;
  text-transform: uppercase; color: var(--text-secondary); margin-bottom: 1.5rem;
}
.display {
  font-weight: 500; text-transform: uppercase; letter-spacing: .08em; line-height: 1;
  font-size: clamp(2.1rem, 4.4vw, 4.25rem); color: var(--text-primary);
}
.display em { font-style: italic; font-weight: 300; text-transform: none; letter-spacing: 0; }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.55; color: var(--text-secondary); max-width: 56ch; }
.h3 { font-weight: 500; font-size: 1.25rem; letter-spacing: .04em; line-height: 1.25; }
.meta { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--text-secondary); }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  height: 3.25rem; padding: 0 1.75rem;
  border: 1px solid var(--btn-primary-bg); border-radius: 999px; /* pillola: tutti i pulsanti testuali del sito (richiesta Julien 18/09) */
  font-family: var(--font); font-weight: 500; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; line-height: 1;
  transition: background-color var(--durata-breve) var(--ease), border-color var(--durata-breve) var(--ease), color var(--durata-breve) var(--ease);
}
/* Telefoni stretti: un pulsante con testo lungo (DE/FR) va a capo dentro la pillola invece di uscire dallo schermo */
@media (max-width: 479px) { .btn { white-space: normal; height: auto; min-height: 3.25rem; padding-block: .8rem; line-height: 1.35; text-align: center; }
  main .btn:has(.arrow) { display: inline-block; text-wrap: balance; min-height: 0; padding-block: 1.1rem; vertical-align: middle; }
  main .btn:has(.arrow) .arrow { margin-left: .35em; } }
@media (max-width: 359px) { .cta-row .btn { letter-spacing: .12em; padding-inline: 1.1rem; } }
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: var(--btn-primary-bg); }
.btn--primary:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); }
.btn--primary:active { background: var(--btn-primary-active); border-color: var(--btn-primary-active); }
.btn--outline { background: transparent; color: var(--text-primary); border-color: var(--btn-secondary-border); }
.btn--outline:hover { background: var(--bg-row-hover); }
[data-surface="dark"] .btn--outline:hover { background: var(--bg-dark-inset); }
.btn--sm { height: 2.5rem; padding: 0 1.15rem; font-size: .6875rem; letter-spacing: .16em; }
.btn--md { height: 2.875rem; padding: 0 1.4rem; font-size: .7rem; letter-spacing: .16em; } /* misura media: bottoni sotto le sezioni di Matrimoni (06/10) */
.btn .arrow { display: inline-block; transition: transform var(--durata-breve) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.tlink {
  display: inline-flex; align-items: center; gap: .6em;
  font-weight: 500; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--link);
  padding-bottom: .4em; border-bottom: 1px solid var(--link-underline);
}
.tlink .arrow { display: inline-block; transition: transform var(--durata-breve) var(--ease); }
.tlink:hover .arrow { transform: translateX(4px); }

.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ---------- Image slots (gradient placeholders) ---------- */
.slot {
  position: relative; display: block; margin: 0; width: 100%;
  background: linear-gradient(135deg, var(--ivory-deep), var(--p-200));
  border-radius: var(--r-media); overflow: hidden;
}
.slot[data-aspect="21/9"]  { aspect-ratio: 21 / 9; }
.slot[data-aspect="16/10"] { aspect-ratio: 16 / 10; }
.slot[data-aspect="3/2"]   { aspect-ratio: 3 / 2; }
.slot[data-aspect="4/3"]   { aspect-ratio: 4 / 3; }
.slot[data-aspect="4/5"]   { aspect-ratio: 4 / 5; }
.slot[data-aspect="1/1"]   { aspect-ratio: 1 / 1; }
.slot figcaption {
  position: absolute; left: 1rem; bottom: .9rem; right: 1rem;
  font-size: 10px; font-weight: 500; letter-spacing: .2em; line-height: 1.4;
  text-transform: uppercase; color: var(--p-600);
}
/* hover physics: scale 1.05 in 700ms ease-out inside overflow:hidden */
.media { position: relative; overflow: hidden; border-radius: var(--r-media); }
.media .slot { border-radius: 0; transition: transform 700ms ease-out; will-change: transform; }
a:hover .media .slot, a:focus-visible .media .slot { transform: scale(1.05); }

/* ---------- Full-bleed: media da bordo a bordo (BRIEF-V2 §4) ----------
   Larghezza viewport, raggio 0, qualunque sia il contenitore. Si applica a figure, div, picture, video o img.
   L'eccedenza della scrollbar classica è tagliata da main { overflow-x: clip }. */
.full-bleed {
  display: block; position: relative; width: 100vw; max-width: none;
  margin-inline: calc(50% - 50vw); border-radius: 0; overflow: hidden;
}
.full-bleed > img, .full-bleed > video, .full-bleed > picture, .full-bleed > picture > img,
.full-bleed > .slot, .full-bleed > .media { display: block; width: 100%; max-width: none; border-radius: 0; }
.full-bleed > img, .full-bleed > video, .full-bleed > picture > img { height: auto; object-fit: cover; }

/* ============================================================
   Header / nav (BRIEF-V2 §4 e §5)
   Monogramma a 48px + wordmark su due righe come nel footer. Altezza costante (72px desktop, 64px sotto i 1024px):
   non si restringe mai, così --header-h non cambia durante lo scorrimento. A riposo sulla hero è trasparente;
   .is-floating (oltre la hero, e da subito nelle pagine interne) dà fondo avorio e filetto. Nessuna pillola.
   body[data-header-tone="light"]: header chiaro finché è trasparente sopra un media scuro (hero video).
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  height: var(--header-h); max-height: 80px;
  background: transparent; border-bottom: 1px solid transparent; color: var(--p-800);
  transition: background-color var(--durata-media) var(--ease), border-color var(--durata-media) var(--ease), color var(--durata-media) var(--ease);
}
.site-header.is-floating { background: var(--bg-page); border-bottom-color: var(--border-hairline); }
.nav { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.nav__logo { display: inline-flex; align-items: center; gap: .8rem; color: inherit; text-decoration: none; flex: 0 0 auto; }
.nav__logo svg { height: 48px; width: auto; flex: 0 0 auto; }
.nav__wordmark {
  display: block; font-weight: var(--wordmark-weight); letter-spacing: var(--wordmark-track); line-height: var(--wordmark-lh);
  text-transform: uppercase; font-size: .9rem; white-space: nowrap;
}
.nav__wordmark small {
  display: block; margin-top: .3rem; font-weight: var(--subtitle-weight); letter-spacing: var(--subtitle-track);
  font-size: .55rem; line-height: var(--subtitle-lh); color: var(--text-secondary);
  transition: color var(--durata-media) var(--ease);
}
.nav__links { display: flex; align-items: center; gap: 1.75rem; flex-wrap: nowrap; white-space: nowrap; }
.nav__links a {
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: inherit; padding: .5rem 0;
  border-bottom: 1px solid transparent; transition: border-color var(--durata-breve) var(--ease);
}
.nav__links a:hover { border-bottom-color: var(--link-underline); }
.nav__actions { display: flex; align-items: center; gap: .75rem; flex: 0 0 auto; }
.nav__actions .btn { color: inherit; border-color: currentColor; }
/* Barra a tutta larghezza (08/10, Julien: «il logo più a sinistra, social e lingue più a destra, le pagine al centro»):
   l'header non segue più il --wrap di 1400px del contenuto, solo il margine laterale --pad. Da 1280px (voci visibili)
   tre colonne: logo a sinistra, voci al centro esatto della pagina, social e lingue a destra. Le colonne laterali non
   scendono mai sotto il loro contenuto: se lo spazio è stretto le voci si spostano invece di sovrapporsi. */
.site-header .nav.wrap { max-width: none; }
@media (min-width: 1280px) {
  .nav { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); column-gap: 2rem; }
  .nav__logo { justify-self: start; }
  .nav__links { justify-self: center; }
  .nav__actions { justify-self: end; }
}
/* Social nella barra (07/10): da 768px accanto alle lingue; sul telefono stanno nel menu che si apre */
.nav__social { display: none; align-items: center; gap: .15rem; }
.nav__social a { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; color: inherit; opacity: .85; transition: opacity var(--durata-breve) var(--ease); }
.nav__social a:hover, .nav__social a:focus-visible { opacity: 1; }
.nav__social svg, .menu__social svg, .footer__social svg { width: 18px; height: 18px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 768px) { .nav__social { display: flex; } }
.menu__social { display: flex; gap: 1.5rem; }
.menu__social a { display: inline-flex; align-items: center; gap: .5rem; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--text-secondary); }
.footer__social a { display: inline-flex; align-items: center; gap: .5rem; }
/* più specifico di .footer__brand svg (56px, il monogramma) */
.footer__brand .footer__social svg { width: 16px; height: 16px; color: inherit; }
.nav__burger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  flex-direction: column; gap: 5px; border: 1px solid var(--border-control); border-radius: 999px; color: inherit;
}
.nav__burger span { display: block; width: 16px; height: 1px; background: currentColor; transition: transform var(--durata-breve) var(--ease); }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

/* Tono chiaro sopra un media scuro: solo a riposo e mai con il menu mobile aperto */
body[data-header-tone="light"] .site-header:not(.is-floating):not(:has(.nav__burger[aria-expanded="true"])) { color: var(--p-white); }
body[data-header-tone="light"] .site-header:not(.is-floating):not(:has(.nav__burger[aria-expanded="true"])) .nav__wordmark small { color: var(--text-on-dark-secondary); }
body[data-header-tone="light"] .site-header:not(.is-floating):not(:has(.nav__burger[aria-expanded="true"])) .nav__burger { border-color: rgb(255 255 255 / .7); }
/* Sopra le nuvole della foto lingue, sottotitolo del logo e burger quasi sparivano: un'ombra morbida e lingue meno trasparenti (non nelle tendine bianche) */
.site-header .nav__panel { text-shadow: none; }
body[data-header-tone="light"] .site-header:not(.is-floating):not(:has(.nav__burger[aria-expanded="true"])) { text-shadow: 0 1px 10px rgb(0 26 27 / .45); }
body[data-header-tone="light"] .site-header:not(.is-floating):not(:has(.nav__burger[aria-expanded="true"])) .nav__lang a:not([aria-current]) { opacity: .85; }
body[data-header-tone="light"] .site-header:not(.is-floating) .nav__actions .btn:hover { background: transparent; }
body[data-header-tone="light"] .site-header:not(.is-floating) :focus-visible { outline-color: var(--focus-ring-dark); }
/* Con il menu mobile aperto l'header poggia sull'avorio dell'overlay */
.site-header:has(.nav__burger[aria-expanded="true"]) { background: var(--bg-page); border-bottom-color: var(--border-hairline); }

/* Mobile menu (full screen overlay) */
.menu {
  position: fixed; inset: 0; z-index: 60; background: var(--bg-page);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-h) + 1.5rem) var(--pad) 2rem;
}
.menu[hidden] { display: none; }
.menu__links { display: flex; flex-direction: column; padding-bottom: 1.25rem; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.25rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 1.25rem), transparent); }
/* Con una voce aperta la lista scorre: le righe non si schiacciano (prima 56px contro 65px) */
.menu__links > * { flex-shrink: 0; }
.menu__links a {
  display: block; padding: 1rem 0; min-height: 56px;
  font-size: 20px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid var(--border-hairline);
}
.menu__bottom { display: grid; gap: 1.25rem; padding-top: 1rem; }
.menu__bottom .cta-row .btn { flex: 1; }
.menu__langs { display: flex; gap: 1.5rem; }
.menu__langs a { font-size: 12px; letter-spacing: .16em; text-decoration: none; color: var(--text-secondary); }

/* Sette voci dal 20/09: sotto i 1280px la riga non entra più (il francese è il caso peggiore), quindi il panino
   sale da 1023 a 1279px. Fra 1280 e 1439 le voci stanno più strette, sopra restano alla spaziatura piena. */
@media (max-width: 1279px) {
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; }
}
@media (min-width: 1280px) and (max-width: 1439px) { .nav__links { gap: 1.35rem; } }
/* Nessun controllo nell'header (Verifica disponibilità vive nella barra in basso, nell'overlay e nella .mbar) */
@media (max-width: 599px) { .nav { gap: 1rem; } }
@media (min-width: 1280px) { .menu { display: none; } }

/* ============================================================
   S1 Hero - Artistic Asymmetry
   ============================================================ */
.hero { min-height: 100dvh; padding-top: 6rem; display: flex; flex-direction: column; }
.hero__wrap { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 2.5rem; }
.hero__title { position: relative; display: inline-block; max-width: 72rem; width: auto; font-size: clamp(3rem, 7vw, 7.5rem); }
.hero__h1 {
  position: relative;
  font-weight: 500; font-size: 1em; line-height: .9; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-primary); margin: 0;
}
.hero__line { display: block; }
.hero__line--2 { font-weight: 200; color: var(--p-600); padding-bottom: .06em; }
.hero__it {
  position: relative; z-index: 3;
  font-style: italic; font-weight: 300; text-transform: none; letter-spacing: 0;
  font-size: .72em; color: var(--p-800); vertical-align: baseline; white-space: nowrap;
}
@media (min-width: 768px) { .hero__line { white-space: nowrap; } }

/* subject cutout: organic shape, gradient 100->300, above the H1, never above the italic */
.slot--subject {
  position: absolute; z-index: 2;
  left: 5.0em; top: -.32em; width: 3.1em; height: 1.32em;
  background: linear-gradient(150deg, var(--p-100), var(--p-300));
  border-radius: 62% 38% 55% 45% / 48% 58% 42% 52%;
  transform: rotate(-7deg);
}
.slot--subject figcaption { left: 1.2rem; bottom: 1.1rem; right: 1.2rem; color: var(--p-700); }
@media (max-width: 767px) {
  .hero { padding-top: 5.5rem; }
  .hero__line { white-space: normal; }
  .slot--subject { left: auto; right: -.5em; bottom: -.5em; width: 3.5em; height: 2.4em; }
  .slot--subject figcaption { letter-spacing: .12em; left: 1rem; right: 1rem; bottom: .9rem; }
}

.hero__sub { margin-top: 2.5rem; max-width: 34ch; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--text-secondary); }
.hero__cta { margin-top: 1.75rem; }
.hero__ambient { margin-top: 3rem; aspect-ratio: auto; height: clamp(180px, 30vh, 380px); }
@media (max-width: 767px) { .hero__ambient { height: 28vh; margin-top: 2.5rem; } }

/* ============================================================
   S2 Il respiro
   ============================================================ */
.breath { padding-block: 9rem; }
.breath__text {
  font-weight: 300; font-size: clamp(1.75rem, 3.4vw, 3.25rem); line-height: 1.25; letter-spacing: .005em;
  max-width: 24ch; color: var(--text-primary);
}
.breath__word { display: inline; }
.breath__text em { font-weight: 300; }

/* ============================================================
   S3 I due mondi
   ============================================================ */
.worlds {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense;
  gap: 0; border-block: 1px solid var(--border-hairline);
}
.world {
  grid-column: span 6; display: flex; flex-direction: column; gap: 1.5rem;   /* Julien 20/09: due blocchi uguali, riga al centro */
  padding: 2.5rem 0 2.5rem 0; text-decoration: none; color: inherit;
}
.world--charter { grid-column: span 6; border-left: 1px solid var(--border-hairline); padding-left: 2.5rem; }
.world--aviazione { padding-right: 2.5rem; }
.world .media { height: clamp(340px, 38vw, 600px); }
.world .media .slot { height: 100%; aspect-ratio: auto; }
.world__body { display: flex; flex-direction: column; gap: .75rem; }
.world__body .h3 { font-size: clamp(1.4rem, 2vw, 1.9rem); letter-spacing: .06em; text-transform: uppercase; }
.world__body p { color: var(--text-secondary); max-width: 44ch; }
.world__body .tlink { align-self: flex-start; margin-top: .5rem; }
/* 03/10: hub Aviazione e Lago tolti, le card portano direttamente alle pagine della tendina */
.world__links { display: flex; flex-wrap: wrap; gap: .9rem 2rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.world__links .tlink { margin-top: 0; }

/* ============================================================
   S4 Capacità
   ============================================================ */
/* Solo filetti: hairline sopra e sotto, separatori verticali. Nessun riquadro, nessun raggio. */
.caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); }
.cap { padding: 2.75rem 2rem 2.5rem; border-left: 1px solid var(--border-hairline); }
.cap:first-child { border-left: 0; padding-left: 0; }
.cap:last-child { padding-right: 0; }
.cap__fig { display: flex; align-items: baseline; gap: .4em; flex-wrap: wrap; }
.cap__num { font-weight: 500; font-size: clamp(3rem, 5vw, 4.75rem); line-height: 1; color: var(--spec-number); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cap__unit { font-weight: 300; font-size: 1.1rem; line-height: 1.2; color: var(--price-suffix); letter-spacing: .02em; }
.cap__desc { margin-top: 1.25rem; font-size: .95rem; line-height: 1.5; color: var(--text-secondary); max-width: 26ch; }

/* ============================================================
   S5 Esperienze sul lago - Scroll Pinning Split
   ============================================================ */
.exp__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 5rem; align-items: start; }
.exp__left { display: flex; flex-direction: column; gap: 1.5rem; }
.exp__left .display { font-size: clamp(2.1rem, 4vw, 3.9rem); }
.inline-slot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.3em; height: .78em; border-radius: var(--r-media); vertical-align: -.06em; margin-inline: .06em;
  background: linear-gradient(135deg, var(--ivory-deep), var(--p-200));
  font-size: inherit; overflow: hidden;
}
.inline-slot span { font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--p-600); font-style: normal; white-space: nowrap; }
.exp__list { display: grid; gap: 3rem; }
/* Pin letterale a y0: lo spazio per la nav fissa lo dà il CSS, non l'offset di start.
   Le due colonne restano allineate perché la lista porta lo stesso margine. */
@media (min-width: 1024px) {
  .exp { padding-top: 2rem; }
  .exp__left { padding-top: calc(var(--nav-h) + 2rem); }
  .exp__list { margin-top: calc(var(--nav-h) + 2rem); }
  .no-gsap .exp__left { position: sticky; top: 0; }
}
.tour { display: block; text-decoration: none; color: inherit; }
.tour__body { display: flex; justify-content: space-between; gap: 2rem; align-items: baseline; padding-top: 1.25rem; }
.tour__body .h3 { font-size: 1.35rem; }
.tour__body .meta { margin-top: .5rem; }
.tour__price { text-align: right; white-space: nowrap; color: var(--price-suffix); font-size: .95rem; }
.tour__price strong { font-weight: 500; color: var(--price-figure); font-size: 1.35rem; font-variant-numeric: tabular-nums; }

/* ============================================================
   S6 Pacchetti - scroll-snap rail
   ============================================================ */
.packs__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 3rem; }
.rail-nav { display: flex; gap: .5rem; }
.rail-btn {
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center; color: var(--p-800);
  transition: background-color var(--durata-breve) var(--ease), border-color var(--durata-breve) var(--ease), color var(--durata-breve) var(--ease);
}
.rail-btn:hover { background: var(--bg-row-hover); }
.rail-btn[aria-disabled="true"] { border-color: var(--text-disabled); color: var(--text-disabled); cursor: default; }
.rail-btn[aria-disabled="true"]:hover { background: transparent; }
.rail-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.rail {
  display: flex; gap: 1.5rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); padding-inline: var(--pad);
  scrollbar-width: none; -ms-overflow-style: none;
}
.rail::-webkit-scrollbar { display: none; }
.pack { flex: 0 0 clamp(260px, 26vw, 360px); scroll-snap-align: start; display: block; text-decoration: none; color: inherit; }
.pack__body { padding-top: 1.25rem; }
.pack__dur { font-weight: 500; font-size: clamp(1.5rem, 2.2vw, 2.1rem); letter-spacing: .1em; text-transform: uppercase; line-height: 1; }
.pack__title { margin-top: .6rem; font-weight: 300; font-size: 1.2rem; }
.pack__comp { margin-top: .6rem; }
.rail-progress { height: 1px; background: var(--border-hairline); margin: 2.5rem var(--pad) 0; position: relative; }
.rail-progress__bar { position: absolute; left: 0; top: 0; height: 1px; background: var(--p-800); width: 0; transition: width var(--durata-breve) linear; }

/* ============================================================
   S7 Off market
   ============================================================ */
.off__inner { display: grid; gap: 3.5rem; }
.off__text { display: grid; grid-template-columns: 5fr 7fr; gap: 3rem; align-items: start; }
.off__text .lead { max-width: 52ch; }
.off__text .tlink { margin-top: 1.5rem; }

/* ============================================================
   S8 Chi risponde
   ============================================================ */
.about { display: grid; grid-template-columns: 2fr 3fr; gap: 5rem; align-items: center; }
.about__text { display: flex; flex-direction: column; gap: 1.5rem; }
.about__text p { color: var(--text-secondary); max-width: 52ch; font-size: 1.1rem; }
.about__sign { font-style: italic; font-weight: 300; font-size: 1.5rem; color: var(--text-primary); }
.about__sign small { display: block; font-style: normal; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-secondary); margin-top: .35rem; }

/* ============================================================
   S9 Abbonamento - the one dark panel
   ============================================================ */
.member { margin-inline: var(--pad); border-radius: var(--r-card); background: var(--bg-page); color: var(--text-primary); }
.member__inner { padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 5rem); max-width: calc(var(--wrap) - 2 * var(--pad)); margin-inline: auto; }
.member__head { display: grid; grid-template-columns: 6fr 6fr; gap: 3rem; align-items: end; margin-bottom: 4rem; }
.member__head .lead { color: var(--text-secondary); }
.tiers { border-top: 1px solid var(--border-hairline); }
.tier { display: grid; grid-template-columns: 4fr 6fr 2fr; gap: 2rem; align-items: baseline; padding: 1.75rem 0; border-bottom: 1px solid var(--border-hairline); }
.tier__name { font-style: italic; font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.1; }
.tier__desc { color: var(--text-secondary); max-width: 46ch; }
.tier__fig { text-align: right; white-space: nowrap; color: var(--price-suffix); }
.tier__fig strong { font-weight: 500; color: var(--price-figure); font-size: 1.35rem; font-variant-numeric: tabular-nums; display: block; }
.member__note { margin-top: 1.5rem; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.member__cta { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.member__cta .tlink { color: var(--text-on-dark); border-bottom-color: var(--link-underline); }

/* ============================================================
   S10 Come lavoro - vertical hairline timeline
   ============================================================ */
.how { display: grid; grid-template-columns: 5fr 7fr; gap: 5rem; align-items: start; }
.how__intro { display: flex; flex-direction: column; gap: 1.5rem; }
.steps { position: relative; padding-left: 2.5rem; }
.steps::before { content: ""; position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 1px; background: var(--border-hairline); }
.step { position: relative; padding-bottom: 3rem; }
.step:last-child { padding-bottom: 0; }
.step::before { content: ""; position: absolute; left: calc(-2.5rem - 4px); top: .55rem; width: 9px; height: 9px; border-radius: 999px; background: var(--p-800); }
.step .h3 { font-size: 1.3rem; }
.step p { margin-top: .6rem; color: var(--text-secondary); max-width: 50ch; }

/* ============================================================
   S11 Marquee destinazioni
   ============================================================ */
.marquee { overflow: hidden; border-block: 1px solid var(--border-hairline); padding-block: 1.6rem; }
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__list { display: flex; }
.marquee__list li {
  white-space: nowrap; padding-inline: 1.75rem;
  font-weight: 500; font-size: clamp(1.25rem, 2.4vw, 2rem); letter-spacing: .12em; text-transform: uppercase; line-height: 1;
  display: flex; align-items: center; gap: 3.5rem;
}
.marquee__list li::after { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--p-300); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   S12 Chiusura
   ============================================================ */
.close__stmt { font-size: clamp(2.4rem, 6vw, 6rem); line-height: .95; letter-spacing: .06em; }
.close__stmt span { display: block; text-wrap: balance; }
.close__stmt em { color: var(--p-600); }
.close__row { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: center; justify-content: space-between; }
.close__contacts { display: flex; flex-wrap: wrap; gap: .5rem 2rem; font-size: 1rem; color: var(--text-secondary); }
.close__contacts a { color: var(--link); }
/* 04/10 (Julien: testi appoggiati a sinistra su tablet): tra 768 e 1100 px la chiusura va su due colonne,
   frase a sinistra e azioni a destra, cosi' la meta' destra non resta vuota. Sopra i 1100 px resta la riga orizzontale.
   Solo .close--page: la chiusura della home (#chiusura) ha gia' la sua griglia nello <style> della pagina. */
@media (min-width: 768px) and (max-width: 1100px) {
  .close--page > .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "eye eye" "stmt row" "priv priv"; column-gap: clamp(2rem, 5vw, 4rem); align-items: end; }
  .close--page > .wrap > .eyebrow { grid-area: eye; }
  .close--page > .wrap > .close__stmt { grid-area: stmt; }
  .close--page > .wrap > .close__row { grid-area: row; margin-top: 0; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 1.5rem; }
  .close--page > .wrap > .close__privacy { grid-area: priv; }
  .close--page .close__contacts { flex-direction: column; gap: .4rem; }
}

/* ============================================================
   S13 Footer
   ============================================================ */
.footer { background: linear-gradient(180deg, var(--p-900), var(--p-950)); color: var(--text-on-dark); padding: 5rem 0 2rem; }
.footer a { color: var(--text-on-dark); text-decoration: none; }
.footer a:hover { text-decoration: underline; text-decoration-color: var(--p-400); }
.footer__grid { display: grid; grid-template-columns: 3.2fr 2.3fr 2.3fr 2.5fr 3fr; gap: 2.5rem; }
.footer__brand { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
/* Larghezza esplicita (19/10): con width:auto Safari dava al monogramma la larghezza predefinita di un SVG (300px) e lo
   centrava in quel riquadro, spostato a destra rispetto al nome. 24px = 56px × 236/552 (viewBox del monogramma). */
.footer__brand svg { height: 56px; width: 24px; color: var(--p-white); }
.footer__name { font-weight: 500; letter-spacing: .145em; text-transform: uppercase; font-size: .9rem; }
.footer__name small { display: block; font-weight: 400; letter-spacing: .254em; font-size: .55rem; margin-top: .3rem; color: var(--text-on-dark-secondary); }
.footer__brand p { color: var(--text-on-dark-secondary); font-size: .95rem; }
.footer__col h2 { font-style: italic; font-weight: 300; font-size: 1.15rem; margin-bottom: 1.25rem; color: var(--text-on-dark-secondary); }
.footer__col li, .footer__brand li { padding: .3rem 0; font-size: .95rem; }
.footer__col li span { color: var(--text-on-dark-secondary); }
/* Dal 30/09 i titoli delle colonne sono le voci del menu e portano alla loro pagina; nella terza colonna ci sono più sezioni */
.footer__col h2 a { color: inherit; text-decoration: none; }
.footer__col h2 a:hover { color: var(--text-on-dark); text-decoration: underline; text-underline-offset: .25em; }
.footer__col > * + h2 { margin-top: 1.75rem; }
.footer__col > h2:last-child { margin-bottom: 0; }
.footer__legal {
  margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--border-hairline-dark);
  display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; align-items: center; justify-content: space-between;
  font-size: .8rem; color: var(--text-on-dark-secondary);
}
.footer__legal ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.footer__legal a { color: var(--text-on-dark-secondary); }
.footer__langs { letter-spacing: .16em; }
.footer__langs a { display: inline-block; padding: .55rem .3rem; }

/* ============================================================
   Responsive: everything single-column below 768
   ============================================================ */
@media (max-width: 1023px) {
  .exp__grid, .how, .about, .off__text, .member__head { grid-template-columns: 1fr; gap: 3rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .about:not(.about--solo) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2.5rem; align-items: center; }
}
@media (max-width: 767px) {
  .section { padding-block: 5rem; }
  .world .media { height: auto; }
  .world .media .slot { aspect-ratio: 4 / 3; height: auto; }
  .breath { padding-block: 6rem; }
  .worlds { grid-template-columns: 1fr; }
  .world, .world--charter { grid-column: 1 / -1; }
  .world--charter { border-left: 0; border-top: 1px solid var(--border-hairline); padding-left: 0; }
  .world--aviazione { padding-right: 0; }
  .caps { grid-template-columns: 1fr; }
  .cap { border-left: 0; border-top: 1px solid var(--border-hairline); padding-inline: 0; }
  .cap:first-child { border-top: 0; }
  .tier { grid-template-columns: 1fr; gap: .6rem; }
  .tier__fig { text-align: left; }
  .packs__head { flex-direction: column; align-items: flex-start; }
  .footer__grid { grid-template-columns: 1fr; row-gap: 1.75rem; }
  .footer__legal { flex-direction: column; align-items: flex-start; }
  .close__row { flex-direction: column; align-items: flex-start; }
  .tour__body { flex-direction: column; gap: .75rem; }
  .tour__price { text-align: left; }
}

/* ============================================================
   Reduced motion: everything degrades to static
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none; animation: none; }
  .site-header, .nav__wordmark small, .nav__burger span { transition: none; }
  html { scroll-behavior: auto; }
  .media .slot { transition: none; }
  a:hover .media .slot, a:focus-visible .media .slot { transform: none; }
  .marquee__track { animation: none; width: auto; flex-wrap: wrap; }
  .marquee__list { flex-wrap: wrap; gap: 1rem 0; }
  .marquee__list--dup { display: none; }
  .breath__word { opacity: 1; }
  .slot--subject { transform: rotate(-7deg); }
}

/* ============================================================
   Immagini reali negli slot (assets/img). Il gradiente resta come fallback
   finché l'immagine carica; la didascalia dello slot sparisce.
   ============================================================ */
.slot.has-img { position: relative; overflow: hidden; }
.slot.has-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.slot.has-img > figcaption { display: none; }
.inline-slot.has-img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* soggetto scontornato: il PNG sostituisce la forma organica */
.slot--subject.has-img {
  position: absolute; overflow: visible; background: none; border-radius: 0;
  left: 4.55em; top: -.42em; width: 4.4em; height: auto; aspect-ratio: 1908 / 448;
  transform: rotate(-6deg);
}
.slot--subject.has-img > img { position: static; height: auto; object-fit: contain;
  filter: drop-shadow(0 1px 0 rgba(0,51,51,.06)); }
@media (max-width: 767px) {
  .slot--subject.has-img { left: auto; right: -.6em; top: auto; bottom: -.15em; width: 4.2em; height: auto; transform: rotate(-5deg); }
}
/* 10/10 (Julien): ritratto di Stefano senza riquadro (Home «Chi risponde», Chi sono «Fondatore»). Il file è scontornato
   (Adobe) e sfuma in basso da solo: niente fondo, niente angoli, proporzioni naturali, nessun ritaglio. */
.slot.slot--cutout { background: none; border-radius: 0; overflow: visible; }
.slot--cutout.has-img > img { position: static; height: auto; }

/* === HOME V2 === */
/* Home secondo BRIEF-V2 §10. Classi nuove (hhero, tiles, caps--3, off__figure, off__copy, close__privacy):
   le vecchie regole della home (.hero, .breath, .exp, .tour, .slot--subject, .off__text) non sono più usate da
   it/index.html e restano solo per i prototipi storici in radice. */

/* ---------- S1 Hero: media da bordo a bordo, testo in zona sicura sopra un velo, barra in basso ---------- */
.hhero {
  --hh-bar: 5.875rem;            /* altezza della barra .avail--hero su una riga */
  --hh-gap: 2.5rem;
  position: relative; display: grid; grid-template: 1fr / minmax(0, 1fr);
  min-height: 100vh; min-height: 100dvh;
  background: var(--p-900); color: var(--p-white);
}
.hhero__stage {
  grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 100vh; min-height: 100dvh;
  padding-top: calc(var(--header-h) + 1.5rem);
  padding-bottom: calc(var(--hh-bar) + var(--hh-gap) + 2.25rem);
}
.hhero__media { position: absolute; inset: 0; overflow: hidden; }
.hhero__img, .hhero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 75%;
}
.hhero__video { opacity: 0; transition: opacity var(--durata-lunga) var(--ease); }
.hhero__video.is-playing { opacity: 1; }
/* Velo (Julien 19/09): solo dietro al blocco del testo. Parte dall'angolo in basso a sinistra e si spegne a 0
   verso destra e verso il centro in alto, con molte fermate per non lasciare bordi; il resto della foto resta
   pulito. In alto solo una fascia leggera per il menu bianco. */
.hhero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(0 26 27 / .55) 0, rgb(0 26 27 / .32) 12%, rgb(0 26 27 / 0) 28%),
    radial-gradient(ellipse 78% 98% at 0% 100%,
      rgb(0 26 27 / .78) 0%, rgb(0 26 27 / .7) 22%, rgb(0 26 27 / .56) 40%, rgb(0 26 27 / .38) 56%,
      rgb(0 26 27 / .2) 70%, rgb(0 26 27 / .08) 84%, rgb(0 26 27 / 0) 100%);
}
.hhero__text { position: relative; z-index: 1; }
.hhero__h1 {
  max-width: 12.5em; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; line-height: 1.04;
  font-size: clamp(2.125rem, 4vw, 3.75rem); color: var(--p-white); text-wrap: balance;
}
/* 07/10 (Julien): «su misura» accanto a «Riva», sulla stessa riga quando c'è spazio, senza virgola */
.hhero__h1 em { font-style: italic; font-weight: 300; text-transform: none; letter-spacing: 0; }
.hhero__sub {
  margin-top: 1.25rem; max-width: 36ch; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.5;
  color: var(--p-white); text-wrap: pretty;
}
.hhero__bar { grid-area: 1 / 1; align-self: end; position: relative; z-index: 2; padding-bottom: var(--hh-gap); }
/* Julien 19/09: barra lunga quanto la riga del menu, dal logo alle lingue (prima si fermava a 64rem) */
.hhero__bar [data-chrome="avail"] { max-width: none; }
.hhero :focus-visible { outline-color: var(--focus-ring-dark, var(--p-300)); }
.hhero .avail :focus-visible { outline-color: var(--focus-ring); }

@media (max-width: 767px) {
  /* Su mobile la foto sta sopra e la barra a campi impilati sotto, su avorio: il soggetto resta libero
     e tutto, barra compresa, entra nella prima schermata. */
  .hhero { display: flex; flex-direction: column; background: var(--bg-page); }
  .hhero__stage { flex: 1 1 auto; min-height: 21rem; justify-content: flex-start; padding-top: calc(var(--header-h) + 1.25rem); padding-bottom: 2rem; }
  .hhero__img, .hhero__video { object-position: 71% 50%; }
  /* su mobile il testo sta in alto: stesso velo, ma dall'angolo in alto a sinistra verso il centro in basso */
  .hhero__scrim {
    background: radial-gradient(ellipse 125% 72% at 0% 0%,
      rgb(0 26 27 / .78) 0%, rgb(0 26 27 / .7) 22%, rgb(0 26 27 / .56) 40%, rgb(0 26 27 / .38) 56%,
      rgb(0 26 27 / .2) 70%, rgb(0 26 27 / .08) 84%, rgb(0 26 27 / 0) 100%);
  }
  .hhero__h1 { font-size: clamp(1.75rem, 8.2vw, 2.25rem); }
  .hhero__sub { margin-top: .9rem; font-size: 1rem; line-height: 1.45; max-width: 32ch; }
  .hhero__bar { flex: 0 0 auto; padding-block: .75rem .9rem; }
  .hhero__bar .avail--hero { border: 0; padding: 0; background: transparent; border-radius: 0; }
}
/* Tablet: la barra della hero va su due righe (pulsante sotto, chrome.js): più spazio sotto il testo */
@media (min-width: 768px) and (max-width: 1023px) { .hhero { --hh-bar: 9.25rem; } }
@media (min-width: 768px) and (max-height: 640px) {
  .hhero__h1 { font-size: clamp(1.75rem, 3.2vw, 2.75rem); }
}

/* ---------- S2 Sei riquadri: mosaico 3 x 2, spazio 6px, tutto il riquadro è un link ---------- */
.tiles-section { padding: 6px 6px 0; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
/* Tessera orfana: riempie la riga invece di lasciare un buco. Con Off market (30/09) le tessere sono 6 (3 x 2) a Degustazioni spenta;
   con Degustazioni accesa sono 7 e l'ultima prende tutta la riga. */
@media (min-width: 768px) { .tiles > li:last-child:nth-child(3n + 2) { grid-column: span 2; } .tiles > li:last-child:nth-child(3n + 2) .tile { aspect-ratio: 8 / 3; }
  .tiles > li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; } .tiles > li:last-child:nth-child(3n + 1) .tile { aspect-ratio: 4 / 1; } }
@media (max-width: 767px) { .tiles > li:last-child:nth-child(odd) { grid-column: span 2; } .tiles > li:last-child:nth-child(odd) .tile { aspect-ratio: 2 / 1; } }
.tile {
  --tile-scrim: linear-gradient(0deg, rgb(0 26 27 / .88) 0, rgb(0 26 27 / .66) 26%, rgb(0 26 27 / 0) 58%);
  position: relative; display: block; isolation: isolate; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: var(--r-media);
  background: var(--p-800); color: var(--p-white); text-decoration: none;
}
.tile__img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transition: transform 700ms ease-out;
}
.tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--tile-scrim); pointer-events: none; }
.tile__body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
  padding: 1.35rem 1.5rem;
}
.tile__name { font-weight: 500; font-size: clamp(1.05rem, 1.4vw, 1.3rem); letter-spacing: .04em; line-height: 1.25; text-wrap: balance; }
/* --tile-strong: corpo della cifra; la riga senza cifra («preventivo su richiesta») tiene la stessa altezza, così i titoli
   dei riquadri restano allineati (richiesta di Julien, 07/10) */
.tile__price { --tile-strong: 1.2rem; font-size: .95rem; line-height: 1.3; min-height: calc(var(--tile-strong) * 1.3); color: var(--p-100); text-wrap: balance; }
.tile__price strong { font-weight: 500; font-size: var(--tile-strong); color: var(--p-white); font-variant-numeric: tabular-nums; }
.tile:focus-visible { outline: 2px solid var(--p-white); outline-offset: -5px; }
@media (hover: hover) { .tile:hover .tile__img { transform: scale(1.04); } }
@media (max-width: 767px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile {
    --tile-scrim: linear-gradient(0deg, rgb(0 26 27 / .9) 0, rgb(0 26 27 / .74) 44%, rgb(0 26 27 / 0) 82%);
    aspect-ratio: 4 / 5;
  }
  .tile__body { gap: .25rem; padding: .85rem .8rem .9rem; }
  .tile__name { font-size: .95rem; letter-spacing: .02em; }
  .tile__price { font-size: .8125rem; --tile-strong: 1rem; }
}
@media (min-width: 768px) and (max-width: 899px) { .tile__body { padding: 1.1rem 1rem; } .tile__price { font-size: .875rem; --tile-strong: 1.05rem; } }

/* ---------- S3 Tre numeri ---------- */
/* I numeri poggiano sul filetto superiore dei due mondi: una sola griglia rigata, nessun doppio filetto nel vuoto. */
.nums { padding-block: 6rem 0; }
.nums + .section { padding-top: 0; }
/* 3,5 + 3,5 + 5 dodicesimi: il secondo filetto verticale cade sui 7/12, in asse con quello dei due mondi. */
.caps--3 { grid-template-columns: minmax(0, 3.5fr) minmax(0, 3.5fr) minmax(0, 5fr); border-bottom: 0; }
.caps--3 .cap:last-child { padding-left: 2.5rem; }
.caps--3 .cap:first-child { border-left: 0; padding-left: 0; }
.caps--3 .cap__desc { max-width: 30ch; }
/* Unità sempre sotto la cifra e descrizioni sulla stessa riga nelle tre colonne (prima l'unità andava sotto solo dove non ci stava) */
@media (min-width: 768px) {
  .caps--3 { grid-template-rows: auto auto; }
  .caps--3 .cap { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .caps--3 .cap__fig { flex-direction: column; align-items: flex-start; gap: .55rem; }
}
@media (max-width: 767px) {
  .nums { padding-block: 4rem 0; }
  .caps--3 { grid-template-columns: 1fr; }
  .caps--3 .cap:last-child { padding-left: 0; }
  .caps--3 .cap { padding-block: 2rem 1.75rem; }
  .caps--3 .cap__fig { flex-wrap: nowrap; }
}

/* ---------- S5 Off market: figura d'apertura da bordo a bordo, testo su una colonna ---------- */
.off { padding-top: 0; }
.off__figure { aspect-ratio: 21 / 9; max-height: 78vh; }
.off__figure > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.off__copy { display: grid; gap: 1.5rem; justify-items: start; padding-top: 4rem; }
.off__copy .display { max-width: 16ch; }
.off__copy .lead { max-width: 52ch; }
@media (max-width: 767px) {
  .off__figure { aspect-ratio: 4 / 3; }
  .off__copy { padding-top: 2.5rem; }
}

/* ---------- S6 Chi risponde: il link resta largo quanto il suo testo ---------- */
.about__text .tlink { align-self: flex-start; }

@media (max-width: 479px) { .close__row { align-items: stretch; } .close .cta-row { width: 100%; } .close .cta-row .btn { flex: 1 1 100%; } }

/* ---------- S9 Chiusura: riga di riservatezza ---------- */
.close__privacy { margin-top: 2.5rem; max-width: 62ch; font-size: .9rem; line-height: 1.55; color: var(--text-secondary); }

@media (prefers-reduced-motion: reduce) {
  .hhero__video { transition: none; }
  .tile__img { transition: none; }
  .tile:hover .tile__img { transform: none; }
}

/* ---------- S1b Destinazioni: banda sottile tra hero e riquadri ---------- */
.marquee--home { border-block: 0; padding-block: 1rem; background: var(--bg-page); }
.marquee--home .marquee__list li { font-size: clamp(.95rem, 1.35vw, 1.2rem); letter-spacing: .16em; padding-inline: 1.25rem; gap: 2.5rem; }
.marquee--home + .tiles-section { padding-top: 6px; }
@media (max-width: 767px) {
  .marquee--home { padding-block: .8rem; }
  .marquee--home .marquee__list li { font-size: .9rem; padding-inline: 1rem; gap: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee--home .marquee__track { justify-content: center; }
  .marquee--home .marquee__list { justify-content: center; gap: .6rem 0; }
  .marquee--home .marquee__list li::after { display: none; }
}
/* === END HOME V2 === */