/* ===================================================================
   EDILMASSETTI — design da Figma, ricreato in CSS puro
   Palette: verde #9B9C73 · crema #F2F0E2 · antracite #333333 · arancio #E07A5F
   =================================================================== */

/* Font Inter — self-hosted (variable, copre 300–900) */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-var.woff2') format('woff2');
}

:root {
  --verde: #9b9c73;
  --crema: #f2f0e2;
  --antracite: #333333;
  /* accento: verde più scuro della palette (sostituisce l'arancione) */
  --arancio: #5e6b43;
  /* varianti WCAG AA del verde brand:
     - deep  → superfici con testo crema sopra (contrasto ≥ 4.5)
     - text  → testo verde su fondi scuri (#333/#2a2a2a/#1e1e1e) */
  --verde-deep: #6b6c4f;
  --verde-text: #a3a479;
  --font: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--crema);
  color: var(--antracite);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Salta al contenuto: primo elemento raggiungibile col tab, invisibile
   finché non riceve il fuoco. Evita di far attraversare tutta la navbar
   a chi naviga da tastiera o con screen reader. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2147483001;
  padding: 14px 22px;
  background: var(--antracite);
  color: var(--crema);
  font-weight: 600;
  font-size: 14px;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  outline: 3px solid var(--verde-text);
  outline-offset: 2px;
}

/* Sentinella per lo stato "scrolled" della navbar (vedi js/main.js):
   osservata con IntersectionObserver, senza listener di scroll. */
#navTop {
  position: absolute;
  top: 40px; left: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}

.overline {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.26em;
  color: var(--verde-deep);
  text-transform: uppercase;
}
/* su fondi scuri il verde va schiarito per il contrasto AA */
.section--dark .overline, .page-hero .overline { color: var(--verde-text); }

/* ─── Logo ─────────────────────────────────────────────────── */
.logo { display: inline-flex; align-items: center; gap: 14px; }
.logo__mark { flex-shrink: 0; width: auto; height: 48px; }
.logo__word { display: flex; flex-direction: column; gap: 3px; }
.logo__name {
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 0.06em;
  line-height: 1;
}
.logo__payoff {
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  line-height: 1;
}
.logo--light { color: var(--crema); }
.logo--dark { color: var(--antracite); }

/* ─── Navbar ───────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--verde-deep); /* verde brand scurito: testo crema leggibile (AA) */
  transition: box-shadow 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.nav.is-scrolled {
  box-shadow: 0 6px 24px rgba(51, 49, 40, 0.18);
}
.nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* è un <a href="/">: funziona anche senza JS; sulla home main.js
   intercetta il click e fa scorrere in cima invece di ricaricare */
.nav__brand { display: inline-flex; align-items: center; background: none; border: none; cursor: pointer; padding: 0; }
.nav__menu { display: flex; align-items: center; gap: 36px; }
.nav__link {
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crema);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
}
.nav__link:hover { color: #fff; }

.btn-orange {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 22px;
  background: var(--arancio);
  color: var(--crema);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.15s;
}
.btn-orange:hover { opacity: 0.85; }

.nav__burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--crema);
  padding: 4px;
}
.nav__mobile {
  display: none;
  background: var(--antracite);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 32px 24px;
  flex-direction: column;
  gap: 4px;
}
.nav__mobile.is-open { display: flex; }
.nav__mobile-link {
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--crema);
  opacity: 0.85;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 0;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav__mobile .btn-orange { margin-top: 8px; justify-content: center; padding: 14px 0; }

