/* ==========================================================================
   Beergate 2026 · foglio di stile unico
   Mobile-first. Nessun framework. Font: Barlow Condensed + Barlow (Google Fonts).
   Indice: 1 Token · 2 Base · 3 Layout · 4 Elementi comuni · 5 Header
           6 Hero home · 7 Sezioni home · 8 Produttori · 9 Servizi
           10 Pagine interne · 11 Moduli · 12 Footer · 13 Utilità
   ========================================================================== */

/* 1. Token ---------------------------------------------------------------- */
:root {
  --teal-900: #1c3229;
  --teal-800: #2b4a3c;
  --teal-700: #354f42;
  --teal-600: #3d6050;
  --amber: #c8890e;
  --amber-light: #e0a020;
  --amber-dark: #a06e08;
  --ink: #101a14;
  --white: #ffffff;
  --paper: #eef1ed;
  --paper-line: #dfe5df;
  --mist: #e8ede9;
  --gray: #7a9489;
  --gray-light: #a8bcb4;
  --muted: #4d6258;

  --font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: 1.25rem;
  --wrap: 82rem;
  --section-y: clamp(3.25rem, 8vw, 6.5rem);
  --rule: 3px solid var(--amber);
  --error: #9c2b1e;

  /* Spaziatura delle lettere per le scritte maiuscole: quattro passi, non di più. */
  --track-eyebrow: 0.22em;
  --track-label: 0.18em;
  --track-dense: 0.12em;
  --track-nav: 0.08em;

  /* Movimento: due curve. Uscita rapida per ciò che entra, simmetrica per ciò che attraversa lo schermo. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* 2. Base ----------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  accent-color: var(--teal-900);
  scrollbar-color: var(--teal-700) var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--teal-900);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

img {
  height: auto;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

/* Al passaggio del mouse cambia la riga, non il colore del testo: così il contrasto resta quello di partenza su ogni sfondo. */
a:hover {
  text-decoration-color: var(--amber);
}

.section--amber a:hover,
.on-amber a:hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 3px;
}

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

:focus-visible {
  outline: 3px solid var(--amber-light);
  outline-offset: 3px;
}

.on-amber :focus-visible,
.btn--ink:focus-visible {
  outline-color: var(--ink);
}

/* Spazio per la barra fissa quando si salta a un'ancora. */
[id] {
  scroll-margin-top: 6rem;
}

/* 3. Layout --------------------------------------------------------------- */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-y);
}

.section--white {
  background: var(--white);
}

.section--dark {
  background: var(--teal-900);
  color: var(--mist);
}

.section--amber {
  background: var(--amber);
  color: var(--ink);
}

.section--rule {
  border-top: var(--rule);
}

.section--flush {
  padding-top: 0;
}

.section__head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section__head p {
  max-width: 38rem;
  font-size: 1.125rem;
}

.section__head--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2.5rem;
}

.section__head .label-light {
  max-width: none;
  font: 600 0.9375rem/1.3 var(--font-display);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gray-light);
}

@media (min-width: 60rem) {
  .section__head--split {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: end;
    gap: 3rem;
  }
}

/* 4. Elementi comuni ------------------------------------------------------ */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font: 700 0.875rem/1.3 var(--font-display);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 3px;
  background: var(--amber);
}

.section--amber .eyebrow::before,
.on-amber .eyebrow::before {
  background: var(--ink);
}

.display,
.h1,
.h2,
.h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  text-wrap: balance;
}

.display {
  font-weight: 900;
  font-size: min(18.4vw, 5.5rem);
  line-height: 0.84;
  letter-spacing: -0.015em;
}

@media (min-width: 64rem) {
  .display {
    font-size: clamp(5rem, 10.4vw, 9.4rem);
  }
}

.h1 {
  font-weight: 900;
  font-size: clamp(3rem, 8vw, 6.25rem);
  line-height: 0.88;
  letter-spacing: -0.01em;
}

/* Telefoni molto stretti: una parola lunga del titolo ("St. Patrick's") deve stare in riga. */
@media (max-width: 22.49rem) {
  .h1 {
    font-size: 2.75rem;
  }
}

.h2 {
  font-weight: 900;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 0.9;
}

.h2--label {
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0.06em;
}

.h2--sm {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
}

.h3 {
  font-weight: 800;
  font-size: 1.625rem;
  line-height: 1;
  letter-spacing: 0.01em;
}

.mark {
  position: relative;
  isolation: isolate;
  display: inline-block;
  margin-left: -0.14em;
  padding: 0.04em 0.14em 0.08em;
  color: var(--ink);
  white-space: nowrap;
}

/* Il blocco ambra è un livello a parte, così può entrare da sinistra mentre il testo resta fermo e leggibile. */
.mark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--amber);
  animation: mark-in 900ms var(--ease-in-out) 400ms backwards;
}

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

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mark::before {
    animation: fade-in 200ms ease backwards;
  }
}

.lead {
  max-width: 40rem;
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.5;
}

.muted {
  color: var(--muted);
}

.section--dark .muted {
  color: var(--gray-light);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 1rem 1.5rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--white);
  font: 800 1.0625rem/1 var(--font-display);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    transform 160ms var(--ease-out);
}

.btn:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .btn:active {
    transform: none;
  }
}

