/*
 * InTouchDesign (sito aziendale): the CSS this private starter site needs
 * beyond the base theme.
 *
 * Every colour goes through the palette slots (`--wp--preset--color--*`), never
 * a hex: the ten values live in demo.json only. The brand yellow (`accent`) is
 * used as a background under black text or on dark bands; text on white uses
 * `contrast` or `accent-2` (the dark yellow). The look: condensed uppercase
 * headings, diagonal cuts and yellow triangles drawn with clip-path, photos in
 * colour that turn into a yellow duotone on hover (I-5).
 *
 * Block markup keeps to core blocks with class names; this file paints them.
 * The project grid and the project page are styled by the `project` module of
 * the Pro plugin (code), not from here (data); `.itd-photo` and the yellow
 * triangle on `.itd-project-card` are the only touches this demo adds to them.
 */

/* ---------- type ---------- */

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.itd-project-card__title,
.itd-project-single h1 {
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 0.95;
}

.entry-content h1 {
	font-size: clamp( 2.6rem, 6vw, 5.6rem );
}

.entry-content h2 {
	font-size: clamp( 2rem, 3.8vw, 3.2rem );
}

.entry-content h3 {
	font-size: clamp( 1.35rem, 2vw, 1.75rem );
}

.itd-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.itd-eyebrow::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: none;
	background: var( --wp--preset--color--accent );
	clip-path: polygon( 0 0, 100% 50%, 0 100% );
}

.has-text-align-center.itd-eyebrow {
	justify-content: center;
	display: flex;
}

/* `:root `: next to a photo (Contatti, Servizi) the heading after the eyebrow
   has no top margin, and WordPress zeroed the eyebrow's own: 4 px (A8.9).
   Only there: elsewhere the heading's margin already keeps them apart, and
   an inline-flex eyebrow's margin would add to it instead of collapsing. */
:root .itd-split__text > .itd-eyebrow {
	margin-bottom: 14px;
}

/* ---------- sections ---------- */

.itd-sec {
	position: relative;
	padding-top: var( --wp--preset--spacing--60 );
	padding-bottom: var( --wp--preset--spacing--60 );
	color: var( --wp--preset--color--contrast );
	background-color: var( --wp--preset--color--base );
}

.itd-sec--tight {
	padding-top: var( --wp--preset--spacing--40 );
	padding-bottom: var( --wp--preset--spacing--40 );
}

.itd-sec--alt {
	background-color: var( --wp--preset--color--tertiary );
}

.itd-sec--dark {
	background-color: var( --wp--preset--color--contrast );
	color: var( --wp--preset--color--base );
}

.itd-sec--dark .entry-content h2,
.itd-sec--dark h1,
.itd-sec--dark h2,
.itd-sec--dark h3,
.itd-sec--dark p {
	color: var( --wp--preset--color--base );
}

.itd-sec--yellow {
	background-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--contrast );
}

/* the eyebrow's yellow triangle vanished on a yellow section, and the empty
   space before the word read as a wrong indent ("Testimonials", 2026-09-24) */
.itd-sec--yellow .itd-eyebrow::before {
	background: var( --wp--preset--color--contrast );
}

.itd-sec--diag-top {
	clip-path: polygon( 0 0, 100% 6vw, 100% 100%, 0 100% );
	padding-top: calc( var( --wp--preset--spacing--60 ) + 6vw );
}

.itd-sec--diag-bottom {
	clip-path: polygon( 0 0, 100% 0, 100% calc( 100% - 6vw ), 0 100% );
	padding-bottom: calc( var( --wp--preset--spacing--60 ) + 6vw );
}

.itd-sec .wp-block-buttons {
	gap: 14px;
}

/* ---------- buttons ---------- */

.entry-content .wp-block-button__link,
.itd-project-more__link,
.itd-project-single__visit .wp-block-button__link {
	border-radius: 0;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 14px 28px;
	border: 2px solid var( --wp--preset--color--primary );
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.entry-content .wp-block-button__link:hover,
.itd-project-more__link:hover {
	background-color: var( --wp--preset--color--accent );
	border-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--contrast );
	transform: translateY( -2px );
}

.entry-content .itd-btn--yellow .wp-block-button__link {
	background-color: var( --wp--preset--color--accent );
	border-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--contrast );
}

.entry-content .itd-btn--yellow .wp-block-button__link:hover {
	background-color: var( --wp--preset--color--base );
	border-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
}

.entry-content .itd-btn--ghost .wp-block-button__link {
	background-color: transparent;
	border-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--base );
}

.entry-content .itd-btn--ghost .wp-block-button__link:hover {
	background-color: var( --wp--preset--color--accent );
	border-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--contrast );
}

.entry-content .itd-btn--outline .wp-block-button__link {
	background-color: transparent;
	border-color: var( --wp--preset--color--contrast );
	color: var( --wp--preset--color--contrast );
}

/* ---------- photos: colour at rest, yellow duotone on hover (I-5) ---------- */

.itd-photo {
	position: relative;
	overflow: hidden;
	background-color: var( --wp--preset--color--contrast );
}

.itd-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease, filter 0.4s ease;
}

.itd-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var( --wp--preset--color--accent );
	mix-blend-mode: multiply;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.itd-photo:hover img,
.itd-photo:focus-within img {
	transform: scale( 1.04 );
	filter: grayscale( 1 );
}

.itd-photo:hover::after,
.itd-photo:focus-within::after {
	opacity: 0.9;
}

/* a cut corner on photos in split sections and heroes */
.itd-photo--cut {
	clip-path: polygon( 0 0, 100% 0, 100% 88%, 88% 100%, 0 100% );
}

