/* =================================================================
   Elisa Giusti — Dietista · Massa Carrara
   Palette: crema · prugna · oro
   Type: Fraunces (display) + Manrope (sans)
   ================================================================= */

:root {
  --plum-990:  #170a11;
  --plum-950:  #2b1522;
  --plum-900:  #3a1e30;
  --plum-800:  #4e2a41;
  --plum-700:  #66385a;
  --plum-500:  #9a5c8c;

  --rose-600:  #c07c8b;
  --rose-500:  #d497a2;
  --rose-400:  #e3b3ba;
  --rose-300:  #eecbcf;

  --cream-200: #f3e4cf;
  --cream-100: #faf1e2;
  --cream-50:  #fdf8ef;

  --gold:      #b4894f;
  /* oro "da testo": l'oro chiaro sul crema sta sotto 2.5:1 e le maiuscolette
     piccole diventano illeggibili — questa variante sale sopra 4.5:1 */
  --gold-ink:  #6f4f24;
  --gold-lt:   #d8b98a;
  --gold-hi:   #f0dcb6;
  --gold-deep: #8a6533;

  --ink-900:   #241621;
  --ink-700:   #4a3a45;
  --ink-500:   #7a6672;

  --line:      rgba(78, 42, 65, 0.14);
  --line-gold: rgba(180, 137, 79, 0.28);

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:  'Manrope', -apple-system, 'Segoe UI', Arial, sans-serif;

  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
  --maxw:  1240px;
}

/* ---------- reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--cream-50);
  color: var(--ink-900);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold-lt); color: var(--plum-950); }

/* grain finissimo — rompe il banding dei gradienti */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 3;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  mix-blend-mode: multiply;
}

/* =================================================================
   NAV
   ================================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem clamp(1.2rem, 4vw, 3rem);
  transition: background 0.4s var(--ease), padding 0.4s var(--ease),
              backdrop-filter 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
/* barra "premium": bordeaux che scivola verso il prugna quasi nero, lo
   stesso registro cromatico del video in seta usato come fondo altrove —
   non un semplice tint, ma un vero gradiente con una sfumatura di luce
   dorata in superficie per dargli profondità invece di un piatto colore */
.nav.scrolled {
  background:
    linear-gradient(180deg, rgba(216,185,138,0.10), transparent 40%),
    linear-gradient(120deg, rgba(96,35,58,0.94) 0%, rgba(58,24,42,0.95) 48%, rgba(20,9,15,0.97) 100%);
  /* niente backdrop-filter: il fondo è opaco al 94-97%, la sfocatura dietro
     non si vedrebbe comunque e in cambio terrebbe il testo della barra su
     un layer GPU, privandolo dell'antialiasing subpixel */
  padding-top: 0.9rem; padding-bottom: 0.9rem;
  border-bottom-color: rgba(180, 137, 79, 0.35);
  box-shadow: 0 18px 40px -24px rgba(10, 4, 8, 0.65);
}
/* nowrap su tutto il blocco: senza, "Elisa Giusti" va a capo appena la
   riga si stringe e la barra si sfascia in altezza */
.nav__brand { display: flex; align-items: baseline; gap: 0.5rem; flex: none; white-space: nowrap; }
.nav__word {
  font-family: var(--serif); font-size: clamp(1.55rem, 2.6vw, 1.9rem); font-weight: 500;
  letter-spacing: 0.002em; color: var(--cream-50);
  transition: color 0.4s var(--ease);
  text-shadow: 0 1px 10px rgba(23, 10, 17, 0.5);
}
.nav__role {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1rem, 1.6vw, 1.2rem); letter-spacing: 0.005em;
  color: var(--gold-lt); transition: color 0.4s var(--ease);
  text-shadow: 0 1px 10px rgba(23, 10, 17, 0.5);
}

