/* ==========================================================================
   Asso — sito costruito sul template Ace Barbers
   Design system ricavato dall'analisi frame-by-frame della registrazione.
   Vedi uploads/screenshot temporanei/ANIMAZIONI-E-DESIGN.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Font serviti dal nostro dominio
   Niente richieste a Google: i file stanno in /fonts. Oltre a essere piu'
   veloce (una connessione esterna in meno, e dal 2020 la cache del browser
   e' separata per sito, quindi il CDN non fa piu' risparmiare nulla), evita
   di comunicare l'IP dei visitatori a un terzo senza il loro consenso.
   Solo i pesi realmente usati: Playfair 400, Poppins 400/500/600.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../../fonts/playfair-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../../fonts/playfair-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../../fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../../fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../../fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../../fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../../fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../../fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. Token
   -------------------------------------------------------------------------- */
:root{
  /* colori campionati a pixel dal video */
  --bg:            #060606;
  --bg-black:      #000000;
  --surface:       #0b0b0b;
  --border:        rgba(255,255,255,.10);
  --border-soft:   rgba(255,255,255,.06);
  --border-strong: rgba(255,255,255,.18);
  --hover-fill:    rgba(255,255,255,.14);

  --text:          #ffffff;
  --text-warm:     #f2efe9;
  --text-soft:     rgba(255,255,255,.72);
  --muted:         rgba(255,255,255,.66);
  --dim:           rgba(255,255,255,.33);
  --logo:          #b9b3ad;

  /* tipografia */
  --serif: "Playfair Display", "Prata", "Bodoni Moda", Didot, Georgia, serif;
  --sans:  "Poppins", "Sora", "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-h1:      clamp(2.25rem, 5vw, 68px);
  --fs-h2:      clamp(2rem, 5.4vw, 72px);
  --fs-h3:      clamp(1.0625rem, 1.7vw, 23px);

  /* layout */
  /* Il testo resta incolonnato come nell'originale (1167px di contenuto).
     Sono gli SFONDI a dover arrivare ai bordi dello schermo, non il testo:
     vedi .hero, .about__media e .hatch. */
  --container:  1279px;   /* 1167px di contenuto + 2 x 56px di gutter */
  --gutter:     56px;
  --header-h:   74px;     /* logo 46px + 2 x 14px di padding */
  --gap:        13px;
  --section:    clamp(80px, 12.5vw, 160px);

  /* motion */
  --e-text:  cubic-bezier(.22, 1, .36, 1);
  --e-mass:  cubic-bezier(.16, 1, .30, 1);
  --e-hover: cubic-bezier(.33, 1, .68, 1);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;   /* niente ingrandimento automatico in orizzontale */
  -webkit-tap-highlight-color:transparent;   /* via il lampo grigio al tocco */
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.5;
  /* le larghezze misurate sono ~7% più strette di Poppins a corpo pieno:
     il tema stringe il sans, firma tipica dei template Framer */
  letter-spacing:-.02em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,p,figure{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

::selection{ background:rgba(255,255,255,.18); color:#fff; }

/* scrollbar discreta, coerente col tema */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#2a2a2a; }
::-webkit-scrollbar-thumb:hover{ background:#3a3a3a; }

:focus-visible{ outline:2px solid rgba(255,255,255,.55); outline-offset:3px; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  /* su telefoni con notch, in orizzontale, il contenuto finirebbe sotto
     l'angolo dello schermo: il margine non scende mai sotto l'area sicura */
  padding-left:max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right:max(var(--gutter), env(safe-area-inset-right, 0px));
}
.section{ padding-block:var(--section); }
.section--tight{ padding-block:0 var(--section); }

/* con la barra fissa, l'ancora finirebbe sotto l'header: si tiene il posto */
html{ scroll-behavior:smooth; }
[id]{ scroll-margin-top:calc(var(--header-h) + 16px); }

/* il serif display non eredita la stretta del sans: ha la sua misura */
.hero__title,
.h2,
.svc__name,
.svc__price,
.member__name,
.review__quote,
.stat__value,
.about__title,
.legal__title,
.page-404__title,
.brand__name{ letter-spacing:-.01em; }

.h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--fs-h2);
  line-height:1.0;
  letter-spacing:-.015em;
  color:var(--text);
}
.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:clamp(28px, 4vw, 48px);
}

/* --------------------------------------------------------------------------
   4. Header — fisso in alto
   -------------------------------------------------------------------------- */
/* Fissa in alto e SOPRA il contenuto, non prima di esso: solo così, in cima
   alla pagina, il fondo trasparente lascia vedere la foto dell'hero. Se
   restasse nel flusso il "trasparente" mostrerebbe comunque il nero della
   pagina e non si distinguerebbe dallo stato scorrito.
   Le sezioni che stanno sotto compensano con un padding pari a --header-h.
   Nota: nel template originale l'header NON era fisso (verificato sui
   frame 005-007); è una scelta voluta, non una deviazione involontaria. */
.header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  padding-block:14px;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--e-hover),
             border-color .35s var(--e-hover);
}
/* scorrendo diventa tinta unita, lo stesso nero del resto del sito */
.header.is-stuck{
  background:var(--bg);
  border-bottom-color:var(--border);
}
/* logo a sinistra, menu centrato, lingua e hamburger a destra:
   le tre colonne laterali sono 1fr, così il menu resta davvero al centro
   della pagina e non del solo spazio residuo */
.header__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}
/* Collocazione ESPLICITA delle tre celle. Senza, il piazzamento automatico
   dipende da quanti figli sono in flusso: il menu diventa fisso sotto i
   1080px ed esce dal conteggio, e i comandi di destra finivano nella cella
   sbagliata. Indicando la colonna a ciascuno il problema non si pone.
   min-width:0 sul logo evita che, se il nome fosse lungo, la prima traccia
   si rifiuti di restringersi spingendo i comandi fuori dallo schermo. */
