/* =====================================================================
   Pro Logic Informatica - Sito istituzionale
   Design system: Terra Chiara (chiara) + isole scure
   Type: Archivo (display) + Public Sans (testo) + JetBrains Mono (label)
   ===================================================================== */

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
img,svg{ display:block; max-width:100%; }
/* WP stampa width/height sulle img: senza height:auto l'altezza resta quella nativa e la foto si stira */
img{ height:auto; }
/* Con JS e motion attivi lo scroll lo gestiscono Lenis/ScrollTrigger: lo smooth CSS
   rende asincrono lo scrollTo(0) interno a ScrollTrigger.refresh() e dopo un resize
   da scrollati tutti i trigger risultano spostati dello scroll corrente (showcase
   fuori sync). Lo smooth resta solo nel fallback .no-motion per le ancore native. */
html.js:not(.no-motion){ scroll-behavior:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; }

/* ---------- Tokens ---------- */
:root{
  --paper:#F7F4EF;
  --paper-2:#F1ECE4;
  --stone:#E7E1D8;
  --clay:#E8D2C6;
  --ink:#1B1A18;
  --graphite:#4A4744;
  --muted:#6B645B;
  --terra:#BE4A2B;
  --terra-2:#A63E22;
  --terra-soft:#E8D2C6;
  --night:#16130F;
  --surface:#211C17;
  --surface-2:#2C251E;
  --glow:#E5794F;
  --sand:#EDE7DE;
  --sand-muted:#C9BFB2;
  --line:#E0D9CE;
  --line-dark:rgba(255,255,255,.12);

  --font-display:'Archivo',system-ui,sans-serif;
  --font-body:'Public Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --container:1320px;
  --gutter:clamp(20px,4vw,64px);
  --radius:16px;
  --radius-lg:24px;
  --section-py:clamp(80px,11vh,140px);
  --hero-pb:clamp(40px,6vh,72px);
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- Base ---------- */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.container{ max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; line-height:1.02; letter-spacing:-.025em; color:var(--ink); }

/* Guardia anti sfondamento: una parola senza spazi (nome file, url, sigla incollata)
   dentro un titolo allargava il layout e faceva scrollare la pagina in orizzontale.
   anywhere e non break-word perche' abbassa anche il min-content: senza quello flex
   e grid sfondano comunque. Applicata dove il testo arriva dal cliente. */
h1,h2,h3,h4,.word,.chips span,.eyebrow{ overflow-wrap:anywhere; }

/* fluid display scale */
.display{ font-size:clamp(40px,6.2vw,86px); }
.h-xl{ font-size:clamp(34px,4.6vw,64px); }
.h-lg{ font-size:clamp(28px,3.4vw,44px); }
.h-md{ font-size:clamp(22px,2.4vw,30px); }

.eyebrow{
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--terra-2);
}
.lead{ font-size:clamp(17px,1.4vw,20px); color:var(--graphite); line-height:1.55; }
.muted{ color:var(--muted); }
em.accent{ font-style:normal; color:var(--terra); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:15px;
  padding:14px 26px; border-radius:100px; white-space:nowrap;
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--terra); color:#fff; }
.btn-primary:hover{ background:var(--terra-2); }
.btn-ghost{ border:1px solid rgba(27,26,24,.24); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-ghost-light{ border:1px solid rgba(255,255,255,.3); color:#fff; }
.btn-ghost-light:hover{ border-color:#fff; }
.btn .arrow{ transition:transform .25s var(--ease); }
.btn:hover .arrow{ transform:translateX(3px); }

/* link with arrow */
.link-arrow{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--terra-2); }
.link-arrow .arrow{ transition:transform .25s var(--ease); }
.link-arrow:hover .arrow{ transform:translateX(4px); }

/* =====================================================================
   HEADER - editoriale a celle + megamenu a pannello
   ===================================================================== */
.site-header{
  /* --hdr-p: padding verticale del logo, guida l'altezza dell'header (74px -> 64px).
     --hdr-logo: scala del logo (46px -> ~36px), applicata con transform: nessun
     reflow dell'immagine mentre cambia. */
  --hdr-p:14px; --hdr-logo:1;
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:stretch;
  background:var(--paper); border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease);
}
.site-header.scrolled{ --hdr-p:9px; --hdr-logo:.78; box-shadow:0 18px 40px -28px rgba(40,33,26,.5); }

/* logo un po' piu' grande, soprattutto prima dello scroll (round 5).
   Due modi di guidare le variabili:
   - senza JS le commuta .scrolled e le transizioni qui sotto smussano il salto;
   - con JS main.js aggiunge .hdr-live e le scrubba sulla posizione di scroll, quindi
     le transizioni vanno spente o inseguirebbero il valore rendendo il moto molle. */
.hdr__logo{ display:flex; align-items:center; padding:var(--hdr-p) clamp(20px,3vw,32px);
  transition:padding .34s var(--ease); }
.hdr__logo img{ height:46px; width:auto; transform:scale(var(--hdr-logo)); transform-origin:left center;
  transition:transform .34s var(--ease); }
.site-header.hdr-live .hdr__logo,
.site-header.hdr-live .hdr__logo img{ transition:none; }

.hdr__nav{ display:flex; align-items:stretch; margin-left:auto; }
.hdr__item{ display:flex; align-items:stretch; }

.hdr__link{
  position:relative; display:flex; align-items:center; gap:9px;
  padding:0 clamp(16px,1.8vw,26px);
  font-family:var(--font-mono); font-size:12.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--graphite);
  border-left:1px solid var(--line); overflow:hidden;
  transition:color .35s var(--ease);
}
.hdr__link::before{ content:""; position:absolute; inset:0; background:var(--ink);
  transform:translateY(101%); transition:transform .35s var(--ease); }
.hdr__link > *{ position:relative; z-index:1; }
.hdr__link:hover{ color:var(--paper); }
.hdr__link:hover::before{ transform:translateY(0); }
.hdr__link.active{ color:var(--terra-2); box-shadow:inset 0 -2px 0 var(--terra); }
.hdr__link .caret{ transition:transform .35s var(--ease); }
.has-mega:hover .hdr__link .caret{ transform:rotate(180deg); }

.hdr__cta{
  display:flex; align-items:center; gap:10px;
  padding:0 clamp(20px,2.4vw,32px); border-left:1px solid var(--line);
  background:var(--terra); color:#fff; font-weight:600; font-size:14.5px;
  transition:background .3s var(--ease);
}
.hdr__cta:hover{ background:var(--terra-2); }
.hdr__cta .arrow{ transition:transform .3s var(--ease); }
.hdr__cta:hover .arrow{ transform:translateX(4px); }

/* ---------- Megamenu (pannello attaccato all'header, niente popup) ---------- */
.mega{
  position:absolute; top:100%; left:0; right:0;
  background:var(--paper); border-bottom:1px solid var(--line);
  box-shadow:0 46px 80px -44px rgba(40,33,26,.45);
  opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none;
  transition:opacity .28s var(--ease), transform .32s var(--ease), visibility 0s linear .28s;
}
.mega::before{ content:""; position:absolute; top:-4px; left:0; right:0; height:4px; } /* ponte hover */
.has-mega:hover .mega, .has-mega:focus-within .mega{
  opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:0s;
}
.mega__inner{
  max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:230px 1fr 350px;
}
.mega__label{ padding:36px 28px 36px 0; border-right:1px solid var(--line); }
.mega__label .eyebrow{ display:block; }
.mega__label p{ margin-top:12px; font-size:13.5px; color:var(--muted); max-width:20ch; }
.mega__links{ padding:20px clamp(20px,2.6vw,44px); display:flex; flex-direction:column; justify-content:center; }
.mega-link{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:13px 4px; border-bottom:1px solid var(--line);
}
.mega-link:last-child{ border-bottom:none; }
.mega-link .t b{ font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink);
  display:block; letter-spacing:-.01em; transition:color .25s var(--ease); }
.mega-link .t span{ font-size:13.5px; color:var(--muted); }
.mega-link .arrow{ flex:none; color:var(--terra-2); opacity:0; transform:translateX(-8px); transition:opacity .3s var(--ease), transform .3s var(--ease); }
.mega-link:hover .t b{ color:var(--terra-2); }
.mega-link:hover .arrow{ opacity:1; transform:none; }
.mega-link--all .t b{ font-family:var(--font-mono); font-weight:500; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--terra-2); }
.mega__feat{ border-left:1px solid var(--line); padding:26px 0 26px clamp(20px,2.6vw,36px); display:flex; }
.mega-card{ position:relative; width:100%; min-height:220px; border-radius:var(--radius); overflow:hidden; display:flex; align-items:flex-end; }
.mega-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.mega-card::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,19,15,.05) 20%, rgba(22,19,15,.55) 60%, rgba(22,19,15,.92) 100%); }
.mega-card:hover img{ transform:scale(1.06); }
.mega-card__body{ position:relative; z-index:2; padding:20px; color:#fff; }
.mega-card__tag{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  background:var(--terra); color:#fff; padding:4px 10px; border-radius:100px; }
.mega-card__body b{ font-family:var(--font-display); font-weight:800; font-size:22px; display:block; margin-top:12px; }
.mega-card__body span{ font-size:13px; color:rgba(255,255,255,.8); }

.nav-toggle{ display:none; }

@media (max-width:960px){
  .hdr__nav{ display:none; }
  .nav-toggle{ display:flex; flex-direction:column; justify-content:center; gap:5px; padding:8px clamp(16px,3vw,24px); border-left:1px solid var(--line); }
  .nav-toggle span{ width:24px; height:2px; background:var(--ink); border-radius:2px; }
  .hdr__cta{ margin-left:auto; }
  .hdr__cta .arrow{ display:none; } /* nella barra stretta l'svg si comprime a pochi px */
}

/* =====================================================================
   HERO - editoriale split
   ===================================================================== */
.hero{ position:relative; min-height:100dvh; display:grid; grid-template-columns:1.05fr .95fr; }
.hero__left{
  display:flex; flex-direction:column; justify-content:center;
  padding:140px var(--gutter) 72px;
}
.hero__eyebrow{ margin-bottom:22px; }
.hero__title{ font-size:clamp(40px,5.6vw,84px); }
.hero__title .line-mask{ display:block; overflow:hidden; padding-bottom:.05em; }
.hero__title .line-in{ display:block; }
.hero__sub{ margin-top:24px; max-width:46ch; }
.hero__cta{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
.hero__stats{ margin-top:56px; display:flex; gap:clamp(24px,4vw,52px); border-top:1px solid var(--line); padding-top:26px; }
.stat__n{ font-family:var(--font-display); font-weight:800; font-size:clamp(28px,3vw,38px); color:var(--terra); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat__n small{ font-size:.55em; font-weight:700; }
.stat__l{ font-size:13.5px; color:var(--muted); margin-top:8px; max-width:16ch; }

.hero__panel{ position:relative; overflow:hidden; }
.hero__panel .parallax{ position:absolute; inset:-14% 0 -14% 0; will-change:transform; }
.hero__panel .parallax img{ width:100%; height:100%; object-fit:cover; }
.hero__panel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(27,26,24,.12), rgba(190,74,43,.20));
  mix-blend-mode:multiply;
}
.hero__panel::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, var(--paper) 0%, rgba(247,244,239,0) 12%);
}

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; }
  .hero__panel{ order:-1; min-height:46vh; }
  .hero__panel::before{ background:linear-gradient(0deg, var(--paper) 0%, rgba(247,244,239,0) 22%); }
  .hero__left{ padding:40px var(--gutter) 64px; }
  .hero__stats{ flex-wrap:wrap; gap:24px; }
}

