/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --c-forest:        #1a2e14;   /* dominant deep forest */
  --c-forest-deep:   #122109;   /* deepest section */
  --c-green:         #2d6a2d;   /* primary interactive */
  --c-green-bright:  #5aad4e;   /* accent / CTA */
  --c-green-pale:    #d6e8cc;   /* borders & dividers */
  --c-green-mist:    #eaf3e2;   /* very light fill */
  --c-bg:            #f8faf5;   /* warm white page */
  --c-card:          #ffffff;
  --c-ink:           #0f1a0a;
  --c-ink-soft:      #4a5a44;
  --c-ink-muted:     #7a8975;
  --c-cream:         #f1f5ec;
  --c-cream-soft:    #b9c8b2;

  --f-serif: "DM Serif Display", Georgia, serif;
  --f-sans:  "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-pill: 999px;

  --maxw: 1240px;
  --pad-x: clamp(20px, 5vw, 72px);
  --section-y: clamp(80px, 9vw, 130px);
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body{
  margin:0;
  font-family:var(--f-sans);
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  color:var(--c-ink);
  background:var(--c-bg);
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
::selection{ background:var(--c-green-bright); color:#fff; }

/* ============================================================
   UTILITIES
   ============================================================ */
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--pad-x);
  padding-right:var(--pad-x);
}
.section{ padding-top:var(--section-y); padding-bottom:var(--section-y); }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-green);
}
.eyebrow::before{ content:""; width:18px; height:1px; background:var(--c-green); }

.h-title{
  font-family:var(--f-serif);
  font-weight:400;
  font-size:clamp(36px, 4.4vw, 56px);
  line-height:1.08;
  letter-spacing:-0.012em;
  color:var(--c-forest);
  margin:18px 0 0;
}
.h-title em{ font-style:italic; color:var(--c-green-bright); }

.lead{
  font-size:clamp(16px, 1.15vw, 18px);
  font-weight:300;
  line-height:1.7;
  color:var(--c-ink-soft);
  max-width:60ch;
  margin-top:18px;
}

/* badges & pills */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px;
  border:1px solid var(--c-green-pale);
  border-radius:var(--r-pill);
  background:var(--c-card);
  font-size:12px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--c-forest);
}
.pill .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--c-green-bright);
  box-shadow:0 0 0 4px rgba(90,173,78,.15);
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px;
  border-radius:var(--r-pill);
  font-family:var(--f-sans);
  font-size:14px;
  font-weight:500;
  letter-spacing:.005em;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  white-space:nowrap;
}
.btn .arr{ width:14px; height:10px; transition:transform .3s ease; }
.btn:hover .arr{ transform:translateX(3px); }
.btn--solid{ background:var(--c-green-bright); color:#fff; }
.btn--solid:hover{ background:#4f9c44; }
.btn--dark{ background:var(--c-forest); color:#fff; }
.btn--dark:hover{ background:var(--c-green); }
.btn--ghost{ border:1px solid var(--c-green-pale); color:var(--c-forest); background:var(--c-card); }
.btn--ghost:hover{ border-color:var(--c-forest); }
.btn--ghost-dark{ border:1px solid rgba(255,255,255,.25); color:#fff; background:transparent; }
.btn--ghost-dark:hover{ border-color:#fff; background:rgba(255,255,255,.06); }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:50;
  padding:18px 0;
  transition: background .3s ease, border-color .3s ease, padding .3s ease, backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(248,250,245,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color:var(--c-green-pale);
  padding:12px 0;
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:32px; }

.brand{ display:flex; align-items:center; gap:12px; }
.brand__mark{
  width:80px; height:80px;
  border-radius:var(--r-md);
  background:transparent;
  color:var(--c-green-bright);
  display:grid; place-items:center;
  flex-shrink:0;
}
.brand__mark svg{ width:22px; height:22px; }
.brand__logo-img{
  width:80px; height:80px;
  object-fit:contain;
  display:block;
}
@media (max-width:900px){
  .brand__mark{ width:52px; height:52px; }
  .brand__logo-img{ width:52px; height:52px; }
}
.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__name{
  font-family:var(--f-serif);
  font-weight:400;
  font-size:18px;
  letter-spacing:-0.005em;
  color:var(--c-forest);
}
.brand__sub{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--c-ink-muted);
  margin-top:2px;
}

.nav__links{
  display:flex; align-items:center; gap:32px;
  list-style:none; margin:0; padding:0;
}
.nav__links a{
  font-size:14px;
  font-weight:500;
  color:var(--c-ink);
  position:relative;
  padding:6px 0;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--c-green-bright);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.nav__links a:hover::after{ transform:scaleX(1); }

.nav__cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--c-green-bright);
  color:#fff;
  padding:10px 18px;
  border-radius:var(--r-pill);
  font-size:13px;
  font-weight:500;
  transition:background .25s ease;
}
.nav__cta:hover{ background:#4f9c44; }

/* .nav__toggle styles defined in MOBILE DRAWER section below */

/* ============================================================
   HERO
   ============================================================ */
.hero{
  padding-top: clamp(120px, 14vh, 170px);
  padding-bottom: var(--section-y);
  position:relative;
  overflow:hidden;
}
.hero__inner{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(40px, 5vw, 80px);
  align-items:center;
}
.hero__copy{ max-width:600px; }
.hero__pill{ margin-bottom:28px; }

.hero__title{
  font-family:var(--f-serif);
  font-weight:400;
  font-size:clamp(40px, 5.6vw, 76px);
  line-height:1.04;
  letter-spacing:-0.018em;
  color:var(--c-forest);
  margin:0;
}
.hero__title em{
  font-style:italic;
  color:var(--c-green-bright);
}
.hero__sub{
  margin: 28px 0 36px;
  font-size:clamp(16px, 1.15vw, 18px);
  font-weight:300;
  line-height:1.7;
  color:var(--c-ink-soft);
  max-width:54ch;
}
.hero__ctas{ display:flex; flex-wrap:wrap; gap:12px; }

/* hero dashboard panel (KPI card on right) */
.dash{
  background:var(--c-green-mist);
  border:1px solid var(--c-green-pale);
  border-radius:var(--r-lg);
  padding: clamp(24px, 2.4vw, 32px);
  position:relative;
}
.dash__head{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:18px;
  border-bottom:1px solid var(--c-green-pale);
}
.dash__title{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-forest);
  display:flex; align-items:center; gap:10px;
}
.dash__title::before{
  content:"";
  width:7px; height:7px; border-radius:50%;
  background:var(--c-green-bright);
  box-shadow:0 0 0 4px rgba(90,173,78,.18);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(90,173,78,.18); }
  50%{    box-shadow:0 0 0 7px rgba(90,173,78,.05); }
}
.dash__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1px;
  background:var(--c-green-pale);
  margin-top:18px;
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid var(--c-green-pale);
}
.kpi{
  background:#fcfdf9;
  padding:20px;
  display:flex; flex-direction:column; gap:6px;
  position:relative;
  min-height:120px;
}
.kpi__label{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-ink-muted);
}
.kpi__value{
  font-family:var(--f-serif);
  font-size:clamp(36px, 3.6vw, 46px);
  line-height:1;
  color:var(--c-forest);
  letter-spacing:-0.012em;
  margin-top:auto;
  display:flex; align-items:baseline; gap:4px;
}
.kpi__value sup{
  font-family:var(--f-sans);
  font-size:.42em;
  font-weight:500;
  color:var(--c-green-bright);
  letter-spacing:0;
  position:relative;
  top:-.6em;
}
.kpi__unit{
  font-family:var(--f-sans);
  font-size:.4em;
  font-weight:500;
  color:var(--c-ink-soft);
  margin-left:2px;
}
.kpi__bar{
  height:3px;
  background:var(--c-green-pale);
  border-radius:2px;
  overflow:hidden;
  margin-top:10px;
}
.kpi__bar i{
  display:block; height:100%;
  background:var(--c-green-bright);
  width:0;
  transition: width 1.6s cubic-bezier(.2,.8,.2,1);
}

