@charset "utf-8";
/* =====================================================================
   AICON REAL ESTATE — componenti di pagina
   Hero video-scrub, card immobili, griglia annunci, form contatti.
   Tema scuro: fasce nere, verdi (Ottanio) e oro.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. HERO — pin e video (solo Home)
   --------------------------------------------------------------------- */
:root { --hero-scroll: 380vh; }

.hero {
  position: relative;
  height: calc(100vh + var(--hero-scroll));
  height: calc(100svh + var(--hero-scroll));
  background: var(--green-deep);
}
.hero__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--green-deep);
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--green-deep);
  transform: translateZ(0);
  backface-visibility: hidden;
  filter: saturate(.92) brightness(.98);
}
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(8, 10, 10, .72) 0%, rgba(8, 10, 10, .2) 34%, rgba(8, 10, 10, 0) 62%),
    linear-gradient(to bottom, rgba(8, 10, 10, .54) 0%, rgba(8, 10, 10, 0) 26%),
    radial-gradient(120% 80% at 50% 55%, rgba(8, 10, 10, 0) 42%, rgba(8, 30, 32, .46) 100%);
}

.hero__captions { position: absolute; inset: 0; pointer-events: none; }
.cap {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(92px, 17vh, 210px);
  color: var(--cream);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
  text-shadow: 0 1px 26px rgba(9, 12, 14, .45), 0 1px 3px rgba(9, 12, 14, .3);
}
.cap__in { max-width: 46ch; }
.cap--right  .cap__in { margin-left: auto;    text-align: right; }
.cap--center .cap__in { margin-inline: auto;  text-align: center; }
.cap__kicker {
  font-family: var(--display);
  font-size: clamp(10px, .8vw, 11.5px);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 14px;
}
.cap__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 5.2vw, 4.1rem);
  line-height: 1.08;
  letter-spacing: -.012em;
}
.cap__body {
  margin-top: 16px;
  max-width: 34ch;
  font-size: clamp(.9rem, 1.15vw, 1.06rem);
  line-height: 1.55;
  color: rgba(216, 221, 219, .86);
}
.cap--right .cap__body  { margin-left: auto; }
.cap--center .cap__body { margin-inline: auto; }

.hero__hud { position: absolute; inset: 0; pointer-events: none; color: var(--cream); }
.hud__rail {
  position: absolute;
  right: calc(var(--gutter) - 1px);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: min(38vh, 320px);
  background: rgba(255, 255, 255, .26);
}
.hud__fill {
  display: block; width: 100%; height: 100%;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: 50% 0;
  will-change: transform;
}
.hud__tick { position: absolute; right: 0; width: 9px; height: 1px; background: var(--gold); }
.hud__chapter {
  position: absolute;
  right: calc(var(--gutter) + 22px);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--display);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(216, 221, 219, .82);
  white-space: nowrap;
}
.hud__dash { opacity: .55; }

.hero__hint {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  font-family: var(--display);
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(216, 221, 219, .74);
  transition: opacity var(--t) var(--ease);
}
.hero__hint i {
  display: block; width: 42px; height: 1px;
  background: var(--gold-soft);
  transform-origin: 0 50%;
  animation: hint 2.6s var(--ease) infinite;
}
.hero__hint.is-gone { opacity: 0; }
@keyframes hint {
  0%, 100% { transform: scaleX(.25); opacity: .4; }
  50%      { transform: scaleX(1);   opacity: 1; }
}

.no-js .hero { height: auto; }
.no-js .hero__pin { position: relative; height: auto; }
.no-js .hero__hud, .no-js .hero__video, .no-js .hero__scrim { display: none; }
.noscript { padding: calc(var(--head-h) + 24px) var(--gutter) 64px; color: var(--cream); background: var(--green); }
.noscript img { width: 100%; height: auto; }
.noscript__list { margin-top: 32px; display: grid; gap: 16px; max-width: 62ch; }
.noscript__list li { border-top: 1px solid var(--rule); padding-top: 14px; }
.noscript__list b { font-family: var(--display); }
.noscript__note { margin-top: 28px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }

