/* ============================================================
   ZETA INTERNI — Shared Design System
   Palette: #df006a · #111110 · #f4f4f4 · #ffffff
   Font: Helvetica Neue Light/Regular
   ============================================================ */

:root{
  --magenta:#df006a;
  --ink:#111110;
  --paper:#f4f4f4;
  --white:#ffffff;
  --line:rgba(17,17,16,.1);
  --line-strong:rgba(17,17,16,.2);
  --muted:#6b6b66;
  --muted-2:#71716c;
  --vibra-green:#00e830;
  --max:1400px;
  --pad:40px;
  /* Motion language tokens (origin: homepage grammar) */
  --ease-reveal:cubic-bezier(.25,.46,.45,.94);
  --ease-smooth:cubic-bezier(.4,0,.2,1);
  --dur-micro:.2s;
  --rise:24px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden;max-width:100%}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{-webkit-tap-highlight-color:rgba(223,0,106,.12)}
[id]{scroll-margin-top:80px}
body{
  font-family:"Helvetica Neue","HelveticaNeue","Helvetica",Arial,sans-serif;
  font-weight:300;color:var(--ink);background:var(--white);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}

/* ============================================================
   ACCESSIBILITY — visible keyboard focus (WCAG 2.4.7 AA)
   Only shows on keyboard nav (:focus-visible), never on mouse click.
   Magenta ring with offset; white ring on dark surfaces.
   ============================================================ */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--magenta);
  outline-offset:3px;
  border-radius:1px;
}
.topbar :focus-visible,.site-footer :focus-visible,.cuc-cta :focus-visible,
.zn-cta :focus-visible,.liv-cta :focus-visible,.bud-cta :focus-visible,
.pro-hero :focus-visible,.intl :focus-visible,.xlinks :focus-visible{
  outline-color:#fff;outline-offset:3px;
}
/* Never strip focus for mouse users at the cost of keyboard users */
:focus:not(:focus-visible){outline:none}

/* Skip-to-content link (appears on Tab) */
.skip-link{
  position:absolute;left:-999px;top:0;z-index:100;
  background:var(--ink);color:#fff;padding:12px 20px;
  font-size:13px;letter-spacing:.04em;
}
.skip-link:focus{left:8px;top:8px}
img{display:block;max-width:100%;height:auto}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit}
/* Media never forces horizontal overflow */
img,svg,video,iframe{max-width:100%}

/* ---- Typography tokens ---- */
.kicker{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:400;color:var(--muted)}
.kicker .dot{color:var(--magenta);margin:0 10px;display:inline-block}
.accent{color:var(--magenta)}
.lead{font-size:18px;line-height:1.65;font-weight:300;color:#2a2a28}
.mono-label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---- Line-break & wrap discipline (editorial, progressive-enhancement) ----
   Headings balance across lines (no ragged last line, no lonely words);
   body & subs avoid widows/orphans. Manual <br> in heroes stay intentional. */
h1,h2,h3,h4,.sec-head h2{text-wrap:balance}
p,li,figcaption,.lead,.sub,blockquote{text-wrap:pretty}
h1,h2,h3,h4{hyphens:none}
/* Long editorial measure: keep body lines in a comfortable reading column */
.lead,.sub{max-width:62ch}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;
  background:var(--ink);color:var(--white);
  font-size:12.5px;letter-spacing:.06em;font-weight:400;
  border:1px solid var(--ink);
  transition:all .2s;text-transform:uppercase;
}
.btn:hover{background:var(--magenta);border-color:var(--magenta)}
.btn .arrow{display:inline-block;transition:transform .2s}
.btn:hover .arrow{transform:translateX(4px)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--white)}
.btn-outline-w{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55)}
.btn-outline-w:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn-magenta{background:var(--magenta);border-color:var(--magenta);color:var(--white)}
.btn-magenta:hover{background:var(--ink);border-color:var(--ink)}

