/**
 * Imago | component styles.
 *
 * Concept: "the quiet showroom" (DESIGN.md). Finished stands are shown like a showroom hung without
 * frames: rounded photos with the caption below, the isometric workshop drawing on a white rounded
 * sheet, a white ground with warm ink and large blush panels inset from the page edge. Everything is
 * flat: no shadows, rims or outlines around cards; surfaces separate by colour and space alone.
 * The logo red marks action only (primary buttons, focus, progress, link underlines, the closing CTA panel).
 *
 * Tokens come from theme.json. This file never sets a hex value or a px font size.
 * Semantic colour tokens (background, foreground, muted-foreground, border, input, primary, accent...)
 * are redefined per surface below, so components only use semantic tokens and stay readable everywhere.
 *
 * Naming: `.is-style-*` = block style variation, `.imago-*` = structural class set by a pattern or
 *         an imago-core block, `.site-*` = template parts, `.has-icon-*` = contextual icon (Lucide).
 */

/* ---------- Surfaces: semantic tokens per background ---------- */
:root {
	color-scheme: light;
}

.is-style-section-papier {
	--wp--preset--color--card: var(--wp--preset--color--white);
	--wp--preset--color--muted: var(--wp--preset--color--white);
}

.is-style-section-noir,
.is-style-section-noir-2 {
	--wp--preset--color--background: var(--wp--preset--color--black);
	--wp--preset--color--foreground: var(--wp--preset--color--white);
	--wp--preset--color--card: var(--wp--preset--color--graphite);
	--wp--preset--color--card-foreground: var(--wp--preset--color--white);
	--wp--preset--color--muted: var(--wp--preset--color--graphite);
	--wp--preset--color--muted-foreground: var(--wp--preset--color--silver);
	--wp--preset--color--border: color-mix(in srgb, var(--wp--preset--color--white) 30%, transparent);
	--wp--preset--color--input: var(--wp--preset--color--silver);
	--wp--preset--color--accent: var(--wp--preset--color--red-bright);
	--wp--preset--color--destructive: var(--wp--preset--color--red-bright);
	--wp--preset--color--ring: var(--wp--preset--color--red-bright);
	color-scheme: dark;
}

.is-style-section-noir-2 {
	--wp--preset--color--background: var(--wp--preset--color--graphite);
	--wp--preset--color--card: var(--wp--preset--color--graphite-2);
	--wp--preset--color--muted: var(--wp--preset--color--graphite-2);
}

.is-style-section-rouge {
	--wp--preset--color--background: var(--wp--preset--color--red);
	--wp--preset--color--foreground: var(--wp--preset--color--white);
	--wp--preset--color--muted-foreground: var(--wp--preset--color--white);
	--wp--preset--color--border: color-mix(in srgb, var(--wp--preset--color--white) 55%, transparent);
	--wp--preset--color--input: var(--wp--preset--color--white);
	--wp--preset--color--accent: var(--wp--preset--color--white);
	--wp--preset--color--primary: var(--wp--preset--color--black);
	--wp--preset--color--primary-foreground: var(--wp--preset--color--white);
	--wp--preset--color--ring: var(--wp--preset--color--white);
	color-scheme: dark;
}

/* Sections contain their children's margins (no white strip when a section has no top padding). */
.alignfull[class*="is-style-section-"] {
	display: flow-root;
}

/* Tinted sections are large rounded panels inset from the page edge. */
.alignfull.is-style-section-papier {
	margin-inline: var(--wp--style--root--padding-left, 1rem) !important;
	border-radius: var(--wp--custom--radius--xl);
}

:where(.wp-block-post-content, main) > .alignfull.is-style-section-papier + .alignfull,
:where(.wp-block-post-content, main) > .alignfull + .alignfull.is-style-section-papier,
:where(.wp-block-post-content, main) > .alignfull + .imago-cta {
	margin-top: var(--wp--preset--spacing--4) !important;
}

/*
 * Never two blush panels in a row (two rounded panels 16px apart read as a seam):
 * the second one falls back to the page ground and its tinted elements turn blush again.
 */
.alignfull.is-style-section-papier + .alignfull.is-style-section-papier {
	--wp--preset--color--card: var(--wp--preset--color--paper);
	--wp--preset--color--muted: var(--wp--preset--color--paper);
	margin-top: 0 !important;
	background-color: var(--wp--preset--color--background) !important;
}

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

html {
	--thumb: color-mix(in srgb, var(--wp--preset--color--red) 45%, var(--wp--preset--color--muted));
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	scrollbar-color: var(--thumb) var(--wp--preset--color--background);
	caret-color: var(--wp--preset--color--red);
}

body {
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	font-variant-numeric: lining-nums;
}

::selection {
	background: color-mix(in srgb, var(--wp--preset--color--red) 22%, var(--wp--preset--color--white));
	color: var(--wp--preset--color--foreground);
}

:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
	overflow-wrap: normal;
	hyphens: auto;
}

:where(p, li, dd) {
	text-wrap: pretty;
}

/* The wide cut of Archivo echoes the logo lettering; uppercase is kept for the page title only. */
:where(h1) {
	font-stretch: 125%;
	font-variation-settings: "wdth" var(--wp--custom--wdth--display);
	text-transform: uppercase;
}

:where(h2, h3) {
	font-variation-settings: "wdth" var(--wp--custom--wdth--title);
}

/* Full-width sections touch each other: no stray block gap between them, nor before the footer. */
.wp-site-blocks > *,
:where(.wp-block-post-content, main) > .alignfull + .alignfull,
:where(.wp-block-post-content, main) > .alignfull:last-child {
	margin-block: 0;
}

:target,
[id] {
	scroll-margin-top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--4));
}

/* Focus: visible for keyboard users only, never a box around a clicked element. */
:focus:not(:focus-visible) {
	outline: none;
}

