:root {
	--pm-navy: #051649;
	--pm-navy-dark: #0E2D47;
	--pm-orange: #ec6500;
	--pm-orange-hover: #ec6500;
	--pm-light: #FFFFFF;
	--pm-text: #2A2A2A;
	--pm-muted: #6B6B6B;
	--pm-white: #FFFFFF;
	/* Offset del contenuto (ancore, padding dell'hero): non è l'altezza dell'header,
	   che cambia fra i due stati qui sotto. */
	--pm-nav-h: 72px;
	/* Altezze dell'header da XD, in rem (px/16):
	   aperto 210px = 13.125rem, condensato 65px = 4.0625rem. */
	--pm-header-h: 13.125rem;
	--pm-header-h-scrolled: 4.0625rem;
	/* Stessa tinta della navbar ma piena: serve col menu mobile aperto. */
	--pm-smoke-solid: #2D3038;
}

html { scroll-padding-top: var(--pm-nav-h); }

body {
	color: var(--pm-text);
	font-family: "Montserrat", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-weight: 300;
	line-height: 1.65;
	letter-spacing: 0.01em;
	/* Nessuno scroll laterale: le animazioni d'ingresso e le fasce a tutta
	   larghezza non devono poter allargare la pagina. La navbar è fixed,
	   quindi non risente del clipping. */
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	letter-spacing: 0;
}

a { color: var(--pm-orange); }
a:hover { color: var(--pm-orange-hover); }

/* Link inseriti dal mini-editor dei servizi: arancioni, senza sottolineatura. */
.pm-link,
.pm-link:hover {
	color: var(--pm-orange);
	text-decoration: none;
}

/* Colori inline della descrizione servizi (mini-editor): salvati come classi
   .pm-hl-* invece di style="color:..." (che veniva rimosso da wp_kses/safecss). */
.pm-hl-arancio { color: #ec6500; }
.pm-hl-blu { color: #051649; }
.pm-hl-testo { color: #2A2A2A; }
.pm-hl-grigio { color: #6B6B6B; }

/* ===== Header / Navbar (fixed, grigio fumo opaco) ===== */
.pm-navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1030;
	/* Altezza da XD: 210px aperto, 65px condensato (vedi .pm-navbar--scrolled).
	   `min-height` e non `height` perché col menu mobile aperto il pannello sta
	   dentro l'header e deve poterlo far crescere invece di essere tagliato. */
	min-height: var(--pm-header-h);
	transition: min-height 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
	/* Aperto l'header è alto 210px ma la barra vera occupa solo la fascia in alto:
	   sotto c'è la sfumatura, che non deve rubare i click al contenuto della pagina.
	   I click tornano attivi su .navbar, dove stanno logo, voci e hamburger. */
	pointer-events: none;
}
.pm-navbar > .navbar {
	pointer-events: auto;
}
/* "Sfume header" (XD, componente "Menu aperto"): rettangolo 1920x210 a (0,0),
   sfumatura lineare #9D9D9D -> #FFFFFF, opacità 100%, fusione Multiply.
   È alto 210px, quindi sborda sotto l'header (72px) e si spegne nel contenuto:
   per questo NON è `inset: 0` e non deve intercettare i click.

   Perché non `mix-blend-mode: multiply`: .pm-navbar è `fixed` con z-index, quindi
   crea un contesto di impilamento, che per le specifiche isola la fusione. Il
   multiply si applicherebbe solo allo sfondo (vuoto) dell'header, non alla pagina
   sottostante: risultato, una barra grigia piatta invece della sfumatura.
   Con un grigio puro però il multiply ha un equivalente esatto: moltiplicare per
   G/255 dà lo stesso risultato di sovrapporre nero con alpha = 1 - G/255, canale
   per canale. Quindi #9D9D9D -> alpha 0.384 (1 - 157/255) e #FFFFFF -> alpha 0.
   Nessuna approssimazione, e funziona ovunque senza blend mode. */
.pm-navbar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.384) 0%, rgba(0, 0, 0, 0) 100%);
}
.pm-navbar .navbar {
	/* Sopra il velo. */
	z-index: 1;
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
	/* Allinea il logo dell'header con il logo del footer (e col contenuto delle
	   sezioni): 0.75rem = padding di colonna Bootstrap. */
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}
/* Mobile: stacca il logo dal bordo sinistro e l'hamburger da quello destro. */
@media (max-width: 991.98px) {
	.pm-navbar .navbar {
		padding-left: 0.7rem;
		padding-right: 0.7rem;
	}
}
/* Scrolled ("menu condensed"): al posto della sfumatura una fascia piatta alta
   65px, come da XD (export "Menu scuro": #E4E4E4 uniforme su 1920x65).
   Ombra da XD: colore #797979, sfocatura 30, spread -10, opacità 20%. */
.pm-navbar.pm-navbar--scrolled {
	/* L'header si abbassa da 210px a 65px: la transizione è su .pm-navbar. */
	min-height: var(--pm-header-h-scrolled);
	box-shadow: 0 0 30px -10px rgba(121, 121, 121, 0.2);
}
/* Anche la barra interna scende a 65px. Senza questa regola veniva 75.2px:
   13.6px di padding per lato + 48px di .navbar-brand, che è 48 e non 38
   (l'altezza del logo compresso) perché Bootstrap aggiunge al brand 0.3125rem
   di padding sopra e sotto. */
.pm-navbar.pm-navbar--scrolled .navbar {
	min-height: var(--pm-header-h-scrolled);
	padding-top: 0;
	padding-bottom: 0;
}
/* Col pannello mobile aperto la barra non è più l'unica riga: il padding torna,
   altrimenti le voci finirebbero a filo dei bordi. */
.pm-navbar.pm-navbar--scrolled.pm-navbar--open .navbar,
.pm-navbar.pm-navbar--scrolled:has(> .navbar > .navbar-collapse.show) .navbar,
.pm-navbar.pm-navbar--scrolled:has(> .navbar > .navbar-collapse.collapsing) .navbar {
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
}
/* Stessa conversione della sfumatura qui sopra. Il riferimento è il colore che
   si LEGGE sulla barra condensata quando sotto c'è del bianco: rgb(201,201,201).
   Il velo è nero in Multiply, quindi su bianco dà 255*(1-alpha) = 201, da cui
   alpha = 1 - 201/255 = 0.212. (Prima era 0.106, cioè un risultato di 228: la
   barra veniva troppo chiara.) `height: 100%` segue la barra, che misura
   esattamente i 65px dello XD. */
.pm-navbar.pm-navbar--scrolled::before {
	height: 100%;
	background-image: none;
	background-color: rgba(0, 0, 0, 0.212);
}
/* Menu mobile aperto: niente velo. La navbar chiusa è volutamente translucida,
   ma col pannello aperto il contenuto della pagina si vedeva
   dietro le voci: qui lo sfondo diventa pieno e il layer del velo sparisce.
   La classe la mette il JS sugli eventi collapse di Bootstrap; il :has() copre
   il caso in cui il JS del tema non sia ancora partito. */
