/**
 * Services Page — Pattern condivisi
 *
 * Caricato condizionalmente sui 6 template page-servizi-*.php
 * Dipende da: bg-custom-style, bg-variables, bg-buttons-css, bg-card-css,
 *             bg-inputs-css (per le classi .bg-field, .bg-input riusate dal form).
 *
 * Sezioni:
 *   §0  Service Hero (HERO.md v1.2.8 — bottom-aligned bandiera-sinistra)
 *   §0b Section link (EYEBROW.md — back-nav "Servizi")
 *   §1  Container & rhythm
 *   §2  Intro (titolo XL + sottotitolo) — DEPRECATA (rimossa dai template)
 *   §3  Section (H2 + paragrafo)
 *   §3b Row (split testo+immagine 2-col alternato)
 *   §4  Gallery (1 col / 2 col)
 *   §5  Pricing (cards)
 *   §6  Booking (form override locale)
 *   §7  Includes (3-col "Cosa è incluso nei pacchetti")
 *   §8  Disclaimer
 *
 * @package Astra Child
 */

/* ============================================================
   §0 Service Hero — HERO.md v1.2.8 § Variante Servizio
   Bottom-aligned bandiera-sinistra: section-link + title + lead + CTA.
   Altezza ridotta rispetto a .bg-page-hero (servizio = capitolo operativo,
   non parola-ancora).
   ============================================================ */

.bg-service-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 100vh;
	/* Ritmo verticale allineato alla hero della home (.bg-epica .hero__content,
	   home-epica.css §HERO): stesso padding-top e stesso padding-bottom, così il
	   blocco titolo+lead si ferma alla stessa altezza sulle due pagine.
	   --hero-pad-section replica il --pad-section locale della home
	   (clamp(60px,8vw,100px)), diverso da quello globale di variables.css. */
	--hero-pad-section: clamp(60px, 8vw, 100px);
	padding: calc(var(--hero-pad-section) * 0.9) clamp(1.5rem, 5vw, 4rem)
		calc(var(--hero-pad-section) * 1.2 + clamp(2rem, 5vh, 3rem));
	margin-top: -85px; /* compensa #masthead sticky in flow, allineato a HEADER.md */
	/* Full-bleed orizzontale: esce dall'.ast-container max-width 1240px */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: #000;
	background-repeat: no-repeat;
	color: var(--text, #f0f0f0);
	overflow: hidden;
}

/* Copertina: punto focale e zoom per dispositivo, dal metabox "Punto focale
   della copertina" (inc/focus-point.php). Stesso impianto di .bg-page-hero in
   hero.css — l'immagine sta su questo strato e non sull'elemento, perché lo
   zoom è un `transform` e trasformare il hero muoverebbe anche il testo.
   Lo strato sta sotto l'overlay (`::after`) e sotto i figli, che hanno già
   `position: relative; z-index: 1` poco più avanti.

   Qui il telefono conta parecchio: il testo del servizio è ancorato in basso a
   sinistra e sullo schermo stretto la colonna si restringe, così il soggetto
   va quasi sempre rialzato. */
.bg-service-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--hero-img);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: var(--hero-focal, center);
	transform: scale(var(--hero-zoom, 1));
	transform-origin: var(--hero-focal, center);
}

/* Rami paralleli: i due tablet ricadono entrambi sul desktop, il telefono segue
   il tablet verticale. L'ordine conta — un telefono in verticale rientra anche
   nella query del tablet verticale, e vince l'ultima scritta. */
@media (max-width: 1366px) and (orientation: landscape) {
	.bg-service-hero::before {
		background-position: var(--hero-focal-tl, var(--hero-focal, center));
		transform: scale(var(--hero-zoom-tl, var(--hero-zoom, 1)));
		transform-origin: var(--hero-focal-tl, var(--hero-focal, center));
	}
}

@media (max-width: 1024px) and (orientation: portrait) {
	.bg-service-hero::before {
		background-position: var(--hero-focal-tp, var(--hero-focal, center));
		transform: scale(var(--hero-zoom-tp, var(--hero-zoom, 1)));
		transform-origin: var(--hero-focal-tp, var(--hero-focal, center));
	}
}

@media (max-width: 767px) {
	.bg-service-hero::before {
		background-position: var(--hero-focal-m, var(--hero-focal-tp, var(--hero-focal, center)));
		transform: scale(var(--hero-zoom-m, var(--hero-zoom-tp, var(--hero-zoom, 1))));
		transform-origin: var(--hero-focal-m, var(--hero-focal-tp, var(--hero-focal, center)));
	}
}

@supports (min-height: 100svh) {
	.bg-service-hero { min-height: 100svh; }
}

body.admin-bar .bg-service-hero { margin-top: -117px; }

.bg-service-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.38);
	pointer-events: none;
}

.bg-service-hero > * {
	position: relative;
	z-index: 1;
	max-width: 720px;
}

/* Scroll-cue: ripristina il default canonico di hero-scroll-cue.css
   (position: absolute; bottom: clamp(20px, 3vw, 40px); left: 50%).
   Necessario perché `.bg-service-hero > *` sopra impone `position: relative`
   a tutti i figli del hero, sovrascrivendo l'absolute originale. */
.bg-service-hero .bg-hero-scroll-cue {
	position: absolute;
	top: auto;
	bottom: clamp(20px, 3vw, 40px);
	left: 50%;
	transform: translateX(-50%);
	max-width: none;
}

/* Servizi = registro operativo: Manrope sui titoli (non Lora).
   Lora resta solo sul lead italic (voce autoriale).
   Scala e ritmo presi dalla hero della home (.bg-epica .hero-title / .body-lead):
   stesso font-size, line-height, letter-spacing e stesso stacco titolo→lead.
   Cambia solo la famiglia, che resta Manrope per registro (HERO.md § Servizio). */