:focus-visible {
	outline: var(--wp--custom--border-width--strong) solid var(--wp--preset--color--ring);
	outline-offset: 3px;
}

.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
}

/* Inline text colour (editor "Highlight" format) must never show the browser's yellow mark background. */
mark.has-inline-color {
	background-color: transparent;
}

/* ---------- Icons (Lucide, self-hosted, CSS masks: they take the text colour) ---------- */
.imago-icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
}

.has-icon-file-pen-line {
	--icon: url(../icons/file-pen-line.svg);
}

.has-icon-images {
	--icon: url(../icons/images.svg);
}

.has-icon-ruler {
	--icon: url(../icons/ruler.svg);
}

.has-icon-arrow-up {
	--icon: url(../icons/arrow-up.svg);
}

.has-icon-phone {
	--icon: url(../icons/phone.svg);
}

.has-icon-mail {
	--icon: url(../icons/mail.svg);
}

.has-icon-map-pin {
	--icon: url(../icons/map-pin.svg);
}

.has-icon-house {
	--icon: url(../icons/house.svg);
}

.has-icon-layers {
	--icon: url(../icons/layers.svg);
}

.has-icon-calendar {
	--icon: url(../icons/calendar.svg);
}

.has-icon-calendar-check {
	--icon: url(../icons/calendar-check.svg);
}

.has-icon-ruler-dimension-line {
	--icon: url(../icons/ruler-dimension-line.svg);
}

.has-icon-paperclip {
	--icon: url(../icons/paperclip.svg);
}

.has-icon-handshake {
	--icon: url(../icons/handshake.svg);
}

.has-icon-printer {
	--icon: url(../icons/printer.svg);
}

.has-icon-store {
	--icon: url(../icons/store.svg);
}

.has-icon-presentation {
	--icon: url(../icons/presentation.svg);
}

.has-icon-whatsapp,
.wp-block-button.is-style-whatsapp {
	--icon: url(../icons/brand-whatsapp.svg);
}

/* The small leading icon of a button or an icon link. */
.wp-block-button[class*="has-icon-"] > .wp-block-button__link::before,
.wp-block-button.is-style-whatsapp > .wp-block-button__link::before,
.imago-icon-link::before {
	content: "";
	width: 1.2em;
	height: 1.2em;
	flex: none;
	background: currentcolor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.imago-icon-link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
}

/* ---------- Header: a plain white bar that slides away on scroll down ---------- */
.site-header-part {
	z-index: 50;
	inset-inline: 0;
	position: sticky;
	top: 0;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	transition: transform var(--wp--custom--duration--base) var(--wp--custom--ease-out);
}

.has-hero .site-header-part {
	position: fixed;
}

.site-header-part.is-hidden:not(:focus-within) {
	transform: translateY(-100%);
}

.admin-bar .site-header-part {
	top: var(--wp-admin--admin-bar--height, 0);
}

.site-header {
	min-height: var(--wp--custom--header-height);
	display: flex;
	align-items: center;
	padding-top: env(safe-area-inset-top, 0);
}

.site-header__bar {
	width: 100%;
	gap: var(--wp--preset--spacing--6);
}

.site-header__logo {
	flex: none;
}

.site-header__logo img {
	width: 7rem !important;
	height: auto;
}

.site-header__actions {
	align-items: center;
}

/* Plain text links; hover and the current page turn red ink. */
.site-header .wp-block-navigation-item__content {
	color: var(--wp--preset--color--foreground);
	position: relative;
	padding: var(--wp--preset--spacing--2) 0;
}

/* Current page: a small red square before the label. */
.site-header .wp-block-navigation-item__content:hover,
.site-header .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

.site-header .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--7) !important;
}

.site-header__cta {
	flex-wrap: nowrap;
}

.site-header__tel > .wp-block-button__link {
	white-space: nowrap;
	font-weight: 600;
}

/*
 * Burger menu as soon as the menu, phone and quote button no longer fit on one line (< 1200px).
 * The Navigation block uses overlayMenu "always"; from 1200px the overlay is shown inline instead.
 */
.site-header .wp-block-navigation__responsive-container-open {
	width: var(--wp--custom--touch-target);
	height: var(--wp--custom--touch-target);
	display: grid;
	place-items: center;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--foreground);
}

@media (min-width: 1200px) {

	.site-header .wp-block-navigation__responsive-container-open {
		display: none;
	}

	.site-header .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
		display: block;
		position: relative;
		inset: auto;
		width: 100%;
		z-index: auto;
		padding: 0;
		background-color: transparent;
		color: inherit;
	}

	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__responsive-container-close {
		display: none;
	}

	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) :is(
		.wp-block-navigation__responsive-close,
		.wp-block-navigation__responsive-dialog,
		.wp-block-navigation__responsive-container-content
	) {
		display: contents;
	}

	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
		display: flex;
		flex-direction: row;
	}
}

/* The open mobile menu: white links on ink, the current one in bright red. */
.wp-block-navigation__responsive-container.is-menu-open {
	--wp--preset--color--foreground: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--black) !important;
	color: var(--wp--preset--color--white) !important;
	padding: calc(env(safe-area-inset-top, 0) + var(--wp--preset--spacing--6)) var(--wp--preset--spacing--6);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--3-xl);
	font-weight: 800;
	line-height: 1.15;
	font-variation-settings: "wdth" var(--wp--custom--wdth--title);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--white);
}

.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--red-bright);
}

.wp-block-navigation__responsive-container-close {
	width: var(--wp--custom--touch-target);
	height: var(--wp--custom--touch-target);
	display: grid;
	place-items: center;
}

@media (max-width: 1199px) {

	.site-header .site-header__tel {
		display: none;
	}

	/* The burger sits at the far right, after the quote button. */
	.site-header__actions > .wp-block-navigation {
		order: 2;
	}
}

