/* ==========================================================================
   Tecnobar — stylesheet
   Font: Archivo (Google Fonts) — sostituto libero di Monument Grotesk
   Misure di griglia e tipografia calcolate a partire dal sito Cargo originale:
   griglia a 4 colonne 24.44% / 32.84% / 24.44% / 16.04%, gap 0.75vw,
   gutter laterale 1.1vw, h1 5.76vw (letter-spacing -0.05em, line-height 0.95),
   h2 1.4vw (line-height 1.2), corpo testo 1.1vw.
   ========================================================================== */

:root {
  --bg: #8e8989;
  --ink: rgba(0, 0, 0, 0.85);
  --ink-soft: rgba(0, 0, 0, 0.6);
  --ink-faint: rgba(0, 0, 0, 0.4);
  --paper: #ffffff;
  --border: rgba(0, 0, 0, 0.25);

  /* Cargo mantiene fissi gutter, gap e tipografia del corpo: a ridursi
     orizzontalmente sono il logo e i due titoli hero, non il testo editoriale. */
  --gutter: 1.1vw;
  --grid-gap: 0.75vw;

  /* griglia a 4 tracce, proporzioni misurate sull'originale */
  --track-a: 24.44fr;
  --track-b: 32.84fr;
  --track-c: 24.44fr;
  --track-d: 16.04fr;

  --font: "Archivo", -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Chrome e Safari non devono modificare la scala del testo o la larghezza
     utile quando compare la scrollbar. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  /* I testi editoriali non devono diventare microscopici su iPad e
     notebook stretti. I due claim hero restano volutamente in vw: sono
     gli unici elementi che si riducono in modo evidente, come nel Cargo. */
  font-size: clamp(12px, 1vw, 1vw);
  line-height: 1.1;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.7; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--paper);
  color: var(--ink);
  padding: 10px 16px;
  z-index: 1000;
}
.skip-link:focus { left: var(--gutter); top: var(--gutter); }

h1, h2, h3 {
  font-weight: 400;
  margin: 0 0 0.5em;
}

