/* ============================================================
   SITEG · una pagina, una discesa
   Il racconto scende: carta, lilla, viola, indigo. La pagina
   diventa più profonda mentre si avvicina alla chiamata, e la
   chartreuse resta l'unica luce. Palette del marchio soltanto.
   ============================================================ */

/* Lo scorrimento orizzontale vive sull'html, non sul body: dichiararlo
   solo sul body non ferma il root. `clip` invece di `hidden` perché
   `hidden` creerebbe un contenitore di scorrimento e romperebbe lo
   sticky della barra. */
html{overflow-x:clip}

:root{
  --paper:#ffffff;
  --lilac:#efe9f6;
  --violet:#4d018f;
  --indigo:#220440;
  --flame:#BDBF00;
  --ink:#220440;
  --fog:#453c58;
  --onDark:#d9cfec;

  --gut:clamp(18px,3.4vw,40px);
  --max:1280px;

  --t-display:clamp(1.75rem,5.4vw,4.25rem);
  --t-chapter:clamp(1.625rem,3vw,2.375rem);
  --t-entry:clamp(1.125rem,1.6vw,1.375rem);
  --t-body:1.0625rem;
  --t-small:.875rem;

  --ease:cubic-bezier(.2,.65,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 var(--t-body)/1.62 "Raleway",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
ul{list-style:none;padding:0}
:focus-visible{outline:3px solid var(--flame);outline-offset:3px}
.ico{width:16px;height:16px;flex:0 0 auto;display:block}

.shell{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--indigo);color:var(--paper);padding:10px 16px}

/* ── il filo: quattro tappe, una linea che si riempie ──────── */
.rail{
  position:fixed;left:clamp(10px,1.6vw,26px);top:50%;transform:translateY(-50%);
  z-index:50;display:flex;flex-direction:column;align-items:center;gap:0;
  padding:6px 0;
}
.rail::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:currentColor;opacity:.22;transform:translateX(-50%);
}
.rail .fill{
  position:absolute;left:50%;top:0;width:2px;height:0;
  background:var(--flame);transform:translateX(-50%);
  transition:height .12s linear;
}
.rail a{
  position:relative;z-index:1;display:block;width:11px;height:11px;border-radius:50%;
  margin:26px 0;background:currentColor;opacity:.3;
  transition:opacity .3s ease,transform .3s var(--ease),background-color .3s ease;
}
.rail a:hover,.rail a:focus-visible{opacity:.9;transform:scale(1.3)}
.rail a[aria-current]{opacity:1;background:var(--flame);transform:scale(1.35)}
.rail{color:var(--ink)}
.rail.on-dark{color:var(--paper)}
@media (max-width:1080px){.rail{display:none}}

/* ── la barra: piatta, una riga ────────────────────────────── */
.top{
  position:fixed;top:12px;left:50%;transform:translateX(-50%);
  width:min(1280px,calc(100% - 26px));z-index:60;
  background:var(--paper);border-radius:18px;
}
html{scroll-padding-top:84px}
.top .shell{display:flex;align-items:center;gap:clamp(10px,2vw,26px);min-height:64px;padding-block:6px}
.mark{flex:0 0 auto;display:flex;align-items:center}
.mark img{height:clamp(34px,3.2vw,42px);width:auto}
.nav{margin-left:auto;display:flex;gap:clamp(2px,1.4vw,20px);flex-wrap:wrap;position:relative}
.nav i{position:absolute;left:0;bottom:-1px;width:0;height:2px;background:var(--flame);opacity:0;
  transition:left .5s cubic-bezier(.3,1.25,.4,1),width .5s cubic-bezier(.3,1.25,.4,1),opacity .3s ease}
.nav a{font-size:var(--t-small);padding:7px 2px;color:var(--fog);position:relative}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;
  background:var(--flame);transition:right .3s var(--ease);
}
.nav a:hover,.nav a:focus-visible{color:var(--ink)}
.nav a[aria-current]{color:var(--ink);font-weight:700}
.tel{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  background:var(--indigo);color:var(--paper);
  padding:10px 16px;border-radius:999px;font-weight:600;font-size:var(--t-small);
  transition:background-color .25s ease,transform .25s var(--ease);
}
.tel:hover,.tel:focus-visible{background:var(--violet);transform:translateY(-1px)}
.burger{display:none;margin-left:auto;background:none;border:0;font:700 var(--t-small)/1 "Raleway",sans-serif;color:var(--ink);padding:12px 2px}