.cert-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px;
  border-radius:var(--r-pill);
  background:var(--c-card);
  border:1px solid var(--c-green-pale);
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:500;
  color:var(--c-forest);
  letter-spacing:.02em;
}
.cert-chip svg{ width:12px; height:12px; color:var(--c-green-bright); }

/* ============================================================
   CHI SIAMO (asymmetric — big year + text)
   ============================================================ */
.about{ padding-top: var(--section-y); padding-bottom: var(--section-y); }
.about__head{ display:grid; grid-template-columns: 1.05fr 1.95fr; gap:60px; align-items:start; }

.about__year{
  font-family:var(--f-serif);
  font-size:clamp(120px, 16vw, 220px);
  line-height:.9;
  color:var(--c-green-pale);
  letter-spacing:-0.04em;
  position:relative;
}
.about__year-tag{
  position:absolute;
  top:14px; left:0;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--c-green);
}
.about__year-tag::before{
  content:""; display:inline-block;
  width:24px; height:1px; background:var(--c-green);
  vertical-align:middle; margin-right:10px;
}

.about__text p{
  font-size:17px;
  line-height:1.8;
  color:var(--c-ink-soft);
  margin:0 0 18px;
}
.about__text p:first-child{
  font-size:20px;
  line-height:1.6;
  color:var(--c-ink);
  font-weight:400;
}

/* timeline */
.timeline{
  margin-top:80px;
  padding-top:40px;
  border-top:1px solid var(--c-green-pale);
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position:relative;
}
.timeline::before{
  content:"";
  position:absolute;
  top:40px; left:0; right:0;
  height:1px;
  background: var(--c-green-pale);
  background-image: linear-gradient(90deg, var(--c-green-bright) 0%, var(--c-green-bright) 100%);
}
.tl-item{
  padding:32px 20px 0 0;
  position:relative;
}
.tl-item::before{
  content:"";
  position:absolute;
  top:-5px; left:0;
  width:11px; height:11px;
  border-radius:50%;
  background:var(--c-card);
  border:2px solid var(--c-green-bright);
}
.tl-year{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--c-green-bright);
  font-weight:500;
}
.tl-title{
  font-family:var(--f-serif);
  font-size:20px;
  color:var(--c-forest);
  margin:8px 0 6px;
  letter-spacing:-0.005em;
  line-height: 1.2;
}
.tl-text{
  font-size:13px;
  font-weight:300;
  line-height:1.6;
  color:var(--c-ink-soft);
  margin:0;
}

