/* ==========================================================================
   PISCINE — impianto editoriale (bento, sezione pinnata, lista sticky)
   vestito con la TIPOGRAFIA E I COLORI DEL TEMA esistente:
     · Roboto weight 100, maiuscolo, spaziato   → titoli
     · Mulish 600/700, 11-12px, ls 1.5px        → etichette e pulsanti
     · verde #359a34                            → unico accento
   Foglio autonomo: non dipende da style.css. Prefisso .pn- ovunque.
   ========================================================================== */

:root{
  --dark:#1b1b1b;
  --black:#000;
  --white:#fff;
  --text:#111;
  --muted:#6d6d6d;
  --line:#e4e4e4;
  --green:#359a34;
  --green-dark:#2b7f2a;
  --on-dark:rgba(255,255,255,.72);
  --line-dark:rgba(255,255,255,.18);
  --ease:cubic-bezier(.22,.61,.36,1);
  --hdr:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body.pn{
  margin:0;
  background:var(--dark);
  color:var(--white);
  font-family:'Roboto',sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

.pn-wrap{width:min(1280px,92vw);margin-inline:auto}

/* --------------------------------------------------------------- tipografia
   La firma del tema: Roboto sottilissimo, maiuscolo, molto spaziato.
   Le parole in <strong> passano a 700 — è così in tutto il sito.          */
.pn-h1,.pn-h2,.pn-h3{
  font-family:'Roboto',sans-serif;
  font-weight:100;
  text-transform:uppercase;
  margin:0;
  color:inherit;
}
.pn-h1{font-size:clamp(34px,5.6vw,68px);line-height:1.1;letter-spacing:4px}
.pn-h2{font-size:clamp(27px,3.6vw,44px);line-height:1.2;letter-spacing:3px}
.pn-h3{font-size:clamp(17px,1.6vw,21px);line-height:1.35;letter-spacing:1.6px}
.pn-h1 strong,.pn-h2 strong,.pn-h3 strong{font-weight:700}

.pn-lead{font-size:clamp(15.5px,1.2vw,18px);line-height:1.75;color:var(--on-dark);margin:0;font-weight:300}
.pn-body{font-size:15px;line-height:1.75;color:var(--on-dark);margin:0}
.pn-light .pn-lead{color:var(--muted)}
.pn-light .pn-body{color:var(--muted)}

/* Etichetta piccola in Mulish — come .creativelink del tema.
   Su fondo CHIARO il verde si legge bene ed è la firma del sito.
   Su fondo SCURO (spesso una foto) #359a34 a 11px è illeggibile: lì il testo
   diventa bianco e il verde resta come quadratino-segnale davanti. */
.pn-badge{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Mulish',sans-serif;font-weight:700;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--white);
}
.pn-badge::before{content:"";width:7px;height:7px;background:var(--green);flex:0 0 auto}
.pn-light .pn-badge{color:var(--green)}
.pn-light .pn-badge::before{display:none}

.pn-mono{font-family:'Mulish',sans-serif;font-weight:600;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

/* --------------------------------------------------------------- pulsanti
   Squadrati con bordo 2px, come .btn/.anim-button del tema.               */
.pn-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 26px;border:2px solid var(--white);background:transparent;color:var(--white);
  font-family:'Mulish',sans-serif;font-weight:700;font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.pn-btn:hover{background:var(--white);color:var(--black)}
.pn-btn .pn-arrow{transition:transform .25s var(--ease)}
.pn-btn:hover .pn-arrow{transform:translateX(5px)}
.pn-light .pn-btn{border-color:var(--black);color:var(--black)}
.pn-light .pn-btn:hover{background:var(--black);color:var(--white)}
.pn-btn--green{border-color:var(--green);background:var(--green);color:var(--white)}
.pn-btn--green:hover{background:var(--green-dark);border-color:var(--green-dark);color:var(--white)}

/* link "scopri di più" del tema */
.pn-link{font-family:'Mulish',sans-serif;font-weight:600;font-size:12px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--green);display:inline-flex;align-items:center;gap:8px}
.pn-link .pn-arrow{transition:transform .25s var(--ease)}
.pn-link:hover .pn-arrow{transform:translateX(5px)}

/* --------------------------------------------------------------- barra di avanzamento */
.pn-scrollbar{position:fixed;top:0;left:0;height:2px;z-index:90;background:var(--green);
  width:100%;transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* --------------------------------------------------------------- header */
.pn-header{
  position:fixed;inset:0 0 auto 0;z-index:70;height:var(--hdr);display:flex;align-items:center;
  transition:background .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.pn-header.is-stuck{background:rgba(0,0,0,.88);border-bottom-color:var(--line-dark)}
.pn-header[data-on="light"]{color:var(--text)}
.pn-header[data-on="light"].is-stuck{background:rgba(255,255,255,.94);border-bottom-color:var(--line)}

.pn-header-in{width:min(1440px,94vw);margin-inline:auto;display:flex;align-items:center;gap:26px}
.pn-logo img{height:34px;width:auto;filter:drop-shadow(0 1px 5px rgba(0,0,0,.45));transition:filter .4s var(--ease)}
.pn-header[data-on="light"] .pn-logo img{filter:brightness(0)}

.pn-nav{margin-left:auto;display:flex;align-items:center;gap:2px}
/* .pn-drop-head: la voce padre che è ANCHE una pagina (Giardini) */
.pn-nav a.pn-nav-link,.pn-drop > button,.pn-drop > .pn-drop-head{
  display:flex;align-items:center;gap:6px;padding:10px 9px;
  font-family:'Mulish',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.5px;
  text-transform:uppercase;opacity:.85;transition:opacity .25s var(--ease),color .25s var(--ease);
}
.pn-nav a.pn-nav-link:hover,.pn-drop > button:hover,.pn-drop > .pn-drop-head:hover{opacity:1;color:var(--green)}
/* la voce attiva resta bianca (leggibile sopra le foto) e si segna col verde */
.pn-nav a.is-current{opacity:1;position:relative}
.pn-nav a.is-current::after{content:"";position:absolute;left:9px;right:9px;bottom:4px;
  height:2px;background:var(--green)}
/* Piscine sta dentro la tendina Outdoor: il segno va sul pulsante che la
   apre, che è un <button> e non un <a>, quindi serve la sua regola */
.pn-drop.is-current > button,.pn-drop.is-current > .pn-drop-head{opacity:1;position:relative}
.pn-drop.is-current > button::after,.pn-drop.is-current > .pn-drop-head::after{content:"";
  position:absolute;left:9px;right:9px;bottom:4px;height:2px;background:var(--green)}
.pn-drop-menu a.is-current{color:var(--green)}

.pn-drop{position:relative}
.pn-drop .pn-chev{width:9px;height:9px;transition:transform .3s var(--ease)}
.pn-drop:hover .pn-chev,.pn-drop:focus-within .pn-chev{transform:rotate(180deg)}
.pn-drop-menu{
  position:absolute;top:100%;left:0;min-width:210px;background:#000;border:1px solid var(--line-dark);
  padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);color:var(--white);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
}
.pn-drop:hover .pn-drop-menu,.pn-drop:focus-within .pn-drop-menu{opacity:1;visibility:visible;transform:translateY(0)}
.pn-drop-menu a{display:block;padding:9px 14px;font-family:'Mulish',sans-serif;font-weight:600;
  font-size:11px;letter-spacing:1px;text-transform:uppercase;opacity:.85;transition:color .2s var(--ease),opacity .2s}
.pn-drop-menu a:hover{color:var(--green);opacity:1}

.pn-burger{display:none;width:42px;height:42px;border:1px solid currentColor;
  align-items:center;justify-content:center;margin-left:auto}
.pn-burger span{display:block;width:16px;height:1.5px;background:currentColor;position:relative}
.pn-burger span::before,.pn-burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor}
.pn-burger span::before{top:-5px}.pn-burger span::after{top:5px}

/* --------------------------------------------------------------- HERO */
.pn-hero{position:relative;background:var(--black)}
/* il track è solo distanza di scroll: 400vh = 300vh di rotazione utile */
.pn-hero-track{height:400vh}
.pn-hero-stage{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:flex-end;background:var(--black)}

/* fermo immagine e canvas occupano lo stesso posto: il primo copre finché
   i fotogrammi non sono caricati, o per sempre se il canvas non parte */
.pn-hero-still,.pn-hero-canvas{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;display:block}
.pn-hero-canvas{opacity:0;transition:opacity .45s var(--ease)}
.pn-hero-stage.is-ready .pn-hero-canvas{opacity:1}
.pn-hero-stage.is-ready .pn-hero-still{opacity:0}

/* barra di caricamento: sottile, in fondo, sparisce quando è pronta */
.pn-hero-load{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:4;
  background:rgba(255,255,255,.12);transition:opacity .4s var(--ease)}
.pn-hero-load i{display:block;height:100%;width:0;background:var(--green);
  transition:width .18s linear}
/* la barra NON sparisce con is-ready: quella arriva presto, con i primi
   scatti. Resta finché non sono scesi tutti, e la nasconde il JS.       */
.pn-hero-load{pointer-events:none}

@keyframes pn-idle{from{transform:scale(1.02)}to{transform:scale(1.22)}}
.pn-hero-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.14) 32%,rgba(0,0,0,.72) 78%,rgba(0,0,0,.96) 100%)}

