/*
 * GNA Bianco — pagine interne nello stile della homepage (v2.7.0).
 * Caricato solo sulle pagine ridisegnate (vedi inc/pages.php).
 * Stessi token di bianco.css: nero, bianco, filetti, Instrument Serif + Manrope.
 */

/* ================================================== PRIMA SCHERMATA (scura) */

.gna-pg-hero {
	position: relative;
	overflow: hidden;
	background: var(--ink);
	color: var(--on-dark);
	isolation: isolate;
}

.gna-pg-hero__media {
	position: relative;
	height: min(112vw, 60svh);
	margin: 0;
	overflow: hidden;
}

.gna-pg-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 28%;
	filter: brightness(.92);
}

.gna-pg-hero__shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(0deg, #0A0A0A 0%, rgba(10, 10, 10, .55) 22%, rgba(10, 10, 10, 0) 48%);
	/* v2.11.21: 2 px oltre la foto: sui telefoni con densità 2,25–2,625 il
	   bordo inferiore della foto restava scoperto (filo grigio sotto il titolo). */
	height: calc(min(112vw, 60svh) + 2px);
}

.gna-pg-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	align-content: end;
	gap: 22px;
	padding-top: 40px;
	padding-bottom: clamp(48px, 7vw, 88px);
}

.gna-pg-hero.has-img .gna-pg-hero__inner {
	margin-top: -96px;
	padding-top: 0;
}

.gna-pg-hero__kicker {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 28px;
	margin: 0;
	font: 600 11px/1.6 var(--sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--on-dark);
}

.gna-pg-hero__kicker span + span {
	color: var(--on-dark-soft);
}

.gna-pg-hero__kicker span + span::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 1px;
	margin: 0 20px 0 -8px;
	vertical-align: middle;
	background: var(--on-dark);
}

body.gna-bianco .gna-pg-hero__title {
	max-width: 14ch;
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(46px, 13vw, 132px);
	font-weight: 400;
	line-height: .94;
	letter-spacing: -.022em;
	color: var(--on-dark);
	text-wrap: balance;
	overflow-wrap: anywhere;
	hyphens: manual;
}

.gna-pg-hero__lede {
	max-width: 30ch;
	margin: 0;
	font: 400 clamp(24px, 2.5vw, 40px)/1.12 var(--serif);
	letter-spacing: -.01em;
	color: rgba(255, 255, 255, .86);
	text-wrap: balance;
}

.gna-pg-hero__lede em {
	font-style: italic;
	color: var(--on-dark);
}

.gna-pg-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 10px;
}

@media (max-width: 699px) {
	.gna-pg-hero__kicker {
		display: grid;
		gap: 2px;
		letter-spacing: .2em;
	}

	.gna-pg-hero__kicker span + span::before {
		display: none;
	}

	.gna-pg-hero__ctas .gna-btn {
		width: 100%;
		justify-content: space-between;
		padding: 0 18px;
		font-size: 11px;
		letter-spacing: .13em;
	}
}