.pm-navbar.pm-navbar--open,
.pm-navbar:has(> .navbar > .navbar-collapse.show),
.pm-navbar:has(> .navbar > .navbar-collapse.collapsing) {
	background-color: var(--pm-smoke-solid);
}
.pm-navbar.pm-navbar--open::before,
.pm-navbar:has(> .navbar > .navbar-collapse.show)::before,
.pm-navbar:has(> .navbar > .navbar-collapse.collapsing)::before {
	display: none;
}
/* Logo header: "intero" in cima, "compresso" allo scroll (un filo più piccolo). */
.pm-navbar .pm-logo--compact { display: none; }
.pm-navbar--scrolled .pm-logo--full { display: none; }
.pm-navbar--scrolled .pm-logo--compact { display: block; height: 1.5rem; }
/* Pagine senza hero: il contenuto non deve finire sotto la nav fissa */
body:not(.pm-has-hero) {
	padding-top: var(--pm-nav-h);
}
.pm-navbar .navbar-brand,
.pm-navbar .nav-link {
	color: var(--pm-white) !important;
}
/* Voci di menu: maiuscolo spaziato come nei XD */
.pm-navbar .nav-link {
	font-size: 0.72rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	padding-left: 0.9rem;
	padding-right: 0.9rem;
}
.pm-navbar .nav-link:hover,
.pm-navbar .nav-link.active {
	color: var(--pm-orange) !important;
}
.pm-navbar .navbar-brand {
	font-weight: 700;
	font-size: 1.4rem;
	letter-spacing: 0.02em;
}
.pm-navbar .navbar-brand .amp { color: var(--pm-orange); }
.pm-navbar .navbar-toggler {
	border-color: rgba(255,255,255,0.4);
}
.pm-navbar .navbar-toggler-icon {
	filter: invert(1);
}
.pm-social {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-left: 0.8rem;
}
/* Icone header come nel XD: glifi bianchi pieni, senza cerchio/bordo. */
.pm-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--pm-white);
	text-decoration: none;
	transition: color 0.2s ease, transform 0.2s ease;
}
.pm-social a svg { width: 22px; height: 22px; }
.pm-social a:hover { color: var(--pm-orange); transform: translateY(-1px); }
.pm-social a[aria-label="WhatsApp"]:hover { color: #25D366; }

/* Gabbia contenuti = XD: 1480px (77.08% di 1920), margine 220/lato. --bs-gutter-x:0
   toglie i 12px di padding del container così il contenuto sta esatto a 220-1700.
   Vale ovunque (navbar, footer, sezioni). I grid con g-* tengono la loro spaziatura
   (g-* reimposta --bs-gutter-x sulla row). Solo da 1200px. */
@media (min-width: 1200px) {
	.container {
		max-width: none;
		width: 77.08%;
		--bs-gutter-x: 0rem;
	}
	/* La navbar aveva 0.75rem di padding per compensare il gutter del container;
	   ora che il gutter è 0, va tolto così il logo sta a filo 220 come i contenuti. */
	.pm-navbar .navbar {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ===== Hero ===== */
.pm-hero {
	position: relative;
	/* Come nel XD l'hero è una cover ~a tutto schermo (56.25% della larghezza = 16:9).
	   In vh/svh così scala su mobile senza cap in px. */
	min-height: 90vh;
	min-height: 90svh;
	/* Padding simmetrico: spazio per la navbar ma titolo centrato nella fascia. */
	padding: var(--pm-nav-h) 0;
	background: linear-gradient(160deg, #07173f 0%, #0a2358 55%, #16294f 100%);
	color: var(--pm-white);
	display: flex;
	align-items: center;
	text-align: center;
	overflow: hidden;
}
/* Hero con immagine impostata dal Customizer: immagine pulita, senza velo. */
.pm-hero--has-image {
	background: var(--pm-hero-img) center/cover no-repeat;
}
/* Hero con video di sfondo: il video riempie la fascia (dietro) e il contenuto
   sta in primo piano. Nessun velo sopra il video: il background resta pulito.
   Su tutti i device (autoplay muted playsinline). */
.pm-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}
.pm-hero > .container { position: relative; z-index: 2; }
.pm-hero h1 {
	font-size: clamp(2rem, 5vw, 3.4rem);
	font-weight: 700;
	margin: 0;
}
.pm-hero p {
	font-size: clamp(1rem, 2vw, 1.25rem);
	max-width: 640px;
	margin: 1rem auto 0;
}

/* ===== Blocco con immagine di sfondo (es. "Lo studio", "Il nostro metodo" in home) ===== */
.pm-imgblock {
	position: relative;
	/* Come .pm-parallax: il contenuto resta centrato verticalmente nella fascia. */
	display: flex;
	align-items: center;
	padding: 5rem 0;
	background-color: var(--pm-navy);
	background-size: cover;
	background-position: center;
	color: var(--pm-white);
	overflow: hidden;
}
.pm-imgblock::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(5, 22, 73, 0.72);
	pointer-events: none;
}
.pm-imgblock--orange::before { background: rgba(236, 100, 1, 0.62); }
.pm-imgblock > .container { position: relative; z-index: 1; }
.pm-imgblock__title { color: var(--pm-white); margin-bottom: 1rem; }
.pm-imgblock__text { color: var(--pm-white); max-width: 760px; margin-bottom: 1.4rem; }
/* Pulsante a destra su desktop, come nella fascia parallax. */
.pm-imgblock__cta { text-align: left; }
@media (min-width: 992px) {
	.pm-imgblock__cta { text-align: right; }
}

/* ===== Sezioni alternate ===== */
.pm-section {
	padding: 5rem 0;
}

/*titolo sezione servizi*/
.pm-intro-title-blue {
    color: var(--pm-navy-dark) !important;
}


.pm-section--orange {
	background-color: var(--pm-orange);
	color: var(--pm-white);
}
.pm-title--orange {
    color: var(--pm-orange);
}
/* Titoli di sezione blu (Gli obiettivi, Il team) come nei XD. */
.pm-title--navy {
	color: var(--pm-navy);
}



.pm-section--orange h2,
.pm-section--orange p { color: var(--pm-white); }

.pm-section--navy {
	background-color: var(--pm-navy);
	color: var(--pm-white);
}

/* Solo i paragrafi introduttivi della sezione: NON quelli dentro le card bianche */
.pm-section--navy > .container > p { color: var(--pm-white); }
.pm-section--navy h2 { color: var(--pm-orange); }
/* Le card restano su fondo bianco: testo scuro anche dentro le sezioni navy */
.pm-section--navy .pm-card__title,
.pm-section--navy .pm-team-card__name { color: var(--pm-navy); }
.pm-section--navy .pm-card__subtitle,
.pm-section--navy .pm-team-card__role { color: var(--pm-orange); }
.pm-section--navy .pm-card__objective { color: var(--pm-navy); }
.pm-section--navy .pm-card__text,
.pm-section--navy .pm-team-card__bio { color: var(--pm-muted); }

.pm-section--light {
	background-color: var(--pm-light);
}

/* ===== Bottoni (pill sottili, testo maiuscolo spaziato: layout dei XD) ===== */
.btn-pm-orange,
.btn-pm-outline-white,
.btn-pm-outline-orange,
.btn-pm-outline-withe-orange,
.btn-pm-navy {
	font-size: 0.72rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 0.75rem 1.9rem;
	border-radius: 999px;
	line-height: 1.4;
	text-decoration: none;
}
/* Mai sottolineatura sui bottoni pill, nemmeno all'hover. */
.btn-pm-orange:hover,
.btn-pm-outline-white:hover,
.btn-pm-outline-orange:hover,
.btn-pm-navy:hover {
	text-decoration: none;
}
.btn-pm-orange {
	background-color: var(--pm-orange);
	color: var(--pm-white);
	border: 1px solid var(--pm-orange);
	transition: all 0.2s ease;
}
.btn-pm-orange:hover {
	background-color: var(--pm-orange-hover);
	border-color: var(--pm-orange-hover);
	color: var(--pm-white);
}
.btn-pm-outline-white {
	background-color: transparent;
	color: var(--pm-white);
	border: 1px solid var(--pm-white);
	transition: all 0.2s ease;
}
.btn-pm-outline-white:hover {
	background-color: var(--pm-white);
	color: var(--pm-navy);
}
/* CTA (Servizi e Lo studio): testo bianco ma bordo arancione. */
.pm-cta-band .btn-pm-outline-white,
.pm-studio-cta .btn-pm-outline-white {
	border-color: var(--pm-orange);
}
/* Hover CTA: niente riempimento bianco, resta il colore della fascia (navy). */
.pm-cta-band .btn-pm-outline-white:hover,
.pm-studio-cta .btn-pm-outline-white:hover {
	background-color: transparent;
	color: var(--pm-white);
	border-color: var(--pm-orange);
}

/* ===== Cards attività ===== */
.pm-card {
	background-color: var(--pm-white);
	border-radius: 8px;
	overflow: hidden;
	height: 100%;
	box-shadow: 0 4px 14px rgba(0,0,0,0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pm-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}
.pm-card__img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	background-color: var(--pm-light);
}
.pm-card__body {
	padding: 1.2rem;
}
.pm-card__title {
	font-size: 1.1rem;
	margin: 0 0 0.4rem 0;
	color: var(--pm-navy);
}
.pm-card__text {
	color: var(--pm-muted);
	font-size: 0.9rem;
	margin: 0;
}

/* Attività proposte: immagini quadrate senza bordi arrotondati (come da XD) */
.pm-block-services .pm-card {
	border-radius: 0;
	box-shadow: none;
	background-color: transparent;
	overflow: visible;
}
.pm-block-services .pm-card:hover {
	transform: none;
	box-shadow: none;
}
.pm-block-services .pm-card__img {
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 0;
}

/* ===== Loghi partner ===== */
.pm-partners {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2rem 3rem;
}
.pm-partners img {
	max-height: 72px;
	width: auto;
	transition: opacity 0.2s;
}
.pm-partners img:hover { opacity: 0.75; }
/* Tavola unica con tutti i loghi welfare (un solo "partner"): a piena larghezza, come nel XD */
.pm-partners--sheet img {
	max-height: none;
	width: 100%;
	max-width: 940px;
	height: auto;
}
.pm-partner-placeholder {
	height: 44px;
	min-width: 120px;
	background-color: #ddd;
	border-radius: 4px;
	display: inline-block;
}

/* ===== Footer (navy, layout dei XD) ===== */
.pm-footer {
	background-color: var(--pm-navy);
	color: rgba(255, 255, 255, 0.82);
	padding: 3.5rem 0 2rem;
	font-size: 0.85rem;
}
/* Come nel XD: le colonne dopo la prima partono allineate alla riga
   "Società Benefit" (sotto il logo), non in cima al logo. Offset = altezza
   logo (46px) + margine (16px). Solo da desktop. */
@media (min-width: 992px) {
	.pm-footer .row > div:not(:first-child) { padding-top: 62px; }
}
.pm-footer .pm-footer__logo { margin-bottom: 1rem; }
.pm-footer .pm-logo { color: var(--pm-white); }
.pm-footer__company {
	color: var(--pm-orange);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	margin: 0 0 1rem;
}
.pm-footer__label { color: var(--pm-orange); font-weight: 600; }
.pm-footer__addr {
	font-size: 0.8rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 0.9rem;
}
.pm-footer__heading {
	color: var(--pm-orange);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 1.1rem;
}
.pm-footer__links,
.pm-footer__contacts {
	list-style: none;
	padding: 0;
	margin: 0;
}
.pm-footer__links li { margin-bottom: 0.55rem; }
.pm-footer a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}
.pm-footer a:hover { color: var(--pm-orange); }
.pm-footer__contacts li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-bottom: 0.85rem;
	line-height: 1.5;
}
.pm-footer__contacts .pm-ic {
	flex: 0 0 auto;
	color: var(--pm-white);
	margin-top: 0.1rem;
}
.pm-footer__contacts .pm-ic svg { width: 16px; height: 16px; display: block; }
.pm-footer__social { margin-top: 1.2rem; }
/* Icone social come nel XD: CERCHIO BIANCO pieno con il glifo ARANCIONE al
   centro (per Facebook/LinkedIn il glifo è un quadratino arancione col simbolo
   bianco ritagliato). */