.itd-photo--slant {
	clip-path: polygon( 8% 0, 100% 0, 100% 100%, 0 100% );
}

/* ---------- home hero ---------- */

/* The header's real height before the theme's script measures it (--itd-header-h): with
   84 px here and 109 measured on a phone the hero shrank after the first paint and its
   text jumped 12 px (layout shift 0.018 at 375 px, found 2026-09-25). 109 px while the
   header shows the menu button (up to 1024 px since theme 1.2.1), 93 above, as measured
   on nuovo with the 60 px logo (2026-09-27). */
:root {
	--itd-hero-header: 109px;
}

@media ( min-width: 1025px ) {
	:root {
		--itd-hero-header: 93px;
	}
}

.itd-agency-hero {
	position: relative;
	min-height: calc( 100vh - var( --itd-header-h, var( --itd-hero-header ) ) );
	min-height: calc( 100dvh - var( --itd-header-h, var( --itd-hero-header ) ) );
	display: flex;
	align-items: center;
	overflow: hidden;
	background-color: var( --wp--preset--color--contrast );
	color: var( --wp--preset--color--base );
	padding-top: var( --wp--preset--spacing--60 );
	padding-bottom: var( --wp--preset--spacing--60 );
}

/* Background: the slash of the logo (atan( 142.6 / 378.9 ) = 20.6 degrees from the
   vertical) repeated as tall slanted bars in the brand's blacks, one yellow and one thin
   yellow line. They rise once, then drift a little, each on its own time, and stop. Replaced the
   photo home-hero.jpg on 2026-09-27 (draft A of bozza/hero-animato.html). Only transform
   moves; every animation is in the reduced-motion block below, so with reduced motion the
   bars simply stand in their place. */
.itd-agency-hero > .itd-hero-bars {
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: none;
	margin: 0;
	overflow: hidden;
	pointer-events: none;
}

.itd-hero-bars > span {
	position: absolute;
	top: -8%;
	left: var( --x );
	width: var( --w );
	height: 116%;
}

.itd-hero-bars i {
	display: block;
	width: 100%;
	height: 100%;
	background: var( --tone );
	transform: skewX( -20.6deg );
}

.itd-hero-bars > span:nth-child( 1 ) { --x: 47%; --w: 8vw; --in: 0.05s; --dx: 2.5vw; --t: 2.6s; --tone: color-mix( in srgb, var( --wp--preset--color--base ) 4%, var( --wp--preset--color--contrast ) ); }
.itd-hero-bars > span:nth-child( 2 ) { --x: 55%; --w: 3.4vw; --in: 0.15s; --dx: -2vw; --t: 2.2s; --tone: color-mix( in srgb, var( --wp--preset--color--base ) 9%, var( --wp--preset--color--contrast ) ); }
.itd-hero-bars > span:nth-child( 3 ) { --x: 61%; --w: 0px; --in: 0.3s; --dx: 1.5vw; --t: 3s; --tone: transparent; }
.itd-hero-bars > span:nth-child( 4 ) { --x: 64%; --w: 13vw; --in: 0.2s; --dx: 2vw; --t: 2.8s; --tone: var( --wp--preset--color--primary ); }
.itd-hero-bars > span:nth-child( 5 ) { --x: 78%; --w: 3.4vw; --in: 0.45s; --dx: -3.5vw; --t: 2.4s; --tone: var( --wp--preset--color--accent ); }
.itd-hero-bars > span:nth-child( 6 ) { --x: 84%; --w: 10vw; --in: 0.35s; --dx: 1.8vw; --t: 2.5s; --tone: color-mix( in srgb, var( --wp--preset--color--base ) 6%, var( --wp--preset--color--contrast ) ); }
.itd-hero-bars > span:nth-child( 7 ) { --x: 96%; --w: 6vw; --in: 0.5s; --dx: -1.5vw; --t: 2.7s; --tone: color-mix( in srgb, var( --wp--preset--color--base ) 4%, var( --wp--preset--color--contrast ) ); }

.itd-hero-bars > span:nth-child( 3 ) i {
	border-left: 2px solid color-mix( in srgb, var( --wp--preset--color--accent ) 45%, transparent );
}

/* Motion only on the page's first seconds: the latest bar starts rising at 0.5 s, rises for
   1.1 s and drifts for at most 3 s, so everything is still by 4.6 s. WCAG 2.2.2 asks for a
   pause control only past 5 s; the user chose no control (2026-09-27), so keep the sum of
   --in + 1.1s + --t under 5 s (test_package_content_intouchdesign checks it). */
@media ( prefers-reduced-motion: no-preference ) {
	.itd-hero-bars > span {
		animation: itd-bar-rise 1.1s cubic-bezier( 0.2, 0.7, 0.2, 1 ) var( --in ) both;
	}

	.itd-hero-bars i {
		animation: itd-bar-drift var( --t ) cubic-bezier( 0.4, 0, 0.2, 1 ) calc( var( --in ) + 1.1s ) 1 both;
	}

	@keyframes itd-bar-rise {
		from {
			transform: translateY( 105% );
		}
		to {
			transform: none;
		}
	}

	@keyframes itd-bar-drift {
		from {
			transform: skewX( -20.6deg ) translateX( 0 );
		}
		to {
			transform: skewX( -20.6deg ) translateX( var( --dx ) );
		}
	}
}

.itd-agency-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
}

.itd-agency-hero h1 {
	max-width: 12ch;
	color: var( --wp--preset--color--base );
}

.itd-agency-hero__sub {
	max-width: 24ch;
	margin: 18px 0 20px;
	color: var( --wp--preset--color--accent );
	font-size: clamp( 1.3rem, 2.4vw, 2rem );
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
}

