/* CBN Informatica (IT-Tech) - CSS delle 8 sezioni della Home. Caricato SOLO su is_front_page().
   Origine: design/proposte-2026-10-13/home-assemblata-finale-lineare.html (la Home approvata),
   con i token di cbn-tokens.css e i componenti condivisi (bottoni, base .cbn-block) di
   cbn-chrome.css.

   Convenzioni:
   - ogni sezione ha la classe .cbn-block (base/reset in cbn-chrome.css) piu' la propria
     .cbn-home-<sezione>; gli elementi interni seguono BEM (.cbn-home-hero__name);
   - le regole che toccano <img> o link con colore proprio portano ".cbn-block " davanti
     (0,2,x): Elementor (".elementor img") e bootstrap ("a:hover") hanno specificità 0,1,1;
   - sezione "su fondo chiaro" = classe .cbn-on-light (solo per l'anello di focus). */

/* ===== Ritmo e fondi =====
   hero D | 2 L | 3 D | 4 L | 5 D | 6 L | 7 D | CTA arancio | footer D (D = charcoal, L = chiaro).
   Nessuna coppia scuro-scuro. Ogni sezione dopo la prima si apre con un filetto arancio 4px
   (.cbn-section-seam): una sola regola, nessuna eccezione, il filo arancio lega la pagina
   anche dove lo stacco lo fa gia' la luminosita'. Sul chiaro l'arancio pieno e' 2,9:1: va bene
   perche' il filetto e' decorazione, non porta informazione. */
.cbn-section-seam {
	border-top: 4px solid var(--cbn-orange);
}
.cbn-section-dark {
	background: var(--cbn-charcoal);
	color: var(--cbn-on-dark);
}
/* le sezioni con foto o numeri "a sbalzo" non devono creare scroll orizzontale */
.cbn-home-about,
.cbn-home-why,
.cbn-home-area,
.cbn-home-steps {
	overflow: hidden;
}
.cbn-home-featured {
	overflow-x: clip;
}

/* ===== Titoli ed elementi ricorrenti ===== */
.cbn-title-display {
	font: 800 var(--cbn-size-display)/.94 var(--cbn-font-display);
	letter-spacing: var(--cbn-tracking-display);
	text-wrap: balance;
}
.cbn-title-section {
	font: 800 var(--cbn-size-h2)/1 var(--cbn-font-display);
	letter-spacing: var(--cbn-tracking-section);
	text-wrap: balance;
}
.cbn-title-card {
	font: 700 var(--cbn-size-h3)/1.25 var(--cbn-font-display);
	letter-spacing: var(--cbn-tracking-card);
}
.cbn-lead {
	font-size: var(--cbn-size-lead);
	line-height: 1.55;
}
/* Eyebrow "nodo + traccia": richiama le tracce di circuito del logo. E' un'etichetta di
   sezione, non una numerazione: non codifica un ordine. Sul charcoal il testo e' bianco
   (l'arancio da 12px li' e' 4,25:1) e l'arancio resta ai soli nodo e traccia. */
.cbn-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: var(--cbn-space-md);
	color: var(--cbn-orange-strong);
	font: 500 var(--cbn-size-label)/1 var(--cbn-font-label);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.cbn-eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	background: currentColor;
}
.cbn-eyebrow::after {
	content: "";
	width: 40px;
	height: 2px;
	background: currentColor;
	opacity: .6;
}
.cbn-section-dark .cbn-eyebrow {
	color: var(--cbn-on-dark);
}
.cbn-section-dark .cbn-eyebrow::before,
.cbn-section-dark .cbn-eyebrow::after {
	background: var(--cbn-orange);
	opacity: 1;
}
.cbn-block .cbn-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 4px;
	border-bottom: 2px solid currentColor;
	color: var(--cbn-orange-strong);
	font: 700 .9375rem/1 var(--cbn-font-display);
	white-space: nowrap;
	transition: color var(--cbn-dur-ui);
}
/* il link e' alto ~20px: l'area di tocco arriva a 44px con un pseudo-elemento, non con padding,
   cosi' la sottolineatura resta dov'e' */
.cbn-block .cbn-link-arrow {
	position: relative;
}
.cbn-block .cbn-link-arrow::after {
	content: "";
	position: absolute;
	inset: -12px -6px;
}
.cbn-link-arrow svg {
	width: 16px;
	height: 16px;
	flex: none;
	transition: transform var(--cbn-dur-ui) var(--cbn-ease-ui);
}
.cbn-link-arrow:hover svg {
	transform: translateX(5px);
}

/* griglia di fondo a 6 colonne: solo il CTA (i passi hanno le proprie linee, vedi "Come funziona") */
.cbn-home-steps::before,
.cbn-home-cta::before {
	content: "";
	position: absolute;
	inset: 0 var(--cbn-container-edge);
	background: repeating-linear-gradient(90deg, var(--cbn-grid-line) 0 1px, transparent 1px calc(100% / 6));
	border-right: 1px solid var(--cbn-grid-line);
	pointer-events: none;
}
.cbn-home-steps,
.cbn-home-cta {
	--cbn-grid-line: var(--cbn-grid-line-on-dark);
}
.cbn-home-steps {
	--cbn-grid-line: var(--cbn-grid-line-on-light);
	position: relative;
}
.cbn-home-cta {
	--cbn-grid-line: rgba(255, 255, 255, .12);
}
/* CTA: la griglia a 6 colonne attraversava il titolo; ora e' una trama a quadri (96px) che sfuma da
   destra verso sinistra e lascia pulito il titolo. Con il parallax (sotto) la trama resta ferma
   rispetto alla finestra mentre la sezione scorre: e' la trama a muoversi dietro al testo */
.cbn-home-cta::before {
	inset: 0;
	border: 0;
	background-image:
		linear-gradient(90deg, rgba(255, 255, 255, .13) 1px, transparent 1px),
		linear-gradient(0deg, rgba(255, 255, 255, .13) 1px, transparent 1px);
	background-size: 96px 96px;
	-webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 80%);
	mask-image: linear-gradient(90deg, transparent 30%, #000 80%);
}

/* ===== 1. Hero a immagine piena, "Targa" =====
   Tesi: la hero e' una tavola tecnica che si compone sotto gli occhi. L'immagine e' la hero;
   il testo sta su un velo di charcoal (lo scuro unico della pagina), mai su un riquadro.
   Tre scene in rotazione (cbn-hero.js). Movimento: le righe del titolo salgono, il filo
   arancio si disegna, la foto fa uno zoom lento in uscita; il resto sta fermo. Anima solo
   transform/opacity. I tempi stanno qui (--cbn-hero-dwell-ms, --cbn-hero-swap-ms): il JS li
   legge, cosi' barra di avanzamento, timer e animazioni non possono divergere. */
