/* ============================================================
   Imballaggi 2G — foglio di stile
   Sito a piu pagine: una sezione per pagina.
   ============================================================ */

@font-face{font-family:Manrope;src:url('assets/manrope-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/manrope-semibold.ttf') format('truetype');font-style:normal;font-weight:500 800;font-display:swap}

:root{
  --green:#2f9879;
  --green-soft:#66bf99;
  --green-deep:#1d6f56;
  --dark:#121615;
  --ink:#0b110f;
  --paper:#f7f8f5;
  --paper-2:#ebefe9;
  --muted:#66716b;
  --line:#d5ddd4;
  --ease:cubic-bezier(.22,1,.36,1);
  --header:96px;
  --gutter:clamp(20px,6vw,86px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 16px)}
body{margin:0;background:var(--paper);color:var(--dark);font-family:Manrope,Arial,sans-serif;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
a,button,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--green);outline-offset:5px;border-radius:2px}
::selection{background:#b9e4cc;color:var(--dark)}
img{max-width:100%;height:auto}
p{line-height:1.7}
h1,h2,h3,p{margin:0}
em{font-style:normal;color:var(--green)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:-100px;left:20px;background:#fff;padding:15px;z-index:300}
.skip:focus{top:20px}

.wrap{width:100%;max-width:1560px;margin:0 auto;padding:0 var(--gutter)}
.wrap.narrow{max-width:940px}
.wrap.center{text-align:center}
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,90px);align-items:start}
.split.middle{align-items:center}

.eyebrow{font-size:clamp(11px,1.05vw,14px);font-weight:600;letter-spacing:.13em;line-height:1.5;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.wrap.center .eyebrow{justify-content:center}
.eyebrow .tag{font-style:normal;font-size:11px;letter-spacing:.1em;border:1px solid currentColor;border-radius:30px;padding:4px 10px;opacity:.65}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--green-soft);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(102,191,153,.6)}70%{box-shadow:0 0 0 12px rgba(102,191,153,0)}100%{box-shadow:0 0 0 0 rgba(102,191,153,0)}}

.display{font-size:clamp(36px,6vw,92px);font-weight:500;letter-spacing:-.055em;line-height:1.05}
.display.small{font-size:clamp(28px,4.2vw,60px);line-height:1.08;letter-spacing:-.05em}
.lead{font-size:clamp(16px,1.35vw,20px);color:#4e5c54;margin-top:clamp(16px,2.4vh,26px);max-width:56ch}
.dark-block .lead,.tone-green .lead{color:#c5d8cb}

.block{padding:clamp(60px,9vh,130px) 0;background:var(--paper);position:relative}
.block.tinted{background:var(--paper-2)}
.block.dark-block{background:#11382a;color:#f2f6f1;overflow:hidden}
.block.dark-block::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 55% at 80% 25%,rgba(102,191,153,.2),transparent 62%),radial-gradient(50% 45% at 5% 95%,rgba(47,152,121,.18),transparent 65%)}
.block.dark-block .wrap{position:relative}
.block-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:clamp(12px,2vh,22px);
  border-bottom:1px solid var(--line);margin-bottom:clamp(26px,4vh,56px)}
.block-top>span{font-size:clamp(12px,1.05vw,15px);color:var(--muted)}
.dark-block .block-top{border-bottom-color:rgba(255,255,255,.18)}
.dark-block .block-top>span,.dark-block .eyebrow{color:#bacdbf}

/* ---------- grana e avanzamento ---------- */
.grain{position:fixed;inset:-150px;z-index:250;pointer-events:none;opacity:.14;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  animation:grainShift 6s steps(6) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}20%{transform:translate(-14px,8px)}40%{transform:translate(10px,-12px)}
  60%{transform:translate(-8px,-6px)}80%{transform:translate(12px,10px)}100%{transform:translate(0,0)}}
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:210;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--green),var(--green-soft));transform:scaleX(0);transform-origin:left}

/* ---------- tendina di passaggio fra pagine ---------- */
.curtain{position:fixed;inset:0;z-index:240;background:var(--ink);pointer-events:none;transform:translateY(101%)}
.curtain.in{transform:translateY(0);transition:transform .42s var(--ease)}
.curtain.cover{transform:translateY(0)}
.curtain.out{transform:translateY(-101%);transition:transform .55s var(--ease)}

/* ============================================================
   INTRO — la tartaruga scopre il logo
   ============================================================ */
.intro{position:fixed;inset:0;z-index:260;pointer-events:none;display:grid;place-items:center;overflow:hidden}
.intro.finished{display:none}
.intro-sheet{position:absolute;inset:0;background:var(--paper);animation:sheetUp .85s var(--ease) 2.1s forwards}
.intro-stage{position:relative;z-index:1;width:min(76vw,560px);animation:stageOut .45s var(--ease) 1.95s forwards}
.intro-lock{position:relative;width:100%}
.intro-word{display:block;width:100%;clip-path:inset(0 100% 0 0);animation:wordBuild 1.5s var(--ease) .35s forwards}
.intro-turtle{position:absolute;top:50%;left:0;width:11.5%;transform:translate(-50%,-50%);opacity:0;
  animation:turtleWalk 1.5s var(--ease) .35s forwards}
.intro-turtle img{display:block;width:100%;animation:turtleBob 1.05s ease-in-out infinite}
.intro-rule{height:1px;background:linear-gradient(90deg,transparent,rgba(47,152,121,.45),transparent);
  transform:scaleX(0);transform-origin:left;margin-top:clamp(14px,2.4vh,26px);
  animation:ruleDraw 1.5s var(--ease) .35s forwards}
.intro-tag{margin-top:clamp(12px,2vh,20px);text-align:center;font-size:clamp(9px,1.5vmin,11px);letter-spacing:.36em;
  color:var(--muted);opacity:0;animation:tagIn .6s var(--ease) 1.5s forwards}
@keyframes wordBuild{0%{clip-path:inset(0 100% 0 0)}78%{clip-path:inset(0 12% 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes turtleWalk{0%{left:0;opacity:0}9%{opacity:1}78%{left:88%;opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{left:92%;opacity:0;transform:translate(-50%,-50%) scale(.4)}}
@keyframes turtleBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9%) rotate(2deg)}}
@keyframes ruleDraw{to{transform:scaleX(1)}}
@keyframes tagIn{to{opacity:1}}
@keyframes stageOut{to{opacity:0;transform:translateY(-12px)}}
@keyframes sheetUp{to{transform:translateY(-101%)}}

/* ============================================================
   HEADER + MENU
   ============================================================ */
.header{position:fixed;top:0;left:0;right:0;height:var(--header);padding:0 var(--gutter);display:flex;align-items:center;
  justify-content:space-between;gap:30px;z-index:200;border-bottom:1px solid transparent;
  transition:height .4s var(--ease),background .4s var(--ease),transform .5s var(--ease),border-color .4s var(--ease)}
.header.solid{background:rgba(247,248,245,.92);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-bottom-color:var(--line);height:72px}
.header.hidden{transform:translateY(-104%)}
.header.menu-open{background:transparent;border-bottom-color:transparent;transform:none!important}

.brand{width:230px;position:relative;display:block;line-height:0;transition:width .4s var(--ease)}
.brand img{display:block;width:100%;height:auto;transition:opacity .4s var(--ease)}
.brand-dark{opacity:0}
.brand-light{position:absolute;inset:0;opacity:1}
.header.solid .brand{width:200px}
.header.solid .brand-dark{opacity:1}
.header.solid .brand-light{opacity:0}
.header.solid.menu-open .brand-dark{opacity:0}
.header.solid.menu-open .brand-light{opacity:1}

.header-actions{display:flex;align-items:center;gap:16px}
.pill{border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:40px;padding:13px 22px;display:flex;align-items:center;gap:24px;
  font-size:14px;font-weight:600;transition:background .35s,color .35s,border-color .35s,gap .35s,opacity .3s}
.pill span{font-size:19px;line-height:1}
.pill:hover{background:#fff;color:var(--dark);border-color:#fff;gap:32px}
.header.solid .pill{border-color:#bdc6bf;color:var(--dark)}
.header.solid .pill:hover{background:var(--green);border-color:var(--green);color:#fff}
.header.menu-open .pill{opacity:0;pointer-events:none}

.burger{display:flex;align-items:center;gap:14px;border:0;background:transparent;cursor:pointer;padding:8px 4px}
.burger-label{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#fff;transition:color .4s var(--ease)}
.header.solid .burger-label{color:var(--dark)}
.header.menu-open .burger-label{color:#fff}
.burger-box{position:relative;width:48px;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.45);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding-left:13px;
  transition:border-color .4s var(--ease),background .4s var(--ease),border-radius .5s var(--ease)}
.header.solid .burger-box{border-color:#c2ccc3}
.burger:hover .burger-box{border-color:var(--green);background:rgba(47,152,121,.14);border-radius:50%}
.burger-box span{display:block;width:20px;height:1.5px;background:#fff;border-radius:2px;transform-origin:center;
  transition:transform .45s var(--ease),opacity .25s var(--ease),width .35s var(--ease)}
.burger-box span:nth-child(2){width:11px}
.burger:hover .burger-box span:nth-child(2){width:20px}
.header.solid .burger-box span{background:var(--dark)}
.header.menu-open .burger-box{border-color:rgba(255,255,255,.5)}
.header.menu-open .burger-box span{background:#fff}
.burger[aria-expanded=true] .burger-box span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded=true] .burger-box span:nth-child(2){opacity:0;transform:scaleX(.2)}
.burger[aria-expanded=true] .burger-box span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- menu: console di navigazione ---------- */
.menu{position:fixed;inset:0;z-index:190;visibility:hidden;pointer-events:none;--mx:72%;--my:30%;transition:visibility .01s linear .85s}
.menu.open{visibility:visible;pointer-events:auto;transition-delay:0s}
.menu-bg{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);overflow:hidden}
.menu-bg>b{background:#0d1311;transform:scaleY(0);transform-origin:top;
  transition:transform .6s var(--ease) calc((7 - var(--c))*.03s)}
.menu.open .menu-bg>b{transform:none;transition-delay:calc(var(--c)*.045s)}
.menu-glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);
  background:radial-gradient(40% 45% at var(--mx) var(--my),rgba(47,152,121,.2),transparent 70%)}
.menu.open .menu-glow{opacity:1;transition-delay:.35s}

.menu-inner{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  grid-template-rows:minmax(0,1fr);column-gap:clamp(24px,4.5vw,72px);color:#f2f5f0;
  padding:calc(var(--header) + 4px) var(--gutter) clamp(14px,2.6vh,30px);overflow-y:auto;overscroll-behavior:contain}

.menu-nav{display:flex;flex-direction:column;justify-content:center;min-height:0}
.menu-nav a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:clamp(5px,1.3vh,18px) 0;opacity:0;transform:translateY(34px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),color .35s var(--ease)}
.menu.open .menu-nav a{opacity:1;transform:none;transition-delay:calc(.3s + var(--i,0)*.05s),calc(.3s + var(--i,0)*.05s),0s}
.menu-nav a span{font-size:clamp(23px,min(4.1vw,4.8vh),54px);font-weight:500;letter-spacing:-.05em;line-height:1.08;
  transition:transform .5s var(--ease)}
.menu-nav a small{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.34);transition:color .3s}
.menu-nav a:hover,.menu-nav a:focus-visible,.menu-nav a.is-active{color:var(--green-soft);outline:0}
.menu-nav a:hover span,.menu-nav a:focus-visible span,.menu-nav a.is-active span{transform:translateX(14px)}
.menu-nav a:hover small,.menu-nav a:focus-visible small,.menu-nav a.is-active small{color:rgba(255,255,255,.7)}
.menu-nav a.is-current small::after{content:" · sei qui";color:var(--green-soft)}

.menu-side{display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,2.4vh,26px);min-height:0}
.menu-preview{position:relative;margin:0;aspect-ratio:16/10;max-height:38vh;width:100%;overflow:hidden;background:#0a0f0d;
  border-radius:4px;clip-path:inset(0 0 100% 0);opacity:0;
  transition:clip-path .8s var(--ease),opacity .4s}
.menu.open .menu-preview{clip-path:inset(0);opacity:1;transition-delay:.45s}
.menu-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);
  filter:grayscale(1) contrast(1.15) brightness(.55);transition:opacity .5s var(--ease),transform 1.1s var(--ease),filter .8s var(--ease)}
.menu-preview img.is-active{opacity:1;transform:scale(1);filter:grayscale(.15) contrast(1.05) brightness(.82)}
.menu-preview figcaption{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;justify-content:space-between;gap:12px;
  padding:26px 20px 18px;background:linear-gradient(0deg,rgba(6,10,8,.88),transparent);
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.menu-contacts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2vh,22px) 24px}
.menu-block{display:flex;flex-direction:column;gap:6px;min-width:0;opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.menu.open .menu-block{opacity:1;transform:none;transition-delay:calc(.6s + var(--i,0)*.07s)}
.menu-block span{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.menu-block a{font-size:clamp(14px,1.15vw,17px);line-height:1.45;overflow-wrap:anywhere;transition:color .3s}
.menu-block a:hover,.menu-block a:focus-visible{color:var(--green-soft)}

/* ============================================================
   BOTTONI E LINK
   ============================================================ */
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:38px;border:1px solid currentColor;
  padding:17px 26px;border-radius:40px;font-size:15px;font-weight:600;position:relative;overflow:hidden;isolation:isolate;
  margin-top:clamp(18px,3vh,30px);transition:color .35s var(--ease),transform .35s var(--ease),border-color .35s}
.button::before{content:"";position:absolute;inset:0;background:var(--green);z-index:-1;transform:translateY(101%);
  border-radius:40px 40px 0 0;transition:transform .5s var(--ease),border-radius .5s var(--ease)}
.button:hover{color:#fff;border-color:var(--green);transform:translateY(-3px)}
.button:hover::before{transform:translateY(0);border-radius:0}
.button span{font-size:22px;line-height:1}
.button.light{background:var(--paper);border-color:var(--paper);color:var(--dark)}
.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;font-size:16px;font-weight:600;
  position:relative;padding:0 0 12px;margin-top:clamp(16px,2.6vh,28px);transition:color .25s,gap .4s var(--ease)}
.text-link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;opacity:.4;
  transform-origin:right;transition:transform .45s var(--ease)}
.text-link::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--green);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease) .1s}
.text-link:hover{color:var(--green);gap:46px}
.text-link:hover::after{transform:scaleX(0)}
.text-link:hover::before{transform:scaleX(1)}
.text-link span{font-size:22px}

/* ============================================================
   HOME — hero
   ============================================================ */
.home-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--header) + 4vh) var(--gutter) clamp(96px,14vh,150px);background:#0c100f;color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:-4%;background-image:url('assets/azienda/reparto-produzione.webp');background-size:cover;background-position:center;transform:scale(1.04);will-change:transform}
.hero-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(8,14,11,.92) 0%,rgba(8,14,11,.62) 30%,rgba(8,14,11,.16) 58%,transparent 86%),
  linear-gradient(0deg,rgba(5,10,7,.8),transparent 34%),
  linear-gradient(180deg,rgba(5,10,7,.5),transparent 20%)}
