/* ==========================================================================
   CORTE DA RE — Foglio di stile
   Token derivati dal file Figma "CORTE_DA_RE_sito_2026"
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Font in hosting locale
   I file sono serviti dal dominio del sito: nessuna richiesta a Google Fonts
   e quindi nessun trasferimento dell'indirizzo IP a terzi.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Forum";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/forum-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Forum";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/forum-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. Token
   -------------------------------------------------------------------------- */
:root {
  /* Colori (nomi Figma) */
  --nero: #555555;
  --beige-chiaro: #FFFCF6;
  --beige: #F5F0E8;
  --beige-scuro: #EFE9E0;
  --moro: #844E3E;          /* TESTA_MORO */
  --testi: #7A7060;
  --blu: #16324B;
  --linea: #7A7060;

  /* Tipografia */
  --font-display: "Forum", "Cormorant Garamond", Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Scala tipografica fluida (design 1920px) */
  --t1: clamp(52px, 5.73vw, 110px);   /* TITOLO_1 */
  --t2: clamp(40px, 3.65vw, 70px);    /* TITOLO_2 */
  --t3: clamp(32px, 2.6vw, 50px);     /* TITOLO_3 */
  --t4: clamp(26px, 2.08vw, 40px);    /* TITOLO_4 */
  --body-1: 16px;
  --body-2: 14px;
  --nota: 12px;

  /* Spaziature fluide */
  --pad-x: clamp(20px, 7.03vw, 135px);
  --container: 1650px;
  --sp-135: clamp(56px, 7.03vw, 135px);
  --sp-70: clamp(36px, 3.65vw, 70px);
  --sp-50: clamp(28px, 2.6vw, 50px);
  --sp-30: clamp(16px, 1.56vw, 30px);
  --sp-22: clamp(14px, 1.15vw, 22px);

  /* Header */
  --header-h: 135px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --dur: .9s;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-1);
  line-height: 1.3;
  color: var(--testi);
  background: var(--beige-chiaro);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

h1, h2, h3, h4, p { margin: 0; }

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .9;
  color: var(--nero);
  letter-spacing: 0;
}

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul { list-style: none; margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--moro);
  outline-offset: 4px;
}

::selection { background: var(--moro); color: var(--beige-chiaro); }

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

/* --------------------------------------------------------------------------
   3. Tipografia
   -------------------------------------------------------------------------- */
.t1 { font-size: var(--t1); }
.t2 { font-size: var(--t2); }
.t3 { font-size: var(--t3); }
.t4 { font-size: var(--t4); }

.nota {
  font-family: var(--font-body);
  font-size: var(--nota);
  line-height: 18px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--moro);
}

.body-1 { font-size: var(--body-1); line-height: 1.3; color: var(--testi); }
.body-2 { font-size: var(--body-2); line-height: 1.3; color: var(--testi); }

.body-1 p + p,
.body-2 p + p { margin-top: 1.3em; }

.text-center { text-align: center; }
.text-nero { color: var(--nero); }

sup {
  font-size: .645em;
  line-height: 0;
  vertical-align: baseline;
  position: relative;
  top: -.55em;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.section {
  padding: var(--sp-135) var(--pad-x);
}

.section--tight {
  padding-top: var(--sp-70);
}

/* Stack verticali con i gap del design */
.stack { display: flex; flex-direction: column; }
.stack--135 { gap: var(--sp-135); }
.stack--80 { gap: clamp(40px, 4.16vw, 80px); }
.stack--70 { gap: var(--sp-70); }
.stack--51 { gap: clamp(28px, 2.66vw, 51px); }
.stack--30 { gap: var(--sp-30); }

.intro {
  max-width: 810px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-30);
}

.max-670 { max-width: 670px; }
.max-600 { max-width: 602px; }

.bg-beige { background: var(--beige); }
.bg-beige-scuro { background: var(--beige-scuro); }
.bg-beige-chiaro { background: var(--beige-chiaro); }
.bg-nero { background: var(--nero); }

/* Linee */
.vline {
  width: 1px;
  align-self: stretch;
  background: var(--linea);
  flex: 0 0 1px;
}

.hline {
  height: 1px;
  width: 100%;
  background: var(--linea);
}

/* --------------------------------------------------------------------------
   5. Pulsanti e link
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 15px 30px;
  border: 1px solid var(--moro);
  border-radius: 15px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--moro);
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition: color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--moro);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--ease-out-expo);
  z-index: -1;
}

.btn:hover,
.btn:focus-visible { color: var(--beige-chiaro); }

.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }

.btn:active { transform: scale(.98); }

.btn .arrow {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  transition: transform .45s var(--ease);
}

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

.btn--solid {
  background: var(--moro);
  color: var(--beige);
  min-width: 250px;
}

.btn--solid::before { background: var(--beige-chiaro); }

.btn--solid:hover,
.btn--solid:focus-visible { color: var(--moro); }

.btn--nav {
  padding: 10px 16px;
  width: auto;
  min-width: 170px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: .9;
}

/* Link testuale */
.link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--testi);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .35s var(--ease);
}