.header__inner > .brand{ grid-column:1; justify-self:start; min-width:0; }
.header__inner > .nav{ grid-column:2; }
.header__inner > .header__actions{ grid-column:3; }
.brand{
  display:inline-flex;
  align-items:center;
  gap:19px;
}
.brand__mark{ width:63px; height:46px; flex:none; }
.brand__name{
  font-family:var(--serif);
  font-weight:400;
  font-size:29px;
  line-height:1;
  color:var(--logo);
  white-space:nowrap;
  transition:color .3s var(--e-hover);
}
.brand:hover .brand__name{ color:var(--text-warm); }

.nav{ display:flex; align-items:center; gap:clamp(16px, 1.9vw, 30px); }
.nav__link{
  position:relative;
  font-size:16px;
  color:var(--text);
  padding-block:4px;
}
.nav__link::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .4s var(--e-hover);
}
.nav__link:hover::after{ transform:scaleX(1); transform-origin:left; }
/* la voce della sezione in cui ci si trova resta sottolineata */
.nav__link.is-active::after{ transform:scaleX(1); transform-origin:left; }

.header__actions{
  display:flex;
  align-items:center;
  justify-self:end;
  gap:20px;
}

.nav__toggle{ display:none; }

/* --------------------------------------------------------------------------
   4b. Selettore della lingua
   Stessa grammatica del resto del sito: angoli vivi, bordo hairline,
   nessun fill a riposo.
   -------------------------------------------------------------------------- */
.lang{ position:relative; flex:none; }

.lang__btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:34px;
  padding:0 12px;
  border:1px solid var(--border-strong);
  border-radius:0;
  background:transparent;
  color:var(--text);
  font-size:13px;
  font-weight:500;
  letter-spacing:.04em;
  transition:background-color .3s var(--e-hover), border-color .3s var(--e-hover);
}
.lang__btn:hover{ background:var(--hover-fill); border-color:transparent; }

.lang__flag{
  width:19px;
  height:13.5px;
  flex:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
.lang__chev{
  width:10px;
  height:10px;
  flex:none;
  opacity:.7;
  transition:transform .28s var(--e-hover);
}
.lang.is-open .lang__chev{ transform:rotate(180deg); }

.lang__menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:70;
  min-width:176px;
  padding:6px;
  border:1px solid var(--border);
  background:#0d0d0d;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .26s var(--e-hover), transform .26s var(--e-hover), visibility .26s;
}
.lang.is-open .lang__menu{ opacity:1; visibility:visible; transform:none; }

.lang__menu button{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 12px;
  font-size:14px;
  color:var(--muted);
  text-align:left;
  transition:background-color .18s var(--e-hover), color .18s var(--e-hover);
}
.lang__menu button:hover{ background:rgba(255,255,255,.07); color:var(--text); }
.lang__menu button[aria-selected="true"]{ color:var(--text); }

/* pallino che segna la lingua attiva */
.lang__menu button::after{
  content:"";
  margin-left:auto;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--text);
  opacity:0;
  transition:opacity .18s var(--e-hover);
}
.lang__menu button[aria-selected="true"]::after{ opacity:1; }

/* sulla 404 non c'è header: il selettore galleggia in alto a destra */
.lang--float{
  position:fixed;
  top:24px;
  right:24px;
  z-index:40;
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
/* Header + hero occupano insieme esattamente una schermata. */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  /* l'header galleggia sopra: la sezione è alta tutto lo schermo e si
     limita a tenere libera la fascia superiore con il padding */
  min-height:100vh;
  min-height:100svh;
  padding-top:var(--header-h);
  padding-bottom:12px;
  background:var(--bg-black);
}
.hero__inner{
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:100%;
}
.hero__content{
  position:relative;
  z-index:3;
  max-width:640px;
}
.hero__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--fs-h1);
  line-height:1.06;
  letter-spacing:-.02em;
  color:var(--text);
}
/* un solo stile per tutte le righe del titolo: stesso font, stesso peso,
   niente corsivo di contrasto */
.hero__line{ display:block; }

.hero__lead{
  max-width:54ch;
  margin-top:clamp(18px, 2.4vw, 26px);
  font-size:clamp(1rem, 1.25vw, 18px);
  line-height:1.6;
  color:rgba(255,255,255,.76);
}

/* riprova sociale: volti, stelle e numero delle recensioni */
.hero__proof{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:clamp(30px, 4vw, 44px);
}
.avatars{ display:flex; align-items:center; }
.avatars li{ display:block; }
.avatars li + li{ margin-left:-13px; }
.avatars img{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--bg-black);
  filter:saturate(.6) contrast(1.1);
}
.hero__rating{ display:flex; flex-direction:column; gap:6px; }
.hero__score{ font-size:14px; color:rgba(255,255,255,.82); }
.hero__note{
  margin-top:12px;
  font-size:13.5px;
  color:rgba(255,255,255,.52);
}

/* L'immagine sta SOPRA il titolo con blend "lighten": il nero della foto
   diventa trasparente e solo le mani illuminate coprono le lettere.
   È questo che produce l'effetto "mani davanti alla scritta". */
/* La foto riempie l'intera sezione e sta DIETRO al testo. Il velo sfumato
   è più fitto a sinistra, dove c'è il contenuto, e si apre a destra per
   lasciar respirare l'immagine; la fascia scura in alto serve a tenere
   leggibile la barra fissa quando è ancora trasparente. */
.hero__media{
  position:absolute;
  inset:0;
  z-index:0;
  margin:0;
  pointer-events:none;
  overflow:hidden;
}
.hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(6,6,6,.94) 0%,
      rgba(6,6,6,.80) 38%,
      rgba(6,6,6,.34) 68%,
      rgba(6,6,6,.18) 100%),
    linear-gradient(180deg,
      rgba(6,6,6,.60) 0%,
      rgba(6,6,6,0) 26%,
      rgba(6,6,6,0) 74%,
      rgba(6,6,6,.42) 100%);
}

/* --------------------------------------------------------------------------
   6. Bottoni
   -------------------------------------------------------------------------- */
.btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:95px;
  padding:24px 32px;
  border:1px solid var(--border-strong);
  border-radius:0;
  background:transparent;
  color:var(--text);
  font-size:19px;
  text-align:center;
  isolation:isolate;
  transition:border-color .35s var(--e-hover);
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;   /* il riempimento segue l'arrotondamento del bordo */
  background:var(--hover-fill);
  opacity:0;
  transition:opacity .35s var(--e-hover);
}
.btn:hover::before{ opacity:1; }
.btn:hover{ border-color:transparent; }