@media (max-width:1024px){.pn-hero-track{height:340vh}}
@media (max-width:768px){.pn-hero-track{height:280vh}}

/* con "riduci movimento" il canvas non parte: senza questo resterebbero
   quattro schermate di scroll su un'immagine ferma */
@media (prefers-reduced-motion:reduce){
  .pn-hero-track{height:100svh}
  .pn-hero-load{display:none}
}

.pn-hero-in{position:relative;z-index:2;width:min(1280px,92vw);margin:0 auto;padding:0 0 clamp(56px,7vh,92px)}
.pn-hero-in .pn-badge{margin-bottom:20px}
.pn-hero-title{max-width:18ch;margin-bottom:26px}
.pn-hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:34px;justify-content:space-between}
.pn-hero-row .pn-lead{max-width:48ch;color:rgba(255,255,255,.86)}

/* centrata in basso: a destra andava a sovrapporsi al pulsante dell'hero */
.pn-scrollcue{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,.6)}
.pn-scrollcue i{display:block;width:1px;height:48px;background:linear-gradient(180deg,transparent,var(--green));
  animation:pn-cue 2.2s var(--ease) infinite}
@keyframes pn-cue{0%{transform:scaleY(.15);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(.15);transform-origin:bottom}}

/* --------------------------------------------------------------- marquee */
.pn-marquee{background:var(--black);color:var(--white);padding:18px 0;overflow:hidden;
  border-block:1px solid var(--line-dark)}