/* Desktop: foto a destra che sfuma nel nero, testo a sinistra (come la homepage). */
@media (min-width: 1080px) {
	.gna-pg-hero {
		display: flex;
		align-items: flex-end;
		min-height: clamp(420px, 56svh, 620px);
	}

	.gna-pg-hero.has-img {
		min-height: clamp(600px, calc(100svh - var(--hh)), 900px);
	}

	.gna-pg-hero__media,
	.gna-pg-hero__shade {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: max(40%, calc(100% - 1060px));
		height: auto;
	}

	.gna-pg-hero__shade {
		background:
			linear-gradient(90deg, #0A0A0A 0%, rgba(10, 10, 10, .88) 12%, rgba(10, 10, 10, .4) 36%, rgba(10, 10, 10, .06) 64%, rgba(10, 10, 10, .16) 100%),
			linear-gradient(0deg, rgba(10, 10, 10, .8) 0%, rgba(10, 10, 10, 0) 26%);
	}

	.gna-pg-hero__img {
		object-position: 50% 30%;
	}

	.gna-pg-hero__inner,
	.gna-pg-hero.has-img .gna-pg-hero__inner {
		margin-top: 0;
		padding-top: 96px;
		padding-bottom: clamp(64px, 7vw, 112px);
	}

	body.gna-bianco .gna-pg-hero__title {
		font-size: clamp(72px, 7.4vw, 136px);
		max-width: 12ch;
	}

	.gna-pg-hero__ctas {
		margin-top: 18px;
	}

	.gna-pg-hero__ctas .gna-btn {
		white-space: nowrap;
	}
}

/* Titoli lunghi: un passo più piccoli. */
body.gna-bianco .gna-pg-hero__title.is-long {
	max-width: 18ch;
	font-size: clamp(40px, 9.6vw, 96px);
}

@media (min-width: 1080px) {
	body.gna-bianco .gna-pg-hero__title.is-long {
		font-size: clamp(60px, 5.2vw, 96px);
	}
}

/* ============================================================ SEZIONI */

.gna-pg-content {
	padding-block: clamp(24px, 4vw, 64px) clamp(56px, 8vw, 128px);
}

.gna-pg-sec {
	padding-block: clamp(40px, 6vw, 96px);
}

.gna-pg-sec + .gna-pg-sec > .gna-wrap:first-child {
	position: relative;
}

.gna-pg-sec + .gna-pg-sec > .gna-wrap:first-child::before {
	content: "";
	position: absolute;
	top: calc(-1 * clamp(40px, 6vw, 96px));
	left: var(--gutter);
	right: var(--gutter);
	height: 1px;
	background: var(--line);
}

.gna-pg-sec__grid {
	display: grid;
	gap: 28px;
}

.gna-pg-sec__head {
	display: grid;
	gap: 18px;
	align-content: start;
}

.gna-pg-sec__eyebrow {
	font-weight: 500;
	letter-spacing: .3em;
	color: var(--ink-mute);
}

.gna-pg-sec__head--label .gna-pg-sec__eyebrow {
	max-width: 22ch;
	font: 400 clamp(26px, 2.5vw, 38px)/1.12 var(--serif);
	letter-spacing: .015em;
	color: var(--ink);
	text-wrap: balance;
}

.gna-pg-sec__title {
	margin: 0;
	font: 400 clamp(36px, 5vw, 72px)/1 var(--serif);
	letter-spacing: -.015em;
	color: var(--ink);
	text-wrap: balance;
}

.gna-pg-sec__title em {
	font-style: italic;
}

.gna-pg-sec__body {
	min-width: 0;
	max-width: 680px;
}

@media (min-width: 1080px) {
	.gna-pg-sec__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: 32px;
	}

	.gna-pg-sec__head {
		grid-column: 1 / 6;
		position: sticky;
		top: calc(var(--hh-s) + 40px);
	}

	.gna-pg-sec__body {
		grid-column: 7 / 13;
	}

	/* Sezioni senza titolo: colonna di lettura centrata. */
	.gna-pg-sec--nohead .gna-pg-sec__body {
		grid-column: 4 / 11;
		max-width: 720px;
	}
}

/* --------------------------------------------------------- testo */

.gna-pg-p {
	margin: 0 0 1.15em;
	font: 400 17px/1.75 var(--sans);
	color: var(--ink-soft);
}

.gna-pg-p strong,
.gna-pg-list strong,
.gna-pg-steps strong {
	font-weight: 600;
	color: var(--ink);
}

.gna-pg-p a,
.gna-pg-list a,
.gna-pg-faq__a a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.gna-pg-p a:hover {
	color: var(--bordeaux);
}

/* Il primo paragrafo della pagina fa da attacco: più grande, in serif. */
.gna-pg-sec--first .gna-pg-sec__body > .gna-pg-p:first-child {
	margin-bottom: 1em;
	font: 400 clamp(23px, 2.1vw, 32px)/1.28 var(--serif);
	letter-spacing: -.005em;
	color: var(--ink);
}

.gna-pg-sec--first .gna-pg-sec__body > .gna-pg-p:first-child strong {
	font-weight: 400;
	font-style: italic;
}

.gna-pg-label {
	margin: 2.4em 0 1.1em;
	font: 600 12px/1.5 var(--sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ink);
}

.gna-pg-sec__body > .gna-pg-label:first-child {
	margin-top: 0;
}

.gna-pg-sub {
	margin: 1.6em 0 .6em;
	font: 400 clamp(25px, 2.3vw, 34px)/1.12 var(--serif);
	letter-spacing: -.01em;
	color: var(--ink);
	text-wrap: balance;
}