h1 {
  font-size: 5.76vw;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

h2 {
  font-size: clamp(16px, 1.4vw, 1.4vw);
  line-height: 1.2;
  letter-spacing: normal;
}

/* Le intestazioni nella colonna centrale (col-main) sono bianche
   nell'originale — verificato via screenshot diretto sul sito sorgente. */
.col-main h2 {
  color: rgba(255, 255, 255, 0.85);
}

/* h3 usato per i sotto-titoli nelle colonne laterali: stessa dimensione
   dell'h2 (1.4vw), stesso trattamento — nell'originale è lo stesso tag h2. */
h3 {
  font-size: clamp(16px, 1.4vw, 1.4vw);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
}

/* Corpo testo: 0.92vw per paragrafi normali. Kicker, testo hero laterale
   e la colonna "Professionalità/Avezzano" dell'header usano invece la
   dimensione h2 (1.41vw) — verificato via dump completo del DOM sorgente. */
p {
  font-size: clamp(12px, 0.92vw, 0.92vw);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 0.5em;
}

/* Paragrafo secondario più piccolo (es. "Uniamo progettazione..." dopo
   il paragrafo in grassetto) — misurato 0.77vw sul sorgente. */
.text-sub {
  font-size: clamp(10px, 0.77vw, 0.77vw);
}

.kicker,
.lead {
  font-size: clamp(18px, 1.41vw, 1.41vw);
  font-weight: 400;
  display: block;
}

/* ---------- layout helpers ---------- */

.site-header,
.section,
.hero {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* griglia a 4 tracce: label | main | (side = C+D) */
.grid-3 {
  display: grid;
  grid-template-columns: var(--track-a) var(--track-b) var(--track-c) var(--track-d);
  column-gap: var(--grid-gap);
  align-items: start;
}
.grid-3 > * { min-width: 0; }
.grid-3 > .col-label { grid-column: 1; }
.grid-3 > .col-main   { grid-column: 2; }
.grid-3 > .col-side   { grid-column: 3 / span 2; }
/* col-main-side: usata quando testo (in col-label, traccia A) e
   un'immagine larga (tracce B+C+D) condividono la stessa riga —
   pattern verificato nella sezione Tecnobar. */
.grid-3 > .col-main-side { grid-column: 2 / span 3; }
/* Altezza misurata sul sorgente per la foto della sezione Tecnobar:
   h=602px a innerWidth 2541 = 23.7vw. */
.col-main-side { height: 23.7vw; }
.col-main-side img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.tecnobar-row2 { margin-top: 0.7vw; }


/* ---------- header ---------- */

.site-header {
  padding-top: var(--gutter);
  padding-bottom: var(--gutter);
}

.header-grid {
  display: grid;
  grid-template-columns: var(--track-a) var(--track-b) var(--track-c) var(--track-d);
  column-gap: var(--grid-gap);
  align-items: start;
}
.header-grid > * { min-width: 0; }

/* Logo proporzionale alla larghezza (11.7vw), non a dimensione fissa. */
.header-logo img {
  width: 11.7vw;
  height: auto;
}

.header-col p { margin: 0 0 0.9vw; }
.header-col p:last-child { margin-bottom: 0; }
/* La colonna "Professionalità trentennale / Avezzano (AQ)" usa la
   dimensione h2 (1.41vw); le altre due colonne restano al corpo base.
   "Avezzano (AQ)" e il telefono sono un unico blocco (un solo <p> con
   <br>), quindi lo stacco di ~1vw resta solo dopo la prima riga. */
.header-col--emphasis p {
  font-size: clamp(18px, 1.41vw, 1.41vw);
}
/* La colonna Info@/IG è allineata a destra nell'originale. */
.header-col--right { text-align: right; }
.header-col--right a { overflow-wrap: anywhere; }
.header-contact-mobile { display: none; }

.eyebrow { color: var(--ink); }
.mobile-break { display: none; }
.header-highlight { color: var(--paper); font-weight: 400; }

/* ---------- hero ---------- */

.hero {
  padding-top: 13.7vw;
  padding-bottom: 5.6vw;
}

.hero-grid {
  display: grid;
  grid-template-columns: var(--track-a) var(--track-b) var(--track-c) var(--track-d);
  column-gap: var(--grid-gap);
  align-items: start;
}

.hero-title { grid-column: 1 / span 2; margin: 0; }
/* Il blocco laterale (testo + pulsanti) inizia molto più in basso del
   titolo, quasi alla sua fine — misurato: 29.8vw di scarto dall'inizio
   dell'h1 sul sito sorgente, non affiancato dall'alto. */
.hero-side { grid-column: 3 / span 2; width: 32.1vw; margin-top: 31.3vw; }

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1vw;
  margin-top: 2.4em;
}

/* Desktop e tablet con puntatore: Cargo tiene il fondo dei due claim
   agganciato alla prima viewport. La formula compensa continuamente la
   riduzione dei titoli in vw: nessun salto quando si trascina il lato
   destro della finestra. A 767px entra invece la composizione mobile. */
@media (min-width: 768px) and (pointer: fine) {
  .hero {
    padding-top: max(13.7vw, calc(100vh - 36.4vw - 1.5rem));
  }
}

/* Padding esatto dal CSS sorgente (.button-4): 0.6rem sopra/sotto,
   1.4rem a destra, 1.3rem a sinistra (asimmetrico), bordo 0.2rem,
   convertiti in em relativi al font-size del bottone stesso (1.1rem
   nel sorgente: 0.6/1.1, 1.4/1.1, 1.3/1.1, 0.2/1.1). */
.btn {
  display: inline-block;
  padding: 0.545em 1.27em 0.545em 1.18em;
  border-radius: 999px;
  border: 0.182em solid var(--ink);
  font-size: clamp(10px, 0.82vw, 0.82vw);
  line-height: 1.1;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); opacity: 1; }
.btn--solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--solid:hover { background: transparent; color: var(--ink); opacity: 1; }

@media (max-width: 767px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-title { grid-column: 1; }
  .hero-side { grid-column: 1; width: auto; margin-top: 9vw; }
}

/* ---------- sections ---------- */

/* Un solo padding (top) per bordo di sezione — prima avevo sia
   padding-bottom che padding-top su sezioni adiacenti, che si sommavano
   raddoppiando lo spazio reale misurato (~5vw totali tra sezioni, non
   9vw). */
