/* =====================================================================
   INPE Rivestimenti - sezione Hard Hat (Chi siamo, #hard-hat)
   Partial: _src/partials/hardhat.html   Script: assets/js/hardhat.js

   Lastra antracite Hard Hat (#2A2E32, giallo casco #FECA11) con:
   - il timbro (logo reale su faccia #2A2E32, ruotato -4deg, anello
     tratteggiato giallo + filo interno). Entra una volta sola con una
     "pressione": parte piu' grande e sollevato, preme con un piccolo
     rimbalzo e lascia un anello d'inchiostro che svanisce;
   - le tessere contatto, stessa idea della fascia social della Galleria:
     a riposo piatte (antracite, filo chiaro, glifo bianco); attive
     (hover/focus con mouse, oppure in sequenza allo scroll su touch)
     salgono in un blocco con fianchi pieni, la faccia prende il colore,
     il glifo sporge e un riflesso attraversa la faccia.

   Prestazioni: si animano solo transform e opacity. Lo stato di ogni
   tessera e' un numero solo, --hh-on (0 o 1). I fianchi sono tre copie
   della faccia (stesso raggio) spostate lungo la diagonale: insieme
   formano l'estrusione arrotondata senza clip-path ne' ombre sfocate.

   Selettori ancorati a .hh-slab[data-hardhat] (0,2,0) e (0,3,0)+ sui
   discendenti, per non farsi scavalcare dalle regole del tema scritte
   come "body.inpe-site:not(.x-brand) h2" (0,2,2).
   ===================================================================== */

/* ---------- Lastra ---------- */

.hh-slab[data-hardhat] {
  --hh-charcoal: #2A2E32;
  --hh-yellow: #FECA11;

  /* Geometria delle tessere (px interi) */
  --hh-tile: 62px;
  --hh-glyph: 26px;
  --hh-depth: 8px;
  --hh-lift: calc(var(--hh-depth) / 2);
  --hh-base: calc(var(--hh-depth) - var(--hh-lift));
  --hh-pop: 2px;
  --hh-split: 2px;
  --hh-radius: 10px;

  /* Curve */
  --hh-spring: cubic-bezier(.3, 1.3, .5, 1);
  --hh-out: cubic-bezier(.2, .8, .2, 1);
  --hh-settle: cubic-bezier(.45, 0, .2, 1);

  position: relative;
  display: block;
  box-sizing: border-box;
  margin: var(--slab-gap, 32px) var(--slab-inset, clamp(16px, 4vw, 56px)) var(--slab-gap-after, 48px);
  padding: 50px 16px 24px;
  background: var(--hh-charcoal);
  color: #FFFFFF;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 18px 26px -24px rgba(20, 18, 15, .7);
  isolation: isolate;
  /* Il link "Sito realizzato da Hard Hat" del footer: html ha gia' scroll-padding-top
     (altezza header + 12px, styles.css); qui si aggiunge solo un po' d'aria. */
  scroll-margin-top: 16px;
}

/* Molla con leggero rimbalzo, dove linear() e' supportata. */
@supports (transition-timing-function: linear(0, 1)) {
  .hh-slab[data-hardhat] {
    --hh-spring: linear(0, 0.198, 0.379, 0.538, 0.673, 0.784, 0.873, 0.941, 0.991, 1.027, 1.05, 1.063, 1.069, 1.069, 1.066, 1.059, 1.052, 1.044, 1.036, 1.029, 1.022, 1.016, 1.011, 1.007, 1.004, 1.002, 1, 0.999, 0.998, 0.997, 1);
  }
}

.hh-slab[data-hardhat] *,
.hh-slab[data-hardhat] *::before,
.hh-slab[data-hardhat] *::after {
  box-sizing: border-box;
}

.hh-slab[data-hardhat] .hh-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Filo giallo interno alla lastra (da tablet in su). */
.hh-slab[data-hardhat]::before {
  content: none;
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(254, 202, 17, .13);
  border-radius: 14px;
  pointer-events: none;
}

/* Nastro da cantiere in cima alla lastra. */
.hh-slab[data-hardhat] .hh-slab__tape {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 112px;
  height: 8px;
  margin-left: -56px;
  border-radius: 0 0 5px 5px;
  background: repeating-linear-gradient(-45deg, #FECA11 0 6px, #1C1F22 6px 12px);
  pointer-events: none;
}

.hh-slab[data-hardhat] .hh-slab__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 0;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  text-align: center;
}