@media (max-width: 479px) {

	.site-header__bar {
		gap: var(--wp--preset--spacing--3);
	}

	.site-header__logo img {
		width: 5.75rem !important;
	}

	/* Icon-only quote button on small phones; the label stays for screen readers. */
	.site-header__quote > .wp-block-button__link {
		width: var(--wp--custom--touch-target);
		min-height: var(--wp--custom--touch-target);
		padding: 0;
		gap: 0;
		font-size: 0;
	}

	.site-header .wp-block-button.site-header__quote[class*="has-icon-"] > .wp-block-button__link::before {
		width: 1.25rem;
		height: 1.25rem;
	}
}

/* ---------- Text styles ---------- */

/* A small label in sentence case, used only when it carries information (place, date, type). */
.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--wp--preset--color--muted-foreground);
}

.wp-block-post-terms.is-style-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.is-style-lede {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.55;
	max-width: 60ch;
	color: var(--wp--preset--color--muted-foreground);
}

.wp-block-heading.is-style-display {
	font-size: var(--wp--preset--font-size--5-xl);
	font-weight: 900;
	line-height: 0.98;
	letter-spacing: -0.03em;
	font-stretch: 125%;
	font-variation-settings: "wdth" var(--wp--custom--wdth--display);
	text-transform: uppercase;
}

/* Section title at h2 level, one step smaller (dense sections, cards). */
.wp-block-heading.is-style-title {
	font-size: var(--wp--preset--font-size--2-xl);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* Footer column title. */
.wp-block-heading.is-style-marker {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.4;
	font-variation-settings: normal;
}

/* ---------- Buttons: one solid pill system (primary, secondary, dark, WhatsApp, text link) ---------- */

/* .wp-element-button also covers <button>s rendered by imago-core blocks (form submit, map loader). */
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: var(--wp--custom--control-height);
	border-radius: var(--wp--custom--radius--full);
	white-space: nowrap;
	text-decoration: none;
	transition:
		background-color var(--wp--custom--duration--base) var(--wp--custom--ease-out),
		color var(--wp--custom--duration--base) var(--wp--custom--ease-out);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 84%, var(--wp--preset--color--black));
	color: var(--wp--preset--color--primary-foreground);
}

/* Secondary action ("outline" style): a quiet tinted pill. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--foreground);
	border: 0;
	padding-inline: var(--wp--preset--spacing--6);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--muted) 70%, var(--wp--preset--color--red) 12%);
	color: var(--wp--preset--color--foreground);
}

.is-style-section-papier .wp-block-button.is-style-outline > .wp-block-button__link {
	background: var(--wp--preset--color--muted);
}

/* On the red band the secondary pill is white with ink text (white text on a red tint fails AA). */
.is-style-section-rouge .wp-block-button.is-style-outline > .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

.is-style-section-rouge .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--white) 86%, var(--wp--preset--color--red));
	color: var(--wp--preset--color--black);
}

.wp-block-button.is-style-dark > .wp-block-button__link {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-dark > .wp-block-button__link:hover {
	background: var(--wp--preset--color--graphite-2);
}

.wp-block-button.is-style-whatsapp > .wp-block-button__link {
	background: var(--wp--preset--color--whatsapp);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-whatsapp > .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--whatsapp) 84%, var(--wp--preset--color--black));
}

.wp-block-button__link svg {
	width: 1.2em;
	height: 1.2em;
	flex: none;
}

/* Text link: a solid red underline that turns dashed on hover. */
.wp-block-button.is-style-text-link > .wp-block-button__link {
	min-height: var(--wp--custom--touch-target);
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--foreground);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--red);
	text-decoration-thickness: var(--wp--custom--border-width--strong);
	text-underline-offset: 0.35em;
}

.wp-block-button.is-style-text-link > .wp-block-button__link:hover {
	background: none;
	color: var(--wp--preset--color--foreground);
	text-decoration-style: dashed;
}

.site-header .wp-block-button.is-style-text-link > .wp-block-button__link {
	text-decoration: none;
}

/* Phones: content buttons go full width (header and text links excepted). */
@media (max-width: 599px) {

	:where(main, .wp-block-post-content) .wp-block-buttons:not(.site-header__cta) {
		flex-direction: column;
		align-items: stretch;
	}

	:where(main, .wp-block-post-content) .wp-block-buttons:not(.site-header__cta) > :not(.is-style-text-link),
	:where(main, .wp-block-post-content) .wp-block-buttons:not(.site-header__cta) > :not(.is-style-text-link) > a {
		width: 100%;
	}

	:where(main, .wp-block-post-content) .wp-block-buttons:not(.site-header__cta) > .is-style-text-link {
		align-self: flex-start;
	}
}

/* Stacked full-width buttons (hero, project CTA), label centred. */
.imago-stack {
	gap: var(--wp--preset--spacing--3) !important;
}

.imago-stack > .wp-block-button {
	width: 100%;
}

.imago-stack > .wp-block-button > .wp-block-button__link {
	width: 100%;
	min-height: 3.5rem;
}

.imago-stack > .wp-block-button.is-style-text-link {
	width: auto;
}

.imago-stack > .wp-block-button.is-style-text-link > .wp-block-button__link {
	min-height: var(--wp--custom--touch-target);
}

/* ---------- Photos: rounded, nothing around them, the caption below ---------- */
.wp-block-image img,
.wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--lg);
}

.wp-block-post-featured-image img {
	object-fit: cover;
}

.wp-block-image.is-style-tagged {
	margin-block: var(--wp--preset--spacing--4);
}

.wp-block-image.is-style-tagged > a {
	display: block;
}

.wp-block-image.is-style-tagged img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Captions never break inside a word. */
.wp-block-image.is-style-tagged .wp-element-caption {
	margin: var(--wp--preset--spacing--3) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--1);
	align-items: baseline;
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-align: left;
	overflow-wrap: normal;
	word-break: keep-all;
}