.section {
  padding-top: 1.4vw;
  padding-bottom: 2.8vw;
  border-top: 2px solid var(--border);
}
.section:last-of-type,
footer.section {
  padding-bottom: 3.8vw;
}

/* Spaziatura tra i blocchi, misurata sul sorgente: ~3vw combinati
   (in precedenza avevo margin-top + padding-top a 4vw ciascuno = 8vw,
   più del doppio del reale). */
.service-block {
  margin-top: 2.5vw;
  padding-top: 0.6vw;
}

/* Introduzione della sezione servizi: le tre informazioni restano
   leggibili come blocchi distinti, senza aumentare l'interlinea interna. */
.section--services > .grid-3:first-child .kicker {
  margin-bottom: 1.5em;
}
.section--services > .grid-3:first-child p:first-of-type {
  margin-bottom: 1.5em;
}
.section--services .service-block .col-label > p:first-child {
  margin-bottom: 1em;
}
.section--services .service-block .col-label > p:nth-child(2) {
  margin-bottom: 1em;
}

.service-block .col-side img {
  border-radius: 4px;
  width: 100%;
  height: auto;
}

/* Le due foto affiancate del blocco 01 (chi-siamo + home-02): nel
   sorgente hanno un'altezza fissa (~20.1vw) e larghezza naturale, non
   sono stirate a riempire due colonne uguali — misurato: h=510px a
   innerWidth 2541 = 20.1vw. */
.service-images {
  display: flex;
  height: 20.1vw;
  gap: var(--grid-gap);
}
.service-images img {
  border-radius: 4px;
  height: 100%;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  object-fit: cover;
}

@media (min-width: 768px) {
  #tecnobar .text-sub {
    font-size: clamp(12px, 0.92vw, 0.92vw);
  }
  /* Lo stacco verso l'elenco deve coincidere con quello tra il testo del
     servizio 01 e "Concept e progettazione". */
  #tecnobar .tecnobar-row2 .text-sub {
    margin-bottom: 1em;
  }
  #tecnobar .tecnobar-row2 .col-label > p:first-child {
    margin-bottom: 1.5em;
  }
  .section--muted .cta-block { margin-top: 1.35em; }
  .section--muted .cta-question { margin-bottom: 1.25em; }
  /* Sul riferimento le fotografie iniziano subito sotto l'introduzione
     della sezione, mentre il testo "01" resta più in basso a sinistra. */
  .service-images {
    transform: translateY(-6vw);
    margin-bottom: -6vw;
  }
}

@media (max-width: 767px) {
  .service-images { flex-direction: column; height: auto; }
  .service-images img { width: 100%; height: auto; }
}

/* Elenchi puntati reali (disc), peso normale — verificato via DOM sul sito
   sorgente: list-style-type:disc, font-weight:400, nessun bordo. */
.plain-list,
.tag-list {
  list-style: disc outside;
  padding-left: 1.86vw;
  margin: 0.6em 0 0;
}
.plain-list li,
.tag-list li {
  font-weight: 400;
  padding: 0.15em 0;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps li {
  padding: 1.35em 0;
  border-bottom: 2px solid var(--border);
}
.steps li:first-child { padding-top: 0; }
/* "01 — Ascolto e analisi" ecc. usano la stessa dimensione dell'h2 (1.4vw)
   nell'originale, non il corpo testo standard. */
.steps li strong {
  display: block;
  font-size: clamp(16px, 1.4vw, 1.4vw);
  font-weight: 400;
  line-height: 1.2;
}
.steps li p {
  margin: 0.55em 0 0;
  line-height: 1.25;
  color: var(--ink-soft);
}

/* Altezza fissa (~15vw), larghezza naturale — misurato: h=382px a
   innerWidth 2541 = 15.0vw. Non stirate a riempire 3 colonne uguali. */
.product-row {
  display: flex;
  justify-content: flex-start;
  height: 15vw;
  gap: var(--grid-gap);
  margin-bottom: 0;
}
.product-row img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.cta-block {
  width: 24.44%;
  margin-top: 0.9vw;
  margin-left: calc(57.28% + (2 * var(--grid-gap)));
  padding-top: 0;
}
.cta-question { }

/* Dopo la CTA resta il respiro standard di una sezione, senza un vuoto
   eccessivo prima della linea che introduce i marchi. */
.section--muted { padding-bottom: 4.5vw; }

/* Mantiene il distacco corretto tra la composizione dei marchi e il footer. */
.section.section--brands:last-of-type { padding-bottom: 10.2vw; }

/* ---------- brands ---------- */

/* Altezza misurata sul sorgente: foto grande h=740px a innerWidth 2541
   = 29.1vw. */
.brands-content {
  margin-top: 3vw;
}

.brands-media {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
  gap: var(--grid-gap);
  height: 29.1vw;
}
.brands-media__main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
.brands-media__stack {
  display: contents;
}
.brands-media__stack img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  align-self: start;
}

