/* Case study — sezioni a tutto schermo condivise. Ogni pagina definisce i suoi colori con --c1…--c5 e --ink. */
.cs{--ink:#121212}
.cs img{max-width:100%}
.cs-hero{position:relative;height:100vh;height:100svh;min-height:520px;background:var(--hero,var(--c1));display:grid;place-items:center;overflow:hidden;color:var(--hero-ink,var(--ink))}
.cs-hero > img.mark{width:min(var(--mark-w,62vw),1100px);height:auto;animation:cs-rise 1.4s var(--ease) .15s both}
.cs-hero > video,.cs-hero > img.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-hero .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 45%)}
.cs-hero .meta{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;padding-bottom:28px;font-size:15px;font-weight:600;z-index:2}
.cs-hero .meta i{font-weight:500}
.cs-hero .meta h1{margin:0;font-size:clamp(48px,9vw,160px);line-height:.86;letter-spacing:-.055em;font-weight:700}
@keyframes cs-rise{from{clip-path:inset(100% 0 0 0);transform:translateY(8%)}to{clip-path:inset(0 0 0 0);transform:none}}

.cs-story{background:var(--story,var(--c2));color:var(--story-ink,var(--ink))}
.cs-story .wrap{display:flex;flex-wrap:wrap;gap:48px 80px;padding-block:clamp(90px,11vw,170px);align-items:flex-start}
.cs-story h2{flex:1 1 520px;margin:0;font-size:clamp(44px,6.6vw,116px);line-height:.92;font-weight:700;letter-spacing:-.055em;max-width:12ch}
.cs-story .txt{flex:1 1 380px;display:flex;flex-direction:column;gap:18px;font-size:clamp(18px,1.4vw,22px);line-height:1.5;max-width:580px;min-width:0}
.cs-story .txt p{margin:0}
.cs-story .txt strong{font-weight:650}

.cs-big{background:var(--bg,var(--c1));color:var(--fg,var(--ink));padding-block:clamp(90px,12vw,190px);overflow:hidden}
.cs-big p.say{margin:0;font-size:clamp(48px,9vw,168px);line-height:.88;letter-spacing:-.06em;font-weight:700;max-width:13ch}
.cs-big p.say .w{transition:opacity .2s linear}
.cs-big .sub{margin:32px 0 0;font-size:clamp(18px,1.5vw,22px);max-width:520px;opacity:.85}

.cs-zoom{position:relative;height:240vh;background:var(--bg,var(--c1))}
.cs-zoom .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.cs-zoom .sym{width:min(24vw,300px);transform:scale(calc(.8 + var(--p,0) * 2.4)) rotate(calc(var(--p,0) * var(--rot,-6deg)))}
.cs-zoom .sym img{width:100%;height:auto;display:block}
.cs-zoom .say{position:absolute;z-index:2;left:0;right:0;bottom:0;padding-bottom:36px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;color:var(--fg,var(--ink))}
.cs-zoom .say p{margin:0;font-size:clamp(30px,4.4vw,72px);font-weight:700;letter-spacing:-.045em;line-height:.95;max-width:13ch;opacity:calc(var(--p,0) * 3 - .3)}

.cs-mq{background:var(--bg,var(--c1));color:var(--fg,var(--ink));padding-block:clamp(36px,4.5vw,64px);font-size:clamp(48px,9vw,150px);font-weight:700;letter-spacing:-.05em;line-height:1;overflow:hidden;white-space:nowrap}
.cs-mq .track{display:inline-flex;gap:.45em;animation:mq 22s linear infinite;padding-right:.45em}
.cs-mq .track span{display:inline-flex;align-items:center;gap:.45em}
.cs-mq .track i{display:inline-block;width:.28em;height:.28em;border-radius:50%;background:var(--dot,currentColor)}

.cs-pal{display:flex;height:clamp(420px,80vh,860px);overflow:hidden}
.cs-pal .c{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-end;padding:24px clamp(12px,2vw,28px);transition:flex-grow .7s var(--ease);min-width:0;overflow:hidden}
.cs-pal .c:hover{flex-grow:2.2}
.cs-pal .c > div{display:flex;flex-direction:column}
.cs-pal .c strong{font-size:clamp(16px,1.9vw,30px);letter-spacing:-.03em;white-space:nowrap}
.cs-pal .c span{font-size:14px;font-variant-numeric:tabular-nums;opacity:.8}