/* ---------------------------------------------------------------------
   2. LOADER
   --------------------------------------------------------------------- */
.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--green-deep);
  color: var(--cream);
  padding: var(--gutter);
  transition: opacity 600ms var(--ease);
}
.loader.is-done { opacity: 0; pointer-events: none; }
.loader[hidden] { display: none; }
.loader__inner { width: min(420px, 100%); }
.loader__mark { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 34px; }
.loader__mark .mark { height: 28px; }
.loader__mark .wordmark { font-size: 1.15rem; letter-spacing: .16em; }
.loader__rail { height: 1px; background: var(--rule); overflow: hidden; }
.loader__fill { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.loader__meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; font-family: var(--display); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-dim); }
.loader__num { font-family: var(--display); font-size: 1.5rem; letter-spacing: .02em; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.loader__pct { font-size: .62em; letter-spacing: .1em; margin-left: 2px; }

/* ---------------------------------------------------------------------
   3. SEZIONI GENERICHE — fasce nere, verdi, oro
   --------------------------------------------------------------------- */
.section { padding: clamp(80px, 12vh, 160px) 0; background: var(--black); }
.section--tight { padding: clamp(56px, 8vh, 104px) 0; }
.section--roomy { padding: clamp(120px, 18vh, 220px) 0; }
.section--black-2 { background: var(--black-2); border-top: 1px solid var(--rule); }
.section--green { background: var(--green); border-top: 1px solid var(--rule-gold); }
.section--gold { background: var(--gold); color: var(--black); }
.section--true-black { background: var(--true-black); }
.section--rule-top { border-top: 1px solid var(--rule); }
.section--rule-bottom { border-bottom: 1px solid var(--rule); }
.section--rule-gold-top { border-top: 1px solid var(--rule-gold); }

.section--gold .kicker { color: var(--gold-deep); }
.section--gold em { color: var(--black); text-decoration: underline; text-decoration-color: rgba(22,56,61,.3); }

.sec-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  row-gap: 16px;
  align-items: end;
  padding-bottom: clamp(40px, 6vh, 76px);
  border-bottom: 1px solid var(--rule);
}
.section--gold .sec-head { border-bottom-color: rgba(22, 56, 61, .22); }
.sec-head .kicker { grid-column: 1 / -1; }
.sec-head__title {
  grid-column: 1 / span 7;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.08;
}
.sec-head__note {
  grid-column: 10 / span 3;
  font-size: 13px;
  line-height: 1.55;
  color: var(--cream-dim);
  text-align: right;
}
.section--gold .sec-head__note { color: rgba(22, 56, 61, .68); }

/* --- Manifesto / due colonne ------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  row-gap: clamp(34px, 5vh, 62px);
}
.split .kicker { grid-column: 1 / -1; }
.split__lead {
  grid-column: 1 / span 8;
  max-width: 22ch;
  font-size: clamp(1.7rem, 4.4vw, 3.6rem);
  line-height: 1.12;
}
.split__aside {
  grid-column: 9 / span 4;
  max-width: 62ch;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
}
.split__aside p + p { margin-top: 18px; }
.split__sign { margin-top: 18px; font-family: var(--display); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); }

/* --- Duo-block: titolo con riga verticale + due foto in sovrapposizione -
   Stessi colori e font del resto del sito, solo l'impaginazione è nuova:
   testo a sinistra con un filetto verticale, due immagini sfalsate a
   destra (una più grande dietro, una più piccola davanti, spostata su). */
.duo-block {
  display: grid;
  grid-template-columns: minmax(260px, 38%) 1fr;
  column-gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.duo-block__text { padding-left: clamp(20px, 2.4vw, 28px); border-left: 2px solid var(--gold); }
.duo-block__title { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.1; }
.duo-block__body { margin-top: 24px; max-width: 40ch; color: var(--cream-dim); }
.duo-block__body p + p { margin-top: 16px; }
.duo-block__sign { margin-top: 20px; font-family: var(--display); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); }