/* =====================================================================
   SEZIONE 2 - Posizionamento (manifesto)
   ===================================================================== */
.manifesto{ padding:clamp(96px,15vh,190px) 0; }
.manifesto__text{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(27px,3.9vw,52px); line-height:1.2; letter-spacing:-.02em;
  color:var(--ink); margin-top:30px; max-width:16em;
}
.manifesto__text .word.accent{ color:var(--terra); }
.manifesto__foot{
  margin-top:52px; max-width:16em;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:24px;
}
.manifesto__foot strong{ color:var(--ink); font-weight:600; }

/* =====================================================================
   Section head (riutilizzabile)
   ===================================================================== */
.section{ padding:var(--section-py) 0; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:52px; }
.sec-head__title{ margin-top:16px; }
.sec-head h2{ font-size:clamp(30px,4vw,56px); max-width:16ch; }
.sec-head p{ max-width:38ch; }

/* =====================================================================
   SEZIONE 3 - Pilastri (index editoriale a righe)
   ===================================================================== */
.pillars .rows{ border-top:1px solid var(--line); }
.prow{
  position:relative; display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:32px;
  padding:26px 10px; border-bottom:1px solid var(--line); overflow:hidden;
  transition:background .35s var(--ease), padding .35s var(--ease), color .35s var(--ease);
}
.prow .p-idx{ font-family:var(--font-mono); font-size:14px; color:var(--terra-2); width:40px; }
.prow h3{ font-size:clamp(26px,3.3vw,44px); transition:transform .35s var(--ease), color .35s var(--ease); }
.prow .p-desc{ color:var(--muted); font-size:16px; max-width:42ch; margin-top:6px; transition:color .35s var(--ease); }
.prow .p-arrow{ color:var(--terra-2); display:flex; transition:transform .35s var(--ease), color .35s var(--ease); }
/* Immagine dentro la riga, prima della freccia: sempre visibile, anche in hover. */
.prow .p-thumb{
  width:clamp(116px,12vw,168px); aspect-ratio:16/10; border-radius:12px; overflow:hidden;
  pointer-events:none; opacity:1; transform:none;
  box-shadow:0 18px 34px -22px rgba(40,33,26,.55);
  transition:opacity .3s var(--ease), transform .45s var(--ease);
}
.prow .p-thumb img{ width:100%; height:100%; object-fit:cover; }
.prow:hover{ background:var(--ink); color:var(--sand); padding-left:28px; padding-right:28px; }
.prow:hover h3{ color:#fff; transform:translateX(6px); }
.prow:hover .p-desc{ color:rgba(255,255,255,.72); }
.prow:hover .p-idx{ color:var(--glow); }
.prow:hover .p-arrow{ color:var(--glow); transform:translateX(6px); }
.prow:hover .p-thumb{ transform:translateX(6px) scale(1.02); box-shadow:0 22px 40px -22px rgba(0,0,0,.6); }
@media (max-width:820px){
  .prow{ grid-template-columns:auto 1fr; gap:20px; padding:26px 6px; }
  .prow .p-arrow, .prow .p-thumb{ display:none; }
  .prow .p-desc{ grid-column:1 / -1; }
  .prow:hover{ padding-left:14px; padding-right:14px; }
}

/* =====================================================================
   SEZIONE 4 - Numeri & Impatto (isola scura)
   ===================================================================== */
.impact{ position:relative; overflow:hidden; background:var(--night); color:var(--sand); padding:clamp(90px,13vh,160px) 0; }
.impact__glow{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(80% 60% at 82% 12%, rgba(229,121,79,.26), transparent 55%),
    radial-gradient(70% 60% at 10% 96%, rgba(190,74,43,.20), transparent 55%);
}
.impact .container{ position:relative; z-index:2; }
.impact .eyebrow{ color:var(--glow); }
.impact h2{ color:#fff; font-size:clamp(30px,4.4vw,60px); max-width:20ch; }
.impact__lead{ color:var(--sand-muted); max-width:52ch; margin-top:22px; font-size:clamp(16px,1.4vw,19px); }
.impact__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,44px);
  margin-top:clamp(48px,7vh,80px); border-top:1px solid var(--line-dark); padding-top:44px; }
.metric .num{ font-family:var(--font-display); font-weight:800; font-size:clamp(42px,5.6vw,84px);
  color:#fff; line-height:.95; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.metric .num .u{ color:var(--glow); }
.metric .lbl{ color:var(--sand-muted); margin-top:14px; font-size:15px; max-width:20ch; }
@media (max-width:820px){ .impact__grid{ grid-template-columns:1fr 1fr; gap:32px 24px; } }

/* =====================================================================
   SEZIONE 5 - Prodotto in evidenza (Eleweb) - feature split
   ===================================================================== */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); align-items:center; }
.feature__media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3.2; }
.feature__media .parallax{ position:absolute; inset:-12% 0; }
.feature__media img{ width:100%; height:100%; object-fit:cover; }
.feature__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(150deg, rgba(190,74,43,.18), rgba(22,19,15,.25)); }
.feature__badge{ position:absolute; z-index:3; left:22px; bottom:22px; background:rgba(22,19,15,.6);
  backdrop-filter:blur(8px); color:#fff; border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:14px 18px; }
.feature__badge b{ font-family:var(--font-display); font-size:22px; display:block; }
.feature__badge span{ font-size:12.5px; color:rgba(255,255,255,.75); }
.feature__body h2{ font-size:clamp(30px,3.6vw,50px); margin-top:14px; }
.feature__body .lead{ margin-top:20px; }
.feature-list{ margin-top:28px; display:grid; gap:14px; }
.feature-list li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--graphite); }
.feature-list li svg{ flex:none; margin-top:3px; stroke:var(--terra); }
.feature__cta{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }
.feature__body{ position:relative; }
.feature__body > *{ position:relative; z-index:1; }
.feature__watermark{ position:absolute; z-index:0; top:-24px; right:-8px; font-family:var(--font-display);
  font-weight:900; font-size:clamp(96px,13vw,168px); line-height:.8; color:var(--terra); opacity:.07;
  letter-spacing:-.05em; pointer-events:none; }
.feature__body .line-mask{ display:block; overflow:hidden; padding-bottom:.06em; }
.feature__body .line-in{ display:block; }
.feature__stat{ position:absolute; z-index:3; right:20px; top:20px; background:rgba(247,244,239,.86);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.5);
  border-radius:14px; padding:13px 17px; box-shadow:0 22px 44px -26px rgba(0,0,0,.45); }
.feature__stat b{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink); display:block; }
.feature__stat span{ font-size:11.5px; color:var(--muted); }
@media (max-width:820px){ .feature{ grid-template-columns:1fr; } .feature__media{ order:-1; } }

/* line-mask generico (riutilizzabile ovunque) */
.line-mask{ display:block; overflow:hidden; padding-bottom:.06em; }
.line-in{ display:block; }

/* =====================================================================
   SEZIONE 5 (v2) - Eleweb: banner immersivo + card che scavalca
   ===================================================================== */
.eleweb__banner{ position:relative; height:clamp(340px,50vh,540px); border-radius:var(--radius-lg); overflow:hidden; }
.eleweb__banner .parallax{ position:absolute; inset:-12% 0; }
.eleweb__banner .parallax img{ width:100%; height:100%; object-fit:cover; }
.eleweb__banner::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(22,19,15,.5), rgba(190,74,43,.28) 70%, transparent); }
.eleweb__wm{ position:absolute; z-index:2; left:clamp(20px,3vw,44px); bottom:clamp(6px,1vw,18px);
  font-family:var(--font-display); font-weight:900; font-size:clamp(72px,15vw,190px); line-height:.8;
  color:rgba(255,255,255,.14); letter-spacing:-.05em; pointer-events:none; }
.eleweb__banner .feature__stat{ background:rgba(22,19,15,.42); border-color:rgba(255,255,255,.2); }
.eleweb__banner .feature__stat b{ color:#fff; }
.eleweb__banner .feature__stat span{ color:rgba(255,255,255,.75); }

.eleweb__card{ position:relative; z-index:3; margin:clamp(-150px,-14vw,-90px) auto 0; width:min(1160px,94%);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:0 60px 120px -55px rgba(40,33,26,.55); padding:clamp(30px,4vw,58px); }
.eleweb__head{ position:relative; }
.eleweb__head h2{ font-size:clamp(30px,4vw,58px); margin-top:16px; }
.eleweb__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,60px); margin-top:36px; align-items:start; }
.eleweb__intro .lead{ margin:0; }
.eleweb__intro .feature__cta{ margin-top:30px; }
.eleweb__list{ display:grid; gap:0; margin:0; }
.eleweb__list li{ display:flex; gap:14px; align-items:flex-start; font-size:15.5px; color:var(--graphite);
  padding:16px 0; border-top:1px solid var(--line); }
.eleweb__list li:first-child{ border-top:none; padding-top:0; }
.eleweb__list li svg{ flex:none; margin-top:2px; stroke:var(--terra); }
@media (max-width:820px){
  .eleweb__cols{ grid-template-columns:1fr; gap:28px; }
  .eleweb__card{ margin-top:-70px; }
}

/* =====================================================================
   SEZIONE 6 - Progetti di ricerca: griglia editoriale asimmetrica
   Riga 1: card lead larga + una media. Riga 2: tre card.
   Griglia a 6 colonne, la lead ne occupa 4: cambiando gli span si ricompone
   senza toccare il markup.
   ===================================================================== */
.research .sec-head p .link-arrow{ margin-top:14px; }
.pgrid{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(14px,1.6vw,22px); margin-top:12px; }
.pcard{ position:relative; grid-column:span 2; min-height:300px; display:flex; overflow:hidden;
  border-radius:var(--radius-lg); background:var(--night); color:#fff; text-decoration:none;
  box-shadow:0 1px 0 rgba(40,33,26,0); transition:box-shadow .4s var(--ease), transform .4s var(--ease); }
