/* Fìeri — sito. Token dal design system (design-system/tokens.css). Solo tema chiaro. Direzione: «Type and nothing else». */
:root{
--blu:#3546f5;--blu-notte:#00062e;--chiaro:#f4f7fe;--bianco:#fff;
--blu-notte-12:#00062e1f;--chiaro-8:#f4f7fe14;--chiaro-12:#f4f7fe1f;
--radius-s:9px;--radius-m:18px;--radius-l:21px;--radius-xl:28px;
--m:24px;--max:1120px;
--font-sans:Outfit,Arial,sans-serif;
--ease:cubic-bezier(.2,0,0,1);
--seam:44svh;--lead:clamp(20px,2.02vw,29px);
color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:56px}
body{margin:0;background:var(--chiaro);color:var(--blu-notte);font-family:var(--font-sans);font-size:15px;line-height:23px;font-weight:400;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
:focus{outline:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--m));margin-inline:auto;padding-inline:var(--m)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:var(--m);top:-100px;z-index:100;background:var(--blu);color:var(--chiaro);padding:11px 14px}
.skip:focus{top:11px}
b{font-weight:600}

/* ---------- Intestazione: prende l'inchiostro del capitolo ---------- */
.hdr{--hb:var(--chiaro);--hi:var(--blu-notte);--cur:var(--blu);position:fixed;inset:0 0 auto 0;z-index:50;height:56px;background:var(--hb);color:var(--hi);transition:background-color .3s var(--ease),color .3s var(--ease)}
.hdr[data-ink="white"]{--hb:var(--bianco)}
.hdr[data-ink="blue"]{--hb:var(--blu);--hi:var(--chiaro);--cur:var(--chiaro)}
.hdr[data-ink="navy"]{--hb:var(--blu-notte);--hi:var(--chiaro);--cur:var(--chiaro)}
.hdr-in{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px}
.hdr-logo{position:relative;display:block;width:67px;height:36px;justify-self:start}
.hdr-logo .lg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .3s var(--ease)}
.hdr[data-ink="light"] .lg-light,.hdr[data-ink="white"] .lg-light,.hdr[data-ink="blue"] .lg-blue,.hdr[data-ink="navy"] .lg-navy{opacity:1}
.nav{display:flex;gap:32px;font-size:15px;font-weight:500;align-self:stretch;justify-content:center}
.nav a{position:relative;display:inline-flex;align-items:center}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{font-weight:600;color:var(--cur)}
.lang{justify-self:end;display:flex;align-items:center;gap:2px;font-size:13px;letter-spacing:.04em}
.lang span{opacity:.4}
.lang button{all:unset;box-sizing:border-box;cursor:pointer;padding:11px 5px;font:inherit;font-weight:500;opacity:.55;transition:opacity .12s}
.lang button:hover{opacity:1}
.lang button[aria-pressed="true"]{opacity:1;font-weight:600}
.lang button:focus-visible{outline:2px solid currentColor;outline-offset:-2px}

/* ---------- Pulsante: un solo disegno, angolo Fìeri ---------- */
.btn{display:inline-flex;align-items:center;min-height:46px;padding:0 25px;font-size:15px;font-weight:600;background:var(--blu);color:var(--chiaro);border-radius:0 0 0 var(--radius-m);transition:background-color .12s,color .12s,border-radius .35s var(--ease),transform .12s}
.btn:hover{background:var(--blu-notte);border-bottom-left-radius:var(--radius-xl)}
.btn:active{transform:translateY(1px)}

/* ---------- Tipografia: cinque passi ---------- */
.h2{font-size:clamp(30px,3.87vw,49px);line-height:1.04;font-weight:600;letter-spacing:-.03em}
.h3{font-size:clamp(19px,1.85vw,25px);line-height:1.15;font-weight:600;letter-spacing:-.02em;margin-bottom:11px}
.lead{font-size:var(--lead);line-height:1.22;font-weight:500;letter-spacing:-.015em;max-width:34em}
.cap{font-size:13px;line-height:18px;max-width:62ch}
.brand{color:var(--blu)}
.sec-h{margin-top:clamp(63px,7.92vw,113px)}
.sec-lead{margin-top:25px;max-width:26em}

