/* ==========================================================================
   Enrico La Forgia Designer & Consulting
   Palette: antracite · bianco osso · accento oro spento (ottone)
   Spazi: multipli di 8px · Colonna: 1140px · Griglia: 12 colonne
   ========================================================================== */

/* ---------- Font (ospitati in locale) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Token ---------- */
:root {
  /* Colori – gerarchia: antracite dominante, bianco osso per testi/bordi/icone, oro solo come accento.
     I nomi restano quelli storici: --c-paper è il FONDO (antracite), --c-ink è il TESTO (bianco osso).
     Dentro le zone che restano chiare per via delle immagini (sezione Visore) i due valori si invertono. */
  --c-bg: #1F1E1C;           /* antracite: fondo principale */
  --c-bg-2: #2A2825;         /* antracite più chiaro: sezioni alternate, card */
  --c-bone: #F4F0E8;         /* bianco osso */
  --c-dark: #1F1E1C;         /* antracite fisso (testo sui pulsanti pieni al passaggio, segnaposto gialli) */
  --c-ink: var(--c-bone);    /* testo */
  --c-paper: var(--c-bg);    /* fondo */
  --c-stone: var(--c-bg-2);  /* fondo alternato */
  --c-gold: #B08D57;         /* oro spento / ottone: filetti, numeri, pulsanti principali (5,4:1 su antracite, 4,8:1 su #2A2825) */
  --c-gold-dark: #B08D57;
  --c-gold-light: #C4A26E;   /* oro per testi piccoli e link (6,1:1 o più) */
  --c-accent: #C4A26E;       /* link e testi in oro */
  --c-accent-dark: #E9A389;  /* errori del modulo: terracotta chiara (7:1 su antracite) */
  --c-ink-soft: rgb(244 240 232 / 0.74);   /* 7,7:1 su #2A2825 */
  --c-ink-mute: rgb(244 240 232 / 0.6);    /* 5,4:1 su #2A2825 */
  --c-line: rgb(244 240 232 / 0.14);
  --c-line-strong: rgb(244 240 232 / 0.42); /* bordi dei campi: 3:1 o più */

  /* Grana leggerissima del fondo (SVG statico, nessun file da scaricare) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.94 0 0 0 0 0.91 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Font */
  --ff-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --ff-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Scala tipografica (mobile → desktop) */
  --fs-display: clamp(2.75rem, 1.9rem + 3.4vw, 4.5rem);     /* 44 → 72 */
  --fs-h2: clamp(2.125rem, 1.75rem + 1.6vw, 3rem);           /* 34 → 48 */
  --fs-h3: clamp(1.625rem, 1.45rem + 0.75vw, 2rem);          /* 26 → 32 */
  --fs-h4: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);       /* 18 → 20 */
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);        /* 16 → 18 */
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);    /* 18 → 22 */
  --fs-small: 0.8125rem;                                     /* 13 */

  /* Spazi (multipli di 8) */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-6: 48px;
  --s-8: 64px;
  --s-12: 96px;
  --s-16: 128px;

  --container: 1140px;
  --gutter: 24px;
  --col-gap: 24px;
  --section-y: 80px;
  --header-h: 64px;
}

@media (min-width: 640px) {
  :root {
    --gutter: 32px;
    --col-gap: 32px;
    --section-y: 96px;
  }
}

@media (min-width: 1024px) {
  :root {
    --section-y: 128px;
    --header-h: 88px;
  }
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--grain), var(--c-bg);
  color: var(--c-ink);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.nav-open {
  overflow: hidden;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--c-accent-dark);
}

:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
}

::selection {
  background: var(--c-gold);
  color: var(--c-dark);
}

[id] {
  scroll-margin-top: var(--header-h);
}

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

.skip-link {
  position: absolute;
  top: var(--s-1);
  left: var(--s-1);
  z-index: 100;
  padding: var(--s-1) var(--s-2);
  background: var(--c-bone);
  color: var(--c-dark);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* ---------- Layout ---------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-y);
}

/* Sezioni alternate: l'antracite più chiaro sfuma in alto e in basso nell'antracite principale (nessuno stacco) */
.section--stone {
  background:
    var(--grain),
    linear-gradient(180deg, var(--c-bg) 0, var(--c-bg-2) 200px, var(--c-bg-2) calc(100% - 200px), var(--c-bg) 100%);
}

.section--rule .container {
  border-top: 1px solid var(--c-line);
  padding-top: var(--section-y);
}

.section--rule {
  padding-top: 0;
}

/* ---------- Tipografia ---------- */
.eyebrow {
  margin-bottom: var(--s-2);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.section-title,
.hero__title,
.form__title,
.project-cat__title {
  font-family: var(--ff-serif);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}

.section-title {
  font-size: var(--fs-h2);
}

.section-title em,
.hero__title em {
  font-style: italic;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-ink);
}

/* ---------- Pulsanti e link ----------
   Pillola in vetro: velo bianco osso al 10% con sfocatura di ciò che sta dietro, bordo bianco osso al 36%,
   testo bianco osso, freccia lineare sottile a destra (12px).
   .btn (= .btn--primary, storico)   secondario: bordo e testo bianco osso
   .btn--gold                        principale (Prenota, appuntamenti, Invia la domanda, prova del visore,
                                     Invia le mie scelte): stesso vetro, bordo e testo oro
   .btn--sm                          versione compatta (intestazione, mobile)
   Passaggio del mouse: il velo sale al 20% e la freccia scorre di 4px. Pressione: si abbassa di 1px.
   Contrasto (misurato sul vetro sopra #1F1E1C e #2A2825): bianco osso 7:1 o più; oro #D6B886 5,8:1 (velo 10%),
   al passaggio #E3C796 4,8:1 (velo 20%). Nessuna ombra, durate sotto i 250 ms. */
.btn {
  --btn-fg: var(--c-bone);
  --btn-bd: rgb(244 240 232 / 0.36);
  --btn-bg: rgb(244 240 232 / 0.1);
  --btn-fg-h: var(--c-bone);
  --btn-bd-h: rgb(244 240 232 / 0.62);
  --btn-bg-h: rgb(244 240 232 / 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 13px 28px;
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--ff-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  transition: background-color 180ms var(--ease-out, ease), color 180ms var(--ease-out, ease),
    border-color 180ms var(--ease-out, ease), transform 120ms var(--ease-out, ease);
}

/* senza sfocatura (browser che non la supportano): velo appena più coprente */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .btn {
    --btn-bg: rgb(244 240 232 / 0.12);
  }
}

/* freccia lineare sottile: maschera SVG colorata con il colore del testo */
.btn::after {
  content: "";
  flex: none;
  width: 18px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16.5M12.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16.5M12.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 180ms var(--ease-out, ease);
}

.btn--plain::after,
.btn[aria-expanded]::after {
  display: none;
}

@media (hover: hover) {
  .btn:hover,
  .btn--primary:hover {
    background: var(--btn-bg-h);
    border-color: var(--btn-bd-h);
    color: var(--btn-fg-h);
  }

  .btn:hover::after {
    transform: translateX(4px);
  }
}

.btn[aria-expanded="true"] {
  background: var(--btn-bg-h);
  border-color: var(--btn-bd-h);
}

.btn:active {
  transform: translateY(1px);
  transition-duration: 60ms;
}

.btn:focus-visible {
  outline: 2px solid var(--btn-fg);
  outline-offset: 3px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: progress;
}

/* zone con i token originali (footer, configuratore, numeri): stesso vetro chiaro */
.on-dark .btn,
.site-footer .btn,
.vrm .btn {
  --btn-fg: var(--c-bone);
  --btn-fg-h: var(--c-bone);
}

/* appuntamenti: stesso vetro, bordo e testo oro */
.btn.btn--gold {
  --btn-fg: #D6B886;
  --btn-bd: var(--c-gold);
  --btn-fg-h: #E3C796;
  --btn-bd-h: #C4A26E;
}

/* sezione Visore su desktop: il testo sta sul fondale chiaro dei fotogrammi */
@media (min-width: 1024px) {
  .vr.is-spin .btn {
    --btn-fg: #1F1E1C;
    --btn-bd: rgb(31 30 28 / 0.42);
    --btn-bg: rgb(255 255 255 / 0.22);
    --btn-fg-h: #1F1E1C;
    --btn-bd-h: rgb(31 30 28 / 0.7);
    --btn-bg-h: rgb(255 255 255 / 0.42);
  }

  /* principale sul fondale chiaro: oro scuro (5,5:1 o più sul fondale) */
  .vr.is-spin .btn.btn--gold {
    --btn-fg: #6B4F24;
    --btn-bd: #8C6B3B;
    --btn-fg-h: #5A421E;
    --btn-bd-h: #6B4F24;
  }
}

/* compatto: intestazione e mobile */
.btn--sm {
  min-height: 44px;
  padding: 10px 20px;
  gap: 10px;
  font-size: 0.9375rem;
}

.btn--sm::after {
  width: 15px;
}

@media (max-width: 479.98px) {
  .btn {
    padding: 12px 22px;
    font-size: 0.9375rem;
  }

  .btn--sm {
    padding: 9px 16px;
  }
}

/* coppia di pulsanti degli appuntamenti */
.book-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.link-arrow::after {
  content: "→";
  transition: transform 0.2s ease;
}

.link-arrow:hover::after {
  transform: translateX(4px);
}

.link-arrow--small {
  margin-top: var(--s-1);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
}

/* ---------- Intestazione ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--c-paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* la pagina parte sotto l'intestazione (la hero gestisce da sé lo spazio) */
main > :first-child:not(.hero-seq) {
  margin-top: var(--header-h);
}

.site-header.is-scrolled {
  background: rgb(31 30 28 / 0.97);
  border-bottom-color: var(--c-line);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header.is-scrolled {
    background: rgb(31 30 28 / 0.84);
    -webkit-backdrop-filter: saturate(1.2) blur(12px);
    backdrop-filter: saturate(1.2) blur(12px);
  }
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

/* con il menu aperto niente trasformazioni né filtri: renderebbero il menu (fisso) relativo all'intestazione */
body.nav-open .site-header {
  transform: none;
  background: var(--c-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--header-h);
  transition: height 0.2s ease;
}

/* Logo: simbolo come immagine, nome e payoff come testo (leggibili a ogni misura) */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-right: auto;
  color: var(--c-ink);
  text-decoration: none;
}

/* al passaggio il logo resta com'è (nel footer --c-ink è antracite: il testo spariva); solo il link dell'intestazione
   si schiarisce appena */
a.brand {
  transition: opacity 180ms ease;
}

@media (hover: hover) {
  a.brand:hover { opacity: 0.86; }
}

.brand__mark {
  flex: none;
  width: auto;
  height: 44px;
}

.brand__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1;
  white-space: nowrap;
}