.cbn-home-hero {
	--cbn-hero-height: clamp(600px, calc(100vh - var(--cbn-header-height)), 820px);   /* 100vh e' il ripiego senza svh */
	--cbn-hero-height: clamp(600px, calc(100svh - var(--cbn-header-height)), 820px);
	--cbn-hero-dwell-ms: 7000;   /* permanenza di una scena */
	--cbn-hero-swap-ms: 1600;    /* durata del cambio scena */
	--cbn-btn-lift: var(--cbn-white);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	min-height: var(--cbn-hero-height);
	background: var(--cbn-charcoal);
	color: var(--cbn-on-dark);
}
.cbn-home-hero__scenes {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}
.cbn-home-hero__scene {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
}
/* l'entrante sta sopra e si dissolve; l'uscente resta opaco sotto finche' l'entrante non
   ha finito: nessun momento "vuoto" a meta' dissolvenza */
.cbn-home-hero__scene.is-active {
	z-index: 2;
	opacity: 1;
	visibility: visible;
}
.cbn-home-hero__scene.is-leaving {
	z-index: 1;
	opacity: 1;
	visibility: visible;
}
/* la prima scena e' l'LCP: nessuna animazione di opacita' al caricamento. L'animazione parte
   solo dal primo cambio (.is-swapping, messa dal JS) */
.cbn-home-hero.is-swapping .cbn-home-hero__scene.is-active {
	animation: cbn-hero-scene-in calc(var(--cbn-hero-swap-ms) * 1ms) ease both;
}
/* ".cbn-block " davanti: Elementor da' ".elementor img {height:auto; max-width:100%}" (0,1,1) */
.cbn-block .cbn-home-hero__scene img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--cbn-scene-position, 50% 50%);
}
/* velo: vive nella scena (::after della figure) perche' ogni foto ha una luminanza diversa
   dietro il testo. Tre token per scena: opacita' a sinistra (--cbn-veil-left), dove finisce il
   tratto pieno (--cbn-veil-hold) e opacita' 16 punti dopo (--cbn-veil-mid); poi sfuma a destra
   e il fondo scurisce per la targa. Il testo vede sempre un fondo charcoal >= ~88%, cosi' il
   contrasto non dipende dalla foto */
.cbn-home-hero__scene {
	--cbn-veil-left: 95%;
	--cbn-veil-hold: 40%;
	--cbn-veil-mid: 72%;
}
/* finestra molto luminosa a sinistra: velo piu' forte */
.cbn-home-hero__scene--assistenza {
	--cbn-veil-left: 98%;
	--cbn-veil-mid: 80%;
}
/* parete chiara a sinistra e bordo netto dell'armadio a ~44% della larghezza: il tratto
   pieno arriva oltre il bordo e lo cancella */
.cbn-home-hero__scene--rete {
	--cbn-veil-left: 97%;
	--cbn-veil-hold: 52%;
	--cbn-veil-mid: 78%;
}
.cbn-home-hero__scene::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg,
			color-mix(in srgb, var(--cbn-charcoal) var(--cbn-veil-left), transparent) 0%,
			color-mix(in srgb, var(--cbn-charcoal) calc(var(--cbn-veil-left) - 5%), transparent) var(--cbn-veil-hold),
			color-mix(in srgb, var(--cbn-charcoal) var(--cbn-veil-mid), transparent) calc(var(--cbn-veil-hold) + 16%),
			color-mix(in srgb, var(--cbn-charcoal) 20%, transparent) calc(var(--cbn-veil-hold) + 36%),
			transparent 100%),
		linear-gradient(0deg, color-mix(in srgb, var(--cbn-charcoal) 60%, transparent) 0%, transparent 34%);
}

.cbn-home-hero__body {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: 1fr auto;
	column-gap: var(--cbn-space-xl);
	/* senza row-gap i controlli restavano a 0-30px dai bottoni su 1024-1440 x 700-768 (la riga 1fr
	   si chiude sul contenuto): ora la distanza e' garantita e la hero cresce se serve */
	row-gap: var(--cbn-hero-gap);
	width: 100%;
	max-width: var(--cbn-container-max);
	margin: 0 auto;
	/* alto ridotto su desktop basso (96 fissi mangiavano 32px a 1366x768); in fondo la safe area
	   iOS, per i controlli quando la hero arriva al bordo dello schermo */
	padding: clamp(56px, 5vw, 96px) var(--cbn-gutter) calc(var(--cbn-space-lg) + env(safe-area-inset-bottom, 0px));
}
.cbn-home-hero__copy {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
}
.cbn-home-hero__name {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: var(--cbn-space-md);
	color: var(--cbn-on-dark);
	font: 500 clamp(.875rem, 1.2vw, 1rem)/1 var(--cbn-font-label);
	letter-spacing: .16em;
	text-transform: uppercase;
}
.cbn-home-hero__name::before {
	content: "";
	width: 8px;
	height: 8px;
	background: var(--cbn-orange);
}
/* maschera: ogni riga e' un riquadro che taglia; il padding-basso (compensato dal margine)
   evita di tagliare le discendenti (la p di "professionali") */
.cbn-home-hero__line {
	display: block;
	overflow: hidden;
	padding-bottom: .12em;
	margin-bottom: -.12em;
}
.cbn-home-hero__line > span {
	display: block;
}
.cbn-home-hero__rule {
	display: block;
	width: min(240px, 50%);
	height: 3px;
	margin: var(--cbn-space-lg) 0;
	background: var(--cbn-orange);
	transform-origin: 0 50%;
}
.cbn-home-hero__lead {
	max-width: 30em;
	margin-bottom: var(--cbn-space-lg);
	/* bianco al 90%: il grigio secondario scendeva a 3,9:1 sulla parete chiara della scena 3 */
	color: color-mix(in srgb, var(--cbn-white) 90%, transparent);
}
.cbn-home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cbn-space-md);
}
/* bianco: l'arancio sparirebbe sulle foto */
.cbn-block.cbn-home-hero :focus-visible {
	outline-color: var(--cbn-on-dark);
}

/* targa: etichetta / valore in Plex Mono. Piastra quasi piena perche' sta sulla parte chiara
   della foto (testo secondario 5,6:1). Solo fatti veri: anno, sede, modalita', preventivi */