.link .arrow {
  width: 14px;
  height: 14px;
  transition: transform .45s var(--ease);
}

.link:hover { color: var(--moro); }
.link:hover .arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--beige);
  transition: box-shadow .4s var(--ease);
}

.header.is-scrolled {
  box-shadow: 0 1px 0 rgba(85, 85, 85, .08), 0 10px 30px -20px rgba(85, 85, 85, .25);
}

.header__inner {
  height: var(--header-h);
  padding-inline: var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: height .45s var(--ease);
}

.header.is-scrolled .header__inner { height: 96px; }

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4.7vw, 90px);
  width: 100%;
  max-width: var(--container);
}

.nav__link,
.nav__toggle {
  position: relative;
  flex: 0 1 170px;
  min-width: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: .9;
  color: var(--nero);
  padding: 8px 0;
  white-space: nowrap;
  transition: color .3s var(--ease);
}

.nav__link::after,
.nav__toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--moro);
  transform: translateX(-50%);
  transition: width .4s var(--ease);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after,
.nav__toggle:hover::after,
.nav__toggle[aria-expanded="true"]::after { width: 28px; }

.nav__link:hover,
.nav__toggle:hover,
.nav__link[aria-current="page"] { color: var(--moro); }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.nav__toggle .chevron {
  width: 9px;
  height: 8px;
  transition: transform .4s var(--ease);
}

.nav__toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.nav__logo {
  flex: 0 0 auto;
  width: 90px;
  transition: width .45s var(--ease);
}

.nav__logo img { width: 100%; height: auto; }

.header.is-scrolled .nav__logo { width: 64px; }

.nav__cta { flex: 0 0 auto; }

/* Hamburger */
.burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-left: auto;
  flex: 0 0 44px;
}

.burger span {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 1.5px;
  background: var(--nero);
  transition: transform .45s var(--ease), opacity .3s var(--ease), top .45s var(--ease);
}

.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21.5px; }
.burger span:nth-child(3) { top: 28px; }

.burger[aria-expanded="true"] span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 21.5px; transform: rotate(-45deg); }

/* Mega menu "Le residenze" (variante Figma) */
.mega {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 90;
  background: var(--beige-scuro);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4.2vw, 80px);
  padding: var(--sp-70) var(--pad-x);
  text-align: center;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .7s var(--ease-out-expo), visibility 0s linear .7s;
}

.header.is-scrolled ~ .mega,
.header.is-scrolled + .mega { inset-block-start: 96px; }

.mega.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path .7s var(--ease-out-expo), visibility 0s;
}

.mega__link {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t1);
  line-height: .9;
  color: var(--nero);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), color .3s var(--ease);
}

.mega__link:hover { color: var(--moro); }

.mega.is-open .mega__link { opacity: 1; transform: none; }
.mega.is-open .mega__link:nth-child(1) { transition-delay: .15s; }
.mega.is-open .mega__link:nth-child(2) { transition-delay: .25s; }
.mega.is-open .mega__link:nth-child(3) { transition-delay: .35s; }

.mega__close {
  margin-top: var(--sp-30);
  opacity: 0;
  transition: opacity .5s var(--ease) .45s, color .3s;
}

.mega.is-open .mega__close { opacity: 1; }
.mega__close:hover { color: var(--nero); }

/* Menu mobile */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 90;
  background: var(--beige-scuro);
  padding: var(--sp-50) var(--pad-x) var(--sp-70);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .6s var(--ease-out-expo), visibility 0s linear .6s;
}

.mobile-nav.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path .6s var(--ease-out-expo), visibility 0s;
}

.mobile-nav__list { display: flex; flex-direction: column; gap: 6px; }

.mobile-nav__link,
.mobile-nav__accordion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 8vw, 44px);
  line-height: 1;
  color: var(--nero);
  border-bottom: 1px solid rgba(122, 112, 96, .25);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}

.mobile-nav.is-open .mobile-nav__link,
.mobile-nav.is-open .mobile-nav__accordion { opacity: 1; transform: none; }

.mobile-nav.is-open li:nth-child(1) > * { transition-delay: .1s; }
.mobile-nav.is-open li:nth-child(2) > * { transition-delay: .16s; }
.mobile-nav.is-open li:nth-child(3) > * { transition-delay: .22s; }
.mobile-nav.is-open li:nth-child(4) > * { transition-delay: .28s; }
.mobile-nav.is-open li:nth-child(5) > * { transition-delay: .34s; }

.mobile-nav__link[aria-current="page"] { color: var(--moro); }

.mobile-nav__accordion .chevron {
  width: 16px;
  height: 14px;
  transition: transform .4s var(--ease);
}

.mobile-nav__accordion[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.mobile-nav__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease-out-expo);
}

.mobile-nav__sub.is-open { grid-template-rows: 1fr; }

.mobile-nav__sub > div { overflow: hidden; }

