/* ==========================================================================
   fabiomaiocchi.it — template su misura
   Palette: notte lapis, rosso lacca, nebbia, lino.
   Tipografia: Bodoni Moda (titoli) + Hanken Grotesk (testo).
   ========================================================================== */

@font-face {
	font-family: "Bodoni Moda";
	src: url("../fonts/bodoni-moda.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Bodoni Moda";
	src: url("../fonts/bodoni-moda-italic.woff2") format("woff2");
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Hanken Grotesk";
	src: url("../fonts/hanken-grotesk.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--notte: #0A1830;      /* fondo del cielo/lapis, dall'immagine della campana */
	--lapis: #24335C;
	--lacca: #983026;      /* rosso del telo del lettino e della cornice del mandala */
	--nebbia: #B9C4D9;     /* azzurro-grigio freddo, per il fondo notte */
	--filetto: rgba(22, 28, 43, .32);
	--filetto-chiaro: rgba(246, 242, 234, .42);
	--lino: #FBF9F5;       /* camicia di lino */
	--pietra: #EFE9DF;
	--inchiostro: #161C2B;
	--fumo: #5A6072;
	--filo: rgba(22, 28, 43, .14);
	--filo-chiaro: rgba(246, 242, 234, .18);
	--chiaro: #F6F2EA;

	--display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
	--text: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

	--wrap: 1240px;
	--gutter: clamp(16px, 4vw, 48px);
	--section: clamp(72px, 10vw, 140px);
	--radius: 2px;
	--ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

body {
	margin: 0;
	background: var(--lino);
	color: var(--inchiostro);
	font: 400 1.0625rem/1.7 var(--text);
	font-feature-settings: "ss01";
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--lacca); }

:focus-visible {
	outline: 2px solid var(--lacca);
	outline-offset: 3px;
}
.hero :focus-visible, .site-header :focus-visible, .maxims :focus-visible, .contact-band :focus-visible,
.site-footer :focus-visible, .page-head :focus-visible, .feature :focus-visible, .site-nav :focus-visible {
	outline-color: var(--nebbia);
}

h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -.01em;
	margin: 0 0 .5em;
	font-optical-sizing: auto;
}

em { font-style: italic; }

p { margin: 0 0 1.1em; }

.skip {
	position: absolute;
	left: 16px;
	top: -60px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--nebbia);
	color: var(--notte);
	font-weight: 600;
	text-decoration: none;
}
.skip:focus { top: 12px; }

.eyebrow {
	margin: 0 0 1.1rem;
	font: 600 .75rem/1.4 var(--text);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--lacca);
}
.eyebrow--light { color: var(--nebbia); }

.section-title {
	font-size: clamp(2.1rem, 4.6vw, 3.6rem);
	max-width: 18ch;
}
.section-title em { color: var(--lacca); }
.section-title--light { color: var(--chiaro); }
.section-title--light em { color: var(--nebbia); }

/* --------------------------------------------------------------------------
   Pulsanti e link
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	min-height: 52px;
	padding: 0 28px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font: 600 .95rem/1 var(--text);
	letter-spacing: .02em;
	text-decoration: none;
	transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn--primary { background: var(--chiaro); color: var(--notte); }
.btn--primary:hover { background: #fff; color: var(--lacca); }
.btn--ghost { border-color: var(--filo-chiaro); color: var(--chiaro); }
.btn--ghost:hover { border-color: var(--nebbia); color: var(--nebbia); }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: .7em;
	font-weight: 600;
	text-decoration: none;
	color: var(--inchiostro);
	border-bottom: 1px solid var(--lacca);
	padding-bottom: 4px;
}
.link-arrow::after {
	content: "";
	width: 22px;
	height: 1px;
	background: currentColor;
	box-shadow: 0 0 0 0 currentColor;
	transition: width .3s var(--ease);
}
.link-arrow:hover { color: var(--lacca); }
.link-arrow:hover::after { width: 34px; }
.link-arrow--back { flex-direction: row-reverse; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	color: var(--chiaro);
	transition: background-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.is-inner .site-header,
.site-header.is-scrolled {
	/* niente backdrop-filter: renderebbe l'header il riferimento del menu mobile a tutto schermo */
	background: var(--notte);
	box-shadow: 0 1px 0 var(--filo-chiaro);
}
.site-header__inner {
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin: 0 auto;
	padding: 18px var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.brand {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	line-height: 1;
}
.brand:hover { color: inherit; }
.brand__name {
	font: 500 1.6rem/1 var(--display);
	letter-spacing: .01em;
}
.brand__role {
	margin-top: 6px;
	font: 500 .66rem/1 var(--text);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--nebbia);
}