/* ---------- Hero: titolo grande su tre righe ---------- */
.hero{background:var(--chiaro)}
.hero-in{padding-top:calc(56px + clamp(63px,8.8vw,132px));padding-bottom:48px}
.hero-h{font-size:clamp(32px,5.7vw,80px);line-height:.94;font-weight:600;letter-spacing:-.05em;color:var(--blu)}
.hl-l{display:block}
.hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;margin-top:clamp(40px,5vw,72px)}
.hero-sub{font-size:18px;line-height:1.4;max-width:34ch}
.hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.vai{font-size:15px;font-weight:600;color:var(--blu);position:relative;padding-block:7px}
.vai::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease)}
.vai:hover::after{transform:scaleX(1)}
.meta{display:flex;flex-wrap:wrap;gap:12px 50px;margin-top:clamp(56px,7vw,96px)}
.meta div{display:grid;gap:2px}
.meta dt{font-size:13px;opacity:.75}
.meta dd{font-size:15px;font-weight:600}

/* ---------- Sezioni e fondi ---------- */
.sec{padding-block:clamp(77px,9.68vw,148px)}
.sec-light{background:var(--chiaro);color:var(--blu-notte)}
.sec-white{background:var(--bianco);color:var(--blu-notte)}
.sec-navy{background:var(--blu-notte);color:var(--chiaro)}
.sec-blue{background:var(--blu);color:var(--chiaro)}
.sec-blue .btn{background:var(--chiaro);color:var(--blu-notte)}
.sec-blue .btn:hover{background:var(--blu-notte);color:var(--chiaro)}

.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:42px 35px;margin-top:clamp(35px,4.4vw,56px)}
.cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:35px 28px;margin-top:clamp(35px,4.4vw,56px)}
.cols3 p,.cols4 p{font-size:15px;line-height:22px}
.name-note{margin-top:clamp(49px,6.16vw,84px)}

.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:42px 28px;margin-top:clamp(42px,5.28vw,70px)}
.nums4{grid-template-columns:repeat(4,1fr)}
.nums2{grid-template-columns:auto 1fr;gap:48px 56px;max-width:none}
.big{font-size:clamp(39px,5.46vw,81px);line-height:.95;font-weight:600;letter-spacing:-.045em;margin-bottom:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.big-t{white-space:nowrap}
#numeri .big{font-size:clamp(26px,3.7vw,40px)}
.nums p:not(.big){max-width:26ch;font-size:15px;line-height:22px}

/* componenti */
.comps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(42px,5.28vw,77px) 49px;margin-top:clamp(49px,6.16vw,84px)}
.comp{display:grid;gap:0;align-content:start;background:rgba(244,247,254,.07);color:var(--chiaro);padding:35px;border-radius:0 0 0 var(--radius-xl)}
.comp .h3{color:var(--chiaro)}
.comp p:last-child{font-size:15px;line-height:22px;max-width:40ch}
.ico{display:grid;place-items:center;width:42px;height:42px;font-size:21px;line-height:1;border-radius:0 0 0 var(--radius-s);background:var(--blu);color:var(--chiaro);margin-bottom:25px}
.comp-tag{font-size:13px;font-weight:600;margin-bottom:5px;color:var(--chiaro);opacity:.75}

/* sperimentazione */
.two{display:grid;grid-template-columns:1fr 1fr;gap:49px 70px;align-items:start}
.rows{display:grid;gap:7px;align-self:center}
.rows li{display:grid;grid-template-columns:102px 1fr;gap:21px;align-items:baseline;padding:16px 21px;margin-inline:-24px}
.rows li:nth-child(odd){background:var(--bianco)}
.rows b{font-size:clamp(32px,3.52vw,49px);line-height:1;font-weight:600;letter-spacing:-.04em;color:var(--blu)}
.rows span{font-size:16px;line-height:23px}

/* piano */
.wps{margin-top:clamp(35px,4.4vw,63px)}
.wps li{display:grid;grid-template-columns:102px 1fr;gap:21px;align-items:baseline;padding:16px 21px;margin-inline:-24px}
.wps li:nth-child(odd){background:var(--chiaro)}
.wps b{font-size:15px;font-weight:600;color:var(--blu)}
.wps span{font-size:clamp(18px,2.11vw,28px);line-height:1.2;font-weight:500;letter-spacing:-.02em}
.tempo{margin-top:clamp(49px,6.16vw,84px)}
.barra{height:5px;background:var(--chiaro)}
.barra span{display:block;height:100%;width:0;background:var(--blu);transition:width 1.6s var(--ease)}
.tempo.in .barra span{width:100%}
.tempo-l{display:flex;justify-content:space-between;gap:14px;margin-top:11px;font-size:13px}

.close .h2{max-width:14em;margin-bottom:32px}

/* fotografie: patina blu */
.fullpic{background:var(--chiaro)}
.pic-frame{position:relative;overflow:hidden;background:var(--blu);height:min(69svh,634px)}
.pic{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(1.25) contrast(1.05);mix-blend-mode:multiply;transform:scale(1.08);will-change:transform}