.mobile-nav__sub a {
  display: block;
  padding: 12px 0 12px 20px;
  font-family: var(--font-display);
  font-size: clamp(22px, 5.5vw, 28px);
  color: var(--testi);
  transition: color .3s;
}

.mobile-nav__sub a:hover { color: var(--moro); }

.mobile-nav__cta {
  margin-top: auto;
  padding-top: var(--sp-50);
  display: flex;
  flex-direction: column;
  gap: 24px;
  opacity: 0;
  transition: opacity .5s var(--ease) .4s;
}

.mobile-nav.is-open .mobile-nav__cta { opacity: 1; }

.mobile-nav__contact { font-size: 14px; color: var(--testi); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: calc(100svh - var(--header-h));
  min-height: 520px;
  max-height: 945px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-135) var(--pad-x);
  color: var(--beige-chiaro);
  background: var(--nero);
}

.hero--bottom {
  align-items: flex-end;
  padding-bottom: clamp(48px, 7vw, 130px);
}

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  animation: hero-zoom 9s var(--ease-out-expo) forwards;
}

@keyframes hero-zoom {
  to { transform: scale(1); }
}

/* Ellisse sfocata in multiply, come nel design */
.hero__title {
  position: relative;
  z-index: 1;
  max-width: 1003px;
  text-align: center;
  font-size: var(--t1);
  color: var(--beige-chiaro);
  isolation: isolate;
}

.hero__title::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 160%;
  height: 300%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(85, 85, 85, .75) 0%, rgba(85, 85, 85, .45) 38%, rgba(85, 85, 85, 0) 70%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Reveal riga per riga */
/* La maschera si estende sotto la linea di base per non tagliare le
   discendenti (g, p, q) con line-height .9; il padding è compensato
   dal margine negativo, così la spaziatura resta quella del design. */
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-bottom: .26em;
  margin-bottom: -.26em;
}

.hero__title .line > span {
  display: block;
  transform: translateY(140%);
  opacity: 0;
  transition: transform 1.1s var(--ease-out-expo), opacity .8s var(--ease);
}

.is-loaded .hero__title .line:nth-child(1) > span { transition-delay: .35s; }
.is-loaded .hero__title .line:nth-child(2) > span { transition-delay: .5s; }

.is-loaded .hero__title .line > span {
  transform: none;
  opacity: 1;
}

.hero__scroll {
  position: absolute;
  z-index: 1;
  right: var(--pad-x);
  bottom: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--beige-chiaro);
  opacity: 0;
  transition: opacity .8s var(--ease) 1.2s;
}

.is-loaded .hero__scroll { opacity: .85; }

.hero__scroll::after {
  content: "";
  width: 1px;
  height: 40px;
  background: currentColor;
  transform-origin: top;
  animation: scroll-hint 2.2s var(--ease) infinite;
}

@keyframes scroll-hint {
  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; }
}

/* --------------------------------------------------------------------------
   8. Sezioni ricorrenti
   -------------------------------------------------------------------------- */

/* Riga di dati (numeri + etichette) */
.stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-30);
}

.stats .vline { height: clamp(90px, 9.6vw, 184px); align-self: center; }

.stat {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-22);
  min-width: 0;
}

.stat--center { align-items: center; text-align: center; }

.stat__value {
  font-family: var(--font-display);
  font-size: var(--t2);
  line-height: .9;
  color: var(--nero);
}

.stat__value--sm { font-size: var(--t4); }

.stat__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stat__icon { width: 20px; height: 20px; }

/* Testo + due immagini */
.split {
  display: flex;
  align-items: center;
  gap: clamp(32px, 8.85vw, 170px);
}

.split__text {
  flex: 0 0 auto;
  width: clamp(280px, 23.6%, 390px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-70);
  align-items: flex-start;
}

.split__media {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-30);
}

.split__media figure,
.media-frame {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--beige-scuro);
}

.split__media figure { aspect-ratio: 530 / 706; }

.split__media img,
.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out-expo);
}

.split__media figure:hover img,
.media-frame:hover img { transform: scale(1.04); }

.split--single .split__media {
  display: block;
}

.split--single .media-frame { aspect-ratio: 810 / 607; }

/* Card residenze (Home) */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-30);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--beige-chiaro);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -40px rgba(85, 85, 85, .45);
}

.card__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--beige-scuro);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out-expo);
}

.card:hover .card__media img { transform: scale(1.05); }

.card__body {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.2vw, 43px);
  padding: var(--sp-50);
  min-height: 322px;
}

.card__head { display: flex; flex-direction: column; gap: 10px; }

.card__title { font-size: var(--t4); color: var(--testi); }

.card__body .link { margin-top: auto; }

/* Fascia immagine a tutta larghezza con parallasse */
.band {
  position: relative;
  height: clamp(320px, 56.25vw, 1080px);
  overflow: hidden;
  background: var(--nero);
}

