:root{--bg:#000;--bg2:#070707;--panel:#0b0b0c;--panel2:#111113;--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.18);--ink:#fff;--ink2:rgba(255,255,255,.72);--mute:rgba(255,255,255,.5);--faint:rgba(255,255,255,.32);
--font:"Inter Tight",Inter,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;--r:20px;--r-s:12px;--gutter:clamp(20px,4.4vw,64px);--max:1440px;--ease:cubic-bezier(.2,.7,.2,1);--ease2:cubic-bezier(.76,0,.24,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden;overflow-x:clip}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:17px;line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased;min-height:100vh}
body.menu-open,body.gate-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
b,strong{font-weight:600}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sec{padding:clamp(72px,10vw,150px) 0;position:relative}
.sec-t{padding-top:clamp(72px,10vw,150px)}
/* ---- type ---- */
.d1,.d2,.d3{font-weight:700;text-transform:uppercase;letter-spacing:-.035em;line-height:.92}
.d1{font-size:clamp(44px,9vw,132px)}
.d2{font-size:clamp(34px,5.6vw,80px)}
.d3{font-size:clamp(26px,3.4vw,46px);letter-spacing:-.025em;line-height:1}
.d2 .lt,.d1 .lt,.d3 .lt{color:var(--mute)}
.h{font-weight:600;letter-spacing:-.02em;line-height:1.1;font-size:clamp(24px,2.8vw,38px)}
.ey{display:inline-flex;align-items:center;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);font-weight:500}
.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--ink2);max-width:62ch;font-weight:400}
.p{color:var(--mute);line-height:1.6;font-size:16px}
.small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:500}
.num{font-size:12px;letter-spacing:.2em;color:var(--faint);font-weight:500}
.center{text-align:center}
.mx{margin-left:auto;margin-right:auto}
/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 26px;border-radius:var(--r-s);font-size:14px;font-weight:600;letter-spacing:.01em;border:1px solid var(--line2);color:#fff;background:transparent;transition:transform .45s var(--ease),background .3s,color .3s,border-color .3s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.6)}
.btn-w{background:#fff;color:#000;border-color:#fff}
.btn-w:hover{background:#e8e8ea;border-color:#e8e8ea}
.btn-s{height:40px;padding:0 18px;font-size:13px}
.btn .ar{transition:transform .4s var(--ease)}.btn:hover .ar{transform:translateX(4px)}
.pill{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;border:1px solid var(--line2);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);font-weight:500;white-space:nowrap}
.pill-w{background:#fff;color:#000;border-color:#fff}
.lvl{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.3);font-size:12px;letter-spacing:.08em;color:#fff;font-weight:500;white-space:nowrap;background:rgba(255,255,255,.04)}
/* ---- cards / panels ---- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative;transition:transform .55s var(--ease),border-color .4s}
@media(hover:hover){.card:hover{transform:translateY(-4px);border-color:var(--line2)}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:28px}
.ph{position:relative;overflow:hidden;background:#0d0d0f;border-radius:var(--r)}
.ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.4s var(--ease)}
.card:hover .ph img,.ph:hover img{transform:scale(1.1)}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.55) 100%);pointer-events:none}
.hair{height:1px;background:var(--line)}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,96px);align-items:start}
.split .sticky{position:sticky;top:110px}
/* ---- intro ---- */
.intro{position:fixed;inset:0;z-index:9000;background:#000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;transition:transform 1s var(--ease2) .1s,visibility 0s 1.2s}
body.ready .intro{transform:translateY(-101%);visibility:hidden}
.intro .w{font-size:clamp(34px,9vw,124px);font-weight:700;letter-spacing:-.04em;line-height:1;text-transform:uppercase;display:flex;overflow:hidden}
.intro .w span{display:inline-block;transform:translateY(110%);animation:up .9s var(--ease) both}
.intro .w span.lt{color:var(--mute)}
.intro .ln{width:0;height:1px;background:#fff;animation:grow 1s var(--ease) .9s both}
.intro .tg{display:block;margin:0;text-align:center;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);opacity:0;animation:fade .8s ease 1.2s both}
@keyframes up{to{transform:none}}@keyframes grow{to{width:min(260px,50vw)}}@keyframes fade{to{opacity:1}}
.no-intro .intro{display:none}
/* ---- nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:800;padding:env(safe-area-inset-top) 0 0;transition:background .4s,border-color .4s}
.nav.sc{background:rgba(0,0,0,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--max);margin:0 auto;padding:16px var(--gutter);display:flex;align-items:center;gap:28px}
.brand{font-weight:700;letter-spacing:-.03em;font-size:19px;text-transform:uppercase;display:flex;align-items:baseline}
.brand span{color:var(--mute);font-weight:600}
.links{display:flex;gap:26px;align-items:center;margin-left:auto}
.links a{font-size:13.5px;font-weight:500;color:var(--ink2);transition:color .3s;position:relative;padding:4px 0}
.links a:hover,.links a.on{color:#fff}
.links a.btn{color:#000;padding:0 18px}.links a.btn:hover{color:#000}.links a.btn::after{display:none}
.links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:#fff}
.tools{display:flex;align-items:center;gap:12px}
.lang{display:flex;gap:7px;font-size:12px;letter-spacing:.14em;color:var(--mute);font-weight:500;margin-right:4px}
.lang a{color:var(--mute)}.lang a:hover,.lang .on{color:#fff}.lang i{font-style:normal;opacity:.5}
.ubtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s,border-color .3s;font-size:12px;font-weight:600;letter-spacing:.04em;position:relative}
.ubtn:hover{border-color:#fff}
.ubtn .ini{display:none}
body.in .ubtn{background:#fff;color:#000;border-color:#fff}body.in .ubtn svg{display:none}body.in .ubtn .ini{display:block}
.umenu{position:absolute;right:0;top:calc(100% + 10px);min-width:220px;background:#0b0b0c;border:1px solid var(--line2);border-radius:16px;padding:8px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .25s,transform .3s var(--ease);text-align:left;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.umenu.open{opacity:1;pointer-events:auto;transform:none}
.umenu .uh{padding:10px 12px 9px;border-bottom:1px solid var(--line);margin-bottom:6px}
.umenu .uh b{display:block;font-size:13px;font-weight:600}.umenu .uh span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.umenu a{display:block;padding:10px 12px;border-radius:10px;font-size:13px;font-weight:500}.umenu a:hover{background:var(--panel2)}
.uwrap{position:relative}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger i{display:block;width:16px;height:1.5px;background:#fff;transition:transform .4s var(--ease),opacity .3s}
.burger.open i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}.burger.open i:nth-child(2){opacity:0}.burger.open i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mob{position:fixed;inset:0;z-index:790;background:#000;padding:calc(90px + env(safe-area-inset-top)) var(--gutter) 40px;display:none;flex-direction:column;overflow:auto}
.mob.open{display:flex}
.mob a.big{font-size:clamp(34px,9vw,54px);font-weight:700;text-transform:uppercase;letter-spacing:-.035em;line-height:1.05;padding:8px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(14px);animation:fin .6s var(--ease) both}
.mob a.big:nth-child(1){animation-delay:.05s}.mob a.big:nth-child(2){animation-delay:.1s}.mob a.big:nth-child(3){animation-delay:.15s}.mob a.big:nth-child(4){animation-delay:.2s}.mob a.big:nth-child(5){animation-delay:.25s}.mob a.big:nth-child(6){animation-delay:.3s}
@keyframes fin{to{opacity:1;transform:none}}
.mob .mb{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:30px}
.mob .mb .btn{width:100%}
.mob .ml{display:flex;gap:14px;justify-content:space-between;font-size:12px;letter-spacing:.16em;color:var(--mute);text-transform:uppercase;margin-top:18px}
/* ---- hero ---- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#000}
.hero .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05);transform:scale(1.06);animation:kb 26s ease-out infinite alternate}
@keyframes kb{to{transform:scale(1.14) translate(-1%,-1%)}}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 40%,rgba(0,0,0,.85) 85%,#000 100%)}
.hero .in{position:relative;z-index:2;width:100%;padding-bottom:clamp(40px,6vw,80px);padding-top:140px}
.hero.c .in{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100svh;padding-bottom:140px}
.hero .d1{margin:22px 0 24px}
.hero .lead{margin-bottom:34px}
.hero.c .lead{margin-left:auto;margin-right:auto}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero.c .ctas{justify-content:center}
.hero-rv{opacity:0;transform:translateY(22px);transition:opacity 1s ease,transform 1s var(--ease)}
body.ready .hero-rv{opacity:1;transform:none}
.hero-rv.d1x{transition-delay:.15s}.hero-rv.d2x{transition-delay:.3s}.hero-rv.d3x{transition-delay:.45s}.hero-rv.d4x{transition-delay:.6s}
.stats{position:absolute;left:0;right:0;bottom:0;z-index:3;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.6))}
.stats .in2{max-width:var(--max);margin:0 auto;padding:26px var(--gutter);display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat b{display:block;font-size:clamp(24px,2.6vw,38px);font-weight:600;letter-spacing:-.03em;line-height:1}
.stat span{display:block;margin-top:6px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-weight:500}
.hero.sub{min-height:72vh;min-height:72svh}
.hero.sub .in{padding-bottom:clamp(44px,6vw,80px)}
.hero .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
/* ---- manifesto ---- */
.man{text-align:center;padding:clamp(90px,13vw,190px) 0}
.man .d2{font-size:clamp(30px,5.2vw,74px)}
.man .d2 span{display:block}
.man .d2 .lo{text-transform:none;font-weight:500;color:var(--mute);letter-spacing:-.02em}
.man .btn{margin-top:38px}
/* ---- mosaic ---- */
.mos{position:relative;overflow:hidden;padding:0}
.row{display:flex;gap:14px;width:max-content;animation:mq 60s linear infinite;will-change:transform}
.row.r2{animation-duration:75s;animation-direction:reverse;margin-top:14px}
.row .ph{width:clamp(170px,19vw,260px);aspect-ratio:3/4;flex:none;border-radius:var(--r)}
.row .ph img{filter:brightness(.55) saturate(.85);transform:none}
@keyframes mq{to{transform:translateX(-50%)}}
.mos .ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 var(--gutter);background:radial-gradient(60% 70% at 50% 50%,rgba(0,0,0,.72),rgba(0,0,0,.2) 70%,rgba(0,0,0,0))}
.mos .ov .d3{font-size:clamp(26px,3.8vw,52px)}
.mos .ov p{color:var(--ink2);margin-top:22px;max-width:56ch;font-size:clamp(15px,1.2vw,18px);line-height:1.55}
.mos .ov .small{display:block;width:fit-content;margin:30px auto 0;color:#fff}.mos .ov .small .ar{letter-spacing:0}
@media(prefers-reduced-motion:reduce){.row{animation:none}}
/* ---- numbered list (falegnameria) ---- */
.nl{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,96px)}
.nl .items{display:flex;flex-direction:column}
.nl .it{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:28px 0;border-top:1px solid var(--line)}
.nl .it:last-child{border-bottom:1px solid var(--line)}
.nl .it .num{padding-top:5px}
.nl .it h4{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.nl .it p{color:var(--mute);line-height:1.55;font-size:15.5px}
/* ---- unlock grid ---- */
.ug{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.ug .card{display:flex;flex-direction:column;min-height:420px}
.ug .ph{aspect-ratio:4/3;border-radius:0}
.ug .ph img{filter:saturate(.8)}
.ug .tx{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
.ug h3{font-size:20px;font-weight:600;letter-spacing:-.02em;text-transform:uppercase}
.ug p{color:var(--mute);font-size:15px;line-height:1.55;flex:1}
.ug .lnk{font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:8px;margin-top:10px}
.ug .lnk .ar{transition:transform .4s var(--ease)}.ug .card:hover .lnk .ar{transform:translateX(5px)}
.ug .card:nth-child(1){grid-column:span 2}.ug .card:nth-child(1) .ph{aspect-ratio:auto;flex:1;min-height:300px}
/* ---- process rows (falegnameria) ---- */
.proc{display:flex;flex-direction:column}
.pr{display:grid;grid-template-columns:120px 1fr 1.2fr;gap:clamp(20px,3vw,48px);padding:clamp(30px,4vw,54px) 0;border-top:1px solid var(--line);align-items:start}
.pr:last-child{border-bottom:1px solid var(--line)}
.pr .n{font-size:15px;font-weight:600;letter-spacing:.02em;display:flex;gap:10px;align-items:center}
.pr .n i{font-style:normal;transition:transform .4s var(--ease)}.pr:hover .n i{transform:translateX(5px)}
.pr .ph{aspect-ratio:4/3;max-width:460px}
.pr h4{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.pr p{color:var(--mute);line-height:1.6;font-size:16px;max-width:52ch}
.pr .more{display:inline-block;margin-top:18px;font-size:13px;font-weight:600;border-bottom:1px solid var(--line2);padding-bottom:2px}
/* ---- member rows (982x) ---- */
.rows{border-top:1px solid var(--line)}
.mrow{display:grid;grid-template-columns:52px 170px 190px 1fr auto;gap:22px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);font-size:14px}
.mrow .av{width:44px;height:44px;border-radius:50%;overflow:hidden;border:1px solid var(--line2);background:#111;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;letter-spacing:.04em}
.mrow .av img{width:100%;height:100%;object-fit:cover}
.mrow .nm{font-weight:600}
.mrow .rl{color:var(--mute)}
.mrow .q{color:var(--ink2)}
.mrow.locked{filter:blur(5px);pointer-events:none;user-select:none}
.lockbox{position:relative}
.lockbox .lk{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(50% 60% at 50% 50%,rgba(0,0,0,.9),rgba(0,0,0,.4))}
.lk .card{padding:40px 36px;text-align:center;max-width:520px;background:rgba(0,0,0,.85);backdrop-filter:blur(8px)}
.lk .ico{width:52px;height:52px;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.lk h3{font-size:24px;font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.lk p{color:var(--mute);font-size:15px;line-height:1.6;margin-bottom:24px}
.lk .ctas{justify-content:center}
body.in .lockbox .lk{display:none}body.in .hero [data-login],body.in .mob [data-login]{display:none}body.in .mrow.locked{filter:none;pointer-events:auto;user-select:auto}
/* ---- text block ---- */
.tb{max-width:760px;margin:0 auto;text-align:center}
.tb .d3{margin-bottom:34px}
.tb p{color:var(--ink2);font-size:clamp(16px,1.3vw,19px);line-height:1.6;margin-bottom:18px}
.tb p:last-child{color:#fff;font-weight:600}
/* ---- pricing ---- */
.price{max-width:520px;margin:48px auto 0;padding:40px 36px}
.price .top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.price h3{font-size:22px;font-weight:600;letter-spacing:-.02em}
.price .amt{font-size:clamp(48px,6vw,72px);font-weight:700;letter-spacing:-.05em;line-height:1;margin:24px 0 6px}
.price .amt small{font-size:14px;letter-spacing:.1em;color:var(--mute);font-weight:500;margin-left:8px;text-transform:uppercase}
.price .p{margin-bottom:26px}
.price .btn{width:100%}
.price ul{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.price li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink2)}
.price li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:1px solid var(--line2);background:url("data:image/svg+xml;utf8,") center/10px no-repeat;margin-top:2px}
/* ---- faq ---- */
.faq{max-width:900px;margin:40px auto 0;border-top:1px solid var(--line)}
.fq{border-bottom:1px solid var(--line)}
.fq button{width:100%;display:grid;grid-template-columns:48px 1fr 32px;gap:16px;align-items:center;text-align:left;padding:24px 0;font-size:clamp(17px,1.4vw,21px);font-weight:600;letter-spacing:-.015em}
.fq button .num{padding-top:2px}
.fq .x{width:28px;height:28px;border-radius:50%;border:1px solid var(--line2);position:relative;transition:transform .4s var(--ease)}
.fq .x::before,.fq .x::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:#fff;transform:translate(-50%,-50%)}
.fq .x::after{transform:translate(-50%,-50%) rotate(90deg)}
.fq.open .x{transform:rotate(45deg)}
.fq .a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.fq .a p{padding:0 48px 26px 64px;color:var(--mute);line-height:1.65;font-size:16px}
/* ---- closing ---- */
.closing{text-align:center;padding:clamp(100px,14vw,200px) 0}
.closing .d2 span{display:block}
.closing .lead{margin:26px auto 0}
.closing .btn{margin-top:36px}
/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:70px 0 calc(30px + env(safe-area-inset-bottom))}
.ft{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
.ft .fb{font-size:clamp(28px,3.4vw,46px);font-weight:700;letter-spacing:-.04em;text-transform:uppercase;line-height:1}
.ft .fb span{color:var(--mute)}
.ft p{color:var(--mute);font-size:14px;margin-top:14px;max-width:34ch;line-height:1.55}
.ft h5{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-weight:500;margin-bottom:16px}
.ft li{margin-bottom:10px}.ft li a{font-size:14px;color:var(--ink2)}.ft li a:hover{color:#fff}
.fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:60px;padding-top:24px;border-top:1px solid var(--line);font-size:12px;color:var(--faint);letter-spacing:.04em}
/* ---- experience rows (trips) ---- */
.xp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:var(--panel);margin-top:18px}
.xp .ph{border-radius:0;min-height:420px;aspect-ratio:auto}
.xp .ph::after{background:linear-gradient(90deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.35) 100%)}
.xp .tx{padding:clamp(26px,3.4vw,52px);display:flex;flex-direction:column}
.xp .meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.xp h3{font-size:clamp(28px,3.2vw,44px);font-weight:700;letter-spacing:-.035em;text-transform:uppercase;line-height:.95}
.xp .wh{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin:12px 0 18px;font-weight:500}
.xp p{color:var(--ink2);line-height:1.6;font-size:16px}
.xp .foot{margin-top:auto;padding-top:24px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.xp .pz b{font-size:30px;font-weight:600;letter-spacing:-.03em;display:block;line-height:1}
.xp .pz span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.xp .more{max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.xp.open .more{max-height:900px}
.xp .more .inn{padding-top:26px;margin-top:26px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:24px}
.xp .more h5{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:12px;font-weight:500}
.xp .more li{font-size:14px;color:var(--ink2);padding:7px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:70px 1fr;gap:10px}
.xp .more li b{font-weight:500;color:var(--mute);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding-top:2px}
.xp .more li.one{grid-template-columns:1fr}
.xp:nth-child(even) .ph{order:2}
/* ---- dinners grid ---- */
.dg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.dg .card{display:flex;flex-direction:column}
.dg .ph{aspect-ratio:4/3;border-radius:0}
.dg .tx{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1;gap:8px}
.dg .meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.dg h3{font-size:22px;font-weight:700;letter-spacing:-.03em;text-transform:uppercase;line-height:1}
.dg .wh{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-weight:500}
.dg p{color:var(--mute);font-size:14.5px;line-height:1.55;flex:1;margin-top:6px}
.dg .foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.dg .foot b{font-size:22px;font-weight:600;letter-spacing:-.02em}.dg .foot b small{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-left:6px;font-weight:500}
.dg .soon{border-style:dashed;justify-content:center;align-items:center;text-align:center;padding:40px 28px}
/* ---- features grid ---- */
.fg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.fg .card{padding:28px 26px 30px}
.fg .num{display:block;margin-bottom:26px}
.fg h4{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.fg p{color:var(--mute);font-size:14.5px;line-height:1.55}
/* ---- team ---- */
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.tg .card .ph{aspect-ratio:4/5;border-radius:0}
.tg .ph img{filter:grayscale(1) contrast(1.05)}
.tg .card:hover .ph img{filter:grayscale(0)}
.tg .tx{padding:20px 22px 24px}
.tg .rl{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-weight:500}
.tg h3{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:6px 0 10px}
.tg p{color:var(--mute);font-size:14.5px;line-height:1.55}
.tg .soc{display:flex;gap:8px;margin-top:16px}
.mono{display:flex;align-items:center;justify-content:center;font-size:clamp(60px,10vw,120px);font-weight:700;letter-spacing:-.06em;background:linear-gradient(145deg,#141416,#000);color:#fff}
/* ---- events ---- */
.ev{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}
.ev .card{min-height:560px;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(26px,3vw,44px)}
.ev .card .bgp{position:absolute;inset:0;z-index:0}
.ev .card .bgp img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5) brightness(.5);transition:transform 1.4s var(--ease)}
.ev .card:hover .bgp img{transform:scale(1.06)}
.ev .card .bgp::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.92))}
.ev .card>*:not(.bgp){position:relative;z-index:1}
.ev .se{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);font-weight:500}
.ev h3{font-size:clamp(36px,4.6vw,66px);font-weight:700;letter-spacing:-.02em;text-transform:uppercase;line-height:.95;margin:14px 0 6px}
.ev .tg2{color:var(--ink2);font-size:15px;margin-bottom:16px}
.ev p{color:var(--ink2);font-size:15.5px;line-height:1.6;max-width:50ch}
.ev .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
/* ---- form ---- */
.form{display:flex;flex-direction:column;gap:18px}
.fs{padding:clamp(26px,3.4vw,44px)}
.fs .fh{display:flex;flex-direction:column;gap:6px;margin-bottom:26px}
.fs .fh b{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-weight:500}
.fs .fh p{color:var(--ink2);font-size:15px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:500}
.inp{width:100%;background:#000;border:1px solid var(--line2);border-radius:var(--r-s);color:#fff;font:inherit;font-size:16px;padding:14px 16px;transition:border-color .3s;-webkit-appearance:none;appearance:none}
.inp:focus{outline:none;border-color:#fff}
select.inp{background:#000 url("data:image/svg+xml;utf8,") right 14px center/14px no-repeat;padding-right:40px}
textarea.inp{min-height:150px;resize:vertical}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-s);cursor:pointer;transition:border-color .3s,background .3s;background:#000}
.opt:hover{border-color:var(--line2)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .bx{flex:none;width:18px;height:18px;border-radius:50%;border:1px solid var(--line2);margin-top:3px;position:relative;transition:background .3s,border-color .3s}
.opt .bx.sq{border-radius:5px}
.opt input:checked~.bx{background:#fff;border-color:#fff}
.opt input:checked~.bx::after{content:"";position:absolute;inset:4px;border-radius:inherit;background:#000}
.opt b{display:block;font-weight:600;font-size:15px;margin-bottom:3px}
.opt span{font-size:13.5px;color:var(--mute);line-height:1.45}
.opt input:checked~div b{color:#fff}
.optlist .opt{position:relative}
.consent{display:flex;gap:14px;align-items:flex-start;font-size:13.5px;color:var(--mute);line-height:1.5;position:relative;cursor:pointer}
.consent .bx{margin-top:1px}
.ferr{color:#f0b4b4;font-size:13.5px;line-height:1.4;margin-top:6px}
.fok{display:none;text-align:center;padding:clamp(40px,6vw,80px) 24px}
.fok .ico{width:62px;height:62px;border-radius:50%;border:1px solid var(--line2);margin:0 auto 22px;display:flex;align-items:center;justify-content:center}
.fok h3{font-size:30px;font-weight:600;letter-spacing:-.02em;margin-bottom:12px}
.fok p{color:var(--mute);max-width:52ch;margin:0 auto 26px;line-height:1.6}
/* ---- reveal ---- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.plx{will-change:transform}
/* ---- responsive ---- */
@media(max-width:1100px){.ug{grid-template-columns:1fr 1fr}.ug .card:nth-child(1){grid-column:span 2}.tiers{grid-template-columns:1fr 1fr}.mrow{grid-template-columns:52px 150px 1fr auto}.mrow .rl{display:none}}
@media(max-width:920px){
.links{display:none}.burger{display:flex;margin-left:auto}.tools{margin-left:0}.tools .lang{display:none}
.nav-in{padding:12px var(--gutter)}
.split,.nl{grid-template-columns:1fr;gap:34px}.split .sticky{position:static}
.g3,.g4,.fg,.tg,.dg{grid-template-columns:1fr 1fr}
.xp{grid-template-columns:minmax(0,1fr)}.xp .ph{min-height:260px;aspect-ratio:4/3;order:0!important}.xp .foot .btn{white-space:normal;height:auto;min-height:48px;padding:12px 22px;text-align:center;max-width:100%}
.pr{grid-template-columns:1fr;gap:16px}.pr .ph{max-width:none}
.ev{grid-template-columns:1fr}.ev .card{min-height:440px}
.ft{grid-template-columns:1fr 1fr}
.two{grid-template-columns:1fr}.dash{grid-template-columns:1fr 1fr}
.pf .bd .inn{grid-template-columns:1fr}
}
@media(max-width:640px){
body{font-size:16px}
.hero h1 span{display:inline!important}.hero h1 span+span::before{content:' '}
.d1{font-size:clamp(40px,11.5vw,64px)}
.sec{padding:64px 0}
.hero .in{padding-top:120px}.hero.c .in{padding-bottom:160px}
.stats .in2{grid-template-columns:1fr 1fr;gap:18px 12px;padding:20px var(--gutter)}
.ctas .btn{width:100%}
.g2,.g3,.g4,.fg,.tg,.dg,.opts,.fgrid,.ug,.tiers,.dash{grid-template-columns:1fr}.ug .card:nth-child(1){grid-column:auto}.ug .card{min-height:0}
.mrow{grid-template-columns:44px 1fr auto;gap:12px}.mrow .q{grid-column:1/-1;font-size:13.5px}
.row .ph{width:150px;border-radius:var(--r)}
.mos .ov{background:rgba(0,0,0,.65)}
.price{padding:30px 22px}
.fq button{grid-template-columns:34px 1fr 28px;padding:20px 0;font-size:16.5px}.fq .a p{padding:0 0 22px 46px}
.bk .card{grid-template-columns:1fr;align-items:flex-start}
.pbar{flex-direction:column;align-items:flex-start;gap:6px}
.fs{padding:22px 18px}
.mbox{padding:36px 22px 28px}
.xp .more .inn{grid-template-columns:1fr}
.emap .lb{font-size:22px;letter-spacing:.06em}.emap .hub .lb{font-size:25px}.emap .sh .lb{display:none}
.emap .cd{r:5.5}.emap .hub .cd{r:8}.emap .dots{stroke-width:2.4}.emap .coast{stroke-width:1.7}.emap .net{stroke-width:1.6}.emap .ltc{r:3.8}.emap .lt{r:12}.emap .cg{r:18}
.legend{gap:14px}
.metal{transform:none}
.closing{padding:90px 0}
.ft{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.rv{transition:none;opacity:1;transform:none}.hero .bg img{animation:none}.metal::before{animation:none}}
/* ============================================================
SIRIO AGENCY · estensioni al design system SIRIOEXPERIENCE
(nero puro, Inter Tight, pillole, card scure) + blu Sirio
============================================================ */
:root{--blue:#002069;--el:#2f6bff;--el2:#8fb0ff;--glow:0 0 18px rgba(47,107,255,.55)}
::selection{background:#2f6bff;color:#fff}
.bl{color:var(--el2)}
.d1 .bl,.d2 .bl,.d3 .bl{color:var(--el2)}
.btn-b{background:var(--el);border-color:var(--el);color:#fff}
.btn-b:hover{background:#4a7dff;border-color:#4a7dff}
.pill-b{border-color:rgba(47,107,255,.6);color:#c9d8ff;background:rgba(47,107,255,.12)}
.pill.on{background:#fff;color:#000;border-color:#fff}
.pill-btn{cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.pill-btn:hover{border-color:#fff;color:#fff}
.legend span::before{background:var(--el);box-shadow:0 0 7px var(--el)}
/* ---- brand / logo ---- */
.brand{gap:10px;align-items:center}
.brand svg{width:34px;height:34px;flex:none;color:#fff}
.brand .wm{font-size:12px;letter-spacing:.22em;line-height:1.1;font-weight:700}
.brand .wm span{display:block;color:var(--mute);font-weight:600;letter-spacing:.24em}
.intro .pic{width:clamp(64px,10vw,110px);height:auto;color:#fff;animation:fade .9s ease .1s both}
.intro .w{font-size:clamp(30px,8vw,112px)}
/* ---- hero home ---- */
.hero .bg img.ai{filter:none;opacity:.78}
.hero .bg::after{background:linear-gradient(180deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,.88) 85%,#000 100%)}
/* ---- countdown ---- */
.cd{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.cd .u{min-width:92px;padding:16px 14px 14px;border:1px solid var(--line2);border-radius:var(--r);background:rgba(255,255,255,.03);text-align:center}
.cd .n{font-size:clamp(28px,4vw,48px);font-weight:700;letter-spacing:-.04em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.cd .n.flip{animation:flip .5s var(--ease)}
@keyframes flip{from{transform:translateY(-6px);opacity:.3}to{transform:none;opacity:1}}
.cd .l{margin-top:6px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-weight:500}
.ten{position:relative;overflow:hidden;border:1px solid var(--line2);border-radius:28px;padding:clamp(34px,5vw,64px);text-align:center;background:radial-gradient(80% 120% at 50% 0%,rgba(0,32,105,.55),#000 70%)}
.ten::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,");opacity:.5;pointer-events:none}
.ten>*{position:relative;z-index:1}
.ten .big{font-size:clamp(60px,12vw,160px);font-weight:700;letter-spacing:-.06em;line-height:.9;text-transform:uppercase}
.ten .big span{color:var(--el2)}
/* ---- KPI tiles ---- */
.kp{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kp .card{padding:26px 24px 22px}
.kp b{display:block;font-size:clamp(30px,3.4vw,48px);font-weight:700;letter-spacing:-.04em;line-height:1}
.kp b small{font-size:.5em;color:var(--el2);margin-left:4px;letter-spacing:0}
.kp span{display:block;margin-top:10px;font-size:13px;color:var(--mute);line-height:1.45}
/* ---- unlock grid tweaks (servizi in home) ---- */
.ug .card .ph img{filter:saturate(.9) brightness(.9)}
.ug .num{display:block;margin-bottom:10px}
/* ---- case cards ---- */
.cs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cs .card{display:flex;flex-direction:column;text-align:left;cursor:pointer;width:100%}
.cs .ph{aspect-ratio:5/2;border-radius:0}
.cs .ph.shot{background:radial-gradient(90% 90% at 50% 100%,rgba(0,32,105,.7),#07070a 70%);display:flex;align-items:flex-end;justify-content:center}
.cs .ph.shot img{width:38%;height:88%;object-fit:cover;object-position:top;border-radius:16px 16px 0 0;border:3px solid #1a1a1e;border-bottom:none;transform:none;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.cs .ph.shot::after{display:none}
.cs .ph.txt{aspect-ratio:auto;min-height:0;padding:22px 24px 0;background:transparent}
.cs .tx{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.cs .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cs .clogo{height:26px;max-width:120px;object-fit:contain;background:#fff;border-radius:6px;padding:3px 7px}
.cs h3{font-size:19px;font-weight:700;letter-spacing:-.03em;text-transform:uppercase;line-height:1;margin-top:6px}
.cs .wh{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-weight:500}
.cs p{color:var(--mute);font-size:14px;line-height:1.5;margin:4px 0 12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cs .met{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.cs .met b{display:block;font-size:22px;font-weight:600;letter-spacing:-.03em;line-height:1}
.cs .met small{display:block;margin-top:5px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:500}
.cs .tags{display:none}
.cs .tags span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);border:1px solid var(--line);border-radius:999px;padding:4px 9px}
.cs .n{position:absolute;top:14px;right:14px;z-index:3;font-size:12px;letter-spacing:.2em;color:#fff;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);border:1px solid var(--line2);border-radius:999px;padding:5px 10px}
.filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0 0 30px}
.search{display:flex;align-items:center;gap:12px;max-width:620px;margin:0 auto 22px;border:1px solid var(--line2);border-radius:var(--r-s);padding:0 18px;height:52px;background:#000}
.search svg{width:18px;height:18px;flex:none;color:var(--mute)}
.search input{flex:1;background:none;border:0;color:#fff;font:inherit;font-size:15px;outline:none}
.search input::placeholder{color:var(--faint)}
/* ---- case modal ---- */
.cmodal{position:fixed;inset:0;z-index:6000;display:none;align-items:flex-start;justify-content:center;padding:20px;overflow:auto;-webkit-overflow-scrolling:touch}
.cmodal.open{display:flex;animation:fade .25s ease both}
.cmodal .bgm{position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cbox{position:relative;width:100%;max-width:980px;margin:40px auto;background:#050505;border:1px solid var(--line2);border-radius:28px;overflow:hidden;animation:mup .5s var(--ease) both;box-shadow:0 40px 100px rgba(0,0,0,.7)}
.cbox .xx{position:absolute;top:16px;right:16px;z-index:5;width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:rgba(0,0,0,.6);font-size:20px;line-height:1;color:#fff}
.cbox .hd{position:relative;min-height:260px;display:flex;align-items:flex-end;padding:clamp(26px,4vw,44px);background:radial-gradient(70% 100% at 20% 100%,rgba(0,32,105,.75),#060608 70%)}
.cbox .hd img.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
.cbox .hd::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.85))}
.cbox .hd>div{position:relative;z-index:2}
.cbox .hd h2{font-size:clamp(28px,4vw,52px);font-weight:700;letter-spacing:-.04em;text-transform:uppercase;line-height:.95;margin-top:14px}
.cbox .hd .sub{margin-top:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);font-weight:500}
.cbox .hd .mlogo{height:40px;max-width:180px;object-fit:contain;background:#fff;border-radius:8px;padding:5px 10px;margin-top:14px;display:block}
.cbox .bd{padding:clamp(24px,4vw,44px)}
.cbox .bd>p{font-size:17px;color:var(--ink2);line-height:1.6;max-width:72ch}
.cbox h4{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);font-weight:500;margin:34px 0 14px}
.cbox .kp{grid-template-columns:repeat(4,1fr)}
.cbox .kp .card{padding:20px 18px 18px}
.cbox .kp b{font-size:clamp(24px,2.6vw,36px)}
.cbox ul.ck li{position:relative;padding:11px 0 11px 30px;border-top:1px solid var(--line);color:var(--ink2);font-size:15px;line-height:1.5}
.cbox ul.ck li:last-child{border-bottom:1px solid var(--line)}
.cbox ul.ck li::before{content:"";position:absolute;left:0;top:15px;width:16px;height:16px;border-radius:50%;border:1px solid var(--line2);background:url("data:image/svg+xml;utf8,") center/9px no-repeat}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.gal .g{border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;background:#0b0b0c;aspect-ratio:3/4;cursor:zoom-in;padding:0}
.gal .g.photo{aspect-ratio:4/3}
.gal .g img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s var(--ease)}
.gal .g:hover img{transform:scale(1.05)}
.pdfs{display:flex;flex-wrap:wrap;gap:8px}
.pdfs a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-s);border:1px solid var(--line2);font-size:13px;font-weight:600;transition:border-color .3s,background .3s}
.pdfs a:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.pdfs a svg{width:16px;height:16px}
.lbx{position:fixed;inset:0;z-index:7000;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.lbx.open{display:flex;animation:fade .2s ease both}
.lbx img{max-width:100%;max-height:100%;border-radius:12px;border:1px solid var(--line2)}
/* ---- marquee di parole ---- */
.words{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
.words .tr{display:flex;gap:40px;width:max-content;animation:mq 50s linear infinite;white-space:nowrap}
.words span{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);font-weight:500;display:inline-flex;align-items:center;gap:40px}
.words span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--el)}
/* ---- logo wall ---- */
.lwall{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.lwall .lw{border:1px solid var(--line);border-radius:var(--r-s);min-height:84px;display:flex;align-items:center;justify-content:center;padding:16px 18px;text-align:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink2);background:var(--panel);transition:border-color .3s,color .3s}
.lwall .lw:hover{border-color:var(--line2);color:#fff}
.lwall .lw img{max-height:46px;max-width:80%;object-fit:contain;background:#fff;border-radius:8px;padding:6px 10px}
.lwall .lw img.dk{background:transparent;padding:0}
/* ---- timeline ---- */
.tl{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.tl .card{padding:22px 20px}
.tl b{display:block;font-size:26px;font-weight:700;letter-spacing:-.04em;color:#fff}
.tl p{color:var(--mute);font-size:13.5px;line-height:1.5;margin-top:8px}
.tl .card.now{border-color:rgba(47,107,255,.6);background:linear-gradient(160deg,rgba(0,32,105,.6),#000)}
/* ---- divisioni / team cards ---- */
.dv .card{padding:26px 24px 28px;min-height:240px;display:flex;flex-direction:column}
.dv .card .pill{align-self:flex-start}
.dv h3{font-size:22px;font-weight:700;letter-spacing:-.03em;text-transform:uppercase;margin:16px 0 8px}
.dv p{color:var(--mute);font-size:14.5px;line-height:1.55;flex:1}
.dv .lnk{margin-top:14px;font-size:13px;font-weight:600}
/* ---- davide ---- */
.me{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:center}
.me .ph{aspect-ratio:4/5;border-radius:28px}
.me .tag{position:absolute;left:18px;bottom:18px;z-index:2;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);border:1px solid var(--line2);border-radius:var(--r-s);padding:12px 16px}
.me .tag b{display:block;font-size:15px}.me .tag span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.me .facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.me .facts .card{padding:18px}
.me .facts b{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:600}
.me .facts p{color:var(--mute);font-size:13.5px;line-height:1.5;margin-top:6px}
/* ---- forms Sirio ---- */
.form .fs h3{font-size:24px;font-weight:600;letter-spacing:-.02em}
.fs .grp{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-weight:500;margin:10px 0 2px;padding-top:14px;border-top:1px solid var(--line)}
.fs .grp:first-of-type{border-top:0;padding-top:0}
.inp.err{border-color:#e2a0a0}
.fdrop{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px dashed var(--line2);border-radius:var(--r-s);cursor:pointer;background:#000;transition:border-color .3s,background .3s;position:relative}
.fdrop:hover,.fdrop.has{border-color:#fff}
.fdrop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.fdrop .fi{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center}
.fdrop b{display:block;font-size:14px;font-weight:600}
.fdrop small{display:block;color:var(--mute);font-size:12.5px;line-height:1.4;margin-top:2px}
.fdrop .fname{display:block;color:var(--el2);font-size:12.5px;margin-top:4px;font-weight:600}
.fdrop .fname:empty{display:none}
.fs .opt-tag{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--el2);border:1px solid rgba(47,107,255,.5);border-radius:999px;padding:2px 8px;margin-left:8px;font-weight:500}
.form.sent>*:not(.fok){display:none}
.form.sent .fok{display:block}
.fs .btn{width:100%}
.status{min-height:18px;font-size:13px;color:var(--mute);margin-top:4px}
.status.bad{color:#e2a0a0}
.burn{border:1px solid rgba(47,107,255,.45);background:linear-gradient(160deg,rgba(0,32,105,.45),rgba(0,0,0,0));border-radius:20px;padding:20px 22px;margin-top:22px}
.burn h3{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:8px 0 8px}
.burn p{color:var(--ink2);font-size:14.5px;line-height:1.55}
/* ---- contatti ---- */
.cg{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cg .card{padding:26px 24px}
.cg .ico{width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.cg .ico svg{width:18px;height:18px}
.cg h3{font-size:18px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.cg p{color:var(--mute);font-size:14.5px;line-height:1.6}
.cg p b{color:#fff;font-weight:600}
/* ---- landing ---- */
.lhero{position:relative;padding:calc(110px + env(safe-area-inset-top)) 0 60px;overflow:hidden}
.lhero .bg{position:absolute;inset:0}
.lhero .bg img{width:100%;height:100%;object-fit:cover;opacity:.45}
.lhero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.85) 60%,#000)}
.lhero .in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:start}
.lhero .d1{font-size:clamp(38px,6vw,84px)}
.ck-list li{position:relative;padding:10px 0 10px 30px;border-top:1px solid var(--line);color:var(--ink2);font-size:15.5px;line-height:1.5}
.ck-list li:last-child{border-bottom:1px solid var(--line)}
.ck-list li::before{content:"";position:absolute;left:0;top:14px;width:16px;height:16px;border-radius:50%;border:1px solid var(--line2);background:url("data:image/svg+xml;utf8,") center/9px no-repeat}
.ck-list.no li::before{background:none}
.ck-list.no li::after{content:"";position:absolute;left:5px;top:21px;width:6px;height:1.5px;background:var(--mute)}
.stick{position:fixed;left:0;right:0;bottom:0;z-index:700;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));background:rgba(0,0,0,.8);backdrop-filter:blur(14px);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;transform:translateY(110%);transition:transform .5s var(--ease)}
.stick.show{transform:none}
.stick b{display:block;font-size:14px}.stick small{color:var(--mute);font-size:12px}
.wa{position:fixed;right:18px;bottom:18px;z-index:650;width:54px;height:54px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 40px rgba(0,0,0,.5);transition:transform .4s var(--ease)}
.wa:hover{transform:translateY(-3px)}
.wa svg{width:26px;height:26px;fill:#fff}
body.landing .wa{bottom:86px}
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip .in2{max-width:var(--max);margin:0 auto;padding:22px var(--gutter);display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
/* ---- responsive Sirio ---- */
@media(max-width:1100px){.kp{grid-template-columns:repeat(2,1fr)}.tl{grid-template-columns:repeat(3,1fr)}.lwall{grid-template-columns:repeat(3,1fr)}}
@media(max-width:920px){.cs{grid-template-columns:1fr 1fr}.me{grid-template-columns:1fr}.cg{grid-template-columns:1fr}.lhero .in{grid-template-columns:1fr}.cbox .kp{grid-template-columns:1fr 1fr}.strip .in2{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){
.cs{grid-template-columns:1fr}.tl{grid-template-columns:1fr 1fr}.lwall{grid-template-columns:1fr 1fr}.kp{grid-template-columns:1fr 1fr}
.cd .u{min-width:0;flex:1 1 calc(50% - 10px);padding:14px 8px 12px}.cd .n{font-size:34px}
.me .facts{grid-template-columns:1fr}
.cbox{margin:10px auto;border-radius:20px}.cbox .hd{min-height:200px}
.gal{grid-template-columns:repeat(2,1fr)}
.strip .in2{grid-template-columns:1fr 1fr}
.search{height:48px}
.brand .wm{display:none}
.intro .pic{width:56px}
.hero.c .in{padding-bottom:200px}
.stick{flex-direction:column;align-items:stretch;text-align:center}.stick .btn{width:100%}
}
/* ---- consent ---- */
.consent .bx{flex:none;width:18px;height:18px;border-radius:5px;border:1px solid var(--line2);position:relative;transition:background .3s,border-color .3s}
.consent input:checked~.bx{background:#fff;border-color:#fff}
.consent input:checked~.bx::after{content:"";position:absolute;inset:4px;border-radius:2px;background:#000}
.consent input.err~.bx{border-color:#e2a0a0}
/* ---- fix: immagini grandi nella griglia servizi ---- */
.ug .ph{position:relative}
.ug .ph img{position:absolute;inset:0;width:100%;height:100%}
.ug .card:nth-child(1) .ph{max-height:460px}
.cs .clogo,.cbox .mlogo{background:transparent;padding:0}
.cs .clogo[src*="castiglioni"],.cbox .mlogo[src*="castiglioni"]{background:#fff;padding:3px 7px}
.hero.home .in>.ey,.hero.home .in>.d1,.hero.home .in>.lead,.hero.home .in>.ctas{max-width:min(100%,760px)}
@media(min-width:921px){.hero.home .in>.d1{max-width:100%}.hero.home .in>.lead{max-width:56%}}
/* ---- hero: statistiche in flusso sotto il contenuto ---- */
.hero{flex-direction:column;justify-content:flex-end;align-items:stretch}
.hero .in{padding-bottom:clamp(34px,5vw,64px)}
.hero .stats{position:relative;left:auto;right:auto;bottom:auto;z-index:3}
.hero.home .d1{font-size:clamp(44px,7vw,112px)}
@media(max-width:640px){.hero .in{padding-bottom:30px}}
.field label.fdrop{text-transform:none;letter-spacing:0;color:#fff;font-weight:400;font-size:14px}
.field label.fdrop small{text-transform:none;letter-spacing:0}
/* ---- Sezioni che entrano nella finestra ----
Sui portatili (altezza fino a 820px) hero e titoli si ridimensionano anche in base all'altezza dello schermo.
Su schermi più alti non cambia nulla. */
@media (min-width:921px){
.me{align-items:start}
.me .ph{position:sticky;top:104px;max-height:calc(100svh - 136px)}
}
@media (min-width:921px) and (max-height:820px){
.hero .in{padding-top:clamp(92px,15vh,130px);padding-bottom:clamp(28px,6vh,60px)}
.hero .d1{margin:clamp(12px,2.4vh,22px) 0 clamp(14px,2.8vh,24px)}
.hero .lead{margin-bottom:clamp(18px,4vh,34px)}
.d1{font-size:clamp(44px,min(9vw,13.5vh),132px)}
.hero.home .d1{font-size:clamp(44px,min(7vw,12.6vh),112px)}
.lhero .d1{font-size:clamp(38px,min(6vw,10.5vh),84px)}
.d2{font-size:clamp(30px,min(5.6vw,9vh),80px)}
.man .d2{font-size:clamp(30px,min(5.2vw,8.6vh),74px)}
}
/* ---- Moduli più compatti (schermi larghi) ----
Campi a 45px, spazi ridotti: il modulo dell'analisi passa da 1056px a 800px. Su mobile non cambia nulla. */
@media (min-width:921px){
.form{gap:12px}
.fs{padding:clamp(22px,2.4vw,30px)}
.fs .fh{gap:3px;margin-bottom:10px}
.fs .fh h3{font-size:20px;line-height:1.2}
.fgrid{gap:12px 14px}
.field{gap:5px}
.inp{padding:10px 14px;font-size:15px}
textarea.inp{min-height:96px}
.fs .grp{margin:2px 0 0;padding-top:10px}
.consent{font-size:12.5px;line-height:1.4}
.status{min-height:0;margin-top:0}
.opt{padding:12px 14px}
.fdrop{padding:10px 14px}
.fdrop .fi{width:32px;height:32px}
}
/* Campo a riga intera nei moduli a due colonne (sotto i 921px). */
.field.full{grid-column:1/-1}
/* ---- Modulo dell'analisi a tutta larghezza ----
Sezione con classe split-wide (titolo e spunte in alto) e modulo con classe form-wide (9 campi su 3 colonne).
Il modulo sta tutto in una finestra di 645px. Solo da 921px in su: su mobile resta in colonna. */
@media (min-width:921px){
.split-wide{grid-template-columns:1fr;gap:28px}
.split-wide .sticky{position:static;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);column-gap:clamp(28px,5vw,80px);align-items:end}
.split-wide .sticky>*{grid-column:1}
.split-wide .sticky>.ck-list{grid-column:2;grid-row:1/span 3}
.form-wide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px;align-items:start}
.form-wide>.fh,.form-wide>.status,.form-wide>.fok{grid-column:1/-1}
.form-wide>.grp{display:none}
.form-wide>.fgrid{display:contents}
.form-wide .field{grid-column:auto}
}
/* Sezione dell'analisi senza elenco: titolo e testo occupano tutta la larghezza. */
@media (min-width:921px){.split-wide .sticky-solo{grid-template-columns:minmax(0,1fr)}.split-wide .sticky-solo>*{grid-column:1}}
/* ---- Blocchi foto e testo (servizi, caso TILT) ----
Più bassi, per vederli interi: titolo più piccolo, elenco su due colonne, numeri affiancati, pulsante accanto ai numeri.
Tra un blocco e l'altro c'è uno spazio vero. Da 921px in su: sotto, i blocchi restano in colonna come prima. */
@media (min-width:921px){
.xp+.xp{margin-top:clamp(48px,5.6vw,80px)}
.xp .tx{padding:clamp(24px,2.6vw,40px)}
.xp .meta{margin-bottom:16px}
.xp h3{font-size:clamp(24px,2.5vw,34px)}
.xp h3+p{margin-top:16px}
.xp p{font-size:15.5px;line-height:1.55}
.xp .ck-list{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;margin-top:18px}
.xp .ck-list li{padding:8px 0 8px 28px;font-size:14.5px;line-height:1.4}
.xp .ck-list li::before{top:10px}
.xp .ck-list li:last-child{border-bottom:0}
.xp .foot{padding-top:20px;gap:14px 20px}
.xp .pz{flex:1 1 0;min-width:0}
.xp .pz b{font-size:26px}
.xp .pz span{display:block;margin-top:6px;font-size:12px;letter-spacing:.12em;line-height:1.35}
.xp .foot .btn{flex:none}
}
/* Blocchi foto e testo sugli schermi bassi: ancora più compatti. */
@media (min-width:921px) and (max-height:820px){
.xp .tx{padding:clamp(20px,3.4vh,32px) clamp(24px,2.6vw,40px)}
.xp .meta{margin-bottom:12px}
.xp h3+p{margin-top:12px}
.xp p{font-size:15px}
.xp .ck-list{margin-top:14px}
.xp .ck-list li{padding:6px 0 6px 28px;font-size:14px}
.xp .ck-list li::before{top:8px}
.xp .foot{padding-top:14px}
}
/* ---- Ritmo verticale tra le sezioni ----
Lo spazio sta solo sotto ogni sezione (--gap-sec), così tra due sezioni di fila è sempre lo stesso. Sopra solo dopo hero,
mosaico, manifesto e striscia numeri, che non hanno spazio sotto. Da 921px in su cresce con l'altezza dello schermo
(circa un quarto): 142px a 645, 176 a 800, 200 al massimo. Su mobile 90px. */
:root{--gap-sec:clamp(110px,30vw,150px)}
@media (min-width:921px){:root{--gap-sec:clamp(180px,max(13vw,30vh),260px)}}
.sec{padding-top:0;padding-bottom:var(--gap-sec)}
.sec.sec-t,.hero+.sec,.lhero+.sec,.mos+.sec,.man+.sec,.strip+.sec{padding-top:var(--gap-sec)}
.sec+.closing{padding-top:calc(var(--gap-sec) * .5)}
/* ---- Metodo: cinque passi con numeri grandi ----
Titolo come le altre sezioni, numeri in evidenza con una linea sotto, testo leggibile. Da 1000px cinque colonne. */
/* Metodo: le cinque fasi salgono lungo una curva di crescita. Da 1000 px in su le colonne sono larghe un quinto esatto, quindi i punti cadono allo 0, 20, 40, 60, 80 per cento della larghezza; --f è l'altezza del punto (i valori corrispondono alla curva disegnata in front-page.php). Sotto i 1000 px diventa una linea verticale. */
.steps-wrap{position:relative;margin-top:clamp(36px,4vw,64px)}
.steps{list-style:none;position:relative;display:grid;gap:0}
.steps li{position:relative;padding:0 0 36px 34px}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:"";position:absolute;left:0;top:10px;width:12px;height:12px;border-radius:50%;background:var(--el)}
.steps li:not(:last-child)::after{content:"";position:absolute;left:5px;top:10px;bottom:-10px;width:2px;background:var(--el)}
.steps li:last-child::before{left:-3px;top:8px;width:18px;height:18px;background:#fff;box-shadow:var(--glow)}
.steps .n{display:block;font-size:clamp(44px,4.4vw,68px);font-weight:700;letter-spacing:-.04em;line-height:1;margin-bottom:14px}
.steps li:nth-child(1) .n{color:rgba(255,255,255,.5)}
.steps li:nth-child(2) .n{color:rgba(255,255,255,.62)}
.steps li:nth-child(3) .n{color:rgba(255,255,255,.75)}
.steps li:nth-child(4) .n{color:rgba(255,255,255,.88)}
.steps li:last-child .n{font-size:clamp(60px,6.4vw,100px);letter-spacing:-.05em}
.steps h3{font-size:clamp(20px,1.8vw,26px);font-weight:600;letter-spacing:-.02em;line-height:1.15;margin-bottom:10px}
.steps p{font-size:16px;line-height:1.55;color:var(--ink2)}
.steps-line{display:none}
@media (min-width:1000px){
.steps-wrap{--rise:clamp(120px,min(17vw,100vh - 480px),280px)}
.steps{grid-template-columns:repeat(5,minmax(0,1fr))}
.steps li,.steps li:last-child{padding:calc(var(--rise)*(1 - var(--f)) + 28px) clamp(18px,2.2vw,36px) 0 0}
.steps li:nth-child(1){--f:0}.steps li:nth-child(2){--f:.1}.steps li:nth-child(3){--f:.25}.steps li:nth-child(4){--f:.48}.steps li:nth-child(5){--f:.78}
.steps li::before{left:-6px;top:calc(var(--rise)*(1 - var(--f)) - 6px)}
.steps li:last-child::before{left:-9px;top:calc(var(--rise)*(1 - var(--f)) - 9px)}
.steps li:not(:last-child)::after{display:none}
.steps li.rv{transform:none}
.steps li:nth-child(2){--d:.3s}.steps li:nth-child(3){--d:.6s}.steps li:nth-child(4){--d:.9s}.steps li:nth-child(5){--d:1.2s}
.steps-line{display:block;position:absolute;left:0;right:0;top:0;height:var(--rise);pointer-events:none}
.steps-line.rv{opacity:1;transform:none}
.steps-line svg{display:block;width:100%;height:100%;overflow:visible;clip-path:inset(-12px 100% -12px 0);transition:clip-path 1.9s var(--ease2)}
.steps-line.in svg{clip-path:inset(-12px 0 -12px 0)}
}
@media (prefers-reduced-motion:reduce){.steps-line svg{clip-path:none;transition:none}.steps li{--d:0s}}
/* ---- Sezione dell'analisi: il punto di arrivo della pagina ----
Blocco grande con alone blu, bordo e puntinatura (come il vecchio decennale). Il modulo è una scheda scura sopra,
con campi più alti, messa a fuoco blu e pulsante grande. */
.cta-box{position:relative;overflow:hidden;border:1px solid var(--line2);border-radius:28px;padding:clamp(36px,5.4vw,80px);background:radial-gradient(90% 70% at 50% 0%,rgba(0,32,105,.62),#000 72%)}
.cta-box::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,");opacity:.5;pointer-events:none}
.cta-box>*{position:relative;z-index:1}
.cta-box .split-wide{gap:clamp(28px,3.6vw,48px)}
.cta-center .sticky{text-align:center}
.cta-center .lead{margin-left:auto;margin-right:auto}
.form.fs{padding:clamp(24px,3vw,40px);background:rgba(4,4,8,.78);border:1px solid var(--line2);box-shadow:0 40px 90px -40px rgba(0,0,0,.9);backdrop-filter:blur(6px)}
.form.fs .field label{color:var(--ink2)}
.form.fs .inp{padding:12px 16px;border-radius:var(--r-s);border-color:rgba(255,255,255,.22)}
.form.fs .inp:focus{border-color:var(--el2);box-shadow:0 0 0 3px rgba(47,107,255,.28)}
.form .fbar .btn{height:52px;font-size:16px;box-shadow:0 14px 44px -14px rgba(143,176,255,.6)}
.form.fs .consent{font-size:13.5px;color:var(--ink2)}
.form.fs .consent a{text-decoration:underline;text-underline-offset:3px}
.cta-box .sticky h2{margin:16px 0 20px}
.cta-center .sticky>*{justify-self:center}
@media (min-width:921px) and (max-height:820px){
.cta-box .sticky h2{margin:12px 0 14px}
}
/* Barra di invio: privacy a sinistra e pulsante a destra, separati dai campi da una linea e da uno spazio. */
.form .fbar{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 32px;margin-top:clamp(8px,1vw,14px);padding-top:clamp(16px,1.8vw,22px);border-top:1px solid var(--line)}
.form .fbar .consent{flex:1 1 320px;align-items:center}
.form .fbar .btn{flex:0 0 auto;width:auto;min-width:min(100%,320px)}
@media (max-width:640px){
.cta-box{padding:28px 16px}
.form.fs{padding:22px 18px}
.form .fbar .btn{width:100%;min-width:0}
}
/* "Cosa facciamo": titolo e pulsante seguono lo scroll mentre la lista a destra, più lunga, scorre. Da 921px in su. */
@media (min-width:921px){
.nl{align-items:start}
.nl .sticky{position:sticky;top:110px}
}
/* Le colonne fisse di Contatti e landing sono alte da 610 a 680px: sotto gli 820px di altezza non restano fisse,
altrimenti la parte in fondo non si vedrebbe finché non finisce la sezione. */
@media (max-height:820px){
.split .sticky{position:static}
}
/* Schede dei casi: area con il logo per chi non ha foto né screenshot, così non resta un vuoto. */
.cs .ph.lg{background:radial-gradient(90% 90% at 50% 100%,rgba(0,32,105,.7),#07070a 70%);display:flex;align-items:center;justify-content:center}
.cs .ph.lg img{width:auto;height:56px;max-width:60%;object-fit:contain;transform:none}
.cs .ph.lg img[src*="castiglioni"]{background:#fff;border-radius:10px;padding:9px 16px}
.cs .ph.lg::after{display:none}
.cs .card:has(.ph.lg) .clogo{display:none}
/* ---- Accessibilità: tastiera, errori, movimento ridotto ---- */
.skip{position:fixed;left:16px;top:-80px;z-index:10000;padding:12px 20px;border-radius:var(--r-s);background:#fff;color:#000;font-weight:600;font-size:15px;transition:top .2s}
.skip:focus{top:16px}
main:focus{outline:none}
/* Anello di focus visibile su ogni elemento interattivo, per chi usa la tastiera. */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--el2);outline-offset:3px}
.inp:focus-visible{outline:none;border-color:var(--el2);box-shadow:0 0 0 3px rgba(47,107,255,.35)}
.consent input:focus-visible~.bx{outline:2px solid var(--el2);outline-offset:3px}
.fdrop:focus-within{border-color:var(--el2);outline:2px solid var(--el2);outline-offset:2px}
.inp[aria-invalid="true"]{border-color:#e2a0a0}
.fnote{font-size:13px;color:var(--mute);margin-top:2px}
.form-wide>.fnote{grid-column:1/-1;margin:0}
.fbar .ferr{flex:1 1 100%;order:3}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.hero-rv{transition:none;opacity:1;transform:none}
.btn,.card,.skip{transition:none}
}
/* Stesso aspetto per tutti i moduli: l'allegato come i campi, etichetta dell'allegato bianca, barra di invio a tutta larghezza nei moduli stretti. */
.form.fs .field label.fdrop{color:#fff}
.form.fs .fdrop{border-radius:var(--r-s);padding:11px 16px;background:#050506}
.form:not(.form-wide) .fbar .consent,.form:not(.form-wide) .fbar .btn{flex:1 1 100%;width:100%;min-width:0}
/* Pagine legali e generiche (page.php): colonna di lettura, titoli di sezione, elenchi. */
.legale{max-width:760px;margin-top:clamp(28px,4vw,48px);color:var(--ink2);font-size:16px;line-height:1.7}
.legale .agg{font-size:14px;color:var(--mute);margin:0 0 28px}
.legale h2{font-size:clamp(21px,2vw,26px);line-height:1.25;font-weight:600;color:var(--ink);letter-spacing:-.01em;margin:clamp(36px,4vw,52px) 0 14px}
.legale h3{font-size:17px;line-height:1.3;font-weight:600;color:var(--ink);margin:26px 0 10px}
.legale p{margin:0 0 16px}
.legale ul{margin:0 0 18px;padding-left:22px;list-style:disc}
.legale li{margin:0 0 8px;padding-left:4px}
.legale li::marker{color:var(--el2)}
.legale strong{color:var(--ink);font-weight:600}
.legale a{color:var(--el2);text-decoration:underline;text-underline-offset:3px}
.legale a:hover{color:#fff}
/* Pannello di consenso cookie (assets/js/consenso.js): compare solo se è configurato Google Tag o Meta Pixel. */
.cc-open{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.cc-open:hover{color:#fff}
.cc{position:fixed;left:16px;bottom:16px;z-index:2000;width:min(540px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;background:var(--panel);border:1px solid var(--line2);border-radius:20px;padding:24px 24px 22px;box-shadow:0 24px 70px rgba(0,0,0,.65);color:var(--ink2);font-size:14px;line-height:1.55}
.cc[hidden]{display:none}
.cc h2{font-size:17px;line-height:1.3;font-weight:600;color:var(--ink);margin:0 36px 10px 0;letter-spacing:0}
.cc h2:focus{outline:none}
.cc p{margin:0 0 18px}
.cc a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.cc-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cc-x:hover{background:rgba(255,255,255,.08)}
.cc-b{display:flex;gap:10px;flex-wrap:wrap}
.cc-b .btn{flex:1 1 140px;height:46px;padding:0 16px;font-size:14px}
.cc-rows{display:grid;gap:10px;margin:0 0 18px}
.cc-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-s);background:#050506}
.cc-row b{display:block;color:var(--ink);font-weight:600;font-size:14px;margin-bottom:2px}
.cc-row span{display:block;font-size:13px;line-height:1.45;color:var(--mute)}
.cc-row input{appearance:none;-webkit-appearance:none;flex:none;width:46px;height:28px;border-radius:999px;background:rgba(255,255,255,.16);position:relative;cursor:pointer;margin:2px 0 0;transition:background .25s}
.cc-row input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .25s}
.cc-row input:checked{background:var(--el)}
.cc-row input:checked::after{transform:translateX(18px)}
.cc-row input:disabled{opacity:.55;cursor:not-allowed}
.cc-row input:focus-visible,.cc-x:focus-visible{outline:2px solid var(--el2);outline-offset:3px}
@media(max-width:640px){.cc{left:10px;right:10px;bottom:10px;width:auto;padding:20px 18px 18px}.cc-b .btn{flex:1 1 100%}}
@media(prefers-reduced-motion:reduce){.cc-row input,.cc-row input::after{transition:none}}
/* A capo: i titoli si dividono in righe equilibrate, i testi evitano l'ultima riga con una sola parola. Il resto lo fa tipo() in site.js, dove il browser non arriva (preposizioni e articoli a fine riga, numeri separati dall'unità). */
h1,h2,h3,h4,h5,.d1,.d2,.d3,.ey{text-wrap:balance}
p,li,blockquote,figcaption,.lead{text-wrap:pretty;hyphens:none}
.center .lead,.cta-center .lead,.closing .lead,.hero.c .lead,.center>p{text-wrap:balance}
/* Titoli nelle colonne laterali: grandi come prima andavano a capo una parola per riga. */
@media(min-width:921px){
.split:not(.split-wide) .d2,.me .d2{font-size:clamp(32px,4.1vw,64px)}
.lhero .d1{font-size:clamp(34px,min(4.8vw,10.5vh),72px)}
}
@media(max-width:640px){.d1,.hero.home .d1,.lhero .d1{font-size:clamp(30px,9vw,60px)}}
/* Griglia dei settori di Servizi: quattro colonne solo dove c'è spazio. */
@media(min-width:921px){.dg.dg4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){.dg.dg4{grid-template-columns:minmax(0,1fr)}}
/* Intestazioni con titolo a sinistra e testo a destra: la colonna del titolo è più larga, così sta su due righe. */
@media(min-width:921px){.split-head{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:end}}
/* Scala degli spazi interni: un solo valore per ogni tipo di distanza, su tutte le pagine.
--sp-ey scritta piccola e titolo · --sp-tt titolo e testo di sezione · --sp-card-tt titolo e testo nelle schede · --sp-p tra due paragrafi · --sp-block testo e blocco o pulsante sotto
--sp-after griglia e pulsante sotto · --sp-head intestazione e contenuto · --sp-grid tra le schede · --sp-card margine interno delle schede.
Lo spazio tra le sezioni è --gap-sec. Valori a 1227 di larghezza: 20, 32, 16, 18, 37, 52, 64, 23, 26. */
:root{--sp-ey:clamp(16px,1.6vw,24px);--sp-tt:clamp(24px,2.6vw,40px);--sp-card-tt:clamp(14px,1.3vw,18px);--sp-p:18px;--sp-block:clamp(28px,3vw,44px);--sp-after:clamp(36px,4.2vw,64px);--sp-head:clamp(44px,5.2vw,80px);--sp-grid:clamp(14px,1.9vw,28px);--sp-card:clamp(20px,2.1vw,30px)}
.cs,.dg,.ug,.cg,.fg,.g3,.g4,.me .facts,.grid.g2{gap:var(--sp-grid)}
.dg,.ug,.fg,.faq,.steps-wrap{margin-top:var(--sp-head)}
.cs .tx{padding:var(--sp-card);gap:0}
.cs h3{margin-top:18px;line-height:1.08}
.cs .wh{margin-top:12px;line-height:1.5}
.cs p{margin:18px 0 26px}
.cs .met{padding-top:20px;gap:14px}
.cs .met small{margin-top:8px;line-height:1.4}
.dg .tx,.ug .tx,.cg .card,.me .facts .card{padding:var(--sp-card)}
.me .facts{margin-top:var(--sp-block)}
.me .facts p{margin-top:var(--sp-card-tt);line-height:1.55}
.search{margin-bottom:var(--sp-grid)}
.filters{margin-bottom:var(--sp-block)}
.man .btn{margin-top:var(--sp-block)}
.closing .lead{margin-top:var(--sp-tt)}
.closing .btn{margin-top:var(--sp-block)}
.burn{margin-top:var(--sp-block);padding:var(--sp-card)}
.dg .tx,.ug .tx{gap:var(--sp-card-tt)}
.dg p{margin-top:0}
.cg h3,.fg h4,.pr h4,.nl .it h4,.steps h3{margin-bottom:var(--sp-card-tt)}
.xp h3+p{margin-top:var(--sp-card-tt)}
.burn h3{margin:12px 0 0}
.mos .ov p{margin-top:var(--sp-tt)}
.hero .d1{margin-bottom:var(--sp-tt)}
/* Hero sugli schermi bassi: il titolo ha più aria sotto, quindi si recupera lo spazio sopra e la striscia dei numeri resta nello schermo. */
@media (min-width:921px) and (max-height:820px){.hero.home .d1{margin-top:0}.hero .in{padding-top:clamp(80px,13vh,130px)}}
/* Titoli in minuscolo: le scritte restano in maiuscolo solo per etichette piccole e logo. Con le lettere basse serve più interlinea. */
.d1,.d2,.d3,.ug h3,.xp h3,.dg h3,.cs h3,.cbox .hd h2,.dv h3,.ev h3,.mob a.big{text-transform:none}
.d1,.d2{letter-spacing:-.03em;line-height:1.04}
.d3{letter-spacing:-.025em;line-height:1.08}
.man .d2 .lo{letter-spacing:-.025em}
.xp h3{letter-spacing:-.025em;line-height:1.1}
.dg h3,.cs h3,.ug h3,.dv h3{letter-spacing:-.02em;line-height:1.15}
.cbox .hd h2{letter-spacing:-.03em;line-height:1.06}
/* Testi brevi in colonne strette: righe di lunghezza simile, senza una parola sola a metà. */
.steps p,.cg p,.dg p,.ug p,.fg p,.nl .it p,.me .facts p,.pr p{text-wrap:balance}
/* Blocchi foto e testo di Servizi e TILT: più margine interno e più distanza tra le parti, a ogni altezza di schermo. */
@media (min-width:921px){
.xp+.xp{margin-top:clamp(64px,7vw,110px)}
.xp .tx{padding:clamp(32px,3.6vw,56px)}
.xp .meta{margin-bottom:var(--sp-ey)}
.xp h3+p{margin-top:clamp(18px,1.7vw,24px)}
.xp p{font-size:15.5px;line-height:1.6}
.xp .ck-list{margin-top:clamp(24px,2.4vw,36px);column-gap:clamp(24px,2.6vw,40px)}
.xp .ck-list li{padding:12px 0 12px 30px;font-size:14.5px;line-height:1.45}
.xp .ck-list li::before{top:14px}
.xp .foot{padding-top:clamp(24px,2.4vw,36px);gap:24px}
.xp .pz span{margin-top:8px;line-height:1.4}
}
@media (max-width:920px){
.xp .meta{margin-bottom:var(--sp-ey)}
.xp h3+p{margin-top:18px}
.xp .ck-list{margin-top:26px}
.xp .foot{padding-top:28px;gap:24px}
}
.ck-list li{text-wrap:balance}
/* Blocchi di Servizi e TILT, tutto visibile insieme: foto stretta con l'etichetta sopra, testo largo, elenco su due colonne, numeri e pulsante sulla stessa riga. Nessun testo tolto. */
@media (min-width:921px){
.xp{position:relative;grid-template-columns:minmax(0,.36fr) minmax(0,1fr)}
.xp:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,.36fr)}
.xp .ph{min-height:0}
.xp .tx{position:static;padding:clamp(28px,2.9vw,44px)}
.xp .meta{position:absolute;top:16px;left:16px;z-index:3;margin:0;max-width:calc(26.5% - 32px)}
.xp:nth-child(even) .meta{left:auto;right:16px}
.xp .meta .pill{white-space:normal;height:auto;min-height:26px;padding:5px 11px;line-height:1.35}
.xp h3{font-size:clamp(24px,2.4vw,34px)}
.xp h3+p{margin-top:14px}
.xp .ck-list{margin-top:20px;column-gap:clamp(24px,2.6vw,40px)}
.xp .ck-list li{padding:9px 0 9px 28px;font-size:14px;line-height:1.42}
.xp .ck-list li::before{top:11px}
.xp .foot{padding-top:22px;gap:18px 28px;flex-wrap:nowrap;align-items:center}
.xp .foot>div:first-child{flex:1 1 auto;min-width:0;flex-wrap:nowrap!important}
.xp .foot .btn{flex:none;max-width:250px;white-space:normal;height:auto;min-height:48px;padding:10px 22px;text-align:center;line-height:1.25}
}
@media (min-width:921px){
.xp .tx{padding:clamp(30px,3.2vw,48px)}
.xp h3+p{margin-top:16px}
.xp .ck-list{margin-top:24px}
.xp .ck-list li{padding:10px 0 10px 28px}
.xp .ck-list li::before{top:12px}
.xp .foot{padding-top:26px}
.xp .meta .pill{letter-spacing:.06em}
.xp .foot .btn{max-width:270px;text-wrap:balance}
}
@media (min-width:921px){.xp .meta .pill{text-wrap:balance;border-radius:14px}}
/* Etichetta dei blocchi sempre su una riga: sopra la foto da 1220 px in su, sopra il titolo quando la foto è troppo stretta per contenerla. */
@media (min-width:921px){.xp .meta{max-width:none}.xp .meta .pill{white-space:nowrap;height:26px;min-height:0;padding:0 11px;border-radius:999px;text-wrap:nowrap}}
@media (min-width:1220px){.xp{grid-template-columns:minmax(0,.4fr) minmax(0,1fr)}.xp:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,.4fr)}}
@media (min-width:921px) and (max-width:1219px){.xp .meta{position:static;margin:0 0 14px}}
@media (min-width:1220px){.xp .meta{top:12px;left:12px}.xp:nth-child(even) .meta{left:auto;right:12px}#consulenza{grid-template-columns:minmax(0,.36fr) minmax(0,1fr)}}
/* Effetti in movimento (assets/js/movimento.js). Con la riduzione del movimento il file non parte e qui non si attiva nulla. */
.tv{opacity:1!important;transform:none!important;transition:none!important}
.tw{display:inline-block!important;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.tw>span{display:inline-block!important;transform:translateY(118%);transition:transform .85s var(--ease);transition-delay:calc(var(--d,0s) + var(--i,0)*.035s)}
.tv.in .tw>span,body.ready .tv.hero-rv .tw>span{transform:none}
.tv.hero-rv.d1x{--d:.15s}
@media(hover:hover) and (pointer:fine){
.card::before,.xp::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(47,107,255,.2),transparent 68%)}
.card:hover::before,.xp:hover::before{opacity:1}
}
.cur-apri{position:fixed;left:0;top:0;z-index:790;pointer-events:none;width:0;height:0}
.cur-apri::before{content:"Apri";position:absolute;left:-34px;top:-34px;width:68px;height:68px;border-radius:50%;background:#fff;color:#000;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5);transition:opacity .2s,transform .3s var(--ease)}
.cur-apri.on::before{opacity:1;transform:scale(1)}
/* Manifesto che si accende: il titolo non fa l'entrata normale, le parole si schiariscono con lo scorrimento (movimento.js). */
.man .d2.mw-on{opacity:1!important;transform:none!important;transition:none!important}
.man .d2.mw-on .lo{color:var(--ink2);font-weight:400}
.man .d2>span:not(.lo){font-weight:800;color:#fff}
.man .d2 .mw{display:inline-block!important;will-change:opacity}
/* Hero della home: titolo, testo e pulsanti centrati in altezza tra il menu e la striscia dei numeri, sempre allineati a sinistra. */
.hero.home .in{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding-top:calc(72px + 20px);padding-bottom:20px}
.hero.home .in>.d1{margin-top:0}
.hero.home .in>.ctas{flex:none}
/* Stessa regola per le hero di Servizi, Casi studio e Contatti: blocco centrato in altezza sotto il menu, allineato a sinistra. */
.hero.sub .in{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding-top:calc(72px + 20px);padding-bottom:20px}
.hero.sub .in>.d1{margin-top:0}
.hero.sub .in>.ctas,.hero.sub .in>.meta{flex:none}
.hero.sub .in>:last-child{margin-bottom:0}
/* Hero uguali su tutte le pagine: stessa altezza della parte con la foto e stesso titolo della home. La home è alta come lo schermo e contiene la striscia dei numeri, quindi le pagine senza striscia sono più basse della sua altezza. */
.hero.sub{--stats-h:109px;min-height:calc(100vh - var(--stats-h));min-height:calc(100svh - var(--stats-h))}
.hero.sub:has(.stats){min-height:100vh;min-height:100svh}
@media(max-width:920px){.hero.sub{--stats-h:119px}}
@media(max-width:640px){.hero.sub{--stats-h:173px}}
@media(min-width:641px){.hero.sub .d1{font-size:clamp(44px,min(7vw,12.6vh),112px)}}
/* Indice dei servizi nella hero di Servizi: tutti su una riga; dove non c'è spazio, due file ordinate da tre. */
@media (min-width:921px){.hero.sub .meta{flex-wrap:nowrap;gap:7px;margin-top:0}.hero.sub .meta .pill{text-transform:none;letter-spacing:0;font-size:12.5px;height:30px;padding:0 11px;white-space:nowrap;flex:none}}
@media (min-width:921px) and (max-width:1179px){.hero.sub .meta{display:grid;grid-template-columns:repeat(3,max-content)}}
/* A capo dei testi: tutti i paragrafi, gli elenchi e i testi introduttivi si bilanciano (righe di lunghezza simile, mai una riga corta in coda).
Il browser bilancia fino a sei righe; oltre, il testo scorre normalmente. Le pagine legali restano su "pretty": sono testi lunghi da leggere. */
p,li,.lead,blockquote,figcaption,.faq .a p{text-wrap:balance}
.legale p,.legale li{text-wrap:pretty}
/* Schede dei casi allineate: le schede della stessa riga condividono le righe (foto, etichetta, titolo, settore, testo, numeri), quindi gli stessi elementi stanno alla stessa altezza anche se i testi hanno lunghezze diverse. Usa subgrid; dove non è supportato resta la scheda di prima. */
@supports (grid-template-rows: subgrid){
.cs{row-gap:0;margin-bottom:calc(var(--sp-grid)*-1)}
.cs .card{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:span 6;row-gap:0;margin-bottom:var(--sp-grid);align-content:start}
.cs .tx{display:contents}
.cs .ph{grid-row:1}
.cs .meta{grid-row:2;margin:var(--sp-card) var(--sp-card) 0}
.cs h3{grid-row:3;margin:18px var(--sp-card) 0}
.cs .wh{grid-row:4;margin:12px var(--sp-card) 0}
.cs p{grid-row:5;margin:18px var(--sp-card) 26px}
.cs .met{grid-row:6;align-self:start;margin:0 var(--sp-card) var(--sp-card)}
.cs .tags{display:none}
/* Scheda senza foto: riquadro vuoto con lo stesso fondo blu. Prende l'altezza della foto delle schede vicine; se nessuna della riga ha la foto, non occupa spazio. */
.cs .ph.vuoto{aspect-ratio:auto;min-height:0;background:radial-gradient(90% 90% at 50% 100%,rgba(0,32,105,.7),#07070a 70%)}
.cs .ph.vuoto::after{display:none}
}
/* Logo TILT al posto della foto nel blocco di Casi studio: stesso fondo blu delle schede con solo logo. */
.xp .ph.lg{background:radial-gradient(90% 90% at 50% 100%,rgba(0,32,105,.7),#07070a 70%);display:flex;align-items:center;justify-content:center}
.xp .ph.lg img{position:static;width:68%;max-width:300px;height:auto;object-fit:contain;transform:none;opacity:1}
.xp .ph.lg::after{display:none}
.cbox .hd .mlogo[src*="tilt"]{background:transparent;padding:0;height:34px;border-radius:0}
/* Logo orizzontale (simbolo e scritta), file fornito da Simone: nel menu e nell'intro. */
.brand svg.logo-or{width:auto;height:42px;flex:none;color:#fff;display:block}
.intro .pic{width:clamp(240px,44vw,600px);height:auto;animation:logoin 1s var(--ease) .1s both}
.intro .pic svg{display:block;width:100%;height:auto}
@keyframes logoin{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@media(max-width:640px){.brand svg.logo-or{height:34px}.intro .pic{width:min(72vw,320px)}}
@media (prefers-reduced-motion:reduce){.intro .pic{animation:none}}
/* Font dei titoli: Montserrat, il più vicino alla scritta del logo. Il testo resta in Inter Tight. */
:root{--font-t:"Montserrat","Inter Tight",Inter,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif}
h1,h2,h3,h4,.d1,.d2,.d3,.h,.mob a.big{font-family:var(--font-t)}
/* Logo orizzontale nel footer del sito e in quello della landing. */
.fb svg.logo-or{display:block;width:auto;color:#fff}
.ft .fb svg.logo-or{height:clamp(54px,5vw,72px)}
footer .center .fb svg.logo-or{height:46px;margin:0 auto}
/* Mosaico della home: il paragrafo ha una larghezza massima, va centrato come titolo e link. */
.mos .ov p{margin-left:auto;margin-right:auto}
/* Titolo di Davide: un po' più piccolo, così "Ho fondato Sirio a 16 anni." sta su una riga. */
.me .d2{font-size:clamp(26px,3.5vw,52px)}
/* Logo Boccaccio39 (oro, fondo trasparente): al posto della foto nelle schede e senza riquadro bianco nella scheda aperta. */
.cbox .hd .mlogo[src*="boccaccio39"]{background:transparent;padding:0;height:34px;border-radius:0}
/* Titoli delle hero (home, Servizi, Casi studio, Contatti) più piccoli: stessa misura del titolo del manifesto.
Prima riga bold, seconda leggera in grigio, come le righe del manifesto. */
@media(min-width:641px){.hero.home .d1,.hero.sub .d1{font-size:clamp(34px,5.8vw,82px)}}
@media (min-width:921px) and (max-height:820px){.hero.home .d1,.hero.sub .d1{font-size:clamp(34px,min(5.8vw,9.6vh),82px)}}
.hero .d1 .lt{font-weight:400}
/* Titolo del mosaico: prima riga bold, seconda leggera, come nella hero. */
.mos .ov .d3 .lt{font-weight:400;color:var(--ink2)}
/* Formula bold e leggero nei titoli di sezione: la prima parte resta bold e bianca, la seconda (classe lt) va a capo in peso 400 e grigio chiaro,
come nella hero. Con la classe bl la parte leggera resta azzurra. Nei titoli con pezzi in riga (spazio tra le parti) basta mettere lt sull'ultimo. */
.d2>.lt,.d3>.lt,.h>.lt{display:block;font-weight:400;color:var(--ink2)}
.d2>.lt.bl,.d3>.lt.bl{color:var(--el2)}
.lhero .d1 .lt{font-weight:400}
/* Titoli di sezione tutti della stessa misura (4,1vw, tra 28 e 60 px: 50 px a 1227). Fanno eccezione il manifesto, che segue la hero, e il titolo di Davide, più piccolo per stare nella sua colonna. */
.d2{font-size:clamp(28px,4.1vw,60px)}
@media (min-width:921px) and (max-height:820px){.d2{font-size:clamp(28px,min(4.1vw,7.2vh),60px)}}
/* Menu su telefono e tablet: il pulsante a destra, il logo a sinistra. */
@media(max-width:920px){.tools{margin-left:auto}}
/* Telefono e tablet: aree di tocco più comode (almeno circa 40 px) senza cambiare l'aspetto. */
@media(max-width:920px){
.brand{padding:5px 0}
.pill-btn{min-height:40px}
.ft li{margin-bottom:0}.ft li a{display:block;padding:10px 0}
footer a,a.small{position:relative}
.fbot a::before,.legale-link::before,footer .center p a::before,a.small::before{content:"";position:absolute;inset:-10px -4px}
}
/* Landing su telefono: la barra fissa è alta circa 122 px (titolo e pulsante in colonna), il pulsante WhatsApp sta sopra e non finisce coperto. */
@media(max-width:640px){body.landing .wa{bottom:calc(122px + 14px + env(safe-area-inset-bottom))}}
@media(max-width:920px){.cbox .xx{width:44px;height:44px}}
/* Casi studio: "Mostra altri" sotto l'elenco (12 schede alla volta). */
.more{display:flex;flex-direction:column;align-items:center;gap:var(--sp-card-tt);margin-top:var(--sp-block)}
.more[hidden],.more [hidden]{display:none}
.more-n{color:var(--mute);font-size:13px;letter-spacing:.08em}
/* Casi studio, "Altre aziende": due bande di box (una per azienda) che scorrono in direzioni opposte. La seconda copia dell'elenco (aria-hidden) chiude il giro.
Ogni box ha larghezza minima uguale, come un muro di loghi: se arrivano i loghi si mettono al posto del nome. Con il mouse sopra le bande si fermano.
Con movimento ridotto restano ferme e i box vanno a capo. */
.bande{display:grid;gap:clamp(12px,1.4vw,18px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.banda{overflow:hidden}
.banda-tr{list-style:none;display:flex;gap:clamp(12px,1.4vw,18px);width:max-content;animation:mq 150s linear infinite;padding-right:clamp(12px,1.4vw,18px)}
.banda-inv .banda-tr{animation-direction:reverse;animation-duration:170s}
.banda:hover .banda-tr{animation-play-state:paused}
.banda-tr li{display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;flex:none;min-width:clamp(190px,19vw,270px);height:clamp(64px,6.4vw,88px);padding:0 clamp(22px,2.4vw,36px);border:1px solid var(--line2);border-radius:var(--r-s);background:var(--panel);font-family:var(--font-t);font-weight:600;font-size:clamp(15px,1.5vw,20px);letter-spacing:-.01em;color:var(--ink2);transition:border-color .3s,color .3s,background .3s}
.banda-tr li:hover{border-color:rgba(143,176,255,.6);color:#fff;background:rgba(47,107,255,.08)}
@media (prefers-reduced-motion:reduce){
.bande{-webkit-mask-image:none;mask-image:none}
.banda-tr{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
.banda-tr li[aria-hidden="true"]{display:none}
}
/* Footer: il testo sotto il logo più largo e senza bilanciamento forzato, così non resta stretto e con tagli netti. */
.ft p{max-width:46ch;text-wrap:pretty}
.ft>div:first-child p{max-width:min(46ch,100%)}
/* Blocco TILT di Casi studio senza immagine: il testo occupa tutta la larghezza. */
.xp:not(:has(.ph)){grid-template-columns:minmax(0,1fr)!important}
/* Servizi: sei blocchi più chiari. Sopra foto e presentazione, sotto elenco e numeri, separati da una linea. I blocchi scorrono normali, senza impilarsi.
Si alternano foto a sinistra e a destra. Id e ancore (#social, #web...) restano. */
.sv{border:1px solid var(--line);border-radius:28px;background:var(--panel);overflow:hidden;scroll-margin-top:96px}
.sv+.sv{margin-top:clamp(36px,4.5vw,64px)}
.sv-top{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:stretch}
.sv-r .sv-top{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.sv-r .sv-top .ph{order:2}
.sv .ph{border-radius:0;min-height:clamp(260px,30vw,400px);aspect-ratio:auto}
.sv-tx{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,4.4vw,64px)}
.sv-tx .meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--sp-card-tt)}
.sv-tx h3{font-size:clamp(26px,2.9vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-bottom:var(--sp-card-tt)}
.sv-tx p{color:var(--ink2);font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.6;max-width:54ch}
.sv-det{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,72px);align-items:start;padding:clamp(28px,3.6vw,52px) clamp(28px,4.4vw,64px);border-top:1px solid var(--line)}
.sv-det .ck-list{display:grid;grid-template-columns:1fr;margin:0}
.sv-det .ck-list li{padding:11px 0 11px 30px;font-size:15px}
.sv-det .ck-list li::before{top:14px}
.sv-det .ck-list li:first-child{border-top:0}
.sv-foot{display:flex;flex-direction:column;gap:clamp(22px,2.4vw,32px)}
.sv-foot>div{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px!important}
.sv-foot .pz{padding:16px 16px 18px;border-radius:var(--r-s);background:rgba(255,255,255,.04);border:1px solid var(--line)}
.sv-foot .pz b{display:block;font-size:clamp(22px,2.2vw,30px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.sv-foot .pz span{display:block;margin-top:8px;font-size:12px;line-height:1.4;letter-spacing:.06em;color:var(--mute)}
.sv-foot .btn{align-self:flex-start}
@media(max-width:920px){
.sv-top,.sv-r .sv-top,.sv-det{grid-template-columns:minmax(0,1fr)}
.sv-r .sv-top .ph{order:0}
.sv .ph{min-height:0;aspect-ratio:16/10}
.sv-foot>div{grid-template-columns:minmax(0,1fr)}
.sv-foot .pz{display:flex;align-items:center;gap:16px;padding:14px 16px}
.sv-foot .pz b{flex:none;min-width:84px}
.sv-foot .pz span{margin-top:0}
}
/* Telefono (13 novembre 2026, dalle schermate di Simone su iPhone): hero con più aria, striscia dei numeri sotto la prima schermata,
sezioni separate da una linea e da più spazio, moduli più larghi. */
@media(max-width:640px){
.hero:has(.stats){min-height:0!important;height:auto!important}
.hero:has(.stats) .in{min-height:100svh;padding-top:104px;padding-bottom:64px;justify-content:center}
.hero:has(.stats) .stats .in2{padding:40px var(--gutter);gap:32px 12px}
.hero.home .d1{margin-bottom:28px}
.hero.home .lead{margin-bottom:40px}
.hero.home .ctas{gap:14px}
.sec,.closing{border-top:1px solid var(--line)}
.sec{padding-top:calc(var(--gap-sec) * .62)!important;padding-bottom:calc(var(--gap-sec) * .62)!important}
.cta-box{margin-left:-10px;margin-right:-10px;padding:24px 10px}
.form.fs{padding:20px 14px}
}
/* Telefono, riquadro dell'analisi e titoli di sezione (13 novembre 2026): titolo e paragrafo hanno gli stessi margini dal bordo della box
(il titolo non tocca più i lati), titolo più grande e paragrafo più piccolo, così si distinguono. */
@media(max-width:640px){
.d2{font-size:clamp(30px,8.4vw,34px)}
.cta-box .sticky{padding-left:16px;padding-right:16px}
.cta-box .sticky h2{margin:14px 0 16px;line-height:1.08}
.cta-box .sticky p{max-width:none;font-size:16px;line-height:1.55}
.cta-box .split-wide{gap:28px}
}
/* Modulo dentro il riquadro grande (analisi di home e Contatti): niente scheda interna, un solo bordo, come un tutt'uno. */
.cta-box .form.fs{padding:0;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none}
@media(max-width:640px){.cta-box{padding:26px 18px}}
/* Telefono: i selettori a pillole (filtri di Casi studio, indice dei servizi nella hero di Servizi) sono una sola fila che scorre di lato,
al posto di una pila di righe. L'ultima pillola resta sfumata a destra per far capire che si scorre. */
@media(max-width:640px){
#filters,.hero.sub .meta{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;gap:8px;overflow-x:auto;overflow-y:hidden;
margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding:2px var(--gutter) 6px;
scroll-snap-type:x proximity;scroll-padding:0 var(--gutter);-webkit-overflow-scrolling:touch;scrollbar-width:none;
-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
#filters::-webkit-scrollbar,.hero.sub .meta::-webkit-scrollbar{display:none}
#filters .pill,.hero.sub .meta .pill{flex:none;white-space:nowrap;scroll-snap-align:start}
.search input::placeholder{text-overflow:ellipsis}
.search input{text-overflow:ellipsis}
}
@media(max-width:640px){.hero.sub{min-height:100svh}}
/* Telefono: i gruppi di schede lunghi (settori di Servizi, casi in evidenza di home e landing) sono una fila che scorre di lato con la scheda
successiva già visibile, invece di una colonna di 3000 px. La lista completa di Casi studio (#grid) resta in colonna, con "Mostra altri". */
@media(max-width:640px){
.dg.dg4,.cs:not(#grid){display:flex!important;grid-template-columns:none;flex-wrap:nowrap;align-items:stretch;gap:12px;overflow-x:auto;overflow-y:hidden;
margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding:0 var(--gutter) 8px;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);
-webkit-overflow-scrolling:touch;scrollbar-width:none}
.dg.dg4::-webkit-scrollbar,.cs:not(#grid)::-webkit-scrollbar{display:none}
.dg.dg4>*,.cs:not(#grid)>*{flex:0 0 82%;min-width:0;scroll-snap-align:start}
}
/* Pulsanti: il testo lungo va a capo invece di uscire dal contenitore (per esempio "Esempi: Castiglioni, Farmacia di Briga, Como Yacht..."). */
.btn{height:auto;min-height:48px;max-width:100%;padding-top:12px;padding-bottom:12px;white-space:normal;text-align:center;line-height:1.25}
.btn-s{min-height:40px;padding-top:9px;padding-bottom:9px}
/* Telefono: blocchi di Servizi più bassi (foto più bassa, margini e elenco più stretti, le tre cifre affiancate). */
@media(max-width:640px){
.sv .ph{aspect-ratio:16/9}
.sv-tx{padding:24px 20px 26px}
.sv-tx h3{font-size:26px}
.sv-det{padding:22px 20px 26px;gap:22px}
.sv-det .ck-list li{padding:9px 0 9px 28px;font-size:14.5px;line-height:1.4}
.sv-det .ck-list li::before{top:12px}
.sv-foot{gap:18px}
.sv-foot>div{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px!important}
.sv-foot .pz{display:block;padding:12px 10px 14px}
.sv-foot .pz b{font-size:21px}
.sv-foot .pz span{margin-top:6px;font-size:11px;letter-spacing:.02em;line-height:1.35}
.sv-foot .btn{align-self:stretch;width:100%}
}
@media(max-width:640px){.sv .ph{aspect-ratio:21/9}.sv-det .ck-list li{padding:7px 0 7px 28px;font-size:14px}.sv-det .ck-list li::before{top:10px}}
@media(max-width:640px){
.sv-tx .meta .pill{white-space:normal;height:auto;min-height:26px;padding:5px 11px;line-height:1.35}
.sv-foot .pz{padding:12px 8px 14px}
.sv-foot .pz b{font-size:clamp(17px,5.4vw,21px);letter-spacing:-.04em}
}
@media(max-width:640px){.sv-foot .pz b{flex:none;min-width:0;width:auto}}
/* Servizi, elenco "Cosa include": da 641 px in su si vede sempre l'elenco (il titolo non serve); su telefono è una voce che si apre al tocco. */
.sv-more>summary{display:none;list-style:none}
@media(max-width:640px){
.sv-more>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;padding:13px 16px;border:1px solid var(--line2);border-radius:var(--r-s);font-size:15px;font-weight:600}
.sv-more>summary::-webkit-details-marker{display:none}
.sv-more>summary::after{content:"+";font-size:20px;font-weight:400;line-height:1;color:var(--ink2)}
.sv-more[open]>summary::after{content:"\2212"}
.sv-more[open]>summary{margin-bottom:6px}
.sv-more>summary:focus-visible{outline:2px solid var(--el2);outline-offset:3px}
}
/* Moduli: niente spazio vuoto sotto il pulsante. L'area dei messaggi (aria-live) resta per gli screen reader ma, finché è vuota, non occupa spazio;
lo spazio sotto il pulsante è uguale a quello sopra (consenso e pulsante, linea e pulsante). */
.status:empty{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.form.fs{padding-bottom:clamp(18px,1.8vw,24px)}
.form .fbar{padding-top:clamp(18px,1.8vw,24px)}
@media(max-width:640px){.form.fs{padding:18px 14px}.form .fbar{gap:18px}}
.form .fbar{row-gap:clamp(18px,1.8vw,24px)}
/* Testo centrato nelle hero (home, Servizi, Casi studio, Contatti): titolo, paragrafo, pulsanti e indice dei servizi (13 novembre 2026).
La landing resta com'è (modulo accanto al testo). Il riquadro dell'analisi di Contatti segue quello della home (titolo e paragrafo al centro). */
.hero.home .in,.hero.sub .in{align-items:center;text-align:center}
.hero.home .in>.lead,.hero.sub .in>.lead{margin-left:auto;margin-right:auto;text-wrap:balance}
.hero.home .in>.ctas,.hero.sub .in>.ctas{justify-content:center}
.hero.sub .in>.meta{justify-content:center;justify-content:safe center}
.cta-center .ck-list{text-align:left;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto}
.hero.home .stats .stat,.hero.sub .stats .stat{text-align:center}
.split-wide .sticky-solo>.ck-list{grid-column:1;grid-row:auto;margin-top:var(--sp-block)}
@media(max-width:640px){.hero.sub .in>.meta{align-self:stretch;min-width:0;max-width:none}}
/* Riquadro dell'analisi in Contatti: su telefono e tablet (fino a 920 px) titolo e paragrafo centrati, le spunte sotto; da 921 px il testo resta a sinistra con le spunte a lato. */
@media(max-width:920px){
.cta-m .sticky{text-align:center}
.cta-m .sticky .lead{margin-left:auto;margin-right:auto;text-wrap:balance}
.cta-m .ck-list{text-align:left;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto}
}
/* Gruppi di parole che nei titoli vanno a capo insieme (mai una parola sola su una riga): "Sei aree che" e "lavorano insieme,". */
.u{display:inline-block}
/* Telefono: titolo hero di Servizi della stessa misura della home; sotto i 400 px la parte leggera si stringe un po' per stare su una riga. */
@media(max-width:400px){body[data-page="servizi"] .hero.sub .d1 .lt{letter-spacing:-.04em}}
/* Telefono: la fila di schede dei casi è una griglia a colonne con le stesse sei righe per tutte (subgrid), così etichetta, titolo, settore, testo, linea e numeri stanno alla stessa altezza in ogni scheda, come in colonna su desktop. */
@media(max-width:640px){
@supports (grid-template-rows: subgrid){
.cs:not(#grid){display:grid!important;grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;grid-template-rows:repeat(6,auto);column-gap:12px;row-gap:0;margin-bottom:0}
.cs:not(#grid)>.card{margin-bottom:0}
}
}
/* Settori di Servizi (.dg4): come le schede dei casi, le schede della stessa riga condividono le tre righe (foto, titolo, testo), quindi i testi partono alla stessa altezza anche se un titolo va su due righe. Su telefono è la fila che scorre. */
@supports (grid-template-rows: subgrid){
.dg.dg4{row-gap:0}
.dg.dg4 .card{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:span 3;row-gap:0;margin-bottom:16px;align-content:start}
.dg.dg4 .tx{display:contents}
.dg.dg4 .ph{grid-row:1}
.dg.dg4 h3{grid-row:2;margin:22px 24px 0}
.dg.dg4 p{grid-row:3;margin:8px 24px 24px}
.dg.dg4{margin-bottom:-16px}
}
@media(max-width:640px){
@supports (grid-template-rows: subgrid){
.dg.dg4{display:grid!important;grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;grid-template-rows:repeat(3,auto);column-gap:12px;margin-bottom:0}
.dg.dg4>.card{margin-bottom:0;flex:none}
}
}
/* Pulsanti affiancati o impilati: la distanza tra i due è solo il gap di .ctas. Prima ".closing .btn{margin-top}" si sommava al gap quando i pulsanti andavano uno sotto l'altro (telefono). */
.closing .ctas .btn{margin-top:0}
/* Telefono: i titoli di sezione con colonna a lato (Cosa facciamo, intestazione dei casi) sono centrati come tutti gli altri; l'elenco numerato e le schede sotto restano a sinistra. */
@media(max-width:920px){
.nl .sticky,.split-head{text-align:center}
.nl .sticky .btn{margin-left:auto;margin-right:auto}
.split-head .lead{margin-left:auto;margin-right:auto}
}