.gna-pg-sec__body > .gna-pg-sub:first-child {
	margin-top: 0;
}

.gna-pg-quote {
	margin: 1.8em 0 1.8em;
	padding: 28px 0 0;
	border-top: 1px solid var(--ink);
}

.gna-pg-quote p {
	margin: 0;
	font: italic 400 clamp(28px, 3vw, 44px)/1.1 var(--serif);
	letter-spacing: -.01em;
	color: var(--ink);
	text-wrap: balance;
}

/* Elenchi: righe con filetto, come i servizi della homepage. */
.gna-pg-list {
	margin: .4em 0 1.6em;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.gna-pg-list li {
	position: relative;
	margin: 0;
	padding: 15px 0 15px 34px;
	border-bottom: 1px solid var(--line);
	font: 400 16.5px/1.6 var(--sans);
	color: var(--ink-soft);
}

.gna-pg-list li.has-mark {
	padding-left: 0;
}

.gna-pg-list li.has-mark::before {
	display: none;
}

.gna-pg-list li::before {
	content: "";
	position: absolute;
	top: 1.55em;
	left: 0;
	width: 16px;
	height: 1px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: var(--ink);
	transform: none;
}

/* Passaggi numerati («1. Brief e visione»). */
.gna-pg-steps {
	margin: .4em 0 1.6em;
	padding: 0;
	list-style: none;
	counter-reset: none;
	border-top: 1px solid var(--line);
}

.gna-pg-steps li {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	align-items: baseline;
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
}

.gna-pg-steps__n {
	font: 400 34px/1 var(--serif);
	color: var(--ink);
}

.gna-pg-steps__t {
	font: 500 17px/1.5 var(--sans);
	color: var(--ink);
}

.gna-pg-cta {
	margin: 2.2em 0 0;
}

.gna-pg-cta .gna-btn {
	max-width: 100%;
}

/* Contatti (Redazione, Ufficio stampa…). */
.gna-pg-contacts {
	display: grid;
	gap: 0;
	margin: 1.6em 0 0;
	border-top: 1px solid var(--line);
}

.gna-pg-contacts > div {
	display: grid;
	gap: 6px;
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
}

.gna-pg-contacts dt {
	font: 600 11px/1.5 var(--sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.gna-pg-contacts dd {
	margin: 0;
	font: 400 clamp(22px, 2vw, 28px)/1.2 var(--serif);
}

.gna-pg-contacts a {
	color: var(--ink);
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size var(--t2) var(--ease);
}

.gna-pg-contacts a:hover {
	background-size: 100% 1px;
}

@media (min-width: 700px) {
	.gna-pg-contacts {
		grid-template-columns: 1fr 1fr;
		column-gap: 32px;
	}
}

/* Domande frequenti. */
.gna-pg-faq {
	margin: 1.2em 0 1.6em;
	border-top: 1px solid var(--ink);
}

.gna-pg-faq__item {
	border-bottom: 1px solid var(--line);
}

.gna-pg-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 64px;
	padding: 18px 0;
	font: 500 17.5px/1.4 var(--sans);
	color: var(--ink);
	cursor: pointer;
	list-style: none;
}

.gna-pg-faq__item summary::-webkit-details-marker {
	display: none;
}

.gna-pg-faq__icon {
	position: relative;
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
}

.gna-pg-faq__icon::before,
.gna-pg-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 14px;
	height: 1px;
	background: currentColor;
	transition: transform var(--t2) var(--ease);
}

.gna-pg-faq__icon::after {
	transform: rotate(90deg);
}

.gna-pg-faq__item[open] .gna-pg-faq__icon::after {
	transform: rotate(0deg);
}

.gna-pg-faq__item summary:hover {
	color: var(--bordeaux);
}

.gna-pg-faq__a {
	padding: 0 0 22px;
}

.gna-pg-faq__a .gna-pg-p {
	font-size: 16px;
}

.gna-pg-faq__a .gna-pg-list {
	margin-top: 0;
}

.gna-pg-faq__a .gna-pg-label {
	margin-top: 1em;
}

/* --------------------------------------------------------- foto */

/* v2.8.1: le pagine interne sono a colori (il bianco e nero resta alla homepage). */
.gna-pg img {
	filter: none;
}

.gna-pg-inimg {
	margin: 1.6em 0;
}

.gna-pg-inimg img {
	display: block;
	width: 100%;
	height: auto;
}

.gna-pg-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: clamp(40px, 6vw, 96px);
}