.band img {
  position: absolute;
  left: 0;
  top: -10%;
  width: 100%;
  height: 120%;
  object-fit: cover;
  will-change: transform;
}

/* Blocco "modalità di accesso" */
.access {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-70);
}

.access__text {
  max-width: 670px;
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.head { display: flex; flex-direction: column; gap: 10px; }

/* CTA centrata */
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-70);
}

.cta .head { align-items: center; max-width: 670px; }

.cta__text { max-width: 502px; margin-top: 25px; }

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-30);
}

/* Punti di forza (numeri grandi) */
.points {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-30);
}

.point {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  gap: var(--sp-30);
  padding: 15px 0;
  align-items: flex-start;
}

.point__num {
  font-family: var(--font-display);
  font-size: var(--t2);
  line-height: .9;
  color: var(--moro);
  opacity: .4;
  flex: 0 0 auto;
}

.point__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.point__title { font-size: var(--t4); }

/* Elementi del progetto (griglia 3x2) */
.elements {
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.elements__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-30);
}

.element {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-22);
}

.element__title { font-size: var(--t4); }

/* Percorso (formula di acquisto) */
.steps { display: flex; flex-direction: column; gap: var(--sp-30); }

.steps__row {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  gap: var(--sp-30);
  align-items: flex-start;
}

.step__num {
  flex: 0 0 clamp(60px, 5.7vw, 110px);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--t2);
  line-height: .9;
  color: var(--moro);
  opacity: .4;
}

.step__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-30);
  min-width: 0;
}

.step__title { font-size: var(--t4); max-width: 530px; }
.step__text { max-width: 558px; }

/* Card sovrapposta alla fascia immagine */
.overlap-wrap {
  position: relative;
  padding: 0 clamp(20px, 5.5vw, 106px);
  margin-top: clamp(-60px, -10vw, -194px);
  z-index: 2;
}

.overlap-card {
  background: var(--beige-chiaro);
  padding: var(--sp-70) var(--pad-x) var(--sp-135);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-70);
  box-shadow: 0 40px 80px -60px rgba(85, 85, 85, .35);
}

.features {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 15px;
  width: 100%;
}

.feature {
  flex: 1 1 0;
  min-width: 0;
  min-height: 330px;
  padding: var(--sp-50);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--sp-30);
  text-align: center;
}

.feature__title { font-size: var(--t4); max-width: 260px; }

.features .vline { align-self: center; height: 266px; }

/* --------------------------------------------------------------------------
   9. Gallery (pagine residenza)
   -------------------------------------------------------------------------- */
.gallery { display: flex; flex-direction: column; gap: clamp(28px, 2.66vw, 51px); }

.gallery__main {
  position: relative;
  aspect-ratio: 1650 / 928;
  overflow: hidden;
  background: var(--beige);
}

.gallery__main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .9s var(--ease), transform 1.4s var(--ease-out-expo);
}

.gallery__main img.is-active { opacity: 1; transform: none; }

.gallery__thumbs {
  display: flex;
  justify-content: center;
  gap: var(--sp-30);
}

.gallery__thumb {
  position: relative;
  width: clamp(120px, 13vw, 250px);
  aspect-ratio: 250 / 140;
  overflow: hidden;
  background: #d9d9d9;
  flex: 0 1 auto;
}

.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out-expo), opacity .4s;
  opacity: .75;
}

.gallery__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--moro);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}

.gallery__thumb:hover img,
.gallery__thumb.is-active img { opacity: 1; transform: scale(1.05); }

.gallery__thumb.is-active::after { opacity: 1; }

/* --------------------------------------------------------------------------
   10. Contatti
   -------------------------------------------------------------------------- */
.contact-intro {
  display: flex;
  align-items: flex-start;
  gap: clamp(32px, 4.9vw, 94px);
}

.contact-intro__text {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-70);
  color: var(--nero);
}

.contact-intro__text .t1 { max-width: 735px; }
.contact-intro__text p { max-width: 533px; }

.contact-intro .vline { height: auto; }

.contact-list {
  flex: 0 1 731px;
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.contact-row {
  display: flex;
  gap: var(--sp-30);
  align-items: flex-start;
}

.contact-row__icon { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; }

.contact-row__value {
  font-size: var(--t4);
  color: var(--nero);
  transition: color .3s;
}

a.contact-row__value:hover { color: var(--moro); }

/* Card form */
.form-card {
  background: var(--beige-chiaro);
  max-width: 1358px;
  margin: 0 auto;
  padding: var(--sp-70);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-70);
}

.form-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-30);
  width: 100%;
  color: var(--nero);
}

.form-card__head .t3 { flex: 0 1 529px; }
.form-card__head p { flex: 0 1 418px; }

.form {
  width: 100%;
  max-width: 1090px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-30);
}

.form--narrow { max-width: 1090px; }

.field { display: flex; flex-direction: column; gap: 0; }

.field label { display: block; }

.field__control {
  position: relative;
  width: 100%;
}