.bg-service-hero__title {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-weight: 600;
	font-style: normal;
	font-size: clamp(2.6rem, 5.8vw, 5rem);
	line-height: 1.08;
	letter-spacing: var(--track-hero, -0.02em);
	margin: 0;
	color: var(--text, #f0f0f0);
	text-wrap: balance;
}

.bg-service-hero__lead {
	font-family: var(--f-serif, 'Lora', serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	line-height: 1.65;
	letter-spacing: var(--track-normal, -0.01em);
	/* stacco titolo→lead = gap del .hero__content della home */
	margin: clamp(1rem, 2vh, 1.5rem) 0 0;
	color: var(--text, #f0f0f0);
	max-width: 56ch;
}

.bg-service-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

@media (max-width: 600px) {
	.bg-service-hero {
		padding-inline: 1.25rem;
	}
	.bg-service-hero__cta { gap: 0.75rem; }
}

/* ============================================================
   §0b Section link — EYEBROW.md v1.0
   Eyebrow link uppercase Manrope 600, back-navigation a /servizi.
   Sostituisce .bg-page-hero__eyebrow statico (deprecato per servizi).
   ============================================================ */

.bg-section-link {
	display: inline-block;
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-3, rgba(240,240,240,0.6));
	text-decoration: none;
	border: 0;
	padding: 0;
	margin-bottom: 0.5em; /* --rhythm-xs, label-quasi-attaccata al titolo */
	transition: color var(--dur-s) var(--ease-out);
}

.bg-section-link:hover,
.bg-section-link:focus-visible {
	color: var(--text, #f0f0f0);
}

.bg-section-link:focus-visible {
	outline: 2px solid var(--accent, #f0f0f0);
	outline-offset: 3px;
}

/* ============================================================
   §1 Container & rhythm
   ============================================================ */

.bg-page-services-content {
	background: var(--bg, #0a0a0a);
	color: var(--text, #f0f0f0);
	padding: 0;
}

.bg-page-services-content > * + * {
	margin-top: clamp(5rem, 8vw, 8rem);
}

/* Container testuali: 720px per riga ottimale (~55ch a 17px).
   Container gallery/pricing: 1280px per respiro orizzontale.
   Container form: 640px per densità percepita. */

.bg-service-section__inner,
.bg-service-intro__inner {
	max-width: 720px;
	margin: 0 auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.bg-service-gallery__inner,
.bg-service-pricing__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.bg-service-booking__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* ============================================================
   §2 Intro (titolo XL + sottotitolo sotto l'hero)
   ============================================================ */

.bg-service-intro {
	padding-block: clamp(3rem, 7vw, 5.5rem);
	text-align: center;
}

/* Intro — usata solo come lead dopo l'hero. Non duplica il titolo hero.
   Italic riservato qui (e all'hero) come marcatori di "voce" della pagina. */

.bg-service-intro__title {
	font-family: var(--f-serif, 'Lora', serif);
	font-weight: 500;
	font-style: italic;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	line-height: 1.15;
	letter-spacing: 0;
	margin: 0 0 1rem;
	color: var(--text, #f0f0f0);
}

.bg-service-intro__subtitle {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-weight: 400;
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.5;
	letter-spacing: 0.005em;
	max-width: 42ch;
	margin: 0 auto;
	color: var(--text-2, rgba(240,240,240,0.78));
}

/* ============================================================
   §3 Section (H2 + paragrafo descrittivo)
   ============================================================ */

.bg-service-section {
	padding-block: clamp(2rem, 4vw, 3.5rem);
}

/* H2 sezioni — Manrope (registro operativo dei servizi). */

.bg-service-section__title {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-weight: 600;
	font-style: normal;
	font-size: clamp(1.65rem, 3vw, 2.125rem);
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin: 0 0 1.25rem;
	color: var(--text, #f0f0f0);
	max-width: 28ch;
}

/* Eyebrow di sezione — coerente con pagina bio (.eyebrow): track-wider 0.18em,
   rhythm-xs 0.5em (em-scoped sul font 0.68rem → ~5.4px, molto compatto). */
.bg-service-section__eyebrow {
	display: block;
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 0.68rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: var(--track-wider, 0.18em);
	text-transform: uppercase;
	color: var(--text-3, rgba(242,242,242,0.35));
	margin: 0 0 var(--rhythm-xs, 0.5em);
}

.bg-service-section__title--center {
	margin-inline: auto;
	text-align: center;
}

.bg-service-section__text {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: clamp(1rem, 1.3vw, 1.0625rem);
	line-height: 1.65;
	color: var(--text-2, rgba(242,242,242,0.5));
	max-width: 58ch;
	margin: 0;
}

.bg-service-section__text + .bg-service-section__text {
	margin-top: 1rem;
}

/* Strong eredita il colore dal paragrafo (coerente con bio):
   il grassetto distingue per peso, non per intensità di colore. */
.bg-service-section__text strong {
	color: inherit;
	font-weight: 600;
	letter-spacing: inherit;
}

.bg-service-section__text ul,
.bg-service-section__text ol {
	margin: 0.75rem 0 0;
	padding-left: 1.25rem;
}

.bg-service-section__text li + li {
	margin-top: 0.4rem;
}

/* ============================================================
   §3b Row — Split testo+immagine 2-col alternato
   Pattern editoriale: testo (≤520px) + immagine 4:3.
   Default: testo a sinistra, immagine a destra.
   Modificatore .bg-service-row--flip: inverte (immagine sx, testo dx).
   Mobile: stacked, immagine sopra il testo.
   ============================================================ */

.bg-service-row {
	padding-block: clamp(2rem, 4vw, 3.5rem);
}

.bg-service-row__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	grid-template-columns: 1fr;
	align-items: stretch; /* base colonna testo allineata alla base dell'immagine (desktop) */
}

@media (min-width: 769px) {
	.bg-service-row__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	/* Modificatore: immagine più grande (40% testo, 60% immagine).
	   Applicato alle sezioni intro dove l'immagine è il soggetto. */
	.bg-service-row--wide-media .bg-service-row__inner {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}
}

.bg-service-row__text {
	display: flex;
	flex-direction: column;
	justify-content: flex-end; /* testo ancorato alla base — coerente con base immagine */
	gap: 1rem;
	max-width: 56ch;
}

.bg-service-row__text .bg-service-section__title {
	max-width: none;
	margin-bottom: 0.5rem;
}

.bg-service-row__text p {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: clamp(1rem, 1.3vw, 1.0625rem);
	line-height: 1.65;
	color: var(--text-2, rgba(242,242,242,0.5));
	margin: 0;
}

/* Strong eredita colore dal paragrafo (coerente con bio). */
.bg-service-row__text p strong,
.bg-service-row__text ul strong {
	color: inherit;
	font-weight: 600;
	letter-spacing: inherit;
}

.bg-service-row__text ul {
	margin: 0;
	padding-left: 1.25rem;
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: clamp(1rem, 1.3vw, 1.0625rem);
	line-height: 1.65;
	color: var(--text-2, rgba(242,242,242,0.5));
}

.bg-service-row__text ul li + li {
	margin-top: 0.4rem;
}

.bg-service-row__media {
	margin: 0;
	background: #000;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-img, 5px);
}

/* Desktop: allineamento alla BASE — testo e immagine condividono il bordo inferiore.
   Il precedente margin-top: 2.85rem (allineamento al CAP TOP del titolo) non serve
   più ed è stato rimosso. */

.bg-service-row__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Flip: immagine a sinistra, testo a destra (desktop) */
@media (min-width: 769px) {
	.bg-service-row--flip .bg-service-row__inner {
		direction: rtl;
	}
	.bg-service-row--flip .bg-service-row__inner > * {
		direction: ltr;
	}
}

/* Mobile: garantisce ordine immagine→testo (più editoriale, foto come kicker) */
@media (max-width: 768px) {
	.bg-service-row__media { order: -1; }
}

/* ============================================================
   §4 Gallery (1 col / 2 col)
   ============================================================ */

.bg-service-gallery {
	padding-block: clamp(1rem, 2vw, 1.5rem);
}

.bg-service-gallery__grid {
	display: grid;
	gap: clamp(0.75rem, 1.4vw, 1.25rem);
}

.bg-service-gallery__grid.is-1-col {
	grid-template-columns: 1fr;
}

.bg-service-gallery__grid.is-2-col {
	grid-template-columns: 1fr;
}

@media (min-width: 769px) {
	.bg-service-gallery__grid.is-2-col {
		grid-template-columns: 1fr 1fr;
	}
}

.bg-service-gallery__item {
	margin: 0;
	background: #000;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	border-radius: var(--radius-img, 5px);
}

.bg-service-gallery__item--portrait {
	aspect-ratio: 2 / 3;
}

.bg-service-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ============================================================
   §5 Pricing
   ============================================================ */

.bg-service-pricing {
	padding-block: clamp(3rem, 6vw, 5rem);
}

.bg-service-pricing__header {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: clamp(1rem, 1.8vw, 1.5rem);
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Desktop: header allineata alla griglia card (3 col uguali). Eyebrow, titolo e
   lead occupano tutta la riga; il body si ferma al bordo destro della card centrale
   (span 2 = "documentazione + comunicazione"), per leggibilità + ritmo visivo. */
@media (min-width: 769px) {
	.bg-service-pricing__header {
		grid-template-columns: repeat(3, 1fr);
	}
	.bg-service-pricing__header > * {
		grid-column: 1 / -1;
	}
	.bg-service-pricing__body {
		grid-column: 1 / span 2;
	}
}

.bg-service-pricing__title {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-weight: 600;
	font-style: normal;
	font-size: clamp(1.75rem, 3.2vw, 2.25rem);
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin: 0 0 0.25rem;
	color: var(--text, #f0f0f0);
}

.bg-service-pricing__lead {
	font-family: var(--f-serif, 'Lora', serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--text, #f0f0f0);
	max-width: 56ch;
	margin: 0;
}

/* Body della header pricing — testo corpo Manrope sans, discreto.
   Coerente con i paragrafi delle row §1-3 (.bg-service-row__text p).
   Si estende per tutta la larghezza della sezione (no max-width). */
.bg-service-pricing__body {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: clamp(1rem, 1.3vw, 1.0625rem);
	line-height: 1.65;
	color: var(--text-2, rgba(242,242,242,0.5));
	margin: 1rem 0 0 0;
}

.bg-service-pricing__body strong {
	color: var(--text, #f0f0f0);
	font-weight: 600;
}

.bg-service-pricing__grid {
	display: grid;
	gap: clamp(1rem, 1.8vw, 1.5rem);
	grid-template-columns: 1fr;
}

@media (min-width: 769px) {
	.bg-service-pricing__grid.is-2-cols { grid-template-columns: repeat(2, 1fr); }
	.bg-service-pricing__grid.is-3-cols { grid-template-columns: repeat(3, 1fr); }
}

/* Allineamento orizzontale tra card: le card condividono le righe della griglia madre
   (subgrid), così eyebrow, titolo e corpo partono alla stessa altezza anche quando un
   titolo va a capo su 2 righe e un altro no. L'ultima riga è 1fr → la frase di chiusura
   resta ancorata in basso (margin-top:auto dentro __body). */
@media (min-width: 769px) {
	@supports (grid-template-rows: subgrid) {
		/* Card senza immagine: eyebrow · titolo · corpo */
		.bg-service-pricing__grid:not(:has(.bg-service-plan__media)) { grid-template-rows: auto auto 1fr; }
		.bg-service-pricing__grid:not(:has(.bg-service-plan__media)) .bg-service-plan { grid-row: span 3; }

		/* Card con immagine: media · eyebrow · titolo · corpo */
		.bg-service-pricing__grid:has(.bg-service-plan__media) { grid-template-rows: auto auto auto 1fr; }
		.bg-service-pricing__grid:has(.bg-service-plan__media) .bg-service-plan { grid-row: span 4; }

		/* Il container nel selettore serve a superare .bg-service-plan{display:flex}
		   dichiarata più avanti nel file (stessa specificità, vince l'ultima). */
		.bg-service-pricing__grid .bg-service-plan {
			display: grid;
			grid-template-rows: subgrid;
			/* Il subgrid eredita il gap del container: azzerato sulle righe, la spaziatura
			   interna alla card resta affidata ai margin di eyebrow/titolo come prima. */
			row-gap: 0;
		}
	}
}

/* Card pricing editoriali (versione massimo+card) — sostituisce le card listino.
   Pattern: figure 4:3 → eyebrow numerato → titolo → intro → closing (ancorata in basso). */
.bg-service-plan {
	background: transparent;
	display: flex;
	flex-direction: column;
}

.bg-service-plan__media {
	margin: 0 0 1.5rem;
	background: #1a1a1a;
	border: 1px solid rgba(240, 240, 240, 0.08);
	border-radius: 5px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bg-service-plan__media img,
.bg-service-plan__media picture,
.bg-service-plan__media picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bg-service-plan__media-placeholder {
	color: var(--text-3, rgba(240, 240, 240, 0.35));
	font-family: var(--f-serif, 'Lora', serif);
	font-style: italic;
	font-size: 0.85rem;
	text-align: center;
	padding: 1rem;
}

.bg-service-plan__index {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-3, rgba(240, 240, 240, 0.35));
	margin: 0 0 0.75rem;
}

.bg-service-plan__title {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-weight: 600;
	font-size: clamp(1.4rem, 2vw, 1.65rem);
	line-height: 1.25;
	letter-spacing: -0.015em;
	margin: 0 0 1rem;
	color: var(--text, #f0f0f0);
}

.bg-service-plan__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.bg-service-plan__body p {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: clamp(0.95rem, 1vw, 1rem);
	line-height: 1.65;
	color: var(--text-2, rgba(240, 240, 240, 0.55));
	margin: 0;
}

.bg-service-plan__body p strong {
	color: var(--text, #f0f0f0);
	font-weight: 600;
}

/* Frase finale ("È la modalità per…") ancorata in basso con stacco visibile. */
.bg-service-plan__body p:last-child {
	margin-top: auto;
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* Mobile (<769px): card impilate verticalmente.
   - Più margin sotto la media → respiro tra immagine e testo della stessa card
   - Più gap della griglia → respiro tra card consecutive (img della successiva ↔ closing della precedente) */
@media (max-width: 768px) {
	.bg-service-plan__media {
		margin-bottom: 2rem;
	}
	.bg-service-pricing__grid {
		gap: clamp(2.5rem, 6vw, 3.5rem);
	}
}

/* Note residue del pricing (es. "cosa include ogni incarico") — assorbite dentro la sezione
   pricing come blocco discreto sopra la CTA-wrap. Bandiera a sinistra, corpo discreto. */
.bg-service-pricing__notes {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	max-width: 720px;
}

.bg-service-pricing__notes p {
	font-size: clamp(0.9rem, 0.7vw + 0.75rem, 1rem);
	line-height: 1.6;
	margin: 0;
	opacity: 0.85;
}

/* CTA unica sotto la griglia (sostituisce le 3 CTA per-card).
   Centrata orizzontalmente, flex-column per impilare microcopy + bottone. */
.bg-service-pricing__cta-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: clamp(2rem, 4vw, 3rem);
}

.bg-service-pricing__cta-note {
	font-size: clamp(0.9rem, 0.6vw + 0.75rem, 0.95rem);
	line-height: 1.5;
	margin: 0 0 1rem 0;
	text-align: center;
	max-width: 480px;
	opacity: 0.85;
}

.bg-service-pricing__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

/* Plan card — superficie bianca #F0F0F0 (richiesta esplicita Brando).
   Scope-token "on-light" derivati dai token canonici TEXT (inverso di --text).
   ADVANCED si distingue solo per il badge "Miglior valore" (no bordo accent). */

.bg-service-plan {
	/* Scope-token (lasciati per eventuali pagine servizio future che usano
	   il vecchio layout listino). Box-properties (padding/border/radius) rimosse
	   2026-05-28: nuovo template editoriale non le usa più, le card sono "flottanti"
	   senza contenitore. */
	--p-text:         var(--text);
	--p-text-2:       var(--text-2);
	--p-text-3:       var(--text-3);
	--p-border:       var(--border);
	color: var(--p-text);
}

/* Highlight: bordo uniforme alle altre card (richiesta Brando 2026-05-27).
   La differenziazione è affidata al solo badge "Miglior valore". */
.bg-service-plan--highlight {
	background: transparent;
	z-index: 1;
}

/* Badge: ripristinato galleggiante sul bordo (rosso pieno), padding verticale
   ridotto per profilo più sottile (graphic-designer 2026-05-27). */
.bg-service-plan__badge {
	position: absolute;
	top: -0.65rem;
	left: 50%;
	transform: translateX(-50%);
	background: var(--accent, #E63929);
	color: var(--text, #F2F2F2);
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.22rem 0.9rem; /* era 0.4rem 0.95rem: ridotto verticale per profilo più sottile */
	border-radius: 0;
	white-space: nowrap;
	line-height: 1.2;
}

/* Head: label SX + prezzo DX in riga (richiesta esplicita Brando).
   `--p-text-2` per label (registro UI), prezzo Manrope tabular-nums. */
.bg-service-plan__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: var(--rhythm-s, 1em);
	margin-bottom: var(--rhythm-s, 1em);
	flex-wrap: wrap;
}

/* Label uppercase — nome del piano (PRO/ADVANCED/PREMIUM): peso 700 + nero
   per portarlo a vero "titolo card" (tipografo 2026-05-27). */
.bg-service-plan__label {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: var(--track-wide, 0.14em);
	text-transform: uppercase;
	color: var(--p-text-2); /* era --p-text: label registro UI secondario, cede primato al lead */
	margin: 0;
}

/* Prezzo — h3 operativo: Manrope 600 / 1.1rem / --track-tight, tabular-nums.
   Più piccolo del precedente (era clamp 1.875-2.375rem), allineato a destra. */
.bg-service-plan__price {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-weight: 500;
	font-style: normal;
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--track-tight, -0.015em);
	line-height: 1.2;
	margin: 0;
	color: var(--p-text-2);
	white-space: nowrap;
	text-align: right;
}

/* Subtitle — h3 operativo Manrope 500 / 1rem / --track-normal.
   flex-basis 100% per wrap su nuova riga sotto label+prezzo. */
.bg-service-plan__subtitle {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-weight: 600; /* era 700: cessa di gridare, resta nero pieno (cross-review tipografo) */
	font-style: normal;
	font-size: 1rem;
	line-height: 1.3;
	letter-spacing: var(--track-normal, -0.01em);
	margin: var(--rhythm-xs, 0.5em) 0 0;
	color: var(--p-text);
	flex-basis: 100%;
	/* min-height rimosso 2026-05-27: il vuoto della riga riservata era
	   percepito come spazio eccessivo tra titolo e lead. L'allineamento
	   dell'audience tra card si perde quando i subtitle differiscono in righe. */
}

/* Audience — voce narrativa in Lora italic per staccare la descrizione
   "a chi è rivolto" dai dati tecnici sottostanti (tipografo 2026-05-27). */
.bg-service-plan__audience {
	font-family: var(--f-sans, 'Manrope', sans-serif); /* era Lora italic: portato in Manrope per coerenza UI */
	font-style: normal;
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: var(--track-body, 0);
	color: var(--p-text-2); /* lead in grigio (richiesta Brando 2026-05-27) */
	margin: 0.25em 0 0; /* era --rhythm-xs (0.5em): ridotto per attaccare il lead Lora al titolo */
	flex-basis: 100%;
	min-height: 4.65em; /* riserva 3 righe (line-height 1.55 × 3) per allineare l'inizio
	                       del body "Cosa comprende" tra le card (graphic-designer 2026-05-27) */
}

/* .bg-service-plan__body — regola sovrascritta dal nuovo blocco editoriale sopra
   (riga ~594). Lasciata commentata per riferimento storico. */

.bg-service-plan__includes-label {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 0.7rem;
	font-weight: 800; /* era 600: peso aumentato per dare presenza al divisore di sezione */
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--p-text);
	margin: 0 0 var(--rhythm-s, 1em);
}

/* Features list — body 0.9375rem / 400 / --track-body (FONT_STACK). */
.bg-service-plan__features {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--rhythm-m, 1.6em); /* respiro tra ultimo li e divider del CTA */
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: var(--track-body, 0);
	color: var(--p-text-2);
}

.bg-service-plan__features li {
	position: relative;
	padding-left: 1.25rem;
	list-style-type: none; /* difensivo: evita marker nativo residuo dal parent (Astra) */
}

.bg-service-plan__features li::marker {
	content: ''; /* neutralizza ::marker su browser che lo riapplicano comunque */
}

/* Bullet: cerchio pieno 5px (elemento grafico, sostituisce il trattino). */
.bg-service-plan__features li::before {
	content: '';
	position: absolute;
	left: 0.1rem;
	top: 0.65em;
	width: 5px;
	height: 5px;
	min-width: 5px; /* fix sub-pixel: forza dimensione fissa anche in flex/grid */
	border-radius: 50%;
	background: var(--p-text);
	box-sizing: content-box;
}

.bg-service-plan__features li + li {
	margin-top: var(--rhythm-xs, 0.5em);
}

/* Strong sui dati-chiave (quantità, durate, scope): peso 600 + nero pieno
   per scansione differenziale tra piani (tipografo 2026-05-27). */
.bg-service-plan__features strong {
	font-weight: 600;
	color: var(--p-text);
}

.bg-service-plan__cta {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: stretch; /* era center: ora il CTA occupa la larghezza della card */
	gap: var(--rhythm-s, 1em); /* uguale al padding-top: centra la microcopy tra divider e button */
	padding-top: var(--rhythm-s, 1em);
}

/* Bottone primario card prezzi: full-width, radius DS (--radius-btn 2px).
   Riallineamento a BUTTON.md (rimosso pill 999px, drift chiuso 2026-05-27). */
.bg-service-plan__cta .btn-primary {
	width: 100%;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 1rem 1.25rem;
	background: transparent; /* pattern .btn-primary canonico su dark (era pieno nero) */
	border: 1px solid var(--text);
	border-radius: var(--radius-btn, 2px);
	color: var(--text);
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--track-ui, 0.1em);
	line-height: 1;
	text-decoration: none;
	transition:
		background var(--dur-s) var(--ease-out),
		color var(--dur-s) var(--ease-out);
}

/* Reset wrap testo: niente underline animato in variante pill */
.bg-service-plan__cta-text {
	position: static;
	display: inline-block;
}

.bg-service-plan__cta-text::after {
	content: none;
}

/* Freccia hidden in stato base, fade-in + slide-in in hover.
   max-width 0 + overflow hidden evita layout-shift al primo hover. */
.bg-service-plan__cta .btn-primary::after {
	content: '→';
	display: inline-block;
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1;
	opacity: 0;
	max-width: 0;
	overflow: hidden;
	margin-left: 0;
	transform: translateX(-0.3em);
	transition:
		opacity var(--dur-s) var(--ease-out),
		max-width var(--dur-s) var(--ease-out),
		margin-left var(--dur-s) var(--ease-out),
		transform var(--dur-sm) var(--ease-out);
}

/* Hover: invertito — bg bianco, testo nero (pattern .btn-primary canonico). */
.bg-service-plan__cta .btn-primary:hover,
.bg-service-plan__cta .btn-primary:focus-visible {
	background: var(--text);
	color: var(--bg);
	-webkit-text-stroke: 0.45px var(--bg);
}

.bg-service-plan__cta .btn-primary:hover::after,
.bg-service-plan__cta .btn-primary:focus-visible::after {
	opacity: 1;
	max-width: 2em;
	margin-left: 0.4em;
	transform: translateX(0.15em);
}

.bg-service-plan__cta .btn-primary:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 4px;
}

/* Microcopy sotto al CTA: esplicita cosa succede cliccando (call gratuita o email).
   Manrope 400 size ridotta, --p-text-3 per non competere col pulsante (copywriter 2026-05-27). */
.bg-service-plan__cta-note {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--p-text-3);
	margin: 0;
	text-align: center;
}


/* ============================================================
   §6 Booking (form override locale)
   ============================================================ */

.bg-service-booking {
	padding-block: clamp(3rem, 6vw, 5rem);
	scroll-margin-top: 80px; /* offset sticky header */
	border-top: 1px solid rgba(240,240,240,0.08);
	margin-top: clamp(2rem, 4vw, 3rem);
}

.bg-service-booking__header {
	text-align: left;
	max-width: 720px;
	margin-bottom: clamp(2rem, 3.5vw, 2.75rem);
}

.bg-service-booking__title {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-weight: 600;
	font-style: normal;
	font-size: clamp(1.75rem, 3.2vw, 2.25rem);
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin: 0 0 0.75rem;
	color: var(--text, #f0f0f0);
}

.bg-service-booking__lead {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--text-2, rgba(242,242,242,0.5));
	max-width: 44ch;
	margin: 0;
}

/* Layout 2-col: form sx (1fr) + info dx (300px) — coerente con pagina contatti. */
.bg-service-booking__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.25rem, 2.5vw, 2.5rem);
	align-items: stretch;
}

@media (min-width: 769px) {
	.bg-service-booking__layout {
		grid-template-columns: 1fr 300px;
	}
}

.bg-service-booking__form-card {
	min-width: 0; /* evita overflow grid */
}

/* Info column: forziamo allineamento alla griglia, non max-width 300px (gestito da grid). */
.bg-service-booking__info {
	max-width: none;
}

.bg-contact-info__value--muted {
	color: var(--text-3, rgba(242,242,242,0.35));
}

/* Plans radio list */
.bg-service-booking__plans {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	border: 0;
	padding: 0;
	margin: 0;
}

.bg-service-booking__plans legend {
	padding: 0;
	margin-bottom: 0.5rem;
}

.bg-service-booking__plan {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(240,240,240,0.14);
	background: rgba(255,255,255,0.015);
	border-radius: 8px;
	cursor: pointer;
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 0.95rem;
	color: var(--text-2, rgba(240,240,240,0.85));
	transition: border-color var(--dur-s) var(--ease-out), background var(--dur-s) var(--ease-out);
}

.bg-service-booking__plan:hover {
	border-color: rgba(240,240,240,0.3);
	background: rgba(255,255,255,0.04);
}

.bg-service-booking__plan input[type="radio"] {
	accent-color: var(--accent, #f0f0f0);
	width: 1.05rem;
	height: 1.05rem;
	flex-shrink: 0;
}

.bg-service-booking__plan:has(input[type="radio"]:checked) {
	border-color: var(--accent, #f0f0f0);
	background: rgba(255,255,255,0.05);
}

/* Override paper-aware quando il form è dentro .bg-card--light */
.bg-card--light .bg-service-booking__plan {
	border-color: var(--p-border);
	background: transparent;
	color: var(--p-text-2);
}

.bg-card--light .bg-service-booking__plan:hover {
	border-color: var(--p-border-hover);
	background: rgba(0,0,0,0.025);
}

.bg-card--light .bg-service-booking__plan:has(input[type="radio"]:checked) {
	border-color: var(--p-text);
	background: rgba(0,0,0,0.04);
	color: var(--p-text);
}

.bg-card--light .bg-service-booking__plan input[type="radio"] {
	accent-color: var(--p-text);
}

/* Privacy consent paper-aware */
.bg-card--light .bg-contact-form__consent-row label {
	color: var(--p-text-2);
}

.bg-card--light .bg-contact-form__consent-row a {
	color: var(--p-text);
	border-bottom: 1px solid var(--p-border);
}

.bg-card--light .bg-contact-form__consent-row a:hover {
	border-bottom-color: var(--p-text);
}

.bg-card--light .bg-contact-form__consent-row input[type="checkbox"] {
	accent-color: var(--p-text);
}

/* Pulsante submit paper-aware */
.bg-card--light .bg-service-booking__actions .btn-primary {
	color: var(--p-text);
	border-color: var(--p-text);
}

.bg-card--light .bg-service-booking__actions .btn-primary:hover,
.bg-card--light .bg-service-booking__actions .btn-primary:focus-visible {
	background-color: var(--p-text);
	color: var(--paper, #F5F0E8);
}

.bg-service-booking__actions {
	margin-top: 1.5rem;
	display: flex;
	justify-content: center;
}

.bg-service-booking__actions .btn-primary {
	min-width: 12rem;
}

/* ============================================================
   §7 Journey — customer journey (6 card icone) dalla call alla consegna
   ============================================================ */

.bg-service-journey {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	background: rgba(255,255,255,0.015);
	border-block: 1px solid rgba(240,240,240,0.08);
}

.bg-service-journey__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.bg-service-journey__title {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-weight: 600;
	font-style: normal;
	font-size: clamp(1.55rem, 2.8vw, 2rem);
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
	color: var(--text, #f0f0f0);
	text-align: left;
}

.bg-service-journey__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.bg-service-journey__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.bg-service-journey__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.bg-service-journey__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0;
	border: 0;
	background: transparent;
}

.bg-service-journey__media {
	width: 100%;
	aspect-ratio: 3 / 2;
	margin: 0 0 clamp(1rem, 2vw, 1.25rem);
	border-radius: 5px;
	overflow: hidden;
	background: rgba(255,255,255,0.04);
}

.bg-service-journey__media img,
.bg-service-journey__media picture,
.bg-service-journey__media picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bg-service-journey__media--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.04);
	border: 1px dashed rgba(240,240,240,0.12);
}

.bg-service-journey__media-label {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--text-3, rgba(240,240,240,0.35));
}

.bg-service-journey__card-title {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-weight: 600;
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0 0 0.4rem;
	color: var(--text, #f0f0f0);
}

.bg-service-journey__card-desc {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--text-2, rgba(240,240,240,0.7));
	margin: 0;
}

/* ============================================================
   §8 Disclaimer pricing — sotto le card dei pacchetti
   Bandiera-sx, 2 colonne ≥769px, separato dalla grid pricing con linea sottile.
   ============================================================ */

.bg-service-pricing-disclaimer {
	max-width: 1280px;
	margin: clamp(-2rem, -3vw, -1rem) auto 0;
	padding: 0 clamp(1.25rem, 4vw, 2.5rem);
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--text-3, rgba(242,242,242,0.35));
	text-align: left;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(0.5rem, 1.5vw, 2rem);
}

.bg-service-pricing-disclaimer p {
	margin: 0;
}

@media (min-width: 769px) {
	.bg-service-pricing-disclaimer {
		grid-template-columns: 1fr 1fr;
	}
}

.bg-service-pricing-disclaimer strong {
	color: var(--text-2, rgba(242,242,242,0.5));
	font-weight: 600;
}

/* ============================================================
   §8b FAQ — wrapper service-page (riusa componente .bg-faq-section)
   Padding e max-width coerenti con journey/pricing/inner del template.
   ============================================================ */

.bg-service-faq {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.bg-service-faq__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* ============================================================
   §9 Booking — Layout + form (variante service-page)
   Grid asimmetrico info-SX (240) + form-DX (max 600).
   Stack <769px (breakpoint sistemico DS). Cap totale 1000px per
   stare nel wrapper .bg-page-services-content.
   Specificità boost .bg-service-booking per battere contact-form.css.

   Lead bianca Lora italic (.bg-contact-info__lead) sopra colonna info
   sostituisce la vecchia .bg-contact-form__intro paper rimossa.
   ============================================================ */

/* Layout asimmetrico orizzontale stabile (>=769).
   align-items: stretch → card form si allunga all'altezza della colonna info. */
.bg-service-booking .bg-contatti-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: stretch;
	justify-content: stretch;
	width: 100%;
	max-width: 100%;
	margin: 0;
	/* Annulla padding-inline canonico di .bg-contatti-layout in contact-form.css
	   che spostava la colonna info di 40px a dx rispetto al titolo della sezione. */
	padding-inline: 0;
}

@media (min-width: 769px) {
	.bg-service-booking .bg-contatti-layout {
		/* Proporzioni allineate a .bg-service-audience__inner: 3fr / 9fr.
		   Info SX guadagna ~50px, form DX si restringe in proporzione. */
		grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
		gap: clamp(1.5rem, 4vw, 3rem);
	}
	.bg-service-booking .bg-contatti-layout .bg-contact-info {
		grid-column: 1; grid-row: 1;
		position: sticky;
		top: clamp(1.5rem, 3vw, 2.5rem);
		/* Top lead "Raccontami…" = top card form (entrambi y=0 grazie ad
		   align-items: start della grid). Nessun padding-top. */
		padding-top: 0;
	}
	.bg-service-booking .bg-contatti-layout .bg-contact-form { grid-column: 2; grid-row: 1; }
}

/* Card form: bianca pura, padding aerato, fill colonna (no cap interno —
   il cap totale del layout 1000px gestisce la larghezza esterna).
   display: flex column → permette al form interno di occupare 100% altezza
   stretchata dalla grid, e al textarea Messaggio di crescere fino in fondo. */
.bg-service-booking .bg-card--light.bg-contact-form {
	background-color: #FFFFFF !important;
	background-image: none !important;
	background: #FFFFFF !important;
	opacity: 1;
	color: var(--p-text, #000);
	padding: clamp(1.25rem, 2vw, 1.75rem);
	border-radius: 8px;
	max-width: none;
	width: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	/* scope-token paper (override locale del consumer) */
	--p-text:         #000000;
	--p-text-2:       rgba(0, 0, 0, 0.62);
	--p-text-3:       rgba(0, 0, 0, 0.42);
	--p-border:       rgba(0, 0, 0, 0.14);
	--p-border-hover: rgba(0, 0, 0, 0.45);
}

/* Form occupa tutta l'altezza disponibile della card stretchata. */
.bg-service-booking .bg-card--light .bg-contact-form__form {
	flex: 1;
	min-height: 0;
}

/* Il field che contiene il textarea Messaggio cresce per riempire lo spazio
   verticale residuo. Selettore :has() — Chrome 105+, Firefox 121+, Safari 15.4+. */
.bg-service-booking .bg-card--light .bg-field:has(.bg-textarea) {
	flex: 1;
	min-height: 0;
}

.bg-service-booking .bg-card--light .bg-field:has(.bg-textarea) .bg-textarea {
	flex: 1;
	min-height: 5rem;
	height: 100%;
}

/* Divider hr */
.bg-service-booking .bg-contact-form__divider {
	border: 0;
	border-top: 1px solid var(--p-border);
	margin: clamp(1.25rem, 2vw, 1.75rem) 0;
	width: 100%;
}

/* Form element flex column con gap canonico */
/* Vertical rhythm form — 3 livelli coerenti con la colonna info:
   - macro: tra field/row e tra row/row → 1.1rem (mid-step)
   - meso:  dentro .bg-field (label + input) → 0.4rem
   - micro: row gap orizzontale (Nome|Email) → 1rem matchato al macro
   Footer (privacy+submit) stacca di più (margin-top 0.5rem) come fine-form. */
.bg-service-booking .bg-card--light .bg-contact-form__form {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

/* Row 2-col canonico (≥560px stack altrimenti) */
.bg-service-booking .bg-card--light .bg-contact-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 560px) {
	.bg-service-booking .bg-card--light .bg-contact-form__row {
		grid-template-columns: 1fr 1fr;
	}
}

/* Field wrapper: niente margin/padding spuri. */
.bg-service-booking .bg-card--light .bg-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

/* Label: paper-aware, uppercase compatto. */
.bg-service-booking .bg-card--light .bg-field__label {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--p-text-2);
	margin: 0;
}

.bg-service-booking .bg-card--light .bg-field__helper {
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--p-text-3);
	margin-left: 0.4rem;
	/* Annulla uppercase + tracking ereditati da .bg-field__label parent. */
	text-transform: none;
	letter-spacing: 0;
}

/* Input/textarea: stile UNDERLINE — bordo solo in basso, no box.
   font-size allineato al placeholder per uniformità del testo digitato. */
.bg-service-booking .bg-card--light .bg-input,
.bg-service-booking .bg-card--light .bg-textarea {
	width: 100%;
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--p-text);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--p-border);
	border-radius: 0;
	padding: 0.35rem 0;
	box-shadow: none;
	transition: border-color var(--dur-s) var(--ease-out);
}

.bg-service-booking .bg-card--light .bg-textarea {
	min-height: 3.5rem;
	resize: vertical;
	padding-top: 0.35rem;
}

.bg-service-booking .bg-card--light .bg-input::placeholder,
.bg-service-booking .bg-card--light .bg-textarea::placeholder {
	color: var(--p-text-3);
	font-size: 0.78rem;
	font-weight: 400;
}

.bg-service-booking .bg-card--light .bg-input:hover,
.bg-service-booking .bg-card--light .bg-textarea:hover {
	border-bottom-color: var(--p-border-hover);
}

.bg-service-booking .bg-card--light .bg-input:focus,
.bg-service-booking .bg-card--light .bg-input:focus-visible,
.bg-service-booking .bg-card--light .bg-textarea:focus,
.bg-service-booking .bg-card--light .bg-textarea:focus-visible {
	border-bottom-color: var(--p-text);
	border-bottom-width: 2px;
	margin-bottom: -1px; /* compensa border-width per evitare layout shift */
	outline: none;
	box-shadow: none;
}

/* Autofill: forza colore testo dark (browser sovrascrive con valori giallastri). */
.bg-service-booking .bg-card--light .bg-input:-webkit-autofill,
.bg-service-booking .bg-card--light .bg-textarea:-webkit-autofill {
	-webkit-text-fill-color: var(--p-text);
	-webkit-box-shadow: 0 0 0 1000px var(--paper, #F5F0E8) inset;
	box-shadow: 0 0 0 1000px var(--paper, #F5F0E8) inset;
	transition: background-color 5000s ease-in-out 0s;
}

/* Field error: enfasi sull'underline. */
.bg-service-booking .bg-card--light .bg-field.is-error .bg-input,
.bg-service-booking .bg-card--light .bg-field.is-error .bg-textarea {
	border-bottom-color: var(--accent, #E63929);
}

.bg-service-booking .bg-card--light .bg-field__error {
	font-size: 0.75rem;
	color: var(--accent, #E63929);
	margin-top: 0.25rem;
}

/* Mostra errore inline client-side quando l'utente prova a submittare e
   un campo required è invalid. :user-invalid scatta solo dopo tentativo
   di submit (no flash al load) — Chrome 119+, Firefox 88+, Safari 16+.
   Coperti: input/textarea required + checkbox privacy + radiogroup piano. */
.bg-service-booking .bg-card--light .bg-field:has(input:user-invalid) .bg-field__error,
.bg-service-booking .bg-card--light .bg-field:has(textarea:user-invalid) .bg-field__error,
.bg-service-booking .bg-card--light .bg-field--plans:has(input:user-invalid) .bg-field__error,
.bg-service-booking .bg-card--light .bg-contact-form__privacy:has(input:user-invalid) .bg-field__error,
.bg-service-booking .bg-card--light .bg-contact-form__privacy.is-error .bg-field__error {
	display: block;
}

/* Notifica successo inline dentro la textarea (post-submit ok).
   Testo nero pieno con underline verde sobrio, readonly = no caret. */
.bg-service-booking .bg-card--light .bg-textarea--success {
	color: var(--p-text);
	border-bottom-color: var(--p-text);
	font-style: italic;
	cursor: default;
	resize: none;
	min-height: 0;
}

.bg-service-booking .bg-card--light .bg-textarea--success:focus,
.bg-service-booking .bg-card--light .bg-textarea--success:focus-visible {
	outline: none;
	border-bottom-color: var(--p-text);
}

/* ============================================================
   §9b Datepicker custom (stile moderno coerente con underline input)
   ============================================================ */

.bg-service-booking .bg-card--light .bg-date-input {
	position: relative;
	display: flex;
	align-items: center;
}

.bg-service-booking .bg-card--light .bg-input--date {
	width: 100%;
	padding-right: 2.5rem; /* spazio per icon */
	color-scheme: light;
	/* Testo placeholder "gg/mm/aaaa" coerente con altri input::placeholder
	   (input[type=date] non supporta ::placeholder, va su tutto il pseudo). */
	color: var(--p-text-3);
}

.bg-service-booking .bg-card--light .bg-input--date::-webkit-datetime-edit-fields-wrapper,
.bg-service-booking .bg-card--light .bg-input--date::-webkit-datetime-edit-text,
.bg-service-booking .bg-card--light .bg-input--date::-webkit-datetime-edit-month-field,
.bg-service-booking .bg-card--light .bg-input--date::-webkit-datetime-edit-day-field,
.bg-service-booking .bg-card--light .bg-input--date::-webkit-datetime-edit-year-field {
	color: var(--p-text-3);
	font-size: 0.78rem;
}

.bg-service-booking .bg-card--light .bg-input--date:focus,
.bg-service-booking .bg-card--light .bg-input--date:valid {
	color: var(--p-text);
}

/* Nasconde icona calendar default del browser (la sostituiamo con la nostra). */
.bg-service-booking .bg-card--light .bg-input--date::-webkit-calendar-picker-indicator {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.bg-service-booking .bg-card--light .bg-date-input__icon {
	position: absolute;
	right: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.15rem;
	height: 1.15rem;
	color: var(--p-text-3);
	pointer-events: none; /* lascia che il click vada all'input */
	transition: color var(--dur-s) var(--ease-out);
}

.bg-service-booking .bg-card--light .bg-date-input:hover .bg-date-input__icon,
.bg-service-booking .bg-card--light .bg-date-input:focus-within .bg-date-input__icon {
	color: var(--p-text);
}

/* Date input "vuoto" (no value) → placeholder text grigio */
.bg-service-booking .bg-card--light .bg-input--date:not(:valid),
.bg-service-booking .bg-card--light .bg-input--date:placeholder-shown {
	color: var(--p-text-3);
}

.bg-service-booking .bg-card--light .bg-input--date:valid {
	color: var(--p-text);
}

/* ============================================================
   §9c Piano di interesse — chip-style moderno
   Layout horizontal con wrap, pill-shaped, segmented control feel.
   ============================================================ */

/* Piano scelto: grid 1fr 1fr (stesso pattern del row form Email/Data) →
   chip group sta in col1 con justify-self: end → bordo destro del chip
   group coincide con l'inizio della col2 del form (= colonna Email/Data).
   Label posizionato in absolute a sx per non bloccare la col1. */
.bg-service-booking .bg-card--light .bg-field--plans {
	border: 0;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1rem;
	row-gap: 0.5rem;
	align-items: center;
	position: relative;
}

.bg-service-booking .bg-card--light .bg-field--plans legend,
.bg-service-booking .bg-card--light .bg-field--plans > .bg-field__label {
	padding: 0;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

/* Error a tutta larghezza, sotto la riga grid. */
.bg-service-booking .bg-card--light .bg-field--plans .bg-field__error {
	grid-column: 1 / -1;
	margin-top: 0;
}

.bg-service-booking .bg-card--light .bg-plan-chips {
	display: inline-flex !important;
	flex-wrap: wrap;
	gap: 0 !important;
	border: 1px solid var(--p-border) !important;
	border-radius: 4px !important;
	overflow: hidden;
	width: fit-content;
	padding: 0 !important;
	/* Col2 della grid .bg-field--plans con justify-self: start → bordo sx
	   coincide con bordo sx della col2 form (Email/Data). */
	grid-column: 2;
	justify-self: start;
}

.bg-service-booking .bg-card--light .bg-plan-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	margin: 0;
}

.bg-service-booking .bg-card--light .bg-plan-chip + .bg-plan-chip .bg-plan-chip__label {
	border-left: 1px solid var(--p-border);
}

.bg-service-booking .bg-card--light .bg-plan-chip__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 1px;
	height: 1px;
}

/* Minimal moderno: segment-control compatto, niente pill, niente border esterno
   per chip (vive nel border wrapper), tipografia piccola, uppercase tenuto per
   coerenza coi label uppercase del form. */
.bg-service-booking .bg-card--light .bg-plan-chip__label {
	display: inline-block;
	padding: 0.4rem 0.85rem !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 0.7rem !important;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--p-text-2);
	background: transparent;
	transition: background var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out);
	user-select: none;
	line-height: 1.2;
	margin: 0 !important;
}

.bg-service-booking .bg-card--light .bg-plan-chip:hover .bg-plan-chip__label {
	background: rgba(0, 0, 0, 0.04);
	color: var(--p-text);
}

.bg-service-booking .bg-card--light .bg-plan-chip__input:checked + .bg-plan-chip__label {
	background: var(--p-text);
	color: #FFFFFF;
}

.bg-service-booking .bg-card--light .bg-plan-chip__input:focus-visible + .bg-plan-chip__label {
	outline: 2px solid var(--p-text);
	outline-offset: 2px;
}

/* ============================================================
   §9d Footer canonico: privacy + submit space-between
   ============================================================ */

.bg-service-booking .bg-card--light .bg-contact-form__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	margin-top: 0.5rem;
	flex-wrap: wrap;
}

/* Mobile: footer wrappato → privacy sopra full-width, submit sotto allineato a destra
   (margin-left: auto, perché align-self: flex-end controlla la cross-axis, non l'orizzontale). */
@media (max-width: 768px) {
	.bg-service-booking .bg-card--light .bg-contact-form__submit {
		margin-left: auto;
	}
}

/* Mobile <820px: riordino sezione INIZIAMO. Sequenza target:
   1) lead aside ("Raccontami il progetto…") — premessa narrativa
   2) form contatto                            — azione principale
   3) info operative (email, tel, social, tempi) — alternative dopo il form

   Tecnica: display: contents sull'aside "appiattisce" i suoi figli dentro
   .bg-contatti-layout, che diventa flex column. Poi flex order su lead/form/group.
   !important per vincere su eventuali regole pre-esistenti del contact-form base. */
@media (max-width: 820px) {
	.bg-service-booking .bg-contatti-layout {
		display: flex !important;
		flex-direction: column !important;
		gap: 1.5rem;
	}
	.bg-service-booking .bg-contact-info {
		display: contents !important;
	}
	.bg-service-booking .bg-contact-info__lead {
		order: 1 !important;
		margin: 0;
	}
	.bg-service-booking .bg-card--light.bg-contact-form {
		order: 2 !important;
	}
	.bg-service-booking .bg-contact-info__group {
		order: 3 !important;
	}
}

.bg-service-booking .bg-card--light .bg-contact-form__privacy {
	max-width: 38ch;
}

/* Checkbox custom paper-aware */
.bg-service-booking .bg-card--light .bg-checkbox {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.65rem;
	cursor: pointer;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--p-text-2);
}

.bg-service-booking .bg-card--light .bg-checkbox input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.bg-service-booking .bg-card--light .bg-checkbox__indicator {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	margin-top: 0.15rem;
	border: 1px solid var(--p-border);
	border-radius: 3px;
	background: transparent;
	position: relative;
	transition: border-color var(--dur-s) var(--ease-out), background var(--dur-s) var(--ease-out);
}

.bg-service-booking .bg-card--light .bg-checkbox__indicator::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 4px;
	height: 8px;
	border: solid #FFFFFF;
	border-width: 0 2px 2px 0;
	/* translate(-50%, -60%) centra geometricamente + compensa effetto ottico
	   della rotazione 45° (la V appare bilanciata leggermente sopra il
	   baricentro). Card pure white → border #FFFFFF, non più --paper. */
	transform: translate(-50%, -60%) rotate(45deg);
	opacity: 0;
	transition: opacity var(--dur-s) var(--ease-out);
}

.bg-service-booking .bg-card--light .bg-checkbox input[type="checkbox"]:checked + .bg-checkbox__indicator {
	background: var(--p-text);
	border-color: var(--p-text);
}

.bg-service-booking .bg-card--light .bg-checkbox input[type="checkbox"]:checked + .bg-checkbox__indicator::after {
	opacity: 1;
}

.bg-service-booking .bg-card--light .bg-checkbox input[type="checkbox"]:focus-visible + .bg-checkbox__indicator {
	outline: 2px solid var(--p-text);
	outline-offset: 2px;
}

/* Privacy link narrative paper-aware: underline animato 0→100% */
.bg-service-booking .bg-card--light .bg-link-narrative {
	color: var(--p-text);
	text-decoration: none;
	background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
	background-size: 0 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size var(--dur-sm) var(--ease-out);
	padding-bottom: 1px;
}

.bg-service-booking .bg-card--light .bg-link-narrative:hover,
.bg-service-booking .bg-card--light .bg-link-narrative:focus-visible {
	background-size: 100% 1px;
}

/* Info dark (email, telefono, social) — .bg-link-narrative scoped:
   bianco con underline animato 0→100% in hover, come da token canonico
   (link-narrative.css). Neutralizza il border-bottom legacy di contact-form.css
   che vincerebbe per specificità sul background-image.
   `width: fit-content + display: inline-block`: l'underline copre solo il
   testo, non l'intera larghezza del block-link nella colonna flex. */
.bg-service-booking .bg-contact-info .bg-link-narrative {
	color: var(--text);
	text-decoration: none;
	border-bottom: 0;
	background-image: linear-gradient(var(--text), var(--text));
	background-size: 0 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	padding-bottom: 0.05em;
	transition: background-size var(--dur-s) var(--ease-out);
	display: inline-block;
	width: fit-content;
	max-width: 100%;
}

.bg-service-booking .bg-contact-info .bg-link-narrative:hover,
.bg-service-booking .bg-contact-info .bg-link-narrative:focus-visible {
	background-size: 100% 1px;
}

.bg-service-booking .bg-contact-info .bg-link-narrative:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 2px;
}

/* Submit pill tondo coerente con .btn-primary canonico (Piani e Prezzi):
   outline transparent + hover invertito a nero. Capsule (border-radius 999)
   "tonda" + freccia inline che slitta in hover. Hover color #FFFFFF (la card
   è bianca pura, non più paper). */
.bg-service-booking .bg-card--light .bg-contact-form__submit {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: none;
	line-height: 1;
	color: #FFFFFF;
	background: var(--p-text);
	border: 1px solid var(--p-text);
	border-radius: 999px;
	padding: 0.55rem 1.25rem;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	cursor: pointer;
	transition: background-color var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out), padding var(--dur-s) var(--ease-out);
}

/* Freccia nascosta di default (width 0, opacity 0) → slide-in in hover. */
.bg-service-booking .bg-card--light .bg-contact-form__submit .arrow {
	font-size: 1.15em;
	font-weight: 500;
	line-height: 1;
	display: inline-block;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateX(-0.25em);
	transition: max-width var(--dur-s) var(--ease-out), opacity var(--dur-s) var(--ease-out), transform var(--dur-s) var(--ease-out);
}

.bg-service-booking .bg-card--light .bg-contact-form__submit:hover,
.bg-service-booking .bg-card--light .bg-contact-form__submit:focus-visible {
	background: var(--p-text);
	color: #FFFFFF;
}

.bg-service-booking .bg-card--light .bg-contact-form__submit:hover .arrow,
.bg-service-booking .bg-card--light .bg-contact-form__submit:focus-visible .arrow {
	max-width: 1.5em;
	opacity: 1;
	transform: translateX(0);
}

.bg-service-booking .bg-card--light .bg-contact-form__submit:focus-visible {
	outline: 2px solid var(--p-text);
	outline-offset: 3px;
}

/* Honeypot off-screen */
.bg-service-booking .bg-card--light .bg-contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ============================================================
   §9e Info column — pattern canonico FORM_CONTACT.md
   Color-shift senza underline (no border-bottom).
   __heading con rule sx 18px (firma locale componente).
   ============================================================ */

/* Vertical rhythm colonna info — basato sui 3 livelli DS:
   - macro: tra group e tra lead/group → gap-block (20-32px) modulare
   - meso:  dentro group (heading + items) → 0.85rem
   - micro: dentro item (label + value coppia) → 0.25rem
   Margin azzerati su lead/heading/label: il rhythm vive solo nei gap parent. */
.bg-service-booking .bg-contact-info {
	display: flex;
	flex-direction: column;
	gap: var(--gap-block, clamp(20px, 3vw, 32px));
}

.bg-service-booking .bg-contact-info .bg-contact-info__lead {
	margin: 0;
}

@media (min-width: 1080px) {
	.bg-service-booking .bg-contact-info {
		position: sticky;
		top: 2rem;
	}
}

.bg-service-booking .bg-contact-info__group {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

/* Item coppia label+value: gap stretto per legarli visivamente. */
.bg-service-booking .bg-contact-info__group > div {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.bg-service-booking .bg-contact-info__heading {
	position: relative;
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-3, rgba(242,242,242,0.35));
	margin: 0;
	padding-left: 1.625rem; /* spazio per rule sx 18px */
}

.bg-service-booking .bg-contact-info__heading::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 18px;
	height: 1px;
	background: var(--text-3, rgba(242,242,242,0.35));
}

.bg-service-booking .bg-contact-info__label {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-2, rgba(242,242,242,0.5));
	margin: 0;
}