.pcard--lead{ grid-column:span 4; min-height:clamp(360px,42vh,460px); }
.pcard:hover{ transform:translateY(-6px); box-shadow:0 44px 80px -44px rgba(22,19,15,.7); }

.pcard__media{ position:absolute; inset:0; }
.pcard__media img{ width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease), filter .6s var(--ease); }
.pcard:hover .pcard__media img{ transform:scale(1.06); }
/* velo: leggibilita del testo in basso su qualsiasi foto */
.pcard__media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,19,15,.05) 10%, rgba(22,19,15,.48) 52%, rgba(22,19,15,.93) 100%); }

.pcard__body{ position:relative; z-index:2; align-self:flex-end; width:100%;
  padding:clamp(20px,2.2vw,30px); display:flex; flex-direction:column; }
.pcard__meta{ display:flex; align-items:center; gap:12px; }
.pcard__idx{ font-family:var(--font-mono); font-size:12px; color:rgba(255,255,255,.72); }
.pcard__tag{ font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:#fff; background:var(--terra); padding:5px 11px; border-radius:100px; }
.pcard h3{ color:#fff; font-size:clamp(22px,2vw,30px); margin-top:14px; }
.pcard--lead h3{ font-size:clamp(30px,3.4vw,46px); }
.pcard p{ color:rgba(255,255,255,.84); font-size:14.5px; margin-top:10px; max-width:44ch; }
.pcard--lead p{ font-size:clamp(15px,1.2vw,17px); max-width:48ch; }
.pcard .link-arrow{ color:#fff; margin-top:18px; }
.pcard:hover .link-arrow .arrow{ transform:translateX(7px); }

@media (max-width:1000px){
  .pgrid{ grid-template-columns:repeat(4,1fr); }
  .pcard, .pcard--lead{ grid-column:span 2; }
  .pcard--lead{ grid-column:1 / -1; }
}
@media (max-width:620px){
  .pgrid{ grid-template-columns:1fr; }
  .pcard, .pcard--lead{ grid-column:1 / -1; min-height:280px; }
}

/* =====================================================================
   SEZIONE 7 - Certificazioni (trust band)
   ===================================================================== */
.certs{ background:var(--paper-2); }
/* Griglia a 6 colonne: ogni card ne occupa 2, quindi 3 per riga.
   Le quantity query sotto ricompongono l'ultima riga in base a QUANTE card ci
   sono, cosi' aggiungerne una e' solo un blocco <article> in piu' nell'HTML:
   4 -> 2+2, 5 -> 3+2, 7 -> 3+3+1 centrata, 8 -> 3+3+2 centrata. */
.certs__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:20px; margin-top:8px; }
.certs__grid > .cert{ grid-column:span 2; }
/* esattamente 2 card */
.certs__grid:has(> .cert:nth-child(2)):not(:has(> .cert:nth-child(3))) > .cert{ grid-column:span 3; }
/* esattamente 4 card -> 2 + 2 */
.certs__grid:has(> .cert:nth-child(4)):not(:has(> .cert:nth-child(5))) > .cert{ grid-column:span 3; }
/* esattamente 5 card -> 3 + 2 (le ultime due piu' larghe) */
.certs__grid:has(> .cert:nth-child(5)):not(:has(> .cert:nth-child(6))) > .cert:nth-child(n+4){ grid-column:span 3; }
/* 7 card -> 3 + 3 + 1 centrata */
.certs__grid:has(> .cert:nth-child(7)):not(:has(> .cert:nth-child(8))) > .cert:nth-child(7){ grid-column:3 / span 2; }
/* 8 card -> 3 + 3 + 2 centrate */
.certs__grid:has(> .cert:nth-child(8)):not(:has(> .cert:nth-child(9))) > .cert:nth-child(7){ grid-column:2 / span 2; }
.cert{ position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 30px 30px;
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); }
.cert:hover{ transform:translateY(-8px); border-color:var(--ink); box-shadow:0 34px 66px -38px rgba(40,33,26,.5); }
.cert__num{ position:absolute; top:24px; right:28px; font-family:var(--font-mono); font-size:13px; color:var(--muted); }
.cert__icon{ width:56px; height:56px; border-radius:15px; background:var(--terra-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:24px; transition:background .45s var(--ease); }
.cert__icon svg{ stroke:var(--terra-2); transition:stroke .45s var(--ease); }
.cert:hover .cert__icon{ background:var(--terra); }
.cert:hover .cert__icon svg{ stroke:#fff; }
.cert__std{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; color:var(--terra-2); }
.cert h3{ font-size:21px; margin-top:8px; }
.cert p{ color:var(--muted); font-size:14.5px; margin-top:10px; }
.certs__note{ margin-top:26px; font-size:14px; color:var(--muted); }
.cert__dl{ display:flex; flex-direction:column; gap:8px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.cert__dl a{ display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em;
  padding:8px 15px; border:1px solid var(--line); border-radius:100px;
  color:var(--graphite); background:var(--paper);
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease); }
.cert__dl a svg{ flex:none; stroke:var(--terra-2); transition:stroke .3s var(--ease); }
.cert__dl a:hover{ border-color:var(--terra); background:var(--terra); color:#fff; }
.cert__dl a:hover svg{ stroke:#fff; }

/* ---------- Politiche aziendali + whistleblowing ----------
   Blocco a monte della griglia delle certificazioni, senza card ne' box: testo
   a sinistra, i documenti come elenco scansionabile a destra, whistleblowing
   come riga d'azione a piena larghezza. Separatori a filo, niente contenitori. */
.policies{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(16px,1.6vw,20px) clamp(26px,3.4vw,54px);
  padding-top:clamp(18px,1.8vw,24px); margin-bottom:clamp(20px,2.6vw,30px);
  border-top:1px solid var(--line); }
.policies__intro h3{ font-size:clamp(19px,1.55vw,23px); margin-top:7px; }
.policies__intro p{ color:var(--muted); font-size:14.5px; margin-top:11px; max-width:48ch; }
/* La nota sta con i documenti che descrive, non con il titolo: cosi' le due
   colonne restano di altezza simile e il blocco non si allunga. */
.policies__note{ font-size:12.5px; color:var(--muted); margin-top:14px; }
.policies__note b{ color:var(--graphite); font-weight:600; }
.pdf-link{ color:var(--terra-2); font-weight:500;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:rgba(166,62,34,.42);
  transition:color .3s var(--ease), text-decoration-color .3s var(--ease); }
.pdf-link:hover{ color:var(--terra); text-decoration-color:var(--terra); }

/* Documenti come chip: si impaginano su 2-3 righe invece di 6, per tenere il
   blocco il piu' basso possibile. Stessa forma dei pill di .cert__dl. */
.policies__files{ align-self:start; }
.policies__docs{ list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px; }
.policies__doc{ display:inline-flex; align-items:center; gap:8px;
  padding:8px 15px; border:1px solid var(--line); border-radius:100px;
  background:var(--paper); color:var(--graphite); font-size:13.5px; line-height:1.25;
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease); }
.policies__doc svg{ flex:none; stroke:var(--terra-2); transition:stroke .3s var(--ease); }
.policies__doc:hover{ border-color:var(--terra); background:var(--terra); color:#fff; }
.policies__doc:hover svg{ stroke:#fff; }

/* Whistleblowing: riga d'azione, non piu' card nera. */
.policies__wb{ grid-column:1/-1; display:flex; align-items:center; gap:13px;
  padding-top:16px; border-top:1px solid var(--line); color:var(--graphite); }
.policies__wb .wb__ico{ flex:none; width:34px; height:34px; border-radius:10px;
  background:rgba(166,62,34,.10); display:flex; align-items:center; justify-content:center;
  transition:background .35s var(--ease); }
.policies__wb .wb__ico svg{ stroke:var(--terra-2); }
.policies__wb .wb__txt{ min-width:0; }
/* kicker in linea col titolo: una riga in meno di altezza */
.policies__wb .wb__k{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; color:var(--terra-2); margin-right:11px; }
.policies__wb b{ font-family:var(--font-display); font-weight:800; font-size:16px; letter-spacing:-.01em; }
.policies__wb p{ font-size:13px; color:var(--muted); margin-top:2px; }
.policies__wb .wb__go{ margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--terra-2); }
.policies__wb .wb__go svg{ stroke:var(--terra-2); transition:transform .35s var(--ease); }
.policies__wb:hover .wb__ico{ background:rgba(166,62,34,.18); }
.policies__wb:hover .wb__go svg{ transform:translateX(5px); }
@media (max-width:900px){
  .policies{ grid-template-columns:1fr; }
  .policies__doc{ padding:10px 16px; }
  /* icona + testo sulla prima riga, CTA a capo allineata al testo */
  .policies__wb{ flex-wrap:wrap; align-items:flex-start; }
  .policies__wb .wb__txt{ flex:1 1 55%; }
  /* padding e non margin: con flex-basis 100% il margin sforerebbe la riga */
  .policies__wb .wb__go{ flex:0 0 100%; margin-left:0; padding-left:47px; margin-top:12px; }
}

/* tablet: 2 per riga, l'ultima riga si arrangia da sola */
@media (max-width:1080px){
  .certs__grid{ grid-template-columns:repeat(2,1fr); }
  .certs__grid > .cert,
  .certs__grid:has(> .cert:nth-child(5)):not(:has(> .cert:nth-child(6))) > .cert:nth-child(n+4),
  .certs__grid:has(> .cert:nth-child(4)):not(:has(> .cert:nth-child(5))) > .cert,
  .certs__grid:has(> .cert:nth-child(2)):not(:has(> .cert:nth-child(3))) > .cert,
  .certs__grid:has(> .cert:nth-child(7)):not(:has(> .cert:nth-child(8))) > .cert:nth-child(7),
  .certs__grid:has(> .cert:nth-child(8)):not(:has(> .cert:nth-child(9))) > .cert:nth-child(7){ grid-column:auto; }
}
@media (max-width:820px){ .certs__grid{ grid-template-columns:1fr; } }

/* =====================================================================
   SEZIONE 8 - Clienti & Partner (wall)
   ===================================================================== */
.clients__wall{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; margin-top:8px; }
@media (max-width:820px){ .clients__wall{ grid-template-columns:repeat(2,1fr); } }
.client{ position:relative; overflow:hidden; background:var(--paper); padding:38px 24px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  min-height:124px; text-align:center; }
.client::before{ content:""; position:absolute; inset:0; z-index:1; background:var(--terra);
  transform:translateY(101%); transition:transform .5s var(--ease); }
.client:hover::before{ transform:translateY(0); }
.client__t{ position:relative; z-index:2; font-family:var(--font-display); font-weight:600; font-size:19px;
  color:var(--graphite); letter-spacing:-.01em; transition:color .4s var(--ease); }
.client:hover .client__t{ color:#fff; }
/* slot secondario testuale: dettaglio/etichetta sotto la voce principale */
.client__sub{ position:relative; z-index:2; font-family:var(--font-mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); transition:color .4s var(--ease); }
.client:hover .client__sub{ color:rgba(255,255,255,.8); }
/* slot con immagine: i loghi hanno proporzioni molto diverse, box fisso + contain
   come .rs1-logo. L'immagine resta intatta anche al hover (niente silhouette:
   qui possono essere foto, non solo loghi mono). */
.client__logo{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center;
  width:100%; max-width:174px; height:54px; }
.client__logo--sub{ height:32px; max-width:134px; }
.client__logo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }

/* =====================================================================
   SEZIONE 9 - CTA finale (banda terracotta)
   ===================================================================== */
.cta-band{ background:linear-gradient(135deg, var(--terra) 0%, var(--terra-2) 100%); color:#fff; position:relative; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 90% at 88% 10%, rgba(255,255,255,.14), transparent 60%); }
.cta-band .container{ position:relative; z-index:2; }
.cta-band h2{ color:#fff; font-size:clamp(32px,4.6vw,64px); max-width:18ch; }
.cta-band__sub{ margin-top:20px; color:rgba(255,255,255,.86); max-width:46ch; font-size:clamp(16px,1.4vw,19px); }
.cta-band .btn-white{ background:#fff; color:var(--terra-2); margin-top:34px; }
.cta-band .btn-white:hover{ background:var(--paper); }
.cta-band__contacts{ margin-top:52px; display:flex; gap:44px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.25); padding-top:30px; }
.cc__l{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.cc__v{ font-family:var(--font-display); font-weight:600; font-size:clamp(17px,1.6vw,22px); margin-top:6px; }
.cc__v a{ color:#fff; }

/* CTA "Lavora con noi" sotto il modulo contatti */
.jobs-cta{ grid-column:2; display:flex; align-items:center; gap:18px; margin-top:20px; padding:20px 22px;
  border:1px solid var(--line); border-left:3px solid var(--terra); border-radius:var(--radius-lg);
  background:var(--paper); color:var(--ink);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease); }
.jobs-cta:hover{ border-color:var(--ink); border-left-color:var(--terra); transform:translateX(3px); }
.jobs-cta__ico{ flex:none; width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:var(--terra-soft); color:var(--terra-2); }
.jobs-cta__t{ display:flex; flex-direction:column; gap:3px; }
.jobs-cta__t b{ font-family:var(--font-display); font-size:16.5px; }
.jobs-cta__t span{ font-size:14px; color:var(--muted); }
.jobs-cta__go{ margin-left:auto; color:var(--terra-2); display:flex; }
.jobs-cta:hover .jobs-cta__go .arrow{ transform:translateX(5px); }
@media (max-width:900px){ .jobs-cta{ grid-column:1; } }
@media (max-width:560px){ .jobs-cta{ flex-wrap:wrap; } .jobs-cta__go{ margin-left:0; } }

/* =====================================================================
   FOOTER - split panel: brand su grigio chiaro + griglia a celle
   ===================================================================== */
/* Footer compatto (round 5): le 4 celle stanno su UNA riga invece di 2x2, i
   padding sono ridotti e i font alzati. Le voci Scrivici/Chiamaci non usano piu'
   il font display grande: erano il blocco piu' pesante del footer. */
/* position/z-index: il footer sta fuori da .mx-body, quindi senza livello proprio
   l'hero sticky (.mx-hero, z-index:1) gli finirebbe sopra a fondo pagina. */
.site-footer{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1.9fr; gap:1px;
  background:var(--line); border-top:1px solid var(--line); }
.ft__brand{ background:var(--paper-2); padding:clamp(24px,2.6vw,36px);
  display:flex; flex-direction:column; justify-content:space-between; gap:clamp(18px,2.4vh,26px); }
.ft__brand img{ height:42px; width:auto; align-self:flex-start; }
.ft__manifesto{ font-family:var(--font-display); font-weight:700; font-size:clamp(18px,1.5vw,23px);
  line-height:1.3; letter-spacing:-.015em; color:var(--ink); max-width:22ch; }
.ft__manifesto em{ font-style:normal; color:var(--terra); }
.ft__grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:auto auto; gap:1px; }
.ft__cell{ background:var(--paper); padding:clamp(20px,2.2vw,30px); }
.ft__cell h4{ font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--terra-2); margin-bottom:14px; }
.ft__cell ul{ display:grid; gap:9px; }
.ft__cell ul a{ font-size:16px; color:var(--graphite); transition:color .2s var(--ease), padding-left .3s var(--ease); }
.ft__cell ul a:hover{ color:var(--terra-2); padding-left:8px; }
/* contatti: stesso peso delle voci di menu, non piu' un titolo */
.ft__cell .big{ font-family:var(--font-body); font-weight:600; font-size:16px; color:var(--graphite); word-break:break-word; }
.ft__cell .big a{ transition:color .2s var(--ease); }
.ft__cell .big a:hover{ color:var(--terra-2); }
.ft__cell p{ font-size:14px; color:var(--muted); margin-top:7px; }
.ft__legal{ grid-column:1 / -1; background:var(--paper-2); display:flex; justify-content:space-between;
  align-items:center; gap:10px 16px; flex-wrap:wrap; padding:14px clamp(20px,2.2vw,30px);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; color:var(--muted); }
.ft__legal a{ color:var(--muted); transition:color .2s var(--ease); }
.ft__legal a:hover{ color:var(--ink); }
@media (max-width:1100px){ .ft__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){
  .site-footer{ grid-template-columns:1fr; }
  .ft__brand{ padding:clamp(24px,5vw,36px); }
}
@media (max-width:560px){
  .ft__grid{ grid-template-columns:1fr; grid-template-rows:none; }
}
@media (max-width:820px){ .cta-band__contacts{ gap:28px; } }

/* =====================================================================
   BANNER (home) - fotografico duotone, riusabile per comunicazioni
   ===================================================================== */
.banner{ position:relative; overflow:hidden; min-height:clamp(420px,58vh,600px); display:flex; align-items:center; }
.banner__bg{ position:absolute; inset:0; }
.banner__bg .parallax{ position:absolute; inset:-10% 0; }
.banner__bg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); }
.banner__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(22,19,15,.92) 8%, rgba(166,62,34,.72) 55%, rgba(190,74,43,.4) 100%); }
.banner__in{ position:relative; z-index:2; max-width:var(--container); margin:0 auto; width:100%;
  padding:clamp(60px,9vh,90px) var(--gutter); }
.banner__badge{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:#fff;
  border:1px solid rgba(255,255,255,.4); border-radius:100px; padding:8px 16px; }
.banner__badge i{ font-style:normal; width:7px; height:7px; border-radius:50%; background:var(--glow); }
.banner h2{ color:#fff; font-size:clamp(38px,5.6vw,84px); line-height:.98; letter-spacing:-.03em;
  margin-top:22px; max-width:13em; }
.banner h2 em{ font-style:normal; color:var(--glow); }
.banner h2 .line-mask{ display:block; overflow:hidden; padding-bottom:.06em; }
.banner__lead{ color:rgba(255,255,255,.85); font-size:clamp(15px,1.4vw,19px); margin-top:18px; max-width:46ch; }
.banner .btn{ margin-top:30px; background:#fff; color:var(--terra-2); }
.banner .btn:hover{ background:var(--paper); }

/* =====================================================================
   PAGINE INTERNE - hero di pagina
   ===================================================================== */
.page-hero{ padding:clamp(130px,18vh,196px) 0 var(--hero-pb); }
.page-hero__crumb{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:24px; }
.page-hero__crumb a{ color:var(--muted); } .page-hero__crumb b{ color:var(--terra-2); font-weight:500; }
.page-hero h1{ font-size:clamp(44px,7.4vw,108px); letter-spacing:-.03em; line-height:.98; }
.page-hero__lead{ margin-top:28px; max-width:62ch; font-size:clamp(17px,1.5vw,21px); color:var(--graphite); }
.page-hero__media{ margin-top:clamp(40px,6vh,64px); height:clamp(280px,46vh,520px); border-radius:var(--radius-lg); overflow:hidden; position:relative; }
.page-hero__media .parallax{ position:absolute; inset:-26% 0; }
.page-hero__media img{ width:100%; height:100%; object-fit:cover; }

/* Storia - anno sticky con scramble (Chi siamo) */
.storia__grid{ display:grid; grid-template-columns:.85fr 1fr; gap:clamp(30px,6vw,90px); }
.storia__left{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center; }
.storia__year{ font-family:var(--font-display); font-weight:900; font-size:clamp(72px,11vw,152px); color:var(--terra);
  line-height:.85; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.storia__kicker{ font-family:var(--font-mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-top:20px; min-height:1.3em; }
.storia__progress{ margin-top:36px; display:flex; align-items:center; gap:14px; }
.storia__step{ font-family:var(--font-mono); font-size:13px; color:var(--terra-2); }
.storia__total{ font-family:var(--font-mono); font-size:13px; color:var(--muted); }
.storia__bar{ position:relative; width:min(220px,42%); height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.storia__bar i{ position:absolute; inset:0; background:var(--terra); transform-origin:left; transform:scaleX(.25); }

.storia__right{ padding:16vh 0 18vh; display:grid; gap:clamp(30px,6vh,60px); }
.storia-block{ min-height:72vh; display:flex; flex-direction:column; justify-content:center; }
.storia-block__media{ position:relative; height:clamp(190px,28vh,300px); border-radius:var(--radius); overflow:hidden; }
.storia-block__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.storia-block__media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(140deg, rgba(190,74,43,.16), rgba(22,19,15,.24)); mix-blend-mode:multiply; }
.storia-block:hover .storia-block__media img{ transform:scale(1.05); }
.storia-block__n{ font-family:var(--font-mono); font-size:13px; color:var(--terra-2); margin-top:26px; }
.storia-block h3{ font-size:clamp(24px,2.6vw,36px); margin-top:10px; }
.storia-block p{ color:var(--muted); margin-top:14px; max-width:54ch; font-size:16.5px; }
.storia-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.storia-chips span{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em;
  padding:6px 13px; border:1px solid var(--line); border-radius:100px; color:var(--graphite); background:var(--paper); }
@media (max-width:860px){
  .storia__grid{ grid-template-columns:1fr; }
  .storia__left{ position:relative; height:auto; padding:20px 0 8px; }
  .storia__right{ padding:0 0 20px; }
  .storia-block{ min-height:auto; padding:26px 0; }
}

/* =====================================================================
   AMBITI - indice sticky (scrollspy) + sezioni settore
   ===================================================================== */
.ambiti__grid{ display:grid; grid-template-columns:280px 1fr; gap:clamp(30px,5vw,84px); align-items:start; }
.spy-nav{ position:sticky; top:104px; display:flex; flex-direction:column; border-top:1px solid var(--line); }
.spy-nav a{ position:relative; display:flex; align-items:baseline; gap:12px; padding:13px 4px 13px 0;
  border-bottom:1px solid var(--line); font-size:14.5px; font-weight:500; color:var(--muted);
  transition:color .3s var(--ease), padding-left .35s var(--ease); }
.spy-nav a i{ font-style:normal; font-family:var(--font-mono); font-size:11px; color:var(--muted); transition:color .3s var(--ease); }
.spy-nav a:hover{ color:var(--ink); }
.spy-nav a.active{ color:var(--terra-2); padding-left:16px; }
.spy-nav a.active i{ color:var(--terra-2); }
.spy-nav a.active::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:8px; height:2px; background:var(--terra); }

.sector{ padding:clamp(34px,6vh,64px) 0; border-top:1px solid var(--line); }
.sector:first-child{ border-top:none; padding-top:6px; }
.sector__kicker{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--terra-2); }
.sector h3{ font-size:clamp(26px,3vw,42px); margin-top:12px; }
.sector__body{ margin-top:16px; color:var(--graphite); max-width:62ch; font-size:16.5px; }
.sector__body p + p{ margin-top:12px; }
.sector__media{ position:relative; margin-top:28px; height:clamp(200px,32vh,330px); border-radius:var(--radius); overflow:hidden; }
.sector__media .parallax{ position:absolute; inset:-16% 0; }
.sector__media img{ width:100%; height:100%; object-fit:cover; }
.sector__media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(140deg, rgba(190,74,43,.14), rgba(22,19,15,.2)); mix-blend-mode:multiply; }
.sector .link-arrow{ margin-top:22px; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.chips span{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em;
  padding:6px 13px; border:1px solid var(--line); border-radius:100px; color:var(--graphite); background:var(--paper);
  transition:border-color .3s var(--ease), color .3s var(--ease); }
.chips span:hover{ border-color:var(--terra); color:var(--terra-2); }

@media (max-width:900px){
  .ambiti__grid{ grid-template-columns:1fr; }
  .spy-nav{ position:relative; top:auto; flex-direction:row; flex-wrap:wrap; gap:2px 18px; border-top:none; margin-bottom:8px; }
  .spy-nav a{ border-bottom:none; padding:6px 0; }
  .spy-nav a.active{ padding-left:0; }
  .spy-nav a.active::before{ display:none; }
}

/* Variante hero centrato (pagine indice/catalogo) */
.page-hero--center{ text-align:center; }
.page-hero--center h1{ margin-inline:auto; }
.page-hero--center .page-hero__lead{ margin-inline:auto; }

/* Pill di settore (hero pagina prodotto) */
.sector-pill{ display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--terra-2); border:1px solid var(--terra); border-radius:100px;
  padding:5px 13px; margin-bottom:18px; }

/* =====================================================================
   PRODOTTI - pannelli espandibili full-bleed, pari gerarchia
   ===================================================================== */
/* Disposizione in righe calcolata in PHP da prologic_panel_rows(): max 4 pannelli
   per riga, numero minimo di righe, righe bilanciate decrescenti (5 -> 3+2,
   7 -> 4+3, 9 -> 3+3+3, 13 -> 4+3+3+3). Ogni riga e' un .expander__row, quindi qui
   il CSS non conta piu' i pannelli: le celle si dividono la riga in parti uguali e
   l'espansione in hover (flex 2.6) agisce solo sulla propria riga.
   Da 2 righe in su i pannelli si abbassano. */
.expander{ display:flex; flex-direction:column; gap:16px; --exp-h:clamp(540px,76vh,720px); }
.expander__row{ display:flex; gap:16px; }
.expander:has(> .expander__row:nth-child(2)){ --exp-h:clamp(360px,46vh,470px); }
.exp-panel{ position:relative; flex:1 1 0; min-width:0; height:var(--exp-h);
  overflow:hidden; border-radius:var(--radius-lg); background:var(--night);
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:flex .85s var(--ease); will-change:flex; }
.exp-panel:hover, .exp-panel.open, .exp-panel:focus-within{ flex:2.6; }
.exp-panel__bg{ position:absolute; inset:0; }
.exp-panel__bg img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(.7) contrast(1.03); transform:scale(1.01);
  transition:filter .8s var(--ease), transform 1.2s var(--ease); }
.exp-panel:hover .exp-panel__bg img, .exp-panel.open .exp-panel__bg img{ filter:grayscale(0); transform:scale(1.06); }
.exp-panel::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,19,15,.30) 0%, rgba(22,19,15,.06) 42%, rgba(22,19,15,.9) 100%); }
.exp-panel__top{ position:absolute; top:0; left:0; right:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between; padding:22px 24px; }
.exp-panel__num{ font-family:var(--font-mono); font-size:13px; color:var(--glow); }
.exp-panel__sector{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sand); border:1px solid rgba(255,255,255,.3); border-radius:100px; padding:5px 12px; white-space:nowrap; }
.exp-panel__content{ position:relative; z-index:2; padding:clamp(22px,2.8vw,40px); color:#fff; }
.exp-panel__content h2{ color:#fff; font-size:clamp(24px,2.8vw,42px); letter-spacing:-.02em; }
.exp-panel__more{ max-height:0; opacity:0; transform:translateY(16px); overflow:hidden;
  transition:max-height .85s var(--ease), opacity .55s var(--ease) .12s, transform .65s var(--ease) .12s; }
.exp-panel:hover .exp-panel__more, .exp-panel.open .exp-panel__more, .exp-panel:focus-within .exp-panel__more{
  max-height:360px; opacity:1; transform:none; }
.exp-panel__more p{ color:rgba(255,255,255,.85); font-size:15.5px; margin-top:14px; max-width:52ch; }
.exp-panel .chips{ margin-top:18px; }
.exp-panel .chips span{ border-color:rgba(255,255,255,.3); color:#fff; background:transparent; }
.exp-panel .chips span:hover{ border-color:var(--glow); color:var(--glow); }
.exp-panel .link-arrow{ margin-top:22px; color:var(--glow); }
@media (max-width:860px){
  /* in colonna le righe si sciolgono: un pannello sotto l'altro, altezza libera */
  .expander__row{ flex-direction:column; }
  .expander .exp-panel{ flex:none; flex-basis:auto; height:auto; min-height:300px; }
  .exp-panel__more{ max-height:none; opacity:1; transform:none; }
  .exp-panel__bg img{ filter:grayscale(0); }
}

.custom-band .btn-ghost-light{ margin-top:30px; }

/* =====================================================================
   ELEWEB - scheda prodotto
   ===================================================================== */

/* Hero prodotto: pannello scuro con screenshot reale */
.screenbox{ position:relative; margin-top:clamp(30px,6vh,56px); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--night); padding:clamp(26px,4.5vw,70px) clamp(26px,4.5vw,70px) 0; }
.screenbox::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(90% 70% at 80% 0%, rgba(229,121,79,.24), transparent 55%),
             radial-gradient(70% 60% at 8% 100%, rgba(190,74,43,.18), transparent 60%); }
.screenbox__frame{ position:relative; z-index:2; max-width:880px; margin:0 auto; }
.screenbox__frame img{ display:block; width:100%; border-radius:12px 12px 0 0;
  box-shadow:0 -24px 80px -24px rgba(0,0,0,.7); }
.screenbox__badge{ position:absolute; z-index:3; top:20px; right:20px; }

/* Showcase funzionalità: testo a sinistra, viewer screenshot sticky a destra */
.fshow{ display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(30px,5vw,72px); align-items:start; }
.fitem{ min-height:68vh; display:flex; flex-direction:column; justify-content:center; padding:24px 0; border-top:1px solid var(--line); }
.fitem:first-child{ border-top:none; }
.fitem__k{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--terra-2); }
.fitem h3{ font-size:clamp(24px,2.6vw,36px); margin-top:12px; max-width:18ch; }
.fitem p{ color:var(--graphite); font-size:16px; margin-top:14px; max-width:52ch; }
.fitem .chips{ margin-top:18px; }
.fitem__inline{ display:none; margin-top:24px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; }
.fitem__inline img{ width:100%; display:block; }
.fshow__viewer{ position:sticky; top:100px; height:calc(100vh - 132px); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--paper-2); border:1px solid var(--line); }
.fshow__viewer img{ position:absolute; left:50%; top:50%; max-width:calc(100% - 56px); max-height:calc(100% - 56px);
  transform:translate(-50%,-50%) scale(.95); opacity:0; border-radius:10px;
  box-shadow:0 34px 66px -34px rgba(40,33,26,.5);
  transition:opacity .5s var(--ease), transform .65s var(--ease); }
