/* Layout: una colonna editoriale larga 60rem. Hero in forma di risultato di ricerca, timeline verticale, case study come card che si aprono a tutta larghezza. */
:root{
  --bg:#f2f5f9; --surface:#ffffff; --ink:#142038; --muted:#55607a; --line:#d5dce8;
  --link:#1a4fc4; --onlink:#ffffff; --url:#1b7a43; --chip:#e6ecf7; --agent:#e3ebfa; --human:#e1f2e7;
  --display:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif; --body:"Instrument Sans",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#0e1524; --surface:#16203a; --ink:#e8edf8; --muted:#9aa6c2; --line:#2a3656; --link:#8fb2ff; --onlink:#0e1524; --url:#6fd09a; --chip:#1f2c4a; --agent:#1c2d52; --human:#173a2a; color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#0e1524; --surface:#16203a; --ink:#e8edf8; --muted:#9aa6c2; --line:#2a3656; --link:#8fb2ff; --onlink:#0e1524; --url:#6fd09a; --chip:#1f2c4a; --agent:#1c2d52; --human:#173a2a; color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--body)}
h1,h2,h3,h4{font-family:var(--display);line-height:1.15;margin:0;text-wrap:balance}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:4px}
.wrap{max-width:60rem;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
section{padding-block:3.25rem;border-top:1px solid var(--line)}
h2{font-size:1.75rem;margin-bottom:1.5rem}
p{margin:0 0 1rem;max-width:68ch}
.muted{color:var(--muted)}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:1rem;flex-wrap:wrap}
.topbar nav{display:flex;gap:1.25rem;flex-wrap:wrap;font-size:.95rem}
.topbar nav a{color:var(--muted);text-decoration:none}
.topbar nav a:hover{color:var(--ink);text-decoration:underline}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:.2rem;background:var(--surface)}
.seg button{font:inherit;font-size:.9rem;font-weight:500;border:0;background:none;color:var(--muted);padding:.35rem .9rem;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}

.hero{padding-block:2.5rem 3.5rem;border:0}
.name{font-size:clamp(2.4rem,7vw,4.2rem);font-weight:700;letter-spacing:-.02em;margin-bottom:.5rem}
.tagline{font-size:1.2rem;color:var(--muted);margin-bottom:2rem;max-width:44rem}
.bar{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.7rem 1.25rem;display:flex;align-items:center;gap:.75rem;max-width:34rem;margin-bottom:1rem}
.bar svg{flex:none;color:var(--muted)}
.qwrap{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pz{flex:none;width:2rem;height:2rem;border-radius:50%;border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;display:inline-grid;place-items:center;padding:0}
.pz:hover{color:var(--ink);border-color:var(--muted)}
.serp .t{min-height:2.7em}
.cursor{display:inline-block;width:2px;height:1.1em;background:var(--ink);vertical-align:-.15em;margin-left:1px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.serp{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.5rem;max-width:44rem}
.serp .u{color:var(--url);font-size:.92rem;margin:0 0 .15rem}
.serp .t{font:500 1.35rem/1.3 var(--display);color:var(--link);margin:0 0 .4rem}
.serp .d{margin:0 0 1.1rem;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:.6rem}
.btn{display:inline-block;font:600 1rem/1 var(--body);text-decoration:none;padding:.8rem 1.2rem;border-radius:8px;border:1px solid var(--link)}
.btn.pri{background:var(--link);color:var(--onlink)}
.btn.sec{background:none;color:var(--link)}
.path{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:.25rem;background:var(--surface);margin-top:2rem;flex-wrap:wrap}
.path button{font:inherit;font-size:.95rem;font-weight:500;border:0;background:none;color:var(--muted);padding:.5rem 1.1rem;border-radius:999px;cursor:pointer}
.path button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}

.about{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2rem 3rem;align-items:start}
.about p{max-width:none}
.nums{display:grid;gap:1rem;margin:0}
.nums div{border-left:3px solid var(--link);padding-left:.9rem}
.nums dt{font:700 2rem/1.1 var(--display)}
.nums dd{margin:.2rem 0 0;color:var(--muted);font-size:.95rem}
.numcta{margin-top:1.6rem}

.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:calc(9.3rem - 2px);top:.9rem;bottom:.9rem;width:4px;border-radius:2px;background:var(--line)}
.tl li{display:grid;grid-template-columns:8.2rem 2.2rem minmax(0,1fr);align-items:start;padding-block:.9rem}
.yr{justify-self:end;font:700 .95rem/1 var(--display);color:var(--link);background:var(--chip);border-radius:7px;padding:.4rem .6rem;white-space:nowrap}
.dot{justify-self:center;width:1.05rem;height:1.05rem;border-radius:50%;background:var(--link);border:3px solid var(--bg);box-sizing:content-box;margin-top:.05rem;position:relative}
.dot.par{background:var(--bg);border:3px solid var(--link);width:.7rem;height:.7rem}
.tl h3{font-size:1.15rem;margin-bottom:.2rem}
.tl h3 em{font:italic 400 .9rem var(--body);color:var(--muted);margin-left:.5rem}
.where{display:flex;flex-wrap:wrap;gap:.2rem 1.6rem;color:var(--muted);font-size:.93rem;margin-bottom:.25rem}
.where span{display:inline-flex;align-items:center;gap:.35rem}
.where svg{color:var(--link);flex:none}
.tl p{margin:0;font-size:.98rem}
@media (max-width:40rem){
  .tl::before{left:.55rem}
  .tl li{grid-template-columns:1.2rem minmax(0,1fr);column-gap:1rem}
  .tl .yr{grid-column:2;grid-row:1;justify-self:start;margin-bottom:.4rem}
  .tl .dot{grid-column:1;grid-row:1}
  .tl .txt{grid-column:2}
}