.wp-block-image.is-style-tagged .wp-element-caption strong {
	color: var(--wp--preset--color--muted-foreground);
	font-weight: 500;
}

.wp-block-image.is-style-tagged.imago-atelier__photo img {
	aspect-ratio: 4 / 5;
}

@media (max-width: 781px) {

	.wp-block-image.is-style-tagged.imago-atelier__photo img {
		aspect-ratio: 4 / 3;
	}
}

/* ---------- Page heroes: title on the left, a rounded photo on the right ---------- */
.wp-block-cover.is-style-page-hero {
	min-height: 0 !important;
	padding-top: calc(var(--wp--custom--header-height) + env(safe-area-inset-top, 0) + var(--wp--preset--spacing--block));
	padding-bottom: var(--wp--preset--spacing--block);
	align-items: flex-start;
	overflow: visible;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
}

.wp-block-cover.is-style-page-hero .wp-block-cover__background {
	display: none;
}

.wp-block-cover.is-style-page-hero .wp-block-cover__image-background {
	border-radius: var(--wp--custom--radius--lg);
}

.wp-block-cover.is-style-page-hero .wp-block-cover__inner-container {
	color: var(--wp--preset--color--foreground);
}

/* Page titles fit their column at every width (the column narrows beside the photo). */
.wp-block-cover.is-style-page-hero .wp-block-heading,
.wp-block-cover.is-style-page-hero .wp-block-post-title,
.wp-block-cover.is-style-page-hero .wp-block-query-title {
	font-size: clamp(1.625rem, 3.2vw + 0.5rem, var(--wp--preset--font-size--4-xl));
}

.wp-block-cover.is-style-page-hero .wp-block-heading,
.wp-block-cover.is-style-page-hero .wp-block-post-title {
	max-width: 20ch;
}

.wp-block-cover.is-style-page-hero .imago-crumbs {
	margin-bottom: var(--wp--preset--spacing--5);
}

.wp-block-cover.is-style-page-hero .imago-services.is-chips {
	margin-top: var(--wp--preset--spacing--8);
}

@media (min-width: 1024px) {

	/* The cover image becomes a photo in the right column. */
	.wp-block-cover.is-style-page-hero .wp-block-cover__image-background {
		top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--block));
		bottom: var(--wp--preset--spacing--block);
		inset-inline: auto max(var(--wp--style--root--padding-right, 2rem), calc((100% - 1320px) / 2));
		width: min(36%, 30rem);
		height: auto;
		object-fit: cover;
	}

	.wp-block-cover.is-style-page-hero .wp-block-cover__inner-container > .alignwide {
		padding-right: calc(min(36%, 30rem) + var(--wp--preset--spacing--block));
	}

	.wp-block-cover.is-style-page-hero:has(.wp-block-cover__image-background) {
		min-height: 32rem !important;
	}
}

@media (max-width: 1023px) {

	.wp-block-cover.is-style-page-hero {
		flex-direction: column;
		align-items: stretch;
	}

	.wp-block-cover.is-style-page-hero .wp-block-cover__image-background {
		position: static;
		order: 2;
		width: auto;
		height: clamp(12rem, 50vw, 22rem);
		margin-top: var(--wp--preset--spacing--8);
		margin-inline: var(--wp--style--root--padding-left, 1rem) var(--wp--style--root--padding-right, 1rem);
	}
}

/* ---------- Home hero ---------- */
.imago-hero {
	position: relative;
	padding-top: calc(var(--wp--custom--header-height) + env(safe-area-inset-top, 0) + var(--wp--preset--spacing--block));
	padding-bottom: var(--wp--preset--spacing--section);
}

/* The title runs the full width; two 4:3 photos (3D visual, then the stand being built) sit under it. */
.imago-hero__head {
	margin-bottom: var(--wp--preset--spacing--block);
}

.imago-hero__head .is-style-display {
	font-size: var(--wp--preset--font-size--6-xl);
	max-width: none;
	margin-top: var(--wp--preset--spacing--4);
}

.imago-hero__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--4);
}

/* The note under the photos: plain small text. */
.imago-slug {
	display: flex;
	align-items: center;
	max-width: none;
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--muted-foreground);
}

/* The CTA column: text on top, actions at the bottom, aligned with the photos. */
.imago-hero__side {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--8);
}

.imago-hero__side .is-style-lede {
	margin: 0;
	color: var(--wp--preset--color--foreground);
}

@media (max-width: 599px) {

	.imago-hero__pair .wp-block-image.is-style-tagged .wp-element-caption {
		padding-inline: var(--wp--preset--spacing--3);
		font-size: var(--wp--preset--font-size--xs);
	}
}

/* ---------- Section heads ---------- */
.imago-sec-head {
	gap: var(--wp--preset--spacing--7);
	margin-bottom: var(--wp--preset--spacing--block);
	align-items: flex-end;
}

.imago-sec-head > .wp-block-group {
	max-width: 54rem;
	gap: var(--wp--preset--spacing--4);
}

.imago-sec-head .is-style-lede {
	margin-top: 0;
}

/* ---------- Logos band ---------- */
.imago-logos-band {
	overflow: hidden;
}

.imago-logos-band > .alignwide {
	margin-bottom: var(--wp--preset--spacing--6);
	align-items: center;
}

.imago-logos-band__title.wp-block-heading {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	letter-spacing: -0.01em;
	font-variation-settings: normal;
}

/* ---------- Company facts: tinted cells separated by gaps, no rules ---------- */
.imago-cartouche {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--wp--preset--spacing--2) !important;
}

.imago-cartouche > .wp-block-group {
	display: grid;
	gap: var(--wp--preset--spacing--1);
	align-content: start;
	margin: 0 !important;
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--muted);
}

.imago-cartouche > .wp-block-group > * {
	margin: 0;
}