.pm-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--pm-white);
	border: 0;
	color: var(--pm-orange);
	margin-right: 0.5rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pm-footer__social a svg { width: 20px; height: 20px; }
.pm-footer__social a:hover {
	color: var(--pm-orange);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* ===== Single page ===== */
.pm-page-content {
	padding: 3rem 0;
}

/* ===== Page hero (archive/single) ===== */
.pm-page-hero {
	padding: calc(var(--pm-nav-h) + 2.5rem) 0 3rem;
}
.pm-page-hero h1 {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	margin: 0;
}
.pm-hero-subtitle {
	font-size: 1.15rem;
	opacity: 0.9;
}
.pm-breadcrumb {
	font-size: 0.85rem;
	opacity: 0.85;
}
.pm-breadcrumb a {
	color: var(--pm-white);
	text-decoration: none;
}
.pm-breadcrumb a:hover {
	color: var(--pm-orange);
}
.pm-breadcrumb span {
	margin: 0 0.4rem;
	opacity: 0.6;
}

/* ===== Card service: badge + subtitle ===== */
.pm-card__subtitle {
	color: var(--pm-orange);
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0 0 0.5rem 0;
}
.pm-badge {
	display: inline-block;
	margin-top: 0.6rem;
	padding: 0.25rem 0.7rem;
	background-color: var(--pm-light);
	color: var(--pm-navy);
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
}

/* ===== Team card ===== */
.pm-team-card {
	background-color: var(--pm-white);
	border-radius: 8px;
	overflow: hidden;
	height: 100%;
	box-shadow: 0 4px 14px rgba(0,0,0,0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pm-team-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}
.pm-team-card__photo {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--pm-light);
}
.pm-team-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.pm-team-card__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e6e6e6, #cfcfcf);
}
.pm-team-card__placeholder--large {
	aspect-ratio: 1 / 1;
	border-radius: 0.5rem;
}
.pm-team-card__body {
	padding: 1.2rem;
	text-align: center;
}
.pm-team-card__name {
	font-size: 1.15rem;
	color: var(--pm-navy);
	margin: 0 0 0.3rem 0;
}
.pm-team-card__role {
	color: var(--pm-orange);
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0 0 0.6rem 0;
}
.pm-team-card__bio {
	color: var(--pm-muted);
	font-size: 0.9rem;
	margin: 0;
}

/* ===== Info card (sidebar single) ===== */
.pm-info-card {
	background-color: var(--pm-white);
	border-radius: 8px;
	padding: 1.5rem;
	box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.pm-info-card__title {
	font-size: 1.05rem;
	color: var(--pm-navy);
	margin: 0 0 1rem 0;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--pm-orange);
}
.pm-info-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.pm-info-list li {
	display: flex;
	flex-direction: column;
	padding: 0.6rem 0;
	border-bottom: 1px solid #eee;
}
.pm-info-list li:last-child {
	border-bottom: 0;
}
.pm-info-list strong {
	font-size: 0.75rem;
	color: var(--pm-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.15rem;
}
.pm-info-list a {
	color: var(--pm-text);
	text-decoration: none;
}
.pm-info-list a:hover {
	color: var(--pm-orange);
}

/* ===== Content prose ===== */
.pm-content h2, .pm-content h3 {
	color: var(--pm-navy);
	margin-top: 1.6rem;
}
.pm-content p {
	line-height: 1.7;
}

/* ===== Pagination ===== */
.pagination .page-numbers,
.pagination a.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	margin: 0 0.2rem;
	padding: 0 0.6rem;
	border-radius: 4px;
	color: var(--pm-navy);
	text-decoration: none;
	background-color: var(--pm-white);
}
.pagination .page-numbers.current,
.pagination a.page-numbers:hover {
	background-color: var(--pm-orange);
	color: var(--pm-white);
}