/* ── l'apertura ────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;background:var(--indigo);color:var(--paper);
  min-height:min(66vh,620px);display:flex;align-items:flex-end;
}
.hero .shot{position:absolute;inset:0;overflow:hidden;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 clamp(0px,2vw,26px) 0 0}
.hero .shot img{
  width:clamp(220px,28vw,420px);height:auto;max-height:58%;
  object-fit:contain;object-position:right bottom;
  filter:none;transform-origin:80% 80%;
}
.hero .veil{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.hero .shell{position:relative;z-index:2;width:100%;
  padding-block:clamp(40px,6vw,84px);
  /* il testo non entra mai nella zona dell'immagine */
  padding-right:calc(clamp(220px,28vw,420px) + clamp(16px,2.4vw,36px))}
.hero h1{
  margin-top:clamp(14px,2vw,22px);
  /* 1.16 e non 1.02: con l'iniziale in evidenza le due righe si toccavano */
  font-size:var(--t-display);line-height:1.16;letter-spacing:-.025em;
  font-weight:800;text-transform:uppercase;max-width:none;
}
.hero h1 span{display:inline-block}
.hero h1 .ini{background:var(--flame);color:var(--indigo);padding:0 .07em;
  display:inline-block;line-height:1.06}
.hero .sub{margin-top:clamp(16px,2.2vw,26px);max-width:52ch;font-size:clamp(1.0625rem,1.5vw,1.25rem);color:var(--paper)}
.hero .act{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3.4vw,36px)}
.hero .act a{display:inline-flex;align-items:center;gap:9px;padding:15px 24px;font-weight:700;font-size:var(--t-body)}
.hero .act .now{background:var(--flame);color:var(--indigo)}
.hero .act .now:hover,.hero .act .now:focus-visible{background:var(--paper)}
.hero .act .ghost{border:2px solid rgba(255,255,255,.45);color:var(--paper)}
.hero .act .ghost:hover,.hero .act .ghost:focus-visible{border-color:var(--paper);background:rgba(255,255,255,.08)}
.cue{
  position:absolute;left:var(--gut);bottom:18px;z-index:2;
  display:flex;align-items:center;gap:10px;font-size:var(--t-small);color:rgba(255,255,255,.7);
}
.cue .bar{display:block;width:1px;height:34px;background:rgba(255,255,255,.45);position:relative;overflow:hidden}
.cue .bar::after{content:"";position:absolute;left:0;top:-34px;width:1px;height:34px;background:var(--flame)}

/* ── le tappe: una composizione ciascuna ───────────────────── */
.chapter{padding-block:clamp(64px,10vw,140px);position:relative}
.chapter h2{font-size:var(--t-chapter);line-height:1.08;letter-spacing:-.02em;max-width:20ch;width:fit-content}
.chapter .lead{margin-top:14px;color:var(--fog);max-width:52ch}

/* 1 · le marche — lilla */
#features{background:var(--lilac)}
#features .wall{
  margin-top:clamp(30px,4.6vw,54px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(20px,3.4vw,44px);align-items:center;
}
#features .wall a{display:flex;align-items:center;justify-content:center;min-height:70px}
#features .wall img{max-height:54px;width:auto;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .3s ease,opacity .3s ease,transform .3s var(--ease)}
#features .wall a:hover img,#features .wall a:focus-visible img{filter:none;opacity:1;transform:translateY(-2px)}

/* 2 · i valori — carta */
#services .split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,76px)}
#services .claim{margin-top:clamp(20px,3vw,34px);font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.28;font-weight:800;max-width:22ch}
#services .claim{position:relative;z-index:0}
#services .claim em{font-style:normal;color:var(--indigo)}
#services .claim::before{content:"";position:absolute;inset:-.08em -.12em;z-index:-1;background:var(--flame);transform:scaleX(0);transform-origin:left center}
.entry + .entry{margin-top:clamp(26px,4vw,44px)}
.entry h3{font-size:var(--t-entry);line-height:1.15;letter-spacing:-.01em}
.entry p{margin-top:10px;color:var(--fog);max-width:60ch}
.caps{margin-top:16px;columns:2;column-gap:clamp(20px,3vw,40px)}
.caps li{padding:6px 0 6px 20px;position:relative;break-inside:avoid}
.caps li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:8px;border-radius:50%;background:var(--flame)}