.hero-content{position:relative;z-index:1}
.home-hero .eyebrow{color:#cbd6ce;margin-bottom:clamp(18px,3.6vh,38px)}
.home-hero h1{font-size:clamp(56px,min(8.2vw,13vh),136px);line-height:1.01;font-weight:500;letter-spacing:-.065em}
.home-hero h1 em{color:var(--green-soft)}
.hero-description{font-size:clamp(17px,1.5vw,21px);line-height:1.6;margin-top:clamp(16px,3vh,30px);color:#d7dfd9}
.hero-bottom{position:absolute;bottom:26px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;
  align-items:center;gap:20px;border-top:1px solid rgba(255,255,255,.22);padding-top:22px;color:#c8d1cb;font-size:14px;z-index:1}
.hero-bottom a{display:flex;gap:24px;align-items:center;transition:color .3s}
.hero-bottom a:hover{color:#fff}
.cue{animation:cue 2.2s var(--ease) infinite;display:inline-block}
@keyframes cue{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(7px);opacity:.45}}

/* ---------- home: manifesto ---------- */
.manifesto{padding:clamp(70px,12vh,150px) 0;background:var(--paper)}
.manifesto h2{margin:clamp(20px,3.6vh,42px) 0 clamp(26px,4.5vh,54px)}
.manifesto h2 span{color:var(--muted)}
.manifesto-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);border-top:1px solid var(--line);padding-top:clamp(22px,3.4vh,36px)}
.manifesto-grid>p{font-size:clamp(16px,1.6vw,21px);max-width:54ch}
.manifesto-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.manifesto-facts strong{display:block;font-size:clamp(28px,3.2vw,44px);font-weight:500;letter-spacing:-.05em;line-height:1;color:var(--green-deep)}
.manifesto-facts span{display:block;margin-top:10px;font-size:14px;color:var(--muted);line-height:1.5}

/* ---------- home: il navigatore a fasce ---------- */
.navigator{background:var(--ink);color:var(--paper);padding:clamp(60px,9vh,110px) 0 clamp(50px,7vh,90px)}
.nav-head{padding:0 var(--gutter);max-width:1560px;margin:0 auto clamp(26px,4vh,48px)}
.nav-head .eyebrow{color:#9db3a6}
.nav-claim{font-size:clamp(26px,4vw,56px);font-weight:500;letter-spacing:-.05em;line-height:1.1;margin-top:clamp(12px,2vh,22px);min-height:1.2em}
.nav-claim span{display:inline-block;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.nav-claim.swap span{opacity:0;transform:translateY(-8px)}
.slats{display:flex;gap:2px;background:rgba(255,255,255,.14);height:clamp(400px,58vh,600px);
  max-width:1560px;margin:0 auto;padding:0;border-block:1px solid rgba(255,255,255,.14)}
.slat{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:#0f1614;display:block;
  transition:flex-grow .8s var(--ease)}
.slat:hover,.slat:focus-visible{flex-grow:3.6;outline-offset:-3px}
.slat-media{position:absolute;inset:0;display:block}
.slat-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.46) contrast(1.1);transform:scale(1.1);
  transition:filter .9s var(--ease),transform .9s var(--ease)}
.slat:hover .slat-media img,.slat:focus-visible .slat-media img{filter:grayscale(0) saturate(1.65) brightness(1.06) contrast(1.08);transform:scale(1)}
.slat-green{background:linear-gradient(170deg,#1b5340,#0f3628)}
.slat-green img{width:52%;height:auto;object-fit:contain;position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(1);
  filter:none;opacity:.5;transition:opacity .8s var(--ease),transform .9s var(--ease)}
.slat:hover .slat-green img{opacity:.95;transform:translate(-50%,-50%) scale(1.04);filter:none}
.slat-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,13,11,.35) 0%,rgba(9,13,11,.1) 40%,rgba(9,13,11,.9) 100%);
  transition:opacity .7s var(--ease)}
.slat:hover .slat-veil,.slat:focus-visible .slat-veil{opacity:.76}
.slat-open{text-shadow:0 2px 16px rgba(0,0,0,.45)}
.slat-num{position:absolute;top:22px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.16em;color:rgba(255,255,255,.55);z-index:2}
.slat-name-v{position:absolute;left:50%;bottom:26px;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);
  font-size:clamp(14px,1.25vw,18px);font-weight:500;letter-spacing:-.01em;white-space:nowrap;z-index:2;
  transition:opacity .35s var(--ease)}
.slat-open{position:absolute;left:28px;right:28px;bottom:26px;z-index:2;opacity:0;transform:translateY(14px);
  transition:opacity .45s var(--ease) .12s,transform .5s var(--ease) .12s;pointer-events:none}