.nav__links { display: flex; gap: clamp(1rem, 2.2vw, 2rem); align-items: center; white-space: nowrap; }
.nav__links a {
  font-size: clamp(0.64rem, 0.95vw, 0.74rem); font-weight: 500;
  letter-spacing: clamp(0.06em, 0.2vw, 0.14em); text-transform: uppercase;
  color: var(--cream-100); position: relative; padding: 0.2rem 0;
  transition: color 0.3s;
  text-shadow: 0 1px 8px rgba(23, 10, 17, 0.55);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 0;
  background: var(--gold-lt); transition: width 0.35s var(--ease);
}
.nav__links a:hover::after { width: 100%; }
.nav.scrolled .nav__links a:hover { color: var(--gold-hi); }
.nav__cta { display: inline-flex; }
.nav__burger { display: none; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.95rem 1.9rem; border-radius: 999px; cursor: pointer;
  transition: all 0.4s var(--ease); border: 1px solid transparent;
  min-height: 46px;
}
.btn--gold {
  background: linear-gradient(135deg, var(--gold-lt), var(--gold));
  color: var(--plum-990);
  box-shadow: 0 10px 32px -14px rgba(180, 137, 79, 0.85);
}
.btn--gold:hover {
  transform: translateY(-2px); filter: brightness(1.05);
  box-shadow: 0 16px 42px -14px rgba(180, 137, 79, 1);
}
.btn--plum {
  background: var(--plum-800); color: var(--cream-50);
  box-shadow: 0 10px 32px -16px rgba(43, 21, 34, 0.8);
}
.btn--plum:hover { background: var(--plum-950); transform: translateY(-2px); }
.btn--ghost {
  border-color: var(--line-gold); color: var(--gold-ink);
  background: transparent;
}
.btn--ghost:hover { background: var(--gold); color: var(--plum-990); border-color: var(--gold); }
.btn--ghost-dark { border-color: rgba(78,42,65,0.24); color: var(--plum-800); background: transparent; }
.btn--ghost-dark:hover { background: var(--plum-800); color: var(--cream-50); border-color: var(--plum-800); }
.btn--light { background: var(--cream-50); color: var(--plum-950); }
.btn--light:hover { transform: translateY(-2px); background: #fff; }
.btn--lg { padding: 1.15rem 2.5rem; font-size: 0.8rem; }
.btn--block { width: 100%; }

/* nav CTA sopra l'hero scuro */
.nav__cta { border-color: rgba(216, 185, 138, 0.6); color: var(--gold-hi); }
.nav.scrolled .nav__cta { border-color: rgba(216, 185, 138, 0.55); color: var(--gold-hi); }
.nav.scrolled .nav__cta:hover { background: var(--gold); color: var(--plum-990); }

/* mobile menu — stesso registro bordeaux della barra, non un fondo bianco
   a parte: aperto occupa tutto lo schermo, e un fondo neutro spezzava la
   continuità con la nav da cui viene aperto */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background:
    radial-gradient(ellipse 90% 55% at 50% 12%, rgba(150, 58, 88, 0.55), transparent 70%),
    linear-gradient(165deg, #5c2438 0%, #3d1a2e 38%, #1d0c17 74%, #0c0509 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.5rem; padding: 5rem 1.5rem 2.5rem;
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s;
}
/* grana di marmo: la stessa materia dell'hero, appena percettibile */
.mobile-menu::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("../assets/textures/marmo-crema.webp");
  background-size: cover; background-position: center;
  mix-blend-mode: overlay; opacity: 0.16;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu a {
  position: relative; font-family: var(--serif);
  font-size: clamp(1.5rem, 6vw, 1.95rem); color: var(--cream-50);
  transition: color 0.3s;
}
.mobile-menu a:hover { color: var(--gold-hi); }
.mobile-menu .btn {
  font-family: var(--sans); font-size: 0.85rem;
  margin-top: 0.6rem; width: min(320px, 82vw);
}

/* =================================================================
   HERO — sequenza scroll
   ================================================================= */
/* fondo di caduta sotto il canvas: si vede solo nell'istante prima che il
   primo frame sia decodificato. Stesso registro bordeaux della tinta sopra,
   così l'attacco non ha mai un lampo di colore estraneo */
.hero {
  position: relative; height: 320vh;
  background: linear-gradient(165deg, #5c2438 0%, #3d1a2e 32%, #200e1a 68%, #0c0509 100%);
}
.hero__canvas {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh; z-index: 1;
  display: block;
}
/* Lo sfondo grigio non è della sezione: è lo studio ripreso dentro ai frame,
   e il canvas li disegna opachi sopra qualsiasi fondo. L'unico modo di
   portarlo sul bordeaux è tingerlo qui, sopra al canvas.
   multiply spegnerebbe anche l'oro della luce, quindi la tinta è divisa in
   due passate: questa porta il grigio verso il bordeaux, e .hero__ember
   (screen) restituisce alla luce la sua temperatura calda. */
/* Tinta bordeaux a vignettatura, non a filtro pieno: in multiply il bianco
   è l'elemento neutro (bianco × immagine = immagine invariata), quindi il
   centro resta rigorosamente l'originale — viso, luce e scintille intatti —
   e la tinta cresce solo allontanandosi dal centro.
   I toni restano chiari di proposito: un bordeaux scuro in multiply
   annerirebbe i bordi invece di tingerli. */
.hero__wash {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 54% 76% at 50% 48%,
    rgb(255, 255, 255) 0%,
    rgb(255, 255, 255) 26%,
    rgb(250, 220, 230) 46%,
    rgb(236, 164, 190) 64%,
    rgb(216, 110, 146) 82%,
    rgb(196, 80, 116) 100%);
  mix-blend-mode: multiply;
}
/* grana di marmo sui soli bordi: il mask la spegne al centro insieme alla
   tinta, così non tocca la figura */
.hero__wash::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("../assets/textures/marmo-crema.webp");
  background-size: cover; background-position: center;
  mix-blend-mode: overlay; opacity: 0.3;
  -webkit-mask-image: radial-gradient(ellipse 54% 76% at 50% 48%, transparent 30%, #000 88%);
  mask-image: radial-gradient(ellipse 54% 76% at 50% 48%, transparent 30%, #000 88%);
}
/* la copy sta al centro esatto, sopra la figura: lo scrim centrale la stacca
   dallo sfondo senza spegnere l'oro, che vive più in basso e ai bordi */
.hero__vignette {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 34% at 50% 48%, rgba(23,10,17,0.44), rgba(23,10,17,0.20) 55%, transparent 78%),
    radial-gradient(ellipse at center, transparent 40%, rgba(23,10,17,0.20) 72%, rgba(23,10,17,0.46) 100%);
}
/* centrato con la griglia, non con translate(-50%,-50%): quel translate
   cade su mezzo pixel ogni volta che il blocco ha altezza dispari, e il
   testo ci finisce sopra interpolato — qui il centraggio resta sui pixel
   pieni e i glifi restano netti */
.hero__intro,
.hero__reveal {
  --hero-copy: min(90vw, 900px);
  position: fixed; inset: 0; z-index: 4;
  display: grid; align-content: center; justify-items: center;
  text-align: center;
  pointer-events: none;
}
.hero__intro > *, .hero__reveal > * { max-width: var(--hero-copy); }
.hero__reveal { opacity: 0; }
.hero__reveal .btn { pointer-events: auto; }

.eyebrow {
  font-size: 0.7rem; letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--gold-lt); margin-bottom: 1.3rem; font-weight: 600;
}
.hero__intro .eyebrow,
.hero__reveal .eyebrow {
  text-shadow: 0 1px 2px rgba(23,10,17,0.95), 0 0 10px rgba(23,10,17,0.85), 0 1px 14px rgba(23,10,17,0.8);
  -webkit-text-stroke: 0.5px rgba(23,10,17,0.7); paint-order: stroke fill;
}
.hero__title {
  font-family: var(--serif); font-weight: 400;
  /* tre righe invece di due: il corpo scende quel tanto che basta perché
     "Equilibrio fra" resti su una riga sola anche a 900px di colonna */
  font-size: clamp(2.1rem, 5.2vw, 4.6rem); line-height: 1.08;
  color: var(--cream-50); letter-spacing: -0.015em;
  /* contorno scuro sui glifi: è ciò che tiene leggibile la copy anche dove
     passa la luce dorata, senza dover schiacciare l'immagine sotto */
  text-shadow: 0 2px 30px rgba(23,10,17,0.75), 0 1px 3px rgba(23,10,17,0.7);
  -webkit-text-stroke: 1.1px rgba(23,10,17,0.7); paint-order: stroke fill;
}
.hero__title em {
  font-style: italic; font-weight: 400;
  color: var(--gold-hi);
  -webkit-text-stroke: 1.1px rgba(23,10,17,0.8); paint-order: stroke fill;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.hero__title .line span { display: block; }
.hero__sub {
  margin-top: 1.6rem; font-size: clamp(0.95rem, 1.5vw, 1.12rem);
  color: var(--cream-100); max-width: 46ch; margin-left: auto; margin-right: auto;
  font-weight: 400;
  /* alone stretto e denso: il testo piccolo si porta dietro il proprio
     fondo scuro, ovunque capiti sopra la sequenza */
  text-shadow: 0 1px 2px rgba(23,10,17,0.95), 0 0 12px rgba(23,10,17,0.85), 0 1px 20px rgba(23,10,17,0.75);
  -webkit-text-stroke: 0.6px rgba(23,10,17,0.7); paint-order: stroke fill;
}
.hero__scrollcue {
  position: fixed; left: 50%; bottom: clamp(1.6rem, 5vh, 3rem); transform: translateX(-50%);
  z-index: 4; display: flex; flex-direction: column-reverse; align-items: center; gap: 0.8rem;
  pointer-events: none;
}
.hero__scrollcue-line {
  width: 1px; height: 44px; background: linear-gradient(var(--gold-lt), transparent);
  animation: cue 2.2s var(--ease) infinite;
}
/* leggibilità garantita indipendentemente da cosa passa sotto nella sequenza:
   un piccolo badge scuro invece di affidarsi al solo contrasto col fondo */
.hero__scrollcue-label {
  font-size: 0.64rem; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--cream-50);
  background: rgba(23, 10, 17, 0.4);
  border: 1px solid rgba(250, 241, 226, 0.22);
  backdrop-filter: blur(6px);
  padding: 0.5rem 0.9rem 0.45rem;
  border-radius: 999px;
}
@keyframes cue {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.hero__reveal-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.14;
  color: var(--cream-50); margin-bottom: 2rem;
  text-shadow: 0 2px 30px rgba(23,10,17,0.75), 0 1px 3px rgba(23,10,17,0.7);
  -webkit-text-stroke: 1px rgba(23,10,17,0.7); paint-order: stroke fill;
}
.hero__reveal-title em {
  font-style: italic; color: var(--gold-hi);
  -webkit-text-stroke: 1px rgba(23,10,17,0.8); paint-order: stroke fill;
}