.fshow__viewer img.active{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.fshow__count{ position:absolute; z-index:2; bottom:16px; right:20px; font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.fshow__count b{ color:var(--terra-2); font-weight:500; }
@media (max-width:900px){
  .fshow{ grid-template-columns:1fr; }
  .fshow__viewer{ display:none; }
  .fitem{ min-height:auto; padding:34px 0; }
  .fitem__inline{ display:block; }
}

.why__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3.4vw,48px);
  margin-top:clamp(38px,6vh,60px); border-top:1px solid var(--line-dark); padding-top:42px; }
.why-item__k{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--glow); }
.why-item h3{ color:#fff; font-size:clamp(20px,2vw,25px); margin-top:14px; }
.why-item p{ color:var(--sand-muted); font-size:15px; margin-top:12px; max-width:38ch; }
@media (max-width:860px){ .why__grid{ grid-template-columns:1fr; gap:30px; } }

.refs__row{ display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--line); }
.ref{ padding:clamp(26px,3.4vh,42px) clamp(18px,2vw,30px); border-left:1px solid var(--line); }
.ref:first-child{ border-left:none; padding-left:0; }
.ref b{ display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(22px,2.6vw,38px); letter-spacing:-.02em; color:var(--ink); }
.ref span{ display:block; font-size:13.5px; color:var(--muted); margin-top:8px; }
.refs__note{ margin-top:24px; font-size:14.5px; color:var(--muted); max-width:64ch; }
@media (max-width:760px){ .refs__row{ grid-template-columns:1fr; } .ref{ border-left:none; border-top:1px solid var(--line); padding-left:0; } .ref:first-child{ border-top:none; } }

