/* ── Home v4 (25/10/2026): prima le immagini, poi le quattro aziende con la mappa, poi tre storie da scorrere ── */
.h4 { --h4-pad: clamp(1rem, 4vw, 2.5rem); }
.h4-wrap { max-width: 1160px; margin: 0 auto; padding-inline: var(--h4-pad); }
.h4-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.h4 .lbl { margin-bottom: .6rem; }
.h4 .t-h2 { text-wrap: balance; }
.h4-sub { color: var(--text2); max-width: 60ch; margin-top: .6rem; }
.h4-note { color: var(--muted); font-size: .95rem; margin-top: 1rem; max-width: 62ch; }
.h4-note a { color: var(--blue); font-weight: 600; }
.h4-btns { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }

.h4-mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; aspect-ratio: 3 / 2; max-width: 100%; }
.h4-tile { position: relative; overflow: hidden; border-radius: 12px; background: var(--bg-cream); display: block; }
.h4-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.h4-tile:hover img, .h4-tile:focus-visible img { transform: scale(1.04); }
.h4-tile span { position: absolute; left: 8px; bottom: 8px; background: rgba(20,41,90,.88); color: #fff; font-weight: 700; font-size: .78rem; padding: .3rem .55rem; border-radius: 6px; line-height: 1.2; }
.h4-t0 { grid-row: span 2; }
.h4-tile:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.h4-h1 { font-size: clamp(2rem, 4.2vw, 3.3rem); font-weight: 800; line-height: 1.06; color: var(--navy); text-wrap: balance; margin: .2rem 0 .9rem; }
.h4-lede { font-size: 1.08rem; color: var(--text2); max-width: 46ch; }
/* 2 · che cosa facciamo */
.h4-what { background: var(--bg-cream); padding-block: clamp(2.2rem, 5vw, 3.5rem); }
.h4-what-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.h4-what-list li { display: grid; gap: .35rem; align-content: start; }
.h4-what-list b { font-size: 1.1rem; color: var(--navy); }
.h4-what-list span:last-child { color: var(--text2); }
.h4-ic { width: 46px; height: 46px; border-radius: 11px; background: #fff; display: grid; place-items: center; margin-bottom: .3rem; }
.h4-ic svg { width: 25px; height: 25px; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* 3 · le quattro aziende: stesso schema per tutte */
.h4-firms { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.h4-firm-list { display: grid; gap: clamp(1.2rem, 3vw, 2rem); margin-top: 1.8rem; }
.h4-firm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(1rem, 3vw, 2.2rem); align-items: start;
  border: 1px solid var(--brd); border-radius: 16px; padding: clamp(.8rem, 2vw, 1.2rem); background: #fff; scroll-margin-top: 1rem; }
.h4-firm:nth-child(even) .h4-firm-pic { order: 2; }
.h4-firm-pic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; display: block; }
.h4-vidbox { position: relative; }
.h4-vid { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; display: block; background: #fbf1d4; }
.h4-replay { position: absolute; right: .6rem; bottom: .6rem; display: inline-flex; gap: .35rem; align-items: center; border: 0; border-radius: 999px;
  padding: .45rem .85rem; background: rgba(255, 255, 255, .94); color: var(--navy); font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer;
  box-shadow: 0 2px 10px rgba(20, 41, 90, .16); }
.h4-replay[hidden] { display: none; }
.h4-replay:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.h4-firm-body { min-width: 0; display: grid; gap: .55rem; align-content: start; padding-block: .3rem; }
.h4-kind { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); }
.h4-name { font-size: clamp(1.45rem, 2.6vw, 1.9rem); font-weight: 800; color: var(--navy); line-height: 1.1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; }
.h4-group { font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--text2); background: var(--bg-cream); border-radius: 999px; padding: .2rem .6rem; }
.h4-firm-body > p { color: var(--text2); }
.h4-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.h4-chip { background: #EEF3FA; color: var(--navy); font-weight: 600; font-size: .88rem; border-radius: 8px; padding: .3rem .6rem; }
.h4-firm-foot { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: .4rem; }
.h4-where { margin: 0; display: grid; gap: .35rem; }
.h4-where figcaption { font-size: .85rem; color: var(--text2); line-height: 1.35; }
.h4-map { width: 100%; height: auto; max-width: 100%; display: block; background: var(--bg-cream); border-radius: 10px; }
.h4-map-base { fill: #EADFB8; stroke: var(--bg-cream); stroke-width: 1; }
.h4-map-hi { fill: var(--blue); stroke: var(--bg-cream); stroke-width: 1; }
.h4-map-dot { fill: var(--bronze); stroke: #fff; stroke-width: 2.5; }
.h4-sectors b, .h4-where b { font-size: .8rem; color: var(--navy); }
.h4-sectors ul { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.h4-sec { font-size: .9rem; color: var(--text2); position: relative; padding-inline-start: .8rem; }
.h4-sec::before { content: ''; position: absolute; inset-inline-start: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--bronze); }
.h4-more { justify-self: start; font-weight: 700; color: var(--blue); margin-top: .4rem; }

/* ── Home v5 (26/10/2026): le misure dentro la pagina dipendono dalla larghezza del corpo (container), non dello schermo,
   così la pagina sta bene anche con la colonna di destra ── */
.h5 { container-type: inline-size; container-name: h5; }
.h5 .h4-h1 { font-size: clamp(1.9rem, 5cqi, 3.1rem); }
/* 1 · apertura: chi siamo, che cosa facciamo, le cinque famiglie in foto */
.h5-hero { background: #FCF4D2; }
.h5-hero-in { max-width: 1240px; margin: 0 auto; padding: clamp(1.2rem, 3cqi, 2.6rem) var(--h4-pad) clamp(1.8rem, 4cqi, 3rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "head mosaic" "body mosaic";
  column-gap: clamp(1.4rem, 3cqi, 3rem); row-gap: .2rem; align-items: center; }
.h5-hero-head { grid-area: head; align-self: end; }
.h5-hero-body { grid-area: body; align-self: start; }
.h5-mosaic { grid-area: mosaic; }
.h5 .h4-lede { max-width: 58ch; font-size: 1.04rem; }
/* 3 · oggi su Faberpack nel corpo della pagina */
.h5-today-flow { padding-block: clamp(1.6rem, 4cqi, 2.6rem); border-top: 1px solid var(--brd2); }
.h5-today-flow .h5-today { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.h5-today-flow .h5-today-h { grid-column: 1 / -1; }
/* 5 · parliamone */
.h5-talk { background: var(--bg-cream); padding-block: clamp(2.4rem, 6cqi, 4rem); }
.h5-talk-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.h5-card { background: #fff; border: 1px solid #EAD7A0; border-radius: 14px; padding: 1.1rem; display: grid; gap: .45rem; align-content: start; grid-template-rows: auto auto 1fr auto; }
.h5-card .h4-ic { background: var(--bg-cream); }
.h5-card b { font-size: 1.08rem; color: var(--navy); line-height: 1.2; }
.h5-card p { color: var(--text2); font-size: .95rem; margin: 0; }
.h5-card-cta { font-weight: 700; color: var(--blue); margin-top: .3rem; }
.h5-meet { margin-top: 1.6rem; background: var(--grad); color: #fff; border-radius: 16px; padding: clamp(1.1rem, 3cqi, 1.8rem);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem; align-items: center; }
.h5-meet-h { font-size: clamp(1.35rem, 3cqi, 1.8rem); font-weight: 800; line-height: 1.15; color: #fff; margin: 0; }
.h5-meet-h em { color: var(--sun); }
.h5-meet .h4-sub { color: rgba(255, 255, 255, .86); margin-top: .35rem; }
.h5-meet .h4-btns { margin-top: 1rem; }
.h5-meet .btn-navy { background: #fff; color: var(--navy); }
.h5-meet .btn-outline { border-color: rgba(255, 255, 255, .7); color: #fff; }
.h5-meet .h4-face { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, .6); }

/* il riquadro «Oggi su Faberpack»: due parole del dizionario e i post di LinkedIn */
.h5-today { display: grid; gap: 14px; }
.h5-today-h { margin: 0; display: grid; gap: 2px; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); }
.h5-today-date { font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: var(--navy); font-weight: 800; }
.h5-today-date::first-letter { text-transform: uppercase; }
.h5-box { border: 1px solid var(--brd); border-radius: 12px; padding: 14px; background: #fff; display: grid; gap: 10px; align-content: start; }
.h5-words { background: var(--bg-cream); border-color: #EAD7A0; }
.h5-box-h { font-size: 1rem; font-weight: 800; color: var(--navy); margin: 0; line-height: 1.2; }
.h5-word-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.h5-word { display: grid; gap: 3px; }
.h5-word + .h5-word { border-top: 1px dashed #D9C27E; padding-top: 12px; }
.h5-word-num { font-size: .74rem; font-weight: 800; color: var(--bronze); letter-spacing: .04em; }
.h5-word-t { font-size: 1.05rem; color: var(--navy); line-height: 1.2; }
.h5-word-s { font-size: .74rem; font-weight: 700; color: var(--text2); }
.h5-word-s:empty { display: none; }
.h5-word-d { font-size: .88rem; color: var(--text2); line-height: 1.45; margin: 0; }
.h5-word-more, .h5-box-more { font-size: .85rem; font-weight: 700; color: var(--blue); }
.h5-li-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.h5-post a { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 10px; align-items: center; color: inherit; text-decoration: none; }
.h5-post img { grid-row: span 2; width: 52px; height: 65px; object-fit: cover; border-radius: 6px; border: 1px solid var(--brd2); }
.h5-post-meta { font-size: .72rem; font-weight: 700; color: var(--muted); align-self: end; }
.h5-post b { font-size: .9rem; color: var(--navy); line-height: 1.25; align-self: start; }
.h5-post a:hover b, .h5-post a:focus-visible b { color: var(--blue); }
.h5-li-none, .h5-li-note { font-size: .8rem; color: var(--muted); margin: 0; }
.h5-li-follow { justify-content: center; text-align: center; font-size: .85rem; padding-inline: .8rem; }

/* dove va il riquadro: corpo della pagina (di base), menu di sinistra (h5-left) o colonna di destra (h5-both) */
:root { --h5-right: 300px; }
.h5-aside, .h5-side-today { display: none; }
@media (min-width: 1100px) {
  html.h5-left .h5-side-today { display: block; padding-top: 4px; }
  html.h5-left .h5-today-flow { display: none; }
  .h5-side-today .h5-box { padding: 12px; }
}
@media (min-width: 1280px) {
  html.h5-both body { padding-inline-end: var(--h5-right); }
  html.h5-both .h5-aside { display: block; position: fixed; inset-block: 0; inset-inline-end: 0; width: var(--h5-right); z-index: 55;
    background: #fff; border-inline-start: 1px solid var(--brd); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 22px 18px 28px; }
  html.h5-both .h5-today-flow { display: none; }
}

/* corpo stretto (telefono, tablet, o due colonne di menu): tutto in colonna */
@container h5 (max-width: 1000px) { .h5-talk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container h5 (min-width: 701px) and (max-width: 900px) {
  .h5-hero-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body" "mosaic"; row-gap: .4rem; }
  .h5-mosaic { aspect-ratio: auto; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: none; margin-top: 1.4rem; }
  .h5-mosaic .h4-t0 { grid-row: auto; }
  .h5-mosaic .h4-tile { aspect-ratio: 4 / 5; }
  .h5-mosaic .h4-tile span { left: 6px; right: 6px; bottom: 6px; font-size: .74rem; }
}
@container h5 (max-width: 820px) {
  .h4-firm { grid-template-columns: minmax(0, 1fr); }
  .h4-firm:nth-child(even) .h4-firm-pic { order: 0; }
}
@container h5 (max-width: 700px) {
  .h5-hero-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "mosaic" "body"; row-gap: .9rem; padding-top: .9rem; }
  .h5 .h4-h1 { margin-bottom: 0; }
  .h4-mosaic { aspect-ratio: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .h4-t0 { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .h4-tile:not(.h4-t0) { aspect-ratio: 4 / 3; }
  .h4-what-list { grid-template-columns: minmax(0, 1fr); }
  .h4-firm-foot { grid-template-columns: minmax(0, 130px) minmax(0, 1fr); }
  .h5-today-flow .h5-today { grid-template-columns: minmax(0, 1fr); }
  .h5-meet { grid-template-columns: minmax(0, 1fr); }
}
@container h5 (max-width: 560px) { .h5-talk-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1099px) { .h4 { padding-top: var(--head); } }
[dir="rtl"] .h4-firm:nth-child(even) .h4-firm-pic { order: 0; }
/* nel menu di sinistra e nella colonna di destra niente deve allargare il riquadro */
.h5-today > *, .h5-box > *, .h5-side-today { min-width: 0; }
.h5-li-follow { white-space: normal; letter-spacing: .04em; line-height: 1.25; }
.h5-word-d { overflow-wrap: anywhere; }
.h5-post-ic { grid-row: span 2; width: 52px; height: 52px; border-radius: 8px; background: #0A66C2; color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }
.h5-li-list:empty { display: none; }
[dir="rtl"] .h4-tile span { left: auto; right: 8px; }
[dir="rtl"] .h4-replay { right: auto; left: .6rem; }
.h5-word-list[dir="ltr"] { text-align: left; }

/* ── Sito v6 (26/10/2026): più blu Faberpack, menu di sinistra blu, colonna di destra «Oggi» in ogni pagina, niente piede ── */
/* menu di sinistra: lingue e Area partner in alto, voci, Prenota una call, dati di legge in fondo */
.side { background: var(--navy); color: #fff; }
.side-logo, .side-name { color: #fff; }
.side-sub { color: rgba(255, 255, 255, .72); }
.side-lang a { border-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .92); background: transparent; }
.side-lang a:hover { border-color: #fff; color: #fff; }
.side-lang a[aria-current="true"] { background: #fff; border-color: #fff; color: var(--navy); }
.side-nav a { color: #fff; }
.side-nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.side-nav a[aria-current="page"], .side-nav .is-on > a { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 3px 0 0 var(--sun); }
[dir="rtl"] .side-nav a[aria-current="page"], [dir="rtl"] .side-nav .is-on > a { box-shadow: inset -3px 0 0 var(--sun); }
.side-nav .side-subl a { color: rgba(255, 255, 255, .78); }
.side-nav .side-subl a[aria-current="page"] { color: var(--sun); }
.side-cta { background: var(--blue); }
.side-cta:hover { background: #3b7cc8; filter: none; }
.side-partner-btn { background: transparent; border-color: rgba(255, 255, 255, .85); color: #fff; }
.side-partner-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.side-foot { border-top-color: rgba(255, 255, 255, .18) !important; }
.side-mail { color: rgba(255, 255, 255, .85); }
.side-mail:hover { color: #fff; }
.side-legal { margin: 8px 0 0; font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, .66); }
.side-legal .sep { opacity: .6; margin: 0 2px; }
.side-legal-links { margin: 2px 0 0; font-size: 12px; }
.side-legal-links a { color: rgba(255, 255, 255, .9); text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 1100px) { .side { border-inline-end: 0; } }
@media (max-width: 1099px) {
  .side { border-bottom: 0; box-shadow: 0 2px 10px rgba(11, 26, 60, .25); }
  .burger span { background: #fff; }
  .side-body { background: var(--navy); }
}
/* colonna di destra: azzurro tecnico, calendario in alto */
@media (min-width: 1280px) { html.h5-both .h5-aside { background: #E9F0F9; border-inline-start: 1px solid #D3E0F1; } }
.h5-today .h5-cal { margin: 0; }
.h5-today .h5-cal .cal { max-width: none; }
.h5-today-flow { background: #E9F0F9; border-top: 0; }
.h5-today-flow .h5-today { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .h5-today-flow .h5-today { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .h5-today-flow .h5-cal { grid-column: 1 / -1; max-width: 420px; } }
@media (max-width: 700px) { .h5-today-flow .h5-today { grid-template-columns: minmax(0, 1fr); } }
/* home: fascia «Che cosa facciamo» blu, schede delle aziende con il filo blu */
.h5 .h4-what { background: var(--grad); color: #fff; }
.h5 .h4-what .t-h2 { color: #fff; }
.h5 .h4-what .t-h2 em { color: var(--sun); }
.h5 .h4-what-list b { color: #fff; }
.h5 .h4-what-list span:last-child { color: rgba(255, 255, 255, .86); }
.h5 .h4-firm { border-top: 4px solid var(--blue); }
.h5 .h4-chip { background: #E3ECF8; }