.itd-agency-hero__text {
	max-width: 58ch;
	margin-bottom: 32px;
	color: color-mix( in srgb, var( --wp--preset--color--base ) 85%, transparent );
}

.itd-agency-hero .itd-eyebrow {
	color: var( --wp--preset--color--base );
}

/* ---------- services (home) ---------- */

.itd-services__intro p:not( .itd-eyebrow ) {
	margin-top: 22px;
}

.itd-scard {
	position: relative;
	height: 100%;
	padding: 34px 30px 30px;
	background-color: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--line );
	box-shadow: 0 12px 40px color-mix( in srgb, var( --wp--preset--color--contrast ) 8%, transparent );
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.itd-scard:hover {
	transform: translateY( -6px );
	box-shadow: 0 22px 50px color-mix( in srgb, var( --wp--preset--color--contrast ) 14%, transparent );
}

.itd-scard::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-top: 22px solid var( --wp--preset--color--accent );
	border-right: 22px solid transparent;
}

.itd-scard--dark {
	background-color: var( --wp--preset--color--contrast );
	border-color: var( --wp--preset--color--contrast );
	color: var( --wp--preset--color--base );
}

.itd-scard--dark h3,
.itd-scard--dark h5,
.itd-scard--dark p {
	color: var( --wp--preset--color--base );
}

.itd-scard__icon {
	width: 64px;
	height: 64px;
	margin: 0 0 20px;
	display: grid;
	place-items: center;
	background-color: var( --wp--preset--color--accent );
	clip-path: polygon( 0 0, 100% 0, 100% 72%, 72% 100%, 0 100% );
}

.itd-scard__icon {
	color: var( --wp--preset--color--contrast );
}

.itd-scard__icon svg {
	width: 36px;
	height: 36px;
	display: block;
}

/* `:root `: WordPress's flow-layout sheet zeroes the badge's bottom margin
   after this file, and the card title sat right on it (A8.9, as in A8.4). */
:root .itd-scard__icon {
	margin-bottom: 20px;
}

.itd-scard h3,
.itd-scard h5 {
	margin: 0 0 10px;
	font-size: clamp( 1.35rem, 2vw, 1.75rem );
	text-transform: uppercase;
	line-height: 0.95;
}

.itd-scard p {
	font-size: 0.98rem;
	margin-bottom: 14px;
}

.itd-scard__more a,
.itd-scard p a {
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var( --wp--preset--color--accent-2 );
}

.itd-scard--dark .itd-scard__more a,
.itd-scard--dark p a {
	color: var( --wp--preset--color--accent );
}

.wp-block-column > .itd-scard {
	display: flex;
	flex-direction: column;
}

.itd-scard > .itd-scard__more {
	margin-top: auto;
}

/* ---------- WordPress plugins (Sviluppo software, 2026-09-27) ----------
   The service cards, with the plugin's own icon instead of the drawn badge and a
   button at the bottom. */

.itd-pcards + .itd-pcards {
	margin-top: var( --wp--style--block-gap, 24px );
}

.itd-pcard__icon {
	width: 72px;
	margin: 0 0 20px;
}

/* `:root `: as for .itd-scard__icon, the flow-layout sheet zeroes the bottom margin. */
:root .itd-pcard__icon {
	margin-bottom: 20px;
}

.itd-pcard__icon img {
	width: 72px;
	height: 72px;
	border-radius: 18px;
	display: block;
}

.itd-pcard h3 {
	font-size: clamp( 1.2rem, 1.6vw, 1.45rem );
	line-height: 1.1;
}

.itd-scard > .wp-block-buttons {
	margin-top: auto;
}

.itd-pcards__all {
	margin-top: 40px;
	text-align: center;
}

.itd-pcards__all .wp-block-buttons {
	justify-content: center;
}

/* ---------- case studies (home, static) ---------- */

.itd-case {
	position: relative;
	aspect-ratio: 4 / 3;
	color: var( --wp--preset--color--base );
}

.itd-case .itd-photo {
	position: absolute;
	inset: 0;
	margin: 0;
}

.itd-case .itd-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient( to top, color-mix( in srgb, var( --wp--preset--color--contrast ) 85%, transparent ) 0, transparent 55% );
}

.itd-case__cap {
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 20px;
	z-index: 2;
	pointer-events: none;
}

.itd-case__cat {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent );
}

.itd-case__title {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1;
	text-transform: uppercase;
	color: var( --wp--preset--color--base );
}

.itd-case__title a {
	color: inherit;
	text-decoration: none;
	pointer-events: auto;
}

.itd-case::after,
.itd-project-card__media::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	width: 0;
	height: 0;
	border-top: 56px solid var( --wp--preset--color--accent );
	border-left: 56px solid transparent;
	transition: border-width 0.25s ease;
	pointer-events: none;
}

.itd-case:hover::after,
.itd-project-card:hover .itd-project-card__media::after {
	border-top-width: 72px;
	border-left-width: 72px;
}

/* ---------- testimonials ---------- */

.itd-quote {
	height: 100%;
	padding: 36px 34px;
	background-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
	clip-path: polygon( 0 0, 100% 0, 100% calc( 100% - 26px ), calc( 100% - 26px ) 100%, 0 100% );
}

.itd-sec--yellow .itd-quote p,
.itd-sec--yellow .itd-quote h3 {
	color: var( --wp--preset--color--contrast );
}

.itd-quote__stars {
	margin: 0 0 12px;
	font-size: 0.9rem;
	letter-spacing: 2px;
}

.itd-quote__text {
	margin: 0 0 22px;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.45;
}