.cbn-home-hero__targa {
	grid-column: 2;
	grid-row: 1 / 3;
	align-self: end;
	justify-self: end;
	width: 21rem;
	padding: var(--cbn-space-sm) var(--cbn-space-md);
	border-left: 3px solid var(--cbn-orange);
	background: color-mix(in srgb, var(--cbn-charcoal) 92%, transparent);
	font: 500 .75rem/1.4 var(--cbn-font-label);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.cbn-home-hero__targa div {
	display: grid;
	grid-template-columns: 6.5rem 1fr;
	gap: var(--cbn-space-sm);
	padding: 10px 0;
	border-top: 1px solid var(--cbn-line-on-dark);
}
.cbn-home-hero__targa div:first-child {
	border-top: 0;
}
.cbn-home-hero__targa dt {
	color: var(--cbn-on-dark-muted);
}
.cbn-home-hero__targa dd {
	color: var(--cbn-on-dark);
}

/* controlli: nascosti finche' il JS non marca la hero .is-ready (senza JS non ruota nulla,
   quindi non servono) */
.cbn-home-hero__controls {
	grid-column: 1;
	grid-row: 2;
	align-self: end;
	display: none;
	align-items: center;
	gap: var(--cbn-space-sm);
	color: var(--cbn-on-dark);
}
.cbn-home-hero.is-ready .cbn-home-hero__controls {
	display: flex;
}
.cbn-home-hero__count {
	white-space: nowrap;
	font: 500 .75rem/1 var(--cbn-font-label);
	letter-spacing: .14em;
}
.cbn-home-hero__bars {
	display: flex;
	align-items: center;
	gap: var(--cbn-space-xs);
	min-width: 0;
}
/* il pulsante e' alto 44px (area di tocco), la barra visibile e' di 3px al centro */
.cbn-home-hero__bar {
	position: relative;
	/* 56px al massimo, ma si restringono: a 360px tre barre fisse spingevano PAUSA fuori dallo schermo */
	flex: 1 1 56px;
	min-width: 20px;
	max-width: 56px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.cbn-home-hero__bar::before,
.cbn-home-hero__bar::after {
	content: "";
	position: absolute;
	top: 20px;
	right: 0;
	left: 0;
	height: 3px;
}
.cbn-home-hero__bar::before {
	background: color-mix(in srgb, var(--cbn-white) 40%, transparent);
}
.cbn-home-hero__bar::after {
	background: var(--cbn-on-dark);
	transform: scaleX(0);
	transform-origin: 0 50%;
}
.cbn-home-hero__bar.is-active::after {
	animation: cbn-hero-progress calc(var(--cbn-hero-dwell-ms) * 1ms) linear forwards;
}
.cbn-home-hero.is-halted .cbn-home-hero__bar::after,
.cbn-home-hero.is-halted .cbn-home-hero__scene img {
	animation-play-state: paused;
}
.cbn-block .cbn-home-hero__pause {
	flex: none;
	min-width: 5.5rem;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid color-mix(in srgb, var(--cbn-white) 70%, transparent);
	background: transparent;
	color: var(--cbn-on-dark);
	font: 500 .6875rem/1 var(--cbn-font-label);
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--cbn-dur-ui), color var(--cbn-dur-ui);
}
.cbn-block .cbn-home-hero__pause:hover {
	background: var(--cbn-on-dark);
	color: var(--cbn-charcoal);
}

@keyframes cbn-hero-scene-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes cbn-hero-progress {
	to { transform: scaleX(1); }
}
@keyframes cbn-hero-line-rise {
	from { transform: translateY(105%); }
	to { transform: none; }
}
@keyframes cbn-hero-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}
@keyframes cbn-hero-draw {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}
@keyframes cbn-hero-zoom-out {
	from { transform: scale(1.09); }
	to { transform: scale(1); }
}

/* La composizione d'ingresso e lo zoom stanno SOLO qui: con "riduci movimento" le righe del
   titolo restano al loro posto (nessuno stato iniziale nascosto) e nulla si anima. */
@media (prefers-reduced-motion: no-preference) {
	.cbn-home-hero__line > span {
		transform: translateY(105%);
		animation: cbn-hero-line-rise .9s var(--cbn-ease-ui) forwards;
		animation-delay: calc(.1s + var(--cbn-step) * .1s);
	}
	.cbn-home-hero__rule {
		animation: cbn-hero-draw .9s .55s var(--cbn-ease-ui) both;
	}
	.cbn-home-hero__lead,
	.cbn-home-hero__actions {
		animation: cbn-hero-fade-up .7s .7s var(--cbn-ease-ui) both;
	}
	.cbn-home-hero__targa div {
		animation: cbn-hero-fade-up .6s calc(1.1s + var(--cbn-step) * .12s) var(--cbn-ease-ui) both;
	}
	/* zoom lento: dura permanenza + dissolvenza, cosi' non si ferma prima del cambio.
	   L'uscente resta a scala 1 (stato finale): nessun salto */
	.cbn-home-hero__scene.is-active img {
		animation: cbn-hero-zoom-out calc((var(--cbn-hero-dwell-ms) + var(--cbn-hero-swap-ms)) * 1ms) var(--cbn-ease-ui) both;
	}
}
/* WCAG 2.2.2 e 2.3.3: nessun movimento; l'autoplay parte spento nel JS e i controlli restano.
   La barra attiva e' piena (indica la scena corrente) */
@media (prefers-reduced-motion: reduce) {
	.cbn-home-hero *,
	.cbn-home-hero *::before,
	.cbn-home-hero *::after {
		transition: none !important;
		animation: none !important;
	}
	.cbn-home-hero__bar.is-active::after {
		transform: scaleX(1);
	}
}

/* mobile: la foto occupa una fascia in alto (altezza fissa: niente zoom enorme su una hero
   alta e nessun CLS), il testo sta sul velo che sfuma nel charcoal. Il testo parte a meta'
   fascia dove il velo e' gia' ~.85: contrasto verificato sulla scena piu' chiara */
@media (max-width: 900px) {
	.cbn-home-hero {
		--cbn-hero-media-height: clamp(420px, 120vw, 600px);
	}
	.cbn-home-hero__scenes {
		bottom: auto;
		height: var(--cbn-hero-media-height);
	}
	/* il gradiente verticale chiude sul charcoal pieno prima della fine della fascia: nasconde la
	   banda piatta beige in fondo alla scena 3 mobile (da ~69%) e la fascia scura sfocata della
	   scena 2 (da ~68%) */
	.cbn-home-hero__scene::after {
		background: linear-gradient(180deg,
			color-mix(in srgb, var(--cbn-charcoal) 15%, transparent) 0%,
			color-mix(in srgb, var(--cbn-charcoal) 40%, transparent) 25%,
			color-mix(in srgb, var(--cbn-charcoal) 88%, transparent) 50%,
			var(--cbn-charcoal) 100%);
	}
	.cbn-home-hero__body {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		align-content: end;
		gap: var(--cbn-hero-gap);
		padding-top: calc(var(--cbn-hero-media-height) * .5);
	}
	.cbn-home-hero__copy,
	.cbn-home-hero__controls,
	.cbn-home-hero__targa {
		grid-column: 1;
		grid-row: auto;
	}
	.cbn-home-hero__controls {
		order: 3;
	}
	.cbn-home-hero__targa {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--cbn-space-md);
		width: 100%;
		padding: var(--cbn-space-xs) var(--cbn-space-md);
	}
	.cbn-home-hero__targa div {
		grid-template-columns: 1fr;
		gap: 2px;
	}
	.cbn-home-hero__targa div:nth-child(2) {
		border-top: 0;
	}
}
/* telefoni stretti/bassi (360x640): la fascia foto di 420+ e l'attacco del testo a meta' fascia
   lasciavano ~210px di velo vuoto e il CTA sotto la piega. Fascia piu' bassa, testo che parte
   al 30%: il velo arriva al .88 al 32% (stesso contrasto di prima, scena piu' chiara compresa) e
   la targa va in fondo, dopo i controlli */
