/* =========================================================================
   Edilica — foglio di stile unico.
   Architettura: token, primitive di layout, componenti, sezioni.
   I colori di brand arrivano da :root iniettato da inc/brand.php.
   ========================================================================= */

/* --- 1. Token --------------------------------------------------------- */

:root {
  /* Fallback: se inc/brand.php non gira, il tema resta a marchio. */
  --e-navy: #002d4c;
  --e-navy-rgb: 0, 45, 76;
  --e-red: #e6381d;
  --e-red-rgb: 230, 56, 29;
  --e-red-ink: #cc2f13;
  --e-sky: #77bee0;
  --e-sky-rgb: 119, 190, 224;
  --e-slope: 4.5deg;

  /* Neutri derivati dal navy: grigi freddi, non grigi da template. */
  --stone-00: #ffffff;
  --stone-05: #f5f7f8;
  --stone-10: #e9edf0;
  --stone-20: #d5dce2;
  --stone-40: #a8b4bf;
  --stone-60: #5c6b78;
  --stone-80: #2a3d4b;

  --ink: var(--e-navy);
  --ink-soft: var(--stone-60);
  --rule: var(--stone-20);
  --rule-strong: var(--stone-40);

  --font-display: "Space Grotesk", "DejaVu Sans", system-ui, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display-xl: clamp(2.625rem, 6.6vw, 5.25rem);
  --fs-display-l: clamp(1.9rem, 3.9vw, 3.125rem);
  --fs-display-m: clamp(1.375rem, 2.3vw, 2rem);
  --fs-lede: clamp(1.0625rem, 1.35vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --measure: 62ch;
  --measure-narrow: 46ch;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --shell: 1360px;
  --section-y: clamp(3.75rem, 8.5vw, 8rem);

  /* La tacca geometrica: nasce dall'angolo di falda del simbolo. */
  --notch: clamp(1.5rem, 4vw, 4.25rem);
  --notch-sm: 1.5rem;

  --dur: 260ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- 2. Reset e base -------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--stone-00);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.012em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 { font-size: var(--fs-display-l); }
h2 { font-size: var(--fs-display-l); }
h3 { font-size: var(--fs-display-m); }
h4 { font-size: 1.125rem; letter-spacing: -0.006em; }

p { margin: 0 0 var(--sp-4); max-width: var(--measure); }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25em; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--e-red);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--e-sky); color: var(--e-navy); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: var(--sp-4);
  z-index: 200;
  background: var(--e-navy); color: #fff;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-small);
}
.skip-link:focus { top: var(--sp-4); }

/* --- 3. Primitive di layout ------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--alt { background: var(--stone-05); }

.section--dark {
  background: var(--e-navy);
  color: var(--stone-00);
}
.section--dark h2,
.section--dark h3 { color: var(--stone-00); }
.section--dark p { color: rgba(255, 255, 255, 0.78); }

/* Griglia asimmetrica: il contenuto non sta mai al centro per default. */
.split {
  display: grid;
  gap: var(--sp-7) var(--gutter);
  align-items: start;
}
@media (min-width: 62rem) {
  .split { grid-template-columns: 5fr 7fr; gap: var(--sp-9) calc(var(--gutter) * 1.5); }
  .split--wide-first { grid-template-columns: 7fr 5fr; }
  .split--thirds { grid-template-columns: 4fr 8fr; }
}

.stack > * + * { margin-top: var(--sp-4); }
.lede { font-size: var(--fs-lede); color: var(--ink-soft); max-width: var(--measure); }
.section--dark .lede { color: rgba(255, 255, 255, 0.78); }

/* --- 4. Linea di quota ------------------------------------------------ */
/* Sostituisce l'eyebrow in maiuscoletto: è un elemento del disegno tecnico. */

.quota {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
  max-width: none;
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}

.quota__line {
  flex: 0 0 auto;
  position: relative;
  width: 3.25rem;
  height: 1px;
  background: var(--rule-strong);
}
/* Le tacche terminali: la firma del segno di quota. */
.quota__line::before,
.quota__line::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 1px; height: 7px;
  background: var(--rule-strong);
}
.quota__line::before { left: 0; }
.quota__line::after { right: 0; }