.field input,
.field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--linea);
  background: transparent;
  padding: 12px 0 10px;
  font: inherit;
  font-size: 15px;
  color: var(--nero);
  border-radius: 0;
  resize: none;
  outline: none;
}

.field textarea { min-height: 44px; }

.field__control::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--moro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out-expo);
}

.field__control:focus-within::after { transform: scaleX(1); }

.field input::placeholder,
.field textarea::placeholder { color: rgba(122, 112, 96, .55); }

/* Checkbox */
.choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.choices legend { padding: 0; margin-bottom: 10px; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.3;
  color: var(--blu);
}

/* Input nascosto alla vista ma presente per tastiera e screen reader:
   dimensione 1px anziché 0, altrimenti alcuni browser lo escludono
   dall'albero di accessibilità. */
.check input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.check__box {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--linea);
  border-radius: 4px;
  display: grid;
  place-items: center;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}

.check__box svg {
  width: 12px;
  height: 12px;
  stroke: var(--beige-chiaro);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset .35s var(--ease) .05s;
}

.check input:checked + .check__box {
  background: var(--moro);
  border-color: var(--moro);
}

.check input:checked + .check__box svg { stroke-dashoffset: 0; }

.check input:focus-visible + .check__box {
  outline: 2px solid var(--moro);
  outline-offset: 2px;
}

.check--end { align-self: flex-end; }

.form__actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding-top: var(--sp-30);
}

.form__message {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 14px;
  color: var(--moro);
  min-height: 1.3em;
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--nero);
  color: var(--beige);
  padding: var(--sp-70) var(--pad-x);
}

.footer__inner {
  display: flex;
  align-items: center;
  gap: clamp(48px, 16vw, 310px);
}

.footer__logo {
  flex: 0 0 auto;
  width: clamp(160px, 13vw, 250px);
}

.footer__logo img { width: 100%; height: auto; }

.footer__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-50);
  min-height: 232px;
}

.footer__cols {
  display: flex;
  gap: var(--sp-30);
  flex-wrap: wrap;
  min-width: 0;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer__col--nav { flex: 0 1 250px; min-width: 170px; }
.footer__col--res { flex: 0 1 250px; min-width: 180px; margin-right: clamp(0px, 7vw, 140px); }
.footer__col--contact { flex: 0 1 280px; min-width: 200px; }

.footer__col a {
  transition: color .3s, opacity .3s;
}

.footer__col a:hover { color: var(--beige-chiaro); opacity: .75; }

.footer .nota { color: var(--beige); }

.footer__address {
  font-size: 14px;
  line-height: 1.3;
  color: var(--beige);
  font-style: normal;
}

.footer__bottom {
  display: flex;
  align-items: center;
  gap: clamp(32px, 14vw, 280px);
  font-size: 14px;
}

.footer__legal { display: flex; gap: var(--sp-30); flex-wrap: wrap; }

.footer__legal a { transition: opacity .3s; }
.footer__legal a:hover { opacity: .7; }

/* --------------------------------------------------------------------------
   11b. Pagine legali (privacy, cookie, preferenze)
   -------------------------------------------------------------------------- */
.legal {
  max-width: 900px;
  margin-inline: auto;
}

.legal__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-30);
  margin-bottom: var(--sp-70);
}

.legal__updated { font-size: 14px; color: var(--testi); }

.legal__body { display: flex; flex-direction: column; gap: var(--sp-50); }

.legal__body section { display: flex; flex-direction: column; gap: 14px; }

.legal__body h2 {
  font-size: var(--t4);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(122, 112, 96, .3);
}

.legal__body h3 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--moro);
  margin-top: 10px;
}

.legal__body p,
.legal__body li { font-size: 16px; line-height: 1.55; color: var(--testi); }

.legal__body ul { display: flex; flex-direction: column; gap: 10px; }

.legal__body ul li { position: relative; padding-left: 22px; }

.legal__body ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 6px;
  height: 1px;
  background: var(--moro);
}

.legal__body a { color: var(--moro); text-decoration: underline; text-underline-offset: 3px; }
.legal__body a:hover { text-decoration-thickness: 2px; }

.legal__body strong { color: var(--nero); font-weight: 500; }

/* Segnaposto da completare con i dati societari definitivi */
.todo {
  background: rgba(132, 78, 62, .1);
  color: var(--moro);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: .92em;
}

/* Tabella cookie */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.legal table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
}

.legal th,
.legal td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid rgba(122, 112, 96, .3);
  vertical-align: top;
  color: var(--testi);
}

.legal th {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--moro);
}

/* --------------------------------------------------------------------------
   11bis. Finestra modale (informative aperte dai moduli)
   -------------------------------------------------------------------------- */