/* timeline responsive: 5 → 3 → 1 */
@media (max-width: 1080px){
  .timeline{ grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
}

/* ============================================================
   SERVIZI
   ============================================================ */
.services__head{
  display:grid; grid-template-columns: 1fr 1fr; gap:50px;
  align-items:end;
  margin-bottom:50px;
}
.services__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
}
.service{
  position:relative;
  background:var(--c-card);
  border:1px solid var(--c-green-pale);
  border-radius:var(--r-lg);
  padding: 28px 26px 30px;
  display:flex; flex-direction:column; gap:12px;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  overflow:hidden;
  min-height:240px;
}
.service:hover{
  border-color:var(--c-green-bright);
  transform:translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(45, 106, 45, .35);
}
.service__num{
  position:absolute;
  top:14px; right:20px;
  font-family:var(--f-serif);
  font-size:72px;
  line-height:1;
  color:var(--c-green-mist);
  letter-spacing:-0.03em;
  pointer-events:none;
  user-select:none;
  z-index:0;
  transition: color .3s ease;
}
.service:hover .service__num{
  color: rgba(90, 173, 78, .18);
}
.service__icon{
  width:42px; height:42px;
  border-radius:var(--r-md);
  background:var(--c-green-mist);
  color:var(--c-green);
  display:grid; place-items:center;
  position:relative; z-index:1;
  flex-shrink: 0;
  transition: background .3s ease, color .3s ease;
}
.service__icon svg{ width:20px; height:20px; }
.service:hover .service__icon{
  background: var(--c-green-bright);
  color: #fff;
}
.service__cat{
  display:inline-block;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-green);
  position:relative; z-index:1;
  margin-top: 2px;
}
.service__title{
  font-family:var(--f-serif);
  font-weight:400;
  font-size:22px;
  margin:0;
  color:var(--c-forest);
  letter-spacing:-0.008em;
  line-height: 1.15;
  position:relative; z-index:1;
}
.service__text{
  font-size:14px;
  font-weight:300;
  line-height:1.6;
  color:var(--c-ink-soft);
  margin: 4px 0 0;
  position:relative; z-index:1;
}

/* Responsive: 4 → 2 → 1 columns */
@media (max-width: 1080px){
  .services__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .services__grid{ grid-template-columns: 1fr; gap: 14px; }
  .service{ min-height: 0; }
  .service__num{ font-size: 64px; }
}

/* ============================================================
   PRODUZIONE (showcase + CTA verso pagina dedicata)
   ============================================================ */
.produzione{
  background: var(--c-forest);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.produzione::before{
  content:"";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 90% 10%, rgba(90,173,78,.10), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(90,173,78,.06), transparent 50%);
  pointer-events: none;
}
.produzione > .container{ position: relative; z-index: 1; }

.produzione__head{
  max-width: 680px;
  margin: 0 auto 60px;
  text-align: center;
}
.produzione__head .eyebrow{ color: var(--c-green-bright); }
.produzione__head .eyebrow::before{ background: var(--c-green-bright); }
.produzione__head .h-title{ color: #fff; }
.produzione__head .h-title em{ color: var(--c-green-bright); }
.produzione__head .lead{ color: var(--c-cream-soft); margin-left: auto; margin-right: auto; }

/* Showcase grid: 3 colonne uguali */
.produzione__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 64px;
}

/* Tiles are now <button> for accessibility (keyboard, screen reader) */
.produzione__tile{
  position: relative;
  margin: 0;
  padding: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  transition: transform .35s cubic-bezier(.2,.65,.2,1), border-color .35s ease, box-shadow .35s ease;
  cursor: zoom-in;
  display: block;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
}
.produzione__tile:hover{
  transform: translateY(-4px);
  border-color: rgba(90,173,78,.45);
  box-shadow: 0 24px 50px -24px rgba(0,0,0,.5);
}
.produzione__tile:focus-visible{
  outline: 2px solid var(--c-green-bright);
  outline-offset: 3px;
}

.produzione__img{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-forest-deep);
}
.produzione__img svg,
.produzione__img img{
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.65,.2,1);
}
.produzione__tile:hover .produzione__img svg,
.produzione__tile:hover .produzione__img img{
  transform: scale(1.06);
}