/* posizione gestita in JS: la velocità reagisce allo scorrimento */
.pn-marquee-track{display:flex;width:max-content;will-change:transform}
.pn-marquee-track span{
  font-family:'Roboto',sans-serif;font-weight:100;font-size:clamp(16px,1.9vw,24px);
  letter-spacing:3px;text-transform:uppercase;padding-inline:28px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:28px;
}
.pn-marquee-track span::after{content:"";width:5px;height:5px;background:var(--green);flex:0 0 auto}

/* --------------------------------------------------------------- sezioni */
.pn-sec{padding:clamp(78px,10vw,128px) 0;position:relative}
.pn-light{background:var(--white);color:var(--text)}
.pn-dark{background:var(--black)}

.pn-sec-head{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-end;
  margin-bottom:clamp(38px,5vw,62px)}
.pn-sec-head .pn-h2{max-width:18ch}
.pn-sec-head .pn-lead{max-width:40ch}

/* --------------------------------------------------------------- bento */
.pn-bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:112px;gap:16px}

/* ---- "nostra visione" bloccato: resta fermo, cambiano solo le foto ----
   La griglia è di 7 righe: a 112px fisse sono 880px, che su uno schermo
   da 900 non ci stanno insieme al titolo. Qui l'altezza della riga la
   detta lo schermo, entro un minimo e un massimo.                      */
.pn-sec--pin{padding:0}
.pn-bento-track{height:280vh}
/* il padding in alto tiene conto dell'header fisso (--hdr): senza, l'occhiello
   ci finisce sotto, perché da fermo il blocco non può scorrergli via */
.pn-bento-stage{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--hdr) + 26px) 0 clamp(32px,4vh,52px)}
/* da fermo il titolo si stringe: quello che risparmia in alto lo guadagnano
   le card, che altrimenti resterebbero schiacciate */
.pn-sec--pin .pn-sec-head{margin-bottom:clamp(22px,3vh,40px)}
.pn-sec--pin .pn-sec-head .pn-h2{font-size:clamp(25px,2.7vw,36px)}
.pn-sec--pin .pn-bento{grid-auto-rows:clamp(58px,calc((100svh - 466px)/7),112px)}
.pn-card{position:relative;overflow:hidden;background:var(--white);border:1px solid var(--line);
  transition:box-shadow .5s var(--ease)}
.pn-card--photo:hover{box-shadow:0 22px 46px -26px rgba(0,0,0,.45)}

