/* ============================================================
   MBC SRL - Global stylesheet
   Design system + components (photography-led, cream/green/terracotta)
   ============================================================ */

/* ---------- Fonts (self-hosted, GDPR-safe) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-var-italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  --green:        #2D4A3A;
  --green-deep:   #1E3328;
  --green-800:    #16261D;
  --terracotta:   #BC6B3E;
  --terracotta-d: #A85A30;
  --terracotta-text: #8F4A26; /* AA-compliant terracotta for text on light bg */
  /* Verde del bottone WhatsApp. NON e' il #25D366 del marchio: il bianco sopra
     quello misura 1,98:1 e non passa AA, ne' per l'etichetta ne' per il glifo.
     Su questo il bianco sta a 5,36:1, e resta un verde WhatsApp riconoscibile. */
  --wa-green:     #0E7A50;
  --wa-green-d:   #0B6340;
  --cream:        #F6F1E7;
  --cream-2:      #EFE7D8;
  --cream-3:      #E7DCC8;
  --ink:          #222C25;
  --muted:        #5F665D;
  --line:         #DBD2C0;
  --white:        #ffffff;

  --serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --sans:  "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --container: 1240px;
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --radius-s: 8px;
  --radius:   16px;
  --radius-l: 26px;
  --shadow:   0 18px 50px -24px rgba(30, 51, 40, .35);
  --shadow-sm:0 8px 24px -14px rgba(30, 51, 40, .4);

  --section-y: clamp(4rem, 9vw, 8rem);
  --header-h: 76px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem);
  scrollbar-gutter: stable; } /* reserve the gutter so locking scroll (lightbox/menu) doesn't shift the page */