/* Tre blocchi: timbro, testo, contatti. Le distanze verticali sono margini,
   cosi' ogni layout (colonna singola, 2 colonne + contatti sotto, 2 colonne) le decide da se'. */
.hh-slab[data-hardhat] .hh-slab__mark,
.hh-slab[data-hardhat] .hh-slab__body,
.hh-slab[data-hardhat] .hh-contacts {
  min-width: 0;
  width: 100%;
}

.hh-slab[data-hardhat] .hh-slab__body {
  margin-top: 30px;
}

.hh-slab[data-hardhat] .hh-slab__mark {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
}

/* ---------- Timbro ---------- */

.hh-slab[data-hardhat] .hh-stamp {
  position: relative;
  display: block;
  width: min(100% - 36px, 256px);
  transform: rotate(-4deg);
  transform-origin: 50% 60%;
}

.hh-slab[data-hardhat] .hh-stamp__face {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 20px 20px;
  background: var(--hh-charcoal);
  border-radius: 14px;
  /* gradino pieno scuro che stacca il timbro dalla lastra (i due bordi sono ::before e ::after) */
  box-shadow: 7px 7px 0 0 #1C1F22;
}

/* Anello esterno tratteggiato giallo. */
.hh-slab[data-hardhat] .hh-stamp__face::before {
  content: "";
  position: absolute;
  inset: -9px;
  border: 2px dashed rgba(254, 202, 17, .62);
  border-radius: 21px;
  pointer-events: none;
}

/* Secondo filo interno, giallo tenue. */
.hh-slab[data-hardhat] .hh-stamp__face::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(254, 202, 17, .26);
  border-radius: 9px;
  pointer-events: none;
}

.hh-slab[data-hardhat] .hh-stamp__label,
.hh-slab[data-hardhat] .hh-stamp__line {
  position: relative;
  display: block;
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hh-slab[data-hardhat] .hh-stamp__label {
  color: rgba(255, 255, 255, .74);
}

.hh-slab[data-hardhat] .hh-stamp__line {
  padding-top: 11px;
  letter-spacing: .1em;
  color: var(--hh-yellow);
}

/* Trattino tra logo e riga sotto, come un segno di timbro. */
.hh-slab[data-hardhat] .hh-stamp__line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 28px;
  height: 1px;
  margin-left: -14px;
  background: rgba(254, 202, 17, .5);
}

.hh-slab[data-hardhat] .hh-stamp__logo {
  display: block;
  width: 100%;
  max-width: 214px;
}

.hh-slab[data-hardhat] .hh-stamp__logo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* Anello d'inchiostro dopo la pressione. */
.hh-slab[data-hardhat] .hh-stamp__pulse {
  position: absolute;
  inset: -9px;
  display: block;
  border: 2px solid var(--hh-yellow);
  border-radius: 21px;
  opacity: 0;
  pointer-events: none;
}

/* Stato iniziale (solo quando hardhat.js e' partito e ha messo .is-armed):
   sollevato, piu' grande, trasparente. Senza script il timbro resta visibile. */
.hh-slab[data-hardhat].is-armed:not(.is-stamped) .hh-stamp {
  opacity: 0;
  transform: translate(0, -18px) rotate(-9deg) scale(1.16);
}

.hh-slab[data-hardhat].is-stamped .hh-stamp {
  animation: hh-stamp-press 760ms ease-in-out both;
}

/* L'anello parte nel momento dell'impatto (38% di 760ms). */
.hh-slab[data-hardhat].is-stamped .hh-stamp__pulse {
  /* senza riempimento: prima dell'impatto e dopo resta invisibile (opacity 0 di base) */
  animation: hh-stamp-ink 820ms cubic-bezier(.2, .7, .3, 1) 285ms;
}

/* Caduta in accelerazione (ease-in) fino all'impatto, poi rimbalzo e assestamento
   in uscita (ease-out). L'opacita' e' piena gia' al 12%, prima che scenda. */