@media (max-width: 767px) {
  .brands-media {
    grid-template-columns: 3fr 1fr 1fr;
    height: 30vw;
    margin-top: 2rem;
    margin-bottom: 3vw;
  }
}

.brands-copy > p:first-child,
.brands-copy > p:nth-child(2) { margin-bottom: 1em; }

.brand-item { margin-bottom: 2.8em; }
.brand-item > p:last-child { margin-bottom: 1em; }
/* "— La Cimbali" ecc. usano la dimensione h2 (1.4vw) nell'originale. */
.brand-name {
  font-size: clamp(16px, 1.4vw, 1.4vw);
  font-weight: 400;
  margin-bottom: 0.4em;
}

/* ---------- filosofia ---------- */

.quote {
  font-style: italic;
  color: var(--paper);
}

/* ---------- CTA contatti ---------- */

.contact-cta { margin-top: 1.5em; display: inline-block; }

/* ---------- footer ---------- */

/* ---------- footer bottom: riga © / Top, proporzioni misurate 49.6% / 32.8% / 16% ---------- */

.footer-bottom {
  margin-top: 5vw;
  padding-top: 0;
  display: grid;
  grid-template-columns: 3.1fr 2.05fr 1fr;
  column-gap: var(--grid-gap);
  align-items: center;
}
.footer-bottom p { margin: 0; }
.back-to-top { grid-column: 3; justify-self: end; }
.back-to-top::before { content: "↑"; margin-right: 0.4em; }

footer.section {
  padding-top: 1vw;
  /* 5 mm dal bordo fisico della pagina: su monitor larghi il vecchio
     valore in vw lasciava un vuoto sempre maggiore sotto © e Top. */
  padding-bottom: 5mm;
}
/* La regola .section:last-of-type ha una specificità maggiore: questo
   override mantiene davvero il margine inferiore fisico del footer. */
footer.section:last-of-type { padding-bottom: 5mm; }

.contact-details { margin-top: 1.1vw; }
.contact-details p { margin-bottom: 1.2em; }
.contact-details p:last-child { margin-bottom: 0; }
footer .col-main .plain-list { margin-top: 1.104vw; }
footer .col-main > h2,
footer .col-side > h2 { margin-bottom: 0.65em; }

/* Desktop: il footer occupa l'ultima viewport e la riga © / Top / ora
   resta ancorata al suo bordo inferiore, come nella composizione Cargo. */
@media (min-width: 768px) {
  footer.section {
    /* Il footer si comprime insieme alla larghezza della finestra: con la
       vecchia altezza fissa, restringendo il desktop restava un vuoto
       sproporzionato dopo l'ultima riga di testo. */
    min-height: min(100vh, 30vw);
    display: flex;
    flex-direction: column;
    padding-top: 0.35vw;
  }
  footer.section > .footer-bottom { margin-top: auto; }
  footer .col-side > h2:nth-of-type(2) { margin-top: 4vw; }
  footer .col-side .quote { margin-bottom: 2em; }
  footer .col-side > h2:first-child + p,
  footer .col-side .quote + p { margin-bottom: 1.104vw; }
}

.small-caps {
  font-variant: small-caps;
  text-transform: lowercase;
}

/* ---------- mobile: collapse la griglia a 4 tracce ---------- */

