/* ============================================================
   GRANAIO — agriturismo demo
   Impianto clonato da depo.studio: griglia con linee nei track,
   font-size 1vw, scramble, temi on scroll, burger a pillola.
   ============================================================ */

/* ---------- base ---------- */
:root {
  font-size: 1vw;
  --space: .52rem;
  --calc-space: .52rem;
  --border: .52rem;
  --background: #E0DCDC;
  --text: #222222;
  --line: rgba(17, 17, 17, .45);
  --burger-bg: #222222;
  --overlay: rgba(224, 220, 220, .8);
  --blu: #00249C;
  --lime: #DCFF7D;
  --bianco: #FFFFFF;
}

:root.dark {
  --background: #222222;
  --text: #FFFFFF;
  --line: rgba(255, 255, 255, .15);
  --burger-bg: #00249C;
  --overlay: rgba(17, 17, 17, .8);
}

@media screen and (max-width: 991px) {
  :root { --space: 1.3rem; --calc-space: 1.3rem; --border: .65rem; }
}
@media screen and (max-width: 480px) {
  :root { --space: 2.67rem; --calc-space: 2.67rem; --border: 1.33rem; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { height: 100%; }

body {
  background-color: var(--background);
  color: var(--text);
  font-family: "Archivo", sans-serif;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s ease, color .4s ease;
}

body.caricamento { background-color: #222222; overflow: hidden; }

main {
  background-color: var(--background);
  color: var(--text);
  transition: background-color .4s ease, color .4s ease;
  overflow: clip;
  opacity: 0; /* svelato dal loader */
}

a { color: inherit; text-decoration: inherit; }
a, button, .burger, .hero__cta { cursor: pointer; }

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

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

.section { z-index: 1; position: relative; }
.container { padding-left: var(--space); padding-right: var(--space); }

[class*="brdr-10"] { border-radius: .52rem; }
[index="0"] { z-index: 0; }
[index="1"] { z-index: 1; }
[index="2"] { z-index: 2; }
[index="auto"] { z-index: auto; }

[top="250"] { padding-top: 13.02rem; }
[top="100"] { padding-top: 5.21rem; }
[top="10"]  { padding-top: .52rem; }

[show="mob"], [show="tb"], [show="pc"], [show="tb-mob"] { display: none; }

@media screen and (min-width: 992px) {
  [show="pc"] { display: block; }
}
@media screen and (max-width: 991px) and (min-width: 481px) {
  [show="tb"], [show="tb-mob"] { display: block; }
  [class*="brdr-10"] { border-radius: .65rem; }
  [top="250"] { padding-top: 26.04rem; }
  [top="10"] { padding-top: 1.3rem; }
}
@media screen and (max-width: 480px) {
  [show="mob"], [show="tb-mob"] { display: block; }
  [hide="mob"] { display: none !important; }
  [class*="brdr-10"] { border-radius: 1.33rem; }
  [top="250"] { padding-top: 32rem; }
  [top="10"] { padding-top: 1.3rem; }
}

/* ---------- tipografia (scala depo) ---------- */
.f-96 {
  font-family: "Archivo", sans-serif;
  font-size: 5rem;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: .9;
}
.f-36 {
  font-family: "Archivo", sans-serif;
  font-size: 1.88rem;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-transform: uppercase;
}
.f-36.no-caps { text-transform: none; }
.f-18 {
  font-family: "Figtree", sans-serif;
  font-size: .99rem;
  font-weight: 500;
  line-height: 1;
}
.f-mono {
  font-family: "IBM Plex Mono", monospace;
  font-size: .73rem;
  font-weight: 400;
  line-height: 1.45;
}
.caps { text-transform: uppercase; }
.col-blu { color: var(--blu); }
.col-lime { color: var(--lime); }

@media screen and (max-width: 991px) {
  .f-96 { font-size: 8.33rem; }
  .f-36 { font-size: 3.13rem; }
  .f-18 { font-size: 2.08rem; }
  .f-mono { font-size: 1.6rem; }
}
@media screen and (max-width: 480px) {
  .f-96 { font-size: 11.2rem; }
  .f-36 { font-size: 5.6rem; }
  .f-18 { font-size: 4.27rem; }
  .f-mono { font-size: 3.2rem; }
}

/* riga splittata dai titoli */
.tile-line { display: block; overflow: hidden; }

/* ---------- linee che si disegnano ---------- */
.line {
  background-color: var(--line);
  transition: background-color .4s ease;
  width: 100%;
  height: 1px;
}
.line.is--vertical { width: 1px; height: 100%; }

.horizontal-lines { display: flex; flex-direction: column; justify-content: space-between; }
.vertical-line { display: flex; }

/* ---------- slot media (placeholder bianchi) ---------- */
.slot {
  position: relative;
  background-color: var(--bianco);
  color: #222222;
  border-radius: var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  overflow: hidden;
  padding: 2.6rem;
  text-align: center;
  width: 100%;
  height: 100%;
}
.slot__tag {
  position: absolute;
  top: 1.04rem;
  left: 1.04rem;
  display: flex;
  align-items: center;
  gap: .42rem;
  color: var(--blu);
}
.slot__tag .pallino {
  width: .42rem; height: .42rem;
  border-radius: 50%;
  background: var(--blu);
}
.slot__icon { width: 2.4rem; height: 2.4rem; color: #222; opacity: .85; }
.slot__icon svg { width: 100%; height: 100%; }
.slot__desc { max-width: 30rem; color: #222; }
.slot__cross {
  position: absolute;
  width: .9rem; height: .9rem;
  pointer-events: none;
  opacity: .7;
}
.slot__cross::before, .slot__cross::after {
  content: "";
  position: absolute;
  background: #222;
}
.slot__cross::before { left: 50%; top: 0; width: 1px; height: 100%; }
.slot__cross::after { top: 50%; left: 0; height: 1px; width: 100%; }
.slot__cross.is--tl { top: .8rem; left: .8rem; }
.slot__cross.is--tr { top: .8rem; right: .8rem; }
.slot__cross.is--bl { bottom: .8rem; left: .8rem; }
.slot__cross.is--br { bottom: .8rem; right: .8rem; }

@media screen and (max-width: 991px) {
  .slot__desc { max-width: 56rem; }
  .slot__icon { width: 5rem; height: 5rem; }
  .slot__tag .pallino { width: 1rem; height: 1rem; }
}
@media screen and (max-width: 480px) {
  .slot__desc { max-width: 76rem; }
  .slot__icon { width: 9rem; height: 9rem; }
}

/* ============================================================
   LOADER
   ============================================================ */
.loader-main {
  position: fixed;
  inset: 0;
  z-index: 11;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  background-color: var(--blu);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity .2s ease .5s;
}
.loader-main__circle {
  --percent: 0%;
  width: 100%;
  height: 100%;
  background-color: var(--bianco);
  clip-path: inset(calc(100% - var(--percent)) 0 0 0);
  transition: clip-path .2s ease;
}
.loader-main__text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: .26rem;
  z-index: 3;
  color: #fff;
  mix-blend-mode: difference;
}
.loader-main__text .f-36 { overflow: hidden; transition: transform .4s ease; }
.loader-main.hide { opacity: 0; pointer-events: none; }
.loader-main.hide .f-36 { transform: translateY(100%); }

/* ============================================================
   BURGER (pillola in alto a sinistra)
   ============================================================ */
.burger {
  position: fixed;
  top: 2.08rem;
  left: 2.08rem;
  z-index: 10;
  min-width: 9.38rem;
  height: 3.03rem;
  padding: .94rem 1.82rem;
  border-radius: 1.515rem;
  overflow: hidden;
  background-color: var(--burger-bg);
  color: #fff;
  opacity: 0;
  border: none;
  text-align: left;
  --height: calc((100vh - 1.56rem) / 1.5);
  --width: calc((100vw - 5.2rem - 4px) / 5);
  --padd: 3.9rem;
  transition:
    min-width .8s cubic-bezier(.3, 1.1, .64, 1),
    height .8s cubic-bezier(.3, 1.1, .64, 1),
    background-color .4s ease,
    border-radius .8s cubic-bezier(.3, 1.1, .64, 1),
    color .4s ease;
}
.blue-nav .burger { background-color: var(--blu); }

.burger__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.3rem;
  overflow: hidden;
  transition: opacity .8s cubic-bezier(.84, 0, .16, 1);
}
.burger__icon {
  width: 1.15rem;
  height: .8rem;
  position: relative;
  flex-shrink: 0;
}
.burger__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: #fff;
  top: 0;
  transition: transform .8s cubic-bezier(.3, 1.1, .64, 1), top .8s cubic-bezier(.3, 1.1, .64, 1), bottom .8s cubic-bezier(.3, 1.1, .64, 1);
}
.burger__line.is--middle { top: 50%; }
.burger__line.is--bot { top: auto; bottom: 0; }

.burger__list {
  height: 0;
  width: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  pointer-events: none;
  transition: width .8s cubic-bezier(.3, 1.1, .64, 1), height .8s cubic-bezier(.3, 1.1, .64, 1), padding .8s cubic-bezier(.3, 1.1, .64, 1);
}
body.burger-aperto .burger__list {
  height: var(--height);
  width: var(--width);
  padding: var(--padd) 0 0;
}
.burger__item {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: transform .8s cubic-bezier(.3, 1.1, .64, 1) var(--delay, 0s), opacity .8s cubic-bezier(.3, 1.1, .64, 1) var(--delay, 0s);
}
.burger__item.is--social { margin-top: auto; }
.burger__item .riga-scramble { display: inline-block; }

body.burger-aperto .burger {
  min-width: var(--width);
  height: var(--height);
  border-radius: 1.04rem;
  padding: .94rem 1.82rem 1.82rem;
}
body.burger-aperto .burger__list { pointer-events: all; }
body.burger-aperto .burger__item { opacity: 1; transform: translateY(0); }
body.burger-aperto .burger__line.is--middle { transform: scaleX(0); }
body.burger-aperto .burger__line:first-child { top: 50%; transform: rotate(45deg); }
body.burger-aperto .burger__line.is--bot { bottom: calc(50% - 1px); transform: rotate(-45deg); }

@media screen and (max-width: 991px) {
  .burger {
    top: 2.6rem; left: 2.6rem;
    min-width: 23.44rem; height: 7.29rem;
    padding: 2.21rem 4.56rem;
    border-radius: 7.29rem;
    --width: calc(100vw - 5.2rem);
    --padd: 9rem;
  }
  .burger__icon { width: 2.9rem; height: 2rem; }
  .burger__list { gap: 2.6rem; }
}
@media screen and (max-width: 480px) {
  .burger {
    top: 4rem; left: 4rem;
    min-width: 36rem; height: 12rem;
    padding: 3.4rem 7rem;
    border-radius: 12rem;
    --width: calc(100vw - 8rem);
    --height: calc(100svh - 8rem - 4rem);
    --padd: 16rem;
  }
  .burger__icon { width: 5rem; height: 3.4rem; }
  .burger__list { gap: 4.5rem; }
}

/* ============================================================
   HERO — griglia del granaio
   ============================================================ */
.hero-section { height: 100vh; height: 100svh; }
.hero__sticky { height: 100%; padding: var(--space); }
.hero { position: relative; height: 100%; }

.hero__bg {
  position: absolute;
  inset: 0;
  background-color: #222222;
  z-index: 3;
  pointer-events: none;
}

.hero__grid,
.hero__lines-parent,
.hero__tiles-parent {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr;
  grid-template-rows: 1fr 1px 1fr 1px 1fr;
  grid-column-gap: var(--space);
  grid-row-gap: var(--space);
  height: 100%;
}
.hero__grid { position: relative; z-index: 4; pointer-events: none; }
.hero__grid a, .hero__grid button { pointer-events: all; }
.hero__lines-parent,
.hero__tiles-parent { position: absolute; inset: 0; }
.hero__lines-parent { z-index: 0; pointer-events: none; }
.hero__tiles-parent { z-index: 1; }

@media screen and (max-width: 991px) {
  .hero__grid, .hero__lines-parent, .hero__tiles-parent {
    grid-template-columns: 1fr 1px 1fr 1px 1fr;
    grid-template-rows: 1fr 1px 1fr 1px 1fr 1px 1fr;
  }
}
@media screen and (max-width: 480px) {
  .hero__grid, .hero__lines-parent, .hero__tiles-parent {
    grid-template-columns: 1fr 1px 1fr;
    grid-template-rows: 1fr 1px 1fr 1px 1fr 1px 1fr;
  }
}

/* logo tile */
.hero__logo-tile {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 9rem;
}
.hero__logo-shape {
  position: absolute;
  inset: 0;
  background-color: var(--bianco);
  border-radius: .52rem;
}
.hero__logo-testo {
  position: absolute;
  left: 1.04rem;
  bottom: .9rem;
  color: #fff;
  font-weight: 600;
  z-index: 1;
}
.hero__logo-glifo {
  position: absolute;
  top: .9rem;
  right: 1.04rem;
  width: 1.4rem;
  height: 1.4rem;
  z-index: 1;
  color: #fff;
}

/* titolo centrale */
.hero__middle {
  grid-column: 3 / 8;
  grid-row: 3 / 4;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__middle--content {
  --pc-height: 100%;
  height: var(--pc-height);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.hero__titolo {
  font-size: 5rem;
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: .9;
  font-family: "Archivo", sans-serif;
  transition: color .4s ease, font-size .7s cubic-bezier(.77, 0, .175, 1);
}
.hero__titolo .riga { display: block; }
.hero__titolo .riga.is--blu { color: var(--blu); }
body.caricamento .hero__titolo { color: #fff; font-size: 11.56rem; }
body.caricamento .hero__titolo .riga.is--blu { color: var(--blu); }
@media screen and (max-width: 991px) {
  body.caricamento .hero__titolo { font-size: 13rem; }
}
@media screen and (max-width: 480px) {
  .hero__titolo { font-size: 11.2rem; }
  body.caricamento .hero__titolo { font-size: 16rem; }
}
@media screen and (max-width: 991px) and (min-width: 481px) {
  .hero__titolo { font-size: 8.33rem; }
}

/* CTA in basso a destra */
.hero__cta {
  grid-column: 9 / 10;
  grid-row: 5 / 6;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.04rem;
  border-radius: .52rem;
  min-height: 11rem;
  pointer-events: none;
}
.hero__cta--frecce { display: flex; gap: .78rem; }
.hero__cta--freccia { width: 2.1rem; height: 2.1rem; overflow: hidden; }
.hero__cta--freccia .svg { width: 100%; height: 100%; color: var(--blu); }
.hero__cta--testi { display: flex; flex-direction: column; gap: .3rem; }

/* linee della griglia hero: vivono nei track da 1px */
.hero__lines-parent .horizontal-lines { flex-direction: row; }
.hl-1 { grid-column: 1 / 10; grid-row: 2 / 3; display: flex; gap: var(--space); }
.hl-2 { grid-column: 1 / 10; grid-row: 4 / 5; display: flex; gap: var(--space); }
.hl-1 > .line, .hl-2 > .line { height: 1px; flex: 1; align-self: center; }
.vl-1 { grid-column: 2 / 3; grid-row: 1 / 6; }
.vl-2 { grid-column: 4 / 5; grid-row: 1 / 6; }
.vl-3 { grid-column: 6 / 7; grid-row: 1 / 6; }
.vl-4 { grid-column: 8 / 9; grid-row: 1 / 6; }

@media screen and (max-width: 991px) {
  .hero__logo-tile { grid-column: 1 / 2; grid-row: 1 / 2; }
  .hero__middle { grid-column: 1 / 6; grid-row: 3 / 6; }
  .hero__cta { grid-column: 5 / 6; grid-row: 7 / 8; }
  .hl-1 { grid-column: 1 / 6; }
  .hl-2 { grid-column: 1 / 6; }
  .hl-3 { grid-column: 1 / 6; grid-row: 6 / 7; display: flex; gap: var(--space); }
  .hl-3 > .line { height: 1px; flex: 1; align-self: center; }
  .vl-3 { grid-column: 2 / 3; grid-row: 1 / 8; }
  .vl-4 { grid-column: 4 / 5; grid-row: 1 / 8; }
  .vl-1, .vl-2 { display: none; }
}
@media screen and (max-width: 480px) {
  .hero__logo-tile { grid-column: 1 / 2; grid-row: 1 / 2; }
  .hero__middle { grid-column: 1 / 4; grid-row: 3 / 6; }
  .hero__cta { grid-column: 1 / 4; grid-row: 7 / 8; min-height: 30rem; pointer-events: all; }
  .hl-1 { grid-column: 1 / 4; }
  .hl-2 { grid-column: 1 / 4; }
  .hl-3 { grid-column: 1 / 4; }
  .vl-3 { grid-column: 2 / 3; grid-row: 1 / 8; }
  .vl-4 { display: none; }
}

/* ---------- tiles del granaio ---------- */
.hero__tile { position: relative; overflow: hidden; border-radius: .52rem; }
.hero__tile:not(.active) { opacity: 0; visibility: hidden; }

/* colonne di testo mono (stile inventario) */
.tile--colonne { grid-column: 1 / 2; grid-row: 3 / 6; background: transparent; }
.tile--colonne .colonne-bg {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-evenly;
}
.tile--colonne .colonne-bg .riga-bg { width: 100%; height: 1px; background: var(--blu); }
.tile--colonne .colonne-testi {
  position: absolute; inset: 0;
  display: flex; gap: 1.04rem;
  padding: 1.04rem;
}
.tile--colonne .colonna { flex: 1; overflow: hidden; }
.tile--colonne .colonna .f-mono { text-transform: uppercase; }

/* canne d'organo (barre verticali) */
.tile--canne { grid-column: 7 / 10; grid-row: 1 / 2; background: #222; }
.tile--canne .canne {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; gap: .26rem;
  padding: .78rem;
}
.tile--canne .canna { flex: 1; background: var(--lime); height: 60%; border-radius: .1rem .1rem 0 0; }
.tile--canne .canna:nth-child(3n) { background: var(--blu); }

/* flash di colori con parole */
.tile--flash { grid-column: 5 / 6; grid-row: 1 / 2; background: #222; display: flex; align-items: center; justify-content: center; }
.tile--flash .flash-parola { color: #fff; text-align: center; }

/* covoni (archi che si rivelano) */
.tile--covoni { grid-column: 3 / 4; grid-row: 1 / 2; background: var(--lime); }
.tile--covoni .covoni {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: space-evenly;
  padding: 0 .78rem;
}
.tile--covoni .covone {
  width: 22%;
  height: 62%;
  background: #222;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.tile--covoni .covone:nth-child(2) { height: 82%; }
.tile--covoni .covone:nth-child(3) { height: 48%; }

/* fisica: lettere che cadono */
.tile--fisica { grid-column: 3 / 8; grid-row: 5 / 6; background: #222; }
.tile--fisica .fisica-canvas { position: absolute; inset: 0; }
.tile--fisica .fisica-canvas canvas { width: 100%; height: 100%; }

/* insegna (colonne di parole che scorrono in verticale) */
.tile--insegna { grid-column: 9 / 10; grid-row: 3 / 4; background: var(--blu); color: #fff; }
.tile--insegna .insegna-righe {
  position: absolute; inset: 0;
  display: flex; gap: .52rem;
  padding: .78rem;
}
.tile--insegna .insegna-riga { flex: 1; overflow: hidden; position: relative; }
.tile--insegna .insegna-wrapper {
  display: flex; flex-direction: column; gap: .52rem;
  text-align: center;
}
.tile--insegna .insegna-wrapper .f-36 { line-height: 1; }

@media screen and (max-width: 991px) {
  .tile--colonne { grid-column: 1 / 2; grid-row: 3 / 6; display: none; }
  .tile--canne { grid-column: 3 / 6; grid-row: 1 / 2; }
  .tile--flash { grid-column: 1 / 2; grid-row: 3 / 4; }
  .tile--covoni { grid-column: 1 / 2; grid-row: 5 / 6; }
  .tile--fisica { grid-column: 1 / 6; grid-row: 7 / 8; }
  .tile--insegna { grid-column: 5 / 6; grid-row: 3 / 6; display: none; }
}
@media screen and (max-width: 480px) {
  .tile--canne { grid-column: 1 / 4; grid-row: 1 / 2; }
  .tile--flash { display: none; }
  .tile--covoni { display: none; }
  .tile--fisica { display: none; }
}

/* ============================================================
   REEL — il podere in video (tema scuro)
   ============================================================ */
.reel { display: grid; grid-template-columns: 1fr 1px 3fr; gap: var(--space); padding-bottom: var(--space); }
.reel__info { display: flex; flex-direction: column; gap: 1.04rem; padding-top: 1.04rem; }
.reel__video-parent {
  aspect-ratio: 16 / 9;
  position: relative;
  border-radius: var(--border);
  overflow: hidden;
}
.reel__play {
  --x: 0px; --y: 0px;
  position: absolute;
  top: 70%; left: 50%;
  transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)));
  display: flex;
  align-items: center;
  gap: .78rem;
  background: #222;
  color: #fff;
  border-radius: 10rem;
  padding: 1.04rem 2.08rem;
  z-index: 2;
  pointer-events: none;
}
.reel__play .svg { width: 1.2rem; height: 1.2rem; }
.reel .horizontal-lines { flex-direction: column; }

@media screen and (max-width: 991px) {
  .reel { grid-template-columns: 1fr; }
  .reel__info { flex-direction: row; justify-content: space-between; padding-bottom: 1.3rem; }
  .reel__play { padding: 2.4rem 4.5rem; gap: 1.6rem; }
  .reel__play .svg { width: 2.6rem; height: 2.6rem; }
}

/* ============================================================
   MISSIONE + SERVIZI
   ============================================================ */
.servizi__title-parent {
  background-color: var(--background);
  transition: background-color .4s ease, color .4s ease;
  position: relative;
  z-index: 2;
  --opacity: 1;
}
.servizi__title { padding: 13.02rem var(--space) 13.02rem; max-width: 92rem; }
.servizi__title .f-96 { opacity: var(--opacity); }

.servizi__parent { height: 380vh; position: relative; }
.servizi__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.servizi__sticky-container { height: 100%; }
.servizi__grid {
  height: 100%;
  display: flex;
  align-items: stretch;
  gap: var(--space);
  padding: var(--space);
  width: max-content;
}
.servizio {
  width: 38vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.04rem 0;
}
.servizio__lista { display: flex; flex-wrap: wrap; gap: .78rem 1.04rem; max-width: 30vw; }
.servizi__grid .vertical-line { height: 100%; }

.servizi__dot-parent {
  width: 90vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.servizi__dot {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: var(--blu);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.servizi__dot--titolo { color: #fff; opacity: 0; white-space: nowrap; }

@media screen and (max-width: 991px) {
  .servizi__title { max-width: 100%; }
  .servizio { width: 70vw; }
  .servizio__lista { max-width: 62vw; }
}
@media screen and (max-width: 480px) {
  .servizi__parent { height: auto; }
  .servizi__sticky { position: static; height: auto; overflow: visible; }
  .servizi__grid { width: 100%; flex-direction: column; padding: var(--space); }
  .servizio { width: 100%; gap: 6rem; min-height: 60svh; }
  .servizio__lista { max-width: 100%; }
  .servizi__dot-parent { width: 100%; padding: 18rem 0; }
  .servizi__dot { width: 34rem; height: 34rem; }
  .servizi__dot--titolo { opacity: 1; }
  .servizi__grid .vertical-line { display: none; }
}

/* ============================================================
   STANZE — zoom dalla stanza alla griglia
   ============================================================ */
.stanze-section { height: 520vh; }
.stanze { position: relative; height: 100%; }
.stanze__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stanze__scale {
  --round: .52rem;
  display: grid;
  grid-template-columns: repeat(3, calc(100vw - var(--space) * 2));
  grid-auto-rows: calc(75vh - var(--space));
  gap: var(--space);
  will-change: transform;
}
.stanza {
  position: relative;
  border-radius: var(--round);
  overflow: hidden;
  clip-path: inset(0 var(--cliping, 0%) 0 0 round var(--round));
}
.stanza .slot { position: absolute; inset: 0; border-radius: 0; }
.stanza__nome {
  position: absolute;
  left: 2.08rem;
  bottom: 1.56rem;
  z-index: 2;
  color: #222;
}
.stanza__eti {
  position: absolute;
  top: 1.56rem;
  right: 2.08rem;
  z-index: 2;
  color: var(--blu);
}
.stanze.allow-fade .stanza { transition: opacity .4s ease; }
.stanze.allow-fade .stanza.hide { opacity: .3; }

/* i tre testi 3D */
.stanze__points {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 60rem;
  pointer-events: none;
}
.stanze__point {
  position: absolute;
  color: #222;
  opacity: 0;
  text-align: center;
}

@media screen and (max-width: 480px) {
  .stanze-section { height: auto; }
  .stanze__sticky { position: static; height: auto; display: block; overflow: visible; padding: var(--space); }
  .stanze__scale { grid-template-columns: 1fr; grid-auto-rows: 60svh; width: 100%; }
  .stanza { clip-path: none !important; }
  .stanze__points { display: none; }
}

/* cartellini (tickets) */
.cartellini { position: fixed; inset: auto auto 2.08rem 2.08rem; z-index: 9; pointer-events: none; }
.cartellino {
  position: absolute;
  bottom: 0; left: 0;
  width: 26rem;
  background: #fff;
  color: #222;
  border-radius: .52rem;
  display: flex;
  overflow: hidden;
  transform: translateY(130%) rotate(-4deg);
  opacity: 0;
  transition: transform .8s cubic-bezier(.3, 1.1, .64, 1), opacity .4s ease;
}
.cartellino.active { transform: translateY(0) rotate(-4deg); opacity: 1; }
.cartellino__sx {
  flex: 1;
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 2.6rem;
  border-right: 1px dashed rgba(17,17,17,.4);
}
.cartellino__dx {
  width: 7.8rem;
  padding: 1.3rem 1.04rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.04rem;
}
.cartellino__barcode {
  height: 3.2rem;
  background: repeating-linear-gradient(90deg, #222 0 .12rem, transparent .12rem .3rem, #222 .3rem .36rem, transparent .36rem .6rem);
}
@media screen and (max-width: 991px) { .cartellini { display: none; } }

/* ============================================================
   SEQUENZA — 31 scatti della sfornata
   ============================================================ */
.sequenza-section { height: 380vh; }
.sequenza__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding: var(--space);
}
.sequenza__slot { height: 100%; }
.sequenza__contatore {
  display: flex;
  align-items: baseline;
  gap: 1.04rem;
  color: #222;
}
.sequenza__contatore .numero {
  font-family: "Archivo", sans-serif;
  font-size: 9rem;
  letter-spacing: -.03em;
  line-height: .9;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.sequenza__track {
  width: 34rem;
  max-width: 70%;
  height: 1px;
  background: rgba(17,17,17,.25);
  position: relative;
}
.sequenza__progress {
  position: absolute;
  inset: 0;
  background: var(--blu);
  transform-origin: left;
  transform: scaleX(0);
}
@media screen and (max-width: 991px) {
  .sequenza__contatore .numero { font-size: 16rem; }
}
@media screen and (max-width: 480px) {
  .sequenza-section { height: 300vh; }
  .sequenza__contatore .numero { font-size: 22rem; }
}

/* ============================================================
   ANNATE — l'albo della dispensa
   ============================================================ */
.annate { display: flex; flex-direction: column; gap: 5.21rem; padding-bottom: 13.02rem; }
.annate__title { max-width: 88rem; }
.annate__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space);
}
.annate__item { display: flex; flex-direction: column; gap: 2.08rem; }
.annate__lista { display: flex; flex-direction: column; }
.annata {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1.04rem;
  padding: .9rem 0;
  position: relative;
  cursor: default;
}
.annata::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--line);
  transition: background-color .4s ease;
}
@media screen and (max-width: 991px) {
  .annate__grid { grid-template-columns: 1fr; gap: 5rem; }
  .annata { grid-template-columns: 22rem 1fr; padding: 2rem 0; }
}

/* polaroid sticky */
.polaroid__sticky { position: sticky; top: 0; height: 0; z-index: 3; }
.polaroid__stage {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
}
.polaroid {
  --left: 0rem; --top: 0rem; --rotate: 0deg; --index: 0;
  position: absolute;
  width: 14.06rem;
  height: 18.76rem;
  opacity: 0;
  z-index: var(--index);
  transform: translate(var(--left), var(--top)) rotate(var(--rotate));
  transition: opacity .8s cubic-bezier(.84, 0, .16, 1), transform .8s cubic-bezier(.84, 0, .16, 1);
  pointer-events: none;
}
.polaroid.active { opacity: 1; }
.polaroid .slot { padding: 1.3rem; gap: .8rem; }
.polaroid .slot__desc { font-size: .62rem; line-height: 1.5; }
.polaroid .slot__icon { width: 1.6rem; height: 1.6rem; }
@media screen and (min-width: 992px) { .polaroid__stage { display: flex; } }

/* ============================================================
   FOOTER
   ============================================================ */
.ultime-sezioni { will-change: transform; }

.footer { padding: 13.02rem 0 var(--space); display: flex; flex-direction: column; gap: 7.8rem; }
.footer__title { max-width: 92rem; }
.footer__title a { color: var(--blu); position: relative; white-space: nowrap; }

.footer__grid {
  display: grid;
  grid-template-columns: 1fr 1px 1.2fr 1px 1fr;
  grid-template-rows: auto;
  gap: var(--space);
  align-items: stretch;
  min-height: 26rem;
}
.footer__item { display: flex; flex-direction: column; justify-content: space-between; gap: 2.6rem; padding: 1.04rem 0; }
.footer__lista { display: flex; flex-direction: column; gap: 1.04rem; align-items: flex-start; }
.footer__lista.is--bot { flex-direction: row; justify-content: space-between; align-self: stretch; }
.footer__divider { background: var(--line); transition: background-color .4s ease; }
.footer__divider.vertical { width: 1px; height: 100%; }
.footer__logo { margin-top: auto; font-weight: 600; }
.footer__dot {
  position: absolute;
  right: var(--space);
  bottom: var(--space);
  width: 1.04rem; height: 1.04rem;
  border-radius: 50%;
  background: var(--blu);
}
.footer__grid { position: relative; }

@media screen and (max-width: 991px) {
  .footer__grid { grid-template-columns: 1fr; min-height: 0; gap: 4rem; }
  .footer__divider.vertical { width: 100%; height: 1px; }
  .footer { gap: 16rem; }
}

/* link con scramble: larghezza bloccata per evitare reflow */
[link-hover] { --width: auto; display: inline-block; }
[link-hover] > div { width: var(--width); white-space: nowrap; }

/* ============================================================
   ACCESSIBILITÀ
   ============================================================ */
/* ---------- rifiniture ---------- */
.tile--fisica .fisica-canvas canvas { cursor: grab; }

.stanza .slot__desc { font-size: 2.2rem; line-height: 1.5; max-width: 80%; }
.stanza .slot__icon { width: 6rem; height: 6rem; }
.stanza__nome { font-size: 12rem; letter-spacing: -.03em; line-height: .9; font-family: "Archivo", sans-serif; font-weight: 400; }
.stanza__eti { font-size: 2rem; }
@media screen and (max-width: 480px) {
  .stanza .slot__desc { font-size: 3.2rem; max-width: 100%; }
  .stanza__nome { font-size: 11.2rem; }
  .stanza__eti { font-size: 3.2rem; }
}

@media screen and (max-width: 991px) and (min-width: 481px) {
  .hl-3 { display: flex; gap: var(--space); }
}

/* percorso a movimento ridotto: layout statico */
html.reduced .hero__tile.active { opacity: 1; visibility: visible; }
html.reduced .stanze-section { height: auto; }
html.reduced .stanze__sticky { position: static; height: auto; display: block; overflow: visible; padding: var(--space); }
html.reduced .stanze__scale { grid-template-columns: 1fr 1fr; grid-auto-rows: 50vh; width: 100%; transform: none !important; }
html.reduced .stanza { clip-path: none !important; }
html.reduced .stanze__points { display: none; }
html.reduced .servizi__parent { height: auto; }
html.reduced .servizi__sticky { position: static; height: auto; overflow: visible; }
html.reduced .servizi__grid { width: 100%; flex-wrap: wrap; }
html.reduced .servizi__grid .servizio { width: 44vw; }
html.reduced .servizi__dot--titolo { opacity: 1; }
html.reduced .sequenza-section { height: auto; }
html.reduced .sequenza__sticky { position: static; height: 100vh; }
html.reduced .cartellini, html.reduced .polaroid__sticky { display: none; }
html.reduced .line { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}
.skip-link {
  position: fixed;
  top: -10rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blu);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 10rem;
  z-index: 20;
  transition: top .2s ease;
}
.skip-link:focus-visible { top: 1rem; }