/* ===== Linee guida · identità visiva ===== */
.brand .top{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.brand .bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;height:64px}
.brand .bar .logo{display:block;color:var(--ink);width:148px;height:auto}
.brand .where{color:var(--muted);justify-self:center}
.brand header nav{display:flex;gap:24px}
.brand header nav a{font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.bhero{padding:72px 0 48px}
.bhero .lab{margin-bottom:24px}
.bhero .lead{max-width:34em;font-size:22px;line-height:32px;margin:32px 0 0}
.toc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--g);margin-top:56px;border-top:1px solid var(--ink)}
.toc a{display:flex;gap:12px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);font-weight:600;transition:padding .3s}
.toc a .mono{color:var(--muted);font-size:11px}
.toc a:hover{padding-left:8px}
@media(max-width:900px){.toc{grid-template-columns:repeat(2,minmax(0,1fr))}.brand .where{display:none}.brand .bar{grid-template-columns:auto 1fr}.brand header nav{justify-self:end}}

.bsec{padding:112px 0;border-top:1px solid var(--line)}
.bh{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px var(--g);margin-bottom:64px}
.bn{grid-column:1/3;display:flex;align-items:center;gap:10px;margin:0;color:var(--ink)}
.bn .sq{width:10px;height:10px}
.bh h2{grid-column:3/8;margin:0;font-size:56px;line-height:60px;font-weight:600;letter-spacing:.02em}
.blead{grid-column:8/13;margin:0;font-size:19px;line-height:28px;color:var(--ink)}
@media(max-width:900px){.bn,.bh h2,.blead{grid-column:1/-1}.bh h2{font-size:40px;line-height:44px}}
.sub{font-size:24px;line-height:30px;font-weight:600;letter-spacing:.02em;margin:72px 0 24px}
.note{color:var(--muted);margin:16px 0 0}
.bsec figure{margin:0}
.bsec figcaption{color:var(--muted);margin-top:12px}

/* 01 concetto */
.concept{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);align-items:end}
.cfi{grid-column:1/6;background:var(--ink);aspect-ratio:1;display:grid;place-items:center}
.cfi .fi{width:58%;max-height:none;height:auto}
.cfi .fi-f,.cfi .fi-i{fill:var(--paper)}
.ctext{grid-column:7/13;display:grid;gap:20px}
.ctext .big{font-size:clamp(28px,4.4vw,64px);line-height:1;font-weight:600;letter-spacing:.02em;margin:0 0 16px;white-space:nowrap}
.av svg{outline:1px solid var(--line);outline-offset:-1px}
.circ .av svg{outline:none}
.ctext p{margin:0;font-size:19px;line-height:28px}
.ctext .note{font-size:12px;line-height:16px}
.big .ii::after{background:linear-gradient(var(--yel),var(--yel)) .011em .016em/.122em .115em no-repeat,var(--paper)}
@media(max-width:900px){.cfi,.ctext{grid-column:1/-1}}

/* 02 logotipo */
.cfig{background:#fff;padding:clamp(16px,4vw,56px);border:1px solid var(--line)}
.constr{width:100%;height:auto;display:block;overflow:visible}
.constr .gl{stroke:#2B8CFF;stroke-width:1;stroke-dasharray:4 4}
.constr .cl{fill:none;stroke:var(--line);stroke-width:1}
.constr .bx{fill:none;stroke:#2B8CFF;stroke-width:1;opacity:.5}
.constr .xb{fill:rgba(255,196,0,.22)}
.constr .xt{font:600 16px var(--mono);fill:var(--ink);text-anchor:middle}
.constr .dm{stroke:var(--ink);stroke-width:1.2}
.constr .lt{font:600 11px var(--mono);letter-spacing:.1em;fill:#2B8CFF}
.lgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--g);margin-top:var(--g)}
.lbox{aspect-ratio:16/9;display:grid;place-items:center;position:relative;overflow:hidden;border:1px solid rgba(0,0,0,.04)}
.lbox .logo{width:62%;height:auto;display:block}
.specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);margin-top:40px;border-top:1px solid var(--ink)}
.specs>div{display:grid;gap:6px;padding:16px 0}
.specs .k{color:var(--muted)}.specs b{font-size:18px;line-height:24px;font-weight:600}
.donts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}
.donts .lbox .logo{width:78%}
.donts .x{position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - 1px),#E63312 calc(50% - 1px),#E63312 calc(50% + 1px),transparent calc(50% + 1px))}
.donts .fake{font-family:Georgia,serif;font-size:22px;margin:0}
@media(max-width:900px){.lgrid,.donts,.specs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 03 avatar */
.avrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}
.av svg{width:100%;height:auto;display:block}
.circ .av svg{border-radius:50%}
@media(max-width:900px){.avrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rules{list-style:none;padding:0;margin:56px 0 0;border-top:1px solid var(--ink)}
.rules li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);padding:16px 0;border-bottom:1px solid var(--line)}
.rules .n{grid-column:1/3;color:var(--muted);line-height:26px}
.rules p{grid-column:3/11;margin:0;font-size:17px;line-height:26px}
@media(max-width:700px){.rules .n{grid-column:1/3}.rules p{grid-column:3/-1}}