.brand__name {
  font-family: var(--ff-sans);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand__tagline {
  font-family: var(--ff-sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.brand--light {
  color: var(--c-paper);
}

.site-nav__list {
  display: flex;
  gap: var(--s-4);
}

.site-nav__list a {
  position: relative;
  display: inline-block;
  padding-block: var(--s-1);
  color: var(--c-ink);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.site-nav__list a:hover::after,
.site-nav__list a[aria-current="true"]::after {
  transform: scaleX(1);
}

.site-nav__cta {
  display: none;
}

.show-sm {
  display: none;
}

/* Toggle menu (mobile/tablet) */
.nav-toggle {
  display: none;
  position: relative;
  width: 48px;
  height: 48px;
  margin-right: calc(-1 * var(--s-1));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
}

.nav-toggle__bar {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.25s ease, top 0.25s ease;
}

.nav-toggle__bar:nth-of-type(2) { top: 19px; }
.nav-toggle__bar:nth-of-type(3) { top: 28px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-of-type(2) {
  top: 24px;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-of-type(3) {
  top: 24px;
  transform: rotate(-45deg);
}

@media (min-width: 1024px) {
  .brand__mark {
    height: 56px;
  }

  .brand__name {
    font-size: 1.25rem;
  }

  .brand__tagline {
    font-size: 0.6875rem;
    letter-spacing: 0.32em;
  }

  .site-nav {
    display: flex;
    align-items: center;
    margin-right: var(--s-4);
  }

  .site-header.is-scrolled {
    --header-h: 72px;
  }
}

@media (max-width: 1023.98px) {
  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
    padding: var(--s-6) var(--gutter);
    background: var(--c-paper);
    border-top: 1px solid var(--c-line);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }

  .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease;
  }

  .site-nav__list {
    flex-direction: column;
    gap: 0;
  }

  .site-nav__list li {
    border-bottom: 1px solid var(--c-line);
  }

  .site-nav__list a {
    display: block;
    padding-block: var(--s-2);
    font-family: var(--ff-serif);
    font-size: var(--fs-h3);
    font-weight: 500;
  }

  .site-nav__list a::after {
    display: none;
  }

  .site-nav__cta {
    display: block;
    align-self: flex-start;
  }

  /* nel menu mobile la scelta si apre sotto il pulsante, nel flusso */
  .site-nav__cta .book__menu {
    position: static;
    margin-top: 12px;
    box-shadow: none;
  }

  /* con il menu aperto basta il "Prenota" del menu */
  body.nav-open .site-header__cta {
    visibility: hidden;
  }
}

/* Telefoni: pulsante corto, nome su due righe, payoff nascosto (solo nell'intestazione) */
@media (max-width: 479.98px) {
  .hide-sm { display: none; }
  .show-sm { display: inline; }

  .site-header__inner {
    gap: var(--s-1);
  }

  .site-header .brand__mark {
    height: 40px;
  }

  .site-header .brand__name {
    font-size: 0.9375rem;
    line-height: 1.15;
  }

  .site-header .brand__name-end {
    display: block;
  }

  .site-header .brand__tagline {
    display: none;
  }
}

/* ---------- 1. Apertura: dalla piantina al 3D (sequenza di fotogrammi, js/sequenza.js) ----------
   Fondo bianco osso pieno; l'appartamento si disegna nello spazio libero lasciato dal testo:
   a destra del testo su desktop, sotto il testo sugli schermi verticali. */
.hero-seq {
  position: relative;
  background: var(--c-paper);
}

.hero-seq__sticky {
  position: relative;
  height: 100vh;
  height: 100svh;
  height: 100dvh;   /* segue la barra di Safari iOS */
  min-height: 560px;
  overflow: hidden;
}

/* Con JavaScript (e senza riduzione del movimento) la scena resta ferma mentre si scorre */
.hero-seq.is-seq .hero-seq__track {
  height: 280vh;
}

.hero-seq.is-seq .hero-seq__sticky {
  position: sticky;
  top: 0;
}

.hero-seq__media {
  position: absolute;
  inset: 0;
  background: var(--c-bg);
}

/* Prima immagine: posizionata dallo script come la tela; senza script, a destra del testo */
.hero-seq__poster {
  position: absolute;
  top: calc(var(--header-h) + 32px);
  right: 32px;
  width: 56%;
  height: calc(100% - var(--header-h) - 64px);
  max-width: none;
  object-fit: contain;
}

.hero-seq.is-placed .hero-seq__poster {
  right: auto;
  object-fit: fill;
}

.hero-seq__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hero-seq.is-ready .hero-seq__canvas {
  opacity: 1;
}

.hero-seq__frame {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 100%;
  padding-top: var(--header-h);
  pointer-events: none;
}

.hero-seq__content {
  width: min(30rem, 33%);
  padding-block: var(--s-4);
  pointer-events: auto;
}

.hero-seq__content .hero__title {
  font-size: clamp(2rem, 1.1rem + 2vw, 3.5rem);
  line-height: 1.06;
}

.hero-seq__content .lead {
  margin-top: var(--s-3);
  max-width: 34ch;
  color: var(--c-ink-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: var(--s-4);
}

/* Schermi verticali (telefoni, tablet in verticale): testo in alto, appartamento in verticale sotto */
@media (orientation: portrait) and (max-width: 1199.98px), (max-width: 559.98px) {
  .hero-seq.is-seq .hero-seq__track {
    height: 240vh;
  }

  .hero-seq__frame {
    align-items: flex-start;
    padding-top: calc(var(--header-h) + var(--s-3));
  }

  .hero-seq__content {
    width: 100%;
    max-width: 36rem;
    padding-block: 0;
  }

  .hero-seq__content .hero__title {
    font-size: clamp(2rem, 1.3rem + 3.2vw, 3rem);
  }

  .hero-seq__content .lead {
    margin-top: var(--s-2);
    font-size: clamp(1rem, 0.92rem + 0.4vw, 1.25rem);
  }

  .hero__actions {
    margin-top: var(--s-3);
  }

  .hero-seq__poster {
    top: auto;
    bottom: 16px;
    left: 16px;
    right: 16px;
    width: auto;
    height: 52%;
  }

  .hero-seq.is-placed .hero-seq__poster {
    bottom: auto;
  }
}

@media (max-width: 479.98px) {
  .hero-seq__content .eyebrow {
    margin-bottom: var(--s-1);
    font-size: 0.6875rem;
  }

  .hero-seq__content .hero__title {
    font-size: clamp(1.875rem, 1.2rem + 3.4vw, 2.25rem);
  }

  .hero-seq__content .lead {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .hero__actions {
    gap: 8px;
    margin-top: var(--s-2);
  }

  .hero__actions .btn {
    min-height: 44px;
    padding: 10px 20px;
    font-size: 0.9375rem;
  }
}

/* Telefoni bassi (iPhone SE, Safari con le barre): il sottotitolo lascia spazio all'appartamento */
@media (orientation: portrait) and (max-width: 899.98px) and (max-height: 700px) {
  .hero-seq__content .lead {
    display: none;
  }
}

/* Telefoni in orizzontale: testo a sinistra come su desktop, più compatto */
@media (orientation: landscape) and (max-height: 560px) {
  .hero-seq__sticky {
    min-height: 0;
  }

  .hero-seq__content .lead {
    display: none;
  }

  .hero-seq__content .hero__title {
    font-size: clamp(1.5rem, 1rem + 2vw, 2rem);
  }

  .hero__actions .btn {
    min-height: 40px;
    padding: 8px 16px;
    font-size: 0.875rem;
  }
}

/* ---------- 1a. Lo studio in numeri ---------- */
.numbers {
  padding-block: var(--s-8);
  /* passaggio morbido: antracite → antracite più chiaro → antracite (verso il visore) */
  position: relative;
  background:
    var(--grain),
    linear-gradient(180deg, var(--c-bg) 0, var(--c-bg-2) 140px, var(--c-bg-2) calc(100% - 120px), var(--c-bg) 100%);
  color: var(--c-ink);
}

.numbers__title {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold-light);
}

.numbers__list {
  display: grid;
  gap: var(--s-4) var(--col-gap);
  margin-top: var(--s-4);
}

.number {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--s-1);
  padding-top: var(--s-3);
  border-top: 1px solid rgb(176 141 87 / 0.55);
}

.number dt {
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: rgb(244 240 232 / 0.72);
}

.number__value {
  font-family: var(--ff-serif);
  font-size: clamp(3.25rem, 2.2rem + 3.6vw, 5.5rem);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--c-gold);
}

.numbers__area {
  margin-top: var(--s-4);
  font-size: 0.9375rem;
  color: rgb(244 240 232 / 0.72);
}

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

@media (min-width: 1024px) {
  .numbers {
    padding-block: var(--s-12);
  }
}

/* ---------- 1b. Il visore (ruota con lo scorrimento, js/visore-rotante.js) ---------- */
.vr {
  position: relative;
  /* sito scuro: la sezione è antracite; l'immagine del visore (fondale chiaro, non rigenerata) sfuma nel fondo */
  background: var(--c-bg);
  color: var(--c-ink);
}

@media (min-width: 1024px) {
  /* desktop con rotazione: il testo sta sopra il fondale chiaro dei fotogrammi, quindi torna antracite */
  .vr.is-spin {
    --c-ink: #1F1E1C;
    --c-paper: #F4F0E8;
    --c-accent: #76592F;
    --c-ink-soft: rgb(31 30 28 / 0.74);
    --c-ink-mute: rgb(31 30 28 / 0.6);
    --c-line: rgb(31 30 28 / 0.16);
    --c-line-strong: rgb(31 30 28 / 0.4);
  }

  /* velature antracite in alto e in basso: passaggio morbido dalle sezioni scure */
  .vr.is-spin .vr__sticky::before,
  .vr.is-spin .vr__sticky::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    height: 22vh;
    pointer-events: none;
  }

  .vr.is-spin .vr__sticky::before {
    top: 0;
    background: linear-gradient(180deg, var(--c-bg) 0, rgb(31 30 28 / 0.55) 40%, rgb(31 30 28 / 0) 100%);
  }

  .vr.is-spin .vr__sticky::after {
    bottom: 0;
    background: linear-gradient(0deg, var(--c-bg) 0, rgb(31 30 28 / 0.55) 40%, rgb(31 30 28 / 0) 100%);
  }

  .vr.is-spin .vr__text {
    z-index: 2;
  }
}

.vr__sticky {
  position: relative;
  overflow: hidden;
}

.vr__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-height: 100svh;
  width: 100%;
  background: #d9c9b8;
}

.vr__poster,
.vr__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vr__canvas {
  display: block;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.vr__hit {
  position: absolute;
  /* solo il visore, al centro dell'immagine */
  inset: 22% 30% 22% 30%;
  border: 0;
  border-radius: 40%;
  background: transparent;
  cursor: zoom-in;
}

.vr__hit:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 6px;
}

.vr__text .section-title {
  font-size: clamp(2.5rem, 1.6rem + 2.8vw, 4.25rem);
}

.vr__note {
  margin-top: var(--s-2);
  max-width: 34ch;
  font-family: var(--ff-serif);
  font-size: var(--fs-h3);
  font-style: italic;
  line-height: 1.25;
  color: var(--c-ink-soft);
}

.vr__cta {
  margin-top: var(--s-4);
}

/* Con JavaScript e senza riduzione del movimento: la scena resta ferma mentre il visore ruota */
.vr.is-spin .vr__track {
  height: 240vh;
}

.vr.is-spin .vr__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}

.vr.is-spin .vr__poster {
  opacity: 0;
}

.vr.is-spin.is-ready .vr__canvas {
  opacity: 1;
}

.vr.is-spin.is-fallback:not(.is-ready) .vr__poster {
  opacity: 1;
}

.vr.is-spin .vr__hit {
  pointer-events: none;
}

.vr.is-spin.is-front .vr__hit,
.vr.is-spin.is-fallback .vr__hit {
  pointer-events: auto;
}

/* Testo: compare in dissolvenza solo a visore fermo e frontale */
.vr.is-spin .vr__text > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.vr.is-spin .vr__text > :nth-child(2) { transition-delay: 0.08s; }
.vr.is-spin .vr__text > :nth-child(3) { transition-delay: 0.16s; }
.vr.is-spin .vr__text > :nth-child(4) { transition-delay: 0.24s; }

.vr.is-spin.is-front .vr__text > *,
.vr.is-spin.is-fallback .vr__text > * {
  opacity: 1;
  transform: none;
}

@media (min-width: 1024px) {
  /* il visore è disegnato spostato a destra (js/visore-rotante.js): il clic segue */
  .vr.is-spin .vr__hit {
    inset: 22% 15% 22% 45%;
  }
}

@media (min-width: 1024px) {
  .vr.is-spin .vr__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    max-height: none;
  }

  /* Testo a sinistra, nella zona chiara del fondale, lontano dal visore (spostato a destra dallo script);
     senza rotazione (movimento ridotto) il testo resta sotto l'immagine */
  .vr.is-spin .vr__text {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .vr.is-spin .vr__text > * {
    max-width: min(26ch, 30vw);
  }

  .vr:not(.is-spin) .vr__text {
    padding-block: var(--s-6) var(--s-8);
  }

  .vr__text .section-title {
    font-size: clamp(2.25rem, 1rem + 2.6vw, 4rem);
  }

  .vr__note {
    font-size: clamp(1.25rem, 0.9rem + 0.7vw, 1.75rem);
  }

  .vr__cta {
    pointer-events: auto;
  }
}

@media (max-width: 767.98px) {
  /* Mobile: visore 4:3 a tutta larghezza */
  .vr__media {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 1023.98px) {
  /* Mobile e tablet: testo sotto l'immagine; i bordi dell'immagine sfumano nel fondale */
  .vr__media {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
  }

  .vr__text {
    padding-block: var(--s-4) var(--s-6);
  }

  .vr.is-spin .vr__sticky {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .vr.is-spin .vr__text {
    padding-block: var(--s-3) 0;
  }
}

/* ---------- Intestazioni di sezione ---------- */
.section-head {
  margin-bottom: var(--s-8);
}

.section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
}

/* ---------- 3. Progetti: titoli dei gruppi ---------- */
.project-cat__title {
  font-size: var(--fs-h3);
}

.project-cat__text {
  max-width: 48ch;
  font-size: 0.9375rem;
  color: var(--c-ink-soft);
}

/* ---------- 4. Studio ---------- */
.about {
  display: grid;
  gap: var(--s-4) var(--col-gap);
}

.about__body {
  display: grid;
  gap: var(--s-3);
  max-width: 68ch;
}

.about__body p:not(.lead) {
  color: var(--c-ink-soft);
}

.team-photo {
  margin-top: var(--s-12);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-stone);
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 28% 50%;
}

.team {
  display: grid;
  gap: 0 var(--col-gap);
  margin-top: var(--s-4);
}

.team li {
  display: grid;
  gap: 4px;
  padding-block: var(--s-3);
  border-top: 1px solid var(--c-line-strong);
}

.team__name {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
}

.team__role {
  font-family: var(--ff-serif);
  font-size: var(--fs-h4);
  font-style: italic;
  color: var(--c-ink-soft);
}

@media (min-width: 640px) {
  .team-photo {
    aspect-ratio: 2 / 1;
  }

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

@media (min-width: 1024px) {
  .about {
    grid-template-columns: repeat(12, 1fr);
  }

  .about__head {
    grid-column: 1 / span 4;
  }

  .about__body {
    grid-column: 6 / -1;
    padding-top: var(--s-4);
  }
}

/* ---------- 5. Contatti ---------- */
.contact {
  display: grid;
  gap: var(--s-8) var(--col-gap);
}

.contact__list {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.contact__list > div {
  display: grid;
  gap: 4px;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
}

.contact__list dt {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.contact__list dd a[href^="tel:"],
.contact__list dd a[href^="mailto:"] {
  color: var(--c-ink);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact__list dd a[href^="tel:"] {
  font-size: var(--fs-h4);
}

.contact__list dd a[href^="tel:"]:hover,
.contact__list dd a[href^="mailto:"]:hover {
  color: var(--c-accent);
}

.social {
  display: flex;
  gap: var(--s-1);
  margin-top: var(--s-4);
  margin-left: calc(-1 * var(--s-1) - 4px);
}

.social a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--c-ink);
}

.social a:hover {
  color: var(--c-accent);
}

.social svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social svg .fill {
  fill: currentColor;
  stroke: none;
}

@media (min-width: 1024px) {
  .contact {
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
  }

  .contact__info {
    grid-column: 1 / span 5;
  }

  .contact__form-wrap {
    grid-column: 7 / -1;
  }
}

/* ---------- Modulo ---------- */
.form {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-3);
  background: var(--c-bg);
  border-top: 1px solid var(--c-gold);
}

.form__title {
  font-size: var(--fs-h3);
}

.form__intro {
  margin-top: calc(-1 * var(--s-1));
  font-size: 0.9375rem;
  color: var(--c-ink-soft);
}

.form__row {
  display: grid;
  gap: var(--s-3);
}

.field {
  display: grid;
  gap: var(--s-1);
}

.field label {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.field__opt {
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--c-ink-mute);
}

.field input:not([type="checkbox"]),
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px var(--s-2);
  border: 0;
  border-bottom: 1px solid var(--c-line-strong);
  border-radius: 0;
  background: var(--c-stone);
  color: var(--c-ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
}

.field textarea {
  resize: vertical;
  min-height: 128px;
}

.field select {
  padding-right: var(--s-6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23F4F0E8' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-2) center;
  cursor: pointer;
}

.field input:not([type="checkbox"]):focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--c-gold-light);
  box-shadow: inset 0 -1px 0 var(--c-gold-light);
}

.field.is-invalid input,
.field.is-invalid select {
  border-bottom-color: var(--c-accent-dark);
  box-shadow: inset 0 -1px 0 var(--c-accent-dark);
}

.field__error {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-accent-dark);
}

.field--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: var(--s-2);
}

.field--check input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--c-gold);
  cursor: pointer;
}

.field--check label {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--c-ink-soft);
}

.field--check .field__error {
  grid-column: 2;
}

.form__submit {
  justify-self: start;
  margin-top: var(--s-1);
}

.form__status {
  font-size: 0.875rem;
  color: var(--c-ink-soft);
}

.form__status:empty {
  display: none;
}

.form__status[data-kind="error"] {
  color: var(--c-accent-dark);
}

.form__status a {
  color: var(--c-accent);
}

@media (min-width: 640px) {
  .form {
    padding: var(--s-6);
  }

  .form__row {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-3);
  }
}

