/* Storytelling page — layout dedicato e effetto "palla nera" ricostruito dal progetto Elementor originale. */
.page-storytelling{--story-bg:#000;--story-text:#fff;--story-muted:#b7b7bc;--story-panel:#111214;background:#fff;color:#111;min-height:100vh;transition:background-color .25s ease}
.page-storytelling .story-circle-bg{position:fixed;inset:0;background:#000;clip-path:circle(0vmax at 50% 50%);-webkit-clip-path:circle(0vmax at 50% 50%);will-change:clip-path;-webkit-transform:translateZ(0);transform:translateZ(0);pointer-events:none;}
.page-storytelling .story-header,.page-storytelling .story-main,.page-storytelling .story-footer{position:relative}.page-storytelling .story-main,.page-storytelling .story-footer{z-index:2}.page-storytelling .story-header{isolation:isolate}
.page-storytelling .story-header{position:sticky;top:0;height:auto;background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding:20px 0 8px;transition:padding .25s ease}
.page-storytelling .story-header.is-scrolled{padding-top:10px}
.page-storytelling .story-header .header-inner{width:min(980px,calc(100% - 36px));grid-template-columns:150px 1fr 150px;background:rgba(245,245,245,.96);border:1px solid rgba(255,255,255,.48);border-radius:999px;padding:8px 10px 8px 18px;box-shadow:0 12px 36px rgba(0,0,0,.16);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.page-storytelling .story-header .logo{width:94px}
.page-storytelling .story-header .site-nav ul{gap:34px}
.page-storytelling .story-header .site-nav a{font-size:.78rem;color:#18181a}
.page-storytelling .story-header .site-nav a::after{display:none}
.page-storytelling .story-header .header-cta{min-height:40px;padding:8px 19px;background:#25262b;border-color:#25262b;font-size:.76rem}
.nav-mobile-contact{display:none}

.story-intro{min-height:540px;display:flex;align-items:flex-start;padding:82px 0 112px;position:relative;z-index:2;transition:color .2s ease}
.story-intro-inner{max-width:760px}
.story-chip{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#121214;border:1px solid #d7d7d8;border-radius:999px;padding:8px 15px;font-size:.68rem;font-weight:500;margin-bottom:30px;box-shadow:0 6px 18px rgba(0,0,0,.04)}
.story-intro h1{font-size:clamp(2.1rem,4.1vw,4.3rem);line-height:1.08;margin:0 0 13px;font-weight:600;letter-spacing:-.035em}
.story-intro p{max-width:600px;margin:0 auto;color:#707077;font-size:.93rem;line-height:1.7;transition:color .2s ease}
.story-scroll-hint{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:42px;text-transform:uppercase;letter-spacing:.18em;font-size:.62rem;font-weight:600}
.story-mouse{width:27px;height:45px;border:2px solid currentColor;border-radius:22px;position:relative}
.story-mouse span{position:absolute;width:5px;height:5px;left:9px;top:8px;border-radius:50%;background:currentColor;animation:storyMouse 1.5s infinite}
@keyframes storyMouse{0%,100%{transform:translateY(0);opacity:1}60%{transform:translateY(17px);opacity:.28}}
.page-storytelling.story-dark .story-intro{color:#fff}
.page-storytelling.story-dark .story-intro p{color:#b7b7bc}

.story-showcase{position:relative;z-index:2;padding:0 0 140px;color:var(--story-text)}
.story-container{max-width:1050px}
.story-case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:70px;min-height:600px;padding:70px 0}
.story-case-reverse .story-case-media{order:2}
.story-case-reverse .story-case-content{order:1}
.story-case-media{overflow:hidden;border-radius:17px;background:#151515;aspect-ratio:1/1;opacity:0;transform:translateY(70px);transition:opacity .85s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.story-case-media img{width:100%;height:100%;object-fit:cover;transform:translateY(-10%) scale(1.22);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.story-case.is-visible .story-case-media{opacity:1;transform:none}
.story-case.is-visible .story-case-media img{transform:none}
.story-case-content{opacity:0;transform:translateY(34px);transition:opacity .75s ease .08s,transform .85s cubic-bezier(.16,1,.3,1) .08s}
.story-case.is-visible .story-case-content{opacity:1;transform:none}
.story-tabs{display:flex;gap:12px;margin-bottom:25px}
.story-tab{min-width:112px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:transparent;color:#fff;padding:9px 18px;font-size:.72rem;line-height:1;cursor:pointer;transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease}
.story-tab:hover,.story-tab:focus-visible{transform:translateY(-1px)}
.story-tab.is-active{background:#fff;color:#151515;border-color:#fff}
.story-case-content h2{font-size:clamp(1.85rem,3vw,3rem);margin:0 0 18px;color:#fff;letter-spacing:-.035em}
.story-panel p,.story-panel li{font-size:.92rem;line-height:1.85;color:rgba(255,255,255,.77)}
.story-panel p{margin:0}
.story-panel ul{margin:0;padding-left:20px;display:grid;gap:11px}
.story-panel[hidden]{display:none!important}

.story-footer{background:transparent!important;padding:20px 0 26px!important;color:#fff}
.story-footer-panel{background:#111214;border:1px solid rgba(255,255,255,.06);border-radius:28px;padding:58px 62px 34px}
.story-footer-top{display:grid;grid-template-columns:1.7fr .55fr .55fr .85fr;gap:42px;align-items:start;padding-bottom:54px;border-bottom:1px solid rgba(255,255,255,.20)}
.story-footer-claim h2{font-size:clamp(1.75rem,3vw,3rem);line-height:1.25;margin:0;letter-spacing:-.035em}
.story-footer-claim a{color:#ff4d59}
.story-footer .footer-col h3{text-transform:none;letter-spacing:0;font-size:.76rem;margin-bottom:14px}
.story-footer .footer-col ul{font-size:.72rem;line-height:1.55;gap:7px;color:#c7c7cb}
.story-footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:27px}
.story-footer-brand{display:flex;align-items:center;gap:17px;max-width:520px}
.story-footer-brand img{width:84px;margin:0}
.story-footer-brand p{margin:0;color:#b8b8bd;font-size:.68rem;line-height:1.5}
.story-footer .footer-legal{font-size:.67rem;gap:18px;color:#d5d5d8}

@media(max-width:900px){
  .page-storytelling .story-header .header-inner{grid-template-columns:1fr auto;width:min(100% - 28px,720px);padding:7px 9px 7px 15px}
  .page-storytelling .story-header .logo{width:82px}
  .page-storytelling .story-header .nav-toggle{display:block;justify-self:end;width:42px;height:42px}
  .page-storytelling .story-header .nav-toggle span{left:11px;width:20px}.page-storytelling .story-header .nav-toggle span:first-child{top:17px}.page-storytelling .story-header .nav-toggle span:last-child{top:24px}.page-storytelling .story-header .nav-toggle[aria-expanded="true"] span:first-child,.page-storytelling .story-header .nav-toggle[aria-expanded="true"] span:last-child{top:21px}
  .page-storytelling .story-header .site-nav{position:fixed;inset:74px 14px auto;background:#0b0b0c;border-radius:24px;padding:32px;color:#fff;box-shadow:0 20px 50px rgba(0,0,0,.34)}
  .page-storytelling .story-header .site-nav a{color:#fff;font-size:1.35rem}
  .page-storytelling .story-header .header-cta{display:none}.nav-mobile-contact{display:list-item}
  .story-intro{min-height:500px;padding:70px 0 100px}
  .story-case,.story-case-reverse{grid-template-columns:1fr;gap:30px;min-height:0;padding:56px 0}
  .story-case-reverse .story-case-media,.story-case-reverse .story-case-content{order:initial}
  .story-case-media{max-width:660px;width:100%;margin-inline:auto}
  .story-footer-panel{padding:42px 28px 28px}
  .story-footer-top{grid-template-columns:1fr 1fr;gap:30px}.story-footer-claim{grid-column:1/-1}.story-footer-top .footer-col:last-child{grid-column:auto}
  .story-footer-bottom{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
  .story-intro{min-height:430px;padding:54px 0 76px}.story-intro h1{font-size:2.25rem}.story-intro p{font-size:.84rem}.story-scroll-hint{margin-top:30px}
  .story-showcase{padding-bottom:90px}.story-case{padding:44px 0;gap:24px}.story-case-content h2{font-size:1.85rem}.story-panel p,.story-panel li{font-size:.84rem;line-height:1.75}.story-tab{min-width:98px;padding:9px 14px;font-size:.68rem}
  .story-footer-panel{border-radius:22px;padding:34px 22px 24px}.story-footer-top{grid-template-columns:1fr}.story-footer-claim{grid-column:auto}.story-footer-claim h2{font-size:1.75rem}.story-footer-brand{align-items:flex-start;flex-direction:column}.story-footer .footer-legal{gap:12px;flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.page-storytelling .story-circle-bg{clip-path:circle(80vmax at 50% 50%);-webkit-clip-path:circle(80vmax at 50% 50%)}.story-case-media,.story-case-content{opacity:1;transform:none}.story-case-media img{transform:none}.story-mouse span{animation:none}}

/* Lo header Storytelling resta sempre sopra reveal, immagini e contenuti animati */
.page-storytelling .story-header{z-index:6000!important;transform:translateZ(0);-webkit-transform:translateZ(0)}
.page-storytelling .story-header .header-inner{position:relative;z-index:6001}
.page-storytelling .story-main{position:relative;z-index:2}
.page-storytelling .story-showcase,.page-storytelling .story-case,.page-storytelling .story-case-media,.page-storytelling .story-case-content{z-index:auto}
.page-storytelling .story-circle-bg{z-index:0}


/* v26 — tipografia casi Storytelling allineata al riferimento */
.page-storytelling .story-case-content{
  max-width:590px;
}
.page-storytelling .story-case-content h2{
  margin:0 0 28px!important;
  font-size:clamp(46px,3.9vw,62px)!important;
  line-height:1.04!important;
  letter-spacing:-.045em!important;
  color:#fff!important;
}
.page-storytelling .story-panel p,
.page-storytelling .story-panel li{
  font-size:clamp(18px,1.35vw,22px)!important;
  line-height:1.62!important;
  font-weight:400!important;
  color:#b8b8bd!important;
  letter-spacing:-.01em!important;
}
.page-storytelling .story-panel p{
  max-width:570px!important;
  margin:0!important;
}
.page-storytelling .story-panel ul{
  max-width:570px!important;
  gap:14px!important;
}
.page-storytelling .story-tabs{
  margin-bottom:34px!important;
}
@media(max-width:900px){
  .page-storytelling .story-case-content{
    max-width:680px;
    margin-inline:auto;
  }
  .page-storytelling .story-case-content h2{
    font-size:clamp(40px,7vw,54px)!important;
    margin-bottom:24px!important;
  }
  .page-storytelling .story-panel p,
  .page-storytelling .story-panel li{
    font-size:18px!important;
    line-height:1.62!important;
  }
}
@media(max-width:560px){
  .page-storytelling .story-case-content h2{
    font-size:38px!important;
    line-height:1.06!important;
    margin-bottom:20px!important;
  }
  .page-storytelling .story-panel p,
  .page-storytelling .story-panel li{
    font-size:16.5px!important;
    line-height:1.68!important;
  }
  .page-storytelling .story-tabs{
    margin-bottom:26px!important;
  }
}

/* v28 — tipografia Storytelling; Benefici ripristinati allo stile originale */
.page-storytelling .story-case-content h2{
  font-size:42px!important;
  line-height:1.08!important;
  margin:0 0 22px!important;
  font-weight:600!important;
  letter-spacing:-.035em!important;
}
.page-storytelling .story-panel p,
.page-storytelling .story-panel li{
  font-size:16px!important;
  line-height:1.72!important;
}
@media(max-width:900px){
  .page-storytelling .story-case-content h2{font-size:40px!important}
  .page-storytelling .story-panel p,.page-storytelling .story-panel li{font-size:16px!important}
}
@media(max-width:620px){
  .page-storytelling .story-case-content h2{font-size:34px!important}
  .page-storytelling .story-panel p,.page-storytelling .story-panel li{font-size:15px!important;line-height:1.7!important}
}


/* v29 — fix mobile effetto palla nera: sfera reale che copre tutta la viewport */
@media(max-width:900px){
  .page-storytelling .story-circle-bg{
    inset:auto!important;
    left:50%!important;
    top:50%!important;
    width:100vmax!important;
    height:100vmax!important;
    border-radius:50%!important;
    background:#000!important;
    clip-path:none!important;
    -webkit-clip-path:none!important;
    transform:translate3d(-50%,-50%,0) scale(var(--story-circle-scale,0))!important;
    transform-origin:50% 50%!important;
    will-change:transform!important;
    z-index:0!important;
  }
  .page-storytelling.story-dark-complete{
    background:#000!important;
  }
  .page-storytelling .story-main,
  .page-storytelling .story-footer{position:relative!important;z-index:2!important}
}