/* 3 · dove — viola */
#whereweworks{background:var(--violet);color:var(--paper)}
#whereweworks h2,#whereweworks .lead{color:var(--paper)}
#whereweworks .lead{color:var(--onDark)}
#whereweworks .map{margin-top:clamp(26px,4vw,44px);background:var(--indigo)}
#whereweworks .map img{width:100%}
.towns{margin-top:clamp(30px,4.4vw,52px);columns:4;column-gap:clamp(20px,3.4vw,52px);font-size:var(--t-body)}
.towns li{padding:4px 0;break-inside:avoid;color:var(--paper)}
.towns .here{
  /* Carbonia non è una voce dell'elenco: è il posto dove la ditta sta.
     Sale di due gradini, rompe il ritmo delle colonne e prende la fiamma. */
  font-size:1.45rem;line-height:1.28;font-weight:800;letter-spacing:-.015em;
  background:var(--paper);color:var(--ink);
  transition:color .25s ease,background-color .25s ease;
  padding:.2em .34em;margin-left:-.34em;position:relative;z-index:0;
}
.towns .here::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--flame);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .95s var(--ease) .3s,background-color .25s ease;
}
/* sul passaggio il chip si inverte: indigo pieno, parola in carta */
.towns .here:hover,.towns .here:focus-visible{color:var(--paper)}
.towns .here:hover::before,.towns .here:focus-visible::before{background:var(--indigo)}
.js [data-reveal].in .towns .here::before{transform:scaleX(1)}

/* 4 · parla — indigo, il climax */
#contact{background:var(--indigo);color:var(--paper)}
#contact h2,#contact .lead{color:var(--paper)}
#contact .lead{color:var(--onDark)}
#contact .due{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px);margin-top:clamp(26px,3.6vw,40px)}
#contact .panel{background:var(--paper);color:var(--ink);padding:clamp(20px,2.6vw,30px)}
#contact .panel h3{font-size:1rem;font-weight:700;color:var(--violet)}
#contact .num{
  display:block;margin-top:8px;
  font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--ink);
}
#contact .num:hover,#contact .num:focus-visible{color:var(--violet)}
#contact .fine{margin-top:10px;color:var(--fog);font-size:var(--t-small);max-width:42ch}
#contact .fine a{text-decoration:underline;text-underline-offset:3px}
#contact .fine a:hover{color:var(--violet)}
#contact .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
#contact .done{background:var(--indigo);color:var(--paper);padding:11px 16px;font-weight:700;font-size:var(--t-small)}
#contact .done:hover{background:var(--violet)}
#contact .row .ghost{border:2px solid var(--ink);color:var(--ink);padding:9px 15px;font-weight:700;font-size:var(--t-small)}
#contact .row .ghost:hover{border-color:var(--violet);color:var(--violet)}
#contact .hours{margin-top:10px}
#contact .hours div{display:flex;justify-content:space-between;gap:18px;padding:7px 0}
#contact .hours dt{color:var(--fog);font-size:var(--t-small)}
#contact .hours dd{font-weight:600}
#contact .addr{margin-top:clamp(20px,3vw,30px);color:var(--onDark)}
#contact .addr a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
#contact .addr a:hover{color:var(--flame)}
@media (max-width:620px){#contact .due{grid-template-columns:1fr}}


#contact .panel h3{display:flex;align-items:center;gap:8px}
#contact .panel--map{margin-top:clamp(14px,2vw,22px);padding:0;overflow:hidden}
#contact .map-top{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:flex-end;
  padding:clamp(18px,2.4vw,26px)}
#contact .map-top .addr{margin-top:6px;font-weight:600;color:var(--ink)}
/* La mappa è un'immagine viva: le basta l'altezza per leggere le vie, non
   tutto lo schermo. 16/9 su una lastra larga 1200 la faceva alta 675. */
#contact .map-embed{position:relative;height:clamp(240px,32vw,420px);background:var(--lilac)}
#contact .map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}



/* la targhetta "sede": fondo fiamma, testo indigo, come nel riferimento */
.towns .sede{
  display:inline-block;margin-left:.24em;padding:0 .42em;
  background:var(--flame);color:var(--indigo);
  font-size:.65em;font-weight:400;letter-spacing:.07em;line-height:1.5;
  border-radius:4px;vertical-align:.06em;
}