/* ---- TOP BAR ---- */
.topbar{
  background:var(--ink);color:var(--white);
  font-size:11px;letter-spacing:.08em;
  padding:10px var(--pad);
  display:flex;justify-content:space-between;align-items:center;
  position:relative;z-index:20;
}
.topbar .left{display:flex;gap:24px;color:#c9c9c4}
.topbar .left a{color:#c9c9c4}
.topbar .left a:hover{color:var(--white)}
.topbar .right{display:flex;gap:16px;align-items:center;color:#c9c9c4}
.topbar .right a{color:#c9c9c4}
.topbar .right a:hover{color:var(--white)}
.topbar .right .sep{color:#3a3a36}
.topbar .right .lang{display:flex;gap:8px}
.topbar .right .lang a,.topbar .right .lang button{font-size:11px;letter-spacing:.08em;color:#c9c9c4;padding:0;text-decoration:none;background:none;border:0;cursor:pointer;font-family:inherit}
.topbar .right .lang a:hover{color:var(--white)}
.topbar .right .lang a.on,.topbar .right .lang button.on{color:var(--white)}

/* ---- NAV ---- */
.site-nav{
  position:sticky;top:0;z-index:15;
  padding:20px var(--pad);
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);
  transition:all .3s ease;
}
.site-nav .logo{display:flex;align-items:baseline;gap:14px}
.site-nav .logo .mark{font-size:22px;font-weight:400;letter-spacing:-.005em;line-height:1;display:flex;align-items:center;gap:6px}
.site-nav .logo .sq{display:inline-block;width:8px;height:8px;background:var(--magenta);flex-shrink:0;transform:translateY(-2px)}
.site-nav .logo .est{font-size:10px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.site-nav .menu{display:flex;gap:26px;align-items:center}
@media(max-width:1160px) and (min-width:961px){.site-nav .menu{gap:16px}.site-nav .menu a{font-size:12.5px}.site-nav .menu .cta-nav{padding:10px 14px;margin-left:4px}}
.site-nav .menu a{
  font-size:13px;letter-spacing:.04em;font-weight:400;
  position:relative;padding:6px 0;color:var(--ink);
}
.site-nav .menu a::after{
  content:"";position:absolute;bottom:0;left:0;
  width:0;height:1px;background:var(--magenta);
  transition:width .25s ease;
}
.site-nav .menu a:hover::after,.site-nav .menu a.active::after{width:100%}
.site-nav .menu .cta-nav{
  padding:11px 20px;background:var(--magenta);color:var(--white);
  font-size:12px;letter-spacing:.06em;
  border:1px solid var(--magenta);transition:all .2s;margin-left:8px;
}
.site-nav .menu .cta-nav:hover{background:transparent;color:var(--magenta)}
.site-nav .menu .cta-nav::after{display:none}

/* Hamburger */
.hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:36px;height:36px;cursor:pointer;padding:4px;
}
.hamburger span{display:block;width:100%;height:1px;background:var(--ink);transition:transform .3s ease,opacity .2s ease}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Mobile menu */
.mobile-menu{
  position:fixed;inset:0;z-index:14;
  background:var(--white);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.mobile-menu.open{opacity:1;pointer-events:all}
.mobile-menu a{
  display:block;width:100%;text-align:center;
  font-size:clamp(24px,7vw,38px);font-weight:300;letter-spacing:-.01em;
  padding:16px 24px;color:var(--ink);
  border-bottom:1px solid var(--line);
}
.mobile-menu a:first-of-type{border-top:1px solid var(--line)}
.mobile-menu a:hover{color:var(--magenta)}
.mobile-menu .cta-mob{
  margin-top:28px;background:var(--magenta);color:var(--white)!important;
  padding:16px 32px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  width:calc(100% - 48px);text-align:center;
}
.mobile-menu .close-mob{
  position:absolute;top:22px;right:24px;
  font-size:28px;cursor:pointer;color:var(--ink);line-height:1;
}

/* ---- FOOTER ---- */
.site-footer{
  background:var(--ink);color:var(--white);
  padding:72px var(--pad) 32px;
  border-top:1px solid rgba(255,255,255,.08);
}
.site-footer .wrap{max-width:var(--max);margin:0 auto}
.site-footer .grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:64px;
  margin-bottom:72px;
}
.site-footer h5{
  font-size:10.5px;letter-spacing:.2em;color:rgba(255,255,255,.5);
  text-transform:uppercase;margin-bottom:20px;font-weight:400;
}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:10px;font-size:13.5px}
.site-footer a{color:#d6d6d1}
.site-footer a:hover{color:var(--magenta)}
.site-footer .brand-block .mark{
  font-size:24px;font-weight:400;letter-spacing:-.005em;margin-bottom:6px;
  display:flex;align-items:baseline;gap:6px;
}
.site-footer .brand-block .sq-f{width:8px;height:8px;background:var(--magenta);display:inline-block;transform:translateY(-2px)}
.site-footer .brand-block .footer-logo{height:54px;width:auto;display:block;margin-bottom:14px}
.site-footer .brand-block .est{font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.5);text-transform:uppercase;margin-bottom:20px}
.site-footer .brand-block .addr{font-size:13.5px;color:#d6d6d1;line-height:1.7;margin-bottom:20px}
.site-footer .brand-block .socials{display:flex;flex-wrap:wrap;gap:10px 18px}
.site-footer .brand-block .socials a{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9a9a95;
  border-bottom:1px solid transparent;padding-bottom:2px;
}
.site-footer .brand-block .socials a:hover{color:var(--white);border-color:var(--magenta)}
.site-footer .map-mini{
  min-height:210px;background:#1d1d1b;border:1px solid rgba(255,255,255,.08);
  position:relative;overflow:hidden;
}
.site-footer .map-mini iframe{
  position:relative;z-index:2;display:block;width:100%;height:100%;
  min-height:210px;border:0;
  filter:invert(92%) hue-rotate(180deg) saturate(.6) brightness(.95);
}
.site-footer .map-mini:has(iframe)::before,
.site-footer .map-mini:has(iframe)::after,
.site-footer .map-mini:has(iframe) .map-label{display:none}
.site-footer .map-mini::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:30px 30px;
}
.site-footer .map-mini::after{
  content:"";position:absolute;top:45%;left:42%;
  width:14px;height:14px;border-radius:50%;
  background:var(--magenta);box-shadow:0 0 0 6px rgba(223,0,106,.22),0 0 0 16px rgba(223,0,106,.08);
}
.site-footer .map-label{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:-28px;
  background:var(--white);color:var(--ink);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 10px;white-space:nowrap;
}
.site-footer .map-label .dot{color:var(--magenta);margin-right:6px}
.site-footer .bottom{
  border-top:1px solid rgba(255,255,255,.1);padding-top:28px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.5);
}
.site-footer .bottom .legal{display:flex;gap:20px}
.site-footer .bottom .legal a{color:rgba(255,255,255,.6)}
.site-footer .bottom .legal a:hover{color:var(--magenta)}

/* ---- Scroll animations ---- */
.fade-up{
  opacity:0;transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.25,.46,.45,.94),transform .7s cubic-bezier(.25,.46,.45,.94);
}
.fade-up.in{opacity:1;transform:none}
.fade-up.d1{transition-delay:.1s}.fade-up.d2{transition-delay:.2s}
.fade-up.d3{transition-delay:.3s}.fade-up.d4{transition-delay:.4s}
.fade-up.d5{transition-delay:.5s}
@media(prefers-reduced-motion:reduce){.fade-up{opacity:1;transform:none;transition:none}}

/* ============================================================
   MOTION SYSTEM — scroll-driven reveal (CSS-only, progressive)
   Origin: the homepage .fade-up grammar, generalised for families.
   Content is ALWAYS visible by default; it animates in ONLY where
   the browser supports view timelines AND the user allows motion.
   No JS, no layout shift, fully degradable.
   Tiers: [data-reveal] (standard) · [data-reveal="calm"] (support pages).
   ============================================================ */
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    [data-reveal]{
      animation:zi-rise .01s linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 60%;
    }
    [data-reveal="calm"]{animation-range:entry 0% entry 40%;--rise:14px}
  }
}
@keyframes zi-rise{from{opacity:0;transform:translateY(var(--rise))}to{opacity:1;transform:none}}