.icon { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ─── Hero ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.hero__content {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 160px 32px 100px;
  width: 100%;
}
.hero__overline { margin-bottom: 24px; }
.hero__title {
  font-weight: 800;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--crema);
  margin-bottom: 32px;
  max-width: 760px;
}
.hero__title .t-verde { color: #8a8b66; } /* verde brand, AA per testo grande su fondo chiaro */
.hero__sub {
  font-weight: 500;
  font-size: 21px;
  line-height: 1.55;
  color: var(--crema);
  opacity: 0.92;
  max-width: 540px;
  margin-bottom: 48px;
}
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-orange--lg { padding: 16px 32px; font-size: 13px; }
.btn-ghost {
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 32px;
  background: transparent;
  color: var(--crema);
  border: 1px solid rgba(242, 240, 226, 0.35);
  cursor: pointer;
  transition: border-color 0.15s;
}
.btn-ghost:hover { border-color: rgba(242, 240, 226, 0.7); }
.hero__cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--crema);
  opacity: 0.5;
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ─── Stats ────────────────────────────────────────────────── */
.stats { background: var(--antracite); }
.stats__grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 4 box: anni · cantieri · Italia · risposta 24h */
  gap: 1px;
}
.stat { padding: 36px 24px; display: block; }
.stat + .stat { border-left: 1px solid rgba(255, 255, 255, 0.07); }
a.stat { text-decoration: none; transition: background 0.2s ease; position: relative; }
a.stat:hover { background: rgba(255, 255, 255, 0.045); }
a.stat::after {
  content: '→';
  position: absolute;
  top: 36px; right: 24px;
  color: var(--verde);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
a.stat:hover::after { opacity: 1; transform: translateX(3px); }
.stat__value {
  font-weight: 800;
  font-size: 34px;
  color: var(--verde);
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat__label {
  font-weight: 300;
  font-size: 12px;
  color: var(--crema);
  opacity: 0.75;
  letter-spacing: 0.08em;
  margin-top: 6px;
  text-transform: lowercase;
}

/* ─── Sezioni generiche ────────────────────────────────────── */
.section { padding: 100px 0; }

/* La pagina è alta ~9400px: impaginare tutto al primo caricamento costa.
   Le sezioni sotto la piega vengono impaginate solo quando servono.
   contain-intrinsic-size dà un'altezza stimata (poi il browser ricorda
   quella reale) così la barra di scorrimento non salta. La hero è
   esclusa: deve essere dipinta subito. */
.section, .ctaband, .lavoro, .footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}
.section--cream { background: var(--crema); }
.section--dark { background: var(--antracite); }
.section__head { margin-bottom: 56px; }

/* Filigrana con il logo (come nella hero) su tutte le sezioni a fondo
   chiaro: molto tenue, sotto ai contenuti, testo sempre leggibile. */
.section--cream, .lavoro { position: relative; }
.section--cream::before, .lavoro::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/hero-pattern.svg?v=2');
  background-repeat: repeat;
  background-size: 140px 140px;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
}
.section--cream > .container, .lavoro > .container { position: relative; z-index: 1; }
.section__head .overline { display: block; margin-bottom: 12px; }
.h2 {
  font-weight: 800;
  font-size: clamp(32px, 5vw, 52px);
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0;
}
.h2--dark { color: var(--antracite); }
.h2--light { color: var(--crema); }