.quota--dark { color: var(--e-sky); }
.quota--dark .quota__line,
.quota--dark .quota__line::before,
.quota--dark .quota__line::after { background: rgba(var(--e-sky-rgb), 0.55); }

/* --- 5. Pulsanti ----------------------------------------------------- */

.btn {
  --btn-bg: var(--e-red);
  --btn-fg: #fff;
  --btn-sweep: rgba(0, 0, 0, 0.22);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 var(--sp-6);
  overflow: hidden;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}

/* Lo sweep entra inclinato dell'angolo di falda: unico moto sui bottoni. */
.btn::after {
  content: "";
  position: absolute;
  inset: -25% -12%;
  background: var(--btn-sweep);
  transform: translateX(-108%) skewX(calc(var(--e-slope) * -2.4));
  transition: transform 420ms var(--ease);
}
.btn:hover::after,
.btn:focus-visible::after { transform: translateX(0) skewX(calc(var(--e-slope) * -2.4)); }

.btn__label { position: relative; z-index: 1; }

.btn--secondario {
  --btn-bg: transparent;
  --btn-fg: var(--e-navy);
  --btn-sweep: rgba(var(--e-navy-rgb), 0.08);
  border-color: var(--rule-strong);
}
.btn--secondario:hover { border-color: var(--e-navy); }

.btn--chiaro {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-sweep: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.34);
}
.btn--chiaro:hover { border-color: #fff; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* Link testuale con sottolineatura che cresce, non con la freccia. */
.link {
  display: inline-block;
  color: var(--e-red-ink);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--e-red-rgb), 0.35);
  padding-bottom: 2px;
  transition: border-color var(--dur) var(--ease);
}
.link:hover { border-bottom-color: var(--e-red); }
.section--dark .link { color: var(--e-sky); border-bottom-color: rgba(var(--e-sky-rgb), 0.4); }
.section--dark .link:hover { border-bottom-color: var(--e-sky); }

/* --- 6. Header e navigazione ------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 5rem;
}

.site-logo img { width: auto; height: 3.375rem; } /* 54px */

.nav-primary { display: none; }
@media (min-width: 62rem) {
  .nav-primary { display: block; }
}

.nav-primary ul {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-primary li { position: relative; }

.nav-primary a {
  display: block;
  padding: var(--sp-2) 0;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--e-navy);
  transition: color var(--dur) var(--ease);
}
.nav-primary a:hover { color: var(--e-red-ink); }

/* Voce attiva: filetto sotto, non colore pieno. */
.nav-primary .current-menu-item > a,
.nav-primary .current-menu-parent > a,
.nav-primary .current_page_ancestor > a {
  box-shadow: inset 0 -2px 0 var(--e-red);
}

/* Sottomenu Servizi */
.nav-primary .sub-menu {
  position: absolute;
  top: 100%;
  left: calc(var(--sp-4) * -1);
  min-width: 17rem;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: var(--sp-2) 0;
  background: #fff;
  border: 1px solid var(--rule);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.nav-primary li:hover > .sub-menu,
.nav-primary li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-primary .sub-menu a { padding: var(--sp-3) var(--sp-5); }
.nav-primary .sub-menu a:hover { background: var(--stone-05); }

.header-actions { display: flex; align-items: center; gap: var(--sp-4); }
.header-actions .btn { min-height: 2.875rem; padding-inline: var(--sp-5); font-size: 0.9375rem; }
@media (max-width: 61.99rem) {
  .header-actions .btn { display: none; }
}

/* Toggle mobile: due barre che diventano una croce. */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  background: none;
  border: 1px solid var(--rule-strong);
  cursor: pointer;
}
@media (min-width: 62rem) { .nav-toggle { display: none; } }

