/* ============================================================
   LE FONDERIE — industrial-contemporaneo
   Palette brand: ruggine #895037 · antracite #353535 · salvia #5d6657
   ============================================================ */

/* ---- Font brand ---- */
@font-face {
  font-family: 'LF Display';
  src: url('assets/fonts/display.otf') format('opentype');
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'LF Display';
  src: url('assets/fonts/display-italic.otf') format('opentype');
  font-weight: 400 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'LF Body';
  src: url('assets/fonts/body.otf') format('opentype');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
/* Le "maiuscole" di LF Body (Moue Display) sono disegnate con forme tondeggianti tipo
   minuscolo: sulle etichette in maiuscolo risultavano sgradevoli. Qui sostituiamo SOLO
   le maiuscole (A-Z + accentate) con maiuscole vere di un geometrico compatibile.
   NB: questa @font-face deve stare DOPO quella principale, altrimenti non vince.
   Il peso è dichiarato 300-700 su un'unica istanza regular, così le maiuscole non
   diventano mai più pesanti del resto del testo (LF Body ha un solo peso). */
@font-face {
  font-family: 'LF Body';
  src: local('Avenir Next'), local('Avenir'), local('Futura'), local('Century Gothic'),
       local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('Arial');
  unicode-range: U+0041-005A, U+00C0-00DE;
  font-weight: 300 700; font-style: normal;
}

:root {
  /* Palette CHIARA (unico tema del sito) — toni caldi carta/sabbia industriale */
  --ink:        #f5f1ea;   /* fondo pagina        */
  --ink-2:      #ece5d9;   /* sezione alternata   */
  --ink-3:      #ffffff;   /* card / pannelli     */
  --concrete:   #ddd4c4;   /* bordi / cemento     */
  --smoke:      #6d665a;   /* testo muted (leggibile) */
  --bone:       #26221b;   /* testo principale    */
  --paper:      #efe8dd;   /* footer              */
  --paper-ink:  #221e18;   /* testo su footer     */

  --rust:       #895037;   /* ruggine brand (accent solido) */
  --rust-2:     #a5623f;   /* ruggine hover / brighter      */
  --ember:      #99552e;   /* accent scuro leggibile su chiaro */
  --sage:       #5d6657;   /* salvia brand                  */
  --sage-2:     #6f7a63;   /* salvia scura                  */

  /* alias di compatibilita */
  --molten:     var(--rust);
  --molten-2:   var(--rust-2);

  --maxw: 1200px;
  --pad: clamp(1.25rem, 5vw, 6rem);
  --font-display: 'LF Display', 'Archivo', Georgia, serif;
  --font-serif: 'LF Display', 'Fraunces', Georgia, serif;
  --font-body: 'LF Body', system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

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

html {
  /* la pagina scorre solo in verticale */
  overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: clamp(1rem, .55vw + .85rem, 1.15rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .section__title, .hero__title, .cta__title,
.card__body h3, .nav__name { font-family: var(--font-display); }

a { color: inherit; text-decoration: none; }
em { font-style: italic; font-family: var(--font-serif); color: var(--ember); }
strong { color: var(--bone); font-weight: 700; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  padding: .85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s;
  white-space: nowrap;
}
.btn--sm { padding: .55rem 1.1rem; font-size: .85rem; }
.btn--lg { padding: 1.05rem 2rem; font-size: 1.05rem; }
.btn--primary { background: var(--molten); color: #fdf6ee; border-color: var(--molten); }
.btn--primary:hover { background: var(--molten-2); transform: translateY(-2px); }
.btn--ghost { border-color: rgba(38,34,27,.28); color: var(--bone); }
.btn--ghost:hover { border-color: var(--bone); transform: translateY(-2px); }
/* bottoni sopra le foto (hero, subhero, res-hero, cta) restano chiari */
.hero .btn--ghost, .subhero .btn--ghost, .res-hero .btn--ghost { border-color: rgba(235,231,223,.4); color: #f3efe7; }
.hero .btn--ghost:hover, .subhero .btn--ghost:hover, .res-hero .btn--ghost:hover { border-color: #f3efe7; }

/* ---------- NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; gap: 2rem;
  padding: 1rem var(--pad);
  background: rgba(245,241,234,.78);
  backdrop-filter: blur(12px);
  transition: background .35s var(--ease), padding .35s var(--ease), border-color .35s;
  border-bottom: 1px solid rgba(38,34,27,.07);
}
.nav.is-stuck {
  background: rgba(245,241,234,.94);
  backdrop-filter: blur(16px);
  border-bottom-color: rgba(38,34,27,.10);
  padding-top: .7rem; padding-bottom: .7rem;
}
.nav__brand { display: flex; align-items: center; gap: .65rem; margin-right: auto; }
.nav__logo {
  height: 46px; width: auto; display: block;
  filter: none; opacity: 1;
  transition: height .35s var(--ease);
}
.nav.is-stuck .nav__logo { height: 38px; }
.nav__mark {
  display: grid; place-items: center;
  width: 2.2rem; height: 2.2rem;
  background: var(--rust); color: var(--bone);
  font-weight: 900; font-size: .95rem; letter-spacing: -.03em;
  border-radius: 2px;
}
.nav__name { font-weight: 800; letter-spacing: .02em; font-size: 1.05rem; }
.nav__links { display: flex; gap: 1.6rem; }
.nav__links a {
  font-size: .9rem; font-weight: 500; color: var(--smoke);
  position: relative; padding: .3rem 0;
  transition: color .2s;
}
.nav__links a:hover { color: var(--bone); }
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--molten); transition: width .3s var(--ease);
}
.nav__links a:hover::after { width: 100%; }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; padding: .4rem; }
.nav__toggle span { width: 24px; height: 2px; background: var(--bone); transition: .3s; }

/* ---------- HERO ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 8rem var(--pad) 5rem;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    /* sfumatura EASED (multi-stop) del bordo inferiore verso il colore carta: nessuna riga/knee */
    linear-gradient(180deg,
      transparent calc(100% - 340px),
      color-mix(in srgb, var(--fade-color, var(--ink-2)) 8%, transparent)  calc(100% - 270px),
      color-mix(in srgb, var(--fade-color, var(--ink-2)) 26%, transparent) calc(100% - 205px),
      color-mix(in srgb, var(--fade-color, var(--ink-2)) 52%, transparent) calc(100% - 140px),
      color-mix(in srgb, var(--fade-color, var(--ink-2)) 78%, transparent) calc(100% - 75px),
      color-mix(in srgb, var(--fade-color, var(--ink-2)) 94%, transparent) calc(100% - 28px),
      var(--fade-bottom, var(--fade-color, var(--ink-2))) 100%),
    linear-gradient(180deg, rgba(18,17,16,.55) 0%, rgba(18,17,16,.35) 42%, rgba(18,17,16,.8) 100%),
    linear-gradient(90deg, rgba(18,17,16,.82) 0%, rgba(18,17,16,.30) 55%, rgba(18,17,16,.12) 100%),
    url('assets/img/ext/v6.jpg');
  background-size: cover;
  background-position: center 62%;
}
.hero__bg::after {
  /* velo caldo ruggine */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 85% 15%, rgba(137,80,55,.28), transparent 60%);
}
.hero__grain {
  position: absolute; inset: 0; z-index: 1; opacity: .5; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.hero__inner { position: relative; z-index: 2; max-width: 960px; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .22em; font-size: .72rem;
  font-weight: 600; color: var(--molten-2); margin-bottom: 1.6rem;
}
.hero__title {
  font-size: clamp(3.2rem, 11vw, 8.5rem);
  line-height: .92; font-weight: 800; letter-spacing: -.03em;
  margin-bottom: 1.6rem;
}
.hero__lead { max-width: 40ch; font-size: clamp(1.05rem, 1.4vw, 1.35rem); color: #cfc9bf; margin-bottom: 2.4rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; }
.hero__tags { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.hero__tags li {
  font-size: .82rem; color: var(--smoke); letter-spacing: .02em;
  padding-left: 1.1rem; position: relative;
}
.hero__tags li::before { content: '◆'; position: absolute; left: 0; color: var(--molten); font-size: .6rem; top: .35em; }
.hero__scroll {
  position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%);
  z-index: 2; font-size: 1.2rem; color: var(--smoke);
  animation: bob 2.2s var(--ease) infinite;
}
@keyframes bob { 0%,100%{ transform: translate(-50%,0);} 50%{ transform: translate(-50%,8px);} }

/* ---------- SECTIONS ---------- */
.section {
  padding: clamp(6rem, 13vw, 12rem) var(--pad);
  max-width: 100%;
}
.section--dark { background: var(--ink-2); }
.section > * { max-width: var(--maxw); margin-inline: auto; }
.section__head {
  display: flex; align-items: flex-start; gap: 1.4rem;
  margin-bottom: 3rem;
}
.section__num {
  font-family: var(--font-serif); font-size: 1.1rem; color: var(--molten);
  padding-top: .6rem; font-variant-numeric: tabular-nums;
}
.section__title {
  font-size: clamp(2.2rem, 5.5vw, 4.3rem); line-height: .98;
  font-weight: 800; letter-spacing: -.025em;
}
.prose { max-width: var(--maxw); }
/* Cappello che esiste solo sul telefono: da desktop il titolo va dritto alle card. */
.prose--mobile { display: none; }
@media (max-width: 880px) { .prose--mobile { display: block; } }
.prose p { margin-bottom: 1.1rem; color: #4a453c; }
.section--dark .prose p { color: #4a453c; }
.lead { font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.5; color: var(--bone) !important; }
.grid-2 { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }

.footnote { font-size: .8rem; color: var(--smoke); margin-top: 1.8rem; }

/* pillars */
.pillars { list-style: none; display: grid; gap: .2rem; }
.pillars li {
  display: grid; gap: .25rem;
  padding: 1.15rem 0; border-top: 1px solid var(--concrete);
}
.pillars li:last-child { border-bottom: 1px solid var(--concrete); }
.pillars__k { font-weight: 700; font-size: 1.05rem; }
.pillars__v { color: var(--smoke); font-size: .92rem; }

/* manifesto (quartiere filosofico) */
.manifesto {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin-top: 1rem; border-top: 1px solid var(--concrete);
}
.manifesto__item {
  padding: 2rem 2rem 2rem 0; border-right: 1px solid var(--concrete);
}
.manifesto__item:last-child { border-right: 0; }
.manifesto__item:not(:first-child) { padding-left: 2rem; }
.manifesto__k {
  display: block; font-family: var(--font-display); font-size: 1.35rem;
  font-weight: 600; color: var(--ember); margin-bottom: .8rem; line-height: 1.1;
}
.manifesto__item p { color: var(--smoke); font-size: .98rem; margin: 0; }

/* stats */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--concrete); border: 1px solid var(--concrete);
  margin-top: 1rem;
}
.stat { background: var(--ink); padding: 2rem 1.6rem; }
.section--dark .stat { background: var(--ink-2); }
.stat__num {
  display: block; font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 800;
  letter-spacing: -.02em; color: var(--ember); font-variant-numeric: tabular-nums;
  margin-bottom: .5rem;
}
.stat__label { font-size: .85rem; color: var(--smoke); line-height: 1.4; }

/* residenze cards */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2.5rem; }
.card {
  position: relative; background: var(--ink-3); border: 1px solid var(--concrete);
  border-radius: 3px; overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s;
}
.card:hover { transform: translateY(-4px); border-color: var(--molten); }
.card--accent { border-color: rgba(208,104,42,.4); }
.card__badge {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  background: var(--molten); color: #14100c; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; padding: .35rem .7rem; border-radius: 2px;
}
.card__media {
  aspect-ratio: 4 / 3; position: relative; overflow: hidden; background: var(--ink-2);
}
.card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: 1.6rem 1.7rem 1.9rem; }
.card__body h3 { font-size: 1.6rem; font-weight: 800; margin-bottom: .5rem; letter-spacing: .04em; }
.card__body p { color: var(--smoke); font-size: .95rem; }
.card__link {
  display: inline-block; margin-top: 1rem; color: var(--ember);
  font-weight: 600; font-size: .92rem; letter-spacing: .01em;
  transition: transform .25s var(--ease);
}
.card:hover .card__link { transform: translateX(4px); color: var(--rust-2); }

/* ============================================================
   MOBILE — CORPO A / CORPO C: due pannelli a tutto schermo, affiancati.
   Escono dal padding della sezione (bordo a bordo) e occupano l'altezza
   piena del display: Corpo A a sinistra, Corpo C a destra. La foto fa da
   sfondo, il testo sta in basso su una velatura scura.
   ============================================================ */
@media (max-width: 700px) {
  .cards {
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    /* full-bleed senza 100vw: annullo esattamente il padding della sezione,
       cosi' non posso allargare il documento e rifare la barra laterale */
    max-width: none;
    margin-inline: calc(var(--pad) * -1);
    margin-bottom: 2.5rem;
    background: none; border: 0; border-radius: 0; padding: 0;
    /* `hidden` e non `clip`: clip e' recente e dove non viene applicato il
       contenuto sborda davvero e la pagina scorre di lato. `.cards` non e'
       antenato di nessun position:sticky, quindi hidden e' sicuro. */
    overflow: hidden;
  }
  .card {
    display: block; position: relative;
    height: 100svh;
    border: 0; border-radius: 0; overflow: hidden;
    background: var(--bone);
    transition: none;
    /* --e = avanzamento dello scroll (0..1, dal JS). Due tempi: prima entra il
       pannello, poi salgono titolo e tasto. */
    --i: clamp(0, calc((var(--e, 1) - .04) / .66), 1);
    --b: clamp(0, calc((var(--e, 1) - .42) / .50), 1);
    transform: translateX(calc(var(--dir, 0) * (1 - var(--i)) * 30%))
               scale(var(--press, 1));
    opacity: calc(.1 + .9 * var(--i));
  }
  .cards .card:first-child { --dir: -1; }   /* Corpo A arriva da sinistra */
  .cards .card:last-child  { --dir:  1; }   /* Corpo C arriva da destra  */
  .card:hover { transform: none; }
  /* feedback al tocco: il pannello cede e il tasto si scurisce */
  .card:active { --press: .975; }
  .card:active .card__link { background: var(--ember); }
  /* la foto riempie tutto il pannello e scorre in parallasse (--sp dal JS) */
  .card__media {
    position: absolute; inset: 0; width: auto; aspect-ratio: auto;
  }
  .card__media img {
    width: 100%; height: 100%; object-fit: cover;
    /* resta sempre sovradimensionata: la traslazione non scopre mai i bordi */
    transform: scale(calc(1.18 - .10 * var(--i)))
               translateY(calc(var(--sp, 0) * 2.4%));
  }
  /* velatura: trasparente in alto, scura in basso dove c'e' il testo */
  .card::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg,
      rgba(14,12,10,.20) 0%,
      rgba(14,12,10,.06) 32%,
      rgba(14,12,10,.42) 68%,
      rgba(14,12,10,.82) 100%);
  }
  .card__body {
    position: absolute; z-index: 2; inset: auto 0 0 0;
    padding: 1.1rem .8rem 1.5rem;
    display: block; text-align: center;
  }
  /* titolo e tasto salgono dopo il pannello */
  .card__body > * {
    transform: translateY(calc((1 - var(--b)) * 20px));
    opacity: var(--b);
  }
  .card__body h3 {
    font-size: 1.45rem; margin-bottom: .55rem;
    color: #f4efe6; text-shadow: 0 1px 18px rgba(0,0,0,.6);
  }
  .card__body p { display: none; }
  /* TASTO vero e proprio: pillola piena, cosi' si capisce che si tocca */
  .card__link {
    margin-top: 0;
    display: flex; align-items: center; justify-content: center; gap: .3rem;
    padding: .6rem .5rem;
    background: var(--rust-2); color: #fff6ee;
    font-weight: 700; letter-spacing: .01em;
    /* sui telefoni stretti (320px) il testo deve restare dentro la pillola */
    font-size: clamp(.6rem, 3.05vw, .72rem);
    white-space: nowrap; border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
    text-shadow: none;
  }
  /* il badge torna nel flusso, sopra al titolo: niente sovrapposizioni */
  .card__badge {
    position: static; display: inline-block;
    transform: none; white-space: nowrap;
    margin-bottom: .5rem;
    font-size: .52rem; padding: .2rem .45rem; letter-spacing: .06em;
  }
}

/* Tablet: sotto gli 880px le card restano impilate; i due pannelli a tutto
   schermo affiancati valgono solo per il telefono (<= 700px). */
@media (max-width: 880px) and (min-width: 701px) {
  .cards { grid-template-columns: 1fr; }
}

/* listino */
.listino { margin: 3rem auto 2.5rem; }
.listino__head { margin-bottom: 1.6rem; text-align: center; }
.listino__head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 800;
  line-height: 1.06; letter-spacing: -.02em; margin-bottom: .5rem;
}
.listino__head p { color: var(--smoke); font-size: clamp(.95rem, 1.1vw, 1.05rem); }
/* tabella auto-width, centrata: le colonne si adattano al contenuto, nessun vuoto a destra */
.listino__table { width: auto; max-width: 100%; margin-inline: auto; border-collapse: collapse; font-size: 1rem; table-layout: auto; }
.listino__table th, .listino__table td { text-align: left; padding: 1rem 2.6rem; white-space: nowrap; }
.listino__table th:first-child, .listino__table td:first-child { padding-left: 0; }
.listino__table th:last-child, .listino__table td:last-child { padding-right: 0; }
.listino__table th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--smoke); font-weight: 600; padding-top: .9rem; padding-bottom: .9rem; border-bottom: 1px solid var(--concrete);
}
.listino__table td { border-bottom: 1px solid var(--concrete); }
.listino__table tbody tr { transition: background .2s; }
.listino__table tbody tr:hover { background: rgba(137,80,55,.06); }
.listino__table td:first-child { font-weight: 700; color: var(--bone); }
.listino__table td:last-child { font-weight: 700; color: var(--ember); font-variant-numeric: tabular-nums; }
/* listino: su mobile diventa una lista di schede (etichetta + valore) */
@media (max-width: 860px) {
  .listino { overflow: visible; }
  .listino__table, .listino__table tbody, .listino__table tr, .listino__table td { display: block; width: 100%; }
  .listino__table thead { display: none; }
  .listino__table tr {
    background: var(--ink-3); border: 1px solid var(--concrete); border-radius: 5px;
    padding: 1rem 1.15rem; margin-bottom: .85rem;
  }
  .listino__table td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .5rem 0; border-bottom: 1px solid var(--concrete);
    white-space: normal; text-align: right;
  }
  .listino__table td::before {
    content: attr(data-label);
    color: var(--smoke); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;
    font-weight: 600; text-align: left; white-space: nowrap;
  }
  .listino__table td:first-child {
    display: block; text-align: left; font-family: var(--font-display);
    font-size: 1.35rem; color: var(--ember); font-weight: 700;
    padding: 0 0 .7rem; margin-bottom: .35rem;
  }
  .listino__table td:first-child::before { display: none; }
  .listino__table td:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* specs */
.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--concrete); border: 1px solid var(--concrete); }
.spec { background: var(--ink-2); padding: 1.4rem 1.5rem; display: grid; gap: .3rem; }
.spec__k { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--smoke); }
.spec__v { font-size: 1.15rem; font-weight: 700; }
.spec__v[data-todo] { color: var(--smoke); font-weight: 500; font-style: italic; }

/* gallery */
.gallery {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-top: 1rem;
}
.tile {
  border: 0; padding: 0; cursor: pointer; background: var(--ink-2);
  aspect-ratio: 1 / 1; overflow: hidden; border-radius: 2px; position: relative;
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease), opacity .3s; }
.tile::after {
  content: '+'; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 2rem; color: var(--bone); background: rgba(20,19,18,.35);
  opacity: 0; transition: opacity .3s;
}
.tile:hover img { transform: scale(1.06); }
.tile:hover::after { opacity: 1; }
.tile:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* galleria wide (render esterni) */
.gallery--wide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 1rem auto 2.5rem; }
.gallery--wide .tile { aspect-ratio: 3 / 2; }
.gallery__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ember); font-weight: 600; margin: 0 auto .9rem; }

/* sezioni con sfondo fotografico */
.section--photo { position: relative; isolation: isolate; overflow: hidden;
  /* padding ampio: lascia spazio alle lunghe sfumature dei bordi senza toccare i testi */
  padding-top: clamp(16.5rem, 22vw, 18rem); padding-bottom: clamp(16.5rem, 22vw, 18rem); }