.btn--sm{ min-height:64px; font-size:17px; }

/* Le due CTA dell'hero: gruppo a sinistra, largo circa metà colonna.
   Il secondario resta in outline, il principale ha fondo pieno così
   stacca dalla foto invece di confondersi con essa. */
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:clamp(26px, 3.4vw, 38px);
  max-width:520px;
}
.hero__actions .btn{
  flex:1 1 auto;
  width:auto;
  min-width:190px;
  min-height:68px;
  padding:20px 26px;
  border-radius:5px;   /* unico punto del sito con gli angoli smussati */
  font-size:17px;
}
.btn--solid{
  background:var(--text-warm);
  border-color:transparent;
  color:#060606;
  font-weight:500;
}
.btn--solid::before{ background:#ffffff; }
.btn--solid:hover{ border-color:transparent; }

/* --------------------------------------------------------------------------
   7. Servizi
   -------------------------------------------------------------------------- */
/* Griglia di riquadri numerati: 4 x 2 riempie esattamente gli otto servizi.
   Ogni riquadro è una scheda a sé — indice in alto, nome e descrizione al
   centro, prezzo staccato in basso da un filetto. */
.services__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--gap);
  margin-top:clamp(28px, 4vw, 48px);
}

.svc{
  display:flex;
  flex-direction:column;
  min-height:246px;
  padding:24px 22px 20px;
  border:1px solid rgba(255,255,255,.12);
  background:transparent;
  transition:border-color .45s var(--e-hover), background-color .45s var(--e-hover);
}
.svc:hover{
  border-color:rgba(255,255,255,.30);
  background:rgba(255,255,255,.035);
}

.svc__body{ display:block; flex:1; min-width:0; }
.svc__name{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--fs-h3);
  line-height:1.18;
  color:var(--text);
}
.svc__desc{
  display:block;
  margin-top:9px;
  font-size:14px;
  line-height:1.5;
  color:rgba(255,255,255,.6);
}

/* riga finale: prezzo a sinistra, pulsante a destra */
.svc__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.10);
}
.svc__price{
  display:flex;
  align-items:baseline;
  gap:9px;
  font-family:var(--serif);
  color:var(--text);
  white-space:nowrap;
}
.svc__cta{
  flex:none;
  padding:10px 17px;
  border:1px solid var(--border-strong);
  font-size:13.5px;
  color:var(--text);
  white-space:nowrap;
  transition:background-color .3s var(--e-hover),
             border-color .3s var(--e-hover),
             color .3s var(--e-hover);
}
.svc:hover .svc__cta{ border-color:rgba(255,255,255,.42); }
.svc__cta:hover{
  background:var(--text-warm);
  border-color:transparent;
  color:#060606;
}
.svc__from{ font-size:16px; color:rgba(255,255,255,.6); }
.svc__amount{
  font-size:clamp(1.5rem, 2.5vw, 33px);
  line-height:1;
  /* cifre old-style: nell'originale 2, 5, 7 scendono sotto la linea di base */
  font-variant-numeric:oldstyle-nums;
  font-feature-settings:"onum" 1;
}

/* --------------------------------------------------------------------------
   8. Marquee (gallery + recensioni)
   -------------------------------------------------------------------------- */
.marquee{
  overflow:hidden;
  width:100%;
}
.marquee__track{
  display:flex;
  gap:13px;
  width:max-content;
  will-change:transform;
  animation:mq-left var(--mq-duration, 60s) linear infinite;
}
.marquee__track--right{ animation-name:mq-right; }

@keyframes mq-left{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(calc(var(--mq-shift, 50%) * -1), 0, 0); }
}
@keyframes mq-right{
  from{ transform:translate3d(calc(var(--mq-shift, 50%) * -1), 0, 0); }
  to  { transform:translate3d(0,0,0); }
}

.gallery__rows{ display:flex; flex-direction:column; gap:12px; }

/* L'altezza è legata al viewport, non fissa: così su desktop il titolo e
   tutte e due le righe entrano insieme in una schermata. */
.gallery__img{
  flex:0 0 auto;
  height:clamp(190px, 33vh, 340px);
  width:auto;
  aspect-ratio:381 / 438;
  object-fit:cover;
  background:#0a0a0a;
}

/* --------------------------------------------------------------------------
   9. Recensioni
   -------------------------------------------------------------------------- */
.rating{
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:6px;
  white-space:nowrap;
}
.rating__text{ font-size:14px; color:rgba(255,255,255,.9); }
.rating__text span{ color:var(--muted); }

/* ---- stelle -------------------------------------------------------------
   Ogni stella è un glifo a sé, così i mezzi voti si ottengono ritagliando
   il riempimento del singolo glifo invece di approssimare con un'icona. */
.stars{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:16px;
  line-height:1;
  color:#fff;
}
.stars i{ font-style:normal; display:block; }
.stars i::before{ content:"★"; }
.stars .s-off{ color:rgba(255,255,255,.24); }
.stars .s-part{
  --p:50%;
  background-image:linear-gradient(90deg, #fff 0 var(--p), rgba(255,255,255,.24) var(--p) 100%);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

.reviews{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 27%, #000 72%, transparent 93%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 27%, #000 72%, transparent 93%);
}

.review{
  flex:0 0 344px;
  height:208px;
  display:flex;
  flex-direction:column;
  padding:18px 22px;
  border:1px solid rgba(255,255,255,.09);
  text-align:center;
}
.review__body{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
}
.review__quote{
  font-family:var(--serif);
  font-weight:400;
  font-size:18px;
  line-height:1.25;
  color:#fafafa;
  /* niente <br> a mano: la spezzatura la bilancia il browser, così regge
     a qualsiasi larghezza della card */
  text-wrap:balance;
}
.review__author{ font-size:13.5px; color:rgba(255,255,255,.66); margin-top:-10px; }
.review .stars{ justify-content:center; font-size:15px; }

/* --------------------------------------------------------------------------
   10. Team
   -------------------------------------------------------------------------- */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gap);
}
.grid-4{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--gap);
  margin-top:clamp(36px, 5vw, 64px);
}