.btn:hover {
  background: var(--teal-800);
  border-color: var(--teal-800);
  color: var(--white);
}

.btn--amber {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink);
}

.btn--amber:hover {
  background: var(--amber-light);
  border-color: var(--amber-light);
  color: var(--ink);
}

.btn--outline {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}

.btn--outline:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.btn--block {
  width: 100%;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font: 800 1.0625rem/1.2 var(--font-display);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  min-height: 2.75rem;
  padding-block: 0.5rem;
  border-bottom: 3px solid var(--amber);
}

.link-arrow svg {
  flex: none;
  width: 2rem;
  height: 1rem;
  transition: transform 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .link-arrow:hover svg {
    transform: translateX(4px);
  }
}

.tag {
  display: inline-block;
  padding: 0.4rem 0.6rem 0.35rem;
  border: 2px solid var(--teal-900);
  font: 700 0.8125rem/1 var(--font-display);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.tag--solid {
  background: var(--teal-900);
  color: var(--white);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chips li {
  padding: 0.45rem 0.65rem 0.4rem;
  border: 1px solid rgba(28, 50, 41, 0.45);
  font: 700 0.8125rem/1.1 var(--font-display);
  letter-spacing: var(--track-dense);
  text-transform: uppercase;
}

.flag {
  flex: none;
  width: 1.5rem;
  height: 1rem;
  outline: 1px solid rgba(16, 26, 20, 0.25);
}

.icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
}

.skip-link:focus {
  top: 0.5rem;
  color: var(--white);
}

/* 5. Header --------------------------------------------------------------- */
/* La barra resta fissa in alto mentre si scorre, su tutte le pagine. Con il menu aperto sul telefono, il menu scorre dentro la barra. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  box-shadow: 0 1px 0 var(--paper-line);
}

@media (max-width: 79.99rem) {
  .js .site-nav.is-open {
    max-height: calc(100vh - 5rem);
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
  }
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.125rem;
}

.site-header__logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.site-header__logo img {
  width: auto;
  max-width: none;
  height: 2.5rem;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 2px solid var(--teal-900);
  border-radius: 0;
  background: transparent;
  color: var(--teal-900);
  cursor: pointer;
}

.js .nav-toggle {
  display: flex;
}

.nav-toggle .nav-toggle__close,
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: block;
}

.site-nav {
  padding-bottom: 1.25rem;
}

.js .site-nav {
  display: none;
}

.js .site-nav.is-open {
  display: block;
  opacity: 1;
  transform: none;
  transition:
    opacity 200ms var(--ease-out),
    transform 200ms var(--ease-out);
}

@starting-style {
  .js .site-nav.is-open {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .site-nav.is-open {
    transition: opacity 200ms ease;
  }

  @starting-style {
    .js .site-nav.is-open {
      transform: none;
    }
  }
}

.site-nav__list {
  display: grid;
  border-top: 2px solid var(--teal-900);
}

.site-nav__list a {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  border-bottom: 1px solid var(--paper-line);
  font: 700 1.25rem/1 var(--font-display);
  letter-spacing: var(--track-dense);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__list a[aria-current="page"] {
  box-shadow: inset 4px 0 0 var(--amber);
  padding-left: 0.875rem;
}

.site-nav__cta {
  margin-top: 1rem;
}

@media (min-width: 80rem) {
  .site-header__bar {
    padding-block: 1.5rem;
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .site-header__logo img {
    height: 3rem;
  }

  .js .nav-toggle {
    display: none;
  }

  .site-nav,
  .js .site-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 0;
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 1.55vw, 1.75rem);
    border-top: 0;
  }

  .site-nav__list a {
    min-height: 2.75rem;
    border-bottom: 0;
    font-size: 1rem;
    letter-spacing: var(--track-nav);
  }

  .site-nav__list a:hover {
    box-shadow: inset 0 -3px 0 var(--teal-900);
  }

  .site-nav__list a[aria-current="page"] {
    padding-left: 0;
    box-shadow: inset 0 -3px 0 var(--amber);
  }

  .site-nav__list a.site-nav__secondary {
    color: var(--muted);
  }

  .site-nav__cta {
    margin-top: 0;
  }

  .site-nav__cta .btn {
    white-space: nowrap;
    min-height: 2.75rem;
    padding: 0.75rem 1.125rem;
    font-size: 0.9375rem;
  }
}

/* 6. Hero home ------------------------------------------------------------ */
/* Prima schermata: una foto a tutta larghezza, il titolo sopra, il modulo in una fascia ambra subito sotto.
   Sul telefono la foto sta in basso, sotto il testo; su PC riempie lo sfondo e il testo si appoggia a sinistra. */
.hero {
  display: block;
}

.hero__stage,
.page-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding-block: 2.5rem 19rem;
  background: var(--ink);
  color: var(--white);
}

.hero__bg {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 24rem;
  object-fit: cover;
  object-position: 50% 100%;
}

.hero__stage::after,
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(16, 26, 20, 0) 0, rgba(16, 26, 20, 0) 15rem, var(--ink) 23.5rem);
}