@media (max-width: 767px) {
  :root { --gutter: 2.2vw; --grid-gap: 2.5vw; }
  body { font-size: 16px; }
  h1 { font-size: 15vw; }
  h2, h3, .kicker, .lead, .steps li strong, .brand-name { font-size: 1.25rem; }
  .lead { font-size: 5.8vw; }
  p { font-size: 0.95rem; }
  .text-sub { font-size: 0.85rem; }
  .btn { font-size: 0.85rem; }
  .site-header { min-height: 99vw; }
  .header-grid { position: relative; grid-template-columns: 1.2fr 1fr; column-gap: var(--grid-gap); }
  .header-col p { margin: 0 0 0.55rem; }
  /* Intestazione mobile: la colonna principale guida la gerarchia;
     i dati aziendali crescono anch'essi, ma restano volutamente minori. */
  .mobile-break { display: inline; }
  .header-col--emphasis p {
    font-size: clamp(1.55rem, 4vw, 2rem);
    line-height: 1.08;
  }
  .header-col:not(.header-col--emphasis):not(.header-col--right) p {
    font-size: clamp(1.125rem, 3.73vw, 1.75rem);
    line-height: 1.1;
  }
  .header-col:not(.header-col--emphasis):not(.header-col--right) p:first-child {
    margin-bottom: 1.5rem;
  }
  .header-logo {
    grid-column: 1 / -1;
    margin-bottom: clamp(12px, 5.5vw, 32px);
  }
  .header-logo img { width: 96vw; }
  /* Le due colonne informative iniziano dalla stessa linea sotto il logo. */
  .header-col--emphasis {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-top: 0;
  }
  .header-col:not(.header-col--emphasis):not(.header-col--right) { grid-column: 2; grid-row: 2; }
  .header-col:not(.header-col--emphasis):not(.header-col--right),
  .header-col--right { transform: translateX(2.4vw); }
  .header-col:not(.header-col--emphasis):not(.header-col--right) p:nth-child(2) { display: none; }
  .header-contact-mobile {
    display: block;
    margin-top: 1.5rem !important;
  }
  .header-col--right {
    /* Terza riga della stessa griglia dei dati aziendali: non coordinate
       assolute, così il suo bordo sinistro coincide sempre con l'indirizzo. */
    display: none;
  }
  /* Scala appena più contenuta, senza cambiare la gerarchia rispetto ai
     dati aziendali nella colonna di destra. */
  .header-col--emphasis .professionalita-test,
  .header-col--emphasis .header-emphasis-scale {
    font-size: 1.17em !important;
  }
  .desktop-separator { display: none; }
  .hero { padding-top: 13.7vw; padding-bottom: 5.6vw; }
  .hero-line { display: block; }
  .desktop-hero-break { display: none; }
  /* Più aria tra il secondo claim e il testo introduttivo nella colonna
     unica mobile. */
  .hero-side { margin-top: 7vw; }
  .hero-actions {
    margin-top: 6.5em;
    gap: 2.5rem;
  }
  .hero .btn { font-size: 1.15rem; }
  .hero { padding-bottom: 12vw; }
  #tecnobar h2 {
    font-size: 2.15rem;
    line-height: 1.1;
    max-width: 15em;
  }
  .tecnobar-row2 { margin-top: 3vw; }
  #tecnobar .kicker { font-size: 1.75rem; }
  .tecnobar-row2 .col-label > p:first-child {
    font-size: 1.3rem;
    line-height: 1.12;
    margin-bottom: 1.95rem;
  }
  .tecnobar-row2 .text-sub {
    font-size: 1.24rem;
    line-height: 1.18;
    margin-bottom: 1em;
  }
  #tecnobar .plain-list {
    font-size: 1.3rem;
    line-height: 1.22;
  }
  /* Sui telefoni i marker restano pienamente entro il gutter, senza
     avvicinarsi al bordo sinistro dello schermo. */
  #tecnobar .plain-list,
  .section--services .plain-list,
  footer .plain-list {
    padding-left: 1.75rem;
  }
  /* La foto dopo il primo elenco segue la stessa distanza della foto dopo
     l'elenco "Concept e progettazione". */
  #tecnobar .col-main-side {
    height: 31vw;
    margin-top: 1.5rem;
  }
  #tecnobar { padding-bottom: 8vw; }

  /* Cosa facciamo: stessa scala verticale della sezione Tecnobar. */
  .section--services > .grid-3:first-child .kicker,
  .section--muted .kicker,
  .section--brands .kicker,
  footer .kicker { font-size: 1.75rem; }
  #tecnobar .kicker,
  .section--services > .grid-3:first-child .kicker { font-size: 2rem; }
  .section--services > .grid-3:first-child .col-label > p:first-of-type,
  .section--services .service-block .col-label > p:first-child {
    font-size: 1.3rem;
    line-height: 1.12;
  }
  .section--services > .grid-3:first-child .col-label > p:last-child,
  .section--services .service-block .col-label > p:nth-child(2) {
    font-size: 1.24rem;
    line-height: 1.18;
  }
  .section--services .plain-list {
    font-size: 1.3rem;
    line-height: 1.22;
  }
  .section--services .service-block { margin-top: 6vw; }
  .service-images,
  .product-row { margin-top: 1.5rem; }
  .section--services .service-block .product-row { margin-top: 0; }

  /* Come lavoriamo: le fasi devono avere aria e una gerarchia netta. */
  .section--muted h2 {
    font-size: 2rem;
    line-height: 1.1;
    max-width: 15em;
  }
  .section--muted .kicker,
  .section--muted .steps li strong {
    font-size: 2rem;
    line-height: 1.1;
  }
  .section--muted .col-main > p {
    font-size: 1.36rem;
    line-height: 1.2;
  }
  .section--muted .steps { margin-top: 1.5rem; }
  .section--muted .steps li {
    padding-top: 1.6rem;
    padding-bottom: 4rem;
  }
  .section--muted .steps li:first-child { padding-top: 0; }
  .section--muted .steps li:last-child { border-bottom: 0; }
  .section--muted .steps li strong {
    font-weight: 400;
  }
  .section--muted .steps li p {
    font-size: 1.36rem;
    line-height: 1.22;
  }
  .section--muted .cta-block { margin-top: 4.75rem; }
  .section--muted .cta-question {
    font-size: 1.3rem;
    margin-bottom: 4rem;
  }
  .section--muted .btn {
    font-size: 1.15rem;
    padding: 0.545em 1.27em 0.545em 1.18em;
  }
  .section--muted { padding-bottom: 13vw; }

  /* Marchi: testi e nomi mantengono la stessa scala del resto del sito. */
  .section--brands h2 {
    font-size: 2rem;
    line-height: 1.1;
  }
  .section--brands .plain-lines,
  .brands-copy > p {
    font-size: 1.36rem;
    line-height: 1.2;
  }
  .section--brands .brand-item > p {
    font-size: 1.36rem;
    line-height: 1.2;
  }
  .section--brands .brand-item > p.brand-name {
    font-size: 2rem;
    line-height: 1.15;
  }
  .section--brands .kicker { font-size: 2rem; }
  .section--brands .brands-copy > p:first-child { font-size: 1.36rem; }
  .section--brands .brand-name {
    font-size: 2rem;
    line-height: 1.15;
  }
  .section--brands .brand-item { margin-bottom: 3.2rem; }
  .brands-copy > p:nth-child(2) { margin-bottom: 2.4rem; }
  .section--brands .brands-content { margin-top: 4.5rem; }

  /* Distanza campione: telefono/e-mail → indirizzo nel blocco Contatti. */
  :root { --mobile-reference-gap: 1.632rem; }
  :root { --mobile-brand-gap: 2.4rem; }
  .section--brands .brands-copy > p:nth-child(2),
  .section--brands .brand-item {
    margin-bottom: var(--mobile-brand-gap);
  }
  .section--brands .brand-item > p:last-child { margin-bottom: 0; }
  .section--brands .brands-copy > p.brand-name {
    margin-bottom: var(--mobile-brand-gap);
  }
  .section--brands .brands-copy > p.brand-name:last-child { margin-bottom: 0; }

  /* Contatti: chiusura con la stessa leggibilità delle sezioni precedenti. */
  footer .col-main > h2,
  footer .col-side > h2 {
    font-size: 2rem;
    line-height: 1.1;
  }
  footer .kicker { font-size: 2rem; }
  footer .col-label,
  footer .col-main,
  footer .col-side { font-size: 1.36rem; line-height: 1.2; }
  footer .grid-3 p {
    font-size: 1.36rem;
    line-height: 1.2;
  }
  footer .col-main .plain-list {
    font-size: 1.3rem;
    line-height: 1.22;
    /* Include anche il gap della colonna flex nella sezione Forniture
       Ho.Re.Ca.: così il distacco percepito è realmente identico. */
    margin-top: 2.62rem;
  }
  footer .col-side > h2:first-child + p,
  footer .col-side .quote + p { margin-bottom: var(--mobile-reference-gap); }
  footer .grid-3 { gap: 2.8rem; }
  /* Footer mobile: i tre blocchi non devono risultare compressi. */
  footer .col-main { margin-bottom: 3.5rem; }
  footer .col-side > h2:nth-of-type(2) { margin-top: 3rem; }
  footer .col-side .quote { margin-bottom: 1.5rem; }
  .section--muted .grid-3 { row-gap: 3.2rem; }
  .section--muted .col-main > h2 { margin-bottom: 1.7em; }
  .grid-3 {
    grid-template-columns: 1fr;
    gap: 1.4em;
  }
  /* Stessa cadenza tra sovratitolo e titolo nelle tre sezioni editoriali. */
  #tecnobar > .grid-3:first-child,
  .section--muted > .grid-3:first-child,
  .section--brands > .grid-3:first-child { row-gap: 1.4em; }
  .grid-3 > .col-label,
  .grid-3 > .col-main,
  .grid-3 > .col-side,
  .grid-3 > .col-main-side { grid-column: 1; }
  .col-label { display: flex; flex-direction: column; gap: 0.6em; }
  .product-row {
    height: 30vw;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .product-row img {
    width: 30%;
    height: 100%;
    min-width: 0;
    object-fit: contain;
  }
  .cta-block { width: auto; margin-left: 0; padding-top: 0; }
  .brands-content { margin-top: 2em; }
  .section { padding-top: 4vw; }
  /* Un distacco netto tra il trittico fotografico e l'inizio dei contatti. */
  .section.section--brands:last-of-type { padding-bottom: 12vw; }
  footer.section { padding-top: 3vw; }
  .footer-bottom {
    grid-template-columns: 1fr auto 1fr;
    column-gap: 0;
    align-items: end;
    margin-top: 10vw;
  }
  .footer-bottom p,
  .footer-bottom .back-to-top {
    font-size: 1.36rem;
    line-height: 1.1;
  }
  .footer-bottom .back-to-top { grid-column: 3; justify-self: end; }
}