.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-nav__item { position: relative; }
.site-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: none;
	border: 0;
	color: inherit;
	font: 500 .95rem/1 var(--text);
	text-decoration: none;
	cursor: pointer;
}
.site-nav__link:hover,
.site-nav__item.is-current > .site-nav__link { color: var(--nebbia); }
.site-nav__item.is-current > .site-nav__link {
	text-decoration: underline;
	text-decoration-color: var(--nebbia);
	text-underline-offset: .5em;
}
.chev { transition: transform .3s var(--ease); }

.site-nav__sub {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 250px;
	margin: 0;
	padding: 12px 0;
	list-style: none;
	background: var(--notte);
	border: 1px solid var(--filo-chiaro);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.site-nav__sub a {
	display: block;
	padding: 9px 22px;
	color: var(--chiaro);
	text-decoration: none;
	font-size: .95rem;
}
.site-nav__sub a:hover,
.site-nav__sub a[aria-current] { color: var(--nebbia); }

.has-sub.is-open > .site-nav__sub,
.has-sub:hover > .site-nav__sub,
.has-sub:focus-within > .site-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.has-sub.is-open .chev,
.has-sub:hover .chev { transform: rotate(180deg); }

.site-nav__call {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid var(--filo-chiaro);
	border-radius: 40px;
	text-decoration: none;
	font: 600 .9rem/1 var(--text);
	letter-spacing: .03em;
	color: inherit;
	white-space: nowrap;
}
.site-nav__call:hover { border-color: var(--nebbia); color: var(--nebbia); }

.nav-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	background: none;
	border: 0;
	color: inherit;
	font: 600 .8rem/1 var(--text);
	letter-spacing: .18em;
	text-transform: uppercase;
	cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before {
	display: block;
	width: 22px;
	height: 1px;
	background: currentColor;
	transition: transform .3s var(--ease);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { content: ""; position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { transform: translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(-6px) rotate(-90deg); }

@media (max-width: 1020px) {
	.nav-toggle { display: inline-flex; }
	.site-nav {
		position: fixed;
		inset: 0;
		z-index: -1;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 24px;
		padding: 104px var(--gutter) 40px;
		background: var(--notte);
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transition: opacity .35s var(--ease), visibility .35s;
	}
	.site-nav.is-open { opacity: 1; visibility: visible; }
	.site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.site-nav__item { border-bottom: 1px solid var(--filo-chiaro); }
	.site-nav__link {
		width: 100%;
		justify-content: space-between;
		padding: 18px 0;
		font: 400 1.7rem/1.1 var(--display);
	}
	.site-nav__sub {
		position: static;
		min-width: 0;
		padding: 0 0 14px;
		border: 0;
		background: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
	}
	.has-sub.is-open > .site-nav__sub { display: block; }
	.has-sub:hover .chev { transform: none; }
	.has-sub.is-open .chev { transform: rotate(180deg); }
	.site-nav__sub a { padding: 8px 0 8px 16px; font-size: 1.05rem; }
	.site-nav__call { align-self: flex-start; padding: 14px 22px; font-size: 1rem; }
	body.nav-open { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	background: #06122A; /* tono medio del fondo della foto */
	color: var(--chiaro);
	overflow: hidden;
	isolation: isolate;
}
.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.hero__img,
.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 100% 50%;
}
@media (min-width: 761px) {
	/* su schermi larghi la campana resta a destra, più piccola, con bordi sfumati */
	.hero__img,
	.hero__video {
		inset: 50% 0 auto auto;
		width: min(86%, 150vh);
		height: auto;
		aspect-ratio: 2560 / 1429;
		transform: translateY(-50%);
		object-fit: cover;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(90deg, transparent 0, #000 38%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
		mask-composite: intersect;
	}
}
.hero__video { opacity: 0; transition: opacity 1.2s var(--ease); }
.hero__video.is-playing { opacity: 1; }
.hero__media::after {
	/* tiene leggibile il testo a sinistra */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(6, 18, 42, .94) 0%, rgba(6, 18, 42, .7) 40%, rgba(6, 18, 42, 0) 66%);
}

/* La firma: un filo che vibra come una corda e torna dritto */
.hero__axis {
	position: absolute;
	top: 112px;
	bottom: 0;
	left: calc(max(var(--gutter), (100vw - var(--wrap)) / 2) - 30px);
	width: 60px;
	height: calc(100% - 112px);
	z-index: -1;
	overflow: visible;
}
.hero__axis path,
.maxims__axis path {
	fill: none;
	stroke: var(--filetto-chiaro);
	stroke-width: 1.2;
	vector-effect: non-scaling-stroke;
}

.hero__content {
	width: 100%;
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin: 0 auto;
	padding: 140px var(--gutter) 96px calc(var(--gutter) + clamp(28px, 4vw, 64px));
}
.hero__title {
	max-width: 11ch;
	margin-bottom: 28px;
	font-size: clamp(2.7rem, 5.6vw, 5.4rem);
	font-weight: 400;
	line-height: .98;
	letter-spacing: -.02em;
}
.hero__title em {
	display: block;
	color: var(--nebbia);
}
.hero__lead {
	max-width: 46ch;
	margin-bottom: 40px;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	color: rgba(246, 242, 234, .82);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* entrata */
.hero .eyebrow,
.hero__title,
.hero__lead,
.hero__actions {
	animation: rise 1.1s var(--ease) both;
}
.hero__title { animation-delay: .15s; }
.hero__lead { animation-delay: .35s; }
.hero__actions { animation-delay: .5s; }
@keyframes rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
	.hero { align-items: flex-end; }
	.hero__img, .hero__video { object-position: 82% 30%; }
	.hero__media::after {
		background: linear-gradient(180deg, rgba(10, 24, 48, .2) 0%, rgba(10, 24, 48, .7) 45%, rgba(10, 24, 48, .97) 72%);
	}
	.hero__content { padding-top: 46vh; padding-bottom: 56px; }
	.hero__actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Sezioni comuni
   -------------------------------------------------------------------------- */
.method__inner,
.therapies__inner,
.journal__inner,
.contact-band__inner,
.maxims__inner {
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin: 0 auto;
	padding: var(--section) var(--gutter);
}
.section-head { margin-bottom: clamp(40px, 6vw, 72px); }
.section-head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}
.section-head--split .section-title { margin-bottom: 0; }

/* Metodo */
.method__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(40px, 7vw, 110px);
	align-items: center;
}
.method__photo {
	position: relative;
	margin: 0;
}
.method__photo img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 62% 50%;
}
.method__photo::before {
	/* un filo sottile che "regge" la foto */
	content: "";
	position: absolute;
	top: -28px;
	bottom: -28px;
	left: -22px;
	width: 1px;
	background: var(--filetto);
}
.method__text > p:not(.eyebrow) { max-width: 58ch; color: #2E3445; }

.credentials {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 32px;
	margin: 32px 0 40px;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--filo);
}
.credentials li {
	padding: 14px 0 14px 20px;
	border-bottom: 1px solid var(--filo);
	position: relative;
	font-weight: 500;
	font-size: .98rem;
}
.credentials li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 7px;
	height: 7px;
	border: 1px solid var(--inchiostro);
	border-radius: 50%;
	transform: translateY(-50%);
}