/* Gruppo (societa'): le tre societa' usano l'expander dei Prodotti (.exp-panel).
   Qui solo gli aggiustamenti: pannelli piu' bassi e menu ad ancora sopra. */
.expander.gruppo-exp{ --exp-h:clamp(420px,58vh,560px); margin-top:6px; }
.anchor-nav{ display:flex; flex-wrap:wrap; gap:10px; margin:4px 0 22px; }
.anchor-nav a{ display:inline-flex; align-items:center; gap:9px; padding:10px 18px; border-radius:100px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  font-family:var(--font-display); font-weight:600; font-size:14px;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease); }
.anchor-nav a .arrow{ color:var(--terra-2); transition:transform .3s var(--ease); }
.anchor-nav a:hover{ border-color:var(--ink); background:var(--ink); color:#fff; }
.anchor-nav a:hover .arrow{ color:var(--glow); transform:translateX(4px); }

/* Approfondimenti sotto la timeline: split immagine + testo, alternati */
.deepdive{ scroll-margin-top:96px; }
.deepdive--alt{ background:var(--paper-2); }
.deepdive .feature__media{ aspect-ratio:4/3.4; }
@media (max-width:820px){ .deepdive--alt .feature__media{ order:-1; } }

/* =====================================================================
   RICERCA V1 - "Archivio" : hero split + lista archivio filtrabile
   ===================================================================== */
.rs1-hero{ padding:clamp(130px,18vh,196px) 0 clamp(30px,5vh,56px); }
.rs1-hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,80px); align-items:end; }
.rs1-hero h1{ font-size:clamp(52px,8.6vw,132px); letter-spacing:-.035em; line-height:.92; }
.rs1-hero__side .lead{ max-width:44ch; }
.rs1-counts{ margin-top:30px; display:grid; grid-template-columns:repeat(3,auto); gap:clamp(18px,2.6vw,40px); justify-content:start;
  border-top:1px solid var(--line); padding-top:22px; }