/* --------------------------------------------------------------------------
   10b. Chi siamo — righe testo/foto alternate
   -------------------------------------------------------------------------- */
.split{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  align-items:center;
  gap:clamp(28px, 4vw, 64px);
  margin-top:clamp(36px, 5vw, 64px);
}
/* invertendo l'ordine visivo il markup resta nell'ordine di lettura:
   titolo e testo vengono comunque prima della foto per chi usa uno screen reader */
.split--flip .split__text{ order:2; }
.split--flip .split__media{ order:1; }

.split__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.5rem, 2.6vw, 34px);
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--text-warm);
  margin-bottom:16px;
}
.split__p{
  font-size:16px;
  line-height:1.65;
  color:rgba(255,255,255,.62);
  max-width:46ch;
}
.split__media{
  margin:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
}
.split__media img{
  width:100%;
  height:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  filter:saturate(.72) contrast(1.06) brightness(.94);
}
.member{ border:1px solid rgba(255,255,255,.11); }
.member__media{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/5;
  /* su schermi molto larghi il rapporto da solo farebbe crescere troppo
     le card: il ritaglio si limita in altezza e l'immagine resta in cover */
  max-height:500px;
  background:#050505;
  border-bottom:1px solid rgba(255,255,255,.11);
}
.member__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* grading comune: nell'originale i sei ritratti sono uno shooting unico.
     Desatura e contrasta quel tanto che basta a farli sembrare una sola serie. */
  filter:saturate(.6) contrast(1.1) brightness(.94);
  /* --ty è pilotato dall'animazione d'ingresso, --sc dall'hover:
     tenendoli separati i due effetti non si sovrascrivono a vicenda. */
  --ty:0px;
  --sc:1;
  transform:translateY(var(--ty)) scale(var(--sc));
  transition:opacity .45s var(--e-hover), transform .7s var(--e-hover);
}
.member__media .is-hover{ opacity:0; }
.member:hover .is-hover{ opacity:1; }
.member:hover .is-base{ opacity:0; }
.member:hover .member__media img{ --sc:1.03; }

.member__info{ padding:16px 16px 18px; }
.member__name{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.125rem, 1.65vw, 22px);
  line-height:1.15;
  color:var(--text-warm);
}
.member__role{ margin-top:8px; font-size:13.5px; color:rgba(255,255,255,.61); }
.member__years{
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:12.5px;
  letter-spacing:.02em;
  color:rgba(255,255,255,.42);
  font-variant-numeric:lining-nums;
  transition:color .45s var(--e-hover);
}
.member:hover .member__years{ color:rgba(255,255,255,.68); }

/* --------------------------------------------------------------------------
   11. Numeri
   -------------------------------------------------------------------------- */
.stat{
  min-height:176px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:28px 20px;
  border:1px solid #212121;
  text-align:center;
}
.stat__value{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.25rem, 4.7vw, 62px);
  line-height:1;
  color:var(--text);
  /* cifre a larghezza fissa: durante il conteggio il numero cambia a ogni
     frame e senza questo la card "respirerebbe" */
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1, "tnum" 1;
}
.stat__label{ font-size:14px; color:rgba(255,255,255,.72); }


/* --------------------------------------------------------------------------
   13. About / contatti
   -------------------------------------------------------------------------- */
.about{
  position:relative;
  isolation:isolate;
  /* Lo spazio sopra il titolo va misurato sull'ALTEZZA della finestra, non
     sulla larghezza: con 24vw su un portatile largo ma basso diventava una
     fascia fissa di 320px, cioè mezzo schermo di vuoto. Con vh si adatta. */
  padding-block:clamp(72px, 15vh, 170px) clamp(48px, 6vh, 76px);
}
/* a tutta larghezza: niente inset laterale, altrimenti restano due bande nere */
.about__media{
  position:absolute;
  inset:0;
  z-index:-1;
  margin:0;
  overflow:hidden;
}
.about__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 32%;
}
.about__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(6,6,6,.30) 0%,
    rgba(6,6,6,.10) 30%,
    rgba(6,6,6,.82) 68%,
    rgba(6,6,6,.96) 100%);
}
/* il logo affianca il titolo, con l'altezza legata al corpo del titolo
   così i due restano proporzionati a qualsiasi larghezza */
.about__head{
  display:flex;
  align-items:center;
  gap:clamp(14px, 1.6vw, 22px);
  margin-bottom:20px;
}
.about__mark{
  flex:none;
  height:clamp(34px, 4.3vw, 58px);
  width:auto;
}
.about__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--fs-h2);
  line-height:1.0;
  letter-spacing:-.015em;
}

/* Desktop: testo | pagine | orari e social, con l'indirizzo sotto al testo.
   L'indirizzo è un elemento a sé della griglia, non annidato nel testo, così
   sul telefono può spostarsi nella colonna degli orari senza duplicarlo. */
.about__grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto auto;
  gap:34px clamp(32px, 4vw, 64px);
  align-items:start;
}
.about__main   { grid-column:1; grid-row:1; max-width:600px; }
.about__contact{ grid-column:1; grid-row:2; }
.about__links  { grid-column:2; grid-row:1 / span 2; }
.about__side   { grid-column:3; grid-row:1 / span 2; }

.about__col-title{
  margin-bottom:14px;
  font-size:16px;
  font-weight:500;
  line-height:1.6;
  color:var(--text);
}
.about__links{ min-width:140px; }
.about__links ul{ display:flex; flex-direction:column; gap:9px; }
.about__links a{
  font-size:16px;
  color:rgba(255,255,255,.66);
  transition:color .3s var(--e-hover);
}
.about__links a:hover{ color:var(--text); }
.about__text{
  font-size:16px;
  line-height:1.6;
  color:rgba(255,255,255,.62);
}
.about__text strong{ font-weight:600; color:var(--text); }

.about__contact{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  font-style:normal;
  font-size:16px;
  line-height:1.5;
  color:var(--text);
}
.about__contact a{ transition:opacity .3s var(--e-hover); }
.about__contact a:hover{ opacity:.68; }

