/* ============================================================
   Brand Board - template condiviso (Brand Evolution)
   I colori/font arrivano dalle variabili :root definite in ogni pagina.
   ============================================================ */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-wrap:pretty;
  background-image:
    radial-gradient(circle at 15% 12%, color-mix(in srgb, var(--sec) 7%, transparent), transparent 42%),
    radial-gradient(circle at 85% 88%, color-mix(in srgb, var(--acc) 6%, transparent), transparent 42%);
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.4; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.wrap{max-width:1080px; margin:0 auto; padding:0 clamp(20px,5vw,56px); position:relative; z-index:2;}
section{padding:clamp(46px,7vw,86px) 0; border-bottom:1px solid var(--line);}

/* marchio (SVG <use href="#mk">) */
.mk{fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round;}

.kick{font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.34em; text-transform:uppercase; color:var(--acc); margin-bottom:20px; display:flex; align-items:center; gap:10px;}
.kick::before{content:""; width:26px; height:1px; background:var(--acc);}
h2.sec{font-family:var(--serif); font-weight:900; font-size:clamp(26px,3.6vw,42px); letter-spacing:-.025em; line-height:1; margin-bottom:14px;}
.sub{color:var(--ink-soft); max-width:56ch; font-size:15px;}

/* COVER */
.cover{min-height:88vh; display:flex; flex-direction:column; justify-content:center; border-bottom:1px solid var(--line); position:relative;}
.cover .meta{position:absolute; top:34px; left:0; right:0; display:flex; justify-content:space-between; font-size:11px; letter-spacing:.28em; text-transform:uppercase; font-weight:700; color:var(--ink-soft);}
.lock{display:flex; align-items:center; gap:26px; flex-wrap:wrap;}
.badge{width:118px; height:118px; border-radius:50%; background:var(--ink); display:grid; place-items:center; flex:none; box-shadow:0 24px 60px color-mix(in srgb, var(--ink) 22%, transparent);}
.badge svg{width:60px; height:60px; color:var(--paper); stroke-width:1.2;}
.cover .nm{font-family:var(--serif); font-weight:900; font-size:clamp(48px,9vw,104px); letter-spacing:-.045em; line-height:.9;}
.cover .tl{display:block; font-family:var(--sans); font-weight:700; font-size:clamp(11px,1.4vw,14px); letter-spacing:.44em; text-transform:uppercase; color:var(--soft); margin-top:16px; padding-left:4px;}
.posit{margin-top:clamp(38px,6vw,64px); max-width:44ch; font-family:var(--serif); font-weight:400; font-style:italic; font-size:clamp(19px,2.4vw,27px); line-height:1.32; letter-spacing:-.01em;}
.posit b{font-style:normal; font-weight:600;}