/* lo stato del negozio: la pagina sa se è aperta, e lo dice */
#contact .hours-state{
  display:none;align-items:center;gap:7px;margin:2px 0 12px;
  padding:4px 11px;background:var(--flame);color:var(--indigo);
  font-size:var(--t-small);font-weight:700;line-height:1.5;
}
#contact .hours-state:not([hidden]){display:inline-flex}
#contact .hours-state::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.6;flex:0 0 auto}
#contact .hours-state[data-state="closed"]{background:var(--lilac);color:var(--ink)}


#contact .alt{margin-top:16px;display:grid;gap:5px;font-size:var(--t-small);max-width:42ch}
#contact .alt div{display:flex;gap:10px;align-items:baseline}
#contact .alt dt{color:var(--fog);min-width:48px}
#contact .alt dd{margin:0;font-weight:600;color:var(--ink)}
#contact .alt a{text-decoration:underline;text-underline-offset:3px}
#contact .alt a:hover{color:var(--violet)}

/* ── la chiusura ───────────────────────────────────────────── */
.close{background:var(--violet);color:var(--paper);padding-block:clamp(48px,7vw,90px)}
.close .name{
  font-size:clamp(2rem,7vw,5.25rem);font-weight:800;text-transform:uppercase;
  letter-spacing:-.035em;line-height:.94;max-width:none;
}
.close .name::before{
  content:"";display:block;width:74px;height:5px;margin-bottom:clamp(16px,2.4vw,28px);
  background:var(--flame);
}
.close .name .w{display:inline-block}
.close .cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(32px,5.5vw,80px);margin-top:clamp(34px,5vw,64px);
}
.close h3{display:flex;align-items:center;gap:10px;padding-bottom:12px;position:relative}
.close h3::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;background:var(--flame)}
.close .fi{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.close li{padding:9px 0}
.close li:first-child{padding-top:0}
.close h3{font-size:1rem;font-weight:700;color:var(--onDark)}
.close li{padding:3px 0;color:var(--paper);font-size:var(--t-body)}
.close a:hover,.close a:focus-visible{color:var(--flame)}
.legal{margin-top:clamp(28px,4vw,52px);color:var(--onDark);font-size:var(--t-small);line-height:1.7;max-width:66ch}
.legal a,.legal-links a{text-decoration:underline;text-underline-offset:3px}
.legal-links{margin-top:14px;display:flex;gap:18px;flex-wrap:wrap;font-size:var(--t-small);color:var(--onDark)}
.up{
  display:inline-flex;align-items:center;gap:8px;margin-top:26px;
  padding:9px 15px;background:var(--flame);color:var(--indigo);
  font-weight:700;font-size:var(--t-small);
  transition:background-color .25s ease,color .25s ease;
}
.up::after{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:7px solid currentColor}
.up:hover,.up:focus-visible{background:var(--paper);color:var(--indigo)}

/* ── il movimento: la pagina si accende mentre scende ─────── */
@media (prefers-reduced-motion:no-preference){
  /* apertura */
  .js .hero.in .shot img{animation:art-down 1.25s cubic-bezier(.16,.82,.24,1) both}
  @keyframes art-down{from{transform:translateY(-118%)}to{transform:none}}
  .js .hero.in h1 span{animation:rise .85s var(--ease) both}
  .js .hero.in h1 span:nth-child(1){animation-delay:.05s}
  .js .hero.in h1 span:nth-child(2){animation-delay:.13s}
  .js .hero.in h1 span:nth-child(3){animation-delay:.21s}
  .js .hero.in h1 span:nth-child(4){animation-delay:.29s}
  .js .hero.in .sub,.js .hero.in .act{animation:rise .8s var(--ease) both}
  .js .hero .sub{animation-delay:.44s}
  .js .hero .act{animation-delay:.52s}
  .js .hero.in .cue .bar::after{animation:drop 2.2s 1.2s ease-in-out infinite}
  @keyframes drop{0%{top:-34px}55%{top:34px}100%{top:34px}}
  @keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

  /* ogni capitolo: titolo, poi testo, poi contenuto, a 70ms */
  .js [data-reveal] > *{opacity:0;transform:translateY(24px);
    transition:opacity .7s ease,transform .8s var(--ease)}
  .js [data-reveal].in > *{opacity:1;transform:none}
  .js [data-reveal].in > *:nth-child(1){transition-delay:0s}
  .js [data-reveal].in > *:nth-child(2){transition-delay:.09s}
  .js [data-reveal].in > *:nth-child(3){transition-delay:.18s}
  .js [data-reveal].in > *:nth-child(4){transition-delay:.27s}
  .js [data-reveal].in > *:nth-child(5){transition-delay:.36s}
  .js .entry{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .7s var(--ease)}
  .js [data-reveal].in .entry{opacity:1;transform:none}
  .js [data-reveal].in .entry:nth-child(1){transition-delay:.05s}
  .js [data-reveal].in .entry:nth-child(2){transition-delay:.15s}
  .js [data-reveal].in .entry:nth-child(3){transition-delay:.25s}
  .js .towns li{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s var(--ease)}

  .js [data-reveal].in .towns li{opacity:1;transform:none}

  .js [data-reveal].in .towns li:nth-child(3n){transition-delay:.12s}
  .js [data-reveal].in .towns li:nth-child(3n+1){transition-delay:.06s}
  .js [data-reveal].in .towns li:nth-child(3n+2){transition-delay:.18s}

  /* chiusura: il nome si scrive parola per parola, 70ms l'una dall'altra */
  .js .close .name .w{opacity:0;transform:translateY(.26em);
    transition:opacity .55s ease,transform .8s var(--ease);transition-delay:var(--d,0ms)}
  .js .close [data-reveal].in .name .w{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal] > *,.js .entry,.js .towns li{opacity:1;transform:none}
  .cue .bar::after{animation:none;top:0}
}

/* ── larghezze ─────────────────────────────────────────────── */
@media (max-width:1080px){
  .hero .shot img{width:clamp(190px,27vw,300px)}
  .hero .shell{padding-right:calc(clamp(190px,27vw,300px) + 20px)}
  #services .split{grid-template-columns:1fr;gap:clamp(26px,4vw,40px)}
  #services .claim,#services h2{max-width:none}
    .towns{columns:3}
}
@media (max-width:820px){
  .nav{display:none}
  .nav i{display:none}
  .burger{display:block}
  .tel{display:none}
  .nav.open{
    display:flex;flex-direction:column;gap:2px;
    position:absolute;left:0;right:0;top:100%;
    background:var(--ink);padding:14px 18px 18px;
  }
  .nav.open a{color:var(--paper)}
  /* il testo viene prima, l'immagine scende sotto: a schermo stretto il
     marchio e la promessa contano più del furgone. In DOM lo .shot sta dopo
     il .shell, quindi qui basta togliergli il posizionamento assoluto. */
  .hero{display:flex;flex-direction:column;min-height:0;padding-top:88px}
  .hero .shot{
    position:relative;inset:auto;width:100%;height:30vh;min-height:180px;
    padding:0;margin-top:clamp(20px,5vw,34px);
    display:flex;justify-content:center;align-items:flex-end;
  }
  .hero .shot img{width:auto;height:100%;max-height:none;object-position:center bottom}
  .hero .shell{padding:clamp(22px,4vw,34px) var(--gut) clamp(30px,5vw,44px)}
  .cue{display:none}
  .hero .shot img{transform-origin:50% 40%}
  .towns{columns:2}
    .caps{columns:1}
  .rail{display:none}
}
@media (max-width:520px){
  .hero h1{max-width:none;font-size:clamp(1.5rem,6.6vw,1.875rem)}
  .hero .act a{width:100%;justify-content:center}
}

/* ── il gusto del movimento: un gesto per capitolo ──────────── */
@media (prefers-reduced-motion:no-preference){
  /* la regola del titolo si disegna */
  .chapter h2::after{
    content:"";display:block;height:3px;width:100%;margin-top:16px;background:var(--flame);
    transform:scaleX(0);transform-origin:left center;
    transition:transform .9s var(--ease) .12s;
  }
  .js [data-reveal].in h2::after{transform:scaleX(1)}

  /* le marche: una dopo l'altra, mai tutte insieme */
  .js #features .wall a{opacity:0;transform:translateY(16px);
    transition:opacity .5s ease,transform .65s var(--ease),filter .3s ease}
  .js #features [data-reveal].in .wall a{opacity:1;transform:none}
  .js #features [data-reveal].in .wall a:nth-child(1){transition-delay:.06s}
  .js #features [data-reveal].in .wall a:nth-child(2){transition-delay:.13s}
  .js #features [data-reveal].in .wall a:nth-child(3){transition-delay:.20s}
  .js #features [data-reveal].in .wall a:nth-child(4){transition-delay:.27s}
  .js #features [data-reveal].in .wall a:nth-child(5){transition-delay:.34s}
  .js #features [data-reveal].in .wall a:nth-child(6){transition-delay:.41s}
  .js #features [data-reveal].in .wall a:nth-child(7){transition-delay:.48s}

  /* la frase: l'evidenziatore si stende sotto le parole */
  #services .claim::before{transition:transform .95s var(--ease) .28s}
  #services [data-reveal].in .claim::before{transform:scaleX(1)}

  /* la mappa e le fotografie si aprono dall'alto */
  .js .map{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--ease) .08s}
  .js [data-reveal].in .map{clip-path:inset(0 0 0 0)}

  /* il nome che chiude la pagina */