#main { scroll-margin-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-size: clamp(1rem, .3vw + .96rem, 1.11rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
picture { display: contents; } /* let <img> size against its container, not the wrapper */
img { height: auto; }
a { color: var(--terracotta-text); text-decoration: none; }
a:hover { color: var(--terracotta-text); text-decoration: underline; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; color: inherit; }
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; border-radius: 4px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 560; line-height: 1.08; color: var(--green); letter-spacing: -.01em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.95rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.2; }
p { max-width: 68ch; }
.lead { font-size: clamp(1.12rem, 1.4vw, 1.32rem); color: #3c463d; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
/* skip layout/paint of below-fold sections until needed (big win on mobile CPUs).
   NOTE: deliberately NOT applied to .site-footer - skipped rendering prevents
   contrast tooling from resolving its dark background (false-positive failures),
   and the footer is small enough that the saving is negligible. */
.section, .cta-band { content-visibility: auto; contain-intrinsic-size: auto 800px; }
.section--tint { background: var(--cream-2); }
.section--green { background: var(--green); color: #e9efe9; }
.section--green h2, .section--green h3 { color: var(--white); }
.center { text-align: center; }
.stack > * + * { margin-top: 1.1rem; }

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--terracotta-text); margin-bottom: 1rem;
}
.section--green .eyebrow { color: #dfa781; }
.section-head { max-width: 760px; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.section-head.center { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--sans); font-weight: 600; font-size: .98rem;
  letter-spacing: .01em; padding: .92em 1.6em; border-radius: 999px;
  border: 1.5px solid transparent; transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn--primary { background: var(--terracotta-d); color: #fff; }
.btn--primary:hover { background: var(--terracotta-text); color: #fff; transform: translateY(-2px); }
.btn--dark { background: var(--green); color: #fff; }
.btn--dark:hover { background: var(--green-deep); color: #fff; transform: translateY(-2px); }
.btn--ghost { border-color: currentColor; color: var(--green); }
.btn--ghost:hover { background: var(--green); color: #fff; transform: translateY(-2px); }
.btn--light { border-color: rgba(255,255,255,.85); color: #fff; background: rgba(15,26,20,.38); backdrop-filter: blur(8px); }
.btn--light:hover { background: #fff; color: var(--green); transform: translateY(-2px); }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; }

.link-arrow { font-weight: 600; display: inline-flex; align-items: center; gap: .45em; }
.link-arrow svg { width: 1.15em; height: 1.15em; flex: none; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* Links inside running text must not rely on colour alone (WCAG 1.4.1) */
.prose a, .checkbox a, .form-note a, .form-success a { text-decoration: underline; text-underline-offset: 2px; }

/* Component links keep no underline on hover (prose links keep the a11y underline from `a:hover`) */
.btn:hover, .nav-menu a:hover, .logo:hover, .lang a:hover, .socials a:hover,
.preview-grid a:hover, .skip-link:hover, .link-arrow:hover { text-decoration: none; }

/* ---------- Header / nav ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h); display: flex; align-items: center;
  transition: box-shadow .35s;
}
/* The frosted background lives on a pseudo-element, NOT on .site-header itself.
   A non-none backdrop-filter makes an element the containing block for its
   position:fixed descendants, and .nav-menu (the mobile overlay) is one: with the
   blur on the header, the overlay's `inset:0` resolved against the 66px header box
   and the fullscreen menu collapsed into a strip. A pseudo-element has no
   descendants, so the identical blur is inert here.
   Load-bearing: .site-header must keep a non-auto z-index. That stacking context
   is what stops z-index:-1 sinking behind the page content. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: transparent;
  /* backdrop-filter is deliberately NOT transitioned: interpolating the blur radius
     runs a full-width backdrop pass for 350ms at the exact moment the hero is flicked.
     It is applied only in .is-solid, where it flips instantly. */
  transition: background .35s var(--ease);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.site-header.is-solid::before {
  background: rgba(246,241,231,.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.site-header.is-solid { box-shadow: 0 1px 0 var(--line); }

.logo { display: inline-flex; align-items: center; gap: .6rem; }
/* Il marchio e' il logo vero del cliente, un raster: non si ricolora col CSS
   come faceva l'SVG disegnato a mano che stava qui prima. Quindi due rendition,
   verde su fondo chiaro e crema su fondo scuro, e si mostra quella giusta.
   L'anello resta terracotta in entrambe: sui fondi scuri cambia solo la M,
   esattamente come faceva la regola .lm-fill. 448x439 nel sorgente, da cui 39. */
/* Dipinto dal CSS e non da due <img>: display:none non impedisce il download,
   quindi con due immagini ogni pagina se le scaricava entrambe (39,6 KB) anche
   mostrandone una. Cosi' il browser prende solo la variante che questa regola
   chiede, e solo alla densita' del suo schermo: 2,0 KB. Le tre misure
   corrispondono al riquadro di 40px a 1x, 2x e 3x, non a numeri a caso.
   La prima riga e' la scorta per chi non conosce image-set. */
.logo-mark {
  width: 40px; height: 39px; flex: none; display: block;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  background-image: url("/assets/img/brand/logo-mark-80.png");
  background-image: -webkit-image-set(url("/assets/img/brand/logo-mark-40.png") 1x, url("/assets/img/brand/logo-mark-80.png") 2x, url("/assets/img/brand/logo-mark-120.png") 3x);
  background-image: image-set(url("/assets/img/brand/logo-mark-40.png") 1x, url("/assets/img/brand/logo-mark-80.png") 2x, url("/assets/img/brand/logo-mark-120.png") 3x);
}
/* Il lettering e' ritagliato dall'artwork, non composto con un font.
   Prima era Fraunces, un serif, mentre il logo vero e' un sans geometrico:
   sembrava un altro marchio. Il font non e' identificabile da un raster e uno
   "simile" resterebbe diverso, quindi qui le lettere sono le sue.

   Le due righe sono larghe uguali nell'originale (666 e 664 px): il descrittore
   e' spaziato apposta per pareggiare "MBC SRL", quindi si impilano allineate.
   Il descrittore pero' e' alto 24px su 664 di larghezza, cioe' un rapporto di
   28:1: per leggerlo servono almeno 220px di larghezza (8px di altezza). Sotto
   quella misura e' una sbavatura grigia, e infatti sul telefono si nasconde. */
/* Lo spazio fra le due righe e' il 6,16% della larghezza del lettering
   (nell'artwork: 41px di banda vuota su 666 di larghezza). Non e' una
   percentuale CSS perche' in un flex column il gap percentuale si risolve
   contro l'altezza del contenitore, che qui dipende dal contenuto: sarebbe
   circolare. Quindi valore esplicito per contesto: 7px con lettering da 110px
   nell'header, 16px con lettering da 260px nel footer. */
.logo-word { display: flex; flex-direction: column; gap: 7px; }
.logo-word__name, .logo-word__desc {
  display: block; background-repeat: no-repeat; background-position: left center; background-size: contain;
}
.logo-word__name {
  width: 110px; height: 22px;
  background-image: url("/assets/img/brand/logo-word-220.png");
  background-image: -webkit-image-set(url("/assets/img/brand/logo-word-110.png") 1x, url("/assets/img/brand/logo-word-220.png") 2x, url("/assets/img/brand/logo-word-330.png") 3x);
  background-image: image-set(url("/assets/img/brand/logo-word-110.png") 1x, url("/assets/img/brand/logo-word-220.png") 2x, url("/assets/img/brand/logo-word-330.png") 3x);
}
/* Il descrittore alla proporzione dell'artwork: 664:24 alla larghezza del
   lettering (110px) fa 4px di altezza. A questa misura e' una riga grigia, non
   una scritta leggibile - il descrittore e' il 5,5% dell'altezza del marchio, e
   per portarlo a 7px leggibili servirebbe un marchio da 128px e un header alto
   ~164px invece di 76. Scelta esplicita: mostrarlo comunque, alle proporzioni
   giuste, senza gonfiare il lockup. */
.logo-word__desc {
  display: block;
  width: 110px; height: 4px;
  background-image: url("/assets/img/brand/logo-desc-220.png");
  background-image: -webkit-image-set(url("/assets/img/brand/logo-desc-110.png") 1x, url("/assets/img/brand/logo-desc-220.png") 2x, url("/assets/img/brand/logo-desc-330.png") 3x);
  background-image: image-set(url("/assets/img/brand/logo-desc-110.png") 1x, url("/assets/img/brand/logo-desc-220.png") 2x, url("/assets/img/brand/logo-desc-330.png") 3x);
}
/* logo over dark hero (before solid) */
.site-header:not(.is-solid) .logo-mark {
  background-image: url("/assets/img/brand/logo-mark-light-80.png");
  background-image: -webkit-image-set(url("/assets/img/brand/logo-mark-light-40.png") 1x, url("/assets/img/brand/logo-mark-light-80.png") 2x, url("/assets/img/brand/logo-mark-light-120.png") 3x);
  background-image: image-set(url("/assets/img/brand/logo-mark-light-40.png") 1x, url("/assets/img/brand/logo-mark-light-80.png") 2x, url("/assets/img/brand/logo-mark-light-120.png") 3x);
}
/* Sopra la foto usa di proposito la serie grande del footer, non quella da 110px
   calibrata sul riquadro. Due ragioni. Il pinch-zoom non fa riscegliere l'immagine
   al browser: qualunque file ha preso al caricamento, quello ingrandisce, e la
   serie da 330px mostrava un "SRL" sgranato appena si zoomava, perche' li' i suoi
   tratti sottili stanno in un pixel. E il footer scarica gia' questi file: usarli
   anche qui vuol dire un file solo invece di due, cioe' 5,8 KB in meno a pagina,
   non di piu'. */
.site-header:not(.is-solid) .logo-word__name {
  background-image: url("/assets/img/brand/logo-word-light-520.png");
  background-image: -webkit-image-set(url("/assets/img/brand/logo-word-light-260.png") 1x, url("/assets/img/brand/logo-word-light-520.png") 2x, url("/assets/img/brand/logo-word-light-780.png") 3x);
  background-image: image-set(url("/assets/img/brand/logo-word-light-260.png") 1x, url("/assets/img/brand/logo-word-light-520.png") 2x, url("/assets/img/brand/logo-word-light-780.png") 3x);
}
.site-header:not(.is-solid) .logo-word__desc {
  background-image: url("/assets/img/brand/logo-desc-light-520.png");
  background-image: -webkit-image-set(url("/assets/img/brand/logo-desc-light-260.png") 1x, url("/assets/img/brand/logo-desc-light-520.png") 2x, url("/assets/img/brand/logo-desc-light-780.png") 3x);
  background-image: image-set(url("/assets/img/brand/logo-desc-light-260.png") 1x, url("/assets/img/brand/logo-desc-light-520.png") 2x, url("/assets/img/brand/logo-desc-light-780.png") 3x);
}

/* Il descrittore non compare mai nell'header, a nessuna larghezza. Misurato
   sull'artwork originale: il marchio e' alto 439px, il blocco di testo a due
   righe (MBC SRL + descrittore) 200px - il marchio e' 2,2 volte il testo.
   Un header che ci provasse dovrebbe tenere il blocco di testo a ~18px, il che
   renderebbe il descrittore alto ~2px: illeggibile per costruzione, e' testo
   fine nell'artwork, pensato per essere letto solo a dimensioni grandi (come nel
   footer). .logo-word__name resta alla misura fissa dichiarata sopra (110x22,
   rapporto 1,8:1 col marchio, vicino all'originale) su ogni larghezza. */

.nav { display: flex; align-items: center; gap: 2rem; }
.nav-menu { display: flex; align-items: center; gap: 1.7rem; }
.nav-menu a { font-family: var(--sans); font-weight: 500; font-size: .98rem; color: var(--ink); position: relative; }
.nav-menu a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--terracotta); transition: width .28s var(--ease); }
.nav-menu a:hover, .nav-menu a[aria-current="page"] { color: var(--green); }
.nav-menu a:hover::after, .nav-menu a[aria-current="page"]::after { width: 100%; }
.site-header:not(.is-solid) .nav-menu a { color: rgba(255,255,255,.92); }
.site-header:not(.is-solid) .nav-menu a:hover { color: #fff; }

.nav-side { display: flex; align-items: center; gap: 1.1rem; }
.nav-cta-item { display: none; } /* only shown inside the mobile overlay menu */
.lang { display: inline-flex; gap: .1rem; font-size: .85rem; font-weight: 600; align-items: center; }
.lang a { color: var(--muted); padding: .2rem .35rem; border-radius: 6px; }
.lang a[aria-current="true"] { color: var(--green); background: var(--cream-3); }
.lang .sep { color: var(--line); }
.site-header:not(.is-solid) .lang a { color: rgba(255,255,255,.7); }
.site-header:not(.is-solid) .lang a[aria-current="true"] { color: #fff; background: rgba(255,255,255,.18); }

.nav-toggle { display: none; width: 46px; height: 46px; border: 0; background: transparent; border-radius: 10px; position: relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 11px; width: 24px; height: 2px; background: var(--green); transition: transform .3s var(--ease), opacity .2s; border-radius: 2px;
}
.nav-toggle span { top: 22px; } .nav-toggle span::before { top: -7px; } .nav-toggle span::after { top: 7px; }
.site-header:not(.is-solid) .nav-toggle span, .site-header:not(.is-solid) .nav-toggle span::before, .site-header:not(.is-solid) .nav-toggle span::after { background: #fff; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; color: #fff; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* dual scrim: left-anchored band under the text column + vertical floor/ceiling */
  background:
    linear-gradient(90deg, rgba(15,26,20,.72) 0%, rgba(15,26,20,.5) 34%, rgba(15,26,20,.16) 62%, rgba(15,26,20,.04) 100%),
    linear-gradient(180deg, rgba(15,26,20,.5) 0%, rgba(15,26,20,.08) 30%, rgba(15,26,20,.1) 55%, rgba(15,26,20,.82) 100%);
}
/* per-hero art direction */
.hero__media img.obj-r { object-position: 72% 50%; }
.hero__media img.obj-l { object-position: 28% 50%; }
.hero__inner { padding-bottom: clamp(3.5rem, 8vw, 7rem); padding-top: calc(var(--header-h) + 2rem); max-width: 900px; }
.hero__title { color: #fff; font-size: clamp(2.6rem, 6.4vw, 5rem); text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 4px 22px rgba(0,0,0,.4); }
.hero__sub { color: rgba(255,255,255,.97); font-size: clamp(1.1rem, 1.6vw, 1.35rem); max-width: 60ch; margin-top: 1.3rem; text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 12px rgba(0,0,0,.35); }
.hero .eyebrow { text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.hero__btns { margin-top: 2rem; }
.hero--short { min-height: 62vh; min-height: 62svh; }
.hero--short .hero__inner { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ---------- Stat band ---------- */
.stat-band { background: var(--green); color: #e9efe9; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.stat b { display: block; font-family: var(--serif); font-weight: 600; color: #fff; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; }
.stat span { display: block; margin-top: .5rem; font-size: .95rem; color: #b9c6bb; letter-spacing: .02em; }

/* ---------- Product / service cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); }
.card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card__media img { transform: scale(1.06); }
.card__body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.card__body h3 { color: var(--green); }
.card__body p { color: #4c554c; font-size: .98rem; }
.card__body .link-arrow { margin-top: auto; padding-top: .4rem; color: var(--terracotta-text); }

/* ---------- Split (image + text) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 5vw, 4.5rem); align-items: center; }
.split + .split { margin-top: clamp(3rem, 6vw, 5.5rem); }
.split__media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4/5; object-fit: cover; }
.split--rev .split__media { order: 2; }
.split__body h2 { margin-bottom: 1rem; }
.split__body ul.ticks { margin-top: 1.3rem; display: grid; gap: .7rem; }
.ticks li { position: relative; padding-left: 1.9rem; color: #3f483f; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .5em; width: 1.05rem; height: 1.05rem; background: var(--terracotta); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------- Process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 3vw, 2.2rem); counter-reset: step; }
.step { position: relative; padding-top: 1rem; }
.step b { counter-increment: step; font-family: var(--serif); font-size: 2.6rem; font-weight: 600; color: var(--terracotta); display: block; line-height: 1; }
.step b::before { content: "0" counter(step); }
.step h3 { margin: .7rem 0 .4rem; font-size: 1.2rem; }
.step p { font-size: .95rem; color: #4c554c; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; color: #fff; text-align: center; isolation: isolate; overflow: hidden; }
.cta-band .container { padding-block: clamp(4rem, 9vw, 7rem); position: relative; }
.cta-band__media { position: absolute; inset: 0; z-index: -2; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18,33,26,.72), rgba(18,33,26,.82)); }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.9); margin: 1rem auto 2rem; max-width: 56ch; }

/* ---------- Gallery ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }
.filter { border: 1.5px solid var(--line); background: transparent; color: var(--green); padding: .55em 1.15em; border-radius: 999px; font-weight: 600; font-size: .92rem; transition: all .25s var(--ease); }
.filter:hover { border-color: var(--terracotta); color: var(--terracotta-text); }
.filter.is-active { background: var(--green); border-color: var(--green); color: #fff; }
.masonry { columns: 3 260px; column-gap: 1rem; }
.masonry figure { break-inside: avoid; margin: 0 0 1rem; border-radius: var(--radius-s); overflow: hidden; position: relative; cursor: zoom-in; background: var(--cream-3); }
.masonry img { width: 100%; transition: transform .6s var(--ease), filter .3s; }
.masonry figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(18,33,26,.6)); opacity: 0; transition: opacity .3s; }
.masonry figure:hover img { transform: scale(1.05); }
.masonry figure:hover::after { opacity: 1; }
.masonry figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem; color: #fff; font-size: .9rem; z-index: 2; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.masonry figure:hover figcaption { opacity: 1; transform: none; }
/* touch devices have no hover: keep captions readable at all times */
@media (hover: none) {
  .masonry figcaption { opacity: 1; transform: none; }
  .masonry figure::after { opacity: .85; }
}
.gallery-item[hidden] { display: none; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(15,24,19,.94); display: none; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; transition: opacity .28s var(--ease), display .28s allow-discrete; }
.lightbox.is-open { display: flex; opacity: 1; }
/* fade IN from the discrete display change; unsupported browsers just get today's instant open */
@starting-style { .lightbox.is-open { opacity: 0; } }
.lightbox__img { max-width: min(1100px, 94vw); max-height: 84vh; border-radius: 10px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); }
.lightbox__cap { position: absolute; bottom: 1.4rem; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.85); font-size: .92rem; padding-inline: 1rem; }
.lb-btn { position: absolute; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); color: #fff; width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; transition: background .2s, transform .2s; }
.lb-btn:hover { background: rgba(255,255,255,.22); }
.lb-close { top: 1.2rem; right: 1.2rem; }
.lb-prev { left: clamp(.6rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(.6rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-btn svg { width: 22px; height: 22px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--green-deep); color: #c7d1c7; padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(1.8rem, 4vw, 3rem); padding-bottom: 3rem; }
/* Nel footer c'e' larghezza vera, quindi il descrittore compare sempre, anche
   sul telefono: a 260px sta a 9,4px di altezza, che si legge. */
.site-footer .logo-word__name {
  /* Fluida e non fissa: a 260px il logo del footer misurava 310px e sbordava di
     8px su uno schermo da 320. aspect-ratio tiene le proporzioni mentre la
     larghezza si adatta, quindi non c'e' una misura che possa non entrare. */
  width: min(260px, calc(100vw - 100px)); aspect-ratio: 666 / 135; height: auto;
  /* Serie propria, non quella dell'header: il riquadro qui arriva a 260px CSS,
     quindi a 3x servono 780px fisici. Riusare la serie da 330px (pensata per i
     220px dell'header) significava stirare quel file di 2,36 volte: misurato,
     esattamente la sgranatura vista su "SRL" e sul descrittore. */
  background-image: url("/assets/img/brand/logo-word-light-520.png");
  background-image: -webkit-image-set(url("/assets/img/brand/logo-word-light-260.png") 1x, url("/assets/img/brand/logo-word-light-520.png") 2x, url("/assets/img/brand/logo-word-light-780.png") 3x);
  background-image: image-set(url("/assets/img/brand/logo-word-light-260.png") 1x, url("/assets/img/brand/logo-word-light-520.png") 2x, url("/assets/img/brand/logo-word-light-780.png") 3x);
}
.site-footer .logo-word__desc {
  display: block; width: min(260px, calc(100vw - 100px)); aspect-ratio: 664 / 24; height: auto;
  background-image: url("/assets/img/brand/logo-desc-light-520.png");
  background-image: -webkit-image-set(url("/assets/img/brand/logo-desc-light-260.png") 1x, url("/assets/img/brand/logo-desc-light-520.png") 2x, url("/assets/img/brand/logo-desc-light-780.png") 3x);
  background-image: image-set(url("/assets/img/brand/logo-desc-light-260.png") 1x, url("/assets/img/brand/logo-desc-light-520.png") 2x, url("/assets/img/brand/logo-desc-light-780.png") 3x);
}
.site-footer .logo-mark {
  background-image: url("/assets/img/brand/logo-mark-light-80.png");
  background-image: -webkit-image-set(url("/assets/img/brand/logo-mark-light-40.png") 1x, url("/assets/img/brand/logo-mark-light-80.png") 2x, url("/assets/img/brand/logo-mark-light-120.png") 3x);
  background-image: image-set(url("/assets/img/brand/logo-mark-light-40.png") 1x, url("/assets/img/brand/logo-mark-light-80.png") 2x, url("/assets/img/brand/logo-mark-light-120.png") 3x);
}
.footer-about p { color: #a9b5a9; margin-top: 1.1rem; font-size: .96rem; }
.footer-col h3 { font-family: var(--sans); font-size: .82rem; text-transform: uppercase; letter-spacing: .16em; color: #8fa08f; margin-bottom: 1.1rem; font-weight: 700; }
.footer-col ul { display: grid; gap: .6rem; }
.footer-col a { color: #c7d1c7; }
.footer-col a:hover { color: #fff; }
.footer-contact a { display: inline-block; }
.socials { display: flex; gap: .7rem; margin-top: 1.2rem; }
.socials a { width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center; color: #c7d1c7; }
.socials a:hover { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.socials svg { width: 18px; height: 18px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.6rem calc(1.6rem + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; font-size: .85rem; color: #8fa08f; }
.footer-bottom a { color: #8fa08f; position: relative; } .footer-bottom a:hover { color: #fff; }
/* Il credito sta dentro una frase, non in un elenco: senza sottolineatura resta
   distinguibile solo per colore (WCAG 1.4.1). E' esattamente il controllo che su
   flysystem faceva scendere l'accessibilita' da 100 a 96.
   Il :not(:has(img)) e' perche' oggi il credito e' il logo di MarketingPro, e
   un'immagine non e' "distinguibile solo per colore": la sottolineatura non
   serve e sotto un logo sta male. La regola resta pero' armata per il caso in
   cui il credito torni a essere testo, che e' il caso in cui serviva davvero. */
.footer-bottom a[href*="marketingpro"]:not(:has(img)) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
/* Il logo si allinea al testo della riga invece di sedersi sulla baseline, dove
   lascerebbe il gap dei contenuti inline. */
.footer-bottom .credito { display: inline-flex; align-items: center; gap: .45rem; }
/* aspect-ratio esplicito: le tre rendition del credito non condividono lo
   stesso rapporto al pixel (100x23 e 200x46 fanno 4,3478; 300x68 fa 4,4118,
   perche' ogni altezza viene arrotondata per conto suo), quindi a densita'
   diverse il browser dipingeva un'altezza diversa da quella riservata
   dall'attributo. Fissando il rapporto la riserva e' la stessa per tutte. */
.footer-bottom .credito img { display: block; width: 100px; height: auto;
  aspect-ratio: 100 / 23; object-fit: contain; }

/* ---------- Reveal on scroll (only when JS is active, so no-JS shows all) ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }
/* --d is set by main.js (auto-stagger per parent); these stay as a no-JS-timing fallback */
.js .reveal[data-delay="1"] { --d: .08s; }
.js .reveal[data-delay="2"] { --d: .16s; }
.js .reveal[data-delay="3"] { --d: .24s; }

/* Photographs settle from a whisper of scale as they arrive. Scoped to .split__media only:
   .card and .preview-grid already animate transform on hover, and .proof-strip is a scroll rail. */
.js .split__media.reveal { transform: translateY(18px) scale(.985); }
.js .split__media.reveal.is-visible { transform: none; }

/* .js .reveal (2 classes) otherwise outranks .card (1) and clobbers the card's own
   .35s lift + box-shadow fade, leaving an 800ms hover with a snapping shadow. */
.js .card.reveal.is-visible:hover { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .card, .card__media img, .masonry img, .btn,
  .nav-menu, .masonry figcaption, .link-arrow svg, .preview-grid img,
  .lightbox, .wa-fab, .wa-fab__label, .site-header, .site-header::before, .filter, .jump { transition: none !important; }
}

/* ---------- Skip link & a11y ---------- */
.skip-link { position: absolute; left: 1rem; top: -60px; background: var(--green); color: #fff; padding: .7rem 1.1rem; border-radius: 8px; z-index: 300; transition: top .2s; }
.skip-link:focus { top: 1rem; color: #fff; }
.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; }

/* ---------- Prose (legal pages) ---------- */
.prose { max-width: 760px; }
.prose h2 { margin: 2.4rem 0 .8rem; font-size: 1.5rem; }
.prose p, .prose li { color: #3f483f; }
.prose ul { list-style: disc; padding-left: 1.3rem; display: grid; gap: .5rem; margin-top: .6rem; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 2.2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  :root { --header-h: 66px; }
  /* `safe center` keeps the tail reachable when the menu overflows (5 items + CTA on a
     landscape phone); overflow-y is the fallback for browsers that drop `safe`. */
  /* visibility (not just transform) so the closed menu's links leave the tab order;
     it is transitioned so the panel stays painted through the closing slide. */
  /* height is redundant against inset:0 but over-constrains the block axis on
     purpose: should any future ancestor become a containing block (transform,
     filter, contain, will-change), the panel stays one viewport tall instead of
     collapsing to that ancestor's height. */
  .nav-menu { position: fixed; inset: 0; height: 100dvh; flex-direction: column; justify-content: safe center; gap: 1.6rem; background: var(--green); padding: 2rem; padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); transform: translateX(100%); visibility: hidden; transition: transform .4s var(--ease), visibility .4s; z-index: 90; overflow-y: auto; overscroll-behavior: contain; }
  body.nav-open .nav-menu { visibility: visible; }
  .nav-menu a { color: #fff !important; font-family: var(--serif); font-size: 1.7rem; padding: .3rem .6rem; }
  .nav-menu a::after { display: none; }
  /* CTA inside the overlay menu (hidden on desktop) */
  .nav-cta-item { display: block; margin-top: .8rem; }
  .nav-cta-item .btn { font-family: var(--sans) !important; font-size: 1.05rem !important; padding: .9em 2em !important; background: var(--terracotta-d); border-radius: 999px; }
  /* bigger tap targets */
  .lang a { padding: .55rem .7rem; }
  .footer-col a { display: inline-block; padding-block: .25rem; }
  /* filters: one-row swipeable strip */
  .filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; padding-bottom: .4rem; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; scroll-snap-align: start; padding: .65em 1.25em; }
  body.nav-open .nav-menu { transform: none; }
  body.nav-open { overflow: hidden; }
  .nav-toggle { display: block; z-index: 95; }
  body.nav-open .nav-toggle span { background: transparent; }
  body.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); background: #fff; }
  body.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); background: #fff; }
  .nav { gap: 1rem; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .split { grid-template-columns: 1fr; gap: 1.6rem; }
  .split--rev .split__media { order: 0; }
  .split__media img { aspect-ratio: 4/3; max-height: 62vh; }
  .masonry { columns: 2 200px; }
}
@media (max-width: 520px) {
  .cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  /* niente da nascondere: il lettering ora e' una sola immagine, e "SRL"
     faceva parte del marchio, non era un dettaglio da togliere sul telefono */
  /* gallery: true 2-col on phones; captions live in the lightbox */
  .masonry { columns: 2; column-gap: .6rem; }
  .masonry figure { margin-bottom: .6rem; }
  .masonry figcaption { display: none; }
  .masonry figure::after { display: none; }
  .hero__btns .btn { width: 100%; justify-content: center; }
  /* footer: link columns side by side, brand + contact full width */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "about about" "nav sol" "contact contact";
  }
  .footer-about { grid-area: about; }
  .footer-grid > .footer-col:nth-child(2) { grid-area: nav; }
  .footer-grid > .footer-col:nth-child(3) { grid-area: sol; }
  .footer-contact { grid-area: contact; }
}

/* Nav must survive 5 items: no wrapping inside the 76px header, and the overlay
   menu must stay usable on a landscape phone (measured failures at 861px and 844x390). */
.nav-menu a { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1080px) { .nav-menu { gap: 1.15rem; } .nav { gap: 1.4rem; } }
@media (max-width: 860px) and (max-height: 520px) {
  .nav-menu { gap: 1rem; }
  .nav-menu a { font-size: 1.35rem; }
}
@media (max-width: 860px) and (max-height: 400px) {
  .nav-menu { gap: .6rem; padding-block: 1rem; }
  .nav-menu a { font-size: 1.15rem; }
  .nav-cta-item .btn { padding: .7em 1.6em !important; font-size: .95rem !important; }
}

/* ---------- Extras ---------- */
.btn--sm { padding: .62em 1.2em; font-size: .9rem; }
@media (max-width: 860px) { .header-cta { display: none; } }

.preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem, 2vw, 1.3rem); }
.preview-grid a { display: block; border-radius: var(--radius-s); overflow: hidden; position: relative; aspect-ratio: 3/4; }
.preview-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.preview-grid a:hover img { transform: scale(1.06); }
.preview-grid a:nth-child(1) { aspect-ratio: 3/4; }
@media (max-width: 620px) { .preview-grid { grid-template-columns: 1fr 1fr; } .preview-grid a:nth-child(3) { display: none; } }

.foot-note { font-size: .82rem; color: var(--muted); }
.mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.split__media.split__media--tall img { aspect-ratio: 4/5; }

/* Page header for hero-less pages (legal) */
.page-header { background: var(--green); color: #fff; padding-top: calc(var(--header-h) + clamp(2.4rem,6vw,4.2rem)); padding-bottom: clamp(2.4rem,5vw,3.4rem); }
.page-header h1 { color: #fff; }
.page-header .eyebrow { color: #dfa781; }
.page-header p { color: rgba(255,255,255,.9); }

/* Two-formula feature blocks (Chi siamo) */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem,2.5vw,2rem); }
.duo .feat { background: var(--white); border-radius: var(--radius); padding: clamp(1.6rem,3vw,2.4rem); box-shadow: var(--shadow-sm); border-top: 4px solid var(--terracotta); }
.duo .feat h3 { margin-bottom: .7rem; }
.duo .feat .tag { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--terracotta-text); margin-bottom: .8rem; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,4vw,4rem); align-items: start; }
.form-field { margin-bottom: 1.1rem; }
.form-field label { display: block; font-weight: 600; margin-bottom: .4rem; font-size: .95rem; color: var(--green); }
.form-field .req { color: var(--terracotta-text); }
input, select, textarea { width: 100%; padding: .85em 1em; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font: inherit; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { border-color: var(--terracotta); outline: none; box-shadow: 0 0 0 3px rgba(188,107,62,.15); }
textarea { min-height: 140px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.checkbox { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; color: #4c554c; }
/* Era 13x13: sotto il minimo di 24px della WCAG 2.2 (SC 2.5.8) e, su un campo
   obbligatorio, anche solo difficile da vedere. E' l'unico elemento del lotto
   che cambia davvero aspetto; per gli altri si allarga solo l'area sensibile. */
.checkbox input { width: 24px; height: 24px; margin-top: 0; flex: none; accent-color: var(--green); }
.field-error { color: #a3271c; font-size: .84rem; margin-top: .3rem; display: none; }
.form-field.invalid .field-error { display: block; }
.form-field.invalid input, .form-field.invalid select, .form-field.invalid textarea { border-color: #a3271c; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .85rem; color: var(--muted); margin-top: 1rem; }
.form-success { display: none; background: #e7f0e9; border: 1.5px solid var(--green); color: var(--green-deep); padding: 1rem 1.2rem; border-radius: 12px; margin-bottom: 1.2rem; }
.form-success.show { display: block; }
.contact-card { background: var(--cream-2); border-radius: var(--radius); padding: clamp(1.6rem,3vw,2.2rem); }
.info-item { display: flex; gap: 1rem; margin-bottom: 1.5rem; align-items: flex-start; }
.info-item:last-child { margin-bottom: 0; }
.info-item .ico { width: 2.7rem; height: 2.7rem; border-radius: 999px; background: var(--green); color: #fff; display: grid; place-items: center; flex: none; }
.info-item .ico svg { width: 1.2rem; height: 1.2rem; }
.info-item h3 { font-size: 1rem; margin-bottom: .15rem; font-family: var(--sans); font-weight: 700; color: var(--green); }
.info-item p, .info-item a { font-size: .96rem; color: #4c554c; }
.info-item a { color: var(--terracotta-text); position: relative; }
/* "Dove siamo" carries two addresses (showroom + sede legale), so its p's stack */
.info-item p + p { margin-top: .7rem; }
.info-item .sub { font-size: .88rem; color: var(--muted); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } }

/* Values row */
.values { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.2rem,3vw,2.2rem); }
.value h3 { font-size: 1.15rem; margin-bottom: .5rem; display: flex; align-items: center; gap: .6rem; }
.value .vico { width: 2.4rem; height: 2.4rem; border-radius: 999px; background: var(--cream-3); display: grid; place-items: center; color: var(--terracotta-d); flex: none; }
.value .vico svg { width: 1.2rem; height: 1.2rem; }
.value p { font-size: .96rem; color: #4c554c; }
@media (max-width: 860px) { .values { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ---------- Soluzioni: anchor jump row ---------- */
.jump-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.jump { display: inline-flex; align-items: center; border: 1.5px solid var(--line); color: var(--green);
  padding: .55em 1.15em; border-radius: 999px; font-weight: 600; font-size: .92rem;
  transition: border-color .25s var(--ease), color .25s var(--ease); }
.jump:hover { border-color: var(--terracotta); color: var(--terracotta-text); text-decoration: none; }
@media (max-width: 860px) {
  .jump-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    scroll-snap-type: x proximity; padding-bottom: .4rem;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .jump-row::-webkit-scrollbar { display: none; }
  .jump { flex: none; scroll-snap-align: start; padding: .65em 1.25em; }
}

/* ---------- Feature split + stacked media (bolle) ---------- */
.split--feature { grid-template-columns: 6fr 5fr; }
.media-stack { position: relative; }
.media-stack > picture img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow);
  aspect-ratio: 4/5; object-fit: cover; }
/* NB: the inset must be a real element - picture{display:contents} cannot be positioned.
   The media column sits LEFT, so this negative offset overlaps the column gap, never the viewport edge. */
.media-stack__inset { position: absolute; right: -6%; bottom: -8%; width: 44%; }
.media-stack__inset img { width: 100%; aspect-ratio: 3/4; object-fit: cover;
  border: 6px solid var(--cream); border-radius: var(--radius-s); box-shadow: var(--shadow); }
.section--tint .media-stack__inset img { border-color: var(--cream-2); }
@media (max-width: 860px) {
  .split--feature { grid-template-columns: 1fr; }
  /* One strong photograph per section on phones. The inset is desktop decoration:
     at this width it rendered TALLER than the image it accents (273px vs 265px) and
     hung 232px below it, inverting the hierarchy. Hidden rather than re-proportioned
     so the section reads as one deliberate photograph. display:none also means the
     lazy inset image is never fetched on mobile. */
  .media-stack__inset { display: none; }
  /* with the inset gone there is no reason for the stunted 4/3 that made room for it:
     match the height of every other split on mobile */
  .media-stack > picture img { aspect-ratio: 4/5; max-height: 62vh; }
}

/* ---------- Capability band (chiavi in mano) - extends .cta-band ---------- */
.cta-band--cap { text-align: left; }
.cta-band--cap p { margin-inline: 0; }
.cta-band--cap .section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3.5vw, 3rem); }
.cap .cico { width: 2.9rem; height: 2.9rem; border-radius: 999px; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22); display: grid; place-items: center; color: #dfa781; }
.cap .cico svg { width: 1.35rem; height: 1.35rem; }
.cap h3 { color: #fff; font-size: 1.18rem; margin: .9rem 0 .45rem; }
.cap p { color: rgba(255,255,255,.88); font-size: .97rem; margin: 0; max-width: 34ch; }
.cap-foot { margin-top: clamp(2.2rem, 4vw, 3.2rem); padding-top: 1.8rem;
  border-top: 1px solid rgba(255,255,255,.18); display: flex; flex-wrap: wrap; gap: 1.2rem;
  align-items: center; justify-content: space-between; }
.cap-foot p { font-family: var(--serif); font-size: clamp(1.15rem, 1.8vw, 1.5rem); color: #fff;
  line-height: 1.25; max-width: 38ch; margin: 0; }
@media (max-width: 860px) { .cap-grid { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ---------- Proof strip (produzione artigianale) ---------- */
.proof-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.6rem, 1.2vw, 1rem); }
.proof-strip figure { margin: 0; border-radius: var(--radius-s); overflow: hidden; background: var(--cream-3); }
.proof-strip img { width: 100%; aspect-ratio: 3/4; object-fit: cover; filter: saturate(.92) contrast(1.04); }
@media (max-width: 1024px) {
  .proof-strip { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scrollbar-width: none; gap: .6rem; padding-bottom: .4rem;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .proof-strip::-webkit-scrollbar { display: none; }
  .proof-strip figure { flex: 0 0 min(62%, 280px); scroll-snap-align: start; }
}
/* workshop shots carry the same grade in the gallery as in the proof strip */
.masonry .gallery-item[data-cat="produzione"] img { filter: saturate(.92) contrast(1.04); }

/* Wide triptych: come --detail, ma per fotografie ORIZZONTALI.
   Serviva perche' ogni contenitore del sito e' verticale (4:5 negli split, 3:4
   nella proof-strip, 3:4 nella preview-grid) e le fotografie nuove sono 3:2:
   dentro un 4:5 `object-fit: cover` ne butta via il 47% della larghezza, cioe'
   il campo innevato, il mare, la seconda vasca. A 3:2 il ritaglio e' sotto il
   pixel, perche' le tre foto scelte per questa striscia sono 1,4993 / 1,4988 /
   1,5000.
   Il selettore e' a doppia classe di proposito: `.proof-strip--wide img` da solo
   pesa (0,1,1) esattamente come `.proof-strip img`, e vincerebbe solo per ordine
   nel file. E' la stessa ragione per cui piu' su sta scritto
   `.split__media.split__media--tall img`. */
.proof-strip.proof-strip--wide { grid-template-columns: repeat(3, 1fr); gap: clamp(.5rem, 1vw, .9rem);
    max-width: 1800px; margin-inline: auto; }
.proof-strip.proof-strip--wide figure { border-radius: 0; background: var(--green-800); }
.proof-strip.proof-strip--wide img { aspect-ratio: 3/2; filter: none; }

/* Detail triptych: the same component, full-bleed on green, ungraded, taller frames.
   Sits directly in the section (not .container) so it runs edge to edge without 100vw math. */
.proof-strip--detail { grid-template-columns: repeat(3, 1fr); gap: clamp(.5rem, 1vw, .9rem);
  max-width: 1800px; margin-inline: auto; }
.proof-strip--detail figure { border-radius: 0; background: var(--green-800); }
.proof-strip--detail img { aspect-ratio: 4/5; filter: none; }
@media (max-width: 1024px) {
  .proof-strip--detail { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scrollbar-width: none; gap: .5rem; padding-bottom: .4rem;
    padding-inline: var(--gutter); margin-inline: 0; }
  .proof-strip--detail::-webkit-scrollbar { display: none; }
  .proof-strip--detail figure { flex: 0 0 min(72%, 320px); scroll-snap-align: start; border-radius: var(--radius-s); }
}

/* ============================================================
   WhatsApp floating button
   Kept at the END of the file on purpose: the :focus-visible rule
   below must beat the global `:focus-visible { border-radius: 4px }`
   (equal specificity - source order decides).
   ============================================================ */
.wa-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  height: 56px;
  padding: 0 16px;                 /* collapsed: 56px circle (16+24+16) */
  border-radius: 999px;
  background: var(--wa-green);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 0 0 2px rgba(246, 241, 231, .92), 0 10px 30px -12px rgba(30, 51, 40, .45);
  transition: opacity .5s var(--ease), transform .5s var(--ease), background .25s var(--ease);
}
.wa-fab:hover { background: var(--wa-green-d); color: #fff; text-decoration: none; }
.wa-fab svg { width: 24px; height: 24px; flex: none; }

/* Label: real DOM text (so IT/EN can't drift) - collapsed by default */
.wa-fab__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .95rem;
  opacity: 0;
  transition: max-width .35s var(--ease), opacity .25s var(--ease);
}

/* Visibility is JS-driven; without JS the button is simply always there */
.js .wa-fab { opacity: 0; transform: translateY(12px); visibility: hidden; }
.js .wa-fab.is-in { opacity: 1; transform: none; visibility: visible; }

/* Fully remove from tab order behind the mobile menu / lightbox overlays */
body.nav-open .wa-fab,
body.lb-open .wa-fab { display: none; }

.wa-fab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cream), 0 0 0 6px var(--green-deep), 0 10px 30px -12px rgba(30, 51, 40, .45);
}

@media (min-width: 861px) {
  .wa-fab { height: 52px; padding: 0 14px; }
  .wa-fab svg { width: 23px; height: 23px; }
  .wa-fab:hover .wa-fab__label,
  .wa-fab:focus-visible .wa-fab__label { max-width: 22rem; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-fab { transition: none; }
  .js .wa-fab { transform: none; }
  .wa-fab__label { transition: none; }
}

/* .ticks nasce per fondo chiaro: il suo #3f483f sul verde non si legge.
   Sta qui e non nel blocco che l'ha vista nascere (il richiamo al catalogo,
   rimosso) perche' non e' mai stata sua: vale per ogni .ticks su .section--green. */
.section--green .ticks li { color: #dbe4db; }


/* ---------- Aree di tocco (WCAG 2.2 SC 2.5.8) ---------- */
/* I link a elenco erano alti 16-19px. Invece di ingrassare il testo, che
   sposterebbe una pagina gia' approvata dal cliente, si estende il solo
   bersaglio con uno pseudo-elemento sovrapposto: il disegno resta identico al
   pixel, il dito trova 40+ px. I link dentro una frase restano come sono, che
   e' anche l'eccezione prevista dalla norma. */
.footer-bottom a::after,
.info-item a::after {
  content: ""; position: absolute; inset: -12px -8px;
}
/* La label della checkbox porta il bersaglio a tutta la riga. */
.checkbox { align-items: center; }
.checkbox input { cursor: pointer; }

/* Il lockup del footer deve poter rimpicciolire: senza min-width:0 un elemento
   flex non scende sotto la propria dimensione naturale e l'overflow resta. */
.site-footer .logo { max-width: 100%; }
.site-footer .logo-word { min-width: 0; gap: 16px; }