/* A fact with an icon: the Lucide icon in red ink above the label. */
.imago-cartouche > [class*="has-icon-"]::before {
	content: "";
	width: 1.75rem;
	height: 1.75rem;
	margin-bottom: var(--wp--preset--spacing--4);
	background: var(--wp--preset--color--accent);
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.imago-cartouche__label {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--muted-foreground);
}

.imago-cartouche__value {
	font-size: var(--wp--preset--font-size--2-xl);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-variation-settings: "wdth" var(--wp--custom--wdth--title);
}

.imago-cartouche__text {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted-foreground);
}

/* Home atelier section: two columns of facts. */
.imago-cartouche.is-compact {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: var(--wp--preset--spacing--8);
}

.imago-cartouche.is-compact .imago-cartouche__value {
	font-size: var(--wp--preset--font-size--xl);
}

/* ---------- Process: the workshop drawing that builds itself (signature of the home page) ---------- */
.imago-process__stage {
	display: grid;
	gap: var(--wp--preset--spacing--block);
	grid-template-columns: minmax(0, 1fr);
}

/* The drawing is a white sheet with a 2rem grid, rounded, without a border. */
.imago-process__drawing {
	margin: 0;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--card);
	--grid: color-mix(in srgb, var(--wp--preset--color--foreground) 7%, transparent);
	background-image:
		linear-gradient(var(--grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid) 1px, transparent 1px);
	background-size: 2rem 2rem;
}

.imago-process__drawing svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--wp--preset--color--foreground);
}

.imago-drawing .is-red {
	color: var(--wp--preset--color--red);
}

.imago-drawing .d-draw {
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.imago-drawing .d-thin {
	stroke-width: 1;
}

.imago-drawing .d-strong {
	stroke-width: 2.5;
}

.imago-drawing .d-grid {
	stroke: var(--wp--preset--color--muted-foreground);
	stroke-width: 1;
	stroke-dasharray: 3 5;
}

.imago-drawing .d-fill {
	stroke: currentcolor;
	stroke-width: 1.25;
	vector-effect: non-scaling-stroke;
}

.imago-drawing .d-panel {
	fill: color-mix(in srgb, var(--wp--preset--color--foreground) 6%, var(--wp--preset--color--background));
}

.imago-drawing .d-panel.d-shade {
	fill: color-mix(in srgb, var(--wp--preset--color--foreground) 14%, var(--wp--preset--color--background));
}

.imago-drawing .d-paper {
	fill: var(--wp--preset--color--background);
}

.imago-drawing .d-paper.d-shade {
	fill: color-mix(in srgb, var(--wp--preset--color--foreground) 10%, var(--wp--preset--color--background));
}

.imago-drawing .d-red {
	fill: var(--wp--preset--color--red);
	stroke: var(--wp--preset--color--red);
}

.imago-drawing .d-red.d-shade {
	fill: color-mix(in srgb, var(--wp--preset--color--red) 80%, var(--wp--preset--color--black));
}

.imago-drawing .d-print {
	fill: color-mix(in srgb, var(--wp--preset--color--red) 10%, var(--wp--preset--color--background));
	stroke: var(--wp--preset--color--red);
}

.imago-drawing .d-ink {
	fill: var(--wp--preset--color--foreground);
}

.imago-drawing .d-light {
	fill: color-mix(in srgb, var(--wp--preset--color--red) 12%, transparent);
	stroke: none;
}

.imago-drawing .d-small {
	font-weight: 500;
}

.imago-drawing text {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	fill: currentcolor;
	stroke: none;
	font-variant-numeric: tabular-nums;
}

/* Phones: larger labels in the drawing; the title block is left out. */
@media (max-width: 781px) {

	.imago-drawing text {
		font-size: 1.5rem;
	}

	.imago-drawing .imago-drawing__sheet {
		display: none;
	}
}

.imago-drawing .imago-drawing__stamp text {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 800;
}

/*
 * The steps as a layers panel: flat rounded rows, a round colour swatch per layer of the drawing,
 * the active layer on white. Without motion every step sits on white.
 */
.imago-process__steps {
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--2);
}

.imago-process__step {
	--swatch: var(--wp--preset--color--black);
	display: grid;
	grid-template-columns: 1.25rem minmax(0, 1fr);
	gap: var(--wp--preset--spacing--1) var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--5);
	border-radius: var(--wp--custom--radius--lg);
	transition: background-color var(--wp--custom--duration--base) var(--wp--custom--ease-out);
}

.imago-process__step:nth-child(1) {
	--swatch: var(--wp--preset--color--process-cyan);
}

.imago-process__step:nth-child(2) {
	--swatch: var(--wp--preset--color--process-magenta);
}

.imago-process__step:nth-child(3) {
	--swatch: var(--wp--preset--color--process-yellow);
}

.imago-process__step:nth-child(4) {
	--swatch: var(--wp--preset--color--red);
}

.imago-process__step:nth-child(5) {
	--swatch: var(--wp--preset--color--black);
}

.imago-process__step:nth-child(6) {
	--swatch: var(--wp--preset--color--graphite-2);
}

.imago-process__step::before {
	content: "";
	grid-row: span 2;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.3em;
	border-radius: var(--wp--custom--radius--full);
	background: var(--swatch);
}

.imago-process__step > * {
	margin: 0;
}

.imago-process__step .wp-block-heading {
	font-size: var(--wp--preset--font-size--xl);
}

.imago-process__step p {
	color: var(--wp--preset--color--muted-foreground);
}

.imago-process__step.is-active,
.imago-process:not(.has-motion) .imago-process__step {
	background: var(--wp--preset--color--muted);
}