.gna-pg-gallery--1 {
	grid-template-columns: minmax(0, 1fr);
	max-width: 760px;
	margin-inline: auto;
}

.gna-pg-gallery__item {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--ivory-2);
}

.gna-pg-gallery--1 .gna-pg-gallery__item {
	aspect-ratio: auto;
}

.gna-pg-gallery__item img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 1200ms var(--ease);
}

.gna-pg-gallery--1 .gna-pg-gallery__item img {
	height: auto;
}

.gna-pg-gallery__item:hover img {
	transform: scale(1.03);
}

@media (min-width: 1080px) {
	.gna-pg-gallery {
		gap: 14px;
	}

	.gna-pg-gallery--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.gna-pg-gallery--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * v2.10.4: nessun vuoto nelle gallerie.
 * - Foto con zone trasparenti che restano tali anche dopo il ritaglio (per
 *   esempio una foto rotonda, inc/pages.php): intere e senza fondo grigio.
 * - Due colonne (smartphone e tablet) con foto dispari: l'ultima prende la riga.
 * - Quattro colonne con più di 4 foto: l'ultima riga si allarga e la riempie.
 */
.gna-pg-gallery__item:has(img.is-cutout),
.gna-pg-inimg:has(img.is-cutout) {
	background: none;
}

.gna-pg-gallery__item img.is-cutout {
	object-fit: contain;
}

/* Una sola foto molto alta (per esempio una metà ritagliata): al massimo quasi uno schermo, riempita. */
.gna-pg-gallery--1 .gna-pg-gallery__item img:not(.is-cutout) {
	max-height: min(88vh, 960px);
	object-fit: cover;
}

@media (max-width: 1079px) {
	.gna-pg-gallery:not(.gna-pg-gallery--1) > .gna-pg-gallery__item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		aspect-ratio: 3 / 2;
	}
}

@media (min-width: 1080px) {
	.gna-pg-gallery--4 {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.gna-pg-gallery--4 > .gna-pg-gallery__item {
		grid-column: span 3;
	}

	.gna-pg-gallery--4 > .gna-pg-gallery__item:nth-child(4n+1):last-child {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 7;
	}

	.gna-pg-gallery--4 > .gna-pg-gallery__item:nth-child(4n+1):nth-last-child(2),
	.gna-pg-gallery--4 > .gna-pg-gallery__item:nth-child(4n+1):nth-last-child(2) + .gna-pg-gallery__item {
		grid-column: span 6;
		aspect-ratio: 4 / 3;
	}

	.gna-pg-gallery--4 > .gna-pg-gallery__item:nth-child(4n+1):nth-last-child(3),
	.gna-pg-gallery--4 > .gna-pg-gallery__item:nth-child(4n+1):nth-last-child(3) ~ .gna-pg-gallery__item {
		grid-column: span 4;
	}
}

/* --------------------------------------------------------- moduli (Contact Form 7) */

.gna-pg-raw {
	margin: 1.4em 0;
}

.gna-pg-raw .row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 28px;
	margin: 0;
}

.gna-pg-raw [class*="wgl_col-"] {
	width: auto;
	max-width: none;
	padding: 0;
	float: none;
}

@media (min-width: 700px) {
	.gna-pg-raw .row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gna-pg-raw .wgl_col-12 {
		grid-column: 1 / -1;
	}
}

.gna-pg-raw p {
	margin: 0 0 6px;
	font: 400 14px/1.6 var(--sans);
	color: var(--ink-soft);
}

.gna-pg-raw form > div[style] {
	float: none !important;
	margin: 18px 0 8px !important;
}

body.gna-bianco .gna-pg-raw input[type="text"],
body.gna-bianco .gna-pg-raw input[type="email"],
body.gna-bianco .gna-pg-raw input[type="tel"],
body.gna-bianco .gna-pg-raw textarea {
	width: 100%;
	min-height: 52px;
	margin: 0 0 18px;
	padding: 14px 0;
	border: 0;
	border-bottom: 1px solid #8C8C8C;
	border-radius: 0;
	background: transparent;
	font: 400 16px/1.4 var(--sans);
	color: var(--ink);
	box-shadow: none;
	transition: border-color var(--t1) var(--ease);
}