/* =================================================================
   MARQUEE
   ================================================================= */
.marquee {
  position: relative; z-index: 5;
  background: var(--plum-950); color: var(--cream-100);
  padding: 1.2rem 0; overflow: hidden; white-space: nowrap;
}
.marquee::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(23,10,17,0.32), rgba(43,21,34,0.28));
}
.marquee__track {
  position: relative; z-index: 2;
}
.marquee__track { display: inline-flex; align-items: center; gap: 2.4rem; animation: scrollx 32s linear infinite; }
.marquee__track span {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--cream-100);
}
.marquee__track i { color: var(--gold-lt); font-style: normal; }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* =================================================================
   IMPALCATURA SEZIONI
   ================================================================= */
section { position: relative; z-index: 5; background: var(--cream-50); }
.section-pad { padding: clamp(4.5rem, 11vh, 9rem) clamp(1.2rem, 5vw, 4rem); }
.section-head { max-width: var(--maxw); margin: 0 auto 3.4rem; }
.section-head--center { text-align: center; }
.section-head--center .eyebrow { text-align: center; }
.section-num {
  font-size: 0.7rem; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--gold-ink); font-weight: 600; margin-bottom: 1.2rem;
}
.section-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.1; color: var(--plum-950);
  letter-spacing: -0.015em;
}
.section-title em {
  font-style: italic;
  background: linear-gradient(120deg, var(--gold-ink), var(--gold-deep) 58%, #96702f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-lede {
  font-size: clamp(1rem, 1.5vw, 1.12rem); color: var(--ink-700); max-width: 60ch;
}

/* blob decorativi morbidi */
.blob-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.5;
  animation: blobDrift 22s ease-in-out infinite alternate;
}
@keyframes blobDrift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(3%, -4%, 0) scale(1.08); }
}
.section-pad > .container { position: relative; z-index: 2; }
.container { max-width: var(--maxw); margin: 0 auto; }

/* reveal base */
.reveal { opacity: 0; transform: translateY(34px); }
/* a entrata conclusa l'elemento torna senza transform: con uno attivo
   (anche identità) resterebbe su un layer GPU e il testo perderebbe
   l'antialiasing subpixel, apparendo sgranato */
.reveal.is-revealed { transform: none; }

/* =================================================================
   STORIA / MANIFESTO
   ================================================================= */
/* fondo in marmo crema: la lastra sta sotto un velo chiaro che ne lascia
   passare le venature ma riporta il contrasto del testo a valori pieni.
   Condiviso fra sezione 01 (storia) e sezione 03 (metodo): stesso identico
   sfondo, non una copia — un ritocco al marmo vale per entrambe. */