@media (max-width: 860px) {
	.method__inner { grid-template-columns: 1fr; }
	.method__photo { max-width: 520px; }
	.method__photo::before { left: -12px; }
	.credentials { grid-template-columns: 1fr; }
}

/* Terapie */
.therapies { background: var(--pietra); }

.feature {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	background: var(--notte);
	color: var(--chiaro);
	margin-bottom: clamp(48px, 7vw, 88px);
}
.feature__media { display: block; overflow: hidden; }
.feature__media img {
	width: 100%;
	height: 100%;
	min-height: 360px;
	object-fit: cover;
	transition: transform 1.4s var(--ease);
}
.feature:hover .feature__media img { transform: scale(1.03); }
.feature__body {
	padding: clamp(32px, 5vw, 64px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.feature__tag {
	margin-bottom: 18px;
	font: 600 .72rem/1.4 var(--text);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--nebbia);
}
.feature__title { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 400; }
.feature__title a { text-decoration: none; }
.feature__title a:hover { color: var(--nebbia); }
.feature__body > p:not(.feature__tag) { color: rgba(246, 242, 234, .8); }
.feature .link-arrow { color: var(--chiaro); border-color: var(--nebbia); align-self: flex-start; margin-top: 12px; }
.feature .link-arrow:hover { color: var(--nebbia); }

@media (max-width: 860px) {
	.feature { grid-template-columns: 1fr; }
	.feature__media img { min-height: 0; aspect-ratio: 3 / 2; }
}

.therapy-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--filo);
	counter-reset: none;
}
.therapy { border-bottom: 1px solid var(--filo); }
.therapy__link {
	position: relative;
	display: grid;
	grid-template-columns: 28px minmax(0, 5fr) minmax(0, 6fr);
	align-items: baseline;
	gap: 0 clamp(16px, 3vw, 48px);
	padding: clamp(22px, 3vw, 34px) 0;
	text-decoration: none;
	color: var(--inchiostro);
}
.therapy__string {
	align-self: stretch;
	width: 28px;
	position: relative;
}
.therapy__string::before {
	/* la corda: a riposo dritta, vibra al passaggio */
	content: "";
	position: absolute;
	left: 50%;
	top: 6px;
	bottom: 6px;
	width: 1px;
	background: var(--filetto);
	transform-origin: 50% 50%;
}
.therapy__link:hover .therapy__string::before,
.therapy__link:focus-visible .therapy__string::before {
	animation: pluck .7s var(--ease);
}
@keyframes pluck {
	0% { transform: translateX(0) scaleX(1); }
	15% { transform: translateX(4px) skewY(0) scaleX(2); }
	30% { transform: translateX(-3px) scaleX(2); }
	45% { transform: translateX(2px) scaleX(1.5); }
	60% { transform: translateX(-1px); }
	80% { transform: translateX(.5px); }
	100% { transform: none; }
}
.therapy__name {
	font: 400 clamp(1.7rem, 3vw, 2.5rem)/1.05 var(--display);
	transition: color .3s var(--ease), transform .4s var(--ease);
}
.therapy__text {
	font-size: 1rem;
	color: var(--fumo);
	max-width: 52ch;
}
.therapy__link:hover .therapy__name { color: var(--lacca); transform: translateX(6px); }