body.gna-bianco .gna-pg-raw textarea {
	min-height: 120px;
	resize: vertical;
}

body.gna-bianco .gna-pg-raw input:focus,
body.gna-bianco .gna-pg-raw textarea:focus {
	outline: none;
	border-bottom-color: var(--ink);
}

body.gna-bianco .gna-pg-raw ::placeholder {
	color: var(--ink-mute);
	opacity: 1;
}

body.gna-bianco .gna-pg-raw a {
	color: var(--ink) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.gna-bianco .gna-pg-raw .wpcf7-list-item {
	margin: 0;
}

body.gna-bianco .gna-pg-raw input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0 10px 0 0;
	vertical-align: -3px;
	accent-color: var(--ink);
}

body.gna-bianco .gna-pg-raw input[type="submit"] {
	display: inline-flex;
	align-items: center;
	min-height: 58px;
	margin-top: 18px;
	padding: 0 32px;
	border: 1px solid var(--ink);
	border-radius: 0;
	background: var(--ink);
	color: var(--white);
	font: 600 12.5px/1.2 var(--sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--t1) var(--ease);
}

body.gna-bianco .gna-pg-raw input[type="submit"]:hover {
	background: var(--ink-2);
}

body.gna-bianco .gna-pg-raw .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--line);
	font-size: 14px;
}

/* ============================================ CHIUSURA: altri servizi */

.gna-pg-more {
	padding-block: var(--sec);
}

.gna-pg-more__grid {
	display: grid;
	gap: 36px;
}

.gna-pg-more__head {
	display: grid;
	gap: 18px;
	align-content: start;
}

.gna-pg-more__head .gna-eyebrow {
	font-weight: 500;
	letter-spacing: .3em;
}

.gna-pg-more__title {
	margin: 0;
	font: 400 clamp(44px, 6vw, 96px)/.98 var(--serif);
	letter-spacing: -.02em;
	color: var(--on-dark);
}

.gna-pg-more__lead {
	max-width: 22ch;
	margin: 0;
	font: italic 400 clamp(24px, 2.4vw, 36px)/1.15 var(--serif);
	color: var(--on-dark-soft);
}

.gna-pg-more__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line-dark);
}

.gna-pg-more__list li {
	margin: 0;
	border-bottom: 1px solid var(--line-dark);
}

.gna-pg-more__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 76px;
	padding: 18px 0;
	color: var(--on-dark) !important;
	text-decoration: none !important;
	font: 400 clamp(24px, 2.4vw, 36px)/1.1 var(--serif);
	letter-spacing: -.01em;
	transition: padding var(--t2) var(--ease), color var(--t1) var(--ease);
}

.gna-pg-more__list a .gna-i {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	transition: transform var(--t2) var(--ease);
}

.gna-pg-more__list a:hover {
	padding-left: 14px;
}

.gna-pg-more__list a:hover .gna-i {
	transform: translateX(4px);
}

@media (min-width: 1080px) {
	.gna-pg-more__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: 32px;
	}

	.gna-pg-more__head {
		grid-column: 1 / 6;
	}

	.gna-pg-more__list {
		grid-column: 7 / 13;
	}
}