.story, .pillars, .testi { position: relative; background: var(--cream-100); overflow: hidden; }
.story::before, .pillars::before, .testi::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(ellipse 760px 480px at 12% 6%, rgba(216,185,138,0.16), transparent 62%),
    radial-gradient(ellipse 660px 520px at 90% 94%, rgba(212,151,162,0.14), transparent 62%),
    linear-gradient(180deg, rgba(253,248,239,0.28), rgba(250,241,226,0.38)),
    url("../assets/textures/marmo-crema.webp");
  background-size: auto, auto, auto, cover;
  /* la lastra è orizzontale: ancorata in alto mostra le venature principali
     invece del centro piatto, e su una sezione larga resta quasi 1:1 */
  background-position: center, center, center, center top;
  background-repeat: no-repeat;
  /* La lastra è ancorata in alto, quindi la venatura chiara che corre in
     cima all'immagine cade esattamente sulla giuntura con la sezione
     precedente e si legge come una riga chiara. I fondi delle due
     sezioni coincidono già: basta far nascere la texture sfumando, e
     il passaggio sparisce. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 170px);
  mask-image: linear-gradient(180deg, transparent 0, #000 170px);
}
.story > *, .pillars > *, .testi > * { position: relative; z-index: 2; }
.story__grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.story__lines p {
  font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--ink-700);
  margin-bottom: 1.4rem; max-width: 56ch;
}
.story__lines b { color: var(--plum-800); font-weight: 700; }
.story__quote {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.35;
  color: var(--plum-800);
  padding-left: 1.6rem; margin-top: 2.4rem;
  border-left: 2px solid var(--gold-lt);
}

/* =================================================================
   FILOSOFIA (citazione grande)
   ================================================================= */
.philosophy {
  background: var(--plum-950); color: var(--cream-100);
  text-align: center; overflow: hidden;
}
.philosophy::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 700px 420px at 15% 10%, rgba(216,185,138,0.14), transparent 62%),
    radial-gradient(ellipse 620px 480px at 85% 90%, rgba(212,151,162,0.12), transparent 62%),
    linear-gradient(180deg, rgba(23,10,17,0.32), rgba(43,21,34,0.28));
}
.philosophy .container { position: relative; z-index: 2; }
.philosophy .eyebrow { color: var(--gold-lt); }
.philosophy blockquote {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(1.5rem, 3.6vw, 2.9rem); line-height: 1.3;
  color: var(--cream-50); max-width: 22ch; margin: 0 auto;
  letter-spacing: -0.01em;
}
.philosophy cite {
  display: block; margin-top: 2rem; font-family: var(--sans); font-style: normal;
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-lt);
}

/* =================================================================
   CHI È ELISA
   ================================================================= */
/* ---------- fondi video ----------
   il video scorre nel flusso della sezione (niente fixed, niente parallasse)
   sotto un velo che riporta il contrasto del testo a valori pieni */
.section-bgvideo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
.about {
  overflow: hidden;
  background: radial-gradient(ellipse 900px 600px at 85% 10%, var(--rose-300), transparent 60%),
              linear-gradient(180deg, var(--cream-50), var(--cream-100));
}
.about__grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.about__photo {
  position: relative; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(43,21,34,0.55);
  /* la foto è un ritaglio a sfondo trasparente: senza un fondo qui sotto,
     l'alone attorno alla figura lascerebbe vedere la scacchiera a tratti —
     questo tinta la lastra invece di lasciarla bucata */
  background: linear-gradient(160deg, var(--cream-200), var(--rose-300) 120%);
}
.about__photo::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(180,137,79,0.35);
  border-radius: inherit; pointer-events: none;
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.8rem; }
.chip {
  font-size: 0.72rem; letter-spacing: 0.08em; font-weight: 600;
  padding: 0.5rem 1rem; border-radius: 999px;
  background: var(--cream-100); color: var(--plum-800);
  border: 1px solid var(--line);
}
.about .section-lede + .section-lede { margin-top: 1.2rem; }

/* =================================================================
   PILASTRI
   ================================================================= */
.pillars__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem;
}
.pillar {
  position: relative; padding: clamp(1.8rem, 3vw, 2.6rem);
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 18px 50px -34px rgba(43,21,34,0.4);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s;
}
.pillar:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 70px -34px rgba(43,21,34,0.5);
  border-color: var(--line-gold);
}
.pillar__num {
  font-family: var(--serif); font-size: 2.4rem; line-height: 1; font-weight: 400;
  background: linear-gradient(180deg, var(--gold-deep), var(--gold-ink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block; margin-bottom: 1rem;
}
.pillar h3 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.2rem, 2vw, 1.55rem);
  color: var(--plum-950); margin-bottom: 0.7rem; line-height: 1.25;
}
.pillar p { font-size: 0.96rem; color: var(--ink-700); }
.pillar__not {
  margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px dashed var(--line);
  font-size: 0.82rem; color: var(--ink-500); font-style: italic;
}

/* =================================================================
   NUMERI
   ================================================================= */