/* contenitore della foto: porta la parallasse, mentre l'<img> dentro
   resta libera di ingrandirsi al passaggio del mouse */
.pn-ph{position:absolute;inset:0;overflow:hidden}
.pn-ph img{width:100%;height:100%;object-fit:cover}

/* carosello: le foto stanno una sopra l'altra e si alternano in
   dissolvenza. Sovrapposte servono posizione assoluta, altrimenti
   si impilerebbero in colonna dentro la card. */
.pn-ph--show img{position:absolute;inset:0;opacity:0;
  transition:opacity .6s var(--ease)}
.pn-ph--show img.is-on{opacity:1}
/* lo zoom al passaggio del mouse lo fa Motion, con una molla */

.pn-b1{grid-column:span 7;grid-row:span 4}
.pn-b2{grid-column:span 5;grid-row:span 2}
.pn-b3{grid-column:span 5;grid-row:span 2}
.pn-b4{grid-column:span 4;grid-row:span 3}
.pn-b5{grid-column:span 4;grid-row:span 3}
.pn-b6{grid-column:span 4;grid-row:span 3}

/* Composizione asimmetrica richiesta dal riferimento: le card non stanno
   su una griglia rigida ma escono dai binari, si sovrappongono un po' e
   stanno su piani diversi (ombre + z-index). Gli scostamenti usano i
   MARGINI, non transform, per non litigare con hover e fluttuazione. */
.pn-b2{z-index:3;margin-left:-32px;box-shadow:0 28px 60px -32px rgba(0,0,0,.6)}
.pn-b3{z-index:2;margin-left:-14px;box-shadow:0 22px 50px -30px rgba(0,0,0,.45)}
.pn-b4{margin-top:24px}
.pn-b5{z-index:2;margin-top:-30px;box-shadow:0 24px 54px -32px rgba(0,0,0,.28)}
.pn-b6{margin-top:-16px}
/* la fluttuazione di .pn-b3 e .pn-b5 la fa Motion, dopo il loro ingresso */

.pn-card--data{background:var(--black);border-color:var(--black);color:var(--white);padding:26px;
  display:flex;flex-direction:column;justify-content:space-between}
.pn-card--green{background:var(--green);border-color:var(--green);color:var(--white);padding:26px;
  display:flex;flex-direction:column;justify-content:space-between}
.pn-card--plain{background:var(--white);padding:26px;display:flex;flex-direction:column;justify-content:space-between}
.pn-card--data .pn-badge,.pn-card--green .pn-badge{color:var(--white)}

/* i numeri usano il Roboto sottile dei contatori del tema */
.pn-kpi{font-family:'Roboto',sans-serif;font-weight:100;
  font-size:clamp(38px,4.6vw,60px);line-height:1;letter-spacing:1px}
.pn-kpi .unit{font-size:.45em;font-weight:300;margin-left:4px}
.pn-kpi-lab{font-family:'Mulish',sans-serif;font-weight:600;font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;opacity:.7;margin-top:10px}

.pn-chart{width:100%;height:56px;margin-top:14px;overflow:visible}
/* stati di partenza: il disegno della linea e la crescita delle barre
   sono animati da Motion quando la card entra in vista.
   ATTENZIONE: `stroke-dasharray` e `stroke-dashoffset` NON vanno messi qui.
   Motion li anima come ATTRIBUTI SVG, che in cascata perdono contro
   qualsiasi regola CSS: la linea resterebbe immobile senza dare errore.
   Stanno come attributi nell'HTML e li aggiorna il JS. */
.pn-chart path{fill:none;stroke:var(--green);stroke-width:1.6;stroke-linecap:round}
.pn-bars{display:flex;align-items:flex-end;gap:6px;height:58px;margin-top:14px}
.pn-bars i{flex:1;background:rgba(255,255,255,.38);height:0}

.pn-tag{position:absolute;left:0;bottom:0;z-index:2;background:var(--green);color:var(--white);
  padding:9px 16px;font-family:'Mulish',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:1.5px;text-transform:uppercase}

/* --------------------------------------------------------------- pin/zoom */
.pn-pin{background:var(--black)}
.pn-pin-track{height:360vh;position:relative}
.pn-pin-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.pn-pin-media{position:absolute;inset:0;will-change:transform}
.pn-pin-media img{width:100%;height:100%;object-fit:cover}
.pn-pin-media::after{content:"";position:absolute;inset:0;
  background:radial-gradient(115% 88% at 50% 47%,rgba(0,0,0,.48) 0%,rgba(0,0,0,.82) 62%,rgba(0,0,0,.96) 100%)}