.slat:hover .slat-name-v,.slat:focus-visible .slat-name-v{opacity:0}
.slat:hover .slat-open,.slat:focus-visible .slat-open{opacity:1;transform:none}
.slat-name{display:block;font-size:clamp(22px,2vw,32px);font-weight:500;letter-spacing:-.04em;line-height:1.1;white-space:nowrap}
.slat-claim{display:block;margin-top:10px;font-size:15px;color:#c3d2c8;line-height:1.5}
.slat-go{display:inline-flex;align-items:center;gap:12px;margin-top:16px;font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green-soft)}
.slat-go i{font-style:normal;font-size:17px}
.nav-hint{max-width:1560px;margin:clamp(18px,2.6vh,30px) auto 0;padding:0 var(--gutter);font-size:13px;color:#8fa497}

/* ---------- home: chiamata ai contatti ---------- */
.home-cta{background:#141a17;color:#f3f5ef;padding:clamp(64px,10vh,140px) 0;overflow:hidden}
.home-cta .eyebrow{color:#b0c1b2}
.contact-headline{font-size:clamp(38px,7vw,110px);line-height:1.08;letter-spacing:-.06em;display:block;position:relative;
  margin-top:clamp(20px,4vh,48px);padding-right:clamp(50px,8vw,100px);font-weight:500}
.contact-headline em{color:#91bd9c}
.contact-headline>span{position:absolute;right:0;top:6px;font-size:clamp(46px,7vw,100px);color:#91bd9c;transition:transform .45s var(--ease)}
.contact-headline:hover>span{transform:translate(12px,-12px)}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(20px,3vw,45px);
  border-top:1px solid rgba(255,255,255,.18);padding-top:clamp(20px,3.4vh,40px);margin-top:clamp(26px,5vh,64px)}
.contact-grid>div{display:flex;flex-direction:column;gap:12px}
.contact-grid span{font-size:13px;color:#a7b5aa}
.contact-grid a{font-size:clamp(16px,1.4vw,19px);line-height:1.6;transition:color .3s}
.contact-grid a:hover{color:#91bd9c}

/* ============================================================
   TESTATA DELLE PAGINE DI SEZIONE
   ============================================================ */
.page-hero{position:relative;min-height:clamp(440px,76svh,760px);display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--header) + 6vh) var(--gutter) clamp(74px,11vh,116px);background:#0c100f;color:#fff;overflow:hidden}
.ph-media{position:absolute;inset:-6%;will-change:transform}
.ph-media img{width:100%;height:100%;object-fit:cover}
.ph-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(8,14,11,.9) 0%,rgba(8,14,11,.45) 44%,transparent 82%),
  linear-gradient(0deg,rgba(5,10,7,.82),transparent 42%),
  linear-gradient(180deg,rgba(5,10,7,.46),transparent 20%)}
.ph-body{position:relative;z-index:1;max-width:1560px;width:100%;margin:0 auto}
.page-hero .eyebrow{color:#cbd6ce;margin-bottom:clamp(14px,2.6vh,30px)}
.ph-lead{font-size:clamp(16px,1.4vw,20px);color:#d3ddd6;margin-top:clamp(16px,2.6vh,28px);max-width:58ch;line-height:1.65}
.ph-foot{position:absolute;bottom:24px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;
  align-items:center;border-top:1px solid rgba(255,255,255,.2);padding-top:18px;font-size:12px;letter-spacing:.14em;color:#b3c0b7;z-index:1}
.tone-green{background:#11382a}
.tone-green .ph-shade{background:radial-gradient(70% 60% at 78% 24%,rgba(102,191,153,.28),transparent 62%),
  radial-gradient(50% 50% at 4% 96%,rgba(47,152,121,.24),transparent 66%),linear-gradient(0deg,rgba(6,24,17,.7),transparent 60%)}

/* ============================================================
   BLOCCHI DI CONTENUTO
   ============================================================ */
.technical-preview{position:relative;background:#e0e7de;overflow:hidden;
  background-image:linear-gradient(rgba(189,201,189,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(189,201,189,.2) 1px,transparent 1px);
  background-size:35px 35px}
.technical-preview::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 40%,rgba(255,255,255,.55),transparent 70%)}
.drawing-label{display:block;font-size:12px;letter-spacing:.08em;padding:clamp(16px,2vh,26px);position:relative;z-index:1}
.garment-drawing{display:block;width:100%;max-height:min(62vh,560px);margin:-14px auto 0;position:relative;z-index:1}
.garment-drawing text{font-family:Manrope,sans-serif;font-size:15px;fill:#45614f}
.drawing-bottom{display:flex;justify-content:space-between;align-items:center;padding:0 clamp(16px,2vh,26px) clamp(16px,2vh,26px);
  font-size:13px;color:#526556;position:relative;z-index:1}
.drawing-symbol{font-size:28px;display:inline-block;transition:transform .6s var(--ease)}
.technical-preview:hover .drawing-symbol{transform:rotate(90deg)}
.drawing-lines{transform-origin:center;transition:transform 1s var(--ease)}

.details-list details{border-bottom:1px solid #c1ccc2;padding:0 0 clamp(14px,2.2vh,24px);margin-bottom:clamp(14px,2.2vh,24px);transition:border-color .3s}
.details-list details[open]{border-color:var(--green)}
.details-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;
  font-size:clamp(17px,1.6vw,21px);font-weight:500;line-height:1.4;transition:color .3s}
.details-list summary:hover{color:var(--green-deep)}
.details-list summary::-webkit-details-marker{display:none}
.details-list summary>span{font-size:26px;font-weight:400;transition:transform .45s var(--ease);flex:none}
.details-list details[open] summary>span{transform:rotate(135deg);color:var(--green)}
.details-list p{color:#536058;font-size:clamp(15px,1.15vw,17px);margin-top:16px}
.details-list details a{display:inline-block;text-decoration:underline;text-underline-offset:5px;margin-top:14px;color:var(--green-deep)}
.details-body{animation:detailIn .55s var(--ease) both}
@keyframes detailIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(26px,4vh,50px)}
.mini-card{background:var(--paper);padding:clamp(20px,2.6vh,34px) clamp(18px,2vw,30px);position:relative;overflow:hidden;isolation:isolate;
  transition:color .45s var(--ease)}
.tinted .mini-card{background:var(--paper-2)}
.mini-card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--dark);transform:translateY(100%);transition:transform .6s var(--ease)}
.mini-card:hover{color:#f2f5f0}
.mini-card:hover::before{transform:translateY(0)}
.mini-card>span{font-size:12px;letter-spacing:.12em;color:var(--muted);transition:color .45s}
.mini-card:hover>span{color:var(--green-soft)}
.mini-card h3{font-size:clamp(18px,1.7vw,24px);font-weight:500;letter-spacing:-.035em;line-height:1.2;margin:clamp(10px,1.6vh,18px) 0 8px}
.mini-card p{font-size:15px;color:#57635b;transition:color .45s}
.mini-card:hover p{color:#c6d2c9}

.tiger-intro{display:flex;justify-content:space-between;gap:clamp(20px,4vw,50px);align-items:flex-end;flex-wrap:wrap}
.tiger-intro p{max-width:380px;color:#536058;font-size:clamp(14px,1.1vw,16px)}
.tiger-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(28px,5vh,60px)}
.tiger-grid>div{border-top:1px solid #adbfae;padding-top:clamp(14px,2.4vh,26px);transition:border-color .4s}
.tiger-grid>div:hover{border-color:var(--green)}
.tiger-grid>div>span{font-size:clamp(15px,1.3vw,18px)}
.tiger-grid strong{display:block;font-size:clamp(50px,6.4vw,92px);font-weight:400;letter-spacing:-.075em;
  margin:clamp(10px,2vh,20px) 0;color:var(--green-deep);line-height:1;font-variant-numeric:tabular-nums}
.tiger-grid strong span{font-size:.42em;margin-left:6px}
.tiger-grid p{font-size:clamp(13px,1.05vw,15px);color:#536058}

.reel-visual{background:#fff;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:1px solid var(--line);aspect-ratio:1.25}
.reel-visual img{width:108%;max-width:none;mix-blend-mode:multiply;transition:transform 1.3s var(--ease)}
.reel-visual:hover img{transform:scale(1.06) rotate(-3deg)}
.reel-visual>span{position:absolute;bottom:20px;left:20px;font-size:12px;letter-spacing:.12em;color:#4d5a52}

.doc-row{display:grid;grid-template-columns:230px 1fr 150px 56px;gap:24px;align-items:center;padding:clamp(18px,2.8vh,30px) 0;
  border-top:1px solid var(--line);position:relative;transition:padding .45s var(--ease),color .3s}
.cert-list{margin-top:clamp(20px,3vh,36px)}
.doc-row::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--green);transform:scaleX(0);
  transform-origin:left;transition:transform .55s var(--ease)}
.doc-row:hover{padding-left:14px;color:var(--green-deep)}
.doc-row:hover::after{transform:scaleX(1)}
.doc-row>span:first-child{font-size:clamp(18px,1.7vw,24px);font-weight:500;letter-spacing:-.03em}
.doc-row>span:nth-child(2){font-size:clamp(14px,1.1vw,16px);color:#647067}
.doc-row>span:nth-child(3){font-size:14px;color:#637168}
.round-arrow{height:clamp(44px,5vh,54px);width:clamp(44px,5vh,54px);border:1px solid #aebbb0;border-radius:50%;
  display:flex;justify-content:center;align-items:center;font-size:23px;color:var(--dark);
  transition:background .35s,color .35s,border-color .35s,transform .45s var(--ease)}
.doc-row:hover .round-arrow{background:var(--green);border-color:var(--green);color:#fff;transform:rotate(45deg)}
.cert-marks{display:flex;align-items:center;gap:24px;margin-top:clamp(16px,2.6vh,28px)}
.cert-marks img{height:clamp(48px,7vh,68px);width:auto;mix-blend-mode:multiply;opacity:.92;transition:opacity .4s,transform .4s var(--ease)}
.cert-marks img:hover{opacity:1;transform:translateY(-4px)}

.turtle-stage{position:relative;min-height:min(42vh,380px);display:flex;align-items:center;justify-content:center}
.turtle-symbol{width:min(340px,86%);position:relative;z-index:2;animation:swim 7s ease-in-out infinite;filter:drop-shadow(0 12px 28px rgba(0,0,0,.3))}
.orbit{position:absolute;border:1px solid rgba(156,203,130,.2);border-radius:50%;width:min(32vh,320px);aspect-ratio:1;animation:spin 26s linear infinite}
.orbit::after{content:"";position:absolute;top:-3px;left:50%;width:6px;height:6px;border-radius:50%;background:var(--green-soft);transform:translateX(-50%)}
.orbit-two{width:min(24vh,245px);animation-duration:18s;animation-direction:reverse}
.orbit-three{width:min(40vh,400px);animation-duration:38s;border-style:dashed;border-color:rgba(156,203,130,.13)}
.orbit-three::after{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes swim{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-16px) rotate(4deg)}}
.circular-words{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(162,190,162,.25);
  margin-top:clamp(24px,4vh,48px);padding-top:clamp(16px,2.6vh,30px);font-size:clamp(17px,2.2vw,30px);letter-spacing:-.035em}
.circular-words i{font-style:normal;color:#a9d890}

.story-place{font-size:clamp(24px,2.6vw,34px);line-height:1.2;margin-bottom:clamp(14px,2.4vh,28px);letter-spacing:-.035em}
.story-place span{font-size:16px;color:var(--muted);letter-spacing:0}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px);margin-top:clamp(26px,4.4vh,60px);
  padding-top:clamp(16px,2.6vh,30px);border-top:1px solid #c4cfc2}
.timeline-step{position:relative;padding-top:clamp(14px,2.2vh,24px)}
.timeline-step::before{content:"";position:absolute;top:0;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 6px rgba(47,152,121,.14)}
.timeline-step .year{display:block;font-size:clamp(28px,3.4vw,50px);font-weight:500;letter-spacing:-.05em;line-height:1}
.timeline-step p{margin-top:12px;font-size:clamp(14px,1.1vw,16px);color:#536058;max-width:300px}
.story-locations{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:clamp(20px,3.4vh,40px)}
.story-locations .locations-label{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.story-locations span:not(.locations-label){border:1px solid #bfcabd;border-radius:30px;padding:8px 18px;transition:background .35s,color .35s,border-color .35s}
.story-locations span:not(.locations-label):hover{background:var(--dark);color:var(--paper);border-color:var(--dark)}
.place-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(26px,4vh,56px);
  border-top:1px solid #c4cfc2;padding-top:clamp(16px,2.6vh,30px)}
.place-grid span{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.place-grid p{margin-top:10px;font-size:16px;line-height:1.6}

.contact-page{background:#141a17;color:#f3f5ef;min-height:calc(100svh - 120px);display:flex;align-items:center;
  padding:calc(var(--header) + 8vh) 0 clamp(60px,9vh,110px);overflow:hidden}
.contact-page .eyebrow{color:#b0c1b2}
.contact-note{margin-top:clamp(22px,3.4vh,40px);font-size:15px;color:#9aac9f}

/* ============================================================
   SEZIONE SUCCESSIVA + PIEDE
   ============================================================ */
.onward{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;background:var(--dark);color:var(--paper);
  padding:clamp(34px,6vh,70px) var(--gutter);position:relative;overflow:hidden;isolation:isolate;transition:color .4s}
.onward::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--green-deep);transform:translateY(101%);transition:transform .6s var(--ease)}
.onward:hover::before{transform:translateY(0)}
.onward-label{grid-column:1;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#93a497;transition:color .4s}
.onward:hover .onward-label{color:#cfe3d6}
.onward-name{grid-column:1;grid-row:2;font-size:clamp(28px,5vw,66px);font-weight:500;letter-spacing:-.05em;line-height:1.1;margin-top:8px;display:flex;align-items:baseline;gap:16px}
.onward-name i{font-style:normal;font-size:13px;letter-spacing:.1em;color:#7e9a8a}
.onward-arrow{grid-column:2;grid-row:1/3;font-size:clamp(30px,4vw,54px);transition:transform .5s var(--ease)}
.onward:hover .onward-arrow{transform:translateX(14px)}

.site-footer{display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:clamp(24px,4vh,40px) var(--gutter);background:var(--paper);font-size:13px;color:#526457}
.is-dark .site-footer{background:#10160f;color:#8ea092;border-top:1px solid rgba(255,255,255,.1)}
.is-dark .site-footer .footer-brand img{filter:invert(1) brightness(1.6)}
.footer-brand{width:170px;opacity:.85;transition:opacity .35s}
.footer-brand:hover{opacity:1}
.footer-brand img{display:block;width:100%;transition:transform .45s var(--ease)}
.footer-brand:hover img{transform:translateY(-3px)}
.site-footer p{font-size:13px}
.site-footer a:hover,.replay:hover{color:var(--green)}
.replay{border:0;background:none;padding:10px 0;cursor:pointer;font-size:13px;transition:color .3s}

.to-top{position:fixed;right:20px;bottom:24px;width:50px;height:50px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper);color:var(--dark);cursor:pointer;z-index:180;display:flex;align-items:center;justify-content:center;
  font-size:19px;opacity:0;transform:translateY(16px) scale(.85);pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s,color .3s,border-color .3s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--dark);color:var(--paper);border-color:var(--dark)}

/* ============================================================
   MOTORI DI RIVELAZIONE
   ============================================================ */
/* Extend reveal masks past the baseline without changing the spacing between lines. */
.js .line{display:block;overflow:hidden;padding-block:.12em .24em;margin-block:-.12em -.24em}
.js .line-in{display:block;transform:translateY(calc(100% + .4em));transition:transform 1s var(--ease);transition-delay:calc(var(--i,0)*.09s)}
.js [data-lines].in .line-in{transform:none}
.js .reveal{transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .reveal:not(.visible){opacity:0;transform:translateY(32px)}
.js [data-stagger]>*{opacity:0;transform:translateY(34px);transition:opacity .85s var(--ease),transform .85s var(--ease);
  transition-delay:calc(var(--i,0)*.08s)}
.js [data-stagger].in>*{opacity:1;transform:none}
.js .garment-body{stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0;transition:stroke-dashoffset 2.2s var(--ease),fill-opacity 2s var(--ease) .4s}
.js .technical-preview.visible .garment-body{stroke-dashoffset:0;fill-opacity:1}
.js .draw-2,.js .draw-3,.js .draw-4{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease) .7s}
.js .draw-3{transition-delay:1s}.js .draw-4{transition-delay:1.3s}
.js .technical-preview.visible :is(.draw-2,.draw-3,.draw-4){stroke-dashoffset:0}
.js .draw-tip,.js .draw-pin{opacity:0;transition:opacity .8s var(--ease) 1.5s}
.js .technical-preview.visible :is(.draw-tip,.draw-pin){opacity:1}
.is-home .hero-content h1 .line-in{transition-delay:calc(var(--intro,2.6s) + var(--i,0)*.1s);transition-duration:1.1s}

/* ============================================================
   LA BOBINA CHE SI SROTOLA — guidata dallo scroll
   Le superfici sono fotografie di pellicola vera: il cilindro e il
   foglio sono costruiti con quella texture piu le ombreggiature.
   ============================================================ */
.reel-scene{position:relative;height:330svh;background:var(--ink);color:#eef3ef}
.reel-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  padding:calc(var(--header) + 3vh) var(--gutter) 5vh;z-index:1;overflow:hidden}
.reel-head .eyebrow{color:#9db3a6}
.reel-heading{font-size:clamp(28px,min(4.6vw,7vh),62px);font-weight:500;letter-spacing:-.055em;line-height:1.08;margin-top:clamp(8px,1.6vh,20px)}
.reel-heading::after{content:"";display:block;width:clamp(38px,6vw,86px);height:2px;background:var(--green-soft);margin-top:clamp(10px,1.8vh,18px)}

.reel-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:flex-end;
  margin:clamp(12px,2.4vh,30px) 0}
.reel-bg{position:absolute;inset:-14% -8%;background:url('assets/film-dark.webp') center/cover no-repeat;
  opacity:.2;filter:blur(1px) saturate(.6);pointer-events:none}

.reel-sheet{position:relative;flex:1 1 auto;height:clamp(150px,32vh,300px);min-width:0}
.reel-tex,.reel-sheen{position:absolute;inset:0;clip-path:inset(0 0 0 var(--cut,100%));border-radius:3px 0 0 3px}
.reel-tex{background:url('assets/film-texture.webp') center center/cover no-repeat;
  filter:brightness(1.45) contrast(.86) saturate(.45);opacity:.97;
  box-shadow:inset 0 26px 40px -26px rgba(255,255,255,.45),inset 0 -26px 40px -26px rgba(0,0,0,.8),
    0 26px 50px -20px rgba(0,0,0,.55)}
.reel-sheen{background:linear-gradient(98deg,transparent 26%,rgba(255,255,255,.17) 46%,rgba(255,255,255,.05) 56%,transparent 74%);
  mix-blend-mode:screen}
.reel-edge{position:absolute;top:-2%;bottom:-2%;left:var(--cut,100%);width:2px;
  background:linear-gradient(180deg,transparent,rgba(198,244,223,.95) 18%,rgba(198,244,223,.95) 82%,transparent);
  box-shadow:0 0 26px rgba(143,211,182,.65);opacity:var(--edge,0)}

.reel-roll::before{content:'';position:absolute;left:-14px;top:6%;bottom:6%;width:18px;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.55));pointer-events:none;z-index:2}
.reel-roll{position:relative;flex:0 0 auto;width:clamp(74px,7.6vw,116px);height:clamp(190px,40vh,370px);
  transform:scaleX(var(--rollw,1));transform-origin:right center;filter:drop-shadow(-26px 26px 44px rgba(0,0,0,.55))}
.reel-body{position:absolute;inset:0;border-radius:4px;overflow:hidden;
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.2) 16%,rgba(255,255,255,.26) 40%,rgba(255,255,255,.34) 52%,rgba(0,0,0,.18) 80%,rgba(0,0,0,.76) 100%),
    url('assets/film-texture.webp');
  background-size:100% 100%,auto 210%;
  background-repeat:no-repeat,repeat-x;
  background-blend-mode:normal;
  border:1px solid rgba(255,255,255,.14)}
.reel-cap{position:absolute;left:-1px;right:-1px;top:-11px;height:22px;border-radius:50%;
  background:radial-gradient(58% 130% at 38% 26%,rgba(255,255,255,.62),rgba(200,220,210,.24) 52%,rgba(0,0,0,.55) 100%);
  border:1px solid rgba(255,255,255,.22)}
.reel-cap::after{content:"";position:absolute;left:34%;right:34%;top:22%;bottom:22%;border-radius:50%;
  background:radial-gradient(60% 120% at 40% 30%,rgba(0,0,0,.6),rgba(0,0,0,.25));border:1px solid rgba(255,255,255,.12)}
.reel-shadow{position:absolute;right:0;bottom:6%;width:46%;height:26px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);filter:blur(6px);pointer-events:none}

.reel-captions{position:relative;height:clamp(50px,7vh,62px)}
.reel-caption{position:absolute;inset:0;font-size:clamp(15px,1.4vw,19px);color:#bed0c5;opacity:0;transform:translateY(12px);
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
.reel-caption.is-on{opacity:1;transform:none;transition:opacity .45s var(--ease) .18s,transform .45s var(--ease) .18s}
.reel-caption b{font-weight:600;color:#fff}
.reel-bar{height:2px;background:rgba(255,255,255,.14);margin-top:clamp(10px,1.8vh,20px)}
.reel-bar span{display:block;height:100%;background:var(--green-soft);transform:scaleX(0);transform-origin:left}

/* ============================================================
   BREAKPOINT
   ============================================================ */
@media(max-width:1100px){
  :root{--header:84px}
  .split{grid-template-columns:1fr;gap:clamp(26px,4vh,46px)}
  .manifesto-grid{grid-template-columns:1fr;gap:30px}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .menu-inner{grid-template-columns:1fr;grid-template-rows:auto auto;row-gap:clamp(18px,3vh,30px)}
  .menu-nav{justify-content:flex-start}
  .menu-preview{display:none}
  .slats{height:clamp(360px,52vh,520px)}
  .slat-open{left:20px;right:20px}
  .doc-row{grid-template-columns:1fr 52px;gap:10px 16px}
  .doc-row>span:first-child{grid-column:1;grid-row:1}
  .doc-row>span:nth-child(2){grid-column:1;grid-row:2}
  .doc-row>span:nth-child(3){grid-column:1;grid-row:3;font-size:12px}
  .doc-row .round-arrow{grid-column:2;grid-row:1/4}
}

@media(max-width:760px){
  :root{--header:74px}
  .burger-label,.pill{display:none}
  .brand{width:180px}
  .header.solid .brand{width:166px}
  .home-hero{padding-bottom:clamp(96px,16vh,140px)}
  .hero-media{background-position:58% center;opacity:1}
  .hero-shade{background:linear-gradient(90deg,rgba(8,16,11,.74),rgba(8,16,11,.2)),linear-gradient(0deg,rgba(8,16,11,.8),transparent 46%),linear-gradient(180deg,rgba(5,10,7,.45),transparent 18%)}
  .home-hero h1{font-size:clamp(48px,12.5vw,80px);line-height:1.06}
  .hero-bottom{bottom:16px;font-size:12px}
  .hero-bottom>span{max-width:130px;line-height:1.55}
  .hero-bottom a{gap:12px}
  .manifesto-facts{grid-template-columns:1fr;gap:18px}
  .manifesto-facts>div{display:flex;align-items:baseline;gap:16px}
  .manifesto-facts span{margin-top:0}
  .card-grid{grid-template-columns:1fr}
  .block-top{flex-direction:column;align-items:flex-start;gap:8px}
  .tiger-grid{grid-template-columns:1fr;gap:20px}
  .tiger-grid>div{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:center}
  .tiger-grid>div>span{grid-column:1;grid-row:1}
  .tiger-grid strong{font-size:52px;grid-column:2;grid-row:1/3;text-align:right;margin:0}
  .tiger-grid p{grid-column:1;grid-row:2}
  .timeline,.place-grid{grid-template-columns:1fr;gap:22px}
  .timeline-step p{max-width:none}
  .turtle-symbol{width:min(250px,80%)}
  .orbit{width:225px}.orbit-two{width:172px}.orbit-three{width:280px}
  .contact-headline{padding-right:0;padding-bottom:66px}
  .contact-headline>span{top:auto;bottom:0;right:0}
  .menu-nav a{grid-template-columns:minmax(0,1fr);gap:10px}
  .menu-nav a small{display:none}
  .menu-nav a span{font-size:clamp(21px,6.2vw,32px)}
  .menu-contacts{gap:16px}
  .page-hero{min-height:auto;padding-bottom:clamp(80px,12vh,110px)}
  .ph-foot{font-size:11px;letter-spacing:.1em}
  .to-top{right:14px;bottom:14px;width:44px;height:44px}
  .onward-arrow{font-size:30px}

  /* il navigatore diventa una pila di fasce */
  .slats{flex-direction:column;height:auto;gap:1px}
  .slat{flex:none;min-height:104px;display:flex;align-items:center}
  .slat:hover,.slat:focus-visible{flex-grow:0}
  .slat-media img{filter:grayscale(1) brightness(.4)}
  .slat-green img{width:auto;height:70%;opacity:.55}
  .slat-num{top:14px;left:20px;right:auto;text-align:left}
  .slat-name-v{display:none}
  .slat-open{position:relative;left:auto;right:auto;bottom:auto;opacity:1;transform:none;padding:26px 20px 20px;width:100%}
  .slat-claim{display:none}
  .slat-go{margin-top:8px;font-size:11px}
  .nav-hint{display:none}

  /* la bobina: scena piu compatta */
  .reel-scene{height:280svh}
  .reel-sheet{height:clamp(120px,22vh,190px)}
  .reel-roll{width:clamp(56px,14vw,84px);height:clamp(150px,28vh,230px)}
  .reel-captions{height:78px}
}

/* ---------- riduzione del movimento ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .intro{display:none}
  .curtain{display:none}
  .grain,.turtle-symbol,.orbit{animation:none}
  .js .reveal:not(.visible){opacity:1;transform:none}
  .js [data-stagger]>*{opacity:1;transform:none}
  .js .line-in{transform:none}
  .js .garment-body{stroke-dashoffset:0;fill-opacity:1}
  .js :is(.draw-2,.draw-3,.draw-4){stroke-dashoffset:0}
  .js :is(.draw-tip,.draw-pin){opacity:1}
}

/* ===== v16: native scrolling + section-specific cinematic entrances ===== */
html{scroll-padding-top:88px;scrollbar-gutter:stable}
body{overflow-x:clip}
body.locked{position:fixed;left:0;right:0;width:100%;overflow:hidden;padding-right:var(--scrollbar-gap,0px)}
.header.menu-open{padding-right:calc(var(--gutter) + var(--scrollbar-gap,0px))}
.grain{animation:none;opacity:.075}
.header{transition:background .3s var(--ease),transform .35s var(--ease),border-color .3s}
.header.solid{height:var(--header)}
.header.solid .brand{width:230px}
.nav-claim{min-height:2.15em}
.intro{display:none;background:var(--paper);isolation:isolate}
.js .intro.is-playing{display:grid;animation:introExit .65s var(--ease) 1.55s both}
.intro.finished{display:none}
.intro-sheet{animation:none;background:radial-gradient(ellipse at 50% 52%,#e5eee4 0%,var(--paper) 60%)}
.intro-stage{width:min(72vw,500px);animation:none}
.intro-lock{z-index:2}
.intro-word{clip-path:inset(0 100% 0 0);animation:logoUnveil 1.35s var(--ease) .12s both}
.intro-turtle{top:calc(100% + 33px);width:40px;left:0;opacity:0;animation:logoTurtle 1.45s var(--ease) .05s both}
.intro-turtle img{animation:none;transform:rotate(90deg);filter:drop-shadow(0 6px 8px #21382a12)}
.intro-rule{margin-top:36px;background:#2f987945;height:1px;animation:ruleDraw 1.4s var(--ease) .05s both}
.intro-tag{font-size:12px;letter-spacing:.28em;margin-top:32px;animation:tagIn .65s var(--ease) .8s both}
.intro-halo{position:absolute;inset:-140px -30px;border:1px solid #2f987913;border-radius:50%;z-index:-1;animation:haloExpand 1.8s var(--ease) both}
@keyframes logoUnveil{from{clip-path:inset(0 100% 0 0);transform:translateY(8px)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes logoTurtle{0%{transform:translate(-100%,-50%) rotate(-8deg);opacity:0}12%{opacity:1}82%{opacity:1}100%{transform:translate(-50%,-50%) rotate(0deg);left:102%;opacity:0}}
@keyframes haloExpand{from{opacity:0;transform:scale(.75)}45%{opacity:1}to{opacity:0;transform:scale(1.15)}}
@keyframes introExit{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
.section-entry{display:none;position:fixed;inset:0;z-index:240;background:#0c1510;color:#f7f8f5;pointer-events:none;overflow:hidden;isolation:isolate}
.section-entry.is-playing{display:grid;place-items:center;animation:entryExit .55s var(--ease) .6s both}
.entry-content{display:flex;align-items:baseline;gap:22px;position:relative;z-index:3;animation:entryType .6s var(--ease) both}
.entry-number{color:#8bbc9d;font-size:15px;font-variant-numeric:tabular-nums}.entry-title{font-size:clamp(34px,6vw,86px);letter-spacing:-.05em}
.entry-line{position:absolute;left:0;right:0;bottom:-24px;height:1px;background:#f4f7ee50;transform-origin:left;animation:ruleDraw .8s var(--ease) both}
.entry-texture{position:absolute;inset:0;background:url('assets/azienda/fogli-uscita.webp') center/cover;opacity:.2;animation:entryFilm 1.2s var(--ease) both}
.entry-wash{position:absolute;inset:0;background:#174934;transform-origin:left;animation:entryWash 1.2s var(--ease) both}
.entry-turtle{display:none}
.entry-coprispalla .entry-texture{background-image:url('assets/azienda/coprispalla-linea.webp');opacity:.15}
.entry-protezioni .entry-texture{background-image:url('assets/azienda/bobine-pluriball.webp');opacity:.2;animation:entryCushion 1s var(--ease) both}
.entry-buste .entry-texture{animation:entryFold 1s var(--ease) both}
.entry-macchine .entry-texture{background-image:url('assets/azienda/macchina-rulli.webp');animation:entryFilm .85s var(--ease) both}
.entry-azienda .entry-texture{background-image:url('assets/azienda/sede-insegna.webp')}
.entry-sostenibilita.is-playing{animation-delay:1.2s;animation-duration:.6s}
.entry-sostenibilita .entry-content{align-self:end;margin-bottom:17vh;animation-delay:.15s}
.entry-sostenibilita .entry-title{font-size:clamp(32px,5vw,65px)}
.entry-sostenibilita .entry-wash{background:radial-gradient(ellipse at 65% 35%,#5a9c76,#123b2a 70%);animation:cleanSweep 1.35s var(--ease) .05s both}
.entry-sostenibilita .entry-texture{background-image:url('assets/azienda/nastro-psv.webp');opacity:.48;animation:cleanSurface 1.3s var(--ease) .05s both}
.entry-sostenibilita .entry-turtle{display:block;position:absolute;width:clamp(68px,10vw,140px);top:30%;left:0;opacity:0;animation:cleanTurtle 1.45s var(--ease) .05s both;filter:drop-shadow(0 0 45px #c6edcc50)}
@keyframes entryExit{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
@keyframes entryType{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes entryFilm{from{transform:translateX(12%) scale(1.2);opacity:.05}to{transform:translateX(0) scale(1.04);opacity:.2}}
@keyframes entryFold{from{clip-path:inset(0 50%);transform:scaleX(.7)}to{clip-path:inset(0);transform:scaleX(1)}}
@keyframes entryCushion{from{transform:scale(1.2);filter:blur(7px)}to{transform:scale(1);filter:blur(0)}}
@keyframes entryWash{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cleanSweep{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes cleanSurface{from{clip-path:inset(0)}to{clip-path:inset(0 0 0 100%);opacity:0}}
@keyframes cleanTurtle{0%{transform:translate(-110%,22px) rotate(85deg);opacity:0}12%{opacity:.95}65%{opacity:1}100%{left:100%;transform:translate(20%,-18px) rotate(100deg);opacity:0}}
.js .page-hero .line-in{transition-delay:calc(var(--entry-delay,0s) + var(--i,0)*.09s)}
/* Product photographs form the animation, rather than a synthetic CSS cylinder. */
.film-study{background:var(--ink);color:#eef3ef}
.study-heading{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:40px}
.study-heading .display{margin-top:18px}.study-heading>p{color:#acbfb0;font-size:18px;line-height:1.65}
.study-window{position:relative;height:clamp(300px,50vw,550px);overflow:hidden;background:#eef1e9}
.study-panel{position:absolute;inset:0;opacity:0;transform:scale(1.055);transition:opacity .8s var(--ease),transform 1.2s var(--ease);pointer-events:none;overflow:hidden}
.study-panel.is-active{opacity:1;transform:scale(1);z-index:1}
.study-panel img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:4%}
.study-panel>span{position:absolute;left:30px;bottom:26px;font-size:14px;letter-spacing:.05em;color:#123426;background:#f7f8f5e0;padding:10px 16px;border-radius:2px}
.film-detail img,.film-application img{object-fit:cover;mix-blend-mode:normal;padding:0}
.film-detail img{filter:contrast(.8) brightness(1.2);transform:translateX(-4%) scale(1.2);transition:transform 2s var(--ease)}
.film-detail.is-active img{transform:translateX(4%) scale(1.2)}
.film-application img{filter:saturate(.55)}
.study-scan{position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#ffffff55 50%,transparent 65%);transform:translateX(-110%)}
.material-experience.in .study-scan{animation:filmScan 2.4s var(--ease) .15s both}
@keyframes filmScan{to{transform:translateX(110%)}}
.study-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.study-controls button{background:none;color:#98ada1;border:0;border-top:1px solid #ffffff25;text-align:left;padding:20px 0 6px;cursor:pointer;display:flex;gap:20px;font-size:14px;transition:color .3s,border-color .3s}
.study-controls button span{font-size:20px;letter-spacing:-.025em}.study-controls button[aria-pressed=true]{border-color:#8bc6a4;color:#f0f7ef}
@media(max-width:760px){.header.solid .brand{width:180px}.intro-turtle{width:30px}.intro-rule{margin-top:32px}.intro-tag{font-size:11px}.study-heading{display:block}.study-heading>p{margin-top:22px;font-size:17px}.study-controls{gap:12px}.study-controls button{display:block;padding-top:14px}.study-controls button span{display:block;font-size:15px;margin-top:8px}.study-panel>span{left:15px;bottom:15px;font-size:12px}.entry-content{gap:14px}.nav-claim{min-height:2.2em}}
@media(prefers-reduced-motion:reduce){.section-entry.is-playing,.js .intro.is-playing{display:none}.study-panel,.study-panel img{transition:none;transform:none!important}.study-scan{display:none}.js .page-hero .line-in{transition-delay:0s}}

/* ===== Brochures become an editorial product story ===== */
.editorial-head{margin-bottom:clamp(30px,5vw,68px)}
.editorial-head .display{margin-top:22px;max-width:1050px}
.editorial-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.editorial-split h3,.material-note h3,.compression-story h3,.zero-detail h3,.certificate-facts h3,.audience-grid h3{font-size:clamp(24px,2.3vw,34px);font-weight:500;letter-spacing:-.04em;line-height:1.2}
.editorial-photo{margin:0;min-width:0;overflow:hidden}
.editorial-photo img{display:block;width:100%;aspect-ratio:1.3;object-fit:cover;transition:transform 1s var(--ease);background:#e4e9df}
.editorial-photo figcaption{font-size:14px;line-height:1.5;margin-top:16px;color:#516353}
.editorial-photo:hover img{transform:scale(1.025)}
.portrait-photo img{aspect-ratio:.95;object-fit:contain;background:#101918}
.editorial-dark{background:#131c18;color:#edf3ea}
.editorial-dark .lead{color:#c3d0c5}.editorial-dark em{color:#7bb991}
.editorial-dark .eyebrow{color:#9fb9a6}.editorial-dark figcaption{color:#a2b7a8}
.brochure-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px;margin-top:55px}
.brochure-gallery .editorial-photo img{aspect-ratio:1.2;object-fit:cover}
.material-properties{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.material-properties span{border:1px solid #9db29e55;border-radius:40px;padding:10px 17px;font-size:15px}
.material-note{display:grid;grid-template-columns:1fr 1.5fr;gap:50px;border-top:1px solid #97b39b35;padding-top:35px;margin-top:55px}
.material-note p,.compression-story p,.zero-detail p{font-size:18px;line-height:1.75;color:#58665b}
.editorial-dark .material-note p,.editorial-dark .zero-detail p{color:#c3d0c5}
.material-list{display:grid;gap:0;border-top:1px solid var(--line)}
.material-list span{padding:17px 0;border-bottom:1px solid var(--line);font-size:19px;letter-spacing:-.02em}
.compression-story{display:grid;grid-template-columns:.65fr 1.35fr;gap:65px;align-items:center;margin-top:65px;background:var(--paper-2);padding:45px}
.compression-story h3{margin-bottom:18px}.compression-story .editorial-photo{margin-top:28px}
.compression-story .editorial-photo img{aspect-ratio:auto;object-fit:contain;background:#fff}
.compression-story>div:first-child .editorial-photo img{aspect-ratio:.8;object-fit:cover}
.large-measure{font-size:clamp(96px,13vw,190px);letter-spacing:-.09em;line-height:1;color:#96cba8;font-weight:500;margin-bottom:30px}
.large-measure span{font-size:.24em;letter-spacing:-.025em;margin-left:12px}
.zero-detail{display:grid;grid-template-columns:.6fr 1fr;gap:50px;align-items:center;margin:55px 0}
.zero-detail .editorial-photo img{max-height:340px;object-fit:contain;background:#131c18}
.zero-detail p{margin-top:20px;max-width:60ch}
.technical-data{border-top:1px solid #a0b39b66;border-bottom:1px solid #a0b39b66;padding:26px 0;margin-top:45px}
.technical-data summary{font-size:clamp(19px,2vw,26px);list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:25px;line-height:1.4}
.technical-data summary::-webkit-details-marker{display:none}.technical-data summary span{transition:transform .3s}.technical-data[open] summary span{transform:rotate(45deg)}
.table-scroll{overflow-x:auto;margin-top:30px;overscroll-behavior-x:contain}
table{border-collapse:collapse;width:100%;font-size:16px;text-align:left;line-height:1.5}caption{text-align:left;font-size:14px;padding-bottom:20px;color:#bbd0bc}th,td{padding:18px 20px;border-bottom:1px solid #a8bbaa44}thead th{font-weight:500;color:#aaceb0}tbody th{font-weight:400}td{font-variant-numeric:tabular-nums}
.source-note{font-size:14px!important;line-height:1.65!important;color:#647568;margin-top:24px;max-width:90ch}
.editorial-dark .source-note{color:#a4b9aa}
.application-gallery,.biodiversity-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
.application-gallery .editorial-photo img,.biodiversity-gallery .editorial-photo img{aspect-ratio:1.2;filter:saturate(.65)}
.biodiversity-gallery .editorial-photo:hover img{filter:saturate(1)}
.bubble-study{background:#dfe7de}
.bubble-study .study-heading>p{color:#546956}
.bubble-window{height:clamp(280px,44vw,580px);position:relative;overflow:hidden;background:#102118;isolation:isolate}
.bubble-photo{width:100%;height:100%;object-fit:cover;filter:saturate(.35) contrast(1.05);transition:transform .55s var(--ease);will-change:transform}
.bubble-light{position:absolute;inset:0;background:linear-gradient(105deg,transparent 25%,#ffffff55 45%,transparent 66%);transform:translateX(-115%);pointer-events:none}
.bubble-study.in .bubble-light{animation:bubbleLight 2.2s var(--ease) both}
.bubble-study.in .bubble-window{animation:bubbleUnfold 1.3s var(--ease) both}
.bubble-caption{position:absolute;bottom:24px;left:28px;color:#fff;font-size:14px;background:#0f211ac9;padding:10px 17px}
.bubble-tools{display:grid;grid-template-columns:auto 1fr auto auto;gap:24px;align-items:center;margin-top:25px}
.bubble-tools label{font-size:17px}.bubble-tools output{font-size:14px;min-width:98px;color:#425846}
.bubble-tools input{accent-color:var(--green-deep);width:100%;height:32px;cursor:pointer}
.motion-replay{font:inherit;font-size:14px;border:0;border-bottom:1px solid currentColor;background:none;padding:10px 0;color:inherit;cursor:pointer;white-space:nowrap}
@keyframes bubbleLight{to{transform:translateX(115%)}}
@keyframes bubbleUnfold{from{clip-path:inset(0 18% 0 18%);filter:blur(4px)}to{clip-path:inset(0);filter:blur(0)}}
.eco-window{height:clamp(280px,46vw,590px);position:relative;overflow:hidden;background:#12291d;isolation:isolate}
.eco-world{width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:saturate(.8)}
.eco-cloud{position:absolute;inset:0;background:linear-gradient(#111e1bd9,#0d1b1acf),url('assets/azienda/macchina-rulli.webp') center/cover;backdrop-filter:blur(5px)}
.eco-sweep{position:absolute;inset:0;background:linear-gradient(95deg,transparent 40%,#b9efc430 50%,transparent 60%);transform:translateX(-100%)}
.eco-traveller{position:absolute;width:clamp(55px,8vw,100px);left:0;top:40%;transform:rotate(90deg);opacity:0;filter:drop-shadow(0 0 26px #bbf2b850)}
.eco-story.in .eco-cloud{animation:cleanSurface 2.7s var(--ease) .3s both}.eco-story.in .eco-traveller{animation:cleanTurtle 2.8s var(--ease) .3s both}.eco-story.in .eco-sweep{animation:filmScan 2.7s var(--ease) .3s both}
.eco-caption{display:flex;align-items:center;justify-content:space-between;gap:35px;margin-top:26px}.eco-caption p{font-size:18px;max-width:700px;color:#b7ccbe}
.cycle-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-top:1px solid var(--line);padding-top:30px;margin-top:35px}.cycle-steps span{font-size:14px;color:var(--green)}.cycle-steps h3{font-size:20px;margin-top:15px}.cycle-steps p{font-size:15px;color:#5a6c5d;margin-top:10px}
.eco-pair{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center;margin-top:55px}.eco-pair img{aspect-ratio:1.6;object-fit:contain;background:var(--paper)}
.audience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:55px}.audience-grid article{border-top:1px solid #9eb4a1;padding-top:25px}.audience-grid span{font-size:14px;color:#5d8065}.audience-grid h3{font-size:26px;margin:25px 0 14px}.audience-grid p{font-size:17px;color:#576c5b}
.cam-art{display:grid;gap:30px}.cam-art img{aspect-ratio:auto;object-fit:contain}.cam-art figure:last-child{max-width:150px;justify-self:center;mix-blend-mode:multiply}
.carbon-measure{font-size:clamp(80px,10vw,160px);font-weight:500;letter-spacing:-.065em;color:#316d4e;line-height:1}.carbon-measure sub{font-size:.4em}.carbon-measure>span{display:block;font-size:20px;letter-spacing:0;margin-top:25px}
.puglia-lockup{max-width:460px;width:100%;justify-self:center}.puzzle-photo img{object-fit:contain;aspect-ratio:1.3;background:var(--paper);mix-blend-mode:multiply}
blockquote{margin:35px 0;font-size:clamp(26px,3vw,46px);line-height:1.15;letter-spacing:-.04em;padding-left:25px;border-left:2px solid var(--green);color:var(--green-deep)}
.annex-view{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:35px;align-items:center}.annex-view img,.certificate-image img{aspect-ratio:auto;object-fit:contain}.annex-view h3{font-size:26px;font-weight:500;line-height:1.25}.annex-view p{font-size:17px;margin-top:20px;color:#4f6556}.certificate-image{max-width:650px;margin:35px auto 0}
.certificate-facts{display:grid;grid-template-columns:1fr 1fr;gap:65px}.certificate-facts article{border-top:1px solid #a8b6a3;padding-top:28px}.certificate-facts article>span{font-size:15px;letter-spacing:.1em;color:#5d7e65}.certificate-facts h3{margin:22px 0}.certificate-facts p{font-size:18px;color:#546757}.certificate-facts dl{display:grid;grid-template-columns:1fr 1fr;font-size:15px;gap:14px;margin-top:28px}.certificate-facts dd{margin:0}.certificate-facts a{display:inline-block;border-bottom:1px solid #778c76;padding-bottom:8px;margin-top:22px;font-size:16px}
@media(max-width:1100px){.editorial-split{gap:35px}.brochure-gallery{gap:25px 20px}.application-gallery,.biodiversity-gallery{grid-template-columns:repeat(3,1fr)}.audience-grid{grid-template-columns:1fr 1fr}.compression-story{gap:35px;padding:28px}.bubble-tools{grid-template-columns:auto 1fr auto}.bubble-tools .motion-replay{grid-column:3}.editorial-head .display{font-size:clamp(36px,5vw,60px)}}
@media(max-width:760px){.editorial-split,.material-note,.compression-story,.zero-detail,.eco-pair,.annex-view,.certificate-facts{grid-template-columns:1fr;gap:30px}.editorial-head{margin-bottom:30px}.editorial-head .display{font-size:clamp(32px,8.5vw,50px)}.editorial-head .eyebrow{font-size:12px}.editorial-split .lead{font-size:18px}.brochure-gallery{grid-template-columns:1fr 1fr;gap:28px 16px;margin-top:35px}.brochure-gallery figcaption{font-size:14px}.brochure-gallery img{aspect-ratio:1}.portrait-photo{max-width:500px}.material-note{margin-top:35px}.material-note p,.compression-story p,.zero-detail p{font-size:17px}.material-list span{font-size:17px}.compression-story{padding:24px;margin-top:40px}.compression-story>div:first-child .editorial-photo img{aspect-ratio:1.6}.large-measure{font-size:110px}.zero-detail{margin:35px 0}.zero-detail .editorial-photo img{height:260px}.technical-data{padding:22px 0;margin-top:30px}.table-scroll table{font-size:14px;min-width:530px}th,td{padding:14px}.bubble-tools{grid-template-columns:1fr auto;gap:10px 20px}.bubble-tools input{grid-column:1/3;grid-row:2}.bubble-tools output{grid-column:2;grid-row:1;text-align:right}.bubble-tools .motion-replay{grid-column:1/3;justify-self:start;margin-top:6px}.bubble-caption{left:15px;bottom:15px;font-size:12px;padding:8px 12px}.eco-caption{display:block}.eco-caption p{font-size:17px}.eco-caption button{margin-top:16px}.cycle-steps{gap:12px}.cycle-steps h3{font-size:17px}.cycle-steps p{font-size:14px}.audience-grid{gap:28px 20px;margin-top:40px}.audience-grid h3{font-size:23px}.audience-grid p{font-size:16px}.carbon-measure{font-size:100px}.source-note{font-size:14px!important}.certificate-facts dl{font-size:14px}.study-window{height:330px}}
@media(prefers-reduced-motion:reduce){.bubble-photo{will-change:auto}.eco-cloud,.eco-traveller,.eco-sweep,.bubble-light{display:none}.bubble-study.in .bubble-window{animation:none}.editorial-photo:hover img{transform:none}.js .line-in{transform:none}}
@media print{.intro,.section-entry,.header,.menu,.grain,.scroll-progress,.to-top,.onward,.motion-replay{display:none!important}.js .reveal,.js [data-stagger]>*{opacity:1!important;transform:none!important}.js .line-in{transform:none!important}.block{break-inside:auto}.brochure-gallery{grid-template-columns:repeat(3,1fr)}}

/* v17 — an articulated swimmer, no progress metaphor. */
.js .intro.is-playing{animation:introOceanExit .65s var(--ease) 3.15s both}
.intro-sheet{background:radial-gradient(ellipse at 80% 60%,#cfe3d6 0%,#edf1e8 35%,var(--paper) 72%)}
.intro-stage{width:min(92vw,1000px);position:relative}
.intro-lock{width:100%;position:relative}
.intro-word{width:77%;clip-path:none;animation:largeLogoArrive 1.15s var(--ease) .4s both}
.intro-turtle{left:78%;top:50%;width:25%;opacity:1;transform:translateY(-50%);animation:turtleArrival 2.65s cubic-bezier(.25,.5,.35,1) .05s both;filter:drop-shadow(0 18px 20px #1d503329)}
.sea-turtle{display:block;width:100%;height:auto;overflow:visible}
.sea-turtle .turtle-body{transform-origin:50% 50%;animation:turtleBuoyancy 1.6s ease-in-out infinite}
.flipper{transform-box:view-box}
.flipper-front-top{transform-origin:157px 78px;animation:flipperTop 1.1s ease-in-out infinite}
.flipper-front-bottom{transform-origin:155px 128px;animation:flipperBottom 1.1s ease-in-out -.18s infinite}
.flipper-back-top{transform-origin:72px 82px;animation:rearPaddle 1.1s ease-in-out -.35s infinite}
.flipper-back-bottom{transform-origin:72px 123px;animation:rearPaddle 1.1s ease-in-out -.7s infinite reverse}
.intro-tag{text-align:left;margin-left:1%;margin-top:26px;font-size:clamp(12px,1.2vw,15px);letter-spacing:.34em;animation:tagIn .8s var(--ease) 1.55s both}
.intro-water{position:absolute;inset:-70vh -50vw;z-index:-1;pointer-events:none;overflow:hidden;transform:rotate(-22deg)}
.intro-water i{position:absolute;width:90%;height:26%;border-radius:50%;background:radial-gradient(ellipse,#b3d7c126,transparent 70%);filter:blur(20px);animation:waterDrift 3.8s ease-in-out both}
.intro-water i:nth-child(1){left:5%;top:15%}.intro-water i:nth-child(2){left:0;top:45%;animation-delay:.25s}.intro-water i:nth-child(3){left:25%;top:65%;animation-delay:.5s}
@keyframes flipperTop{0%,100%{transform:rotate(-17deg) scaleY(.91)}50%{transform:rotate(24deg) scaleY(1.06)}}
@keyframes flipperBottom{0%,100%{transform:rotate(18deg) scaleY(.92)}50%{transform:rotate(-24deg) scaleY(1.05)}}
@keyframes rearPaddle{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(12deg)}}
@keyframes turtleBuoyancy{0%,100%{transform:translateY(2px) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
@keyframes turtleArrival{0%{transform:translate(-105vw,28vh) rotate(-24deg) scale(1.3);opacity:0}8%{opacity:1}48%{transform:translate(-40vw,8vh) rotate(-14deg) scale(1.12)}78%{transform:translate(-6vw,-65%) rotate(-8deg)}100%{transform:translate(0,-50%) rotate(0);opacity:1}}
@keyframes largeLogoArrive{from{opacity:0;filter:blur(8px);transform:translateY(18px) scale(.96)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes waterDrift{from{opacity:0;transform:translateX(-15%) scale(.8)}45%{opacity:1}to{opacity:.4;transform:translateX(18%) scale(1.2)}}
@keyframes introOceanExit{to{opacity:0;transform:scale(1.035);visibility:hidden}}
.entry-sostenibilita .entry-turtle{width:clamp(140px,20vw,270px);animation:entrySwimmer 1.65s cubic-bezier(.2,.55,.4,1) both}
.entry-sostenibilita .entry-line{display:none}
@keyframes entrySwimmer{from{transform:translateX(-110%) rotate(-12deg);opacity:0}20%{opacity:1}80%{opacity:1}to{left:100%;transform:translateX(10%) rotate(-6deg);opacity:0}}
[data-page="sostenibilita"] .page-hero{background:#0a2a20}
[data-page="sostenibilita"] .page-hero img{object-position:65% 50%;filter:none}
.slat[href="sostenibilita.html"] .slat-media img{object-position:62% 50%}
.eco-world{object-position:65% 50%;filter:none}
@media(max-width:760px){.intro-word{width:82%}.intro-turtle{width:29%;left:72%;top:105%}.intro-tag{margin-top:22px;font-size:12px}.entry-sostenibilita .entry-turtle{width:170px}}
@media(prefers-reduced-motion:reduce){.sea-turtle .turtle-body,.sea-turtle .flipper{animation:none}.js .intro.is-playing{display:none}.entry-sostenibilita .entry-turtle{animation:none}}
[data-page="sostenibilita"] .ph-shade{background:linear-gradient(90deg,#061c17c9,transparent 85%),linear-gradient(180deg,#051b1870,transparent 30%,#061c1780)}
[data-page="sostenibilita"] .page-hero em{color:#b3d9c1}
.eco-traveller{width:clamp(130px,18vw,240px);transform:none}
.eco-story.in .eco-traveller{animation:entrySwimmer 2.8s var(--ease) .3s both}
@media(max-width:760px){
 [data-page="sostenibilita"] .page-hero{padding-top:340px}
 [data-page="sostenibilita"] .ph-media{inset:0 0 auto;height:440px}
 [data-page="sostenibilita"] .ph-shade{background:linear-gradient(180deg,#061c1740 0,transparent 20%,#0a2a20 54%)}
}

/* v18 — only the original mark, quietly revealed. */
.js .intro.is-playing{animation:minimalIntroExit .45s ease 1.7s both}
.intro-sheet{background:var(--paper);animation:none}
.intro-stage{width:min(82vw,760px);animation:none}
.intro-lock{width:100%}
.intro-word{width:100%;clip-path:none;transform:none;filter:none;
 -webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%);mask-image:linear-gradient(90deg,#000 40%,transparent 60%);
 -webkit-mask-size:250% 100%;mask-size:250% 100%;
 animation:minimalLogoReveal 1.35s cubic-bezier(.22,.61,.36,1) .1s both}
@keyframes minimalLogoReveal{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes minimalIntroExit{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.js .intro.is-playing{display:none}.intro-word{animation:none;-webkit-mask-image:none;mask-image:none}}

/* v20 — white signature and a small material-specific line drawing. */
.section-entry.entry-minimal{background:#fff;color:#26352f}
.section-entry.entry-minimal.is-playing{animation:signatureExit .35s ease 1.5s both}
.section-signature{display:flex;flex-direction:column;align-items:center;gap:28px;width:min(78vw,510px)}
.section-logo{width:100%;height:auto;animation:signatureAppear .6s ease .05s both}
.section-object{width:112px;height:112px;animation:signatureAppear .35s ease .1s both}
.section-sketch{width:100%;height:100%;overflow:visible}
.motion-trace{stroke-dasharray:420;stroke-dashoffset:420;animation:sketchDraw 1.1s cubic-bezier(.25,.6,.3,1) .12s forwards}
.motion-drape{transform-origin:80px 70px;animation:drapeSettle 1.1s ease .15s both}
.motion-reel{transform-origin:59px 75px;animation:reelTurn 1.2s cubic-bezier(.2,.6,.3,1) .1s both}
.motion-film{stroke-dasharray:110;stroke-dashoffset:110;animation:sketchDraw 1.2s ease .1s forwards}
.motion-bubble{transform-box:fill-box;transform-origin:center;animation:bubbleCompose .65s cubic-bezier(.2,.8,.25,1.2) calc(.1s + var(--n)*.065s) both}
.motion-fold{transform-origin:80px 56px;animation:foldSeal 1s ease .15s both}
.motion-seam{stroke-dasharray:60;stroke-dashoffset:60;animation:sketchDraw .55s ease .65s forwards}
.motion-package{animation:packageArrive 1.15s cubic-bezier(.2,.7,.3,1) .1s both}
.motion-press{animation:pressSeal 1.2s ease .1s both}
.motion-turtle{animation:quietSwim 1.4s ease-in-out both}
.motion-fin-top{transform-origin:96px 66px;animation:quietFin .7s ease-in-out 2 alternate}
.motion-fin-bottom{transform-origin:97px 96px;animation:quietFin .7s ease-in-out 2 alternate-reverse}
.motion-sun{stroke-dasharray:70;stroke-dashoffset:70;animation:sketchDraw .7s ease .55s forwards}
.motion-dot{fill:currentColor;animation:contactDot .65s ease calc(.3s + var(--n)*.15s) both}
@keyframes signatureAppear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes signatureExit{to{opacity:0;visibility:hidden}}
@keyframes sketchDraw{to{stroke-dashoffset:0}}
@keyframes drapeSettle{from{opacity:0;transform:translateY(-13px) scaleX(.9)}to{opacity:1;transform:none}}
@keyframes reelTurn{from{transform:rotate(-100deg)}to{transform:rotate(0)}}
@keyframes bubbleCompose{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}
@keyframes foldSeal{from{transform:scaleY(-1);opacity:.2}to{transform:scaleY(1);opacity:1}}
@keyframes packageArrive{from{transform:translateX(-28px);opacity:0}45%{opacity:1}to{transform:none}}
@keyframes pressSeal{0%,100%{transform:translateY(0)}55%{transform:translateY(16px)}}
@keyframes quietSwim{from{transform:translateX(-14px);opacity:0}25%{opacity:1}to{transform:translateX(8px);opacity:1}}
@keyframes quietFin{from{transform:rotate(-10deg)}to{transform:rotate(12deg)}}
@keyframes contactDot{0%{opacity:0;transform:translateY(4px)}60%{opacity:1;transform:translateY(-3px)}100%{opacity:1;transform:none}}
@media(max-width:760px){.section-signature{width:min(78vw,400px);gap:20px}.section-object{width:96px;height:96px}}
@media(prefers-reduced-motion:reduce){.section-entry.entry-minimal.is-playing{display:none}.section-signature *{animation:none!important}}

/* Coprispalla: the cover settles over its hanger. */
.motion-hanger{stroke-dasharray:1;stroke-dashoffset:1;animation:sketchDraw .6s ease .1s forwards}
.motion-shoulder-cover{animation:shoulderCoverSettle 1s cubic-bezier(.2,.7,.25,1) .35s both}
@keyframes shoulderCoverSettle{from{opacity:0;transform:translateY(-30px)}35%{opacity:1}to{opacity:1;transform:translateY(0)}}
[data-page="coprispalla"] .technical-preview{background:#fff;border:1px solid #e8ebe8}
[data-page="coprispalla"] .technical-preview::after{display:none}

/* Pluriball: a sheet opens at its natural size; no zoom interaction. */
.bubble-study{background:#fff}
.bubble-window{background:#f4f5f2;border:1px solid #e6e9e4}
.bubble-photo{transform:none!important;transition:none;will-change:auto;filter:saturate(.5) contrast(1.03)}
.bubble-study.in .bubble-window{animation:none}
.bubble-study.in .bubble-photo{animation:bubbleSheetOpen 1.8s cubic-bezier(.2,.65,.25,1) both}
.bubble-fold{position:absolute;top:0;bottom:0;width:12%;left:0;background:linear-gradient(90deg,transparent,#fff9 50%,#21392b30 85%,transparent);opacity:0;pointer-events:none}
.bubble-study.in .bubble-fold{animation:bubbleEdgeOpen 1.8s cubic-bezier(.2,.65,.25,1) both}
.bubble-study.in .bubble-light{animation:bubbleLight 2.2s ease .45s both;opacity:.4}
.bubble-tools{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.bubble-tools>span{font-size:18px;color:#536158}
@keyframes bubbleSheetOpen{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes bubbleEdgeOpen{0%{left:-12%;opacity:0}12%{opacity:1}82%{opacity:.7}100%{left:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){.bubble-study.in .bubble-photo{animation:none;clip-path:none}.bubble-fold,.bubble-light{display:none}}

/* Native high-resolution editorial photography; retain natural colour and detail. */
.biodiversity-gallery .editorial-photo img,.application-gallery .editorial-photo img{filter:none}
.nature-photo img{aspect-ratio:1.3;object-fit:cover}

/* ============================================================
   FOTOGRAFIE D'AZIENDA
   Figure, file di scatti, video in loop e fasce scorrevoli.
   Le immagini entrano con una rivelazione a maschera: il ritaglio
   si apre dal basso mentre la foto rientra da una leggera scala.
   ============================================================ */
.shot{margin:0;display:flex;flex-direction:column;gap:clamp(10px,1.4vh,16px)}
.shot-frame{display:block;position:relative;overflow:hidden;background:var(--paper-2);
  aspect-ratio:var(--ratio,4/3);border-radius:2px}
.shot-frame img,.shot-frame video{width:100%;height:100%;object-fit:cover;display:block}
.shot figcaption{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:9px}
.shot figcaption::before{content:"";width:16px;height:1px;background:var(--green);flex:none}
.dark-block .shot figcaption,.photo-band .shot figcaption{color:#a8bcae}

/* rivelazione a maschera */
.js .photo-mask .shot-frame{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--ease)}
.js .photo-mask .shot-frame img,.js .photo-mask .shot-frame video{transform:scale(1.16);transition:transform 1.5s var(--ease)}
.js .photo-mask figcaption{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease) .45s,transform .7s var(--ease) .45s}
.js .photo-mask.in .shot-frame{clip-path:inset(0 0 0 0)}
.js .photo-mask.in .shot-frame img,.js .photo-mask.in .shot-frame video{transform:none}
.js .photo-mask.in figcaption{opacity:1;transform:none}
.shot-frame:hover img{transform:scale(1.045)}
.js .photo-mask.in .shot-frame:hover img{transform:scale(1.045)}

/* intestazione dei blocchi fotografici */
.shot-head{display:grid;grid-template-columns:1fr .9fr;gap:clamp(24px,4vw,70px);align-items:end;
  margin-bottom:clamp(28px,4.6vh,58px)}
.shot-head .lead{margin-top:0}

/* fila di scatti */
.shot-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,30px)}
.shot-row>*:nth-child(2){margin-top:clamp(18px,3.4vw,52px)}

/* foto grande accanto al testo */
.shot-split{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,5vw,86px);align-items:center}
.shot-split.flip .shot{order:2}
.shot-copy .display{margin-top:clamp(12px,2vh,22px)}

/* due scatti sfalsati con il testo in mezzo */
.shot-duo{display:grid;grid-template-columns:.85fr 1.45fr .85fr;gap:clamp(20px,3vw,44px);align-items:center}
.shot-duo .shot-copy .display{font-size:clamp(26px,3.3vw,46px)}
.shot-duo>.shot:first-child{margin-top:clamp(-10px,-2vw,-40px)}
.shot-duo>.shot:last-child{margin-top:clamp(20px,4vw,70px)}
.shot-duo .shot-copy{text-align:center}
.shot-duo .shot-copy .lead{margin-left:auto;margin-right:auto}

/* video in loop */
.video-shot .shot-frame{background:#0e1412}
.shot-play{position:absolute;left:14px;bottom:14px;width:9px;height:9px;border-radius:50%;
  background:var(--green-soft);box-shadow:0 0 0 0 rgba(102,191,153,.7);animation:shotPulse 2.6s infinite;
  opacity:0;transition:opacity .5s var(--ease)}
.video-shot.playing .shot-play{opacity:1}
@keyframes shotPulse{0%{box-shadow:0 0 0 0 rgba(102,191,153,.6)}70%{box-shadow:0 0 0 11px rgba(102,191,153,0)}100%{box-shadow:0 0 0 0 rgba(102,191,153,0)}}

/* fascia a tutta larghezza che scorre */
.photo-band{background:var(--ink);padding:clamp(34px,6vh,70px) 0;overflow:hidden;position:relative}
.band-label{max-width:1560px;margin:0 auto clamp(18px,2.6vh,30px);padding:0 var(--gutter);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8fa497}
.band-track{display:flex;gap:14px;width:max-content;animation:bandRun 58s linear infinite}
.photo-band:hover .band-track{animation-play-state:paused}
.band-cell{flex:none;width:clamp(210px,24vw,340px);aspect-ratio:4/3;overflow:hidden;border-radius:2px}
.band-cell img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.band-cell:hover img{transform:scale(1.05)}
@keyframes bandRun{to{transform:translateX(calc(-50% - 7px))}}

@media(max-width:1100px){
  .shot-head{grid-template-columns:1fr;gap:18px;align-items:start}
  .shot-split,.shot-duo{grid-template-columns:1fr;gap:clamp(22px,4vh,40px)}
  .shot-split.flip .shot{order:0}
  .shot-duo>.shot:first-child,.shot-duo>.shot:last-child{margin-top:0}
  .shot-duo .shot-copy{text-align:left}
  .shot-duo .shot-copy .lead{margin-left:0}
}
@media(max-width:760px){
  .shot-row{grid-template-columns:1fr;gap:26px}
  .shot-row>*:nth-child(2){margin-top:0}
  .band-cell{width:62vw}
  .shot figcaption{font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){
  .js .photo-mask .shot-frame{clip-path:none}
  .js .photo-mask .shot-frame img,.js .photo-mask .shot-frame video{transform:none}
  .js .photo-mask figcaption{opacity:1;transform:none}
  .band-track{animation:none}
  .shot-play{animation:none}
}

/* Procedural film: native scroll, one sticky scene, no wheel interception. */
.reel3d-section{background:#f5f6f3;color:#1b2820;position:relative}
.reel3d-section.reel3d-ready{height:280svh}
.reel3d-pin{position:relative;min-height:780px;padding:90px 0 30px;display:flex;flex-direction:column;justify-content:space-between}
.reel3d-ready .reel3d-pin{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden}
.reel3d-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;position:relative;z-index:2;pointer-events:none}
.reel3d-heading h2{font-size:clamp(35px,4vw,66px);line-height:1.05}
.reel3d-heading p{font-size:18px;line-height:1.65;color:#647068;padding-bottom:4px}
.reel3d-stage{width:100%;height:clamp(330px,58svh,660px);min-height:0;position:relative;flex:1;background:radial-gradient(ellipse at 50% 70%,#e9ece4 0,transparent 68%)}
.reel3d-stage canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .4s ease;pointer-events:none}
.reel3d-ready canvas{opacity:1}
.reel3d-fallback{position:absolute;inset:0;display:flex;gap:40px;align-items:center;justify-content:center;padding:30px}
.reel3d-fallback img{width:min(44vw,400px)}
.reel3d-fallback>span:last-child{position:absolute;bottom:30px;font-size:18px}
.reel3d-fallback-roll{height:210px;width:80px;border-radius:50% / 7%;background:linear-gradient(90deg,#879386,#f8faf4 26%,#c5cfc1 65%,#eef2e8 86%,#71816f);box-shadow:12px 18px 25px #263b271c}
.reel3d-ready .reel3d-fallback{display:none}
.reel3d-footer{display:flex;justify-content:space-between;gap:25px;align-items:center;position:relative;z-index:2}
.reel3d-steps{display:flex;gap:clamp(20px,4vw,60px);font-size:16px;color:#788378}
.reel3d-steps span{transition:color .3s,opacity .3s;opacity:.55}.reel3d-steps .is-current{color:#284e3e;opacity:1}
.reel3d-skip{font-size:14px;white-space:nowrap;padding:12px 0;border-bottom:1px solid #a5b0a5}.reel3d-skip span{margin-left:20px}
@media(max-width:760px){.reel3d-section.reel3d-ready{height:230svh}.reel3d-pin{padding:85px 0 25px;min-height:600px}.reel3d-ready .reel3d-pin{min-height:540px}.reel3d-heading{display:block}.reel3d-heading h2{font-size:36px}.reel3d-heading p{font-size:15px;margin-top:17px}.reel3d-stage{height:380px;flex:1}.reel3d-steps{display:grid;gap:5px;font-size:14px}.reel3d-steps span{display:none}.reel3d-steps .is-current{display:block}}
@media(prefers-reduced-motion:reduce){.reel3d-section.reel3d-ready{height:auto}.reel3d-ready .reel3d-pin{position:relative;height:auto;min-height:750px}.reel3d-stage{flex:none;height:450px}.reel3d-steps span{display:none}.reel3d-steps span:last-child{display:block;opacity:1}}
@media print{.reel3d-section.reel3d-ready{height:auto}.reel3d-ready .reel3d-pin{position:relative;height:auto;min-height:500px}.reel3d-stage canvas{display:none}.reel3d-ready .reel3d-fallback{display:flex}}

/* Contrast for the transparent, winding film. */
.reel3d-pin{background:radial-gradient(ellipse at 48% 50%,#e6ece8 0%,#cbd7d0 100%)}
.reel3d-stage{background:none}

/* Buste: a scroll-driven product study with a real sample alongside it. */
.bag-experience{background:#e4ebe6;color:#1e3027}.bag-experience.bag-ready{height:285svh}.bag-pin{min-height:650px;padding:96px 0 26px;display:flex;flex-direction:column}.bag-ready .bag-pin{position:sticky;top:0;height:100svh;min-height:620px;background:radial-gradient(ellipse at 45% 45%,#f1f4f0,#cad8ce)}.bag-heading{display:flex;align-items:end;justify-content:space-between;gap:30px}.bag-heading h2{font-size:clamp(36px,4.5vw,66px);margin:0}.bag-heading p{font-size:18px;line-height:1.6}.bag-stage{position:relative;flex:1;min-height:0;height:540px}.bag-stage canvas{display:none;width:100%;height:100%}.bag-ready canvas{display:block}.bag-fallback{display:block;max-height:470px;width:auto;max-width:90%;margin:25px auto;object-fit:contain}.bag-ready .bag-fallback{display:none}.bag-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:16px}.bag-footer [data-bag-step]{display:none}.bag-footer .is-current{display:inline}.bag-real-grid{display:grid;grid-template-columns:.85fr 1fr;align-items:center;gap:clamp(40px,8vw,130px)}.bag-video{background:#e5e9e1;padding:20px;max-width:500px;margin:auto;width:100%}.bag-video video{display:block;max-height:660px;width:100%;height:auto}.bag-detail{display:grid;grid-template-columns:160px 1fr;gap:24px;align-items:center;border-top:1px solid #d4ddd6;padding:24px 0}.bag-detail svg{width:100%}.bag-detail h3{font-size:22px;margin:0 0 8px}.bag-detail p{font-size:17px;line-height:1.5;margin:0}.bag-real .lead{margin:28px 0 36px}
@media(max-width:760px){.bag-ready .bag-pin{padding:88px 0 22px;min-height:580px}.bag-heading{display:block}.bag-heading p{font-size:15px;margin:14px 0 0}.bag-footer{font-size:13px;gap:12px}.bag-footer .text-link{font-size:13px}.bag-real-grid{grid-template-columns:1fr;gap:40px}.bag-video{max-width:370px}.bag-detail{grid-template-columns:115px 1fr;gap:16px}.bag-detail h3{font-size:20px}}
@media(prefers-reduced-motion:reduce){.bag-experience.bag-ready{height:auto}.bag-ready .bag-pin{position:relative;height:auto}.bag-stage{flex:none;height:500px}}

/* Neutral studio background keeps clear polymer silver, not green. */
.reel3d-ready .reel3d-pin,.bag-ready .bag-pin{background:radial-gradient(ellipse at 47% 42%,#faf9f6 0%,#e3e2dc 72%,#d3d3cc 100%)}

/* Oversized product study: sticky visual left, readable editorial scroll right. */
.shoulder-story{position:relative;background:#eeede8;scroll-margin-top:80px}
.shoulder-pin{display:grid;grid-template-columns:57% 43%;align-items:start}
.shoulder-visual{position:sticky;top:0;margin:0;height:100svh;overflow:clip;min-width:0}
.shoulder-object{height:100%;display:grid;place-items:center}
.shoulder-object img{height:102%;max-width:none;width:auto;object-fit:contain;transform:rotate(-12deg);filter:drop-shadow(20px 25px 25px #24302714)}
.shoulder-canvas{position:absolute;inset:0;width:100%;height:100%;display:none}
.shoulder-ready .shoulder-canvas{display:block}
.shoulder-ready .shoulder-object{visibility:hidden}
.shoulder-caption{position:absolute;bottom:28px;left:7%;right:7%;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;color:#35604a;z-index:2}
.shoulder-caption span:first-child{padding:10px 14px;background:#fffdf2d9;backdrop-filter:blur(8px);font-size:14px}
.shoulder-caption span:last-child{font-size:10px;letter-spacing:.12em}
.shoulder-copy{position:relative;padding:0 5vw 0 3vw;background:#eeede8;z-index:2;min-width:0}
.shoulder-chapter{min-height:110svh;display:flex;flex-direction:column;justify-content:center;padding:100px 0 80px}
.shoulder-eyebrow{font-size:12px;letter-spacing:.14em;font-weight:600;color:#4f725f;margin-bottom:32px}
.shoulder-chapter .display,.shoulder-chapter h3{font-size:clamp(36px,4.3vw,70px);line-height:1.06;letter-spacing:-.05em;font-weight:500;margin:0 0 32px}
.shoulder-chapter h3 em{font-style:normal;color:#50987b}
.shoulder-chapter p:not(.shoulder-eyebrow){font-size:clamp(17px,1.5vw,22px);line-height:1.65;color:#4b5850;max-width:530px;margin:0 0 23px}
.shoulder-fact{border-top:1px solid #bbc8be;margin-top:20px;padding-top:22px;display:flex;justify-content:space-between;gap:18px;font-size:15px}
.shoulder-fact strong{font-weight:500}.shoulder-fact span{color:#637568}
.shoulder-chapter .text-link{align-self:flex-start;margin-top:16px}
@media(max-width:700px){
 .shoulder-pin{display:block}
 .shoulder-visual{height:53svh;top:60px;z-index:1;background:#eeede8;position:sticky}
 .shoulder-copy{padding:0 7vw;z-index:2;background:transparent;pointer-events:none}
 .shoulder-chapter{min-height:100svh;padding:53svh 0 25px;justify-content:flex-end;pointer-events:none}
 .shoulder-chapter>*{background:#eeede8;pointer-events:auto}
 .shoulder-chapter .shoulder-eyebrow{padding-top:22px;margin-bottom:0;padding-bottom:18px;font-size:10px;letter-spacing:.1em}
 .shoulder-chapter .display,.shoulder-chapter h3{font-size:34px;margin:0;padding-bottom:20px}
 .shoulder-chapter p:not(.shoulder-eyebrow){font-size:16px;line-height:1.5;margin:0;padding-bottom:18px}
 .shoulder-fact{margin-top:0;padding:18px 0;font-size:13px}
 .shoulder-chapter .text-link{margin:0;padding:10px 0;font-size:14px}
 .shoulder-caption{bottom:16px}.shoulder-caption span:last-child{display:none}
 .shoulder-caption span:first-child{font-size:12px}
 .shoulder-object img{height:102%}
}
@media(prefers-reduced-motion:reduce){
 .shoulder-visual{position:relative;height:85svh}.shoulder-object img{transform:none;height:95%}
 .shoulder-chapter{min-height:0;padding:70px 0}.shoulder-caption{display:none}
 @media(max-width:700px){.shoulder-visual{top:0;height:65svh}.shoulder-chapter{padding:35px 0}}
}
@media(max-width:700px){
 .shoulder-copy{padding:0}
 .shoulder-chapter>*{padding-left:7vw!important;padding-right:7vw!important;width:100%;box-sizing:border-box}
 .shoulder-chapter .text-link{align-self:stretch}
 .shoulder-fact{border-top:0}
}
/* A projected point stays attached to the film; its note stays readable. */
.shoulder-annotation{position:absolute;inset:0;z-index:3;pointer-events:none}
.shoulder-annotation[hidden]{display:none}
.shoulder-annotation svg{position:absolute;width:100%;height:100%;overflow:visible}
.shoulder-leader{stroke:#39775b;stroke-width:1;opacity:.7}
.shoulder-dot{fill:#2d805b;stroke:white;stroke-width:3}
.shoulder-note{position:absolute;max-width:220px;background:#fffffff2;padding:17px 19px;box-shadow:0 8px 40px #253b2510;border-left:2px solid #438665;backdrop-filter:blur(10px)}
.shoulder-note strong{display:block;font-size:17px;font-weight:500;line-height:1.2;color:#214c36}
.shoulder-note p{font-size:14px;line-height:1.45;color:#536158;margin:7px 0 0}
@media(max-width:700px){.shoulder-note{max-width:170px;padding:12px 14px}.shoulder-note strong{font-size:14px}.shoulder-note p{font-size:12px;margin-top:5px}.shoulder-caption{display:none}}

/* A single viewport-wide stage, with editorial copy layered over its empty side. */
.shoulder-pin{grid-template-rows:auto}
.shoulder-visual{grid-column:1 / -1;grid-row:1;width:100%;overflow:visible}
.shoulder-copy{grid-column:2;grid-row:1;background:transparent}
.shoulder-caption{right:46%}
@media(max-width:700px){
 .shoulder-pin{display:grid;grid-template-columns:1fr}
 .shoulder-visual{height:100svh;top:0;background:transparent}
 .shoulder-copy{grid-column:1;grid-row:1}
 .shoulder-chapter>*{background:transparent;text-shadow:0 1px 8px #eeede8}
 .shoulder-caption{right:7%}
}
@media(prefers-reduced-motion:reduce){
 .shoulder-visual{grid-row:auto;grid-column:1;height:85svh}
 .shoulder-copy{grid-row:auto}
 @media(max-width:700px){.shoulder-copy{grid-column:1}.shoulder-visual{height:65svh}}
}

/* Reserve the actual responsive header height above the product stage. */
@media(prefers-reduced-motion:no-preference){
 .shoulder-visual{top:calc(var(--header) + 20px);height:calc(100svh - var(--header) - 20px)}
}

.cut-diagram{margin:6px 0 20px;max-width:530px;width:100%}
.cut-diagram svg{display:block;width:100%;height:auto}
.cut-diagram figcaption{font-size:14px;line-height:1.5;color:#526459;margin-top:12px}
.shoulder-cut-chapter{min-height:125svh}
@media(max-width:700px){.cut-diagram{margin:0;padding-bottom:24px}.cut-diagram figcaption{font-size:13px}}
/* The hidden fallback must not create overflow behind the full-width canvas. */
.shoulder-ready .shoulder-object{display:none}
.shoulder-object img{max-width:100%;object-fit:contain}
@media(max-width:700px){.shoulder-annotation{display:none}}

/* Mirrored material story. Full-width artwork; text occupies the quiet left side. */
.shoulder-variants{position:relative;display:grid;grid-template-columns:44% 56%;background:#e9e9e2;isolation:isolate;overflow:clip;overflow-clip-margin:0px}
.variants-stage{position:sticky;top:var(--header);height:calc(100svh - var(--header));grid-column:1/-1;grid-row:1;pointer-events:none;min-width:0}
.variants-copy{grid-column:1;grid-row:1;position:relative;z-index:2;padding:0 2vw 0 var(--gutter)}
.variant-chapter{min-height:120svh;display:flex;flex-direction:column;justify-content:center;padding:100px 0 90px}
.variant-chapter h2,.variant-chapter h3{font-size:clamp(40px,4.6vw,74px);font-weight:500;line-height:1.04;letter-spacing:-.055em;margin-bottom:32px}
.variant-chapter h2 em,.variant-chapter h3 em{color:#48826a}
.variant-chapter p:not(.shoulder-eyebrow){font-size:clamp(17px,1.4vw,21px);line-height:1.65;color:#46554c;margin-bottom:24px;max-width:500px}
.variant-chapter p strong{font-weight:600;color:#263d31}
.variant-chapter .text-link{align-self:flex-start;margin-top:8px}
.variant-material{border-top:1px solid #aebeb2;margin-top:20px;padding-top:24px;display:flex;gap:18px;justify-content:space-between;font-size:15px;color:#304b3b}
.variant-word{position:absolute;left:49%;top:11%;font-size:clamp(130px,22vw,350px);font-weight:500;letter-spacing:-.09em;line-height:1;color:#d4d9ce;opacity:.65}
.bubble-product{position:absolute;width:69vw;left:43%;top:14%;transform-origin:50% 20%;transform:translate3d(0,0,0) rotate(-9deg);filter:drop-shadow(10px 20px 16px #33413216)}
.bubble-product img{width:100%;max-width:none;display:block;height:auto}
.variant-pin{position:absolute;left:67%;top:76%;display:flex;align-items:center;gap:14px;transition:opacity .4s;opacity:0}
.variant-pin span{width:7px;height:7px;border-radius:50%;background:#35755b;outline:5px solid #fff9}
.variant-pin p{font-size:16px;line-height:1.4;color:#244f3a;background:#f7f8f0e8;padding:12px 18px}
.variant-visual-caption{position:absolute;bottom:25px;right:var(--gutter);font-size:13px;letter-spacing:.02em;color:#526459}
.film-family{position:absolute;left:51%;width:45%;top:7%;height:80%;display:flex;align-items:flex-start;justify-content:center;gap:1%;opacity:0;visibility:hidden}
.film-format{margin:0;position:relative;width:31%;flex-shrink:0;transform-origin:50% 0}
.film-format>div{width:100%;overflow:hidden;position:relative}
.film-format img{width:300%;max-width:none;display:block;height:auto;filter:drop-shadow(6px 8px 8px #31423114)}
.format-short>div{aspect-ratio:1/1.64}.format-medium>div{aspect-ratio:1/2.22}.format-long>div{aspect-ratio:1/2.84}
.format-medium img{transform:translateX(-33.333333%)}.format-long img{transform:translateX(-66.666667%)}
.film-format figcaption{font-size:16px;color:#385143;margin-top:25px;text-align:center;border-top:1px solid #9dac9e;padding-top:16px}
.film-format figcaption strong{font-size:clamp(30px,4vw,60px);font-weight:400;letter-spacing:-.06em}
.variant-chapter p.variant-size-note{font-size:14px;line-height:1.5;margin-top:28px;color:#657268}
/* Without animation, every material remains available in a calm editorial layout. */
.shoulder-variants:not(.variants-ready) .variants-stage{position:relative;grid-column:2;grid-row:1;height:100%;min-height:700px;top:0}
.shoulder-variants:not(.variants-ready) .bubble-product{width:110%;left:0;top:7%}
.shoulder-variants:not(.variants-ready) .film-family{visibility:visible;opacity:1;top:72%;left:0;width:95%;height:auto}
.shoulder-variants:not(.variants-ready) .variant-word{left:0;top:3%}
.shoulder-variants:not(.variants-ready) .variant-visual-caption{display:none}
@media(max-width:700px){
 .shoulder-variants{grid-template-columns:1fr}
 .variants-stage{top:var(--header);height:calc(100svh - var(--header))}
 .variants-copy{grid-column:1;padding:0 7vw}
 .variant-chapter{min-height:125svh;justify-content:flex-end;padding:50svh 0 55px}
 .variant-chapter h2,.variant-chapter h3{font-size:39px;margin-bottom:22px}
 .variant-chapter .shoulder-eyebrow{font-size:11px;margin-bottom:22px}
 .variant-chapter p:not(.shoulder-eyebrow){font-size:16px;line-height:1.6;margin-bottom:18px}
 .variant-chapter>*{position:relative}
 .variant-chapter::before{content:'';position:absolute;left:0;right:0;height:620px;max-height:70svh;background:linear-gradient(0deg,#e9e9e2 85%,#e9e9e200);z-index:-1;pointer-events:none}
 .bubble-product{width:120vw;left:1%;top:0%;transform:rotate(-7deg)}
 .variant-word{left:8%;top:2%;font-size:40vw}
 .film-family{left:5%;width:90%;top:4%;height:45%}
 .film-format figcaption{margin-top:10px;padding-top:8px;font-size:13px}.film-format figcaption strong{font-size:30px}
 .variant-pin,.variant-visual-caption{display:none}
 .variant-material{font-size:13px;margin-top:8px;padding-top:16px}
 .variant-chapter p.variant-size-note{font-size:13px;margin-top:20px}
 .shoulder-variants:not(.variants-ready){display:block}
 .shoulder-variants:not(.variants-ready) .variants-stage{height:90svh;min-height:0}
 .shoulder-variants:not(.variants-ready) .bubble-product{width:100%;top:0}
 .shoulder-variants:not(.variants-ready) .film-family{top:50%;left:5%;width:90%}
 .shoulder-variants:not(.variants-ready) .variant-chapter{min-height:0;padding:40px 0}
}
@media(prefers-reduced-motion:reduce){.variant-chapter{min-height:0;padding:80px 0}.variant-pin{display:none}.bubble-product{transform:none}}

/* Compact opening and complete format silhouettes, sized to the viewport height. */
.shoulder-chapter{min-height:95svh}
.shoulder-cut-chapter{min-height:110svh}
.film-family{left:auto;right:4%;width:min(45vw,calc(105svh - var(--header) - 190px))}
.format-short>div{aspect-ratio:1/1.7}.format-medium>div{aspect-ratio:1/2.28}.format-long>div{aspect-ratio:1/3}
.eyebrow,.shoulder-eyebrow{display:none}
@media(max-width:700px){
 .shoulder-chapter{min-height:95svh}
 .film-family{left:5%;right:auto;width:90%}
}
/* The adjacent product text already explains the illustrative format view. */
.variant-visual-caption{display:none}

/* Mobile: let the material pass behind the editorial text, without a masking panel. */
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
 .shoulder-variants.variants-ready{overflow-x:clip;overflow-y:visible}
 .variants-ready .variants-stage{overflow:visible}
 .variants-ready .variant-chapter::before{content:none}
 .variants-ready .variant-chapter>*{background:transparent;text-shadow:0 1px 9px #e9e9e2,0 0 20px #e9e9e2}
 .variants-ready .bubble-product{width:150vw;left:-25%;top:12%}
 .variants-ready .variant-word{opacity:.3}
}

/* Mobile reading layout: a quiet product stage above a separate text area. */
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
 .shoulder-story,.shoulder-variants{--product-height:clamp(220px,38svh,330px)}
 .shoulder-ready .shoulder-visual,.variants-ready .variants-stage{
  height:var(--product-height);top:var(--header);z-index:4;
  background:#eeede8;overflow:hidden;border-bottom:1px solid #d8ddd4;
 }
 .variants-ready .variants-stage{background:#e9e9e2}
 .shoulder-copy,.variants-copy{z-index:2;padding:0 7vw}
 .shoulder-chapter,.variant-chapter{
  min-height:100svh;justify-content:flex-start;
  padding:calc(var(--product-height) + 40px) 0 48px;
 }
 .shoulder-chapter>*,.variants-ready .variant-chapter>*{
  background:transparent;text-shadow:none;padding-left:0!important;padding-right:0!important;
 }
 .shoulder-chapter .display,.shoulder-chapter h3,.variant-chapter h2,.variant-chapter h3{
  font-size:32px;line-height:1.1;margin:0 0 22px;padding-bottom:0;letter-spacing:-.045em;
 }
 .shoulder-chapter p:not(.shoulder-eyebrow),.variant-chapter p:not(.shoulder-eyebrow){
  font-size:17px;line-height:1.65;margin:0 0 18px;padding-bottom:0;
 }
 .variant-chapter::before{content:none}
 .variants-ready .variant-word{display:none}
 .variants-ready .bubble-product{width:min(88vw,47svh);left:50%;top:9%;margin-left:calc(min(88vw,47svh) / -2);transform-origin:center}
 .variants-ready .film-family{width:min(82vw,27svh);left:50%;right:auto;top:2%;margin-left:calc(min(82vw,27svh) / -2);height:auto}
 .film-format figcaption{font-size:11px;margin-top:4px;padding-top:4px;border-top:0}
 .film-format figcaption strong{font-size:20px}
 .shoulder-fact,.variant-material{margin-top:8px;padding-top:16px}
 .variant-chapter p.variant-size-note{font-size:13px}
}

/* Quiet brand typography behind the animated shoulder protector. */
.shoulder-word{position:absolute;left:7%;top:11%;font-size:clamp(130px,22vw,350px);font-weight:500;letter-spacing:-.09em;line-height:1;color:#d4d9ce;opacity:.65;pointer-events:none}
.shoulder-canvas{z-index:1}
.shoulder-object{position:relative;z-index:1}
@media(max-width:700px){.shoulder-word{left:12%;top:17%;font-size:clamp(120px,42vw,210px)}}

/* Mobile editorial sequence: reading and illustrations share normal page flow. */
.mobile-product{display:none}
@media(max-width:700px){
 .shoulder-story .shoulder-visual,.shoulder-variants .variants-stage{display:none!important}
 .shoulder-pin,.shoulder-variants{display:block}
 .shoulder-copy,.variants-copy{padding:0 7vw;position:relative;z-index:1}
 .shoulder-chapter,.variant-chapter,.shoulder-variants:not(.variants-ready) .variant-chapter{min-height:0;padding:52px 0 24px;display:block}
 .shoulder-chapter>*,.variants-ready .variant-chapter>*{text-shadow:none;background:transparent;padding-left:0!important;padding-right:0!important}
 .shoulder-chapter .display,.shoulder-chapter h3,.variant-chapter h2,.variant-chapter h3{font-size:clamp(32px,9vw,42px);line-height:1.08;margin:0 0 24px;padding:0}
 .shoulder-chapter p:not(.shoulder-eyebrow),.variant-chapter p:not(.shoulder-eyebrow){font-size:18px;line-height:1.65;margin:0 0 24px;padding:0;color:#35463c}
 .variant-chapter::before{content:none}
 .shoulder-chapter .text-link,.variant-chapter .text-link{display:inline-block;font-size:16px;margin:0 0 20px;padding:12px 0}
 .mobile-product{display:grid;place-items:center;position:relative;isolation:isolate;height:clamp(360px,65svh,560px);width:100%;margin:20px 0 32px;pointer-events:none}
 .mobile-product>span{position:absolute;top:12%;left:3%;font-size:36vw;line-height:1;letter-spacing:-.09em;color:#d4d9ce;z-index:-1}
 .mobile-product-motion{position:relative;width:100%;height:100%;transform-origin:center;will-change:transform}
 .mobile-product img{display:block;width:100%;height:100%;object-fit:contain}
 .mobile-product .mobile-jacket{position:absolute;inset:0;width:72%;height:78%;margin:auto;z-index:-1;object-fit:contain}
 .mobile-product-3,.mobile-product-4{height:clamp(260px,43svh,380px)}
 .mobile-product-5{height:auto;aspect-ratio:1/1.12}
 .shoulder-fact{margin:24px 0 0}
 .cut-diagram{margin:28px 0}
}
@media(prefers-reduced-motion:reduce){.mobile-product-motion{will-change:auto}}

/* One mobile illustration per material, with related copy grouped together. */
.mobile-story-copy{display:none!important}
@media(max-width:700px){
 .mobile-story-copy{display:block!important}
 .desktop-story-copy,#pluriball-dettaglio{display:none!important}
 #shoulder-detail-3,#shoulder-detail-4{padding-top:24px}
 #shoulder-detail-3 h3,#shoulder-detail-4 h3{font-size:28px;line-height:1.12;margin-bottom:18px}
 #shoulder-detail-3 h3 br,#shoulder-detail-4 h3 br{display:none}
 #shoulder-detail-3 h3 em::before,#shoulder-detail-4 h3 em::before{content:' '}
}

@media(max-width:700px){
 /* Product overflow may cross a paragraph, but copy always paints above it. */
 .shoulder-copy,.variants-copy{isolation:isolate}
 .shoulder-chapter>:not(.mobile-product),.variant-chapter>:not(.mobile-product){position:relative;z-index:2}
 .shoulder-chapter>.mobile-product,.variant-chapter>.mobile-product{z-index:0}
 .mobile-product-motion,.mobile-product .mobile-jacket{backface-visibility:hidden;transition:none}
 .mobile-product .mobile-jacket{will-change:transform,opacity}
 .mobile-product .mobile-cover{will-change:opacity;transition:none}
}
@media(prefers-reduced-motion:reduce){.mobile-product .mobile-jacket,.mobile-product .mobile-cover{will-change:auto}}

/* Reel studio: a contrasting stage makes the clear film readable. */
.reel3d-ready .reel3d-pin{background:radial-gradient(ellipse at 50% 40%,#34483f,#172b22 75%);color:#f5f5ed;padding-top:calc(var(--header) + 24px)}
.reel3d-heading h2 em{color:#b9d2b8}
.reel3d-heading p{color:#c1cdc4;font-size:18px}
.reel3d-steps{color:#a0b5a5}.reel3d-steps .is-current{color:#f5f5ed}
.reel3d-skip{color:#f5f5ed;border-color:#6f8777}
.reel3d-section.reel3d-ready{height:270svh}
.reel3d-heading h2{font-size:clamp(36px,4.2vw,66px)}
@media(max-width:700px){
 .reel3d-section.reel3d-ready{height:230svh}
 .reel3d-ready .reel3d-pin{min-height:0;height:100svh;padding:calc(var(--header) + 22px) 0 24px}
 .reel3d-heading h2{font-size:36px}.reel3d-heading p{font-size:16px;margin-top:16px}
 .reel3d-stage{height:auto;min-height:220px}
 .reel3d-footer{gap:15px}.reel3d-steps{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.reel3d-section.reel3d-ready{height:auto}.reel3d-ready .reel3d-pin{position:relative;height:auto}.reel3d-stage{height:450px;flex:none}}

/* ===== v30: testata rifinita, stessa grammatica del pulsante menu ===== */
.header{gap:24px;transition:height .4s var(--ease),background .35s var(--ease),transform .4s var(--ease),border-color .35s}
.header.solid{height:72px}
.brand,.header.solid .brand{width:188px}
.header.solid .brand{width:168px}
.header-actions{gap:14px}
.pill{height:48px;padding:0 20px 0 22px;gap:14px;border-radius:14px;font-size:13px;letter-spacing:.04em;
  transition:background .35s,color .35s,border-color .35s,border-radius .5s var(--ease),opacity .3s}
.pill span{font-size:16px;transition:transform .4s var(--ease)}
.pill:hover{gap:14px;border-radius:24px}
.pill:hover span{transform:translate(2px,-2px)}
.header.solid .pill{border-color:#c2ccc3}
.burger{padding:0 0 0 4px}
@media(max-width:1100px){.brand,.header.solid .brand{width:172px}.header.solid .brand{width:160px}}
@media(max-width:760px){.header.solid{height:64px}.brand,.header.solid .brand{width:150px}.header.solid .brand{width:140px}.burger-box{width:44px;height:44px;padding-left:12px}}

/* Bobine: a material curtain introduces the actual page after its entry animation. */
.reel-opening{position:relative;background:#eeede8}
.reel-opening-art{display:none}
.reel-opening.opening-ready{height:245svh}
.opening-ready .reel-opening-pin{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.opening-ready .reel-opening-content{position:absolute;inset:0;opacity:0;z-index:1;will-change:opacity,transform}
.opening-ready .reel-opening-content .page-hero{height:100svh;min-height:0;box-sizing:border-box}
.opening-ready .reel-opening-art{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;will-change:transform,opacity}
.reel-opening-art canvas{display:block;width:100%;height:100%}
@media(max-width:700px){.reel-opening.opening-ready{height:270svh}.opening-ready .reel-opening-content .page-hero{padding-top:calc(var(--header) + 80px);display:flex;align-items:center}}
@media(prefers-reduced-motion:reduce){.reel-opening.opening-ready{height:auto}.opening-ready .reel-opening-pin{position:relative;height:auto;overflow:visible}.opening-ready .reel-opening-content{position:relative;opacity:1!important;transform:none!important}.opening-ready .reel-opening-art{display:none}}
.reel-intro-visible .header:not(.menu-open) .brand-dark{opacity:1}
.reel-intro-visible .header:not(.menu-open) .brand-light{opacity:0}
.reel-intro-visible .header:not(.menu-open) .burger-label,.reel-intro-visible .header:not(.menu-open) .pill{color:var(--dark)}
.reel-intro-visible .header:not(.menu-open) .burger-box,.reel-intro-visible .header:not(.menu-open) .pill{border-color:#b5c1b5}
.reel-intro-visible .header:not(.menu-open) .burger-box span{background:var(--dark)}

/* The brand is revealed by the full-height film, beneath its reflections. */
.reel-opening-logo{display:none}
.opening-ready .reel-opening-logo{display:flex;position:absolute;inset:0;align-items:center;justify-content:center;z-index:2;pointer-events:none;opacity:0;will-change:clip-path,opacity,transform}
.reel-opening-logo img{width:clamp(240px,64vw,1100px);height:auto}
.opening-ready .reel-opening-art{z-index:3}
@media(prefers-reduced-motion:reduce){.opening-ready .reel-opening-logo{display:none}}

/* Studio product photograph replaces the demonstration video. */
.bag-product-photo{margin:0;width:100%;max-width:520px;justify-self:center;animation:bag-photo-reveal linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
.bag-product-photo img{display:block;width:100%;height:auto;object-fit:contain}
@keyframes bag-photo-reveal{0%{transform:translateY(28px) rotate(-3deg)}50%{transform:translateY(0) rotate(0)}100%{transform:translateY(-28px) rotate(3deg)}}
@media(max-width:760px){.bag-product-photo{max-width:360px}.bag-real-grid{gap:48px}}
@media(prefers-reduced-motion:reduce){.bag-product-photo{animation:none}}

/* pluriball: il foglio avvolge un cristallo mentre la sezione scorre, senza fermare la pagina */
.bubble-study .bubble-window{height:clamp(380px,50vw,640px);background:radial-gradient(ellipse at 50% 42%,#fbfaf7 0%,#e6e5df 62%,#d5d5ce 100%);border:0}
.bubble-window canvas{display:none;width:100%;height:100%}
.bubble-ready .bubble-window canvas{display:block}
.bubble-fallback{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.55) brightness(.85)}
.bubble-ready .bubble-fallback{display:none}
.bubble-caption [data-bubble-step]{display:none}.bubble-caption .is-current{display:inline}
@media(max-width:760px){.bubble-study .bubble-window{height:min(100vw,440px)}}


/* footer sempre nero, su ogni pagina: logo chiaro, testi grigio-verdi */
.site-footer,.is-dark .site-footer{background:var(--dark);color:#93a398;border-top:1px solid rgba(255,255,255,.08)}
.site-footer .footer-brand img,.is-dark .site-footer .footer-brand img{filter:none}
.site-footer .replay{color:#93a398}

/* ---------- testata editoriale: segnaposto di sezione al centro, capsula sospesa quando si scorre ---------- */
.header{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;top:0;left:0;right:0;height:88px;border:1px solid transparent;border-radius:0;
  transition:top .55s var(--ease),left .55s var(--ease),right .55s var(--ease),height .55s var(--ease),padding .55s var(--ease),border-radius .55s var(--ease),background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),transform .5s var(--ease)}
.header::before{content:"";position:absolute;inset:0 0 -48px;background:linear-gradient(rgba(6,10,8,.34),rgba(6,10,8,0));pointer-events:none;z-index:-1;transition:opacity .4s var(--ease)}
.header.solid::before,.header.menu-open::before,.reel-intro-visible .header::before{opacity:0}
.brand{justify-self:start}
.brand,.header.solid .brand{width:172px}
.header.solid .brand{width:148px}
.header.solid{top:12px;left:clamp(12px,3vw,40px);right:clamp(12px,3vw,40px);height:62px;padding:0 clamp(18px,2.2vw,30px);border-radius:18px;
  background:rgba(247,248,245,.82);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-color:rgba(18,22,21,.08);box-shadow:0 18px 40px -26px rgba(18,22,21,.45)}
.header.hidden{transform:translateY(calc(-100% - 24px))}
.header.menu-open,.header.solid.menu-open{top:0;left:0;right:0;height:88px;border-radius:0;background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  padding:0 calc(var(--gutter) + var(--scrollbar-gap,0px)) 0 var(--gutter)}
.header-where{justify-self:center;display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.8);white-space:nowrap;transition:color .4s var(--ease),opacity .3s}
.header-where b{font-weight:600;color:var(--green-soft)}
.header-where i{width:26px;height:1px;background:currentColor;opacity:.5}
.header.solid .header-where,.reel-intro-visible .header:not(.menu-open) .header-where{color:var(--muted)}
.header.solid .header-where b,.reel-intro-visible .header:not(.menu-open) .header-where b{color:var(--green-deep)}
.header.menu-open .header-where{opacity:0}
.header-actions{justify-self:end;gap:34px}
/* "Parliamone" diventa un link sottile con filo e freccia, non piu un bottone incorniciato */
.pill,.header.solid .pill,.reel-intro-visible .header:not(.menu-open) .pill{position:relative;height:auto;padding:7px 0;border:0;border-radius:0;background:none;gap:10px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.pill::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.4;transform-origin:left;transition:opacity .3s,transform .55s var(--ease)}
.pill span{font-size:13px;letter-spacing:0}
.pill:hover,.header.solid .pill:hover{background:none;border:0;border-radius:0;gap:14px;color:var(--green-soft)}
.header.solid .pill:hover{color:var(--green-deep)}
.pill:hover::after{opacity:1}
.pill:hover span{transform:translateX(2px)}
/* burger: due fili senza cornice, l'etichetta a sinistra */
.burger{flex-direction:row-reverse;gap:14px;padding:6px 0}
.burger-label{font-size:11px;letter-spacing:.22em}
.burger-box,.header.solid .burger-box,.header.menu-open .burger-box,.reel-intro-visible .header:not(.menu-open) .burger-box,.burger:hover .burger-box{width:26px;height:13px;padding:0;border:0;border-radius:0;background:none;gap:0;justify-content:space-between;align-items:flex-end}
.burger-box span{width:26px;height:1.5px}
.burger-box span:nth-child(2){display:none}
.burger-box span:nth-child(3){width:16px}
.burger:hover .burger-box span:nth-child(3){width:26px}
.burger[aria-expanded=true] .burger-box span:nth-child(1){transform:translateY(5.75px) rotate(45deg)}
.burger[aria-expanded=true] .burger-box span:nth-child(3){width:26px;transform:translateY(-5.75px) rotate(-45deg)}
@media(max-width:900px){.header-where{display:none}.header{grid-template-columns:1fr auto}}
@media(max-width:760px){
  .header,.header.menu-open,.header.solid.menu-open{height:72px}
  .header.solid{top:8px;left:10px;right:10px;height:56px;border-radius:16px;padding:0 16px}
  .brand,.header.solid .brand{width:132px}.header.solid .brand{width:120px}
  .burger-box,.header.solid .burger-box,.burger:hover .burger-box{width:26px;height:13px;padding:0}
  .burger{padding:12px 0}
}

/* testata dello stesso colore del footer, in ogni stato: logo chiaro, testi e fili bianchi */
.header,.header.solid,.header.menu-open,.header.solid.menu-open{background:var(--dark);-webkit-backdrop-filter:none;backdrop-filter:none}
.header{border-color:transparent;border-bottom-color:rgba(255,255,255,.06)}
.header.solid{border-color:rgba(255,255,255,.08);box-shadow:0 18px 40px -22px rgba(0,0,0,.55)}
.header::before{display:none}
.header .brand-dark,.header.solid .brand-dark,.reel-intro-visible .header:not(.menu-open) .brand-dark{opacity:0}
.header .brand-light,.header.solid .brand-light,.reel-intro-visible .header:not(.menu-open) .brand-light{opacity:1}
.header.solid .pill,.header.solid .burger-label,.reel-intro-visible .header:not(.menu-open) .pill,.reel-intro-visible .header:not(.menu-open) .burger-label{color:#fff}
.header.solid .burger-box span,.reel-intro-visible .header:not(.menu-open) .burger-box span{background:#fff}
.header.solid .header-where,.reel-intro-visible .header:not(.menu-open) .header-where{color:rgba(255,255,255,.72)}
.header.solid .header-where b,.reel-intro-visible .header:not(.menu-open) .header-where b{color:var(--green-soft)}
.header.solid .pill:hover{color:var(--green-soft)}

/* pluriball: il riquadro resta fermo finche non e tutto visibile, poi si ferma al centro e lo scroll guida la sequenza */
.bubble-study{--stage-h:min(clamp(380px,50vw,640px),calc(100svh - 160px))}
.bubble-study .bubble-window{height:var(--stage-h)}
.bubble-ready .bubble-track{height:calc(var(--stage-h) + 200svh)}
.bubble-ready .bubble-window{position:sticky;top:max(96px,calc(50svh - var(--stage-h) / 2 + 36px))}
@media(max-width:760px){.bubble-study{--stage-h:min(100vw,440px,calc(100svh - 150px))}.bubble-ready .bubble-track{height:calc(var(--stage-h) + 180svh)}.bubble-ready .bubble-window{top:max(84px,calc(50svh - var(--stage-h) / 2 + 30px))}}
@media(prefers-reduced-motion:reduce){.bubble-ready .bubble-track{height:auto}.bubble-ready .bubble-window{position:relative;top:auto}}

/* Mobile navigation: the entire card is the call to action. */
@media(max-width:760px){.slat .slat-go{display:none}}

/* A quiet cue keeps the scroll-driven opening understandable. */
.reel-scroll-hint{display:none}
.opening-ready .reel-scroll-hint{display:flex;position:absolute;z-index:4;bottom:calc(28px + env(safe-area-inset-bottom,0px));left:0;right:0;align-items:center;flex-direction:column;gap:8px;pointer-events:none;color:#233e31;opacity:.56;font-size:14px;line-height:1.4;letter-spacing:.025em}
.reel-scroll-hint svg{width:20px;height:28px;animation:reel-scroll-cue 2.2s ease-in-out 3}
@keyframes reel-scroll-cue{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.opening-ready .reel-scroll-hint{display:none}.reel-scroll-hint svg{animation:none}}

/* Home: give the company wordmark slightly more prominence. */
.is-home .header .brand{width:198px}
.is-home .header.solid .brand{width:170px}
@media(max-width:760px){
 .is-home .header .brand{width:152px}
 .is-home .header.solid .brand{width:138px}
}

/* Navigator: only one title is visible, including focus and reduced motion. */
@media(min-width:761px){
 .slat-name-v{bottom:40px;text-shadow:0 2px 12px #0009;transition:opacity .15s ease .2s,visibility 0s linear .2s}
 .slat-open{bottom:40px;visibility:hidden;transition:opacity .18s ease,transform .3s var(--ease),visibility 0s}
 .slat-name{white-space:normal;overflow-wrap:normal;line-height:1.15}
 .slat:is(:hover,:focus-visible,:active) .slat-name-v{opacity:0;visibility:hidden;transition:none}
 .slat:is(:hover,:focus-visible,:active) .slat-open{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease .2s,transform .35s var(--ease) .2s,visibility 0s linear .2s}
 .slat:active{flex-grow:3.6}
}

/* Flat film sprite: short at right, medium centre, long at left. */
.format-short img{transform:translateX(-66.666667%)}
.format-long img{transform:translateX(0)}
.format-medium>div{aspect-ratio:1/2.5}

/* Contact preview uses the brand until new company photos arrive. */
.menu-preview img[data-cap="Contatti"]{object-fit:contain;padding:12%;box-sizing:border-box;background:var(--dark)}

/* A shared portrait coordinate system keeps the garment inside its protector. */
@media(max-width:700px){
 .mobile-product-0 .mobile-product-motion{width:min(100%,calc(65svh * .666667));height:auto;aspect-ratio:2/3;margin:auto}
 .mobile-product-0 .mobile-jacket{inset:auto;top:4%;left:16%;width:68%;height:auto;margin:0;z-index:0}
 .mobile-product-0 .mobile-cover{position:relative;z-index:1}
}

.company-design-photo{margin:0 0 36px;max-width:520px}
.company-design-photo img{display:block;width:100%;height:auto}

/* Evening photography retains its complete architectural framing. */
.company-night-view{padding:0 var(--gutter) clamp(48px,7vw,100px);background:var(--paper)}
.company-night-view .shot{max-width:1388px;margin:0 auto}
.company-night-view .shot-frame img{object-fit:contain}