/* LOGO SYSTEM */
.logogrid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-top:34px;}
.cell{border:1px solid var(--line); border-radius:16px; padding:26px; display:flex; flex-direction:column; gap:16px; min-height:190px; justify-content:space-between; overflow:hidden; position:relative;}
.cell .tag{font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; font-weight:700; color:var(--ink-soft);}
.c-primary{grid-column:span 7; background:var(--paper2);}
.c-mono{grid-column:span 5; background:var(--ink); color:var(--paper);}
.c-mono .tag{color:color-mix(in srgb, var(--paper) 60%, transparent);}
.c-stack{grid-column:span 4;}
.c-rev{grid-column:span 4; background:var(--acc); color:var(--paper);}
.c-rev .tag{color:color-mix(in srgb, var(--paper) 72%, transparent);}
.c-fav{grid-column:span 4; background:var(--sec); color:var(--paper); align-items:center; justify-content:center; text-align:center;}
.c-fav .tag{color:color-mix(in srgb, var(--paper) 72%, transparent);}
@media(max-width:720px){ .c-primary,.c-mono,.c-stack,.c-rev,.c-fav{grid-column:span 12;} }
.lk{display:flex; align-items:center; gap:16px;}
.lk .b2{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; flex:none;}
.lk .b2 svg{width:30px; height:30px; stroke-width:1.3;}
.lk .w2{font-family:var(--serif); font-weight:900; font-size:30px; letter-spacing:-.03em; line-height:.95;}
.lk .w2 span{display:block; font-family:var(--sans); font-weight:700; font-size:8.5px; letter-spacing:.34em; text-transform:uppercase; margin-top:6px;}
.stacklk{display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; margin:auto 0;}
.stacklk .b3{width:52px; height:52px; border-radius:50%; background:var(--ink); display:grid; place-items:center;}
.stacklk .b3 svg{width:28px; height:28px; color:var(--paper); stroke-width:1.4;}
.stacklk .w3{font-family:var(--serif); font-weight:900; font-size:24px; letter-spacing:-.03em;}
.stacklk .w3 span{display:block; font-family:var(--sans); font-weight:700; font-size:8px; letter-spacing:.3em; text-transform:uppercase; color:var(--soft); margin-top:5px;}
.favrow{display:flex; align-items:center; gap:14px; margin:auto 0;}
.favdot{border-radius:50%; background:var(--ink); display:grid; place-items:center; color:var(--paper);}
.favdot svg{stroke-width:1.6;}
.favdot.f24{width:24px; height:24px;} .favdot.f24 svg{width:14px;height:14px; stroke-width:1.9;}
.favdot.f16{width:16px; height:16px;} .favdot.f16 svg{width:10px;height:10px; stroke-width:2.1;}
.favdot.f48{width:48px; height:48px;} .favdot.f48 svg{width:26px;height:26px;}

/* COLOR */
.swgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:34px;}
@media(max-width:760px){ .swgrid{grid-template-columns:repeat(2,1fr);} }
.swc{border-radius:14px; overflow:hidden; border:1px solid var(--line);}
.swc .chip{height:132px;}
.swc .body{padding:14px 15px 17px;}
.swc .role{font-weight:700; font-size:13.5px;}
.swc .hex{font-size:11.5px; letter-spacing:.06em; color:var(--ink-soft); margin-top:3px; text-transform:uppercase;}
.swc .job{font-size:11.5px; color:var(--ink-soft); margin-top:9px; line-height:1.4;}

/* TYPE */
.typewrap{display:grid; grid-template-columns:1fr 1fr; gap:44px; margin-top:34px; align-items:start;}
@media(max-width:760px){ .typewrap{grid-template-columns:1fr; gap:34px;} }
.tname{font-family:var(--serif); font-weight:900; font-size:64px; letter-spacing:-.03em; line-height:.9;}
.tname.s{font-family:var(--sans); font-weight:700; font-size:52px;}
.tmeta{font-size:12.5px; color:var(--ink-soft); margin:12px 0 22px; font-weight:600;}
.scale > div{border-top:1px solid var(--line); padding:11px 0; display:flex; align-items:baseline; gap:16px;}
.scale .px{font-size:11px; color:var(--soft); font-weight:700; width:52px; flex:none;}
.specimen .body{font-family:var(--sans); font-size:14.5px; line-height:1.6; color:var(--ink-soft);}
.wchip{font-size:13px; padding:5px 12px; border:1px solid var(--line); border-radius:999px;}