/* Zoom indicator that appears on hover */
.produzione__zoom{
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(15, 26, 10, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.produzione__zoom svg{ width: 18px; height: 18px; }
.produzione__tile:hover .produzione__zoom,
.produzione__tile:focus-visible .produzione__zoom{
  opacity: 1;
  transform: scale(1);
}

/* CTA centered below grid */
.produzione__cta{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.produzione__cta-desc{
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--c-cream-soft);
  margin: 0;
}
.produzione__cta-btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 14px;
  padding: 18px 36px;
  border-radius: var(--r-pill);
  background: var(--c-green-bright);
  color: #fff;
  font-family: var(--f-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .005em;
  border: 1px solid var(--c-green-bright);
  box-shadow: 0 14px 32px -12px rgba(90, 173, 78, .55);
  transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease, gap .25s ease;
  text-decoration: none;
}
.produzione__cta-btn svg{
  width: 16px; height: 10px;
  transition: transform .25s ease;
}
.produzione__cta-btn:hover{
  background: #4f9c44;
  border-color: #4f9c44;
  transform: translateY(-2px);
  box-shadow: 0 22px 40px -14px rgba(90, 173, 78, .65);
  gap: 18px;
}
.produzione__cta-btn:hover svg{ transform: translateX(2px); }
.produzione__cta-btn:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Responsive */
@media (max-width: 980px){
  .produzione__grid{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px){
  .produzione__grid{
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 48px;
  }
  .produzione__cta-btn{
    padding: 16px 28px;
    font-size: 15px;
  }
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position: fixed; inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(8, 14, 6, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
  padding: clamp(20px, 4vw, 60px);
  cursor: zoom-out;
}
.lightbox.is-open{
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease, visibility 0s linear 0s;
}

.lightbox__stage{
  max-width: min(1400px, 95vw);
  max-height: 88vh;
  width: 100%;
  display: grid;
  place-items: center;
  cursor: default;
  transform: scale(.96);
  transition: transform .35s cubic-bezier(.2,.65,.2,1);
}
.lightbox.is-open .lightbox__stage{
  transform: scale(1);
}
.lightbox__stage > svg,
.lightbox__stage > img{
  max-width: 100%;
  max-height: 88vh;
  width: auto; height: auto;
  border-radius: var(--r-lg);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.8);
  display: block;
}

.lightbox__close{
  position: fixed;
  top: clamp(16px, 2.4vw, 28px);
  right: clamp(16px, 2.4vw, 28px);
  z-index: 101;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease, border-color .25s ease;
}
.lightbox__close:hover{
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.32);
  transform: rotate(90deg);
}
.lightbox__close:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.lightbox__close svg{ width: 22px; height: 22px; }

/* prevent body scroll when lightbox is open */
body.lightbox-open{ overflow: hidden; }

/* ============================================================
   CERTIFICAZIONI
   ============================================================ */
.certs__head{ text-align:center; max-width:680px; margin:0 auto 56px; }
.certs__head .eyebrow{ justify-content:center; }
.certs__head .eyebrow::before{ display:none; }
.certs__head .lead{ margin-left:auto; margin-right:auto; }

.certs__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
}
.cert-card{
  background:var(--c-card);
  border:1px solid var(--c-green-pale);
  border-radius:var(--r-lg);
  padding: clamp(28px, 2.6vw, 36px);
  display:flex; flex-direction:column; gap:16px;
  transition:border-color .3s ease;
}
.cert-card:hover{ border-color:var(--c-green-bright); }
.cert-card__top{
  display:flex; align-items:center;
  padding-bottom:16px;
  border-bottom:1px solid var(--c-green-pale);
}
.cert-card__badge{
  width:54px; height:54px;
  border-radius:var(--r-md);
  background:var(--c-forest);
  color:var(--c-green-bright);
  display:grid; place-items:center;
  font-family:var(--f-serif);
  font-size:18px;
  letter-spacing:.02em;
}
.cert-card__name{
  font-family:var(--f-serif);
  font-size:24px;
  color:var(--c-forest);
  margin:0;
  letter-spacing:-0.005em;
}
.cert-card__name span{ color:var(--c-green-bright); font-style:italic; }
.cert-card__text{
  font-size:14px;
  font-weight:300;
  line-height:1.7;
  color:var(--c-ink-soft);
  margin:0;
}
.cert-card__check{
  margin-top:auto;
  display:flex; align-items:center; gap:8px;
  padding-top:14px;
  border-top:1px solid var(--c-green-pale);
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-green);
}
.cert-card__check svg{ width:14px; height:14px; }

/* ============================================================
   CONTATTI
   ============================================================ */
.contact__head{
  margin-bottom: 50px;
}
.contact__layout{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

/* WhatsApp CTA card */
.wa-card{
  display:flex; flex-direction:column;
  gap: 28px;
  padding: clamp(32px, 3.4vw, 44px);
  border-radius: var(--r-lg);
  background:
    linear-gradient(155deg, var(--c-forest) 0%, var(--c-forest-deep) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 24px 60px -28px rgba(15,26,10,.5);
  transition: transform .35s cubic-bezier(.2,.65,.2,1), box-shadow .35s ease;
  text-decoration: none;
  isolation: isolate;
}
.wa-card::before{
  content:"";
  position:absolute; inset:auto -20% -40% auto;
  width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(37, 211, 102, .22) 0%, rgba(37, 211, 102, 0) 65%);
  z-index: 0;
  pointer-events: none;
}
.wa-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 32px 70px -28px rgba(15,26,10,.65);
}

.wa-card__top{
  display:flex; align-items:center; justify-content:space-between;
  position: relative; z-index: 1;
}
.wa-card__icon{
  width: 56px; height: 56px;
  display:grid; place-items:center;
  border-radius: var(--r-md);
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 22px -6px rgba(37,211,102,.55);
}
.wa-card__icon svg{ width: 30px; height: 30px; }

.wa-card__badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: rgba(37, 211, 102, .14);
  border: 1px solid rgba(37, 211, 102, .35);
  color: #8ee5a4;
}
.wa-card__badge::before{
  content:"";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 0 0 3px rgba(37,211,102,.25);
  animation: wa-pulse 2.2s ease-in-out infinite;
}
@keyframes wa-pulse{
  0%, 100% { box-shadow: 0 0 0 3px rgba(37,211,102,.25); }
  50%      { box-shadow: 0 0 0 6px rgba(37,211,102,.05); }
}

.wa-card__body{
  display:flex; flex-direction:column; gap: 10px;
  position: relative; z-index: 1;
}
.wa-card__label{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.wa-card__phone{
  font-family: var(--f-serif);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.05;
  color: #fff;
}
.wa-card__desc{
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,.72);
  max-width: 44ch;
}