.therapy__img {
	position: absolute;
	right: 0;
	top: 50%;
	width: 220px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	opacity: 0;
	transform: translate(12px, -50%) rotate(1.5deg);
	transition: opacity .35s var(--ease), transform .5s var(--ease);
	pointer-events: none;
	box-shadow: 0 24px 50px -20px rgba(10, 24, 48, .45);
}
@media (hover: hover) and (min-width: 1100px) {
	.therapy__link { padding-right: 250px; }
	.therapy__link:hover .therapy__img { opacity: 1; transform: translate(0, -50%) rotate(0); }
}
@media (hover: none), (max-width: 1099px) {
	.therapy__img { display: none; }
}
@media (max-width: 700px) {
	.therapy__link { grid-template-columns: 20px minmax(0, 1fr); }
	.therapy__string { grid-row: span 2; width: 20px; }
	.therapy__text { margin-top: 10px; }
}

/* Massime */
.maxims {
	background: var(--notte);
	color: var(--chiaro);
	text-align: center;
}
.maxims__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.maxims__axis { width: 20px; height: 72px; margin-bottom: 36px; overflow: visible; }
.maxims__stage {
	display: grid;
	width: 100%;
	max-width: 980px;
	min-height: 2.4em;
	font-size: clamp(1.9rem, 4.4vw, 3.6rem);
}
.maxim {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .9s var(--ease), transform .9s var(--ease);
	visibility: hidden;
}
.maxim.is-active { opacity: 1; transform: none; visibility: visible; }
.maxim p {
	margin: 0;
	font: italic 400 1em/1.15 var(--display);
}
.maxim p::before { content: "«"; color: var(--nebbia); }
.maxim p::after { content: "»"; color: var(--nebbia); }
.maxims__by {
	margin: 32px 0 28px;
	font: 600 .75rem/1 var(--text);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--nebbia);
}
.maxims__dots { display: flex; gap: 6px; }
.maxims__dot {
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	position: relative;
}
.maxims__dot::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 18px;
	height: 1px;
	background: var(--filo-chiaro);
	transform: translate(-50%, -50%);
	transition: background-color .3s, width .3s var(--ease);
}
.maxims__dot[aria-pressed="true"]::before { background: var(--nebbia); width: 26px; }