.section--photo::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--bg); background-size: cover; background-position: center;
  background-attachment: fixed; /* effetto scroll: lo sfondo resta fermo mentre il contenuto scorre */
}
/* su touch (mobile) background-attachment: fixed è problematico -> statico */
@media (hover: none), (max-width: 700px) {
  .section--photo::before { background-attachment: scroll; }
}
.section--photo::after {
  /* La foto RESTA VISIBILE (scrim scuro moderato per la leggibilità del testo chiaro);
     i bordi alto/basso sfumano nel colore carta della pagina -> nessuno stacco netto. */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg,
      var(--fade-top, var(--fade-color, var(--ink-2))) 0,
      color-mix(in srgb, var(--fade-top, var(--fade-color, var(--ink-2))) 94%, transparent) 34px,
      color-mix(in srgb, var(--fade-top, var(--fade-color, var(--ink-2))) 76%, transparent) 92px,
      color-mix(in srgb, var(--fade-top, var(--fade-color, var(--ink-2))) 46%, transparent) 152px,
      color-mix(in srgb, var(--fade-top, var(--fade-color, var(--ink-2))) 18%, transparent) 205px,
      transparent 250px,
      transparent calc(100% - 250px),
      color-mix(in srgb, var(--fade-bottom, var(--fade-color, var(--ink-2))) 18%, transparent) calc(100% - 205px),
      color-mix(in srgb, var(--fade-bottom, var(--fade-color, var(--ink-2))) 46%, transparent) calc(100% - 152px),
      color-mix(in srgb, var(--fade-bottom, var(--fade-color, var(--ink-2))) 76%, transparent) calc(100% - 92px),
      color-mix(in srgb, var(--fade-bottom, var(--fade-color, var(--ink-2))) 94%, transparent) calc(100% - 34px),
      var(--fade-bottom, var(--fade-color, var(--ink-2))) 100%),
    linear-gradient(180deg,
      rgba(14,12,10,var(--scrim-a, .58)) 0%,
      rgba(14,12,10,var(--scrim-b, .50)) 50%,
      rgba(14,12,10,var(--scrim-a, .58)) 100%);
}
/* testo CHIARO e leggibile sopra la foto (ombra morbida = leggibile su qualsiasi zona) */
.section--photo .section__title,
.section--photo .lead,
.section--photo .manifesto__k,
.section--photo .manifesto p,
.section--photo .amenities li,
.section--photo .footnote { text-shadow: 0 1px 22px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.4); }
.section--photo .section__title { color: #f4efe6; }
.section--photo .section__num { color: #d99a68; }
.section--photo .lead { color: #ece6db !important; }
.section--photo .manifesto { border-top-color: rgba(255,255,255,.20); }
.section--photo .manifesto__item { border-right-color: rgba(255,255,255,.20); }
.section--photo .manifesto__k { color: #dca06e; }
.section--photo .manifesto p { color: #ddd7cc; }
.section--photo .amenities li { color: #ece6db; border-bottom-color: rgba(255,255,255,.18); }
.section--photo .amenities li span { color: #dca06e; }
.section--photo .footnote { color: #cfc8bc; }

@media (max-width: 720px) {
  .gallery--wide { grid-template-columns: 1fr 1fr; }
}

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(12,11,10,.94); backdrop-filter: blur(6px);
  display: grid; place-items: center;
  animation: lbin .25s var(--ease);
}
.lightbox[hidden] { display: none; }
@keyframes lbin { from { opacity: 0; } to { opacity: 1; } }
.lightbox__img { max-width: 88vw; max-height: 86vh; object-fit: contain; border-radius: 3px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lightbox__close, .lightbox__nav {
  position: absolute; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
  color: var(--bone); cursor: pointer; border-radius: 50%;
  display: grid; place-items: center; transition: background .2s, transform .2s;
}
.lightbox__close { top: 1.4rem; right: 1.4rem; width: 3rem; height: 3rem; font-size: 1.6rem; line-height: 1; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 3.4rem; height: 3.4rem; font-size: 2rem; line-height: 1; }
.lightbox__nav--prev { left: 1.4rem; }
.lightbox__nav--next { right: 1.4rem; }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.16); }
.lightbox__nav:hover { transform: translateY(-50%) scale(1.06); }

/* amenities */
.amenities { list-style: none; display: grid; gap: .1rem; }
.amenities li {
  display: flex; align-items: center; gap: .8rem;
  padding: .95rem 0; border-bottom: 1px solid var(--concrete);
  font-size: 1.05rem;
}
.amenities li span { color: var(--molten); font-size: .7rem; }

/* calc */
.calc {
  background: var(--ink); border: 1px solid var(--concrete); border-radius: 4px;
  padding: clamp(1.6rem, 4vw, 3rem); margin-top: 1rem;
}
.calc__row label { display: block; font-weight: 600; margin-bottom: 1rem; font-size: 1.05rem; }
.calc__inputline { display: flex; align-items: center; gap: .8rem; font-weight: 700; color: var(--ember); }
.calc__inputline input[type=range] { flex: 1; accent-color: var(--molten); height: 4px; }
.calc__inputline output { min-width: 4ch; font-variant-numeric: tabular-nums; }
.calc__inputline span:last-child { color: var(--smoke); font-weight: 500; font-size: .9rem; }
.calc__result {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 1.2rem;
  margin: 2rem 0 1rem;
}
.calc__block { padding: 1.6rem; border-radius: 3px; display: grid; gap: .4rem; align-content: center; }
.calc__block--lost { background: #efe6da; border: 1px solid #e0d3c1; }
.calc__block--own { background: linear-gradient(140deg, rgba(137,80,55,.14), rgba(137,80,55,.04)); border: 1px solid rgba(137,80,55,.32); }
.calc__blocklabel { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--smoke); }
.calc__blockval { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.02em; }
.calc__block--lost .calc__blockval { color: #a4593a; }
.calc__block--own .calc__blockval { color: var(--ember); }
.calc__blocksub { font-size: .85rem; color: var(--smoke); }
.calc__arrow { display: grid; place-items: center; color: var(--molten); font-size: 1.6rem; }
.calc__proplink { display: inline-block; margin-top: .8rem; color: var(--ember); font-weight: 600; font-size: .9rem; transition: transform .25s var(--ease), color .2s; }
.calc__proplink:hover { transform: translateX(4px); color: var(--rust-2); }
.calc__note { font-size: .8rem; color: var(--smoke); }

/* CTA + form */
.section--cta {
  position: relative; isolation: isolate;
  /* resta su #EAE2D7: sfumando verso il bianco carta l'area sotto la 05
     tornava a leggersi come "sfumatura bianca". */
  background: #EAE2D7;
}
/* NIENTE velo ruggine qui: sporcava il beige in #E0D3C7 e faceva un gradino
   contro la sfumatura bassa della 05, che deve chiudere su #EAE2D7 pulito. */
.section--cta::before { content: none; }
.cta { max-width: 820px; margin-inline: auto; text-align: center; }
.cta__title { font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 800; line-height: .98; letter-spacing: -.025em; margin-bottom: 1rem; }
.cta__lead { color: var(--smoke); font-size: 1.15rem; max-width: 48ch; margin: 0 auto 3rem; }
.form { text-align: left; display: grid; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form label { display: grid; gap: .45rem; font-size: .85rem; color: var(--smoke); font-weight: 500; }
.form input, .form select, .form textarea {
  background: var(--ink-2); border: 1px solid var(--concrete); border-radius: 2px;
  padding: .85rem 1rem; color: var(--bone); font-family: inherit; font-size: 1rem;
  transition: border-color .2s;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--molten); }
.form__consent { display: flex !important; flex-direction: row !important; align-items: center; gap: .6rem; }
.form__consent input { width: auto; accent-color: var(--molten); }
.form__ok { color: var(--ember); font-weight: 600; text-align: center; }
.form .btn { width: 100%; margin-top: .5rem; }

/* footer (chiaro, a colonne) */
.footer { background: var(--paper); color: var(--paper-ink); padding: clamp(3rem, 6vw, 5rem) var(--pad) 2rem; }
.footer__top { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
.footer__label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: #8f887b; margin-bottom: 1.1rem; }
.footer__label--mt { margin-top: 2.2rem; }
.footer__nav { display: grid; gap: .7rem; }
.footer__nav a { color: var(--paper-ink); font-size: 1rem; width: fit-content; transition: color .2s; }
.footer__nav a:hover { color: var(--rust); }
.footer__value { display: block; color: var(--paper-ink); font-size: 1.05rem; line-height: 1.55; font-style: normal; }
a.footer__value { transition: color .2s; }
a.footer__value:hover { color: var(--rust); }
.footer__todo { color: #b3ab9c; font-style: italic; font-size: .92rem; }
.footer__partners { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.footer__logobox {
  display: inline-flex; align-items: center; justify-content: center;
  width: 152px; height: 46px; flex: none;   /* i due riquadri hanno la stessa misura */
  padding: .5rem .8rem; border-radius: 4px;
  background: #fdfbf7;                 /* i loghi sono scuri: servono su fondo chiaro */
}
.footer__logobox img { display: block; max-height: 22px; max-width: 100%; width: auto; height: auto; object-fit: contain; }

.footer__bar { max-width: var(--maxw); margin: clamp(2.5rem, 5vw, 4rem) auto 0; padding-top: 1.6rem; border-top: 1px solid #ddd6c7; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.footer__logo { height: 42px; width: auto; } /* logo scuro su fondo chiaro: nessun filtro */
.footer__credit { display: flex; flex-direction: column; gap: .15rem; text-align: center; font-size: .82rem; color: #746d61; }
.footer__made a { color: var(--rust); font-weight: 600; text-decoration: none; transition: color .2s; }
.footer__made a:hover { color: var(--rust-2); text-decoration: underline; }
.footer__social { display: flex; gap: 1.4rem; }
.footer__social a { color: var(--paper-ink); font-size: .95rem; transition: color .2s; }
.footer__social a:hover { color: var(--rust); }
.footer__legal { max-width: var(--maxw); margin: 1.6rem auto 0; font-size: .72rem; color: #9a9284; line-height: 1.5; }

@media (max-width: 880px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .footer__col--pages { grid-column: 1 / -1; }
  .footer__bar { flex-direction: column; text-align: center; gap: 1.2rem; }
}
@media (max-width: 480px) {
  .footer__top { grid-template-columns: 1fr; }
}

/* ============================================================
   PAGINE DI DETTAGLIO (corpo-a / corpo-c)
   ============================================================ */
.subhero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 9rem var(--pad) 4rem; min-height: 60vh;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.subhero__bg {
  position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center;
}
.subhero__bg::after {
  /* niente piu' sfumatura verso il colore della pagina: la foto finisce
     netta. Resta solo la velatura scura, che serve a leggere il testo. */
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,19,18,.72) 0%, rgba(20,19,18,.55) 45%, rgba(20,19,18,.86) 100%);
}
.subhero__inner { max-width: var(--maxw); margin-inline: auto; width: 100%; }
.backlink {
  position: absolute; top: 6.5rem; left: var(--pad); z-index: 2;
  color: var(--smoke); font-size: .9rem; font-weight: 500; transition: color .2s;
}
.backlink:hover { color: var(--bone); }
.subhero__eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; color: var(--ember); font-weight: 600; margin-bottom: 1rem; }
.subhero__title { font-family: var(--font-display); font-size: clamp(3rem, 9vw, 6.5rem); font-weight: 800; line-height: .95; letter-spacing: .02em; }
.subhero__lead { max-width: 54ch; color: #cfc9bf; font-size: clamp(1.05rem, 1.5vw, 1.3rem); margin-top: 1.2rem; }
.subhero__facts { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 1.8rem; }
.subhero__facts li { list-style: none; font-size: .85rem; color: var(--smoke); padding-left: 1.1rem; position: relative; }
.subhero__facts li::before { content: '◆'; position: absolute; left: 0; color: var(--rust); font-size: .6rem; top: .35em; }

/* blocchi tipologia */
.typo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-bottom: 2.5rem; }
.typo:nth-child(even) .typo__media { order: 2; }
.typo__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: var(--ink-2); }
.typo__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.typo__tag { display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ember); font-weight: 700; margin-bottom: .8rem; }
.typo__info h3 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; margin-bottom: .8rem; letter-spacing: -.01em; }
.typo__info p { color: var(--smoke); margin-bottom: 1.4rem; }
.typo__meta { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 1.6rem; }
.typo__meta div { display: grid; gap: .2rem; }
.typo__meta span.k { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--smoke); }
.typo__meta span.v { font-size: 1.25rem; font-weight: 800; color: var(--ember); }

/* tabella unità */
.unit-wrap { overflow-x: auto; margin-bottom: 4rem; border: 1px solid var(--concrete); border-radius: 3px; }
.unit-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 640px; }
.unit-table th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--smoke); font-weight: 600; padding: .9rem 1.1rem; background: var(--ink-2); border-bottom: 1px solid var(--concrete); }
.unit-table td { padding: .9rem 1.1rem; border-bottom: 1px solid var(--concrete); color: #c8c3ba; }
.unit-table tbody tr:last-child td { border-bottom: 0; }
.unit-table tbody tr:hover { background: rgba(137,80,55,.06); }
.unit-table td.price { color: var(--ember); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.unit-table td.note { color: var(--smoke); font-size: .84rem; font-style: italic; }
.unit-table .sold { opacity: .5; }

/* schede tipologia (planimetrie + render) */
.tipo-card {
  background: var(--ink-3); border: 1px solid var(--concrete); border-radius: 4px;
  padding: clamp(1.4rem, 3vw, 2.4rem); margin-bottom: 2rem; scroll-margin-top: 6rem;
}
.tipo-card__head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1.6rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--concrete);
}
.tipo-card__type { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--smoke); margin-bottom: .4rem; }
.tipo-card__head h3 { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700; color: var(--ember); line-height: 1; }
.tipo-card__price { font-size: 1.2rem; font-weight: 800; color: var(--bone); white-space: nowrap; }
.tipo-card__desc { color: var(--smoke); margin-bottom: 1.6rem; max-width: 60ch; }

.tipo-card__plans { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1rem; margin-bottom: 1.2rem; }
.tipo-card__plans.is-full { grid-template-columns: 1fr; }
.plan-fig { margin: 0; background: var(--paper); border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; }
.plan-fig img { width: 100%; height: 100%; max-height: 460px; object-fit: contain; padding: 1rem; cursor: zoom-in; background: var(--paper); }
.plan-fig figcaption { text-align: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: #6f6a63; padding: .6rem; background: #e9e5dc; }

.tipo-card__renders { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1.4rem; }
.tipo-card__renders img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 3px; cursor: zoom-in; }
.tipo-card__renders-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ember); margin-bottom: .7rem; font-weight: 600; }

@media (max-width: 720px) {
  .tipo-card__plans { grid-template-columns: 1fr; }
  .tipo-card__renders { grid-template-columns: 1fr 1fr; }
  .plan-fig img { max-height: 380px; }
}

@media (max-width: 880px) {
  .typo { grid-template-columns: 1fr; gap: 1.5rem; }
  .typo:nth-child(even) .typo__media { order: 0; }
  .backlink { top: 5.5rem; }
}

/* ---------- REVEAL ANIMATION (semplice fade-up) ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .hero__scroll { animation: none; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 880px) {
  .nav__toggle { display: flex; position: relative; z-index: 2; }
  .nav__brand, .nav .btn--sm { position: relative; z-index: 2; }
  /* Menu mobile a TUTTO SCHERMO con transizione */
  .nav__links {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 1.9rem;
    position: fixed; inset: 0; height: 100dvh; z-index: 1;
    padding: 2rem;
    background: rgba(245,241,234,.98);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    opacity: 0; visibility: hidden; transform: scale(1.05);
    transition: opacity .42s var(--ease), transform .42s var(--ease), visibility .42s;
  }
  .nav__links a {
    font-family: var(--font-display); font-size: 1.9rem; color: var(--bone); padding: .2rem 0;
    opacity: 0; transform: translateY(16px);
    transition: opacity .45s var(--ease), transform .45s var(--ease);
  }
  .nav__links a::after { display: none; }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: scale(1); }
  .nav.is-open .nav__links a { opacity: 1; transform: translateY(0); }
  .nav.is-open .nav__links a:nth-child(1) { transition-delay: .10s; }
  .nav.is-open .nav__links a:nth-child(2) { transition-delay: .16s; }
  .nav.is-open .nav__links a:nth-child(3) { transition-delay: .22s; }
  .nav.is-open .nav__links a:nth-child(4) { transition-delay: .28s; }
  .nav.is-open .nav__links a:nth-child(5) { transition-delay: .34s; }
  /* Hamburger → X */
  .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .grid-2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .manifesto { grid-template-columns: 1fr; }
  .manifesto__item { padding: 1.5rem 0 !important; border-right: 0; border-bottom: 1px solid var(--concrete); }
  .manifesto__item:last-child { border-bottom: 0; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .lightbox__nav { width: 2.8rem; height: 2.8rem; }
  .specs { grid-template-columns: 1fr 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .calc__result { grid-template-columns: 1fr; }
  .calc__arrow { transform: rotate(90deg); }
}
@media (max-width: 480px) {
  .stats, .specs { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .section__head { flex-direction: column; gap: .4rem; }
}

/* ============ SELETTORE RESIDENZE ============ */
.res-filter { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.6rem; }
.chip { background: transparent; border: 1px solid var(--concrete); color: var(--smoke); padding: .55rem 1.25rem; border-radius: 100px; font-family: inherit; font-size: .9rem; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.chip:hover { border-color: var(--rust); color: var(--bone); }
.chip.is-active { background: var(--rust); border-color: var(--rust); color: var(--bone); }
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 1.4rem; }
.res-card { display: flex; flex-direction: column; background: var(--ink-3); border: 1px solid var(--concrete); border-radius: 4px; overflow: hidden; transition: transform .3s var(--ease), border-color .3s; }
.res-card:hover { transform: translateY(-5px); border-color: var(--rust); }
.res-card__media { aspect-ratio: 1/1; background: var(--paper); position: relative; overflow: hidden; }
.res-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: .9rem; }
.res-card__ph {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .35rem; text-align: center; padding: 1rem;
  color: #9a8f7e;
}
.res-card__ph svg { width: 34px; height: 34px; color: var(--rust); opacity: .8; margin-bottom: .5rem; }
.res-card__ph-k { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: #6f665a; letter-spacing: .01em; }
.res-card__ph-v { font-size: .68rem; text-transform: uppercase; letter-spacing: .2em; color: #9a8f7e; }
.res-card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.res-card__id { font-family: var(--font-display); font-size: 1.25rem; color: var(--ember); font-weight: 700; line-height: 1.1; }
.res-card__sub { color: var(--smoke); font-size: .85rem; }
.res-card__price { font-weight: 800; font-size: 1.15rem; margin-top: .4rem; }
.res-card__cta { color: var(--rust-2); font-size: .82rem; font-weight: 600; margin-top: auto; padding-top: .7rem; }
.res-card.is-hidden { display: none; }

/* ============ PAGINA RESIDENZA ============ */
.res { padding: 7rem var(--pad) 4rem; max-width: var(--maxw); margin: 0 auto; }
.backlink--dark { position: static; display: inline-block; margin-bottom: 1.4rem; }
.res__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.res__eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .74rem; color: var(--ember); font-weight: 600; }
.res__title { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 700; margin: .35rem 0 .5rem; line-height: 1; }
.res__lead { color: var(--smoke); font-size: 1.1rem; }
.res__grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.res__media { display: grid; gap: 1.3rem; min-width: 0; }
.res__plan img { max-height: 640px; }
.res__renders { display: grid; gap: 1rem; }
.res__section-label { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--ember); font-weight: 600; margin-bottom: .2rem; }
.res__render { margin: 0; background: var(--ink-2); border: 1px solid var(--concrete); border-radius: 3px; overflow: hidden; }
.res__render img { width: 100%; height: auto; display: block; cursor: zoom-in; } /* render intero, non tagliato */
.res__render figcaption { font-size: .72rem; color: var(--smoke); padding: .6rem .8rem; text-align: center; font-style: italic; }
.res__plan-missing { background: var(--ink-2); border: 1px dashed var(--concrete); border-radius: 4px; padding: 3rem 2rem; text-align: center; color: var(--smoke); }

.res__aside { position: sticky; top: 5.5rem; }
.res__card { background: var(--ink-3); border: 1px solid var(--concrete); border-radius: 4px; padding: clamp(1.4rem, 3vw, 2rem); }
.res__price-label { text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--smoke); }
.res__price { display: block; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 700; color: var(--ember); margin: .2rem 0 1.4rem; }
.spec-list { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.spec-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--concrete); }
.spec-list li:first-child { border-top: 1px solid var(--concrete); }
.spec-list__k { color: var(--smoke); font-size: .92rem; }
.spec-list__v { font-weight: 700; text-align: right; }
.res__btn { width: 100%; margin-bottom: .7rem; }
.res__note { color: var(--smoke); font-size: .88rem; margin-top: 2.2rem; max-width: 60ch; }
/* Nota dentro la scheda (es. "Affaccio semi-penalizzato") — non più sotto la scheda */
.res__card-note { color: var(--smoke); font-size: .84rem; line-height: 1.45; margin: 0 0 1.4rem; padding: .75rem .85rem; background: var(--ink-2); border-left: 2px solid var(--rust); border-radius: 3px; }

@media (max-width: 860px) {
  .res__grid { grid-template-columns: 1fr; }
  .res__aside { position: static; }
}