@media (max-width: 480px) {
	.cbn-home-hero {
		--cbn-hero-media-height: clamp(300px, 90vw, 420px);
	}
	.cbn-home-hero__scene::after {
		background: linear-gradient(180deg,
			color-mix(in srgb, var(--cbn-charcoal) 15%, transparent) 0%,
			color-mix(in srgb, var(--cbn-charcoal) 50%, transparent) 20%,
			color-mix(in srgb, var(--cbn-charcoal) 88%, transparent) 32%,
			var(--cbn-charcoal) 55%);
	}
	.cbn-home-hero__body {
		padding-top: calc(var(--cbn-hero-media-height) * .3);
	}
	.cbn-home-hero__targa {
		order: 4;
		padding: var(--cbn-space-xs) var(--cbn-space-sm);
	}
}
@media (max-width: 767px) {
	.cbn-block .cbn-home-hero__scene img {
		object-position: var(--cbn-scene-position-mobile, var(--cbn-scene-position, 50% 50%));
	}
	/* su mobile la fascia e' stretta: lo zoom ingrandirebbe ancora il soggetto gia' tagliato */
	.cbn-home-hero__scene.is-active img {
		animation: none;
	}
}

/* Telefono in orizzontale (667x375, 844x390): la hero a 600px minimi e la foto a fascia lasciavano
   alla prima schermata solo header + foto, con titolo e CTA sotto la piega. Qui la hero e' alta
   quanto lo schermo libero, il titolo e' calcolato sull'altezza (non sulla larghezza) e le righe
   si affiancano; padding e distanze si stringono. Portrait e desktop non cambiano. */
@media (orientation: landscape) and (max-height: 500px) {
	.cbn-home-hero {
		--cbn-hero-height: calc(100vh - var(--cbn-header-height));   /* ripiego senza svh */
		--cbn-hero-height: calc(100svh - var(--cbn-header-height));
		--cbn-hero-gap: var(--cbn-space-sm);
	}
	.cbn-home-hero__body {
		padding-top: var(--cbn-space-md);
		padding-bottom: calc(var(--cbn-space-sm) + env(safe-area-inset-bottom, 0px));
	}
	.cbn-home-hero .cbn-title-display {
		display: flex;
		flex-wrap: wrap;
		column-gap: .25em;
		font-size: clamp(1.75rem, 9vh, 3rem);
	}
	/* il nome dell'azienda occupa la sua riga, le tre righe del titolo gli stanno sotto affiancate */
	.cbn-home-hero__name {
		flex: 0 0 100%;
		margin-bottom: var(--cbn-space-sm);
	}
	.cbn-home-hero__rule {
		margin: var(--cbn-space-sm) 0;
	}
	.cbn-home-hero__lead {
		margin-bottom: var(--cbn-space-sm);
	}
}
/* fino a 900px la hero e' in colonna con la foto a fascia in alto: in orizzontale la fascia
   non c'e' piu', la foto copre l'intera hero e il velo scende da sinistra (dove sta il testo,
   stesso 88% di charcoal minimo del desktop per il contrasto). La targa e' nascosta: con il testo
   a tutta altezza non c'e' posto per le sue 4 righe, che restano nelle sezioni sotto. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
	.cbn-home-hero__scenes {
		bottom: 0;
		height: auto;
	}
	.cbn-home-hero__scene::after {
		background: linear-gradient(90deg,
			color-mix(in srgb, var(--cbn-charcoal) 95%, transparent) 0%,
			color-mix(in srgb, var(--cbn-charcoal) 88%, transparent) 65%,
			color-mix(in srgb, var(--cbn-charcoal) 40%, transparent) 100%);
	}
	.cbn-home-hero__body {
		align-content: center;
	}
	.cbn-home-hero__targa {
		display: none;
	}
}

/* ===== 2. Servizi in evidenza =====
   Tre schede di pari peso (2026-10-16: il blocco "foto grande + due testi" era sbilanciato e la
   foto, uscendo dal contenitore, tagliava la scena). Foto sopra con proporzione fissa, testo sotto. */