.duo-block__media { position: relative; min-height: clamp(360px, 42vw, 540px); }
.duo-block__img {
  position: absolute;
  overflow: hidden;
}
.duo-block__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.duo-block__img--back {
  inset: 0 0 0 20%;
  aspect-ratio: 4 / 5;
  height: 100%;
}
.duo-block__img--front {
  left: 0;
  top: 14%;
  width: 44%;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--rule-gold);
  box-shadow: 0 34px 70px -24px rgba(10, 12, 12, .6);
}

/* --- Duo-block variante speculare: testo a destra, foto a sinistra ------ */
.duo-block--flip { grid-template-columns: 1fr minmax(260px, 38%); }
.duo-block--flip .duo-block__media { order: -1; }
.duo-block--flip .duo-block__img--back { inset: 0 20% 0 0; }
.duo-block--flip .duo-block__img--front { left: auto; right: 0; }

/* --- Trio-block: parole impilate + foto verticale + testo --------------- */
.trio-block {
  display: grid;
  grid-template-columns: minmax(220px, 26%) minmax(240px, 32%) 1fr;
  column-gap: clamp(30px, 4vw, 64px);
  align-items: center;
}
.trio-block__words { display: flex; flex-direction: column; gap: 2px; }
.trio-block__word {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.trio-block__word--accent { font-style: italic; color: var(--gold-soft); }
.trio-block__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--black-2);
  border: 1px solid var(--rule);
  transition: transform .5s var(--ease), border-color .4s var(--ease);
}
.trio-block__media img,
.trio-block__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.trio-block__media--video:hover { transform: scale(1.035); border-color: var(--green-2); }
.trio-block__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(215, 221, 219, .35), transparent 70%);
  mix-blend-mode: soft-light;
  transition: opacity .35s var(--ease);
}
.trio-block__media--video:hover .trio-block__glow { opacity: 1; }

/* ---------------------------------------------------------------------
   4B. EFFETTO "ACQUA" — velo lucido diagonale che scorre sulle foto
   al passaggio del mouse, come un riflesso di luce sull'acqua.
   --------------------------------------------------------------------- */
.card__fig::after,
.duo-block__img::after,
.trio-block__media::after,
.slider--photo .slider__item::after {
  content: '';
  position: absolute;
  top: -60%; left: -35%;
  width: 32%; height: 220%;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(215, 221, 219, 0) 35%,
    rgba(215, 221, 219, .34) 50%,
    rgba(215, 221, 219, 0) 65%,
    transparent 100%);
  transform: translateX(-40%) rotate(6deg);
  transition: transform 1.05s var(--ease);
  pointer-events: none;
  mix-blend-mode: soft-light;
  z-index: 1;
}
.card__link:hover .card__fig::after,
.card__link:focus-visible .card__fig::after,
.duo-block__media:hover .duo-block__img::after,
.trio-block__media:hover::after,
.slider--photo .slider__item:hover::after { transform: translateX(260%) rotate(6deg); }