@keyframes hh-stamp-press {
  0%   { opacity: 0; transform: translate(0, -18px) rotate(-9deg) scale(1.16); animation-timing-function: cubic-bezier(.55, 0, .85, .4); }
  12%  { opacity: 1; }
  38%  { transform: translate(0, 1px) rotate(-3.4deg) scale(.955); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  64%  { transform: translate(0, 0) rotate(-4.3deg) scale(1.018); animation-timing-function: cubic-bezier(.4, 0, .3, 1); }
  84%  { transform: translate(0, 0) rotate(-3.9deg) scale(.996); }
  100% { opacity: 1; transform: translate(0, 0) rotate(-4deg) scale(1); }
}

@keyframes hh-stamp-ink {
  0%   { opacity: .6; transform: scale(.985); }
  100% { opacity: 0; transform: scale(1.08); }
}

/* ---------- Testo ---------- */

.hh-slab[data-hardhat] .hh-slab__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hh-yellow);
}

.hh-slab[data-hardhat] .hh-slab__kicker::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 2px;
  background: var(--hh-yellow);
}

.hh-slab[data-hardhat] .hh-slab__title {
  max-width: 17ch;
  margin: 0 auto;
  padding: 0;
  font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.85rem, 1.2rem + 2.3vw, 3.1rem);
  font-style: normal;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.028em;
  text-transform: none;
  text-wrap: balance;
  color: #FFFFFF;
}

.hh-slab[data-hardhat] .hh-slab__title span {
  color: var(--hh-yellow);
}

.hh-slab[data-hardhat] .hh-slab__text {
  max-width: 34em;
  margin: 18px auto 0;
  font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .8);
}

/* ---------- Pannello contatti ---------- */

.hh-slab[data-hardhat] .hh-contacts {
  margin: 24px 0 0;
  padding: 14px 0 12px;
  background: #212428;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
}

.hh-slab[data-hardhat] .hh-contacts__label {
  margin: 0 0 6px;
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, .66);
}

.hh-slab[data-hardhat] .hh-contacts__mail {
  margin: 8px 12px 0;
  padding: 10px 0 0;
  border-top: 1px dashed rgba(255, 255, 255, .14);
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .01em;
  text-align: center;
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, .72);
  -webkit-user-select: all;
  user-select: all;
}