.pn-pin-caps{position:relative;z-index:3;text-align:center;width:min(780px,88vw);
  text-shadow:0 2px 26px rgba(0,0,0,.6)}
.pn-pin-cap{position:absolute;left:0;right:0;top:50%;transform:translateY(-42%) scale(.94);
  opacity:0;visibility:hidden;transition:opacity .8s var(--ease),transform .8s var(--ease),visibility .8s}
.pn-pin-cap.is-on{opacity:1;visibility:visible;transform:translateY(-50%) scale(1)}
.pn-pin-cap .pn-badge{margin-bottom:16px}
.pn-pin-cap .pn-body{margin:18px auto 0;max-width:50ch;color:rgba(255,255,255,.88)}

.pn-marker{position:absolute;z-index:4;display:flex;align-items:center;gap:12px;
  opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.pn-marker.is-on{opacity:1;transform:translateY(0)}
.pn-marker b{position:relative;width:9px;height:9px;background:var(--green);flex:0 0 auto}
.pn-marker b::after{content:"";position:absolute;inset:-5px;border:1px solid var(--green);
  animation:pn-pulse 2s var(--ease) infinite}
@keyframes pn-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.2);opacity:0}}
.pn-marker span{font-family:'Mulish',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:1.5px;
  text-transform:uppercase;padding:7px 13px;background:rgba(0,0,0,.6);border:1px solid var(--line-dark);white-space:nowrap}

.pn-progress{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:5;
  width:min(320px,60vw);height:1px;background:rgba(255,255,255,.22)}
.pn-progress i{display:block;height:100%;width:100%;background:var(--green);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* --------------------------------------------------------------- lista sticky */
.pn-steps{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:clamp(30px,5vw,80px);align-items:start}
.pn-steps-aside{position:sticky;top:calc(var(--hdr) + 40px)}
.pn-steps-aside .pn-h2{margin:16px 0 18px}
.pn-steps-count{font-family:'Roboto',sans-serif;font-weight:100;font-size:34px;letter-spacing:2px;color:var(--muted)}
.pn-steps-count b{color:var(--green);font-weight:100}
.pn-steps-fig{position:relative;margin:28px 0 0;overflow:hidden;aspect-ratio:4/3}

.pn-steps-list{display:flex;flex-direction:column;gap:0;list-style:none;margin:0;padding:0}
.pn-step{
  border-top:1px solid var(--line);padding:30px 4px;display:flex;gap:22px;align-items:flex-start;
  opacity:.4;transition:opacity .55s var(--ease),transform .55s var(--ease),padding-left .55s var(--ease);
}
.pn-step:last-child{border-bottom:1px solid var(--line)}
.pn-step.is-active{opacity:1;padding-left:16px}
.pn-step-dot{width:8px;height:8px;background:var(--line);margin-top:11px;flex:0 0 auto;
  transition:background .55s var(--ease),transform .55s var(--ease)}
.pn-step.is-active .pn-step-dot{background:var(--green);transform:scale(1.6)}
.pn-step-n{font-family:'Mulish',sans-serif;font-weight:700;font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--green);margin-bottom:8px}
.pn-step-body{flex:1;min-width:0}
.pn-step-plus{width:24px;height:24px;flex:0 0 auto;margin-top:6px;position:relative;opacity:.3;
  transition:transform .55s var(--ease),opacity .55s var(--ease)}
.pn-step-plus::before,.pn-step-plus::after{content:"";position:absolute;left:50%;top:50%;background:currentColor}
.pn-step-plus::before{width:13px;height:1px;transform:translate(-50%,-50%)}
.pn-step-plus::after{width:1px;height:13px;transform:translate(-50%,-50%)}
.pn-step.is-active .pn-step-plus{transform:rotate(135deg);opacity:.9}

/* --------------------------------------------------------------- carosello */
/* ------------------------------------------------------- realizzazioni
   La sezione si ferma e il nastro scorre di lato: cambia l'asse, così non
   sembra la terza ripetizione dello stesso gesto. Le foto hanno tutte la
   stessa altezza e larghezza libera, come i fotogrammi di una pellicola. */
.pn-works{padding:0}
.pn-works-track{height:320vh}
.pn-works-stage{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3vh,38px);
  padding:calc(var(--hdr) + 18px) 0 clamp(24px,4vh,48px)}