.rs1-counts b{ font-family:var(--font-display); font-weight:800; font-size:clamp(26px,2.6vw,38px); color:var(--terra); display:block; line-height:1; }
.rs1-counts span{ font-size:12.5px; color:var(--muted); display:block; margin-top:6px; max-width:12ch; }
@media (max-width:860px){ .rs1-hero__grid{ grid-template-columns:1fr; } }

.rs1-filter{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; }
.rs1-filter .f{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; padding:9px 18px;
  border:1px solid var(--line); border-radius:100px; color:var(--graphite); cursor:pointer; background:var(--paper);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.rs1-filter .f i{ font-style:normal; color:var(--muted); margin-left:6px; font-size:11px; }
.rs1-filter .f:hover{ border-color:var(--ink); color:var(--ink); }
.rs1-filter .f.on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.rs1-filter .f.on i{ color:var(--glow); }

.rs1-list{ border-top:1px solid var(--line); }
.rs1-row{ position:relative; display:grid; grid-template-columns:56px 1.05fr 104px 1.5fr auto; align-items:center; gap:clamp(16px,2.6vw,40px);
  padding:26px 10px; border-bottom:1px solid var(--line);
  transition:background .35s var(--ease), padding .35s var(--ease), opacity .3s var(--ease); }
.rs1-row.hide{ display:none; }
.rs1-row .n{ font-family:var(--font-mono); font-size:13px; color:var(--terra-2); }
.rs1-row h3{ font-size:clamp(22px,2.4vw,34px); letter-spacing:-.02em; transition:color .35s var(--ease); }
.rs1-row .cat{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:block; margin-top:7px; transition:color .35s var(--ease); }
.rs1-row .cat em{ font-style:normal; color:var(--terra-2); }
a.rs1-row:hover .cat em{ color:rgba(255,255,255,.5); }
.rs1-row .d{ color:var(--muted); font-size:15px; max-width:52ch; transition:color .35s var(--ease); }
.rs1-row .rs1-logo{ width:104px; height:56px; display:flex; align-items:center; justify-content:center; }
/* i loghi hanno proporzioni molto diverse: box fisso + contain, mai deformati */
.rs1-row .rs1-logo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  transition:filter .35s var(--ease), opacity .35s var(--ease); }
/* segnaposto finche' il logo non e' disponibile */
.rs1-logo__ph{ font-family:var(--font-mono); font-size:13px; letter-spacing:.08em; color:var(--stone);
  border:1px dashed var(--line); border-radius:10px; padding:12px 14px; }
a.rs1-row:hover .rs1-logo img{ filter:brightness(0) invert(1); }
a.rs1-row:hover .rs1-logo__ph{ color:rgba(255,255,255,.5); border-color:rgba(255,255,255,.25); }

.rs1-row .end{ display:flex; align-items:center; gap:14px; justify-self:end; }
.rs1-row .go{ color:var(--terra-2); display:flex; transition:transform .35s var(--ease), color .35s var(--ease); }
a.rs1-row:hover{ background:var(--ink); padding-left:24px; padding-right:24px; }
a.rs1-row:hover h3{ color:#fff; }
a.rs1-row:hover .d{ color:rgba(255,255,255,.72); }
a.rs1-row:hover .cat{ color:var(--glow); }
a.rs1-row:hover .n{ color:var(--glow); }
a.rs1-row:hover .go{ color:var(--glow); transform:translateX(6px); }
@media (max-width:860px){
  .rs1-row{ grid-template-columns:40px 1fr; }
  .rs1-row .d{ grid-column:2; }
  .rs1-row .end{ grid-column:2; justify-self:start; }
  .rs1-row .rs1-logo{ grid-column:2; width:auto; height:44px; justify-content:flex-start; }
}

/* =====================================================================
   RICERCA V2 - "Bento scuro" : hero immersivo + mosaico
   ===================================================================== */
.rs2-top{ background:var(--night); color:var(--sand); position:relative; overflow:hidden; }
.rs2-top .impact__glow{ position:absolute; inset:0; }
.rs2-hero{ position:relative; z-index:2; padding:clamp(150px,20vh,220px) 0 clamp(40px,6vh,70px); text-align:center; }
.rs2-hero .eyebrow{ color:var(--glow); }
.rs2-hero h1{ color:#fff; font-size:clamp(46px,7.6vw,116px); letter-spacing:-.03em; line-height:.95; margin-top:18px; }
.rs2-hero h1 em.accent{ color:var(--glow); }
.rs2-hero__lead{ color:var(--sand-muted); max-width:60ch; margin:26px auto 0; font-size:clamp(16px,1.5vw,20px); }
.rs2-stats{ display:flex; justify-content:center; gap:clamp(26px,4vw,64px); margin-top:clamp(36px,6vh,58px);
  border-top:1px solid var(--line-dark); padding-top:30px; flex-wrap:wrap; }
.rs2-stats b{ font-family:var(--font-display); font-weight:800; font-size:clamp(30px,3.4vw,50px); color:#fff; display:block; line-height:1; }
.rs2-stats b .u{ color:var(--glow); }
.rs2-stats span{ font-size:13px; color:var(--sand-muted); display:block; margin-top:8px; }

.rs2-bento{ position:relative; z-index:2; padding:clamp(20px,4vh,40px) 0 clamp(80px,11vh,130px); }
.rs2-cell{ position:relative; overflow:hidden; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line-dark);
  display:flex; flex-direction:column; justify-content:flex-end; padding:22px;
  transition:border-color .35s var(--ease), transform .35s var(--ease); }
.rs2-cell--2x2{ grid-column:span 2; grid-row:span 2; }
.rs2-cell--2x1{ grid-column:span 2; }
.rs2-cell--1x2{ grid-row:span 2; }
.rs2-cell img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85;
  transition:transform .7s var(--ease), opacity .5s var(--ease); }
.rs2-cell--img::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,19,15,.06) 20%, rgba(22,19,15,.62) 66%, rgba(22,19,15,.94) 100%); }
.rs2-cell > .c{ position:relative; z-index:2; }
.rs2-cell h3{ color:#fff; font-size:clamp(19px,1.8vw,26px); letter-spacing:-.015em; }
.rs2-cell--2x2 h3{ font-size:clamp(28px,3vw,44px); }
.rs2-cell p{ color:var(--sand-muted); font-size:13.5px; margin-top:8px; max-width:44ch; }
.rs2-cell--2x2 p{ font-size:15px; color:rgba(255,255,255,.85); }
.rs2-meta{ display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.rs2-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.rs2-dot--ind{ background:#E5794F; }
.rs2-dot--agr{ background:#8FBF6B; }
.rs2-dot--env{ background:#6FA8DC; }
.rs2-cat{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--sand-muted); }
.rs2-badge{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.25); color:var(--sand); border-radius:100px; padding:3px 9px; }
.rs2-cell .go{ position:absolute; top:16px; right:16px; z-index:3; color:#fff; opacity:.75;
  width:34px; height:34px; border:1px solid rgba(255,255,255,.3); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); }
a.rs2-cell:hover{ border-color:rgba(229,121,79,.6); transform:translateY(-4px); }
a.rs2-cell:hover img{ transform:scale(1.05); opacity:1; }
a.rs2-cell:hover .go{ opacity:1; background:var(--terra); border-color:var(--terra); }
.rs2-legend{ display:flex; gap:22px; flex-wrap:wrap; margin-bottom:22px; align-items:center; }
.rs2-legend span{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--sand-muted); }

/* =====================================================================
   MARCEL - microsito progetto (tema verde scoped)
   ===================================================================== */
/* L'accento della pagina progetto arriva dal color picker ACF: inc/setup.php stampa
   in wp_head un body{--terra:...} con le tinte derivate. Qui niente palette fisse. */
.mx-hero{ position:sticky; top:0; z-index:1; min-height:100dvh; display:flex; align-items:flex-end; overflow:hidden; background:var(--night); }
/* tutto il contenuto dopo la hero scorre sopra di lei */
.mx-body{ position:relative; z-index:2; background:var(--paper);
  box-shadow:0 -40px 80px -40px rgba(22,19,15,.5); }
.mx-hero__bg{ position:absolute; inset:0; }
.mx-hero__bg .parallax{ position:absolute; inset:-10% 0; }
.mx-hero__bg img{ width:100%; height:100%; object-fit:cover; }
.mx-hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,19,15,.42) 0%, rgba(22,19,15,.12) 40%, rgba(22,19,15,.88) 100%); }
.mx-hero__body{ position:relative; z-index:2; width:100%; padding-bottom:clamp(28px,5vh,54px); color:#fff; }
.mx-hero__crumb{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-bottom:20px; }
.mx-hero__crumb a{ color:rgba(255,255,255,.75); }
.mx-hero__crumb b{ color:var(--glow); font-weight:500; }
.mx-hero__body h1{ color:#fff; font-size:clamp(56px,10vw,150px); letter-spacing:-.035em; line-height:.9; }
/* gradini automatici per titoli lunghi (classe messa da photo-hero.php in base ai
   caratteri): senza questi il titolo mangia l'altezza dell'hero e sub e meta
   finiscono sotto la piega, dove l'hero sticky non le mostra piu'. */
.mx-hero__body h1.mx-hero__h1--sm{ font-size:clamp(40px,6.4vw,96px); letter-spacing:-.03em; }
.mx-hero__body h1.mx-hero__h1--xs{ font-size:clamp(30px,4.4vw,64px); letter-spacing:-.02em; line-height:.98; }
.mx-hero__sub{ color:rgba(255,255,255,.85); font-size:clamp(16px,1.5vw,20px); max-width:56ch; margin-top:20px; }
.mx-hero__meta{ display:grid; grid-template-columns:repeat(4,auto); justify-content:start; gap:clamp(22px,4vw,64px);
  margin-top:clamp(28px,5vh,46px); border-top:1px solid rgba(255,255,255,.25); padding-top:24px; }
.mx-hero__meta .k{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.65); }
.mx-hero__meta .v{ font-family:var(--font-display); font-weight:700; font-size:clamp(16px,1.5vw,21px); margin-top:6px; color:#fff; }
.mx-hero__meta .v em{ font-style:normal; color:var(--glow); }
@media (max-width:820px){ .mx-hero__meta{ grid-template-columns:1fr 1fr; gap:20px; } }

/* manifesto obiettivo (word-fill come in home) */
.mx-goal{ padding:clamp(90px,13vh,160px) 0; }
.mx-goal__text{ font-family:var(--font-display); font-weight:700; font-size:clamp(24px,3.3vw,44px);
  line-height:1.22; letter-spacing:-.02em; color:var(--ink); margin-top:28px; max-width:22em; }
.mx-goal__text .word.accent{ color:var(--terra); }

/* split templatizzabile: media + testo, alternabile con --rev */
.mx-splits{ border-top:1px solid var(--line); }
.mx-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,84px); align-items:center;
  padding:clamp(40px,7vh,84px) 0; border-bottom:1px solid var(--line); }