/* Pagine legali: prima schermata più bassa. */
@media (min-width: 1080px) {
	.gna-pg--legal .gna-pg-hero {
		min-height: clamp(380px, 46svh, 520px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gna-pg-gallery__item img,
	.gna-pg-more__list a {
		transition: none;
	}
}

.gna-pg-raw .row::before,
.gna-pg-raw .row::after {
	content: none;
	display: none;
}

/* ============================================ ANIMAZIONI (v2.7.1) */
/*
 * Tutto solo con html.motion (niente «riduci movimento»). L'apertura usa
 * animazioni CSS, quindi parte al primo frame senza aspettare il JavaScript;
 * le entrate allo scroll le prepara bianco.js (classe pg-wait → is-in).
 */

.gna-pg-hero__roll {
	display: block;
}

/* v2.11.17: la «finestra» da cui sale il titolo non taglia più le lettere
   che scendono sotto la riga (g, y, p, la J di «Join»). Prima era il bordo
   del titolo (overflow: hidden); ora è un ritaglio un po' più largo del
   titolo (clip-path), che non sposta nulla nella pagina.
   v2.11.19: il ritaglio c'è solo mentre il titolo sale (1,5 s); a titolo
   fermo non c'è più nessuna finestra, quindi nessun browser può tagliare la
   «g», qualunque cosa faccia con il ritaglio. */
body.gna-bianco .gna-pg-hero__title,
body.gna-bianco .gna-pg-hero__roll {
	overflow: visible !important;
	clip-path: none;
}

/* v2.11.20: il titolo è più alto di sotto (0,32 em) quanto basta per
   contenere le code di g, y, p e J, con un margine negativo uguale: la
   pagina non si sposta. Così, qualunque cosa sul sito ritagli il titolo al
   suo bordo, le lettere restano dentro. Le stesse regole sono anche scritte
   direttamente sul titolo (templates/page-gna.php). */
body.gna-bianco .gna-pg-hero__title {
	padding-bottom: .32em !important;
	margin-bottom: -.32em !important;
}

html.motion body.gna-bianco .gna-pg-hero__title {
	animation: gna-pg-unmask 1ms linear 1550ms both;
}

@keyframes gna-pg-unmask {
	from { clip-path: inset(-.3em -.25em -.02em -.25em); }
	to { clip-path: none; }
}

/* Filo sotto l'occhiello delle sezioni, che si disegna da sinistra. */
.gna-pg-sec__rule {
	display: block;
	width: 56px;
	height: 1px;
	background: var(--ink);
	transform-origin: left;
}

.gna-pg-sec__head--label .gna-pg-sec__rule,
.gna-pg-sec__head .gna-pg-sec__rule {
	margin-bottom: 6px;
}

@media (min-width: 1080px) {
	.gna-pg-sec__rule {
		width: 88px;
	}
}

@keyframes gna-pg-rise {
	from { transform: translateY(calc(108% + .5em)); }
	to { transform: none; }
}

@keyframes gna-pg-up {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

@keyframes gna-pg-curtain {
	from { clip-path: inset(0 0 0 100%); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes gna-pg-zoom {
	from { transform: scale(1.14); }
	to { transform: scale(1); }
}

@keyframes gna-pg-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* 1. Apertura: titolo che sale, poi occhiello, frase e pulsante. */
html.motion .gna-pg-hero__roll {
	animation: gna-pg-rise 1300ms cubic-bezier(.19, 1, .22, 1) 180ms both;
}

html.motion .gna-pg-hero__kicker {
	animation: gna-pg-up 900ms var(--ease) 60ms both;
}

html.motion .gna-pg-hero__lede {
	animation: gna-pg-up 1000ms var(--ease) 520ms both;
}

html.motion .gna-pg-hero__ctas {
	animation: gna-pg-up 1000ms var(--ease) 700ms both;
}

/* 2. Foto di apertura: tendina che si apre e lento zoom indietro. */
html.motion .gna-pg-hero__media {
	animation: gna-pg-curtain 1500ms cubic-bezier(.77, 0, .18, 1) 0ms both;
}

html.motion .gna-pg-hero__img {
	animation: gna-pg-zoom 2800ms cubic-bezier(.19, 1, .22, 1) 0ms both;
}

html.motion .gna-pg-hero__shade {
	animation: gna-pg-fade 1200ms var(--ease) 300ms both;
}

/* 3. Testi, elenchi, domande, contatti: entrano uno dopo l'altro. */
html.motion .gna-pg .pg-wait {
	opacity: 0;
	transform: translateY(22px);
}

html.motion .gna-pg .pg-wait.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 900ms var(--ease), transform 900ms var(--ease);
	transition-delay: var(--d, 0ms);
}

/* 4. Gallerie: ogni foto si scopre dal basso, in sequenza (la tendina è sulla
   foto, non sul riquadro osservato, così lo scroll la vede sempre). */
html.motion .gna-pg-gallery__item.pg-wait {
	opacity: 1;
	transform: none;
}

html.motion .gna-pg-gallery__item.pg-wait img {
	clip-path: inset(100% 0 0 0);
	transform: scale(1.12);
}

html.motion .gna-pg-gallery__item.pg-wait.is-in img {
	clip-path: inset(0 0 0 0);
	transform: scale(1);
	transition: clip-path 1200ms cubic-bezier(.77, 0, .18, 1), transform 1800ms cubic-bezier(.19, 1, .22, 1);
	transition-delay: var(--d, 0ms);
}

html.motion .gna-pg-gallery__item.pg-wait.is-in:hover img {
	transform: scale(1.03);
	transition-delay: 0ms;
}

/* 5. Il filo dei titoli si disegna; il titolo entra con lui. */
html.motion [data-pg-head].pg-wait {
	opacity: 1;
	transform: none;
}

html.motion [data-pg-head] .gna-pg-sec__rule {
	transform: scaleX(0);
}

html.motion [data-pg-head].is-in .gna-pg-sec__rule {
	transform: scaleX(1);
	transition: transform 1100ms cubic-bezier(.77, 0, .18, 1) 100ms;
}

html.motion [data-pg-head].pg-wait > :not(.gna-pg-sec__rule) {
	opacity: 0;
	transform: translateY(20px);
}

html.motion [data-pg-head].pg-wait.is-in > :not(.gna-pg-sec__rule) {
	opacity: 1;
	transform: none;
	transition: opacity 900ms var(--ease) 250ms, transform 900ms var(--ease) 250ms;
}

/* I titoli delle sezioni hanno già la loro entrata: niente doppio effetto. */
html.motion .gna-pg-sec__title.gna-reveal.will-reveal {
	opacity: 1;
	transform: none;
}

/* 6. Passaggio tra le pagine: niente dissolvenza all'uscita (v2.11.3); la
   pagina nuova entra con l'apertura qui sopra. */


/* ============================================ GIOCOSITÀ (v2.8.1) */

/* La foto di apertura «si sviluppa»: entra in bianco e nero e prende colore. */
@keyframes gna-pg-develop {
	from { filter: grayscale(1) contrast(1.1) brightness(.75); }
	to { filter: grayscale(0) contrast(1) brightness(.92); }
}

html.motion .gna-pg-hero__img {
	animation: gna-pg-zoom 2800ms cubic-bezier(.19, 1, .22, 1) 0ms both, gna-pg-develop 2000ms var(--ease) 1100ms both;
}

/* Gallerie: ogni foto si scopre e si colora, leggermente storta, poi si raddrizza. */
html.motion .gna-pg-gallery__item.pg-wait {
	transform: rotate(var(--rot, 3deg)) translateY(30px);
	opacity: 0;
	background: none; /* v2.10.4: mentre la foto si scopre non si vede un riquadro grigio vuoto */
}

html.motion .gna-pg-gallery__item.pg-wait.is-in {
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	opacity: 1;
	transition: transform 1100ms cubic-bezier(.2, .9, .25, 1.18), opacity 600ms var(--ease);
	transition-delay: var(--d, 0ms);
}

html.motion .gna-pg-gallery__item.pg-wait img {
	filter: grayscale(1);
}

html.motion .gna-pg-gallery__item.pg-wait.is-in img {
	filter: none;
	transition: clip-path 1200ms cubic-bezier(.77, 0, .18, 1), transform 1800ms cubic-bezier(.19, 1, .22, 1), filter 1600ms var(--ease) 500ms;
	transition-delay: var(--d, 0ms), var(--d, 0ms), calc(var(--d, 0ms) + 500ms);
}

.gna-pg-gallery__item.is-tilt {
	transition: transform 120ms linear !important;
	box-shadow: 0 30px 60px -30px rgba(10, 10, 10, .45);
}

/* Titoli di sezione: le parole salgono una alla volta.
   v2.11.17: ritaglio più largo della parola (clip-path) al posto di
   overflow: hidden, così g, y, p e i corsivi («Richiesta!») restano interi.
   v2.11.19: il ritaglio c'è solo mentre le parole aspettano e salgono; a
   titolo fermo nessuna finestra. */
.gna-w {
	display: inline-block;
	vertical-align: top;
	overflow: visible !important;
	padding-bottom: .3em;   /* v2.11.20: la coda delle lettere sta dentro la parola */
	margin-bottom: -.3em;
}

html.motion [data-pg-head].pg-wait .gna-w,
html.motion .gna-pg-more__title.will-reveal .gna-w {
	clip-path: inset(-.3em -.3em -.08em -.14em);
}

html.motion [data-pg-head].pg-wait.is-in .gna-w,
html.motion .gna-pg-more__title.is-in .gna-w {
	animation: gna-w-unmask 1ms linear 2600ms both;
}

@keyframes gna-w-unmask {
	from { clip-path: inset(-.3em -.3em -.08em -.14em); }
	to { clip-path: none; }
}

.gna-w > span {
	display: inline-block;
}

html.motion [data-pg-head].pg-wait .gna-w > span,
html.motion .gna-pg-more__title.will-reveal .gna-w > span {
	transform: translateY(calc(105% + .5em));
}

html.motion [data-pg-head].pg-wait.is-in .gna-w > span,
html.motion .gna-pg-more__title.is-in .gna-w > span {
	transform: none;
	transition: transform 900ms cubic-bezier(.19, 1, .22, 1);
	transition-delay: calc(250ms + var(--wi, 0) * 55ms);
}

/* Le voci degli altri servizi: un pallino bordeaux che appare al passaggio. */
.gna-pg-more__list a span {
	position: relative;
}

.gna-pg-more__list a span::before {
	content: "";
	position: absolute;
	left: -18px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-radius: 50%;
	background: var(--bordeaux);
	transform: scale(0);
	transition: transform var(--t2) cubic-bezier(.2, .9, .25, 1.4);
}

.gna-pg-more__list a:hover span::before {
	transform: scale(1);
}

.gna-pg-more__list a:hover {
	padding-left: 26px;
}

/* =================================== PROGETTO DELL'AGENZIA (v2.11.0) */
/* Pagina «Logo & brand identity»: il brand book NOCTEA. Le tavole contengono
   testo, quindi si vedono intere (niente ritaglio), con un filo sottile. */

.gna-pg-proj__title {
	letter-spacing: .04em;
}

.gna-pg-proj__tagline {
	margin-top: 0;
	font: 400 clamp(1.5rem, 2.4vw, 2.2rem)/1.2 var(--serif);
	color: var(--ink);
}

.gna-pg-proj__gallery {
	grid-template-columns: minmax(0, 1fr);
}

.gna-pg-proj__gallery .gna-pg-gallery__item {
	aspect-ratio: auto;
	background: none;
	outline: 1px solid var(--line);
	outline-offset: -1px;
}

.gna-pg-proj__gallery .gna-pg-gallery__item img {
	display: block;
	height: auto;
}

.gna-pg-proj__gallery .gna-pg-gallery__item:hover img {
	transform: none;
}

@media (min-width: 700px) {
	.gna-pg-proj__gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ============================ PROGETTO IN CAROSELLO (v2.11.13) */
/* «Logo & brand identity»: NOCTEA in fondo alla pagina, compatto. Tutte le
   immagini alla stessa altezza e intere (le tavole del brand book hanno testo):
   si trascinano col mouse, si scorrono col dito o con le frecce. */

.gna-pg-proj__rail {
	margin-top: clamp(28px, 4vw, 56px);
}

.gna-pg-proj__track {
	gap: 10px;
	align-items: flex-start;
}

.gna-pg-proj__track > .gna-pg-proj__item {
	margin: 0;
	padding: 0;
	line-height: 0;
}

/* Niente rientro né trattino degli elenchi del vecchio tema (Colibro). */
.gna-pg-proj__track > .gna-pg-proj__item::before {
	content: none;
	display: none;
}

.gna-pg-proj__item img {
	display: block;
	width: auto;
	max-width: none;
	height: clamp(200px, 22vw, 320px);
	outline: 1px solid var(--line);
	outline-offset: -1px;
	-webkit-user-drag: none;
	user-select: none;
}

.gna-pg-proj__foot {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-top: 22px;
}

.gna-pg-proj__foot .gna-rail__progress {
	flex: 1;
	margin: 0;
	max-width: none;
}

@media (max-width: 699px) {
	.gna-pg-proj__item img {
		height: 52vw;
	}

	/* Su smartphone si scorre col dito: le frecce non servono. */
	.gna-pg-proj__foot .gna-rail__nav {
		display: none;
	}
}