.nav-toggle span {
  display: block;
  width: 1.125rem; height: 1.5px;
  margin-inline: auto;
  background: var(--e-navy);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

.nav-mobile {
  display: none;
  border-top: 1px solid var(--rule);
  background: #fff;
}
.nav-mobile[data-open="true"] { display: block; }
@media (min-width: 62rem) { .nav-mobile { display: none !important; } }

.nav-mobile ul { margin: 0; padding: 0; list-style: none; }
.nav-mobile li { border-bottom: 1px solid var(--stone-10); }
.nav-mobile .sub-menu { padding-left: var(--sp-5); border-top: 1px solid var(--stone-10); }
.nav-mobile .sub-menu li:last-child { border-bottom: 0; }
.nav-mobile a {
  display: block;
  padding: var(--sp-4) 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
}
.nav-mobile__cta { padding-block: var(--sp-5); }
.nav-mobile__cta .btn { width: 100%; }

.lang-switcher { font-size: var(--fs-small); }
.lang-switcher ul { display: flex; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }

/* --- 7. Hero ---------------------------------------------------------- */

.hero { padding-block: clamp(2.5rem, 5vw, 4.5rem) 0; overflow: hidden; }

.hero__inner {
  display: grid;
  gap: var(--sp-7);
  align-items: end;
}
@media (min-width: 62rem) {
  .hero__inner { grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: stretch; }
}

.hero__text { align-self: center; padding-bottom: var(--sp-7); }

.hero__title {
  font-size: var(--fs-display-xl);
  line-height: 0.98;
  letter-spacing: -0.022em;
  margin-bottom: var(--sp-5);
  max-width: 18ch;
}

.hero__lede { font-size: var(--fs-lede); color: var(--ink-soft); max-width: var(--measure-narrow); }

/* Il bordo inclinato: unico gesto forte della pagina. */
.hero__media {
  position: relative;
  min-height: clamp(20rem, 46vw, 34rem);
  background: var(--stone-10);
  clip-path: polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%);
}
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Quota degli anni di attività, appoggiata sotto il testo. */
.hero__meta {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}
.hero__meta-value {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.028em;
  color: var(--e-navy);
}
.hero__meta-label {
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--ink-soft);
  max-width: 16ch;
  padding-bottom: 0.2em;
}

/* --- 8. Servizi: tipografia e filetti, nessuna card ------------------- */

.servizi { display: grid; gap: 0; margin-top: var(--sp-7); }
@media (min-width: 48rem) {
  .servizi { grid-template-columns: repeat(3, 1fr); column-gap: var(--gutter); }
}

.servizio {
  padding-block: var(--sp-6);
  border-top: 1px solid var(--rule-strong);
}
@media (max-width: 47.99rem) {
  .servizio:last-child { border-bottom: 1px solid var(--rule-strong); }
}

.servizio__index {
  display: block;
  margin-bottom: var(--sp-4);
  font-family: var(--font-text);
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--stone-40);
  font-variant-numeric: tabular-nums;
}

.servizio__title {
  font-size: var(--fs-display-m);
  margin-bottom: var(--sp-3);
}
.servizio__title a { text-decoration: none; }
.servizio__title a:hover { color: var(--e-red-ink); }

.servizio__text { font-size: 1rem; color: var(--ink-soft); max-width: 34ch; }

.servizio__punti {
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.servizio__punti li { padding-block: var(--sp-2); border-bottom: 1px solid var(--stone-10); }

/* --- 9. Numeri -------------------------------------------------------- */

.numeri {
  display: grid;
  gap: var(--sp-6) var(--gutter);
  padding-block: var(--sp-7);
}
@media (min-width: 48rem) { .numeri { grid-template-columns: repeat(3, 1fr); } }

.numero__value {
  display: flex;
  align-items: baseline;
  gap: 0.15em;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.5vw, 5rem);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums slashed-zero;
}
.numero__unit { font-size: 0.42em; letter-spacing: -0.01em; color: var(--e-red); }
.numero__label {
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-width: 24ch;
}
.section--dark .numero__label { border-top-color: rgba(255, 255, 255, 0.18); }

/* --- 10. Il metodo: unica sezione con numerazione, perché è una sequenza -- */

.metodo {
  display: grid;
  gap: 0;
  margin-top: var(--sp-7);
  counter-reset: fase;
}
@media (min-width: 62rem) { .metodo { grid-template-columns: repeat(4, 1fr); } }

.fase {
  position: relative;
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  counter-increment: fase;
}
@media (min-width: 62rem) {
  .fase + .fase { border-left: 1px solid rgba(255, 255, 255, 0.16); }
  .fase:first-child { padding-left: 0; }
}
@media (max-width: 61.99rem) {
  .fase { padding-inline: 0; }
  .fase:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
}