.stats { background: var(--plum-950); color: var(--cream-100); overflow: hidden; }
.stats::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 900px 400px at 50% 0%, rgba(180,137,79,0.16), transparent 65%),
    linear-gradient(180deg, rgba(23,10,17,0.32), rgba(43,21,34,0.28));
}
.stats .container { position: relative; z-index: 2; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.stat b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span {
  display: block; margin-top: 0.7rem;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(250, 241, 226, 0.66);
}

/* =================================================================
   TESTIMONIANZE
   ================================================================= */
.testi__viewport {
  max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.testi__viewport + .testi__viewport { margin-top: 1.2rem; }
.testi__track {
  display: inline-flex; gap: 1.2rem; padding: 0.6rem 0.6rem;
  animation: testi-scroll 62s linear infinite;
  will-change: transform;
}
.testi__track--reverse { animation-direction: reverse; animation-duration: 74s; }
.testi__viewport:hover .testi__track { animation-play-state: paused; }
@keyframes testi-scroll { to { transform: translateX(-50%); } }

.testi__card {
  flex: 0 0 340px; padding: 1.8rem;
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 18px 50px -36px rgba(43,21,34,0.45);
  white-space: normal;
}
.testi__stars { color: var(--gold-deep); letter-spacing: 0.18em; font-size: 0.82rem; margin-bottom: 0.9rem; }
.testi__card p {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.02rem; line-height: 1.45; color: var(--plum-900); margin-bottom: 1.2rem;
}
.testi__person { display: flex; align-items: center; gap: 0.8rem; }
.testi__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--rose-300), var(--rose-500));
  color: var(--plum-950); font-weight: 700; font-size: 0.9rem;
}
.testi__person strong { display: block; font-size: 0.88rem; color: var(--plum-950); }
.testi__person span { display: block; font-size: 0.74rem; color: var(--ink-500); }

/* =================================================================
   FAQ
   ================================================================= */
.faq {
  background: radial-gradient(ellipse 900px 550px at 50% 0%, var(--rose-300), transparent 62%),
              linear-gradient(180deg, var(--cream-100), var(--cream-50));
}
.faq__list { max-width: 880px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 0.2rem; text-align: left;
  font-family: var(--serif); font-size: clamp(1.05rem, 2vw, 1.4rem); font-weight: 500;
  color: var(--plum-950); transition: color 0.3s;
}
.faq__q:hover { color: var(--plum-700); }
.faq__q svg { flex: none; color: var(--gold-ink); transition: transform 0.45s var(--ease); }
.faq__item.open .faq__q svg { transform: rotate(45deg); }
.faq__a { overflow: hidden; height: 0; }
.faq__a-inner { padding: 0 0.2rem 1.6rem; }
.faq__a-inner p { color: var(--ink-700); max-width: 68ch; }

/* =================================================================
   CTA FINALE
   ================================================================= */
.cta { padding: clamp(1.2rem, 5vw, 4rem); background: var(--cream-50); }
.cta__band {
  position: relative; overflow: hidden;
  max-width: var(--maxw); margin: 0 auto;
  background: linear-gradient(140deg, var(--plum-950), var(--plum-800) 55%, var(--plum-900));
  color: var(--cream-50); border-radius: 42px; text-align: center;
  padding: clamp(3rem, 8vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
}
.cta__band::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 620px 380px at 12% 6%, rgba(216,185,138,0.18), transparent 62%),
    radial-gradient(ellipse 560px 420px at 88% 96%, rgba(212,151,162,0.16), transparent 62%),
    linear-gradient(140deg, rgba(23,10,17,0.34), rgba(43,21,34,0.28) 55%, rgba(23,10,17,0.32));
}
.cta__band > *:not(.section-bgvideo) { position: relative; z-index: 2; }
.cta__band h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: 1.12;
  margin-bottom: 1.2rem; letter-spacing: -0.015em;
}
.cta__band h2 em {
  font-style: italic;
  background: linear-gradient(120deg, var(--gold-lt), var(--gold-hi));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cta__band p { color: rgba(250, 241, 226, 0.82); max-width: 56ch; margin: 0 auto 2.2rem; }
.cta__actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
.cta__actions .btn--ghost { border-color: rgba(250,241,226,0.4); color: var(--cream-50); }
.cta__actions .btn--ghost:hover { background: var(--cream-50); color: var(--plum-950); }
/* selettore a due classi e non il solo .cta__hint: la riga è pur sempre
   un <p> dentro la fascia, e ".cta__band p" qui sopra azzera il margine
   con specificità maggiore — per questo la scritta risultava incollata
   ai pulsanti, con zero pixel di stacco */
.cta__band .cta__hint {
  /* più staccata che nell'originale: qui sopra i due pulsanti sono
     magnetici e scendono inseguendo il cursore, arrivando a coprirla */
  margin-top: clamp(2.6rem, 4vw, 3.4rem);
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(250,241,226,0.74);
}

/* =================================================================
   FOOTER
   ================================================================= */
.footer {
  background: var(--plum-990); color: rgba(250,241,226,0.78);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.2rem, 5vw, 4rem) 2rem;
  position: relative; z-index: 5; overflow: hidden;
}
/* il footer è pieno di testo piccolo: il velo qui è il più carico dei cinque */
.footer::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 800px 420px at 10% 4%, rgba(216,185,138,0.10), transparent 62%),
    linear-gradient(180deg, rgba(23,10,17,0.38), rgba(23,10,17,0.34));
}
.footer > *:not(.section-bgvideo) { position: relative; z-index: 2; }
.footer__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 2.5rem;
}
.footer__brand .nav__word { color: var(--cream-50); text-shadow: none; font-size: 1.5rem; }
.footer__brand .nav__role { color: var(--gold-lt); text-shadow: none; }
.footer__brand p { font-size: 0.9rem; margin-top: 1rem; max-width: 36ch; }
.footer__col h4 {
  font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-lt); margin-bottom: 1rem;
}
.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: 0.5rem; font-size: 0.92rem; }
.footer__col a:hover, .footer__brand a:hover { color: var(--gold-lt); }
.footer__contact { display: flex; gap: 0.7rem; align-items: flex-start; margin-bottom: 0.9rem; font-size: 0.9rem; }
.footer__contact svg { flex: none; margin-top: 0.25rem; color: var(--gold-lt); }
.footer__social { display: flex; gap: 0.6rem; margin-top: 1.4rem; }
.social-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(216,185,138,0.32); color: var(--gold-lt);
  transition: all 0.35s var(--ease);
}
.social-btn:hover { background: var(--gold-lt); color: var(--plum-990); transform: translateY(-2px); }
.footer__map {
  max-width: var(--maxw); margin: 3rem auto 0; height: 300px;
  border-radius: 22px; overflow: hidden; border: 1px solid rgba(216,185,138,0.22);
  filter: saturate(0.85) contrast(1.02) brightness(0.95);
}
.footer__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.footer__bottom {
  max-width: var(--maxw); margin: 2.5rem auto 0; padding-top: 1.5rem;
  border-top: 1px solid rgba(250,241,226,0.12);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem;
  font-size: 0.72rem; letter-spacing: 0.06em; color: rgba(250,241,226,0.72);
}

