/* ==========================================================================
   EXTARK — Design system v2 "tavola"
   Fondo bianco. Il blu del marchio è l'inchiostro: linee di quota, richiami,
   marchi di registro. Il sito si legge come una serie di tavole tecniche.
   ========================================================================== */

@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --paper:#FFFFFF;
  --panel:#F4F7FA;
  --tint:#EAF1FA;
  --ink:#0B1220;
  --ink-2:#28374B;
  --steel:#5D6E84;
  --blue:#386FB6;
  --blue-d:#2A5891;
  --rule:#D6DFEA;
  --rule-2:#B9C7D8;
  --signal:#E61B5C;

  --ff-display:'Space Grotesk','Arial Narrow',Arial,sans-serif;
  --ff-body:'Inter',Arial,Helvetica,sans-serif;
  --ff-mono:'JetBrains Mono','Courier New',monospace;

  --wrap:1280px;
  --gut:clamp(20px,4vw,56px);
  --step:clamp(72px,8.5vw,132px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--ff-display);font-weight:700;letter-spacing:-.028em;line-height:1.07}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
::selection{background:var(--blue);color:#fff}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--blue);color:#fff;padding:12px 20px}
.skip:focus{left:12px;top:12px}

/* --- Annotazione: la voce tecnica del sito ------------------------------- */
.an{font-family:var(--ff-mono);font-weight:500;font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--blue)}
.an--mute{color:var(--steel);font-weight:400}

/* --- Titoli -------------------------------------------------------------- */
.t-hero{font-size:clamp(42px,6.6vw,90px);letter-spacing:-.04em;line-height:1.02}
.t-1{font-size:clamp(30px,4.1vw,52px);letter-spacing:-.034em}
.t-2{font-size:clamp(22px,2.5vw,32px);letter-spacing:-.028em}
.t-3{font-size:clamp(18px,1.5vw,21px);letter-spacing:-.02em;line-height:1.28}
.lead{font-size:clamp(16.5px,1.25vw,19.5px);line-height:1.62;color:var(--ink-2)}
.muted{color:var(--steel)}

/* --- Linea di quota: il componente firma -------------------------------- */
/* Una misura presa su qualcosa. Estremi con i trattini, etichetta al centro. */
.dim{position:relative;height:1px;background:var(--blue);margin:0}
.dim::before,.dim::after{content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--blue)}
.dim::before{left:0}
.dim::after{right:0}
.dim__l{position:absolute;left:0;top:-9px;background:var(--paper);
  padding-right:12px;font-family:var(--ff-mono);font-weight:500;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);white-space:nowrap}

/* --- Marchi di registro agli angoli di sezione -------------------------- */
.reg{position:absolute;width:13px;height:13px;pointer-events:none}
.reg::before,.reg::after{content:"";position:absolute;background:var(--rule-2)}
.reg::before{left:0;top:6px;width:13px;height:1px}
.reg::after{left:6px;top:0;width:1px;height:13px}
.reg--tl{left:18px;top:24px}
.reg--tr{right:18px;top:24px}
@media (max-width:1100px){.reg{display:none}}