.wa-card__cta{
  display:inline-flex; align-items:center; justify-content:space-between;
  gap: 14px;
  margin-top: 4px;
  padding: 14px 20px;
  border-radius: var(--r-pill);
  background: #25D366;
  color: #fff;
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  align-self: flex-start;
  transition: background .25s ease, gap .25s ease;
  position: relative; z-index: 1;
}
.wa-card__cta svg{ width: 14px; height: 10px; }
.wa-card:hover .wa-card__cta{
  background: #1fb957;
  gap: 18px;
}

/* Info cards (sede / phone / email / orari) */
.contact__info{ display:flex; flex-direction:column; gap: 14px; }
.info-card{
  background: var(--c-card);
  border: 1px solid var(--c-green-pale);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2vw, 26px) clamp(22px, 2.4vw, 28px);
  display:grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center;
  transition: border-color .25s ease, transform .25s ease;
}
.info-card:hover{
  border-color: var(--c-green);
  transform: translateY(-1px);
}
.info-card__icon{
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--c-green-mist);
  color: var(--c-green);
  display:grid; place-items:center;
  flex-shrink: 0;
}
.info-card__icon svg{ width: 22px; height: 22px; }
.info-card__content{ min-width: 0; }
.info-card__label{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.info-card__value{
  font-family: var(--f-serif);
  font-size: 18px;
  color: var(--c-forest);
  margin-top: 4px;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.info-card__value small{
  display: block;
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--c-ink-soft);
  margin-top: 4px;
  letter-spacing: 0;
}

/* ============================================================
   FOOTER — 4 columns
   ============================================================ */
.footer{
  border-top:1px solid var(--c-green-pale);
  padding: 72px 0 28px;
  background: var(--c-cream);
  color: var(--c-ink-soft);
  font-size: 14px;
}

.footer__grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.1fr;
  gap: 56px 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--c-green-pale);
}

.footer__col{
  display:flex; flex-direction:column;
  min-width:0;
}

.footer__brand{
  display:flex; align-items:center; gap:12px;
  margin-bottom: 28px;
}
.footer__brand .brand__name{ font-size:16px; }
.footer__brand .brand__sub{ font-size:10px; }

.footer__title{
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-forest);
  margin: 0 0 18px;
}

/* navigation list */
.footer__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.footer__list a{
  font-size: 14px;
  color: var(--c-ink-soft);
  transition: color .2s ease, transform .2s ease;
  display:inline-block;
}
.footer__list a:hover{
  color: var(--c-green);
  transform: translateX(3px);
}

/* address */
.footer__address{
  font-style: normal;
  line-height: 1.7;
  color: var(--c-ink-soft);
  margin: 0 0 16px;
}
.footer__address strong{
  color: var(--c-forest);
  font-weight: 500;
}
.footer__map{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-green);
  transition: color .2s ease, gap .2s ease;
}
.footer__map svg{ width:14px; height:14px; }
.footer__map:hover{
  color: var(--c-green-bright);
  gap: 12px;
}

/* contact list */
.footer__contact,
.footer__legal-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:14px;
}
.footer__contact li,
.footer__legal-list li{
  display:flex; flex-direction:column; gap:2px;
  line-height:1.5;
}
.footer__label{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  font-weight: 500;
}
.footer__contact a,
.footer__contact span:not(.footer__label),
.footer__legal-list span:not(.footer__label){
  color: var(--c-forest);
  font-size: 14px;
  transition: color .2s ease;
}
.footer__contact a:hover{ color: var(--c-green); }

/* Bottom bar */
.footer__bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px;
  padding-top: 24px;
  flex-wrap: wrap;
}
.footer__copy{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--c-ink-muted);
}
.footer__bottom-links{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:20px;
}
.footer__bottom-links a{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  transition: color .2s ease;
}
.footer__bottom-links a:hover{ color: var(--c-green); }
.footer__credit{
  display:inline-flex; align-items:center; gap:8px;
}
.footer__credit-label{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.footer__credit-link{
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--c-green-pale);
  border-radius: var(--r-sm);
  color: var(--c-forest);
  background: var(--c-card);
  transition: border-color .25s ease, color .25s ease, background .25s ease, transform .25s ease;
}
.footer__credit-link svg{
  width: 11px; height: 11px;
  transition: transform .25s ease;
}
.footer__credit-link:hover{
  border-color: var(--c-green);
  color: var(--c-green);
  background: var(--c-green-mist);
}
.footer__credit-link:hover svg{
  transform: translate(2px, -2px);
}
.footer__credit-link:focus-visible{
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}