/* Desktop: the drawing stays on screen (sticky) while the steps scroll past; ScrollTrigger scrubs it. */
@media (min-width: 1024px) {

	.imago-process__stage {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: start;
	}

	.imago-process__sticky {
		position: sticky;
		top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--6));
	}

	/* Each layer row gets scroll room so the drawing has time to build. */
	.has-motion .imago-process__steps {
		gap: 30svh;
		padding-block: 10svh 30svh;
	}

	.has-motion .imago-process__step:not(.is-active) {
		color: var(--wp--preset--color--muted-foreground);
	}
}

/* ---------- Timeline (about): three steps across, an icon tile each, a red trace drawn on scroll ---------- */
.imago-timeline {
	--tile: 3.5rem;
	--gap: var(--wp--preset--spacing--block);
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap);
}

/* The rail behind the tiles, and its red trace. */
.imago-timeline::before,
.imago-timeline::after {
	content: "";
	position: absolute;
	top: calc(var(--tile) / 2 - 1px);
	left: calc(var(--tile) / 2);

	/* The rail ends on the last tile. */
	right: calc((100% - 2 * var(--gap)) / 3 - var(--tile) / 2);
	height: var(--wp--custom--border-width--strong);
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--paper);
}

.imago-timeline::after {
	background: var(--wp--preset--color--red);
	transform-origin: left center;
}

.imago-timeline__item {
	position: relative;
	z-index: 1;
	padding-top: calc(var(--tile) + var(--wp--preset--spacing--6));
}

/* The icon tile: blush square with rounded corners, the Lucide icon in red ink on top. */
.imago-timeline__item::before,
.imago-timeline__item::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: var(--tile);
	height: var(--tile);
}

.imago-timeline__item::before {
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--paper);
}

.imago-timeline__item::after {
	inset: 0 auto auto 0;
	margin: calc((var(--tile) - 1.5rem) / 2);
	width: 1.5rem;
	height: 1.5rem;
	background: var(--wp--preset--color--accent);
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.imago-timeline__item > * {
	margin: 0;
}

.imago-timeline__year {
	font-size: var(--wp--preset--font-size--2-xl);
	overflow-wrap: normal;
	hyphens: none;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variation-settings: "wdth" var(--wp--custom--wdth--display);
	color: var(--wp--preset--color--accent);
}

.imago-timeline__title.wp-block-heading {
	margin-top: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 800;
}

.imago-timeline__text {
	margin-top: var(--wp--preset--spacing--2) !important;
	max-width: 32ch;
	color: var(--wp--preset--color--muted-foreground);
}

/* Phones and small tablets: the steps stack, the rail runs down the tiles. */
@media (max-width: 781px) {

	.imago-timeline {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--10);
	}

	.imago-timeline::before,
	.imago-timeline::after {
		top: calc(var(--tile) / 2);
		bottom: calc(var(--tile) / 2);
		left: calc(var(--tile) / 2 - 1px);
		right: auto;
		width: var(--wp--custom--border-width--strong);
		height: auto;
	}

	.imago-timeline::after {
		transform-origin: center top;
	}

	.imago-timeline__item {
		padding-top: 0;
		padding-left: calc(var(--tile) + var(--wp--preset--spacing--5));
		min-height: var(--tile);
	}

	.imago-timeline__year {
		font-size: var(--wp--preset--font-size--xl);
		line-height: var(--tile);
	}

	.imago-timeline__title.wp-block-heading {
		margin-top: var(--wp--preset--spacing--1);
	}
}

/*
 * Scroll-driven entrance (About page). The trace draws across the rail; each tile settles as the
 * trace reaches it, then its text follows. Without support, or with reduced motion, all is shown.
 */
@supports (animation-timeline: view()) {

	@media (prefers-reduced-motion: no-preference) {

		.imago-timeline::after {
			animation: imago-trace linear both;
			animation-timeline: view();
			animation-range: entry 60% cover 55%;
		}

		.imago-timeline__item {
			animation: imago-step linear both;
			animation-timeline: view();
			animation-range: entry 40% cover 40%;
		}

		.imago-timeline__item::before,
		.imago-timeline__item::after {
			animation: imago-tile linear both;
			animation-timeline: inherit;
			animation-range: inherit;
		}

		@media (min-width: 782px) {

			/* All three steps share one row: their timing follows the trace from left to right. */
			.imago-timeline__item {
				animation-timeline: --imago-timeline;
			}

			.imago-timeline {
				view-timeline: --imago-timeline;
			}

			.imago-timeline__item:nth-child(1) {
				animation-range: entry 60% cover 35%;
			}

			.imago-timeline__item:nth-child(2) {
				animation-range: entry 80% cover 45%;
			}

			.imago-timeline__item:nth-child(3) {
				animation-range: entry 100% cover 55%;
			}
		}

		/* Company facts: each cell is laid down from left to right, like a print coming out. */
		.imago-cartouche.is-reveal > .wp-block-group {
			animation: imago-lay linear both;
			animation-timeline: view();
			animation-range: entry 30% cover 35%;
		}

		.imago-cartouche.is-reveal > .wp-block-group:nth-child(2) {
			animation-range: entry 45% cover 40%;
		}

		.imago-cartouche.is-reveal > .wp-block-group:nth-child(3) {
			animation-range: entry 60% cover 45%;
		}

		.imago-cartouche.is-reveal > .wp-block-group:nth-child(4) {
			animation-range: entry 75% cover 50%;
		}
	}
}

@keyframes imago-trace {

	from {
		transform: scale(0, 1);
	}

	to {
		transform: scale(1, 1);
	}
}

@media (max-width: 781px) {

	@keyframes imago-trace {

		from {
			transform: scale(1, 0);
		}

		to {
			transform: scale(1, 1);
		}
	}
}

/* Only movement: the text keeps its full contrast at every scroll position. */
@keyframes imago-step {

	from {
		translate: var(--wp--preset--spacing--6) 0;
	}

	to {
		translate: 0 0;
	}
}