/* ===== Prose (contenuto pagine) ===== */
.pm-prose {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}
.pm-prose > *:first-child {
	margin-top: 0;
}
/* Blocco di testo allineato al bordo sinistro del container (non centrato). */
.pm-prose--left {
	margin-left: 0;
	margin-right: auto;
}

/* ============================================================
   Logo testuale Postura&Mente (header/footer)
   ============================================================ */
/* Logo SVG: dimensione via CSS così scala in modo responsive (viewBox nell'SVG). */
.pm-logo {
	display: block;
	height: 46px;
	width: auto;
	max-width: 100%;
}
@media (max-width: 575.98px) {
	.pm-logo { height: 34px; }
}
.pm-footer-logo { display: inline-block; }
.custom-logo { max-height: 56px; width: auto; }

/* ============================================================
   Sezioni parallax
   ============================================================ */
.pm-parallax {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 90vh;
	min-height: 90svh;
	padding: 7rem 0;
	background-color: var(--pm-navy);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: var(--pm-white);
	overflow: hidden;
}
.pm-parallax::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.pm-parallax--navy::before { background: rgba(5, 22, 73, 0.62); }
.pm-parallax--blue::before { background: rgba(31, 58, 124, 0.66); }
.pm-parallax--orange::before { background: rgba(236, 100, 1, 0.66); }
.pm-parallax--soft::before { background: rgba(24, 20, 16, 0.34); }
/* Variante titolo centrato (es. banda "Restituire qualità della vita") */
.pm-parallax--center { text-align: center; }
.pm-parallax--center .row { justify-content: center; }
.pm-parallax--center .pm-parallax__title { color: var(--pm-white); }
.pm-parallax--center .pm-parallax__text { margin-left: auto; margin-right: auto; }
.pm-parallax .container { position: relative; z-index: 2; }
.pm-parallax .row { align-items: center; }
/* Tipografia parallax dal XD: 40px con interlinea 50px (= 1.25). In rem, con
   clamp per scalare sotto i 1920px del mockup senza diventare minuscoli. */
.pm-parallax__title {
	color: var(--pm-orange);
	font-size: clamp(2rem, 2.083vw, 2.5rem);
	line-height: 1.25;
	margin-bottom: 2.5rem;
}
.pm-parallax__title--light { color: var(--pm-white); }
.pm-parallax__text {
	color: var(--pm-white);
	font-size: clamp(1.5rem, 2.083vw, 2.5rem);
	line-height: 1.25;
	max-width: 56rem;
	margin-bottom: 2.5rem;
}
.pm-parallax__text--accent { color: var(--pm-orange); }
.pm-parallax__cta { text-align: left; }
@media (min-width: 992px) {
	.pm-parallax__cta { text-align: right; }
}

/* Su touch/mobile niente attachment fixed (perf + bug iOS): l'immagine resta
   ferma qui, e il JS la sposta su un layer animato con transform. */
@media (hover: none), (max-width: 991.98px) {
	.pm-parallax { background-attachment: scroll; }
}

/* Layer immagine usato dal parallax touch: top e height li imposta il JS,
   perché dipendono dall'ampiezza dello scorrimento. */
.pm-parallax__bg {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	pointer-events: none;
	will-change: transform;
}

/* Lo Studio: intro con testo largo + ancore alle sezioni dotazioni */
.pm-studio-intro .pm-parallax__text { max-width: 980px; }
.pm-studio-anchors {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 2.6rem;
}
.pm-studio-anchors a {
	flex: 1 1 0;
	min-width: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 1rem;
	color: var(--pm-white);
	font-size: 1.15rem;
	font-weight: 600;
	text-decoration: none;
	border-left: 1px solid rgba(255, 255, 255, 0.28);
	transition: color 0.2s ease;
}
.pm-studio-anchors a:first-child { border-left: 0; }
.pm-studio-anchors a:hover { color: var(--pm-orange); }
.pm-studio-anchors__arrow { color: var(--pm-orange); font-size: 1.3rem; line-height: 1; }
/* Ancora sotto la navbar fissa */
.pm-device-band[id] { scroll-margin-top: var(--pm-nav-h); }

/* ============================================================
   Page hero con immagine
   ============================================================ */
.pm-page-hero--image {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--pm-white);
	/* Titolo centrato anche verticalmente, come nelle bande parallax. La navbar è trasparente
	   e sovrapposta all'immagine: nessuna compensazione, altrimenti il titolo scende. */
	padding: var(--pm-nav-h) 0 var(--pm-nav-h);
	display: flex;
	align-items: center;
	justify-content: center;
}
.pm-page-hero--image > .container { width: 100%; }
.pm-page-hero--image h1,
.pm-page-hero--image .pm-hero-subtitle { color: var(--pm-white); }

/* ===== Testata di pagina su mobile: layout suo =====
   Il titolo è il punto dolente. Le scale XD delle pagine (servizi.css,
   home.css, studio.css…) partono da 2.5rem = 40px: pensate per 1920, su 390px
   di larghezza occupano tre righe e sopra la foto diventano illeggibili.
   Qui la testata si riordina: titolo proporzionato allo schermo, banda più
   bassa e velo scuro sull'immagine.
   `body[class]` non seleziona nulla di diverso da `body`: serve solo ad alzare
   la specificità sopra i `.pm-servizi .pm-page-hero h1` dei CSS per-pagina,
   che vengono caricati DOPO questo file e altrimenti vincerebbero. */
@media (max-width: 767.98px) {
	body[class] .pm-page-hero h1,
	body[class] .pm-hero h1 {
		font-size: clamp(1.5rem, 7vw, 1.9rem);
		line-height: 1.2;
	}
	body[class] .pm-hero-subtitle {
		font-size: 1rem;
	}
	/* A 70svh la foto occupava quasi tutto lo schermo per due parole di titolo. */
	.pm-page-hero--image {
		position: relative;
		min-height: 45vh;
		min-height: 45svh;
	}
	/* Velo scuro crescente verso il basso: il titolo bianco resta leggibile
	   qualunque sia la foto caricata (prima non c'era alcun velo). */
	.pm-page-hero--image::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background-image: linear-gradient(180deg, rgba(5, 22, 73, 0.15) 0%, rgba(5, 22, 73, 0.6) 100%);
	}
	.pm-page-hero--image > .container {
		position: relative;
		z-index: 1;
	}
}

/* ============================================================
   Striscia accreditamento
   ============================================================ */
.pm-accredita {
	background-color: var(--pm-white);
	padding: 2.5rem 0;
	border-top: 1px solid #eee;
}
/* Layout del XD: due righe di testo a sinistra, logo dell'università a destra,
   il gruppo testo+logo centrato nella pagina. */
.pm-accredita__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
	text-align: left;
}
.pm-accredita__text { line-height: 1.6; }
.pm-accredita__line {
	color: var(--pm-muted);
	font-size: 24px;
	margin: 0;
	white-space: nowrap;
}
.pm-accredita__uni { color: var(--pm-navy); font-weight: 500; font-size: 0.9rem; margin: 0; }
.pm-accredita__logo { max-height: 76px; width: auto; }
@media (max-width: 575.98px) {
	.pm-accredita__inner { flex-direction: column; text-align: center; gap: 1.2rem; }
	.pm-accredita__line { white-space: normal; }
}

/* ============================================================
   Card metodo (4 step) — pagina Postura&Mente / Metodo
   ============================================================ */