/* chi siamo */
.who-hero{padding:calc(56px + clamp(63px,8.8vw,132px)) 0 clamp(63px,7.92vw,113px);background:var(--chiaro)}
.who-h{font-size:clamp(42px,7.04vw,106px);line-height:.92;font-weight:600;letter-spacing:-.05em;color:var(--blu)}
.who-lead{margin-top:32px;max-width:30ch}
.who-list{padding-block:clamp(63px,7.92vw,113px)}
.who-sub{font-size:18px;font-weight:600;margin-bottom:28px}
.who{display:grid;grid-template-columns:5fr 4fr;gap:18px 42px;align-items:start;padding-block:clamp(32px,3.96vw,56px)}
.who:nth-of-type(even){background:var(--chiaro);padding-inline:var(--m);margin-inline:calc(-1*var(--m))}
.who-name{font-size:clamp(32px,4.93vw,74px);line-height:.95;font-weight:600;letter-spacing:-.045em}
.who-body{display:grid;gap:7px;padding-top:9px}
.who-cap{font-size:13px;font-weight:600;color:var(--blu)}
.who-role{font-size:18px;line-height:1.3;font-weight:600}
.who-addr{font-size:15px;line-height:22px}

/* ---------- Piè di pagina: come nel design system ---------- */
.foot{background:var(--blu-notte);color:var(--chiaro)}
.foot-in{padding-top:84px;padding-bottom:35px}
.foot-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:42px}
.foot-brand{display:grid;gap:21px;align-content:start}
.foot-logo{width:141px;height:auto}
.foot-claim{font-size:var(--lead);line-height:1.2;font-weight:600;letter-spacing:-.01em;max-width:18ch}
.foot-tag{max-width:40ch}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:28px}
.foot-col h2{margin:0 0 14px;font-size:13px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--chiaro)}
.foot-col ul{display:grid;gap:11px}
.foot-col a{font-size:15px;line-height:21px}
.foot-col a:hover{text-decoration:underline;text-underline-offset:4px}
.foot-partners{margin-top:56px;background:rgba(244,247,254,.07);color:var(--chiaro);border-radius:0 0 0 var(--radius-xl);padding:28px 35px;display:flex;flex-wrap:wrap;align-items:center;gap:21px 35px}
.foot-plabel{font-size:13px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--chiaro)}
.foot-partners img{height:54px;width:auto;max-width:100%}
.foot-bottom{margin-top:42px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:13px;line-height:18px}
.foot-legal{display:flex;flex-wrap:wrap;gap:7px 21px}
.foot-legal a{text-decoration:underline;text-underline-offset:4px;font-size:13px}

/* ---------- Cursore: un cerchio opaco che si ingrandisce al clic ---------- */
.dot{position:fixed;left:0;top:0;z-index:200;width:0;height:0;pointer-events:none;opacity:0;will-change:transform}
.dot::before{content:"";position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:var(--cc,var(--blu));opacity:.45;transform:scale(1);will-change:transform;
transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .6s cubic-bezier(.22,1,.36,1),background-color .2s}
.dot.on{opacity:1}
.dot.down::before{transform:scale(3.2);opacity:.28;transition-duration:.45s}
html.has-dot,html.has-dot a,html.has-dot button{cursor:none}

/* ---------- Ingresso ---------- */
.js .rv{opacity:0;transform:translateY(21px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

@media (max-width:960px){
.cols3,.nums,.nums4{grid-template-columns:1fr 1fr}
.cols4{grid-template-columns:1fr 1fr}
.comps{grid-template-columns:1fr}
.two{grid-template-columns:1fr}
.who{grid-template-columns:1fr}
.foot-top{grid-template-columns:1fr}
.foot-in{padding-top:56px}
}
@media (max-width:620px){
:root{--m:18px}
body{font-size:15px;line-height:22px}
.hdr-in{gap:12px}
.nav{gap:14px;font-size:13px}
.hdr-logo{width:53px;height:28px}
.cols3,.cols4,.nums,.nums4,.nums2{grid-template-columns:1fr}
.big-t{white-space:normal}
#numeri .big{font-size:clamp(30px,9vw,44px)}
.hero-h{font-size:clamp(24px,7.4vw,34px)}
.rows li,.wps li{grid-template-columns:1fr;gap:4px}
.foot-partners{padding:21px}
}
@media (prefers-reduced-motion:reduce){
.dot::before{transition:none}
*,*::before,*::after{transition-duration:0ms!important;animation-duration:0ms!important;scroll-behavior:auto!important}
.js .rv{opacity:1;transform:none}
.pic{transform:none!important}
}