/* Blog */
.journal__grid,
.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 40px);
}
.post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 32px 0 0;
	border-top: 1px solid var(--inchiostro);
}
.post-card__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 22px; }
.post-card__title { font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-weight: 500; }
.post-card__title a { text-decoration: none; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card p { color: var(--fumo); font-size: 1rem; }
.post-card__more {
	margin-top: auto;
	font-weight: 600;
	font-size: .9rem;
	color: var(--lacca);
}
.post-card:hover .post-card__title { color: var(--lacca); }
@media (max-width: 900px) {
	.journal__grid, .blog-grid { grid-template-columns: 1fr; }
}

/* Fascia contatti */
.contact-band { background: var(--lapis); color: var(--chiaro); }
.contact-band__inner {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: end;
}
.contact-band__text > p:last-child { max-width: 48ch; color: rgba(246, 242, 234, .78); margin: 0; }
.contact-band__actions { display: flex; flex-direction: column; gap: 14px; }
.contact-band__phone {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--filo-chiaro);
	text-decoration: none;
}
.contact-band__phone:hover { color: var(--nebbia); }
.contact-band__label {
	font: 600 .7rem/1 var(--text);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--nebbia);
}
.contact-band__value { font: 400 clamp(1.8rem, 3vw, 2.4rem)/1.1 var(--display); }
.contact-band__value--small { font-size: clamp(1.3rem, 2.2vw, 1.6rem); word-break: break-word; }
.contact-band .btn { margin-top: 10px; align-self: flex-start; }
@media (max-width: 860px) {
	.contact-band__inner { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Pagine interne
   -------------------------------------------------------------------------- */
.is-inner .site-main {
	padding-top: 84px;
	background: linear-gradient(var(--notte) 0 160px, var(--lino) 160px);
}

.page-head {
	background: var(--notte);
	color: var(--chiaro);
}
.page-head__inner {
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin: 0 auto;
	padding: clamp(56px, 8vw, 110px) var(--gutter) clamp(40px, 6vw, 72px);
	position: relative;
}
.page-head__inner::before {
	content: "";
	position: absolute;
	left: calc(var(--gutter) - 22px);
	top: clamp(56px, 8vw, 110px);
	bottom: clamp(40px, 6vw, 72px);
	width: 1px;
	background: var(--filetto-chiaro);
}
.page-head .eyebrow { color: var(--nebbia); }
.page-head__title {
	max-width: 16ch;
	margin: 0;
	font-size: clamp(2.6rem, 6.4vw, 5.2rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.02em;
}
.page-head__title em { color: var(--nebbia); }
.page-head__lead { max-width: 52ch; margin: 24px 0 0; color: rgba(246, 242, 234, .8); }

.page-head__media {
	/* l'immagine "cade" a metà tra notte e lino */
	margin: 0;
	padding: 0 max(var(--gutter), (100% - var(--wrap)) / 2);
	background: linear-gradient(var(--notte) 50%, var(--lino) 50%);
}
.page-head__media img {
	position: relative;
	width: 100%;
	max-height: 560px;
	object-fit: cover;
}

.page-body {
	max-width: calc(720px + 2 * var(--gutter));
	margin: 0 auto;
	padding: clamp(48px, 7vw, 96px) var(--gutter);
}

/* Testi degli articoli */
.prose { font-size: 1.125rem; line-height: 1.8; color: #262C3B; }
.prose h2, .prose h3, .prose h4 { margin: 1.8em 0 .6em; color: var(--inchiostro); }
.prose h2 { font-size: 2.1rem; }
.prose h3 { font-size: 1.6rem; }
.prose > :first-child { margin-top: 0; }
.prose > p:first-of-type {
	font: 400 1.5rem/1.45 var(--display);
	color: var(--inchiostro);
}
.prose a { color: var(--lacca); }
.prose img { margin: 2em auto; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .5em; }
.prose blockquote {
	margin: 2em 0;
	padding: 0 0 0 28px;
	border-left: 1px solid var(--filetto);
	font: italic 400 1.5rem/1.4 var(--display);
}
.prose hr { border: 0; border-top: 1px solid var(--filo); margin: 3em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.prose td, .prose th { padding: 10px; border-bottom: 1px solid var(--filo); text-align: left; }
/* resti del vecchio page builder */
.prose .uk-grid, .prose [class*="uk-"] { max-width: 100%; }

.other-cures {
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin: 0 auto;
	padding: 0 var(--gutter) var(--section);
}
.other-cures ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.other-cures a {
	display: inline-block;
	padding: 12px 20px;
	border: 1px solid var(--filo);
	border-radius: 40px;
	text-decoration: none;
	font-weight: 500;
}
.other-cures a:hover { border-color: var(--lacca); color: var(--lacca); }

.page-back {
	max-width: calc(720px + 2 * var(--gutter));
	margin: 0 auto;
	padding: 0 var(--gutter) var(--section);
}

.page--blog .blog-grid {
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin: 0 auto;
	padding: clamp(56px, 8vw, 100px) var(--gutter) var(--section);
}
.pager { text-align: center; padding-bottom: var(--section); }

/* Pagina contatti (com_contact) */
.com-contact,
.contact {
	max-width: calc(760px + 2 * var(--gutter));
	margin: 0 auto;
	padding: clamp(48px, 7vw, 96px) var(--gutter);
}
.contact-form fieldset { border: 0; padding: 0; margin: 0; }
.contact-form legend { font: 400 2rem/1.1 var(--display); margin-bottom: 24px; }
.control-group { margin-bottom: 22px; }
.control-label label { display: block; margin-bottom: 8px; font-weight: 600; font-size: .95rem; }
.form-control,
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid rgba(22, 28, 43, .28);
	border-radius: var(--radius);
	background: #fff;
	font: inherit;
	color: inherit;
}
.form-control:focus { outline: 2px solid var(--nebbia); outline-offset: 1px; border-color: var(--lacca); }
.contact-form .btn,
.contact-form button[type="submit"] {
	min-height: 52px;
	padding: 0 32px;
	border: 0;
	background: var(--notte);
	color: var(--chiaro);
	font: 600 1rem/1 var(--text);
	cursor: pointer;
}
.contact-form button[type="submit"]:hover { background: var(--lacca); }
.form-check { display: flex; gap: 10px; align-items: flex-start; }
.star, .text-danger { color: #A3332B; }
.invalid { border-color: #A3332B !important; }

/* Messaggi di sistema */
#system-message-container {
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin: 0 auto;
	padding: 0 var(--gutter);
}
joomla-alert, .alert {
	display: block;
	margin: 24px 0;
	padding: 16px 20px;
	border-left: 3px solid var(--lacca);
	background: var(--pietra);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
	background: var(--notte);
	color: rgba(246, 242, 234, .8);
	font-size: .95rem;
}
.site-footer__inner {
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin: 0 auto;
	padding: clamp(56px, 7vw, 88px) var(--gutter) 40px;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 40px;
}
.site-footer p { margin: 0 0 .5em; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--nebbia); }
.site-footer__name { font: 400 2rem/1 var(--display); color: var(--chiaro); margin-bottom: 14px !important; }
.site-footer__legal {
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin: 0 auto !important;
	padding: 22px var(--gutter) 32px;
	border-top: 1px solid var(--filo-chiaro);
	font-size: .82rem;
	color: rgba(246, 242, 234, .55);
}
@media (max-width: 760px) {
	.site-footer__inner { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Movimento ridotto
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.hero__video { display: none; }
}

/* Errore / offline */
.is-error { background: var(--notte); color: var(--chiaro); }
.error-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: calc(820px + 2 * var(--gutter));
	margin: 0 auto;
	padding: 80px var(--gutter);
}
.error-page .btn { margin-top: 24px; }
.offline-login { display: grid; gap: 12px; max-width: 360px; margin-top: 32px; }

/* Pagina contatti */
.contact-layout {
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin: 0 auto;
	padding: clamp(48px, 7vw, 96px) var(--gutter) var(--section);
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(40px, 7vw, 110px);
	align-items: start;
}
.contact-layout__info { display: flex; flex-direction: column; gap: 22px; }
.contact-layout__info .contact-band__label { color: var(--lacca); }
.contact-direct {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--filo);
	text-decoration: none;
}
.contact-direct__value { font: 400 clamp(1.8rem, 3vw, 2.4rem)/1.1 var(--display); }
.contact-direct__value--small { font-size: clamp(1.25rem, 2vw, 1.5rem); word-break: break-word; }
.contact-layout__note { color: var(--fumo); font-size: .98rem; }
.contact-layout__form .contact-form legend { display: none; }
.contact-layout__form .form-check-input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--notte); }
@media (max-width: 860px) {
	.contact-layout { grid-template-columns: 1fr; }
}

/* Finestra modale (informativa privacy nel form) */
.modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1055;
	overflow-y: auto;
	padding: 4vh var(--gutter);
}
.modal.show { display: block; }
.modal-dialog {
	max-width: 880px;
	margin: 0 auto;
	background: var(--lino);
	box-shadow: 0 30px 80px -20px rgba(6, 18, 42, .6);
}
.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 24px;
	border-bottom: 1px solid var(--filo);
}
.modal-title { margin: 0; font-size: 1.5rem; }
.btn-close {
	width: 40px;
	height: 40px;
	border: 0;
	background: none;
	cursor: pointer;
	position: relative;
}
.btn-close::before,
.btn-close::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 20px;
	height: 1.5px;
	background: var(--inchiostro);
	transform: translate(-50%, -50%) rotate(45deg);
}
.btn-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.modal-body { height: 72vh; }
.modal-body iframe { display: block; width: 100%; height: 100%; border: 0; }
.modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1050;
	background: #06122A;
	opacity: .7;
}
.modal-backdrop.fade:not(.show), .modal.fade:not(.show) { opacity: 0; }
.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
}

/* Il bottone principale su fondo chiaro diventa blu notte */
.method .btn--primary, .page-body .btn--primary, .contact-layout .btn--primary { background: var(--notte); color: var(--chiaro); }
.site-footer .eyebrow { color: var(--nebbia); }

/* Selettore lingua */
.lang-switch {
	display: flex;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.lang-switch a {
	display: inline-block;
	padding: 8px 6px;
	font: 600 .75rem/1 var(--text);
	letter-spacing: .12em;
	text-decoration: none;
	color: rgba(246, 242, 234, .6);
}
.lang-switch a:hover { color: var(--chiaro); }
.lang-switch a[aria-current] { color: var(--chiaro); text-decoration: underline; text-underline-offset: .45em; }
@media (min-width: 1021px) {
	.site-nav { gap: 18px; }
	.site-nav__list { gap: 0; }
	.site-nav__link { padding: 10px 11px; }
}
@media (max-width: 1020px) {
	.lang-switch { gap: 8px; }
	.lang-switch a { padding: 10px 12px; border: 1px solid var(--filo-chiaro); font-size: .85rem; }
}