/* ==========================================================================
   World Recycling srl: stylesheet v2 (proposal of 29/10/2026)

   The owner wants the site to feel like cosmari.it: a video that starts by
   itself, figures that count up, a livelier and bolder page, always in the
   logo's green, light blue and yellow, and no more colour bands stacked one
   after another. So every section is one flat colour, full width, and the
   page is carried by the owner's real footage, big type and photos.

   Contents
    1. Tokens
    2. Base and type
    3. Layout helpers
    4. Buttons and links
    5. Header and menu
    6. Hero: the video wall
    7. Numbers
    8. Section heads
    9. Services cards
   10. Video band
   11. About and the chain
   12. Destinations
   13. Materials and the belt
   14. Clearances (before and after)
   15. EER codes
   16. Strengths
   17. Partners and the route map
   18. Contact call
   19. Footer
   20. Inner page head, crumbs, page nav
   21. Section heads and text
   22. Lists and figures
   23. Sequences: chain, steps, flow, timeline
   24. Table and quote
   25. Destinations and EER codes
   26. Photos and clips
   27. Gallery and lightbox
   28. Contact: form, map, address, closing band
   29. Utilities
   30. Motion, forced colours, print
   ========================================================================== */


/* ---------- 1. Tokens ---------- */

:root {
  /* The logo's colours */
  --verde: #078E45;          /* big type, icons, buttons; white on it only for large text (4.2:1) */
  --verde-scuro: #06753A;    /* green surfaces with small white text (5.8:1) */
  --notte: #0B4F2C;          /* deep green: headings on white (9.7:1), dark bands, footer */
  --celeste: #5797D1;        /* light blue surfaces (ink text 5.4:1), icons, rules */
  --velo: #EAF3FB;           /* the light blue at 12%: alternate bands */
  --giallo: #FDE000;         /* calls to action and accents on dark or photo */
  --giallo-hover: #FFEA3D;

  /* Text */
  --ink: #18291F;            /* body text: a green-black that sits with the palette (14.8:1 on white) */
  --ink-2: #41554A;          /* secondary text (7.6:1 on white, 6.6:1 on --velo) */
  --on-dark: #FFFFFF;
  --on-dark-2: #D7E8DD;      /* secondary text on --notte (10.9:1) */
  --line: #CFE0F0;           /* hairlines: the light blue, quiet */

  /* Type: one family, Archivo, used at two widths: wide and heavy for
     headlines and figures (like the lettering on trucks and containers),
     normal for reading */
  --font: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --wide: 118%;
  --wider: 125%;

  --step--1: 0.9375rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.375rem, 1.15rem + 0.7vw, 1.625rem);
  --step-3: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem);
  --step-4: clamp(2.5rem, 1.25rem + 5.2vw, 6rem);

  --wrap: 76rem;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);
  --space: clamp(4rem, 2.8rem + 4.5vw, 7.5rem);   /* vertical padding of a band */
  --header-h: 4.75rem;

  --ease-out: cubic-bezier(0.2, 0.75, 0.25, 1);
  --focus: var(--notte);

  /* Component colours of the inner pages (sections 20 to 29), re-mapped
     by the dark and light blue bands (section 3) */
  --head: var(--notte);      /* headings, labels, strong values */
  --muted: var(--ink-2);     /* secondary text */
  --rule: var(--line);       /* row rules */
  --strap: var(--verde);     /* the short rule over a peer, a ledger, a fact */
  --accent: var(--verde);    /* big figures and codes (large text only: 4.2:1) */
  --mark: var(--verde-scuro); /* step numbers and dots */
  --mark-ink: #fff;
  --line-mark: var(--celeste); /* the line through steps and dots */
  --errore: #B3261E;         /* form errors: 6.5:1 on white, 5.8:1 on --velo */
}


/* ---------- 2. Base and type ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

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

img,
video { height: auto; }

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

/* Hidden means hidden, whatever display a component sets (the gallery's
   filter bar, the map's consent box and button wait for main.js) */
[hidden] { display: none !important; }

ul[role="list"],
ol[role="list"] { list-style: none; padding: 0; }

h1, h2, h3 {
  color: var(--notte);
  font-stretch: var(--wide);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); line-height: 1.15; font-weight: 750; }

p { max-width: 66ch; }

strong { font-weight: 700; }

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

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

abbr[title] { text-decoration: none; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1.25rem;
  background: var(--giallo);
  color: var(--notte);
  font-weight: 700;
  transform: translateY(-200%);
}

.skip:focus { transform: none; }


/* ---------- 3. Layout helpers ---------- */

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--space); }
.band--velo { background: var(--velo); }
.band--notte { background: var(--notte); color: var(--on-dark); --focus: var(--giallo); }
.band--verde { background: var(--verde-scuro); color: var(--on-dark); --focus: var(--giallo); }
.band--celeste { background: var(--celeste); color: var(--ink); }

.band--notte h2,
.band--notte h3,
.band--verde h2,
.band--verde h3 { color: #fff; }

.band--celeste h2,
.band--celeste h3 { color: var(--ink); }

/* The inner pages' components take their colours from the band */
.band--velo { --rule: rgba(87, 151, 209, 0.38); }

.band--notte,
.band--verde,
.on-dark,
.page-head,
.call {
  --head: #fff;
  --muted: var(--on-dark-2);
  --rule: rgba(255, 255, 255, 0.24);
  --strap: var(--giallo);
  --accent: #fff;
  --mark: var(--giallo);
  --mark-ink: var(--notte);
  --line-mark: rgba(255, 255, 255, 0.35);
  --focus: var(--giallo);
}

.band--verde { --muted: #E3F1E8; }   /* 5:1 on --verde-scuro */

.band--celeste {
  --head: var(--ink);
  --muted: var(--ink);
  --rule: rgba(24, 41, 31, 0.28);
  --strap: var(--notte);
  --accent: var(--notte);
  --mark: var(--notte);
  --mark-ink: #fff;
  --line-mark: var(--notte);
}

.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}

@media (min-width: 56em) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--text-wide { grid-template-columns: 1.15fr 0.85fr; }
  .split--aside-first { grid-template-columns: 0.8fr 1.2fr; align-items: start; }
}

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
}

/* The gap is set on each stack, so a nested stack does not inherit an
   outer --s / --l / --xl (section 21) */
.stack { --stack-gap: 1.1em; }
.stack > * + * { margin-top: var(--stack-gap); }

.u-mt { margin-top: 1.25rem; }


/* ---------- 4. Buttons and links ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.7rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn--giallo { background: var(--giallo); color: var(--notte); }
.btn--giallo:hover { background: var(--giallo-hover); }

.btn--verde { background: var(--verde-scuro); color: #fff; }
.btn--verde:hover { background: var(--notte); }

.btn--chiaro { border-color: rgba(255, 255, 255, 0.85); color: #fff; }
.btn--chiaro:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }

.btn__icon { flex: none; width: 1.1em; height: 1.1em; }

.btn__meta {
  font-weight: 500;
  opacity: 0.85;
}

/* A plain link that leads somewhere: green, with a yellow bar under it
   that thickens on hover. Inline, so a link that wraps gets a bar under
   each of its lines, as long as its words (not one bar across the column) */
.more {
  display: inline;
  color: var(--notte);
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(var(--giallo), var(--giallo)) left bottom / 100% 0.28em no-repeat;
  padding-bottom: 0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.2s ease;
}

.more:hover { background-size: 100% 0.55em; }

