/* ============================================================
   Milano Moscova — restyle
   Impianto grafico: hero full-bleed con liquid cursor reveal (blu),
   griglia adattiva in rem, schede in stile "card system".
   ============================================================ */

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{background:var(--background);color:var(--ink);font-family:'Onest',system-ui,sans-serif;overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--brand-light);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}

/* ---------- Griglia adattiva (rem) ---------- */
@media (max-width:1920px){html{font-size:0.833333vw}}
@media (max-width:1440px){html{font-size:1.111111vw}}
@media (max-width:1024px){html{font-size:1.5625vw}}
@media (max-width:640px){html{font-size:4.444444vw}}

/* ---------- Token ---------- */
:root{
  --background:#ffffff;
  --ink:#0d1b24;
  --ink-deep:#062535;      /* navy: card scure, pannelli, footer */
  --ink-soft:#68808c;
  --brand:#007cb5;         /* blu Milano Moscova */
  --brand-light:#5aa9d6;
  --brand-from:#2f9fd4;
  --brand-to:#005a86;
  --sky:#87d8ed;
  --surface:#f3f4f5;
  --surface-2:#e7eaec;
  --hairline:#e2e6e9;
  --ghost:#d7dce1;
  --on-brand:#ffffff;
  --radius-card:1.5rem;
  --radius-card-lg:2rem;
  --radius-control:.875rem;
  --radius-pill:62.5rem;
  --shell:88rem;
  --watermark:13rem;
}

/* ---------- Impaginazione ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:1.25rem}
@media (min-width:640px){.shell{padding-inline:2rem}}
main{width:100%;overflow-x:clip}
section{position:relative}
.skip{position:absolute;left:-9999px}
.skip:focus{position:fixed;left:1rem;top:1rem;z-index:200;border-radius:var(--radius-control);background:var(--ink-deep);padding:.5rem 1rem;font-size:.875rem;color:#fff}

/* ---------- Tipografia ---------- */
h1,h2,h3{font-weight:500;letter-spacing:-.02em;line-height:1.02}
.h-xl{font-size:2.75rem;line-height:.98}
@media (min-width:640px){.h-xl{font-size:3.75rem}}
.h-lg{font-size:2.25rem}
@media (min-width:640px){.h-lg{font-size:3rem}}
.h-md{font-size:1.75rem}
@media (min-width:640px){.h-md{font-size:2.25rem}}
.lead{font-size:1.125rem;line-height:1.55;color:var(--ink-soft);max-width:34rem}
.body{font-size:.9375rem;line-height:1.75;color:var(--ink-soft)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- Eyebrow ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.22em;color:var(--ink-soft)}
.eyebrow::before{content:'';width:.375rem;height:.375rem;border-radius:var(--radius-pill);background:var(--brand)}
.eyebrow.light{color:rgba(255,255,255,.7)}
.eyebrow.light::before{background:var(--brand-light)}