.cbn-home-featured {
	padding: var(--cbn-section-pad) 0;
	background: var(--cbn-paper);
	color: var(--cbn-text);
}
.cbn-home-featured__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--cbn-grid-gap) var(--cbn-card-gap);
}
.cbn-home-featured__grid > li {
	display: flex;
}
.cbn-home-featured .cbn-service-block {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-top: 0;
	border-top: 0;
}
/* .cbn-block e .cbn-home-featured stanno sulla stessa <section>: il selettore va scritto senza spazio, altrimenti non corrisponde mai */
.cbn-block.cbn-home-featured .cbn-service-block img {
	/* le tre foto vengono da scene diverse (dall'alto, in prospettiva, corridoio): stessa grading
	   morbida per farle leggere come una serie */
	filter: saturate(.8) contrast(.98);
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
/* distanza foto-testo sul tag: un margin-bottom sull'img viene azzerato da una regola del tema */
.cbn-home-featured .cbn-service-block__tag {
	margin-top: var(--cbn-space-lg);
}
/* il link in fondo alla scheda: le tre restano allineate anche con testi di lunghezza diversa */
.cbn-home-featured .cbn-service-block .cbn-link-arrow {
	align-self: flex-start;
	margin-top: auto;
}
.cbn-service-block {
	padding-top: var(--cbn-space-lg);
	border-top: 1px solid var(--cbn-charcoal);
	transition: border-color var(--cbn-dur-ui);
}
.cbn-service-block__tag {
	margin-bottom: var(--cbn-space-md);
	color: var(--cbn-orange-strong);
	font: 500 var(--cbn-size-label)/1 var(--cbn-font-label);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.cbn-service-block .cbn-title-card {
	margin-bottom: var(--cbn-space-sm);
	font-size: var(--cbn-size-h3-feature);
	line-height: 1.05;
	letter-spacing: -.035em;
}
.cbn-service-block p:not(.cbn-service-block__tag) {
	max-width: 30em;
	margin-bottom: var(--cbn-space-md);
	color: var(--cbn-text-muted);
}

/* ===== 3. Chi siamo =====
   "Chi siamo . Dal 2015": il solo numero vero dell'azienda in Plex Mono, in una riga con
   l'etichetta (2026-10-16: a 160px schiacciava titolo e testo e spingeva i valori in fondo).
   I due valori sono voci piatte con filetto arancio; la foto porta la targa "Dal 2015". */
/* Il padding verticale NON sta sulla sezione ma su .cbn-home-about__copy: la foto di destra
   deve arrivare a filo bordo (alto, basso e destra) come una tavola, mentre il testo mantiene
   il ritmo --cbn-section-pad. Il "padding 0" misurato dall'audit su questa sezione e' voluto
   (design-review 2026-10-20). */
.cbn-home-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--cbn-grid-gap);
}
.cbn-home-about__copy {
	padding: var(--cbn-section-pad) 0 var(--cbn-section-pad) var(--cbn-container-edge);
}
.cbn-home-about__year {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	/* etichetta e numero stretti: a 25px di distanza la riga si leggeva spezzata */
	gap: var(--cbn-space-xs);
	margin-bottom: var(--cbn-space-lg);
}
.cbn-home-about__year span {
	color: var(--cbn-on-dark-muted);
	font: 500 var(--cbn-size-label)/1 var(--cbn-font-label);
	letter-spacing: .14em;
	text-transform: uppercase;
}
.cbn-home-about__year b {
	color: var(--cbn-orange);
	font: 500 clamp(3rem, 5vw, 5rem)/.9 var(--cbn-font-label);
	letter-spacing: -.07em;
}
.cbn-home-about__copy .cbn-title-section {
	/* un gradino sopra il titolo di sezione: la colonna era piccola nel pannello scuro */
	font-size: clamp(2.5rem, 4.6vw, 4.25rem);
	max-width: 11em;
	margin-bottom: var(--cbn-space-lg);
}
.cbn-home-about__copy > p:not(.cbn-home-about__year) {
	max-width: 32em;
	font-size: 1.0625rem;
	color: var(--cbn-on-dark-muted);
}
.cbn-home-about__values {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--cbn-card-gap);
	max-width: 38em;
	margin-top: var(--cbn-head-gap);
}
.cbn-home-about__values div {
	padding-top: var(--cbn-space-md);
	border-top: 2px solid var(--cbn-orange);
}
.cbn-home-about__values dt {
	margin-bottom: var(--cbn-space-xs);
	font: 700 1.125rem/1.3 var(--cbn-font-display);
	letter-spacing: -.01em;
}
.cbn-home-about__values dd {
	color: var(--cbn-on-dark-muted);
	font-size: 1rem;
}
.cbn-home-about__photo {
	position: relative;
	margin: 0;
	max-width: var(--cbn-media-max);
}
/* targa come quella della hero: piastra charcoal con filo arancio */
.cbn-home-about__plate {
	position: absolute;
	bottom: var(--cbn-space-lg);
	left: 0;
	padding: var(--cbn-space-xs) var(--cbn-space-md);
	border-left: 3px solid var(--cbn-orange);
	background: color-mix(in srgb, var(--cbn-charcoal) 92%, transparent);
	color: var(--cbn-on-dark);
	font: 500 .75rem/1.4 var(--cbn-font-label);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.cbn-block .cbn-home-about__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%;
}

/* ===== 4. Tutti i servizi =====
   Una "tavola" di 8 celle: la griglia e' piu' chiara della testata (bianco 55%), al
   passaggio la cella diventa bianca con barra arancio scura. Le celle esterne si
   allineano alla colonna del contenitore. Il fondo chiaro (paper-deep) fa riposare
   l'occhio tra le sezioni 3 e 5, entrambe scure. */
.cbn-home-services {
	padding: var(--cbn-section-pad) 0;   /* in fondo come in cima: la tavola non chiude a filo con la sezione scura */
	background: var(--cbn-paper-deep);
	color: var(--cbn-charcoal);
}
.cbn-home-services__head {
	display: flex;
	margin-bottom: var(--cbn-head-gap);
}
.cbn-home-services__head .cbn-title-section {
	/* 20em: il titolo sta su 2 righe invece di 3 con meta' riga vuota a destra */
	max-width: 20em;
	margin-top: var(--cbn-space-md);
}
.cbn-home-services__grid {
	/* 2026-10-16: la tavola sta nel contenitore (prima era a tutta larghezza e a 1920 il testo della
	   prima card stava a 335px contro i 369 del titolo, con ~340px vuoti oltre la quarta colonna):
	   il bordo interno e' il gutter, che e' dove il testo allinea al titolo a ogni larghezza */
	--cbn-tile-edge: var(--cbn-gutter);
	max-width: var(--cbn-container-max);
	margin-inline: auto;
	/* La tavola era a tutta larghezza ma il testo allinea al contenitore: prima le celle 1 e 4
	   avevano padding-left/right = bordo del contenitore dentro una colonna di vw/4, e il testo
	   restava largo 195px a 1440 e 72px a 1920 contro i 280px delle celle centrali. Colonne
	   esterne allargate del bordo: la larghezza utile del testo e' uguale in tutte e quattro
	   (c = quarto di contenitore meno 1,5 padding; 6 padding totali = 2 esterni + 2x2 interni) */
	--cbn-tile-text: calc((100% - 2 * var(--cbn-tile-edge)) / 4 - 1.5 * var(--cbn-space-lg));
	display: grid;
	grid-template-columns:
		calc(var(--cbn-tile-edge) + var(--cbn-tile-text) + var(--cbn-space-lg))
		calc(var(--cbn-tile-text) + 2 * var(--cbn-space-lg))
		calc(var(--cbn-tile-text) + 2 * var(--cbn-space-lg))
		calc(var(--cbn-tile-edge) + var(--cbn-tile-text) + var(--cbn-space-lg));
	background: var(--cbn-surface-grid-on-light);
	border-top: 1px solid var(--cbn-line-on-light);
}
.cbn-home-services__tile {
	border-right: 1px solid var(--cbn-line-on-light);
	border-bottom: 1px solid var(--cbn-line-on-light);
	transition: background-color var(--cbn-dur-ui), color var(--cbn-dur-ui);
}
.cbn-home-services__tile:nth-child(4n) {
	border-right: 0;
}
/* testa della cella: numero in mono a sinistra, icona a tratto a destra (decorativi, nascosti agli
   screen reader: il nome del servizio e' gia' il titolo) */