.band--notte .more,
.band--verde .more { color: #fff; }

/* On the light blue the deep green is only 3.1:1: ink (4.9:1) */
.band--celeste .more { color: var(--ink); }


/* ---------- 5. Header and menu ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  color: var(--notte);
  box-shadow: 0 1px 0 var(--line);
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/* On the home the bar sits over the video wall, clear, until the wall has
   gone by (main.js section 7). Only with JS: without it the bar stays white. */
.js .site-header--over {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
  --focus: var(--giallo);
}

/* The backing under the clear bar: deep enough where the links sit for
   white text over the brightest frames of the clips and photos (4.5:1) */
.js .site-header--over::before {
  content: "";
  position: absolute;
  inset: 0 0 -2.5rem;
  z-index: -1;
  background: linear-gradient(rgba(4, 34, 19, 0.75), rgba(4, 34, 19, 0.35) 70%, rgba(4, 34, 19, 0));
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* ... and a soft shadow under the white text while the bar is clear */
.js .site-header--over:not(.is-solid) .site-header__bar > .brand,
.js .site-header--over:not(.is-solid) .site-nav a,
.js .site-header--over:not(.is-solid) .lang a {
  text-shadow: 0 1px 8px rgba(4, 34, 19, 0.7);
}

/* (not on the current language, deep green on its white pill) */
.js .site-header--over:not(.is-solid) .lang a[aria-current="true"] { text-shadow: none; }

.js .site-header--over.is-solid {
  background: #fff;
  color: var(--notte);
  box-shadow: 0 2px 18px rgba(11, 79, 44, 0.12);
  --focus: var(--notte);
}

.js .site-header--over.is-solid::before { opacity: 0; }

.site-header__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  color: inherit;
  text-decoration: none;
}

.brand__mark { width: 2.4rem; height: auto; }

.brand__word {
  font-size: 1.3rem;
  font-stretch: var(--wide);
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.9rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.menu-toggle__icon {
  display: grid;
  gap: 4px;
  width: 1.1rem;
}

.menu-toggle__icon span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.site-menu {
  display: none;
}

/* Without JS (as in the old style.css): no button, the links sit under
   the white bar, in a row; below 66em the bar then scrolls away with them
   instead of covering the page */
html:not(.js) .menu-toggle { display: none; }

@media (max-width: 65.99em) {
  html:not(.js) .site-header { position: relative; }
  html:not(.js) .site-header__bar { flex-wrap: wrap; row-gap: 0.4rem; padding-block: 0.9rem 0.75rem; }

  html:not(.js) .site-menu {
    display: block;
    flex-basis: 100%;
    order: 5;
  }

  html:not(.js) .site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
  html:not(.js) .site-nav a { padding: 0.4rem 0; font-size: var(--step-0); font-stretch: 100%; font-weight: 650; }
  html:not(.js) .site-nav a[aria-current="page"] { text-decoration-color: var(--verde); text-decoration-thickness: 3px; }
  html:not(.js) .lang { margin-top: 0.5rem; }
  html:not(.js) .lang a { border-color: currentColor; }
  html:not(.js) .lang a[aria-current="true"] { background: var(--notte); border-color: var(--notte); color: #fff; }
  html:not(.js) .site-menu__mail { margin-top: 0.5rem; font-size: var(--step--1); }
}

.site-menu.is-open {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 1.5rem var(--gutter) 2rem;
  background: var(--notte);
  color: #fff;
  border-bottom: 4px solid var(--giallo);
  box-shadow: 0 18px 40px rgba(4, 34, 19, 0.35);
  --focus: var(--giallo);
}

/* The open panel never runs past the screen: on a landscape phone or at
   400% zoom it scrolls by itself, so the last links, IT / EN and the
   e-mail stay reachable (the bar is fixed, the page under it does not
   move). While it is open over the clear bar, bar and panel are one sheet. */
@media (max-width: 65.99em) {
  .site-menu.is-open {
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .js .site-header--over:not(.is-solid):has(.site-menu.is-open) { background: var(--notte); }
}

.site-nav ul { display: grid; gap: 0.25rem; }

.site-nav a {
  display: block;
  padding: 0.6rem 0;
  font-size: var(--step-2);
  font-stretch: var(--wide);
  font-weight: 750;
  text-decoration: none;
}

.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--giallo); }

.lang {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}

.lang a[aria-current="true"] { background: #fff; color: var(--notte); border-color: #fff; }

/* The flag beside the language's letters. In the stylesheet, so that every page has it */
.lang a { gap: 0.4em; padding-inline: 0.7em; }

.lang a::before {
  content: "";
  flex: none;
  width: 1.3em;
  height: 0.87em;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(4, 34, 19, 0.25);
  background-position: center;
  background-size: cover;
}

.lang a[hreflang="it"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23009246' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23fff' d='M1 0h1v2H1z'/%3E%3Cpath fill='%23ce2b37' d='M2 0h1v2H2z'/%3E%3C/svg%3E"); }
.lang a[hreflang="en"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath fill='%23012169' d='M0 0h60v40H0z'/%3E%3Cpath stroke='%23fff' stroke-width='8' d='M0 0l60 40M60 0L0 40'/%3E%3Cpath stroke='%23c8102e' stroke-width='3' d='M0 0l60 40M60 0L0 40'/%3E%3Cpath stroke='%23fff' stroke-width='13' d='M30 0v40M0 20h60'/%3E%3Cpath stroke='%23c8102e' stroke-width='8' d='M30 0v40M0 20h60'/%3E%3C/svg%3E"); }

.site-menu__mail { margin-top: 1.25rem; font-weight: 600; }

.quick-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: var(--giallo);
  color: var(--notte);
  font-weight: 700;
  text-decoration: none;
}

.quick-call__num { display: none; }

/* Phones: the wordmark a size down, the menu button a round icon */
@media (max-width: 29.99em) {
  .site-header__bar { gap: 0.6rem; }
  .brand__mark { width: 2.1rem; }
  .brand__word { font-size: 1.1rem; }
  .menu-toggle { width: 2.75rem; padding: 0; justify-content: center; }
  .menu-toggle__label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Under 360px: the wordmark at normal width, clear of the menu button */
@media (max-width: 22.49em) {
  .site-header__bar { gap: 0.5rem; }
  .brand { gap: 0.45rem; }
  .brand__mark { width: 1.85rem; }
  .brand__word { font-size: 1rem; font-stretch: 100%; }
}

@media (min-width: 48em) {
  .quick-call { padding-inline: 1.1rem; }
  .quick-call__num { display: inline; }
}

/* A tight full bar, with the flags: the icon still calls, the number waits */
@media (min-width: 66em) and (max-width: 77.99em) {
  .quick-call__num { display: none; }
}

/* The full bar from 66em, the same breakpoint as main.js section 2 */
@media (min-width: 66em) {
  .menu-toggle { display: none; }

  .site-menu,
  .site-menu.is-open {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    position: static;
    padding: 0;
    background: none;
    color: inherit;
    border-bottom: 0;
    box-shadow: none;
  }

  .site-nav ul { display: flex; gap: 1.5rem; }

  .site-nav a {
    padding: 0.4rem 0;
    font-size: 1rem;
    font-stretch: 100%;
    font-weight: 650;
    text-decoration: none;
    background: linear-gradient(var(--giallo), var(--giallo)) left bottom / 0 3px no-repeat;
    transition: background-size 0.2s ease;
  }

  .site-nav a:hover,
  .site-nav a[aria-current="page"] { background-size: 100% 3px; text-decoration: none; }

  .lang { margin: 0; gap: 0.35rem; }

  .lang a {
    min-width: 2.5rem;
    min-height: 2.5rem;
    border-color: currentColor;
    border-width: 1.5px;
    gap: 0.3em;
    padding-inline: 0.5em;
    font-size: 0.875rem;
    opacity: 0.85;
  }

  .lang a::before { width: 1.15em; height: 0.77em; }

  .lang a[aria-current="true"] { background: currentColor; opacity: 1; }
  .lang a[aria-current="true"] span:not(.sr-only),
  .lang a[aria-current="true"] { color: var(--notte); }

  /* Over the clips and photos the other language stays full white */
  .js .site-header--over:not(.is-solid) .lang a { opacity: 1; }
  .js .site-header--over:not(.is-solid) .lang a[aria-current="true"] { background: #fff; border-color: #fff; }
  .js .site-header--over.is-solid .lang a[aria-current="true"],
  html:not(.js) .site-header .lang a[aria-current="true"],
  .site-header:not(.site-header--over) .lang a[aria-current="true"] { background: var(--notte); border-color: var(--notte); color: #fff; }

  .site-menu__mail { display: none; }
}


/* ---------- 6. Hero: the video wall ---------- */

/* The owner's phone clips are vertical, so the wall shows them as they were
   filmed, side by side: three on a computer, two on a tablet, one filling a
   phone. Each panel shows a still from its clip first (and for good without
   JS, with Save-Data or a 2G link); after the page has loaded the clip plays
   over it, muted (main.js section 9). A dark green veil keeps the title
   readable. */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  /* the full screen up to 1920 x 1080 (68rem), so no empty strip under it */
  min-height: max(34rem, min(100svh, 68rem));
  color: #fff;
  background: var(--notte);
  isolation: isolate;
  --focus: var(--giallo);
}

.hero__wall {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  background: var(--notte);
  overflow: hidden;
}

.hero__panel {
  position: relative;
  overflow: hidden;
  min-width: 0;
  background: var(--notte);
}

.hero__panel--b,
.hero__panel--c { display: none; }

/* The bunker grab (panel a, the owner's key shot) fills the phone; on wider
   screens it goes to the right, clear of the veil behind the title */
/* Just above the breakpoint, a little less air, or the longest English name wraps */
@media (min-width: 66em) and (max-width: 69em) {
  .site-nav ul { gap: 1.1rem; }
  .site-menu,
  .site-menu.is-open { gap: 1.25rem; }
}

@media (min-width: 38em) {
  .hero__wall { grid-template-columns: 1fr 1fr; }
  .hero__panel--b { display: block; }
  .hero__panel--a { order: 3; }
}

@media (min-width: 56em) {
  .hero__wall { grid-template-columns: 1fr 1fr 1fr; }
  .hero__panel--c { display: block; }
}

.hero__panel img,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
}

.hero__video {
  opacity: 0;
  transition: opacity 0.9s ease;
}

.hero__panel.is-playing .hero__video { opacity: 1; }

/* The veil: from the bottom on phones, from the left on wide screens.
   z-index: over every panel, also panel a, which order: 3 would otherwise
   paint over it (grid items paint in order-modified order). On phones and
   tablets the text climbs high up the clip (the slogan sits just under the
   bar on a small phone), so the veil stays at 0.55 or more all the way up,
   as on the inner pages' heads: white and yellow text over the brightest
   frames keep their contrast. */
.hero__wall::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(4, 34, 19, 0.92) 0%, rgba(4, 34, 19, 0.78) 38%, rgba(4, 34, 19, 0.6) 72%, rgba(4, 34, 19, 0.55) 100%);
  pointer-events: none;
}

@media (min-width: 56em) {
  .hero__wall::after {
    background:
      linear-gradient(90deg, rgba(4, 34, 19, 0.9) 0%, rgba(4, 34, 19, 0.72) 34%, rgba(4, 34, 19, 0.18) 64%, rgba(4, 34, 19, 0.05) 100%),
      linear-gradient(0deg, rgba(4, 34, 19, 0.55) 0%, rgba(4, 34, 19, 0) 45%);
  }
}

.hero__body {
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}

/* The owner's slogan over the title, in the footer's yellow */
.hero__slogan {
  margin-bottom: 1rem;
  color: var(--giallo);
  font-size: var(--step-1);
  font-stretch: var(--wide);
  font-weight: 750;
  line-height: 1.25;
  text-shadow: 0 1px 12px rgba(4, 34, 19, 0.6);
}

/* On phones the pause button sits at the top right: the slogan keeps clear of it */
@media (max-width: 37.99em) {
  .hero__slogan { padding-right: 3.75rem; }
}

/* The title is a full sentence since 29/10 ("Dal rifiuto al recupero
   energetico e al riciclo, fino alla materia prima seconda."): a little
   smaller than --step-4, also capped by the screen's height, and wider, so
   it keeps to four lines on a computer and the buttons stay above the fold
   on low laptop screens too. Widths in em, not ch: Chrome can keep the ch
   of the fallback font after Archivo arrives, which made it six lines. */
.hero__title {
  max-width: 12.85em;
  color: #fff;
  font-size: clamp(2.25rem, min(1rem + 3.9vw, 7.4vh), 4.75rem);
  font-stretch: var(--wide);
  font-weight: 850;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hero__lead {
  max-width: 22.9em;   /* 40ch of Archivo, in em for the reason above */
  margin-top: 1.4rem;
  font-size: var(--step-1);
  line-height: 1.5;
  color: #fff;
  text-shadow: 0 1px 12px rgba(4, 34, 19, 0.45);
}

.hero .actions { margin-top: 2rem; }

.hero__note {
  margin-top: 1rem;
  font-size: var(--step--1);
  color: var(--on-dark-2);
}

.hero__note a { color: #fff; font-weight: 600; }

/* Pause button and caption, bottom right, over the wall */
.hero__tools {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hero__cap {
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.hero__pause {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: rgba(4, 34, 19, 0.45);
  color: #fff;
  cursor: pointer;
}

.hero__pause[hidden] { display: none; }

.hero__pause:hover { background: rgba(4, 34, 19, 0.7); }

/* Two bars while it plays, a triangle once the visitor has paused it */
.hero__pause::before {
  content: "";
  width: 0.85rem;
  height: 1rem;
  background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%);
}

.hero__pause.is-paused::before {
  width: 0;
  height: 0;
  margin-left: 0.2rem;
  background: none;
  border-style: solid;
  border-width: 0.55rem 0 0.55rem 0.9rem;
  border-color: transparent transparent transparent currentColor;
}

/* On phones the tools sit at the top right, out of the title's way */
@media (max-width: 37.99em) {
  .hero__tools {
    top: calc(var(--header-h) + 0.75rem);
    bottom: auto;
  }
}


/* ---------- 7. Numbers ---------- */

.numbers { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }

.numbers__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}

.numbers__head p { color: var(--ink-2); }

.stats {
  container-type: inline-size;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 1.5rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

@media (min-width: 60em) {
  .stats { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .stat { padding-inline: 1.5rem; border-left: 2px solid var(--line); }
  .stat:first-child { padding-left: 0; border-left: 0; }
}

.stat {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stat__value {
  order: -1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: var(--verde);
}

.stat__icon {
  width: 2.75rem;
  height: 2.75rem;
  color: var(--celeste);
}

.stat__figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  font-size: clamp(2.75rem, 1.6rem + 3.6vw, 5rem);
  font-stretch: var(--wider);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}

/* The size also follows the row's width, so "5.500" (3.54em) stays inside
   its column: two columns (320px included), then four in a row from 60em */
.stat__figure { font-size: min(clamp(2.75rem, 1.6rem + 3.6vw, 5rem), 14cqi - 0.25rem); }

@media (min-width: 60em) {
  .stat__figure { font-size: min(clamp(2.75rem, 1.6rem + 3.6vw, 5rem), 7cqi - 0.9rem); }
}

.stat__pre,
.stat__unit {
  font-size: max(0.32em, 0.8125rem);
  font-stretch: 100%;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--notte);
}

.stat__pre { flex-basis: 100%; margin-bottom: 0.2rem; }

/* In the home's row "fino a" sits beside the icon, out of the figure's
   flow, so the four figures share one line */
.stats .stat__value { position: relative; }

.stats .stat__pre {
  position: absolute;
  top: 0.7rem;
  left: 3.5rem;
  margin: 0;
  white-space: nowrap;
}

.stat__label {
  margin-top: 0.85rem;
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.25;
  color: var(--notte);
}

.stat__label a { text-decoration-color: var(--giallo); text-decoration-thickness: 3px; }

.stat__note {
  margin-top: 0.35rem;
  font-size: var(--step--1);
  color: var(--ink-2);
}

/* While a figure counts, its final value (invisible) holds the box and the
   running value sits over it: nothing around it moves (main.js section 8) */
.count--live { display: inline-grid; }
.count__ghost,
.count__run { grid-area: 1 / 1; }
.count__ghost { visibility: hidden; }


/* ---------- 8. Section heads ---------- */

.head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 4rem);
}

@media (min-width: 60em) {
  .head--split {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: end;
    gap: 4rem;
  }
}

.head p { color: inherit; }
.band--velo .head p,
.band:not([class*="band--"]) .head p { color: var(--ink-2); }


/* ---------- 9. Services cards ---------- */

.cards {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* Three in a row from 64em; on a tablet one per row, the photo beside
   the text (three columns there left 165px of text per card) */
@media (min-width: 64em) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
}

.card__ph {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--notte);
}

.card__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
  transition: transform 0.6s var(--ease-out);
}

.card:hover .card__ph img { transform: scale(1.04); }

.card__ph::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(rgba(4, 34, 19, 0), rgba(4, 34, 19, 0.85));
}

.card__title {
  position: absolute;
  z-index: 1;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.4rem;
  color: #fff;
  font-size: var(--step-2);
}

/* The body fills the card and its last row (the link) sits at the bottom,
   so the three links stay level whatever the length of the texts */
.card__body {
  flex: 1;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1.75rem;
  border-top: 6px solid var(--verde);
}

.card:nth-child(2) .card__body { border-top-color: var(--celeste); }
.card:nth-child(3) .card__body { border-top-color: var(--giallo); }

.card__body p { color: var(--ink-2); }

/* The photo's own caption: a small dark pill at the top, clear of the
   title at the foot */
.card__cap {
  position: absolute;
  z-index: 1;
  top: 1rem;
  left: 1rem;
  max-width: calc(100% - 2rem);
  padding: 0.25rem 0.8rem 0.3rem;
  border-radius: 999px;
  background: rgba(4, 34, 19, 0.85);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}

@media (min-width: 48em) and (max-width: 63.99em) {
  .card {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  .card__ph { aspect-ratio: auto; min-height: 16rem; }
  .card__ph img { position: absolute; inset: 0; }

  .card__body {
    align-content: center;
    border-top: 0;
    border-left: 6px solid var(--verde);
  }

  .card:nth-child(2) .card__body { border-left-color: var(--celeste); }
  .card:nth-child(3) .card__body { border-left-color: var(--giallo); }
}


/* ---------- 10. Video band ---------- */

.video-band .split { align-items: center; }

.video-band .lead { color: var(--on-dark-2); }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.tags li {
  padding: 0.35rem 0.9rem;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
}

.band:not(.band--notte):not(.band--verde) .tags li { border-color: var(--celeste); color: var(--notte); }

.phone {
  justify-self: center;
  width: min(100%, 22rem);
}

.phone video {
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 1.25rem;
  background: #000;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08), 0 30px 60px rgba(0, 0, 0, 0.35);
}

.phone figcaption {
  margin-top: 1rem;
  font-size: var(--step--1);
  font-weight: 600;
  text-align: center;
}

.phone figcaption span {
  display: block;
  font-weight: 400;
  color: var(--on-dark-2);
}


/* ---------- 11. About and the chain ---------- */

.about__ph {
  position: relative;
}

.about__ph img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.ph-cap {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  color: var(--ink-2);
}

/* The four places in the chain: a real sequence, so numbered */
.chain { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }

.chain__title {
  font-size: var(--step-1);
  font-stretch: 100%;
  font-weight: 700;
  color: var(--notte);
}

.chain__list {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
  counter-reset: step;
}

@media (min-width: 52em) {
  .chain__list { grid-template-columns: repeat(4, 1fr); gap: 0; }
}

.chain__step {
  position: relative;
  padding: 1.5rem 1.5rem 1.75rem;
  background: var(--velo);
  counter-increment: step;
}

@media (min-width: 52em) {
  .chain__step + .chain__step { border-left: 3px solid #fff; }
}

.chain__step::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: #fff;
  color: var(--notte);
  font-stretch: var(--wide);
  font-weight: 800;
}

.chain__step h3 { font-size: var(--step-1); }

.chain__step p { margin-top: 0.5rem; font-size: var(--step--1); color: var(--ink-2); }

.chain__step--us {
  background: var(--verde-scuro);
  color: #fff;
}

.chain__step--us::before { background: var(--giallo); }
.chain__step--us h3 { color: #fff; }
.chain__step--us p { color: #E3F1E8; }


/* ---------- 12. Destinations ---------- */

.dests {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3rem);
}

@media (min-width: 48em) {
  .dests { grid-template-columns: repeat(3, 1fr); }
}

.dests .dest { container-type: inline-size; }

/* The caption sits over the photo's foot (.ph__cap, section 26) */
.dest__ph {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.dest__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
}

.dest__codes {
  display: block;
  margin-top: 1.25rem;
  font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
  font-stretch: var(--wider);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--verde);
}

.dest__codes--d { color: var(--notte); }

/* "R3 R12 R13" on one line in its third of the row: the size follows the
   column (13.5cqi), so the three names start level */
.dests .dest__codes {
  white-space: nowrap;
  font-size: min(clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem), 13.5cqi);
}

.dest__name {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--step-1);
}