.itd-quote__who {
	display: flex;
	align-items: center;
	gap: 14px;
}

.itd-quote__who .wp-block-image,
.itd-quote__who figure {
	margin: 0;
	flex: none;
}

.itd-quote__who img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.itd-quote__name {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	text-transform: uppercase;
}

/* ---------- numbers + logos (dark) ---------- */

.itd-numbers::before {
	content: "";
	position: absolute;
	left: -8vw;
	top: -10vw;
	width: 30vw;
	height: 30vw;
	background: var( --wp--preset--color--secondary );
	clip-path: polygon( 0 0, 100% 0, 0 100% );
	opacity: 0.6;
	pointer-events: none;
}

.itd-numbers::before,
.itd-stats::before {
	z-index: 0;
}

.itd-numbers,
.itd-stats {
	overflow: hidden;
}

.itd-band-photo {
	aspect-ratio: 16 / 10;
	margin: 0;
}

/* one photo alone: a low, wide band rather than a poster */
.itd-photos .wp-block-column:only-child .itd-band-photo {
	aspect-ratio: 21 / 8;
}

.itd-numbers > *,
.itd-stats > * {
	position: relative;
	z-index: 1;
}

.itd-numbers__big {
	margin: 0;
	font-size: clamp( 4rem, 8vw, 7rem );
	font-weight: 800;
	line-height: 0.9;
	color: var( --wp--preset--color--accent );
}

.itd-sec--dark .itd-numbers__big {
	color: var( --wp--preset--color--accent );
}

.itd-numbers__label {
	margin: 8px 0 0;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.itd-logo {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 96px;
	padding: 16px;
	overflow: hidden;
	background-color: var( --wp--preset--color--base );
	filter: grayscale( 1 );
	transition: filter 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.itd-logo img {
	max-height: 56px;
	width: auto;
	transition: transform 0.3s ease;
}

/* hover: the logo takes its colours, the tile lifts, a yellow bar runs in
   under it (user, 2026-09-24); with less motion, only the colours */
.itd-logo::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	background: var( --wp--preset--color--accent );
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 0.35s ease;
}

.itd-logo:hover {
	filter: none;
}

@media ( hover: hover ) and ( prefers-reduced-motion: no-preference ) {
	.itd-logo:hover {
		transform: translateY( -6px );
		box-shadow: 0 18px 36px color-mix( in srgb, var( --wp--preset--color--contrast ) 55%, transparent );
	}

	.itd-logo:hover img {
		transform: scale( 1.06 );
	}

	.itd-logo:hover::after {
		transform: scaleX( 1 );
	}
}

/* The numbers count up with the theme's `.itd-counter` script (main.js):
   same-width digits, so the figure does not shimmy while it runs. */
.itd-counter {
	font-variant-numeric: tabular-nums;
}

/* ---------- stats (landing) ---------- */

.itd-stats::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 26vw;
	background: var( --wp--preset--color--secondary );
	clip-path: polygon( 0 0, 100% 0, 60% 100%, 0 100% );
	opacity: 0.7;
	pointer-events: none;
}

.itd-stats > * {
	position: relative;
}

.itd-stats__big {
	margin: 0;
	font-size: clamp( 2.6rem, 4.5vw, 4rem );
	font-weight: 800;
	line-height: 1;
	color: var( --wp--preset--color--accent );
	text-align: center;
}

.itd-sec--dark .itd-stats__big {
	color: var( --wp--preset--color--accent );
}

.itd-stats__label {
	margin: 4px 0 0;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
}

/* ---------- CTA band (yellow with a black wedge) ---------- */

.itd-band {
	overflow: hidden;
	padding-top: var( --wp--preset--spacing--50 );
	padding-bottom: var( --wp--preset--spacing--50 );
}

.itd-band::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 22vw;
	background: var( --wp--preset--color--contrast );
	clip-path: polygon( 40% 0, 100% 0, 100% 100%, 0 100% );
	pointer-events: none;
}

.itd-band > * {
	position: relative;
	z-index: 1;
}

.itd-band__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.itd-band h2 {
	margin: 0;
	font-size: clamp( 1.8rem, 3.4vw, 2.8rem );
}

.itd-band p {
	margin: 8px 0 0;
	font-weight: 600;
}

/* ---------- page hero (inner pages) ---------- */

.itd-phero {
	overflow: hidden;
	padding-top: var( --wp--preset--spacing--60 );
	padding-bottom: calc( var( --wp--preset--spacing--60 ) + 24px );
}

.itd-phero::after {
	content: "";
	position: absolute;
	right: -10vw;
	bottom: -14vw;
	width: 36vw;
	height: 36vw;
	background: var( --wp--preset--color--accent );
	clip-path: polygon( 100% 0, 100% 100%, 0 100% );
	opacity: 0.95;
	pointer-events: none;
}

.itd-phero > * {
	position: relative;
	z-index: 1;
}

.itd-phero h1 {
	font-size: clamp( 2.6rem, 5.2vw, 4.6rem );
}

.itd-phero__crumbs {
	margin: 0 0 18px;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix( in srgb, var( --wp--preset--color--base ) 60%, transparent );
}

.itd-sec--dark .itd-phero__crumbs {
	color: color-mix( in srgb, var( --wp--preset--color--base ) 60%, transparent );
}

.itd-phero__sub {
	margin: 14px 0 18px;
	font-size: clamp( 1.15rem, 2vw, 1.6rem );
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent );
}

.itd-sec--dark .itd-phero__sub {
	color: var( --wp--preset--color--accent );
}