.card__fig img,
.trio-block__media img,
.trio-block__media video,
.slider--photo .slider__item img {
  transition: transform var(--t-slow) var(--ease);
}
.trio-block__media img,
.trio-block__media video {
  transition: filter .35s var(--ease), transform var(--t-slow) var(--ease);
}
.trio-block__media:hover img,
.trio-block__media:hover video { filter: url(#waterRipple); }

.slider--photo .slider__item { position: relative; overflow: hidden; }
.trio-block__text { color: var(--cream-dim); max-width: 40ch; }
.trio-block__text p + p { margin-top: 20px; }

/* ---------------------------------------------------------------------
   4C. REEL — pannello fisso che cambia foto e testo con lo scroll,
   a strisce orizzontali che si aprono in direzioni alternate.
   --------------------------------------------------------------------- */
.reel {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 110px 0 40px;
  background: var(--black-2);
  border-top: 1px solid var(--rule);
}
.reel__row {
  display: grid;
  grid-template-columns: minmax(320px, 38%) 1fr;
  column-gap: clamp(48px, 6vw, 100px);
  align-items: center;
  width: 100%;
  height: clamp(420px, 66vh, 600px);
}
.reel__copy { position: relative; height: 100%; }
.reel__visual { position: relative; height: 100%; }
.reel__panel-text {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.reel__panel-text:not([data-panel="0"]) { opacity: 0; visibility: hidden; }
.reel__panel-media { position: absolute; inset: 0; }
.reel__strips { position: relative; width: 100%; height: 100%; }
.reel__strip { position: absolute; left: 0; width: 100%; height: 16.6667%; overflow: hidden; }
.reel__strip img { position: absolute; left: 0; width: 100%; height: 600%; object-fit: cover; display: block; }
.reel__strip:nth-child(1) { top: 0%; }
.reel__strip:nth-child(2) { top: 16.6667%; }
.reel__strip:nth-child(3) { top: 33.3334%; }
.reel__strip:nth-child(4) { top: 50.0001%; }
.reel__strip:nth-child(5) { top: 66.6668%; }
.reel__strip:nth-child(6) { top: 83.3335%; }
.reel__strip:nth-child(1) img { top: 0%; }
.reel__strip:nth-child(2) img { top: -100%; }
.reel__strip:nth-child(3) img { top: -200%; }
.reel__strip:nth-child(4) img { top: -300%; }
.reel__strip:nth-child(5) img { top: -400%; }
.reel__strip:nth-child(6) img { top: -500%; }
.reel__dots {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 5;
}
.reel__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rule);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.reel__dot.is-active { background: var(--gold-soft); transform: scale(1.4); }

@media (max-width: 860px), (max-height: 559px), (prefers-reduced-motion: reduce) {
  .reel { height: auto; min-height: 0; overflow: visible; display: block; padding: 64px 0; }
  .reel__row { display: flex; flex-direction: column; height: auto; }
  .reel__copy, .reel__visual { display: contents; }
  .reel__panel-text,
  .reel__panel-media {
    position: static;
    inset: auto;
    opacity: 1; visibility: visible;
  }
  .reel__panel-text { margin-bottom: 28px; }
  .reel__panel-media { min-height: clamp(320px, 90vw, 460px); margin-bottom: 56px; }
  .reel__panel-media[data-panel="2"] { margin-bottom: 0; }
  .reel__panel-text[data-panel="0"] { order: 0; }
  .reel__panel-media[data-panel="0"] { order: 1; }
  .reel__panel-text[data-panel="1"] { order: 2; }
  .reel__panel-media[data-panel="1"] { order: 3; }
  .reel__panel-text[data-panel="2"] { order: 4; }
  .reel__panel-media[data-panel="2"] { order: 5; }
  .reel__dots { display: none; }
}

/* --- Big-stats: numeri enormi, composizione irregolare ------------------ */
.big-stats {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  row-gap: clamp(70px, 11vh, 130px);
}
.big-stat__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.2rem, 8.6vw, 6.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--cream);
  white-space: nowrap;
}
.big-stat__num .unit { font-size: .32em; font-weight: 600; color: var(--gold-soft); margin-left: 6px; }
.big-stat__prefix { font-size: .72em; margin-right: 2px; }
.big-stat__note { margin-top: 16px; font-size: .95rem; line-height: 1.5; color: var(--cream-dim); max-width: 26ch; }

.big-stats__item-1 { grid-column: 6 / span 3; }
.big-stats__item-2 { grid-column: 9 / span 3; }
.big-stats__item-3 { grid-column: 1 / span 4; }
.big-stats__item-4 { grid-column: 5 / span 4; }

/* ---------------------------------------------------------------------
   4. CARD IMMOBILE
   --------------------------------------------------------------------- */
.card__link { display: block; }
.card__fig {
  position: relative;
  overflow: hidden;
  background: var(--black-2);
  border: 1px solid var(--rule);
  transition: border-color var(--t) var(--ease);
}
.card__link:hover .card__fig, .card__link:focus-visible .card__fig { border-color: var(--rule-gold); }
.card__fig img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform var(--t-slow) var(--ease);
}
.card__link:hover .card__fig img, .card__link:focus-visible .card__fig img { transform: scale(1.035); }