.hero__inner {
  display: grid;
  gap: 1.375rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

.page-hero .breadcrumb,
.page-hero .breadcrumb a {
  color: var(--gray-light);
}

.page-hero .lead {
  color: var(--mist);
}

/* La regola generale di .page-head (sezione 10) verrebbe dopo: qui si ribadisce lo spazio per la foto in basso. */
.page-hero.page-head {
  padding-block: 2rem 19rem;
  border-bottom: 0;
}

.hero__stage .btn--amber:hover {
  border-color: var(--amber-light);
}

.hero__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0.3rem var(--gutter) 0.35rem 0.6rem;
  background: rgba(16, 26, 20, 0.78);
  font: 700 0.75rem/1.3 var(--font-display);
  letter-spacing: var(--track-dense);
  text-transform: uppercase;
}

/* Due didascalie, una per foto: su PC la sala cottura, sul telefono il campo d'orzo. */
.hero__caption--pc {
  display: none;
}

@media (min-width: 40rem) {
  .hero__caption--pc {
    display: block;
  }

  .hero__caption--mobile {
    display: none;
  }
}

/* Il modulo rapido: fascia ambra, campi in riga su PC. */
.hero-band {
  padding-block: 2rem 2.25rem;
  background: var(--amber);
  color: var(--ink);
}

.hero-band__inner {
  display: grid;
  gap: 1.5rem;
}