.itd-phero__text {
	max-width: 60ch;
	color: color-mix( in srgb, var( --wp--preset--color--base ) 85%, transparent );
}

.itd-phero__img {
	aspect-ratio: 4 / 3;
	margin: 0;
}

.itd-phero .wp-block-columns {
	align-items: center;
}

/* ---------- prose and splits ---------- */

.itd-prose {
	max-width: var( --wp--style--global--content-size, 760px );
	margin-inline: auto;
}

.itd-prose h2 {
	margin: 48px 0 14px;
	font-size: clamp( 1.8rem, 3vw, 2.6rem );
}

.itd-prose h2:first-child,
.itd-prose > :first-child {
	margin-top: 0;
}

.itd-prose h3 {
	margin: 28px 0 10px;
	font-size: 1.35rem;
}

.itd-prose ul,
.itd-split__text ul {
	padding-left: 22px;
	margin: 0 0 1rem;
}

.itd-split {
	align-items: center;
}

.itd-split__text h2 {
	margin: 0 0 12px;
	font-size: clamp( 1.8rem, 3vw, 2.6rem );
}

.itd-split__text h3 {
	margin: 20px 0 10px;
	font-size: 1.25rem;
	color: var( --wp--preset--color--accent-2 );
}

.itd-split__img {
	aspect-ratio: 4 / 3;
	margin: 0 0 18px;
}

.itd-split__caption {
	margin: -8px 0 18px;
	font-size: 0.85rem;
	color: var( --wp--preset--color--muted );
}

/* ---------- reviews ---------- */

.itd-review {
	height: 100%;
	padding: 26px;
	background-color: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--line );
	clip-path: polygon( 0 0, 100% 0, 100% calc( 100% - 22px ), calc( 100% - 22px ) 100%, 0 100% );
}

.itd-review .wp-block-image {
	margin: 0 0 12px;
}

.itd-review img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.itd-review__stars {
	margin: 0 0 8px;
	font-size: 0.85rem;
	letter-spacing: 2px;
}

/* `:root `: same trap, the stars touched the reviewer's name (A8.9). */
:root .itd-review__stars {
	margin-bottom: 8px;
}

.itd-review h3 {
	margin: 0 0 8px;
	font-size: 1.2rem;
}

.itd-review p:last-child {
	margin-bottom: 0;
}

/* ---------- FAQ ---------- */

.itd-faq {
	border-top: 1px solid var( --wp--preset--color--line );
	padding: 16px 0;
	margin: 0;
}

.itd-faq:last-of-type {
	border-bottom: 1px solid var( --wp--preset--color--line );
}

.itd-faq > summary {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	list-style: none;
	cursor: pointer;
	font-size: 1.2rem;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.1;
}

.itd-faq > summary::-webkit-details-marker {
	display: none;
}

.itd-faq > summary::after {
	content: "+";
	flex: none;
	font-size: 1.4rem;
	line-height: 1;
	color: var( --wp--preset--color--accent-2 );
}

.itd-faq[open] > summary::after {
	content: "–";
}

.itd-faq p {
	margin: 10px 0 0;
	color: var( --wp--preset--color--muted );
}

/* ---------- form box (WPForms lives inside) ---------- */

.itd-formbox {
	position: relative;
	padding: 36px;
	background-color: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--line );
	box-shadow: 0 20px 50px color-mix( in srgb, var( --wp--preset--color--contrast ) 12%, transparent );
}

.itd-formbox::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 8px;
	background: var( --wp--preset--color--accent );
	clip-path: polygon( 0 0, 70% 0, 68% 100%, 0 100% );
}

.itd-formbox h2,
.itd-formbox h3 {
	margin: 0 0 6px;
	font-size: 2rem;
}

.itd-formbox > p {
	color: var( --wp--preset--color--muted );
}

.itd-formbox .wpforms-container {
	margin-top: 10px;
}

/* ---------- card icons drawn line by line (A8.12, bozza/icone.html) ----------
   Every shape of an `.itd-icon` carries pathLength="1": a dash as long as the
   whole line, and an offset from 1 (nothing drawn) to 0 (all drawn). At rest,
   and for whoever asked for less motion, the icon is simply complete. */

@keyframes itd-draw {
	from { stroke-dashoffset: 1; }
	to { stroke-dashoffset: 0; }
}

/* the same frames under another name, so the hover restarts the drawing */
@keyframes itd-draw-again {
	from { stroke-dashoffset: 1; }
	to { stroke-dashoffset: 0; }
}

@media ( prefers-reduced-motion: no-preference ) {
	.itd-icon > * {
		stroke-dasharray: 1;
	}

	/* Drawn as the CARD comes into view, complete once the whole card is on
	   screen: a card already in view when the page opens always shows a whole
	   icon. Browsers without scroll-driven animations keep it still. */
	@supports ( animation-timeline: view() ) {
		:is( .itd-scard, .itd-ccard ) {
			view-timeline-name: --itd-card;
		}

		.itd-icon > * {
			animation: itd-draw linear both;
			animation-timeline: --itd-card;
			animation-range: entry 0% entry 100%;
		}
	}

	/* drawn again when the pointer or the keyboard reaches the card */
	:is( .itd-scard, .itd-ccard ):is( :hover, :focus-within ) .itd-icon > * {
		animation: itd-draw-again 0.9s cubic-bezier( 0.6, 0, 0.2, 1 ) both;
		animation-timeline: auto;
	}

	:is( .itd-scard, .itd-ccard ):is( :hover, :focus-within ) .itd-icon > :nth-child( 2 ) {
		animation-delay: 0.08s;
	}

	:is( .itd-scard, .itd-ccard ):is( :hover, :focus-within ) .itd-icon > :nth-child( 3 ) {
		animation-delay: 0.16s;
	}

	:is( .itd-scard, .itd-ccard ):is( :hover, :focus-within ) .itd-icon > :nth-child( n + 4 ) {
		animation-delay: 0.24s;
	}
}