.link-testo {
  color: var(--moro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.modale {
  width: min(920px, calc(100vw - 2 * var(--sp-30)));
  max-height: 86vh;
  padding: 0;
  border: 0;
  border-radius: 15px;
  background: var(--beige-chiaro);
  color: var(--testi);
  overflow: hidden;
  box-shadow: 0 40px 90px -50px rgba(85, 85, 85, .8);
}

.modale::backdrop {
  background: rgba(85, 85, 85, .55);
}

.modale[open] {
  animation: modale-entra .5s var(--ease-out-expo);
}

@keyframes modale-entra {
  from { opacity: 0; transform: translateY(20px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.modale__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-30);
  padding: clamp(18px, 2vw, 26px) clamp(20px, 3vw, 50px);
  border-bottom: 1px solid rgba(122, 112, 96, .3);
  background: var(--beige);
}

.modale__titolo {
  font-size: clamp(20px, 2vw, 26px);
  color: var(--nero);
}

.modale__chiudi {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--moro);
  transition: opacity .3s var(--ease);
}

.modale__chiudi:hover { opacity: .65; }

.modale__chiudi svg { width: 14px; height: 14px; }

.modale__corpo {
  padding: clamp(24px, 3vw, 50px);
  overflow-y: auto;
  max-height: calc(86vh - 86px);
  -webkit-overflow-scrolling: touch;
}

/* L'informativa dentro la modale usa una scala ridotta */
.modale__corpo .legal { max-width: none; }
.modale__corpo .legal__head { margin-bottom: var(--sp-30); gap: 12px; }

/* Il titolo è già nell'intestazione della modale */
.modale__corpo .legal__head .t2,
.modale__corpo .legal__head .nota { display: none; }
.modale__corpo .legal__body { gap: var(--sp-30); }
.modale__corpo .legal__body h2 { font-size: clamp(19px, 1.6vw, 23px); }
.modale__corpo .legal__body p,
.modale__corpo .legal__body li { font-size: 15px; }

/* --------------------------------------------------------------------------
   11ter. Conferma di invio a tutto schermo
   -------------------------------------------------------------------------- */
.successo {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--beige);
  color: var(--testi);
  overflow: hidden;
}

.successo::backdrop { background: var(--beige); }

.successo__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-30);
  padding: var(--sp-70) var(--pad-x);
  text-align: center;
}

/* Alone luminoso dietro al segno */
.successo__inner::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 38%;
  left: 50%;
  width: min(900px, 90vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.6);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(132, 78, 62, .16) 0%, rgba(132, 78, 62, 0) 62%);
  opacity: 0;
}

.successo[open] .successo__inner::before {
  animation: alone 1.6s var(--ease-out-expo) .1s forwards;
}

@keyframes alone {
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.successo__segno {
  position: relative;
  z-index: 1;
  width: clamp(96px, 12vw, 148px);
  height: clamp(96px, 12vw, 148px);
  fill: none;
  stroke: var(--moro);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.successo__segno circle {
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  opacity: .45;
}

.successo__segno path {
  stroke-dasharray: 72;
  stroke-dashoffset: 72;
  stroke-width: 4;
}

.successo[open] .successo__segno circle {
  animation: traccia 1.1s var(--ease-out-expo) .15s forwards;
}

.successo[open] .successo__segno path {
  animation: traccia .7s var(--ease-out-expo) .75s forwards;
}

@keyframes traccia {
  to { stroke-dashoffset: 0; }
}

.successo__testo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
  max-width: 620px;
}

.successo__titolo { font-size: var(--t1); }

.successo__messaggio { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; }

.successo__nota { font-size: 14px; }

/* Ogni elemento entra dal basso, uno dopo l'altro */
.successo__inner > *,
.successo__testo > * {
  opacity: 0;
  transform: translateY(22px);
}

.successo[open] .successo__segno,
.successo[open] .successo__testo > *,
.successo[open] .successo__azioni {
  animation: sali .9s var(--ease-out-expo) forwards;
}

.successo[open] .successo__segno { animation-delay: .05s; }
.successo[open] .successo__testo > *:nth-child(1) { animation-delay: .95s; }
.successo[open] .successo__testo > *:nth-child(2) { animation-delay: 1.08s; }
.successo[open] .successo__testo > *:nth-child(3) { animation-delay: 1.2s; }
.successo[open] .successo__azioni { animation-delay: 1.34s; }

@keyframes sali {
  to { opacity: 1; transform: none; }
}

.successo__testo { opacity: 1; transform: none; }

.successo__azioni {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-30);
  margin-top: clamp(10px, 1.5vw, 20px);
}

@media (prefers-reduced-motion: reduce) {
  .successo__inner > *,
  .successo__testo > * { opacity: 1; transform: none; }
  .successo__segno circle,
  .successo__segno path { stroke-dashoffset: 0; }
  .successo__inner::before { opacity: 1; transform: translate(-50%, -50%); }
}