/* Il numero è grande e cavo: struttura, non decorazione. */
.fase::before {
  content: counter(fase, decimal-leading-zero);
  display: block;
  margin-bottom: var(--sp-5);
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.028em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--e-sky-rgb), 0.75);
}

.fase__title { font-size: 1.375rem; margin-bottom: var(--sp-3); }
.fase__text { font-size: 0.9375rem; }

.fase__esito {
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--fs-small);
  color: var(--e-sky);
}

/* --- 11. Progetti: griglia asimmetrica, tacca d'angolo ---------------- */

.progetti-grid {
  display: grid;
  gap: var(--gutter);
  margin-top: var(--sp-7);
}
@media (min-width: 48rem) {
  .progetti-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
  .progetti-grid--evidenza { grid-template-columns: 7fr 5fr; grid-template-rows: auto auto; }
  /* Il primo progetto occupa due righe: la gerarchia è nel layout. */
  .progetti-grid--evidenza > *:first-child { grid-row: span 2; }
  .progetti-grid--archivio { grid-template-columns: repeat(3, 1fr); }
}

.progetto-card { position: relative; display: flex; flex-direction: column; }

.progetto-card__media {
  position: relative;
  overflow: hidden;
  background: var(--stone-10);
  aspect-ratio: 3 / 2;
  /* Tacca in alto a destra, allo stesso angolo dell'hero. */
  clip-path: polygon(0 0, calc(100% - var(--notch-sm)) 0, 100% var(--notch-sm), 100% 100%, 0 100%);
}
.progetti-grid--evidenza > *:first-child .progetto-card__media { aspect-ratio: 4 / 5; }

.progetto-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.progetto-card:hover .progetto-card__media img { transform: scale(1.035); }

.progetto-card__body { padding-top: var(--sp-4); }

.progetto-card__tipologia {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--stone-60);
}

.progetto-card__title {
  font-size: 1.375rem;
  margin-bottom: var(--sp-2);
}
.progetti-grid--evidenza > *:first-child .progetto-card__title { font-size: var(--fs-display-m); }
.progetto-card__title a { text-decoration: none; }
.progetto-card__title a:hover { color: var(--e-red-ink); }

.progetto-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums slashed-zero;
}

/* Scheda tecnica: tabella di dati, allineata come una distinta */
.scheda {
  margin: var(--sp-6) 0 0;
  border-top: 1px solid var(--rule-strong);
}
.scheda__row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--stone-10);
}
/* Sotto i 30rem la colonna etichetta da 9rem lascia 175px al valore: un
   indirizzo PEC non ci sta, sfora il viewport e trascina con se' la griglia
   di .split, che a quella larghezza e' a colonna singola. */
@media (max-width: 29.99rem) {
  .scheda__row { grid-template-columns: 1fr; gap: var(--sp-1); }
}
.scheda__label { font-size: var(--fs-small); color: var(--ink-soft); }
.scheda__value {
  font-weight: 500;
  font-variant-numeric: tabular-nums slashed-zero;
  overflow-wrap: anywhere;
}

/* --- 12. Confronto prima e dopo -------------------------------------- */

.prima-dopo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--stone-10);
  touch-action: pan-y;
  user-select: none;
  cursor: ew-resize;
}
.prima-dopo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.prima-dopo__after { clip-path: inset(0 0 0 var(--pd, 50%)); }

.prima-dopo__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pd, 50%);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  pointer-events: none;
}
.prima-dopo__handle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 2.75rem; height: 2.75rem;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}

.prima-dopo__tag {
  position: absolute;
  top: var(--sp-4);
  padding: var(--sp-1) var(--sp-3);
  background: rgba(var(--e-navy-rgb), 0.82);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 500;
  pointer-events: none;
}
.prima-dopo__tag--prima { left: var(--sp-4); }
.prima-dopo__tag--dopo { right: var(--sp-4); }