/* 04 colore */
.swgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}
.swc{display:grid;gap:6px;align-content:start}
.swc .sw{aspect-ratio:1;border:1px solid rgba(0,0,0,.06);margin-bottom:10px}
.swc b{font-size:20px;font-weight:600}
.swc .mono{color:var(--muted);text-transform:none;letter-spacing:.04em}
.swc .u{font-size:15px;margin-top:6px}
.prop{display:flex;height:96px;border:1px solid var(--line)}
.prop>div{display:flex;align-items:flex-end;padding:10px;min-width:0}
.prop .mono{font-size:11px}
.nscale{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.ns{aspect-ratio:1/1.1;padding:12px;display:flex;flex-direction:column;justify-content:space-between}
.ns b{font-weight:600}.ns .mono{text-transform:none;font-size:11px}
.ctgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.ct{padding:20px;display:grid;gap:4px;border:1px solid rgba(0,0,0,.06)}
.ct span{font-size:56px;line-height:1;font-weight:600}
.ct b{font-size:14px}.ct small{text-transform:none;letter-spacing:.04em;font-size:11px;opacity:.85}
@media(max-width:900px){.swgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.nscale{grid-template-columns:repeat(3,minmax(0,1fr))}.ctgrid{grid-template-columns:1fr 1fr}}

/* 05 tipografia */
.tspec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.tcard{background:#fff;padding:28px;border:1px solid var(--line);display:grid;gap:8px;align-content:start}
.tcard .k{color:var(--muted);margin:0}
.tA{font-size:160px;line-height:1;font-weight:600;margin:12px 0 0;letter-spacing:.02em}
.tA.r,.tname.r{font-weight:500}
.tA.m,.tname.m{font-family:var(--mono);font-weight:600}
.tname{font-size:22px;font-weight:600;margin:0}
.tcard p:last-child{margin:0;color:var(--muted)}
.tscale{margin-top:64px;border-top:1px solid var(--ink)}
.ts{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);padding:24px 0;border-bottom:1px solid var(--line);align-items:baseline}
.ts .k{grid-column:1/4;color:var(--muted)}
.ts p{grid-column:4/-1;margin:0}
.t1{font-size:clamp(64px,10vw,152px);line-height:.92;font-weight:600;letter-spacing:.02em}
.t2{font-size:44px;line-height:52px;font-weight:600;letter-spacing:.02em}
.t3{font-size:32px;line-height:42px;font-weight:600;letter-spacing:.02em}
.t4{font-size:17px;line-height:26px;max-width:36em}
.t5{display:flex;gap:8px;align-items:center}.t5 .sq{width:8px;height:8px}
@media(max-width:900px){.tspec{grid-template-columns:1fr}.ts .k,.ts p{grid-column:1/-1}.t2{font-size:30px;line-height:36px}.t3{font-size:24px;line-height:32px}}

/* 06 griglia */
.gridviz{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);height:200px;padding:0 var(--m);background:repeating-linear-gradient(to bottom,transparent 0 7px,rgba(21,21,21,.06) 7px 8px);border:1px solid var(--line)}
.gridviz span{background:rgba(255,196,0,.28);border-left:1px solid rgba(21,21,21,.25);border-right:1px solid rgba(21,21,21,.25)}

/* 07 linguaggio */
.lang{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}
.lg{display:grid;gap:10px;align-content:start}
.lg .demo{background:#fff;border:1px solid var(--line);height:160px;display:grid;place-items:center;padding:24px;position:relative}
.lg b{font-size:18px;font-weight:600}.lg p{margin:0;color:var(--muted)}
.lg .lab{display:flex;gap:8px;align-items:center}
.hsd{display:inline-grid;place-items:center;width:28px;height:28px;background:var(--yel);color:var(--ink);font:600 11px var(--mono)}
.lg .hr{width:100%;height:1px;background:var(--ink);align-self:end}
.lg .demo .mono{align-self:start;justify-self:start}
.hl{font-size:28px;font-weight:600;margin:0}.hl em{font-style:normal;background:linear-gradient(transparent 62%,var(--yel) 62%)}
@media(max-width:900px){.lang{grid-template-columns:1fr 1fr}}

/* 08 fotografia */
.photos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);align-items:end}
.photos .p1{grid-column:1/5}.photos .p2{grid-column:6/13}
.photos img{width:100%;height:auto;display:block}
.photos .tint{background:var(--tint);padding:clamp(20px,4vw,56px)}
@media(max-width:900px){.photos .p1,.photos .p2{grid-column:1/-1}}