/* ─── Lavorazioni (tabs) ───────────────────────────────────── */
.lav__layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 2px;
  align-items: stretch;
}
.lav__tabs { display: flex; flex-direction: column; gap: 2px; }
.lav__tab {
  font-family: var(--font);
  background: #e8e6d6;
  border: none;
  padding: 28px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.2s ease;
}
.lav__tab:hover { background: #dddbc8; }
.lav__tab-num {
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #666;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.lav__tab-title {
  font-weight: 700;
  font-size: 23px;
  color: var(--antracite);
  letter-spacing: -0.01em;
}
.lav__tab-arrow { color: var(--verde); opacity: 0; }
.lav__tab.is-active { background: var(--antracite); }
.lav__tab.is-active:hover { background: var(--antracite); }
.lav__tab.is-active .lav__tab-num { color: var(--verde-text); }
.lav__tab.is-active .lav__tab-title { color: var(--crema); }
.lav__tab.is-active .lav__tab-arrow { opacity: 1; }

.lav__panel {
  background: var(--verde-deep);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lav__panel-img {
  flex: 1;
  min-height: 220px;
  background-size: cover;
  background-position: center;
  filter: brightness(0.55) saturate(0.6);
}
.lav__panel-body { padding: 36px 36px 40px; }
.lav__panel-title {
  font-weight: 800;
  font-size: 34px;
  color: var(--crema);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.lav__panel-desc {
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  color: var(--crema);
  margin-bottom: 24px;
}
.lav__panel-detail {
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--crema);
  text-transform: uppercase;
}

/* ─── Chi siamo ────────────────────────────────────────────── */
.chi__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; align-items: stretch; }
.chi__photo {
  min-height: 520px;
  background-size: cover;
  background-position: center;
  filter: brightness(0.6) saturate(0.5);
}
.chi__text {
  background: #2a2a2a;
  padding: 56px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.chi__text .overline { margin-bottom: 20px; }
.chi__h2 {
  font-weight: 800;
  font-size: clamp(32px, 5vw, 52px);
  letter-spacing: -0.025em;
  color: var(--crema);
  margin-bottom: 28px;
  line-height: 1.05;
}
.chi__p {
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: var(--crema);
  opacity: 0.75;
  margin-bottom: 20px;
}
.chi__p:last-of-type { margin-bottom: 40px; }
.team { display: flex; flex-direction: column; gap: 16px; }
.team__row { display: flex; align-items: center; gap: 16px; }
.team__badge {
  width: 40px; height: 40px;
  background: var(--verde-deep);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-weight: 700; font-size: 14px; color: var(--crema);
}
.team__name { font-weight: 600; font-size: 14px; color: var(--crema); }
.team__role { font-weight: 300; font-size: 11px; color: var(--verde-text); letter-spacing: 0.06em; }

/* ─── Perché ───────────────────────────────────────────────── */
.perche__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.perche__card { padding: 36px 28px; display: flex; flex-direction: column; gap: 20px; }
.perche__card--cream { background: #e8e6d6; }
.perche__card--green { background: var(--verde-deep); }
.perche__n { font-weight: 700; font-size: 11px; letter-spacing: 0.2em; }
.perche__card--cream .perche__n { color: var(--arancio); }
.perche__card--green .perche__n { color: var(--crema); opacity: 0.95; }
.perche__title { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; line-height: 1.2; }
.perche__card--cream .perche__title { color: var(--antracite); }
.perche__card--green .perche__title { color: var(--crema); }
.perche__text { font-weight: 300; font-size: 14px; line-height: 1.6; }
.perche__card--cream .perche__text { color: var(--antracite); opacity: 0.7; }
.perche__card--green .perche__text { color: var(--crema); opacity: 0.95; }

/* ─── Contatti ─────────────────────────────────────────────── */
.contatti__layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.contatti__h2 {
  font-weight: 800;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -0.025em;
  color: var(--crema);
  margin: 0 0 40px;
  line-height: 1;
}
.contatti__intro {
  font-weight: 300; font-size: 15px; line-height: 1.7;
  color: var(--crema); opacity: 0.65; margin: 0 0 48px;
}
.contatti__list { display: flex; flex-direction: column; gap: 32px; }
.contatti__card { border-left: 3px solid var(--verde); padding-left: 20px; }
.contatti__name { font-weight: 700; font-size: 15px; color: var(--crema); margin-bottom: 3px; }
.contatti__role { font-weight: 300; font-size: 11px; color: var(--verde-text); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
/* padding-block ≥5px: area tattile ≥27px (WCAG target size) */
.contatti__link { display: flex; align-items: center; gap: 8px; color: var(--crema); opacity: 0.85; font-size: 14px; padding: 5px 0; margin-bottom: 2px; }
.contatti__link svg { color: var(--verde-text); }
.contatti__addr { border-left: 3px solid rgba(155, 156, 115, 0.35); padding-left: 20px; }
.contatti__addr-row { display: flex; align-items: flex-start; gap: 8px; color: var(--crema); opacity: 0.75; font-size: 14px; line-height: 1.5; }
.contatti__addr-row svg { color: var(--verde-text); margin-top: 2px; flex-shrink: 0; }

/* Form */
.form { display: flex; flex-direction: column; gap: 20px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__label {
  font-weight: 400; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--verde-text); margin-bottom: 8px; display: block;
}
.form__field {
  font-family: var(--font);
  font-weight: 400; font-size: 14px; color: var(--crema);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 14px 18px; width: 100%;
  outline: none; letter-spacing: 0.01em;
  transition: border-color 0.15s;
}
.form__field::placeholder { color: rgba(242, 240, 226, 0.4); }
.form__field:focus { border-color: var(--verde); }
.form .btn-orange { padding: 18px 32px; font-size: 13px; letter-spacing: 0.12em; justify-content: center; }
.form__success { background: var(--verde-deep); padding: 60px 40px; text-align: center; }
.form__success-title { font-weight: 700; font-size: 22px; color: var(--crema); margin: 24px 0 12px; }
.form__success-text { font-weight: 300; font-size: 14px; color: var(--crema); opacity: 0.95; line-height: 1.6; }

/* ─── Pagina interna + galleria ────────────────────────────── */
.page-hero { background: var(--antracite); padding: 140px 0 64px; }
.page-hero .overline { display: block; margin-bottom: 14px; }
.page-hero h1 { color: var(--crema); font-size: clamp(36px, 6vw, 64px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: 0; }
.page-hero p { color: var(--crema); opacity: 0.7; max-width: 580px; margin-top: 22px; font-weight: 300; font-size: 17px; line-height: 1.6; }
/* Galleria sfogliabile (carosello): scorrimento orizzontale + swipe */
.gallery {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery__item, .gallery__placeholder { scroll-snap-align: start; flex: 0 0 calc((100% - 32px) / 3); }
.gallery__item { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; background: rgba(51, 51, 51, 0.06); margin: 0; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery__item:hover img { transform: scale(1.05); }
@media (max-width: 768px) { .gallery__item, .gallery__placeholder { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 480px) { .gallery__item, .gallery__placeholder { flex-basis: 100%; } }

/* Controlli del carosello (frecce + puntini), aggiunti da js/gallery.js */
.carousel { position: relative; }
.carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: none; background: rgba(30, 30, 30, 0.88); color: #fff;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  transition: background 0.2s ease, opacity 0.2s ease;
}
.carousel--active .carousel__nav { display: inline-flex; }
.carousel__nav:hover { background: var(--verde); }
.carousel__nav:disabled { opacity: 0.25; cursor: default; }
.carousel__nav svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.carousel__nav--prev { left: 12px; }
.carousel__nav--next { right: 12px; }
.carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.carousel__dots:empty { display: none; }
/* area tattile 24px (WCAG target size); il pallino visibile resta 10px */
.carousel__dot {
  width: 24px; height: 24px; border-radius: 50%; padding: 7px; border: none;
  background: rgba(51, 51, 51, 0.22); background-clip: content-box; cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.carousel__dot.is-active { background-color: var(--verde-deep); transform: scale(1.2); }
@media (max-width: 640px) { .carousel__nav { display: none !important; } }

/* Blocchi lavorazione (pagina Cantieri/Lavori) */
.lavoro { padding: 72px 0; }
.lavoro + .lavoro { border-top: 1px solid rgba(51, 51, 51, 0.12); }
.lavoro__head { max-width: 720px; margin-bottom: 36px; }
.lavoro__num { font-weight: 800; font-size: 16px; letter-spacing: 0.2em; color: var(--verde-deep); }
.lavoro__title { font-weight: 800; font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.025em; color: var(--antracite); margin: 10px 0 16px; line-height: 1.05; }
.lavoro__desc { font-weight: 300; font-size: 17px; line-height: 1.65; color: var(--antracite); opacity: 0.72; }
.gallery__placeholder {
  aspect-ratio: 3 / 4;
  border: 2px dashed rgba(51, 51, 51, 0.2);
  border-radius: 4px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 16px;
  color: var(--antracite);
  opacity: 0.45;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* segnaposto riempito dal pannello (hydrate.js imposta lo sfondo) */
.gallery__placeholder.has-img {
  border: none;
  opacity: 1;
  background-size: cover;
  background-position: center;
}

/* ─── Footer ───────────────────────────────────────────────── */
.footer { background: #1e1e1e; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.footer__inner { max-width: 1200px; margin: 0 auto; padding: 52px 32px 40px; }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 40px; margin-bottom: 48px; }
.footer__desc { font-weight: 300; font-size: 13px; color: var(--crema); opacity: 0.7; max-width: 280px; line-height: 1.6; margin-top: 20px; }
.footer__cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer__col-title { font-weight: 600; font-size: 11px; letter-spacing: 0.18em; color: var(--verde-text); text-transform: uppercase; margin-bottom: 16px; }
.footer__col a, .footer__col span, .footer__col button { display: block; font-weight: 300; font-size: 13px; color: var(--crema); opacity: 0.65; margin-bottom: 8px; background: none; border: none; cursor: pointer; padding: 4px 0; text-align: left; font-family: var(--font); }
.footer__col a:hover, .footer__col button:hover { opacity: 0.9; }
.footer__legal { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
/* colore esplicito (niente opacity: i selettori annidati la moltiplicavano) */
.footer__legal span { font-weight: 300; font-size: 11px; color: rgba(242, 240, 226, 0.78); letter-spacing: 0.04em; }

/* ─── CRO: hero, CTA band, processo, FAQ, form microcopy ───── */
.btn-ghost { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.btn-ghost--cream { color: var(--crema); border-color: rgba(242, 240, 226, 0.45); }
.btn-ghost--cream:hover { border-color: rgba(242, 240, 226, 0.85); }

.hero__note {
  margin-top: 16px;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--antracite);
  opacity: 0.78;
}

.chi__p--lead {
  font-weight: 600;
  font-size: 17px;
  opacity: 1;
  color: var(--crema);
  border-left: 3px solid var(--verde);
  padding-left: 16px;
}

.perche__intro {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--antracite);
  opacity: 0.75;
  max-width: 720px;
  margin: 20px 0 0;
}

/* CTA intermedia */
.ctaband { background: var(--verde-deep); }
.ctaband__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 44px;
  padding-bottom: 44px;
}
.ctaband__title {
  font-weight: 800;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.02em;
  color: var(--crema);
  margin-bottom: 6px;
}
.ctaband__sub {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--crema);
}
.ctaband__btns { display: flex; gap: 12px; flex-wrap: wrap; }
.ctaband .btn-orange { background: var(--antracite); }

/* Processo di lavoro */
.processo__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}
.processo__step {
  background: #2a2a2a;
  padding: 36px 28px;
  position: relative;
}
.processo__n {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--verde-text);
  margin-bottom: 16px;
}
.processo__title {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--crema);
  margin-bottom: 12px;
  line-height: 1.2;
}
.processo__text {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: var(--crema);
  opacity: 0.7;
}

/* FAQ */
.faq { max-width: 780px; display: flex; flex-direction: column; gap: 2px; }
.faq__item { background: #e8e6d6; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q {
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--antracite);
  padding: 22px 56px 22px 28px;
  position: relative;
  user-select: none;
}
.faq__q::after {
  content: '+';
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 300;
  font-size: 24px;
  color: var(--verde);
  transition: transform 0.2s ease;
}
.faq__item[open] .faq__q::after { transform: translateY(-50%) rotate(45deg); }
.faq__item[open] { background: #dddbc8; }
.faq__a {
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--antracite);
  opacity: 0.8;
  padding: 0 28px 24px;
  margin: 0;
  max-width: 640px;
}

/* Microcopy form */
.form__note {
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verde-text);
  text-align: center;
  margin: -4px 0 0;
}
.form__error {
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  color: #e8927c;
  text-align: center;
  margin: 2px 0 -2px;
}
.form__privacy {
  font-weight: 300;
  font-size: 12px;
  color: var(--crema);
  opacity: 0.75;
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

/* Cantieri: le categorie senza foto reali restano nascoste */
.lavoro--pending { display: none; }
.lavoro--pending.has-photos { display: block; }
.lavoro--pending.has-photos .gallery__placeholder:not(.has-img) { display: none; }

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav__menu { display: none; }
  .nav__burger { display: flex; }
  .container, .nav__inner, .stats__grid, .hero__content, .footer__inner { padding-left: 22px; padding-right: 22px; }
  .hero__content { padding-top: 130px; padding-bottom: 80px; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 0; }
  /* min-width:0 → le celle rispettano il track 1fr invece di allargarsi al
     contenuto (causava overflow orizzontale a 320px); padding ridotto per
     lasciare respiro al valore su schermi molto stretti. */
  .stat { min-width: 0; padding: 30px 16px; border-left: none !important; border-top: 1px solid rgba(255,255,255,0.07); }
  .stat:nth-child(odd) { border-left: none; }
  .stat:nth-child(even) { border-left: 1px solid rgba(255,255,255,0.07) !important; }
  .lav__layout { grid-template-columns: 1fr; }
  .chi__layout { grid-template-columns: 1fr; }
  .chi__photo { min-height: 300px; }
  .chi__text { padding: 40px 28px; }
  .perche__grid { grid-template-columns: 1fr 1fr; }
  .contatti__layout { grid-template-columns: 1fr; gap: 48px; }
  .section { padding: 72px 0; }
  .processo__grid { grid-template-columns: 1fr 1fr; }
  .ctaband__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .processo__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .perche__grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
}

/* ─── Recensioni Google ─────────────────────────────────────────── */
.reviews__top { text-align: center; margin-bottom: 42px; }
.reviews__top .overline { display: block; margin-bottom: 16px; }
.reviews__leave { display: inline-flex; align-items: center; gap: 10px; }
.reviews__g { flex-shrink: 0; }

.reviews__headline { text-align: center; margin-bottom: 34px; }
.reviews__headline .h2 { margin-bottom: 16px; }
.reviews__badge[hidden] { display: none; }
.reviews__badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(51, 51, 51, 0.12);
  box-shadow: 0 6px 20px rgba(51, 49, 40, 0.08);
  font-size: 14px; color: var(--antracite);
}
.reviews__badge-stars { color: #fbbc04; letter-spacing: 1px; font-size: 15px; }
.reviews__badge-score { font-weight: 300; }
.reviews__badge-score strong { font-weight: 700; }

.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review {
  background: #fff; border: 1px solid rgba(51, 51, 51, 0.1);
  border-radius: 16px; padding: 22px 22px 24px;
  box-shadow: 0 10px 30px rgba(51, 49, 40, 0.06);
  display: flex; flex-direction: column; gap: 12px;
}
.review__head { display: flex; align-items: center; gap: 12px; }
.review__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; display: grid; place-items: center;
  font-weight: 700; font-size: 18px;
}
.review__avatar--initial { background: var(--verde); color: var(--crema); }
.review__id { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; min-width: 0; }
.review__name {
  font-weight: 700; font-size: 14.5px; color: var(--antracite);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.review__date { font-size: 12px; color: #6e6e66; }
.review__stars { color: #fbbc04; letter-spacing: 2px; font-size: 16px; }
.review__text { margin: 0; font-weight: 300; font-size: 14.5px; line-height: 1.6; color: var(--antracite); opacity: 0.9; }

.reviews__empty { text-align: center; padding: 22px 0 6px; }
.reviews__empty-stars { color: #fbbc04; font-size: 26px; letter-spacing: 4px; margin-bottom: 14px; }
.reviews__empty-text { font-weight: 300; font-size: 16px; line-height: 1.6; color: var(--antracite); opacity: 0.75; margin: 0 0 22px; }

@media (max-width: 900px) { .reviews__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .reviews__grid { grid-template-columns: 1fr; }
  .reviews__leave { width: 100%; justify-content: center; }
}

/* ─── Credito Elivo Studio nel footer (logo) ─── */
.footer__legal span[data-cms-key="footer_copyright"] { font-size: 14px; display: inline-flex; align-items: center; gap: 5px; line-height: 1; }
.elivo-credit { display: inline-flex; align-items: center; }
/* dimensioni esplicite = ratio naturale 252×56 (niente distorsione) */
.elivo-logo { height: 28px; width: 126px; flex-shrink: 0; display: block; opacity: 0.75; transform: translateY(-2px); transition: opacity 0.2s ease; }
.elivo-credit:hover .elivo-logo { opacity: 1; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ─── Scalatura per schermi grandi (2K / 4K / ultrawide) ──────────
   Il layout è disegnato in px per un viewport ~1440. Su monitor molto
   grandi ingrandiamo TUTTO in proporzione (testi, spazi, immagini,
   scena 3D e container) con zoom sul root: così il sito riempie lo
   schermo invece di restare una colonna stretta al centro. Le media
   query valutano la larghezza reale del viewport, non quella zoomata,
   quindi non innescano loop. Sotto i 1900px nulla cambia. */
@media (min-width: 2200px) { :root { zoom: 1.35; } }
@media (min-width: 2880px) { :root { zoom: 1.6; } }
@media (min-width: 3400px) { :root { zoom: 1.9; } }

/* ─── Banner consenso cookie (GDPR) ────────────────────────────── */
/* Il banner sta nell'HTML statico ed è visibile dal PRIMO paint: se lo
   costruisse il JS diventerebbe l'elemento LCP dipinto tardi (misurato:
   +1,1s di render delay). A chi ha già scelto lo nasconde, prima del
   paint, lo script inline nell'<head> (html.consent-done). */
.cookie-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 2147483000;
  max-width: 660px;
  margin: 0 auto;
  background: #1e1e1e;
  color: var(--crema);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
html.consent-done .cookie-banner { display: none; }
.cookie-banner.is-hidden { opacity: 0; transform: translateY(14px); pointer-events: none; }
.cookie-banner__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  flex-wrap: wrap;
}
.cookie-banner__text {
  flex: 1 1 300px;
  margin: 0;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.9;
}
.cookie-banner__text a { color: var(--verde); text-decoration: underline; }
.cookie-banner__text strong { font-weight: 600; opacity: 1; }
.cookie-banner__actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookie-btn {
  font-family: var(--font);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.cookie-btn--accept { background: var(--verde); color: #1e1e1e; border-color: var(--verde); }
.cookie-btn--accept:hover { background: #a9aa82; }
.cookie-btn--ghost { background: transparent; color: var(--crema); border-color: rgba(255, 255, 255, 0.3); }
.cookie-btn--ghost:hover { border-color: rgba(255, 255, 255, 0.65); }
@media (max-width: 560px) {
  .cookie-banner { left: 10px; right: 10px; bottom: 10px; }
  .cookie-banner__inner { padding: 16px; gap: 14px; }
  .cookie-banner__actions { width: 100%; }
  .cookie-btn { flex: 1; }
}

/* ─── Pagina legale (Privacy & Cookie) ─────────────────────────── */
.legal { max-width: 820px; }
.legal h2 { font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); color: var(--antracite); margin: 42px 0 14px; letter-spacing: -0.01em; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-weight: 700; font-size: 16px; color: var(--antracite); margin: 24px 0 8px; }
.legal p, .legal li { font-weight: 300; font-size: 15.5px; line-height: 1.7; color: var(--antracite); opacity: 0.85; }
.legal p { margin-bottom: 14px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--arancio); text-decoration: underline; }
.legal strong { font-weight: 600; opacity: 1; }
.legal__table-wrap { overflow-x: auto; }
.legal table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 14px; min-width: 460px; }
.legal th, .legal td { text-align: left; padding: 9px 12px; border-bottom: 1px solid rgba(51, 51, 51, 0.14); vertical-align: top; }
.legal th { font-weight: 700; color: var(--antracite); }
.legal td { font-weight: 300; opacity: 0.85; }
.legal__updated { font-size: 13px; opacity: 0.6; margin-top: 36px; }