.rail .fill{transition:height .25s linear}
.towns li{transition:color .22s ease,transform .22s var(--ease)}
.towns li:hover{color:var(--flame);transform:translateX(3px)}
.entry{transition:transform .35s var(--ease)}
.entry:hover{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .nav i{transition:none}
  .chapter h2::after{transform:none}
  .towns .here::before{transform:none}
  #services .claim::before{transform:none}

}

/* ── il banner di consenso sotto i 900px ─────────────────────
   iubenda misura il banner una volta e non lo riadatta: a 768 di viewport
   il contenitore resta largo 807, sfora a destra di 39px e finisce
   tagliato dall'overflow della pagina. Qui lo si riporta dentro i bordi,
   forzando i suoi stessi nodi (sono DIV e BUTTON della pagina, non un
   iframe: il dump del DOM lo conferma). */
@media (max-width:900px){
  #iubenda-cs-banner{
    width:100%!important;max-width:100vw!important;min-width:0!important;
    left:0!important;right:0!important;
    overflow-x:hidden!important;
  }
  #iubenda-cs-banner .iubenda-cs-container,
  #iubenda-cs-banner .iubenda-cs-content,
  #iubenda-cs-banner .iubenda-cs-rationale,
  #iubenda-cs-banner .iubenda-banner-content{
    width:100%!important;max-width:100%!important;min-width:0!important;
    box-sizing:border-box!important;
  }
  #iubenda-cs-banner .iubenda-cs-opt-group,
  #iubenda-cs-banner .iubenda-cs-opt-group-custom,
  #iubenda-cs-banner .iubenda-cs-opt-group-consent{
    width:100%!important;max-width:100%!important;flex-wrap:wrap!important;
  }
  #iubenda-cs-banner .iubenda-cs-accept-btn,
  #iubenda-cs-banner .iubenda-cs-customize-btn{
    width:100%!important;max-width:100%!important;margin:0 0 8px!important;
  }
  #iubenda-cs-banner .iubenda-cs-close-btn{right:10px!important;top:10px!important}
}