@media (max-width: 479.98px) {
  .form__submit {
    justify-self: stretch;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  --c-ink: #1F1E1C;
  --c-paper: #F4F0E8;
  padding-top: var(--s-8);
  padding-bottom: var(--s-6);
  background: var(--c-ink);
  color: var(--c-paper);
  font-size: 0.9375rem;
}

.site-footer a {
  color: var(--c-paper);
  text-decoration-color: rgb(244 240 232 / 0.4);
}

.site-footer a:hover {
  color: var(--c-paper);
  text-decoration-color: var(--c-paper);
}

.site-footer__top {
  display: grid;
  gap: var(--s-4) var(--col-gap);
  padding-bottom: var(--s-6);
}

.site-footer__logo .brand__mark {
  height: 56px;
}

.site-footer__addr {
  color: rgb(244 240 232 / 0.72);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
}

.site-footer__copy {
  padding-top: var(--s-3);
  border-top: 1px solid rgb(244 240 232 / 0.16);
  font-size: var(--fs-small);
  color: rgb(244 240 232 / 0.56);
}

@media (min-width: 1024px) {
  .site-footer__top {
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
  }

  .site-footer__logo {
    grid-column: 1 / span 4;
  }

  .site-footer__addr {
    grid-column: 6 / span 4;
  }

  .site-footer__links {
    grid-column: 10 / -1;
    justify-content: flex-end;
  }
}

/* ---------- WhatsApp ---------- */
.wa-fab {
  position: fixed;
  right: var(--s-2);
  bottom: var(--s-2);
  z-index: 40;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--c-gold); /* cerchio oro: resta visibile anche sul footer antracite */
  border-radius: 50%;
  background: var(--c-dark);
  color: var(--c-gold-light);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.wa-fab:hover {
  background: var(--c-gold);
  color: var(--c-dark);
}

.wa-fab svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

@media (min-width: 1024px) {
  .wa-fab {
    right: var(--s-4);
    bottom: var(--s-4);
  }
}

/* ---------- Modalità visore: configuratore delle stanze (js/configuratore.js) ---------- */
html.vr-open {
  overflow: hidden;
}

.vrm {
  --c-ink: #1F1E1C;
  --c-paper: #F4F0E8;
  --vrm-bg: #1F1E1C;
  --vrm-line: rgb(244 240 232 / 0.14);
  --vrm-soft: rgb(244 240 232 / 0.68);
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--vrm-bg);
  color: var(--c-paper);
  overflow: hidden;
}

.vrm::backdrop {
  background: var(--vrm-bg);
}

.vrm[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.vrm :focus-visible {
  outline: 2px solid var(--c-paper);
  outline-offset: 3px;
}

/* Barra alta: titolo, stanze, luce, uscita */
.vrm__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-3);
  padding: 12px clamp(20px, 2.6vw, 40px);
}

.vrm__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vrm-soft);
}

.vrm__title {
  margin-top: 2px;
  font-family: var(--ff-serif);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.1;
}

.vrm__rooms {
  display: flex;
  gap: var(--s-4);
}

.vrm__room {
  position: relative;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--vrm-soft);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.2s ease;
}

.vrm__room::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 2px;
  background: #B08D57;
  transform: scaleX(0);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.vrm__room:hover,
.vrm__room[aria-selected="true"] {
  color: var(--c-paper);
}

.vrm__room[aria-selected="true"]::after {
  transform: scaleX(1);
}

.vrm__tools {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s-2);
}

.vrm__light {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--vrm-line);
  border-radius: 999px;
}

.vrm__light-btn {
  min-height: 34px;
  border-radius: 999px;
  padding: 0 var(--s-2);
  border: 0;
  background: none;
  color: var(--vrm-soft);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.vrm__light-btn[aria-pressed="true"] {
  background: var(--c-paper);
  color: var(--c-ink);
}

.vrm__exit {
  min-height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgb(244 240 232 / 0.45);
  background: transparent;
  color: var(--c-paper);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.vrm__exit:hover {
  background: var(--c-paper);
  color: var(--c-ink);
}

/* Immagine: cornice da visore, sempre intera (16:9), mai coperta dai comandi */
.vrm__view {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 clamp(20px, 2.6vw, 40px);
  container-type: size;
}

.vrm__stage {
  position: relative;
  width: min(100cqw, 100cqh * 16 / 9);
  aspect-ratio: 16 / 9;
  border-radius: clamp(16px, 2.2vw, 32px);
  overflow: hidden;
  background: #1c1a18;
  box-shadow: 0 24px 80px rgb(0 0 0 / 0.55);
  isolation: isolate;
}

.vrm__scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.65s ease;
}

.vrm__scene.is-on {
  opacity: 1;
}

.vrm__slot {
  position: absolute;
  inset: 0;
}

.vrm__layer {
  position: absolute;
  display: block;
  max-width: none;
  opacity: 0;
  transition: opacity 0.65s ease;
}

.vrm__layer--base {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
}

.vrm__layer.is-on {
  opacity: 1;
}

.vrm__frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.07),
    inset 0 0 clamp(40px, 7vw, 120px) rgb(10 9 8 / 0.42);
}

.vrm__loading {
  position: absolute;
  left: 50%;
  bottom: var(--s-3);
  z-index: 3;
  transform: translateX(-50%);
  padding: 6px 14px;
  background: rgb(31 30 28 / 0.7);
  font-size: 0.8125rem;
  color: var(--vrm-soft);
}

/* Ingresso: zoom dentro la lente del visore */
.vrm__intro {
  position: fixed;
  z-index: 10;
  background-color: var(--vrm-bg);
  background-size: cover;
  background-position: 50% 50%;
  pointer-events: none;
  opacity: 0;
}

.vrm.is-entering .vrm__intro {
  animation: vrm-zoom 1.15s cubic-bezier(0.55, 0, 0.35, 1) forwards;
}

.vrm.is-entering:not(.is-entered) .vrm__stage,
.vrm.is-entering:not(.is-entered) .vrm__top,
.vrm.is-entering:not(.is-entered) .vrm__bar {
  opacity: 0;
}

.vrm__stage,
.vrm__top,
.vrm__bar {
  transition: opacity 0.6s ease;
}

@keyframes vrm-zoom {
  0% { opacity: 1; transform: scale(1); filter: brightness(1); }
  70% { opacity: 1; transform: scale(7); filter: brightness(0.12); }
  100% { opacity: 0; transform: scale(9); filter: brightness(0); }
}

/* Barra bassa: elemento, opzioni (miniature con frecce), azioni */
.vrm__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "cats   note   keys"
    "picker picker actions";
  align-items: center;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-2) clamp(20px, 2.6vw, 40px) var(--s-2);
}

.vrm__cats {
  grid-area: cats;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.vrm__cat {
  min-height: 36px;
  padding: 0 var(--s-2);
  border-radius: 999px;
  border: 1px solid var(--vrm-line);
  background: none;
  color: var(--vrm-soft);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.vrm__cat:hover {
  color: var(--c-paper);
  border-color: rgb(244 240 232 / 0.4);
}

.vrm__cat[aria-selected="true"] {
  background: rgb(244 240 232 / 0.1);
  border-color: rgb(244 240 232 / 0.7);
  color: var(--c-paper);
}

.vrm__keys {
  grid-area: keys;
  justify-self: end;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: rgb(244 240 232 / 0.45);
}

.vrm__picker {
  grid-area: picker;
  display: flex;
  align-items: center;
  gap: var(--s-1);
  min-width: 0;
}

.vrm__arrow {
  flex: none;
  width: 40px;
  height: 72px;
  border: 1px solid var(--vrm-line);
  background: none;
  color: var(--c-paper);
  font-family: var(--ff-serif);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.vrm__arrow:hover {
  background: rgb(244 240 232 / 0.1);
}

.vrm__options {
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.vrm__options::-webkit-scrollbar {
  display: none;
}

.vrm__opt {
  position: relative;
  flex: none;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  background: #2e2b28;
  cursor: pointer;
  outline-offset: 2px;
}

.vrm__opt img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  transition: opacity 0.2s ease;
}

.vrm__opt::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgb(244 240 232 / 0.18);
  transition: box-shadow 0.2s ease;
}

.vrm__opt:hover img,
.vrm__opt[aria-checked="true"] img {
  opacity: 1;
}

.vrm__opt[aria-checked="true"]::after {
  box-shadow: inset 0 0 0 2px var(--c-paper), inset 0 0 0 4px rgb(31 30 28 / 0.6);
}

.vrm__opt span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.vrm__current {
  margin-left: var(--s-2);
  font-family: var(--ff-serif);
  font-size: 1.5rem;
  font-weight: 500;
  white-space: nowrap;
}

.vrm__note {
  grid-area: note;
  justify-self: start;
  font-size: 0.8125rem;
  color: rgb(244 240 232 / 0.55);
}

.vrm__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.vrm__reset {
  min-height: 48px;
  padding: 0 var(--s-2);
  border: 0;
  background: none;
  color: var(--vrm-soft);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.vrm__reset:hover {
  color: var(--c-paper);
}

@media (max-width: 1023.98px) {
  /* Tablet e mobile: immagine a tutta larghezza, comandi sotto, pulsanti fissi in basso */
  .vrm[open] {
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .vrm__top {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "head  tools"
      "rooms rooms";
    gap: var(--s-1) var(--s-2);
    padding: var(--s-2) var(--gutter) 0;
  }

  .vrm__head { grid-area: head; }
  .vrm__tools { grid-area: tools; }

  .vrm__title {
    font-size: 1.375rem;
  }

  .vrm__rooms {
    grid-area: rooms;
    gap: var(--s-3);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .vrm__rooms::-webkit-scrollbar {
    display: none;
  }

  .vrm__room {
    flex: none;
  }

  .vrm__view {
    display: block;
    padding: 0;
    container-type: normal;
  }

  .vrm__stage {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
  }

  .vrm__bar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "cats"
      "picker"
      "note"
      "actions";
    gap: var(--s-2);
    padding: var(--s-2) var(--gutter) 0;
  }

  .vrm__keys {
    display: none;
  }

  .vrm__cats {
    flex-wrap: nowrap;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .vrm__cats::-webkit-scrollbar {
    display: none;
  }

  .vrm__cat {
    flex: none;
  }

  .vrm__picker {
    flex-wrap: wrap;
  }

  .vrm__options {
    flex: 1 1 0;
  }

  .vrm__arrow {
    width: 36px;
    height: 64px;
  }

  .vrm__opt {
    width: 64px;
    height: 64px;
  }

  .vrm__current {
    order: -1;
    flex-basis: 100%;
    margin: 0;
    font-size: 1.375rem;
  }

  .vrm__bar {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  .vrm__actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom));
    background: var(--vrm-bg);
    border-top: 1px solid var(--vrm-line);
  }

  .vrm__reset {
    flex: 1 1 0;
    border: 1px solid rgb(244 240 232 / 0.45);
    border-radius: 999px;
    text-decoration: none;
  }

  .vrm__send {
    flex: 2 1 0;
  }
}

@media (max-width: 479.98px) {
  .vrm__eyebrow {
    display: none;
  }
}

/* ---------- Segnaposto da confermare con lo studio (TESTI-DA-CONFERMARE.md) ---------- */
.segnaposto {
  padding: 0.05em 0.35em;
  border-radius: 2px;
  background: #f3d27a;
  color: var(--c-dark);
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- 3b. Fiducia: numeri e recensioni ---------- */
/* ---------- 4b. Domande frequenti (fisarmonica) ---------- */
.faq-wrap {
  display: grid;
  gap: 0 var(--col-gap);
}

.faq {
  border-top: 1px solid var(--c-line-strong);
}

.faq__item {
  border-bottom: 1px solid var(--c-line);
}

.faq__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  min-height: 64px;
  padding: var(--s-2) 0;
  border: 0;
  background: none;
  color: var(--c-ink);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color var(--t-1) var(--ease-out);
}

.faq__btn:hover {
  color: var(--c-gold-light);
}

.faq__icon {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  transition: transform var(--t-2) var(--ease-out), border-color var(--t-1) var(--ease-out), background-color var(--t-1) var(--ease-out);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--t-2) var(--ease-out);
}

.faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__btn:hover .faq__icon {
  border-color: var(--c-gold);
}

.faq__btn[aria-expanded="true"] .faq__icon {
  transform: rotate(180deg);
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-dark);
}

.faq__btn[aria-expanded="true"] .faq__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

/* altezza animata: la riga della griglia passa da 0 a "auto" */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--t-3) var(--ease-out), visibility 0s linear var(--t-3);
}

.faq__a.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--t-3) var(--ease-out), visibility 0s;
}

.faq__inner {
  min-height: 0;
  overflow: hidden;
  color: var(--c-ink-soft);
}

.faq__inner > * {
  max-width: 68ch;
}

.faq__inner > :last-child {
  padding-bottom: var(--s-3);
}

.faq__inner > * + * {
  margin-top: var(--s-2);
}

@media (min-width: 1024px) {
  .faq-wrap {
    grid-template-columns: 4fr 8fr;
    align-items: start;
  }
}

/* ---------- Modulo: titolo, promessa, passi ---------- */
.form__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-1) var(--s-3);
}

.form__promise {
  font-size: 0.875rem;
  color: var(--c-ink-soft);
}

/* ---------- Visore: azioni ---------- */
.vr__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-4);
}

.vr__actions .vr__cta {
  margin-top: 0;
}

.vr__try {
  padding: 0 0 2px;
  border-top: 0;
  border-inline: 0;
  background: none;
  color: var(--c-accent);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.vr__free {
  margin-top: var(--s-2);
  font-size: 0.875rem;
  color: var(--c-ink-soft);
}

.vr.is-spin .vr__actions,
.vr.is-spin .vr__free {
  pointer-events: auto;
}


/* ==========================================================================
   Micro-interazioni: risposte immediate (140–280 ms), accelerazione naturale.
   Hero, visore rotante e immagini del configuratore non si toccano.
   ========================================================================== */
:root {
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-1: 140ms;
  --t-2: 200ms;
  --t-3: 280ms;
}

a {
  transition: color var(--t-1) var(--ease-out), text-decoration-color var(--t-1) var(--ease-out);
}

/* Leggera pressione al clic sui comandi (i pulsanti .btn hanno la loro, sopra) */
.vrm__light-btn:active,
.vrm__exit:active,
.vrm__cat:active,
.vrm__arrow:active,
.vrm__reset:active,
.vrm__room:active,
.faq__btn:active .faq__icon,
.policy__close:active,
.nav-toggle:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}

/* Fuoco da tastiera ben visibile, coerente sui fondi chiari */
:focus-visible {
  outline: 2px solid var(--c-gold-light);
  outline-offset: 3px;
}

.field input:not([type="checkbox"]):focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
}

/* Frecce dei link */
.link-arrow::after {
  transition: transform var(--t-2) var(--ease-out);
}