.pn-works-head{flex:0 0 auto}
.pn-works-view{flex:1 1 auto;display:flex;align-items:center;overflow:hidden}
.pn-works-rail{display:flex;gap:clamp(12px,1.6vw,26px);align-items:center;
  padding-inline:max(calc((100vw - min(1280px,92vw)) / 2),18px);
  will-change:transform}
.pn-work{flex:0 0 auto;margin:0;background:#111;overflow:hidden}
.pn-work img{display:block;height:min(62vh,var(--work-h,62vh));width:auto;max-width:none}

/* niente blocco dove non ci starebbe: resta un nastro trascinabile */
@media (max-width:1080px),(max-height:700px){
  .pn-works{padding:clamp(78px,10vw,128px) 0}
  .pn-works-track{height:auto}
  .pn-works-stage{position:static;height:auto;overflow:visible;padding:0}
  .pn-works-view{overflow-x:auto;scroll-snap-type:x mandatory}
  .pn-works-view::-webkit-scrollbar{display:none}
  .pn-work{scroll-snap-align:center}
  .pn-work img{height:min(52vh,420px)}
}

/* ------------------------------------------------------- la tecnologia
   Stratigrafia ridisegnata: gli strati arretrano uno sull'altro come in
   una sezione reale, così si vede il bordo di ognuno. Il rendering del
   produttore porta il suo marchio, quindi non è riutilizzabile.        */
.pn-strata{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);
  align-items:center;margin-top:clamp(30px,4vw,54px)}
.pn-strata-fig svg{display:block;width:100%;height:auto}
/* il colore di fondo lo dà il materiale, la trama ci va sopra: due rect
   sovrapposti per strato, base + texture */