/* Mobile largo (come il confronto fornito): la tipografia dell'header
   conserva la stessa aria e gerarchia della composizione Cargo senza
   compromettere l'iPhone stretto. */
@media (min-width: 600px) and (max-width: 767px) {
  .header-grid {
    /* La colonna dei dati deve ospitare "Piazza Camillo Benso" su una
       riga, come nel layout Cargo: non si sacrifica la scala del testo. */
    grid-template-columns: 1.3fr 0.95fr;
  }
  .header-col p { margin-bottom: 1rem; }
  .header-col--emphasis p:first-child {
    margin-bottom: 2.5rem;
  }
  .header-col:not(.header-col--emphasis):not(.header-col--right) p {
    font-size: clamp(1.8rem, 4.55vw, 2.125rem);
    line-height: 1.28;
  }
  .header-col:not(.header-col--emphasis):not(.header-col--right) p:first-child {
    margin-bottom: 1.5rem;
  }
}

/* Regolazione puntuale richiesta per l'intestazione di confronto. */
.professionalita-test { font-size: 1.25em !important; }
.header-emphasis-scale { font-size: 1.25em !important; }
.header-col--emphasis p { line-height: 1.3 !important; }
.header-col--emphasis p:first-child { margin-bottom: 0.8em !important; }

/* Desktop: il blocco informativo sinistro resta importante ma leggermente
   più contenuto rispetto alla prima scala impostata. */
@media (min-width: 768px) {
  .header-col--emphasis .professionalita-test,
  .header-col--emphasis .header-emphasis-scale {
    font-size: 1.18em !important;
  }

  /* Evita che il marchio diventi troppo piccolo nei desktop stretti. */
  .header-logo img {
    width: max(170px, 11.7vw);
  }
}

/* Il numero deve restare leggibile su una riga anche sull'iPhone stretto. */
@media (max-width: 767px) {
  .header-col--emphasis a.header-emphasis-scale {
    white-space: nowrap;
    font-size: 1em !important;
    letter-spacing: -0.02em;
  }
}