/* =================================================================
   WHATSAPP FLOAT
   ================================================================= */
.wa-float {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; color: #fff;
  box-shadow: 0 14px 34px -12px rgba(37,211,102,0.75);
  /* il transform è escluso apposta: lo guida GSAP fotogramma per fotogramma
     per l'effetto magnetico, e una transizione sopra lo stesso canale
     aggiungerebbe un secondo smorzamento, facendolo arrivare in ritardo */
  transition: scale 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
/* niente transform qui: il pulsante è magnetico e il suo transform è
   scritto da GSAP: una regola CSS sullo stesso canale lo sovrascriverebbe
   a ogni passaggio del mouse, facendolo scattare. Resta l'ombra, e la
   crescita al passaggio la gestisce "scale", che è una proprietà a sé */
.wa-float:hover { scale: 1.06; box-shadow: 0 20px 44px -12px rgba(37,211,102,0.9); }

/* =================================================================
   PAGINA INTERNA (contatti)
   ================================================================= */
/* sulle pagine interne la barra è sempre nello stesso stato "premium":
   stesso gradiente bordeaux→prugna nero fin dal caricamento, senza attendere
   lo scroll — coerenza con la home invece di un fondo chiaro a parte */
body.page .nav {
  background:
    linear-gradient(180deg, rgba(216,185,138,0.10), transparent 40%),
    linear-gradient(120deg, rgba(96,35,58,0.94) 0%, rgba(58,24,42,0.95) 48%, rgba(20,9,15,0.97) 100%);
  border-bottom-color: rgba(180, 137, 79, 0.35);
  box-shadow: 0 18px 40px -24px rgba(10, 4, 8, 0.65);
}
body.page .nav__links a:hover { color: var(--gold-hi); }
body.page .nav__cta:hover { background: var(--gold); color: var(--plum-990); }

.page-hero {
  padding: calc(clamp(4.5rem, 11vh, 9rem) + 4rem) clamp(1.2rem, 5vw, 4rem) clamp(2rem, 5vh, 4rem);
  background: linear-gradient(180deg, var(--cream-100), var(--cream-50));
  overflow: hidden;
}
.breadcrumb { font-size: 0.76rem; letter-spacing: 0.08em; color: var(--ink-500); margin-bottom: 1.4rem; }
.breadcrumb a:hover { color: var(--plum-800); }
.page-hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 4rem); line-height: 1.08; color: var(--plum-950);
  letter-spacing: -0.02em; max-width: 18ch;
}
.page-hero h1 em {
  font-style: italic;
  background: linear-gradient(120deg, var(--gold-ink), var(--gold-deep) 58%, #96702f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.contact__grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: start;
}
.contact__card {
  background: #fff; border: 1px solid var(--line); border-radius: 26px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: 0 24px 60px -40px rgba(43,21,34,0.5);
}
.contact__card h3 {
  font-family: var(--serif); font-weight: 500; font-size: 1.35rem;
  color: var(--plum-950); margin-bottom: 1.4rem;
}
.contact__row { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.9rem 0; border-top: 1px solid var(--line); }
.contact__row:first-of-type { border-top: 0; padding-top: 0; }
.contact__row svg { flex: none; color: var(--gold-ink); margin-top: 0.2rem; }
.contact__row strong { display: block; font-size: 0.9rem; color: var(--plum-950); }
.contact__row span, .contact__row a { display: block; font-size: 0.9rem; color: var(--ink-700); }
.contact__row a:hover { color: var(--plum-800); }

.form { display: grid; gap: 1.1rem; margin-top: 1.6rem; }
.field label {
  display: block; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: 0.5rem; font-weight: 600;
}
.field input, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 0.98rem; color: var(--ink-900);
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 0.9rem 1.1rem; transition: border-color 0.3s, box-shadow 0.3s;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--gold-lt);
  box-shadow: 0 0 0 4px rgba(216,185,138,0.22);
}
.field textarea { resize: vertical; min-height: 120px; }
.form__note { font-size: 0.76rem; color: var(--ink-500); }

.map-frame {
  max-width: var(--maxw); margin: 0 auto;
  border-radius: 26px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 24px 60px -40px rgba(43,21,34,0.45);
}
.map-frame iframe { display: block; width: 100%; height: 380px; border: 0; }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 1100px) {
  .hero__intro, .hero__reveal { --hero-copy: min(84vw, 700px); }
}
/* il passaggio al menu a scomparsa avviene prima dei 900px: fra 900 e 1024
   le voci ci stavano solo comprimendosi fino a sovrapporsi al logo */