.card__fig--placeholder {
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  background: linear-gradient(155deg, var(--green) 0%, var(--green-deep) 100%);
  color: var(--cream);
}
.card__fig--placeholder .mark { height: 26px; opacity: .85; margin-bottom: auto; }
.card__ph-tag {
  font-family: var(--display);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

.card__tag {
  position: absolute;
  z-index: 2;
  top: 14px; left: 14px;
  padding: 6px 12px;
  background: var(--gold);
  color: var(--black);
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.card__body {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  align-items: baseline;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  transition: border-color var(--t) var(--ease);
}
.card__link:hover .card__body, .card__link:focus-visible .card__body { border-top-color: var(--gold); }
.card__index { grid-row: 1 / span 3; font-size: 11px; letter-spacing: .16em; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.card__name { font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.15; }
.card__place { font-size: 12.5px; color: var(--cream-dim); margin-top: 2px; }
.specs { grid-column: 2; display: flex; gap: 26px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule-soft); }
.specs dt { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-dim); }
.specs dd { margin: 3px 0 0; font-family: var(--display); font-weight: 700; font-size: .98rem; }

.section--gold .card__body { border-top-color: rgba(22,56,61,.2); }
.section--gold .card__link:hover .card__body, .section--gold .card__link:focus-visible .card__body { border-top-color: var(--black); }
.section--gold .card__index, .section--gold .card__place, .section--gold .specs dt { color: rgba(22, 56, 61, .62); }
.section--gold .specs { border-top-color: rgba(22,56,61,.14); }

/* --- Slider immobili in evidenza (home) --------------------------------- */
.slider { padding-top: clamp(48px, 7vh, 92px); }

.slider__track {
  display: flex;
  gap: var(--col-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter) 6px;
}
.slider__track::-webkit-scrollbar { display: none; }

.slider__item {
  flex: 0 0 auto;
  width: min(360px, 72vw);
  scroll-snap-align: start;
}

/* --- Variante "solo foto", senza titoli né card (territorio, home) ------ */
.slider--photo .slider__item {
  width: min(560px, 80vw);
}
.slider--photo .slider__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: clamp(28px, 4vh, 44px);
}
.slider__controls--right { justify-content: flex-end; }
.slider__arrow {
  width: 46px;
  height: 46px;
  flex: none;
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cream);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), opacity var(--t) var(--ease);
}
.slider__arrow:hover:not(:disabled), .slider__arrow:focus-visible:not(:disabled) { background: var(--gold); border-color: var(--gold); color: var(--black); }
.slider__arrow:disabled { opacity: .32; cursor: default; }

.slider__dots { display: flex; align-items: center; gap: 9px; }
.slider__dots button {
  width: 8px; height: 8px;
  border-radius: 5px;
  background: var(--rule);
  transition: width var(--t) var(--ease), background var(--t) var(--ease);
}
.slider__dots button.is-active { width: 26px; background: var(--gold); }

/* --- Griglia annunci (immobili.html) ------------------------------------ */
.listing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--col-gap);
  padding-top: clamp(40px, 6vh, 76px);
}
.filters {
  display: flex;
  gap: clamp(10px, 1.6vw, 20px);
  flex-wrap: wrap;
  margin-top: 22px;
}
.filters button {
  padding: 10px 18px;
  font-family: var(--display);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  color: var(--cream-dim);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.filters button:hover { border-color: var(--gold); color: var(--gold-soft); }
.filters button.is-active { background: var(--gold); border-color: var(--gold); color: var(--black); }
.listing-item[hidden] { display: none; }

/* ---------------------------------------------------------------------
   5. NUMERI / STAT ROW
   --------------------------------------------------------------------- */
.numeri__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--col-gap);
  border-top: 1px solid var(--rule);
  padding-top: 26px;
}
.numeri__item dt { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-dim); }
.numeri__item dd { margin: 10px 0 0; font-family: var(--display); font-weight: 600; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.3; color: var(--gold-soft); }
.section--gold .numeri__row { border-top-color: rgba(22,56,61,.22); }
.section--gold .numeri__item dt { color: rgba(22,56,61,.62); }
.section--gold .numeri__item dd { color: var(--black); }