.prima-dopo__range {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

/* --- 13. Certificazioni ---------------------------------------------- */

.certificazioni { display: grid; gap: 0; margin-top: var(--sp-6); }
@media (min-width: 48rem) { .certificazioni { grid-template-columns: repeat(2, 1fr); column-gap: var(--gutter); } }

.certificazione {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--rule);
}
.certificazione__name { font-weight: 500; }
.certificazione__ente { display: block; font-size: var(--fs-small); color: var(--ink-soft); font-weight: 400; }
.certificazione__cat {
  font-size: var(--fs-small);
  color: var(--e-red-ink);
  font-variant-numeric: tabular-nums;
  /* Niente nowrap: la colonna e' auto in una griglia annidata, quindi il
     testo non spezzabile diventa la larghezza minima di tutta la sezione.
     Oltre i ~175px di categoria la home sfora a 375, 768 e 1024. Meglio
     una categoria su due righe che una pagina che scorre in orizzontale. */
}

/* --- 14. Testimonianze ----------------------------------------------- */

.testimonianze { display: grid; gap: var(--gutter); margin-top: var(--sp-7); }
@media (min-width: 48rem) { .testimonianze { grid-template-columns: repeat(2, 1fr); } }

.testimonianza { padding-top: var(--sp-5); border-top: 2px solid var(--e-red); }
.testimonianza__text {
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 1.9vw, 1.5rem);
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: -0.008em;
  margin-bottom: var(--sp-4);
  max-width: 34ch;
}
.testimonianza__who { font-size: var(--fs-small); color: var(--ink-soft); margin: 0; }
.testimonianza__who strong { display: block; color: var(--ink); font-weight: 500; }

/* --- 15. Fascia CTA con stratigrafia --------------------------------- */

.cta-band {
  position: relative;
  background: var(--e-navy);
  color: #fff;
  overflow: hidden;
}
/* Le fasce orizzontali richiamano una sezione di muratura. */
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.045) 0,
    rgba(255, 255, 255, 0.045) 1px,
    transparent 1px,
    transparent 14px
  );
  pointer-events: none;
}
/* Maglia di brand. Tinta #093d59 dentro l'SVG, non qui: a piena opacita sta
   1,24:1 sul navy, quindi si legge come texture e non tocca il testo bianco. */
.cta-band__pattern {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  background-size: 56px auto;
  pointer-events: none;
}
.cta-band__inner { position: relative; padding-block: var(--section-y); }
.cta-band__title {
  font-size: var(--fs-display-l);
  max-width: 26ch;
  margin-bottom: var(--sp-6);
}

/* Barra sticky mobile: telefono e WhatsApp sempre a portata di pollice. */
.sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--rule);
  background: #fff;
}
@media (min-width: 62rem) { .sticky-cta { display: none; } }
.sticky-cta a {
  padding: var(--sp-4) var(--sp-3);
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  color: var(--e-navy);
}
.sticky-cta a + a { border-left: 1px solid var(--rule); }
@media (max-width: 61.99rem) {
  body { padding-bottom: 3.75rem; }
}

/* --- 16. Footer ------------------------------------------------------- */

