/* Margine laterale unico: tutti i contenuti partono allineati a logo e titoli dell'header (6%) */
:root{--gutter:6%}
.site-header,.hero-content,
main>section.intro,main>section.solutions,main>section.photo-gallery,main>section.before-after,main>section.materials,main>section.related,
main>section.contact-banner,main>section.mission,main>section.contact-cards,main>section.map-section,main>section.quote,
main>section.statement,main>section.numbers,main>section.l1-services,main>section.l1-contact,body>footer{padding-left:var(--gutter);padding-right:var(--gutter)}
.cta-copy{padding-left:var(--gutter);padding-right:var(--gutter)}
.carousel-heading{margin-left:var(--gutter);margin-right:var(--gutter)}
.carousel-track{padding-left:var(--gutter);padding-right:var(--gutter);scroll-padding-inline:var(--gutter)}
.carousel-progress{margin-left:var(--gutter);margin-right:var(--gutter)}
.section-heading,.solutions-grid,.photo-grid,.ba-grid,.materials-grid,.related .eyebrow,.related-list,.lab-grid{max-width:none;margin-left:0;margin-right:0}
.intro{gap:6%}
.map-card{left:calc(var(--gutter) + 30px)}
@media(max-width:850px){.process-copy{padding-left:var(--gutter);padding-right:var(--gutter)}}
/* Titoli: le parole lunghe vanno a capo invece di uscire dalla colonna */
main h2{overflow-wrap:normal;-webkit-hyphens:manual;hyphens:manual}
.process h2{font-size:clamp(36px,4.2vw,62px)}
main h3{overflow-wrap:normal;-webkit-hyphens:manual;hyphens:manual}
@media(max-width:1100px){.why-grid{grid-template-columns:1fr 1fr}.materials-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.why-grid{grid-template-columns:1fr}.materials-grid{grid-template-columns:1fr 1fr}.material-card h3{font-size:14px;letter-spacing:-.01em}}
/* Logo e header uguali su tutte le pagine (logo +10% rispetto alla home: 185 → 204px) */
.site-header{height:92px;padding-top:10px;padding-bottom:10px}
.site-header .brand{width:204px}
@media(max-width:1100px) and (min-width:851px){.site-header .brand{width:182px}}
@media(max-width:560px){.site-header{height:76px}.site-header .brand{width:167px}}
/* Pulsante Shop Online nell'header, gemello di "Richiedi preventivo" con icona carrello */
.header-right{gap:clamp(14px,1.6vw,22px)}
.header-right .menu-button{margin-left:clamp(8px,1.4vw,26px)}
.header-cta .cta-icon{display:inline-grid;place-items:center;line-height:0}
.header-cta .cta-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.header-shop:hover .cta-icon svg,.header-shop:focus-visible .cta-icon svg{transform:translateX(3px) rotate(-6deg)}
@media(max-width:900px){.header-shop{display:none!important}}
/* Logo +10% ancora (204 → 224px) e header più alto di conseguenza */
.site-header{height:100px}
.site-header .brand{width:224px}
@media(max-width:1100px) and (min-width:851px){.site-header .brand{width:200px}}
@media(max-width:560px){.site-header{height:84px}.site-header .brand{width:184px}}
/* Pulsanti header identici: stessa larghezza, altezza e tipografia su tutte le pagine */
.header-right .header-cta{box-sizing:border-box;width:198px;height:44px;padding:0 16px;justify-content:space-between;gap:12px;font-size:11px;font-weight:700;letter-spacing:.06em;white-space:nowrap}
.header-right .header-cta>span{display:inline-grid;place-items:center;width:20px;height:20px;font-size:18px;line-height:1}
.header-right .header-cta{margin:0}
.header-right .header-cta>span{color:var(--green)}.header-right .header-cta:hover>span,.header-right .header-cta:focus-visible>span{color:var(--dark)}
/* Copertine di Preventivo, Contatti e Prima e dopo alte come quelle delle altre pagine: il titolo cade nello stesso punto */
.hero.page-hero{min-height:710px;height:min(100svh,920px)}
@media(max-width:560px){.hero.page-hero{min-height:680px}}