.cbn-home-services__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--cbn-orange-strong);
}
.cbn-home-services__num {
	color: var(--cbn-text-muted);
	font: 500 var(--cbn-size-label)/1 var(--cbn-font-label);
	letter-spacing: .14em;
}
.cbn-home-services__top svg {
	width: 32px;
	height: 32px;
}
.cbn-home-services__tile a {
	display: flex;
	flex-direction: column;
	gap: var(--cbn-space-md);
	height: 100%;
	min-height: 360px;
	padding: var(--cbn-space-xl) var(--cbn-space-lg);
}
.cbn-home-services__tile:nth-child(4n+1) a {
	padding-left: var(--cbn-tile-edge);
}
.cbn-home-services__tile:nth-child(4n) a {
	padding-right: var(--cbn-tile-edge);
}
/* tavola sempre chiusa sui lati (a 1024px a 2 colonne era a filo dello schermo, senza bordo) */
.cbn-home-services__grid {
	border-inline: 1px solid var(--cbn-line-on-light);
}
.cbn-home-services__tile p {
	color: var(--cbn-text-muted);
	font-size: 1rem;
}
.cbn-home-services__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	color: var(--cbn-orange-strong);
	font: 700 .875rem/1 var(--cbn-font-display);
	transition: color var(--cbn-dur-ui);
}
.cbn-home-services__more svg {
	width: 16px;
	height: 16px;
	transition: transform var(--cbn-dur-ui) var(--cbn-ease-ui);
}
.cbn-home-services__tile:hover,
.cbn-home-services__tile:focus-within {
	background: var(--cbn-white);
	box-shadow: inset 0 4px 0 var(--cbn-orange-strong);
}
.cbn-home-services__tile:hover .cbn-title-card,
.cbn-home-services__tile:focus-within .cbn-title-card {
	text-decoration: underline;
	text-decoration-color: var(--cbn-orange-strong);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}
.cbn-home-services__tile:hover .cbn-home-services__more,
.cbn-home-services__tile:focus-within .cbn-home-services__more {
	color: var(--cbn-charcoal);
}
.cbn-home-services__tile:hover .cbn-home-services__more svg {
	transform: translateX(5px);
}
/* B7: i titoli vanno su 1 o 2 righe a seconda della colonna ("Help Desk & eTicketing" su 2,
   "Telefonia VoIP" su 1) e le descrizioni partivano a quote diverse. Con subgrid ogni cella
   occupa 3 righe della griglia (titolo, descrizione, link) e le righe sono condivise da
   tutte le celle della stessa fila: titoli e descrizioni si allineano per costruzione, a
   qualunque larghezza. Senza subgrid (browser vecchi) resta il layout flex di prima. */
@supports (grid-template-rows: subgrid) {
	.cbn-home-services__grid {
		/* l'ultima riga assorbe l'altezza minima della cella, cosi' il "Scopri" resta in basso */
		grid-auto-rows: auto auto auto 1fr;
	}
	.cbn-home-services__tile {
		display: grid;
		grid-row: span 4;
		grid-template-rows: subgrid;
	}
	.cbn-home-services__tile a {
		display: grid;
		grid-row: 1 / -1;
		grid-template-rows: subgrid;
		gap: 0;
		/* la griglia padre e' senza gap: la distanza fra titolo, testo e link sta sui margini */
	}
	.cbn-home-services__top {
		margin-bottom: var(--cbn-space-lg);
	}
	.cbn-home-services__tile .cbn-title-card {
		margin-bottom: var(--cbn-space-md);
	}
	.cbn-home-services__tile p {
		margin-bottom: var(--cbn-space-md);
	}
	.cbn-home-services__more {
		align-self: end;
	}
}
/* anello di focus nella cella (offset negativo: non esce dal bordo della griglia) */
.cbn-block .cbn-home-services__tile a:focus-visible {
	outline: 3px solid var(--cbn-orange-strong);
	outline-offset: -8px;
}
@media (max-width: 1100px) {
	.cbn-home-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.cbn-home-services__tile:nth-child(4n) {
		border-right: 1px solid var(--cbn-line-on-light);
	}
	.cbn-home-services__tile:nth-child(2n) {
		border-right: 0;
	}
	.cbn-home-services__tile a,
	.cbn-home-services__tile:nth-child(4n+1) a,
	.cbn-home-services__tile:nth-child(4n) a {
		min-height: 0;
		padding: var(--cbn-space-lg) var(--cbn-gutter);
	}
}
@media (max-width: 640px) {
	.cbn-home-services__grid {
		grid-template-columns: 1fr;
	}
	.cbn-home-services__tile {
		border-right: 0 !important; /* batte le due regole nth-child sopra, piu' specifiche */
	}
}

/* ===== 5. Perche' CBN =====
   Foto a sbalzo a sinistra, quattro motivi come schede rialzate. Nessuna numerazione:
   i motivi non hanno un ordine; la tacca arancio sul filetto e' solo un attacco visivo. */
.cbn-home-why__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--cbn-grid-gap);
}
.cbn-home-why__photo {
	min-height: 640px;
	margin: 0;
	max-width: var(--cbn-media-max);
	justify-self: end;   /* oltre il tetto la foto resta contro il testo, il bleed a sinistra non cambia */
}
.cbn-block .cbn-home-why__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}
.cbn-home-why__copy {
	/* centrata nella riga: a 1920 la foto (928px) e' piu' alta del testo e il blocco restava in alto */
	align-self: center;
	padding: var(--cbn-section-pad) var(--cbn-container-edge) var(--cbn-section-pad) 0;
}
.cbn-home-why__copy .cbn-title-section {
	max-width: 9em;
	margin-bottom: var(--cbn-head-gap);
}
.cbn-home-why__list {
	border-bottom: 1px solid var(--cbn-line-on-dark);
}
/* righe a tabella (2026-10-16, come l'elenco Area servita e la tavola Servizi): titolo a
   sinistra, testo a destra; le card 2x2 erano pesanti e a 768 le righe superavano i 90 caratteri */
.cbn-home-why__item {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: var(--cbn-space-xs) var(--cbn-grid-gap);
	align-items: baseline;
	padding: var(--cbn-space-md) 0;
	border-top: 1px solid var(--cbn-line-on-dark);
	transition: background-color var(--cbn-dur-ui);
}
.cbn-home-why__item:hover {
	background: var(--cbn-surface-raised);
}
.cbn-home-why__item::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: 48px;
	height: 3px;
	background: var(--cbn-orange);
	transition: width var(--cbn-dur-ui) var(--cbn-ease-ui);
}
.cbn-home-why__item:hover::before {
	width: 100%;
}
.cbn-home-why__item .cbn-title-card {
	font-size: 1.375rem;
}
.cbn-home-why__item p {
	color: var(--cbn-on-dark-muted);
	font-size: 1rem;
}

/* ===== 6. Come funziona =====
   Quattro passi con linea e nodi: i numeri sono ammessi perche' l'ordine e' vero. */