/* Griglia: 2 in alto (Facebook, Email), 3 sotto (telefoni), sfalsati come mattoni. */
.hh-slab[data-hardhat] .hh-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  row-gap: 2px;
  column-gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hh-slab[data-hardhat] .hh-tiles__item {
  /* --hh-stagger: ritardo della sequenza su touch, lo imposta hardhat.js */
  --hh-stagger: 0ms;
  display: flex;
  justify-content: center;
  grid-column: span 2;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hh-slab[data-hardhat] .hh-tiles__item:nth-child(1) { grid-column: 2 / span 2; }
.hh-slab[data-hardhat] .hh-tiles__item:nth-child(2) { grid-column: 4 / span 2; }

.hh-slab[data-hardhat] .hh-tiles__item::before,
.hh-slab[data-hardhat] .hh-tiles__item::marker {
  content: none;
}

/* ---------- Link / tessera ---------- */

.hh-slab[data-hardhat] .hh-link {
  --hh-on: 0;
  --hh-ease: var(--hh-settle);
  --hh-fade-ease: var(--hh-settle);
  --hh-fade: opacity calc(360ms - var(--hh-on) * 130ms) var(--hh-fade-ease) calc(var(--hh-on) * var(--hh-stagger) + (1 - var(--hh-on)) * 100ms);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 156px;
  min-height: 56px;
  padding: calc(var(--hh-lift) + 10px) 2px 10px;
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.hh-slab[data-hardhat] .hh-link:focus-visible {
  outline: 2px solid var(--hh-yellow);
  outline-offset: 0;
}

/* Stato attivo: regole separate, cosi' un selettore non supportato non annulla le altre.
   Su touch hardhat.js accende ogni tessera (.is-lit sul <li>) quando entra nello schermo. */
.hh-slab[data-hardhat] .hh-tiles__item.is-lit .hh-link {
  --hh-on: 1;
  --hh-ease: var(--hh-spring);
  --hh-fade-ease: var(--hh-out);
}

.hh-slab[data-hardhat] .hh-link:focus-visible {
  --hh-on: 1;
  --hh-ease: var(--hh-spring);
  --hh-fade-ease: var(--hh-out);
}

@media (hover: hover) and (pointer: fine) {
  .hh-slab[data-hardhat] .hh-link:hover {
    --hh-on: 1;
    --hh-ease: var(--hh-spring);
    --hh-fade-ease: var(--hh-out);
  }
}

.hh-slab[data-hardhat] .hh-tile {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: var(--hh-tile);
  height: var(--hh-tile);
  pointer-events: none;
  transition: transform 260ms var(--hh-out);
}

/* Pressione al tocco/clic: il blocco affonda un attimo prima che si apra il link. */
.hh-slab[data-hardhat] .hh-link:active .hh-tile {
  transform: translate(0, 3px) scale(.93);
  transition-duration: 70ms;
}

.hh-slab[data-hardhat] .hh-tile__bridge,
.hh-slab[data-hardhat] .hh-tile__depth,
.hh-slab[data-hardhat] .hh-tile__face,
.hh-slab[data-hardhat] .hh-tile__fill,
.hh-slab[data-hardhat] .hh-tile__glyph,
.hh-slab[data-hardhat] .hh-tile__sheen {
  position: absolute;
  display: block;
}

/* Estrusione: tre copie arrotondate lungo la diagonale. La base e' scura;
   il colore (::before) sfuma insieme alla faccia. */
.hh-slab[data-hardhat] .hh-tile__depth {
  --hh-k: 1;
  inset: 0;
  border-radius: var(--hh-radius);
  background: #111315;
  transform: translate(calc(var(--hh-on) * var(--hh-depth) * var(--hh-k) / 3), calc(var(--hh-on) * (var(--hh-depth) * var(--hh-k) / 3 - var(--hh-lift))));
  transition: transform calc(460ms + var(--hh-on) * 300ms) var(--hh-ease) calc(var(--hh-on) * var(--hh-stagger));
}

.hh-slab[data-hardhat] .hh-tile__depth--2 { --hh-k: 2; }
.hh-slab[data-hardhat] .hh-tile__depth--3 { --hh-k: 3; }

.hh-slab[data-hardhat] .hh-tile__depth::before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  /* Tinta unita: copie e ponte si fondono in un unico fianco senza giunture. */
  background: var(--hh-side, #111315);
  opacity: calc(var(--hh-on) * .998 + .002);
  transition: var(--hh-fade);
}

/* Ponte sotto le copie: una fascia a 45 gradi, larga quanto la sagoma della
   faccia vista in diagonale, che va dal centro della faccia al centro
   dell'ultima copia. Riempie i piccoli incavi tra gli angoli arrotondati
   delle copie, cosi' gli spigoli dell'estrusione restano dritti. */
.hh-slab[data-hardhat] .hh-tile__bridge {
  --hh-bridge-h: calc((var(--hh-tile) - 2 * var(--hh-radius)) * 1.4142 + 2 * var(--hh-radius));
  top: 50%;
  left: 50%;
  width: calc(var(--hh-depth) * 1.4142);
  height: var(--hh-bridge-h);
  margin-top: calc(var(--hh-bridge-h) / -2);
  background: var(--hh-side, #111315);
  transform-origin: 0 50%;
  opacity: calc(var(--hh-on) * .998 + .002);
  transform: translate(0, calc(var(--hh-on) * var(--hh-lift) * -1)) rotate(45deg) scaleX(calc(var(--hh-on) * .99 + .01));
  transition:
    transform calc(460ms + var(--hh-on) * 300ms) var(--hh-ease) calc(var(--hh-on) * var(--hh-stagger)),
    var(--hh-fade);
}

/* La faccia sale solo in verticale: resta centrata sul nome. */
.hh-slab[data-hardhat] .hh-tile__face {
  inset: 0;
  overflow: hidden;
  border-radius: var(--hh-radius);
  background: #1A1D20;
  /* filo chiaro a riposo + riga netta sotto la faccia che la stacca dal fianco */
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .42), 0 1px 0 0 rgba(0, 0, 0, .16);
  transform: translate(0, calc(var(--hh-on) * var(--hh-lift) * -1));
  transition: transform calc(460ms + var(--hh-on) * 300ms) var(--hh-ease) calc(var(--hh-on) * var(--hh-stagger));
}

.hh-slab[data-hardhat] .hh-tile__fill {
  inset: 0;
  background: var(--hh-face, #1A1D20);
  opacity: calc(var(--hh-on) * .998 + .002);
  transition: var(--hh-fade);
}

.hh-slab[data-hardhat] .hh-tile__glyph {
  inset: 0;
  width: var(--hh-glyph);
  height: var(--hh-glyph);
  margin: auto;
  transform: translate(0, calc(var(--hh-on) * var(--hh-pop) * -1)) scale(calc(1 + var(--hh-on) * .06));
  transition: transform calc(420ms + var(--hh-on) * 380ms) var(--hh-ease) calc(var(--hh-on) * (var(--hh-stagger) + 60ms));
}

.hh-slab[data-hardhat] .hh-tile__icon {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: currentColor;
}

.hh-slab[data-hardhat] .hh-tile__icon--rest {
  color: #FFFFFF;
  opacity: calc((1 - var(--hh-on)) * .998 + .002);
  transition: opacity calc(200ms + (1 - var(--hh-on)) * 160ms) var(--hh-fade-ease) calc(var(--hh-on) * var(--hh-stagger) + (1 - var(--hh-on)) * 100ms);
}

.hh-slab[data-hardhat] .hh-tile__icon--on {
  color: var(--hh-glyph-on, #FFFFFF);
  opacity: calc(var(--hh-on) * .998 + .002);
  transition: var(--hh-fade);
}

/* Copia del glifo a spigolo vivo, in basso a destra. */
.hh-slab[data-hardhat] .hh-tile__icon--shade {
  color: var(--hh-glyph-shade, #111315);
  opacity: calc(var(--hh-on) * .998 + .002);
  transform: translate(calc(var(--hh-on) * var(--hh-split)), calc(var(--hh-on) * var(--hh-split)));
  transition:
    transform calc(300ms + var(--hh-on) * 400ms) var(--hh-ease) calc(var(--hh-on) * (var(--hh-stagger) + 130ms)),
    opacity calc(360ms - var(--hh-on) * 180ms) var(--hh-fade-ease) calc(var(--hh-on) * (var(--hh-stagger) + 130ms) + (1 - var(--hh-on)) * 100ms);
}

/* Riflesso: due lame nette che attraversano la faccia una volta sola. */
.hh-slab[data-hardhat] .hh-tile__sheen {
  inset: 0;
  opacity: calc(var(--hh-on) * .998 + .002);
  transform: translateX(calc((var(--hh-on) * 2 - 1) * 99%));
  transition:
    transform calc(var(--hh-on) * 900ms) var(--hh-out) calc(var(--hh-on) * (var(--hh-stagger) + 170ms) + (1 - var(--hh-on)) * 260ms),
    opacity calc(200ms - var(--hh-on) * 199ms) linear calc(var(--hh-on) * (var(--hh-stagger) + 170ms));
}

.hh-slab[data-hardhat] .hh-tile__sheen > span {
  position: absolute;
  top: -20%;
  bottom: -20%;
  display: block;
  background: #FFFFFF;
  transform: skewX(-24deg);
}

.hh-slab[data-hardhat] .hh-tile__sheen > span:first-child {
  left: 24%;
  width: 17%;
  opacity: .2;
}

.hh-slab[data-hardhat] .hh-tile__sheen > span:last-child {
  left: 48%;
  width: 6%;
  opacity: .14;
}

/* Nome e riga sotto (numero di telefono leggibile) */
.hh-slab[data-hardhat] .hh-link__name {
  position: relative;
  display: block;
  margin: calc(var(--hh-base) + 10px) 0 0;
  padding: 0 0 0 .12em;
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #FFFFFF;
  opacity: calc(.8 + var(--hh-on) * .2);
  transition: opacity 300ms var(--hh-out) calc(var(--hh-on) * var(--hh-stagger));
}

.hh-slab[data-hardhat] .hh-link__meta {
  position: relative;
  display: block;
  margin: 3px 0 0;
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0;
  white-space: nowrap;
  color: rgba(255, 255, 255, .7);
}

/* Trattino giallo sotto la riga, che cresce nello stato attivo. */
.hh-slab[data-hardhat] .hh-link__meta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: var(--hh-accent, var(--hh-yellow));
  opacity: calc(var(--hh-on) * .998 + .002);
  transform: scaleX(calc(var(--hh-on) * .99 + .01));
  transition:
    transform calc(320ms + var(--hh-on) * 280ms) var(--hh-out) calc(var(--hh-on) * (var(--hh-stagger) + 110ms)),
    opacity 0ms linear calc(var(--hh-on) * (var(--hh-stagger) + 110ms) + (1 - var(--hh-on)) * 320ms);
}

/* ---------- Colori nello stato attivo ---------- */

.hh-slab[data-hardhat] .hh-link--facebook {
  --hh-face: #0866FF;
  --hh-side: #0449C0;
  --hh-glyph-on: #FFFFFF;
  --hh-glyph-shade: #0447B8;
  --hh-accent: #3D86FF;
}

.hh-slab[data-hardhat] .hh-link--mail {
  --hh-face: #FECA11;
  --hh-side: #C29600;
  --hh-glyph-on: #2A2E32;
  --hh-glyph-shade: rgba(160, 124, 0, .55);
}

.hh-slab[data-hardhat] .hh-link--phone {
  --hh-face: #FFFFFF;
  --hh-side: #AEB5BC;
  --hh-glyph-on: #2A2E32;
  --hh-glyph-shade: #FECA11;
}

/* Livelli pronti solo per i pezzi principali (faccia, glifo, riflesso).
   Touch: .is-primed lo mette e lo toglie hardhat.js (via a sequenza finita).
   Mouse/tastiera: solo mentre il puntatore o il focus e' sulle tessere. */
.hh-slab[data-hardhat].is-primed .hh-tile__face,
.hh-slab[data-hardhat].is-primed .hh-tile__glyph {
  will-change: transform;
}

.hh-slab[data-hardhat].is-primed .hh-tile__sheen {
  will-change: transform, opacity;
}

.hh-slab[data-hardhat] .hh-tiles:focus-within .hh-tile__face,
.hh-slab[data-hardhat] .hh-tiles:focus-within .hh-tile__glyph {
  will-change: transform;
}

.hh-slab[data-hardhat] .hh-tiles:focus-within .hh-tile__sheen {
  will-change: transform, opacity;
}

@media (hover: hover) and (pointer: fine) {
  .hh-slab[data-hardhat] .hh-tiles:hover .hh-tile__face,
  .hh-slab[data-hardhat] .hh-tiles:hover .hh-tile__glyph {
    will-change: transform;
  }

  .hh-slab[data-hardhat] .hh-tiles:hover .hh-tile__sheen {
    will-change: transform, opacity;
  }
}

/* ---------- Misure ---------- */

/* Telefoni stretti: il prefisso va sopra il numero, cosi' tre numeri stanno su una riga. */
@media (max-width: 519px) {
  .hh-slab[data-hardhat] .hh-link__meta {
    font-size: 11px;
    line-height: 16px;
  }

  .hh-slab[data-hardhat] .hh-link__cc {
    display: block;
  }
}

@media (min-width: 390px) {
  .hh-slab[data-hardhat] {
    --hh-tile: 64px;
    --hh-glyph: 28px;
    padding-inline: 20px;
  }

  .hh-slab[data-hardhat] .hh-contacts { padding-inline: 2px; }
  .hh-slab[data-hardhat] .hh-stamp { width: min(100% - 40px, 272px); }
  .hh-slab[data-hardhat] .hh-stamp__logo { max-width: 222px; }
}

@media (min-width: 560px) {
  .hh-slab[data-hardhat] {
    --hh-tile: 80px;
    --hh-glyph: 34px;
    --hh-depth: 10px;
    --hh-split: 3px;
    padding: 64px 36px 44px;
  }

  .hh-slab[data-hardhat]::before { content: ""; }

  .hh-slab[data-hardhat] .hh-slab__body { margin-top: 42px; }

  .hh-slab[data-hardhat] .hh-slab__text { font-size: 17px; }

  .hh-slab[data-hardhat] .hh-contacts {
    margin-top: 34px;
    padding: 20px 16px 16px;
  }

  .hh-slab[data-hardhat] .hh-contacts__mail {
    margin-top: 12px;
    padding-top: 12px;
  }

  .hh-slab[data-hardhat] .hh-tiles { row-gap: 10px; }

  .hh-slab[data-hardhat] .hh-link { padding: calc(var(--hh-lift) + 12px) 4px 12px; }
  .hh-slab[data-hardhat] .hh-link__name { margin-top: calc(var(--hh-base) + 12px); }

  .hh-slab[data-hardhat] .hh-stamp { width: 316px; }
  .hh-slab[data-hardhat] .hh-stamp__face { padding: 26px 26px 22px; gap: 14px; }
  .hh-slab[data-hardhat] .hh-stamp__logo { max-width: 248px; }
  .hh-slab[data-hardhat] .hh-stamp__label,
  .hh-slab[data-hardhat] .hh-stamp__line { font-size: 11px; }
}

/* Da 960px: timbro a sinistra e testo a destra; i contatti su tutta la larghezza sotto,
   le cinque tessere su una riga. */
@media (min-width: 960px) {
  .hh-slab[data-hardhat] {
    --hh-tile: 84px;
    --hh-glyph: 36px;
    --hh-pop: 3px;
    padding: 76px 48px 64px;
  }

  .hh-slab[data-hardhat] .hh-slab__tape {
    left: 76px;
    margin-left: 0;
  }

  .hh-slab[data-hardhat] .hh-slab__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    justify-items: stretch;
    column-gap: 48px;
    text-align: left;
  }

  .hh-slab[data-hardhat] .hh-slab__mark {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
  }

  .hh-slab[data-hardhat] .hh-slab__body {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  .hh-slab[data-hardhat] .hh-contacts {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 52px;
  }

  .hh-slab[data-hardhat] .hh-slab__title,
  .hh-slab[data-hardhat] .hh-slab__text {
    margin-left: 0;
    margin-right: 0;
  }

  .hh-slab[data-hardhat] .hh-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hh-slab[data-hardhat] .hh-tiles__item:nth-child(n) { grid-column: auto / span 1; }

  .hh-slab[data-hardhat] .hh-stamp { width: min(100% - 36px, 300px); }
  .hh-slab[data-hardhat] .hh-stamp__face { padding: 28px 26px 22px; gap: 15px; }
  .hh-slab[data-hardhat] .hh-stamp__logo { max-width: 244px; }
}

/* Da 1280px: timbro a sinistra, testo e contatti a destra. */
@media (min-width: 1280px) {
  .hh-slab[data-hardhat] {
    padding: 84px 64px 72px;
  }

  .hh-slab[data-hardhat] .hh-slab__tape { left: 96px; }

  .hh-slab[data-hardhat] .hh-slab__inner {
    grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr);
    column-gap: 64px;
  }

  .hh-slab[data-hardhat] .hh-slab__mark { grid-row: 1 / span 2; }
  .hh-slab[data-hardhat] .hh-slab__body { align-self: end; }

  .hh-slab[data-hardhat] .hh-contacts {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 34px;
  }

  .hh-slab[data-hardhat] .hh-stamp { width: min(100% - 36px, 364px); }
  .hh-slab[data-hardhat] .hh-stamp__face { padding: 30px 28px 24px; gap: 16px; }
  .hh-slab[data-hardhat] .hh-stamp__logo { max-width: 290px; }
}

/* 1280-1359px: colonna contatti ancora stretta, torna 2 + 3. */
@media (min-width: 1280px) and (max-width: 1359px) {
  .hh-slab[data-hardhat] .hh-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hh-slab[data-hardhat] .hh-tiles__item:nth-child(n) { grid-column: auto / span 2; }
  .hh-slab[data-hardhat] .hh-tiles__item:nth-child(1) { grid-column: 2 / span 2; }
  .hh-slab[data-hardhat] .hh-tiles__item:nth-child(2) { grid-column: 4 / span 2; }
}

@media (min-width: 1360px) {
  .hh-slab[data-hardhat] {
    --hh-tile: 88px;
    --hh-glyph: 38px;
    --hh-depth: 12px;
  }

  .hh-slab[data-hardhat] .hh-contacts { padding: 22px 12px 18px; }
}

/* ---------- Movimento ridotto ---------- */

@media (prefers-reduced-motion: reduce) {
  .hh-slab[data-hardhat].is-armed:not(.is-stamped) .hh-stamp {
    opacity: 1;
    transform: rotate(-4deg);
  }

  .hh-slab[data-hardhat].is-stamped .hh-stamp,
  .hh-slab[data-hardhat].is-stamped .hh-stamp__pulse {
    animation: none;
  }

  .hh-slab[data-hardhat] .hh-link,
  .hh-slab[data-hardhat] .hh-link *,
  .hh-slab[data-hardhat] .hh-link *::before,
  .hh-slab[data-hardhat] .hh-link *::after {
    transition: none !important;
  }

  .hh-slab[data-hardhat] .hh-tile__sheen {
    display: none;
  }
}