.mx-split__media{ position:relative; height:clamp(260px,42vh,460px); border-radius:var(--radius-lg); overflow:hidden; }
.mx-split__media .parallax{ position:absolute; inset:-12% 0; }
.mx-split__media img{ width:100%; height:100%; object-fit:cover; }
.mx-split__media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(140deg, rgba(76,122,63,.14), rgba(22,19,15,.18)); mix-blend-mode:multiply; }
.mx-split--rev .mx-split__media{ order:2; }
.mx-split--rev .mx-split__body{ order:1; }
.mx-split__k{ display:flex; align-items:baseline; gap:14px; }
.mx-split__k i{ font-style:normal; font-family:var(--font-display); font-weight:900; font-size:clamp(34px,3.6vw,54px);
  line-height:1; letter-spacing:-.03em; color:transparent; -webkit-text-stroke:1.4px var(--terra); }
.mx-split__k span{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--terra-2); }
.mx-split__body h3{ font-size:clamp(26px,3vw,42px); margin-top:16px; }
.mx-split__body p{ color:var(--muted); font-size:16.5px; margin-top:14px; max-width:56ch; }
.mx-split__body .chips{ margin-top:20px; }
@media (max-width:860px){
  .mx-split{ grid-template-columns:1fr; gap:24px; }
  .mx-split--rev .mx-split__media{ order:0; }
  .mx-split--rev .mx-split__body{ order:1; }
  .mx-split__media{ height:clamp(210px,32vh,320px); }
}

/* partner wall */
.mx-pstats{ display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--line); margin-bottom:34px; }
.mx-pstats > div{ padding:clamp(22px,3vh,36px) clamp(14px,2vw,28px); border-left:1px solid var(--line); }
.mx-pstats > div:first-child{ border-left:none; padding-left:0; }
.mx-pstats b{ font-family:var(--font-display); font-weight:800; font-size:clamp(32px,4vw,58px); color:var(--terra); display:block; line-height:1; }
.mx-pstats span{ font-size:13.5px; color:var(--muted); display:block; margin-top:8px; }
@media (max-width:760px){ .mx-pstats{ grid-template-columns:1fr 1fr; } .mx-pstats > div{ border-left:none; padding-left:0; } }
.mx-pwall{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.mx-pwall > div{ background:var(--paper); padding:22px 18px; min-height:86px; display:flex; flex-direction:column; justify-content:center; }
.mx-pwall b{ font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--graphite); letter-spacing:-.01em; }
.mx-pwall span{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:5px; }
@media (max-width:900px){ .mx-pwall{ grid-template-columns:repeat(2,1fr); } }

/* esiti / news */
.mx-news{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.mx-news article{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.mx-news article:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -36px rgba(40,33,26,.45); }
.mx-news .m{ height:200px; overflow:hidden; }
.mx-news .m img{ width:100%; height:100%; object-fit:cover; }
.mx-news .b{ padding:22px 22px 26px; }
.mx-news .date{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--terra-2); }
.mx-news h3{ font-size:19px; margin-top:10px; line-height:1.25; }
.mx-news p{ color:var(--muted); font-size:14px; margin-top:10px; }
@media (max-width:860px){ .mx-news{ grid-template-columns:1fr; } }

/* =====================================================================
   CONTATTI - info + form
   ===================================================================== */
.contact__grid{ display:grid; grid-template-columns:.72fr 1fr; gap:clamp(36px,6vw,90px); align-items:start; }
.cinfo{ display:grid; gap:0; border-top:1px solid var(--line); }
.cinfo__item{ padding:clamp(20px,3vh,30px) 0; border-bottom:1px solid var(--line); }
.cinfo__k{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--terra-2); }
.cinfo__v{ font-family:var(--font-display); font-weight:700; font-size:clamp(19px,1.9vw,26px); letter-spacing:-.015em; margin-top:8px; color:var(--ink); }
.cinfo__v a{ color:inherit; transition:color .25s var(--ease); }
.cinfo__v a:hover{ color:var(--terra-2); }
.cinfo__note{ font-size:13.5px; color:var(--muted); margin-top:6px; }

.form{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(26px,3.4vw,46px); display:grid; gap:20px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ display:grid; gap:8px; }
.field label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--graphite); }
.field input, .field select, .field textarea{
  font-family:var(--font-body); font-size:15.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; width:100%; outline:none; appearance:none;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--sand-muted); }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--terra); box-shadow:0 0 0 3px rgba(190,74,43,.14); }
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B645B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:44px; cursor:pointer;
}
.field textarea{ min-height:150px; resize:vertical; }
.apply .field textarea{ min-height:110px; } /* mockup: textarea corta nel form candidatura */
.form__consent{ display:flex; gap:12px; align-items:flex-start; font-size:13px; color:var(--muted); cursor:pointer; }
.form__consent input{ flex:none; width:18px; height:18px; margin-top:2px; accent-color:var(--terra); cursor:pointer; }
.form__consent a{ color:var(--terra-2); font-weight:600;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:rgba(166,62,34,.42);
  transition:color .3s var(--ease), text-decoration-color .3s var(--ease); }
.form__consent a:hover{ color:var(--terra); text-decoration-color:var(--terra); }
.form .btn{ justify-self:start; }
@media (max-width:900px){
  .contact__grid{ grid-template-columns:1fr; }
  .form__row{ grid-template-columns:1fr; }
}

/* Lavora con noi: posizioni aperte + candidatura rapida */
.jobs{ border-top:1px solid var(--line); }
.job{ display:grid; grid-template-columns:1fr auto; gap:clamp(18px,3vw,44px); align-items:center;
  padding:clamp(24px,3.6vh,38px) 0; border-bottom:1px solid var(--line); }
.job__area{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--terra-2); }
.job h3{ font-size:clamp(21px,2.2vw,30px); margin-top:8px; }
.job__desc{ color:var(--muted); font-size:15px; margin-top:10px; max-width:70ch; }
.job__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.job__tags span{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
  padding:5px 12px; border:1px solid var(--line); border-radius:100px; color:var(--graphite); background:var(--paper); }
.job .btn{ white-space:nowrap; }
@media (max-width:720px){ .job{ grid-template-columns:1fr; } .job .btn{ justify-self:start; } }

.apply{ background:var(--paper-2); }
.apply .form{ background:var(--paper); }
.field input[type="file"]{ padding:10px 12px; cursor:pointer; }
.field input[type="file"]::file-selector-button{
  font-family:var(--font-body); font-weight:600; font-size:13.5px; color:var(--terra-2);
  background:var(--terra-soft); border:none; border-radius:100px; padding:8px 16px; margin-right:14px; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.field input[type="file"]::file-selector-button:hover{ background:var(--terra); color:#fff; }
.field .hint{ font-size:12px; color:var(--muted); }

/* Sede (mappa/foto + note) */
.sede__grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(28px,4vw,64px); align-items:center; margin-top:8px; }
.sede__map{ position:relative; height:clamp(260px,40vh,420px); border-radius:var(--radius-lg); overflow:hidden; }
.sede__map img{ width:100%; height:100%; object-fit:cover; }
.sede__map::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(140deg, rgba(190,74,43,.14), rgba(22,19,15,.18)); mix-blend-mode:multiply; }
@media (max-width:860px){ .sede__grid{ grid-template-columns:1fr; } }

/* =====================================================================
   Reveal / animazioni (stato iniziale solo con JS attivo)
   ===================================================================== */
.js .hero__eyebrow,
.js .hero__sub,
.js .hero__cta,
.js .hero__stats .stat{ opacity:0; transform:translateY(26px); }
.js .hero__title .line-in{ transform:translateY(115%); }
.js .reveal{ opacity:0; transform:translateY(26px); }
.js .manifesto .word, .js .wordfill .word{ opacity:.16; }
.js .stagger-item{ opacity:0; transform:translateY(30px); }
.js .reveal-clip{ clip-path:inset(0 0 100% 0); }
.js .lines-reveal .line-in{ transform:translateY(115%); }
.js .cert-anim{ opacity:0; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .hero__eyebrow,.js .hero__sub,.js .hero__cta,.js .hero__stats .stat,.js .reveal,.js .cert-anim,.js .stagger-item{ opacity:1; transform:none; }
  .js .hero__title .line-in,.js .lines-reveal .line-in{ transform:none; }
  .js .manifesto .word,.js .wordfill .word{ opacity:1; }
  .js .reveal-clip{ clip-path:none; }
  .parallax{ transform:none !important; }
  .btn,.link-arrow .arrow{ transition:none; }
  /* header a due stati secchi: niente scrub (main.js non aggiunge .hdr-live) e niente transizioni */
  .hdr__logo,.hdr__logo img{ transition:none; }
}

/* =====================================================================
   Mobile nav (aggiunta WP)
   Pannello a tutto schermo sotto l'header (74px, 64px con .scrolled:
   logo 46px/36px + 14px di padding verticale), voci in font display,
   megamenu ad accordion via .hdr__item.open, burger che diventa X.
   ===================================================================== */