.cbn-home-steps {
	padding: var(--cbn-section-pad) 0;
	background: var(--cbn-paper-deep);
	color: var(--cbn-text);
}
.cbn-home-steps > .cbn-container {
	position: relative;
}
.cbn-home-steps .cbn-title-section {
	max-width: 10em;
	margin-bottom: var(--cbn-head-gap);
}
.cbn-home-steps__list {
	/* il gap serve anche al calcolo della linea: una sola definizione */
	--cbn-steps-gap: var(--cbn-card-gap);
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--cbn-steps-gap);
	padding-top: var(--cbn-space-lg);
}
.cbn-home-steps__list::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 0;
	/* la linea corre fino al bordo del contenitore, oltre l'ultimo nodo: fermarla sul nodo la
	   lasciava a un quarto di colonna dal bordo e sembrava interrotta */
	right: 0;
	height: 2px;
	background: var(--cbn-charcoal);
}
.cbn-home-steps__step {
	position: relative;
}
.cbn-home-steps__step::before {
	content: "";
	position: absolute;
	top: calc(var(--cbn-space-lg) * -1 + 3px);
	left: 0;
	width: 16px;
	height: 16px;
	background: var(--cbn-orange-strong);
}
.cbn-home-steps__num {
	display: block;
	margin-bottom: var(--cbn-space-md);
	color: var(--cbn-charcoal);
	font: 500 clamp(3rem, 4.5vw, 4rem)/.9 var(--cbn-font-label);
	letter-spacing: -.07em;
}
.cbn-home-steps__cta {
	margin-top: var(--cbn-head-gap);
}
.cbn-home-steps__step .cbn-title-card {
	margin-bottom: var(--cbn-space-xs);
}
.cbn-home-steps__step p {
	max-width: 20em;
	color: var(--cbn-text-muted);
	font-size: 1rem;
}

/* ===== 7. Area servita =====
   Le citta' come righe di una tabella: la sede (Parabiago) e' in arancio ed e' il dato
   vero della sezione. Arancio ammesso qui perche' il testo e' >= 24px/800 (4,25:1 >= 3:1). */
.cbn-home-area {
	padding: var(--cbn-section-pad) 0;
}
.cbn-home-area__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--cbn-grid-gap);
	align-items: center;
}
.cbn-home-area__copy {
	padding-left: var(--cbn-container-edge);
}
.cbn-home-area__copy .cbn-title-section {
	margin-bottom: var(--cbn-space-md);
}
.cbn-home-area__copy > p {
	max-width: 30em;
	color: var(--cbn-on-dark-muted);
}
.cbn-home-area__towns {
	margin-top: var(--cbn-head-gap);
	border-bottom: 1px solid var(--cbn-line-on-dark);
	font: 800 var(--cbn-size-h3-list)/1.1 var(--cbn-font-display);
	letter-spacing: -.03em;
}
.cbn-home-area__towns li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: var(--cbn-space-sm) var(--cbn-space-lg) var(--cbn-space-sm) 0;
	border-top: 1px solid var(--cbn-line-on-dark);
	transition: background-color var(--cbn-dur-ui);
}
.cbn-home-area__towns li:hover {
	background: var(--cbn-surface-raised);
}
.cbn-home-area__towns li:first-child {
	color: var(--cbn-orange);
}
.cbn-home-area__towns li:first-child::after {
	content: "Sede";
	color: var(--cbn-on-dark);
	font: 500 var(--cbn-size-label)/1 var(--cbn-font-label);
	letter-spacing: .14em;
	text-transform: uppercase;
}
/* Mappa scura senza testo (2026-10-16: le etichette disegnate dall'AI erano sempre sbagliate).
   Il box e' vincolato alla proporzione 1200:896 dell'immagine: left/top in % (style inline,
   dipendono dall'immagine) restano sui centri abitati a ogni larghezza. Se la mappa viene
   sostituita vanno riposizionati. I punti non portano il nome: la mappa e' schematica e non in
   scala, i comuni sono nell'elenco accanto. Le misure sono in cqw (larghezza della mappa),
   quindi scalano insieme all'immagine. */
.cbn-home-area__map {
	position: relative;
	container-type: inline-size;
	aspect-ratio: 1200 / 896;
}
.cbn-block .cbn-home-area__map img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* a fianco del testo il bordo sinistro dell'immagine era un taglio netto sul fondo scuro */
@media (min-width: 901px) {
	.cbn-block .cbn-home-area__map img {
		mask-image: linear-gradient(90deg, transparent 0, #000 14%);
	}
}
.cbn-home-area__pin {
	position: absolute;
	z-index: 1;   /* l'immagine con mask-image crea un contesto di sovrapposizione e coprirebbe i punti */
	display: block;
	width: clamp(10px, 2.2cqw, 20px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--cbn-orange);
	box-shadow: 0 0 0 .4cqw var(--cbn-charcoal), 0 0 0 .7cqw var(--cbn-orange);
	transform: translate(-50%, -50%);
}

/* il punto della sede e' piu' grande: lega la mappa all'etichetta "Sede" dell'elenco */
.cbn-home-area__pin--sede {
	width: clamp(14px, 3.2cqw, 28px);
}

/* ===== 8. CTA finale =====
   L'unico blocco arancio pieno (#C42E00, bianco 5,62:1). */
.cbn-home-cta {
	position: relative;
	padding: calc(var(--cbn-section-pad) * .75) 0;
	background: var(--cbn-orange-strong);
	color: var(--cbn-white);
	--cbn-btn-lift: var(--cbn-white);
}
.cbn-home-cta > .cbn-container {
	position: relative;
}
.cbn-home-cta__title {
	max-width: 12em;
	/* 5rem al massimo (era 8rem su 4 righe, poi 6rem su 3): colonna piu' larga e corpo minore, il
	   titolo sta su 2 righe da 1024px */
	font: 800 var(--cbn-size-h2-emphasis)/.95 var(--cbn-font-display);
	letter-spacing: var(--cbn-tracking-display);
	text-wrap: balance;
}
/* sotto 1024px titolo e riga in colonna; da 1024px titolo a sinistra, testo e bottone a destra
   allineati in basso al titolo */
.cbn-home-cta__row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cbn-space-md);
	margin-top: var(--cbn-head-gap);
	padding-top: var(--cbn-space-lg);
	border-top: 1px solid rgba(255, 255, 255, .35);
}
@media (min-width: 1024px) {
	.cbn-home-cta > .cbn-container {
		display: grid;
		grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
		gap: var(--cbn-grid-gap);
		align-items: end;
	}
	.cbn-home-cta__row {
		margin-top: 0;
	}
}
/* sotto 600px la colonna di testo e' larga quanto lo schermo: la trama inizia a sfumare piu' tardi,
   cosi' una linea verticale non sfiora il titolo */