/* Value-link: color-shift senza underline (no border-bottom) */
.bg-service-booking .bg-contact-info__value,
.bg-service-booking .bg-contact-info__social-link {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--text-2, rgba(242,242,242,0.5));
	text-decoration: none;
	border: 0;
	transition: color var(--dur-s) var(--ease-out);
	display: inline-block;
}

.bg-service-booking .bg-contact-info__value:hover,
.bg-service-booking .bg-contact-info__value:focus-visible,
.bg-service-booking .bg-contact-info__social-link:hover,
.bg-service-booking .bg-contact-info__social-link:focus-visible {
	color: var(--text, #F2F2F2);
}

.bg-service-booking .bg-contact-info__value:focus-visible,
.bg-service-booking .bg-contact-info__social-link:focus-visible {
	outline: 2px solid var(--text, #F2F2F2);
	outline-offset: 4px;
}

.bg-service-booking .bg-contact-info__value--tel {
	font-variant-numeric: tabular-nums;
}

.bg-service-booking .bg-contact-info__social-link {
	font-size: 0.9rem;
}

.bg-service-booking .bg-contact-info__note {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--text, #F2F2F2);
	margin: 0;
}

/* ============================================================
   §4 Audience — griglia 3×2 di schede chiare con testo scuro.
   Layout: 3 colonne desktop, 2 tablet, 1 mobile (no scroll orizzontale).
   ============================================================ */
.bg-service-audience {
	padding-block: clamp(2rem, 4vw, 3.5rem);
}
.bg-service-audience__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: stretch;
}
/* Colonna sinistra: solo testo, allineato in basso */
.bg-service-audience__textcol {
	display: flex;
	flex-direction: column;
	max-width: 480px;
	align-self: end;
}
/* Colonna destra: galleria sopra + griglia card sotto (larghezza piena della colonna) */
.bg-service-audience__gallerycol {
	display: flex;
	flex-direction: column;
	gap: clamp(0.85rem, 1.2vw, 1.1rem);
	width: 100%;
}
/* Galleria: 6 immagini sovrapposte, cambiano in sync con l'hover sulle card */
.bg-service-audience__gallery {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 5px;
	overflow: hidden;
	background: rgba(255,255,255,0.03);
	width: 100%;
}
.bg-service-audience__gallery-item {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	/* Stato base = slot in uscita: 200ms. L'entrata (320ms) è dichiarata sulle
	   regole di stato più sotto — entrata più lunga dell'uscita. */
	transition: opacity var(--dur-s) var(--ease-out);
	display: flex;
	align-items: center;
	justify-content: center;
}
.bg-service-audience__gallery-item img,
.bg-service-audience__gallery-item picture {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Layer secondario dello swap: il contenuto si assesta, non compare in sola
   dissolvenza (il cambio di slot porta informazione). L'immagine rientra da uno
   scale — una traslazione scoprirebbe una banda sotto l'object-fit: cover;
   la copy dei placeholder, che ha padding proprio, trasla di 8px. */
.bg-service-audience__gallery-item img,
.bg-service-audience__gallery-item picture {
	transform: scale(1.04);
	transition: transform var(--dur-m) var(--ease-out);
}
.bg-service-audience__gallery-copy {
	transform: translateY(8px);
	transition: transform var(--dur-m) var(--ease-out);
}
/* Default: la prima immagine è visibile (fallback no-JS).
   Con JS sticky (service-audience-sticky.js), .is-active sostituisce il default. */
.bg-service-audience__gallery-item[data-slot="1"] { opacity: 1; }

/* Entrata: 320ms contro i 200ms dell'uscita. */
.bg-service-audience__gallery-item[data-slot="1"],
.bg-service-audience__gallery-item.is-active { transition-duration: 320ms; }
.bg-service-audience__gallery-item[data-slot="1"] :is(img, picture, .bg-service-audience__gallery-copy),
.bg-service-audience__gallery-item.is-active :is(img, picture, .bg-service-audience__gallery-copy) { transform: none; }

/* JS sticky: lo slot con .is-active mantiene visibilità dopo unhover.
   Quando un .is-active esiste, gli altri slot vanno opacity 0 (anche slot 1
   default), così l'immagine dell'ultima card hoverata resta in evidenza. */
.bg-service-audience__gallery-item.is-active { opacity: 1; }
.bg-service-audience__inner:has(.bg-service-audience__gallery-item.is-active) .bg-service-audience__gallery-item:not(.is-active) { opacity: 0; transition-duration: var(--dur-s); }
/* Hover su una card: nascondi tutte e mostra solo lo slot corrispondente */
.bg-service-audience__inner:has(.bg-service-audience__card:hover) .bg-service-audience__gallery-item {
	opacity: 0;
	transition-duration: var(--dur-s); /* chi esce resta sui 200ms anche se è lo slot 1 */
}
.bg-service-audience__inner:has(.bg-service-audience__card:nth-child(1):hover) .bg-service-audience__gallery-item[data-slot="1"],
.bg-service-audience__inner:has(.bg-service-audience__card:nth-child(2):hover) .bg-service-audience__gallery-item[data-slot="2"],
.bg-service-audience__inner:has(.bg-service-audience__card:nth-child(3):hover) .bg-service-audience__gallery-item[data-slot="3"],
.bg-service-audience__inner:has(.bg-service-audience__card:nth-child(4):hover) .bg-service-audience__gallery-item[data-slot="4"],
.bg-service-audience__inner:has(.bg-service-audience__card:nth-child(5):hover) .bg-service-audience__gallery-item[data-slot="5"],
.bg-service-audience__inner:has(.bg-service-audience__card:nth-child(6):hover) .bg-service-audience__gallery-item[data-slot="6"] {
	opacity: 1;
	transition-duration: 320ms;
}
/* Layer secondario dello slot mostrato dall'hover (gli slot 1 e .is-active sono
   già coperti sopra). */
.bg-service-audience__inner:has(.bg-service-audience__card:nth-child(1):hover) .bg-service-audience__gallery-item[data-slot="1"] :is(img, picture, .bg-service-audience__gallery-copy),
.bg-service-audience__inner:has(.bg-service-audience__card:nth-child(2):hover) .bg-service-audience__gallery-item[data-slot="2"] :is(img, picture, .bg-service-audience__gallery-copy),
.bg-service-audience__inner:has(.bg-service-audience__card:nth-child(3):hover) .bg-service-audience__gallery-item[data-slot="3"] :is(img, picture, .bg-service-audience__gallery-copy),
.bg-service-audience__inner:has(.bg-service-audience__card:nth-child(4):hover) .bg-service-audience__gallery-item[data-slot="4"] :is(img, picture, .bg-service-audience__gallery-copy),
.bg-service-audience__inner:has(.bg-service-audience__card:nth-child(5):hover) .bg-service-audience__gallery-item[data-slot="5"] :is(img, picture, .bg-service-audience__gallery-copy),
.bg-service-audience__inner:has(.bg-service-audience__card:nth-child(6):hover) .bg-service-audience__gallery-item[data-slot="6"] :is(img, picture, .bg-service-audience__gallery-copy) {
	transform: none;
}
/* Slot colorato per posizione (finché $audience_images è vuoto ospita la copy
   descrittiva del committente). Il colore combacia con il --hover-bg della card
   corrispondente: slot N ↔ card nth-child(N). I committenti cambiano per pagina,
   quindi qui si nomina solo il colore, non la tipologia. */
.bg-service-audience__gallery-item--placeholder {
	border: 0;
	background: #2a2a2a; /* fallback */
}
.bg-service-audience__gallery-item--placeholder[data-slot="1"] { background: #7c4dc4; }  /* slot 1 — viola inchiostro */
.bg-service-audience__gallery-item--placeholder[data-slot="2"] { background: #c8453a; }  /* slot 2 — rosso */
.bg-service-audience__gallery-item--placeholder[data-slot="3"] { background: #3a8a4d; }  /* slot 3 — verde */
.bg-service-audience__gallery-item--placeholder[data-slot="4"] { background: #1e6bd6; }  /* slot 4 — blu blueprint */
.bg-service-audience__gallery-item--placeholder[data-slot="5"] { background: #2c7fb0; }  /* slot 5 — azzurro */
.bg-service-audience__gallery-item--placeholder[data-slot="6"] { background: #e8703f; }  /* slot 6 — arancione */

.bg-service-audience__gallery-label {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 1.4rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.16em;
	color: rgba(255,255,255,0.55);
}

/* Modalità testo: la card audience è impilata in colonna sul fondo colorato dello
   slot (usata finché $audience_images è vuoto). Ancorata in alto: numero grande
   (corpo leggero), titolo committente, poi la descrizione sotto. Testo tutto
   bianco pieno. Sostituisce l'immagine. */
.bg-service-audience__gallery-item--placeholder {
	align-items: stretch; /* la copy riempie l'altezza dello slot */
}
.bg-service-audience__gallery-copy {
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* numero ancorato in alto, titolo+testo in basso */
	align-items: flex-start;
	gap: clamp(1.5rem, 4vw, 3rem);
	width: 100%;
	padding: clamp(1.6rem, 3.4vw, 2.8rem); /* padding uniforme → distanza numero-alto = distanza ultima riga-basso */
	box-sizing: border-box;
}
.bg-service-audience__gallery-head {
	display: flex;
	flex-direction: column;
	gap: clamp(0.4rem, 1.2vw, 0.85rem); /* spazio tra numero e titolo, sempre in alto */
}
.bg-service-audience__gallery-index {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: clamp(2.6rem, 5.5vw, 4.4rem);
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	color: #fff;
}
.bg-service-audience__gallery-heading {
	margin: 0;
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: clamp(1.35rem, 2.4vw, 2rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: #fff;
}
.bg-service-audience__gallery-text {
	margin: 0;
	max-width: 60ch;
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: clamp(0.98rem, 1.25vw, 1.15rem);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: var(--track-body, 0);
	color: #fff;
	text-wrap: pretty;
}
.bg-service-audience__header {
	max-width: 480px;
	margin-bottom: 0;
}
/* Reset margini sui paragrafi del header per allineamento bottom pulito */
.bg-service-audience__header > p {
	margin: 0.75rem 0 0;
}
.bg-service-audience__header > p:last-child {
	margin-bottom: 0;
}
/* Descrizione — Manrope normale, registro operativo (sotto il lead) */
.bg-service-audience__desc {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: clamp(0.92rem, 1.1vw, 1rem);
	line-height: 1.55;
	color: var(--text-2, rgba(240,240,240,0.78));
}
/* Lead — Lora italic (FONT_STACK.md §lead italic) */
.bg-service-audience__lead {
	font-family: var(--f-serif, 'Lora', serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--text, #f0f0f0);
}
.bg-service-audience__scroller {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(0.5rem, 1vw, 0.85rem);
}
/* Tablet: stack verticale (textcol sopra, gallerycol sotto) */
@media (max-width: 900px) {
	.bg-service-audience__inner {
		grid-template-columns: 1fr;
		gap: clamp(1.75rem, 4vw, 2.5rem);
	}
	.bg-service-audience__textcol,
	.bg-service-audience__header { max-width: 720px; }
	.bg-service-audience__textcol { align-self: start; }
	.bg-service-audience__gallerycol {
		width: 100%;
		max-width: 720px;
		justify-self: start;
	}
}
/* Tablet: 3 colonne (2 righe) */
@media (max-width: 900px) {
	.bg-service-audience__scroller { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* Modalità testo: sotto i 900px il 16/9 è più basso della copy (numero +
	   titolo + descrizione) e l'overflow: hidden ne tagliava le ultime righe.
	   Gli slot passano da absolute a stacking su grid: stessa cella, altezza
	   dettata dal testo più lungo dei 6 → nessun taglio e nessun salto di
	   altezza allo swap. La modalità immagini resta 16/9. */
	.bg-service-audience__gallery:has(.bg-service-audience__gallery-item--placeholder) {
		aspect-ratio: auto;
		display: grid;
	}
	.bg-service-audience__gallery:has(.bg-service-audience__gallery-item--placeholder) .bg-service-audience__gallery-item {
		position: relative;
		inset: auto;
		grid-area: 1 / 1;
	}
}
/* Mobile stretto: 3 colonne (2 righe) — card compatte. */
@media (max-width: 480px) {
	.bg-service-audience__scroller {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.4rem;
	}
	.bg-service-audience__card {
		padding: 0.55rem 0.5rem;
		gap: 0.2rem;
		border-radius: 4px;
	}
	.bg-service-audience__title {
		font-size: 0.62rem;
		line-height: 1.1;
		letter-spacing: -0.005em;
	}
	.bg-service-audience__items {
		font-size: 0.55rem;
		line-height: 1.15;
	}
	.bg-service-audience__items li { margin-bottom: 0.1rem; }
}
/* Card chiara, moderna, testo scuro per contrasto — formato compatto orizzontale */
.bg-service-audience__card {
	/* Custom props per hover colorato (override per nth-child sotto) */
	--hover-bg: #ffffff;
	--hover-fg: #111111;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.3rem;
	aspect-ratio: 1 / 1;
	min-height: 0;
	padding: clamp(0.35rem, 0.55vw, 0.55rem);
	background: #f6f4ef;
	color: #111111;
	border-radius: 14px;
	box-shadow: 0 1px 0 rgba(255,255,255,0.04);
	transition: transform var(--dur-sm) var(--ease-out), box-shadow var(--dur-sm) var(--ease-out), background var(--dur-sm) var(--ease-out), color var(--dur-sm) var(--ease-out);
}
.bg-service-audience__card:hover {
	background: var(--hover-bg);
	color: var(--hover-fg);
	transform: translateY(-2px);
	box-shadow: 0 12px 30px -16px rgba(0,0,0,0.6);
}
.bg-service-audience__card:hover .bg-service-audience__title { color: var(--hover-fg); }
.bg-service-audience__card:hover .bg-service-audience__items li { color: var(--hover-fg); opacity: 0.88; }

/* Palette simbolica hover — colori legati al SIGNIFICATO, non all'indice */
.bg-service-audience__card:nth-child(1) { --hover-bg: #7c4dc4; --hover-fg: #ffffff; } /* Editoria → viola inchiostro */
.bg-service-audience__card:nth-child(2) { --hover-bg: #c8453a; --hover-fg: #ffffff; } /* Cultura → rosso museo */
.bg-service-audience__card:nth-child(3) { --hover-bg: #3a8a4d; --hover-fg: #ffffff; } /* Restauro → verde patrimonio */
.bg-service-audience__card:nth-child(4) { --hover-bg: #1e6bd6; --hover-fg: #ffffff; } /* Studi di Architettura → blu blueprint */
.bg-service-audience__card:nth-child(5) { --hover-bg: #2c7fb0; --hover-fg: #ffffff; } /* Enti pubblici → azzurro istituzionale */
.bg-service-audience__card:nth-child(6) { --hover-bg: #e8703f; --hover-fg: #ffffff; } /* Aziende e Imprese → arancione cantiere */
.bg-service-audience__title {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: clamp(0.78rem, 0.95vw, 0.9rem);
	line-height: 1.2;
	font-weight: 600;
	color: #111111;
	margin: 0;
	overflow-wrap: break-word;
	/* Riserva sempre l'altezza di 2 righe per uniformare le card (Cultura ed Editoria su 1 riga sola) */
	min-height: calc(1.2em * 2);
}
.bg-service-audience__items {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.bg-service-audience__items li {
	font-family: var(--f-sans, 'Manrope', sans-serif);
	font-size: 0.68rem;
	line-height: 1.35;
	color: rgba(17, 17, 17, 0.72);
	/* Consente il wrap dei testi lunghi (es. "Documentazione tecnica") invece di
	   sfondare la card: andare a capo è sempre preferibile all'overflow.
	   Rende non più necessario il vincolo "items brevi" su tutte le pagine servizio. */
	white-space: normal;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* NOTA §10 — Override sfondo box form spostato nel template PHP
   page-fotografia-darchitettura.php (inline nel <head>), per bypassare
   cache CSS che impediva l'aggiornamento del file. */

/* =========================================================
   §11 — Reduced motion
   In coda al foglio di proposito: 68 kB di regole più specifiche lo
   batterebbero se stesse in testa. Il reveal è già neutralizzato da
   reveal.css; qui restano i moti propri di questa pagina.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	/* Swap galleria audience: resta la sola dissolvenza */
	.bg-service-audience__gallery-item img,
	.bg-service-audience__gallery-item picture,
	.bg-service-audience__gallery-copy {
		transform: none;
		transition: none;
	}

	/* Card committente: niente sollevamento all'hover */
	.bg-service-audience__card:hover {
		transform: none;
	}

	/* Frecce dei CTA: compaiono senza scivolare */
	.bg-service-plan__cta .btn-primary::after,
	.bg-service-plan__cta .btn-primary:hover::after {
		transform: none;
		transition: opacity var(--dur-s) var(--ease-out), max-width var(--dur-s) var(--ease-out);
	}

	/* Freccia del submit del form: nessuno scivolamento */
	.bg-service-booking .bg-card--light .bg-contact-form__submit .arrow,
	.bg-service-booking .bg-card--light .bg-contact-form__submit:hover .arrow {
		transform: none;
	}

	/* Underline animato dei link narrativi: compare senza crescere.
	   Selettori a tre livelli come gli originali, altrimenti non li battono. */
	.bg-service-booking .bg-card--light .bg-link-narrative,
	.bg-service-booking .bg-contact-info .bg-link-narrative {
		transition: color var(--dur-s) var(--ease-out);
	}
}