@media (max-width: 1024px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger {
    display: flex; flex-direction: column; gap: 5px;
    width: 46px; height: 46px; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    position: relative; z-index: 101;
  }
  .nav__burger span {
    width: 26px; height: 2px; border-radius: 2px;
    background: var(--gold-hi);
    box-shadow: 0 1px 4px rgba(23, 10, 17, 0.55);
    transition: transform 0.35s var(--ease), opacity 0.25s;
  }
  /* la linea centrale svanisce, le altre due si incrociano al centro:
     7px è gap(5) + altezza linea(2), cioè il passo esatto fra una riga e
     l'altra — con un valore approssimato la croce risulterebbe sfalsata */
  .nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav__burger.open span { background: var(--gold-hi); }
}
@media (max-width: 900px) {
  /* in verticale il frame è croppato ai lati e la figura riempie lo schermo:
     lo scrim centrale si allarga per tenere la copy leggibile, ma resta
     aperto in basso dove vive il cuore dorato */
  .hero { height: 300vh; }
  .hero__intro, .hero__reveal { --hero-copy: min(88vw, 560px); }
  .hero__vignette {
    background:
      radial-gradient(ellipse 78% 30% at 50% 47%, rgba(23,10,17,0.52), rgba(23,10,17,0.24) 58%, transparent 82%),
      radial-gradient(ellipse at center, transparent 42%, rgba(23,10,17,0.18) 76%, rgba(23,10,17,0.4) 100%);
  }
  .hero__scrollcue { display: none; }

  .story__grid, .about__grid, .contact__grid { grid-template-columns: 1fr; }
  .about__photo { width: 100%; max-width: 420px; margin: 0 auto; }
  .pillars__grid { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .testi__card { flex-basis: 290px; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; }
  .cta__band { border-radius: 28px; }
  .btn { width: 100%; }
  .nav__burger { width: 40px; }
}

/* =================================================================
   REDUCED MOTION
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
  }
  .hero__scrollcue-line { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* =================================================================
   LIBRERIA DI MOTION — tecniche 02→09
   Gli stili che reggono le animazioni innestate da js/motion.js.
   Gli elementi si marcano in HTML con data-reveal / data-roll /
   data-magnetic: qui c'è solo ciò che il motore dà per scontato.
   ================================================================= */

/* ---------- scroll fluido (Lenis) ---------- */
/* lo smooth nativo e Lenis si contendono lo stesso scroll: quando
   Lenis è attivo quello del browser va spento, o si annullano */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ---------- 02 · testo che rotola ---------- */
.roll {
  display: inline-flex; height: 1.2em; line-height: 1.2;
  overflow: clip; vertical-align: bottom;
}
.roll .ch {
  display: inline-block;
  /* l'ombra disegna la copia che sale: nessun testo duplicato nel DOM */
  text-shadow: 0 1.2em currentColor;
  transition: transform 0.55s var(--ease) calc(var(--i) * 14ms);
}
a:is(:hover, :focus-visible) .roll .ch { transform: translateY(-1.2em); }

/* ---------- 03 · magnetico e riempimento a cerchio ---------- */
.magnetic { display: inline-block; will-change: transform; }
.btn[data-fill] { position: relative; isolation: isolate; overflow: hidden; }
.btn[data-fill]::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* il cerchio nasce dal basso, dove sta il pollice su mobile e il
     cursore in arrivo su desktop */
  clip-path: circle(0% at 50% 100%);
  transition: clip-path 0.7s var(--ease);
}
.btn--gold[data-fill]::before { background: linear-gradient(135deg, var(--plum-800), var(--plum-990)); }
.btn--ghost[data-fill]::before { background: linear-gradient(135deg, var(--gold-lt), var(--gold)); }
.btn[data-fill]:is(:hover, :focus-visible)::before { clip-path: circle(140% at 50% 100%); }
.btn--gold[data-fill]:is(:hover, :focus-visible) { color: var(--cream-50); }
/* il fondo pieno dell'hover originale coprirebbe il cerchio */
.btn--ghost[data-fill]:is(:hover, :focus-visible) {
  background: transparent; color: var(--plum-990); border-color: var(--gold);
}

/* ---------- 04 · parole da sotto la maschera ---------- */
/* con overflow diverso da visible la linea di base di un inline-block
   diventa il suo margine inferiore: padding e margine negativo la
   riportano al suo posto, altrimenti le parole si disallineano e le
   discendenti (g, p, q) vengono tagliate */
.w-mask {
  display: inline-block; overflow: clip;
  padding-bottom: 0.16em; margin-bottom: -0.16em;
}
.w { display: inline-block; }

/* ---------- 05 · cursore "guarda" ---------- */
.view-cursor {
  position: fixed; top: 0; left: 0; z-index: 60; pointer-events: none;
  width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold-lt), var(--gold));
  color: var(--plum-990);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0; visibility: hidden;
}
[data-cursor] { cursor: none; }
@media (hover: none) { [data-cursor] { cursor: auto; } }

/* ---------- 07 · sipario fra le pagine ---------- */
.pt { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; }
.pt__layer { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); }
.pt__layer--rose { background: linear-gradient(135deg, var(--rose-500), var(--rose-300)); }
.pt__layer--plum {
  background: linear-gradient(140deg, #5c2438 0%, #3d1a2e 45%, #1d0c17 100%);
  display: grid; place-items: center;
}
.pt__lbl {
  overflow: clip; padding-bottom: 0.12em;
  font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em;
  font-size: clamp(2.4rem, 9vw, 6rem); color: var(--cream-50);
}
.pt__lbl span { display: block; }

/* ---------- 09 · il riquadro che si apre ---------- */
.reel { overflow: hidden; }
.reel-pin {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1.6rem, 4vh, 2.8rem);
  padding: clamp(3rem, 8vh, 6rem) clamp(1.2rem, 5vw, 4rem);
}
.reel-head { width: 100%; max-width: var(--maxw); margin: 0 auto; text-align: center; }
.reel-frame {
  --reel-r: 40px;
  position: relative; width: 100%; max-width: var(--maxw); margin: 0 auto;
  aspect-ratio: 16 / 9; border-radius: var(--reel-r); overflow: hidden;
  transform-origin: 50% 50%; background: var(--plum-990);
  box-shadow: 0 50px 120px -60px rgba(23, 10, 17, 0.8);
}
/* velo scuro: il video bordeaux da solo non regge il testo sopra */
.reel-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(23,10,17,0.5), rgba(23,10,17,0.22) 45%, rgba(23,10,17,0.62));
}
.reel-ui {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; text-align: center; padding: 1.5rem;
}
.reel-claim {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.15rem, 2.8vw, 2.1rem); line-height: 1.32; color: var(--cream-50);
  text-shadow: 0 2px 24px rgba(23, 10, 17, 0.85);
}
@media (max-width: 899px) {
  /* senza pin la sezione non deve occupare uno schermo intero a vuoto */
  .reel-pin { min-height: 0; }
}