.intro{color:var(--muted);margin-bottom:1.6rem}
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr));gap:1.25rem}
.case{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.4rem;display:flex;flex-direction:column;gap:.8rem;min-width:0;scroll-margin-top:1rem}
.case.soon{border-style:dashed;background:none}
.case.soon .csub{margin:0}
.tag.sn{background:none;border:1px solid var(--line);color:var(--muted)}
.case.open{grid-column:1/-1;order:-1;padding:2rem}
.tag{align-self:flex-start;font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:var(--chip);color:var(--ink);border-radius:6px;padding:.15rem .55rem}
.tag.cl{background:var(--human)}
.case h3{font-size:1.2rem}
.case.open h3{font-size:1.6rem}
.csub{margin:0;font-size:.97rem;color:var(--muted)}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:0}
.kpis div{border-left:3px solid var(--link);padding-left:.7rem}
.kpis dt{font:700 1.45rem/1.1 var(--display)}
.kpis dd{margin:.15rem 0 0;font-size:.85rem;color:var(--muted);line-height:1.35}
.more{margin-top:auto;align-self:flex-start;font:600 .97rem var(--body);color:var(--link);background:none;border:1px solid var(--line);border-radius:8px;padding:.6rem .95rem;cursor:pointer;display:inline-flex;gap:.4rem;align-items:center}
.more:hover{border-color:var(--link)}
.more svg{transition:transform .2s}
.open .more svg{transform:rotate(180deg)}
.cbody{border-top:1px solid var(--line);padding-top:1.2rem;margin-top:.4rem}
.cbody h4{font-size:1.15rem;margin:1.7rem 0 .5rem}
.cbody h4:first-child{margin-top:0}
.cbody ul{padding-left:1.15rem;max-width:68ch;margin:0 0 1rem}
.cbody li{margin-bottom:.5rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr));gap:1rem;margin:1rem 0 1.5rem}
.stats div{border-left:3px solid var(--link);padding-left:.8rem}
.stats dt{font:700 1.7rem/1.1 var(--display)}
.stats dd{margin:.2rem 0 0;color:var(--muted);font-size:.93rem}
.fig{margin:1.2rem 0 1.5rem}
.fig img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:10px;background:#fff}
.fig.small img{max-width:24rem}
.fig figcaption{font-size:.9rem;color:var(--muted);margin-top:.5rem;max-width:68ch}
.src{font-size:.88rem;color:var(--muted);margin:1.2rem 0 0}
.note{border-left:3px solid var(--line);padding-left:.8rem;color:var(--muted);max-width:68ch}
.dg h5{font:600 .85rem var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:1.4rem 0 .6rem}
.dg .row{display:flex;flex-wrap:wrap;gap:1.4rem 1.8rem}
.dg .bx{flex:1 1 13rem;min-width:0;background:var(--agent);border-radius:10px;padding:.7rem .9rem;position:relative;font-size:.93rem}
.dg .bx.h{background:var(--human)}
.dg .bx b{display:block;margin-bottom:.15rem}
.dg .bx span{color:var(--muted)}
.dg .row .bx:not(:last-child)::after{content:"\2192";position:absolute;right:-1.4rem;top:50%;transform:translateY(-50%);color:var(--muted)}
.dg .cap{font-size:.9rem;color:var(--muted);margin:0 0 .4rem}
@media (max-width:40rem){.dg .row .bx:not(:last-child)::after{content:"\2193";right:auto;left:50%;top:auto;bottom:-1.45rem;transform:translateX(-50%)}}
.tblwrap{overflow-x:auto;margin:1rem 0}
table.tbl{width:100%;border-collapse:collapse;font-size:.95rem;min-width:30rem}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:.55rem .7rem;border-bottom:1px solid var(--line)}
.tbl th{color:var(--muted);font-weight:600}

.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1.6rem 2.5rem}
.cols h3{font-size:1rem;margin-bottom:.5rem}
.cols p{margin:0 0 .6rem}
.pubs{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.contact p{margin-bottom:.5rem}
.copy{font:500 .88rem var(--body);color:var(--link);background:none;border:1px solid var(--line);border-radius:6px;padding:.15rem .6rem;margin-left:.5rem;cursor:pointer}
footer{padding-block:2rem 3rem;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
@media (max-width:48rem){.about{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.cursor{animation:none}html{scroll-behavior:auto}.more svg{transition:none}}

/* produzione */
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--bg);padding:.6rem 1rem;z-index:20;border-radius:0 0 8px 0}
.skip:focus{left:0}
.seg a{font-size:.9rem;font-weight:500;color:var(--muted);padding:.35rem .9rem;border-radius:999px;text-decoration:none}
.seg a[aria-current="true"]{background:var(--ink);color:var(--bg)}
.path,.pz,.more{display:none}
.js .path{display:inline-flex}.js .pz{display:inline-grid}.js .more{display:inline-flex}
a.more{display:inline-flex;text-decoration:none}
html:not(.js) .case{grid-column:1/-1}
.js .case:not(.open) .cbody{display:none}
.copy{display:none}.js .copy{display:inline-block}