.dest p { margin-top: 0.6rem; color: var(--ink-2); }

.dest__more { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }


/* ---------- 13. Materials and the belt ---------- */

/* Two rows of material names move across the band like on a conveyor belt
   as the page scrolls (CSS scroll-driven animation, only where the browser
   has it and the visitor has not asked for less motion; elsewhere they stay
   still). The rows repeat the lists below, which are the real content. */
.belt {
  display: grid;
  gap: 0.6rem;
  margin-block: clamp(2.5rem, 2rem + 2vw, 4rem);
  overflow: hidden;
  font-size: clamp(2rem, 1.2rem + 3.6vw, 4.75rem);
  font-stretch: var(--wider);
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
  user-select: none;
}

.belt__row {
  display: flex;
  gap: 0.6em;
  width: max-content;
}

.belt__row span {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

.belt__row span::after {
  content: "";
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background: var(--giallo);
}

.belt__row--2 { color: var(--giallo); margin-left: -12%; }
.belt__row--2 span::after { background: #fff; }

.groups {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 52em) {
  .groups { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

.group {
  padding-top: 1.25rem;
  border-top: 3px solid var(--giallo);
}

.group h3 { font-size: var(--step-2); }

.group__count {
  margin-left: 0.4rem;
  font-size: var(--step--1);
  font-stretch: 100%;
  font-weight: 600;
  color: #CDEBD8;
}

.group ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1rem;
}

.group li {
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: var(--step--1);
  font-weight: 600;
}

.materials__ask { margin-top: 2.5rem; color: #E3F1E8; }
.materials__ask a { color: #fff; font-weight: 700; }

/* The same groups on a white or light blue band (servizi #materiali):
   green rule, quiet count, pills in the tint (white on the tint) */
.band:not(.band--notte):not(.band--verde) .group { border-top-color: var(--verde); }
.band:not(.band--notte):not(.band--verde) .group__count { color: var(--ink-2); }
.band:not(.band--notte):not(.band--verde) .group li { background: var(--velo); color: var(--notte); }
.band--velo:not(.band--notte):not(.band--verde) .group li { background: #fff; }
.band:not(.band--notte):not(.band--verde) .materials__ask { color: var(--ink-2); }
.band:not(.band--notte):not(.band--verde) .materials__ask a { color: var(--notte); }

/* ... and the belt there: green and light blue words, green dots */
.band:not(.band--notte):not(.band--verde) .belt { color: var(--verde); }
.band:not(.band--notte):not(.band--verde) .belt__row--2 { color: var(--celeste); }
.band:not(.band--notte):not(.band--verde) .belt__row span::after { background: var(--verde); }


/* ---------- 14. Clearances (before and after) ---------- */

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.pair figure { position: relative; }

.pair img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.pair__tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: #fff;
  color: var(--notte);
  font-size: 0.875rem;
  font-weight: 700;
}

.pair__tag--dopo { background: var(--giallo); }

.pair__cap {
  grid-column: 1 / -1;
  font-size: 0.875rem;
  color: var(--ink-2);
}


/* ---------- 15. EER codes ---------- */

.codes {
  display: grid;
  gap: 0;
}

@media (min-width: 48em) {
  .codes { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}

.code {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding-block: 1rem;
  border-top: 2px solid var(--line);
}

/* 17px: small text, so the deeper green (5.8:1 on white; --verde is 4.2:1) */
.code__num {
  font-stretch: var(--wide);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--verde-scuro);
  white-space: nowrap;
}

.code__desc { color: var(--ink); }

.codes-aside .ph { margin-top: 2rem; }
.codes-aside .ph img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.link-list { display: grid; gap: 0.6rem; margin-top: 1.5rem; }


/* ---------- 16. Strengths ---------- */

.strengths {
  display: grid;
  gap: 2rem 2.5rem;
}

@media (min-width: 40em) {
  .strengths { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64em) {
  .strengths { grid-template-columns: repeat(4, 1fr); }
}

.strength__icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.1rem;
  color: var(--notte);
}

.strength h3 { font-size: var(--step-2); }

.strength p { margin-top: 0.6rem; }


/* ---------- 17. Partners and the route map ---------- */

.countries {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.countries li {
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: var(--velo);
  color: var(--notte);
  font-weight: 700;
}

.route-map { margin: 0; }

.route-map__canvas { container-type: inline-size; }

.route-map__svg { width: 100%; height: auto; overflow: visible; }
.route-map__svg--tall { display: none; }

@container (max-width: 35rem) {
  .route-map__svg--wide { display: none; }
  .route-map__svg--tall { display: block; }
}

.route-map__grid line { stroke: var(--line); stroke-width: 1.5; }
.route-map__ticks text { fill: var(--ink-2); font-size: 15px; font-weight: 600; }

.route-map__route {
  fill: none;
  stroke: var(--verde);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.route-map__node { fill: #fff; stroke: var(--celeste); stroke-width: 3.5; }
.route-map__hub-ring { fill: none; stroke: var(--notte); stroke-width: 3; }
.route-map__hub-core { fill: var(--giallo); stroke: var(--notte); stroke-width: 1.5; }
.route-map__label { fill: var(--notte); font-size: 19px; font-weight: 700; }
.route-map__label--hub { font-size: 24px; font-weight: 800; }
.route-map__coords { fill: var(--ink-2); font-size: 14px; }
/* The tall map is drawn at about 0.8 on a phone: 15px labels read at 12px */
.route-map__svg--tall .route-map__label { font-size: 15px; }
.route-map__svg--tall .route-map__label--hub { font-size: 18px; }
.route-map__svg--tall .route-map__ticks text { font-size: 13px; }

.route-map__cap {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--ink-2);
}


/* ---------- 18. Contact call ---------- */

.call {
  position: relative;
  padding-block: clamp(5rem, 3.5rem + 6vw, 9rem);
  color: #fff;
  background: var(--notte);
  isolation: isolate;
  --focus: var(--giallo);
}

.call__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

/* As the inner pages' head (section 20): the photo never larger than its
   file (--file-w / --file-h), at the top right, its left and bottom edges
   melting into the deep green under the veil */
.call__bg img {
  position: absolute;
  top: 0;
  right: 0;
  width: min(100%, var(--file-w, 100%));
  height: min(100%, var(--file-h, 100%));
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 25%), linear-gradient(0deg, transparent 0, #000 6rem);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 25%), linear-gradient(0deg, transparent 0, #000 6rem);
  mask-composite: intersect;
}

.call__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 82, 41, 0.95) 0%, rgba(6, 82, 41, 0.86) 45%, rgba(6, 82, 41, 0.6) 100%);
}

.call__title {
  max-width: 16ch;
  color: #fff;
  font-size: var(--step-4);
  font-weight: 850;
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.call__lead { margin-top: 1.25rem; font-size: var(--step-1); }

.call .actions { margin-top: 2rem; }

.call__list {
  display: grid;
  gap: 1.25rem 2.5rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

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

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

.call__list dt { font-size: var(--step--1); color: #E3F1E8; }

.call__list dd {
  margin-top: 0.2rem;
  font-size: var(--step-2);
  font-stretch: var(--wide);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.call__list dd a { text-decoration: none; }
.call__list dd a:hover { text-decoration: underline; text-decoration-color: var(--giallo); }

.call__place {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 2rem;
  color: #E3F1E8;
}

.call__place a { color: #fff; font-weight: 700; }


/* ---------- 19. Footer ---------- */

.site-footer {
  padding-block: clamp(3.5rem, 2.5rem + 3vw, 5rem) 2rem;
  background: var(--notte);
  color: var(--on-dark-2);
  font-size: var(--step--1);
  --focus: var(--giallo);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.site-footer .brand { color: #fff; }

.footer__slogan {
  color: var(--giallo);
  font-size: var(--step-1);
  font-stretch: var(--wide);
  font-weight: 750;
}

.footer__grid {
  display: grid;
  gap: 2rem;
  padding-top: 2.5rem;
}

@media (min-width: 40em) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .footer__grid { grid-template-columns: repeat(4, 1fr); } }

.footer__h {
  margin-bottom: 0.9rem;
  color: #fff;
  font-size: 1rem;
  font-stretch: 100%;
  font-weight: 700;
}

.footer__address { font-style: normal; line-height: 1.7; }

.footer__dl { display: grid; gap: 0.5rem; }
.footer__dl dt { color: #A9CDB6; font-size: 0.8125rem; }
.footer__dl dd a,
.footer__nav a { color: #fff; }

.footer__nav { display: grid; gap: 0.45rem; }
.footer__nav a { text-decoration: none; }
.footer__nav a:hover { text-decoration: underline; text-decoration-color: var(--giallo); }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.footer__base a { color: #fff; }
.footer__base a + a { margin-left: 1.25em; }


/* ---------- 20. Inner page head, crumbs, page nav ---------- */

/* The inner pages open like the home, a size smaller: the page's own photo
   full width under the dark green veil (from the bottom on phones, from the
   left and the bottom on wide screens), the crumbs small at the top under
   the clear header, the title and the lead at the bottom, in white. The
   header sits clear over it and turns white once it has gone by (main.js
   section 7). --plain (contatti): no photo, the deep green, with the office
   number big in yellow. */
.page-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: clamp(28rem, 70vh, 40rem);
  min-height: clamp(28rem, 70svh, 40rem);
  color: #fff;
  background: var(--notte);
  isolation: isolate;
}

@media (min-width: 56em) {
  .page-head {
    min-height: clamp(28rem, 60vh, 40rem);
    min-height: clamp(28rem, 60svh, 40rem);
  }
}

.page-head__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--notte);
}

/* The photo is never shown larger than its file: its box stops at the
   file's size (--file-w / --file-h on the img), at the top right, and its
   left and bottom edges melt into the deep green under the veil. Narrower
   screens get it full bleed. */
.page-head__media img {
  position: absolute;
  top: 0;
  right: 0;
  width: min(100%, var(--file-w, 100%));
  height: min(100%, var(--file-h, 100%));
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
  -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 4rem);
  mask-image: linear-gradient(0deg, transparent 0, #000 4rem);
}

@media (min-width: 56em) {
  .page-head__media img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(0deg, transparent 0, #000 4rem);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(0deg, transparent 0, #000 4rem);
    mask-composite: intersect;
  }
}

/* The veil: deep at the bottom, where the title and the lead sit, and
   still at 0.6 higher up, where a long title reaches on a phone (white on
   the brightest sky of a head photo stays over 4.5:1) */
.page-head__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(4, 34, 19, 0.94) 0%, rgba(4, 34, 19, 0.84) 42%, rgba(4, 34, 19, 0.6) 72%, rgba(4, 34, 19, 0.55) 100%);
  pointer-events: none;
}

@media (min-width: 56em) {
  .page-head__media::after {
    background:
      linear-gradient(90deg, rgba(4, 34, 19, 0.92) 0%, rgba(4, 34, 19, 0.84) 46%, rgba(4, 34, 19, 0.42) 72%, rgba(4, 34, 19, 0.14) 100%),
      linear-gradient(0deg, rgba(4, 34, 19, 0.55) 0%, rgba(4, 34, 19, 0) 45%);
  }
}

/* The caption: a dark pill at the bottom right, readable on any photo */
.page-head__cap {
  position: absolute;
  z-index: 1;
  right: var(--gutter);
  bottom: 1rem;
  max-width: min(22rem, calc(100% - 2 * var(--gutter)));
  padding: 0.3rem 0.85rem 0.35rem;
  border-radius: 999px;
  background: rgba(4, 34, 19, 0.85);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}

/* The bottom padding leaves room for a caption of two lines on phones */
.page-head__body {
  display: flex;
  flex-direction: column;
  padding-top: 1.25rem;
  padding-bottom: clamp(4.25rem, 3.5rem + 2.5vw, 5.5rem);
}

/* With JS the header is fixed and clear over the head: the crumbs go under it */
.js .page-head__body { padding-top: calc(var(--header-h) + 1.25rem); }

/* The crumbs at the top, the rest at the bottom */
.page-head__body > .crumbs {
  margin-bottom: auto;
  padding-bottom: 2.5rem;
}

.page-head__title {
  max-width: 14ch;
  color: #fff;
  font-size: clamp(2.375rem, 1.3rem + 4.2vw, 5rem);
  font-weight: 850;
  line-height: 0.98;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  hyphens: auto;
}

.page-head__lead {
  max-width: 44ch;
  margin-top: 1.25rem;
  color: #fff;
  font-size: var(--step-1);
  line-height: 1.5;
  text-shadow: 0 1px 12px rgba(4, 34, 19, 0.45);
}

.page-head__body > .actions,
.page-head__actions { margin-top: 1.75rem; }

/* The office number (contatti): big, wide, yellow on the deep green (7.3:1) */
.page-head__call {
  max-width: none;
  color: var(--giallo);
  /* "+39 0583 051839" is 10.2em wide: one line from 320px up */
  font-size: clamp(1.5rem, (100vw - 2 * var(--gutter)) / 10.6, 4.5rem);
  font-stretch: var(--wide);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}

.page-head__call a { text-decoration: none; }
.page-head__call a:hover { text-decoration: underline; text-decoration-thickness: 0.06em; }

.page-head__call + .page-head__title,
.page-head__title + .page-head__call,
.page-head__lead + .page-head__call { margin-top: 1.25rem; }

.page-head--plain { min-height: 0; }
.page-head--plain .page-head__body { padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.page-head--plain .page-head__body > .crumbs { padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }

/* Breadcrumb trail: small, a chevron between the steps */
.crumbs {
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0;
}

.crumbs li {
  display: inline-flex;
  align-items: center;
}

.crumbs li + li::before {
  content: "";
  width: 0.38em;
  height: 0.38em;
  margin: 0 0.75em 0 0.55em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  opacity: 0.7;
  transform: rotate(45deg);
}

.crumbs a {
  color: var(--notte);
  text-decoration-color: var(--celeste);
}

.crumbs a:hover { text-decoration-color: currentColor; }

.crumbs [aria-current="page"] { font-weight: 700; }

.page-head .crumbs,
.page-head .crumbs a { color: #fff; }

.page-head .crumbs a { text-decoration-color: rgba(255, 255, 255, 0.55); }
.page-head .crumbs a:hover { text-decoration-color: var(--giallo); }

/* Phones: the veil is light at the top, so the trail sits on a dark pill */
@media (max-width: 55.99em) {
  .page-head:not(.page-head--plain) .crumbs ol {
    display: inline-flex;
    padding: 0.3rem 0.9rem 0.35rem;
    border-radius: 999px;
    background: rgba(4, 34, 19, 0.85);
  }
}

/* In this page: a white bar of links right under the head */
.page-nav {
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.page-nav__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
  padding-block: 1rem;
}

.page-nav__label {
  color: var(--ink-2);
  font-size: var(--step--1);
  font-weight: 600;
}

.page-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.35rem 1.05rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: var(--notte);
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.page-nav a:hover {
  border-color: var(--verde-scuro);
  background: var(--velo);
}


/* ---------- 21. Section heads and text ---------- */

/* The inner pages' section head: h2 and its intro (the home's .head) */
.section-head {
  max-width: 52rem;
  margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 4rem);
}

.section-head > * + * { margin-top: 1.25rem; }
.section-head > h2 + * { margin-top: 1.5rem; }
.section-head p { max-width: 62ch; }
.section-head > * + .ph { margin-top: 2rem; }

/* In a .split the split spaces it */
.split > .section-head { margin-bottom: 0; }

.h3--large {
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.05;
}

h4 {
  color: var(--head);
  font-stretch: var(--wide);
  font-weight: 750;
  line-height: 1.15;
}

.band--notte h4,
.band--verde h4,
.on-dark h2,
.on-dark h3,
.on-dark h4 { color: #fff; }

.band--celeste h4 { color: var(--ink); }

/* A list's own label, in sentence case (not an eyebrow) */
.label {
  color: var(--head);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.35;
}

/* A small note under a rule (sources, the old CER name) */
.note {
  max-width: 62ch;
  padding-top: 0.75rem;
  border-top: 2px solid var(--rule);
  color: var(--muted);
  font-size: var(--step--1);
}

/* D and R in running text: the codes' colours (dark green D, green R) */
.k-d,
.k-r { font-weight: 800; }
.k-d { color: var(--notte); }
.k-r { color: var(--verde-scuro); }

.band--notte .k-d,
.band--verde .k-d,
.on-dark .k-d { color: #BFDCF2; }

.band--notte .k-r,
.band--verde .k-r,
.on-dark .k-r { color: var(--giallo); }

.band--celeste .k-d,
.band--celeste .k-r { color: var(--ink); }

/* Outline button for any ground (the lightbox's buttons, main.js section 4) */
.btn--line {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}

.btn--line:hover {
  border-color: var(--notte);
  background: var(--notte);
  color: #fff;
}

:is(.band--notte, .band--verde, .on-dark, .page-head, .call, .lightbox) .btn--line:hover {
  border-color: #fff;
  background: #fff;
  color: var(--notte);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Layout helpers of the inner pages */
.split > * { min-width: 0; }

@media (min-width: 56em) {
  .split--wide-start { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split--wide-end { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.split--wide-start,
.split--wide-end { align-items: start; }
.split--center { align-items: center; }

.cols {
  display: grid;
  gap: 2.5rem 3rem;
}

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

@media (min-width: 48em) {
  .cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

.stack--s { --stack-gap: 1rem; }
.stack--l { --stack-gap: 2.5rem; }
.stack--xl { --stack-gap: clamp(4rem, 3rem + 3vw, 6rem); }

.sticky-aside { align-self: start; }

@media (min-width: 64em) {
  .sticky-aside {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

.band--tight { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }

/* A deep green context for a block inside a white band. Since 29/10 no
   page uses it (the gallery's filter bar is white, under a rule; the
   closing bands are .band--notte), but the components still follow it. */
.on-dark {
  background: var(--notte);
  color: var(--on-dark);
}

/* Pills that sit on the light blue tint turn white there */
.band--velo .countries li { background: #fff; }


/* ---------- 22. Lists and figures ---------- */

/* Strap list: peers, each under a short rule (green on white, yellow on
   the green bands) */
.strap-list {
  display: grid;
  gap: 2.25rem 3rem;
}

@media (min-width: 40em) {
  .strap-list--2,
  .strap-list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48em) {
  .strap-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

.strap-list__item,
.strap-block {
  min-width: 0;
  padding-top: 1.25rem;
  border-top: 3px solid var(--strap);
}

.strap-list__title {
  max-width: none;
  color: var(--head);
  font-size: var(--step-2);
  font-stretch: var(--wide);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  hyphens: auto;
}

.strap-list__text {
  max-width: 44ch;
  margin-top: 0.6rem;
  color: var(--muted);
}

.strap-block .strap-list__text { max-width: 62ch; }

/* Large: the strengths, a size up */
.strap-list--large .strap-list__title { font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.375rem); }

/* Ledger: label and value rows (company data, how a plant works) */
.ledger { border-top: 3px solid var(--strap); }

.ledger__row {
  display: grid;
  gap: 0.2rem 2rem;
  padding-block: 0.85rem 0.95rem;
  border-bottom: 2px solid var(--rule);
}

.ledger__term {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.35;
}

.ledger__value {
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}

.ledger--strong .ledger__value {
  color: var(--head);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.35;
}

@media (min-width: 40em) {
  .ledger__row {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: baseline;
  }
}

/* The contact page's numbers: phones and e-mails big and wide (not the
   home's numbers section, which is a <section class="numbers">) */
dl.numbers {
  display: grid;
  gap: 0 3rem;
  padding-block: 0;
}

dl.numbers > div {
  container-type: inline-size;
  min-width: 0;
  padding-block: 1.1rem 1.25rem;
  border-top: 2px solid var(--rule);
}

dl.numbers dt {
  color: var(--muted);
  font-size: var(--step--1);
}

dl.numbers dd {
  margin-top: 0.3rem;
  color: var(--accent);
  /* a phone number is 10.2em wide: one line in its column */
  font-size: clamp(1.5rem, 9.6cqi, 3rem);
  font-stretch: var(--wide);
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}

dl.numbers a { text-decoration: none; }

dl.numbers a:hover {
  text-decoration: underline;
  text-decoration-color: var(--giallo);
  text-decoration-thickness: 0.08em;
}

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

/* Three numbers, then the two e-mails one size smaller (29 characters of
   commerciale@worldrecycling.it fit a column and a 320px screen) */
.numbers--3-2 > :nth-child(n+4) dd { font-size: clamp(1.25rem, 7cqi, 2.125rem); }

@media (min-width: 60em) {
  .numbers--3-2 {
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
  }
}

/* Facts (azienda): short facts, the counted ones among them, as big wide
   green figures, like the home's numbers */
.facts {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 2rem 1.5rem;
}

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

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

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

/* Each cell is a column whose figure sits at its foot: a label on two
   lines does not push its figure below the one beside it */
.facts > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 1rem;
  border-top: 3px solid var(--strap);
}

.facts dt {
  color: var(--head);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

.facts dd {
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--accent);
  font-size: clamp(2rem, 1.1rem + 2.7vw, 3.625rem);
  font-stretch: var(--wider);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}

/* Two by two: the size follows the block's width, so "Lucca" and
   "5.500 t" (3.9em) fit a cell from 320px to the widest column */
.facts--2x2 dd { font-size: clamp(1.75rem, 12cqi - 0.25rem, 3.625rem); }

/* The unit after a figure ("t"): small, normal width, close to it. The
   space goes inside the <abbr> (<abbr title="tonnellate"> t</abbr>), so it
   is unit-sized, not figure-sized, and the text still reads "5.500 t" */
.facts dd abbr {
  margin-left: 0.1em;
  color: var(--head);
  font-size: 0.4em;
  font-stretch: 100%;
  font-weight: 700;
  letter-spacing: 0;
}

/* The one figure of servizi (da 3.000 a 5.500 tonnellate): the two
   counted values big and wide, "da" / "a" small between them. Any .stat
   outside the home's row of numbers (.stats, section 7), whose rules it
   undoes here. */
:not(.stats) > .stat {
  container-type: inline-size;
  display: grid;
  gap: 0.6rem;
  padding-inline: 0;
  border-left: 0;
}

:not(.stats) > .stat > .stat__value {
  order: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.3em;
  color: var(--accent);
  font-size: clamp(2rem, 21cqi, 4.25rem);
  font-stretch: var(--wider);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}

.stat__join {
  margin-right: 0.15em;
  color: var(--head);
  font-size: 0.4em;
  font-stretch: 100%;
  font-weight: 700;
  letter-spacing: 0;
}

:not(.stats) > .stat > .stat__unit {
  color: var(--head);
  font-size: var(--step-0);
  font-stretch: 100%;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

/* Term list: names one per row (the vehicles) */
.term-list > li {
  padding-block: 0.6rem 0.65rem;
  border-bottom: 2px solid var(--rule);
  color: var(--head);
  font-size: var(--step-1);
  font-stretch: var(--wide);
  font-weight: 700;
  line-height: 1.25;
}

.term-list > li:first-child { border-top: 2px solid var(--rule); }


/* ---------- 23. Sequences: chain, steps, flow, timeline ---------- */

/* The chains of the inner pages use the home's markup; --3 has three
   steps. The TMB flow has a caption. */
.flow__cap {
  margin-bottom: 1.25rem;
  color: var(--head);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
}

.chain__list { margin-top: 0; }
.chain__title + .chain__list { margin-top: 1.25rem; }

@media (min-width: 52em) {
  .chain--3 .chain__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* On the light blue tint the steps turn white */
.band--velo .chain__step:not(.chain__step--us) { background: #fff; }
.band--velo .chain__step:not(.chain__step--us)::before { background: var(--velo); }

@media (min-width: 52em) {
  .band--velo .chain__step + .chain__step { border-left-color: var(--velo); }
}

/* On the light blue (recupero #riciclaggio) the title is ink: the deep
   green is 3.1:1 there; the steps keep their tint */
.band--celeste .chain__title { color: var(--ink); }

/* Steps: a real sequence (a clearance, the TMB branches), numbered circles
   on a line: down the left below 70em, one row from 70em.
   .steps--vertical stays vertical. */
.steps {
  display: grid;
  counter-reset: steps;
}

.steps__item {
  position: relative;
  counter-increment: steps;
  padding: 0 0 2.25rem 3.5rem;
}

.steps__item:last-child { padding-bottom: 0; }

/* The number is generated; the <ol> already gives the order */
.steps__item::before {
  content: counter(steps);
  content: counter(steps) / "";
  position: absolute;
  top: -0.2rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--mark);
  color: var(--mark-ink);
  font-stretch: var(--wide);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* The line to the next step */
.steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.4rem;
  bottom: 0.35rem;
  left: calc(1.125rem - 1.5px);
  width: 3px;
  border-radius: 2px;
  background: var(--line-mark);
}

.steps__title {
  color: var(--head);
  font-size: var(--step-1);
  line-height: 1.25;
}

.steps__text {
  max-width: 40ch;
  margin-top: 0.45rem;
  color: var(--muted);
}

.steps__item .eer__list { margin-top: 0.6rem; }

@media (min-width: 70em) {
  .steps:not(.steps--vertical) {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: 2rem;
  }

  .steps:not(.steps--vertical) > .steps__item { padding: 3.25rem 0 0; }
  .steps:not(.steps--vertical) > .steps__item::before { top: 0; }

  .steps:not(.steps--vertical) > .steps__item:not(:last-child)::after {
    top: calc(1.125rem - 1.5px);
    bottom: auto;
    left: 2.9rem;
    right: -1.35rem;
    width: auto;
    height: 3px;
  }
}

/* Flow: one start that forks into two branches (recupero #tmb). The start
   has a yellow-ringed marker; each branch sits under a rule, with its
   own steps. */
.flow { margin: 0; }

.flow__start {
  position: relative;
  padding: 0 0 2.25rem 3.5rem;
}

.flow__start::before {
  content: "";
  position: absolute;
  top: 0.1rem;
  left: 0.25rem;
  width: 1.75rem;
  height: 1.75rem;
  border: 5px solid var(--giallo);
  border-radius: 50%;
  background: var(--mark);
}

.flow__name {
  color: var(--head);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 800;
  line-height: 1.05;
}

.flow__text {
  max-width: 46ch;
  margin-top: 0.45rem;
  color: var(--muted);
}

.flow__branches {
  display: grid;
  gap: 2.5rem 3rem;
}

.flow__branch {
  min-width: 0;
  padding-top: 1.25rem;
  border-top: 3px solid var(--line-mark);
}

.flow__head { padding-bottom: 1.75rem; }

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

/* Timeline: passato, presente, futuro (a real sequence, so an <ol>): a dot
   on a line for each */
.timeline { display: grid; }

.timeline__step {
  position: relative;
  padding: 0 0 2.5rem 2.5rem;
}

.timeline__step:last-child { padding-bottom: 0; }

.timeline__step::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--mark);
}

.timeline__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.2rem;
  bottom: 0.4rem;
  left: calc(0.625rem - 1.5px);
  width: 3px;
  border-radius: 2px;
  background: var(--line-mark);
}

.timeline__when {
  color: var(--accent);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  font-stretch: var(--wider);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}

.timeline__text {
  max-width: 46ch;
  margin-top: 0.85rem;
}

.timeline__text > * + * { margin-top: 0.85em; }

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

  .timeline__step,
  .timeline__step:last-child { padding: 2.75rem 0 0; }

  .timeline__step::before { top: 0; }

  .timeline__step:not(:last-child)::after {
    top: calc(0.625rem - 1.5px);
    bottom: auto;
    left: 1.85rem;
    right: -2.4rem;
    width: auto;
    height: 3px;
  }
}


/* ---------- 24. Table and quote ---------- */

/* Classification matrix (azienda): a real table, two axes */
.matrix-wrap {
  max-width: 60rem;
  overflow-x: auto;
}

.matrix {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border-top: 3px solid var(--strap);
}

.matrix__caption {
  padding-bottom: 0.9rem;
  caption-side: top;
  color: var(--head);
  font-size: var(--step-1);
  font-weight: 700;
  text-align: left;
}

.matrix th,
.matrix td {
  padding: 0.9rem 0.75rem 1rem 0;
  border-bottom: 2px solid var(--rule);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
  hyphens: auto;
}

.matrix tbody td,
.matrix thead th:not(:first-child) {
  padding-left: 0.9rem;
  border-left: 2px solid var(--rule);
}

.matrix thead th,
.matrix__axis {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.3;
}

.matrix thead th:not(.matrix__axis) {
  color: var(--head);
  font-weight: 700;
}

.matrix thead tr:first-child > * {
  padding-bottom: 0.4rem;
  border-bottom: 0;
}

.matrix thead tr:first-child > :first-child { width: 30%; }

.matrix tbody th {
  color: var(--head);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.25;
}

.matrix tbody td {
  color: var(--accent);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.15;
}

/* Phones: normal width, smaller type and tighter cells, so "Speciale"
   and "pericoloso" stay whole in a 280px table */
@media (max-width: 39.99em) {
  .matrix th,
  .matrix td { padding-right: 0.5rem; }

  .matrix tbody td,
  .matrix thead th:not(:first-child) { padding-left: 0.6rem; }

  .matrix tbody th,
  .matrix tbody td { font-size: clamp(0.875rem, 4.4vw, 1rem); }

  .matrix thead th { font-size: 0.8125rem; }

  /* At 14-16px the values are small text: the deeper green on a white or
     light blue tint band (5.8:1 / 5.2:1) */
  :is(.band:not([class*="band--"]), .band--velo) .matrix tbody td { color: var(--verde-scuro); }
}

@media (min-width: 40em) {
  .matrix tbody td {
    font-size: clamp(1.25rem, 0.8rem + 1.4vw, 1.875rem);
    font-stretch: var(--wide);
    line-height: 1.08;
  }
}

/* Quote: big wide type; --large is the page's one typographic moment
   (azienda, white on the deep green) */
/* Dicono di noi (home): real reviews from Google, three white cards on the
   pale band, a column on a phone */
.reviews {
  display: grid;
  gap: 1rem;
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 56em) {
  .reviews { grid-template-columns: repeat(3, 1fr); }
}

.review {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  height: 100%;
  margin: 0;
  padding: 1.5rem;
  border-top: 3px solid var(--verde);
  background: #fff;
}

.review__stars {
  margin: 0;
  color: var(--giallo);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  line-height: 1;
  -webkit-text-stroke: 0.5px rgba(4, 34, 19, 0.45);
}

.review__text { margin: 0; }
.review__text p { margin: 0; }

.review__who {
  margin-top: auto;
  color: var(--head);
  font-size: var(--step--1);
  font-weight: 700;
}

.quote {
  max-width: 54rem;
  margin: 0;
}

.quote__text {
  margin: 0;
  color: var(--head);
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.25rem);
  font-stretch: var(--wide);
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -0.015em;
  quotes: "\201C" "\201D";
}

/* The opening mark hangs in the margin */
.quote__text p {
  max-width: none;
  text-indent: -0.42em;
  text-wrap: balance;
}

.quote__text p::before { content: open-quote; }
.quote__text p::after { content: close-quote; }

.quote--large { max-width: none; }

/* Who said it, and the newspaper's article */
.quote__by {
  max-width: 44rem;
  margin-top: 1.5rem;
  font-size: var(--step-0);
  line-height: 1.5;
}

.quote__by a { font-weight: 700; white-space: nowrap; }

.quote--large .quote__text {
  max-width: 15em;
  font-size: clamp(2.25rem, 1rem + 5vw, 6rem);
  line-height: 1;
}

.quote__by {
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 600;
}


/* ---------- 25. Destinations and EER codes ---------- */

/* The inner pages' destinations: rows (ul.dest > li.dest__item), the
   codes big and wide (D dark green, R green), the official definitions
   beside them once the list is 46rem wide */
ul.dest {
  container-type: inline-size;
  display: grid;
  border-bottom: 2px solid var(--rule);
}

.dest__item {
  display: grid;
  gap: 1.25rem 3rem;
  padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border-top: 2px solid var(--rule);
}

.dest__head { line-height: 1; }

.dest__item .dest__codes {
  margin-top: 0;
  font-size: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
  word-spacing: 0.06em;
}

.dest__codes--r { color: var(--verde); }

.dest__item .dest__name {
  margin-top: 0.6rem;
  color: var(--head);
  font-size: var(--step-2);
  line-height: 1.15;
}

.dest .dest__where {
  max-width: 50ch;
  margin-top: 0.6rem;
  color: var(--muted);
}

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

.dest__def {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.9rem;
}

.dest__def dt {
  color: var(--verde);
  font-size: 1.375rem;
  font-stretch: var(--wide);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums lining-nums;
}

.dest__item:has(.dest__codes--d) .dest__def dt { color: var(--notte); }

.dest__def dd {
  max-width: 54ch;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.45;
}

@container (min-width: 46rem) {
  .dest__item {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }

  .dest__main:only-child { grid-column: 1 / -1; }
  .dest__defs { padding-top: 0.5rem; }
}

:is(.band--notte, .band--verde) .dest__codes,
:is(.band--notte, .band--verde) .dest__def dt { color: #fff; }

/* A note right under the list: the list's last rule is enough */
ul.dest + .note {
  padding-top: 0;
  border-top: 0;
}

/* Full EER list (servizi #codici): chapters with their rows, two columns
   of chapters from 64em. A dl.eer__list also works on its own (the TMB
   flow). Hazardous codes say so in words, on a yellow tag. */
.eer {
  display: grid;
  gap: clamp(2.5rem, 2rem + 2vw, 3.5rem) 5rem;
}

.eer__chapter { break-inside: avoid; }

.eer__title {
  color: var(--head);
  font-size: var(--step-2);
}

.eer__ch {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--muted);
  font-size: var(--step--1);
  font-stretch: 100%;
  font-weight: 600;
  letter-spacing: 0;
}

.eer__list { margin-top: 1rem; }

/* Phones: the code and its tag on one line, the description under them */
.eer__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.25rem 0.9rem;
  padding-block: 0.85rem 0.95rem;
  border-top: 2px solid var(--rule);
}

.eer__code {
  grid-column: 1;
  grid-row: 1;
  color: var(--verde);
  font-size: 1.375rem;
  font-stretch: var(--wide);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.eer__desc {
  grid-column: 1 / -1;
  grid-row: 2;
  max-width: 54ch;
  line-height: 1.45;
}

.eer__flag {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  padding: 0.15rem 0.65rem 0.2rem;
  border-radius: 999px;
  background: var(--giallo);
  color: var(--notte);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
}

/* From 30em: a code column wide enough for "08 01 11*", the description
   beside it, the tag under the code */
@media (min-width: 30em) {
  .eer__row { grid-template-columns: 9rem minmax(0, 1fr); }

  .eer__desc {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .eer__flag {
    grid-column: 1;
    grid-row: 2;
  }
}

@media (min-width: 64em) {
  .eer:not(.eer--one) {
    display: block;
    columns: 2;
    column-gap: 5rem;
  }

  .eer:not(.eer--one) > .eer__chapter { padding-bottom: 3rem; }
  .eer:not(.eer--one) > .eer__chapter:last-child { padding-bottom: 0; }
}

:is(.band--notte, .band--verde) .eer__code { color: #fff; }


/* ---------- 26. Photos and clips ---------- */

/* Photos: plain rectangles, cropped to a ratio; the caption over the
   photo's foot on a dark gradient (white on at least 86% dark green) */
.ph {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--velo);
}

.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
}

.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--16x10 { aspect-ratio: 16 / 10; }
.ph--4x3 { aspect-ratio: 4 / 3; }
.ph--1x1 { aspect-ratio: 1 / 1; }
.ph--3x4 { aspect-ratio: 3 / 4; }

.ph__cap {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: none;
  padding: 2.25rem 1rem 0.75rem;
  background: linear-gradient(rgba(4, 34, 19, 0) 0, rgba(4, 34, 19, 0.86) 1.9rem);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}

:is(.band--notte, .band--verde) .ph { background: rgba(255, 255, 255, 0.08); }

/* Photo row: two to four photos (or a clip) at one height, each taking its
   ratio's share. Stacked below 40em, where a vertical still is never
   shown wider than its 450px file. */
.photo-row {
  display: grid;
  gap: 0.75rem;
}

.photo-row > .ph--3x4,
.photo-row > .ph--1x1 { max-width: 28rem; }

@media (min-width: 40em) {
  .photo-row {
    display: flex;
    align-items: flex-start;
  }

  .photo-row > .ph,
  .photo-row > .ph--3x4,
  .photo-row > .ph--1x1 {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }

  .photo-row > .ph--3x4 { flex-grow: 0.75; }
  .photo-row > .ph--1x1 { flex-grow: 1; }
  .photo-row > .ph--4x3 { flex-grow: 1.3333; }
  .photo-row > .ph--16x10 { flex-grow: 1.6; }
  .photo-row > .ph--16x9 { flex-grow: 1.7778; }

  .photo-row > .video-frame {
    flex: 0.5625 1 0;
    min-width: 0;
    width: auto;
  }

  .photo-row > .video-frame--wide { flex-grow: 1.7778; }
}

/* Video frame: one of the owner's silent clips, like the home's phone:
   vertical 9:16 by default, rounded, at most 22rem wide (never wider than
   its 540px file), the caption under it. --wide: 16:9. A clip marked
   data-autoplay plays muted while in view (main.js section 9). */
.video-frame {
  width: min(100%, 22rem, max(12rem, 45vh));
  width: min(100%, 22rem, max(12rem, 45svh));
  margin: 0;
}

/* "auto": the poster's own ratio wins once it loads */
.video-frame video {
  width: 100%;
  height: auto;
  aspect-ratio: auto 9 / 16;
  border-radius: 1rem;
  background: var(--notte);
}

:is(.band--notte, .band--verde) .video-frame video {
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08), 0 30px 60px rgba(0, 0, 0, 0.35);
}

.video-frame--wide { width: min(100%, 53rem); }
.video-frame--wide video { aspect-ratio: auto 16 / 9; }

.video-frame--center { margin-inline: auto; }

.video-frame__cap {
  margin-top: 0.85rem;
  color: var(--head);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.35;
}

.video-frame--center .video-frame__cap { text-align: center; }

/* "Video senza audio, 20 secondi": its own line, quieter */
.video-frame__meta {
  display: block;
  margin-top: 0.1rem;
  color: var(--muted);
  font-weight: 400;
}

/* Before and after tags, like the home's pair ("Prima" white, "Dopo"
   yellow): on the photos of the two clearances' comparisons below */
.before-after__tag {
  position: absolute;
  z-index: 1;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: #fff;
  color: var(--notte);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}

.before-after__tag--dopo { background: var(--giallo); }

/* Two clearances, before and after (servizi #prima-e-dopo, since
   30/10/2026: the owner asked to show two of his jobs big, with clips and
   photos of before and after). Each job (.case) opens with its name and
   its comparison (.compare: one spot before and after, or a plain pair),
   then the groups "Prima" and "Dopo", each with one or more rows of clips
   and photos (.case__row). In this block photos have the clips' rounded
   corners (1rem, as .video-frame), so a row reads as one strip. */
.clearances__head { max-width: 52rem; }
.clearances__head > * + * { margin-top: 1.25rem; }

.case { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }

.case + .case {
  margin-top: clamp(4rem, 3rem + 3vw, 6rem);
  padding-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  border-top: 2px solid var(--rule);
}

.case__top {
  display: grid;
  gap: 2rem clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}

/* One column: the comparison centred; two: it ends on the rows' right edge */
.case__top > .compare { justify-self: center; }

@media (min-width: 56em) {
  .case__top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .case__top > .compare { justify-self: end; }
}

.case__intro > * + * { margin-top: 1.25rem; }

/* A step under the block's h3 */
.case__title {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 800;
  line-height: 1.05;
  text-wrap: balance;
}

.case__group { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }

.case__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}

/* "Prima" / "Dopo" as the rows' headings: the tags' pills, bigger */
.case__tag {
  margin: 0;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  background: #fff;
  color: var(--notte);
  font-size: var(--step-1);
  font-stretch: var(--wide);
  font-weight: 800;
  line-height: 1.25;
}

.case__tag--dopo { background: var(--giallo); }

.case__note {
  color: var(--muted);
  font-size: var(--step--1);
}

/* On one line beside its pill where the row has room for it */
@media (min-width: 72em) {
  .case__note { max-width: none; }
}

/* A row of tiles scrolls sideways, edge to edge: each tile at most 30rem
   tall (a clip about 270px wide, within its 540px file) and at least 3rem
   narrower than the row, so the next one shows, and the tiles
   centred on one line; a row that overflows becomes focusable (main.js
   section 10). With room it is one line at one height, each tile taking
   its ratio's share: a row of one photo (.case__row--single) from 40em, a
   shorter row (.case__row--short, ratios summing to about 2) from 56em,
   any row from 64em. On phones a row of photos only (.case__row--photos)
   is a column of full-width photos. A tile's ratio, width over height, is
   its --r (a clip 0.5625, a 3:4 photo 0.75); --rn, if set, is the ratio it
   takes in that column (the wide panorama, cropped to 4:3 there). */
.case__row + .case__row { margin-top: 0.75rem; }

.case__row {
  container-type: inline-size;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-inline: calc(var(--gutter) * -1);
  padding: 0 var(--gutter) 0.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-color: rgba(255, 255, 255, 0.45) transparent;
  scrollbar-width: thin;
}

/* The row runs to the screen's edges: its focus ring goes inside, with
   room above the tiles, which paint over it */
.case__row:focus-visible {
  margin-top: -6px;
  padding-top: 6px;
  outline-offset: -3px;
}

/* The last height counts on the row's own width (cqi: it leaves out the
   gutters and a classic scrollbar, which 100vw includes) */
.case__tile {
  position: relative;
  flex: 0 0 auto;
  height: min(30rem, 62vh, calc((100vw - 2 * var(--gutter) - 3rem) / var(--r, 0.75)));
  height: min(30rem, 62svh, calc((100vw - 2 * var(--gutter) - 3rem) / var(--r, 0.75)));
  height: min(30rem, 62svh, calc((100cqi - 3rem) / var(--r, 0.75)));
  aspect-ratio: var(--r, 0.75);
  margin: 0;
  overflow: hidden;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.08);
  scroll-snap-align: start;
}

/* At these widths, on a tall screen, whole tiles would end on the screen's
   edge and nothing would say that the row goes on: a little lower, so the
   next one peeks (on a shorter screen 62svh decides and this changes nothing) */
@media (min-width: 36.15em) and (max-width: 38em),
       (min-width: 42em) and (max-width: 43.75em),
       (min-width: 54.35em) and (max-width: 56.125em) {
  .case__tile {
    height: min(28rem, 62vh, calc((100vw - 2 * var(--gutter) - 3rem) / var(--r, 0.75)));
    height: min(28rem, 62svh, calc((100vw - 2 * var(--gutter) - 3rem) / var(--r, 0.75)));
    height: min(28rem, 62svh, calc((100cqi - 3rem) / var(--r, 0.75)));
  }
}

.case__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
}

/* A clip lies over its still, a lazy image that prints in its place (the
   clip gets the same still as its poster when its row comes near the
   screen, main.js section 9) */
.case__tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Without the script a clip would be an empty grey player over its still:
   the still stays instead */
html:not(.js) .case__tile video { display: none; }

/* ... with a link to the clip in its place (.u-nojs-only) */
.case__mp4 {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  left: 0.75rem;
  padding: 0.35rem 0.6rem;
  border-radius: 0.5rem;
  background: rgba(4, 34, 19, 0.78);
  color: #fff;
  font-size: var(--step--1);
  line-height: 1.25;
  text-align: center;
}

/* Two landscape photos one above the other, in one tile's place
   (--r about 0.67: two 4:3 photos and the gap between them) */
.case__tile--stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: visible;
  border-radius: 0;
  background: none;
}

.case__tile--stack > .case__zoom {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  overflow: hidden;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 39.99em) {
  .case__row--photos {
    flex-direction: column;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .case__row--photos > .case__tile {
    width: 100%;
    height: auto;
    aspect-ratio: var(--rn, var(--r, 0.75));
  }
}

@media (min-width: 40em) {
  .case__row--single {
    margin-inline: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .case__row--single > .case__tile {
    flex: var(--r, 0.75) 1 0;
    min-width: 0;
    height: auto;
  }
}

@media (min-width: 56em), (min-width: 40em) and (max-height: 45em) and (min-aspect-ratio: 6/5) {
  .case__row--short {
    margin-inline: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .case__row--short > .case__tile {
    flex: var(--r, 0.75) 1 0;
    min-width: 0;
    height: auto;
  }
}

/* Any row, from 64em and on a short, wide screen (a phone on its side, a
   small laptop's window) */
@media (min-width: 64em), (min-width: 40em) and (max-height: 45em) and (min-aspect-ratio: 7/5) {
  .case__row {
    margin-inline: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .case__tile {
    flex: var(--r, 0.75) 1 0;
    min-width: 0;
    height: auto;
  }
}

/* In a row on one line a tile is no taller than the screen under the
   header, cropped if it must (the whole photo opens in the lightbox) */
@media (min-width: 64em), (min-width: 40em) and (max-height: 45em) and (min-aspect-ratio: 6/5) {
  .case__tile {
    max-height: calc(100vh - var(--header-h) - 0.5rem);
    max-height: calc(100svh - var(--header-h) - 0.5rem);
  }
}

/* A photo opens big in the lightbox (main.js section 4); the round mark
   in its corner says so */
.case__zoom {
  display: block;
  height: 100%;
}

.case__zoom img { transition: transform 0.6s var(--ease-out); }
.case__zoom:hover img { transform: scale(1.04); }

/* Inside the tile, which clips anything outside it */
.case__zoom:focus-visible,
.case__tile video:focus-visible { outline-offset: -6px; }

.case__zoom::after {
  content: '';
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(4, 34, 19, 0.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 4a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Zm0 3.5v6M7.5 10.5h6M15.5 15.5 20 20' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 1.25rem no-repeat;
}

/* The comparison: one spot before and after. Without the script the two
   photos stand side by side, each with its tag; with it (.is-ready) the
   "Dopo" photo lies under the "Prima" one and a yellow line splits them at
   --pos from the left. A drag on the photos or the arrow keys on the range
   input move the line (main.js section 10). The photos' ratio is --r
   (width over height, 0.75 by default); the figure is at most 34rem wide
   and, above an 18rem floor, short enough to fit the screen under the
   header (on a phone on its side it is taller, on purpose). The shop's pair is
   a 570px video still, which nothing bigger exists of, and a photo made
   to match it: softer than the rest on sharp screens. */
.compare {
  width: min(100%, 34rem, max(18rem, calc((100vh - var(--header-h) - 7rem) * var(--r, 0.75))));
  width: min(100%, 34rem, max(18rem, calc((100svh - var(--header-h) - 7rem) * var(--r, 0.75))));
  margin: 0;
}

/* Where no photo of the same spot exists, two photos of the same kind of
   place (no data-compare, no line): they stay side by side, up to 44rem
   and, on a short screen, short enough to fit it with their caption */
.compare--pair {
  width: min(100%, 44rem, max(24rem, calc((100vh - var(--header-h) - 5rem) * 2 * var(--r, 0.75))));
  width: min(100%, 44rem, max(24rem, calc((100svh - var(--header-h) - 5rem) * 2 * var(--r, 0.75))));
}

.compare__frame {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.compare__side {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.08);
}

.compare__side img {
  width: 100%;
  aspect-ratio: var(--r, 0.75);
  object-fit: cover;
}

.compare.is-ready .compare__frame {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border-radius: 1rem;
  cursor: ew-resize;
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}

.compare.is-ready .compare__side { grid-area: 1 / 1; }

.compare.is-ready .compare__side--prima {
  z-index: 1;
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}

/* Its own stacking context: the "Dopo" tag stays under the "Prima" photo
   when the line goes past it */
.compare.is-ready .compare__side--dopo { isolation: isolate; }

.compare.is-ready .compare__side--dopo .before-after__tag {
  right: 0.75rem;
  left: auto;
}

/* The range input, visually hidden, sits under the knob: Tab brings that
   part of the photos into view */
.compare.is-ready .compare__range {
  top: 50%;
  left: var(--pos, 50%);
}

/* The line and its knob, over the photos; the knob carries the focus ring
   of the range input before it */
.compare__handle {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 4px;
  margin-left: -2px;
  background: var(--giallo);
  box-shadow: 0 0 0 1px rgba(4, 34, 19, 0.3);
  pointer-events: none;
}

.compare__handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.25rem;
  height: 3.25rem;
  margin: -1.625rem 0 0 -1.625rem;
  border-radius: 50%;
  background: var(--giallo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6 3 12l6 6M15 6l6 6-6 6' fill='none' stroke='%230B4F2C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1.5rem no-repeat;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.compare__range:focus-visible + .compare__handle::after {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.compare__cap {
  max-width: none;
  margin-top: 0.85rem;
  color: var(--head);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.35;
}

/* "Trascina la linea gialla": only once the line is there */
.compare__hint {
  display: none;
  margin-top: 0.1rem;
  color: var(--muted);
  font-weight: 400;
}

.compare.is-ready .compare__hint { display: block; }


/* ---------- 27. Gallery and lightbox ---------- */

/* The contract with main.js (section 4) is in COMPONENTS.md: the filter bar
   shows only with JS (hidden in the markup), the chips are buttons with
   aria-pressed, the status line is a live region, the groups are hidden by
   the filter, the lightbox is a <dialog> built by the script. */
.gallery-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding-block: 1rem;
  border-bottom: 2px solid var(--rule);
}

.gallery-filter__label {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 600;
}

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

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  min-height: 2.75rem;
  padding: 0.6rem 1.05rem;
  border: 2px solid var(--notte);
  border-radius: 999px;
  background: transparent;
  color: var(--notte);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.chip:hover { background: var(--velo); }

.chip[aria-pressed="true"] {
  border-color: var(--verde-scuro);
  background: var(--verde-scuro);
  color: #fff;
}

.chip__count {
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
}

:is(.on-dark, .band--notte, .band--verde) .chip {
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

:is(.on-dark, .band--notte, .band--verde) .chip:hover { background: rgba(255, 255, 255, 0.12); }

:is(.on-dark, .band--notte, .band--verde) .chip[aria-pressed="true"] {
  border-color: #fff;
  background: #fff;
  color: var(--notte);
}

/* Live region: stays rendered while empty */
.gallery__status {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: var(--step--1);
}

.gallery__status:empty { margin-top: 0; }

/* One category; the spacing counts only the visible ones */
.gallery__group { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }

.gallery__group:not([hidden]) ~ .gallery__group:not([hidden]) {
  margin-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
  padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-top: 2px solid var(--rule);
}

.gallery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: 1.5rem;
}

.gallery__title { font-size: var(--step-3); }

.gallery__count {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 600;
}

/* On a line of its own under the title, still at a reading measure */
.gallery__intro {
  flex-basis: 100%;
  max-width: none;
  padding-right: max(0px, 100% - 62ch);
}

/* Thumbnails are 300x300 (600x600 for the newer photos); the first photo
   of each category opens it at double size */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 45%), 1fr));
  gap: clamp(0.5rem, 1.2vw, 1rem);
}

.gallery__grid > li { min-width: 0; }

.gallery__grid > li:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.gallery__link .ph { aspect-ratio: 1 / 1; }

.gallery__link .ph img { transition: transform 0.6s var(--ease-out); }
.gallery__link:hover .ph img { transform: scale(1.04); }

.gallery__cap {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.3;
  /* a long word in a 140px tile at 320px breaks instead of overflowing */
  overflow-wrap: break-word;
  hyphens: auto;
}

.gallery__link:hover .gallery__cap {
  text-decoration: underline;
  text-decoration-color: var(--giallo);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.2em;
}

/* A video tile keeps its clip's ratio; --wide (16:9) takes two columns; a
   video tile is never double size. The dense flow lets a later clip fill
   a cell the wide tile leaves. The lightbox opens photos only. */
.gallery__video { margin: 0; }

.gallery__video video {
  width: 100%;
  height: auto;
  aspect-ratio: auto 9 / 16;
  background: var(--notte);
}

.gallery__video--wide video { aspect-ratio: auto 16 / 9; }

.gallery__grid:has(> li > .gallery__video) { grid-auto-flow: row dense; }

.gallery__grid > li:first-child:has(> .gallery__video) {
  grid-column: auto;
  grid-row: auto;
}

.gallery__grid > li:has(> .gallery__video--wide) { grid-column: span 2; }

/* The clips' group: four columns from 48em, so the seven clips (six
   vertical, one wide over two columns) fill two rows; a tile stays under
   the 540px of its file */
@media (min-width: 48em) {
  [data-gallery-unit="video"] .gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Lightbox (built by main.js on first use): the photo on the deep green,
   the count and the close button above, the arrows below */
html.has-lightbox { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(6, 28, 17, 0.97);
  color: #fff;
  --focus: var(--giallo);
}

.lightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.lightbox::backdrop { background: rgba(4, 34, 19, 0.9); }

.lightbox__bar,
.lightbox__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem var(--gutter);
}

.lightbox__nav { padding-bottom: 1rem; }

.lightbox__count {
  color: var(--on-dark-2);
  font-size: var(--step--1);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}

.lightbox__figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  min-height: 0;
  margin: 0;
  padding-inline: var(--gutter);
}

.lightbox__img {
  width: auto;
  height: auto;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #123A25;
}

.lightbox__cap {
  max-width: 60ch;
  padding-top: 0.75rem;
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.lightbox .btn {
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  font-size: var(--step--1);
}

@media (max-width: 29.99em) {
  .lightbox__nav .btn {
    flex: 1 1 0;
    padding-inline: 0.8em;
  }
}


/* ---------- 28. Contact: form, map, address, closing band ---------- */

/* Address block */
.address-block {
  font-size: var(--step-1);
  font-style: normal;
  line-height: 1.45;
}

.address-block__name {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--head);
  font-size: var(--step-2);
  font-stretch: var(--wide);
  font-weight: 800;
  line-height: 1.1;
}

/* Contact form (it composes an e-mail; the site sends nothing) */
.form {
  display: grid;
  gap: 1.25rem;
  max-width: 46rem;
}

.form__row {
  display: grid;
  gap: 1.25rem 1.5rem;
}

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

.field {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  min-width: 0;
}

.field__label {
  color: var(--head);
  font-weight: 700;
  line-height: 1.3;
}

/* The qualifiers in words: (facoltativo) / (obbligatorio). main.js leaves
   both out of the "Label: value" lines it writes. */
.field__opt,
.field__req {
  color: var(--muted);
  font-weight: 400;
}

.field__hint {
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.4;
}

/* The error under an invalid field (main.js): words, and a heavier red
   border on the field */
.field__error {
  color: var(--errore);
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1.4;
}

.field__input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 0.95rem;
  border: 2px solid var(--ink-2);
  border-radius: 0.6rem;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: max(1rem, 16px);
  line-height: 1.4;
}

.field__input:hover { border-color: var(--notte); }

.field__input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--notte);
}

.field__input[aria-invalid="true"] {
  padding: calc(0.75rem - 1px) calc(0.95rem - 1px);
  border-width: 3px;
  border-color: var(--errore);
}

/* Without JS the browser's own messages run; the red border is only extra */
:root:not(.js) .field__input:user-invalid { border-color: var(--errore); }

textarea.field__input {
  min-height: 9rem;
  resize: vertical;
}

select.field__input {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230B4F2C' stroke-width='2.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.form__note {
  max-width: 52ch;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.45;
}

.form__status {
  padding-top: 0.85rem;
  border-top: 3px solid var(--verde);
  color: var(--head);
  font-weight: 600;
}

.form__status a { font-weight: 700; }

/* role="status" stays rendered while empty: no rule, and the negative
   margin cancels the form's gap */
.form__status:empty {
  margin-top: -1.25rem;
  padding-top: 0;
  border-top: 0;
}

/* Click-to-load Google map. The ratio is a minimum: the box grows when the
   consent note and the button need more room; the iframe fills it. */
.map-embed {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  background: var(--velo);
}

.band--velo .map-embed { background: #fff; }

.map-embed::before {
  content: "";
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 4 / 3;
}

@media (min-width: 48em) {
  .map-embed::before { aspect-ratio: 16 / 10; }
}

.map-embed__placeholder {
  position: relative;
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: end;
  justify-items: start;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

.map-embed__pin {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* The Lucca pin: the route map's hub, a yellow square in a dark ring */
.map-embed__pin::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 3px solid var(--notte);
  background: var(--giallo);
  box-shadow: inset 0 0 0 3px var(--giallo), inset 0 0 0 7px var(--notte);
}

.map-embed__coords {
  color: var(--notte);
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
  font-stretch: var(--wide);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
}

.map-embed__consent > * + * { margin-top: 0.85rem; }

.map-embed__note {
  max-width: 46ch;
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.45;
}

.map-embed__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* main.js moves the focus to the loaded map: the frame fills a box with
   overflow hidden, so its ring is drawn inside */
.map-embed__frame:focus-visible { outline-offset: -3px; }

.map-embed.is-loaded .map-embed__placeholder { display: none; }

.map-embed__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1rem;
}

/* Closing band of the inner pages (band band--notte cta-band: the same
   deep green as the footer, so the two read as one block, as the home's
   call does): the home's call
   without the photo, the big question in white, the numbers beside it */
.cta-band {
  padding-block: clamp(4.5rem, 3rem + 5vw, 8rem);
  --focus: var(--giallo);
}

.cta-band__inner {
  display: grid;
  gap: 2.5rem 4rem;
}

@media (min-width: 64em) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }
}

.cta-band__title {
  max-width: 16ch;
  color: #fff;
  font-size: clamp(2.25rem, 1.3rem + 3.4vw, 4.5rem);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.02em;
}

.cta-band__lead {
  max-width: 46ch;
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: var(--step-1);
  line-height: 1.5;
}

.cta-band__aside {
  display: grid;
  align-content: end;
  gap: 1.75rem;
}

.cta-band__numbers { border-top: 3px solid var(--strap); }

.cta-band__numbers > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding-block: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--rule);
}

.cta-band__numbers dt {
  color: var(--muted);
  font-size: var(--step--1);
}

.cta-band__numbers dd {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  font-stretch: var(--wide);
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}

.cta-band__numbers a { text-decoration: none; }

.cta-band__numbers a:hover {
  text-decoration: underline;
  text-decoration-color: var(--giallo);
}


/* ---------- 29. Utilities ---------- */

/* Spacing between components (components have no outer margin) */
.u-mt-0 { margin-top: 0 !important; }
.u-mt-xs { margin-top: 0.5rem !important; }
.u-mt-s { margin-top: 1rem !important; }
.u-mt-m { margin-top: 1.5rem !important; }
.u-mt-l { margin-top: 2.5rem !important; }
.u-mt-xl { margin-top: clamp(3rem, 2rem + 3vw, 5rem) !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-measure { max-width: 64ch !important; }
.u-nowrap { white-space: nowrap !important; }

/* Shown only without JS (the gallery's category links, which the JS filter
   replaces). The inline <head> snippet removes .js if main.js never runs. */
.js .u-nojs-only { display: none !important; }


/* ---------- 30. Motion, forced colours, print ---------- */

/* What moves across the screen does so only for visitors who have not asked
   for less motion; the videos and the counting figures run for everyone
   (main.js sections 7 to 9) */
@media (prefers-reduced-motion: no-preference) {
  /* The hero title and its text rise in once, on load */
  .hero__slogan,
  .hero__title,
  .hero__lead,
  .hero .actions,
  .hero__note {
    animation: rise 0.9s var(--ease-out) both;
  }

  .hero__lead { animation-delay: 0.12s; }
  .hero .actions { animation-delay: 0.22s; }
  .hero__note { animation-delay: 0.3s; }

  /* The inner pages' head does the same, a little quicker */
  .page-head__call,
  .page-head__title,
  .page-head__lead,
  .page-head__body > .actions {
    animation: rise 0.8s var(--ease-out) both;
  }

  .page-head__title { animation-delay: 0.06s; }
  .page-head__lead { animation-delay: 0.14s; }
  .page-head__body > .actions { animation-delay: 0.22s; }

  /* The route map draws itself out of Lucca once it is in view
     (main.js marks it .is-waiting, then .is-drawn, and removes both once
     the drawing is over, so the plain rules above hold for good) */
  .route-map.is-waiting .route-map__route { stroke-dashoffset: 1; }
  .route-map.is-waiting .route-map__node { opacity: 0; }

  .route-map.is-drawn .route-map__route {
    animation: draw 1.3s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 110ms);
  }

  .route-map.is-drawn .route-map__node {
    animation: land 0.4s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 110ms + 0.9s);
  }

  /* The belt moves with the scroll where scroll-driven animations exist */
  @supports (animation-timeline: view()) {
    .belt__row {
      animation: belt linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    .belt__row--2 { animation-name: belt-back; }
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(1.25rem); }
  to { opacity: 1; transform: none; }
}

@keyframes draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes land {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: none; }
}

@keyframes belt {
  from { transform: translateX(4%); }
  to { transform: translateX(-28%); }
}

@keyframes belt-back {
  from { transform: translateX(-28%); }
  to { transform: translateX(4%); }
}

.route-map__node { transform-box: fill-box; transform-origin: center; }

@media (forced-colors: active) {
  .hero__wall::after,
  .call__bg::after,
  .card__ph::after { background: none; }

  .hero,
  .call { background: Canvas; color: CanvasText; }

  .hero__wall,
  .call__bg { opacity: 0.25; }

  .btn,
  .quick-call,
  .lang a { border: 2px solid ButtonText; }

  .belt__row span::after { background: CanvasText; }

  /* Inner pages: the head as the hero (photo faint, no veil); the pills,
     tags and markers drawn with borders; the pressed chip in Highlight;
     the lines through steps and dots in the text colour */
  .page-head__media::after { background: none; }

  .page-head,
  .on-dark { background: Canvas; color: CanvasText; }

  .page-head__media img { opacity: 0.25; }

  .ph__cap { background: Canvas; }

  .page-head__cap,
  .eer__flag,
  .before-after__tag,
  .chain__step,
  .steps__item::before,
  .timeline__step::before,
  .flow__start::before { border: 2px solid CanvasText; }

  .chip[aria-pressed="true"] {
    forced-color-adjust: none;
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }

  .steps__item:not(:last-child)::after,
  .timeline__step:not(:last-child)::after {
    forced-color-adjust: none;
    background: CanvasText;
  }

  /* Icons drawn with backgrounds would vanish: the menu's three bars and
     the hero's pause bars / play triangle in the button's text colour */
  .menu-toggle__icon span {
    forced-color-adjust: none;
    background: ButtonText;
  }

  .hero__pause::before {
    forced-color-adjust: none;
    background: linear-gradient(90deg, ButtonText 0 35%, transparent 35% 65%, ButtonText 65%);
  }

  .hero__pause.is-paused::before {
    forced-color-adjust: none;
    background: none;
    border-color: transparent transparent transparent ButtonText;
  }

  /* The comparison's line in the text colour, its knob a plain ring; the
     rows' pills drawn with borders; the zoom mark is only decoration */
  .compare__handle {
    forced-color-adjust: none;
    background: CanvasText;
  }

  .compare__handle::after {
    forced-color-adjust: none;
    border: 2px solid CanvasText;
    background: Canvas;
  }

  .case__tag { border: 2px solid CanvasText; }

  .case__zoom::after { display: none; }
}

@media print {
  .site-header,
  .hero__wall,
  .hero__tools,
  .belt,
  .call__bg,
  .phone video { display: none !important; }

  .hero,
  .call,
  .band--notte,
  .band--verde,
  .band--celeste,
  .site-footer { background: none !important; color: #000 !important; }

  .hero__title,
  .call__title,
  h1, h2, h3 { color: #000 !important; }

  .hero { min-height: 0; }
  .hero__body { padding-top: 0; }

  .count__ghost { visibility: visible; }
  .count__run { visibility: hidden; }

  .route-map .route-map__route { stroke-dashoffset: 0 !important; animation: none !important; }
  .route-map .route-map__node { opacity: 1 !important; animation: none !important; }

  a { text-decoration: underline; }

  /* Inner pages: no photo under the head, no in-page nav, filter, lightbox
     or map; a clip does not print, its caption stays and says there is
     one. Everything in black on white, in its final state. */
  .page-nav,
  .gallery-filter,
  .lightbox,
  .map-embed,
  .page-head__media,
  .video-frame video,
  .gallery__video video,
  .case__tile video,
  .compare__handle,
  .compare__hint,
  .case__mp4,
  .case__zoom::after { display: none !important; }

  /* The two clearances: the comparison's photos side by side again, the
     rows wrapped at one height (each clip prints as its still) */
  .compare.is-ready .compare__frame {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .compare.is-ready .compare__side { grid-area: auto; }
  .compare.is-ready .compare__side--prima { clip-path: none; }

  .compare.is-ready .compare__side--dopo .before-after__tag {
    right: auto;
    left: 0.75rem;
  }

  .case__row {
    flex-wrap: wrap;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }

  .case__row > .case__tile {
    flex: 0 0 auto;
    height: 12rem;
    break-inside: avoid;
  }

  .case__tag { border: 2px solid currentColor; }

  /* A heading or a pill stays with what it names */
  h2, h3, h4, h5,
  .case__label { break-after: avoid; }

  .compare { break-inside: avoid; }

  :root,
  .band--notte,
  .band--verde,
  .band--celeste,
  .on-dark,
  .page-head,
  .call {
    --head: #000;
    --muted: #333;
    --rule: #999;
    --strap: #000;
    --accent: #000;
    --mark: #000;
    --mark-ink: #fff;
    --line-mark: #000;
  }

  .page-head,
  .on-dark,
  .chain__step--us { background: none !important; color: #000 !important; }

  .page-head { min-height: 0; }

  .page-head__body,
  .js .page-head__body { padding-block: 0 1.5rem; }

  .page-head__body > .crumbs { padding-bottom: 1rem; }
  .page-head .crumbs ol { padding: 0; background: none; }

  .page-head__call,
  .page-head__title,
  .page-head__lead,
  .page-head__body > .actions {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .page-head__call,
  .page-head__title,
  .page-head__lead,
  .page-head .crumbs,
  .page-head .crumbs a,
  .cta-band__title,
  .cta-band__lead,
  .cta-band__numbers dt,
  .chain__step--us h3,
  .chain__step--us p,
  .k-d,
  .k-r,
  h4 { color: #000 !important; text-shadow: none; }

  /* The light texts set on the children of the dark bands (the hero, the
     video band, the materials, the closing calls) in black too */
  .hero__slogan,
  .hero__lead,
  .hero__note,
  .hero__note a,
  .btn--chiaro,
  .btn__meta,
  .video-band .lead,
  .phone figcaption span,
  .group__count,
  .materials__ask,
  .materials__ask a,
  .call__list dt,
  .call__place,
  .call__place a,
  .band--notte .more,
  .band--verde .more { color: #000 !important; text-shadow: none; }

  .btn--chiaro { border-color: #000 !important; }

  /* The footer's light and white text (labels, slogan, links) in black */
  .site-footer .brand,
  .footer__slogan,
  .footer__h,
  .footer__dl dt,
  .footer__dl dd a,
  .footer__nav a,
  .footer__base a { color: #000 !important; }

  /* Browsers drop backgrounds in print: keep the caption strips and pills,
     the hazardous tags, the before/after tags and the step numbers */
  .ph__cap,
  .card__cap,
  .eer__flag,
  .before-after__tag,
  .case__tag,
  .steps__item::before,
  .timeline__step::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}