.link-arrow:hover::after {
  transform: translateX(4px);
}

/* Social e WhatsApp */
.social a {
  transition: color var(--t-1) var(--ease-out), border-color var(--t-1) var(--ease-out), transform var(--t-1) var(--ease-out);
}

@media (hover: hover) {
  .social a:hover {
    transform: translateY(-2px);
  }
}

.wa-fab {
  transition: background-color var(--t-1) var(--ease-out), transform var(--t-2) var(--ease-out);
}

.wa-fab:active {
  transform: scale(0.94);
  transition-duration: 80ms;
}

/* Campi del modulo: bordo e alone in 140 ms */
.field input:not([type="checkbox"]),
.field select,
.field textarea {
  transition: border-color var(--t-1) var(--ease-out), box-shadow var(--t-1) var(--ease-out), background-color var(--t-1) var(--ease-out);
}

@media (hover: hover) {
  .field input:not([type="checkbox"]):hover,
  .field select:hover,
  .field textarea:hover {
    border-color: var(--c-line-strong);
  }
}

/* Configuratore: comandi (non le immagini) */
.vrm__opt::after {
  transition: box-shadow var(--t-1) var(--ease-out);
}

.vrm__opt {
  transition: transform var(--t-1) var(--ease-out);
}

@media (hover: hover) {
  .vrm__opt:hover {
    transform: translateY(-2px);
  }
}

.vrm__opt:active {
  transform: scale(0.96);
  transition-duration: 80ms;
}

.vrm :focus-visible {
  outline: 2px solid var(--c-paper);
  outline-offset: 3px;
}

.vrm__opt:focus-visible {
  outline-offset: 4px;
}

/* Informative: chiusura */
.policy__close {
  transition: border-color var(--t-1) var(--ease-out), background-color var(--t-1) var(--ease-out), transform var(--t-1) var(--ease-out);
}

/* Entrata delle sezioni durante lo scorrimento (js/main.js): solo opacità e 12 px, 280 ms */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--t-3) var(--ease-out), transform var(--t-3) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .js-reveal [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Informative (privacy e cookie) in finestra, js/policy.js ---------- */
html.policy-open {
  overflow: hidden;
}

.policy {
  width: min(760px, calc(100vw - 2 * var(--gutter)));
  max-width: none;
  max-height: min(86vh, 880px);
  max-height: min(86dvh, 880px);
  margin: auto;
  padding: 0;
  border: 0;
  border: 1px solid var(--c-line);
  background: var(--c-bg-2);
  color: var(--c-ink);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.5);
  overflow: hidden;
}

.policy[open] {
  display: flex;
}

.policy::backdrop {
  background: rgb(15 14 13 / 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.policy__box {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

.policy__head {
  position: relative;
  flex: none;
  padding: var(--s-4) calc(var(--s-4) + 48px) var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--c-line);
}

.policy__title {
  margin-top: 4px;
  font-family: var(--ff-serif);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.1;
}

.policy__title:focus {
  outline: none;
}

.policy__title:focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.policy__close {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid transparent;
  background: none;
  color: var(--c-ink);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

@media (hover: hover) {
  .policy__close:hover {
    border-color: var(--c-line-strong);
  }
}

.policy__close:focus-visible {
  outline: 2px solid var(--c-gold-light);
  outline-offset: 2px;
}

.policy__close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.policy__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--s-3) var(--s-4) var(--s-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--c-ink-soft);
}

.policy__body > * + * {
  margin-top: var(--s-2);
}

.policy__body h3 {
  margin-top: var(--s-4);
  font-family: var(--ff-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.policy__body ul {
  padding-left: 1.2em;
  list-style: disc;
}

.policy__body li + li {
  margin-top: 4px;
}

.policy__body a {
  color: var(--c-accent);
}

.policy__body strong {
  color: var(--c-ink);
}

.policy__lead {
  font-size: 1.0625rem;
  color: var(--c-ink);
}

.policy__todo {
  padding: 1px 6px;
  background: #f3d27a;
  color: var(--c-dark);
  font-weight: 700;
}

.policy__date {
  margin-top: var(--s-4) !important;
  padding-top: var(--s-2);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-small);
  color: var(--c-ink-mute);
}

@media (max-width: 767.98px) {
  .policy {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .policy__head {
    padding: var(--s-3) calc(var(--s-2) + 48px) var(--s-2) var(--s-3);
  }

  .policy__body {
    padding: var(--s-2) var(--s-3) var(--s-4);
  }
}

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  /* niente movimento: restano solo i cambi di colore (brevi) */
  *,
  *::before,
  *::after {
    transition-property: color, background-color, border-color, text-decoration-color, outline-color, fill, stroke !important;
    transition-duration: 140ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn:active,
  .vrm__opt:hover,
  .vrm__opt:active,
  .social a:hover,
  .wa-fab:active,
  .link-arrow:hover::after,
  .faq__btn[aria-expanded="true"] .faq__icon,
  [class*="vrm__"]:active,
  .policy__close:active,
  .nav-toggle:active {
    transform: none !important;
  }
}


/* ---------- Appuntamenti: "Prenota" con scelta Sede / Videochiamata ---------- */
.book {
  position: relative;
}

.book__toggle {
  gap: 8px;
}

.book__toggle::before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='2.5' width='13' height='12' rx='1.5' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpath d='M1.5 6h13M5 1v3M11 1v3' stroke='%23000' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='2.5' width='13' height='12' rx='1.5' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpath d='M1.5 6h13M5 1v3M11 1v3' stroke='%23000' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.book__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 5;
  display: grid;
  gap: 2px;
  width: 260px;
  padding: 8px;
  border: 1px solid var(--c-line-strong);
  border-radius: 18px;
  background: var(--c-bg-2);
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.4);
  animation: book-in 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.book__menu[hidden] {
  display: none;
}

@keyframes book-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.book__hint {
  padding: 6px 12px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.book__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 12px;
  border-radius: 12px;
  color: var(--c-ink);
  text-decoration: none;
  transition: background-color 160ms var(--ease-out);
}

.book__opt:hover,
.book__opt:focus-visible {
  background: rgb(244 240 232 / 0.07);
  color: var(--c-ink);
}

.book__opt:focus-visible {
  outline: 2px solid var(--c-gold-light);
  outline-offset: -2px;
}

.book__opt svg {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--c-gold);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.book__opt span {
  display: grid;
  line-height: 1.3;
}

.book__opt strong {
  font-size: 0.9375rem;
  font-weight: 600;
}

.book__opt small {
  font-size: 0.8125rem;
  color: var(--c-ink-soft);
}

/* Contatti: un solo "Prenota" con la scelta Sede / Videochiamata */
.contact__book {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-top: var(--s-4);
}

.contact__book .book__menu {
  left: 0;
  right: auto;
}

.appt__note {
  font-size: 0.9375rem;
  color: var(--c-ink-soft);
}

/* "Come lavoriamo": i due appuntamenti alla fine */
.steps__cta.book-pair {
  margin-top: var(--s-6);
}

/* Avviso (link di prenotazione non ancora configurati) */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--s-3);
  z-index: 60;
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  width: min(560px, calc(100vw - 2 * var(--s-2)));
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  border: 1px solid var(--c-line-strong);
  border-radius: 18px;
  background: var(--c-bg-2);
  color: var(--c-ink);
  font-size: 0.9375rem;
  line-height: 1.5;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast[hidden] {
  display: none;
}

.toast p {
  flex: 1;
  padding-block: 4px;
}

.toast a {
  color: var(--c-gold-light);
}

.toast a:hover {
  color: var(--c-ink);
}

.toast__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--c-ink);
  cursor: pointer;
}

.toast__close:hover {
  background: rgb(244 240 232 / 0.12);
}

.toast__close:focus-visible {
  outline: 2px solid var(--c-ink);
}

.toast__close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

@media (max-width: 767.98px) {
  .toast {
    bottom: calc(var(--s-2) + 64px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }
  .book__menu {
    animation: none;
  }
}

/* ==========================================================================
   Fase 3 – Servizi, Come lavoriamo, Portfolio
   ========================================================================== */

/* ---------- Illustrazioni a linee (Servizi e Come lavoriamo; disegni in sorgenti/illustrazioni.py) ----------
   Tratto bianco osso, dettagli oro (.g), linee di costruzione tenui (.f). Quando il contenitore diventa
   attivo (.is-active / .is-drawn) i tratti si disegnano; con riduzione del movimento sono già completi. */
.ill {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ill path,
.ill rect,
.ill circle {
  fill: none;
  stroke: rgb(244 240 232 / 0.86);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ill .g { stroke: var(--c-gold-light); }

.ill .f {
  stroke: rgb(244 240 232 / 0.26);
  stroke-width: 0.9;
}

/* dettagli da tavola tecnica (sorgenti/illustrazioni.py) */
.ill .f.d { stroke-dasharray: 3 3; }
.ill .f.c { fill: rgb(244 240 232 / 0.05); stroke: none; }
.ill .f.cg { fill: rgb(196 162 110 / 0.1); stroke: none; }
.ill .f.hg { stroke: rgb(196 162 110 / 0.38); }
.ill .o { fill: var(--c-bg); stroke: none; }
.ill text {
  font-family: var(--ff-sans);
  font-size: 5.6px;
  font-weight: 600;
  letter-spacing: 0.08em;
  fill: var(--c-gold-light);
}
.ill text.w { fill: rgb(244 240 232 / 0.5); font-weight: 500; }

/* sotto i 900 px gli schizzi sono larghi al massimo ~380 px: quote e sigle (5,6 unità su 240) scenderebbero
   sotto gli 11 px reali e ingrandirle le sovrapporrebbe alle linee. Restano solo le linee. */
@media (max-width: 899px) {
  .ill text { display: none; }
}

.ill [pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* stato di partenza (non disegnato) solo con JavaScript e senza riduzione del movimento */
@media (prefers-reduced-motion: no-preference) {
  .js .ill-wait .ill [pathLength] { stroke-dashoffset: 1; }
  .js .ill-wait .ill .f { opacity: 0; }

  .js .ill-wait.is-drawn .ill [pathLength] {
    animation: ill-draw 1100ms cubic-bezier(0.45, 0.05, 0.25, 1) both;
  }

  .js .ill-wait.is-drawn .ill .g { animation-delay: 380ms; animation-duration: 900ms; }

  .js .ill-wait.is-drawn .ill .f {
    opacity: 1;
    transition: opacity 700ms ease 250ms;
  }
}

@keyframes ill-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

/* ---------- Portfolio: progetti ---------- */
.works-wrap {
  display: grid;
  gap: var(--s-8);
}

.works-group__head {
  display: grid;
  gap: var(--s-1);
  margin-bottom: var(--s-3);
}

.works {
  display: grid;
  gap: var(--s-2);
}

.work__btn {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--c-stone);
  cursor: zoom-in;
  text-align: left;
}

.work__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease-out);
}

.work__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(31 30 28 / 0) 40%, rgb(31 30 28 / 0.72) 100%);
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}

.work__title {
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: var(--s-3);
  display: grid;
  gap: 6px;
  font-family: var(--ff-serif);
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--c-bone);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}

.work__place {
  font-family: var(--ff-sans);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.work__btn:hover .work__veil,
.work__btn:focus-visible .work__veil,
.work__btn:hover .work__title,
.work__btn:focus-visible .work__title {
  opacity: 1;
  transform: none;
}

.work__btn:hover img {
  transform: scale(1.03);
}

.work__btn:focus-visible {
  outline: 2px solid var(--c-gold-light);
  outline-offset: 3px;
}

/* senza mouse (telefoni, tablet) il titolo resta sempre visibile */
@media (hover: none) {
  .work__veil,
  .work__title {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 640px) {
  .works {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--col-gap);
  }
}

@media (min-width: 1024px) {
  .works--3 { grid-template-columns: repeat(3, 1fr); }
  .works--4 { grid-template-columns: repeat(4, 1fr); }
  .works--4 .work__btn { aspect-ratio: 3 / 4; }
  .works--3 .work__btn { aspect-ratio: 4 / 3; }

  .works-group__head {
    grid-template-columns: 5fr 7fr;
    align-items: end;
    column-gap: var(--col-gap);
  }
}

/* ---------- Portfolio: finestra del progetto ---------- */
.pf {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  overflow: hidden;
}

.pf::backdrop {
  background: var(--c-bg);
}

.pf[open] {
  display: block;
  animation: pf-in 220ms var(--ease-out);
}

@keyframes pf-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.pf__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  height: 100%;
}

.pf__gallery {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.pf__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.pf__track::-webkit-scrollbar {
  display: none;
}

.pf__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  --pf-pad: var(--s-4) var(--s-8);
}

.pf__slide img {
  position: absolute;
  inset: var(--s-4) var(--s-8);
  width: calc(100% - 2 * var(--s-8));
  height: calc(100% - 2 * var(--s-4));
  max-width: none;
  object-fit: contain;
}

.pf__arrow {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(244 240 232 / 0.42);
  border-radius: 50%;
  background: rgb(31 30 28 / 0.55);
  color: var(--c-bone);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), opacity 180ms var(--ease-out);
}

.pf__arrow--prev { left: var(--s-2); }
.pf__arrow--next { right: var(--s-2); }

.pf__arrow:hover {
  background: var(--c-bone);
  color: var(--c-dark);
}

.pf__arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

.pf__arrow svg,
.pf__close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pf__counter {
  position: absolute;
  left: 50%;
  bottom: var(--s-2);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgb(31 30 28 / 0.55);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: rgb(244 240 232 / 0.85);
  transform: translateX(-50%);
}

.pf.is-single .pf__arrow,
.pf.is-single .pf__counter {
  display: none;
}

.pf__info {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 0;
  padding: calc(var(--s-8) + 8px) var(--s-4) var(--s-4);
  overflow-y: auto;
  border-left: 1px solid var(--c-line);
  background: var(--c-bg-2);
  color: var(--c-ink);
}

.pf__title {
  font-family: var(--ff-serif);
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.375rem);
  font-weight: 500;
  line-height: 1.1;
}

.pf__title:focus {
  outline: none;
}

.pf__place {
  display: block;
  margin-top: 8px;
  font-family: var(--ff-sans);
  font-size: 0.9375rem;
}

.pf__desc,
.pf__works {
  font-size: 0.9375rem;
  color: var(--c-ink-soft);
}

.pf__label {
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.pf__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2) var(--s-3);
}

.pf__facts div {
  display: grid;
  gap: 2px;
  padding-top: var(--s-1);
  border-top: 1px solid var(--c-line);
}

.pf__facts dt {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}

.pf__facts dd {
  font-size: 0.9375rem;
  font-weight: 500;
}

.pf__cta {
  align-self: flex-start;
  margin-top: auto;
}