.st .base{stroke:rgba(0,0,0,.4);stroke-width:.5}
.st .tex{pointer-events:none}
.st[data-n="1"] .base{fill:#6a5a45}          /* scavo, terra */
.st[data-n="2"] .base{fill:#a9a293}          /* tessuto protettivo */
.st[data-n="3"] .base{fill:url(#pnEpdm)}     /* liner EPDM, gomma */
.st[data-n="4"] .base{fill:#6f6a5c}          /* rete di consolidamento */
.st[data-n="5"] .base{fill:#bfb49c}          /* rivestimento grezzo */
.st[data-n="6"] .base{fill:#cfc7b2}          /* rete strutturale intermedia */
.st[data-n="7"] .base{fill:#e5dcc7}          /* finitura in quarzo */
.st{transition:opacity .3s var(--ease)}
.st-num circle{fill:#fff;stroke:rgba(0,0,0,.25);stroke-width:1}
.st-num text{fill:#1b1b1b;font-family:'Mulish',sans-serif;font-weight:700;font-size:12px;
  text-anchor:middle}

.pn-strata-list{list-style:none;margin:0;padding:0;counter-reset:strato}
.pn-strata-list li{display:grid;grid-template-columns:34px 1fr;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--line-dark);
  transition:opacity .3s var(--ease)}
.pn-strata-list li::before{counter-increment:strato;content:counter(strato);
  font-family:'Mulish',sans-serif;font-weight:700;font-size:11px;letter-spacing:1.5px;
  color:var(--green);padding-top:4px}
.pn-strata-list b{display:block;font-family:'Mulish',sans-serif;font-weight:700;
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--white)}
/* il numero è un ::before, quindi nella griglia gli elementi sono tre:
   senza questo la descrizione ricade nella colonna da 34px e va a capo
   a ogni parola */
.pn-strata-list span{grid-column:2;display:block;margin-top:5px;color:var(--on-dark);
  font-size:14.5px;line-height:1.6}
/* mettendo il dito su una riga si spengono gli altri strati */
.pn-strata.is-focus .st:not(.is-on),
.pn-strata.is-focus .pn-strata-list li:not(.is-on){opacity:.28}

.pn-specs{list-style:none;margin:clamp(34px,4.5vw,60px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,36px)}
.pn-specs li{border-top:1px solid var(--line-dark);padding-top:18px}
.pn-specs b{display:block;font-family:'Roboto',sans-serif;font-weight:100;
  font-size:clamp(20px,2.2vw,28px);letter-spacing:1.5px;color:var(--white)}
.pn-specs span{display:block;margin-top:10px;color:var(--on-dark);
  font-size:14.5px;line-height:1.65}

@media (max-width:900px){
  .pn-strata{grid-template-columns:1fr}
  .pn-specs{grid-template-columns:1fr}
}

/* --------------------------------------------------- perché biodesign
   I disegni sono sezioni dello scavo: terra piena, acqua chiara, figura
   in verde. Nessun tratteggio né ombra — la stessa grammatica secca del
   resto della pagina, non le illustrazioni del produttore.            */
.pn-uses{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,30px);
  margin-top:clamp(30px,4vw,52px)}
.pn-use{margin:0}
/* i disegni arrivano già completi di fondo, acqua ed etichetta: qui serve
   solo farli stare nella colonna senza deformarli */
.pn-cut{display:block;width:100%;height:auto}
.pn-use figcaption{margin-top:16px}
.pn-use .pn-h3{font-size:clamp(15px,1.5vw,19px)}
.pn-use .pn-body{margin-top:8px}

.pn-reasons{list-style:none;margin:clamp(38px,5vw,66px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,30px)}
.pn-reasons li{border-top:1px solid var(--line);padding-top:18px}
.pn-reasons .pn-h3{font-size:clamp(15px,1.5vw,19px)}
.pn-reasons .pn-body{margin-top:10px}

@media (max-width:900px){
  .pn-uses,.pn-reasons{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .pn-uses,.pn-reasons{grid-template-columns:1fr}
}

.pn-carousel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:34px}
.pn-arrows{display:flex;gap:10px;flex:0 0 auto}
.pn-arrows button{width:48px;height:48px;border:1px solid var(--line-dark);display:grid;place-items:center;
  transition:background .3s var(--ease),color .3s var(--ease),opacity .3s var(--ease)}
.pn-arrows button:hover{background:var(--white);color:var(--black)}
.pn-arrows button[disabled]{opacity:.25;cursor:default;background:none;color:inherit}

.pn-rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:6px;cursor:grab}
.pn-rail::-webkit-scrollbar{display:none}
.pn-slide{flex:0 0 min(460px,78vw);scroll-snap-align:start;
  opacity:.3;transform:scale(.95);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.pn-slide.is-near{opacity:1;transform:scale(1)}
.pn-slide-fig{overflow:hidden;aspect-ratio:4/3;background:#111}
.pn-slide-fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pn-slide:hover .pn-slide-fig img{transform:scale(1.06)}
.pn-slide-meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:16px}
.pn-slide-meta .pn-mono{color:rgba(255,255,255,.55)}

/* --------------------------------------------------------------- CTA finale */
.pn-cta{position:relative;overflow:hidden;padding:clamp(88px,11vw,140px) 0 clamp(34px,4vw,48px);background:var(--black)}
.pn-cta-bg{position:absolute;inset:-8% 0;z-index:0;will-change:transform}
.pn-cta-bg img{width:100%;height:100%;object-fit:cover;filter:blur(18px) saturate(.9);transform:scale(1.14)}
.pn-cta-bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.66)}
.pn-cta-in{position:relative;z-index:2;text-align:center}
.pn-cta-in .pn-badge{margin-bottom:20px}
.pn-cta-in .pn-h2{max-width:22ch;margin:0 auto 30px}
.pn-wordmark{
  display:block;width:100%;margin-top:clamp(48px,7vw,90px);
  font-family:'Roboto',sans-serif;font-weight:100;
  /* Il tetto in px è obbligatorio: il contenitore si ferma a 1280px mentre
     7.1vw continua a crescere. Oltre ~1450px di finestra il testo non ci
     starebbe più e `text-align:center` smetterebbe di centrare, ancorandolo
     a sinistra e facendolo sbordare a destra. 102px = larghezza massima che
     entra nei 1280px (il testo misura ~12.2 volte la dimensione del font). */
  font-size:min(7.1vw,102px);line-height:1;letter-spacing:.06em;text-transform:uppercase;
  color:var(--white);text-align:center;white-space:nowrap;user-select:none;
}

/* --------------------------------------------------------------- footer */
/* position+overflow servono alla costellazione (js/costellazione.js): il
   canvas dell'animazione sta dentro al footer, il contenuto gli va sopra. */
.pn-footer{background:var(--black);padding:clamp(56px,7vw,82px) 0 30px;border-top:1px solid var(--line-dark);
  position:relative;overflow:hidden}
.pn-footer .pn-wrap{position:relative;z-index:1}
canvas.costellazione{position:absolute;inset:0;z-index:0;pointer-events:none}
.pn-footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:40px}
.pn-footer h4{font-family:'Mulish',sans-serif;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--white);margin:0 0 16px;font-weight:600}
.pn-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pn-footer li,.pn-footer p{font-size:14px;color:var(--on-dark);margin:0;line-height:1.7}
.pn-footer a{transition:color .3s var(--ease)}
.pn-footer a:hover{color:var(--green)}
.pn-footer-logo img{height:34px;margin-bottom:18px}
.pn-footer-bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  margin-top:clamp(44px,6vw,70px);padding-top:24px;border-top:1px solid var(--line-dark)}
.pn-footer-bottom p,.pn-footer-bottom a{font-size:12px;color:rgba(255,255,255,.45);margin:0}

/* ==========================================================================
   ANIMAZIONI
   ========================================================================== */

/* Da qui in poi il CSS descrive solo lo STATO DI PARTENZA.
   Il movimento lo guida Motion (js/motion.min.js): se le transizioni
   restassero anche qui, ogni cosa si animerebbe due volte, con due tempi
   diversi che si accavallano. */

/* 1. reveal generico: parte invisibile, Motion lo porta a opacità 1 */
[data-reveal]{opacity:0;will-change:opacity,transform}

/* 2. titoli: ogni riga aspetta dietro la sua "finestra" */
.pn-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.pn-line > i{display:block;font-style:normal;transform:translateY(115%)}

/* 3. immagini in parallasse. La scala 1.16 è il "margine" da cui attingere:
      senza, traslando l'immagine si scoprirebbe il bordo del riquadro. */
[data-parallax]{will-change:transform;transform:scale(1.16)}

/* 4. sipario: la foto parte coperta, Motion alza il velo dal basso */
.pn-ph{clip-path:inset(0 0 100% 0)}

/* --------------------------------------------------------------- responsive */
/* schermo basso o stretto: il blocco non ci starebbe fermo, quindi scorre
   come prima. Meglio scorrere che vedere le card tagliate.              */
@media (max-width:1080px),(max-height:780px){
  .pn-sec--pin{padding:clamp(78px,10vw,128px) 0}
  .pn-bento-track{height:auto}
  .pn-bento-stage{position:static;min-height:0;padding:0;display:block}
  .pn-sec--pin .pn-bento{grid-auto-rows:112px}
}

@media (max-width:1080px){
  /* impilate: gli scostamenti che creano la sovrapposizione non servono più */
  .pn-b1,.pn-b2,.pn-b3,.pn-b4,.pn-b5,.pn-b6{margin:0}
  .pn-b1{grid-column:span 12;grid-row:span 4}
  .pn-b2,.pn-b3{grid-column:span 6;grid-row:span 2}
  .pn-b4,.pn-b5,.pn-b6{grid-column:span 4;grid-row:span 3}
  .pn-steps{grid-template-columns:1fr}
  .pn-steps-aside{position:static}
  .pn-steps-fig{display:none}
}

@media (max-width:860px){
  :root{--hdr:64px}
  .pn-nav{display:none}
  .pn-burger{display:flex}
  .pn-h1{letter-spacing:2px}
  .pn-h2{letter-spacing:2px}
  .pn-bento{grid-auto-rows:96px;gap:12px}
  .pn-b1{grid-column:span 12;grid-row:span 3}
  .pn-b2,.pn-b3,.pn-b4,.pn-b5,.pn-b6{grid-column:span 12;grid-row:span 2}
  .pn-pin-track{height:300vh}
  .pn-marker{display:none}
  .pn-footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  /* "GIARDINIERI DEL GARDA" ha gli spazi: va a capo da solo */
  .pn-wordmark{font-size:13vw;white-space:normal;line-height:1.05}
  .pn-scrollcue{display:none}
  .pn-slide{flex:0 0 84vw}
}

@media (max-width:520px){
  .pn-footer-grid{grid-template-columns:1fr}
  .pn-card--data,.pn-card--green,.pn-card--plain{padding:20px}
}

/* --------------------------------------------------------------- accessibilità */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  /* con "riduci movimento" il JS non avvia Motion e mostra tutto fermo */
  [data-reveal]{opacity:1 !important}
  .pn-ph{clip-path:none !important}
  .pn-line > i{transform:none !important}
  .pn-scrollbar,.pn-progress i{transform:scaleX(1)}
  .pn-hero-media img{animation:none;transform:scale(1.04)}
  .pn-pin-media{transform:none !important}
  .pn-pin-track{height:auto}
  .pn-pin-stage{position:relative;height:80svh}
  .pn-marquee-track{animation:none}
  .pn-step{opacity:1}
  .pn-slide{opacity:1;transform:none}
}