.site-footer {
  background: var(--e-navy);
  color: rgba(255, 255, 255, 0.74);
  font-size: var(--fs-small);
}
.site-footer a { color: rgba(255, 255, 255, 0.74); text-decoration: none; }
.site-footer a:hover { color: #fff; }

.site-footer__main {
  display: grid;
  gap: var(--sp-7) var(--gutter);
  padding-block: var(--sp-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
@media (min-width: 48rem) { .site-footer__main { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .site-footer__main { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.site-footer h2 {
  font-family: var(--font-text);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--e-sky);
  margin-bottom: var(--sp-4);
}

.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li + li { margin-top: var(--sp-2); }
.site-footer p { max-width: 34ch; margin-bottom: var(--sp-3); }

.site-footer__brand .site-logo img { height: 3.1875rem; margin-bottom: var(--sp-5); } /* 51px */

/* La denominazione precedente: chi cerca WPS srl deve ritrovarsi. */
.site-footer__alias {
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--fs-micro);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  padding-block: var(--sp-5);
  font-size: var(--fs-micro);
  color: rgba(255, 255, 255, 0.55);
}
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.site-footer__legal li + li { margin-top: 0; }

/* --- 17. Contenuto redazionale --------------------------------------- */

.entry-header { padding-block: var(--sp-8) var(--sp-6); }
.entry-title { max-width: 24ch; }
.entry-title--page { font-size: var(--fs-display-l); }

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { font-size: var(--fs-display-m); margin-top: var(--sp-7); }
.prose h3 { font-size: 1.25rem; margin-top: var(--sp-6); }
.prose a { color: var(--e-red-ink); text-decoration-color: rgba(var(--e-red-rgb), 0.4); }
.prose a:hover { text-decoration-color: var(--e-red); }
.prose blockquote {
  margin: var(--sp-6) 0;
  padding-left: var(--sp-5);
  border-left: 2px solid var(--e-red);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.4;
}
.prose img, .prose figure { margin-block: var(--sp-6); }
.prose figcaption { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--ink-soft); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.prose th, .prose td { padding: var(--sp-3); text-align: left; border-bottom: 1px solid var(--rule); }
.prose code {
  padding: 0.15em 0.4em;
  background: var(--stone-05);
  font-size: 0.9em;
}

/* Galleria progetto */
.galleria { display: grid; gap: var(--sp-3); margin-top: var(--sp-7); }
@media (min-width: 40rem) { .galleria { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .galleria { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }
.galleria img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* Archivio blog */
.post-list { display: grid; gap: 0; margin-top: var(--sp-6); }
.post-item { padding-block: var(--sp-6); border-top: 1px solid var(--rule); }
.post-item:last-child { border-bottom: 1px solid var(--rule); }
.post-item__title { font-size: var(--fs-display-m); margin-bottom: var(--sp-2); }
.post-item__title a { text-decoration: none; }
.post-item__title a:hover { color: var(--e-red-ink); }

/* --- 18. Form -------------------------------------------------------- */

.form-field { margin-bottom: var(--sp-5); }
.form-field label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 500;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="search"],
.form-field select,
.form-field textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: var(--sp-3) var(--sp-4);
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease);
}
.form-field textarea,
.wpcf7 textarea { min-height: 9rem; padding-block: var(--sp-3); resize: vertical; }
.form-field :is(input, select, textarea):focus,
.wpcf7 :is(input, select, textarea):focus { border-color: var(--e-navy); }

.form-hint { margin: var(--sp-2) 0 0; font-size: var(--fs-small); color: var(--ink-soft); }

.search-form { display: flex; gap: var(--sp-2); max-width: 26rem; }
.search-form input[type="search"] {
  flex: 1;
  min-height: 3rem;
  padding: 0 var(--sp-4);
  border: 1px solid var(--rule-strong);
  font-family: inherit;
  font-size: 1rem;
}

/* --- 19. Paginazione e vuoti ----------------------------------------- */

.pagination { margin-top: var(--sp-8); font-size: var(--fs-small); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem;
  padding-inline: var(--sp-3);
  border: 1px solid var(--rule);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pagination .page-numbers:hover { border-color: var(--e-navy); }
.pagination .page-numbers.current { background: var(--e-navy); border-color: var(--e-navy); color: #fff; }

.empty-state {
  padding-block: var(--sp-8);
  border-top: 1px solid var(--rule);
}
.empty-state h2 { font-size: var(--fs-display-m); }

/* --- 20. Rivelazione all'ingresso ------------------------------------ */
/* Un solo momento orchestrato, al caricamento dell'hero. Nient'altro. */

@media (prefers-reduced-motion: no-preference) {
  .reveal > * {
    opacity: 0;
    transform: translateY(12px);
    animation: edilica-reveal 700ms var(--ease) forwards;
  }
  .reveal > *:nth-child(1) { animation-delay: 60ms; }
  .reveal > *:nth-child(2) { animation-delay: 150ms; }
  .reveal > *:nth-child(3) { animation-delay: 240ms; }
  .reveal > *:nth-child(4) { animation-delay: 330ms; }
}

@keyframes edilica-reveal {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .progetto-card:hover .progetto-card__media img { transform: none; }
}

/* --- 21. Stampa ------------------------------------------------------ */

@media print {
  .site-header, .site-footer, .sticky-cta, .cta-band, .nav-toggle { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .hero__media, .progetto-card__media { clip-path: none; }
  a { text-decoration: underline; }
}