/* ---------- Pill button ---------- */
.pill{display:inline-flex;align-items:center;gap:.75rem;border-radius:var(--radius-pill);font-size:.875rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;padding:.875rem 1.75rem;transition:background .3s ease,color .3s ease,border-color .3s ease;will-change:transform}
.pill.dark{background:var(--ink-deep);color:#fff}
.pill.dark:hover{background:var(--brand)}
.pill.light{background:#fff;color:var(--ink-deep)}
.pill.light:hover{background:var(--brand-light);color:#fff}
.pill.outline{border:1px solid var(--hairline);color:var(--ink)}
.pill.outline:hover{background:var(--ink-deep);color:#fff;border-color:var(--ink-deep)}
.pill.brand{background:var(--brand);color:#fff}
.pill.brand:hover{background:var(--ink-deep)}
.pill .ico{width:1rem;height:1rem;flex:none;display:block}

/* ---------- Arrow button (carousel) ---------- */
.abtn{width:3rem;height:3rem;display:grid;place-items:center;border-radius:var(--radius-pill);border:1px solid var(--hairline);transition:background .3s,border-color .3s,color .3s}
@media (min-width:640px){.abtn{width:3.5rem;height:3.5rem}}
.abtn .ico{width:1.25rem;height:1.25rem;display:block}
.abtn.outline{color:var(--ink)}
.abtn.outline:hover{border-color:var(--ink)}
.abtn.solid{background:var(--ink-deep);border-color:var(--ink-deep);color:#fff}
.abtn.solid:hover{background:var(--brand)}
.abtn.prev .ico{transform:scaleX(-1)}

/* ---------- Dots ---------- */
.dots{display:flex;gap:.5rem;align-items:center}
.dots button{padding:.375rem}
.dots span{display:block;height:.375rem;width:.375rem;border-radius:var(--radius-pill);background:var(--ghost);transition:width .35s cubic-bezier(.22,1,.36,1),background .35s}
.dots button[aria-current="true"] span{width:1.25rem;background:var(--ink-deep)}
.dots.light span{background:rgba(255,255,255,.4)}
.dots.light button[aria-current="true"] span{background:#fff}

/* ============================================================
   LOADER
   ============================================================ */
#loader{position:fixed;inset:0;z-index:220;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;background:var(--ink-deep);color:#fff;border-radius:0 0 var(--radius-card-lg) var(--radius-card-lg);transform:translateY(0);will-change:transform}
#loader.out{transform:translateY(-101%);transition:transform .85s cubic-bezier(.65,0,.35,1)}
#loader .lo-mid{display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center;transition:opacity .5s ease,transform .5s ease}
#loader.out .lo-mid{opacity:0;transform:translateY(-12px)}
#loader .lo-mark{display:flex;align-items:center;gap:.65rem;font-size:1.5rem;font-weight:600;letter-spacing:.02em}
#loader .lo-mark img{width:12rem;background:#fff;border-radius:.6rem;padding:.45rem .7rem}
#loader p{max-width:26ch;font-size:.875rem;color:rgba(255,255,255,.55)}
#loader .lo-bar{width:min(22rem,72vw);display:flex;flex-direction:column;gap:.75rem}
#loader .lo-track{height:1px;background:rgba(255,255,255,.18);overflow:hidden}
#loader .lo-fill{height:100%;width:0%;background:var(--brand-light);transition:width .1s linear}
#loader .lo-row{display:flex;justify-content:space-between;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.45)}
#loader .lo-num{color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}

/* ============================================================
   HEADER
   ============================================================ */
.site-head{position:absolute;inset-inline:0;top:0;z-index:60;opacity:0;transform:translateY(-14px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.site-head.in{opacity:1;transform:none}
.site-head .inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.25rem}
@media (min-width:640px){.site-head .inner{padding-block:1.5rem}}
.brandmark{display:flex;align-items:center;gap:.65rem}
.brandmark img{width:12rem;background:#fff;border-radius:.6rem;padding:.45rem .7rem}
.head-nav{display:none}
@media (min-width:1024px){.head-nav{display:flex;gap:2rem;font-size:.875rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase}}
.head-nav a{opacity:.75;transition:opacity .3s,transform .3s}
.head-nav a:hover{opacity:1;transform:translateY(-2px)}
.head-right{display:flex;align-items:center;gap:.75rem}
.clock-chip{display:none}
@media (min-width:768px){.clock-chip{display:flex;align-items:center;gap:.75rem;border:1px solid var(--hairline);background:rgba(255,255,255,.45);backdrop-filter:blur(6px);border-radius:var(--radius-control);padding:.5rem .75rem;font-size:.75rem}}
.clock-chip .lbl{opacity:.55}
.clock-chip .t{min-width:3.5rem;font-weight:500;font-variant-numeric:tabular-nums}
.clock-chip .sep{opacity:.35}
.menu-btn{border:1px solid var(--hairline);background:rgba(255,255,255,.45);backdrop-filter:blur(6px);border-radius:var(--radius-control);padding:.5rem 1rem;display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;transition:background .3s}
/* Il collegamento all'area personale Allianz: stesso materiale e stesso
   passo del pulsante del menu, perche' vive nella stessa riga; la forma
   e' una pillola, che lo distingue dal comando accanto senza gridare.
   Nessuna icona: un lucchetto accanto a "Area Personale" ripete a segni
   quello che c'e' gia' scritto. */
.area-riservata{
  border:1px solid var(--hairline);background:rgba(255,255,255,.45);
  backdrop-filter:blur(6px);border-radius:999px;padding:.5rem 1.1rem;
  display:inline-flex;align-items:center;white-space:nowrap;
  font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;
  text-decoration:none;transition:background .3s}
.area-riservata:hover{background:rgba(255,255,255,.8)}
.menu-btn:hover{background:rgba(255,255,255,.8)}
.menu-btn .ico{width:.875rem;height:.875rem}
/* header su fondo scuro */
.site-head.on-dark{color:#fff}
.site-head.on-dark .clock-chip{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:rgba(255,255,255,.85)}
.site-head.on-dark .menu-btn,.site-head.on-dark .area-riservata{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff}
.site-head.on-dark .menu-btn:hover,.site-head.on-dark .area-riservata:hover{background:rgba(255,255,255,.22)}
@media (max-width:640px){.menu-btn .txt{display:none}}
/* Sullo stretto la pillola resta scritta — e' l'unica cosa che dice —
   ma si stringe: sotto i 400px "Area Personale" e il menu devono stare
   sulla stessa riga senza spingere fuori il marchio. */
@media (max-width:640px){.area-riservata{padding:.5rem .8rem;font-size:.7rem;letter-spacing:.03em}}
@media (max-width:400px){.area-riservata{padding:.45rem .65rem;font-size:.65rem;letter-spacing:.02em}}
/* Header fisso su mobile e tablet: scorrendo oltre l'hero il pulsante
   Menu resta raggiungibile. Su desktop resta in overlay com'era. */
@media (max-width:1023px){
  .site-head.fisso{position:fixed;background:rgba(6,37,53,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 .5rem 1.5rem rgba(6,37,53,.18);animation:head-giu .35s cubic-bezier(.22,1,.36,1)}
  .site-head.fisso .inner{padding-block:.6rem}
  .site-head.fisso .brandmark img{width:9rem;padding:.3rem .55rem}
}
@keyframes head-giu{from{transform:translateY(-100%)}to{transform:none}}

/* ============================================================
   HERO — liquid reveal
   ============================================================ */
.hero{position:relative;isolation:isolate;overflow:hidden;border-radius:0 0 var(--radius-card-lg) var(--radius-card-lg);background:var(--ink-deep);color:#fff}
.hero .plate{position:absolute;inset:0;z-index:0}
.hero .plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .plate canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(6,37,53,.72),rgba(6,37,53,.38) 45%,rgba(6,37,53,.86))}
.hero .wm{pointer-events:none;user-select:none;position:absolute;inset-inline:0;bottom:5.5rem;z-index:1;text-align:center;font-weight:700;line-height:1;font-size:var(--watermark);letter-spacing:-.03em;color:rgba(255,255,255,.08);opacity:0;transform:translateY(20px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.22,1,.36,1)}
.hero .wm.in{opacity:1;transform:none}
.hero-grid{position:relative;z-index:20;display:flex;flex-direction:column;gap:2.5rem;padding-block:8rem 4rem}
@media (min-width:1024px){.hero-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:2.5rem;align-items:end;min-height:100svh;padding-block:10rem 6rem}}
.hero-left{display:flex;flex-direction:column;gap:1.75rem}
@media (min-width:1024px){.hero-left{grid-column:span 7}}
.hero .eyebrow{color:rgba(255,255,255,.75)}
.hero .eyebrow::before{background:var(--sky)}
.hero h1{max-width:16ch;font-size:2.75rem;line-height:.98;letter-spacing:-.03em;font-weight:500}
@media (min-width:640px){.hero h1{font-size:4rem}}
@media (min-width:1024px){.hero h1{font-size:4.75rem}}
.hero .sub{max-width:32rem;font-size:1.0625rem;line-height:1.6;color:rgba(255,255,255,.72)}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:.75rem}
.hero-right{display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start}
@media (min-width:1024px){.hero-right{grid-column:span 5;align-items:flex-end}}

/* card vetro (hero) */
.glass{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);backdrop-filter:blur(14px);border-radius:var(--radius-card);padding:.75rem;box-shadow:0 1.5rem 3rem rgba(6,37,53,.3)}
.hero-card{width:100%;max-width:24rem}
@media (min-width:1024px){.hero-card{width:20rem}}
.hero-card .row{display:flex;gap:.75rem;cursor:pointer}
.hero-card .tile{width:5.5rem;aspect-ratio:1;border-radius:.75rem;overflow:hidden;flex:none;background:rgba(255,255,255,.12)}
.hero-card .tile img{width:100%;height:100%;object-fit:cover}
.hero-card .panel{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:.75rem;min-height:5.5rem}
.hero-card .cap{font-size:.65rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.6)}
.hero-card .ttl{font-size:.9375rem;font-weight:500;line-height:1.3;margin-top:.25rem}
.hero-card .slot{position:relative;min-height:3.25rem}
.hero-card .foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.hero-card .nav{display:flex;gap:.375rem}
.hero-card .nav button{width:1.75rem;height:1.75rem;display:grid;place-items:center;border-radius:var(--radius-pill);background:rgba(255,255,255,.16);color:#fff;transition:background .3s}
.hero-card .nav button:hover{background:rgba(255,255,255,.32)}
.hero-card .nav .ico{width:.875rem;height:.875rem}
.hero-card .nav .prev .ico{transform:scaleX(-1)}
.fade-swap{transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.fade-swap.out{opacity:0;transform:translateY(-14px)}
.fade-swap.pre{opacity:0;transform:translateY(14px)}

/* pill dati (hero) */
.metric-card{width:100%;max-width:24rem;display:flex;gap:.75rem;align-items:stretch}
@media (min-width:1024px){.metric-card{width:20rem}}
.metric-card .col{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:.75rem}
.metric-card .big{font-size:1.875rem;font-weight:500;line-height:1}
.metric-card .cap{font-size:.65rem;color:rgba(255,255,255,.8);text-transform:uppercase;letter-spacing:.12em}
.metric-card .dotsrow{display:flex}
.metric-card .dotsrow i{width:1.25rem;height:1.25rem;border-radius:var(--radius-pill);border:1px solid rgba(6,37,53,.4);margin-left:-.4rem}
.metric-card .dotsrow i:first-child{margin-left:0}
.metric-card .shot{width:4.5rem;aspect-ratio:3/4;border-radius:.75rem;overflow:hidden;flex:none}
.metric-card .shot img{width:100%;height:100%;object-fit:cover}

/* barra stato hero */
.hero-bar{position:relative;z-index:20;border-top:1px solid rgba(255,255,255,.16)}
.hero-bar .inner{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-block:1.25rem;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.7)}
@media (max-width:640px){.hero-bar .mid{display:none}}

/* ---------- pagehero (pagine interne) ---------- */
.pagehero{position:relative;isolation:isolate;overflow:hidden;border-radius:0 0 var(--radius-card-lg) var(--radius-card-lg);background:var(--ink-deep);color:#fff}
.pagehero .plate{position:absolute;inset:0;z-index:0}
.pagehero .plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.pagehero .plate canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pagehero .veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(6,37,53,.42),rgba(6,37,53,.55) 55%,rgba(6,37,53,.92))}
.pagehero .inner{position:relative;z-index:10;padding-block:9rem 4.5rem;display:flex;flex-direction:column;gap:1.25rem;max-width:52rem}
.pagehero h1{font-size:2.5rem;line-height:1}
@media (min-width:640px){.pagehero h1{font-size:3.5rem}}
.pagehero .lead{color:rgba(255,255,255,.75);max-width:40rem}
.pagehero .eyebrow{color:rgba(255,255,255,.7)}
.pagehero .eyebrow::before{background:var(--sky)}
.pagehero .partner-logo{width:9rem;height:4rem;object-fit:contain;object-position:left center;background:#fff;border-radius:.75rem;padding:.5rem}

/* ============================================================
   REVEALS
   ============================================================ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.rv-s{opacity:0;transform:translateY(20px) scale(.97);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rv-s.in{opacity:1;transform:none}
.line-clip{display:block;overflow:hidden;padding-bottom:.14em}
.line-clip>span{display:block;transform:translateY(115%);opacity:0;transition:transform 1s cubic-bezier(.16,1,.3,1),opacity 1s cubic-bezier(.16,1,.3,1)}
.line-clip.in>span{transform:none;opacity:1}
.word{display:inline-block;transform:translateY(18px);opacity:0;transition:transform .7s cubic-bezier(.165,.84,.44,1),opacity .7s cubic-bezier(.165,.84,.44,1)}
.word.in{transform:none;opacity:1}

/* ============================================================
   SEZIONI CHIARE
   ============================================================ */
.sec{padding-block:5rem}
@media (min-width:640px){.sec{padding-block:6rem}}
.sec.surface{background:var(--surface)}
.sec.round{border-radius:var(--radius-card-lg)}
.sec-head{display:flex;flex-direction:column;gap:1rem;margin-bottom:3.5rem}
.sec-head h2{max-width:18ch}
.sec-head .lead{max-width:36rem}

/* ---------- Banda "metodo" (pill words) ---------- */
.band{display:flex;flex-direction:column;gap:.75rem;padding-block:2.5rem}
@media (min-width:640px){.band{flex-direction:row;gap:1rem}}
.band li{flex:1}
.band .tile{display:grid;place-items:center;height:6rem;border-radius:var(--radius-pill);font-size:1.5rem;font-weight:500;letter-spacing:-.01em;text-align:center;padding-inline:1rem;transition:transform .45s cubic-bezier(.22,1,.36,1)}
@media (min-width:640px){.band .tile{height:9rem;font-size:1.75rem}}
.band .tile:hover{transform:scale(1.03)}
.band .t-light{background:var(--surface);color:var(--ink)}
.band .t-brand{background:linear-gradient(to bottom right,var(--brand-from),var(--brand-to));color:#fff}
.band .t-dark{background:var(--ink-deep);color:#fff}
.band .t-ghost{background:rgba(243,244,245,.7);color:rgba(13,27,36,.4)}
.band .t-dark .ico{width:2.25rem;height:2.25rem}

/* ============================================================
   SCHEDE (card system)
   ============================================================ */
/* scheda base su superficie */
.cards{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media (min-width:768px){.cards.c2{grid-template-columns:repeat(2,1fr)}.cards.c3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.cards.c4{grid-template-columns:repeat(4,1fr)}}
@media (min-width:768px) and (max-width:1023px){.cards.c4{grid-template-columns:repeat(2,1fr)}}
.card{display:flex;flex-direction:column;gap:1rem;height:100%;border-radius:var(--radius-card);background:var(--surface);padding:1.75rem;transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease,background .4s;transform-origin:center;will-change:transform}
.card.on-white{background:var(--surface)}
@media (hover:hover){.card:hover{transform:translateY(-6px) scale(1.035);box-shadow:0 1.5rem 3rem rgba(6,37,53,.12)}}
.cards li{transition:z-index 0s}
.cards li:hover{position:relative;z-index:2}
.card .chip{display:inline-grid;place-items:center;border-radius:.75rem;background:var(--background);padding:.5rem 1rem;font-size:1.25rem;font-weight:500;color:var(--brand);width:fit-content}
.card .chip.tag{font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:.5rem .85rem}
.card h3{font-size:1.25rem;font-weight:500;line-height:1.3}
.card p{font-size:.875rem;line-height:1.7;color:var(--ink-soft)}
.card .more{margin-top:auto;padding-top:.5rem;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--brand);display:inline-flex;align-items:center;gap:.5rem}
.card .more .ico{width:.875rem;height:.875rem;transition:transform .4s cubic-bezier(.22,1,.36,1)}
a.card:hover .more .ico{transform:translateX(5px)}

/* scheda foto con didascalia in vetro */
.photo-card{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--radius-card);overflow:hidden;background:var(--surface)}
.photo-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.photo-card:hover img{transform:scale(1.04)}
.photo-card figcaption{position:absolute;inset-inline:.75rem;bottom:.75rem;border-radius:.75rem;backdrop-filter:blur(10px);color:#fff;padding:.75rem 1rem;background:rgba(6,37,53,.45)}
.photo-card.blue figcaption{background:rgba(0,124,181,.5)}
.photo-card figcaption strong{display:block;font-size:.9375rem;font-weight:500}
.photo-card figcaption span{display:block;margin-top:.15rem;font-size:.65rem;line-height:1.5;opacity:.88}
.photo-grid{display:flex;align-items:flex-end;gap:1.25rem}
.photo-grid>*{flex:1}
.photo-grid>*:nth-child(2){margin-bottom:2rem}

/* ---------- Fascia immagine nelle schede ---------- */
.card .thumb{position:relative;margin:-1.75rem -1.75rem .25rem;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius-card) var(--radius-card) 0 0;background:var(--surface-2)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){.card:hover .thumb img{transform:scale(1.06)}}

/* ---------- Varianti scheda foto ---------- */
.photo-card.wide{aspect-ratio:16/7}
.photo-card.landscape{aspect-ratio:4/3}
@media (max-width:640px){.photo-card.wide{aspect-ratio:4/3}}
.photo-duo{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media (min-width:768px){.photo-duo{grid-template-columns:1fr 1fr}}

/* lista numerata con freccia (righe) */
.rows{margin-top:3rem}
.rows li{border-top:1px solid var(--hairline)}
.rows li:last-child{border-bottom:1px solid var(--hairline)}
.rows a{display:flex;align-items:center;gap:1.5rem;padding-block:1.75rem;border-radius:var(--radius-card);transition:background .4s ease,padding .4s ease}
.rows a:hover{background:var(--background);padding-inline:1.5rem}
.sec.surface .rows a:hover{background:var(--background)}
.rows .n{width:2.5rem;flex:none;font-size:.875rem;font-weight:500;color:var(--ink-soft)}
.rows .txt{flex:1;display:flex;flex-direction:column;gap:.35rem}
.rows .txt h3{font-size:1.5rem;font-weight:500}
@media (min-width:640px){.rows .txt h3{font-size:1.875rem}}
.rows .txt p{font-size:.9375rem;color:var(--ink-soft)}
.rows .go{width:2.75rem;height:2.75rem;flex:none;display:grid;place-items:center;border-radius:var(--radius-pill);border:1px solid var(--hairline);opacity:.55;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .4s,background .4s,color .4s,border-color .4s}
.rows a:hover .go{transform:translateX(8px);opacity:1;background:var(--ink-deep);border-color:var(--ink-deep);color:#fff}
.rows .go .ico{width:1.1rem;height:1.1rem}

/* scheda citazione */
.quotes{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:3.5rem}
@media (min-width:768px){.quotes{grid-template-columns:repeat(3,1fr)}}
.qcard{display:flex;flex-direction:column;justify-content:space-between;height:100%;border-radius:var(--radius-card);background:var(--surface);padding:1.75rem;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.qcard:hover{transform:translateY(-8px)}
.qcard .glyph{font-size:2.25rem;line-height:1;color:var(--brand)}
.qcard blockquote{margin-top:1rem;font-size:1.1875rem;line-height:1.55;color:var(--ink)}
.qcard figcaption{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--hairline)}
.qcard figcaption strong{font-weight:500}
.qcard figcaption span{display:block;font-size:.875rem;color:var(--ink-soft)}

/* elenco puntato */
.ticks li{position:relative;padding:.75rem 0 .75rem 1.35rem;border-bottom:1px solid var(--hairline);font-size:1rem;line-height:1.6}
.ticks li::before{content:'';position:absolute;left:0;top:calc(.75rem + .68em);width:.375rem;height:.375rem;border-radius:var(--radius-pill);background:var(--brand)}
.ticks li:last-child{border-bottom:0}
.ticks.grande li{font-size:1.0625rem}

/* blocco split */
.split{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:start}
@media (min-width:768px){.split{grid-template-columns:1fr 1fr;gap:4rem}}
.split.end{align-items:end}
.prose{max-width:46rem}
.prose h2{font-size:1.625rem;margin-top:2.75rem;margin-bottom:.85rem}
.prose h3{font-size:1.125rem;margin-top:1.75rem;margin-bottom:.5rem;color:var(--ink)}
.prose .ticks{margin-block:1.25rem}
.prose .ticks li{color:var(--ink-soft)}
.prose .ticks li strong{color:var(--ink)}
.prose h2:first-child{margin-top:0}
.prose p{font-size:1rem;line-height:1.8;color:var(--ink-soft);margin-bottom:1rem}
.prose strong{color:var(--ink)}
.prose a{color:var(--brand);text-decoration:underline}
.prose ul{margin-bottom:1.25rem}
.prose .note{font-size:.75rem;color:var(--ink-soft)}
.prospetto{display:block;width:min(100%,60rem);margin:2.5rem auto;border-radius:var(--radius-card);border:1px solid var(--hairline)}

/* ============================================================
   PANNELLO NUMERI (navy)
   ============================================================ */
.stats{background:var(--ink-deep);color:#fff;border-radius:var(--radius-card-lg);padding:4rem 1.5rem}
@media (min-width:640px){.stats{padding:5rem 3rem}}
.stats .grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:2rem;row-gap:3rem;margin-top:4rem}
@media (min-width:1024px){.stats .grid{grid-template-columns:repeat(4,1fr)}}
.stats .cell{border-top:1px solid rgba(255,255,255,.2);padding-top:1.25rem}
.stats .val{font-size:3rem;font-weight:500;letter-spacing:-.03em;line-height:1}
@media (min-width:640px){.stats .val{font-size:4rem}}
.stats .lbl{margin-top:.75rem;font-size:.875rem;color:rgba(255,255,255,.65)}

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.cta-band{background:linear-gradient(to bottom right,var(--brand-from),var(--brand-to));color:#fff;border-radius:var(--radius-card-lg);padding:3.5rem 1.5rem}
@media (min-width:640px){.cta-band{padding:4rem 3rem;display:flex;align-items:center;justify-content:space-between;gap:2rem}}
.cta-band h2{max-width:20ch;font-size:2rem}
@media (min-width:640px){.cta-band h2{font-size:2.75rem}}
.cta-band .pill{margin-top:1.75rem}
@media (min-width:640px){.cta-band .pill{margin-top:0;flex:none}}

.site-foot{position:relative;overflow:hidden;background:var(--ink-deep);color:#fff;border-radius:var(--radius-card-lg) var(--radius-card-lg) 0 0;margin-top:.75rem;padding-block:4rem 2.5rem}
.site-foot .inner{position:relative;z-index:10}
.foot-cta{display:flex;flex-direction:column;gap:2rem;border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:3.5rem}
@media (min-width:1024px){.foot-cta{flex-direction:row;align-items:flex-end;justify-content:space-between}}
.foot-cta h2{max-width:16ch;font-size:2.5rem;line-height:.95}
@media (min-width:640px){.foot-cta h2{font-size:3.5rem}}
.foot-cols{display:grid;grid-template-columns:1fr;gap:2.5rem;padding-block:3.5rem}
@media (min-width:768px){.foot-cols{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot-cols h3{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.5);margin-bottom:1rem}
.foot-cols li{margin-bottom:.75rem}
.foot-cols a,.foot-cols address a{font-size:.9375rem;color:rgba(255,255,255,.8);display:inline-block;transition:transform .3s,color .3s}
.foot-cols a:hover{transform:translateX(4px);color:#fff}
.foot-brand img{width:12rem;background:#fff;border-radius:.6rem;padding:.45rem .7rem}
.foot-brand p{margin-top:1rem;font-size:.9375rem;line-height:1.7;color:rgba(255,255,255,.65);max-width:22rem}
.foot-brand address{font-style:normal;margin-top:1.5rem;font-size:.875rem;line-height:1.8;color:rgba(255,255,255,.8)}
.foot-brand .muted{color:rgba(255,255,255,.55)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:2rem;display:flex;flex-direction:column;gap:1rem;font-size:.8125rem;line-height:1.7;color:rgba(255,255,255,.55)}
@media (min-width:768px){.foot-bottom{flex-direction:row;align-items:center;justify-content:space-between}}
.foot-bottom a{color:rgba(255,255,255,.8);text-decoration:underline}
.foot-wm{position:absolute;inset-inline:0;bottom:-1.5rem;z-index:0;text-align:center;pointer-events:none;user-select:none;font-weight:700;line-height:1;font-size:var(--watermark);letter-spacing:-.03em;color:rgba(255,255,255,.05)}

/* ============================================================
   MENU OVERLAY
   ============================================================ */
#navmenu{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;background:var(--ink-deep);color:#fff;opacity:0;pointer-events:none;transition:opacity .5s ease}
#navmenu.open{opacity:1;pointer-events:auto}
#navmenu .top{display:flex;align-items:center;justify-content:space-between;padding-block:1.25rem}
@media (min-width:640px){#navmenu .top{padding-block:1.5rem}}
#navmenu .top img{width:12rem;background:#fff;border-radius:.6rem;padding:.45rem .7rem}
#navmenu .close{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-control);padding:.5rem 1rem;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.75);transition:border-color .3s,color .3s}
#navmenu .close:hover{border-color:rgba(255,255,255,.45);color:#fff}
#navmenu .close .ico{width:.875rem;height:.875rem;transition:transform .4s cubic-bezier(.22,1,.36,1)}
#navmenu .close:hover .ico{transform:rotate(90deg)}
#navmenu nav{flex:1;display:flex;flex-direction:column;justify-content:center}
#navmenu nav li{margin-block:.15rem}
#navmenu nav a{display:flex;align-items:baseline;gap:1rem;padding-block:.35rem;font-size:2.25rem;font-weight:500;letter-spacing:-.03em;color:rgba(255,255,255,.72);opacity:0;transform:translateY(1rem);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1),color .3s}
@media (min-width:640px){#navmenu nav a{font-size:3.5rem}}
#navmenu.open nav a{opacity:1;transform:none}
#navmenu nav a:hover{color:#fff}
#navmenu nav a i{font-style:normal;font-size:1rem;font-weight:400;color:rgba(255,255,255,.3);transition:color .3s}
#navmenu nav a:hover i{color:var(--sky)}
#navmenu .bottom{border-top:1px solid rgba(255,255,255,.15);padding-block:1.5rem;display:flex;flex-direction:column;gap:.75rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.5)}
@media (min-width:640px){#navmenu .bottom{flex-direction:row;align-items:center;justify-content:space-between}}
#navmenu .bottom button{color:rgba(255,255,255,.75)}
#navmenu .bottom button:hover{color:#fff;text-decoration:underline}

/* ============================================================
   MODALE RICHIESTA
   ============================================================ */
#modal{position:fixed;inset:0;z-index:170;display:flex;align-items:flex-end;justify-content:center;padding:.75rem;opacity:0;pointer-events:none;transition:opacity .4s ease}
@media (min-width:640px){#modal{align-items:center;padding:1.5rem}}
#modal.open{opacity:1;pointer-events:auto}
#modal .backdrop{position:absolute;inset:0;background:rgba(6,37,53,.45);backdrop-filter:blur(14px)}
#modal .panel{position:relative;width:100%;max-width:32rem;max-height:92svh;overflow-y:auto;border-radius:var(--radius-card-lg);background:#fff;padding:1.5rem;box-shadow:0 2rem 5rem rgba(6,37,53,.35);transform:translateY(28px) scale(.96);transition:transform .5s cubic-bezier(.22,1,.36,1)}
@media (min-width:640px){#modal .panel{padding:2rem}}
#modal.open .panel{transform:none}
#modal .x{position:absolute;right:1rem;top:1rem;width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:var(--radius-pill);background:var(--surface);color:var(--ink-soft);transition:background .3s,color .3s}
#modal .x:hover{background:var(--hairline);color:var(--ink)}
#modal .x .ico{width:1rem;height:1rem;transition:transform .4s cubic-bezier(.22,1,.36,1)}
#modal .x:hover .ico{transform:rotate(90deg)}
#modal h2{margin-top:.75rem;font-size:1.875rem;line-height:1.05}
@media (min-width:640px){#modal h2{font-size:2.25rem}}
#modal form{margin-top:1.75rem;display:flex;flex-direction:column;gap:1rem}

/* ---------- Form ---------- */
.field{display:flex;flex-direction:column;gap:.4rem}
.field>span{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-soft)}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--hairline);border-radius:.75rem;background:var(--background);padding:.75rem 1rem;font:inherit;font-size:.875rem;color:var(--ink);outline:none;transition:border-color .3s,box-shadow .3s}
.field textarea{min-height:7rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand-light);box-shadow:0 0 0 3px rgba(0,124,181,.15)}
.consent{display:flex;align-items:flex-start;gap:.65rem;font-size:.8125rem;line-height:1.5;color:var(--ink-soft)}
.consent input{flex:none;width:1.05rem;height:1.05rem;margin-top:.15rem;accent-color:var(--brand)}
.consent a{color:var(--brand);text-decoration:underline}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-esito{margin:0;border-radius:.75rem;padding:.85rem 1rem;font-size:.875rem;line-height:1.5}
.form-esito.ok{background:rgba(0,124,181,.1);color:var(--ink)}
.form-esito.ko{background:rgba(190,60,50,.1);color:#8a2a22}
form[data-invio] button[disabled]{opacity:.6;cursor:progress}
.form-card{border-radius:var(--radius-card);background:var(--surface);padding:1.75rem}
@media (min-width:640px){.form-card{padding:2.25rem}}
.form-card h2{font-size:1.5rem;margin-bottom:.5rem}
.form-card form{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}
.info-card{border-radius:var(--radius-card);background:var(--ink-deep);color:#fff;padding:1.75rem}
@media (min-width:640px){.info-card{padding:2.25rem}}
.info-card h2{font-size:1.5rem;margin-block:1rem .75rem}
.info-card p{font-size:1rem;line-height:1.8;color:rgba(255,255,255,.75);margin-bottom:1rem}
.info-card a{color:#fff;text-decoration:underline}
.info-card .eyebrow{color:rgba(255,255,255,.7)}
.info-card .eyebrow::before{background:var(--sky)}

/* logo partner */
.partner-logo{width:100%;height:5rem;object-fit:contain;object-position:left center;background:#fff;border-radius:.75rem;padding:.5rem}