.hero-band__head {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.hero-band__fields,
.hero-band__row,
.hero-band__send {
  display: grid;
  gap: 1rem;
}

.hero-band__send {
  align-items: center;
}

.hero__form-title {
  font: 900 clamp(2.75rem, 5vw, 4rem) / 0.9 var(--font-display);
  text-transform: uppercase;
}

.hero__form-intro {
  font-weight: 500;
  line-height: 1.4;
}

@media (min-width: 40rem) {
  .hero-band__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-band__send {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* Su due colonne (cinque campi) il tipo di attività prende tutta la riga */
@media (min-width: 40rem) and (max-width: 79.99rem) {
  .hero-band__row > .field:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .hero-band__inner {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
  }

  .hero-band .hero__form-title {
    font-size: clamp(2.5rem, 3.6vw, 3.25rem);
  }
}

@media (min-width: 80rem) {
  .hero__stage {
    min-height: max(30rem, min(46vw, calc(100vh - 7rem)));
    padding-block: 3rem 4rem;
  }

  .page-hero.page-head {
    min-height: max(26rem, min(38vw, calc(100vh - 12rem)));
    padding-block: 2rem 4rem;
  }

  .hero__bg {
    top: 0;
    height: 100%;
    object-position: 50% 60%;
  }

  .hero__stage::after,
  .page-hero::after {
    background: linear-gradient(90deg, rgba(16, 26, 20, 0.9) 0%, rgba(16, 26, 20, 0.82) 32%, rgba(16, 26, 20, 0.35) 55%, rgba(16, 26, 20, 0.1) 100%);
  }

  .hero__inner {
    gap: 1.75rem;
  }

  .hero__inner > * {
    max-width: min(30rem, 38vw);
    justify-self: start;
  }

  .hero__inner > .eyebrow {
    max-width: min(36rem, 44vw);
  }

  .hero__inner > .display {
    max-width: none;
    font-size: clamp(4rem, 7.4vw, 6rem);
  }

  .hero__inner > .h1 {
    max-width: none;
  }

  .hero__inner > .breadcrumb {
    max-width: none;
  }

  /* locale, provincia (stretta), telefono, email, tipo di attività */
  .hero-band__row {
    grid-template-columns: minmax(0, 1fr) 5.5rem repeat(3, minmax(0, 1fr));
  }
}

/* 7. Sezioni home --------------------------------------------------------- */
.logo-strip {
  background: var(--white);
}

.logo-strip__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-block: 0.625rem;
}

.logo-strip__list li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.25rem;
  padding: 0.875rem 0.5rem;
}

.logo-strip__list a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.logo-strip__list a:hover {
  box-shadow: inset 0 -3px 0 var(--amber);
}

.logo-strip__list img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.wordmark {
  font: 800 0.9375rem/1 var(--font-display);
  letter-spacing: var(--track-dense);
  text-transform: uppercase;
  text-align: center;
  color: var(--teal-900);
}

@media (min-width: 60rem) {
  .logo-strip__list {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    padding-block: 1rem;
  }

  .logo-strip__list li {
    height: 6.5rem;
    padding: 1.125rem 1rem;
  }

  .wordmark {
    font-size: 1.125rem;
  }
}

.steps {
  display: grid;
  gap: 2px;
  counter-reset: step;
}

.step {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 1.5rem;
  background: var(--teal-800);
  border-top: 3px solid var(--amber);
}

/* Comparsa allo scorrimento -------------------------------------------------
   Vale per le sequenze (catena del freddo, "Come si comincia", "Come funziona")
   e per le foto a tutta larghezza. main.js mette .js-reveal solo sugli elementi
   che al caricamento sono ancora sotto lo schermo, poi data-visible quando ci
   entrano. Senza script, o se lo script non parte, tutto è visibile e fermo. */
.step.js-reveal,
.start__steps li.js-reveal,
.trio li.js-reveal {
  opacity: 0;
  transform: translateY(1.5rem);
}

.step.js-reveal[data-visible],
.start__steps li.js-reveal[data-visible],
.trio li.js-reveal[data-visible] {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms ease-out,
    transform 700ms var(--ease-out);
}

/* "Come si comincia" è una lista compatta: le righe entrano quasi insieme, le distanzia il ritardo. */
.start__steps li.js-reveal[data-visible]:nth-child(2) {
  transition-delay: 90ms;
}

.start__steps li.js-reveal[data-visible]:nth-child(3) {
  transition-delay: 180ms;
}

.start__steps li.js-reveal[data-visible]:nth-child(4) {
  transition-delay: 270ms;
}

/* Dove i passi stanno affiancati entrano insieme nello schermo: li distanzia il ritardo. */
@media (min-width: 40rem) {
  .step.js-reveal[data-visible]:nth-child(even) {
    transition-delay: 160ms;
  }
}

@media (min-width: 60rem) {
  .trio li.js-reveal[data-visible]:nth-child(2) {
    transition-delay: 160ms;
  }

  .trio li.js-reveal[data-visible]:nth-child(3) {
    transition-delay: 320ms;
  }
}

@media (min-width: 64rem) {
  .step.js-reveal[data-visible]:nth-child(2) {
    transition-delay: 160ms;
  }

  .step.js-reveal[data-visible]:nth-child(3) {
    transition-delay: 320ms;
  }

  .step.js-reveal[data-visible]:nth-child(4) {
    transition-delay: 480ms;
  }
}

/* Le foto a tutta larghezza si scoprono dall'alto. */
.photo-band.js-reveal {
  clip-path: inset(0 0 100% 0);
}

.photo-band.js-reveal[data-visible] {
  clip-path: inset(0);
  transition: clip-path 1000ms var(--ease-in-out);
}

@media print {
  .js-reveal {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .step.js-reveal,
  .start__steps li.js-reveal,
  .trio li.js-reveal {
    transform: none;
  }

  .photo-band.js-reveal {
    clip-path: none;
    opacity: 0;
  }

  .js-reveal[data-visible] {
    opacity: 1;
    transition: opacity 300ms ease !important;
    transition-delay: 0s !important;
  }
}

.step__num {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 900 3.5rem/0.9 var(--font-display);
  color: var(--amber-light);
}

.step__num svg {
  width: 2.125rem;
  height: 1rem;
  color: var(--gray-light);
}

.step p {
  color: var(--mist);
}

.step--amber {
  background: var(--amber);
  border-top-color: var(--amber);
  color: var(--ink);
}

.step--amber .step__num,
.step--amber p {
  color: var(--ink);
}

@media (min-width: 40rem) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .step {
    padding: 2rem 1.75rem 2.25rem;
  }
}

.photo-band {
  position: relative;
  background: var(--teal-900);
}

.photo-band img {
  width: 100%;
  height: clamp(15rem, 38vw, 32rem);
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
}

.photo-band figcaption {
  display: grid;
  gap: 0.375rem;
  padding: 1.25rem var(--gutter) 1.375rem;
  background: var(--amber);
  color: var(--ink);
}

.photo-band__label {
  font: 700 0.8125rem/1.3 var(--font-display);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.photo-band__line {
  font: 800 1.625rem/1.05 var(--font-display);
  text-transform: uppercase;
  text-wrap: balance;
}

.photo-band--hero img {
  height: clamp(16rem, 46vw, 36rem);
  object-position: var(--fx, 50%) var(--fy, 30%);
}

@media (min-width: 48rem) {
  .photo-band figcaption {
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: min(34rem, 100%);
    padding: 1.375rem 2rem 1.5rem max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  }
}

.audience {
  display: grid;
  gap: 2px;
  background: var(--paper-line);
  border-top: var(--rule);
}

.audience li {
  display: grid;
  align-content: start;
  gap: 0.625rem;
  padding: 1.5rem;
  background: var(--white);
}

@media (min-width: 40rem) {
  .audience {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .audience {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .audience li {
    padding: 2rem 1.75rem;
  }
}

.start {
  display: grid;
  gap: 2.5rem;
}

.start__steps {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--teal-600);
}

.start__steps li {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--teal-600);
}

.start__steps .start__num {
  grid-row: span 2;
  font: 900 2.75rem/0.9 var(--font-display);
  color: var(--amber-light);
}

.start__steps p {
  color: var(--gray-light);
}

.contact-panel {
  display: grid;
  align-content: start;
  gap: 1.25rem;
  padding: 1.75rem 1.5rem;
  background: var(--paper);
  color: var(--teal-900);
  border-top: var(--rule);
}

.contact-list {
  display: grid;
}

.contact-list > div {
  display: grid;
  gap: 0.125rem;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--paper-line);
}

.contact-list dt {
  font: 700 0.8125rem/1.3 var(--font-display);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}

.contact-list dd {
  font-size: 1.125rem;
  font-weight: 500;
}

.contact-list a {
  text-decoration: none;
  border-bottom: 2px solid var(--amber);
}

.contact-list a:hover {
  border-bottom-color: currentColor;
}

.contact-panel--white {
  background: var(--white);
}

.contact-panel .link-arrow {
  justify-self: start;
}

@media (min-width: 64rem) {
  .start {
    grid-template-columns: minmax(0, 1.25fr) minmax(22rem, 1fr);
    gap: 4rem;
    align-items: start;
  }

  .contact-panel {
    padding: 2.25rem 2.25rem 2.5rem;
  }
}

/* 8. Produttori ----------------------------------------------------------- */
.producer-grid {
  display: grid;
  gap: 2px;
}

@media (min-width: 60rem) {
  .producer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.producer-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--white);
}