/* descrizione testuale residenza */
.res__desc { max-width: 70ch; margin: -0.5rem auto 2.2rem; text-align: center; color: #46423a; font-size: 1.08rem; line-height: 1.65; }

/* La location — elenco benefici */
.benefits { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2.5rem; margin-top: 1rem; }
.benefits li { display: grid; gap: .4rem; padding: 1.3rem 0 0; border-top: 1px solid var(--concrete); }
.benefits__k { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--ember); }
.benefits__v { color: var(--smoke); font-size: .98rem; line-height: 1.6; }
@media (max-width: 760px) { .benefits { grid-template-columns: 1fr; gap: 1.2rem; } }

/* ============================================================
   SEZIONI FOTOGRAFICHE — testo chiaro su overlay scuro delle foto
   (uniche zone volutamente scure: hero, subhero, res-hero, section--photo)
   ============================================================ */
.hero__title, .subhero__title { color: #f2ede4; }
.hero__lead, .subhero__lead { color: #ddd6ca; }
/* .section--photo ora è a velo CHIARO: testo con i colori scuri di default (leggibile) */
.hero__grain { opacity: .22; }

/* ============ FAQ (nativo details/summary) ============ */
.faq { max-width: var(--maxw); margin: 1rem auto 0; }
.faq details { border-bottom: 1px solid var(--concrete); }
.faq summary { list-style: none; cursor: pointer; padding: 1.2rem 2.2rem 1.2rem 0; position: relative;
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--bone); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  color: var(--ember); font-size: 1.5rem; transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--smoke); padding: 0 0 1.3rem; max-width: 75ch; line-height: 1.6; }

/* ============ Dati investitori (stat grid stile chiaro) ============ */
.invest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--concrete);
  border: 1px solid var(--concrete); margin-top: 1rem; }
.invest__item { background: var(--ink-2); padding: 2rem 1.6rem; }
.invest__num { display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 700; color: var(--ember); letter-spacing: -.02em; margin-bottom: .4rem; }
.invest__label { color: var(--smoke); font-size: .9rem; line-height: 1.4; }
@media (max-width: 760px) { .invest { grid-template-columns: 1fr; } }

/* ============ Blocchi vision/mission (feature stack) ============ */
.feature { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(1.5rem,4vw,4rem); align-items: start;
  padding: 2.6rem 0; border-top: 1px solid var(--concrete); }
.feature__k { font-family: var(--font-display); font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 700; color: var(--bone); }
.feature__v { color: var(--smoke); font-size: 1.05rem; line-height: 1.7; }
.feature__v strong { color: var(--bone); }
@media (max-width: 760px) { .feature { grid-template-columns: 1fr; gap: .6rem; padding: 1.8rem 0; } }

/* Pagina corrente evidenziata nella nav */
.nav__links a.is-current { color: var(--ember); }
.nav__links a.is-current::after { width: 100%; }
.nav .btn--sm.is-current { background: var(--rust); color: var(--bone); border-color: var(--rust); }