/* ---------------------------------------------------------------------
   6. TERRITORIO / ZONE
   --------------------------------------------------------------------- */

.towns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--col-gap);
  padding-top: clamp(30px, 5vh, 60px);
}
.towns--stack { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); padding-top: 0; }

.offices-grid {
  display: grid;
  grid-template-columns: minmax(280px, 42%) 1fr;
  column-gap: clamp(40px, 6vw, 90px);
  align-items: center;
  padding-top: clamp(30px, 5vh, 60px);
}
.locator {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: var(--black-2);
  border: 1px solid var(--rule);
}
.locator svg { width: 100%; height: 100%; display: block; }
.map-block {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--black-2);
  border-top: 1px solid var(--rule);
  padding-bottom: clamp(56px, 9vh, 110px);
}
.map-block__map { position: absolute; inset: 0; }
.map-block__map svg { width: 100%; height: 100%; display: block; }
.map-block__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(10, 12, 12, .82) 0%, rgba(10, 12, 12, .25) 46%, rgba(10, 12, 12, 0) 75%);
}
.map-block__panel {
  position: relative;
  z-index: 2;
  max-width: 480px;
  background: rgba(14, 42, 46, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--rule-gold);
  border-radius: 22px;
  padding: clamp(28px, 4vw, 46px);
}
.map-block__title { margin-top: 12px; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.15; }
.map-block__towns { display: flex; flex-direction: column; gap: 24px; margin-top: 28px; }
.map-block__towns .town { border-top: 1px solid var(--rule); padding-top: 18px; }
.locator__pin-dot { transform-origin: center; animation: locatorPulse 2.2s ease-out infinite; }
@keyframes locatorPulse {
  0% { transform: scale(.6); opacity: .6; }
  70% { transform: scale(2.6); opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .locator__pin-dot { animation: none; }
}
.town { border-top: 1px solid var(--rule); padding-top: 16px; }
.town__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--rule-gold);
  color: var(--gold-soft);
  margin-bottom: 14px;
}
.town__icon svg { width: 16px; height: 16px; }
.town__name { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.town__note { margin-top: 6px; font-size: .92rem; color: var(--cream-dim); line-height: 1.5; }

/* ---------------------------------------------------------------------
   7. CHI SIAMO — valori
   --------------------------------------------------------------------- */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--col-gap);
  padding-top: clamp(40px, 6vh, 76px);
}
.value { border-top: 1px solid var(--rule); padding-top: 20px; }
.value__num { font-family: var(--display); font-size: 12px; letter-spacing: .16em; color: var(--gold-soft); }
.value__title { margin-top: 14px; font-size: 1.35rem; }
.value__body { margin-top: 12px; font-size: .98rem; line-height: 1.6; color: var(--cream-dim); max-width: 36ch; }

.quote {
  margin-top: clamp(40px, 6vh, 80px);
  padding: 4px 0 4px clamp(24px, 3vw, 34px);
  border-left: 3px solid var(--gold);
  max-width: 52ch;
}
.quote p { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.35; }
.quote cite { display: block; margin-top: 20px; font-family: var(--display); font-style: normal; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); }