.producer-card__body {
  display: grid;
  align-content: start;
  gap: 0.875rem;
  padding: 1.5rem 1.25rem 1.75rem;
  flex: 1;
}

.producer-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
}

.producer-card__top img {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: min(9.5rem, 50%);
  max-height: 3.5rem;
  object-fit: contain;
  object-position: left center;
}

.producer-card__name a {
  display: inline-block;
  padding-block: 0.1875rem;
  text-decoration: none;
}

.producer-card__name a:hover,
.service-card h3 a:hover,
.producer-nav a:hover strong {
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.14em;
}

.place {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font: 700 0.9375rem/1.3 var(--font-display);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.producer-card__name {
  font-weight: 900;
  font-size: clamp(2rem, 3.4vw, 2.375rem);
  line-height: 0.95;
}

.producer-card__styles {
  font: 600 0.9375rem/1.45 var(--font-display);
  letter-spacing: var(--track-dense);
  text-transform: uppercase;
  color: var(--muted);
}

.producer-card .link-arrow {
  justify-self: start;
  margin-top: 0.25rem;
  font-size: 0.9375rem;
}

@media (min-width: 48rem) {
  .producer-card__body {
    padding: 1.75rem 2rem 2.25rem;
  }
}

/* Mosaico fotografico: 3, 2 o 1 foto. Senza foto: pannello con il logo.
   Il riquadro è sempre 2:1, quindi con 3 foto ogni cella è 4:3 a qualsiasi larghezza:
   le foto si ritagliano poco e sempre allo stesso modo. Con 2 foto la cella di destra
   è verticale (2:3): è il posto giusto per una foto in verticale. */
.mosaic {
  display: grid;
  gap: 2px;
  aspect-ratio: 2 / 1;
  background: var(--white);
  overflow: hidden;
}

.mosaic img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
}

.mosaic--3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.mosaic--3 img:first-child {
  grid-row: span 2;
}

.mosaic--2 {
  grid-template-columns: 2fr 1fr;
}

.mosaic--logo {
  place-items: center;
  background: var(--mist);
}

.mosaic--logo img {
  width: auto;
  height: auto;
  max-width: 45%;
  max-height: 60%;
  padding: 1rem;
  background: var(--white);
  object-fit: contain;
}

/* Galleria della scheda: su telefono la foto grande va sopra e le altre sotto,
   così restano leggibili anche senza ingrandimento. */