/* MOCKUP */
.mockgrid{display:grid; grid-template-columns:repeat(12,1fr); gap:18px; margin-top:34px;}
.m{border-radius:16px; overflow:hidden; border:1px solid var(--line); position:relative; min-height:220px;}
.m-hero{grid-column:span 12; background:var(--paper2); padding:0;}
.heroInner{display:grid; grid-template-columns:1.1fr .9fr; min-height:340px;}
@media(max-width:720px){ .heroInner{grid-template-columns:1fr;} }
.heroTxt{padding:clamp(26px,4vw,50px); display:flex; flex-direction:column; justify-content:center; gap:18px;}
.heroTxt .navm{display:flex; justify-content:space-between; align-items:center; font-family:var(--serif); font-weight:900; font-size:19px; letter-spacing:-.02em; margin-bottom:auto;}
.heroTxt .navm nav{font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.04em; color:var(--ink-soft); display:flex; gap:16px;}
.heroTxt h3{font-family:var(--serif); font-weight:900; font-size:clamp(28px,4vw,46px); letter-spacing:-.03em; line-height:.98;}
.heroTxt h3 em{font-style:italic; font-weight:500; color:var(--acc);}
.heroTxt .p{font-size:14px; color:var(--ink-soft); max-width:34ch;}
.heroTxt .cta{align-self:flex-start; background:var(--ink); color:var(--paper); font-weight:600; font-size:13px; padding:12px 22px; border-radius:999px;}
.heroImg{background:linear-gradient(150deg,var(--hero1),var(--hero2) 55%,var(--hero3)); position:relative; overflow:hidden; display:grid; place-items:center;}
.heroImg svg{width:56%; color:var(--acc); stroke-width:1;}
.heroImg .stamp{position:absolute; bottom:20px; right:22px; font-family:var(--serif); font-style:italic; color:color-mix(in srgb, var(--paper) 50%, transparent); font-size:13px;}

.m-card{grid-column:span 5;}
.m-social{grid-column:span 3;}
.m-wrap{grid-column:span 4;}
@media(max-width:720px){ .m-card,.m-social,.m-wrap{grid-column:span 12;} }
.biz{background:var(--ink); color:var(--paper); min-height:220px; padding:24px; display:flex; flex-direction:column; justify-content:space-between;}
.biz .top{display:flex; justify-content:space-between; align-items:flex-start;}
.biz .bdg{width:44px; height:44px; border-radius:50%; border:1.5px solid var(--acc); display:grid; place-items:center;}
.biz .bdg svg{width:24px; height:24px; color:var(--acc); stroke-width:1.4;}
.biz .nm2{font-family:var(--serif); font-weight:900; font-size:26px; letter-spacing:-.03em;}
.biz .role2{font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:color-mix(in srgb, var(--paper) 60%, transparent); margin-top:4px;}
.biz .info2{font-size:11.5px; color:color-mix(in srgb, var(--paper) 72%, transparent); line-height:1.7;}
.biz .info2 b{color:var(--acc); font-weight:600;}

.social{background:var(--paper2); min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:20px;}
.social .ava{width:96px; height:96px; border-radius:50%; background:var(--ink); display:grid; place-items:center; box-shadow:0 12px 30px color-mix(in srgb, var(--ink) 20%, transparent);}
.social .ava svg{width:52px; height:52px; color:var(--paper); stroke-width:1.3;}
.social .handle{font-family:var(--sans); font-weight:700; font-size:14px;}
.social .foll{font-size:11.5px; color:var(--ink-soft);}

.wrapm{background:var(--acc); color:var(--paper); min-height:220px; padding:24px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;}
.wrapm .lab2{font-size:10px; letter-spacing:.3em; text-transform:uppercase; font-weight:700; position:relative;}
.wrapm .big2{font-family:var(--serif); font-weight:900; font-size:34px; letter-spacing:-.03em; line-height:.95; position:relative;}
.wrapm .note2{font-family:var(--serif); font-style:italic; font-size:14px; position:relative; opacity:.9;}
.wrapm .deco{position:absolute; right:-10px; bottom:-10px; width:120px; height:120px; opacity:.18; color:var(--paper); stroke-width:1;}

footer{padding:40px 0 60px; text-align:center; color:var(--ink-soft); font-size:12px;}
footer .fl{font-family:var(--serif); font-weight:900; font-size:18px; color:var(--ink); letter-spacing:-.02em; margin-bottom:8px;}