/* Nel XD (Metodo.XD): testata e corpo sono due blocchi distinti, separati da un filo d'aria. */
.pm-method-intro {
	max-width: 980px;
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	line-height: 1.5;
}
.pm-method-grid { margin-top: 3rem; }
/* Ogni fase = due riquadri salmone (#ff9e57) separati: titolo bianco sopra, testo blu sotto. */
.pm-method-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	height: 100%;
}
.pm-method-card__head {
	background-color: #ff9e57;
	border-radius: 1.25rem 1.25rem 0 0; /* 20px agli angoli superiori, inferiori vivi */
	padding: 1.25rem 1rem;
	text-align: center;
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.07em;
	line-height: 1.35;
	color: var(--pm-white);
	text-transform: uppercase;
	/* Altezza uniforme (regge il titolo su 3 righe) così i corpi delle 4 card si allineano. */
	min-height: 10.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pm-method-card__body {
	background-color: #ff9e57;
	border-radius: 14px;
	padding: 1.6rem 1.3rem;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--pm-navy);
	text-align: center;
	flex: 1;
}

/* ============================================================
   Principi Società Benefit (3 colonne)
   ============================================================ */
/* Nel XD: titolo grigio scuro, una barretta arancio sotto, poi il testo grigio. */
.pm-principle h5 { color: #58585a; font-size: 1.05rem; font-weight: 600; margin-bottom: 1.1rem; }
.pm-principle p { color: var(--pm-muted); font-size: 0.9rem; margin: 0; }
.pm-principle p::before {
	content: "";
	display: block;
	width: 2px;
	height: 15px;
	background: var(--pm-orange);
	margin-bottom: 0.9rem;
}

/* ============================================================
   Animazione reveal allo scroll
   ============================================================ */
.pm-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.pm-reveal.pm-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.pm-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Lo Studio — fasce di categoria dotazioni
   ============================================================ */
.pm-section--sm { padding: 3rem 0; }
.pm-device-band {
    background-color: var(--pm-orange);
    color: var(--pm-white);
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 5rem 1.2rem;
    font-size: 2.5rem;
    min-height: 10rem;
}
/* La banda arancio col titolo resta attaccata all'immagine: niente
   padding sopra/sotto la sezione delle righe di Lo studio. */
.pm-device-band + .pm-section { padding: 0; }

/* ============================================================
   Servizio — Obiettivo
   ============================================================ */
.pm-objective {
	border-left: 2px solid var(--pm-orange);
	padding-left: 0.9rem;
}
.pm-objective__label {
	display: block;
	color: var(--pm-orange);
	font-weight: 700;
	font-size: 0.82rem;
	margin-bottom: 0.35rem;
}
.pm-objective p {
	margin: 0;
	font-size: 0.84rem;
	line-height: 1.5;
	color: var(--pm-orange);
}
.pm-card__objective {
	font-size: 0.82rem;
	color: var(--pm-navy);
	margin: 0 0 0.5rem;
}
.pm-card__objective span { color: var(--pm-orange); font-weight: 700; }

/* ============================================================
   Contatti — form e mappa
   ============================================================ */
.pm-contact-form .form-control {
	border: 0;
	border-bottom: 1px solid var(--pm-navy);
    border-top: 1px solid var(--pm-navy);
	border-radius: 0;
	padding: 0.6rem 0.1rem;
	background: transparent;
	box-shadow: none !important;
}
.pm-contact-form .form-control:focus { border-bottom-color: var(--pm-orange); }
.pm-contact-form textarea.form-control { min-height: 110px; }
.pm-contact-form .form-check-label { font-size: 0.85rem; color: var(--pm-muted); }
.pm-contact-form .pm-alert { border-radius: 8px; }
.pm-map iframe { width: 100%; height: 440px; border: 0; display: block; }
.pm-cta-band { padding: 3rem 0; }
.pm-cta-band h3 { color: var(--pm-orange); margin: 0; }
.pm-cta-band p { margin: 0.2rem 0 0; }

/* ============================================================
   Team — trigger card + modale (archivio)
   ============================================================ */
.pm-team-trigger { cursor: pointer; }
.pm-team-trigger:focus-visible { outline: 3px solid var(--pm-orange); outline-offset: 2px; }
/* Modale team: fullscreen. Sinistra bianca con l'intro (come la colonna intro
   della pagina), destra navy sopra l'area foto, con un margine bianco a destra. */
.pm-team-modal .modal-content {
	background-color: var(--pm-white);
	border: 0;
	border-radius: 0;
	height: 100%;
	overflow: hidden;
}
.modal-backdrop.show {
	background-color: var(--pm-navy);
	opacity: 0.6;
}
.pm-modal-split {
	display: flex;
	align-items: stretch;
	height: 100%;
}
.pm-modal-left {
	flex: 0 0 33.333%;
	max-width: 33.333%;
	background-color: var(--pm-white);
	color: var(--pm-navy);
	padding: 4rem clamp(1.5rem, 4vw, 4rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.pm-modal-team-title {
	color: var(--pm-navy);
	font-weight: 700;
	margin: 0 0 1.6rem;
}
.pm-modal-team-intro {
	color: var(--pm-navy);
	font-size: 1.05rem;
	line-height: 1.7;
	margin: 0;
}
.pm-modal-right {
	position: relative;
	flex: 1 1 auto;
	/* Margine bianco a destra: la fascia navy non tocca il bordo. */
	margin-right: clamp(2rem, 7vw, 8rem);
	background-color: var(--pm-navy);
	color: var(--pm-white);
	padding: 4rem 3.5rem 4rem 3rem;
	overflow-y: auto;
}
.pm-modal-close {
	position: absolute;
	top: 1.6rem;
	right: 1.6rem;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	background: transparent;
	color: var(--pm-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.pm-modal-close:hover,
.pm-modal-close:focus-visible {
	background-color: var(--pm-white);
	color: var(--pm-navy);
	outline: none;
}
.pm-modal-head {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	margin-bottom: 2.2rem;
	padding-right: 3rem;
}
.pm-modal-photo {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	object-fit: cover;
	filter: grayscale(1);
	flex: 0 0 auto;
}
.pm-modal-pre { font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); }
.pm-modal-name {
	color: var(--pm-white);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 1.5rem;
}
.pm-modal-role {
	color: var(--pm-white);
	font-weight: 400;
	font-size: 1rem;
}
.pm-modal-bio { color: rgba(255, 255, 255, 0.9); font-size: 0.98rem; line-height: 1.65; }
.pm-modal-bio p:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
	/* La bio è allineata al nome, non alla foto (spazio navy vuoto sotto la foto). */
	.pm-modal-bio { padding-left: calc(150px + 1.75rem); }
}
@media (max-width: 767.98px) {
	.pm-team-modal .modal-content { overflow-y: auto; }
	/* Impilate, le due metà si fermano al loro contenuto. Con `min-height:100%`
	   e `flex:1 1 auto` la fascia navy si stirava fino in fondo allo schermo:
	   dopo una bio corta restava una distesa di blu vuoto. Lo spazio che avanza
	   ora è bianco, come il resto della modale. */
	.pm-modal-split { flex-direction: column; height: auto; min-height: 0; }
	.pm-modal-left,
	.pm-modal-right { flex: 0 0 auto; max-width: 100%; }
	.pm-modal-left { padding: 2.2rem 1.6rem; justify-content: flex-start; }
	.pm-modal-right { padding: 2.2rem 1.6rem; margin-right: 0; }
	.pm-modal-head { flex-direction: column; text-align: center; gap: 1.2rem; padding-right: 0; }
}

/* ============================================================
   Pannello team "inline" (pagina Postura&Mente):
   il dettaglio blu si apre sopra l'area delle foto (colonna destra),
   lasciando l'intro a sinistra e il resto della pagina visibile.
   ============================================================ */
.pm-team-inline { position: relative; }
.pm-team-detail {
	position: absolute;
	top: 0;
	/* Margine bianco a destra: la fascia navy non tocca il bordo. */
	right: clamp(2rem, 7vw, 8rem);
	bottom: 0;
	left: 50%; /* fallback: il JS allinea al bordo sinistro delle foto */
	z-index: 5;
	display: none;
	background-color: var(--pm-navy);
	color: var(--pm-white);
	padding: clamp(2.5rem, 4vw, 4rem) clamp(1.75rem, 3.5vw, 3.5rem);
	overflow-y: auto;
}
.pm-team-detail.is-open { display: block; }
@media (max-width: 991.98px) {
	/* Su schermi piccoli il pannello si apre IN CIMA alla sezione team (non
	   fixed): è alto quanto il testo e il JS ci porta lo scroll, così è chiaro
	   che si è aperto qualcosa. Prima era `inset: 0` (tutto schermo blu, mezzo
	   telefono vuoto sotto una bio corta), poi ancorato in basso, dove passava
	   inosservato. Il contenitore .pm-team-inline è già position: relative. */
	.pm-team-detail {
		position: absolute;
		top: 0;
		right: 0;
		bottom: auto;
		left: 0 !important;
		max-height: none;
		overflow-y: visible;
		z-index: 1050;
		padding: 2rem 1.4rem;
		box-shadow: 0 12px 30px rgba(5, 22, 73, 0.35);
	}
}

/* ============================================================
   Footer social in colonna verticale (layout XD)
   ============================================================ */
.pm-footer__social--vertical {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	align-items: flex-start;
}
.pm-footer__social--vertical a { margin-right: 0; }
@media (max-width: 991.98px) {
	.pm-footer__social--vertical { flex-direction: row; }
}

/* ============================================================
   Pagina Team (archivio) — layout XD: intro + foto circolari
   ============================================================ */
.pm-team-hero {
	background-color: var(--pm-white);
	color: var(--pm-navy);
}
.pm-team-hero h1 { color: var(--pm-navy); }
.pm-team-section { padding-top: 1.5rem; }
.pm-team-intro {
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	line-height: 1.5;
	color: var(--pm-navy);
}
.pm-team-member { text-align: center; cursor: pointer; }
.pm-team-member__photo {
	width: 100%;
	max-width: 190px;
	aspect-ratio: 1 / 1;
	margin: 0 auto 1rem;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(135deg, #e6e6e6, #cfcfcf);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pm-team-member__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(100%);
	transition: filter 0.3s ease;
}
.pm-team-member:hover .pm-team-member__photo { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(5, 22, 73, 0.18); }
.pm-team-member:hover .pm-team-member__photo img { filter: grayscale(0); }
.pm-team-member__placeholder { display: block; width: 100%; height: 100%; }
.pm-team-member__name {
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--pm-navy);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 0.25rem;
}
/* Nel XD il ruolo è blu in grassetto (non arancio). */
.pm-team-member__role {
	display: block;
	color: var(--pm-navy);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.pm-team-member:focus-visible { outline: 3px solid var(--pm-orange); outline-offset: 3px; border-radius: 8px; }

/* ============================================================
   Bottone outline arancio
   ============================================================ */
.btn-pm-outline-orange {
	background-color: transparent;
	color: var(--pm-orange);
	border: 1px solid var(--pm-orange);
	display: inline-block;
	transition: all 0.2s ease;
}

.btn-pm-outline-orange:hover {
    background-color: var(--pm-orange); color: var(--pm-white);
}

/* ============================================================
   Bottone outline testo bianco bordo arancio
   ============================================================ */
.btn-pm-outline-withe-orange {
    background-color: transparent;
    color: var(--pm-white);
    border: 1px solid var(--pm-orange);
    display: inline-block;
    transition: all 0.2s ease;
}

.btn-pm-outline-white-orange:hover {
    background-color: var(--pm-orange); color: var(--pm-white);
}

/* ============================================================
   Righe alternate: Servizi e Dotazioni (layout XD)
   ============================================================ */
.pm-service-row {
	padding: 2.5rem 0;
	border-bottom: 1px solid #ececec;
}
.pm-service-row:last-child { border-bottom: 0; }
.pm-service-row__img,
.pm-device-row__img {
	width: 100%;
	height: 320px;
	object-fit: cover;
	display: block;
}
.pm-service-row__img { border-radius: 8px; }

/*Fasci arancio servizi e home page*/
.pm-services__text,
.pm-services__text p, .pm-studio__text p  {
    color: var(--pm-white);
    font-size: clamp(1.1rem, 1.7vw, 1.5rem);
    line-height: 1.45;
}


.pm-partners__text,
.pm-partners__text p, .pm-team__text,
.pm-team__text p {
    font-size: clamp(1.1rem, 1.7vw, 1.5rem);
    line-height: 1.45;
}



/* Lo studio (/lo-studio/): righe a filo, senza spazi. Le immagini riempiono
   tutta l'altezza della riga così toccano la fascia arancio sopra e l'angolo
   dell'immagine della riga successiva (nessun gap verticale). */
.pm-device-row {
	padding: 0;
	margin: 0;
	border-bottom: 0;
}
.pm-device-row__media {
	padding: 0;
	min-height: 400px;
}
.pm-device-row__img {
	height: 100%;
	border-radius: 0;
}
/* Il testo occupa la sua metà con padding interno e resta centrato in
   verticale rispetto all'immagine affiancata. */
.pm-device-row__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2.75rem clamp(1.5rem, 4vw, 3.5rem);
}
@media (max-width: 991.98px) {
	.pm-device-row__media {
		min-height: 0;
		height: 260px;
	}
	.pm-device-row__body {
		padding: 1.75rem 1.25rem 2.25rem;
	}
}
.pm-service-row__img--ph,
.pm-device-row__img--ph {
	background: linear-gradient(135deg, var(--pm-navy), var(--pm-orange));
}
.pm-service-row__title {
	color: var(--pm-orange);
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	margin-bottom: 1.4rem;
	font-weight: 700;
}
/* Titolo intro arancio della pagina Servizi: navy come nel XD */
.pm-intro-title { color: var(--pm-navy); }
.pm-device-row__title {
	color: var(--pm-orange);
	font-weight: 700;
	font-size: clamp(1.6rem, 2.6vw, 2.3rem);
	line-height: 1.15;
	margin-bottom: 1.4rem;
}
.pm-service-row__text,
.pm-device-row__text {
	color: var(--pm-muted);
	margin-bottom: 1.2rem;
}
/* Descrizione dotazione: testo completo con barretta arancio in alto a
   sinistra (come nello screenshot). Il contenuto è multi-paragrafo. */
.pm-device-row__text {
	position: relative;
	padding-top: 1.75rem;
}
.pm-device-row__text::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2px;
	height: 1.4rem;
	background-color: var(--pm-orange);
}
.pm-device-row__text > p {
	color: var(--pm-muted);
	margin-bottom: 1rem;
}
.pm-device-row__text > p:last-child {
	margin-bottom: 0;
}

/* ============================================================
   Elenco Servizi (/servizi/): righe alternate immagine/testo (layout XD)
   ============================================================ */
/* Divisore sotto ogni servizio, tranne l'ultimo (come da XD). */
/* NB: il respiro verticale sta sul solo TESTO (.pm-srow__body), non sulla riga:
   così l'immagine riempie tutta l'altezza e tocca sempre i bordi/divisori. */
.pm-srow { border-bottom: 0.09375rem solid var(--pm-text); } /* 1.5px */
.pm-srow:last-child { border-bottom: 0; }

.pm-srow__media img,
.pm-srow__ph {
	width: 100%;
	object-fit: cover;
	display: block;
}
.pm-srow__ph {
	min-height: 260px;
	background: linear-gradient(135deg, var(--pm-navy), var(--pm-orange));
}
.pm-srow__title {
	color: var(--pm-orange);
	font-weight: 700;
	font-size: clamp(1.6rem, 2.6vw, 2.3rem);
	line-height: 1.15;
	margin-bottom: 1.4rem;
}
/* Testo del servizio in griglia: "Obiettivo" a sinistra (stretto) e
   titolo + descrizione allineati alla colonna di destra (come da XD). */
@media (min-width: 576px) {
	.pm-srow__inner {
		display: grid;
		grid-template-columns: 5fr 7fr;
		column-gap: 1.75rem;
		row-gap: 1.3rem;
		align-items: start;
	}
	.pm-srow__inner > .pm-srow__title { grid-column: 2; grid-row: 1; margin-bottom: 0; }
	.pm-srow__inner > .pm-objective   { grid-column: 1; grid-row: 2; }
	.pm-srow__inner > .pm-srow__text  { grid-column: 2; grid-row: 2; }
	.pm-srow__inner--noobj { display: block; }
}
/* Slider della riga servizio: le slide scorrono in orizzontale dentro la
   colonna immagine, che mantiene le sue dimensioni (quadrata come minimo,
   stretchata all'altezza della riga). Niente frecce: solo i pallini. */
/* height:100% segue la colonna su desktop; sotto i 992px la colonna è ad
   altezza automatica, quindi lo slider si adatta alle immagini (che lì tengono
   le loro proporzioni). */
.pm-slider {
	position: relative;
	height: 100%;
	overflow: hidden;
}
.pm-slider__track {
	display: flex;
	height: 100%;
	transition: transform 0.5s ease;
}
.pm-slider__slide {
	flex: 0 0 100%;
	max-width: 100%;
	height: 100%;
}
/* Le proporzioni delle immagini restano quelle di .pm-srow__media img. */
.pm-slider__slide img {
	width: 100%;
	display: block;
}
/* I pallini entrano INSIEME alla foto: restano nascosti finché la prima
   immagine non è caricata (classe pm-slider--ready dal JS), altrimenti si
   vedrebbero comparire su un riquadro ancora vuoto. */
.pm-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1.25rem;
	display: flex;
	justify-content: center;
	gap: 0.625rem;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.5s ease;
}
.pm-slider--ready .pm-slider__dots { opacity: 1; }
/* Pallino: bianco trasparente; arancione pieno quando è la slide attiva. */
.pm-slider__dot {
	width: 0.75rem;
	height: 0.75rem;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.9);
	background-color: rgba(255, 255, 255, 0.35);
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}
.pm-slider__dot:hover { background-color: rgba(255, 255, 255, 0.65); }
.pm-slider__dot.is-active {
	background-color: var(--pm-orange);
	border-color: var(--pm-orange);
}
.pm-slider__dot:focus-visible {
	outline: 2px solid var(--pm-white);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.pm-slider__track { transition: none; }
}