/* --- Timeline "Tre principi": step con barra di caricamento + icona --- */
.reel-pin { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.reel-pin > .shell { position: relative; width: 100%; }

.timeline { padding-top: clamp(40px, 6vh, 76px); }
.timeline__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--col-gap);
}
.timeline__step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.timeline__bar { position: relative; width: 100%; height: 3px; background: var(--rule); overflow: hidden; }
.timeline__fill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: var(--gold-soft); }
.timeline__step.is-done .timeline__fill { transform: scaleX(1); }
.timeline__step.is-active .timeline__fill { animation: timelineFill 1.9s linear forwards; }
@keyframes timelineFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.timeline__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  color: var(--cream-dim);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.timeline__icon svg { width: 19px; height: 19px; }
.timeline__step.is-active .timeline__icon,
.timeline__step.is-done .timeline__icon { color: var(--gold-soft); border-color: var(--rule-gold); }
.timeline__label { font-size: 1.1rem; line-height: 1.3; }
.timeline__num {
  display: block;
  margin-bottom: 6px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--cream-dim);
}
.timeline__step.is-active .timeline__num,
.timeline__step.is-done .timeline__num { color: var(--gold-soft); }
.timeline__panels { position: relative; margin-top: clamp(36px, 5vh, 56px); min-height: 3.4em; }
.timeline__panel {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease);
}
.timeline__panel.is-active { position: relative; opacity: 1; visibility: visible; }
.timeline__panel p { font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.5; max-width: 52ch; color: var(--cream); }

/* ---------------------------------------------------------------------
   7b. SERVIZI — card servizio
   --------------------------------------------------------------------- */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--col-gap);
  padding-top: clamp(40px, 6vh, 76px);
}
.service {
  border: 1px solid var(--rule);
  padding: clamp(26px, 3vw, 38px);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.service:hover { border-color: var(--rule-gold); background: rgba(201, 162, 78, .04); }
.service__num { font-family: var(--display); font-size: 12px; letter-spacing: .16em; color: var(--gold-soft); }
.service__title { margin-top: 18px; font-size: 1.4rem; }
.service__body { margin-top: 14px; font-size: .98rem; line-height: 1.6; color: var(--cream-dim); }
.service__for { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule-soft); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-soft); }

/* ---------------------------------------------------------------------
   7c. BLOG / GUIDE — card articolo
   --------------------------------------------------------------------- */
.photo-blog {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(28px, 4vw, 48px);
  row-gap: clamp(36px, 5vw, 56px);
  padding-top: clamp(40px, 6vh, 76px);
}
.photo-blog__item { display: block; }
.photo-blog__item:nth-child(even) { margin-top: clamp(56px, 9vw, 104px); }
.photo-blog__fig {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--black-2);
  border: 1px solid var(--rule);
}
.photo-blog__fig img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow) var(--ease); }
.photo-blog__item:hover .photo-blog__fig img { transform: scale(1.045); }
.photo-blog__kicker { margin-top: 20px; font-family: var(--display); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); }
.photo-blog__title { margin-top: 10px; font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.25; transition: color var(--t) var(--ease); }
.photo-blog__item:hover .photo-blog__title { color: var(--gold-soft); }
.photo-blog__more { margin-top: 12px; font-family: var(--display); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); }

.aicon-prose p { font-size: 1.02rem; line-height: 1.7; color: var(--cream-dim); }
.aicon-prose p + p { margin-top: 18px; }
.aicon-prose h2 { margin-top: 36px; margin-bottom: 12px; font-size: 1.5rem; color: var(--cream); }
.aicon-prose a { text-decoration: underline; text-underline-offset: 3px; }
.navigation.pagination { margin-top: clamp(40px, 6vw, 72px); }
.navigation.pagination .nav-links { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.navigation.pagination a, .navigation.pagination .current {
  font-family: var(--display); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft);
}

/* ---------------------------------------------------------------------
   8. CONTATTI — form
   --------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  row-gap: clamp(40px, 6vh, 70px);
}
.contact-info { grid-column: 1 / span 4; }
.contact-info__item { border-top: 1px solid var(--rule); padding: 18px 0; }
.contact-info__item dt { font-family: var(--display); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); }
.contact-info__item dd { margin: 8px 0 0; font-size: 1.05rem; }
.contact-info__item a:hover { text-decoration: underline; text-underline-offset: 4px; }

.form { grid-column: 6 / span 7; }
.field { position: relative; margin-bottom: 26px; }
.field label {
  display: block;
  font-family: var(--display);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 10px;
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 14px 2px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1rem;
  color: var(--cream);
  transition: border-color var(--t) var(--ease);
}
.field select { appearance: none; border-radius: 0; }
.field select option { background: var(--black); color: var(--cream); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--gold); }
.field textarea { resize: vertical; min-height: 110px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }
.form__note { margin-top: 4px; font-size: 12.5px; color: var(--cream-dim); }
.form__foot { margin-top: 30px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.form__status { font-size: 13px; color: var(--gold-soft); display: none; }
.form__status.is-shown { display: block; }

/* --- CTA banda finale: fascia verde lago (30%) ---------------------------
   Il grigio chiaro (10%) resta un accento minoritario: qui compare solo
   sul bottone, non come sfondo di un'intera sezione ripetuta su ogni
   pagina — altrimenti supererebbe la sua quota nella proporzione 60/30/10. */