/* ---------- contact cards ---------- */

.itd-ccard {
	position: relative;
	height: 100%;
	padding: 30px;
	background-color: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--line );
}

.itd-ccard::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border-top: 22px solid var( --wp--preset--color--accent );
	border-right: 22px solid transparent;
}

.itd-ccard__icon {
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	background-color: var( --wp--preset--color--accent );
	clip-path: polygon( 0 0, 100% 0, 100% 72%, 72% 100%, 0 100% );
	color: var( --wp--preset--color--contrast );
}

/* `:root `: WordPress's flow-layout sheet zeroes the margin of a group's
   children after this file, and the title sat right on the badge (A8.4). */
:root .itd-ccard__icon {
	margin: 0 0 20px;
}

.itd-ccard__icon svg {
	width: 26px;
	height: 26px;
	display: block;
}

.itd-ccard h3,
.itd-ccard h5 {
	margin: 0 0 8px;
	font-size: 1.4rem;
	text-transform: uppercase;
}

.itd-ccard p {
	margin: 0;
	color: var( --wp--preset--color--muted );
}

/* ---------- newsletter ---------- */

.itd-news {
	padding: 40px;
	background-color: var( --wp--preset--color--tertiary );
	border-left: 8px solid var( --wp--preset--color--accent );
}

.itd-news h2 {
	margin: 0;
	font-size: 1.8rem;
}

.itd-news > p {
	margin: 6px 0 0;
}

.itd-news .wpforms-container {
	margin: 16px 0 0;
}

/* ---------- percent bars (services mission) ---------- */

.itd-percent h3,
.itd-percent h5 {
	display: flex;
	justify-content: space-between;
	margin: 0 0 6px;
	font-size: 1.1rem;
	text-transform: uppercase;
}

.itd-bar {
	height: 10px;
	background-color: var( --wp--preset--color--surface );
}

.itd-bar i {
	display: block;
	height: 100%;
	background-color: var( --wp--preset--color--accent );
}

/* ---------- latest posts (core query) ---------- */

.itd-latest .wp-block-post-template {
	gap: var( --wp--preset--spacing--40 );
}

.itd-latest .wp-block-post-featured-image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin: 0;
	background-color: var( --wp--preset--color--tertiary );
}

.itd-latest .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease, filter 0.4s ease;
}

.itd-latest .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale( 1.04 );
}

.itd-latest .wp-block-post-terms {
	margin: 18px 0 10px;
}

.itd-latest .wp-block-post-terms a {
	display: inline-block;
	padding: 5px 10px;
	background-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--contrast );
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
}

.itd-latest .wp-block-post-title {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.1;
	text-transform: uppercase;
}

.itd-latest .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

/* ---------- projects page: edge to edge on desktop ---------- */

.itd-sec.itd-projects-sec > .itd-projects {
	max-width: none;
	padding-inline: var( --wp--preset--spacing--30 );
}

.itd-projects-sec .itd-project-grid {
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--30 );
}

@media ( max-width: 1200px ) {
	.itd-projects-sec .itd-project-grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 900px ) {
	.itd-projects-sec .itd-project-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 560px ) {
	.itd-projects-sec .itd-project-grid {
		grid-template-columns: minmax( 0, 1fr );
	}
}

.itd-booking {
	min-height: 600px;
}

/* ---------- module touches ---------- */

.itd-project-card__media {
	position: relative;
}

/* A quieter title on the cards: the photo carries the card (user, 2026-09-23). */
:root .itd-project-card__title {
	font-size: 1.125rem;
	line-height: 1.15;
}

.itd-project-filters__link:hover,
.itd-project-filters__link.is-active {
	color: var( --wp--preset--color--accent );
}

/* ---------- header button ---------- */

.site-header .site-header__cta,
.site-header .site-header__cta:visited {
	border-radius: 0;
	background-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--contrast );
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.site-header .site-header__cta:hover,
.site-header .site-header__cta:focus-visible {
	background-color: var( --wp--preset--color--contrast );
	color: var( --wp--preset--color--accent );
}

/* ---------- the article page (A8.10, bozza/articolo.html) ---------- */

.itd-article .itd-page-hero::before {
	background: color-mix( in srgb, var( --wp--preset--color--contrast ) 78%, transparent );
}

.itd-article .itd-page-hero::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
	border-bottom: 120px solid var( --wp--preset--color--accent );
	border-left: 120px solid transparent;
}

.itd-article .itd-page-hero .entry-title {
	max-width: 900px;
	font-size: clamp( 2rem, 4.4vw, 3.6rem );
	line-height: 0.98;
	text-transform: uppercase;
	text-wrap: balance;
}

/* A long read, not a landing page: the page-sized headings of the demo are
   one step smaller here, so no heading outshouts the title. */
.itd-article .entry-content h2 {
	font-size: clamp( 1.5rem, 2.4vw, 2rem );
	line-height: 1.1;
}

.itd-article .entry-content h3 {
	font-size: clamp( 1.2rem, 1.6vw, 1.4rem );
	line-height: 1.15;
}

.itd-article .entry-content h4 {
	font-size: 1.05rem;
}

:root .itd-article .entry-content h2 {
	margin-block: 1.8em 0.6em;
}

:root .itd-article .entry-content h3,
:root .itd-article .entry-content h4 {
	margin-block: 1.4em 0.5em;
}