.pf__close {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  background: var(--c-bg-2);
  color: var(--c-ink);
  cursor: pointer;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out);
}

.pf__close:hover {
  background: var(--c-bone);
  color: var(--c-dark);
}

.pf :focus-visible {
  outline: 2px solid var(--c-gold-light);
  outline-offset: 3px;
}

.pf__info :focus-visible,
.pf__close:focus-visible {
  outline-color: var(--c-bone);
}

.pf .pf__title:focus,
.pf .pf__title:focus-visible {
  outline: none;
}

@media (max-width: 899.98px) {
  .pf[open] {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .pf__box {
    display: block;
    height: auto;
  }

  .pf__gallery {
    height: 64vh;
    height: 64dvh;
  }

  .pf__slide img {
    inset: calc(var(--s-8) + 8px) var(--s-2) var(--s-6);
    width: calc(100% - 2 * var(--s-2));
    height: calc(100% - var(--s-8) - 8px - var(--s-6));
  }

  .pf__arrow {
    top: auto;
    bottom: 10px;
    width: 40px;
    height: 40px;
    transform: none;
  }

  .pf__counter {
    bottom: 16px;
  }

  .pf__info {
    padding: var(--s-4) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom));
    overflow: visible;
    min-height: 36dvh;
  }

  .pf__close {
    position: fixed;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work__btn:hover img {
    transform: none !important;
  }
}

/* ==========================================================================
   Fase 4 – Recensioni e contatti
   ========================================================================== */

/* ---------- Recensioni: carosello continuo ---------- */
.reviews-section {
  overflow: hidden;
}

/* anello infinito: le schede sono posizionate da js/recensioni.js (--x, --s, --o), l'attiva al centro */
.revs__viewport {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  padding-block: 18px;
  /* i bordi sfumano nel fondo */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

@media (max-width: 639.98px) {
  .revs__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  }
}

.revs__viewport:focus-visible {
  outline: 2px solid var(--c-gold-light);
  outline-offset: -2px;
}

.revs.is-dragging .revs__viewport {
  cursor: grabbing;
  user-select: none;
}

.revs__track {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.revs.is-ring .rev {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--rev-w, min(400px, 78vw));
  transform: translateX(calc(-50% + var(--x, 0px))) scale(var(--s, 1));
  opacity: var(--o, 1);
  transition: transform 650ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 500ms ease,
    border-color 400ms ease, background-color 400ms ease, filter 400ms ease;
  filter: brightness(var(--b, 1));
}

.revs.is-ring .rev.is-jump,
.revs.is-dragging .rev {
  transition: none;
}

.revs.is-ring .rev.is-active {
  border-color: rgb(196 162 110 / 0.55);
  background: #322F2B;
  box-shadow: 0 24px 48px -24px rgb(0 0 0 / 0.6);
}

.rev {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: min(400px, 78vw);
  padding: var(--s-4) var(--s-4) var(--s-3);
  border: 1px solid var(--c-line);
  border-top: 1px solid var(--c-gold);
  background: var(--c-bg-2);
}

.rev__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

/* etichetta discreta ma leggibile (5,4:1) */
.rev__badge {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}

.rev__stars {
  display: flex;
  gap: 3px;
}

.rev__stars svg {
  width: 15px;
  height: 15px;
  fill: var(--c-gold);
}

.rev__text {
  flex: 1;
  margin: 0;
  font-family: var(--ff-serif);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--c-ink);
}

.rev__who {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: var(--s-2);
  border-top: 1px solid var(--c-line);
}

.rev__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgb(176 141 87 / 0.6);
  border-radius: 50%;
  background: rgb(176 141 87 / 0.1);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--c-gold-light);
}

.rev__meta {
  display: grid;
  line-height: 1.35;
  font-size: 0.9375rem;
}

.rev__name {
  font-weight: 600;
}

.rev__place {
  font-size: 0.8125rem;
  color: var(--c-ink-soft);
}

.rev__work {
  margin-top: -6px;
  font-size: 0.8125rem;
  color: var(--c-ink-soft);
}

/* frecce a pillola vetro ai lati del carosello */
.revs {
  position: relative;
}

.revs__nav {
  position: absolute;
  inset: 0 max(8px, (100vw - var(--container)) / 2 - 76px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.revs__nav[hidden] {
  display: none;
}

.revs__arrow {
  display: grid;
  place-items: center;
  width: 56px;
  height: 44px;
  border: 1px solid rgb(244 240 232 / 0.36);
  border-radius: 999px;
  background: rgb(31 30 28 / 0.42);
  color: var(--c-bone);
  cursor: pointer;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
  transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 120ms var(--ease-out);
}

.revs__arrow:hover {
  background: rgb(244 240 232 / 0.16);
  border-color: rgb(244 240 232 / 0.62);
}

.revs__arrow:active { transform: scale(0.96); }

.revs__arrow:focus-visible {
  outline: 2px solid var(--c-gold-light);
  outline-offset: 3px;
}

.revs__arrow:disabled {
  opacity: 0.35;
  pointer-events: none;
}

.revs__arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .revs.is-ring .rev { transition: none !important; }
}

/* ---------- Contatti ---------- */
.contact__or {
  margin-top: var(--s-6);
  font-size: 0.9375rem;
  color: var(--c-ink-soft);
}

.contact__or + .contact__list {
  margin-top: var(--s-2);
}

.form__title em {
  font-style: italic;
}

/* antispam: fuori dallo schermo, non raggiungibile */
.form__trap {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form__submit[aria-busy="true"]::after {
  animation: form-wait 900ms ease-in-out infinite;
}

@keyframes form-wait {
  50% { transform: translateX(4px); opacity: 0.4; }
}

.form__status {
  line-height: 1.5;
}

/* conferma al posto del modulo */
.form-done {
  display: grid;
  justify-items: start;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-4);
  border-top: 1px solid var(--c-gold);
  background: var(--c-bg);
  animation: book-in 240ms var(--ease-out);
}

.form-done[hidden] {
  display: none;
}

.form-done:focus {
  outline: none;
}

.form-done__mark {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: var(--c-gold);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.form-done__title {
  font-family: var(--ff-serif);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.15;
}

.form-done__text {
  color: var(--c-ink-soft);
}

.form-done__again {
  margin-top: var(--s-2);
}

@media (prefers-reduced-motion: reduce) {
  .form__submit[aria-busy="true"]::after {
    animation: none;
  }
}

.form[hidden] {
  display: none;
}

.rev__text {
  margin: 0;
}

/* Footer: "Prenota" con la stessa scelta dell'intestazione; la scelta si apre verso l'alto */
.site-footer .book {
  --c-ink: #F4F0E8;
  --c-paper: #1F1E1C;
  --c-ink-soft: rgb(244 240 232 / 0.74);
  display: inline-block;
}

.site-footer .book__menu {
  top: auto;
  bottom: calc(100% + 10px);
  left: 0;
  right: auto;
}

.site-footer .book__opt,
.site-footer .book__opt:hover {
  color: var(--c-ink);
  text-decoration: none;
}

/* ---------- Hero: annotazioni della piantina (livello SVG, js/sequenza.js) ---------- */
.hero-seq__notes {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  font-family: var(--ff-sans);
  transition: opacity 120ms linear;
}

.hero-seq__notes text {
  fill: rgb(244 240 232 / 0.82);
  font-size: calc(22px * var(--k, 1));
  letter-spacing: 0.03em;
  font-variant-numeric: lining-nums tabular-nums;
}

.hero-seq__notes path,
.hero-seq__notes rect,
.hero-seq__notes circle {
  fill: none;
  stroke: rgb(244 240 232 / 0.55);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.hero-seq__notes .f {
  fill: rgb(244 240 232 / 0.85);
}

.hero-seq__notes .r {
  font-size: calc(26px * var(--k, 1));
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--c-bone);
}

.hero-seq__notes .a {
  font-size: calc(23px * var(--k, 1));
  fill: var(--c-gold-light);
}

.hero-seq__notes .n text {
  font-weight: 600;
}

.hero-seq__notes .c .ct {
  font-weight: 600;
  fill: var(--c-bone);
}

.hero-seq__notes .c rect {
  stroke: rgb(244 240 232 / 0.7);
}

/* cartiglio e nord crescono come blocco unico (il testo dentro non si ingrandisce da solo) */
.hero-seq__notes .c,
.hero-seq__notes .n {
  transform-box: view-box;
  transform: scale(var(--k, 1));
}

.hero-seq__notes .c text,
.hero-seq__notes .n text {
  font-size: 20px;
}

.hero-seq__notes .c .ct {
  font-size: 21px;
}

.hero-seq__notes .n text {
  font-size: 26px;
}

/* telefono: quote interne e quota totale in basso (doppia) nascoste; nomi degli ambienti in minuscolo */
.hero-seq[data-set="m"] .hero-seq__notes .qi,
.hero-seq[data-set="m"] .hero-seq__notes .qb {
  display: none;
}

.hero-seq[data-set="m"] .hero-seq__notes .sl {
  display: none;
}

.hero-seq[data-set="m"] .hero-seq__notes .c {
  transform: scale(calc(var(--k, 1) * 0.68));
}

.hero-seq[data-set="m"] .hero-seq__notes .rooms tspan.r {
  font-size: calc(21px * var(--k, 1));
}

.hero-seq[data-set="m"] .hero-seq__notes .rooms tspan.a {
  font-size: calc(19px * var(--k, 1));
}

.hero-seq[data-set="m"] .hero-seq__notes .r {
  text-transform: none;
  letter-spacing: 0.01em;
}

/* nuova sequenza più lunga: più scorrimento */
.hero-seq.is-seq .hero-seq__track {
  height: 340vh;
}

.hero-seq__poster {
  top: var(--header-h);
  right: 0;
  width: 62%;
  height: calc(100% - var(--header-h));
}

@media (orientation: portrait) and (max-width: 1199.98px), (max-width: 559.98px) {
  .hero-seq.is-seq .hero-seq__track {
    height: 280vh;
  }

  .hero-seq__frame {
    padding-top: calc(var(--header-h) + var(--s-2));
  }

  .hero-seq__content {
    will-change: transform;
  }

  .hero-seq__poster {
    top: auto;
    bottom: 80px;
    left: 12px;
    right: 12px;
    width: auto;
    height: 40%;
  }

  /* niente grande vuoto tra la hero e "Lo studio in numeri" */
  .numbers {
    padding-top: var(--s-4);
  }
}

/* ---------- Passaggi tra le sezioni: nome della sezione con il filetto oro (js/main.js) ---------- */
main > section:not(.hero-seq) {
  position: relative;
}

.seam {
  position: absolute;
  top: clamp(20px, calc(var(--section-y) * 0.36), 48px);
  left: 50%;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 10px;
  transform: translateX(-50%);
  pointer-events: none;
}

.seam__name {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-gold-light);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 600ms var(--ease-out) 200ms, transform 600ms var(--ease-out) 200ms;
}

.seam__line {
  display: block;
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold) 30%, var(--c-gold) 70%, transparent);
  transform: scaleX(0);
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.seam.is-drawn .seam__name { opacity: 1; transform: none; }
.seam.is-drawn .seam__line { transform: scaleX(1); }

/* visore e "Come lavoriamo": il filetto sta sopra la scena ferma */
.vr .seam {
  top: 24px;
}

@media (prefers-reduced-motion: reduce) {
  .seam__name { opacity: 1; transform: none; transition: none; }
  .seam__line { transform: none; transition: none; }
}

/* Hero, piantina: etichette degli ambienti diverse per desktop e telefono */
.hero-seq__notes .rooms-m { display: none; }
.hero-seq[data-set="m"] .hero-seq__notes .rooms { display: none; }
.hero-seq[data-set="m"] .hero-seq__notes .rooms-m { display: inline; }

.hero-seq__notes .rooms-m .lbl-bg {
  fill: rgb(31 30 28 / 0.88);
  stroke: none;
}

.hero-seq__notes .rooms-m tspan.r {
  font-size: calc(20px * var(--k, 1) * var(--f, 1));
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}

.hero-seq__notes .rooms-m tspan.a {
  font-size: calc(18px * var(--k, 1) * var(--f, 1));
}

/* ---------- Portfolio: filtro per categoria ---------- */
.pf-filters {
  display: flex;
  gap: 10px;
  margin-bottom: var(--s-4);
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter));
  padding: 4px var(--gutter);
}

.pf-filters::-webkit-scrollbar { display: none; }

.pf-filter {
  flex: none;
}

.pf-filter[aria-pressed="true"] {
  --btn-fg: #D6B886;
  --btn-bd: var(--c-gold);
  --btn-bg: rgb(244 240 232 / 0.16);
  --btn-fg-h: #E3C796;
  --btn-bd-h: #C4A26E;
}

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

.work {
  transition: opacity 160ms var(--ease-out), transform 200ms var(--ease-out);
}

.work.is-leaving {
  opacity: 0;
  transform: scale(0.97);
}

.work.is-entering {
  opacity: 0;
  transform: translateY(8px);
}

.work[hidden] { display: none; }

@media (min-width: 640px) {
  .works { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .works { grid-template-columns: repeat(3, 1fr); }
  .works .work__btn { aspect-ratio: 4 / 3; }
}

/* finestra: navigazione tra i progetti */
.pf__projects {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--c-line);
}

.pf__projects[hidden] { display: none; }

.pf__note {
  margin-top: var(--s-2);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--c-ink-mute);
}

.pf__proj {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--c-gold-light);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

@media (hover: hover) {
  .pf__proj:hover { color: var(--c-ink); }
}

.pf__proj-count {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-mute);
}

@media (prefers-reduced-motion: reduce) {
  .work, .work.is-leaving, .work.is-entering { transition: none; opacity: 1; transform: none; }
}

/* ---------- Partner ---------- */
.partners {
  overflow: hidden;
}

.partners__head {
  text-align: center;
  margin-bottom: var(--s-6);
}

.partners__head .section-title { margin-inline: auto; }

.partners__lead {
  margin-top: var(--s-2);
  color: var(--c-ink-soft);
}

.partners__band {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.partners__track {
  display: flex;
  width: max-content;
  animation: partners-scroll var(--dur, 40s) linear infinite;
}

.partners__band:hover .partners__track,
.partners__band:focus-within .partners__track,
.partners__band.is-off .partners__track {
  animation-play-state: paused;
}

@keyframes partners-scroll {
  to { transform: translateX(-50%); }
}

.partner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: clamp(190px, 18vw, 240px);
  padding: var(--s-3) var(--s-2);
  color: rgb(244 240 232 / 0.78);
  transition: color 200ms var(--ease-out);
}

.partner__logo {
  width: 100%;
  max-width: 190px;
  height: 40px;
  overflow: visible;
}