.cta {
  padding: clamp(70px, 11vh, 140px) 0;
  background: var(--green);
  color: var(--cream);
  text-align: center;
}
.cta__title { max-width: 20ch; margin-inline: auto; font-size: clamp(1.9rem, 4.6vw, 3.3rem); line-height: 1.1; }
.cta__note { margin: 18px auto 0; max-width: 50ch; color: var(--cream-dim); }
.cta__actions { margin-top: 32px; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.cta .btn--primary { background: var(--gold); border-color: var(--gold); color: var(--gold-deep); }
.cta .btn--primary:hover, .cta .btn--primary:focus-visible { background: var(--gold-soft); border-color: var(--gold-soft); }
.cta .btn--ghost { border-color: var(--rule-gold); color: var(--cream); }
.cta .btn--ghost:hover, .cta .btn--ghost:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--gold-deep); }

/* ---------------------------------------------------------------------
   9. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .split__lead { grid-column: 1 / span 11; max-width: 100%; }
  .split__aside { grid-column: 4 / span 9; }
  .sec-head__title { grid-column: 1 / span 9; }
  .sec-head__note { grid-column: 1 / -1; text-align: left; }
  .listing-grid { grid-template-columns: repeat(2, 1fr); }
  .towns { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: 1fr; }
  .services { grid-template-columns: 1fr; }
  .articles { grid-template-columns: 1fr; }
  .contact-info { grid-column: 1 / span 5; }
  .form { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .split__lead, .split__aside { grid-column: 1 / -1; }
  .duo-block, .duo-block--flip { grid-template-columns: 1fr; row-gap: 40px; }
  .duo-block--flip .duo-block__media { order: 0; }
  .duo-block__media { min-height: clamp(320px, 90vw, 460px); }
  .trio-block { grid-template-columns: 1fr; row-gap: 28px; }
  .trio-block__media { max-width: 320px; }
  .timeline__track { grid-template-columns: 1fr; row-gap: 28px; }
  .photo-blog { grid-template-columns: 1fr; }
  .photo-blog__item:nth-child(even) { margin-top: 0; }
  .offices-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .map-block { min-height: 70vh; align-items: center; }
  .map-block__panel { max-width: 100%; }
  .big-stats { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .big-stats [class*="big-stats__item"] { grid-column: auto !important; }
  .card__fig img, .card__fig--placeholder { aspect-ratio: 5 / 4; }
  .listing-grid { grid-template-columns: 1fr; }
  .numeri__row { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .towns { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .contact-info { grid-column: 1 / -1; }

  .cap { bottom: clamp(74px, 13vh, 130px); }
  .cap__in { max-width: 100%; }
  .cap__body { max-width: 30ch; }
  .hud__rail { height: min(26vh, 190px); }
  .hud__chapter { font-size: 9.5px; letter-spacing: .18em; }
}

@media (max-width: 480px) {
  .numeri__row { grid-template-columns: 1fr; }
  .towns { grid-template-columns: 1fr; }
  .hud__chapter { display: none; }
}

@media (max-height: 560px) {
  .cap { bottom: 58px; }
  .cap__title { font-size: clamp(1.5rem, 4.4vw, 2.4rem); }
  .cap__body { display: none; }
  .hero__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__hint i { animation: none; transform: scaleX(1); }
  .card__link:hover .card__fig img { transform: none; }
}