/* Footer responsive */
@media (max-width: 1080px){
  .footer__grid{
    grid-template-columns: 1fr 1fr;
    gap: 48px 40px;
  }
}
@media (max-width: 600px){
  .footer{ padding-top: 56px; }
  .footer__grid{
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 40px;
  }
  .footer__bottom{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition: opacity .8s cubic-bezier(.2,.65,.2,1), transform .8s cubic-bezier(.2,.65,.2,1);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal--d1{ transition-delay:.08s; }
.reveal--d2{ transition-delay:.16s; }
.reveal--d3{ transition-delay:.24s; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .hero__inner{ grid-template-columns:1fr; gap:50px; }
  .about__head{ grid-template-columns:1fr; gap:32px; }
  .about__year{ font-size:140px; }
  .timeline{ grid-template-columns:1fr; gap:20px; }
  .timeline::before{ display:none; }
  .tl-item{ padding-left:20px; padding-top:8px; border-left:2px solid var(--c-green-pale); }
  .tl-item::before{ left:-7px; top:8px; }
  .services__head{ grid-template-columns:1fr; gap:20px; }
  .certs__grid{ grid-template-columns:1fr; }
  .contact__layout{ grid-template-columns:1fr; }
}
@media (max-width: 900px){
  .nav__desktop, .nav__cta{ display:none !important; }
  .nav__toggle{ display:inline-flex !important; }
  .brand__sub{ font-size:9px; }
  .dash__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   NAV — MOBILE TOGGLE (burger button)
   ============================================================ */
.nav__toggle{
  display:none;
  align-items:center; justify-content:center;
  width:44px; height:44px;
  border:1px solid var(--c-green-pale);
  border-radius:var(--r-md);
  background:var(--c-card);
  color:var(--c-forest);
  cursor:pointer;
  transition: border-color .2s ease, background .2s ease;
}
.nav__toggle:hover{ border-color:var(--c-green); }
.nav__toggle-bars{
  position:relative;
  width:18px; height:12px;
  display:inline-block;
}
.nav__toggle-bars span{
  position:absolute; left:0; right:0;
  height:2px;
  background:currentColor;
  border-radius:2px;
  transition: transform .35s cubic-bezier(.2,.65,.2,1), opacity .25s ease, top .35s cubic-bezier(.2,.65,.2,1);
}
.nav__toggle-bars span:nth-child(1){ top:0; }
.nav__toggle-bars span:nth-child(2){ top:5px; }
.nav__toggle-bars span:nth-child(3){ top:10px; }
.nav__toggle.is-active .nav__toggle-bars span:nth-child(1){ top:5px; transform:rotate(45deg); }
.nav__toggle.is-active .nav__toggle-bars span:nth-child(2){ opacity:0; }
.nav__toggle.is-active .nav__toggle-bars span:nth-child(3){ top:5px; transform:rotate(-45deg); }

/* ============================================================
   NAV — MOBILE DRAWER (right side)
   ============================================================ */
.nav__backdrop{
  position:fixed; inset:0;
  background:rgba(15, 26, 10, 0);
  z-index:60;
  pointer-events:none;
  transition: background .35s ease;
}
.nav__backdrop.is-open{
  background:rgba(15, 26, 10, .55);
  pointer-events:auto;
}

.nav__drawer{
  position:fixed; top:0; right:0; bottom:0;
  width: min(86vw, 380px);
  background: var(--c-bg);
  z-index:61;
  display:flex; flex-direction:column;
  transform: translateX(100%);
  transition: transform .42s cubic-bezier(.2,.65,.2,1), visibility 0s .42s; /* ← AGGIUNTO DELAY */
  box-shadow: -24px 0 60px rgba(15,26,10,.18);
  visibility:hidden;
  -webkit-overflow-scrolling: touch;
  overflow-y:auto;
  overscroll-behavior: contain;
}
.nav__drawer.is-open{
  transform: translateX(0);
  visibility:visible;
  transition: transform .42s cubic-bezier(.2,.65,.2,1); /* ← NESSUN DELAY quando si apre */
}

.nav__drawer-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px;
  border-bottom:1px solid var(--c-green-pale);
  flex-shrink:0;
}
.nav__drawer-brand{
  display:flex; align-items:center; gap:12px;
}
.nav__drawer-brand .brand__mark{
  width:44px; height:44px;
  background:transparent;
}
.nav__drawer-brand .brand__logo-img{
  width:44px; height:44px;
  object-fit:contain;
}
.nav__drawer-brand .brand__mark svg{ width:20px; height:20px; }
.nav__drawer-brand .brand__name{ font-size:16px; }

.nav__drawer-close{
  width:40px; height:40px;
  display:grid; place-items:center;
  border:1px solid var(--c-green-pale);
  border-radius:var(--r-md);
  background:var(--c-card);
  color:var(--c-forest);
  cursor:pointer;
  transition: border-color .2s ease, color .2s ease;
}
.nav__drawer-close:hover{
  border-color:var(--c-green);
  color:var(--c-green);
}
.nav__drawer-close svg{ width:18px; height:18px; }

.nav__drawer-nav{
  padding: 12px 0;
  flex:1;
}
.nav__drawer-links{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column;
}
.nav__drawer-links a{
  display:flex; align-items:baseline; gap:18px;
  padding: 18px 24px;
  font-family: var(--f-serif);
  font-size: 26px;
  line-height:1.1;
  color: var(--c-forest);
  border-bottom: 1px solid var(--c-green-pale);
  transition: background .2s ease, color .2s ease;
}
.nav__drawer-links a:hover,
.nav__drawer-links a:focus-visible{
  background: var(--c-green-mist);
  color: var(--c-green);
  outline:none;
}
.nav__drawer-links li:last-child a{ border-bottom:0; }
.nav__drawer-num{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--c-ink-muted);
  font-weight:500;
  flex-shrink:0;
  width:24px;
}

.nav__drawer-foot{
  padding: 20px 24px 28px;
  border-top: 1px solid var(--c-green-pale);
  display:flex; flex-direction:column; gap:18px;
  flex-shrink:0;
}
.nav__drawer-cta{
  display:inline-flex; align-items:center; justify-content:space-between;
  background: var(--c-green-bright);
  color:#fff;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  transition: background .25s ease;
}
.nav__drawer-cta:hover{ background:#4f9c44; }
.nav__drawer-cta .arr{ width:14px; height:10px; }

.nav__drawer-meta{
  display:flex; flex-direction:column; gap:6px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--c-ink-soft);
}
.nav__drawer-meta a{
  color: inherit;
  transition: color .2s ease;
}
.nav__drawer-meta a:hover{ color: var(--c-green); }

/* prevent body scroll when drawer open */
body.nav-open{ overflow:hidden; }
/* ============================================================
   LEGAL PAGES (Privacy, Cookie Policy)
   ============================================================ */
.legal-page{
  padding-top: clamp(80px, 10vw, 130px);
  padding-bottom: clamp(60px, 8vw, 100px);
  background: var(--c-bg);
}
.legal-page__inner{
  max-width: 820px;
}
.legal-page__head{
  margin-bottom: 56px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--c-green-pale);
}
.legal-page__title{
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-forest);
  margin: 12px 0 18px;
}
.legal-page__sub{
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--c-ink-soft);
  max-width: 64ch;
  margin: 0 0 22px;
}
.legal-page__updated{
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--c-ink-muted);
  margin: 0;
}
.legal-page__updated strong{
  color: var(--c-forest);
  font-weight: 500;
}