/* ---------- 01 · rete di punti in WebGL ---------- */
/* sta sopra le macchie di colore ma sotto al contenuto: il testo della
   sezione vive nel .container, che è già a z-index 2 */
.dot-field {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.dot-field.on { opacity: 1; }

/* ---------- giuntura fra "chi sono" e "il metodo" ---------- */
/* I fondi delle due sezioni coincidono già, ma dentro .about vivono due
   strati decorativi — le macchie sfocate e la rete di punti — che
   overflow:hidden taglia di netto sul bordo inferiore. Il salto di tono
   che ne usciva si leggeva come una riga chiara fra le sezioni.
   Sfumandoli prima del bordo, .about ci arriva dello stesso identico
   colore con cui .pillars comincia, e la giuntura sparisce. */
.about .blob-field,
.about .dot-field {
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 94%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 94%);
}

/* -----------------------------------------------------------------
   MAPPA A CONSENSO
   Google non viene contattato finché il visitatore non lo chiede.
   ----------------------------------------------------------------- */
.footer__map__attesa, .map-frame__attesa {
  width: 100%; height: 100%; min-height: 300px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.7rem; padding: 2rem 1.5rem; text-align: center;
}
.footer__map__attesa {
  background: linear-gradient(150deg, rgba(250,241,226,0.05), rgba(250,241,226,0.02));
  color: rgba(250,241,226,0.9);
}
.map-frame__attesa {
  min-height: 380px;
  background: var(--cream-100, #faf1e2);
  color: var(--ink-900);
}
.footer__map__attesa svg, .map-frame__attesa svg { width: 30px; height: 30px; opacity: 0.7; }
.footer__map__attesa strong, .map-frame__attesa strong {
  font-family: var(--serif); font-weight: 500; font-size: 1.1rem; letter-spacing: -0.01em;
}
.footer__map__attesa p, .map-frame__attesa p {
  max-width: 42ch; margin: 0; font-size: 0.78rem; line-height: 1.55; opacity: 0.72;
}
.mappa__si {
  margin-top: 0.4rem; padding: 0.7rem 1.5rem; cursor: pointer;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; border: 1px solid currentColor;
  background: transparent; color: inherit;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.mappa__si:hover { background: var(--gold-lt, #d8b98a); color: var(--plum-990, #170a11); border-color: transparent; }
.footer__map__attesa a, .map-frame__attesa a {
  font-size: 0.74rem; letter-spacing: 0.04em; color: inherit; opacity: 0.6;
}
.footer__map iframe, .map-frame iframe { width: 100%; border: 0; display: block; }
.footer__map iframe { height: 100%; }
.map-frame iframe { height: 380px; }
.form__note--errore { color: #a8324a; }

/* -----------------------------------------------------------------
   PAGINA LEGALE (privacy, cookie, note)
   Colonna stretta: qui si legge, non si guarda.
   ----------------------------------------------------------------- */
.page-hero--snello { padding-inline: 0; padding-bottom: clamp(1.4rem, 3vh, 2.4rem); }
.page-hero--snello .page-hero__in { max-width: 72ch; margin: 0 auto; padding: 0 clamp(1.2rem, 5vw, 2rem); }
.legale__data { margin-top: 1.4rem; font-size: 0.76rem; letter-spacing: 0.06em; color: var(--ink-500); }

.legale { background: var(--cream-50); padding-top: clamp(2rem, 5vh, 3.4rem); }
.legale__in { max-width: 72ch; margin: 0 auto; padding: 0 clamp(1.2rem, 5vw, 2rem); }

.legale__indice {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem;
  padding-bottom: 2.4rem; margin-bottom: 2.4rem; border-bottom: 1px solid var(--line);
}
.legale__indice a {
  padding: 0.4rem 0.9rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.74rem; letter-spacing: 0.05em; color: var(--ink-700);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.legale__indice a { text-decoration: none; }
.legale__indice a:hover { background: var(--plum-800); border-color: var(--plum-800); color: var(--cream-50); }

.legale h2 {
  font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem); color: var(--plum-950);
  margin: 3.2rem 0 1rem; scroll-margin-top: 6rem;
}
.legale h2:first-of-type { margin-top: 0; }
.legale h3 {
  font-family: var(--serif); font-weight: 500; font-size: 1.05rem;
  color: var(--plum-800); margin: 2rem 0 0.7rem;
}
.legale p, .legale li { font-size: 0.95rem; line-height: 1.78; color: var(--ink-700); }
.legale p { margin: 0 0 1rem; }
.legale ul { margin: 0 0 1.4rem; padding-left: 1.1rem; }
.legale li { margin-bottom: 0.5rem; }
.legale strong { color: var(--ink-900); font-weight: 600; }
.legale a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.legale a:hover { color: var(--plum-800); }
.legale code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.86em;
  background: var(--cream-200); padding: 0.1em 0.4em; border-radius: 5px;
}
.legale__nota {
  border-left: 3px solid var(--gold-lt); background: var(--cream-100);
  padding: 1.1rem 1.3rem; border-radius: 0 12px 12px 0; margin: 1.4rem 0 1.6rem;
}
/* Segnala a colpo d'occhio cosa manca ancora: deve dare fastidio. */
.da-compilare {
  background: #ffe9a8; color: #6b4e00; font-weight: 600;
  padding: 0.05em 0.45em; border-radius: 5px; letter-spacing: 0.03em;
}