/* --------------------------------------------------------------------------
   11c. Consenso cookie: banner e preferenze
   -------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  z-index: 200;
  left: var(--sp-30);
  right: var(--sp-30);
  bottom: var(--sp-30);
  max-width: 760px;
  margin-inline: auto;
  background: var(--beige-chiaro);
  border: 1px solid rgba(132, 78, 62, .25);
  border-radius: 15px;
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-30);
  box-shadow: 0 30px 70px -40px rgba(85, 85, 85, .6);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .7s var(--ease-out-expo);
}

.cookie-banner.is-open { opacity: 1; transform: none; }

.cookie-banner__title { font-size: clamp(24px, 2vw, 32px); }

.cookie-banner__text { font-size: 14px; line-height: 1.5; }

.cookie-banner__text a { color: var(--moro); text-decoration: underline; text-underline-offset: 3px; }

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.cookie-banner__actions .btn { flex: 0 1 auto; }

.btn--ghost {
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding-inline: 8px;
}

.btn--ghost::before { display: none; }
.btn--ghost:hover { color: var(--nero); }

/* Pannello preferenze */
.prefs { display: flex; flex-direction: column; gap: var(--sp-30); }

.pref {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-30);
  padding: var(--sp-30) 0;
  border-bottom: 1px solid rgba(122, 112, 96, .3);
}

.pref__text { display: flex; flex-direction: column; gap: 8px; }

.pref__title { font-size: clamp(22px, 1.8vw, 28px); }

.pref__desc { font-size: 14px; line-height: 1.5; color: var(--testi); max-width: 620px; }

/* Interruttore */
.switch {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--moro);
  margin-top: 6px;
}

.switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.switch__track {
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: rgba(122, 112, 96, .3);
  border: 1px solid rgba(122, 112, 96, .4);
  position: relative;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}

.switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--beige-chiaro);
  transition: transform .45s var(--ease-out-expo);
}

.switch input:checked + .switch__track {
  background: var(--moro);
  border-color: var(--moro);
}

.switch input:checked + .switch__track::after { transform: translateX(24px); }

.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--moro);
  outline-offset: 3px;
}

.switch input:disabled + .switch__track { opacity: .55; cursor: not-allowed; }

.prefs__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-30);
  align-items: center;
  padding-top: var(--sp-30);
}

.prefs__status {
  margin-top: clamp(24px, 2.4vw, 40px);
  font-size: 14px;
  line-height: 1.5;
  color: var(--moro);
  min-height: 1.4em;
}

.prefs__status a {
  color: var(--moro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 640px) {
  .pref { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; }
  .cookie-banner__actions .btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   12. Animazioni di reveal allo scroll
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--delay, 0s);
  will-change: opacity, transform;
}

[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal="scale"] { transform: scale(.96); }

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

/* Stagger dei figli */
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

[data-reveal-group].is-visible > * { opacity: 1; transform: none; }

[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: .05s; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: .15s; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: .25s; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: .35s; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: .45s; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: .55s; }
[data-reveal-group].is-visible > *:nth-child(7) { transition-delay: .65s; }
[data-reveal-group].is-visible > *:nth-child(8) { transition-delay: .75s; }
[data-reveal-group].is-visible > *:nth-child(9) { transition-delay: .85s; }

/* Linee che si disegnano */
[data-reveal-group].is-visible > .vline { transform: scaleY(1); }
[data-reveal-group] > .vline { transform: scaleY(0); transform-origin: top; opacity: 1; }
[data-reveal-group] > .vline { transition: transform 1s var(--ease-out-expo); }

.hline[data-reveal] {
  transform: scaleX(0);
  transform-origin: left;
  opacity: 1;
  transition: transform 1.2s var(--ease-out-expo);
}

.hline[data-reveal].is-visible { transform: scaleX(1); }

/* Immagini con "tendina": un overlay che scorre via (il clip-path
   sull'elemento stesso impedirebbe all'IntersectionObserver di rilevarlo) */
:root { --curtain: var(--beige); }
.bg-beige-scuro { --curtain: var(--beige-scuro); }
.bg-beige-chiaro { --curtain: var(--beige-chiaro); }

[data-reveal="curtain"] {
  opacity: 1;
  transform: none;
  position: relative;
}

[data-reveal="curtain"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--curtain);
  transform-origin: bottom center;
  transition: transform 1.2s var(--ease-out-expo);
  pointer-events: none;
}

[data-reveal="curtain"].is-visible::after { transform: scaleY(0); }

figure[data-reveal="curtain"] > img {
  transform: scale(1.08);
  transition: transform 1.6s var(--ease-out-expo);
}

figure[data-reveal="curtain"].is-visible > img { transform: none; }

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1440px) {
  .nav { gap: clamp(16px, 3.2vw, 60px); }
  .nav__link, .nav__toggle { flex: 0 1 auto; }
}

/* Larghezze intermedie: lo stacco fra marchio e colonne del footer si riduce,
   altrimenti le colonne andrebbero a capo lasciando un vuoto sulla destra. */
@media (min-width: 1181px) and (max-width: 1520px) {
  .footer__inner { gap: clamp(40px, 5vw, 96px); }
  /* Senza nowrap il browser manderebbe a capo le colonne invece di restringerle */
  .footer__cols { flex-wrap: nowrap; }
  .footer__col--nav { flex: 0 1 220px; }
  .footer__col--res { flex: 0 1 220px; margin-right: clamp(0px, 3vw, 60px); }
  .footer__col--contact { flex: 0 1 260px; }
}