.legal-page__body section{
  margin-bottom: 44px;
}
.legal-page__body section:last-child{
  margin-bottom: 0;
}
.legal-page__body h2{
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.005em;
  color: var(--c-forest);
  margin: 0 0 16px;
  line-height: 1.25;
}
.legal-page__body p{
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-ink);
  margin: 0 0 14px;
}
.legal-page__body p:last-child{ margin-bottom: 0; }
.legal-page__body ul{
  margin: 0 0 16px;
  padding-left: 20px;
  list-style: none;
}
.legal-page__body ul li{
  position: relative;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-ink);
  margin-bottom: 8px;
  padding-left: 4px;
}
.legal-page__body ul li::before{
  content:"";
  position: absolute;
  left: -16px; top: 11px;
  width: 6px; height: 1px;
  background: var(--c-green-bright);
}
.legal-page__body strong{
  color: var(--c-forest);
  font-weight: 500;
}
.legal-page__body a{
  color: var(--c-green-bright);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.legal-page__body a:hover{
  color: var(--c-green);
}
.legal-page__body code{
  font-family: var(--f-mono);
  font-size: 13px;
  background: var(--c-green-mist);
  color: var(--c-forest);
  padding: 2px 7px;
  border-radius: 4px;
}

/* Cookie table */
.cookie-table-wrap{
  margin-top: 18px;
  overflow-x: auto;
  border: 1px solid var(--c-green-pale);
  border-radius: var(--r-md);
}
.cookie-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.cookie-table thead{
  background: var(--c-green-mist);
}
.cookie-table th{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-forest);
  padding: 14px 16px;
  text-align: left;
  font-weight: 500;
}
.cookie-table td{
  padding: 14px 16px;
  border-top: 1px solid var(--c-green-pale);
  color: var(--c-ink);
  vertical-align: top;
}
.cookie-table tr:first-child td{ border-top: 0; }

/* Back link */
.legal-page__back{
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 56px;
  padding: 12px 22px;
  border: 1px solid var(--c-green-pale);
  border-radius: var(--r-pill);
  background: var(--c-card);
  color: var(--c-forest);
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease, gap .2s ease;
}
.legal-page__back:hover{
  border-color: var(--c-green);
  color: var(--c-green);
  background: var(--c-green-mist);
  gap: 14px;
}

/* ============================================================
   PAGINA PRODUZIONE — header + righe alternate + carosello
   ============================================================ */
.prod-page{
  background: var(--c-bg);
}

/* Hero header */
.prod-page__hero{
  padding: clamp(120px, 14vw, 180px) 0 clamp(60px, 8vw, 100px);
  background: var(--c-green-mist);
  border-bottom: 1px solid var(--c-green-pale);
  text-align: center;
}
.prod-page__title{
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-forest);
  margin: 16px auto 24px;
  max-width: 18ch;
}
.prod-page__title em{
  font-style: italic;
  color: var(--c-green-bright);
}
.prod-page__sub{
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 300;
  line-height: 1.65;
  color: var(--c-ink-soft);
  max-width: 56ch;
  margin: 0 auto;
}

/* Righe alternate (zig-zag) */
.prod-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding: clamp(60px, 8vw, 110px) 0;
  border-bottom: 1px solid var(--c-green-pale);
}
.prod-row:last-of-type{
  border-bottom: 0;
}
.prod-row--reverse .prod-row__text{
  order: 2;
}
.prod-row--reverse .prod-row__media{
  order: 1;
}

/* Testo riga */
.prod-row__text{
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0;
}
.prod-row__num{
  font-family: var(--f-serif);
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
  color: var(--c-green-mist);
  letter-spacing: -0.03em;
  margin-bottom: -10px;
}
.prod-row__cat{
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-green);
  font-weight: 500;
  width: max-content;
}
.prod-row__title{
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--c-forest);
  margin: 0;
}
.prod-row__lead{
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--c-ink);
  margin: 0;
}
.prod-row__specs{
  list-style: none;
  margin: 16px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--c-green-pale);
  display: flex; flex-direction: column; gap: 14px;
}
.prod-row__specs li{
  display: grid;
  grid-template-columns: minmax(120px, 0.4fr) 1fr;
  gap: 18px;
  align-items: baseline;
}
.prod-row__spec-label{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  font-weight: 500;
}
.prod-row__spec-value{
  font-size: 14px;
  font-weight: 400;
  color: var(--c-forest);
  line-height: 1.4;
}
.prod-row__note{
  font-size: 13px;
  font-style: italic;
  font-weight: 300;
  color: var(--c-ink-soft);
  margin: 4px 0 0;
  line-height: 1.6;
}