/* ---- Shared section header ---- */
.sec-head{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:32px;margin-bottom:64px;
}
.sec-head .left .kicker{display:block;margin-bottom:14px}
.sec-head h2{font-size:clamp(32px,4vw,56px);font-weight:300;letter-spacing:-.02em;line-height:1.07}
.sec-head h2 em{font-style:italic;color:var(--magenta);font-weight:300}

/* ---- Responsive shared ---- */
@media(max-width:960px){
  :root{--pad:24px}
  .topbar{display:none}
  .site-nav .menu .cta-nav,
  .site-nav .menu a:not(.cta-nav){display:none}
  .hamburger{display:flex}
  .site-footer .grid{grid-template-columns:1fr 1fr;gap:40px;margin-bottom:48px}
  .sec-head{flex-direction:column;align-items:flex-start;gap:20px}
}
@media(max-width:600px){
  :root{--pad:20px}
  .site-footer{padding:48px var(--pad) 28px}
  .site-footer .grid{grid-template-columns:1fr;gap:36px;margin-bottom:36px}
  .site-footer .map-mini{min-height:160px}
  .site-footer .bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .sec-head h2{font-size:clamp(28px,8vw,42px)}
  /* Remove animation delays — elements often already in viewport on mobile */
  .fade-up.d1,.fade-up.d2,.fade-up.d3,.fade-up.d4,.fade-up.d5{transition-delay:0s}
  /* Larger touch targets for interactive elements */
  .filter-btn{padding:12px 18px;font-size:11px}
  .proj-nav a{min-height:72px}
  .brand-chip{padding:16px 20px}
}