/* Evidenziatore verde (testo scuro su rettangolo verde) */
.mark{padding:.02em .12em 0;color:var(--dark);background:linear-gradient(var(--green),var(--green)) left bottom/100% 100% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.reveal .mark{background-size:0 100%;transition:background-size .8s cubic-bezier(.65,0,.35,1) .45s}
.reveal.is-visible .mark{background-size:100% 100%}
@media(prefers-reduced-motion:reduce){.reveal .mark{background-size:100% 100%;transition:none}}

/* Niente sillabazione: le parole lunghe devono stare nella colonna */
.hero-content{max-width:calc(655px + 2 * var(--gutter))}
@media(max-width:560px){.hero h1,.thanks h1{font-size:clamp(38px,13vw,66px)}.process h2{font-size:clamp(30px,9vw,42px)}}
.why-grid .solution-card h3{font-size:clamp(20px,1.9vw,27px)}
.solution-card.featured{padding-right:27px}
.solution-card.featured p{padding-right:58px}
@media(max-width:760px){.materials-grid{grid-template-columns:1fr 1fr}.material-card h3{font-size:15px}}
@media(max-width:420px){.materials-grid{grid-template-columns:1fr}.material-card h3{font-size:18px}}
.intro>*{min-width:0}
@media(max-width:560px){.intro h2,.section-heading h2,.gallery h2,.contact-banner h2{font-size:clamp(30px,10vw,42px)}}

/* Mission con l'operatore: la foto scontornata poggia sul fondo della fascia verde e la testa esce sopra */
.mission.has-person{overflow:visible;clip-path:inset(-140px 0 0 0);padding-right:calc(var(--gutter) + 38%)}
.mission.has-person:before{top:auto;bottom:-260px}
.mission.has-person blockquote{max-width:none}
.mission-person{position:absolute;right:calc(var(--gutter) + 2%);bottom:0;z-index:1;width:auto;height:calc(100% + 90px);max-width:none;filter:drop-shadow(0 24px 40px #0b0e1740);pointer-events:none}
@media(max-width:1100px){.mission.has-person{padding-right:calc(var(--gutter) + 34%)}.mission-person{height:calc(100% + 50px)}}
@media(max-width:850px){
  .mission.has-person{clip-path:none;overflow:hidden;padding-right:var(--gutter);padding-bottom:0}
  .mission-person{position:relative;right:auto;display:block;width:min(78%,340px);height:auto;margin:36px auto 0}
}
/* Correzione: foto a dimensione fissa, testo nella colonna di sinistra, testa che esce di ~70px */
.mission.has-person{--person-w:min(30vw,440px);min-height:calc(var(--person-w) * 1.42 - 70px);padding-top:110px;padding-bottom:110px;padding-right:calc(var(--gutter) + var(--person-w) + 50px);display:flex;flex-direction:column;justify-content:center}
.mission.has-person:before{display:none}
.mission.has-person blockquote{font-size:clamp(26px,2.8vw,44px)}
.mission-person{width:var(--person-w);height:auto;right:var(--gutter)}
@media(max-width:850px){.mission.has-person{min-height:0;padding:80px var(--gutter) 0;display:block}.mission-person{width:min(78%,340px);right:auto}}
@media(max-width:1100px) and (min-width:851px){.mission.has-person{--person-w:36vw;padding-top:80px;padding-bottom:80px}.mission.has-person blockquote{font-size:clamp(20px,2.4vw,28px)}}
@media(max-width:850px){.mission.has-person{display:flex;flex-direction:column}.mission-person{order:3;margin:40px auto 0}}
/* Operatore ~10% più piccolo */
.mission.has-person{--person-w:min(27vw,396px)}
@media(max-width:1100px) and (min-width:851px){.mission.has-person{--person-w:32vw}}
@media(max-width:850px){.mission-person{width:min(70%,306px)}}
@media(max-width:1366px) and (min-width:1101px){.mission.has-person blockquote{font-size:2.5vw}}
/* Evidenziatore scuro: testo bianco su rettangolo nero (mission Azienda) */
.mission blockquote em.mark-dark{padding:0 .12em;color:var(--light);-webkit-text-stroke:0;background:linear-gradient(var(--dark),var(--dark)) left bottom/100% 100% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mission blockquote.reveal em.mark-dark{background-size:0 100%;transition:background-size .9s cubic-bezier(.65,0,.35,1) .45s}
.mission blockquote.reveal.is-visible em.mark-dark{background-size:100% 100%}
@media(prefers-reduced-motion:reduce){.mission blockquote.reveal em.mark-dark{background-size:100% 100%;transition:none}}

/* Copertine: H1 per Google = riga piccola con parola chiave; lo slogan resta il titolo grande visivo */
.hero h1.hero-seo{display:flex;align-items:center;gap:12px;margin:0;color:#f3f3ed;font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.19em;text-transform:uppercase}
.hero h1.hero-seo:before{content:'';flex:0 0 26px;height:2px;background:var(--green)}
.hero .hero-content>p.hero-slogan{max-width:none;margin:18px 0 22px;color:var(--light);font-size:clamp(48px,5.7vw,88px);font-weight:700;line-height:.91;letter-spacing:-.075em;text-transform:uppercase}
@media(max-width:560px){.hero h1.hero-seo{font-size:10.5px;letter-spacing:.14em}.hero .hero-content>p.hero-slogan{font-size:clamp(38px,13vw,66px)}}
/* Copertina video Gadget: il prodotto al centro del video viene spostato a destra, lontano dal titolo */
@media(min-width:851px){.hero video.hero-media-right{left:24%;right:auto;width:100%}}
/* Footer: link informativa privacy e cookie policy */
.footer-legal{display:flex;flex-direction:column;gap:4px;font-size:12px}
.footer-legal a{color:#aeb1b7;text-decoration:underline;text-decoration-color:#ffffff30;text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.footer-legal a:hover,.footer-legal a:focus-visible{color:var(--green);text-decoration-color:var(--green)}