/* 09 movimento */
.motion{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);align-items:center}
.mfi{grid-column:1/6;background:var(--paper);border:1px solid var(--line);aspect-ratio:1;display:grid;place-items:center}
.mfi .fi{width:52%;height:auto;max-height:none}
.mspec{grid-column:7/13;border-top:1px solid var(--ink)}
.mspec>div{display:grid;grid-template-columns:120px 1fr;gap:4px 16px;padding:16px 0;border-bottom:1px solid var(--line)}
.mspec .k{grid-row:1/3;color:var(--muted)}.mspec b{font-weight:600}.mspec p{margin:0;color:var(--muted)}
@media(max-width:900px){.mfi,.mspec{grid-column:1/-1}}
@media (prefers-reduced-motion:no-preference){
 .fi-m .fi-f,.fi-m .fi-i,.fi-m .fi-dot,.cfi .fi-f,.cfi .fi-i,.cfi .fi-dot{animation-play-state:paused}
 .mfi.in .fi-f,.mfi.in .fi-i,.mfi.in .fi-dot,.cfi.in .fi-f,.cfi.in .fi-i,.cfi.in .fi-dot{animation-play-state:running}
}

/* 10 tono */
.tone{display:grid;grid-template-columns:1fr 1fr;gap:var(--g)}
.tc{padding:28px;display:grid;gap:16px;align-content:start}
.tc.yes{background:var(--ink);color:var(--paper)}.tc.no{background:#fff;border:1px solid var(--line)}
.tc .k{margin:0;opacity:.7}
.tc .q{margin:0;font-size:26px;line-height:34px;font-weight:600;letter-spacing:.02em}
.tc.no .q{color:var(--muted);text-decoration:line-through;text-decoration-color:#E63312;text-decoration-thickness:2px}
@media(max-width:700px){.tone{grid-template-columns:1fr}}

/* 11 instagram */
.igwrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);align-items:start}
.igprof{grid-column:1/6;background:#fff;border:1px solid var(--line);padding:20px;font-size:14px;line-height:19px;max-width:440px}
.igtop{display:flex;gap:16px;align-items:center}
.igav svg{width:84px;height:84px;border-radius:50%;display:block}
.igtop b{font-size:16px}.igtop p{margin:2px 0 0;color:var(--muted)}
.igbio{margin:14px 0}.igbio p{margin:0}.igbio .lnk{color:#00376B;font-weight:600}
.ighl{display:flex;gap:14px;margin:16px 0 18px}
.hlc{display:grid;justify-items:center;gap:6px;font-size:12px}
.hlc .ring{width:60px;height:60px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;position:relative;outline:1px solid var(--line);outline-offset:3px}
.hlc .ring .mono{font-size:12px}
.hlc .ring i{position:absolute;width:7px;height:7px;background:var(--yel);right:16px;top:16px}
.iggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin:0 -20px -20px}
.ig{aspect-ratio:4/5;position:relative;overflow:hidden;background:var(--tint)}
.ig img{width:100%;height:100%;object-fit:cover;display:block}
.ig .tag{position:absolute;left:8px;bottom:8px;display:flex;gap:6px;align-items:center;background:var(--paper);padding:4px 6px;font-size:8px}
.ig .tag .sq{width:5px;height:5px}
.ig.q{background:var(--paper);display:flex;align-items:flex-end;padding:10px}
.ig.q p{margin:0;font-weight:600;font-size:13px;line-height:15px;letter-spacing:.02em}
.ig.q .sq{position:absolute;top:10px;left:10px;width:6px;height:6px}
.ig.q.y{background:var(--yel)}
.ig.avt{background:var(--ink)}.ig.avt svg{width:100%;height:100%;display:block}
.ig.ann .hsd{position:absolute;width:16px;height:16px;font-size:7px}
.igrules{grid-column:7/13}.igrules .rules{margin-top:0}
.igrules .rules .n{grid-column:1/3}.igrules .rules p{grid-column:3/-1}
@media(max-width:900px){.igprof,.igrules{grid-column:1/-1}}

/* 12 kit */
.kit{display:grid;gap:24px}
.kl{list-style:none;padding:0;margin:0;color:var(--muted);display:grid;gap:8px}
.bfoot{border-top:1px solid var(--line);padding:24px 0 40px}
.bfoot .wrap{display:flex;justify-content:space-between;color:var(--muted)}