/* Obiettivo: navy e allineato a destra (nel listing). */
.pm-srow .pm-objective { border-left: 0; padding-left: 0; text-align: right; padding-top: 1.75rem; }
.pm-srow .pm-objective__label { color: var(--pm-navy); font-size: 0.95rem; }
.pm-srow .pm-objective p { color: var(--pm-navy); font-size: 0.92rem; }
/* Descrizione con piccola barretta arancio sopra-sinistra (come da XD). */
.pm-srow__text {
	position: relative;
	color: var(--pm-muted);
	margin: 0;
	padding-top: 1.75rem;
}
.pm-srow__text::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2px;
	height: 1.4rem;
	background-color: var(--pm-orange);
}

@media (min-width: 992px) {
	/* stretch: la colonna immagine si allunga fino all'altezza del testo,
	   così una descrizione lunga non lascia la foto "corta". */
	.pm-srow { display: flex; align-items: stretch; gap: 3rem; }
	.pm-srow--reverse { flex-direction: row-reverse; }
	.pm-srow__media,
	.pm-srow__body { flex: 0 0 calc(50% - 1.5rem); max-width: calc(50% - 1.5rem); }
	/* L'immagine riempie la colonna (stretchata all'altezza della riga) e
	   tocca i bordi superiore/inferiore; min-height mantiene una foto
	   generosa anche con descrizioni corte. */
	.pm-srow__media img,
	.pm-srow__ph { height: 100%; min-height: 400px; }
	/* Il respiro verticale vive qui, sul testo: la riga (e quindi l'immagine)
	   cresce con esso, ma la foto arriva comunque fino ai divisori. */
	.pm-srow__body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 3.25rem 0;
	}
	.pm-srow__inner { width: 100%; }
}
@media (max-width: 991.98px) {
	/* Impilato, ma come su desktop il respiro verticale sta sul TESTO e non
	   sulla riga: così la foto parte attaccata al divisore sopra invece di
	   avere 2.5rem di stacco (era il vecchio padding su .pm-srow). */
	.pm-srow { padding: 0; }
	/* Qui — e SOLO qui — la foto tiene le sue proporzioni: la riga è impilata,
	   non c'è nessun divisore laterale da raggiungere, e i 260px fissi di prima
	   ritagliavano in orizzontale le foto verticali degli istruttori
	   mozzandone la testa (la colonna è larga quanto lo schermo, il caso
	   peggiore). Su desktop il ritaglio resta: vedi servizi.css.
	   Il segnaposto, non avendo un'immagine, ha bisogno di un'altezza sua. */
	.pm-srow__media img { height: auto; min-height: 0; }
	.pm-srow__ph { height: 260px; min-height: 0; }
	.pm-srow__body { margin-top: 1.4rem; padding-bottom: 2.5rem; }
	.pm-srow .pm-objective { text-align: left; }
}