@media (max-width:960px){
  body.nav-open{ overflow:hidden; }

  .hdr__nav.open{
    display:flex; flex-direction:column;
    /* top segue l'altezza reale dell'header: logo 46px + padding verticale */
    position:fixed; top:calc(46px + 2 * var(--hdr-p)); left:0; right:0; bottom:0;
    z-index:99; /* sotto la barra dell'header, sopra il contenuto */
    margin-left:0; padding:26px var(--gutter) 56px;
    background:var(--paper);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain; /* a fine lista lo scroll non passa alla pagina sotto */
  }
  .hdr__nav.open .hdr__item{ display:block; }

  .hdr__nav.open .hdr__link{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:20px 0;
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(28px,6vw,40px); letter-spacing:-.02em; text-transform:none;
    color:var(--ink);
    border-left:none; border-bottom:1px solid var(--line);
    overflow:visible;
  }
  .hdr__nav.open .hdr__link::before{ display:none; }
  .hdr__nav.open .hdr__link:hover{ color:var(--terra-2); }
  .hdr__nav.open .hdr__link.active{ color:var(--terra-2); box-shadow:none; }
  .hdr__nav.open .hdr__link .caret{ width:22px; height:22px; color:var(--terra-2); }
  .hdr__nav.open .hdr__item.open .hdr__link .caret{ transform:rotate(180deg); }

  /* megamenu -> accordion dentro il pannello */
  .hdr__nav.open .mega{
    position:static; opacity:1; visibility:visible; transform:none; pointer-events:auto;
    max-height:0; overflow:hidden;
    border-bottom:none; box-shadow:none;
    transition:max-height .6s var(--ease);
  }
  .hdr__nav.open .mega::before{ display:none; }
  .hdr__nav.open .hdr__item.open .mega{ max-height:1400px; border-bottom:1px solid var(--line); }
  .hdr__nav.open .mega__inner{ display:block; max-width:none; padding:6px 0 22px; }
  .hdr__nav.open .mega__label{ padding:14px 0 4px; border-right:none; }
  .hdr__nav.open .mega__links{ padding:0; }
  .hdr__nav.open .mega__feat{ display:none; }

  /* burger -> X (le 3 span del mockup: 24x2px, gap 5px) */
  .nav-toggle span{ transition:transform .3s var(--ease), opacity .2s var(--ease); }
  .hdr__nav.open ~ .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .hdr__nav.open ~ .nav-toggle span:nth-child(2){ opacity:0; }
  .hdr__nav.open ~ .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* =====================================================================
   Stati form (aggiunta WP)
   ===================================================================== */
.form__msg{ margin:2px 0 0; font-size:14px; padding:13px 16px; border-radius:12px; border:1px solid var(--line); }
.form__msg[hidden]{ display:none; }
.form__msg--ok{ color:#3B6231; border-color:rgba(76,122,63,.5); background:rgba(76,122,63,.08); }
.form__msg--error{ color:var(--terra); border-color:rgba(190,74,43,.5); background:rgba(190,74,43,.07); }
.form [aria-busy="true"]{ opacity:.6; pointer-events:none; }
.hp-field{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }
.field-error{ color:var(--terra); font-size:13px; margin-top:4px; }

/* =====================================================================
   Suite prodotti (sezione product_suite, aggiunta WP)
   Cornice scura con nome suite + griglia card; sotto, card chiare per i
   prodotti fuori suite. Riusa token/pattern di .impact, .exp-panel, .pcard.
   ===================================================================== */
.suite__frame{ position:relative; overflow:hidden; background:var(--night); color:var(--sand);
  border-radius:var(--radius-lg); padding:clamp(28px,4vw,56px); }
.suite__glow{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(70% 55% at 88% 0%, rgba(229,121,79,.26), transparent 55%),
    radial-gradient(60% 50% at 0% 100%, rgba(190,74,43,.18), transparent 55%); }
.suite__head{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px); align-items:end; margin-bottom:clamp(28px,3.4vw,48px); }
.suite__kicker{ display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--glow); border:1px solid rgba(229,121,79,.45); border-radius:100px; padding:6px 13px; }
.suite__name{ color:#fff; font-size:clamp(38px,5.2vw,74px); letter-spacing:-.03em; line-height:.98; margin-top:18px; }
.suite__name .accent{ color:var(--glow); }
.suite__logo{ margin-top:18px; max-width:min(320px,60%); }
.suite__logo img{ width:100%; height:auto; display:block; }
.suite__desc p{ color:var(--sand-muted); font-size:clamp(15.5px,1.2vw,17.5px); line-height:1.6; max-width:46ch; }
.suite__desc .link-arrow{ color:var(--glow); margin-top:18px; }

.suite__grid{ position:relative; z-index:1; display:grid; gap:clamp(12px,1.2vw,16px); }
/* membri suite: fila flex che si espande al hover, stesso meccanismo di .expander */
.suite__grid--expander{ display:flex; --suite-h:clamp(300px,38vh,400px); }
.suite__grid--wide{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px); }
.suite__others{ margin-top:clamp(28px,3.4vw,48px); }
.suite__others .eyebrow{ margin-bottom:18px; }
/* con la cornice sopra: stesso vuoto che separa il page-hero dalla cornice */
.suite__others--split{ margin-top:calc(var(--hero-pb) + var(--section-py)); }
.suite__others-title{ text-align:center; margin-bottom:clamp(28px,3.4vw,48px); }

.suite-card{ position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden;
  border-radius:var(--radius); text-decoration:none; color:inherit;
  transition:transform .55s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease), box-shadow .55s var(--ease); }
.suite-card__body{ display:flex; flex-direction:column; flex:1 1 auto; gap:18px; padding:clamp(18px,1.8vw,24px); }
.suite-card__main{ flex:1 1 auto; }
.suite-card__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.suite-card__idx{ font-family:var(--font-mono); font-size:12px; }
.suite-card__kicker{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid; border-radius:100px; padding:4px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.suite-card h3{ font-size:clamp(20px,1.6vw,24px); letter-spacing:-.02em; line-height:1.1; }
.suite-card p{ font-size:14.5px; line-height:1.55; margin-top:10px; }
.suite-card .chips{ margin-top:16px; }
.suite-card .chips span{ font-size:10.5px; }
.suite-card .link-arrow{ margin-top:auto; font-size:14.5px; }
.suite-card:hover .link-arrow .arrow{ transform:translateX(6px); }
.suite-card__badge{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
/* 3/2 = proporzione delle foto sorgente (800x533): il riquadro non segue l'altezza del
   testo, quindi a ogni larghezza la foto resta intera invece di ridursi a una striscia.
   img assoluta: il riempimento non dipende dal calcolo delle altezze in % (Safari). */
.suite-card__media{ position:relative; flex:none; aspect-ratio:3/2; overflow:hidden; }
.suite-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.55) contrast(1.03);
  transition:filter .8s var(--ease), transform 1.2s var(--ease); }
.suite-card:hover .suite-card__media img{ filter:grayscale(0); transform:scale(1.05); }

/* variante scura: dentro la cornice, si espande al hover/focus come .exp-panel */
.suite-card--dark{ background:var(--surface); border:1px solid var(--line-dark); color:#fff;
  flex:1 1 0; height:var(--suite-h); transition:flex .85s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
  will-change:flex; }
.suite-card--dark:hover, .suite-card--dark:focus-within, .suite-card--dark.open{ flex:2.6; background:var(--surface-2); border-color:rgba(229,121,79,.55); }
.suite-card--dark .suite-card__body{ position:relative; z-index:2; height:100%; }
.suite-card--dark .suite-card__main{ margin-top:auto; }
.suite-card--dark h3{ font-size:clamp(22px,2vw,30px); }
.suite-card__more{ max-height:0; opacity:0; transform:translateY(14px); overflow:hidden;
  transition:max-height .85s var(--ease), opacity .55s var(--ease) .12s, transform .65s var(--ease) .12s; }
.suite-card--dark:hover .suite-card__more, .suite-card--dark:focus-within .suite-card__more, .suite-card--dark.open .suite-card__more{
  max-height:320px; opacity:1; transform:none; }
.suite-card--dark .suite-card__more .link-arrow, .suite-card--dark .suite-card__more .suite-card__badge{ display:inline-flex; margin-top:18px; }
/* immagine come sfondo pieno, desatura fino al hover */
.suite-card--dark .suite-card__media{ position:absolute; inset:0; aspect-ratio:auto; }
.suite-card--dark .suite-card__media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,19,15,.30) 0%, rgba(22,19,15,.10) 42%, rgba(22,19,15,.9) 100%); }
.suite-card--dark .suite-card__idx{ color:var(--glow); }
.suite-card--dark .suite-card__kicker{ color:var(--sand); border-color:rgba(255,255,255,.28); }
.suite-card--dark h3{ color:#fff; }
.suite-card--dark p{ color:rgba(255,255,255,.78); }
.suite-card--dark .chips span{ border-color:rgba(255,255,255,.3); color:#fff; background:transparent; }
.suite-card--dark .chips span:hover{ border-color:var(--glow); color:var(--glow); }
.suite-card--dark .link-arrow{ color:var(--glow); }
.suite-card--dark .suite-card__badge{ color:var(--sand-muted); }
/* placeholder: solo titolo, bordo tratteggiato e fondo trasparente */
.suite-card--ghost{ background:transparent; border-style:dashed; border-color:rgba(255,255,255,.22); }
.suite-card--ghost:hover, .suite-card--ghost:focus-within{ background:rgba(255,255,255,.03); border-color:rgba(229,121,79,.45); }
.suite-card--ghost h3{ color:rgba(255,255,255,.72); }
.suite-card--ghost .suite-card__idx{ color:rgba(229,121,79,.7); }

/* variante chiara: prodotti fuori suite, media in alto a proporzione fissa e testo sotto */
.suite-card--light{ background:var(--paper-2); border:1px solid var(--line); color:var(--ink); }
.suite-card--light:hover{ transform:translateY(-4px); border-color:var(--sand-muted); box-shadow:0 40px 70px -46px rgba(22,19,15,.45); }
.suite-card--light .suite-card__idx{ color:var(--terra-2); }
.suite-card--light .suite-card__kicker{ color:var(--graphite); border-color:var(--sand-muted); }
.suite-card--light h3{ color:var(--ink); font-size:clamp(22px,2vw,30px); }
.suite-card--light p{ color:var(--graphite); font-size:15px; max-width:48ch; }
.suite-card--light .link-arrow{ color:var(--terra-2); }
.suite-card--light .suite-card__badge{ color:var(--muted); }
.suite-card--light .suite-card__body{ padding:clamp(22px,2.4vw,34px); }

@media (max-width:1000px){
  .suite__head{ grid-template-columns:1fr; align-items:start; }
}
@media (max-width:860px){
  /* in colonna: card una sotto l'altra, dettaglio sempre visibile (come .expander) */
  .suite__grid--expander{ flex-direction:column; }
  .suite-card--dark{ flex:none; height:auto; min-height:200px; }
  .suite-card__more{ max-height:none; opacity:1; transform:none; }
  .suite-card--dark .suite-card__media img{ filter:grayscale(0); }
  .suite__grid--wide{ grid-template-columns:1fr; }
}