@media (max-width: 47.99rem) {
  .mosaic--tall {
    aspect-ratio: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .mosaic--tall img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .mosaic--tall img:first-child,
  .mosaic--2.mosaic--tall img {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* Punto focale: sposta il ritaglio verso il soggetto. Le classi le scrive il generatore
   (vedi FOCUS in producers.py); a mano basta aggiungere fx-NN e fy-NN all'immagine. */
.fx-0 { --fx: 0%; } .fx-10 { --fx: 10%; } .fx-20 { --fx: 20%; } .fx-30 { --fx: 30%; } .fx-40 { --fx: 40%; } .fx-50 { --fx: 50%; }
.fx-60 { --fx: 60%; } .fx-70 { --fx: 70%; } .fx-80 { --fx: 80%; } .fx-90 { --fx: 90%; } .fx-100 { --fx: 100%; }
.fy-0 { --fy: 0%; } .fy-10 { --fy: 10%; } .fy-20 { --fy: 20%; } .fy-30 { --fy: 30%; } .fy-40 { --fy: 40%; } .fy-50 { --fy: 50%; }
.fy-60 { --fy: 60%; } .fy-70 { --fy: 70%; } .fy-80 { --fy: 80%; } .fy-90 { --fy: 90%; } .fy-100 { --fy: 100%; }

/* Anteprima ingrandita al passaggio del mouse (la crea main.js, solo dove c'è un mouse). */
.mosaic--tall img,
.beer__media img {
  cursor: zoom-in;
}

.zoom {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: rgb(16 26 20 / 0.66);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease-out, visibility 0s 0.16s;
}

.zoom.is-on {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.zoom__frame {
  margin: 0;
  background: var(--white);
  border-top: var(--rule);
  box-shadow: 0 1.5rem 4rem rgb(16 26 20 / 0.5);
}

.zoom__frame img {
  display: block;
  width: 100%;
  height: auto;
}

.zoom__frame figcaption {
  padding: 0.625rem 0.875rem 0.6875rem;
  background: var(--teal-900);
  color: var(--mist);
  font-size: 0.9375rem;
  line-height: 1.35;
}

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

/* Scheda produttore */
.producer-layout {
  display: grid;
  gap: 2.5rem;
}

.producer-aside {
  display: grid;
  align-content: start;
  gap: 1.25rem;
  padding: 1.75rem 1.5rem;
  background: var(--white);
  border-top: var(--rule);
}

.producer-aside__logo {
  width: auto;
  max-width: 13rem;
  max-height: 6rem;
  object-fit: contain;
}

.story {
  display: grid;
  align-content: start;
  gap: 1.125rem;
  max-width: 42rem;
}

.story .h2 {
  margin-bottom: 0.5rem;
}

.story p:not(.eyebrow) {
  font-size: 1.125rem;
  line-height: 1.6;
}

.story .h2 + p {
  font-size: clamp(1.1875rem, 1.7vw, 1.375rem);
  line-height: 1.5;
  font-weight: 500;
}

.video-block {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.video-block__player {
  width: 100%;
  max-width: 20rem;
  height: auto;
  aspect-ratio: 9 / 16;
  justify-self: center;
  background: var(--ink);
  border-top: var(--rule);
}

.video-block__meta {
  font: 700 0.8125rem/1.3 var(--font-display);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--amber-light);
}

/* Video orizzontale (16:9): testo a sinistra, video largo a destra. */
.video-block--wide .video-block__player {
  max-width: none;
  aspect-ratio: 16 / 9;
}

@media (min-width: 48rem) {
  .video-block {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 4rem;
  }
}

@media (min-width: 64rem) {
  .video-block--wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 3rem;
  }
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
  .video-block--wide {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
}

.facts {
  display: grid;
  gap: 0;
  border-top: 2px solid var(--teal-900);
}

.facts li {
  position: relative;
  padding: 1rem 0 1rem 1.75rem;
  border-bottom: 1px solid var(--paper-line);
}

.facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.6rem;
  width: 1rem;
  height: 3px;
  background: var(--amber);
}

.beer-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  background: var(--paper-line);
}

.gallery {
  margin-top: 2px;
}

.beer {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1.25rem;
  background: var(--white);
}

.beer__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8.5rem;
}

.beer__media img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.beer__body {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.beer__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.beer__head .h3 {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Sul telefono la descrizione passa sotto la foto e usa tutta la larghezza. */
@media (max-width: 47.99rem) {
  .beer {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0.5rem 1rem;
  }

  .beer__body {
    display: contents;
  }

  .beer__media {
    grid-row: 1 / span 2;
    height: 6.5rem;
  }

  .beer__head {
    grid-column: 2;
    align-self: end;
  }

  .beer__style {
    grid-column: 2;
    align-self: start;
  }

  .beer__body > p:not(.beer__style) {
    grid-column: 1 / -1;
  }
}

.beer__abv {
  flex: none;
  font: 800 1.25rem/1 var(--font-display);
  letter-spacing: 0.04em;
  color: var(--amber-dark);
}

.beer__style {
  font: 700 0.875rem/1.3 var(--font-display);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}

.beer__award {
  justify-self: start;
  padding: 0.4rem 0.6rem;
  background: var(--amber);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
}

/* Link al sito ufficiale del produttore, sopra "Precedente / Successivo". */
.section--site {
  padding-bottom: 0;
}

.section--nav {
  padding-top: 2px;
}

.producer-site {
  display: grid;
  gap: 1.25rem;
  padding: 1.5rem 1.25rem 1.75rem;
  background: var(--white);
  border-top: var(--rule);
}

.producer-site__link {
  display: grid;
  gap: 0.625rem;
  justify-items: start;
  margin: 0;
}

.producer-site .link-arrow {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 1.25rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.producer-site .link-arrow svg {
  width: 1.125rem;
  height: 1.125rem;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .producer-site .link-arrow:hover svg {
    transform: translate(2px, -2px);
  }
}

@media (min-width: 48rem) {
  .producer-site {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
    padding: 2rem 2.25rem 2.25rem;
  }
}

.producer-nav {
  display: grid;
  gap: 2px;
}

.producer-nav a {
  display: grid;
  gap: 0.25rem;
  padding: 1.25rem;
  background: var(--white);
  text-decoration: none;
}

.producer-nav span {
  font: 700 0.8125rem/1.3 var(--font-display);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}

.producer-nav strong {
  font: 800 1.5rem/1 var(--font-display);
  text-transform: uppercase;
}

@media (min-width: 48rem) {
  .beer {
    grid-template-columns: 9.5rem minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1.75rem;
  }

  .beer__media {
    height: 12rem;
  }

  /* La descrizione non supera una riga comoda da leggere, anche quando la scheda è larga. */
  .beer__body {
    max-width: 34rem;
  }

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

  .producer-nav a:last-child {
    text-align: right;
  }
}

@media (min-width: 64rem) {
  .beer-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .beer:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .producer-layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(20rem, 1fr);
    gap: 4rem;
    align-items: start;
  }

  .producer-aside {
    padding: 2.25rem 2rem;
  }
}

/* 9. Servizi -------------------------------------------------------------- */
.service-grid {
  display: grid;
  gap: 2px;
}

.service-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.875rem;
  padding: 1.5rem;
  background: var(--white);
  color: var(--teal-900);
}

.service-card .tag,
.service-block .tag {
  justify-self: start;
  margin-top: 0.25rem;
  line-height: 1.3;
  white-space: normal;
}

.service-card h3 a {
  text-decoration: none;
}

@media (min-width: 40rem) {
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .service-card {
    padding: 2rem 1.75rem 2.25rem;
  }
}

.service-block {
  display: grid;
  gap: 1.25rem;
  padding-block: clamp(2rem, 5vw, 3.25rem);
  border-top: 2px solid var(--teal-900);
}

.service-block__head {
  display: grid;
  align-content: start;
  gap: 1rem;
}

.service-block__head .tag {
  justify-self: start;
}

.service-block__body {
  display: grid;
  align-content: start;
  gap: 1rem;
  max-width: 40rem;
}

.dash-list {
  display: grid;
  gap: 0.5rem;
}

.dash-list li {
  position: relative;
  padding-left: 1.75rem;
}

.dash-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 1rem;
  height: 3px;
  background: var(--amber);
}

.section--amber .dash-list li::before {
  background: var(--ink);
}

@media (min-width: 60rem) {
  .service-block {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 3rem;
  }
}

/* 10. Pagine interne ------------------------------------------------------ */
.page-head {
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: var(--rule);
}

.page-head__inner {
  display: grid;
  gap: 1.375rem;
}

.page-head .place {
  flex-wrap: wrap;
}

.breadcrumb {
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--gray);
}