/* ── il banner è un pannello, non un pezzo di pagina ─────────
   In basso il banner lascia scoperti marchio e titolo, ma con il bordo
   dritto sembra la sezione successiva. Due angoli e un'ombra lo
   dichiarano per quello che è: qualcosa che sta sopra. */
/* la classe è ripetuta di proposito: iubenda usa selettori tipo
   #iubenda-cs-banner [class^="iub"] e senza questa specificità vince lui. */
#iubenda-cs-banner .iubenda-cs-container.iubenda-cs-container,
#iubenda-cs-banner .iubenda-cs-content.iubenda-cs-content{
  border-radius:14px 14px 0 0!important;
}
#iubenda-cs-banner .iubenda-cs-content.iubenda-cs-content{
  box-shadow:0 -10px 34px rgba(34,4,64,.18)!important; /* taste-skill-ignore: overlay reale, sta sopra la pagina */
}

/* ── bersagli da dito ─────────────────────────────────────────
   Sotto i 900px ogni link e pulsante deve poter essere centrato con un
   pollice: 44px è il minimo che le linee guida chiedono, e i link della
   barra ne erano alti 37. */
@media (max-width:900px){
  .top .nav a,
  .links a,
  .main-navigation a,
  .site-footer a,
  .close li a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .close .name .w{overflow-wrap:anywhere}
  .towns li,.close li{overflow-wrap:anywhere}
}