.about__side{
  display:flex;
  flex-direction:column;
  gap:clamp(28px, 3vw, 40px);
  min-width:210px;
}
.hours{ font-size:16px; line-height:1.6; font-weight:500; color:var(--text); }
.hours dt{ margin-bottom:2px; }
.hours dd{ margin:0; }

.social{ display:flex; gap:12px; }
.social a{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid var(--border-strong);
  color:var(--text);
  transition:background-color .3s var(--e-hover), border-color .3s var(--e-hover);
}
.social a:hover{ background:var(--hover-fill); border-color:transparent; }
.social svg{ width:17px; height:17px; fill:currentColor; }

/* --------------------------------------------------------------------------
   14. Banda diagonale
   -------------------------------------------------------------------------- */
/* Righe diagonali: misurate a ~57° dall'orizzontale, passo perpendicolare
   12px, spessore 1px, nessun bordo — il pattern è solo clippato.
   Chiude la pagina al posto del footer. */
.hatch{
  height:90px;
  overflow:hidden;
  background-image:repeating-linear-gradient(
    122deg,
    transparent 0 11px,
    rgba(255,255,255,.30) 11px 12px
  );
}

/* --------------------------------------------------------------------------
   15. Pagina 404
   -------------------------------------------------------------------------- */
.page-404{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:56px 0;
  background:var(--bg-black);
}
.page-404__bg{
  position:fixed;
  inset:0;
  z-index:-1;
}
.page-404__bg img{ width:100%; height:100%; object-fit:cover; }
.page-404__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,.30) 0%, rgba(0,0,0,.72) 100%);
}
.page-404__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(4.5rem, 12vw, 158px);
  line-height:1;
  text-align:center;
  margin-bottom:clamp(48px, 9vw, 120px);
  text-shadow:0 6px 60px rgba(0,0,0,.6);
}
.page-404 .btn{ min-height:105px; font-size:23px; }

/* --------------------------------------------------------------------------
   15b. Pagina contatti
   -------------------------------------------------------------------------- */
.contact{ padding-block:calc(var(--header-h) + clamp(40px, 7vw, 90px)) var(--section); }
.contact__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.25rem, 6vw, 76px);
  line-height:1.02;
  letter-spacing:-.015em;
}
.contact__lead{
  max-width:56ch;
  margin-top:18px;
  font-size:17px;
  line-height:1.6;
  color:var(--muted);
}

/* blocco "chiama ora": sta sopra al form perché per un barbiere la
   telefonata resta la via più rapida */
.callnow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:22px;
  margin-top:clamp(36px, 5vw, 56px);
  padding:clamp(22px, 3vw, 32px);
  border:1px solid var(--border);
  background:#0c0c0c;
}
.callnow__label{ font-size:14px; letter-spacing:.04em; color:var(--dim); }
.callnow__number{
  display:block;
  margin-top:6px;
  font-family:var(--serif);
  font-size:clamp(1.5rem, 3.4vw, 40px);
  line-height:1.1;
  color:var(--text);
  font-variant-numeric:lining-nums;
}
.callnow__hint{ margin-top:8px; font-size:14px; color:var(--muted); }
.callnow .btn{ width:auto; min-width:200px; min-height:60px; padding:18px 26px; font-size:16px; }

/* form a sinistra, informazioni chiave a destra */
.contact__grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 300px;
  gap:var(--gap);
  align-items:start;
  margin-top:clamp(40px, 5vw, 64px);
}
.contact__grid .formcard{ margin-top:0; max-width:none; }

.info{
  padding:clamp(22px, 2.6vw, 30px);
  border:1px solid var(--border);
  background:#0c0c0c;
}
.info__block + .info__block{
  margin-top:22px;
  padding-top:22px;
  border-top:1px solid var(--border);
}
.info__t{
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--dim);
}
.info__v{
  display:block;
  margin-top:8px;
  font-size:16px;
  line-height:1.55;
  color:var(--text);
}
a.info__v{ transition:opacity .3s var(--e-hover); }
a.info__v:hover{ opacity:.7; }

/* ---- form ----
   Il form sta dentro una card con un fondo appena più chiaro della pagina:
   con lo sfondo trasparente e il solo bordo si confondeva col resto. */
.formcard{
  max-width:900px;
  margin-top:clamp(40px, 5vw, 64px);
  padding:clamp(26px, 3.4vw, 48px);
  border:1px solid var(--border);
  background:#0c0c0c;
}
.formcard__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.5rem, 3vw, 36px);
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--text-warm);
}
.formcard__lead{
  max-width:54ch;
  margin-top:10px;
  font-size:16px;
  line-height:1.6;
  color:var(--muted);
}
.form{ margin-top:clamp(24px, 3vw, 34px); max-width:none; }
.form__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--gap);
}
.form__row--full{ grid-column:1 / -1; }