.partner__mark {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.partner__logo text {
  fill: currentColor;
  font-family: var(--ff-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.22em;
}

.partner__cat {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gold-light);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}

@media (hover: hover) {
  .partner:hover { color: var(--c-gold); }
  .partner:hover .partner__cat { opacity: 1; transform: none; }
}

/* senza mouse la categoria è sempre visibile, più tenue */
@media (hover: none) {
  .partner__cat { opacity: 0.85; transform: none; }
}

.partners__note {
  margin-top: var(--s-3);
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}

/* riduzione del movimento: fascia ferma, loghi su più righe */
.partners__band.is-static {
  -webkit-mask-image: none;
  mask-image: none;
}

.partners__band.is-static .partners__track {
  flex-wrap: wrap;
  justify-content: center;
  width: auto;
  max-width: var(--container);
  margin-inline: auto;
  animation: none;
}

.partners__band.is-static .partner__cat { opacity: 0.85; transform: none; }

/* passaggio verso il footer: stessa grana del resto della pagina */
.site-footer {
  background: var(--grain), #1F1E1C;
}

/* ==========================================================================
   Revisione responsive: aree toccabili, safe area, passaggio del mouse solo dove esiste
   ========================================================================== */
/* link con freccia: l'area toccabile si allarga a 44 px senza spostare la sottolineatura */
.link-arrow {
  position: relative;
}

.link-arrow::before {
  content: "";
  position: absolute;
  inset: -9px -6px;
}

.brand {
  min-height: 44px;
}

.skip-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* visore: area del clic sul visore mai più bassa di 44 px (solo misura, nessun cambiamento visivo) */
.vr__hit {
  min-height: 44px;
}

@media (orientation: landscape) and (max-height: 560px) {
  .hero__actions .btn {
    min-height: 44px;
  }
}

@media (max-width: 479.98px) {
  .hero__actions .btn {
    min-height: 46px;
  }
}

/* iPhone: tacca e barra in basso */
.wa-fab {
  right: calc(var(--s-2) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1024px) {
  .wa-fab {
    right: calc(var(--s-4) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  }
}

.site-header__inner {
  padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
}

@media (min-width: 768px) {
  .toast {
    bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  }
}

/* passaggio del mouse solo sui dispositivi che lo supportano */
@media (hover: none) {
  .work__btn:hover img { transform: none; }
  .faq__btn:hover { color: var(--c-ink); }
  .faq__btn:hover .faq__icon { border-color: var(--c-line-strong); }
  .site-nav__list a:hover::after { transform: scaleX(0); }
  .site-nav__list a[aria-current="true"]::after { transform: scaleX(1); }
  .revs__arrow:hover { background: rgb(31 30 28 / 0.42); border-color: rgb(244 240 232 / 0.36); }
  .pf__arrow:hover { background: rgb(31 30 28 / 0.55); color: var(--c-bone); }
  .pf__close:hover { background: var(--c-bg-2); color: var(--c-ink); }
  .wa-fab:hover { background: var(--c-dark); color: var(--c-gold-light); }
}

/* numeri su mobile: spazio per il filetto della sezione */
@media (orientation: portrait) and (max-width: 1199.98px), (max-width: 559.98px) {
  .numbers { padding-top: 72px; }
}

/* titoli del portfolio sulle foto (touch, sempre visibili): velatura più decisa per la leggibilità */
@media (hover: none) {
  .work__veil {
    background: linear-gradient(180deg, rgb(31 30 28 / 0) 30%, rgb(31 30 28 / 0.86) 100%);
  }
}

/* schermi grandi: colonna più ampia e tipografia leggermente più grande */
@media (min-width: 1800px) {
  :root { --container: 1320px; }
}

@media (min-width: 2200px) {
  html { font-size: 118.75%; }
  :root { --container: 1520px; }
}

/* telefono: un po' d'aria tra il nome della sezione e il titolo */
@media (max-width: 767.98px) {
  main > section.section[data-seam] {
    padding-top: calc(var(--section-y) + 20px);
  }
}

/* telefono: le frecce coprirebbero il testo delle schede, vanno sotto il carosello */
@media (max-width: 767.98px) {
  .revs__nav {
    position: static;
    justify-content: center;
    gap: var(--s-2);
    margin-top: var(--s-3);
  }
}

/* ---------- Chi siamo: card del team "da collezione" (js/team.js) ----------
   Cornice oro sottile, fondo antracite con grana, ritratto in alto, nome, ruolo e tre voci.
   Mouse: inclinazione 3D leggera e riflesso olografico che segue il cursore. Clic/tocco o pulsante: la card
   si gira e mostra la biografia. Telefono: card affiancate a scorrimento con aggancio.
   Riduzione del movimento: niente inclinazione né rotazione, il retro si apre con il pulsante (cambio istantaneo). */
.team-cards__title {
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
  font-family: var(--ff-serif);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.15;
}

.team-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tcard {
  position: relative;
  perspective: 1100px;
}

.tcard__tilt {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 500ms var(--ease-out);
}

.tcard.is-tilting .tcard__tilt { transition: transform 90ms linear; }

.tcard__inner {
  position: relative;
  display: grid;
  transform-style: preserve-3d;
  transition: transform 800ms cubic-bezier(0.3, 0.7, 0.2, 1);
}

.tcard.is-flipped .tcard__inner { transform: rotateY(180deg); }

.tcard__face {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px;
  border: 1px solid rgb(196 162 110 / 0.75);
  border-radius: 14px;
  background: var(--grain), linear-gradient(160deg, #2C2A26 0%, #1F1E1C 55%, #1A1917 100%);
  box-shadow: 0 24px 48px -20px rgb(0 0 0 / 0.6);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* seconda cornice interna, come nelle figurine */
.tcard__face::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgb(196 162 110 / 0.28);
  border-radius: 10px;
  pointer-events: none;
}

/* WebKit non sempre rispetta backface-visibility: le facce si scambiano anche a metà rotazione */
.tcard__front { transition: visibility 0s linear 400ms; }
.tcard.is-flipped .tcard__front { visibility: hidden; }

.tcard__back {
  visibility: hidden;
  transition: visibility 0s linear 400ms;
}

.tcard.is-flipped .tcard__back { visibility: visible; }

.tcard__back {
  transform: rotateY(180deg);
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-4);
}

.tcard__photo {
  position: relative;
  aspect-ratio: 4 / 4.2;
  overflow: hidden;
  border-radius: 8px 8px 2px 2px;
  background: var(--c-bg-2);
}

.tcard__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: saturate(0.88) contrast(1.04);
}

/* il ritratto sfuma nel fondo della card */
.tcard__photo::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  background: linear-gradient(180deg, transparent, rgb(31 30 28 / 0.85));
}

.tcard__body {
  position: relative;
  display: grid;
  gap: 4px;
  margin-top: -34px;
  padding: 0 14px 52px;
}

.tcard__role {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold-light);
}

.tcard__name {
  font-family: var(--ff-serif);
  font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--c-bone);
}

.tcard__stats {
  display: grid;
  margin-top: 12px;
  border-top: 1px solid rgb(196 162 110 / 0.35);
}

.tcard__stats > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.tcard__stats dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
  padding-top: 1px;
}

.tcard__stats dd {
  margin: 0;
  color: var(--c-ink);
}

.tcard__bio {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-ink-soft);
}

.tcard__mark {
  width: 34px;
  height: 34px;
  margin-top: var(--s-2);
  fill: none;
  stroke: var(--c-gold);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* riflesso olografico morbido (solo mouse) */
.tcard__holo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at var(--hx, 50%) var(--hy, 30%), rgb(255 255 255 / 0.16), transparent 42%),
    linear-gradient(115deg, transparent 20%, rgb(214 184 134 / 0.16) 38%, rgb(160 200 210 / 0.12) 48%, rgb(220 170 200 / 0.12) 58%, transparent 76%);
  background-size: 100% 100%, 220% 220%;
  background-position: 0 0, var(--hx, 50%) var(--hy, 50%);
  mix-blend-mode: screen;
  transition: opacity 400ms ease;
}

.tcard.is-tilting .tcard__holo { opacity: 1; }

/* pulsante per girare la card (sempre presente: tastiera, lettori di schermo, riduzione del movimento) */
.tcard__flip {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgb(244 240 232 / 0.3);
  border-radius: 999px;
  background: rgb(31 30 28 / 0.5);
  color: var(--c-bone);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transform: translateX(-50%) translateZ(40px);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color 180ms ease, background-color 180ms ease;
}

.tcard__flip { white-space: nowrap; }

.tcard__flip svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--c-gold-light);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  .tcard__flip:hover { border-color: rgb(244 240 232 / 0.6); background: rgb(244 240 232 / 0.12); }
}

.tcard__flip:focus-visible {
  outline: 2px solid var(--c-gold-light);
  outline-offset: 3px;
}

.tcard { cursor: pointer; }

.team-cards__dots { display: none; }

/* tablet stretto e telefono: senza JavaScript una colonna; con JavaScript mazzo di card (js/team.js) */
@media (max-width: 899.98px) {
  .team-cards {
    grid-template-columns: minmax(0, 1fr);
    max-width: 340px;
    margin-inline: auto;
  }

  .team-cards.is-deck {
    display: block;
    position: relative;
    max-width: none;
    height: var(--deck-h, 640px);
    padding-top: 22px;
  }

  .is-deck .tcard {
    position: absolute;
    top: 22px;
    left: 50%;
    width: var(--deck-w, 320px);
    margin-left: calc(var(--deck-w, 320px) / -2);
    transform-origin: 50% 100%;
    touch-action: pan-y;
    transition: transform 460ms cubic-bezier(0.22, 0.8, 0.3, 1), opacity 460ms var(--ease-out);
    will-change: transform;
  }

  .is-deck .tcard.is-dragging,
  .team-cards.is-instant .tcard { transition: none; }

  /* dietro si vede solo il bordo delle card: niente foto né testi che spuntano */
  .is-deck .tcard:not(.is-front) { pointer-events: none; }
  .is-deck .tcard:not(.is-front) .tcard__face > *,
  .is-deck .tcard:not(.is-front) .tcard__flip,
  .is-deck .tcard:not(.is-front) .tcard__smoke { opacity: 0; }
  .is-deck .tcard .tcard__face > *,
  .is-deck .tcard .tcard__flip { transition: opacity 300ms var(--ease-out); }

  .team-cards__dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: var(--s-2);
  }

  .team-cards__dots[hidden] { display: none; }

  .team-deck__count {
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: 0.14em;
    font-variant-numeric: tabular-nums;
  }

  .team-deck__hint {
    font-size: var(--fs-small);
    color: var(--c-ink-mute);
  }
}

@media (max-width: 899.98px) and (prefers-reduced-motion: reduce) {
  .is-deck .tcard { transition: opacity 200ms linear; }
}

@media (prefers-reduced-motion: reduce) {
  .tcard__tilt,
  .tcard__inner { transition: none; transform: none !important; }
  .tcard__holo { display: none; }
  /* retro aperto senza rotazione: si scambiano le facce */
  .tcard__back { transform: none; }
  .tcard__front,
  .tcard__back { transition: none; }
}

/* card del team: contorno oro "di fumo" sempre visibile; al passaggio (o, su touch, la card al centro)
   la card si solleva, il fumo si intensifica e le altre si attenuano */
@property --smoke-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.tcard {
  isolation: isolate;
  transition: transform 550ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 400ms ease, filter 400ms ease;
}

.tcard__tilt { position: relative; z-index: 1; }

/* due strati di nebbia che ruotano piano in versi e tempi diversi; dietro la card, quindi si vedono solo ai bordi */
.tcard__smoke {
  position: absolute;
  inset: -12px;
  z-index: 0;
  border-radius: 26px;
  pointer-events: none;
  opacity: 0.72;          /* a riposo: +30% rispetto a 0,55, sempre sfumata */
  filter: blur(14px);
  transition: opacity 600ms ease, filter 600ms ease, inset 600ms ease;
}

.tcard__smoke > span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from var(--smoke-a),
    transparent 0deg, rgb(196 162 110 / 0.55) 40deg, transparent 95deg,
    rgb(227 199 150 / 0.4) 150deg, transparent 205deg,
    rgb(176 141 87 / 0.6) 260deg, transparent 320deg);
  animation: tcard-smoke var(--smoke-d, 19s) linear infinite;
}

.tcard__smoke > span + span {
  inset: 6px;
  opacity: 0.8;
  animation-duration: calc(var(--smoke-d, 19s) * 1.45);
  animation-direction: reverse;
}

.tcard:nth-child(1) { --smoke-d: 17s; }
.tcard:nth-child(1) .tcard__smoke > span { animation-delay: -3s; }
.tcard:nth-child(2) { --smoke-d: 21s; }
.tcard:nth-child(2) .tcard__smoke > span { animation-delay: -9s; }
.tcard:nth-child(3) { --smoke-d: 15s; }
.tcard:nth-child(3) .tcard__smoke > span { animation-delay: -14s; }

@keyframes tcard-smoke {
  to { --smoke-a: 360deg; }
}

.tcard.is-glow { transform: translateY(-18px) scale(1.03); }

.tcard.is-glow .tcard__smoke {
  inset: -18px;
  opacity: 1;
  filter: blur(18px);
}

.tcard.is-glow .tcard__face {
  border-color: rgb(214 184 134 / 0.95);
  box-shadow: 0 40px 70px -28px rgb(0 0 0 / 0.8);
}

/* con il mouse sopra una card, le altre si attenuano */
.team-cards.has-glow .tcard:not(.is-glow) {
  opacity: 0.62;
  filter: saturate(0.8);
}

@media (prefers-reduced-motion: reduce) {
  .tcard,
  .tcard__smoke { transition: none; }
  .tcard__smoke > span { animation: none; }
  .tcard.is-glow { transform: none; }
}

/* ---------- Nomi delle sezioni come intestazione (desktop e tablet): centrati, più grandi ---------- */
@media (min-width: 768px) {
  .seam {
    top: clamp(28px, calc(var(--section-y) * 0.4), 52px);
    gap: 14px;
  }

  .seam__name {
    font-size: 1.625rem;
    letter-spacing: 0.24em;
    /* lo spazio finale della spaziatura non sposta il centro */
    margin-right: -0.24em;
  }

  .seam__line { width: 112px; }

  main > section.section[data-seam] {
    padding-top: calc(var(--section-y) + 40px);
  }

  /* visore: il nome sotto l'intestazione del sito, sopra la scena */
  .vr .seam { top: calc(var(--header-h) + 14px); }


  /* intestazioni a una colonna: titolo centrato sotto il nome */
  #progetti .section-head--split,
  #recensioni .section-head--split {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  #progetti .pf-filters { justify-content: center; }
}