/* ============================================================
   Bottone navy pieno (es. Codice Etico)
   ============================================================ */
.btn-pm-navy {
	background-color: var(--pm-navy);
	color: var(--pm-white);
	border: 1px solid var(--pm-navy);
	display: inline-block;
	transition: all 0.2s ease;
}
.btn-pm-navy:hover { background-color: #0a2266; color: var(--pm-white); }

/* ============================================================
   Home: elenco nomi del team (sotto banda navy)
   ============================================================ */
.pm-team-names {
	color: var(--pm-orange);
	font-weight: 600;
	letter-spacing: 0.02em;
	font-size: 0.72rem;
	margin-bottom: 1.6rem;
	line-height: 1.7;
	/* Come nel XD: i nomi restano tutti su una sola riga, senza andare a capo. */
	white-space: nowrap;
}
/* Separatori navy a barretta singola, come nel XD: ogni nome ha il bordo a
   DESTRA; solo il primo ha anche quello a SINISTRA. Così tra due nomi si vede
   una sola barretta (non due). Padding stacca la barretta dal testo, margine
   minimo tiene tutti i nomi su una riga. */
.pm-team-names__item {
	display: inline-block;
	border-left: 2px solid var(--pm-navy);   /* barretta a sinistra di OGNI nome: così ogni riga, anche a capo su mobile, inizia con la barretta */
	padding: 0 0.5rem;
	margin: 0 0.15rem;
}
.pm-team-names__item:last-child {
	border-right: 2px solid var(--pm-navy);   /* chiude l'ultimo nome con la barretta finale */
}
/* Mobile: i nomi devono andare a capo (niente overflow). Il nowrap serve solo
   da desktop, dove ci stanno tutti su una riga come nel XD. */
@media (max-width: 991.98px) {
	.pm-team-names { white-space: normal; }
	.pm-team-names__item { margin: 0.2rem 0.15rem; }
}
/* Home — team: bottone a sinistra in linea con i nomi (layout XD) */
.pm-home-team__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.6rem;
}
.pm-home-team__foot .btn-pm-outline-orange { flex: 0 0 auto; }
.pm-home-team__foot .pm-team-names { flex: 1 1 320px; }