@media (max-width: 600px) {
	.cbn-home-cta::before {
		-webkit-mask-image: linear-gradient(90deg, transparent 45%, #000 90%);
		mask-image: linear-gradient(90deg, transparent 45%, #000 90%);
	}
}
/* parallax: la trama resta ferma mentre la sezione scorre. Solo da 1024px (iOS ignora `fixed`) e
   solo se l'utente non ha chiesto meno movimento; sotto resta una trama statica */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.cbn-home-cta::before {
		background-attachment: fixed;
	}
}
.cbn-home-cta__row p {
	max-width: 26em;
	color: var(--cbn-white);
	/* righe di lunghezza simile: evita che un nome con "&" ("Sicurezza & VPN", "Hardware & Software")
	   vada a capo subito dopo la "&" lasciando la parola successiva a inizio riga */
	text-wrap: balance;
}
.cbn-block.cbn-home-cta :focus-visible {
	outline-color: var(--cbn-white);
}

/* In evidenza: 2 colonne fino a 1100px (la terza scheda occupa la riga intera, foto piu' bassa),
   1 colonna sotto 640px */
@media (max-width: 1100px) {
	.cbn-home-featured__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.cbn-home-featured__grid > li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
	.cbn-block .cbn-home-featured__grid > li:last-child:nth-child(odd) img {
		/* 5/2 e non 2/1: la terza scheda e' larga il doppio, a 2/1 la foto era alta quanto
		   le due quadrate sopra messe insieme per area; cosi' resta una fascia panoramica */
		aspect-ratio: 5 / 2;
	}
}
@media (max-width: 640px) {
	.cbn-home-featured__grid {
		grid-template-columns: 1fr;
	}
	.cbn-block .cbn-home-featured__grid > li:last-child:nth-child(odd) img {
		aspect-ratio: 1 / 1;
	}
}

/* ===== Mobile ===== */
@media (max-width: 900px) {
	.cbn-home-about__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.cbn-home-about__copy {
		padding: var(--cbn-section-pad) var(--cbn-gutter);
	}
	/* a tutta larghezza (fino a 900px) l'altezza fissa di 340px dava 1.06-2.4 di rapporto: da
	   quasi quadrata a striscia panoramica su una foto 4:5 */
	.cbn-home-about__photo {
		max-width: none;
		aspect-ratio: var(--cbn-media-ratio-stack);
	}
	.cbn-home-why__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.cbn-home-why__photo {
		min-height: 0;
		max-width: none;
		aspect-ratio: var(--cbn-media-ratio-stack);
	}
	.cbn-home-why__copy {
		padding: var(--cbn-section-pad) var(--cbn-gutter);
	}
	.cbn-home-why__copy {
		align-self: auto;
	}
	.cbn-home-steps__list {
		grid-template-columns: 1fr;
		--cbn-steps-gap: var(--cbn-grid-gap);
		padding: 0 0 0 var(--cbn-space-xl);
	}
	.cbn-home-steps__list::before {
		top: 0;
		bottom: 0;
		left: 7px;
		right: auto;
		width: 2px;
		height: auto;
	}
	.cbn-home-steps__step::before {
		top: 8px;
		left: calc(var(--cbn-space-xl) * -1);
	}
	.cbn-home-steps__num {
		font-size: 3rem;
	}
	.cbn-home-area__grid {
		grid-template-columns: 1fr;
	}
	.cbn-home-area__copy {
		padding: 0 var(--cbn-gutter);
	}
}

/* Quattro fasi in colonna ~230px a 768 lasciavano mezza sezione vuota e "Piano personalizzato"
   andava a capo a 1024: da 601 a 1100 stanno in 2x2, senza linea (i nodi restano) */
@media (min-width: 601px) and (max-width: 1100px) {
	.cbn-home-steps__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		--cbn-steps-gap: var(--cbn-grid-gap);
		padding: 0;
		row-gap: var(--cbn-head-gap);
	}
	.cbn-home-steps__list::before {
		display: none;
	}
	/* il quadratino sta dentro il passo (non nello spazio sopra): sulla seconda riga finiva a ~10px
	   dalle descrizioni della prima e a 768 sfiorava il titolo */
	.cbn-home-steps__step {
		padding-top: var(--cbn-space-lg);
	}
	.cbn-home-steps__step::before {
		top: 0;
		left: 0;
	}
}

/* Come funziona: le 6 linee di fondo della sezione passavano dietro le descrizioni e, a 1440, sul
   titolo. Qui si spegne la griglia della sezione e le linee stanno nella lista dei passi (partono
   sotto la testata), agganciate alle colonne e nello spazio tra l'una e l'altra; nessuna linea
   sul bordo sinistro, che attraversava il testo della prima colonna */
.cbn-home-steps::before {
	display: none;
}
@media (min-width: 601px) {
	.cbn-home-steps__list::after {
		content: "";
		position: absolute;
		inset: 0;
		background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--cbn-grid-line) calc(25% - 1px) 25%);
		pointer-events: none;
	}
}
@media (min-width: 601px) and (max-width: 1100px) {
	.cbn-home-steps__list::after {
		background: repeating-linear-gradient(90deg, transparent 0 calc(50% - 1px), var(--cbn-grid-line) calc(50% - 1px) 50%);
	}
}

/* con la foto a fianco (901-1340px) la colonna del testo e' stretta: i titoli andavano a capo e le
   righe avevano altezze diverse. Titolo sopra il testo, come sotto i 640px */
@media (min-width: 901px) and (max-width: 1340px) {
	.cbn-home-why__item {
		grid-template-columns: 1fr;
	}
}

/* sotto 640px i valori di Chi siamo e le righe di Perche' CBN vanno in colonna */
@media (max-width: 640px) {
	.cbn-home-about__values {
		grid-template-columns: 1fr;
	}
	.cbn-home-why__item {
		grid-template-columns: 1fr;
	}
}

/* ===== Elementor: le 8 sezioni sono widget HTML dentro sezioni Elementor =====
   Il body della Home e' la pagina Elementor 1392 (8 sezioni, un widget HTML ciascuna). Ogni
   sezione porta il proprio sfondo e padding, quindi vanno azzerati contenitore boxed
   (1140px), gutter di colonna e spazio tra widget (20px) che Elementor aggiunge: altrimenti
   fasce vuote tra una sezione e l'altra e nessun bleed a tutta larghezza. Scope: classe
   cbn-sections-page sul body (functions.php: Home e pagine con banner proprio), cosi' le altre pagine Elementor
   restano intatte. !important dove style.css o il CSS del post danno padding con !important
   o a specificità 0,4,0. */
.cbn-sections-page .elementor-section.elementor-top-section {
	margin: 0;
	padding: 0 !important;
}
.cbn-sections-page .elementor-section.elementor-top-section > .elementor-container {
	max-width: none;
	padding: 0;
}
.cbn-sections-page .elementor-top-section .elementor-column > .elementor-element-populated {
	padding: 0 !important;
}
.cbn-sections-page .elementor-top-section .elementor-widget {
	margin: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	.cbn-home-services__tile:hover .cbn-home-services__more svg,
	.cbn-link-arrow:hover svg {
		transform: none;
	}
}