/* tablet e desktop: Chi siamo e Domande frequenti a una colonna centrata, titolo centrato sotto il nome della
   sezione (su desktop il titolo da solo nella colonna sinistra lasciava sotto un vuoto alto quanto la sezione).
   Contatti resta a due colonne: ognuna ha il suo titolo (appuntamento / modulo). */
@media (min-width: 768px) {
  #studio .about__head,
  #domande .section-head {
    text-align: center;
  }
}

@media (min-width: 1024px) {
  #studio .about {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--s-4);
  }
  #studio .about__head,
  #studio .about__body {
    grid-column: auto;
  }
  #studio .about__body {
    max-width: 46rem;
    padding-top: 0;
  }
  #domande .faq-wrap {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  #domande .section-head {
    margin-bottom: var(--s-6);
  }
  #domande .faq {
    width: 100%;
    max-width: 52rem;
  }
}

@media (min-width: 768px) {
  .team-cards__title { text-align: center; }
}

/* Visore su desktop: il nome sta sul fondale chiaro, oro scuro */
@media (min-width: 1024px) {
  .vr.is-spin .seam__name { color: #6B4F24; }
}

@media (max-width: 767.98px) {
  .seam__name {
    font-size: 1rem;
    letter-spacing: 0.2em;
    margin-right: -0.2em;
  }
  .seam__line { width: 80px; }
}

/* "Prenota un incontro": la scelta si apre verso l'alto quando sotto non c'è spazio (js/main.js) */
.book.is-up .book__menu {
  top: auto;
  bottom: calc(100% + 10px);
}

/* hero: un solo pulsante principale e un link discreto al portfolio */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.hero__actions .book__menu,
.pf__cta .book__menu {
  left: 0;
  right: auto;
}

.hero__more {
  font-weight: 500;
  color: var(--c-ink-soft);
  border-bottom-color: rgb(244 240 232 / 0.35);
}

@media (hover: hover) {
  .hero__more:hover { color: var(--c-ink); }
}

.section-head--center { text-align: center; }

/* Portfolio: il link a Instagram chiude la sezione, centrato sotto la griglia */
.works__more {
  margin-top: var(--s-6);
  text-align: center;
}

/* recensioni: il carosello ha già un margine interno (schede ingrandite, 18px): la sezione chiude un po' prima,
   così lo spazio fino a "Domande frequenti" è uguale a quello tra le altre sezioni */
.reviews-section {
  padding-bottom: calc(var(--section-y) - 30px);
}

/* ==========================================================================
   Servizi – "Tavole che prendono vita" (js/servizi.js)
   Ogni servizio è una tavola tecnica verticale: a riposo il disegno è una copia sbiadita; al passaggio del mouse
   la tavola si inclina verso il cursore, il disegno si rifà a tratto e una lente rivela lo strato oro nascosto
   (griglia millimetrata, quote, assi). Al clic la tavola si gira e si ingrandisce al centro (.tav-dlg).
   Telefono: mazzo di tavole da sfogliare. Riduzione del movimento: niente 3D, strato oro statico.
   ========================================================================== */
.svc__head {
  max-width: 46rem;
  margin: 0 auto var(--s-6);
  text-align: center;
}

.svc__hint {
  margin-top: var(--s-2);
  color: var(--c-ink-soft);
}

.svc__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}

@media (min-width: 1100px) {
  .svc__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px var(--s-3);
  }
}

/* senza JavaScript, su telefono: una colonna */
@media (max-width: 639px) {
  .svc__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 340px;
    margin-inline: auto;
  }
}

.svc__item {
  position: relative;
  min-width: 0;
}

.tav {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  perspective: 900px;
  -webkit-tap-highlight-color: transparent;
}

.tav:focus-visible {
  outline: 2px solid var(--c-gold-light);
  outline-offset: 6px;
}

.tav__sheet {
  --rx: 0deg;
  --ry: 0deg;
  --lift: 0px;
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  aspect-ratio: 3 / 4;
  padding: 44px 16px 0;
  overflow: hidden;
  border: 1px solid rgb(244 240 232 / 0.15);
  border-radius: 3px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgb(244 240 232 / 0.045), transparent 70%),
    linear-gradient(165deg, #2D2B27, #24221F 75%);
  box-shadow: 0 12px 26px -18px rgb(0 0 0 / 0.7);
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
  transition: transform 520ms var(--ease-out), box-shadow 520ms var(--ease-out), border-color 320ms var(--ease-out);
}

/* cornice interna da tavola */
.tav__sheet::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgb(244 240 232 / 0.07);
  pointer-events: none;
}

/* riflesso morbido che segue il cursore */
.tav__sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 30%), rgb(244 240 232 / 0.06), transparent 50%);
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
  pointer-events: none;
}

.tav.is-live .tav__sheet {
  --lift: -8px;
  border-color: rgb(196 162 110 / 0.5);
  box-shadow: 0 34px 50px -26px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(196 162 110 / 0.08);
}

.tav.is-live .tav__sheet::after { opacity: 1; }

/* mentre il cursore si muove l'inclinazione segue senza ritardo */
.tav.is-tracking .tav__sheet {
  transition: transform 140ms linear, box-shadow 520ms var(--ease-out), border-color 320ms var(--ease-out);
}

/* intestazione della tavola (tipo di disegno e scala) */
.tav__meta {
  position: absolute;
  top: 19px;
  left: 18px;
  right: 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tav__art {
  position: relative;
  align-self: center;
  display: block;
  margin-inline: -7%;
}

/* il disegno della tavola: senza i crocini e il cartiglio dello schizzo (la tavola ha i suoi) */
.tav__art .ill > path:first-child,
.tav__art .ill > text:nth-of-type(-n+2),
.tav__x > path:first-child,
.tav__x > text:nth-of-type(-n+2) {
  display: none;
}

.tav__art .ill {
  opacity: 0.3;
  transition: opacity 560ms var(--ease-out);
}

.tav.is-live .tav__art .ill { opacity: 1; }

/* cartiglio */
.tav__cart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  margin-inline: -16px;
  border-top: 1px solid rgb(244 240 232 / 0.15);
  background: rgb(26 25 23 / 0.45);
}

.tav__no {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 64px;
  padding: 12px 14px;
  border-right: 1px solid rgb(244 240 232 / 0.15);
  font-family: var(--ff-serif);
  font-size: 2rem;
  font-weight: 500;
  line-height: 0.9;
  font-variant-numeric: lining-nums;
  color: var(--c-gold);
}

.tav__no small {
  margin-bottom: 5px;
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}

.tav__name {
  display: flex;
  align-items: center;
  min-height: calc(2 * 1.2em + 24px);
  padding: 12px 14px;
  font-family: var(--ff-serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-ink);
}

/* ---------- strato oro "ai raggi X": griglia millimetrata e disegno con quote, visibili solo dentro la lente ---------- */
.tav__grid,
.tav__x {
  position: absolute;
  pointer-events: none;
  clip-path: circle(0 at 50% 50%);
}