/* --- Header -------------------------------------------------------------- */
.hd{position:fixed;inset:0 0 auto 0;z-index:200;background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.hd.is-stuck{border-bottom-color:var(--rule);box-shadow:0 1px 24px rgba(11,18,32,.05)}
.hd__in{display:flex;align-items:center;gap:32px;height:74px}
.hd__logo img{height:23px;width:auto}
.nav{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav a{font-size:14.5px;font-weight:500;color:var(--ink-2);padding:6px 0;position:relative;transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--blue);transition:width .26s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.nav a[aria-current="page"]{color:var(--blue-d)}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.burger span{display:block;width:21px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:21px;height:1.5px;background:var(--ink);transition:transform .26s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.is-open .burger span{background:transparent}
.is-open .burger span::before{transform:translateY(6px) rotate(45deg)}
.is-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

/* --- Bottoni ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:11px;font-weight:600;font-size:14.5px;
  padding:13px 24px;border:1px solid transparent;transition:background .22s,color .22s,border-color .22s}
.btn svg{flex:none;transition:transform .28s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--primary{background:var(--blue);color:#fff}
.btn--primary:hover{background:var(--blue-d)}
.btn--line{border-color:var(--rule-2);color:var(--ink)}
.btn--line:hover{border-color:var(--blue);color:var(--blue-d);background:var(--tint)}
.btn--invert{background:#fff;color:var(--ink)}
.btn--invert:hover{background:var(--tint)}

/* --- Sezioni ------------------------------------------------------------- */
.sec{padding-block:var(--step);position:relative}
.sec-panel{background:var(--panel)}
.sec-panel .dim__l{background:var(--panel)}
.sec-ink{background:var(--ink);color:#E4EDF7}
.sec-ink h1,.sec-ink h2,.sec-ink h3{color:#fff}
.sec-ink .lead{color:#AEBED2}
.sec-ink .dim,.sec-ink .dim::before,.sec-ink .dim::after{background:#6E9CD8}
.sec-ink .dim__l{background:var(--ink);color:#6E9CD8}
.sec-ink .an{color:#6E9CD8}

/* intestazione di sezione: quota + titolo + testo a destra */
.sh{margin-bottom:clamp(38px,4.4vw,64px)}
.sh__dim{margin-bottom:30px}
.sh__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:clamp(24px,5vw,72px);align-items:end}
@media (max-width:880px){.sh__row{grid-template-columns:1fr;gap:20px;align-items:start}}

/* ==========================================================================
   HERO — il disegno dello stack
   ========================================================================== */
.hero{padding-top:clamp(152px,14vw,196px);padding-bottom:clamp(48px,6vw,76px);position:relative}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:center}
@media (max-width:1000px){.hero__grid{grid-template-columns:1fr;gap:52px}}
.hero h1{color:var(--ink)}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero__lead{margin-top:clamp(22px,2.4vw,32px);max-width:46ch}
.hero__act{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(28px,3vw,40px)}
.hero__meta{display:flex;gap:clamp(20px,3vw,40px);flex-wrap:wrap;margin-top:clamp(32px,3.6vw,46px);
  padding-top:20px;border-top:1px solid var(--rule)}
.hero__meta div{display:flex;flex-direction:column;gap:5px}
.hero__meta b{font-family:var(--ff-display);font-weight:700;font-size:19px;letter-spacing:-.02em}

/* --- Lo stack ------------------------------------------------------------ */
.stackdraw{position:relative;padding-left:74px}
@media (max-width:520px){.stackdraw{padding-left:54px}}
.layer{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:14px;
  height:46px;border-bottom:1px solid var(--rule);position:relative;transition:background .25s var(--ease)}
.layer:first-child{border-top:1px solid var(--rule)}
.layer:hover{background:var(--tint)}
.layer__i{font-family:var(--ff-mono);font-size:10px;color:var(--steel);letter-spacing:.06em}
.layer__n{font-size:14.5px;font-weight:500;color:var(--ink-2)}
.layer__t{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--steel)}
/* i confini dove i sistemi si rompono */
.layer--seam{border-bottom:1px solid var(--signal)}
.layer--seam::after{content:attr(data-seam);position:absolute;right:0;bottom:-7px;
  background:var(--paper);padding-left:9px;font-family:var(--ff-mono);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}
/* la quota che misura l'intero stack */
.stackdraw__dim{position:absolute;left:28px;top:0;bottom:0;width:1px;background:var(--blue);transform-origin:top}
.stackdraw__dim::before,.stackdraw__dim::after{content:"";position:absolute;left:-6px;width:13px;height:1px;background:var(--blue)}
.stackdraw__dim::before{top:0}.stackdraw__dim::after{bottom:0}
.stackdraw__lab{position:absolute;left:8px;top:50%;writing-mode:vertical-rl;
  transform:translateY(-50%) rotate(180deg);background:var(--paper);padding:12px 0;white-space:nowrap;
  font-family:var(--ff-mono);font-weight:500;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blue)}
.stackdraw__cap{margin-top:18px;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel);line-height:1.7}

/* --- Servizi come campate sullo stack ------------------------------------ */
.spans{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (max-width:900px){.spans{grid-template-columns:1fr}}
.span{background:var(--paper);padding:clamp(28px,3vw,42px) clamp(22px,2.2vw,34px) clamp(30px,3.2vw,46px);
  display:flex;flex-direction:column;position:relative;transition:background .28s var(--ease)}
.span:hover{background:var(--panel)}
.sec-panel .span{background:var(--panel)}
.sec-panel .span:hover{background:var(--paper)}
.span__range{display:flex;align-items:center;height:11px;margin-bottom:12px}
.span__lead{height:1px;background:var(--rule-2)}
.span__bar{height:3px;background:var(--blue);flex:none}
.span__rest{height:1px;background:var(--rule-2);flex:1}
.span__lv{margin-bottom:24px}
.span h3{margin-bottom:12px}
.span p{color:var(--ink-2);font-size:15.5px;line-height:1.6}
.span ul{margin-top:22px}
.span ul li{font-size:13.5px;color:var(--steel);padding:9px 0;border-top:1px solid var(--rule);display:flex;gap:10px}
.span ul li::before{content:"";width:9px;height:1px;background:var(--blue);margin-top:10px;flex:none}
.span__go{margin-top:auto;padding-top:28px;display:inline-flex;align-items:center;gap:9px;
  font-weight:600;font-size:14px;color:var(--blue-d)}
.span:hover .span__go svg{transform:translateX(4px)}
.span__go svg{transition:transform .28s var(--ease)}

/* --- Catena di quote: il metodo ------------------------------------------ */
.chain{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
@media (max-width:1000px){.chain{grid-template-columns:repeat(2,1fr);row-gap:38px}}
@media (max-width:560px){.chain{grid-template-columns:1fr}}
.link{padding-right:clamp(14px,1.6vw,24px);position:relative}
.link__dim{position:relative;height:1px;background:var(--rule-2);margin-bottom:22px}
.link__dim::before{content:"";position:absolute;left:0;top:-5px;width:1px;height:11px;background:var(--blue)}
.link:last-child .link__dim{background:var(--blue)}
.link:last-child .link__dim::after{content:"";position:absolute;right:0;top:-5px;width:1px;height:11px;background:var(--blue)}
.link__n{font-family:var(--ff-mono);font-weight:500;font-size:10.5px;letter-spacing:.18em;color:var(--blue);margin-bottom:12px}
.link h3{font-size:18.5px;margin-bottom:9px}
.link p{font-size:14.5px;color:var(--steel);line-height:1.58}
.sec-ink .link p{color:#93A6BE}
.sec-ink .link__dim{background:#39547A}

/* --- Indice tavole: progetti --------------------------------------------- */
.index{border-top:1px solid var(--ink)}
.index__hd,.row{display:grid;grid-template-columns:58px minmax(0,.32fr) minmax(0,1fr) auto;
  gap:clamp(14px,2.4vw,36px)}
.index__hd{padding:11px 0;border-bottom:1px solid var(--rule)}
.row{align-items:center;padding:clamp(20px,2.2vw,28px) 0;border-bottom:1px solid var(--rule);
  transition:background .24s var(--ease),padding-left .28s var(--ease)}
.row:hover{background:var(--tint);padding-left:14px}
.row__id{font-family:var(--ff-mono);font-size:11px;color:var(--blue);letter-spacing:.08em}
.row__c{font-family:var(--ff-display);font-weight:700;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.02em}
.row__s{display:block;margin-top:5px;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel)}
.row__d{color:var(--ink-2);font-size:15px;line-height:1.58}
.row__t{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.12em;color:var(--blue-d);
  border:1px solid var(--rule-2);padding:6px 11px;white-space:nowrap}
@media (max-width:900px){
  .index__hd{display:none}
  .row{grid-template-columns:1fr;gap:9px}
  .row__t{justify-self:start}
}

/* --- Elenco competenze ---------------------------------------------------- */
.kit{display:flex;flex-wrap:wrap;gap:8px}
.kit li{font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-2);
  border:1px solid var(--rule);padding:8px 13px;transition:border-color .2s,background .2s}
.kit li:hover{border-color:var(--blue);background:var(--tint)}

/* ==========================================================================
   PAGINE INTERNE
   ========================================================================== */
.ph{padding-top:clamp(158px,14vw,208px);padding-bottom:clamp(38px,4.6vw,60px);
  border-bottom:1px solid var(--rule);position:relative}
.crumbs{display:flex;gap:9px;align-items:center;margin-bottom:26px}
.crumbs a{color:var(--blue)}
.crumbs a:hover{text-decoration:underline}
.ph h1{max-width:18ch}
.ph .lead{margin-top:24px;max-width:56ch}
.ph__sheet{display:flex;gap:clamp(18px,3vw,44px);flex-wrap:wrap;margin-top:clamp(30px,3.4vw,44px);
  padding-top:18px;border-top:1px solid var(--rule)}
.ph__sheet div{display:flex;flex-direction:column;gap:4px}
.ph__sheet span:last-child{font-size:14.5px;font-weight:500;color:var(--ink)}

/* --- Due colonne ---------------------------------------------------------- */
.cols{display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,1fr);gap:clamp(26px,5vw,84px);align-items:start}
@media (max-width:900px){.cols{grid-template-columns:1fr;gap:26px}}
.cols__aside{position:sticky;top:112px}
@media (max-width:900px){.cols__aside{position:static}}

.prose > * + *{margin-top:22px}
.prose h2{font-size:clamp(22px,2.2vw,29px);margin-top:52px}
.prose p{color:var(--ink-2);font-size:16.5px;line-height:1.72}
.prose strong{color:var(--ink);font-weight:600}
.prose ul li{position:relative;padding:12px 0 12px 30px;border-top:1px solid var(--rule);
  color:var(--ink-2);font-size:16px}
.prose ul li::before{content:"";position:absolute;left:0;top:21px;width:16px;height:1px;background:var(--blue)}

.callout{position:relative;padding:4px 0 4px 26px;margin-top:38px;border-left:2px solid var(--blue)}
.callout p{font-family:var(--ff-display);font-weight:500;font-size:clamp(18px,1.8vw,24px);
  line-height:1.36;letter-spacing:-.02em;color:var(--ink)}
.sec-ink .callout p{color:#fff}

/* --- Schede --------------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.card{background:var(--paper);padding:clamp(24px,2.6vw,36px)}
.sec-panel .cards{background:var(--rule);border-color:var(--rule)}
.sec-panel .card{background:var(--panel)}
.sec-ink .cards{background:#25344A;border-color:#25344A}
.sec-ink .card{background:var(--ink)}
.card__k{display:block;margin-bottom:18px}
.card h3{font-size:19px;margin-bottom:11px}
.card p{font-size:15px;line-height:1.6;color:var(--ink-2)}
.sec-ink .card p{color:#A2B3C8}

/* --- Domande -------------------------------------------------------------- */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:22px 46px 22px 0;position:relative;
  font-family:var(--ff-display);font-weight:500;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:14px;height:1.5px;background:var(--blue);transform:translateY(-50%)}
.faq summary::before{content:"";position:absolute;right:10.25px;top:50%;width:1.5px;height:14px;background:var(--blue);
  transform:translateY(-50%);transition:opacity .2s}
.faq details[open] summary::before{opacity:0}
.faq details p{padding:0 0 24px;max-width:74ch;color:var(--ink-2);font-size:16px;line-height:1.7}

/* --- Note / blog ---------------------------------------------------------- */
.posts{border-top:1px solid var(--ink)}
.post{display:grid;grid-template-columns:148px minmax(0,1fr) auto;gap:clamp(16px,3vw,44px);
  align-items:baseline;padding:clamp(22px,2.4vw,30px) 0;border-bottom:1px solid var(--rule);
  transition:background .24s,padding-left .28s var(--ease)}
.post:hover{background:var(--tint);padding-left:14px}
.post h3{font-size:clamp(18px,1.6vw,22px);line-height:1.28;margin-bottom:8px}
.post p{font-size:15px;color:var(--steel);line-height:1.58;max-width:62ch}
.post__go{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.14em;color:var(--blue);white-space:nowrap}
@media (max-width:820px){.post{grid-template-columns:1fr;gap:8px}}

/* --- Modulo ---------------------------------------------------------------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:700px){.form{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field input,.field textarea,.field select{background:var(--paper);border:1px solid var(--rule-2);
  color:var(--ink);padding:13px 15px;font-family:var(--ff-body);font-size:15.5px;border-radius:0;
  transition:border-color .2s,background .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue);background:var(--tint)}
.field textarea{min-height:148px;resize:vertical}
.field small{color:var(--steel);font-size:12.5px}
.consent{grid-column:1/-1;display:flex;gap:11px;align-items:flex-start;color:var(--steel);font-size:13.5px}
.consent input{width:17px;height:17px;flex:none;margin-top:3px;accent-color:var(--blue)}

.contact-list li{padding:18px 0;border-top:1px solid var(--rule)}
.contact-list .an{display:block;margin-bottom:6px}
.contact-list a,.contact-list span.v{font-size:16.5px;font-weight:500;color:var(--ink)}
.contact-list a:hover{color:var(--blue-d)}

/* --- Chiusura ------------------------------------------------------------- */
.close{background:var(--ink);color:#fff;padding-block:clamp(64px,7vw,100px);position:relative}
.close__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(26px,5vw,60px);align-items:center;position:relative;z-index:2}
@media (max-width:860px){.close__in{grid-template-columns:1fr}}
.close h2{color:#fff;max-width:17ch}
.close p{color:#AEBED2;margin-top:14px;max-width:50ch}
.close__dim{position:absolute;left:var(--gut);right:var(--gut);top:30px;height:1px;background:#39547A}
.close__dim::before,.close__dim::after{content:"";position:absolute;top:-5px;width:1px;height:11px;background:#6E9CD8}
.close__dim::before{left:0}.close__dim::after{right:0}
.close__dim span{position:absolute;left:0;top:-21px;font-family:var(--ff-mono);font-weight:500;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:#6E9CD8}

/* --- Cartiglio (footer) ---------------------------------------------------- */
.ft{background:var(--paper);border-top:1px solid var(--ink);padding-top:clamp(44px,5vw,68px);padding-bottom:26px}
.ft__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(22px,4vw,52px)}
@media (max-width:900px){.ft__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ft__grid{grid-template-columns:1fr}}
.ft h4{margin-bottom:18px}
.ft li{margin-bottom:10px}
.ft a{font-size:15px;color:var(--ink-2);transition:color .2s}
.ft a:hover{color:var(--blue-d)}
.ft__logo{height:22px;width:auto;margin-bottom:20px}
/* il cartiglio: la tabella in fondo a una tavola */
.tblock{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule-2);
  margin-top:clamp(38px,4.4vw,60px)}
@media (max-width:700px){.tblock{grid-template-columns:repeat(2,1fr)}}
.tblock div{padding:12px 15px;border-right:1px solid var(--rule-2)}
.tblock div:last-child{border-right:0}
@media (max-width:700px){
  .tblock div:nth-child(2n){border-right:0}
  .tblock div:nth-child(-n+2){border-bottom:1px solid var(--rule-2)}
}
.tblock b{display:block;margin-top:5px;font-family:var(--ff-mono);font-size:11.5px;
  font-weight:500;letter-spacing:.06em;color:var(--ink)}
.ft__bot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:22px;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}

/* --- Rivelazioni ---------------------------------------------------------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.07s}.rv-d2{transition-delay:.14s}.rv-d3{transition-delay:.21s}.rv-d4{transition-delay:.28s}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* --- Menu mobile ---------------------------------------------------------- */
@media (max-width:1000px){
  .nav{position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);padding:4px var(--gut) 24px;
    transform:translateY(-10px);opacity:0;visibility:hidden;transition:.28s var(--ease)}
  .is-open .nav{transform:none;opacity:1;visibility:visible}
  .nav a{width:100%;padding:15px 0;border-bottom:1px solid var(--rule);font-size:17px}
  .burger{display:flex}
  .hd__cta{display:none}
}

/* --- Stack sui piccoli schermi -------------------------------------------- */
@media (max-width:640px){
  .layer{grid-template-columns:22px minmax(0,1fr);height:44px}
  .layer__t{display:none}
  .layer--seam::after{font-size:8px;letter-spacing:.08em}
  .stackdraw__lab{font-size:9.5px;letter-spacing:.16em}
  .hero__meta{gap:18px 26px}
}

/* ==========================================================================
   v3 — impianto caldo, guidato dalle prove
   Sezioni con etichetta centrata, dichiarazioni grandi, muro clienti.
   Il motivo del marchio (il taglio) torna come regola blu che attraversa.
   ========================================================================== */

.hd__logo img{height:30px}
.ft__logo{height:56px;width:auto}

/* --- Etichetta di sezione centrata --------------------------------------- */
.lab{text-align:center;margin-bottom:clamp(30px,3.4vw,46px)}
.lab__k{display:inline-flex;align-items:center;gap:14px;justify-content:center}
.lab__k::before,.lab__k::after{content:"";width:30px;height:2px;background:var(--blue)}
.lab h2{margin-top:20px;font-size:clamp(27px,3.4vw,44px);letter-spacing:-.03em}
.lab p{margin:20px auto 0;max-width:62ch;color:var(--ink-2);font-size:clamp(16px,1.2vw,18.5px);line-height:1.62}
.sec-ink .lab p{color:#AEBED2}

/* --- Hero v3 -------------------------------------------------------------- */
.h3{padding-top:clamp(152px,14vw,196px);padding-bottom:clamp(52px,6vw,84px)}
.h3__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);
  gap:clamp(32px,5vw,76px);align-items:center}
@media (max-width:1000px){.h3__grid{grid-template-columns:1fr;gap:44px}}
.h3 h1{font-size:clamp(38px,5.4vw,74px);letter-spacing:-.038em;line-height:1.04;margin-top:22px}
/* la seconda riga è l'affermazione: blu, con la barra sotto (mai attraverso) */
.h3 h1 span{position:relative;display:inline-block;color:var(--blue)}
.h3 h1 span::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:6px;background:var(--blue)}
.h3__lead{margin-top:26px;max-width:48ch}
.h3__act{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* --- Riquadro immagine (segnaposto finché non arrivano le foto) ---------- */
.shot{position:relative;background:var(--tint);border:1px solid var(--rule);overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.shot--wide{aspect-ratio:4/3}
.shot--sq{aspect-ratio:1/1}
.shot--band{aspect-ratio:16/7}
.shot span{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);opacity:.55}
.shot::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg,transparent 0 22px,rgba(56,111,182,.05) 22px 44px)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* --- Fascia ambiti (le "città" di Monk, qui i settori) ------------------- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--blue);
  border-bottom:1px solid var(--rule)}
@media (max-width:760px){.strip{grid-template-columns:repeat(2,1fr)}}
.strip div{padding:clamp(22px,2.4vw,32px) clamp(10px,1.4vw,20px);text-align:center;
  border-right:1px solid var(--rule)}
.strip div:last-child{border-right:0}
@media (max-width:760px){
  .strip div:nth-child(2n){border-right:0}
  .strip div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
}
.strip b{display:block;font-family:var(--ff-display);font-weight:700;
  font-size:clamp(17px,1.7vw,24px);letter-spacing:-.02em}
.strip span{display:block;margin-top:7px;font-family:var(--ff-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}

/* --- Cinque fasi con numeri grandi --------------------------------------- */
.five{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,30px)}
@media (max-width:1000px){.five{grid-template-columns:repeat(2,1fr);row-gap:36px}}
@media (max-width:560px){.five{grid-template-columns:1fr}}
.five p.five__n{font-family:var(--ff-display);font-weight:700;font-size:clamp(42px,4.6vw,66px);
  line-height:1;letter-spacing:-.05em;color:var(--blue);opacity:.62;margin-bottom:0}
.five__c{margin-top:14px;padding-top:16px;border-top:2px solid var(--blue)}
.five h3{font-size:19px;margin-bottom:9px}
.five p{font-size:14.5px;color:var(--steel);line-height:1.58}
.sec-ink .five p{color:#93A6BE}
.sec-ink .five p.five__n{color:#6E9CD8;opacity:.75}

/* --- DNA / valori --------------------------------------------------------- */
.dna{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,60px)}
@media (max-width:840px){.dna{grid-template-columns:1fr;gap:34px}}
.dna h3{font-family:var(--ff-mono);font-weight:500;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blue)}
.dna hr{border:0;border-top:1px solid var(--rule);margin:18px 0}
.dna p{font-family:var(--ff-display);font-weight:500;font-size:clamp(18px,1.7vw,23px);
  line-height:1.38;letter-spacing:-.02em;color:var(--ink)}
.dna small{display:block;margin-top:14px;font-family:var(--ff-body);font-size:15px;
  line-height:1.6;color:var(--steel);letter-spacing:0}

/* --- Blocchi di lavoro alternati ----------------------------------------- */
.work + .work{margin-top:clamp(48px,6vw,88px)}
.work{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4.4vw,72px);align-items:center}
@media (max-width:900px){.work{grid-template-columns:1fr;gap:26px}}
.work--flip .work__t{order:2}
@media (max-width:900px){.work--flip .work__t{order:0}}
.work h3{font-size:clamp(24px,2.7vw,36px);margin:16px 0 16px}
.work p{color:var(--ink-2);font-size:16.5px;line-height:1.68}
.work ul{margin-top:24px}
.work ul li{font-size:15px;color:var(--steel);padding:11px 0;border-top:1px solid var(--rule);
  display:flex;gap:12px}
.work ul li::before{content:"";width:12px;height:2px;background:var(--blue);margin-top:11px;flex:none}
.work .btn{margin-top:30px}

/* --- Dichiarazione grande -------------------------------------------------- */
.decl{background:var(--ink);color:#fff;padding-block:clamp(64px,7.5vw,116px)}
.decl h2{font-size:clamp(28px,4.4vw,60px);letter-spacing:-.035em;line-height:1.08;
  max-width:20ch;color:#fff}
.decl h2 em{font-style:normal;color:#6E9CD8}
.decl__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,48px);
  margin-top:clamp(38px,4.4vw,64px);padding-top:32px;border-top:1px solid #2A3A52}
@media (max-width:840px){.decl__cols{grid-template-columns:1fr;gap:24px}}
.decl__cols p{color:#AEBED2;font-size:16px;line-height:1.66}

/* --- Griglia tecnologie ---------------------------------------------------- */
.tech{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
@media (max-width:900px){.tech{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.tech{grid-template-columns:repeat(3,1fr)}}
.tech div{background:var(--paper);aspect-ratio:16/9;display:flex;align-items:center;
  justify-content:center;padding:10px;text-align:center;
  font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.05em;color:var(--ink-2);
  transition:background .22s,color .22s}
.tech div:hover{background:var(--tint);color:var(--blue-d)}
.sec-panel .tech div{background:var(--panel)}
.sec-panel .tech div:hover{background:var(--paper)}

/* --- Riquadro di richiamo -------------------------------------------------- */
.ctabox{background:var(--blue);color:#fff;padding:clamp(40px,5vw,72px) clamp(26px,4vw,64px);
  text-align:center;position:relative;overflow:hidden}
.ctabox h2{color:#fff;font-size:clamp(26px,3.4vw,44px);letter-spacing:-.03em;max-width:20ch;margin-inline:auto}
.ctabox p{color:rgba(255,255,255,.9);margin:18px auto 30px;max-width:52ch;font-size:17px;line-height:1.6}
.ctabox .btn--invert{background:#fff;color:var(--blue-d)}
.ctabox .btn--invert:hover{background:var(--ink);color:#fff}

/* --- Muro clienti ---------------------------------------------------------- */
.wall{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
@media (max-width:1000px){.wall{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.wall{grid-template-columns:repeat(2,1fr)}}
.wall div{background:var(--paper);aspect-ratio:5/3;display:flex;align-items:center;
  justify-content:center;padding:14px;text-align:center;
  font-family:var(--ff-display);font-weight:700;font-size:clamp(13px,1.15vw,16px);
  letter-spacing:-.01em;color:var(--steel);transition:color .22s,background .22s}
.wall div:hover{color:var(--ink);background:var(--tint)}

/* --- Numeri --------------------------------------------------------------- */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,40px)}
@media (max-width:760px){.figs{grid-template-columns:repeat(2,1fr);row-gap:30px}}
.figs b{display:block;font-family:var(--ff-display);font-weight:700;
  font-size:clamp(32px,3.8vw,52px);letter-spacing:-.04em;line-height:1}
.figs span{display:block;margin-top:10px;font-size:14.5px;color:var(--steel);line-height:1.45}

@media (max-width:520px){
  .hd__logo img{height:22px}
  .ft__logo{height:46px}
}

/* ==========================================================================
   Elementi propri di WordPress
   ========================================================================== */

/* --- Esito del modulo ----------------------------------------------------- */
.notice{padding:15px 18px;margin-bottom:28px;font-size:15.5px;border-left:3px solid var(--blue);
  background:var(--tint);color:var(--ink)}
.notice--ko{border-left-color:var(--signal);background:#FDECF1}

/* --- Ricerca -------------------------------------------------------------- */
.searchform{display:flex;gap:10px}
.searchform input{flex:1;background:var(--paper);border:1px solid var(--rule-2);color:var(--ink);
  padding:13px 15px;font-family:var(--ff-body);font-size:15.5px;border-radius:0}
.searchform input:focus{outline:none;border-color:var(--blue);background:var(--tint)}

/* --- Paginazione ---------------------------------------------------------- */
.pagination,.pager{margin-top:clamp(36px,4vw,56px);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pagination .page-numbers,.pager a,.pager .post-page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;
  border:1px solid var(--rule);font-family:var(--ff-mono);font-size:12px;color:var(--ink-2);
  transition:border-color .2s,background .2s,color .2s}
.pagination .page-numbers:hover,.pager a:hover{border-color:var(--blue);color:var(--blue-d);background:var(--tint)}
.pagination .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff}
.pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* --- Commenti ------------------------------------------------------------- */
.comments{max-width:74ch}
.comment-list{list-style:none;margin:0 0 40px;padding:0}
.comment-list li{padding:22px 0;border-top:1px solid var(--rule)}
.comment-list .children{list-style:none;margin:14px 0 0;padding-left:26px;border-left:2px solid var(--rule)}
.comment-meta{display:flex;gap:10px;align-items:center;margin-bottom:10px;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.comment-author img{border-radius:0}
.comment-content p{color:var(--ink-2);font-size:16px;line-height:1.68}
.comment-respond{padding-top:30px;border-top:1px solid var(--ink)}
.comment-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
@media (max-width:700px){.comment-form{grid-template-columns:1fr}}
.comment-form p{display:flex;flex-direction:column;gap:8px}
.comment-form p.comment-form-comment,.comment-form p.form-submit,
.comment-form p.comment-notes,.comment-form p.comment-form-cookies-consent{grid-column:1/-1}
.comment-form label{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue)}
.comment-form input[type=text],.comment-form input[type=email],
.comment-form input[type=url],.comment-form textarea{
  background:var(--paper);border:1px solid var(--rule-2);color:var(--ink);padding:13px 15px;
  font-family:var(--ff-body);font-size:15.5px;border-radius:0}
.comment-form textarea{min-height:150px;resize:vertical}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--blue);background:var(--tint)}
.comment-form-cookies-consent{flex-direction:row;align-items:flex-start;gap:11px}
.comment-form-cookies-consent label{font-family:var(--ff-body);font-size:13.5px;letter-spacing:0;
  text-transform:none;color:var(--steel)}

/* --- Contenuti dall'editor a blocchi -------------------------------------- */
.prose img,.prose figure{max-width:100%;height:auto}
.prose figure{margin:32px 0}
.prose figcaption{margin-top:10px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel)}
.prose blockquote{position:relative;padding:4px 0 4px 26px;margin:38px 0;border-left:2px solid var(--blue)}
.prose blockquote p{font-family:var(--ff-display);font-weight:500;font-size:clamp(18px,1.8vw,24px);
  line-height:1.36;letter-spacing:-.02em;color:var(--ink)}
.prose ol{padding-left:22px;color:var(--ink-2)}
.prose ol li{padding:7px 0}
.prose a:not(.btn){color:var(--blue-d);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.prose a:not(.btn):hover{background:var(--tint)}
.prose table{width:100%;border-collapse:collapse;margin:32px 0;font-size:15px}
.prose th,.prose td{padding:12px 14px;border:1px solid var(--rule);text-align:left}
.prose th{background:var(--panel);font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink)}
.prose code{font-family:var(--ff-mono);font-size:.9em;background:var(--tint);padding:2px 6px;color:var(--blue-d)}
.prose pre{background:var(--ink);color:#DDE7F4;padding:22px;overflow-x:auto;
  font-family:var(--ff-mono);font-size:13.5px;line-height:1.7}
.prose pre code{background:none;color:inherit;padding:0}
.prose hr{border:0;border-top:1px solid var(--rule);margin:44px 0}

/* --- Barra di amministrazione --------------------------------------------- */
.admin-bar .hd{top:32px}
@media (max-width:782px){.admin-bar .hd{top:46px}}
@media (max-width:1000px){.admin-bar .nav{top:calc(74px + 46px)}}

/* --- Il footer usa il lockup, più alto del logotipo ----------------------- */
.ft__logo{display:inline-block}
.ft__logo img{height:56px;width:auto}
@media (max-width:520px){.ft__logo img{height:46px}}

/* --- I menu di WordPress escono dentro una <ul> --------------------------- */
.nav__list{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav li{list-style:none}
.nav .current-menu-item > a,.nav .current_page_item > a{color:var(--blue-d)}
.nav .current-menu-item > a::after,.nav .current_page_item > a::after{width:100%}
@media (max-width:1000px){
  .nav__list{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .nav__list li{width:100%}
}
.ft ul{list-style:none;margin:0;padding:0}
.ft__bot ul{display:flex;gap:14px}
.ft__bot a{font-size:inherit;letter-spacing:inherit;color:var(--steel)}
.ft__bot a:hover{color:var(--blue-d)}

/* ==========================================================================
   MENU v2 — barra di servizio, indicatore scorrevole, pannello mobile
   ========================================================================== */

/* --- Barra di servizio sopra la navigazione ------------------------------ */
.ut{background:var(--ink);color:#AEBED2;overflow:hidden;
  max-height:40px;transition:max-height .34s var(--ease),opacity .24s}
.hd.is-stuck .ut{max-height:0;opacity:0}
.ut__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:40px}
.ut__pay{color:#6E9CD8;white-space:nowrap}
.ut__links{display:flex;align-items:center;gap:26px}
.ut__links a,.ut__links span{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#AEBED2;transition:color .2s;white-space:nowrap}
.ut__links a:hover{color:#fff}
.ut__links a::before{content:"";display:inline-block;width:5px;height:5px;background:var(--blue);
  margin-right:9px;vertical-align:2px}
@media (max-width:860px){.ut__pay{display:none}.ut__in{justify-content:flex-end}}
@media (max-width:600px){.ut__links{gap:16px}.ut__links .ut__loc{display:none}}

/* --- Barra principale ----------------------------------------------------- */
.hd__bar{background:rgba(255,255,255,.94);backdrop-filter:blur(12px)}
.hd{background:transparent;backdrop-filter:none}
.hd.is-stuck{background:transparent}

/* il logo si stacca dal menu con un filetto verticale */
/* filetto prima del pulsante, per staccarlo dalle voci */
.hd__cta{position:relative;padding-left:28px}
.hd__cta::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:24px;background:var(--rule)}

/* --- Voci: l'indicatore blu scorre da una all'altra ---------------------- */
.nav__list{position:relative}
.nav__ink{position:absolute;left:0;bottom:-9px;height:2px;width:0;background:var(--blue);
  opacity:0;pointer-events:none;
  transition:transform .32s var(--ease),width .32s var(--ease),opacity .2s}
.nav__list.has-ink a::after{display:none}
.nav a{letter-spacing:-.005em}

/* --- Pannello mobile ------------------------------------------------------ */
.navwrap{display:contents}
.navfoot{display:none}

@media (max-width:1000px){
  .burger{margin-left:auto}
  .navwrap{display:block;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-top:1px solid var(--rule);
    max-height:calc(100dvh - 116px);overflow-y:auto;
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:transform .3s var(--ease),opacity .3s var(--ease),visibility .3s;
    box-shadow:0 24px 48px rgba(11,18,32,.10)}
  .is-open .navwrap{transform:none;opacity:1;visibility:visible}

  /* la <nav> torna un blocco normale dentro il pannello */
  .nav{position:static;inset:auto;background:none;border:0;padding:0;
    transform:none;opacity:1;visibility:visible;display:block}
  .nav__list{counter-reset:voce;padding:8px var(--gut) 0}
  .nav__list li{counter-increment:voce;width:100%}
  .nav a{display:flex;align-items:baseline;gap:16px;width:100%;
    padding:17px 0;border-bottom:1px solid var(--rule);
    font-family:var(--ff-display);font-weight:500;font-size:21px;letter-spacing:-.02em;color:var(--ink)}
  .nav a::before{content:counter(voce,decimal-leading-zero);
    font-family:var(--ff-mono);font-weight:400;font-size:10.5px;letter-spacing:.16em;
    color:var(--blue);flex:none;width:22px}
  .nav a::after{display:none}
  .nav__list li:last-child a{border-bottom:0}

  .navfoot{display:block;padding:22px var(--gut) 30px;background:var(--panel);
    border-top:1px solid var(--rule)}
  .navfoot .btn{width:100%;justify-content:center;margin-bottom:20px}
  .navfoot ul{display:flex;flex-direction:column;gap:14px}
  .navfoot li{display:flex;flex-direction:column;gap:4px}
  .navfoot a,.navfoot span.v{font-size:16px;font-weight:500;color:var(--ink)}
  .navfoot a:hover{color:var(--blue-d)}
}

/* niente scorrimento dietro al pannello aperto */
body.nav-open{overflow:hidden}

/* ==========================================================================
   Pagine interne — testata con figura, fasce di sintesi
   ========================================================================== */

.ph__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(28px,4.5vw,72px);align-items:center}
@media (max-width:1000px){.ph__grid{grid-template-columns:1fr;gap:36px}}
.ph__fig{margin:0}
.ph .ph__sheet{margin-top:clamp(28px,3.2vw,42px)}

/* --- Fascia di dati sintetici -------------------------------------------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
@media (max-width:760px){.facts{grid-template-columns:repeat(2,1fr)}}
.facts div{background:var(--paper);padding:clamp(22px,2.4vw,32px) clamp(16px,1.8vw,26px)}
.sec-panel .facts div{background:var(--panel)}
.facts b{display:block;font-family:var(--ff-display);font-weight:700;
  font-size:clamp(28px,3.4vw,46px);letter-spacing:-.04em;line-height:1;color:var(--ink)}
.facts b em{font-style:normal;color:var(--blue)}
.facts span{display:block;margin-top:11px;font-size:14.5px;color:var(--steel);line-height:1.45}

/* --- Argomenti (elenco note) --------------------------------------------- */
.topics{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(30px,3.4vw,44px)}
.topics a{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--rule);padding:9px 15px;transition:.2s}
.topics a:hover,.topics a[aria-current]{border-color:var(--blue);background:var(--blue);color:#fff}

/* --- Blocco figura a piena larghezza ------------------------------------- */
.figband{margin:0;border:1px solid var(--rule);background:var(--paper)}
.sec-panel .figband{background:var(--paper)}
.figband img{width:100%;height:auto;display:block}
.figband figcaption{padding:14px 18px;border-top:1px solid var(--rule);
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--steel)}

/* ==========================================================================
   Rifiniture v4 — profondità, stati, ritmo
   ========================================================================== */

/* --- Barra di avanzamento della lettura ---------------------------------- */
.prog{position:fixed;left:0;top:0;height:2px;width:0;background:var(--blue);z-index:250;
  transition:width .1s linear}
.admin-bar .prog{top:32px}

/* --- Testata di pagina: fondo con velatura azzurra ----------------------- */
.ph{background:
  radial-gradient(60% 100% at 78% 40%, rgba(56,111,182,.10), transparent 70%),
  linear-gradient(180deg, var(--tint) 0%, var(--paper) 78%)}
.ph__act{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(26px,3vw,36px)}
.ph__fig{position:relative}
.ph__fig img{border:1px solid var(--rule);background:var(--paper)}

/* la home riceve la stessa velatura, più leggera */
.h3{background:
  radial-gradient(58% 100% at 80% 42%, rgba(56,111,182,.09), transparent 72%),
  linear-gradient(180deg, var(--tint) 0%, var(--paper) 70%)}

/* --- Pulsanti: rialzo appena percettibile -------------------------------- */
.btn{border-radius:2px}
.btn--primary{box-shadow:0 1px 0 rgba(11,18,32,.14)}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(56,111,182,.28)}
.btn--line:hover{transform:translateY(-1px)}
.btn--invert:hover{transform:translateY(-1px)}

/* --- Schede: bordo superiore blu al passaggio ---------------------------- */
.card{position:relative;transition:background .26s var(--ease)}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.card:hover::before{transform:scaleX(1)}
.card:hover{background:var(--paper)}
.sec-panel .card:hover{background:var(--paper)}
.sec-ink .card:hover{background:#111C2E}

/* --- Campate servizi: stessa attenzione ---------------------------------- */
.span{position:relative}
.span::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.span:hover::before{transform:scaleX(1)}

/* --- Fascia settori: reattiva --------------------------------------------- */
.strip div{transition:background .24s var(--ease)}
.strip div:hover{background:var(--tint)}

/* --- Blocchi di lavoro: la figura respira -------------------------------- */
.work .shot{border-color:var(--rule);box-shadow:0 18px 40px -28px rgba(11,18,32,.35)}

/* --- Note: freccia che scivola -------------------------------------------- */
.post__go{transition:transform .26s var(--ease);display:inline-block}
.post:hover .post__go{transform:translateX(4px)}

/* --- Indice progetti: numero in evidenza --------------------------------- */
.row__id{transition:color .2s}
.row:hover .row__id{color:var(--ink)}

/* --- Domande: apertura più morbida --------------------------------------- */
.faq summary{transition:color .2s}
.faq summary:hover{color:var(--blue-d)}
.faq details[open] summary{color:var(--blue-d)}

/* --- Chiusura: velatura in alto ------------------------------------------ */
.close{background:
  radial-gradient(70% 120% at 20% 0%, rgba(56,111,182,.24), transparent 62%),
  var(--ink)}

/* --- Footer più arioso senza il cartiglio -------------------------------- */
.ft__bot{margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--rule)}

/* --- Ritmo tipografico ---------------------------------------------------- */
.lab h2{max-width:24ch;margin-inline:auto}
.sh__row h2{text-wrap:balance}
.lab h2,.ph h1,.h3 h1{text-wrap:balance}

/* ==========================================================================
   Sezione «Contattaci» in fondo a ogni pagina
   ========================================================================== */
.close{padding-block:clamp(60px,7vw,104px)}
.close__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(34px,5vw,80px);align-items:start;position:relative;z-index:2}
@media (max-width:960px){.close__grid{grid-template-columns:1fr;gap:44px}}
.close__left h2{max-width:15ch}
.close__left .lead{margin-top:16px;max-width:46ch}
.close__list{margin-top:clamp(30px,3.4vw,44px);border-top:1px solid #2A3A52}
.close__list li{padding:16px 0;border-bottom:1px solid #2A3A52;
  display:flex;align-items:baseline;gap:18px}
.close__list .an{color:#6E9CD8;flex:0 0 74px}
.close__list a,.close__list .v{font-size:16.5px;font-weight:500;color:#fff}
.close__list a:hover{color:#8FB2DC}

/* il modulo su fondo scuro */
.close__form .field label{color:#6E9CD8}
.close__form .field input,.close__form .field textarea,.close__form .field select{
  background:#111C2E;border-color:#2A3A52;color:#fff}
.close__form .field input:focus,.close__form .field textarea:focus,.close__form .field select:focus{
  border-color:#6E9CD8;background:#16233A}
.close__form .field input::placeholder,.close__form .field textarea::placeholder{color:#5A6B80}
.close__form .field small{color:#8DA0B8}
.close__form .consent{color:#A2B3C8}
.close__form .consent a{color:#8FB2DC;text-decoration:underline}
.close__form .btn--primary{background:#fff;color:var(--ink)}
.close__form .btn--primary:hover{background:var(--tint);color:var(--blue-d)}
.close__form .notice{background:#16233A;border-left-color:#6E9CD8;color:#E4EDF7}
.close__form .notice--ko{background:#2A1622;border-left-color:var(--signal)}
.close__form .field textarea{min-height:120px}

/* ==========================================================================
   Elementi propri di WordPress
   ========================================================================== */

/* --- Esito del modulo ----------------------------------------------------- */
.notice{padding:15px 18px;margin-bottom:28px;font-size:15.5px;border-left:3px solid var(--blue);
  background:var(--tint);color:var(--ink)}
.notice--ko{border-left-color:var(--signal);background:#FDECF1}

/* --- Ricerca -------------------------------------------------------------- */
.searchform{display:flex;gap:10px}
.searchform input{flex:1;background:var(--paper);border:1px solid var(--rule-2);color:var(--ink);
  padding:13px 15px;font-family:var(--ff-body);font-size:15.5px;border-radius:0}
.searchform input:focus{outline:none;border-color:var(--blue);background:var(--tint)}

/* --- Paginazione ---------------------------------------------------------- */
.pagination,.pager{margin-top:clamp(36px,4vw,56px);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pagination .page-numbers,.pager a,.pager .post-page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;
  border:1px solid var(--rule);font-family:var(--ff-mono);font-size:12px;color:var(--ink-2);
  transition:border-color .2s,background .2s,color .2s}
.pagination .page-numbers:hover,.pager a:hover{border-color:var(--blue);color:var(--blue-d);background:var(--tint)}
.pagination .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff}
.pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* --- Commenti ------------------------------------------------------------- */
.comments{max-width:74ch}
.comment-list{list-style:none;margin:0 0 40px;padding:0}
.comment-list li{padding:22px 0;border-top:1px solid var(--rule)}
.comment-list .children{list-style:none;margin:14px 0 0;padding-left:26px;border-left:2px solid var(--rule)}
.comment-meta{display:flex;gap:10px;align-items:center;margin-bottom:10px;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.comment-author img{border-radius:0}
.comment-content p{color:var(--ink-2);font-size:16px;line-height:1.68}
.comment-respond{padding-top:30px;border-top:1px solid var(--ink)}
.comment-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
@media (max-width:700px){.comment-form{grid-template-columns:1fr}}
.comment-form p{display:flex;flex-direction:column;gap:8px}
.comment-form p.comment-form-comment,.comment-form p.form-submit,
.comment-form p.comment-notes,.comment-form p.comment-form-cookies-consent{grid-column:1/-1}
.comment-form label{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue)}
.comment-form input[type=text],.comment-form input[type=email],
.comment-form input[type=url],.comment-form textarea{
  background:var(--paper);border:1px solid var(--rule-2);color:var(--ink);padding:13px 15px;
  font-family:var(--ff-body);font-size:15.5px;border-radius:0}
.comment-form textarea{min-height:150px;resize:vertical}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--blue);background:var(--tint)}
.comment-form-cookies-consent{flex-direction:row;align-items:flex-start;gap:11px}
.comment-form-cookies-consent label{font-family:var(--ff-body);font-size:13.5px;letter-spacing:0;
  text-transform:none;color:var(--steel)}

/* --- Contenuti dall'editor a blocchi -------------------------------------- */
.prose img,.prose figure{max-width:100%;height:auto}
.prose figure{margin:32px 0}
.prose figcaption{margin-top:10px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel)}
.prose blockquote{position:relative;padding:4px 0 4px 26px;margin:38px 0;border-left:2px solid var(--blue)}
.prose blockquote p{font-family:var(--ff-display);font-weight:500;font-size:clamp(18px,1.8vw,24px);
  line-height:1.36;letter-spacing:-.02em;color:var(--ink)}
.prose ol{padding-left:22px;color:var(--ink-2)}
.prose ol li{padding:7px 0}
.prose a:not(.btn){color:var(--blue-d);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.prose a:not(.btn):hover{background:var(--tint)}
.prose table{width:100%;border-collapse:collapse;margin:32px 0;font-size:15px}
.prose th,.prose td{padding:12px 14px;border:1px solid var(--rule);text-align:left}
.prose th{background:var(--panel);font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink)}
.prose code{font-family:var(--ff-mono);font-size:.9em;background:var(--tint);padding:2px 6px;color:var(--blue-d)}
.prose pre{background:var(--ink);color:#DDE7F4;padding:22px;overflow-x:auto;
  font-family:var(--ff-mono);font-size:13.5px;line-height:1.7}
.prose pre code{background:none;color:inherit;padding:0}
.prose hr{border:0;border-top:1px solid var(--rule);margin:44px 0}

/* --- Barra di amministrazione --------------------------------------------- */
.admin-bar .hd{top:32px}
@media (max-width:782px){.admin-bar .hd{top:46px}}
@media (max-width:1000px){.admin-bar .nav{top:calc(74px + 46px)}}

/* --- Il footer usa il lockup, più alto del logotipo ----------------------- */
.ft__logo{display:inline-block}
.ft__logo img{height:56px;width:auto}
@media (max-width:520px){.ft__logo img{height:46px}}

/* --- I menu di WordPress escono dentro una <ul> --------------------------- */
.nav__list{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav li{list-style:none}
.nav .current-menu-item > a,.nav .current_page_item > a{color:var(--blue-d)}
.nav .current-menu-item > a::after,.nav .current_page_item > a::after{width:100%}
@media (max-width:1000px){
  .nav__list{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .nav__list li{width:100%}
}
.ft ul{list-style:none;margin:0;padding:0}
.ft__bot ul{display:flex;gap:14px}
.ft__bot a{font-size:inherit;letter-spacing:inherit;color:var(--steel)}
.ft__bot a:hover{color:var(--blue-d)}

/* ==========================================================================
   MENU v2 — barra di servizio, indicatore scorrevole, pannello mobile
   ========================================================================== */

/* --- Barra di servizio sopra la navigazione ------------------------------ */
.ut{background:var(--ink);color:#AEBED2;overflow:hidden;
  max-height:40px;transition:max-height .34s var(--ease),opacity .24s}
.hd.is-stuck .ut{max-height:0;opacity:0}
.ut__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:40px}
.ut__pay{color:#6E9CD8;white-space:nowrap}
.ut__links{display:flex;align-items:center;gap:26px}
.ut__links a,.ut__links span{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#AEBED2;transition:color .2s;white-space:nowrap}
.ut__links a:hover{color:#fff}
.ut__links a::before{content:"";display:inline-block;width:5px;height:5px;background:var(--blue);
  margin-right:9px;vertical-align:2px}
@media (max-width:860px){.ut__pay{display:none}.ut__in{justify-content:flex-end}}
@media (max-width:600px){.ut__links{gap:16px}.ut__links .ut__loc{display:none}}

/* --- Barra principale ----------------------------------------------------- */
.hd__bar{background:rgba(255,255,255,.94);backdrop-filter:blur(12px)}
.hd{background:transparent;backdrop-filter:none}
.hd.is-stuck{background:transparent}

/* il logo si stacca dal menu con un filetto verticale */
/* filetto prima del pulsante, per staccarlo dalle voci */
.hd__cta{position:relative;padding-left:28px}
.hd__cta::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:24px;background:var(--rule)}

/* --- Voci: l'indicatore blu scorre da una all'altra ---------------------- */
.nav__list{position:relative}
.nav__ink{position:absolute;left:0;bottom:-9px;height:2px;width:0;background:var(--blue);
  opacity:0;pointer-events:none;
  transition:transform .32s var(--ease),width .32s var(--ease),opacity .2s}
.nav__list.has-ink a::after{display:none}
.nav a{letter-spacing:-.005em}

/* --- Pannello mobile ------------------------------------------------------ */
.navwrap{display:contents}
.navfoot{display:none}

@media (max-width:1000px){
  .burger{margin-left:auto}
  .navwrap{display:block;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-top:1px solid var(--rule);
    max-height:calc(100dvh - 116px);overflow-y:auto;
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:transform .3s var(--ease),opacity .3s var(--ease),visibility .3s;
    box-shadow:0 24px 48px rgba(11,18,32,.10)}
  .is-open .navwrap{transform:none;opacity:1;visibility:visible}

  /* la <nav> torna un blocco normale dentro il pannello */
  .nav{position:static;inset:auto;background:none;border:0;padding:0;
    transform:none;opacity:1;visibility:visible;display:block}
  .nav__list{counter-reset:voce;padding:8px var(--gut) 0}
  .nav__list li{counter-increment:voce;width:100%}
  .nav a{display:flex;align-items:baseline;gap:16px;width:100%;
    padding:17px 0;border-bottom:1px solid var(--rule);
    font-family:var(--ff-display);font-weight:500;font-size:21px;letter-spacing:-.02em;color:var(--ink)}
  .nav a::before{content:counter(voce,decimal-leading-zero);
    font-family:var(--ff-mono);font-weight:400;font-size:10.5px;letter-spacing:.16em;
    color:var(--blue);flex:none;width:22px}
  .nav a::after{display:none}
  .nav__list li:last-child a{border-bottom:0}

  .navfoot{display:block;padding:22px var(--gut) 30px;background:var(--panel);
    border-top:1px solid var(--rule)}
  .navfoot .btn{width:100%;justify-content:center;margin-bottom:20px}
  .navfoot ul{display:flex;flex-direction:column;gap:14px}
  .navfoot li{display:flex;flex-direction:column;gap:4px}
  .navfoot a,.navfoot span.v{font-size:16px;font-weight:500;color:var(--ink)}
  .navfoot a:hover{color:var(--blue-d)}
}

/* niente scorrimento dietro al pannello aperto */
body.nav-open{overflow:hidden}

/* ==========================================================================
   Pagine interne — testata con figura, fasce di sintesi
   ========================================================================== */

.ph__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(28px,4.5vw,72px);align-items:center}
@media (max-width:1000px){.ph__grid{grid-template-columns:1fr;gap:36px}}
.ph__fig{margin:0}
.ph .ph__sheet{margin-top:clamp(28px,3.2vw,42px)}

/* --- Fascia di dati sintetici -------------------------------------------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
@media (max-width:760px){.facts{grid-template-columns:repeat(2,1fr)}}
.facts div{background:var(--paper);padding:clamp(22px,2.4vw,32px) clamp(16px,1.8vw,26px)}
.sec-panel .facts div{background:var(--panel)}
.facts b{display:block;font-family:var(--ff-display);font-weight:700;
  font-size:clamp(28px,3.4vw,46px);letter-spacing:-.04em;line-height:1;color:var(--ink)}
.facts b em{font-style:normal;color:var(--blue)}
.facts span{display:block;margin-top:11px;font-size:14.5px;color:var(--steel);line-height:1.45}

/* --- Argomenti (elenco note) --------------------------------------------- */
.topics{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(30px,3.4vw,44px)}
.topics a{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--rule);padding:9px 15px;transition:.2s}
.topics a:hover,.topics a[aria-current]{border-color:var(--blue);background:var(--blue);color:#fff}

/* --- Blocco figura a piena larghezza ------------------------------------- */
.figband{margin:0;border:1px solid var(--rule);background:var(--paper)}
.sec-panel .figband{background:var(--paper)}
.figband img{width:100%;height:auto;display:block}
.figband figcaption{padding:14px 18px;border-top:1px solid var(--rule);
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--steel)}

/* ==========================================================================
   Rifiniture v4 — profondità, stati, ritmo
   ========================================================================== */

/* --- Barra di avanzamento della lettura ---------------------------------- */
.prog{position:fixed;left:0;top:0;height:2px;width:0;background:var(--blue);z-index:250;
  transition:width .1s linear}
.admin-bar .prog{top:32px}

/* --- Testata di pagina: fondo con velatura azzurra ----------------------- */
.ph{background:
  radial-gradient(60% 100% at 78% 40%, rgba(56,111,182,.10), transparent 70%),
  linear-gradient(180deg, var(--tint) 0%, var(--paper) 78%)}
.ph__act{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(26px,3vw,36px)}
.ph__fig{position:relative}
.ph__fig img{border:1px solid var(--rule);background:var(--paper)}

/* la home riceve la stessa velatura, più leggera */
.h3{background:
  radial-gradient(58% 100% at 80% 42%, rgba(56,111,182,.09), transparent 72%),
  linear-gradient(180deg, var(--tint) 0%, var(--paper) 70%)}

/* --- Pulsanti: rialzo appena percettibile -------------------------------- */
.btn{border-radius:2px}
.btn--primary{box-shadow:0 1px 0 rgba(11,18,32,.14)}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(56,111,182,.28)}
.btn--line:hover{transform:translateY(-1px)}
.btn--invert:hover{transform:translateY(-1px)}

/* --- Schede: bordo superiore blu al passaggio ---------------------------- */
.card{position:relative;transition:background .26s var(--ease)}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.card:hover::before{transform:scaleX(1)}
.card:hover{background:var(--paper)}
.sec-panel .card:hover{background:var(--paper)}
.sec-ink .card:hover{background:#111C2E}

/* --- Campate servizi: stessa attenzione ---------------------------------- */
.span{position:relative}
.span::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.span:hover::before{transform:scaleX(1)}

/* --- Fascia settori: reattiva --------------------------------------------- */
.strip div{transition:background .24s var(--ease)}
.strip div:hover{background:var(--tint)}

/* --- Blocchi di lavoro: la figura respira -------------------------------- */
.work .shot{border-color:var(--rule);box-shadow:0 18px 40px -28px rgba(11,18,32,.35)}

/* --- Note: freccia che scivola -------------------------------------------- */
.post__go{transition:transform .26s var(--ease);display:inline-block}
.post:hover .post__go{transform:translateX(4px)}

/* --- Indice progetti: numero in evidenza --------------------------------- */
.row__id{transition:color .2s}
.row:hover .row__id{color:var(--ink)}

/* --- Domande: apertura più morbida --------------------------------------- */
.faq summary{transition:color .2s}
.faq summary:hover{color:var(--blue-d)}
.faq details[open] summary{color:var(--blue-d)}

/* --- Chiusura: velatura in alto ------------------------------------------ */
.close{background:
  radial-gradient(70% 120% at 20% 0%, rgba(56,111,182,.24), transparent 62%),
  var(--ink)}

/* --- Footer più arioso senza il cartiglio -------------------------------- */
.ft__bot{margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--rule)}

/* --- Ritmo tipografico ---------------------------------------------------- */
.lab h2{max-width:24ch;margin-inline:auto}
.sh__row h2{text-wrap:balance}
.lab h2,.ph h1,.h3 h1{text-wrap:balance}

/* ==========================================================================
   Elementi propri di WordPress
   ========================================================================== */

/* --- Esito del modulo ----------------------------------------------------- */
.notice{padding:15px 18px;margin-bottom:28px;font-size:15.5px;border-left:3px solid var(--blue);
  background:var(--tint);color:var(--ink)}
.notice--ko{border-left-color:var(--signal);background:#FDECF1}

/* --- Ricerca -------------------------------------------------------------- */
.searchform{display:flex;gap:10px}
.searchform input{flex:1;background:var(--paper);border:1px solid var(--rule-2);color:var(--ink);
  padding:13px 15px;font-family:var(--ff-body);font-size:15.5px;border-radius:0}
.searchform input:focus{outline:none;border-color:var(--blue);background:var(--tint)}

/* --- Paginazione ---------------------------------------------------------- */
.pagination,.pager{margin-top:clamp(36px,4vw,56px);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pagination .page-numbers,.pager a,.pager .post-page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;
  border:1px solid var(--rule);font-family:var(--ff-mono);font-size:12px;color:var(--ink-2);
  transition:border-color .2s,background .2s,color .2s}
.pagination .page-numbers:hover,.pager a:hover{border-color:var(--blue);color:var(--blue-d);background:var(--tint)}
.pagination .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff}
.pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* --- Commenti ------------------------------------------------------------- */
.comments{max-width:74ch}
.comment-list{list-style:none;margin:0 0 40px;padding:0}
.comment-list li{padding:22px 0;border-top:1px solid var(--rule)}
.comment-list .children{list-style:none;margin:14px 0 0;padding-left:26px;border-left:2px solid var(--rule)}
.comment-meta{display:flex;gap:10px;align-items:center;margin-bottom:10px;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.comment-author img{border-radius:0}
.comment-content p{color:var(--ink-2);font-size:16px;line-height:1.68}
.comment-respond{padding-top:30px;border-top:1px solid var(--ink)}
.comment-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
@media (max-width:700px){.comment-form{grid-template-columns:1fr}}
.comment-form p{display:flex;flex-direction:column;gap:8px}
.comment-form p.comment-form-comment,.comment-form p.form-submit,
.comment-form p.comment-notes,.comment-form p.comment-form-cookies-consent{grid-column:1/-1}
.comment-form label{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue)}
.comment-form input[type=text],.comment-form input[type=email],
.comment-form input[type=url],.comment-form textarea{
  background:var(--paper);border:1px solid var(--rule-2);color:var(--ink);padding:13px 15px;
  font-family:var(--ff-body);font-size:15.5px;border-radius:0}
.comment-form textarea{min-height:150px;resize:vertical}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--blue);background:var(--tint)}
.comment-form-cookies-consent{flex-direction:row;align-items:flex-start;gap:11px}
.comment-form-cookies-consent label{font-family:var(--ff-body);font-size:13.5px;letter-spacing:0;
  text-transform:none;color:var(--steel)}

/* --- Contenuti dall'editor a blocchi -------------------------------------- */
.prose img,.prose figure{max-width:100%;height:auto}
.prose figure{margin:32px 0}
.prose figcaption{margin-top:10px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel)}
.prose blockquote{position:relative;padding:4px 0 4px 26px;margin:38px 0;border-left:2px solid var(--blue)}
.prose blockquote p{font-family:var(--ff-display);font-weight:500;font-size:clamp(18px,1.8vw,24px);
  line-height:1.36;letter-spacing:-.02em;color:var(--ink)}
.prose ol{padding-left:22px;color:var(--ink-2)}
.prose ol li{padding:7px 0}
.prose a:not(.btn){color:var(--blue-d);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.prose a:not(.btn):hover{background:var(--tint)}
.prose table{width:100%;border-collapse:collapse;margin:32px 0;font-size:15px}
.prose th,.prose td{padding:12px 14px;border:1px solid var(--rule);text-align:left}
.prose th{background:var(--panel);font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink)}
.prose code{font-family:var(--ff-mono);font-size:.9em;background:var(--tint);padding:2px 6px;color:var(--blue-d)}
.prose pre{background:var(--ink);color:#DDE7F4;padding:22px;overflow-x:auto;
  font-family:var(--ff-mono);font-size:13.5px;line-height:1.7}
.prose pre code{background:none;color:inherit;padding:0}
.prose hr{border:0;border-top:1px solid var(--rule);margin:44px 0}

/* --- Barra di amministrazione --------------------------------------------- */
.admin-bar .hd{top:32px}
@media (max-width:782px){.admin-bar .hd{top:46px}}
@media (max-width:1000px){.admin-bar .nav{top:calc(74px + 46px)}}

/* --- Il footer usa il lockup, più alto del logotipo ----------------------- */
.ft__logo{display:inline-block}
.ft__logo img{height:56px;width:auto}
@media (max-width:520px){.ft__logo img{height:46px}}

/* --- I menu di WordPress escono dentro una <ul> --------------------------- */
.nav__list{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav li{list-style:none}
.nav .current-menu-item > a,.nav .current_page_item > a{color:var(--blue-d)}
.nav .current-menu-item > a::after,.nav .current_page_item > a::after{width:100%}
@media (max-width:1000px){
  .nav__list{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .nav__list li{width:100%}
}
.ft ul{list-style:none;margin:0;padding:0}
.ft__bot ul{display:flex;gap:14px}
.ft__bot a{font-size:inherit;letter-spacing:inherit;color:var(--steel)}
.ft__bot a:hover{color:var(--blue-d)}

/* ==========================================================================
   MENU v2 — barra di servizio, indicatore scorrevole, pannello mobile
   ========================================================================== */

/* --- Barra di servizio sopra la navigazione ------------------------------ */
.ut{background:var(--ink);color:#AEBED2;overflow:hidden;
  max-height:40px;transition:max-height .34s var(--ease),opacity .24s}
.hd.is-stuck .ut{max-height:0;opacity:0}
.ut__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:40px}
.ut__pay{color:#6E9CD8;white-space:nowrap}
.ut__links{display:flex;align-items:center;gap:26px}
.ut__links a,.ut__links span{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#AEBED2;transition:color .2s;white-space:nowrap}
.ut__links a:hover{color:#fff}
.ut__links a::before{content:"";display:inline-block;width:5px;height:5px;background:var(--blue);
  margin-right:9px;vertical-align:2px}
@media (max-width:860px){.ut__pay{display:none}.ut__in{justify-content:flex-end}}
@media (max-width:600px){.ut__links{gap:16px}.ut__links .ut__loc{display:none}}

/* --- Barra principale ----------------------------------------------------- */
.hd__bar{background:rgba(255,255,255,.94);backdrop-filter:blur(12px)}
.hd{background:transparent;backdrop-filter:none}
.hd.is-stuck{background:transparent}

/* il logo si stacca dal menu con un filetto verticale */
/* filetto prima del pulsante, per staccarlo dalle voci */
.hd__cta{position:relative;padding-left:28px}
.hd__cta::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:24px;background:var(--rule)}

/* --- Voci: l'indicatore blu scorre da una all'altra ---------------------- */
.nav__list{position:relative}
.nav__ink{position:absolute;left:0;bottom:-9px;height:2px;width:0;background:var(--blue);
  opacity:0;pointer-events:none;
  transition:transform .32s var(--ease),width .32s var(--ease),opacity .2s}
.nav__list.has-ink a::after{display:none}
.nav a{letter-spacing:-.005em}

/* --- Pannello mobile ------------------------------------------------------ */
.navwrap{display:contents}
.navfoot{display:none}

@media (max-width:1000px){
  .burger{margin-left:auto}
  .navwrap{display:block;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-top:1px solid var(--rule);
    max-height:calc(100dvh - 116px);overflow-y:auto;
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:transform .3s var(--ease),opacity .3s var(--ease),visibility .3s;
    box-shadow:0 24px 48px rgba(11,18,32,.10)}
  .is-open .navwrap{transform:none;opacity:1;visibility:visible}

  /* la <nav> torna un blocco normale dentro il pannello */
  .nav{position:static;inset:auto;background:none;border:0;padding:0;
    transform:none;opacity:1;visibility:visible;display:block}
  .nav__list{counter-reset:voce;padding:8px var(--gut) 0}
  .nav__list li{counter-increment:voce;width:100%}
  .nav a{display:flex;align-items:baseline;gap:16px;width:100%;
    padding:17px 0;border-bottom:1px solid var(--rule);
    font-family:var(--ff-display);font-weight:500;font-size:21px;letter-spacing:-.02em;color:var(--ink)}
  .nav a::before{content:counter(voce,decimal-leading-zero);
    font-family:var(--ff-mono);font-weight:400;font-size:10.5px;letter-spacing:.16em;
    color:var(--blue);flex:none;width:22px}
  .nav a::after{display:none}
  .nav__list li:last-child a{border-bottom:0}

  .navfoot{display:block;padding:22px var(--gut) 30px;background:var(--panel);
    border-top:1px solid var(--rule)}
  .navfoot .btn{width:100%;justify-content:center;margin-bottom:20px}
  .navfoot ul{display:flex;flex-direction:column;gap:14px}
  .navfoot li{display:flex;flex-direction:column;gap:4px}
  .navfoot a,.navfoot span.v{font-size:16px;font-weight:500;color:var(--ink)}
  .navfoot a:hover{color:var(--blue-d)}
}

/* niente scorrimento dietro al pannello aperto */
body.nav-open{overflow:hidden}

/* ==========================================================================
   Pagine interne — testata con figura, fasce di sintesi
   ========================================================================== */

.ph__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(28px,4.5vw,72px);align-items:center}
@media (max-width:1000px){.ph__grid{grid-template-columns:1fr;gap:36px}}
.ph__fig{margin:0}
.ph .ph__sheet{margin-top:clamp(28px,3.2vw,42px)}

/* --- Fascia di dati sintetici -------------------------------------------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
@media (max-width:760px){.facts{grid-template-columns:repeat(2,1fr)}}
.facts div{background:var(--paper);padding:clamp(22px,2.4vw,32px) clamp(16px,1.8vw,26px)}
.sec-panel .facts div{background:var(--panel)}
.facts b{display:block;font-family:var(--ff-display);font-weight:700;
  font-size:clamp(28px,3.4vw,46px);letter-spacing:-.04em;line-height:1;color:var(--ink)}
.facts b em{font-style:normal;color:var(--blue)}
.facts span{display:block;margin-top:11px;font-size:14.5px;color:var(--steel);line-height:1.45}

/* --- Argomenti (elenco note) --------------------------------------------- */
.topics{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(30px,3.4vw,44px)}
.topics a{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--rule);padding:9px 15px;transition:.2s}
.topics a:hover,.topics a[aria-current]{border-color:var(--blue);background:var(--blue);color:#fff}

/* --- Blocco figura a piena larghezza ------------------------------------- */
.figband{margin:0;border:1px solid var(--rule);background:var(--paper)}
.sec-panel .figband{background:var(--paper)}
.figband img{width:100%;height:auto;display:block}
.figband figcaption{padding:14px 18px;border-top:1px solid var(--rule);
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--steel)}

/* ==========================================================================
   Elementi propri di WordPress
   ========================================================================== */

/* --- Esito del modulo ----------------------------------------------------- */
.notice{padding:15px 18px;margin-bottom:28px;font-size:15.5px;border-left:3px solid var(--blue);
  background:var(--tint);color:var(--ink)}
.notice--ko{border-left-color:var(--signal);background:#FDECF1}

/* --- Ricerca -------------------------------------------------------------- */
.searchform{display:flex;gap:10px}
.searchform input{flex:1;background:var(--paper);border:1px solid var(--rule-2);color:var(--ink);
  padding:13px 15px;font-family:var(--ff-body);font-size:15.5px;border-radius:0}
.searchform input:focus{outline:none;border-color:var(--blue);background:var(--tint)}

/* --- Paginazione ---------------------------------------------------------- */
.pagination,.pager{margin-top:clamp(36px,4vw,56px);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pagination .page-numbers,.pager a,.pager .post-page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;
  border:1px solid var(--rule);font-family:var(--ff-mono);font-size:12px;color:var(--ink-2);
  transition:border-color .2s,background .2s,color .2s}
.pagination .page-numbers:hover,.pager a:hover{border-color:var(--blue);color:var(--blue-d);background:var(--tint)}
.pagination .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff}
.pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* --- Commenti ------------------------------------------------------------- */
.comments{max-width:74ch}
.comment-list{list-style:none;margin:0 0 40px;padding:0}
.comment-list li{padding:22px 0;border-top:1px solid var(--rule)}
.comment-list .children{list-style:none;margin:14px 0 0;padding-left:26px;border-left:2px solid var(--rule)}
.comment-meta{display:flex;gap:10px;align-items:center;margin-bottom:10px;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.comment-author img{border-radius:0}
.comment-content p{color:var(--ink-2);font-size:16px;line-height:1.68}
.comment-respond{padding-top:30px;border-top:1px solid var(--ink)}
.comment-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
@media (max-width:700px){.comment-form{grid-template-columns:1fr}}
.comment-form p{display:flex;flex-direction:column;gap:8px}
.comment-form p.comment-form-comment,.comment-form p.form-submit,
.comment-form p.comment-notes,.comment-form p.comment-form-cookies-consent{grid-column:1/-1}
.comment-form label{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue)}
.comment-form input[type=text],.comment-form input[type=email],
.comment-form input[type=url],.comment-form textarea{
  background:var(--paper);border:1px solid var(--rule-2);color:var(--ink);padding:13px 15px;
  font-family:var(--ff-body);font-size:15.5px;border-radius:0}
.comment-form textarea{min-height:150px;resize:vertical}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--blue);background:var(--tint)}
.comment-form-cookies-consent{flex-direction:row;align-items:flex-start;gap:11px}
.comment-form-cookies-consent label{font-family:var(--ff-body);font-size:13.5px;letter-spacing:0;
  text-transform:none;color:var(--steel)}

/* --- Contenuti dall'editor a blocchi -------------------------------------- */
.prose img,.prose figure{max-width:100%;height:auto}
.prose figure{margin:32px 0}
.prose figcaption{margin-top:10px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel)}
.prose blockquote{position:relative;padding:4px 0 4px 26px;margin:38px 0;border-left:2px solid var(--blue)}
.prose blockquote p{font-family:var(--ff-display);font-weight:500;font-size:clamp(18px,1.8vw,24px);
  line-height:1.36;letter-spacing:-.02em;color:var(--ink)}
.prose ol{padding-left:22px;color:var(--ink-2)}
.prose ol li{padding:7px 0}
.prose a:not(.btn){color:var(--blue-d);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.prose a:not(.btn):hover{background:var(--tint)}
.prose table{width:100%;border-collapse:collapse;margin:32px 0;font-size:15px}
.prose th,.prose td{padding:12px 14px;border:1px solid var(--rule);text-align:left}
.prose th{background:var(--panel);font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink)}
.prose code{font-family:var(--ff-mono);font-size:.9em;background:var(--tint);padding:2px 6px;color:var(--blue-d)}
.prose pre{background:var(--ink);color:#DDE7F4;padding:22px;overflow-x:auto;
  font-family:var(--ff-mono);font-size:13.5px;line-height:1.7}
.prose pre code{background:none;color:inherit;padding:0}
.prose hr{border:0;border-top:1px solid var(--rule);margin:44px 0}

/* --- Barra di amministrazione --------------------------------------------- */
.admin-bar .hd{top:32px}
@media (max-width:782px){.admin-bar .hd{top:46px}}
@media (max-width:1000px){.admin-bar .nav{top:calc(74px + 46px)}}

/* --- Il footer usa il lockup, più alto del logotipo ----------------------- */
.ft__logo{display:inline-block}
.ft__logo img{height:56px;width:auto}
@media (max-width:520px){.ft__logo img{height:46px}}

/* --- I menu di WordPress escono dentro una <ul> --------------------------- */
.nav__list{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav li{list-style:none}
.nav .current-menu-item > a,.nav .current_page_item > a{color:var(--blue-d)}
.nav .current-menu-item > a::after,.nav .current_page_item > a::after{width:100%}
@media (max-width:1000px){
  .nav__list{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .nav__list li{width:100%}
}
.ft ul{list-style:none;margin:0;padding:0}
.ft__bot ul{display:flex;gap:14px}
.ft__bot a{font-size:inherit;letter-spacing:inherit;color:var(--steel)}
.ft__bot a:hover{color:var(--blue-d)}

/* ==========================================================================
   MENU v2 — barra di servizio, indicatore scorrevole, pannello mobile
   ========================================================================== */

/* --- Barra di servizio sopra la navigazione ------------------------------ */
.ut{background:var(--ink);color:#AEBED2;overflow:hidden;
  max-height:40px;transition:max-height .34s var(--ease),opacity .24s}
.hd.is-stuck .ut{max-height:0;opacity:0}
.ut__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:40px}
.ut__pay{color:#6E9CD8;white-space:nowrap}
.ut__links{display:flex;align-items:center;gap:26px}
.ut__links a,.ut__links span{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#AEBED2;transition:color .2s;white-space:nowrap}
.ut__links a:hover{color:#fff}
.ut__links a::before{content:"";display:inline-block;width:5px;height:5px;background:var(--blue);
  margin-right:9px;vertical-align:2px}
@media (max-width:860px){.ut__pay{display:none}.ut__in{justify-content:flex-end}}
@media (max-width:600px){.ut__links{gap:16px}.ut__links .ut__loc{display:none}}

/* --- Barra principale ----------------------------------------------------- */
.hd__bar{background:rgba(255,255,255,.94);backdrop-filter:blur(12px)}
.hd{background:transparent;backdrop-filter:none}
.hd.is-stuck{background:transparent}

/* il logo si stacca dal menu con un filetto verticale */
/* filetto prima del pulsante, per staccarlo dalle voci */
.hd__cta{position:relative;padding-left:28px}
.hd__cta::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:24px;background:var(--rule)}

/* --- Voci: l'indicatore blu scorre da una all'altra ---------------------- */
.nav__list{position:relative}
.nav__ink{position:absolute;left:0;bottom:-9px;height:2px;width:0;background:var(--blue);
  opacity:0;pointer-events:none;
  transition:transform .32s var(--ease),width .32s var(--ease),opacity .2s}
.nav__list.has-ink a::after{display:none}
.nav a{letter-spacing:-.005em}

/* --- Pannello mobile ------------------------------------------------------ */
.navwrap{display:contents}
.navfoot{display:none}

@media (max-width:1000px){
  .burger{margin-left:auto}
  .navwrap{display:block;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-top:1px solid var(--rule);
    max-height:calc(100dvh - 116px);overflow-y:auto;
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:transform .3s var(--ease),opacity .3s var(--ease),visibility .3s;
    box-shadow:0 24px 48px rgba(11,18,32,.10)}
  .is-open .navwrap{transform:none;opacity:1;visibility:visible}

  /* la <nav> torna un blocco normale dentro il pannello */
  .nav{position:static;inset:auto;background:none;border:0;padding:0;
    transform:none;opacity:1;visibility:visible;display:block}
  .nav__list{counter-reset:voce;padding:8px var(--gut) 0}
  .nav__list li{counter-increment:voce;width:100%}
  .nav a{display:flex;align-items:baseline;gap:16px;width:100%;
    padding:17px 0;border-bottom:1px solid var(--rule);
    font-family:var(--ff-display);font-weight:500;font-size:21px;letter-spacing:-.02em;color:var(--ink)}
  .nav a::before{content:counter(voce,decimal-leading-zero);
    font-family:var(--ff-mono);font-weight:400;font-size:10.5px;letter-spacing:.16em;
    color:var(--blue);flex:none;width:22px}
  .nav a::after{display:none}
  .nav__list li:last-child a{border-bottom:0}

  .navfoot{display:block;padding:22px var(--gut) 30px;background:var(--panel);
    border-top:1px solid var(--rule)}
  .navfoot .btn{width:100%;justify-content:center;margin-bottom:20px}
  .navfoot ul{display:flex;flex-direction:column;gap:14px}
  .navfoot li{display:flex;flex-direction:column;gap:4px}
  .navfoot a,.navfoot span.v{font-size:16px;font-weight:500;color:var(--ink)}
  .navfoot a:hover{color:var(--blue-d)}
}

/* niente scorrimento dietro al pannello aperto */
body.nav-open{overflow:hidden}

/* ==========================================================================
   Elementi propri di WordPress
   ========================================================================== */

/* --- Esito del modulo ----------------------------------------------------- */
.notice{padding:15px 18px;margin-bottom:28px;font-size:15.5px;border-left:3px solid var(--blue);
  background:var(--tint);color:var(--ink)}
.notice--ko{border-left-color:var(--signal);background:#FDECF1}

/* --- Ricerca -------------------------------------------------------------- */
.searchform{display:flex;gap:10px}
.searchform input{flex:1;background:var(--paper);border:1px solid var(--rule-2);color:var(--ink);
  padding:13px 15px;font-family:var(--ff-body);font-size:15.5px;border-radius:0}
.searchform input:focus{outline:none;border-color:var(--blue);background:var(--tint)}

/* --- Paginazione ---------------------------------------------------------- */
.pagination,.pager{margin-top:clamp(36px,4vw,56px);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pagination .page-numbers,.pager a,.pager .post-page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;
  border:1px solid var(--rule);font-family:var(--ff-mono);font-size:12px;color:var(--ink-2);
  transition:border-color .2s,background .2s,color .2s}
.pagination .page-numbers:hover,.pager a:hover{border-color:var(--blue);color:var(--blue-d);background:var(--tint)}
.pagination .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff}
.pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* --- Commenti ------------------------------------------------------------- */
.comments{max-width:74ch}
.comment-list{list-style:none;margin:0 0 40px;padding:0}
.comment-list li{padding:22px 0;border-top:1px solid var(--rule)}
.comment-list .children{list-style:none;margin:14px 0 0;padding-left:26px;border-left:2px solid var(--rule)}
.comment-meta{display:flex;gap:10px;align-items:center;margin-bottom:10px;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.comment-author img{border-radius:0}
.comment-content p{color:var(--ink-2);font-size:16px;line-height:1.68}
.comment-respond{padding-top:30px;border-top:1px solid var(--ink)}
.comment-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
@media (max-width:700px){.comment-form{grid-template-columns:1fr}}
.comment-form p{display:flex;flex-direction:column;gap:8px}
.comment-form p.comment-form-comment,.comment-form p.form-submit,
.comment-form p.comment-notes,.comment-form p.comment-form-cookies-consent{grid-column:1/-1}
.comment-form label{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue)}
.comment-form input[type=text],.comment-form input[type=email],
.comment-form input[type=url],.comment-form textarea{
  background:var(--paper);border:1px solid var(--rule-2);color:var(--ink);padding:13px 15px;
  font-family:var(--ff-body);font-size:15.5px;border-radius:0}
.comment-form textarea{min-height:150px;resize:vertical}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--blue);background:var(--tint)}
.comment-form-cookies-consent{flex-direction:row;align-items:flex-start;gap:11px}
.comment-form-cookies-consent label{font-family:var(--ff-body);font-size:13.5px;letter-spacing:0;
  text-transform:none;color:var(--steel)}

/* --- Contenuti dall'editor a blocchi -------------------------------------- */
.prose img,.prose figure{max-width:100%;height:auto}
.prose figure{margin:32px 0}
.prose figcaption{margin-top:10px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel)}
.prose blockquote{position:relative;padding:4px 0 4px 26px;margin:38px 0;border-left:2px solid var(--blue)}
.prose blockquote p{font-family:var(--ff-display);font-weight:500;font-size:clamp(18px,1.8vw,24px);
  line-height:1.36;letter-spacing:-.02em;color:var(--ink)}
.prose ol{padding-left:22px;color:var(--ink-2)}
.prose ol li{padding:7px 0}
.prose a:not(.btn){color:var(--blue-d);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.prose a:not(.btn):hover{background:var(--tint)}
.prose table{width:100%;border-collapse:collapse;margin:32px 0;font-size:15px}
.prose th,.prose td{padding:12px 14px;border:1px solid var(--rule);text-align:left}
.prose th{background:var(--panel);font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink)}
.prose code{font-family:var(--ff-mono);font-size:.9em;background:var(--tint);padding:2px 6px;color:var(--blue-d)}
.prose pre{background:var(--ink);color:#DDE7F4;padding:22px;overflow-x:auto;
  font-family:var(--ff-mono);font-size:13.5px;line-height:1.7}
.prose pre code{background:none;color:inherit;padding:0}
.prose hr{border:0;border-top:1px solid var(--rule);margin:44px 0}

/* --- I menu di WordPress escono dentro una <ul> --------------------------- */
.nav li{list-style:none}
.nav .current-menu-item > a,.nav .current_page_item > a{color:var(--blue-d)}
.ft ul{list-style:none;margin:0;padding:0}
.ft__bot ul{display:flex;gap:14px}
.ft__bot a{font-size:inherit;letter-spacing:inherit;color:var(--steel)}
.ft__bot a:hover{color:var(--blue-d)}

/* --- Barra di amministrazione --------------------------------------------- */
.admin-bar .hd{top:32px}
@media (max-width:782px){.admin-bar .hd{top:46px}}

/* --- Il footer usa il lockup, più alto del logotipo ----------------------- */
.ft__logo{display:inline-block}
.ft__logo img{height:56px;width:auto}
@media (max-width:520px){.ft__logo img{height:46px}}