/* =========================================================
   STUDIO GIANNETTO — premium section set (home + lo studio)
   Layouts that depend on pinning are only applied when JS adds
   .is-pinned (desktop, motion allowed). Otherwise sections stack.
   ========================================================= */

/* ---------------- HOME · Benvenuti (aperture story) ---------------- */
.welcome{position:relative;background:var(--mist);padding:clamp(80px,10vw,140px) 0 0}
.welcome-head{text-align:center;max-width:1120px;margin:0 auto clamp(40px,5vw,70px)}
.welcome-title{font-size:clamp(34px,4.8vw,72px);letter-spacing:-.04em;line-height:1.05}
.welcome-stage{position:relative;display:grid;gap:14px;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) clamp(70px,8vw,110px)}
.ws-frame{position:relative;aspect-ratio:4/4.4;border-radius:32px;overflow:hidden;background:var(--ice-2)}
.ws-img{width:100%;height:100%;object-fit:cover}
.ws-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,31,53,.15),rgba(10,31,53,.75));opacity:.25;pointer-events:none}
.ws-frame .ph-tag{left:auto;right:16px;top:16px;bottom:auto}
.ws-card{position:relative;padding:22px 24px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 50px -30px rgba(15,42,70,.45)}
.ws-k{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ice);color:var(--blue);font-family:var(--ff-head);font-size:12.5px;font-weight:600;margin-bottom:12px}
.ws-card p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.6}
.ws-card .ws-first{font-family:var(--ff-head);font-size:clamp(20px,1.7vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.ws-badge{display:flex;align-items:center;gap:16px;padding:18px 24px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 50px -30px rgba(15,42,70,.45)}
.ws-badge .num{font-family:var(--ff-head);font-size:46px;font-weight:600;letter-spacing:-.05em;color:var(--blue);line-height:1}
.ws-badge small{font-size:13px;line-height:1.35;color:var(--muted)}
/* editorial heading v3 — copy + "ciò che si vede / ciò che conta" illustration */
.whead{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,6vw,100px);align-items:center;margin-bottom:clamp(60px,7vw,110px)}
.wh-title{font-size:clamp(36px,4.3vw,68px);font-weight:600;letter-spacing:-.045em;line-height:1.05;margin:0 0 clamp(30px,3vw,44px)}
.wh-facts{display:flex;flex-wrap:wrap;gap:12px}
.wh-fact{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px -30px rgba(15,42,70,.45)}
.wh-fact b{font-family:var(--ff-head);font-size:40px;font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--blue)}
.wh-fact span{font-size:13.5px;line-height:1.35;color:var(--muted)}
.wh-fact--link{background:linear-gradient(135deg,var(--ice),#fff);transition:transform .5s var(--ease),box-shadow .5s,border-color .4s}
.wh-fact--link:hover{transform:translateY(-3px);border-color:#C9DAEC;box-shadow:0 24px 46px -28px rgba(15,42,70,.5)}
.wh-fact--link strong{font-family:var(--ff-head);font-size:16px;font-weight:600;color:var(--ink)}
.wh-ico{width:44px;height:44px;border-radius:14px;background:var(--blue);color:#fff;display:grid;place-items:center;flex:none}
.wh-ico svg{width:20px;height:20px}
.wh-arr{width:16px;height:16px;color:var(--blue);margin-left:6px;transition:transform .5s var(--ease)}
.wh-fact--link:hover .wh-arr{transform:translateX(4px) rotate(-45deg)}

.wh-art{position:relative;width:100%;max-width:520px;margin-left:auto;aspect-ratio:400/440;border-radius:40px;overflow:hidden;isolation:isolate;box-shadow:0 60px 100px -50px rgba(15,42,70,.55),0 0 0 1px rgba(220,230,241,.9)}
.wa-top,.wa-bottom{position:absolute;left:-24px;right:-24px;will-change:transform}
.wa-top{top:-24px;bottom:45%;background:radial-gradient(90% 90% at 50% 20%,#FFFFFF 0%,#EEF5FC 55%,#DCEAF7 100%)}
.wa-bottom{top:55%;bottom:-24px;background:radial-gradient(90% 120% at 50% 0%,#1F4C7E 0%,#0F2A46 55%,#081A2C 100%)}
.wa-grid,.wa-xgrid{position:absolute;inset:0}
.wa-grid{background-image:radial-gradient(circle at 1px 1px,rgba(58,112,168,.18) 1.2px,transparent 0);background-size:20px 20px;mask-image:radial-gradient(70% 80% at 50% 40%,#000,transparent);-webkit-mask-image:radial-gradient(70% 80% at 50% 40%,#000,transparent)}
.wa-xgrid{background-image:linear-gradient(rgba(111,198,214,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(111,198,214,.09) 1px,transparent 1px);background-size:24px 24px}
.wa-ring{position:absolute;left:50%;top:37%;width:66%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1.5px dashed rgba(58,112,168,.25);animation:spin 40s linear infinite;z-index:1}
.wa-tooth{position:absolute;inset:0;width:100%;height:100%;z-index:2;will-change:transform}
.wt-clue{fill:#6FC6D6;transform-box:fill-box;transform-origin:center;animation:wtclue 2.2s ease-in-out infinite}
.wt-clue:nth-child(2){animation-delay:.6s}.wt-clue:nth-child(3){animation-delay:1.2s}
@keyframes wtclue{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.6)}}
.wt-crown{transform-box:fill-box;transform-origin:50% 100%}
.wa-scan{position:absolute;left:0;right:0;top:8%;height:70px;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(111,198,214,.22) 85%,rgba(111,198,214,.9) 98%,transparent);animation:wascan 5.5s cubic-bezier(.45,0,.55,1) infinite}
@keyframes wascan{0%{transform:translateY(-80px);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateY(calc(var(--h,440px) * .95));opacity:0}}
.wa-tag{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-family:var(--ff-head);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.wa-tag svg{width:15px;height:15px}
.wa-tag--top{right:6%;top:6%;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);color:var(--blue-700);border:1px solid var(--line)}
.wa-tag--bottom{right:6%;bottom:6%;background:rgba(111,198,214,.14);color:var(--aqua);border:1px solid rgba(111,198,214,.35);backdrop-filter:blur(10px)}
.wa-chip{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:9px;padding:10px 16px 10px 12px;border-radius:16px;font-family:var(--ff-head);font-size:14px;font-weight:600;will-change:transform;white-space:nowrap}
.wa-chip i{width:9px;height:9px;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 4px rgba(111,198,214,.22)}
.wa-chip.c1{left:5%;top:27%;background:rgba(255,255,255,.9);color:var(--ink);border:1px solid var(--line);box-shadow:0 18px 34px -18px rgba(15,42,70,.45);backdrop-filter:blur(10px)}
.wa-chip.c2{right:4%;top:44%;background:linear-gradient(135deg,var(--blue),var(--blue-700));color:#fff;box-shadow:0 20px 36px -16px rgba(58,112,168,.7)}
.wa-chip.c2 i{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.25)}
.wa-chip.c3{left:6%;bottom:17%;background:rgba(255,255,255,.08);color:#E3F3F8;border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px)}
.wa-chip > *{pointer-events:none}
.wa-chip.c1,.wa-chip.c2,.wa-chip.c3{animation:wachip 6s ease-in-out infinite}
.wa-chip.c2{animation-delay:-2s}.wa-chip.c3{animation-delay:-4s}
@keyframes wachip{50%{translate:0 -10px}}

/* mission panel (end of the aperture story) */
.ws-mission{padding:0;background:none}
.wm-panel{display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,3vw,44px);align-items:center;padding:clamp(26px,3.4vw,50px);border-radius:34px;background:linear-gradient(145deg,rgba(20,56,94,.86),rgba(10,31,53,.92));backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.14);box-shadow:0 60px 100px -50px rgba(0,0,0,.65);color:#fff}
.wm-icon{position:relative;width:clamp(108px,11vw,158px)}
.wm-icon::before{content:"";position:absolute;inset:-14%;border-radius:50%;border:1px dashed rgba(255,255,255,.22);animation:spin 26s linear infinite}
.wm-shield{position:relative;width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
.wm-body small{display:block;font-family:var(--ff-head);font-size:12.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--aqua)}
.wm-title{font-family:var(--ff-head);font-size:clamp(30px,3.6vw,56px);font-weight:600;letter-spacing:-.045em;line-height:1.04;color:#fff;margin:12px 0 22px}
.wm-steps{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.wm-steps span{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-family:var(--ff-head);font-size:13px;font-weight:500;color:#DCEBF7}
.wm-steps span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--aqua);margin-right:8px;vertical-align:middle}
.welcome.is-pinned .welcome-stage{display:block;height:100vh;max-width:none;padding:0}
.welcome.is-pinned .ws-frame{position:absolute;inset:16px;aspect-ratio:auto;border-radius:36px}
.welcome.is-pinned .ws-card,.welcome.is-pinned .ws-badge{position:absolute;background:rgba(255,255,255,.88);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-color:rgba(255,255,255,.7)}
.welcome.is-pinned .ws-card{width:min(390px,30vw)}
.welcome.is-pinned .ws-c1{left:5%;top:14%}
.welcome.is-pinned .ws-c2{right:5%;top:26%}
.welcome.is-pinned .ws-c3{left:8%;bottom:11%}
.welcome.is-pinned .ws-badge{right:9%;bottom:14%}
.welcome.is-pinned .ws-mission{position:absolute;inset:0;margin:auto;width:min(860px,80%);height:fit-content}

/* ---------------- HOME · Detective evidence board ---------------- */
.board-sec{overflow:hidden;padding-bottom:0}
.board-head{text-align:center;margin-bottom:clamp(50px,6vw,80px)}
.board{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"n1 x n2" "n3 x n4";gap:28px clamp(30px,4vw,70px);align-items:center}
.board .n1{grid-area:n1}.board .n2{grid-area:n2}.board .n3{grid-area:n3}.board .n4{grid-area:n4}
.board .board-x{grid-area:x;aspect-ratio:1/1.08;position:relative;z-index:1}
.board-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.board-lines .bl{fill:none;stroke:rgba(111,198,214,.28);stroke-width:1.5;stroke-dasharray:5 7;transition:stroke .5s,stroke-width .5s}
.board-lines .bl.on{stroke:#6FC6D6;stroke-width:2.2;stroke-dasharray:6 6;animation:bldash 1.2s linear infinite}
@keyframes bldash{to{stroke-dashoffset:-24}}
.board-lines .bl-dot{fill:#6FC6D6;opacity:.5;transition:opacity .4s}
.board-lines .bl-dot.on{opacity:1}
.note{position:relative;z-index:1;padding:26px 24px 24px;border-radius:22px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px);cursor:pointer;transition:background .5s,border-color .5s,box-shadow .5s,transform .6s var(--ease)}
.note::before{content:"";position:absolute;top:-7px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#6FC6D6 60%);box-shadow:0 4px 10px rgba(0,0,0,.4)}
.note:hover,.note.on{background:rgba(111,198,214,.1);border-color:rgba(111,198,214,.55);box-shadow:0 0 50px -14px rgba(111,198,214,.5);transform:translateY(-4px)}
.note .nk{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-head);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--aqua)}
.note .nk svg{width:15px;height:15px}
.note p{margin:12px 0 0;color:#BFD0E2;font-size:16px;line-height:1.6;transition:color .4s}
.note.on p{color:#fff}
.board-x .hud-n{color:#fff}
.board-foot{text-align:center;max-width:920px;margin:clamp(60px,7vw,90px) auto 0}
.board-foot .statement{color:#fff;margin-bottom:30px}
.board-ticker{display:flex;overflow:hidden;margin-top:clamp(70px,8vw,110px);padding:24px 0;border-top:1px solid rgba(255,255,255,.08)}
.board-ticker .marquee__track{gap:44px;padding-right:44px;animation-duration:30s}
.board-ticker span{font-family:var(--ff-head);font-size:clamp(28px,3.4vw,52px);font-weight:600;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px rgba(220,231,243,.38);white-space:nowrap}
.board-ticker i{width:10px;height:10px;border-radius:50%;background:var(--aqua);flex:none}

/* ---------------- HOME · Treatment explorer ---------------- */
.texp-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:end}
.texp-stats{display:flex;gap:40px;margin-top:26px}
.texp-stats b{display:block;font-family:var(--ff-head);font-size:52px;font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--blue)}
.texp-stats span{font-size:14px;color:var(--muted)}
.texp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,5vw,80px);margin-top:clamp(50px,6vw,80px);align-items:start}
.texp-preview{position:sticky;top:108px;display:block;height:min(76vh,640px);border-radius:36px;overflow:hidden;isolation:isolate;color:#fff;box-shadow:0 50px 90px -50px rgba(15,42,70,.55)}
.tp-media{position:absolute;inset:0;z-index:-2;background:var(--blue-900)}
.tp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.tp-img.on{opacity:1}
.tp-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,31,53,.45) 0%,transparent 26%,transparent 42%,rgba(10,31,53,.92) 100%)}
.tp-top{position:absolute;left:22px;right:22px;top:22px;display:flex;justify-content:space-between;align-items:center}
.tp-cat{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.18);backdrop-filter:blur(10px);font-family:var(--ff-head);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.tp-count{font-family:var(--ff-head);font-size:13px;letter-spacing:.1em;color:#C8D9EB}
.tp-count b{font-size:22px;color:#fff;font-weight:600}
.tp-body{position:absolute;left:30px;right:30px;bottom:46px}
.tp-title{color:#fff;font-size:clamp(32px,3.4vw,54px);letter-spacing:-.04em;margin-bottom:10px}
.tp-sub{color:#D3E1EF;font-size:18px;line-height:1.45;max-width:440px;margin:0 0 20px}
.tp-go{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;background:#fff;color:var(--ink);font-family:var(--ff-head);font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.tp-go svg{width:14px;height:14px}
.tp-bar{position:absolute;left:30px;right:30px;bottom:22px;height:3px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden}
.tp-bar i{display:block;height:100%;background:var(--aqua);transform-origin:left;transform:scaleX(.09)}
.tg{margin-bottom:34px}
.tg-head{display:flex;justify-content:space-between;align-items:center;padding:0 8px 12px;border-bottom:1px solid var(--line);font-family:var(--ff-head);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tg-head a{display:inline-flex;align-items:center;gap:6px;color:var(--blue);letter-spacing:.06em}
.tg-head a svg{width:12px;height:12px}
.ti{position:relative;display:grid;grid-template-columns:44px 1fr 44px;column-gap:14px;align-items:center;padding:18px 8px;border-bottom:1px solid var(--line);isolation:isolate}
.ti::before{content:"";position:absolute;inset:5px -4px;z-index:-1;border-radius:18px;background:linear-gradient(90deg,var(--ice),#fff);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.ti.on::before{transform:none}
.ti .n{grid-row:1/3;font-family:var(--ff-head);font-size:13px;letter-spacing:.1em;color:var(--muted);transition:color .4s}
.ti .t{font-family:var(--ff-head);font-size:clamp(22px,2.2vw,32px);font-weight:500;letter-spacing:-.03em;line-height:1.15;transition:color .4s,transform .6s var(--ease)}
.ti .sub{grid-column:2;font-size:14.5px;color:var(--muted);max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .4s,margin .4s}
.ti .go{grid-row:1/3;grid-column:3;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;transition:background .4s,border-color .4s,color .4s,transform .6s var(--ease)}
.ti .go svg{width:15px;height:15px}
.ti.on .n{color:var(--blue)}
.ti.on .t{color:var(--blue);transform:translateX(8px)}
.ti.on .sub{max-height:48px;opacity:1;margin-top:4px;transform:translateX(8px)}
.ti.on .go{background:var(--blue);border-color:var(--blue);color:#fff;transform:rotate(-45deg)}

/* ---------------- LO STUDIO · Horizontal history ---------------- */
.storyh{position:relative;background:var(--mist);overflow:hidden}
.sh-pin{position:relative;padding:clamp(80px,10vw,130px) 0}
.sh-hud{display:flex;align-items:center;gap:30px;margin-bottom:50px}
.sh-hud .eyebrow{margin:0;flex:none}
.sh-progress{position:relative;flex:1;height:2px;background:var(--line)}
.sh-progress i{position:absolute;inset:0;background:linear-gradient(90deg,var(--blue),var(--aqua));transform-origin:left;transform:scaleX(0)}
.sh-marks{position:absolute;left:0;right:0;top:12px;display:flex;justify-content:space-between;font-family:var(--ff-head);font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.08em}
.sh-hint{display:none}
.sh-track{position:relative;display:flex;flex-direction:column;gap:80px;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.sh-line{display:none}
.sh-title{font-size:clamp(38px,5vw,78px);letter-spacing:-.045em;line-height:1.02;max-width:11em;margin-bottom:22px}
.shp-intro .muted{font-size:18px;max-width:420px}
.shp-year{display:grid;grid-template-columns:1fr 1fr;gap:20px 50px;align-items:center}
.shp-yr{position:relative;grid-column:1/-1;font-family:var(--ff-head);font-weight:700;font-size:clamp(96px,15vw,230px);line-height:.86;letter-spacing:-.065em;user-select:none}
.yr-out{display:block;color:transparent;-webkit-text-stroke:2px rgba(58,112,168,.32)}
.yr-fill{position:absolute;left:0;top:0;background:linear-gradient(90deg,var(--blue) 0%,#5A9BD6 60%,var(--aqua) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;clip-path:inset(0 100% 0 0)}
.no-anim .yr-fill{clip-path:none}
.shp-body .tag{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-family:var(--ff-head);font-size:13.5px;font-weight:600;color:var(--blue-700);margin-bottom:20px;box-shadow:var(--shadow-sm)}
.shp-body .tag i{width:8px;height:8px;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 4px rgba(111,198,214,.2)}
.shp-body .lead{margin:0}
.shp-img{position:relative;margin:0;aspect-ratio:4/3;border-radius:28px;overflow:hidden;background:var(--ice-2)}
.shp-img img{width:100%;height:100%;object-fit:cover}
.shp-quote{max-width:900px}
.q-mark{display:block;font-family:var(--ff-head);font-size:150px;font-weight:700;line-height:.7;color:var(--blue);opacity:.16;margin-bottom:-10px}
.sh-quote{font-family:var(--ff-head);font-size:clamp(26px,3vw,44px);font-weight:500;letter-spacing:-.03em;line-height:1.22;color:var(--ink);margin:0}
.sh-quote .w{opacity:.16}
.no-anim .sh-quote .w{opacity:1}
.sh-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.sh-chips a{padding:10px 16px;border-radius:999px;background:var(--blue);color:#fff;font-family:var(--ff-head);font-size:13.5px;font-weight:500;transition:background .4s,transform .4s var(--ease)}
.sh-chips a:hover{background:var(--blue-900);transform:translateY(-2px)}

.storyh.is-pinned .sh-pin{height:100vh;padding:0;display:flex;flex-direction:column}
.storyh.is-pinned .sh-hud{position:absolute;left:0;right:0;top:118px;margin:0 auto;z-index:2}
.storyh.is-pinned .sh-hint{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-head);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);flex:none}
.storyh.is-pinned .sh-hint svg{width:14px;height:14px}
.storyh.is-pinned .sh-track{flex-direction:row;align-items:center;gap:0;max-width:none;width:max-content;margin:0;height:100%;padding:120px 0 0 max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)))}
.storyh.is-pinned .shp{flex:none;padding-right:9vw}
.storyh.is-pinned .shp-intro{width:min(46vw,680px)}
.storyh.is-pinned .shp-year{width:min(80vw,1180px);grid-template-columns:1.05fr .95fr;grid-template-rows:auto auto;column-gap:56px}
.storyh.is-pinned .shp-yr{grid-column:1;grid-row:1}
.storyh.is-pinned .shp-body{grid-column:1;grid-row:2}
.storyh.is-pinned .shp-img{grid-column:2;grid-row:1/3;aspect-ratio:auto;height:min(58vh,560px)}
.storyh.is-pinned .shp-quote{width:min(52vw,780px)}
.storyh.is-pinned .sh-line{display:block;position:absolute;left:0;right:0;bottom:9vh;height:1px;background:var(--line)}
.storyh.is-pinned .sh-line i{position:absolute;inset:0;background:var(--blue);transform-origin:left;transform:scaleX(0)}

/* ---------------- LO STUDIO · Approach (surface vs depth) ---------------- */
.ap-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:end;margin-bottom:clamp(50px,6vw,80px)}
.ap-lead{font-family:var(--ff-head);font-size:clamp(24px,2.4vw,36px);font-weight:500;letter-spacing:-.025em;line-height:1.25;color:var(--ink);margin:0}
.compare{position:relative;aspect-ratio:21/9;border-radius:clamp(28px,3vw,44px);overflow:hidden;--pos:78%;user-select:none;-webkit-user-select:none;box-shadow:0 50px 90px -50px rgba(15,42,70,.5);background:#0A1F35}
.cmp-layer{position:absolute;inset:0;background-size:cover;background-position:center}
.cmp-depth{filter:grayscale(.25) contrast(1.1) brightness(1.05)}
.cmp-surface{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp-dot{position:absolute;width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--aqua);animation:livep 1.8s infinite}
.cmp-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;pointer-events:none;box-shadow:0 0 24px rgba(0,0,0,.35)}
.cmp-handle b{position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px;border-radius:50%;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);display:grid;place-items:center;color:var(--blue);box-shadow:0 0 0 9px rgba(255,255,255,.22),0 12px 30px -8px rgba(0,0,0,.45);transition:box-shadow .3s}
.cmp-handle b svg{width:26px;height:26px}
.compare:focus-within .cmp-handle b{box-shadow:0 0 0 4px var(--blue),0 12px 30px -8px rgba(0,0,0,.45)}
.cmp-label{position:absolute;top:22px;padding:9px 16px;border-radius:999px;font-family:var(--ff-head);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(8px);pointer-events:none}
.cmp-l{left:22px;background:rgba(255,255,255,.9);color:var(--ink)}
.cmp-r{right:22px;background:rgba(10,31,53,.78);color:#DDF3F7}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.cmp-hint{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.85);font-family:var(--ff-head);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);pointer-events:none}
.ap-principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:clamp(40px,5vw,70px)}
.apc{position:relative;padding:28px 24px;border-radius:24px;background:var(--mist);border:1px solid var(--line);transition:transform .6s var(--ease),box-shadow .6s var(--ease),background .4s}
.apc:hover{transform:translateY(-6px);box-shadow:var(--shadow);background:#fff}
.apc-n{font-family:var(--ff-head);font-size:44px;font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--blue)}
.apc-line{display:block;height:2px;margin:18px 0 22px;background:linear-gradient(90deg,var(--blue),var(--aqua));transform-origin:left;transform:scaleX(0)}
.no-anim .apc-line{transform:none}
.apc h3{font-size:19px;letter-spacing:-.015em;margin-bottom:10px}
.apc p{font-size:15.5px;color:var(--ink-2);margin:0}
.ap-band{position:relative;margin-top:clamp(40px,5vw,70px);display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(34px,5vw,64px);border-radius:clamp(28px,3vw,44px);background:linear-gradient(135deg,var(--blue),var(--blue-900));overflow:hidden}
.ap-band::after{content:"";position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;border:1px dashed rgba(255,255,255,.18)}
.ap-lens{width:clamp(80px,9vw,130px);color:var(--aqua);animation:lensfloat 6s ease-in-out infinite}
@keyframes lensfloat{50%{transform:translate(8px,-6px) rotate(-8deg)}}
.ap-band-txt{font-family:var(--ff-head);font-size:clamp(26px,3.2vw,48px);font-weight:600;letter-spacing:-.035em;line-height:1.12;color:#fff;margin:0}

/* ---------------- LO STUDIO · Dentista Detective chapters ---------------- */
.detx{position:relative;overflow:hidden}
.dd-bg{position:absolute;inset:-10%;background-size:cover;background-position:center;opacity:.08;filter:grayscale(1);pointer-events:none}
.detx > .container,.detx > .dd-pin{position:relative;z-index:1}
.dd-head{text-align:center;margin-bottom:clamp(40px,5vw,70px)}
.dd-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(40px,6vw,100px);align-items:center}
.dd-portal{position:relative;width:min(100%,470px);aspect-ratio:1;margin:0 auto}
.dd-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dd-outer{transform-box:fill-box;transform-origin:center;animation:spin 50s linear infinite}
.dd-photo{position:absolute;inset:9%;border-radius:50%;overflow:hidden;background:#0A1F35;box-shadow:0 0 0 10px rgba(255,255,255,.03),0 40px 80px -30px rgba(0,0,0,.6)}
.dd-photo img{width:100%;height:100%;object-fit:cover;object-position:center 12%}
.dd-scan{position:absolute;left:0;right:0;height:32%;background:linear-gradient(180deg,transparent,rgba(111,198,214,.3),transparent);animation:ddscan 4.5s linear infinite;mix-blend-mode:screen}
@keyframes ddscan{from{top:-32%}to{top:100%}}
.dd-cross::before,.dd-cross::after{content:"";position:absolute;background:rgba(111,198,214,.35)}
.dd-cross::before{left:50%;top:8%;bottom:8%;width:1px}
.dd-cross::after{top:50%;left:8%;right:8%;height:1px}
.dd-tag{position:absolute;left:calc(50% + sin(var(--a)) * 54%);top:calc(50% - cos(var(--a)) * 54%);transform:translate(-50%,-50%);padding:8px 14px;border-radius:999px;background:rgba(10,31,53,.85);border:1px solid rgba(255,255,255,.15);font-family:var(--ff-head);font-size:12.5px;font-weight:600;color:#9FB5CC;white-space:nowrap;transition:background .5s,color .5s,border-color .5s,box-shadow .5s,transform .6s var(--ease);z-index:2}
.dd-tag.on{background:var(--aqua);color:var(--blue-900);border-color:var(--aqua);box-shadow:0 0 34px rgba(111,198,214,.55);transform:translate(-50%,-50%) scale(1.08)}
.dd-count{position:absolute;right:0;bottom:2%;font-family:var(--ff-head);display:flex;align-items:baseline;gap:6px;z-index:2}
.dd-count b{font-size:56px;font-weight:600;letter-spacing:-.05em;color:#fff;line-height:1}
.dd-count span{font-size:14px;color:#9FB5CC}
.dd-steps{position:relative}
.dd-step{padding:22px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.dd-k{display:block;font-family:var(--ff-head);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--aqua);margin-bottom:12px}
.dd-step p{font-family:var(--ff-head);font-size:clamp(19px,1.8vw,26px);font-weight:500;letter-spacing:-.02em;line-height:1.38;color:#fff;margin:0}
.dd-dots{display:none}
.dd-foot{text-align:center;max-width:920px;margin:clamp(40px,5vw,70px) auto 0}
.dd-foot .statement{color:#fff;margin-bottom:30px}
.detx.is-pinned .dd-pin{height:100vh;display:flex;align-items:center}
.detx.is-pinned .dd-pin > .container{width:100%}
.detx.is-pinned .dd-steps{min-height:330px}
.detx.is-pinned .dd-step{position:absolute;left:0;right:0;top:0;padding:0;border:0}
.detx.is-pinned .dd-step p{font-size:clamp(26px,2.6vw,40px);line-height:1.24;letter-spacing:-.03em}
.detx.is-pinned .dd-dots{display:flex;gap:8px;position:absolute;left:0;bottom:0}
.dd-dots i{width:26px;height:4px;border-radius:4px;background:rgba(255,255,255,.16);transition:width .5s var(--ease),background .5s}
.dd-dots i.on{width:52px;background:var(--aqua)}

/* ---------------- responsive ---------------- */
@media (max-width:960px){
  .whead{grid-template-columns:1fr}
  .wh-art{margin:0 auto}
  .board{grid-template-columns:1fr;grid-template-areas:"x" "n1" "n2" "n3" "n4"}
  .board .board-x{aspect-ratio:1/1;max-width:520px;width:100%;margin:0 auto}
  .board-lines{display:none}
  .texp-head{grid-template-columns:1fr}
  .texp-grid{grid-template-columns:1fr;gap:20px}
  .texp-preview{top:78px;height:230px;border-radius:26px;z-index:5}
  .tp-sub,.tp-go{display:none}
  .tp-title{font-size:28px;margin:0}
  .tp-body{left:20px;right:20px;bottom:30px}
  .tp-bar{left:20px;right:20px;bottom:16px}
  .tp-top{left:14px;right:14px;top:14px}
  .ap-head{grid-template-columns:1fr}
  .compare{aspect-ratio:4/4.2}
  .cmp-label{top:14px;font-size:10.5px;padding:7px 11px}
  .cmp-l{left:14px}.cmp-r{right:14px}
  .ap-principles{grid-template-columns:1fr 1fr}
  .ap-band{grid-template-columns:1fr}
  .dd-grid{grid-template-columns:1fr}
  .dd-portal{width:min(100%,360px)}
  .shp-year{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ap-principles{grid-template-columns:1fr}
  .dd-tag{font-size:10.5px;padding:6px 10px}
  .dd-count b{font-size:40px}
  .wm-panel{grid-template-columns:1fr;text-align:left}
  .wm-icon{width:86px}
  .wa-chip{font-size:12px;padding:8px 12px 8px 10px}
  .wa-tag{font-size:10.5px;padding:6px 11px}
  .wh-art{border-radius:30px}
  .texp-stats b{font-size:42px}
  .ti .t{font-size:22px}
  .sh-hud{gap:16px}
  .sh-marks{font-size:10.5px}
}
.texp,.welcome,.storyh,.approach{overflow-x:clip}
@media (max-width:640px){.dd-portal{width:min(78%,300px)}.dd-tag{left:calc(50% + sin(var(--a)) * 50%);top:calc(50% - cos(var(--a)) * 50%)}}


.wh-title .s{color:var(--blue)}
.wh-fact .wh-ico{color:#fff}

/* ---------------- HOME · "Il primo passo" cinematic CTA ---------------- */
.cta-cine{position:relative;background:var(--mist);padding:0}
.cine-frame{position:relative;min-height:clamp(620px,96vh,920px);display:flex;flex-direction:column;justify-content:center;overflow:hidden;isolation:isolate;background:#071827;color:#fff}
.cine-bg{position:absolute;inset:0;z-index:-4}
.cine-img{position:absolute;inset:-4%;background-size:cover;opacity:0;transform:scale(1.18);transition:opacity 1.8s ease}
.cine-img.on{opacity:1;animation:kenburns 8.5s linear forwards}
.cine-img:nth-child(2).on{animation-name:kenburns2}
.cine-img:nth-child(3).on{animation-name:kenburns3}
@keyframes kenburns{from{transform:scale(1.18) translate(1.5%,1%)}to{transform:scale(1.04) translate(-1.5%,-1%)}}
@keyframes kenburns2{from{transform:scale(1.05) translate(-2%,0)}to{transform:scale(1.18) translate(2%,-1.5%)}}
@keyframes kenburns3{from{transform:scale(1.16) translate(0,2%)}to{transform:scale(1.05) translate(0,-1%)}}
.cine-grade{position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 45%,rgba(7,24,39,.25) 0%,rgba(7,24,39,.62) 62%,rgba(5,16,28,.92) 100%),
    linear-gradient(180deg,rgba(7,24,39,.55) 0%,rgba(15,42,70,.2) 35%,rgba(15,42,70,.35) 60%,rgba(5,16,28,.92) 100%),
    linear-gradient(120deg,rgba(58,112,168,.45),rgba(111,198,214,.12) 60%,rgba(15,42,70,.3))}
.cine-light{position:absolute;inset:-20%;z-index:-2;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:radial-gradient(35% 45% at 30% 30%,rgba(255,236,210,.35),transparent 70%),radial-gradient(30% 40% at 75% 70%,rgba(111,198,214,.28),transparent 70%);
  animation:cinelight 14s ease-in-out infinite alternate}
@keyframes cinelight{from{transform:translate(-6%,-4%) rotate(0)}to{transform:translate(6%,4%) rotate(8deg)}}
.cine-grain{position:absolute;inset:-50%;z-index:-1;pointer-events:none;opacity:.12;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:cinegrain .9s steps(6) infinite}
@keyframes cinegrain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.cine-frame .cta-orbit{z-index:2;right:6%;top:12%;width:140px;height:140px}
.cine-content{position:relative;z-index:2;text-align:center;padding-top:clamp(90px,10vw,130px);padding-bottom:clamp(110px,11vw,150px)}
.cine-title{font-size:clamp(40px,5.6vw,88px);font-weight:600;letter-spacing:-.045em;line-height:1.02;color:#fff;max-width:13em;margin:0 auto 28px;text-shadow:0 10px 40px rgba(0,0,0,.35)}
.cine-title .s{color:#BFE6F7}
.cine-content p{color:#D8E6F3;max-width:640px;margin:0 auto 12px;font-size:clamp(16px,1.3vw,19px);text-shadow:0 4px 20px rgba(0,0,0,.4)}
.cine-content .cine-strong{font-family:var(--ff-head);font-weight:600;color:#fff;letter-spacing:-.01em}
.cine-content .btns{justify-content:center;margin-top:38px}
.cine-foot{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px var(--gutter) 26px;max-width:var(--maxw);margin:0 auto}
.cine-loc{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.06em;color:#C8D9EA}
.cine-loc svg{width:16px;height:16px;color:var(--aqua)}
.cine-bars{display:flex;gap:8px}
.cine-bars span{position:relative;width:54px;height:3px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden}
.cine-bars i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.cine-bars span.on i{animation:cinebar var(--cine-d,6.5s) linear forwards}
.cine-bars span.done i{transform:scaleX(1)}
@keyframes cinebar{to{transform:scaleX(1)}}
@media (max-width:760px){
  .cine-frame .cta-orbit{display:none}
  .cine-foot{flex-direction:column-reverse;gap:12px;align-items:center}
  .cine-loc{font-size:12px;text-align:center}
}
@media (prefers-reduced-motion:reduce){.cine-img.on{animation:none;transform:scale(1.04)}.cine-light,.cine-grain{animation:none}}

.cine-content .cine-links{margin-top:24px;font-size:14px;color:#C8D9EA;text-shadow:none}
.cine-content .cine-links a{color:#fff;text-decoration:underline;text-underline-offset:3px;transition:opacity .3s}
.cine-content .cine-links a:hover{opacity:.75}

/* ---------------- Benvenuti (pinned): smooth scrolling — no live blur over the moving photo ---------------- */
.welcome.is-pinned .ws-frame,.welcome.is-pinned .ws-img{will-change:transform;backface-visibility:hidden}
.welcome.is-pinned .ws-card,.welcome.is-pinned .ws-badge{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.96)}
.welcome.is-pinned .wm-panel{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(145deg,rgba(20,56,94,.97),rgba(10,31,53,.98))}
/* ---------------- Team track (Home): cards always fit the screen height ---------------- */
@media (min-width:961px){.team-hscroll .tcard{width:min(clamp(270px,26vw,360px),calc(76vh * .75))}}

/* Benvenuti photo: keep the face in frame at every crop */
.ws-img{object-position:62% 32%}

/* Lo Studio comparison: on phones the two labels sit on two rows (they overlapped) */
@media (max-width:600px){.cmp-r{top:54px;right:14px;max-width:calc(100% - 28px)}}

/* Dentista Detective (pinned): all steps share one grid cell, so the box is as tall as the longest text
   and the progress bar always sits below it (it overlapped step 04 before) */
.detx.is-pinned .dd-steps{display:grid;min-height:0;padding-bottom:46px}
.detx.is-pinned .dd-step{position:relative;grid-area:1/1;top:auto;align-self:start}

/* Cinematic CTA: no text-shadow on the split headline (the word masks cut the blur into visible boxes) */
.cine-title,.cine-title .split-word,.cine-title .s{text-shadow:none}

/* Benvenuti cards: no numbers (requested by the studio) */
.ws-k{display:none}