.cs-full{position:relative;background:var(--bg,var(--c1));overflow:hidden;color:var(--fg,#fff)}
.cs-full > video,.cs-full > img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;max-height:100svh}
.cs-full.tall > video,.cs-full.tall > img{aspect-ratio:auto;height:100vh;height:100svh;max-height:none}
.cs-full .lab{position:absolute;left:0;right:0;top:0;padding-top:clamp(90px,8vw,120px);display:flex;justify-content:space-between;gap:16px;pointer-events:none}
.cs-full .lab.bottom{top:auto;bottom:0;padding-top:0;padding-bottom:32px;align-items:flex-end}
.cs-full .lab strong{font-size:clamp(28px,3.6vw,60px);letter-spacing:-.045em;line-height:.95;max-width:13ch}
.cs-full .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0) 45%);pointer-events:none}
.cs-full.par > img{transform:scale(1.12) translateY(calc((var(--p,.5) - .5) * -6%))}

.cs-split{display:grid;grid-template-columns:1fr 1fr;height:100vh;height:100svh;min-height:520px}
.cs-split > *{position:relative;overflow:hidden;min-width:0}
.cs-split > * > video,.cs-split > * > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cs-split .contain > img,.cs-split .contain > video{object-fit:contain}
.cs-split .panel{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(90px,9vw,120px) clamp(20px,3vw,48px) 36px;background:var(--pbg,var(--c1));color:var(--pfg,var(--ink))}
.cs-split .panel h2{margin:0;font-size:clamp(44px,6.4vw,116px);line-height:.88;letter-spacing:-.055em;font-weight:700}
.cs-split .panel p{margin:16px 0 0;max-width:400px;font-size:18px}
.cs-split .panel .mk{width:min(46%,280px);height:auto}
@media (max-width:760px){.cs-split{grid-template-columns:1fr;height:auto}.cs-split > *{height:80svh}}

.cs-var{position:relative;height:calc(var(--n,4) * 100vh)}
.cs-var .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--vbg,var(--c1));transition:background-color .7s ease;color:var(--vfg,var(--ink))}
.cs-var .v{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .6s ease,transform .9s var(--ease);pointer-events:none;display:grid;place-items:center}
.cs-var .v.on{opacity:1;transform:none}
.cs-var .v > img.cover,.cs-var .v > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-var .v > img.card{height:76%;width:auto;max-width:86%;object-fit:contain;border-radius:4px;box-shadow:0 40px 80px -40px rgba(0,0,0,.45)}
.cs-var .ui{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;gap:16px;padding-top:clamp(90px,9vw,120px);z-index:2}
.cs-var .ui strong{font-size:clamp(26px,3vw,48px);letter-spacing:-.04em}
.cs-var .names{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;gap:8px 28px;padding-bottom:32px;font-size:clamp(17px,1.6vw,24px);font-weight:600;z-index:2}
.cs-var .names span{opacity:.32;transition:opacity .4s}
.cs-var .names span.on{opacity:1}

.cs-ba{background:var(--bg,var(--c2));color:var(--fg,var(--ink))}
.cs-ba .wrap{padding-block:clamp(90px,11vw,160px);display:flex;flex-wrap:wrap;gap:40px 80px;align-items:center}
.cs-ba .txt{flex:1 1 320px}
.cs-ba .txt h2{margin:0;font-size:clamp(40px,5.4vw,92px);line-height:.92;letter-spacing:-.05em}
.cs-ba .txt p{margin:20px 0 0;max-width:400px}
.ba{position:relative;flex:1 1 420px;max-width:620px;aspect-ratio:var(--ar,3/4);border-radius:4px;overflow:hidden;user-select:none;touch-action:pan-y;background:#fff}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 var(--x,50%))}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.ba .handle::after{content:"";position:absolute;top:50%;left:50%;width:48px;height:48px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.ba .tag{position:absolute;top:14px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;background:rgba(0,0,0,.65);color:#fff}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}

.cs-gal{background:var(--bg,var(--c2));padding-block:clamp(16px,2vw,28px)}
.cs-gal .g{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.cs-gal .g > *{overflow:hidden;border-radius:4px;margin:0}
.cs-gal .g img,.cs-gal .g video{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:var(--ar,3/4)}
@media (max-width:600px){.cs-gal .g{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px}.cs-gal .g > *{flex:0 0 72%;scroll-snap-align:center}}

.cs-end{background:var(--bg,var(--c1));color:var(--fg,var(--ink))}
.cs-end .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px;padding-block:clamp(90px,11vw,160px)}
.cs-end .mk{width:clamp(120px,14vw,220px);height:auto;animation:cs-float 3.4s ease-in-out infinite}
@keyframes cs-float{50%{transform:translateY(-8%)}}
.cs-end a.big{font-size:clamp(44px,8vw,150px);font-weight:700;letter-spacing:-.055em;line-height:.88;display:inline-flex;align-items:center;gap:.2em}
.cs-end a.big svg{width:.6em;height:.6em;transition:transform .5s var(--ease)}
.cs-end a.big:hover svg{transform:translateX(.15em)}
@media (prefers-reduced-motion:reduce){.cs-hero > img.mark,.cs-end .mk,.cs-mq .track{animation:none}}