.tav__grid {
  inset: 38px 0 0;
  z-index: 1;
  background-color: rgb(20 19 17 / 0.62);
  background-image:
    linear-gradient(rgb(196 162 110 / 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgb(196 162 110 / 0.3) 1px, transparent 1px),
    linear-gradient(rgb(196 162 110 / 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgb(196 162 110 / 0.11) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 4px 4px, 4px 4px;
  background-position: -1px -1px;
}

.tav__x {
  z-index: 2;
  display: block;
  height: auto;
  overflow: visible;
}

.ill--x path,
.ill--x rect,
.ill--x circle {
  stroke: var(--c-gold-light);
  stroke-width: 0.95;
}

.ill--x .f { stroke: rgb(214 184 134 / 0.75); opacity: 1; }
.ill--x .f.c,
.ill--x .f.cg { fill: rgb(196 162 110 / 0.1); stroke: none; }
.ill--x .o { fill: rgb(20 19 17 / 0.9); }
.ill--x text,
.ill--x text.w { fill: #E3C796; opacity: 1; }
.ill--x .xa { stroke: rgb(214 184 134 / 0.6); stroke-width: 0.6; stroke-dasharray: 8 2 1.5 2; }
.ill--x .xc { stroke: rgb(214 184 134 / 0.45); stroke-width: 0.6; stroke-dasharray: 2 2; }
.ill--x .xd { stroke: #E3C796; stroke-width: 0.7; }
.ill--x .xb { fill: rgb(20 19 17 / 0.9); stroke: #E3C796; stroke-width: 0.8; }
.ill--x .xt { font-size: 6px; font-weight: 700; letter-spacing: 0.06em; }

/* la lente: anello oro sottile con un crocino al centro */
.tav__lens {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 140px;
  height: 140px;
  margin: -70px 0 0 -70px;
  border: 1px solid rgb(214 184 134 / 0.85);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgb(196 162 110 / 0.07), inset 0 0 26px rgb(196 162 110 / 0.14), 0 10px 30px rgb(0 0 0 / 0.35);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}

.tav__lens::before,
.tav__lens::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgb(214 184 134 / 0.7);
}

.tav__lens::before { width: 9px; height: 1px; margin: 0 0 0 -4.5px; }
.tav__lens::after { width: 1px; height: 9px; margin: -4.5px 0 0; }

/* quando la tavola si accende il disegno si rifà a tratto */
@media (prefers-reduced-motion: no-preference) {
  .js .tav.is-live .tav__art .ill [pathLength] {
    animation: ill-draw 1050ms cubic-bezier(0.45, 0.05, 0.25, 1) both;
  }
  .js .tav.is-live .tav__art .ill .g { animation-delay: 320ms; animation-duration: 850ms; }
}

/* ---------- Riduzione del movimento: niente 3D, strato oro visibile e fermo ---------- */
@media (prefers-reduced-motion: reduce) {
  .tav__sheet,
  .tav.is-live .tav__sheet {
    transform: none;
    transition: border-color 200ms linear;
  }
  .tav__art .ill { opacity: 1; }
  .tav__grid { clip-path: none; opacity: 0.3; background-color: transparent; }
  .tav__x { clip-path: none; opacity: 0.85; }
  .tav__lens { display: none; }
  .is-deck .svc__item { transition: opacity 200ms linear; }
}

/* ---------- Telefono: mazzo di tavole sovrapposte (classe aggiunta da js/servizi.js) ---------- */
.svc__deck-ui { display: none; }

@media (max-width: 639px) {
  .svc__grid.is-deck {
    display: block;
    position: relative;
    max-width: none;
    height: var(--deck-h, 520px);
  }

  .is-deck .svc__item {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--deck-w, 300px);
    margin-left: calc(var(--deck-w, 300px) / -2);
    transform-origin: 50% 100%;
    touch-action: pan-y;
    transition: transform 460ms cubic-bezier(0.22, 0.8, 0.3, 1), opacity 460ms var(--ease-out);
    will-change: transform;
  }

  .is-deck .svc__item.is-dragging,
  .is-deck.is-instant .svc__item { transition: none; }

  .is-deck .svc__item:not(.is-front) .tav { pointer-events: none; }

  /* le tavole dietro mostrano solo il bordo: niente scritte che spuntano sotto quella davanti */
  .is-deck .svc__item:not(.is-front) .tav__sheet > * { opacity: 0; }
  .is-deck .svc__item .tav__sheet > * { transition: opacity 300ms var(--ease-out); }

  .is-deck .tav__sheet { box-shadow: 0 18px 34px -18px rgb(0 0 0 / 0.85); }

  .is-deck .tav.is-live .tav__sheet { --lift: 0px; }

  .is-deck ~ .svc__deck-ui {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: var(--s-2);
  }

  .svc__count {
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
  }

  .svc__swipe {
    font-size: var(--fs-small);
    color: var(--c-ink-mute);
  }
}

/* ---------- Tavola aperta ---------- */
.tav-lock,
.tav-lock body { overflow: hidden; }

.tav-dlg {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  perspective: 2200px;
}

.tav-dlg[hidden] { display: none; }

.tav-dlg__veil {
  position: absolute;
  inset: 0;
  background: rgb(14 13 12 / 0.84);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.tav-dlg__card {
  position: relative;
  width: min(calc(100vw - 32px), calc((100vh - 64px) * 0.75), 560px);
  width: min(calc(100vw - 32px), calc((100dvh - 64px) * 0.75), 560px);
  aspect-ratio: 3 / 4;
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  outline: none;
}

.tav-dlg__face {
  position: absolute;
  inset: 0;
  border: 1px solid rgb(196 162 110 / 0.42);
  border-radius: 3px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgb(244 240 232 / 0.05), transparent 70%),
    linear-gradient(165deg, #2D2B27, #22201E 75%);
  box-shadow: 0 50px 90px -40px #000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.tav-dlg__front {
  overflow: hidden;
}

/* la faccia anteriore è la tavola stessa, alla sua misura, ingrandita */
.tav-dlg__front .tav__sheet {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  border: 0;
  box-shadow: none;
  transition: none;
}

.tav-dlg__front .tav__art .ill { opacity: 1; }

.tav-dlg__back {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: rotateY(180deg);
}

/* il contenuto scorre dentro la tavola; la X (fuori da qui) resta sempre visibile */
.tav-dlg__scroll {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(28px, 4.5vh, 44px) clamp(24px, 3.4vw, 44px) clamp(22px, 3.5vh, 34px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* retro: griglia millimetrata appena accennata, che sfuma verso il basso */
.tav-dlg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(196 162 110 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgb(196 162 110 / 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 55%);
  mask-image: linear-gradient(180deg, #000, transparent 55%);
  pointer-events: none;
}

.tav-dlg__x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(214 184 134 / 0.75);
  border-radius: 50%;
  background: rgb(31 30 28 / 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.35);
  color: var(--c-ink);
  cursor: pointer;
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}

.tav-dlg__x svg,
.tav-dlg__arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tav-dlg__body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;      /* cresce nello spazio libero (il disegno lo occupa) ma non si schiaccia: se manca spazio si scorre */
}

/* il disegno in oro occupa lo spazio libero sopra il testo e si riduce se lo spazio manca */
.tav-dlg__art {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: 0;
  max-height: 260px;
  margin: 8px 0 var(--s-3);
}

.tav-dlg__art .ill {
  width: auto;
  max-width: min(100%, 360px);
  height: 100%;
  max-height: 100%;
}

.tav-dlg__art .ill > path:first-child,
.tav-dlg__art .ill > text:nth-of-type(-n+2) { display: none; }

.tav-dlg__kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding-right: 52px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold-light);
}

.tav-dlg__kicker span + span {
  color: var(--c-ink-mute);
}

.tav-dlg__title {
  margin-top: 10px;
  padding-right: 40px;
  font-family: var(--ff-serif);
  font-size: clamp(1.875rem, 1.5rem + 1vw, 2.5rem);
  font-weight: 500;
  line-height: 1.08;
}

.tav-dlg__text {
  margin-top: var(--s-2);
  color: var(--c-ink-soft);
}

.tav-dlg__sub {
  margin-top: var(--s-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}

.tav-dlg__list {
  margin-top: 8px;
  padding: 0;
  list-style: none;
}

.tav-dlg__list li {
  position: relative;
  padding: 7px 0 7px 26px;
  border-bottom: 1px solid var(--c-line);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.tav-dlg__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(7px + 0.72em);
  width: 13px;
  height: 1px;
  background: var(--c-gold);
}

.tav-dlg__foot {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.tav-dlg__book .book__menu {
  left: 0;
  right: auto;
}

.tav-dlg__nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tav-dlg__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(244 240 232 / 0.26);
  border-radius: 50%;
  background: none;
  color: var(--c-ink);
  cursor: pointer;
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}

@media (hover: hover) {
  .tav-dlg__x:hover,
  .tav-dlg__arrow:hover {
    border-color: var(--c-gold-light);
    background-color: rgb(196 162 110 / 0.12);
  }
}

.tav-dlg__count {
  min-width: 4.5ch;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-soft);
}

/* se lo spazio per il disegno è troppo poco (schermi bassi) il disegno sparisce invece di diventare minuscolo */
@media (max-height: 700px) {
  .tav-dlg__art { display: none; }
}

/* telefono e schermi molto bassi: la tavola resta una card centrata, con margini visibili su tutti i lati;
   se il contenuto è lungo scorre dentro la card. Si chiude con la X, toccando fuori o trascinandola in basso. */
@media (max-width: 639px), (max-height: 560px) {
  .tav-dlg__card {
    width: min(calc(100vw - 36px), 560px);
    height: min(calc(100vh - 120px), 720px);
    height: min(calc(100dvh - 120px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)), 720px);
    aspect-ratio: auto;
  }
  .tav-dlg__face {
    border-color: rgb(214 184 134 / 0.6);
    border-radius: 14px;
  }
  .tav-dlg__scroll { padding: 22px 20px 20px; }
  .tav-dlg__x { top: 10px; right: 10px; }
  .tav-dlg__veil {
    background: rgb(14 13 12 / 0.78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

@media (max-height: 560px) {
  .tav-dlg__card { height: calc(100dvh - 32px); }
}

@media (max-width: 639px) {
  .tav-dlg__art { margin-top: 30px; }
  .tav-dlg__card.is-dragging { transition: none; }
}

/* ---------- WhatsApp su telefono e tablet: sempre visibile, 48 px, a 14 px dai bordi (più la zona sicura
   dell'iPhone). Testi e indicatori vicini al bordo destro hanno lo spazio per non finire mai sotto il pulsante.
   Si nasconde solo con una tavola, il menu, un'informativa, un popup o la modalità visore aperti. ---------- */
@media (max-width: 1023.98px) {
  .wa-fab {
    width: 48px;
    height: 48px;
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .wa-fab svg { width: 22px; height: 22px; }

  /* indicatori dei mazzi (Servizi, team): in una fascia centrale che lascia libera la colonna del pulsante */
  .svc__deck-ui,
  .team-cards__dots {
    padding-inline: 72px;
    text-align: center;
  }

  .svc__swipe,
  .team-deck__hint { text-wrap: balance; }

  /* fondo del percorso di Come lavoriamo: la frase sopra "Prenota" non arriva sotto il pulsante */
  .zz__cta-note { padding-inline: 72px; }

  /* filtri del portfolio: l'ultimo si può far scorrere oltre il pulsante */
  .pf-filters { padding-right: 76px; }

  /* fondo pagina: l'ultima riga del footer sale sopra il pulsante */
  .site-footer { padding-bottom: calc(var(--s-6) + 64px + env(safe-area-inset-bottom, 0px)); }
}

.wa-fab {
  transition: background-color var(--t-1) var(--ease-out), transform var(--t-2) var(--ease-out), opacity 200ms var(--ease-out);
}

html.tav-lock .wa-fab,
html.vr-open .wa-fab,
html.policy-open .wa-fab,
body.nav-open .wa-fab {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   Come lavoriamo – percorso a zig-zag (js/come-lavoriamo.js)
   La pagina scorre normalmente. Un'unica linea oro (con accanto un tratteggio di costruzione bianco osso)
   scende collegando le 6 tappe alternate a sinistra e a destra: scende lungo il bordo della tappa, poi
   attraversa la pagina in leggera discesa con raccordi morbidi. Si disegna seguendo lo scorrimento e accende
   le tappe quando le raggiunge. Telefono e tablet verticale: percorso su un lato con piccole curve.
   ========================================================================== */
.zz__head {
  max-width: 46rem;
  margin: 0 auto var(--s-8);
  text-align: center;
}

.zz__route { position: relative; }

.zz__svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.zz__guide {
  fill: none;
  stroke: rgb(244 240 232 / 0.22);
  stroke-width: 1;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
}

.zz__ink {
  fill: none;
  stroke: var(--c-gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgb(196 162 110 / 0.35));
}

.zz__stops {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zz__stop { position: relative; }

.zz__node {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border: 1px solid rgb(244 240 232 / 0.4);
  border-radius: 50%;
  background: var(--c-bg);
  transition: border-color 400ms var(--ease-out), box-shadow 500ms var(--ease-out), background-color 400ms var(--ease-out);
}

.zz__stop.is-lit .zz__node {
  border-color: var(--c-gold-light);
  background: radial-gradient(circle, #E3C796 0 3px, var(--c-bg) 4px);
  box-shadow: 0 0 0 5px rgb(196 162 110 / 0.12), 0 0 18px rgb(196 162 110 / 0.5);
}

.zz__num {
  font-family: var(--ff-serif);
  font-size: clamp(3rem, 2.2rem + 2.4vw, 4.75rem);
  font-weight: 500;
  line-height: 0.9;
  font-variant-numeric: lining-nums;
  color: var(--c-gold);
}

.zz__title {
  margin-top: var(--s-2);
  font-family: var(--ff-serif);
  font-size: clamp(1.625rem, 1.35rem + 0.9vw, 2.125rem);
  font-weight: 500;
  line-height: 1.12;
}

.zz__text {
  margin-top: 10px;
  max-width: 34ch;
  font-size: var(--fs-lead);
  color: var(--c-ink-soft);
}

.zz__art .ill > path:first-child,
.zz__art .ill > text:nth-of-type(-n+2) { display: none; }

.zz__cta {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.zz__cta-note { color: var(--c-ink-soft); }

/* le tappe compaiono quando il percorso le raggiunge (con JavaScript e senza riduzione del movimento) */
@media (prefers-reduced-motion: no-preference) {
  .js .zz.is-live .zz__copy,
  .js .zz.is-live .zz__cta {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out);
  }
  .js .zz.is-live .zz__stop.is-lit .zz__copy,
  .js .zz.is-live .zz__cta.is-lit {
    opacity: 1;
    transform: none;
  }
  .js .zz.is-measuring .zz__copy,
  .js .zz.is-measuring .zz__cta { transform: none; transition: none; }
}

/* ---------- Desktop: due colonne alternate, il percorso attraversa la pagina tra una tappa e l'altra ---------- */
@media (min-width: 1024px) {
  .zz__stop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s-8);
    align-items: center;
    margin-bottom: 128px;      /* spazio per l'attraversamento in leggera discesa */
  }

  .zz__stop:last-child { margin-bottom: 150px; }

  .zz__stop--l .zz__copy { grid-column: 1; grid-row: 1; padding-left: 64px; }
  .zz__stop--l .zz__art { grid-column: 2; grid-row: 1; }
  .zz__stop--r .zz__copy { grid-column: 2; grid-row: 1; padding-right: 64px; text-align: right; }
  .zz__stop--r .zz__text { margin-left: auto; }
  .zz__stop--r .zz__art { grid-column: 1; grid-row: 1; }

  .zz__art {
    justify-self: center;
    width: min(100%, 380px);
  }
}

/* ---------- Telefono e tablet verticale: zig-zag a tutta larghezza ----------
   La linea scende lungo il bordo sinistro accanto alle tappe dispari e lungo il destro accanto alle pari, e
   attraversa lo schermo con un'ampia S nello spazio tra una tappa e l'altra. Il testo lascia libero il lato della
   linea: allineato a destra quando la linea è a sinistra, a sinistra quando la linea è a destra. */
@media (max-width: 1023.98px) {
  .zz__head { margin-bottom: var(--s-6); }

  .zz__route { max-width: 40rem; margin-inline: auto; }

  .zz__stop { margin-bottom: 132px; }       /* spazio per la curva a S */
  .zz__stop:last-child { margin-bottom: 128px; }

  .zz__stop--l { padding-left: 52px; text-align: right; }
  .zz__stop--r { padding-right: 52px; text-align: left; }
  .zz__stop--l .zz__text,
  .zz__stop--l .zz__art { margin-left: auto; }

  .zz__num { font-size: 2.75rem; }

  .zz__art {
    width: min(100%, 300px);
    margin-top: var(--s-3);
  }
}


/* ---------- Fine del percorso: punta di freccia oro verso "Prenota un incontro" ----------
   Si disegna per ultima quando la linea arriva in fondo; poi il pulsante si illumina una volta sola. */
.zz__arrow {
  fill: none;
  stroke: var(--c-gold-light);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.zz__cta .book { margin-top: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .js .zz.is-live .zz__arrow {
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 120ms linear;
  }
  .js .zz.is-live.is-end .zz__arrow {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 520ms cubic-bezier(0.45, 0.05, 0.25, 1);
  }
  .js .zz.is-glow .zz__cta .book__toggle {
    animation: zz-glow 1500ms cubic-bezier(0.22, 0.61, 0.36, 1) 480ms 1 both;
  }
}

@keyframes zz-glow {
  0% { box-shadow: 0 0 0 0 rgb(196 162 110 / 0); }
  35% { box-shadow: 0 0 0 6px rgb(196 162 110 / 0.22), 0 0 34px rgb(214 184 134 / 0.55); border-color: #E3C796; color: #F1DDB4; }
  100% { box-shadow: 0 0 0 0 rgb(196 162 110 / 0); }
}

/* ---------- Team su telefono e tablet verticale: card girata con X per chiuderla ----------
   Si chiude anche toccando fuori dalla card o trascinandola verso il basso (js/team.js). */
.tcard__x { display: none; }

@media (max-width: 899.98px) {
  .is-deck .tcard.is-front .tcard__x {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgb(214 184 134 / 0.75);
    border-radius: 50%;
    background: rgb(31 30 28 / 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.35);
    color: var(--c-ink);
    cursor: pointer;
  }
  .tcard__x svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
  }
  /* girata: il dito trascina la card (in basso per chiuderla), la pagina non scorre sotto */
  .is-deck .tcard.is-front.is-flipped { touch-action: none; }
}

/* ==========================================================================
   Cursore del sito (js/cursore.js) – solo con il mouse
   ========================================================================== */
.cur { display: none; }

@media (hover: hover) and (pointer: fine) {
  /* il cursore di sistema si nasconde ovunque, tranne dove serve per scrivere o dove lavorano altre interazioni */
  html.cur-on *:not(input, textarea, select, label[for], .vr, .vr *, dialog, dialog *, .tav, .tav *, .toast, .toast *) {
    cursor: none;
  }
  /* il cursore si eredita: le zone escluse ripartono da quello di sistema (i loro pulsanti tengono il proprio) */
  html.cur-on :is(.vr, dialog, .toast) { cursor: auto; }

  .cur {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2147483000;
    display: block;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    will-change: transform;
  }

  html.cur-on .cur { opacity: 1; }
  html.cur-on .cur[data-state="sys"] { opacity: 0; }

  /* il cerchio del cursore: uguale in tutto il sito (nei Servizi lavora la lente) */
  .cur__ring {
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--c-gold-light);
    border-radius: 50%;
    background: transparent;
    transform: translate(-50%, -50%);
    transition: width 200ms cubic-bezier(0.22, 0.8, 0.3, 1), height 200ms cubic-bezier(0.22, 0.8, 0.3, 1);
  }

  /* link e pulsanti: un po' più piccolo, lascia lavorare l'effetto del pulsante */
  .cur[data-state="link"] .cur__ring { width: 7px; height: 7px; }

}

/* Team su desktop: nel documento (e per i lettori di schermo) Enrico, Michele, Monica; a schermo Enrico al centro */
@media (min-width: 900px) {
  .team-cards .tcard:nth-child(1) { grid-column: 2; grid-row: 1; }
  .team-cards .tcard:nth-child(2) { grid-column: 1; grid-row: 1; }
  .team-cards .tcard:nth-child(3) { grid-column: 3; grid-row: 1; }
}

/* ---------- Servizi su telefono e tablet (touch): griglia grigia da sfondo, disegno oro pieno ----------
   Vale per lo strato che si rivela nel mazzo e per il disegno della tavola aperta; su desktop la lente non cambia. */
@media (hover: none) {
  .svc .tav__grid {
    background-color: rgb(20 19 17 / 0.4);
    background-image:
      linear-gradient(rgb(244 240 232 / 0.13) 1px, transparent 1px),
      linear-gradient(90deg, rgb(244 240 232 / 0.13) 1px, transparent 1px),
      linear-gradient(rgb(244 240 232 / 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgb(244 240 232 / 0.05) 1px, transparent 1px);
  }

  /* il disegno: oro pieno, tratto più spesso */
  .svc .ill--x path,
  .svc .ill--x rect,
  .svc .ill--x circle,
  .tav-dlg .ill--x path,
  .tav-dlg .ill--x rect,
  .tav-dlg .ill--x circle {
    stroke: #D6B886;
    stroke-width: 1.5;
  }

  /* linee di costruzione, quote, assi e richiami: grigio tenue, come la griglia */
  .svc .ill--x .f,
  .tav-dlg .ill--x .f { stroke: rgb(244 240 232 / 0.2); stroke-width: 0.8; }
  .svc .ill--x .f.c,
  .svc .ill--x .f.cg,
  .tav-dlg .ill--x .f.c,
  .tav-dlg .ill--x .f.cg { fill: rgb(244 240 232 / 0.05); stroke: none; }
  .svc .ill--x .xg *,
  .tav-dlg .ill--x .xg * { stroke: rgb(244 240 232 / 0.2); stroke-width: 0.7; }
  /* la bolla del richiamo "A" senza la lettera (testi nascosti sotto i 900 px) sarebbe solo un pallino: via */
  .svc .ill--x .xb,
  .tav-dlg .ill--x .xb { display: none; }
  .svc .ill--x .xt,
  .tav-dlg .ill--x .xt { fill: rgb(244 240 232 / 0.35); stroke: none; }
}