@media (max-width: 1180px) {
  :root { --header-h: 96px; }

  .header.is-scrolled .header__inner { height: 80px; }
  .header.is-scrolled ~ .mega,
  .header.is-scrolled + .mega { inset-block-start: 80px; }
  .header.is-scrolled .nav__logo { width: 56px; }

  .nav { justify-content: space-between; }
  .nav__link, .nav__toggle, .nav__cta { display: none; }
  .nav__logo { width: 64px; order: 0; }
  .burger { display: block; }

  .footer__inner { flex-direction: column; align-items: flex-start; gap: var(--sp-50); }
  .footer__content { min-height: 0; }
  .footer__col--res { margin-right: 0; }
}

@media (max-width: 1024px) {
  .split { flex-direction: column; align-items: stretch; gap: var(--sp-50); }
  .split__text { width: 100%; max-width: 640px; }

  .cards { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
  .cards .card { flex-direction: row; }
  .cards .card__media { flex: 0 0 42%; aspect-ratio: auto; }
  .cards .card__body { min-height: 0; flex: 1; }

  .points, .elements__row { flex-direction: column; gap: 0; }
  .points .vline, .elements__row .vline { display: none; }
  .point, .element {
    padding: var(--sp-30) 0;
    border-bottom: 1px solid rgba(122, 112, 96, .25);
  }
  .point:last-child, .element:last-child { border-bottom: 0; }
  .elements { gap: 0; }
  .elements .hline { display: none; }
  .element:last-child { border-bottom: 1px solid rgba(122, 112, 96, .25); }
  .elements__row:last-child .element:last-child { border-bottom: 0; }

  .steps__row { flex-direction: column; gap: 0; }
  .steps__row .vline { display: none; }
  .step { padding: var(--sp-30) 0; }
  .step + .step { border-top: 1px solid rgba(122, 112, 96, .25); }

  .features { flex-wrap: wrap; }
  .feature { flex: 1 1 calc(50% - 15px); min-height: 0; }
  .features .vline { display: none; }

  .access { flex-direction: column; align-items: flex-start; }

  .contact-intro { flex-direction: column; }
  .contact-intro .vline { width: 100%; height: 1px; }
  .contact-list { flex: 1 1 auto; width: 100%; }

  .form-card__head { flex-direction: column; align-items: flex-start; }
  .form-card__head .t3, .form-card__head p { flex: 0 0 auto; }

  .footer__cols { flex-wrap: wrap; gap: var(--sp-50); }
  .footer__col--nav, .footer__col--res, .footer__col--contact { flex: 1 1 200px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 768px) {
  :root {
    --t1: clamp(44px, 11vw, 64px);
    --t2: clamp(34px, 8vw, 48px);
    --t3: clamp(28px, 6.5vw, 40px);
    --t4: clamp(24px, 5.5vw, 30px);
  }

  .hero { min-height: 460px; }
  .hero__title { max-width: 100%; }
  .hero__scroll { display: none; }
  .hero--bottom { padding-bottom: clamp(56px, 12vw, 90px); }

  .stats { flex-wrap: wrap; justify-content: flex-start; gap: var(--sp-30) 0; }
  .stats .vline { display: none; }
  .stat { flex: 1 1 50%; padding-right: 16px; }
  .stat--center { align-items: flex-start; text-align: left; }

  .cards .card { flex-direction: column; }
  .cards .card__media { aspect-ratio: 4 / 3; flex: none; }

  .split__media { grid-template-columns: 1fr; }
  .split__media figure { aspect-ratio: 4 / 3; }

  .feature { flex: 1 1 100%; padding: var(--sp-30) 0; }
  .feature + .feature { border-top: 1px solid rgba(122, 112, 96, .25); }
  .feature__title { max-width: none; }

  .overlap-wrap { padding: 0 var(--pad-x); }
  .overlap-card { padding: var(--sp-50) var(--sp-30) var(--sp-70); }

  .form { grid-template-columns: 1fr; }
  .check--end { align-self: flex-start; }

  .gallery__thumbs { flex-wrap: wrap; }
  .gallery__thumb { width: calc(50% - var(--sp-30) / 2); }

  .step { flex-direction: column; gap: 12px; }
  .step__num { text-align: left; }

  .point { flex-direction: row; }
}

@media (max-width: 480px) {
  .btn { width: 100%; }
  .btn--solid { min-width: 0; }
  .cta__actions .btn { width: auto; }
  .point { flex-direction: column; gap: 10px; }
}

/* --------------------------------------------------------------------------
   14. Accessibilità: riduzione movimento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }

  [data-reveal], [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  [data-reveal="curtain"]::after { display: none; }

  .hero__title .line > span { transform: none; opacity: 1; }
  .hero__media img { transform: none; animation: none; }
  .band img { transform: none !important; }
}