/* Font ospitati sul nostro dominio: nessuna richiesta a server esterni */
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/aFTU7PB1QTsUX8KYthSQBLyM.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;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/aFTU7PB1QTsUX8KYthqQBA.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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/aFTR7PB1QTsUX8KYvumzEY2tbZX9.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;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/aFTR7PB1QTsUX8KYvumzEYOtbQ.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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/rP2Hp2ywxg089UriCZ2IHSeH.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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/rP2Hp2ywxg089UriCZOIHQ.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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/rP2Hp2ywxg089UriCZ2IHSeH.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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/rP2Hp2ywxg089UriCZOIHQ.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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/rP2Hp2ywxg089UriCZ2IHSeH.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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/rP2Hp2ywxg089UriCZOIHQ.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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/rP2Hp2ywxg089UriCZ2IHSeH.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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/rP2Hp2ywxg089UriCZOIHQ.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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/rP2Hp2ywxg089UriCZ2IHSeH.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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/rP2Hp2ywxg089UriCZOIHQ.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;
}

:root{
    --sand: #e4e2dd;
    --sand-deep: #d8d5cd;
    --ink: #0a0a0a;
    --paper: #ffffff;
    --grey-700: #2a2a2a;
    --grey-500: #5a5a5a;
    --grey-300: #b0b0b0;
    --grey-200: #c8c6c0;
    --frame: #1a1a1a;
    --line-strong: #0a0a0a;
    --line-soft: rgba(10,10,10,.08);
    --invert-bg: #0a0a0a;
    --invert-fg: #ffffff;
    --invert-body: #e4e2dd;
    --invert-muted: #b0b0b0;
    --invert-faint: #5a5a5a;
    --invert-line: rgba(228,226,221,.18);
    --field-bg: #ffffff;
    --field-border: #b0b0b0;
    --danger: #b91c1c;
    --on-ink-faint: rgba(255,255,255,.5);
    --grain-1: rgba(0,0,0,.035);
    --grain-2: rgba(0,0,0,.025);
    --grain-blend: multiply;
    --hero-blend: multiply;
    --hero-filter: none;
    --rail: 5vw;
    --rail-min: 24px;
    --rail-max: 88px;
    --t-fast: 240ms cubic-bezier(.2,.7,.2,1);
    --t-med: 520ms cubic-bezier(.2,.7,.2,1);
    --t-slow: 900ms cubic-bezier(.2,.7,.2,1);
  }

  /* ---------- Tema scuro ---------- */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --sand: #0f0f0f;
      --sand-deep: #161616;
      --ink: #ebe8e2;
      --paper: #0f0f0f;
      --grey-700: #c3c0b9;
      --grey-500: #8e8b85;
      --grey-300: #6b6862;
      --grey-200: #3a3a36;
      --frame: #171717;
      --line-strong: rgba(235,232,226,.28);
      --line-soft: rgba(235,232,226,.10);
      --invert-bg: #1a1a19;
      --invert-fg: #f4f2ed;
      --invert-body: #dedbd5;
      --invert-muted: #a8a49c;
      --invert-faint: #75726b;
      --invert-line: rgba(244,242,237,.16);
      --field-bg: #161615;
      --field-border: #3a3a36;
      --danger: #f87171;
      --on-ink-faint: rgba(15,15,15,.45);
      --grain-1: rgba(255,255,255,.030);
      --grain-2: rgba(255,255,255,.022);
      --grain-blend: screen;
      --hero-blend: lighten;
      --hero-filter: invert(1);
    }
  }
  :root[data-theme="dark"]{
    --sand: #0f0f0f;
    --sand-deep: #161616;
    --ink: #ebe8e2;
    --paper: #0f0f0f;
    --grey-700: #c3c0b9;
    --grey-500: #8e8b85;
    --grey-300: #6b6862;
    --grey-200: #3a3a36;
    --frame: #171717;
    --line-strong: rgba(235,232,226,.28);
    --line-soft: rgba(235,232,226,.10);
    --invert-bg: #1a1a19;
    --invert-fg: #f4f2ed;
    --invert-body: #dedbd5;
    --invert-muted: #a8a49c;
    --invert-faint: #75726b;
    --invert-line: rgba(244,242,237,.16);
    --field-bg: #161615;
    --field-border: #3a3a36;
    --danger: #f87171;
    --on-ink-faint: rgba(15,15,15,.45);
    --grain-1: rgba(255,255,255,.030);
    --grain-2: rgba(255,255,255,.022);
    --grain-blend: screen;
    --hero-blend: lighten;
    --hero-filter: invert(1);
  }
  *{box-sizing:border-box}
  /* le regole d'autore hanno la precedenza sul foglio del browser: senza questa
     riga qualunque display dichiarato rende visibile un elemento con [hidden] */
  [hidden]{display:none !important}
  html,body{margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family: "DM Sans", system-ui, sans-serif;
    font-weight: 400;
    color: var(--ink);
    background: var(--sand);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01","cv11";
    overflow-x: hidden;
    transition: background var(--t-fast), color var(--t-fast);
  }
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit}
  .mono{font-family:"DM Mono",ui-monospace,monospace;font-weight:400;letter-spacing:.02em}

  /* ---------- Layout rails ---------- */
  .rail{padding-inline: clamp(var(--rail-min), var(--rail), var(--rail-max));}
  .section{padding-block: clamp(96px, 14vw, 200px);}
  .eyebrow{
    font-family:"DM Mono",ui-monospace,monospace;
    font-size: 11px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color: var(--grey-500);
  }
  .eyebrow .dot{display:inline-block;width:6px;height:6px;background:currentColor;margin-right:10px;transform:translateY(-1px)}

  /* ---------- Top bar ---------- */
  .topbar{
    position: fixed; inset: 0 0 auto 0; z-index: 60;
    display:flex; align-items:center; justify-content:space-between;
    padding: 22px clamp(var(--rail-min), var(--rail), var(--rail-max));
    mix-blend-mode: difference;
    color: #f4f1ea;
    pointer-events:none;
  }
  .topbar > *{pointer-events:auto}
  .topbar .mark{display:flex;align-items:center}
  /* il logo e disegnato con currentColor: cosi segue il colore della barra,
     sia sotto mix-blend-mode difference sia col menu mobile aperto */
  .topbar .mark .logo{
    display:block; height:34px; aspect-ratio: 261 / 120;
    background: url("/assets/logo-mark.png") center/contain no-repeat;
  }
  @supports ((-webkit-mask-image: url("")) or (mask-image: url(""))){
    .topbar .mark .logo{
      background: currentColor;
      -webkit-mask: url("/assets/logo-mark.png") center/contain no-repeat;
      mask: url("/assets/logo-mark.png") center/contain no-repeat;
    }
  }
  @media (max-width: 560px){ .topbar .mark .logo{ height:26px } }
  .topbar > nav{display:flex;gap:28px}
  .topbar nav a{
    font-family:"DM Mono",ui-monospace,monospace;
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    opacity:.85; transition: opacity var(--t-fast);
  }
  .topbar nav a:hover{opacity:1}
  .topbar .cta{
    font-family:"DM Mono",ui-monospace,monospace;
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    border:1px solid currentColor; padding:9px 14px;
  }
  .topbar-actions{display:flex; align-items:center; gap:14px}
  .topbar .lang{
    font-family:"DM Mono",ui-monospace,monospace;
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    opacity:.85; transition: opacity var(--t-fast);
  }
  .topbar .lang:hover{opacity:1}
  .theme-toggle{
    width:34px; height:34px; flex:none;
    border:1px solid currentColor;
    display:flex; align-items:center; justify-content:center;
    opacity:.85; transition: opacity var(--t-fast);
  }
  .theme-toggle:hover{opacity:1}
  .theme-toggle svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; display:block}
  .theme-toggle .i-sun{display:none}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .theme-toggle .i-sun{display:block}
    :root:not([data-theme="light"]) .theme-toggle .i-moon{display:none}
  }
  :root[data-theme="dark"] .theme-toggle .i-sun{display:block}
  :root[data-theme="dark"] .theme-toggle .i-moon{display:none}
  @media (max-width: 760px){
    .topbar > nav{display:none}
  }
  @media (max-width: 560px){
    .topbar-actions{gap:10px}
    .topbar .cta{padding:7px 10px; font-size:10px; letter-spacing:.16em}
    .theme-toggle{width:30px; height:30px}
  }

  /* ---------- Hero ---------- */
  .hero{
    min-height: 100svh;
    position: relative;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding-block: clamp(110px, 18vh, 200px) clamp(48px, 8vh, 96px);
    background: var(--sand);
    overflow:hidden;
  }
  .hero::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image:
      radial-gradient(var(--grain-1) 1px, transparent 1.2px),
      radial-gradient(var(--grain-2) 1px, transparent 1.2px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 1px 1px;
    mix-blend-mode: var(--grain-blend);
    opacity:.6;
  }
  .hero-meta{
    display:flex; justify-content:space-between; gap:24px; align-items:flex-start;
    margin-bottom: clamp(28px, 4vh, 48px);
  }
  .hero-meta .col{display:flex;flex-direction:column;gap:6px;max-width: 30ch}
  .hero-meta .col .k{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--grey-500); font-family:"DM Mono",ui-monospace,monospace}
  .hero-meta .col .v{font-size:14px; color:var(--ink); font-weight:500}
  .hero-meta .sig{
    height: clamp(56px, 8vh, 84px);
    align-self:flex-start;
    transform: rotate(-3deg);
    transform-origin: center;
  }
  .hero-title{
    margin: 0;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .hero-logo{
    display:block;
    width: clamp(260px, 62vw, 1000px);
    height:auto;
    aspect-ratio: 16 / 9;
    background: transparent;
    mix-blend-mode: var(--hero-blend);
    filter: var(--hero-filter);
  }

  .hero-baseline{
    display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
    margin-top: clamp(24px, 4vh, 44px);
    flex-wrap:wrap;
  }
  .hero-baseline .sub{
    display:flex; flex-direction:column; gap:4px;
    font-size: clamp(14px, 1.3vw, 18px);
  }
  .hero-baseline .sub .a{font-weight:500}
  .hero-baseline .sub .b{color: var(--grey-500); font-family:"DM Mono",ui-monospace,monospace; font-size: 12px; letter-spacing:.18em; text-transform:uppercase}
  .hero-scroll{
    display:flex; align-items:center; gap:10px;
    font-family:"DM Mono",ui-monospace,monospace;
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    color: var(--grey-500);
  }
  .hero-scroll .line{display:block; width:48px; height:1px; background: currentColor}
  .hero-intro{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap: clamp(24px, 4vw, 64px); flex-wrap:wrap;
    margin-top: clamp(28px, 4vh, 48px);
    padding-top: clamp(24px, 3vh, 36px);
    border-top: 1px solid var(--line-soft);
  }
  .hero-intro p{
    margin:0; max-width: 58ch; color: var(--grey-700);
    font-size: clamp(15px, 1.15vw, 18px); line-height:1.6;
  }
  .hero-actions{display:flex; gap:12px; flex-wrap:wrap}
  .hero-actions .btn{
    font-family:"DM Mono",ui-monospace,monospace;
    font-size:12px; letter-spacing:.18em; text-transform:uppercase;
    white-space:nowrap; padding:14px 24px; border:1px solid var(--line-strong);
    transition: background var(--t-fast), color var(--t-fast), opacity var(--t-fast);
  }
  .hero-actions .btn:hover{background: var(--ink); color: var(--sand)}
  .hero-actions .btn.primary{background: var(--ink); color: var(--sand)}
  .hero-actions .btn.primary:hover{opacity:.85}

  @media (max-width: 760px){
    .hero{
      min-height: 100svh;
      padding-top: 70px;
      padding-bottom: 40px;
      justify-content: space-between;
      gap: 0;
    }
    .hero-meta{ margin-bottom: 0; gap: 0; }
    .hero-meta .sig{ display:none }
    .hero-meta .col:last-child{ display:none }
    .hero-title{ margin-inline: calc(-1 * var(--rail-min)); }
    .hero-logo{ width: 100%; max-width: none; }
    .hero-baseline{ margin-top: 0; flex-direction: column; gap: 10px; }
    .hero-scroll{ display:none }
    .hero-intro{ margin-top: 22px; padding-top: 20px; gap: 20px; }
    .hero-actions .btn{ flex:1 1 auto; text-align:center; padding:13px 18px; }
  }

  /* ---------- Chi sono ---------- */
  .chi{ background: var(--sand); }
  .chi-grid{
    display:grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 80px);
    align-items:start;
  }
  @media (max-width: 900px){ .chi-grid{grid-template-columns:1fr; gap:40px} }
  .photo-frame{
    position:relative; aspect-ratio: 4/5;
    background: var(--frame);
    overflow:hidden;
  }
  .photo-frame .stripes{
    position:absolute; inset:0;
    background:
      repeating-linear-gradient(
        135deg,
        #1f1f1f 0 18px,
        #181818 18px 36px
      );
    opacity:.9;
  }
  .photo-frame .meta{
    position:absolute; left:14px; bottom:14px; right:14px;
    display:flex; justify-content:space-between; align-items:flex-end;
    font-family:"DM Mono",ui-monospace,monospace;
    color: rgba(228,226,221,.78);
    font-size: 10px; letter-spacing:.18em; text-transform:uppercase;
  }
  .photo-frame .meta .tag{
    border:1px solid rgba(228,226,221,.35);
    padding:5px 8px;
  }
  .photo-frame .pin{
    position:absolute; top:14px; left:14px;
    width:10px; height:10px; border:1px solid rgba(228,226,221,.55);
    border-radius:50%;
  }
  .photo-frame .corner{
    position:absolute; top:14px; right:14px;
    font-family:"DM Mono",ui-monospace,monospace;
    color: rgba(228,226,221,.78);
    font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  }
  .chi-copy{display:flex; flex-direction:column; gap: clamp(28px, 3vw, 44px)}
  .chi h2{
    font-weight: 900;
    font-size: clamp(48px, 7.2vw, 124px);
    line-height: .88;
    letter-spacing: -.035em;
    margin:0;
  }
  .chi h2 .accent{ font-style: italic; font-weight: 900; }
  .chi .bio{
    max-width: 56ch;
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.55;
    color: var(--grey-700);
    font-weight: 400;
  }
  .chi .bio p + p{margin-top: 1em}
  .stats{
    display:grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 32px);
    border-top: 1px solid var(--line-strong);
    padding-top: clamp(20px, 2vw, 28px);
  }
  .stats .cell{display:flex; flex-direction:column; gap:6px}
  .stats .cell .n{
    font-weight: 900;
    font-size: clamp(34px, 4.6vw, 76px);
    line-height: 1;
    letter-spacing: -.03em;
  }
  .stats .cell .l{
    font-family:"DM Mono",ui-monospace,monospace;
    font-size: 11px; letter-spacing:.2em; text-transform:uppercase;
    color: var(--grey-500);
  }
  @media (max-width: 560px){ .stats{grid-template-columns: 1fr 1fr} }

  /* ---------- Categorie ---------- */
  .categorie{ background: var(--sand); border-top: 1px solid var(--line-soft); }
  .cat-head{
    display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
    margin-bottom: clamp(40px, 5vw, 80px);
    flex-wrap:wrap;
  }
  .cat-head h2{
    font-weight: 900; font-size: clamp(40px, 5.6vw, 92px); line-height:.9;
    letter-spacing: -.035em; margin:0;
  }
  .cat-counter{
    font-family:"DM Mono",ui-monospace,monospace;
    font-size: 12px; letter-spacing:.22em; text-transform:uppercase;
    color: var(--grey-500); display:flex; align-items:center; gap:14px;
  }
  .cat-counter .bar{display:inline-block; width:60px; height:1px; background: currentColor}

  .tabs{
    display:flex; gap:0; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong);
    overflow-x:auto; scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{
    flex: 1 1 auto; min-width: max-content;
    padding: 22px 26px;
    font-weight: 700; letter-spacing: .04em;
    font-size: clamp(13px, 1.05vw, 16px);
    text-transform: uppercase;
    border-right:1px solid var(--line-strong);
    text-align:left;
    color: var(--grey-500);
    position:relative;
    transition: color var(--t-fast), background var(--t-fast);
    display:flex; align-items:center; gap:14px;
    white-space: nowrap;
  }
  .tabs button:last-child{border-right:0}
  .tabs button .idx{
    font-family:"DM Mono",ui-monospace,monospace;
    font-size: 10px; letter-spacing:.2em;
    color: var(--grey-300);
    font-weight: 500;
  }
  .tabs button:hover{ color: var(--ink); }
  .tabs button[aria-selected="true"]{
    color: var(--paper); background: var(--ink);
  }
  .tabs button[aria-selected="true"] .idx{ color: var(--on-ink-faint) }

  .gallery{
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(10px, 1.1vw, 18px);
    margin-top: clamp(28px, 3.5vw, 56px);
  }
  .tile{
    position:relative; overflow:hidden; background: var(--frame);
    grid-column: span 4;
    aspect-ratio: 3 / 4;
    cursor: zoom-in;
  }
  .tile.wide{ grid-column: span 8; aspect-ratio: 16 / 9; }
  .tile.tall{ grid-column: span 4; aspect-ratio: 3 / 4; }
  .tile.sm{ grid-column: span 3; aspect-ratio: 1 / 1; }
  .tile.med{ grid-column: span 6; aspect-ratio: 4 / 3; }
  @media (max-width: 900px){
    .tile, .tile.tall{ grid-column: span 6; }
    .tile.wide{ grid-column: span 12; }
    .tile.sm{ grid-column: span 6; }
    .tile.med{ grid-column: span 12; }
  }
  @media (max-width: 560px){
    .tile, .tile.tall, .tile.sm{ grid-column: span 12 !important; aspect-ratio: 4/5 }
  }
  .tile .stripes{
    position:absolute; inset:0;
    background:
      repeating-linear-gradient(
        135deg,
        #1c1c1c 0 22px,
        #161616 22px 44px
      );
    transition: transform var(--t-med);
  }
  .tile:hover .stripes{ transform: scale(1.04); }
  .tile .overlay{
    position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 40%, rgba(10,10,10,.78) 100%);
    opacity:0; transition: opacity var(--t-med);
  }
  .tile:hover .overlay{ opacity:1 }
  .tile .caption{
    position:absolute; left:18px; right:18px; bottom:16px;
    color: #e4e2dd; display:flex; justify-content:space-between; align-items:flex-end;
    transform: translateY(8px); opacity:0;
    transition: transform var(--t-med), opacity var(--t-med);
    font-family:"DM Mono",ui-monospace,monospace;
    font-size: 11px; letter-spacing:.18em; text-transform:uppercase;
  }
  .tile:hover .caption{ transform: translateY(0); opacity:1 }
  .tile .caption strong{font-weight:500}
  .tile .corner{
    position:absolute; top:14px; left:14px;
    font-family:"DM Mono",ui-monospace,monospace;
    font-size: 10px; letter-spacing:.2em; text-transform:uppercase;
    color: rgba(228,226,221,.6);
  }
  .tile .corner-r{
    position:absolute; top:14px; right:14px;
    font-family:"DM Mono",ui-monospace,monospace;
    font-size: 10px; letter-spacing:.2em; text-transform:uppercase;
    color: rgba(228,226,221,.6);
  }

  /* ---------- Numeri ---------- */
  .numeri{
    background: var(--invert-bg); color: var(--invert-fg);
    padding-block: clamp(110px, 15vw, 220px);
    position:relative; overflow:hidden;
  }
  .numeri::before{
    content:""; position:absolute; inset:0;
    background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1.2px);
    background-size: 4px 4px;
    pointer-events:none;
    opacity:.6;
  }
  .numeri .head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:24px; flex-wrap:wrap;
    margin-bottom: clamp(56px, 7vw, 110px);
  }
  .numeri h2{
    font-weight: 900; font-size: clamp(40px, 5.4vw, 88px); line-height:.9;
    letter-spacing: -.035em; margin:0; max-width: 16ch;
  }
  .numeri .head .kicker{
    font-family:"DM Mono",ui-monospace,monospace;
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    color: var(--invert-muted);
    max-width: 38ch; line-height:1.6;
  }
  .num-grid{
    display:grid; grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 3vw, 40px);
  }
  @media (max-width: 900px){ .num-grid{grid-template-columns: repeat(2, 1fr)} }
  .num{
    display:flex; flex-direction:column; gap:14px;
    padding-top: 22px;
    border-top: 1px solid var(--invert-line);
  }
  .num .v{
    font-weight: 900;
    font-size: clamp(64px, 10vw, 168px);
    line-height: .9;
    letter-spacing: -.04em;
    display:flex; align-items:baseline; gap:6px;
  }
  .num .v .suffix{
    font-size: .45em; font-weight: 700; letter-spacing: -.02em;
    color: var(--invert-muted);
  }
  .num .l{
    font-family:"DM Mono",ui-monospace,monospace;
    font-size: 12px; letter-spacing:.22em; text-transform:uppercase;
    color: var(--invert-muted);
  }
  .num .n{
    font-family:"DM Mono",ui-monospace,monospace;
    font-size: 10px; letter-spacing:.22em;
    color: var(--invert-faint);
  }

  /* ---------- Portfolio teaser ---------- */
  .portfolio{ background: var(--sand); }
  .pf-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:24px; margin-bottom: clamp(40px, 5vw, 80px); flex-wrap:wrap;
  }
  .pf-head h2{
    font-weight: 900; font-size: clamp(40px, 5.6vw, 96px); line-height:.9;
    letter-spacing: -.035em; margin:0;
  }
  .pf-head .link{
    font-family:"DM Mono",ui-monospace,monospace;
    font-size: 12px; letter-spacing:.22em; text-transform:uppercase;
    display:flex; align-items:center; gap:12px; padding-bottom:6px;
    border-bottom:1px solid var(--line-strong);
  }
  .pf-head .link svg{width:14px;height:14px}
  .pf-text{
    margin: 20px 0 0; max-width: 60ch; color: var(--grey-700);
    font-size: clamp(15px, 1.1vw, 17px); line-height:1.6;
  }
  .pf-grid{
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(10px, 1.2vw, 18px);
  }

  /* ---------- Contattami ---------- */
  .contact{ background: var(--sand); border-top: 1px solid var(--line-soft); }
  .contact-head{ margin-bottom: clamp(40px, 5vw, 72px); }
  .contact-head h2{
    font-weight: 900; font-size: clamp(40px, 5.6vw, 96px); line-height:.9;
    letter-spacing: -.035em; margin:0;
  }
  .contact-text{
    margin: 22px 0 0; max-width: 58ch; color: var(--grey-700);
    font-size: clamp(15px, 1.1vw, 17px); line-height:1.6;
  }
  .contact-form{ max-width: 560px; }
  .contact-field{ margin-bottom: 20px; }
  .contact-field label{
    display:block; font-family:"DM Mono",ui-monospace,monospace;
    font-size: 11px; letter-spacing:.18em; text-transform:uppercase;
    color: var(--grey-500); margin-bottom: 8px;
  }
  .contact-field label .opt{ text-transform:none; letter-spacing:0; color: var(--grey-300); }
  .contact-field input, .contact-field textarea{
    width:100%; border:1px solid var(--field-border); background: var(--field-bg);
    padding: 12px 14px; font-family:"DM Sans",system-ui,sans-serif; font-size: 15px;
    color: var(--ink); outline:none; resize: vertical;
  }
  .contact-field input:focus, .contact-field textarea:focus{ border-color: var(--ink); }
  .contact-consent{ display:flex; gap:12px; align-items:flex-start; margin: 6px 0 18px; }
  .contact-consent input{
    flex:none; width:18px; height:18px; margin-top:2px; accent-color: var(--ink);
    border:1px solid var(--field-border);
  }
  .contact-consent label{
    font-size:13.5px; line-height:1.5; color: var(--grey-700); max-width:52ch; cursor:pointer;
  }
  .contact-consent label a{ border-bottom:1px solid var(--grey-300) }
  .contact-consent label a:hover{ border-color: var(--ink) }
  .contact-form-err{ font-size:12px; color:var(--danger); min-height:16px; margin-bottom:8px; }
  .contact-submit{
    font-family:"DM Mono",ui-monospace,monospace;
    font-size: 12px; letter-spacing:.18em; text-transform:uppercase;
    background: var(--ink); color: var(--paper); padding: 15px 28px;
    transition: opacity var(--t-fast);
  }
  .contact-submit:hover{ opacity:.85; }
  .contact-submit:disabled{ opacity:.5; cursor:not-allowed; }
  .contact-thanks{ font-size:16px; line-height:1.6; color: var(--grey-700); max-width:560px; }

  /* ---------- Marquee ---------- */
  .marquee{
    background: var(--sand);
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    overflow:hidden;
    padding-block: 22px;
  }
  .marquee-track{
    display:flex; gap: 48px; width: max-content;
    animation: scroll 38s linear infinite;
    font-weight: 900;
    font-size: clamp(28px, 4.4vw, 64px);
    letter-spacing: -.03em;
    line-height: 1;
    text-transform: uppercase;
    align-items:center;
  }
  .marquee-track .star{font-weight: 400; font-size: .6em; color: var(--grey-500)}
  @keyframes scroll{
    from{transform: translateX(0)}
    to{transform: translateX(-50%)}
  }

  /* ---------- Footer ---------- */
  .footer{
    background: var(--invert-bg); color: var(--invert-body);
    padding-block: clamp(72px, 9vw, 140px) 36px;
  }
  .footer .grid{
    display:grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 4vw, 80px);
    align-items:end;
    margin-bottom: clamp(56px, 7vw, 110px);
  }
  @media (max-width: 900px){ .footer .grid{grid-template-columns:1fr; align-items:start} }
  .footer .wordmark{
    font-weight: 900;
    font-size: clamp(72px, 14vw, 240px);
    line-height: .82;
    letter-spacing: -.04em;
    margin: 0;
  }
  .footer .info{display:flex; flex-direction:column; gap: 28px;}
  .footer .info .row{
    display:flex; flex-direction:column; gap:6px;
    border-top: 1px solid var(--invert-line);
    padding-top: 14px;
  }
  .footer .info .k{
    font-family:"DM Mono",ui-monospace,monospace;
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    color: var(--invert-muted);
  }
  .footer .info .v{ font-size: 18px; font-weight: 500; }
  .footer .info .v a{ transition: color var(--t-fast); }
  .footer .info .v a:hover{ color: var(--invert-fg); }
  .footer .meta{
    display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
    font-family:"DM Mono",ui-monospace,monospace;
    font-size: 11px; letter-spacing:.2em; text-transform:uppercase;
    color: var(--invert-muted);
    padding-top: 24px;
    border-top:1px solid var(--invert-line);
  }

  /* ---------- Real media in tiles ---------- */
  .tile picture{position:absolute;inset:0;display:block;z-index:1}
  .tile img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
  .photo-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
  .tile img { opacity:0; transition: opacity 450ms ease; }
  .tile img.img-vis { opacity:1; }
  @keyframes skel-pulse { 0%,100%{opacity:.5} 50%{opacity:.82} }
  .tile.skel { animation: skel-pulse 1.4s ease-in-out infinite; pointer-events:none; }
  .tile.skel .overlay, .tile.skel .caption { opacity:0; }

  /* ---------- Reveal on scroll ---------- */
  .reveal{ opacity:0; transform: translateY(28px); transition: opacity 900ms cubic-bezier(.2,.7,.2,1), transform 900ms cubic-bezier(.2,.7,.2,1); }
  .reveal.in{ opacity:1; transform: none; }
  .reveal-stagger > *{ opacity:0; transform: translateY(20px); transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1); }
  .reveal-stagger.in > *{ opacity:1; transform: none; }
  .reveal-stagger.in > *:nth-child(1){ transition-delay: 60ms }
  .reveal-stagger.in > *:nth-child(2){ transition-delay: 160ms }
  .reveal-stagger.in > *:nth-child(3){ transition-delay: 260ms }
  .reveal-stagger.in > *:nth-child(4){ transition-delay: 360ms }

  /* ---------- Skip link ---------- */
  .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}
  .skip-link{position:fixed;top:-100%;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 20px;z-index:9999;font-size:14px;font-weight:500;border-radius:0 0 6px 6px;transition:top .15s}
  .skip-link:focus-visible{top:0;outline:2px solid var(--paper);outline-offset:-4px}

  /* ---------- Focus ---------- */
  :focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
  .topbar a:focus-visible,.topbar button:focus-visible{outline-color:rgba(255,255,255,.8)}

  /* ---------- Social float ---------- */
  .social-float{
    position:fixed; bottom:28px; right:28px; z-index:70;
    display:flex; flex-direction:column; gap:12px;
  }
  .social-float a{
    width:48px; height:48px;
    background: var(--ink); color: var(--paper);
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    box-shadow: 0 4px 18px rgba(0,0,0,.22);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
  }
  .social-float a:hover{
    transform: translateY(-3px);
    box-shadow: 0 8px 26px rgba(0,0,0,.32);
  }
  .social-float a svg{ width:22px; height:22px; fill:currentColor; display:block; }
  @media (max-width: 560px){
    .social-float{ bottom:20px; right:16px; }
  }

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion: reduce) {
    *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important}
    .marquee-track{animation:none}
    .reveal,.reveal-stagger{opacity:1;transform:none}
    .reveal-stagger>*{opacity:1;transform:none}
  }

  /* ---------- Pagine di servizio ---------- */
  .page-hero{
    background: var(--sand);
    padding-block: clamp(120px, 16vh, 190px) clamp(40px, 6vw, 72px);
    border-bottom: 1px solid var(--line-soft);
  }
  .crumbs{
    font-family:"DM Mono",ui-monospace,monospace;
    font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    color: var(--grey-500); display:flex; gap:10px; align-items:center; flex-wrap:wrap;
    margin-bottom: 24px;
  }
  .crumbs a{border-bottom:1px solid transparent; transition:border-color var(--t-fast)}
  .crumbs a:hover{border-color:currentColor}
  .crumbs span[aria-current]{color:var(--ink)}
  .page-hero h1{
    font-weight:900; font-size:clamp(38px, 6.4vw, 88px); line-height:.94;
    letter-spacing:-.038em; margin:0; max-width:18ch; text-wrap:balance;
  }
  .page-hero .standfirst{
    margin-top: clamp(20px, 3vw, 30px);
    font-size: clamp(17px, 1.5vw, 21px);
    line-height:1.5; color: var(--grey-700); max-width: 54ch;
  }
  .page-hero .quick{
    display:flex; gap:26px; flex-wrap:wrap; margin-top: clamp(26px, 4vw, 38px);
    padding-top: 22px; border-top:1px solid var(--line-strong);
  }
  .page-hero .quick div{display:flex; flex-direction:column; gap:4px}
  .page-hero .quick .k{
    font-family:"DM Mono",ui-monospace,monospace;
    font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--grey-500);
  }
  .page-hero .quick .v{font-size:15px; font-weight:500}

  /* album di apertura della pagina di servizio */
  .page-album{ background: var(--sand); padding-block: clamp(28px, 4vw, 52px) 0; }
  .page-album .gallery{ margin:0 }

  /* corpo su due colonne: titolo a sinistra, testo a destra */
  .page-body{ padding-block: clamp(48px, 6vw, 88px) clamp(72px, 10vw, 132px); }
  .prose-block{
    display:grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(18px, 3vw, 56px);
    padding-block: clamp(32px, 4vw, 52px);
    border-top: 1px solid var(--line-soft);
  }
  .prose-block:first-child{ border-top:0; padding-top:0 }
  .prose-head{ display:flex; flex-direction:column; gap:12px }
  .prose-head .num{
    font-family:"DM Mono",ui-monospace,monospace; font-size:11px;
    letter-spacing:.22em; color: var(--grey-300);
  }
  .prose-text > :first-child{ margin-top:0 }
  .prose-text > :last-child{ margin-bottom:0 }
  @media (min-width: 1000px){
    .prose-head{ position:sticky; top: 108px; align-self:start }
  }
  @media (max-width: 760px){
    .prose-block{ grid-template-columns: 1fr; gap:14px }
  }

  .prose{max-width: none}
  .prose h2, .faq .prose-head h2{
    font-weight:900; font-size:clamp(24px, 2.5vw, 34px); line-height:1.04;
    letter-spacing:-.03em; margin: 0; text-wrap:balance;
  }
  .prose h3{
    font-size:clamp(17px, 1.5vw, 20px); font-weight:700; letter-spacing:-.01em;
    margin: 30px 0 8px;
  }
  .prose p{
    font-size: clamp(16px, 1.15vw, 18px); line-height:1.68; color: var(--grey-700);
    margin: 0 0 1.05em; max-width: 68ch;
  }
  .prose strong{color: var(--ink); font-weight:700}
  .prose ul{list-style:none; padding:0; margin:22px 0; display:flex; flex-direction:column; gap:11px}
  .prose ul.cols{
    display:grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 11px clamp(24px, 3vw, 48px);
  }
  .prose ul li{
    position:relative; padding-left:24px; color: var(--grey-700);
    font-size: clamp(15px, 1.1vw, 17px); line-height:1.5;
  }
  .prose ul li::before{
    content:""; position:absolute; left:2px; top:.62em;
    width:8px; height:1px; background: var(--ink);
  }
  .prose ul li b{color:var(--ink)}

  .faq{
    display:grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(18px, 3vw, 56px);
    border-top:1px solid var(--line-strong); margin-top: clamp(44px, 6vw, 72px);
    padding-top: clamp(32px, 4vw, 52px);
  }
  @media (min-width: 1000px){
    .faq .prose-head{ position:sticky; top:108px; align-self:start }
  }
  @media (max-width: 760px){
    .faq{ grid-template-columns:1fr; gap:14px }
  }
  .faq details:first-child{border-top:1px solid var(--line-soft)}
  .faq details{border-bottom:1px solid var(--line-soft); padding: 20px 0}
  .faq summary{
    cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px;
    font-size: clamp(16px, 1.3vw, 19px); font-weight:700; letter-spacing:-.01em;
    color: var(--ink); align-items:baseline;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{
    content:"+"; font-family:"DM Mono",ui-monospace,monospace; font-size:18px;
    color: var(--grey-500); flex:none; transition: transform var(--t-fast);
  }
  .faq details[open] summary::after{content:"–"}
  .faq details p{
    margin: 12px 0 0; max-width:66ch; color: var(--grey-700);
    font-size: clamp(15px, 1.1vw, 17px); line-height:1.6;
  }

  .page-cta{
    background: var(--invert-bg); color: var(--invert-body);
    padding-block: clamp(64px, 9vw, 120px);
  }
  .page-cta h2{
    font-weight:900; font-size:clamp(30px, 4.6vw, 62px); line-height:.98;
    letter-spacing:-.035em; margin:0 0 18px; max-width:20ch; color: var(--invert-fg);
    text-wrap:balance;
  }
  .page-cta p{color: var(--invert-muted); max-width:52ch; font-size:16px; line-height:1.6; margin:0}
  .page-cta .actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px}
  .page-cta .btn{
    font-family:"DM Mono",ui-monospace,monospace;
    font-size:12px; letter-spacing:.18em; text-transform:uppercase;
    padding:15px 26px; border:1px solid var(--invert-line); color: var(--invert-fg);
    transition: background var(--t-fast), color var(--t-fast);
  }
  .page-cta .btn:hover{background: var(--invert-fg); color: var(--invert-bg)}
  .page-cta .btn.primary{background: var(--invert-fg); color: var(--invert-bg); border-color: var(--invert-fg)}
  .page-cta .btn.primary:hover{opacity:.85}

  .related{padding-block: clamp(48px, 6vw, 80px); border-top:1px solid var(--line-soft)}
  .related h2{
    font-family:"DM Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.22em;
    text-transform:uppercase; color: var(--grey-500); font-weight:400; margin:0 0 20px;
  }
  .related-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background: var(--line-soft)}
  .related-grid a{
    background: var(--sand); padding:22px 20px;
    display:flex; flex-direction:column; gap:6px;
    transition: background var(--t-fast);
  }
  .related-grid a:hover{background: var(--sand-deep)}
  .related-grid .t{font-weight:700; font-size:17px; letter-spacing:-.01em}
  .related-grid .d{font-size:14px; color: var(--grey-500); line-height:1.45}

  /* ---------- Servizi in home ---------- */
  .servizi{ background: var(--sand); border-top: 1px solid var(--line-soft); }
  .servizi-grid{
    display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap:1px; background: var(--line-strong);
    border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong);
  }
  .servizi-grid a{
    background: var(--sand); padding: clamp(24px,3vw,34px) clamp(20px,2.4vw,28px);
    display:flex; flex-direction:column; gap:10px; min-height: 230px;
    transition: background var(--t-fast);
  }
  .servizi-grid a:hover{ background: var(--sand-deep); }
  .servizi-grid .idx{
    font-family:"DM Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.2em;
    color: var(--grey-300);
  }
  .servizi-grid .t{
    font-weight:900; font-size: clamp(19px,1.7vw,24px); line-height:1.08;
    letter-spacing:-.025em; margin-top:4px; text-wrap:balance;
  }
  .servizi-grid .d{ font-size:14.5px; line-height:1.5; color: var(--grey-500); flex:1 }
  .servizi-grid .go{
    font-family:"DM Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.2em;
    text-transform:uppercase; color: var(--ink);
  }

  .footer-services{
    display:flex; flex-wrap:wrap; gap:10px 26px;
    padding-top: 22px; border-top:1px solid var(--invert-line);
    font-family:"DM Mono",ui-monospace,monospace;
    font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  }
  .footer-services a{ color: var(--invert-muted); transition: color var(--t-fast); }
  .footer-services a:hover{ color: var(--invert-fg); }

  /* ---------- Tabelle nelle pagine legali ---------- */
  .prose .tw{overflow-x:auto; margin:22px 0; border:1px solid var(--line-soft)}
  .prose table{border-collapse:collapse; width:100%; min-width:520px; font-size:14.5px}
  .prose th,.prose td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line-soft); vertical-align:top; color:var(--grey-700)}
  .prose th{
    font-family:"DM Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--grey-500); font-weight:500; background:var(--sand-deep);
  }
  .prose tr:last-child td{border-bottom:0}
  .prose a{border-bottom:1px solid var(--grey-300); transition:border-color var(--t-fast)}
  .prose a:hover{border-color:var(--ink)}
  .form-privacy{
    margin:14px 0 0; font-size:12.5px; line-height:1.5; color:var(--grey-500); max-width:52ch;
  }
  .form-privacy a{border-bottom:1px solid var(--grey-300)}

  /* ---------- Card servizi con fotografia ---------- */
  .servizi-grid a{ position:relative; overflow:hidden; isolation:isolate; }
  .servizi-grid .ph{
    position:absolute; inset:0; z-index:-2; background: var(--frame);
    display:block; overflow:hidden;
  }
  .servizi-grid .ph img{
    width:100%; height:100%; object-fit:cover; display:block;
    opacity:0; transition: opacity 600ms ease, transform var(--t-med);
  }
  .servizi-grid .ph img.img-vis{ opacity:.42 }
  .servizi-grid a::after{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background: linear-gradient(180deg, rgba(10,10,10,.30) 0%, rgba(10,10,10,.82) 100%);
    opacity:0; transition: opacity var(--t-med);
  }
  .servizi-grid a:has(.ph img.img-vis)::after{ opacity:1 }
  .servizi-grid a:has(.ph img.img-vis){ background: var(--frame); }
  .servizi-grid a:has(.ph img.img-vis) .t{ color:#f2f0ec }
  .servizi-grid a:has(.ph img.img-vis) .d{ color: rgba(242,240,236,.76) }
  .servizi-grid a:has(.ph img.img-vis) .idx{ color: rgba(242,240,236,.5) }
  .servizi-grid a:has(.ph img.img-vis) .go{ color:#f2f0ec }
  .servizi-grid a:hover .ph img.img-vis{ opacity:.58; transform: scale(1.04) }
  @media (prefers-reduced-motion: reduce){
    .servizi-grid .ph img{transition:none}
    .servizi-grid a:hover .ph img{transform:none}
  }

  /* ---------- Menu a tendina e menu mobile ---------- */
  .topbar.nav-open{
    mix-blend-mode: normal;
    background: var(--sand);
    color: var(--ink);
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-drop{position:relative}
  .nav-drop-btn{
    display:flex; align-items:center; gap:7px;
    font-family:"DM Mono",ui-monospace,monospace;
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    opacity:.85; transition:opacity var(--t-fast); padding:0;
  }
  .nav-drop-btn:hover,.nav-drop-btn[aria-expanded="true"]{opacity:1}
  .nav-drop-btn svg{
    width:9px; height:6px; fill:none; stroke:currentColor; stroke-width:1.6;
    stroke-linecap:round; stroke-linejoin:round;
    transition: transform var(--t-fast);
  }
  .nav-drop-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
  .nav-drop-panel[hidden],
  .mobile-nav[hidden]{display:none}
  .nav-drop-panel{
    position:absolute; top:calc(100% + 14px); left:-18px;
    min-width:250px; padding:8px 0;
    background: var(--sand); border:1px solid var(--line-strong);
    display:flex; flex-direction:column;
    box-shadow: 0 18px 40px -24px rgba(0,0,0,.5);
  }
  .nav-drop-panel a{
    padding:11px 20px; font-size:14px; font-weight:500; letter-spacing:-.01em;
    color: var(--ink); opacity:1; text-transform:none;
    transition: background var(--t-fast);
  }
  .nav-drop-panel a:hover{background: var(--sand-deep)}

  .nav-toggle{
    display:none; width:34px; height:34px; flex:none;
    border:1px solid currentColor;
    align-items:center; justify-content:center; flex-direction:column; gap:5px;
  }
  .nav-toggle .bar{
    display:block; width:15px; height:1px; background: currentColor;
    transition: transform var(--t-fast), opacity var(--t-fast);
  }
  .nav-toggle[aria-expanded="true"] .bar:first-child{transform: translateY(3px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .bar:last-child{transform: translateY(-3px) rotate(-45deg)}

  .mobile-nav{
    position:fixed; inset:0; z-index:55;
    background: var(--sand); color: var(--ink);
    padding: 92px clamp(var(--rail-min), var(--rail), var(--rail-max)) 40px;
    overflow-y:auto;
  }
  .mobile-nav-inner{display:flex; flex-direction:column; gap:2px; max-width:520px}
  .mobile-nav a{
    padding:14px 0; border-bottom:1px solid var(--line-soft);
    font-weight:700; font-size:clamp(20px,5.5vw,26px); letter-spacing:-.03em;
  }
  .mobile-nav .mobile-nav-label{
    margin-top:26px; padding-bottom:8px;
    font-family:"DM Mono",ui-monospace,monospace;
    font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--grey-500);
  }
  .mobile-nav .mobile-nav-label + a{border-top:1px solid var(--line-soft)}
  body.nav-locked{overflow:hidden}

  @media (max-width: 760px){
    .nav-toggle{display:flex}
  }
  @media (min-width: 761px){
    .mobile-nav{display:none}
  }