/* Tables scroll inside themselves on a phone instead of widening the page. */
:root .itd-article .entry-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	margin-block: 1.5em;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.itd-article .entry-content th,
.itd-article .entry-content td {
	padding: 10px 14px;
	border-bottom: 1px solid var( --wp--preset--color--line );
	text-align: left;
	vertical-align: top;
}

.itd-article .entry-content thead th,
.itd-article .entry-content tr:first-child > th {
	background-color: var( --wp--preset--color--contrast );
	color: var( --wp--preset--color--base );
}

/* Stackable blocks left inside the site's own posts (the plugin is switched
   off at the Phase B switch-over, its stylesheet with it): its buttons are
   inline links with big vertical padding, which then cover the line above. */
:root .itd-article .ugb-button,
:root .itd-article .stk-button {
	display: inline-block;
	margin-block-start: 16px;
}

/* Category label, date and author in the opening, as in the mock-up (A8.11);
   the same yellow label sits above the title of every card of /blog/,
   which shows picture, category and title like the site's blog does today. */
.itd-post-cats a {
	display: inline-block;
	padding: 5px 10px;
	background-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--contrast );
	font-size: 0.7rem;
	letter-spacing: 0.16em;
}

.itd-post-cats a:hover,
.itd-post-cats a:focus-visible {
	background-color: var( --wp--preset--color--contrast );
	color: var( --wp--preset--color--accent );
	text-decoration: none;
}

.itd-article .itd-page-hero .itd-post-cats a {
	color: var( --wp--preset--color--contrast );
}

.itd-article .itd-page-hero .itd-post-cats a:hover,
.itd-article .itd-page-hero .itd-post-cats a:focus-visible {
	background-color: var( --wp--preset--color--base );
}

.itd-article .itd-page-hero .entry-meta {
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.85;
}

.itd-article .itd-page-hero .entry-meta a {
	text-decoration: none;
}

.itd-article .entry-footer a {
	color: var( --wp--preset--color--accent-2 );
}

/* The title is the card's link; the picture already links too (A8.11). */
.itd-blog-card .entry-summary,
.itd-blog-card__readmore {
	display: none;
}

.itd-blog-card .entry-title {
	text-transform: uppercase;
	line-height: 1.15;
}

/* The WPForms form some posts carry at the end ("Richiedi un preventivo
   gratuito"): the same box as the form on the pages. `:root ` so WPForms'
   own base sheet, loaded after this one on the real site, does not win. */
:root .itd-article .wpforms-container {
	position: relative;
	margin-block: 24px 0;
	padding: 36px;
	background-color: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--line );
	box-shadow: 0 20px 50px color-mix( in srgb, var( --wp--preset--color--contrast ) 12%, transparent );
}

.itd-article .wpforms-container::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 8px;
	background: var( --wp--preset--color--accent );
	clip-path: polygon( 0 0, 70% 0, 68% 100%, 0 100% );
}

:root .itd-article .wpforms-field {
	margin: 0 0 18px;
	padding: 0;
	width: 100%;
}

:root .itd-article .wpforms-field-label {
	display: block;
	margin: 0 0 6px;
	font-weight: 700;
	font-size: 0.9rem;
}

.itd-article .wpforms-required-label {
	color: var( --wp--preset--color--accent-2 );
}

:root .itd-article .wpforms-form input[type="text"],
:root .itd-article .wpforms-form input[type="email"],
:root .itd-article .wpforms-form input[type="tel"],
:root .itd-article .wpforms-form textarea,
:root .itd-article .wpforms-form select {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	padding: 12px 14px;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 0;
	background-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
	font: inherit;
}

:root .itd-article .wpforms-form textarea {
	min-height: 140px;
}

.itd-article .wpforms-form input:focus,
.itd-article .wpforms-form textarea:focus,
.itd-article .wpforms-form select:focus {
	outline: 2px solid var( --wp--preset--color--contrast );
	outline-offset: 1px;
}

:root .itd-article .wpforms-submit-container {
	margin: 8px 0 0;
	padding: 0;
}

:root .itd-article .wpforms-form .wpforms-submit {
	padding: 14px 32px;
	border: 0;
	border-radius: 0;
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
	font: inherit;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

:root .itd-article .wpforms-form .wpforms-submit:hover,
:root .itd-article .wpforms-form .wpforms-submit:focus-visible {
	background-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--contrast );
}

@media ( max-width: 600px ) {
	:root .itd-article .wpforms-container {
		padding: 28px 20px;
	}
}

/* ---------- footer ---------- */

.site-footer {
	position: relative;
}

.site-footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 8px;
	background: var( --wp--preset--color--accent );
	clip-path: polygon( 0 0, 60% 0, 58% 100%, 0 100% );
}

/* Three columns as in the approved mock-up (A8.5, bozza/footer.html):
   logo + quote + Facebook, Contattaci, Servizi; copyright and legal links
   in the bottom row. `:root ` where WordPress's layout sheet would win. */
:root .site-footer__columns--3 {
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 48px;
}

.site-footer__col p {
	color: color-mix( in srgb, var( --wp--preset--color--base ) 80%, transparent );
	font-size: 0.95rem;
}

:root .site-footer__col > * + * {
	margin-block-start: 14px;
}

:root .itd-footer-logo {
	margin: 0 0 20px;
}

.itd-footer-logo img {
	height: 44px;
	width: auto;
	filter: brightness( 0 ) invert( 1 );
}

.site-footer .site-footer__heading {
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var( --wp--preset--color--accent );
}

.site-footer__col a:not( .wp-block-social-link-anchor ) {
	color: var( --wp--preset--color--base );
	text-decoration: none;
	border-bottom: 1px solid color-mix( in srgb, var( --wp--preset--color--accent ) 45%, transparent );
}