/* ============================================================
   MOBILE HARDENING — touch targets, hover isolation, safe-area
   ============================================================ */

/* Isolate hover effects to devices that actually hover (no sticky-hover on touch) */
@media(hover:none){
  .btn:hover{background:var(--ink);border-color:var(--ink)}
  .btn-magenta:hover{background:var(--magenta);border-color:var(--magenta)}
  .btn-outline:hover{background:transparent;color:var(--ink)}
  .btn:hover .arrow{transform:none}
  .site-nav .menu a:hover::after{width:0}
  .site-footer a:hover,.site-footer .bottom .legal a:hover{color:#d6d6d1}
  .site-footer .brand-block .socials a:hover{color:#9a9a95;border-color:transparent}
  /* Neutralize sticky image-zoom hovers on touch (galleries, cards, lookbook) */
  .gal-item:hover img,
  .card:hover img,
  .featured .media:hover img,
  .lb-card:hover img,
  .showroom-photo:hover img,
  .showroom-img .img:hover img,
  .proj-card:hover img{transform:none}
  .proj-nav a:hover{background:transparent}
}

/* Touch: comfortable tap targets (≥44px) and full-width primary actions */
@media(max-width:960px){
  .mobile-menu a{min-height:56px;display:flex;align-items:center;justify-content:center}
  .site-footer li{margin-bottom:4px}
  .site-footer li a{display:inline-block;padding:8px 0;min-height:24px}
  .site-footer .bottom{justify-content:flex-start;gap:12px}
  .btn{padding:15px 24px;min-height:48px}
}
@media(max-width:600px){
  /* Primary buttons go full-width for thumb reach */
  main .btn,.cta-pair .btn,.cta-final .btn{width:100%;justify-content:center}
  /* Honour iOS safe areas */
  .site-nav,.topbar{padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}
}

/* Smooth momentum scrolling for any horizontal track */
[class*="-track"],.lb-track,.gal-grid{-webkit-overflow-scrolling:touch}

/* Long strings (email, URLs) must never overflow or get clipped on mobile */
a[href^="mailto:"],a[href^="tel:"]{overflow-wrap:anywhere;word-break:break-word}
.about-cta .right .val,.cta-final .right .val,.contact-info .val,.site-footer a{overflow-wrap:anywhere}

/* ---- Unified interactive feedback (system hover, origin: home) ----
   One easing + one travel for all card/image hovers, so similar
   components react identically. Per-page scale values still win;
   this only harmonises the TIMING so nothing "jumps". Touch + reduced
   motion already neutralised above. */
.card,.bh-card,.proj-card,.sac-case,.mat-where .card,.cuc-where .card,.zn-where .card,.liv-where .card{transition:border-color .25s var(--ease-smooth)}
.card .ci img,.bh-card .ci img,.cuc-where .card .ci img,.zn-where .card .ci img,.liv-where .card .ci img,.mat-where .card .ci img{transition:transform .55s var(--ease-smooth)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}
}

/* ============================================================
   BRANDED CHIPS — tag / filter "quadratini" (system, origin: brand)
   Magenta outline + micro-tint per dare presenza, mantenendo il
   contrasto del testo. !important: token trasversale che deve
   vincere sulle regole per-pagina (caricate dopo shared.css).
   ============================================================ */
/* Tag statici (servizi, home, landing) — bordo brand + sfondo tenue */
.tags span{
  border-color:rgba(223,0,106,.42) !important;
  background:rgba(223,0,106,.05);
  transition:border-color .2s var(--ease-smooth),background .2s var(--ease-smooth);
}
.tags span:hover{
  border-color:var(--magenta) !important;
  background:rgba(223,0,106,.10);
}
/* Filtri progetti (.filter-btn) — riposo: bordo brand tenue */
.filter-btn{border-color:rgba(223,0,106,.42) !important}
.filter-btn:hover{border-color:var(--magenta) !important;color:var(--ink) !important}
/* Attivo: pieno magenta, testo bianco (contrasto 4.84:1, AA ✓) */
.filter-btn.on{background:var(--magenta) !important;border-color:var(--magenta) !important;color:#fff !important}
/* Focus visibile da tastiera su filtri e chip interattivi (a11y) */
.filter-btn:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}

/* ═══════ Unified mobile menu (mm-ready) — scroll-lock, header, stagger ═══════ */
.mobile-menu.mm-ready{z-index:60;justify-content:flex-start;align-items:stretch;padding:0;background:var(--white)}
.mobile-menu.mm-ready .mm-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px var(--pad);border-bottom:1px solid var(--line);flex:0 0 auto}
.mobile-menu.mm-ready .mm-logo{display:flex;align-items:baseline;gap:14px;text-decoration:none}
.mobile-menu.mm-ready .mm-logo .mark{font-size:22px;font-weight:400;letter-spacing:-.005em;line-height:1;display:flex;align-items:center;gap:6px;color:var(--ink)}
.mobile-menu.mm-ready .mm-logo .sq{display:inline-block;width:8px;height:8px;background:var(--magenta);flex-shrink:0;transform:translateY(-2px)}
.mobile-menu.mm-ready .mm-logo .est{font-size:10px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.mobile-menu.mm-ready .mm-close{background:none;border:0;cursor:pointer;color:var(--ink);font-size:30px;line-height:1;width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin:-4px -10px -4px 0;flex:0 0 auto}
.mobile-menu.mm-ready .mm-close:hover{color:var(--magenta)}
.mobile-menu.mm-ready .mm-nav{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:0;overflow-y:auto;padding:8px var(--pad) max(28px,env(safe-area-inset-bottom))}
.mobile-menu.mm-ready .mm-nav a{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:10px 8px;text-align:center;font-size:clamp(22px,5.6vw,32px);font-weight:300;letter-spacing:-.01em;color:var(--ink);border-bottom:1px solid var(--line);text-decoration:none}
.mobile-menu.mm-ready .mm-nav a:first-child{border-top:1px solid var(--line)}
.mobile-menu.mm-ready .mm-nav a:hover{color:var(--magenta)}
.mobile-menu.mm-ready .mm-nav a[aria-current="page"]{color:var(--magenta)}
.mobile-menu.mm-ready .mm-nav a.cta-mob{margin-top:22px;background:var(--magenta);color:var(--white);border:0;min-height:62px;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.mobile-menu.mm-ready .mm-nav a.cta-mob:first-child{border-top:0}
.mobile-menu.mm-ready .mm-nav a.cta-mob:hover{color:var(--white);opacity:.92}
body.mm-locked{position:fixed!important;left:0;right:0;width:auto;overflow:hidden}
@media (prefers-reduced-motion: no-preference){
  .mobile-menu.mm-ready .mm-nav a{opacity:0;transform:translateY(14px);transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1)}
  .mobile-menu.mm-ready.open .mm-nav a{opacity:1;transform:none}
  .mobile-menu.mm-ready.open .mm-nav a:nth-child(1){transition-delay:.06s}
  .mobile-menu.mm-ready.open .mm-nav a:nth-child(2){transition-delay:.13s}
  .mobile-menu.mm-ready.open .mm-nav a:nth-child(3){transition-delay:.20s}
  .mobile-menu.mm-ready.open .mm-nav a:nth-child(4){transition-delay:.27s}
  .mobile-menu.mm-ready.open .mm-nav a:nth-child(5){transition-delay:.34s}
  .mobile-menu.mm-ready.open .mm-nav a:nth-child(6){transition-delay:.41s}
  .mobile-menu.mm-ready.open .mm-nav a:nth-child(7){transition-delay:.48s}
  .mobile-menu.mm-ready.open .mm-nav a:nth-child(8){transition-delay:.55s}
  .mobile-menu.mm-ready.open .mm-nav a:nth-child(9){transition-delay:.62s}
  .mobile-menu.mm-ready.open .mm-nav a:nth-child(10){transition-delay:.69s}
}

/* ═══════ Blur-to-sharp image load (global, robust: nessuno stato nascosto se JS off) ═══════ */
img.zi-blur{filter:blur(14px)}
img.zi-blur.zi-sharp{filter:blur(0)}
@media (prefers-reduced-motion: no-preference){
  img.zi-blur.zi-sharp{animation:ziSharpen .65s cubic-bezier(.22,.61,.36,1) forwards}
}
@keyframes ziSharpen{from{filter:blur(14px)}to{filter:blur(0)}}