/* Mappa nel footer */
.footer__maplink { display: inline-block; margin-top: .9rem; color: var(--rust); font-weight: 600; font-size: .9rem; transition: color .2s; }
.footer__maplink:hover { color: var(--rust-2); text-decoration: underline; }
.footer__map { max-width: var(--maxw); margin: 2.2rem auto 0; border-radius: 6px; overflow: hidden; border: 1px solid #ddd6c7; line-height: 0; }
.footer__map iframe { width: 100%; height: 300px; border: 0; display: block; }
@media (max-width: 600px) { .footer__map iframe { height: 220px; } }

/* ============================================================
   SCHEDA RESIDENZA — layout stile scheda appartamento
   ============================================================ */
.res-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 9rem var(--pad) 3.5rem; min-height: 56vh;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.res-hero__bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; }
.res-hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      transparent 82%,
      color-mix(in srgb, var(--fade-color, var(--ink)) 22%, transparent) 90%,
      color-mix(in srgb, var(--fade-color, var(--ink)) 62%, transparent) 96%,
      var(--fade-color, var(--ink)) 100%),
    linear-gradient(180deg, rgba(20,19,18,.55) 0%, rgba(20,19,18,.35) 40%, rgba(20,19,18,.9) 92%, rgba(20,19,18,.5) 100%);
}
.res-hero__inner { max-width: var(--maxw); margin-inline: auto; width: 100%; }
.res-hero .backlink { position: static; display: inline-block; margin-bottom: 1.4rem; color: #cfc9bf; }
.res-hero .backlink:hover { color: #fff; }
.res-hero__eyebrow { display: block; text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; color: var(--ember); font-weight: 600; margin-bottom: .8rem; }
.res-hero__title { font-family: var(--font-display); font-size: clamp(2.6rem, 8vw, 5.5rem); font-weight: 800; line-height: .95; letter-spacing: .02em; color: #ece7dd; }
.res-hero__lead { color: #d7d2c8; font-size: clamp(1.05rem, 1.6vw, 1.35rem); margin-top: 1rem; }

/* Riga dettagli con icone */
.detspec {
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 0; background: transparent;
}
/* bordi per-cella con margini negativi che collassano i bordi condivisi:
   le celle vuote dell'ultima riga NON mostrano alcuno sfondo (niente rettangolo grigio). */
.detspec__item {
  background: transparent; border: 1px solid var(--concrete); margin: 0 -1px -1px 0;
  padding: 1.6rem 1.3rem; display: flex; flex-direction: column; gap: .35rem;
}
.detspec__ic { color: var(--ember); }
.detspec__ic svg { width: 26px; height: 26px; }
.detspec__k { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--smoke); margin-top: .5rem; }
.detspec__item { container-type: inline-size; }   /* il corpo del valore segue la CELLA, non la finestra */
.detspec__v {
  font-family: var(--font-display); font-weight: 700; color: var(--bone); line-height: 1.1;
  white-space: nowrap;                 /* "Monolocale" non va mai a capo */
  font-size: 1.05rem;                  /* ripiego per browser senza container query */
  font-size: clamp(.95rem, 16cqi, 1.35rem);
}

/* Due liste caratteristiche */
.carat { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.5rem); }
.carat__col .res__section-label { margin-bottom: 1rem; }
.ticklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.ticklist li { position: relative; padding-left: 1.9rem; color: var(--bone); font-size: 1.02rem; line-height: 1.5; }
.ticklist li::before {
  content: ''; position: absolute; left: 0; top: .15em; width: 1.15rem; height: 1.15rem;
  border-radius: 50%; background: var(--rust);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/68% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/68% no-repeat;
}

/* Box prezzo */
.pricebox {
  max-width: 640px; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; text-align: center;
  background: var(--ink-3); border: 1px solid var(--concrete); border-radius: 6px;
  padding: clamp(1.8rem, 4vw, 2.6rem);
}
.pricebox__label { text-transform: uppercase; letter-spacing: .16em; font-size: .74rem; color: var(--smoke); }
.pricebox__val { display: block; font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 700; color: var(--ember); margin: .3rem 0 .6rem; }
.pricebox__note { color: var(--smoke); font-size: .82rem; max-width: 46ch; margin: 0 auto 1.6rem; line-height: 1.5; }
.pricebox__cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* Planimetrie + render */
.plan-grid { max-width: var(--maxw); margin: 1.6rem auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.plan-grid--one { grid-template-columns: 1fr; max-width: 760px; }
.render-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: .8rem; }
.res__renders { max-width: var(--maxw); margin: 2.2rem auto 0; }

/* Nell'abitazione troverai */
.findgrid { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 900px) { .findgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .findgrid { grid-template-columns: 1fr; } }
.findcard { background: var(--ink); border: 1px solid var(--concrete); border-radius: 5px; padding: 1.6rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; }
.findcard__ic { color: var(--ember); }
.findcard__ic svg { width: 28px; height: 28px; }
.findcard__t { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--bone); margin-top: .2rem; }
.findcard__p { color: var(--smoke); font-size: .96rem; line-height: 1.55; }

@media (max-width: 820px) {
  .carat { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .detspec { grid-template-columns: 1fr 1fr; }
}

/* ---- Blocco prodotto a 2 colonne (dettagli | foto) stile scheda appartamento ---- */
.prodsplit { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.prodsplit__info {
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem);
  /* allinea il bordo sinistro al contenitore del sito */
  padding-left: max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
  background: var(--ink);
}
.prodsplit__photo { background-size: cover; background-position: center; min-height: 100%; }
.prodsplit .detspec { max-width: none; margin: 0; }
.prodsplit .carat { max-width: none; margin: 2.6rem 0 0; grid-template-columns: 1fr; gap: 2rem; }
.prodsplit .pricebox { max-width: none; margin: 2.6rem 0 0; text-align: left; }
.prodsplit .pricebox__note { margin-left: 0; }
.prodsplit .pricebox__cta { justify-content: flex-start; }
/* i CTA del box prezzo: a tutta larghezza della card, testo che va a capo se lungo (niente overflow) */
.pricebox__cta { flex-direction: column; align-items: stretch; }
.pricebox__cta .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
@media (max-width: 900px) {
  .prodsplit { grid-template-columns: 1fr; }
  .prodsplit__info { padding-left: var(--pad); padding-right: var(--pad); }
  .prodsplit__photo { min-height: 58vw; max-height: 460px; order: -1; }
}

/* ============================================================
   RIFINITURE TEMA CHIARO — profondità pannelli su fondo carta
   ============================================================ */
.card, .res-card, .findcard, .pricebox, .calc {
  box-shadow: 0 1px 2px rgba(38,34,27,.04), 0 10px 30px -18px rgba(38,34,27,.22);
}
.findcard { background: var(--ink-3); }             /* card bianca sul fondo sezione */
.res-card { border-color: #e4dccd; }
.res-card:hover { border-color: var(--rust); box-shadow: 0 6px 16px rgba(38,34,27,.10), 0 22px 44px -22px rgba(38,34,27,.30); }
.card:hover { box-shadow: 0 6px 16px rgba(38,34,27,.10), 0 22px 44px -22px rgba(38,34,27,.30); }
.detspec__item { background: var(--ink-3); }        /* celle riempite: bianche; le vuote restano trasparenti */
.section--dark .stat, .stat { background: var(--ink-3); }
.spec { background: var(--ink-3); }
.form input, .form select, .form textarea { background: #fff; }
.lead { color: var(--bone) !important; }

/* Sicurezza layout mobile: la colonna dettagli non deve mai eccedere lo schermo */
.prodsplit__info { min-width: 0; }
.detspec { min-width: 0; }
/* Il valore (Monolocale, Commerciale...) sta sempre su una riga sola: niente
   ritorni a capo e niente parole spezzate. La colonna e' dimensionata perche'
   la parola piu' lunga ci stia anche al corpo minimo del clamp. */
.detspec__k { overflow-wrap: break-word; }
@media (max-width: 560px) {
  .detspec { grid-template-columns: 1fr 1fr; }
  .detspec__item { padding: 1.25rem 1rem; }
}

/* ============================================================
   COLORE DI RACCORDO delle sfumature = colore ESATTO della sezione adiacente
   Default (hero, subhero, band) = --ink-2 (#ece5d9), la maggior parte dei vicini.
   Override dove il vicino è invece --ink (#f5f1ea).
   ============================================================ */
.lf-pinned-loc { --fade-color: var(--ink); }          /* confina con #foto-quartiere (--ink) */

/* ============================================================
   LEGGIBILITÀ: tutte le scritte sovrapposte alle FOTO in bold
   (hero, subhero, res-hero, sezioni fotografiche)
   ============================================================ */
.hero__lead, .hero__tags li, .hero .eyebrow,
.subhero__lead, .subhero__eyebrow, .subhero__facts li,
.res-hero__lead, .res-hero__eyebrow,
.hero .backlink, .subhero .backlink, .res-hero .backlink,
.section--photo .lead,
.section--photo .manifesto__k, .section--photo .manifesto p,
.section--photo .amenities li, .section--photo .footnote,
.section--photo .section__num, .section--photo .res__section-label {
  font-weight: 700 !important;
}
/* i titoli restano extra-bold */
.hero__title, .subhero__title, .res-hero__title,
.section--photo .section__title { font-weight: 800 !important; }

/* ============================================================
   BADGE numero sezione: riquadro con il loghetto Le Fonderie sopra + numero raddoppiato
   ============================================================ */
.section__head { align-items: center; }
.section__num {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; min-width: 3.6rem; padding: .7rem .85rem .6rem;
  /* sezioni chiare: riquadro RUGGINE con loghetto e numero bianchi */
  border: 1px solid #99552E; border-radius: 9px; background: #99552E;
  font-family: var(--font-serif); font-size: 2.2rem; line-height: 1;   /* ~doppio */
  font-weight: 800; color: #ffffff; font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 22px -16px rgba(38,34,27,.5);
}
.section__num::before {
  content: ''; display: block; width: 2.3rem; height: 1.75rem;
  background: url('assets/logo-mark.png') center/contain no-repeat;
  filter: brightness(0) invert(1);            /* loghetto bianco sul ruggine */
}
/* sezioni con foto: riquadro BIANCO con loghetto e numero ruggine */
.section--photo .section__num { background: #ffffff; border-color: #ffffff; color: #99552E; box-shadow: none; }
.section--photo .section__num::before { filter: none; }

/* ============================================================
   Testo sui banner foto: titoli manifesto in grassetto pieno, paragrafi ben leggibili
   ============================================================ */
.section--photo .manifesto__k { font-weight: 800 !important; color: #ecb083; }
.section--photo .manifesto p,
.section--photo .amenities li { color: #f3eee5 !important; font-weight: 700 !important; }
.section--photo .prose p,
.section--photo .lead { color: #ffffff !important; font-weight: 700 !important;
  text-shadow: 0 1px 22px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.5); }

/* ============================================================
   FOOTER con foto di sfondo (render) + testo chiaro
   ============================================================ */
.footer {
  position: relative; isolation: isolate;
  background:
    linear-gradient(180deg, rgba(16,14,12,.72), rgba(16,14,12,.82)),
    url('assets/img/ext/v6.jpg');
  background-size: cover; background-position: center;
  color: #f2ede4;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.footer__map { text-shadow: none; }
.footer__label { color: #b8ad9b; }
.footer__nav a, .footer__value, a.footer__value, .footer__social a { color: #ece7dd; }
.footer__nav a:hover, a.footer__value:hover, .footer__social a:hover, .footer__maplink:hover { color: #e0a06f; }
.footer__maplink { color: #e0a06f; }
.footer__todo { color: #cfc6b6; }
.footer__logobox { background: rgba(253, 251, 247, .94); box-shadow: 0 6px 20px rgba(0,0,0,.28); }
.footer__bar { border-top-color: rgba(255,255,255,.16); }
.footer__credit { color: #b8ad9b; }
.footer__made a { color: #e0a06f; }
.footer__made a:hover { color: #eeb98a; }
.footer__legal { color: #a89e8e; }
.footer__logo { filter: brightness(0) invert(1); opacity: .95; }   /* logo bianco su fondo scuro */
.footer__map { border-color: rgba(255,255,255,.18); }

/* ============================================================
   SEZIONE 01 — racconto "cinematico" a sinistra + bullet animati a destra
   ============================================================ */
.cine-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }

/* contenitore-gruppo: non sfuma lui, sfumano i figli in cascata */
.reveal--group { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---- colonna sinistra: racconto ---- */
.cine { position: relative; padding-left: 2rem; }
.cine__thread {
  position: absolute; left: .45rem; top: .55rem; bottom: .55rem; width: 2px;
  background: linear-gradient(180deg, var(--rust) 0%, rgba(137,80,55,.55) 55%, rgba(137,80,55,.08) 100%);
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.5s var(--ease) .1s;
}
.is-in .cine__thread { transform: scaleY(1); }

.cine__eyebrow {
  display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .2em;
  color: var(--ember); font-weight: 700; margin-bottom: 1.5rem;
}
.cine__line {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2.1rem); line-height: 1.28; font-weight: 700;
  color: var(--bone); margin-bottom: .8rem; position: relative;
}
.cine__line em { font-style: normal; font-family: inherit; color: var(--rust); }
.cine__out { margin-top: 1.9rem; color: #4a453c; font-size: 1.02rem; line-height: 1.7; max-width: 54ch; }

/* cascata: ogni elemento entra con un ritardo dato da --d */
.cine__eyebrow, .cine__line, .cine__out {
  opacity: 0; transform: translateY(26px); filter: blur(7px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
  transition-delay: calc(var(--d, 0) * .13s);
}
.is-in .cine__eyebrow, .is-in .cine__line, .is-in .cine__out {
  opacity: 1; transform: none; filter: blur(0);
}

/* ---- colonna destra: bullet point animati ---- */
.bullets { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: 1.6rem; }
.bullet {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  opacity: 0; transform: translateX(28px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay: calc(var(--d, 0) * .14s);
}
.is-in .bullet { opacity: 1; transform: none; }
.bullet__dot {
  width: .7rem; height: .7rem; margin-top: .45rem; border-radius: 50%;
  background: var(--rust); position: relative; flex-shrink: 0;
  transform: scale(0);
  transition: transform .6s cubic-bezier(.34,1.56,.64,1);
  transition-delay: calc(var(--d, 0) * .14s + .14s);
}
.is-in .bullet__dot { transform: scale(1); }
.bullet__dot::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid rgba(137,80,55,.4);
  opacity: 0; transform: scale(.5);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--d, 0) * .14s + .34s);
}
.is-in .bullet__dot::after { opacity: 1; transform: scale(1); }
.bullet__k { display: block; font-family: var(--font-display); font-size: 1.18rem; font-weight: 800; color: var(--bone); margin-bottom: .25rem; }
.bullet__v { display: block; color: var(--smoke); font-size: .97rem; line-height: 1.6; }

@media (max-width: 880px) {
  .cine-grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .cine { padding-left: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cine__thread { transform: scaleY(1); transition: none; }
  .cine__eyebrow, .cine__line, .cine__out, .bullet, .bullet__dot, .bullet__dot::after {
    opacity: 1; transform: none; filter: none; transition: none;
  }
}



/* ============================================================
   SEZIONE 01 — BENTO GRID "caratteristiche"  (classi lf-bento-*)
   Griglia 6 colonne, 5 card. Nessuna ombra, nessun gradiente decorativo,
   nessuna animazione d'ingresso, nessun hover-lift (solo il link della card 3).
   Token: riusa --ink (sand #f5f1ea) e --ember (clay #99552e) del sito;
   qui si dichiarano solo i DERIVATI.
   ============================================================ */
.lf-bento {
  --lf-surface:   #FBF9F5;                 /* fondo card, sand schiarito */
  --lf-line:      rgba(38, 34, 28, .12);   /* bordi hairline */
  --lf-line-2:    rgba(38, 34, 28, .22);   /* hairline per tracciati SVG (leggibilita) */
  --lf-muted:     rgba(38, 34, 28, .72);   /* testo secondario (>=4.5:1 su surface) */
  --lf-clay-soft: rgba(153, 85, 46, .12);  /* riempimenti, aree grafico */
  --lf-radius:    10px;

  max-width: var(--maxw); margin-inline: auto;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(.8rem, 1.4vw, 1.1rem);
  font-family: var(--font-display);
  color: var(--bone);
}
.lf-bento__card {
  grid-column: span 12;                    /* mobile: colonna singola */
  background: var(--lf-surface);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
}
/* TABLET: card 1 intera, 2+3 affiancate, 4 e 5 intere */
@media (min-width: 640px) {
  .lf-bento__card--2, .lf-bento__card--3 { grid-column: span 6; }
  .lf-bento__card--s { grid-column: span 6; }          /* servizi: 2 per riga */
}
/* DESKTOP: 1-2-3 da 2 colonne, 4-5 da 3 colonne */
@media (min-width: 1024px) {
  .lf-bento__card--1, .lf-bento__card--2, .lf-bento__card--3 { grid-column: span 4; }
  .lf-bento__card--4, .lf-bento__card--5 { grid-column: span 6; }
  .lf-bento__card--s { grid-column: span 3; }           /* servizi: 4 per riga */
}

/* ---- tipografia interna (font unico su tutta la sezione) ---- */
.lf-bento__title {
  font-family: inherit; font-size: 1.22rem; font-weight: 800; line-height: 1.2;
  color: var(--bone); margin: 0 0 .45rem;   /* i titoli NON sono colorati */
}
.lf-bento__text { font-family: inherit; color: var(--lf-muted); font-size: .97rem; line-height: 1.55; margin: 0; }
.lf-bento__link {
  display: inline-block; margin-top: .9rem; color: var(--ember);
  font-family: inherit; font-weight: 600; font-size: .92rem;
  transition: transform .25s var(--ease), color .2s;
}
.lf-bento__link:hover { transform: translateX(4px); color: var(--rust-2); }
.lf-bento__link:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 2px; }

/* ---- figure / SVG ---- */
.lf-bento__fig { margin-bottom: 1.1rem; }
.lf-bento__fig svg { display: block; width: 100%; height: auto; }
.lf-bento .lf-hair        { stroke: var(--lf-line-2); }
.lf-bento .lf-hair-fill   { fill: var(--lf-line-2); }
.lf-bento .lf-clay        { stroke: var(--ember); }
.lf-bento .lf-clay-fill   { fill: var(--ember); }
.lf-bento .lf-soft-fill   { fill: var(--lf-clay-soft); }
.lf-bento .lf-muted-stroke{ stroke: var(--lf-muted); }
.lf-bento__temp { font-family: var(--font-display); font-size: 30px; font-weight: 700; fill: var(--ember); }

/* CARD 1 — colata + numero sovrapposto */
.lf-bento__pour { position: relative; margin-bottom: 1.1rem; }
.lf-bento__pour svg { display: block; width: 100%; height: auto; }
.lf-bento__num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: inherit; font-weight: 800; color: var(--ember);
  font-size: clamp(3.2rem, 7vw, 4.4rem); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

/* CARD 4 e 5 — layout interno a due colonne (testo | illustrazione) */
.lf-bento__split { display: grid; gap: 1.3rem; }
@media (min-width: 640px) {
  .lf-bento__split { grid-template-columns: 1fr minmax(0, 42%); align-items: center; }
}
.lf-bento__split .lf-bento__fig { margin-bottom: 0; }

/* CARD 5 — pillole a zig-zag intorno a una linea centrale */
.lf-bento__pills {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; gap: .55rem; justify-items: center;
}
.lf-bento__pills::before {
  content: ''; position: absolute; top: .3rem; bottom: .3rem; left: 50%;
  width: 1px; background: var(--lf-line-2); transform: translateX(-.5px);
}
.lf-pill {
  position: relative; z-index: 1;
  border: 1px solid var(--lf-line-2); border-radius: 100px;
  background: var(--lf-surface);
  padding: .34rem .8rem; font-size: .8rem; font-family: inherit;
  color: var(--lf-muted); white-space: nowrap;
}
.lf-bento__pills .lf-pill:nth-child(odd)  { justify-self: start; }
.lf-bento__pills .lf-pill:nth-child(even) { justify-self: end; }

@media (prefers-reduced-motion: reduce) {
  .lf-bento__link { transition: none; }
  .lf-bento__link:hover { transform: none; }
}

/* titolo di sezione presente per gli screen reader ma non a video */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* MOBILE: tutte e nove le card impaginate come le prime tre —
   immagine a piena larghezza in alto, poi titolo e testo, stesse dimensioni.
   Le card 4 e 5 hanno il testo prima dell'illustrazione nel DOM: qui si inverte
   l'ordine visivo (order) senza toccare il markup. */
@media (max-width: 639px) {
  /* a coppie: casa+community, coworking+palestra, spazi verdi+lavanderia */
  .lf-bento__card--4, .lf-bento__card--5, .lf-bento__card--s { grid-column: span 6; }
  .lf-bento__split > .lf-bento__fig,
  .lf-bento__split > .lf-bento__pills { order: -1; }
  .lf-bento__split { gap: 1.1rem; }
  .lf-bento__split .lf-bento__fig { margin-bottom: 0; }
}

/* ============================================================
   MOBILE: via i riquadri bianchi — il contenuto sta direttamente sul beige
   della sezione (--ink-2 #ece5d9). Tinte di testo/tratti ricalibrate:
   sul beige servono un filo piu' cariche che sul bianco della card.
   ============================================================ */
@media (max-width: 639px) {
  .lf-bento {
    gap: 2.1rem 1.3rem;
    --lf-line-2:    rgba(38, 34, 28, .32);   /* tratti hairline delle icone */
    --lf-muted:     rgba(38, 34, 28, .76);   /* testo secondario */
    --lf-clay-soft: rgba(153, 85, 46, .18);  /* pieni (colata, area grafico) */
  }
  .lf-bento__card,
  .lf-bento__card--s {
    background: transparent; border: 0; border-radius: 0; padding: 0;
  }
  /* le pillole mascherano la linea centrale col colore della sezione, non col bianco */
  .lf-pill { background: var(--ink-2); }
}

/* ============================================================
   ICONE line-art delle card servizi (brief: griglia 24x24 -> qui in scala 120,
   stessa geometria e proporzioni). Tratto a spessore COSTANTE in px grazie a
   non-scaling-stroke: cosi' l'icona resta otticamente identica alle altre
   illustrazioni sia a 150px (desktop) sia a piena larghezza (mobile).
   ============================================================ */
.lf-bento-icon { display: block; width: 100%; height: auto; color: var(--ember); stroke-width: 2.6; }
.lf-bento-icon * { vector-effect: non-scaling-stroke; }
.lf-bento-icon .lf-soft-fill-stroke { fill: var(--lf-clay-soft); }   /* unico riempimento ammesso */
.lf-bento__card--s .lf-bento__fig svg { max-width: 150px; }
@media (max-width: 639px) { .lf-bento__card--s .lf-bento__fig svg { max-width: 172px; } }

/* HOME: le 4 card servizi sono visibili su tutti i dispositivi. */

/* MOBILE: card 4 e 5 allineate a dimensioni e spacing delle prime tre.
   L'illustrazione deve avere la stessa presenza verticale (~200-230px) e lo
   stesso stacco dal titolo delle card 1-3. */
@media (max-width: 639px) {
  .lf-bento__split > .lf-bento__fig,
  .lf-bento__split > .lf-bento__pills { min-height: 215px; align-content: center; }
  .lf-bento__pills { gap: 1.15rem; }
}

/* SEZIONE 02 — base comune ai tre riquadri. Il vecchio ventaglio 3D
   (rotateY sui laterali, hover che porta avanti la card) e' stato tolto:
   dichiarava transform su :nth-child, quindi vinceva per specificita' sul
   nuovo ingresso "carte da gioco" e le carte restavano ferme. */
.section--photo .manifesto { border-top: 0; margin-top: 1.8rem; }

/* sotto 881px i riquadri non compaiono (resta l'animazione del testo a
   tutto schermo): qui serve solo il distacco tra i blocchi */
@media (max-width: 880px) {
  .section--photo .manifesto { gap: 1rem; }
}

/* Card della sezione 02 piu' grandi: piu' respiro interno e testo proporzionato */
.section--photo .manifesto__item { padding: 2.5rem 2.2rem 2.6rem !important; }
.section--photo .manifesto__k { font-size: 1.5rem; margin-bottom: .75rem; }
.section--photo .manifesto__item p { font-size: 1.05rem; line-height: 1.62; }
@media (min-width: 881px) { .section--photo .manifesto { gap: 1.3rem; } }
@media (max-width: 880px) {
  .section--photo .manifesto__item { padding: 2rem 1.7rem 2.1rem !important; }
  .section--photo .manifesto__k { font-size: 1.35rem; }
}

/* ============================================================
   SEZIONE 02 — wrapper .lf-pin
   Desktop: neutro. `.section > *` darebbe maxw+centratura al wrapper invece
   che ai suoi figli: qui la annullo sul wrapper e la riapplico ai figli,
   cosi' il layout desktop resta identico a prima.
   ============================================================ */
.section--photo .lf-pin { max-width: none; margin: 0; }
.section--photo .lf-pin > * { max-width: var(--maxw); margin-inline: auto; }

/* ============================================================
   SEZIONE 02 su MOBILE — la sezione si "blocca" e lo scroll fa entrare il testo.
   La sezione e' alta 220svh: il wrapper resta sticky per ~120svh (durata
   dell'animazione), poi si sblocca e scorre via lasciando spazio alla 03.
   Le tre card qui non si vedono.
   ============================================================ */
@media (max-width: 880px) {
  .lf-pinned { height: 220svh; padding: 0; }
  /* foto e sfumature passano dal box alto 220svh al riquadro pinnato (100svh),
     altrimenti l'immagine si stirerebbe su tutta l'altezza della sezione */
  .lf-pinned::before, .lf-pinned::after { display: none; }

  .lf-pinned .lf-pin {
    position: sticky; top: 0;
    min-height: 100svh; height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(6rem, 16vh, 8rem) var(--pad) clamp(5rem, 12vh, 7rem);
    overflow: hidden; isolation: isolate;
  }
  .lf-pinned .lf-pin::before {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background-image: var(--bg); background-size: cover; background-position: center;
  }
  .lf-pinned .lf-pin::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(180deg,
        var(--fade-top, var(--fade-color, var(--ink-2))) 0,
        color-mix(in srgb, var(--fade-top, var(--fade-color, var(--ink-2))) 55%, transparent) 90px,
        transparent 190px,
        transparent calc(100% - 190px),
        color-mix(in srgb, var(--fade-bottom, var(--fade-color, var(--ink-2))) 55%, transparent) calc(100% - 90px),
        var(--fade-bottom, var(--fade-color, var(--ink-2))) 100%),
      linear-gradient(180deg, rgba(14,12,10,.58), rgba(14,12,10,.5) 50%, rgba(14,12,10,.58));
  }

  /* le card non si vedono su mobile */
  .lf-pinned .manifesto { display: none; }

  /* --- animazione d'ingresso guidata dallo scroll (--p1 / --p2 dal JS) --- */
  .lf-pinned .lf-pin .section__head,
  .lf-pinned .lf-pin .prose { will-change: transform, opacity; }

  .lf-pinned .lf-pin .section__head {
    opacity: var(--p1, 0);
    transform: translate3d(0, calc((1 - var(--p1, 0)) * 46px), 0);
    filter: blur(calc((1 - var(--p1, 0)) * 7px));
  }
  .lf-pinned .lf-pin .prose {
    opacity: var(--p2, 0);
    transform: translate3d(0, calc((1 - var(--p2, 0)) * 52px), 0);
    filter: blur(calc((1 - var(--p2, 0)) * 7px));
  }
  /* il reveal a osservatore non deve sovrascrivere l'animazione da scroll */
  .lf-pinned .lf-pin .reveal { opacity: 1; transform: none; transition: none; }
  .lf-pinned .lf-pin .lead { font-size: 1.12rem; line-height: 1.6; }
}

/* Nessun pin e testo subito visibile se l'utente riduce le animazioni */
@media (max-width: 880px) and (prefers-reduced-motion: reduce) {
  .lf-pinned { height: auto; padding: clamp(6rem,16vh,8rem) 0; }
  .lf-pinned .lf-pin { position: static; height: auto; min-height: 0; }
  .lf-pinned .lf-pin .section__head,
  .lf-pinned .lf-pin .prose { opacity: 1; transform: none; filter: none; }
}

/* FIX pin sezione 02: `.section--photo` ha overflow:hidden, che crea uno scroll
   container e impedisce a position:sticky di agganciarsi al viewport (il pin
   restava in cima e sotto restava un'intera schermata vuota). `clip` taglia
   allo stesso modo senza creare lo scroll container. */
@media (max-width: 880px) {
  .lf-pinned { overflow: clip; height: 190svh; }
}

/* La 05 usa lo stesso pin della 02: qui nasconde la lista servizi (come la 02
   nasconde le card) e lascia titolo + testo a tutto schermo. */
@media (max-width: 880px) {
  .lf-pinned .amenities { display: none; }
}

/* ============================================================
   SEZIONE 04 — galleria "cinetica": le foto si inclinano in base alla
   VELOCITA' di scroll (piu' scorri veloce, piu' si deformano) e tornano
   dritte quando ti fermi. Effetto ripreso dal componente di riferimento,
   qui in CSS+JS nativi: --skew arriva dallo script.
   ============================================================ */
#interni .tile { transform-origin: 50% 50%; }
#interni .tile img {
  transform: scale(1.12);            /* evita che lo skew scopra i bordi */
  transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: reduce) {
  #interni .tile { transform: none; }
  #interni .tile img { transform: none; }
}

/* ============================================================
   SEZIONE 01 — le illustrazioni entrano con lo scroll e TORNANO INDIETRO
   risalendo: l'avanzamento e' legato alla posizione nel viewport (--e),
   non a un trigger una-tantum, quindi l'effetto e' reversibile.
   ============================================================ */
/* (animazione generica sostituita da coreografie per singola illustrazione) */

/* ============================================================
   HEADER trasparente in cima, colorato solo allo scroll (pc e mobile).
   Tutte le pagine iniziano con una foto scura (hero/subhero/res-hero),
   quindi da fermi logo e voci vanno in chiaro; una volta agganciato
   l'header prende il fondo carta e il testo torna scuro.
   ============================================================ */
.nav { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
.nav.is-stuck {
  background: rgba(245, 241, 234, .94);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom-color: rgba(38, 34, 27, .10);
}
.nav:not(.is-stuck) .nav__logo { filter: brightness(0) invert(1); opacity: .95; }
.nav:not(.is-stuck) .nav__links a { color: rgba(245, 241, 234, .86); }
.nav:not(.is-stuck) .nav__links a:hover { color: #fff; }
.nav:not(.is-stuck) .nav__links a.is-current { color: #e6a774; }
.nav:not(.is-stuck) .nav__toggle span { background: #f3efe7; }
/* menu mobile aperto: pannello chiaro -> voci e hamburger tornano scuri */
.nav.is-open .nav__links a { color: var(--bone); }
.nav.is-open .nav__links a.is-current { color: var(--ember); }
.nav.is-open .nav__toggle span { background: var(--bone); }

/* ============================================================
   SEZIONE 04 — galleria sfalsata: foto piu' grandi, dimensioni alternate
   (grandi/piccole) e sfalsamento verticale. L'inclinazione cinetica resta:
   qui i due effetti sono composti nella stessa transform.
   ============================================================ */
#interni .gallery, #interni .gallery--wide {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(.9rem, 1.6vw, 1.4rem);
  align-items: start; margin-top: 1rem;
}
#interni .tile {
  aspect-ratio: 4 / 3;
  transform: translateY(var(--off, 0px)) skewX(var(--skew, 0deg));
}
/* ritmo: grande + piccola, poi piccola + grande, con sfalsamento verticale */
#interni .gallery .tile:nth-child(4n + 1) { grid-column: span 4; aspect-ratio: 16 / 10; --off: 0px; }
#interni .gallery .tile:nth-child(4n + 2) { grid-column: span 2; aspect-ratio: 3 / 4;   --off: 38px; }
#interni .gallery .tile:nth-child(4n + 3) { grid-column: span 2; aspect-ratio: 1 / 1;    --off: 0px; }
#interni .gallery .tile:nth-child(4n + 4) { grid-column: span 4; aspect-ratio: 16 / 10; --off: 34px; }

@media (max-width: 880px) {
  #interni .gallery, #interni .gallery--wide { grid-template-columns: repeat(4, 1fr); gap: .8rem; }
  #interni .gallery .tile:nth-child(4n + 1) { grid-column: span 4; aspect-ratio: 16 / 10; --off: 0px; }
  #interni .gallery .tile:nth-child(4n + 2) { grid-column: span 2; aspect-ratio: 3 / 4;   --off: 22px; }
  #interni .gallery .tile:nth-child(4n + 3) { grid-column: span 2; aspect-ratio: 3 / 4;   --off: 0px; }
  #interni .gallery .tile:nth-child(4n + 4) { grid-column: span 4; aspect-ratio: 16 / 10; --off: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  #interni .tile { transform: translateY(var(--off, 0px)); }
}

/* ============================================================
   SEZIONE 01 — ogni illustrazione ha la SUA coreografia, coerente con cosa
   rappresenta, guidata da --e (avanzamento nel viewport, quindi reversibile).
   --w e' un sotto-avanzamento: permette di sfalsare i pezzi dentro la stessa
   illustrazione senza usare keyframe a tempo.
   ============================================================ */

/* --- CARD 1: la colata fa zoom-in, il 35 si "scrive" da sinistra --- */
.lf-bento__card--1 .lf-bento__pour svg {
  --w: clamp(0, calc(var(--e, 1) / .62), 1);
  transform: scale(calc(.52 + .48 * var(--w)));
  transform-origin: 46% 52%;
  opacity: calc(.05 + .95 * var(--w));
}
.lf-bento__card--1 .lf-bento__num {
  --w: clamp(0, calc((var(--e, 1) - .30) / .48), 1);
  clip-path: inset(0 calc((1 - var(--w)) * 100%) 0 0);
}

/* --- CARD 2: gli archi partono piccoli dal centro e si espandono, sfalsati --- */
.lf-bento__card--2 .lf-bento__fig svg circle {
  transform: scale(var(--s, 1));
  transform-box: fill-box; transform-origin: center;
}
.lf-bento__card--2 circle:nth-of-type(1) { --s: calc(.06 + .94 * clamp(0, calc(var(--e, 1) / .42), 1)); }
.lf-bento__card--2 circle:nth-of-type(2) { --s: calc(.06 + .94 * clamp(0, calc((var(--e, 1) - .10) / .45), 1)); }
.lf-bento__card--2 circle:nth-of-type(3) { --s: calc(.06 + .94 * clamp(0, calc((var(--e, 1) - .20) / .48), 1)); }
.lf-bento__card--2 circle:nth-of-type(4) { --s: calc(.06 + .94 * clamp(0, calc((var(--e, 1) - .30) / .52), 1)); }

/* --- CARD 3: il grafico si apre da sinistra, la curva viene "tracciata" --- */
.lf-bento__card--3 .lf-bento__fig svg {
  --w: clamp(0, calc(var(--e, 1) / .70), 1);
  clip-path: inset(0 calc((1 - var(--w)) * 100%) 0 0);
}
.lf-bento__card--3 .lf-clay {
  --w: clamp(0, calc((var(--e, 1) - .12) / .74), 1);
  stroke-dasharray: 330; stroke-dashoffset: calc((1 - var(--w)) * 330);
}

/* --- CARD 4: il riquadro si disegna, i comandi scorrono, il 21° si scrive --- */
.lf-bento__card--4 .lf-bento__fig rect:first-of-type {
  --w: clamp(0, calc(var(--e, 1) / .48), 1);
  stroke-dasharray: 640; stroke-dashoffset: calc((1 - var(--w)) * 640);
}
.lf-bento__card--4 .lf-hair-fill {           /* i tre puntini */
  --w: clamp(0, calc((var(--e, 1) - .28) / .30), 1);
  transform: scale(var(--w)); transform-box: fill-box; transform-origin: center;
}
.lf-bento__card--4 .lf-bento__fig rect:nth-of-type(2),   /* pista del toggle */
.lf-bento__card--4 .lf-bento__fig path {                 /* pista dello slider */
  --w: clamp(0, calc((var(--e, 1) - .30) / .36), 1);
  opacity: var(--w);
}
.lf-bento__card--4 .lf-clay-fill {           /* le manopole che si spostano */
  --w: clamp(0, calc((var(--e, 1) - .42) / .40), 1);
  transform: translateX(calc((1 - var(--w)) * -26px));
  opacity: var(--w);
}
.lf-bento__card--4 .lf-bento__temp {
  --w: clamp(0, calc((var(--e, 1) - .58) / .38), 1);
  clip-path: inset(0 calc((1 - var(--w)) * 100%) 0 0);
}

/* --- CARD 5: la linea sale dal basso, le pillole entrano dal loro lato --- */
.lf-bento__card--5 .lf-bento__pills::before {
  --w: clamp(0, calc(var(--e, 1) / .45), 1);
  transform: translateX(-.5px) scaleY(var(--w));
  transform-origin: 50% 100%;                /* cresce dal basso */
}
.lf-bento__card--5 .lf-pill {
  opacity: var(--w, 1);
  transform: translateX(calc((1 - var(--w, 1)) * var(--dir, 0px)));
}
.lf-bento__card--5 .lf-pill:nth-child(odd)  { --dir: -70px; }   /* a sinistra: entra da sinistra */
.lf-bento__card--5 .lf-pill:nth-child(even) { --dir:  70px; }   /* a destra: entra da destra */
.lf-bento__card--5 .lf-pill:nth-child(1) { --w: clamp(0, calc((var(--e, 1) - .22) / .34), 1); }
.lf-bento__card--5 .lf-pill:nth-child(2) { --w: clamp(0, calc((var(--e, 1) - .32) / .34), 1); }
.lf-bento__card--5 .lf-pill:nth-child(3) { --w: clamp(0, calc((var(--e, 1) - .42) / .34), 1); }
.lf-bento__card--5 .lf-pill:nth-child(4) { --w: clamp(0, calc((var(--e, 1) - .52) / .34), 1); }

@media (prefers-reduced-motion: reduce) {
  .lf-bento__card--1 .lf-bento__pour svg,
  .lf-bento__card--2 .lf-bento__fig svg circle,
  .lf-bento__card--4 .lf-hair-fill, .lf-bento__card--4 .lf-clay-fill,
  .lf-bento__card--5 .lf-pill { transform: none; opacity: 1; }
  .lf-bento__card--1 .lf-bento__num,
  .lf-bento__card--3 .lf-bento__fig svg,
  .lf-bento__card--4 .lf-bento__temp { clip-path: none; }
  .lf-bento__card--3 .lf-clay, .lf-bento__card--4 .lf-bento__fig rect:first-of-type { stroke-dasharray: none; stroke-dashoffset: 0; }
  .lf-bento__card--4 .lf-bento__fig rect:nth-of-type(2), .lf-bento__card--4 .lf-bento__fig path { opacity: 1; }
  .lf-bento__card--5 .lf-bento__pills::before { transform: translateX(-.5px); }
}


/* --- la nota sotto la galleria non deve finire sotto le foto sfalsate:
   lo sfalsamento le abbassa fino a 38px, quindi serve aria in piu' --- */
#interni .footnote { margin-top: calc(1.8rem + 46px); }

/* ============================================================
   MOBILE — la galleria tiene l'impaginazione del desktop (tre colonne,
   card alternate 2+1 / 1+2): qui cambiano solo l'altezza delle righe e
   il gap, perche' su 390px le righe da 220px sarebbero sproporzionate.
   ============================================================ */
@media (max-width: 880px) {
  #interni .gallery, #interni .gallery--wide {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: clamp(96px, 27vw, 150px);
    gap: 6px;
    align-items: stretch;
    margin-top: 1rem;
  }
  #interni .tile,
  #interni .gallery .tile,
  #interni .gallery--wide .tile {
    aspect-ratio: auto; width: 100%; height: 100%;
    border-radius: 8px;
    transform: none; --off: 0px; --skew: 0deg;
  }
  #interni .gallery .tile:nth-child(4n + 1),
  #interni .gallery--wide .tile:nth-child(4n + 1) { grid-column: span 2; }
  #interni .gallery .tile:nth-child(4n + 2),
  #interni .gallery--wide .tile:nth-child(4n + 2) { grid-column: span 1; }
  #interni .gallery .tile:nth-child(4n + 3),
  #interni .gallery--wide .tile:nth-child(4n + 3) { grid-column: span 1; }
  #interni .gallery .tile:nth-child(4n + 4),
  #interni .gallery--wide .tile:nth-child(4n + 4) { grid-column: span 2; }
  #interni .tile img { object-position: center; }
  #interni .footnote { margin-top: 1.6rem; }
}

/* FIX barra bianca laterale su mobile: entrando, le pillole traslano di ±70px
   e sbordavano dal viewport allargando il documento (390 -> 440px). Le confino
   nel loro contenitore: entrano dal bordo del riquadro, senza sforare la pagina.
   `clip` invece di `hidden` per non creare uno scroll container. */
.lf-bento__pills { overflow: hidden; }

/* ============================================================
   SEZIONE 05 — le due sfumature devono essere DIVERSE e riconoscibili:
   in alto BIANCO puro, in basso #EAE2D7 (lo stesso colore da cui parte
   la sezione contatti). Prima il fade alto era #f5f1ea, cioe' crema:
   praticamente identico a #EAE2D7, per questo le due sfumature
   sembravano la stessa cosa.
   ============================================================ */
/* sopra c'e' la sezione 03 (beige): la sfumatura parte da quel colore,
   prima partiva dal bianco perche' sopra c'era la galleria su fondo chiaro. */
#community { --fade-top: var(--ink-2); --fade-bottom: #EAE2D7; }

/* Perche' il bianco in cima non faccia una riga contro la galleria, la
   sezione 04 chiude sul bianco: il passaggio resta invisibile. */
/* solo nella home, dove la 04 confina davvero con la 05 fotografica:
   nella pagina "Gli spazi" sotto la galleria c'e' una sezione beige e questo
   sfondo bianco creerebbe una riga netta. */


/* ============================================================
   SEZIONE 01 — coreografie piu' articolate per le ultime quattro card.
   Ogni illustrazione si compone di piu' passaggi sfalsati, non di un solo
   movimento: entrano prima gli assi/contenitori, poi i dati, infine i numeri.
   ============================================================ */

/* --- CARD 2: gli archi arrivano dal centro RUOTANDO (la fessura del tratteggio
   spazza in cerchio, come se venissero disegnati) e schiariscono uno alla volta --- */
.lf-bento__card--2 .lf-bento__fig svg circle {
  transform: rotate(calc((1 - var(--r, 1)) * -120deg)) scale(var(--s, 1));
  opacity: calc(.1 + .9 * var(--r, 1));
}
.lf-bento__card--2 circle:nth-of-type(1) { --r: clamp(0, calc(var(--e, 1) / .40), 1); }
.lf-bento__card--2 circle:nth-of-type(2) { --r: clamp(0, calc((var(--e, 1) - .12) / .42), 1); }
.lf-bento__card--2 circle:nth-of-type(3) { --r: clamp(0, calc((var(--e, 1) - .26) / .46), 1); }
.lf-bento__card--2 circle:nth-of-type(4) { --r: clamp(0, calc((var(--e, 1) - .40) / .48), 1); }

/* --- CARD 3: costruzione a strati. Prima l'asse, poi l'area che cresce dal
   basso, poi la linea dell'affitto, infine la curva che viene tracciata. --- */
.lf-bento__card--3 .lf-bento__fig svg { clip-path: none; }        /* niente piu' clip globale */
.lf-bento__card--3 .lf-hair {                                      /* asse di base */
  --w: clamp(0, calc(var(--e, 1) / .26), 1);
  stroke-dasharray: 200; stroke-dashoffset: calc((1 - var(--w)) * 200);
}
.lf-bento__card--3 .lf-soft-fill {                                 /* area che sale */
  --w: clamp(0, calc((var(--e, 1) - .18) / .40), 1);
  transform: scaleY(var(--w)); transform-box: fill-box; transform-origin: bottom;
  opacity: calc(.25 + .75 * var(--w));
}
.lf-bento__card--3 .lf-muted-stroke {                              /* affitto, tratteggiata */
  --w: clamp(0, calc((var(--e, 1) - .34) / .30), 1);
  clip-path: inset(0 calc((1 - var(--w)) * 100%) 0 0);
}
.lf-bento__card--3 .lf-clay {                                      /* la curva, per ultima */
  --w: clamp(0, calc((var(--e, 1) - .46) / .48), 1);
  stroke-dasharray: 330; stroke-dashoffset: calc((1 - var(--w)) * 330);
}

/* --- CARD 4: il pannello si accende per gradi. Riquadro, poi i tre puntini uno
   per uno, poi le piste dei comandi, poi le manopole che scorrono, infine il numero. --- */
.lf-bento__card--4 .lf-hair-fill {
  transform: scale(var(--d1, 1)); transform-box: fill-box; transform-origin: center;
  opacity: var(--d1, 1);
}
.lf-bento__card--4 .lf-hair-fill:nth-of-type(1) { --d1: clamp(0, calc((var(--e, 1) - .22) / .16), 1); }
.lf-bento__card--4 .lf-hair-fill:nth-of-type(2) { --d1: clamp(0, calc((var(--e, 1) - .28) / .16), 1); }
.lf-bento__card--4 .lf-hair-fill:nth-of-type(3) { --d1: clamp(0, calc((var(--e, 1) - .34) / .16), 1); }
.lf-bento__card--4 .lf-bento__fig rect:nth-of-type(2) {            /* pista del toggle */
  --w: clamp(0, calc((var(--e, 1) - .40) / .22), 1);
  opacity: var(--w);
  transform: scaleX(calc(.6 + .4 * var(--w))); transform-box: fill-box; transform-origin: left center;
}
.lf-bento__card--4 .lf-bento__fig path {                           /* pista dello slider */
  --w: clamp(0, calc((var(--e, 1) - .50) / .24), 1);
  opacity: var(--w);
  stroke-dasharray: 100; stroke-dashoffset: calc((1 - var(--w)) * 100);
}
.lf-bento__card--4 .lf-clay-fill:nth-of-type(4) {                  /* manopola toggle (4o circle) */
  --w: clamp(0, calc((var(--e, 1) - .52) / .24), 1);
  transform: translateX(calc((1 - var(--w)) * -30px));
  opacity: var(--w);
}
.lf-bento__card--4 .lf-clay-fill:nth-of-type(5) {                  /* manopola slider (5o circle) */
  --w: clamp(0, calc((var(--e, 1) - .62) / .26), 1);
  transform: translateX(calc((1 - var(--w)) * -52px));
  opacity: var(--w);
}
.lf-bento__card--4 .lf-bento__temp {
  --w: clamp(0, calc((var(--e, 1) - .74) / .26), 1);
  clip-path: inset(0 calc((1 - var(--w)) * 100%) 0 0);
}

/* --- CARD 5: la linea sale, poi ogni pillola entra dal proprio lato con una
   leggera crescita di scala: non solo scivolano, si "posano". --- */
.lf-bento__card--5 .lf-pill {
  transform: translateX(calc((1 - var(--w, 1)) * var(--dir, 0px)))
             scale(calc(.86 + .14 * var(--w, 1)));
  transform-origin: var(--org, center);
}
.lf-bento__card--5 .lf-pill:nth-child(odd)  { --org: left center; }
.lf-bento__card--5 .lf-pill:nth-child(even) { --org: right center; }
.lf-bento__card--5 .lf-pill:nth-child(1) { --w: clamp(0, calc((var(--e, 1) - .26) / .30), 1); }
.lf-bento__card--5 .lf-pill:nth-child(2) { --w: clamp(0, calc((var(--e, 1) - .40) / .30), 1); }
.lf-bento__card--5 .lf-pill:nth-child(3) { --w: clamp(0, calc((var(--e, 1) - .54) / .30), 1); }
.lf-bento__card--5 .lf-pill:nth-child(4) { --w: clamp(0, calc((var(--e, 1) - .68) / .30), 1); }

/* ============================================================
   SEZIONE 05 — elenco servizi: da lista piatta a elenco costruito.
   Ogni voce entra da sinistra sfalsata, il segno diventa un pallino che
   si accende con un alone, e la riga di separazione si disegna sotto.
   Guidato da --e, quindi reversibile risalendo.
   ============================================================ */
.section--photo .amenities li {
  position: relative;
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1.05rem 0; border-bottom: 0;          /* la riga la disegniamo noi */
  opacity: var(--w, 1);
  transform: translateX(calc((1 - var(--w, 1)) * -26px));
}
/* riga che si disegna da sinistra */
.section--photo .amenities li::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: rgba(245, 241, 234, .18);
  transform: scaleX(var(--w, 1)); transform-origin: left center;
}
/* il segno: da diamante statico a pallino che si accende con alone */
.section--photo .amenities li span {
  position: relative; flex: 0 0 auto;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: #e0a06f; font-size: 0; line-height: 0;
  transform: scale(var(--w, 1));
  box-shadow: 0 0 0 calc(var(--w, 1) * 5px) rgba(224, 160, 111, .14);
}
/* sfalsamento: una voce dopo l'altra */
.section--photo .amenities li:nth-child(1) { --w: clamp(0, calc((var(--e, 1) - .05) / .26), 1); }
.section--photo .amenities li:nth-child(2) { --w: clamp(0, calc((var(--e, 1) - .15) / .26), 1); }
.section--photo .amenities li:nth-child(3) { --w: clamp(0, calc((var(--e, 1) - .25) / .26), 1); }
.section--photo .amenities li:nth-child(4) { --w: clamp(0, calc((var(--e, 1) - .35) / .26), 1); }
.section--photo .amenities li:nth-child(5) { --w: clamp(0, calc((var(--e, 1) - .45) / .26), 1); }
.section--photo .amenities li:nth-child(6) { --w: clamp(0, calc((var(--e, 1) - .55) / .26), 1); }

@media (prefers-reduced-motion: reduce) {
  .section--photo .amenities li { opacity: 1; transform: none; }
  .section--photo .amenities li::after { transform: none; }
  .section--photo .amenities li span { transform: none; box-shadow: 0 0 0 5px rgba(224,160,111,.14); }
}

/* ============================================================
   SEZIONE 05 — marcatori dell'elenco: non un pallino, ma un anello che si
   disegna ruotando con un nucleo pieno che si accende dentro.
   Allineamento: griglia a due colonne con allineamento CENTRATO sulla riga,
   cosi' il marcatore sta esattamente sulla mezzeria del testo (con
   align-items:baseline e uno span a font-size 0 finiva disallineato).
   ============================================================ */
.section--photo .amenities li {
  display: grid; grid-template-columns: 1.25rem 1fr;
  align-items: center; gap: .95rem;
}
.section--photo .amenities li span {
  width: 1.25rem; height: 1.25rem; position: relative;
  background: none; border-radius: 0; box-shadow: none;
  transform: none; font-size: 0; line-height: 0;
}
/* anello esterno: si disegna ruotando */
.section--photo .amenities li span::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(224, 160, 111, .62);
  border-top-color: rgba(224, 160, 111, .95);
  transform: rotate(calc((1 - var(--w, 1)) * -200deg)) scale(calc(.3 + .7 * var(--w, 1)));
  opacity: var(--w, 1);
}
/* nucleo: si accende dentro, con un filo di ritardo */
.section--photo .amenities li span::after {
  --c: clamp(0, calc((var(--w, 1) - .45) / .55), 1);
  content: ''; position: absolute; inset: 34%; border-radius: 50%;
  background: #e0a06f;
  transform: scale(var(--c));
  box-shadow: 0 0 0 calc(var(--c) * 4px) rgba(224, 160, 111, .16);
}
@media (prefers-reduced-motion: reduce) {
  .section--photo .amenities li span::before { transform: none; opacity: 1; }
  .section--photo .amenities li span::after { transform: none; }
}

/* ============================================================
   LISTINO — schede tipologia in "liquid glass", riprese dal componente
   di riferimento: foto a tutto riquadro, contenuto sollevato in 3D,
   inclinazione che segue il mouse, tasto e pastiglia in vetro smerigliato.
   La rotazione arriva dal JS come --rx/--ry; qui la transizione breve fa
   da molla (il componente originale usa uno spring di framer-motion).
   ============================================================ */
.tipo-grid {
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, 1fr);   /* 4 tipologie: una riga sola */
  gap: clamp(1rem, 1.8vw, 1.5rem);
}
.tipo-card {
  --rx: 0deg; --ry: 0deg;
  position: relative; display: block;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  border: 1px solid rgba(38, 34, 28, .16);
  background: transparent;
  box-shadow: 0 26px 50px -26px rgba(20, 16, 10, .45);
  transform-style: preserve-3d;
  /* prospettiva per-card: il punto di fuga e' il centro di QUESTA card */
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .3s var(--ease);
}
.tipo-card:hover { box-shadow: 0 40px 70px -28px rgba(20, 16, 10, .55); }
.tipo-card:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }
.tipo-card__inner {
  position: absolute; inset: 1rem;
  display: flex; flex-direction: column; justify-content: space-between;
  border-radius: 12px; overflow: hidden;
  transform: translateZ(38px); transform-style: preserve-3d;
  box-shadow: 0 10px 24px -12px rgba(20, 16, 10, .5);
}
.tipo-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tipo-card__velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,11,8,.42) 0%, rgba(14,11,8,.14) 34%, rgba(14,11,8,.78) 100%);
}
.tipo-card__top, .tipo-card__bottom { position: relative; padding: 1rem 1.05rem; }
.tipo-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.tipo-card__testa { display: grid; gap: .18rem; transform: translateZ(30px); }
.tipo-card__name {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.25rem, 1.5vw, 1.45rem); line-height: 1.1; color: #fff;
  text-shadow: 0 1px 16px rgba(0,0,0,.55);
}
.tipo-card__sub {
  font-size: .84rem; line-height: 1.35; color: rgba(255,255,255,.84);
  text-shadow: 0 1px 14px rgba(0,0,0,.55);
}
.tipo-card__freccia {
  flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border-radius: 100px; color: #fff;
  background: rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
  transform: translateZ(45px);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.tipo-card__freccia svg { width: 1.1rem; height: 1.1rem; }
.tipo-card:hover .tipo-card__freccia { background: rgba(255,255,255,.3); transform: translateZ(45px) rotate(8deg); }
.tipo-card__bottom { display: grid; gap: .6rem; transform: translateZ(28px); }
.tipo-card__price {
  font-weight: 800; font-size: 1.1rem; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 16px rgba(0,0,0,.55);
}
.tipo-card__price i { font-style: normal; font-weight: 500; font-size: .82rem; color: rgba(255,255,255,.78); margin-right: .3rem; }
.tipo-card__btn {
  display: block; width: 100%; text-align: center;
  padding: .78rem 1rem; border-radius: 10px;
  background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  color: #fff; font-weight: 600; font-size: .92rem;
  transition: background .25s var(--ease);
}
.tipo-card:hover .tipo-card__btn { background: rgba(255,255,255,.24); }
.listino__cta { text-align: center; margin-top: clamp(1.8rem, 3.2vw, 2.6rem); }
@media (max-width: 1100px) { .tipo-grid { grid-template-columns: repeat(2, 1fr); } }   /* 2x2 */
@media (max-width: 560px) { .tipo-grid { grid-template-columns: 1fr; } .tipo-card { aspect-ratio: 3 / 4; } }
/* senza mouse il 3D non serve e creava solo guai: pannello ingrandito che
   sbordava dalla card e si sovrapponeva alla sezione sotto */
@media (hover: none) {
  .tipo-card { transform: none; transform-style: flat; }
  .tipo-card__inner { transform: none; inset: 0; box-shadow: none; }
  .tipo-card__testa, .tipo-card__freccia, .tipo-card__bottom { transform: none; }
  .tipo-card:hover .tipo-card__freccia { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .tipo-card { transform: none; transition: none; } }

/* ============================================================
   SCHEDA PROGETTO — le sei informazioni al posto della tabella,
   nello stesso linguaggio della sezione 01: card hairline,
   illustrazione che si disegna con lo scroll (--e dal JS).
   ============================================================ */
.lf-facts { margin-top: clamp(2.2rem, 4vw, 3.2rem); }
.lf-fact { grid-column: span 12; display: flex; flex-direction: column; }
@media (min-width: 640px)  { .lf-fact { grid-column: span 6; } }
@media (min-width: 1024px) { .lf-fact { grid-column: span 4; } }
.lf-fact .lf-bento__fig {
  margin-bottom: 1.1rem; height: 148px;
  display: flex; align-items: center; justify-content: center;
}
.lf-fact .lf-bento__fig svg { width: auto; height: 100%; max-width: 100%; }
/* sovratitolo delle schede: era troppo tenue per leggersi bene, ora e'
   piu' pesante, un filo piu' grande e su un tono piu' carico */
.lf-fact__k { font-size: .76rem; text-transform: uppercase; letter-spacing: .14em;
  color: rgba(38, 34, 28, .9); font-weight: 800; margin-bottom: .45rem; }
.lf-fact__v { font-family: inherit; font-size: clamp(1.12rem, 2.1vw, 1.4rem); font-weight: 800;
  color: var(--bone); line-height: 1.2; }

/* --- 1. RESIDENZE: la quota, i due corpi che si tracciano, le finestre che si accendono --- */
.lf-fact--1 {
  --g: clamp(0, calc(var(--e, 1) / .16), 1);
  --a: clamp(0, calc((var(--e, 1) - .10) / .30), 1);
  --b: clamp(0, calc((var(--e, 1) - .28) / .26), 1);
  --w: clamp(0, calc((var(--e, 1) - .44) / .52), 1);
}
.lf-f1-ground { stroke-dasharray: 184; stroke-dashoffset: calc((1 - var(--g)) * 184); }
.lf-f1-a { stroke-dasharray: 214; stroke-dashoffset: calc((1 - var(--a)) * 214); }
.lf-f1-b { stroke-dasharray: 160; stroke-dashoffset: calc((1 - var(--b)) * 160); }
.lf-f-win {
  --t: clamp(0, calc((var(--w) - var(--n) * .075) / .3), 1);
  transform-box: fill-box; transform-origin: center;
  transform: scale(var(--t)); opacity: var(--t);
}

/* --- 2. PREZZI: l'asse, poi la forbice che si apre e i due estremi che scattano --- */
.lf-fact--2 {
  --ax:  clamp(0, calc(var(--e, 1) / .20), 1);
  --bar: clamp(0, calc((var(--e, 1) - .16) / .44), 1);
  --ar:  clamp(0, calc((var(--e, 1) - .28) / .50), 1);
  --d1:  clamp(0, calc((var(--e, 1) - .46) / .20), 1);
  --d2:  clamp(0, calc((var(--e, 1) - .62) / .20), 1);
}
.lf-f2-axis { stroke-dasharray: 172; stroke-dashoffset: calc((1 - var(--ax)) * 172); }
.lf-f2-ticks { opacity: var(--ax); }
.lf-f2-bar { stroke-dasharray: 156; stroke-dashoffset: calc((1 - var(--bar)) * 156); }
.lf-f2-drop { opacity: calc(var(--d1) * .9); }
.lf-f2-dot { transform-box: fill-box; transform-origin: center; }
.lf-f2-dot--a { transform: scale(var(--d1)); }
.lf-f2-dot--b { transform: scale(var(--d2)); }

/* --- 3. CLASSE ENERGETICA: la scala entra da sinistra, il gradino A3/4 si stacca --- */
.lf-fact--3 {
  --s: clamp(0, calc((var(--e, 1) - .04) / .60), 1);
  --f: clamp(0, calc((var(--e, 1) - .60) / .30), 1);
}
.lf-f3-step {
  --t: clamp(0, calc((var(--s) - var(--n) * .13) / .34), 1);
  clip-path: inset(0 calc((1 - var(--t)) * 100%) 0 0);
}
.lf-f3-step--on { transform-box: fill-box; transform-origin: left center;
  transform: translateX(calc((1 - var(--f)) * -10px)); }
.lf-f3-flag { transform-box: fill-box; transform-origin: center; transform: scale(var(--f)); }

/* --- 4. CONSEGNA: l'arco spazza fino a meta' anno con la lancetta che lo segue --- */
.lf-fact--4 {
  --ti: clamp(0, calc(var(--e, 1) / .22), 1);
  --co: clamp(0, calc((var(--e, 1) - .08) / .20), 1);
  --ar: clamp(0, calc((var(--e, 1) - .16) / .62), 1);
}
.lf-f4-ticks { opacity: var(--ti); }
.lf-f4-arc { stroke-dasharray: 276.5; stroke-dashoffset: calc(276.5 - var(--ar) * 138.2); }
.lf-f4-hand { transform-box: view-box; transform-origin: 62px 62px; transform: rotate(calc(var(--ar) * 180deg)); }
.lf-f4-core { transform-box: fill-box; transform-origin: center; transform: scale(var(--co)); }

/* --- 5. AUTORIMESSA: la quota di terra, la rampa che scende, i box che si aprono.
   La stessa icona sta anche nella meta' bassa della card 1 (sezione 01). --- */
.lf-fact--5, .lf-bento__box {
  --g: clamp(0, calc(var(--e, 1) / .18), 1);
  --r: clamp(0, calc((var(--e, 1) - .14) / .24), 1);
  --b: clamp(0, calc((var(--e, 1) - .30) / .42), 1);
  --c: clamp(0, calc((var(--e, 1) - .64) / .32), 1);
}
.lf-f5-ground { stroke-dasharray: 184; stroke-dashoffset: calc((1 - var(--g)) * 184); }
.lf-f5-ramp { opacity: var(--r); transform-box: fill-box; transform-origin: top right;
  transform: scale(calc(.35 + .65 * var(--r))); }
.lf-f5-box {
  --t: clamp(0, calc((var(--b) - var(--n) * .18) / .50), 1);
  stroke-dasharray: 156; stroke-dashoffset: calc((1 - var(--t)) * 156);
}
.lf-f5-car { transform-box: view-box; transform-origin: 40px 86px;
  transform: translateX(calc((1 - var(--c)) * -46px)); opacity: var(--c); }

/* --- 6. INDIRIZZO: le due strade si tracciano, il segnaposto cade, l'eco si allarga --- */
.lf-fact--6 {
  --s1: clamp(0, calc(var(--e, 1) / .22), 1);
  --s2: clamp(0, calc((var(--e, 1) - .12) / .22), 1);
  --p:  clamp(0, calc((var(--e, 1) - .32) / .30), 1);
  --k1: clamp(0, calc((var(--e, 1) - .56) / .34), 1);
  --k2: clamp(0, calc((var(--e, 1) - .66) / .34), 1);
}
.lf-f6-st1 { stroke-dasharray: 124; stroke-dashoffset: calc((1 - var(--s1)) * 124); }
.lf-f6-st2 { stroke-dasharray: 98;  stroke-dashoffset: calc((1 - var(--s2)) * 98); }
.lf-f6-pin { transform-box: view-box; transform-origin: 70px 88px;
  transform: translateY(calc((1 - var(--p)) * -34px)) scale(calc(.7 + .3 * var(--p)));
  opacity: var(--p); }
.lf-f6-echo { transform-box: view-box; transform-origin: 70px 88px; }
.lf-f6-echo--1 { transform: scale(calc(.28 + .72 * var(--k1))); opacity: calc(.14 + 1.4 * var(--k1) * (1 - var(--k1))); }
.lf-f6-echo--2 { transform: scale(calc(.28 + .72 * var(--k2))); opacity: calc(.10 + 1.1 * var(--k2) * (1 - var(--k2))); }

@media (prefers-reduced-motion: reduce) {
  .lf-f1-ground, .lf-f1-a, .lf-f1-b, .lf-f2-axis, .lf-f2-bar,
  .lf-f5-ground, .lf-f5-box, .lf-f6-st1, .lf-f6-st2 { stroke-dashoffset: 0; }
  .lf-f3-step { clip-path: none; }
  .lf-f4-arc { stroke-dashoffset: calc(276.5 - 138.2); }
  .lf-f-win, .lf-f2-dot, .lf-f3-step--on, .lf-f3-flag, .lf-f4-core,
  .lf-f5-car, .lf-f6-pin, .lf-f6-echo { transform: none; opacity: 1; }
  .lf-f4-hand { transform: rotate(180deg); }
}

/* ============================================================
   GALLERIA 04 — "layout grid" (solo da PC).
   La foto cliccata si stacca dalla griglia e si porta al centro sopra
   una velatura scura, con la didascalia che sale. Transizione condivisa
   in FLIP: il riquadro finale mantiene le proporzioni della miniatura,
   quindi la scala e' uniforme e l'immagine non si deforma mai.
   ============================================================ */
@media (min-width: 881px) {
  #interni .tile { cursor: zoom-in; }
  /* la miniatura resta al suo posto nella griglia ma sparisce: al suo
     posto si muove il clone, come fa layoutId di framer-motion */
  #interni .tile.is-lifted { opacity: 0; pointer-events: none; }
  /* la deformazione cinetica dello scroll litigherebbe con il FLIP */
  #interni .tile.is-lifted, #interni .gallery .tile.is-lifted { --skew: 0deg; }
}

.lg-velo {
  position: fixed; inset: 0; z-index: 120;   /* sopra la barra di navigazione (100) */
  background: #0e0c0a;
  opacity: 0; transition: opacity .38s var(--ease);
  cursor: zoom-out;
}
.lg-velo.is-on { opacity: .55; }

.lg-card {
  position: fixed; z-index: 121; margin: 0;
  transform-origin: 0 0;
  transition: transform .46s cubic-bezier(.22, 1, .36, 1);
  border-radius: 6px; overflow: hidden;
  background: var(--bone);
  box-shadow: 0 40px 90px rgba(14, 12, 10, .45);
  cursor: zoom-out;
  will-change: transform;
}
.lg-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg-card figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 2.6rem 1.8rem 1.4rem;
  background: linear-gradient(180deg, transparent, rgba(14, 12, 10, .82));
  color: #f4efe6; font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: .01em;
  opacity: 0; transform: translateY(28px);
  transition: opacity .3s .16s var(--ease), transform .38s .16s cubic-bezier(.22, 1, .36, 1);
}
.lg-card.is-on figcaption { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lg-velo, .lg-card, .lg-card figcaption { transition: none; }
}

/* ============================================================
   SEZIONE 04 — impaginazione "layout grid" (solo da PC).
   Tre colonne, card alternate 2+1 / 1+2 come nel componente di
   riferimento: righe di altezza uniforme, angoli smussati, nessuno
   sfalsamento verticale e nessuna inclinazione cinetica (litigherebbe
   con la transizione FLIP dell'apertura). Sotto gli 880px resta tutto
   com'era: foto orizzontali una per riga.
   ============================================================ */
@media (min-width: 881px) {
  #interni .gallery,
  #interni .gallery--wide {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: clamp(220px, 23vw, 340px);
    gap: clamp(.9rem, 1.2vw, 1.1rem);
    align-items: stretch;
    margin-top: 1.2rem;
  }
  #interni .tile,
  #interni .gallery .tile,
  #interni .gallery--wide .tile {
    aspect-ratio: auto;          /* l'altezza la decide la riga, non le proporzioni */
    /* i tile sono <button>: senza width esplicita non si allargano nella
       cella e restano larghi quanto l'immagine intrinseca */
    width: 100%; height: 100%;
    border-radius: 12px;
    transform: none;             /* niente --off, niente --skew */
    --off: 0px;
    --skew: 0deg;
  }
  /* il ritmo del componente: larga + stretta, poi stretta + larga */
  #interni .gallery .tile:nth-child(4n + 1),
  #interni .gallery--wide .tile:nth-child(4n + 1) { grid-column: span 2; }
  #interni .gallery .tile:nth-child(4n + 2),
  #interni .gallery--wide .tile:nth-child(4n + 2) { grid-column: span 1; }
  #interni .gallery .tile:nth-child(4n + 3),
  #interni .gallery--wide .tile:nth-child(4n + 3) { grid-column: span 1; }
  #interni .gallery .tile:nth-child(4n + 4),
  #interni .gallery--wide .tile:nth-child(4n + 4) { grid-column: span 2; }

  /* il componente originale usa object-top, ma sui render d'interni
     inquadrerebbe i soffitti: qui il centro e' l'unica scelta sensata */
  #interni .tile img { object-position: center; }
  /* il clone che si apre riprende lo stesso raggio delle card */
  .lg-card { border-radius: 12px; }
}

/* ============================================================
   PAGINA "GLI SPAZI" — i sei servizi comuni: tre per riga da desktop,
   due da tablet, uno da telefono (qui NON si nascondono: sono il
   contenuto principale della pagina, al contrario che nella home).
   ============================================================ */
@media (min-width: 1024px) {
  .lf-bento--servizi .lf-bento__card--s { grid-column: span 4; }
}
@media (max-width: 639px) {
  .lf-bento--servizi { gap: 2.4rem 1.3rem; }
  .lf-bento--servizi .lf-bento__card--s .lf-bento__fig svg { max-width: 128px; margin-inline: auto; }
}
/* i testi sopra foto sono gia' bianchi e in bold da `.section--photo .prose p` */

/* Le corti: il render e' molto luminoso (sole sul vialetto) e nei punti piu'
   chiari il bianco scendeva a 4,04:1. Velatura piu' carica solo qui: misurato
   dopo la modifica, il pixel peggiore risale sopra 4,5:1. */
#corti { --scrim-a: .66; --scrim-b: .60; }

/* icone dei sei servizi centrate: le card qui sono larghe (tre per riga) e
   allineate a sinistra sembravano sperdute */
.lf-bento--servizi .lf-bento__card--s .lf-bento__fig { display: flex; justify-content: center; }
.lf-bento--servizi .lf-bento__card--s .lf-bento__fig svg { max-width: 132px; }

/* ============================================================
   SEZIONE 02 — riquadri come quelli della sezione 01, con il font del
   tema. L'ingresso e' quello di TRE CARTE DA GIOCO TIRATE SU UN TAVOLO:
   arrivano da fuori ruotate, planano e si posano con un filo di
   inclinazione residua, una dopo l'altra. Tutto guidato da --e, quindi
   scendendo si posano e risalendo tornano indietro.
   Solo da 881px: sotto, i riquadri non compaiono.
   ============================================================ */
@media (min-width: 881px) {
  .section--photo .manifesto {
    display: flex; align-items: flex-start;
    gap: clamp(.8rem, 1.4vw, 1.1rem);
    perspective: 1200px; perspective-origin: 50% 30%;
    margin-top: 2.4rem;
  }

  .section--photo .manifesto__item {
    --rit: 0;
    /* la mano che lancia: 0 = carta ancora in aria, 1 = posata */
    --pe: clamp(0, calc((var(--e, 1) - var(--rit)) / .34), 1);

    position: relative;
    flex: 1 1 0; min-width: 0;
    background: #FBF9F5 !important;
    border: 1px solid rgba(38, 34, 28, .12) !important;
    border-radius: 10px;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: clamp(1.4rem, 2.5vw, 2rem) !important;

    /* dritte e allineate: entrano solo con una salita e una dissolvenza,
       l'inclinazione la da' il mouse (come le schede del listino) */
    --rx: 0deg; --ry: 0deg;
    transform-style: preserve-3d;
    transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
    opacity: calc(.05 + .95 * var(--pe));
    box-shadow: 0 26px 50px -26px rgba(12, 9, 5, .55) !important;
    transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .3s var(--ease);
  }
  .section--photo .manifesto__item:nth-child(2) { --rit: .06; }
  .section--photo .manifesto__item:nth-child(3) { --rit: .12; }
  .section--photo .manifesto__item:hover {
    box-shadow: 0 40px 70px -28px rgba(12, 9, 5, .62) !important;
  }

  /* font del tema, non piu' il corsivo a mano */
  .section--photo .manifesto__item .manifesto__k {
    font-family: var(--font-display);
    color: var(--bone) !important;
    font-weight: 800 !important;
    font-size: clamp(1.3rem, 1.6vw, 1.5rem);
    line-height: 1.16;
    letter-spacing: -.01em;
    margin-bottom: .5rem;
    text-shadow: none !important;
  }
  .section--photo .manifesto__item p {
    font-family: var(--font-body);
    color: rgba(38, 34, 28, .72) !important;
    font-weight: 400 !important;
    font-size: clamp(1rem, 1.1vw, 1.08rem);
    line-height: 1.55;
    text-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section--photo .manifesto__item { transform: none; opacity: 1; }
}

/* ============================================================
   SEZIONE 01 — copy piu' grande, card e icone animate con lo scroll.
   Tutto guidato da --e (posizione nel viewport, quindi REVERSIBILE:
   scendendo entra, risalendo esce), come nel resto del sito.
   ============================================================ */
.lf-bento__title { font-size: clamp(1.35rem, 1.6vw, 1.55rem); }
.lf-bento__text  { font-size: clamp(1.02rem, 1.15vw, 1.12rem); }
.lf-bento__card--s .lf-bento__title { font-size: clamp(1.2rem, 1.35vw, 1.34rem); }
.lf-bento__card--s .lf-bento__text  { font-size: clamp(.98rem, 1.05vw, 1.05rem); }

/* --- la card stessa: entra dal basso, sfalsata --- */
.lf-bento__card {
  --rit: 0;
  --ce: clamp(0, calc((var(--e, 1) - var(--rit)) / .34), 1);
  transform: translateY(calc((1 - var(--ce)) * 30px));
  opacity: calc(.22 + .78 * var(--ce));
}
.lf-bento__card--2  { --rit: .05; }
.lf-bento__card--3  { --rit: .10; }
.lf-bento__card--4  { --rit: .04; }
.lf-bento__card--5  { --rit: .09; }
.lf-bento__card--s1 { --rit: 0;   }
.lf-bento__card--s2 { --rit: .05; }
.lf-bento__card--s3 { --rit: .10; }
.lf-bento__card--s4 { --rit: .15; }

/* --- le quattro icone servizi: una coreografia ciascuna, coerente con
   l'oggetto disegnato. Il tratto ha vector-effect non-scaling-stroke,
   quindi le dasharray sono in unita' del viewBox (120x120). --- */

/* S1 COWORKING: il tavolo si disegna, poi le persone si siedono una
   alla volta, alternando i due lati */
.lf-bento__card--s1 { --t: clamp(0, calc((var(--e,1) - .06) / .30), 1);
                      --p: clamp(0, calc((var(--e,1) - .26) / .52), 1); }
.lf-bento__card--s1 .lf-bento-icon rect {
  stroke-dasharray: 156; stroke-dashoffset: calc((1 - var(--t)) * 156);
}
.lf-bento__card--s1 .lf-bento-icon circle {
  transform-box: fill-box; transform-origin: center;
  --n: 0;
  --w: clamp(0, calc((var(--p) - var(--n) * .17) / .34), 1);
  transform: scale(var(--w)); opacity: var(--w);
}
.lf-bento__card--s1 .lf-bento-icon circle:nth-of-type(2) { --n: 1; }
.lf-bento__card--s1 .lf-bento-icon circle:nth-of-type(3) { --n: 2; }
.lf-bento__card--s1 .lf-bento-icon circle:nth-of-type(4) { --n: 3; }

/* S2 PALESTRA: prima il bilanciere si disegna dal centro verso i lati,
   poi entrano i dischi (interni, poi esterni) e l'attrezzo fa una
   ripetizione: sale di poco e torna */
.lf-bento__card--s2 { --b: clamp(0, calc((var(--e,1) - .05) / .26), 1);
                      --d1: clamp(0, calc((var(--e,1) - .26) / .20), 1);
                      --d2: clamp(0, calc((var(--e,1) - .38) / .20), 1);
                      --r: clamp(0, calc((var(--e,1) - .52) / .40), 1); }
.lf-bento__card--s2 .lf-bento-icon g {
  transform-box: view-box; transform-origin: 60px 60px;
  /* la ripetizione: un su-e-giu' che si esaurisce (seno approssimato) */
  transform: rotate(-6deg) translateY(calc(var(--r) * (1 - var(--r)) * -46px));
}
.lf-bento__card--s2 .lf-bento-icon path:nth-of-type(1) {
  stroke-dasharray: 48; stroke-dashoffset: calc((1 - var(--b)) * 48);
}
.lf-bento__card--s2 .lf-bento-icon path:nth-of-type(2),
.lf-bento__card--s2 .lf-bento-icon path:nth-of-type(3) {
  stroke-dasharray: 30; stroke-dashoffset: calc((1 - var(--d1)) * 30);
}
.lf-bento__card--s2 .lf-bento-icon path:nth-of-type(4),
.lf-bento__card--s2 .lf-bento-icon path:nth-of-type(5) {
  stroke-dasharray: 42; stroke-dashoffset: calc((1 - var(--d2)) * 42);
}

/* S3 SPAZI VERDI: i due fusti crescono dal basso, poi la chioma si apre
   dalla base e ondeggia appena, come se prendesse aria */
.lf-bento__card--s3 { --f: clamp(0, calc((var(--e,1) - .06) / .28), 1);
                      --c: clamp(0, calc((var(--e,1) - .24) / .40), 1);
                      --o: clamp(0, calc((var(--e,1) - .54) / .42), 1); }
.lf-bento__card--s3 .lf-bento-icon path:nth-of-type(2),
.lf-bento__card--s3 .lf-bento-icon path:nth-of-type(3) {
  stroke-dasharray: 31; stroke-dashoffset: calc((1 - var(--f)) * 31);
}
.lf-bento__card--s3 .lf-bento-icon .lf-soft-fill-stroke {
  transform-box: view-box; transform-origin: 59px 71px;
  transform: rotate(calc(var(--o) * (1 - var(--o)) * 14deg))
             scale(calc(.3 + .7 * var(--c)));
  opacity: var(--c);
}

/* S4 LAVANDERIA: si presenta la macchina, poi il pannello e la manopola,
   infine il cestello compare e fa un giro su se stesso */
.lf-bento__card--s4 { --ma: clamp(0, calc((var(--e,1) - .04) / .28), 1);
                      --pa: clamp(0, calc((var(--e,1) - .24) / .20), 1);
                      --mn: clamp(0, calc((var(--e,1) - .36) / .18), 1);
                      --ce: clamp(0, calc((var(--e,1) - .46) / .50), 1); }
.lf-bento__card--s4 .lf-bento-icon rect {
  transform-box: view-box; transform-origin: 60px 102px;
  transform: scale(calc(.72 + .28 * var(--ma)));
  opacity: var(--ma);
}
.lf-bento__card--s4 .lf-bento-icon path:nth-of-type(1) {
  transform-box: view-box; transform-origin: 26px 42px;
  transform: scaleX(var(--pa)); opacity: var(--pa);
}
.lf-bento__card--s4 .lf-bento-icon path:nth-of-type(2) {
  transform-box: view-box; transform-origin: 38px 30px;
  transform: scaleX(var(--mn)); opacity: var(--mn);
}
.lf-bento__card--s4 .lf-bento-icon circle:nth-of-type(1) {
  transform-box: fill-box; transform-origin: center;
  transform: scale(var(--mn)); opacity: var(--mn);
}
/* cestello e vetro: entrano e girano, il vetro piu' in fretta */
.lf-bento__card--s4 .lf-bento-icon circle:nth-of-type(2) {
  transform-box: view-box; transform-origin: 60px 72px;
  transform: scale(calc(.5 + .5 * var(--ce))) rotate(calc(var(--ce) * 200deg));
  opacity: var(--ce);
}
.lf-bento__card--s4 .lf-bento-icon circle:nth-of-type(3) {
  transform-box: view-box; transform-origin: 60px 72px;
  transform: scale(calc(.3 + .7 * var(--ce))) rotate(calc(var(--ce) * -320deg));
  opacity: var(--ce);
}

@media (prefers-reduced-motion: reduce) {
  .lf-bento__card { transform: none; opacity: 1; }
  .lf-bento__card--s1 .lf-bento-icon rect,
  .lf-bento__card--s2 .lf-bento-icon path,
  .lf-bento__card--s3 .lf-bento-icon path,
  .lf-bento__card--s4 .lf-bento-icon circle,
  .lf-bento__card--s4 .lf-bento-icon path,
  .lf-bento__card--s6 .lf-bento-icon rect,
  .lf-bento__card--s6 .lf-bento-icon path { transform: none; opacity: 1; }
  .lf-bento__card--s1 .lf-bento-icon circle,
  .lf-bento__card--s2 .lf-bento-icon g,
  .lf-bento__card--s3 .lf-bento-icon .lf-soft-fill-stroke,
  .lf-bento__card--s4 .lf-bento-icon,
  .lf-bento__card--s4 .lf-bento-icon circle { transform: none; opacity: 1; }
}

/* ============================================================
   APERTURA (tra hero e sezione 01) — il soggiorno migliore si apre.
   Ripresa del componente di riferimento in CSS+JS nativi: niente React,
   framer-motion o Lenis. Lo scroll guida tre avanzamenti che il JS
   scrive come variabili, SMORZATI frame per frame (e' da li' che viene
   la fluidita': il valore insegue lo scroll invece di saltarci sopra):
     --c  apertura del riquadro
     --z  rientro dello zoom
     --o  dissolvenza finale
   Lo zoom sta su una transform (compositore) e non piu' su
   background-size, che a ogni frame costringeva a ridipingere.
   Essendo legati alla posizione, salendo si riavvolge tutto.
   ============================================================ */
.lf-apri {
  position: relative; width: 100%;
  min-height: calc(1400px + 100vh);
  padding-bottom: 12rem;
  background: var(--ink);
  --c: 0; --z: 0; --o: 0;
}
.lf-apri__scena {
  position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden;
  clip-path: polygon(
    calc(25% - var(--c) * 25%) calc(25% - var(--c) * 25%),
    calc(75% + var(--c) * 25%) calc(25% - var(--c) * 25%),
    calc(75% + var(--c) * 25%) calc(75% + var(--c) * 25%),
    calc(25% - var(--c) * 25%) calc(75% + var(--c) * 25%));
  opacity: calc(1 - var(--o));
}
.lf-apri__zoom {
  position: absolute; inset: 0;
  background-image: var(--bg);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transform: scale(calc(1.7 - var(--z) * .7));
  transform-origin: center;
  will-change: transform;
}
.lf-apri__flusso {
  position: relative; z-index: 1;
  max-width: 64rem; margin-inline: auto;
  padding: 200px var(--pad) 0;
}
.lf-apri__ph {
  display: block; border-radius: 4px;
  box-shadow: 0 30px 60px -24px rgba(10, 8, 5, .6);
  --t: 0; --da: 0px; --a: 0px;
  transform: translate3d(0, calc(var(--da) + (var(--a) - var(--da)) * var(--t)), 0)
             scale(calc(1 - clamp(0, calc((var(--t) - .75) / .25), 1) * .15));
  opacity: calc(1 - clamp(0, calc((var(--t) - .75) / .25), 1));
  will-change: transform;
}
.lf-apri__ph--1 { width: 33%;                       --da: -200px; --a:  200px; }
.lf-apri__ph--2 { width: 66%; margin-inline: auto;  --da:  200px; --a: -250px; }
.lf-apri__ph--3 { width: 33%; margin-left: auto;    --da: -200px; --a:  200px; }
.lf-apri__ph--4 { width: 42%; margin-left: 6rem;    --da:    0px; --a: -500px; }
.lf-apri__chiusura {
  position: absolute; left: 0; right: 0; bottom: 0; height: 24rem; z-index: 2;
  background: linear-gradient(180deg, rgba(236, 229, 217, 0), var(--ink-2));
  pointer-events: none;
}

/* MOBILE: le foto restano. Su 390px devono essere piu' larghe, alternate
   e con aria tra loro, e con una corsa di parallasse ridotta: cosi' non
   si accavallano e si leggono una per volta. */
@media (max-width: 880px) {
  .lf-apri { min-height: calc(760px + 100svh); padding-bottom: 5rem; }
  .lf-apri__scena { height: 100svh; }
  .lf-apri__flusso { padding-top: 130px; }
  /* aria sufficiente perche' nemmeno a fine corsa due foto si tocchino:
     lo scostamento massimo tra due vicine e' ~110px, il margine e' 128px */
  .lf-apri__ph { display: block; margin-bottom: 8rem; border-radius: 3px; }
  .lf-apri__ph--1 { width: 76%; margin-left: 0;      --da: -50px; --a:  50px; }
  .lf-apri__ph--2 { width: 88%; margin-inline: auto; --da:  50px; --a: -60px; }
  .lf-apri__ph--3 { width: 72%; margin-left: auto;   --da: -50px; --a:  50px; }
  .lf-apri__ph--4 { width: 84%; margin-left: 0;      --da:  30px; --a: -70px; }
  .lf-apri__chiusura { height: 14rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-apri { min-height: 100vh; padding-bottom: 0; }
  .lf-apri__scena { clip-path: none; opacity: 1; }
  .lf-apri__zoom { transform: none; }
  .lf-apri__ph { transform: none; opacity: 1; }
}

/* ============================================================
   SEZIONE 01 — copy piu' grande, card e icone animate con lo scroll.
   Tutto guidato da --e (posizione nel viewport, quindi REVERSIBILE:
   scendendo entra, risalendo esce), come nel resto del sito.
   ============================================================ */
.lf-bento__title { font-size: clamp(1.35rem, 1.6vw, 1.55rem); }
.lf-bento__text  { font-size: clamp(1.02rem, 1.15vw, 1.12rem); }
.lf-bento__card--s .lf-bento__title { font-size: clamp(1.2rem, 1.35vw, 1.34rem); }
.lf-bento__card--s .lf-bento__text  { font-size: clamp(.98rem, 1.05vw, 1.05rem); }

/* --- la card stessa: entra dal basso, sfalsata --- */
.lf-bento__card {
  --rit: 0;
  --ce: clamp(0, calc((var(--e, 1) - var(--rit)) / .34), 1);
  transform: translateY(calc((1 - var(--ce)) * 30px));
  opacity: calc(.22 + .78 * var(--ce));
}
.lf-bento__card--2  { --rit: .05; }
.lf-bento__card--3  { --rit: .10; }
.lf-bento__card--4  { --rit: .04; }
.lf-bento__card--5  { --rit: .09; }
.lf-bento__card--s1 { --rit: 0;   }
.lf-bento__card--s2 { --rit: .05; }
.lf-bento__card--s3 { --rit: .10; }
.lf-bento__card--s4 { --rit: .15; }

/* --- le quattro icone servizi: una coreografia ciascuna, coerente con
   l'oggetto disegnato. Il tratto ha vector-effect non-scaling-stroke,
   quindi le dasharray sono in unita' del viewBox (120x120). --- */

/* S1 COWORKING: il tavolo si disegna, poi le persone si siedono una
   alla volta, alternando i due lati */
.lf-bento__card--s1 { --t: clamp(0, calc((var(--e,1) - .06) / .30), 1);
                      --p: clamp(0, calc((var(--e,1) - .26) / .52), 1); }
.lf-bento__card--s1 .lf-bento-icon rect {
  stroke-dasharray: 156; stroke-dashoffset: calc((1 - var(--t)) * 156);
}
.lf-bento__card--s1 .lf-bento-icon circle {
  transform-box: fill-box; transform-origin: center;
  --n: 0;
  --w: clamp(0, calc((var(--p) - var(--n) * .17) / .34), 1);
  transform: scale(var(--w)); opacity: var(--w);
}
.lf-bento__card--s1 .lf-bento-icon circle:nth-of-type(2) { --n: 1; }
.lf-bento__card--s1 .lf-bento-icon circle:nth-of-type(3) { --n: 2; }
.lf-bento__card--s1 .lf-bento-icon circle:nth-of-type(4) { --n: 3; }

/* S2 PALESTRA: prima il bilanciere si disegna dal centro verso i lati,
   poi entrano i dischi (interni, poi esterni) e l'attrezzo fa una
   ripetizione: sale di poco e torna */
.lf-bento__card--s2 { --b: clamp(0, calc((var(--e,1) - .05) / .26), 1);
                      --d1: clamp(0, calc((var(--e,1) - .26) / .20), 1);
                      --d2: clamp(0, calc((var(--e,1) - .38) / .20), 1);
                      --r: clamp(0, calc((var(--e,1) - .52) / .40), 1); }
.lf-bento__card--s2 .lf-bento-icon g {
  transform-box: view-box; transform-origin: 60px 60px;
  /* la ripetizione: un su-e-giu' che si esaurisce (seno approssimato) */
  transform: rotate(-6deg) translateY(calc(var(--r) * (1 - var(--r)) * -46px));
}
.lf-bento__card--s2 .lf-bento-icon path:nth-of-type(1) {
  stroke-dasharray: 48; stroke-dashoffset: calc((1 - var(--b)) * 48);
}
.lf-bento__card--s2 .lf-bento-icon path:nth-of-type(2),
.lf-bento__card--s2 .lf-bento-icon path:nth-of-type(3) {
  stroke-dasharray: 30; stroke-dashoffset: calc((1 - var(--d1)) * 30);
}
.lf-bento__card--s2 .lf-bento-icon path:nth-of-type(4),
.lf-bento__card--s2 .lf-bento-icon path:nth-of-type(5) {
  stroke-dasharray: 42; stroke-dashoffset: calc((1 - var(--d2)) * 42);
}

/* S3 SPAZI VERDI: i due fusti crescono dal basso, poi la chioma si apre
   dalla base e ondeggia appena, come se prendesse aria */
.lf-bento__card--s3 { --f: clamp(0, calc((var(--e,1) - .06) / .28), 1);
                      --c: clamp(0, calc((var(--e,1) - .24) / .40), 1);
                      --o: clamp(0, calc((var(--e,1) - .54) / .42), 1); }
.lf-bento__card--s3 .lf-bento-icon path:nth-of-type(2),
.lf-bento__card--s3 .lf-bento-icon path:nth-of-type(3) {
  stroke-dasharray: 31; stroke-dashoffset: calc((1 - var(--f)) * 31);
}
.lf-bento__card--s3 .lf-bento-icon .lf-soft-fill-stroke {
  transform-box: view-box; transform-origin: 59px 71px;
  transform: rotate(calc(var(--o) * (1 - var(--o)) * 14deg))
             scale(calc(.3 + .7 * var(--c)));
  opacity: var(--c);
}

@media (prefers-reduced-motion: reduce) {
  .lf-bento__card { transform: none; opacity: 1; }
  .lf-bento__card--s1 .lf-bento-icon rect,
  .lf-bento__card--s2 .lf-bento-icon path,
  .lf-bento__card--s3 .lf-bento-icon path,
  .lf-bento__card--s4 .lf-bento-icon circle,
  .lf-bento__card--s4 .lf-bento-icon path { stroke-dashoffset: 0; }
  .lf-bento__card--s1 .lf-bento-icon circle,
  .lf-bento__card--s2 .lf-bento-icon g,
  .lf-bento__card--s3 .lf-bento-icon .lf-soft-fill-stroke,
  .lf-bento__card--s4 .lf-bento-icon,
  .lf-bento__card--s4 .lf-bento-icon circle { transform: none; opacity: 1; }
}


/* ============================================================
   SEZIONE 03 — SOLO DA PC: la foto del complesso si apre a tutto
   schermo, poi si divide in due meta' che si scostano: a sinistra il
   Corpo A, a destra il Corpo C, ognuno col suo testo e il suo tasto.
   Stessa tecnica dell'apertura in cima (sticky + clip-path + zoom su
   transform, valori smorzati dal JS). Sotto gli 881px non compare:
   restano i due pannelli a tutto schermo gia' fatti per il telefono.
   ============================================================ */
.lf-due { display: none; }

@media (min-width: 881px) {
  #residenze .cards { display: none; }          /* su PC la sostituisce lo split */

  .lf-due {
    display: block; position: relative;
    /* esce dal padding della sezione: la foto va da bordo a bordo */
    width: 100vw; margin-inline: calc(50% - 50vw);
    max-width: none;
    min-height: calc(1500px + 100vh);
    --c: 0; --z: 0; --s: 0;
  }
  .lf-due__scena {
    position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden;
    background: #14110d;
    clip-path: polygon(
      calc(25% - var(--c) * 25%) calc(25% - var(--c) * 25%),
      calc(75% + var(--c) * 25%) calc(25% - var(--c) * 25%),
      calc(75% + var(--c) * 25%) calc(75% + var(--c) * 25%),
      calc(25% - var(--c) * 25%) calc(75% + var(--c) * 25%));
  }
  .lf-due__zoom {
    position: absolute; inset: 0;
    transform: scale(calc(1.7 - var(--z) * .7));
    transform-origin: center;
    will-change: transform;
  }
  /* le due meta': ognuna porta una copia larga quanto tutta la scena,
     ritagliata dal proprio riquadro. Insieme ricompongono la foto; quando
     si scostano si apre la fenditura in mezzo. */
  .lf-due__meta {
    position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden;
    will-change: transform;
  }
  .lf-due__meta::before {
    content: ''; position: absolute; top: 0; height: 100%; width: 100vw;
    background-image: var(--bg);
    background-size: cover; background-position: center; background-repeat: no-repeat;
  }
  .lf-due__meta--a { left: 0;  transform: translate3d(calc(var(--s) * -14px), 0, 0); }
  .lf-due__meta--a::before { left: 0; }
  .lf-due__meta--c { right: 0; transform: translate3d(calc(var(--s) * 14px), 0, 0); }
  .lf-due__meta--c::before { right: 0; }
  /* velatura: piu' carica in basso, dove sta il testo */
  .lf-due__meta::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(178deg,
      rgba(14, 11, 8, .30) 0%, rgba(14, 11, 8, .34) 40%, rgba(14, 11, 8, .74) 78%, rgba(14, 11, 8, .88) 100%);
  }

  /* il testo sta FUORI dallo zoom, altrimenti si ingrandirebbe anche lui */
  .lf-due__ui {
    position: absolute; inset: 0; z-index: 2;
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: end;
    pointer-events: none;
  }
  .lf-due__ui::before {   /* la fenditura al centro */
    content: ''; position: absolute; top: 12%; bottom: 12%; left: 50%;
    width: 1px; transform: translateX(-.5px) scaleY(var(--s));
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.42) 18%, rgba(255,255,255,.42) 82%, transparent);
  }
  .lf-due__box {
    pointer-events: auto;
    display: flex; flex-direction: column; align-items: flex-start; gap: .7rem;
    padding: 0 clamp(2rem, 5vw, 5rem) clamp(4rem, 9vh, 7rem);
    color: #f6f1e8;
    opacity: var(--s);
    transform: translate3d(0, calc((1 - var(--s)) * 34px), 0);
  }
  .lf-due__box--a { --rit: 0; }
  .lf-due__box--c { align-items: flex-start; }
  .lf-due__k {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: .98; letter-spacing: -.02em;
    text-shadow: 0 2px 26px rgba(0,0,0,.6);
  }
  .lf-due__v {
    font-size: clamp(1rem, 1.2vw, 1.14rem); line-height: 1.5; max-width: 26rem;
    color: rgba(246, 241, 232, .9); text-shadow: 0 1px 18px rgba(0,0,0,.6);
  }
  .lf-due__btn {
    margin-top: .5rem; display: inline-block;
    padding: .8rem 1.5rem; border-radius: 100px;
    background: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
    font-weight: 600; font-size: .95rem; color: #fff;
    transition: background .25s var(--ease), transform .25s var(--ease);
  }
  .lf-due__box:hover .lf-due__btn { background: rgba(255,255,255,.22); transform: translateY(-2px); }
  .lf-due__box:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
}

@media (prefers-reduced-motion: reduce) {
  .lf-due { min-height: 100vh; }
  .lf-due__scena { clip-path: none; }
  .lf-due__zoom { transform: none; }
  .lf-due__meta { transform: none; }
  .lf-due__box { opacity: 1; transform: none; }
}

/* ============================================================
   SEZIONE 02 — le tre card prendono lo stesso stile delle schede
   tipologia: foto a tutto riquadro, contenuto sollevato, pastiglia con
   la freccia e testo su vetro. L'ingresso resta quello delle "carte da
   gioco tirate sul tavolo": la transform dello scroll sta sulla card,
   quella dell'inclinazione sul pannello interno, cosi' non si pestano.
   Le foto sono del quartiere, coerenti con quello che dice ogni card.
   ============================================================ */
@media (min-width: 881px) {
  .section--photo .manifesto__item {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 16px;
    padding: 0 !important;
    aspect-ratio: 4 / 5;
  }
  .section--photo .manifesto__inner {
    position: absolute; inset: .85rem;
    display: flex; flex-direction: column; justify-content: space-between;
    border-radius: 12px; overflow: hidden;
    /* niente sollevamento in 3D: il pannello resta esattamente dentro la
       cornice chiara, altrimenti la prospettiva lo spostava rispetto a quella */
    transform: none;
    box-shadow: 0 10px 26px -12px rgba(10, 8, 5, .55);
  }
  .section--photo .manifesto__img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  }
  .section--photo .manifesto__velo {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
      rgba(12, 10, 7, .40) 0%, rgba(12, 10, 7, .22) 30%,
      rgba(12, 10, 7, .70) 72%, rgba(12, 10, 7, .88) 100%);
  }
  .section--photo .manifesto__top {
    position: relative; padding: 1.05rem 1.1rem 0;
    display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem;
  }
  .section--photo .manifesto__item .manifesto__k {
    font-family: var(--font-display) !important;
    color: #fff !important; font-weight: 800 !important;
    font-size: clamp(1.3rem, 1.6vw, 1.55rem) !important;
    line-height: 1.12; letter-spacing: -.01em; margin: 0 !important;
    text-shadow: 0 1px 18px rgba(0,0,0,.6) !important;
  }
  .section--photo .manifesto__freccia {
    flex: none; width: 2.3rem; height: 2.3rem; display: grid; place-items: center;
    border-radius: 100px; color: #fff;
    background: rgba(255,255,255,.18);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
  }
  .section--photo .manifesto__freccia svg { width: 1.05rem; height: 1.05rem; }
  .section--photo .manifesto__item:hover .manifesto__freccia {
    background: rgba(255,255,255,.3); transform: rotate(8deg);
  }
  .section--photo .manifesto__item p {
    position: relative; margin: 0 !important;
    padding: 1.1rem; border-radius: 0 0 12px 12px;
    font-family: var(--font-body) !important;
    color: rgba(255, 255, 255, .92) !important; font-weight: 400 !important;
    font-size: clamp(.98rem, 1.05vw, 1.05rem) !important; line-height: 1.5;
    text-shadow: 0 1px 16px rgba(0,0,0,.6) !important;
  }
}

/* ============================================================
   PAGINE INTERNE (gli spazi / le residenze / la location) — sezioni e
   testo entrano con lo scroll e, salendo, escono: l'avanzamento e' la
   posizione dell'elemento nel viewport (--e dal JS), non un evento, ed
   e' per questo che si riavvolge. --rit sfalsa gli elementi dentro la
   stessa sezione, cosi' la sezione sembra comporsi un pezzo alla volta.
   ============================================================ */
.anima .lf-in {
  --rit: 0;
  --p: clamp(0, calc((var(--e, 1) - var(--rit)) / .42), 1);
  transform: translate3d(0, calc((1 - var(--p)) * 28px), 0);
  opacity: var(--p);
  will-change: transform, opacity;
}
/* i titoli di sezione arrivano da un filo piu' lontano */
.anima .section__head.lf-in {
  transform: translate3d(0, calc((1 - var(--p)) * 40px), 0);
}
@media (prefers-reduced-motion: reduce) {
  .anima .lf-in { transform: none; opacity: 1; }
}

/* i crediti delle foto Wikimedia stanno con le card che le usano: su mobile
   quelle card non compaiono, quindi non compare nemmeno l'attribuzione */
.footnote--crediti { margin-top: 1.4rem; font-size: .72rem; opacity: .8; }
@media (max-width: 880px) { .lf-pinned .footnote--crediti { display: none; } }


/* La location: sotto il subhero c'e' subito un'altra sezione fotografica.
   Il suo fade in cima sommato a quello del subhero faceva una fascia
   bianca larghissima: qui le due foto si toccano direttamente. */
#quartiere-loc { --fade-top: transparent; }

/* ============================================================
   GLI SPAZI — coreografie per le due icone che esistono solo qui
   (lounge e domotica). Le prime quattro riusano quelle della home:
   le classi --s1..--s4 sono le stesse. Tutto guidato da --e, quindi
   scendendo si compone e risalendo si smonta.
   ============================================================ */

/* S5 LOUNGE — niente disegno a tratteggio qui: su questi due tracciati la
   dasharray lasciava pezzi fuori anche a riposo. Si muovono per scala,
   posizione e opacita', che non possono lasciare un tratto a meta'.
   La seduta si appoggia, lo schienale sale da dietro, la cucitura si
   segna, i piedi scendono a terra. */
.lf-bento__card--s5 { --sd: clamp(0, calc((var(--e,1) - .05) / .28), 1);
                      --sc: clamp(0, calc((var(--e,1) - .24) / .28), 1);
                      --cu: clamp(0, calc((var(--e,1) - .46) / .20), 1);
                      --pi: clamp(0, calc((var(--e,1) - .56) / .26), 1); }
.lf-bento__card--s5 .lf-bento-icon rect {
  transform-box: view-box; transform-origin: 60px 84px;
  transform: scale(calc(.6 + .4 * var(--sd)));
  opacity: var(--sd);
}
.lf-bento__card--s5 .lf-bento-icon path:nth-of-type(1) {
  transform-box: view-box; transform-origin: 60px 60px;
  transform: translateY(calc((1 - var(--sc)) * 20px)) scaleY(calc(.4 + .6 * var(--sc)));
  opacity: var(--sc);
}
.lf-bento__card--s5 .lf-bento-icon path:nth-of-type(2) {
  transform-box: view-box; transform-origin: 60px 60px;
  transform: scaleY(var(--cu)); opacity: var(--cu);
}
.lf-bento__card--s5 .lf-bento-icon path:nth-of-type(3) {
  transform-box: view-box; transform-origin: 60px 84px;
  transform: scaleY(var(--pi)); opacity: var(--pi);
}

/* S6 AMAZON LOCKER: l'armadio si presenta, le divisioni si tracciano,
   le maniglie scattano e alla fine il pacco scivola dentro lo sportello */
.lf-bento__card--s6 { --ar: clamp(0, calc((var(--e,1) - .04) / .26), 1);
                      --dv: clamp(0, calc((var(--e,1) - .22) / .24), 1);
                      --m1: clamp(0, calc((var(--e,1) - .38) / .18), 1);
                      --m2: clamp(0, calc((var(--e,1) - .46) / .18), 1);
                      --pc: clamp(0, calc((var(--e,1) - .58) / .30), 1); }
.lf-bento__card--s6 .lf-bento-icon rect:nth-of-type(1) {
  transform-box: view-box; transform-origin: 60px 102px;
  transform: scale(calc(.74 + .26 * var(--ar)));
  opacity: var(--ar);
}
.lf-bento__card--s6 .lf-bento-icon path:nth-of-type(1) {
  transform-box: view-box; transform-origin: 60px 60px;
  transform: scale(calc(.6 + .4 * var(--dv))); opacity: var(--dv);
}
.lf-bento__card--s6 .lf-bento-icon path:nth-of-type(2) {
  transform-box: view-box; transform-origin: 50px 60px;
  transform: scaleX(var(--m1)); opacity: var(--m1);
}
.lf-bento__card--s6 .lf-bento-icon path:nth-of-type(3) {
  transform-box: view-box; transform-origin: 86px 60px;
  transform: scaleX(var(--m2)); opacity: var(--m2);
}
/* il pacco arriva da destra e si ferma nello sportello */
.lf-bento__card--s6 .lf-bento-icon rect:nth-of-type(2),
.lf-bento__card--s6 .lf-bento-icon path:nth-of-type(4) {
  transform-box: view-box; transform-origin: 78px 60px;
  transform: translateX(calc((1 - var(--pc)) * 26px)) scale(calc(.7 + .3 * var(--pc)));
  opacity: var(--pc);
}

@media (prefers-reduced-motion: reduce) {
  .lf-bento__card--s5 .lf-bento-icon rect,
  .lf-bento__card--s5 .lf-bento-icon path,
  .lf-bento__card--s6 .lf-bento-icon rect,
  .lf-bento__card--s6 .lf-bento-icon path { transform: none; opacity: 1; }
}

/* ============================================================
   HERO — via il sottotesto, su tutti i formati. Il testo resta nel
   markup (serve ai motori di ricerca e agli screen reader): qui non
   si mostra, non e' stato rimosso dalla pagina.
   Senza sottotesto i tasti resterebbero appesi al titolo: li stacco.
   ============================================================ */
.hero__lead { display: none; }
.hero__title { margin-bottom: 0; }
.hero__cta { margin-top: 3rem; }

/* MOBILE: titolo e tasti centrati, tasti piu' piccoli e piu' in basso */
@media (max-width: 880px) {
  .hero { text-align: center; }
  .hero__inner { margin-inline: auto; }
  .hero__cta {
    justify-content: center;
    gap: .6rem;
    margin-top: 3.4rem;
    margin-bottom: 2rem;
  }
  .hero__cta .btn {
    font-size: .84rem;
    padding: .68rem 1.15rem;
  }
}

/* quattro tempi di percorrenza sulla stessa riga (la griglia base ne fa tre) */
@media (min-width: 900px) { .invest--quattro { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   MOBILE — nessuna animazione deve uscire di lato dallo schermo.
   Finora i pannelli Corpo A/C entravano traslando del 30% e le pillole
   di ±70px: stavano dentro solo grazie al ritaglio del contenitore. Se
   il ritaglio non viene applicato, quel movimento rende la pagina
   scorrevole in orizzontale. Qui l'ingresso diventa verticale, cosi'
   non c'e' niente da ritagliare.
   ============================================================ */
@media (max-width: 880px) {
  .cards .card {
    transform: translateY(calc((1 - var(--i)) * 34px)) scale(var(--press, 1));
  }
  .lf-bento__card--5 .lf-pill:nth-child(odd),
  .lf-bento__card--5 .lf-pill:nth-child(even) { --dir: 0px; }
  .lf-bento__card--5 .lf-pill {
    transform: translateY(calc((1 - var(--w, 1)) * 16px));
  }
}


/* ============================================================
   AGENDA APPUNTAMENTO (pagina Contatti)
   Stessi stili della landing /abitare: quando arrivera' l'account
   Calendly il blocco si sostituisce con l'embed in entrambe le pagine.
   ============================================================ */
.lp-cal { flex: 1; display: flex; flex-direction: column; background: var(--ink-3); border: 1px solid var(--concrete); border-radius: 3px; padding: 1.1rem; }
.lp-cal iframe { width: 100%; min-height: 620px; border: 0; }
.lp-cal__top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .9rem; }
.lp-cal__mese { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--bone); text-transform: capitalize; }
.lp-cal__nav {
  width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--concrete);
  background: none; cursor: pointer; display: grid; place-items: center; transition: border-color .25s, opacity .25s;
}
.lp-cal__nav::before {
  content: ''; width: .42rem; height: .42rem;
  border-top: 1.6px solid var(--bone); border-right: 1.6px solid var(--bone);
  transform: rotate(-135deg) translate(-1px, -1px);
}
.lp-cal__nav--next::before { transform: rotate(45deg) translate(-1px, -1px); }
.lp-cal__nav:hover:not(:disabled) { border-color: var(--rust); }
.lp-cal__nav:disabled { opacity: .3; cursor: default; }