.field{ display:block; }
.field__label{
  display:block;
  margin-bottom:9px;
  font-size:14px;
  color:var(--muted);
}
.field__label .req{ color:rgba(255,255,255,.4); }
.field input,
.field select,
.field textarea{
  width:100%;
  padding:0 18px;
  height:62px;
  border:1px solid var(--border);
  border-radius:0;
  background:var(--bg-black);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  letter-spacing:-.01em;
  appearance:none;
  -webkit-appearance:none;
  transition:border-color .3s var(--e-hover);
}
.field textarea{ height:auto; min-height:150px; padding:18px; resize:vertical; line-height:1.6; }
.field select{ padding-right:44px; }
.field input::placeholder,
.field textarea::placeholder{ color:rgba(255,255,255,.32); }
.field input:hover, .field select:hover, .field textarea:hover,
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:rgba(255,255,255,.34);
  outline:none;
}
.field select option{ background:#0d0d0d; color:#fff; }

.field--select{ position:relative; }
.field--select::after{
  content:"";
  position:absolute;
  right:20px;
  bottom:26px;
  width:9px; height:9px;
  border-right:1.5px solid rgba(255,255,255,.55);
  border-bottom:1.5px solid rgba(255,255,255,.55);
  transform:rotate(45deg);
  pointer-events:none;
}

/* consenso privacy: casella disegnata a mano per restare nel tema */
.check{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:26px;
  font-size:14.5px;
  line-height:1.55;
  color:var(--muted);
  cursor:pointer;
}
.check input{
  appearance:none;
  -webkit-appearance:none;
  flex:none;
  width:20px; height:20px;
  margin:1px 0 0;
  border:1px solid var(--border-strong);
  background:var(--bg-black);
  cursor:pointer;
  transition:background-color .25s var(--e-hover), border-color .25s var(--e-hover);
}
.check input:checked{ background:var(--text-warm); border-color:transparent; }
.check input:checked::after{
  content:"";
  display:block;
  width:5px; height:10px;
  margin:2px auto 0;
  border-right:2px solid #060606;
  border-bottom:2px solid #060606;
  transform:rotate(45deg);
}
.check a{ color:var(--text); border-bottom:1px solid rgba(255,255,255,.35); }
.check a:hover{ border-bottom-color:#fff; }

.form__actions{ margin-top:28px; }
.form__actions .btn{ width:auto; min-width:230px; min-height:64px; padding:20px 28px; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn[disabled]:hover::before{ opacity:0; }

/* sta già dentro la card: niente bordo né padding suoi */
.form__done h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.5rem, 3vw, 34px);
  color:var(--text-warm);
}
.form__done p{ margin-top:12px; font-size:16px; line-height:1.6; color:var(--muted); }

/* ---- mappa a consenso ---- */
.mapx{ margin-top:clamp(48px, 6vw, 80px); }
/* NIENTE min-height qui: con aspect-ratio il minimo si "trasferisce"
   all'altro asse e diventa una larghezza minima (320px x 16/8 = 640px).
   Sul telefono il riquadro sfondava a destra e trascinava con se' l'intera
   pagina in scorrimento orizzontale. Sotto gli 820px l'altezza si fissa a
   mano (vedi Responsive) e il rapporto viene disattivato. */
.mapx__frame{
  position:relative;
  aspect-ratio:16/8;
  border:1px solid var(--border);
  background:#0a0a0a;
  overflow:hidden;
}
.mapx__frame iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
  opacity:0;
  transition:opacity .5s var(--e-hover);
}
.mapx__frame.is-loaded iframe{ opacity:1; }