/* ============================================================
   Postura&Mente: banda "La filosofia" (onda arancio)
   ============================================================ */
.pm-filosofia {
	position: relative;
	padding: 5rem 0;
	background-color: var(--pm-orange);
	background-size: cover;
	background-position: center;
	color: var(--pm-white);
	overflow: hidden;
}
.pm-filosofia::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.22), transparent 45%),
		radial-gradient(circle at 50% 120%, transparent 30%, rgba(180, 70, 0, 0.25) 31%, transparent 33%),
		radial-gradient(circle at 50% 120%, transparent 50%, rgba(180, 70, 0, 0.2) 51%, transparent 53%),
		radial-gradient(circle at 50% 120%, transparent 70%, rgba(180, 70, 0, 0.15) 71%, transparent 73%);
	pointer-events: none;
}
/* Con immagine di sfondo: niente cerchi decorativi né velo, solo l'immagine */
.pm-filosofia--has-image::before {
	display: none;
}
.pm-filosofia > .container { position: relative; z-index: 1; }
.pm-filosofia__title {
	color: var(--pm-white);
	margin-bottom: 1.2rem;
}
/* .pm-prose centra il blocco: nella banda arancio il testo va a sinistra, come nel XD */
.pm-filosofia__text {
	max-width: 620px;
	margin-left: 0;
	margin-right: auto;
}
.pm-filosofia__text,
.pm-filosofia__text p {
    color: var(--pm-white);
    font-size: clamp(1.1rem, 1.7vw, 1.5rem);
    line-height: 1.45;
}






/* ============================================================
   Benefit: web app, SDGs, cofinanziamento
   ============================================================ */
.pm-webapp h2 { color: var(--pm-white); }

/* Riquadri SDG: tessere quadrate affiancate, come le icone ufficiali del XD. */
.pm-sdgs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}
.pm-sdg {
	color: var(--pm-white);
	width: 180px;
	min-height: 180px;
	padding: 0.85rem 0.8rem;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: left;
}
/* Numero + etichetta in alto: l'etichetta sta in alto a destra del numero. */
.pm-sdg__top {
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
}
.pm-sdg__num {
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 0.9;
	flex: 0 0 auto;
}
.pm-sdg__label {
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
/* Icona (o placeholder) grande e centrata nella parte bassa della tessera. */
.pm-sdg__media {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 0.6rem;
}
.pm-sdg__img,
.pm-sdg__ph {
	display: block;
	width: 88px;
	height: 88px;
	object-fit: contain;
}
.pm-sdg__ph {
	border: 1px dashed rgba(255, 255, 255, 0.6);
	border-radius: 4px;
}
.pm-cofin__caption {
	font-weight: 700;
	margin-bottom: 1.8rem;
}
/* Loghi cofinanziamento: riga unica con divisori verticali (XD "La società"). */
.pm-partners--cofin {
	gap: 0;
	justify-content: center;
	max-width: 1000px;
	margin: 0 auto;
}
.pm-partners--cofin > * {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 2.6rem;
}
.pm-partners--cofin > * + * { border-left: 1px solid #dcdcdc; }
.pm-partners--cofin img { max-height: 56px; }

/* Pulsanti con icona download (Codice etico, Report di impatto). */
.pm-btn-dl {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 3.2rem 0.6rem 1.5rem;
	border-radius: 999px;
	background: var(--pm-orange);
	color: var(--pm-white);
	font-size: 0.62rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-decoration: none;
	transition: opacity 0.2s;
}
.pm-btn-dl:hover { color: var(--pm-white); opacity: 0.85; }
.pm-btn-dl--outline {
	background: var(--pm-white);
	color: var(--pm-navy);
	border: 1px solid var(--pm-navy);
}
.pm-btn-dl--outline:hover { color: var(--pm-navy); }
.pm-btn-dl__ico {
	position: absolute;
	right: -1px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--pm-navy);
	color: var(--pm-white);
	display: flex;
	align-items: center;
	justify-content: center;
}
.pm-btn-dl__ico svg { width: 15px; height: 15px; fill: currentColor; }
.pm-codice-etico { margin-top: 3.5rem; }
.pm-report-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1.2rem 1rem;
	margin-top: 3rem;
}
@media (max-width: 767.98px) {
	.pm-report-buttons { justify-content: center; }
	.pm-partners--cofin > * { padding: 0 1.2rem; }
	.pm-partners--cofin > * + * { border-left: 0; }
}
/* Titoletti piccoli (I nostri SDGs, caption cofinanziamento). */
.pm-title--sm { font-size: 1.05rem; font-weight: 700; }

/* Altezza minima di hero e fasce.
   svh = viewport "piccolo" del mobile: non cambia quando la barra del browser si ritrae,
   quindi il blocco non "salta" durante lo scroll. La prima riga è il fallback per i browser
   che non conoscono svh. L'hero è una copertina e resta più alto; parallax e imgblock sono
   fasce di contenuto e si accontentano di meno. */
.pm-page-hero--image {
	min-height: 70vh;
	min-height: 70svh;
}
/* Parallax e imgblock: stessa cover del XD (~a tutto schermo), in vh/svh così
   scalano su mobile. Niente cap in px per non rimpicciolirle sui monitor grandi. */
.pm-parallax, .pm-imgblock {
	min-height: 90vh;
	min-height: 90svh;
}
@media (min-width: 768px) {
	.pm-page-hero--image {
		min-height: 80vh;
		min-height: 80svh;
	}
}
@media (min-width: 992px) {
	.pm-page-hero--image { min-height: min(90vh, 900px); }
}

/* Altezza dettata dal media: il PHP scrive --pm-media-ratio con le proporzioni
   native della foto/del video, così il blocco ha l'altezza del media (come l'XD).
   min-content è la rete di sicurezza per non tagliare il contenuto su schermi stretti. */
.pm-media-ratio {
	aspect-ratio: var(--pm-media-ratio);
	min-height: min-content;
}

/* Sotto i 992px l'aspect-ratio va disattivato sulle bande di CONTENUTO: le
   proporzioni sono quelle del mockup a 1920, ma su mobile lo stesso testo va a
   capo molte più volte e non ci sta più. La banda è flex con align-items:center
   e overflow:hidden, quindi il testo in eccesso non "sborda": viene tagliato
   sopra e sotto (min-height:min-content non basta, Safari non lo applica ai
   flex container). Qui l'altezza torna dettata dal contenuto, con lo stesso
   minimo a schermo pieno delle altre bande.
   L'hero resta fuori: lì il contenuto è il solo titolo e l'altezza deve
   continuare a seguire il video/l'immagine. */
@media (max-width: 991.98px) {
	.pm-parallax.pm-media-ratio,
	.pm-imgblock.pm-media-ratio {
		aspect-ratio: auto;
		min-height: 90vh;
		min-height: 90svh;
	}
}

/* Regole per-pagina in home.css / postura-mente.css / servizi.css (vedi functions.php). */

/* css custom */
.alignright{
    float:right;
}
.allignleft{
    float:left;
}