/* Phones: the steps follow the vertical trace, and never move past the screen edge. */
@media (max-width: 781px) {

	@keyframes imago-step {

		from {
			translate: 0 var(--wp--preset--spacing--6);
		}

		to {
			translate: 0 0;
		}
	}
}

@keyframes imago-tile {

	from {
		scale: 0.6;
	}

	to {
		scale: 1;
	}
}

@keyframes imago-lay {

	from {
		clip-path: inset(0 100% 0 0 round var(--wp--custom--radius--md));
	}

	to {
		clip-path: inset(0 0 0 0 round var(--wp--custom--radius--md));
	}
}

/* ---------- Lists ---------- */

/* Service features: a check in a circle, aligned on the first line of text. */
.wp-block-list.is-style-checks {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: var(--wp--preset--spacing--3);
}

.wp-block-list.is-style-checks > li {
	position: relative;
	padding-left: 2rem;
}

.wp-block-list.is-style-checks > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc((1lh - 1.25rem) / 2);
	width: 1.25rem;
	height: 1.25rem;
	background: var(--wp--preset--color--accent);
	-webkit-mask: url(../icons/circle-check.svg) center / contain no-repeat;
	mask: url(../icons/circle-check.svg) center / contain no-repeat;
}

.wp-block-list.is-style-lined {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-lined > li {
	padding-block: var(--wp--preset--spacing--3);
	border-bottom: var(--wp--custom--border-width--field) solid var(--wp--preset--color--border);
}

.wp-block-list.is-style-plain {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: var(--wp--preset--spacing--1);
}

.wp-block-list.is-style-plain a {
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
	text-decoration: none;
}

/* ---------- FAQ ---------- */
.wp-block-details.is-style-faq {
	margin: 0;
	border-bottom: var(--wp--custom--border-width--field) solid var(--wp--preset--color--border);
}

.wp-block-details.is-style-faq:first-child {
	border-top: var(--wp--custom--border-width--field) solid var(--wp--preset--color--border);
}

.wp-block-details.is-style-faq summary {
	cursor: pointer;
	list-style: none;
	position: relative;
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--10) var(--wp--preset--spacing--5) 0;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
}

.wp-block-details.is-style-faq summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.is-style-faq summary::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: -0.75rem;
	background: var(--wp--preset--color--accent);
	-webkit-mask: url(../icons/plus.svg) center / contain no-repeat;
	mask: url(../icons/plus.svg) center / contain no-repeat;
	transition: transform var(--wp--custom--duration--base) var(--wp--custom--ease-out);
}

.wp-block-details.is-style-faq[open] summary::after {
	transform: rotate(45deg);
}

.wp-block-details.is-style-faq > p {
	margin-top: 0;
	padding-bottom: var(--wp--preset--spacing--5);
	color: var(--wp--preset--color--muted-foreground);
}

/* ---------- Project page: text hero, full-width photo, story ---------- */
.imago-project-hero {
	padding-bottom: var(--wp--preset--spacing--block);
}

.imago-project-hero__row {
	margin-top: var(--wp--preset--spacing--8);
	gap: var(--wp--preset--spacing--8) !important;
}

.imago-project-hero__title {
	flex: 1 1 32rem;
}

.imago-project-hero__title .wp-block-post-title {
	margin: var(--wp--preset--spacing--3) 0 0;
	font-size: var(--wp--preset--font-size--5-xl);
}

/* The domain line sits under the title as meta, not above it. */
.imago-project-hero__title .wp-block-post-terms {
	margin-top: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	color: var(--wp--preset--color--muted-foreground);
}

.imago-project-hero__lede {
	flex: 0 1 28rem;
	margin: 0;
}

.wp-block-post-featured-image.imago-project-photo {
	margin-block: var(--wp--preset--spacing--4) !important;
}

.wp-block-post-featured-image.imago-project-photo img {
	width: 100%;
	height: clamp(18rem, 46vw, 40rem);
	object-fit: cover;
}

/* No story written yet: no empty band under the facts. */
.imago-project-body:not(:has(> *)) {
	display: none;
}

.imago-project-body .wp-block-image img {
	width: 100%;
	object-fit: cover;
	margin-inline: auto;
}

/* ---------- Call-to-action panel: the closing red band, inset and rounded ---------- */
.imago-cta {
	overflow: hidden;
	margin-inline: var(--wp--style--root--padding-left, 1rem) !important;
	border-radius: var(--wp--custom--radius--xl);
}

.imago-cta__main > * {
	margin-block: 0;
}

.imago-cta__main > * + * {
	margin-top: var(--wp--preset--spacing--6);
}

.imago-cta__title.wp-block-heading {
	max-width: 14ch;
	font-size: var(--wp--preset--font-size--5-xl);
	font-weight: 900;
	line-height: 0.98;
	letter-spacing: -0.03em;
	font-variation-settings: "wdth" var(--wp--custom--wdth--display);
}

.imago-cta .is-style-lede {
	max-width: 44ch;
}

/* Two equal pills side by side, 56px tall like the hero buttons. */
.imago-cta__actions.wp-block-buttons {
	margin-top: var(--wp--preset--spacing--10);
	gap: var(--wp--preset--spacing--3);
}

.imago-cta__actions > .wp-block-button > .wp-block-button__link {
	min-height: 3.5rem;
	padding-inline: var(--wp--preset--spacing--7);
}

/* What we need to price the job: a white sheet on the red panel, ink text. */
.imago-cta__brief {
	--wp--preset--color--foreground: var(--wp--preset--color--black);
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

.imago-cta__brief > * {
	margin-block: 0;
}

.imago-cta__brief-title.wp-block-heading {
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 800;
	letter-spacing: -0.01em;
}

.imago-cta__list {
	display: grid;
	gap: var(--wp--preset--spacing--2);
	margin: var(--wp--preset--spacing--6) 0 0;
	padding: 0;
	list-style: none;
}

.imago-cta__list > li {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	min-height: 3.5rem;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--paper);
	font-weight: 600;
	line-height: 1.35;
}