.site-footer__col a:not( .wp-block-social-link-anchor ):hover,
.site-footer__col a:not( .wp-block-social-link-anchor ):focus-visible {
	color: var( --wp--preset--color--accent );
}

:root .itd-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

:root .itd-footer-social {
	margin: 18px 0 0;
	gap: 8px;
}

.itd-footer-social .wp-social-link {
	background: transparent;
	color: var( --wp--preset--color--base );
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--base ) 25%, transparent );
	border-radius: 0;
}

.itd-footer-social .wp-social-link a {
	padding: 10px;
}

.itd-footer-social .wp-social-link:hover,
.itd-footer-social .wp-social-link:focus-within {
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--contrast );
	border-color: var( --wp--preset--color--accent );
	transform: none;
}

.site-footer__copy,
.site-footer .footer-menu a {
	color: color-mix( in srgb, var( --wp--preset--color--base ) 70%, transparent );
	font-size: 0.85rem;
	text-decoration: none;
}

.site-footer .footer-menu a:hover,
.site-footer .footer-menu a:focus-visible {
	color: var( --wp--preset--color--accent );
}

/* ---------- small screens ---------- */

@media ( max-width: 782px ) {
	:root .site-footer__columns--3 {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	:root .site-footer__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.itd-sec {
		padding-top: var( --wp--preset--spacing--50 );
		padding-bottom: var( --wp--preset--spacing--50 );
	}

	.itd-sec--diag-top {
		padding-top: calc( var( --wp--preset--spacing--50 ) + 6vw );
	}

	/* A bar as tall as the hero crosses ~300px sideways on a phone, i.e. all of the text:
	   the blacks stay (barely visible), the yellow line goes, the yellow bar becomes a
	   short piece in the bottom corner. */
	.itd-hero-bars > span {
		opacity: 0.6;
	}

	.itd-hero-bars > span:nth-child( 3 ) {
		display: none;
	}

	.itd-hero-bars > span:nth-child( 5 ) {
		top: auto;
		right: -3vw;
		bottom: -6%;
		left: auto;
		width: 9vw;
		height: 34%;
		opacity: 1;
	}

	.itd-band::after {
		display: none;
	}

	.itd-phero::after {
		width: 50vw;
		height: 50vw;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.itd-photo img,
	.itd-photo::after,
	.itd-scard,
	.itd-logo,
	.itd-case::after,
	.itd-project-card__media::after,
	.entry-content .wp-block-button__link,
	.itd-latest .wp-block-post-featured-image img {
		transition: none;
	}
}

/* Site logo: the user's SVG drawn inline by the site's mu-plugin itd-site-logo.php (header,
   in place of the Customizer's PNG, and [itd_site_logo] in the footer). Draft B, "Scrittura"
   (user, 2026-09-25): letters one by one, then the cut drops in, then the strapline; the cut
   tilts on hover and focus. The intro plays on the first page of a visit only
   (html.itd-logo-intro, set in <head> by the mu-plugin). */
:root .custom-logo-link .itd-site-logo {
	display: block;
	height: 60px;
	width: auto;
	max-width: 100%;
	overflow: visible;
}

:root .itd-footer-logo .itd-site-logo {
	display: block;
	height: 52px;
	width: auto;
	overflow: visible;
}

:root .itd-footer-logo .itd-logo-link {
	display: inline-block;
	/* the footer's links are underlined with a border: not the logo */
	border: 0;
}

:root .itd-site-logo .l-slash {
	fill: var( --wp--preset--color--accent );
}

:root .itd-site-logo .l-in,
:root .itd-site-logo .l-touch,
:root .itd-site-logo .l-tag {
	fill: var( --wp--preset--color--secondary );
}

:root .itd-site-logo--footer .l-in,
:root .itd-site-logo--footer .l-touch,
:root .itd-site-logo--footer .l-tag {
	fill: var( --wp--preset--color--base );
}

:root .itd-site-logo g > *,
:root .itd-site-logo .l-slash {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: no-preference) {
	/* Site logo: intro (first page of a visit) and hover */
	.itd-logo-intro .itd-site-logo--header .l-in > *,
	.itd-logo-intro .itd-site-logo--header .l-touch > * {
		animation: itd-logo-up 0.45s cubic-bezier( 0.2, 0.8, 0.2, 1 ) both;
		animation-delay: calc( var( --i ) * 60ms );
	}

	.itd-logo-intro .itd-site-logo--header .l-slash {
		animation: itd-logo-drop 0.55s 0.45s cubic-bezier( 0.3, 1.4, 0.5, 1 ) both;
	}

	.itd-logo-intro .itd-site-logo--header .l-tag > * {
		animation: itd-logo-fade 0.35s both;
		animation-delay: calc( 0.8s + var( --i ) * 30ms );
	}

	:root .itd-site-logo .l-slash {
		transition: transform 0.3s cubic-bezier( 0.3, 1.4, 0.5, 1 );
	}

	:root a:hover > .itd-site-logo .l-slash,
	:root a:focus-visible > .itd-site-logo .l-slash {
		transform: rotate( -6deg );
	}

	@keyframes itd-logo-up {
		from { transform: translateY( 35% ); opacity: 0; }
		to { transform: none; opacity: 1; }
	}

	@keyframes itd-logo-drop {
		from { transform: translateY( -60% ) scaleY( 0.6 ); opacity: 0; }
		to { transform: none; opacity: 1; }
	}

	@keyframes itd-logo-fade {
		from { opacity: 0; }
		to { opacity: 1; }
	}
}