@font-face {
  font-family: "Encode Sans";
  src: url("../fonts/encode-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --sam-red: #d80817;
  /* Testo secondario sulle superfici rosse. Il rosa precedente si fermava
     a 4,12:1, sotto la soglia AA per il testo normale; questo arriva a
     4,66:1 e resta piu' tenue del bianco pieno dei titoli. */
  --su-rosso: #ffecee;
  --sam-red-dark: #b90612;
  --sam-yellow: #f8c50a;
  --ink: #14161a;
  --slate: #525861;
  --paper: #ffffff;
  --mist: #f7f7f7;
  --line: #e3e4e6;
  --focus: #15171b;
  color-scheme: light;
}

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

html {
  min-width: 320px;
  background: var(--mist);
  scroll-behavior: smooth;
  scrollbar-color: var(--sam-red) #ececef;
  scrollbar-width: thin;
}

body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--mist);
  color: var(--ink);
  font-family: "Encode Sans", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

body::-webkit-scrollbar { width: 12px; }
body::-webkit-scrollbar-track { background: #ececef; }
body::-webkit-scrollbar-thumb {
  border: 3px solid #ececef;
  border-radius:62.4375rem;
  background: var(--sam-red);
}

::selection {
  background: var(--sam-yellow);
  color: var(--ink);
}

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

svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

/* Anello di focus a due toni. Con un colore solo era invisibile su meta'
   del sito: grafite su grafite fa 1,04 a 1. L'anello bianco interno si
   vede sulle fasce scure, quello grafite esterno sui fondi chiari, quindi
   almeno uno dei due e' sempre leggibile. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding:0.75rem 1.125rem;
  transform: translateY(-160%);
  border-radius:62.4375rem;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
}

.skip-link:focus {
  transform: translateY(0);
}

/* A dimensioni di testo molto alte una parola lunga puo' non entrare nella
   larghezza dello schermo. Spezzarla e' brutto, ma meno del far scorrere
   orizzontalmente tutta la pagina. break-word interviene solo quando la
   parola non ci sta davvero, quindi alle dimensioni normali non si vede. */
body {
  overflow-wrap: break-word;
}

/* Gli indirizzi email sono un'unica parola lunga e senza punti di rottura
   naturali: qui serve la regola piu' aggressiva. */
a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

/* Nei titoli la parola non si spezza MAI a meta': una parola tagliata in un
   titolo si legge male e si nota subito. Le dimensioni dei titoli sono
   tarate perche' la parola piu' lunga entri gia' a 320px di larghezza. */
h1, h2, h3,
.hero-title,
.services-title,
.service-title {
  overflow-wrap: normal;
  hyphens: manual;
}

/* Misura di riga. Oltre le settanta battute l'occhio fatica a ritrovare
   l'inizio della riga successiva: sui tablet alcuni paragrafi arrivavano a
   ottantasette. Il limite e' in ch, quindi segue la dimensione del testo. */
:is(.container, .service-feature__copy, .legal-text, .compact-card) :is(p, li, dd),
.service-copy {
  max-width: 68ch;
}

/* Le pagine senza fotografia nella prima schermata non devono tenere una
   colonna vuota: privacy e 404 lasciavano libero il 59 per cento della
   larghezza. */
.inner-hero__grid:not(:has(.inner-hero__visual)) {
  grid-template-columns: minmax(0, 1fr);
}

/* Un figlio di griglia o di flex non scende sotto la dimensione minima del
   proprio contenuto finche' min-width resta auto, che e' il valore
   predefinito. Con il testo del browser al 200 per cento questo spinge
   intere colonne fuori dallo schermo su un telefono.
   La regola e' volutamente generale: su un elemento di blocco normale
   min-width auto calcola gia' zero, quindi non cambia nulla, e agisce solo
   dove serve davvero. Qualunque regola con una classe la sovrascrive. */
:where(body *) {
  min-width: 0;
}


/* In una riga flex che va a capo, l'elemento prende la larghezza del proprio
   contenuto anche quando la riga e' piu' stretta: con il testo molto grande
   il titolo dell'invito all'azione sporgeva dallo schermo. */
.cta-band__inner > * {
  max-width: 100%;
}

/* Il bersaglio dello skip link deve essere focalizzabile, altrimenti il
   collegamento scorre la pagina ma il focus da tastiera resta indietro.
   L'anello di focus qui sarebbe rumore visivo: il contorno lo riceve il
   contenuto, non il contenitore. */
main[tabindex="-1"]:focus {
  outline: none;
}

.comp-frame {
  position: relative;
  width: 100%;
  max-width: none;
  aspect-ratio: 1505 / 1045;
  overflow: hidden;
  background: var(--paper);
}

/* Testata identica su tutte le pagine: stessa altezza, stesso allineamento
   al contenitore dei contenuti e stesso comportamento allo scorrimento.
   Prima la home aveva una testata propria, alta in percentuale del riquadro
   della prima schermata e non agganciata, quindi cambiando pagina il marchio
   saltava di 48 pixel e l'altezza cambiava con la larghezza della finestra. */
.site-header {
  position: sticky;
  z-index: 80;
  top: 0;
  width: 100%;
  height: 96px;
  border-bottom: 1px solid #ededee;
  background: rgba(255, 255, 255, 0.98);
}

/* Sulla home il riquadro della prima schermata riserva gia' la sua fascia
   superiore: il margine negativo evita che la testata ne aggiunga una
   seconda, senza toccare le coordinate del comp approvato. */
@media (min-width: 1101px) {
  body[data-page="home"] .site-header { margin-bottom:-6rem; }
}

.brand {
  position: absolute;
  top: 0;
  left: max(4.3%, calc((100% - 1280px) / 2));
  width: min(550px, 38%);
  height: 100%;
  color: var(--ink);
  text-decoration: none;
}

.brand__mascot {
  position: absolute;
  top: 3%;
  left: -3%;
  width: 20%;
  height: 94%;
  object-fit: contain;
}

/* Lettering vettoriale del marchio. Il file SVG ha proporzioni 510 per 71:
   object-fit contain lo mantiene integro dentro la scatola, allineato a
   sinistra e centrato in verticale a qualunque larghezza. */
.brand__lockup {
  position: absolute;
  top: 4%;
  left: 17%;
  width: 83%;
  height: 92%;
  object-fit: contain;
  object-position: left center;
}

.primary-nav {
  position: absolute;
  top: 0;
  right: max(4.9%, calc((100% - 1280px) / 2));
  left: 60%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}

.primary-nav a {
  position: relative;
  display: grid;
  height: 100%;
  place-items: center;
  color: #343840;
  font-size:clamp(12px, 1.13vw, 17px);
  font-weight: 600;
  letter-spacing: 0.015em;
  text-decoration: none;
  text-transform: uppercase;
}

.primary-nav a[aria-current="page"] {
  color: var(--sam-red);
}

.primary-nav a[aria-current="page"]::after {
  position: absolute;
  right: 0;
  bottom: 23%;
  left: 0;
  height: 4px;
  background: var(--sam-red);
  content: "";
}

.home-hero,
.home-services {
  position: static;
}

.hero-photo {
  z-index: 1;
  display: block;
  object-fit: cover;
  object-position: center;
}

.hero-wash {
  position: absolute;
  z-index: 2;
  top: 9.58%;
  left: 0;
  width: 51%;
  height: 52.9%;
  background: linear-gradient(90deg, #fff 0%, #fff 74%, rgba(255, 255, 255, 0.88) 86%, rgba(255, 255, 255, 0) 100%);
}

.hero-title {
  z-index: 4;
  top: 13.7%;
  width: 40.5%;
  color: var(--ink);
  font-family: "Encode Sans", sans-serif;
  /* 70px alla larghezza di progetto (1505): espresso in vw il titolo scala
     con il riquadro invece di restare fisso, che era la causa della
     sovrapposizione con il paragrafo sotto i 1170px. */
  font-size: clamp(46px, 4.651vw, 88px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.92;
  text-wrap: balance;
}

.hero-title span {
  display: block;
  white-space: nowrap;
}

.text-red { color: var(--sam-red-dark); }

.hero-copy {
  z-index: 4;
  width: 34%;
  margin: 0;
  color: #565c65;
  font-size: clamp(18px, 1.728vw, 32px);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.35;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap:1rem;
  min-height: 60px;
  border: 0;
  text-decoration: none;
}

.button--primary {
  z-index: 5;
  top: 40.8%;
  left: 5%;
  width: 22.6%;
  height: 5.8%;
  border-radius:62.4375rem;
  background: var(--sam-red);
  color: #fff;
  font-size:clamp(18px, 1.58vw, 24px);
  font-weight: 400;
  letter-spacing: -0.015em;
}

.button--primary svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.5;
}

.proof-row {
  position: absolute;
  z-index: 6;
  top: 49.4%;
  left: 5%;
  width: 42.5%;
  min-height: 5.6%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 0.82fr 1.28fr 1.15fr;
  align-items: center;
  list-style: none;
}

.proof-row li {
  min-height: 38px;
  padding:0 1.375rem;
  display: flex;
  align-items: center;
  gap:0.75rem;
  border-right: 1px solid #aeb1b6;
  color: #262a30;
  font-size:clamp(13px, 1.16vw, 17.5px);
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
}

.proof-row li:first-child { padding-left: 0; }
.proof-row li:last-child {
  padding-right: 0;
  border-right: 0;
}

.proof-row svg {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  color: var(--sam-red);
  stroke-width: 2.3;
}

/* Le tre icone hanno la stessa misura: le differenze precedenti (34, 38 e
   46 px) servivano a compensare la terza, che era un'immagine raster con
   bordi vuoti. Ora sono tre segni vettoriali dello stesso tratto. */

.proof-icon--iso {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

.hero-sweep {
  position: absolute;
  z-index: 3;
  left: -9%;
  width: 62%;
  border-radius: 0 0 56% 68%;
  pointer-events: none;
}

.hero-sweep--gray {
  top: 50.2%;
  height: 11.3%;
  transform: rotate(2deg);
  border-bottom: 3px solid #e3e4e6;
}

.hero-sweep--red {
  top: 50.9%;
  height: 11.5%;
  transform: rotate(2.6deg);
  border-bottom: 16px solid var(--sam-red);
}

.home-services::before {
  position: absolute;
  z-index: 5;
  inset: 62.2% 0 0;
  background: var(--mist);
  content: "";
}

.services-title {
  z-index: 8;
  margin: 0;
  width: 20%;
  color: var(--ink);
  font-size: clamp(28px, 2.658vw, 48px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.services-title-rule {
  position: absolute;
  z-index: 8;
  top: 70.8%;
  /* centrato sul titolo, non sulla pagina: il titolo sta in una scatola
     larga il 20% che parte dal 41.59%, quindi il suo centro e' al 51.59% */
  left: 49.59%;
  width: 4%;
  height: 5px;
  background: var(--sam-yellow);
}

.service-shell {
  z-index: 7;
  display: block;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius:0.75rem 0.75rem 0 0;
  background: #fff;
}

.service-photo {
  z-index: 7;
  display: block;
  border-radius:0 0 0.75rem 0.75rem;
  object-fit: cover;
}

.service-icon {
  z-index: 9;
  display: grid;
  place-items: center;
}

.service-icon::before {
  position: absolute;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.service-icon--red { color: var(--sam-red); }
.service-icon--yellow { color: var(--sam-yellow); }

.service-icon svg {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  color: #fff;
  stroke-width: 3.2;
}

.service-title {
  z-index: 9;
  margin: 0;
  color: var(--ink);
  font-size: clamp(18px, 1.462vw, 26px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.service-copy {
  z-index: 9;
  margin: 0;
  color: var(--slate);
  font-size: clamp(14px, 1.063vw, 19px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.service-arrow {
  position: absolute;
  z-index: 10;
  top: 77.3%;
  display: grid;
  width: 2.6%;
  height: 4.1%;
  place-items: center;
  color: var(--sam-red);
  text-decoration: none;
}

.service-arrow--food { left: 29.7%; }
.service-arrow--bar { left: 61.05%; }
.service-arrow--host { left: 92.4%; }

.service-arrow svg {
  width: 28px;
  height: 34px;
  stroke-width: 3;
}

/* Shared site system */
/* Margine laterale unico per tutto il sito. Prima ogni sezione aveva il
   suo (18, 20, 22 e 36 px su mobile) e il testo partiva da ascisse diverse
   scorrendo la pagina. */
.container {
  width: min(1280px, calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

.section {
  padding-block: 120px;
  background: var(--paper);
}

.section--soft { background: #f4f4f5; }

.section-heading h2,
.standard-copy h2,
.contexts-copy h2,
.cta-band h2,
.contact-aside h2 {
  margin: 0;
  font-size:clamp(38px, 4vw, 62px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.section-heading > p,
.contexts-copy > p {
  margin:1.625rem 0 0;
  color: var(--slate);
  font-size:1.125rem;
  line-height: 1.65;
}

.section-heading--center {
  max-width: 820px;
  margin:0 auto 4rem;
  text-align: center;
}

.lead {
  color: var(--ink);
  font-size:clamp(22px, 2vw, 29px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.35;
}

.text-link {
  display: inline-flex;
  align-items: center;
  /* Il collegamento e' alto 20px sul solo testo: sotto i 24px minimi per un
     bersaglio tattile. Il padding verticale lo porta a 28 senza spostare la
     riga di base, perche' il margine superiore viene ridotto della stessa
     quantita'. */
  min-height: 1.75rem;
  gap:0.625rem;
  margin-top:0.875rem;
  padding:0.25rem 0;
  color: var(--sam-red-dark);
  font-weight: 750;
  text-decoration: none;
}

.inline-arrow {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

.text-link .inline-arrow { transition: transform 180ms ease; }
.text-link:hover .inline-arrow { transform: translateX(5px); }

.button--light,
.button--dark {
  min-height: 56px;
  padding:0 1.75rem;
  border-radius:62.4375rem;
  font-size:1rem;
  font-weight: 750;
}

.button--light { background: #fff; color: var(--ink); }
.button--dark { background: var(--ink); color: #fff; }

.menu-toggle { display: none; }

.site-header.is-scrolled {
  box-shadow: 0 10px 30px rgba(20, 22, 26, 0.08);
}

/* Home: contenuto sotto la prima schermata approvata */
.section--intro { padding-top:9.375rem; }

.intro-grid,
.editorial-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap:clamp(60px, 9vw, 150px);
  align-items: start;
}

.intro-copy,
.editorial-copy {
  color: var(--slate);
  font-size:1.0625rem;
  line-height: 1.7;
}

.intro-copy p,
.editorial-copy p { margin:0 0 1.375rem; }

.facts-grid {
  margin-top:6.25rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}

.fact {
  min-height: 210px;
  padding:2.125rem 2.25rem 1.25rem 0;
  border-right: 1px solid var(--line);
}

.fact + .fact { padding-left:2.625rem; }
.fact:last-child { border-right: 0; }

.fact strong {
  display: block;
  color: var(--sam-red);
  /* Il minimo precedente, 64px, non stava nella colonna quando i tre dati
     sono affiancati sotto i 700px: "2015" andava a capo dopo la terza cifra.
     Il nowrap e' la garanzia che un numero non si spezzi mai. */
  font-size:clamp(2.75rem, 7vw, 6.5rem);
  font-weight: 750;
  letter-spacing: -0.07em;
  line-height: 0.9;
  white-space: nowrap;
}

.fact span {
  display: block;
  max-width: 230px;
  margin-top:1.375rem;
  color: var(--slate);
  font-size:0.9375rem;
  font-weight: 600;
  line-height: 1.45;
}

.section--contexts {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
}

.section--contexts::after {
  position: absolute;
  right: -12vw;
  bottom: -42vw;
  width: 70vw;
  height: 70vw;
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 8vw rgba(255,255,255,0.025), 0 0 0 16vw rgba(255,255,255,0.02);
  content: "";
}

.contexts-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap:clamp(60px, 10vw, 160px);
  align-items: center;
}

.contexts-copy > p { color: #bbc0c8; }
.contexts-copy .button { margin-top:1.5rem; }

.territory-list > div {
  display: grid;
  padding:1.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

.territory-list > div:first-child { border-top: 1px solid rgba(255,255,255,0.18); }
.territory-list strong { font-size:clamp(24px, 2.3vw, 34px); letter-spacing: -0.035em; }
.territory-list small { margin-top:0.375rem; color: #aeb4bd; font-size:0.9375rem; }

.standard-card {
  display: grid;
  grid-template-columns: 9.375rem minmax(0, 1fr) minmax(17rem, 21rem);
  gap:3.375rem;
  align-items: center;
  padding:3.625rem;
  border: 1px solid #e4e4e6;
  background: #fff;
  box-shadow: 0 24px 70px rgba(20,22,26,0.06);
}

.standard-mark {
  display: grid;
  width: 142px;
  height: 142px;
  place-items: center;
  border-radius: 50%;
  background: #fff2f3;
}

.standard-mark svg {
  width: 84px;
  height: 84px;
  color: var(--sam-red);
  stroke-width: 1.9;
}
.standard-copy h2 { font-size:clamp(34px, 3.25vw, 50px); }
.standard-copy > p { margin:1.375rem 0 0; color: var(--slate); font-size:1.0625rem; line-height: 1.6; }

.standard-meta {
  padding-left:2.125rem;
  border-left: 1px solid var(--line);
}

.standard-meta > span,
.standard-meta > strong { display: block; }
.standard-meta > span { margin-top:0.75rem; color: var(--slate); font-size:0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; }
.standard-meta > strong { margin-top:0.1875rem; font-size:1.125rem; }

.cta-band {
  padding-block: 72px;
  background: var(--sam-yellow);
}

.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:2.5rem;
}

.cta-band h2 { font-size:clamp(38px, 4.2vw, 64px); }

/* Inner pages */
/* Le regole che distinguevano le pagine interne sono state promosse a
   comportamento predefinito: non serve piu' alcuna variante. */

.inner-hero {
  position: relative;
  overflow: hidden;
  padding-block: 86px 96px;
  background: #f4f4f5;
}

.inner-hero::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 42%;
  height: 8px;
  background: var(--sam-red);
  content: "";
}

.inner-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap:clamp(60px, 8vw, 120px);
  align-items: center;
}

.inner-hero__copy h1 {
  max-width: 780px;
  margin: 0;
  font-size:clamp(56px, 6vw, 92px);
  font-weight: 750;
  letter-spacing: -0.058em;
  line-height: 0.92;
}

.inner-hero__copy > p {
  max-width: 620px;
  margin:2rem 0 0;
  color: var(--slate);
  font-size:clamp(18px, 1.6vw, 23px);
  line-height: 1.55;
}

.inner-hero__visual { position: relative; min-height: 480px; }
.inner-hero__visual::before {
  position: absolute;
  z-index: 0;
  right: -34px;
  bottom: -34px;
  width: 72%;
  height: 72%;
  background: var(--sam-yellow);
  content: "";
}

.inner-hero__visual img {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Anche qui il sorgente e' una fascia 3:1: il punto di ritaglio tiene il
   soggetto al centro e lascia il badge sopra la giacca, non sul viso. */
.inner-hero--about .inner-hero__visual img { object-position: 68% center; }
.inner-hero--services .inner-hero__visual img { object-position: 62% center; }
.inner-hero__badge {
  position: absolute;
  z-index: 2;
  right: -1px;
  bottom: -1px;
  max-width: 270px;
  padding:1.375rem 1.75rem;
  background: var(--sam-red);
  color: #fff;
}
.inner-hero__badge strong,
.inner-hero__badge span { display: block; }
.inner-hero__badge strong { font-size:1.25rem; }
.inner-hero__badge span { margin-top:0.3125rem; font-size:0.8125rem; line-height: 1.35; }

.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #d6d7d9;
  border-bottom: 1px solid #d6d7d9;
}

.principle { min-height: 280px; padding:2.625rem; border-right: 1px solid #d6d7d9; }
.principle:first-child { padding-left: 0; }
.principle:last-child { padding-right: 0; border-right: 0; }
.principle > span { color: var(--sam-red); font-size:0.8125rem; font-weight: 800; }
.principle h3 { margin:3.375rem 0 0.875rem; font-size:1.5rem; letter-spacing: -0.03em; }
.principle p { margin: 0; color: var(--slate); line-height: 1.6; }

.numbers-band { padding-block: 70px; background: var(--sam-red); color: #fff; }
.numbers-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; }
.numbers-band__grid > div { min-height: 135px; padding:0 2rem; border-right: 1px solid rgba(255,255,255,0.3); }
.numbers-band__grid > div:first-child { padding-left: 0; }
.numbers-band__grid > div:last-child { border-right: 0; }
.numbers-band strong { display: block; font-size:clamp(54px, 5vw, 78px); letter-spacing: -0.06em; line-height: 0.9; }
.numbers-band span { display: block; max-width: 190px; margin-top:1.125rem; color: var(--su-rosso); font-size:0.875rem; line-height: 1.4; }

.presence-grid,
.method-grid,
.legal-grid {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap:clamp(60px, 9vw, 140px);
  align-items: start;
}

.fine-print {
  padding:0.875rem 1rem;
  background: linear-gradient(90deg, #fff8da, rgba(255,248,218,0));
  font-size:0.8125rem !important;
}
.presence-list { border-top: 1px solid var(--line); }
.presence-list article { padding:2rem 0; border-bottom: 1px solid var(--line); }
.presence-list h3 { margin:0 0 0.625rem; font-size:1.75rem; letter-spacing: -0.035em; }
.presence-list p { margin: 0; color: var(--slate); line-height: 1.65; }

/* Services */
.service-intro { padding-bottom:5rem; }
.service-ledger { background: #fff; }
.service-feature {
  width: min(1440px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 650px;
  border-top: 1px solid var(--line);
}
.service-feature--last { border-bottom: 1px solid var(--line); }
.service-feature--reverse .service-feature__media { order: 2; }
.service-feature__media { position: relative; overflow: hidden; min-height: 560px; background: #ececee; }
.service-feature__media img { width: 100%; height: 100%; object-fit: cover; }

/* Le foto sorgente sono fasce 3:1 dentro riquadri quasi quadrati: si vede
   poco piu' di un terzo della larghezza. Il punto di ritaglio va scelto a
   mano per ciascuna, altrimenti il centro geometrico taglia il soggetto. */
#ristorazione .service-feature__media img { object-position: 68% center; }
#bar .service-feature__media img { object-position: 50% center; }
#ospitalita .service-feature__media img { object-position: 70% center; }
.service-feature__copy { align-self: center; max-width: 600px; padding:4.5rem clamp(48px, 7vw, 110px); }
.service-feature__copy h2 { margin: 0; font-size:clamp(38px, 3.8vw, 58px); letter-spacing: -0.048em; line-height: 1; }
.service-feature__copy > p { margin:1.5rem 0; color: var(--slate); font-size:1.0625rem; line-height: 1.65; }
.check-list { margin:1.75rem 0 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding:0.75rem 0 0.75rem 2.125rem; border-top: 1px solid var(--line); color: #30343a; font-weight: 600; }
.check-list li::before { position: absolute; top: 14px; left: 0; color: var(--sam-red); content: "✓"; font-weight: 900; }

.service-feature__media--graphic {
  display: grid;
  place-items: center;
  background: var(--sam-yellow);
  color: var(--ink);
}
.service-feature__media--graphic > span { position: absolute; top: 46px; left: 52px; font-size:1.75rem; font-weight: 800; }
.service-feature__media--graphic svg { width: 44%; color: var(--ink); stroke-width: 3; }
.service-feature__media--coast {
  position: relative;
  display: grid;
  background: #dfeff0;
  color: var(--ink);
}
.coast-sun { position: absolute; top: 13%; right: 13%; width: 170px; height: 170px; border-radius: 50%; background: var(--sam-yellow); }
.coast-line { position: absolute; right: -10%; bottom: -9%; left: -10%; height: 55%; border-radius: 50% 50% 0 0; background: var(--sam-red); transform: rotate(-5deg); }
.service-feature__media--coast strong { position: relative; z-index: 1; align-self: end; justify-self: start; margin:0 0 4.375rem 3.75rem; color: #fff; font-size:clamp(56px, 6vw, 92px); letter-spacing: -0.06em; line-height: 0.82; }

.section--quality { background: var(--sam-red); color: #fff; }
.quality-grid { display: grid; grid-template-columns: 0.55fr 1.45fr; gap:clamp(60px, 9vw, 150px); align-items: center; }
.quality-mark { display: grid; place-items: center; align-content: center; min-height: 360px; border: 1px solid rgba(255,255,255,0.4); }
.quality-mark svg {
  width: 104px;
  height: 104px;
  color: #fff;
  stroke-width: 1.8;
}
.quality-mark span { margin-top:1.5rem; font-size:0.8125rem; font-weight: 800; letter-spacing: 0.18em; }
.quality-mark strong { font-size:1.75rem; }
.quality-copy h2 { max-width: 830px; margin: 0; font-size:clamp(42px, 5vw, 72px); letter-spacing: -0.055em; line-height: 0.97; }
.quality-copy > p { max-width: 800px; margin:1.875rem 0; color: var(--su-rosso); font-size:1.125rem; line-height: 1.65; }
.quality-meta { display: flex; gap:2.1875rem; padding-top:1.375rem; border-top: 1px solid rgba(255,255,255,0.32); color: #fff; font-size:0.8125rem; font-weight: 700; }

.compact-cards { margin-top:4.375rem; display: grid; grid-template-columns: repeat(3, 1fr); }
.compact-card { min-height: 280px; padding:2.375rem; border: 1px solid #d8d9dc; border-right: 0; background: #fff; }
.compact-card:last-child { border-right: 1px solid #d8d9dc; }
.compact-card h3 { margin:0 0 0.875rem; font-size:1.5rem; letter-spacing: -0.03em; }
.compact-card p { margin: 0; color: var(--slate); line-height: 1.6; }

.method-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.method-list li { display: grid; grid-template-columns: 70px 1fr; gap:1.875rem; padding:1.75rem 0; border-bottom: 1px solid var(--line); }
.method-list li > span { color: var(--sam-red); font-size:0.8125rem; font-weight: 800; }
.method-list strong { font-size:1.375rem; }
.method-list p { margin:0.4375rem 0 0; color: var(--slate); line-height: 1.5; }

/* Contact */
.contact-hero { padding-block: 110px; background: var(--sam-red); color: #fff; }
.contact-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap:clamp(60px, 10vw, 160px); align-items: center; }
.contact-hero__copy h1 { margin: 0; font-size:clamp(58px, 6.5vw, 98px); letter-spacing: -0.06em; line-height: 0.9; }
.contact-hero__copy h1 span { color: var(--sam-yellow); }
.contact-hero__copy > p:last-child { max-width: 650px; margin:2rem 0 0; color: var(--su-rosso); font-size:1.25rem; line-height: 1.55; }
.contact-hero__quick { border-top: 1px solid rgba(255,255,255,0.36); }
.contact-hero__quick > * { position: relative; display: block; padding:1.5625rem 3rem 1.5625rem 0; border-bottom: 1px solid rgba(255,255,255,0.36); color: inherit; text-decoration: none; }
.contact-hero__quick span,
.contact-hero__quick strong { display: block; }
.contact-hero__quick span { margin-bottom:0.5rem; color: var(--su-rosso); font-size:0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.contact-hero__quick strong { font-size:clamp(17px, 1.5vw, 22px); line-height: 1.35; overflow-wrap: anywhere; }
.contact-hero__quick .inline-arrow { position: absolute; top: 34px; right: 0; color: var(--sam-yellow); }

.contact-layout { display: grid; grid-template-columns: 0.75fr 1.25fr; gap:clamp(70px, 10vw, 150px); align-items: start; }
.contact-aside > p { color: var(--slate); line-height: 1.65; }
.contact-note { margin-top:2.5rem; padding:1.5rem; border-top: 4px solid var(--sam-yellow); background: #f4f4f5; }
.contact-note ul { margin:0.875rem 0 0; padding-left:1.25rem; color: var(--slate); line-height: 1.7; }
.contact-form { padding:3rem; border: 1px solid var(--line); background: #fff; box-shadow: 0 22px 70px rgba(20,22,26,0.06); }
/* Trappola per i bot. Fuori dallo schermo invece che display:none, perche'
   i bot piu' accorti ignorano i campi nascosti in modo esplicito. Non e'
   raggiungibile da tastiera (tabindex -1) ne' annunciata (aria-hidden). */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Il testo del campo trappola non deve andare a capo dentro una scatola
   larga un pixel: resta ritagliato comunque, ma cosi' non genera
   centinaia di righe invisibili. */
.honeypot label { white-space: nowrap; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap:1.5rem; }
.contact-form label { display: block; margin-bottom:1.5rem; }
.contact-form label > span { display: block; margin-bottom:0.625rem; font-size:0.8125rem; font-weight: 750; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid #c8cbd0;
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
.contact-form input,
.contact-form select { height: 52px; padding:0 0.875rem; }
.contact-form textarea { padding:0.875rem; resize: vertical; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: var(--sam-red); outline: 3px solid rgba(216,8,23,0.15); }

/* Il messaggio di errore invita a controllare i campi evidenziati: senza
   questa regola non ne veniva evidenziato nessuno. La classe viene messa
   dal JS solo dopo un tentativo di invio, cosi' i campi non sembrano
   sbagliati mentre l'utente sta ancora scrivendo. */
.contact-form.is-validated input:invalid,
.contact-form.is-validated select:invalid,
.contact-form.is-validated textarea:invalid {
  border-color: var(--sam-red-dark);
  background: #fff7f7;
}

.contact-form.is-validated input:invalid + span,
.contact-form.is-validated label:has(:invalid) > span {
  color: var(--sam-red-dark);
}
/* Il testo esplicativo scende sotto il pulsante appena non ha almeno 16rem
   a disposizione. Senza questo, nelle colonne strette veniva schiacciato a
   poche decine di pixel e ogni parola si spezzava a meta'. */
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap:1.5rem; }
.form-submit { position: static; flex: 0 0 auto; width: auto; height: auto; min-height: 56px; padding:0 1.75rem; font-size:1rem; font-weight: 750; cursor: pointer; }
.form-disclosure { flex: 1 1 16rem; min-width: 0; margin: 0; color: var(--slate); font-size:0.75rem; line-height: 1.45; }
.form-status { min-height: 1.5em; margin:1.125rem 0 0; font-size:0.875rem; font-weight: 700; }
.form-status[data-state="error"] { color: #a20a14; }
.form-status[data-state="success"] { color: #14723b; }
.legal-data { margin: 0; border-top: 1px solid var(--line); }
.legal-data > div { display: grid; grid-template-columns: 0.7fr 1.3fr; gap:1.875rem; padding:1.375rem 0; border-bottom: 1px solid var(--line); }
.legal-data dt { color: var(--slate); font-size:0.8125rem; font-weight: 700; }
.legal-data dd { margin: 0; font-weight: 650; }

/* Footer */
.site-footer { padding-block: 82px 30px; background: #101216; color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.25fr 1fr 0.8fr 0.55fr; gap:3.75rem; }
.site-footer h2 { margin:0 0 1.125rem; color: #969da7; font-size:0.75rem; letter-spacing: 0.13em; text-transform: uppercase; }
.site-footer a,
.site-footer address { display: block; margin:0 0 0.375rem; padding:0.1875rem 0; color: #e8e9eb; font-size:0.875rem; font-style: normal; line-height: 1.55; text-decoration: none; }
.site-footer a:hover { color: var(--sam-yellow); }
.footer-brand strong { display: block; color: #fff; font-size:3.375rem; letter-spacing: -0.06em; line-height: 0.8; }
.footer-brand > span { display: block; margin-top:0.75rem; color: #ff5a64; font-size:0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.footer-brand p { max-width: 340px; margin:1.75rem 0 0; color: #9da3ac; font-size:0.875rem; line-height: 1.6; }
.footer-legal { margin-top:4.375rem; padding-top:1.5rem; display: flex; justify-content: space-between; gap:1.25rem; border-top: 1px solid #2d3036; color: #858c96; font-size:0.6875rem; line-height: 1.5; }

/* ==========================================================================
   Movimento
   --------------------------------------------------------------------------
   Si muovono soltanto opacity e transform, che il browser compone senza
   ricalcolare il layout: e' il motivo per cui lo scorrimento resta fluido
   anche su un telefono modesto.
   Nulla qui nasconde contenuto in modo permanente. Gli ingressi allo
   scorrimento vivono sotto .has-js, quindi senza JavaScript la pagina si
   legge tutta, e le sequenze al caricamento usano animation con fill both,
   che parte e finisce da sola senza bisogno di script.
   ========================================================================== */

:root {
  --curva-ingresso: cubic-bezier(.2, .75, .25, 1);
  --curva-stato: cubic-bezier(.3, .7, .4, 1);
  --durata-ingresso: 700ms;
  --durata-stato: 220ms;
  --gutter: 2.5rem;
}

@media (max-width: 1100px) {
  :root { --gutter: 1.25rem; }
}

/* Ingresso allo scorrimento -------------------------------------------- */

.has-js .reveal {
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0);
  transition:
    opacity var(--durata-ingresso) var(--curva-ingresso) var(--reveal-delay, 0ms),
    transform var(--durata-ingresso) var(--curva-ingresso) var(--reveal-delay, 0ms);
}

.has-js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Varianti di direzione per i blocchi affiancati: il testo arriva da
   sinistra e la fotografia da destra, cosi' il movimento racconta la
   struttura invece di essere uguale dappertutto. */
.has-js .reveal--sinistra { transform: translate3d(-1.5rem, 0, 0); }
.has-js .reveal--destra { transform: translate3d(1.5rem, 0, 0); }
.has-js .reveal--zoom { transform: scale(1.05); }

/* Sequenza della prima schermata --------------------------------------- */

@keyframes sam-entra-su {
  from { opacity: 0; transform: translate3d(0, 1.5rem, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes sam-entra-zoom {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: none; }
}

@keyframes sam-estendi {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .home-first-view .hero-photo { animation: sam-entra-zoom 1000ms var(--curva-ingresso) both; }
  .home-first-view .hero-title { animation: sam-entra-su 800ms var(--curva-ingresso) 120ms both; }
  .home-first-view .hero-copy { animation: sam-entra-su 800ms var(--curva-ingresso) 240ms both; }
  .home-first-view .button--primary { animation: sam-entra-su 800ms var(--curva-ingresso) 340ms both; }
  .home-first-view .proof-row { animation: sam-entra-su 800ms var(--curva-ingresso) 440ms both; }
  .home-first-view .services-title { animation: sam-entra-su 800ms var(--curva-ingresso) 560ms both; }

  .home-first-view .services-title-rule {
    transform-origin: center;
    animation: sam-estendi 600ms var(--curva-ingresso) 760ms both;
  }

  /* Si animano i pezzi della scheda, non l'articolo che li contiene.
     Sopra i 1100px i pezzi sono posizionati in modo assoluto rispetto al
     riquadro del comp: dare un transform all'articolo lo trasformerebbe nel
     loro blocco contenitore, e siccome l'articolo non ha dimensioni le
     schede collasserebbero. Con lo stesso ritardo per tutti i pezzi
     l'effetto a schermo e' identico. */
  .home-first-view .service-card--food > * { animation: sam-entra-su 800ms var(--curva-ingresso) 640ms both; }
  .home-first-view .service-card--bar > * { animation: sam-entra-su 800ms var(--curva-ingresso) 730ms both; }
  .home-first-view .service-card--host > * { animation: sam-entra-su 800ms var(--curva-ingresso) 820ms both; }
}

/* Stati e passaggio del mouse ------------------------------------------ */

@media (hover: hover) and (pointer: fine) {
  .service-photo,
  .service-arrow svg,
  .service-shell {
    transition:
      transform var(--durata-stato) var(--curva-stato),
      box-shadow var(--durata-stato) var(--curva-stato);
  }

  .service-card:hover .service-photo { transform: scale(1.035); }
  .service-card:hover .service-arrow svg { transform: translateX(0.25rem); }
  .service-card:hover .service-shell { box-shadow: 0 1rem 2.5rem rgba(20, 22, 26, 0.09); }

  .compact-card,
  .principle {
    transition: transform var(--durata-stato) var(--curva-stato), box-shadow var(--durata-stato) var(--curva-stato);
  }

  .compact-card:hover,
  .principle:hover { transform: translateY(-0.25rem); }

  .inner-hero__visual img,
  .service-feature__media img {
    transition: transform 500ms var(--curva-stato);
  }

  .service-feature:hover .service-feature__media img,
  .inner-hero__visual:hover img { transform: scale(1.03); }

  .contact-hero__quick > a { transition: transform var(--durata-stato) var(--curva-stato); }
  .contact-hero__quick > a:hover { transform: translateX(0.375rem); }

  /* La barra sotto la voce di menu cresce da sinistra al passaggio del
     mouse. La pagina corrente ha gia' la sua barra fissa, quindi qui sono
     escluse per non sovrapporre due regole. */
  .primary-nav a:not([aria-current="page"])::after {
    position: absolute;
    right: 0;
    bottom: 23%;
    left: 0;
    height: 4px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--durata-stato) var(--curva-stato);
    background: var(--sam-red);
    content: "";
  }

  .primary-nav a:not([aria-current="page"]):hover::after { transform: scaleX(1); }
}

@keyframes sam-sweep-in {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: no-preference) {
  .home-first-view .hero-sweep--red {
    animation: sam-sweep-in 900ms cubic-bezier(.2,.75,.25,1) 120ms both;
  }
}

@media (hover: hover) {
  .button { transition: transform 180ms ease, background-color 180ms ease, color 180ms ease; }
  .button:hover { transform: translateY(-2px); }
  .button--primary:hover { background: var(--sam-red-dark); }
  .button--dark:hover { background: #30333a; }
}

@media (min-width: 1101px) and (max-width: 1499px) {
  /* Verso il limite basso di questa fascia la scatola del marchio si
     stringe e la scritta arriva a tre pixel dalla mascotte. Spostandola
     di poco resta l'aria che ha alle altre larghezze. */
  .brand__lockup { left: 19%; width: 81%; }

}

@media (max-width: 1100px) {
  .container { width: min(calc(100% - 2 * var(--gutter)), 720px); }
  .section { padding-block: 78px; }

  body.menu-is-open { overflow: hidden; }
  .site-header {
    position: sticky;
    z-index: 80;
    top: 0;
    height: 76px;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
  }
  .brand { top: 0; left: 14px; width: 255px; height: 76px; }
  .brand__mascot { left: -4px; width: 66px; }
  .brand__lockup { top: 5px; left: 70px; width: 178px; height: 66px; }
  .menu-toggle {
    position: absolute;
    z-index: 2;
    top: 17px;
    right: 18px;
    width: 46px;
    height: 42px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }
  .menu-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }
  .menu-toggle__icon { width: 28px; display: grid; gap:0.3125rem; }
  .menu-toggle__icon i { display: block; height: 2px; background: currentColor; transition: transform 180ms ease, opacity 180ms ease; }
  .menu-toggle.is-open .menu-toggle__icon i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle.is-open .menu-toggle__icon i:nth-child(2) { opacity: 0; }
  .menu-toggle.is-open .menu-toggle__icon i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .primary-nav {
    position: absolute;
    z-index: 1;
    top: 75px;
    right: 0;
    left: 0;
    height: auto;
    padding:1.125rem 1.25rem 1.625rem;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    box-shadow: 0 24px 34px rgba(20,22,26,0.16);
  }
  .primary-nav.is-open { display: flex; }
  .primary-nav a { height: auto; min-height: 54px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); font-size:0.9375rem; }
  .primary-nav a[aria-current="page"]::after { top: 50%; right: 0; bottom: auto; left: auto; width: 22px; height: 3px; }

  /* Reflow the comp stage into a real small-screen page. */
  .home-first-view.comp-frame { aspect-ratio: auto; overflow: visible; background: #fff; }
  .home-first-view .home-hero { position: relative; padding: 3rem var(--gutter) 0; display: flex; flex-direction: column; }
  .home-first-view .hero-photo,
  .home-first-view .hero-title,
  .home-first-view .hero-copy,
  .home-first-view .button--primary,
  .home-first-view .services-title,
  .home-first-view .service-shell,
  .home-first-view .service-icon,
  .home-first-view .service-title,
  .home-first-view .service-copy,
  .home-first-view .service-photo { position: static; width: auto; height: auto; inset: auto; }
  .home-first-view .hero-title { order: 1; margin: 0; font-size:clamp(45px, 13vw, 68px); line-height: 0.94; }
  .home-first-view .hero-title span { white-space: normal; }
  .home-first-view .hero-copy { order: 2; margin-top:1.5rem; max-width: 600px; font-size:1.3125rem; }
  .home-first-view .button--primary { order: 3; align-self: flex-start; margin-top:1.75rem; padding:0 1.5625rem; min-height: 56px; font-size:1.0625rem; }
  .home-first-view .hero-photo { order: 4; width: calc(100% + 40px); height: 390px; margin:2.625rem -1.25rem 0; object-position: 64% center; }
  .home-first-view .hero-wash,
  .home-first-view .hero-sweep { display: none; }
  .home-first-view .proof-row { position: static; order: 5; width: auto; margin: 0 calc(-1 * var(--gutter)); padding: 1.5rem var(--gutter); grid-template-columns: repeat(3, 1fr); background: #fff; }
  .home-first-view .proof-row li { padding:0 0.875rem; gap:0.5rem; font-size:0.8125rem; white-space: normal; }
  .home-first-view .proof-row svg,
  .home-first-view .proof-icon--iso { flex-basis: 34px; width: 34px; height: 34px; }
  .home-first-view .home-services { position: relative; padding: 4rem var(--gutter) 4.75rem; display: grid; gap:1.375rem; background: var(--mist); }
  .home-first-view .home-services::before { display: none; }
  .home-first-view .services-title { margin: 0 auto; font-size:2.375rem; text-align: center; white-space: normal; }
  .home-first-view .services-title-rule { position: static; width: 60px; height: 5px; margin:-0.625rem auto 1.125rem; background: var(--sam-yellow); }
  .home-first-view .service-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 74px 1fr 44px; grid-template-rows: auto auto 210px; align-items: center; border: 1px solid var(--line); border-radius:0.75rem; background: #fff; }
  .home-first-view .service-shell { display: none; }
  .home-first-view .service-icon { grid-column: 1; grid-row: 1 / 3; width: 74px; min-height: 108px; }
  .home-first-view .service-icon::before { width: 56px; height: 56px; }
  .home-first-view .service-icon svg { width: 30px; height: 30px; }
  .home-first-view .service-title { grid-column: 2; grid-row: 1; align-self: end; padding:1.125rem 0.625rem 0.1875rem 0; font-size:1.25rem; }
  .home-first-view .service-copy { grid-column: 2; grid-row: 2; align-self: start; padding:0.1875rem 0.625rem 1.125rem 0; font-size:0.875rem; }
  .home-first-view .service-arrow { position: static; grid-column: 3; grid-row: 1 / 3; width: 44px; height: 48px; }
  .home-first-view .service-photo { grid-column: 1 / -1; grid-row: 3; width: 100%; height: 210px; border-radius: 0; }

  .intro-grid,
  .editorial-grid,
  .contexts-layout,
  .standard-card,
  .inner-hero__grid,
  .presence-grid,
  .method-grid,
  .quality-grid,
  .contact-hero__grid,
  .contact-layout,
  .legal-grid { grid-template-columns: 1fr; }
  .intro-grid,
  .editorial-grid { gap:2.8125rem; }
  .section--intro { padding-top:5.625rem; }
  .facts-grid { margin-top:4.375rem; }
  .fact { min-height: 175px; }
  .contexts-layout { gap:3.75rem; }
  .standard-card { gap:2.125rem; padding:2.375rem; }
  .standard-meta { padding:1.75rem 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .principles-grid,
  .compact-cards { grid-template-columns: 1fr; }
  .principle,
  .compact-card { min-height: auto; padding:2rem 0; border: 0; border-bottom: 1px solid #d6d7d9; }
  .compact-card { padding-inline: 26px; border: 1px solid #d8d9dc; border-bottom: 0; }
  .compact-card:last-child { border-bottom: 1px solid #d8d9dc; }
  .principle h3 { margin-top:1.75rem; }
  .numbers-band__grid { grid-template-columns: 1fr 1fr; gap:2.375rem 0; }
  .numbers-band__grid > div:nth-child(2) { border-right: 0; }
  .inner-hero { padding-block: 70px; }
  .inner-hero__grid { gap:3.4375rem; }
  .inner-hero__visual { min-height: 420px; }
  .service-feature { grid-template-columns: 1fr; min-height: auto; }
  .service-feature--reverse .service-feature__media { order: 0; }
  .service-feature__media { min-height: 470px; }
  .service-feature__copy { max-width: none; padding:3.75rem 2.5rem 5rem; }
  .quality-grid { gap:3.4375rem; }
  .quality-mark { min-height: 280px; }
  .contact-hero { padding-block: 80px; }
  .contact-hero__grid { gap:3.75rem; }
  .contact-layout { gap:3.4375rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-legal { flex-direction: column; }
}

/* Fascia tablet.
   Il sito aveva due soli assetti, telefono e scrivania, separati da un
   pixel: a 1100 px il contenuto restava in una colonna da 720 px con 190 px
   di vuoto per lato, e a 1101 px tutte le griglie passavano insieme da una
   a tre colonne. Su un tablet il risultato era un telefono stirato.
   Qui il contenitore cresce con lo schermo e le griglie che ci stanno
   tornano a due colonne, cosi' il passaggio avviene per gradi.
   Il blocco va DOPO quello a max-width 1100 px: a parita' di specificita'
   vince l'ultimo, ed e' esattamente l'errore per cui il blocco tablet
   precedente non produceva alcun effetto. */
@media (min-width: 761px) and (max-width: 1100px) {
  :root { --gutter: 2.25rem; }

  .container { width: min(calc(100% - 2 * var(--gutter)), 60rem); }

  .intro-grid,
  .editorial-grid,
  .contexts-layout,
  .presence-grid,
  .legal-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 2.75rem;
  }

  .principles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .inner-hero__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 2.5rem;
    align-items: center;
  }

  .inner-hero__visual { min-height: 24rem; }

  .contact-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
  }

  .quality-grid {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1.58fr);
    gap: 2.5rem;
  }

  .service-feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 30rem;
  }

  .service-feature--reverse .service-feature__media { order: 2; }
  .service-feature__media { min-height: 30rem; }
  .service-feature__copy { max-width: none; padding: 3rem 2.25rem; }

  .contact-form { padding: 2.25rem; }
}

/* Il modulo contatti resta a piena larghezza finche' la colonna non regge
   due campi affiancati: sotto i 900 px diventerebbe una fessura. */
@media (min-width: 901px) and (max-width: 1100px) {
  .contact-layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 2.75rem;
  }
}

@media (max-width: 580px) {
  .container { width: calc(100% - 2 * var(--gutter)); }
  .section { padding-block: 66px; }
  .section-heading h2,
  .standard-copy h2,
  .contexts-copy h2,
  .cta-band h2,
  .contact-aside h2 { font-size:2.4375rem; }
  .brand,
  .brand { width: 225px; }
  .brand__lockup { width: 148px; }
  .home-first-view .hero-photo { height: 330px; }
  .home-first-view .proof-row { grid-template-columns: 1fr; gap:0.875rem; }
  .home-first-view .proof-row li { min-height: 48px; padding: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .home-first-view .proof-row li:last-child { border-bottom: 0; }
  .home-first-view .service-card { grid-template-rows: auto auto 180px; }
  .home-first-view .service-photo { height: 180px; }
  .facts-grid { grid-template-columns: 1fr; }
  .fact,
  .fact + .fact { min-height: auto; padding:1.875rem 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .fact:last-child { border-bottom: 0; }
  .standard-card { width: calc(100% - 2 * var(--gutter)); padding:1.875rem 1.5rem; }
  .standard-mark { width: 108px; height: 108px; }
  .standard-mark svg { width: 70px; height: 70px; }
  .cta-band__inner { align-items: flex-start; flex-direction: column; }
  .inner-hero__copy h1 { font-size:clamp(42px, 13.8vw, 65px); }
  .inner-hero__visual { min-height: 330px; }
  .inner-hero__visual::before { right: -16px; bottom: -16px; }
  .inner-hero__badge { max-width: 220px; padding:1.0625rem 1.25rem; }
  .numbers-band__grid { grid-template-columns: 1fr; gap: 0; }
  .numbers-band__grid > div { min-height: auto; padding:1.625rem 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.3); }
  .numbers-band__grid > div:last-child { border-bottom: 0; }
  .service-feature__media { min-height: 340px; }
  .service-feature__copy { padding: 3rem var(--gutter) 4.0625rem; }
  .service-feature__media--coast strong { margin:0 0 2.625rem 1.75rem; }
  .coast-sun { width: 110px; height: 110px; }
  .quality-meta { flex-direction: column; gap:0.625rem; }
  .contact-hero__copy h1 { font-size:clamp(42px, 13.8vw, 68px); }
  .contact-form { padding:1.75rem 1.25rem; }
  .field-grid { grid-template-columns: 1fr; gap: 0; }
  .form-actions { align-items: flex-start; flex-direction: column; }
  .legal-data > div { grid-template-columns: 1fr; gap:0.5rem; }
  .footer-grid { grid-template-columns: 1fr; gap:2.375rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .has-js .reveal { opacity: 1; transform: none; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Pagina informativa: colonna di lettura stretta, gerarchia sobria.
   Il testo di legge si legge meglio a riga corta che a piena larghezza. */
/* La colonna resta stretta per la leggibilita', ma allineata a sinistra
   con la griglia del sito invece che centrata: cosi' i titoli partono
   dallo stesso bordo del resto delle pagine. */
.legal-text .container > * { max-width: min(52rem, 68ch); }
.legal-text h2 {
  margin: 3rem 0 0.75rem;
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.legal-text h2:first-child { margin-top: 0; }
.legal-text p {
  margin: 0 0 1rem;
  color: var(--slate);
  font-size: 1.0625rem;
  line-height: 1.7;
}
.legal-text strong { color: var(--ink); }
.legal-text a { color: var(--sam-red-dark); }
.legal-text .check-list { margin: 0 0 1.25rem; }
.legal-text .check-list li { color: var(--slate); line-height: 1.7; }
.legal-text .fine-print { margin-top: 2rem; }
.form-disclosure a { color: var(--sam-red-dark); }

/* Nomi composti che non devono spezzarsi sul trattino. */
.unito { white-space: nowrap; }

/* CTA fissa su mobile.
   Barra sottile in fondo allo schermo, solo su telefono, verso il modulo
   contatti. Nasce nascosta sotto il bordo e sale quando il JavaScript la
   attiva oltre la prima schermata; sopra i 760px non esiste. */
/* CTA nella prima schermata delle pagine interne. */
.inner-hero__cta { margin-top: 1.75rem; }

.sticky-cta { display: none; }

@media (max-width: 760px) {
  .sticky-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: fixed;
    left: 50%;
    bottom: calc(0.875rem + env(safe-area-inset-bottom, 0px));
    z-index: 70;
    width: min(calc(100% - 2rem), 26rem);
    padding: 0.9rem 1.25rem;
    border-radius: 62.4375rem;
    background: var(--sam-red);
    color: #fff;
    font-size: 1rem;
    font-weight: 750;
    text-decoration: none;
    box-shadow: 0 0.5rem 1.5rem rgba(20, 22, 26, 0.28);
    transform: translate(-50%, 160%);
    transition: transform 320ms var(--curva-ingresso);
  }
  .sticky-cta.is-visible { transform: translate(-50%, 0); }
  .sticky-cta .inline-arrow { width: 1.1em; height: 1.1em; }
  /* Con il menu aperto la barra si ritira, per non competere con la tendina. */
  body.menu-is-open .sticky-cta { transform: translate(-50%, 160%); }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}