.cols {
  display: grid;
  gap: 2rem;
}

@media (min-width: 60rem) {
  .cols--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem;
  }

  .cols--form {
    grid-template-columns: minmax(0, 1.3fr) minmax(20rem, 1fr);
    gap: 4rem;
    align-items: start;
  }
}

.trio {
  display: grid;
  gap: 2px;
}

.trio li {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 1.75rem 1.5rem;
  background: var(--teal-800);
  color: var(--white);
}

/* I tre blocchi hanno sempre il fondo scuro, anche dentro una sezione chiara. */
.trio li h3 {
  color: var(--white);
}

.trio .trio__num {
  font: 900 3rem/0.9 var(--font-display);
  color: var(--amber-light);
}

@media (min-width: 60rem) {
  .trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .trio li {
    padding: 2.25rem 2rem 2.5rem;
  }
}

.cta-band {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (min-width: 60rem) {
  .cta-band {
    grid-template-columns: minmax(0, 1.4fr) auto;
    gap: 3rem;
  }
}

.prose {
  display: grid;
  gap: 1rem;
  max-width: 44rem;
}

.prose h2 {
  margin-top: 1.75rem;
  font: 800 1.75rem/1 var(--font-display);
  text-transform: uppercase;
}

.prose ul {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.25rem;
  list-style: square;
}

.prose ul ::marker {
  color: var(--amber-dark);
}

.figure-wide img {
  width: 100%;
  height: clamp(14rem, 36vw, 28rem);
  object-fit: cover;
}

.figure-wide figcaption {
  padding-top: 0.625rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* 11. Moduli -------------------------------------------------------------- */
.form {
  display: grid;
  gap: 1rem;
}

.form__row {
  display: grid;
  gap: 1rem;
}

@media (min-width: 40rem) {
  .form__row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Città e sigla della provincia, affiancate a ogni larghezza */
.form__row--city {
  grid-template-columns: minmax(0, 1fr) 6.5rem;
  align-items: end;
}

.field {
  display: grid;
  gap: 0.375rem;
}

.field label,
.field .field__label {
  font: 700 0.875rem/1.3 var(--font-display);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.field .optional {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.on-amber .field .optional {
  color: var(--ink);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.8rem 0.875rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 1.0625rem/1.3 var(--font-body);
}

.field textarea {
  min-height: 8rem;
  resize: vertical;
}

.field input,
.field textarea {
  caret-color: var(--amber-dark);
}

.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid {
  border-color: var(--error);
  box-shadow: inset 0 -3px 0 var(--error);
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:
    calc(100% - 1.25rem) 50%,
    calc(100% - 0.875rem) 50%;
  background-size:
    0.375rem 0.375rem,
    0.375rem 0.375rem;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.section--white .field input:focus-visible,
.section--white .field select:focus-visible,
.section--white .field textarea:focus-visible,
.form--light .field input:focus-visible,
.form--light .field select:focus-visible,
.form--light .field textarea:focus-visible {
  outline-color: var(--amber);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.checks {
  display: grid;
  gap: 0.75rem;
}

.check input {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--ink);
}

.form__note {
  font-size: 0.9375rem;
  color: var(--muted);
}

.on-amber .form__note {
  color: var(--ink);
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 12. Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--gray-light);
  border-top: var(--rule);
}

.site-footer__top {
  display: grid;
  gap: 2rem;
  padding-block: 2.75rem 2rem;
}

.site-footer__logo {
  width: auto;
  height: 3rem;
}

.site-footer__cols {
  display: grid;
  gap: 2rem;
}

.site-footer h2 {
  margin-bottom: 0.75rem;
  font: 700 0.8125rem/1.3 var(--font-display);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--amber-light);
}

.site-footer ul {
  display: grid;
  gap: 0.125rem;
}

.site-footer li a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  color: var(--mist);
  text-decoration: none;
}

.site-footer li a:hover {
  color: var(--amber-light);
}

/* Sul telefono ogni voce del piè di pagina è alta almeno 44 px. */
@media (pointer: coarse) {
  .site-footer li a {
    min-height: 2.75rem;
  }

  .producer-card__name a {
    padding-block: 0.4375rem;
  }
}

.site-footer li svg {
  width: 1.125rem;
  height: 1.125rem;
}

.site-footer__legal {
  padding-block: 1.25rem 1.75rem;
  border-top: 1px solid var(--teal-800);
  font-size: 0.875rem;
  line-height: 1.5;
}

@media (min-width: 40rem) {
  .site-footer__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 4rem;
    padding-block: 3.5rem 2.5rem;
  }
}

/* 11b. Cartina dei birrifici (Chi siamo) ---------------------------------- */
.page-hero--map.page-head {
  background: #0f1914;
  padding-bottom: 0;
}

.page-hero--map::after {
  content: none;
}

.hero-map {
  display: block;
  width: 100%;
  height: auto;
}

.hero-map--d {
  display: none;
}

.hero-map--m {
  max-width: 46rem;
  margin: 1.75rem auto 0;
}

.hero-map .land {
  fill: none;
  stroke-width: 6;
  stroke-dasharray: 6 2;
}

.hero-map .land--other {
  stroke: #1f3329;
}

.hero-map .land--italy {
  stroke: #2b4a3c;
}

.hero-map .land--origin {
  stroke: #4f7a67;
}

.hero-map .route {
  fill: none;
  stroke: var(--amber-light);
  stroke-width: 1;
  opacity: 0.4;
}

.hero-map text {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--white);
  paint-order: stroke;
  stroke: #0f1914;
  stroke-linejoin: round;
}

.hero-map .dot {
  fill: var(--amber-light);
  stroke: #0f1914;
}

.hero-map .dot--home {
  fill: var(--white);
}

.hero-map a {
  text-decoration: none;
}

.hero-map a:hover text,
.hero-map a:focus-visible text {
  fill: var(--amber-light);
}

.hero-map a:focus-visible {
  outline: 2px solid var(--amber-light);
  outline-offset: 3px;
}

@media (min-width: 80rem) {
  .page-hero--map.page-head {
    padding-bottom: 4rem;
  }

  .hero-map--m {
    display: none;
  }

  .hero-map--d {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    height: 100%;
  }

  .page-hero--map .hero__inner {
    pointer-events: none;
  }

  .page-hero--map .hero__inner > * {
    pointer-events: auto;
  }
}

/* 12a. Testo e immagine affiancati (Servizi: si ordina dall'app) --------------- */
.media-figure {
  margin: 0;
}

.media-figure img {
  width: 100%;
  height: auto;
}

.media-figure figcaption {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

@media (min-width: 60rem) {
  .cols--media {
    align-items: center;
  }
}

/* 12b. Disegni: St. Patrick's Week e schema Real Ale ------------------------- */
/* Il logo dell'evento accanto al titolo. Sul telefono sta sotto il testo, più piccolo. */
.stpat-logo img {
  width: min(15rem, 62%);
  height: auto;
}

@media (min-width: 64rem) {
  .page-head__inner:has(.stpat-logo) {
    position: relative;
  }

  .stpat-logo {
    position: absolute;
    right: 0;
    bottom: -1rem;
    width: min(24rem, 30%);
  }

  .stpat-logo img {
    width: 100%;
  }
}

/* Un trifoglio tono su tono nell'angolo della fascia scura. */
.section--shamrock {
  position: relative;
  overflow: hidden;
}

.section--shamrock > .wrap {
  position: relative;
}

.section__shamrock {
  position: absolute;
  right: -2rem;
  bottom: -3rem;
  width: clamp(11rem, 26vw, 20rem);
  height: auto;
  pointer-events: none;
}

/* Su PC il trifoglio sta sotto il titolo, nella colonna vuota di sinistra. */
@media (min-width: 60rem) {
  .section__shamrock {
    right: auto;
    left: max(1rem, calc((100vw - var(--wrap)) / 2 + 9rem));
  }
}

.section--dark .facts {
  border-top-color: var(--amber);
}

.section--dark .facts li {
  border-bottom-color: var(--teal-700);
}

/* Schema cask e keykeg: due figure affiancate, con la legenda numerata sotto. */
.schema {
  display: grid;
  gap: 2px;
  background: var(--paper-line);
}

.schema__fig {
  display: grid;
  align-content: start;
  gap: 1.25rem;
  margin: 0;
  padding: 1.25rem;
  background: var(--paper);
}

.schema__fig svg {
  width: 100%;
  max-width: 35rem;
  height: auto;
}

.schema__fig figcaption {
  display: grid;
  gap: 0.75rem;
}

.schema__legend {
  display: grid;
  gap: 0.625rem;
  counter-reset: schema;
  max-width: 34rem;
}

.schema__legend li {
  position: relative;
  min-height: 1.75rem;
  padding-left: 2.5rem;
  counter-increment: schema;
}

.schema__legend li::before {
  content: counter(schema);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--teal-900);
  color: var(--white);
  font: 800 1rem/1 var(--font-display);
}

@media (min-width: 56rem) {
  .schema {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schema__fig {
    padding: 2rem;
  }
}

/* Due foto affiancate sotto un testo (St. Patrick's Week, apertura del 2018). */
.photo-pair {
  display: grid;
  gap: 2px;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

.photo-pair img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (min-width: 40rem) {
  .photo-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Titolo di un gruppo di birre dentro la stessa sezione (Real Ale: un gruppo per birrificio). */
.range-head {
  display: grid;
  gap: 0.5rem;
  max-width: 40rem;
  margin-block: 2.5rem 1.25rem;
}

.section__head + .range-head {
  margin-top: 0.5rem;
}

/* 13. Utilità ------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.stack {
  display: grid;
  align-content: start;
  gap: 1rem;
}

.stack--lg {
  gap: 1.75rem;
}

.mt-lg {
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

.nowrap {
  white-space: nowrap;
}