.lp-cal__sett, .lp-cal__giorni { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }
.lp-cal__sett { margin-bottom: .35rem; }
.lp-cal__sett span { text-align: center; font-size: .68rem; font-weight: 600; letter-spacing: .1em; color: var(--smoke); }
.lp-cal__g {
  aspect-ratio: 1; border: 1px solid transparent; border-radius: 3px;
  background: var(--ink-2); color: var(--bone); font: inherit; font-size: .86rem;
  cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.lp-cal__g:hover:not(:disabled) { border-color: var(--rust); }
.lp-cal__g:disabled { background: none; color: #bdb4a5; cursor: default; }
.lp-cal__g.is-scelto { background: var(--rust); border-color: var(--rust); color: #fdf6ee; font-weight: 700; }
.lp-cal__g:focus-visible, .lp-cal__ora:focus-visible, .lp-cal__nav:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

.lp-cal__ore { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--concrete); }
.lp-cal__lab { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; color: var(--smoke); margin-bottom: .6rem; }
.lp-cal__slot { display: flex; flex-wrap: wrap; gap: .4rem; }
.lp-cal__ora {
  border: 1px solid var(--concrete); border-radius: 2px; background: var(--ink-3);
  padding: .45rem .8rem; font: inherit; font-size: .85rem; color: var(--bone);
  cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.lp-cal__ora:hover { border-color: var(--rust); }
.lp-cal__ora.is-scelto { background: var(--rust); border-color: var(--rust); color: #fdf6ee; font-weight: 600; }

.lp-cal__esito {
  margin-top: 1rem; padding: .8rem .9rem; border-radius: 3px; font-size: .88rem; line-height: 1.5;
  background: rgba(137,80,55,.08); border: 1px solid rgba(137,80,55,.25); color: var(--bone);
}
.lp-cal__esito b { color: var(--ember); }
.lp-cal__nota { margin-top: auto; padding-top: .9rem; font-size: .74rem; color: var(--smoke); line-height: 1.5; }

/* intestazione del blocco agenda nella pagina Contatti */
.agenda-blocco { max-width: 640px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: left; }
.agenda-blocco__k { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 700; color: var(--bone); margin-bottom: .3rem; }
.agenda-blocco__v { font-size: .95rem; color: var(--smoke); margin-bottom: 1.1rem; }

/* card della home che portano a Gli spazi: link esteso su tutta la superficie */
.lf-bento__card--link { position: relative; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.lf-bento__stretch { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.lf-bento__stretch:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.lf-bento__freccia {
  position: absolute; top: clamp(.9rem, 1.6vw, 1.2rem); right: clamp(.9rem, 1.6vw, 1.2rem); z-index: 1;
  width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--lf-line);
  display: grid; place-items: center; color: var(--rust);
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.lf-bento__freccia svg { width: 1rem; height: 1rem; }
/* spazio riservato alla freccia: l'illustrazione a destra non ci finisce sotto */
.lf-bento__card--link .lf-bento__split { padding-right: 2.9rem; }
@media (max-width: 639px) {   /* su mobile l'illustrazione sta in alto a tutta larghezza */
  .lf-bento__card--link .lf-bento__split { padding-right: 0; }
  .lf-bento__card--link .lf-bento__fig { margin-right: 3.2rem; }
}
.lf-bento__card--link:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(40, 30, 20, .45); }
.lf-bento__card--link:hover .lf-bento__freccia { background: var(--rust); color: #fdf6ee; transform: rotate(8deg); }

/* ============================================================
   CARD 1 (sezione 01): due card separate, una sopra l'altra nella stessa
   colonna. Sopra le residenze, sotto il box auto.
   ============================================================ */
.lf-bento__col {
  grid-column: span 12;
  display: grid; gap: clamp(.8rem, 1.4vw, 1.1rem);
}
.lf-bento__col > .lf-bento__card { grid-column: auto; }
@media (min-width: 640px) and (max-width: 1023px) {
  .lf-bento__col { grid-template-columns: 1fr 1fr; }   /* tablet: affiancate */
}
@media (min-width: 1024px) {
  .lf-bento__col { grid-column: span 4; }
}
@media (max-width: 639px) {
  .lf-bento__col { gap: 2.1rem; }   /* su telefono stessa distanza delle altre card */
}
.lf-bento__card--1 .lf-bento__pour svg { max-height: 104px; }
.lf-bento__box .lf-bento__fig { margin-bottom: .8rem; }
.lf-bento__box .lf-bento__fig svg { max-height: 84px; }

/* stato di cantiere dei due corpi (sezione 02) */
.lf-due__stato {
  display: inline-block;
  /* testo chiaro su ruggine pieno: il nero sul ruggine sulla foto si leggeva poco */
  font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  padding: .5rem .95rem; border-radius: 3px;
  background: var(--rust); color: #fff;
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
}
.card__stato {
  display: inline-block; margin-bottom: .5rem;
  font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: .22rem .5rem; border-radius: 2px;
  background: rgba(20,16,12,.72); color: #f4efe6;
  border: 1px solid rgba(244,239,230,.35);
  max-width: 100%; line-height: 1.45;   /* su telefoni stretti va a capo, non esce dalla card */
}

/* ============================================================
   LISTINO PER TIPOLOGIA — niente 3D dove non c'e' un mouse.
   Su iPhone la prospettiva (perspective + translateZ) faceva uscire la
   foto dai bordi della card e la faceva sembrare storta: sul touch la
   card torna piatta e l'immagine riempie la cornice.
   ============================================================ */
@media (hover: none), (max-width: 880px) {
  .tipo-card {
    transform: none; transform-style: flat;
    overflow: hidden;
  }
  .tipo-card__inner {
    inset: 0; transform: none; transform-style: flat;
    border-radius: inherit; box-shadow: none;
  }
  .tipo-card__testa, .tipo-card__bottom, .tipo-card__freccia { transform: none; }
}

/* ============================================================
   SEZIONE 02 — l'assonometria si vede intera (zoom ridotto): niente
   ritaglio "cover", l'immagine sta tutta dentro lo schermo e le fasce
   laterali prendono il grigio del disegno.
   ============================================================ */
@media (min-width: 881px) {
  #quartiere::before, #quartiere-loc::before {
    /* zoom minimo che riempie lo schermo: niente fasce grigie ai bordi */
    background-size: cover; background-repeat: no-repeat;
    background-position: center;
    background-color: #bdbdba;
  }
}


/* ============================================================
   LA LOCATION — sezione "San Lorenzo, al centro di tutto":
   mappa disegnata del quartiere + punti, tempi e legenda.
   Porting del mockup fornito dal cliente (Sezione la location).
   Le classi lm-* sono quelle del disegno, tenute com'erano.
   ============================================================ */
.locmap {
  max-width: min(1560px, 94vw); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 3vw, 2.8rem); align-items: start;
}
.locmap__mappa {
  position: relative; aspect-ratio: 1 / 1;
  border-radius: 16px; overflow: hidden;
  border: 1px solid #ddd4c4; background: #f0e9dc;
  box-shadow: 0 18px 40px rgba(38, 34, 27, .10);
}
.locmap__svg { display: block; width: 100%; height: 100%; }
.locmap__testo { display: flex; flex-direction: column; gap: 1.6rem; padding-top: .6rem; }
.locmap__kicker { font-size: .75rem; letter-spacing: .26em; text-transform: uppercase; color: var(--rust); }
.locmap__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.06; margin: -.6rem 0 0; color: var(--bone);
}
.locmap__lead { font-size: 1rem; line-height: 1.6; margin: 0; color: var(--smoke); max-width: 32rem; }
.locmap__punti {
  list-style: none; margin: 0; padding: 1.4rem 0 0;
  border-top: 1px solid #ddd4c4;
  display: grid; gap: 1.35rem;
}
.locmap__punto { display: flex; gap: 1rem; align-items: flex-start; }
.locmap__ico {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: #fff; border: 1px solid #ddd4c4;
  display: grid; place-items: center;
}
.locmap__punto-t { display: grid; gap: .3rem; }
.locmap__punto-k { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; color: var(--bone); }
.locmap__punto-v { font-size: .93rem; line-height: 1.55; color: var(--smoke); }
.locmap__tempi {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem;
  padding-top: 1.3rem; border-top: 1px solid #ddd4c4;
}
.locmap__min { display: block; color: var(--rust); font-size: .78rem; }
.locmap__min b { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; line-height: 1; margin-right: .18rem; }
.locmap__meta { display: block; font-size: .8rem; color: var(--smoke); margin-top: .35rem; }
.locmap__legenda {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.1rem;
  padding-top: 1.2rem; border-top: 1px solid #ddd4c4;
}
@media (max-width: 980px) {
  .locmap { grid-template-columns: 1fr; }
  .locmap__testo { padding-top: 0; }
}
@media (max-width: 760px) {
  /* mappa piccola: le pastiglie si accavallerebbero. I tempi che riportano
     sono comunque scritti sotto, nella riga dei minuti. */
  .locmap .lm-chip, .locmap__scala { display: none !important; }   /* battono gli style inline del disegno */
}
@media (max-width: 620px) {
  .locmap__tempi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
  .locmap__legenda { grid-template-columns: 1fr; }
}

/* --- stili del disegno (mockup del cliente) --- */
.lm-chip{position:absolute;display:flex;align-items:center;gap:9px;padding:8px 13px;border-radius:999px;
background:rgba(250,247,241,.93);border:1px solid #d9cfbc;box-shadow:0 3px 10px rgba(38,34,27,.09)}
.lm-chip svg{flex:none;display:block}
.lm-chip b{font-size:12.5px;font-weight:600;letter-spacing:.01em;color:#26221b;white-space:nowrap}
.lm-chip span{font-size:11.5px;color:#6d665a;white-space:nowrap}
.lm-pt-h{font-family:var(--font-display);font-size:19px;line-height:1.2;margin:0 0 6px;color:#26221b}
.lm-pt-p{font-size:14.2px;line-height:1.55;margin:0;color:#4a453c}
.lm-lg{display:flex;align-items:center;gap:8px;font-size:11.8px;color:#6d665a}
.lm-lg i{width:16px;height:10px;border-radius:3px;display:block;flex:none}

.lm-res-cas{stroke:#cfc2a9;stroke-width:6.6;fill:none;stroke-linejoin:round;stroke-linecap:round}
.lm-res-body{stroke:#fdfbf7;stroke-width:4.8;fill:none;stroke-linejoin:round;stroke-linecap:round}
.lm-ped-cas{stroke:#cfc2a9;stroke-width:4.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.lm-ped-body{stroke:#fdfbf7;stroke-width:2.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.lm-ter-cas{stroke:#c1ae8d;stroke-width:9.6;fill:none;stroke-linejoin:round;stroke-linecap:round}
.lm-ter-body{stroke:#ffffff;stroke-width:7.4;fill:none;stroke-linejoin:round;stroke-linecap:round}
.lm-art-cas{stroke:#c1ae8d;stroke-width:12.6;fill:none;stroke-linejoin:round;stroke-linecap:round}
.lm-art-body{stroke:#ffffff;stroke-width:10;fill:none;stroke-linejoin:round;stroke-linecap:round}
.lm-rl{stroke:#ab9d84;stroke-width:1.5;fill:none;stroke-dasharray:7 5;opacity:.9}
.lm-inst{stroke:#cbb79a;stroke-width:1.1;stroke-dasharray:4 3.5;fill-opacity:1}
.lm-sl{fill:#6b6458;font-family:var(--font-body);dominant-baseline:central;
paint-order:stroke fill;stroke:#fdfbf7;stroke-width:3.2;stroke-linejoin:round;stroke-linecap:round}
.lm-sl--a{fill:#26221b;letter-spacing:.14em;font-weight:600;stroke-width:3.8}
.lm-poi-t{font-family:var(--font-body);font-weight:600;
paint-order:stroke fill;stroke:#e6dcc9;stroke-width:3.8;stroke-linejoin:round}
.lm-poi-t--sub{font-weight:400}
.lm-poi-t--zone{letter-spacing:.2em;font-weight:600;opacity:.95}
.lm-card rect{filter:drop-shadow(0 6px 14px rgba(38,34,27,.26))}
.lm-card-t{font-family:var(--font-display);font-size:17px;letter-spacing:.17em;fill:#fff}
.lm-card-s{font-family:var(--font-body);font-size:11.5px;letter-spacing:.02em;fill:#f2ddd0}

/* La location: sotto la sezione 02 c'e' la mappa su fondo pagina, non una
   sezione alternata: la sfumatura deve chiudere sul colore della pagina,
   altrimenti resta una riga di stacco. */
#quartiere-loc { --fade-bottom: var(--ink); }

/* Home: sotto l'hero c'e' la sezione di apertura sul fondo pagina (--ink),
   non una sezione alternata: la sfumatura deve chiudere su quel colore,
   altrimenti resta una riga netta. */
.hero { --fade-color: var(--ink); }

/* ============================================================
   CARD CANTINA (sezione 01, sotto "Un bene tuo per sempre").
   Stessa mano delle altre illustrazioni: tutto guidato da --e, quindi
   scendendo si compone e risalendo si riavvolge. Prima il pavimento,
   poi il muro, le mensole, le casse e infine la porta che si apre.
   ============================================================ */
.lf-bento__card--cantina {
  --g:  clamp(0, calc(var(--e, 1) / .18), 1);
  --m:  clamp(0, calc((var(--e, 1) - .12) / .30), 1);
  --sc: clamp(0, calc((var(--e, 1) - .34) / .34), 1);
  --c:  clamp(0, calc((var(--e, 1) - .48) / .36), 1);
  --p:  clamp(0, calc((var(--e, 1) - .62) / .34), 1);
}
.lf-bento__card--cantina .lf-bento__fig svg { max-height: 96px; }
.lf-ct-suolo { stroke-dasharray: 176; stroke-dashoffset: calc((1 - var(--g)) * 176); }
.lf-ct-muro  { stroke-dasharray: 254; stroke-dashoffset: calc((1 - var(--m)) * 254); }
.lf-ct-mensola {
  --t: clamp(0, calc((var(--sc) - var(--n) * .3) / .7), 1);
  stroke-dasharray: 36; stroke-dashoffset: calc((1 - var(--t)) * 36);
}
.lf-ct-cassa {
  --t: clamp(0, calc((var(--c) - var(--n) * .3) / .7), 1);
  transform-box: fill-box; transform-origin: 50% 100%;
  transform: scale(var(--t)); opacity: var(--t);
}
.lf-ct-porta {
  transform-box: view-box; transform-origin: 144px 76px;
  transform: scaleX(calc(1 - .6 * var(--p)));
}
@media (prefers-reduced-motion: reduce) {
  .lf-ct-suolo, .lf-ct-muro, .lf-ct-mensola { stroke-dashoffset: 0; }
  .lf-ct-cassa, .lf-ct-porta { transform: none; opacity: 1; }
}

/* valore lungo (box auto): e' una frase, puo' andare a capo e resta piccolo */
.detspec__v--frase { white-space: normal; font-size: 1rem; line-height: 1.25; }

/* Contatti — orari delle visite, sopra il calendario */
.orari {
  display: grid; gap: .35rem; justify-items: center; text-align: center;
  max-width: 34rem; margin: 0 auto 2rem;
  padding: 1.1rem 1.4rem; border: 1px solid var(--concrete); border-radius: 4px;
  background: #fdfbf7;
}
.orari__k { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ember); font-weight: 600; }
.orari__v { font-family: var(--font-display); font-size: 1.25rem; color: var(--bone); }
.orari__n { font-size: .92rem; color: var(--smoke); }