.imago-cta__list > li::before {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	background: var(--wp--preset--color--accent);
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.imago-cta__brief .imago-cta__list > li::before {
	background: var(--wp--preset--color--red-ink);
}

.imago-cta__note {
	margin-top: var(--wp--preset--spacing--5) !important;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--graphite-2);
}

@media (max-width: 781px) {

	.imago-cta__actions.wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.imago-cta__actions > .wp-block-button,
	.imago-cta__actions > .wp-block-button > .wp-block-button__link {
		width: 100%;
	}
}

/* ---------- Prose (legal) ---------- */
.imago-prose > .imago-prose__h.wp-block-heading {
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-top: var(--wp--preset--spacing--block);
	font-variation-settings: normal;
}

.imago-legal__row {
	display: grid;
	grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--1) var(--wp--preset--spacing--6);
	padding-block: var(--wp--preset--spacing--3);
	border-bottom: var(--wp--custom--border-width--field) solid var(--wp--preset--color--border);
}

.imago-legal__row > * {
	margin: 0;
}

.imago-legal__label.wp-block-heading {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0;
	color: var(--wp--preset--color--muted-foreground);
	font-variation-settings: normal;
}

@media (max-width: 560px) {

	.imago-legal__row {
		grid-template-columns: 1fr;
	}
}

/* ---------- Search (404, results): the same field system as the forms, as a pill ---------- */
.wp-block-search.imago-search {
	max-width: 36rem;
	margin-top: var(--wp--preset--spacing--8);
}

.wp-block-search .wp-block-search__inside-wrapper {
	gap: var(--wp--preset--spacing--2);
}

.wp-block-search .wp-block-search__input {
	min-height: var(--wp--custom--control-height);
	padding: 0 var(--wp--preset--spacing--6);
	border: var(--wp--custom--border-width--field) solid var(--wp--preset--color--input);
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	font: inherit;
}

.wp-block-search .wp-block-search__input:focus-visible {
	border-color: var(--wp--preset--color--foreground);
	outline-offset: 1px;
}

.wp-block-search .wp-block-search__button {
	margin: 0;
	padding-inline: var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--radius--full);
}

.imago-results .wp-block-post-template {
	display: grid;
	gap: var(--wp--preset--spacing--8);
	margin-top: var(--wp--preset--spacing--block);
	padding: 0;
	list-style: none;
}

.imago-results .wp-block-post-title a {
	text-decoration-color: var(--wp--preset--color--red);
	text-decoration-thickness: var(--wp--custom--border-width--strong);
	text-underline-offset: 0.2em;
}

/* ---------- Empty states (lists with nothing to show yet) ---------- */
.imago-empty {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	justify-items: start;
	padding: var(--wp--preset--spacing--8);
	border: var(--wp--custom--border-width--field) dashed var(--wp--preset--color--input);
	border-radius: var(--wp--custom--radius--lg);
	color: var(--wp--preset--color--foreground);
}

.imago-empty > * {
	margin: 0;
}

.imago-empty a {
	font-weight: 700;
	text-decoration-color: var(--wp--preset--color--red);
	text-decoration-thickness: var(--wp--custom--border-width--strong);
	text-underline-offset: 0.25em;
}

/* ---------- Footer: on the page ground, one block below the last panel ---------- */
.wp-site-blocks > footer {
	margin-top: var(--wp--preset--spacing--block) !important;
}

.site-footer {
	background: transparent;
	color: var(--wp--preset--color--foreground);
	padding-bottom: calc(var(--wp--preset--spacing--12) * 2 + env(safe-area-inset-bottom, 0px)) !important;
	font-size: var(--wp--preset--font-size--sm);
}

.site-footer a {
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-decoration-style: dashed;
	text-underline-offset: 0.25em;
}

.site-footer .imago-services.is-stacked {
	display: grid;
	gap: var(--wp--preset--spacing--1);
	padding: 0;
	border: 0;
}

.site-footer .imago-services.is-stacked a {
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
	padding: 0;
	border: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	letter-spacing: 0;
}

/* One row on desktop (brand, link columns, contacts); 3 columns on tablet; 2 then 1 on phones. */
.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--block) var(--wp--preset--spacing--8);
}

.site-footer__grid > * {
	margin: 0 !important;
}

@media (max-width: 1100px) {

	.site-footer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.site-footer__grid > :first-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {

	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--5);
	}
}

.site-footer__grid a {
	overflow-wrap: anywhere;
}

.site-footer__base {
	border-top: var(--wp--custom--border-width--field) solid var(--wp--preset--color--border);
	row-gap: var(--wp--preset--spacing--3);
}

.site-footer__base p {
	margin: 0;
}

.site-footer__base a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	min-height: var(--wp--custom--touch-target);
}

/* ---------- Touch: 44px targets ---------- */
@media (pointer: coarse) {

	.site-header .wp-block-navigation-item__content,
	.wp-block-list.is-style-plain a,
	.site-footer .imago-services.is-stacked a,
	.site-footer a {
		min-height: var(--wp--custom--touch-target);
		display: inline-flex;
		align-items: center;
	}

	/* Stand-alone links: logo, project métier, search results, pagination, empty-state actions. */
	.site-header__logo a,
	.wp-block-post-terms a,
	.imago-results .wp-block-post-title a,
	.wp-block-query-pagination a,
	.imago-empty a {
		min-height: var(--wp--custom--touch-target);
		display: inline-flex;
		align-items: center;
	}

	.wp-block-query-pagination-numbers .page-numbers {
		min-width: var(--wp--custom--touch-target);
		justify-content: center;
	}
}

/* ---------- Motion: one orchestrated moment per page (the process drawing); everything else stays still ---------- */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.001s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001s !important;
		scroll-behavior: auto !important;
	}
}