/* ITALMEDIA — stili della home (index.html). Caricato dopo main.css. */
:root{ --salvia:#9ed8b5; --salvia-l:#9ed8b5; --magenta:#ec4f6a; --ink:#000000; --condo:#B6B5D8; --condo-l:#B6B5D8; --condo-2:#9d9bc9; }   /* lavanda, anche se main.css e' vecchio */
.nav__links .nv.is-condo-nav::before{ background:var(--condo) }
.nav__links .nv.is-condo-nav:hover, .nv.is-condo:hover{ color:var(--ink) }

/* ============ HERO RIQUADRI FLUTTUANTI — minimal, mouse-parallax (solo variante) ============ */
.hero-f{ min-height:100vh; background:var(--ink); display:flex; align-items:center;
  justify-content:center; overflow:hidden; position:relative; }
.hero-f__stage{ position:relative; width:100%; max-width:150rem; height:100vh;
  margin:0 auto; }

/* centro */
.hero-f__center{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; z-index:3;
  padding:0 3rem; pointer-events:none; }
.hero-f__center{ pointer-events:none }
.hero-f__center a{ pointer-events:auto }
.hero-f__title{ font-size:7.2rem; line-height:1.02 }
.hero-f__title .ln{ display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em }
.hero-f__title .ln>span{ display:block; transform:translateY(110%); animation:lnUp 1s var(--ease) forwards; padding-bottom:.04em }
.hero-f__title .ln:nth-child(2)>span{ animation-delay:.12s }
.hero-f__title .hashtag{ letter-spacing:0; font-size:min(1em, 9.6vw) }
@keyframes lnUp{ to{ transform:translateY(0) } }
.hero-f__sub{ margin:2.6rem auto 0; max-width:46rem; color:var(--paper); font-size:2rem; line-height:1.5 }
.hero-f__cta{ margin-top:3.4rem; display:flex; gap:1.6rem; justify-content:center; flex-wrap:wrap }

/* stage in prospettiva 3D per l'effetto "si volgono verso il cursore" */
.hero-f__stage{ }
/* fascia nera in cima: la navbar ha sempre sfondo, i rettangoli spariscono sotto */
.hero-f::before{ content:''; position:absolute; top:0; left:0; right:0; height:10rem;
  background:linear-gradient(var(--ink) 55%, transparent); z-index:5; pointer-events:none; }

/* riquadri astratti: contenuto colorato random. Posizione/formato = JS.
   Piatti frontali (niente 3D), passano DIETRO allo slogan (z-index 1 < center 3) */
.frame{ position:absolute; z-index:1; will-change:transform;
  opacity:0; animation:frameIn 1s var(--ease) forwards; }
.frame__inner{ position:relative; width:100%; aspect-ratio:var(--r,1);
  background:var(--fill, #9ed8b5); overflow:hidden; will-change:transform;
  transition:box-shadow .45s var(--ease); }
.frame__inner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* --- effetto SELEZIONE stile editor (all'hover) --- */
/* contorno di selezione: cresce dai bordi */
.frame__box{ position:absolute; inset:0; z-index:3; pointer-events:none;
  border:1px solid transparent; transition:border-color .3s var(--ease); }
.frame:hover .frame__box{ border-color:var(--paper); }
/* 4 maniglie ai vertici: quadratini che compaiono agli angoli */
.frame__h{ position:absolute; z-index:4; width:.9rem; height:.9rem;
  background:var(--ink); border:1.5px solid var(--paper);
  opacity:0; transform:scale(.4); transition:opacity .3s var(--ease), transform .35s var(--ease);
  pointer-events:none; }
.frame__h.tl{ top:-.45rem; left:-.45rem }
.frame__h.tr{ top:-.45rem; right:-.45rem }
.frame__h.bl{ bottom:-.45rem; left:-.45rem }
.frame__h.br{ bottom:-.45rem; right:-.45rem }
.frame:hover .frame__h{ opacity:1; transform:scale(1); }
.frame:hover .frame__h.tl{ transition-delay:0s }
.frame:hover .frame__h.tr{ transition-delay:.04s }
.frame:hover .frame__h.br{ transition-delay:.08s }
.frame:hover .frame__h.bl{ transition-delay:.12s }
/* le maniglie prendono il colore d'accento del riquadro */
.frame:hover .frame__h{ border-color:var(--fill) }
.frame:hover .frame__box{ border-color:var(--fill) }
.frame:hover .frame__inner{ box-shadow:0 2.5rem 6rem rgba(0,0,0,.5); }
/* etichetta formato che appare in alto, come il tag di selezione */
.frame__label{ position:absolute; top:-2.6rem; left:0; z-index:4;
  font-family:var(--body); font-weight:600; font-size:1.1rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink); background:var(--fill);
  padding:.3rem .8rem; white-space:nowrap;
  opacity:0; transform:translateY(.5rem); transition:opacity .3s var(--ease), transform .3s var(--ease); }
.frame:hover .frame__label{ opacity:1; transform:translateY(0) }
@keyframes frameIn{ from{ opacity:0 } to{ opacity:1 } }

/* i quartieri (effetto prospettiva) esistono SOLO su mobile in questa hero */
.hero-f__quartieri{ display:none }

/* tablet desktop (768-991): i frame JS restano ma un filo piu contenuti */
@media (max-width:991px){
  .hero-f__title{ font-size:5rem }
}
/* mobile vero (<768): niente riquadri, torna l'effetto quartieri in prospettiva */
@media (max-width:767px){
  .hero-f{ min-height:auto }
  .hero-f__title{ font-size:4.4rem }
  .hero-f__stage{ height:auto; padding:16rem 2rem 8rem; display:flex; flex-direction:column; }
  .hero-f__center{ position:relative; inset:auto; padding:0; z-index:2 }
  .frame{ display:none }                 /* niente rettangoli su mobile */
  .hero-f__quartieri{ display:none }     /* niente quartieri su mobile */
}
@media (max-width:480px){
  .hero-f__title{ font-size:3.4rem }
}
@media (prefers-reduced-motion:reduce){
  .frame,.hero-f__title .ln>span{ animation:none; opacity:1; transform:none }
}

/* ===== BANDA CLIENTI: grigio scuro del sito, loghi bianchi.
   Al centro c'e' un "faro": i loghi si illuminano mentre lo attraversano e si spengono verso i bordi,
   come i passanti che entrano nel cono visivo di un impianto. Solo CSS (maschera), nessun calcolo. ===== */
:root{ --band:#211d1d; }
.clients--band{ position:relative; background:var(--band); padding:0; overflow:hidden;
  border-top:1px solid rgba(242,240,234,.06); border-bottom:1px solid rgba(242,240,234,.06) }
.clients--band::before{ content:''; position:absolute; left:50%; top:50%; width:70rem; height:70rem; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(242,240,234,.07), transparent 70%); pointer-events:none }
.clients--band .marq{ margin:0; padding:0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 6%, rgba(0,0,0,.35) 24%, #000 44%, #000 56%, rgba(0,0,0,.35) 76%, transparent 94%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, transparent 6%, rgba(0,0,0,.35) 24%, #000 44%, #000 56%, rgba(0,0,0,.35) 76%, transparent 94%, transparent 100%) }
.clients--band .marq__track .cl{ padding-right:6.75rem }
.clients--band .marq__track img{ height:12rem; max-width:40.5rem; margin:-1.8rem 0; filter:brightness(0) invert(1); opacity:.92 }
.clients--band .marq__track .cl:hover img{ opacity:1 }
.clients--band .marq__track .cl-txt{ font-size:4.8rem; color:#f2f0ea; opacity:.92 }
@media (max-width:767px){
  .clients--band .marq__track img{ height:7.5rem; margin:-1.05rem 0 }
  .clients--band .marq__track .cl{ padding-right:3.75rem }
  .clients--band .marq__track .cl-txt{ font-size:3.6rem }
  .clients--band .marq{ -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 38%, #000 62%, transparent 100%);
                                mask-image:linear-gradient(90deg, transparent 0%, #000 38%, #000 62%, transparent 100%) }
}

/* ===== STATEMENT sopra lo showreel ===== */
.stmt{ padding:14rem 0 0; text-align:center }
.stmt__title{ font-family:var(--disp); font-weight:700; font-size:8.4rem; line-height:1.02;
  letter-spacing:-.035em; color:var(--paper); max-width:120rem; margin:0 auto; padding-bottom:.1em }
.stmt__sub{ margin:3.2rem auto 0; max-width:62rem; font-size:2.2rem; line-height:1.5; color:var(--grey) }

@media (max-width:991px){ .stmt__title{ font-size:5.6rem } }
@media (max-width:767px){ .stmt{ padding:6rem 0 2rem } .stmt__title{ font-size:4.2rem } .stmt__sub{ font-size:1.8rem } }

/* ===== BLOCCO DATI + VIEWSHED ===== */
.vs{ background:var(--ink-2); border:1px solid var(--rule); padding:2rem }
.vs__bar{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem 2.4rem; margin-bottom:1.6rem }
.vs__bar label{ display:flex; flex-direction:column; gap:.6rem; font-size:1.2rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--grey); font-weight:600 }
.vs__bar b{ color:var(--paper); font-weight:600; letter-spacing:0 }
.vs__bar select{ background:var(--ink); color:var(--paper); border:1px solid var(--rule-2);
  font:500 1.4rem var(--body); padding:.6rem .8rem; letter-spacing:0; text-transform:none }
.vs__bar input[type=range]{ width:100%; accent-color:#2ebeb4 }
#vsCv{ width:100%; display:block; background:#0d1211; cursor:grab; touch-action:none }
#vsCv.drag{ cursor:grabbing }
.vs__m{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); margin-top:1.6rem }
.vs__m > div{ background:var(--ink-2); padding:1.4rem 1.6rem }
.vs__m span{ display:block; font-size:1.15rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey) }
.vs__m strong{ display:block; margin-top:.4rem; font-family:var(--disp); font-weight:700; font-size:3rem; letter-spacing:-.02em; color:var(--paper) }
.vs__note{ margin-top:1.2rem; font-size:1.25rem; color:var(--grey) }
@media (max-width:598px){
  .vs{ padding:1.4rem }
  .vs__bar{ grid-template-columns:1fr 1fr }
  .vs__bar label:first-child{ grid-column:1 / -1 }
  .vs__m strong{ font-size:2.2rem }
}

/* ===== PARLIAMONE su grigio caldo-scuro, si stacca dal nero ===== */
#contatti.contact{ background:var(--ink); border-top:0; border-bottom:0 }
#contatti .field input, #contatti .field textarea{ border-bottom-color:rgba(242,240,234,.28) }


/* ===== SHOWREEL quadrato ===== */
.reel-sq{ padding:8rem 0 14rem }
.reel-sq__box{ position:relative; width:100%; max-width:132rem; aspect-ratio:16/9; margin:0 auto;
  overflow:hidden; border:1px solid rgba(242,240,234,.35); background:#111 }
.reel-sq__box iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none }
@media (max-width:767px){ .reel-sq{ padding:5rem 0 8rem } }

/* ===== SEZIONI alternate: testo da un lato, media dall'altro ===== */
.feat{ padding:16rem 0 }
.feat--dark{ background:var(--ink) }
.feat--warm{ background:rgb(33,29,29) }
.feat__grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:9rem; align-items:center }
.feat__grid--data{ grid-template-columns:1.6fr 1fr }
.pill{ display:inline-block; font-size:1.4rem; font-weight:500; color:#d9d5cf; padding:.5rem 1.1rem;
  border:1px solid rgba(242,240,234,.18); background:rgba(242,240,234,.05); border-radius:.6rem; margin-bottom:2.4rem }
.feat__title{ font-family:var(--disp); font-weight:700; font-size:6.4rem; line-height:1.02;
  letter-spacing:-.035em; color:var(--paper); margin-bottom:3rem; padding-bottom:.06em }
.feat__txt p{ font-size:1.9rem; line-height:1.6; color:#d4d0ca; max-width:52rem }
.feat__txt p + p{ margin-top:1.6rem }
.feat__txt .c-bttn{ margin-top:4rem }
.feat__hint{ color:#8f8a84 !important; font-size:1.6rem !important }
.feat__media{ position:relative; aspect-ratio:3/2; overflow:hidden; border-radius:1.2rem; background:#2b2626 }
.feat__media img, .feat__media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }

/* ===== SIMULAZIONE in riquadro stile "app" con barra comandi ===== */
.vsx{ position:relative; background:#141212; border:1px solid #3a3434; border-radius:2.6rem;
  padding:1.8rem 1.8rem 11rem; }
.vsx #vsCv{ width:100%; display:block; border-radius:1.6rem; background:#211d1d; cursor:default; touch-action:none }
.vsx #vsCv.drag{ cursor:grabbing }
.vsx__m{ position:absolute; top:3.2rem; right:3.2rem; display:flex; flex-direction:column; gap:1px;
  background:#3a3434; border:1px solid #3a3434; border-radius:1rem; overflow:hidden; min-width:17rem; pointer-events:none }
.vsx__m > div{ background:rgba(28,25,25,.94); padding:1rem 1.4rem }
.vsx__m span{ display:block; font-size:1.05rem; letter-spacing:.1em; text-transform:uppercase; color:#9a958f }
.vsx__m strong{ display:block; font-family:var(--disp); font-weight:700; font-size:2.2rem; color:var(--paper); letter-spacing:-.01em }
.vsx__bar{ position:absolute; left:50%; bottom:2.2rem; transform:translateX(-50%);
  display:flex; align-items:center; gap:.6rem; padding:.7rem; white-space:nowrap;
  background:#1d1a1a; border:1px solid #3d3737; border-radius:1.8rem; box-shadow:0 1.2rem 3rem rgba(0,0,0,.45) }
.vsx__grp{ display:flex; align-items:center; gap:.4rem }
.vsx__grp + .vsx__grp{ padding-left:.6rem; border-left:1px solid #3d3737 }
.vb{ font:500 1.5rem var(--body); color:#e8e4de; background:transparent; border:0; cursor:pointer;
  padding:1.1rem 1.6rem; border-radius:1.2rem; transition:background .25s, color .25s }
.vb:hover{ background:#2c2828 }
.vb.on{ background:#9ed8b5; color:#0d1211 }
.vb--ic{ font-size:2rem; padding:.7rem 1.2rem; line-height:1 }
.vsx__deg{ font:600 1.5rem var(--body); color:var(--paper); min-width:4.6rem; text-align:center }

@media (max-width:1199px){
  .vsx__bar{ position:static; transform:none; margin-top:1.6rem; flex-wrap:wrap; white-space:normal; justify-content:center }
  .vsx{ padding-bottom:1.8rem }
}
@media (max-width:991px){
  .feat{ padding:9rem 0 }
  .feat__grid, .feat__grid--data{ grid-template-columns:1fr; gap:5rem }
  .feat__grid--data .feat__txt{ order:-1 }
  .feat__title{ font-size:4.8rem }
  .feat__media{ aspect-ratio:4/3 }
}
@media (max-width:598px){
  .feat__title{ font-size:4rem }
  .vsx{ border-radius:1.8rem; padding:1.2rem }
  .vsx__m{ position:static; flex-direction:row; margin-top:1.2rem; min-width:0 }
  .vsx__m > div{ flex:1; padding:.8rem 1rem }
  .vsx__m strong{ font-size:1.8rem }
  .vb{ font-size:1.3rem; padding:.9rem 1.1rem }
}


/* ===== FORMATI e GALLERY nel nuovo stile ===== */
.fmt-panel{ margin-top:0; background:#141212; border:1px solid #3a3434; border-radius:2.6rem; padding:1.2rem 3.2rem }
.fmt-panel .fmt-row:first-child{ border-top:0 }
.fmt-panel .fmt-row:last-child{ border-bottom:0 }
.fmt-panel .fmt-row{ border-top-color:#2e2929 }
.fmt-use{ font-size:1.3rem; letter-spacing:.1em; text-transform:uppercase; color:#9a958f; transition:color .4s }
.fmt-row[data-c="s"]:hover .fmt-use{ color:var(--salvia-l) }
.fmt-row[data-c="m"]:hover .fmt-use{ color:var(--magenta) }
.fmt-panel .fmt-row{ grid-template-columns:1fr auto }
.feat--gal{ padding-bottom:0 }
.feat__grid--head{ grid-template-columns:1fr 1fr; align-items:end; gap:6rem }
.feat__grid--head .feat__title{ margin-bottom:0 }
.feat--gal .galstrip{ margin-top:8rem }
@media (max-width:991px){
  .feat__grid--head{ grid-template-columns:1fr; gap:2.4rem }
  .fmt-panel{ padding:.6rem 1.8rem; border-radius:1.8rem }
  .fmt-panel .fmt-row{ grid-template-columns:1fr auto }
  .feat--gal .galstrip{ margin-top:5rem }
}
/* gallery: didascalia sopra l'immagine, sale dal basso, la pagina non si muove */
.galstrip .galcard{ position:relative; overflow:hidden }
.galstrip .galcard__cap{ position:absolute; left:0; right:0; bottom:0; height:auto; z-index:2;
  padding:1.6rem 2rem; background:linear-gradient(to top, rgba(10,13,12,.92), rgba(10,13,12,.72));
  opacity:0; transform:translateY(100%); transition:transform .45s var(--ease), opacity .3s var(--ease); pointer-events:none }
.galstrip .galcard:hover .galcard__cap{ height:auto; padding:1.6rem 2rem; opacity:1; transform:translateY(0) }

/* ===== PROPRIETA PRIVATA in home: BIANCA ===== */
.condo-sec{ background:#ffffff; color:var(--ink); border:0 }
.condo-sec .hline{ background:rgba(10,13,12,.16) }
.condo-sec .t-label{ color:rgba(10,13,12,.6) }
.condo-sec .t-sec{ color:var(--ink) }
.condo-sec p{ color:rgba(10,13,12,.72) }
.condo-sec .ph-img{ background:#ecebe6 }
.condo-sec .ph-img span{ color:rgba(10,13,12,.5) }
.condo-sec .c-bttn{ color:var(--ink); border-color:rgba(10,13,12,.35) }
.condo-sec .c-bttn::before{ background:var(--condo) }
.condo-sec .c-bttn:hover,
.condo-sec .c-bttn:hover .lbl,
.condo-sec .c-bttn:hover .aico{ color:var(--ink) }

/* ===== TASTI: pillola bianca, il colore sale dal basso ===== */
.c-bttn{ background:#e8e4de; color:#0a0d0c; border:0; border-radius:1.2rem; padding:1.5rem 2.4rem; gap:1.4rem }
.c-bttn .lbl, .c-bttn .lbl.t-label{ color:inherit; text-transform:none; letter-spacing:0; font-size:1.7rem; font-weight:500 }
.c-bttn .aico{ color:inherit }
.c-bttn::before{ background:var(--salvia); border-radius:inherit }
.c-bttn.is-magenta::before{ background:var(--magenta) }
.c-bttn:hover, .c-bttn:hover .lbl{ color:#000 }
.nv{ border-radius:.9rem; padding:.7rem 1.1rem }
.nv::before{ border-radius:inherit }

/* hero: tasti pieni nei nostri colori, sale il bianco */
.hero-f__cta .c-bttn{ background:var(--salvia); color:#000; padding:1.8rem 3rem; border-radius:1.4rem }
.hero-f__cta .c-bttn.is-magenta{ background:var(--magenta) }
.hero-f__cta .c-bttn::before, .hero-f__cta .c-bttn.is-magenta::before{ background:#e8e4de }
.hero-f__cta .c-bttn:hover, .hero-f__cta .c-bttn:hover .lbl, .hero-f__cta .c-bttn:hover .aico{ color:#0a0d0c }
/* su sezione bianca: tasto scuro, sale la lavanda */
.condo-sec .c-bttn{ background:#0a0d0c; color:#fff; border:0 }
.condo-sec .c-bttn::before{ background:var(--condo) }
.condo-sec .c-bttn:hover, .condo-sec .c-bttn:hover .lbl, .condo-sec .c-bttn:hover .aico{ color:#0a0d0c }
/* ===== SCRIVICI + SPAZIO PRIVATO nel nuovo stile ===== */
#contatti.contact{ padding:16rem 0 }
#contatti .grid{ padding:0; gap:9rem; align-items:center }
#contatti .feat__title{ margin-bottom:2.4rem }
#contatti .lead{ font-size:1.9rem; line-height:1.6; color:#d4d0ca; max-width:46rem; margin-bottom:3.4rem }
#contatti .cline{ border-color:rgba(242,240,234,.14); font-size:1.7rem }
.form-card{ background:rgb(33,29,29); border:1px solid rgba(242,240,234,.12); border-radius:1.2rem; padding:5rem }
.form-card .field input, .form-card .field textarea{ font-size:1.7rem }
.condo-sec{ padding:16rem 0 }
.condo-sec .grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:9rem; align-items:center; padding:0 }
.condo-sec .condo-teaser__img{ max-width:none; width:100%; aspect-ratio:3/2; border-radius:1.2rem; overflow:hidden }
.condo-sec .condo-teaser__img img{ width:100%; height:100%; object-fit:cover }
.condo-sec .pill{ color:#0a0d0c; border-color:rgba(10,13,12,.2); background:rgba(10,13,12,.05) }
.condo-sec .feat__title{ color:#0a0d0c }
.condo-sec p{ font-size:1.9rem; line-height:1.6; max-width:48rem; margin-bottom:4rem }
@media (max-width:991px){
  #contatti.contact, .condo-sec{ padding:8rem 0 }
  #contatti .grid, .condo-sec .grid{ grid-template-columns:1fr; gap:5rem; padding:0 }
  .form-card{ padding:3rem 2.2rem }
}

/* icona tasto: freccia "apri" */
.c-bttn .ico-wrap{ width:1.9rem; height:1.9rem; overflow:visible; flex:none }
.c-bttn .ext{ width:100%; height:100%; display:block; overflow:visible }
.c-bttn .ext__a{ transition:transform .45s var(--ease) }
.c-bttn:hover .ext__a{ transform:translate(.2rem,-.2rem) }
.c-bttn:hover .lbl{ transform:none }

/* ===== FOOTER nel nuovo stile ===== */
.footer{ background:rgb(33,29,29); padding:12rem 0 4rem }
.footer .cols{ align-items:start; padding-bottom:8rem; border-top:0; padding-top:0 }
.footer .pill{ margin-bottom:2rem }
.footer__brand .brand__logo{ height:4rem }
.footer .cols p, .footer__brand p{ font-size:1.7rem; line-height:1.6; color:#d4d0ca; max-width:40rem }
.footer__office a{ font-size:1.7rem; color:var(--paper); padding:.4rem 0 }
.footer .socials a{ border-radius:.9rem }
.legal{ border-top:1px solid rgba(242,240,234,.14); font-size:1.4rem; color:#a8a39c }
.condo-sec .c-bttn{ background:#000 }
.condo-sec .ph-img{ clip-path:none !important }

.condo-sec .pill{ background:linear-gradient(#fff,#efede8); border:1px solid rgba(10,13,12,.14); color:#000;
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(10,13,12,.18) }
/* ===== GALLERY: testo a sinistra, immagini che scorrono a destra ===== */
.gal2{ padding:16rem 0; overflow:hidden; --ha:52rem; --hs:34rem }
.gal2__grid{ display:grid; grid-template-columns:50rem minmax(0,1fr); gap:7rem; align-items:center; padding-left:4rem }
.gal2__txt{ max-width:50rem }
.gal2__txt p{ font-size:1.9rem; line-height:1.6; color:#d4d0ca; max-width:52rem }
.gal2__txt .c-bttn{ margin-top:4rem }
.gal2__view{ position:relative; height:calc(var(--ha) + 2rem); padding:1rem 0 1rem 1rem; overflow:hidden }
.gal2__track{ display:flex; align-items:center; height:var(--ha); transition:transform .8s var(--ease); will-change:transform }
.gal2__it{ position:relative; flex:none; height:var(--hs); aspect-ratio:var(--r,3/2); padding:0; border:0; background:#111; cursor:pointer;
  transition:height .8s var(--ease), opacity .5s }
.gal2__it.past{ opacity:0; pointer-events:none }
.gal2__it img{ width:100%; height:100%; object-fit:cover; display:block }
.gal2__it.on{ height:var(--ha); cursor:zoom-in; z-index:2 }
.gal2__sel{ position:absolute; inset:0; border:2px solid var(--fc, #9ed8b5); opacity:0; transition:opacity .4s .3s; pointer-events:none }
.gal2__it.on .gal2__sel{ opacity:1 }
.gal2__sel i{ position:absolute; width:1.1rem; height:1.1rem; border-radius:50%; background:#fff; border:2px solid var(--fc, #9ed8b5) }
.gal2__sel i:nth-child(1){ left:-.65rem; top:-.65rem } .gal2__sel i:nth-child(2){ right:-.65rem; top:-.65rem }
.gal2__sel i:nth-child(3){ left:-.65rem; bottom:-.65rem } .gal2__sel i:nth-child(4){ right:-.65rem; bottom:-.65rem }
.gal2__sel b{ position:absolute; right:0; bottom:0; max-width:100%; box-sizing:border-box; background:var(--fc, #9ed8b5); color:var(--fc-t, #000); font:500 1.6rem var(--body); padding:.7rem 1.4rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.gal2__next{ position:absolute; right:3rem; top:50%; transform:translateY(-50%); z-index:5; width:5.6rem; height:5.6rem; border-radius:50%;
  border:0; background:#e8e4de; color:#000; cursor:pointer; display:grid; place-items:center; box-shadow:0 .6rem 2rem rgba(0,0,0,.45); transition:background .3s }
.gal2__next:hover{ background:#9ed8b5 }
.gal2__next svg{ width:2.2rem; height:2.2rem }
@media (max-width:991px){
  .gal2{ padding:8rem 0; --ha:38rem; --hs:30rem }
  .gal2__grid{ grid-template-columns:1fr; gap:5rem; padding-left:2rem }
  .gal2__txt{ justify-self:start; padding-right:2rem }
  .gal2__next{ right:1.6rem; width:4.6rem; height:4.6rem }
}

/* pill stile Affinity: piatta, bordo sottile, iconcina */
.pill{ display:inline-flex; align-items:center; gap:.6rem; padding:.3rem 1rem .3rem .8rem; font-size:1.5rem; font-weight:400; line-height:1.5;
  color:#d8d4cf; background:#2b2727; border:1px solid rgba(255,255,255,.09); border-radius:.7rem; box-shadow:none }
.pill::before{ content:''; width:1.5rem; height:1.5rem; flex:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23d8d4cf' stroke-width='1.2'%3E%3Crect x='2' y='2.5' width='12' height='8' rx='1'/%3E%3Cpath d='M5 10.5v3M11 10.5v3'/%3E%3C/svg%3E") center/contain no-repeat; opacity:.85 }
.condo-sec .pill{ background:#f1efea; border:1px solid rgba(10,13,12,.14); color:#000; box-shadow:none }
.condo-sec .pill::before{ filter:brightness(0) }
/* gallery impilata: la prima davanti, le altre dietro e via via piu' piccole */
.gal2__view{ padding:0; height:var(--ha); overflow:visible }
.gal2__track{ display:block; position:relative; height:100%; transform:none !important }
.gal2__it{ position:absolute; left:0; top:50%; height:auto; aspect-ratio:auto; transform-origin:0 50%;
  transition:transform .8s var(--ease), width .8s var(--ease), height .8s var(--ease), opacity .5s var(--ease); box-shadow:-1.2rem 0 3rem rgba(0,0,0,.35) }
.gal2__it.on{ height:auto }
.gal2__it.past, .gal2__it.far{ opacity:0; pointer-events:none }
.gal2__sel i{ display:none }
.pill::before{ content:none !important }
.pill{ padding:.3rem 1rem !important }
.gal2__it{ transition:transform .6s var(--ease), width .6s var(--ease), height .6s var(--ease), opacity .45s var(--ease) }
/* gallery: animazione solo su transform/opacita' (niente ricalcolo layout) */
.gal2__it{ transition:transform .55s var(--ease), opacity .4s var(--ease) !important; will-change:transform,opacity; box-shadow:none; backface-visibility:hidden }
.gal2__it img{ transform:translateZ(0) }
/* simulazione: mappa a filo del riquadro, legenda in alto, comandi in basso */
.vsx{ padding:0 !important; overflow:hidden }
.vsx #vsCv{ border-radius:0 }
.vsx__m{ position:absolute; top:2.2rem; left:50%; right:auto; transform:translateX(-50%); flex-direction:row; gap:0; min-width:0; margin:0;
  background:rgba(28,25,25,.94); border:1px solid #3d3737; border-radius:1.6rem; overflow:hidden; white-space:nowrap }
.vsx__m > div{ display:flex; align-items:baseline; gap:1rem; background:none; padding:1.1rem 2rem }
.vsx__m > div + div{ border-left:1px solid #3d3737 }
.vsx__m span{ font-size:1.2rem }
.vsx__m strong{ font-size:1.9rem }
@media (max-width:991px){
  .vsx{ padding-bottom:1.6rem !important }
  .vsx__m{ position:static; transform:none; margin:1.4rem 1.4rem 0; white-space:normal }
  .vsx__m > div{ flex:1; flex-direction:column; gap:.2rem; padding:.9rem 1rem }
  .vsx__bar{ margin-left:1.4rem; margin-right:1.4rem }
}
.gal2__it.noanim{ transition:none !important }
.vsx__bar .vb--bi{ display:inline-flex; align-items:center; gap:.8rem }

/* ===== MOBILE: tasti e proporzioni ===== */
@media (max-width:767px){
  .c-bttn, .hero-f__cta .c-bttn{ padding:1.2rem 1.8rem; border-radius:1rem; gap:1rem }
  .c-bttn .lbl, .c-bttn .lbl.t-label{ font-size:1.5rem }
  .c-bttn .ico-wrap{ width:1.6rem; height:1.6rem }
  .feat__txt .c-bttn, .gal2__txt .c-bttn{ margin-top:2.8rem }
  .feat__title{ font-size:4rem }
  .pill{ font-size:1.3rem; margin-bottom:1.8rem }
}
@media (max-width:767px){
  .hero-f__cta{ gap:1.2rem }
  .gal2{ --ha:34rem }
  .gal2__grid{ gap:4rem }
  /* su telefono le foto verticali sono strette: la didascalia va a capo invece di uscire dallo schermo */
  .gal2__sel b{ font-size:1.2rem; line-height:1.35; padding:.5rem .9rem; white-space:normal; overflow:visible; text-overflow:clip }
  .gal2__next{ width:4.2rem; height:4.2rem }
  .gal2__next svg{ width:1.8rem; height:1.8rem }
  form .row2{ gap:0 }
  .field{ margin-bottom:2.6rem }
  .vsx__bar{ gap:.4rem; padding:.5rem }
  .vsx__grp + .vsx__grp{ border-left:0; padding-left:0 }
  .vb{ font-size:1.25rem; padding:.8rem 1rem }
  .vsx__m span{ font-size:1rem } .vsx__m strong{ font-size:1.7rem }
}
.gal2__view{ transition:height .5s var(--ease) }
/* gallery: il testo segue lo stesso margine delle altre sezioni, con piu' respiro */
.gal2__grid{ padding-left:max(8rem, calc((100vw - 160rem)/2 + 4rem)) }
@media (max-width:991px){ .gal2__grid{ padding-left:4rem } }
@media (max-width:598px){ .gal2__grid{ padding-left:2rem } }
/* simulazione su telefono: mappa in alto, numeri su tre colonne, comandi a tutta larghezza */
@media (max-width:767px){
  .vsx{ padding:0 0 1.4rem !important; border-radius:1.8rem }
  .vsx__m{ position:static; transform:none; margin:0; display:grid; grid-template-columns:repeat(3,1fr); white-space:normal;
    background:none; border:0; border-bottom:1px solid #3d3737; border-radius:0 }
  .vsx__m > div{ flex-direction:column; align-items:flex-start; gap:.3rem; padding:1.3rem 1.4rem }
  .vsx__m span{ font-size:1rem; letter-spacing:.06em } .vsx__m strong{ font-size:2rem }
  .vsx__bar{ position:static; transform:none; margin:1.4rem 1.4rem 0; padding:0; background:none; border:0; box-shadow:none;
    display:grid; grid-template-columns:1fr 1fr; gap:1rem; white-space:nowrap }
  .vsx__grp{ background:#1d1a1a; border:1px solid #3d3737; border-radius:1.2rem; padding:.4rem; justify-content:center; gap:.2rem }
  .vsx__grp + .vsx__grp{ border-left:1px solid #3d3737; padding-left:.4rem }
  .vsx__grp:first-child{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,1fr) }
  .vb{ font-size:1.4rem; padding:1rem .6rem; border-radius:.9rem; text-align:center; justify-content:center }
  .vb--bi{ width:100% }
  .vsx__deg{ min-width:4.4rem; font-size:1.4rem }
}
/* hero: rettangoli pieni dietro al claim; dove si incrociano, il testo va in negativo */
.hero-f__center{ z-index:auto }
.hero-f__title, .hero-f__sub{ position:relative; z-index:6 }   /* niente fusione: le scritte restano piene e il tracciato passa sotto */
.hero-f__cta{ position:relative; z-index:7 }
.frame:hover .frame__inner{ box-shadow:none }
.clients--band, .clients--band .marq{ overflow:hidden }
.vsx__bar .vb{ font-size:1.35rem; padding:.9rem 1.1rem }
.vsx__bar .vb--ic{ font-size:1.9rem; padding:.6rem .9rem }
@media (max-width:767px){
  .vsx__grp:first-child{ grid-template-columns:repeat(5,1fr) }
  .vsx__bar .vb{ font-size:1.15rem; padding:1rem .2rem }
  .vsx__bar .vb--ic{ font-size:1.8rem; padding:.6rem 1rem }
  .vsx__bar .vb--bi{ font-size:1.4rem }
}
/* ===== HERO a tre fasce ===== */
.hero-grid{ position:absolute; inset:8.4rem 0 0 0; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden }
.hero-grid__col{ position:relative; overflow:hidden }
.hc{ position:absolute; box-sizing:border-box; display:block; background-color:transparent;
  transition:background-color 1.4s cubic-bezier(.2,.6,.2,1) .08s }
.hc:hover{ background-color:var(--c); transition-duration:0s; transition-delay:0s }
.hc.lit{ background-color:color-mix(in srgb, var(--c) 60%, transparent); transition-duration:1.4s; transition-delay:0s }
.hero-f::before{ display:none !important }
.hero-f::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:22vh; z-index:2; pointer-events:none;
  background:linear-gradient(transparent, #000) }
.hero-f__stage{ z-index:auto; pointer-events:none }
.hero-f__center a{ pointer-events:auto }
/* sfumatura in alto, sotto la navbar: come quella in basso verso i clienti, ammorbidisce riquadri e tracciato */
.hero-grid::after{ content:''; position:absolute; left:0; right:0; top:0; height:20vh; z-index:3; pointer-events:none;
  background:linear-gradient(#000, transparent) }
@media (max-width:767px){ .hero-grid{ inset:6.4rem 0 0 0 } .hero-f::after{ height:12vh } .hero-grid::after{ height:10vh } }
.hero-grid.is-mob .hc:hover{ background-color:transparent }   /* su touch niente accensione al tocco */
.hero-grid.is-mob .hc.lit{ background-color:color-mix(in srgb, var(--c) 45%, transparent) }
.hero-grid.is-mob .hc.quiet.lit{ background-color:color-mix(in srgb, var(--c) 20%, transparent) }
/* onda (home.js): tela con gli stessi rettangoli della hero, sopra di essi, solo durante l'onda */
.hero-wave{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1 }
.vsx{ background:#211d1d; border-color:rgba(242,240,234,.12) }
.vsx__bar{ background:rgba(0,0,0,.82); border-color:rgba(242,240,234,.14) }
.vsx__m strong{ min-width:1.4em; font-variant-numeric:tabular-nums }
.vsx__lg{ position:absolute; top:8.2rem; left:50%; transform:translateX(-50%); display:flex; gap:2.2rem; white-space:nowrap; pointer-events:none;
  font-size:1.25rem; color:#cfcac4; background:rgba(0,0,0,.62); padding:.6rem 1.4rem; border-radius:1rem }
.vsx__lg span{ display:inline-flex; align-items:center; gap:.7rem }
.vsx__lg i{ display:inline-block; flex:none }
.lg-cone{ width:1.6rem; height:1.1rem; border-radius:.3rem; background:rgba(150,196,236,.45) }
.lg-car{ width:1.8rem; height:.5rem; border-radius:.3rem; background:#ec4f6a }
@media (max-width:991px){
  .vsx__lg{ position:static; transform:none; background:none; padding:1.2rem 1.4rem 0; flex-direction:column; gap:.6rem; white-space:normal; font-size:1.3rem }
}
@media (max-width:767px){ .vsx__bar{ background:none !important; border:0 !important } }
/* simulazione: dati e legenda sopra, comandi sotto; nel riquadro resta solo la scena */
.vsx{ display:flex !important; flex-direction:column; align-items:flex-start; gap:1.4rem; background:none !important; border:0 !important;
  border-radius:0 !important; padding:0 !important; overflow:visible !important }
.vsx__m{ order:1; position:static !important; transform:none !important; margin:0 !important; display:flex !important; flex-direction:row;
  background:rgb(33,29,29) !important; border:1px solid rgba(242,240,234,.12) !important; border-radius:1.4rem !important; white-space:nowrap }
.vsx__m > div{ flex-direction:row !important; align-items:baseline !important; gap:1rem !important; padding:1rem 1.8rem !important }
.vsx__lg{ order:2; position:static !important; transform:none !important; background:none !important; padding:0 .4rem !important;
  flex-direction:row !important; flex-wrap:wrap; gap:.6rem 2.2rem !important; white-space:normal !important; margin-bottom:.4rem }
.vsx #vsCv{ order:3; border-radius:2.2rem !important; border:1px solid rgba(242,240,234,.12); box-sizing:border-box }
.vsx__bar{ order:4; position:static !important; transform:none !important; margin:0 !important; align-self:center; max-width:100%;
  background:rgb(33,29,29) !important; border:1px solid rgba(242,240,234,.12) !important; box-shadow:none !important }
@media (max-width:767px){
  .vsx__m{ width:100%; display:grid !important; grid-template-columns:repeat(3,1fr); white-space:normal }
  .vsx__m > div{ flex-direction:column !important; gap:.2rem !important; padding:1rem 1.2rem !important }
  .vsx__m span{ font-size:1rem } .vsx__m strong{ font-size:1.9rem }
  .vsx__lg{ flex-direction:column !important; font-size:1.25rem }
  .vsx #vsCv{ border-radius:1.6rem !important }
  .vsx__bar{ width:100%; background:none !important; border:0 !important; display:grid !important; grid-template-columns:1fr 1fr; gap:1rem; padding:0 !important }
}
.vsx{ align-items:center !important }
.vsx__lg{ justify-content:center; text-align:center }
@media (max-width:767px){ .vsx__lg{ align-items:center } }
.reel-sq__box{ border-radius:1.2rem }
/* simulazione: scena fissa, senza legenda ne' comandi */
.vsx__lg, .vsx__bar{ display:none !important }
.vsx #vsCv{ cursor:default !important; touch-action:auto !important }
.vsx__m{ display:none !important }
/* showreel a tutta larghezza, a filo con la sezione successiva */
.reel-sq{ padding:8rem 0 0 !important }
.reel-sq .o-container{ max-width:none; padding:0 }
.reel-sq__box{ max-width:none !important; border:0 !important; border-radius:0 !important; display:block }
/* DOOH e Dati scambiati: i lati restano alternati */
.feat__grid--flip{ grid-template-columns:1.3fr 1fr }
.feat__grid--flip > .feat__txt{ order:2 }
.feat__grid--dataflip{ grid-template-columns:1fr 1.6fr }
.feat__grid--dataflip > .vsx{ order:2 }
@media (max-width:991px){
  .feat__grid--flip, .feat__grid--dataflip{ grid-template-columns:1fr }
  .feat__grid--flip > .feat__txt{ order:-1 }
}
@media (max-width:767px){ .reel-sq{ padding-top:5rem !important } }
/* footer: logo, testo e social sullo stesso asse; un po' piu' vicino al bordo alto */
.footer{ padding-top:8rem }
.footer__brand{ display:flex; flex-direction:column; align-items:center; text-align:center; width:fit-content; max-width:100% }
.footer__brand p{ margin-top:1.2rem; max-width:34rem }
.footer__brand .socials{ justify-content:center }
@media (max-width:991px){ .footer{ padding-top:6rem } .footer__brand{ margin:0 auto } }
/* titoli di sezione: un filo di respiro tra le lettere */
.feat__title, .stmt__title{ letter-spacing:-.008em }

/* ===== FORMATI: essenziale. Cinque sagome in scala tra loro, su una linea di terra ===== */
.fs{ list-style:none; margin:0; padding:0; display:flex; align-items:flex-end; gap:2.4% }
.fs li{ flex:var(--w) 0 0; display:flex; flex-direction:column; align-items:stretch; position:relative }
.fs__r{ display:block; aspect-ratio:var(--w) / var(--h); border:1px solid rgba(242,240,234,.38);
  background:linear-gradient(var(--fill, var(--salvia)), var(--fill, var(--salvia))) bottom / 100% 0% no-repeat;
  transition:background-size .7s var(--ease), border-color .4s }
.fs li:nth-child(even){ --fill:var(--magenta) }
.fs li:hover .fs__r{ background-size:100% 100%; border-color:transparent }
.fs__l{ position:absolute; top:calc(100% + 1.6rem); left:50%; transform:translateX(-50%); font:500 1.5rem var(--body); color:#a8a39c; white-space:nowrap; transition:color .4s }
.fs__l i{ font-style:normal; margin:0 .08em }
.fs li:nth-child(odd):hover .fs__l{ color:var(--salvia) }
.fs li:nth-child(even):hover .fs__l{ color:var(--magenta) }
.fs{ margin-bottom:5rem }
/* ingresso: le sagome salgono dalla linea di terra, una dopo l'altra */
.fs .fs__r{ transform-origin:50% 100%; transform:scaleY(0); transition:transform .9s var(--ease) calc(var(--i) * 90ms), background-size .7s var(--ease), border-color .4s }
.fs.in .fs__r, .no-js .fs .fs__r{ transform:none }
@media (max-width:767px){ .fs{ gap:2%; margin-bottom:3.6rem } .fs__l{ font-size:1.05rem; top:calc(100% + 1rem) } }
@media (prefers-reduced-motion:reduce){ .fs .fs__r{ transform:none; transition:none } }

/* ===== SHOWREEL: il video nasce come un cartellone 300X200 e, scorrendo, si apre a tutto schermo ===== */
.reel-sq{ display:none }
.reel3{ position:relative; height:260vh; margin-top:8rem }
.reel3__stick{ position:sticky; top:0; height:100vh; overflow:hidden }
.reel3__box{ position:absolute; inset:0; overflow:hidden; background:#0b0a0a; transform-origin:50% 50%; will-change:transform; border-radius:28px }
.reel3__in{ position:absolute; inset:0; transform-origin:50% 50%; will-change:transform }
.reel3__in iframe{ position:absolute; left:50%; top:50%; width:max(100vw, 177.78vh); height:max(56.25vw, 100vh);
  transform:translate(-50%,-50%); border:0; pointer-events:none }
@media (max-width:767px), (prefers-reduced-motion:reduce){
  .reel3{ height:auto; margin:4rem 0 9rem; padding:0 2rem }
  .reel3__stick{ position:relative; height:auto; aspect-ratio:16/9; border-radius:1.4rem; overflow:hidden; background:#0b0a0a }
  .reel3__box, .reel3__in{ transform:none !important; border-radius:0 !important }
  .reel3__in iframe{ left:0; top:0; width:100%; height:100%; transform:none }
}

/* ===== HERO alta quanto lo schermo meno la fascia clienti: la fascia tocca il bordo basso della finestra ===== */
.hero-f{ min-height:calc(100vh - var(--cl-h, 12rem)); min-height:calc(100svh - var(--cl-h, 12rem)) }
.hero-f__stage{ height:calc(100vh - var(--cl-h, 12rem)); height:calc(100svh - var(--cl-h, 12rem)) }
@media (max-width:767px){
  .hero-f__stage{ height:auto; min-height:calc(100vh - var(--cl-h, 9rem)); min-height:calc(100svh - var(--cl-h, 9rem));
    padding:7rem 2rem 3rem; justify-content:center }
}

/* hero: un solo tasto, bianco; al passaggio sale il verde */
.hero-f__cta .c-bttn{ background:#f2f0ea; color:#000 }
.hero-f__cta .c-bttn::before{ background:var(--salvia) }

/* Scrivici: foto sotto al testo, a bilanciare il modulo (solo su computer) */
.contact__pic{ margin:1rem 0 0; max-width:52rem; aspect-ratio:4/3; border-radius:1.2rem; overflow:hidden; background:rgba(242,240,234,.04) }
.contact__pic img{ width:100%; height:100%; object-fit:cover; display:block }
@media (max-width:991px){ .contact__pic{ display:none } }
/* modulo Scrivici più compatto in altezza, per stare nello schermo */
@media (min-width:992px){
  #contatti.contact{ padding:10rem 0 }
  #contatti .form-card{ padding:3.6rem 4.4rem }
  #contatti .form-card .field{ margin-bottom:2.4rem }
  #contatti .form-card .field textarea{ min-height:7.2rem }
  #contatti .form-card .zm{ margin:-.4rem 0 1rem }
  #contatti .form-card .pd, #contatti .form-card .bdg{ margin:0 0 1rem }
  #contatti .form-card .bdg{ margin-bottom:2.4rem }
  #contatti .form-card .zm__tg{ padding:1.15rem 1.5rem }
  #contatti .form-card .privacy{ margin-bottom:2.2rem }
  #contatti .lead{ margin-bottom:2.8rem }
}

/* manifesto: una parola verde e una rossa, il resto bianco (tricolore) */
.stmt__title .w-g{ color:var(--salvia-l) }
.stmt__title .w-r{ color:var(--magenta) }
/* frase tutta bianca, con le virgolette nel testo (piene, a goccia), piu' grandi: apertura verde prima di "Le", chiusura rossa dopo "migliori." */
.stmt__a, .stmt__z{ white-space:nowrap }
.stmt__qm{ display:inline-block; height:.76em; width:.96em; vertical-align:baseline; pointer-events:none }   /* alte quanto le lettere piu' alte (l, d, g) */
.stmt__qm--o{ margin-right:.14em; fill:var(--salvia-l) }
.stmt__qm--c{ margin-left:.12em; fill:var(--magenta); transform:rotate(180deg) }
.stmt{ position:relative; z-index:2 }

/* gallery: cornici alternate verde, bianco, rosso */
.gal2__it:nth-child(3n+1){ --fc:#9ed8b5; --fc-t:#000 }
.gal2__it:nth-child(3n+2){ --fc:#f2f0ea; --fc-t:#000 }
.gal2__it:nth-child(3n){ --fc:var(--magenta); --fc-t:#fff }

/* tasti chiari: stesso effetto di sempre, cambia solo il colore che sale al passaggio (grigio caldo neutro) */
.c-bttn::before, .c-bttn.is-magenta::before, .hero-f__cta .c-bttn::before, .hero-f__cta .c-bttn.is-magenta::before{ background:var(--hov, var(--condo, #B6B5D8)) }
.condo-sec .c-bttn::before{ background:var(--condo) }

/* DOOH: "sostenibile". Quando entra nello schermo una fogliolina attraversa la parola da sinistra a destra
   e, al suo passaggio, la parola si colora di verde. Poi la foglia esce e sparisce. La foglia la aggiunge home.js. */
.eco{ position:relative; display:inline-block; white-space:nowrap }
.eco__w{ position:relative; font-weight:500;
  background:linear-gradient(90deg, #9ed8b5 0 47%, #d4d0ca 53% 100%); background-size:240% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent }
/* x: stesso andamento del colore, cosi' la foglia sta sempre sul bordo che si colora */
.eco__lf{ position:absolute; left:0; top:50%; width:.62em; height:.62em; margin:-.31em 0 0 -.31em; pointer-events:none; opacity:0;
  transform:translateX(calc(var(--w, 100px) * -.2)) }
.eco__lf i{ display:block; width:100%; height:100% }
.eco__lf svg{ display:block; width:100%; height:100%; fill:#9ed8b5 }
.eco.is-in .eco__w{ background-position:0 0; transition:background-position 1.5s cubic-bezier(.45,0,.4,1) }
.eco.is-in .eco__lf{ animation:ecoX 1.5s cubic-bezier(.45,0,.4,1) both, ecoO 1.5s linear both }
.eco.is-in .eco__lf i{ animation:ecoFl 1.5s ease-in-out both }
@keyframes ecoX{ from{ transform:translateX(calc(var(--w, 100px) * -.2)) } to{ transform:translateX(calc(var(--w, 100px) * 1.2)) } }
@keyframes ecoO{ 0%{ opacity:0 } 12%{ opacity:1 } 80%{ opacity:1 } 100%{ opacity:0 } }
@keyframes ecoFl{
  0%{ transform:translateY(.25em) rotate(-35deg) }
  30%{ transform:translateY(-.35em) rotate(10deg) }
  60%{ transform:translateY(.05em) rotate(-15deg) }
  100%{ transform:translateY(-.55em) rotate(40deg) }
}
@media (prefers-reduced-motion:reduce){
  .eco__w{ background-position:0 0 } .eco__lf{ display:none } .eco.is-in .eco__w{ transition:none }
}

/* hero: testo centrato tra il bordo basso del menu e il bordo alto della fascia clienti */
@media (min-width:768px){
  .hero-f__center{ top:var(--nav-h, 8.4rem); bottom:auto; height:calc(100svh - var(--cl-h, 12rem) - var(--nav-h, 8.4rem)) }
}

/* unica pillola rimasta (Digital Out-of-Home): stellina a quattro punte, fissa */
.pill--dooh{ display:inline-flex; align-items:center; gap:.7rem }
.pill__star{ width:1.4rem; height:1.4rem; flex:none; fill:#f2f0ea; overflow:visible; transform-origin:50% 50%;
  filter:drop-shadow(0 0 .35rem rgba(242,240,234,.75)) }

/* Chi siamo: tre numeri sotto il testo, allineati a sinistra come il paragrafo */
.feat__txt .facts{ margin-top:4.4rem; max-width:52rem; grid-template-columns:repeat(3,auto); justify-content:start; border-top:1px solid var(--rule) }
.feat__txt .fact{ text-align:left; padding:2.4rem 3.6rem 0 0; margin-right:3.6rem; border-right:1px solid var(--rule) }
.feat__txt .fact:last-child{ margin-right:0; padding-right:0; border-right:0 }
.feat__txt .fact .n{ font-size:4.4rem; color:var(--paper) }
.feat__txt .fact .n i{ font-style:normal; color:var(--salvia) }
.feat__txt .fact .l{ margin-top:1rem; font-size:1.15rem; color:#a8a39c; white-space:nowrap }
@media (max-width:598px){
  .feat__txt .facts{ grid-template-columns:repeat(3,1fr) }
  .feat__txt .fact{ padding-right:1.4rem; margin-right:1.4rem }
  .feat__txt .fact .n{ font-size:3rem } .feat__txt .fact .l{ font-size:.95rem; letter-spacing:.1em }
}

/* frase "Le idee migliori…": prima compaiono le due virgolette vicine al centro, poi si aprono e scoprono la frase,
   infine compare il testo sotto. L'animazione la gestisce home.js (classe .stmt--anim finche' non e' partita). */
.stmt--anim .stmt__title{ clip-path:inset(-30% 50% -30% 50%) }
.stmt--anim .stmt__title .stmt__qm{ opacity:0 }
.stmt--anim .stmt__sub{ opacity:0; transform:translateY(1.6rem) }
.stmt__sub.is-open{ opacity:1; transform:none; transition:opacity .9s ease, transform .9s cubic-bezier(.19,1,.22,1) }
.stmt__fly{ position:absolute; left:0; top:0; z-index:3; pointer-events:none; will-change:transform, opacity }