.map-gate{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:clamp(24px, 4vw, 48px);
  text-align:center;
  background:
    linear-gradient(0deg, rgba(6,6,6,.86), rgba(6,6,6,.86)),
    repeating-linear-gradient(122deg, transparent 0 11px, rgba(255,255,255,.06) 11px 12px);
}
.mapx__frame.is-loaded .map-gate{ display:none; }
.map-gate__text{ max-width:60ch; font-size:15px; line-height:1.6; color:var(--muted); }
.map-gate .btn{ width:auto; min-width:210px; min-height:58px; padding:18px 26px; font-size:15px; }
.map-gate__alt{
  font-size:14px;
  color:rgba(255,255,255,.6);
  border-bottom:1px solid rgba(255,255,255,.25);
}
.map-gate__alt:hover{ color:#fff; border-bottom-color:#fff; }

/* --------------------------------------------------------------------------
   15c. Barra del consenso ai cookie
   Il punto non è la barra: è che l'embed di Google resta spento finché la
   scelta non è stata fatta, e con "Rifiuta" resta spento.
   -------------------------------------------------------------------------- */
.consent{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:80;
  /* sui telefoni con la barra gestuale il fondo va tenuto libero */
  padding:18px var(--gutter) calc(20px + env(safe-area-inset-bottom, 0px));
  background:rgba(6,6,6,.96);
  border-top:1px solid var(--border);
  transform:translateY(110%);
  transition:transform .45s var(--e-mass);
}
.consent.is-visible{ transform:none; }
.consent__inner{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px 24px;
  max-width:calc(var(--container) - var(--gutter) * 2);
  margin-inline:auto;
}
.consent__text{ flex:1 1 420px; font-size:14.5px; line-height:1.55; color:var(--muted); }
.consent__link{
  font-size:14px;
  color:var(--text);
  border-bottom:1px solid rgba(255,255,255,.3);
  white-space:nowrap;
}
.consent__link:hover{ border-bottom-color:#fff; }
.consent__actions{ display:flex; gap:10px; margin-left:auto; }
.consent__btn{
  padding:12px 22px;
  border:1px solid var(--border-strong);
  font-size:14px;
  color:var(--text);
  white-space:nowrap;
  transition:background-color .28s var(--e-hover),
             border-color .28s var(--e-hover),
             color .28s var(--e-hover);
}
.consent__btn--ghost:hover{ background:var(--hover-fill); border-color:transparent; }
.consent__btn--solid{ background:var(--text-warm); border-color:transparent; color:#060606; font-weight:500; }
.consent__btn--solid:hover{ background:#fff; }

/* --------------------------------------------------------------------------
   16. Pagine testuali (privacy / termini)
   -------------------------------------------------------------------------- */
/* l'header è fixed: la pagina legale gli lascia il posto in cima */
.legal{ padding-block:calc(var(--header-h) + clamp(40px, 7vw, 90px)) var(--section); }
.legal__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.5rem, 7vw, 92px);
  line-height:1.02;
  letter-spacing:-.015em;
}
.legal__meta{ margin-top:18px; font-size:15px; color:var(--dim); }
.legal__body{ max-width:820px; margin-top:clamp(40px, 6vw, 72px); }
.legal__body h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.5rem, 3vw, 34px);
  line-height:1.2;
  color:var(--text-warm);
  margin:56px 0 16px;
}
.legal__body h2:first-child{ margin-top:0; }
.legal__body p,
.legal__body li{ font-size:16px; line-height:1.75; color:var(--muted); }
.legal__body p{ margin:0 0 18px; }
.legal__body ul{ margin:0 0 18px; padding-left:0; }
.legal__body li{ position:relative; padding-left:24px; margin-bottom:10px; }
.legal__body li::before{
  content:"";
  position:absolute;
  left:2px; top:.7em;
  width:8px; height:1px;
  background:rgba(255,255,255,.4);
}
.legal__body code{
  padding:2px 7px;
  border:1px solid var(--border);
  background:#0c0c0c;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.88em;
  color:var(--text-warm);
}
.legal__body a{ color:var(--text); border-bottom:1px solid rgba(255,255,255,.3); }
.legal__body a:hover{ border-bottom-color:#fff; }
.legal__body strong{ color:var(--text-warm); font-weight:400; }

/* --------------------------------------------------------------------------
   17. Animazioni di rivelazione
   -------------------------------------------------------------------------- */

/* 17.1 charBlurReveal — titoli serif, carattere per carattere */
.reveal-chars{ --dur:.55s; --stagger:.07s; }
.reveal-chars .ch{
  display:inline-block;
  white-space:pre;
  opacity:0;
  filter:blur(14px);
  transform:translateY(24px);
  will-change:opacity, filter, transform;
}
.reveal-chars.is-in .ch{
  opacity:1;
  filter:blur(0);
  transform:none;
  transition:
    opacity   var(--dur) var(--e-text) calc(var(--i) * var(--stagger)),
    filter    var(--dur) var(--e-text) calc(var(--i) * var(--stagger)),
    transform var(--dur) var(--e-text) calc(var(--i) * var(--stagger));
}

/* 17.2 fade + slide-up con stagger (servizi, team, statistiche, blocchi) */
.reveal-up{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity   .8s var(--e-mass) calc(var(--i, 0) * 120ms),
    transform .8s var(--e-mass) calc(var(--i, 0) * 120ms);
}
.reveal-up.is-in{ opacity:1; transform:none; }

/* 17.4 cardImageParallaxReveal — la foto risale dentro il proprio riquadro
   (misurato: +67px di scorrimento interno rispetto alla card, frame 026→027) */
.member__media img{ --ty:70px; }
.member.is-in .member__media img{
  --ty:0px;
  transition:transform .9s var(--e-mass) calc(var(--i, 0) * 120ms), opacity .45s var(--e-hover);
}

/* 17.5 heroBlurIn — l'accento italico entra dopo il resto */
/* il titolo ora è molto più piccolo: blur e spostamento vanno ridotti in
   proporzione, altrimenti l'ingresso sembra sproporzionato */
.hero__line{
  opacity:0;
  filter:blur(12px);
  transform:translateY(18px);
  animation:hero-in .9s var(--e-text) forwards;
}
.hero__line--1{ animation-delay:.15s; }
.hero__line--2{ animation-delay:.30s; }

.hero__media,
.hero__lead,
.hero .btn,
.hero__proof,
.hero__note{
  opacity:0;
  animation:fade-in .9s var(--e-text) forwards;
}
.hero__media{ animation-delay:.10s; }
.hero__lead{ animation-delay:.50s; }
.hero .btn{ animation-delay:.68s; }
.hero__proof{ animation-delay:.86s; }
.hero__note{ animation-delay:.96s; }

@keyframes hero-in{ to{ opacity:1; filter:blur(0); transform:none; } }
@keyframes fade-in{ to{ opacity:1; } }

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
/* Con sette voci il menu orizzontale sta stretto gia' prima del mobile:
   il drawer entra in gioco a 1080px, non a 820. */
@media (max-width:1080px){
  /* Il menu diventa un pannello fisso, quindi esce dal flusso della griglia:
     restano due soli elementi in colonna, e con tre tracce l'hamburger
     finirebbe in quella centrale. Con due tracce va a filo destro. */
  .header__inner{ grid-template-columns:1fr auto; }
  .header__inner > .header__actions{ grid-column:2; }   /* ultima cella delle due */

  .nav{
    position:fixed;
    inset:0 0 0 auto;
    width:min(78vw, 320px);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:28px;
    padding:32px;
    background:#0a0a0a;
    border-left:1px solid var(--border);
    transform:translateX(100%);
    transition:transform .45s var(--e-mass);
    z-index:20;
  }
  .nav.is-open{ transform:none; }
  .nav__link{ font-size:22px; }
  /* col pannello aperto la pagina sotto non deve scorrere */
  body.nav-open{ overflow:hidden; }

  .nav__toggle{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    width:40px; height:40px;
    z-index:30;
  }
  .nav__toggle span{
    display:block;
    height:1px;
    width:26px;
    background:#fff;
    transition:transform .35s var(--e-hover), opacity .2s linear;
  }
  .nav__toggle.is-open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
  .nav__toggle.is-open span:nth-child(2){ opacity:0; }
  .nav__toggle.is-open span:nth-child(3){ transform:translateY(-3.5px) rotate(-45deg); }
}

@media (max-width:1100px){
  .grid-3{ grid-template-columns:repeat(2, 1fr); }
  .grid-4{ grid-template-columns:repeat(2, 1fr); }
  .services__grid{ grid-template-columns:repeat(2, 1fr); }
  /* Due colonne: il testo va a tutta larghezza, poi Pagine a sinistra e la
     colonna dei contatti a destra — indirizzo, orari e social in quest'ordine.
     Pagine occupa entrambe le righe di destra, così l'indirizzo e gli orari
     restano attaccati fra loro invece di allinearsi all'elenco dei link. */
  .about__grid{ grid-template-columns:1fr 1fr; }
  .about__main   { grid-column:1 / -1; grid-row:1; }
  .about__links  { grid-column:1; grid-row:2 / span 2; }
  .about__contact{ grid-column:2; grid-row:2; }
  .about__side   { grid-column:2; grid-row:3; }
  .contact__grid{ grid-template-columns:1fr; }
}

@media (max-width:820px){
  :root{ --gutter:24px; --header-h:64px; }

  /* il selettore lingua resta nella barra, il menu va nel drawer */
  .header__actions{ gap:14px; }
  .lang__menu{ min-width:160px; }
  .lang--float{ top:16px; right:16px; }


  .brand__mark{ width:48px; height:35px; }
  .brand__name{ font-size:23px; }

  .hero__line--2{ column-gap:18px; }
  .btn{ min-height:72px; font-size:17px; }

  .svc{ min-height:220px; padding:20px; }

  /* team e numeri restano a DUE colonne anche sul telefono:
     a colonna singola le card diventavano altissime e la sezione
     costringeva a scorrere troppo */

  /* impilate, entrambe le righe leggono testo -> foto */
  .split{ grid-template-columns:1fr; }
  .split--flip .split__text,
  .split--flip .split__media{ order:0; }

  .gallery__img{ height:clamp(150px, 24vh, 220px); }
  .review{ flex:0 0 300px; height:250px; }

  .reviews{
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  }

  .section__head{ flex-direction:column; align-items:flex-start; gap:18px; }


  /* Nel blocco finale il testo va a tutta larghezza, mentre Pagine e Orari
     restano affiancati anche sul telefono. I social stanno dentro la stessa
     colonna degli orari, quindi scendono naturalmente sotto di essi. */
  /* la disposizione a due colonne arriva da <=1100px: qui si stringe soltanto */
  .about__grid{ gap:30px 20px; }
  .about__links,
  .about__side{ min-width:0; }
  .about__side{ gap:24px; }
  .about__contact{ font-size:15px; }

  /* Sul telefono il riquadro informazioni e' a tutta larghezza: in fila
     indiana diventava una lista altissima e mezza vuota. A due colonne legge
     Dove siamo | Telefono sulla prima riga, Email | Orari sulla seconda. */
  .info{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px 28px;
  }
  /* il separatore non sta piu' fra un blocco e l'altro ma fra le due righe */
  .info__block + .info__block{ margin-top:0; padding-top:0; border-top:0; }
  .info__block:nth-child(n+3){ padding-top:24px; border-top:1px solid var(--border); }

  /* il rapporto 16:8 renderebbe la mappa una fessura: altezza a mano,
     senza vincoli che possano tornare indietro sulla larghezza */
  .mapx__frame{ aspect-ratio:auto; height:clamp(260px, 45vw, 380px); }

  .form__grid{ grid-template-columns:1fr; }
  .callnow{ flex-direction:column; align-items:flex-start; }
  .callnow .btn{ width:100%; }
  .form__actions .btn{ width:100%; }
  .consent__actions{ margin-left:0; width:100%; }
  .consent__btn{ flex:1; text-align:center; }
}

@media (max-width:640px){
  /* i due pulsanti dell'hero smettono di dividersi la riga */
  .hero__actions{ max-width:none; }
  .hero__actions .btn{ flex:1 1 100%; min-width:0; }

  .hatch{ height:56px; }

  /* a due colonne su schermo stretto la card è larga ~165px:
     margini e testi vanno stretti in proporzione */
  .stat{ min-height:140px; padding:22px 14px; }
  .stat__label{ font-size:13px; line-height:1.35; }
  .member__info{ padding:12px 12px 14px; }
  .member__name{ font-size:17px; }
  .member__role{ margin-top:6px; font-size:12.5px; line-height:1.35; }
  .member__years{
    margin-top:9px;
    padding-top:9px;
    font-size:11.5px;
    line-height:1.35;
  }
  .formcard,
  .info{ padding:22px 20px; }
  .callnow__number{ font-size:28px; }

  .legal__body h2{ margin:40px 0 14px; }
  .legal__body p, .legal__body li{ font-size:15.5px; }

  /* indirizzi ed email non devono sfondare il riquadro */
  .info__v, .about__contact, .legal__body a{ overflow-wrap:anywhere; }

  /* le due colonne del footer sono larghe ~165px: testi e social a misura */
  .about__col-title,
  .about__links a,
  .hours{ font-size:15px; }
  .about__links ul{ gap:7px; }
  .social{ gap:9px; }
}

@media (max-width:560px){
  .services__grid{ grid-template-columns:1fr; }
  .review{ flex:0 0 min(84vw, 300px); }
}

/* --- telefoni piccoli (iPhone SE e simili) -------------------------------- */
@media (max-width:400px){
  :root{ --gutter:18px; }
  .brand__mark{ width:42px; height:31px; }
  .brand__name{ font-size:20px; }
  .header__actions{ gap:10px; }
  .lang__btn{ padding:0 10px; gap:6px; }
  .svc{ min-height:0; }
  .info{ gap:20px 18px; }
  .about__grid{ gap:30px 14px; }
  .about__col-title,
  .about__links a,
  .hours{ font-size:13.5px; }
  .social{ gap:7px; }
  .social a{ width:40px; height:40px; }
  .social svg{ width:15px; height:15px; }
}

/* --- telefono in orizzontale ----------------------------------------------
   Con 380px di altezza una sezione alta 100svh lascerebbe fuori il pulsante:
   qui l'hero si limita a stare comodo e cresce quanto serve. */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:0; padding-top:calc(var(--header-h) + 24px); padding-bottom:32px; }
  .nav{ justify-content:flex-start; overflow-y:auto; padding-block:80px; }
  .nav__link{ font-size:18px; }
}

/* --- dispositivi senza mouse ----------------------------------------------
   Su touch un bersaglio sotto i 44px si sbaglia: si allargano i comandi
   piccoli senza toccare la resa su desktop. */
@media (hover:none){
  .lang__btn{ height:44px; }
  .nav__toggle{ width:44px; height:44px; }
  .svc__cta{ padding:14px 20px; }
  .social a{ width:46px; height:46px; }
  .consent__btn{ padding:15px 22px; }
  .map-gate__alt{ padding-block:8px; }
  /* senza puntatore gli stati hover non servono e restano "appiccicati" */
  .svc:hover{ background:transparent; border-color:rgba(255,255,255,.12); }
  .member:hover .is-hover{ opacity:0; }
  .member:hover .is-base{ opacity:1; }
  .member:hover .member__media img{ --sc:1; }
}

/* --------------------------------------------------------------------------
   19. Accessibilità: riduzione del movimento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal-chars .ch,
  .reveal-up,
  .hero__line,
  .hero__media,
  .hero__lead,
  .hero__proof,
  .hero__note,
  .hero .btn{
    opacity:1 !important;
    filter:none !important;
    transform:none !important;
  }
  .member__media img{ transform:none !important; }
  .marquee__track{ animation:none !important; }
}