/* Media riga (button con immagine + zoom indicator) */
.prod-row__media{
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 1px solid var(--c-green-pale);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-card);
  cursor: zoom-in;
  display: block;
  font: inherit;
  color: inherit;
  transition: transform .35s cubic-bezier(.2,.65,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.prod-row__media:hover{
  transform: translateY(-3px);
  border-color: var(--c-green-bright);
  box-shadow: 0 24px 50px -24px rgba(45, 106, 45, .35);
}
.prod-row__media:focus-visible{
  outline: 2px solid var(--c-green-bright);
  outline-offset: 3px;
}
.prod-row__img{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-green-mist);
}
.prod-row__img img,
.prod-row__img svg{
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.65,.2,1);
}
.prod-row__media:hover .prod-row__img img,
.prod-row__media:hover .prod-row__img svg{
  transform: scale(1.05);
}
.prod-row__zoom{
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(15, 26, 10, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.prod-row__zoom svg{ width: 18px; height: 18px; }
.prod-row__media:hover .prod-row__zoom,
.prod-row__media:focus-visible .prod-row__zoom{
  opacity: 1;
  transform: scale(1);
}

/* Responsive righe */
@media (max-width: 900px){
  .prod-row{
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .prod-row--reverse .prod-row__text{ order: 0; }
  .prod-row--reverse .prod-row__media{ order: 0; }
}

/* ============================================================
   CAROSELLO (auto-scroll infinito)
   ============================================================ */
.carousel-section{
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--c-forest);
  color: #fff;
  margin-top: 40px;
  overflow: hidden;
  position: relative;
}
.carousel-section::before{
  content:"";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 90% 10%, rgba(90,173,78,.10), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(90,173,78,.06), transparent 50%);
  pointer-events: none;
}
.carousel-section > .container{ position: relative; z-index: 1; }

.carousel-section__head{
  text-align: center;
  max-width: 640px;
  margin: 0 auto 50px;
}
.carousel-section__head .eyebrow{ color: var(--c-green-bright); }
.carousel-section__head .eyebrow::before{ background: var(--c-green-bright); }
.carousel-section__title{
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 12px 0 16px;
}
.carousel-section__title em{
  font-style: italic;
  color: var(--c-green-bright);
}
.carousel-section__sub{
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--c-cream-soft);
  margin: 0;
}

/* Carousel track */
.carousel{
  position: relative;
  overflow: hidden;
  margin: 0 0 50px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.carousel__track{
  display: flex;
  gap: 18px;
  width: max-content;
  padding: 0 9px;
  /* Il movimento è gestito interamente in JS (requestAnimationFrame).
     Niente animation CSS: così il loop infinito non si rompe mai dopo
     un drag manuale e non c'è drift quando le immagini lazy-load
     cambiano lo scrollWidth. */
  will-change: transform;
}

.carousel__item{
  flex: 0 0 auto;
  width: clamp(220px, 28vw, 340px);
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  cursor: zoom-in;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  display: block;
  transition: transform .3s ease, border-color .3s ease;
}
.carousel__item:hover{
  transform: scale(1.02);
  border-color: rgba(90,173,78,.45);
}
.carousel__item:focus-visible{
  outline: 2px solid var(--c-green-bright);
  outline-offset: 3px;
}
.carousel__item img,
.carousel__item svg{
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}

/* CTA WhatsApp sotto al carosello */
.carousel-section__cta{
  text-align: center;
  display: flex; flex-direction: column; gap: 18px;
  align-items: center;
}
.carousel-section__cta p{
  margin: 0;
  font-size: 15px;
  color: var(--c-cream-soft);
}
.btn-wa{
  display: inline-flex; align-items: center; gap: 10px;
  background: #25D366;
  color: #fff;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background .25s ease, transform .25s ease, gap .25s ease;
  box-shadow: 0 12px 28px -10px rgba(37, 211, 102, .55);
}
.btn-wa svg{ width: 20px; height: 20px; }
.btn-wa:hover{
  background: #1fb957;
  transform: translateY(-2px);
  gap: 14px;
}

/* Back link */
.prod-page__back{
  display: inline-flex; align-items: center; gap: 10px;
  margin: 50px 0 80px;
  padding: 12px 22px;
  border: 1px solid var(--c-green-pale);
  border-radius: var(--r-pill);
  background: var(--c-card);
  color: var(--c-forest);
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease, gap .2s ease;
}
.prod-page__back:hover{
  border-color: var(--c-green);
  color: var(--c-green);
  background: var(--c-green-mist);
  gap: 14px;
}

@media (max-width: 600px){
  .carousel__item{
    width: 240px;
  }
}

.carousel__track{
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.carousel__track.dragging,
.carousel__track *{
  user-select: none;
  -webkit-user-select: none;
}

.carousel__item img{
  pointer-events: none;
}